@import url(https://fonts.googleapis.com/css?family=Darumadrop+One:regular&display=swap);
@font-face {
  font-family: "Beautiful Freak Bold";
  font-display: swap;
  src: url(../fonts/Beautiful-Freak-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
}
* {
  padding: 0;
  margin: 0;
  border: 0;
}
*,
*::after,
*::before {
  box-sizing: border-box;
}
*::after,
*::before {
  display: inline-block;
}
body,
html {
  height: 100%;
  min-width: 320px;
}
body {
  color: #000;
  line-height: 1;
  font-family: "Darumadrop One";
  font-size: 1.25rem;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button,
input,
textarea {
  font-family: "Darumadrop One";
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
}
input,
textarea {
  width: 100%;
}
label {
  display: inline-block;
}
button,
option,
select {
  cursor: pointer;
}
a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
ul li {
  list-style: none;
}
img {
  vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}
.lock body {
  overflow: hidden;
  touch-action: none;
  -ms-scroll-chaining: none;
  overscroll-behavior: none;
}
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@supports (overflow: clip) {
  .wrapper {
    overflow: clip;
  }
}
.wrapper > main {
  flex: 1 1 auto;
}
.wrapper > * {
  min-width: 0;
}
[class*="__container"] {
  max-width: 91.875rem;
  margin: 0 auto;
  padding: 0 0.9375rem;
}
[class*="--gc"] {
  display: grid;
  min-width: 0;
  grid-template-columns: 0.9375rem 1fr minmax(auto, 90rem) 1fr 0.9375rem;
}
[class*="--gc"] > * {
  min-width: 0;
  grid-column: 3/4;
}
.menu__list {
  display: flex;
  align-items: center;
}
.menu__link {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.2s ease 0s;
}
.menu__link._navigator-active {
  color: #ffec01;
}
.icon-menu {
  display: none;
}
.ibg {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.ibg--top {
  -o-object-position: top;
  object-position: top;
}
.ibg--bottom {
  -o-object-position: bottom;
  object-position: bottom;
}
.ibg--left {
  -o-object-position: left;
  object-position: left;
}
.ibg--right {
  -o-object-position: right;
  object-position: right;
}
.ibg--contain {
  -o-object-fit: contain;
  object-fit: contain;
}
.header {
  position: fixed;
  z-index: 10;
  top: 0.9375rem;
  left: 0;
  width: 100%;
}
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0 0 10.5rem;
  width: 10.5rem;
}
.header__logo img {
  width: 100%;
}
.header__right {
  display: flex;
  align-items: center;
  border-radius: 2.5rem;
  border: 0.1875rem solid #000;
  background-color: #fff;
  box-shadow: 0.3125rem 0.25rem 0 0 #000;
  padding: 0.75rem 1.625rem 0.75rem 3.125rem;
}
.header__actions {
  display: flex;
  align-items: center;
}
.header__social {
  display: flex;
  align-items: center;
}
.header__social-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__social-item svg {
  width: 100%;
}
.header__social-item svg path {
  transition: fill 0.2s ease 0s;
}
.header__button {
  position: relative;
  z-index: 2;
  height: 2.5rem;
  border-radius: 1.5rem;
  border: 0.125rem solid #000;
  background-color: #ffec01;
  box-shadow: 0 0.1875rem 0 0 #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: "Beautiful Freak Bold";
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  transition: background-color 0.2s ease 0s, letter-spacing 0.2s ease 0s;
}
.footer {
  position: relative;
  z-index: 3;
  border-top: 0.25rem solid #000;
}
.footer__top {
  background: url(../img/footerBg.svg) bottom/cover no-repeat;
}
.footer__top-body {
  display: flex;
  justify-content: space-between;
}
.footer__top-image {
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  width: 100%;
  -webkit-animation: heroImageImg 0.15s ease infinite;
  animation: heroImageImg 0.15s ease infinite;
}
.footer__top-menu {
  position: relative;
  z-index: 2;
  width: 100%;
  border: 0.3125rem solid #000;
  background-color: #fff;
  box-shadow: 0.75rem 0.5rem 0 0 #000;
}
.footer__top-menu._watcher-view::before {
  -webkit-animation: heroImage2 0.6s ease-in-out 0.2s forwards;
  animation: heroImage2 0.6s ease-in-out 0.2s forwards;
}
.footer__top-menu::before {
  content: "";
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  z-index: 2;
  top: 15%;
  left: 93%;
  width: 70%;
  aspect-ratio: 479/421;
  -webkit-transform: translateX(150%) translateY(100%);
  transform: translateX(150%) translateY(100%);
  will-change: transform;
}
.footer__top-menu-header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.footer__top-menu-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #000;
  padding: 0.5rem 1rem;
}
.footer__top-menu-header-bottom {
  display: flex;
  align-items: center;
  -webkit-column-gap: 1.5rem;
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
  justify-content: flex-start;
  padding: 0.75rem 2rem;
  border-bottom: 0.25rem solid #000;
}
.footer__top-menu-header-bottom span {
  color: #000;
  font-family: "Darumadrop One";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}
.footer__top-menu-header-bottom span::first-letter {
  text-decoration: underline;
}
.footer__top-menu-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  -webkit-column-gap: 2.5rem;
  -moz-column-gap: 2.5rem;
  column-gap: 2.5rem;
  padding: 0.75rem 2rem;
}
.footer__top-menu-items {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer__top-menu-item {
  color: #000;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  transition: color 0.2s ease 0s;
}
.footer__top-menu-social {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.25rem;
}
.footer__top-menu-social-item img {
  transition: scale 0.2s ease 0s;
  width: 100%;
}
.footer__bottom {
  position: relative;
  z-index: 2;
  background-color: #000;
  padding: 0.9375rem 0;
}
.footer__bottom-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__bottom-body span {
  color: #fff;
  font-family: "Darumadrop One";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.footer__bottom-body a {
  display: flex;
  align-items: center;
  -webkit-column-gap: 0.375rem;
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
}
.footer__bottom-body a img {
  -webkit-transform: translateY(5%);
  transform: translateY(5%);
}
.menu-open-bg {
  pointer-events: none;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  opacity: 0;
  transition: opacity 0.3s ease 0s;
}
.menu-open .menu-open-bg {
  opacity: 1;
}
.hero {
  position: relative;
  z-index: 3;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url(../img/hero/bg.jpg) bottom/cover no-repeat;
}
.hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__title {
  position: relative;
  z-index: 1;
  -webkit-transform: translateY(-60vh);
  transform: translateY(-60vh);
  will-change: transform;
}
.hero__title::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -5%;
  left: 90%;
  width: 40%;
  aspect-ratio: 493/460;
  -webkit-transform: translateX(150%) translateY(100%);
  transform: translateX(150%) translateY(100%);
  will-change: transform;
}
.loaded .hero__title::before {
  -webkit-animation: heroImage2 0.6s ease-in-out 0.6s forwards;
  animation: heroImage2 0.6s ease-in-out 0.6s forwards;
}
.loaded .hero__title {
  -webkit-animation: heroTitle 0.6s ease-in-out 0.4s forwards;
  animation: heroTitle 0.6s ease-in-out 0.4s forwards;
}
.hero__title img {
  width: 100%;
}
.hero__image {
  position: relative;
  z-index: 2;
  -webkit-transform: translateX(150%) translateY(100%);
  transform: translateX(150%) translateY(100%);
  will-change: transform;
}
.loaded .hero__image {
  -webkit-animation: heroImage 0.6s ease-in-out 0.4s forwards;
  animation: heroImage 0.6s ease-in-out 0.4s forwards;
}
.hero__image img {
  width: 100%;
  -webkit-animation: heroImageImg 0.15s ease infinite;
  animation: heroImageImg 0.15s ease infinite;
}
.hero__bottom {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  -webkit-column-gap: 0.9375rem;
  -moz-column-gap: 0.9375rem;
  column-gap: 0.9375rem;
  -webkit-transform: translateY(35vh);
  transform: translateY(35vh);
  will-change: transform;
  justify-content: space-between;
}
.loaded .hero__bottom {
  -webkit-animation: heroButton 0.6s ease-in-out 0.4s forwards;
  animation: heroButton 0.6s ease-in-out 0.4s forwards;
}
.hero__bottom-item {
  flex-shrink: 0;
}
.hero__artwork {
  flex-shrink: 0;
  border: 5px solid #000;
}
.hero__artwork-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffce00;
  padding: 0.5rem;
}
.hero__artwork-text {
  background-color: #fff;
  padding: 0.625rem 0.5rem 0.75rem;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 105%;
}
.hero__artwork-text a {
  color: #ffce00;
}
.hero__button {
  justify-self: center;
  position: relative;
  z-index: 3;
  height: 4.75rem;
  border-radius: 3rem;
  border: 0.25rem solid #000;
  background-color: #ffec01;
  box-shadow: 0 0.375rem 0 0 #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Beautiful Freak Bold";
  font-size: 3.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  transition: background-color 0.2s ease 0s, letter-spacing 0.2s ease 0s;
  color: #fff;
  -webkit-text-stroke-width: 0.0862068966em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
}
@-webkit-keyframes heroImage {
  0% {
    -webkit-transform: translateX(150%) translateY(100%);
    transform: translateX(150%) translateY(100%);
  }
  100% {
    -webkit-transform: translateX(15%) translateY(0);
    transform: translateX(15%) translateY(0);
  }
}
@keyframes heroImage {
  0% {
    -webkit-transform: translateX(150%) translateY(100%);
    transform: translateX(150%) translateY(100%);
  }
  100% {
    -webkit-transform: translateX(15%) translateY(0);
    transform: translateX(15%) translateY(0);
  }
}
@-webkit-keyframes heroImage2 {
  0% {
    -webkit-transform: translateX(150%) translateY(100%);
    transform: translateX(150%) translateY(100%);
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}
@keyframes heroImage2 {
  0% {
    -webkit-transform: translateX(150%) translateY(100%);
    transform: translateX(150%) translateY(100%);
  }
  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}
@-webkit-keyframes heroTitle {
  0% {
    -webkit-transform: translateY(-60vh);
    transform: translateY(-60vh);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes heroTitle {
  0% {
    -webkit-transform: translateY(-60vh);
    transform: translateY(-60vh);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes heroButton {
  0% {
    -webkit-transform: translateY(35vh);
    transform: translateY(35vh);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes heroButton {
  0% {
    -webkit-transform: translateY(35vh);
    transform: translateY(35vh);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes heroImageImg {
  0% {
    -webkit-transform: translateY(0) scaleY(0.995);
    transform: translateY(0) scaleY(0.995);
  }
  50% {
    -webkit-transform: translateY(-0.5%) scaleY(1.005);
    transform: translateY(-0.5%) scaleY(1.005);
  }
  100% {
    -webkit-transform: translateY(0) scaleY(0.995);
    transform: translateY(0) scaleY(0.995);
  }
}
@keyframes heroImageImg {
  0% {
    -webkit-transform: translateY(0) scaleY(0.995);
    transform: translateY(0) scaleY(0.995);
  }
  50% {
    -webkit-transform: translateY(-0.5%) scaleY(1.005);
    transform: translateY(-0.5%) scaleY(1.005);
  }
  100% {
    -webkit-transform: translateY(0) scaleY(0.995);
    transform: translateY(0) scaleY(0.995);
  }
}
@-webkit-keyframes heroImageImg2 {
  0% {
    -webkit-transform: translateY(0) scaleY(0.995);
    transform: translateY(0) scaleY(0.995);
  }
  50% {
    -webkit-transform: translateY(-2.5%) scaleY(1.005);
    transform: translateY(-2.5%) scaleY(1.005);
  }
  100% {
    -webkit-transform: translateY(0) scaleY(0.995);
    transform: translateY(0) scaleY(0.995);
  }
}
@keyframes heroImageImg2 {
  0% {
    -webkit-transform: translateY(0) scaleY(0.995);
    transform: translateY(0) scaleY(0.995);
  }
  50% {
    -webkit-transform: translateY(-2.5%) scaleY(1.005);
    transform: translateY(-2.5%) scaleY(1.005);
  }
  100% {
    -webkit-transform: translateY(0) scaleY(0.995);
    transform: translateY(0) scaleY(0.995);
  }
}
@-webkit-keyframes heroBg {
  0% {
    -webkit-transform: scale(4.6);
    transform: scale(4.6);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heroBg {
  0% {
    -webkit-transform: scale(4.6);
    transform: scale(4.6);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes aboutBg {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-66.66%);
    transform: translateX(-66.66%);
  }
}
@keyframes aboutBg {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-66.66%);
    transform: translateX(-66.66%);
  }
}
.about {
  position: relative;
  z-index: 2;
  margin-top: -0.125rem;
  background-color: #000;
}
.about::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(100% - 0.125rem);
  left: 0;
  width: 100%;
  background: url(../img/about/bottom.svg) bottom/cover no-repeat;
}
.about__bg {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
  -webkit-animation: aboutBg 300s linear infinite;
  animation: aboutBg 300s linear infinite;
}
.about__bg img {
  position: relative;
  width: 33.33%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
}
.about__bg img:nth-child(2) {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.about__container {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about__items {
  position: relative;
  width: 100%;
}
.about__items._watcher-view .about__item:nth-child(1) {
  -webkit-animation: itemShow 0.45s ease-in 0.2s forwards;
  animation: itemShow 0.45s ease-in 0.2s forwards;
}
.about__items._watcher-view .about__item:nth-child(2) {
  -webkit-animation: itemShow 0.45s ease-in 0.5s forwards;
  animation: itemShow 0.45s ease-in 0.5s forwards;
}
.about__items._watcher-view .about__item:nth-child(3) {
  -webkit-animation: itemShow 0.45s ease-in 0.8s forwards;
  animation: itemShow 0.45s ease-in 0.8s forwards;
}
.about__items._watcher-view .about__item:nth-child(4) {
  -webkit-animation: itemShow 0.45s ease-in 1.1s forwards;
  animation: itemShow 0.45s ease-in 1.1s forwards;
}
.about__items._watcher-view .about__item:nth-child(5) {
  -webkit-animation: itemShow 0.45s ease-in 1.4s forwards;
  animation: itemShow 0.45s ease-in 1.4s forwards;
}
.about__items._watcher-view .about__item:nth-child(6) {
  -webkit-animation: itemShow 0.45s ease-in 1.7s forwards;
  animation: itemShow 0.45s ease-in 1.7s forwards;
}
.about__item {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  will-change: transform, visibility, opacity;
}
.about__item:nth-child(1) {
  z-index: 1;
  top: 20%;
  right: 20%;
}
.about__item:nth-child(2) {
  z-index: 2;
  top: 10%;
  right: 0;
}
.about__item:nth-child(3) {
  z-index: 3;
  top: 0;
  left: 25%;
}
.about__item:nth-child(4) {
  z-index: 4;
  bottom: 15%;
  left: 0;
}
.about__item:nth-child(5) {
  z-index: 5;
  bottom: 12%;
  left: 7%;
}
.about__item:nth-child(6) {
  z-index: 6;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes itemShow {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes itemShow {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.item-about {
  border: 0.25rem solid #000;
  background-color: #fff;
}
.item-about__header {
  display: flex;
  flex-direction: column;
}
.item-about__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffce00;
  padding-left: 1rem;
  padding-right: 1rem;
}
.item-about__header-top span {
  color: #fff;
  text-align: center;
  font-style: normal;
  line-height: 1;
}
.item-about__header-bottom {
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  -webkit-column-gap: 1.5rem;
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
  border-bottom: 0.25rem solid #000;
}
.item-about__header-bottom span {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
.item-about__header-bottom span::first-letter {
  text-decoration: underline;
}
.item-about__body {
  width: 100%;
}
.item-about__body-image {
  position: relative;
  width: 100%;
  border: 0.25rem solid #000;
}
.item-about__body-image img {
  width: 100%;
}
.item-about__body-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.item-about__body-info h2 {
  position: relative;
  color: #ffec01;
  -webkit-text-stroke-width: 0.1em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.375rem;
}
.item-about__body-info h2::before {
  content: "About LOLA";
  position: absolute;
  z-index: -1;
  inset: 0;
  color: #000;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  -webkit-transform: translateY(8%);
  transform: translateY(8%);
}
.item-about__body-info p {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
.item-about__body-info ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.item-about__body-info a {
  color: #001aff;
  text-decoration: underline;
}
@-webkit-keyframes howBg1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0) scale(1);
    transform: translate(-50%, -50%) rotate(0) scale(1);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(0.95);
    transform: translate(-50%, -50%) rotate(180deg) scale(0.95);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}
@keyframes howBg1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0) scale(1);
    transform: translate(-50%, -50%) rotate(0) scale(1);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(0.95);
    transform: translate(-50%, -50%) rotate(180deg) scale(0.95);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}
@-webkit-keyframes howBg2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes howBg2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes howBg3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes howBg3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.how {
  position: relative;
  z-index: 1;
}
.how__bg {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.how__bg img {
  position: absolute;
  will-change: transform;
}
.how__bg img:nth-child(1) {
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 115%;
  aspect-ratio: 1;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-animation: howBg1 6s linear infinite;
  animation: howBg1 6s linear infinite;
}
.how__bg img:nth-child(2) {
  z-index: 2;
  inset: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-animation: howBg2 30s linear infinite;
  animation: howBg2 30s linear infinite;
}
.how__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.how__title {
  color: #ffec01;
  -webkit-text-stroke-width: 0.0625em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-wrap: nowrap;
  white-space: nowrap;
}
.how__title::before {
  content: "Ducky";
  position: absolute;
  z-index: -1;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-wrap: nowrap;
  white-space: nowrap;
  color: #000;
  -webkit-transform: translateY(7%);
  transform: translateY(7%);
}
.how__items {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.how__item {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  will-change: transform, visibility, opacity;
}
.how__item__about {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 10% auto; /* Centers horizontally */
  max-width: 100%; /* Adjust as needed */
}
.how__item._watcher-view {
  -webkit-animation: itemShow 0.45s ease-in 0.2s forwards;
  animation: itemShow 0.45s ease-in 0.2s forwards;
}
.how__image img {
  -webkit-animation: heroImageImg 0.15s ease infinite;
  animation: heroImageImg 0.15s ease infinite;
}
.item-how {
  position: relative;
  border: 0.3125rem solid #000;
  background-color: #fff;
  box-shadow: 0.75rem 0.5rem 0 0 #000;
}
.item-how__header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.item-how__header-top {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #000;
}
.item-how__header-top span {
  color: #fff;
  text-align: 1.25rem;
  font-size: 20px;
  line-height: 1;
}
.item-how__header-bottom {
  padding: 0.5rem 2rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -webkit-column-gap: 1.5rem;
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
  border-bottom: 0.25rem solid #000;
}
.item-how__header-bottom span {
  color: #000;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
.item-how__header-bottom span::first-letter {
  text-decoration: underline;
}
.item-how__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item-how__num {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  -webkit-text-stroke-width: 0.0625em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.item-how__num::before {
  position: absolute;
  z-index: -1;
  color: #000;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  -webkit-transform: translateY(7%);
  transform: translateY(7%);
}
.item-how-1 .item-how__num {
  color: #ffec01;
}
.item-how-1 .item-how__num::before {
  content: "1";
}
.item-how-2 .item-how__num {
  color: #ffec01;
}
.item-how-2 .item-how__num::before {
  content: "2";
}
.item-how-about .item-how__num::before {
  content: "about";
}
.item-how-about .item-how__num {
  color: #ffec01;
}
.item-how-3 .item-how__num {
  color: #ffec01;
}
.item-how-3 .item-how__num::before {
  content: "3";
}
.item-how__text {
  color: #000;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}
.tokenomics {
  position: relative;
  z-index: 3;
  background: url(../img/tokenomics/bg.jpg) center/cover no-repeat;
}
.tokenomics::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: calc(100% - 0.125rem);
  left: 0;
  width: 100%;
  background: url(../img/tokenomics/top.svg) top/cover no-repeat;
}
.tokenomics::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  background: url(../img/tokenomics/Clouds.svg) bottom/cover no-repeat;
}
.tokenomics__images {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.tokenomics__images._watcher-view img:nth-child(1) {
  -webkit-animation: heroImageImg 0.15s ease infinite;
  animation: heroImageImg 0.15s ease infinite;
}
.tokenomics__images img:nth-child(1) {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 35%;
  aspect-ratio: 701/632;
  will-change: transform;
  -webkit-transform: translateX(-40vw) translateY(15%);
  transform: translateX(-40vw) translateY(15%);
}
.tokenomics__images img:nth-child(2) {
  position: absolute;
  z-index: 1;
  bottom: 5%;
  right: 0;
  width: 95%;
  will-change: transform;
}
.tokenomics__container {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
}
.tokenomics__body {
  border: 0.3125rem solid #000;
  background-color: #fff;
  box-shadow: 0.75rem 0.5rem 0 0 #000;
}
.tokenomics__body::before {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: -7%;
  right: -10%;
  width: 25%;
  aspect-ratio: 424/354;
  background: url(../img/tokenomics/dec1.svg) center/contain no-repeat;
  will-change: transform;
  -webkit-animation: heroImageImg2 6s ease infinite;
  animation: heroImageImg2 6s ease infinite;
}
.tokenomics__header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.tokenomics__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: #000;
}
.tokenomics__header-top span {
  color: #fff;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}
.tokenomics__header-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -webkit-column-gap: 1.5rem;
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
  padding: 0.75rem 2rem;
  border-bottom: 0.25rem solid #000;
}
.tokenomics__header-bottom span {
  color: #000;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}
.tokenomics__header-bottom span::first-letter {
  text-decoration: underline;
}
.tokenomics__main {
  padding: 2rem;
  border-bottom: 0.0625rem solid #000;
}
.tokenomics__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.tokenomics__title span {
  position: relative;
  z-index: 2;
  color: #ffec01;
  -webkit-text-stroke-width: 0.1em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.tokenomics__title span::before {
  content: "Return of the Quack";
  position: absolute;
  z-index: -1;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #000;
  -webkit-transform: translateY(7%);
  transform: translateY(7%);
}
.tokenomics__info {
  position: relative;
  border: 0.25rem solid #000;
  background: url(../img/tokenomics/tok.jpg) right/cover no-repeat;
}
.tokenomics__items {
  position: relative;
  z-index: 2;
  border: 0.1875rem solid #000;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  will-change: transform, visibility, opacity;
}
.tokenomics__items._watcher-view {
  -webkit-animation: itemShow 0.45s ease-in 0.2s forwards;
  animation: itemShow 0.45s ease-in 0.2s forwards;
}
.tokenomics__items::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(#e6e6e6, transparent 0.1875rem),
    linear-gradient(90deg, #e6e6e6, transparent 0.1875rem);
  background-size: 2vw 2vw;
  background-position: center center;
}
.tokenomics__row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-column-gap: 1.5rem;
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
}
.tokenomics__row-img {
  flex: 1 1 auto;
}
.tokenomics__row-img img {
  width: 100%;
}
.tokenomics__item {
  display: flex;
  flex-direction: column;
}
.tokenomics__item span:nth-child(1) {
  color: #ffec01;
  -webkit-text-stroke-width: 0.075em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.tokenomics__item span:nth-child(2) {
  color: #000;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
}
.tokenomics__bottom {
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1.5rem;
}
.tokenomics__bottom::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(#e6e6e6, transparent 0.1875rem),
    linear-gradient(90deg, #e6e6e6, transparent 0.1875rem);
  background-size: 2vw 2vw;
  background-position: center center;
}
.tokenomics__ca {
  position: relative;
  z-index: 2;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  align-items: flex-start;
  -webkit-column-gap: 0.5rem;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}
.tokenomics__ca button {
  transition: color 0.2s ease 0s;
  word-break: break-all;
  text-align: left;
}
.tokenomics__how {
  position: relative;
  z-index: 2;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
.tokenomics__how a {
  color: #001aff;
  text-decoration: underline;
}
.join {
  position: relative;
  z-index: 1;
  margin-top: -0.125rem;
  overflow: hidden;
}
.join__bg {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.join__bg img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
  -webkit-animation: howBg3 30s linear infinite;
  animation: howBg3 30s linear infinite;
}
.join__container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 85.125rem;
}
.join__header {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 35%;
  right: 23%;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  will-change: transform, visibility, opacity;
}
.join__header._watcher-view {
  -webkit-animation: itemShow 0.45s ease-in 0.2s forwards;
  animation: itemShow 0.45s ease-in 0.2s forwards;
}
.join__title {
  position: relative;
  z-index: 2;
  color: #ffec01;
  -webkit-text-stroke-width: 0.0625em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-wrap: nowrap;
  white-space: nowrap;
}
.join__title::before {
  content: "Join Us";
  position: absolute;
  z-index: -1;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #000;
  -webkit-transform: translateY(7%);
  transform: translateY(7%);
  text-wrap: nowrap;
  white-space: nowrap;
}
.join__button {
  position: relative;
  z-index: 3;
  height: 4.75rem;
  border-radius: 3rem;
  border: 0.25rem solid #000;
  background-color: #ffec01;
  box-shadow: 0 0.375rem 0 0 #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Beautiful Freak Bold";
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  transition: background-color 0.2s ease 0s, letter-spacing 0.2s ease 0s;
  color: #fff;
  -webkit-text-stroke-width: 0.0862068966em;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  will-change: transform;
}
.join__socail {
  position: absolute;
  bottom: 15%;
  right: 17.5%;
  display: flex;
  align-items: center;
}
.join__social-item {
  flex-shrink: 0;
}
.join__social-item img {
  transition: scale 0.2s ease 0s;
  width: 100%;
}
@media (min-width: 47.99875em) {
  .footer__top-image img {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    aspect-ratio: 682/743;
  }
  .hero__bg {
    -webkit-transform: scale(4.6);
    transform: scale(4.6);
    will-change: transform;
  }
  .loaded .hero__bg {
    -webkit-animation: heroBg 0.6s ease-in-out 0.2s forwards;
    animation: heroBg 0.6s ease-in-out 0.2s forwards;
  }
  .how__image {
    position: absolute;
    z-index: 1;
    top: 20%;
    left: 5%;
    width: 96%;
    aspect-ratio: 1421/894;
  }
  .how__image img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
  .tokenomics__images img:nth-child(2) {
    -webkit-animation: heroImageImg 6s ease -1s infinite;
    animation: heroImageImg 6s ease -1s infinite;
  }
  .join__body {
    aspect-ratio: 1362/995;
    background: url(../img/join/01.png) bottom/contain no-repeat;
  }
}
@media (min-width: 91.875em) {
  .menu__list {
    -webkit-column-gap: 2.5rem;
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
  }
  .menu__link {
    font-size: 1.25rem;
  }
  .header__right {
    -webkit-column-gap: 1.875rem;
    -moz-column-gap: 1.875rem;
    column-gap: 1.875rem;
  }
  .header__actions {
    -webkit-column-gap: 1.875rem;
    -moz-column-gap: 1.875rem;
    column-gap: 1.875rem;
  }
  .header__social {
    -webkit-column-gap: 1.5rem;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
  }
  .header__social-item {
    width: 1.875rem;
  }
  .header__button {
    width: 10.875rem;
  }
  .footer__top {
    padding-top: 1.875rem;
  }
  .footer__top-image {
    width: 40.5rem;
  }
  .footer__top-menu {
    margin-bottom: 3.75rem;
  }
  .footer__top-menu {
    width: 40.5rem;
  }
  .footer__top-menu-social-item {
    width: 3.9375rem;
  }
  .page__about {
    padding-top: 5rem;
  }
  .page__about {
    padding-bottom: 3.75rem;
  }
  .page__how {
    padding-top: 8.75rem;
  }
  .page__how {
    padding-bottom: 8.75rem;
  }
  .page__tokenomics {
    padding-top: 5rem;
  }
  .page__tokenomics {
    padding-bottom: 15rem;
  }
  .page__join {
    padding-top: 7.5rem;
  }
  .hero__container {
    padding-top: 10rem;
  }
  .hero__container {
    padding-bottom: 10rem;
  }
  .hero__title {
    width: 74.4375rem;
  }
  .hero__image {
    margin-top: -11.25rem;
  }
  .hero__image {
    width: 66.8125rem;
  }
  .hero__bottom {
    margin-top: -11.25rem;
  }
  .hero__bottom-item {
    width: 15rem;
  }
  .hero__artwork {
    width: 15rem;
  }
  .hero__artwork-text {
    font-size: 1rem;
  }
  .hero__button {
    width: 22.5rem;
  }
  .about::before {
    height: 7rem;
  }
  .about__items {
    height: 52.5rem;
  }
  .about__item:nth-child(1) {
    width: 30rem;
  }
  .about__item:nth-child(2) {
    width: 30rem;
  }
  .about__item:nth-child(3) {
    width: 30rem;
  }
  .about__item:nth-child(4) {
    width: 30rem;
  }
  .about__item:nth-child(5) {
    width: 30rem;
  }
  .about__item:nth-child(6) {
    margin-right: 15rem;
  }
  .about__item:nth-child(6) {
    width: 47.0625rem;
  }
  .item-about__header-top {
    padding-top: 1rem;
  }
  .item-about__header-top {
    padding-bottom: 1rem;
  }
  .item-about__header-top span {
    font-size: 1.5rem;
  }
  .item-about__header-bottom span {
    font-size: 1.5rem;
  }
  .item-about__body {
    padding: 2rem;
  }
  .item-about__body-info h2 {
    font-size: 5rem;
  }
  .item-about__body-info h2::before {
    font-size: 5rem;
  }
  .item-about__body-info p {
    font-size: 1.25rem;
  }
  .item-about__body-info ul {
    margin-top: 2rem;
  }
  .item-about__body-info ul {
    margin-bottom: 2rem;
  }
  .how__title {
    font-size: 8rem;
  }
  .how__title {
    margin-bottom: 2.5rem;
  }
  .how__title::before {
    font-size: 8rem;
  }
  .how__items {
    row-gap: 2.5rem;
  }
  .how__item.item-how-1 {
    width: 40rem;
  }
  .how__item.item-how-2 {
    width: 40rem;
  }
  .how__item.item-how-2 {
    margin-left: 25.625rem;
  }
  .how__item.item-how-3 {
    width: 40rem;
  }
  .how__item.item-how-3 {
    margin-left: 0.0000000625rem;
  }
  .item-how__body {
    -webkit-column-gap: 2.5rem;
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
  }
  .item-how__body {
    padding-top: 0.9375rem;
  }
  .item-how__body {
    padding-bottom: 0.9375rem;
  }
  .item-how__body {
    padding-left: 1.875rem;
  }
  .item-how__body {
    padding-right: 1.875rem;
  }
  .item-how__num {
    font-size: 8rem;
  }
  .item-how__num::before {
    font-size: 8rem;
  }
  .tokenomics::before {
    height: 6.25rem;
  }
  .tokenomics::after {
    height: 30rem;
  }
  .tokenomics__body {
    width: 65.5rem;
  }
  .tokenomics__title span {
    font-size: 5rem;
  }
  .tokenomics__title span::before {
    font-size: 5rem;
  }
  .tokenomics__info {
    padding-top: 3.125rem;
  }
  .tokenomics__info {
    padding-left: 2.1875rem;
  }
  .tokenomics__info {
    padding-right: 31.25rem;
  }
  .tokenomics__info {
    padding-bottom: 13.75rem;
  }
  .tokenomics__items {
    row-gap: 1.5rem;
  }
  .tokenomics__items {
    padding: 2rem;
  }
  .tokenomics__item span:nth-child(1) {
    font-size: 4.75rem;
  }
  .tokenomics__bottom {
    padding: 2rem;
  }
  .tokenomics__ca {
    font-size: 1.5rem;
  }
  .tokenomics__how {
    font-size: 1.5rem;
  }
  .join__title {
    margin-bottom: 1.5rem;
  }
  .join__title {
    font-size: 8rem;
  }
  .join__title::before {
    font-size: 8rem;
  }
  .join__button {
    width: 22.5rem;
  }
  .join__button {
    font-size: 3.625rem;
  }
  .join__socail {
    -webkit-column-gap: 0.75rem;
    -moz-column-gap: 0.75rem;
    column-gap: 0.75rem;
  }
  .join__social-item {
    width: 5.125rem;
  }
}
@media (max-width: 30em) {
  .tokenomics__info {
    padding-left: 0.9375rem;
  }
}
@media (max-width: 20em) {
  .footer__top {
    padding-top: 2.5rem;
  }
  .footer__top-menu {
    margin-bottom: 1.875rem;
  }
  .footer__top-menu-social-item {
    width: 3.25rem;
  }
  .page__about {
    padding-top: 2.5rem;
  }
  .page__about {
    padding-bottom: 2.5rem;
  }
  .page__how {
    padding-top: 6.25rem;
  }
  .page__how {
    padding-bottom: 6.25rem;
  }
  .page__tokenomics {
    padding-top: 2.5rem;
  }
  .page__tokenomics {
    padding-bottom: 12.5rem;
  }
  .page__join {
    padding-top: 3.75rem;
  }
  .hero__container {
    padding-top: 7.5rem;
  }
  .hero__container {
    padding-bottom: 2.5rem;
  }
  .about::before {
    height: 3.75rem;
  }
  .about__items {
    height: 43.75rem;
  }
  .about__item:nth-child(1) {
    width: 20rem;
  }
  .about__item:nth-child(2) {
    width: 20rem;
  }
  .about__item:nth-child(3) {
    width: 20rem;
  }
  .about__item:nth-child(4) {
    width: 20rem;
  }
  .about__item:nth-child(5) {
    width: 20rem;
  }
  .item-about__header-top {
    padding-top: 0.75rem;
  }
  .item-about__header-top {
    padding-bottom: 0.75rem;
  }
  .item-about__header-top span {
    font-size: 1.375rem;
  }
  .item-about__header-bottom span {
    font-size: 1.375rem;
  }
  .item-about__body {
    padding: 0.9375rem;
  }
  .item-about__body-info h2 {
    font-size: 2.875rem;
  }
  .item-about__body-info h2::before {
    font-size: 2.875rem;
  }
  .item-about__body-info p {
    font-size: 1.125rem;
  }
  .item-about__body-info ul {
    margin-top: 0.9375rem;
  }
  .item-about__body-info ul {
    margin-bottom: 0.9375rem;
  }
  .how__title {
    font-size: 4rem;
  }
  .how__title {
    margin-bottom: 1.875rem;
  }
  .how__title::before {
    font-size: 4rem;
  }
  .how__items {
    row-gap: 1.875rem;
  }
  .item-how__body {
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
  }
  .item-how__body {
    padding-top: 0.625rem;
  }
  .item-how__body {
    padding-bottom: 0.625rem;
  }
  .item-how__body {
    padding-left: 0.9375rem;
  }
  .item-how__body {
    padding-right: 0.9375rem;
  }
  .item-how__num {
    font-size: 4rem;
  }
  .item-how__num::before {
    font-size: 4rem;
  }
  .tokenomics::before {
    height: 5rem;
  }
  .tokenomics::after {
    height: 18.75rem;
  }
  .tokenomics__title span {
    font-size: 3.25rem;
  }
  .tokenomics__title span::before {
    font-size: 3.25rem;
  }
  .tokenomics__info {
    padding-top: 0.9375rem;
  }
  .tokenomics__info {
    padding-right: 6.25rem;
  }
  .tokenomics__items {
    row-gap: 0.75rem;
  }
  .tokenomics__items {
    padding: 0.9375rem;
  }
  .tokenomics__bottom {
    padding: 0.9375rem;
  }
  .tokenomics__ca {
    font-size: 1.25rem;
  }
  .tokenomics__how {
    font-size: 1.25rem;
  }
  .join__title {
    margin-bottom: 0.75rem;
  }
  .join__title {
    font-size: 2.625rem;
  }
  .join__title::before {
    font-size: 2.625rem;
  }
  .join__button {
    font-size: 1.625rem;
  }
  .join__socail {
    -webkit-column-gap: 0.375rem;
    -moz-column-gap: 0.375rem;
    column-gap: 0.375rem;
  }
  .join__social-item {
    width: 2rem;
  }
}
@media (max-width: 61.99875em) {
  .header__right {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
  }
  .join__header {
    top: 30%;
    right: 21%;
  }
  .join__socail {
    bottom: 14%;
  }
}
@media (max-width: 47.99875em) {
  .menu__body {
    position: fixed;
    width: 100%;
    height: auto;
    right: -100%;
    top: 0;
    overflow: auto;
    background-color: #fff;
    border-bottom: 0.3125rem solid #000;
    padding: 6.25rem 0.9375rem 1.875rem 0.9375rem;
    transition: right 0.3s;
  }
  .menu-open .menu__body {
    right: 0;
  }
  .menu__list {
    flex-direction: column;
    row-gap: 1.875rem;
    margin-bottom: 1.875rem;
  }
  .menu__link {
    font-size: 1.625rem;
  }
  .icon-menu {
    display: block;
    position: relative;
    width: 1.875rem;
    height: 1.125rem;
    z-index: 5;
  }
  .icon-menu span,
  .icon-menu::after,
  .icon-menu::before {
    content: "";
    transition: all 0.3s ease 0s;
    right: 0;
    position: absolute;
    width: 100%;
    height: 0.125rem;
    background-color: #000;
  }
  .icon-menu::before {
    top: 0;
  }
  .icon-menu::after {
    bottom: 0;
  }
  .icon-menu span {
    top: calc(50% - 0.0625rem);
  }
  .menu-open .icon-menu span {
    width: 0;
  }
  .menu-open .icon-menu::before {
    top: calc(50% - 0.0625rem);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .menu-open .icon-menu::after {
    bottom: calc(50% - 0.0625rem);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .header__right {
    padding: 0.75rem;
    background-color: #ffec01;
  }
  .header__actions {
    flex-direction: column;
    row-gap: 1.875rem;
  }
  .header__social {
    -webkit-column-gap: 1.5rem;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
  }
  .header__social-item {
    width: 2rem;
  }
  .header__button {
    width: 15rem;
  }
  .footer__top-body {
    flex-direction: column-reverse;
  }
  .footer__top-image {
    margin-top: -5rem;
    z-index: 3;
  }
  .footer__top-image img {
    width: 100%;
  }
  .footer__top-menu-header-bottom {
    padding: 0.75rem 0.9375rem;
  }
  .footer__top-menu-main {
    padding: 0.75rem 0.9375rem;
  }
  .footer__top-menu-social {
    gap: 0.75rem;
  }
  .footer__bottom-body {
    flex-direction: column-reverse;
    row-gap: 0.625rem;
  }
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .hero__bg {
    background-position: 40% bottom;
  }
  .hero__container {
    row-gap: 1.875rem;
  }
  .hero__title::before {
    top: -15%;
    left: 75%;
  }
  .hero__title {
    width: 100%;
    max-width: 30rem;
  }
  .hero__image {
    width: 120%;
  }
  .hero__bottom {
    flex-direction: column-reverse;
    row-gap: 1.25rem;
    align-items: center;
  }
  .hero__bottom-item {
    display: none;
  }
  .hero__artwork {
    width: 15rem;
  }
  .hero__artwork-header {
    padding: 0.25rem 0.5rem;
  }
  .hero__artwork-text {
    font-size: 1rem;
    text-align: center;
  }
  .hero__button {
    width: 20rem;
  }
  .about__item:nth-child(1) {
    right: -0.9375rem;
    top: 5%;
  }
  .about__item:nth-child(2) {
    right: -1.875rem;
    top: 0;
  }
  .about__item:nth-child(3) {
    left: 0;
    top: 10%;
  }
  .about__item:nth-child(4) {
    left: -1.875rem;
    bottom: 30%;
  }
  .about__item:nth-child(5) {
    left: -0.9375rem;
    bottom: 25%;
  }
  .how__bg img:nth-child(1) {
    width: 400%;
  }
  .how__image {
    width: 100%;
    margin-top: -1.875rem;
    z-index: 3;
  }
  .how__image img {
    width: 100%;
  }
  .tokenomics__images img:nth-child(1) {
    width: 60%;
  }
  .tokenomics__images img:nth-child(2) {
    width: 110%;
    -webkit-transform: translateX(26%);
    transform: translateX(26%);
    bottom: 10%;
  }
  .tokenomics__body {
    width: calc(100% + 1.875rem);
    margin: 0 -0.9375rem;
  }
  .tokenomics__body::before {
    width: 40%;
  }
  .tokenomics__main {
    padding: 2rem 0.9375rem;
  }
  .tokenomics__info {
    padding-bottom: 3.75rem;
    background-position: 72%;
  }
  .tokenomics__items::before {
    background-size: 6vw 6vw;
  }
  .tokenomics__row {
    justify-content: flex-start;
  }
  .tokenomics__row-img {
    display: none;
  }
  .tokenomics__bottom::before {
    background-size: 6vw 6vw;
  }
  .join__body {
    margin: 0 -0.9375rem;
    width: calc(100% + 1.875rem);
    aspect-ratio: 1106/995;
    background: url(../img/join/01-mob.png) center/contain no-repeat;
  }
  .join__header {
    top: 30%;
    right: 6%;
    width: 40%;
  }
  .join__button {
    width: 100%;
    height: 3.625rem;
  }
  .join__socail {
    bottom: 15%;
    right: 50%;
    width: auto;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
}
@media (max-width: 47.99875em) and (any-hover: none) {
  .icon-menu {
    cursor: default;
  }
}
@media (max-width: 29.99875em) {
  .footer__top-menu::before {
    top: -15%;
    left: 62%;
  }
  .join__socail {
    bottom: 14%;
  }
}
@media (max-width: 23.43625em) {
  .tokenomics__item span:nth-child(1) {
    font-size: 2.125rem;
  }
}
@media (min-width: 47.99875em) and (max-width: 91.875em) {
  .menu__list {
    -webkit-column-gap: clamp(
      0.625rem,
      -1.4261701946rem + 4.2733825247vw,
      2.5rem
    );
    -moz-column-gap: clamp(0.625rem, -1.4261701946rem + 4.2733825247vw, 2.5rem);
    column-gap: clamp(0.625rem, -1.4261701946rem + 4.2733825247vw, 2.5rem);
  }
  .menu__link {
    font-size: clamp(0.875rem, 0.4647659611rem + 0.8546765049vw, 1.25rem);
  }
  .header__right {
    -webkit-column-gap: clamp(1rem, 0.0427872425rem + 1.9942451782vw, 1.875rem);
    -moz-column-gap: clamp(1rem, 0.0427872425rem + 1.9942451782vw, 1.875rem);
    column-gap: clamp(1rem, 0.0427872425rem + 1.9942451782vw, 1.875rem);
  }
  .header__actions {
    -webkit-column-gap: clamp(
      0.75rem,
      -0.4807021167rem + 2.5640295148vw,
      1.875rem
    );
    -moz-column-gap: clamp(
      0.75rem,
      -0.4807021167rem + 2.5640295148vw,
      1.875rem
    );
    column-gap: clamp(0.75rem, -0.4807021167rem + 2.5640295148vw, 1.875rem);
  }
  .header__social {
    -webkit-column-gap: clamp(
      0.75rem,
      -0.0704680778rem + 1.7093530099vw,
      1.5rem
    );
    -moz-column-gap: clamp(0.75rem, -0.0704680778rem + 1.7093530099vw, 1.5rem);
    column-gap: clamp(0.75rem, -0.0704680778rem + 1.7093530099vw, 1.5rem);
  }
  .header__social-item {
    width: clamp(1.5rem, 1.0897659611rem + 0.8546765049vw, 1.875rem);
  }
  .header__button {
    width: clamp(8.75rem, 6.4253404461rem + 4.8431668613vw, 10.875rem);
  }
  .footer__top-image {
    width: clamp(20rem, -2.4261274608rem + 46.7223156035vw, 40.5rem);
  }
  .footer__top-menu {
    width: clamp(25rem, 8.0436597248rem + 35.326628871vw, 40.5rem);
  }
  .page__tokenomics {
    padding-bottom: clamp(15rem, 17.6174467964rem + -2.8489216831vw, 16.25rem);
  }
  .hero__title {
    width: clamp(43.125rem, 8.8704577505rem + 71.3654881627vw, 74.4375rem);
  }
  .hero__image {
    margin-top: clamp(-11.25rem, -3.3976596108rem + -8.5467650494vw, -7.5rem);
  }
  .hero__image {
    width: clamp(43.125rem, 17.2118832085rem + 53.9870658956vw, 66.8125rem);
  }
  .hero__bottom {
    margin-top: clamp(-11.25rem, -2.3506808923rem + -9.6863337227vw, -7rem);
  }
  .hero__bottom-item {
    width: clamp(11.875rem, 8.456383009rem + 7.1223042079vw, 15rem);
  }
  .hero__artwork {
    width: clamp(11.875rem, 8.456383009rem + 7.1223042079vw, 15rem);
  }
  .hero__artwork-text {
    font-size: clamp(0.8125rem, 0.6073829805rem + 0.4273382525vw, 1rem);
  }
  .hero__button {
    width: clamp(18.75rem, 14.6476596108rem + 8.5467650494vw, 22.5rem);
  }
  .about__items {
    height: clamp(46.25rem, 39.4127660181rem + 14.2446084157vw, 52.5rem);
  }
  .about__item:nth-child(1) {
    width: clamp(26.25rem, 22.1476596108rem + 8.5467650494vw, 30rem);
  }
  .about__item:nth-child(2) {
    width: clamp(26.25rem, 22.1476596108rem + 8.5467650494vw, 30rem);
  }
  .about__item:nth-child(3) {
    width: clamp(26.25rem, 22.1476596108rem + 8.5467650494vw, 30rem);
  }
  .about__item:nth-child(4) {
    width: clamp(26.25rem, 22.1476596108rem + 8.5467650494vw, 30rem);
  }
  .about__item:nth-child(5) {
    width: clamp(26.25rem, 22.1476596108rem + 8.5467650494vw, 30rem);
  }
  .about__item:nth-child(6) {
    margin-right: clamp(2.5rem, -11.1744679639rem + 28.4892168314vw, 15rem);
  }
  .about__item:nth-child(6) {
    width: clamp(36.25rem, 24.4215852112rem + 24.6431725592vw, 47.0625rem);
  }
  .how__item.item-how-1 {
    width: clamp(30rem, 19.0604256289rem + 22.7913734651vw, 40rem);
  }
  .how__item.item-how-2 {
    width: clamp(35rem, 29.5302128144rem + 11.3956867326vw, 40rem);
  }
  .how__item.item-how-2 {
    margin-left: clamp(
      5.5625rem,
      -16.385021082rem + 45.7251930144vw,
      25.625rem
    );
  }
  .how__item.item-how-3 {
    width: clamp(35rem, 29.5302128144rem + 11.3956867326vw, 40rem);
  }
  .how__item.item-how-3 {
    margin-left: clamp(
      0.0000000625rem,
      23.2952764195rem + -25.3554028375vw,
      11.125rem
    );
  }
  .tokenomics__body {
    width: clamp(38.75rem, 9.4866385573rem + 60.9669240193vw, 65.5rem);
  }
  .tokenomics__info {
    padding-bottom: clamp(10rem, 5.8976596108rem + 8.5467650494vw, 13.75rem);
  }
  .join__title {
    font-size: clamp(4.25rem, 0.1476596108rem + 8.5467650494vw, 8rem);
  }
  .join__title::before {
    font-size: clamp(4.25rem, 0.1476596108rem + 8.5467650494vw, 8rem);
  }
  .join__button {
    width: clamp(13.75rem, 4.1778724253rem + 19.942451782vw, 22.5rem);
  }
  .join__button {
    font-size: clamp(2.625rem, 1.5310425629rem + 2.2791373465vw, 3.625rem);
  }
  .join__social-item {
    width: clamp(3.4375rem, 1.5914468249rem + 3.8460442722vw, 5.125rem);
  }
}
@media (min-width: 20em) and (max-width: 91.875em) {
  .footer__top {
    padding-top: clamp(1.875rem, 2.6739130435rem + -0.8695652174vw, 2.5rem);
  }
  .footer__top-menu {
    margin-bottom: clamp(1.875rem, 1.3532608696rem + 2.6086956522vw, 3.75rem);
  }
  .footer__top-menu-social-item {
    width: clamp(3.25rem, 3.0586956522rem + 0.9565217391vw, 3.9375rem);
  }
  .page__about {
    padding-top: clamp(2.5rem, 1.8043478261rem + 3.4782608696vw, 5rem);
  }
  .page__about {
    padding-bottom: clamp(2.5rem, 2.152173913rem + 1.7391304348vw, 3.75rem);
  }
  .page__how {
    padding-top: clamp(6.25rem, 5.5543478261rem + 3.4782608696vw, 8.75rem);
  }
  .page__how {
    padding-bottom: clamp(6.25rem, 5.5543478261rem + 3.4782608696vw, 8.75rem);
  }
  .page__tokenomics {
    padding-top: clamp(2.5rem, 1.8043478261rem + 3.4782608696vw, 5rem);
  }
  .page__join {
    padding-top: clamp(3.75rem, 2.7065217391rem + 5.2173913043vw, 7.5rem);
  }
  .hero__container {
    padding-top: clamp(7.5rem, 6.8043478261rem + 3.4782608696vw, 10rem);
  }
  .hero__container {
    padding-bottom: clamp(2.5rem, 0.4130434783rem + 10.4347826087vw, 10rem);
  }
  .about::before {
    height: clamp(3.75rem, 2.8456521739rem + 4.5217391304vw, 7rem);
  }
  .item-about__header-top {
    padding-top: clamp(0.75rem, 0.6804347826rem + 0.347826087vw, 1rem);
  }
  .item-about__header-top {
    padding-bottom: clamp(0.75rem, 0.6804347826rem + 0.347826087vw, 1rem);
  }
  .item-about__header-top span {
    font-size: clamp(1.375rem, 1.3402173913rem + 0.1739130435vw, 1.5rem);
  }
  .item-about__header-bottom span {
    font-size: clamp(1.375rem, 1.3402173913rem + 0.1739130435vw, 1.5rem);
  }
  .item-about__body {
    padding: clamp(0.9375rem, 0.6418478261rem + 1.4782608696vw, 2rem);
  }
  .item-about__body-info h2 {
    font-size: clamp(2.875rem, 2.2836956522rem + 2.9565217391vw, 5rem);
  }
  .item-about__body-info h2::before {
    font-size: clamp(2.875rem, 2.2836956522rem + 2.9565217391vw, 5rem);
  }
  .item-about__body-info p {
    font-size: clamp(1.125rem, 1.0902173913rem + 0.1739130435vw, 1.25rem);
  }
  .item-about__body-info ul {
    margin-top: clamp(0.9375rem, 0.6418478261rem + 1.4782608696vw, 2rem);
  }
  .item-about__body-info ul {
    margin-bottom: clamp(0.9375rem, 0.6418478261rem + 1.4782608696vw, 2rem);
  }
  .how__title {
    font-size: clamp(4rem, 2.8869565217rem + 5.5652173913vw, 8rem);
  }
  .how__title {
    margin-bottom: clamp(1.875rem, 1.7010869565rem + 0.8695652174vw, 2.5rem);
  }
  .how__title::before {
    font-size: clamp(4rem, 2.8869565217rem + 5.5652173913vw, 8rem);
  }
  .how__items {
    row-gap: clamp(1.875rem, 1.7010869565rem + 0.8695652174vw, 2.5rem);
  }
  .item-how__body {
    -webkit-column-gap: clamp(1.25rem, 0.902173913rem + 1.7391304348vw, 2.5rem);
    -moz-column-gap: clamp(1.25rem, 0.902173913rem + 1.7391304348vw, 2.5rem);
    column-gap: clamp(1.25rem, 0.902173913rem + 1.7391304348vw, 2.5rem);
  }
  .item-how__body {
    padding-top: clamp(0.625rem, 0.5380434783rem + 0.4347826087vw, 0.9375rem);
  }
  .item-how__body {
    padding-bottom: clamp(
      0.625rem,
      0.5380434783rem + 0.4347826087vw,
      0.9375rem
    );
  }
  .item-how__body {
    padding-left: clamp(0.9375rem, 0.6766304348rem + 1.3043478261vw, 1.875rem);
  }
  .item-how__body {
    padding-right: clamp(0.9375rem, 0.6766304348rem + 1.3043478261vw, 1.875rem);
  }
  .item-how__num {
    font-size: clamp(4rem, 2.8869565217rem + 5.5652173913vw, 8rem);
  }
  .item-how__num::before {
    font-size: clamp(4rem, 2.8869565217rem + 5.5652173913vw, 8rem);
  }
  .tokenomics::before {
    height: clamp(5rem, 4.652173913rem + 1.7391304348vw, 6.25rem);
  }
  .tokenomics::after {
    height: clamp(18.75rem, 15.6195652174rem + 15.652173913vw, 30rem);
  }
  .tokenomics__title span {
    font-size: clamp(3.25rem, 2.7630434783rem + 2.4347826087vw, 5rem);
  }
  .tokenomics__title span::before {
    font-size: clamp(3.25rem, 2.7630434783rem + 2.4347826087vw, 5rem);
  }
  .tokenomics__info {
    padding-top: clamp(0.9375rem, 0.3288043478rem + 3.0434782609vw, 3.125rem);
  }
  .tokenomics__info {
    padding-right: clamp(6.25rem, -0.7065217391rem + 34.7826086957vw, 31.25rem);
  }
  .tokenomics__items {
    row-gap: clamp(0.75rem, 0.5413043478rem + 1.0434782609vw, 1.5rem);
  }
  .tokenomics__items {
    padding: clamp(0.9375rem, 0.6418478261rem + 1.4782608696vw, 2rem);
  }
  .tokenomics__bottom {
    padding: clamp(0.9375rem, 0.6418478261rem + 1.4782608696vw, 2rem);
  }
  .tokenomics__ca {
    font-size: clamp(1.25rem, 1.1804347826rem + 0.347826087vw, 1.5rem);
  }
  .tokenomics__how {
    font-size: clamp(1.25rem, 1.1804347826rem + 0.347826087vw, 1.5rem);
  }
  .join__title {
    margin-bottom: clamp(0.75rem, 0.5413043478rem + 1.0434782609vw, 1.5rem);
  }
  .join__socail {
    -webkit-column-gap: clamp(
      0.375rem,
      0.2706521739rem + 0.5217391304vw,
      0.75rem
    );
    -moz-column-gap: clamp(0.375rem, 0.2706521739rem + 0.5217391304vw, 0.75rem);
    column-gap: clamp(0.375rem, 0.2706521739rem + 0.5217391304vw, 0.75rem);
  }
}
@media (min-width: 20em) and (max-width: 47.99875em) {
  .page__tokenomics {
    padding-bottom: clamp(12.5rem, 2.6781329524rem + 49.1093352382vw, 26.25rem);
  }
  .about__items {
    height: clamp(43.75rem, 41.9642059913rem + 8.9289700433vw, 46.25rem);
  }
  .about__item:nth-child(1) {
    width: clamp(20rem, 15.5355149783rem + 22.3224251083vw, 26.25rem);
  }
  .about__item:nth-child(2) {
    width: clamp(20rem, 15.5355149783rem + 22.3224251083vw, 26.25rem);
  }
  .about__item:nth-child(3) {
    width: clamp(20rem, 15.5355149783rem + 22.3224251083vw, 26.25rem);
  }
  .about__item:nth-child(4) {
    width: clamp(20rem, 15.5355149783rem + 22.3224251083vw, 26.25rem);
  }
  .about__item:nth-child(5) {
    width: clamp(20rem, 15.5355149783rem + 22.3224251083vw, 26.25rem);
  }
  .join__title {
    font-size: clamp(2.625rem, 1.0177853922rem + 8.036073039vw, 4.875rem);
  }
  .join__title::before {
    font-size: clamp(2.625rem, 1.0177853922rem + 8.036073039vw, 4.875rem);
  }
  .join__button {
    font-size: clamp(1.625rem, 0.6428132952rem + 4.9109335238vw, 3rem);
  }
  .join__social-item {
    width: clamp(2rem, 0.8392338944rem + 5.8038305281vw, 3.625rem);
  }
}
@media (min-width: 30em) and (max-width: 91.875em) {
  .tokenomics__info {
    padding-left: clamp(0.9375rem, 0.3314393939rem + 2.0202020202vw, 2.1875rem);
  }
}
@media (min-width: 23.43625em) and (max-width: 91.875em) {
  .tokenomics__item span:nth-child(1) {
    font-size: clamp(2.125rem, 1.2260917609rem + 3.8355463827vw, 4.75rem);
  }
}
@media (any-hover: hover) {
  .menu__link:hover {
    color: #ffec01;
  }
  .header__social-item:hover svg path {
    fill: #ffec01;
  }
  .header__button:hover {
    background-color: #ffec01;
    letter-spacing: 0.1em;
  }
  .footer__top-menu-item:hover {
    color: #ffec01;
  }
  .footer__top-menu-social-item:hover img {
    scale: 0.95;
  }
  .footer__bottom-body a:hover span {
    text-decoration: underline;
  }
  .hero__artwork-text a:hover {
    text-decoration: underline;
  }
  .hero__button:hover {
    background-color: #ffec01;
    letter-spacing: 0.1em;
  }
  .item-about__body-info a:hover {
    text-decoration: none;
  }
  .tokenomics__ca button:hover {
    color: #001aff;
  }
  .tokenomics__how a:hover {
    text-decoration: none;
  }
  .join__button:hover {
    background-color: #ffec01;
    letter-spacing: 0.1em;
  }
  .join__social-item:hover img {
    scale: 0.95;
  }
}