@charset "utf-8";
:root {
    --gray-25: #f7f7f8;
    --gray-50: #f9fafb;
    --gray-100: #f2f4f7;
    --gray-200: #eaecf0;
    --gray-300: #d0d5dd;
    --gray-400: #98A2B3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-900: #101828;

    --primary-light: rgba(0, 171, 145, 0.10);
    --primary: #00ab91;
    --primary-deep: #009a83;
    --green: #18c69c;
    --error-light: #ffe9ea;
    --error: #fb5058;
    --success-light: #e1f5ff;
    --success: #3f8cff;
    --success-deep: #1077ab;

    --shadow-01: 0px 2px 6px 0px rgba(16, 24, 40, 0.09);
}

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

/* gap */
.mt0 { margin-top: 0 !important; }
.mt02 { margin-top: 2px !important; }
.mt04 { margin-top: 4px !important; }
.mt08 { margin-top: 8px !important; }
.mt10 { margin-top: 10px !important; }
.mt12 { margin-top: 12px !important; }
.mt16 { margin-top: 16px !important; }
.mt20 { margin-top: 20px !important; }
.mt24 { margin-top: 24px !important; }
.mt32 { margin-top: 32px !important; }
.mt36 { margin-top: 36px !important; }
.mt40 { margin-top: 40px !important; }
.mt48 { margin-top: 48px !important; }
.mt56 { margin-top: 56px !important; }
.mt120 { margin-top: 120px !important; }
.mb0 { margin-bottom: 0 !important; }
.mb08 { margin-bottom: 8px !important; }
.pt0 { padding-top: 0px !important; }
.pt08 { padding-top: 8px !important; }
.pt24 { padding-top: 24px !important; }

/* Typography */
.fs01 { font-size: 20px !important; line-height: 26px !important; }
.fs02 { font-size: 18px !important; line-height: 24px !important; }
.fs03 { font-size: 16px !important; line-height: 22px !important; }
.fs04 { font-size: 14px !important; line-height: 20px !important; }
.fs05 { font-size: 12px !important; line-height: 18px !important; }
.fw400 { font-weight: 400 !important; }
.fw500 { font-weight: 500 !important; }
.fw600 { font-weight: 600 !important; }
.fw700 { font-weight: 700 !important; }
.text_center { text-align: center; }
.fc_point { color: var(--primary) !important; }
.fc_red { color: var(--error) !important; }
.fc_gray400 { color: var(--gray-400) !important; }
.fc_gray500 { color: var(--gray-500) !important; }
.fc_gray600 { color: var(--gray-600) !important; }
.fc_white { color: #ffffff !important; }
/* .fc_primary { color: var(--primary) !important; } */


/*! ─────────────────── Layout ─────────────────── */
html,body { width: 100%; height: 100%; background: var(--gray-25); } 
#wrap { position: relative; display: flex; align-items: stretch; justify-content: center; width: 100%; min-width: 360px; min-height: 100%; }
#container { position: relative; width: 100%; max-width: 480px; min-width: 360px; min-height: 100%; background: #ffffff; box-shadow: 0px 2px 15px rgba(16, 24, 40, 0.05); }
#container section { position: relative; height: auto; min-height: calc(100vh - 215px); }

#hd { position: sticky; top: 0; left: 0; width: 100%; height: 60px; max-width: 480px; background: #ffffff; overflow: hidden; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.05); z-index: 1000; } 
#hd.type_border { box-shadow: none; border-bottom: 1px solid var(--gray-200); } 
#hd .hd_wrap { position: relative; width: 100%; height: 100%; padding: 18px 24px; } 
#hd .hd_wrap .logo { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 130px; height: 37px; z-index: 1; }
#hd .hd_wrap .logo a { width: 100%; height: 100%; background: url(../image/logo.png) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; display: block; }
#hd .hd_wrap .page_title { font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; } 
#hd .hd_wrap .page_title.left { text-align: left; }
#hd .hd_wrap .page_logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #ffffff; display: inline-block; }
#hd .hd_wrap .page_logo a img { max-height: 40px; max-width: 140px; }
#hd .hd_wrap > a { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; text-indent: -9999px; display: inline-block; } 
#hd .hd_wrap .btn_back { left: 24px; background: url(../image/btn/btn_back.svg) no-repeat center center; } 
#hd .hd_wrap .btn_exit { right: 24px; background: url(../image/btn/btn_close.svg) no-repeat center center; } 
#hd .hd_wrap .btn_text { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 400; color: var(--gray-600); line-height: 20px; background: transparent; }

#sub_nav { position: relative; display: flex; width: 100%; background: #ffffff; border-bottom: 1px solid var(--gray-200); }
#sub_nav a { position: relative; display: block; flex-grow: 1; font-size: 14px; font-weight: 500; color: var(--gray-400); line-height: 54px; text-align: center; }
#sub_nav a.on { color: var(--primary); }
#sub_nav a.on::after { position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background: var(--primary); content: ''; display: block; z-index: 5; }

#gnb { position: fixed; bottom: 0; width: 100%; max-width: 480px; min-width: 360px; background: #ffffff; box-shadow: 0px -3px 5px 0px rgba(16, 24, 40, 0.05); z-index: 1000; }
#gnb ul { display: flex; }
#gnb ul li { width: 20%; }
#gnb ul li a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 68px; font-size: 12px; font-weight: 400; line-height: 16px; }
#gnb ul li a::before { width: 24px; height: 24px; content: ''; display: block; margin: 0 auto 4px; }
#gnb ul li a.home::before { background: url(../image/icon/icon_home.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.analyze::before { background: url(../image/icon/icon_chart.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.documents::before { background: url(../image/icon/icon_file.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.claim::before { background: url(../image/icon/icon_hospital.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.mypage::before { background: url(../image/icon/icon_mypage.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.on { color: var(--primary); }
#gnb ul li a.on::after { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--primary); content: ''; display: block; z-index: 1; }
#gnb ul li a.home.on::before { background: url(../image/icon/icon_home_on.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.analyze.on::before { background: url(../image/icon/icon_chart_on.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.documents.on::before { background: url(../image/icon/icon_file_on.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.claim.on::before { background: url(../image/icon/icon_hospital_on.svg) no-repeat center center; background-size: contain; }
#gnb ul li a.mypage.on::before { background: url(../image/icon/icon_mypage_on.svg) no-repeat center center; background-size: contain; }

#footer { width: 100%; padding: 24px 20px; background: var(--gray-100); overflow: hidden; }
#footer ul { width: 100%; max-width: 310px; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
#footer ul li { font-size: 11px; font-weight: 400; color: var(--gray-400); line-height: 16px; }
#footer ul li:nth-of-type(1):after,
#footer ul li:nth-of-type(2):after,
#footer ul li:nth-of-type(4):after { width: 1px; height: 9px; background: var(--gray-300); content: ''; display: inline-block; vertical-align: -1px; margin: 0 8px; }
#footer .copyright { font-size: 11px; font-weight: 400; color: var(--gray-400); text-align: center; margin-top: 8px; }

.title_link { position: relative; display: block; padding-right: 36px; }
.title_link::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: url(../image/icon/icon_arrow_right.svg) no-repeat center center; background-size: contain; content: ''; display: block; }
.main_title { font-size: 24px; font-weight: 500; line-height: 130%; word-break: keep-all; } 
.main_title b { font-weight: 500; color: var(--primary); }
.sub_title { font-size: 20px; font-weight: 500; line-height: 26px; word-break: keep-all; } 
.sub_text { font-size: 16px; font-weight: 400; color: var(--gray-600); line-height: 22px; word-break: keep-all; margin-top: 8px; } 
.sub_title b,
.sub_text b { font-weight: 500; color: var(--primary); }
.detail_text { position: relative; font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; word-break: keep-all; }
.detail_text b { font-weight: 400; color: var(--primary); }
.detail_text.type_warning { position: relative; padding-left: 22px; }
.detail_text.type_warning::before { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; background: url(../image/icon/icon_warning.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; opacity: 0.6; }

.bd_top { border-top: 8px solid var(--gray-50); } 
.bg_gray .bd_top { border-top: 8px solid var(--gray-100); }

.bg_gray { background: var(--gray-50) !important; }
.bg_gradient { background: rgb(249,250,251); background: linear-gradient(180deg, rgba(249,250,251,1) 0%, rgba(249,250,251,1) 80%, rgba(255,255,255,1) 100%); overflow: hidden; }
.bg_gradient .bd_top,
.bg_gray .bd_top { border-color: var(--gray-100); }
.bg_gray .main_btn_box { background: var(--gray-50); }

/* cont_box */
.cont_box { padding: 24px 20px; overflow: hidden; } 
.cont_box.type_top { padding-top: 40px; }
.cont_line { padding-top: 16px; border-top: 1px solid var(--gray-200); margin-top: 16px; }

/* 동의 */
.agree_chk_box { display: block; }
.agree_chk_box label { position: relative; font-size: 16px; line-height: 22px; display: inline-block; padding-left: 26px; }
.agree_chk_box label b { font-size: 14px; font-weight: 400; color: var(--primary); display: inline-block; margin-left: 4px; }
.agree_chk_box label .icon_chkbox { position: absolute; left: 0; top: 1px; z-index: 5; }
.agree_chk_box + .agree_chk_box { margin-top: 16px; }

/* switch */
.switch_box { display: block; overflow: hidden; }
.switch_box input[type="checkbox"] + label { position: relative; width: 36px; height: 20px; display: block; background: var(--gray-100); border-radius: 10px; cursor: pointer; transition: all 0.2s ease-in-out; }
.switch_box input[type="checkbox"] + label span { position: absolute; left: 2px; top: 2px; display: inline-block; width: 16px; height: 16px; background: #ffffff; border-radius: 50%; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.1); transition: all 0.2s ease-in-out; }
.switch_box input[type="checkbox"]:checked + label { background: var(--primary); }
.switch_box input[type="checkbox"]:checked + label span { left: calc(100% - 18px); }

/* bedge */
.bedge { display: inline-block; height: 26px; font-size: 14px; font-weight: 600; line-height: 15px; padding: 5px 8px; border-radius: 15px; }
.bedge.blue { color: var(--success-deep); background: var(--success-light); }
.bedge.green { color: var(--primary); background: var(--primary-light); }
.bedge.red { color: var(--error); background: var(--error-light); }
.bedge.gray { color: var(--gray-500); background: var(--gray-200); }


/*! ─────────────────── Btn ─────────────────── */
.btn { position: relative; text-align: center; border-radius: 8px; }
.btn_main { color: #ffffff; background: var(--primary); border: 1px solid var(--primary); }
.btn_confirm { color: #ffffff; background: var(--primary); border: 1px solid var(--primary); }
.btn_basic { color: var(--primary); background: #ffffff; border: 1px solid var(--primary); }
.btn_arrow::after { width: 18px; height: 18px; background: url(../image/icon/icon_btn_arrow_w.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-left: 4px; }
.btn_add::after { width: 18px; height: 18px; background: url(../image/icon/icon_btn_add.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-left: 4px; }

.main_btn_box { position: fixed; bottom: 0; width: 100%; max-width: 480px; min-width: 360px; padding: 10px 20px 20px; background: #ffffff; z-index: 1000; } 
.main_btn_box.up { bottom: 68px; }
.main_btn_box .btn,
.popup_btn_box .btn,
.pop_fix_box .btn { position: relative; width: 100%; font-size: 18px; font-weight: 700; line-height: 22px; padding: 16px; display: block; }
.main_btn_box .btn > em { font-size: 18px; font-weight: 700; color: #ffffff; line-height: 22px; }
.main_btn_box .btn > span { position: absolute; top: 50%; transform: translateY(-50%); display: block; }
.main_btn_box .btn > .count { left : 16px; min-width: 18px; height: 18px; font-size: 12px; font-weight: 700; color: var(--primary); line-height: 18px; text-align: center; border-radius: 10px; background: #ffffff; padding: 0 5px; }
.main_btn_box .btn > .price { right: 16px; font-size: 13px; font-weight: 700; color: #ffffff; line-height: 18px; }
.sub_btn_box { position: relative; display: flex; justify-content: space-between; }
.sub_btn_box .btn { width: 100%; font-size: 15px; font-weight: 700; line-height: 20px; padding: 10px 16px; display: block; }
.sub_btn_box .btn.wid50 { width: calc(50% - 4px);}
.pop_btn_box { position: relative; display: flex; justify-content: space-between; }
.pop_btn_box .btn { width: 100%; font-size: 15px; font-weight: 700; line-height: 24px; padding: 16px; display: block; border-radius: 30px; }
.pop_btn_box .btn_cancle { background: var(--gray-200); margin-right: 8px; }

/* disabled */
.btn.disabled { color: var(--gray-300); background: var(--gray-200); border: 1px solid var(--gray-200); cursor: auto; }
.main_btn_box .btn:disabled > .count,
.main_btn_box .btn.disabled > .count { color: var(--gray-200); background: var(--gray-300); }
.main_btn_box .btn:disabled > .price,
.main_btn_box .btn.disabled > .price { color: var(--gray-300); }
.btn_basic.disabled { color: var(--gray-300); background: var(--gray-50); border: 1px solid var(--gray-200); }


/*! ─────────────────── Form ─────────────────── */
/* check_box */
.check_box { position: relative; }
.check_box input[type=checkbox] + label { cursor: pointer; }
.check_box input[type=checkbox] + label .icon_chkbox { width: 20px; height: 20px; 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; }
.check_box input[type=checkbox] + label .icon_check { width: 20px; height: 20px; background: url(../image/icon/icon_check.svg) no-repeat center center; background-size: contain; display: inline-block; }
.check_box input[type=checkbox]:checked + label .icon_check { background: url(../image/icon/icon_check_on.svg) no-repeat center center; background-size: contain; }
.check_box.type_small input[type=checkbox] + label { font-size: 14px; line-height: 20px; }
.check_box.type_small input[type=checkbox] + label .icon_chkbox { vertical-align: -4px; }

/* radio_box */
.radio_box { position: relative; }
.radio_box input[type=radio] + label { cursor: pointer; }
.radio_box input[type=radio] + label .icon_radio { width: 20px; height: 20px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 50%; display: inline-block; }
.radio_box input[type=radio]:checked + label .icon_radio::after { position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; background: var(--primary); content: ''; display: block; z-index: 5; border-radius: 50%; }
.radio_box input[type=radio]:checked + label .icon_radio { background: var(--primary-light); border: 1px solid var(--primary); }

/* select_box */
.select_box { position: relative; width: 100%; padding: 6px 20px 6px 0; border-bottom: 1px solid var(--gray-200); cursor: pointer; display: block; transition: all 0.1s ease-in-out; } 
.select_box::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url(../image/icon/icon_arrow_down.svg) no-repeat center center; background-size: contain; content: ''; display: block; }
.select_box.type_right::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; background: url(../image/icon/icon_arrow_right.svg) no-repeat center center; background-size: contain; content: ''; display: block; }
.select_box.focus { border-bottom: 1px solid var(--primary); } 
.select_box.focus::after { transform: translateY(-50%) rotate(180deg); } 
.select_box .selected { display: block; width: 100%; font-size: 14px; font-weight: 400; line-height: 21px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.select_box .selected img { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }
.select_box.error { border-bottom: 1px solid var(--error); }
.select_box.disabled { background: var(--gray-50); pointer-events: none; }
.select_box.disabled .selected { color: var(--gray-400); }

/* form_group_box */
.form_group_box { width: 100%; }
.form_group_box ul > li { width: 100%; margin-bottom: 16px; }
.form_group_box ul > li:last-of-type { margin-bottom: 0; }
.form_group_box .fold { display: none; }
.form_group_box .input_box { position: relative; width: 100%; }
.form_group_box .form_flex { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
.form_group_box .form_flex.type_between { justify-content: space-between; }
.form_group_box .form_flex .select_box { width: 100px; }
.form_group_box .form_flex .select_box + .form_input { flex: 1; padding-left: 12px; }
.form_group_box .form_label { font-size: 14px; font-weight: 700; line-height: 20px; } 
.form_group_box .form_label.light { font-weight: 400; color: var(--gray-400); }
.form_group_box .form_input { display: block; width: 100%; height: 34px; font-size: 14px; font-weight: 400; line-height: 20px; padding: 8px 0; border-bottom: 1px solid var(--gray-200); caret-color: var(--primary); transition: all 0.1s ease-in-out; } 
.form_group_box .form_input::placeholder { font-size: 14px; font-weight: 400; color: var(--gray-400); letter-spacing: 0; } 
.form_group_box .form_input.focus,
.form_group_box .form_input:focus,
.form_group_box .form_input:focus-visible { border-bottom: 1px solid var(--primary); }
.form_group_box .form_input:read-only { color: var(--gray-400); background: var(--gray-50); pointer-events: fill; }
.form_group_box .form_input:read-only.focus,
.form_group_box .form_input:read-only:focus,
.form_group_box .form_input:read-only:focus-visible { border-bottom: 1px solid var(--gray-200); }
.form_group_box .form_input.error { border-bottom: 1px solid var(--error); }
/* ? input - 날짜 */
.form_group_box .form_input.type_calender { background: url(../image/icon/icon_calendar.svg) no-repeat calc(100% - 8px) center; background-size: 20px; }
/* ? input - 주민등록번호 */
.form_group_box .form_birth { width: 100px; }
.form_group_box .form_dash { width: 30px; font-size: 14px; font-weight: 400; color: var(--gray-400); line-height: 20px; text-align: center; padding: 8px 0; display: inline-block; }
.form_group_box .form_dash + .form_birth { width: calc(100% - 130px); display: inline-block; }
.form_group_box .form_dash + .form_birth + .birth_dot { position: absolute; left: 142px; top: 12px; font-size: 10px; letter-spacing: 1px; }
/* ? input - 검색 */
.form_group_box .form_search { background: url(../image/icon/icon_search.svg) no-repeat calc(100% - 4px) center; background-size: 20px; }
/* ? input - 휴대폰인증 */
.form_group_box .input_box.type_button { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.form_group_box .input_box.type_button .form_input { flex: 1; } 
.form_group_box .input_box.type_button .btn { width: 75px; font-size: 12px; font-weight: 400; line-height: 32px; padding: 0; margin-left: 10px; }
.form_group_box .input_time_box { margin-top: 12px; }
.form_group_box .input_time_box .form_input { font-size: 16px; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; }
.form_group_box .input_time_box .timer { position: absolute; right: 85px; top: 8px; font-size: 13px; font-weight: 400; color: var(--gray-400); line-height: 18px; display: block; } 
.form_group_box .input_time_box .timer::before { width: 16px; height: 16px; background: url(../image/icon/icon_clock.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-right: 4px; } 

/* check_group_box */
.check_group_box { display: flex; flex-wrap: wrap; margin-top: 8px; }
.check_group_box .check_box input + label { height: 36px; font-size: 14px; font-weight: 400; color: var(--black); line-height: 34px; text-align: center; padding: 0 12px; background: #ffffff; border: 1px solid var(--gray-200); border-radius: 8px; display: block; cursor: pointer; margin-right: 6px; margin-bottom: 6px; }
.check_group_box .check_box input:checked + label { background: var(--primary-light); border: 1px solid var(--primary); }

/* textarea */
.form_textarea { position: relative; width: 100%; height: 160px; padding: 16px 16px 40px 16px; background: var(--gray-50); border: 1px solid var(--gray-50); border-radius: 12px; }
.form_textarea.focus { border: 1px solid var(--primary); }
.form_textarea.error_text { border: 1px solid var(--error); }
.form_textarea textarea { width: 100%; height: 100%; background: transparent; resize: none; -ms-overflow-style: none; scrollbar-width: none; }
.form_textarea textarea::-webkit-scrollbar { display: none; }
.form_textarea .text_length { position: absolute; right: 16px; top: 130px; font-size: 13px; color: var(--gray-400); display: block; z-index: 5; }
.form_textarea .text_length .limit { color: var(--gray-400); }

/* error_message */
.error_message { display: block; width: 100%; font-size: 13px; font-weight: 400; color: var(--error); line-height: 24px; overflow: hidden; } 


/*! ─────────────────── Toggle ─────────────────── */
.toggle_tab { cursor: pointer; }
.toggle_cont { display: none; }
.toggle_cont.on { display: block; }
.toggle_group_box .toggle_tab { position: relative; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
.toggle_group_box .toggle_tab::after { position: absolute; right: 0; top: 1px; width: 18px; height: 18px; background: url(../image/icon/icon_arrow_down.svg) no-repeat center center; background-size: contain; content: ''; display: block; cursor: pointer; z-index: 5; transition: all 0.2s ease-in-out; }
.toggle_group_box .toggle_tab.on::after { transform: rotate(180deg); }
.toggle_group_box .title { font-size: 16px; font-weight: 500; line-height: 22px; }
.toggle_group_box .select_item { font-size: 14px; color: var(--gray-400); line-height: 20px; }


/*! ─────────────────── Components - 모달팝업 ─────────────────── */
#modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 2000; }
#modal .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
#modal .modal_wrap { position: fixed; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 432px; text-align: right; z-index: 3000; overflow: hidden; }
#modal .modal_wrap .btn_close { width: 32px; height: 32px; background: url(../image/btn/btn_close_white.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; }
#modal .modal_wrap .img_box { width: 100%; margin: 4px 0; }
#modal .modal_wrap .img_box img { width: 100%; }
#modal .modal_wrap .btn_skip { font-size: 14px; font-weight: 500; color: #ffffff; line-height: 24px; background: transparent; display: inline-block; }


/*! ─────────────────── Components - 팝업 ─────────────────── */
#popup { display: none; position: fixed; top: 0; width: 100%; max-width: 480px; min-width: 360px; height: 100%; overflow: hidden; z-index: 2000; }
#popup .popup_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
#popup .popup_wrap { position: absolute; bottom: 0; width: 100%; max-width: 480px; padding: 24px 20px 40px; background: #ffffff; border-radius: 12px; z-index: 3000; overflow: hidden; }
#popup .popup_wrap.type_full { top: 0; width: 100%; height: 100vh; padding: 0; border-radius: 0; }
#popup .popup_wrap.type_center { left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 432px; height: fit-content; }
#popup .popup_wrap.type_toast { bottom: -100%; height: fit-content; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: bottom 0.5s; }
#popup.on .popup_wrap.type_toast { bottom: 0; }
#popup .popup_header.type_sticky { position: sticky; top: 0; height: 56px; padding: 17px 0; background: #ffffff; box-shadow: 0px 3px 5px 0px rgba(16, 24, 40, 0.05); z-index: 10; }
#popup .popup_header.type_sticky h2 { font-size: 16px; font-weight: 700; line-height: 22px; text-align: center; }
#popup .popup_header.type_sticky .btn_popup_close { top: 16px; }
#popup .popup_title { font-size: 18px; font-weight: 700; line-height: 24px; }
#popup .popup_desc { font-size: 15px; font-weight: 400; color: var(--gray-500); word-break: keep-all; margin-top: 8px; }
#popup .btn_popup_close { position: absolute; top: 24px; right: 24px; width: 24px; height: 24px; background: url(../image/btn/btn_close.svg) no-repeat center center; background-size: contain; text-indent: -9999px; display: inline-block; z-index: 5; }
#popup .popup_section.scroll { height: calc(100% - 142px); overflow: auto; }
#popup .popup_btn_box { padding-top: 24px; }
/* - 통신사 팝업 */
.popup_select_agency li { width: 100%; border-bottom: 1px solid var(--gray-200); }
.popup_select_agency li:last-of-type { border-bottom: none; }
.popup_select_agency li label { display: block; width: 100%; font-size: 16px; font-weight: 400; line-height: 20px; padding: 12px 0; cursor: pointer; }
/* - 캘린더 */
#popup .popup_calendar .popup_title { font-size: 20px; font-weight: 500; color: var(--primary); text-align: center; }
#popup .popup_calendar .popup_title::before { width: 24px; height: 24px; background: url(../../resources/image/icon/icon_calendar_check.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -5px; margin-right: 4px; }
#popup .popup_calendar .popup_section { position: relative; padding-top: 24px; }
/* - 정렬순서 */
#popup .popup_sort .title { font-size: 13px; font-weight: 400; color: var(--gray-500); line-height: 20px; }
#popup .popup_sort .sort_select_box li { margin-top: 16px; }
#popup .popup_sort .sort_select_box li input + label { position: relative; font-size: 18px; font-weight: 500; line-height: 22px; display: block; cursor: pointer; }
#popup .popup_sort .sort_select_box li input:checked + label { color: var(--primary); }
#popup .popup_sort .sort_select_box li input:checked + label::after { position: absolute; right: 0; top: 0; width: 22px; height: 22px; background: url(../../resources/image/icon/icon_check_on.svg) no-repeat center center; background-size: contain; content: ''; display: block; }
/* - 이메일 */
#popup .popup_email .title { font-size: 18px; font-weight: 500; line-height: 22px; }
#popup .popup_email .title b { font-weight: 500; color: var(--primary); }
/* - 서류첨부 */
#popup .upload_select_box li { width: 100%; margin-bottom: 12px; }
#popup .upload_select_box li input[type=file] { display: none; }
#popup .upload_select_box li label { display: block; font-size: 16px; font-weight: 700; line-height: 32px; text-align: center; padding: 8px; background: #ffffff; border: 1px solid var(--gray-200); border-radius: 8px; overflow: hidden; cursor: pointer; }
#popup .upload_select_box li:nth-of-type(1) label::before { width: 24px; height: 24px; background: url(../image/icon/icon_camera.svg) no-repeat center center; background-size: contain; vertical-align: -6px; margin-right: 6px; content: ''; display: inline-block; }
#popup .upload_select_box li:nth-of-type(2) label::before { width: 24px; height: 24px; background: url(../image/icon/icon_picture.svg) no-repeat center center; background-size: contain; vertical-align: -6px; margin-right: 6px; content: ''; display: inline-block; }
/* 서명 */
#popup .popup_sign { position: relative; width: 100%; padding-bottom: 24px; margin-top: 24px; } 
#popup .popup_sign .sign_box { background: url(../image/bg_sign.png) repeat left top; background-size: auto; border: 1px solid #E9EAED; text-align: center; } 
#popup .popup_sign .sign_box.error { border: 1px solid var(--error); } 
#popup .popup_sign .error_message { position: absolute; display: none; }
#popup .popup_sign .sign_box.error ~ .error_message { display: block; }
#popup .popup_sign .btn_edit { position: absolute; right: 0; bottom: 0; display: inline-block; font-size: 14px; font-weight: 400; color: #555; line-height: 18px; background: transparent; border-bottom: 1px solid #242424; } 
/* 스크롤 */
#popup .popup_section.center_scroll { width: 100%; height: 40vh; min-height: 330px; padding-right: 5px; margin-top: 10px; overflow-y: scroll; }
#popup .popup_section.center_scroll::-webkit-scrollbar { width: 12px; }
#popup .popup_section.center_scroll::-webkit-scrollbar-thumb { height: 30%; background: var(--primary); border: 3px solid var(--gray-100); border-radius: 6px; }
#popup .popup_section.center_scroll::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 6px; }

/*? ─────────────────── alert-popup ─────────────────── */
#alert-popup { display: none; position: fixed; top: 0; width: 100%; max-width: 480px; min-width: 360px; height: 100%; overflow: hidden; z-index: 2000; }
#alert-popup .w100{ max-width:unset;}
#alert-popup .popup_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
#alert-popup .popup_wrap { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 432px; text-align: center; padding: 46px 24px 30px; background: #ffffff; border-radius: 12px; z-index: 3000; overflow: hidden; }
#alert-popup .popup_wrap .title { font-size: 20px; font-weight: 700; line-height: 22px; word-break: keep-all; }
#alert-popup .popup_wrap .text { font-size: 16px; font-weight: 500; line-height: 24px; word-break: keep-all; }
#alert-popup .popup_btn_box { padding-top: 24px; }


/*! ─────────────────── Components - 툴팁 ─────────────────── */
@keyframes upDown {
    0% { transform: translateY(0px) translateX(-50%); }
    50% { transform: translateY(-5px) translateX(-50%); }
    100% { transform: translateY(0px) translateX(-50%); }
} 
.tooltip_fix_box { position: relative; padding-bottom: 42px; }
.tooltip_wrap { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; z-index: 10; animation: upDown 1.8s infinite ease-in-out; }
.tooltip_wrap .tooltip { position: relative; background: var(--green); padding: 8px 12px; border-radius: 8px; box-shadow: var(--shadow-01); display: inline-block;  }
.tooltip_wrap .tooltip::after { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); width: 16px; height: 0px; border: 8px solid transparent; border-bottom: 8px solid var(--green); box-sizing: border-box; content: ''; display: block; } 
.tooltip_wrap .tooltip p { font-size: 13px; font-weight: 600; color: #ffffff; line-height: 18px; word-break: keep-all; }


/*! ─────────────────── Components - 약관 동의 ─────────────────── */
.terms_agree_box > p { font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; word-break: keep-all; }
.terms_list_box { width: 100%; padding-top: 12px; border-top: 1px solid var(--gray-200); }
.terms_list_box > li:not(:first-of-type) { margin-top: 12px; }
.terms_list_box .terms_item { position: relative; }
.terms_list_box .terms_item .btn_view { position: absolute; right: 0; top: -1px; width: 24px; height: 20px; background: url(../image/icon/icon_arrow_right.svg) no-repeat center center; background-size: 16px; text-indent: -9999px; overflow: hidden; display: inline-block; opacity: 0.6; z-index: 5; }
.terms_list_box .terms_chk_box input[type=checkbox] + label { font-size: 14px; font-weight: 400; line-height: 130%; display: inline-block; }
.terms_list_box .terms_chk_box input[type=checkbox] + label .icon_check { vertical-align: -5px; margin-right: 4px; }
.terms_list_box .toggle_tab { position: absolute; right: 0; top: 0; width: 16px; height: 16px; background: url(../image/icon/icon_arrow_down.svg) no-repeat center center; background-size: contain; display: block; cursor: pointer; z-index: 5; transition: all 0.2s ease-in-out; }
.terms_list_box .toggle_tab.on { transform: rotate(180deg); }
.terms_list_box .toggle_cont { width: 100%; }
.terms_list_box .scroll_box { width: 100%; height: 120px; padding-right: 5px; margin-top: 10px; overflow-y: scroll; }
.terms_list_box .scroll_box::-webkit-scrollbar { width: 14px; }
.terms_list_box .scroll_box::-webkit-scrollbar-thumb { height: 30%; background: var(--primary); border: 3px solid var(--gray-100); border-radius: 7px; }
.terms_list_box .scroll_box::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 7px; }
.terms_list_box .scroll_box p { font-size: 12px; font-weight: 400; color: var(--gray-500); line-height: 18px; word-break: keep-all; margin-bottom: 8px; }
.terms_list_box .scroll_box p b { color: var(--gray-500); }
.terms_list_box .scroll_box p em { display: inline-block; width: 4px; height: 4px; background: var(--gray-500); border-radius: 50%; vertical-align: 3px; margin-right: 3px; }
.terms_list_box .scroll_box p:last-of-type { margin-bottom: 0; }
.terms_sub_list { padding: 4px 0 0 8px; }
.terms_sub_list li { position: relative; padding: 4px 0; }


/*! ─────────────────── Components - 안내사항 ─────────────────── */
.inform_box > h3 { font-size: 18px; font-weight: 500; line-height: 24px; margin-bottom: 16px; }
.inform_box > h3::before { width: 22px; height: 22px; background: url(../image/icon/icon_warning.svg) no-repeat center center; background-size: contain; display: inline-block; content: ''; vertical-align: -4px; margin-right: 4px; }
.inform_box > ul li { position: relative; width: 100%; padding-left: 20px; margin-bottom: 8px; }
.inform_box > ul li:last-of-type { margin-bottom: 0; }
.inform_box > ul li::before { position: absolute; left: 9px; top: 9px; width: 3px; height: 3px; background: var(--gray-500); border-radius: 50%; content: ''; display: block; }
.inform_box > ul li h4 { font-size: 14px; font-weight: 600; line-height: 20px; word-break: keep-all; margin-bottom: 4px; }
.inform_box > ul li p { font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; word-break: keep-all; margin-top: 4px; }
.inform_box > ul li p:first-of-type { margin-top: 0; }
.inform_box > ul li p b { font-weight: 500; color: var(--primary); }
.inform_box > ul li.point::before { background: var(--primary); }
.inform_box > ul li.point h4 { color: var(--primary); }
.inform_box .pre_title { font-size: 16px; font-weight: 700; color: var(--gray-800); line-height: 22px; }
.inform_box .pre_text { font-size: 15px; font-weight: 400; color: var(--gray-600); line-height: 22px; white-space: pre-wrap; }
.inform_box .download_list { display: flex; justify-content: space-around; width: 100%; padding: 16px; background: #ffffff; border-radius: 12px; box-shadow: 0px 2px 15px rgba(16, 24, 40, 0.05); }
.inform_box .download_list li { width: 20%;}
.inform_box .download_list li a { padding-top: 30px; display: block; }
.inform_box .download_list li a.pdf { background: url(../image/icon/icon_pdf.svg) no-repeat center top; background-size: auto 26px; }
.inform_box .download_list li a.word { background: url(../image/icon/icon_word.svg) no-repeat center top; background-size: auto 26px; }
.inform_box .download_list li a.word { background: url(../image/icon/icon_hwp.svg) no-repeat center top; background-size: auto 26px; }
.inform_box .download_list li a span { font-size: 12px; font-weight: 700; color: #888888; line-height: 18px; text-align: center; display: block; }


/*! ─────────────────── Components - 선택 목록 ─────────────────── */
.select_top_box { display: flex; align-content: center; justify-content: space-between; margin-bottom: 12px; }
.select_top_box > * { font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; display: block; }
.select_top_box .sort { cursor: pointer; }
.select_top_box .sort::after { width: 18px; height: 18px; background: url(../image/icon/icon_arrow_down.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; opacity: 0.5; vertical-align: -3px; }
.select_list_box { width: 100%; padding-top: 12px; }
.select_list_box > li { margin-bottom: 8px; }
.select_list_box > li:last-of-type { margin-bottom: 0; }
.select_list_box > li > input + label { position: relative; width: 100%; height: 56px; display: flex; flex-wrap: wrap; align-items: center; padding: 8px 16px; background: #ffffff; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; cursor: pointer; transition: height 0.3s ease-in-out; }
.select_list_box > li > input + label .text { width: calc(100% - 28px); padding-right: 60px; }
.select_list_box > li > input + label .text strong { font-size: 16px; font-weight: 500; line-height: 20px; display: block; }
.select_list_box > li > input + label .text em { display: inline-block; font-size: 12px; font-weight: 500; color: var(--primary); line-height: 18px; padding: 0 8px; background: var(--primary-light); border-radius: 10px; vertical-align: 1px; margin-left: 6px; }
.select_list_box > li > input + label .text p { font-size: 12px; font-weight: 400; color: var(--gray-400); line-height: 14px; margin-top: 2px; }
.select_list_box > li > input + label .price { position: absolute; right: 16px; font-size: 16px; font-weight: 500; color: var(--primary); }
.select_list_box > li > input + label .paper { position: absolute; right: 16px; top: 10px; font-size: 14px; font-weight: 400; color: var(--gray-500); }
.select_list_box > li > input + label .hide_input { display: none; background: transparent; }
.select_list_box > li.type_textarea input + label textarea { display: none; width: calc(100% - 28px); height: 100%; padding: 10px 0; background: transparent; resize: none; }
.select_list_box > li > input:checked + label { background: var(--primary-light); border: 1px solid var(--primary); }
.select_list_box > li > input:checked + label .price { color: var(--primary-deep); }
.select_list_box .radio_box input:checked + label .hide_text { display: none; }
.select_list_box .radio_box input:checked + label .hide_input { display: block; }
.select_list_box .radio_box input:checked + label .icon_radio { background: #ffffff; }
.select_list_box .radio_box input:checked + label .text p { color: var(--gray-500); }
.select_list_box .radio_box input:checked + label .text em { background: #ffffff; }
.select_list_box .radio_box.type_textarea input:checked + label { height: 120px; }
.select_list_box .radio_box.type_textarea input:checked + label .text { display: none; }
.select_list_box .type_textarea input:checked + label textarea { display: block; }
.select_list_box > li.all_check_box.type_textarea > input:checked + label { height: auto; }
.select_list_box > li.all_check_box.type_textarea > input:checked + label textarea { height: 34px; font-size: 14px; margin-left: 28px; padding: 8px 0 0; border-bottom: 1px solid var(--gray-300); }
/* - radio */
.select_list_box > li input + label .icon_radio { position: relative; width: 20px; height: 20px; background: #ffffff; border: 1px solid var(--gray-200); border-radius: 50%; display: inline-block; margin-right: 8px; }
.select_list_box > li input:checked + label .icon_radio::after { position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; background: var(--primary); content: ''; display: block; z-index: 5; border-radius: 50%; }
.select_list_box > li input:checked + label .icon_radio { background: var(--primary-light); border: 1px solid var(--primary); }
/* - chkbox */
.select_list_box > li input + label .icon_chkbox { position: relative; width: 20px; min-width: 20px; height: 20px; background: url(../image/icon/icon_chkbox.svg) no-repeat center center; background-size: contain; border-radius: 50%; margin-right: 8px; }
.select_list_box > li input:checked + label .icon_chkbox { background: url(../image/icon/icon_chkbox_on.svg) no-repeat center center; background-size: contain; }
/* - disabled */
.select_list_box > li input:disabled + label { background: var(--gray-100); }
.select_list_box > li input:disabled + label .text strong { opacity: 0.5; }
.select_list_box .disabled_text { position: relative; font-size: 13px; font-weight: 400; color: var(--gray-400); line-height: 16px; display: block; padding-left: 12px; margin-top: 8px; }
.select_list_box .disabled_text::before { position: absolute; left: 5px; top: 6px; width: 2px; height: 2px; background: var(--gray-400); border-radius: 50%; overflow: hidden; content: ''; display: block; }
/* - disabled 클래스 */
.select_list_box > li input.disabled + label { background: var(--gray-100); }
.select_list_box > li input.disabled + label .text strong { opacity: 0.5; }
.select_list_box > li input.disabled:checked + label { border: 1px solid var(--gray-200); }
.radio_box input[type=radio].disabled:checked + label .icon_radio { border: 1px solid var(--gray-200); }
.radio_box input[type=radio].disabled:checked + label .icon_radio::after { display: none; }
/* 증명서 선택 */
.document_select_box + .document_select_box { padding-top: 24px; border-top: 1px solid var(--gray-200); }
.document_select_box .select_list_box > li { margin-bottom: 12px; }
.document_select_box .none_data_box { padding: 48px 0; text-align: center; }
.document_select_box .none_data_box p { font-size: 14px; font-weight: 400; color: var(--gray-900); line-height: 20px; }
.document_select_box .none_data_box .icon_info { width: 18px; height: 18px; background: url(../image/icon/icon_warning.svg) no-repeat center center; background-size: contain; vertical-align: -3px; display: inline-block; opacity: 0.6; }
.document_select_box .none_data_box .btn { font-size: 14px; font-weight: 500; color: var(--gray-500); line-height: 20px; padding: 8px 8px; background: var(--gray-100); display: inline-block; margin-top: 8px; }


/*! ─────────────────── Components - 검색 ─────────────────── */
.search_box { position: relative; }
.search_box .search_title { font-size: 16px; font-weight: 700; line-height: 22px; margin-bottom: 12px; }
.search_box .search_input_box { position: relative; }
.search_box .search_input_box::before { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url(../image/icon/icon_search.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; content: ''; display: inline-block; }
.search_box .search_input_box input { width: 100%; font-size: 16px; font-weight: 400; line-height: 20px; padding: 12px 16px 12px 42px; background: var(--gray-50); border: 1px solid var(--gray-50); border-radius: 6px; transition: all 0.1s ease-in-out; }
.search_box .search_input_box input[type=search]::-webkit-search-cancel-button { background: url(../image/btn/btn_close.svg) no-repeat center center, var(--gray-50); background-size: 18px; }
.search_box .search_input_box input::placeholder { font-size: 18px; font-weight: 900; color: var(--gray-400); }
.search_box .search_input_box input:focus,
.search_box .search_input_box input:focus-visible { border: 1px solid var(--primary);  }
/* - 검색 결과 없음 */
.search_result_box .none_data_box { width: 100%; text-align: center; padding-bottom: 24px; }
.search_result_box .none_data_box.type_full { display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100vh - 470px); min-height: 200px; }
.search_result_box .none_data_box::before { width: 20px; height: 20px; background: url(../image/icon/icon_warning_p.svg) no-repeat center center; background-size: contain; content: ''; display: block; opacity: 0.7; margin: 0 auto 8px; }
.search_result_box .none_data_box h3 { font-size: 18px; font-weight: 600; line-height: 20px; margin-bottom: 8px; }
.search_result_box .none_data_box p { font-size: 16px; font-weight: 400; color: var(--gray-500); line-height: 20px; }
/* - 최근 검색 결과 */
.latest_data_box { width: 100%; padding-bottom: 24px; } 
.latest_data_box .title_box { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 8px; }
.latest_data_box h3 { font-size: 14px; font-weight: 500; line-height: 20px; }
.latest_data_box .btn_all_delete { font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; background: transparent; display: inline-block; }
.latest_data_box .latest_list_box { width: calc(100% + 40px); white-space: nowrap; padding: 0 20px; margin-left: -20px; overflow: hidden; }
.latest_data_box .latest_list_box .swiper-slide { position: relative; display: flex; align-items: center; width: auto; padding: 8px 12px; background: var(--gray-100); border-radius: 18px; }
.latest_data_box .latest_list_box .item { font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; display: inline-block; }
.latest_data_box .latest_list_box .btn_delete { width: 16px; height: 16px; background: url(../image/btn/btn_close.svg) no-repeat center center; background-size: contain; display: inline-block; text-indent: -9999px; overflow: hidden; margin-left: 8px; opacity: 0.7; }


.banner_img_box { display: block; overflow: hidden; }
.banner_img_box img { width: 100%; }

/*! ─────────────────── Components - 로딩 ─────────────────── */
@keyframes loading {
    0%, 100% { transform: scale(0.2); background: #ffffff; }
    30% { background: var(--primary-deep); }
    50% { transform: scale(1); background: var(--primary); }
}
#loading { position: fixed; top: 0; width: 100%; max-width: 480px; min-width: 360px; height: 100%; background: rgba(0, 0, 0, 0.6); overflow: hidden; z-index: 2000; }
#loading.bg_off { background: transparent; }
#loading .loading_wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3000; }
#loading .loading_wrap span { width: 18px; height: 18px; background: #ffffff; transform: scale(0.2); border-radius: 50%; display: inline-block; margin: 0 5px; animation: loading 1.6s ease-out infinite; }
#loading .loading_wrap span:nth-of-type(1) { animation-delay: 0s; }
#loading .loading_wrap span:nth-of-type(2) { animation-delay: 0.2s; }
#loading .loading_wrap span:nth-of-type(3) { animation-delay: 0.4s; }
#loading .loading_wrap span:nth-of-type(4) { animation-delay: 0.6s; }





/*! ─────────────────── 핵토데이터 배너 ─────────────────── */
@media (max-width: 1023px) {
    #pc{ display: none; }
    #m_banner { width: 100%; text-align: center; padding: 16px 12px; border: 1px solid var(--gray-200); border-radius: 12px; display: block; }
    #m_banner strong { font-size: 18px; font-weight: 700; color: #222; display: block; line-height: 20px; }
    #m_banner strong::before { width: 24px; height: 24px; background: url(../image/icon_m_banner.png) no-repeat center center; background-size: contain; content: ''; display: block; margin: 0 auto 10px; }
    #m_banner p { font-size: 10px; font-weight: 400; color: var(--gray-400); line-height: 12px; }

    #m_banner2 { position: relative; width: 100%; text-align: left; padding: 20px 20px 18px; border: 1px solid var(--gray-200); border-radius: 16px; display: block; }
    #m_banner2::after { position: absolute; right: 20px; top: 17px; width: 50px; height: 20px; background: url(../image/logo_moneykiwoom.png) no-repeat right center; background-size: contain; content: ''; display: block; }
    #m_banner2 h3 { font-size: 20px; font-weight: 800; color: #222; display: block; line-height: 20px; }
    #m_banner2 p { font-size: 14px; font-weight: 700; color: #222; line-height: 16px;  }
    #m_banner2 p b { color: var(--primary); }
    #m_banner2 em { font-size: 10px; font-weight: 400; color: var(--gray-400); line-height: 12px; display: block; }

    #quick_menu {
        bottom: 78px !important;
    }
}

@media (min-width: 1024px) {
    #m_banner,
    #m_banner2 { display: none; }

    #pc { position: relative; width: 480px; height: 100%; }
    #pc .pc_wrap { position: fixed; top: 50%; transform: translateY(-50%); width: 480px; padding-right: 48px; }
    #pc .text_box h2 { width: 180px; height: 50px; background: url(../image/logo.png) no-repeat left center; background-size: contain; text-indent: -9999px; overflow: hidden; }
    #pc .text_box p { font-size: 24px; font-weight: 500; color: #222222; line-height: 34px; }
    #pc .text_box p em { font-weight: 700; }
    #pc .text_box strong { font-size: 32px; font-weight: 700; color: #222222; display: block; }
    #pc .pc_slider { width: 100%; overflow: hidden; }
    #pc .pc_slider .swiper-slide { width: 100%; }
    #pc .pc_slider .s01 { padding-left: 24px; }
    #pc .pc_slider .s01 h2 { width: 180px; height: 50px; background: url(../image/logo.png) no-repeat left center; background-size: contain; text-indent: -9999px; overflow: hidden; }
    #pc .pc_slider .s01 p { font-size: 24px; font-weight: 500; color: #222222; line-height: 34px; }
    #pc .pc_slider .s01 p em { font-weight: 700; }
    #pc .pc_slider .s01 strong { font-size: 32px; font-weight: 700; color: #222222; display: block; }
    #pc .pc_slider .s02 { padding-right: 24px; }
    #pc .pc_slider .s02 img { width: 100%; }
}




/*! ─────────────────── 241111 - 바로청구 ─────────────────── */
.fix_gnb_bottom { padding-bottom: 68px; }

.cont_box_40 { padding: 40px 20px; } 
.btn_side_link { display: inline-block; font-size: 14px; font-weight: 500; line-height: 130%; }
.btn_side_link::after { content: ''; display: inline-block; width: 18px; height: 18px; background: url(../image/icon/icon_arrow_right.svg) no-repeat center center; background-size: contain; vertical-align: -4px; }
.btn_add_link { display: inline-block; font-size: 14px; font-weight: 500; color: var(--gray-500); line-height: 20px; padding: 6px 12px 6px 10px; background: var(--gray-100); border: 1px solid var(--gray-100); border-radius: 8px; }
.btn_add_link::before { content: ''; display: inline-block; width: 20px; height: 20px; background: url(../image/icon/icon_plus.svg) no-repeat center center; background-size: contain; vertical-align: -5px; margin-right: 4px; }
.bul_text { position: relative; font-size: 12px; font-weight: 400; color: var(--gray-400); line-height: 18px; padding-left: 18px; }
.bul_text::before { content: ''; display: block; position: absolute; left: 8px; top: 8px; width: 2px; height: 2px; background: var(--gray-500); border-radius: 50%; }

/* btn_fix_box */
.btn_fix_box {width: 100%; max-width: 480px; min-width: 360px; text-align: center; padding: 10px 20px 40px; background: #ffffff; z-index: 1000; }
.btn_fix_box.type_auto { position: relative; bottom: auto; }
.bg_gray .btn_fix_box { background: var(--gray-50); }
.btn_fix_box .btn { position: relative; width: 100%; font-size: 18px; font-weight: 700; line-height: 22px; padding: 16px; display: block; }
.btn_fix_box .btn > em { font-size: 18px; font-weight: 700; color: #ffffff; line-height: 22px; }
.btn_fix_box .btn > span { position: absolute; top: 50%; transform: translateY(-50%); display: block; }
.btn_fix_box .btn > .count { left : 16px; min-width: 18px; height: 18px; font-size: 12px; font-weight: 700; color: var(--primary); line-height: 18px; text-align: center; border-radius: 10px; background: #ffffff; padding: 0 5px; }
.btn_fix_box .btn > .price { right: 16px; font-size: 13px; font-weight: 700; color: #ffffff; line-height: 18px; }
.btn_fix_box .btn_text { display: inline-block; font-size: 14px; font-weight: 500; color: var(--gray-900); }

/* form */
.form_group_box02 .input_box { display: flex; flex-wrap: wrap; }
.form_group_box02 .input_box .form_label { display: block; width: 100%; font-size: 12px; font-weight: 500; color: var(--gray-400); line-height: 18px; }
.form_group_box02 .input_box .form_input { display: block; width: 100%; font-size: 16px; font-weight: 500; color: var(--gray-900); padding: 8px 0; border-bottom: 1px solid var(--gray-400); }
.form_group_box02 .input_box .form_input::placeholder { color: var(--gray-400); }
.form_group_box02 .input_box.type_calendar .form_input { background: url(../image/icon/icon_calendar_gray.svg) no-repeat calc(100% - 10px) center; background-size: 24px; }
.form_group_box02 .input_box.type_birth .form_input { width: calc(50% - 17px); }
.form_group_box02 .input_box .form_dash { width: 34px; font-size: 16px; font-weight: 500; color: var(--gray-500); line-height: 36px; text-align: center; }
.form_group_box02 .input_box.focus .form_label { color: var(--primary); }
.form_group_box02 .input_box .form_input.valid { border-bottom: 1px solid var(--gray-900); }
.form_group_box02 .input_box.error .form_label { color: var(--error); }
.form_group_box02 .input_box.error .form_input { border-bottom: 1px solid var(--error); }
.form_group_box02 .input_box .form_input:focus,
.form_group_box02 .input_box .form_input:focus-visible { border-bottom: 1px solid var(--primary); }

/* select_text_box */
.select_text_box { position: relative; width: 100%; padding: 14px ; background: var(--gray-50); border-radius: 6px; cursor: pointer; }
.select_text_box::after { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: url(../image/icon/icon_arrow_right.svg) no-repeat center center; background-size: contain; content: ''; display: block; }
.select_text_box .text_value { width: 100%; font-size: 16px; font-weight: 500; color: var(--gray-400); line-height: 24px; padding-right: 36px; }
.select_text_box .text_value img { width: 24px; vertical-align: middle; }
.select_text_box .text_value span { display: inline-block; max-width: calc(100% - 36px); color: var(--gray-900); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; margin-left: 8px; }

/* 툴팁 */
.tooltip_axis { position: relative; }
.tooltip02 { position: absolute; background: rgba(0, 0, 0, 0.7); padding: 12px 14px; border-radius: 8px; z-index: 10; }
.tooltip02::after { content: ''; display: block; position: absolute; width: 19px; height: 14px; background: url(../image/img_tooltip_arrow.png) no-repeat center center; background-size: contain; }
.tooltip02.type_ct { top: -40px; left: 50%; transform: translateX(-50%); }
.tooltip02.type_ct::after { left: 50%; bottom: -13px; transform: translateX(-50%); }
.tooltip02.type_lt { top: -48px; left: 0; }
.tooltip02.type_lt::after { left: 30px; bottom: -13px; }
.tooltip02.type_lb { bottom: -48px; left: 0; }
.tooltip02.type_lb::after { left: 30px; top: -13px; transform: rotate(180deg); }
.tooltip02 p { font-size: 14px; font-weight: 500; color: #ffffff; line-height: 130%; white-space: nowrap; }
.tooltip02 p b { font-weight: 500; color: var(--primary); }

/* 팝업 */
#popup .popup_wrap02 { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; min-width: 360px; background: #ffffff; z-index: 3000; overflow: hidden; }
#popup .popup_wrap02.type_full { top: 0; width: 100%; height: 100vh; padding: 0; }
#popup .popup_wrap02.type_center { top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 432px; height: fit-content; border-radius: 24px; }
#popup .popup_wrap02.type_toast { bottom: -100%; height: fit-content; border-radius: 24px 24px 0 0; transition: bottom 0.5s linear; }
#popup.on .popup_wrap02.type_toast { bottom: 0; }
#popup .popup_wrap02 .pop_header { position: sticky; top: 0; padding: 24px 0; background: #ffffff; z-index: 10; }
#popup .popup_wrap02 .pop_header h2 { font-size: 18px; font-weight: 500; color: var(--primary); line-height: 24px; text-align: center; }
#popup .popup_wrap02 .pop_header .btn_popup_close { position: absolute; top: 24px; right: 24px; width: 24px; height: 24px; background: url(../image/btn/btn_close.svg) no-repeat center center; background-size: contain; text-indent: -9999px; display: inline-block; z-index: 5; }
#popup .popup_wrap02 .pop_section { max-height: calc(100vh - 250px); padding: 0 20px; }
#popup .popup_wrap02 .pop_section .scroll_wrap { width: 100%; max-height: inherit; overflow-y: scroll; }
#popup .popup_wrap02 .pop_section .scroll_wrap::-webkit-scrollbar { width: 0; }
#popup .popup_wrap02 .pop_fix_box { position: sticky; bottom: 0; width: 100%; text-align: center; padding: 24px 20px 40px; background: #ffffff; z-index: 10; }
#popup .popup_wrap02 .pop_fix_box .btn { display: block; width: 100%; }

/* 안내사항 */
.inform_box02 > h3 { font-size: 16px; font-weight: 700; color: var(--gray-700); line-height: 140%; }
.inform_box02 > h3 .icon_notice { display: inline-block; width: 20px; height: 20px; background: url(../image/icon/icon_notice_p.svg) no-repeat center center; background-size: contain; vertical-align: -4px; margin-right: 4px; }
.inform_box02 .text_box { width: 100%; background: var(--gray-50); padding: 16px; border-radius: 8px; }
.inform_box02 .text_box ul li { font-size: 12px; font-weight: 400; color: var(--gray-500); line-height: 18px; }
.inform_box02 .text_box .bul { position: relative; padding-left: 18px; }
.inform_box02 .text_box .bul::before { content: ''; display: block; position: absolute; left: 8px; top: 7px; width: 2px; height: 2px; background: var(--gray-500); border-radius: 50%; }

/* 카카오톡 바로가기 메뉴 */
#quick_menu {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: auto;
    z-index: 100;
    overflow: visible;
}

#quick_menu .btn_quick_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    text-indent: -9999px;
    background: url(../image/icon_kakao_chat.svg) no-repeat center center / contain;
    border-radius: 22px;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px;
    border: none;
}
