@charset "utf-8";

#inc01{background-color:#000;color:#fff}
#inc01 .sticky-container{height:450vh}
#inc01 .sticky-wrapper{overflow:hidden;position:sticky;top:0;height:100vh}
#inc01 .sticky-wrapper .target{display:flex;align-items:center;flex-wrap:nowrap;width:max-content;height:100%;padding-right:50px}
#inc01 .sticky-wrapper .target > *{flex-shrink:0;height:100%}

/* 타이틀 */
#inc01 .area-title{position:relative;display:flex;flex-direction:column;justify-content:center;width:100vw}
#inc01 .area-title .title-box{max-width:1500px;width:100%;margin:0 auto}
#inc01 .area-title .title-box h2{padding-bottom:40px;font-size:250px;font-family:var(--e-font);text-align:center;font-weight:700;line-height:1}
#inc01 .area-title .title-box p{padding-bottom:40px;font-size:27px;line-height:1.4;white-space:pre-line;word-break:keep-all;font-weight:600}

#inc01 .area-title .card-box .item{overflow:hidden;position:absolute;top:50%;right:27%;display:flex;flex-direction:column;gap:45px;max-width:275px;width:100%;padding:26px;border-radius:10px;background-color:rgba(31,31,31,0.5);transition:all 0.4s}
#inc01 .area-title .card-box .item h3{font-family:var(--e-font);font-size:17px;line-height:1;transition:color 0.3s}
#inc01 .area-title .card-box .item p.desc{font-family:var(--k-font);font-size:15px;line-height:1.3;word-break:keep-all;white-space:pre-line;transition:color 0.3s}
#inc01 .area-title .card-box .item.on{background-color:#fff;box-shadow:0 0 43px rgba(27, 184, 222, 0.7)}
#inc01 .area-title .card-box .item.on h3{color:var(--primary)}
#inc01 .area-title .card-box .item.on p.desc{color:#111}

/* 서비스 */
#inc01 .area-service{display:flex;align-items:center}
#inc01 .area-service ul{display:flex;gap:102px;height:auto}
#inc01 .area-service ul li{max-width:638px;width:100%}
#inc01 .area-service ul li a{display:flex;flex-direction:column;gap:45px;color:#fff}
#inc01 .area-service ul li .thumb-box{width:100%;aspect-ratio:638 / 637;border-radius:10px;overflow:hidden;transform-origin:bottom left}
#inc01 .area-service ul li .thumb-box img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
#inc01 .area-service ul li .text-box h4{padding-bottom:12px;font-size:35px;font-weight:700;line-height:1.2}
#inc01 .area-service ul li .text-box p.desc{font-size:18px;line-height:1.4;word-break:keep-all}
#inc01 .area-service ul li a:hover .thumb-box img{transform:scale(1.1)}

/* 반응형 [s] */
@media (max-width:1700px){
#inc01 .area-title .title-box{max-width:1330px}
#inc01 .area-title .title-box h2{padding-bottom:30px;font-size:220px}
#inc01 .area-title .title-box p{padding-bottom:34px;font-size:25px}
#inc01 .area-title .card-box .item{right:24%}
#inc01 .area-service ul li{max-width:590px}
#inc01 .area-service ul li .text-box h4{font-size:32px}
}
@media (max-width:1500px){
#inc01 .area-title .title-box{max-width:1210px}
#inc01 .area-title .title-box p{font-size:23px}
#inc01 .area-title .title-box h2{font-size:200px}
#inc01 .area-title .card-box .item{right:22%;gap:35px;max-width:265px}
}
@media (max-width:1300px){
#inc01 .area-title .title-box{display:flex;flex-direction:column;align-items:center}
#inc01 .area-title .title-box h2{white-space:pre-line}
#inc01 .area-title .card-box .item{right:50%;gap:26px}
#inc01 .area-title .title-box p{font-size:21px;text-align:center}
#inc01 .area-service ul{gap:90px}
#inc01 .area-service ul li{max-width:520px}
#inc01 .area-service ul li .text-box h4{font-size:28px}
#inc01 .area-service ul li a{gap:36px}
#inc01 .area-service ul li .text-box p.desc{font-size:17px}
}
@media (max-width:1024px){
#inc01 .area-title .title-box h2{font-size:180px}
#inc01 .area-title .card-box .item{gap:15px;max-width:235px;padding:24px}
#inc01 .area-title .card-box .item h3{font-size:16px}
#inc01 .area-title .card-box .item p.desc{white-space:normal}
#inc01 .area-title .title-box p{font-size:19px}
#inc01 .area-service ul{gap:70px}
#inc01 .area-service ul li{max-width:460px}
#inc01 .area-service ul li a{gap:24px}
#inc01 .area-service ul li .text-box h4{font-size:24px}
}
@media (max-width:768px){
#inc01 .sticky-container{height:auto}
#inc01 .sticky-wrapper{position:static;height:auto}
#inc01 .sticky-wrapper .target{flex-direction:column;gap:50px;width:auto;padding-right:0;padding-bottom:80px}
#inc01 .area-title{gap:35px;padding:0 20px}
#inc01 .area-title .title-box h2{font-size:115px}
#inc01 .area-title .title-box p{padding-bottom:28px;font-size:17px}
#inc01 .area-title .card-box{display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
#inc01 .area-title .card-box .item{position:static;gap:20px;max-width:none;padding:20px;background-color:rgba(255,255,255,0.14)}
#inc01 .area-service{display:block;align-items:flex-start;width:100%;padding:0 20px}
#inc01 .area-service ul{gap:0;height:100%}
#inc01 .area-service ul li{max-width:none;width:auto}
#inc01 .sticky-wrapper .target > *{flex-shrink:unset}
#inc01 .area-service ul li a{gap:18px}
#inc01 .area-service ul li .text-box h4{padding-bottom:8px;font-size:16px}
#inc01 .area-service ul li .text-box p.desc{font-size:15px;line-height:1.5}
}
@media (max-width:480px){
#inc01 .sticky-wrapper .target{gap:35px}
#inc01 .area-title{gap:30px}
#inc01 .area-title .title-box h2{padding-bottom:18px;font-size:68px}
#inc01 .area-title .title-box p{padding-bottom:23px;font-size:15px}
#inc01 .area-title .card-box .item{gap:15px}
#inc01 .area-title .card-box .item h3{font-size:15px}
#inc01 .area-title .card-box .item p.desc{font-size:14px}
#inc01 .area-service ul li .text-box h4{font-size:15px}
#inc01 .area-service ul li .text-box p.desc{font-size:14px}
}
@media (max-width:390px){
#inc01 .sticky-wrapper .target{gap:30px}
#inc01 .area-title{gap:25px}
#inc01 .area-title .title-box p{padding-bottom:20px;font-size:14px}
}
/* 반응형 [e] */