.fx {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.ac {
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}
.jsb {
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}
img {
  width: 100%;
  display: block;
}
.abso {
  position: absolute;
}
.target.fadeIn,
.target .fadeIn {
  transform: translate3d(0, 60px, 0);
  opacity: 0;
  visibility: hidden;
}
.target.action.fadeIn {
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s, opacity 0.5s cubic-bezier(0.445, 0.145, 0.355, 1);
  -webkit-transition: transform 0.6s, opacity 0.5s cubic-bezier(0.445, 0.145, 0.355, 1);
  will-change: opacity, transform;
  opacity: 1;
  visibility: visible;
}
.top .back,
.top .gp {
  transform: translate(0, -30px);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.top.show .back,
.top.show .gp {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}
.back {
  top: 4.5%;
  left: 2.3%;
  width: 9.5%;
  cursor: pointer;
  z-index: 99;
}
.gp {
  right: 2%;
  top: 2.7%;
  width: 8.4%;
  cursor: pointer;
  z-index: 99;
}
.main {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.main.active .tit,
.main.active .conte-bots {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}
.main.active .conte-bots {
  transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
}
.main .bg-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.main .bg-img img {
  height: 100%;
  object-fit: cover;
}
.content .tit,
.content .conte-bots {
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
  opacity: 0;
  transition: transform 0.6s, opacity 0.5s cubic-bezier(0.445, 0.145, 0.355, 1);
  -webkit-transition: transform 0.6s, opacity 0.5s cubic-bezier(0.445, 0.145, 0.355, 1);
  transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
}
.canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.pyro {
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
}
.sub-navs {
  top: 6.1%;
  left: 50%;
  transform: translateX(-50%);
}
.nav-2 .sub-nav {
  width: 12.2vw;
  margin-right: 3.5vw;
}
.sub-nav {
  position: relative;
  width: 9.7vw;
  margin-right: 1.8vw;
  cursor: pointer;
}
.sub-nav:last-of-type {
  margin-right: 0;
}
.sub-nav .subNav2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.sub-nav:hover .subNav2 {
  opacity: 1;
  visibility: visible;
}
.sub-nav.active .subNav2 {
  opacity: 1;
  visibility: visible;
}
.content .sub-tits {
  left: 14.5%;
  bottom: -4.1%;
  width: 63.1%;
}
.sub-tit {
  display: none;
}
.sub-tit.cur {
  display: block;
}
.wz-item {
  width: 27.4vw;
  margin: 0 auto;
}
.lb-box {
  position: relative;
  width: 26.2vw;
  margin: 0 auto;
}
.lb-box .swi-btn {
  top: 50%;
  transform: translateY(-50%);
  width: 8%;
  cursor: pointer;
}
.lb-box .swi-prev {
  left: -11.1%;
}
.lb-box .swi-next {
  right: -11.1%;
}
.lb-swiper .swiper-slide {
  border-radius: clamp(5px, 0.8vw, 15px);
  overflow: hidden;
  border: clamp(1px, 0.2vw, 3px) solid #ffffff;
  box-sizing: border-box;
}
.main1 .logo {
  z-index: 99;
}
.main1 .logo1 {
  left: 1.8%;
  top: 3.1%;
  width: 7.7%;
}
.main1 .bg2 {
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  animation: bg 0.45s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.main1 .logo2 {
  top: 2%;
  right: 4.8%;
  display: inline-block;
  width: 16.1%;
}
.main1 .thing1 {
  right: 18.1%;
  bottom: 10.8%;
  width: 14.6%;
  animation: move1 6s ease-in-out infinite;
}
.main1 .thing2 {
  right: 0;
  bottom: 0;
  width: 6.6%;
  animation: move5 1.5s ease-in-out alternate infinite;
}
.main1 .thing3 {
  left: -3%;
  bottom: 7.5%;
  width: 14.7%;
  animation: move3 5s infinite;
}
.main1 .thing4 {
  left: 41%;
  bottom: 0;
  width: 6.3%;
  animation: move4 2s ease-in-out alternate infinite;
}
.main1 .thing5 {
  top: 12.2%;
  left: -2.1%;
  width: 6.9%;
  animation: move6 2s ease-in-out alternate infinite;
}
.main1 .thing6 {
  left: 33%;
  top: -4.4%;
  width: 6.2%;
  animation: move2 1.5s ease-in-out alternate infinite;
}
.main1 .thing7 {
  right: 6.8%;
  top: 39.3%;
  width: 15.1%;
  animation: move5 1.3s ease-in-out alternate infinite;
}
.main1 .tit {
  left: 6.8%;
  top: 9.5%;
  width: 40.5%;
  -webkit-animation: bounce 2s ease-in-out infinite;
  animation: bounce 2s ease-in-out infinite;
}
.main1 .nav {
  right: 4.8%;
  bottom: 1.8%;
  width: 34.1%;
}
.main1 .nav-item {
  width: 28.7%;
  transform-origin: center;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.main1 .nav-item:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.main2 .bg2 {
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  animation: bg 0.45s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.main2 .thing1 {
  left: 9.5%;
  bottom: 5.7%;
  width: 10.3%;
  animation: move6 1s ease-in-out alternate infinite;
}
.main2 .thing2 {
  left: 21.6%;
  bottom: 1.6%;
  width: 26.2%;
  animation: move5 1s ease-in-out alternate infinite;
}
.main2 .thing3 {
  left: 49.6%;
  bottom: 8.8%;
  width: 9.7%;
  animation: move6 1.2s ease-in-out 0.1s alternate infinite;
}
.main2 .thing4 {
  top: 10.7%;
  left: 14.9%;
  width: 13.9%;
  animation: move5 1.3s ease-in-out alternate infinite;
}
.main2 .thing5 {
  left: -2.7%;
  top: 33.6%;
  width: 6.9%;
  animation: move6 2s ease-in-out alternate infinite;
}
.main2 .thing6 {
  left: 2.3%;
  bottom: -10.1%;
  width: 14.7%;
  animation: move5 1.3s ease-in-out alternate infinite;
}
.main2 .thing7 {
  right: -5.5%;
  top: 53.4%;
  width: 14.6%;
  animation: move7 6s ease-in-out infinite;
}
.main2 .thing8 {
  left: 43.5%;
  bottom: 8.4%;
  width: 4.1%;
  animation: move9 0.5s ease-in-out alternate infinite;
}
.main2 .thing9 {
  left: 54.4%;
  bottom: -2.2%;
  width: 6.9%;
  animation: move8 0.8s ease-in-out alternate infinite;
}
.main2 .thing10 {
  right: -2.3%;
  bottom: -10.4%;
  width: 11.5%;
  animation: move10 0.6s ease-in-out alternate infinite;
}
.main2 .tit {
  top: 14.7%;
  right: 9.4%;
  width: 27%;
}
.main2 .conte-bots {
  right: 10.4%;
  top: 54.7%;
}
.main3 .thing1 {
  right: -2%;
  bottom: -2.7%;
  width: 19.4%;
  animation: move4 1.5s ease-in-out alternate infinite;
}
.main3 .thing2 {
  top: 33.1%;
  right: 1.5%;
  width: 16.7%;
  animation: move11 2s ease-in-out alternate infinite;
}
.main3 .thing3 {
  top: 1.5%;
  left: 13.4%;
  width: 35.2%;
  animation: move5 1.3s ease-in-out alternate infinite;
}
.main3 .thing4 {
  left: -1.8%;
  bottom: -2.7%;
  width: 21.6%;
  animation: move5 2s ease-in-out alternate infinite;
}
.main3 .thing5 {
  left: 28.1%;
  top: 32.8%;
  width: 16.5%;
  animation: move12 1.4s ease-in-out 0.2s alternate infinite;
}
.main3 .thing6 {
  left: 0.1%;
  top: 30%;
  width: 10.6%;
  animation: move10 1.4s ease-in-out alternate infinite;
}
.main3 .thing7 {
  left: 11.8%;
  top: 28%;
  width: 17.7%;
  animation: move9 2s ease-in-out 0.2s alternate infinite;
}
.main3 .tit {
  top: 12.7%;
  right: 19.6%;
  width: 27%;
}
.main3 .conte-bots {
  right: 20.6%;
  top: 52.7%;
}
.main4 .thing1 {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
.main4 .thing2 {
  left: 11%;
  bottom: 6.2%;
  width: 21.3%;
  animation: raftFloat 1.2s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
.main4 .thing3 {
  right: 10.3%;
  bottom: 1.5%;
  width: 16.5%;
  animation: move10 1s ease-in-out alternate infinite;
}
.main4 .thing4 {
  left: -2.5%;
  bottom: -5%;
  width: 13.9%;
  animation: move13 1.5s ease-in-out alternate infinite;
}
.main4 .thing5 {
  left: 66.7%;
  bottom: -3.2%;
  width: 8.2%;
  animation: move11 1s ease-in-out alternate infinite;
}
.main4 .thing6 {
  right: 0;
  bottom: 0;
  width: 91.6%;
  animation: move5 1.5s ease-in-out alternate infinite;
}
.main4 .thing7 {
  left: -4%;
  bottom: -6.1%;
  width: 14.7%;
  animation: move14 5s infinite;
}
.main4 .tit {
  top: 13.2%;
  left: 37.2%;
  right: auto;
  width: 27%;
}
.main4 .conte-bots {
  left: 37%;
  right: auto;
  top: 52.8%;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 47, 47, 0.91);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 9;
}
.mask.active {
  opacity: 1;
  visibility: visible;
}
.mask .mvbot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.mask .ewm {
  width: 20vw;
}
.mask .closed {
  position: absolute;
  right: -20%;
  top: -10%;
  width: 2.9vw;
  transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  -webkit-transition: 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  cursor: pointer;
}
.mask .closed:hover {
  transform: rotate(360deg);
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 60px, 0);
    transform: translate3d(0, 60px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 60px, 0);
    transform: translate3d(0, 60px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes raftFloat {
  0% {
    transform: rotate(2deg) translate(4px, -2px);
  }
  100% {
    transform: rotate(-2deg) translate(-5px);
  }
}
@keyframes move1 {
  0% {
    right: 18.1%;
    bottom: 10.8%;
    transform: translate(0, 0);
    opacity: 0;
  }
  1% {
    right: 18.1%;
    opacity: 1;
    transform: translate(0, 0);
  }
  75% {
    opacity: 0.8;
    transform: translate(0, 30%) rotate(-30deg);
  }
  100% {
    right: 14.1%;
    bottom: 0;
    transform: translate(0, 100%) rotate(-45deg);
    opacity: 0;
  }
}
@keyframes move2 {
  to {
    transform: translate(20px, -20px);
  }
}
@keyframes move3 {
  0% {
    left: -3%;
    opacity: 1;
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    left: 10%;
    bottom: -30%;
    opacity: 0;
  }
}
@keyframes move4 {
  to {
    transform: translate(-30px, 30px);
  }
}
@keyframes move5 {
  to {
    transform: translate(30px, 0);
  }
}
@keyframes move6 {
  to {
    transform: translate(30px, 30px);
  }
}
@keyframes move7 {
  0% {
    right: -5.5%;
    top: 53.4%;
    opacity: 0;
  }
  1% {
    right: -5.5%;
    opacity: 1;
  }
  75% {
    opacity: 0.8;
    transform: rotate(-30deg);
  }
  100% {
    right: -0.5%;
    top: 100%;
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes move8 {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: rotate(-5deg);
    transform: scale(1);
  }
}
@keyframes move9 {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: rotate(-5deg);
    transform: scale(1);
  }
}
@keyframes move10 {
  to {
    transform: translate(0, 30px);
  }
}
@keyframes move11 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: translate(0, 30px);
    transform: scale(1);
  }
}
@keyframes move12 {
  to {
    transform: translate(-40px, 0);
    opacity: 0;
  }
}
@keyframes move13 {
  to {
    transform: translate(0, -30px);
  }
}
@keyframes move14 {
  0% {
    left: -4%;
    opacity: 1;
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    left: 10%;
    bottom: -30%;
    opacity: 0;
  }
}