@charset "UTF-8";

/* 처음에 로딩이 닫히는 ani */
@keyframes close {
  0% {
    height: 0px;
    width: 83px;
    padding: 0 10px;
    border-left: 1px solid var(--white);
    border-right: 1px solid var(--white);
  }
  20% {
    height: 60px;
    width: 83px;
    padding: 0 10px;
    border-left: 1px solid var(--white);
    border-right: 1px solid var(--white);
  }
  80% {
    height: 60px;
    width: 83px;
    padding: 0 10px;
    border-left: 1px solid var(--white);
    border-right: 1px solid var(--white);
    overflow: hidden;
  }
  100% {
    height: 60px;
    width: 0;
    padding: 0;
    border-left: 0.5px solid var(--white);
    border-right: 0.5px solid var(--white);
    overflow: hidden;
  }
}

/* 이후에 다시 열리는 ani */
@keyframes open {
  0% {
    height: 60px;
    width: 0px;
    border-left: 0.5px solid var(--white);
    border-right: 0.5px solid var(--white);
  }
  80% {
    height: 150px;
    width: 0px;
    border-left: 0.5px solid var(--white);
    border-right: 0.5px solid var(--white);
  }
  100% {
    height: 150px;
    width: 150px;
    border-left: 0.5px solid var(--white);
    border-right: 0.5px solid var(--white);
  }
}
@keyframes tit-width {
  /* S, G 가지고 있는 요소 열리는 ani */
  0% {
    width: 0px;
  }
  80% {
    width: 0px;
  }
  100% {
    width: 150px;
  }
}

/* 좌우 외곽선 자연스럽게 out */
@keyframes line-none {
  0% {
    height: 150px;
    width: 150px;
  }
  50% {
    height: 0;
    width: 150px;
  }
  100% {
    height: 0;
    width: 150px;
  }
}

/* S 와 G 각각에 ani */
@keyframes tit-first {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(calc(50% - 28px), 0);
  }
  75% {
    transform: translate(calc(50% - 28px), calc(50% - 12px));
  }
  100% {
    transform: translate(calc(50% - 28px), calc(50% - 12px));
  }
}
@keyframes tit-last {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(calc(-50% + 24px), 0);
  }
  75% {
    transform: translate(calc(-50% + 24px), calc(-50% + 10px));
  }
  100% {
    transform: translate(calc(-50% + 24px), calc(-50% + 10px));
  }
}