@charset "UTF-8";
/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 > 게시판 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-cmn-search-area {display: block; margin-bottom: 30px; padding: 20px 20px 10px; border-radius: 5px; background-color: #F7F8FB;}
.bod-cmn-search-area .search-bar {}
.bod-cmn-search-area .search-bar .row {display: flex; flex-wrap: wrap;}
.bod-cmn-search-area .search-bar .row .intxt,
.bod-cmn-search-area .search-bar .row .sel {display: block; width: 100%;}
.bod-cmn-search-area .search-bar .row .txt {display: block; line-height: 40px; font-size: 1rem; color: #5C6C82;}
.bod-cmn-search-area .search-bar .row .btn {display: block; width: 100%;}
.bod-cmn-search-area .search-bar .row .line {display: block; width: 2px; height: 100%; background-color: #e9e9e9;}
.bod-cmn-search-area .search-bar .row .sel {height:50px;}
.bod-cmn-search-area .search-bar .row .intxt {height:50px;}
.bod-cmn-search-area .search-bar .row .btn {height:50px; position:relative; padding-right:45px; background:#000;}
.bod-cmn-search-area .search-bar .row .btn span {position:relative; }
.bod-cmn-search-area .search-bar .row .btn span::after {content: ''; display: block; position: absolute; top: 50%; right: -30px; width: 20px; height: 20px; background-image: url(../images/common/i_search_fff.svg); background-repeat: no-repeat; background-size: contain; transform: translateY(-50%);}

.bod-cmn-search-area .search-bar[data-size="lg"] {max-width: 1024px; margin: 0 auto;}
.bod-cmn-search-area .search-bar[data-size="md"] {max-width: 800px; margin: 0 auto;}
.bod-cmn-search-area .search-bar[data-size="sm"] {max-width: 600px; margin: 0 auto;}
.bod-cmn-search-area .search-bar[data-size="xs"] {max-width: 475px; margin: 0 auto;}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    .bod-cmn-search-area .search-bar > .row li:nth-child(1),
    .bod-cmn-search-area .search-bar > .row li:nth-child(2) {width:50%;}

}
@media screen and (max-width: 500px) {
    .bod-cmn-search-area .search-bar > .row {flex-direction: column;}
    .bod-cmn-search-area .search-bar > .row li:nth-child(1),
    .bod-cmn-search-area .search-bar > .row li:nth-child(2) {width:100%;}

}
@media screen and (max-width: 425px) {
    .bod-cmn-search-area .search-bar .row {flex-direction: column;}
    .bod-cmn-search-area .search-bar .row .btn {margin-top:10px;}

}

.bod-cmn-info-bar {display: flex; margin-bottom: 10px;}
.bod-cmn-info-bar .total {display: block; height: 100%; padding: 5px 0; line-height: 30px; font-weight: 500; font-size: 1rem; flex-shrink: 0;}
.bod-cmn-info-bar .total .num {display: inline-block; line-height: 1; color: #E84242; vertical-align: baseline; font-weight:700;}

.paging {display: block; margin-top: 50px; overflow-x: auto; overflow-y: hidden; text-align: center;}
.paging::-webkit-scrollbar {width: 5px; height: 5px; box-sizing: content-box;}
.paging::-webkit-scrollbar-thumb {height: 30%; border-radius: 5px; background: #01216D;}
.paging::-webkit-scrollbar-track {padding: 0 5px; border-radius: 5px; background: #e4e4e4;}
.paging .paging-group {display: -webkit-inline-flex; display: -ms-inline-flex; display: inline-flex; margin: 0; flex-wrap: wrap; justify-content: center;}
.paging .paging-group > li {display: block;}
.paging .paging-group > li .btn-page {display: block; position: relative; min-width: 30px; height: 30px; margin: 0 5px 10px; padding: 0 5px; border: 1px solid #e9e9e9; border-radius:50%; background-color: #ffffff; line-height: 28px; font-weight: 500; font-size: 14px; color: #707780; text-align: center;}
.paging .paging-group > li .btn-page::before {content:""; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #01216D; box-sizing: border-box;}
.paging .paging-group > li .btn-page > span {display: inline-block; vertical-align: middle;}

.paging .paging-group > li .btn-page.first > span,
.paging .paging-group > li .btn-page.prev > span,
.paging .paging-group > li .btn-page.next > span,
.paging .paging-group > li .btn-page.last > span {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.paging .paging-group > li .btn-page.first {background-image: url(../images/sub/i_bod_fisrt.svg); background-repeat: no-repeat; background-position: center;}
.paging .paging-group > li .btn-page.prev {background-image: url(../images/sub/i_bod_prev.svg); background-repeat: no-repeat; background-position: center;}
.paging .paging-group > li .btn-page.next {background-image: url(../images/sub/i_bod_next.svg); background-repeat: no-repeat; background-position: center;}
.paging .paging-group > li .btn-page.last {background-image: url(../images/sub/i_bod_last.svg); background-repeat: no-repeat; background-position: center;}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
.paging .paging-group > li .btn-page {transition: border 0.3s, background 0.3s, color 0.3s;}
.paging .paging-group > li .btn-page:focus {outline: none; border-color: #E84242; color:#E84242;}
.paging .paging-group > li .btn-page:hover,
.paging .paging-group > li .btn-page.current {border-color:#E84242; background-color: #E84242; color: #ffffff;}
.paging .paging-group > li .btn-page:focus::before {display: block;}
.paging .paging-group > li .btn-page:focus:hover::before {top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border: 2px dashed #ffffff;}
.paging .paging-group > li .btn-page:focus:not(:focus-visible)::before {display: none;}

.paging .paging-group > li .btn-page.first:hover {background-image: url(../images/sub/i_bod_fisrt_on.svg);}
.paging .paging-group > li .btn-page.prev:hover {background-image: url(../images/sub/i_bod_prev_on.svg);}
.paging .paging-group > li .btn-page.next:hover {background-image: url(../images/sub/i_bod_next_on.svg);}
.paging .paging-group > li .btn-page.last:hover {background-image: url(../images/sub/i_bod_last_on.svg);}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    .paging {margin-top: 35px;}
    .paging .paging-group > li .btn-page {min-width: 28px; height: 28px; margin: 0 2.5px 5px; line-height: 26px; font-size: 13px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 > 리스트형 게시판
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-def-list .bod-list-head {display: block; margin-bottom: 20px;}
.bod-def-list .bod-list-body {display: block;}

.bod-def-list-table {width:100%;border-top:1px solid #000;}
.bod-def-list-table caption {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.bod-def-list-table th {padding: 20px 10px; border-bottom:1px solid #dedede; background-color:#F7F8FB; font-size:16px; text-align:center; color:#141414;}
.bod-def-list-table td {padding: 20px 10px; border-bottom:1px solid #dedede; background-color:#fff; font-size:16px; text-align:center; color:#141414;}

.bod-def-list-table td.title {width:55%; text-align:left;}
.bod-def-list-table td .tit {display:inline-block; color:#141414; word-break: break-all; vertical-align: middle;}
.bod-def-list-table td .tit .txt {display: inline; word-break: inherit; vertical-align: middle;}

.bod-def-list-table td .i-new {display:inline-block; width: 1.1875rem; height: 1.1875rem; margin-left: 5px; border-radius: 50%; background-color:#E84242; letter-spacing: 1px; line-height: 1.1875rem; font-size:10px; text-align:center; color:#ffffff; font-weight: 700; vertical-align: middle;}
.bod-def-list-table td .i-attach {display: inline-block; position: relative; width: 20px; height: 20px; border-radius: 2px; background:url(../images/common/i_attach.svg) no-repeat center;}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    .bod-def-list-table th.reading,
    .bod-def-list-table td.reading {display:none;}

}
@media screen and (max-width: 700px) {
    .bod-def-list-table th.write,
    .bod-def-list-table td.write {display:none;}
    .bod-def-list-table th.num,
    .bod-def-list-table td.num {width:10%;}
    .bod-def-list-table th.attach,
    .bod-def-list-table td.attach {width:10%;}
    .bod-def-list-table th.date,
    .bod-def-list-table td.date {display: none;}
}
@media screen and (max-width: 500px) {
    .bod-def-list-table {table-layout:fixed; width :100%;}
    .bod-def-list-table th.date,
    .bod-def-list-table td.date {display:none;}
    .bod-def-list-table td .tit  {max-width:100%;}
    .bod-def-list-table td .tit .txt {width: calc(100% - 30px);  overflow: hidden; white-space: nowrap;  text-overflow: ellipsis;  word-break: break-all; display: inline-block;}
    .bod-def-list-table th.attach {word-break: break-all; text-indent: -50px;;}
}



/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 > 갤러리형 게시판
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-media-list .bod-gallery-list {display: flex; width: 100%; padding-top: 30px; flex-wrap: wrap;}
.bod-media-list .bod-gallery-list > li {overflow: hidden; position: relative; width: calc((100% - 5.625rem) / 4); margin-left: 1.875rem; border:1px solid #E9E9E9;}
.bod-media-list .bod-gallery-list > li:nth-child(4n-3){margin-left: 0;}
.bod-media-list .bod-gallery-list > li:nth-child(n+5){margin-top: 1.75rem;}
.bod-media-list .bod-gallery-list > li .item-con {display: block;}
.bod-media-list .bod-gallery-list > li .item-con .img-wrap {display: block; overflow: hidden; position: relative;}
.bod-media-list .bod-gallery-list > li .item-con .img-wrap::before {content: ''; display: block; padding-top: 13.75rem; background-color: #E0E0E0;}
.bod-media-list .bod-gallery-list > li .item-con .img-wrap img {position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: none; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; transform-origin: left;}
.bod-media-list .bod-gallery-list > li .item-con .tit-wrap {padding: 20px;}
.bod-media-list .bod-gallery-list > li .item-con .tit-wrap .tit {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; font-size: 1.125rem; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}
.bod-media-list .bod-gallery-list > li .item-con .tit-wrap .tit span {display: block; word-break: break-all;}
.bod-media-list .bod-gallery-list > li .item-con .tit-wrap .tit.i-new {display: flex; align-items: baseline;}
.bod-media-list .bod-gallery-list > li .item-con .tit-wrap .tit.i-new span {width: auto; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; font-size: 1.125rem; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all;}
.bod-media-list .bod-gallery-list > li .item-con .tit-wrap .tit.i-new::after {content: 'N'; display: block; width: 1.25rem; height: 1.25rem; margin-left: 10px; border-radius: 50%; background-color: #E84242; font-size: 0.875rem; line-height: 1.25rem; color: #ffffff; text-align: center; vertical-align: middle; flex-shrink: 0;}
.bod-media-list .bod-gallery-list > li .item-con .tit-wrap .item {display: block; margin-top: 20px; font-size: 0.938rem; color: #8B94A3; word-break: break-all;}
.bod-media-list .empty-txt {padding: 6.25rem 0.625rem; font-size: 1.0625rem; text-align: center;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.bod-media-list .bod-gallery-list > li .item-con .img-wrap::before {transition: padding 0.3s ease;}
.bod-media-list .bod-gallery-list > li .item-con .img-wrap img {transition: transform 0.3s ease;}
.bod-media-list .bod-gallery-list > li .item-con:hover .img-wrap img {transform: scale(1.1) translate(-50%, -50%);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
    .bod-media-list .bod-gallery-list > li {width: calc((100% - 2.5rem) / 3); margin-left: 1.25rem;}
    .bod-media-list .bod-gallery-list > li:nth-child(4n-3){margin-left: 1.25rem;}
    .bod-media-list .bod-gallery-list > li:nth-child(3n-2){margin-left: 0;}
    .bod-media-list .bod-gallery-list > li:nth-child(n+5){margin-top: 0;}
    .bod-media-list .bod-gallery-list > li:nth-child(n+4){margin-top: 1.25rem;}
}
@media screen and (max-width: 800px) {
    .bod-media-list .bod-gallery-list {padding-top: 20px;}
    .bod-media-list .bod-gallery-list > li {width: calc((100% - 0.938rem) / 2); margin-left: 0;}
    .bod-media-list .bod-gallery-list > li:nth-child(4n-3){margin-left: 0;}
    .bod-media-list .bod-gallery-list > li:nth-child(2n){margin-left: 0.938rem;} 
    .bod-media-list .bod-gallery-list > li:nth-child(n+4){margin-top: 0;}
    .bod-media-list .bod-gallery-list > li:nth-child(n+3){margin-top: 0.938rem;}
    .bod-media-list.bod-gallery-list > li .item-con .img-wrap::before {padding-top: 11.25rem;}
    .bod-media-list .bod-gallery-list > li .item-con .tit-wrap {padding: 20px 0;}
    .bod-media-list .bod-gallery-list > li .item-con .tit-wrap .item {margin-top: 15px;}
}
@media screen and (max-width: 460px) {
    .bod-media-list .bod-gallery-list > li {width: 100%; margin-top: 15px;}
    .bod-media-list .bod-gallery-list > li:nth-child(2n){margin-left: 0;}
    .bod-media-list .bod-gallery-list > li:nth-child(1){margin-top: 0;}
    .bod-media-list .bod-gallery-list > li .item-con .tit-wrap {padding: 15px 0;}
    .bod-media-list .bod-gallery-list > li .item-con .tit-wrap .item {margin-top: 10px;}
}

/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 > 게시판 > view
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.bod-wrap .bod-view-header {border-top:2px solid #000; border-bottom: 1px solid #E0E0E0;}
.bod-wrap .bod-view-header .bod-title {font-size: 1.25rem; word-break: break-all; padding:30px 0; border-bottom:1px solid #e9e9e9;}
.bod-wrap .bod-view-header .bod-view-title {display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap:20px; padding:20px 0;}
.bod-wrap .bod-view-header .bod-view-title li {color:#666; font-weight:600;}
.bod-wrap .bod-view-header .bod-view-title span {color:#666; font-weight:400;}

.bod-wrap .bod-view-body {padding: 30px 0; min-height:150px;}
.bod-wrap .bod-view-body.gallery {text-align: center;} 
.bod-wrap .bod-view-attachfile {padding: 25px 35px; background:#F7F8FB;}
.bod-wrap .bod-view-attachfile .file-list-content {display:flex;}
.bod-wrap .bod-view-attachfile .file-list-content .file-title {font-size:16px; font-weight:500; margin-right:35px;}
.bod-wrap .bod-view-attachfile .file-list-content .file-list >li {margin-bottom: 0.938rem;}
.bod-wrap .bod-view-attachfile .file-list-content .file-list >li:last-child {margin-bottom: 0;}
.bod-wrap .bod-view-attachfile .file-list-content .file-list >li .attach-icon {display: flex; word-break: break-all; flex-wrap: nowrap; align-items: flex-start; flex-grow: 1;}
.bod-wrap .bod-view-attachfile .file-list-content .file-list >li .attach-icon::before {content: ''; display: block; width: 1.25rem; height: 1.25rem; margin-right: 0.625rem; background-image: url(../images/common/i_attach.svg); background-repeat: no-repeat; background-position: center left; flex-shrink: 0; background-size: 100% auto;}
.bod-wrap .bod-view-attachfile .file-list-content .file-list >li .attach-icon::after {content: ''; display: block; width: 1.25rem; height: 1.25rem; margin-left: 0.938rem; background-image: url(../images/sub/board/img_board_view_downlord.svg); background-repeat: no-repeat; background-position: center right; flex-shrink: 0; background-size: 100% auto;}

.bod-wrap .bod-btn-wrap {margin-top: 3.75rem; text-align: center;}
.bod-wrap .bod-btn-wrap .btn-box {display: flex; margin-top: 3.75rem; text-align: center; flex-wrap: wrap; justify-content: center}
.bod-wrap .bod-btn-wrap .btn-box .btn {margin-right: 0.625rem; padding: 0.5rem 3.75rem; border: 1px solid #004396; border-radius: 0.625rem; font-size: 1rem; color: #ffffff;}
.bod-wrap .bod-btn-wrap .btn-box .btn:last-child {margin-right: 0;}
.bod-wrap .bod-btn-wrap .btn-box #btn_edit {background-color: #004396;}
.bod-wrap .bod-btn-wrap .btn-box #btn_delete {border: 1px solid #8FB63E; background-color: #8FB63E;}
.bod-wrap .bod-btn-wrap .btn-box #btn_lists {color: #004396;}

.bod-wrap .bod-nav-area {margin-top: 3.75rem; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;}
.bod-wrap .bod-nav-area .item-box {display: block;}
.bod-wrap .bod-nav-area .item-box li {display: flex; padding: 1.25rem 1.563rem;}
.bod-wrap .bod-nav-area .item-box li:first-child {border-bottom: 1px solid #E0E0E0;}
.bod-wrap .bod-nav-area .item-box li .item-nav {padding-right:20px; font-weight: 600; color: #666;}
.bod-wrap .bod-nav-area .item-box li .item-nav.prev {background:url(../images/common/i_arrow_up.png) no-repeat right top 6px;}
.bod-wrap .bod-nav-area .item-box li .item-nav.next {background:url(../images/common/i_arrow_down.png) no-repeat right top 6px;}
.bod-wrap .bod-nav-area .item-box li .item {overflow: hidden; display: flex; flex-grow: 1; padding-left:0; margin-left:20px; position:relative;}
.bod-wrap .bod-nav-area .item-box li .item::before {content: ""; display:block; width:1px; height:13px; background:#CACACA; position: absolute; top:4px; left:0;}
.bod-wrap .bod-nav-area .item-box li .item .item-title {overflow: hidden; padding: 0 15px; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1;}
.bod-wrap .bod-nav-area .item-box li .item .item-date {flex-shrink: 0;}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
.bod-wrap .bod-btn-wrap .btn-box #btn_edit {transition: background-color 0.3s color 0.3s;}
.bod-wrap .bod-btn-wrap .btn-box #btn_edit:hover {background-color: #ffffff; color: #004396;}
.bod-wrap .bod-btn-wrap .btn-box #btn_delete {transition: background-color 0.3s color 0.3s;}
.bod-wrap .bod-btn-wrap .btn-box #btn_delete:hover {background-color: #ffffff; color: #8FB63E;}
.bod-wrap .bod-btn-wrap .btn-box #btn_lists {transition: background-color 0.3s, color 0.3s;}
.bod-wrap .bod-btn-wrap .btn-box #btn_lists:hover {background-color: #004396; color:#ffffff}

.bod-wrap .bod-nav-area .item-box li .item {transition: color 0.3s}
.bod-wrap .bod-nav-area .item-box li .item:focus, .bod-wrap .bod-nav-area .item-box li .item:hover {color: #004396;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    .bod-wrap .bod-view-header .bod-view-title {margin-top: 10px;}
    .bod-wrap .bod-view-header .bod-view-title .badge-date {margin-top: 5px;}
    .bod-wrap .bod-view-body {padding: 20px;}
}
@media screen and (max-width: 640px) {
    .bod-wrap .bod-view-attachfile {padding: 20px;}
    .bod-wrap .bod-btn-wrap .btn-box .btn {padding: 0.375rem 3.438rem;}

    .bod-wrap .bod-nav-area .item-box li {padding: 0.938rem 1.25rem;}
    .bod-wrap .bod-nav-area .item-box li .item-nav {display: none;}
    .bod-wrap .bod-nav-area .item-box li .item {flex-direction: column;}
    .bod-wrap .bod-nav-area .item-box li .item .item-title {margin-bottom: 0.313rem; padding: 0;}

    .bod-wrap .bod-view-header .bod-title {padding:15px 0;}
    .bod-wrap .bod-view-header .bod-view-title {gap:10px; padding:10px 0;}
}
@media screen and (max-width: 460px) {
    .bod-wrap .bod-btn-wrap .btn-box {display: block;}
    .bod-wrap .bod-btn-wrap .btn-box .btn {width: 100%; margin-bottom: 0.313rem; margin-right: 0;}
    .bod-wrap .bod-btn-wrap .btn-box .btn:last-child {margin-bottom: 0;}
}