@charset "utf-8";
/*! common */
.mt02 { margin-top: 2px !important; }
.mt04 { margin-top: 4px !important; } 
.mt12 { margin-top: 12px !important; } 
.mt20 { margin-top: 20px !important; } 
.mt24 { margin-top: 24px !important; } 
.mr04 { margin-right: 4px !important; } 
.mr08 { margin-right: 8px !important; } 
.pt24 { padding-top: 24px !important; } 
.pt32 { padding-top: 32px !important; } 
.pb24 { padding-bottom: 24px !important; } 
.pb32 { padding-bottom: 32px !important; } 

.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: 16px !important; } 
.fs_12 { font-size: 12px !important; line-height: 14px !important; } 
.fw_400 { font-weight: 400 !important; } 
.fw_500 { font-weight: 500 !important; } 
.fw_700 { font-weight: 700 !important; } 
.fc_red { color: #ff3535 !important; } 
.fc_gray_700 { color: #aaaaaa !important; } 
.fc_gray_800 { color: #757575 !important; } 

.ellipsis_01 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 
.text_center { text-align: center; }

.cont_box_24 { padding: 24px 20px; } 

.bd_top_01 { border-top: 1px solid #EFEFEF; } 

.pop_open { cursor: pointer; } 

.chip_box { display: flex; flex-wrap: wrap; } 
.chip_box .chip { margin: 0 4px 2px 0; } 
.chip { font-size: 13px; font-weight: 500; line-height: 18px; padding: 4px 8px; border-radius: 4px; display: inline-block; } 
.chip.primary { color: #2AAD5C; background: #F1FBF5; } 
.chip.blue { color: #297DFB; background: #F3F8FF; } 

.star_box .star { display: flex; align-items: center; justify-content: space-between; } 
.star_box .star.size_18 { width: 98px; } 
.star_box .star.size_18 img { width: 18px; } 

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

.tab_nav.type01 { display: flex; background: #ffffff; } 
.tab_nav.type01 li { flex: 1; font-size: 16px; font-weight: 400; color: #757575; line-height: 22px; text-align: center; border-bottom: 2px solid #EFEFEF; padding: 12px; cursor: pointer; } 
.tab_nav.type01 li.active { font-weight: 700; color: #222222; border-bottom: 2px solid #222222; } 
.tab_cont_wrap .tab_cont { display: none; } 
.tab_cont_wrap .tab_cont.active { display: block; } 



/** 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 #EFEFEF; } 
#popup .popup_head .btn_exit { position: absolute; top: 36px; right: 20px; transform: translate(0); width: 24px; height: 24px; background: url(../image/btn/btn_close_black.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-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: bottom 0.5s; } 
#popup.on .popup_wrap.type_toast { bottom: 0; } 
#popup .popup_inner.type_scroll { overflow-y: scroll; padding-bottom: 107px; -ms-overflow-style: none; scrollbar-width: none; } 
#popup .popup_inner.type_scroll::-webkit-scrollbar { display: none; } 
#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; } 
#popup .popup_icon { display: inline-block; }
#popup .popup_icon.size_48 { width: 48px; }

/** POPUP - 영양제 상세 */
.popup_wrap.popup_nuts .popup_head h2 { padding-right: 32px; } 
.popup_wrap.popup_nuts .popup_inner { height: 430px; } 

.popup_wrap.popup_nuts .popup_head .btn_exit { top: 35px; transform: translateY(0); }
.popup_nuts .product_thumbnail_box { position: relative; width: 100%; height: 210px; overflow: hidden; } 
.popup_nuts .product_thumbnail_box img { width: 100%; height: 100%; object-fit: cover; } 
.popup_nuts .product_info_box .review_box { display: flex; align-items: center; } 
.popup_nuts .product_info_box .review_box .star img { width: 14px; vertical-align: -1px; } 
.popup_nuts .product_info_box .review_box .star::after { width: 3px; height: 3px; border-radius: 50%; background: #ddd; content: ''; display: inline-block; vertical-align: 3px; margin: 0 6px 0 4px; } 
.popup_nuts .product_info_box .price_box .discount { text-decoration: line-through; display: inline-block; margin-left: 2px; } 
.popup_nuts .product_info_box .price_box .percent { margin-right: 4px; } 
.popup_nuts .talk_box { padding: 16px; border-radius: 24px; border-bottom-left-radius: 0; background: #F3F8FF; } 
.popup_nuts .talk_person { display: flex; align-items: center; } 
.popup_nuts .talk_person img { width: 44px; margin-right: 8px; } 
.popup_nuts .talk_person dl { flex: 1; } 
.popup_nuts .brand_info_box { display: flex; align-items: stretch; justify-content: space-between; } 
.popup_nuts .brand_info_box > div { width: calc(50% - 4px); padding: 12px; background: #ffffff; border: 1px solid #EFEFEF; border-radius: 8px; } 
.popup_nuts .qna_list_box li { width: 100%; padding: 16px; background: #ffffff; border: 1px solid #EFEFEF; border-radius: 8px; margin-bottom: 8px; } 
.popup_nuts .qna_list_box li:last-of-type { margin-bottom: 0; } 
.popup_nuts .qna_list_box .q_box { position: relative; padding-left: 20px; } 
.popup_nuts .qna_list_box .q_box::before { position: absolute; left: 0; top: -1px; content: 'Q.'; display: block; } 
.popup_nuts .qna_list_box .a_box { position: relative; padding-left: 56px; } 
.popup_nuts .qna_list_box .a_box::after { position: absolute; left: 16px; top: 0; width: 32px; height: 32px; background: url(../image/icon//icon_consultant.svg) no-repeat center center; background-size: contain; content: ''; display: block; } 
.popup_nuts .mark_list_box li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #EFEFEF; padding: 12px 12px; } 
.popup_nuts .mark_list_box li:last-of-type { border-bottom: none; margin-bottom: 0; } 
.popup_nuts .mark_list_box img { width: 42px; min-width: 42px; } 
.popup_nuts .mark_list_box dl { width: calc(100% - 54px); } 
.popup_nuts .table_box h4 { color: #757575; } 
.popup_nuts .table_box table { width: 100%; border-top: 1px solid #EFEFEF; } 
.popup_nuts .table_box table tr { border-bottom: 1px solid #EFEFEF; } 
.popup_nuts .table_box table th,
.popup_nuts .table_box table td { font-size: 13px; font-weight: 400; line-height: 18px; padding: 8px; text-align: left; } 
.popup_nuts .table_box table th { vertical-align: top; background: #F8F9FA; } 
.popup_nuts .table_box table td { color: #757575; } 
.popup_nuts .table_box table td .unit_box { display: flex; justify-content: space-between; width: 100%; } 
.popup_nuts .review_list_wrap .info_box > * { display: inline-block; } 
.popup_nuts .review_list_wrap .user_box .date { margin-left: auto; } 
.popup_nuts .review_list_wrap .review_img_slider .swiper-wrapper > *:first-of-type { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } 
.popup_nuts .review_list_wrap .review_img_slider .swiper-wrapper > *:last-of-type { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } 
.popup_nuts .review_list_wrap .review_img_slider .swiper-slide { width: 152px; height: 152px; overflow: hidden; } 
.popup_nuts .review_list_wrap .review_img_slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.popup_nuts .review_list_wrap .text_review_wrap { height: auto; overflow: hidden; transition: height 0.5s; }
.popup_nuts .review_list_wrap .text_review_wrap.on .text { -webkit-line-clamp: unset; height: auto; max-height: unset; }
.popup_nuts .review_list_wrap .text_review_wrap .text { max-height: 72px; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 4; }
.popup_nuts .review_list_wrap .text_review_wrap + .btn_text_more { font-size: 14px; font-weight: 400; color: #757575; display: inline-block; margin-top: 4px; }