@charset "utf-8"; 
/* common */
.section_title_md { font-size: var(--font-medium); font-weight: 700; line-height: 28px; } 

/** 주문/배송 상세 **/
/* 배송현황 */
.delivery_state_box { display: flex; justify-content: center; width: 100%; margin-top: 24px; } 
.delivery_state_box li { width: 82px; text-align: center; margin-right: 33px; } 
.delivery_state_box li:last-of-type { margin-right: 0; } 
.delivery_state_box li .img_box { width: 82px; height: 82px; border-radius: 18px; } 
.delivery_state_box li .type_ready { background: url(../../image/sub_mypage/img_ready_off.svg) no-repeat center center, #fbfbfd; background-size: 46px; } 
.delivery_state_box li .type_progress { background: url(../../image/sub_mypage/img_progress_off.svg) no-repeat center center, #fbfbfd; background-size: 46px; } 
.delivery_state_box li .type_complete { background: url(../../image/sub_mypage/img_complete_off.svg) no-repeat center center, #fbfbfd; background-size: 46px; } 
.delivery_state_box li.on .img_box { box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1); } 
.delivery_state_box li.on .type_ready { background: url(../../image/sub_mypage/img_ready_on.svg) no-repeat center center, #fbfbfd; background-size: 46px; } 
.delivery_state_box li.on .type_progress { background: url(../../image/sub_mypage/img_progress_on.svg) no-repeat center center, #fbfbfd; background-size: 46px; } 
.delivery_state_box li.on .type_complete { background: url(../../image/sub_mypage/img_complete_on.svg) no-repeat center center, #fbfbfd; background-size: 46px; } 
.delivery_state_box li p { font-size: var(--font-small); font-weight: 500; color: var(--color-gray); line-height: 20px; margin-top: 8px; } 
.delivery_state_box li.on p { font-weight: 700; color: var(--color-main); } 

/* 배송조회 */
.delivery_step_box { display: flex; justify-content: space-between; align-items: center; } 
.delivery_step_box .info_text_area .title { font-size: var(--font-small); font-weight: 700; line-height: 20px; } 
.delivery_step_box .info_text_area .num_text { margin-top: 4px; } 
.delivery_step_box .info_text_area .num_text * { display: inline-block; font-size: 13px; font-weight: 400; line-height: 20px; } 
.delivery_step_box .info_text_area .num_text .num_title { margin-right: 8px; } 
.delivery_step_box .btn_area { display: inline-block; } 
.delivery_step_box .btn_area .copy_btn { display: inline-block; width: 80px; height: 32px; font-size: 15px; font-weight: 700; color: var(--color-main); line-height: 32px; background: var(--color-white); border: var(--border-main); border-radius: var(--border-radius-s); } 
.delivery_step_list { position: relative; margin-top: 18px; } 
.delivery_step_list::before { position: absolute; left: 11.5px; top: 10px; width: 1px; height: calc(100% - 42px); border-left: var(--border); content: ""; display: inline-block; } 
.delivery_step_list li { position: relative; padding-left: 32px; margin-bottom: 18px; } 
.delivery_step_list li:last-of-type { margin-bottom: 0; } 
.delivery_step_list li::before { position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; background: var(--color-white); border: 2px solid var(--color-disabled); border-radius: 50%; box-sizing: border-box; content: ''; display: block; } 
.delivery_step_list .date { font-size: 13px; font-weight: 400; color: var(--color-black-40); line-height: 21px; } 
.delivery_step_list .list_text { display: flex; align-items: center; margin-top: 4px; } 
.delivery_step_list .list_text .title { font-size: var(--font-small); font-weight: 400; color: var(--color-black-40); line-height: 20px; margin-right: 8px; } 
.delivery_step_list .list_text .state { font-size: var(--font-small); font-weight: 700; color: var(--color-black-40); line-height: 20px; } 
.delivery_step_list li.on::before { top: 2px; left: 2px; width: 20px; height: 20px; border: 5px solid var(--color-main); } 
.delivery_step_list li.on .date { color: rgba(34, 34, 34, 0.7); } 
.delivery_step_list li.on .list_text .title { color: var(--color-dark-gray); } 
.delivery_step_list li.on .list_text .state { color: var(--color-dark-gray); } 

/* 결제금액 */
.price_calc_area { margin-top: 24px; }
.price_calc_area .price_list li { display: flex; justify-content: space-between; align-items: center; }
.price_calc_area .price_list li:not(:first-of-type) { margin-top: 8px; }
.price_calc_area .price_list .title { font-size: var(--font-regular); font-weight: 400; color: var(--color-black-70); line-height: 22px; }
.price_calc_area .price_list .price { font-size: var(--font-regular); font-weight: 500; line-height: 22px; }
.price_calc_area .price_list .price.type_red { color: var(--color-red); }
.price_calc_area .price_list .price em.orginal { font-size: var(--font-small); font-weight: 400; color: var(--color-red); line-height: 22px; text-align: right; text-decoration: line-through; margin-right: 8px; }
.price_calc_area .discount_list { padding: 0 16px; margin-top: 8px; }
.price_calc_area .discount_list li { display: flex; justify-content: space-between; align-items: center; }
.price_calc_area .discount_list li:not(:first-of-type) { margin-top: 4px; }
.price_calc_area .discount_list span { font-size: var(--font-small); font-weight: 400; color: var(--color-gray); line-height: 24px; }
.price_calc_area .discount_list span:first-child::before { content: "ㄴ"; }
.price_calc_area .total_price_area { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.price_calc_area .total_price_area .title { font-size: var(--font-medium); font-weight: 500; line-height: 26px; }
.price_calc_area .total_price_area .price { font-size: var(--font-large-xl); font-weight: 700; line-height: 34px; }

/* 배송지정보 */
.delivery_info_box { padding-bottom: 64px; margin-top: 24px; } 
.delivery_info_box li { display: flex; justify-content: space-between; margin-bottom: 16px; } 
.delivery_info_box li:last-of-type { margin-bottom: 0; } 
.delivery_info_box li * { display: block; font-size: var(--font-regular); font-weight: 400; line-height: 24px; word-break: keep-all; overflow: hidden; } 
.delivery_info_box li .th { width: 118px; } 
.delivery_info_box li .td { max-width: calc(100% - 118px); } 