.main-wrap { width: 100%; padding-top: 100px; }

.main-wrap ul { display: flex; flex-wrap: wrap; border-left: 1px solid var(--color-gray); border-top: 1px solid var(--color-gray); }
.main-wrap ul li { width: 25%; border-right: 1px solid var(--color-gray); border-bottom: 1px solid var(--color-gray); }

.main-wrap ul li .content-box { width: 100%; padding-bottom: 93.75%; position: relative; }
.main-wrap ul li .content-box .inner { width: 100%; height: 100%; position: absolute; top:0; left:0; right:0; bottom:0; }
.main-wrap ul li .content-box .inner a { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 20px; }
.main-wrap ul li .content-box .inner a h2 { font-family: var(--font-normal); font-size: 20px; font-weight: 700; color: var(--color-white); position: relative; z-index: 1; transition: all 0.3s ease-in-out; }
.main-wrap ul li .content-box .inner a p { font-family: var(--font-normal); font-size: 14px; color: var(--color-white); position: relative; z-index: 1; transition: all 0.3s ease-in-out; }
.main-wrap ul li .content-box .inner a .overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; transition: all 0.3s ease-in-out; }

.main-wrap ul li .content-box .inner a:hover h2 { opacity: 0; }
.main-wrap ul li .content-box .inner a:hover p { opacity: 0; }
.main-wrap ul li .content-box .inner a:hover .overlay { opacity: 0; }


/* 미디어쿼리 :: 1024px 미만 */
@media screen and (max-width: 1023px) {
.main-wrap { padding-top: 60px; }
.main-wrap ul li { width: calc(100%/3); }
.main-wrap ul li .content-box .inner a { padding: 20px 15px; }
.main-wrap ul li .content-box .inner a h2 { font-size: 16px; }
.main-wrap ul li .content-box .inner a p { font-size: 11px; }

.main-wrap ul li .content-box .inner a:hover h2 { opacity: 1; }
.main-wrap ul li .content-box .inner a:hover p { opacity: 1; }
.main-wrap ul li .content-box .inner a:hover .overlay { opacity: 1; }
}


/* 미디어쿼리 :: 768px 미만 */
@media screen and (max-width: 767px) {
.main-wrap { padding-top: 50px; }
.main-wrap ul li { width: 50%; }
.main-wrap ul li .content-box .inner a { padding: 7px; }
.main-wrap ul li .content-box .inner a h2 { font-size: 10px; }
.main-wrap ul li .content-box .inner a p { font-size: 7px; }
}