*{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/p1.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;*/
/*}*/
.loading1{position:absolute;width:100%;height:100%;}
.img1{position:absolute;width:63.7%;height:28.17%;top:10%;left:-64%;
    -webkit-animation: 15s 0.3s img1 linear both;
    animation:15s 0.3s img1 linear both;
}
.loading11{
    position:absolute;top:58%;left:33%;width: 35.26%;height:4px;background-color: white;
}
.loading11_1{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #075481;
}

a{opacity:1}
/*loading*/

/*音乐*/
.music_blk{z-index:999;position:fixed;right:35px;top:10px;display: none}
.music{width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;position: absolute}
.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{width: 100%;height: 100%;background:url("../images/p1.jpg?1") no-repeat 0 0;background-size:100% 100%;position: absolute;top:0;left:0}
.s00_0{background:url('../images/p1.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;position: absolute;top:0;left:0}
.s00_1{background:url('../images/p1.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;position: absolute;top:0;left:0}
.s00_2{background:url('../images/p1.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;top:40%;position: absolute;left:0}

.s01{width: 100%;height: 100%;position: absolute;top:80%;left:0;opacity:0;}
/*.s01_0{background:url('../images/p2.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;position: absolute;top:0;left:0}*/
/*.s01_1{background:url('../images/p2.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;position: absolute;top:0;left:0}*/
/*.s01_2{background:url('../images/p2.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;top:0;position: absolute;left:0}*/
/*.s01_3{background:url('../images/p2.4.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;top:0;position: absolute;left:0}*/
/*.s01_4{background:url('../images/p2.5.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;top:0;position: absolute;left:0}*/
#canvas{
    width: 100%;height:100%;position: absolute;;left:0;top:0;opacity: 1;
}
.s00_hand{
    width: 10%;height:6%;position: absolute;left:66%;top:48%;background:url('../images/hand.png?1') no-repeat 0 0;background-size:100% 100%;opacity: 0;
}
.s00_click{
    width: 70%;height:8%;position: absolute;left:16%;top:42%;
}
#s00.ani .s00_hand{
    -webkit-animation:2.2s 3s shake linear infinite;
    animation:2.2s 3s shake linear infinite;
}
#s00.ani .s00_0{
    -webkit-animation: 0.5s 0.3s Out linear both;
    animation:0.5s 0.3s Out linear both;
}

#s00.ani .s00_1{
    -webkit-animation: 0.5s 1.2s Out linear both;
    animation:0.5s 1.2s Out linear both;
}

#s00.ani .s01{
    -webkit-animation: 1s 2s s00_2 linear both;
    animation:1s 2s s00_2 linear both;
}

#s00.ani .s01.ani{
    top:40%;
    -webkit-animation: 1s 0.2s s01_2 linear both;
    animation:1s 0.2s s01_2 linear both;
}

#s00.ani .s01.ani1{
    top:0;
    -webkit-animation: 1s 0.2s s01 linear both;
    animation:1s 0.2s s01 linear both;
}

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


#s00.out{
    -webkit-animation: 0.5s 0.1s Out111 linear both;
    animation:0.5s 0.1s Out111 linear both;
}
#ss.ani{
    -webkit-animation: 0.5s 0.4s Out linear both;
    animation:0.5s 0.4s Out linear both;
}



.bg0 .bg_click{
    width:11% ;height:0.8%;position: absolute;
}
.bg0_span{
    width:100% ;height:100%;position: absolute;left:0;
}
.bg0_span span{text-align: center;display: inline-block;position: absolute;left:33%;width:65% }
.bg0_span div{
    width:32.608% ;height:0.8409%;position: absolute;top:3.63%;left:0;
}
.bg0 .span0{
    top:3.7%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span1{
    top:8.6%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}

.bg0 .span2{
    top:13.5%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span3{
    top:18.4%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}

.bg0 .span4{
    top:23.2%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span5{
    top:28.2%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span6{
    top:33.2%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span7{
    top:37.8%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span8{
    top:42.4%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span9{
    top:47.3%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span10{
    top:52.1%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span11{
    top:57%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}


.bg0 .span12{
    top:61.8%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span13{
    top:66.6%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span14{
    top:71.5%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span15{
    top:76.4%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span16{
    top:81.2%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}
.bg0 .span17{
    top:86%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}.bg0 .span18{
     top:90.8%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
 }
.bg0 .span19{
    top:95.7%;left:9.7%;background:url('../images/p7.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 22%;height:0.8409%;position: absolute;
}


.bg0 .a0{top:4.63%;left:76.5%;}
.bg0 .a1{top:9.43%;left:83.5%;}
.bg0 .a2{top:13.7%;left:59.5%;}
.bg0 .a3{top:18.5%;left:77.5%;}
.bg0 .a4{top:24%;left:69.5%;}
.bg0 .a5{top:28.7%;left:72.5%;}
.bg0 .a6{top:33.2%;left:56.5%;}
.bg0 .a7{top:38.5%;left:43.5%;}
.bg0 .a8{top:42.5%;left:73.5%;}
.bg0 .a9{top:48%;left:59.5%;}
.bg0 .a10{top:53%;left:73.5%;}
.bg0 .a11{top:57.8%;left:53.5%;}

.bg0 .a12{top:62%;left:76.5%;}
.bg0 .a13{top:67%;left:58.5%;}
.bg0 .a14{top:72.4%;left:80.5%;}
.bg0 .a15{top:77.2%;left:72.4%;}
.bg0 .a16{top:81.4%;left:83.5%;}
.bg0 .a17{top:86.4%;left:76.5%;}
.bg0 .a18{top:91.6%;left:63.5%;}
.bg0 .a19{top:96%;left:80.5%;}


#s01.ani .s01_0{
    -webkit-animation: 1s 2s s0_2 linear both;
    animation:1s 2s s0_2 linear both;
}

#ss{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0}
#s0{width: 100%;height: 100%;background:url("../images/p3.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.s0_0{background:url('../images/p3.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}


#s0.ani .s0_0{
    -webkit-animation: 0.7s 0.3s Out linear both;
    animation:0.7s 0.3s Out linear both;
}

#s1{background:url('../images/p4.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s1_0{background:url('../images/p4.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;}

#s1.ani .s1_0{
    -webkit-animation: 0.7s 0.3s Out linear both;
    animation:0.7s 0.3s Out linear both;
}


#s2{background:url('../images/p5.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s2_0{background:url('../images/p5.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;top:0;left:0}
.s2_1{background:url('../images/p5.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 1;top:0;left:0}
.s2_click{width: 76%;height:6%;opacity: 1;top:82%;left:10%;}

/*#s2.ani .s2_1{*/
    /*-webkit-animation: 0.6s 1s bounceIn cubic-bezier(0.215,0.610,0.355,1.000)  both;*/
    /*animation: 0.6s 1s bounceIn cubic-bezier(0.215,0.610,0.355,1.000)  both;*/
/*}*/

/*#s2.ani .s2_2{*/
    /*-webkit-animation: 0.5s 0.3s s0_1 linear both;*/
    /*animation:0.5s 0.3s s0_1 linear both;*/
/*}*/

#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 2s Out linear both;
    animation:1s 2s Out linear both;
}


#s3{background:url('../images/p6.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.s3_0{background:url('../images/p6.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:0}
.s3_1{background:url('../images/p6.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:0}
.s3_2{background:url('../images/p6.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity:0}
.s3_click{width: 76%;height:8%;opacity: 1;top:84%;left:10%;}
#s3.ani .s3_1{
    -webkit-animation: 0.6s 1s Out linear both;
    animation: 0.6s 1s Out linear both;
}
#s3.ani .s3_0{
    -webkit-animation: 0.5s 0.3s Out linear both;
    animation:0.5s 0.3s Out linear both;
}
#s3.ani .s3_2{
    -webkit-animation: 2.2s 2.5s shake linear infinite;
    animation:2.2s 2.5s shake linear infinite;
}


.bg{position: fixed;top:0;left:0;background:url('../images/p7.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;z-index:10;overflow-y: scroll;
}
.bg0{
    top:0;left:0;background:url('../images/p7.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:578.075%;position: absolute;
}
.bg1{
    bottom:0;left:0;background:url('../images/p7.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:19.57%;position: fixed;
}



.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{*/
    /*-webkit-animation:1s 2.2s arrow1 linear infinite;*/
    /*animation:1s 2.2s arrow1 linear infinite ;*/
/*}*/

#s0.ani .arrow,#s1.ani .arrow,#s2.ani .arrow,#s3.ani .arrow,#s4.ani .arrow,#s5.ani .arrow{
    -webkit-animation:1s 2.2s arrow infinite;
    animation:1s 2.2s arrow infinite ;
}


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

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

/*@-webkit-keyframes arrow1 {*/
    /*0% {-webkit-transform:translate3d(0,0,0);opacity: 1}*/
    /*100% {-webkit-transform:translate3d(0,-30%,0);opacity: 1}*/
/*}*/

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

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


@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 img1 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) ;}
    100% { -webkit-transform:translate3d(0,0,0);transform:translate3d(260%,0,0); }
}

@keyframes img1 {
    0% { transform:translate3d(0,0,0) ;}
    100% { transform:translate3d(260%,0,0)  }
}


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

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

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

@-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 s01 {
    0% {-webkit-transform-origin:center center;-webkit-transform:scale(1) translate3d(5%,0,0); opacity: 1}
    100% {-webkit-transform-origin:center center;-webkit-transform:scale(1.3) translate3d(5%,0,0);opacity: 1}

}

@keyframes s01{
    0% {transform-origin:center center;transform:scale(1) translate3d(5%,0,0);opacity: 1}
    100% {-webkit-transform-origin:center center;-webkit-transform:scale(1.3) translate3d(5%,0,0) ; opacity: 1}
}

@-webkit-keyframes s00_click {
    0% {-webkit-transform-origin:center center;-webkit-transform:rotate(0deg); opacity: 1}
    45% {-webkit-transform-origin:center center;-webkit-transform:rotate(0deg); opacity: 1}
    50% {-webkit-transform-origin:center center;-webkit-transform:rotate(-10deg);opacity: 1}
    60% {-webkit-transform-origin:center center;-webkit-transform:rotate(10deg);opacity: 1}
    65% {-webkit-transform-origin:center center;-webkit-transform:rotate(0deg);opacity: 1}
    100% {-webkit-transform-origin:center center;-webkit-transform:rotate(0deg); opacity: 1}
}

@keyframes s00_click {
    0% {transform-origin:center center;transform:rotate(0deg); opacity: 1}
    45% {transform-origin:center center;transform:rotate(0deg); opacity: 1}
    50% {transform-origin:center center;transform:rotate(-10deg);opacity: 1}
    60% {transform-origin:center center;transform:rotate(10deg);opacity: 1}
    65% {transform-origin:center center;transform:rotate(0deg);opacity: 1}
    100% {transform-origin:center center;transform:rotate(0deg); opacity: 1}
}

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

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



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

@-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}
}
@-webkit-keyframes  bounceIn{

    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes bounceIn{

    0%{transform:scale3d(.3,.3,.3);opacity:0;}
    20%{transform:scale3d(1.1,1.1,1.1);}
    40%{transform:scale3d(.9,.9,.9);}
    60%{transform:scale3d(1.03,1.03,1.03);opacity:1}
    80%{transform:scale3d(.97,.97,.97)}
    100%{transform:scale3d(1,1,1);opacity:1;}
}