/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 22 2026 | 08:35:52 */
@charset "utf-8";

/* ============================
   common-animation.css
   공통 애니메이션 초기 상태
============================ */


/* ============================
   기본 fade 계열
   - 모든 기기 적용
============================ */

.anim-fade-up,
.anim-fade-left,
.anim-fade-right {
  opacity: 0;
  will-change: transform, opacity;
}

.anim-fade-up {
  transform: translateY(40px);
}

.anim-fade-left {
  transform: translateX(-50px);
}

.anim-fade-right {
  transform: translateX(50px);
}


/* ============================
   zoom-in
   - 모든 기기 적용
============================ */

.anim-zoom-in {
  opacity: 0;
  transform: scale(0.92);
  will-change: transform, opacity;
}


/* ============================
   count
   - 모든 기기 적용
============================ */

.anim-count {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.anim-count.is-active {
  opacity: 1;
}


/* ============================
   sticky
   - JS는 PC 비터치 환경에서만 실행
   - 태블릿/모바일/터치기기에서는 자연 흐름
============================ */

.anim-sticky-container {
  position: relative;
}

.anim-sticky-sec {
  position: relative;
  will-change: transform;
}

@media all and (max-width: 1024px) {
  .anim-sticky-sec {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    padding-top: 0 !important;
    will-change: auto;
  }
}


/* ============================
   pin + scroll reveal
   - JS는 PC 비터치 환경에서만 실행
   - 외부 컨테이너 pin 고정
   - 내부 리스트는 마스크 안에서 스크롤
============================ */

.anim-pin-container {
  position: relative;
}

.anim-pin-target {
  position: relative;
  z-index: 2;
}

.anim-pin-scroll {
  position: relative;
  z-index: 1;
}

.anim-pin-item {
  will-change: transform, opacity;
}

@media all and (min-width: 1025px) {
  .anim-pin-container {
/*     min-height: calc(100vh - 90px); */
    overflow: visible;
  }

  .anim-pin-target {
    align-self: flex-start;
  }

  .anim-pin-scroll {
/*     max-height: calc(100vh - 90px); */
    overflow: visible;
	  padding-top : 90px;
  }
}

@media all and (max-width: 1024px) {
  .anim-pin-container {
    min-height: auto !important;
    overflow: visible !important;
  }

  .anim-pin-scroll {
    max-height: none !important;
    overflow: visible !important;
	  
  }

  .anim-pin-target,
  .anim-pin-scroll,
  .anim-pin-item {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}


/* ============================
   scroll right / left
   - 모든 기기 적용
   - 부모 섹션 overflow-x hidden 또는 clip 권장
============================ */

.anim-scroll-right,
.anim-scroll-left {
  will-change: transform;
}

.anim-scroll-right {
  transform: translateX(-50vw);
}

.anim-scroll-left {
  transform: translateX(50vw);
}


/* ============================
   floating direction
   - 모든 기기 적용
   - 스크롤 방향에 따라 JS에서 y값 제어
============================ */

.anim-float-dir {
  will-change: transform;
}


/* ============================
   one-fade-in-* legacy
   - 기존 사용 페이지 대응용
============================ */

.one-fade-in-up,
.one-fade-in-down,
.one-fade-in-left,
.one-fade-in-right {
  opacity: 0;
  will-change: transform, opacity;
}

.one-fade-in-up {
  transform: translateY(40px);
}

.one-fade-in-down {
  transform: translateY(-40px);
}

.one-fade-in-left {
  transform: translateX(-40px);
}

.one-fade-in-right {
  transform: translateX(40px);
}