@charset "utf-8";
/* 장바구니와 주문서 화면의 공통 디자인 */

/* 밝은 서브 배너 위에서도 제목이 읽히도록 한다 */
#sub_background > h1,
#sub_background > h2 { text-shadow: 0 1px 8px rgba(0,0,0,.5); }

#sod_bsk,
#sod_frm {
	width: 1280px;
	margin: 50px auto 90px;
	padding: 0;
	max-width: none;
	color: #333;
	font-family: 'Nanum Gothic', sans-serif;
}

/* 부동 요소가 하단 영역을 침범하지 않도록 정리한다 */
#sod_frm:after {
	display: block;
	clear: both;
	content: "";
}

#sod_frm .sod_left,
#sod_frm .sod_right {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
}

.od_title {
	margin: 0 0 24px;
	padding-left: 12px;
	border-left: 4px solid #2dbdb6;
	font-size: 22px;
	font-weight: bold;
	color: #222;
	line-height: 1.2;
}

/* ===== 진행 단계 ===== */

.od_step {
	position: relative;
	display: flex;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

/* 단계를 잇는 가로선 */
.od_step:before {
	position: absolute;
	top: 17px;
	left: 16.6%;
	right: 16.6%;
	height: 1px;
	background: #e5e5e5;
	content: "";
}

.od_step_item {
	position: relative;
	z-index: 1;
	flex: 1;
	text-align: center;
	color: #aaa;
	font-size: 14px;
}

.od_step_no {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 10px;
	border: 1px solid #e0e0e0;
	background: #fff;
	color: #bbb;
	font-size: 14px;
	font-weight: bold;
	line-height: 32px;
}

.od_step_name { display: block; }

.od_step_done { color: #666; }

.od_step_done .od_step_no {
	border-color: #2dbdb6;
	background: #fff;
	color: #2dbdb6;
}

.od_step_on { color: #17847f; font-weight: bold; }

.od_step_on .od_step_no {
	border-color: #2dbdb6;
	background: #2dbdb6;
	color: #fff;
}

/* ===== 상품 목록 ===== */

.od_tbl_wrap {
	border: 1px solid #e5e5e5;
	overflow: hidden;
}

.od_tbl {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.od_tbl thead th {
	height: 54px;
	padding: 0 12px;
	background: #f7f7f7;
	border-bottom: 1px solid #e5e5e5;
	font-size: 15px;
	font-weight: bold;
	color: #333;
	text-align: center;
}

.od_tbl tbody td {
	padding: 20px 12px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
}

.od_tbl tbody tr:last-child td { border-bottom: 0; }

.od_tbl tbody td.od_td_prd {
	padding-left: 20px;
	text-align: left;
}

.od_prd {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.od_prd_thumb {
	position: relative;
	flex: 0 0 auto;
}

.od_prd_thumb .od_chk {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
	margin: 0;
	width: 16px;
	height: 16px;
}

.od_prd_img {
	display: block;
}

.od_prd_img img {
	width: 88px;
	height: 88px;
	border: 1px solid #eee;
	object-fit: cover;
}

.od_prd_info {
	flex: 1;
	min-width: 0;
}

.od_prd_name {
	display: inline-block;
	color: #111;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	text-decoration: none;
	word-break: break-all;
}

.od_prd_name:hover { color: #2dbdb6; }

/* 장바구니의 선택 항목. 옵션마다 하나의 영역으로 구분한다 */
.od_opt_list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.od_opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #fafafa;
}

/* 추가옵션임을 옵션명 앞에 밝혀 둔다. 옵션명과 이어 읽히도록 같은 크기로 표시한다 */
.od_opt_tag {
	flex: none;
	/* 옵션명이 여러 줄일 때에도 첫 줄 앞에 놓이도록 위쪽에 맞춘다 */
	align-self: flex-start;
	/* 항목 사이 간격이 아니라 낱말 사이 간격으로 보이도록 옵션명 쪽으로 당긴다 */
	margin-right: -7px;
	color: #666;
	font-size: 13px;
	line-height: 1.6;
	white-space: nowrap;
}

.od_opt_name {
	flex: 1;
	min-width: 0;
	color: #444;
	font-size: 13px;
	line-height: 1.6;
	/* 낱말 단위로 줄을 바꾸되 한 낱말이 칸을 넘으면 그때만 나눈다 */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.od_opt_name span { display: block; }
.od_opt_name:empty { display: none; }

/* 항목 이름 앞에 상품명을 붙일 때에는 첫 항목까지 한 줄로 이어 표시한다 */
.od_opt_name .od_opt_base { display: inline; margin-right: 4px; }
.od_opt_name .od_opt_base + span { display: inline; }

.od_opt_ctrl {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	/* 옵션명이 없는 상품에서도 조작 영역의 자리가 달라지지 않도록 오른쪽에 붙인다 */
	margin-left: auto;
}

/* 수량 조정은 옵션명 앞에 두고 항목마다 자리를 맞춘다 */
.od_opt > .od_qty { flex: none; }

/* 옵션명이 있는 항목은 두 줄로 나눈다.
   윗줄은 옵션명과 삭제, 아랫줄은 수량과 금액을 양 끝에 배치한다 */
.od_opt_two {
	display: block;
}

.od_opt_two .od_opt_top,
.od_opt_two .od_opt_bottom {
	display: flex;
	gap: 12px;
}

.od_opt_two .od_opt_top { align-items: flex-start; }

.od_opt_two .od_opt_bottom {
	align-items: center;
	margin-top: 8px;
}

.od_opt_two .od_opt_del {
	flex: none;
	margin-left: auto;
}

.od_opt_two .od_qty { flex: none; }
.od_opt_two .od_opt_amt { margin-left: auto; }

/* 주문내역처럼 수량을 변경하지 않는 화면에서는 수량만 표시한다.
   수량 조정 영역과 폭을 맞추어 항목의 시작 위치를 같게 한다 */
.od_opt_qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 74px;
	height: 32px;
	border: 1px solid #eee;
	background: #fafafa;
	color: #333;
	font-size: 14px;
	font-weight: bold;
	box-sizing: border-box;
}

.od_opt_qty em {
	margin-left: 2px;
	color: #888;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}

/* 상품 안의 항목마다 상태가 다를 때에만 항목에 상태를 함께 표시한다 */
.od_opt_st { flex: none; }

.od_st_mix {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid #e0e0e0;
	background: #fafafa;
	color: #777;
	font-size: 12px;
}

.od_opt_amt {
	min-width: 96px;
	color: #111;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}

.od_opt_del {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #fff;
	color: #999;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.od_opt_del:hover { border-color: #c33; color: #c33; }

.od_prd_opt { margin-top: 9px; }

.od_prd_opt ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.od_prd_opt li {
	position: relative;
	margin-bottom: 4px;
	padding-left: 42px;
	color: #666;
	font-size: 13px;
	line-height: 1.7;
	word-break: break-all;
}

.od_prd_opt li:before {
	position: absolute;
	top: 3px;
	left: 0;
	padding: 1px 6px;
	background: #f1f1f1;
	color: #777;
	font-size: 11px;
	line-height: 1.5;
	content: "옵션";
}

.od_prd_opt_btn { margin-top: 8px; }

.od_prd_opt_btn .mod_options {
	height: 30px;
	padding: 0 12px;
	border: 1px solid #ddd;
	background: #fff;
	color: #555;
	font-size: 13px;
	cursor: pointer;
}

.od_prd_opt_btn .mod_options:hover {
	border-color: #2dbdb6;
	color: #2dbdb6;
}

.od_td_price {
	font-size: 15px;
	font-weight: bold;
	color: #444;
}

.od_td_sum {
	font-size: 17px;
	font-weight: bold;
	color: #111;
}

.od_td_price .od_won,
.od_td_sum .od_won {
	font-size: 13px;
	font-weight: normal;
	color: #666;
}

/* 수량 조정 */
.od_qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ddd;
	overflow: hidden;
}

.od_qty button {
	width: 30px;
	height: 32px;
	border: 0;
	background: #fafafa;
	color: #555;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.od_qty button:hover { background: #eaf8f7; color: #2dbdb6; }

.od_qty .od_qty_val {
	width: 44px;
	height: 32px;
	padding: 0;
	border: 0;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	color: #222;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
}

.od_qty_txt {
	font-size: 15px;
	font-weight: bold;
	color: #333;
}

.od_qty_txt em {
	margin-left: 2px;
	color: #777;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
}

.od_empty {
	padding: 80px 0 !important;
	color: #888;
	font-size: 15px;
}

/* ===== 목록 하단 기능 ===== */

.od_list_act {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.od_list_act_right { justify-content: flex-end; }

.od_list_cnt {
	margin-left: auto;
	color: #777;
	font-size: 14px;
}

.od_list_cnt strong { color: #333; }

.od_btn_line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #ddd;
	background: #fff;
	color: #555;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.od_btn_line:hover {
	border-color: #2dbdb6;
	color: #2dbdb6;
}

.od_tbl caption { display: none; }

/* ===== 좌우 배치 ===== */

.od_layout {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.od_layout_main {
	flex: 1;
	min-width: 0;
}

.od_layout_side {
	width: 320px;
	flex-shrink: 0;
}

/* 상단 기능 */
.od_toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 12px 16px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
}

.od_toolbar .od_all {
	margin-right: 8px;
	font-size: 14px;
	color: #444;
	cursor: pointer;
}

/* 행 삭제 */
.od_td_del { text-align: center; }

.od_row_del {
	height: 32px;
	padding: 0 14px;
	border: 1px solid #ddd;
	background: #fff;
	color: #666;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.od_row_del:hover {
	border-color: #d9534f;
	color: #d9534f;
}

/* 상품 부가 정보 */
.od_prd_meta {
	display: flex;
	align-items: center;
	/* 옵션 목록 아래 오른쪽에 두어 목록과 구분되도록 한다 */
	justify-content: flex-end;
	gap: 10px;
	margin-top: 10px;
}

.od_prd_meta .mod_options {
	height: 28px;
	padding: 0 12px;
	border: 1px solid #ddd;
	background: #fff;
	color: #555;
	font-size: 12px;
	cursor: pointer;
}

.od_prd_meta .mod_options:hover {
	border-color: #2dbdb6;
	color: #2dbdb6;
}

/* 주문 요약 카드 */
.od_card {
	position: sticky;
	top: 20px;
	padding: 24px 24px 26px;
	border: 1px solid #e5e5e5;
	background: #fafcfc;
}

.od_card h3 {
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 16px;
	font-weight: bold;
	color: #222;
}

.od_card dl {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 10px;
}

.od_card dt {
	color: #666;
	font-size: 14px;
}

.od_card dd {
	margin: 0;
	color: #333;
	font-size: 16px;
	font-weight: bold;
}

.od_card dd .od_won {
	margin-left: 2px;
	font-size: 12px;
	font-weight: normal;
	color: #666;
}

.od_card .od_card_point { color: #2dbdb6; }

.od_card .od_card_sum {
	margin: 16px 0 20px;
	padding-top: 16px;
	border-top: 1px solid #e5e5e5;
}

.od_card .od_card_sum dt { color: #222; font-weight: bold; font-size: 15px; }
.od_card .od_card_sum dd { color: #2dbdb6; font-size: 24px; }
.od_card .od_card_sum dd .od_won { color: #2dbdb6; }

.od_card .od_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.od_card .od_btn.od_btn_line {
	height: 52px;
	border: 1px solid #ccc;
	background: #fff;
	color: #555;
	font-size: 16px;
}

.od_card .od_btn.od_btn_line:hover { border-color: #2dbdb6; color: #2dbdb6; }

.od_card_note {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px dashed #ddd;
	color: #888;
	font-size: 12px;
	line-height: 1.7;
}

.od_card .cart-naverpay { margin-top: 10px; }

/* 담긴 상품 없음 */
.od_blank {
	margin-top: 10px;
	padding: 84px 0;
	border: 1px dashed #ddd;
	background: #fafafa;
	text-align: center;
}

.od_blank i {
	font-size: 40px;
	color: #cfe8e6;
}

.od_blank p {
	margin: 18px 0 0;
	font-size: 17px;
	color: #444;
}

.od_blank span {
	display: block;
	margin: 8px 0 24px;
	font-size: 13px;
	color: #999;
}

/* ===== 금액 요약 (가로 배치) ===== */

.od_sum {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	margin-top: 18px;
	padding: 26px 30px;
	border: 1px solid #e5e5e5;
	background: #fafcfc;
}

.od_sum dl {
	margin: 0;
	text-align: center;
}

.od_sum dt {
	font-size: 14px;
	color: #666;
}

.od_sum dd {
	margin: 8px 0 0;
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.od_sum dd .od_won {
	margin-left: 2px;
	font-size: 13px;
	font-weight: normal;
	color: #666;
}

.od_sum_op {
	color: #bbb;
	font-size: 18px;
	padding-top: 22px;
}

.od_sum .od_sum_last dt { color: #333; font-weight: bold; }
.od_sum .od_sum_last dd { color: #2dbdb6; font-size: 26px; }
.od_sum .od_sum_last dd .od_won { color: #2dbdb6; }

/* ===== 금액 요약 (세로 배치) ===== */

.od_total {
	margin: 22px 0 26px auto;
	padding: 22px 26px;
	width: 380px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
}

.od_total dl {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 0 10px;
}

.od_total dt {
	color: #777;
	font-size: 14px;
}

.od_total dd {
	margin: 0;
	color: #444;
	font-size: 15px;
}

.od_total_sum {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid #e5e5e5;
}

.od_total_sum dt {
	color: #222;
	font-size: 15px;
	font-weight: bold;
}

.od_total_sum dd {
	color: #2dbdb6;
	font-size: 22px;
	font-weight: bold;
}

.od_won {
	margin-left: 2px;
	font-size: 13px;
	font-weight: normal;
	color: #777;
}

.od_total_sum .od_won { color: #2dbdb6; }

/* ===== 하단 진행 버튼 ===== */

.od_act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 34px;
}

.od_btn_lg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 230px;
	height: 58px;
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.od_btn.od_btn_line {
	height: 58px;
	border: 1px solid #ccc;
	color: #555;
	font-size: 17px;
}

.od_btn.od_btn_line:hover {
	border-color: #2dbdb6;
	color: #2dbdb6;
}

.od_btn_fill {
	border: 1px solid #2dbdb6;
	background: #2dbdb6;
	color: #fff;
}

.od_btn_fill:hover {
	border-color: #25a49e;
	background: #25a49e;
	color: #fff;
}

/* ===== 주문서 작성 ===== */

.odf {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

#sod_frm .odf .sod_left {
	flex: 1;
	width: auto;
	min-width: 0;
}

#sod_frm .odf .sod_right {
	flex: 0 0 340px;
	width: 340px;
	/* 기본 스킨이 height:100%를 지정하고 있어 열이 늘어나지 않는다 */
	height: auto;
	align-self: stretch;
}

.odf_sec {
	margin: 0 0 22px;
	border: 1px solid #e5e5e5;
	background: #fff;
}

#sod_frm .odf_sec > h2,
#sod_frm #sod_frm_pay > h2 {
	position: static;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 18px 24px;
	border-bottom: 1px solid #eee;
	background: #fafafa;
	font-size: 16px;
	font-weight: bold;
	color: #222;
}

.odf_sec_btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #ccc;
	background: #fff;
	color: #555;
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
	white-space: nowrap;
}

.odf_sec_btn:hover {
	border-color: #2dbdb6;
	color: #2dbdb6;
}

.odf_sec_cnt {
	color: #777;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
}

/* ----- 주문상품 ----- */

.odf_prd_list { padding: 0 24px; }

.odf_prd {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid #f2f2f2;
}

.odf_prd:last-child { border-bottom: 0; }

.odf_prd_img { flex: 0 0 auto; }

.odf_prd_img img {
	display: block;
	width: 88px;
	height: 88px;
	border: 1px solid #eee;
	object-fit: cover;
}

.odf_prd_info {
	flex: 1;
	min-width: 0;
}

.odf_prd_name {
	display: block;
	color: #111;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.5;
	word-break: break-all;
}

.odf_prd_cp { margin-top: 10px; }

.odf_prd_cp .cp_btn,
.odf_prd_cp .cp_cancel {
	height: 30px;
	margin: 0 0 0 4px;
	padding: 0 12px;
	border-radius: 0;
	background: #fff;
	font-size: 12px;
	line-height: 28px;
	vertical-align: middle;
	cursor: pointer;
}

.odf_prd_cp .cp_btn {
	margin-left: 0;
	border: 1px solid #2dbdb6;
	color: #2dbdb6;
}

.odf_prd_cp .cp_cancel {
	border: 1px solid #ccc;
	color: #666;
}

.odf_prd_calc {
	flex: 0 0 auto;
	width: 150px;
	color: #666;
	font-size: 13px;
	text-align: right;
}

.odf_prd_unit:after {
	margin: 0 7px;
	color: #ccc;
	content: "\00d7";
}

.odf_prd_amt {
	flex: 0 0 auto;
	width: 130px;
	color: #111;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
}

.odf_prd_amt .od_won {
	font-size: 13px;
	font-weight: normal;
	color: #666;
}

/* ----- 입력 항목 ----- */

.odf_body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 24px;
	padding: 24px;
}

.odf_row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.odf_row_full { grid-column: 1 / -1; }

.odf_lb_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* 필수 표기가 있는 항목과 없는 항목의 입력칸 높이를 맞춘다 */
.odf_row > .odf_lb,
.odf_lb_row { height: 22px; }

.odf_lb {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #444;
	font-size: 13px;
	font-weight: bold;
}

#sod_frm .odf_ct { min-width: 0; }

#forderform #sod_frm .odf_ct .frm_input {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 14px;
	box-sizing: border-box;
}

#sod_frm .odf_ct .frm_input:focus {
	border-color: #2dbdb6;
	outline: none;
}

/* 주소는 주소 검색으로만 채우므로 직접 입력할 수 없음을 배경으로 나타낸다 */
#forderform #sod_frm .odf_ct .frm_input[readonly] { background: #f5f5f5; color: #666; }

/* 필수 항목은 이름표로 안내하므로 입력칸의 표시 이미지는 사용하지 않는다 */
#sod_frm .odf_ct .required,
#sod_frm .odf_pay_ct .required { background-image: none !important; }

#sod_frm .odf_ct textarea.frm_input {
	height: 96px;
	padding: 12px 14px;
	line-height: 1.7;
	resize: vertical;
}

.odf_help {
	color: #999;
	font-size: 12px;
	line-height: 1.6;
}

.odf_chk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.odf_chk input { margin: 0; }

.odf_chk label {
	margin: 0;
	color: #555;
	font-size: 13px;
	cursor: pointer;
}

/* 주소 입력 */
.odf_addr {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.odf_addr_zip {
	display: flex;
	gap: 8px;
}

#forderform #sod_frm .odf_addr_zip .frm_input {
	flex: 0 0 140px;
	width: 140px;
}

.odf_addr_btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 46px;
	padding: 0 20px;
	border: 1px solid #555;
	background: #555;
	color: #fff;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 14px;
	cursor: pointer;
}

.odf_addr_btn:hover {
	border-color: #333;
	background: #333;
}

/* ----- 배송지 선택 ----- */

#sod_frm_taker .order_choice_place {
	position: static;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#sod_frm_taker .order_choice_place input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

#sod_frm_taker .order_choice_place label {
	display: inline-flex;
	align-items: center;
	height: 40px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid #ddd;
	background: #fff;
	color: #555;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}

#sod_frm_taker .order_choice_place label:hover { border-color: #2dbdb6; }

/* 선택 항목 표시 */
#sod_frm_taker .order_choice_place label:before,
#sod_frm_pay #sod_frm_paysel label:before {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-right: 9px;
	border: 1px solid #d5d5d5;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	content: "";
}

#sod_frm_taker .order_choice_place input:checked + label:before,
#sod_frm_pay #sod_frm_paysel input[type="radio"]:checked + label:before {
	border-color: #2dbdb6;
	background: #2dbdb6 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.7 2.7L10 3.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% 50%;
	background-size: 11px 11px;
}


#sod_frm_taker .order_choice_place input:checked + label {
	border-color: #2dbdb6;
	background: #eaf8f7;
	color: #17847f;
	font-weight: bold;
}

/* ----- 결제수단 ----- */

.odf_body_pay {
	display: block;
	padding: 24px;
}

#settle_bank .odf_pay_ct { display: block; }

#sod_frm_pt_alert {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
	padding: 13px 16px;
	border: 1px solid #eee;
	background: #fafafa;
	color: #888;
	font-size: 12px;
	line-height: 1.6;
}

#sod_frm_pt_alert i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: #2dbdb6;
}

#sod_frm_pt_alert span {
	flex: 1;
	min-width: 0;
}
#sod_frm_pt_alert strong { color: #2dbdb6; }

#sod_frm_paysel {
	/* 결제수단은 위에서 아래로 한 줄씩 배치하여 순서대로 확인할 수 있도록 한다 */
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

#sod_frm_paysel legend { display: none; }

#sod_frm_paysel input[type="radio"] {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

/* 간편결제 종류 목록이 사이에 놓이므로 그 다음 항목에도 같은 간격을 준다 */
.pay_opt + .pay_opt,
.pay_easy_list + .pay_opt { margin-top: 8px; }

#sod_frm_pay #sod_frm_paysel label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-width: 0;
	height: 52px;
	padding: 0 16px;
	border: 1px solid #ddd !important;
	background: #fff !important;
	color: #555 !important;
	font-size: 14px;
	cursor: pointer;
}

#sod_frm_paysel label:hover { border-color: #2dbdb6 !important; }

#sod_frm_pay #sod_frm_paysel input[type="radio"]:checked + label {
	border-color: #2dbdb6 !important;
	background: #eaf8f7 !important;
	color: #17847f !important;
	font-weight: bold;
}

/* 간편결제 종류는 간편결제를 선택하셨을 때에만 표시한다 */
.pay_easy_list { display: none; }

.pay_easy_list.pay_easy_open {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 8px;
	padding: 14px;
	border: 1px solid #e4eeec;
	background: #f7fbfa;
}

#sod_frm_pay #sod_frm_paysel .pay_easy_item label {
	gap: 8px;
	height: 48px;
	padding: 0 12px;
	font-size: 13px;
}

#sod_frm_pay #sod_frm_paysel .pay_easy_item label:before {
	width: 16px;
	height: 16px;
	margin-right: 2px;
}

/* 종류별 표시. 상표 이미지를 두면 이 자리에 이미지가 들어가고 없으면 명칭이 들어간다 */
/* 상표마다 가로 세로 비율이 달라 자리를 정해 두고 비율을 유지한 채 넣는다 */
.pay_easy_img {
	flex: 1;
	min-width: 0;
	max-width: 118px;
	height: 26px;
	object-fit: contain;
	object-position: left center;
}

.pay_easy_mark {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: bold;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ----- 쿠폰 · 적립금 ----- */

/* 항목마다 성격이 달라 견주어 볼 필요가 없으므로 한 줄에 하나씩 배치한다 */
#sod_frm_benefit .odf_body { grid-template-columns: 1fr; }

/* 적립금 사용 조건은 입력란 아래에 따로 안내한다 */
#sod_frm .odf_bnf_cond {
	margin: 8px 0 0;
	color: #888;
	font-size: 13px;
	line-height: 1.6;
}

.odf_bnf_ct {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 적용된 할인 금액. 입력란과 높이를 맞춘다 */
.odf_bnf_val {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #eee;
	background: #fafafa;
	color: #444;
	font-size: 14px;
}

/* 적용하신 쿠폰의 이름. 적용 전에는 사용할 수 있다는 안내를 같은 자리에 표시한다 */
.odf_cp_name {
	min-width: 0;
	overflow: hidden;
	color: #999;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.odf_cp_name.odf_cp_on {
	color: #333;
	font-size: 14px;
	font-weight: bold;
}

.odf_cp_dc {
	flex: none;
	color: #d9534f;
	font-weight: bold;
}

.odf_cp_dc .od_won { color: #d9534f; }

.odf_bnf_val em {
	font-style: normal;
	font-weight: bold;
}

#forderform #sod_frm .odf_bnf_ct .frm_input {
	flex: 1;
	min-width: 0;
	text-align: right;
}

/* 사용하실 수 없는 경우에는 사유를 같은 자리에 표시한다 */
.odf_bnf_val.odf_bnf_none {
	justify-content: flex-start;
	color: #999;
	font-size: 13px;
}

.odf_bnf_btn {
	flex: none;
	height: 46px;
	padding: 0 18px;
	border: 1px solid #2dbdb6;
	background: #2dbdb6;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
}

.odf_bnf_btn:hover { border-color: #25a49e; background: #25a49e; }

/* 취소 단추는 적용 단추 옆에 같은 높이로 둔다 */
.odf_bnf_ct .cp_cancel {
	flex: none;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #ddd;
	background: #fff;
	color: #666;
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

.odf_bnf_ct .cp_cancel:hover { border-color: #999; color: #222; }

#sod_frm .odf_bnf_note {
	display: flex;
	/* 기본 스킨이 세로 배치를 지정하고 있어 가로로 나열되도록 다시 지정한다 */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
	margin: 0;
	padding: 13px 16px;
	border: 1px solid #eee;
	background: #fafafa;
	color: #666;
	font-size: 13px;
}

#sod_frm .odf_bnf_note strong {
	margin-right: 8px;
	color: #444;
	font-weight: bold;
}

#sod_frm .odf_bnf_note em {
	color: #17847f;
	font-style: normal;
	font-weight: bold;
}

.odf_bnf_guide {
	margin-left: auto;
	color: #999;
	font-size: 12px;
}

/* 기본 스킨이 항목마다 폭과 오른쪽 정렬을 지정하고 있어 왼쪽부터 나열되도록 조정한다 */
#sod_frm .odf_bnf_note > span {
	display: inline-flex;
	align-items: center;
	width: auto;
	text-align: left;
}

#sod_frm .odf_bnf_note strong {
	width: auto;
	line-height: inherit;
}

/* 무통장입금 상세 */
#settle_bank {
	margin-top: 14px;
	padding: 16px 18px;
	border: 1px solid #dceeec;
	background: #f6fcfb;
}

.odf_pay_row {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 14px;
}

.odf_pay_row:last-of-type { margin-bottom: 0; }

.odf_pay_lb {
	color: #555;
	font-size: 13px;
	font-weight: bold;
}

.odf_pay_ct {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

#forderform #sod_frm .odf_pay_ct .frm_input {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 14px;
	box-sizing: border-box;
}

#forderform #sod_frm .odf_pay_ct .frm_input:focus {
	border-color: #2dbdb6;
	outline: none;
}

#sod_frm .odf_pay_ct select {
	width: 100%;
	min-width: 0;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 14px;
}

.odf_bank_one {
	color: #17847f;
	font-size: 15px;
	font-weight: bold;
}

.odf_pay_note {
	margin: 14px 0 0;
	color: #999;
	font-size: 12px;
}

.odf_pay_none {
	margin: 0;
	padding: 30px 0;
	color: #888;
	font-size: 14px;
	text-align: center;
}

/* 포인트 사용 */
.sod_frm_point {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid #f0f0f0;
}

.sod_frm_point h3 {
	margin: 0 0 14px;
	padding-left: 10px;
	border-left: 3px solid #2dbdb6;
	font-size: 14px;
	font-weight: bold;
	color: #222;
	line-height: 1.2;
}

#forderform #sod_frm .odf_pt_input .frm_input {
	width: 100%;
	text-align: right;
}

#sod_frm_pt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
	padding: 13px 16px;
	background: #fafafa;
	color: #666;
	font-size: 13px;
}

#sod_frm_pt strong {
	margin-right: 8px;
	color: #444;
}

#sod_frm_pt em {
	color: #2dbdb6;
	font-style: normal;
	font-weight: bold;
}

/* ----- 결제 금액 요약 ----- */

.odf_sum {
	position: sticky;
	/* 상단 메뉴와 서브 메뉴가 141px 높이로 고정돼 있다 */
	top: 161px;
	padding: 24px 24px 26px;
	border: 1px solid #e5e5e5;
	background: #fafcfc;
}

.odf_sum h3 {
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 16px;
	font-weight: bold;
	color: #222;
}

.odf_sum_row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 11px;
}

.odf_sum_row dt {
	flex: 0 0 auto;
	color: #666;
	font-size: 13px;
	white-space: nowrap;
}

.odf_sum_row dd {
	margin: 0;
	color: #333;
	font-size: 15px;
	font-weight: bold;
	text-align: right;
}

.odf_sum_row .od_won {
	margin-left: 2px;
	color: #888;
	font-size: 12px;
	font-weight: normal;
}

.odf_sum_dc dd { color: #d9534f; }
.odf_sum_dc .od_won { color: #d9534f; }

/* 쿠폰 행은 폭이 좁으므로 금액과 조작 단추를 위아래로 나눈다 */
.odf_sum_cp dd {
	min-width: 0;
	text-align: right;
}

.odf_sum_cp .odf_sum_amt {
	display: block;
	white-space: nowrap;
}

.odf_sum_cpctl {
	display: block;
	margin-top: 6px;
	font-weight: normal;
	white-space: nowrap;
}

.odf_sum_cp .btn_frmline,
.odf_sum_cp .cp_cancel {
	width: auto;
	height: 26px;
	margin: 0 0 0 4px;
	padding: 0 10px;
	border-radius: 3px;
	background: #fff;
	font-size: 12px;
	line-height: 24px;
	vertical-align: middle;
	cursor: pointer;
}

.odf_sum_cp .btn_frmline {
	border: 1px solid #2dbdb6;
	color: #2dbdb6;
}

.odf_sum_cp .cp_cancel {
	border: 1px solid #ccc;
	color: #666;
}

/* 기본 스킨의 결제금액 상자 서식을 사용하지 않는다 */
#sod_frm .odf_sum .odf_sum_total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 18px 0 20px;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid #e5e5e5;
	background: none;
	line-height: 1.2;
	text-align: left;
}

#sod_frm .odf_sum .odf_sum_total span { float: none; }

#sod_frm .odf_sum .odf_sum_total > span {
	color: #222;
	font-size: 15px;
	font-weight: bold;
}

#sod_frm .odf_sum .odf_sum_total strong {
	color: #2dbdb6;
	font-size: 26px;
	font-weight: bold;
}

#sod_frm .odf_sum .odf_sum_total .print_price {
	display: inline;
	color: #2dbdb6;
	font-size: 26px;
}

#sod_frm .odf_sum .odf_sum_total .od_won {
	display: inline;
	margin-left: 2px;
	color: #2dbdb6;
	font-size: 14px;
	font-weight: normal;
}

#sod_frm .odf_sum #display_pay_button {
	padding: 0;
	border: 0;
	background: none;
	max-width: none;
}

.odf_sum_note {
	margin: 16px 0 0;
	padding-top: 15px;
	border-top: 1px dashed #ddd;
	color: #888;
	font-size: 12px;
	line-height: 1.7;
}

.odf_sum_note strong { color: #555; }

/* 주문 단추 */
#sod_frm .btn_confirm {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

#sod_frm .btn_confirm .btn_submit,
#sod_frm .btn_confirm .btn01 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

#sod_frm .btn_confirm .btn_submit {
	border: 1px solid #2dbdb6;
	background: #2dbdb6;
	color: #fff;
}

#sod_frm .btn_confirm .btn_submit:hover {
	border-color: #25a49e;
	background: #25a49e;
}

#sod_frm .btn_confirm .btn01 {
	border: 1px solid #ddd;
	background: #fff;
	color: #666;
	font-weight: normal;
}

#sod_frm .btn_confirm .btn01:hover {
	border-color: #999;
	color: #222;
}

#display_pay_process {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 0;
	color: #555;
	font-size: 14px;
}

/* ===== 수량·옵션 변경 창 ===== */
/* 상품 목록의 옵션 선택 창과 같은 크기로 맞춘다 */

#sod_bsk_list .mod_option_bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000;
	background: rgba(0,0,0,.5);
}

#sod_bsk_list #mod_option_frm {
	position: fixed;
	top: 50% !important;
	left: 50% !important;
	/* 기본 스타일의 음수 여백을 함께 해제해야 화면 가운데에 표시된다 */
	margin: 0 !important;
	transform: translate(-50%, -50%);
	width: 520px !important;
	max-height: 86vh;
	z-index: 1000001;
	border: 1px solid #d5d5d5;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0,0,0,.2);
	overflow-y: auto;
	font-family: 'Nanum Gothic', sans-serif;
}

#mod_option_frm h2 {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0;
	padding: 0 20px;
	height: 56px;
	line-height: 56px;
	border-bottom: 2px solid #333;
	background: #fff;
	color: #111;
	font-size: 17px;
	font-weight: bold;
}

#mod_option_close {
	position: absolute;
	top: 12px;
	right: 16px;
	z-index: 2;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: #999;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

#mod_option_close:hover { color: #333; }

#mod_option_frm .option_wr {
	padding: 18px 20px 0;
}

#mod_option_frm .option_wr h3,
#mod_option_frm #sit_sel_option h3 {
	margin: 0 0 10px;
	color: #333;
	font-size: 14px;
	font-weight: bold;
}

#mod_option_frm .get_item_options,
#mod_option_frm .get_item_supply {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

#mod_option_frm .get_item_options label,
#mod_option_frm .get_item_supply label {
	flex: 0 0 130px;
	color: #555;
	font-size: 13px;
	word-break: break-all;
}

#mod_option_frm .get_item_options > span,
#mod_option_frm .get_item_supply > span {
	flex: 1;
	min-width: 0;
}

#mod_option_frm select {
	width: 100%;
	height: 38px;
	padding: 0 8px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 13px;
	box-sizing: border-box;
}

#mod_option_frm select:disabled { background: #f5f5f5; color: #aaa; }

#mod_option_frm #sit_sel_option {
	margin-top: 18px;
	padding: 18px 20px 0;
	border-top: 1px solid #eee;
}

#mod_option_frm #sit_opt_added {
	margin: 0;
	padding: 0;
	list-style: none;
}

#mod_option_frm #sit_opt_added > li {
	padding: 12px 14px;
	margin-bottom: 8px;
	border: 1px solid #eee;
	background: #fafafa;
}

/* 장바구니 목록과 같이 윗줄에 항목 이름과 삭제를, 아랫줄에 수량과 금액을 둔다 */
#mod_option_frm .opt_name {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 8px;
}

#mod_option_frm .opt_tag {
	flex: none;
	align-self: flex-start;
	/* 항목 사이 간격이 아니라 낱말 사이 간격으로 보이도록 옵션명 쪽으로 당긴다 */
	margin-right: -7px;
	color: #666;
	font-size: 13px;
	line-height: 1.5;
	white-space: nowrap;
}

#mod_option_frm .sit_opt_subj {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: #444;
	font-size: 13px;
	line-height: 1.5;
	word-break: break-all;
}

#mod_option_frm .opt_name .sit_opt_del {
	flex: none;
	margin-left: auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #ddd;
	background: #fff;
	color: #888;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

#mod_option_frm .opt_name .sit_opt_del:hover {
	border-color: #be334a;
	color: #be334a;
}

#mod_option_frm .opt_count {
	display: flex;
	align-items: center;
	gap: 4px;
}

#mod_option_frm .opt_qty {
	display: flex;
	flex: none;
	align-items: center;
	gap: 4px;
}

#mod_option_frm .opt_count .num_input {
	width: 56px;
	height: 32px;
	border: 1px solid #ddd;
	text-align: center;
	box-sizing: border-box;
}

#mod_option_frm .opt_count button {
	width: 32px;
	height: 32px;
	border: 1px solid #ddd;
	background: #fff;
	color: #555;
	cursor: pointer;
}

#mod_option_frm .opt_count button:hover { border-color: #2dbdb6; color: #2dbdb6; }

#mod_option_frm .sit_opt_prc {
	margin-left: auto;
	color: #666;
	font-size: 13px;
}

/* 옵션마다 표시하는 상품 금액 */
#mod_option_frm .sit_opt_amt {
	margin-left: auto;
	min-width: 90px;
	color: #111;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	white-space: nowrap;
}

#mod_option_frm #sit_tot_price {
	display: block;
	float: none;
	clear: both;
	width: auto;
	padding: 16px 20px 0;
	color: #222;
	font-size: 15px;
	font-weight: bold;
	text-align: right;
}

#mod_option_frm .btn_confirm {
	display: block;
	float: none;
	clear: both;
	width: auto;
	margin: 18px 0 0;
	padding: 14px 20px;
	border-top: 1px solid #eee;
	background: #fafafa;
	text-align: center;
}

#mod_option_frm .btn_confirm .btn_submit {
	width: 100%;
	height: 46px;
	padding: 0;
	border: 1px solid #2dbdb6;
	background: #2dbdb6;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}

#mod_option_frm .btn_confirm .btn_submit:hover {
	border-color: #25a49e;
	background: #25a49e;
}

/* ===== 주문 상세내역 ===== */

#sod_fin {
	width: 1280px;
	margin: 50px auto 90px;
	color: #333;
	font-family: 'Nanum Gothic', sans-serif;
}

#sod_fin_no {
	margin: 0 0 26px;
	padding: 20px 24px;
	border: 1px solid #d9ece9;
	background: #f4fbfa;
	color: #2a9a94;
	font-size: 15px;
}

#sod_fin_no strong {
	font-size: 19px;
	letter-spacing: 0.5px;
}

#sod_fin section { margin-bottom: 30px; }

/* 원래 숨김 처리된 제목을 화면에 표시한다 */
#sod_fin h2,
#sod_fin_list h2,
#sod_fin_view h2,
#sod_fin .sod_left h2 {
	position: static;
	margin: 0 0 14px;
	padding-left: 12px;
	border-left: 4px solid #2dbdb6;
	font-size: 18px;
	font-weight: bold;
	color: #222;
	line-height: 1.2;
	overflow: visible;
}

#sod_fin .tbl_frm01,
#sod_fin .tbl_head01 {
	border: 1px solid #e5e5e5;
	overflow: hidden;
}

#sod_fin .tbl_frm01 table,
#sod_fin .tbl_head01 table {
	width: 100%;
	border-collapse: collapse;
}

#sod_fin .tbl_frm01 th,
#sod_fin .tbl_head01 th {
	width: 180px;
	padding: 14px 18px;
	border-bottom: 1px solid #f0f0f0;
	background: #fafafa;
	color: #555;
	font-size: 14px;
	font-weight: normal;
	text-align: left;
}

#sod_fin .tbl_frm01 td,
#sod_fin .tbl_head01 td {
	padding: 14px 18px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
}

#sod_fin .sod_left h3,
#sod_fin_view h3 {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid #e5e5e5;
	border-bottom: 0;
	background: #fafafa;
	font-size: 15px;
	font-weight: bold;
	color: #333;
}

#sod_fin .sod_left h3 + .tbl_head01,
#sod_fin_view h3 + .tbl_head01 {
}

#sod_fin .sod_left th { width: 180px; padding: 14px 18px; }
#sod_fin .sod_left td { padding: 14px 18px; }

#sod_fin .od_fin_total {
	color: #2dbdb6;
	font-size: 18px;
	font-weight: bold;
}


/* ===== 주문완료 ===== */

#sod_fin.od_end .od_title {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 4px solid #2dbdb6;
	font-size: 24px;
	font-weight: bold;
	color: #111;
	line-height: 1.2;
}

.od_done {
	margin: 34px 0 46px;
	padding: 46px 40px 40px;
	border: 1px solid #e5e5e5;
	background: #fafcfc;
	text-align: center;
}

.od_done .fa-check-circle {
	color: #2dbdb6;
	font-size: 52px;
	line-height: 1;
}

.od_done_msg {
	margin: 20px 0 0;
	color: #111;
	font-size: 22px;
	font-weight: bold;
}

.od_done_sub {
	display: block;
	margin-top: 10px;
	color: #666;
	font-size: 14px;
}

.od_done_sub strong { color: #2dbdb6; }

.od_done_no {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 26px 0 0;
	padding: 14px 30px;
	border: 1px solid #d9ece9;
	background: #fff;
}

.od_done_no dt {
	color: #666;
	font-size: 14px;
}

.od_done_no dd {
	margin: 0;
	color: #111;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: .5px;
}

/* 무통장입금 안내 */
.od_done_bank {
	max-width: 560px;
	margin: 30px auto 0;
	padding: 24px 28px;
	border: 1px solid #e5e5e5;
	background: #fff;
	text-align: left;
}

.od_done_bank h3 {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
	color: #222;
	font-size: 16px;
	font-weight: bold;
}

.od_done_bank dl {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 10px;
	font-size: 14px;
}

.od_done_bank dt {
	flex: 0 0 78px;
	color: #888;
}

.od_done_bank dd {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: #333;
	word-break: break-all;
}

.od_done_bank .od_done_amt {
	color: #2dbdb6;
	font-size: 18px;
	font-weight: bold;
}

.od_done_note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid #f2f2f2;
	color: #888;
	font-size: 13px;
	line-height: 1.7;
}

.od_done_btns {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 34px;
}

.od_done_btns .od_btn { min-width: 180px; }


/* ===== 주문상세내역 ===== */

/* 주문번호와 상태를 한 줄로 표시한다 */
.odv_info {
	display: flex;
	margin: 26px 0 34px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
}

.odv_info dl {
	flex: 1;
	margin: 0;
	padding: 18px 24px;
	border-left: 1px solid #ececec;
}

.odv_info dl:first-child { border-left: 0; }

.odv_info dt {
	color: #888;
	font-size: 13px;
}

.odv_info dd {
	margin: 6px 0 0;
	color: #222;
	font-size: 15px;
	font-weight: bold;
}

.odv_info .odv_info_no { letter-spacing: .5px; }

/* 주문 상태 표기 */
.odv_state {
	display: inline-block;
	padding: 0 12px;
	border: 1px solid #2dbdb6;
	border-radius: 12px;
	background: #fff;
	color: #17847f;
	font-size: 13px;
	font-weight: bold;
	line-height: 22px;
	white-space: nowrap;
}

#sod_fin .od_tbl tbody td.od_td_st { text-align: center; }

/* 상태 설명 */
#sod_sts_wrap {
	margin-top: 14px;
	text-align: right;
}

.odv_help {
	padding: 0 14px;
	border: 1px solid #ddd;
	background: #fff;
	color: #666;
	font-size: 13px;
	line-height: 30px;
	cursor: pointer;
}

.odv_help:hover { border-color: #2dbdb6; color: #17847f; }

#sod_sts_explan {
	display: none;
	margin-top: 12px;
	padding: 22px 26px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
	text-align: left;
}

#sod_fin_legend {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

#sod_fin_legend dt {
	flex: 0 0 88px;
	margin-bottom: 8px;
	color: #17847f;
	font-size: 13px;
	font-weight: bold;
}

#sod_fin_legend dd {
	flex: 0 0 calc(50% - 88px);
	margin: 0 0 8px;
	color: #666;
	font-size: 13px;
}

.odv_help_close {
	margin-top: 8px;
	padding: 0 14px;
	border: 1px solid #ddd;
	background: #fff;
	color: #666;
	font-size: 13px;
	line-height: 28px;
	cursor: pointer;
}

/* 배송 정보. 주문하신 분과 받으시는 분을 나란히 표시한다 */
.odv_sec { margin-bottom: 40px; }

.odv_grid {
	display: flex;
	gap: 20px;
}

.odv_card {
	flex: 1;
	min-width: 0;
	border: 1px solid #e5e5e5;
	background: #fff;
}

#sod_fin .odv_card h3 {
	margin: 0;
	padding: 16px 22px;
	border: 0;
	border-bottom: 1px solid #eee;
	background: #fafafa;
	color: #222;
	font-size: 15px;
	font-weight: bold;
}

.odv_dl {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 20px 22px;
}

.odv_dl dt {
	flex: 0 0 96px;
	margin-bottom: 12px;
	color: #888;
	font-size: 14px;
	line-height: 1.6;
}

.odv_dl dd {
	flex: 0 0 calc(100% - 96px);
	margin: 0 0 12px;
	color: #333;
	font-size: 14px;
	line-height: 1.6;
	word-break: break-all;
}

.odv_dl dt:last-of-type,
.odv_dl dd:last-of-type { margin-bottom: 0; }

/* 결제 정보 */
.odv_pay {
	display: flex;
	border: 1px solid #e5e5e5;
	background: #fff;
}

.odv_pay_way {
	flex: 1;
	min-width: 0;
	border-right: 1px solid #eee;
}

.odv_pay_way .odv_dl { padding: 24px 26px; }

.odv_pay_way .odv_dl dd strong {
	color: #17847f;
	font-weight: bold;
}

.odv_pay_sum {
	flex: 0 0 400px;
	padding: 24px 26px;
	background: #fafcfc;
}

.odv_pay_sum dl {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 12px;
	font-size: 14px;
}

.odv_pay_sum dt { color: #666; }

.odv_pay_sum dd {
	margin: 0;
	color: #333;
}

.odv_pay_minus dd { color: #e2564f; }

.odv_pay_total {
	margin-top: 16px !important;
	padding-top: 16px;
	border-top: 1px solid #e0eceb;
}

.odv_pay_total dt {
	color: #222 !important;
	font-size: 15px;
	font-weight: bold;
}

.odv_pay_total dd {
	color: #2dbdb6 !important;
	font-size: 22px;
	font-weight: bold;
}

.odv_pay_total .od_won {
	margin-left: 2px;
	font-size: 15px;
}

.odv_pay_misu {
	margin: 14px 0 0;
	color: #e2564f;
	font-size: 13px;
	text-align: right;
}

.odv_pay_note {
	margin: 10px 0 0;
	color: #888;
	font-size: 13px;
	text-align: right;
}

/* 주문취소 */
.odv_cancel_box {
	padding: 24px 26px;
	border: 1px solid #e5e5e5;
	background: #fff;
}

.odv_cancel_msg {
	margin: 0 0 16px;
	color: #666;
	font-size: 14px;
	line-height: 1.7;
}

.odv_cancel_box .od_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	height: 42px;
	padding: 0 22px;
	border-radius: 2px;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}

.odv_cancel_btn {
	border: 1px solid #cf3d35;
	background: #cf3d35;
	color: #fff;
}

.odv_cancel_btn:hover,
.odv_cancel_btn:focus {
	border-color: #b8322b;
	background: #b8322b;
	color: #fff;
}

/* 접수된 취소 신청을 철회하는 서식 */
.odv_cancel_wd { margin: 0; }

/* 기본 스타일이 position:absolute 로 지정돼 있어 문서 흐름에서 벗어난다 */
/* 하단 이동 */
.odv_btns {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 50px;
}

.odv_btns .od_btn { min-width: 180px; }

/* 취소, 반품, 품절 상태 */
.odv_state_off {
	border-color: #ddd;
	color: #999;
}

/* 진행 중인 취소·교환·반품 신청 */
.odv_state_claim {
	border-color: #e2a03f;
	background: #fff8ec;
	color: #b5730a;
}

.odv_state_claim.odv_state_off {
	border-color: #ddd;
	background: #f7f7f7;
	color: #999;
}


/* ===== 마이페이지 틀 안에 배치할 때 ===== */

#mp_body #sod_bsk,
#mp_body #sod_frm,
#mp_body #sod_fin {
	width: 100%;
	margin: 0;
}

/* 좌측 메뉴를 함께 표시하므로 요약 영역을 표 아래로 내린다 */
#mp_body .od_layout { display: block; }

#mp_body .od_layout_side {
	width: 100%;
	margin-top: 24px;
}

#mp_body .od_card {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 30px;
	padding: 22px 26px;
}

#mp_body .od_card h3 {
	width: 100%;
	margin-bottom: 16px;
}

#mp_body .od_card dl {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

#mp_body .od_card .od_card_sum {
	gap: 12px;
	margin-left: auto;
	margin-right: 10px;
	padding: 0;
	border: 0;
}

#mp_body .od_card .od_btn_block {
	width: auto;
	min-width: 150px;
	margin: 0;
}

/* 주문서 작성. 좌측 메뉴만큼 좁아지므로 요약 영역을 함께 조정한다 */
#mp_body #sod_frm .odf { gap: 24px; }

#mp_body #sod_frm .odf .sod_right {
	flex: 0 0 300px;
	width: 300px;
}

/* 권한이 없어 주문하실 수 없을 때의 안내 */
.od_btn_none {
	margin: 0 0 8px;
	padding: 14px 12px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
	color: #888;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

/* 주문 요약의 기능 단추. 금액 아래에 한 줄로 배치한다 */
#mp_body .od_card .od_card_btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eee;
}

#mp_body .od_card .od_card_btns .od_btn {
	width: auto;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0 22px;
	font-size: 14px;
}

#mp_body .od_card .kb_price_note { margin: 0; }

/* 쿠폰 선택 창. 주문 요약 영역이 좁아 화면 가운데에 표시한다 */
#mp_body .odf_cp_modal { display: none; }

#mp_body .odf_cp_modal.odf_cp_on {
	display: block;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1000;
}

#mp_body .odf_cp_dim {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0, 0, 0, 0.45);
}

#mp_body .odf_cp_box {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1001;
	width: 580px;
	max-width: calc(100% - 40px);
	transform: translate(-50%, -50%);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* 쿠폰 목록 */
#mp_body .odf_cpl_head {
	position: relative;
	padding: 20px 56px 18px 24px;
	border-bottom: 1px solid #eee;
}

#mp_body .odf_cpl_head h3 {
	margin: 0;
	font-size: 17px;
	font-weight: bold;
	color: #222;
	text-align: left;
}

#mp_body .odf_cpl_head p {
	margin: 6px 0 0;
	font-size: 13px;
	color: #888;
	line-height: 1.5;
}

#mp_body .odf_cpl_close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: #999;
	font-size: 17px;
	cursor: pointer;
}

#mp_body .odf_cpl_close:hover { color: #222; }

#mp_body .odf_cpl_list {
	max-height: 54vh;
	margin: 0;
	padding: 16px 24px 20px;
	overflow-y: auto;
	list-style: none;
}

/* 쿠폰 한 매 */
#mp_body .odf_cpi {
	display: flex;
	align-items: stretch;
	margin-top: 12px;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

#mp_body .odf_cpi:first-child { margin-top: 0; }
#mp_body .odf_cpi:hover { border-color: #2dbdb6; }

#mp_body .odf_cpi_price {
	flex: 0 0 116px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px 8px;
	border-right: 1px dashed #cfe9e7;
	background: #f2fbfa;
	text-align: center;
}

#mp_body .odf_cpi_price strong {
	font-size: 22px;
	font-weight: bold;
	color: #17847f;
	line-height: 1.1;
	white-space: nowrap;
}

#mp_body .odf_cpi_price strong span {
	margin-left: 1px;
	font-size: 13px;
	font-weight: normal;
}

#mp_body .odf_cpi_rate {
	margin-top: 5px;
	font-size: 12px;
	color: #4d9b96;
}

#mp_body .odf_cpi_body {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
}

#mp_body .odf_cpi_head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

#mp_body .odf_cpi_left {
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 10px;
	background: #f2f2f2;
	color: #888;
	font-size: 11px;
	white-space: nowrap;
}

#mp_body .odf_cpi_name {
	display: block;
	min-width: 0;
	font-size: 14px;
	font-weight: bold;
	color: #222;
	line-height: 1.4;
	word-break: break-all;
}

#mp_body .odf_cpi_cond {
	margin: 9px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.6;
}

#mp_body .odf_cpi_cond li { display: flex; gap: 8px; }

#mp_body .odf_cpi_cond em {
	flex: 0 0 70px;
	color: #999;
	font-style: normal;
	white-space: nowrap;
}

#mp_body .odf_cpi_cond span {
	flex: 1;
	min-width: 0;
	color: #555;
}

#mp_body .odf_cpi_soon { background: #fdeeee; color: #c0392b; }

#mp_body .odf_cpi_code {
	font-family: Consolas, Menlo, monospace;
	letter-spacing: 0.3px;
	word-break: break-all;
}

#mp_body .odf_cpi_act {
	flex: 0 0 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px 0 0;
}

#mp_body .odf_cpi_btn {
	width: 100%;
	height: 38px;
	border: 1px solid #2dbdb6;
	border-radius: 3px;
	background: #fff;
	color: #2dbdb6;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}

#mp_body .odf_cpi_btn:hover { background: #2dbdb6; color: #fff; }

/* 사용할 수 있는 쿠폰이 없을 때 */
#mp_body .odf_cpl_none {
	margin: 0;
	padding: 48px 24px 52px;
	color: #666;
	font-size: 14px;
	text-align: center;
}

#mp_body .odf_cpl_none span {
	display: block;
	margin-top: 8px;
	color: #aaa;
	font-size: 13px;
}