@charset "utf-8";
/** product_view **/
/* table */
.table { width: 100%; border-top: 1px solid var(--gray-200); border-collapse: collapse; }
.table tr { border-bottom: 1px solid var(--gray-200); }
.table th, .table td { font-size: 13px; font-weight: 400; line-height: 20px; padding: 8px; }
.table th { text-align: left; vertical-align: top; background: var(--neutral-100); }
.table td { color: var(--black-70); }
.table .unit_box { width: 100%; display: flex; justify-content: space-between; }
.table + .table_sub_text { font-size: 12px; font-weight: 400; line-height: 20px; margin-top: 4px; }
/* type_simple */
.table.type_simple { border-top: none; }
.table.type_simple th,.table.type_simple td { background: #ffffff; padding: 7px 0 4px; }
.table.type_simple td { text-align: right; }

/* 메인 이미지 */
.product_img_box { position: relative; width: 100%; overflow: hidden; }
.product_img_box .option_box { position: absolute; left: 20px; top: 12px; display: flex; z-index: 5; }
.product_img_box .option_box span { display: inline-block; height: 22px; font-size: 12px; font-weight: 600; color: var(--purple); line-height: 22px; background: var(--purple-25); padding: 0 8px; border-radius: 12px; margin-right: 8px; }

/* 영양제 소개 */
.product_title_box { position: relative; padding-right: 44px; }
.product_title_box .sub_title { display: block; font-size: 13px; font-weight: 500; color: var(--gray-03); line-height: 20px; }
.product_title_box .title { font-size: 18px; font-weight: 700; line-height: 24px; margin-top: 4px; }
.product_title_box .point_box { display: flex; margin-top: 4px; }
.product_title_box .point_box .star_box { display: flex; margin-right: 4px; }
.product_title_box .point_box .star_box img { width: 16px; }
.product_title_box .point_box > span { font-size: 11px; font-weight: 500; color: var(--gray-400); line-height: 16px; display: inline-block; margin-top: 2px; }
.product_title_box .btn_add_cart { position: absolute; right: 0; top: 0; width: 36px; height: 36px; text-indent: -9999px; background: url(../../image/btn/btn_cart_off.webp) no-repeat center center; background-size: 36px; border: none; border-radius: 50%; box-shadow: var(--shadow-02); display: inline-block; z-index: 5; }
.product_title_box .btn_add_cart.active { background: url(../../image/btn/btn_cart_on.webp) no-repeat center center, var(--purple); background-size: 36px; }
.product_price_box { width: 100%; margin-top: 24px; }
.product_price_box > div:nth-of-type(n+2) { padding-top: 16px; border-top: 1px solid var(--gray-100); margin-top: 16px; }
.product_price_box > div p { margin-bottom: 4px; }
.product_price_box > div p:last-of-type { margin-bottom: 0; }
.product_price_box > div p span { display: inline-block; vertical-align: middle; margin-right: 4px; }
.product_price_box .discount { font-size: 14px; font-weight: 400; color: var(--gray-400); line-height: 24px; text-decoration: line-through; }
.product_price_box .percent { font-size: 18px; font-weight: 700; color: var(--error); line-height: 24px; }
.product_price_box .price { font-size: 18px; font-weight: 700; line-height: 24px; }
.product_price_box .date { font-size: 14px; font-weight: 400; line-height: 24px; }

/* 영양제 상세 */
.product_detail_box + .product_detail_box { padding-top: 16px; border-top: 1px solid var(--gray-100); margin-top: 16px; }
.product_detail_box .info_text { font-size: 14px; font-weight: 400; line-height: 20px; }
.product_detail_box .label_box { display: flex; flex-wrap: wrap; }
.product_detail_box .cont_btn_box { margin-top: 16px; }
.product_detail_box .cont_btn_box .btn { width: 100%; }
.product_detail_box .sub_info_text { font-size: 13px; font-weight: 500; line-height: 16px; }
.product_detail_box .sub_info_text strong { display: inline-block; font-size: 14px; font-weight: 700; margin-right: 4px; }

/* 사용자 후기 */
.photo_review_box { display: flex; justify-content: space-between; }
.photo_review_box .item { width: calc(25% - 5px); height: 21vw; max-height: 105px; min-height: 75px; }
.photo_review_box .img_box { position: relative; width: 100%; height: 100%; background: var(--gray); border-radius: 8px; display: block; overflow: hidden; }
.photo_review_box .btn_review_more::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 13px; font-weight: 500; color: #ffffff; letter-spacing: 1px; line-height: 100%; text-align: center; background: var(--black-50); z-index: 5; content: '+ 더보기'; display: flex; align-items: center; justify-content: center; }
.review_keyword_box { display: flex; flex-wrap: wrap; }
.review_keyword_box .item_keyword { display: flex; height: 22px; background: var(--purple-50); padding: 0 10px; border-radius: 12px; margin: 0 8px 8px 0; }
.review_keyword_box .item_keyword > * { font-size: 13px; font-weight: 500; line-height: 22px; }
.review_keyword_box .item_keyword .text { color: var(--purple); }
.review_keyword_box .item_keyword .like { color: var(--purple-900); display: inline-block; margin-left: 4px; }
.review_keyword_box .item_keyword .like::before { width: 12px; height: 12px; background: url(../../image/icon/icon_like.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -1px; }

/* Q&A */
.qna_list_box > li:nth-of-type(n+2) { padding-top: 16px; border-top: 1px solid var(--gray-100); margin-top: 16px; }
.qna_list_box .q_box { position: relative; font-size: 14px; font-weight: 500; line-height: 20px; word-break: keep-all; padding-left: 20px; }
.qna_list_box .q_box::before { position: absolute; left: 0; top: -1px; font-size: 16px; font-weight: 700; color: var(--purple); content: 'Q'; display: block; }
.qna_list_box .a_box { font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; padding-left: 20px; margin-top: 8px; } 

/* 인증마크 */
.mark_list_box li { display: flex; justify-content: space-between; align-items: center; }
.mark_list_box li:nth-of-type(n+2) { padding-top: 16px; border-top: 1px solid var(--gray-100); margin-top: 16px; }
.mark_list_box img { width: 42px; min-width: 42px; } 
.mark_list_box .text_area { width: calc(100% - 54px); } 
.mark_list_box .text_area dt { font-size: 12px; font-weight: 500; line-height: 20px; } 
.mark_list_box .text_area dd { font-size: 12px; font-weight: 400; color: var(--black-50); line-height: 16px; } 

/* 맞춤영양제 배너 */
.banner_survey { position: relative; width: 100%; background: var(--gray-02); text-align: center; margin-top: 48px; } 
.banner_survey::before { position: absolute; top: -48px; left: 50%; transform: translateX(-50%); width: 69px; height: 67px; background: url(../../image/img_banner_survey.svg) no-repeat center center; content: ''; display: block; } 
.banner_survey h3 { font-size: 16px; font-weight: 700; line-height: 22px; } 
.banner_survey p { font-size: 14px; font-weight: 500; color: var(--black-70); line-height: 20px; margin-top: 4px; } 
.banner_survey .btn { display: inline-block; height: 40px; font-size: 14px; font-weight: 700; color: #ffffff; line-height: 40px; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); padding: 0 38px; border-radius: 24px; background: var(--purple); box-shadow: var(--shadow-02); margin-top: 10px; }