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?1');background-size:100% 100%;z-index: 99}
/*.load_anime{position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/loading1.jpg?1');background-size:100% 100%;}*/
/*.load_val{width:100%;}*/
/*.loading_line{position:absolute;top:41.6%;left:28.5%;width:40%;height:10px;background-color: #2d5dae;border-radius: 6px;}*/
/*.loading_line_blank{height:10px;position:absolute;top:0;left:0;width:10%;background:#26e9eb;border-radius: 6px;}*/
#ul_1{position:absolute;width:100%;height:20%;left:38.5%;top:36%;list-style: none;padding: 0;margin: 0 ;display: inline-block;text-align: center}
#ul_1 li{background-color: #49a7c7;border-radius:50%;display: none;position: absolute;top:0}
#ul_1 li.ani{float: left;background-color:#faf6b1;border-radius:50%;display: none;position: absolute;top:0}
.li1{left:0}
.li2{left:4%}
.li3{left:8%}
.li4{left:12%}
.li5{left:16%}
.li6{left:20%}
/*#loading_2{position:absolute;width: 26.57%;height:16.36%;left:36%;top:29%}*/
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;*/
/*}*/





.swiper-container{position:absolute;width:100%;height:100%}
.swiper-slide{position:relative;overflow:hidden}
.swiper-slide *{position:absolute;opacity:0}

#center{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.jpg?1") no-repeat 0 0;background-size:100% 100%;}
#canvas_tab{width: 100%;height:100%;position: fixed;top:0;left:0;display: none;z-index: 99}
#canvas_tab.ani{
    -webkit-animation:0.3s 0s fade linear both;
    animation:0.3s 0s fade linear both;
}

.s1_1,.s2_1,.s2_9,.s2_6,.s2_7,.s2_8,.s2_11{width: 100%;height: 100%;position: absolute;top:0;left:0;}

.s0{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;opacity:1;position: absolute;top:0;left:0;background:url("../images/p0.jpg?2") no-repeat 0 0;background-size:100% 100%;}
.s0_1{width: 100%;height: 100%;position:absolute;top:0;left:0;margin: 0 auto;overflow: hidden;background:url("../images/p0.1.png?1") no-repeat 0 0;background-size:100% 100%;}
.s0_2{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p0.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
.s0_3{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p0.3.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 0}
.s0_click{width:45%;height: 13%;position: absolute;top:73%;left:26%;opacity: 0}
.s0.ani .s0_1,.s0.ani .s0_2{
    -webkit-animation:1.2s 0.1s Out linear both;
    -o-animation:1.2s 0.1s Out linear both;
    -moz-animation:1.2s 0.1s  Out linear both;
    animation:1.2s 0.1s Out linear both;
}

.s0.ani .s0_3,.s0.ani .s0_click{
    -webkit-animation:1s 1.5s Out linear both;
    -o-animation:1s 1.5s Out linear both;
    -moz-animation:1s 1.5s Out linear both;
    animation:1s 1.5s Out linear both ;
}


.s1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;background:url("../images/p1.jpg?1") no-repeat 0 0;background-size:100% 100%;}

.s1_1_1{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p1.1.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
.s1_1_2{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p1.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1;display: none}
.s1_1_3{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p1.3.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1;display: none}
.s1_2{width: 100%;height: 100%;position: absolute;top:0;left:0;background:url("../images/p1.4.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
.s1_3{width: 100%;height: 20%;position: absolute;top:100%;left:0;background:url("../images/p1.5.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
.s1_next1{width: 21%;height: 6%;position: absolute;top:72%;left:65%; }
.s1_next2{width: 21%;height: 6%;position: absolute;top:72%;left:16%;}
.s1.ani .s1_1,.s1.ani .s1_2{
    -webkit-animation:1s 0.1s Out linear both;
    -o-animation:1s 0.1s Out linear both;
    -moz-animation:1s 0.1s  Out linear both;
    animation:1s 0.1s Out linear both;
}

.s1.ani .s1_3.ani{
    -webkit-animation:0.5s 1s s1_3 linear both;
    -o-animation:0.5s 1s s1_3 linear both;
    -moz-animation:0.5s 1s  s1_3 linear both;
    animation:0.5s 1s s1_3 linear both;
}





.s2,.s2_start{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.s2_1{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p2.1.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_2{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2.2.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_3{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2-3.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_3_1{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2.3.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_4{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2-4.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_4_1{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2.4.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_5{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2-5.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_5_1{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2.5.png?1") no-repeat 0 0;background-size:100% 100%;}

.s2_6_1{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p2.10.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_6_2{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p2.7.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_7_1{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p2.11.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_7_2{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p2.9.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_8_1{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p2.12.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_8_2{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p2.8.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_10{width: 100%;height: 17.26%;opacity:1;position: absolute;top:100%;left:0;background:url("../images/p2.14.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_arrow{width: 100%;height: 100%;opacity:0;position: absolute;top:0;left:0;background:url("../images/p2.6.png?1") no-repeat 0 0;background-size:100% 100%;}



.s2_11_1{width: 34%;height: 15%;opacity:0;position: absolute;top:80%;left:9%;background:url("../images/p2_1.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_11_2{width: 21%;height: 10%;opacity:0;position: absolute;top:83%;left:44%;background:url("../images/p2_2.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_11_3{width: 21%;height: 13%;opacity:0;position: absolute;top:82%;left:69%;background:url("../images/p2_3.png?1") no-repeat 0 0;background-size:100% 100%;}


.s2_12{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p2.13.png?1") no-repeat 0 0;background-size:100% 100%;}
.s2_click{width: 100%;height: 17.26%;opacity:1;position: absolute;top:100%;left:0;background:url("../images/p2.14.png?1") no-repeat 0 0;background-size:100% 100%;}
/*.s2_click1,.s3_2_click{width: 62%;height: 10%;;position: absolute;top:82%;left:22%;background-color: #3bbec0}*/
.s2.ani .s2_1{
    -webkit-animation:1s 0.2s Out  linear both;
    -moz-animation:1s 0.2s Out linear both;
    -o-animation:1s 0.2s Out  linear  both;
    animation:1s 0.2s Out linear both;
}
.s2.ani .s2_2,.s2.ani .s2_3,.s2.ani .s2_4,.s2.ani .s2_5{
    -webkit-animation:1s 1.5s Out  linear both;
    -moz-animation:1s 1.5s Out linear both;
    -o-animation:1s 1.5s Out  linear  both;
    animation:1s 1.5s Out linear both;
}
.s2.ani .s2_arrow{
    -webkit-animation:1s 3s s2_top  linear infinite;
    -moz-animation:1s 3s s2_top linear infinite;
    -o-animation:1s 3s s2_top  linear  infinite;
    animation:1s 3s s2_top linear infinite;
}
.s2_11_1.ani,.s2_11_2.ani,.s2_11_3.ani {
    -webkit-animation:0.5s 0.1s s2_11_1_top  linear both;
    -moz-animation:0.5s 0.1s s2_11_1_top  linear both;
    -o-animation:0.5s 0.1s s2_11_1_top  linear  both;
    animation:0.5s 0.1s s2_11_1_top linear both;
}
.s2_6.ani .s2_6_1,.s2_7.ani .s2_7_1,.s2_8.ani .s2_8_1 {
    -webkit-animation:0.4s 0.7s Out  linear both;
    -moz-animation:0.4s 0.7s Out  linear both;
    -o-animation:0.4s 0.7s Out  linear  both;
    animation:0.4s 0.7s Out linear both;
}
.s2_6.ani .s2_6_2,.s2_7.ani .s2_7_2,.s2_8.ani .s2_8_2 {
    -webkit-animation:0.5s 1.1s Out  linear both;
    -moz-animation:0.5s 1.1s Out  linear both;
    -o-animation:0.5s 1.1s Out  linear  both;
    animation:0.5s 1.1s Out linear both;
}

.s2_start.ani .s2_12{
    -webkit-animation:0.4s 0.2s s2_12  linear both;
    -moz-animation:0.4s 0.2s s2_12 linear both;
    -o-animation:0.4s 0.2s s2_12  linear both;
    animation:0.43s 0.2s s2_12 linear both;
}
.s2_start.ani .s2_click,.s3.ani .s3_2,.s2_10.ani{
    -webkit-animation:0.6s 0.7s s1_3  linear both;
    -moz-animation:0.6s 0.7s s1_3 linear both;
    -o-animation:0.6s 0.7s s1_3  linear both;
    animation:0.6s 0.7s s1_3 linear both;
}


.s3{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.s3_1{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.1.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3_2{width: 100%;height:  17.26%;opacity:1;position: absolute;top:100%;left:0;background:url("../images/p3.2.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3_3{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.3.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3_6{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.6.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3_7{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.7.png?1") no-repeat 0 0;background-size:100% 100%;}
.s3_8{width: 100%;height: 100%;opacity:1;position: absolute;top:0;left:0;background:url("../images/p3.8.png?1") no-repeat 0 0;background-size:100% 100%;}



#ss{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0}
#s0{width: 100%;height: 100%;background:url("../images/p4.jpg?1") no-repeat 0 0;background-size:100% 100%;}
.bg0_1{background:url('../images/p4.4.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0_2{background:url('../images/p4.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 13%;height:11.75%;opacity: 1;left:77.53%;top:61.16%}
.bg0_3{background:url('../images/p4.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 10.38%;height:4.166%;opacity: 1;left:76.57%;top:13.69%}
.bg0_4{background:url('../images/p4.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 17.39%;height:7.14%;opacity: 1;left:10.62%;top:50%}

/*#ss.ani1{*/
/*-webkit-animation: 0.6s  Out linear both;*/
/*animation: 0.6s  Out linear both;*/
/*}*/
#s0.ani .bg0_1{
    -webkit-animation: 0.8s 0.4s Out linear both;
    animation: 0.8s 0.4s  Out linear both;
}
#s0.ani .bg0_2{
    -webkit-animation: 30s 1s bg0_2 linear both;
    animation: 30s 0.5s bg0_2 linear both;
}
#s0.ani .bg0_3{
    -webkit-animation: 50s 1s bg0_3 linear infinite;
    animation: 50s 0.5s bg0_3 linear infinite;
}
#s0.ani .bg0_4{
    -webkit-animation: 50s 1s bg0_4 linear infinite;
    animation: 50s 1s bg0_4 linear infinite;
}


#s1{background:url('../images/p5.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.bg1_1,.bg1_2{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:-2%;left:0;opacity: 1}
.bg1_1_1{background:url('../images/p5.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;}
.bg1_1_2{background:url('../images/p5.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;display: none}
.bg1_1_3{background:url('../images/p5.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;display: none}
.hand{background:url('../images/hand.png?1') no-repeat 0 0;background-size:100% 100%;width: 10%;height:7%;position: absolute;top:12%;left:54%;opacity: 0;}
.bg1_2_1{width: 21%;height: 8%;position: absolute;top:10%;left:11%;}
.bg1_2_2{width: 21%;height: 8%;position: absolute;top:10%;left:41%;}
.bg1_2_3{width: 21%;height: 8%;position: absolute;top:10%;left:69%;}

#s1.ani .hand{
    -webkit-animation: 5s 0.5s shake linear infinite;
    animation: 5s 0.5s shake linear infinite;
}

#s2{background:url('../images/p6.jpg?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}

.bg2_1{background:url('../images/p6.1.png?1') no-repeat 0 0;background-size:100% 100%;width: 10.14%;height:4.16%;position: absolute;top:26.93%;left:80.19%;opacity: 1;}
.bg2_2{background:url('../images/p6.2.png?1') no-repeat 0 0;background-size:100% 100%;width: 13.04%;height:5.35%;position: absolute;top:53.87%;left:9.42%;opacity: 1;}
.bg2_3{background:url('../images/p6.3.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;}
.bg2_4{background:url('../images/p6.4.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;}
.fen{width: 52%;height: 8%;position: absolute;top:53%;left:26%;}
.fen1{background:url('../images/p6.5.png?1') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 1;display:none}
.more{width:52%;height: 8%;position: absolute;top:62%;left:26%;}
#s2.ani .bg2_1{
    -webkit-animation: 20s  bg2_1 linear infinite;
    animation: 20s  bg2_1 linear infinite;
}
#s2.ani .bg2_2{
    -webkit-animation: 40s  bg2_2 linear infinite;
    animation: 40s  bg2_2 linear infinite;
}

#s2.ani .bg2_3{
    -webkit-animation: 1s 0.2s  Out linear both;
    animation: 1s 0.2s Out linear both;
}
#s2.ani .bg2_4{
    -webkit-animation: 1s 1.6s  Out linear both;
    animation: 1s 1.6s Out linear both;
}

/*.arrow.ani{*/
    /*-webkit-animation:arrow1 1s linear infinite;*/
    /*animation:arrow1 1s linear infinite;*/
/*}*/
.arrow{position:absolute;width: 11%;height: 6%;opacity:0;background:url("../images/arrow.png?1") no-repeat 0 0;background-size:100% 100%;top:92%;left:45%}
#s0.ani .arrow,#s1.ani .arrow{
    -webkit-animation:1s 1s arrow infinite;
    animation:1s 1s arrow infinite ;
}

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

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


@-webkit-keyframes shake{
    0%{opacity: 1}
    20%{opacity:0}
    40%{opacity: 1}
    60%{opacity:0}
    80%{opacity:1}
    100%{opacity: 0}
}
@-o-keyframes shake{
    0%{opacity: 1}
    20%{opacity:0}
    40%{opacity: 1}
    60%{opacity:0}
    80%{opacity:1}
    100%{opacity: 0}
}
@-moz-keyframes shake{
    0%{opacity: 1}
    20%{opacity:0}
    40%{opacity: 1}
    60%{opacity:0}
    80%{opacity:1}
    100%{opacity: 0}
}
@keyframes shake{
    0%{opacity: 1}
    20%{opacity:0}
    40%{opacity: 1}
    60%{opacity:0}
    80%{opacity:1}
    100%{opacity: 0}
}
@-webkit-keyframes bg0_2 {
    0% {-webkit-transform:translate3d(0,0,0) scale(1);}

    100% {-webkit-transform:translate3d(-600%,5%,0) scale(0);}
}
@keyframes bg0_2 {
    0% {transform:translate3d(0,0,0) scale(1);}
    100%{transform:translate3d(-600%,8%,0) scale(0)}
}

@-webkit-keyframes bg0_3 {
    0% {-webkit-transform:translate3d(0,0,0) ;}
    50% {-webkit-transform:translate3d(-400%,0,0);}
    100% {-webkit-transform:translate3d(0,0,0);}
}
@keyframes bg0_3 {
    0% {transform:translate3d(0,0,0);}
    50% {transform:translate3d(-400%,0,0)}
    100%{transform:translate3d(0,0,0)}
}
@-webkit-keyframes bg0_4 {
    0% {-webkit-transform:translate3d(0,0,0) ;}
    50% {-webkit-transform:translate3d(100%,0,0);}
    100% {-webkit-transform:translate3d(0,0,0);}
}
@keyframes bg0_4 {
    0% {transform:translate3d(0,0,0);}
    50% {transform:translate3d(100%,0,0)}
    100%{transform:translate3d(0,0,0)}
}

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

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

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

@-webkit-keyframes s1_3 {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 0}
    100% {-webkit-transform:translate3d(0,-100%,0);opacity: 1}
}
@keyframes s1_3 {
    0% {transform:translate3d(0,0,0);opacity: 0}
    100% {transform:translate3d(0,-100%,0);opacity: 1}
}
@-webkit-keyframes s2_11_1_top {
    0% {-webkit-transform:translate3d(0,0,0);opacity: 1}
    100% {-webkit-transform:translate3d(0,-150%,0);opacity: 0}
}
@keyframes s2_11_1_top {
    0% {transform:translate3d(0,0,0);opacity: 1}
    100% {transform:translate3d(0,-150%,0);opacity: 0}
}

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

@-webkit-keyframes s2_12 {
    0% {-webkit-transform-origin:center center;-webkit-transform:scale(0); opacity: 1}
    100% {-webkit-transform-origin:center center;-webkit-transform:scale(1.4);opacity: 1}
}

@keyframes s2_12 {
    0% {transform-origin:center center;transform:scale(0);opacity: 1}
    100% {transform-origin:center center;transform:scale(1.4) ; opacity: 1}
}
@keyframes fade{
    0%{opacity:1}
    100%{opacity:0}
}
@-webkit-keyframes fade{
    0%{opacity: 1}
    100%{opacity:0}
}


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

@keyframes Out11 {     /*逐渐显示*/
    0% {  opacity: 0;  }
    20% {  opacity: 1;  }
    90% {  opacity: 1;  }
    100% {  opacity: 0;  }
}
@-webkit-keyframes Out11 {     /*逐渐显示*/
    0% {  opacity: 0;  }
    20% {  opacity: 1;  }
    90% {  opacity: 1;  }
    100% {  opacity: 0;  }
}
@-moz-keyframes Out11 { /*逐渐显示*/
    0% {  opacity: 0;  }
    20% {  opacity: 1;  }
    90% {  opacity: 1;  }
    100% {  opacity: 0;  }
}
@-o-keyframes Out11 {     /*逐渐显示*/
    0% {  opacity: 0;  }
    20% {  opacity: 1;  }
    90% {  opacity: 1;  }
    100% {  opacity: 0;  }
}




@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0 {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



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