@charset "utf-8";
#inc01{padding:0 30px;background-color:#f2f2f2}

#inc01 .group-cont.top.inner{display:flex;justify-content:space-between;gap:100px}
#inc01 .top .fl-l{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:space-between;max-width:900px;width:100%;padding:115px 0}
#inc01 .top .fl-l .head{display:flex;justify-content:space-between}
#inc01 .top .fl-l .head .pager{display:flex;gap:8px;height:19px;overflow:hidden;font-size:15px;font-weight:500;line-height:19px}
#inc01 .top .fl-l .head .pager .pager__curr{display:flex;flex-direction:column}
#inc01 .top .fl-l .counter ul{display:flex}
#inc01 .top .fl-l .counter li{flex:1}
#inc01 .top .fl-l .counter li .num{display:inline-block;padding-bottom:14px;font-family:var(--e-font);font-size:120px;line-height:100%;font-weight:500}
#inc01 .top .fl-l .counter li h3{font-size:20px;line-height:1.5;font-weight:700}
#inc01 .top .fl-l .text-mask span{font-size:40px;font-weight:600;line-height:1.5;word-break:keep-all;color:rgba(0,0,0,0.1);background-image:linear-gradient(var(--font-color), var(--font-color));background-clip:text;background-repeat:no-repeat;background-size:0% 100%;transition:background-size 0.1s linear}

#inc01 .top .fl-r{max-width:621px;width:100%;padding:115px 0 400px}
#inc01 .top .fl-r .about{display:flex;flex-direction:column;gap:175px;counter-reset:number}
#inc01 .top .fl-r .about li{position:sticky;top:115px;display:flex;flex-direction:column;gap:20px}
#inc01 .top .fl-r .about .thumb-box{height:395px;border-radius:45px 0 45px 0;overflow:hidden}
#inc01 .top .fl-r .about .thumb-box img{width:100%;height:100%;object-fit:cover}
#inc01 .top .fl-r .about p{display:flex;align-items:center;gap:15px;padding-left:40px;font-family:var(--e-font);font-size:20px;line-height:1.5;font-weight:700}
#inc01 .top .fl-r .about p::before{content:counter(number,decimal-leading-zero);counter-increment:number;font-size:15px;font-weight:500}

#inc01 .bottom{position:relative}
#inc01 .bottom .sticky-wrap{height:250vh}
#inc01 .bottom .sticky-container{position:sticky;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:115px 0}
#inc01 .bottom .head{position:absolute;top:115px;left:0}
#inc01 .bottom h3{padding-bottom:60px;font-family:var(--e-font);font-size:100px;line-height:100%;white-space:pre-line;text-align:center;font-weight:500}
#inc01 .bottom h3 strong{font-weight:700;color:var(--primary)}
#inc01 .bottom p.text-mask{padding-bottom:50px;text-align:center;word-break:keep-all}
#inc01 .bottom p.text-mask span{font-size:20px;line-height:1.5;text-align:center;white-space:pre-line;font-weight:700;color:rgba(0,0,0,0.1);background-image:linear-gradient(var(--font-color), var(--font-color));background-clip:text;background-repeat:no-repeat;background-size:0% 100%;transition:background-size 0.1s linear}
#inc01 .bottom .btnWrap{display:flex;align-items:center;justify-content:center}
#inc01 .bottom .btn--primary{color:var(--font-color)}

/* 반응형 [s] */
@media (max-width:1500px){
#inc01 .top .fl-l .counter li .num{padding-bottom:10px;font-size:90px}
#inc01 .top .fl-l .counter li h3{font-size:18px}
#inc01 .top .fl-l .text-mask span{font-size:36px}

#inc01 .top .fl-r .about{align-items:center}
#inc01 .top .fl-r .about .thumb-box{height:350px}
#inc01 .top .fl-r .about p{padding-left:24px;font-size:18px}

#inc01 .bottom h3{padding-bottom:50px;font-size:70px}
}
@media (max-width:1200px){
#inc01{padding:0 15px}
#inc01 .top .fl-l .head .pager{font-size:14px}
#inc01 .top .fl-l .counter li .num{padding-bottom:6px;font-size:70px}
#inc01 .top .fl-l .counter li h3{font-size:15px}
#inc01 .top .fl-l .text-mask span{font-size:28px}

#inc01 .top .fl-r .about li{gap:14px}
#inc01 .top .fl-r .about .thumb-box{height:290px}
#inc01 .top .fl-r .about p{padding-left:16px;font-size:16px}
#inc01 .top .fl-r .about p::before{font-size:13px}

#inc01 .bottom h3{padding-bottom:50px;font-size:70px}
#inc01 .bottom p.text-mask span{font-size:18px}
}
@media (max-width:1024px){
#inc01 .group-cont.top.inner{flex-direction:column;gap:50px;padding-bottom:50px}
#inc01 .top .fl-l{position:static;gap:100px;height:auto;max-width:none;padding:40px 0 0}
#inc01 .top .fl-l .counter li .num{font-size:15vw}
#inc01 .top .fl-l .head .pager{display:none}

#inc01 .top .fl-r{max-width:none;padding:0;overflow:hidden}
#inc01 .top .fl-r .about{flex-direction:row;gap:34px;padding-bottom:34px;overflow-x:scroll}
#inc01 .top .fl-r .about li{position:static;flex:none}
#inc01 .top .fl-r .about .thumb-box{height:240px;border-radius:25px 0 25px 0}

#inc01 .bottom h3{padding-bottom:clamp(32px,4.88vw,50px);font-size:clamp(45px,5.86vw, 60px);line-height:1.2}
#inc01 .bottom p.text-mask span{font-size:16px}
#inc01 .bottom .sticky-container{padding:40px 0}
#inc01 .bottom .head{top:40px} 
}
@media (max-width:768px){
#inc01 .group-cont.top.inner{padding-bottom:0px}
#inc01 .top .fl-l{gap:75px}
#inc01 .top .fl-l .text-mask span{font-size:24px}
#inc01 .top .fl-r .about{gap:20px;padding-bottom:20px}
#inc01 .top .fl-r .about .thumb-box{max-width:300px;height:215px}

#inc01 .bottom h3{font-size:38px}
#inc01 .bottom p.text-mask span{white-space:normal}
}
@media (max-width:480px){
#inc01 .group-cont.top.inner{gap:24px}
#inc01 .top .fl-l{gap:60px}
#inc01 .top .fl-l .counter li h3{font-size:14px}
#inc01 .top .fl-l .text-mask span{font-size:20px}
#inc01 .top .fl-r .about li{gap:10px}
#inc01 .top .fl-r .about .thumb-box{height:160px}
#inc01 .top .fl-r .about p{gap:8px;padding-left:5px;font-size:14px}

#inc01 .bottom .sticky-wrap{height:200vh}
#inc01 .bottom h3{padding-bottom:clamp(26px,6.67vw,32px);font-size:clamp(30px,7.08vw,34px)}
#inc01 .bottom p.text-mask{padding-bottom:35px}
#inc01 .bottom p.text-mask span{font-size:15px}
}
/* 반응형 [e] */