@charset "UTF-8";
/* CSS Document */

body {}

header {padding: 20px 0 10px 0; background: #fff;}

nav {background: #dcf3f2;}
.navTable {width: 100%; max-width: 1200px; margin: 0 auto; table-layout: fixed;}
.navTable td {text-align: center; padding: 13px 10px; border-left: 1px solid #fff; border-right: 1px solid #fff; border-collapse: collapse; line-height: 110%;}
.navTable .active {background: #076867 !important; color: #fff !important;}
.navTable td:hover {
  background-color: #8cc63f;
  color: #fff; 
  cursor: pointer; 
}


main {}
#wrap {max-width: 1200px; margin: 0 auto; padding: 15px 0 100px 0;}


.photo-gallery {
  column-count: 4;
  column-gap: 16px;
}


.image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 16px;
}

.zoom-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s;
}



/* 반투명 어두운 오버레이 */
.hover-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: inherit;
}

/* 중앙 아이콘 */
.hover-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2rem;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.image-wrap:hover .hover-overlay,
.image-wrap:hover .hover-icon {
  opacity: 1;
}

.custom-close {
  background-color: rgba(255, 255, 255, 0.85);  /* 반투명 흰색 배경 */
  border-radius: 50%;
  padding: 0.75rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);  /* 약간의 그림자 */
}

/****** paging *********/

.pagination {padding: 0 20px; margin-top: 100px; width: 100%;}
.pagination .pagination-pages {margin: 0; padding: 0 0 1px 0; width: 100%; list-style: none; border: 0; }
.pagination .pagination-pages li { display: inline; margin: 0; padding: 0 1px; background: none; border: 0; list-style: none; }
.pagination .pagination-pages li a { padding: 6px 11px; border: 1px solid #dddddd; text-decoration: none; font-size: 13px; line-height: 27px; color: #999999; background-color: #fff; }
.pagination .pagination-pages li.activePaging a { border: 1px solid #555555; color: #fff !important; background-color: #555555; text-decoration: none; }

footer {text-align: center; padding: 20px 0 50px 0; font-size: 0.8em; background: #efefef;}



@media (min-width: 768px) {
	.mo {display:none;}
	header img {height: 70px;}
}

@media (max-width: 768px) {
	.mx {display:none;}
	header img {height: 50px;}
	#wrap {padding: 10px;}
  .photo-gallery {
    column-count: 2;
  }
	
	.pagination {padding: 0 0 50px 0;}
	.pagination .pagination-pages li a {font-size: 70% !important; padding: 8px 10px;}
}

@media (max-width: 480px) {
  .photo-gallery {
    column-count: 2;
  }
}