@charset "utf-8";

.maingallWrap { position: relative; }
.maingallWrap .mgallUl { display: flex; flex-wrap: wrap; margin: -9px; }
.maingallWrap .mgallUl .mgallLi { padding: 9px; width: 25%; }
.maingallWrap .mgallUl .mgallLi .mgallA { position: relative; display: block; aspect-ratio: 1/0.8493; overflow: hidden; }
.maingallWrap .mgallUl .mgallLi .mgallA img { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); min-width: 100%; min-height: 100%; max-width: 110%; display: inline-block; }
.maingallWrap .mgallUl .mgallLi .mgallA .frame { z-index: 3; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); text-align: center; transition: top 0.3s; }
.maingallWrap .mgallUl .mgallLi .mgallA .frame p { position: relative; top: 50%; transform: translateY(-50%); text-align: center; font-weight: 500; font-size: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 20px; }
.maingallWrap .mgallUl .mgallLi .mgallA:hover .frame { top: 0; }
@media (max-width: 1023px) {
    .maingallWrap .mgallUl .mgallLi { width: 33.3333%; }
}
@media (max-width: 767px) {
    .maingallWrap .mgallUl { margin: -6px; }
    .maingallWrap .mgallUl .mgallLi { padding: 6px; }
}
@media (max-width: 624px) {
    .maingallWrap .mgallUl { justify-content: space-between; margin: initial; }
    .maingallWrap .mgallUl .mgallLi { width: 48%; padding: initial; }
    .maingallWrap .mgallUl .mgallLi:nth-of-type(n + 3) { margin-top: 4%; }
}