*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}
.tips_blk{z-index:99999999999;position:absolute;left:50%;bottom:10px;width:130px;height: 20px;margin-left:-65px;text-align:center;}
.tips_blk p{z-index:99999999999;font-size:10px;color:#FFF;}
.tips_blk_hide p{z-index:99999999999;display:none;}
.loading{position:absolute;width:100%;height:100%;background:url('../images/img1/loading.jpg?2');background-size:100% 100%;z-index: 99}
.loading1{
    position:absolute;top:31%;left:33%;width: 35.26%;height:6px;background-color: #d4d2d1;
}
.loading1_1{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #777878;
}
a{opacity:1}
/*loading*/


/*音乐*/
.music_blk{z-index:999;position:fixed;right:10px;top:10px;display: none}
.music{display:block;width:30px;height:30px;background:url('../images/img1/music_on.png') no-repeat;background-size:100% 100%;}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

.swiper-container{position:absolute;width:100%;height:100%}
.swiper-slide{position:relative;overflow:hidden}
.swiper-slide *{position:absolute;opacity:0}

.s00{position: absolute;top:0;left:0;background:url('../images/img1/p0.jpg?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}

.s00_1{position: absolute;top:0;left:0;background:url('../images/img1/p0.2.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
/*.s00_2{position: absolute;top:0;left:0;background:url('../images/img1/p0.5.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}*/
.s00_3{position: absolute;top:0;left:0;background:url('../images/img1/p0.1.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.s00_4{position: absolute;top:0;left:0;background:url('../images/img1/p0.4.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.s00_click{position: absolute;top:86%;left:45%;width: 22.222%;height:8.63%;background:url('../images/img1/p0.6.png?2') no-repeat 0 0;background-size:100% 100%;}
.s00_click1{position: absolute;top:83%;left:25%;width: 51%;height:12.63%;opacity: 0}
.s00.ani .s00_3{
    -webkit-animation: 0.8s 0.2s Out linear both;
    animation: 0.8s 0.2s Out linear both;
}

.s00.ani .s00_1{
    -webkit-animation: 1s 1.5s Out linear both;
    animation: 1s 1.5s Out linear both;
}

.s00.ani .s00_4{
    -webkit-animation: 1s 4s Out linear both;
    animation: 1s 4s Out linear both;
}
.s00.ani .s00_click{
    -webkit-animation: 1s 5.2s s00_click  linear infinite;
    animation: 1s 5.2s s00_click linear infinite;
}
.s00.ani .s00_click1{
    -webkit-animation: 0.1s 5.2s Out  linear both;
    animation: 0.1s 5.2s Out linear both;
}

#s00.ani1{
     -webkit-animation: 0.4s  Out111 linear both;
     animation: 0.4s  Out111 linear both;
 }

.s000{width: 100%;height:100%;position: absolute;top: 0;left:0;background:url("../images/img1/p1.jpg?2") no-repeat 0 0;background-size:100% 100%;}
.s001{width: 100%;height:63.54%;position: absolute;top:26.63%;left:0;}
.s000_1{position: absolute;top:0;left:0;background:url('../images/img1/p1.1.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:9.67%;opacity: 0}
.s000_2{position: absolute;top:0;left:0;background:url('../images/img1/p1.2.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s000_3{position: absolute;top:0;left:0;background:url('../images/img1/p1.3.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.jump{position: absolute;top:70%;left:54%;width: 28%;height:8%;opacity: 1;}
.unjump{position: absolute;top:70%;left:24%;width: 28%;height:8%;opacity: 1;}
.s000_4{position: absolute;top:0;left:0;width: 100%;height:100%;display:none;opacity: 0}
.s000_4_1{
    position: absolute;top:0;left:0;background:url('../images/img1/p1.4.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display:none
}

.s000_4_4{position: absolute;top:59%;left:33%;width:39%;height:7%;}
.s000_4_5{position: absolute;top:69%;left:32%;width: 40%;height:7%;}



#span1{
    position: absolute;top:48.2%;left:46%;height: 5.27%;width: 15%;font-size: 25px;opacity: 1;display: block;color: #3e454d;
}
.s000_4.ani{
    -webkit-animation: 0.8s 0.2s Out linear both;
    animation: 0.8s 0.2s Out linear both;
}

.s000_1.ani{
    -webkit-animation: 0.8s 0.1s Out linear both;
    animation: 0.8s 0.1s Out linear both;
}
#spot{width:25px;height:25px;border-radius: 50%;position: absolute;top: 0;left:40%;background-color: yellow;
    -webkit-animation: 0.8s  spot linear infinite;
    animation: 0.8s  spot linear infinite;
}
ul{list-style: none;width: 100%;height:100%;position: absolute;top:0;left:0;}
li{width: 100%;height:14.285%;opacity: 0.2}


#ss{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0}
#s0{width: 100%;height: 100%;background:url("../images/img1/p2.jpg?2") no-repeat 0 0;background-size:100% 100%;}
.s0_0{background:url('../images/img1/p2.1.png?3') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
#s0.ani .s0_0{
    -webkit-animation: 0.8s 0.5s Out linear both;
    animation: 0.8s 0.5s Out linear both;
}
#ss.ani1{
    -webkit-animation: 0.6s  Out linear both;
    animation: 0.6s  Out linear both;
}
#s1{background:url('../images/img1/p3.jpg?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s1_0,.s1_1{width: 100%;height: 100%;position: absolute;top:0;left:0;opacity: 1}
.s1_0_1{background:url('../images/img1/p3.1.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;}
.s1_0_2{background:url('../images/img1/p3.2.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;display:none}
.s1_0_3{background:url('../images/img1/p3.3.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;display:none}
.s1_0_4{background:url('../images/img1/p3.4.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;display:none}
.hand{background:url('../images/img1/hand.png?2') no-repeat 0 0;background-size:100% 100%;width: 7%;height:5%;position: absolute;top:29%;left:88%;opacity: 0;}
.s1_1_1{width: 47%;height:7%;position: absolute;top:24%;left:2%;}
.s1_1_2{width: 47%;height:7%;position: absolute;top:24%;left:50%;}
.s1_1_3{width: 47%;height:7%;position: absolute;top:32%;left:2%;}
.s1_1_4{width: 47%;height:7%;position: absolute;top:32%;left:50%;}
#s1.ani .hand{
    -webkit-animation: 5s 0.5s shake linear infinite;
    animation: 5s 0.5s shake linear infinite;
}


#s2{background:url('../images/img1/p4.jpg?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s2_0{background:url('../images/img1/p4.1.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;top:0}
.s2_1{background:url('../images/img1/p4.2.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;left:100%}
#s2.ani .s2_0{
    -webkit-animation:1s 0.5s Out linear both;
    animation:1s 0.5s Out linear both;
}
#s2.ani .s2_1{
    -webkit-animation:1s 2.3s s2_1 linear both;
    animation:1s 2.3s s2_1 linear both;
}


#s3{background:url('../images/img1/p5.jpg?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s3_0{background:url('../images/img1/p5.1.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1}
.s3_1{background:url('../images/img1/p5.2.png?2') no-repeat 0 0;background-size:100% 100%;width: 28.26%;height:5.1%;position: absolute;top:72.1%;left:37.3%;opacity:1}
.s3_2{background:url('../images/img1/p5.3.png?2') no-repeat 0 0;background-size:100% 100%;width: 28.26%;height:5.1%;position: absolute;top:79.1%;left:37.3%;opacity:1}
.s3_3{background:url('../images/img1/share.png?2') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}

#s3.ani .s3_0{
    -webkit-animation: 0.8s 0.3s Out linear both;
    animation: 0.8s 0.3s Out linear both;
}

#s3.ani .s3_1{
    -webkit-animation: 0.8s 1.2s s3_1 linear both;
    animation: 0.8s 1.2s s3_1 linear both;
}

#s3.ani .s3_2{
    -webkit-animation: 0.8s 1.2s s3_2 linear both;
    animation: 0.8s 1.2s s3_2 linear both;
}


.arrow{position:absolute;width: 11%;height: 6%;opacity:0;background:url("../images/img1/arrow.png?2") no-repeat 0 0;background-size:100% 100%;top:92%;left:45%}
#s0.ani .arrow,#s1.ani .arrow{
    -webkit-animation:1s 1s arrow infinite;
    animation:1s 1s arrow infinite ;
}
#s2.ani .arrow{
    -webkit-animation:1s 2.5s arrow infinite;
    animation:1s 2.5s arrow infinite ;
}
@-webkit-keyframes arrow {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,-30%,0);opacity: 1}

}
@keyframes arrow {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(0,-30%,0);opacity: 1}
}


.arrow.ani{
    -webkit-animation:arrow1 1s linear infinite;
    animation:arrow1 1s linear infinite;
}

.book2.ani{width:100%;height: 85.515%;top:6.845%;left:0;}
.hand.ani{
    -webkit-animation:Out 1s linear infinite;
    animation:Out 1s linear infinite;
}
#center0.ani .word{
    -webkit-animation:Out 1s linear both;
    animation:Out 1s linear both;
}

#center0.ani .tap{
    -webkit-animation:Out_tap 1.2s 2s  linear infinite both;
    animation:Out_tap 1.2s 2s  linear infinite both;
}

.div111.ani{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

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

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

@keyframes Out{
    0%{opacity:0}
    100%{opacity:1}
}

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


@keyframes Out_tap{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity: 0}
}
@-webkit-keyframes Out_tap{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity:0}
}


@-webkit-keyframes s00_1 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) ;}
    100% { -webkit-transform:translate3d(0,-33%,0);transform:translate3d(0,-33%,0); }
}

@keyframes s00_1 {
    0% { transform:translate3d(0,0,0) ;}
    100% { transform:translate3d(0,-33%,0);  }
}
@-webkit-keyframes spot {
    0% {-webkit-transform-origin:center center;-webkit-transform:scale(1); opacity: 1}
    50% {-webkit-transform-origin:center center;-webkit-transform:scale(1.2);opacity: 1}
    100% {-webkit-transform-origin:center center;-webkit-transform:scale(1); opacity: 1}
}

@keyframes spot {
    0% {transform-origin:center center;transform:scale(1);opacity: 1}
    50% {transform-origin:center center;transform:scale(1.2) ; opacity: 1}
    100% {-webkit-transform-origin:center center;-webkit-transform:scale(1); opacity: 1}
}


@-webkit-keyframes s00_click {
    0% {-webkit-transform-origin:right bottom;-webkit-transform:translate3d(0,0,0) rotateZ(0deg); opacity: 1}
    100% {-webkit-transform-origin:right bottom;-webkit-transform:translate3d(0,-7%,0) rotateZ(10deg); opacity: 1}
}

@keyframes s00_click {
    0% {transform-origin:right bottom;transform:translate3d(0,0,0) rotateZ(0deg); opacity: 1}
    100% {transform-origin:right bottom;transform:translate3d(0,-7%,0) rotateZ(10deg); opacity: 1}

}



@-webkit-keyframes Out111{
    0%{opacity: 0}
    100%{opacity:1}
}
@-o-keyframes Out111{
    0%{opacity: 0}
    100%{opacity:1}
}
@-moz-keyframes Out111{
    0%{opacity: 0}
    100%{opacity:1}
}
@keyframes Out111{
    0%{opacity: 0}
    100%{opacity:1 }
}



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


@-webkit-keyframes s2_0 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) ;}
    100% { -webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0); }
}

@keyframes s2_0 {
    0% { transform:translate3d(0,0,0) ;}
    100% { transform:translate3d(0,-100%,0);}
}

@-webkit-keyframes s2_1 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
    100% { -webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}
}

@keyframes s2_1 {
    0% { transform:translate3d(0,0,0) ;}
    100% { transform:translate3d(-100%,0,0);}
}

@-webkit-keyframes s3_1 {
    0% { -webkit-transform:translate3d(-300%,0,0);transform:translate3d(-300%,0,0) skew(-30deg);opacity: 1}
    100% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) skew(0deg);opacity: 1}
}

@keyframes s3_1 {
    0% { transform:translate3d(-300%,0,0) skew(-30deg);opacity: 1}
    100% { transform:translate3d(0,0,0) skew(0deg);opacity: 1}
}

@-webkit-keyframes s3_2 {
    0% { -webkit-transform:translate3d(300%,0,0);transform:translate3d(0,0,0) skew(30deg);opacity: 1}
    100% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) skew(0deg);opacity: 1}
}
@keyframes s3_2 {
    0% { transform:translate3d(300%,0,0) skew(30deg);opacity: 1}
    100% { transform:translate3d(0,0,0) skew(0deg);opacity: 1}
}

@-webkit-keyframes shake{
    0%{opacity: 1}
    20%{opacity:0}
    40%{opacity: 1}
    60%{opacity:0}
    80%{opacity:1}
    100%{opacity: 0}
}
@-o-keyframes shake{
    0%{opacity: 1}
    20%{opacity:0}
    40%{opacity: 1}
    60%{opacity:0}
    80%{opacity:1}
    100%{opacity: 0}
}
@-moz-keyframes shake{
    0%{opacity: 1}
    20%{opacity:0}
    40%{opacity: 1}
    60%{opacity:0}
    80%{opacity:1}
    100%{opacity: 0}
}

@keyframes shake{
    0%{opacity: 1}
    20%{opacity:0}
    40%{opacity: 1}
    60%{opacity:0}
    80%{opacity:1}
    100%{opacity: 0}
}