@charset "utf-8";

#inc01{position:relative;padding-top:295px;padding-bottom:680px;background-color:#000}
#inc01 .group-tit{position:relative;z-index:1}
#inc01 .circle{opacity:.4;position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);max-width:1177px;width:100%;aspect-ratio:1177 / 952;border-radius:50%;filter:blur(80px);background:rgb(11,199,219);background:linear-gradient(180deg, rgba(11,199,219,1) 0%, rgba(0,0,0,0) 100%);animation:float 5s linear infinite;pointer-events:none}
@keyframes float{0%, 100%{transform:translate(-50%,-40%)}50%{transform:translate(-50%,-50%)}}

#inc01 .service-list{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:232px}
#inc01 .service-list li{overflow:hidden;position:sticky;top:100px;height:505px;background-position:center;background-size:cover;background-repeat:no-repeat}
#inc01 .service-list li::before{position:absolute;inset:0%;content:'';width:100%;height:100%;background-color:rgba(0,0,0,0.5);pointer-events:none}
#inc01 .service-list li:nth-child(1){background-image:url(./img/inc01_img01.jpg)}
#inc01 .service-list li:nth-child(2){transform:translateY(120px);background-image:url(./img/inc01_img03.jpg)}
#inc01 .service-list li:nth-child(3){transform:translateY(240px);background-image:url(./img/inc01_img05.jpg)}
#inc01 .service-list li:nth-child(4){transform:translateY(360px);background-image:url(./img/inc01_img04.jpg)}
#inc01 .service-list li:nth-child(5){transform:translateY(480px);background-image:url(./img/inc01_img02.jpg)}
#inc01 .service-list .link-service{display:flex;align-items:flex-start;justify-content:center;width:100%;height:100%}
#inc01 .service-list .service__tit{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;max-width:1018px;width:100%;margin:0 auto;padding:30px 0}
#inc01 .service-list .service__tit h3{font-size:28px;font-weight:700;color:#fff}
#inc01 .service-list li .more_btn{overflow:hidden;display:flex;position:relative;max-width:55px;width:100%;height:55px;border-radius:30px;font-family:var(--e-font);font-size:20px;font-weight:500;color:var(--primary);line-height:1;background:#fff;transition:all .3s}
#inc01 .service-list li .more_btn:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:var(--primary);transition:all .3s}
#inc01 .service-list li .more_btn span{opacity:0;margin:auto;white-space:nowrap;transform:translateY(2px);transition:all .3s}

/* active 상태 */
#inc01 .service-list li.active .more_btn{padding:0 14px 0 0;max-width:155px;background-color:var(--primary);color:#fff}
#inc01 .service-list li.active .more_btn span{opacity:1;transition-delay:.1s}
#inc01 .service-list li.active .more_btn::after{left:calc(100% - 25px);background-color:#fff}

/* 반응형 [s] */
@media (max-width:1600px){
#inc01{padding-top:240px}
#inc01 .service-list{padding-top:180px}
#inc01 .service-list .service__tit{padding:30px}  
}
@media (max-width:1400px){
#inc01{padding-top:200px;padding-bottom:620px}
#inc01 .circle{top:26%}
#inc01 .service-list{padding-top:140px}
#inc01 .service-list .service__tit h3{font-size:24px}
#inc01 .service-list li{height:450px}
#inc01 .service-list li .more_btn{max-width:50px;height:50px}
#inc01 .service-list .service__tit{max-width:860px}
}
@media (max-width:1200px){
#inc01{padding-top:160px}
#inc01 .circle{top:28%}
#inc01 .service-list{padding-top:110px}
#inc01 .service-list li{height:350px}
#inc01 .service-list .service__tit{max-width:780px}
#inc01 .service-list .service__tit h3{font-size:20px}
#inc01 .service-list li .more_btn{max-width:45px;height:45px;font-size:18px}
#inc01 .service-list li.active .more_btn{max-width:135px}
#inc01 .service-list li:nth-child(2){transform:translateY(100px)}
#inc01 .service-list li:nth-child(3){transform:translateY(200px)}
#inc01 .service-list li:nth-child(4){transform:translateY(300px)}
#inc01 .service-list li:nth-child(5){transform:translateY(400px)}
}
@media (max-width:1024px){
#inc01{padding-top:125px;padding-bottom:510px}
#inc01 .circle{top:26%}
#inc01 .service-list{padding:80px 20px 0}
#inc01 .service-list .service__tit{max-width:595px}
#inc01 .service-list .service__tit h3{font-size:18px}
#inc01 .service-list li{height:320px}
#inc01 .service-list li .more_btn{max-width:40px;height:40px;font-size:16px}
#inc01 .service-list li.active .more_btn{max-width:120px}
}
@media (max-width:768px){
#inc01{padding-top:100px;padding-bottom:590px}
#inc01 .circle{top:22%}
#inc01 .service-list{padding:60px 20px 0}
#inc01 .service-list li{height:250px}
#inc01 .service-list .service__tit h3{font-size:17px}
#inc01 .service-list .service__tit{max-width:420px;padding:24px}
#inc01 .service-list li:nth-child(2){transform:translateY(90px)}
#inc01 .service-list li:nth-child(3){transform:translateY(180px)}
#inc01 .service-list li:nth-child(4){transform:translateY(270px)}
#inc01 .service-list li:nth-child(5){transform:translateY(360px)}
}
@media (max-width:580px){
#inc01{padding-bottom:240px}
#inc01 .service-list .link-service{align-items:center}
#inc01 .service-list .service__tit{flex-direction:column;gap:5px;padding:0}
#inc01 .service-list li{height:140px}
#inc01 .service-list li .more_btn{max-width:106px;height:32px;padding:0 14px 0 0;background-color:var(--primary)}
#inc01 .service-list li .more_btn:after{width:4px;height:4px;left:calc(100% - 18px);background-color:#fff}
#inc01 .service-list li .more_btn span{opacity:1;color:#fff}
#inc01 .service-list li.active .more_btn{max-width:110px}
#inc01 .service-list li.active .more_btn:after{left:calc(100% - 18px)}
#inc01 .service-list li.active .more_btn span{opacity:1}
#inc01 .service-list li:nth-child(2){top: 126px;transform:translateY(40px)}
#inc01 .service-list li:nth-child(3){top: 193px;transform:translateY(80px)}
#inc01 .service-list li:nth-child(4){top: 260px;transform:translateY(120px)}
#inc01 .service-list li:nth-child(5){transform:translateY(160px)}
}
@media (max-width:480px){
#inc01{padding-top:60px}
#inc01 .circle{top:19%}
#inc01 .service-list{padding:50px 20px 0}
#inc01 .service-list li{top:60px}
}
/* 반응형 [e] */