.fixed{ position: fixed;width:100%;height: 100%;overflow: hidden;}
.posa{ position: absolute;}

/* Basic sample */
html,body{
	background-color:#fcfcfc;
}
body{
	overflow-x:hidden;
	background-color:#fcfcfc;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
}

.flipbook-viewport .container{
}

.flipbook-viewport .flipbook{
	
}

.flipbook-viewport .page{
	width:461px;
	height:600px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% auto;
}

.flipbook .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

@-webkit-keyframes reverseRotataZ{
	0%{-webkit-transform: rotateZ(0deg);}
	100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
	0%{-webkit-transform: rotateZ(0deg);}
	100%{-webkit-transform: rotateZ(360deg);}
}

.pull-left {position:absolute;bottom:5%;right:0;overflow:hidden;width:240px; height:200px; }/*  |xGv00|e69d3d10a97baed58b34702fd0b01ff5 */

body{
    background:#dddddd url(../images/background.png) repeat;
}
.loadinner{
    position:absolute;
    width:76%;
    height:100%;
    margin-left:-38%;
    left:50%;
    text-align:center;
    font-size:11px;
    line-height:20px;
}
.graph{
    background:#6c6c6c;
    width:70%;
    margin:10px auto 0 auto;
}
#bar{
    display:block;
    background:#f1f1f1;
    height:3px;
    width:10px;
}
#diary{width:70%;margin:0 auto;}
#chupin{width:100%;position:absolute;bottom:80px;}
#cpright{position:absolute;bottom:50px;color:#757575;font-size:9px;text-align:center;width:100%;letter-spacing: -1px;word-spacing: -1px;}

.page2{
    display: none;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.page2{
    z-index: 10;
}

.page3{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(100%);
    transition: .4s;
    z-index: 100;
}
.page3.active{
    transform: translateX(0);
}

.page1{
    width: 100%;
    height: 100%;
    position: absolute;
    /* top: 50%;
    transform: translateY(-50%); */
}
.page1 .bg1,.page1 .bg2{
    display: block;
    width: 100%;
    animation: slideIn 1s linear forwards;
    -webkit-animation: slideIn 1s linear forwards;
}
.page1 .bg1{
    transform: translateX(-100%);
}
.page1 .bg2{
    transform: translateX(100%);
}
@keyframes slideIn {
    to{
        transform: translateX(0);
    }
}
@-webkit-keyframes slideIn {
    to{
        transform: translateX(0);
    }
}
/* .page1 .bg1{
    height: 51%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.page1 .bg2{
    height: 49%;
    position: absolute;
    left: 50%;
    top: 51%;
    transform: translateX(-50%);
} */
.page1 .title{
    width: 6.34rem;
    position: absolute;
    left: 0.54rem;
    top: 41%;
    /* transform: translateX(-50%); */
    display: none;
}
.page1 .tips{
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0.65rem;
    font-size: 0.42rem;
    color: #fff;
    font-weight: bold;
    animation: moveDown 2s infinite both;
    -webkit-animation: moveDown 2s infinite both;
}

@keyframes moveDown{
    to{
        transform: translateY(-20px);
        opacity: 0;
    }
}
@-webkit-keyframes moveDown{
    to{
        transform: translateY(-20px);
        opacity: 0;
    }
}

.pop_video{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000000;
    display: none;
}
.video_box{
  width: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.video_box video{
    width: 100%;
}
.video_box span{
  width: 1.03rem;
  height: 1.03rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  bottom: -1.5rem;
  background: url(/images/close.png);
  background-size: 100% 100%;text-align: center;
  color: #fff;
  font-size: 40px;
}

.page2{
    width: 100%;
    height: 56rem;
    background: url(../images/2/bg.jpg);
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.full{
    display: block;
    width: 100%;
}
.page2 .img1:before{
    content: "";
    display: block;
    width: 1px;
    height: 2.88rem;
    background: #fff;
    margin: 0 auto 0.3rem;
}
.page2 .img1{
    display: block;
    width: 5.15rem;
    margin: 0 auto 0.38rem;
}
.page2 .img2:before{
    content: "";
    display: block;
    width: 1px;
    height: 1rem;
    background: #fff;
    margin: 0 auto 0.24rem;
}
.page2 .img2{
    display: block;
    width: 5.86rem;
    margin: 0 auto 0.32rem;
}
.page2 .img3:before{
    content: "";
    display: block;
    width: 1px;
    height: 1rem;
    background: #fff;
    margin: 0 auto 0.24rem;
}
.page2 .img3{
    display: block;
    width: 5.57rem;
    margin: 0 auto 0.32rem;
}
.page2 .img4:before{
    content: "";
    display: block;
    width: 1px;
    height: 0.93rem;
    background: #fff;
    margin: 0 auto 0.22rem;
}
.page2 .img4{
    display: block;
    width: 4.22rem;
    margin: 0 auto 0.28rem;
}
.page2 .img5:before{
    content: "";
    display: block;
    width: 1px;
    height: 1.3rem;
    background: #fff;
    margin: 0 auto 0.3rem;
}
.page2 .img5{
    display: block;
    width: 3.5rem;
    margin: 0 auto 0.34rem;
}
.page2 .img5:after{
    content: "";
    display: block;
    width: 1px;
    height: 2.1rem;
    background: linear-gradient(to bottom, #fff, #fff, #fff, transparent);
    margin: 0.2rem auto 0;
}
.page2 .img6{
    width: 2.8rem;
    position: absolute;
    left: 2.34rem;
    top: 19.44rem;
}
.page2 .img6 .full{
    border-radius: 5px;
}
.page2 .img6 .shadow{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.1);
    z-index: 1;
    border-radius: 5px;
}
.page2 .img6 .play{
    width: 1.28rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.page2 .link{
    position: absolute;
}
.page2 .link img{
    display: block;
    width: 100%;
}
.page2 .link1 img {
    animation: updown 2s infinite .2s both;
    -webkit-animation: updown 2s infinite .2s both;
}
.page2 .link2 img {
    animation: updown 2s infinite .4s both;
    -webkit-animation: updown 2s infinite .4s both;
}
.page2 .link3 img {
    animation: updown 2s infinite .55s both;
    -webkit-animation: updown 2s infinite .55s both;
}
.page2 .link4 img {
    animation: updown 2s infinite .7s both;
    -webkit-animation: updown 2s infinite .7s both;
}
.page2 .link5 img {
    animation: updown 2s infinite .8s both;
    -webkit-animation: updown 2s infinite .8s both;
}
.page2 .link6 img {
    animation: updown 2s infinite .3s both;
    -webkit-animation: updown 2s infinite .3s both;
}
.page2 .link7 img {
    animation: updown 2s infinite 1s both;
    -webkit-animation: updown 2s infinite 1s both;
}
.page2 .link8 img {
    animation: updown 2s infinite 1.15s both;
    -webkit-animation: updown 2s infinite 1.15s both;
}
.page2 .link9 img {
    animation: updown 2s infinite 1.45s both;
    -webkit-animation: updown 2s infinite 1.45s both;
}
.page2 .link10 img {
    animation: updown 2s infinite 1.95s both;
    -webkit-animation: updown 2s infinite 1.95s both;
}
@keyframes updown{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0);
    }
}
@-webkit-keyframes updown{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(0);
    }
}
.page2 .link1{
    width: 1.73rem;
    height: 3rem;
    left: 4.64rem;
    top: 22.5rem;
}
.page2 .link2{
    width: 2.19rem;
    height: 3.15rem;
    left: 0.06rem;
    top: 24.1rem;
}
.page2 .link3{
    width: 2.14rem;
    height: 3rem;
    left: 3.92rem;
    top: 27rem;
}
.page2 .link4{
    width: 2.19rem;
    height: 3.2rem;
    left: 0.18rem;
    top: 31rem;
}
.page2 .link5{
    width: 2.14rem;
    height: 2.2rem;
    left: 4.34rem;
    top: 31.4rem;
}
.page2 .link6{
    width: 2.17rem;
    height: 3.6rem;
    left: 2.96rem;
    top: 34rem;
}
.page2 .link7{
    width: 1.83rem;
    height: 3rem;
    left: 2.32rem;
    top: 38.9rem;
}
.page2 .link8{
    width: 2.75rem;
    height: 3rem;
    left: 4.4rem;
    top: 42.3rem;
}
.page2 .link9{
    width: 2.19rem;
    height: 3rem;
    left: 1.8rem;
    top: 46.9rem;
}
.page2 .link10{
    width: 2.14rem;
    height: 3.2rem;
    left: 2.76rem;
    top: 50.4rem;
}
.flipbook-viewport .back{
    width: 1.51rem;
    height: 0.68rem;
    position: absolute;
    left: 0;
    top: 0.1rem;
    background: url(../images/back.png);
    background-size: 100% 100%;
    z-index: 10086;
}
.flipbook-viewport .buy{
    width: 1.75rem;
    height: 0.68rem;
    position: absolute;
    right: 0;
    top: 0.1rem;
    background: url(../images/buy.png);
    background-size: 100% 100%;
    z-index: 10086;
}
.flipbook-viewport .slide{
    width: 2.29rem;
    position: absolute;
    right: 0.3rem;
    top: 52%;
    animation: moveLeft 2s infinite both;
    -webkit-animation: moveLeft 2s infinite both;
}
@keyframes moveLeft{
    to{
        transform: translateX(-20px);
        opacity: 0;
    }
}
@-webkit-keyframes moveLeft{
    to{
        transform: translateX(-20px);
        opacity: 0;
    }
}
.red{
    color: #e60012;
}
.subpage{
    background-repeat: no-repeat;
    background-position: center top;
}
.subpage1{
    /* background: url(../images/3/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage1 .title{
    /* display: none; */
    width: 7.25rem;
    left: 0.13rem;
    top: 5.6rem;
}
.subpage2{
    /* background: url(../images/4/1/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage2 .t1{
    width: 6.86rem;
    left: 0;
    top: 0.29rem;
}
.subpage2 .t2{
    width: 1.61rem;
    left: 0.59rem;
    top: 2.04rem;
}
.subpage2 .t3{
    width: 4.42rem;
    left: 3.44rem;
    top: 2.31rem;
    /* display: none; */
}
.subpage2 .text{
    /* display: none; */
    font-size: 0.22rem;
    color: #fff;
    line-height: 0.48rem;
    position: absolute;
    left: 0.15rem;
    top: 4.4rem;
}
.subpage3{
    /* background: url(../images/4/2/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage3 .text{
    width: 6.96rem;
    position: absolute;
    left: 0.25rem;
    top: 1rem;
}
.subpage3 .text h2{
    font-size: 0.48rem;
    color: #fff100;
    font-weight: bold;
    margin-bottom: 0.15rem
}
.subpage3 .text p{
    font-size: 0.22rem;
    color: #fff;
    line-height: 0.36rem;
    margin-bottom: 0.35rem;
} 
.subpage4{
    /* background: url(../images/4/3/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage4 .text{
    width: 7.2rem;
    position: absolute;
    left: 0.15rem;
    top: 0.85rem;
}
.subpage4 .text h2{
    font-size: 0.48rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 0.25rem;
}
.subpage4 .text p{
    font-size: 0.22rem;
    color: #fff;
    line-height: 0.36rem;
    margin-bottom: 0.4rem;
}
.subpage4 .t1{
    width: 5.12rem;
    left: 0.12rem;
    top: 5rem;
}
.subpage5{
    /* background: url(../images/4/4/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage5 .title{
    width: 5.73rem;
    left: 0.08rem;
    top: 1.29rem;
}
.subpage5 .text{
    position: absolute;
    left: 0.25rem;
    top: 2.7rem;
    width: 7.1rem;
    font-size: 0.22rem;
    color: #1a2981;
    line-height: 0.36rem;
}
.subpage5 .text p{
    margin-bottom: 0.4rem;
}
.subpage5 .t1{
    width: 100%;
    left: 0;
    top: 5.55rem;
    /* animation: updown 2s infinite .2s both;
    -webkit-animation: updown 2s infinite .2s both; */
}
.subpage6{
    /* background: url(../images/4/5/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage6 .t1{
    width: 5.2rem;
    left: 0.53rem;
    top: 0.48rem;
    /* display: none; */
    transform-origin: 6.3% 100%;
    -webkit-transform-origin: 6.3% 100%;
}
.subpage6 .t1.active{
    animation: scaleIn 1s linear .5s both;
    -webkit-animation: scaleIn 1s linear .5s both;
}
.subpage6 .title{
    width: 5.79rem;
    left: 0.04rem;
    top: 5.76rem;
}
.subpage6 .text{
    position: absolute;
    left: 0.2rem;
    top: 7.66rem;
    width: 6.7rem;
    font-size: 0.22rem;
    color: #1e2c5c;
    line-height: 0.36rem;
}
.subpage7{
    /* background: url(../images/4/6/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage7 .text{
    width: 5.85rem;
    position: absolute;
    left: 0.25rem;
    top: 1.08rem;
    font-size: 0.22rem;
    color: #1e2c5c;
    line-height: 0.36rem;
}
.subpage7 .text h2{
    font-size:0.6rem ;
    color: #fff;
    margin-bottom: 0.12rem;
    line-height: 1;
}
.subpage7 .text h3{
    font-size:0.34rem ;
    color: #fff;
    margin-bottom: 0.2rem;
    line-height: 1;
}
.subpage7 .text p{
    font-size: 0.22rem;
    color: #fff;
    line-height: 0.36rem;
}
.subpage8{
    /* background: url(../images/4/7/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage8 .text{
    position: absolute;
    left: 0.22rem;
    top: 0.98rem;
}
.subpage8 .text h2{
    font-size:0.6rem ;
    color: #fff;
    margin-bottom: 0.12rem;
}
.subpage8 .text h3{
    font-size:0.34rem ;
    color: #fff;
    margin-bottom: 0.2rem;
}
.subpage8 .text p{
    font-size: 0.22rem;
    color: #fff;
    line-height: 0.36rem;
    margin-bottom: 0.38rem;
}
.subpage9{
    /* background: url(../images/4/8/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage9 .title{
    width: 6.56rem;
    left: 0.59rem;
    top: 0.93rem;
    /* display: none; */
}
.subpage9 .t1{
    width: 5.85rem;
    left: 0.77rem;
    top: 7.15rem;
}
.subpage10{
    /* background: url(../images/4/9/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage10 .t1{
    width: 1.32rem;
    left: 0.16rem;
    top: 1.03rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage10 .t1.active{
    animation: scaleIn 1s linear .2s both;
    -webkit-animation: scaleIn 1s linear .2s both;
}
.subpage10 .t2{
    width: 1.21rem;
    left: 6.08rem;
    top: 1.38rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage10 .t2.active{
    animation: scaleIn 1s linear .4s both;
    -webkit-animation: scaleIn 1s linear .4s both;
}
.subpage10 .t3{
    width: 1.97rem;
    left: 0.23rem;
    top: 7.86rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage10 .t3.active{
    animation: scaleIn 1s linear .6s both;
    -webkit-animation: scaleIn 1s linear .6s both;
}
.subpage10 .t4{
    width: 1.72rem;
    left: 5.1rem;
    top: 7.63rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage10 .t4.active{
    animation: scaleIn 1s linear .8s both;
    -webkit-animation: scaleIn 1s linear .8s both;
}
.subpage10 .t5{
    width: 1.65rem;
    left: 1.64rem;
    top: 10.91rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage10 .t5.active{
    animation: scaleIn 1s linear 1s both;
    -webkit-animation: scaleIn 1s linear 1s both;
}
.subpage11{
    /* background: url(../images/5/1/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage11 .title{
    width: 6.73rem;
    left: 0.29rem;
    top: 1rem;
}
.subpage12{
    /* background: url(../images/5/2/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage12 .t1{
    width: 2.09rem;
    left: 0.28rem;
    top: 5.48rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage12 .t1.active{
    animation: scaleIn 1s linear .2s both;
    -webkit-animation: scaleIn 1s linear .2s both;
}
.subpage12 .t2{
    width: 2.45rem;
    left: 4.19rem;
    top: 5.19rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage12 .t2.active{
    animation: scaleIn 1s linear .4s both;
    -webkit-animation: scaleIn 1s linear .4s both;
}
.subpage12 .t3{
    width: 2.31rem;
    left: 2.7rem;
    top: 6.67rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage12 .t3.active{
    animation: scaleIn 1s linear .6s both;
    -webkit-animation: scaleIn 1s linear .6s both;
}
.subpage12 .t4{
    width: 2.99rem;
    left: 0.04rem;
    top: 8.05rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage12 .t4.active{
    animation: scaleIn 1s linear .8s both;
    -webkit-animation: scaleIn 1s linear .8s both;
}
.subpage13{
    /* background: url(../images/5/3/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage13 .text{
    width: 5.2rem;
    position: absolute;
    left: 2.07rem;
    top: 3.01rem;
    line-height: 0.36rem;
    color: #fff;
}
.subpage13 .text h2{
    font-size: 0.26rem;
}
.subpage13 .text p{
    font-size: 0.22rem;
}
.subpage13 .t1{
    width: 3.82rem;
    left: 0.2rem;
    top: 0.76rem;
    /* display: none; */
    transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
}
.subpage13 .t1.active{
    animation: scaleIn 1s linear .2s both;
    -webkit-animation: scaleIn 1s linear .2s both;
}
.subpage13 .t2{
    width: 2.63rem;
    left: 1.51rem;
    top: 8.85rem;
    transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
}
.subpage13 .t2.active{
    animation: scaleIn 1s linear .4s both;
    -webkit-animation: scaleIn 1s linear .4s both;
}
.subpage13 .t3{
    width: 1.77rem;
    left: 5.44rem;
    top: 10.2rem;
    transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
}
.subpage13 .t3.active{
    animation: scaleIn 1s linear .6s both;
    -webkit-animation: scaleIn 1s linear .6s both;
}
.subpage14{
    /* background: url(../images/5/4/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage14 .text{
    width: 4.15rem;
    position: absolute;
    left: 3.04rem;
    top: 3.58rem;
    font-size: 0.22rem;
    color: #211412;
    line-height: 0.36rem;
}
.subpage14 .t1{
    width: 1.81rem;
    left: 0.65rem;
    top: 3.67rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage14 .t1.active{
    animation: scaleInBig 1s linear .3s both;
    -webkit-animation: scaleInBig 1s linear .3s both;
}
.subpage14 .t2{
    width: 2.09rem;
    left: 0;
    top: 6.74rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage14 .t2.active{
    animation: scaleInBig 1s linear .6s both;
    -webkit-animation: scaleInBig 1s linear .6s both;
}
.subpage14 .t3{
    width: 2.65rem;
    left: 4.83rem;
    top: 7.59rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage14 .t3.active{
    animation: scaleInBig 1s linear .9s both;
    -webkit-animation: scaleInBig 1s linear .9s both;
}
.subpage15{
    /* background: url(../images/5/5/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage16{
    /* background: url(../images/6/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage16 .t1{
    width: 1.45rem;
    left: 0.16rem;
    top: 6.89rem;
}
.subpage16 .t2{
    width: 1.66rem;
    left: 5.84rem;
    top: 7.76rem;
}
.subpage16 .t3{
    width: 4.29rem;
    left: 1.61rem;
    top: 8.17rem;
}
.subpage16 .t4{
    width: 2.66rem;
    left: 0.62rem;
    top: 11.51rem;
}
.subpage16 .t5{
    width: 2.21rem;
    left: 4.4rem;
    top: 10.94rem;
}
.subpage17{
    /* background: url(../images/7/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage17 .t1{
    width: 2.83rem;
    left: 2.63rem;
    top: -0.54rem;
    /* animation: updown 2s infinite .3s both;
    -webkit-animation: updown 2s infinite .3s both; */
}
.subpage17 .t2{
    width: 1.85rem;
    left: 5.47rem;
    top: 1.02rem;
    /* animation: updown 2s infinite .6s both;
    -webkit-animation: updown 2s infinite .6s both; */
}
.subpage17 .t3{
    width: 0.88rem;
    left: 0.21rem;
    top: 3.35rem;
    /* animation: updown 2s infinite .9s both;
    -webkit-animation: updown 2s infinite .9s both; */
}
.subpage17 .t4{
    width: 6.83rem;
    left: 0;
    top: 3.78rem;
    /* animation: updown 2s infinite 1.3s both;
    -webkit-animation: updown 2s infinite 1.3s both; */
}
.subpage17 .t5{
    width: 6.31rem;
    left: 0.53rem;
    top: 7.88rem;
}
.subpage18{
    /* background: url(../images/8/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage18 .t1{
    width: 2.19rem;
    left: 0.18rem;
    top: 4.84rem;
    /* animation: updown 2s infinite  both;
    -webkit-animation: updown 2s infinite  both; */
}
.subpage18 .t2{
    width: 2.06rem;
    left: 5.17rem;
    top: 5.2rem;
    /* animation: updown 2s infinite 1s both;
    -webkit-animation: updown 2s infinite 1s both; */
}
.subpage19{
    /* background: url(../images/9/bg1.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage19 .title{
    width: 6.02rem;
    left: 0.75rem;
    top: 7.59rem;
    /* display: none; */
}
.subpage19 .text{
    position: absolute;
    left: 0.25rem;
    top: 1.55rem;
    color: #fff;
}
.subpage19 .text h2{
    font-size: 0.44rem;
    margin-bottom: 0.1rem;
}
.subpage19 .text p{
    font-size: 0.28rem;
    line-height: 0.48rem;
}
.subpage19 .text .yellow{
    color: #fff100;
    font-weight: bold;
}
.subpage20{
    /* background: url(../images/9/bg2.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage21{
    /* background: url(../images/10/bg1.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage21 .t1{
    width: 2.26rem;
    left: 2.57rem;
    top: 8.71rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage21 .t1.active{
    animation: scaleIn 1s linear .4s both;
    -webkit-animation: scaleIn 1s linear .4s both;
}
.subpage21 .t2{
    width: 3.66rem;
    left: 0.27rem;
    top: 11.03rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage21 .t2.active{
    animation: scaleIn 1s linear .8s both;
    -webkit-animation: scaleIn 1s linear .8s both;
}
.subpage21 .t3{
    width: 2.37rem;
    left: 4.8rem;
    top: 11.08rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage21 .t3.active{
    animation: scaleIn 1s linear 1.2s both;
    -webkit-animation: scaleIn 1s linear 1.2s both;
}
.subpage22{
    /* background: url(../images/10/bg2.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage23{
    /* background: url(../images/11/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage23 .t1{
    width: 0.98rem;
    left: 6.07rem;
    top: 1.15rem;
    /* animation: updown 2s infinite  both; */
    /* -webkit-animation: updown 2s infinite  both; */
}
.subpage23 .t2{
    width: 0.54rem;
    left: 0.41rem;
    top: 3.15rem;
    /* animation: updown 2s infinite 1s both;
    -webkit-animation: updown 2s infinite 1s both; */
}
.subpage23 .t3{
    width: 1.67rem;
    left: 4.82rem;
    top: 3.97rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage23 .t3.active{
    animation: scaleIn 1s linear .2s both;
    -webkit-animation: scaleIn 1s linear .2s both;
}
.subpage23 .t4{
    width: 1.55rem;
    left: 4.28rem;
    top: 5.51rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage23 .t4.active{
    animation: scaleIn 1s linear .5s both;
    -webkit-animation: scaleIn 1s linear .5s both;
}
.subpage23 .t5{
    width: 1.55rem;
    left: 2.8rem;
    top: 5.95rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage23 .t5.active{
    animation: scaleIn 1s linear .8s both;
    -webkit-animation: scaleIn 1s linear .8s both;
}
.subpage23 .t6{
    width: 1.55rem;
    left: 5.85rem;
    top: 5.67rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage23 .t6.active{
    animation: scaleIn 1s linear 1.1s both;
    -webkit-animation: scaleIn 1s linear 1.1s both;
}
.subpage23 .t7{
    width: 1.54rem;
    left: 4.75rem;
    top: 7.29rem;
    /* display: none; */
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}
.subpage23 .t7.active{
    animation: scaleIn 1s linear 1.4s both;
    -webkit-animation: scaleIn 1s linear 1.4s both;
}
.subpage24{
    /* background: url(../images/12/bg.jpg) center top no-repeat; */
    background-size: 100% auto;
}
.subpage24 .text{
    position: absolute;
    left: 0.3rem;
    top: 0.85rem;
    color: #fff;
    font-weight: bold;
    line-height: 0.44rem;
    font-size: 0.22rem;
}
.subpage24 .text .stress{
    color: #fdd000;
    font-size: 0.28rem;
}
.subpage24 .text .green{
    color: #80bf29;
    font-size: 0.28rem;
}
.subpage24 .text h2{
    font-size: 0.75rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.subpage24 .text h3{
    font-size: 0.48rem;
    line-height: 1;
    margin-bottom: 0.1rem;
}

h1,h2,h3,h4,h5,h6{ font-weight: bold;}



/*音乐*/
.music_btn{ width: 0.63rem; height: 0.63rem;position: fixed; right: 0.5rem; top:1rem; z-index: 1000000;background: url(../images/music.png) center top;background-size: 100% 100%;}
.music_btn.musiclink{-webkit-animation: music-1 2s linear infinite both;animation: music-1 2s linear infinite both;  }
.music_btn.linked{animation-play-state:paused; -webkit-animation-play-state:paused;}
@keyframes music-1{
    0% {transform:rotate(0deg);}
    100% {transform:rotate(-360deg)}
}
@-webkit-keyframes music-1{
    0% {transform:rotate(0deg);}
    100% {transform:rotate(-360deg)}
}

.copyright{
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    width: 100%;
    text-align: center;
    font-size: 0.24rem;
    color: #fff;
}

@keyframes scaleIn{
    from{
        opacity: 0;
        transform: scale(0)
    }
    to{
        opacity: 1;
        transform: scale(1)
    }
}
@-webkit-keyframes scaleIn{
    from{
        opacity: 0;
        transform: scale(0)
    }
    to{
        opacity: 1;
        -webkit-transform: scale(1)
    }
}


@keyframes scaleInBig{
    from{
        opacity: 0;
        transform: scale(2)
    }
    to{
        opacity: 1;
        transform: scale(1)
    }
}
@-webkit-keyframes scaleInBig{
    from{
        opacity: 0;
        -webkit-transform: scale(2)
    }
    to{
        opacity: 1;
        -webkit-transform: scale(1)
    }
}

.loading-text{
    width: 6.22rem;
    position: absolute;
    left: 50%;
    top: 2.8rem;
    transform: translateX(-50%);
}
.loading{
    width: 100%;
    height: 100%;
    background: url(../images/loading.jpg);
    background-size: cover;
    position: relative;
}
.progress{ width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 0.28rem; color: #fff;}