@charset euc-kr;


.page-container{
    width: 1200px;
    margin: 0 auto;
}
.order_cate{
    width: 1200px;
    margin: 0 auto;
}

.sm12 li a{
    width: 202px;
}

.order{
    width: 1200px;
}

.order .or_l {
    width: 590px;
    float: left;
    font-size: 15px;
    margin-right: 10px;
}
.order .or_r {
    width: 600px;
    float: left;

}
.order .or_l .Pimg span.btn_zoom a {
    margin: 307px 0 0 -43px;
}
.title{
    font-size: 30px;
    font-weight: bold;
}
.s_txt{
    font-size: 14px;
    font-weight: 500;
}
.menu-title{
    font-size: 22px;
}
.sm18_3d_cate{
    width: 1202px;
}


.quick-search-item {
    padding: 0 10px;
}

/* 1. Box형 태그 배치 스타일 */
.sm12.design-tag {
	float: none;
	width: 100%;
	margin: 10px 0 20px 0;
	display: flex;
	flex-wrap: wrap; /* 항목이 많아지면 다음 줄로 넘어감 */
	justify-content: flex-start; /* 왼쪽부터 채움 */
	border: none; /* 전체 컨테이너 테두리 제거 */
	padding: 5px 0; /* 상하 여백 추가 */
}

/* 2차 메뉴 항목 (li) */
.sm12.design-tag li {
	flex-grow: 0; /* 너비 균등 분배 대신 내용물 크기만큼만 사용 */
	flex-basis: auto;
	list-style: none;
	margin: 0 5px 10px 5px; /* 항목 간 간격 (태그처럼 보이게) */
	padding: 0;
	text-align: center;
	box-sizing: border-box;
    background-color: #ffffff; /* 기본 배경색 */

}

/* 2차 메뉴 링크 (a) */
.sm12.design-tag li a {
	width: auto;
	padding: 8px 15px; /* 내부 패딩 조정 */
	font-size: 15px;
	font-weight: 400;
	color: #5a5a5a;
	display: block;
	background-color: #ffffff; /* 기본 배경색 */
	border: 1px solid #ddd; /* 얇은 테두리 */
	border-radius: 4px; /* 모서리 둥글게 */
	transition: all 0.2s;
}

.sm12 li a {
    background-color: #ffffff; /* 기본 배경색 */
}

/* 활성화된 (선택된) 메뉴 */
.sm12.design-tag .nav_on a {
	background-color: #000; /* 선택 시 배경 검은색 */
	color: #ffffff; /* 텍스트 흰색 */
	border-color: #000;
	font-weight: 600;
}

/* 마우스 오버 시 효과 */
.sm12.design-tag li:not(.nav_on) a:hover {
	color: #000;
	background-color: #eee;
}
/* or_l */
/*갤러리 스타일*/
/* --- 1. 이미지 갤러리 영역 스타일 --- */
.product-gallery-area {
 	margin-bottom: 20px; 
 	padding-bottom: 20px; 
 	border-bottom: 1px solid #f0f0f0; 
} 

.main-image-view {
 	position: relative; 
 	width: 100%;
    border-radius: 4px; 
 	overflow: hidden;     
    margin-bottom: 0; 
    border-radius: 15px;
} 

.main-image-view img {
 	width: 100%; 
 	display: block; 
} 

.thumbnail-gallery {
 	width: 100%;  
	display: flex; 
    justify-content: space-between;
	gap: 8px;
} 

.thumb-item {
 	flex: 0 0 calc((100% - 20px) / 3);      
    max-width: calc((100% - 20px) / 3); 
    border-radius: 15px;

} 

.thumb-item:hover, .thumb-item.active {
 	opacity: 1; 
 	border: 1px solid #00C6AC; 
}

.info-tabs-container {
	width: 100%;
	border: 1px solid #e0e0e0;
}

.tab-headers {
	display: flex;
	background-color: #fcfcfc;
	border-bottom: 1px solid #e0e0e0;
}

.tab-btn {
	flex-grow: 1;
	padding: 15px 15px;
	border: none;
	background-color: transparent;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s;
	font-size: 15px;
	color: #666;
}

.tab-btn.active {
	border-bottom: 3px solid #00C6AC;
	color: #000;
	font-weight: bold;
	margin-bottom: -1px;
}

.caution-header {
	background-color: #f7f7f7;
	border-bottom: 1px solid #e0e0e0;
	padding: 20px 30px;
	font-size: 19px;
	font-weight: 700;
	color: #00C6AC;
	display: flex;
	align-items: center;
}

.icon-warning {
	color: #00C6AC;
	font-size: 22px;
	margin-right: 12px;
	font-weight: 900;
}

.caution-body {
	padding: 15px 0px;
}

.caution-body ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.caution-body li {
	line-height: 1.7;
	margin-bottom: 16px;
	padding-left: 28px;
	position: relative;
	font-size: 14.5px;
	color: #444;
}

.caution-body li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	width: 6px;
	height: 12px;
	border: solid #00C6AC;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}


.c_re {
	color: #ff3b30;
	font-weight: bold;
	text-decoration: none;
}



/* --- 전체 아코디언 컨테이너 --- */
.product-info-accordion {
	width: 100%;
	border: none;
	padding: 0;
}

/* --- 각 카드 (섹션) 스타일 --- */
.info-card {
	margin-bottom: 10px;
	border-radius: 4px;
	background-color: #ffffff;
	/* 은은하고 세련된 그림자로 경계 표현 */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	transition: box-shadow 0.2s;
}

.info-card.active {
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* --- 카드 헤더 (토글 버튼) 스타일 --- */
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	cursor: pointer;
	background-color: #fcfcfc;
	border-bottom: 1px solid #eee; /* 구분선은 최소한으로 유지 */
}

.info-card.active .card-header {
	background-color: #f5fffd; /* 활성화 시 매우 연한 강조색 배경 */
}

.card-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #333;
}

.info-card.active .card-title {
	color: #00C6AC; /* 활성화 시 메인 컬러 적용 */
	font-weight: 700;
}

/* --- 토글 아이콘 ( + / - ) 스타일 --- */
.toggle-icon {
	font-size: 20px;
	font-weight: 400; /* 깔끔한 두께 */
	color: #888;
	line-height: 1;
	transition: color 0.2s;
}

.info-card.active .toggle-icon {
	color: #00C6AC;
	/* 기존의 어설픈 회전 효과 완전히 제거 */
}

/* --- 카드 내용 스타일 --- */
.card-content {
	padding: 15px 20px 5px 20px;
}

/* --- 유의사항 리스트 스타일 --- */
.caution-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.caution-list li {
	position: relative;
	padding-left: 18px; /* 작은 점을 위한 공간 확장 */
	margin-bottom: 12px;
	line-height: 1.6;
	font-size: 14px;
	color: #555;
}

/* 커스텀 블렛: 작은 원형 점 (강조색 사용) */
.caution-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #00C6AC;
}

/* 위험 강조 텍스트 */
.c_danger {
	color: #c0392b; /* 더욱 안정적이고 강렬한 빨간색 */
	font-weight: 700;
}


/* --- 상세 스펙 테이블 스타일 --- */
.spec-detail-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}

.spec-detail-table th,
.spec-detail-table td {
	padding: 10px 0;
	text-align: left;
	/* 점선을 더 얇고 연하게 */
	border-bottom: 1px dashed #f5f5f5;
}

.spec-detail-table th {
	width: 35%;
	font-weight: 500;
	color: #777;
	background-color: transparent;
}

.spec-detail-table td {
	width: 65%;
	font-weight: 600;
	color: #333;
}

/* 마지막 행 보더 제거 */
.spec-detail-table tr:last-child th,
.spec-detail-table tr:last-child td {
	border-bottom: none;
}

/* 핵심 강조 행 (highlight-row) */
.spec-detail-table .highlight-row th,
.spec-detail-table .highlight-row td {
	background-color: #e6fffb;
	color: #00C6AC;
	font-weight: 700;
	padding-top: 12px;
	padding-bottom: 12px;
}

/*C안 디자인*/
.product-container-550 {
	width: 100%;
	max-width: 550px;
	margin: 0 10px;
	background-color: #ffffff;
	padding: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.03); /* 아주 미세한 그림자 */
	border-radius: 8px;
}

/* --- 1. 이미지 갤러리 영역 --- */

/* 메인 이미지 뷰 */
/* 이미지 갤러리 전체 컨테이너 */
.product-gallery-area {
	width: 100%; /* 부모 요소의 크기에 따라 조정 */
	max-width: 560px; /* 메인 이미지의 최대 너비를 제한하여 작게 만듦 */
}

/* 메인 이미지 뷰 */
.main-image-view {
	/* 이미지와 썸네일 사이의 간격 */
	margin-bottom: 15px; 
}

/* 썸네일 항목 */
.thumb-item {
	width: calc(33.33% - 7px); /* 3개를 가로로 배치하고 갭을 고려하여 너비 조정 */
	height: auto;
	cursor: pointer;
	opacity: 0.7; /* 선택되지 않은 썸네일을 약간 흐리게 */
	transition: opacity 0.2s, border 0.2s;
	border: 1px solid #ddd; /* 얇은 테두리 */
}

/* 활성화된 (선택된) 썸네일 강조 */
.thumb-item.active {
	opacity: 1; /* 선명하게 */
	border: 2px solid #333; /* 굵은 테두리로 선택 강조 */
	padding: 1px; /* 테두리가 두꺼워지면서 크기가 변하는 것을 방지하기 위해 패딩 조정 */
}

.thumb-item:hover {
	opacity: 1;
	border-color: #999;
}

.thumb-item {
	flex-shrink: 0;
	height: auto;
	object-fit: contain;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
	opacity: 0.7;
	transition: opacity 0.2s, border 0.2s;
}

.thumb-item.active {
	opacity: 1;
	border: 2px solid #00C6AC;
}

/* --- 2. 유의사항 섹션 (단계별 가이드 구조) --- */
.guide-section {
	padding: 10px 0;
}

.guide-header {
	font-size: 20px;
	font-weight: 800;
	color: #00C6AC;
	margin-bottom: 25px;
	padding-bottom: 5px;
	border-bottom: 2px solid #00C6AC;
	text-align: center;
}

.guide-step {
	margin-bottom: 30px;
	border-left: 3px solid #eee; /* 수직 가이드라인 */
	padding-left: 15px;
	position: relative;
}

.step-title {
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin-bottom: 10px;
	background-color: #fcfcfc;
	padding: 5px 0;
}

.step-title::before {
	content: counter(step-counter);
	counter-increment: step-counter;
	position: absolute;
	left: -20px;
	top: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	background: #00C6AC;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 700;
}

.guide-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.guide-list li {
	line-height: 1.6;
	margin-bottom: 8px;
	padding-left: 10px;
	position: relative;
	font-size: 14px;
	color: #555;
}

.guide-list li::before {
	content: '·';
	position: absolute;
	left: 0;
	top: 0;
	color: #00C6AC;
	font-weight: 900;
}

.c_re {
	color: #e74c3c;
	font-weight: 700;
}

/* 카운터 초기화 */
.guide-section {
    counter-reset: step-counter;
}

/* --- 2. 탭 영역 스타일 --- */ 
.info-tabs-container { 	
    margin-top: 20px; 
}  

.tab-headers { 	
    display: flex; 	
    border-bottom: 2px solid #e0e0e0; 
}  

.tab-button {
    flex-grow: 1;
    text-align: center;
    padding: 14px 15px; 
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #777;
    background-color: transparent;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    /* 버튼 자체에는 보더 제거 */
}

.tab-button.active { 	
    color: #000; 	
    font-weight: 700; 	
    /* 하이라이트 라인을 버튼 바깥쪽으로 빼서 더 깔끔하게 */
} 
.tab-button.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* border-bottom 두께에 맞춰 조절 */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #00C6AC;
}

/* 탭 콘텐츠 공통 스타일 */
.tab-content {
    display: none;
    padding-top: 20px;
    animation: fadeIn 0.4s;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 주의사항 목록 스타일 --- */

.caution-header {
    font-size: 18px;
    font-weight: 700;
    color: #00C6AC;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}

.caution-body ul { 	
    list-style: none; 	
    padding-left: 0; 	
    margin: 0; 
}  

.caution-body li { 	
    line-height: 1.6; 	
    margin-bottom: 12px; 	
    padding-left: 20px; 	
    position: relative; 	
    font-size: 14px; 	
    color: #444; 
}  


.c_re { 	
    color: #e74c3c; 	
    font-weight: 700; 
}    

/* 견적서 전체 컨테이너 스타일 */
.estimate-content {
	/* 불필요한 보더 제거 및 깔끔한 경계선 추가 */
	padding: 20px;
	background-color: #ffffff; /* 흰색 배경 유지 */
	/* border: 1px solid #eee; /* 아주 얇은 경계선 (선택사항, 필요없으면 제거) */
}

/* 견적서 제목 스타일 */
.estimate-content h3 {
	font-size: 24px;
	font-weight: 700;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 5px;
	border-bottom: 3px solid #333; /* 굵은 하단 선으로 제목 강조 */
}

/* 모든 p 태그 스타일 */
.estimate-content p {
	font-size: 15px;
	line-height: 1.8;
	margin: 0 0 5px 0; /* 간격 조정 */
	padding: 3px 0;
	display: flex; /* 항목과 내용을 나란히 정렬 */
	justify-content: space-between; /* 왼쪽/오른쪽 끝으로 분리 */
}

/* 항목 제목 (Strong) 스타일 */
.estimate-content p strong {
	font-weight: 600;
	color: #555;
	width: 120px; /* 항목 너비 고정으로 깔끔하게 정렬 */
	text-align: left;
}

/* 정보 내용 (Span) 스타일 */
.estimate-content p span {
	font-weight: 400;
	color: #000;
	text-align: right;
	flex-grow: 1; /* 남은 공간 모두 사용 */
}

/* 수평선 스타일 (정보 그룹 구분) */
.estimate-content hr {
	border: none;
	border-top: 1px solid #ccc; /* 얇은 구분선 */
	margin: 15px 0;
}

/* 최종 견적 비용 강조 스타일 */
.estimate-content p:last-child {
	margin-top: 15px;
	padding-top: 10px;
	border-top: 1px solid #333; /* 최종 금액 그룹을 명확히 구분 */
}
.estimate-content p:last-child strong {
	font-size: 18px;
	color: #333;
}
.estimate-content p:last-child span {
	font-size: 24px;
	font-weight: 700;
	color: #ff6400; /* 강조 컬러 (결제금액과 동일하게) */
}

/* 컨테이너 스타일 */
.info-accordion-container {
	max-width: 560px;
}

/* 아코디언 헤더 (주의사항) */
.accordion-header {
	background-color: #f7f7f7; /* 은은한 배경색 */
	color: #333;
	padding: 10px 15px;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 500;
	font-size: 16px;
	transition: background-color 0.2s;
}

.accordion-header:hover {
	background-color: #eee;
}

/* 토글 아이콘 스타일 */
.toggle-icon {
	font-size: 12px;
	transition: transform 0.3s;
}

/* 활성화된 헤더 아이콘 */
.accordion-header.active .toggle-icon {
	transform: rotate(180deg);
}

/* 아코디언 콘텐츠 (주의사항 본문) */
.accordion-content {
	padding: 0 15px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out, padding 0.3s ease-out;
	border-bottom: 1px solid #eee; /* 본문과 버튼 사이 구분 */
}

/* 활성화된 콘텐츠 */
.accordion-content.active {
	max-height: 500px; /* 충분한 높이 (콘텐츠 길이에 따라 조절 필요) */
	padding: 5px;
}

/* 주의사항 리스트 스타일 */
.caution-body ul {
	list-style: disc;
	padding-left: 10px;
	margin: 0;
}
.caution-body li {
	margin-bottom: 15px;
	font-size: 14px;
	line-height: 1.5;
}
.caution-header {
	font-size: 16px;
	margin-bottom: 10px;
	color: #666;
}
.c_re {
	color: #ff6400; /* 강조 색상 유지 */
}

/* 액션 버튼 컨테이너 */
.action-buttons-container {
	display: flex;
	justify-content: space-between;
	padding: 10px 0 10px 0;
	background-color: #fff;
}

/* 액션 버튼 공통 스타일 */
.action-button {
    max-width: 270px;
	flex-grow: 1;
	padding: 10px 15px;
	margin: 0 5px;
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: #fff;
	color: #333;
	font-size: 15px;
	font-weight: 500;
	transition: background-color 0.2s, border-color 0.2s;
}

.action-button:hover {
	background-color: #f0f0f0;
	border-color: #999;
}

.action-button:first-child {
	margin-left: 0;
}
.action-button:last-child {
	margin-right: 0;
}
/*홈메뉴*/

.sTit_loc .loc {
    width: 12%;
}

/*
 * 숨겨진 셀렉트 박스 강제 숨김 처리
 * name="Product_1"에 의해 깨지는 디자인을 방지합니다.
 */
.hidden-select-fix {
	display: none !important; /* 가장 강력한 숨김 */
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    position: absolute !important; /* 레이아웃에서 완전히 분리 */
    left: -9999px !important;
    top: -9999px !important;
}