@charset "UTF-8";
/*初始化样式*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{background:#fff;color:#555;font-size:14px;font-family:'all';overflow: hidden;overflow-y: scroll;}
td,th,caption{font-size:14px;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
address,caption,cite,code,dfn,em,strong,th,i,b,strong{font-style:normal;font-weight:normal;}
a{color:#555;text-decoration:none;}
a:hover{text-decoration:underline;}
img{border:none;vertical-align:middle;}
ol,ul,li{list-style:none;}
input,textarea,select,button{font-family:'all';}
table{border-collapse:collapse;border-spacing:0;}
html{overflow-y: scroll;background-color: #253336;-webkit-text-size-adjust:none;}
a:focus,input:focus,p:focus,div:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1;}
.imgauto{display: block;width: 100%;}
@font-face{font-family:'all';src:url("../fonts/all.ttf");}

.prat{
	display: none;
	width: 7.5rem;
	height: 16.24rem;
	position: relative;
	top: 0;
	left: 0;
	margin-top: 0;
	box-sizing: border-box;
}

.ios .prat{
	height: 13.34rem;
	position: relative;
	top: 0;
	left: 0;
	margin-top: 0;
	overflow: hidden;
}

.prat.on{
	display: block;
}

.cont{
	display: block;
	width: 7.5rem;
	height: 13.34rem;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -6.67rem;
}


/*首页*/
.prat1{
	background: url(../images/bg1.jpg) no-repeat;
    background-size: 100% 100%;
}
.ios .prat1{
	background: url(../images/bg1.jpg) no-repeat;
    background-size: 7.5rem 16.24rem;
    background-position:50% 50%;
    -webkit-background-position:50% 50%;
}

.pubg_mobile{
	display: block;
	width: 1.06rem;
	height: .8rem;
	background: url(../images/pubg_mobile.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: .36rem;
    left: .24rem;
}

.slogan{
	display: block;
	width: 5.68rem;
	height: 2.78rem;
	background: url(../images/slogan.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1.4rem;
    right: .4rem;
}

.s1_uid{
	display: block;
	width: 4.74rem;
	height: 1.3rem;
	background: url(../images/s1_uid.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 9.3rem;
    left: 50%;
    margin-left: -2.37rem;
}

.portrait{
	display: block;
	width: .7rem;
	height: .7rem;
	float: left;
	margin: .3rem 0 .3rem .8rem;
	border-radius: 50%;
	overflow: hidden;
}

.s1_uid p.name{
	display: block;
	width: 2.2rem;
	line-height: .36rem;
	font-size: .32rem;
	color: #81ffdb;
	float: left;
	margin: .3rem 0 0 .2rem;
}

.s1_uid p.uid{
	display: block;
	width: 2.2rem;
	line-height: .36rem;
	font-size: .32rem;
	color: #81ffdb;
	float: left;
	margin: 0 0 0 .2rem;
}

.btn_start{
	display: block;
	width: 5.88rem;
	height: 2.82rem;
	background: url(../images/btn_start1.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 10.5rem;
    left: 50%;
    margin-left: -3rem;
    animation: fadeOutLight 2s infinite;
    -webkit-animation: fadeOutLight 2s infinite;
}
.btn_start a,.btn_reward a{
	display: block;
	width: 3.6rem;
	height: 1.3rem;
	position: absolute;
	top: .5rem;
	left: 50%;
	margin-left: -1.8rem;
}

.btn_reward{
	display: block;
	width: 5.88rem;
	height: 2.82rem;
	background: url(../images/btn_reward1.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 10.5rem;
    left: 50%;
    margin-left: -3rem;
    animation: fadeOutRig 2s infinite;
    -webkit-animation: fadeOutRig 2s infinite;
}
.btn_reward.on{
	background: url(../images/btn_reward_on.png) no-repeat;
    background-size: 100% 100%;
	animation: on 2s infinite;
    -webkit-animation: on 2s infinite;
    pointer-events: none;
}



/*题目*/
.prat2,.prat3,.prat4{
	background: url(../images/bg2.jpg) no-repeat;
    background-size: 100% 100%;
}
.ios .prat2,.ios .prat3,.ios .prat4{
	background: url(../images/bg2.jpg) no-repeat;
    background-size: 7.5rem 16.24rem;
    background-position:50% 50%;
    -webkit-background-position:50% 50%;
}

.btn_back{
	display: block;
	width: .9rem;
	height: .7rem;
	background: url(../images/btn_back.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: .3rem;
    left: .2rem;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    z-index: 10;
}

.subject{
	display: block;
	width: 5.8rem;
	height: 12.24rem;
	background: url(../images/subject01.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1.1rem;
    left: 0;
    padding-top: 4.8rem;
    padding-left: .4rem;
    box-sizing: border-box;
}

.subject:after{
	display: block;
	content: '';
	width: 2.02rem;
	height: 4.74rem;
    position: absolute;
    left: 0;
    top: 8.6rem;
}

.prat2 .subject:after{
	background: url(../images/subject_bar2.png) no-repeat;
    background-size: 100% 100%;
}

.prat3 .subject:after{
	background: url(../images/subject_bar1.png) no-repeat;
    background-size: 100% 100%;
}

.prat4 .subject:after{
    top: 8rem;
	background: url(../images/subject_bar4.png) no-repeat;
    background-size: 100% 100%;
}

.s2_after,.s3_after,.s4_after{
	display: block;
	content: '';
	width: 4.26rem;
	height: 11.52rem;
    position: absolute;
    right: 0;
    top: 64%;
    margin-top: -5.76rem;
    z-index: 1;
    pointer-events: none;
}

.s2_after{
	background: url(../images/role01.png) no-repeat;
    background-size: 100% 100%;
}

.s3_after{
	top: 60%;
	background: url(../images/role02.png) no-repeat;
    background-size: 100% 100%;
}

.s4_after{
	top: 60%;
	background: url(../images/role03.png) no-repeat;
    background-size: 100% 100%;
}

.subject_name{
	display: block;
	width: 2.9rem;
	height: 3rem;
	position: absolute;
	top: 1.66rem;
	left: 1rem;
	font-size: .38rem;
	line-height: .4rem;
	color: #a2ffe1;
	font-weight: bold;
	-webkit-transform: skew(0,4deg);
    -moz-transform: skew(0,4deg);
    -ms-transform: skew(0,4deg);
    -o-transform: skew(0,4deg);
    transform: skew(0,4deg);
}

.subject li{
	display: block;
	width: 4.2rem;
	height: 1.34rem;
	background: url(../images/inscribe.png) no-repeat;
    background-size: 100% 100%;
    float: left;
    margin-left: .5rem;
    position: relative;
}

.subject li.on{
	background: url(../images/inscribe_on.png) no-repeat;
    background-size: 100% 100%;
}

.subject li p{
	display: block;
	width: 2.8rem;
	line-height: .32rem;
	position: absolute;
	left: .7rem;
	top: 48%;
	-webkit-transform: translateY(-50%) skew(0,3deg);
    -moz-transform: translateY(-50%) skew(0,3deg);
    -ms-transform: translateY(-50%) skew(0,3deg);
    -o-transform: translateY(-50%) skew(0,3deg);
    transform: translateY(-50%) skew(0,3deg);
    font-size: .42rem;
    font-weight: bold;
    color: #314248;
}

.subject li:nth-child(3){
	margin-left: .8rem;
}






/*版块五*/
.prat5{
	background: url(../images/bg3.jpg) no-repeat;
    background-size: 100% 100%;
}
.ios .prat5{
	background: url(../images/bg3.jpg) no-repeat;
    background-size: 7.5rem 16.24rem;
    background-position:50% 50%;
    -webkit-background-position:50% 50%;
}
.article{
	display: block;
	width: 6.16rem;
	height: 12.92rem;
	background: url(../images/subject02.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: .6rem;
    left: .67rem;
    padding-top: 2.8rem;
    box-sizing: border-box;
}

/*.article:after{
	display: block;
	content: '';
	width: 2.02rem;
	height: 4.74rem;
	background: url(../images/subject_bar4.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: -.67rem;
    top: 7rem;
}*/

.article_name{
	display: block;
	width: 4.1rem;
	height: 1.32rem;
	line-height: .44rem;
	font-size: .42rem;
	color: #a2ffe1;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 1.3rem;
	left: 48%;
	margin-left: -2.05rem;
	-webkit-transform: skew(0,-6deg);
    -moz-transform: skew(0,-6deg);
    -ms-transform: skew(0,-6deg);
    -o-transform: skew(0,-6deg);
    transform: skew(0,-6deg);
}

.article li{
	display: block;
	width: 4.6rem;
	height: 1.9rem;
	float: left;
	margin-left: .6rem;
	position: relative;
}

.prize_bg{
	display: block;
	width: 2.42rem;
	height: 2.56rem;
	background: url(../images/prize_bg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 1.5rem;
}

.prize_bg.on{
	left: 0;
}

.article li.on .prize_bg{
	background: url(../images/prize_bg_on.png) no-repeat;
    background-size: 100% 100%;
}

.article_tit{
	display: none;
	width: 1.2rem;
	line-height: .32rem;
	font-size: .3rem;
	color: #85b8a7;
	text-align: right;
	position: absolute;
	top: 68%;
	left: 0;
	-webkit-transform: translateY(-50%) skew(0,-4deg);
    -moz-transform: translateY(-50%) skew(0,-4deg);
    -ms-transform: translateY(-50%) skew(0,-4deg);
    -o-transform: translateY(-50%) skew(0,-4deg);
    transform: translateY(-50%) skew(0,-4deg);
}

.article_tit.on{
	left: initial;
	right: .6rem;
	text-align: left;
}

.article_tit:after{
	display: block;
	content: '';
	width: .14rem;
	height: .24rem;
	background: url(../images/prize_bar.png) no-repeat;
    background-size: 100% 100%;
	position: absolute;
	right: -.26rem;
	top: 50%;
	margin-top: -.12rem;
}

.article li.on .article_tit{
	color: #e2b88d;
}

.article li.on .article_tit:after{
	background: url(../images/prize_bar_on.png) no-repeat;
    background-size: 100% 100%;
}

.article_tit.on:after{
	right: initial;
	left: -.26rem;
	-webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}




/*loading*/
.prat6{
	background: url(../images/bg4.jpg) no-repeat;
    background-size: 100% 100%;
}
.ios .prat6{
	background: url(../images/bg4.jpg) no-repeat;
    background-size: 7.5rem 16.24rem;
    background-position:50% 50%;
    -webkit-background-position:50% 50%;
}

.loader{
	display: block;
	width: 3.16rem;
	height: 3.16rem;
	background: url(../images/loader/1.png) no-repeat;
    background-size: 100% 100%;
	position: absolute;
	top: 48%;
	left: 50%;
	margin-top: -1.58rem;
	margin-left: -1.56rem;
	text-align: center;
	font-weight: bold;
}

.loader p{
	display: inline-block;
	font-size: 1.28rem;
	color: #fff;
	filter: drop-shadow(0 0 .18rem rgba(255,164,64,.6));
	background-image: -webkit-linear-gradient(bottom,#ffde88,#fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.28rem;
	margin-top: .94rem;
}

.loader span{
	display: inline-block;
	font-size: .4rem;
	color: #fff;
	filter: drop-shadow(0 0 .18rem rgba(255,164,64,.6));
	background-image: -webkit-linear-gradient(bottom,#ffde88,#fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.game{
	display: block;
	width: 4rem;
	height: .4rem;
	color: #fff;
	font-size: .32rem;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 8.9rem;
	left: 50%;
	margin-left: -2rem;
}








/*分享页*/
.prat7{
	background-color: #0de5c9;
}

.cont{
	display: block;
	width: 7.5rem;
	height: 13.06rem;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -6.53rem;
}

#toimg{
	display: block;
	width: 7.5rem;
	height: 13.06rem;
    position: absolute;
    top: 0;
    left: 0;
}

.dom2img-result{
	display: none;
}

.toimg_bg{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.title{
	display: none;
	width: 6.8rem;
	height: 1.28rem;
	position: absolute;
	top: .4rem;
	left: 50%;
	margin-left: -3.4rem;
	z-index: 2;
}

.banner{
	display: none;
	width: 6.76rem;
	height: 4.26rem;
	position: absolute;
	top: 2.3rem;
	left: 50%;
	margin-left: -3.38rem;
	z-index: 2;
}

.toimg_code{
	display: block;
	width: 3.92rem;
	height: 1.82rem;
	background: url(../images/code.png) no-repeat;
    background-size: 100% 100%;
	position: absolute;
	bottom: 0;
    right: .18rem;
}

.btn_youtobe{
	display: block;
	width: .82rem;
	height: .82rem;
	position: absolute;
	top: .48rem;
    right: .28rem;
}

.code_tips{
	display: none;
	width: 6.6rem;
	height: 1rem;
	position: absolute;
	top: 7.06rem;
	left: 50%;
	margin-left: -3.3rem;
	font-size: .44rem;
	line-height: .48rem;
	color: #77ffd4;
	font-weight: bold;
}

.toimg_tips{
	display: none;
	width: 6.6rem;
	height: 2.1rem;
	position: absolute;
	top: 8.1rem;
	left: 50%;
	margin-left: -3.3rem;
	font-size: .28rem;
	line-height: .32rem;
	color: #fff;
}

.one .title1,.one .banner1,.one .code_tips1,.one .toimg_tips1{
	display: block;
}

.two .title2,.two .banner2,.two .code_tips2,.two .toimg_tips2{
	display: block;
}

.thr .title3,.thr .banner3,.thr .code_tips3,.thr .toimg_tips3{
	display: block;
}

.one .toimg_bg1,.one .btn_download1{
	display: block;
}

.two .toimg_bg2,.two .btn_download2{
	display: block;
}

.thr .toimg_bg3,.thr .btn_download3{
	display: block;
}

.code_tips.on,.toimg_tips.on{
	display: block;
}

.follow{
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	top: 11.2rem;
	left: 3.7rem;
	font-size: .26rem;
	line-height: .28rem;
	color: #fff;
	font-weight: bold;
}

.follow span{
	color: #ffcb4e;
}

.s6_btn{
	display: block;
	width: 4.08rem;
	height: 3.18rem;
	background: url(../images/s6_btn.png) no-repeat;
    background-size: 100% 100%;
	position: absolute;
	top: 10.62rem;
	left: 0;
	z-index: 1;
}

.btn_download{
	display: block;
	width: .66rem;
	height: .66rem;
	position: absolute;
	top: .22rem;
	left: .52rem;
}
.btn_fb{
	display: block;
	width: .66rem;
	height: .66rem;
	position: absolute;
	top: .22rem;
	left: 1.28rem;
}
.btn_tw{
	display: block;
	width: .66rem;
	height: .66rem;
	position: absolute;
	top: .22rem;
	left: 2.04rem;
}
.btn_subscribe{
	display: block;
	width: 2.56rem;
	height: 1rem;
	position: absolute;
	top: 1.08rem;
	left: .5rem;
}
.s6_btn.on{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.s6_btn.on .btn_subscribe{
	pointer-events: none;
}


/*dialog*/
.dialog-box {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .8);
    opacity: 0;
}

.dialog-box.on {
    z-index: 9999;
    opacity: 1;
}

.btn_close {
    display: block;
    width: .42rem;
    height: .42rem;
    position: absolute;
    top: 0;
    right: .42rem;
    z-index: 99999;
}

.dialog-box .dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: none;
    outline: none;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 1px;
}

.dialog-box .dialog.on {
    display: block;
    animation: fadeInDown .3s .1s ease both;
    -webkit-animation: fadeInDown .3s .1s ease both;
}

.dialog-box .dialog.out {
    animation: fadeOutUp .3s .1s ease both;
    -webkit-animation: fadeOutUp .3s .1s ease both;
}

.dialog-box .dialog1{
    width: 6.45rem;
    height: 3.54rem;
    background: url(../images/pop1.png) top center no-repeat;
    background-size: 100% 100%;
}

.dialog1 p{
	display: block;
	width: 4.7rem;
	line-height: .44rem;
	color: #7fbaa9;
	font-size: .28rem;
	text-align: center;
	position: absolute;
	top: 1.9rem;
	left: 50%;
	margin-left: -2.35rem;
}

.dialog1 span{
	color: #ffe86b;
}

.dialog1 p.pop_title{
	color: #81ffdb;
	font-size: .34rem;
	top: .8rem;
	font-weight: bold;
}

.chest{
	display: block;
	width: 1.38rem;
	height: 1.24rem;
	background: url(../images/chest.png) top center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 2.4rem;
    right: .8rem;
}

#pop1 .chest{
	top: 2.2rem;
    right: .2rem;
}




/*动效*/
@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0 -10%, 0);
        opacity: 0;
        filter: alpha(opacity=0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
        filter: alpha(opacity=100);
    }

}

@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0 -10%, 0);
        opacity: 0;
        filter: alpha(opacity=0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
        filter: alpha(opacity=100);
    }

}

@keyframes fadeOutUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0 0, 0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
        opacity: 0;
    }

}

@-webkit-keyframes fadeOutUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0 0, 0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
        opacity: 0;
    }

}



@keyframes fadeOutLight {
    0% {
        background: url(../images/btn_start1.png) no-repeat;
	    background-size: 100% 100%;
    }
    50%{
    	background: url(../images/btn_start2.png) no-repeat;
	    background-size: 100% 100%;
    }
    100% {
        background: url(../images/btn_start1.png) no-repeat;
	    background-size: 100% 100%;
    }
}

@-webkit-keyframes fadeOutLight {
    0% {
        background: url(../images/btn_start1.png) no-repeat;
	    background-size: 100% 100%;
    }
    50%{
    	background: url(../images/btn_start2.png) no-repeat;
	    background-size: 100% 100%;
    }
    100% {
        background: url(../images/btn_start1.png) no-repeat;
	    background-size: 100% 100%;
    }
}



@keyframes fadeOutRig {
    0% {
        background: url(../images/btn_reward1.png) no-repeat;
	    background-size: 100% 100%;
    }
    50%{
    	background: url(../images/btn_reward2.png) no-repeat;
	    background-size: 100% 100%;
    }
    100% {
        background: url(../images/btn_reward1.png) no-repeat;
	    background-size: 100% 100%;
    }
}

@-webkit-keyframes fadeOutRig {
    0% {
        background: url(../images/btn_reward1.png) no-repeat;
	    background-size: 100% 100%;
    }
    50%{
    	background: url(../images/btn_reward2.png) no-repeat;
	    background-size: 100% 100%;
    }
    100% {
        background: url(../images/btn_reward1.png) no-repeat;
	    background-size: 100% 100%;
    }
}