@font-face {
  font-family: 'Minecraft';
  src: url("../fonts/minecraft.otf");
}

.fill-width {
  min-width: 102%;
  min-height: 102%;
  width: 102%;
  height: 102%;
  object-fit: cover;
  position: absolute;
  top: 51%;
  left: 51%;
  transform: translate(-51%, -51%);
}

html,
body {
  padding: 0;
  margin: 0;
  font-size: 1vw;
  font-family: 'Poppins', 'sans serif';
  color: white;
  min-height: 100vh;
  background: white;
  background-size: cover;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42vw;
}

.cta .success {
  position: absolute;
  font-family: Karla;
  font-size: 0.78vw;
  color: #22A8F7;
  font-weight: 400;
  left: 0;
  top: -1.5vw;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.cta .success.active {
  opacity: 1;
}

.cta .btn {
  position: relative;
  display: flex;
  padding: 0.83vw 1.25vw;
  align-items: center;
  gap: 0.42vw;
  border-radius: 1.04vw;
  background: #22A8F7;
  color: #212233;
  font-family: Poppins;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 600;
  line-height: 155%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta .btn svg {
  width: 1.04vw;
  height: 1.04vw;
}

.cta .btn svg path {
  transition: all 0.3s ease;
}

.cta .btn:hover {
  background: #7AD7FF;
}

.cta .btn:hover svg path:nth-child(1) {
  transform: translate(0.05vw, -0.05vw);
}

.cta .btn:hover svg path:nth-child(2) {
  transform: translate(-0.05vw, 0.05vw);
}

.cta .sml {
  color: #71778C;
  font-family: Karla;
  font-size: 0.78vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 1.17vw */
  letter-spacing: -0.01vw;
}

.cta .sml span {
  color: #A5A7BD;
  text-decoration-line: underline;
  cursor: pointer;
}

section.hero {
  background: #101118;
  position: relative;
  height: 50.78vw;
  overflow: hidden;
}

section.hero article {
  padding: 6.46vw 12.50vw;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.33vw;
  width: 36.88vw;
}

section.hero article .logo {
  font-size: 1.67vw;
  font-weight: 700;
  line-height: 160%;
}

section.hero article h1 {
  color: white;
  font-size: 5vw;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

section.hero article h1 span.mi {
  font-family: Poppins;
  font-size: 5vw;
  font-weight: 500;
  letter-spacing: -0.15vw;
}

section.hero article h1 span.ea {
  font-family: Minecraft;
  font-size: 4.9vw;
  font-weight: 400;
  letter-spacing: -0.35vw;
}
 
section.hero article h1 span.s {
  font-family: Poppins;
  font-size: 5vw;
  font-weight: 500;
  letter-spacing: 0.15vw;
}

section.hero article h1 span.eb {
  font-family: Minecraft;
  font-size: 4.9vw;
  font-weight: 400;
  letter-spacing: -0.43vw;
}

section.hero article .sub {
  margin-top: 1.25vw;
  color: #A5A7BD;
  font-family: Karla;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: -0.02vw;
}

section.hero article .bttm {
  display: flex;
  width: 36.88vw;
  align-items: flex-start;
  gap: 2.5vw;
}

section.hero article .stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.83vw;
}

section.hero article .stat span {
  color: #71778C;
  font-family: Karla;
  font-size: 0.78vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 1.17vw */
  letter-spacing: -0.01vw;
}

section.hero article .stat .num {
  color: #FFF;
  font-family: Karla;
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 1.56vw */
  gap: 0.36vw;
  display: flex;
  align-items: center;
}

section.hero article .stat .num svg {
  width: 1.09vw;
  height: 1.09vw;
}

section.hero .bento {
  position: absolute;
  right: -6.72vw;
  top: 0;
  display: inline-flex;
  padding: 2.08vw 0px;
  align-items: flex-start;
  gap: 1.25vw;
}

section.hero .bento .col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25vw;
}

section.hero .bento .block {
  display: flex;
  width: 17.86vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 2.50vw;
  border: 1px solid #2E303A;
  overflow: hidden;
  position: relative;
}

section.hero .bento .block.tall {
  height: 27.40vw;
}

section.hero .bento .block.square {
  height: 17.86vw;
}

section.hero .bento .block.short {
  height: 8.33vw;
}

@keyframes animateLine {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0.5;
    transform: translateY(24px);
  }

  100% {
    opacity: 0;
    transform: translateY(48px);
  }
}

@keyframes animateLine {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(-123.28125vw);
  }
}

.scroll .scroll-hint {
  text-align: center;
}

.scroll .animate-line {
  animation: animateLine 2s infinite;
}

.marquee {
  width: 100%;
  overflow: hidden;
  display: flex;
  height: 3.75vw;
  justify-content: flex-start;
  align-items: center;
  background: #22A8F7;
}

.marquee-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 85s linear infinite;
  position: relative;
  top: 0.2vw;
}

.marquee-wrapper img {
  display: inline-block;
  margin-right: 1.25vw;
  width: 122.03125vw;
}


.marquee-wrapper {
  width: 246.5625vw;
}

section.join {
  display: flex;
  padding: 0 12.5vw;
  align-items: flex-end;
  gap: 7.5vw;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

section.join .shadow-wrap {
  height: 100vw;
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  left: 0;
}

section.join .shadow {
  width: 57.59vw;
  height: 41.74vw;
  transform: rotate(-8.797deg);
  flex-shrink: 0;
  border-radius: 57.59vw;
  opacity: 0.3;
  background: radial-gradient(50% 50% at 50% 50%, #686D7E 0%, rgba(104, 109, 126, 0.24) 56%, rgba(104, 109, 126, 0) 100%);
  position: absolute;
  top: 14.14vw;
  left: 46.09vw;
}

section.join .gif {
  width: 37.08vw;
  height: 38.02vw;
  position: relative;
  overflow: hidden;
}

section.join .gif .spider {
  width: 24.17vw;
  height: 19.17vw;
  top: 18.85vw;
  left: 0;
  position: absolute;
  background-size: cover;
}

section.join .gif .spider:before {
  content: "";
  position: absolute;
  width: 14.37vw;
  height: 4.64vw;
  top: 8.73vw;
  left: 3.25vw;
  opacity: 0.5;
  transform: rotate(6.62deg);
  background: radial-gradient(50% 50% at 50% 50%, #686D7E 0%, rgba(104, 109, 126, 0.24) 56%, rgba(104, 109, 126, 0) 100%);
}

section.join .gif .spider video {
  position: relative;
  width: 14.5vw;
  top: 4vw;
  left: 2vw;
}

section.join .gif .spider img {
  height: 183%;
  right: -2vw;
  top: -12vw;
  position: relative;
  position: absolute;
}

section.join .gif .catcher {
  width: 24.27vw;
  height: 35.16vw;
  left: 12.71vw;
  top: 0;
  position: absolute;
  position: relative;
  background-size: cover;
  overflow: hidden;
}

section.join .gif .catcher video {
  width: 24vw;
  position: relative;
  top: 5vw;
  left: 1vw;
}

section.join .gif .catcher img {
  position: absolute;
  top: 0;
  height: 100%;
  right: -41vw;
}

section.join .gif .catcher:before {
  content: "";
  position: absolute;
  width: 17.17vw;
  height: 5.51vw;
  top: 25.32vw;
  left: 8.01vw;
  opacity: 0.4;
  transform: rotate(-9.8deg);
  background: radial-gradient(50% 50% at 50% 50%, rgba(104, 109, 126, 0.7) 0%, rgba(104, 109, 126, 0.562832) 28%, rgba(104, 109, 126, 0.24) 56.5%, rgba(104, 109, 126, 0.0855172) 72.5%, rgba(104, 109, 126, 0) 100%);
}

section.join .left {
  display: flex;
  width: 30.52vw;
  padding: 8.33vw 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.75vw;
}

section.join .left article {
  display: flex;
  width: 30.52vw;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.67vw;
}

section.join .left article h2 {
  color: #212233;
  font-family: Poppins;
  font-size: 5vw;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.15vw;
}

section.join .left article ul {
  color: #71778C;
  font-family: Minecraft;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: 155%;
  /* 1.56vw */
  letter-spacing: -0.03vw;
}

section.join .left article ul strong {
  font-weight: 400;
  color: #22A8F7;
}

section.join .left .server {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.83vw;
  width: 100%;
}

section.join .left .server p {
  color: #71778C;
  font-family: Minecraft;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: 155%;
  /* 1.56vw */
}

section.join .left .server .box {
  width: 100%;
  line-height: 2.86vw;
  height: 2.86vw;
  flex-shrink: 0;
  border: 2px solid #D9D9D9;
  padding: 0 1.46vw;
  background: #212233;
  color: #A5A7BD;
  font-family: Minecraft;
  box-sizing: border-box;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
}

section.join .left .server .click {
  height: 3.02vw;
  line-height: 3.02vw;
  border: 3px solid #212233;
  background: #71778C;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.83vw;
  width: 100%;
  justify-content: center;
  cursor: pointer;
  transition: filter 0.3s ease;
}

section.join .left .server .click:hover {
  filter: brightness(1.3);
}

section.join .left .server .click span {
  color: #FFF;
  font-family: Minecraft;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: 155%;
  /* 1.56vw */
}

section.join .left .server .click svg {
  width: 1.04vw;
  height: 1.04vw;
}

section.carousel {
  display: flex;
  padding: 6.25vw 12.5vw 12.5vw 12.5vw;
  flex-direction: column;
  align-items: center;
  gap: 0.52vw;
}

section.carousel .container {
  width: 75vw;
  height: 37.5vw;
  flex-shrink: 0;
  border-radius: 2.5vw;
  padding: 2.5vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #212233;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

section.carousel .container .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;
  opacity: 0;
}

section.carousel .container .video.active {
  z-index: 4;
  opacity: 1;
}

section.carousel .container .nav {
  width: 100%;
  display: inline-flex;
  align-items: flex-end;
  gap: 1.25vw;
  position: relative;
  z-index: 5;
}

section.carousel .container .box {
  display: flex;
  padding: 1.4vw 2.08vw;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1.25vw;
  border-radius: 2.5vw;
  background: #22A8F7;
  transition: all 0.3s ease;
  box-shadow: 0px 0.21vw 0.52vw 0px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

section.carousel .container .box * {
  transition: all 0.3s ease;
}

section.carousel .container .box .icon {
  max-height: 3.33vw;
}

section.carousel .container .box .icon img {
  height: 3.33vw;
}

section.carousel .container .box h4 {
  color: #FFF;
  font-family: Poppins;
  font-size: 1.67vw;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  /* 1.67vw */
  letter-spacing: -0.05vw;
}

section.carousel .container .box p {
  color: #FFF;
  font-family: Karla;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 1.3vw */
  letter-spacing: -0.03vw;
  overflow: hidden;
  padding-bottom: 0.5vw;
  box-sizing: border-box;
}

section.carousel .container .box.min {
  background: #212233;
}

section.carousel .container .box.min p {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
}

section.carousel .container .box.min .icon {
  max-height: 0;
}

section.carousel .container .box.min .icon img {
  opacity: 0;
}

section.quest {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50.05vw;
  flex-shrink: 0;
  border-radius: 2.5vw;
  overflow: hidden;
  position: relative;
}

section.quest video {
  position: absolute;
}

section.quest article {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.67vw;
}

section.quest article .frame {
  display: flex;
  padding: 0.21vw 0.83vw;
  align-items: center;
  gap: 0.52vw;
  border-radius: 0.52vw;
  border: 0.052vw solid #FFF;
  background: rgba(16, 16, 16, 0.5);
  box-shadow: 0px 0px 1.77vw 0px rgba(0, 0, 0, 0.2);
  color: #FFF;
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: Karla;
  font-size: 0.94vw;
  font-style: normal;
  font-weight: 800;
  line-height: 130%;
  letter-spacing: -0.01vw;
  text-transform: uppercase;
  box-sizing: border-box;
  line-height: 1;
}

section.quest article h2 {
  color: #FFF;
  text-align: center;
  text-shadow: 0px 0.21vw 1.25vw rgba(0, 0, 0, 0.5);
  font-family: Poppins;
  font-size: 5vw;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.15vw;
}

section.features {
  display: flex;
  padding: 8.33vw 12.5vw;
  align-items: flex-start;
  gap: 1.25vw;
  background: #101118;
  padding-top: 12.33vw;
  margin-top: -4vw;
}

section.features .feature {
  width: 36.88vw;
  height: 33.33vw;
  border-radius: 2.5vw;
  position: relative;
  overflow: hidden;
}

section.features .feature .num {
  bottom: 2.24vw;
  left: 3.17vw;
  color: #FFF;
  font-family: Karla;
  font-size: 6.04vw;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  /* 6.04vw */
  letter-spacing: -0.18vw;
  position: absolute;
}

section.features .feature article {
  box-sizing: border-box;
  display: inline-flex;
  padding: 2.5vw;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25vw;
}

section.features .feature article h3 {
  color: #FFF;
  /* PVP/H2-64 */
  font-family: Poppins;
  font-size: 3.33vw;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  /* 3.33vw */
  letter-spacing: -0.1vw;
}

section.features .feature article p {
  color: #FFF;
  /* PVP/P-20 */
  font-family: Karla;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 1.3vw */
  letter-spacing: -0.03vw;
  max-width: 90%;
}

section.features .feature .gif {
  position: absolute;
  pointer-events: none;
}

section.features .feature:nth-child(1) {
  background: url("../img/Feature-1.svg") center center no-repeat, #22A8F7;
  background-size: cover;
}

section.features .feature:nth-child(1) .gif {
  width: 120%;
  height: 59.38vw;
  top: -16.17vw;
  left: 10%;
}

section.features .feature:nth-child(2) {
  background: url("../img/Feature-2.svg") center center no-repeat, #22A8F7;
  background-size: cover;
}

section.features .feature:nth-child(2) .gif {
  width: 129%;
  height: 22.08vw;
  bottom: -1vw;
  left: 0vw;
}

@keyframes fall {
  0% {
    transform: translateY(-10%);
    opacity: 1;
  }

  100% {
    transform: translateY(60%);
    opacity: 0;
  }
}

section.bottom {
  display: flex;
  padding: 2.5vw 12.5vw;
  align-items: center;
  gap: 7.6vw;
  background: #101118;
}

section.bottom .art {
  width: 36.88vw;
  height: 33.33vw;
  flex-shrink: 0;
  border-radius: 2.5vw;
  background: #212233;
  background: url("../img/fishbg.png");
  position: relative;
}

section.bottom .art:before {
  content: "";
  background: url("../img/fishwhite.png") center bottom no-repeat;
  background-size: 100% auto;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 2.5vw;
}

section.bottom .art .tear {
  top: 6.93vw;
  position: absolute;
  left: 9.24vw;
  width: 2.55vw;
  animation: fall 2s infinite linear;
}

section.bottom .art .man {
  width: 22.29vw;
  height: auto;
  position: absolute;
  bottom: 0;
  left: -4vw;
  left: -1.67vw;
}

section.bottom .art .bubble {
  display: flex;
  width: 31.88vw;
  padding: 1.67vw;
  justify-content: center;
  align-items: flex-start;
  border-radius: 1.04vw;
  background: #101118;
  position: absolute;
  bottom: 2.5vw;
  left: 50%;
  margin-left: -15.94vw;
  box-sizing: border-box;
}

section.bottom .art .bubble .tip {
  position: absolute;
  left: 0;
  top: -0.5vw;
  height: 1vw;
}

section.bottom .art .bubble article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.42vw;
  flex: 1 0 0;
}

section.bottom .art .bubble article p {
  align-self: stretch;
  color: #A5A7BD;
  font-family: Karla;
  font-size: 0.83vw;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 0.83vw */
  letter-spacing: -0.03vw;
}

section.bottom .art .bubble article p strong {
  color: #F89442;
  font-size: 1.04vw;
}

section.bottom .left {
  display: flex;
  width: 30.52vw;
  padding: 8.33vw 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.75vw;
}

section.bottom .left article {
  display: flex;
  width: 30.52vw;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.67vw;
}

section.bottom .left article h2 {
  color: #FFF;
  font-family: Poppins;
  font-size: 3.33vw;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.1vw;
}

section.bottom .left article ul {
  color: #A5A7BD;
  font-family: Minecraft;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: 155%;
  /* 1.56vw */
  letter-spacing: -0.03vw;
  padding-left: 2vw;
}

section.bottom .left article ul strong {
  font-weight: 400;
  color: #22A8F7;
}

footer {
  height: 3.75vw;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #101118;
  position: relative;
}

footer article {
  width: 75vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer article .cf {
  color: #DDD;
  text-align: center;
  /* Tiny */
  font-family: Karla;
  font-size: 0.73vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.6;
}

footer article .social {
  color: #A5A7BD;
  text-align: center;
  /* PVP/P-20 */
  font-family: Karla;
  font-size: 1.04vw;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  /* 1.3vw */
  letter-spacing: -0.03vw;
  display: flex;
  align-items: center;
  gap: 1.04vw;
  line-height: 1;
}

footer article .social img {
  width: 1.25vw;
  height: 1.25vw;
}

footer:before {
  content: "";
  position: absolute;
  height: 4px;
  background: #22A8F7;
  bottom: 0;
  left: 0;
  width: 100%;
}

section.carousel.mob {
  display: none;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-419.79vw);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

.bento.mob {
  display: none !important;
}

@media only screen and (max-width: 600px) {
  section.carousel.desk {
    display: none;
  }

  section.carousel.mob {
    display: flex;
    padding-bottom: 48px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0px 20px 48px 20px;
    box-sizing: border-box;
  }

  section.carousel.mob .container {
    background: none;
    width: 100%;
    display: block;
    border-radius: 0;
    height: auto;
    padding: 0;
    flex-direction: column;
    display: flex;
  }

  section.carousel.mob .container .nav {
    display: flex;
    width: 100%;
    padding: 0px 20px 48px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    padding: 0;
  }

  section.carousel.mob .container .nav .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
  }

  section.carousel.mob .container .nav .item .box {
    border-radius: 48px;
    pointer-events: none;
    display: flex;
    width: 100%;
    padding: 40px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px;
    flex-shrink: 0;
    border-radius: 48px;
    box-sizing: border-box;
  }

  section.carousel.mob .container .nav .item .box h4 {
    font-size: 24px;
  }

  section.carousel.mob .container .nav .item .box p {
    font-size: 20px;
  }

  section.carousel.mob .container .nav .item .box .icon {
    max-height: 64px;
  }

  section.carousel.mob .container .nav .item .box .icon img {
    height: 64px;
    width: auto;
  }

  section.carousel.mob .container .video {
    position: static;
    width: 335px;
    height: 294px;
    border-radius: 48px;
    z-index: 4;
    opacity: 1;
    overflow: hidden;
    position: relative;
  }

  .cta {
    gap: 8px;
  }

  .cta .sml {
    font-size: 15px;
    white-space: nowrap;
  }

  .cta .btn {
    display: flex;
    padding: 16px 24px;
    align-items: center;
    gap: 8px;
    border-radius: 20px;
    font-size: 20px;
    width: auto;
    width: 221px;
    box-sizing: border-box;
  }

  .cta .btn svg {
    width: 20px;
    height: 20px;
  }

  section.hero {
    height: auto;
  }

  section.hero .scroll {
    display: none;
  }

  section.hero .bento {
    position: static;
    margin: 0 auto;
  }

  section.hero .bento.desk {
    display: none;
  }

  section.hero .bento.mob {
    display: flex !important;
    justify-content: center;
    margin-top: -48px;
    padding-bottom: 24px;
  }

  section.hero .bento .block {
    width: 160.389px;
    border-radius: 22.445px;
  }

  section.hero .bento .block.short {
    height: 74.817px;
    background: white;
  }

  section.hero .bento .block.square {
    height: 160.389px;
  }

  section.hero .bento .block.tall {
    height: 246.428px;
  }

  section.hero article {
    display: flex;
    width: 100%;
    padding: 72px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    box-sizing: border-box;
  }

  section.hero article .stat {
    gap: 16px;
    margin-right: 24px;
  }

  section.hero article .stat .num {
    font-size: 24px;
  }

  section.hero article .stat .num svg {
    width: 21px;
    height: 21px;
  }

  section.hero article .stat span {
    font-size: 15px;
  }

  section.hero article .logo {
    font-size: 20px;
  }

  section.hero article h1 {
    font-size: 32px;
  }

  section.hero article h1 span {
    font-size: 31px !important;
  }

  section.hero article .sub {
    font-size: 16px;
    margin-top: 24px;
    width: 78%;
  }

  section.hero article .bttm {
    flex-wrap: wrap;
    width: 83%;
    gap: 24px;
  }

  .marquee {
    height: 72px;
  }

  section.join {
    display: block;
    padding: 72px 20px 32px 20px;
    padding-bottom: 200px;
  }

  section.join .gif {
    transform: scale(2.5) translate(38px, 43px);
  }

  section.join .shadow-wrap {
    top: 61%;
  }

  section.join .shadow-wrap .shadow {
    width: 120%;
    height: 58%;
    lefT: -10%;
    top: 45vw;
  }

  section.join .left {
    gap: 32px;
    width: 100%;
    padding: 0;
  }

  section.join .left article {
    width: 100%;
    gap: 32px;
  }

  section.join .left article h2 {
    font-size: 32px;
    font-weight: 600;
  }

  section.join .left article ul {
    font-size: 16px;
    padding-left: 18px;
    width: 90%;
  }

  section.join .left .server p,
  section.join .left .server .box,
  section.join .left .server .click {
    font-size: 16px;
  }

  section.join .left .server .box {
    height: 55px;
    line-height: 55px;
    padding: 0 20px;
  }

  section.join .left .server .click {
    height: 55px;
    line-height: 55px;
    gap: 16px;
  }

  section.join .left .server .click svg {
    width: 20px;
    height: 20px;
  }

  section.join .left .server .click span {
    font-size: 16px;
  }

  section.quest {
    display: flex;
    width: 100%;
    height: 552px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    border-radius: 48px;
  }

  section.quest article {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  section.quest article .frame {
    display: flex;
    padding: 4px 16px;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    border-radius: 10px;
  }

  section.quest article h2 {
    font-size: 32px;
  }

  section.quest video {
    min-width: 110%;
    height: 112%;
  }

  section.features {
    display: flex;
    height: 1456px;
    padding: 72px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-top: 0;
    height: auto;
  }

  section.features .feature {
    width: 100%;
    height: 640px;
    flex-shrink: 0;
    border-radius: 48px;
  }

  section.features .feature .num {
    bottom: 35px;
    left: 20px;
    font-size: 116px;
    line-height: 1;
  }

  section.features .feature article {
    display: flex;
    width: 100%;
    padding: 39px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  section.features .feature article h3 {
    font-size: 32px;
    white-space: nowrap;
  }

  section.features .feature article p {
    max-width: 100%;
    font-size: 20px;
  }

  section.features .feature:nth-child(1) {
    background-position: center left;
  }

  section.features .feature:nth-child(1) .gif {
    width: 703px;
    height: auto;
    top: -112px;
    left: -103px;
  }

  section.features .feature:nth-child(2) {
    background-position: center left;
  }

  section.features .feature:nth-child(2) .gif {
    width: 968px;
    height: auto;
    top: auto;
    bottom: 0;
    left: -262px;
  }

  section.bottom {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  section.bottom .left {
    display: flex;
    width: 100%;
    padding: 72px 20px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    box-sizing: border-box;
  }

  section.bottom .left article {
    width: 100%;
    gap: 32px;
    justify-content: center;
    align-items: center;
  }

  section.bottom .left article h2 {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
  }

  section.bottom .left article ul {
    font-size: 16px;
    padding-left: 18px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    padding-right: 5%;
  }

  section.bottom .art {
    width: 100%;
    border-radius: 0;
    height: 640px;
  }

  section.bottom .art:before {
    background-size: 109% auto;
    border-radius: 0;
  }

  section.bottom .art .bubble {
    display: flex;
    width: 335px;
    padding: 32px;
    justify-content: center;
    align-items: flex-start;
    border-radius: 20px;
    box-sizing: border-box;
    left: 20px;
    margin-left: 0;
    bottom: 20px;
  }

  section.bottom .art .bubble .tip {
    height: 20px;
    width: auto;
    left: 1px;
    top: -10px;
  }

  section.bottom .art .bubble article {
    gap: 8px;
  }

  section.bottom .art .bubble article p {
    font-size: 16px;
  }

  section.bottom .art .bubble article p strong {
    font-size: 20px;
  }

  section.bottom .art .tear {
    width: 50px;
    top: 21%;
    left: 45%;
  }

  section.bottom .art .man {
    width: auto;
    height: 655px;
    left: -12%;
  }

  footer {
    height: 200px;
    flex-direction: column;
  }

  footer article {
    width: 100%;
    justify-content: space-around;
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  footer article .cf {
    font-size: 15px;
  }

  footer article .social {
    font-size: 20px;
    gap: 20px;
    font-size: 20px;
    gap: 20px;
    flex-wrap: wrap;
    width: 40%;
    align-items: center;
    justify-content: center;
  }

  footer article .social img {
    height: 24px;
    width: 24px;
  }
}

/*# sourceMappingURL=style.css.map */

/* my scroll animated */
.scroll-straight {
  width: 4px;
  height: 48px;
  /* margin-top: 19px; */
  /* margin-left: 22px; */
  position: relative;
  overflow: hidden;
}

.scroll-straight::before {
  width: 4px;
  height: 48px;
  background: #808080;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* transform: translateX(0.5px); */
}

.scroll-straight-in {
  width: 4px;
  height: 16px;
  background: #22A8F7;
  position: absolute;
  -webkit-animation-name: scrollIn;
  animation-name: scrollIn;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  left: -50%;
  transform: translateX(50%);
  z-index: 1;
}

@-webkit-keyframes scrollIn {
  0% {
    top: -20px;
  }

  to {
    top: 0px;
  }
}

@keyframes scrollIn {
  0% {
    top: -30px;
  }

  to {
    top: 55px;
  }
}

.gif-mob {
  display: none;
}

/* fix running line - remove vw and fix height */
@media only screen and (max-width: 1024px) {
  .marquee-wrapper {
    animation: marquee 40s linear infinite;
  }

  .marquee-wrapper img {
    width: auto;
    height: 25px;
  }

  footer article .social {
    max-width: 149px;
    width: auto;
  }

  .video-desktop {
    display: none;
  }

  .gif-mob {
    display: flex;
  }
}

@media only screen and (max-width: 600px) {
  footer article .social {
    max-width: 149px;
    width: auto;
  }
}