@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: #0d1215;}

.box1{ 
	width: 100%;
	position: relative; 
	height: 860px; 
	background: url(../img/videoposter.jpg) center no-repeat;
	overflow: hidden;
}
.logo{
	width: 180px;
	height: 119px;
	background: url(../img/logo.png) no-repeat;
	position: absolute;
	top: 12px;
	left: 50%;
	margin-left: -90px;
	z-index: 14;
}
.wrap canvas{
	position: absolute;
    top: -540px;
    left: 50%;
    margin-left: -1129px;
    width: 2260px;
    z-index: 5;
}
.slogan{
	width: 601px;
    position: absolute;
    top: 140px;
    left: 50%;
    margin-left: -300px;
    z-index: 14;
}
.mask{
	width: 100%;
	height: 150px;
	position: absolute;
	bottom: -12px;
	left: 0;
	background: url(../img/mask2.png) no-repeat;
	z-index: 12;
}
.top-video {
    width: 100%;
    height: 860px;
    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;
}
.box3{
	width: 100%;
	height: 1270px;
	position: relative;
	top: -1px;
	background: url(../img/box3.jpg) center no-repeat;
}
.box2{
	width: 100%;
	height: 770px;
	position: relative;
	top: -1px;
	background: url(../img/box2.jpg) center no-repeat;
}
.box2 .title02{
	width: 522px;
	height: 81px;
	position: absolute;
	top: 60px;
	left: 0px;
	background: url(../img/tit02.png) no-repeat;
}
.icon_game{ position: absolute; top: 760px; left: 54px; z-index: 15;}
.icon_text{ position: absolute; top: 760px; left: 142px; z-index: 15; }
.bbs_btn{ position: absolute; top: 760px; right: 40px; width: 200px; height: 79px; background: url(../img/bbs_btn.png) no-repeat 0 0; z-index: 15;}

.box2 .tips{
	width: 553px;
	height: 160px;
	position: absolute;
	top: 570px;
	left: 50%;
	margin-left: -276px;
	background: url(../img/tips.png) no-repeat;
}
.box2 .role{
	width: 205px;
	height: 261px;
	background: url(../img/role.png) no-repeat;
	position: absolute;
	top: 405px;
	right: 18px;
}
.box2 .gift_box{
	width: 423px;
	height: 227px;
	background: url(../img/gift_box2.png) no-repeat;
	position: absolute;
	top: 330px;
	left: 50%;
	margin-left: -212px;
	-webkit-transition: opacity .6s 2s ease-in-out;
    transition: opacity .6s 2s ease-in-out;
    -webkit-animation: gifttop 2s ease-in-out infinite;
    animation: gifttop 2s ease-in-out infinite;
}
.box4{
	width: 100%;
	height: 1920px;
	position: relative;
	background: url(../img/box4.jpg) center no-repeat;
	top: -2px;
}
.box4 .title04{
	width: 522px;
	height: 82px;
	position: absolute;
	top: 2px;
	left: 0;
	background: url(../img/tit04.png) no-repeat;
}
.box4 .circle_box{
	width: 100%;
	height: 764px;
	position: absolute;
	top: 695px; 
	left: 0;
	background: url(../img/circle.png) no-repeat;
}
.hot_qiu_lf{
	width: 88px;
	height: 286px;
	background: url(../img/hot_qiu_lf.png) no-repeat;
	position: absolute;
	top: 60px;
	left: 0;
	z-index: 20;
	transform-origin: bottom center;
	-webkit-transform-origin: bottom center;
	-webkit-animation: roatelf 8s ease-in-out infinite;
    animation: roatelf 8s ease-in-out infinite; 

}

.hot_qiu_rt{
	width: 88px;
	height: 286px;
	background: url(../img/hot_qiu_rt.png) no-repeat;
	position: absolute;
	top: 200px;
	right: 0;
	z-index: 20;
	transform-origin: bottom center;
	-webkit-transform-origin: bottom center;
	-webkit-animation: roatert 6s ease-in-out infinite;
    animation: roatert 6s ease-in-out infinite; 
}
/*.cv_swiper.swiper-container{
	overflow: visible !important;
}*/
.cv_swiper{ 
	position:absolute; 
	width: 100%; 
	height: 594px; 
	top: 170px;
	left: 0;

}
.cv_swiper .swiper-slide{ 
	width: 100%; 
	height: 684px;
}

.cv_role01{
	width: 100%;
	height: 684px;
	background: url(../img/ts_role01.png) center top no-repeat;
	position: absolute;
	top: 0;
	left: 0px;
}
.cv_man01{
	width: 548px;
	height: 215px;
	position: absolute;
	top: 1124px;
	left: 50%;
	margin-left: -274px;
	background: url(../img/ts_text01.png) no-repeat;
	z-index: 20;
} 
.cv_role02{
	width: 100%;
	height: 684px;
	background: url(../img/ts_role02.png) center top no-repeat;
	position: absolute;
	top: 0;
	left: 0px;
}
.cv_role03{
	width: 100%;
	height: 684px;
	background: url(../img/ts_role03.png) center top no-repeat;
	position: absolute;
	top: 0;
	left: -31px;
}
.cv_role04{
	width: 100%;
	height: 684px;
	background: url(../img/ts_role04.png) center top no-repeat;
	position: absolute;
	top: 0;
	left: 0px;
}
.cv_role05{
	width: 100%;
	height: 684px;
	background: url(../img/ts_role05.png) center top no-repeat;
	position: absolute;
	top: 0;
	left: 0px;
}
.cv_role06{
	width: 100%;
	height: 684px;
	background: url(../img/ts_role06.png) center top no-repeat;
	position: absolute;
	top: 0;
	left: 0px;
}
.cv_man02{
	width: 548px;
	height: 215px;
	position: absolute;
	top: 1124px;
	left: 50%;
	margin-left: -274px;
	background: url(../img/ts_text02.png) no-repeat;
	z-index: 20;
} 
.cv_swiper .swiper-button-prev{ 
	left: 45px; 
	width: 29px; 
	height: 55px; 
	margin-top: -125px; 
	background: url(../img/screen_prev.png) no-repeat 0 0; 
	-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; 
}
.cv_swiper .swiper-button-next{ 
	right: 45px; 
	width: 29px; 
	height: 55px; 
	margin-top: -125px; 
	background: url(../img/screen_next.png) no-repeat 0 0; 
	-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;
}

.cv_man_box .cv_man{
	display: none;
}
.cv_man_box .cv_man.on{
	display: block;
}

.video_box{ 
	position: absolute; 
	top: 200px; 
	left: 50%;
	margin-left: -287px; 
	width: 574px; 
	height: 337px; 
	z-index: 30; 
}
.video_box video{ 
	position: absolute; 
	top: -1px; 
	width: 606px;  
	display: none;
	z-index: 25;
}
.video_box .video_btn{
	width: 94px;
	height: 82px;
	position: absolute;
	top: 119px;
	left: 50%;
	margin-left: -55px;
	z-index: 12;
}
.video_cover{ 
	position: absolute; 
	top: 0px; 
	width: 100%; 
	height: 337px; 
	background: url(../img/video_cover.png) top center no-repeat; 
	background-size: 100% auto; 
	z-index: 10;
}
.game_info{ 
	position: absolute; 
	top: 580px; 
	left: 50%;
	margin-left: -213px;
	width: 425px; 
	height: 195px;
	background: url(../img/info_txt.png) no-repeat;
}
.tip_text{
	position: absolute; 
	top: 760px; 
	width: 560px; 
	line-height: 34px; 
	font-size: 20px; 
	color: #3c4364; 
	text-indent: 36px;
}
.box4 .hot_img{
	width: 537px;
	height: 1022px;
	background: url(../img/hot_img.png) no-repeat;
	position: absolute;
	top: 860px;
	left: 50%;
	margin-left: -268px;
}
.box4 .hot_img .tese1{
	width: 525px;
	height: 235px;
	position: absolute;
	top: 84px;
	left: 50%;
	margin-left: -262px;
}
.box4 .hot_img .tese2{
	width: 525px;
	height: 235px;
	position: absolute;
	top: 434px;
	left: 50%;
	margin-left: -262px;
}
.box4 .hot_img .tese3{
	width: 525px;
	height: 235px;
	position: absolute;
	top: 787px;
	left: 50%;
	margin-left: -262px;
}
.box5{
	width: 100%;
	height: 870px;
	position: relative;
	background: url(../img/box5.jpg) center no-repeat;
	top: -4px;
}

.box5 .title05{
	width: 437px;
	height: 143px;
	position: absolute;
	top: 5px;
	left: 50%;
	margin-left: -218px;
	background: url(../img/tit05.png) no-repeat;
	z-index: 10;
}

.screen_swiper{
    position: absolute; 
    top: 243px;
    left: 50%;
    width: 408px; 
    height: 726px;
    margin-left: -204px;
}
.screen_swiper .swiper-container{ margin: 0 auto; width: 100%; height: 726px; }
.screen_swiper .swiper-button-prev{ 
	left: -90px; 
	width: 48px; 
	height: 92px; 
	margin-top: -34px; 
	background: url(../img/prev.png) no-repeat 0 0; 
	-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; 
}
.screen_swiper .swiper-button-next{ 
	right: -90px; 
	width: 48px; 
	height: 92px; 
	margin-top: -34px; 
	background: url(../img/next.png) no-repeat 0 0; 
	-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;
}
.screen_swiper .swiper-pagination{ left: 0; bottom: -170px; width: 100%; text-align: center; }
.screen_swiper .swiper-pagination-bullet{ width: 21px; height: 21px; margin: 0 11px; background: url(../img/bullet.png) no-repeat 0 0; opacity: 1; }
.screen_swiper .swiper-pagination-bullet-active{ background: url(../img/bullet_on.png) no-repeat 0 0; }
.cv_tab{ 
	position:absolute; 
	width: 268px; 
	height: 48px; 
	left:50%; 
	bottom: 120px; 
	margin-left: -134px; 
	z-index:10;
}
.cv_tab li{ 
	float:left; 
	width: 49px; 
	height: 48px; 
	margin: 0 2px; 
	background: url(../img/cover_tese.png) center no-repeat;
}
.cv_tab li.on{
	background: url(../img/cover_tese2.png) center no-repeat;
}
.box6{
	width: 100%;
	height: 1163px;
	position: relative;
	background: url(../img/box6.jpg) center no-repeat;
	top: -3px;
}

.box6 .title05{
	width: 522px;
	height: 82px;
	position: absolute;
	top: 20px;
	left: 0;
	background: url(../img/tit05.png) no-repeat;
	z-index: 10;
}
@-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)}
}

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

@keyframes gifttop {
    0% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
40% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(0px,10px,0)}
100% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}
@-webkit-keyframes roate {
    0% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
60% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(0px,10px,0)}
100% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}

@keyframes roatelf {
    0% {	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);}
40% {	transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);}
100% {	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes roatelf {
   0% {	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);}
40% {	transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);}
100% {	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);}
}
@keyframes roatert {
    0% {	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);}
40% {	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);}
100% {	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes roatert {
    0% {	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);}
40% {	transform: rotate(10deg);
	-webkit-transform: rotate(10deg);}
100% {	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);}
}
/*视频遮罩*/
.prompt{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 22;
	background-color: rgba(0,0,0,0.8);
	display: none;
}
.prompt.on{
	display: block;
}