@charset "utf-8";
em {font-style: normal;}
#captcha_img {border-radius: 5px; border: 1px solid var(--line); height: 50px;}
/* 버튼 */
.btn-group {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 24px; row-gap: 20px;}
.btn-group.center {justify-content: center;}
.round-btn {word-break: keep-all; width: fit-content; flex-shrink: 0; display: flex; align-items: center; column-gap: 10px; font-size: 18px; font-weight: 600; border-radius: 25px; height: 45px; padding: 0 30px; font-size: 18px;}
.mini-btn {word-break: keep-all; width: fit-content; flex-shrink: 0; display: flex; align-items: center; column-gap: 20px; font-weight: 600; border-radius: 5px; height: 50px; padding: 0 30px; font-size: 18px;}
.gray {background-color: #9C9C9C; color: #fff;}
.black {background-color: #333333; color: #fff;}
.blue {background-color: var(--skyblue); color: #fff;}
.purple {background-color: #1B0A58; color: #fff;}
.white {background-color: #FAFAFA; color: var(--text3); border: 1px solid var(--line);}
.round-btn:hover,
.mini-btn:hover {filter: brightness(1.2); transition: filter 0.2s ease; box-shadow: 2px 4px 10px rgba(75, 75, 75, 0.3);}
.mini-btn.white:hover {filter: none; }
/* form */
.required {padding-right: 15px;}
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}
input[type="tel"],input[type="email"],input[type="number"], input[type="date"], input[type="text"], input[type="password"], textarea {width: 100%; color: var(--text2); border: 1px solid var(--line); padding: 0 16px; border-radius: 5px; outline: none; height: 50px; font-size: 18px; font-weight: 500;}
textarea {resize : none; padding: 20px 16px; width: 100%; height: 233px;}
select {border-radius: 5px; border: 1px solid var(--line); padding: 13px 9px; height: 50px; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url(../img/select-arrow.svg); padding-right: 33px; background-repeat: no-repeat; background-position: right 13px center; font-size: 18px; font-weight: 500; color: var(--text4); outline: none;}
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="text"],
input[type="password"],
textarea,
select {transition: border 0.2s;}
input[type="tel"]:not(:disabled):hover,
input[type="email"]:not(:disabled):hover,
input[type="number"]:not(:disabled):hover,
input[type="date"]:not(:disabled):hover,
input[type="text"]:not(:disabled):hover,
input[type="password"]:not(:disabled):hover,
textarea:not(:disabled):hover,
select:not(:disabled):hover,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {border: 1px solid var(--text1);}
/* 체크박스 */
.custom-chk {display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 600;}
.custom-chk input[type="checkbox"] {display: none;}
.custom-chk label {cursor: pointer; display: flex; align-items: center; gap: 10px; flex-shrink: 0;}
.custom-chk label span {flex-shrink: 0; background-image: url(../img/check_icon.svg); background-repeat: no-repeat; background-position: center center; display: inline-block; width: 20px; height: 20px; background-color: #fff; border: 1px solid var(--line); position: relative; transition: all 0.2s ease;}
.custom-chk input[type="checkbox"]:checked + label span {background-color: var(--skyblue); border: 1px solid var(--skyblue);}
/* 라디오박스 */
.radio-item {display: flex; align-items: center; column-gap: 10px;}
input[type="radio"] {appearance: none; border: 1px solid var(--line); border-radius: 50%; width: 26px; height: 26px; transition: border 0.5s ease-in-out;}
input[type="radio"] + span {font-size: 18px; font-weight: 500; color: var(--text4);}
input[type="radio"]:checked {border: 8px solid var(--skyblue);}
input[type="radio"]:checked + span {color: var(--text3);}
input[type="radio"]:hover {box-shadow: 0 0 0 4px var(--bg); cursor: pointer;}
input[type="radio"]:hover + span {cursor: pointer;}
input[type="radio"]:disabled {background-color: var(--bg); box-shadow: none; opacity: 0.7; cursor: not-allowed;}
input[type="radio"]:disabled + span {opacity: 0.7; cursor: not-allowed;}
/* 페이징 */
.sell-pagination {margin-top: 60px; display: flex; align-items: center; justify-content: center; column-gap: 10px;}
.page-btn {}
.page-list {padding: 0 10px; display: flex; align-items: center; column-gap: 20px;}
.page-link {width: 26px; height: 26px; border-radius: 10px; font-size: 16px; color: var(--text1);}
.page-link.is-active {background-color: #333; color: #fff; cursor: auto;}
.page-link:not(.is-active):hover {background-color: var(--bg); color: var(--text3);}
@media screen and (max-width: 768px) {
    /* 버튼 */
    .mini-btn,.round-btn {font-size: 16px;}
    /* form */
    input[type="tel"],input[type="email"],input[type="number"], input[type="date"], input[type="text"], input[type="password"], textarea {font-size: 16px;}
    /* 체크박스 */
    .custom-chk {font-size: 16px;}
    /* 라디오박스 */
    input[type="radio"] + span {font-size: 16px;}
}
@media screen and (max-width: 480px) {
    /* 버튼 */
    .round-btn {padding: 0 20px; font-size: 15px;}
    /* 페이징 */
    .page-btn.page-first,
    .page-btn.page-last {display: none;}
}