@charset "utf-8";

/*! ───────────────────────────────────────── Reset ───────────────────────────────────────── */
input[type=checkbox],
input[type=radio] { display: none; } 
h1, h2, h3, h4 { font-weight: 700; } 
html * { box-sizing: border-box; } 
/*! ───────────────────────────────────────── Reset ───────────────────────────────────────── */


/*! ───────────────────────────────────────── Common ───────────────────────────────────────── */
:root { 
    --white : #ffffff;
    --blue-light : #F3F8FF;
    --blue : #297DFB;
    --red : #F60909;
    --primary-100 : #F1FBF5;
    --primary-500 : #2AAD5C;
} 

.mt04 { margin-top: 4px; } 
.mt12 { margin-top: 12px; } 
.mt24 { margin-top: 24px; }
.mb24 { margin-bottom: 24px; }

.fs18 { font-size: 18px; line-height: 24px; }
.fs16 { font-size: 16px; line-height: 22px; }
.fs14 { font-size: 14px; line-height: 20px; }
.fs13 { font-size: 13px; line-height: 19px; }
.fs12 { font-size: 12px; line-height: 18px; }

.fw700 { font-weight: 700; } 
.fw500 { font-weight: 500; } 

.fc_gray8 { color: #757575; } 
.fc_blue { color: var(--blue); } 
.fc_primary { color: var(--primary-500); } 

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

.cont_box { padding: 24px 20px; } 
.bd_top { border-top: 8px solid #F8F9FA; } 

.toggle_tab { cursor: pointer; } 
.toggle_cont { display: none; } 

/*? ----- Btn ----- */
.btn_sub_box { position: relative; width: 100%; text-align: center; } 
.btn_sub_box .btn { width: 100%; padding: 9px 24px; border-radius: 10px; display: block; } 
.btn_sub_box .btn.bd_gray { color: #757575; } 

.btn_main_box { position: relative; width: 100%; text-align: center; margin: 0 auto; } 
.btn_main_box .btn { width: 100%; font-size: 18px; font-weight: 700; color: var(--white); line-height: 24px; padding: 16px 20px; background: var(--primary-500); 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: #aaaaaa; background: #EFEFEF; } 
.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: 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: 13px; font-weight: 500; line-height: 18px; }

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

/*? ----- icon_chkbox ----- */
.icon_chkbox { position: absolute; width: 18px; height: 18px; 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; } 
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; }

/*? ----- tooltip_wrap ----- */
@keyframes tooltipMove { 
    0% { transform: translateY(0); } 
    50% { transform: translateY(-2px); } 
    100% { transform: translateY(0); } 
}
.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: 6px 26px 6px 8px; background: var(--blue); border-radius: 4px; display: inline-block; animation: tooltipMove 1s infinite forwards; } 
.tooltip_wrap .tooltip_box::before { position: absolute; left: 7px; width: 0; height: 0px; content: ''; display: block; } 
.tooltip_wrap .tooltip_box .text { color: var(--white); word-break: keep-all; } 
.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.top .tooltip_box::before { top: -8px; border: 4px solid transparent; border-bottom: 4px solid var(--blue); } 

/*? ----- calculator_wrap ----- */
.calculator_wrap > * + * { padding-top: 16px; border-top: 1px solid #efefef; margin-top: 16px; } 
.calculator_wrap .price_info_box > li { display: flex; flex-wrap: wrap; margin-bottom: 16px; } 
.calculator_wrap .price_info_box > li:last-of-type { margin-bottom: 0; } 
.calculator_wrap .name { width: 50%; font-size: 14px; font-weight: 400; } 
.calculator_wrap .price { width: 50%; font-size: 14px; font-weight: 400; text-align: right; } 
.calculator_wrap .price_info_box .toggle_tab > .name::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: -5px; margin-left: 4px; transition: all 0.2s; } 
.calculator_wrap .price_info_box .toggle_tab.on > .name::after { transform: rotate(-180deg); } 
.calculator_wrap .price_info_box .detail_box { width: 100%; } 
.calculator_wrap .price_info_box .detail_box dl { width: 100%; padding-left: 8px; margin-top: 8px; } 
.calculator_wrap .price_info_box .detail_box dl .name,
.calculator_wrap .price_info_box .detail_box dl .price { color: #757575; } 
.calculator_wrap .price_info_box .detail_box dl .name::before { color: #dddddd; content: 'ㄴ'; margin-right: 4px; } 
.calculator_wrap .price_info_box .detail_box dl,
.calculator_wrap .total_price_box { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #F8F9FA; border-radius: 8px; } 
.calculator_wrap .total_price_box .title { font-size: 14px; font-weight: 400; color: #222222; line-height: 18px; } 
.calculator_wrap .total_price_box .price { font-size: 16px; font-weight: 500; color: #222222; line-height: 24px; } 

/*? ----- cart_list_wrap ----- */
.cart_list_wrap .item { position: relative; padding: 12px 0; border-bottom: 1px solid #EFEFEF; } 
.cart_list_wrap .item .edit_box { padding-right: 40px; } 
.cart_list_wrap .item .edit_box .check_box { width: 100%; padding: 9px 0; }
.cart_list_wrap .item .edit_box .check_box input + label { position: relative; display: block; } 
.cart_list_wrap .item .edit_box .check_box input + label .icon_chkbox { top: 1px; } 
.cart_list_wrap .item .edit_box .check_box input + label .name { width: 100%; font-size: 16px; font-weight: 700; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; padding-left: 29px; } 
.cart_list_wrap .item .edit_box .check_box input[type="radio"]:checked + label .icon_chkbox { background: var(--primary-100); border: 1px solid var(--primary-500); } 
.cart_list_wrap .item .btn_delete { position: absolute; right: 0; top: 23px; width: 18px; height: 18px; background: url(../../image/icon/icon_close_gray.svg) no-repeat center center; background-size: 18px; text-indent: -9999px; overflow: hidden; } 
.cart_list_wrap .item .info_box { display: flex; flex-wrap: wrap; align-items: center; }
.cart_list_wrap .item .info_box .img_box { position: relative; width: 72px; min-width: 72px; height: 72px; border: 1px solid #F8F9FA; border-radius: 8px; overflow: hidden; }
.cart_list_wrap .item .info_box .img_box img { height: 100%; object-fit: cover; }
.cart_list_wrap .item .info_box .text_box { width: calc(100% - 80px); padding: 6px 0; margin-left: 8px; }
.cart_list_wrap .item .info_box .text_box > * { margin-bottom: 4px; }
.cart_list_wrap .item .info_box .text_box > *:last-of-type { margin-bottom: 0; }
.cart_list_wrap .item .info_box .text_box .tag { font-size: 14px; font-weight: 400; line-height: 18px; } 
.cart_list_wrap .item .info_box .text_box .desc { font-size: 14px; font-weight: 400; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.cart_list_wrap .item .info_box .text_box .unit { font-size: 14px; font-weight: 400; color: #757575; line-height: 18px; } 
.cart_list_wrap .item .info_box .bottom_box { width: 100%; text-align: right; margin-top: 8px; }
.cart_list_wrap .item .info_box .bottom_box .price { font-size: 16px; font-weight: 500; line-height: 22px; }
/*! ───────────────────────────────────────── Common ───────────────────────────────────────── */

/* 타이머 배너 */
@keyframes pullDown {
	0% { height: 0; }
    25% { height: 47px; }
    60% { height: 42px; }
    75% { height: 43px; }
	100% { height: 42px; }
}
@keyframes pullUp {
	0% { height: 42px; }
    25% { height: 43px; }
    70% { height: 42px; }
    85% { height: 47px; }
	100% { height: 0; }
}
.top_banner { position: sticky; left: 0; top: 68px; width: 100%; height: 0; background: var(--blue-light); overflow: hidden; z-index: 1000; }
.top_banner.on { animation: pullDown 0.7s ease-in 1 forwards; }
.top_banner.off { animation: pullUp 0.7s ease-in 1 forwards; }
.top_banner p { width: 100%; height: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--blue); line-height: 18px; }
.top_banner p * { display: inline-block; }

/* 한달 구성 선택 */
.cart_section .month_pack ul > li input[type="radio"] + label { position: relative; padding: 17px 20px; background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 10px; display: block; } 
.cart_section .month_pack ul > li input[type="radio"] + label .icon_radio { top: 19px; } 
.cart_section .month_pack ul > li input[type="radio"] + label .text { display: block; color: #757575; padding-left: 26px; } 
.cart_section .month_pack ul > li input[type="radio"]:checked + label { background: var(--primary-100); border: 1px solid var(--primary-500); } 
.cart_section .month_pack ul > li input[type="radio"]:checked + label .text { color: #222222; } 

/* 팩 정기구독 */
.cart_section .cont_box { position: relative; }
.cart_section .cont_box .tooltip_wrap { left: 20px; top: 54px; transform-origin : left top; }
.cart_section .btn_sub_box .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: -4px; margin-left: 4px; opacity: 0.7; } 

/* 장바구니 없음 */
.none_data_box { width: 100%; text-align: center; padding: 40px 24px; }
.none_data_box i.icon_cart { width: 40px; height: 40px; background: url(../../image/icon/icon_cart_40.svg) no-repeat center center; background-size: contain; display: inline-block; }
.none_data_box p { color: #757575; }
.none_data_box .btn_sub_box { width: 100%; text-align: center; }
.none_data_box .btn_sub_box .btn { width: 230px; font-size: 14px; font-weight: 500; color: var(--primary-500); line-height: 20px; padding: 8px 24px; background: var(--primary-100); border: 1px solid var(--primary-500); display: inline-block; }