*{margin: 0;padding: 0}
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/background.jpg') no-repeat;background-size:100% 100%;z-index: 99;}
.loading_img{position: absolute;left:28%;top:18%;width: 42%;height:30%;opacity: 0;}
.load_wave{
    position:absolute;top:50%;left:33%;width: 35.26%;height:5px;background-color: #ffcc2f;
}
.load_val{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #8569de;
}
.loading1{
    animation:fade 1.5s 0s linear infinite;
    -moz-animation:fade 1.5s 0s linear infinite;
    -webkit-animation:fade 1.5s 0s linear infinite;
    -o-animation:fade 1.5s 0s linear infinite
}
.loading2{
    animation:fade 1.5s .5s linear infinite;
    -moz-animation:fade 1.5s .5s linear infinite;
    -webkit-animation:fade 1.5s .5s linear infinite;
    -o-animation:fade 1.5s .5s linear infinite
}
.loading3{
    animation:fade 1.5s 1s linear infinite;
    -moz-animation:fade 1.5s 1s linear infinite;
    -webkit-animation:fade 1.5s 1s linear infinite;
    -o-animation:fade 1.5s 1s linear infinite
}

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

a{opacity:1}

/*音乐*/
.music_blk{z-index:999;position:fixed;bottom:35px;left:10px;display: none}
.music{width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;position: absolute}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

.bg0{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg0 .w0{position: absolute;top:2%;left:1%;background:url('../images/star.png') no-repeat 0 0;background-size:100% 100%;width: 28%;height:9%;}
.bg0 .w1{position: absolute;top:0;left:0;background:url('../images/p0.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w2{position: absolute;top:0;left:0;background:url('../images/p0.2.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w3{position: absolute;top:0;left:0;background:url('../images/p0.3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w4{position: absolute;top:0;left:0;background:url('../images/p0.4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w5{position: absolute;top:0;left:0;background:url('../images/p0.5.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w6{position: absolute;top:0;left:0;background:url('../images/p0.6.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w7{position: absolute;top:0;left:0;background:url('../images/p0.7.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w8{position: absolute;top:0;left:0;background:url('../images/p0.8.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w9{position: absolute;top:0;left:0;background:url('../images/p0.9.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .w10{position: absolute;top:0;left:0;background:url('../images/p0.10.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg0 .btn0{position: absolute;top:77%;left:31%;width: 37%;height:8%;}

.bg0.ani .w0{
    -webkit-transform-origin:top top;
    -ms-transform-origin:top top;
    transform-origin:top top;

    animation:swing 2s linear infinite;
    -moz-animation:swing 2s linear infinite;
    -webkit-animation:swing 2s linear infinite;
    -o-animation:swing 2s linear infinite
}

.bg0.ani .w1{
    -webkit-animation: 2s fadeInRight linear both;
    animation:2s fadeInRight linear both;
}
.bg0.ani .w2{
    animation:fadeInOut 3s 2.5s linear infinite;
    -moz-animation:fadeInOut 3s 2.5s linear infinite;
    -webkit-animation:fadeInOut 3s 2.5s linear infinite;
    -o-animation:fadeInOut 3s 2.5s linear infinite
}
.bg0.ani .w4{
    animation:wobble 3s 3s linear both;
    -moz-animation:wobble 3s 3s linear both;
    -webkit-animation:wobble 3s 3s linear both;
    -o-animation:wobble 3s 3s linear both
}
.bg0.ani .w3{
    animation:zoomInDown 2s 4s linear both;
    -moz-animation:zoomInDown 2s 4s linear both;
    -webkit-animation:zoomInDown 2s 4s linear both;
    -o-animation:zoomInDown 2s 4s linear both
}
.bg0.ani .w5{
    animation:fadeInOut 3s 6s linear both;
    -moz-animation:fadeInOut 3s 6s linear both;
    -webkit-animation:fadeInOut 3s 6s linear both;
    -o-animation:fadeInOut 3s 6s linear both
}
.bg0.ani .w6{
    animation:fadeInOut 3s 8s linear both;
    -moz-animation:fadeInOut 3s 8s linear both;
    -webkit-animation:fadeInOut 3s 8s linear both;
    -o-animation:fadeInOut 3s 8s linear both
}
.bg0.ani .w7{
    animation:fadeInOut 3s 11s linear both;
    -moz-animation:fadeInOut 3s 11s linear both;
    -webkit-animation:fadeInOut 3s 11s linear both;
    -o-animation:fadeInOut 3s 11s linear both
}
.bg0.ani .w8{
    animation:fadeIn 1.5s 14s linear both;
    -moz-animation:fadeIn 1.5s 14s linear both;
    -webkit-animation:fadeIn 1.5s 14s linear both;
    -o-animation:fadeIn 1.5s 14s linear both
}
.bg0.ani .w9{
    animation:fadeIn 1s 15s linear both;
    -moz-animation:fadeIn 1s 15s linear both;
    -webkit-animation:fadeIn 1s 15s linear both;
    -o-animation:fadeIn 1s 15s linear both
}
.bg0.ani .w10{
    animation:fadeInOut 3s 16s linear infinite;
    -moz-animation:fadeInOut 3s 16s linear infinite;
    -webkit-animation:fadeInOut 3s 16s linear infinite;
    -o-animation:fadeInOut 3s 16s linear infinite
}

.bg1{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg1 .w0{position: absolute;top:2%;left:1%;background:url('../images/star.png') no-repeat 0 0;background-size:100% 100%;width: 28%;height:9%;}
.bg1 .w1{position: absolute;top:0;left:0;background:url('../images/p0.4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.bg1 .w2{position: absolute;top:0;left:0;background:url('../images/p1.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg1 .w3{position: absolute;top:0;left:0;background:url('../images/p1.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}

.bg1.ani .w0{
    -webkit-transform-origin:top top;
    -ms-transform-origin:top top;
    transform-origin:top top;

    animation:swing 2s linear infinite;
    -moz-animation:swing 2s linear infinite;
    -webkit-animation:swing 2s linear infinite;
    -o-animation:swing 2s linear infinite
}
.bg1.ani .w2{
    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
}
.bg1.ani .w3{
    animation:fadeIn 2s 1.5s linear both;
    -moz-animation:fadeIn 2s 1.5s linear both;
    -webkit-animation:fadeIn 2s 1.5s linear both;
    -o-animation:fadeIn 2s 1.5s linear both
}


.bg2{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/background.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg2 .w0{position: absolute;top:2%;left:1%;background:url('../images/star.png') no-repeat 0 0;background-size:100% 100%;width: 28%;height:9%;}
/*.bg2 .w1{position: absolute;top:0;left:0;background:url('../images/p0.4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}*/
.bg2 .w2{position: absolute;top:0;left:0;background:url('../images/p2.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.bg2 .w3{position: absolute;top:0;left:0;background:url('../images/p2.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;}
.bg2 .w4{position: absolute;top:0;left:0;background:url('../images/p2.3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;}
.bg2 .w5{position: absolute;top:0;left:0;background:url('../images/p2.4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;}
.bg2 .w6{position: absolute;top:0;left:0;background:url('../images/p2.5.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;}
.btnY{position: absolute;top:76%;left:17%;width: 30%;height:7%;}
.btnN{position: absolute;top:76%;left:55%;width: 30%;height:7%;}

.bg2.ani .w0{
    -webkit-transform-origin:top top;
    -ms-transform-origin:top top;
    transform-origin:top top;

    animation:swing 2s linear infinite;
    -moz-animation:swing 2s linear infinite;
    -webkit-animation:swing 2s linear infinite;
    -o-animation:swing 2s linear infinite
}
.video_div{width: 100%;height: 100%;position: absolute;top:0;left:0;display: none}
#video1_1{object-fit: fill}
.video_mask{
    position: absolute;top:0;left:0;z-index:40;
    background:url('../images/p3.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;
}

.bg3{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: relative;top:0;left:0;background:url("../images/background.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg3 .w0{position: absolute;top:0;left:0;background:url('../images/p0.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.bg3 .w1{position: absolute;top:0;left:0;background:url('../images/p0.4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.bg3 .w2{position: absolute;top:0;left:0;background:url('../images/p4.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.bg3 .w3{position: absolute;top:0;left:0;width: 100%;height:100%;opacity: 0;}
.bg3 .w4{position: absolute;top:0;left:0;background:url('../images/p4.3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.bg3 .btn0{position: absolute;top:66%;left:17%;width: 66%;height:9%;}

.bg3.ani {
    animation:fadeIn 1s linear both;
    -moz-animation:fadeIn 1s linear both;
    -webkit-animation:fadeIn 1s linear both;
    -o-animation:fadeIn 1s linear both
}
.bg3.ani .w3{
    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
}

.bg4{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0;background:url("../images/p5.jpg") no-repeat 0 0;background-size:100% 100%;}
.bg4 .w0{position: absolute;top:0;left:0;background:url('../images/p5.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;}
.bg4 .w1{position: absolute;top:0;left:0;background:url('../images/p5.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;opacity: 0;}
.bg4 .w2{position: absolute;top:0;left:0;background:url('../images/p5.3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;}
.bg4 .btn0{position: absolute;top:58%;left:21%;width: 56%;height:8%;}
.bg4 .btn1{position: absolute;top:68%;left:14%;width: 33%;height:7%;}
.bg4 .btn2{position: absolute;top:68%;left:52%;width: 33%;height:7%;}

/*.bg4.ani .w0{
    animation:fadeInUp 1s .5s linear both;
    -moz-animation:fadeInUp 1s .5s linear both;
    -webkit-animation:fadeInUp 1s .5s linear both;
    -o-animation:fadeInUp 1s .5s linear both
}*/
.bg4.ani .w1{
    animation:fadeIn 2s 1s linear both;
    -moz-animation:fadeIn 2s 1s linear both;
    -webkit-animation:fadeIn 2s 1s linear both;
    -o-animation:fadeIn 2s 1s linear both
}

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

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