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

    --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-500 : #2aad5c;
    --primary-600 : #228a4a;
    --primary-700 : #196837;
    --primary-800 : #114525; 
    --primary-900 : #082312;
    --primary-gradation : linear-gradient(90deg, #2AAD5C 0%, #E4F6EB 100%); 
    
} 

/*? 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; } 
}

/*! ──────────────────── Design System ──────────────────── */
/** margin */
.mt02 { margin-top: 2px !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; } 
.mr04 { margin-right: 4px !important; } 
.mr08 { margin-right: 8px !important; } 
.pt0 { padding-top: 0 !important; } 
.pt04 { padding-top: 4px !important; } 
.pt08 { padding-top: 8px !important; } 
.pt12 { padding-top: 12px !important; } 
.pt16 { padding-top: 16px !important; } 
.pt24 { padding-top: 24px !important; } 
.pt36 { padding-top: 36px !important; } 
.pt48 { padding-top: 48px !important; }
.pt64 { padding-top: 64px !important; } 
.pb0 { padding-bottom: 0px !important; } 
.pb08 { padding-bottom: 8px !important; } 
.pb12 { padding-bottom: 12px !important; } 
.pb16 { padding-bottom: 16px !important; } 
.pb24 { padding-bottom: 24px !important; } 
.pb36 { padding-bottom: 36px !important; } 
.pb64 { padding-bottom: 64px !important; } 


/** Typography */
.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.6px; 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; letter-spacing: -0.28px; } 
.fs_12 { font-size: 12px !important; line-height: 14px !important; } 
.fw_400 { font-weight: 400 !important; } 
.fw_500 { font-weight: 500 !important; } 
.fw_600 { font-weight: 600 !important; }
.fw_700 { font-weight: 700 !important; }
.fc_white { color: var(--white) !important; } 
.fc_primary { color: var(--primary-500) !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; } 
.text_right { text-align: right; }

.bg_gray { background: var(--gray-400); } 
.bg_primary { background: var(--primary-500); } 

.cont_box_24 { padding: 24px 20px; }
.cont_box_12 { padding: 12px 20px; }
.cont_box_16 { padding: 16px 20px; }
.cont_box_20 { padding: 20px; }

.bd_top { border-top: 8px solid var(--gray-400); } 
.bd_top_01 { border-top: 1px solid var(--gray-500); } 
.bd_bottom { border-bottom: 6px solid var(--gray-500); } 
.bd_none { border: none !important; }

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

.radius_04 { border-radius: 4px; }
.radius_08 { border-radius: 8px; }
.radius_12 { border-radius: 12px; }
.radius_16 { border-radius: 16px; }

/*! ──────────────────── 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; background-size: 24px; } 
.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_black.svg) no-repeat center center; background-size: 24px; } 
.header_wrap .btn_cart .count { position: absolute; right: 6px; bottom: 6px; width: 18px; height: 18px; font-size: 10px; font-weight: 700; color: var(--white); line-height: 18px; letter-spacing: -0.05em; white-space: nowrap; text-align: center; text-indent: 0; background: var(--primary-500); border-radius: 50%; } 
.header_wrap .cart_tooltip_box { position: absolute; right: 8px; top: calc(100% - 2px); font-size: 14px; font-weight: 500; color: var(--white); line-height: 18px; padding: 7px 32px; background: rgba(34, 34, 34, 0.8); border-radius: 24px; z-index: 1000; } 
.header_wrap .cart_tooltip_box::after { position: absolute; right: 16px; top: -11px; width: 22px; height: 11px; background: url(../image/icon/icon_cart_tooltip_point.svg) no-repeat center top; background-size: 22px; 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-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 { position: relative; min-height: 400px; padding-top: 64px; } 
#container section { min-height: calc(100vh - 64px); 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%; line-height: 20px; padding: 12px; background: var(--white); border-radius: 8px; display: inline-block; } 
.btn_sub_box .btn.btn_plus::after { width: 18px; height: 18px; background: url(../image/icon/icon_plus_gray.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -3px; margin-left: 4px; }
.btn_sub_box .btn.arw_down::after { width: 18px; height: 18px; background: url(../image/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_sub_box .btn.type_primary_light { color: var(--primary-500); background: var(--primary-100); border: 1px solid var(--primary-500); }
.btn_sub_box .btn.type_bd_gray { border: 1px solid var(--gray-600); }

.btn_main_box { position: relative; width: 100%; text-align: center; } 
.btn_main_box.type_fixed { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; min-width: 360px; padding: 28px 20px 24px; background: var(--white); 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.type_sticky { position: sticky; left: 0; bottom: 0; width: 100%; max-width: 480px; padding: 28px 20px 24px; background: var(--white); 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 { width: 100%; font-size: 18px; font-weight: 700; line-height: 23px; padding: 16px 20px; border-radius: 10px; display: block; } 
.btn_main_box .btn.type_half { width: calc(50% - 4px); }
.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-500); }
.btn_main_box .btn_primary_light { color: var(--primary-500); background: var(--primary-100); }
.btn_main_box .btn_black { color: var(--white); background: var(--gray-900); }
.btn_main_box .btn_border { color: var(--gray-800); background: var(--white); border: 1px solid var(--gray-600); }
.btn_main_box .btn_kakao { color: var(--black); background: #FEE500; }
.btn_main_box .icon_kakao::before { width: 18px; height: 18px; background: url(../image/icon/icon_kakao_black.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -2px; margin-right: 6px; } 
.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 .btn .price { display: inline-block; color: var(--white); content: ''; display: inline-block ; }
.btn_main_box .btn .price::before { width: 3px; height: 3px; background: rgba(255, 255, 255, 0.50); border-radius: 50%; content: ''; display: inline-block; vertical-align: 4px; margin: 0 6px; }
.btn_main_box .btn .count { display: inline-block; width: 22px; font-size: 14px; font-weight: 700; color: var(--primary-500); line-height: 22px; text-align: center; padding-right: 1px; background: var(--white); border-radius: 50%; vertical-align: 1px; margin-left: 6px; }
.btn_main_box .btn_tooltip_box { position: absolute; left: 50%; bottom: calc(100% - 8px); transform: translateX(-50%); padding: 7px 16px; background: rgba(34, 34, 34, 0.80); border-radius: 8px; }
.btn_main_box .btn_tooltip_box p { display: inline-block; font-size: 14px; font-weight: 500; color: var(--white); line-height: 18px; letter-spacing: -0.28px; }
.btn_main_box .btn_tooltip_box p * { color: var(--white); }
.btn_main_box .btn_out { display: inline-block; font-size: 16px; font-weight: 400; color: #757575; line-height: 22px; letter-spacing: -0.32px; text-decoration: underline; padding: 10px; }


/*! ──────────────────── Input ──────────────────── */
.input_box { position: relative; }
.input_box input { width: 100%; height: 48px; background: var(--white); padding: 12px 20px; border-radius: 8px; transition: all 0.2s ease-out; }
.input_box input::placeholder { color: var(--gray-800); }
.input_box.type_bg input { background: var(--gray-400); border: 1px solid var(--gray-400); }
.input_box input:focus,
.input_box input:focus-visible { background: var(--white); border: 1px solid var(--primary-500); }

/* search_wrap */
.search_wrap { display: flex; justify-content: space-between; }
.search_wrap .input_box { width: 100%; transition: all 0.2s ease-out; }
.search_wrap .btn_search_exit { width: 0; min-width: 0; height: 48px; font-size: 16px; font-weight: 400; color: var(--gray-800); line-height: 48px; text-align: center; overflow: hidden; display: block; transition: all 0.2s ease-out; }
.input_box .btn_search { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(../image/btn/btn_search.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; z-index: 5; transition: right 0.2s ease-out; }
.search_wrap .input_box.focus { width: calc(100% - 48px); }
.search_wrap .input_box.focus + .btn_search_exit { width: 42px; min-width: 42px; margin-left: 6px; }


/*! ──────────────────── chip ──────────────────── */
.chip_box { display: flex; flex-wrap: wrap; }
.chip_box .chip { font-size: 13px; font-weight: 500; line-height: 18px; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-right: 4px; }
.chip_box .chip.primary { color: var(--primary-500); background: var(--primary-100); }
.chip_box .chip.blue { color: var(--blue); background: var(--blue-light); }



/*! ──────────────────── chkbox ──────────────────── */
.icon_radio { position: absolute; width: 18px; height: 18px; border: 2px solid #dddddd; border-radius: 50%; display: block; } 
.icon_radio::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: transparent; border-radius: 50%; content: ''; display: block; } 
input:checked + label .icon_radio { border: 2px solid var(--primary-500); } 
input:checked + label .icon_radio::after { background: var(--primary-500); } 

.check_box .icon_chkbox { width: 20px; height: 20px; background: url(../image/icon/icon_chkbox_gray.svg) no-repeat center center, var(--white); background-size: 10px; border: 2px solid #dddddd; border-radius: 4px; display: block; text-indent: -9999px; overflow: hidden; } 
.check_box .icon_chkbox.size_20 { width: 20px; height: 20px; }
.check_box input:checked + label .icon_chkbox { background: url(../image/icon/icon_chkbox_white.svg) no-repeat center center, var(--primary-500); border: 2px solid var(--primary-500); background-size: 10px; }



/*! ──────────────────── 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_head { position: relative; padding: 36px 20px 20px; border-bottom: 1px solid var(--gray-400); }
.popup .popup_head .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_head .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_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_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; border-radius: 32px 32px 0 0; transition: bottom 0.5s; }
.popup.on .popup_wrap.type_toast { bottom: 0; }
.popup .popup_wrap.type_full .popup_head { height: 64px; padding: 22px 20px; border-bottom: none; }
.popup .popup_inner.type_scroll { max-height: calc(100vh - 64px); overflow-y: scroll; padding-bottom: 107px; -ms-overflow-style: none; scrollbar-width: none; }
.popup .popup_inner.type_scroll::-webkit-scrollbar { display: none; }
.popup_sotong { padding: 0 20px; }
.popup_icon.size_48 { width: 48px; height: 48px; }


/*! ──────────────────── Componant - product_list ──────────────────── */
.product_list_box > li { border-bottom: 1px solid var(--gray-500); } 
.product_list_box > li:last-of-type { border-bottom: none; }
.product_list_box .item { position: relative; display: block; }
.product_list_box .item .top_box { position: relative; padding: 6px 0; }
.product_list_box .item .btn_delete { position: absolute; right: 0; top: 6px; width: 20px; height: 20px; background: url(../image/btn/btn_delete_gray.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; }
.product_list_box .item .rank { width: 32px; height: 32px; font-size: 12px; font-weight: 800; color: var(--white); line-height: 32px; text-align: center; background: url(../image/icon/icon_rank_gray.svg) no-repeat center center; background-size: contain; }
.product_list_box .item .rank.primary { background: url(../image/icon/icon_rank_primary.svg) no-repeat center center; background-size: contain; }
.product_list_box .item .name { flex: 1; max-width: 250px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.product_list_box .item .info_box { position: relative; }
.product_list_box .item .info_box .img_box { position: relative; width: 72px; height: 72px; min-width: 72px; border: 1px solid var(--gray-400); border-radius: 8px; overflow: hidden; } 
.product_list_box .item .info_box .img_box.size_72 { width: 72px; height: 72px; min-width: 72px; }
.product_list_box .item .info_box .img_box.size_80 { width: 80px; height: 80px; min-width: 80px; }
.product_list_box .item .info_box .img_box.size_88 { width: 88px; height: 88px; min-width: 88px; }
.product_list_box .item .info_box .img_box.size_120 { width: 88px; height: 120px; min-width: 88px; }
.product_list_box .item .info_box .img_box img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200%; max-width: 200%; } 
.product_list_box .item .info_box .img_box .numb { position: absolute; top: 7px; left: 7px; width: 24px; height: 24px; font-size: 12px; font-weight: 700; color: var(--white); line-height: 24px; text-align: center; background: var(--primary-500); border-radius: 4px; z-index: 5; }
.product_list_box .item .info_box .text_box { flex: 1; min-width: 200px; padding-right: 20px; }
.product_list_box .item .info_box .text_box .brand { width: 100%; }
.product_list_box .item .info_box .text_box .brand.ellipsis_01 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
.product_list_box .item .info_box .text_box .brand.ellipsis_02 { max-height: 44px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.product_list_box .item .info_box .text_box .star { display: flex; }
.product_list_box .item .info_box .text_box .star img { width: 12px; height: 12px; margin: 1px 2px 0 0; }
.product_list_box .item .info_box .text_box .star span { display: inline-block; }
.product_list_box .item .info_box .price_box { width: 100%; }
.product_list_box .item .btn_add_cart { position: absolute; right: 0; bottom: 0; font-size: 14px; font-weight: 500; color: var(--gray-900); padding: 7px 8px; background: var(--gray-400); border-radius: 4px; z-index: 10; }
.product_list_box .item .btn_add_cart::before { width: 16px; height: 16px; background: url(../image/btn/btn_cart_black.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.product_list_box .item .btn_add_cart.active { color: var(--primary-500); background: var(--primary-100); }
.product_list_box .item .btn_add_cart.active::before { background: url(../image/btn/btn_cart_check_primary.svg) no-repeat center center; background-size: contain; }
/*? 판매 중지 */
.product_list_box .item.soldout .soldout_chip { display: inline-block; position: absolute; left: 16px; top: 16px; font-size: 13px; font-weight: 500; color: var(--gray-800); line-height: 130%; letter-spacing: -0.13px; padding: 4px 6px; background: var(--gray-500); border-radius: 4px; z-index: 5; }
.product_list_box .item.soldout .info_box { opacity: 0.2; }




/*! ──────────────────── Componant - tab ──────────────────── */
.tab_nav { display: flex; background: var(--white); }
.tab_nav li { flex: 1; font-size: 18px; font-weight: 400; color: var(--gray-800); line-height: 22px; text-align: center; border-bottom: 2px solid var(--gray-500); padding: 12px; cursor: pointer; }
.tab_nav li.active { font-weight: 700; color: var(--gray-900); border-bottom: 2px solid var(--gray-900); }
.tab_cont_wrap { width: 100%; overflow: hidden; }
.tab_cont_wrap .tab_cont { display: none; }
.tab_cont_wrap .tab_cont.active { display: block; }


/*! ──────────────────── Componant - tooltip ──────────────────── */
@keyframes tooltipMove { 
    0% { transform: translateY(0); } 
    50% { transform: translateY(2px); } 
    100% { transform: translateY(0); } 
}
.tooltip_axis { position: relative; }
.tooltip_wrap { position: absolute; left: 0; z-index: 10; opacity: 1; transition: all 0.2s ease-out; } 
.tooltip_wrap.off { transform: scale(0); opacity: 0; }
.tooltip_wrap .tooltip_box { padding: 8px 26px 8px 8px; background: var(--blue); border-radius: 4px; display: inline-block; animation: tooltipMove 1s infinite forwards; } 
.tooltip_wrap .tooltip_box::before { position: absolute; width: 0; height: 0px; content: ''; display: block; } 
.tooltip_wrap .tooltip_box .text { color: var(--white); white-space: nowrap; } 
.tooltip_wrap .tooltip_box .tooltip_close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background: url(../image/btn/btn_close_white.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; display: block; } 
.tooltip_wrap.lb { top: calc(100% + 8px); }
.tooltip_wrap.lb .tooltip_box::before { left: 7px; top: -9px; border: 5px solid transparent; border-bottom: 5px solid var(--blue); }


/* icon */
.icon { display: inline-block; text-indent: -9999px; overflow: hidden; }
.icon.size48 { width: 48px; height: 48px; }
.icon.type_complete { background: url(../image/icon/icon_complete_primary.svg) no-repeat center center; background-size: contain; }