*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute; font-family:"Heiti SC",sans-serif;overflow: hidden}
.loading{position:absolute;width:100%;height:100%;background:url("../images/loading.jpg") no-repeat 0 0;background-size:100% 100%;z-index: 99}
#loading_img{position: absolute;left:40%;top:44%;width: 20%;height:21%;}
.loading1{
    width: 100%;height:100%;position: absolute;background:url("../images/loading1.png") no-repeat 0 0;background-size:100% 100%;
}
.load_wave{
    position:absolute;top:47%;left:19%;width: 64%;height:5px;background-color: #8fae72;
}
.load_val{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #fff711;
}

a{opacity:1}
/*音乐*/
.music_blk{z-index:999;position:fixed;top:0;left:0;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;
}

#fuceng{
    background:url('../images/mask1.jpg') no-repeat 0 0;background-size:100% 100%;
}
.bg0{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p1.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg0 .w1{position: absolute;top:0;left:0;background:url('../images/p1.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w2{position: absolute;top:0;left:0;background:url('../images/p1.3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w3{position: absolute;top:0;left:0;background:url('../images/p1.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}

.bg0_click{
    position: absolute;
    top: 41%;
    left: 7%;
    width: 11%;
    height: 20%;
}

.bg0.ani .w1{
    animation:Out 0.5s 0s linear both;
    -webkit-animation:Out 1.5s 0s linear both;
}
.bg0.ani .w2{
    animation:Out 0.5s 0.6s linear both;
    -webkit-animation:Out 0.5s 0.6s linear both;
}
.bg0.ani .w3{
    animation:Out 0.5s 1.2s linear both;
    -webkit-animation:Out 0.5s 1.2s linear both;
}



.bg1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p3.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg1 .w1{position: absolute;top:0;left:0;background:url('../images/p3.5.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg1 .w2{position: absolute;top:0;left:10%;background:url('../images/p3.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg1 .w3{position: absolute;top:0;left:0;background:url('../images/p3.4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.hand_click{
    position: absolute;
    top: 76%;
    left: 50%;
    width: 10%;
    height: 10%;
}
.bg1_click1{
    position: absolute;
    top: 18%;
    left: 15%;
    width: 10%;
    height: 16%;
}
.bg1_click2{
    position: absolute;
    top: 42%;
    left: 15%;
    width: 10%;
    height: 16%;
}
.bg1_click3{
    position: absolute;
    top: 65%;
    left: 15%;
    width: 10%;
    height: 18%;
}
.bg1.ani .w1{
    animation:Out 0.5s 0s linear both;
    -webkit-animation:Out 1.5s 0s linear both;
}
.bg1.ani .w2{
    animation:Out 0.5s 0.6s linear both;
    -webkit-animation:Out 0.5s 0.6s linear both;
}
.bg1.ani .w3{
    animation:Out 0.5s 1.2s linear both;
    -webkit-animation:Out 0.5s 1.2s linear both;
}
.bg1.ani .w3{
    animation:shake 2s 1.7s linear infinite;
    -webkit-animation:shake 2s 1.7s linear infinite;
}
.bg1_detial{
    position: absolute;top:0;left:0;background:url('../images/p3-1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;
}
.bg1_hand{
    position: absolute;top:0;left:0;background:url('../images/p3-2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display:none
}
.bg1_shore{
    position: absolute;top:0;left:0;background:url('../images/p3-3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display:none
}

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

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

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

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