@charset "utf-8";
#inc02{background-color:#fff}
#inc02 .sticky-container{height:400vh}
#inc02 .sticky-wrapper{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
#inc02 .group-title{width:100%;text-align:center}
#inc02 .group-title .tit--ko{padding-bottom:45px}
#inc02 .group-cont{width:calc(100% - 80px);padding:120px 0;background-color:#f4f4f6;border-radius:20px}
#inc02 .group-cont .col-2{display:flex;justify-content:space-between}

#inc02 .group-cont .text-box .step-list{display:flex;flex-direction:column;gap:30px;counter-reset:step}
#inc02 .group-cont .text-box .step-list li{position:relative;display:flex;align-items:center;gap:35px}
#inc02 .group-cont .text-box .step-list li .progress-bar{position:absolute;width:2px;height:30px;background-color:#ccc;left:46.5px;top:100%;transform:translateZ(0);will-change:transform}
#inc02 .group-cont .text-box .step-list li .progress-bar .bar{position:absolute;left:0;top:0;width:100%;height:0%;background-color:var(--primary)}
#inc02 .group-cont .text-box .step-list li .num{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:97px;aspect-ratio:1;border-radius:100px;background-color:#fff;color:rgba(29,41,69,0.5);font-family:var(--e-font);font-size:14px;font-weight:600;line-height:1;transition:all 0.3s ease}
#inc02 .group-cont .text-box .step-list li .num::after{counter-increment:step;content:counter(step,decimal-leading-zero);font-size:22px}
#inc02 .group-cont .text-box .step-list li dt{padding-bottom:5px;font-size:22px;font-weight:600;color:rgba(29,41,69,0.5);transition:color .3s}
#inc02 .group-cont .text-box .step-list li dd{font-size:18px;line-height:1.6;color:rgba(83,91,115,0.5);transition:color .3s}

#inc02 .group-cont .thumb-box{max-width:720px;width:100%;aspect-ratio:720 / 502}
#inc02 .group-cont .thumb-box .thumb-list{position:relative;width:100%;height:100%;border-radius:15px;overflow:hidden}
#inc02 .group-cont .thumb-box .thumb-list img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;clip-path:ellipse(50% 0% at 50% 100%);transform:scale(1.2);transition:clip-path 1.2s, transform 1s;will-change:clip-path, transform}

#inc02 .group-cont .text-box .step-list li.active .num{background-color:var(--primary);color:#fff}
#inc02 .group-cont .text-box .step-list li.active dt{color:#1d2945}
#inc02 .group-cont .text-box .step-list li.active dd{color:#535b73}
#inc02 .group-cont .thumb-box .thumb-list img.active{clip-path:ellipse(300% 300% at 50% 100%);animation:imgChange 1.2s;transform:translateY(0) scale(1)}

/* 반응형 [s] */
@media (max-width:1600px){
#inc02{padding:0 20px}
#inc02 .group-title .tit--ko{padding-bottom:30px}
#inc02 .group-cont{width:100%;padding:120px 25px}    
}
@media (max-width:1400px){
#inc02 .group-title .tit--ko{padding-bottom:24px}
#inc02 .group-cont .text-box .step-list li .progress-bar{left:44px}
#inc02 .group-cont .text-box .step-list li dt{font-size:20px}
#inc02 .group-cont .text-box .step-list li dd{font-size:17px}
#inc02 .group-cont .text-box .step-list li .num{width:90px}
#inc02 .group-cont .thumb-box{max-width:640px}
}
@media (max-width:1200px){
#inc02 .group-title .tit--ko{padding-bottom:20px}
#inc02 .group-cont{padding:90px 25px}
#inc02 .group-cont .text-box .step-list{gap:24px}
#inc02 .group-cont .text-box .step-list li{gap:20px}
#inc02 .group-cont .text-box .step-list li .progress-bar{left:39px;height:24px}
#inc02 .group-cont .text-box .step-list li dt{padding-bottom:3px;font-size:18px}
#inc02 .group-cont .text-box .step-list li dd{font-size:16px}
#inc02 .group-cont .text-box .step-list li .num{width:80px}
#inc02 .group-cont .text-box .step-list li .num::after{font-size:18px}
#inc02 .group-cont .thumb-box{max-width:520px}
}
@media (max-width:1024px){
#inc02 .group-title{padding-bottom:30px}
#inc02 .group-title .tit--ko{padding-bottom:12px}
#inc02 .sticky-container{height:auto}
#inc02 .sticky-wrapper{position:static;height:auto}
#inc02 .group-cont{padding:34px 25px}
#inc02 .group-cont .col-2{flex-direction:column-reverse;gap:26px}
#inc02 .group-cont .text-box .step-list{gap:18px;max-width:665px;width:100%;margin:0 auto}
#inc02 .group-cont .text-box .step-list li .progress-bar{left:34px;height:18px}
#inc02 .group-cont .text-box .step-list li dt{font-size:16px}
#inc02 .group-cont .text-box .step-list li dd{font-size:15px;word-break:keep-all}
#inc02 .group-cont .text-box .step-list li .num{width:70px;font-size:13px}
#inc02 .group-cont .text-box .step-list li .num::after{font-size:16px}
#inc02 .group-cont .thumb-box{max-width:665px;margin:0 auto;aspect-ratio:720 / 435}
}
@media (max-width:768px){
#inc02 .group-title{padding-bottom:24px}
#inc02 .group-title .tit--ko{padding-bottom:10px}
#inc02 .group-cont{padding:20px 20px 36px}
#inc02 .group-cont .thumb-box{aspect-ratio:720 / 420}
}
@media (max-width:480px){
#inc02 .group-title{padding-bottom:20px}
#inc02 .group-cont{padding:20px 20px 30px}
#inc02 .group-cont .col-2{gap:20px}
#inc02 .group-cont .text-box .step-list{gap:12px}
#inc02 .group-cont .text-box .step-list li{gap:16px}
#inc02 .group-cont .text-box .step-list li dt{padding-bottom:0;font-size:15px}
#inc02 .group-cont .text-box .step-list li dd{font-size:14px}
#inc02 .group-cont .text-box .step-list li .num{gap:4px;width:60px;font-size:12px}
#inc02 .group-cont .text-box .step-list li .num::after{font-size:14px}
#inc02 .group-cont .text-box .step-list li .progress-bar{display:none;left:29px}
#inc02 .group-cont .thumb-box{aspect-ratio:720 / 400}
}
/* 반응형 [e] */