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/loading1.jpg');background-size:100% 100%;z-index: 99999999}
.load_val{width:100%;}
.loading_line{position:absolute;width:33.97%;height:4px;top:53.07%;left:32.68%;background:#ccbc9e}
.loading_line_blank{width:0%;height:100%;background:#de3333 ;}
a{opacity:1}
/*loading*/

/*音乐*/
.music_blk{z-index:999;position:fixed;right:10px;top:10px;}
.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;
}

/*.previousPage,.nextPage,.return{*/
    /*position: fixed;height:10%;width: 15%;z-index: 999999;*/
/*}*/
/*.previousPage{top:90%;left:25%;background:url('images/left1.png?1');background-size:100% 100%;display: none}*/
/*.return{top:90%;left:45%;background:url('images/return1.png?1');background-size:100% 100%; }*/
/*.nextPage{top:90%;left:66%;background:url('images/right1.png?1');background-size:100% 100%;}*/

/*#center0{width: 20%;height: 40%;opacity:1;position: fixed;top:50%;left:30%;*/
    /*!*background:url("../images/0003.jpg") no-repeat 0 0;background-size:100% 100%;*!*/
    /*}*/
#center0{width: 100%;height: 100%;opacity:1;position: fixed;top:0;left:0;
    background:url("../images/p0.jpg") no-repeat 0 0;background-size:100% 100%;display: none
 }
.book{
    position: absolute;top:27%;left:0;background:url('../images/book2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:84.5%;opacity: 1;
    transform:scale(0.3);-webkit-transform:scale(0.3),-webkit-transition:all 1s linear;transition:all 1s
}
.light{position: absolute;top:0;left:0;background:url('../images/light.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity:0;-webkit-transition:opacity 0.5s ;transition:opacity 0.5s;}
.light_tap{position: absolute;top:47%;left:13%;background:url('../images/tap.png') no-repeat 0 0;background-size:100% 100%;;width: 14.4%;height:10%;}
.tap2{position: absolute;top:29%;left:12%;width: 34%;height:28%;opacity: 0}
.text{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;
    background:url("../images/p0.3.png?1") no-repeat 0 0;background-size:100% 100%;
}
.prompt{
    width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;
    background:url("../images/p1.2.png") no-repeat 0 0;background-size:100% 100%;display:none;
    -webkit-animation:Out 1s linear infinite;
    animation:Out 1s linear infinite;
}
/*.word{position: absolute;top:0;left:0;background:url('../images/p0.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0}
.book1{position: absolute;top:0;left:0;background:url('../images/book1.png') no-repeat 0 0;background-size:100% 100%;;width: 100%;height:100%;}
.tap{position: absolute;top:66%;left:76%;background:url('../images/tap.png') no-repeat 0 0;background-size:100% 100%;;width: 14.5%;height:12.9%;}
*/

/*.book2{position: absolute;top:65.079%;left:39.13%;background:url('../images/book2.jpg') no-repeat 0 0;background-size:100% 100%;
    width: 21.739%;height:18.254%;-webkit-transition:all 0.8s 0.5s linear;transition:all 0.8s 0.5s linear;transform:scale(1);-webkit-transform:scale(1);display: none }
*/

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

.book.ani{width:100%;height: 85.515%;top:0;left:0;transform:scale(1);-webkit-transform:scale(1);z-index:10;

}

.light_tap.ani{
    -webkit-animation:Out 1s linear infinite;
    animation:Out 1s linear infinite;
}


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

.bg{position: absolute;top:0;left:0;background:url('../images/p0.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.div111{position: absolute;top:10%;left:10%;background-color: red;width: 100px;height:100px;display: none}
.div2{
    position: fixed;top:10%;left:10%;width: 100px;height:100px;background-color: blue;
}
.hand{position: absolute;top:63%;right:0;background:url('../images/hand.png') no-repeat 0 0;background-size:100% 100%;width: 11.6%;height:10%;display: block }


.tap111{
    position: fixed;
    bottom: 3%;
    left: 11%;
    width: 78%;
    height: 9.5%;;background-color:red;
    background:url('../images/p2.3.png') no-repeat 0 0;background-size:100% 100%;
}

.p1{background:url('../images/book2.png') no-repeat 0 0;background-size:100% 100%;}
.p2{background:url('../images/p1.1.png?1') no-repeat 0 0;background-size:100% 100%;}
.p3{background:url('../images/img/p2.1_1.png') no-repeat 0 0;background-size:100% 100%;}


.p3 div,.p4 div,.p5 div,.p6 div{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}

.p3_1_1{
    background:url('../images/img/p2_1.png') no-repeat 0 0;background-size:100% 100%;
}
.p3_1_2{
    background:url('../images/img/p2_2.png') no-repeat 0 0;background-size:100% 100%;
}
.p3_1_3{
    background:url('../images/img/p2_3.png') no-repeat 0 0;background-size:100% 100%;
}


.p3_2,.p3_1{
    display: none;
}
.p3_2_1{
    background:url('../images/img/p2_1_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}
.p3_2_2{
    background:url('../images/img/p2_2_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}
.p3_2_3{
    background:url('../images/img/p2_3_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}


.p4{background:url('../images/img/p2.1_2.png') no-repeat 0 0;background-size:100% 100%;}

.p4_1_1{
    background:url('../images/img/p2_4.png') no-repeat 0 0;background-size:100% 100%;
}
.p4_1_2{
    background:url('../images/img/p2_5.png') no-repeat 0 0;background-size:100% 100%;
}
.p4_1_3{
    background:url('../images/img/p2_6.png') no-repeat 0 0;background-size:100% 100%;
}


.p4_2,.p4_1{
    display: none;
}
.p4_2_1{
    background:url('../images/img/p2_4_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}
.p4_2_2{
    background:url('../images/img/p2_5_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}
.p4_2_3{
    background:url('../images/img/p2_6_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}



.p5{background:url('../images/img/p2.1_3.png') no-repeat 0 0;background-size:100% 100%;}

.p5_1_1{
    background:url('../images/img/p2_7.png') no-repeat 0 0;background-size:100% 100%;
}
.p5_1_2{
    background:url('../images/img/p2_8.png') no-repeat 0 0;background-size:100% 100%;
}
.p5_1_3{
    background:url('../images/img/p2_9.png') no-repeat 0 0;background-size:100% 100%;
}


.p5_2,.p5_1{
    display: none;
}
.p5_2_1{
    background:url('../images/img/p2_7_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}
.p5_2_2{
    background:url('../images/img/p2_8_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}
.p5_2_3{
    background:url('../images/img/p2_9_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}



.p6{background:url('../images/img/p2.1_4.png') no-repeat 0 0;background-size:100% 100%;}


.p6_1_1{
    background:url('../images/img/p2_10.png') no-repeat 0 0;background-size:100% 100%;
}
.p6_1_2{
    background:url('../images/img/p2_11.png') no-repeat 0 0;background-size:100% 100%;
}
.p6_1_3{
    background:url('../images/img/p2_12.png') no-repeat 0 0;background-size:100% 100%;
}


.p6_2,.p6_1{
    display: none;
}
.p6_2_1{
    background:url('../images/img/p2_10_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}
.p6_2_2{
    background:url('../images/img/p2_11_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}
.p6_2_3{
    background:url('../images/img/p2_12_1.png') no-repeat 0 0;background-size:100% 100%;display: none;
}


.motto{
    position: absolute;top:0;left:0;width: 100%;height:100%;
}
.motto_1{
    position: absolute;top:0;left:0;background:url('../images/p3.jpg?3') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display:none;
}
.motto_1_bg{
    position: absolute;top:0;left:0;width: 100%;height:100%;
}


.motto_1_click{
    position: absolute;left:33%;bottom:8%;background:url('../images/p3.2.png') no-repeat 0 0;background-size:100% 100%;width: 33%;height:6.6%;
}

.motto_2{
    position: absolute;top:0;left:0;width: 100%;height:100%;overflow: scroll;display:none;
}
.motto_2_bg{
    position: absolute;top:0;left:0;background:url('../images/p4.jpg?3') no-repeat 0 0;background-size:100% 100%;width: 100%;height:127%;
}
.motto_2_click{
    position: absolute;left:33%;bottom:2%;width: 33%;height:6.6%;opacity: 0
}

.motto_3{
    position: absolute;top:0;left:0;width: 100%;height:100%;display: none
}
.img{
    position: absolute;top:0;left:0;width: 100%;height:100%;
}


/*#p5_0,#p6_0,#p7_0{width: 100%;height:100%;position: relative;top:0;left:0}
.p5_0_1{position: absolute;top:0;left:0;background:url('../images/p3.1.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;  }
.p5_0_2{position: absolute;top:0;left:0;background:url('../images/p3.2.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%; display: none }

.p6_0_1{position: absolute;top:0;left:0;background:url('../images/p4.1.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;  }
.p6_0_2{position: absolute;top:0;left:0;background:url('../images/p4.2.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%; display: none }
.p6_0_3{position: absolute;top:0;left:0;background:url('../images/p4.3.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%; display: none }
.p6_0_4{position: absolute;top:0;left:0;background:url('../images/p4.4.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%; display: none }
.p6_0_5{position: absolute;top:0;left:0;background:url('../images/p4.5.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%; display: none }

.p7_0_1{position: absolute;top:0;left:0;background:url('../images/p5.1.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%; }
.p7_0_2{position: absolute;top:0;left:0;background:url('../images/p5.2.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%; display: none }
.p8{background:url('../images/p6.jpg') no-repeat 0 0;background-size:100% 100%;}*/

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

@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 arrow1 {
    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 arrow1 {
    0% { transform:translate3d(0,0,0) ;opacity: 1 }
    100% { transform:translate3d(-5%,0,0);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}
}