*{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/p0.jpg?1');background-size:100% 100%;z-index: 99}

/*.loading1{position:absolute;width:120px;height:120px;background:url('../images/img1/loading1.png');background-size:100% 100%;top:25%;left:25%;*/
    /*-webkit-animation:rotate 1.2s linear infinite;*/
    /*animation:rotate 1.2s linear infinite;*/
/*}*/
.loading11{
    position:absolute;top:43%;left:33%;width: 35.26%;height:4px;background-color: #d4d2d1;
}
.loading11_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:5px;top:5px;display: none}
.music{display:block;width:30px;height:30px;background:url('../images/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}



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

.bg0_1{position: absolute;top:0;left:0;width: 100%;height:100%;}
.bg0_1_1{position: absolute;top:0;left:0;background:url('../images/p0.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}

.bg0_2{position: absolute;top:0;left:0;width: 100%;height:100%;display: none;opacity: 1}
/*.bg0_2_0{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.3.png?1') no-repeat 0 0;background-size:100% 100%;opacity: 0}*/

.bg0_2_1{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.2.1.png?1') no-repeat 0 0;background-size:100% 100%;opacity: 0}
.bg0_2_1_1{position: absolute;top:26.48%;left:0;width: 100%;height:5.9%;background:url('../images/p0.2.2.png?1') no-repeat 0 0;background-size:100% 100%;}

.bg0_2_2{position: absolute;top:-73%;left:-100%;width: 100%;height:73%;background:url('../images/p0.4.png?1') no-repeat 0 0;background-size:100% 100%;opacity: 0}
/*.bg0_2_2{position: absolute;top:0;left:0;width: 100%;height:73%;background:url('../images/p0.4.png?1') no-repeat 0 0;background-size:100% 100%;opacity: 0}*/
.bg0_ship{position: absolute;top:56.8%;left:71%;background:url('../images/ship.png?1') no-repeat 0 0;background-size:100% 100%;width: 43.47%;height:11.9%;opacity: 1}
.ship_click{position: absolute;top:0;left:0;background:url('../images/hand1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1}

.bg0.ani .ship_click{
    -webkit-animation: 1s 0.3s ship_click linear infinite;
    animation: 1s 0.3s ship_click linear infinite;
}

.bg0_ship.ani{
    -webkit-animation: 50s 0.1s bg0_ship linear both;
    animation: 50s 0.1s bg0_ship linear both;
}

.bg0_1_1.ani{
    -webkit-animation: 2.5s 0.5s bg0_1 linear both;
    animation:2.5s 0.5s bg0_1 linear both;
}

.bg0_2.ani .bg0_2_0{
    -webkit-animation: 2s 0.2s Out linear both;
    animation: 2s 0.2s Out linear both;
}
.bg0_2.ani .bg0_2_1{
    -webkit-animation: 1.5s 0.2s Out linear both;
    animation: 1.5s 0.2s Out linear both;
}

.bg0_2.ani .bg0_2_2{
    -webkit-animation: 4s 0.2s bg0_2_4 linear both;
    animation:4s 0.2s bg0_2_4 linear both;
}


@keyframes bg0_1{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes bg0_1{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}

@-webkit-keyframes bg0_ship {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 1}
    100% { -webkit-transform:translate3d(-500%,0,0);transform:translate3d(-500%,0,0);opacity: 1}
}
@keyframes bg0_ship {
    0% { transform:translate3d(0,0,0);opacity: 1}
    100% { transform:translate3d(-500%,0,0);opacity: 1}
}

@-webkit-keyframes bg0_2_4 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) ;opacity: 0}
    100% { -webkit-transform:translate3d(100%,102%,0);transform:translate3d(100%,102%,0) ;opacity: 1}
}
@keyframes bg0_2_4 {
    0% { transform:translate3d(0,0,0) ;opacity: 0}
    100% { transform:translate3d(100%,102%,0);opacity: 1}
}

/*@-webkit-keyframes bg0_2_4 {*/
    /*0% {-webkit-transform-origin: top left; -webkit-transform:scale(0.1);transform-origin: top left;transform:scale(0.1);opacity: 0}*/
    /*100% { -webkit-transform-origin: top left;-webkit-transform:scale(0.1);transform-origin: top left;transform:scale(0.1);opacity: 1}*/
/*}*/
/*@keyframes bg0_2_4 {*/
    /*0% { transform-origin: top left;transform:scale(0.1);opacity: 0}*/
    /*100% {transform-origin: top left; transform:scale(1);opacity: 1}*/
/*}*/
#ss{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0}
#s0{width: 100%;height: 100%;background:url("../images/p1.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.s0_0{background:url('../images/p1.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.s0_1{background:url('../images/p1.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:38.69%;bottom:0;left:0;opacity: 0}
#s0.ani .s0_0{
    -webkit-animation: 0.8s 1.5s Out linear both;
    animation: 0.8s 1.5s Out linear both;
}
#s0.ani .s0_1{
    -webkit-animation: 0.8s 0.5s Out linear both;
    animation: 0.8s 0.5s Out linear both;
}


#s1{background:url('../images/p2.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s1_0{background:url('../images/p2.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;}
.s1_1{background:url('../images/p2.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:20%;left:0;opacity: 0;}
.s1_2{background:url('../images/p2.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:20%;left:0;opacity: 0;}
#s1.ani .s1_0{
    -webkit-animation: 0.8s 0.5s Out linear both;
    animation: 0.8s 0.5s Out linear both;
}
#s1.ani .s1_1{
    -webkit-animation: 0.8s 1.4s s1_0 linear both;
    animation: 0.8s 1.4s s1_0 linear both;
}
#s1.ani .s1_2{
    -webkit-animation: 0.8s 1.4s s1_0 linear both;
    animation: 0.8s 1.4s s1_0 linear both;
}

#s2{background:url('../images/p3.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s2_0{background:url('../images/p3.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;top:0;left:0}
.s2_1{background:url('../images/p3.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;left:100%}
/*.s2_2{background:url('../images/p3.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;}*/
.s2_3{background:url('../images/p3.4.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;top:20%;left:0}

#s2.ani .s2_0{
    -webkit-animation:0.6s 0.3s Out linear both;
    animation:0.6s 0.3s Out linear both;
}
#s2.ani .s2_1{
    -webkit-animation:0.8s 1.1s s2_1 linear both;
    animation:0.8s 1.1s s2_1 linear both;
}
#s2.ani .s2_3{
    -webkit-animation:0.6s 2.1s s1_0 linear both;
    animation:0.6s 2.1s s1_0 linear both;
}


#s3{background:url('../images/p4.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s3_0{background:url('../images/p4.1.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:10.4%;position: absolute;top:0;left:-50%;opacity:1}
.s3_1{background:url('../images/p4.1.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:23.8%;position: absolute;bottom:0;left:50%;opacity:1}
.s3_2{background:url('../images/p4.2.1.png?1') no-repeat 0 0;background-size:100% 100%;width:100%;height:16.8%;position: absolute;top:21%;left:0;opacity:0}
.s3_3{background:url('../images/p4.2.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:23.8%;position: absolute;top:86%;left:0;opacity:0}
.s3_10{background:url('../images/p4.3.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 77.92%;height:48.8%;position: absolute;top:27.1%;left:11%;opacity:0}

.s3_4{position: fixed;top:0;left:0;width: 100%;height:100%;display:none;opacity: 1;z-index:91}
.s3_4_1{background:url('../images/p4.3.1.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
.s3_4_2{background:url('../images/p4.3.2.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
.s3_4_3{background:url('../images/p4.3.3.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
.s3_4_4{background:url('../images/p4.3.4.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
.s3_4_5{background:url('../images/p4.3.5.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
.s3_4_6{background:url('../images/p4.3.6.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
.s3_4_7{background:url('../images/p4.3.7.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
.s3_4_8{background:url('../images/p4.3.8.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
.s3_4_9{background:url('../images/p4.3.9.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}
#s3_4_click{display: inline-block;width: 20%;height:10%;top:60%;left:41%;opacity: 0;position: absolute}
.s3_hand2{background:url('../images/hand2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:-18%;left:-48%;opacity:0;
}

.s3_5{position: fixed;top:0;left:0;width: 100%;height:100%;opacity: 1;display: none;z-index:90}

.s3_5_1{width: 26%;height:16%;position: absolute;top:27%;left:10%;}
.s3_5_2{width: 26%;height:16%;position: absolute;top:27%;left:37%;}
.s3_5_3{width: 26%;height:16%;position: absolute;top:27%;left:64%;}
.s3_5_4{width: 26%;height:16%;position: absolute;top:43.2%;left:10%;}
.s3_5_5{width: 26%;height:16%;position: absolute;top:43.2%;left:37%;}
.s3_5_6{width: 26%;height:16%;position: absolute;top:43.2%;left:64%;}
.s3_5_7{width: 26%;height:16%;position: absolute;top:60%;left:10%;}
.s3_5_8{width: 26%;height:16%;position: absolute;top:60%;left:37%;}
.s3_5_9{width: 26%;height:16%;position: absolute;top:60%;left:64%;}

.span_1{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}
.span_2{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}
.span_3{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}
.span_4{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}
.span_5{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}
.span_6{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}
.span_7{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}
.span_8{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}
.span_9{font-size: 14px;display:inline-block;position: absolute;top:-40%;left:190px;opacity: 1;width: 200px}

.s3_6{background:url('../images/p5.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:1;display: none}

.s3_6_1{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:26.19%;left:23.91%;opacity: 1}
.s3_6_2{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:32.44%;left:23.91%;opacity: 1}
.s3_6_3{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:38.69%;left:23.91%;opacity: 1}
.s3_6_4{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:44.64%;left:23.91%;opacity: 1}
.s3_6_5{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:51.04%;left:23.91%;opacity: 1}
.s3_6_6{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:57.142%;left:23.91%;opacity: 1}
.s3_6_7{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:63.095%;left:23.91%;opacity: 1}
.s3_6_8{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:69.49%;left:23.91%;opacity: 1}
.s3_6_9{background-color:#d17272 ;width: 40%;height:1.488%;position: absolute;top:75.595%;left:23.91%;opacity: 1}

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

#s3.ani .s3_2{
    -webkit-animation: 0.8s 2.5s s3_3 linear both;
    animation: 0.8s 2.5s s3_3 linear both;
}
#s3.ani .s3_3{
    -webkit-animation: 0.8s 1.2s s3_2 linear both;
    animation: 0.8s 1.2s s3_2 linear both;
}
#s3.ani .s3_10{
    -webkit-animation: 0.8s 3.4s Out linear both;
    animation: 0.8s 3.4s Out linear both;
}
#s3.ani .s3_hand2{
    -webkit-animation:2.5s  4.6s shake linear infinite;
    animation:2.5s 4.6s shake linear infinite;
}

#s4{background:url('../images/p6.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s4_0{background:url('../images/p6.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.s4_hand2{background:url('../images/hand2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.s4_click{width: 82%;height:16%;top:48%;left:14%}
#s4.ani .s4_0{
-webkit-animation: 0.8s 0.3s Out linear both;
animation: 0.8s 0.3s Out linear both;
}
#s4.ani .s4_hand2{
    -webkit-animation: 2.5s 1.3s shake linear infinite;
    animation: 2.5s 1.3s shake linear infinite;
}
.arrow{position:absolute;width: 11%;height: 6%;opacity:0;background:url("../images/arrow.png?1") no-repeat 0 0;background-size:100% 100%;top:92%;left:45%;}
#s0.ani .arrow,#s1.ani .arrow{
    -webkit-animation:1s 2s arrow infinite;
    animation:1s 2s arrow infinite ;
}
#s2.ani .arrow{
    -webkit-animation:1s 3s arrow infinite;
    animation:1s 3s arrow infinite ;
}
#s3.ani .arrow{
    -webkit-animation:1s 0.5s arrow infinite;
    animation:1s 0.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}
}

@-webkit-keyframes s3_0 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(50%,0,0);opacity: 1}

}
@keyframes s3_0 {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(50%,0,0);opacity: 1}
}

@-webkit-keyframes s3_1 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(-50%,0,0);opacity: 1}
}
@keyframes s3_1 {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(-50%,0,0);opacity: 1}
}

@-webkit-keyframes s3_2 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,-40%,0);opacity: 1}
}
@keyframes s3_2 {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(0,-40%,0);opacity: 1}
}
@-webkit-keyframes s3_3 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,-58%,0);opacity: 1}
}
@keyframes s3_3 {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(0,-58%,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(0)}
    100% {transform: rotate(360deg);}
}



@keyframes Out{
    0%{opacity:0}
    100%{opacity:1}
}
@-webkit-keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}
@-webkit-keyframes s1_0 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) ;opacity: 0}
    100% { -webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0); opacity: 1}
}
@keyframes s1_0 {
    0% { transform:translate3d(0,0,0) ;opacity: 0}
    100% { transform:translate3d(0,-20%,0); opacity: 1 }
}

@-webkit-keyframes ship_click {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) ;opacity: 1}
    100% { -webkit-transform:translate3d(-5%,0,0);transform:translate3d(-5%,0,0); opacity: 1}
}
@keyframes ship_click {
    0% { transform:translate3d(0,0,0) ;opacity: 1}
    100% { transform:translate3d(-5%,0,0); opacity: 1 }
}


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

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




@-webkit-keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}


@keyframes shake{
    0%{opacity: 0}
    25%{opacity:1}
    50%{opacity: 0}
    75%{opacity:1}
    100%{opacity: 0}
}