.page1{position: relative;font-size: 0;}
.page1 .download{display: inline-block; width:1.1rem;height: 0.325rem; position:absolute; bottom:1rem;left:50%;margin-left: -0.55rem;background: url('http://static.zplay.cn/wap/activity/demonWars/img/download_bg2.png') no-repeat;background-size: 100%;border-radius: 6px;text-align: center;}
.page1 .roleLink{position:absolute;bottom:0.15rem;width:100%; height:0.575rem;text-align:center;}
.page1 .roleLink{padding:0 0.15rem;box-sizing: border-box;font-size:0;}
.page1 .roleLink a{display: inline-block;/*margin-right: 0.15rem;*/}
.page1 .roleLink a:nth-of-type(1){background: url('http://static.zplay.cn/wap/activity/demonWars/img/left_role_bg.png') no-repeat;background-size: 100% auto;}
.page1 .roleLink a:nth-of-type(3){background: url('http://static.zplay.cn/wap/activity/demonWars/img/right_roleInfo_bg.png') no-repeat;background-size: 100% auto;}
.page1 .roleLink .roleItem{width:1.06rem;height:0.57rem;}
.page1 .roleLink a.last{margin-right: 0;}
.page1 .arrow_down{width:0.365rem;height:0.425rem;
    background: url("http://static.zplay.cn/wap/activity/demonWars/img/arrow_down.png") no-repeat;background-size: 100%;
    -webkit-animation: downArrow 2s linear infinite; -moz-animation: downArrow linear infinite;
    animation: downArrow 2s linear infinite;}
@-webkit-keyframes downArrow {    0% {-webkit-transform:  scale(0.6);}    100% { }}
@-ms-keyframes downArrow {    0% {        -ms-transform:  scale(0.6);    }    100% {  }}
@-moz-keyframes downArrow {    0% {        -moz-transform:  scale(0.6);    }    100% { }}
@keyframes downArrow {    0% {        transform: scale(0.6);   }    100% { }}
.video{position:absolute;right:0.18rem;bottom:2.5rem;width:.45rem;height:.45rem;background: url('http://static.zplay.cn/wap/activity/demonWars/img/video_bg.png') no-repeat;background-size:100%;}
.video .circle{position:absolute;right:0.064rem;top:0.065rem;display: inline-block;width:0.32rem;height: 0.32rem; background: url('http://static.zplay.cn/wap/activity/demonWars/img/video_circle.png') no-repeat;background-size:100%;
    -webkit-animation: btnRotate 1.5s linear infinite; -moz-animation: btnRotate 1.5s linear infinite; animation: btnRotate 1.5s linear infinite;
}
@-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);}}
@-ms-keyframes btnRotate {0% {-ms-transform: rotateZ(0deg);}100% {-ms-transform: rotateZ(360deg);}}
@keyframes btnRotate {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(360deg);}}
.header_nav{height: 0.4rem;}
.page2{height: 3.2rem; font-size:0;background:url('http://static.zplay.cn/wap/activity/demonWars/img/page2_bg.png') no-repeat center;}
.page2 .header_nav{background: url('http://static.zplay.cn/wap/activity/demonWars/img/page2_nav_bg.jpg') no-repeat;background-size: 100%;}
.slide_wrapper{margin: 0.2rem 0 0 0.15rem;}
.swiper-container{width:3rem;height: 2.5rem;z-index:0;}
.slide_wrapper img{width: 3rem;height: 2.2rem;}
.swiper-pagination .swiper-pagination-bullet{display: inline-block;width:0.07rem;height: 0.07rem;border-radius: 50%;background-color:#ffffff;opacity: 1;filter:alpha(opacity=100);}
.swiper-pagination .swiper-pagination-bullet-active{width:0.3rem;height: 0.07rem;border-radius: 0.03rem;background-color: #864102;margin-right: 0.04rem;}

.page3{height:2.56rem;}
.page3 .header_nav{height: 0.4rem;background: url('http://static.zplay.cn/wap/activity/demonWars/img/page3_nav_bg.jpg') no-repeat;background-size: 100%;font-size:0;}
.page3 .header_nav .nav_logo{display:inline-block;width:0.2rem;height: 0.2rem;background: url("http://static.zplay.cn/wap/activity/demonWars/img/news_nav_bg.png") no-repeat;background-size: 100%;}
.page3 .news_list{font-size:0;}
.page3 .news_list li{display: inline-block;width:100%;height: 0.35rem;border-bottom:1px solid #efefef;line-height: 0.35rem;background: #ffffff;}
.page3 .news_list li a{float:left;text-indent: 0.12rem; display: inline-block;width:82%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size:0.12rem;color:#999999;}
.page3 .news_list li span{float:right; margin-right:0.12rem;display: inline-block;width:0.35rem;font-size: 0.12rem;color:#694b1d;}
.page3 .btn_more{float:right;margin-right: 0.1rem;display: inline-block; line-height:0.4rem;width:0.14rem;height: 0.4rem;background: url('http://static.zplay.cn/wap/activity/demonWars/img/btn_more.png') no-repeat center;background-size: 100%;}
#video .v_close{font-size:0.2rem;z-index: 999;}

.page4{height:4.3rem;font-size:0; background: url('http://static.zplay.cn/wap/activity/demonWars/img/page4_bg.jpg') no-repeat;background-size: cover;}
.page4 .header_nav{height: 0.4rem;background: url('http://static.zplay.cn/wap/activity/demonWars/img/page4_nav_bg.jpg') no-repeat;background-size: 100%;}
.page4 .role_list{position:relative;height: 0.6rem;margin: 0.2rem 0.16rem 0.1rem;}
.page4 .arrow{position:absolute;width: 100%;}
.page4 .arrow div{width:100%;height: 0.6rem;font-size:0;}
.page4 .arrow .prev{float: left; width:0.1rem;height: 0.6rem; background: url('http://static.zplay.cn/wap/activity/demonWars/img/left_arrow.png') no-repeat left center;background-size: 100%;}
.page4 .arrow .next{float: right;right: 0; width:0.1rem;height: 0.6rem;background: url('http://static.zplay.cn/wap/activity/demonWars/img/right_arrow.png') no-repeat left center;background-size: 100%;}
.page4 .roles_wrapper{position: absolute;height: 0.6rem;margin:0 0.1rem;overflow: hidden;left:-0.02rem;}
.page4 .roles_con{height: 0.6rem;position: absolute;left:0;transition: -webkit-transform 1s;-webkit-transform: translate(0,0); }
.page4 .roles_con li{float:left;font-size:0;margin-top: 0.015rem;}
.page4 .roles_con li a{display:inline-block; width:0.65rem;height: 0.57rem;margin-right:0.04rem;vertical-align: middle;}
.page4 .roles_con li:nth-of-type(1) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role01y.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(2) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role02.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(3) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role03.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(4) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role04.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(5) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role05.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(6) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role06.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(7) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role07.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(8) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role08.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(9) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role09.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(10) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role10.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(11) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role11.png') no-repeat;background-size: 100%; }
.page4 .roles_con li:nth-of-type(12) a{background: url('http://static.zplay.cn/wap/activity/demonWars/img/role12.png') no-repeat;background-size: 100%;margin-right:0; }
.page4 .role_item .video_btn{position: absolute;width:1rem;height: 1rem;right:0;top:1.4rem;}
.page4 .role_items{margin-right: 0.17rem;position:relative;}
.page4 .role_items li{display: none;}