@charset "utf-8";


/* 페이지네이션 */
.paging_box {margin: 50px 0;}
.paging_box .paging {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem;}
.paging_box .paging a {display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; font-size: .8125rem; color: #858585; text-align: center; cursor: pointer;}
.paging_box .paging a.active {background: #19464A; color: #fff;}
.paging_box .paging a:hover {transition: all .2s ease;}
.paging_box .paging .prebtn a:nth-child(1){background:url(/resources/images/icon/pprev_page.svg) no-repeat center;}
.paging_box .paging .prebtn a:nth-child(2){background:url(/resources/images/icon/prev_page.svg) no-repeat center;}
.paging_box .paging .nextbtn a:nth-child(1){background:url(/resources/images/icon/next_page.svg) no-repeat center;}
.paging_box .paging .nextbtn a:nth-child(2){background:url(/resources/images/icon/nnext_page.svg) no-repeat center;}


/* 카테고리, 검색 */
.board .top {display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 2rem;}
.board .top .bd_cate {display: flex; gap: 0.625rem;}
.board .top .bd_cate li a {display: flex; align-items: center; justify-content: center; padding: 0.375rem 0.625rem; border-radius: 0.3125rem; background: #F6F6F6; font-size: 1rem; color: #555;}
.board .top .bd_cate li.active a {background: #19464A; color: #fff; font-weight: 600;}
.board .top .bd_search {margin-left: auto;}
.board .top .bd_search .wrap {display: flex; gap: 1.25rem;}
.board .top .bd_search .sel {position: relative; background: #fff; cursor: pointer;}
.board .top .bd_search .sel select {width: auto; min-width: 130px; border: 1px solid #bbb; padding: 12px 2.25rem 12px 0; font-size: 1rem; text-indent: 1rem; position: relative; z-index: 1; background: transparent;}
.board .top .bd_search .sel::after{content: ""; width: 16px; height: 16px; position: absolute; right: .9375rem; top: 50%; transform: translateY(-50%); background: url(/resources/images/icon/ico_arrow_b.svg) center no-repeat; background-size: 11px; cursor: pointer; z-index: 0;}
.board .top .bd_search .inp {position: relative; background: #fff;}
.board .top .bd_search .inp input {width: 100%; height: 100%; border: 1px solid #bbb; padding: 12px 2.25rem 12px 0; font-size: 1rem; text-indent: 1rem;}
.board .top .bd_search .inp input::placeholder {color: #777; font-size: 1rem;}
.board .top .bd_search .inp .btn {background: url(/resources/images/icon/ico_search.svg) center center no-repeat; width: 17px; height: 17px; background-size: cover; position: absolute; right: .9375rem; top: 50%; transform: translateY(-50%);}

@media (max-width: 767px) {
    /* 카테고리, 검색 */
    .board .top .bd_search {width: 100%;}
    .board .top .bd_search .inp {width: calc(100% - 120px);}
}


/* HTML 출력 */
.html {padding: 2rem; background: #F8F8F8; border-radius: 0.3125rem;}
.html * {font-size: 1.0625rem!important; background: transparent!important;}


/* 일반리스트 */
.board .bd_list {width: 100%; margin-bottom: 50px;}
.board .bd_list .total {margin: 20px 0; font-size: .9375rem;}
.board .bd_list .total span {font-weight: 600;}
.board .bd_list .empty {width: 100%!important; border-top: 1px solid #222; border-bottom :1px solid #ebebeb; display: flex; align-items: center; justify-content: center; padding: 10rem 0; color: #858585;}
.board .bd_list .bd_list_top {border-top: 2px solid #222; border-bottom: 1px solid #ebebeb; display: flex; align-items: center; justify-content: space-between; padding: 1rem 0;}
.board .bd_list .bd_list_top > div {text-align: center; font-weight: 700; font-size: 1rem;}
.board .bd_list .bd_list_top .num {width: 15%;}
.board .bd_list .bd_list_top .subj {width: 70%;}
.board .bd_list .bd_list_top .date {width: 15%;}
.board .bd_list .bd_list_body > ul > li {border-bottom: 1px solid #ebebeb;}
.board .bd_list .bd_list_body > ul > li.notice {background: #F8F8F8;}
.board .bd_list .bd_list_body > ul > li > a {display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0;}
.board .bd_list .bd_list_body > ul > li > a .num {width: 15%; text-align: center; font-size: 1rem; font-weight: 500;}
.board .bd_list .bd_list_body > ul > li.notice > a .num .mark {color: #fff; background: #007764; padding: 4px 8px; border-radius: 50px; display: inline-block; width: auto; font-size: .875rem;}
.board .bd_list .bd_list_body > ul > li > a > ul {width: 85%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 0;}
.board .bd_list .bd_list_body > ul > li > a > ul li.subj {width: calc(100% - 17.6%); text-align: left; display: flex; align-items: center; gap: 10px;}
.board .bd_list .bd_list_body > ul > li > a > ul li.subj h4 {font-size: 1rem; font-weight: 500; transition: .3s; position: relative; height: 1.25rem; line-height: 1.25rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; word-wrap: break-word; word-break: break-all; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.board .bd_list .bd_list_body > ul > li > a > ul li.subj .attachment {transform: rotate(45deg);}
.board .bd_list .bd_list_body > ul > li > a > ul li.date {width: 17.6%; text-align: center; font-size: 1rem; font-weight: 500;}

@media (max-width: 767px) {
    .board .bd_list .bd_list_top {display: none;}
    .board .bd_list .bd_list_body {border-top: 2px solid #222;}
    .board .bd_list .bd_list_body > ul > li > a > ul li.subj,
    .board .bd_list .bd_list_body > ul > li > a > ul li.date {width: 100%; text-align: left; padding: 0 1rem;}
}


/* 갤러리리스트 */
.board .bd_list .bd_gallery_body ul {display: flex; flex-wrap: wrap; gap: 4rem 20px;}
.board .bd_list .bd_gallery_body ul li {width: calc(100% / 3 - 13.3333px);}
.board .bd_list .bd_gallery_body ul li a {display: block; width: 100%; height: 100%;}
.board .bd_list .bd_gallery_body ul li a .thum {width: 100%; height: 0; padding-top: 75%; position: relative; border: 1px solid #ebebeb; overflow: hidden;}
.board .bd_list .bd_gallery_body ul li a .thum img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; transition: .3s;}
.board .bd_list .bd_gallery_body ul li a:hover .thum img {transform: scale(1.1);}
.board .bd_list .bd_gallery_body ul li a .info {display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px;}
.board .bd_list .bd_gallery_body ul li a .info li {width: 100%;}
.board .bd_list .bd_gallery_body ul li a .info li h4.tit {font-size: 1.25rem; font-weight: 700; height: 1.25rem; line-height: 1.25rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; word-wrap: break-word; word-break: break-all; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transition: .3s; position: relative;}
.board .bd_list .bd_gallery_body ul li a .info li span.date {font-size: .9375rem; color: #858585;}

@media (max-width: 1023px) {
    .board .bd_list .bd_gallery_body ul li {width: calc(100% / 2 - 10px);}
}

@media (max-width: 767px) {
    .board .bd_list .bd_gallery_body ul li {width: 100%;}
}


/* 질문답변형 */
.qna .col15 {width: 15%;}
.qna .col40 {width: 40%;}
.qna .bd_list_body ul li a {font-size: .9375rem; color: #555; text-align: center;}
.qna .bd_list_body ul li a .subj {font-size: 1rem; color: #222; font-weight: 600; display: flex; align-items: center; justify-content: flex-start;}
.qna .bd_list_body ul li a .subj img {width: 1rem; height: 1.25rem; object-fit: contain;}
.qna .bd_list_body ul li a .subj h4 {position: relative; height: 1.25rem; line-height: 1.25rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; word-wrap: break-word; word-break: break-all; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.qna .bd_list_body ul li a .re_txt {padding: 6px 10px; background: #222; border-radius: 5px; font-size: .8125rem; color: #fff;}
.answer {padding: 2rem; border-bottom: 1px solid #ebebeb;}
.answer span {font-size: .8125rem; color: #fff; padding: 6px 10px; background: #222; border-radius: 5px;}
.answer .txt {margin-top: 20px; text-indent: 20px; position: relative;}
.answer .txt::before {content: "└"; position: absolute; left: -20px; top: 0;}
.answer .txt p {line-height: 1.5;}
.secret .secret_top h4 {font-size: 2rem; font-weight: 800; margin-bottom: 2rem; text-align: center;}
.secret .secret_top p {color: #555; font-size: 1.125rem; font-weight: 500; text-align: center;}
.secret .inp_box {max-width: 350px; width: 100%; margin: 2rem auto 4rem;}

@media (max-width: 767px) {
    .qna .col15:nth-of-type(1) {width: 10%;}
    .qna .col15:nth-of-type(4) {display: none;}
    .qna .col15 {width: 20%;}
    .qna .col40 {width: 50%;}
    .answer {padding: 1rem;}
}


/* 게시글작성 */
.board .bd_write {margin: 50px 0; border-top: 2px solid #222;}
.board .bd_write > li {padding: 1.5rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; border-bottom: 1px solid #ebebeb;}
.board .bd_write > li .category {max-width: 250px;}
.board .bd_write .editor {width: 100%; justify-content: center;}
.board .bd_write > li .tit {width: 140px; font-size: 1rem; font-weight: 700; position: relative;}
.board .bd_write > li .txt {width: calc(100% - 160px); font-size: 1rem; }
.board .bd_write > li.bd_attach .alert {display: block; font-size: .9375rem; color: #666; margin-bottom: 20px;}
.board .bd_write > li.bd_attach .alert #filetype {font-weight: 600;}
.board .bd_write > li.bd_attach .alert #filesize {color: #19464A;}
.board .bd_write > li.bd_attach .btn_wrap {justify-content: flex-start;}
.board .bd_write > li.bd_attach .btn_wrap .btn {font-size: .9375rem; padding: 7px 10px; border-radius: 5px;}
.board .bd_write > li.bd_attach ul li {margin-top: 10px; padding-left: 20px; position: relative;}
.board .bd_write > li.bd_attach ul li::before {content: ""; background: url(/resources/images/icon/ico_attachment.svg) center center no-repeat; width: 15px; height: 15px; background-size: cover; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.board .bd_write > li.bd_attach ul li button {margin-left: 20px; background: #777; color: #fff; border-radius: 5px; font-size: .8125rem; padding: 5px 10px;}

@media (max-width: 767px) {
    .board .bd_write > li .tit,
    .board .bd_write > li .txt {width: 100%;}
}


/* 게시글내용 */
.board .bd_detail .view_top {padding: 1.5rem 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
.board .bd_detail .view_top h4 {width: 100%; font-size: 2rem; font-weight: 800; text-align: center;}
.board .bd_detail .view_top .info {width: 100%; display: flex; gap: 20px; align-items: center; justify-content: center; color: #555; font-size: .9375rem;}
.board .bd_detail .view_top .info li {position: relative;}
.board .bd_detail .view_top .info li + li::before {content: ""; width: 0; height: 10px; border-left: 1px solid #ddd; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);}
.board .bd_detail .view_files {width: 100%; padding: 2rem 1rem; border-bottom: 1px solid #222;}
.board .bd_detail .view_files ul {display: flex; flex-wrap: wrap; flex-direction: column; gap: 10px;}
.board .bd_detail .view_files ul li a {display: inline-flex; align-items: center; gap: 10px; transition: .3s; font-size: .9375rem; color: #555;}
.board .bd_detail .view_files ul li a:hover {text-decoration: underline; text-underline-position: under;}
.board .bd_detail .view_files ul li a img {width: 14px; height: 14px; object-fit: contain; transform: rotate(45deg);}
.board .bd_detail .view_cont {padding: 3rem 1rem; border-top: 2px solid #222; border-bottom: 1px solid #ebebeb;}
.board .bd_detail .view_cont .con *,
.board .bd_detail .view_cont .con p {font-family: 'SUIT'!important; font-size: 16px!important; line-height: 1.5!important;}
.board .bd_detail .view_cont .con img {max-width: 100%;}
.board .bd_detail .view_cont .con > iframe {margin-bottom: 1.5rem;}
.board .bd_detail .view_cont .con .bd_img {margin-bottom: 2rem; text-align: center;}
.board .bd_detail .view_cont .con .bd_img img {max-width: 100%;}
.board .bd_detail .btn_wrap {margin-top: 50px;}

@media (max-width: 767px) {
    .board .bd_detail .view_top h4 {font-size: 1.5rem;}
    .board .bd_detail .view_cont .con img {width: 100%!important;}
}


/* 커스텀 placeholder */
.customInp {position: relative}
.customInp .placeholder-text {position: absolute; color: #aaa; pointer-events: none; padding-left: 1.125rem; top: 50%; transform: translateY(-50%); font-size: 1rem;}
.bold {font-weight: bold;}