@charset "utf-8";
/* 상품 상세의 주문 영역 디자인. 장바구니와 주문서는 order.css가 담당한다 */

/* 상품 상세의 상품명 아래에 표시되는 요약 정보 */
.od_prd_basic {
	display: block;
	margin-top: 7px;
}

.od_prd_basic em {
	display: inline-block;
	margin: 0 5px 4px 0;
	padding: 2px 9px;
	border: 1px solid #d9ece9;
	background: #f4fbfa;
	color: #2a9a94;
	font-size: 12px;
	font-style: normal;
	line-height: 1.6;
}

/* ===== 상품 상세의 주문 영역 ===== */

#sit_ov_btn {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
}

/*
 * 단추를 가로로 늘어놓던 시절의 띄움 해제용 가상 요소다. 지금은 가로 배치를
 * flex 로 처리하므로, 남겨 두면 빈 항목으로 잡혀 오른쪽 끝에 간격이 하나 더 생긴다.
 */
#sit_ov #sit_ov_btn::after {
	content: none;
}

/* 자료 내려받기 단추는 구매 단추와 구분되도록 위쪽 여백을 둔다 */
#sit_ov .btn_box {
	margin-top: 30px;
}

#sit_ov_btn button {
	width: auto;
	flex: 1;
	min-width: 180px;
	height: 56px;
	margin: 0;
	float: none;
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

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

#sit_ov_btn .sit_btn_cart:hover {
	background: #eaf8f7;
}

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

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

/* ===== 상품명과 관심상품 단추 ===== */

/* 관심상품 단추는 제품번호 오른쪽에 놓는다. 제품번호가 길어져도 겹치지 않는다 */
.sit_head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

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

.sit_head .sit_btn_wish {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	float: none;
	border: 0;
	background: none;
	color: #42bfe7;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.sit_head .sit_btn_wish:hover {
	opacity: 0.75;
}

/* 등록된 상품은 속을 채운 책갈피로 구분한다. 색은 등록 전후가 같다 */
.sit_head .sit_btn_wish.is_on {
	color: #42bfe7;
}

/* ===== 선택된 옵션의 관심상품 단추 ===== */

.opt_view_wrap .opt_wish {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
}

/* 선택된 옵션의 단추 모양은 #sit_opt_added 에서 지정하므로 같은 범위로 적어 맞춘다 */
/* 상품 자체를 등록하는 단추는 상품명 옆 단추의 아래 여백을 함께 물려받아 위로 밀린다 */
#sit_opt_added .opt_wish .sit_opt_wish {
	float: none;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #42bfe7;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease;
}

#sit_opt_added .opt_wish .sit_opt_wish:hover,
#sit_opt_added .opt_wish .sit_opt_wish.is_on {
	color: #42bfe7;
}

/* 등록된 상태는 속을 채운 책갈피로 구분한다. Font Awesome 5 는 같은 아이콘의
   외곽선과 채움을 글자 굵기로 나누므로 굵기만 바꾼다 */
.sit_btn_wish.is_on .fa-bookmark,
.sit_opt_wish.is_on .fa-bookmark {
	font-weight: 900;
}

#sit_ov_btn #sit_btn_alm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 20px;
	border: 1px solid #ccc;
	background: #fff;
	color: #555;
	font-size: 16px;
	text-decoration: none;
}

/* 상품 가격은 부가세 포함 금액을 앞세우고 그 구성을 아랫줄에 적는다 */
.kb_price_main {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: #222;
}

.kb_price_sub {
	display: block;
	color: #777;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}

/* 금액만 굵게 읽히도록 부가세 표기는 기본 두께로 둔다 */
.kb_price_tax {
	font-weight: 400;
}

.kb_price_tel {
	font-weight: 700;
	color: #555;
}

/* 결제 금액에 포함된 공급가액과 부가세액 안내 */
.kb_price_note {
	margin: 8px 0 0;
	color: #777;
	font-size: 12px;
	line-height: 1.6;
	text-align: right;
}

/* ===== 상품 요약 표의 줄 맞춤 ===== */

/*
 * 항목명은 한글과 영문이 두 줄로 표시되고 내용은 줄 수가 행마다 다르다.
 * 가운데 정렬 상태에서는 항목명과 내용의 첫 줄이 어긋나므로 위쪽으로 맞춘다.
 *
 * 상품 정보 스킨이 문서 안에서 .sit_ov_tbl 의 여백을 다시 지정하므로
 * 요약 표를 감싸는 .sit_info 를 함께 적어 이 표에만 적용한다.
 */
.sit_info .sit_ov_tbl th,
.sit_info .sit_ov_tbl td {
	padding: 10px 0;
	vertical-align: top;
}

/* 판매가격은 줄 높이가 5px 로 지정돼 있어 첫 줄이 위로 솟는다 */
.sit_info .sit_ov_tbl td strong {
	line-height: inherit;
	vertical-align: baseline;
}

/*
 * 내용은 한글과 영문을 나눈 표로 등록돼 있다. 칸 사이 여백과 첫 줄 위 여백이
 * 내용을 아래로 밀어 내므로 줄 간격은 유지한 채 시작 위치만 항목명과 맞춘다.
 */
.sit_info .sit_ov_tbl td .__se_tbl {
	margin: 0;
	border-collapse: collapse;
}

.sit_info .sit_ov_tbl td .__se_tbl > tbody > tr > td {
	padding: 8px 0;
	vertical-align: top;
}

.sit_info .sit_ov_tbl td .__se_tbl > tbody > tr:first-child > td {
	padding-top: 0;
}

.sit_info .sit_ov_tbl td .__se_tbl p {
	margin: 0;
}

/* ===== 선택된 옵션 행의 배치 ===== */

/* 옵션명이 두 줄이 되어도 단추와 금액이 같은 높이에 오도록 가운데로 맞춘다 */
#sit_opt_added .opt_view_wrap {
	align-items: center;
}

/* 삭제 단추와 관심상품 단추를 행 우측 끝에 세로로 놓는다 */
#sit_opt_added .opt_view_wrap .opt_close_btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 40px;
}

#sit_opt_added .opt_view_wrap .opt_wish {
	width: auto;
}

/* 옵션명이 줄을 넘길 때 낱말 가운데에서 끊기지 않도록 띄어쓰기에서 나눈다 */
#sit_opt_added .opt_name {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 삭제와 찜은 같은 크기의 무테 아이콘으로 표시한다. */
#sit_opt_added .sit_opt_del{
	position:static;
	float:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	margin:0;
	padding:0;
	border:0;
	background:none;
	font-size:17px;
	line-height:1;
}

#sit_opt_added .sit_opt_del > .fa,
#sit_opt_added .opt_wish .sit_opt_wish > .fa-bookmark{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:17px;
	height:17px;
	font-size:17px;
	line-height:1;
}

/* 행 금액에 옵션 추가 금액이 이미 들어 있으므로 따로 적지 않는다 */
#sit_opt_added .sit_opt_prc {
	display: none;
}

/* ===== 선택된 옵션 행의 금액 ===== */

#sit_opt_added .opt_price {
	flex: 0 0 auto;
	width: 190px;
	padding-left: 12px;
	text-align: right;
	line-height: 1.5;
	white-space: nowrap;
}

#sit_opt_added .opt_price_main {
	display: block;
	color: #222;
	font-size: 13px;
	font-weight: 700;
}

#sit_opt_added .opt_price_sub {
	display: block;
	color: #777;
	font-size: 11px;
}

/* ===== 선택된 옵션 행의 글자 크기 ===== */

/* 옵션명과 수량, 금액을 같은 크기로 맞춘다. 공급가와 부가세만 작게 둔다 */
#sit_opt_added .opt_name,
#sit_opt_added .opt_count,
#sit_opt_added .opt_count .num_input,
#sit_opt_added .opt_price_main {
	font-size: 13px;
}

/* ===== 상품 상세 영역의 폭 ===== */

/*
 * 제품 상세만 1200px 로 지정되어 있어 머리말과 꼬리말이 사용하는 1280px 기준선보다
 * 좌우가 40px 씩 안쪽으로 들어와 있었다. 같은 기준선에 맞춘다.
 * 정보 영역은 화면 안에서 58% 로 지정되므로 폭을 넓히면 함께 넓어진다.
 */
#sit_ov_wrap,
#sit_tab {
	width: 1280px;
}

#sit_ov_wrap {
	padding-left: 0;
	padding-right: 0;
}

#sit_info,
#sit_rel {
	max-width: 1280px;
}