@charset "utf-8";

/*
.wr-gallery2 .pb-4,
.wr-gallery2 .py-4 {
  padding-bottom: 2px !important;
}
*/

.wr-gallery2 .sidebar-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f2f1; /* 이미지 덮는 백그라운드 컬러 */
  display: flex;
  flex-direction: column; /* 세로 방향으로 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: center; /* 수평 가운데 정렬 */
  text-align: center; /* 텍스트 중앙 정렬 */
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.4s, opacity 0.1s 0.3s;
}

.wr-gallery2 .sidebar-layer p {
  margin-bottom: 10px; /* 제목과 카테고리 사이의 여백 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.wr-gallery2 .sidebar-layer p a {
  font-size: 22px;
  color: #2e2d2c;
  font-weight: 300;
  display: inline-block;
  word-break: keep-all; /* 단어를 가능한 한 그대로 유지 */
  white-space: normal; /* 필요할 때 줄바꿈이 일어나도록 설정 */
  overflow-wrap: break-word; /* 단어가 길어질 경우 줄을 넘어가지 않도록 설정 */
  text-overflow: ellipsis;
}



.wr-gallery2 .sidebar-layer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-direction: column; /* 카테고리를 세로로 배치 */
}


.wr-gallery2 .sidebar-layer p a:hover {
  color: #000;
}

.wr-gallery2 .sidebar-layer ul li {
  font-size: 16px;
  color: #fff;
  font-weight: 300;
  margin-top: 5px; /* 각 카테고리 항목 사이의 여백 */
}

.wr-gallery2 .sidebar-layer ul li a {
  color: #fff;
}

.wr-gallery2 .sidebar-layer ul li:nth-child(1) {
  background: #3b3b3b;
  padding: 4px 10px 2px;
  font-weight: 400;
  border-radius: 2px;
  margin-right: 0; /* margin-right 제거 */
}

.wr-gallery2.is-hover .sidebar-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(242, 242, 241, 0.9); /* 반투명 백그라운드 */
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: center; /* 수평 가운데 정렬 */
  text-align: center; /* 텍스트 중앙 정렬 */
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.4s, opacity 0.1s 0.3s;
}


.wr-gallery2.is-hover .img-wrap:hover .sidebar-layer,
.wr-gallery2.is-hover .img-wrap.active .sidebar-layer {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.4s, opacity 0.1s;
}


.wr-gallery2 .na-title { display: block; position: relative; width: 100%; padding:0; }
.wr-gallery2 .na-title .na-item { display: flex; align-items: center; }
.wr-gallery2 .na-title .na-subject { display: inline-block; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.wr-gallery2 .na-title .na-info { position: relative; top: -1px; text-align: right; margin: 0 0 0 5px; }
.wr-gallery2 .na-title .na-hicon { position: relative; top: 4px; float: left; width: 12px; min-width: 12px; height: 12px; line-height: 12px; display:inline-block; background-repeat: no-repeat; background-position: left top; font-size: 1px; padding: 0; margin: 0 5px 0 0; }
.wr-gallery2 .na-title .na-ticon { position: relative; width: 12px; min-width: 12px; height: 12px; line-height: 12px; display:inline-block; background-repeat: no-repeat; background-position: left top; font-size: 1px; padding: 0; margin: 0 0 0 5px; }