@charset "utf-8";

/*! ──────────────────── Components ──────────────────── */
/*? 한달 구성 */
.month_pack ul { margin-top: 16px; } 
.month_pack ul li { margin-bottom: 12px; } 
.month_pack ul li:last-of-type { margin-bottom: 0; } 
.month_pack ul li input[type="radio"] { display: none; } 
.month_pack ul li label { display: block; border: 1px solid var(--primary-100); border-radius: 12px; padding: 15px 24px; cursor: pointer; } 
.month_pack ul li label span { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--black); display: inline-block; vertical-align: middle; } 
.month_pack ul li label span::before { width: 20px; height: 20px; border: 2px solid var(--gray-100); border-radius: 50%; box-sizing: border-box; vertical-align: -5px; content: ''; display: inline-block; margin-right: 8px; } 
.month_pack ul li input[type="radio"]:checked + label { border: 1px solid var(--primary-500); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); } 
.month_pack ul li input[type="radio"]:checked + label span { font-weight: 600; } 
.month_pack ul li input[type="radio"]:checked + label span::before { border: 5px solid var(--primary-500); } 
/*? 결제금액 */
.calc_price_box ul:not(:first-of-type) { border-top: 1px solid var(--primary-100); margin-top: 12px; } 
.calc_price_box .detail_price_box { padding: 12px 0; } 
.calc_price_box .detail_price_box > li { margin-bottom: 6px; } 
.calc_price_box .detail_price_box > li:last-of-type { margin-bottom: 0; } 
.calc_price_box .info_box { width: 100%; padding: 8px; background: var(--primary-100); border-radius: 8px; }
.calc_price_box .info_box h3 { position: relative; font-size: 16px; font-weight: 600; color: var(--primary-500); line-height: 24px; margin-bottom: 4px; padding-left: 24px; }
.calc_price_box .info_box h3::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: url(../../resources/image/icon/icon_info_primary.svg) no-repeat center center; background-size: contain; content: ''; display: block; }
.calc_price_box .info_box p { font-size: 12px; font-weight: 400; color: var(--primary-500); line-height: 18px; word-break: keep-all; padding-left: 24px; }
.calc_price_box .price_item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 8px; } 
.calc_price_box .price_item .price_tit { display: inline-block; font-size: 16px; font-weight: 500; line-height: 24px; } 
.calc_price_box .price_item .price_txt { display: inline-block; font-size: 16px; font-weight: 500; line-height: 24px; } 
.calc_price_box .price_item .price_txt.discount { color: var(--red); } 
.calc_price_box .price_item .price_detail_list { width: 100%; padding: 8px 16px 0; } 
.calc_price_box .price_item .price_detail_list dl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } 
.calc_price_box .price_item .price_detail_list dl:last-of-type { margin-bottom: 0; } 
.calc_price_box .price_item .price_detail_list dl * { font-size: 14px; font-weight: 400; line-height: 24px; color: var(--gray-400); } 
.calc_price_box .radio_group { border-top: 1px solid var(--primary-100); border-bottom: 1px solid var(--primary-100); } 
.calc_price_box .radio_group .radio_item { position: relative; width: 100%; padding: 12px 0 12px 30px; } 
.calc_price_box .radio_group .radio_item input[type=radio] { display: none; } 
.calc_price_box .radio_group .radio_item input[type=radio] + label::before { position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border: 2px solid var(--gray-100); border-radius: 50%; box-sizing: border-box; content: ''; display: block; z-index: 2; } 
.calc_price_box .radio_group .radio_item .radio_title { display: block; font-size: 16px; font-weight: 400; color: var(--gray-500); line-height: 20px; } 
.calc_price_box .radio_group .radio_item .radio_title .point_val { float: right; display: inline-block; color: var(--black); opacity: 0; transition: all 0.4s ease-in-out; } 
.calc_price_box .radio_group .radio_item .point_state { display: flex; justify-content: space-between; width: 100%; font-size: 13px; font-weight: 400; color: var(--gray-500); line-height: 20px; } 
.calc_price_box .radio_group .radio_item .point_state em { display: block; font-size: 13px; font-weight: 400; color: var(--gray-500); line-height: 20px; } 
.calc_price_box .radio_group .radio_item .point_desc { display: block; width: 100%; font-size: 13px; font-weight: 400; color: var(--primary-500); line-height: 20px; } 
.calc_price_box .radio_group .radio_item .hold { height: 0; overflow: hidden; transition: all 0.4s ease-in-out; } 
.calc_price_box .radio_group .radio_item .point_use_input { width: 100%; min-width: 100%; height: 0; overflow: hidden; transition: all 0.4s ease-in-out; } 
.calc_price_box .radio_group .radio_item .point_use_input .input_box { margin: 8px 0; } 
.calc_price_box .radio_group .radio_item input[type="radio"]:checked + label::before { border: 5px solid var(--primary-500); } 
.calc_price_box .radio_group .radio_item input[type="radio"]:checked + label .radio_title { font-weight: 500; color: var(--black); } 
.calc_price_box .radio_group .radio_item input[type="radio"]:checked + label .radio_title .point_val { opacity: 1; } 
.calc_price_box .radio_group .radio_item input[type="radio"]:checked + label ~ .point_use_input { height: 72px; } 
.calc_price_box .radio_group .radio_item input[type="radio"]:checked + label ~ .hold { height: 22px; } 
.calc_price_box .total_price_box { display: flex; justify-content: space-between; align-items: center; } 
.calc_price_box .total_price_box .price_title { font-size: 16px; font-weight: 500; line-height: 26px; } 
.calc_price_box .total_price_box .total_sale { font-size: 26px; font-weight: 700; line-height: 34px; } 
.calc_price_box .detail_price_box .toggle_tab { cursor: pointer; } 
.calc_price_box .detail_price_box .toggle_tab::after { width: 24px; height: 24px; background: url(../image/icon/icon_arrow_down_black.svg) no-repeat center center; background-size: 24px; content: ''; display: inline-block; vertical-align: -6px; margin-left: 2px; } 
.calc_price_box .detail_price_box .toggle_tab.on::after { transform: rotate(180deg); } 
.calc_price_box .detail_price_box .toggle_cont { display: none; } 
/*? 쇼핑목록  */
.shopping_list_box .title_box { position: relative; } 
.shopping_list_box .title_box .arrow { position: absolute; right: 0; top: 0; width: 24px; height: 24px; text-indent: -9999px; background: url(../image/icon/icon_arrow_down_black.svg) no-repeat center center; background-size: contain; content: ''; cursor: pointer; z-index: 5; } 
.shopping_list_box .title_box.on .arrow { transform: rotate(180deg); } 
.shopping_list_box .toggle_cont { display: none; } 
.cart_list_box .nutr_list { margin-top: 16px; } 
.cart_list_box .nutr_list li { border-bottom: 1px solid var(--primary-100); } 
.cart_list_box .nutr_list li:last-of-type { border-bottom: none; padding-bottom: 0; } 
.cart_list_box .nutr_list .nutr_item { position: relative; width: 100%; padding: 16px 0; } 
.cart_list_box .nutr_list .nutr_item .info_box { display: flex; justify-content: space-between; } 
.cart_list_box .nutr_list .nutr_item .img_box { position: relative; width: 70px; min-width: 70px; height: 70px; border: 1px solid var(--primary-100); border-radius: 8px; overflow: hidden; } 
.cart_list_box .nutr_list .nutr_item .img_box img { height: 100%; object-fit: cover; } 
.cart_list_box .nutr_list .nutr_item .text_box { width: calc(100% - 80px); padding: 6px 24px 6px 0; text-align: left; } 
.cart_list_box .nutr_list .nutr_item .text_box .tag { display: block; font-size: 13px; font-weight: 500; color: var(--gray-500); line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.cart_list_box .nutr_list .nutr_item .text_box .name { width: 100%; font-size: 15px; font-weight: 700; color: var(--black); line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.cart_list_box .nutr_list .nutr_item .text_box .desc { width: 100%; font-size: 13px; font-weight: 400; color: var(--gray-500); line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.cart_list_box .nutr_list .nutr_item .text_box .desc em { font-style: normal; } 
.cart_list_box .nutr_list .nutr_item .text_box .desc .pp { color: var(--primary-500); } 
.cart_list_box .nutr_list .nutr_item .bot_area { display: flex; justify-content: flex-end; align-items: center; margin-top: 4px; } 
.cart_list_box .nutr_list .nutr_item .bot_area .price_text { font-size: 16px; font-weight: 700; line-height: 26px; } 
.cart_list_box .nutr_list .nutr_item .bot_area .arrow_text { font-size: 13px; font-weight: 400; color: var(--primary-500); display: inline-block; }
.cart_list_box .nutr_list .nutr_item .del_btn { position: absolute; right: 0; top: 12px; width: 20px; height: 20px; text-indent: -9999px; background: url(../image/btn/btn_exit.svg) no-repeat center center; display: inline-block; opacity: 0.3; z-index: 1; } 
.cart_list_box .nutr_list + .btn_sub_box { position: relative; }
.cart_list_box .btn_plus::before { width: 18px; height: 18px; background: url(../image/icon/icon_plus_primary.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -3px; margin-right: 4px; } 
/*? 결제동의 */
.all_chk_area { overflow: hidden; } 
.all_chk_area .chk_title { position: relative; z-index: 1; } 
.all_chk_area .chk_title .btn_toggle { position: absolute; right: 0; top: 0; width: 24px; height: 24px; text-indent: -9999px; background: url(../image/icon/icon_arrow_down_black.svg) no-repeat center center; background-size: contain; content: ''; cursor: pointer; z-index: 5; } 
.all_chk_area .chk_title .btn_toggle.on { transform: rotate(180deg); } 
.all_chk_area .chk_title .chk_box input[type="checkbox"] + label { font-size: 16px; font-weight: 500; color: #222; line-height: 24px; display: inline-block; } 
.all_chk_area .chk_title .chk_box input[type="checkbox"] + label em { font-size: 14px; color: var(--primary-500); display: inline-block; margin-left: 4px; } 
.all_chk_area .chk_title .chk_box 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: 8px; } 
.all_chk_area .chk_title .chk_box input[type="checkbox"]:checked + label::before { background: url(../image/icon/icon_chkbox_circle_on.svg) no-repeat left center; background-size: 24px; } 
.all_chk_area .chk_detail { padding-top: 4px; padding-left: 32px; } 
.all_chk_area .chk_detail p { font-size: 13px; font-weight: 400; color: var(--gray-400); line-height: 20px; word-break: keep-all; } 
/* ? textarea */
.textarea_box { position: relative; width: 100%; height: 160px; padding: 15px 15px 40px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; display: block; overflow: hidden; transition: all 0.1s ease-in-out; } 
.textarea_box:focus,
.textarea_box.focus { border: 1px solid var(--primary-500); } 
.textarea_box.error { border: 1px solid var(--red); } 
.textarea_box textarea { display: block; width: 100%; height: 100%; font-size: 15px; font-weight: 400; line-height: 22px; background: transparent; border: none; resize: none; -ms-overflow-style: none; } 
.textarea_box textarea::-webkit-scrollbar { display: none; } 
.textarea_box textarea::placeholder { color: var(--gray-300); } 
.textarea_box.no_limit { height: 120px; padding: 10px 44px 10px 24px; }
.textarea_box.no_limit textarea { line-height: 20px; }


/** ──────────────────── page - 상품유형선택 ──────────────────── */
.select_type_section .list_box > li { position: relative; overflow: hidden; margin-bottom: 12px; } 
.select_type_section .list_box > li:last-of-type { margin-bottom: 0; } 
.select_type_section .list_box > li .mark { position: absolute; right: 23px; top: 1px; width: 22px; height: 29px; background: url(../image/icon/icon_bookmark.svg) no-repeat left top; background-size: contain; display: inline-block; } 
.select_type_section .list_box > li label { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 5; } 
.select_type_section .list_box > li .label_box { position: relative; display: block; padding: 20px; border: 1px solid var(--primary-100); border-radius: 12px; } 
.select_type_section .list_box > li .label_box .tit_box { display: flex; align-items: flex-start; justify-content: space-between; } 
.select_type_section .list_box > li .label_box .tit_box .name { font-size: 16px; font-weight: 400; color: var(--black); line-height: 24px; } 
.select_type_section .list_box > li .label_box .tit_box .name::before { width: 20px; height: 20px; border: 2px solid var(--gray-100); border-radius: 50%; box-sizing: border-box; vertical-align: -3px; content: ''; display: inline-block; margin-right: 8px; } 
.select_type_section .list_box > li .label_box .info_box { display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--primary-100); } 
.select_type_section .list_box > li .label_box .info_box .img_box { width: 80px; height: 90px; overflow: hidden; } 
.select_type_section .list_box > li .label_box .info_box .img_box img { width: auto; max-width: none; height: 100%; } 
.select_type_section .list_box > li .label_box .price_box { width: calc(100% - 85px); text-align: right; } 
.select_type_section .list_box > li .label_box .price_box .sale { display: inline-block; font-size: 14px; font-weight: 700; color: var(--red); line-height: 20px; padding: 0 8px; border-radius: 10px; background: #FFECED; margin-bottom: 8px; } 
.select_type_section .list_box > li .label_box .price_box .price dt { font-size: 16px; font-weight: 500; color: var(--black); line-height: 24px; margin-bottom: 4px; }
.select_type_section .list_box > li .label_box .price_box .price dd { font-size: 16px; font-weight: 400; color: var(--black); line-height: 24px; letter-spacing: -0.5px; } 
.select_type_section .list_box > li .label_box .price_box .price dd strong { font-size: 25px; font-weight: 800; color: #FB5058; letter-spacing: -1px; display: inline-block; margin-left: 4px; } 
.select_type_section .list_box > li .label_box .infoBox { width: 100%; padding: 8px 0 0 32px; min-height: 38px; margin-bottom: 8px; } 
.select_type_section .list_box > li .label_box .check_list { border-bottom: 1px solid var(--primary-100); padding: 16px 0; } 
.select_type_section .list_box > li .label_box .check_list li { position: relative; font-size: 14px; font-weight: 400; color: var(--gray-500); line-height: 20px; padding-left: 24px; margin-bottom: 8px; } 
.select_type_section .list_box > li .label_box .check_list li:last-of-type { margin-bottom: 0; } 
.select_type_section .list_box > li .label_box .check_list li::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; background: url(../image/icon/icon_check_primary.svg) no-repeat center center; background-size: contain; content: ''; display: block; } 
.select_type_section .list_box > li .label_box .note_box { font-size: 14px; font-weight: 400; color: var(--gray-400); line-height: 20px; padding-top: 16px; } 
.select_type_section .list_box > li input:checked ~ .label_box { border: 1px solid var(--primary-500); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); } 
.select_type_section .list_box > li input:checked ~ .label_box .name { font-weight: 700; } 
.select_type_section .list_box > li input:checked ~ .label_box .name::before { border: 5px solid var(--primary-500); } 



/** ──────────────────── page - 결제정보입력 ──────────────────── */
/*? 배송지정보 */
.address_info_box { position: relative; } 
.address_info_box .addr_title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } 
.address_info_box .btn_change { position: relative; font-size: 16px; font-weight: 700; color: var(--primary-500); line-height: 22px; display: inline-block; } 
.address_info_box .btn_change::before { position: absolute; left: 0; bottom: 0; width: calc(100% - 16px); height: 2px; background: var(--primary-500); content: ''; display: block; } 
.address_info_box .btn_change::after { width: 12px; height: 22px; background: url(../image/icon/icon_arrow_right_primary.svg) no-repeat center center; background-size: 26px; content: ''; display: inline-block; vertical-align: -5px; margin-left: 4px; } 
.address_info_box .addr_detail { margin-bottom: 16px; } 
.address_info_box .addr_detail p { font-size: 15px; font-weight: 400; color: #222; line-height: 20px; word-break: keep-all; margin-bottom: 4px; } 
.address_info_box .addr_detail p:last-of-type { margin-bottom: 0; } 
.address_info_box .addr_detail p em { display: inline-block; margin-right: 8px; } 
.address_info_box .addr_detail .addr_empty { display: block; width: 100%; font-size: 14px; color: var(--red); line-height: 20px; background: var(--gray-50); border-radius: 8px; padding: 12px; margin-top: 8px; } 
/*? 할인 */
.discount_info_box > div:not(:first-of-type) { padding-top: 16px; border-top: 1px solid var(--primary-100); margin-top: 16px; } 
.discount_info_box .coupon_use_box .title_box { display: flex; align-items: center; justify-content: space-between; } 
.discount_info_box .coupon_use_box .title_box a { font-size: 16px; font-weight: 500; color: var(--black); line-height: 24px; display: inline-block; } 
.discount_info_box .coupon_use_box .title_box a em { font-weight: 700; color: var(--primary-500); display: inline-block; } 
.discount_info_box .coupon_use_box .title_box a em::after { width: 12px; height: 22px; background: url(../image/icon/icon_arrow_right_primary.svg) no-repeat center center; background-size: 26px; content: ''; display: inline-block; vertical-align: -5px; margin-left: 4px; } 
.discount_info_box .coupon_use_box ul li { font-size: 13px; font-weight: 400; color: var(--gray-400); line-height: 20px; margin-bottom: 4px; } 
.discount_info_box .coupon_use_box ul li:last-of-type { margin-bottom: 0; } 
.discount_info_box .coupon_use_box ul li.on { color: var(--primary-500); }
.discount_info_box .point_use_box > p { font-size: 13px; font-weight: 400; color: var(--gray-400); } 
.discount_info_box .point_use_box > p em { color: var(--primary-500); } 
.discount_info_box .point_use_box .point_input_box { position: relative; display: flex; }
.discount_info_box .point_use_box .point_input_box input { width: calc(100% - 88px); height: 44px; font-size: 15px; padding: 0 42px 0 16px; background: var(--white); border: 1px solid var(--primary-100); border-radius: 12px; display: block; transition: all 0.1s ease-in-out; }
.discount_info_box .point_use_box .point_input_box .btn_reset { position: absolute; right: 100px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(../image/btn/btn_exit.svg) no-repeat center center; background-size: contain; text-indent: -9999px; overflow: hidden; opacity: 0.5; display: block; }
.discount_info_box .point_use_box .point_input_box input:focus { border: 1px solid var(--primary-500); }
.discount_info_box .point_use_box .point_input_box .btn { width: 80px; min-width: 80px; height: 44px; font-size: 14px; font-weight: 700; color: var(--white); background: var(--primary-500); border-radius: 12px; display: block; margin-left: 8px; }
/*? 결제 정보 */
.pay_info_box .btn_box { text-align: right; }
.pay_info_box .btn_box button { font-size: 16px; font-weight: 500; color: var(--primary-500); line-height: 24px; text-decoration: underline; }
.pay_info_box .btn_box button.cancel { color: var(--gray-500); }
.pay_info_box .btn_box button.add::before { width: 24px; height: 24px; background: url(../image/icon/icon_plus_primary.svg) no-repeat center center; content: ''; display: inline-block; vertical-align: -7px; }
.pay_info_box .btn_box button,
.pay_info_box .select_box,
.pay_info_box .input_list_box { display: none; }
.pay_info_box .btn_box button.on,
.pay_info_box .select_box.on,
.pay_info_box .input_list_box.on { display: block; }
/*? 팝업 - 베송지 */
.popup_address .input_btn_flex { display: flex; flex-wrap: wrap; }
.popup_address .input_btn_flex .input_box { width: calc(100% - 128px); }
.popup_address .input_btn_flex .btn { width: 120px; height: 56px; font-size: 15px; font-weight: 700; color: var(--white); text-align: center; background: var(--primary-500); border-radius: 12px; margin-left: 8px; }
.popup_address .input_btn_flex .btn.type_border { color: var(--primary-500); background: var(--white); border: 1px solid var(--primary-500); }


/** ──────────────────── page - 할인쿠폰선택 ──────────────────── */
.coupon_list_box ul li { margin-bottom: 16px; } 
.coupon_list_box ul li:last-of-type { margin-bottom: 0; } 
.coupon_list_box input + label { position: relative; display: flex; flex-direction: column; width: 100%; height: 120px; border: 1px solid var(--primary-100); background: var(--white); padding: 16px 70px 16px 20px; border-radius: 12px; overflow: hidden; }
.coupon_list_box input + label .tit { font-size: 18px; font-weight: 700; color: var(--primary-500); letter-spacing: -0.3px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; }
.coupon_list_box input + label .desc { font-size: 14px; font-weight: 500; color: var(--black); line-height: 20px; word-break: keep-all; margin-top: 4px; }
.coupon_list_box input + label .coupon_detail { width: 100%; margin-top: auto; }
.coupon_list_box input + label .coupon_detail p { font-size: 13px; font-weight: 400; color: var(--gray-500); line-height: 18px; }
.coupon_list_box input + label .coupon_detail p b { font-weight: 400; color: var(--primary-500); }
.coupon_list_box input + label .icon_chkbox { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: var(--white); border: 2px solid var(--gray-100); border-radius: 50%; box-sizing: border-box; display: inline-block; }
.coupon_list_box input:checked + label { border: 1px solid var(--primary-500); }
.coupon_list_box input:checked + label .icon_chkbox { background: url(../image/icon/icon_chkbox_circle_on.svg) no-repeat center center, var(--primary-500); background-size: 32px; border: 2px solid var(--primary-500); }
.coupon_list_box input:disabled + label,
.coupon_list_box input.disabled + label { background: var(--gray-50); }
.coupon_list_box input:disabled + label *,
.coupon_list_box input.disabled + label * { color: var(--gray-300); }
.coupon_list_box input:disabled + label .icon_chkbox,
.coupon_list_box input.disabled + label .icon_chkbox { background: var(--gray-50); }
.coupon_empty_box { text-align: center; }
.coupon_empty_box p { font-size: 18px; font-weight: 700; color: var(--black); line-height: 24px; } 



/** ──────────────────── page - 나만의 영양제 설명서 ──────────────────── */
.order_document_section .title_box { position: relative; padding-right: 56px; }
.order_document_section .title_box .label { position: absolute; right: 0; top: 2px; font-size: 13px; font-weight: 600; color: var(--gray-500); padding: 6px 8px; background: var(--gray-75); border-radius: 12px; display: inline-block; }
.order_document_section .cart_list_box .nutr_list .nutr_item { border: none; padding: 8px 0; }
.order_document_section .cart_list_box .nutr_list .img_box { width: 96px; min-width: 96px; height: 96px; }
.order_document_section .cart_list_box .nutr_list .text_box { width: calc(100% - 106px); padding-right: 0; }
.order_document_section .cart_list_box .nutr_list .nutr_item .bot_area { margin-top: 24px; }



/* 결제 방법 */
.payment_list .payment_item { position: relative; width: 100%; border-bottom: 1px solid #EFEFEF; }
.payment_list .payment_item:last-of-type { border-bottom: none; }
.payment_list .payment_item.on .icon_arrow { transform: rotate(180deg); }
.payment_list .payment_item .select_box {margin-top: 18px; display: none;}
.payment_list .radio_box {padding: 16px 0;}
.payment_list input[type='radio'] + label { position: relative; display: block; width: 100%; padding-left: 30px; }
.payment_list input[type='radio'] + label .icon_radio { position: absolute; left: 0; top: 1px; border: 2px solid #D0D0D0;}
.payment_list input[type='radio'] + label .text { position: relative; font-size: 16px; font-weight: 500; color: var(--gray-400); line-height: 22px; }
.payment_list input[type='radio'] + label .text img { vertical-align: -6px; margin-right: 6px; max-width: 50px; }
.payment_list input[type='radio']:checked + label .text { color: var(--black); }
.payment_list input[type='radio']:checked + label .icon_radio { border: 5px solid var(--Medicok-500, #5C59FE); }
.payment_list .btn_card_set { position: absolute; right: 0; top: 12px; font-size: 13px; font-weight: 500; color: var(--gray-03); line-height: 28px; padding: 0 8px; background: #ffffff; border: 1px solid var(--gray-300); border-radius: 8px; }
.payment_list .btn_card_set,
.payment_list .payment_detail,
.payment_list .payment_detail .off { display: none; }
.payment_detail .pd_empty, .payment_detail .pd_info {margin: 8px 0;}
.payment_detail .pd_empty .btn_add { display:inline-block; width: 100%; padding: 12px 0; background: #F8F9FA; border: 1px solid #D0D0D0; border-radius: 16px; }
.payment_detail .pd_empty .btn_add span::before { width: 32px; height: 32px; background: url(../image/icon/icon_pay_plus.svg) no-repeat center center, #EFF0F6; border-radius: 50%; display: block; content: ''; margin: 0 auto 8px; }
.payment_detail .pd_empty .btn_add span{ display: block; font-size: 14px; font-weight: 500; color: rgba(34, 34, 34, 0.48); line-height: 20px; text-align: center; }
.payment_detail .pd_info { width: 100%; padding: 12px; border-radius: 12px; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); }
.payment_detail .pd_info p { display: block; font-size: 14px; font-weight: 700; line-height: 20px; text-align: right; }
.payment_detail .pd_info .btn_edit { display:inline-block; width: 100%; font-size: 13px; font-weight: 500; color: rgba(34, 34, 34, 0.70); line-height: 30px; text-align: center; background: #ffffff; border-radius: 8px; margin-top: 8px; }
.payment_item.kakao .payment_detail .pd_info { background: #FEE500; }
.payment_item.kakao .payment_detail .pd_info p { color: rgba(34, 34, 34, 0.48); }
.payment_item.naver .payment_detail .pd_info { background: #00C73C; }
.payment_item.naver .payment_detail .pd_info p { color: #ffffff;  } 
.payment_detail .payment_notice { position: relative; width: 100%; padding: 12px 0; z-index: 1; }
.payment_detail .payment_notice::before { position: absolute; left: -24px; top: 0; width: calc(100% + 48px); height: 100%; background: #F8F9FA; content: ''; display: block; z-index: -1; }
.payment_detail .payment_notice p { font-size: 14px; font-weight: 400; color: rgba(34, 34, 34, 0.48); line-height: 22px; word-break: keep-all; }
/** ---------- form ---------- **/
.icon_radio { position: relative; width: 20px; height: 20px; background: #ffffff; border: 1px solid var(--gray-300); border-radius: 50%; display: inline-block; }
.icon_radio::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; content: ''; display: block; }
.icon_radio.sm { width: 16px; height: 16px; }
.icon_radio.sm::after { width: 6px; height: 6px; }
.icon_chkbox,
.icon_chkbox02 { position: relative; width: 20px; height: 20px; background: url(../resources/image/icon/icon_checkbox_w.svg) no-repeat center center, #ffffff; background-size: 14px; border: 1px solid var(--gray-300); border-radius: 50%; display: inline-block; }
/*? input_box */
.input_list > li { margin-bottom: 12px; }
.input_list > li:last-of-type { margin-bottom: 0; }
.input_box { position: relative; width: 100%; }
.input_box .frm_input { width: 100%; height: 56px; font-size: 16px; font-weight: 400; color: #1d232e; padding: 16px; background: #ffffff; border: 1px solid #D0D0D0; border-radius: 12px; box-sizing: border-box; transition: all 0.1s ease; }
.input_box .frm_input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input_box .frm_input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input_box.type_button .frm_input { padding-right: 100px !important; }
.input_box .frm_input.type_small { height: 40px; font-size: 14px; }
.input_box .frm_input.valid,
.input_box .frm_input.focus { padding: 24px 16px 8px; }
.input_box .frm_input.focus { border: 1px solid #7f56d9; }
.input_box.error .frm_input { border: 1px solid #fb5058; }

.input_box .frm_label { position: absolute; left: 16px; top: 20px; font-size: 15px; font-weight: 400; color: #6E7191; transition: all 0.2s; }
.input_box .frm_input.focus + .frm_label,
.input_box .frm_input.valid + .frm_label,
.input_box.error .frm_input + .frm_label { top: 8px; font-size: 12px; line-height: 16px; }
.input_box.error .frm_input + .frm_label { color: #fb5058; }

.input_box .frm_button { position: absolute; right: 8px; top: 8px; min-width: 80px; font-size: 14px; font-weight: 400; color: #ffffff; line-height: 40px; text-align: center; padding: 0 16px; background: #7f56d9; border-radius: 8px; display: inline-block; z-index: 5; }

.input_box.type_no_label .frm_input.valid,
.input_box.type_no_label .frm_input.focus { padding: 16px; }

/*? error_message */
.error_message { height: 0px; font-size: 13px; color: #fb5058; line-height: 20px; overflow: hidden; transition: all 0.5s ease-in-out; }
.error .error_message { height: 20px; margin-top: 4px; }
.error + .error_message { height: 20px; margin-top: 4px; }