@charset "utf-8";

.required {position: relative;}
.required::after {content: "*"; position: absolute; top: -0.4rem; right: -1.3rem; color: var(--col-red);}


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

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

/* placeholder */
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder{color: var(--col-gray); font-size: 14px; font-weight: 400; letter-spacing: -0.02em;}

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

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

@media (max-width: 992px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    select {height: 4.5rem; padding: 0 2.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 url("../img/check_gray.svg") center 56%/53% no-repeat; border: 1px solid var(--col-bd-gray); border-radius: 50%; transition: var(--trans-25);}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {content: ""; width: 25px; height: 25px; top: 0; left: 0; background: #3398FF url("../img/check_wt.svg") center 56%/53% no-repeat; border-radius: 50%; position: absolute; transition: var(--trans-25);}

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


/* ============================================================
* 라디오
* ============================================================ */
.radio {margin-left: -0.4em; margin-top: 1rem;}
.radio label {display: inline-flex; align-items: center; gap: 1rem; font-size: 1.8rem; font-weight: 600; line-height: 2.4rem; letter-spacing: -0.02em; cursor: pointer;}
.radio [type="radio"], .radio span {vertical-align: middle;}
.radio [type="radio"] {appearance: none; border: 1px solid #919191; border-radius: .4rem; width: 2.4rem; height: 2.4rem; cursor: pointer;}
.radio [type="radio"]:checked {border-color: var(--col-subtheme); background: var(--col-subtheme) url("../img/check_wt.svg") center/1.4rem no-repeat;}
.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(--trans-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-bk); 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 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"] {padding: 0 5rem 0 2.4rem; background: #FAFAFA; border-radius: 5rem;}
.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;}


/* ============================================================
* 페이지네이션
* ============================================================ */
.pagination {margin-top: 6rem;}
.pagination ul {display: flex; justify-content: center; align-items: center; gap: 4px;}
.pagination ul li a {display: flex; justify-content: center; align-items: center; width: 3.6rem; height: 3.6rem; background: #fff; border: 1px solid var(--col-gray); border-radius: 0; color: #666; font-size: 1.6rem; font-weight: 500; transition: var(--trans-25);}
.pagination ul li a.on {background: var(--col-subtheme); border-color: var(--col-subtheme); color: #fff;}


/* ============================================================
* 이전글 다음글
* ============================================================ */
.next-prev-wrap {margin-bottom: 6rem; border-top: 1px solid var(--col-gray);}
.next-prev-wrap .prev,
.next-prev-wrap .next {border-bottom: 1px solid var(--col-gray);}
.next-prev-wrap a {display: flex; padding: 3rem 2rem;}
.next-prev-wrap .head {flex: 0 0 auto; position: relative; width: 12rem; margin-right: 2rem; background-position: 70% center; background-repeat: no-repeat; font-weight: 700;}
.next-prev-wrap .head span {position: absolute; right: 0; display: inline-block; color: var(--col-gray); margin-left: 2rem;}
.next-prev-wrap .prev .head{background-image: url('/img/arrow_prev.png');}
.next-prev-wrap .next .head{background-image: url('/img/arrow_next.png');}
.next-prev-wrap .title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@media (max-width: 576px) {
    .next-prev-wrap .head {width: 9rem;}
}


/*============================================================*/
/* basic */
/*============================================================*/
/* 상단 필터 */
.list-top {display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3.2rem;}
.list-top .total {flex: 1 0 auto;}
.list-top .total span {color: var(--col-subtheme); font-weight: 700;}
.input-guide {margin-bottom: 2rem; text-align: right; color: #444; font-size: 1.6rem; font-weight: 400;}

/* list */
.tb-basic {table-layout: fixed; border-top: 1px solid #000; border-right: 2px solid #fff;}
.tb-basic tr {border-bottom: 1px solid var(--col-bd-gray);}
.tb-basic th,
.tb-basic td {padding: 2rem 1rem; border-right: 1px solid var(--col-bd-gray); text-align: center;}
.tb-basic th {font-size: 1.8rem; font-weight: 600;}
.tb-basic tbody th {background: #F9FFFC;}

table tr .no-data {padding: 5rem 1rem;}
.tb-basic .btn-area {display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;}


@media (max-width: 768px) {
    .list-top {flex-direction: column-reverse; align-items: flex-start; margin-bottom: 2rem;}
    .list-top .search-area,
    .list-top .search-area .input-search {margin: 0 0 0 auto;}

    .tb-basic {border: 0; border-top: 1px solid #000;}
    .tb-basic thead {border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
    .tb-basic tr {display: block; margin-bottom: 1rem;}
    .tb-basic th,
    .tb-basic td {display: block; border-right: 0; border-bottom: 1px solid var(--col-gray); text-align: right;}
    .tb-basic th::before,
    .tb-basic td::before {content: attr(data-label); float: left; margin-right: 3rem; font-weight: 700;}
    .tb-basic td:last-child {border-bottom: 0;}

    .tb-basic .btn-area {justify-content: flex-end;}
    .tb-basic .btn-area .btn-sm {width: auto; max-width: none;}
}


/* write */
.tb-basic-write {border-top: 1px solid var(--col-bk);}
.tb-basic-write tr {border-bottom: 1px solid var(--col-gray);}
.tb-basic-write th {background: #F9F9F9;}
.tb-basic-write td {padding: 1.5rem 3rem;}
.tb-basic-write label {font-size: 1.6rem; font-weight: 500;}

.clause-area {display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;}
@media (max-width: 992px) {
    .tb-basic-write th,
    .tb-basic-write td {display: block; padding: 1.5rem 2rem;}
}



/* 베이직 - 상세 */
.basic-view .view-header {border-top: 2px solid var(--col-bk); border-bottom: 1px solid var(--col-gray); padding: 3rem 4rem;}
.basic-view .view-header .title {margin-bottom: 1.6rem; font-size: 2.8rem; font-weight: 500; line-height: 1.45; word-break: break-all;}
.basic-view .view-header .date {color: var(--col-darkgray); font-size: 1.5rem;}
.basic-view .view-header .info ul {display: flex; gap: 1.8rem; color: var(--col-darkgray);}
.basic-view .view-body {margin-bottom: 6rem; padding: 8rem 4rem 12rem; line-height: 1.5; word-break: break-all;}
.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-gray); border-bottom: 1px solid var(--col-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;}
.basic-view .btn-area {text-align: center;}

/* 첨부파일 */
.file-area {display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6rem;}
.file-area .name {flex: 0 0 auto; padding: 1rem 2rem; background: #eee;}
.file-area ul {margin-top: 10px;}
.file-area ul li + li {margin-top: 5px;}
.file-area ul li a {display: flex; align-items: flex-start; color: #545454; word-break: break-all;}
.file-area ul li i {margin-right: 4px;}

@media (hover: hover) and (pointer: fine) {
    .basic-view .view-body .file-area ul li:hover:before {background: var(--col-bk);}
    .basic-view .view-body .file-area ul li:hover a {color: var(--col-bk); font-weight: 500;}
}
@media (max-width: 768px) {
    .basic-view .view-header {padding: 3rem 0;}
    .basic-view .view-header .title {font-size: 2.4rem; line-height: 1.25;}
    .basic-view .view-header .info ul {flex-direction: column; gap: 0.5rem;}
    .basic-view .view-body {min-height: 240px; margin-bottom: 3rem; padding: 3rem 0;}
    .file-area {margin-bottom: 3rem;}
}
@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;}
    .file-area {flex-direction: column;}
    .file-area ul li {width: 100%;}
}



/*============================================================*/
/* scroll table */
/*============================================================*/
.scroll-guide {display: none; margin-bottom: 2rem; color: #444; font-size: 1.6rem; font-weight: 400;}
.tb-scroll {table-layout: fixed; border-top: 1px solid #000; border-right: 2px solid #fff;}
.tb-scroll tr {border-bottom: 1px solid var(--col-bd-gray);}
.tb-scroll th,
.tb-scroll td {padding: 2rem 1rem; border-right: 1px solid var(--col-bd-gray); text-align: center;}
.tb-scroll th {font-size: 1.8rem; font-weight: 600;}
.tb-scroll tbody th {background: #F9FFFC;}

.tb-scroll .btn-area {display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;}

@media (max-width: 992px) {
    .scroll-guide {display: block;}
    .scroll-container {overflow-x: scroll;}
    .scroll-wrap {width: 900px;}
    /*.tb-scroll {overflow: hidden;}*/
}


/*============================================================*/
/* verti-table */
/*============================================================*/
.verti-table {border-collapse: collapse; border-top: 1px solid var(--col-bk);}
.verti-table tr {border-bottom: 1px solid var(--col-bd-gray);}
.verti-table td,
.verti-table th {padding: 1.6rem 3rem; text-align: left;}
.verti-table th {background: #F4F4F4; color: #555; text-align: left; font-weight: 700;}
.comment {margin-top: 1.5rem; color: #666; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em;}
.verti-table td {background: #fff;}

@media (max-width: 992px) {
    .verti-table th,
    .verti-table td {padding: 1.6rem 2rem;}
}
@media (max-width: 768px) {
    .verti-table th,
    .verti-table td {display: block; padding: 1.6rem 1rem;}
}



/* ============================================================
* 공지사항 - 목록
* ============================================================ */
.notice-list {border-top: solid 2px var(--col-bk);}
.notice-list li {border-bottom: solid 1px var(--col-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-darkgray); 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-bk); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice-list li .cont p {font-size: 1.6rem; color: var(--col-dackgray); 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-wt); background-image: url('/img/arrow_wt_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-subtheme);}
    .notice-list li.no-data:hover {border-color: var(--col-gray);}
    .notice-list li:hover .date {color: var(--col-bk);}
    .notice-list li:hover i {border-color: var(--col-subtheme); background-color: var(--col-subtheme); 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 {display: none; width: 37px; height: 37px;}
}


/* ============================================================
* FAQ - 아코디언
* ============================================================ */
/* Q */
.accordion:first-child {border-top: 1px solid var(--col-bd-gray);}
.accordion button {position: relative; width: 100%; padding: 3.8rem 10rem 3.8rem 6rem; border-bottom: 1px solid var(--col-bd-gray); text-align: left; font-size: 2rem; font-weight: 500;}
.accordion button:before {content: "Q."; position: absolute; top: 3.7rem; left: 3rem;}
.accordion button p {display: inline-block;}
.accordion button .cate {display: inline-block; vertical-align: bottom; margin-right: .5rem; padding: .3rem .8rem; border-radius: .5rem; background: var(--col-subtheme); 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-subtheme);}
.accordion button .icon::after {content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: 1px; background: var(--col-subtheme); transition: var(--trans-25);}


/* A */
.accordion .accordion-content {height: 0; opacity: 0; visibility: hidden; position: relative; background: #f3f3f3; font-size: 1.7rem; font-weight: 400; line-height: 1.75;}
.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 {height: 30rem; padding: 3.8rem 6rem; overflow-y: auto;}
.accordion .accordion-content div::-webkit-scrollbar {width: 11px; height: 11px;}
.accordion .accordion-content div::-webkit-scrollbar-track {background-color: transparent;}
.accordion .accordion-content div::-webkit-scrollbar-thumb {background-color: var(--col-subtheme); border-radius: 50px; border: 3px solid #f3f3f3;}

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

@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 button .cate {margin-bottom: 5px;}
    .accordion button p {display: block;}

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

}