@charset "utf-8";

#inc02 .sticky-container{height:400vh}
#inc02 .sticky-wrapper{position:sticky;top:0;height:100vh;display:flex;align-items:center}
#inc02 .col-2{display:grid;grid-template-columns:repeat(2,1fr);align-items:end}

#inc02 .thumb-box{overflow:hidden;width:860px;aspect-ratio:860 / 738}
#inc02 .thumb-box .thumb-list{position:relative;width:100%;height:100%}
#inc02 .thumb-box img{position:absolute;inset: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 .text-box{padding-left:55px}
#inc02 .text-box .group-tit{padding-bottom:85px}
#inc02 .text-box .group-tit p{color:#666}

#inc02 .text-box .program-list{display:flex;flex-direction:column;border-bottom:1px solid #e1e1e1}
#inc02 .text-box .program-list li{position:relative;display:flex;flex-direction:column;padding:25px 0;border-top:1px solid #e1e1e1;transition:padding 0.4s ease, border-color 0.4s ease}
#inc02 .text-box .program-list li h3{position:relative;font-size:25px;font-weight:700;color:#aaa;transition:color 0.4s ease,padding 0.4s ease}
#inc02 .text-box .program-list li h3::before{opacity:0;visibility:hidden;position:absolute;top:50%;left:0;transform:translate(-10px, -50%);content:'';width:7px;aspect-ratio:1;background-color:#000;transition:opacity 0.4s, visibility 0s, transform 0.4s}
#inc02 .text-box .program-list li p.desc{display:grid;grid-template-rows:0fr;overflow:hidden;margin:0;padding-top:0;font-size:18px;line-height:1.4;color:#000;white-space:pre-line;word-break:keep-all;transition:grid-template-rows 0.5s ease,padding-top 0.4s ease}
#inc02 .text-box .program-list li p.desc > span {min-height:0;overflow:hidden}
#inc02 .text-box .program-list li a.ic-arrow{opacity:0;visibility:hidden;position:absolute;top:30px;right:0;display:flex;align-items:center;justify-content:center;width:39px;aspect-ratio:1;background-color:#000;transition:opacity 0.4s, visibility 0s}
#inc02 .text-box .program-list li a.ic-arrow svg{position:relative;z-index:1;flex-shrink:0;stroke:#fff;transition:stroke 0.4s ease}

/* hover + on 상태 */
#inc02 .thumb-box img.active{clip-path:ellipse(300% 300% at 50% 100%);animation:imgChange 1.2s;transform:translateY(0) scale(1)}
#inc02 .text-box .program-list li.active{padding:30px 0;border-color:#000}
#inc02 .text-box .program-list li.active p.desc {grid-template-rows:1fr;padding-top:20px}
#inc02 .text-box .program-list li.active h3{color:#000;padding-left:25px}
#inc02 .text-box .program-list li.active h3::before{opacity:1;visibility:visible;transform:translate(0, -50%)}
#inc02 .text-box .program-list li.active .ic-arrow{opacity:1;visibility:visible}

@media (hover:hover){
#inc02 .text-box .program-list li a.ic-arrow:hover {color:#000}
#inc02 .text-box .program-list li a.ic-arrow:hover::before{transform:scaleX(1) translateZ(0)}
#inc02 .text-box .program-list li a.ic-arrow:hover svg{stroke:#000}
}

/* 반응형 [s] */
@media (max-width:1800px){
#inc02{padding:0 20px}
}
@media (max-width:1600px){
#inc02 .col-2{grid-template-columns:1fr 1.6fr}
#inc02 .thumb-box{width:660px;aspect-ratio:860 / 860}
#inc02 .text-box .group-tit{padding-bottom:55px}
#inc02 .text-box .program-list li h3{font-size:22px}
#inc02 .text-box .program-list li p.desc{font-size:17px}
}
@media (max-width:1400px){
#inc02 .thumb-box{width:570px;aspect-ratio:860 / 1020}
#inc02 .text-box .program-list li{padding:22px 0}
#inc02 .text-box .program-list li h3{font-size:20px}
}
@media (max-width:1200px){
#inc02 .thumb-box{width:490px}
#inc02 .text-box{padding-left:40px}
#inc02 .text-box .group-tit{padding-bottom:40px}
#inc02 .text-box .program-list li{padding:20px 0}
#inc02 .text-box .program-list li.active{padding:26px 0}
#inc02 .text-box .program-list li h3{font-size:18px}
#inc02 .text-box .program-list li h3::before{width:5px}
#inc02 .text-box .program-list li.active h3{padding-left:20px}
#inc02 .text-box .program-list li a.ic-arrow{top:26px;width:34px}
#inc02 .text-box .program-list li a.ic-arrow svg{width:20px;height:20px}
#inc02 .text-box .program-list li p.desc{font-size:16px}
}
@media (max-width:1024px){
#inc02{padding:0 20px 100px}
#inc02 .sticky-container{height:auto}
#inc02 .sticky-wrapper{position:static;height:auto}
#inc02 .col-2{grid-template-columns:repeat(1,1fr);gap:30px}
#inc02 .thumb-box{order:1;width:100%;aspect-ratio:860 / 490}
#inc02 .text-box{padding-left:0}
#inc02 .text-box .group-tit{padding-bottom:28px}
#inc02 .text-box .program-list li{padding:16px 0}
#inc02 .text-box .program-list li h3{font-size:17px}
#inc02 .text-box .program-list li p.desc{font-size:15px}
#inc02 .text-box .program-list li a.ic-arrow{top:22px}
#inc02 .text-box .program-list li.active{padding:22px 0}
#inc02 .text-box .program-list li.active p.desc{padding-top:16px}
}
@media (max-width:820px){
#inc02{padding:0 20px 80px}
#inc02 .text-box .program-list li h3{font-size:16px}
#inc02 .text-box .program-list li.active h3{padding-left:16px}
}
@media (max-width:480px){
#inc02{padding:0 20px 60px}
#inc02 .col-2{gap:18px}
#inc02 .text-box .program-list li h3{font-size:15px}
#inc02 .text-box .program-list li p.desc{padding-right:30px;font-size:14px}
}
/* 반응형 [e] */