@charset "utf-8";
/* 새글 스킨 (latest)*/
.gallery * {margin:0; padding:0; list-style:none; box-sizing:border-box;}
.gallery {position:relative; padding-top:150px; overflow:hidden;}
.gallery .inner {position:relative; max-width:var(--max-width); width:100%; margin:0 auto;}

/* 타이틀 영역 */
.gallery .titleSection {position:relative; text-align:center; transform:translateY(-50%); margin-bottom:30px;}
.gallery .titleSection .titleBg {position:absolute; left:0; bottom:0; width:100%; height:100%; border-radius:80px 20px; overflow:hidden;}
.gallery .titleSection .titleBg::before {position:absolute; left:0; bottom:0; width:100%; height:200%; background: radial-gradient(circle, rgba(47,108,180,1) 23%, rgba(16,156,218,1) 41%); content:'';}
.gallery .titleSection .albumTitle {position:relative; display:inline-block; padding:15px 0 15px 100px; text-align:center;}
.gallery .titleSection .albumTitle > * {position:relative;}
.gallery .titleSection .albumTitle > span {font-size:18px; color:#fff; margin-right:16px;}
.gallery .titleSection .albumTitle::before {position:absolute; bottom:0; left:0; width:100px; height:106px; background-image:url('/theme/company/img/slider_icon.png'); background-size:contain; content:'';}
.gallery .titleSection .albumTitle > b {font-size:30px; color:#fff799}
.gallery .titleSection .more_btn {position:absolute; right:30px; top:50%; transform:translateY(-50%); font-size:16px; border-radius:50%; display:flex; justify-content:center; align-items:center; gap:5px; color:#f7f7f7;}


/* 앨범 목록 */
.gallery .albumList {display:flex; padding-bottom:50px;}
.gallery .albumList .item {width:calc( (100% / 3) - (30px / 3 * 2) );}
.gallery .albumList .item > a {display:block;}
.gallery .albumList .item > a .subject {font-size:21px; width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.gallery .albumList .item > a .date {font-size:16px; margin-top:12.5px;}
.gallery .albumList .item > a figure {display:flex; margin-top:30px;}
.gallery .albumList .item > a figure > span {display:block; background:#f3f3f4; color:#999; font-size:24px; padding:10px 0; text-align:center;}
.gallery .albumList .item > a figure > img {max-width:100%;}

.gallery .inner > button {position:absolute; top:50%; transform:translate(0, -50%); z-index:1; display:flex; justify-content:center; align-items:center; width:56px; height:56px; background:#f3f3f4; border:none; border-radius:50%;}
.gallery .inner > button > i {font-size:24px; color:#999;}
.gallery .inner > button:disabled {opacity:0.5; cursor:default;}
.gallery .inner .prev {left:-100px;}
.gallery .inner .next {right:-100px;}


/* Max width 미만일 시 */
@media (max-width:1400px) {
    .gallery .inner {padding:0 100px;}
    .gallery {padding-top:120px;}
}

/* 태블릿 */
@media (max-width:820px) {
  .gallery .inner {padding:0 15px;}
  .gallery .albumList .item > a figure {margin-top:30px;}
  .gallery .inner > button {display:none;}
  .gallery .titleSection .more_btn {width:75px; height:25px; font-size:18px;}
}

/* 모바일 */
@media (max-width:425px) {
  .gallery {padding-top:70px;}
  .gallery .titleSection {margin-bottom:0;}
  .gallery .titleSection .albumTitle {padding:10px 0;}
  .gallery .titleSection .albumTitle::before {display:none;}
  .gallery .titleSection .albumTitle > span {margin-right:10px; font-size:17px;}
  .gallery .titleSection .albumTitle > b {font-size:21px;}
  .gallery .albumList {padding-bottom:70px;}
  .gallery .albumList .item {width:calc( (100% / 2) - (30px / 2) )}
  .gallery .albumList .item:last-child {display:none;}
  .gallery .albumList .item > a .subject {font-size:16px;}
  .gallery .albumList .item > a .date {font-size:14px; line-height:1;}
  .gallery .albumList .item > a figure {margin-top:15px;}

  .gallery .titleSection {text-align:left;}
  .gallery .titleSection .albumTitle > span {display:none;}
  .gallery .titleSection .albumTitle > b {color:#333;}
  .gallery .titleSection .titleBg::before {display:none;}
  .gallery .titleSection .more_btn {color:#555; right:0; font-size:16px; width:auto;}
}

/* 갤럭시 폴드 */
@media (max-width:300px) {
  .boardList__925745__ .boardList > li > button {font-size:13px;}
  .boardList__925745__ .boardList > li.active > button {font-size:15px;}
  .boardList__925745__ .swiper .swiper-slide > a .subject {font-size:16px;}
}