@charset "utf-8";
@import url(_reset.css);
@import url(_variables.css);
@import url(_button.css);


/* screen reader only*/
.sr-only {overflow: hidden;position: absolute;border: 0;width: 1px;height: 1px;clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);}
.blind {overflow: hidden;position: absolute;border: 0;width: 1px;height: 1px;clip: rect(1px, 1px, 1px, 1px);clip-path: inset(50%);}
.hidden {visibility: hidden;opacity: 0;}
.skip {position:fixed;top:0;left:0;width:0;height:0;font-size:0;overflow:hidden}

/* 줄바꿈 */
.block {display:block;}
@media screen and (max-width:768px) {
	.block {display:inline;}
}

/* display */
.dis_block{display:block!important}
.dis_flex{display:flex!important}
.dis_inblock{display:inline-block!important}
.dis_inflex{display:inline-flex!important}

/* align */
.flex-col{flex-direction:column!important}
.flex-row{flex-direction:row!important}
.fx_wrap_w{flex-wrap:wrap!important;}
.fx_wrap_nw{flex-wrap:nowrap!important;}
.fx_align_c{align-items:center!important}
.fx_align_l{align-items:flex-start!important}
.fx_align_r{align-items:flex-end!important}
.fx_valign_c{justify-content:center!important}
.fx_valign_l{justify-content:flex-start!important}
.fx_valign_r{justify-content:flex-end!important}
.fx_valign_bw{justify-content:space-between!important}

/* gap */
.gap0{gap:0!important}
.gap10{gap:10px!important}
.gap20{gap:20px!important}
.gap30{gap:30px!important}
.gap40{gap:40px!important}
.gap50{gap:50px!important}
.gap60{gap:60px!important}
.gap70{gap:70px!important}
.gap80{gap:80px!important}
.gap90{gap:90px!important}

/* heading title */
h1 {position:relative;margin:35px 0 10px;font-family:var(--f_eli);font-size:26px;line-height:1;font-weight:900;color:var(--gray_100)}
h2 {position:relative;margin:80px 0 20px;font-family:var(--f_nsN);font-size:24px;line-height:1;font-weight:900;color:var(--gray_100)}
h2:first-child {margin:0}
h3,.h3 {margin:40px 0 10px;font-family:var(--f_eli);font-size:18px;font-weight:800;line-height:1;color:var(--blue_100)}
h4,.h4 {margin:10px 0 10px;font-family:var(--f_eli);font-size:18px;line-height:100%;font-weight:700;color:var(--gray_90)}
h5,.h5 {margin:10px 0 5px;font-size:15px;line-height:1;color:var(--gray_90);font-weight:800}
h6,.h6 {margin:10px 0 5px;font-size:15px;line-height:1;color:var(--blue_110)}
h2+h2 {margin-top:0}
h3+h3 {margin-top:0}
h2+h3 {margin-top:0}
h3+h4 {margin-top:0}
h4+h5 {margin-top:0}
h5+h6 {margin-top:0}
.subtitle1,
.subtitle2,
.subtitle3 {position:relative;display:block;line-height:1;font-weight:800;letter-spacing:-0.16px;color:var(--gray_90);}
.subtitle1 {font-size:32px;}
.subtitle2 {font-size:24px;}
.subtitle3 {font-size:16px;}

@media screen and (max-width:640px) {
	h2{line-height:1.4}
	.subtitle1 {font-size:24px;}
	.subtitle2 {font-size:18px;}
	.subtitle3 {font-size:15px;}
	.subtitle1,
	.subtitle2,
	.subtitle3{line-height:1.4}
}

small {font-size:0.875rem;font-weight:300;color:var(--gray_60);line-height:1;}

/* checkbox */
input[type="checkbox"]{position:absolute;opacity:0;cursor:pointer;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;}
input[type="checkbox"] + label{position:relative;display:inline-block;line-height:1;margin-right:0;padding-left:18px;font-weight:500;color:var(--gray_80);cursor:pointer;}
input[type="checkbox"] + label:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;width:14px;height:14px;background-image:url('../images/common/checkbox.svg');background-repeat:no-repeat;background-position:50%;background-size: contain;}
input[type="checkbox"]:checked + label {color:var(--blue_100);font-weight:700;}
input[type="checkbox"]:checked + label:before{background-image:url('../images/common/checked.svg');}
input[type="checkbox"]:disabled + label:before{background-image:url('../images/common/check_disable.svg');}
input[type="checkbox"]:checked:disabled + label:before{background-image:url('../images/common/checked_disable.svg');}
input[type="checkbox"]:disabled + label {pointer-events:none;}

/* radio */
input[type="radio"]{position:absolute;opacity:0;cursor:pointer;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;}
input[type="radio"] + label{position:relative;display:inline-block;line-height:1;margin-right:0;padding-left:18px;font-weight:500;color:var(--gray_80);cursor:pointer;}
input[type="radio"] + label:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;width:14px;height:14px;background-image:url('../images/common/radio.svg');background-repeat:no-repeat;background-position:50%;background-size: contain;}
input[type="radio"]:checked + label {color:var(--blue_100);font-weight:700;}
input[type="radio"]:checked + label:before{background-image:url('../images/common/radiochek.svg');}
input[type="radio"]:disabled + label:before{background-image:url('../images/common/radio_disable.svg');}
input[type="radio"]:checked:disabled + label:before{background-image:url('../images/common/radiochek_disable.svg');}
input[type="radio"]:disabled + label {pointer-events:none;}

/* input */
input[type="tel"],
input[type="text"],
input[type="password"] {padding:.813rem 1rem;margin:0;border:1px solid var(--gray_50);border-radius:0.5rem;font-size:1rem;font-weight:500;line-height:1.5;color:var(--gray_90);font-family:var(--f_nsN);}
input[readonly],
input[type="tel"]:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled {border:1px solid var(--gray_50);background:var(--gray_20);user-select:none;}

input[disabled] + label {cursor:auto;user-select:none;}

::placeholder {font-size:1rem;font-weight:300;color:var(--gray_60)}

/* select */
select {-moz-appearance:none;-webkit-appearance:none;appearance:none;cursor:pointer;}
select::-ms-expand {display:none;}
select:hover, select:focus, select:active {outline:none;}
select, .select {min-width:6rem;min-height:3.25rem;padding:.813rem 1.25rem;margin:0;border:1px solid var(--gray_70);border-radius:.5rem;color:var(--gray_100);font-size:1rem;font-weight:600;font-family:var(--f_nsN);background:url('../images/common/ico_arr_bk.svg') calc(100% - 12px) center no-repeat;}
select:hover, .select:hover {border-color:#888;}
select:focus, .select:focus {border-color:#aaa;box-shadow:0 0 1px 3px rgba(59, 153, 252, .7);box-shadow:0 0 0 3px -moz-mac-focusring;outline:none;}
select:disabled, .select:disabled, .select.disabled{opacity:0.5;pointer-events:none;}

/* 스크롤 디자인 커스텀 */
*::-webkit-scrollbar {width:8px;}   
*::-webkit-scrollbar-thumb {border-radius:8px;background:var(--gray_60);}

/* 모달팝업 레이아웃 */
body.open:has(.modal) {overflow:hidden;}
.modal {z-index:101;position:fixed;bottom:0;left:0;right:0;top:0;display:none;align-items:center;flex-direction:column;justify-content:center;overflow:hidden;height:100vh;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;}
.modal.is-active {display:flex;display:-webkit-box;display:-ms-flexbox;}
.modal .modal-background {position:absolute;bottom:0;left:0;right:0;top:0;background-color: rgb(10 10 10 / 30%);}
.modal .modal-background.is-click-disabled {pointer-events:none;}
.modal .modal-content {position:relative;width:100%;margin:0 auto;}
.modal-close {z-index:99;position:absolute;top:0;right:0;-webkit-transition:all .2s;transition:all .2s;}
.modal-close::after,
.modal-close::before {content:'';position:absolute;left:50%;top:50%;display:block;transform:translateX(-50%) translateY(-50%) rotate(45deg);transform-origin:center center;background-color:var(--gray_100);-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;}
.modal-close::before {height:2px;width:80%;}
.modal-close::after {height:80%;width:2px;}
.modal-popup {}
.modal-popup .modal-content {width:30vw;max-height:86vh;padding:2rem 3rem 2.4rem;border-radius: 1rem;box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.15);background:#fff;overflow-y:scroll;}
.modal-popup .modal-content.is-medium {width:50vw;}
.modal-popup .modal-content.is-full {width:70vw;}
.modal-popup .modal-close {right:20px;top:20px;width:2rem;height:2rem;font-size:0;}
.modal-popup .popup-wrap {display:flex;flex-direction:column;gap:16px;}
.popup-wrap .con-head {}
.popup-wrap .con-head h3 {font-size:1.6rem;color: var(--blue_120);margin-top: 1.4rem;}
.popup-wrap .con-head p {color:var(--gray_60);}
.popup-wrap .con-wrap {display:flex;}
.popup-wrap .btn_wrap {display:flex;gap:10px;justify-content:center;}