@charset "utf-8";

#inc02{overflow:hidden;position:relative;padding:150px 0}
#inc02::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-image:url(./img/inc02_bg.jpg);background-repeat:no-repeat;background-size:cover;background-color:#111;opacity:0.8;pointer-events:none}
#inc02::after{position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.6);pointer-events:none}
#inc02 .group-title{position:relative;z-index:1;padding-bottom:65px}
#inc02 .group-title .tit--e{color:#fff !important}
#inc02 .group-title .tit--k{color:#fff}
#inc02 .group-cont{position:relative;z-index:1}
#inc02 .group-cont .swiper{--slide-width:850px;width:100%;height:480px}
#inc02 .group-cont .swiper-wrapper{align-items:flex-end}
#inc02 .group-cont .swiper-slide{max-width:var(--slide-width);width:100%;height:414px;border-radius:4px;overflow:hidden;transition:height 0.8s}
#inc02 .group-cont .swiper-slide::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.6);opacity:1;visibility:visible;transition:opacity 0.8s, visibility 0.8s}
#inc02 .group-cont .swiper-slide img{width:100%;height:100%;object-fit:cover}
#inc02 .group-cont .swiper-slide a .text-box{position:absolute;bottom:0;left:0;width:100%;min-height:193px;padding:0 60px 60px;box-sizing:content-box;background:linear-gradient(to top,rgba(17,17,17,1) 0%, rgba(0,0,0,0) 100%);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;box-sizing:border-box}
#inc02 .group-cont .swiper-slide a .text-box .text-pr{overflow:hidden}
#inc02 .group-cont .swiper-slide a .text-box .text-ch{display:inline-block;transform:translateY(100%);transition:transform 0.8s}
#inc02 .group-cont .swiper-slide a .text-box .cate{font-size:18px;font-weight:700;color:rgba(255,255,255,0.5)}
#inc02 .group-cont .swiper-slide a .text-box h4{font-family:var(--batang-font);font-size:25px;font-weight:700;color:#fff}
#inc02 .group-cont .swiper-navigation button{all:unset;position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:pointer}
#inc02 .group-cont .swiper-navigation button span{color:rgba(255,255,255,0.5);transition:color 0.3s}
#inc02 .group-cont .swiper-navigation button:hover span{color:#fff}
#inc02 .group-cont .swiper-navigation button.btn--next span{transform:scale(-1)}
#inc02 .group-cont .swiper-navigation button.btn--prev{left:calc((100% - var(--slide-width) - 126px) / 2);transform:translate(-50%, -50%)}
#inc02 .group-cont .swiper-navigation button.btn--next{right:calc((100% - var(--slide-width) - 126px) / 2);transform:translate(50%, -50%)}
#inc02 .group-cont .autoplay-progress{position:relative;max-width:620px;width:100%;margin:54px auto 0;height:4px;background-color:rgba(235,235,235,0.5)}
#inc02 .group-cont .autoplay-progress .bar{position:absolute;top:0;left:0;width:0;height:100%;background-color:#fff;transition:none}
#inc02 .group-cont .autoplay-progress.active .bar{width:100%;transition:width 5s linear}

/* swiper slide active */
#inc02 .group-cont .swiper-slide-active{height:480px}
#inc02 .group-cont .swiper-slide-active::before{opacity:0;visibility:hidden}
#inc02 .group-cont .swiper-slide-active a .text-box .text-ch{transform:translateY(0)}

/* 반응형 [s] */
@media (max-width:1600px){
#inc02{padding:120px 0}
}
@media (max-width:1400px){
#inc02{padding:100px 0}
#inc02 .group-title{padding-bottom:60px}
#inc02 .group-cont .swiper{--slide-width:800px}
#inc02 .group-cont .swiper-navigation button.btn--next{right:calc((100% - var(--slide-width) - 80px) / 2)}
#inc02 .group-cont .swiper-navigation button.btn--prev{left:calc((100% - var(--slide-width) - 80px) / 2)}
#inc02 .group-cont .swiper-slide a .text-box h4{font-size:23px}
#inc02 .group-cont .swiper-slide a .text-box .cate{font-size:17px}
}
@media(max-width:1200px){
#inc02 .group-cont .swiper{--slide-width:750px}
#inc02 .group-cont .swiper-slide a .text-box{padding:0 46px 50px}
}
@media (max-width:1024px){
#inc02{padding:80px 0 100px}
#inc02 .group-title{padding-bottom:45px}
#inc02 .group-cont .swiper{--slide-width:600px;height:400px}
#inc02 .group-cont .swiper-slide{height:320px}
#inc02 .group-cont .swiper-slide-active{height:400px}
#inc02 .group-cont .swiper-navigation button.btn--next{right:calc((100% - var(--slide-width) - 60px) / 2)}
#inc02 .group-cont .swiper-navigation button.btn--prev{left:calc((100% - var(--slide-width) - 60px) / 2)}
#inc02 .group-cont .swiper-navigation button span{font-size:22px}
#inc02 .group-cont .autoplay-progress{max-width:600px}
#inc02 .group-cont .swiper-slide a .text-box{gap:6px}
#inc02 .group-cont .swiper-slide a .text-box .cate{font-size:15px;font-weight:600}
#inc02 .group-cont .swiper-slide a .text-box h4{font-size:20px}
#inc02 .group-cont .autoplay-progress{margin:40px auto 0}
}
@media (max-width:768px){
#inc02{padding:60px 0 80px}
#inc02 .group-title{padding-bottom:40px}
#inc02 .group-cont .swiper{height:350px}
#inc02 .group-cont .swiper-slide{max-width:none;height:290px}
#inc02 .group-cont .swiper-slide-active{height:350px}
#inc02 .group-cont .swiper-navigation{display:none}
#inc02 .group-cont .swiper-slide a .text-box{padding:0 28px 30px}
#inc02 .group-cont .autoplay-progress{max-width:400px;margin:30px auto 0}
#inc02 .group-cont .swiper-slide a .text-box{gap:4px}
#inc02 .group-cont .swiper-slide a .text-box .cate{font-size:14px}
#inc02 .group-cont .swiper-slide a .text-box h4{font-size:18px}
}
@media (max-width:620px){
#inc02 .group-cont .swiper{height:315px}
#inc02 .group-cont .swiper-slide{height:260px}
#inc02 .group-cont .swiper-slide-active{height:315px}
#inc02 .group-cont .autoplay-progress{max-width:320px}
}
@media (max-width:480px){
#inc02{padding:50px 0 70px}
#inc02 .group-title{padding:0 20px 34px}
#inc02 .group-title .tit--k{white-space:normal !important}
#inc02 .group-cont .swiper{height:255px}
#inc02 .group-cont .swiper-slide{height:210px}
#inc02 .group-cont .swiper-slide-active{height:255px}
#inc02 .group-cont .swiper-slide a .text-box{padding:0 22px 26px}
#inc02 .group-cont .autoplay-progress{max-width:225px}
#inc02 .group-cont .swiper-slide a .text-box .cate{font-size:13px}
#inc02 .group-cont .swiper-slide a .text-box h4{font-size:15px}
}
/* 반응형 [e] */