.main{background: url('/web/zplay/activity/demonWars/img/hero_main_bg.jpg') no-repeat center; height:1240px;margin: 0 auto -200px; }
.hero_info_list{position:absolute;z-index: 0;}
.hero_info1{margin-left: -250px;}
.main_hero{width: 960px;height: 857px;overflow: hidden;}
.main_con{position: relative;margin: 86px auto 0;width:1200px;}
.main_hero{}
.hero_name{font-size: 70px;color:#003e5f;font-weight:bold;margin-bottom: 20px;line-height: 60px;text-indent:65px;}
.hero_con{color:#003e5f;font-size:16px;}
.hero_con span{font-weight: bold;}
.hero_con p{line-height: 32px;}
.skill_con{width:280px;}
.hero_con .skill{height: 80px;margin-top:10px; }
.hero_con .skill span{display: inline-block;height: 80px;width:70px;text-align: center;vertical-align: middle;cursor: pointer;}
.hero_con .skill span img{vertical-align: middle;}
.hero_con .skill span.active{background: url("/web/zplay/activity/demonWars/img/role/skill_bg.png") no-repeat center;}
.hero_con .skill_desc{border-radius: 5px;display: inline-block;min-height: 280px;}
.hero_con .skill_desc li{display:none;margin-top: 10px;}
.hero_con .skill_desc li p{padding:0 20px;}
.hero_con .skill_desc li.active{display: inline-block;}
.hero_con .skill_desc span{color:#ffffff;font-size:16px;font-weight: bold;line-height: 32px;}
.hero_con .skill_desc{color:#ffffff;font-size:14px;line-height: 1.5;background-color: #003e5f;margin-top: -15px;}
.hero_desc{color:#ffffff;font-size:14px;margin-top:15px}
.hero_desc .skill_name{font-size:16px;}
.hero_video {width:274px;height: 158px;border:3px solid #ffca00; margin-top:15px;}
.hero_video .poster{width:274px;height: 158px;}
.hero_video .play_icon{position:absolute;margin: 45px 0 0 103px ;  display:inline-block; width:68px;height: 68px;background: url('/web/zplay/activity/demonWars/img/role/icon_play.png') no-repeat;cursor: pointer;}
.hero_profile{position: absolute;left: 690px;}
.hero_profile .xumu{position:absolute; width:60px;height: 60px;background: url('/web/zplay/activity/demonWars/img/role/icon_xumu.png') no-repeat;cursor: pointer;z-index:1;}
.hero_profile .xumutxt{display: none; position:absolute;width:270px;height: 306px;background: url('/web/zplay/activity/demonWars/img/role/icon_xumutxt_bg.png') no-repeat;margin-left:-306px; }
.hero_profile .xumutxt h3{font-size:18px;color:#470e20;text-align: center;margin: 45px 0 25px;}
.hero_profile .xumutxt p{font-size:14px;color:#7c211f;line-height: 26px;text-align: center;}
.hero_list_con{position:relative;overflow: hidden;height: 630px;margin-top: 30px;}
.hero_avators{width:128px;height: 688px;position: absolute;right: 24px;}
.hero_avators .prev,.hero_avators .next{cursor: pointer; width:60px;height:18px;background: url('/web/zplay/activity/demonWars/img/role/icon_prev_next.png') no-repeat;position:absolute;margin-left: 33px;z-index:1}
.hero_avators .prev{background-position: 0 0;}
.hero_avators .next{background-position: 0 -22px;margin-top: 665px;}

.hero_list{display: inline-block;position: absolute;top:0;}
.hero_list li{float: left;display: inline-block;height: 145px;margin-bottom:15px;width:126px;background: url('/web/zplay/activity/demonWars/img/role/role_bg.png') no-repeat;cursor: pointer;}
.hero_list li.end{margin-bottom:0;}
.hero_list .hero1{background-position:0 0; }
.hero_list .hero2{background-position:-126px 0; }
.hero_list .hero3{background-position:-252px 0; }
.hero_list .hero4{background-position:-378px 0; }
.hero_list .hero5{background-position:-504px 0; }
.hero_list .hero6{background-position:-630px 0; }
.hero_list .hero7{background-position:-756px 0; }
.hero_list .hero8{background-position:-882px 0; }
.hero_list .hero9{background-position:-1008px 0; }
.hero_list .hero10{background-position:-1134px 0; }
.hero_list .hero11{background-position:-1260px 0; }
.hero_list .hero12{background-position:-1386px 0; }

.hero_list .hero1:hover{background-position:0 -145px; }
.hero_list .hero2:hover{background-position:-126px -145px; }
.hero_list .hero3:hover{background-position:-252px -145px; }
.hero_list .hero4:hover{background-position:-378px -145px; }
.hero_list .hero5:hover{background-position:-504px -145px; }
.hero_list .hero6:hover{background-position:-630px -145px; }
.hero_list .hero7:hover{background-position:-756px -145px; }
.hero_list .hero8:hover{background-position:-882px -145px; }
.hero_list .hero9:hover{background-position:-1008px -145px; }
.hero_list .hero10:hover{background-position:-1134px -145px; }
.hero_list .hero11:hover{background-position:-1260px -145px; }
.hero_list .hero12:hover{background-position:-1386px -145px; }


.videoBg{ position:fixed; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:10}
.pop_video{ position:fixed; width:700px; height:390px; left:50%; top:50%; margin-left:-350px; margin-top:-195px; background:#000; display:none; z-index:100}
.closeVideo{ position:absolute; top:0px; right:-40px; color:#fff; font-size:26px; font-weight:bold; cursor:pointer; width:40px; height:40px; text-align:center; line-height:40px; background:#000; opacity:0.5; z-index:50}
.video{ position:relative; z-index:50; color:#fff; line-height:30px; font-size:14px; }

.share{text-align: center;vertical-align: middle;padding-top: 35px;border-bottom: 1px solid #fff;padding-bottom: 10px;}
.share_tip{display: inline-block;height: 24px;font-size:12px;margin-right:14px;vertical-align: middle;margin-top: -30px;}
.share_con {display: inline-block;height: 24px;line-height: 0;top:11px;}
#share a{display: inline-block;margin-right:10px;width:24px;height: 24px;cursor: pointer;background: url('/web/zplay/activity/demonWars/img/icon_share.png') no-repeat;padding-left:0; }
#share a.bds_wx{background-position: 0 0;}
#share a.bds_wb{background-position: -24px 0;;}
#share a.bds_kj{background-position: -48px 0;}
#share a.bds_twb{background-position: -72px 0;}
#share a.bds_wx:hover{background-position: 0 -24px;}
#share a.bds_wb:hover{ background-position:-24px -24px;}
#share a.bds_kj:hover{background-position: -48px -24px;}
#share a.bds_twb:hover{background-position: -72px -24px;}

.welcome_footer{height: 208px;width: 100%;background: url('/web/zplay/activity/demonWars/img/first_footer_bg.png') no-repeat;}
.welcome_footer .subcon{height: 108px;padding-top: 0px;}
.footLogo{ padding:22px 0 0 108px}
.address{ width:584px; line-height:21px; color:#666; padding-top:36px;}
.address a{ color:#666;}

.main_hero{-webkit-animation: mainHero linear  .8s 0s both; }
@-webkit-keyframes mainHero {
    0% {opacity: 0;filter: alpha(opacity=0);}
    100% {opacity: 1;filter: alpha(opacity=100)}}

.hero_name{-webkit-animation: heroName linear  .4s 0s both; }
@-webkit-keyframes heroName {
    0% {-webkit-transform: scale(5) ;opacity: 0;filter: alpha(opacity=0);}
    100% {-webkit-transform: scale(1);opacity: 1;filter: alpha(opacity=100)}}

.hero_con p{-webkit-animation: heroDesc linear  .4s .4s both;}
@-webkit-keyframes heroDesc {
    0% {-webkit-transform: translateY(100px);opacity: 0;filter: alpha(opacity=0);}
    100% {-webkit-transform: translateY(0);opacity: 1;filter: alpha(opacity=100)}}

.skill_con{-webkit-animation: skillCon linear  .4s .5s both; }
@-webkit-keyframes skillCon {
    0% {-webkit-transform: translateY(100px);opacity: 0;filter: alpha(opacity=0);}
    100% {-webkit-transform: translateY(0);opacity: 1;filter: alpha(opacity=100)}}

.hero_video{-webkit-animation: skillCon linear  .4s .9s both; }
@-webkit-keyframes heroVideo {
    0% {-webkit-transform: translateY(100px);opacity: 0;filter: alpha(opacity=0);}
    100% {-webkit-transform: translateY(0);opacity: 1;filter: alpha(opacity=100)}}