/* ==========================================================================
   [기본 스타일] 일반 서브 페이지용 (기존 스타일 완벽 복구)
   ========================================================================== */

.bottom_link_zone {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 40px;
	/* 다른 페이지에서는 하단에 자연스럽게 40px 여백을 두고 정렬 */
}

/* div:not(main_sec_top) .bottom_link_zone .btn_estimate_contact { */
.bottom_link_zone .btn_estimate_contact {
	display: block;
	width: 250px;
	/* 기존 도면 비율 가로폭 유지 */
	padding: 20px 0;
	/* border: 2px solid var(--brand-color); */
	border: 2px solid #1e4a87;
	/* background-color: #ffffff; */
	background-color: none transparent;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	border-radius: 4px;
	transition: all 0.3s ease-in-out;
}

.btn_estimate_contact strong {
	display: block;
	font-size: 16px;
	/* color: #000000; */
	/* color: #1e4a87; */
	font-weight: 700;
	transition: color 0.3s ease-in-out;
}

/* 마우스 호버 효과 1 */
.bottom_link_zone .btn_estimate_contact:hover {
	background-color: var(--brand-color);
	border-color: var(--brand-color);
}

/* 마우스 호버 효과 2 */
.bottom_link_zone .btn_estimate_contact:hover strong {
	color: #ffffff;
}


/* ==========================================================================
   [메인 페이지 전용] 풀스크린 슬라이더 구역 내부 배치용 (부모 클래스 분기)
   ========================================================================== */

/* 
   부모 섹션이 .main_sec_top 일 때만 이 absolute 좌표계가 우선적으로 덮어씌워져 작동합니다.
   그 외의 일반 서브 페이지에서는 이 코드가 완전히 무시됩니다.
*/
.main_sec_top .bottom_link_zone {
	position: absolute;
	/* bottom: 120px; */
	/* 이미지 하단 구역에 맞게 Y축 정밀 배치 */
	bottom: 50%;
	/* left: 50%; */
	/* 1. 시작선을 가로 50% 지점에 위치시킴 */
	left: 8%;
	/* 1. 시작선을 가로 8% 지점에 위치시킴 */
	transform: translateX(-50%);
	/* 2. 요소 너비의 절반만큼 왼쪽으로 역이동시켜 정중앙 동기화 */
	width: auto;
	margin-top: 0;
	/* 기본 마진 무력화 */
	justify-content: flex-start;
	/* 좌측 정렬 */
	z-index: 20;
	/* 슬라이더 위에 안정적으로 노출 */
}

/* 메인 슬라이더 내부의 버튼 디자인 커스텀 (배경 반투명 및 그림자 부여) */
.main_sec_top .bottom_link_zone .btn_estimate_contact {
	/* background-color: rgba(255, 255, 255, 0.95); */
	background-color: none transparent;
	/* background-color: #1e4a87; */
	/* 어두운 이미지 위에서 잘 보이도록 반투명 처리 */
	/* box-shadow: 0 4px 15px rgba(11, 34, 58, 0.15); */
	box-shadow: 0 4px 15px rgba(11, 34, 58, 0.15);
	/* 배경 대비 가독성을 주는 은은한 그림자 */
	padding: 16px 0;
	/* 슬라이더 내부용 최적 패딩 */
	/* border-color: #1e4a87; */
}

/* .main_sec_top .btn_estimate_contact strong { */
/* color: #111111; */
/* color: #ffffff; */
/* } */

/* ==========================================================================
   상위 선택자(.slider_wrapper.is_ai / is_chem)를 활용한 제품 문의 버튼 스타일 분기
   ========================================================================== */

/* 1. AI Robot 슬라이드 활성화 시 (.slider_wrapper에 .is_ai가 붙었을 때) */
.main_layout_container.is_ai .bottom_link_zone .btn_estimate_contact {
	/* background-color: transparent !important; */
	/* 배경 투명 처리 */
	background-color: rgba(255, 255, 255, 0.05);
	border: 2px solid #ffffff !important;
	/* 테두리 흰색 */
}

.main_layout_container.is_ai .bottom_link_zone .btn_estimate_contact strong {
	color: #ffffff !important;
	/* 글자 흰색 */
}

/* 2. Chemical 슬라이드 활성화 시 (.slider_wrapper에 .is_chem이 붙었을 때) */
.main_layout_container.is_chem .bottom_link_zone .btn_estimate_contact {
	background-color: transparent !important;
	border: 2px solid #1e4a87 !important;
	/* 경계선 복원 */
}

.main_layout_container.is_chem .bottom_link_zone .btn_estimate_contact strong {
	color: #1e4a87 !important;
	/* 글자색 복원 */
}

/* ==========================================================================
[서브 페이지 전용] 제품 문의 및 상담 버튼 순차 등장 애니메이션
========================================================================== */

/* 기본 대기 상태: 투명 및 하향 배치 (.layout-wrapper 내부일 때만 적용) */
.layout-wrapper .bottom_link_zone {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 스크립트에 의해 .motion_start 클래스 부여 시 활성화 */
.layout-wrapper .bottom_link_zone.motion_start {
	opacity: 1;
	transform: translateY(0);
}