/** 갤러리 모달 리스트 **/
.gallery_modal .gallery_modal_list { margin-bottom:6.25rem; display: grid; grid-template-columns: repeat(4,1fr); gap:1.875rem } 
.gallery_modal .gallery_modal_list li { display: flex; flex-direction: column; } 
.gallery_modal .gallery_modal_list li div.img { position: relative; padding-bottom: 100%; cursor: pointer; overflow: hidden; } 
.gallery_modal .gallery_modal_list li p.title { padding:1.25rem 0.625rem; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; font-weight: 600; } 
.gallery_modal .gallery_modal_list li img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s; } 
.gallery_modal .gallery_modal_list li img:hover { filter: grayscale(0%); } 
.gallery_modal .gallery_modal_list li:hover img { transform: scale(1.15); } 

.gallery_modal .gallery_modal_list li input[type=checkbox] { position: absolute; top:0; left:0; width:1.5625rem; height:1.5625rem; } 
.gallery_modal .gallery_modal_list li a { position: absolute; bottom:0; right:0 } 

@media (max-width: 1024px){
 .gallery_modal .gallery_modal_list { grid-template-columns: repeat(3,1fr); } 
 }
@media (max-width: 768px){
 .gallery_modal .gallery_modal_list { grid-template-columns: repeat(2,1fr); } 
 }
@media (max-width: 640px){
 .gallery_modal .gallery_modal_list { grid-template-columns: repeat(1,1fr); } 
 }


/** 갤러리 모달 뷰 **/
.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; z-index: 99999; } 
.modal-content { position: relative; display: flex; align-items: center; justify-content: center; width:100%; height:100%; } 
.modal-content button {position: absolute; z-index: 988; width:4.375rem; height:4.375rem;border: 0.0625rem solid rgba(255, 255, 255, 0.30); background: rgba(0, 0, 0, 0.50);}
.modal-content button i {position: absolute; top:50%; left:50%; font-size:3.125rem; color:#fff; transform: translate(-50% ,-50%);}
.modal-content .gallery_area { position: relative; width:65%; height:70%; display: flex; align-items: center; justify-content: center; flex-direction: column; } 
.modal-content .gallery_area .img {position: relative; width:100%; height:100%; background-color: #000; display: flex; justify-content: center; align-items: center; } 
.modal-content .gallery_area .img img { max-width:100%; max-height:100%; transition: 0.3s ease transform; object-fit:contain; } 
.modal-content .gallery_area .arrows {position: absolute; top:50%; width:100%; transform: translateY(-50%); height:4.375rem;} 
.modal-content .gallery_area .arrows button.prev-button {left:-4.6875rem}
.modal-content .gallery_area .arrows button.next-button {right:-4.6875rem}

.modal-content .gallery_area .content {width:100%; text-align: left; color:#fff; } 
.modal-content .gallery_area .content p { color: #B7B7B7; font-size: 1rem; font-weight: 400; line-height: 1.5 } 
.modal-content .gallery_area .content p.subject { margin:0.625rem 0; color: #FFF; font-size: 1.25rem;  font-weight: 400;}
.modal-content .gallery_area .content p.cont {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.modal-content .close-button {top:0; right:0;}
 



.show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; } 

@media (max-width: 640px){
  .modal-content button {width:2.5rem; height:2.5rem;}
  .modal-content button i {font-size:1.25rem;}
  .modal-content .gallery_area .arrows button.prev-button {left:-3.4375rem}
  .modal-content .gallery_area .arrows button.next-button {right:-3.4375rem}
 }