/* 게시판 관련 CSS 작성 */

/* 게시판 - 목록(공통) { */
.board-section {}
.board-section ~ .board-section {margin-top: 50px;}

.board-search {display: flex; align-items: center; justify-content: center; padding: 26px 30px; background-color: var(--color-f7);}
.board-search-bar {display: flex; align-items: center; gap: 0 10px;}
.board-search-block {display: flex; position: relative;}
.board-search-block .i-select {}
.board-search-block .i-input {width: 440px; padding-right: 68px;}
.board-search-block button[type="submit"] {position: absolute; top: 50%; right: 1px; z-index: 1; transform: translateY(-50%); width: 48px; aspect-ratio: 1 / 1; background-color: var(--black-color); border: none; border-radius: 0 4px 4px 0; color: var(--white-color);}

.board-list-top {padding-bottom: 20px;}
.board-total {}
.board-total p {font-family: 'A2Z'; font-weight: 400; font-size: 16px; color: var(--color-61);}
.board-total p .cnt {color: var(--main-color);}

.board-pagination {display: flex; align-items: center; justify-content: center; gap: 0 4px;}
.board-pagination .prev {margin-right: 6px;}
.board-pagination .next {margin-left: 6px;}
.page-link {display: flex; align-items: center; justify-content: center; width: 40px; aspect-ratio: 1 / 1; border: 1px solid transparent; transition: .3s; border-radius: 4px; font-family: 'A2Z'; font-weight: 400; font-size: 16px; color: var(--color-76);}
.i .page-link {border-radius: 50%; border-color: var(--color-c8); color: var(--black-color);}
.page-link:hover {background-color: var(--main-color); border-color: var(--main-color); color: var(--white-color);}

.is-active .page-link {background-color: var(--main-color); color: var(--white-color); border-color: var(--main-color);}

.paginationSet {display: flex; align-items: center; justify-content: center;}
.pagination {display: flex; align-items: center; justify-content: center; gap: 0 4px;}
.pagination > li {}
.pagination li a, .pagination li:not(.i) > span {display: flex; align-items: center; justify-content: center; width: 40px; aspect-ratio: 1 / 1; border: 1px solid transparent; transition: .3s; border-radius: 4px; font-family: 'A2Z'; font-weight: 400; font-size: 16px; color: var(--color-76);}
.pagination li.i a {border-radius: 50%; border-color: var(--color-c8); color: var(--black-color);}
.pagination li.i a::before {font-family: 'remixicon' !important;}
.pagination li.active > span {background-color: var(--main-color); color: var(--white-color); border-color: var(--main-color);}
.pagination li.i .s {font-size: 0;}
.pagination li em {font-style: normal;}
.pagination li.disabled {display: none;}
.pagination li.prev {margin-right: 6px;}
.pagination li.next {margin-left: 6px;}

.pagination li a:hover {background-color: var(--main-color); border-color: var(--main-color); color: var(--white-color);}
.pagination li.i a:hover::before {color: var(--white-color);}

.pagination li.first a {}
.pagination li.first a::before {content: '\f2e3';}
.pagination li.prev a {}
.pagination li.prev a::before {content: '\ea64';}
.pagination li.next a {}
.pagination li.next a::before {content: '\ea6e';}
.pagination li.end a {}
.pagination li.end a::before {content: '\f2e5';}
/* } 게시판 - 목록(공통) */

/* 텍스트 게시판 - 목록 { */
.board-text-list {border-top: 1px solid var(--color-c8);}
.board-text-link {display: flex; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--color-c8);}
.board-text-thumb {width: 329px; aspect-ratio: 329 / 220; border-radius: 15px; overflow: hidden; font-size: 0;}
.board-text-thumb img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: .3s;}
.board-text-content {width: calc(100% - 329px); padding-left: 40px;}
.board-text-content .title {font-weight: 500; font-size: 22px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; transition: .3s; position: relative; max-width: 100%;}
.board-text-content .title::before {content: ''; width: 0; height: 2px; background-color: var(--main-color); position: absolute; bottom: 0; left: 0; transition: .3s;}
.board-text-content .text {font-weight: 400; font-size: 18px; color: var(--color-61); line-height: 1.7; margin: 19px 0 30px; white-space: normal; overflow: hidden; max-height: 3.4em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.board-text-content .date {font-weight: 400; font-size: 16px; color: var(--color-76);}

.board-text-link:hover .board-text-content .title {color: var(--main-color);}
.board-text-link:hover .board-text-content .title::before {width: 100%;}
.board-text-link:hover .board-text-thumb img {transform: scale(1.05);}

.board-empty-row {align-items: center; justify-content: center; padding: 50px; display: flex; width: 100%;}
.board-empty-row .title {font-weight: 400; font-size: 14px; color: var(--color-61);}
/* } 텍스트 게시판 - 목록 */

/* 갤러리(타입A) 게시판 - 목록 { */
.board-gallery-list {padding: 40px 0; border-top: 1px solid var(--color-c8); border-bottom: 1px solid var(--color-c8); display: flex; gap: 40px 35px; flex-wrap: wrap;}
.board-gallery-link {width: calc((100% - (35px) * 2) / 3);}
.board-gallery-thumb {width: 100%; aspect-ratio: 509 / 340; border-radius: 15px; overflow: hidden; font-size: 0;}
.board-gallery-thumb img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: .3s;}
.board-gallery-content {padding-top: 15px;}
.board-gallery-content .title {font-weight: 500; font-size: 22px; color:  var(--black-color); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; transition: .3s; position: relative; max-width: 100%;}
.board-gallery-content .title::before {content: ''; width: 0; height: 2px; background-color: var(--main-color); position: absolute; bottom: 0; left: 0; transition: .3s;}
.board-gallery-content .date {font-weight: 400; font-size: 16px; color: var(--color-76); padding-top: 18px;}

.board-gallery-link:hover .board-gallery-content .title {color: var(--main-color);}
.board-gallery-link:hover .board-gallery-content .title::before {width: 100%;}
.board-gallery-link:hover .board-gallery-thumb img {transform: scale(1.05);}
/* } 갤러리(타입A) 게시판 - 목록 */

/* 갤러리(타입B) 게시판 - 목록 { */
.board-gallery-pledge {display: flex; align-items: center; gap: 0 10px; margin-bottom: 15px;}
.board-gallery-pledge .pledge-num {display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; color: var(--white-color); height: 30px; width: 96px; border-radius: 40px; background-color: var(--color-61);}
.board-gallery-pledge .pledge-text {font-weight: 500; font-size: 16px; color: var(--black-color); max-width: calc(100% - 96px - 10px); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; transition: .3s;}
/* } 갤러리(타입B) 게시판 - 목록 */

/* 게시판 - 상세(공통) { */
.board-view-head {display: flex; align-items: flex-start; border-bottom: 1px solid var(--color-c8); padding-bottom: 38px; margin-top: -15px;}
.board-view-title {width: 50%;}
.board-view-title .title {font-weight: 500; font-size: 20px; color: var(--black-color);}
.board-view-info {width: 50%; display: flex; align-items: flex-start; gap: 0 28px; justify-content: flex-end;}
.board-view-info-item {display: flex; align-items: flex-start; gap: 0 7px;}
.board-view-info-item .t {display: flex; align-items: flex-start; gap: 0 7px; font-weight: 500; font-size: 16px; color: var(--black-color);}
.board-view-info-item .t i {color: var(--color-666);}
.board-view-info-item .c {display: flex; align-items: flex-start; gap: 0 7px; font-weight: 400; font-size: 16px; color: var(--color-666);}
.board-view-info-item .c p {word-break: break-all;}
.board-view-info-item .pledge-num {display: flex; align-items: center; justify-content: center; width: 66px; height: 20px; background-color: var(--color-61); border-radius: 40px; font-weight: 600; font-size: 13px; color: var(--white-color); margin-top: 3px;}
.board-view-info-item .pledge-text {width: calc(100% - 66px - 7px);}

.board-view-body {padding: 40px 0 35px;}
.board-view-img {font-size: 0; margin: 0 auto 45px; text-align: center;}
.board-view-video {position: relative; height: 0; padding-bottom: 56.25%; margin-bottom: 45px; font-size: 0;}
.board-view-video iframe, .board-view-video video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.board-view-content {font-weight: 400; font-size: 18px; color: var(--color-61); line-height: 1.7;}

.board-view-foot {border-bottom: 1px solid var(--color-c8); padding-bottom: 35px;}
.board-view-file {background-color: #F6F9FC; border-radius: 10px; padding: 30px 35px; background-color: var(--color-f5);}
.board-view-file-item {display: flex; align-items: center; line-height: 1;}
.board-view-file-item ~ .board-view-file-item {margin-top: 20px;}
.board-view-file-item .title {font-weight: 500; font-size: 16px; color: var(--main-color); width: 110px;}
.board-view-file-item .content {display: flex; align-items: center; gap: 10px; max-width: calc(100% - 110px);}
.board-view-file-item .content i {font-size: 16px;}
.board-view-file-item .file-link {font-weight: 400; font-size: 16px; color: var(--black-color); max-width: calc(100% - 25px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: .3s;}
.board-view-file-item .file-link:hover {color: var(--main-color);}
/* } 게시판 - 상세(공통) */

/* ====================  반응형 ==================== */
@media screen and (max-width:1440px) {
  /* 게시판 - 목록(공통) { */
  /* } 게시판 - 목록(공통) */

  /* 텍스트 게시판 - 목록 { */
  /* } 텍스트 게시판 - 목록 */

  /* 갤러리(타입A) 게시판 - 목록 { */
  /* } 갤러리(타입A) 게시판 - 목록 */

  /* 갤러리(타입B) 게시판 - 목록 { */
  /* } 갤러리(타입B) 게시판 - 목록 */

  /* 게시판 - 상세(공통) { */
  .board-view-head {margin-top: 0; flex-direction: column;}
  .board-view-title {width: 100%; margin-bottom: 20px;}
  .board-view-info {width: 100%; justify-content: flex-start;}
  /* } 게시판 - 상세(공통) */
}
@media screen and (max-width:1024px) {
  /* 게시판 - 목록(공통) { */
  .board-search {padding: 20px;}
  .board-search form {width: 100%;}
  .board-search-block:last-child {flex: 1;}
  .board-search-block .i-input {width: 100%; padding-right: 56px;}
  .board-search-block button[type="submit"] {width: 42px;}

  .board-list-top {padding-bottom: 10px;}
  .board-total p {font-size: 14px;}
  /* } 게시판 - 목록(공통) */

  /* 텍스트 게시판 - 목록 { */
  .board-text-link {padding: 20px 0;}
  .board-text-thumb {width: 240px;}
  .board-text-content {width: calc(100% - 240px); padding-left: 20px;}
  .board-text-content .title {font-size: 20px;}
  .board-text-content .text {font-size: 16px; margin: 15px 0;}
  .board-text-content .date {font-size: 15px;}

  .board-empty-row {padding: 30px 10px;}
  /* } 텍스트 게시판 - 목록 */

  /* 갤러리(타입A) 게시판 - 목록 { */
  .board-gallery-list {padding: 20px 0; gap: 20px 12px;}
  .board-gallery-link {width: calc((100% - (12px) * 2) / 3);}
  .board-gallery-content .title {font-size: 20px;}
  .board-gallery-content .date {font-size: 15px; padding-top: 10px;}
  /* } 갤러리(타입A) 게시판 - 목록 */

  /* 갤러리(타입B) 게시판 - 목록 { */
  .board-gallery-pledge {gap: 0 6px; margin-bottom: 4px;}
  .board-gallery-pledge .pledge-num {font-size: 12px; height: 24px; width: 70px; border-radius: 3px;}
  .board-gallery-pledge .pledge-text {font-size: 13px; max-width: calc(100% - 70px - 6px);}
  .board-view-info-item .pledge-num {height: 18px; font-size: 12px;}
  /* } 갤러리(타입B) 게시판 - 목록 */

  /* 게시판 - 상세(공통) { */
  .board-view-head {padding-bottom: 20px;}
  .board-view-title {margin-bottom: 16px;}
  .board-view-title .title {font-size: 18px;}
  .board-view-info-item {align-items: center;}
  .board-view-info-item .t {font-size: 14px; align-items: center;}
  .board-view-info-item .t i {margin-top: 2px;}
  .board-view-info-item .c {font-size: 14px;}

  .board-view-content {font-size: 16px;}

  .board-view-file {padding: 25px 30px;}
  /* } 게시판 - 상세(공통) */
}
@media screen and (max-width:768px) {
  /* 게시판 - 목록(공통) { */
  .board-search {padding: 14px;}
  .board-search-bar {flex-direction: column; gap: 5px 0;}
  .board-search-block {width: 100%;}
  .board-search-block .i-select {width: 100%;}
  .board-search-block .i-input {padding-right: 50px;}
  .board-search-block button[type="submit"] {width: 36px;}

  .board-section ~ .board-section {margin-top: 30px;}

  .page-link {width: 32px; font-size: 14px; border-radius: 2px;}
  .pagination li a, .pagination li:not(.i) > span {width: 32px; font-size: 14px; border-radius: 2px;}
  /* } 게시판 - 목록(공통) */

  /* 텍스트 게시판 - 목록 { */
  .board-text-link {flex-direction: column; padding: 14px 10px;}
  .board-text-thumb {width: 100%; border-radius: 5px;}
  .board-text-content {width: 100%; padding-left: 0; padding-top: 20px;}
  .board-text-content .title {font-size: 16px;}
  .board-text-content .text {font-size: 14px; margin: 4px 0;}
  .board-text-content .date {font-size: 13px;}

  .board-empty-row .title {font-size: 13px;}
  /* } 텍스트 게시판 - 목록 */

  /* 갤러리(타입A) 게시판 - 목록 { */
  .board-gallery-list {gap: 10px;}
  .board-gallery-link {width: calc((100% - (10px) * 1) / 2);}
  .board-gallery-thumb {border-radius: 5px;}
  .board-gallery-content .title {font-size: 16px;}
  .board-gallery-content .date {font-size: 13px; padding-top: 8px;}
  /* } 갤러리(타입A) 게시판 - 목록 */

  /* 갤러리(타입B) 게시판 - 목록 { */
  .board-gallery-pledge {gap: 3px; flex-direction: column; align-items: flex-start;}
  .board-gallery-pledge .pledge-num {font-size: 10px; height: 18px; width: 54px;}
  .board-gallery-pledge .pledge-text {font-size: 12px; max-width: 100%;}
  /* } 갤러리(타입B) 게시판 - 목록 */

  /* 게시판 - 상세(공통) { */
  .board-view-head {padding-bottom: 16px;}
  .board-view-title .title {font-size: 16px;}
  .board-view-info {flex-direction: column; gap: 0;}
  .board-view-info-item {gap: 0 2px;}
  .board-view-info-item .t span {display: none;}
  .board-view-info-item .c {font-size: 13px; align-items: center;}
  .board-view-info-item .pledge-num {font-size: 10px; margin-top: 0; height: 16px; width: 60px; border-radius: 3px;}
  .board-view-info-item .pledge-text {width: 100%;}

  .board-view-body {padding: 20px 0;}
  .board-view-img {margin: 0 auto 20px;}
  .board-view-video {margin-bottom: 20px;}
  .board-view-content {font-size: 15px;}

  .board-view-foot {padding-bottom: 20px;}
  .board-view-file {border-radius: 0; padding: 18px;}
  .board-view-file-item {flex-direction: column; align-items: flex-start;}
  .board-view-file-item .title {width: 100%; font-size: 13px;}
  .board-view-file-item .content {width: 100%; margin-top: 5px;}
  .board-view-file-item .file-link {font-size: 14px;}
  /* } 게시판 - 상세(공통) */
}
@media screen and (max-width:425px) {
  /* 게시판 - 목록(공통) { */
  .board-search-block button[type="submit"] {width: 32px;}
  .board-total p {font-size: 12px;}

  .board-pagination {gap: 0 3px;}
  .page-link {font-size: 12px; width: 28px;}

  .pagination {gap: 0 3px;}
  .pagination li a, .pagination li:not(.i) > span {font-size: 12px; width: 28px;}
  /* } 게시판 - 목록(공통) */

  /* 텍스트 게시판 - 목록 { */
  .board-text-content .title {font-size: 15px;}
  .board-text-content .text {font-size: 13px;}
  .board-text-content .date {font-size: 12px;}

  .board-empty-row .title {font-size: 12px;}
  /* } 텍스트 게시판 - 목록 */

  /* 갤러리(타입A) 게시판 - 목록 { */
  .board-gallery-link {width: 100%;}
  .board-gallery-content {padding-top: 10px;}
  .board-gallery-content .title {font-size: 15px;}
  .board-gallery-content .date {font-size: 12px; padding-top: 6px;}
  /* } 갤러리(타입A) 게시판 - 목록 */

  /* 갤러리(타입B) 게시판 - 목록 { */
  /* } 갤러리(타입B) 게시판 - 목록 */

  /* 게시판 - 상세(공통) { */
  .board-view-title .title {font-size: 15px;}
  .board-view-info-item .c {font-size: 12px;}

  .board-view-content {font-size: 14px;}
  .board-view-file {padding: 14px;}
  .board-view-file-item ~ .board-view-file-item {margin-top: 16px;}
  .board-view-file-item .title {font-size: 12px;}
  .board-view-file-item .file-link {font-size: 13px;}
  .board-view-file-item .content i {font-size: 14px;}
  /* } 게시판 - 상세(공통) */
}