@charset "utf-8";

/* Board */
.paging {display: flex; align-items: center; justify-content: center; gap: 10px; padding: 80px 0 0 0;}
.paging__btn {display: flex; flex-shrink: 0; align-items: center; justify-content: center; text-align: center; width: 50px; height: 50px; font-size: 28px; padding: 5px; font-family: var(--sub-font1); font-weight: 600;color:#C9CCD2;}
.paging__controller.paging__start .arrow:first-child,
.paging__controller.paging__prev .arrow {margin-left: 3px;}
.paging__controller.paging__end .arrow:last-child,
.paging__controller.paging__next .arrow {margin-right: 3px;}
.paging__controller.disabled {cursor: normal; pointer-events: none; opacity: .5;}
.paging ul {display: flex; gap: 5px; margin: 0 10px;}
.paging .paging__num span {display: block; width: 100%; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; line-height: 1;}
.paging .paging__num.active {color: #162948; font-weight: 700;}

.board_view {}
.board_view__head {display: flex; align-items: flex-start; gap: 10px 50px; border-top: 2px solid var(--main-color); padding: 35px 0;}
.board_view__head .sbj {display: flex; gap: .5em; margin-bottom: 0; width: 100%;}
.board_view__head .sbj .tag {height: 2.5em; padding: 0 15px; display: flex; align-items: center; justify-content: center; background: var(--main-color); color: #fff; font-size: 0.6em; border-radius: 2.5em;}
.board_view__head .info {display: flex; flex-shrink: 0; gap: 1em; color: #909090;}
.board_view__head .info__item {display: flex; gap: 0 .3em; align-items: center;}
.board_view__body {padding: 35px 0; border-top: 1px solid #afafaf;}
.board_view__etc {border-top: 1px solid #afafaf; padding: 25px 0;}
.board_view__etc ul {}
.board_view__etc ul > li {font-size: 18px; padding: 10px 0; border-bottom: 1px solid #dadada;}
.board_view__etc ul > li:last-child {border-bottom: none;}
.board_view__etc ul > li a {display: flex; align-items: center; gap: 1em;}
.board_view__etc ul > li .tag {display: flex; align-items: center; justify-content: center; background: var(--sub-color1); color: #fff; height: 2em; flex-shrink: 0; padding: 0 20px; border-radius: 2em;}
.board_view__etc ul > li .val {width: 100%;}
.board_view__foot {display: flex; justify-content: space-between; gap: 10px 30px; border-top: 1px solid #afafaf; padding: 35px 0;}
.board_view__foot a {width: 200px; height: 70px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 22px;}
.board_view__foot .btn--paging {background: #f9f8f7; border-radius: 70px; gap: 1em;}
.board_view__foot .btn--paging.disabled {opacity: .5; pointer-events: none;}
.board_view__foot .btn--paging .arrow {width: .7em; height: .7em; opacity: .2; border-width: 4px;}
.board_view__foot .btn--list {background: var(--main-color); color: #fff; border-radius: 70px;}

.board_ls {width: 100%; table-layout: fixed;}
.list-empty {}
.list-empty .inner {display: flex; align-items: center; justify-content: center; text-align: center; color: var(--gray); font-size: 20px; line-height: 1.5; min-height: 300px; border: 1px solid var(--gray-light);}
.board_ls col.col--sml {width: 100px;}
.board_ls col.col--smid {width: 150px;}
.board_ls col.col--mid {width: 200px;}
.board_ls col.col--sbig {width: 250px;}
.board_ls col.col--big {width: 300px;}
.board_ls th,
.board_ls td {padding: 10px 20px;}
.board_ls thead {background: var(--light-gray2); font-size: 20px;}
.board_ls tbody {font-size: 18px;}
.board_ls tbody th,
.board_ls tbody td {padding: 20px; border-bottom: 1px solid var(--gray3)}
.board_ls tbody td .sbj {margin-bottom: 0;}
.board_ls .mo_info {display: none;}

.board_ls--thumb {border-top: 1px solid var(--gray2);}
.board_ls--thumb .board_article {display: flex; position: relative; gap: 20px 40px; padding: 30px 0; border-bottom: 1px solid var(--gray2);}
.board_ls--thumb .board_article .thumb {flex-shrink: 0; width: 400px; background: no-repeat center / cover; background-color: var(--light-gray2);}
.board_ls--thumb .board_article .cont {display: flex; flex-direction: column; width: 100%;}
.board_ls--thumb .board_article .cont .sbj {min-height: 3em;}
.board_ls--thumb .board_article .cont .bot {margin-top: auto;}
.board_ls--thumb .board_article .cont .info {color: var(--gray2);}

.gall_ls {display: grid; grid-template-columns: repeat(4, 1fr); gap: 80px 40px;}
.gall_ls .gall_article {position: relative; display: flex; flex-direction: column;}
.gall_ls .gall_article .thumb {position: relative; display: flex; align-items: center; justify-content: center; text-align: center; background: no-repeat center / cover; background-color: var(--light-gray2); height: 0; padding-bottom: 120%;}
.gall_ls .gall_article .thumb .icon {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; font-size: 22px; font-weight: 700; color: #fff; background: var(--main-color);}
.gall_ls .gall_article .info {display: flex; flex-direction: column; padding: 20px 0 0 0; height: 100%;}
.gall_ls .gall_article .info .sbj {margin-bottom: auto;}
.gall_ls .gall_article .info .download_btn {display: flex; align-items: center; justify-content: center; padding: 15px 20px; font-size: 18px; line-height: 1; font-weight: 500; border: 1px solid var(--gray3); margin-top: 20px;}

.gall_ls--video {display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px 30px;}
.gall_ls--video .list-empty {grid-column: 1 / 4;}
.gall_ls--video__item {position: relative;}
.gall_ls--video__item a {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.gall_ls--video__item .thumb {background-color: #dfdfdf; width: 100%; height: 0; padding-bottom: 55%;}
.gall_ls--video__item .info {padding-top: 20px;}
.gall_ls--video__item .info .sbj {min-height: 3em; line-height: 1.5; word-break: break-all; hyphens: auto;}
.gall_ls--video__item .info .date {color: #888;}

.qna_ls {display: flex; flex-direction: column; gap: 20px;}
.qna_item {position: relative;}
.qna_item .content_container {display: flex; padding: 20px; gap: 30px;}
.qna_item .content_container .tag {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--gray3); flex-shrink: 0; font-size: 24px; font-weight: 700; color: #fff;}
.qna_item .content_container .content {display: flex; align-items: center; width: 100%;}
.qna_item .content_container .icon {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex-shrink: 0; border: 1px solid var(--gray2); border-radius: 50%;}
.qna_item .content_container .icon .arrow {width: 12px; height: 12px; border-color: var(--gray1);}
.qna_item .content_container.question {background: var(--light-gray2); cursor: pointer;}
.qna_item .content_container.question .content .sbj {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1; min-height: 1em; margin-bottom: 0; word-break: break-all;}
.qna_item .content_container.answer {display: none; background: #fff; border-bottom: 1px solid var(--gray3);}
.qna_item.active .content_container.question .sbj {display: block; line-height: 1.5; word-break: normal;}
.qna_item.active .content_container.answer {display: flex;}


@media (hover: hover) {
  .board_view__etc ul > li a:hover {opacity: .5;}
  .board_view__foot .btn--paging:hover {color: var(--main-color);}
  .board_view__foot .btn--paging:hover .arrow {border-color: var(--main-color); opacity: 1;}
  .board_view__foot .btn--list:hover {background: var(--sub-color1);}

  .gall_ls .gall_article:hover .thumb .icon {opacity: 1;}
  .gall_ls .gall_article .info .download_btn:hover {border-color: var(--main-color); color: var(--main-color);}
}
@media screen and (max-width: 1399px) {
  .paging {}
  .paging__btn {width: 30px; height: 30px;}
  .paging__controller .arrow {width: 7px; height: 7px; border-width: 1px;}

  .board_view__head {flex-direction: column;}
  .board_view__head .info {width: 100%; justify-content: flex-end; font-size: 14px;}
  .board_view__etc ul > li {font-size: 15px;}
  .board_view__foot a {font-size: 15px; height: 50px;}

  .board_ls col.col--sml {width: 80px;}
  .board_ls col.col--smid {width: 100px;}
  .board_ls col.col--mid {width: 120px;}
  .board_ls col.col--sbig {width: 150px;}
  .board_ls col.col--big {width: 180px;}
  .board_ls th,
  .board_ls td {padding: 10px;}
  .board_ls thead {font-size: 16px;}
  .board_ls tbody {font-size: 14px;}
  .board_ls tbody th, .board_ls tbody td {padding: 20px 10px;}

  .board_ls--thumb .board_article .thumb {width: 250px;}

  .gall_ls {grid-template-columns: repeat(3, 1fr); gap: 40px 20px!important;}

  .gall_ls--video {grid-template-columns: repeat(2, 1fr); gap: 50px 20px;}
  .gall_ls--video__item .info {padding-top: 10px;}

  .qna_item .content_container {gap: 20px;}
  .qna_item .content_container .tag {width: 40px; height: 40px; font-size: 18px;}
  .qna_item .content_container .icon {display: none;}

}
@media screen and (max-width: 767px) {
  .board_ls .mo_info {display: flex; flex-wrap: wrap; gap: .5em; color: var(--gray1); padding-top: 5px;}
  .board_ls .mo_hide {display: none;}

  .board_ls--thumb {}
  .board_ls--thumb .board_article {flex-direction: column;}
  .board_ls--thumb .board_article .thumb {width: 100%; height: 220px;}

  .gall_ls {grid-template-columns: repeat(2, 1fr)!important; gap: 40px 10px!important;}
}
@media screen and (max-width: 499px) {
  .gall_ls {grid-template-columns: repeat(1, 1fr)!important;}

  .gall_ls--video {grid-template-columns: repeat(1, 1fr); gap: 50px 0;}
  .gall_ls--video__item .info .sbj {min-height: 0;}
}