`@charset "utf-8";
body{ margin:0; padding:0; font-size:14px; font-family:"Microsoft Yahei",Arial, Helvetica, sans-serif; overflow-x:hidden;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
area{outline:none;}
img{ border:0;}
ol,ul{list-style:none;}
a{ font-family:"Microsoft Yahei",Arial, Helvetica, sans-serif;text-decoration:none;outline:none; cursor:pointer;}
a:hover{ text-decoration:none;}
span{outline:none;}
.clearfix:after {content:"";display:block;height:0;clear:both;} 
.clearfix {zoom:1;}
body,html{
	height: 100%;
	overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 10px;
}/* 滚动条整体宽度 */
::-webkit-scrollbar-track{
    background-color: #dad7b4;
}/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb{
    background-color: #fff;
    border-radius: 0px;
}
.prompt{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	display: none;
}
.wrap{ 
	position:relative; 
	width:100%; 
	height:100%; 
	background: #202020;
	margin:0 auto; 
	overflow:hidden;
}
/*loading*/
.loading_box{
	width: 100%;
    height: 100%;
    background: url(../img/loading_bg.jpg) top center no-repeat;
    background-size: cover;
	position: relative;
	overflow: hidden;
}
.index_tit{
	width: 676px;
	height: 38px;
	background: url(../img/loading_tit.png) no-repeat;
	position: absolute;
	top: 62px;
	left: 50%;
	margin-left: -338px;
}
.zhuzi{
	width: 260px;
	height: 360px;
	background: url(../img/zhuzi.png) no-repeat;
	position: absolute;
	top: 0;
	right: 0;
}
.loading_bar{
	width: 679px;
	height: 824px;
	background: url(../img/loading_box6654.png?v1) no-repeat;
	position: absolute;
	top: 122px;
	left: 50%;
	margin-left: -340px;
}
.logo{
	width: 193px;
	height: 131px;
	background: url(../img/logo.png) no-repeat;
	position: absolute;
	top: 0;
	left: 30px;
}
.loading_info{
	width: 600px;
	height: 131px;
	position: absolute;
	top: 980px;
	left: 50%;
	margin-left: -300px;
}
.loading_info .w{
	height: 0;
	background: url(../img/loading_text6654.png?v1) no-repeat;
}
.loading_progress{
	width: 646px;
	height: 4px;
	position: absolute;
	top: 775px;
	left: 18px;
}
.loading_bar_per{
	width: 0px;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.loading{
	width: 646px;
	height: 4px;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
}
.loading_icon{
	width: 49px;
	height: 40px;
	background: url(../img/loading_icon.png) no-repeat;
	position: absolute;
	top: -18px;
	left: -15px;
}
.start_btn{
    width: 417px;
    height: 90px;
    background: url(../img/start_btn1b26.png?v2) no-repeat;
    position: absolute;
    top: 670px;
    left: 50%;
    margin-left: -208px;
    display: none;
}
.wait_tip{
	width: 431px;
	height: 107px;
	background: url(../img/wait_tip.png) no-repeat;
	position: absolute;
	top: 660px;
	left: 50%;
	margin-left: -215px;
	-webkit-transition: opacity .6s 2s ease-in-out;
  transition: opacity .6s 2s ease-in-out;
  -webkit-animation: waittip 1s ease-in-out infinite;
  animation: waittip 1s ease-in-out infinite;
}
@-webkit-keyframes waittip {
  0% {opacity:0.5;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
60% {opacity:1;
  -webkit-transform:translate3d(0,3px,0);
  transform:translate3d(0,3px,0);}
100% {opacity:0.5;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
}
/*开场视频页*/
.start_video_page{
	position: relative;
	width: 100%; 
	height: 100%;
	/*background: #1f1f1f;*/
	background: #222;
	display: none; 
}
.start_video_page video {
    width: 100%;
    background: transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 5;
    position: absolute;
    left: 0;
    top: 0;
}
.video_mask{
    width: 100%;
    height: 476px;
    position: absolute;
    bottom: -178px;
    left: 0;
    z-index: 6;
    background: url(../img/video_mask.png) no-repeat;
}
.kip_btn{
	width: 175px;
	height: 87px;
	background: url(../img/skip.png) no-repeat;
	position: absolute;
	top: 50px;
	right: 40px;
    z-index: 8;
}
/*第一页*/
.page1{
	background: url(../img/page1.jpg) no-repeat center top;
	background-size: cover;
	position: relative;
	width: 100%; 
	height: 100%;
	display: none; 
}
.worn_pop{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7); 
	z-index: 10;
	display: none;
}
.pop{
	width: 641px;
	height: 340px;
	background: url(../img/worn_pop1.png) no-repeat;
	position: absolute;
	top: 35%;
	left: 50%;
	margin-left: -320px;
}
.pop .close_btn{
	width: 201px;
	height: 65px;
	background: url(../img/close_btn.png) no-repeat;
	position: absolute;
	top: 224px;
	left: 50%;
	margin-left: -100px;
}
.kuang_box{
	width: 679px;
	height: 918px;
	background: url(../img/kuang.png) no-repeat;
	position: absolute;
	top: 122px;
	left: 50%;
	margin-left: -340px;
}
.page1 .pointer_icon{
	width: 98px;
	height: 58px;
	background: url(../img/pointer_icon.png) no-repeat;
	position: absolute;
	top: 40px;
	right: 6px;
	z-index: 1;
	-webkit-animation: finger 1s ease-in-out infinite;
    animation: finger 1s ease-in-out infinite;
}

.page2_tit{
	width: 510px;
	height: 82px;
	background: url(../img/page2_tit1b26.png?v2) no-repeat;
	position: absolute;
	top: 158px;
	left: 70px;
}
.option_box{
	width: 628px;
	height: 640px;
	overflow-y: scroll;
	position: absolute;
	top: 260px;
	left: 50%;
	margin-left: -314px;
}
.option_list{
	width: 511px;
	height: 100%;
	margin: 0 auto;
}
.option_list li{
	width: 511px;
	height: 104px;
	margin: 13px 0;
	position: relative;
}
.option_list li.option1{
	background: url(../img/option11b26.png?v2) no-repeat;
}
.option_list li.option2{
	background: url(../img/option_wyy6654.png?v1) no-repeat;
}
.option_list li.option3{
	background: url(../img/option_em6654.png?v1) no-repeat;
}
.option_list li.option4{
	background: url(../img/option_zl6654.png?v1) no-repeat;
}
.option_list li.option5{
	background: url(../img/option_mfr1b26.png?v2) no-repeat;
}
.option_list li.option6{
	background: url(../img/option_xy6654.png?v1) no-repeat;
}
.option_list li.option7{
	background: url(../img/option_mwq6654.png?v1) no-repeat;
}
.option_list li.option8{
	background: url(../img/option_wd6654.png?v1) no-repeat;
}
.option_list li.option9{
	background: url(../img/option91b26.png?v2) no-repeat;
}
/*第二页*/
.page2{
	/*background: url(../img/page2.jpg) no-repeat center top;*/
	background-size: cover;
	position: relative;
	width: 100%; 
	height: 100%;
	display: none; 
}
.back_btn{
	width: 202px;
	height: 77px;
	background: url(../img/back_btn.png) no-repeat;
	position: absolute;
	top: 50px;
	left: 46px;
	display: none;
}
.pointer_box{
    width: 336px;
    height: 336px;
    position: absolute;
    top: 42%;
    left: 50%;
    margin-left: -168px;
    display: none;
}
.pointer{
	width: 336px;
	height: 336px;
	background: url(../img/pointer.png) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}
.rotate{
	width: 222px;
	height: 222px;
	background: url(../img/rotate.png) no-repeat;
	position: absolute;
	top: 59px;
	left: 59px;
	-webkit-animation: rotate 40s linear infinite;
	-moz-animation: rotate 40s linear infinite;
	-o-animation: rotate 40s linear infinite;
	animation: rotate 40s linear infinite;
}
/*旋转*/
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(360deg)}
}
.role_slogan{
	width: 620px;
	height: 171px;
	background: url(../img/role_wyy_slogan.png) no-repeat;
	position: absolute;
	top: 61%;
	left: 50%;
	margin-left: -310px;
	display: none;
}
.interact_video{
	position: relative;
	width: 100%; 
	height: 100%;
	/*background: #1f1f1f;*/
	background: #222;
	
}
.interact_video video {
    width: 100%;
    background: transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
}
/*第三页*/
.page3{
	position: relative;
	width: 100%; 
	height: 100%;
	/*background: #1f1f1f;*/
	background: #222;
	display: none; 
}
.transform_video{
	width: 100%;
	height: 100%;
	overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.transform_video video {
    width: 100%;
    background: transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 5;
    position: absolute;
    left: 0;
    top: 0;
}
/*第四页*/
.page4{
	background-size: cover;
	position: relative;
	width: 100%; 
	height: 100%;
	display: none; 
}
.role_box{
	width: 100%; 
	height: 100%; 
	background: url(../img/role1_bg1.html) no-repeat center top;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	transition: background 0.3s linear;
}
.role_box.active{
	animation-delay: 0s;
    animation-name: shock;
    animation-duration: .1s;
    animation-iteration-count: 3;
    animation-direction: normal;
    animation-timing-function: linear;
}
.dialog_box{
    width: 638px; 
	height: 364px; 
	padding: 56px 0 0 66px;
	background: url(../img/dialog_bg.png) no-repeat center top;
	background-size: cover;
	position: absolute;
	bottom: 13%;
	left: 50%;
	margin-left: -319px;
}
.dialog_box ul{
    width: 130px;
    height: 58px;
}
.dialog_box ul .role1_name{
	width: 130px;
	height: 58px;
	background: url(../img/role_wyy_name.png) no-repeat;

}
.dialog_box ul .my_name{
	width: 104px;
	height: 58px;
	background: url(../img/my_name.png) no-repeat;
	display: none;
}
.dialog_box .dialog_info{
	width: 90%;
	font-size: 32px;
	color: #fff;
	margin-top: 22px;
}
.arrow_box{
	width: 261px;
	height: 99px;
	position: absolute;
	bottom: 18px;
	right: 58px;
}
.arrow_box .next_btn{
	width: 35px;
	height: 19px;
	background: url(../img/next_btn.png) no-repeat;
	position: absolute;
	top: 40px;
	left: 50%;
	margin-left: 75px;
	-webkit-animation: arrow .5s ease-in-out infinite;
    animation: arrow .5s ease-in-out infinite;
}
@-webkit-keyframes arrow {
  0% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
60% {
  -webkit-transform:translate3d(0,10px,0);
  transform:translate3d(0,10px,0);}
100% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
}
.arrow_end{
	width: 261px;
	height: 99px;
	background: url(../img/arrow_wyy_end.png) no-repeat;
	position: absolute;
	bottom: 8px;
	right: -8px;
	display: none;
}
/*第五页*/
.page5{
	position: relative;
	width: 100%; 
	height: 100%;
	display: none; 
}
.page5 .cursor{
    position: absolute;
    top: 12%;
    left: 72%;
    margin-left: 0px;
    width: 300px;
    height: 915px;
    z-index:10;
    background:url(../img/cursor31b26.png?v2) no-repeat;
}
.slide_box{
	width: 632px;
	height: 84px;
	position: absolute;
	top: 120px;
	left: 50%;
	margin-left: -316px;
}
.slide_box .left_slide{
	width: 123px;
	height: 83px;
	background: url(../img/left_slide.png) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	-webkit-animation: left_slide .8s ease-in-out infinite;
    animation: left_slide .8s ease-in-out infinite;
}
.slide_box .right_slide{
	width: 123px;
	height: 83px;
	background: url(../img/right_slide.png) no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	-webkit-animation: right_slide .8s ease-in-out infinite;
    animation: right_slide .8s ease-in-out infinite;
}
.slide_tip{
	width: 485px;
	height: 84px;
	background: url(../img/slide_tip.png) no-repeat; 
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -243px;
	z-index: 3;
}
@-webkit-keyframes left_slide {
  0% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
60% {
  -webkit-transform:translate3d(10px,0px,0);
  transform:translate3d(10px,0px,0);}
100% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
}
@-webkit-keyframes right_slide {
  0% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
60% {
  -webkit-transform:translate3d(-10px,0px,0);
  transform:translate3d(-10px,0px,0);}
100% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
}
.click_share{
	width: 459px;
	height: 122px;
	background: url(../img/click_share.png) no-repeat;
	position: absolute;
	bottom: 220px;
	left: 50%;
	margin-left: -230px;
	z-index: 7;
}
.page5 .role_end_dialog{
	width: 612px;
    height: 246px;
    padding-top: 110px;
    padding-left: 26px;
    background: url(../img/end_dialog_kuang.png) no-repeat;
	position: absolute;
	bottom: 400px;
	left: 50%;
	margin-left: -306px;
	font-size: 28px;
	color: #fff;
	z-index: 10;
}
.page5 .come_btn{
	display: none;
	width: 329px;
	height: 88px;
	position: absolute;
	background: url(../img/come_btn.png) no-repeat;
	bottom: 260px;
	left: 50%;
	margin-left: -165px;
	font-size: 32px;
	color: #fff;
	text-align: center;
	z-index: 12;
}
.role_video {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.newgames_pic .swiper-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.transform_video2, .transform_video3{
	width: 750px;
	height: 100%;
	overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.transform_video2{
	z-index: 1;
}
.transform_video2 video, .transform_video3 video {
    /*width: 100%;*/
    background: transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 5;
}
.transform_video2 .sub_video1, .transform_video3 .sub_video1{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.transform_video2 .sub_video2, .transform_video3 .sub_video2{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/*第六页*/
.page6{
	background: url(../img/page1.jpg) no-repeat center top;
	background-size: cover;
	position: relative;
	width: 100%; 
	height: 100%;
	display: none; 
}
.page6 .index_tit{
	top: 18px;
}
.save_tip{
	width: 506px;
	height: 146px;
	background: url(../img/save_tip.png) no-repeat;
	position: absolute;
	top: 880px;
	left: 50%;
	margin-left: -253px;
}
.bottom_box{
	width: 580px;
	height: 100px;
	position: absolute;
	top: 1040px;
	left: 50%;
	margin-left: -290px;
	z-index: 15;
}
.website_btn{
	display: block;
	width: 417px;
	height: 90px;
	position: absolute;
	top: 106px;
	left: 50%;
	margin-left: -208px;
	background: url(../img/website_btn43a0.png?v3) no-repeat;
}
.share_btn{
	width: 289px;
	height: 90px;
	float: left;
	background: url(../img/share_btn1b26.png?v2) no-repeat;
}
.repeat_btn{
	width: 289px;
	height: 90px;
	background: url(../img/repeat_btn1b26.png?v2) no-repeat;
	float: right;
}
.img_kuang{
	width: 679px;
	height: 824px;
	background: url(../img/img_kuang.png) no-repeat;
	position: absolute;
	top: 70px;
	left: 50%;
	margin-left: -340px;
}
.page6 .end_slogan{
	width: 503px;
	height: 202px;
	padding: 75px 24px 0 24px;
	background: url(../img/role_kuang.png) no-repeat;
	position: absolute;
	bottom: 140px;
	left: 50%;
	margin-left: -251px;
	color: #fff;
	font-size: 26px;
}
.page6 .end_slogan span{
	color: #fff;
	font-size: 26px;
}
.page6 .end_slogan b{
	font-style: normal;
	color: #fff;
	font-size: 26px;
}
/*结果页*/
.result_box{
    width: 616px;
    height: 788px;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -308px;    
}
.role_result_box{
    width: 616px;
    height: 788px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -308px;
    z-index: 3;
}
.role_result_box .result_img{
    width: 100%;
    height: 778px;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../img/role_wyy1b26.jpg?v2);
    background-repeat: no-repeat;
}
.role_result_box .share_info{
	width: 100%;
    height: 778px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: url(../img/share_info43a0.png?v3) no-repeat;
}
/*最终分享结果*/
.share_box{
    width: 640px;
    height: 1138px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -320px;
}
.share_page{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
   
}
.share_page img{
    width: 100%;
    height: 100%;
}
#mainBoxCanvas{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
   
}
#mainBoxCanvas img{
    width: 100%;
    height: 100%;
}
/*分享图标*/
.share_pop{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	display: none;
	z-index: 16;
}
.share_pop .share_icon{
	width: 568px;
	height: 443px;
	background: url(../img/share_icon.png) no-repeat;
	position: absolute;
	top: 5%;
	left: 50%;
	margin-left: -284px;
}
/*震动*/
@keyframes shock {
    0% {
        margin-left: 0px;
        margin-right: 8px;
        margin-top: 0px;
    }

    100% {
        margin-left: 8px;
        margin-right: 0px;
        margin-top: 8px;
    }
}
@-webkit-keyframes finger {
  0% {opacity:0.8;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
60% {opacity:1;
  -webkit-transform:translate3d(20px,0px,0);
  transform:translate3d(20px,0px,0);}
100% {opacity:0.8;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);}
}