@charset "utf-8";

:root {
    --col-theme: #FFD600;
    --col-theme-h: #cd0341;
    --col-brown: #A35812;
    --col-black: #231815;
    --col-gray: #707070;
    --col-gold: #E6B11B;
    --col-red: #D90000;
    --col-blue: #3076FF;
    --col-gold-h: #f7b805;
    --col-bd-gray: #858B90;
    --trans-25: all .25s ease-in-out;
    --hd-height: 11rem;
    --hd-height-m: 7rem;
}

html {font-size: 62.5%;}
body {color: var(--col-black); font-family: "Noto Sans KR", sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em;}

/* 스크롤바 */
body::-webkit-scrollbar {width: 8px;}
body::-webkit-scrollbar-track {background-color: #FFF;}
body::-webkit-scrollbar-thumb {background-color: var(--col-brown); border-radius: 50px;}

/* font-family */
.ff-notosans {font-family: "Noto Sans KR", sans-serif !important;}

/*============================================================*/
/* sentence */
/*============================================================*/
.col-theme {color: var(--col-theme) !important;}
.col-brown {color: var(--col-brown) !important;}
.col-blue {color: var(--col-blue) !important;}

.required {position: relative; display: inline-block; 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-red); font-weight: 700; text-indent: 0;}

.exclaim {position: relative; display: flex; align-items: flex-start; gap: 3.3rem; background: #f5f5f5; padding: 3rem 4rem; border-radius: 0; color: var(--col-gray); line-height: 1.5;}
.exclaim svg {flex: 0 0 auto; width: 4.5rem; height: auto; aspect-ratio: 1;}
.exclaim .svg-fill {fill: var(--col-brown);}
.exclaim p + p {margin-top: .4rem;}
@media (max-width: 768px) {
    .exclaim {flex-direction: column; gap: 1rem; padding: 2rem;}
    .exclaim svg {width: 2.5rem;}
}

.dot-top {position: relative; vertical-align: baseline; color: var(--col-theme); line-height: 2;}
.dot-top::before {content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 30%; aspect-ratio: 1; background: var(--col-theme); border-radius: 50%;}


.caution {margin: 0; text-align: left; color: var(--col-red); font-size: 14px; font-weight: 500;}
.caution svg {width: 1.8rem; aspect-ratio: 1; vertical-align: text-bottom; line-height: 1.75;}


.bang-box {padding: 2rem 1rem 2rem 3.5rem; border-top: 1px solid var(--col-bd-gray); border-bottom: 1px solid var(--col-bd-gray); background: url(/img/alert_danger.png) 1rem 2.1rem / 2rem no-repeat;}

/*============================================================*/
/* list */
/*============================================================*/
.dot-list > li {position: relative; padding-left: 10px; font-size: 1.5rem; word-break: break-all;}
.dot-list > li::before {content: ""; position: absolute; top: .9rem; left: 0; width: 4px; height: 4px; background: var(--col-black); border-radius: 50%;}
.dot-list > li + li {margin-top: 7px;}

/*============================================================*/
/* title */
/*============================================================*/
h2 {text-align: center; color: var(--col-theme); font-size: 3rem; font-weight: 500; letter-spacing: 0;}
h3 {margin-bottom: 4rem; text-align: center; color: var(--col-black); font-size: 3.8rem; font-weight: 500; line-height: 100%;}
h4 {margin-bottom: 2rem; color: var(--col-black); font-size: 1.8rem; font-weight: 700; letter-spacing: 0;}

@media (max-width: 576px) {
    h2 {font-size: 2.5rem;}
    h3 {font-size: 2rem;}
}

/*============================================================*/
/* button */
/*============================================================*/
.btn-area {margin-top: 8rem; text-align: center;}

.btn-auto {display: inline-flex; justify-content: center; align-items: center; min-width: 4.6rem; margin: 0 .25rem; padding: 0.25rem 0.5rem; border-radius: 0; font-size: 14px; font-weight: 400; letter-spacing: 0; transition: var(--trans-25);}
.btn-sm {display: inline-flex; justify-content: center; align-items: center; gap: 5px; min-width: 13rem; height: 5rem; padding: 0 1.25rem; border-radius: 0; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; transition: var(--trans-25);}
.btn-md {position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 1rem; width: 100%; max-width: 31rem; height: 5rem; border-radius: 0; font-weight: 700; letter-spacing: 0;}
.btn-md svg {width: 1rem; margin-top: .3rem; transition: var(--trans-25);}
.btn-md:before{content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 120%; border-radius: 15rem; background: rgba(255,255,255,0.05); transform: translate(-50%,-50%); transition: 0.65s cubic-bezier(.785,.135,.15,.86);}

.btn-wt {background: #fff; color: var(--col-theme);}
.btn-theme {background: var(--col-theme); color: #fff;}
.btn-brown {position: relative; background: var(--col-brown); color: #fff; z-index: 1}
.btn-gray {background: var(--col-gray); color: #fff;}
.btn-blue {background: var(--col-blue); color: #fff;}

.btn-bd-wt {position: relative; border: 1px solid #fff; color: #fff; overflow: hidden; z-index: 1;}
.btn-bd-wt::before {content: ""; position: absolute; top: 0; display: block; width: 100%; height: 0; background: #fff; transition: var(--trans-25); z-index: -1;}
.btn-bd-theme {border: 1px solid var(--col-theme); color: var(--col-theme);}
.btn-bd-black {border: 1px solid var(--col-black); color: var(--col-black);}
.btn-bd-gray {border: 1px solid var(--col-gray);}
.btn-bd-brown {border: 1px solid var(--col-brown); color: var(--col-brown); font-weight: 600;}
@media (hover: hover) and (pointer: fine) {
    .btn-md:hover:before {width: calc(100% - 12px) !important; transform: translate(-50%,-50%) scaleX(1.2) scaleY(1.6) !important;}
    .btn-bd-black:hover {border-color: var(--col-brown); color: var(--col-brown);}
}
@media (max-width: 992px) {
    .btn-sm {height: 4.5rem;}
    .btn-md {height: 4.5rem;}
}
@media (max-width: 576px) {
    .btn-auto {padding: 1rem 0.5rem;}
}

/*============================================================*/
/* clause */
/*============================================================*/
.clause-wrap {height: 23rem; padding: 2rem; background: #fff; border: 1px solid var(--col-bd-gray); text-align: left; overflow: hidden auto;}
.clause-wrap::-webkit-scrollbar {width: 6px;}
.clause-wrap::-webkit-scrollbar-track {background-color: #FFF;}
.clause-wrap::-webkit-scrollbar-thumb {background-color: var(--col-gray); border-radius: 50px;}

.clause-wrap .clause {color: var(--col-gray); line-height: 1.75; font-size: 14px;}
.clause-wrap .clause h4 {margin-top: 20px; margin-bottom: 15px; text-align: left; color: var(--col-black); font-size: 16px;}
.clause-wrap .clause h4:first-of-type {margin-top: 0;}
.clause-wrap .clause h5 {margin-top: 10px; margin-bottom: 10px; color: var(--col-black); font-size: 15px;}
.clause-wrap .clause p {margin-bottom: 10px;}
.clause-wrap .clause ol, .clause-wrap .clause ul {padding-left: 25px;}
.clause-wrap .clause ol > li {list-style: decimal;}
.clause-wrap .clause ol ul > li {list-style: hangul;}


/*============================================================*/
/* accordion */
/*============================================================*/
button.accordion {position: relative; width: 100%; text-align: left; padding: 1.1rem 2rem; border: 1px solid var(--col-bd-gray); color: var(--col-black); transition: background-color 0.2s linear;}
button.accordion: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;}
button.accordion.is-open:after {transform: rotate(180deg);}
button.accordion:hover,
button.accordion.is-open {border-color: var(--col-brown); color: var(--col-brown); font-weight: 500;}
.accordion-content {max-height: 0; background-color: #fff; overflow: hidden; transition: all 0.2s ease-in-out;}


/*============================================================*/
/* pop up */
/*============================================================*/
.popup-container {position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0,0,0,0.6); z-index: 50;}
.popup-wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
.popup {position: relative; width: 380px; /*padding-top: 28.25%;*/ aspect-ratio: 380/540; background: #fff; overflow: hidden;}
.popup .img img {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%;}

.popup-container .btm {display: flex; justify-content: space-between; align-items: center; width: 380px; padding: 6px 10px; background: #333; color: #fff; font-size: 13px;}

.popup-container [type="checkbox"]:checked + label,
.popup-container [type="checkbox"]:not(:checked) + label {padding-left: 26px;}
.popup-container [type="checkbox"]:checked + label:before,
.popup-container [type="checkbox"]:not(:checked) + label:before,
.popup-container [type="checkbox"]:checked + label:after,
.popup-container [type="checkbox"]:not(:checked) + label:after {width: 21px; height: 21px;}

@media (max-width: 576px) {
    .popup,
    .popup-container .btm {width: 90%;}
}