@charset "UTF-8";
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul,a {margin: 0;padding: 0;font-family: "microsoft yahei";}
body,button,input,select,textarea {font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;}
ol,ul {list-style: none;}
a {text-decoration: none;}
fieldset,img {border: 0;}
button,input,select,textarea {font-size: 100%;}
table {border-collapse: collapse;border-spacing: 0;}

/*-----move1-----*/
@-webkit-keyframes move1 {
  0% {transform: translatex(0) translatey(0);}
  50% {transform: translatex(50px) translatey(25px);}
  0% {transform: translatex(0) translatey(0);}
}

@-o-keyframes move1 {
  0% {transform: translatex(0) translatey(0);}
  50% {transform: translatex(50px) translatey(25px);}
  100% {transform: translatex(0) translatey(0);}
}

@-moz-keyframes move1 {
  0% {transform: translatex(0) translatey(0);}
  50% {transform: translatex(50px) translatey(25px);}
  100% {transform: translatex(0) translatey(0);}
}

@keyframes move1 {
  0% {transform: translatex(0) translatey(0);}
  50% {transform: translatex(50px) translatey(25px);}
  100% {transform: translatex(0) translatey(0);}
}

/*-----move2-----*/
@-webkit-keyframes move2 {
  from {transform: translate(10px, 0);}
  to {transform: translate(0, 10px);}
}

@-o-keyframes move2 {
  from {transform: translate(50px, 0);}
  to {transform: translate(0, 50px);}
}

@-moz-keyframes move2 {
  from {transform: translate(50px, 0);}
  to {transform: translate(0, 50px);}
}

@keyframes move2 {
  from {transform: translate(50px, 0);}
  to {transform: translate(0, 50px);}
}

/*-----move3-----*/
@-webkit-keyframes move3 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(50px, 0);}
  100% {transform: translate(0, 0);}
}

@-o-keyframes move3 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(50px, 0);}
  100% {transform: translate(0, 0);}
}

@-moz-keyframes move3 {
  0% {
    transform: translate(0, 0);}
  50% {
    transform: translate(50px, 0);}
  100% {
    transform: translate(0, 0);}
}

@keyframes move3 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(50px, 0);}
  100% {transform: translate(0, 0);}
}

/*-----move4-----*/
@-webkit-keyframes move4 {
  0% {transform: translate(20px, 0);}
  50% {transform: translate(50px, 0);}
  100% {transform: translate(20px, 0);}
}

@-o-keyframes move4 {
  0% {transform: translate(20px, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(20px, 0);}
}

@-moz-keyframes move4 {
  0% {transform: translate(20px, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(20px, 0);}
}

@keyframes move4 {
  0% {transform: translate(20px, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(20px, 0);}
}

/*-----move5-----*/
@-webkit-keyframes move5 {
  0% {transform: translate(20px, 0);}
  50% {transform: translate(50px, 0);}
  100% {transform: translate(20px, 0);}
}

@-o-keyframes move5 {
  0% {transform: translate(20px, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(20px, 0);}
}

@-moz-keyframes move5 {
  0% {transform: translate(20px, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(20px, 0);}
}

@keyframes move5 {
  0% {transform: translate(20px, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(20px, 0);}
}

/*-----第五框 move6-----*/
@-webkit-keyframes move6 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(0, 0);}
}

@-o-keyframes move6 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(0, 0);}
}

@-moz-keyframes move6 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(0, 0);}
}

@keyframes move6 {
  0% {transform: translate(0, 0);}
  50% {transform: translate(0, 20px);}
  100% {transform: translate(0, 0);}
}

/*-----第五框 move7-----*/
@-webkit-keyframes move7 {
  0% {transform: translate(0, 20px);}
  50% {transform: translate(0, 0);}
  100% {transform: translate(0, 20px);}
}

@-o-keyframes move7 {
  0% {transform: translate(0, 20px);}
  50% {transform: translate(0, 0);}
  100% {transform: translate(0, 20px);}
}

@-moz-keyframes move7 {
  0% {transform: translate(0, 20px);}
  50% {transform: translate(0, 0);}
  100% {transform: translate(0, 20px);}
}

@keyframes move7 {
  0% {transform: translate(0, 20px);}
  50% {transform: translate(0, 0);}
  100% {transform: translate(0, 20px);}
}

.bg-move {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;z-index: 1;height: 100%;overflow: hidden;}
.bg-move .move1 {border-radius: 8px;width: 100px;height: 150px;position: absolute;right: 50%;top: 0px;background: #fff9f5;animation: move1 6s linear infinite;}
.bg-move .move2 {border-radius: 8px;width: 50px;height: 50px;position: absolute;right: 20%;top: 280px;background: #ffb270;animation: move2 6s infinite alternate;}
.bg-move .move3 {border-radius: 8px;width: 60px;height: 60px;position: absolute;right: 120px;top: 120px;background: #fff8f1;animation: move3 11s linear infinite;}
.bg-move .move4 {border-radius: 8px;width: 70px;height: 70px;position: absolute;right: 20px;top: 80px;background: #ffe7e2;animation: move4 7s linear infinite alternate;}
.bg-move .move5 {border-radius: 8px;width: 70px;height: 70px;position: absolute;right: 120px;bottom: 150px;background: #ffd6b7;animation: move5 9s linear infinite alternate;}
.bg-move .move6 {border-radius: 8px;width: 80px;height: 80px;position: absolute;right: 0;bottom: 230px;background: #fff5f5;animation: move3 6s linear infinite alternate;}
.bg-move .move7 {border-radius: 8px;width: 160px;height: 80px;position: absolute;right: 48%;bottom: 0;background: #fff9f5;animation: move4 7s linear infinite alternate;}
.bg-move .move8 {border-radius: 8px;width: 45px;height: 45px;position: absolute;left: 20%;bottom: 100px;background: #fff5f0;animation: move4 8s linear infinite alternate;}
.bg-move .move9 {border-radius: 8px;width: 70px;height: 70px;position: absolute;left: -30px;bottom: 200px;background: #ff9f70;animation: move1 11s linear infinite alternate;}
.bg-move .move10 {border-radius: 8px;width: 50px;height: 50px;position: absolute;left: 130px;top: 40%;background: #fe9494;animation: move3 9s linear infinite alternate;}
.bg-move .move11 {border-radius: 8px;width: 45px;height: 45px;position: absolute;left: 80px;top: 150px;background: #ffe6d8;animation: move2 10s linear infinite alternate;}
.bg-move .move12 {border-radius: 8px;width: 45px;height: 45px;position: absolute;left: 60px;top: 80px;background: #fff6f5;animation: move1 7s linear infinite alternate;}

.background-animation {position: absolute;z-index: 1;top: 0;left: 0;width: 70%;height: 100%; }
.background-animation .star-ani {position: absolute;border-radius: 50%;width: 300px;height: 300px;top: 15%;left: 45%;z-index: -1;animation: rotateAnimation linear 39s infinite; }
.background-animation .star-ani::after{position: absolute;content: "✩";top: 10%;left: 10%;z-index: -1;border-radius: 50%;color: rgba(245,77,77,.2);font-size: 40px;}
.background-animation .triangle-ani {position: absolute;border-radius: 50%;width: 300px;height: 300px;top: 70%;left: 120%;z-index: -1;animation: rotateAnimation linear 39s infinite; }
.background-animation .triangle-ani::after{position: absolute;content: "△";top: 10%;left: 10%;z-index: -1;border-radius: 50%;color: rgba(245,77,77,.2);font-size: 60px;}
.background-animation .circle-ani {position: absolute;border-radius: 50%;animation: rotateAnimation linear 34s infinite;width: 180px;height: 180px;left: 10%;top: 10%;z-index: -1; }
.background-animation .circle-ani::after {width: 20px;height: 20px;position: absolute;content: "";top: 10%;left: 10%;border: 3px solid rgba(245,77,77,.2);z-index: -1;border-radius: 50%;}
.background-animation .box-ani {position: absolute;border-radius: 50%;animation: rotateAnimation linear 37s infinite;width: 15%;height: 18%;left: 7%;top: 70%;z-index: -1; }
.background-animation .box-ani::after {width: 26px;height: 26px;position: absolute;content: "";z-index: -1;background-color: rgba(245,77,77,.1);border-radius: 4px;border: 3px solid rgba(245,77,77,.2);}
@-webkit-keyframes rotateAnimation{
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes rotateAnimation{
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}


.waves {position:absolute;bottom: 0;left: 0;right: 0;width: 100%;height:20vh;margin-bottom:0px;min-height:150px;max-height:200px;}
.parallax > use {animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.parallax > use:nth-child(1) {animation-delay: -2s;animation-duration: 7s;}
.parallax > use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;}
.parallax > use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;}
.parallax > use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;}
@keyframes move-forever {
  0% {transform: translate3d(-90px,0,0);}
  100% {transform: translate3d(85px,0,0);}
}

/*.img {opacity: 0;-webkit-transition: all 0.5s linear;transition: all 0.5s linear;}*/

.landing-circle{position:absolute;top: 0;bottom: 0;width: 100%;z-index: 1;}
.landing-circle1 img{position:absolute;bottom: 12%;left: 50px;width: 200px;animation:movebounce 2.8s linear infinite}
.landing-circle2 img{position:absolute;top: 13%;right: 60px;width: 200px;animation:rotateme 50s linear infinite}
@keyframes rotateme {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@keyframes movebounce{
  0%{transform:translateY(0)}
  50%{transform:translateY(20px)}
  to{transform:translateY(0)}
}


@media (max-width: 991px){
.bg-move .move1 {width: 60px;height: 100px;right: 50%;top: 0px;}
.bg-move .move2 {width: 30px;height: 30px;right: 10%;top: 40%;}
.bg-move .move3 {width: 30px;height: 30px;right: 10%;top: 20%;}
.bg-move .move4 {width: 40px;height: 40px;right: 6%;top: 12%;}
.bg-move .move5 {width: 40px;height: 40px;right: 10%;bottom: 3%;}
.bg-move .move6 {width: 50px;height: 50px;right: 0;bottom: 23%;}
.bg-move .move7 {width: 100px;height: 40px;right: 40%;bottom: 0;}
.bg-move .move8 {width: 25px;height: 25px;left: 2%;bottom: 20%;}
.bg-move .move9 {width: 40px;height: 40px;left: -6%;bottom: 35%;}
.bg-move .move10 {width: 30px;height: 30px;left: 3%;top: 45%;}
.bg-move .move11 {width: 25px;height: 25px;left: 3%;top: 25%;}
.bg-move .move12 {width: 25px;height: 25px;left: 6%;top: 15%;}

.background-animation .star-ani {;width: 180px;height: 180px;}
.background-animation .triangle-ani {width: 180px;height: 180px;top: 70%;left: 100%;}

.landing-circle1 img{position:absolute;bottom: 8%;left: 20px;width: 100px;}
.landing-circle2 img{position:absolute;top: 13%;right: 20px;width: 100px;}
}