@charset "utf-8";

#inc01 .area-service {padding:210px 0 195px}
#inc01 .area-service .col-2{display:flex;align-items:center;padding-left:calc((100% - var(--mainsize)) / 2)}
#inc01 .area-service .col-2 .fl-l{flex-shrink:0;max-width:495px;width:100%}
#inc01 .area-service .col-2 .fl-l .group-tit .tit--ko{padding-bottom:30px}
#inc01 .area-service .col-2 .fl-l .navigation{display:flex;gap:5px;padding-bottom:135px}
#inc01 .area-service .col-2 .fl-l .navigation button{all:unset;display:flex;align-items:center;justify-content:center;width:52px;aspect-ratio:1;border-radius:100px;background-color:#f5f5f5;color:rgba(17,17,17,0.5);cursor:pointer;transition:background-color 0.2s, color 0.2s}
#inc01 .area-service .col-2 .fl-l .navigation button svg{width:20px;height:20px}
#inc01 .area-service .col-2 .fl-l .navigation button:hover{background-color:var(--primary);color:#fff}

#inc01 .area-service .col-2 .fl-r .swiper-slide{max-width:439px;width:100%;aspect-ratio:439 / 540;border-radius:13px;overflow:hidden}
#inc01 .area-service .col-2 .fl-r .swiper-slide a{position:relative;display:flex;width:100%;height:100%}
#inc01 .area-service .col-2 .fl-r .swiper-slide a img{width:100%;height:100%;object-fit:cover}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay{overflow:hidden;opacity:0;visibility:hidden;position:absolute;bottom:0;left:0;width:100%;height:100%;padding:78px 50px;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(5px);transform:translateY(120px);transition:opacity 0.2s, visibility 0.2s 0s,transform 0.3s}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .step{font-family:var(--e-font);font-size:13px;font-weight:600;color:rgba(255,255,255,0.5);text-transform:uppercase}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay h3{padding:15px 0 20px;font-size:35px;font-weight:700;line-height:1.3;color:#fff;white-space:pre-line}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay p.desc{padding-bottom:36px;font-size:17px;line-height:1.6;white-space:pre-line;color:#fff}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .btn--arrow{display:flex;align-items:center;justify-content:center;width:105px;height:30px;font-size:15px;font-weight:600;color:#fff;border-radius:100px;border:1px solid rgba(255,255,255,0.5)}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .btn--arrow span{display:flex;align-items:center;gap:10px;transform:translateX(3px)}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .btn--arrow span svg{width:16px;height:16px;flex-shrink:0}
#inc01 .area-service .col-2 .fl-r .swiper-slide a:hover .overlay{opacity:1;visibility:visible;transform:translateY(0)}

#inc01 .area-solution{position:relative;background-color:var(--primary)}
#inc01 .area-solution::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-image:url(./img/inc01_aside_bg.png);background-repeat:no-repeat;background-size:cover;background-position:center;mix-blend-mode:multiply}
#inc01 .area-solution .inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;padding:100px 0 95px;text-align:center}
#inc01 .area-solution .group-tit{padding-bottom:30px}
#inc01 .area-solution .group-tit .tit--ko{padding-bottom:12px;font-size:42px;color:#fff}
#inc01 .area-solution .group-tit p.desc{font-size:20px;font-weight:500;color:#fff;white-space:pre-line;line-height:1.5}

/* 반응형 [s] */
@media (max-width:1600px){
#inc01 .area-service{padding:170px 0 160px}
#inc01 .area-service .col-2 .fl-l{max-width:440px}
#inc01 .area-service .col-2 .fl-r .swiper-slide{max-width:412px;aspect-ratio:439 / 520}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay h3{font-size:30px}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay p.desc{font-size:16px}
#inc01 .area-solution .group-tit .tit--ko{font-size:38px}
#inc01 .area-solution .group-tit p.desc{font-size:18px}
}
@media (max-width:1400px){
#inc01 .area-service{padding:120px 0 120px 20px}
#inc01 .area-service .col-2 .fl-l{max-width:370px}
#inc01 .area-service .col-2 .fl-r .swiper-slide{aspect-ratio:439 / 475}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay h3{padding:15px 0;font-size:28px}
#inc01 .area-service .col-2 .fl-l .navigation{padding-bottom:110px}
#inc01 .area-solution .inner{padding:85px 0}
#inc01 .area-solution .group-tit .tit--ko{font-size:34px}
#inc01 .area-solution .group-tit p.desc{font-size:17px}
}
@media (max-width:1200px){
#inc01 .area-service{padding:80px 20px 100px}
#inc01 .area-service .col-2{flex-direction:column;align-items:center}
#inc01 .area-service .col-2 .fl-l{max-width:none;display:flex;flex-direction:column;align-items:center;padding-bottom:32px;text-align:center}
#inc01 .area-service .col-2 .fl-l .group-tit .tit--ko{width:25ch;white-space:normal;padding-bottom:22px}
#inc01 .area-service .col-2 .fl-l .navigation{order:1;padding-bottom:0;padding-top:25px}
#inc01 .area-service .col-2 .fl-l .navigation button{width:48px}
#inc01 .area-service .col-2 .fl-l .navigation button svg{width:18px;height:18px}
#inc01 .area-service .col-2 .fl-r{width:100%}
#inc01 .area-service .col-2 .fl-r .swiper-slide{max-width:100%;aspect-ratio:439 / 520}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay{padding:44px 40px}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay h3{padding:12px 0;font-size:24px}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay p.desc{font-size:15px;white-space:normal}
#inc01 .area-solution .inner{padding:75px 0}
#inc01 .area-solution .group-tit .tit--ko{font-size:30px}
}
@media (max-width:1024px){
#inc01 .area-service{padding:60px 20px 80px}
#inc01 .area-service .col-2 .fl-r .swiper-slide{aspect-ratio:439 / 380}
#inc01 .area-service .col-2 .fl-l .navigation{padding-top:22px}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay h3{font-size:22px;white-space:normal}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay p.desc{padding-bottom:30px}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay .btn--arrow{font-size:14px}
#inc01 .area-solution::before{background-size:115%}
#inc01 .area-solution .inner{padding:70px 0}
#inc01 .area-solution .group-tit{padding-bottom:25px}
#inc01 .area-solution .group-tit .tit--ko{font-size:26px}
#inc01 .area-solution .group-tit p.desc{font-size:16px}
}
@media (max-width:768px){
#inc01 .area-service{padding:60px 0 70px}
#inc01 .area-service .col-2 .fl-l{padding-bottom:26px}
#inc01 .area-service .col-2 .fl-l .group-tit .tit--ko{padding-bottom:18px}
#inc01 .area-service .col-2 .fl-l .navigation{padding-top:20px}
#inc01 .area-service .col-2 .fl-r .swiper-slide{max-width:85%;aspect-ratio:unset;height:330px}
#inc01 .area-service .col-2 .fl-r .swiper-slide a:hover .overlay{opacity:1;visibility:visible;transform:translateY(0)}
#inc01 .area-service .col-2 .fl-r .swiper-slide-active a .overlay{opacity:1;visibility:visible;transform:translateY(0)}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay{padding:34px}
#inc01 .area-service .col-2 .fl-r .swiper-slide a .overlay h3{font-size:20px}
#inc01 .area-solution::before{display:none}
#inc01 .area-solution .inner{padding:58px 20px}
#inc01 .area-solution .group-tit{padding-bottom:18px}
#inc01 .area-solution .group-tit .tit--ko{font-size:22px}
#inc01 .area-solution .group-tit p.desc{font-size:15px}
}
@media (max-width:480px){
#inc01 .area-service .col-2 .fl-l{padding:0 20px 20px}
#inc01 .area-service .col-2 .fl-l .group-tit .tit--ko{width:auto}
#inc01 .area-service .col-2 .fl-l .navigation button{width:45px}
#inc01 .area-service .col-2 .fl-l .navigation button svg{width:17px;height:17px}

#inc01 .area-solution .inner{padding:48px 20px}
#inc01 .area-solution .group-tit .tit--ko{font-size:20px}
}
/* 반응형 [e] */