@charset "utf-8";
/** 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; transform: translateX(-50%); display: flex; flex-direction: column; width: 100%; max-width: 480px; background: var(--color-white); border-radius: 16px; z-index: 3000; overflow: hidden; } 
#popup .popup_head { position: relative; width: 100%; height: 48px; text-align: center; } 
#popup .popup_head .popup_title { font-size: var(--font-regular); font-weight: 700; line-height: 48px; } 
#popup .popup_head .btn_pop_close { position: absolute; right: 24px; top: 12px; width: 24px; height: 24px; background: url(../image/btn/btn_popup_close.svg) no-repeat center center; background-size: contain; text-indent: -9999px; display: block; } 
#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(--color-main); border-radius: 2px; }
#popup .popup_inner.type_bar::-webkit-scrollbar-track { background: var(--color-white); border-radius: 2px; }
#popup .btn_box_wrap { padding: 24px 0; }
#popup .pop_btn_box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 24px 0 0; }
#popup .pop_btn_box .btn { position: relative; width: 100%; height: 56px; font-size: 18px; font-weight: 700; color: var(--color-white); line-height: 56px; text-align: center; background: var(--color-main); border: var(--border-main); border-radius: var(--border-radius); box-sizing: border-box; }
#popup .pop_btn_box .btn.wid60 { width: calc(62% - 8px); }
#popup .pop_btn_box .btn.wid40 { width: 38%; }
#popup .pop_btn_box .btn.wid50 { width: calc(50% - 4px); }
#popup .pop_btn_box .btn_cancle { color: var(--color-main); background: var(--color-white); }
#popup .pop_btn_box .btn_out { font-size: 16px; font-weight: 400; color: #757575; background: #fff; border: 1px solid #fff; }
#popup .pop_btn_box .btn_tool { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: #fff; line-height: 14px; padding: 8px; background: #222; border-radius: 4px; z-index: 5; }
#popup .pop_btn_box .btn_tool::after { content: ''; display: block; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 10px; height: 10px; border: 5px solid transparent; border-top: 5px solid #222; box-sizing: border-box; z-index: -1; }
#popup .pop_btn_box .btn:disabled,
#popup .pop_btn_box .btn.disabled { color: var(--color-white); background: var(--color-disabled); border: var(--broder); pointer-events: none; }

#popup .popup_head2 { width: 100%; padding: 40px 24px 20px; border-bottom: 1px solid #EFEFEF; }
#popup .popup_head2 h2 { font-size: 18px; font-weight: 700; color: #222; line-height: 140%; padding-right: 36px;  }
#popup .popup_head2 .btn_pop_close { position: absolute; right: 24px; top: 40px; width: 24px; height: 24px; background: url(../image/btn/btn_popup_close.svg) no-repeat center center; background-size: contain; text-indent: -9999px; display: block; }

/* TYPE - full */
#popup .popup_wrap.type_full { top: 0; width: 100%; height: 100vh; border-radius: 0; } 

/* TYPE - center */
#popup .popup_wrap.type_center { top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; 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 - 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; }
.agree_text dt { font-size: var(--font-medium); font-weight: 700; margin: 30px 0; } 
.agree_text dt:first-of-type { margin-top: 0; } 
.agree_text dd { font-size: 13px; line-height: 22px; border-bottom: 2px solid #d9dbe9; padding-bottom: 30px; } 
.agree_text dd:last-of-type { border-bottom: 0; } 
.agree_text dd li { margin-bottom: 22px; } 
.agree_text dd li:last-of-type { margin-bottom: 0; }


.pd0 { padding: 0 !important; }
.popup_sotong { text-align: center; }
.popup_sotong h3 { font-size: 24px; font-weight: 500; color: #222; line-height: 32px; margin-bottom: 20px; }
.popup_sotong .text_box { width: 100%; padding: 12px; background: #f2f4f6; border-radius: 8px; margin-top: 24px; }
.popup_sotong .text_box strong { font-size: 16px; font-weight: 700; color: #297df8; }
.popup_sotong .text_box p { font-size: 16px; font-weight: 500; color: #222; line-height: 22px; margin-top: 8px; }


/* #popup_nuts */
.fs18 { font-size: 18px; font-weight: 700; 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; }
.mt24 { margin-top: 24px; }
.pop_open { cursor: pointer; }
#popup .popup_wrap.popup_nuts .popup_head { height: 80px; padding: 36px 20px 20px; text-align: left; }
#popup .popup_wrap.popup_nuts .popup_head h2 { width: 100%; padding-right: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#popup .popup_wrap.popup_nuts .btn_pop_close { top: 36px; }
#popup .popup_wrap.popup_nuts .popup_inner { height: 430px; }
#popup .popup_nuts .thumbnail_box { position: relative; width: 100%; height: 210px; overflow: hidden; }
#popup .popup_nuts .thumbnail_box img { width: 100%; height: 100%; object-fit: cover; }
#popup .popup_nuts .product_price_box ul li { padding: 12px 0; }
#popup .popup_nuts .product_price_box ul li + li { border-top: 1px solid #EFEFEF; }
#popup .popup_nuts .product_price_box span { display: inline-block; vertical-align: middle; margin-right: 4px; }
#popup .popup_nuts .product_price_box .badge { font-size: 13px; font-weight: 500; color: #2AAD5C; line-height: 24px; padding: 0 8px; background: #F1FBF5; border-radius: 4px; }
#popup .popup_nuts .product_price_box .badge.blue { color: #297DFB; background: #F3F8FF; }
#popup .popup_nuts .product_price_box .date { font-size: 12px; font-weight: 400; line-height: 24px; }
#popup .popup_nuts .product_price_box .percent { font-size: 18px; font-weight: 700; color: #F60909; line-height: 24px; }
#popup .popup_nuts .product_price_box .price { font-size: 18px; font-weight: 700; line-height: 24px; }
#popup .popup_nuts .product_price_box .discount { font-size: 12px; font-weight: 400; color: #aaaaaa; line-height: 24px; text-decoration: line-through; }
#popup .popup_nuts .product_detail_box .label_box { display: flex; flex-wrap: wrap; }
#popup .popup_nuts .product_detail_box .label_box .label { height: 20px; font-size: 12px; font-weight: 400; line-height: 20px; padding: 0 6px; background: #F8F9FA; border-radius: 10px; display: inline-block; margin-right: 4px; }
#popup .popup_nuts .brand_info_box { display: flex; align-items: stretch; justify-content: space-between; }
#popup .popup_nuts .brand_info_box > div { width: calc(50% - 4px); padding: 12px; background: #ffffff; border: 1px solid #EFEFEF; border-radius: 8px; }
#popup .popup_nuts .qna_list_box li { width: 100%; padding: 12px; background: #ffffff; border: 1px solid #EFEFEF; border-radius: 8px; margin-bottom: 8px; }
#popup .popup_nuts .qna_list_box li:last-of-type { margin-bottom: 0; }
#popup .popup_nuts .qna_list_box .q_box { position: relative; font-size: 13px; font-weight: 500; line-height: 20px; padding-left: 18px; }
#popup .popup_nuts .qna_list_box .q_box::before { position: absolute; left: 0; top: -1px; font-size: 14px; font-weight: 700; color: #2AAD5C; content: 'Q.'; display: block; }
#popup .popup_nuts .qna_list_box .a_box { font-size: 13px; font-weight: 400; color: #757575; line-height: 18px; padding-left: 20px; margin-top: 8px; }
#popup .popup_nuts .mark_list_box li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #EFEFEF; padding: 12px 12px; }
#popup .popup_nuts .mark_list_box li:last-of-type { border-bottom: none; margin-bottom: 0; }
#popup .popup_nuts .mark_list_box img { width: 42px; min-width: 42px; }
#popup .popup_nuts .mark_list_box dl { width: calc(100% - 54px); }
#popup .popup_nuts .mark_list_box dl dt { font-size: 13px; font-weight: 500; line-height: 20px; }
#popup .popup_nuts .mark_list_box dl dd { font-size: 12px; font-weight: 400; color: #757575; line-height: 16px; }
#popup .popup_nuts .table_box h4 { color: #757575; }
#popup .popup_nuts .table_box table { width: 100%; border-top: 1px solid #EFEFEF; }
#popup .popup_nuts .table_box table tr { border-bottom: 1px solid #EFEFEF; }
#popup .popup_nuts .table_box table th,
#popup .popup_nuts .table_box table td { font-size: 13px; font-weight: 400; line-height: 18px; padding: 8px; text-align: left; }
#popup .popup_nuts .table_box table th { vertical-align: top; background: #F8F9FA; }
#popup .popup_nuts .table_box table td { color: #757575; }
#popup .popup_nuts .table_box table td .unit_box { display: flex; justify-content: space-between; width: 100%; }
#popup .btn_main_box { position: relative; width: 100%; text-align: center; margin: 0 auto; } 
#popup .btn_main_box .btn { width: 100%; font-size: 18px; font-weight: 700; color: #ffffff; line-height: 24px; padding: 16px 20px; background: #2AAD5C; border-radius: 12px; display: block; box-sizing: border-box; } 
#popup .btn_main_box .type_border { color: #2AAD5C; background: #ffffff; border: 2px solid #2AAD5C; } 
#popup .btn_main_box .btn:disabled,
#popup .btn_main_box .btn.disabled { color: #aaaaaa; background: #EFEFEF; } 
#popup .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; } 

/*? 모바일 */
@media only screen and (max-device-width : 640px) {
    #popup .popup_wrap.type_full {
        height: calc(var(--vh,1vh) * 100);
    }
    #popup .popup_wrap.type_toast .popup_inner { 
        max-height: calc(var(--vh,1vh) * 80);
    }
}