/* common */
html {
  position: relative;
  height: 100%;
  font-family: 'Pretendard', sans-serif;
  font-size: 62.5%;
}

body {
  position: relative;
  height: 100%;
  width: 100%;
  letter-spacing: 0;
  line-height: 1.2;
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);

  &[data-page='main'] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    transition: transform 0.1s;
  }
}

/* common color class */
.color-black {
  color: var(--color-black) !important;
}

/* drag-scroll-x */
.drag-scroll-x {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}


/* responsive */
@media screen and (max-width: 1920px) {
  html {
    font-size: calc(10 * 100vw / 1920);
  }
}

@media screen and (max-width: 1440px) {
  html {
    font-size: calc(10 * 100vw / 1440);
  }
}

@media screen and (max-width: 1280px) {
  html {
    font-size: calc(10 * 100vw / 1280);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: calc(10 * 100vw / 1024);
  }
}

@media screen and (max-width: 780px) {
  html {
    font-size: calc(10 * 100vw / 780);
  }
}

@media screen and (max-width: 600px) {
  html {
    font-size: calc(10 * 100vw / 600);
  }
}

@media screen and (max-width: 480px) {
  html {
    font-size: calc(10 * 100vw / 480);
  }

  /* drag-scroll-x */
  .drag-scroll-x {
    cursor: grab;

    &.dragging {
      cursor: grabbing;
    }
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 62.5%;
  }
}

/* animation */
.move-up-container,
.scale-down-container,
.scale-up-container {
  overflow: hidden;
}

.fade-in,
.fade-in-target {
  opacity: 0;
}

.fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

.fade-up,
.fade-up-target {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.fade-up {
  animation: fadeUpShow 1s ease-in-out forwards;
}

.fade-up-in-and-out,
.fade-up-in-and-out-target {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.fade-up-in-and-out {
  &:nth-child(1) {
    animation:
      fadeUpShow 1s ease-in-out forwards 0.5s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(2) {
    animation:
      fadeUpShow 1s ease-in-out forwards 1s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(3) {
    animation:
      fadeUpShow 1s ease-in-out forwards 1.5s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(4) {
    animation:
      fadeUpShow 1s ease-in-out forwards 2s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(5) {
    animation:
      fadeUpShow 1s ease-in-out forwards 2.5s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(6) {
    animation:
      fadeUpShow 1s ease-in-out forwards 3s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
}

.move-up-content,
.move-up-content-target {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.move-up-content {
  animation: 1s ease-out moveUpShow forwards;
}

.move-up-in-and-out-container {
  overflow: hidden;

  &:nth-child(1) .move-up-in-and-out-content {
    animation:
      moveUpShow 1s ease-in-out forwards 1s,
      moveUpHide 1s ease-in-out forwards 6s;
  }
  &:nth-child(2) .move-up-in-and-out-content {
    animation:
      moveUpShow 1s ease-in-out forwards 1.5s,
      moveUpHide 1s ease-in-out forwards 6s;
  }
  &:nth-child(3) .move-up-in-and-out-content {
    animation:
      moveUpShow 1s ease-in-out forwards 2s,
      moveUpHide 1s ease-in-out forwards 6s;
  }
}

.move-up-in-and-out-content,
.move-up-in-and-out-content-target {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.scale-down-content,
.scale-down-content-target {
  transform: scale(1.1);
}

.scale-down-content {
  animation: scaleDown 2s ease-in-out forwards;
}

.scale-up-content {
  animation: scaleUp 2s ease-in-out forwards;
}

.move-rtl,
.move-rtl-target {
  width: calc(100% + 20rem) !important;
  transform: translate3d(0, 0, 0);
}

.move-rtl {
  animation: moveRtl 10s ease-in-out forwards;
}

.move-ltr,
.move-ltr-target {
  width: calc(100% + 20rem) !important;
  transform: translate3d(-20rem, 0, 0);
}

.move-ltr {
  animation: moveLtr 10s ease-in-out forwards;
}

.x-scale-ltr,
.x-scale-ltr-target {
  transform: scale3d(0, 1, 1);
  transform-origin: left;
}

.x-scale-ltr {
  animation: xScaleUp 1s ease-in-out forwards;
}

.x-scale-rtl,
.x-scale-rtl-target {
  transform: scale3d(0, 1, 1);
  transform-origin: right;
}

.x-scale-rtl {
  animation: xScaleUp 1s ease-in-out forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeUpShow {
  0% {
    transform: translate3d(0, 2rem, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fadeUpHide {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -2rem, 0);
    opacity: 0;
  }
}

@keyframes moveUpShow {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes moveUpHide {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes scaleUpLarge {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

@keyframes moveRtl {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-20rem, 0, 0);
  }
}

@keyframes moveLtr {
  0% {
    transform: translate3d(-20rem, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes xScaleUp {
  0% {
    transform: scale3d(0, 1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}