html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute; font-family: sans-serif;overflow: hidden}
.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") no-repeat 0 0;background-size:100% 100%;z-index: 99}
.load_val{width:20%;}
.load_anime{position:absolute;width:100%;height:100%;}
.loading_line{position:absolute;width:51.2%;height:0.6%;top:54%;left:25.8%;background:#9e9e9e}
.loading_line_blank{position:absolute;width:0%;height:100%;background-color:#cb1919;}
a{opacity:1}


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

/*.mask{width: 100%;height:100%;position: fixed;top:-100%;left:0;display: none;z-index: 1;background:url("../images/p1.10.png") no-repeat 0 0;background-size:100% 100%;}*/
/*.mask11{width: 100%;height:100%;background:url("../images/p1.11.png?2") no-repeat 0 0;background-size:100% 100%;}*/
/*!*#center_11{width: 100%;height: 100%;margin: 0 auto;opacity:1;position: absolute;top:0;left:0;overflow:hidden;background-color: #f8f8f8}*!*/
/*!*#center1{width: 100%;height:828.57%;margin: 0 auto;opacity:1;position: absolute;left:0;top:0;}*!*/
/*!*img{width: 90%;height:80%}*!*/




/*.bg0_1.ani .bg0_1_2{*/
    /*-webkit-animation: 0.1s 0.2s Out linear both;*/
    /*animation:0.1s 0.2s Out linear both;*/
/*}*/
/*.bg0_1.ani .bg0_1_3{*/
    /*-webkit-animation: 0.1s 0.5s Out linear both;*/
    /*animation:0.1s 0.5s Out linear both;*/
/*}*/


/*.bg0_hand{*/
    /*width:13%;height:18%;position: absolute;top:79%;left:76%;background:url("../images/hand.png?2") no-repeat 0 0;background-size:100% 100%;*/
/*}*/
/*.bg0_hand.ani{*/
    /*-webkit-animation: 2s 0.3s shake1 linear infinite;*/
    /*animation:2s 0.3s shake1 linear infinite;*/
/*}*/



.bg1{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p1.jpg") no-repeat 0 0;background-size:100% 100%;
}
.bg1_1{width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p1.1.png") no-repeat 0 0;background-size:100% 100%;opacity: 0}
.bg1.ani .bg1_1{
    -webkit-animation: 1s 0.3s Out linear both;
    animation:1s 0.3s Out linear both;
}
.bg1_click{
    width: 30%;
    height: 12%;
    position: absolute;
    top: 45%;
    left: 57%;
}
.bg1_hand{
    width: 15%;
    height: 8%;
    position: absolute;
    top: 54%;
    left: 69%;
    background:url("../images/hand.png") no-repeat 0 0;background-size:100% 100%;
    opacity: 0;
}
.bg1.ani .bg1_hand{
    -webkit-animation: 3s 1.6s shake1 linear infinite;
    animation:3s 1.6s shake1 linear infinite;
}

.bg2{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p2.jpg") no-repeat 0 0;background-size:100% 100%;
}
.bg2_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.bg2_1_click1{
    width: 62%;
    height: 7%;
    position: absolute;
    left: 19%;
    top: 48%;

 }
.bg2 em{
    position: absolute;
    left:105%;
    top:0;
    width: 18%;
    height:100%;
    background:url("../images/select.png") no-repeat 0 0;background-size:100% 100%;
}

.bg2_1_click2{
    width: 62%;
    height: 7%;
    position: absolute;
    left: 19%;
    top: 58%;

}
.bg2_1_click3{
    width: 62%;
    height: 7%;
    position: absolute;
    left: 19%;
    top: 68%;

}
.bg2_hand{
    width: 10%;
    height: 6%;
    position: absolute;
    top: 41%;
    left: 83%;
    opacity: 0;
    background:url("../images/hand.png") no-repeat 0 0;background-size:100% 100%;
}
.bg2.ani .bg2_hand{
    -webkit-animation: 3s 0.3s shake1 linear infinite;
    animation:3s 0.3s shake1 linear infinite;
}
.bg2_play{
    width: 22%;
    height: 6%;
    position: absolute;
    top: 38%;
    left: 69%;

}
.bg2_click{
    width: 23%;
    height: 12.5%;
    position: absolute;
    top: 81%;
    left: 39%;
    background:url("../images/tijiao.png") no-repeat 0 0;
    background-size:100% 100%;
}
.elect{
    display: none;
}

.bg3{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p3.jpg") no-repeat 0 0;background-size:100% 100%;
}
.bg3_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}

.bg3_1_click1{
    width: 86%;
    height: 8%;
    position: absolute;
    left: 6%;
    top: 22%;

}
.bg3 em{
    position: absolute;
    left: 95%;
    top: 16%;
    width: 13%;
    height: 74%;
    background:url("../images/select.png") no-repeat 0 0;background-size:100% 100%;
}

.bg3_1_click2{
    position: absolute;
    width: 86%;
    height: 8%;
    left: 6%;
    top: 34.5%;

}
/*.bg3 .bg3_1_click2 em{*/
    /*left: 93%;*/
    /*top: 15%;*/
    /*width: 15%;*/
    /*height: 77%;*/
/*}*/
.bg3_1_click3{
    width: 87%;
    height: 8%;
    position: absolute;
    left: 6%;
    top: 46%;

}

.bg3_click{
    width: 23%;
    height: 12.5%;
    position: absolute;
    top: 72%;
    left: 39%;
    background:url("../images/tijiao.png") no-repeat 0 0;
    background-size:100% 100%;
}



.bg4{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p4.jpg") no-repeat 0 0;background-size:100% 100%;
}
.bg4_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.bg4_1_click1{
    width: 76%;
    height: 7%;
    position: absolute;
    left: 12%;
    top: 54.5%;

}

.bg4 em{
    position: absolute;
    left:100%;
    top:0;
    width: 16%;
    height:92%;
    background:url("../images/select.png") no-repeat 0 0;background-size:100% 100%;
}

.bg4_1_click2{
    width: 62%;
    height: 7%;
    position: absolute;
    left: 19%;
    top: 63.5%;

}
.bg4_1_click3{
    width: 76%;
    height: 7%;
    position: absolute;
    left: 12%;
    top: 72%;

}
.bg4 .bg4_1_click2 em{
    left:105%;
    top:0;
    width: 18%;
    height:91%;
}
.bg4_click{
    width: 23%;
    height: 12.5%;
    position: absolute;
    top: 82%;
    left: 39%;
    background:url("../images/tijiao.png") no-repeat 0 0;
    background-size:100% 100%;
}

.bg5{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p5.jpg") no-repeat 0 0;background-size:100% 100%;
}
.bg5_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.bg5_1_click1{
    width: 62%;
    height: 7%;
    position: absolute;
    left: 19%;
    top: 29%;

}
.bg5 em{
    position: absolute;
    left:105%;
    top:0;
    width: 18%;
    height:100%;
    background:url("../images/select.png") no-repeat 0 0;background-size:100% 100%;
}

.bg5_1_click2{
    width: 62%;
    height: 7%;
    position: absolute;
    left: 19%;
    top: 41%;

}
.bg5_1_click3{
    width: 62%;
    height: 7%;
    position: absolute;
    left: 19%;
    top: 52%;

}

.bg5_click{
    width: 23%;
    height: 12.5%;
    position: absolute;
    top: 71%;
    left: 39%;
    background:url("../images/tijiao.png") no-repeat 0 0;
    background-size:100% 100%;
}

.bg6{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p6.jpg") no-repeat 0 0;background-size:100% 100%;
}
.bg6_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.bg6_1_click1{
    width: 33%;
    height: 24%;
    position: absolute;
    left: 10%;
    top: 27%;
}
.bg6 em{
    position: absolute;
    left:34%;
    top:73%;
    width: 36%;
    height:26%;
    background:url("../images/select.png") no-repeat 0 0;background-size:100% 100%;
}

.bg6_1_click2{
    width: 33%;
    height: 24%;
    position: absolute;
    left: 58%;
    top: 27%;

}
.bg6_1_click3{
    width: 33%;
    height: 24%;
    position: absolute;
    left: 34%;
    top: 53%;

}

.bg6_click{
    width: 23%;
    height: 12.5%;
    position: absolute;
    top: 81%;
    left: 39%;
    background:url("../images/tijiao.png") no-repeat 0 0;
    background-size:100% 100%;
}


.bg7{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.bg7_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;
}
.bg7_2{
    width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;
}
.bg7_click{
    width: 76%;
    height: 6.5%;
    position: absolute;
    top: 85%;
    left: 12%;
}
.bg7.ani .bg7_1{
    -webkit-animation: 1s 0.3s Out linear both;
    animation:1s 0.3s Out linear both;
}
.bg7.ani .bg7_2{
    -webkit-animation: 1s 1.5s Out linear both;
    animation:1s 1.5s Out linear both;
}
.bg8{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p10.jpg") no-repeat 0 0;background-size:100% 100%;
}
.bg8_1{
    width: 100%;height:100%;position: absolute;top:-6%;left:0;
}
.bg8_2{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/p10.1.png") no-repeat 0 0;background-size:100% 100%;
}
.bg8_add{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/add.png") no-repeat 0 0;background-size:100% 100%;
}
.bg8_hand{
    width: 10%;
    height: 6%;
    position: absolute;
    top: 77%;
    left: 70%;
    background:url("../images/hand.png") no-repeat 0 0;background-size:100% 100%;opacity: 0;
    -webkit-animation: 3s 1s shake1 linear infinite;
    animation:3s 1s shake1 linear infinite;
}
.bg8_click{
    width: 39%;
    height: 6.5%;
    position: absolute;
    top: 82.5%;
    left: 30%;
}
.bg8_add_click{
    width: 76%;
    height: 7%;
    position: absolute;
    top: 72%;
    left: 12%;
}
.shore{
    width: 100%;height:100%;position: absolute;top:0;left:0;background:url("../images/shore.png") no-repeat 0 0;background-size:100% 100%;display:none;z-index: 10;
}

.long_div{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    overflow-y:scroll ;
    display: none;
}

.long{
    width: 100%;height:157%;position: absolute;left: 0;top:0;background:url("../images/p15.jpg") no-repeat 0 0;background-size:100% 100%;
}
.back{
    width: 29%;
    height: 4%;
    position: absolute;
    left: 38%;
    top: 92%;
    background:url("../images/p15.1.png") no-repeat 0 0;background-size:100% 100%;
}
.btn1{
    opacity: 0;
    display: none;
    -webkit-animation: 0.6s 0.2s Out linear both;
    animation:0.6s 0.2s Out linear both;
}
/*.mask.ani{*/
    /*-webkit-animation:down1 0.6s .1s linear both;*/
    /*animation:down1 0.6s .1s linear both;*/
/*}*/
/*.dian{*/
    /*position: absolute;width: 15.45%;height:9.52%;top:4%;left:71%;background:url("../images/tip.png?2") no-repeat 0 0;background-size:100% 100%;*/
/*}*/
/*.tip{*/
    /*position: absolute;width: 100%;height:15%;top:0;left:0;*/
/*}*/

.mask.ani .dian{
    -webkit-animation:scale1 1.4s .8s linear infinite;
    animation:scale1 1.4s .8s linear infinite;
}

@-webkit-keyframes down1 /* Safari 和 Chrome */
{
    0%{opacity:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
    100%{opacity:1;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
}

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




@-webkit-keyframes s1_4
{
    0%{opacity: 1}
    49%{opacity: 1}
    50%{opacity: 0}
    59%{opacity: 0}
    60%{opacity: 1}
    100%{opacity: 1}
}

@keyframes s1_4
{
    0%{opacity: 1}
    49%{opacity: 1}
    50%{opacity: 0}
    59%{opacity: 0}
    60%{opacity: 1}
    100%{opacity: 1}
}


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

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




@-webkit-keyframes scale1 /* Safari 和 Chrome */
{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(0.7);transform:scale(0.7)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}

@keyframes scale1
{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(0.7);transform:scale(0.7)}
    100%{-webkit-transform:scale(1);transform:scale(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);}
}




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

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