*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;overflow:hidden}
html, body {
    -ms-touch-action: none;
    background: #000000;
    padding: 0;
    border: 0;
    margin: 0;
    height: 100%;
}
.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;left:0;top:0;width:100%;height:100%;background:url('../images/loading.jpg') no-repeat;background-size:100% 100%;overflow:hidden;z-index: 99}
/*.loading1{position:absolute;width:120px;height:120px;background:url('../images/img1/loading1.png');background-size:100% 100%;top:25%;left:25%;*/
    /*-webkit-animation:rotate 1.2s linear infinite;*/
    /*animation:rotate 1.2s linear infinite;*/
/*}*/
#loading_img1{
    width: 100%;;height:8.48%;position: absolute;;top:44%;left: 0;
}
/*.loading11{
    position:absolute;top:46%;left:24.43%;width: 53%;height:4px;background-color: #2d3491;
}
.loading11_1{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #48ae73;
}*/

a{opacity:1}
/*loading*/


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

.bg00{position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/p0.jpg') no-repeat;background-size:100% 100%;}

.bg00_left{
    position:absolute;width:41.42%;height:31.17%;top:50%;left:-42%;
    background:url('../images/p0.1.png') no-repeat;background-size:100% 100%;
}
.bg00_right{
    position:absolute;width:17.63%;height:7.5%;top:76%;left:100%;
    background:url('../images/p0.2.png') no-repeat;background-size:100% 100%;
}
.bg00_text{
    position:absolute;width:100%;height:100%;top:0;left:0;
    background:url('../images/p0.3.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg00_mask{
    position:absolute;width:100%;height:100%;top:0;left:0;
    background:url('../images/p0.png') no-repeat;background-size:100% 100%;
}

.bg00.ani .bg00_mask{
    -webkit-animation:0.5s 0s Out1 linear both;
    animation:0.5s 0s Out1 linear both;
}

.bg00.ani .bg00_left{
    -webkit-animation:1.5s 1s bg00_left linear both;
    animation:1.5s 1s bg00_left linear both;
}
.bg00.ani .bg00_right{
    -webkit-animation:1.5s 1s bg00_right linear both;
    animation:1.5s 1s bg00_right linear both;
}
.bg00.ani .bg00_text{
    -webkit-animation:1.5s 1s Out linear both;
    animation:1.5s 1s Out linear both;
}





.bg0{position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/p1.jpg') no-repeat;background-size:100% 100%;}
#canvas{width: 100%;height:100%;position: absolute;top:0;left:0;}


.ship_1{
    position:absolute;width:62.8%;height:10.64%;top:60%;left:-68%;background:url('../images/p1.1.png') no-repeat;background-size:100% 100%;
}

.ship_2{
    position:absolute;width:45.77%;height:7.96%;top:47%;left:100%;background:url('../images/p1.2.png') no-repeat;background-size:100% 100%;
}
.ship_3{
    position:absolute;width:33.93%;height:5.8%;top:25%;left:-35%;background:url('../images/p1.3.png') no-repeat;background-size:100% 100%;
}
.bigShip{
    position:absolute;width:100%;height:100%;top:-30%;left:0;background:url('../images/p1.5.png') no-repeat;background-size:100% 100%;
}
.base{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/p1.4.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.light{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/p1.6.png') no-repeat;background-size:100% 100%;opacity: 0;
}

.small_ship{
    position:absolute;width:100%;height:12.66%;top:28%;left:0;background:url('../images/p1.8.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg0_click{
    position:absolute;width:100%;height:100%;top:17%;left:0;background:url('../images/p1.9.png') no-repeat;background-size:100% 100%;
}
.bg0_text{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/p1.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg0_click1{
    position:absolute;width:67%;height:10%;top:84%;left:16%;
}

.bg0.ani .ship_1{
    -webkit-animation:0.6s 0s ship_1 linear both;
    animation:0.6s 0s ship_1 linear both;
}
.bg0.ani .ship_2{
    -webkit-animation:0.6s 0.7s ship_2 linear both;
    animation:0.6s 0.7s ship_2 linear both;
}
.bg0.ani .ship_3{
    -webkit-animation:0.6s 1.4s ship_3 linear both;
    animation:0.6s 1.4s ship_3 linear both;
}
.bg0.ani .bigShip{
    -webkit-animation:3s 2.5s bigShip linear both;
    animation:3s 2.5s bigShip linear both;
}
.bg0.ani .light{
    -webkit-animation:0.4s 6s Out linear both;
    animation:0.4s 6s Out linear both;
}
.bg0.ani .base{
    -webkit-animation:0.3s 6.1s Out linear both;
    animation:0.3s 6.1s Out linear both;
}
.bg0.ani .small_ship{
    -webkit-animation:2s 7s small_ship linear both;
    animation:2s 7s small_ship linear both;
}

.bg0.ani .bg0_text{
    -webkit-animation:0.6s 10.5s bounceIn linear both;
    animation:0.6s 10.5s bounceIn linear both;
}
.bg0.ani .bg0_click{
    -webkit-animation:0.4s 11.5s bg0_click linear both;
    animation:0.4s 11.5s bg0_click linear both;
}




.bg1{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/p2.jpg') no-repeat;background-size:100% 100%;
}
.bg1_text{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/p2.1.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.left_text{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/p2.2.1.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.right_text{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/p2.3.1.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.left_ship{
    position:absolute;width:100%;height:100%;top:34%;left:-21%;background:url('../images/p2.2.png') no-repeat;background-size:100% 100%;
}
.right_ship{
    position:absolute;width:100%;height:100%;top:34%;left:21%;background:url('../images/p2.3.png') no-repeat;background-size:100% 100%;
}
.bg1_left_click{
    width: 36%;height:20%;position: absolute;left:6%;top:72%;opacity: 0;}
.bg1_right_click{
    width: 36%;height:20%;position: absolute;left:61%;top:72%;opacity: 0;
}


.bg1.ani .bg1_text{
    -webkit-animation:1s 0s Out linear both;
    animation:1s 0s Out linear both;
}
.bg1.ani .left_ship{
    -webkit-animation:1s 1.1s left_ship linear both;
    animation:1s 1.1s left_ship linear both;
}
.bg1.ani .right_ship{
    -webkit-animation:1s 1.1s right_ship linear both;
    animation:1s 1.1s right_ship linear both;
}
.bg1.ani .bg1_left_click,.bg1.ani .bg1_right_click{
    -webkit-animation:0.1s 1.5s Out linear both;
    animation:0.1s 1.5s Out linear both;
}

.bg1.ani .left_text{
    -webkit-animation:1s 2.2s Out linear both;
    animation:1s 2.2s Out linear both;
}
.bg1.ani .right_text{
    -webkit-animation:1s 2.2s Out linear both;
    animation:1s 2.2s Out linear both;
}
.bg1.ani1{
    -webkit-animation:0.5s 0.3s Out linear both;
    animation:0.5s 0.3 Out linear both;
}





.bg5{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/p5.jpg') no-repeat;background-size:100% 100%;
}
.bg5_text{
    position:absolute;width:100%;height:100%;top:0;left:0;background:url('../images/p5.1.png') no-repeat;background-size:100% 100%;
}
.bg5_left{
    position:absolute;width:34.78%;height:54.315%;top:45.68%;left:-40%;
}
.bg5_left_first{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.3.png') no-repeat;background-size:100% 100%;
}

.bg5_left_second{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.3.1.png') no-repeat;background-size:100% 100%;display: none;
}
.bg5_left_1{
    width:80%;height:77%;position: absolute;left:14%;top:5%;overflow: hidden;border-radius:10px;
}
.bg5_left_mask{
   width: 124%;height:120%;position: absolute;left:-15%;top:-62%;background:url('../images/p5.3.2.png') no-repeat;background-size:100% 100%;opacity: 0;
}

.bg5_left_2{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.3.3.png') no-repeat;background-size:100% 100%;
}

.bg5_left_3{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.3.4.png') no-repeat;background-size:100% 100%;opacity: 0;
}

.bg5_right{
    position:absolute;width:34.78%;height:54.315%;top:45.68%;left:105.22%;
}
.bg5_right_first{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.4.png') no-repeat;background-size:100% 100%;
}
.bg5_right_second{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.4.1.png') no-repeat;background-size:100% 100%;display: none;
}
.bg5_right_1{
    width: 80%;height:77%;position: absolute;left:9%;top:6%;border-radius: 10px;overflow: hidden;
}
.bg5_right_mask{
    width: 124%;height:120%;position: absolute;left:-19.8%;top:-62%;background:url('../images/p5.3.2.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg5_right_2{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.4.3.png') no-repeat;background-size:100% 100%;
}
.bg5_right_3{
    width: 100%;height:100%;position: absolute;left:0;top:0;background:url('../images/p5.4.4.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg5_chip{
    width: 18.9%;height:5.95%;position: absolute;left:41%;top:76%;background:url('../images/p5.5.png') no-repeat;background-size:100% 100%;
}
.bg5_horn{
    width: 18.9%;height:5.95%;position: absolute;left:41%;top:84%;background:url('../images/p5.6.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg5_hand{
    width: 100%;height:10.86%;position: absolute;left:0;bottom:0;background:url('../images/p5.7.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bang_start{
    width: 26.5%;height:5%;position: absolute;left:37%;top:65%;background:url('../images/paiming.png') no-repeat;background-size:100% 100%;display:none
}
.bg5.ani .bg5_text{
    -webkit-animation:1s 0s Out linear both;
    animation:1s 0s Out linear both;
}
.bg5.ani .bg5_left{
    -webkit-animation:1s 1s bg5_left linear both;
    animation:1s 1s bg5_left linear both;
}
.bg5.ani .bg5_right{
    -webkit-animation:1s 1s bg5_right linear both;
    animation:1s 1s bg5_right linear both;
}

.bg5.ani .bg5_chip,.bg5.ani .bg5_horn{
    -webkit-animation:0.5s 2s Out linear both;
    animation:0.5s 2s Out linear both;
}

.bg5.ani .bg5_hand{
    -webkit-animation:0.5s 2.5s Out linear both;
    animation:0.5s 2.5s Out linear both;
}

.bang_start{
    -webkit-animation:1s 0s Out linear both;
    animation:1s 0s Out linear both;
}


.bg5_left.ani .bg5_left_mask,.bg5_right.ani .bg5_right_mask{
    -webkit-animation:0.8s 1.1s bg5_left_mask linear both;
    animation:0.8s 1.1s bg5_left_mask linear both;
}
.bg5_left.ani .bg5_left_3,.bg5_right.ani .bg5_right_3{
    -webkit-animation:0.5s 2.3s Out linear both;
    animation:0.5s 2.3s Out linear both;
}

@-webkit-keyframes bg5_left_mask {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    30%{-webkit-transform:translate3d(0,50%,0);opacity: 1}
    100% {-webkit-transform:translate3d(0,150%,0);opacity: 1}
}
@keyframes bg5_left_mask{
    0% {transform:translate3d(0,0,0);opacity: 0}
    30%{-webkit-transform:translate3d(0,50%,0);opacity: 1}
    100% {transform:translate3d(0,150%,0);opacity: 1}
}



.bg6{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;overflow: hidden;background:url('../images/p6.jpg') no-repeat;background-size:100% 100%;
}
.bg6_1{
    position:absolute;width:100%;height:100%;top:0;left:-50%;background:url('../images/p6.1.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg6_2{
    position:absolute;width:100%;height:100%;top:0;left:50%;background:url('../images/p6.2.png') no-repeat;background-size:100% 100%;opacity: 0;
}
.bg6_click1{
    position:absolute;width:23%;height:7%;top:2%;left:18%;
}
.bg6_click2{
    position:absolute;width:24%;height:6%;top:2%;left:59%;
}
.bg6.ani .bg6_1{
    -webkit-animation:1s 0s bg6_1 linear both;
    animation:1s 0s bg6_1 linear both;
}
.bg6.ani .bg6_2{
    -webkit-animation:1s 0s bg6_2 linear both;
    animation:1s 0s bg6_2 linear both;
}

.bang{
    position:absolute;margin:0 auto;width:100%;height:100%;top:0;left:0;background:url('../images/bang.jpg') no-repeat;background-size:100% 100%;
}
.bang_ul_div{
    position:absolute;width:79.7%;height:62%;top:20.5%;left:10.6%;overflow: scroll;
}
.bang ul{
    list-style: none;height:300%;width: 100%;position: absolute;top:0;left:0;
}
.bang li{
    width: 100%;height:3.33%;position: relative;
}
.bang li div:nth-of-type(1){
   position: absolute;width: 13%;height:100%;left:5%;top:0;display: table;
}
.bang li div:nth-of-type(2){
    position: absolute;width: 50%;height:100%;left:20%;top:0;overflow: hidden;display: table;
}
.bang li div:nth-of-type(3){
    position: absolute;width: 20%;height:100%;left:73%;top:0;display: table;
}
.bang li span{
    display: table-cell;font-size: 20px;vertical-align: middle;color: #5f4508;
}

.bang_close{
    position: absolute;top:3%;left:4%;width: 10%;height: 7%;
}

.my_score{
    position:absolute;
    width: 14.7%;
    height: 4.5%;
    top: 85.5%;
    left: 57.6%;
    display: table;
}

.my_score span{
    display: table-cell;font-size: 24px;vertical-align: middle;color: #5f4508;text-align: center;
}

@-webkit-keyframes bg00_left {
    0%{-webkit-transform:translate3d(0,0,0);opacity: 1}
    100% {-webkit-transform:translate3d(80%,-20%,0) ;opacity: 1}
}
@keyframes bg00_left{
    0%{transform:translate3d(0,0,0);}
    100% {transform:translate3d(80%,-20%,0);}
}
@-webkit-keyframes bg00_right {
    0%{-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(-200%,-600%,0) ;}
}
@keyframes bg00_right{
    0%{transform:translate3d(0,0,0);}
    100% {transform:translate3d(-200%,-600%,0) ;}
}




@-webkit-keyframes ship_1 {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(300%,-50%,0) ;}
}
@keyframes ship_1{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(300%,-50%,0);}
}

@-webkit-keyframes ship_2 {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(-350%,-130%,0) ;}
}
@keyframes ship_2{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(-350%,-130%,0);}
}

@-webkit-keyframes ship_3 {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(400%,-150%,0) ;}
}
@keyframes ship_3{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(400%,-150%,0);}
}
@-webkit-keyframes bigShip {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(0,30%,0) ;}
}
@keyframes bigShip{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(0,30%,0);}
}
@-webkit-keyframes small_ship {
    0% {-webkit-transform:translate3d(0,0,0);}
    30%{-webkit-transform:translate3d(0,100%,0);opacity: 1}
    100% {-webkit-transform:translate3d(0,260%,0) ;opacity: 1}
}
@keyframes small_ship{
    0% {transform:translate3d(0,0,0);}
    30%{transform:translate3d(0,100%,0);opacity: 1}
    100% {transform:translate3d(0,260%,0) ;opacity: 1}
}
@-webkit-keyframes bg0_text {
    0% {-webkit-transform: scale(0.01);opacity:0}
    100% {-webkit-transform:scale(1);opacity: 1}
}
@keyframes bg0_text{
    0% {transform:scale(0.01);opacity: 0}
    100% {transform:scale(1);opacity: 1 }
}

@-webkit-keyframes bg0_click {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(0,-17%,0) ;}
}
@keyframes bg0_click{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(0,-17%,0);}
}

@-webkit-keyframes left_ship {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(21%,-31%,0) ;}
}
@keyframes left_ship{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(21%,-31%,0);}
}

@-webkit-keyframes right_ship {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(-21%,-31%,0) ;}
}

@keyframes right_ship{
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(-21%,-31%,0);}
}
@-webkit-keyframes bg5_left {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(116%,0,0);}
}

@keyframes bg5_left {
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(116%,0,0);}
}

@-webkit-keyframes bg5_right {
    0% {-webkit-transform:translate3d(0,0,0);}
    100% {-webkit-transform:translate3d(-116%,0,0);}
}

@keyframes bg5_right {
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(-116%,0,0);}
}


@-webkit-keyframes bg6_1 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(50%,0,0);opacity: 1}
}

@keyframes bg6_1 {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(50%,0,0);opacity: 1}
}
@-webkit-keyframes bg6_2 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(-50%,0,0);opacity: 1}
}

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










@-webkit-keyframes bg0_4 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 1}
    100% {-webkit-transform:translate3d(-10%,-30%,0);opacity: 1}
}

@keyframes bg0_4 {
    0% {transform:translate3d(0,0,0);opacity: 1}
    100% {transform:translate3d(-10%,-30%,0);opacity: 1}
}

@-webkit-keyframes bg1_bg {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 1}
    100% {-webkit-transform:translate3d(-64.9%,0,0);opacity: 1}
}

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

@-webkit-keyframes bg2_bg {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 1}
    100% {-webkit-transform:translate3d(-50%,0,0);opacity: 1}
}

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

@-webkit-keyframes arrow {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,-10%,0);opacity: 1}
}

@keyframes arrow {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(0,-10%,0);opacity: 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 Out1{
    0%{opacity: 1}
    100%{opacity:0}
}

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



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


@-webkit-keyframes s2_0 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0) ;}
    100% { -webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0); }
}

@keyframes s2_0 {
    0% { transform:translate3d(0,0,0) ;}
    100% { transform:translate3d(0,-100%,0);}
}

@-webkit-keyframes fade{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}

@keyframes fade{
    0%{opacity:0}
    20%{opacity:1}
    80%{opacity: 1}
    100%{opacity: 0}
}


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

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

@-moz-keyframes shake1{
    0%{opacity:0.1}
    50%{opacity:1}
    100%{opacity:0.1}
}

@keyframes shake1{
    0%{opacity:0.1}
    50%{opacity:1}
    100%{opacity:0.1}
}
@-webkit-keyframes  bounceIn{
    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes bounceIn{

    0%{transform:scale3d(.3,.3,.3);opacity:0;}
    20%{transform:scale3d(1.1,1.1,1.1);}
    40%{transform:scale3d(.9,.9,.9);}
    60%{transform:scale3d(1.03,1.03,1.03);opacity:1}
    80%{transform:scale3d(.97,.97,.97)}
    100%{transform:scale3d(1,1,1);opacity:1;}
}

@keyframes small{
    0%{opacity:1;transform: scale(0)}
    50%{opacity:1;transform: scale(0.2)}
    60%{opacity:1;transform: scale(0.7)}
    70%{opacity:1;transform: scale(1.3)}
    85%{opacity:1;transform: scale(0.9)}
    100%{opacity:1;transform: scale(1)}
}
@-webkit-keyframes small{
    0%{opacity:1;-webkit-transform: scale(0)}
    50%{opacity:1;-webkit-transform: scale(0.2)}
    60%{opacity:1;-webkit-transform: scale(0.7)}
    70%{opacity:1;-webkit-transform: scale(1.3)}
    85%{opacity:1;-webkit-transform: scale(0.9)}
    100%{opacity:1;-webkit-transform: scale(1)}
}

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

@keyframes scale1
{
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(0.8);transform:scale(0.8)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}

@-webkit-keyframes arrow {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,-40%,0);opacity: 1}
}
@keyframes arrow {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(0,-40%,0);opacity: 1}
}