@charset "utf-8";

body {background-color: #F1F0EC;}

/* 필수 표시 */
.required {display: inline-block; position: relative; width: 1rem; text-indent: -999px; overflow: hidden; vertical-align: top; transform: translateY(-2px);}
.required:before {content:'*'; position:absolute; top:0; left:0; color: var(--col-brown); font-weight:700; text-indent:0;}

/* 입력요소 */
.form-input {display: flex; padding: 1.8rem 0 1.6rem; background: #fff; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 800;}
.form-input + .form-input {margin-top: 2rem;}
.form-input > label {flex: 0 0 auto; position: relative; width: 160px; padding: 0 2rem; text-align: center;}
.form-input > label:before {content: ""; position: absolute; top: -1px; right: 0; width: 1px; height: 100%; background: var(--col-gray);}
.form-input input,
.form-input textarea {flex-grow: 1; padding: 0 2rem; font-weight: 400;}
.form-input textarea {min-height: 43rem;}

/* 라디오 버튼 */
.form-radio-wrap {display: flex; flex-wrap: wrap; gap: 1rem 3rem; padding: 0 2rem;}
[type="radio"]:checked,
[type="radio"]:not(:checked) {position: absolute; left: -9999px;}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {position: relative; display: inline-block; padding-left: 28px; font-size: 16px; font-weight: 400; letter-spacing: 0; cursor: pointer; transition: all .2s ease;}
[type="radio"]:checked + label {font-weight: 600;}

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 1px solid var(--col-brown); border-radius: 100%; background: var(--col-brown);}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {content: ""; width: 14px; height: 14px; top: 4px; left: 4px; background: #fff; position: absolute;  border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
[type="radio"]:not(:checked) + label:after {opacity: 0; -webkit-transform: scale(0); transform: scale(0);}
[type="radio"]:checked + label:after {opacity: 1; -webkit-transform: scale(1); transform: scale(1);}

/* 체크박스 */
.form-check {margin-top: 4.2rem;}
[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: 28px; font-size: 16px; font-weight: 400; letter-spacing: 0; cursor: pointer;}
[type="checkbox"]:checked + label {font-weight: 600;}

[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border: 1px solid var(--col-brown); border-radius: 5px; background: var(--col-brown);}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {content: ""; width: 22px; height: 22px; top: 1px; left: 0; background: url("/erp_img/check_wt.png") center/contain no-repeat; position: absolute;}
[type="checkbox"]:not(:checked) + label:after {opacity: 0;}
[type="checkbox"]:checked + label:after {opacity: 1;}

/* 게시판 */
.bd {min-height: 81rem; padding: 7rem 0 10rem;}
.list-top {margin-bottom: 25px;}
.bd .btn-area {display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 9.7rem;}

/* 검색 */
.sch_box {position: relative; width: 20rem; max-width: 100%; height: 30px; margin-left: auto; padding: 8px 14px 6px 14px; border: 1px solid var(--col-gray); border-radius: 5px;}
.sch_box::placeholder {font-family: "NanumSquare", "Inter", sans-serif; font-size: 14px; font-weight: 800;}
.sch_box input {background-color: transparent;}
.sch_box .search-button {position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 14px; height: 14px; background: url("/img/search.svg") center/contain no-repeat;}

/* 베이직 게시판 - 목록 */
.bd-basic-list li {display: flex; justify-content: space-between; align-items: center; height: 50px; border-bottom: 1px solid var(--col-gray); text-align: center; font-size: 14px; font-weight: 800;}
.bd-basic-list li a {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%;}
.bd-basic-list li a::before {content: ""; display: block; width: 0; height: 2px; background-color: var(--col-brown); position: absolute; left: 0; bottom: -1px;}
.bd-basic-list .number,
.bd-basic-list .title,
.bd-basic-list .date {padding: 0 5px;}
.bd-basic-list .number {flex: 0 0 6%;}
.bd-basic-list .title {flex: 1 0 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bd-basic-list .date {flex: 0 0 120px;}
.bd-basic-list .thead {height: 46px; border-width: 4px;}
.bd-basic-list .thead .title {text-align: center;}
.bd-basic-list .empty {justify-content: center; align-items: center; height: 130px;}

/* 페이지네이트 */
.pagination {margin-top: 6.8rem;}
.pagination ul {display: flex; justify-content: center; align-items: center; gap: 7px;}
.pagination ul li a {display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; background: #d9d9d9; border-radius: 3px; font-size: 12px; 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_pprev,
.pagination ul li a.btn_next,.pagination ul li a.btn_nnext {margin:0 1px;}

/* 베이직 게시판 - 상세 */
.bd-basic-view {padding: 4.2rem; background: #fff;}
.bd-basic-view .top {margin-bottom: 2.7rem; padding: 3.4rem 0; border-bottom: 1px solid var(--col-gray); text-align: center;}
.bd-basic-view .top .title {font-size: 2.8rem; font-weight: 700;}
.bd-basic-view .top .date {margin-top: 13px; color: var(--col-gray); font-size: 2rem; font-weight: 800;}
.bd-basic-view .content {min-height: 43rem; font-family: "Inter", sans-serif; font-size: 2rem; font-weight: 300; word-break: break-all;}

/* 답변 안내 */
.form-input.mail {flex-wrap: wrap;}
.exclamation {position: relative; width: 100%; margin-top: 14px; margin-left: 2rem; padding-left: 24px; padding-right: 2rem;}
.exclamation::before {content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: url("/erp_img/exclamation.png") center/contain no-repeat;}

/* 개인정보 동의 */
.terms {background: #fff; padding: 2rem; margin-top: 2rem; font-family: "Inter", sans-serif; font-size: 15px;}
.terms .title {position: relative; margin-bottom: 20px; padding-left: 30px; font-size: 16px; font-weight: 800;}
.terms .title::before {content: ""; position: absolute; top: 1px; left: 0; width: 20px; height: 20px; background: url("/erp_img/check_bk.png") center/contain no-repeat;}
.terms ol li + li {margin-top: 5px;}
.terms p {margin-top: 15px;}

@media (hover: hover) and (pointer: fine) {
    .bd-basic-list li a:hover::before {width: 100%; transition: width 1s;}
    .pagination ul li a:hover {background: var(--col-brown); color: #fff;}
}
@media (max-width: 992px) {
    .form-input {flex-direction: column; gap: 1rem;}
    .form-input > label {width: 100%; text-align: left;}
    .form-input > label:before {display: none;}
    .form-input textarea {min-height: 20rem;}
}
@media (max-width: 768px) {
    /* 베이직 게시판 - 목록 */
    .bd-basic-list {border-top: 2px solid var(--col-gray);}
    .bd-basic-list .thead,
    .bd-basic-list .number {display: none;}
    .bd-basic-list li {height: 78px;}
    .bd-basic-list li a {flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; text-align: left;}
    .bd-basic-list .title,
    .bd-basic-list .date {flex: 0 0 auto; width: 100%;}

    /* 베이직 게시판 - 상세 */
    .bd-basic-view {padding: 4.2rem 2rem;}
    .bd-basic-view .top {padding: 2rem 0;}
    .bd-basic-view .top .title {font-size: 2.25rem;}
    .bd-basic-view .top .date {font-size: 1.5rem;}
    .bd-basic-view .content {font-size: 1.75rem;}

    /* 베이직 게시판 - 작성, 문의 */
    .bd .btn-area {gap: 1rem;}
}