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

.loading{position:absolute;width:100%;height:100%;background:url('../images/p4.jpg') no-repeat;background-size:100% 100%;z-index: 99;}
.load_wave{border: 2px solid;border-radius: 25px;-moz-border-radius: 25px;position: absolute;top: 36%;left: 30%;width: 40%;height: 8px;}
.load_val{position:absolute;top:0;left:0;width: 0;height:100%;background-color: #20304c;}
.loading_img{position: absolute;width: 72%;height: 44.6%;top: 18%;left: 14%;}

/*音乐*/
.music_blk{z-index:999;position:fixed;top:4%;right:18%;display: none}
.music{width:50px;height:50px;background:url('../images/bgm.png') 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);
    }
}

.bg0{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p2.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg0 .w4{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p1.5.png);background-repeat: no-repeat;background-size: 100% 100%;}
.bg0 .w5{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p1.png);background-repeat: no-repeat;background-size: 100% 100%;}
.bg0 .w0{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p1.1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;}
.bg0 .w1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p1.2.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;}
.bg0 .w2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p1.3.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;}
.bg0 .w3{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p1.4.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;}
.bg0 .btn0{position: absolute;width: 25%;height: 13%;top: 13%;left: 37%;}

.bg0.ani .w0{
    animation:fadeIn 1.5s .5s ease both;
    -moz-animation:fadeIn 1.5s .5s ease both;
    -webkit-animation:fadeIn 1.5s .5s ease both;
    -o-animation:fadeIn 1.5s .5s ease both
}
.bg0.ani .w1{
    animation:fadeIn 1.5s 1.5s ease both;
    -moz-animation:fadeIn 1.5s 1.5s ease both;
    -webkit-animation:fadeIn 1.5s 1.5s ease both;
    -o-animation:fadeIn 1.5s 1.5s ease both
}
.bg0.ani .w2{
    animation:fadeIn 1.5s 2.5s ease both;
    -moz-animation:fadeIn 1.5s 2.5s ease both;
    -webkit-animation:fadeIn 1.5s 2.5s ease both;
    -o-animation:fadeIn 1.5s 2.5s ease both
}
.bg0.ani .w3{
    animation:fade 1.8s 4s ease infinite;
    -moz-animation:fade 1.8s 4s ease infinite;
    -webkit-animation:fade 1.8s 4s ease infinite;
    -o-animation:fade 1.8s 4s ease infinite
}

.bg1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p2.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg1 .w0{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p2.1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;}
.bg1 .btn0{position: absolute;width: 25%;height: 13%;top: 17%;left: 37%;}

.bg1.ani .w0{
    animation:fade 1.8s .5s ease infinite;
    -moz-animation:fade 1.8s .5s ease infinite;
    -webkit-animation:fade 1.8s .5s ease infinite;
    -o-animation:fade 1.8s .5s ease infinite
}

.bg2{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p3.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg2 .w0{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p3.1.png);background-repeat: no-repeat;background-size: 100% 100%;will-change: transform;}
.bg2 .w1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p3.2.png);background-repeat: no-repeat;background-size: 100% 100%;will-change: transform;}
.bg2 .w2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p3.3.png);background-repeat: no-repeat;background-size: 100% 100%;will-change: transform;}
.bg2 .w3{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p3.4.png);background-repeat: no-repeat;background-size: 100% 100%;will-change: transform;}
.bg2 .w4{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p3.5.png);background-repeat: no-repeat;background-size: 100% 100%;will-change: transform;}
.bg2 .w5{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p3.6.png);background-repeat: no-repeat;background-size: 100% 100%;}

.bg2.ani .w0{
    animation:scale 1.5s .5s ease-in both;
    -moz-animation:scale 1.5s .5s ease-in both;
    -webkit-animation:scale 1.5s .5s ease-in both;
    -o-animation:scale 1.5s .5s ease-in both
}
.bg2.ani .w1{
    animation:scale 2.5s .5s ease-in both;
    -moz-animation:scale 2.5s .5s ease-in both;
    -webkit-animation:scale 2.5s .5s ease-in both;
    -o-animation:scale 2.5s .5s ease-in both
}
.bg2.ani .w2{
    animation:scale 3.5s .5s ease-in both;
    -moz-animation:scale 3.5s .5s ease-in both;
    -webkit-animation:scale 3.5s .5s ease-in both;
    -o-animation:scale 3.5s .5s ease-in both
}
.bg2.ani .w3{
    animation:scale 4.5s .5s ease-in both;
    -moz-animation:scale 4.5s .5s ease-in both;
    -webkit-animation:scale 4.5s .5s ease-in both;
    -o-animation:scale 4.5s .5s ease-in both
}
.bg2.ani .w4{
    animation:scale 5.5s .5s ease-in both;
    -moz-animation:scale 5.5s .5s ease-in both;
    -webkit-animation:scale 5.5s .5s ease-in both;
    -o-animation:scale 5.5s .5s ease-in both
}

.bg3{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p4.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg3 .w0{position: absolute;width: 36.7%;height: 66.3%;top: 16%;left: 11%;background-image: url(../images/p4.1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;}
.bg3 .w1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p4.2.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg3 .t1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p4.t1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg3 .t2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p4.t2.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg3 .t3{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p4.t3.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg3 .tf1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p4.tf1.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg3 .tf2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p4.tf2.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg3 .tf3{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p4.tf3.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg3 .w2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/btnNext.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg3 .btn1{position: absolute;width: 34%;height: 19%;top: 16%;left: 50%;}
.bg3 .btn2{position: absolute;width: 34%;height: 19%;top: 37.5%;left: 50%;}
.bg3 .btn3{position: absolute;width: 34%;height: 19%;top: 59%;left: 50%;}
.bg3 .btnNext{position: absolute;width: 28%;height: 7%;top: 83%;left: 36%;}

.bg3.ani .w0{
    animation:fadeInLeft 1.5s .5s ease both;
    -moz-animation:fadeInLeft 1.5s .5s ease both;
    -webkit-animation:fadeInLeft 1.5s .5s ease both;
    -o-animation:fadeInLeft 1.5s .5s ease both
}
.bg3.ani2 .w0{
    animation:fadeOutRight 1.5s .5s ease both;
    -moz-animation:fadeOutRight 1.5s .5s ease both;
    -webkit-animation:fadeOutRight 1.5s .5s ease both;
    -o-animation:fadeOutRight 1.5s .5s ease both
}

.bg4{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p4.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg4 .w0{position: absolute;width: 36.7%;height: 66.3%;top: 16%;left: 11%;background-image: url(../images/p4.1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;}
.bg4 .w1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p5.2.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg4 .t1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p5.t1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg4 .t2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p5.t2.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg4 .t3{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p5.t3.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg4 .tf1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p5.tf1.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg4 .tf2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p5.tf2.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg4 .tf3{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p5.tf3.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg4 .w2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/btnNext.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg4 .btn1{position: absolute;width: 34%;height: 19%;top: 16%;left: 50%;}
.bg4 .btn2{position: absolute;width: 34%;height: 19%;top: 37.5%;left: 50%;}
.bg4 .btn3{position: absolute;width: 34%;height: 19%;top: 59%;left: 50%;}
.bg4 .btnNext{position: absolute;width: 28%;height: 7%;top: 83%;left: 36%;}

.bg4.ani .w0{
    animation:fadeInLeft 1.5s .5s ease both;
    -moz-animation:fadeInLeft 1.5s .5s ease both;
    -webkit-animation:fadeInLeft 1.5s .5s ease both;
    -o-animation:fadeInLeft 1.5s .5s ease both
}
.bg4.ani2 .w0{
    animation:fadeOutRight 1.5s .5s ease both;
    -moz-animation:fadeOutRight 1.5s .5s ease both;
    -webkit-animation:fadeOutRight 1.5s .5s ease both;
    -o-animation:fadeOutRight 1.5s .5s ease both
}

.bg5{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p4.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg5 .w0{position: absolute;width: 36.7%;height: 66.3%;top: 16%;left: 11%;background-image: url(../images/p4.1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 0;}
.bg5 .w1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p6.2.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg5 .t1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p6.t1.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg5 .t2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p6.t2.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg5 .t3{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p6.t3.png);background-repeat: no-repeat;background-size: 100% 100%;opacity: 1;}
.bg5 .tf1{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p6.tf1.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg5 .tf2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p6.tf2.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg5 .tf3{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/p6.tf3.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg5 .w2{position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;background-image: url(../images/btnFin.png);background-repeat: no-repeat;background-size: 100% 100%;display: none;}
.bg5 .btn1{position: absolute;width: 34%;height: 19%;top: 16%;left: 50%;}
.bg5 .btn2{position: absolute;width: 34%;height: 19%;top: 37.5%;left: 50%;}
.bg5 .btn3{position: absolute;width: 34%;height: 19%;top: 59%;left: 50%;}
.bg5 .btnNext{position: absolute;width: 28%;height: 7%;top: 83%;left: 36%;}

.bg5.ani .w0{
    animation:fadeInLeft 1.5s .5s ease both;
    -moz-animation:fadeInLeft 1.5s .5s ease both;
    -webkit-animation:fadeInLeft 1.5s .5s ease both;
    -o-animation:fadeInLeft 1.5s .5s ease both
}
.bg5.ani2 .w0{
    animation:fadeOutRight 1.5s .5s ease both;
    -moz-animation:fadeOutRight 1.5s .5s ease both;
    -webkit-animation:fadeOutRight 1.5s .5s ease both;
    -o-animation:fadeOutRight 1.5s .5s ease both
}

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


@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;}}

@keyframes fadeOutRight
{0%{opacity:1;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform:translate3d(250%,0,0);transform:translate3d(250%,0,0)}}
@-moz-keyframes fadeOutRight /* Firefox */
{0%{opacity:1;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform:translate3d(250%,0,0);transform:translate3d(250%,0,0)}}
@-webkit-keyframes fadeOutRight /* Safari 和 Chrome */
{}0%{opacity:1;-webkit-transform:none;transform:none}100%{opacity:1;-webkit-transform:translate3d(250%,0,0);transform:translate3d(250%,0,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 swing {
    20% {
    -webkit-transform:rotate(15deg);
    transform:rotate(15deg)
}
40% {
    -webkit-transform:rotate(-10deg);
    transform:rotate(-10deg)
}
60% {
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg)
}
80% {
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg)
}
100% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg)
}
}
@keyframes swing {
    20% {
    -webkit-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    transform:rotate(15deg)
}
40% {
    -webkit-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    transform:rotate(-10deg)
}
60% {
    -webkit-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
    transform:rotate(5deg)
}
80% {
    -webkit-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    transform:rotate(-5deg)
}
100% {
    -webkit-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg)
}
}

@-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 scale{
    0%{
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
    99%{
        transform: scale(4);
        -webkit-transform: scale(4);
        opacity: 1;
    }
    100%{
        transform: scale(4);
        -webkit-transform: scale(4);
        opacity: 0;
    }
}
@-webkit-keyframes scale{
    0%{
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
    99%{
        transform: scale(4);
        -webkit-transform: scale(4);
        opacity: 1;
    }
    100%{
        transform: scale(4);
        -webkit-transform: scale(4);
        opacity: 0;
    }
}