/* =================== helper =================== */
/* 노출되지 않을 영역 */
.none {
  display: none;
}

/* 보이진 않지만 리딩되는 영역 */
.voice-only {
  overflow: hidden;
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  color: transparent;
}

/* 큰 pc 화면 */
@media (max-width: 1552px) {
  .xl-pc-show {
    display: block !important;
  }

  .xl-pc-hide {
    display: none !important;
  }
}

/* 태블릿 */
.tab-show {
  display: none !important;
}

.tab-show-flex {
  display: none !important;
}

.tab-show-ib {
  display: none !important;
}

@media (max-width: 900px) {
  .tab-hide {
    display: none !important;
  }
  .tab-show {
    display: block !important;
  }
  .tab-show-flex {
    display: flex !important;
  }
  .tab-show-ib {
    display: inline-block !important;
  }
}

/* 모바일 */
.mb-show {
  display: none !important;
}

.mb-show-flex {
  display: none !important;
}

.mb-show-ib {
  display: none !important;
}

@media (max-width: 600px) {
  .mb-hide {
    display: none !important;
  }
  .mb-show {
    display: block !important;
  }
  .mb-show-flex {
    display: flex !important;
  }
  .mb-show-ib {
    display: inline-block !important;
  }
}

/* 360px 이하 */
.sm-show {
  display: none !important;
}

.sm-show-flex {
  display: none !important;
}

.sm-show-ib {
  display: none !important;
}

@media (max-width: 390px) {
  .sm-hide {
    display: none !important;
  }
  .sm-show {
    display: block !important;
  }
  .sm-show-flex {
    display: flex !important;
  }
  .sm-show-ib {
    display: inline-block !important;
  }
}

/* 320px 이하 */
.xsm-show {
  display: none !important;
}
.xsm-show-flex {
  display: none !important;
}
.xsm-show-ib {
  display: none !important;
}

@media (max-width: 320px) {
  .xsm-hide {
    display: none !important;
  }
  .xsm-show {
    display: block !important;
  }
  .xsm-show-flex {
    display: flex !important;
  }
  .xsm-show-ib {
    display: inline-block !important;
  }
}

/* scroll custom element */
.scroll-custom {
  overflow-y: auto;
}

.scroll-custom::-webkit-scrollbar {
  width: 5px;
}

.scroll-custom::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 위아래로 동동 */
.ani-dongdong {
  animation-name: dongdong;
  animation-duration: 0.7s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes dongdong {
  0% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 세로 애니메이션 */
.scroll-vertical-img {
  animation-name: vertical-scroll;
  animation-duration: 1.2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

@keyframes vertical-scroll {
  0% {
    opacity: 0.3;
    transform: translateY(30%);
  }
  40% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30%);
  }
}

/* keyframes */
@keyframes ptnLogo {
  0% {
    background-position: 2808px;
  }
  100% {
    background-position: 0;
  }
}

@keyframes ptnLogo-right {
  100% {
    background-position: 2808px;
  }
  0% {
    background-position: 0;
  }
}

/* rotation */
@keyframes spin {
  100% {
    rotate: -360deg;
  }
}

/* common fade */
.fade-up {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}

.fade-up.delay-01 {
  transition-delay: 0.3s;
}

.fade-up.delay-02 {
  transition-delay: 0.49s;
}

/* 기울어지는 애니메이션 */
@keyframes slideSkewIn {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
    transform: translate3d(0em, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
      rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  }
}

/* 되돌아가는 애니메이션 */
@keyframes slideSkewOut {
  0% {
    /* transform: translate3d(0em, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg)
      rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); */
    opacity: 1;
  }

  40% {
    transform: translate3d(-110%, 0, 0) scale3d(0.96, 0.96, 1) rotateY(6deg)
      skewX(30deg);
    opacity: 0.3; /* 거의 다 이동할 때쯤 거의 사라짐 */
  }

  100% {
    transform: translate3d(-120%, 0, 0) scale3d(0.95, 0.95, 1) rotateY(8deg)
      skewX(60deg) !important;
    opacity: 0;
  }
}

/* slide-txt */
.slide-txt {
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: slideSkewOut 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.slide-txt.is-active {
  pointer-events: all;
  animation-delay: 0.15s !important;
  animation: slideSkewIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.slide-txt.delay-01 {
  animation-delay: 0.4s !important;
}

.slide-txt.delay-02 {
  animation-delay: 0.5s !important;
}

.slide-txt.delay-03 {
  animation-delay: 0.6s !important;
}

.slide-txt.delay-04 {
  animation-delay: 0.7s !important;
}

/* 사라질 때 딜레이 없이 모든 요소가 동시에 사라지게 */
.slide-txt:not(.is-active) {
  animation: slideSkewOut 2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  animation-delay: 0s !important; /* 사라질 때는 딜레이 없이 즉시 */
}