.moslide{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; repeat(4, 1fr); grid-gap: 1rem; padding:1rem}
.moslide a {display: inline-block; overflow: hidden; border-radius: 8px }
.moslide img {width: 100%; height: 100%;cursor: pointer;  object-fit: cover;  transition: transform 0.3s ease-in-out;}
.moslide a:hover img{transform: scale(1.1);}



.moslide a:nth-child(1) {grid-row: 1/3; grid-column:1/3}
.moslide a:nth-child(2) {grid-row: 1/3 }
.moslide a:nth-child(4) {grid-row: 2/4}

.moslide a:nth-child(9) {grid-row: 3/5; grid-column:2}
.moslide a:nth-child(10){grid-row: 4/6; grid-column:3/5}
.moslide a:nth-child(11){grid-row: 5/7}

.moslide a:nth-child(15) {grid-column:7/9; grid-row: 1/3}
.moslide a:nth-child(16) {grid-row: 7/9 }
.moslide a:nth-child(18) {grid-row: 8/10}

.moslide a:nth-child(23) {grid-row: 9/11; grid-column:2}
.moslide a:nth-child(24){grid-row: 10/12; grid-column:3/5}
.moslide a:nth-child(25){grid-row: 11/13}

.moslide2 a:nth-child(2) {grid-row: 1/1 !important }

/*
.moslide a:nth-child(1) {grid-row:1/3}
.moslide a:nth-child(2) {}
.moslide a:nth-child(3) {grid-row:1/3; grid-column: 3}
.moslide a:nth-child(4) {}
.moslide a:nth-child(5) {}
.moslide a:nth-child(6) {}

.moslide a:nth-child(7) {}
.moslide a:nth-child(8) {grid-row:3/5; grid-column: 2}
.moslide a:nth-child(10) {grid-row:3/5; grid-column: 4}
*/

 /* 모달 스타일 */
.modal { display: none; /* 기본적으로 숨김 */position: fixed; z-index: 99999;left: 0; top: 0; width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.8);justify-content: center; align-items: center;  }
.modal-content {  position: relative; max-width: 96%; max-height: 96%;overflow: hidden;  }
.modal-content img { width: 100%; height: auto; cursor: pointer; border-radius: 10px }

.prev:after, .prev:before, .next:after, .next:before,  .xbtn:after,  .xbtn:before{content: ""; position: absolute; width:50%; height: 50%;  background: #fff}
.prev:after{left:30%; top:50%; -webkit-transform: skew(-145deg, 0deg);-ms-transform: skew(-145deg,0deg); transform: skew(-145deg, 0deg); }
.prev:before{left:30%; top:0%; -webkit-transform: skew(145deg, 0deg); -ms-transform: skew(145deg,0deg); transform: skew(145deg, 0deg); }
.next:after{left:30%; top:50%; -webkit-transform: skew(-30deg, 0deg);-ms-transform: skew(-30deg,0deg); transform: skew(-30deg, 0deg); }
.next:before{left:30%; top:0%; -webkit-transform: skew(-145deg, 0deg); -ms-transform: skew(-145deg,0deg); transform: skew(-145deg, 0deg); }
.xbtn:after{left:30%; top:0%; -webkit-transform: skew(45deg, 0deg);-ms-transform: skew(45deg,0deg); transform: skew(45deg, 0deg); }
.xbtn:before{left:30%; top:0%; -webkit-transform: skew(135deg, 0deg); -ms-transform: skew(135deg,0deg); transform: skew(135deg, 0deg); }
.xbtn{width:3px; height: 40px; position: absolute;display: block; top:20px; right:20px; border:20px solid rgba(0,0,0,0); }
.prev, .next {width:4px; height: 30px; position: absolute; z-index: 9999;  display: block;  top: 50%;transform: translateY(-50%);cursor: pointer; border:20px solid rgba(0,0,0,0); }
.close {position: absolute; width:100%; height: 100%; cursor: pointer; }
.prev {left: 0px; }
.next { right: 0px; }

.xbtn:hover{width: 3px; height: 43px}
.prev:hover, .next:hover{ width: 6px; height: 35px}



@media only screen and ( max-width: 680px )  {

.moslide{ display: grid; grid-template-columns: 1fr 1fr; repeat(2, 1fr);}
.moslide a{grid-column:inherit !important; grid-row:inherit !important; height: auto !important; margin:0 !important}

}