@charset "utf-8";
:root {
    --black: #222222;

    --gray-10: #d6d6d6;
    --gray-60: #666666;
    --gray-75: #757575;
    --gray-80: #888888;
    --gray-90: #999999;

    --primary-10: #eaf5f6;
    --primary-30: #74e7da;
    --primary: #04445f;

    --broder : 1px solid #d6d6d6;
    --error: #e00;
    --disabled: #e8e8e8;
}

/* hide */
.hide { display: none !important; } 

/* gap */
.mt0 { margin-top: 0 !important; }
.mt04 { margin-top: 4px !important; } 
.mt08 { margin-top: 8px !important; }
.mt12 { margin-top: 12px !important; }
.mt16 { margin-top: 16px !important; }
.mt24 { margin-top: 24px !important; }
.mt30 { margin-top: 30px !important; }
.mt36 { margin-top: 36px !important; }
.mt40 { margin-top: 40px !important; }
.mt48 { margin-top: 48px !important; }
.mt60 { margin-top: 60px !important; }
.mt64 { margin-top: 64px !important; }
.mt80 { margin-top: 80px !important; }
.mb0 { margin-bottom: 0 !important; }
 


/*! ─────────────────── Layout ─────────────────── */
html,body { width: 100%; height: 100%; }
#wrap, #nav, #loading .loading_wrap, .btn_main_box { width: 100%; min-width: 360px; max-width: 480px; overflow: hidden; }

#wrap { position: relative; min-height: 100%; background: #ffffff; margin: 0 auto; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); }
#container { position: relative; width: 100%; padding: 64px 0 106px; }
#nav { position: fixed; top: 0; left: 50%; transform: translateX(-50%); height: 64px; background: #ffffff; overflow: hidden; z-index: 1000; }
#nav .btn_back { position: absolute; top: 16px; left: 20px; width: 32px; height: 32px; background: url(../image/btn/btn_back.svg) no-repeat center center; background-size: contain; text-indent: -9999px; display: inline-block; } 
#hd { position: relative; width: 100%; padding: 10px 20px; }
#hd > #logo a { width: 100px; height: 20px; background: url(../image/logo.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; display: inline-block; }
#hd > p { font-size: 12px; font-weight: 400; color: var(--black); line-height: 15px; margin-top: 6px; }

.cont_box { width: 100%; padding: 40px 20px; }
.main_title { font-size: 32px; font-weight: 600; line-height: 42px; letter-spacing: -1px; word-break: keep-all; }
.main_title.center { text-align: center; }
.sub_title { font-size: 16px; font-weight: 400; color: var(--gray-75); line-height: 20px; word-break: keep-all; }
.sub_text { font-size: 18px; font-weight: 400; color: var(--gray-60); line-height: 22px; word-break: keep-all; margin-top: 16px; } 



/*! ─────────────────── Btn ─────────────────── */
.btn { position: relative; text-align: center; border-radius: 8px; pointer-events: all; }
.btn_basic { color: var(--black); background: #ffffff; border: 1px solid #D6D6D6; }
.btn_primary { color: #ffffff; background: var(--primary); border: 1px solid var(--primary); }
.btn_help { font-size: 16px; font-weight: 400; color: var(--gray-60); line-height: 24px; text-decoration: underline; background: #ffffff; display: inline-block; margin-top: 16px; }
.btn_help::before { width: 24px; height: 24px; background: url(../image/icon/icon_help.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -7px; margin-right: 4px; }
/*? disabled */
.btn.disabled { color: var(--gray-80); background: var(--disabled); border: 1px solid var(--disabled); cursor: auto; pointer-events: none; }
/* btn_main_box */
.btn_main_box { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); text-align: center; padding: 24px 20px; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%); z-index: 1000; } 
.btn_main_box .text { width: 100%; font-size: 14px; font-weight: 500; color: var(--gray-80); line-height: 18px; text-align: center; }
.btn_main_box .btn { width: 100%; font-size: 18px; font-weight: 600; line-height: 22px; padding: 16px; display: inline-block; }
.btn_main_box .tooltip {color: #fff; font-size: 13px; line-height: 130%; letter-spacing: -0.13px; padding: 8px; border-radius: 4px; background-color: #222222; width: fit-content; position: absolute; left: 50%; transform: translateX(-50%); top: 0; animation-name: toopTipMove; animation-duration: 1s; animation-iteration-count: infinite}
.btn_main_box .tooltip::before {content: ""; width: 10px; height: 8px; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); background-image: url(../image/icon/icon_polygon_black.svg); background-size: contain;}
@keyframes toopTipMove {
  50% {
      top: 6px;
  }
}


/*! ─────────────────── Form ─────────────────── */
/* form_group_box */
.form_group_box { width: 100%; }
.form_group_box ul > li { width: 100%; margin-bottom: 12px; }
.form_group_box ul > li:last-of-type { margin-bottom: 0; }
.form_group_box .input_box { position: relative; }
.form_group_box .form_label { font-size: 18px; font-weight: 600; color: var(--black); line-height: 22px; margin-bottom: 16px; } 
.form_group_box .form_label p { font-size: 14px; font-weight: 500; color: var(--gray-60); line-height: 16px; display: block; margin-top: 4px; }
.form_select { display: block; width: 100%; height: 56px; font-size: 18px; font-weight: 400; color: black; line-height: 22px; font-family: 'Pretendard'; padding: 16px 56px 16px 16px; background: url(../image/icon/icon_arrow_down.svg) no-repeat calc(100% - 16px) center, #ffffff; border: 1px solid var(--gray-10); border-radius: 8px; cursor: pointer; }
.form_group_box .form_input { display: block; width: 100%; height: 56px; font-size: 18px; font-weight: 400; color: var(--black); line-height: 22px; padding: 16px 56px 16px 16px; background: #ffffff; border: 1px solid var(--gray-10); border-radius: 8px; } 
.form_group_box .form_input:read-only { pointer-events: none; }
.form_group_box .form_input::placeholder { color: var(--gray-10); } 
.form_group_box .form_input.focus,
.form_group_box .form_input:focus,
.form_group_box .form_input:focus-visible,
.form_group_box .form_select:focus { border: 2px solid var(--primary); }
.form_group_box .form_input.error,
.form_group_box .select_box.error,
.form_group_box .form_select.error { border: 2px solid var(--error); }
.form_group_box .form_group .form_label {font-size: 14px; line-height: 120%; margin-bottom: 4px;}
/*? type_birth */
.form_group_box .type_birth { display: flex; flex-wrap: wrap; align-items: center; }
.form_group_box .type_birth .form_input.birth01 { width: 47%; padding: 16px; }
.form_group_box .type_birth .form_input.birth02 { flex: 1; padding: 16px; }
.form_group_box .type_birth .form_dash { display: inline-block; width: 6%; text-align: center; }
.form_group_box .type_birth .form_dot { width: calc(47% - 56px); letter-spacing: 1px; padding-left: 6px; }
/*? .btn_clear */
.form_group_box .form_input + .btn_clear { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; background: url(../image/btn/btn_clear.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; z-index: 1; display: none; }
.form_group_box .form_input + .btn_clear.on { display: block; }

/*? .timer */
.auth_timer_box { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 4px; }
.auth_timer_box .btn_send { font-size: 14px; font-weight: 500; color: var(--gray-80); line-height: 16px; background: transparent; border-bottom: 1px solid var(--gray-80); display: inline-block; }
.auth_timer_box .timer_box { font-size: 14px; font-weight: 400; color: var(--error); line-height: 16px; }

/* error_message */
.error_message { display: block; width: 100%; height: 0; font-size: 13px; font-weight: 400; color: var(--error); line-height: 24px; overflow: hidden; transition: all 0.4s ease-in-out; } 
.error ~ .error_message { height: 24px; } 

/* check_box */
.check_box { position: relative; }
.check_box input[type=checkbox] + label { cursor: pointer; }
.check_box input[type=checkbox] + label .icon_chkbox { width: 24px; height: 24px; background: url(../image/icon/icon_chkbox.svg) no-repeat center center; background-size: contain; display: inline-block; }
.check_box input[type=checkbox]:checked + label .icon_chkbox { background: url(../image/icon/icon_chkbox_on.svg) no-repeat center center; background-size: contain; }

/* radio_group_box */
.radio_group_box { display: flex; flex-wrap: wrap; }
.radio_group_box.type01 > div { margin-right: 8px; margin-bottom: 8px; }
.radio_group_box.type02,
.radio_group_box.type03 { justify-content: space-between; }
.radio_group_box.type02 > div { width: calc(50% - 6px); }
.radio_group_box.type02 > div:not(.error_message):nth-of-type(n+3) { margin-top: 12px; }
.radio_group_box.type03 > div { width: calc(33.33% - 6px); }
.radio_group_box.type03 > div:not(.error_message):nth-of-type(n+4) { margin-top: 12px; }
.radio_group_box .radio_box input + label { height: 56px; font-size: 18px; font-weight: 600; color: var(--black); line-height: 53px; text-align: center; padding: 0 16px; background: #ffffff; border: 1px solid var(--gray-10); border-radius: 8px; display: block; cursor: pointer; }
.radio_group_box .radio_box input:checked + label { background: var(--primary-10); border: 2px solid var(--primary); }

/* select_box */
.select_box { display: block; width: 100%; height: 56px; font-size: 18px; font-weight: 400; color: var(--gray-10); line-height: 22px; padding: 16px 56px 16px 16px; background: url(../image/icon/icon_arrow_down.svg) no-repeat calc(100% - 16px) center, #ffffff; border: 1px solid var(--gray-10); border-radius: 8px; cursor: pointer; }
.select_box.valid { color: var(--black); }


/*! ─────────────────── Components - POPUP ─────────────────── */
#popup,
#alert-popup { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 2000; }
.popup_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); }
.popup_wrap { position: fixed; left: 50%; transform: translateX(-50%); overflow: hidden; background: #ffffff; z-index: 3000; overflow: hidden; }
.popup_wrap .text_box { width: 100%; text-align: center; }
.popup_wrap .text_box .icon_warning { width: 40px; height: 40px; background: url(../image/icon/icon_warning.svg) no-repeat center center; background-size: cover; display: inline-block; margin-bottom: 12px; }
.popup_wrap .text_box .icon_caution { width: 40px; height: 40px; background: url(../image/icon/icon_caution.svg) no-repeat center center; background-size: cover; display: inline-block; margin-bottom: 12px; }
.popup_wrap .text_box h2 { font-size: 24px; font-weight: 600; color: var(--black); line-height: 36px; letter-spacing: -1px; margin-bottom: 8px; }
.popup_wrap .text_box p { font-size: 18px; font-weight: 400; color: var(--gray-60); line-height: 24px; letter-spacing: -0.5px; }
.popup_wrap .btn_popup_box { margin-top: 24px; } 
.popup_wrap .btn_popup_box .btn { width: 100%; font-size: 18px; font-weight: 600; line-height: 22px; padding: 10px 16px; display: block; }
.popup_wrap .btn_popup_box .btn + .btn { margin-top: 12px; }
/*? type */
.popup_wrap.type_full { top: 0; height: 100vh; width: 100%; min-width: 360px; max-width: 480px; padding: 64px 20px; }
.popup_wrap.type_full::after { position: absolute; bottom: 0; content: ''; display: block; width: 100%; height: 70px; background: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); z-index: 5; }
.popup_wrap.type_center { top: 50%; transform: translateX(-50%) translateY(-50%); width: calc(100% - 40px); min-width: 360px; max-width: 440px; padding: 16px; border-radius: 12px; }
.popup_wrap.type_toast { bottom: -100%; height: fit-content; width: 100%; min-width: 360px; max-width: 480px; padding: 32px 20px; border-radius: 12px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: bottom 0.5s; }
#popup.on .popup_wrap.type_toast { bottom: 0; }



/*! ─────────────────── Components -  Loding ─────────────────── */
@keyframes loadingBar{
    0% { left: -50px; }
    100% {left: calc(100% + 50px);  }
}
#loading { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); overflow: hidden; z-index: 2000; }
#loading .loading_wrap { position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%); padding: 0 40px; z-index: 3000; }
#loading .loading_wrap p { font-size: 32px; font-weight: 600; color: #ffffff; line-height: 42px; text-align: center; }
#loading .bar_wrap { position: relative; width: 100%; height: 10px; background: #ffffff; border-radius: 5px; margin-top: 16px; overflow: hidden; }
#loading .bar_wrap .bar { position: absolute; left: -50px; top: 0; width: 50px; height: 100%; background: var(--primary); border-radius: 5px; animation: loadingBar 2s linear infinite; }