:root {
    /* 테마 */
    & {
        /* color */
        --primary: #003555;
        --col-white: #ffffff;
        --col-gray6: #e0e2e4;
        --col-gray5: #c5c7ca;
        --col-gray4: #9b9da1;
        --col-gray3: #63656a;
        --col-gray2: #48494d;
        --col-black: #232426;
        --col-blue: #0062FF;
        --col-error: #F0101B;
        --sys-caption: #0AA464;

        /* background */
        --bg-white: var(--col-white);
        --bg-gray6: #f8f9fb;
        --bg-gray5: #f2f4f6;
        --bg-gray4: #e0e2e4;
        --bg-gray3: #9c9d9f;
        --bg-gray2: #63656a;
        --bg-black: #232426;
        --bg-sky: #54C2F0;
        --bg-navy: var(--primary);
        --bg-navyRGB: rgba(36, 71, 111, 0.08);

        --bg-active: rgba(84, 194, 240, 0.3);
        --bg-error: #FFEFF0;

        --dim-black: rgba(35, 36, 38, 0.7);

        /* border / shadow */
        --bor-sky: #54C2F0;
        --bor-error: #FF6067;
        --bor-blackRGB5: rgba(35, 36, 38, 0.05);
        --bor-blackRGB10: rgba(35, 36, 38, 0.1);
    }

    & {
        --display1-f: 2.25rem;

        --h1-f: 1.5rem;
        --h2-f: 1.25rem;
        --h3-f: 1.125rem;

        --body1-f: 1rem;
        --body2-f: .875rem;
        --body3-f: .8125rem;

        --caption-f: .75rem;

        --misc1-f: .875rem;

        --bold-f: 700;
    }
}

/* 공통 가이드 영역 */
body { overflow: scroll; }
.w_160 { width: 10rem; }
.w_240 { width: 15rem; }

.wrapper { padding-bottom: 9.375rem; min-width: 66rem; }
.wrapper > .w_480 { max-width: 32.5rem; margin: 0 auto; padding-inline: 1.25rem; }
.wrapper > .w_1060 { max-width: 68.75rem; margin: 0 auto; padding-inline: 1.25rem; }

/* color */
.col_navy { color: var(--primary); }
.col_blue { color: var(--col-blue); }
.col_red { color: var(--col-error); }
.col_gray2 { color: var(--col-gray2); }
.underline { text-decoration: underline; }
.bold_f { font-weight: var(--bold-f); }
.body2_f { font-size: var(--body2-f); }

/* margin */
.mt_8 { margin-top: .5rem; }
.mt_16 { margin-top: 1rem; }
.mt_40 { margin-top: 2.5rem; }
.ml_12 { margin-left: .75rem; }
.pd_block20 { padding-block: 1.25rem; }

/* align */
.txt_center { text-align: center; }
.flexgap_8 { display: flex; align-items: center; gap: .5rem; }
.flex_btw { display: flex; align-items: center; justify-content: space-between; }

/* button */
button:disabled { background-color: var(--bg-gray4); color: var(--col-gray4); }
.btn_box { display: flex; gap: .5rem; }

.blue_round { display: flex; border-radius: 6.25rem; background-color: var(--bg-white); color: var(--primary); font-weight: var(--bold-f); padding-inline: 1rem; height: 2.25rem; line-height: 2.25rem; font-size: var(--body2-f); border: 1px solid var(--primary); align-items: center; gap: .25rem; }
.blue_round:after { content: ""; width: 1.25rem; height: 1.25rem; background: url('../images/icons/ic_add_round_pri.svg') no-repeat center / contain; display: block; }

.white_round { display: inline-block; border-radius: 6.25rem; background-color: var(--bg-white); color: var(--col-gray3); font-weight: var(--bold-f); padding-inline: 1rem; height: 2.25rem; line-height: 2.25rem; font-size: var(--body2-f); border: 1px solid var(--bor-blackRGB10); transition: 0.3s; }
.navy_btn_s { background-color: var(--bg-navy); color: var(--col-white); font-size: var(--caption-f); font-weight: var(--bold-f); padding-inline: .75rem; height: 2.0625rem; line-height: 2.0625rem; border-radius: .25rem; margin-right: -0.25rem; }

.gray_btn { width: 100%; height: 4.0625rem; line-height: 4.0625rem; border-radius: .5rem; background-color: var(--bg-gray6); font-size: var(--h3-f); color: var(--col-gray3); font-weight: var(--bold-f); text-align: center; }
.navy_btn { display: inline-block; width: 100%; height: 4.0625rem; line-height: 4.0625rem; border-radius: .5rem; background-color: var(--bg-navy); font-size: var(--h3-f); color: var(--col-white); font-weight: var(--bold-f); text-align: center; }
.red_btn { width: 100%; height: 4.0625rem; border-radius: .5rem; background-color: var(--bor-error); font-size: var(--h3-f); color: var(--col-white); font-weight: var(--bold-f); }

.white_btn_m { background-color: var(--bg-white); color: var(--col-gray3); font-size: var(--body3-f); font-weight: var(--bold-f); padding-inline: .5rem; height: 1.625rem; line-height: 1.625rem; border-radius: .25rem; border: 1px solid var(--bor-blackRGB10); }

/* header */
header { position: relative; display: flex; align-items: center; justify-content: space-between; margin-block: 2.5rem; }
header img { width: 6.25rem; }

.menu_btn { width: 2rem; height: 2rem; background: url('../images/icons/ic_menu.svg') no-repeat center / 2rem; }
.nav { display: none; position: absolute; background-color: var(--bg-white); border-radius: .5rem; border: 1px solid var(--bor-blackRGB10); right: 0; top: 2.75rem; width: 9.75rem; z-index: 1; }
.nav.active { display: block; }
.nav * { display: block; padding-left: 1rem; height: 3.25rem; line-height: 3.25rem; font-size: var(--body2-f); font-weight: var(--bold-f); color: var(--col-black); width: 100%; text-align: left; transition: 0.3s; }
.nav * ~ * { border-top: 1px solid var(--bor-blackRGB10); }
.nav *:hover { background-color: var(--bg-gray6); }

/* input */
.inp_tit { display: flex; gap: .5rem; font-size: var(--body2-f); color: var(--col-gray4); padding-block: 1.25rem .5rem; font-weight: var(--bold-f); }
.inp_tit span { color: var(--col-gray5); font-weight: 500; }
.inp_box { position: relative; }
.inp_box input { padding-right: 4.125rem; }
.inp_box.alert input { border-color: var(--bor-error); background-color: var(--bg-error); }
input { padding-inline: 1rem; border: 1px solid var(--bor-blackRGB10); border-radius: .5rem; height: 3rem; font-size: var(--body2-f); width: 100%; font-weight: var(--bold-f); }
input::placeholder { color: var(--col-gray5); font-weight: 500; }
input:focus:not(:read-only) { background-color: var(--bg-navyRGB); }
.inp_box .inp_file { padding-right: 6.0625rem; text-overflow: ellipsis; overflow: hidden; }

.ic_box { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: .25rem; }
.psw_btn { width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_view_on.svg') no-repeat center; }
.psw_btn.active { background-image: url('../images/icons/ic_view_off.svg'); }
.ic_alert { width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_exclam_round.svg') no-repeat center; }
.clear_btn { width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_delite_round_dim.svg') no-repeat center; opacity: 0; }
.clear_btn.active { opacity: 1; }

.error_txt { padding-top: .5rem; color: var(--col-error); font-size: var(--caption-f); }
.caption_txt { padding-top: .5rem; color: var(--col-gray5); font-size: var(--caption-f); }
.success_txt { padding-top: .5rem; color: var(--primary); font-size: var(--caption-f); }

.chk_label { padding: .25rem 0 .25rem 1.75rem; background: url('../images/icons/ic_check_round_off.svg') no-repeat left center / 1.5rem; color: var(--col-gray4); font-size: var(--body1-f); }
.chk_inp:checked + .chk_label { background-image: url('../images/icons/ic_check_round_on.svg'); color: var(--col-black); font-weight: var(--bold-f); }
.ra_label { padding: .25rem 0 .25rem 1.75rem; background: url('../images/icons/ic_radio_off.svg') no-repeat left center / 1.5rem; color: var(--col-gray4); font-size: var(--body2-f); }
.ra_inp:checked + .ra_label { background-image: url('../images/icons/ic_radio_on.svg'); color: var(--col-black); font-weight: var(--bold-f); }

/* 페이징 */
.paging_center { justify-content: center; padding-top: 1.25rem; }
.total_num,
.paging { font-size: var(--body2-f); color: var(--col-gray5); }
.paging { display: flex; align-items: center; gap: .25rem; }
.paging em { color: var(--col-black); }
.paging .prev,
.paging .next { width: 1rem; height: 1rem; background: url('../images/icons/ic_arrow_down_black.svg') no-repeat center / 1rem; margin-bottom: 1px; opacity: 0.3; }
.paging .prev { transform: rotate(90deg); }
.paging .next { transform: rotate(-90deg); }
.paging button.active { opacity: 1; }

/* 팝업 */
.popup { position: fixed; left: 0; top: 0; width: 100%; height: 100%; align-items: center; justify-content: center; display: none; z-index: 99; }
.popup.active { display: flex; }
.dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(35, 36, 38, 0.6); z-index: -1; }
.pop_cont { position: relative; background-color: var(--bg-white); border-radius: 1rem; padding: 1.5rem; width: 90%; max-width: 25rem; box-shadow: var(--box-shadow); }
.popup .pop_close:not(.btn_box button) { position: absolute; right: 0; top: -2.5rem; width: 2rem; height: 2rem; background: url('../images/icons/ic_delite_round_dim.svg') no-repeat center / contain; }
.pop_cont .pop_tit { display: block; font-size: var(--h3-f); padding-bottom: .75rem; text-align: center; }
.pop_cont .pop_txt { color: var(--col-gray3); text-align: center; }
.pop_cont .pop_subtxt { color: var(--col-gray4); padding-top: .25rem; text-align: center; }
.pop_cont .btn_box { padding-top: 2rem; }
.pop_cont .btn_box * { font-size: var(--body2-f); height: 3.25rem; line-height: 3.25rem; }

/* 공지사항 이미지 팝업 */
.img_pop { position: relative; width: 30rem; max-width: 90%; }
.img_slide { height: 20rem; border-top-left-radius: 1rem; border-top-right-radius: 1rem; background-color: var(--bg-white); }
.img_slide img { width: 100%; }
.img_pagination { position: absolute; left: auto; right: 1.25rem; bottom: 1.25rem; width: auto; padding: .25rem .5rem .1875rem; background-color: var(--dim-black); color: var(--col-white); border-radius: 62.4375rem; font-size: var(--body1-f); z-index: 1; }
.img_pagination .swiper-pagination-current { color: var(--bg-sky); }
.img_popBtn { display: flex; height: 3.875rem; line-height: 3.875rem; background-color: var(--bg-white); border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.img_popBtn * { flex: 1; font-size: var(--body1-f); font-weight: var(--bold-f); color: var(--col-gray4); text-align: center; }
.img_popBtn * ~ * { border-left: 1px solid var(--bor-blackRGB5); color: var(--bg-navy); }

/* 로그인 */
.login_wrap { padding-block: 9.375rem; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login_box { padding: 2rem 2.5rem; border: 1px solid var(--bor-blackRGB10); border-radius: 1.25rem; width: 31.25rem; }
.login_box .top_logo { text-align: center; border-bottom: 1px solid var(--bor-blackRGB10); padding-bottom: 2rem; margin-bottom: 1.25rem; }
.login_box .top_logo img { display: block; margin: 0 auto 1.25rem; max-width: 13.125rem; }
.login_box .top_logo span { padding: .25rem .5rem; background-color: rgba(36, 71, 111, 0.1); border-radius: 6.25rem; color: var(--primary); font-size: var(--caption-f); font-weight: var(--bold-f); }
.login_btn { width: 100%; height: 4.25rem; background-color: var(--bg-navy); color: var(--col-white); border-radius: .5rem; font-size: var(--h3-f); font-weight: var(--bold-f); margin-bottom: 1.5rem; }
.login_info { text-align: center; color: var(--col-gray5); font-size: var(--body2-f); }
.login_chk { display: flex; align-items: center; justify-content: space-between; padding-block: 2rem 1.25rem; }
.login_chk .chk_label { font-size: var(--body2-f); }
.login_chk a { font-size: var(--misc1-f); text-decoration: underline; color: var(--col-gray4); }

/* 계정 선택 */
.choice_box { width: 100%; padding-inline: 1.25rem; }
.choice_box .top_logo img { display: block; margin: 0 auto; max-width: 10rem; }
.choice_btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; max-width: 40.25rem; width: 100%; margin: 0 auto; }
.choice_btn a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .5rem; width: 100%; height: 11.25rem; border-radius: .5rem; border: 1px solid var(--bor-blackRGB10); transition: 0.3s; }
.choice_btn strong { display: block; font-size: var(--h3-f); }
.choice_btn p { font-size: var(--body2-f); color: var(--col-gray3); }
.choice_btn a:hover { background-color: var(--bg-active); border-color: var(--bg-sky); }
.choice_btn a:hover * { color: var(--bg-navy); }

/* 가입 신청 */
.bor_btmGray { padding-bottom: 1.25rem; border-bottom: 1px solid var(--bor-blackRGB5); }
.top_tit { border-bottom: 1px solid var(--bor-blackRGB10); padding-bottom: 1.25rem; }
.top_tit em { display: block; font-size: var(--h3-f); font-weight: 500; }
.top_tit strong { display: block; font-size: var(--h1-f); padding-top: .625rem; }
.top_tit p { padding-top: .5rem; font-size: var(--body2-f); color: var(--col-gray3); }
.tag_code { padding-inline: .5rem; height: 1.75rem; line-height: 1.75rem; border-radius: 100px; background-color: rgba(84, 194, 240, 0.30); font-size: var(--body2-f); color: var(--primary); font-weight: var(--bold-f); }
.info_tit { display: flex; align-items: center; justify-content: space-between; padding-top: 2.5rem; font-size: var(--h3-f); padding-bottom: 1rem; border-bottom: 1px solid var(--bor-blackRGB10); }
.info_tit p { font-size: var(--body2-f); color: var(--col-gray4); }

.list_box { position: relative; }
.list_box button { position: relative; background-color: var(--bg-white); border: 1px solid var(--bor-blackRGB10); border-radius: .5rem; width: 100%; height: 3rem; padding-inline: 1rem 2.75rem; text-align: left; font-size: var(--body2-f); font-weight: var(--bold-f); color: var(--col-gray2); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.list_box button.gray_type { color: var(--col-gray5); font-weight: 500; }
.list_box button:after { content: ""; position: absolute; right: 1rem; top: .75rem; width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_arrow_down_black.svg') no-repeat center / contain; transition: 0.3s; }
.list_box button.active:after { transform: rotate(180deg); }
.list_box ul { position: absolute; top: 3.5rem; background-color: var(--bg-white); border-radius: .5rem; border: 1px solid var(--bor-blackRGB10); width: 100%; max-height: 16.25rem; overflow: auto; display: none; z-index: 1; }
.list_box ul li { padding: 1rem; color: var(--col-gray2); font-size: var(--body2-f); transition: 0.3s; cursor: pointer; font-weight: var(--bold-f); }
.list_box ul li ~ li { border-top: 1px solid var(--bor-blackRGB10); }
.list_box ul li.active,
.list_box ul li:hover { background-color: var(--bg-gray6); }
.list_box.business_type button { display: flex; align-items: center; }
.list_box.business_type button span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: fit-content; }
.list_box.business_type button span:last-child { display: flex; align-items: center; flex-shrink: 0; }
.list_box.business_type button span:last-child::before { content: ""; display: inline-block; width: 2px; height: .875rem; margin-inline: .5rem; background-color: var(--col-gray2); }
.list_box.business_type li span { display: block; }
.list_box ul li.empty { padding-block: 2.625rem; color: var(--col-gray5); font-size: var(--body2-f); text-align: center; pointer-events: none; }

.price_wrap { padding-top: 2.5rem; margin-top: 2.5rem; border-top: 8px solid var(--bor-blackRGB5); }
.chk_info { font-size: var(--body1-f); color: var(--col-gray4); text-align: center; }
.chk_info a { color: var(--col-gray4); }
.price_box { display: flex; align-items: center; justify-content: space-between; }
.price_box ~ .price_box { padding-top: 1.25rem; }
.price_box:not(.col_navy) span { color: var(--col-gray4); }
.price_box span { font-weight: var(--bold-f); }
.price_box strong { font-size: var(--h3-f); }
.total_price { display: flex; align-items: center; justify-content: space-between; color: var(--primary); font-size: var(--h2-f); border-top: 1px solid var(--bor-blackRGB5); padding-top: 1.25rem; margin-top: 1rem; }
.empty_list { color: var(--col-gray4); font-size: var(--body1-f); text-align: center; }
.price_info { font-size: var(--body2-f); color: var(--col-gray5); padding-top: .5rem; }

/* 주문 정보 입력 완료 */
.finish_tit { text-align: center; }
.finish_tit strong { display: block; padding-block: 5rem 1.5rem;  font-size: var(--display1-f); }
.finish_tit p { padding-bottom: 5rem; font-size: var(--h1-f); }
.finish_box { padding: 2rem 2rem 1rem; background-color: var(--bg-gray6); border-radius: 1rem; }
.order_tit { display: block; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bor-blackRGB5); font-size: var(--h3-f); margin-bottom: 1rem; }

/* 주문 내역 */
.date_box { display: flex; align-items: center; justify-content: space-between; padding-block: 2.5rem 1.25rem; }
.date_box .flexgap_8 { gap: .75rem; }
.date_box .filter_tit { font-size: var(--body2-f); color: var(--col-gray5); white-space: nowrap; }

.history_table th,
.history_table td:not(.empty_list) { padding: 1rem .5rem; border-bottom: 1px solid var(--bor-blackRGB5); }
.history_table th { color: var(--col-gray3); font-size: var(--body3-f); background-color: var(--bg-gray6); }
.history_table td .underline,
.history_table td:not(.empty_list) { font-size: var(--body2-f); text-align: center; color: var(--col-gray2); }
.history_table td.col_gray5 { color: var(--col-gray5); }
.history_table td.col_red { color: var(--col-error); }
.history_payment { padding: 3.5rem 2.5rem 0; margin-top: 2.5rem; border-top: .5rem solid var(--bor-blackRGB5); }
.history_table .empty_list { height: 34.25rem; }
.history_table.txt_left02 th:nth-child(2),
.history_table.txt_left02 td:nth-child(2){ text-align: left; }

.total_wrap { display: flex; gap: 1.25rem; margin-bottom: 1.25rem; }
.total_con { flex-shrink: 0; width: calc(33.33% - .8331rem); border-radius: 1rem; border: 1px solid var(--bor-blackRGB10); padding: 2rem; }
.total_tit { display: block; padding-bottom: 1.25rem; border-bottom: 1px solid var(--bor-blackRGB10); font-size: var(--h3-f); font-weight: var(--bold-f); }
.total_box { min-height: 12.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; }
.total_box .current { font-size: var(--h2-f); color: var(--primary); padding-bottom: .25rem; }
.total_box strong { font-size: var(--display1-f); margin-right: .25rem; }
.total_box p { font-size: var(--h3-f); color: var(--col-gray4); }
.total_box p span { color: var(--col-gray3); margin-left: .5rem; }
.total_lank { min-height: 12.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.total_lank li { display: flex; width: 100%; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bor-blackRGB5); padding-block: .75rem; gap: .625rem; }
.total_lank li p { font-size: var(--body1-f); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: fit-content; }
.total_lank li span { font-size: var(--body2-f); background-repeat: no-repeat; background-size: 1.25rem; background-position: left center; font-weight: var(--bold-f); min-height: 1.25rem; }
.total_lank li .up { padding-left: 1.5rem; background-image: url('../images/icons/ic_up.svg'); color: var(--bg-sky); }
.total_lank li .stay { padding-left: 1.25rem; background-image: url('../images/icons/ic_stay.svg'); font-size: 0; }
.total_lank li .down { padding-left: 1.5rem; background-image: url('../images/icons/ic_down.svg'); color: var(--col-error); }
.total_con .empty_list { display: flex; align-items: center; justify-content: center; height: 12.5rem; }

.hospitalEl table { table-layout: fixed; }
.ellipsis_txt { display: flex; align-items: center; justify-content: center; }
.ellipsis_txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: fit-content; }
.ellipsis_txt i { flex-shrink: 0; }

.banner { background-color: var(--bg-gray5); padding-inline: 1.25rem; }
.banner .swiper { display: flex; align-items: center; justify-content: space-between; height: 4.0625rem; max-width: 68.375rem; }
.banner .swiper-wrapper { max-width: calc(100% - 8.4375rem); }
.banner .swiper-slide { display: flex; align-items: center; justify-content: space-between; }
.banner p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: var(--body1-f); }
.banner_btn { display: flex; align-items: center; gap: .625rem; }
.banner_btn .detail_btn { font-size: var(--caption-f); height: 2.125rem; line-height: 2.125rem; padding-inline: .75rem; background-color: var(--bg-white); border: 1px solid var(--bor-blackRGB10); border-radius: .25rem; color: var(--col-gray3); font-weight: var(--bold-f); }
.banner_btn .banner_close { width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_delite_round_dim.svg') no-repeat center / contain; }

/* 가입 완료 */
.complete_btn { max-width: 26.25rem; margin: 0 auto; }
.complete_btn .underline { display: block; color: var(--col-gray5); margin-top: 1.5rem; text-align: center; font-size: var(--misc1-f); }

/* 공지사항 */
.notice_detail { padding-block: 2.5rem 7.5rem; font-size: 1rem; }
.notice_detail img { display: block; max-width: 100%; margin-bottom: 2.5rem; }