@charset "utf-8";
/* ? Common */
.bg_gray_100 { background: var(--gray-100); }
.cont_tit { font-size: 18px; font-weight: 700; line-height: 26px; word-break: keep-all; }

.btn_sub_box { width: 100%; text-align: center; margin-top: 16px; }
.btn_sub_box .btn { display: inline-block; font-size: 14px; font-weight: 500; color: var(--purple); line-height: 20px; padding: 12px 16px; border: 1px solid var(--purple-200); border-radius: 8px; }
.btn_sub_box .btn::after { width: 20px; height: 20px; background: url(../../image/icon/icon_btn_arrow_pp.svg) no-repeat center center; background-size: 24px; content: ''; display: inline-block; vertical-align: -5px; margin-left: 6px; }

.chk_box { display: inline-block; }
.chk_box input[type=checkbox] { display: none; }
.chk_box input[type=checkbox] + label { display: inline-block; width: 20px; width: 20px; height: 20px; background: #FFF; border: 1px solid var(--gray-300); border-radius: 6px; text-indent: -9999px; overflow: hidden; } 
.chk_box input[type=checkbox]:checked + label { background: url(../../image/icon/icon_check_purple.svg) no-repeat center center,var(--purple-50); background-size: 14px; border: 1px solid var(--purple); } 

.radio_list_box li { margin-bottom: 12px; }
.radio_list_box li:last-of-type { margin-bottom: 0; }
.radio_list_box input[type=radio] { display: none; }
.radio_list_box input[type=radio] + label { position: relative; display: flex; align-items: flex-start; padding: 15px 20px; background: #ffffff; border: 1px solid var(--gray-300); border-radius: 12px; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10); }
.radio_list_box input[type=radio] + label .icon_radio { position: relative; display: inline-block; width: 20px; min-width: 20px; height: 20px; border: 1px solid #d0d0d0; border-radius: 50%; box-sizing: border-box; margin: 1px 8px 0 0; }
.radio_list_box input[type=radio] + label .icon_radio::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; background: var(--purple); border-radius: 50%; content: ''; display: block; opacity: 0; }
.radio_list_box input[type=radio] + label .text_box { width: calc(100% - 28px); }
.radio_list_box input[type=radio] + label .text { display: block; font-size: 18px; color: var(--gray-500); line-height: 24px; }
.radio_list_box input[type=radio] + label .sub_text { display: block; font-size: 14px; color: var(--gray-500); line-height: 20px; word-break: keep-all; margin-top: 5px; }
.radio_list_box input[type=radio]:checked + label { border: 1px solid var(--purple); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); }
.radio_list_box input[type=radio]:checked + label .icon_radio { background: var(--purple-50); border: 1px solid var(--purple); }
.radio_list_box input[type=radio]:checked + label .icon_radio::after { opacity: 1; }
.radio_list_box input[type=radio]:checked + label .text,
.radio_list_box input[type=radio]:checked + label .sub_text { color: #222; }

/*! 선물하기 - 정기구독 / 상품권 / 패키지 */
.pack_list_box, .guide_list_box, .period_list_box, .notice_list_box, .nutr_list_box, .qna_list_box { margin-top: 16px; }

/* 상품정보 */
.info_top { display: flex; flex-wrap: wrap; align-items: center; } 
.info_top .img_box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; min-width: 76px; height: 60px; } 
.info_top .img_box img { width: 60px; max-width: 60px; } 
.info_top .img_box.type_icon img { width: 39px; max-width: 39px; }
.info_top .title_box { width: calc(100% - 76px); padding-left: 8px; } 
.info_top .title_box dt { font-size: 18px; font-weight: 700; color: var(--gray-900); } 
.info_top .title_box dd { font-size: 16px; font-weight: 600; color: var(--purple); margin-top: 4px; } 
.info_top .text_box { width: 100%; font-size: 14px; color: var(--gray-900); line-height: 20px; margin-top: 12px; } 
.info_bottom { width: 100%; text-align: right; padding-top: 12px; border-top: 1px solid var(--gray-300); margin-top: 12px; } 
.info_bottom .text { font-size: 18px; font-weight: 600; color: var(--gray-500); line-height: 26px; word-break: keep-all; } 
.info_bottom .price_origin { font-size: 14px; font-weight: 400; color: #888; text-decoration: line-through; }
.info_bottom .price_current .discount { display: inline-block; font-size: 18px; font-weight: 700; color: var(--tag-red); line-height: 26px; margin-right: 4px; }
.info_bottom .price_current .total { display: inline-block; font-size: 18px; font-weight: 700; line-height: 26px; }

/* 이용방법 */
.guide_list_box { width: 100%; padding: 16px; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10); border-radius: 16px; } 
.guide_list_box > li { display: flex; align-items: center; margin-bottom: 12px; } 
.guide_list_box > li:last-of-type { margin-bottom: 0; } 
.guide_list_box > li .icon { display: block; width: 48px; min-width: 48px; height: 48px; border: 1px solid #F0F0F0; border-radius: 12px; overflow: hidden; margin-right: 8px; } 
.guide_list_box > li .icon.icon_card { background: url(../../image/gift/icon_card.svg) no-repeat center center, #ffffff; background-size: 32px; } 
.guide_list_box > li .icon.icon_talk { background: url(../../image/gift/icon_talk.svg) no-repeat center center, #ffffff; background-size: 26px; } 
.guide_list_box > li .icon.icon_cs { background: url(../../image/gift/icon_cs.svg) no-repeat center center, #ffffff; background-size: 32px; } 
.guide_list_box > li .icon.icon_day { background: url(../../image/gift/icon_fiveday.svg) no-repeat center center, #ffffff; background-size: 30px; } 
.guide_list_box > li .icon.icon_coupon { background: url(../../image/gift/icon_coupon.svg) no-repeat center center, #ffffff; background-size: 32px; } 
.guide_list_box > li .icon.icon_heart { background: url(../../image/gift/icon_heart.svg) no-repeat center center, #ffffff; background-size: 32px; } 
.guide_list_box > li .icon.icon_choice { background: url(../../image/gift/icon_choice.svg) no-repeat center center, #ffffff; background-size: 32px; } 
.guide_list_box > li p { width: calc(100% - 56px); font-size: 14px; font-weight: 400; line-height: 20px; } 
.guide_list_box > li p b { font-weight: 700; } 

/* 유의사항 */
.notice_list_box > li { position: relative; font-size: 14px; line-height: 22px; word-break: keep-all; padding-left: 21px; margin-bottom: 8px; }
.notice_list_box > li:last-of-type { margin-bottom: 0; }
.notice_list_box > li::before { position: absolute; left: 9px; top: 10px; width: 3px; height: 3px; background: #222; border-radius: 50%; content: ''; display: block; }

/* 한 달 구성 선택 */
.month_pack_box .cont_tit_box { position: relative; min-height: 90px; padding-right: 115px; }
.month_pack_box .cont_tit_box::after { position: absolute; right: 0; top: 0; width: 85px; height: 90px; background: url(../../image/gift/img_sample_pack.webp) no-repeat center center; background-size: contain; content: ''; display: block; }
.month_pack_box .cont_tit_box .cont_desc { font-size: 16px; font-weight: 400; color: var(--color-black-70); line-height: 20px; word-break: keep-all; margin-top: 8px; }

/* 영양제구성 */
.nutr_list_box > li { margin-bottom: 12px; }
.nutr_list_box > li:last-of-type { margin-bottom: 0; }
.nutr_list_box .nutr_item { position: relative; width: 100%; padding: 16px; border: 1px solid #d0d0d0; border-radius: 16px; }
.nutr_list_box .nutr_item .chk_box { margin-right: 4px; }
.nutr_list_box .nutr_item .btn_delete { position: absolute; right: 16px; top: 15px; width: 24px; height: 24px; background: url(../../image/btn/btn_list_delete.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; z-index: 5; }
.nutr_list_box .nutr_item .title { width: 100%; font-size: 20px; font-weight: 700; line-height: 22px; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.nutr_list_box .nutr_item .desc { font-size: 14px; font-weight: 400; line-height: 20px; word-break: keep-all; margin-top: 12px; }
.nutr_list_box .nutr_item .detail_box { display: flex; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid #EFF0F6; cursor: pointer; margin-top: 12px; }
.nutr_list_box .nutr_item .img_box { position: relative; width: 70px; min-width: 70px; height: 70px; border: 1px solid #EFF0F6; border-radius: 8px; overflow: hidden; margin-right: 8px; }
.nutr_list_box .nutr_item .img_box img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: inherit; width: 240%; }
.nutr_list_box .nutr_item .text_box { width: calc(100% - 78px); padding-top: 5px; }
.nutr_list_box .nutr_item .category { display: block; font-size: 13px; color: #888; line-height: 20px; }
.nutr_list_box .nutr_item .name { font-size: 14px; font-weight: 600; line-height: 20px; }
.nutr_list_box .nutr_item .unit { font-size: 13px; color: var(--color-black-70); line-height: 20px; }
.nutr_list_box .nutr_item .price { font-size: 16px; font-weight: 700; line-height: 20px; text-align: right; margin-top: 5px; }
.nutr_list_box .nutr_item .btn_view { width: 100%; font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; margin-top: 12px; }
.nutr_list_box .nutr_item .btn_view::after { width: 14px; height: 14px; background: url(../../image/icon/icon_arrow_rt.svg) no-repeat center center; background-size: contain; vertical-align: -2px; content: ''; display: inline-block; margin-left: 4px; }

/* Q&A */
.qna_list_box > li { width: 100%; padding: 16px; background: var(--gray-100); border-radius: 12px; margin-bottom: 12px; }
.qna_list_box > li:last-of-type { margin-bottom: 0; }
.qna_list_box > li > div { display: flex; align-items: flex-start; }
.qna_list_box .mark { display: inline-block; width: 18px; min-width: 18px; font-size: 18px; font-weight: 600; margin-right: 8px; }
.qna_list_box .text { width: calc(100% - 26px); font-size: 14px; line-height: 20px; word-break: keep-all; }
.qna_list_box .question .mark { color: var(--purple); }
.qna_list_box .question .text { font-weight: 600; }
.qna_list_box .answer { margin-top: 8px; }
.qna_list_box .answer .mark { color: var(--gray-600); }