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/loading.jpg');background-size:100% 100%;z-index: 99}
.load_val{width:100%;}
.loading_line{position:absolute;width:33.97%;height:2px;top:53.07%;left:32.68%;background:#000000}
.loading_line_blank{width:0%;height:100%;background:#a7a6a6  ;}
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/p-0.jpg") no-repeat 0 0;background-size:100% 100%;
 }
.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%;}
.tap1{position: absolute;top:0;left:0;background:url('../images/p1.1.png') no-repeat 0 0;background-size:100% 100%;;width: 100%;height:100%;display: none}
.tap2{position: absolute;top:49%;left:64%;background-color:blue;width: 34%;height:28%;opacity: 0}
.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;}
.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{position: absolute;top:20%;left:0;background:url('../images/p1.1.png') no-repeat 0 0;background-size:100% 100%;;width: 100%;height:100%;}*/
.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;
}

.bg{position: absolute;top:0;left:0;background:url('../images/p1.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 }
.p1{background:url('../images/book2.jpg') no-repeat 0 0;background-size:100% 100%;}
.p2{background:url('../images/p1.3.jpg') no-repeat 0 0;background-size:100% 100%;}
.p3{background:url('../images/p1.4.jpg') no-repeat 0 0;background-size:100% 100%;}
.p4{background:url('../images/p2.1.jpg') no-repeat 0 0;background-size:100% 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}
}