@charset "utf-8";
body{ margin:0; padding:0; font:normal 100% "Microsoft YaHei",\5b8b\4f53,Arial, Helvetica, sans-serif; -webkit-tap-highlight-color: rgba(0,0,0,0);}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin:0; padding:0;}
area{outline:none;}
img{ border:0;}
input{ -webkit-appearance: none; outline: none; border-radius: 0;}
input::-ms-clear{display:none;}
ol,ul{list-style:none;}
a{ text-decoration:none; outline:none; -webkit-tap-highlight-color:transparent;}
video::-webkit-media-controls-fullscreen-button{
	display: none !important;
}
.cf:after {content:"";display:block;height:0;clear:both;} 
.cf {zoom:1;}
.f_left{ float: left; }
.f_right{ float: right; }
.pub_clr{clear:both;font-size:0;height:0;line-height:0;overflow:hidden;}
.auto{left: 50%; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0);}
.box_justify{ display: -webkit-box; display: -moz-box; display: -o-box; display: -ms-box; -webkit-box-pack:justify; -moz-box-pack:justify; -o-box-pack:justify; -ms-box-pack:justify; box-pack:justify;}

html, body{overflow-x: hidden; width: 640px; max-width: 640px; margin: 0 auto; background-color: #242228;}

.box1{ 
	position: relative; 
	height: 932px; 
	
}

.logo{
	width: 108px;
	height: 181px;
	background: url(../img/logo.png) no-repeat;
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -54px;
	z-index: 30;
}
.top-video {
    width: 100%;
    height: 932px;
    overflow: hidden;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    background: url(../img/videoposter.jpg) top center no-repeat;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.top-video video {
    width: 100%;
    background: transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
}
.mask{
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../img/mask.png) no-repeat;
	z-index: 15;
}
.box6{ 
	width: 100%;
	height: 670px; 
	position: relative; 
	top: -1px;
	background: url(../img/box6.jpg) center no-repeat;
}
.box6 .prize_box{
	position: absolute;
	top: 138px;
	left: 0;
}
.box6 .lottery_btn{
	display: block;
	width: 408px;
	height: 108px;
	background: url(../img/lottery_btn.png) no-repeat;
	position: absolute;
	top: 520px;
	left: 50%;
	margin-left: -204px;
}
.box2{
	width: 100%;
	height: 836px;
	position: relative;
	background: url(../img/box2.jpg) center no-repeat;
	top: -2px;
}
.box2 .title02{
	width: 475px;
	height: 121px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -237px;
}
.icon_game{ position: absolute; top: 807px; left: 37px; z-index: 15;}
.icon_text{ position: absolute; top: 831px; left: 172px; z-index: 15;}
.bbs_btn{ position: absolute; top: 825px; right: 22px; width: 198px; height: 68px; background: url(../img/bbs_btn.png) no-repeat 0 0; z-index: 15;}

.box2 .gift_box{
	width: 583px;
	height: 512px;
	background: url(../img/gift_box.png) no-repeat;
	position: absolute;
	top: 154px;
	left: 50%;
	margin-left: -291px;
}
.box2 .game_info{ 
	position: absolute; 
	top: 682px; 
	left: 50%;
	margin-left: -280px;
	width: 560px; 
	font-size: 18px; 
	color: #fff; 
}
.box2 .game_info p{
	line-height: 34px;
	margin-bottom: 0px;
}
.box2 .game_info p span{
	color: #feec96;
}
.box3{
	width: 100%;
	height: 684px;
	position: relative;
	background: url(../img/box3.jpg) center no-repeat;
	top: -3px;
}
.video_box{ 
	position: absolute; 
	top: 155px; 
	left: 0;
	width: 100%; 
	height: 414px;  
	z-index: 20;
}
.video_box video{ 
	position: absolute; 
	top: 35px; 
	left: 50%;
	margin-left: -269px;
	width: 538px;  
	display: none;
	z-index: 20;
}
.video_box .video_btn{
	width: 94px;
	height: 113px;
	position: absolute;
	top: 130px;
	left: 50%;
	margin-left: -47px;
	z-index: 12;
}
.video_cover{ 
	position: absolute; 
	top: 0px; 
	width: 538px; 
	height: 377px; 
	z-index: 10;
}
.game_info{ 
	position: absolute; 
	top: 514px; 
	left: 50%;
	margin-left: -270px;
	width: 540px; 
	line-height: 26px; 
	font-size: 20px; 
	color: #fff; 
}
.game_info p{
	line-height: 30px;
	margin-bottom: 44px;
}
.box3 .game_info p span{
	color: #fff;
}
.box4{
	width: 100%;
	height: 920px;
	position: relative;
	background: url(../img/box4.jpg) center no-repeat;
	top: -4px;
}

/*特色*/
.tese-wrap{ position:relative; width:640px; height: 770px; padding-top: 142px; overflow:hidden;}
.tese-hidden{ position:relative; width:560px; height: 770px; margin:0 auto; overflow:hidden;}
#tese-swiper{ position:absolute; width: 1200px; height: 770px; left:50%; margin-left:-600px; top:0;}
#tese-swiper .swiper-wrapper .swiper-slide,#tese-swiper .swiper-wrapper .swiper-slide img{ width: 400px; height: 710px;opacity: 1;}
#tese-swiper .swiper-wrapper .swiper-slide-active,#tese-swiper .swiper-wrapper .swiper-slide-active img{opacity: 1;}
.cover-tese-pagination{z-index: 10; position:absolute; width: 604px !important; height: 20px; left: 50% !important; margin-left: -302px; top: 865px; text-align:center;}
.cover-tese-pagination  .swiper-pagination-bullet{border-radius: 0 !important; display:inline-block; width: 90px; height: 5px; margin:0 5px !important; background:url(../img/bullet.png); background-size:100% auto; opacity:1;}
.cover-tese-pagination  .swiper-pagination-bullet-active{ background:url(../img/bullet_on.png); background-size:100% auto;}
.prev,.next{ position:absolute; width: 153px; height: 70px; top: 460px;z-index: 8;}
.prev{ 
	left: 20px; 
	background:url(../img/prev_btn.png);
	background-size:100% auto;
	-webkit-transition: opacity .6s 2s ease-in-out;
    transition: opacity .6s 2s ease-in-out;
    -webkit-animation: screenprev 2s ease-in-out infinite;
    animation: screenprev 2s ease-in-out infinite;
}
.next{ 
	right: 20px; 
	background:url(../img/next_btn.png);
	background-size:100% auto;
	-webkit-transition: opacity .6s 2s ease-in-out;
    transition: opacity .6s 2s ease-in-out;
    -webkit-animation: screennext 2s ease-in-out infinite;
    animation: screennext 2s ease-in-out infinite;
}
.swiper-container-3d .swiper-slide-shadow-right{
	background-image: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,0.8)),to(rgba(0,0,0,0.5)));
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.8),rgba(0,0,0,0.5));
    background-image: -moz-linear-gradient(left,rgba(0,0,0,0.8),rgba(0,0,0,0.5));
    background-image: -o-linear-gradient(left,rgba(0,0,0,0.8),rgba(0,0,0,0.5));
    background-image: linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.5));
}
.swiper-container-3d .swiper-slide-shadow-left{
	background-image: -webkit-gradient(linear,right top,left top,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0.8)));
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.5),rgba(0,0,0,0.8));
    background-image: -moz-linear-gradient(left,rgba(0,0,0,0.5),rgba(0,0,0,0.8));
    background-image: -o-linear-gradient(left,rgba(0,0,0,0.5),rgba(0,0,0,0.8));
    background-image: linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.8));
}

@-webkit-keyframes screenprev {
    0% {opacity:0.5;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
60% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(-10px,0px,0)}
100% {opacity:0.5;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}

@keyframes screenprev {
    0% {opacity:0.5;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
40% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(-10px,0px,0)}
100% {opacity:0.5;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}

@-webkit-keyframes screennext {
    0% {opacity:0.5;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
60% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(10px,0px,0)}
100% {opacity:0.5;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}

@keyframes screennext {
    0% {opacity:0.5;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
40% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(10px,0px,0)}
100% {opacity:0.5;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}
.box5{
	width: 100%;
	height: 972px;
	position: relative;
	background: url(../img/box5.jpg) center no-repeat;
	top: -5px;
}
.menpai_swiper{ 
	position:absolute; 
	width:100%; 
	height: 716px; 
	left: 0;  
	top: 80px;
	opacity: 1;
}
.menpai_swiper .swiper-slide{ width:100%; height:1124px;}
.mp_riyue{
	width: 607px; 
	height: 712px;
	background:url(../img/role01.png) center bottom no-repeat;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 10;
}

.mp_huashan{ 
	width: 628px; 
	height: 603px;
	position: absolute;
	top: 48px;
	left: 0px;
	background:url(../img/role02.png) center bottom no-repeat;
	z-index: 10;
}
.mp_wudang{ 
	width: 616px; 
	height: 567px;
	position: absolute;
	top: 60px;
	left: 0;
	background:url(../img/role03.png) center bottom no-repeat;
	z-index: 10;
}
.mp_shaolin{ 
	width: 607px; 
	height: 608px;
	position: absolute;
	top: 40px;
	right: 0px;
	background:url(../img/role04.png) center bottom no-repeat;
	z-index: 10;
}
.mp_hengshan{ 
	width: 607px; 
	height: 561px;
	position: absolute;
	top: 64px;
	right: 0px;
	background:url(../img/role05.png) center bottom no-repeat;
	z-index: 10;
}
.mp_yaojing{ 
	width: 100%; 
	height: 649px;
	position: absolute;
	top: 80px;
	left: 0px;
	background:url(../img/role06.png) center bottom no-repeat;
	z-index: 10;
}
.mp_yaoren{ 
	width: 536px; 
	height: 655px;
	position: absolute;
	top: 50px;
	left: 50px;
	background:url(../img/role07.png) center bottom no-repeat;
	z-index: 10;
}

.type_box{ position:absolute; width: 131px; height: 248px; left: -640px; top: 0px;}
.type_box img{ display:none; position:absolute; left:0; top: 0px;}
.type_tab{ position:absolute; width: 100%; height: 122px; left: 0px; top:0; overflow:hidden;}

.menpai_swiper .swiper-slide.swiper-slide-active .type_box {
    -webkit-animation: tworight 0.3s ease-in-out 0s;
    animation: tworight 0.3s ease-in-out 0s;
    -webkit-animation-fill-mode:forwards;
}
/*.menpai_swiper .swiper-slide.swiper-slide-active .renwu{
	-webkit-animation: twoleft 0.3s ease-in-out 0s;
    animation: twoleft 0.3s ease-in-out 0s;
    -webkit-animation-fill-mode:forwards;
}*/
@-webkit-keyframes twoleft {
    0%{
        left: 206px;
    }
    100%{
        left: 0px;
    }
}

@-webkit-keyframes tworight {
    0%{
        left: -640px;
    }
    100%{
        left: 42px;
    }
}


.mp_tab{ 
	position:absolute; 
	width: 590px; 
	height: 71px; 
	left: 50%; 
	margin-left: -292px;
	top: 736px; 
	z-index:10;
}

.mp_tab li{ float:left; width: 71px; height: 71px; margin: 0 6px; cursor:pointer;}
#mp_tab1{ 
	background:url(../img/mp_tab1.png) center no-repeat;
	margin-top: 35px;
}
#mp_tab1.on{ 
	background:url(../img/mp_tab1_on.png) center no-repeat;
	margin-top: 35px;
}
#mp_tab2{
	background:url(../img/mp_tab2.png) center no-repeat;
	margin-top: 15px;
}
#mp_tab2.on{
	background:url(../img/mp_tab2_on.png) center no-repeat;
	margin-top: 15px;
}
#mp_tab3{
	background:url(../img/mp_tab3.png) center no-repeat;
}
#mp_tab3.on{
    background:url(../img/mp_tab3_on.png) center no-repeat;
}
#mp_tab4{
	background:url(../img/mp_tab4.png) center no-repeat;
}
#mp_tab4.on{
	background:url(../img/mp_tab4_on.png) center no-repeat;
}
#mp_tab5{
	background:url(../img/mp_tab5.png) center no-repeat;
}
#mp_tab5.on{
	background:url(../img/mp_tab5_on.png) center no-repeat;
}
#mp_tab6{
	background:url(../img/mp_tab6.png) center no-repeat;
	margin-top: 15px;
}
#mp_tab6.on{
	background:url(../img/mp_tab6_on.png) center no-repeat;
	margin-top: 15px;
}
#mp_tab7{
	background:url(../img/mp_tab7.png) center no-repeat;
	margin-top: 35px;
}
#mp_tab7.on{
	background:url(../img/mp_tab7_on.png) center no-repeat;
	margin-top: 35px;
}
.yy_btn{
	display: block;
	width: 408px;
	height: 108px;
	background: url(../img/yy_btn.png) no-repeat;
	position: absolute;
	top: 900px;
	left: 50%;
	margin-left: -204px;

}
.box7{
	width: 100%;
	height: 700px;
	position: relative;
	background: url(../img/box7.jpg) center no-repeat;
	top: -3px;
}
.box7 .buji_box{
	width: 582px;
	height: 381px;
	background: url(../img/buji_box.png) no-repeat;
	position: absolute;
	top: 154px;
	left: 50%;
	margin-left: -291px;
}
.box7 .buji_info{ 
	position: absolute; 
	top: 546px; 
	left: 50%;
	margin-left: -280px;
	width: 560px; 
	font-size: 18px; 
	color: #fff; 
}
.box7 .buji_info p{
	line-height: 34px;
	margin-bottom: 0px;
}
/*视频遮罩*/
.prompt{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: rgba(0,0,0,0.8);
	display: none;
}
.prompt.on{
	display: block;
}