@charset "UTF-8";

/* =====================
  animation
===================== */
@keyframes circle {
  0% {
    stroke-dashoffset: var(--circumference);
  }

  1% {
    stroke-dashoffset: var(--circumference);
  }

  79% {
    stroke-dashoffset: 0;
  }

  80% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: var(--circumference);
  }
}

@keyframes circle-end {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: var(--circumference);
  }
}

@keyframes zoom {
  0% {
    scale: 1;
  }

  100% {
    scale: 1.15;
  }
}

@keyframes show-up-text {
  0% {
    opacity: 0;
    translate: 0 100%;
  }

  100% {
    opacity: 1;
    translate: 0 0%;
  }
}

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

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

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

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-y {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes scroll-move-color {
  0% {
    transform-origin: 0 0;
    scale: 1 0;
  }

  50% {
    transform-origin: 0 0;
    scale: 1 1;
  }

  50.1% {
    transform-origin: 0 100%;
    scale: 1 1;
  }

  100% {
    transform-origin: 0 100%;
    scale: 1 0;
  }
}

@keyframes scroll-move-arrow {
  0% {
    opacity: 0;
    translate: 0% 0%;
  }

  50% {
    opacity: 1;
    translate: 0% 50%;
  }

  50.1% {
    opacity: 1;
    translate: 0% 50%;
  }

  100% {
    opacity: 0;
    translate: 0% 100%;
  }
}

@keyframes scrollable {
  0% {
    opacity: 0;
    translate: calc((100 / 390) * 20 * 1vw);
  }

  10% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: calc((100 / 390) * -20 * 1vw);
  }
}