@charset "gb2312";
* {margin:0;padding:0;border:0;-webkit-user-select:text}
a,img {-webkit-touch-callout:none;}
ol,ul {list-style:none}
*,:after,:before {-webkit-box-sizing:border-box;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body,html {text-align:left;width:100%;font-family:Roboto,HelveticaNeue,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1;}
input[type=password],input[type=text],textarea {resize:none;outline:none;-webkit-appearance:none;white-space:pre-wrap;word-wrap:break-word;background:#fff;}
a {color:#333;text-decoration:none}
img {vertical-align:top;border: none;outline:none;}
.clearfix:after,.clearfix:before {content:" ";display:table}
.clearfix:after {clear:both}
body {-webkit-box-pack:center;margin:0 auto;font-family:Hiragino Sans GB,Microsoft Yahei;}
.pc_bg{width: 100%;height: 100%;overflow: hidden;position: fixed;z-index: 10000;left: 0;top: 0;bottom: 0;right: 0;background: #000;display: none;}
.pc_bg img{width: 250px;height: 250px;display: block;margin: 10% auto 30px;}
.pc_bg:after{content:'为了更好的体验，请使用手机扫描二维码浏览';display:block;color:#fff;text-align:center;font-size:20px;}

.wrap{width: 100%;height: 100%;overflow: hidden;}
.load{width: 100%;height: 100%;overflow: hidden;background: #fff;position: absolute;left: 0;top: 0;z-index: 1000;}
.load p{text-align: center;padding-top: 75%;}

.page{width: 100%;height: 100%;overflow: hidden;}
.page0{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 50;background: url(../images/bg1.jpg) center top / cover no-repeat;background-size:100% 100%;}
.start{background: url(../images/start.png);width: 3.93rem;height: 1rem;background-size: 100% 100%;position: absolute;left: 2.05rem;top: 78%;opacity: 0;}
.title{background: url(../images/title.png);width: 2.1rem;height: 8.3rem;background-size: 100% 100%;position: absolute;left: 2.7rem;top: 7%;}
.logo{background: url(../images/gog.png);width: 2.6rem;height: .67rem;background-size: 100% 100%;left: 1rem;top: 91.4%;position: absolute;}
.sub_title{background: url(../images/sub_title.png);width: 5.14rem;height: 7.96rem;background-size: 100% 100%;position: absolute;left: 1.18rem;top: 13%;opacity: 0;}
.logo2{background: url(../images/logo2.png);width: 2rem;height: 1.38rem;position: absolute;top: 87%;background-size: 100% 100%;right: 1rem;}


.page0.on .title{animation: title 1s linear forwards,title2 1s linear forwards 2.3s; -webkit-: title 1s linear forwards,title2 1s linear forwards 2.3s;}
.page0.on .start{animation: start1 .5s 2.4s linear forwards; -webkit-: start1 .5s 2.4s linear forwards;}
.page0.on .sub_title{animation: sub_title 1s 2s linear forwards; -webkit-: sub_title 1s 2s linear forwards;}

.page1{width: 100%;height: 100%;background: url(../images/bg2.jpg) center top / cover no-repeat;background-size:100% 100%;}
.page2{display: none;}

#text{width: 5.6rem;margin-left: .95rem;margin-top: 25%;}
.text h2{font-weight: normal;font-size: .4rem;line-height:.6rem;margin-bottom: .2rem;}
.text ul#answer li{font-size: .34rem;font-weight: normal;line-height: .9rem;cursor: pointer;position: relative;}
.text ul#answer li img{position: absolute;left: 0;top: 0;width: 1rem;}
#page_capture{height: 100%;}
#page_capture img{width: 100%;height: 100%;}
#page_capture h3{width: 100%;text-align: center;position: absolute;left: 0;top: 14%;font-size: .4rem;}
#page_capture p{position: absolute;text-indent: 2em;top: 23%;width: 5.6rem;left: .95rem;font-size: .34rem;line-height: .55rem;}
.poster{position: absolute;left: 0;top: 0;width: 100%;height: auto;}

.save{background: url(../images/yq.png);width: 2.96rem;height: .81rem;background-size: 100% 100%;position: absolute;right: .6rem;top: 85%;}
.rePlay{background: url(../images/reload.png);width: 2.96rem;height: .81rem;background-size: 100% 100%;position: absolute;left: .6rem;top: 85%;}

.mask{width: 100%;height: 100%;background: rgba(0,0,0,.7);position: absolute;z-index: 50;display: none;left: 0;top: 0;}
.mask img{position: absolute;right: .3rem;top: .3rem;width: 2rem;}

.music{background: url(../images/mplay.png);width: .8rem;height: .8rem;background-size: 100% 100%;position: absolute;right: .2rem;top: .2rem;z-index: 99;}
.ratate {
  animation: rotation 1s linear infinite;
  -moz-animation: rotation 1s linear infinite;
  -webkit-animation: rotation 1s linear infinite;
  -o-animation: rotation 1s linear infinite;
}

@keyframes title {
    0% { transform: translateY(-5rem);opacity: 0;}
    100% { transform: rotateY(0deg);opacity: 1;}
}

@-webkit-keyframes title {
    0% { -webkit-transform: translateY(-5rem);opacity: 0;}
    100% { -webkit-transform: rotateY(0deg);opacity: 1;}
}

@keyframes title2 {
    0% { transform: translateY(0rem);opacity: 1;}
    100% { transform: rotateY(-5deg);opacity: 0;}
}

@-webkit-keyframes title2 {
    0% { -webkit-transform: translateY(0rem);opacity: 1;}
    100% { -webkit-transform: rotateY(-5deg);opacity: 0;}
}

@keyframes sub_title {
    0% { transform: translateY(-4rem);opacity: 0;}
    100% { transform: rotateY(0deg);opacity: 1;}
}

@-webkit-keyframes sub_title {
    0% { -webkit-transform: translateY(-4rem);opacity: 0;}
    100% { -webkit-transform: rotateY(0deg);opacity: 1;}
}

@keyframes start1 {
    0% { transform: translateY(1rem);opacity: 0;}
    100% { transform: rotateY(0deg);opacity: 1;}
}

@-webkit-keyframes start1 {
    0% { -webkit-transform: translateY(1rem);opacity: 0;}
    100% { -webkit-transform: rotateY(0deg);opacity: 1;}
}

@keyframes logo {
    0% { transform: rotateY(0deg);}
    100% { transform: rotateY(360deg);}
}

@-webkit-keyframes logo {
    0% { -webkit-transform: rotateY(0deg);}
    100% { -webkit-transform: rotateY(360deg);}
}


@keyframes rotation{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes rotation{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}