@charset "utf-8";
/* *******************************************************
 * filename : animate.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2025-11-24
******************************************************** */

/* Basic */
@media screen {
    html:not(.no-js) [data-scroll] {
		transition:var(--transition-custom2);
		pointer-events: none;
		will-change: transform;
		will-change: opacity;
    }
	html:not(.no-js) [data-scroll].animated {
		pointer-events: auto;
    }
	html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform;
    }
    html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"].animated {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
    html:not(.no-js) [data-scroll="fade-up"] {
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }
    html:not(.no-js) [data-scroll="fade-down"] {
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    html:not(.no-js) [data-scroll="fade-right"] {
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0);
    }
    html:not(.no-js) [data-scroll="fade-left"] {
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0);
    }
}

/* Custom */
[data-scroll][data-scroll][data-scroll-duration="100"],
body[data-scroll-duration="100"] [data-scroll] {
    transition-duration: 0.1s;
}
[data-scroll][data-scroll][data-scroll-delay="100"],
body[data-scroll-delay="100"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="100"].animated,
body[data-scroll-delay="100"] [data-scroll].animated {
    transition-delay: 0.1s;
}
[data-scroll][data-scroll][data-scroll-duration="150"],
body[data-scroll-duration="150"] [data-scroll] {
    transition-duration: 0.15s;
}
[data-scroll][data-scroll][data-scroll-delay="150"],
body[data-scroll-delay="150"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="150"].animated,
body[data-scroll-delay="150"] [data-scroll].animated {
    transition-delay: 0.15s;
}
[data-scroll][data-scroll][data-scroll-duration="200"],
body[data-scroll-duration="200"] [data-scroll] {
    transition-duration: 0.2s;
}
[data-scroll][data-scroll][data-scroll-delay="200"],
body[data-scroll-delay="200"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="200"].animated,
body[data-scroll-delay="200"] [data-scroll].animated {
    transition-delay: 0.2s;
}
[data-scroll][data-scroll][data-scroll-duration="250"],
body[data-scroll-duration="250"] [data-scroll] {
    transition-duration: 0.25s;
}
[data-scroll][data-scroll][data-scroll-delay="250"],
body[data-scroll-delay="250"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="250"].animated,
body[data-scroll-delay="250"] [data-scroll].animated {
    transition-delay: 0.25s;
}
[data-scroll][data-scroll][data-scroll-duration="300"],
body[data-scroll-duration="300"] [data-scroll] {
    transition-duration: 0.3s;
}
[data-scroll][data-scroll][data-scroll-delay="300"],
body[data-scroll-delay="300"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="300"].animated,
body[data-scroll-delay="300"] [data-scroll].animated {
    transition-delay: 0.3s;
}
[data-scroll][data-scroll][data-scroll-duration="350"],
body[data-scroll-duration="350"] [data-scroll] {
    transition-duration: 0.35s;
}
[data-scroll][data-scroll][data-scroll-delay="350"],
body[data-scroll-delay="350"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="350"].animated,
body[data-scroll-delay="350"] [data-scroll].animated {
    transition-delay: 0.35s;
}
[data-scroll][data-scroll][data-scroll-duration="400"],
body[data-scroll-duration="400"] [data-scroll] {
    transition-duration: 0.4s;
}
[data-scroll][data-scroll][data-scroll-delay="400"],
body[data-scroll-delay="400"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="400"].animated,
body[data-scroll-delay="400"] [data-scroll].animated {
    transition-delay: 0.4s;
}
[data-scroll][data-scroll][data-scroll-duration="450"],
body[data-scroll-duration="450"] [data-scroll] {
    transition-duration: 0.45s;
}
[data-scroll][data-scroll][data-scroll-delay="450"],
body[data-scroll-delay="450"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="450"].animated,
body[data-scroll-delay="450"] [data-scroll].animated {
    transition-delay: 0.45s;
}
[data-scroll][data-scroll][data-scroll-duration="500"],
body[data-scroll-duration="500"] [data-scroll] {
    transition-duration: 0.5s;
}
[data-scroll][data-scroll][data-scroll-delay="500"],
body[data-scroll-delay="500"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="500"].animated,
body[data-scroll-delay="500"] [data-scroll].animated {
    transition-delay: 0.5s;
}
[data-scroll][data-scroll][data-scroll-duration="550"],
body[data-scroll-duration="550"] [data-scroll] {
    transition-duration: 0.55s;
}
[data-scroll][data-scroll][data-scroll-delay="550"],
body[data-scroll-delay="550"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="550"].animated,
body[data-scroll-delay="550"] [data-scroll].animated {
    transition-delay: 0.55s;
}
[data-scroll][data-scroll][data-scroll-duration="600"],
body[data-scroll-duration="600"] [data-scroll] {
    transition-duration: 0.6s;
}
[data-scroll][data-scroll][data-scroll-delay="600"],
body[data-scroll-delay="600"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="600"].animated,
body[data-scroll-delay="600"] [data-scroll].animated {
    transition-delay: 0.6s;
}
[data-scroll][data-scroll][data-scroll-duration="650"],
body[data-scroll-duration="650"] [data-scroll] {
    transition-duration: 0.65s;
}
[data-scroll][data-scroll][data-scroll-delay="650"],
body[data-scroll-delay="650"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="650"].animated,
body[data-scroll-delay="650"] [data-scroll].animated {
    transition-delay: 0.65s;
}
[data-scroll][data-scroll][data-scroll-duration="700"],
body[data-scroll-duration="700"] [data-scroll] {
    transition-duration: 0.7s;
}
[data-scroll][data-scroll][data-scroll-delay="700"],
body[data-scroll-delay="700"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="700"].animated,
body[data-scroll-delay="700"] [data-scroll].animated {
    transition-delay: 0.7s;
}
[data-scroll][data-scroll][data-scroll-duration="750"],
body[data-scroll-duration="750"] [data-scroll] {
    transition-duration: 0.75s;
}
[data-scroll][data-scroll][data-scroll-delay="750"],
body[data-scroll-delay="750"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="750"].animated,
body[data-scroll-delay="750"] [data-scroll].animated {
    transition-delay: 0.75s;
}
[data-scroll][data-scroll][data-scroll-duration="800"],
body[data-scroll-duration="800"] [data-scroll] {
    transition-duration: 0.8s;
}
[data-scroll][data-scroll][data-scroll-delay="800"],
body[data-scroll-delay="800"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="800"].animated,
body[data-scroll-delay="800"] [data-scroll].animated {
    transition-delay: 0.8s;
}
[data-scroll][data-scroll][data-scroll-duration="850"],
body[data-scroll-duration="850"] [data-scroll] {
    transition-duration: 0.85s;
}
[data-scroll][data-scroll][data-scroll-delay="850"],
body[data-scroll-delay="850"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="850"].animated,
body[data-scroll-delay="850"] [data-scroll].animated {
    transition-delay: 0.85s;
}
[data-scroll][data-scroll][data-scroll-duration="900"],
body[data-scroll-duration="900"] [data-scroll] {
    transition-duration: 0.9s;
}
[data-scroll][data-scroll][data-scroll-delay="900"],
body[data-scroll-delay="900"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="900"].animated,
body[data-scroll-delay="900"] [data-scroll].animated {
    transition-delay: 0.9s;
}
[data-scroll][data-scroll][data-scroll-duration="950"],
body[data-scroll-duration="950"] [data-scroll] {
    transition-duration: 0.95s;
}
[data-scroll][data-scroll][data-scroll-delay="950"],
body[data-scroll-delay="950"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="950"].animated,
body[data-scroll-delay="950"] [data-scroll].animated {
    transition-delay: 0.95s;
}
[data-scroll][data-scroll][data-scroll-duration="1000"],
body[data-scroll-duration="1000"] [data-scroll] {
    transition-duration: 1s;
}
[data-scroll][data-scroll][data-scroll-delay="1000"],
body[data-scroll-delay="1000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1000"].animated,
body[data-scroll-delay="1000"] [data-scroll].animated {
    transition-delay: 1s;
}
[data-scroll][data-scroll][data-scroll-duration="1100"],
body[data-scroll-duration="1100"] [data-scroll] {
    transition-duration: 1.1s;
}
[data-scroll][data-scroll][data-scroll-delay="1100"],
body[data-scroll-delay="1100"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1100"].animated,
body[data-scroll-delay="1100"] [data-scroll].animated {
    transition-delay: 1.1s;
}
[data-scroll][data-scroll][data-scroll-duration="1200"],
body[data-scroll-duration="1200"] [data-scroll] {
    transition-duration: 1.2s;
}
[data-scroll][data-scroll][data-scroll-delay="1200"],
body[data-scroll-delay="1200"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1200"].animated,
body[data-scroll-delay="1200"] [data-scroll].animated {
    transition-delay: 1.2s;
}
[data-scroll][data-scroll][data-scroll-duration="1300"],
body[data-scroll-duration="1300"] [data-scroll] {
    transition-duration: 1.3s;
}
[data-scroll][data-scroll][data-scroll-delay="1300"],
body[data-scroll-delay="1300"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1300"].animated,
body[data-scroll-delay="1300"] [data-scroll].animated {
    transition-delay: 1.3s;
}
[data-scroll][data-scroll][data-scroll-duration="1400"],
body[data-scroll-duration="1400"] [data-scroll] {
    transition-duration: 1.4s;
}
[data-scroll][data-scroll][data-scroll-delay="1400"],
body[data-scroll-delay="1400"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1400"].animated,
body[data-scroll-delay="1400"] [data-scroll].animated {
    transition-delay: 1.4s;
}
[data-scroll][data-scroll][data-scroll-duration="1500"],
body[data-scroll-duration="1500"] [data-scroll] {
    transition-duration: 1.5s;
}
[data-scroll][data-scroll][data-scroll-delay="1500"],
body[data-scroll-delay="1500"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1500"].animated,
body[data-scroll-delay="1500"] [data-scroll].animated {
    transition-delay: 1.5s;
}
[data-scroll][data-scroll][data-scroll-duration="1600"],
body[data-scroll-duration="1600"] [data-scroll] {
    transition-duration: 1.6s;
}
[data-scroll][data-scroll][data-scroll-delay="1600"],
body[data-scroll-delay="1600"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1600"].animated,
body[data-scroll-delay="1600"] [data-scroll].animated {
    transition-delay: 1.6s;
}
[data-scroll][data-scroll][data-scroll-duration="1700"],
body[data-scroll-duration="1700"] [data-scroll] {
    transition-duration: 1.7s;
}
[data-scroll][data-scroll][data-scroll-delay="1700"],
body[data-scroll-delay="1700"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1700"].animated,
body[data-scroll-delay="1700"] [data-scroll].animated {
    transition-delay: 1.7s;
}
[data-scroll][data-scroll][data-scroll-duration="1800"],
body[data-scroll-duration="1800"] [data-scroll] {
    transition-duration: 1.8s;
}
[data-scroll][data-scroll][data-scroll-delay="1800"],
body[data-scroll-delay="1800"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1800"].animated,
body[data-scroll-delay="1800"] [data-scroll].animated {
    transition-delay: 1.8s;
}
[data-scroll][data-scroll][data-scroll-duration="1900"],
body[data-scroll-duration="1900"] [data-scroll] {
    transition-duration: 1.9s;
}
[data-scroll][data-scroll][data-scroll-delay="1900"],
body[data-scroll-delay="1900"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1900"].animated,
body[data-scroll-delay="1900"] [data-scroll].animated {
    transition-delay: 1.9s;
}
[data-scroll][data-scroll][data-scroll-duration="2000"],
body[data-scroll-duration="2000"] [data-scroll] {
    transition-duration: 2s;
}
[data-scroll][data-scroll][data-scroll-delay="2000"],
body[data-scroll-delay="2000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="2000"].animated,
body[data-scroll-delay="2000"] [data-scroll].animated {
    transition-delay: 2s;
}
[data-scroll][data-scroll][data-scroll-duration="3000"],
body[data-scroll-duration="3000"] [data-scroll] {
    transition-duration: 3s;
}
[data-scroll][data-scroll][data-scroll-delay="3000"],
body[data-scroll-delay="3000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="3000"].animated,
body[data-scroll-delay="3000"] [data-scroll].animated {
    transition-delay: 3s;
}

[data-scroll][data-scroll][data-scroll-duration="4000"],
body[data-scroll-duration="4000"] [data-scroll] {
    transition-duration: 3s;
}
[data-scroll][data-scroll][data-scroll-delay="4000"],
body[data-scroll-delay="4000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="4000"].animated,
body[data-scroll-delay="4000"] [data-scroll].animated {
    transition-delay: 3s;
}
[data-scroll][data-scroll][data-scroll-easing="linear"],
body[data-scroll-easing="linear"] [data-scroll] {
    transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
[data-scroll][data-scroll][data-scroll-easing="ease"],
body[data-scroll-easing="ease"] [data-scroll] {
    transition-timing-function: ease;
}
[data-scroll][data-scroll][data-scroll-easing="ease-in"],
body[data-scroll-easing="ease-in"] [data-scroll] {
    transition-timing-function: ease-in;
}
[data-scroll][data-scroll][data-scroll-easing="ease-out"],
body[data-scroll-easing="ease-out"] [data-scroll] {
    transition-timing-function: ease-out;
}
[data-scroll][data-scroll][data-scroll-easing="ease-in-out"],
body[data-scroll-easing="ease-in-out"] [data-scroll] {
    transition-timing-function: ease-in-out;
}
/* 좀 더 강한 bounce-up 효과 */
[data-scroll="active-up"] {
    opacity: 0;
    transform: translate3d(0, 60px, 0) scale(0.95);
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-scroll="active-up"].animated {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
[data-scroll="icon-pop"] {opacity:0;transform:translate3d(0, 20px, 0) scale(0.8);transition:opacity .6s cubic-bezier(0.25, 0.8, 0.25, 1),transform .6s cubic-bezier(0.25, 0.8, 0.25, 1);}
[data-scroll="icon-pop"].animated {opacity:1;transform:translate3d(0, 0, 0) scale(1);}
[data-scroll="card-up"] {opacity:0;transform:translate3d(0,40px,0) scale(0.96);transition:opacity .7s cubic-bezier(0.25,0.8,0.25,1),transform .7s cubic-bezier(0.25,0.8,0.25,1);}
[data-scroll="card-up"].animated {opacity:1;transform:translate3d(0,0,0) scale(1);}

/* pro-title: 살짝 블러 해제 효과 */
.pro-title[data-scroll="fade-up"] {filter:blur(6px);transform:translateY(30px) scale(0.96);transition:opacity .7s ease,transform .7s ease,filter .7s ease;}
.pro-title.animated {filter:blur(0);transform:translateY(0) scale(1);}

/* pro-item 전체 묶음: 부드러운 fade-up + 살짝 확대 */
[data-scroll="item-up"] {opacity:0;transform:translate3d(0,40px,0) scale(0.97);transition:opacity .7s cubic-bezier(0.25,0.8,0.25,1),transform .7s cubic-bezier(0.25,0.8,0.25,1);}
[data-scroll="item-up"].animated {opacity:1;transform:translate3d(0,0,0) scale(1);}

/* 제목만 약간 더 강한 up 효과 */
.pro-item-title {margin-bottom:8px;font-size:18px;font-weight:700;}

/* 본문 텍스트는 더 부드러운 페이드 */
.pro-item p {font-size:16px;line-height:1.7;color:var(--text-2);}

/* 스크롤 인 애니메이션 (animate.css 확장) */
[data-scroll="pro-card"] {opacity:0;transform:translate3d(0,40px,0) scale(0.96);transition:opacity .7s cubic-bezier(0.25,0.8,0.25,1),transform .7s cubic-bezier(0.25,0.8,0.25,1);}
[data-scroll="pro-card"].animated {opacity:1;transform:translate3d(0,0,0) scale(1);}

/* 옵션: 모바일/태블릿에서 그리드 변경 (원하시면 사용) */
@media (max-width:1024px) {
  .pro-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px) {
  .pro-grid {grid-template-columns:1fr;}
  .product-sub-area.product-grid-area {padding:80px 0;}
}