@charset "utf-8";
/*갤러리형*/

/*공통*/
.gx_ptop_gallDiv {
  position: relative;
}
.gx_ptop_gallULa {
  position: relative;
}

.main-site-wrap {
}
/* 메인컨텐츠 영역 만 활성 ~~~ */
.main-site {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 10px;
}
.gx_ptop_gallULa.mainScbar::-webkit-scrollbar {
  height: 15px;
}
.gx_ptop_gallULa.mainScbar::-webkit-scrollbar-thumb {
  width: 30%;
  background-color: #ccc;
}
.gx_ptop_gallULa.mainScbar::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.07);
}
.gx_ptop_gallULa.mainScbar::-webkit-scrollbar-thumb,
.gx_ptop_gallULa.mainScbar::-webkit-scrollbar-track {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
/* ~~~메인컨텐츠 영역 만 활성 */
.gx_ptop_gallULa:after {
  content: "";
  display: block;
  clear: both;
}
.main-site li {
  position: relative;
  width: calc(25% - 15px);
  border-radius: 6px;
  overflow: hidden;
  transition: 0.3s all;
  cursor: pointer;
}

.main-site li a {
  position: relative;
  z-index: 10;
}

.main-site li::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: 0.2s all;
}

.main-site li:hover::after {
  border: 5px solid #ff0000;
}

.main-site li img {
  width: 100%;
  border-radius: 6px;
}

.gx_ptop_gallULa li:first-child {
  margin-left: 0;
}
.gx_ptop_gallULa li p {
  margin: 0;
  padding: 0;
}
.gx_ptop_gallULa li .thumb {
  /*이미지 영역*/
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}
.gx_ptop_gallULa li .thumb:hover {
}
.gx_ptop_gallULa li .thumb.noimg {
  background-color: #f0f0f0;
}
.gx_ptop_gallULa li .thumb img {
  /* width:100%; */
  transition: all 0.4s;
}
.gx_ptop_gallULa li .thumb:hover img {
  transform: scale(1.06);
}
.gx_ptop_gallULa li .thumb .fa-picture-o {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -10px;
  font-size: 30px;
  color: #ccc;
} /*이미지 없음시 아이콘*/
.gx_ptop_gallULa li .comment {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 1px 6px;
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: 15px;
  transition: all 0.4s;
}
.gx_ptop_gallULa li .comment i {
  vertical-align: top;
  margin-top: 3px;
  font-size: 12px;
  color: #ccc;
}
.gx_ptop_gallULa li .thumb:hover .comment {
  bottom: 35px;
} /* 오버 */
.gx_ptop_gallULa li .title {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -30px;
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 700;
  color: #000;
  visibility: hidden;
  transition: all 0.4s, visibility 0.2s;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.gx_ptop_gallULa li .thumb:hover .title {
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  visibility: visible;
} /* 오버 */
.gx_ptop_gallULa li .hot {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 6px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  z-index: 3;
}
.gx_ptop_gallULa li .title .new {
  vertical-align: middle;
}
.gx_ptop_gallULa li .title .profile_img img {
  margin-top: -2px;
  width: 17px;
  height: auto;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
.gx_ptop_gallULa li.empty_li {
  width: 100%;
  height: 200px;
  line-height: 200px;
  text-align: center;
  border-radius: 8px;
}
.gx_ptop_gallULa.tapyes {
  padding-top: 10px;
} /*tap 있을때 상단간격*/

/*2타입*/
.gx_ptop_gallULa li.type2 .comment,
.gx_ptop_gallULa li.type2 .thumb:hover .comment {
  bottom: auto;
}
.gx_ptop_gallULa li.type2 .comment {
  top: 10px;
}
.gx_ptop_gallULa li.type2 .title,
.gx_ptop_gallULa li.type2 .thumb:hover .title {
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  visibility: visible;
}

/*3타입*/
.gx_ptop_gallULa li.type3 .thumb {
  border-radius: 50%;
} /*이미지*/
.gx_ptop_gallULa li.type3 .comment {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.gx_ptop_gallULa li.type3 .thumb:hover .comment {
  bottom: 55px;
}
.gx_ptop_gallULa li.type3 .title {
  height: 48px;
  line-height: 48px;
  text-align: center;
}
.gx_ptop_gallULa li.type3 .title .sv_member {
  color: #fff;
} /* .sv_member 는 닉네임변수에 클래스 */

@media (max-width: 768px) {
  .main-site li {
    width: calc(50% - 5px);
  }
}