@charset "utf-8";
#inc01{overflow:hidden;padding-top:180px}
#inc01 .group-cont{display:flex;flex-direction:column;gap:45px}
#inc01 .tab-menu{display:flex;align-items:center;justify-content:center;gap:50px}
#inc01 .tab-menu li{font-size:25px;font-weight:700;color:#ccc;word-break:keep-all;cursor:pointer}

#inc01 .full-w{display:flex;width:100%}
#inc01 .tab-cont{display:flex;gap:28px}
#inc01 .tab-cont li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:222px;height:523px;border-radius:20px;overflow:hidden;transition:width 0.8s;cursor:pointer}
#inc01 .tab-cont li .text-box{opacity:0;visibility:hidden;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:30px;padding:0 15px;text-align:center;color:#fff;transition:opacity 0.2s 0.1s linear, visibility 0s}
#inc01 .tab-cont li .text-box h3{font-size:25px;font-weight:700;line-height:1.4;white-space:pre-line;word-break:keep-all}
#inc01 .tab-cont li .text-box .tag-wrap{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
#inc01 .tab-cont li .text-box .tag-wrap span{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;padding:5px 10px;border:1px solid #fff;border-radius:100px;word-break:keep-all}
#inc01 .tab-cont li .bg{position:absolute;width:100%;height:100%;top:0;left:0}
#inc01 .tab-cont li .bg::before{opacity:0;visibility:hidden;z-index:1;position:absolute;content:'';inset:0%;width:100%;height:100%;background-color:rgba(0,0,0,0.4);transition:opacity 0.2s 0.1s linear, visibility 0s}
#inc01 .tab-cont li .bg img{width:100%;height:100%;object-fit:cover}

/* active */
#inc01 .tab-menu li.active{color:#111}
#inc01 .tab-cont li.active{width:1000px}
#inc01 .tab-cont li.active .text-box{opacity:1;visibility:visible}
#inc01 .tab-cont li.active .bg::before{opacity:1;visibility:visible}

/* 반응형 [s] */
@media (max-width:1600px){
#inc01{padding:120px 20px 0}
#inc01 .tab-menu li{font-size:20px}
#inc01 .tab-cont li{height:480px}
#inc01 .tab-cont li.active{width:clamp(870px,62.5vw,1000px)}
}
@media (max-width:1400px){
#inc01 .group-cont{gap:35px}
#inc01 .tab-menu li{font-size:18px}
#inc01 .tab-cont{gap:20px}
#inc01 .tab-cont li{height:430px}
#inc01 .tab-cont li.active{width:clamp(710px,  calc( (100vw - 1200px) * (140 / 140) + 710px ), 850px)}
#inc01 .tab-cont li:not(.active){flex-shrink:0}
#inc01 .tab-cont li .text-box{gap:18px}
#inc01 .tab-cont li .text-box h3{font-size:22px}
#inc01 .tab-cont li .text-box .tag-wrap span{padding:6px 12px;font-size:15px}
}
@media(max-width:1200px){
#inc01{padding:100px 20px 0}
#inc01 .tab-menu{gap:30px}
#inc01 .tab-cont{gap:12px}
#inc01 .tab-cont li{width:180px;height:400px;border-radius:15px}
#inc01 .tab-cont li.active{width:clamp(610px,  calc( (100vw - 1024px) * (150 / 150) + 610px), 760px)}
#inc01 .tab-cont li .text-box{gap:12px}
#inc01 .tab-cont li .text-box h3{font-size:20px}
#inc01 .tab-cont li .text-box .tag-wrap span{padding:5px 12px;font-size:14px}
}
@media (max-width:1024px){
#inc01{padding:80px 20px 0}
#inc01 .group-cont{gap:20px}
#inc01 .tab-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 0}
#inc01 .tab-menu li{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:14px;font-size:15px;text-align:center;border-radius:5px}
#inc01 .tab-menu li.active{background-color:var(--primary);color:#fff}
#inc01 .tab-cont{width:100%}
#inc01 .tab-cont li{flex-shrink:0 !important;width:100%;height:360px;border-radius:10px;cursor:default}
#inc01 .tab-cont li.active{width:100%}
}
@media (max-width:768px){
#inc01{padding:70px 20px 0}
#inc01 .tab-cont li .text-box h3{font-size:18px}
}
@media (max-width:480px){
#inc01 .tab-menu li{padding:10px;font-size:14px}
#inc01 .tab-cont li{height:300px}
#inc01 .tab-cont li .text-box h3{font-size:16px}
#inc01 .tab-cont li .text-box .tag-wrap span{padding:5px 10px;font-size:13px}
#inc01 .tab-cont li .bg::before{background-color:rgba(0,0,0,0.5)}
}
/* 반응형 [e] */