﻿body{ position: relative; -webkit-text-size-adjust: 100%; font-family: "Microsoft YaHei", Arial, sans-serif; font-size: .16rem;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, span, a { margin: 0; padding: 0; vertical-align: baseline;}
ul, ol { list-style: none;}
a { text-decoration: none; color: inherit; cursor: pointer; outline: none;}
a:hover{ text-decoration:none;}
img { border: 0; object-fit: cover;}
video{ object-fit: cover; }
table { border-collapse: collapse;}
area{ outline:none; }
input, textarea, select{ -webkit-appearance: none; outline: none; resize: none; border-radius: 0;}
input::-ms-clear{ display:none;}
input[type="text"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button { border: none; background: none; cursor: pointer; font-size: inherit;}
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0;}
h1.wm-public{height:0; line-height:0; font-size:0;}
.cf:after {content:"";display:block;height:0;clear:both;} 
.cf {zoom:1;}
.fl{ float: left; }
.fr{ float: right; }
.rel{ position: relative;}
.abs{ position: absolute;}
.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);}

#wrapper{ display: none;}

/* box1 */
.box1{ height: 10.96rem; background: url(../images/box1.jpg) no-repeat 0 0; background-size: 19.2rem 10.96rem;}
.logo{ top: .7rem; left: 0; height: 1.41rem;}
.loginState{ top: .96rem; right: .54rem; font-size: .18rem; color: #2b2b2b;}
.loginState div{ display: flex; align-items: center;}
.loginState button{ width: 1.06rem; height: .35rem; margin-left: .1rem;}
.loginBefore button{ background: url(../images/loginBeforeBtn.png) no-repeat 0 0; background-size: 100% auto;}
.loginAfter button{ background: url(../images/loginAfterBtn.png) no-repeat 0 0; background-size: 100% auto;}
.yyBtn{ top: 6.21rem; width: 2.47rem; height: .61rem; background: url(../images/yyBtn.png) no-repeat 0 0; background-size: 100% auto;}
.yyBtn:hover{ background-position: 0 -.61rem;}
.yyBtn.active{ background-position: 0 -1.22rem;}
.age{ top: 8.83rem; right: .35rem; width: .84rem;}
.milestone{ top: 7.31rem; width: 10.68rem; height: 2.37rem; background: url(../images/milestone.png) no-repeat 0 0; background-size: 100% auto; display: flex; justify-content: space-around;}
.progress{ top: .12rem; width: 2.06rem; height: 1.98rem; background: url(../images/progress.png) no-repeat; background-size: 10.46rem 3.96rem; background-position-y: 0;}
.progress.p1{ left: .1rem; background-position-x: 0;}
.progress.p2{ left: 2.2rem; background-position-x: -2.1rem;}
.progress.p3{ left: 4.3rem; background-position-x: -4.21rem;}
.progress.p4{ left: 6.4rem; background-position-x: -6.3rem;}
.progress.p5{ left: 8.52rem; background-position-x: -8.4rem;}
.progress.active{ background-position-y: 100%;}

/* box2 */
.box2{ height: 8.16rem; background: url(../images/box2.jpg) no-repeat 0 0; background-size: 19.2rem 8.16rem;}
.testStep{ top: 3.66rem; width: 10.7rem; display: flex; justify-content: space-between;}
.step{ width: 2.6rem; height: 3.06rem;}
.step1{ background: url(../images/step1.png) no-repeat 0 0; background-size: 100% auto;}
.step2{ background: url(../images/step2.png) no-repeat 0 0; background-size: 100% auto;}
.step3{ background: url(../images/step3.png) no-repeat 0 0; background-size: 100% auto;}
.step4{ background: url(../images/step4.png) no-repeat 0 0; background-size: 100% auto;}
.step .btns{ margin-top: 2.12rem; height: .28rem; display: flex; justify-content: center;}
.step .btns button, .step .btns a{ margin: 0 .05rem; width: 1rem; height: .28rem; line-height: .26rem; border-radius: .14rem; font-size: .18rem; box-sizing: border-box; border: .02rem solid #212121; background: #eaeaea; cursor: default;}
.step .btns a{ line-height: .24rem; text-align: center;}
.step.ing .btns button, .step.ing .btns a{ background: #cbec4e; cursor: pointer;}
.step .state{ margin: .2rem auto 0 auto; width: 2.3rem; height: .25rem; background: url(../images/stepState.png) no-repeat 0 0; background-size: 100% auto;}
.step.ing .state{ display: none;}
.step.end .state{ background-position: 0 100%;}

/* box3 */
.box3{ height: 11.44rem; background: url(../images/box3.jpg) no-repeat 0 0; background-size: 19.2rem 11.44rem;}
.swiper{ top: 3.23rem; width: 10.26rem; height: 5.88rem; background: url(../images/swiper.png) no-repeat 0 0; background-size: 100% auto;}
.swiper-slide{ display: flex; justify-content: center; align-items: center;}
.swiper-slide img{ width: 10.06rem; height: 5.66rem;}
.prev, .next{ width: .46rem; height: .61rem; top: 5.87rem; box-sizing: border-box; border: .01rem solid #000;}
.prev{ right: 50%; margin-right: 5.3rem; background: url(../images/prev.png) no-repeat center center; background-size: .32rem .44rem;}
.next{ left: 50%; margin-left: 5.3rem; background: url(../images/next.png) no-repeat center center; background-size: .32rem .44rem;}
.prev:hover, .next:hover{ background-color: #fbe037;}
.pagination{ top: 9.24rem; bottom: auto!important; text-align: center;}
.swiper-pagination-bullet{ margin: 0 .13rem!important; width: .16rem; height: .16rem; box-sizing: border-box; border: .02rem solid #000; opacity: 1; border-radius: 0; background: none;}
.swiper-pagination-bullet-active{ background: #000;}

/* 手机端入口 */
.sideCode{ position: fixed; bottom: 2.2rem; left: .6rem; width: 2.23rem; height: 3.32rem; background: url(../images/sideCode.png) no-repeat 0 0; background-size: 100% auto;}
.sideClose{ top: .29rem; right: .21rem; width: .31rem; height: .31rem; background: url(../images/sideClose.png) no-repeat 0 0; background-size: 100% auto;}
.sideCode div{ top: 2.08rem; right: .56rem; width: 1.09rem; height: 1.09rem; padding: .05rem; box-sizing: border-box;}
.sideCode div img, .sideCode div canvas{ width: 100%; height: 100%;}

/* 弹出框 */
.pop{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .9); z-index: 10; display: none;}
.popWrap{ top: 50%; left: 50%; transform: translate(-50%, -50%);}
.popBg1{ width: 6.04rem; height: 2.93rem; background: url(../images/popBg1.png) no-repeat 0 0; background-size: 100% auto;}
.popBg2{ width: 5.79rem; height: 2.38rem; background: url(../images/popBg2.png) no-repeat 0 0; background-size: 100% auto;}
.closeBtn{ top: -0.09rem; right: -0.15rem; width: .5rem; height: .5rem; background: url(../images/closeBtn.png) no-repeat 0 0; background-size: 100% auto; z-index: 2;}

/* 弹出框：资格查询 */
.popInquiryCont{ height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; line-height: .36rem; font-size: .24rem; color: #212121;}
.popInquiryCont span{ background: #d2f551;}
.inquirySuccessIcon{ left: -0.69rem; bottom: 0; width: 2.79rem;}
.inquiryNullIcon{ left: -0.78rem; bottom: .02rem; width: 2.52rem;}

/* 弹出框：下载 */
.popDownTip{ top: .55rem; margin-left: .2rem; width: 4.9rem; text-align: center; font-size: .21rem; color: #212121;}
.downFrom{ top: 1.15rem; margin-left: .9rem; width: 3.5rem; display: flex; justify-content: space-between; align-items: start;}
.downFrom .btns a{ display: block; width: 2.2rem; height: .45rem;}
.downFrom .btns .pc{ margin-bottom: .14rem; background: url(../images/pc.png) no-repeat 0 0; background-size: 100% auto;}
.downFrom .btns .android{ background: url(../images/android.png) no-repeat 0 0; background-size: 100% auto;}
.downFrom .btns a:hover{ background-position-y: 100%;}
.downFrom .code{ width: 1.22rem; height: 1.02rem; background: url(../images/codeBox.png) no-repeat 0 0; background-size: 100% auto; display: none;}
.downFrom .code img{ top: .02rem; left: .02rem; width: .98rem; height: .98rem;}
.downIcon{ left: -0.62rem; bottom: -0.12rem; width: 2.06rem;}

/* 弹出框：消息提示 */
#popMsg{ z-index: 15;}
.popMsgCont{ height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; line-height: .36rem; font-size: .24rem; color: #212121;}













