@charset "utf-8";

#inc04{padding:185px 0 200px;overflow:hidden}
#inc04 .col-2{display:flex;align-items:center;gap:250px;padding-left:calc((100% - var(--mainsize)) / 2)}
#inc04 .fl-l{flex-shrink:0;max-width:474px;width:100%}
#inc04 .fl-l .group-title{padding-bottom:70px}
#inc04 .fl-l .swiper-controller{display:flex;align-items:center;justify-content:space-between;gap:20px}

#inc04 .fl-l .swiper-controller .progress-bar{position:relative;max-width:270px;width:100%;height:2px;background-color:#e6e9ed}
#inc04 .fl-l .swiper-controller .progress-bar .bar {display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background-color:var(--primary)}
#inc04 .fl-l .swiper-controller .progress-bar .bar.running {transform:scaleX(1);transition:transform 3000ms linear}

#inc04 .fl-l .swiper-controller .navigation{display:flex;align-items:center;justify-content:center;gap:10px}
#inc04 .fl-l .swiper-controller .navigation button{all:unset;display:flex;align-items:center;justify-content:center;width:61px;aspect-ratio:1;border-radius:100px;border:1px solid #e1e1e1;transition:all 0.3s;cursor:pointer}
#inc04 .fl-l .swiper-controller .navigation button svg{flex-shrink:0}
#inc04 .fl-l .swiper-controller .navigation button:hover{border-color:var(--primary);background-color:var(--primary);color:#fff}

#inc04 .fl-r .swiper-container{width:100%;height:100%}
#inc04 .fl-r .swiper-slide{max-width:557px;width:100%}
#inc04 .fl-r .swiper-slide a{display:flex;flex-direction:column;gap:40px}
#inc04 .fl-r .swiper-slide .thumb-box{width:100%;aspect-ratio:557 / 535;border-radius:13px;overflow:hidden}
#inc04 .fl-r .swiper-slide .thumb-box img{width:100%;height:100%;object-fit:cover}
#inc04 .fl-r .swiper-slide .text-box{display:flex;flex-direction:column;gap:22px}
#inc04 .fl-r .swiper-slide .text-box h3{font-size:35px;font-weight:700;color:#111}
#inc04 .fl-r .swiper-slide .text-box p.desc{font-size:17px;line-height:1.6;white-space:pre-line;word-break:keep-all;color:#666}

/* 반응형 [s] */
@media (max-width:1700px){
#inc04 .col-2{gap:185px}
#inc04 .fl-r .swiper-slide{max-width:500px}
#inc04 .fl-r .swiper-slide a{gap:30px}
#inc04 .fl-r .swiper-slide .text-box{gap:16px}
#inc04 .fl-r .swiper-slide .text-box h3{font-size:30px}
}
@media (max-width:1500px){
#inc04{padding:100px 20px 120px}
#inc04 .col-2{flex-direction:column;gap:40px;padding-left:0}
#inc04 .fl-l{max-width:none}
#inc04 .fl-l .group-title{padding-bottom:30px}
#inc04 .fl-l .swiper-controller{justify-content:center}
#inc04 .fl-l .swiper-controller .progress-bar{display:none}
#inc04 .fl-r{width:100%}
#inc04 .fl-r .swiper-slide{max-width:none}
#inc04 .fl-r .swiper-slide a{gap:24px}
#inc04 .fl-r .swiper-slide .text-box{gap:12px}
#inc04 .fl-r .swiper-slide .text-box h3{font-size:25px}
#inc04 .fl-r .swiper-slide .text-box p.desc{font-size:16px;white-space:normal}
#inc04 [data-aos="fade-right"], #inc04 [data-aos="fade-left"]{transform:translate3d(0, 80px, 0) !important}
#inc04 [data-aos="fade-right"].aos-animate, #inc04 [data-aos="fade-left"].aos-animate {transform:translate3d(0, 0, 0) !important}
}
@media (max-width:1300px){
#inc04{padding:80px 20px 100px}
#inc04 .col-2{gap:30px}
#inc04 .fl-l .group-title{padding-bottom:20px}
#inc04 .fl-l .swiper-controller .navigation button{width:54px}
#inc04 .fl-r .swiper-slide .text-box{gap:10px}
#inc04 .fl-r .swiper-slide .text-box h3{font-size:20px}
}
@media (max-width:1200px){
#inc04{padding:80px 0 100px}
#inc04 .fl-r .swiper-slide .text-box{gap:10px;transform:translateY(20px);opacity:0;visibility:hidden;transition:all 0.3s}
#inc04 .fl-r .swiper-slide-active .text-box{transform:translateY(0);opacity:1;visibility:visible}
#inc04 .fl-r .swiper-slide{opacity:0.3}
#inc04 .fl-r .swiper-slide .thumb-box{aspect-ratio:557 / 430}
#inc04 .fl-r .swiper-slide-active{opacity:1}
}
@media(max-width:1024px){
#inc04 .col-2{gap:24px}
#inc04 .fl-r .swiper-slide .thumb-box{border-radius:10px}
}
@media (max-width:768px){
#inc04{padding:60px 0 80px}
#inc04 .fl-l .swiper-controller .navigation button{width:46px}
#inc04 .fl-l .swiper-controller .navigation button svg{width:20px;height:20px}
#inc04 .fl-r .swiper-slide .thumb-box{aspect-ratio:557 / 390}
#inc04 .fl-r .swiper-slide a{gap:18px}
#inc04 .fl-r .swiper-slide .text-box h3{font-size:18px}
#inc04 .fl-r .swiper-slide .text-box p.desc{font-size:15px}
}
@media (max-width:480px){
#inc04{padding:50px 0 70px}
#inc04 .col-2{gap:16px}
#inc04 .fl-l .group-title{padding-bottom:12px}
#inc04 .fl-l .swiper-controller .navigation{gap:7px}
#inc04 .fl-l .swiper-controller .navigation button{width:40px}
#inc04 .fl-l .swiper-controller .navigation button svg{width:18px;height:18px}
#inc04 .fl-r .swiper-slide .text-box{gap:8px}
#inc04 .fl-r .swiper-slide .text-box h3{font-size:16px}
#inc04 .fl-r .swiper-slide .text-box p.desc{font-size:14px}
}
/* 반응형 [e] */