@charset "utf-8";
/* ============================================================
* 공통
* ============================================================ */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {width: 100%; height: 5rem; padding: 0 6.4rem 0 2rem; background: #fff; border: 1px solid var(--col-bd-gray); border-radius: 0; font-size: 1.6rem; font-weight: 500; transition: var(--tran-25);}

textarea {padding: 2rem;}

/* focus */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {border-color: var(--col-brown);}

/* placeholder */
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder{color: var(--col-gray); font-size: 1.5rem; font-weight: 400;}

/* read-only */
input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="number"]:read-only,
textarea:read-only {background: #F3F3F3; border-color: #F3F3F3; cursor: default;}

/* input + timer + button */
.input-btn {position: relative; display: flex; align-items: center; gap: 5px;}
.input-btn .timer {position: absolute; right: calc(12rem + .5rem + 2rem); color: var(--col-red);}
.input-btn .currency {position: absolute; right: 2rem; margin: 0;}
.input-btn button {flex: 0 0 auto; margin-right: 0;}
.asterisk {color: var(--col-gray); font-weight: 400;}

/* input + timer */
.input-timer {position: relative; display: flex; align-items: center;}
.input-timer .timer {position: absolute; right: 2rem; margin: 0; color: var(--col-red);}

/* textarea */
textarea {min-height: 20rem;}

@media (max-width: 992px) {
    input[type="text"],
    input[type="password"],
    textarea,
    select {height: 4.5rem; padding: 0 2.6rem 0 1rem;}
    textarea {padding: 1rem;}
    .input-btn .currency {right: 1rem;}
    .input-timer .timer {right: 1rem;}
    .input-timer input[type="text"] {padding: 0 5.6rem 0 1rem;}
}
/* ============================================================
* 체크박스
* ============================================================ */
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {position: absolute; left: -9999px;}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label {position: relative; display: inline-block; padding-left: 30px; font-weight: 400; letter-spacing: 0; line-height: 1.55; user-select: none; cursor: pointer;}

[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {content: ""; position: absolute; top: 0; left: 0; width: 25px; height: 25px; background: #fff; border: 1px solid var(--col-bd-gray); border-radius: 0; transition: var(--tran-25);}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {content: ""; width: 25px; height: 25px; top: 0; left: 0; background: var(--col-brown) url("/img/check_wt.svg") center/59% no-repeat; position: absolute; transition: var(--tran-25);}

[type="checkbox"]:checked + label:before {background: #fff;}
[type="checkbox"]:not(:checked) + label:after {opacity: 0;}
[type="checkbox"]:checked + label:after {opacity: 1;}

/* ============================================================
* 라디오
* ============================================================ */
.radio {margin-left: -0.4em; margin-top: 1rem;}
.radio label {display: inline-flex; align-items: center; gap: 1rem; font-size: 1.8rem; line-height: 2rem; padding: 0.2em 0.4em;}
.radio [type="radio"], .radio span {vertical-align: middle;}
.radio [type="radio"] {appearance: none; border: max(2px, 0.1em) solid var(--col-bd-gray); border-radius: 50%; width: 1.25em; height: 1.25em; transition: var(--tran-25);}
.radio [type="radio"]:checked {border: 0.4em solid var(--col-brown);}
.radio [type="radio"]:focus-visible {outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted var(--col-brown);}
.radio span {display: inline-flex; align-items: center; gap: 1rem; font-weight: 500; transition: var(--tran-25);}
.radio [type="radio"]:hover + span {cursor: pointer;}
.radio [type="radio"]:disabled {background-color: var(--col-gray); box-shadow: none; opacity: 0.7; cursor: not-allowed;}
.radio [type="radio"]:disabled + span {opacity: 0.7; cursor: not-allowed;}

/* ============================================================
* 검색
* ============================================================ */
.select {position: relative; display: inline-block;}
select {display: flex; width: 12rem; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: var(--col-black); cursor: pointer;}
select::-ms-expand {display: none;}
.select::after {content: ''; position: absolute; top: 0; bottom: 0; right: 0; padding: 0 1.4em; background: url("/img/select.png") center no-repeat; cursor: pointer; pointer-events: none;}
select option[value=""][disabled] {display: none;}

/* 배경 */
.search-area {margin-bottom: 8rem; padding: 2rem; text-align: center; background: #f8f8f8;}
.search-area form {display: flex; justify-content: center; align-items: center; gap: 1rem;}
.search-area select {height: 5rem; padding: 0 3rem 0 2.4rem;}
.search-area .input-search {position: relative; width: calc(100%  - 12rem - 1rem); max-width: 354px;}

/* 검색 버튼 */
.input-search input[type="text"] {height: 5rem; padding: 0 5rem 0 2.4rem;}
.input-search .btn-search {position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 6rem; height: 100%; border: none; background: url('/img/search.svg') center no-repeat; background-size: 2rem; cursor: pointer;}

/* 기간 */
.search-period {display: flex; align-items: center; gap: 1rem;}
.search-period button {background: #fff; transition: var(--trans-25);}
.search-period button.active {border-color: var(--col-blue); color: var(--col-blue); font-weight: 500;}
@media (hover: hover) and (pointer: fine) {
    .search-period button:hover {border-color: var(--col-blue); color: var(--col-blue);}
}
@media (max-width: 992px) {
    .search-area {margin-bottom: 4rem;}
    select,
    .search-area select {height: 4.5rem; padding: 0 2.6rem 0 1rem;}
    .select::after {padding: 0 0.8em;}
    .input-search input[type="text"] {padding: 0 3.8rem 0 1rem;}
    .input-search .btn-search {width: 4rem;}
}

@media (max-width: 576px) {
    .search-area {margin-bottom: 4rem; padding: 2rem 1rem;}
    .search-area form {flex-direction: column; align-items: flex-start;}
    .search-area .input-search {width: 100%; max-width: none;}

    #hold select, .search-area select {width: 10rem;}
    #hold .select + .select {margin-top: 0.5rem;}
}
/* ============================================================
* 페이지네이션
* ============================================================ */
.pagination {margin-top: 6.8rem;}
.pagination ul {display: flex; justify-content: center; align-items: center; gap: 10px;}
.pagination ul li a {display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; line-height: 32px; background: #EAEAEA; border-radius: 0; color: #646464; font-size: 16px; font-weight: 800; transition: all .45s;}
.pagination ul li a.on {background: var(--col-brown); color: #fff;}
.pagination ul li a.btn_prev,.pagination ul li a.btn_prev,
.pagination ul li a.btn_next,.pagination ul li a.btn_next {margin:0 1px;}
@media (max-width: 576px) {
    .pagination ul {gap: 5px;}
}

/* ============================================================
* 베이직 게시판
* ============================================================ */
/* 베이직 - 목록 */
.basic-list {table-layout: fixed; background: #fff; border-right: 2px solid #fff; white-space: nowrap;}
.basic-list thead {border-top: 2px solid var(--col-black);}
.basic-list thead th {color: var(--col-black); font-weight: 600;}
.basic-list thead th .title {text-align: center;}
.basic-list tbody tr {transition: color .25s;}
.basic-list th,
.basic-list td {padding: 1.45rem 1rem; border-bottom: 1px solid var(--col-bd-gray); border-right: 1px solid var(--col-bd-gray); text-align: center; color: var(--col-darkgray); word-break: break-all; white-space: break-spaces;}

.basic-list tbody [data-head="title"] {padding: 2rem; text-align: left;}
.basic-list .title {width: calc(100% - 7.4rem - 1rem); color: var(--col-black); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.basic-list .reply {display: inline-block; width: 7.4rem; height: 2.7rem; line-height: 2.7rem; vertical-align: text-bottom; margin-right: 1rem; text-align: center; background: var(--col-gray); border-radius: 50px; color: #fff; font-size: 14px; font-weight: 500;}
.basic-list .reply.done {background: var(--col-theme);}
.basic-list .no-data {padding: 6rem 1rem; color: var(--col-black); cursor: default;}
.basic-list .no-data br {display: none;}

.basic-list .btn-sm {min-width: auto; height: 3rem; margin: 0 auto;}

@media (hover: hover) and (pointer: fine) {
    .basic-list tbody tr:hover {background: #f5f5f5;}
}
@media (max-width: 992px) {
    .basic-list.data tbody tr td {border: none;}
    .basic-list.data, .basic-list.data thead, .basic-list.data tbody, .basic-list.data th, .basic-list.data td, .basic-list.data tr {display: block;}
    .basic-list.data thead tr {display: none;}
    .basic-list.data tbody tr {padding: 2rem 0; border-bottom: 1px solid var(--col-bd-gray);}
    .basic-list.data tbody tr td,
    .basic-list.data td.title,
    .basic-list.data tbody [data-head="title"] {padding: 0.5rem 1rem; text-align: left;}
    .basic-list.data tbody tr td + td {border-left: none;}
    .basic-list.data tbody tr td:before {content: attr(data-head); display: inline-block; min-width: 110px; text-align: left; font-weight: 700; text-transform: uppercase;}
    .basic-list.data .no-data:before {display: none;}

    .basic-list.data .no {display: none;}
    .basic-list.data .title {display: block; width: 100%;}
    .basic-list.data [data-head="title"] .title {display: block; width: 100%; margin-top: 1rem;}
    .basic-list.data .no-data {text-align: center;}
    .basic-list.data .no-data br {display: block;}
}

/* 베이직 - 상세 */
.basic-view .view-header {border-top: 2px solid var(--col-brown); border-bottom: 1px solid var(--col-bd-gray); padding: 5rem 2rem; text-align: center;}
.basic-view .view-header .title {margin-bottom: 2rem; color: var(--col-black); font-size: 2.3rem; font-weight: 700; line-height: 1.45;}
.basic-view .view-header .date {color: var(--col-gray); font-size: 1.5rem;}
.basic-view .view-body {padding: 5rem 0;}
.basic-view .view-body .contents {min-height: 240px;}
.basic-view .view-body .file-area {display: flex; margin-top: 8rem; border-top: 1px solid var(--col-bd-gray); border-bottom: 1px solid var(--col-bd-gray);}
.basic-view .view-body .file-area .name {padding: 3rem; background: #f8f8f8;}
.basic-view .view-body .file-area ul {padding: 3rem;}
.basic-view .view-body .file-area ul li {position: relative; padding-left: 1rem;}
.basic-view .view-body .file-area ul li::before {content: ""; position: absolute; top: 0.7rem; left: 0; width: 4px; height: 4px; background: var(--col-gray); border-radius: 50%;}
.basic-view .view-body .file-area ul li + li {margin-top: 1.5rem;}
.basic-view .view-body .file-area ul li a {color: var(--col-gray); word-break: break-all;}
@media (hover: hover) and (pointer: fine) {
    .basic-view .view-body .file-area ul li:hover:before {background: var(--col-black);}
    .basic-view .view-body .file-area ul li:hover a {color: var(--col-black); font-weight: 500;}
}
@media (max-width: 768px) {
    .basic-view .view-header {padding: 3rem 2rem;}
    .basic-view .view-body {min-height: 240px; padding: 3rem 0;}
    .basic-view .view-header .title {font-size: 1.8rem;}
    .btn-area {margin-top: 4rem;}
}
@media (max-width: 576px) {
    .basic-view .view-body .file-area {display: block;}
    .basic-view .view-body .file-area .name {padding: 3rem 2rem;}
    .basic-view .view-body .file-area ul {padding: 2rem 2rem 3rem;}
}

/* ============================================================
* 모바일 스크롤
* ============================================================ */
.scroll-container > .guide {display: none; margin-bottom: 5px; letter-spacing: 0;}
.scroll-wrap {
    background-image:
        /* Shadows */
        linear-gradient(to right, white, white),
        linear-gradient(to right, white, white),

        /* Shadow covers */
        linear-gradient(to right, rgba(0,0,0,.15), rgba(255,255,255,0)),
        linear-gradient(to left, rgba(0,0,0,.15), rgba(255,255,255,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 30px 100%, 30px 100%, 20px 100%, 20px 100%;

    /* Opera */
    background-attachment: local, local, scroll, scroll;
}
@media (max-width: 1300px) {
    .scroll-container > .guide {display: block;}
    .scroll-wrap {overflow-x: auto;}
    .scroll-wrap .scroll {display: block; width: 1220px;}
}x

/* ============================================================
* 갤러리 게시판
* ============================================================ */
/* 갤러리 - 목록 */
.thumb-list > ul {display: flex; flex-wrap: wrap; gap: 3rem .8rem;}
.thumb-list > ul > li {width: calc(25% - 0.6rem); background: #F3F3F3;}
.thumb-list > ul {display: flex; flex-wrap: wrap; gap: 3rem .8rem;}
.thumb-list > ul > li > a {display: block; width: 100%; height: 100%;}
.thumb-list li.no-data {width: 100%; padding: 8rem 0; text-align: center;}

.thumb-list .thumb-wrap {overflow: hidden;}
.thumb-list .thumb {width: 100%; aspect-ratio: 395/328; background-position: center; background-size: cover; background-repeat: no-repeat; transition: var(--trans-25);}
.thumb-list .content {padding: 2.4rem 3.2rem 3rem;}
.thumb-list .content .date {margin-bottom: 1rem; color: var(--col-gray); font-size: 14px;}
.thumb-list .content .title {min-height: 6rem; font-size: 2.4rem; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.thumb-list .content i {display: flex; width: 37px; height: 37px; margin-top: 2.4rem; border-radius: 50%; border: 1px solid var(--col-bd-gray); background-image: url('/img/arrow_gray_r.svg'); background-position: 55% center; background-size: 8px; background-repeat: no-repeat; transition: var(--trans-25);}
@media (hover: hover) and (pointer: fine) {
    .thumb-list > ul > li > a:hover .thumb {transform: scale(1.125);}
    .thumb-list > ul > li > a:hover .content i {border-color: var(--col-brown); background-color: var(--col-brown); background-image: url('/img/arrow_wt_r.svg');}
}
@media (max-width: 992px) {
    .thumb-list > ul > li {width: calc(33.33% - 0.6rem);}
}
@media (max-width: 768px) {
    .thumb-list .content {padding: 2rem 1.5rem;}
}
@media (max-width: 576px) {
    .thumb-list > ul > li {width: calc(50% - 0.6rem);}
    .thumb-list .content .title {font-size: 2rem;}
    .thumb-list .content i {width: 24px; height: 24px; background-size: 6px;}
}
@media (max-width: 350px) {
    .thumb-list > ul > li {width: 100%;}
}

/* ============================================================
* 비디오 게시판
* ============================================================ */
/* 비디오 - 상세 */
.video-wrap {position: relative; width: 100%; height: 0; margin-bottom: 30px; padding-bottom: 56.26%; overflow: hidden;}
.video-wrap .video > iframe ,
.video-wrap .video > img ,
.video-wrap .video > div {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%;}

/* ============================================================
* 공지사항
* ============================================================ */
.notice-list {border-top: solid 2px var(--col-brown);}
.notice-list li {border-bottom: solid 1px var(--col-bd-gray); transition: var(--trans-25);}
.notice-list li.no-data {padding: 8rem 0; text-align: center;}
.notice-list li a {display: flex; align-items: center; justify-content: flex-start; gap: 4rem; padding: 4rem;}
.notice-list li .date {flex-shrink: 0; text-align: center; color: var(--col-gray); font-size: 1.8rem; font-weight: 400; transition: var(--trans-25);}
.notice-list li .date strong {font-size: 4.8rem; font-weight: 500;}
.notice-list li .cont {flex: 1 0 0; width: auto;display: flex; flex-direction: column; gap: 1rem; overflow: hidden;}
.notice-list li .cont h4 {margin: 0; font-size: 2rem; color: var(--col-black); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice-list li .cont p {font-size: 1.6rem; color: var(--col-gray); line-height: 2.6rem; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.notice-list li i {flex-shrink: 0; display: flex; width: 47px; height: 47px; border-radius: 50%; border: 1px solid var(--col-bd-gray); background-image: url('/img/arrow_gray_r.svg'); background-position: 55% center; background-size: 10px; background-repeat: no-repeat; transition: var(--trans-25);}

@media (hover: hover) and (pointer: fine) {
    .notice-list li:hover {border-color: var(--col-brown);}
    .notice-list li.no-data:hover {border-color: var(--col-bd-gray);}
    .notice-list li:hover .date {color: var(--col-black);}
    .notice-list li:hover i {border-color: var(--col-brown); background-color: var(--col-brown); background-image: url('/img/arrow_wt_r.svg');}
}
@media (max-width: 768px) {
    .notice-list li a {gap: 2rem; padding: 3rem 2rem;}
}
@media (max-width: 576px) {
    .notice-list li a {flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2rem 1rem;}
    .notice-list li .date {display: flex; flex-direction: row-reverse; padding: 0;}
    .notice-list li .date strong {position: relative; padding-left: 5px; font-size: inherit; font-weight: inherit;}
    .notice-list li .date strong::before {content: "-"; position: absolute; top: 0; left: 0;}
    .notice-list li .cont {flex: 1 0 auto; width: 100%; margin: 0;}
    .notice-list li i {width: 37px; height: 37px;}
}
/* ============================================================
* 1:1문의 = QnA
* ============================================================ */
/* 1:1문의 - 목록 */
.qnaPage .search-area {display: flex; justify-content: space-between;}
.qnaPage .table-wrap {min-height: 35rem;}
.table-wrap .optional {margin-bottom: 1rem; font-size: 1.6rem; font-weight: 600;}
.qnaPage td.title {position: relative; text-align: left; padding: 1.45rem;}
.qnaPage .state {display: inline-flex; justify-content: center; align-items: center; height: 2.6rem; margin-right: .5rem; padding: 0 1.2rem; border-radius: 1.2rem; color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0;}
.qnaPage .state.ready {background: var(--col-gray);}
.qnaPage .state.done {background: var(--col-brown);}
.qnaPage.list .btn-area {margin-top: 4rem; text-align: right;}

/* 1:1문의 - 작성 */
.board-write .guide {margin: 1.5rem 0; text-align: right; color: var(--col-gray); font-size: 1.6rem;}
.board-write .guide span {color: var(--col-red);}

/* 1:1문의 - 상세 */
.qnaPage .question,
.qnaPage .answer {border-top: 1px solid var(--col-black); border-bottom: 1px solid var(--col-bd-gray);}
.qnaPage .question .content,
.qnaPage .answer .content {padding: 3rem 2.5rem; min-height: 20rem; line-height: 1.75; word-break: break-all;}
.qnaPage .answer {border-bottom: 1px solid var(--col-bd-gray);}

.qnaPage .title-wrap {position: relative; display: flex; justify-content: space-between; gap: 3rem; padding: 2rem 2.5rem 2rem 6.5rem; background: #F3F3F3; line-height: 1.5;}
.qnaPage .title-wrap::before {position: absolute; top: 1.8rem; left: 3rem; font-size: 1.8rem; font-weight: 700;}
.qnaPage .question .title-wrap::before {content: "Q.";}
.qnaPage .answer .title-wrap::before {content: "A.";}

.qna-view .title {font-size: 1.8rem; font-weight: 500; word-break: break-all;}
.qna-view .title .category {margin-bottom: 0.5rem; color: var(--col-brown); font-size: 90%; font-weight: 700;}
.qna-view .date {flex: 0 0 auto; color: var(--col-gray);}
@media (max-width: 992px) {
    /* 목록 */
    .qnaPage .table-wrap {min-height: auto;}
    .qnaPage td.title {min-height: 60px;}
    .qnaPage td .title {padding-left: 90px; padding-top: 10px;}
    .qnaPage .state {position: absolute; top: 30px; left: 10px;}
}
@media (max-width: 768px) {
    /* 상세 */
    .qnaPage .title-wrap {flex-direction: column; gap: 1rem; padding: 5rem 1.5rem 2rem;}
    .qnaPage .title-wrap::before {left: 1.5rem;}
    .qnaPage .question .content,
    .qnaPage .answer .content {padding: 2rem 1.5rem;}
    .qnaPage .qna-view .date {text-align: right;}
}


/* ============================================================
* FAQ - 아코디언
* ============================================================ */
/* Q */
.accordion:first-child {border-top: 1px solid var(--col-gray);}
.accordion button {position: relative; width: 100%; padding: 3.8rem 10rem 3.8rem 6rem; border-bottom: 1px solid var(--col-gray); text-align: left; font-size: 2rem; font-weight: 500;}
.accordion button:before {content: "Q."; position: absolute; top: 3.7rem; left: 3rem;}
.accordion button .cate {display: inline-block; vertical-align: bottom; margin-right: .5rem; padding: .3rem .8rem; border-radius: .5rem; background: var(--col-brown); color: #fff; font-size: 1.5rem; font-weight: 400; letter-spacing: 0;}
.accordion button .icon{display: inline-block; vertical-align: top; width: 3rem; height: 3rem;position: absolute; top: 3.7rem; right: 3rem;}
.accordion button .icon::before {content:""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 1px; background: var(--col-gray);}
.accordion button .icon::after {content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background: var(--col-gray); transition: var(--trans-25);}


/* A */
.accordion .accordion-content {opacity: 0; visibility: hidden; position: relative; background: #f3f3f3; font-size: 1.7rem; font-weight: 400; line-height: 1.75; transition: var(--trans-25);}
.accordion .accordion-content:before {content: "A."; position: absolute; top: 3.6rem; left: 3.2rem; color: var(--col-red); font-size: 2rem; font-weight: 500;}
.accordion .accordion-content div {padding: 3.8rem 6rem;}

/*열렸을때*/
.accordion.is-open button .icon::after {opacity: 0;}
.accordion.is-open .accordion-content {opacity: 1; visibility: visible; max-height: none;}

@media (max-width: 768px) {
    .accordion button {padding: 3rem 3.8rem 3rem 4rem; font-size: 1.8rem; line-height: 1.5;}
    .accordion button:before {top: 3rem; left: 1rem;}
    .accordion button .icon {top: 3.4rem; right: 1rem; width: 2rem; height: 2rem;}

    .accordion .accordion-content:before {top: 2.6rem; left: 1.3rem;}
    .accordion .accordion-content div {padding: 3rem 1.3rem 3rem 4.4rem;}

}