/* 게시판 관련 CSS 작성 */
.board-notice {display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 24px 20px; border-radius: 10px; background: url("../img/main-bg-img01.png") no-repeat center center / cover; color: var(--black-color); font-size: var(--font-18); font-weight: 400; line-height: 150%;}
.board-notice::before {content: "\f385"; font-family: 'remixicon' !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--font-24);}

/* 목록 > 상단(카테고리, 검색) */
.board-search {display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; background-color: #F5F5F5; padding: 25px; border-radius: 10px;}
.board-search-wrap {border: none;}
.board-search-inner {display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0;}
.board-search-item {}
.board-search-select {position: relative; min-width: 160px; height: 50px; padding: 0 44px 0 20px; border-radius: 0; background: var(--white-color) url("../img/arrow-drop-down.svg") no-repeat center right 10px / 24px auto; border: 1px solid var(--line-color); color: var(--gray-color); appearance: none; font-size: var(--font-16); font-weight: 400;}
.board-search-select > option {color: #333;}
.board-search-input {display: inline-block; width: 440px; height: 50px; padding: 0 20px; vertical-align: middle; border: 1px solid var(--line-color); background-color: var(--white-color); color: var(--black-color); font-size: var(--font-16);}
.board-search-input::placeholder {color: var(--gray-color);}
.board-search-button {display: inline-block; vertical-align: middle; width: 50px; height: 50px; background: var(--black-color); border: none; color: var(--white-color);}
.board-search-button::before {content: "\F0D1"; font-family: 'remixicon' !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--font-24);}

/* 게시판 - 페이징 { */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 50px; }
.pagination > li > a, .pagination > li > span { display: inline-flex; align-items: center; justify-content: center; width: 40px; aspect-ratio: 1 / 1; border-radius: 999px; color: var(--gray-color); line-height: 1; text-decoration: none; font-size: var(--font-16); font-weight: 400; font-style: normal !important; background-color: transparent; transition: all 0.3s; }
.pagination > li > a span, .pagination > li > span span { font-style: normal !important; }
.pagination > li.active > a, .pagination > li.active > span { background-color: var(--main-color) !important; color: var(--white-color) !important; font-style: normal !important; }
.pagination > li.active > a span, .pagination > li.active > span span { color: var(--white-color) !important; font-style: normal !important; }
.pagination > li:not(.active):not(.first):not(.prev):not(.next):not(.end) > a:hover { background-color: #f4f4f4; color: var(--black-color); font-style: normal !important;}
.pagination > li.first > a, .pagination > li.first > span, .pagination > li.prev > a, .pagination > li.prev > span, .pagination > li.next > a, .pagination > li.next > span, .pagination > li.end > a, .pagination > li.end > span { background-color: transparent !important; border: 1px solid #c8c8c8; font-size: 0; position: relative; font-style: normal !important;}
.pagination > li.disabled > a, .pagination > li.disabled > span { opacity: 0.5; pointer-events: none;}
.pagination > li.first > a::before, .pagination > li.first > span::before, .pagination > li.prev > a::before, .pagination > li.prev > span::before, .pagination > li.next > a::before, .pagination > li.next > span::before, .pagination > li.end > a::before, .pagination > li.end > span::before { font-family: 'remixicon'; font-size: 18px; font-style: normal !important; color: var(--gray-color);}
.pagination > li.first > a::before, .pagination > li.first > span::before {content: "\f2e3";}
.pagination > li.prev > a::before, .pagination > li.prev > span::before {content: "\ea64";}
.pagination > li.next > a::before, .pagination > li.next > span::before {content: "\ea6e";}
.pagination > li.end > a::before, .pagination > li.end > span::before {content: "\f2e5";}
/* } 게시판 - 페이징 */


/* 텍스트 게시판 - 목록 { */
.board-info {margin-bottom: 20px;}
.board-count {color: var(--gray-color); font-size: var(--font-16); font-weight: 400; line-height: 120%;}
.board-count > .count {color: var(--main-color);}

.board-list {border-top: 1px solid var(--black-color);}
.board-list-row {display: flex; border-bottom: 1px solid var(--line-color);}
.board-list-td {display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 128px; height: 60px; padding: 10px; color: var(--black-color); font-size: var(--font-16); font-weight: 400; line-height: 1;}
.board-list-td ~ .board-list-td {border-left: 1px solid var(--line-color);}

.board-list-th {color: var(--black-color); font-size: var(--font-18); font-weight: 700; line-height: 1;}

.board-list-td[data-th="게시일"] {width: 170px;}
.board-list-td[data-th="제목"] {flex: 1;}
.board-list-td:not(.board-list-th)[data-th="제목"] {justify-content: start;}
.board-list-td .title:is(:hover, :active, :focus) {text-decoration: underline; text-underline-offset: 2px;}

.badge {display: inline-block; padding: 5px; font-size: var(--font-15); font-weight: 500; line-height: 1;}
.badge.notice {padding: 5px 10px; background-color: #eef7f0; color: var(--main-color);}
.badge.new {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background-color: var(--main-color); color: var(--white-color); font-size: 12px;}
/* } 텍스트 게시판 - 목록 */

/* 갤러리(사진 갤러리) 게시판 - 목록 { */
.board-gallery {display: flex; align-items: flex-start; gap: 45px 40px; flex-wrap: wrap;}
.board-gallery-item {width: calc((100% - (40px * 2)) / 3);}
.board-gallery-link {}
.board-gallery-thumb {font-size: 0; position: relative; overflow: hidden; height: 0; padding-bottom: 57.641%; border-radius: 10px; transition: 0.3s;}
.board-gallery-thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; transition: .3s;}
.board-gallery-info {padding-top: 20px;}
.board-gallery-info .title {font-weight: 400; font-size: var(--font-20); color: var(--black-color); line-height: 1.35; transition: .3s;}
.board-gallery-info .date {font-weight: 400; font-size: var(--font-15); color: var(--gray-color); line-height: 1.6; margin-top: 10px;}
.board-gallery-info .writer {font-weight: 400; font-size: var(--font-15); color: var(--gray-color); line-height: 1.6;}
.board-gallery-info .content {font-weight: 300; font-size: var(--font-18); color: var(--black-color); line-height: 1.35; max-height: 2.7em;}
.board-gallery-link:hover {}
.board-gallery-link:hover .board-gallery-thumb {box-shadow: 0 4px 10px rgba(0,0,0,0.15);}
.board-gallery-link:hover .board-gallery-thumb img {transform: translate(-50%,-50%) scale(1.1);}
.board-gallery-link:hover .board-gallery-info .title {color: var(--main-color);}
/* } 갤러리(사진 갤러리) 게시판 - 목록 */

/* 게시판 - 상세(공통) { */
#board-view {margin-top: 0;}
.board-view {}
.board-view-head {border-bottom: 1px solid var(--line-color); padding: 25px 10px;}
.board-title {display: flex; align-items: flex-start; gap: 15px;}
.board-title .badge {font-size: var(--font-24);}
.board-title .title {align-self: center; flex: 1; font-weight: 500; font-size: var(--font-20); line-height: 1.35; color: var(--black-color);}
.board-view-info {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 30px; padding-top: 8px;}
.board-view-info-item {display: flex; align-items: center; gap: 4px;}
.board-view-info-item .icon {color: var(--gray-color); font-size: var(--font-14); line-height: 1;}
.board-view-info-item .info {display: flex; align-items: center; gap: 7px;}
.board-view-info-item .info p {font-size: var(--font-16); color: var(--gray-color);}
.board-view-info-item .info .t1 {font-weight: 500; color: var(--black-color);}
.board-view-info-item .info .t2 {font-weight: 400;}

.board-view-body {}
.board-view-content {padding: 30px 20px; border-bottom: 1px solid var(--line-color);}
.board-view-img {text-align: center; font-size: 0; margin-top: 50px;}
.board-view-img > img {border-radius: var(--corner-radius);}
.board-view-text {font-weight: 400; font-size: var(--font-18); color: var(--black-color);}

.board-view-add {padding: 20px; border-bottom: 1px solid var(--line-color);}
.board-view-add-title {display: flex; align-items: center; gap: 3px;}
.board-view-add-title .icon {color: var(--gray-color);}
.board-view-add-title .title {font-weight: 600; font-size: var(--font-16); color: var(--black-color);}
.board-view-add-list {padding-top: 10px;}
.board-view-add-item {display: flex; align-items: center; gap: 10px;}
.board-view-add-item ~ .board-view-add-item {margin-top: 5px;}
.board-view-add-item .link {font-weight: 400; font-size: var(--font-16); color: var(--black-color); max-width: calc(100% - 110px);}
.board-view-add-item a.link {transition: .3s;}
.board-view-add-item a.link:hover {color: var(--main-color); text-decoration: underline; text-underline-offset: 2px;}
.board-view-add-item .download-btn {display: flex; align-items: center; justify-content: center; width: 100px; height: 40px; border-radius: 4px; border: 1px solid var(--line-color); font-weight: 600; font-size: var(--font-14); color: var(--gray-color); gap: 5px; transition: .3s;}
.board-view-add-item .download-btn i {font-weight: 400; font-size: var(--font-16);}
.board-view-add-item .download-btn:hover {background-color: var(--main-color); color: var(--white-color); border-color: var(--main-color);}

.board-btns {display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin: 30px 0;}
.board-btn {min-width: 93px; padding: 0 10px; display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 4px; font-weight: 600; font-size: var(--font-16); border: 1px solid transparent; transition: .3s;}
.board-btn.type-01 {background-color: var(--main-color); border-color: var(--main-color); color: var(--white-color);}
.board-btn.type-02 {background-color: #0093D4; border-color: #0093D4; color: var(--white-color);}
.board-btn.type-03 {background-color: var(--black-color); border-color: var(--black-color); color: var(--white-color);}
.board-btn:hover {background-color: #127F58!important; border-color: #127F58!important; color: var(--white-color)!important;}

.board-subsection {}
.board-subsection-title {display: flex; align-items: center; justify-content: start; gap: 7px; margin-bottom: 15px;}
.board-subsection-title > i {color: var(--main-color); font-size: var(--font-24); line-height: 1;}
.board-subsection-title .t1 {color: var(--black-color); font-size: var(--font-20); font-weight: 600; line-height: 135%;}
.board-subsection-content {border-top: 1px solid var(--black-color);}

.board-view-comment {}
.board-view-comment-item {padding: 25px 10px; border-bottom: 1px solid var(--line-color);}
.board-view-comment-head {display: flex; justify-content: end; align-items: center; flex-wrap: wrap; gap: 10px 30px;}
.board-view-comment-head .item {display: inline-flex; align-items: center; justify-content: center; line-height: 135%;}
.board-view-comment-head .item.author {margin-right: auto;}
.board-view-comment-head .item > i {color: var(--gray-color); font-size: var(--font-14); line-height: 1;}
.board-view-comment-head .item .t1 {color: var(--black-color); font-weight: 500; margin-left: 4px; margin-right: 8px;}
.board-view-comment-head .item.author .t1 {font-weight: 600;}
.board-view-comment-head .item .t2 {color: var(--gray-color); font-weight: 400;}
.board-view-comment-body {padding: 20px 0 25px;}
.board-view-comment-body .text {color: var(--black-color); font-weight: 400;}

.board-ctrl {margin-top: 100px; border-top: 1px solid var(--black-color);}
.board-ctrl-page {display: flex; align-items: center; padding: 13px 6px; border-bottom: 1px solid var(--line-color); gap: 8px 20px;}
.board-ctrl-title {display: flex; align-items: center; gap: 6px;}
.board-ctrl-title .icon {color: var(--gray-color); font-size: var(--font-20);}
.board-ctrl-title .title {font-weight: 600; font-size: var(--font-16); color: var(--black-color);}
.board-ctrl-page-link {font-weight: 400; font-size: var(--font-16); color: var(--black-color); max-width: calc(100% - 100px); transition: .3s;}
.board-ctrl-page-link:hover {font-weight: 500; color: var(--main-color);}
/* } 게시판 - 상세(공통) */

/* 게시판 - 글쓰기 { */
.board-write {}
.board-write-form {}
.board-write-form-list {font-size: 0;}
.board-write-form-item {width: 100%; border-bottom: 1px solid var(--line-color);}
.board-write-form-item.half {display: inline-block; width: 50%;}
.board-write-form-item.half + .board-write-form-item.half {border-left: 1px solid var(--line-color);}
.board-write-form-inner {display: flex;}

.board-write-form-head {display: flex; align-items: center; justify-content: center; width: 150px; min-height: 60px; border-right: 1px solid var(--line-color); background-color: #F1F7F7; text-align: center;}
.board-write-form-head .t1 {font-size: var(--font-18); font-weight: bold; color: var(--black-color);}
.board-write-form-head .t1 .red {color: #f00;}
.board-write-form-head .t1 strong {vertical-align: top; font-weight: 400; color: var(--main-color); line-height: 1;}
.board-write-form-body {width: calc(100% - 150px); padding: 10px;}

.board-write .d-input, .board-write .d-select, .board-write .d-textarea {width: 100%; border: 1px solid var(--line-color); font-size: var(--font-16);}
.board-write .d-input {height: 40px; padding: 0 10px;}
.board-write-input.w50 {width: 38%;}
.board-write-input .d-textarea {height: 500px; padding: 10px; resize: none;}

.board-write-input.btnTxt {display: inline-flex; gap: 8px;}
.board-write-input.btnTxt .d-input {flex: 1;}
.board-write-input.btnTxt .btn-gray {display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 126px; height: 40px; padding: 0 25px; border: none; background: var(--gray-color); border-radius: 4px; font-size: var(--font-16); font-weight: 400; color: var(--white-color); text-align: center; cursor: pointer;}
.board-write-input.btnTxt .btn-gray > i {font-size: var(--font-14); line-height: 1;}

.board-write-caption {display: inline-block; margin: 0 10px;}
.board-write-caption p {position: relative; display: inline-block; padding-left: 10px; font-size: var(--font-15); font-weight: 400; color: var(--gray-color);}
.board-write-caption p::before {content: "*"; position: absolute; left: 0; top: 0;}
/* } 게시판 - 글쓰기 */

/* ====================  반응형 ==================== */
@media screen and (max-width:1440px) {
  /* 갤러리(사진 갤러리) 게시판 - 목록 */
  .board-gallery {padding-top: 20px; gap: 20px;}
  .board-gallery-item {width: calc((100% - (20px * 2)) / 3);}

  /* 게시판 - 상세(공통) */
  .board-view-comment-item {padding: 20px 10px;}
  .board-view-comment-head {gap: 10px 20px;}
  .board-view-comment-body {padding: 10px 0 15px;}

  /* 게시판 - 글쓰기 */
  .board-write-input.w50 {width: 60%;}
}
@media screen and (max-width:1024px) {
  /* 게시판 공통 - 카테고리, 검색, 페이징 등 */
  .board-search {padding: 20px;}

  /* 텍스트 게시판 - 목록 */
  .board-info {margin-bottom: 10px;}
  .board-list-row.head {display: none;}
  .board-list-row {flex-direction: column; padding: 4px 0;}
  .board-list-td {padding: 5px 10px; height: auto; width: 100%!important; justify-content: flex-start; position: relative; padding-left: 60px;}
  .board-list-td::before {content: attr(data-th); font-weight: 500; color: var(--black-color); width: 50px; position: absolute; top: 50%; left: 10px; transform: translateY(-50%);}
  .board-list-td ~ .board-list-td {border-left: none;}

  .badge.new {width: 16px; height: 16px; font-size: 10px;}
  .badge.notice {padding: 3px 7px;}

  /* 갤러리(사진 갤러리) 게시판 - 목록 */
  .board-gallery {padding-top: 10px; gap: 10px;}
  .board-gallery-item {width: calc((100% - (10px * 2)) / 3);}
  .board-gallery-info {padding-top: 10px;}

  /* 게시판 - 상세(공통) */
  .board-view-head {padding: 14px;}
  .board-title {gap: 10px;}
  .board-title .badge {margin-top: 3px;}
  .board-view-info {gap: 10px 20px;}

  .board-view-content {padding: 14px;}

  .board-view-add {padding: 14px;}
  .board-view-add-item .link {max-width: calc(100% - 100px);}
  .board-view-add-item .download-btn {width: 86px; height: 34px; font-size: 13px;}
  .board-view-add-item .download-btn i {font-size: 14px;}

  .board-btn {min-width: 80px; height: 38px;}

  .board-view-comment-item {padding: 15px 10px;}
  .board-view-comment-body {padding: 10px 0 0;}

  .board-ctrl-page {padding: 10px 6px;}
  .board-ctrl-page-link {max-width: calc(100% - 70px);}

  /* 게시판 - 글쓰기 */
  .board-write-form-item.half {width: 100%;}
  .board-write-form-item.half + .board-write-form-item.half {border-left: none;}

  .board-write-form-head {width: 120px;}
  .board-write-form-body {width: calc(100% - 120px);}

  .board-write-input .d-textarea {height: 400px;}
}
@media screen and (max-width:768px) {
  .board-notice {gap: 6px; padding: 15px 12px;}

  /* 게시판 공통 - 카테고리, 검색, 페이징 등 */
  .board-search-wrap {width: 100%;}
  .board-search-inner {flex-direction: column; width: 100%; gap: 5px;}
  .board-search-item {width: 100%;}
  .board-search-select {width: 100%; height: 38px; min-width: auto; padding: 0 32px 0 12px; background: var(--white-color) url("../img/arrow-drop-down.svg") no-repeat center right 8px / 18px auto;}
  .board-search-input {width: calc(100% - 38px); height: 38px; padding: 0 12px;}
  .board-search-button {width: 38px; height: auto; aspect-ratio: 1 / 1;}

  .board-pagination-list .page-link {width: 32px;}

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

  /* 갤러리(사진 갤러리) 게시판 - 목록 */
  .board-gallery-item {width: calc((100% - (10px * 1)) / 2);}
  .board-gallery-info .date {line-height: 1.3;}

  /* 게시판 - 상세(공통) */
  .board-view-head {padding: 14px 10px;}
  .board-view-info {gap: 5px 20px;}

  .board-view-content {padding: 14px 10px;}
  .board-view-img {margin-bottom: 20px;}

  .board-view-add {padding: 14px 10px;}
  .board-view-add-item {gap: 5px;}
  .board-view-add-item .link {max-width: calc(100% - 75px);}
  .board-view-add-item .download-btn {font-size: 11px; gap: 3px; width: 70px; height: 26px;}
  .board-view-add-item .download-btn i {font-size: 11px;}

  .board-btns {margin: 20px 0;}
  .board-btn {min-width: 70px; height: 34px;}

  .board-subsection-title {margin-bottom: 8px;}
  .board-view-comment-head {gap: 5px 10px;}
  .board-view-comment-head .item {}
  .board-view-comment-body {padding-top: 5px;}

  .board-ctrl-page {gap: 5px; padding: 6px;}
  .board-ctrl-title .title {display: none;}
  .board-ctrl-page-link {max-width: calc(100% - 24px);}

  /* 게시판 - 글쓰기 */
  .board-write-form-inner {display: block;}
  .board-write-form-head {width: 100%; min-height: 40px; border-right: none;}
  .board-write-form-body {width: 100%; padding: 10px 0;}
  .board-write .d-input {height: 35px;}
  .board-write-input.w50 {width: 100%;}
  .board-write-input .d-textarea {height: 350px;}
  .board-write-input.btnTxt .btn-gray {min-width: 100px; height: 35px; padding: 0 15px;}
  .board-write-caption {margin: 0; margin-top: 5px;}
}
@media screen and (max-width:425px) {
  /* 게시판 공통 - 카테고리, 검색, 페이징 등 */
  .board-search {padding: 16px;}

  .board-pagination-list > .num > .page-link {font-size: 12px;}
  .board-pagination-list .page-link {width: 28px;}

  /* 텍스트 게시판 - 목록 */
  .board-list-td .title {max-width: calc(100% - 38px);}

  .badge.new {width: 14px; height: 14px; font-size: 8px;}

  /* 갤러리(사진 갤러리) 게시판 - 목록 */

  /* 게시판 - 상세(공통) */
  .board-view-info {gap: 5px 10px;}
  .board-view-info-item {gap: 3px;}
  .board-view-info-item .info {gap: 4px;}

  /* 게시판 - 글쓰기 */
  .board-write-form-head {min-height: 35px;}
}


/* 공통 > 라디오 */
.radio-wrap {font-size: 0; margin: 0 -10px; vertical-align: middle;}
.radio-wrap_item {display: inline-block; font-size: 16px; vertical-align: middle; padding: 5px 0px 5px 20px;}
.radio-inp,
.radio-wrap_item input[type=radio] {position: absolute; opacity: 0; font-size: 0; width: 0; height: 0;}
.radio-inp + label,
.radio-wrap_item input[type=radio] + label {position: relative; display: inline-block; vertical-align: middle; font-size: 17px; font-weight: 300; color: #333; padding-top: 1px; padding-left: 32px; cursor: pointer;}
.radio-inp + label::before,
.radio-wrap_item input[type=radio] + label::before {content: ''; width: 22px; height: 22px; background-color: #ebebeb; border-radius: 50%; position: absolute; top: 1px; left: 0; border: 1px solid #ebebeb;}
.radio-inp + label::after,
.radio-wrap_item input[type=radio] + label::after {content: ''; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; position: absolute; top: 9px; left: 8px;}
.radio-inp:checked + label {}
.radio-inp:checked + label::before,
.radio-wrap_item input[type=radio]:checked + label::before {background-color: #fff; border: 1px solid #05A784;}
.radio-inp:checked + label::after,
.radio-wrap_item input[type=radio]:checked + label::after {background-color: #05A784;}
input[type="radio"]:focus-visible + label::before {outline: 2px solid #0f0f0f;}