@charset "utf-8";
/* CSS Document */

.h_i_tab_tit { width: 740px; height: 42px; display: block; border:none; margin-top:30px; margin-bottom:20px;}
.h_i_tab_tit li { width: 158px; height: 41px; border:none; float: left; margin:0 10px; }
.h_i_tab_tit li:last-child { border-right: none; }
.h_i_tab_tit li a { display: block; width: 158px; height: 41px; background: url(../img/herointroduce/hero_in_tab.png) no-repeat; }
.h_i_tab_tit li .tab1 { background-position: 0px 0px; }
.h_i_tab_tit .on .tab1 { background-position: 0px -41px; }
.h_i_tab_tit li .tab2 { background-position: 0px -82px; }
.h_i_tab_tit .on .tab2 { background-position: 0px -123px; }
.h_i_tab_tit li .tab3 { background-position: 0px -164px; }
.h_i_tab_tit .on .tab3 { background-position: 0px -205px; }
.h_i_tab_tit li .tab4 { background-position: 0px -246px; }
.h_i_tab_tit .on .tab4 { background-position: 0px -287px; }
.h_i_tab_con { width: 750px; height: auto; }
.h_i_tab_con li { display: none; }
.h_i_tab_con li ul { overflow: hidden; }
.h_i_tab_con li ul li { display: block; float: left; width: 180px; height: 195px; margin: 10px 0px; cursor: pointer; }


.h_i_tab_con li ul li {display:block; float:none; width:596px; height:71px; margin:15px auto; cursor:pointer; border:2px solid #000; border-radius:10px;}
.h_i_tab_con li ul.defense_hero li:hover, .h_i_tab_con li ul.defense_hero li.on {background:#fff; box-shadow:0px 0px 8px #2dbde7; border:2px solid #2dbde7; border-radius:10px;}
.h_i_tab_con li ul.defense_hero li:hover >img , .h_i_tab_con li ul.defense_hero li.on >img {opacity:0.9;}
.h_i_tab_con li ul.sup_hero li:hover, .h_i_tab_con li ul.sup_hero li.on {background:#fff; box-shadow:0px 0px 8px #43e72d; border:2px solid #43e72d; border-radius:10px;}
.h_i_tab_con li ul.sup_hero li:hover >img , .h_i_tab_con li ul.sup_hero li.on >img {opacity:0.9;}
.h_i_tab_con li ul.magic_hero li:hover, .h_i_tab_con li ul.magic_hero li.on {background:#fff; box-shadow:0px 0px 8px #e7802d; border:2px solid #E7802D; border-radius:10px;}
.h_i_tab_con li ul.magic_hero li:hover >img , .h_i_tab_con li ul.magic_hero li.on >img {opacity:0.9;}
.h_i_tab_con li ul.goddess li {display:block; float:left; width:176px; height:417px; border:none; cursor:pointer; margin:5px;}
.h_i_tab_con li ul.goddess li:hover >img , .h_i_tab_con li ul.goddess li.on >img {opacity:0.9;}

.defense_hero_con li, .sup_hero_con li, .magic_hero_con li ,.goddess_con li { width:1193px; height:750px; position:fixed; top:50%; left:50%; margin-top:-300px; margin-left:-597px; z-index:999; display:none; transform: scale(0.7);}
.hero_box {background:url(../img/herointroduce/hero_bg.jpg) center bottom no-repeat; width:1193px; height:720px;}

.goddess_box {background:url(../img/herointroduce/goddess_bg.jpg) center bottom no-repeat; width:1193px; height:720px;}
.hero_tit {width:100%; height:99px; background:url(../img/herointroduce/hero_tit_bg.png) repeat; position:absolute; top:122px;}
.hero_name {position:absolute; right:200px;}
.hero_icon1 {width:70px; height:71px; position:absolute;background:url(../img/herointroduce/hero_tit_icon1.png) no-repeat; top:20px; right:30px;}
.hero_icon2 {width:70px; height:71px; position:absolute;background:url(../img/herointroduce/hero_tit_icon2.png) no-repeat; top:20px; right:30px;}
.hero_icon3 {width:70px; height:71px; position:absolute;background:url(../img/herointroduce/hero_tit_icon3.png) no-repeat; top:20px; right:30px;}
.goddess_icon {width:105px; height:31px; padding-top:5px; padding-left:45px; position:absolute;background:url(../img/herointroduce/character_listen_off.png) no-repeat; top:50px; right:100px;}
.hero_icon {width:85px; height:31px; padding-top:5px; padding-left:40px; position:absolute;background:url(../img/herointroduce/character_listen_off.png) no-repeat; top:60px; right:110px;}
.hero_man {width:650px; position:absolute; left:15px;}
.hero_intro_con {width:475px; height:469px; position:absolute; bottom:55px; right:120px;}
.hero_txt_bg1 {background:url(../img/herointroduce/hero_txt_bg1.png) no-repeat; width:475px; height:469px;}
.hero_txt_bg2 {background:url(../img/herointroduce/hero_txt_bg2.png) no-repeat; width:475px; height:469px;}
.hero_txt_bg3 {background:url(../img/herointroduce/hero_txt_bg3.png) no-repeat; width:475px; height:469px;}
.hero_intro {position:absolute; top:160px; left:50px;}
.goddess_intro_con  {width:663px; height:469px; position:absolute; bottom:55px; right:0px;}
.goddess_intro {position:absolute; top:160px; left:0px;}


.defense_hero_con li .left_btn, .sup_hero_con li .left_btn, .magic_hero_con li .left_btn, .goddess_con li .left_btn { position: absolute; width: 300px; height: 300px; display: block; top: 220px; left: 0; background: url(../img/herointroduce/prev.png) no-repeat; opacity: 0; transition: 0.6s; cursor: pointer; }
.defense_hero_con li .left_btn:hover, .sup_hero_con li .left_btn:hover, .magic_hero_con li .left_btn:hover, .goddess_con li .left_btn:hover { opacity: 1; }
.defense_hero_con li .right_btn, .sup_hero_con li .right_btn, .magic_hero_con li .right_btn, .goddess_con li .right_btn  { position: absolute; width: 300px; height: 360px; display: block; top: 220px; right: 0; background: url(../img/herointroduce/next.png) no-repeat; opacity: 0; transition: 0.6s; cursor: pointer; }
.defense_hero_con li .right_btn:hover, .sup_hero_con li .right_btn:hover, .magic_hero_con li .right_btn:hover, .goddess_con li .right_btn:hover, .goddess_con li .right_btn :hover { opacity: 1; }

.listen_btn {width:20px; height:20px; background: url(../img/herointroduce/listen_btnIcon.png) no-repeat; display:block; float:left; margin:0 3px; cursor:pointer;}
.listen_btn01{ background-position:0 0;}
.listen_btn02{ background-position:-20px 0;}
.listen_btn03{ background-position:-40px 0;}
.listen_btn audio{opacity:0; cursor:pointer;}