@charset "gb2312";
*{margin: 0;padding: 0;box-sizing: border-box;outline: none;-webkit-tap-highlight-color: transparent;}
em,i{font-style:normal;}
table{border-collapse: collapse;border-spacing: 0;}
input,img,select{vertical-align: middle;} 
button {border: none; cursor: pointer;}
img{border: none;display: block;}
li {list-style: none;}
input,textarea{-webkit-appearance: none; /* 清楚ios移动端输入框自带阴影*/}
body{font-family:"微软雅黑",'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;position: relative;margin: 0 auto;}

.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{position: absolute;left: 0;height: 100%;width: 100%;top: 0;}
.page{position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;max-width: 7.5rem;}
.page1{background: url(../images/main_bg.jpg) no-repeat;background-size: 100% 100%;}

.load{z-index: 5000000;background: #fff;}
.load .load_logo{position: absolute;width: 7.5rem;top: 30%;}
.load .load_logo img{width: 3rem;animation: logo 2s linear infinite;-webkit-: logo 2s linear infinite;margin-left: 1.8rem;}
.progress{left: 0rem;top: 45%;font-size: .28rem;position: absolute;width: 100%;text-align: center;color: red;}

.page1{background: url(../images/bg.jpg) top center no-repeat;background-size: 100% 100%;z-index: 500;}
.title{background: url(../images/title.png);width: 6.02rem;height: 8.01rem;background-size: 100% 100%;position: absolute;left: .74rem;top: 10%;}
.logo{background: url(../images/logo.png);width: 3.72rem;height: .65rem;background-size: 100% 100%;position: absolute;left: 1.89rem;top: 88%;}
.btn{background: url(../images/btn.png);width: 2.3rem;height: .7rem;background-size: 100% 100%;position: absolute;left: 2.6rem;top: 78%;}
.btn input{opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;}

.page2{background: #f7f0de;}
#page_capture{height: 100%;}
.move_box img{width: 100%;position: absolute;}
.title_2 img{width: 100%;height: 100%;position: absolute;}
.move_t{width: 7.5rem;height: 3.93rem;position: absolute;left: 0;top: 0;background-size: 100% 100%;z-index: 100;}
.move_l{width: 1.52rem;height: 3.27rem;position: absolute;left: 0;top: 3.93rem;background-size: 100% 100%;z-index: 100;}
.move_r{width: 1.41rem;height: 3.27rem;position: absolute;right: 0;top: 3.93rem;background-size: 100% 100%;z-index: 100;}
.move_b{width: 7.5rem;height: 2.59rem;position: absolute;left: 0;top: 7.2rem;background-size: 100% 100%;z-index: 100;}
.move_img{background: #fff;width: 7.5rem;height: 5rem;position: absolute;left: 0;top: 3rem;overflow: hidden;}
.move_img img{position: absolute;left: 0;top: 0;}
.page_b{background: url(../images/page_b.png);width: 7.5rem;height: 5.35rem;background-size: 100% 100%;position: absolute;left: 0;bottom: 0rem;z-index: 101;}
.title_2{width: 5.5rem;height: 2.47rem;background-size: 100% 100%;position: absolute;left: 1.6rem;top: 0rem;z-index: 101;}
.iocnBg{width: 7.5rem;height: 2.17rem;background-size: 100% 100%;position: absolute;left: 0;top: 58%;z-index: 200;}
.iocnBg img{width: 100%;height: 100%;}
.keyBg{width: 6rem;height: .7rem;background-size: 100% 100%;position: absolute;z-index: 205;top: 70%;left: .75rem;overflow: hidden;}
.keyBg img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;pointer-events: none;}
.sure{background: url(../images/sure.png);width: 1.65rem;height: .76rem;background-size: 100% 100%;position: absolute;z-index: 105;top: 88%;left: 2.925rem;}

.swiper-container{width: 6rem;height: .7rem;overflow: hidden;text-align: center;line-height: .7rem;position: absolute;left: 0;top: 0;}
.swiper-slide{color: #fff;font-size: .28rem;height: .7rem;overflow: hidden;}
.tip{width: 7.5rem;text-align: center;font-size: .3rem;position: absolute;z-index: 200;left: 0;top: 78%;text-shadow:2px 2px 0px white,-2px -2px 0px white;color: #cc0a0a;}

.erweima img{width: 1.5rem;height: 1.5rem;position: absolute;left: .5rem;bottom: .3rem;z-index: 1000;display: none;left: 3rem;}
.logo_bg img{width: 3.76rem;height: .66rem;right: .5rem;bottom: .5rem;z-index: 1000;display: none;top: 78%;left: 1.59rem;position: absolute;}

.page3{background: url(../images/pgae3_bg.jpg) top center no-repeat;background-size: 100% 100%;display: none;}
.page_box{border: 1px solid #e60012;border-radius: .5rem;width: 6rem;margin-left: .75rem;margin-top: .75rem;}
.poster{width: 6rem;height: auto;padding: .3rem;}

.save{background: url(../images/save.png);width: 2.7rem;height: .74rem;position: absolute;left: .75rem;bottom: .8rem;background-size: 100% 100%;}
.rePlay{background: url(../images/rePlay.png);width: 2.7rem;height: .74rem;position: absolute;right: .75rem;bottom: .8rem;background-size: 100% 100%;z-index: 10;}

.music{background: url(https://wx.gog.cn/H5/tpgj2019/images/music.png);width: .68rem;height: .68rem;position: absolute;z-index: 3000;right: .3rem;top: .3rem;background-size: 100% 100%;}
.music.on{animation: rotation 1s linear infinite;-webkit-animation: rotation 1s linear infinite;}

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