.img_wr {
  position: relative;
  overflow: hidden;
}
.animate_me.active .dim {
  animation: leftDim 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.3s;
}
.animate_me .img_wr .dim {
  width: 100%;
  height: 100%;
  background: #122c4f;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: opacity 0.5s;
}
.animate_me .dim {
  translate: none;
  rotate: none;
  scale: none;
  transform-origin: 100% 50%;
  transform: scale(0, 1);
}

@keyframes leftDim {
  0% {
    transform: scale(0, 1);
  }
  40% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1) translateX(-100%);
  }
}

/*  */
.right_img.animate_me .dim {
  transform-origin: 0% 50%;
}
.right_img.animate_me.active .dim {
  animation: rightDim 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards 0.3s;
}
@keyframes rightDim {
  0% {
    transform: scale(0, 1);
  }
  40% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1) translateX(100%);
  }
}

/* copy_e */
.copy_e {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.3em;
}
.copy_e .copy {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.3em;
  /* color: #000; */
  opacity: 0.2;
  overflow: hidden;
  white-space: nowrap;
  transition: width 1.5s ease-in-out;
}
.copy_e.active .copy {
  width: 100%;
  opacity: 1;
}
/*  */
.copy_e {
  color: rgba(0, 0, 0, 0.1);
}
.copy_e .copy {
  color: rgba(0, 0, 0, 1);
}
/*  */
.w .copy_e {
  color: rgba(255, 255, 255, 0.1);
}
.w .copy_e .copy {
  color: rgba(255, 255, 255, 1);
}
/*  */
.c1_tit .copy_e {
  color: rgba(0, 57, 115, 0);
}
.c1_tit .copy_e .copy {
  color: rgba(0, 57, 115, 1);
}
.copy_e.d1 .copy {
  transition: width 1s ease-in-out 1s;
}

/* ========================================
   스크롤 등장 애니메이션 (골라서 사용)
   사용법: class="animate_me reveal-zoom" (또는 reveal-slide / reveal-flip)
   ======================================== */

/* 1) reveal-zoom : 중심에서 커지며 등장 */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 0.75s cubic-bezier(0.34, 1.2, 0.64, 1),
    transform 0.75s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.reveal-zoom.active {
  opacity: 1;
  transform: scale(1);
}

/* 2) reveal-slide : 왼쪽에서 슬라이드 인 */
.reveal-slide {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity 0.7s ease-out,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-slide.active {
  opacity: 1;
  transform: translateX(0);
}

/* 3) reveal-flip : 3D로 살짝 뒤집히며 등장 */
.reveal-flip {
  opacity: 0;
  transform: perspective(800px) rotateX(-28deg);
  transform-origin: center top;
  transition:
    opacity 0.6s ease-out,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-flip.active {
  opacity: 1;
  transform: perspective(800px) rotateX(0);
}

/* 4) reveal-chars : 한 글자씩 아래에서 올라오며 등장 (JS로 글자 span 감쌈) */
.reveal-chars .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.28s ease-out,
    transform 0.38s ease-out;
  vertical-align: top;
}
.reveal-chars.active .char {
  opacity: 1;
  transform: translateY(0);
}

/* 이전 호환용 (기본 = zoom) */
.fade-up-in {
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 0.75s cubic-bezier(0.34, 1.2, 0.64, 1),
    transform 0.75s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.fade-up-in.active {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   text-reveal : 스크롤 시 .active 부여 (copy_e와 함께 쓰면 글자 그려지는 효과)
   ======================================== */
.text-reveal {
  /* copy_e와 함께 쓸 때는 JS에서 .active만 부여 */
}
.text-reveal:not(.copy_e) {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1s ease-in-out,
    transform 1s ease-in-out;
}
.text-reveal:not(.copy_e).active {
  opacity: 1;
  transform: translateY(0);
}

/* 줄 단위 순차 등장 */
.text-reveal.text-reveal--stagger:not(.copy_e) > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.8s ease-in-out,
    transform 0.8s ease-in-out;
}
.text-reveal.text-reveal--stagger.active > *:nth-child(1) {
  transition-delay: 0.05s;
}
.text-reveal.text-reveal--stagger.active > *:nth-child(2) {
  transition-delay: 0.12s;
}
.text-reveal.text-reveal--stagger.active > *:nth-child(3) {
  transition-delay: 0.19s;
}
.text-reveal.text-reveal--stagger.active > *:nth-child(4) {
  transition-delay: 0.26s;
}
.text-reveal.text-reveal--stagger.active > *:nth-child(5) {
  transition-delay: 0.33s;
}
.text-reveal.text-reveal--stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}