@charset "gb2312";
* {margin:0;padding:0;border:0;-webkit-user-select:text}
a,img {-webkit-touch-callout:none;}
body,p,li,ul,div,span{margin: 0;padding: 0;}
img{border: none;margin:0;padding:0;}
body{margin: 0 auto;width: 7.5rem;}
body,html {height: 100%;overflow: hidden;background: #fff;}
ul,li{list-style: none;}
a{text-decoration: none;}

.load{position: absolute;width: 100%;text-align: center;height: 100%;left: 0;top: 0;background: #fff;z-index: 1000;}
.load img{width: 30%;display: inline-block;margin-top: 3.8rem;}
.load_text p{text-indent: 0;font-size: .3rem;color: #1b2f64;}

.imgdiv0{padding-top: 4rem;}
.imgdiv0 p{width: .5rem;font-size: .35rem;margin: 0 auto;}
.imgdiv0 p span{display: inline-block;height: .2rem;width: .5rem;}

.main{width: 100%;overflow: hidden;position: absolute;left: 0;bottom: 0;top: 0;right: 0;z-index: 2;}
.main::-webkit-scrollbar{display: none;}
.mainCon{width: 100%;height: 100%;overflow:auto;}
.title{height: 1000rem;}
img{width: 7.5rem;display: block;}

.line{width: 7.5rem;height: 80%;top: 0;left: 0;overflow: hidden;position: absolute;}
.line img{width: 7.5rem;transform: translateY();}

.imgdiv4{margin-top: 6.7rem;}
.imgdiv5{position: relative;margin-top: 4rem;padding-bottom: 8.5rem;width: 7.5rem;overflow: hidden;}
/*.imgdiv5 .hug_l{position: absolute;left: 0;top: 0;width: 7rem;opacity: 0;}
.imgdiv5 .hug_r{position: absolute;right: 0;top: 2.5rem;width: 3rem;opacity: 0;}*/


/*.imgdiv5.on .hug_l{animation: inLeft 1s forwards;-webkit-animation:inLeft 1s forwards;}
.imgdiv5.on .hug_r{animation: inRight 1s forwards;-webkit-animation:inRight 1s forwards;}*/

.imgdiv6{position: relative;padding-bottom: 12.5rem;}
.imgdiv6 img{position: absolute;left: 0;top: 0;width: 7.5rem;}
/*.zy,.gy,.ga{opacity: 0;}
.imgdiv6.on .zy{animation: showImg .5s forwards;-webkit-animation:showImg .5s forwards;}
.imgdiv6.on .gy{animation: showImg .5s 1s forwards;-webkit-animation:showImg .5s 1s forwards;}
.imgdiv6.on .ga{animation: showImg .5s 2s forwards;-webkit-animation:showImg .5s 2s forwards;}*/

.imgdiv7{padding-bottom: 11rem;position: relative;}
.gou1,.gou2{position: absolute;left: 0;top: 0;opacity: 0;}
.imgdiv7.on .gou1{animation: showImg .5s forwards;-webkit-animation:showImg .5s forwards;}
.imgdiv7.on .gou2{animation: showImg .5s .5s forwards;-webkit-animation:showImg .5s .5s forwards;}

.imgdiv8{padding-bottom: 8rem;}
.imgdiv8 .city{width: 7rem;margin-left: .25rem;margin-top: -1.8rem;}

.imgdiv9{position: relative;padding-bottom: 8.2rem;}


.imgdiv10{position: relative;padding-bottom: 7.5rem;}
/*.mayun_l,.mayun_r{position: absolute;left: 0;top: 0;}*/

.imgdiv11{position: relative;padding-bottom: 7.5rem;}


.imgdiv12{position: relative;padding-bottom: 5.8rem;}
.year{width: 7rem;margin-left: .25rem;margin-top: -.5rem;}
/*.bat1,.bat2{position: absolute;left: 0;top: 0;}*/

.imgdiv13{padding-bottom: 5.5rem;}
.imgdiv14{padding-bottom: 8.8rem;}
.imgdiv15{padding-bottom: 7rem;}
.imgdiv16{padding-bottom: 7rem;}
.imgdiv17{padding-bottom: 1rem;position: relative;}
.btn{width: 3rem;height: 1.2rem;position: absolute;top: 3.3rem;}
.reoload{left: .5rem;}
.share{right: .5rem;}
.mask_bg{position: absolute;z-index: 10000;display: none;left: 0;bottom: 0;top: 0;right: 0;background: rgba(0,0,0,.7);}
.tip{background: url(../images/tip.png) top center no-repeat;background-size: 100% 100%;width: 7.5rem;height: 1.83rem;}

@keyframes inLeft
{
	0%{transform: translateX(-2.75rem);opacity: 0;}
	100%{transform: translateX(0rem);opacity: 1;}
}

@-webkit-keyframes inLeft
{
   0%{-webkit-transform: translateX(-2.75rem);opacity: 0;}
	100%{-webkit-transform: translateX(0rem);opacity: 1;}
}


@keyframes inRight
{
	0%{transform: translateX(2.75rem);opacity: 0;}
	100%{transform: translatex(0rem);opacity: 1;}
}

@-webkit-keyframes inRight
{
   0%{-webkit-transform: translateX(2.75rem);opacity: 0;}
	100%{-webkit-transform: translateX(0rem);opacity: 1;}
}

@keyframes showImg
{
	0%{;opacity: 0;}
	100%{opacity: 1;}
}

@-webkit-keyframes showImg
{
   0%{;opacity: 0;}
	100%{;opacity: 1;}
}


.music{position: fixed;right: .2rem;top:.2rem;z-index: 100;width: .6rem;height: .6rem;}
.music img{width: .6rem;height: .6rem;display: block;}
.music.on img{animation: myfirst1 2s;-webkit-animation: myfirst1 2s;animation-timing-function:linear;-webkit-animation-timing-function:linear;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}


@keyframes myfirst1
{
    from {transform: rotate(0);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes myfirst1 /* Safari δΈ?Chrome */
{
    from {transform: rotate(0);}
    to {transform: rotate(360deg);}
}