@charset "utf-8";

/* 새글 스킨 (latest) */
.pic_partial_lt {position:relative;margin-bottom:20px;background:#fff}
.pic_partial_lt .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe;display: none;}
.pic_partial_lt .lat_title a {color:#000;display: none;position:relative}

.pic_partial_lt .lt_more {position:absolute;top:11px;right:10px;display:block;width:25px;line-height:25px;color:#aaa;border-radius:3px;text-align:center;}
.pic_partial_lt .lt_more:hover {color:#777}

.pic_partial_lt ul:after {display:block;visibility:hidden;clear:both;content:""}
.pic_partial_lt ul {margin: 0 -10px}
/*.pic_partial_lt li {float:left;width:33.3333%;padding:0 10px}*/
.pic_partial_lt li {
    float: left; 
    width: 25% !important;      /* 100% / 4 = 25% */
    padding: 10px; 
    box-sizing: border-box;     /* 패딩이 너비에 영향을 주지 않도록 함 */
}

/*.pic_partial_lt li.galley_li:nth-child(3n+1) {clear: both!important}*/
.pic_partial_lt li.galley_li:nth-child(3n+1) { clear: none !important; } /* 기존꺼 무효화 */
.pic_partial_lt li.galley_li:nth-child(4n+1) { clear: both !important; } /* 4개 단위로 줄바꿈 */

.pic_partial_lt li .lt_img {margin:5px 0;display:block}
.pic_partial_lt li .lt_img img, .pic_partial_lt li .lt_img video{width:100%;height:auto}

.pic_partial_lt li a:hover {color:#e67e22}
.pic_partial_lt li .fa-heart {color:#ff0000}
.pic_partial_lt li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.pic_partial_lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.pic_partial_lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_partial_lt li .fa-caret-right {color:#bbb}
.pic_partial_lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_partial_lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}

.pic_partial_lt .card-list {
  width: 100%;
  max-width: 400px;
}
.pic_partial_lt .card {
  background-color: #FFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 50px 0 rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
  padding: 0.6rem 1rem;
  position: relative;
  transition: 0.15s ease-in;
  height: 275px;
}

@media (max-width: 768px) {
  .pic_partial_lt .card {
    height: auto;
  }
}

.pic_partial_lt .card:hover, .pic_partial_lt .card:focus-within {
  box-shadow: 0 0 0 2px #e67e22, 0 10px 60px 0 rgba(0, 0, 0, 0.1);
  transform: translatey(-5px);
}
.pic_partial_lt .card-image {
  border-radius: 10px;
  overflow: hidden;
}
.pic_partial_lt .card-header {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pic_partial_lt .card-header a {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  padding-right: 1rem;
  text-decoration: none;
  color: inherit;
  will-change: transform;
    text-align: left;
}
.pic_partial_lt .card-header a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.pic_partial_lt .icon-button {
  border: 0;
  background-color: #fff;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  transition: 0.25s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
  z-index: 1;
  cursor: pointer;
  color: #ff0000;
}
.pic_partial_lt .icon-button svg {
  width: 1em;
  height: 1em;
}
.pic_partial_lt .icon-button:hover, .icon-button:focus {
  background-color: #EC4646;
  color: #FFF;
}

.pic_partial_lt .card-footer {
  margin-top: 1.25rem;
  border-top: 1px solid #ddd;
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.pic_partial_lt .card-meta {
  display: flex;
  align-items: center;
  color: #787878;
}
.pic_partial_lt .card-meta:first-child:after {
  display: block;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentcolor;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.pic_partial_lt .card-meta i {
  margin-right:5px;
}

.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.pic_partial_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_partial_lt .empty_li:before {background:none;padding:0}

.pic_partial_lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.pic_partial_lt .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center; display: none;}
.pic_partial_lt .lt_more:hover {color:#777}


.gallery {
  width: 100%;
  display: flex;
  justify-content: center;
}

.inner {
  width: 1200px;
  padding: 100px 0px;
}
.title {
  font-weight: 800;
  font-size: 1.846em;
}

.gallery .title {
  display: flex;
  align-items: center;
  gap: 20px;
}
.plus-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d2d2d2;
  background-color: transparent;
  color: #222;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.plus-btn:hover {
  background-color: #e67e22;
  color: #fff;
}

.gallery ul {
    display: flex;
    flex-wrap: wrap;           /* 자리가 없으면 다음 줄로 넘김 (중요) */
    justify-content: flex-start; /* 왼쪽부터 정렬 */
    margin-top: 20px;
    text-align: center;
    padding: 0;
}

.gallery{
  display: flex;
  justify-content: center;
}

.gallery .inner{
  padding:0px;
  
}

.gallery .img-box {
  width: 275px;
  height: 355px;
  border-radius: 15px;
  margin-bottom: 10px;
  border: #fff;
}


/* 초소형 모바일 (화면 너비 480px 이하) */
@media screen and (max-width: 480px) {
  .gallery {
    overflow-x: auto ;
    width: 100%;
  }
  .gallery .inner{
    overflow-x: auto ;
    width: 100% !important;
  }
  .gallery .inner{
    padding: 40px 15px;
  }

  .gallery ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 10px 0;
    scrollbar-width: auto; 
	min-width: calc((220px + 16px) * 4 - 16px);
  }

  /* 크롬/사파리용 스크롤바 스타일 */
  .gallery ul::-webkit-scrollbar {
    height: 6px;
  }
  .gallery ul::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }

  .gallery ul li {
    flex: 0 0 auto; 
    width: 220px; 
  }


  .gallery .img-box {
    width: 100%;
    height: 250px;
  }

}