*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}

/*loading*/
.loading{position:absolute;width:100%;height:100%;background:url('../images/loading.jpg?1') no-repeat;background-size:100% 100%;z-index: 99;}
.load_wave{
    position:absolute;top:38%;left:33%;width: 35.26%;height:7px;background-color: #efefef;border-radius:40px;-moz-border-radius:40px;
}
.load_val{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #062e66;border-radius:40px;-moz-border-radius:40px;
}

/*音乐*/
.music_blk{z-index:999;position:fixed;top: 10px;right: 40px;display: none}
.music{width:30px;height:30px;background:url('../images/music_on.png?6') no-repeat;background-size:100% 100%;position: absolute}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}
@keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
      }
}
@-webkit-keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
    }
}

.section0{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p0.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;}
.section0 .w0{position: absolute;bottom:5%;left:28%;width: 47.1%;height: 16.2%;background:url("../images/p0.1.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.section0 .w1{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p0.2.png?6") no-repeat 0 0;background-size:100% 100%;}
.section0 .hand{position: absolute;top:84%;left:71%;width: 12.9%;height: 5.7%;background:url("../images/hand.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.section0 .btn0{position: absolute;bottom:5%;left:28%;width: 47%;height: 16%;}

.section0.ani .w0{
    animation:fadeIn 1s .5s linear both;
    -moz-animation:fadeIn 1s .5s linear both;
    -webkit-animation:fadeIn 1s .5s linear both;
    -o-animation:fadeIn 1s .5s linear both
}

.section0.ani .hand{
    animation:twinkle 2s 1.5s linear infinite;
    -moz-animation:twinkle 2s 1.5s linear infinite;
    -webkit-animation:twinkle 2s 1.5s linear infinite;
    -o-animation:twinkle 2s 1.5s linear infinite
}

.section1{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p1.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;}
.section1 .w0{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p1.1.png?6") no-repeat 0 0;background-size:100% 100%;}
.section1 .w1{position: absolute;top:55%;left:46%;width: 33.6%;height: 13.8%;background:url("../images/p1.2.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.section1 .btn0{position: absolute;top:55%;left:46%;width: 34%;height: 14%;}

.section1.ani .w1{
    animation:fadeIn 1s .5s linear both;
    -moz-animation:fadeIn 1s .5s linear both;
    -webkit-animation:fadeIn 1s .5s linear both;
    -o-animation:fadeIn 1s .5s linear both
}

.section2{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;}
.section2 .w0{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p2.3.png?6") no-repeat 0 0;background-size:100% 100%;}
.section2 .w1{position: absolute;top:32%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p2.1.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 1;}
.section2 .w2{position: absolute;top:44%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p2.2.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 1;}

.section3{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;}
.section3 .w0{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p3.3.png?6") no-repeat 0 0;background-size:100% 100%;}
.section3 .w1{position: absolute;top:32%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p3.1.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 1;}
.section3 .w2{position: absolute;top:44%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p3.2.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 1;}

.section4{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;}
.section4 .w0{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p4.3.png?6") no-repeat 0 0;background-size:100% 100%;}
.section4 .w1{position: absolute;top:32%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p4.2.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 1;}
.section4 .w2{position: absolute;top:44%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p4.1.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 1;}

.section5{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;}
.section5 .w0{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p5.3.png?6") no-repeat 0 0;background-size:100% 100%;}
.section5 .w1{position: absolute;top:32%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p5.2.png?6?1") no-repeat 0 0;background-size:100% 100%;opacity: 1;}
.section5 .w2{position: absolute;top:44%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p5.1.png?6?1") no-repeat 0 0;background-size:100% 100%;opacity: 1;}

.section6{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p2.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;}
.section6 .w0{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p6.3.png?6") no-repeat 0 0;background-size:100% 100%;}
.section6 .w1{position: absolute;top:32%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p6.1.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 1;}
.section6 .w2{position: absolute;top:44%;left: 14%;width: 72.6%;height: 7.4%;background:url("../images/p6.2.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 1;}

.section7{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p7.jpg?5") no-repeat 0 0;background-size:100% 100%;display: none;}
/* .section7 .w0{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p7.1.png?6?1") no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.section7 .w1{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p7.2.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 0;} */
.section7 .w2{position: absolute;top: 73%;left: 36%;width: 26.3%;height: 14.7%;background:url("../images/p7.3.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.section7 .w3{position: absolute;top: 84%;left: 50%;width: 28.5%;height: 5.7%;background:url("../images/p7.4.png?6") no-repeat 0 0;background-size:100% 100%;opacity: 0;}
.section7 .w4{position: absolute;top:0;left:0;width: 100%;height: 100%;background:url("../images/p7.5.jpg?4") no-repeat 0 0;background-size:100% 100%;display: none;}
.section7 .w4 .close{position: absolute;top:82%;left:44%;width: 11%;height: 8%;}


.section7.ani .w0{
    animation:fadeInLeft 1s .5s linear both;
    -moz-animation:fadeInLeft 1s .5s linear both;
    -webkit-animation:fadeInLeft 1s .5s linear both;
    -o-animation:fadeInLeft 1s .5s linear both
}
.section7.ani .w1{
    animation:fadeInRight 1s .5s linear both;
    -moz-animation:fadeInRight 1s .5s linear both;
    -webkit-animation:fadeInRight 1s .5s linear both;
    -o-animation:fadeInRight 1s .5s linear both
}
.section7.ani .w2{
    animation:wobble 1s 1.5s linear both;
    -moz-animation:wobble 1s 1.5s linear both;
    -webkit-animation:wobble 1s 1.5s linear both;
    -o-animation:wobble 1s 1.5s linear both
}
.section7.ani .w3{
    animation:twinkle 2s 2.5s linear infinite;
    -moz-animation:twinkle 2s 2.5s linear infinite;
    -webkit-animation:twinkle 2s 2.5s linear infinite;
    -o-animation:twinkle 2s 2.5s linear infinite
}

.tips{position: absolute;top:0;left:0;width: 100%;height: 100%;background-image: url(../images/tip1.jpg?1);background-repeat: no-repeat;background-size:100% 100%;display: none;}
.tips .w0{position: absolute;top:49%;left:14%;width: 30.4%;height: 5.8%;background:url("../images/p8.1.png?6") no-repeat 0 0;background-size:100% 100%;}
.tips .w1{position: absolute;top:49%;left:56%;width: 30.4%;height: 5.8%;background:url("../images/p8.2.png?6") no-repeat 0 0;background-size:100% 100%;}
.tips .w2{position: absolute;top:0%;left:0%;width: 100%;height: 100%;background:url("../images/share.jpg?1") no-repeat 0 0;background-size:100% 100%;display: none;}


/*twinkle*/
@-webkit-keyframes twinkle {0%{opacity: 0;} 40%{opacity: 1;} 60%{opacity: 1;} 100%{opacity: 0;}}
@-moz-keyframes twinkle {0%{opacity: 0;} 40%{opacity: 1;} 60%{opacity: 1;} 100%{opacity: 0;}}
@keyframes twinkle {0%{opacity: 0;} 40%{opacity: 1;} 60%{opacity: 1;} 100%{opacity: 0;}}

@-webkit-keyframes fadeIn1 {0% {opacity: 0;} 25% {opacity: 1;} 100% {opacity: 1;}}
@-moz-keyframes fadeIn1 {0% {opacity: 0;} 25% {opacity: 1;} 100% {opacity: 1;}}
@keyframes fadeIn1 {0% {opacity: 0;} 25% {opacity: 1;} 100% {opacity: 1;}}

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

@-webkit-keyframes fadeIn3 {0% {opacity: 0;} 75% {opacity: 1;} 100% {opacity: 1;}}
@-moz-keyframes fadeIn3 {0% {opacity: 0;} 75% {opacity: 1;} 100% {opacity: 1;}}
@keyframes fadeIn3 {0% {opacity: 0;} 75% {opacity: 1;} 100% {opacity: 1;}}

@keyframes fade{ 0%{ opacity:1; } 32%{ opacity:1;} 33%{ opacity:0; } 100%{ opacity:0; } }

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

@-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 fadeInRight
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-moz-keyframes fadeInRight /* Firefox */
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@-webkit-keyframes fadeInRight /* Safari 和 Chrome */
{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}

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

@-webkit-keyframes fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
@-moz-keyframes fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
@keyframes fadeInOut {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}

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

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

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


@-webkit-keyframes wobble {
    0% {
    -webkit-transform:translateX(0%);
    transform:translateX(0%)
}
15% {
    -webkit-transform:translateX(-25%) rotate(-5deg);
    transform:translateX(-25%) rotate(-5deg)
}
30% {
    -webkit-transform:translateX(20%) rotate(3deg);
    transform:translateX(20%) rotate(3deg)
}
45% {
    -webkit-transform:translateX(-15%) rotate(-3deg);
    transform:translateX(-15%) rotate(-3deg)
}
60% {
    -webkit-transform:translateX(10%) rotate(2deg);
    transform:translateX(10%) rotate(2deg)
}
75% {
    -webkit-transform:translateX(-5%) rotate(-1deg);
    transform:translateX(-5%) rotate(-1deg)
}
100% {
    -webkit-transform:translateX(0%);
    transform:translateX(0%);
    opacity: 1
}
}
@keyframes wobble {
    0% {
    -webkit-transform:translateX(0%);
    -ms-transform:translateX(0%);
    transform:translateX(0%)
}
15% {
    -webkit-transform:translateX(-25%) rotate(-5deg);
    -ms-transform:translateX(-25%) rotate(-5deg);
    transform:translateX(-25%) rotate(-5deg)
}
30% {
    -webkit-transform:translateX(20%) rotate(3deg);
    -ms-transform:translateX(20%) rotate(3deg);
    transform:translateX(20%) rotate(3deg)
}
45% {
    -webkit-transform:translateX(-15%) rotate(-3deg);
    -ms-transform:translateX(-15%) rotate(-3deg);
    transform:translateX(-15%) rotate(-3deg)
}
60% {
    -webkit-transform:translateX(10%) rotate(2deg);
    -ms-transform:translateX(10%) rotate(2deg);
    transform:translateX(10%) rotate(2deg)
}
75% {
    -webkit-transform:translateX(-5%) rotate(-1deg);
    -ms-transform:translateX(-5%) rotate(-1deg);
    transform:translateX(-5%) rotate(-1deg)
}
100% {
    -webkit-transform:translateX(0%);
    -ms-transform:translateX(0%);
    transform:translateX(0%);
    opacity: 1;
}
}

/* 放大显示(向左) */
@-webkit-keyframes zoomInRight {0% {opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}
@-moz-keyframes zoomInRight {0% {opacity:0;-moz-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-moz-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;-moz-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-moz-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}
@keyframes zoomInRight {0% {opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}

/* 放大显示(向下) */
@-webkit-keyframes zoomInDown {0% {opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}
@-moz-keyframes zoomInDown {0% {opacity:0;-moz-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-moz-animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;-moz-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-moz-animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}
@keyframes zoomInDown {0% {opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}
60% {opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}
100% {opacity:1}
}

@-webkit-keyframes shake{
    0%,40%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
    20%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}
    60%{-webkit-transform:translateX(10px);transform:translateX(10px)}
}

@keyframes shake{
    0%,40%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
    20%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}
    60%{-webkit-transform:translateX(10px);transform:translateX(10px)}
}

@keyframes fadeOutLeft
{0%{opacity:1;}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}}
@-moz-keyframes fadeOutLeft /* Firefox */
{0%{opacity:1;}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}}
@-webkit-keyframes fadeOutLeft /* Safari 和 Chrome */
{0%{opacity:1;}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}}

@keyframes fadeOutRight
{0%{opacity:1;}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}}
@-moz-keyframes fadeOutRight /* Firefox */
{0%{opacity:1;}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}}
@-webkit-keyframes fadeOutRight /* Safari 和 Chrome */
{0%{opacity:1;}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}}

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