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');background-size:100% 100%;z-index: 99}
.load_val{width:100%;}
.loading_line{top:55%;height:12px;position:absolute;left:10%;background:url('../images/loading1.png');background-size:100% 100%;z-index: 99}
.loading_line_blank{width:4%;height:100%;position: absolute;background:url('../images/loading2.png');background-size:100% 100%;z-index: 99}
a{opacity:0}
.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%}

#s0{background: url("../images/p0.jpg") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#s0 .w0{top:0;width:100%;height:100%;background:url("../images/p0.1.png") no-repeat 0 0;background-size:100% 100%}
#s0 .w1{top:0;width:100%;height:100%;background:url("../images/p0.2.png") no-repeat 0 0;background-size:100% 100%}
#s0 .w2{top:0;width:100%;height:100%;background:url("../images/hua.png") no-repeat 0 0;background-size:100% 100%}
#s0.ani .w0{animation:fadeIn 1s .5s ease both;
            -moz-animation:fadeIn 1s .5s ease both;
            -webkit-animation:fadeIn 1s .5s ease both;
            -o-animation:fadeIn 1s .5s ease both}
#s0.ani .w1{animation:fadeInBig 1s 1.5s ease both;
            -moz-animation:fadeInBig 1s 1.5s ease both;
            -webkit-animation:fadeInBig 1s 1.5s ease both;
            -o-animation:fadeInBig 1s 1.5s ease both}
#s0.ani .w2{animation:arrow1 1.5s 2.5s ease infinite;
            -moz-animation:arrow1 1.5s 2.5s ease infinite;
            -webkit-animation:arrow1 1.5s 2.5s ease infinite;
            -o-animation:arrow1 1.5s 2.5s ease infinite}

#s1{background: url("../images/p1.jpg") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#s1 .w0{top:0;width:100%;height:100%;background:url("../images/p1.1.png") no-repeat 0 0;background-size:100% 100%}
#s1 .w1{top:0;width:100%;height:100%;background:url("../images/p1.2.png") no-repeat 0 0;background-size:100% 100%}
#s1 .w2{top:0;width:100%;height:100%;background:url("../images/p1.3.png") no-repeat 0 0;background-size:100% 100%}
#s1 .w3{top:0;width:100%;height:100%;background:url("../images/p1.4.png") no-repeat 0 0;background-size:100% 100%}
#s1 .w4{top:0;width:100%;height:100%;background:url("../images/hua.png") no-repeat 0 0;background-size:100% 100%}
#s1.ani .w0{animation:fadeInDown 1s .5s ease both;
            -moz-animation:fadeInDown 1s .5s ease both;
            -webkit-animation:fadeInDown 1s .5s ease both;
            -o-animation:fadeInDown 1s .5s ease both}
#s1.ani .w1{animation:fadeInDown 1s 1s ease both;
            -moz-animation:fadeInDown 1s 1s ease both;
            -webkit-animation:fadeInDown 1s 1s ease both;
            -o-animation:fadeInDown 1s 1s ease both}
#s1.ani .w2{animation:fadeInDown 1s 1.5s ease both;
            -moz-animation:fadeInDown 1s 1.5s ease both;
            -webkit-animation:fadeInDown 1s 1.5s ease both;
            -o-animation:fadeInDown 1s 1.5s ease both}
#s1.ani .w3{animation:fadeInDown 1s 2s ease both;
            -moz-animation:fadeInDown 1s 2s ease both;
            -webkit-animation:fadeInDown 1s 2s ease both;
            -o-animation:fadeInDown 1s 2s ease both}
#s1.ani .w4{animation:arrow1 1.5s 2.5s ease infinite;
            -moz-animation:arrow1 1.5s 2.5s ease infinite;
            -webkit-animation:arrow1 1.5s 2.5s ease infinite;
            -o-animation:arrow1 1.5s 2.5s ease infinite}
#s2{background: url("../images/p2.jpg") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#s2 .w2{top:0;width:100%;height:100%;background:url("../images/hua.png") no-repeat 0 0;background-size:100% 100%}
#s2 .w0{top: 75%;left: 34%;width: 32%;height: 7%;}
#s2 .w1{display: none;opacity: 1;position: absolute;top: 16%;left: 11%;width: 78%;height: 23.7%;}
#s2 .w3{top: 79%;left: 60%;width: 7%;height: 5%;background:url("../images/hand.png") no-repeat 0 0;background-size:100% 100%}
#s2.ani .w3{animation:fadeIn 1.5s .5s ease infinite;
            -moz-animation:fadeIn 1.5s .5s ease infinite;
            -webkit-animation:fadeIn 1.5s .5s ease infinite;
            -o-animation:fadeIn 1.5s .5s ease infinite}
#s3{background: url("../images/p3.jpg") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#s3 .w2{top:0;width:100%;height:100%;background:url("../images/hua.png") no-repeat 0 0;background-size:100% 100%}
#s3 .w0{top: 75%;left: 34%;width: 32%;height: 7%;}
#s3 .w1{display: none;opacity: 1;position: absolute;top: 15.8%;left: 11%;width: 78.2%;height: 27%;}
#s4{background: url("../images/p4.jpg") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#s4 .w2{top:0;width:100%;height:100%;background:url("../images/hua.png") no-repeat 0 0;background-size:100% 100%}
#s4 .w0{top: 75%;left: 34%;width: 32%;height: 7%;}
#s4 .w1{display: none;opacity: 1;position: absolute;top: 15.8%;left: 10.7%;width: 78.3%;height: 29.4%;}
#s5{background: url("../images/p5.jpg") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#s5 .w2{top:0;width:100%;height:100%;background:url("../images/hua.png") no-repeat 0 0;background-size:100% 100%}
#s5 .w0{top: 75%;left: 34%;width: 32%;height: 7%;}
#s5 .w1{display: none;opacity: 1;position: absolute;top: 15.8%;left: 10.7%;width: 78.3%;height: 29.4%;}
#s6{background: url("../images/p6.jpg") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#s6 .w0{top:0;width:100%;height:100%;background:url("../images/p6.1.png") no-repeat 0 0;background-size:100% 100%}
#s6 .w1{top:0;width:100%;height:100%;background:url("../images/p6.2.png") no-repeat 0 0;background-size:100% 100%}
#s6 .w2{top: 67%;left: 9%;width: 10%;height: 13%;}
#s6 .w3{top: 67%;left: 82%;width: 10%;height: 13%;}
#s6 .w4{top:0;width:100%;height:100%;background:url("../images/hua.png") no-repeat 0 0;background-size:100% 100%}
#s6.ani .w0{animation:fadeIn 1s .5s ease both;
            -moz-animation:fadeIn 1s .5s ease both;
            -webkit-animation:fadeIn 1s .5s ease both;
            -o-animation:fadeIn 1s .5s ease both}
#s6.ani .w1{animation:fadeIn 1s .5s ease both;
            -moz-animation:fadeIn 1s .5s ease both;
            -webkit-animation:fadeIn 1s .5s ease both;
            -o-animation:fadeIn 1s .5s ease both}
#s7{background: url("../images/p6.jpg") no-repeat 0 0;background-size:100% 100%;margin: 0 auto;overflow: hidden;}
#s7 .w0{top:0;width:100%;height:100%;background:url("../images/p7.1.png") no-repeat 0 0;background-size:100% 100%}
#s7 .w1{top:0;width:100%;height:100%;background:url("../images/p7.2.png") no-repeat 0 0;background-size:100% 100%}
#s7 .w2{top: 74%;left: 25%;width: 51%;height: 7%;}
#s7 .w2 a{top: 0%;left: 0%;width: 100%;height: 100%;}
#s7 .w3{top: 79%;left: 60%;width: 7%;height: 5%;background:url("../images/hand.png") no-repeat 0 0;background-size:100% 100%}
#s7.ani .w3{animation:fadeIn 1.5s 2.5s ease infinite;
            -moz-animation:fadeIn 1.5s 2.5s ease infinite;
            -webkit-animation:fadeIn 1.5s 2.5s ease infinite;
            -o-animation:fadeIn 1.5s 2.5s ease infinite}
#s7.ani .w1{animation:fadeInDown 1s .5s ease both;
            -moz-animation:fadeInDown 1s .5s ease both;
            -webkit-animation:fadeInDown 1s .5s ease both;
            -o-animation:fadeInDown 1s .5s ease both}
#s7.ani .w0{animation:fadeIn 1s 1.5s ease both;
            -moz-animation:fadeIn 1s 1.5s ease both;
            -webkit-animation:fadeIn 1s 1.5s ease both;
            -o-animation:fadeIn 1s 1.5s ease both}

.arrow{animation:arrow1 1.5s 2.5s ease infinite;
            -moz-animation:arrow1 1.5s 2.5s ease infinite;
            -webkit-animation:arrow1 1.5s 2.5s ease infinite;
            -o-animation:arrow1 1.5s 2.5s ease infinite
}
@keyframes hand
{
    0%{opacity:0.5;-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-moz-keyframes hand /* Firefox */
{
    0%{opacity:0.5;-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-webkit-keyframes hand /* Safari 和 Chrome */
{
    0%{opacity:0.5;-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes arrow1
{
    0%{opacity:1;-webkit-transform:none;transform:none}
    100%{opacity:0.5;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}
}

@-moz-keyframes arrow1 /* Firefox */
{
    0%{opacity:1;-webkit-transform:none;transform:none}
    100%{opacity:0.5;-webkit-transform:translate3d(0,-3%,0);transform:translate3d(0,-3%,0)}
}

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

@keyframes fadeInSmall
{
    0%{opacity:0;width: 150%;left: -25%;height: 150%;top: -25%;}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}

@-moz-keyframes fadeInSmall /* Firefox */
{
    0%{opacity:0;width: 150%;left: -25%;height: 150%;top: -25%;}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}

@-webkit-keyframes fadeInSmall /* Safari 和 Chrome */
{
    0%{opacity:0;width: 150%;left: -25%;height: 150%;top: -25%;}
    100%{opacity:1;width: 100%;left: 0;height: 100%;top: 0;}
}   
@keyframes fadeInLeft1
{
    0%{opacity:0;-webkit-transform:translate3d(-40%,0,0);transform:translate3d(-40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

@-moz-keyframes fadeInLeft1 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(-40%,0,0);transform:translate3d(-40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

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


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

@-moz-keyframes fadeInUp1 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(0,40%,0);transform:translate3d(0,40%,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

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


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

@-moz-keyframes fadeInRight1 /* Firefox */
{
    0%{opacity:0;-webkit-transform:translate3d(40%,0,0);transform:translate3d(40%,0,0)}
    100%{opacity:1;-webkit-transform:none;transform:none}
}

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

@-webkit-keyframes fadeInDown{
  0%{opacity:0;-webkit-transform:translate3d(0,-70%,0);transform:translate3d(0,-70%,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
@-moz-keyframes fadeInDown{
  0%{opacity:0;-webkit-transform:translate3d(0,-70%,0);transform:translate3d(0,-70%,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{
  0%{opacity:0;-webkit-transform:translate3d(0,-70%,0);transform:translate3d(0,-70%,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}

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


@-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 rotateY {
  0% {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  
  25% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  
  50% {
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }

  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}

@keyframes rotateY {
  0% {
    -webkit-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
  
  25% {
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }

  50% {
    -webkit-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }

  100% {
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
  }
}

.rotateY {
  -webkit-animation-name: rotateY;
  animation-name: rotateY;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

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

  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadeInBig
{
    0%{opacity: 1;transform:scale(0);}
    100%{opacity: 1;transform:scale(1);}
}

@-moz-keyframes fadeInBig /* Firefox */
{
    0%{opacity: 1;transform:scale(0);}
    100%{opacity: 1;transform:scale(1);}
  }

@-webkit-keyframes fadeInBig /* Safari 和 Chrome */
{
    0%{opacity: 1;transform:scale(0);}
    100%{opacity: 1;transform:scale(1);}
}
/* 音乐开关*/
#switch-music{z-index:9999999;position:absolute;top: 15px;right: 15px; width:25px; height:25px;}
#switch-music img{max-width: 100%;}
#switch-music.show{display:block; z-index:999;}
#switch-music .tips{color: rgba(255,255,255,.75); z-index:999; top: 15px; right: 100px; width: 30px; text-align: right; opacity: 0;}
#switch-music .tips.on{opacity: 1; right: 100px; z-index:999;}
#switch-music div:nth-child(2){display:none; z-index:999;}
#switch-music.on div:nth-child(2){display:block; animation: music 1s linear infinite; -webkit-animation: music 1s linear infinite; z-index:999;}
@keyframes music{
	0%{transform: rotate(0)}
	100%{transform: rotate(360deg)}
}
@-webkit-keyframes music{
	0%{transform: rotate(0); -webkit-transform: rotate(0)}
	100%{transform: rotate(360deg); -webkit-transform: rotate(360deg)}
}
.pof{position: fixed; z-index:9999}
/* 音乐开关*/