@charset "utf-8";

#inc01{position:relative;padding-top:290px}

#inc01 .group-cont ul{display:grid;grid-template-columns:repeat(4,1fr)}
#inc01 .group-cont ul li{width:100%;aspect-ratio:1}
#inc01 .group-cont ul li a{position:relative;display:flex;width:100%;height:100%;padding:32px}
#inc01 .group-cont ul li a::before{z-index:1;position:absolute;content:'';inset:0%;width:100%;height:100%;background:linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%)}
#inc01 .group-cont ul li a h3{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:2;font-size:25px;font-weight:700;color:#fff;transition:opacity 0.2s ease, visibility 0.2s}
#inc01 .group-cont ul li a img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
#inc01 .group-cont ul li a .text-box{opacity:0;visibility:hidden;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8);backdrop-filter:blur(4px);border-radius:20px;text-align:center;transition:opacity 0.2s ease, visibility 0.2s}
#inc01 .group-cont ul li a .text-box .cate{width:100%;padding:8px 22px;margin-bottom:32px;background:var(--gradient);border-radius:100px;font-size:16px;font-weight:600;color:#fff;word-break:keep-all}
#inc01 .group-cont ul li a .text-box b{padding-bottom:25px;font-size:22px;font-weight:600;white-space:pre-line;word-break:keep-all}
#inc01 .group-cont ul li a .text-box b span{font-family:'Pretendard'}
#inc01 .group-cont ul li a .text-box p.desc{font-size:18px;font-weight:500;white-space:pre-line;word-break:keep-all}

@media (hover:hover){
#inc01 .group-cont ul li a:hover .text-box{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s}
#inc01 .group-cont ul li a:hover h3{opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s}
}

/* 반응형 [s] */
@media (max-width:1280px){
#inc01{padding-top:180px}
#inc01 .group-cont ul li a h3{bottom:20px;font-size:20px}
}
@media (max-width:1024px){
#inc01{padding-top:120px}
#inc01 .group-cont ul li a h3{font-size:18px}
}
@media (max-width:768px){
#inc01 .group-cont ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
#inc01 .group-cont ul li a h3{font-size:16px}
#inc01 .group-cont ul li a .text-box{display:none}
}
@media (max-width:390px){
#inc01 .group-cont ul li a h3{bottom:15px;font-size:15px}
}
/* 반응형 [e] */