.wrap{position: relative;}
.main{position: relative;background-color: #6dbcfa;  min-height:1150px;  background:url("/web/zplay/activity/demonWars/img/mainBg.jpg") no-repeat center top; overflow:hidden;}
.main_bottom_shadow{width:100%;height: 20px;position:relative;bottom:-22px;background: url('/web/zplay/activity/demonWars/img/shadow-top.png') no-repeat;}
.role_top_shadow{width:100%;height: 20px;position:absolute;top:0px;background: url('/web/zplay/activity/demonWars/img/shadow-bottom.png') no-repeat;}
.leaf_con{width:100%;height: 850px; overflow: hidden;position:absolute;}
.leaf{width:100%; height: 742px;overflow:hidden;position: absolute;background: url('/web/zplay/activity/demonWars/img/main_leaf.png');}
.left_role,.right_role{position:absolute;width:100%;}
.left_role{
    width:608px;
    height: 678px;
    left: -784px;
    top: 165px;
    z-index:0;
    -webkit-animation: moveLeft linear  .6s .6s both;
    -moz-animation: moveLeft linear  .6s .6s both;
    -ms-animation: moveLeft linear  .6s .6s both;
    animation: moveLeft linear  .6s .6s both;
}
@-webkit-keyframes moveLeft{
    0%{-webkit-transform:  translate3d(400%,0,0);}
    50%{-webkit-transform:  translate3d(0,0,0);}
    75%{-webkit-transform:  translate3d(-50%,0,0);}}
.right_role{
    width:568px;
    height: 590px;
    right: -775px;
    top: 154px;
    z-index:0;
    -webkit-animation: moveRight linear  .6s .6s both;
    -moz-animation: moveRight linear  .6s .6s both;
    -ms-animation: moveRight linear  .6s .6s both;
    animation: moveRight linear .6s .6s both;
}
@-webkit-keyframes moveRight{
    0%{-webkit-transform:  translate3d(-400%,0,0);}
    50%{-webkit-transform:  translate3d(0,0,0);}
    75%{-webkit-transform:  translate3d(50%,0,0);}}
.main_role img{position:absolute;}
.downloadBox{ height:176px; padding-top:430px;position:relative;}
.code{ margin-left:377px}
.downBtnBox{ width:180px;}
.downBtnBox a{ display:block}
.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; }
.videoBtn{ background:url("/web/zplay/activity/demonWars/img/video_btnBg.png") center center no-repeat; display:block; width:119px; height:119px; text-align:center; line-height:119px; }
@-webkit-keyframes btnRotate {
    0% {-webkit-transform: rotateZ(0deg);}
    100% {-webkit-transform: rotateZ(360deg);}}
@-moz-keyframes btnRotate {0% {-moz-transform: rotateZ(0deg);}100% {-moz-transform: rotateZ(360deg);}}
@keyframes btnRotate {0% {transform: rotateZ(0deg);}
    100% {transform: rotateZ(360deg);}}
#btnVideo{ -webkit-animation: btnRotate 1.5s linear infinite; -moz-animation: btnRotate 1.5s linear infinite; animation: btnRotate 1.5s linear infinite;background:url("/web/zplay/activity/demonWars/img/video_quan.png") center center no-repeat; width:119px; height:119px; display:block;  }
.videoBg{ position:fixed; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; filter:alpha(opacity=50); z-index:10}
.introduce div{ width:292px; height:138px;overflow: hidden; }
.introduce a{ display:block; padding:20px; height:98px; width:252px; background:#664b3d; position:relative; font-size:30px; font-weight:bold; color:#fff; line-height:64px;}
.introduce div:hover img{-webkit-transform: scale(1.1);-moz-transform:scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1); -webkit-transition: all 0.5s; -moz-transition:all 0.5s;transition:all 0.5s; }
.introduce img{ position:absolute; right:0; bottom:0}
.icon_enter{ display:block; width:38px; height:38px;background:url("/web/zplay/activity/demonWars/img/icon_enter.png") no-repeat;}
.gameBanner{ width:520px; height:240px; position:relative; overflow:hidden}
.picList{ width:200%;}
.picList li{ float:left; width:50%; overflow:hidden; position:relative}
.picList img{ position:relative; left:50%;}
.dots{ position:absolute; left:50%; z-index:100;}
.gameBanner img{ margin-left:-260px}
.gameBanner .picList,.gameBanner .picList li{ height:240px;}
.gameBanner .dots{ bottom:5px;}
.gameBanner .dots li{ float:left; width:10px; height:10px; margin-right:8px; display:inline; cursor:pointer; background:url("/web/zplay/activity/demonWars/img/icon_round.png") no-repeat}
.gameBanner .dots .cur{ background:url("/web/zplay/activity/demonWars/img/icon_round_cur.png") no-repeat}
.banner{/* width:100%; */background: url('/web/zplay/activity/demonWars/img/banner_bg.jpg'); overflow:hidden; position: relative;}
/*.banner .picList,.banner .picList li{ height:900px;}
.banner .dots{ bottom:50px;}
.banner .dots li{ float:left; width:25px; height:25px; margin-right:20px; cursor:pointer;  background:url("/web/zplay/activity/demonWars/img/icon_round_big.png") no-repeat}
.banner .dots .cur{ width:65px;background:url("/web/zplay/activity/demonWars/img/icon_round_big_cur.png") no-repeat}
.banner img{ margin-left:-1000px;}*/
.news{ width:500px; background:#fff; height:240px;}
.guide{ width:160px;}
.guide a{ display:block; width:160px; height:80px;text-align: right;vertical-align: middle;}
.guide a:hover{}
.guideNovice{ background:url("/web/zplay/activity/demonWars/img/guideNovice.png") no-repeat;}
.guideVideo{ background:url("/web/zplay/activity/demonWars/img/guideVideo.png") no-repeat}
.guidePic{ background:url("/web/zplay/activity/demonWars/img/guidePic.png") no-repeat}
.guideNovice:hover{ background-position:0 -80px;}
.guideVideo:hover{ background-position:0 -80px}
.guidePic:hover{ background-position:0 -80px}
.tabTit{ padding:9px 20px 0 10px; height:36px; background:#efefef}
.tabTit li{ float:left; width:70px; height:36px; line-height:36px; text-align:center; font-size:16px; color:#666; font-weight:bold; cursor:pointer}
.tabTit .cur{ background:#fff}
.newsList{ padding:12px 20px;}
.newsList a{ display:block; overflow:hidden; color:#999; font-size:14px; height:28px; line-height:28px;}
.newsList .l{ width:360px; height:28px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.newsList a:hover{ color:#666}
.tabCon{ display:none}
.role{height:1000px;position:relative;background: url('/web/zplay/activity/demonWars/img/role.jpg') no-repeat;overflow: hidden;}
.role_wrap{position:relative;width:1200px;margin:0 auto;}
.news_more{width:16px;height: 16px;float: right; margin-top:-28px;margin-right: 20px; background: url('/web/zplay/activity/demonWars/img/btn_more_gray.png') no-repeat;cursor: pointer;}
.role_con{padding-top: 160px;}
.role_con .secondLv{margin-top: -108px;}
.role_con a{display: inline-block;width:228px;height: 211px;margin-right: 140px;}
.role_con a.end{margin-right: 0px;}
.role_odd{height: 211px;margin-bottom:10px;}
.role_even{margin-left: 184px;margin-top: -110px;}
.role .ys{background: url('/web/zplay/activity/demonWars/img/ys.png') no-repeat;}
.role .sn{background: url('/web/zplay/activity/demonWars/img/sn.png') no-repeat;}
.role .jd{background: url('/web/zplay/activity/demonWars/img/jd.png') no-repeat;}
.role .ke{background: url('/web/zplay/activity/demonWars/img/ke.png') no-repeat;}
.role .wst{background: url('/web/zplay/activity/demonWars/img/wst.png') no-repeat;}
.role .mkx{background: url('/web/zplay/activity/demonWars/img/mkx.png') no-repeat;}
.role .qdn{background: url('/web/zplay/activity/demonWars/img/qdn.png') no-repeat;}
.role .ml{background: url('/web/zplay/activity/demonWars/img/ml.png') no-repeat;}
.role .hl{background: url('/web/zplay/activity/demonWars/img/hl.png') no-repeat;}
.role .lb{background: url('/web/zplay/activity/demonWars/img/lb.png') no-repeat;}
.role .wz{background: url('/web/zplay/activity/demonWars/img/wz.png') no-repeat;}
.role .yh{background: url('/web/zplay/activity/demonWars/img/yh.png') no-repeat;}

.role .ys:hover{background-position:0 -211px;}
.role .sn:hover{background-position:0 -211px;}
.role .jd:hover{background-position:0 -211px;}
.role .ke:hover{background-position:0 -211px;}
.role .wst:hover{background-position: 0 -211px;}
.role .mkx:hover{background-position: 0 -211px;}
.role .qdn:hover{background-position: 0 -211px;}
.role .ml:hover{background-position: 0 -211px;}
.role .hl:hover{background-position: 0 -211px;}
.role .lb:hover{background-position: 0 -211px;}
.role .wz:hover{background-position: 0 -211px;}
.role .yh:hover{background-position: 0 -211px;}

.co_media{position:absolute;bottom:80px;left:50%;margin-left:-600px;  height: 120px;background: url(/web/zplay/activity/demonWars/img/media.png) no-repeat center 18px;}
.co_media .media_wrap{overflow:hidden;width:1200px;height: 86px;margin-top: 38px;position:relative;}
.co_media .media_list{margin: 20px;white-space: nowrap;width:5000px; position:absolute;height:46px; }
.co_media .media_list li{float: left;margin-right: 10px;}
.co_media .media_list img{width:136px;height: 46px;}

.share{text-align: center;margin-top:240px;vertical-align: middle;}
.share_tip{display: inline-block;height: 24px;font-size:12px;margin-right:14px;vertical-align: middle;margin-top: -12px;}
.share_con {display: inline-block;height: 24px;line-height: 0;position: relative;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;}

/*动画效果*/
.cont{height:100%;}
.cont img {position: absolute;}
.cont .c-yun{left: -161px;top: 28px;-webkit-animation: fadeInRight ease-in-out .4s .4s both;-moz-animation: fadeInRight ease-in-out .4s .4s both;-ms-animation: fadeInRight ease-in-out .4s .4s both;animation: fadeInRight ease-in-out .4s .4s both}
.cont .c-bg {left: 296px;top: 200px;-webkit-animation: fadeInLeft ease-in-out .4s both;-moz-animation: fadeInLeft ease-in-out .4s both;-ms-animation: fadeInLeft ease-in-out .4s both;animation: fadeInLeft ease-in-out .4s both;}
.cont .tit {top: 680px;right: -23px;-webkit-animation: fadeInLeft ease-in-out .6s both;-moz-animation: fadeInLeft ease-in-out .6s both;-ms-animation: fadeInLeft ease-in-out .6s both;animation: fadeInLeft ease-in-out .6s both;}
.cont .people {-webkit-animation: fadeInRight ease-in-out .4s .4s both;-moz-animation: fadeInRight ease-in-out .4s .4s both;-ms-animation: fadeInRight ease-in-out .4s .4s both;animation: fadeInRight ease-in-out .4s .4s both}
.cont1 .people {left: -352px;top: 100px;}
.cont2 .people {left: -199px;top: 138px;}
.cont3 .people {left: -220px;top: 93px;}
.cont4 .people {left: -110px;top: 45px;}
@keyframes fadeInRight {0% {opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate3d(200%,0,0);-moz-transform: translate3d(200%,0,0);-ms-transform: translate3d(200%,0,0);transform: translate3d(200%,0,0);}100% {opacity: 1;filter: alpha(opacity=100);-webkit-transform: none}}
@keyframes fadeInLeft {0% {opacity: 0;filter: alpha(opacity=0);-webkit-transform: translate3d(-200%,0,0);-moz-transform: translate3d(-200%,0,0);-ms-transform: translate3d(-200%,0,0);transform: translate3d(-200%,0,0);}50%{opacity: 0.4;filter: alpha(opacity=40);-webkit-transform: translate3d(-100%,0,0);-ms-transform: translate3d(-100%,0,0);-moz-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0);}100% {opacity: 1;filter: alpha(opacity=100);-webkit-transform: none}}
.scroll-bar {position: absolute;left: 50%;margin-left: -104px;bottom: 50px;}
.scroll-bar a {background: url(/web/zplay/activity/demonWars/img/btn.png) no-repeat center;width: 27px;height: 27px;display: block;float: left;padding: 0 15px;margin: 0 5px 0 -20px;}
.scroll-bar a.current {background: url(/web/zplay/activity/demonWars/img/btn_active.png) no-repeat center;padding: 0 40px}
.container {width: 1200px;margin: 0 auto ;position: relative;height: 900px;}
.float_link{width:220px;height: 540px;background: url('/web/zplay/activity/demonWars/img/link_main_bg.png') no-repeat; position:absolute;top:50%;left:0;margin-top: -200px;-webkit-transition: all 0.5s;-moz-transition: all .5s;-ms-transition:all .5s;transition:all .5s; }
.float_link .linkCon{margin-top: 350px;margin-left: 20px;color:#812920;}
.float_link .item{display: inline-block;width: 180px;height: 20px;float: left;text-align: left;;font-size:14px;line-height: 20px;margin-bottom: 4px;}
.float_link .item_wb{margin-bottom: 0;text-indent: 15px;text-align: center;margin-top: 4px;}
.float_link .item_wb a{color:#89362a;}
.float_link span.icon_wb{display: inline-block;width:24px;height: 20px;margin-right: 10px; vertical-align: middle; background: url('/web/zplay/activity/demonWars/img/icon_wb.png') no-repeat center; }