@charset "utf-8";
:root { 
    --white: #ffffff;
    --black : #000000;
    --red : #F60909;
    --yellow : #F9A825;
    --green : #4CAF50;
    --blue-strong : #1A1E81;
    --blue : #297DFB;
    --blue-light : #E6F0FF;

    --gray-400 : #f8f9fa;
    --gray-500 : #efefef;
    --gray-600 : #dddddd;
    --gray-700 : #aaaaaa;
    --gray-800 : #757575;
    --gray-900 : #222222;

    --primary-100 : #f1fbf5;
    --primary-200 : #aadebe;
    --primary-300 : #7fce9d;
    --primary-400 : #55bd7d;
    --primary : #2aad5c;
    --primary-600 : #228a4a;
    --primary-700 : #196837;
    --primary-800 : #114525; 
    --primary-900 : #082312;
    --primary-gradation : linear-gradient(90deg, #2AAD5C 0%, #E4F6EB 100%); 
} 


/*! ──────────────────── Design System ──────────────────── */
/** margin */
.mt0 { margin-top: 0px !important; } 
.mt04 { margin-top: 4px !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; } 
.mt32 { margin-top: 32px !important; } 
.mt36 { margin-top: 36px !important; } 
.mt40 { margin-top: 40px !important; } 
.mt48 { margin-top: 48px !important; } 
.mt54 { margin-top: 54px !important; } 
.mt64 { margin-top: 64px !important; } 
.mb04 { margin-bottom: 4px !important; } 
.mb08 { margin-bottom: 8px !important; } 
.mb12 { margin-bottom: 12px !important; } 
.mb16 { margin-bottom: 16px !important; } 
.mb24 { margin-bottom: 24px !important; } 
.mb36 { margin-bottom: 36px !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; } 
.pb08 { padding-bottom: 8px !important; } 
.pb16 { padding-bottom: 16px !important; } 
.pb24 { padding-bottom: 24px !important; } 
.pb36 { padding-bottom: 36px !important; } 

/** Typography */
.fs_01 { font-size: 44px !important; font-weight: 700 !important; line-height: 58px !important; letter-spacing: -0.3px; word-break: keep-all; } 
.fs_02 { font-size: 26px !important; font-weight: 700 !important; line-height: 34px !important; letter-spacing: -0.3px; word-break: keep-all; } 
.fs_03 { font-size: 24px !important; font-weight: 700 !important; line-height: 32px !important; letter-spacing: -0.3px; word-break: keep-all; } 
.fs_04 { font-size: 18px !important; line-height: 24px !important; } 
.fs_05 { font-size: 16px !important; line-height: 22px !important; } 
.fs_06 { font-size: 14px !important; line-height: 18px !important; } 
.fs_07 { font-size: 13px !important; line-height: 15px !important; } 
.fw_bold { font-weight: 700 !important; } 
.fw_medium { font-weight: 500 !important; } 
.fw_regular { font-weight: 400 !important; } 
.fc_white { color: var(--white) !important; } 
.fc_primary { color: var(--primary) !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_gray { background: var(--gray-400); } 
.bg_primary { background: var(--primary); } 

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


/* NEW */
.fs_26 { font-size: 26px !important; line-height: 34px !important; letter-spacing: -0.3px; word-break: keep-all; } 
.fs_24 { font-size: 24px !important; line-height: 32px !important; letter-spacing: -0.3px; word-break: keep-all; } 
.fs_18 { font-size: 18px !important; line-height: 24px !important; } 
.fs_16 { font-size: 16px !important; line-height: 22px !important; } 
.fs_14 { font-size: 14px !important; line-height: 18px !important; } 
.fs_13 { font-size: 13px !important; line-height: 15px !important; } 
.fw_400 { font-weight: 400 !important; } 
.fw_500 { font-weight: 500 !important; } 
.fw_700 { font-weight: 700 !important; }

/*! ──────────────────── Design System ──────────────────── */




/*! ──────────────────── 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.05); } 

/** Header */
#header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: auto; background: var(--white); z-index: 2000; } 
.header_wrap { position: relative; width: 100%; height: 64px; padding: 8px; } 
.header_wrap .logo { width: 92px; height: 48px; display: inline-block; overflow: hidden; } 
.header_wrap .logo a { width: 100%; height: 100%; background: url(../img/logo.svg) no-repeat center center; background-size: 80px; text-indent: -9999px; display: inline-block; overflow: hidden; } 
.header_wrap .page_title { font-size: 16px; font-weight: 700; line-height: 48px; text-align: center; padding: 0 48px; } 
.header_wrap .btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; text-indent: -9999px; display: inline-block; } 
.header_wrap .btn_back { left: 8px; background: url(../img/btn/btn_back.svg) no-repeat center center; } 
.header_wrap .btn_menu { right: 8px; background: url(../img/btn/btn_menu.svg) no-repeat center center; } 
.header_wrap .btn_notice { right: 59px; background: url(../img/btn/btn_notice.svg) no-repeat center center; } 
.header_wrap .btn_gift { right: 59px; background: url(../img/btn/btn_gift.svg) no-repeat center center; } 
.header_wrap .btn_exit { right: 8px; background: url(../img/btn/btn_exit.svg) no-repeat center center; } 
.header_wrap .btn_home { right: 8px; background: url(../img/btn/btn_home.svg) no-repeat center center; } 
.header_wrap .btn_cart { right: 8px; background: url(../image/btn/btn_cart.svg) no-repeat center center; } 
.header_wrap .btn_cart .count { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; font-size: 12px; font-weight: 700; color: var(--white); line-height: 16px; letter-spacing: -0.05em; white-space: nowrap; text-align: center; text-indent: 0; background: #ff0000; border-radius: 50%; } 
.header_wrap .cart_tooltip_box { position: absolute; right: 8px; bottom: -32px; width: 238px; height: 40px; font-size: 14px; font-weight: 700; color: var(--white); line-height: 40px; text-align: center; background: var(--color-black-70); border-radius: var(--border-radius); } 
.header_wrap .cart_tooltip_box::after { position: absolute; right: 16px; top: -20px; width: 0; height: 0; border-right: 10px solid transparent; border-top: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid var(--color-black-70); 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); } 
#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); 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); 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-400); } 
#gnb .snav .snav_tit { position: relative; cursor: pointer; } 
#gnb .snav .snav_tit::after { position: absolute; right: 0; top: 3px; width: 20px; height: 20px; background: url(../../image/icon/icon_down_b.svg) no-repeat center center; background-size: contain; content: ''; display: block; z-index: 5; } 
#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.8); z-index: 1000; } 

/** Container */
#container { min-height: 400px; padding-top: 64px; } 
#container section { overflow: hidden; } 

/** Footer */
#footer { position: relative; width: 100%; min-height: 250px; background: #353535; overflow: hidden; } 
.footer_wrap { position: relative; width: 100%; padding: 36px 24px; } 
.footer_wrap .footer_link { width: 100%; max-width: 390px; display: flex; margin-bottom: 16px; } 
.footer_wrap .footer_link li { margin-right: 12px; } 
.footer_wrap .footer_link li a { font-size: 14px; font-weight: 700; color: var(--white); } 
.footer_wrap > p { font-size: 14px; color: var(--white); } 
.footer_wrap .sns_link { display: flex; flex-wrap: wrap; margin-top: 36px; } 
.footer_wrap .sns_link li { margin-right: 20px; } 
.footer_wrap .sns_link li:last-child { margin-right: 0; } 
.footer_wrap .sns_link li a { display: inline-block; width: 23px; height: 23px; background-repeat: no-repeat; background-position: center center; text-indent: -9999px; } 
.footer_wrap .sns_link li a.naver { background-image: url(../img/icon/icon_sns_blog.svg); } 
.footer_wrap .sns_link li a.kakao { background-image: url(../img/icon/icon_sns_kakao.svg); } 
.footer_wrap .sns_link li a.instar { background-image: url(../img/icon/icon_sns_instar.svg); } 
.footer_wrap .sns_link li a.youtube { background-image: url(../img/icon/icon_sns_youtube.svg); } 
.footer_wrap .sns_link li a.google { background-image: url(../img/icon/icon_sns_google.svg); } 
.footer_wrap .footer_info { margin-top: 36px; } 
.footer_wrap .footer_info > span { font-size: 14px; font-weight: 700; color: var(--white); cursor: pointer; display: block; margin-bottom: 16px; } 
.footer_wrap .footer_info > span::after { width: 14px; height: 14px; background: url(../img/icon/icon_arrow_down_white.svg) no-repeat center center; background-size: contain; vertical-align: -3px; content: ''; display: inline-block; margin-left: 8px; } 
.footer_wrap .footer_info > span.on::after { transform: rotate(180deg); } 
.footer_wrap .footer_info > p { display: none; font-size: 13px; color: var(--white); line-height: 22px; overflow: hidden; } 
/*! ──────────────────── Layout ──────────────────── */



/*! ──────────────────── Btn ──────────────────── */
.btn_sub_box { width: 100%; text-align: center; } 
.btn_sub_box .btn { width: 100%; font-size: 16px; font-weight: 400; color: var(--gray-800); line-height: 22px; padding: 12px; background: var(--white); border: 1px solid var(--gray-600); border-radius: 10px; display: block; } 
.btn_sub_box .btn.arw_right::after { width: 18px; height: 18px; background: url(../img/icon/icon_arrow_right_gray.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -3px; margin-left: 6px; } 
.btn_sub_box .btn.arw_down::after { width: 18px; height: 18px; background: url(../img/icon/icon_arrow_down_gray.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -3px; margin-left: 6px; } 
.btn_sub_box .btn.arw_down.active::after { transform: rotate(180deg); } 

.btn_main_box { position: relative; width: 100%; text-align: center; } 
.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; line-height: 23px; padding: 16px 20px; border-radius: 10px; display: block; } 
.btn_main_box .btn.eff_shadow { box-shadow: 0px 2px 19px 0px rgba(0, 0, 0, 0.20); } 
.btn_main_box .btn_primary { color: var(--white); background: var(--primary); }
.btn_main_box .btn_black { color: var(--white); background: var(--gray-900); }
.btn_main_box .btn.arr_right::after { width: 18px; height: 18px; background: url(../img/icon/icon_arrow_right_white.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -3px; margin-left: 6px; } 
.btn_main_box .btn:disabled,
.btn_main_box .btn.disabled { color: var(--gray-700); background: var(--gray-500); } 
.btn_main_box.type_fixed { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; 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%);; padding: 32px 20px; z-index: 1000; } 
/*! ──────────────────── Btn ──────────────────── */
 

/*! ──────────────────── Tab ──────────────────── */
.tab_bar_wrap { position: relative; width: 100%; max-width: 480px; text-align: center; background: var(--white); border-bottom: 2px solid var(--gray-400); } 
.tab_bar_wrap .tab_item { position: relative; font-size: 16px; font-weight: 400; color: var(--gray-800); line-height: 22px; padding: 16px 8px; display: inline-block; cursor: pointer; } 
.tab_bar_wrap .tab_item.active { font-weight: 700; color: var(--gray-900); } 
.tab_bar_wrap .tab_item.active::after { position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--gray-900); content: ''; display: block; z-index: 1; } 
.tab_cont_wrap .tab_cont { display: none; } 
.tab_cont_wrap .tab_cont.active { display: block; } 
/* fixed */
.tab_bar_wrap.type_fixed { position: absolute; } 
.tab_bar_wrap.type_fixed.fixed { position: fixed; top: 64px; z-index: 1000; } 
/* flex */
.tab_bar_wrap .flex .tab_item { flex: 1; } 
/* scroll-x */
.tab_bar_wrap.scroll_x_slider { padding: 0 20px; } 
.tab_bar_wrap.scroll_x_slider .swiper-slide { width: auto; } 
/*! ──────────────────── Tab ──────────────────── */


/*! ──────────────────── Icon ──────────────────── */
.icon_box { display: inline-block; } 
.icon_box.size_18 { width: 18px; height: 18px; } 
.icon_box.size_24 { width: 24px; height: 24px; } 
.icon_box.size_48 { width: 48px; height: 48px; } 
.icon_box.type_complete { background: url(../img/icon/icon_complete.svg) no-repeat center center; background-size: contain; } 
.icon_box.type_warning { background: url(../img/icon/icon_warning.svg) no-repeat center center; background-size: contain; } 
/*! ──────────────────── Icon ──────────────────── */


/*! ──────────────────── Star ──────────────────── */
.star_box { display: inline-block; } 
.star_box .star { position: relative; width: 88px; height: 20px; background: url(../img/icon/icon_star_empty.svg) no-repeat left center; background-size: contain; vertical-align: middle; display: inline-block; } 
.star_box .star::after { position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: url(../img/icon/icon_star_full.svg) no-repeat left center; background-size: contain; content: ''; display: block; z-index: 1; } 
.star_box .star.large { width: 108px; } 
.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: 400; color: var(--gray-800); line-height: 16px; vertical-align: middle; display: inline-block; } 
/*! ──────────────────── Star ──────────────────── */


/*! ──────────────────── Componant - #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_header { position: relative; padding: 24px 20px; }
.popup .popup_header.type_border { border-bottom: 1px solid #efefef; }
.popup .popup_header .btn_back { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 24px; height: 24px; background: url(../img/btn/btn_back.svg) no-repeat center center; background-size: contain; text-indent: -9999px; display: inline-block; z-index: 5; }
.popup .popup_header .btn_exit { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 24px; height: 24px; background: url(../img/btn/btn_exit.svg) no-repeat center center; background-size: contain; text-indent: -9999px; display: inline-block; z-index: 5; }
.popup .popup_wrap { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; background: #ffffff; border-radius: 12px; z-index: 3000; overflow: hidden; }
.popup .popup_wrap.type_full { top: 0; width: 100%; height: 100vh; border-radius: 0; }
.popup .popup_wrap.type_full .popup_header { position: sticky; text-align: center; padding: 20px; }
.popup .popup_wrap.type_center { top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 432px; height: fit-content; }
.popup .popup_wrap.type_toast { bottom: -100%; height: fit-content; max-height: calc(100vh - 64px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: bottom 0.5s; }
.popup.on .popup_wrap.type_toast { bottom: 0; }
.popup_sotong { padding: 0 20px; }
.popup .popup_inner.type_scroll { overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
.popup .popup_inner.type_scroll::-webkit-scrollbar { display: none; }
.popup .popup_wrap.type_toast .popup_inner.type_scroll { max-height: calc(100vh - 119px); }
.popup .popup_wrap.type_full .popup_inner.type_scroll { height: calc(100vh - 64px); }
/*! ──────────────────── Componant - #popup ──────────────────── */


/*! ──────────────────── Componant - form_group_box ──────────────────── */
.form_group_box > div { margin-bottom: 16px; } 
.form_group_box > div:last-of-type { margin-bottom: 0; } 
.input_box { position: relative; } 
.input_box .form_input { width: 100%; height: 56px; font-size: 16px; font-weight: 400; color: transparent; line-height: 22px; padding: 24px 20px 8px; background: #ffffff; border: 1px solid var(--gray-600); border-radius: 12px; transition: all .1s ease-in-out; } 
.input_box .form_label { position: absolute; left: 20px; top: 20px; font-size: 16px; font-weight: 400; color: var(--gray-700); line-height: 16px; display: inline-block; transition: all .1s ease-in-out; } 
.address_box { display: flex; } 
.address_box .input_box { flex: 1; } 
.address_box .btn_search { width: 96px; background: #ffffff; border: 1px solid var(--gray-600); border-radius: 12px; margin-left: 8px; } 
/*? focus */
.input_box .form_input:focus,
.input_box .form_input.focus { color: var(--black); border: 1px solid var(--primary); } 
.input_box .form_input:focus + .form_label,
.input_box .form_input.focus + .form_label { top: 8px; font-size: 13px; } 
/*? valid */
.input_box .form_input.valid { color: var(--black); } 
.input_box .form_input.valid + .form_label { top: 8px; font-size: 13px; } 
/*? error */
.input_box .form_input.error { border: 1px solid var(--red); } 
.input_box .form_input.error + .form_label { color: var(--red); } 
.error_message { height: 0px; font-size: 13px; font-weight: 400; color: var(--red); padding-top: 0px; padding-left: 4px; overflow: hidden; transition: all .2s ease-in-out; } 
.error ~ .error_message { height: 18px; padding-top: 4px; } 
/*? radio */
.radio_group_box { display: flex; flex-wrap: wrap; } 
.radio_group_box .half { width: calc(50% - 4px); } 
.radio_group_box .half + .half { margin-left: 8px; } 
.radio_box input + label { height: 56px; font-size: 16px; font-weight: 500; color: var(--gray-800); line-height: 38px; text-align: center; padding: 8px 12px; background: var(--gray-400); border: 1px solid var(--gray-400); border-radius: 12px; display: block; cursor: pointer; } 
.radio_box input:checked + label { color: var(--gray-900); background: var(--primary-100); border: 1px solid var(--primary); } 
.radio_box input:checked + label::before { width: 18px; height: 18px; background: url(../img/icon/icon_check_primary.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-right: 6px; } 
/*! ──────────────────── Componant - form_group_box ──────────────────── */


/*! ──────────────────── Componant - product_list ──────────────────── */
.product_list_box ul > li { margin-bottom: 8px; } 
.product_list_box ul > li:last-of-type { margin-bottom: 0; } 
.product_list_box ul > li > a { position: relative; display: flex; align-items: center; width: 100%; padding: 20px 16px; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.04); } 
.product_list_box .img_box { position: relative; width: 72px; height: 72px; min-width: 72px; overflow: hidden; margin-right: 20px; } 
.product_list_box .img_box img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 240%; max-width: 240%; } 
.product_list_box .info_box { flex: 1; } 
.product_list_box .info_box .brand { font-size: 14px; color: var(--gray-900); display: block; margin-bottom: 4px; } 
.product_list_box .info_box .name { font-size: 16px; font-weight: 500; line-height: 22px; } 
.product_list_box .info_box .unit { font-size: 14px; color: var(--gray-800); line-height: 18px; margin-top: 2px; } 
.product_list_box .info_box .star { display: flex; }
.product_list_box .info_box .star img { width: 12px; height: 12px; margin: 1px 2px 0 0; }
.product_list_box .info_box .star span { display: inline-block; }
.product_list_box .info_box .tag_list { margin-top: 12px; } 
.product_list_box .info_box .tag_list span { display: inline-block; font-size: 13px; font-weight: 400; color: var(--blue); line-height: 14px; padding: 6px; background: var(--blue-light); border-radius: 4px; margin-right: 2px; } 
/* soldout */
.product_list_box .soldout { pointer-events: none; } 
.product_list_box .soldout::before { position: absolute; left: 12px; top: 12px; font-size: 13px; font-weight: 700; color: var(--gray-800); line-height: 24px; padding: 0 12px; background: var(--gray-400); border-radius: 20px; content: '판매 중지'; display: inline-block; z-index: 1; } 
.product_list_box .soldout .img_box,
.product_list_box .soldout .info_box { opacity: 0.5; } 
/*! ──────────────────── Componant - product_list ──────────────────── */


/*! ──────────────────── Flex ──────────────────── */
.flex { display: flex; } 
.flex.col_center { align-items: center; } 
/*! ──────────────────── Flex ──────────────────── */

.fix_btn_padding { position: relative; padding-bottom: 119px; } 
.cont_box { padding: 32px 20px; } 


/*? hide */
.blind { display: none; } 
.hide { display: none !important; } 
.m_only, .m-only { display: none !important; } 
@media (max-width:480px){
 .m_only, .m-only { display: block !important; } 
.pc_only { display: none !important; } 
 }