: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;

        /* 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.6);

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

    & {
        --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;
    }
}

/* 공통 가이드 영역 */
.wrapper { padding-bottom: 10.9375rem; 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; }

/* width */
.w_120 { width: 7.5rem; }
.w_156 { width: 9.75rem; }
.w_400 { width: 25rem; }
.w_full { width: 100%; }

/* color */
.col_blue { color: var(--col-blue); }
.col_red { color: var(--col-error); }
.col_gray5 { color: var(--col-gray5); }
.col_gray2 { color: var(--col-gray2); }
.underline { text-decoration: underline; }

.body2_f { font-size: var(--body2-f); }
.h3_f { font-size: var(--h3-f); }

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

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

/* button */
button:disabled { background-color: var(--bg-gray4); color: var(--col-gray4); }
.gray_round { border-radius: 6.25rem; background-color: var(--bg-gray6); color: var(--col-gray3); font-weight: var(--bold-f); padding-inline: 1rem; height: 2.25rem; line-height: 2.25rem; font-size: var(--body2-f); }
.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; }

.more_btn { display: flex; justify-content: center; }
.more_btn .white_round { display: flex; gap: 0.5rem; align-items: center; }
.more_btn .white_round:after { content: ""; width: 1.25rem; height: 1.25rem; background: url('../images/icons/ic_arrow_down_black.svg') no-repeat center / contain; display: block; }
.more_btn .white_round.active:after { transform: rotate(180deg); }

.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; }

.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; }

.sky_btn_m { display: inline-block; background-color: var(--bg-sky); color: var(--col-white); font-size: var(--body3-f); font-weight: var(--bold-f); padding-inline: .5rem; height: 1.625rem; line-height: 1.625rem; border-radius: .25rem; }
.navy_btn_m { background-color: var(--primary); color: var(--col-white); font-size: var(--body3-f); font-weight: var(--bold-f); padding-inline: .5rem; height: 1.625rem; border-radius: .25rem; }
.gray_btn_m { background-color: var(--bg-gray5); color: var(--col-gray3); font-size: var(--body3-f); font-weight: var(--bold-f); padding-inline: .5rem; height: 1.625rem; border-radius: .25rem; }
.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); }
.red_btn_m { background-color: var(--bor-error); color: var(--col-white); font-size: var(--body3-f); font-weight: var(--bold-f); padding-inline: .5rem; height: 1.625rem; border-radius: .25rem; }

.btn_box { display: flex; gap: .5rem; }
.type_30per *:first-child { width: 10rem; }
.type_30per *:last-child { width: calc(100% - 10.5rem); }
@media screen and (max-width: 480px) {
    html { font-size: 14px; }
    .type_30per *:first-child { width: 30%; }
    .type_30per *:last-child { width: 70%; }
}

.fix_btn { position: fixed; left: 0; bottom: 0; right: 0; background-color: var(--bg-white); padding: 1.25rem; box-shadow: var(--box-shadow); }
.fix_btn .btn_box { width: 30rem; }
.fix_btn .max_btnBox { margin: 0 auto; display: flex; align-items: center; justify-content: space-between; overflow: auto; max-width: 60rem; }
.pay_checkTxt { color: var(--col-gray2); }

.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); }
.ellipsis { cursor: pointer; }
.ellipsis_tip { position: absolute; background-color: var(--bg-navy); color: var(--col-white); font-size: var(--caption-f); border-radius: .5rem; padding: .5rem .75rem; max-width: 300px; }

/* header */
header { position: relative; display: flex; align-items: center; justify-content: space-between; margin-block: 2.5rem; }
header img { width: 6.25rem; }
.under_txt { text-decoration: underline; color: var(--col-gray4); font-size: var(--body2-f); }
.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 */
input:disabled { background-color: var(--bg-gray5); }
.inp_tit { display: flex; gap: .25rem; font-size: var(--body2-f); color: var(--col-gray4); padding-block: 1.25rem .5rem; font-weight: var(--bold-f); align-items: center; }
.inp_tit span { color: var(--col-gray5); font-weight: 500; }
.total_price .help_txt { padding-top: .25rem; }
.help_txt { display: flex; align-items: center; gap: .25rem; font-size: var(--body1-f); color: var(--col-gray4); }
.ic_help { width: 1.25rem; height: 1.25rem; background: url('../images/icons/ic_help.svg') no-repeat center / 1.25rem; }
.inp_box { position: relative; flex: 1; }
.inp_box input { padding-right: 4.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inp_box input.inp_file { padding-right: 5rem; }
.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); }

.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); }

.chk_sky { 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); }
.chk_inp:checked + .chk_sky { background-image: url('../images/icons/ic_check_sky.svg'); color: var(--col-black); font-weight: var(--bold-f); }

/* 툴팁 */
.tool_tip { position: absolute; right: 1.3rem; bottom: -3.125rem; background-color: var(--dim-black); color: var(--col-white); font-size: var(--caption-f); border-radius: .5rem; padding: .5rem .75rem; z-index: 1; max-width: 20rem; }
.tool_tip:after { content: ""; border-left: .375rem solid transparent; border-right: .375rem solid transparent; border-bottom: .625rem solid var(--dim-black); position: absolute; top: -0.625rem; left: calc(50% - .375rem); }

/* 페이징 */
.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; }

/* 달력 */
.picker_wrap { position: relative; }
.month_box { display: none; position: absolute; left: 0; top: 3.5rem; padding: 1.5rem; background-color: var(--bg-white); border-radius: .5rem; border: 1px solid var(--bor-blackRGB10); box-shadow: var(--box-shadow); width: 19.125rem; }
.month_box.active { display: block; }
.year_header { display: flex; width: fit-content; margin: 0 auto; position: relative; padding-right: 1.75rem; }
.year_header:after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; right: 0; top: calc(50% - .625rem); background: url('../images/icons/ic_arrow_down_black.svg') no-repeat right center / 1.25rem; }
.year_header .current_year { font-size: var(--body1-f); color: var(--col-black); font-weight: var(--bold-f); border-bottom: 1px solid var(--col-black); }
#months { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .875rem; padding-block: 1rem .4375rem; border-top: 1px solid var(--bor-blackRGB10); margin-top: 1.25rem; }
#months button { width: calc(25% - .875rem); height: 3.125rem; color: var(--col-gray3); font-size: var(--body1-f); font-weight: var(--bold-f); border-radius: 100%; border: 1px solid transparent; transition: 0.3s; }
#months button:not(.disabled):hover,
#months button.active { background-color: var(--bg-active); border-color: var(--bor-sky); color: var(--bg-navy); }
#months button.disabled { color: var(--col-gray5); pointer-events: none; }

/* 일별 */
.ui-widget.ui-widget-content { font-family: 'Pretendard'; width: 19.125rem; margin-top: .5rem; border-radius: .5rem; box-shadow: var(--box-shadow); border-color: var(--bor-blackRGB10); padding: 1.5rem; }
.ui-widget-header { background-color: transparent; border: none; border-bottom: 1px solid var(--bor-blackRGB10); }
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next { display: none; }
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { font-family: 'Pretendard'; width: auto; font-size: var(--body1-f); font-weight: var(--bold-f); text-align: center; cursor: pointer; border-bottom: 1px solid var(--col-black); }
.year_arrow { position: relative; border-bottom: 1px solid var(--col-black); margin-right: 3rem; }
.month-wrapper { position: relative; margin-right: 1.75rem; }
.year_arrow:after,
.month-wrapper:after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; right: -1.75rem; top: calc(50% - .625rem); background: url('../images/icons/ic_arrow_down_black.svg') no-repeat right center / 1.25rem; }
.ui-datepicker .ui-datepicker-title { display: flex; align-items: center; justify-content: center; line-height: normal; margin-bottom: 1.25rem; }
.ui-datepicker .ui-datepicker-title select { margin: 0; }
.year-wrapper { display: flex; }

.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td * { width: 2.125rem; height: 2.125rem; line-height: 2.125rem; padding: 0; }
.ui-datepicker .ui-datepicker-calendar td * { border: 1px solid transparent; background-color: transparent; text-align: center; color: var(--col-gray3); font-weight: var(--bold-f); border-radius: 100%; transition: 0.3s; }
.ui-datepicker-calendar td:first-child * { color: var(--col-error); }
.ui-widget-content .ui-state-disabled { opacity: 1; }
.ui-widget-content .ui-datepicker-calendar .ui-state-disabled * { color: var(--col-gray5); }
.ui-datepicker .ui-datepicker-calendar td *:hover,
.ui-widget-content .ui-datepicker-calendar .ui-state-active { color: var(--bg-navy); border-color: var(--bg-sky); background-color: var(--bg-active); }

/* 팝업 */
.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: var(--dim-black); 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: flex; align-items: center; justify-content: center; gap: .25rem; font-size: var(--h3-f); font-weight: var(--bold-f); }
.pop_cont .pop_txt { color: var(--col-gray3); text-align: center; padding-top: .75rem; }
.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; }
.pop_cont .pop_price { display: block; font-size: var(--h3-f); padding-top: .5rem; color: var(--col-gray3); text-align: center; font-weight: var(--bold-f); }
.popup .inp_tit { padding-top: 1rem; }

/* 공지사항 이미지 팝업 */
.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); }

/* 이용약관 팝업 */
.pop_cont.term_pop { max-width: 30rem; }
.term_pop .tit { display: block; padding-block: .5rem 1rem; border-bottom: 1px solid var(--bor-blackRGB10); font-size: var(--h3-f); margin-bottom: 1rem; }
.term_pop .terms_box { color: var(--col-gray3); font-size: var(--body1-f); max-height: 18.75rem; overflow: auto; padding-bottom: 1.25rem; }
.term_pop:after { content: ""; position: absolute; bottom: 7.25rem; left: 0; right: 0; height: 3.125rem; background-image: linear-gradient(to top, #fff, transparent); }
.term_pop .terms_box strong { display: block; padding-bottom: .5rem; }
.term_pop .terms_box pre { padding-bottom: 1.25rem; color: var(--col-gray3); }
.term_pop .navy_btn { height: 3.75rem; line-height: 3.75rem; max-width: 20rem; margin: 0 auto; }
.terms_box table { width: 100%; border-collapse: collapse; border-right: 1px solid #F2F4F6; border-bottom: 1px solid #F2F4F6; margin-bottom: 2.5rem; }
.terms_box table th,
.terms_box table td { padding: .75rem 1rem; color: #63656A; font-size: .8125rem; }
.terms_box table th { background-color: var(--bg-gray5); }
.terms_box table td { text-align: center; line-height: 1.5; border-left: 1px solid #F2F4F6; border-top: 1px solid #F2F4F6; }

.loading_wrap { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; }
.loading_wrap.active { transition: 1s; opacity: 1; }
.loading { width: 7.5rem; }
.loading img { display: block; width: 3.75rem; margin: 0 auto 1rem; }
.loading .spinner { height: .25rem; background-color: #E0E2E4; border-radius: 8.3125rem; position: relative; overflow: hidden; }
.loading .spinner div { background-color: var(--bg-gray3); width: 1.25rem; height: 100%; border-radius: 8.3125rem; position: absolute; animation: loading 1.5s linear infinite; }
@keyframes loading {
    0% { left: -20%; }
    100% { left: 100%; }
}

/* 로그인 */
.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); }

/* 주문 입력 */
.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; padding-top: .625rem; font-size: var(--h1-f); }
.top_tit p { padding-top: .5rem; font-size: var(--body2-f); color: var(--col-gray3); }
.top_tit .col_blue { text-decoration: underline; }
.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); font-weight: var(--bold-f); }
.info_tit a,
.info_tit button,
.info_tit p { font-size: var(--body2-f); color: var(--col-gray4); font-weight: 500; }

.pill_tit { display: flex; align-items: baseline; justify-content: space-between; }
.list_reset { display: none; text-decoration: underline; color: var(--col-gray4); font-size: var(--body2-f); }
.list_reset.active { display: block; }
.select_btn { display: flex; align-items: center; gap: .5rem; }
.select_btn button { width: 100%; height: 3.25rem; border-radius: .5rem; border: 1px solid var(--bor-blackRGB10); font-size: var(--body2-f); color: var(--col-gray3); font-weight: var(--bold-f); transition: 0.3s; }
.select_btn button.active { background-color: var(--bg-active); border-color: var(--bor-sky); color: var(--primary); }
.tab_panel { display: none; margin-top: 1.25rem; }
.tab_panel.active { display: block; }
.gray_box { background-color: var(--bg-gray6); padding: 1.25rem; border-radius: 1.25rem; }

.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-left: 1rem; text-align: left; font-size: var(--body2-f); font-weight: var(--bold-f); color: var(--col-gray2); }
.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.55rem; 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); }
.tab_panel + .gray_box { margin-top: 20px; }

.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_red) > 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; }
.total_price .help_txt strong { font-size: var(--h2-f); color: var(--primary); margin-right: .25rem; }
.price_info { font-size: var(--body2-f); color: var(--col-gray5); padding-top: .5rem; }

.empty_list { padding-block: 5rem; text-align: center; color: var(--col-gray4); font-size: var(--body1-f); }
.pill_list { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1rem; justify-content: left; }
.pill_list li { padding: 1rem; background-color: var(--bg-white); border: 1px solid var(--bor-blackRGB10); border-radius: .5rem; width: calc(33.33% - .3331rem); text-align: center; cursor: pointer; transition: 0.3s; }
.pill_list li:hover { background-color: var(--bg-active); border-color: var(--bor-sky); }
.pill_list li:hover *:last-child,
.pill_list li:hover * { color: var(--primary); }
.pill_list li strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--col-gray2); font-size: var(--body2-f); padding-bottom: .25rem; font-weight: var(--bold-f); }
.pill_list li span { display: block; font-size: var(--body3-f); color: var(--col-gray3); font-weight: var(--bold-f); }
.pill_list li span:last-child { color: var(--col-gray4); font-weight: 500; }

.pill_list.w_half li { width: calc(50% - .25rem); }
.product_tit { display: flex; padding-bottom: 1rem; align-items: center; justify-content: space-between; }
.product_tit { color: var(--col-gray4); }
.product_box table { table-layout: fixed; color: var(--col-gray2); }
.product_box th { padding-bottom: .75rem; font-size: var(--body2-f); color: var(--col-gray3); font-weight: 500; }
.product_box th:first-child { text-align: left; }
.product_box td { text-align: center; }
.product_box td input { text-align: center; padding: 0; width: 2.6875rem; color: var(--col-gray2); }
.product_box:not(.single) tr ~ tr td { padding-top: .25rem; }
.product_box.single tr ~ tr td { padding-top: 1rem; }
.product_box:not([style*="display: none"]) ~ .product_box.single { border-top: 1px solid var(--bor-blackRGB10); padding-top: 1.25rem; margin-top: 1.25rem; }

.pill_name { display: flex; align-items: center; gap: .25rem; width: 100%; }
.pill_name button { width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_delite_round_dim60.svg') no-repeat center / contain; }
.pill_name p { width: calc(100% - 1.75rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; padding-top: .125rem; }

.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; }

/* 주문 정보 입력 완료 */
.finish_tit { text-align: center; }
.finish_tit strong.save,
.finish_tit strong:not(.no_img) { background: url('../images/icons/ic_check_round_on.svg') no-repeat center top 2.5rem / 4rem; padding-top: 8rem; }
.finish_tit strong { display: block; padding-bottom: 1.5rem; font-size: var(--display1-f); }
.finish_tit p { padding-bottom: 5rem; font-size: var(--h1-f); }
.finish_box { padding: 2rem; 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; }
.finish_tit strong.save { background-image: url('../images/icons/ic_save.svg'); }
.missing_alert { padding: 1.25rem 1.25rem 1.25rem 3.25rem; background: url('../images/icons/ic_exclam_round.svg') no-repeat 1.25rem center / 1.5rem #FFEFF0; border-radius: 1rem; font-size: var(--h3-f); color: var(--col-error); font-weight: var(--bold-f); }
.missing_alert ~ .missing_alert { margin-top: .5rem; }
.missing_alert:not([style*="display: none"]) ~ .finish_box { margin-top: 1.25rem; border: 2px solid var(--bor-error); }

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

/* 3차 버전 적용 전 css */
/* .date_box { display: flex; align-items: center; gap: .5rem; padding-block: 2.5rem 1.25rem; }
.date_box span { font-size: var(--body2-f); color: var(--col-gray5); } */

.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:not(.empty_list) { font-size: var(--body2-f); text-align: center; color: var(--col-gray2); height: 3.6875rem; }
.history_table td.col_red { color: var(--col-error); }
.modify_btn { display: block; width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_pencil.svg') no-repeat center / 1.5rem; margin: 0 auto; }
.history_table td.btn_cell { font-size: 0; }
.history_table td.btn_cell * ~ * { margin-left: .5rem; }
.history_payment { padding: 3.5rem 2.5rem 0; margin-top: 2.5rem; border-top: .5rem solid var(--bor-blackRGB5); }
.history_table:not(.fixed_cell) .empty_list { height: 34.25rem; background-color: #fff; }
.history_table.txt_left02 th:nth-child(2),
.history_table.txt_left02 td:nth-child(2){ text-align: left; }
.history_table .underline { cursor: pointer; }

.state_red { padding: .25rem .5rem; border-radius: 6.25rem; background-color: var(--bg-error); font-size: var(--caption-f); font-weight: var(--bold-f); color: var(--col-error); }
.state_green { padding: .25rem .5rem; border-radius: 6.25rem; background-color: #E6FAF1; font-size: var(--caption-f); font-weight: var(--bold-f); color: #0AA464; }
.state_blue { padding: .25rem .5rem; border-radius: 6.25rem; background-color: var(--bg-active); font-size: var(--caption-f); font-weight: var(--bold-f); color: var(--primary); }
.state_gray { padding: .25rem .5rem; border-radius: 6.25rem; background-color: var(--bg-gray5); font-size: var(--caption-f); font-weight: var(--bold-f); color: var(--col-gray3); }

.state_box { display: flex; align-items: center; gap: .75rem; border-top: 1px solid var(--bor-blackRGB10); padding-block: 1.25rem; }
.state_filter { display: flex; gap: .25rem; }
.state_filter button { padding-inline: .75rem; height: 2.0625rem; line-height: 2.0625rem; border-radius: .25rem; border: 1px solid var(--bor-blackRGB10); font-size: var(--caption-f); color: var(--col-gray3); font-weight: var(--bold-f); transition: 0.3s; }
.state_filter button.active { border-color: var(--bor-sky); color: var(--bg-navy); background-color: var(--bg-active); }
.reset_btn { width: 2.25rem; height: 2.25rem; background: url('../images/icons/ic_flip_gray.svg') no-repeat center / contain; pointer-events: none; }
.reset_btn.active { background-image: url('../images/icons/ic_flip.svg'); pointer-events: visible; }

.detail_conbox .tg_panel { display: none; padding: 1.75rem 2rem 1.5rem 5rem; background: url('../images/icons/ic_enter.svg') no-repeat left 2.5rem top 1.25rem / 1.5rem var(--bg-gray6); border-bottom: 1px solid var(--bor-blackRGB5); }
.history_table .detail_conbox td { padding: 0; height: auto; border: none; }
.detail_conbox .txt_box { display: flex; text-align: left; }
.detail_conbox .txt_box ~ .txt_box { padding-top: .5rem; }
.detail_conbox .txt_box span { width: 7.5rem; color: var(--col-gray2); }
.detail_conbox .txt_box p { color: var(--col-gray3); max-width: calc(100% - 7.5rem); }

.hover_table tr:not(.detail_conbox) { transition: 0.3s; cursor: pointer; }
.hover_table tr:not(.detail_conbox):hover { background-color: rgba(84, 194, 240, 0.10); }

/* 가입 완료 */
.choice_box { width: 100%; padding-inline: 1.25rem; }
.choice_box .top_logo img { display: block; margin: 0 auto; max-width: 10rem; }
.finish_tit strong.no_img { padding-top: 5rem; }
.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); }
.pop_tip { display: none; position: absolute; top: 50%; transform: translateY(-50%); left: calc(50% + 17.5rem); background-color: var(--bg-white); padding: 1.25rem; border-radius: .5rem; width: 17.5rem; }
.pop_tip strong { display: block; color: var(--col-gray2); font-size: var(--body2-f); padding-bottom: 1rem; border-bottom: 1px solid var(--bor-blackRGB10); }
.pop_tip p { padding-block: 1rem;color: var(--col-gray3); font-size: var(--body2-f); }

/* 계정 관리 */
.set_tab { display: flex; align-items: center; border-left: 1px solid var(--bor-blackRGB10); border-right: 1px solid var(--bor-blackRGB10); height: 2.75rem; margin-bottom: 1.25rem; }
.set_tab button { flex: 1; height: 100%; font-size: var(--body2-f); color: var(--col-gray2); font-weight: var(--bold-f); border-bottom: 1px solid var(--bor-blackRGB10); background-color: var(--bg-gray6); }
.set_tab button ~ button { border-left: 1px solid var(--bor-blackRGB10); } 
.set_tab button.active { border-bottom: none; background-color: var(--bg-white); border-top: 2px solid var(--bor-sky); }
.ellipsis_txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixed_cell { table-layout: fixed; }
.set_tabPanel { display: none; }
.set_tabPanel.active { display: block; }

.dim_popup { position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%); width: calc(100% - 2.5rem); max-width: 40rem; display: none; }
.dim_popup .pop_close { display: block; width: 2rem; height: 2rem; background: url(../images/icons/ic_delite_round_dim.svg) no-repeat center / contain; margin-left: auto; }
.dim_box { background-color: var(--dim-black); padding: 1.5rem; border-radius: 1rem; color: var(--col-white); font-size: var(--h2-f); }
.dim_box .title { padding-bottom: 1rem; font-weight: var(--bold-f); }
.dim_box .mail_txt { padding-left: 2rem; background: url('../images/icons/ic_mail.svg') no-repeat left center / 1.5rem; }

/* 영양제 설정 */
.ellipsis_txt_other { display: flex; align-items: center; justify-content: center; }
.ellipsis_txt_other span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: fit-content; }
.ellipsis_txt_other i { flex-shrink: 0; }

.ellipsis_txt_two { text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.bor_topGray8 { border-top: .5rem solid var(--bor-blackRGB5); margin-top: 2.5rem; }
.type_totalTop .total_price { padding-block: 0 1.25rem; margin-block: 0 1rem; border-top: none; border-bottom: 1px solid var(--bor-blackRGB5); }

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

/* 튜토리얼 */
.tutorial_wrap { position: fixed; right: calc(50% - 37.5rem); bottom: 7.5rem; width: 20rem; z-index: 10; max-height: calc(100svh - 13.4375rem); overflow: auto; }
.tutorial_wrap .tutorial_toggle { display: none; margin-top: 1.25rem; }
.tutorial_toggle > li,
.tutorial_wrap > li { border-radius: .5rem; background-color: var(--bg-white); border: 1px solid var(--bor-blackRGB10); padding: 1.25rem; }
.tutorial_toggle > li ~ li,
.tutorial_wrap > li ~ li { margin-top: .5rem; }
.tutorial_btn { display: flex; width: 100%; gap: .25rem; align-items: center; position: relative; font-size: var(--body2-f); font-weight: var(--bold-f); color: var(--col-gray2); }
.tutorial_btn .info_gray { color: var(--col-gray5); font-size: var(--caption-f); font-weight: 500; }
.tutorial_btn:not(.tg_none):after { content: ""; width: 1.25rem; height: 1.25rem; background: url('../images/icons/ic_arrow_down_black.svg') no-repeat center / contain; position: absolute; right: 0; top: calc(50% - .75rem); }
.tutorial_btn.active:after { transform: rotate(-180deg); }
.tutorial_wrap .panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bor-blackRGB10); display: none; }
.tutorial_wrap .panel > p { color: var(--col-gray3); font-size: var(--body2-f); letter-spacing: -0.2px; }
.tutorial_wrap .panel > img { margin-top: 1rem; }
.tutorial_wrap .gray_txtBox { background-color: var(--bg-gray6); padding: .75rem; border-radius: .5rem; margin-top: 1rem; }
.tutorial_wrap .gray_txtBox .col_red { padding-bottom: .5rem; font-size: var(--body2-f); }
.tutorial_wrap .dot_txt { font-size: var(--body3-f); }
.tutorial_wrap .dot_txt li { padding-left: 1.375rem; position: relative; color: var(--col-gray3); }
.tutorial_wrap .dot_txt li ~ li { margin-top: .25rem; }
.tutorial_wrap .dot_txt li::before { content: ""; position: absolute; left: .4375rem; top: .4375rem; width: .25rem; height: .25rem; background-color: var(--bg-gray3); border-radius: 100%; }

.help_toggle { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--bor-blackRGB10); width: fit-content; border-radius: 6.25rem; background-color: var(--bg-white); }
.help_toggle strong { line-height: 1.5rem; font-size: var(--body1-f); color: var(--col-gray3); }
.toggle_switch label { display: block; position: relative; width: 2.75rem; height: 1.5rem; background-color: var(--bg-gray4); border-radius: 4.25rem; transition: 0.3s; backface-visibility: hidden; }
.toggle_switch i { position: absolute; left: .125rem; top: .125rem; width: 1.25rem; height: 1.25rem; border-radius: 100%; background-color: var(--bg-white); transition: 0.3s; backface-visibility: hidden; }
.toggle_switch input:checked + label i { left: 1.375rem; }
.toggle_switch input:checked + label { background-color: var(--bg-sky); }

.tutorial_pop { position: fixed; right: calc(50% - 37.5rem); bottom: 2.5rem; width: 20rem; border-radius: .5rem; background-color: var(--bg-white); border: 1px solid var(--bor-blackRGB10); padding: 1.5rem; box-shadow: var(--box-shadow); display: none; }
.tutorial_pop .tutorial_btn:after { display: none; }
.tutorial_pop .pop_close { position: absolute; right: 0; top: -2.5rem; width: 2rem; height: 2rem; background: url('../images/icons/ic_delite_round_dim.svg') no-repeat center / contain; }
.tutorial_pop .dot_txt { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bor-blackRGB10); font-size: var(--body2-f); }
.tutorial_pop .dot_txt li { padding-left: 1.375rem; position: relative; color: var(--col-gray3); }
.tutorial_pop .dot_txt li ~ li { margin-top: 1rem; }
.tutorial_pop .dot_txt li::before { content: ""; position: absolute; left: .4375rem; top: .4375rem; width: .25rem; height: .25rem; background-color: var(--bg-gray3); border-radius: 100%; }

/* 영양제 상세정보 */
.modal_detail { position: relative; margin-top: -1rem; }
.modal_tit .fix { position: absolute; display: flex; gap: .5rem; top: 1rem; right: 0; } 
.modal_tit .fix img { width: 2.5rem; } 
.modal_tit .img img { height: 4.5rem; } 
.modal_tit .pill_modaltit { padding-bottom: .25rem; color: var(--primary); font-weight: var(--bold-f); font-size: var(--body1-f); } 
.modal_tit .pill_modalinfo { display: flex; gap: .25rem; align-items: center; font-size: var(--body2-f); padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bor-blackRGB10); } 
.modal_tit .pill_modalinfo .num { color: var(--col-black); }
.modal_tit .pill_modalinfo .price { color: var(--col-gray3); }
.modal_tit .pill_modalinfo .tag { border-radius: 6.25rem; padding: .125rem .5rem; color: var(--primary); background-color: rgba(84, 194, 240, 0.3); font-size: var(--caption-f); } 
.detail_txt { padding-bottom: 1.25rem; max-height: 16.5rem; overflow: auto; font-size: var(--body2-f); } 
.detail_txt:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.25rem; height: 2.5rem; background-image: linear-gradient(to bottom, transparent, #fff); z-index: 1; }
.detail_txt .data ~ .data { padding-top: 1.25rem; } 
.detail_txt .data .title { padding-bottom: .25rem; font-weight: var(--bold-f); } 
.detail_txt .data .txt { color: var(--col-gray3); } 
.detail_txt .data li { padding-left: 1.625rem; position: relative; color: var(--col-gray3); }
.detail_txt .data li ~ li { margin-top: .25rem; }
.detail_txt .data li::before { content: ""; border-radius: 50%; position: absolute; top: 0.4rem; left: 0.4rem; width: .25rem; height: .25rem; background-color: #9C9D9F; }
.detail_txt .data table { width: 100%; border-left: 1px solid rgba(35, 36, 38, 0.07); border-right: 1px solid rgba(35, 36, 38, 0.07); font-size: var(--caption-f); }
.detail_txt .data table td, 
.detail_txt .data table th { padding: .5rem 1rem; text-align: left; border-bottom: 1px solid rgba(35, 36, 38, 0.07); color: var(--col-gray3); } 
.detail_txt .data table th { background-color: var(--bg-gray4); font-weight: var(--bold-f); } 
.detail_txt .data table th ~ th { border-left: 1px solid rgba(35, 36, 38, 0.07); }
.detail_txt .data table td:first-child { border-right: 1px solid rgba(35, 36, 38, 0.07); } 
.detail_txt .info_notice { border-radius: .5rem; padding: .75rem; margin-top: 1.25rem; background-color: var(--bg-gray6); font-size: var(--caption-f); color: var(--col-gray4); } 
.detail_txt .info_notice p { padding-left: 1.375rem; position: relative; } 
.detail_txt .info_notice p ~ p { margin-top: .25rem; }
.detail_txt .info_notice p::before { content: ""; border-radius: 50%; position: absolute; top: 0.4rem; left: 0.4rem; width: .25rem; height: .25rem; background-color: #9C9D9F; }

@media screen and (max-width: 1200px) {
    .tutorial_pop,
    .tutorial_wrap { right: 1.25rem; }
}
@media screen and (max-width: 850px) {
    .wrapper { padding-bottom: 12.8125rem; }
    .fix_btn .max_btnBox { flex-direction: column; align-items: baseline; max-width: 30rem; }
    .pay_checkTxt { padding-bottom: .5rem; }
    .fix_btn .btn_box { width: 100%; }
    .tutorial_wrap { bottom: 10.4rem; }
}