@charset "utf-8";

#inc02{position:relative;padding-top:250px;background-color:#fff}
#inc02 .group-cont ul{display:flex;gap:14px}
#inc02 .group-cont ul li{position:relative;flex:1;width:100%;height:790px;border-radius:20px;overflow:hidden;transition:flex 0.35s ease-in-out}
#inc02 .group-cont ul li:hover{flex:4}

#inc02 .group-cont ul li::before{position:absolute;content:'';inset:0%;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,0) 30%, rgba(0,0,0,0.8) 100% );pointer-events:none}
#inc02 .group-cont ul li img{width:100%;height:100%;object-fit:cover}
#inc02 .group-cont ul li .text-box{position:absolute;left:48px;bottom:48px;display:flex;flex-direction:column;gap:20px;z-index:1;color:#fff}
#inc02 .group-cont ul li .text-box h3{overflow:hidden}
#inc02 .group-cont ul li .text-box h3 span{display:inline-block;font-size:40px;font-weight:700;opacity:1;transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s}

#inc02 .group-cont ul li .text-box p.desc{display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;visibility:hidden;transition:grid-template-rows 0.4s ease, opacity 0.4s, visibility 0.4s}
#inc02 .group-cont ul li:hover .text-box p.desc{grid-template-rows:1fr;opacity:1;visibility:visible}
#inc02 .group-cont ul li .text-box p.desc span{display:inline-block;min-height:0;font-size:20px;line-height:1.5;font-weight:600;transform:translateY(100%);opacity:0;transition:transform 0.5s 0.1s ease-out, opacity 0.5s 0.1s}
#inc02 .group-cont ul li:hover .text-box p.desc span{transform:translateY(0);opacity:1}
#inc02 .group-cont ul:hover li:not(:hover) .text-box h3 span{transform:translateY(100%);opacity:0}

/* 반응형 [s] */
@media (max-width:1800px){
#inc02{padding:120px 20px 0}
#inc02 .group-cont ul li{height:690px}
#inc02 .group-cont ul li .text-box{gap:10px}
#inc02 .group-cont ul li .text-box h3 span{font-size:30px}
}
@media (max-width:1600px){
#inc02{padding:100px 20px 0}
#inc02 .group-cont ul li{height:620px;border-radius:15px}
#inc02 .group-cont ul li .text-box{gap:6px}
#inc02 .group-cont ul li .text-box h3 span{font-size:28px}
#inc02 .group-cont ul li .text-box p.desc span{font-size:18px}
}
@media (max-width:1200px){
#inc02 .group-cont ul li{height:580px}
#inc02 .group-cont ul li:hover{flex:5}
#inc02 .group-cont ul li .text-box{left:30px}
#inc02 .group-cont ul li .text-box h3 span{font-size:25px}
}
@media (max-width:1024px){
#inc02 .group-title{padding-bottom:35px !important}
#inc02 .group-cont ul{flex-direction:column;gap:8px}
#inc02 .group-cont ul li{display:flex;align-items:center;flex:none;height:auto;min-height:200px;padding:24px;border-radius:10px}
#inc02 .group-cont ul li::before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.8) 100% )}
#inc02 .group-cont ul li:hover{flex:none}
#inc02 .group-cont ul li img{position:absolute;top:0;left:0;z-index:-1}
#inc02 .group-cont ul li::before{z-index:1}
#inc02 .group-cont ul li .text-box{position:static;z-index:2}
#inc02 .group-cont ul li .text-box h3 span{font-size:22px}
#inc02 .group-cont ul li .text-box p.desc{display:block;opacity:1;visibility:visible}
#inc02 .group-cont ul li .text-box p.desc span{transform:translateY(0);opacity:1;font-size:16px}
#inc02 .group-cont ul:hover li:not(:hover) .text-box h3 span{transform:translateY(0);opacity:1}
}
@media (max-width:768px){
#inc02{padding:70px 20px 0}
#inc02 .group-title{padding-bottom:30px !important}
#inc02 .group-cont ul li{min-height:160px}
#inc02 .group-cont ul li .text-box h3 span{font-size:18px}
#inc02 .group-cont ul li .text-box p.desc span{font-size:15px}
}
@media (max-width:480px){
#inc02{padding:60px 20px 0}
#inc02 .group-title{padding-bottom:25px !important}
#inc02 .group-cont ul li{min-height:140px}
#inc02 .group-cont ul li .text-box h3 span{font-size:16px}
#inc02 .group-cont ul li .text-box p.desc span{font-size:14px}
}
/* 반응형 [e] */