@charset "utf-8";
/** product **/
/* 검색창 */
.search_box { width: 100%; display: flex; justify-content: space-between; } 
.search_box .search_input_box { position: relative; width: 100%; height: 52px; border-radius: 8px; overflow: hidden; z-index: 0; transition: width 0.5s; } 
.search_box .search_input_box input[type="text"] { position: static; width: 100%; height: 100%; font-size: 16px; line-height: 52px; padding: 0 56px 0 16px; background: var(--gray-50); border: 1px solid var(--gray-50); border-radius: 8px; }
.search_box .search_input_box input[type="text"]::placeholder { color: var(--gray-400); }
.search_box .search_input_box input[type="text"]:focus,
.search_box .search_input_box input[type="text"]:focus-visible { border: 1px solid var(--purple); } 
.search_box .search_btn { 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; text-indent: -99999px; border-radius: 0 46px 46px 0; overflow: hidden; z-index: 2; } 
.search_box .search_exit_btn { 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; } 
.search_box .search_exit_btn.on { width: 28px; min-width: 28px; margin-left: 16px; } 

/* 자동완성 */
.search_hint_box { height: calc(100% - 256px); margin-top: 24px; overflow-y: auto; } 
.search_hint_box::-webkit-scrollbar { -webkit-appearance: none; }
.search_hint_box::-webkit-scrollbar-vertical { width: 2px; }
.search_hint_box::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 14px; }
.search_hint_box ul + ul { border-top: 1px solid var(--gray-100); }
.search_hint_box ul > li { font-size: 16px; font-weight: 400; color: var(--gray-03); line-height: 48px; padding: 0 4px; cursor: pointer; }
.search_hint_box ul > li:hover, 
.search_hint_box ul > li:active { background: var(--gray-100); } 
.search_hint_box ul > li .name { font-weight: 700; color: var(--purple); }
.search_hint_box ul > li .type { display: inline-block; font-size: 13px; margin-left: 4px; }
.search_hint_box ul > li .type::before { content: '|'; margin-right: 4px; }
.search_hint_box ul > li .keyword { color: var(--purple); }

/* 검색결과 */
.search_result_box { margin-top: 24px; }
.result_list_box { margin-top: 24px; }


/* 추천받은 영양제 목록 */
.recommend_list_box { margin-top: 24px; }
.recommend_list_box > p { color: var(--black-70); margin-top: 4px; }
.row_scroll_wrap { margin-top: 24px; }

/* 추천받은 영양제 없을 때 */
.none_data_box { width: 100%; text-align: center; padding: 54px 0 30px; }
.none_data_box .icon_warning { display: block; width: 24px; height: 24px; background: url(../../image/icon/icon_warning_g.svg) no-repeat center center; background-size: contain; margin: 0 auto 4px; }
.none_data_box h3 { font-size: 18px; font-weight: 700; line-height: 24px; }
.none_data_box p { font-size: 16px; font-weight: 400; }

/* 영양제 전체 목록 */
.tab_nav { width: 100%; display: flex; justify-content: space-between; } 
.tab_nav > li { width: 50%; font-size: 16px; font-weight: 700; color: var(--gray-03); line-height: 48px; text-align: center; border-bottom: 2px solid var(--gray-300); cursor: pointer; } 
.tab_nav > li.on { color: var(--purple); border-bottom: 2px solid var(--purple); } 
.tab_cont_wrap { margin-top: 24px; } 
.tab_cont_wrap .tab_cont { display: none; width: 100%; } 
.tab_cont_wrap .tab_cont.active { display: block; } 
.cate_box { position: relative; width: 100%; margin-bottom: 24px; } 
.cate_box .type_select { display: inline-block; font-size: 16px; font-weight: 700; color: var(--gray-900); line-height: 22px; cursor: pointer; } 
.cate_box .type_select::after { width: 20px; height: 20px; vertical-align: -5px; background: url(../../image/icon/icon_toggle_b.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; margin-left: 8px; } 
.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; }
.cate_box .type_scroll::-webkit-scrollbar { display: none; }
.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; }
.cate_box .type_scroll li.on { color: var(--purple); }
.cate_tab_cont .cate_tab_box { display: none; } 
.cate_tab_cont .cate_tab_box.on { display: block; } 
.product_item_box { padding-bottom: 24px; border-bottom: 1px solid var(--gray-100); margin-bottom: 24px; } 
.product_item_box .product_list_tit { position: relative; display: flex; align-items: center; width: 100%; padding-right: 34px; } 
.product_item_box .product_list_tit .rank { display: inline-block; font-size: 14px; font-weight: 700; color: var(--purple); line-height: 20px; padding: 3px 12px; background: #ffffff; border: 1px solid var(--purple); border-radius: 14px; margin-right: 8px; }
.product_item_box .product_list_tit h3 { flex: 1; font-size: 18px; font-weight: 700; line-height: 28px; } 
.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_toggle_b.svg) no-repeat center center; background-size: contain; cursor: pointer; overflow: hidden; content: ''; display: inline-block; z-index: 1; }
.product_item_box .product_list_tit.on::after { transform: rotate(180deg); }
.product_item_box .product_list_box > li:first-of-type { margin-top: 12px; }

/* POPUP - 성분 카테고리 */
#popup .popup_check_list ul { width: 100%; display: flex; flex-wrap: wrap; padding-bottom: 0; } 
#popup .popup_check_list ul li { width: calc(33.33% - 6px); margin-right: 8px; margin-bottom: 8px; } 
#popup .popup_check_list ul li:nth-of-type(3n) { margin-right: 0; } 
#popup .popup_check_list ul li input[type=checkbox] { display: none; } 
#popup .popup_check_list ul 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-200); border-radius: 6px; overflow: hidden; } 
#popup .popup_check_list ul li input[type=checkbox]:checked + label { color: var(--purple); background: var(--purple-50); border: 1px solid var(--purple); } 
#popup .pop_btn_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; }