@charset "gb2312";
* {margin:0;padding:0;border:0;-webkit-user-select:text}
a,img {-webkit-touch-callout:none;}
body,p {margin: 0;}
img{border: none;}
body,html {height: 100%;overflow: hidden;}

.wrap{width: 100%;height: 100%;overflow: hidden;}
.page{width: 100%;height: 100%;overflow: hidden;position: absolute;}
.load{z-index: 1000;background: #fff;left: 0;top: 0;}
.page1{background: url(../images/bg.jpg) center top / cover no-repeat;background-size: 100% 100%;z-index: 300;}
.load .logo{position: absolute;width: 6.4rem;top: 30%;text-align: center;}
.load .logo img{width: 2.3rem;display: inline-block;animation: logo 2s linear infinite; -webkit-: logo 2s linear infinite;}
.progress{left: 0;top: 45%;font-size: .28rem;position: absolute;width: 100%;text-align: center;color: #f30;}
.title{background: url(../images/title.png);width: 5.89rem;height: 8.06rem;background-size: 100% 100%;position: absolute;left: .47rem;top: 11%;}
.bg_bb{background: url(../images/bg_bb.png);width: 6.4rem;height: 3.31rem;background-size: 100% 100%;position: absolute;left: 0;bottom: 0;}
.start{background: url(../images/start.png);width: 2.03rem;height: 1.44rem;background-size: 100% 100%;left: 1.5rem;top: 4.22rem;position: absolute;}

.print_b{background: url(../images/print_b.png);width: 6.4rem;height: .85rem;background-size: 100% 100%;position: absolute;left: 0;bottom: 2.19rem;z-index: 80;display: none;}
.print_f{background: url(../images/print_f.png);width: 6.4rem;height: 3.04rem;background-size: 100% 100%;position: absolute;left: 0;bottom: 0rem;z-index: 100;display: none;}
.picBg{height: 85%;overflow: hidden;background: #fff;}

.open.on{animation: open 2s linear forwards; -webkit-: open 2s linear forwards;}

.mask{background: rgba(0,0,0,.7);display: none;left: 0;top: 0;bottom: 0;right: 0;z-index: 300;}
.mask p{color: #fff;text-align: center;font-size: .36rem;position: absolute;top: 32%;width: 100%;}
.know{width: 3rem;height: .75rem;line-height: .75rem;text-align: center;color: #000;background: #fff;border-radius: .2rem;position: absolute;left: 1.7rem;top: 40%;font-size: .35rem;}
.page1 img{width: 5.24rem;position: absolute;left: .55rem;top: 40%;z-index: 90;display: none;}
.longPress{z-index: 300;display: none;}
.replay{background: url(../images/replay.png);width: 2.63rem;height: .99rem;position: absolute;left: 1.305rem;background-size: 100% 100%;}
.replayBox{width: 5.24rem;position: absolute;left: .55rem;height: .99rem;top: 66%;display: none;}

.music{display:block;width:.5rem;height:.5rem;background:url(http://news.gog.cn/cms_udf/2017/gp/images/music_on.png) no-repeat;background-size:100% 100%;position: absolute;right: .2rem;top: .2rem;z-index: 300;}
.music.on{-webkit-animation:rotate 1.2s linear infinite;animation:rotate 1.2s linear infinite;}

.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 .code{width: 230px;height: 230px;display: block;margin: 10% auto 30px;background: #fff;padding: 10px;}
.pc_bg:after{content:'为了更好的体验，请使用手机扫描二维码浏览';display:block;color:#fff;text-align:center;font-size:20px;}

.page1.on .title{opacity: 0;}
.page1.on .bg_bb{opacity: 0;}
.page1.on .print_b{display: block;}
.page1.on .print_f{display: block;}

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

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

@keyframes open {
    0% { transform: rotateY(-15deg);}
    100% { transform: rotateY(0deg);bottom: -4rem;width: 6.4rem;left: 0;height: 10.81rem;}
}

@-webkit-keyframes open {
    0% { -webkit-transform: rotateY(-15deg); }
    100% { -webkit-transform: rotateY(0deg);bottom: -4rem;width: 6.4rem;left: 0;height: 10.81rem;}
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

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