body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;background: black}
.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:38.6%;height:8px;top:38%;left:30.9%;background:#aaa;border-radius:4px;}
.loading_line_blank{position:absolute;width:20px;height:100%;background:#f8b551;border-radius:4px;}
a{opacity:1}
a:active{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
/*loading*/

/*音乐*/
.music_blk{z-index:999;position:fixed;bottom:10px;left: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}
.bg,.bg *{opacity:1}
.layer{width:100%;height:100%;opacity:1}
.layer div{border-radius:100%}


#bg{position:absolute;top:0;left:0;width: 100%;height: 100%;opacity:1;overflow: hidden;background-color: white}
#bg .bg1{position:absolute;width: 200%;height: 100%;top:0;left:0;background:url("../images/p1.jpg?1") no-repeat 0 0;background-size:100% 100%;opacity: 1;transition: left 0.3s;-webkit-transition: left 0.3s;display: none}

#s0{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;background:url("../images/p0.jpg?1") no-repeat 0 0;background-size:100% 100%;opacity:1;position: relative}
#s0  .w0{width: 100%;height: 100%;top:0;left:0;background:url("../images/p0.1.png?1") no-repeat 0 0;background-size:100% 100%;}
#s0  .w1{width: 100%;height:100%;top:0;left:0;background:url("../images/p0.2.png?1") no-repeat 0 0;background-size:100% 100%;}
#s0.ani .w0{
    animation:1s 0.2s fadeIn both ;
    -webkit-animation:1s 0.2s fadeIn both;
    -o-animation:1s 0.2s fadeIn both;
    -moz-animation:1s 0.2s fadeIn both;
}
#s0.ani .w1{
    animation:1.5s 1s fadeIn both ;
    -webkit-animation:1.5s 1s fadeIn both;
    -o-animation:1.5s 1s fadeIn both;
    -moz-animation:1.5s 1s fadeIn both;
}

#s1  .w0{width: 100%;height: 100%;top:0;left:0;background:url("../images/p1.1.png?1") no-repeat 0 0;background-size:100% 100%;}
#s1  .w1{width: 100%;height:100%;top:0;left:0;background:url("../images/p1.2.png?1") no-repeat 0 0;background-size:100% 100%;}
#s1.ani .w0{
    animation:1s 0.2s fadeIn both ;
    -webkit-animation:1s 0.2s fadeIn both;
    -o-animation:1s 0.2s fadeIn both;
    -moz-animation:1s 0.2s fadeIn both;
}
#s1.ani .w1{
    animation:1s 0.5s fadeIn_top both ;
    -webkit-animation:1s 0.5s fadeIn_top both;
    -o-animation:1s 0.5s fadeIn_top both;
    -moz-animation:1s 0.5s fadeIn_top both;
}


#s2  .w0{width: 100%;height:100%;top:0;left:0;background:url("../images/p1.3.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 0}
#s2.ani .w0{
    animation:1s 0.5s fadeIn_top linear both ;
    -webkit-animation:1s 0.5s fadeIn_top linear both;
    -o-animation:1s 0.5s fadeIn_top linear both;
    -moz-animation:1s 0.5s fadeIn_top linear both;
}
#s3{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;background:url("../images/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;opacity:1;position: relative}
#s3  .w0{width: 100%;height: 100%;top:0;left:0;background:url("../images/p2.1.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
#s3  .w1{width: 100%;height:100%;top:0;left:0;background:url("../images/p2.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}

#s3.ani .w0{
    animation:0.8s fadeRight both ;
    -webkit-animation:0.8s  fadeRight both;
    -o-animation:0.8s  fadeRight both;
    -moz-animation:0.8s  fadeRight both;
}
#s3.ani .w1{
    animation:0.8s  fadeLeft both ;
    -webkit-animation:0.8s  fadeLeft both;
    -o-animation:0.8s  fadeLeft both;
    -moz-animation:0.8s fadeLeft both;
}

#s4{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;opacity:1;position: relative}
#s4  .w0{width: 100%;height: 100%;top:0;left:0;background:url("../images/p3.1.png?1") no-repeat 0 0;background-size:100% 100%;}
#s4  .w1{width: 100%;height:100%;top:0;left:0;background:url("../images/p3.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
#s4  .w2{width: 100%;height:100%;top:0;left:0;background:url("../images/p3.jpg?1") no-repeat 0 0;background-size:100% 100%;}
#s4.ani .w1{
    animation:0.8s fadeRight both ;
    -webkit-animation:0.8s  fadeRight both;
    -o-animation:0.8s  fadeRight both;
    -moz-animation:0.8s  fadeRight both;
}
#s4.ani .w0{
    animation:0.8s 0.5s fadeIn both ;
    -webkit-animation:0.8s 0.5s fadeIn both;
    -o-animation:0.8s 0.5s fadeIn both;
    -moz-animation:0.8s 0.5s fadeIn both;
}
#s4.ani .w2{
    animation:1s 1s fadeIn both ;
    -webkit-animation:1s 1s fadeIn both;
    -o-animation:1s 1s fadeIn both;
    -moz-animation:1s 1s fadeIn both;
}


#s5{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;background:url("../images/p4.jpg?1") no-repeat 0 0;background-size:100% 100%;opacity:1;position: relative}
#s5  .w0{width: 100%;height: 100%;top:0;left:0;background:url("../images/p4.1.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
#s5  .w1{width: 100%;height:100%;top:0;left:0;background:url("../images/p4.2.png?1") no-repeat 0 0;background-size:100% 100%;}
#s5.ani .w0{
    animation:0.8s  fadeLeft both ;
    -webkit-animation:0.8s  fadeLeft both;
    -o-animation:0.8s  fadeLeft both;
    -moz-animation:0.8s fadeLeft both;
}
#s5.ani .w1{
    animation:0.8s 0.5s fadeIn_top both ;
    -webkit-animation:0.8s 0.5s fadeIn_top both;
    -o-animation:0.8s 0.5s fadeIn_top both;
    -moz-animation:0.8s 0.5s fadeIn_top both;
}


#s6{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;opacity:1;position: relative}
#s6  .w0{width: 100%;height: 100%;top:0;left:0;background:url("../images/p5.1.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
#s6  .w1{width: 100%;height:100%;top:0;left:0;background:url("../images/p5.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
#s6  .w2{width: 100%;height:100%;top:0;left:0;background:url("../images/p5.jpg?1") no-repeat 0 0;background-size:100% 100%;opacity: 0}
#s6.ani .w1{
    animation:0.8s  fadeLeft both ;
    -webkit-animation:0.8s  fadeLeft both;
    -o-animation:0.8s  fadeLeft both;
    -moz-animation:0.8s fadeLeft both;
}
#s6.ani .w0{
    animation:0.8s 0.5s fadeLeft both ;
    -webkit-animation:0.8s 0.5s fadeLeft both;
    -o-animation:0.8s 0.5s fadeLeft both;
    -moz-animation:0.8s 0.5s fadeLeft both;
}
#s6.ani .w2{
    animation:1.5s 1.5s fadeIn both ;
    -webkit-animation:1.5s 1.5s fadeIn both;
    -o-animation:1.5s 1.5s fadeIn both;
    -moz-animation:1.5s 1.5s fadeIn both;
}


#s7{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;background:url("../images/p6.jpg?1") no-repeat 0 0;background-size:100% 100%;opacity:1;position: relative}
#s7 .w0{width: 100%;height: 100%;top:0;left:0;background:url("../images/p6.1.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
#s7 .w1{width: 100%;height:100%;top:0;left:0;background:url("../images/p6.2.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
#s7.ani .w0{
    animation:0.8s fadeRight both ;
    -webkit-animation:0.8s  fadeRight both;
    -o-animation:0.8s  fadeRight both;
    -moz-animation:0.8s  fadeRight both;
}
#s7.ani .w1{
    animation:0.8s  fadeLeft both ;
    -webkit-animation:0.8s  fadeLeft both;
    -o-animation:0.8s  fadeLeft both;
    -moz-animation:0.8s fadeLeft both;
}

#s8{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;background:url("../images/p7.jpg?1") no-repeat 0 0;background-size:100% 100%;opacity:1;position: relative}
#s8 .w0{width: 100%;height: 100%;top:0;left:0;background:url("../images/p7.1.png?1") no-repeat 0 0;background-size:100% 100%;}
#s8 .w1{width: 100%;height:100%;top:0;left:0;background:url("../images/p7.2.png?1") no-repeat 0 0;background-size:100% 100%;}
#s8 .w2{width: 100%;height:100%;top:0;left:0;background:url("../images/p7.3.png?1") no-repeat 0 0;background-size:100% 100%;}
#s8 .w3{width: 100%;height:100%;top:0;left:0;background:url("../images/p7.4.png?1") no-repeat 0 0;background-size:100% 100%;opacity: 1}
.arrow{width: 100%;height:100%;top:0;left:0;background:url("../images/arrow.png?1") no-repeat 0 0;background-size:100% 100%;}

#s0.ani .arrow,#s1.ani .arrow,#s2.ani .arrow,#s3.ani .arrow,#s4.ani .arrow,#s5.ani .arrow,#s6.ani .arrow,#s7.ani .arrow,#s8.ani .arrow{
    animation:1s 2s arrow infinite both ;
    -webkit-animation:1s 2s arrow infinite both;
    -o-animation:1s 2s arrow infinite both;
    -moz-animation:1s 2s arrow infinite both;
}

#s8.ani .w1{
    animation:1s 0.5s fadeIn both ;
    -webkit-animation:1s 0.5s fadeIn both;
    -o-animation:1s 0.5s fadeIn both;
    -moz-animation:1s 0.5s fadeIn both;
}
#s8.ani .w2{
    animation:1s 1.2s fadeIn both ;
    -webkit-animation:1s 1.2s fadeIn both;
    -o-animation:1s 1.2s fadeIn both;
    -moz-animation:1s 1.2s fadeIn both;
}
#s8.ani .w0{
    animation:1.5s 2s fadeIn both ;
    -webkit-animation:1.5s 2s fadeIn both;
    -o-animation:1.5s 2s fadeIn both;
    -moz-animation:1.5s 2s fadeIn both;
}




@keyframes fadeTop{
    0%{top: 100%}
    100%{top:0}
}
@-webkit-keyframes fadeTop{
    0%{top: 100%}
    100%{top:0}
}
@-o-keyframes fadeTop{
    0%{top: 100%}
    100%{top:0}
}
@-moz-keyframes fadeTop{
    0%{top: 100%}
    100%{top:0}
}

@keyframes arrow{
    0%{top: 0;opacity: 1}
    100%{top:-3%;opacity: 1}
}
@-webkit-keyframes arrow{
    0%{top: 0;opacity: 1}
    100%{top:-3%;opacity: 1}
}
@-o-keyframes arrow{
    0%{top: 0;opacity: 1}
    100%{top:-3%;opacity: 1}
}
@-moz-keyframes arrow{
    0%{top: 0;opacity: 1}
    100%{top:-3%;opacity: 1}
}

@keyframes fadeIn_top{
    0%{top: 15%;opacity: 0}
    100%{top:0;opacity: 1}
}
@-webkit-keyframes fadeIn_top{
    0%{top: 15%;opacity: 0}
    100%{top:0;opacity: 1}
}
@-o-keyframes fadeIn_top{
    0%{top: 15%;opacity: 0}
    100%{top:0;opacity: 1}
}
@-moz-keyframes fadeIn_top{
    0%{top: 15%;opacity: 0}
    100%{top:0;opacity: 1}
}






@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 fadeLeft{
    0%{left:-140%}
    60%{left:240%}
    100%{left:240%;opacity: 0}
}
@-webkit-keyframes fadeLeft{
    0%{left:-140%}
    60%{left:240%}
    100%{left:240%;opacity: 0}
}
@-o-keyframes fadeLeft{
    0%{left:-140%}
    60%{left:240%}
    100%{left:240%;opacity: 0}
}
@-moz-keyframes fadeLeft{
    0%{left:-140%}
    60%{left:240%}
    100%{left:240%;opacity: 0}
}

@keyframes fadeRight{
    0%{left:100%}
    100%{left:0;}
}
@-webkit-keyframes fadeRight{
    0%{left:100%}
    100%{left:0;}
}
@-o-keyframes fadeRight{
    0%{left:100%}
    100%{left:0;}
}
@-moz-keyframes fadeRight{
    0%{left:100%}
    100%{left:0;}
}

@keyframes fadeLeft{
    0%{left:-100%}
    100%{left:0;}
}
@-webkit-keyframes fadeLeft{
    0%{left:-100%}
    100%{left:0;}
}
@-o-keyframes fadeLeft{
    0%{left:-100%}
    100%{left:0;}
}
@-moz-keyframes bg1_Left{
    0%{left:-100%}
    100%{left:0;}
}


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

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

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

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