body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;background-color: #000}
.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?1');background-size:100% 100%;z-index: 99}
.load_val{width:100%;}
.loading_line{position:absolute;width:43.9%;height:3px;top:39.1%;left:29.2%;background:#133275;}
.loading_line_blank{width:0%;height:100%;background:#477eff;}
a{opacity:1}
a:active{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
/*loading*/

/*音乐*/
/*.music_blk{z-index:999;position:fixed;top:10px;right:10px;}*/
/*.music{display:block;width:30px;height:30px;background:url('../images/music2.png') no-repeat;background-size:100% 100%;}*/
/*.music_on{*/
    /*-webkit-animation:rotate 1.2s linear infinite;*/
    /*animation:rotate 1.2s linear infinite;*/
/*}*/

.bg,.bg *{opacity:1}
.layer{width:100%;height:100%;opacity:1}
.layer div{border-radius:100%}
.arrow1{width: 7.36%;height:27.3%;position: absolute;top:52%;left:41.9%;background:url('../images/arrow1.png?1');background-size:100% 100%;}
.arrow2{width: 7.36%;height:33.1%;position: absolute;top:52%;left:41.9%;background:url('../images/arrow2.png?1');background-size:100% 100%;display:none;}
.arrow2.ani{
        animation:4s ani_arrow2 both ;
        -webkit-animation:4s  ani_arrow2 both ;
        -o-animation:4s ani_arrow2 both ;
        -moz-animation:4s ani_arrow2 both ;
}

#s0{width: 100%;height: 100%;position: absolute;overflow:hidden;}
#s0 .w0{width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/bg.0.png?1');background-size:100% 100%;}
#s0 .w00{width: 100%;height:100%;position: absolute;top:0;left:0;background:url('../images/click1.png?1');background-size:100% 100%;opacity: 1  }
#s0.ani .w0{
    animation:2s 0.5s fadeIn both ;
    -webkit-animation:2s 0.5s fadeIn both;
    -o-animation:2s 0.5s fadeIn both;
    -moz-animation:2s 0.5s fadeIn both;
}
#s0.ani .w00{
    animation:2s 0.5s fadeIn1 both infinite;
    -webkit-animation:2s 0.5s fadeIn1 both infinite;
    -o-animation:2s 0.5s fadeIn1 both infinite;
    -moz-animation:2s 0.5s fadeIn1 both infinite;
}

#s0 .s0_1{width: 70.8%;height: 26.7%;position: absolute;top:60.8%;left:2%;background:url('../images/ship1.png?1');background-size:100% 100%;}
#s0 .s0_2{width: 79%;height: 20.6%;position: absolute;top:45.8%;left:47.3%;background:url('../images/ship2.png?1');background-size:100% 100%;}
#s0.ani .s0_1{
    animation:4s 0.1s ani_s0_1 linear both ;
    -webkit-animation:4s 0.1s ani_s0_1 linear  both;
    -o-animation:4s 0.1s ani_s0_1 linear both;
    -moz-animation:4s 0.1s ani_s0_1 linear  both;
}
#s0.ani .s0_2{
    animation:4s 0.1s ani_s0_2 linear both ;
    -webkit-animation:4s 0.1s ani_s0_2 linear  both;
    -o-animation:4s 0.1s ani_s0_2 linear both;
    -moz-animation:4s 0.1s ani_s0_2 linear  both;
}

#s0 .w1{width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0}
 .w11{width: 35%;height:7%;position: absolute;top:6%;left:9%;background-color: blue;opacity: 0;}
 .w22{width: 35%;height:7%;position: absolute;top:6%;left:55%;background-color:  blue;opacity: 0;}
#s0 .w33{width: 48%;height:9%;position: absolute;top:36%;left:28%;opacity: 0;}

.mask1{width: 100%;height: 100%;margin: 0 auto;background:url('../images/p1.jpg?1');background-size:100% 100%;display: none;z-index:10;position: fixed;top:0;left:0}
.bc{width: 100%;height: 100%;background:url('../images/bc.png?1');background-size:100% 100%;position:absolute;top:0;left:0}
.bc.ani{
    animation:2s 0.1s fadeIn2 both infinite;
    -webkit-animation:2s 0.1s fadeIn2 both infinite;
    -o-animation:2s 0.1s fadeIn2 both infinite;
    -moz-animation:2s 0.1s fadeIn2 both infinite;
}
.mask1 img{width: 100%;height:69%;position: absolute;left:0;top:13.39%;}
.mask1 .down{width: 30%;height:7%;position: absolute;top:92%;left:65%;opacity: 0;}
.bg1{width: 100%;height: 100%;margin: 0 auto;background:url('../images/bg1.jpg?1');background-size:100% 100%;;position: absolute;top:0;left:0}

#canvas1{width: 100%;height:100%;position: absolute;;background-color: #000;overflow:hidden;}
/*#c1{position: absolute;left:0;bottom:0;}*/



@keyframes ani_arrow2{
    0%{}
    100%{-webkit-transform:translate3d(0,-500%,0);transform:translate3d(0,-500%,0);opacity:0.5;}
}
@-webkit-keyframes ani_arrow2{
    0%{}
    100%{-webkit-transform:translate3d(0,-500%,0);transform:translate3d(0,-500%,0);opacity:0.5;}
}
@-o-keyframes ani_arrow2{
    0%{}
    100%{-webkit-transform:translate3d(0,-500%,0);transform:translate3d(0,-500%,0);opacity:0.5;}
}
@-moz-keyframes ani_arrow2{
    0%{}
    100%{-webkit-transform:translate3d(0,-500%,0);transform:translate3d(0,-500%,0);opacity:0.5;}
}



@keyframes ani_s0_1{
    0%{-webkit-transform:translate3d(-14%,20%,0);transform:translate3d(-14%,20%,0)}
    100%{}
}
@-webkit-keyframes ani_s0_1{
    0%{-webkit-transform:translate3d(-14%,20%,0);transform:translate3d(-14%,20%,0)}
    100%{}
}
@-o-keyframes ani_s0_1{
    0%{-webkit-transform:translate3d(-20%,25%,0);transform:translate3d(-20%,25%,0)}
    100%{}
}
@-moz-keyframes ani_s0_1{
    0%{-webkit-transform:translate3d(-20%,25%,0);transform:translate3d(-20%,25%,0)}
    100%{}
}


@keyframes ani_s0_2{
    0%{-webkit-transform:translate3d(6%,-8%,0);transform:translate3d(6%,-8%,0)}
    100%{}
}
@-webkit-keyframes ani_s0_2{
    0%{-webkit-transform:translate3d(6%,-8%,0);transform:translate3d(6%,-8%,0)}
    100%{}
}
@-o-keyframes ani_s0_2{
    0%{-webkit-transform:translate3d(15%,-20%,0);transform:translate3d(15%,-20%,0)}
    100%{}
}
@-moz-keyframes ani_s0_2{
    0%{-webkit-transform:translate3d(15%,-20%,0);transform:translate3d(15%,-20%,0)}
    100%{}
}






@keyframes fadeIn{

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

}
@-moz-keyframes fadeIn{
    0%{opacity: 0}
    100%{opacity:1}
}

@keyframes fadeIn1{
    0%{opacity:1}
    50%{opacity:0.7}
    100%{opacity:1}
}
@-webkit-keyframes fadeIn1{
    0%{opacity:1}
    50%{opacity:0.7}
    100%{opacity:1}
}
@-o-keyframes fadeIn1{
    0%{opacity:1}
    50%{opacity:0.7}
    100%{opacity:1}

}
@-moz-keyframes fadeIn1{
    0%{opacity:1}
    50%{opacity:0.7}
    100%{opacity:1}
}


@keyframes fadeIn2{
    0%{opacity:1}
    50%{opacity:0.5}
    100%{opacity:1}
}
@-webkit-keyframes fadeIn2{
    0%{opacity:1}
    50%{opacity:0.5}
    100%{opacity:1}
}
@-o-keyframes fadeIn2{
    0%{opacity:1}
    50%{opacity:0.5}
    100%{opacity:1}

}
@-moz-keyframes fadeIn2{
    0%{opacity:1}
    50%{opacity:0.5}
    100%{opacity:1}
}