@charset "utf-8";
:root { 
    --white: #ffffff;
    --black : #222222;
    --red : #fb5058;
    --yellow : #F9A825;
    --green : #4CAF50;
    --blue : #0D99FF;

    --gray-25: #fcfcfd;
    --gray-50: #F9FAFB;
    --gray-75: #EFEFEF;
    --gray-100: #e0e2e7;
    --gray-200: #c2c6ce;
    --gray-300: #a3a9b6;
    --gray-400: #858d9d;
    --gray-500: #667085;
    --gray-600: #525a6a;
    --gray-700: #3d4350;
    --gray-800: #292d35;
    --gray-900: #14161b;

    --primary-50: #f7f7ff;
    --primary-100: #EFF0F6;
    --primary-200: #C2CDFF;
    --primary-300: #9DABFF;
    --primary-400: #767EFF;
    --primary-500: #5C59FE;
    --primary-600: #4937F4;
    --primary-700: #3F2BD7;
    --primary-800: #3325AE;
    --primary-900: #2E2689;

    --sub-50: rgba(0, 215, 195, 0.10);
    --sub-100: #C6FFF5;
    --sub-200: #8EFFED;
    --sub-300: #4DFBE3;
    --sub-400: #19E8D1;
    --sub-500: #00D7C3;
    --sub-600: #00A499;
    --sub-700: #02837B;
    --sub-800: #086763;
    --sub-900: #003434;
} 



/*! ============================== Design System ============================== */
.blind { display: none; } 
.hide { display: none !important; } 
.ft_one { font-family:'oneMobileTitle'; } 

/*? margin */
.mt0 { margin-top: 0px !important; } 
.mt04 { margin-top: 4px !important; } 
.mt06 { margin-top: 6px !important; } 
.mt08 { margin-top: 8px !important; } 
.mt12 { margin-top: 12px !important; } 
.mt16 { margin-top: 16px !important; } 
.mt20 { margin-top: 20px !important; } 
.mt24 { margin-top: 24px !important; } 
.mt36 { margin-top: 36px !important; } 
.mt48 { margin-top: 48px !important; } 
.mt64 { margin-top: 64px !important; } 
.mb08 { margin-bottom: 8px !important; } 
.mb12 { margin-bottom: 12px !important; } 
.mb16 { margin-bottom: 16px !important; } 
.pt0 { padding-top: 0 !important; } 
.pt08 { padding-top: 8px !important; } 
.pt16 { padding-top: 16px !important; } 
.pt24 { padding-top: 24px !important; } 
.pt36 { padding-top: 36px !important; } 
.pb0 { padding-bottom: 0 !important; } 
.pb08 { padding-bottom: 8px !important; } 
.pb16 { padding-bottom: 16px !important; } 
.pb24 { padding-bottom: 24px !important; } 
.pb36 { padding-bottom: 36px !important; } 

/*? Typography */
.fs_40 { font-size: 40px; line-height: 52px; word-break: keep-all; } 
.fs_36 { font-size: 36px; line-height: 46px; word-break: keep-all; } 
.fs_30 { font-size: 30px; line-height: 40px; word-break: keep-all; } 
.fs_26 { font-size: 26px; line-height: 36px; word-break: keep-all; } 
.fs_24 { font-size: 24px; line-height: 34px; word-break: keep-all; } 
.fs_22 { font-size: 22px; line-height: 30px; word-break: keep-all; } 
.fs_20 { font-size: 20px; line-height: 28px; } 
.fs_18 { font-size: 18px; line-height: 24px; } 
.fs_16 { font-size: 16px; line-height: 22px; } 
.fs_14 { font-size: 14px; line-height: 20px; } 
.fs_13 { font-size: 13px; line-height: 20px; } 
.fw_700 { font-weight: 700 !important; } 
.fw_500 { font-weight: 500 !important; } 
.fw_400 { font-weight: 400 !important; } 
.fc_black { color: var(--black) !important; } 
.fc_white { color: var(--white) !important; } 
.fc_primary { color: var(--primary-500) !important; } 
.fc_red { color: var(--red) !important; } 
.fc_green { color: var(--green) !important; } 
.fc_blue { color: var(--blue) !important; } 
.fc_gray_300 { color: var(--gray-300); } 
.fc_gray_400 { color: var(--gray-400); } 
.fc_gray_500 { color: var(--gray-500); } 
.fc_gray_600 { color: var(--gray-600); } 
.fc_gray_800 { color: var(--gray-800); } 
.fc_gray_900 { color: var(--gray-900); } 
.text_center { text-align: center; } 

.bg_none { background: transparent !important; } 
.bg_gray { background: var(--gray-50) !important; } 
.bg_primary { background: var(--primary-100) !important; } 
.bg_white { background: var(--white) !important; } 

.bd_top { border-top: 6px solid var(--gray-50); } 
.bd_bottom { border-bottom: 6px solid var(--gray-500); } 

.radius_08 { border-radius: 8px; } 
.radius_12 { border-radius: 12px; } 

.fix_btn_padding { position: relative; padding-bottom: 120px; } 

.cont_box { width: 100%; padding: 24px; } 
.cont_top_box { width: 100%; padding: 32px 24px; } 

.flex { display: flex; } 
.flex.row_justify { justify-content: space-between; } 
.flex.col_center { align-items: center; } 

.over_visible { overflow: visible !important; } 
.over_hidden { overflow: hidden !important; } 



/*! ============================== Layout ============================== */
#wrap { position: relative; width: 100%; max-width: 480px; min-width: 360px; height: auto; min-height: 100%; margin: 0 auto; background: var(--white); box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); } 

/*? header */
#header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; min-width: 360px; height: auto; background: var(--white); z-index: 2000; } 
.header_wrap { position: relative; width: 100%; height: 68px; padding: 14px 24px; } 
.header_wrap #logo { width: 156px; height: 40px; display: inline-block; overflow: hidden; } 
.header_wrap #logo a { width: 100%; height: 100%; background: url(../image/logo.svg) no-repeat left center; background-size: 100%; display: inline-block; overflow: hidden; } 
.header_wrap .page_title { font-size: 16px; font-weight: 700; color: var(--black); line-height: 40px; text-align: center; padding: 0 40px; } 
.header_wrap .btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; display: inline-block; } 
.header_wrap .btn_back { left: 16px; background-image: url(../image/btn/btn_back.svg); } 
.header_wrap .btn_menu { right: 16px; background-image: url(../image/btn/btn_menu.svg); } 
.header_wrap .btn_notify { right: 60px; background-image: url(../image/btn/btn_notify.svg); } 
.header_wrap .btn_exit { right: 16px; background-image: url(../image/btn/btn_exit.svg); } 
.header_wrap .btn_cart { right: 16px; background-image: url(../image/btn/btn_cart.svg); } 
.header_wrap .btn_cart .count { position: absolute; right: 0; top: 0; width: 16px; height: 16px; font-size: 12px; font-weight: 700; color: var(--white); line-height: 16px; white-space: nowrap; text-align: center; text-indent: 0; background: var(--red); border-radius: 50%; display: inline-block; } 
.header_wrap .btn_cart + .cart_tooltip_box { display: none; position: absolute; right: 8px; top: 60px; width: auto; font-size: 14px; font-weight: 500; color: var(--white); line-height: 20px; padding: 8px 24px; background: rgba(0, 0, 0, 0.7); border-radius: 12px; } 
.header_wrap .btn_cart + .cart_tooltip_box::after { position: absolute; right: 16px; top: -18px; width: 20px; height: 16px; border: 10px solid transparent; border-bottom: 8px solid rgba(0, 0, 0, 0.7); box-sizing: border-box; content: ''; display: block; } 

/*? gnb */
#gnb { display: none; position: absolute; left: 0; top: 64px; width: 100%; padding: 8px 24px 24px; background: var(--white); overflow: hidden; z-index: 2000; } 
#gnb nav { position: relative; } 
#gnb .depth01 > li { position: relative; width: 100%; padding: 12px 0; overflow: hidden; } 
#gnb .depth01 > li .snav_tit span,
#gnb .depth01 > li > a { position: relative; display: inline-block; font-size: 16px; font-weight: 500; color: var(--gray-900); line-height: 30px; transition: all 0.1s ease; } 
#gnb .depth01 > li.on .snav_tit span,
#gnb .depth01 > li > a.on,
#gnb .depth01 > li > a:hover { color: var(--primary-500); } 
#gnb .depth01 > li .snav_tit span::after,
#gnb .depth01 > li > a::after { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--primary-500); content: ''; display: block; opacity: 0; transition: all 0.1s ease; } 
#gnb .depth01 > li.on .snav_tit span::after,
#gnb .depth01 > li > a.on::after,
#gnb .depth01 > li > a:hover::after { opacity: 1; } 
#gnb .depth01 > li .hot { width: 30px; height: 18px; font-size: 10px; font-weight: 700; color: var(--primary-500); line-height: 17px; text-align: center; background: var(--primary-100); border-radius: 4px; display: inline-block; vertical-align: 1px; margin-left: 6px; } 
#gnb .depth01 > li .new { width: 30px; height: 18px; font-size: 10px; font-weight: 700; color: #ff9534; line-height: 17px; text-align: center; background: #fff7da; border-radius: 4px; display: inline-block; vertical-align: 1px; margin-left: 6px; } 
#gnb .depth01 > li .point::after { width: calc(100% - 36px); } 
#gnb .snav { border-bottom: 1px solid var(--gray-100); } 
#gnb .snav .snav_tit { position: relative; cursor: pointer; } 
#gnb .snav .snav_tit::after { position: absolute; right: 0; top: 3px; width: 24px; height: 24px; background: url(../image/icon/icon_arrow_down_black.svg) no-repeat center center; background-size: contain; content: ''; display: block; z-index: 5; transition: all 0.2s ease-in-out; } 
#gnb .snav.on .snav_tit::after { transform: rotate(-180deg); } 
#gnb .depth02 { display: none; padding: 24px 0 12px; } 
#gnb .depth02 > li { margin-bottom: 16px; } 
#gnb .depth02 > li:last-of-type { margin-bottom: 0; } 
#gnb .depth02 > li a { display: block; font-size: 14px; font-weight: 500; color: var(--gray-800); } 
#gnb .depth02 > li a:hover { color: var(--black); } 
.dim { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; } 

/*? container */
#container { min-height: 400px; padding-top: 68px; } 
#container section { min-height: calc(100vh - 68px); overflow: hidden; } 

/*? footer */
#footer { position: relative; width: 100%; border-top: 1px solid var(--primary-100); overflow: hidden; } 
#footer .footer_wrap { padding: 24px; } 
#footer .footer_wrap .link_box { width: 100%; max-width: 340px; display: flex; align-items: center; justify-content: space-between; } 
#footer .footer_wrap .link_box a { font-size: 14px; font-weight: 700; line-height: 20px; }
#footer .footer_wrap p { margin-top: 24px; } 
#footer .footer_wrap p span { font-size: 14px; font-weight: 400; line-height: 24px; display: block; } 
#footer.type_payment { background: var(--gray-50); border-top: 1px solid var(--gray-50); } 
#footer.type_payment h3 { font-size: 14px; font-weight: 400; color: var(--gray-400); } 
#footer.type_payment ul li { position: relative; font-size: 12px; font-weight: 400; color: var(--gray-400); line-height: 18px; word-break: keep-all; padding-left: 12px; margin-bottom: 6px; } 
#footer.type_payment ul li:last-of-type { margin-bottom: 0; } 
#footer.type_payment ul li::before { position: absolute; left: 3px; top: 7px; width: 3px; height: 3px; background: var(--gray-300); border-radius: 50%; content: ''; display: block; } 

.btn_top { display: none; position: fixed; right: 28px; bottom: 110px; width: 48px; height: 48px; background: url(../image/btn/btn_top.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; z-index: 1000; }


/*! ============================== Common ============================== */
/** ─────────────── Btn ─────────────── */
.btn_sub_box { width: 100%; text-align: center; } 
.btn_sub_box .btn { width: 100%; font-size: 14px; font-weight: 700; line-height: 24px; padding: 12px 24px; border-radius: 8px; display: block; } 
.btn_sub_box .btn.type_border { color: var(--primary-500); background: var(--white); border: 1px solid var(--primary-500); } 
.btn_sub_box .btn.type_border.type_black { color: var(--gray-700); border: 1px solid var(--gray-700); } 
.btn_sub_box .btn.type_border.type_gray { font-weight: 500; color: var(--gray-500); border: 1px solid var(--gray-100); } 
.btn_sub_box .btn.sm { width: auto; padding: 8px 24px; display: inline-block; }

.btn_main_box { position: relative; width: 100%; text-align: center; } 
.btn_main_box.type_double { display: flex; } 
.btn_main_box .text { font-size: 13px; font-weight: 500; color: var(--gray-700); text-align: center; margin-bottom: 16px; } 
.btn_main_box .btn { width: 100%; font-size: 18px; font-weight: 700; color: var(--white); line-height: 24px; padding: 20px 24px; background: var(--primary-500); border-radius: 12px; display: block; } 
.btn_main_box .btn_kakao { width: 100%; font-size: 16px; font-weight: 700; color: var(--black); line-height: 24px; padding: 20px 24px; background: #fee500; border-radius: 12px; display: block; } 
.btn_main_box .type_border { color: var(--primary-500); background: var(--white); border: 2px solid var(--primary-500); } 
.btn_main_box .btn:disabled,
.btn_main_box .btn.disabled { color: var(--white); background: var(--gray-200); } 
.btn_main_box.type_fixed { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; min-width: 360px; padding: 24px 24px 32px; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%); z-index: 1000; } 
.btn_main_box .btn_text { font-size: 14px; font-weight: 700; color: var(--gray-300); line-height: 20px; text-decoration: underline; display: inline-block; } 
.btn_main_box.type_double .btn { width: calc(50% - 4px); } 
.btn_main_box.type_double .btn + .btn { margin-left: 8px; } 
.btn_add_cart { width: 36px; height: 36px; text-indent: -9999px; background: url(../image/btn/btn_cart_add.svg) no-repeat center center, var(--white); background-size: 16px; border: 1px solid var(--primary-100); border-radius: 50%; box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.10); display: inline-block; z-index: 5; } 
.btn_add_cart.active { background: url(../image/icon/icon_chkbox_circle_on.svg) no-repeat center center, var(--primary-500); border: 1px solid var(--primary-500); background-size: 36px; } 


/** ─────────────── Input ─────────────── */
.input_list_box ul li { margin-bottom: 12px; } 
.input_list_box ul li:last-of-type { margin-bottom: 0; } 
.input_box { position: relative; width: 100%; height: 56px; z-index: 0; } 
/*? inp_simple */
.inp_simple { width: 100%; height: 56px; font-size: 15px; line-height: 18px; background: var(--white); border: 1px solid var(--primary-100); border-radius: 12px; padding: 18px 16px; transition: all 0.2s linear; } 
.inp_simple::placeholder { color: var(--gray-500); } 
.inp_simple:focus { border: 1px solid var(--primary-500); } 

/*? inp_text */
.input_box .inp_text { position: absolute; left: 16px; bottom: 2px; width: calc(100% - 48px); height: 20px; font-size: 15px; background: transparent; opacity: 0; transition: top linear 0.2s, opacity linear 0.2s; z-index: 1; } 
.input_box .inp_text.valid,
.input_box .inp_text.focus, 
.input_box .inp_text:focus,
.input_box.error .inp_text { top: 28px; opacity: 1; } 
.input_box .inp_text:read-only { top: 28px; opacity: 0.8; } 

/*? inp_text + label */
.input_box .inp_text + label { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 15px; color: var(--gray-500); line-height: 18px; letter-spacing: 0.75px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; padding: 18px 16px; transition: padding-top linear 0.2s, font-size linear 0.2s; } 
.input_box .inp_text.valid + label,
.input_box .inp_text.focus + label,
.input_box .inp_text:focus + label,
.input_box.error .inp_text + label { font-size: 13px; padding-top: 8px; } 
.input_box .inp_text.valid + label { border: 1px solid var(--gray-100); } 
.input_box .inp_text.focus + label, 
.input_box .inp_text:focus + label { color: var(--gray-500); border: 1px solid var(--primary-500); } 
.input_box.error .inp_text + label { color: var(--red); border: 1px solid var(--red); } 
.input_box .inp_text:read-only + label { background: var(--white); cursor: auto; } 

/*? type_btn */
.input_box.type_btn .inp_text { padding-right: 100px; } 
.input_box.type_btn .btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 80px; font-size: 13px; color: var(--white); line-height: 40px; padding: 0 8px; background: var(--primary-500); border-radius: 8px; display: inline-block; opacity: 1; z-index: 2; } 
.input_box.type_btn .btn:disabled { background: var(--gray-200); } 

/*? type_unit */
.input_box.type_unit .inp_text { padding-right: 50px; } 
.input_box.type_unit .unit { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 700; color: var(--gray-500); line-height: 24px; display: inline-block; } 

/*? error */
.error_msg_area,
.input_box ~ .inputbox_error_msg,
.all_chk_area .chkbox_error_msg,
.textarea_box ~ .textarea_error_msg,
.input_radio_box ~ .radiobox_error_msg { height: 0px; font-size: 13px; font-weight: 400; line-height: 20px; color: var(--red); padding-left: 8px; margin-top: 0px; overflow: hidden; transition: all 0.5s; } 
.error ~ .error_msg_area,
.error ~ .inputbox_error_msg,
.error .chkbox_error_msg,
.error ~ .textarea_error_msg,
.error ~ .radiobox_error_msg { height: 20px; margin-top: 4px; } 

/*? select_box */
.select_box { position: relative; overflow: hidden; } 
.select_box::after { position: absolute; right: 16px; top: 16px; width: 24px; height: 24px; background: url(../image/icon/icon_arrow_down_black.svg) no-repeat center center; background-size: contain; content: ''; display: block; z-index: 1; } 
.select_box select { width: 100%; height: 56px; font-size: 15px; color: var(--gray-800); line-height: 18px; letter-spacing: 0.75px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; padding: 18px 48px 18px 24px; cursor: pointer; } 

/*? .input_check_box */
.input_check_box input + label { position: relative; font-size: 16px; font-weight: 400; line-height: 24px; padding-left: 32px; display: inline-block; } 
.input_check_box input + label .icon_chkbox { position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: url(../image/icon/icon_chkbox_circle_off.svg) no-repeat center center; background-size: contain; content: ''; display: block; } 
.input_check_box input:checked + label .icon_chkbox { background: url(../image/icon/icon_chkbox_circle_on.svg) no-repeat center center; background-size: contain; } 

/*? .input_radio_box */
.input_radio_box .radio_box { display: inline-block; margin-right: 24px; } 
.input_radio_box .radio_box input[type=radio] { display: none; } 
.input_radio_box .radio_box input[type="radio"] + label { position: relative; font-size: 16px; font-weight: 700; color: var(--gray-200); line-height: 22px; } 
.input_radio_box .radio_box input[type="radio"] + label::before { width: 20px; height: 20px; background: var(--white); border-radius: 50%; border: 2px solid var(--gray-100); box-sizing: border-box; vertical-align: -4px; margin-right: 8px; content: ""; display: inline-block; } 
.input_radio_box .radio_box input[type="radio"]:checked + label { color: var(--primary-500); } 
.input_radio_box .radio_box input[type="radio"]:checked + label::before { border: 5px solid var(--primary-500); } 

/** ─────────────── Popup ─────────────── */
.popup { display: none; position: fixed; left: 0; top: 0; width: 100%; 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: fixed; left: 50%; bottom: 0; min-width: 312px; transform: translateX(-50%); display: flex; flex-direction: column; width: 100%; max-width: 480px; background: var(--white); border-radius: 16px; z-index: 3000; overflow: hidden; } 
.popup .popup_title { font-size: 16px; font-weight: 700; line-height: 48px; } 
.popup .btn_pop_close { position: absolute; right: 24px; top: 12px; width: 24px; height: 24px; background: url(../image/btn/btn_exit.svg) no-repeat center center; background-size: contain; text-indent: -9999px; border-radius: 50%; display: block; z-index: 5; } 
.popup .btn_pop_close.dark { background: url(../image/btn/btn_exit_white.svg) no-repeat center center, rgba(0, 0, 0, 0.6); background-size: 16px; } 
.popup .popup_contents { padding: 0 24px; } 
.popup .popup_inner { max-height: 80vh; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } 
.popup .popup_inner::-webkit-scrollbar { display: none; } 
.popup .popup_inner.type_bar::-webkit-scrollbar { display: block; width: 4px; } 
.popup .popup_inner.type_bar::-webkit-scrollbar-thumb { background: var(--primary-500); border-radius: 2px; } 
.popup .popup_inner.type_bar::-webkit-scrollbar-track { background: var(--white); border-radius: 2px; } 
.popup .message_box { padding: 16px 0 24px; } 
.popup .message_box.center { text-align: center; } 
.popup .btn_pop_box { display: flex; align-items: center; justify-content: space-between; } 
.popup .btn_pop_box.type_fixed { position: sticky; bottom: 0; width: 100%; max-width: 480px; padding: 24px 24px 32px; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%); z-index: 1000; } 
.popup .btn_pop_box .btn { width: 100%; height: 56px; font-size: 16px; font-weight: 700; color: var(--white); line-height: 54px; text-align: center; background: var(--primary-500); border: 1px solid var(--primary-500); border-radius: 12px; box-sizing: border-box; } 
.popup .btn_pop_box .btn.wid60 { width: calc(62% - 8px); } 
.popup .btn_pop_box .btn.wid40 { width: 38%; } 
.popup .btn_pop_box .btn.wid50 { width: calc(50% - 4px); } 
.popup .btn_pop_box .btn.type_border { color: var(--primary-500); background: var(--white); } 
.popup .btn_pop_box .btn:disabled,
.popup .btn_pop_box .btn.disabled { color: var(--white); background: var(--gray-200); border: 1px solid var(--gray-200); pointer-events: none; } 
.popup .out_link_box { position: absolute; bottom: -32px; width: 100%; font-weight: 700; color: var(--white); text-align: center; } 
.popup .out_link_box b { color: var(--white); text-decoration: underline; } 
.popup .popup_head { position: relative; width: 100%; height: 48px; text-align: center; } 
.popup .popup_head.left { height: auto; padding: 32px 24px 24px; text-align: left; }
.popup .popup_head.left .btn_pop_close { top: 32px; }
/*? TYPE - center */
#popup_confirm .popup_wrap,
#popup_alert .popup_wrap,
.popup .popup_wrap.type_center { top: 50%; transform: translateX(-50%) translateY(-50%); width: calc(100% - 48px); max-width: 432px; height: fit-content; } 

/*? TYPE - toast */
.popup .popup_wrap.type_toast { bottom: -30%; height: fit-content; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: bottom 0.5s ease-in-out; } 
.popup.on .popup_wrap.type_toast { bottom: 0; } 

/*? TYPE - full */
.popup .popup_wrap.type_full { top: 0; width: 100%; height: 100vh; border-radius: 0; } 
.popup .popup_wrap.type_full .popup_head { position: sticky; top: 0; height: 68px; padding: 14px 24px; } 
.popup .popup_wrap.type_full .btn_back { position: absolute; top: 14px; left: 16px; width: 40px; height: 40px; background: url(../image/btn/btn_back.svg) no-repeat center center; text-indent: -9999px; display: inline-block; } 
.popup .popup_wrap.type_full .popup_title { line-height: 40px; } 

/*? TYPE - terms */
#popup .popup_terms .terms_title { font-size: 20px; font-weight: 700; letter-spacing: 1px; text-align: center; margin-bottom: 36px; } 
#popup .popup_terms .popup_inner { max-height: 45vh; } 
#popup .agree_text > * { margin: 12px 0; }
.agree_text > * { margin: 20px 0; }

/*? popup_confirm */
#popup_confirm .popup_wrap .text_box { padding: 16px 0 24px; } 
#popup_confirm .popup_wrap .text_box.center { text-align: center; } 
#popup_confirm .popup_wrap .text_box ul { width: 100%; padding: 8px 20px; background: var(--primary-100); border-radius: 12px; } 
#popup_confirm .popup_wrap .text_box ul li { position: relative; font-size: 14px; font-weight: 400; color: var(--black); line-height: 22px; padding: 4px 0 4px 24px; } 
#popup_confirm .popup_wrap .text_box ul li::before { position: absolute; left: 0; top: 5px; width: 20px; height: 20px; background: url(../image/icon/icon_check_primary.svg) no-repeat center left; background-size: contain; content: ''; display: block; } 

/*? #popup_alert */
#popup_alert .popup_wrap { text-align: center; } 
#popup_alert .popup_wrap i { width: 40px; height: 40px; display: block; margin: 0 auto 6px; } 
#popup_alert .popup_wrap i.icon_warning { background: url(../image/icon/icon_info_black.svg) no-repeat center center; background-size: 32px; } 
#popup_alert .popup_wrap i.icon_complete { background: url(../image/icon/icon_complete_black.svg) no-repeat center center; background-size: 32px; } 
#popup_alert .popup_wrap i.icon_cart { background: url(../image/btn/btn_cart.svg) no-repeat center center; background-size: 30px; } 

/*? #popup_nuts */
#popup_nuts .popup_wrap .btn_pop_close { top: 16px; right: 16px; } 
#popup_nuts .thumbnail_box { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 152px; overflow: hidden; } 
#popup_nuts .thumbnail_box img { display: inline-block; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); max-width: none; } 
#popup_nuts .detail_box { height: 320px; overflow-y: auto; } 
#popup_nuts .detail_box::-webkit-scrollbar { display: block; width: 6px; } 
#popup_nuts .detail_box::-webkit-scrollbar-thumb { background: var(--primary-400); border-radius: 4px; } 
#popup_nuts .detail_box::-webkit-scrollbar-track { background: var(--primary-100); border-radius: 4px; } 
#popup_nuts .detail_box .tag_list { display: flex; justify-content: flex-start; flex-wrap: wrap; }
#popup_nuts .detail_box .tag_list li { display: inline-block; padding: 4px 8px; background-color: #f3f3f3; border-radius: 28px; font-weight: normal; font-size: 13px; margin-right: 8px; white-space: nowrap; margin-bottom: 4px; }
#popup_nuts .detail_box .inner_text_area { margin-bottom: 32px; }
#popup_nuts .detail_box .inner_text_area.top { margin-bottom: 40px; margin-top: 4px; }
#popup_nuts .detail_box .inner_text_area.top .title { font-weight: bold; font-size: 24px; line-height: 24px; display: block; }
#popup_nuts .detail_box .inner_text_area.top .sub_text { margin-top: 6px; font-weight: normal; font-size: 14px; line-height: 20px; display: block; }
#popup_nuts .detail_box .inner_text_area.top .vol_text_area { display: block; margin-top: 2px; }
#popup_nuts .detail_box .inner_text_area.top .vol_text { font-weight: normal; font-size: 13px; line-height: 22px; color: #888888; display: block; width: 100%; }
#popup_nuts .detail_box .inner_text_area.top .price_area { display: block; display: block; text-align: right; width: 100%; margin-top: 12px; }
#popup_nuts .detail_box .inner_text_area.top .price_area .date { font-weight: normal; font-size: 14px; line-height: 24px; color: #888888; display: inline-block; margin-right: 16px; }
#popup_nuts .detail_box .inner_text_area.top .price_area .price { font-weight: bold; font-size: 20px; line-height: 24px; color: #222222; }
#popup_nuts .detail_box .inner_text_area.top .price_area .price .cost { font-weight: 700; font-size: 14px; line-height: 24px; color: #888888; display: inline-block; margin-right: 8px; text-decoration: line-through; }
#popup_nuts .detail_box .pick_text_area .top_tag { padding: 0 8px; background-color: #f3f3f3; border-radius: 28px; height: 24px; line-height: 24px; font-weight: normal; font-size: 13px; display: inline-block; }
#popup_nuts .detail_box .pick_text_area .title { font-weight: bold; font-size: 18px; line-height: 26px; margin-top: 8px; display: block; }
#popup_nuts .detail_box .pick_text_area .main_text { margin-top: 16px; font-weight: normal; font-size: 14px; line-height: 20px; }
#popup_nuts .detail_box .nutrient_info_area { margin-top: 56px; }
#popup_nuts .detail_box .nutrient_info_area .title { display: block; font-weight: bold; font-size: 18px; line-height: 22px; color: #363636; }
#popup_nuts .detail_box .nutrient_info_area .intake { display: block; margin-top: 4px; font-weight: normal; font-size: 12px; line-height: 22px; }
#popup_nuts .detail_box .nutrient_info_area ul { margin-top: 8px; }
#popup_nuts .detail_box .nutrient_info_area .table_title { border-top: 1px solid #f3f3f3; border-bottom: 2px solid #f3f3f3; }
#popup_nuts .detail_box .nutrient_info_area li { display: flex; justify-content: space-between; border-bottom: 1px solid #f3f3f3; }
#popup_nuts .detail_box .nutrient_info_area li strong, 
#popup_nuts .detail_box .nutrient_info_area li span { font-weight: normal; font-size: 13px; line-height: 22px; color: #363636; }
#popup_nuts .detail_box .nutrient_info_area .table_sub_text { margin-top: 8px; font-weight: normal; font-size: 12px; line-height: 22px; }
#popup_nuts .detail_box .inner_text_area.footer { margin-bottom: 0; }
#popup_nuts .detail_box .inner_text_area.footer .logo_list { display: flex; justify-content: flex-start; margin-top: 8px; }
#popup_nuts .detail_box .inner_text_area.footer .logo_list li { margin-right: 4px; }
#popup_nuts .detail_box .inner_text_area.footer .logo_list li img { width: 32px; }
#popup_nuts .detail_box .inner_text_area.footer p { margin-top: 32px; font-weight: normal; font-size: 12px; line-height: 18px; color: #888888; }


/** ─────────────── Bubble ─────────────── */
@keyframes bubble { 
    0% { transform: scale(0); opacity: 0; } 
    25% { transform: scale(1.07); opacity: 1; } 
    50% { transform: scale(1); } 
    75% { transform: scale(1.03); } 
    100% { transform: scale(1); } 
}
.bubble_wrap { position: absolute; left: 20px; top: -23px; z-index: 5; transform: scale(0); } 
.bubble_wrap.on { animation: bubble 0.5s ease-out 1 forwards; } 
.bubble_wrap .bubble { position: relative; display: flex; align-items: center; padding: 10px 42px 10px 15px; background: var(--sub-400); border-radius: 24px; -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,0.1); box-shadow: 0 0 5px 2px rgba(0,0,0,0.1); } 
.bubble_wrap .bubble::before { position: absolute; left: 27px; bottom: -20px; width: 24px; height: 0px; border: 12px solid transparent; border-top: 9px solid var(--sub-400); box-sizing: border-box; content: ''; display: block; } 
.bubble_wrap .bubble p { font-size: 16px; font-weight: 700; color: var(--black); line-height: 22px; white-space: nowrap; } 
.bubble_wrap .bubble_close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; text-indent: -9999px; background: url(../image/btn/btn_exit.svg) no-repeat center center; background-size: contain; overflow: hidden; } 

.bubble_wrap.bottom { position: absolute; top: auto; bottom: -46px; }
.bubble_wrap.bottom .bubble::before { display: none; }
.bubble_wrap.bottom .bubble::after { position: absolute; left: 120px; top: -20px; width: 24px; height: 0px; border: 12px solid transparent; border-bottom: 9px solid var(--sub-400); box-sizing: border-box; content: ''; display: block; } 

/** ─────────────── tooltip ─────────────── */
@keyframes tooltipMove { 
    0% { transform: translateY(0); } 
    50% { transform: translateY(4px); } 
    100% { transform: translateY(0); } 
}
.tooltip_box { position: absolute; z-index: 5; animation: tooltipMove 1s infinite forwards; } 
.tooltip_box .tooltip_wrap { position: relative; display: flex; align-items: center; padding: 10px 16px; background: #18C69C; border-radius: 8px; -webkit-box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.12); box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.12); } 
.tooltip_box .tooltip_wrap.type_btn { padding-right: 46px; }
.tooltip_box .tooltip_wrap::before { position: absolute; width: 20px; height: 0px; box-sizing: border-box; content: ''; display: block; } 
.tooltip_box .tooltip_wrap p { font-size: 14px; font-weight: 500; color: var(--white); } 
.tooltip_box .tooltip_close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; text-indent: -9999px; background: url(../image/btn/btn_exit_white.svg) no-repeat center center; background-size: contain; overflow: hidden; } 
.tooltip_box.top { bottom: calc(100% + 8px); } 
.tooltip_box.top .tooltip_wrap::before { bottom: -20px; border: 10px solid transparent; border-top: 10px solid #18C69C; } 
.tooltip_box.bottom { top: calc(100% + 4px); } 
.tooltip_box.bottom .tooltip_wrap::before { top: -20px; border: 10px solid transparent; border-bottom: 10px solid #18C69C; } 
.tooltip_box.left { left: 0; } 
.tooltip_box.left .tooltip_wrap::before { left: 20px; } 
.tooltip_box.right { right: 0; } 
.tooltip_box.right .tooltip_wrap::before { right: 20px; } 
.tooltip_box.black .tooltip_wrap { background: rgba(34, 34, 34, 0.7); } 
.tooltip_box.black .tooltip_wrap::before { border-bottom: 10px solid rgba(34, 34, 34, 0.7); }

/** ─────────────── star ─────────────── */
.star_box { display: inline-block; } 
.star_box .star { position: relative; width: 94px; height: 16px; background: url(../image/icon/icon_star_empty.svg) no-repeat left center; background-size: 94px; vertical-align: middle; display: inline-block; } 
.star_box .star::after { position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: url(../image/icon/icon_star_full.svg) no-repeat left center; background-size: 94px; content: ''; display: block; z-index: 1; } 
.star_box .star.large { width: 120px; height: 22px; background-size: 120px; } 
.star_box .star.large::after { background-size: 120px; } 
.star_box .star.type01::after { width: 20%; } 
.star_box .star.type02::after { width: 40%; } 
.star_box .star.type03::after { width: 60%; } 
.star_box .star.type04::after { width: 80%; } 
.star_box .star.type05::after { width: 100%; } 
.star_box .numb { font-size: 14px; font-weight: 500; color: var(--gray-400); line-height: 16px; vertical-align: middle; display: inline-block; margin-left: 4px; } 

/** ─────────────── table ─────────────── */
.table_wrap.scroll { width: 100%; overflow-x: scroll; padding-bottom: 3px; }
.table_wrap.scroll::-webkit-scrollbar { display: block; height: 5px; } 
.table_wrap.scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; } 
.table_wrap.scroll::-webkit-scrollbar-track { background: var(--gray-75); border-radius: 3px; }
.table { width: 100%; border-top: 1px solid var(--gray-100); border-collapse: collapse; }
.table tr { border-bottom: 1px solid var(--gray-100); }
.table tr.bd_none { border-bottom: none;}
.table th, 
.table td { font-size: 13px; font-weight: 400; line-height: 20px; padding: 8px; border-left: 1px solid var(--gray-100); }
.table th { color: var(--gray-800); text-align: left; vertical-align: top; background: var(--gray-50); }
.table td,
.table td * { color: var(--gray-500); }
.table th:first-of-type,
.table td:first-of-type { border-left: none; }
.table td.bd { border-left: 1px solid var(--gray-100); }
.table .unit_box { width: 100%; display: flex; justify-content: space-between; }
.table + .table_sub_text { font-size: 12px; font-weight: 400; line-height: 20px; margin-top: 4px; }
.table.type_simple { border-top: none; }
.table.type_simple th,
.table.type_simple td { background: var(--white); padding: 7px 0 4px; }
.table.type_simple td { text-align: right; }


/*! ============================== Components ============================== */
/** ─────────────── 결과없음 ─────────────── */
.none_data_box { width: 100%; text-align: center; padding: 40px 0; } 
.none_data_box .icon_info { width: 24px; height: 24px; background: url(../image/icon/icon_info_gray.svg) no-repeat center center; background-size: contain; display: block; margin: 0 auto 10px; } 
.none_data_box p { font-size: 16px; font-weight: 500; color: var(--gray-500); line-height: 22px; } 
.none_data_box .btn { font-size: 14px; font-weight: 400; color: var(--gray-400); line-height: 20px; display: inline-block; text-decoration: underline; } 
.none_data_box.review_none {padding: 24px 0 60px 0;}


/** ─────────────── 유선 상담 ─────────────── */
.reservation_waiting { width: 100%; background: #ffffff; } 
.reservation_waiting.type_border { padding: 16px; border: 2px solid var(--primary-100); border-radius: 12px; } 
.reservation_waiting .top_area { display: block; width: 100%; font-size: 14px; font-weight: 700; color: var(--white); line-height: 20px; text-align: center; background: var(--primary-500); padding: 8px; border-radius: 24px; margin-bottom: 12px; } 
.reservation_waiting .top_area i { display: inline-block; width: 20px; height: 20px; background: url(../image/icon/icon_phone.svg) no-repeat center center; vertical-align: -4px; margin-right: 10px; } 
.reservation_waiting .guide_area { width: 100%; text-align: center; padding: 12px; background: var(--white); border-radius: 8px; } 
.reservation_waiting .guide_area.channel_talk::before { width: 38px; height: 38px; background: url(../image/icon/icon_channel_talk.svg) no-repeat center center; background-size: 38px; content: ''; display: block; margin: 0 auto 12px; } 
.reservation_waiting .guide_area p { font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; } 
.reservation_waiting .guide_area .btn { display: block; box-sizing: border-box; padding: 0px 16px; width: 190px; height: 40px; font-size: 15px; font-weight: 700; color: var(--primary-500); line-height: 38px; text-align: center; text-transform: capitalize; background: var(--white); border: 1px solid var(--primary-500); border-radius: 12px; margin: 12px auto; } 
.reservation_waiting .guide_area .btn_popup { display: inline-block; font-size: 13px; font-weight: 500; color: var(--gray-400); line-height: 16px; text-decoration: underline; } 
.reservation_waiting .guide_area .btn_popup i { display: inline-block; width: 16px; height: 16px; background: url(../image/icon/icon_circle_question.svg) no-repeat center center; vertical-align: -3px; margin-right: 4px; } 
/*? popup */
.popup_reservation { padding-top: 0; } 
.popup_reservation h3 { font-size: 18px; font-weight: 700; line-height: 22px; text-align: left; } 
.popup_reservation h3 em { color: var(--primary-500); } 
.popup_reservation .guide_area { width: 100%; font-size: 16px; font-weight: 700; line-height: 22px; text-align: center; padding: 12px; background: #F2F4F6; border-radius: 8px; margin-top: 16px; } 
.popup_reservation .guide_area p.sub { font-size: 14px; font-weight: 400; line-height: 24px; margin-top: 8px; } 
.popup_reservation .guide_area p.sub span { display: inline-block; height: 20px; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center; padding: 0px 6px; border-radius: 10px; } 
.popup_reservation .guide_area p.sub span.red { background: #FFE4E5; color: #E04F4F; } 
.popup_reservation .guide_area p.sub span.blue { background: #D0F7FF; color: #1077AB; } 
.popup_reservation ul { margin-top: 16px; } 
.popup_reservation ul li { font-size: 14px; font-weight: 400; line-height: 22px; padding-left: 30px; background: url(../image/icon/icon_check_primary.svg) no-repeat center left; background-size: 24px; margin-top: 8px; } 


/** ─────────────── 상품목록 ─────────────── */
.product_list_box .item { position: relative; display: block; width: 100%; } 
.product_list_box .item .img_box { position: relative; width: 96px; height: 96px; background: var(--white); border: 1px solid var(--gray-75); border-radius: 8px; overflow: hidden; } 
.product_list_box .item .img_box .bedge { position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 700; color: var(--primary-500); line-height: 20px; padding: 0 6px; background: var(--primary-50); border-radius: 10px; display: inline-block; z-index: 5; } 
.product_list_box .item .img_box .bedge.green { color: var(--sub-500); background: var(--sub-50); } 
.product_list_box .item .img_box img  { height: 100%; object-fit: cover; }
.product_list_box .item .img_box .btn_add_cart { position: absolute; right: 8px; bottom: 8px; } 
.product_list_box .item .info_box .tag { font-size: 13px; font-weight: 400; color: var(--gray-400); line-height: 18px; } 
.product_list_box .item .info_box .name { font-size: 15px; font-weight: 700; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.product_list_box .item .info_box .unit { font-size: 13px; font-weight: 400; color: var(--gray-500); line-height: 18px; } 
.product_list_box .item .info_box .price_box { display: flex; align-items: center; margin-top: 2px; } 
.product_list_box .item .info_box .price_box strong { min-width: fit-content; font-size: 14px; font-weight: 700; color: var(--red); letter-spacing: -0.2px; line-height: 20px; display: inline-block; } 
.product_list_box .item .info_box .price_box .vat { font-size: 8px; font-weight: 500; color: var(--gray-400); line-height: 18px; display: inline-block; margin-left: 4px; } 
.product_list_box .item .info_box .price_box .unit { display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-top: 2px; margin-left: 6px; } 
.product_list_box .item .info_box .effect_box .label { font-size: 13px; font-weight: 400; color: var(--gray-600); line-height: 24px; padding: 0 8px; background: var(--gray-75); border-radius: 12px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; margin: 0 4px 4px 0; } 
.product_list_box .item .btn_delete { position: absolute; right: 0; top: 0; width: 24px; height: 24px; background: url(../../image/btn/btn_delete.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; opacity: 0.55; z-index: 5; } 
.product_list_box .item.sm .img_box { width: 68px; height: 68px; } 
.product_list_box .item.sm .img_box img { width: 200%; max-width: 200%; } 
.product_list_box .item.sm .info_box .price_box { margin-top: 0; } 
.product_list_box.type_basic > li { margin-bottom: 16px; } 
.product_list_box.type_basic > li:last-of-type { margin-bottom: 0; } 
.product_list_box.type_basic .item { display: flex; flex-wrap: wrap; align-items: center; } 
.product_list_box.type_basic .item .info_box { width: calc(100% - 108px); margin-left: 12px; } 
.product_list_box.type_vertical li { width: 152px; min-width: 152px; } 
.product_list_box.type_vertical .item .img_box { width: 100%; height: 80px; } 
.product_list_box.type_vertical .item .info_box { width: 100%; margin-top: 12px; } 
.product_list_box.type_vertical .item .info_box .name { font-size: 14px; } 


/** ─────────────── 에러 ─────────────── */
.error_section .icon_error { width: 46px; height: 46px; background: url(../image/icon/icon_error_primary.svg) no-repeat center center; background-size: contain; display: block; margin: 0 auto; } 


/** ─────────────── 완료 ─────────────── */
.complete_section .icon_fail { background: url(../image/icon/icon_fail.svg) no-repeat right top; background-size: 48px; padding-right: 48px; }
.complete_section .icon_success { background: url(../image/icon/icon_success.svg) no-repeat right top; background-size: 48px; padding-right: 48px; }
.complete_section .detail_info_box { width: 100%; padding: 16px 24px; background: var(--primary-100); border-radius: 12px; margin-top: 24px; } 
.complete_section .detail_info_box li span { display: inline-block; min-width: 56px; font-size: 16px; font-weight: 500; line-height: 26px; color: var(--gray-500); margin-right: 16px; } 
.complete_section .detail_info_box li strong { display: inline-block; font-size: 16px; font-weight: 500; line-height: 26px; }