@charset "utf-8";
/*! ──────────────────── none_data_box ──────────────────── */
.none_data_box { width: 100%; text-align: center; padding: 40px 0; } 
.none_data_box .icon_info { width: 24px; height: 24px; background: url(../image/icon/icon_info_gray.svg) no-repeat center center; background-size: contain; display: block; margin: 0 auto 10px; } 
.none_data_box p { font-size: 16px; font-weight: 500; color: var(--gray-500); line-height: 22px; } 
.none_data_box .btn { font-size: 14px; font-weight: 400; color: var(--gray-400); line-height: 20px; display: inline-block; text-decoration: underline; }



/* 영양제정보 - 목록 */
.row_scroll_wrap { position: relative; }
.row_scroll_wrap .row_slider_prev { position: absolute; top: 28px;  left: -16px; width: 24px; height: 24px; background: url(../image/btn/btn_slider_prev.svg) no-repeat center center; background-size: contain; display: block; z-index: 20; cursor: pointer; }
.row_scroll_wrap .row_slider_next { position: absolute; top: 28px; right: -16px; width: 24px; height: 24px; background: url(../image/btn/btn_slider_next.svg) no-repeat center center; background-size: contain; display: block; z-index: 20; cursor: pointer; }
.product_section .search_box .search_input_box { position: relative; width: 100%; height: 52px; overflow: hidden; transition: width 0.5s; } 
.product_section .search_box .search_input_box input[type="text"] { width: 100%; height: 100%; font-size: 16px; line-height: 52px; padding: 0 56px 0 24px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 24px; }
.product_section .search_box .search_input_box input[type="text"]::placeholder { color: var(--gray-400); }
.product_section .search_box .search_input_box input[type="text"]:focus,
.product_section .search_box .search_input_box input[type="text"]:focus-visible { border: 1px solid var(--primary-500); } 
.product_section .search_box .search_input_box .btn_search { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: inline-block; width: 24px; height: 24px; background: url(../image/btn/btn_search.svg) no-repeat left center; background-size: contain; text-indent: -99999px; border-radius: 0 46px 46px 0; overflow: hidden; z-index: 2; } 
.product_section .search_box .search_input_box + .btn_search_exit { width: 0; min-width: 0; height: 52px; font-size: 16px; font-weight: 400; line-height: 24px; white-space: nowrap; margin-left: 0; overflow: hidden; transition: all 0.5s; } 
.product_section .search_box .search_input_box.on { width: calc(100% - 28px); }
.product_section .search_box .search_input_box.on + .btn_search_exit { width: 28px; min-width: 28px; margin-left: 16px; } 
.product_section .search_hint_box { height: calc(100vh - 280px); overflow-y: auto; }
.product_section .search_hint_box::-webkit-scrollbar { display: block; width: 6px; }
.product_section .search_hint_box::-webkit-scrollbar-thumb { background: var(--primary-400); border-radius: 4px; }
.product_section .search_hint_box::-webkit-scrollbar-track { background: var(--primary-100); border-radius: 4px; }
.product_section .search_hint_box ul + ul { border-top: 1px solid var(--gray-100); }
.product_section .search_hint_box ul > li { font-size: 16px; font-weight: 400; color: var(--gray-400); line-height: 48px; padding-right: 4px; cursor: pointer; }
.product_section .search_hint_box ul > li:hover, 
.product_section .search_hint_box ul > li:active { background: var(--gray-50); }
.product_section .search_hint_box ul > li .name { font-weight: 700; color: var(--primary-500); }
.product_section .search_hint_box ul > li .type { display: inline-block; font-size: 13px; margin-left: 4px; }
.product_section .search_hint_box ul > li .type::before { color: var(--gray-400); content: '|'; margin-right: 4px; }
.product_section .search_hint_box ul > li .keyword { color: var(--primary-500); }
.product_section .tab_nav { width: 100%; } 
.product_section .tab_nav > li { width: 50%; font-size: 16px; font-weight: 700; color: var(--gray-400); line-height: 48px; text-align: center; border-bottom: 2px solid var(--gray-100); cursor: pointer; } 
.product_section .tab_nav > li.on { color: var(--primary-500); border-bottom: 2px solid var(--primary-500); } 
.product_section .tab_cont .tab_box { display: none; width: 100%; } 
.product_section .tab_cont .tab_box.on { display: block; } 
.product_section .cate_box { position: relative; width: 100%; margin-bottom: 24px; } 
.product_section .cate_box .cate_select_box { display: inline-block; font-size: 15px; font-weight: 700; color: #6E7191; line-height: 24px; padding: 4px 12px 4px 16px; background: var(--primary-100); border-radius: 24px; cursor: pointer; } 
.product_section .cate_box .cate_select_box::after { width: 20px; height: 20px; vertical-align: -5px; background: url(../image/icon/icon_arrow_down_black.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; opacity: 0.7; margin-left: 8px; }
.product_section .cate_box .type_scroll { width: calc(100% + 48px); white-space: nowrap; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; padding-left: 24px; margin-left: -24px; }
.product_section .cate_box .type_scroll::-webkit-scrollbar { display: none; }
.product_section .cate_box .type_scroll li { display: inline-block; font-size: 16px; font-weight: 700; color: var(--gray-03); line-height: 32px; cursor: pointer; margin-right: 16px; }
.product_section .cate_box .type_scroll li.on { color: var(--primary-500); }
.product_section .cate_tab_cont .cate_tab_box { display: none; } 
.product_section .cate_tab_cont .cate_tab_box.on { display: block; } 
.product_section .product_item_box { padding-bottom: 24px; } 
.product_section .product_item_box .product_list_tit { position: relative; display: flex; align-items: center; width: 100%; padding-right: 34px; } 
.product_section .product_item_box .product_list_tit .rank { display: inline-block; font-size: 14px; font-weight: 700; color: var(--primary-500); line-height: 20px; padding: 3px 12px; background: #ffffff; border: 1px solid var(--primary-500); border-radius: 14px; margin-right: 8px; }
.product_section .product_item_box .product_list_tit h3 { flex: 1; font-size: 18px; font-weight: 700; line-height: 28px; } 
.product_section .product_item_box .product_list_tit::after { position: absolute; right: 0; top: 2px; width: 24px; height: 24px; text-indent: -9999px; background: url(../image/icon/icon_arrow_down_black.svg) no-repeat center center; background-size: contain; cursor: pointer; overflow: hidden; content: ''; display: inline-block; z-index: 1; }
.product_section .product_item_box .product_list_tit.on::after { transform: rotate(180deg); }
.product_section .product_item_box .product_list_box > li:first-of-type { margin-top: 12px; }
/*? POPUP - 카테고리 */ 
#popup .popup_check_list { width: 100%; display: flex; flex-wrap: wrap; padding-bottom: 0; }
#popup .popup_check_list li { width: calc(33.33% - 6px); margin-right: 8px; margin-bottom: 8px; }
#popup .popup_check_list li:nth-of-type(3n) { margin-right: 0; }
#popup .popup_check_list li input[type=checkbox] { display: none; }
#popup .popup_check_list li input[type=checkbox] + label { display: block; width: 100%; font-size: 13px; font-weight: 500; line-height: 40px; text-align: center; background: #ffffff; border: 1px solid var(--gray-100); border-radius: 6px; overflow: hidden; } 
#popup .popup_check_list li input[type=checkbox]:checked + label { color: var(--primary-500); background: var(--primary-50); border: 1px solid var(--primary-500); } 
#popup .btn_pop_box .btn.type_border { width: 130px; min-width: 130px; margin-right: 8px; }
#popup .btn_pop_box .btn_reset::before { width: 20px; height: 20px; background: url(../image/icon/icon_reset.svg) no-repeat center center; background-size: contain; vertical-align: -4px; margin-right: 2px; content: ''; display: inline-block; } 


/* 영양제정보 - 상세 */
.product_view_section .img_main_box { position: relative; width: 100%; overflow: hidden; }
.product_view_section .img_main_box img { width: 100%; }
.product_view_section .img_main_box .badge_box { position: absolute; left: 0; top: 0; flex-wrap: wrap; width: 100%; padding: 12px 24px; z-index: 1; }
.product_view_section .img_main_box .badge_box span { font-size: 12px; font-weight: 700; color: #0D99FF; line-height: 20px; padding: 0 8px; background: var(--white); border-radius: 12px; display: inline-block; margin: 0 4px 4px 0; }
.product_view_section .img_main_box .badge_box span.primary { color: var(--primary-500); }
.product_view_section .img_main_box .badge_box span.green { color: var(--sub-600); }
.product_view_section .title_box { position: relative; padding-right: 44px; }
.product_view_section .title_box .category { font-size: 13px; font-weight: 500; color: var(--gray-500); line-height: 20px; display: block; }
.product_view_section .title_box .name { font-size: 18px; font-weight: 700; line-height: 24px; margin-top: 4px; }
.product_view_section .title_box .btn_add_cart { position: absolute; right: 0; top: 0; }
.product_view_section .price_box > div:nth-of-type(n+2) { padding-top: 16px; border-top: 1px solid var(--gray-50); margin-top: 16px; }
.product_view_section .price_box span { display: inline-block; vertical-align: middle; margin-right: 4px; }
.product_view_section .price_box .label { font-size: 13px; font-weight: 600; color: #0D99FF; line-height: 24px; padding: 0 8px; background: rgba(13, 153, 255, 0.10); border-radius: 4px; }
.product_view_section .price_box .label.green { color: var(--sub-500); background: var(--sub-50); }
.product_view_section .price_box .unit { font-size: 13px; font-weight: 400; color: var(--gray-500); line-height: 24px; }
.product_view_section .price_box .percent { font-size: 18px; font-weight: 700; color: var(--red); line-height: 24px; }
.product_view_section .price_box .price { font-size: 18px; font-weight: 700; line-height: 24px; }
.product_view_section .price_box .discount { font-size: 13px; font-weight: 400; color: var(--gray-300); line-height: 24px; text-decoration: line-through; }
.product_view_section .detail_box .effect_box { flex-wrap: wrap; }
.product_view_section .detail_box .effect_box > span { font-size: 13px; font-weight: 400; line-height: 24px; padding: 0 8px; background: var(--gray-75); border-radius: 12px; display: inline-block; margin: 0 4px 4px 0; }
.product_view_section .detail_box .info_box > li { width: calc(50% - 4px); padding: 12px; border: 1px solid var(--gray-100); border-radius: 8px; }
.product_view_section .detail_box .info_box > li p { color: var(--gray-500); }
.product_view_section .detail_box .btn_sub_box .btn { padding: 8px 12px; }
.product_view_section .qna_box > li:nth-of-type(n+2) { padding-top: 16px; border-top: 1px solid var(--gray-50); margin-top: 16px; }
.product_view_section .qna_box .q_box { position: relative; font-size: 14px; font-weight: 500; line-height: 20px; word-break: keep-all; padding-left: 20px; }
.product_view_section .qna_box .q_box::before { position: absolute; left: 0; top: -1px; font-size: 16px; font-weight: 700; color: var(--primary-500); content: 'Q'; display: block; }
.product_view_section .qna_box .a_box { font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; padding-left: 20px; margin-top: 8px; }
.product_view_section .mark_box li:nth-of-type(n+2) { padding-top: 16px; border-top: 1px solid var(--gray-50); margin-top: 16px; }
.product_view_section .mark_box img { width: 42px; min-width: 42px; }
.product_view_section .mark_box .text_area { flex: 1; padding-left: 12px; }
.product_view_section .mark_box .text_area dt { font-size: 12px; font-weight: 500; line-height: 20px; }
.product_view_section .mark_box .text_area dd { font-size: 12px; font-weight: 400; color: var(--gray-400); line-height: 16px; }
.product_banner_box { position: relative; text-align: center; background: var(--primary-100); }
.product_banner_box::before { position: absolute; top: -48px; left: 50%; transform: translateX(-50%); width: 69px; height: 67px; background: url(../image/icon/icon_banner_question.svg) no-repeat center center; content: ''; display: block; }
.product_banner_box h3 { font-size: 16px; font-weight: 700; line-height: 22px; }
.product_banner_box p { font-size: 14px; font-weight: 500; color: var(--gray-600); line-height: 20px; margin-top: 4px; }
.product_banner_box .btn { height: 40px; font-size: 14px; font-weight: 700; color: var(--white); line-height: 40px; padding: 0 38px; border-radius: 24px; background: var(--primary-500); box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10); display: inline-block; margin-top: 10px; }


/* 고객후기 */
.review_data_box { display: flex; align-items: center; justify-content: center; background: var(--gray-50); border-radius: 12px; padding: 20px; }
.review_data_box .total_area { text-align: center; margin-right: 16px; }
.review_data_box .total_area .text_view b { font-size: 36px; font-weight: 700; line-height: 36px; }
.review_data_box .total_area .text_view span { font-size: 14px; font-weight: 400; color: var(--gray-200); }
.review_data_box .graph_box { width: 150px; }
.review_data_box .graph_box ul { display: flex; justify-content: center; align-items: flex-start; }
.review_data_box .graph_box .box { position: relative; text-align: center; padding-top: 24px; }
.review_data_box .graph_box .box + .box { margin-left: 8px; }
.review_data_box .graph_box .graph_label { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 18px; font-size: 11px; font-weight: 700; color: var(--white); line-height: 20px; padding: 0 4px; background: var(--red); border-radius: 4px; display: inline-block; }
.review_data_box .graph_box .bar_wrap { position: relative; width: 9px; height: 44px; background: var(--gray-100); border-radius: 12px; margin: 0 auto; overflow: hidden; }
.review_data_box .graph_box .bar_wrap .bar { position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 12px; background: var(--red); }
.review_data_box .graph_box .point { font-size: 13px; font-weight: 500; line-height: 22px; display: block; opacity: 0.3; margin-top: 6px; }
.review_list_box .list_top_area { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.review_list_box .list_top_area .total_view { font-size: 16px; font-weight: 700; line-height: 24px; }
.review_list_box .list_top_area .photo_chk_area label { font-size: 16px; font-weight: 400; line-height: 24px; display: inline-block; }
.review_list_box .list_top_area .photo_chk_area input[type="checkbox"] + label::before { width: 24px; height: 24px; background: url(../image/icon/icon_chkbox_circle_off.svg) no-repeat left center; background-size: 24px; content: ''; display: inline-block; vertical-align: -7px; margin-right: 4px; } 
.review_list_box .list_top_area .photo_chk_area input[type="checkbox"]:checked + label::before { background: url(../image/icon/icon_chkbox_circle_on.svg) no-repeat left center; background-size: 24px; } 
.review_list_box .list { padding: 24px 0; border-top: 1px solid var(--gray-100); }
.review_list_box .list .user_box { display: flex; }
.review_list_box .list .user_box .label { font-size: 13px; font-weight: 600; color: var(--primary-500); line-height: 24px; padding: 0 8px; background: var(--primary-100); border-radius: 12px; display: inline-block; margin-right: 8px; }
.review_list_box .list .user_box .label.red { color: var(--white); background: var(--red); }
.review_list_box .list .user_box .name { font-size: 14px; line-height: 22px; }
.review_list_box .list .user_box .date { font-size: 14px; color: var(--gray-400); margin-left: auto; line-height: 22px; }
.review_list_box .list .text_view_wrap { height: 88px; overflow: hidden; transition: height 0.5s; }
.review_list_box .list .text_view_wrap.on .text_view_area { -webkit-line-clamp: unset; height: auto; max-height: unset; }
.review_list_box .list .text_view_wrap .text_view_area { max-height: 88px; font-size: 14px; color: var(--gray-700); line-height: 22px; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.review_list_box .list .text_view_wrap + .btn_more { font-size: 14px; font-weight: 700; color: var(--primary-500); display: inline-block; margin-top: 4px; }
.review_list_box .list .text_view_wrap + .btn_more::after { width: 18px; height: 18px; background: url(../image/icon/icon_arrow_down_primary.svg) no-repeat center center; background-size: 24px; content: ''; display: inline-block; vertical-align: -3px; margin-left: 2px; }
.review_list_box .list .text_view_wrap.on + .btn_more::after { transform: rotate(180deg); }
.review_list_box .list .img_view_area ul { width: 100%; white-space: nowrap; overflow: hidden; }
.review_list_box .list .img_view_area ul li { position: relative; display: inline-block; width: 60px; height: 60px; background: var(--gray-50); cursor: pointer; overflow: hidden; margin-right: 4px; }
.review_list_box .list .img_view_area ul li img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: auto; min-height: 100%; object-fit: cover; }
.review_list_box .list .img_view_area ul li video { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: auto; min-height: 100%; }


/* 메디콕 소식 */
.board_section .label { font-size: 13px; font-weight: 500; color: var(--primary-500); line-height: 24px; padding: 0 8px; background: var(--primary-100); border-radius: 4px; display: inline-block; }
.board_section .title { font-size: 16px; font-weight: 700; line-height: 22px; margin-top: 6px; }
.board_section .title.text_over { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; }
.board_section .date { font-size: 14px; color: var(--gray-400); line-height: 20px; display: block; margin-top: 4px; }
.board_section .list_nav_box { display: flex; }
.board_section .list_nav_box a { width: 90px; font-size: 16px; font-weight: 700; color: var(--gray-400); line-height: 22px; padding: 10px 8px; text-align: center; border-bottom: 2px solid transparent; cursor: pointer; }
.board_section .list_nav_box a.on { color: var(--primary-500); border-bottom: 2px solid var(--primary-500); }
.board_section .list_box.type_thum ul > li { width: 100%; border-radius: var(--border-radius); margin-bottom: 16px; } 
.board_section .list_box.type_thum .img_area { position: relative; display: flex; width: 100%; border: 1px solid var(--primary-100); border-radius: 12px 12px 0 0; overflow: hidden; } 
.board_section .list_box.type_thum .text_area { border: 1px solid var(--primary-100); border-radius: 0 0 12px 12px; padding: 16px 20px 20px; border-top: 0; } 
.board_section .list_box.type_thum .end .img_area::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--white); background: rgba(0,0,0,0.6); content: '종료된 이벤트 입니다.'; z-index: 1; } 
.board_section .list_box.type_list ul > li { position: relative; border-bottom: 1px solid var(--primary-100); }
.board_section .list_box.type_list ul > li a { width: 100%; padding: 16px 0; display: block; } 
.board_section .top_title_area { padding: 16px 0; border-bottom: 1px solid var(--gray-100); }
.board_section .view_detail_box { padding: 24px 0; }
.board_section .view_detail_box > * { font-size: 14px; font-weight: 400; line-height: 22px; margin: 8px 0; }
.board_section .view_nav_box > div { display: flex; align-items: flex-start; }
.board_section .view_nav_box .prev_box + .next_box { border-top: 1px solid var(--gray-100); padding-top: 16px; margin-top: 16px; }
.board_section .view_nav_box .text { width: 56px; font-size: 14px; font-weight: 400; color: var(--gray-400); line-height: 22px; display: block; }
.board_section .view_nav_box .link { width: calc(100% - 56px); padding-left: 24px; }


/* 고객센터 */
.cs_section .cont_box.bg_primary { padding: 64px 24px 32px; } 
.cs_section .btn_kakao { width: 100%; font-size: 18px; font-weight: 700; line-height: 24px; text-align: center; padding: 20px 24px; background: #FEE500; border-radius: 12px; display: block; } 
.cs_section .btn_kakao::before { width: 24px; height: 24px; background: url(../image/icon/icon_kakaotalk.svg) no-repeat center center; content: ''; display: inline-block; vertical-align: -6px; margin-right: 8px; } 
.cs_section .tab_nav { display: flex; flex-wrap: wrap; justify-content: flex-start; } 
.cs_section .tab_nav li { height: 38px; font-size: 15px; font-weight: 700; color: var(--gray-500); line-height: 26px; padding: 6px 12px; background: var(--gray-50); border-radius: 20px; cursor: pointer; margin-right: 10px; margin-bottom: 10px; } 
.cs_section .tab_nav li.on { background-color: var(--primary-500); color: var(--white); } 
.cs_section .tab_cont .tab_box { display: none; } 
.cs_section .tab_cont .tab_box.on { display: block; } 
.cs_section .list_box ul::-webkit-scrollbar { display: none; } 
.cs_section .list_box ul li { width: 100%; border-bottom: 1px solid var(--primary-100); overflow: hidden; } 
.cs_section .list_box ul li .title { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 24px 0; cursor: pointer; } 
.cs_section .list_box ul li .title em { display: block; font-size: 16px; font-weight: 700; line-height: 22px; color: var(--gray-900); } 
.cs_section .list_box ul li .arrow { position: relative; display: block; width: 30px; min-width: 30px; height: 22px; } 
.cs_section .list_box ul li .arrow::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 2px; background: var(--gray-900); content: ''; display: block; } 
.cs_section .list_box ul li .arrow::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 14px; background: var(--gray-900); content: ''; display: block; transition: all .3s ease-in-out; } 
.cs_section .list_box ul li .answer { display: none; font-size: 14px; color: var(--gray-700); line-height: 22px; word-break: keep-all; padding: 0 0 24px; } 
.cs_section .list_box .toggle_tab.on .arrow::after { transform: translate(-50%, -50%) rotate(90deg); } 
.cs_section .list_box .toggle_cont.on { display: block; }