@charset "utf-8"; 
/** PRODUCT - 영양제 정보 상세 **/
.cart_quick_btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: var(--border-light); box-shadow: 2px 2px 8px rgba(0,0,0,0.1); text-indent: -99999px; background: url(../../image/btn/btn_cart.svg) no-repeat center center, var(--color-white); } 
.btn_blog_view { position: absolute; right: 0; top: 0; font-size: var(--font-regular); font-weight: 700; color: var(--color-main); line-height: 22px; display: inline-block; z-index: 5; } 
.btn_blog_view::before { position: absolute; left: 0; bottom: 0; width: calc(100% - 12px); height: 2px; background: var(--color-main); content: ''; display: block; } 
.btn_blog_view::after { width: 8px; height: 12px; background: url(../../image/btn/btn_arrow_purple.svg) no-repeat right center; background-size: 7.5px; vertical-align: -1px; margin-left: 4px; content: ''; display: inline-block; } 

/* 메인 이미지 */
.img_area { position: relative; width: 100%; } 
.img_area img { width: 100%; } 
.img_area .product_label_area { position: absolute; left: 24px; top: 12px; display: flex; justify-content: flex-start; align-items: center; } 
.img_area .product_label_area .label { display: inline-block; height: 20px; font-size: var(--font-small-xs); font-weight: 700; line-height: 20px; padding: 0 6px; background-color: var(--color-white); border-radius: 30px;; } 
.img_area .product_label_area .label + .label { margin-left: 4px; } 
.img_area .product_label_area .label.type_pp { color: var(--color-main); } 
.img_area .product_label_area .label.type_bl { color: #0d99ff; } 
.img_area .product_label_area .label.type_b2 { color: #18C69C; } 

/* 상세정보 - 상단 */
.top_into_wrap { border-bottom: var(--border-light); } 
.top_into_wrap .title_area { position: relative; padding-right: 50px; margin-bottom: 18px; } 
.top_into_wrap .title_area .sub_title { display: block; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--color-gray); } 
.top_into_wrap .title_area .main_title { font-size: var(--font-medium); font-weight: 700; line-height: 24px; word-break: keep-all; } 
.top_into_wrap .price_info_area { margin-top: 8px; } 
.top_into_wrap .price_info_area dl { border-top: var(--border-light); padding: 12px 0; } 
.top_into_wrap .price_info_area dl:first-of-type { padding: 0 0 12px; border-top: none; } 
.top_into_wrap .price_info_area dl dt * { display: inline-block; } 
.top_into_wrap .price_info_area dl dt .label { min-width: 76px; height: 22px; font-size: 13px; font-weight: 500; line-height: 22px; padding: 0 8px; text-align: center; background-color: #eff0f6; border-radius: 5px; margin-right: 4px; } 
.top_into_wrap .price_info_area dl dt .lb_type01 { color: #0D99FF; background: rgba(13, 153, 255, 0.1); } 
.top_into_wrap .price_info_area dl dt .lb_type02 { color: #18C69C; background: rgba(24, 198, 156, 0.1); } 
.top_into_wrap .price_info_area dl dt .date { font-size: var(--font-small-xs); font-weight: 400; line-height: 24px; } 
.top_into_wrap .price_info_area dl dd { margin-top: 4px; } 
.top_into_wrap .price_info_area dl dd * { display: inline-block; } 
.top_into_wrap .price_info_area dl dd .percent { font-size: var(--font-medium); font-weight: 700; color: var(--color-red); line-height: 24px; margin-right: 4px; } 
.top_into_wrap .price_info_area dl dd .price { font-size: var(--font-medium); font-weight: 700; line-height: 24px; margin-right: 4px; } 
.top_into_wrap .price_info_area dl dd .discount { font-size: var(--font-small); font-weight: 400; line-height: 24px; opacity: 0.5; text-decoration: line-through; } 

/* 상세정보 - 하단 */
.datail_info_wrap { position: relative; } 
.detail_contents { margin-top: 24px; } 
.detail_contents .contents_title { font-size: var(--font-regular); font-weight: 700; line-height: 22px; margin-bottom: 8px; } 
.detail_contents .contents_title_sm { font-size: 13px; font-weight: 500; color: var(--color-black-40); line-height: 20px; margin-bottom: 4px; } 
.type_text .contents_text { font-size: var(--font-small); font-weight: 400; line-height: 20px; } 
.type_text .label_area { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-top: 8px; } 
.type_text .label_area .label { display: inline-block; height: 20px; font-size: var(--font-small-xs); font-weight: 400; line-height: 20px; padding: 0 6px; background: var(--bg-gray); border-radius: 10px; margin-right: 4px; } 
.type_box01 .box_wrap { display: flex; justify-content: space-between; align-items: center; } 
.type_box01 .box_wrap .box { width: calc(50% - 4px); height: 72px; padding: 12px; background: var(--color-white); border: var(--border-light); border-radius: var(--border-radius-s); } 
.type_box01 .box_wrap .box .box_title { font-size: var(--font-small); font-weight: 700; line-height: 17px; } 
.type_box01 .box_wrap .box .box_text { font-size: 13px; font-weight: 400; line-height: 16px; } 
.type_box02 .box { background: var(--color-white); border: var(--border-light); border-radius: var(--border-radius-s); padding: 8px 12px 12px; } 
.type_box02 .box ul { margin-bottom: 8px; } 
.type_box02 .box ul li { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: var(--border-light); } 
.type_box02 .box ul li:last-of-type { border-bottom: none; } 
.type_box02 .box ul li span { font-size: 13px; font-weight: 400; line-height: 20px; } 
.type_box02 .box .btn { display: inline-block; width: 100%; height: 36px; font-size: var(--font-small); font-weight: 500; line-height: 36px; background: var(--color-white); border: 1px solid var(--color-black); border-radius: var(--border-radius-s); } 
.type_box_qa .box { background: var(--color-white); border: var(--border-light); border-radius: var(--border-radius-s); padding: 12px; } 
.type_box_qa .box .title_area { display: flex; justify-content: flex-start; align-items: flex-start; } 
.type_box_qa .box .title_area em { display: inline-block; min-width: 14px; font-size: var(--font-small); font-weight: 700; color: var(--color-main); line-height: 20px; } 
.type_box_qa .box .title_area .title { width: calc(100% - 20px); font-size: 13px; font-weight: 700; line-height: 20px; margin-left: 6px; } 
.type_box_qa .box .text_area { display: flex; justify-content: flex-start; align-items: flex-start; padding-left: 16px; margin-top: 8px; } 
.type_box_qa .box .text_area i { display: inline-block; width: 21px; min-width: 21px; height: 18px; background: url(../../image/icon/icon_cs.svg) no-repeat center center; } 
.type_box_qa .box .text_area .text { width: calc(100% - 27px); font-size: 13px; font-weight: 400; color: var(--color-black-70); line-height: 20px; margin-left: 6px; } 
.type_mark_list li { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--border-light); padding: 12px 12px; } 
.type_mark_list li:last-of-type { border-bottom: none; margin-bottom: 0; } 
.type_mark_list img { width: 42px; min-width: 42px; } 
.type_mark_list .text_area { width: calc(100% - 54px); } 
.type_mark_list .text_area .title { font-size: var(--font-small-xs); font-weight: 500; line-height: 20px; } 
.type_mark_list .text_area .text { font-size: var(--font-small-xs); font-weight: 400; color: var(--color-black-70); line-height: 18px; } 
.go_intro_area { position: relative; width: 100%; background-color: #eff0f6; padding: 24px 0; text-align: center; margin-top: 48px; } 
.go_intro_area::before { position: absolute; top: -48px; left: 50%; transform: translateX(-50%); width: 69px; height: 67px; background: url(../../image/sub_product/img_product_question.svg) no-repeat center center; content: ''; display: block; } 
.go_intro_area .title { font-size: var(--font-regular); font-weight: 700; line-height: 22px; } 
.go_intro_area .text { font-size: 13px; font-weight: 500; color: var(--color-black-70); line-height: 20px; } 
.go_intro_area .btn { display: inline-block; height: 40px; font-size: var(--font-small); font-weight: 700; color: var(--color-white); line-height: 40px; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); padding: 0 38px; border-radius: 24px; background-color: var(--color-main); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); margin-top: 10px; } 

/* popup */
.popup_product_detail .contents_title { font-size: var(--font-small); font-weight: 700; line-height: 20px; margin-bottom: 6px; } 
.popup_product_detail .table_wrap table { width: 100%; border-top: 1px solid rgba(34,34,34,0.1); } 
.popup_product_detail .table_wrap table tr { border-bottom: 1px solid rgba(34,34,34,0.1); }
.popup_product_detail .table_wrap table th, 
.popup_product_detail .table_wrap table td { font-size: 13px; font-weight: 400; line-height: 20px; padding: 8px; text-align: left; } 
.popup_product_detail .table_wrap table th { vertical-align: top; background: rgba(34,34,34,0.06); } 
.popup_product_detail .table_wrap table td { color: var(--color-black-70); } 
.popup_product_detail .table_wrap table td .unit_box { display: flex; justify-content: space-between; width: 100%; } 
.popup_product_detail .table_wrap .table_sub_text { font-size: var(--font-small-xs); font-weight: 400; line-height: 20px; } 
.popup_product_detail .table_wrap + .table_wrap { margin-top: 30px; }