@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;}
ul,li{list-style: none;}

.wrap{width: 100%;height: 100%;overflow: hidden;}
.page{width: 100%;height: 100%;overflow: hidden;position: absolute;}
.load{z-index: 100;background: #fff;left: 0;top: 0;z-index: 600;}
.page1{background: url(../images/bg.jpg) center top / cover no-repeat;background-size: 100% 100%;z-index: 300;}
.load .goglogo{position: absolute;width: 6.4rem;top: 30%;text-align: center;}
.load .goglogo 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;}
.logo{background: url(../images/logo.png);width: 1.86rem;height: .47rem;background-size: 100% 100%;position: absolute;top: 2%;left: .3rem;}
.titleBg{background:url(../images/title_bg.png) top center no-repeat;width: 3.85rem;background-size: 100% auto;position: absolute;top: -1.41rem;left: 1.23rem;z-index: 130;}
.title{width: 3.4rem;margin-left: .2rem;}
.title img{width: 3.4rem;margin-top: .2rem;}
.phone{width: 5rem;height: 7.56rem;background-size: 100% 100%;margin-left: .7rem;position: absolute;top: 0;}
.phone1{background: url(../images/phone1.png);width: 5rem;height: 1.16rem;background-size: 100% 100%;position: absolute;top: 0;z-index: 120;}
.phone2{background: url(../images/phone2.png);width: 5rem;height: 5.59rem;background-size: 100% 100%;position: absolute;top: 1.16rem;z-index: 200;}
.desc{height: 2.15rem;position: absolute;z-index: 220;}
.phone .desc .desc_con p{font-size: .24rem;color: #fff;line-height: .5rem;width: 3.4rem;text-indent: 2em;margin-left: .76rem;}
.start{background: url(../images/print_bg.png);background-size: 100% 100%;width: 2.94rem;height: .8rem;position: absolute;z-index: 300;left: 1.1rem;top: 5.3rem;text-align: center;}
.start p{color: #fff;font-size: .27rem;line-height: .7rem;}
.biger{position: absolute;left: 0;top: 26%;z-index: 200;}
.boxImg{position: absolute;height: 100%;overflow-y: scroll;left: .61rem;top: 93%;z-index: 140;width: 5rem;background: #fff;}
.boxImg::-webkit-scrollbar{display: none;}
.boxImg img{width: 5rem;}
.box.on .boxImg{-webkit-animation:tujie 1.5s linear forwards;animation:tujie 1.5s linear forwards;}
.page1.on .biger{-webkit-animation:phone 1.5s linear forwards;animation:phone 1.5s linear forwards;}

.box{display: none;}

.desc_con{height: 3rem;overflow: hidden;margin-top: 1.5rem;}

.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;}

.finger{background: url(../images/finger.png);width: .96rem;height: .96rem;background-size: 100% 100%;right: .2rem;top: 50%;position: absolute;z-index: 350;display: none;}
.finger.on{-webkit-animation:finger 1.2s linear infinite;animation:finger 1.2s linear infinite;}
.replay{background: url(../images/replay.png);width: 2.63rem;height: .99rem;background-size: 100% 100%;margin-bottom:1rem;margin-left: 1.2rem;}

.box_print{top: 85%;width: 6.7rem;height: 7.56rem;background-size: 100% 100%;margin-left: -.13rem;position: absolute;}
.box_print .phone1{width: 6.7rem;height: 1.5312rem;}
.box_print .phone2{width: 6.7rem;height: 7.3788rem;}

.county{position: absolute;font-size: .24rem;color: #fff;line-height: .5rem;width: 3.4rem;margin-left: .7rem;padding-top: 1.5rem;z-index: 220;display: none;}
.county ul{width: 3.9rem;}
.county ul li{color: #fff;font-size: .26rem;float: left;margin-right: .3rem;margin-bottom: .2rem;}

.zw{position: absolute;background: url(../images/zw.png);width: 1.8rem;height: .55rem;background-size: 100% 100%;top: 1.1%;left: 2.5rem;}

@keyframes finger {
    0% { transform: translateY(0rem);opacity: 1;}
    100% { transform: translateY(-1.8rem);opacity: 0;}
}

@-webkit-keyframes finger {
    0% { -webkit-transform: translateY(0rem);opacity: 1;}
    100% { -webkit-transform: translateY(-1.8rem);opacity: 0;}
}


@keyframes tujie {
    0% {}
    100% {top: 0;}
}

@-webkit-keyframes tujie {
    0% {}
    100% {top: 93%;}
}

@keyframes phone {
    0% {transform: translateY(0rem);}
    100% {top: 86%;transform: scale(1.32);margin-left: -1.03rem;}
}

@-webkit-keyframes phone {
    0% {transform: translateY(0rem);}
    100% {top: 86%;-webkit-transform: scale(1.32);margin-left: -1.03rem;}
}


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

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

@keyframes start {
    0% { transform: translateX(-.8rem); }
    100% { transform: translateX(.8rem); }
}

@-webkit-keyframes start {
    0% { -webkit-transform: translateX(-.8rem); }
    100% { -webkit-transform: translateX(.8rem); }
}


@-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);
  }
}