:root {
	/* --brand-color: #0b223a; */
	--brand-color: #1e4a87;
	/* 도면의 테두리 실선 및 브랜드 주 색상 */
	--sub-bg-color: #f4f7f9;
	/* 이미지가 없을 때 채워질 가상 배경색 */
	/* --text-muted: #666666; */
	--text-muted: #1e4a87;
	--border-light: #e2e8f0;
}

/* ==========================================================================
1. 메인 레이아웃 및 상단 메인 슬라이더 영역
========================================================================== */

/* 메인 레이아웃 컨테이너 (화면 가로 전체 및 여백 제거를 위해 100% 확장) */
.main_layout_container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	clear: both;
}

/* 슬라이더 영역 - 가로전체 가변 및 세로 해상도 최적화 고정 */
.main_layout_container .slider_wrapper {
	position: relative;
	width: 100%;
	height: calc(100vh - 80px);
	/* 브라우저 뷰포트 높이에서 헤더바 높이(80px)를 뺀 나머지 화면을 꽉 채움 */
	border: none;
	/* 도면 테두리 제거로 이미지 경계 밀착 */
	border-radius: 0;
	/* 모서리 라운딩 제거 */
	overflow: hidden;
	background-color: var(--sub-bg-color);
}

/* 개별 슬라이더 레이어 정의 (패딩을 제거하여 완전한 풀스크린 구현) */
.main_layout_container .slider_wrapper .main_slide {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
	display: flex !important;
	/* flex-direction으로 인한 텍스트 겹침 방지를 위해 block으로 전치 */
	/* flex-direction: column; */
	/* justify-content: center; */
	/* align-items: center; */
	box-sizing: border-box;
	padding: 0;
	/* 내부 테두리 여백 제거 */
}

/* 5초 자동 화면 전환 제어 시 활성화 상태 */
.main_layout_container .slider_wrapper .main_slide.active {
	opacity: 1 !important;
	visibility: visible !important;
}

/* 가상 플레이스홀더 및 이미지 구역 */
.slider_wrapper .main_slide .slide_img_placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	/* 전체 높이 100% 적용 */
	display: block !important;
	/* justify-content: center !important; */
	/* align-items: center !important; */
	margin-bottom: 0;
	overflow: hidden;
}

/* 이미지 사이즈가 적당한 여백을 갖고 들어가도록 설정 */
.slider_wrapper .main_slide .slide_img_placeholder img {
	width: 100% !important;
	/* 가로 전체 강제 밀착 */
	height: 100% !important;
	/* 세로 전체 강제 밀착 */
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	/* 여백을 남기지 않고 모니터 비율에 맞추어 최적으로 잘라 채움 */
	flex-shrink: 0 !important;
	/* 플렉스 컨테이너 안에서 이미지가 수축하거나 변형되는 것 방지 */
}

/* 이미지 위에 오버레이 겹침 배치 처리되는 텍스트 존 */
.slider_wrapper .main_slide .slide_info_text {
	position: absolute;
	top: 25%;
	left: 8%;
	width: auto;
	height: auto;
	/* text-align: center; */
	z-index: 10;
	/* 이미지 위로 글씨가 무조건 올라오도록 레이어 순위 보장 */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* 수직 시작점부터 하향배치 */
	align-items: flex-start;
	/* 왼쪽 정렬 */
	background: none;
	backdrop-filter: none;
	padding: 0;
	box-sizing: border-box;
}

/* 왼쪽 하단 배치에 맞춘 타이틀 스타일 */
.slide_info_text h2 {
	font-size: 3rem;
	/* 타이틀 크기 조정 */
	font-weight: 700;
	color: var(--brand-color) !important;
	/* 이미지 밝은 영역 대비 가독성을 확보하는 브랜드 딥블루 사용 */
	margin: 0 0 12px 0;
	letter-spacing: -1.5px;
	text-align: left;
	text-shadow: none !important;
}

/* 왼쪽 중단 배치에 맞춘 설명글 스타일 */
.slide_info_text p {
	font-size: 1.25rem;
	color: #334155 !important;
	/* color: #E6F5FF !important; */
	margin: 0;
	letter-spacing: -0.5px;
	text-align: left;
	text-shadow: none !important;
}









/* ==========================================================================
4. 사업영역(Business Area) 통합 스크롤 섹션 스타일 정의 (구 sub3.css)
========================================================================== */

/* 풀페이지 내부에서 한 화면에 두 부문이 연속해서 배치되도록 선언 */
.main_sec_business {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	box-sizing: border-box;
}

/* 1200px 규격 내부 래퍼 박스 */
.main_business_scroll_container {
	width: 1200px;
	margin: 0 auto;
}

/* 개별 사업부문 단락 블록 (한 화면 압축 배치를 위한 상하 패딩 최적화) */
.biz_section_block {
	width: 100%;
	padding: 30px 0;
	box-sizing: border-box;
}

/* 좌우 분할 매칭을 위한 1200px 테이블 레이아웃 구조 */
.biz_section_block .biz_container {
	width: 1200px;
	margin: 0 auto;
	display: table;
	table-layout: fixed;
	box-sizing: border-box;
}

/* Chemical 부문: 좌측 글 / 우측 사진 배치를 위한 테이블 역방향 제어 */
.biz_section_block .biz_container.biz_reverse {
	direction: rtl;
	/* 테이블 셀 렌더링 순서를 우측에서 좌측으로 전치 */
}

/* 이미지 공간 할당 구역 정의 (OneTouch AI 기준: 이미지 우측 간격 50px) */
.biz_container .biz_media_box {
	display: table-cell;
	width: 500px;
	/* 한 화면 구도를 위해 기존 550px에서 500px로 최적 다이어트 */
	vertical-align: middle;
	padding-right: 50px;
	box-sizing: border-box;
}

/* Chemical 부문 버그 조치: 역방향 레이아웃일 때 패딩을 완전히 좌측으로 스와프 */
.biz_container.biz_reverse .biz_media_box {
	direction: ltr;
	/* 미디어 오브젝트 내부 자식 요소 흐름은 정방향으로 복원 */
	padding-right: 0 !important;
	padding-left: 50px !important;
	/* 글자와 붙지 않도록 좌측 여백을 확실하게 고정 */
}

/* 사업영역 이미지 공통 규격 */
.biz_media_box img {
	width: 100%;
	height: 320px;
	/* 한 화면에 두 영역이 조화롭게 노출되도록 세로 정밀 컷 */
	object-fit: cover;
	border: 1px solid var(--border-light);
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 타이틀 및 사업내용 설명 텍스트 구역 (기본 왼쪽 정렬) */
.biz_container .biz_content_box {
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
	text-align: left;
}

/* Chemical 부문 버그 조치: 역방향일 때 텍스트 흐름이 뒤집히거나 우측 정렬되는 것을 방지 */
.biz_container.biz_reverse .biz_content_box {
	direction: ltr;
}

/* 서브타이틀 (BUSINESS AREA 01 / 02) */
.biz_content_box .biz_subtitle {
	display: block;
	font-size: 1.0rem;
	color: var(--text-muted);
	font-weight: 600;
	letter-spacing: 2px;
	margin-bottom: 5px;
}

/* 대타이틀 명세 */
.biz_content_box .biz_title {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--brand-color);
	margin: 0 0 10px 0;
	letter-spacing: -1px;
}

/* 타이틀 하단 데코레이션 가로 실선 */
.biz_content_box .biz_divider {
	width: 60px;
	height: 3px;
	background-color: var(--brand-color);
	border: none;
	margin: 0 0 15px 0;
}

/* 설명문 텍스트 자간 및 행간 조율 */
.biz_content_box .biz_description {
	font-size: 1.05rem;
	color: #333333;
	line-height: 1.6;
	margin: 0 0 20px 0;
}

/* 링크 이동 버튼 영역 */
.biz_content_box .biz_action_zone {
	width: 100%;
	display: block;
}

/* 자세히 보기 버튼 양식 */
.biz_action_zone .btn_biz_contact {
	display: inline-block;
	width: 160px;
	padding: 10px 0;
	/* background-color: var(--brand-color); */
	background-color: #1e4a87;
	color: #ffffff !important;
	text-align: center;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.btn_biz_contact:hover {
	/* background-color: #163557; */
	background-color: #125d9e;
	/* 호버 시 조금 더 짙은 푸른색 피드백 */
}

/* ==========================================================================
4-1. 사업영역(Business Area) 수양켐텍&엔로보틱스 스타일 나타나기 효과 정의
========================================================================== */

/* 기본 대기 상태: 모션 시작 전 투명화 및 하향 배치 격리 */
.main_sec_business .biz_media_box img {
	opacity: 0;
	transform: scale(0.96);
	/* 제자리에서 미세하게 작아진 상태로 대기 */
	transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.main_sec_business .biz_content_box .biz_subtitle,
.main_sec_business .biz_content_box .biz_title,
.main_sec_business .biz_content_box .biz_divider,
.main_sec_business .biz_content_box .biz_description,
.main_sec_business .biz_content_box .biz_action_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 클래스가 붙는 순간 각 요소의 transition-delay가 차례대로 발동합니다.
*/

/* [효과 1] 이미지 박스 등장: 서서히 밝아지며 원본 크기로 복원 */
.main_sec_business.motion_start .biz_media_box img {
	opacity: 1;
	transform: scale(1);
}

/* 1번 블록(Chemical) 이미지 딜레이 */
#biz_block_chemical .biz_media_box img {
	transition-delay: 0.1s;
}

/* 2번 블록(OneTouch AI) 이미지 딜레이 (시선의 흐름에 맞춘 순차 조율) */
#biz_block_ai .biz_media_box img {
	transition-delay: 0.3s;
}

/* [효과 2] 텍스트 레이어 순차 시차(Delay) 배정 */

/* 1번째 서브타이틀 & 타이틀 */
.main_sec_business.motion_start .biz_content_box .biz_subtitle {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.2s;
}

.main_sec_business.motion_start .biz_content_box .biz_title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.3s;
}

/* 2번째 가로 실선선 */
.main_sec_business.motion_start .biz_content_box .biz_divider {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}

/* 3번째 본문 설명문 */
.main_sec_business.motion_start .biz_content_box .biz_description {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.5s;
}

/* 4번째 자세히 보기 버튼 */
.main_sec_business.motion_start .biz_content_box .biz_action_zone {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.6s;
}


/* ==========================================================================
5. 회사 소식(Company News) 4단 그리드 레이아웃 정의 (Section 3)
========================================================================== */

.main_sec_news {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
	box-sizing: border-box;
}

/* 1200px 규격 컨테이너 및 중앙 배치 */
.main_news_container {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 대타이틀 문구 디자인 양식 상속 및 변형 */
.main_news_container .news_section_title {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--brand-color);
	text-align: center;
	line-height: 1.4;
	margin-bottom: 40px;
	letter-spacing: -1px;
}

.news_section_title span {
	display: block;
	font-size: 1.05rem;
	color: #666666;
	font-weight: 500;
	margin-top: 8px;
	letter-spacing: 0;
}

/* 초안 레이아웃 기준 일렬 4단 배열 그리드 구축 */
.main_news_container .news_grid_list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	/* gap: 20px; */
	gap: 50px;
	/* 카드 간 간격 */
	width: 100%;
}

/* 개별 카드 아이템 형태 선언 */
.news_grid_list .news_card_item {
	width: 285px;
	/* (1200px - Gap 60px) / 4단 계산 규격 */
	height: 380px;
	border: 1px solid var(--border-light);
	border-radius: 4px;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.news_card_item a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* 이미지 가로폭 전체 동기화 채움 */
.news_card_item a img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	border-bottom: 1px solid var(--border-light);
}

/* 카드 하단 글자 래핑 존 패딩 */
.news_card_item .card_text_wrap {
	padding: 20px;
	box-sizing: border-box;
}

.card_text_wrap b {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.card_text_wrap p {
	font-size: 0.95rem;
	color: #4a5568;
	line-height: 1.6;
	margin: 0;
	/* 3줄 초과 시 말줄임 처리 방어 코드 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 구 웹사이트 컬러 매칭 속성 상속 정의 */
.news_grid_list .blue_type {
	background-color: #f4f7f9;
	/* 은은한 청색 배경 */
}

.blue_type .card_text_wrap b {
	color: var(--brand-color);
}

.news_grid_list .white_type {
	background-color: #ffffff;
	/* 순백색 배경 */
}

.white_type .card_text_wrap b {
	color: #111111;
}

/* ==========================================================================
   회사소개 카드 확장 및 텍스트/이미지 통합 모션 애니메이션
   ========================================================================== */

/* 확장 가능한 카드 기본 틀 (평소 285px 규격) */
.news_grid_list .news_card_item.news_card_expandable {
	width: 285px;
	height: 380px;
	position: relative;
	overflow: hidden;
	z-index: 5;
	background-color: #ffffff;
	transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

/* 마우스 호버 시 카드 전체 너비가 590px로 확장 */
.news_grid_list .news_card_item.news_card_expandable:hover {
	width: 590px;
	z-index: 10;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 좌측 메인 클릭 링크 및 배치 축 */
.news_card_expandable .card_expand_link_bg {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
}

/* 카드 전체를 덮는 배경 사진 감싸개 */
.news_card_expandable .expand_img_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 180px;
	/* 평소에는 상단 180px만 사진으로 노출 */
	overflow: hidden;
	transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.news_card_expandable .expand_img_wrapper img {
	width: 100%;
	height: 380px;
	/* 원본 이미지 세로 영역 보존 */
	object-fit: cover;
	display: block;
}

/* 최신글 가독성을 위한 반투명 우측 오버레이 레이어 */
.news_card_expandable .expand_img_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.95) 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* 마우스 호버 시 사진 영역이 카드 전체 높이(380px) 및 우측 오버레이로 완전 확장 */
.news_card_expandable:hover .expand_img_wrapper {
	height: 380px;
}

.news_card_expandable:hover .expand_img_overlay {
	opacity: 1;
}

/* [핵심] 좌측 텍스트 워딩: 평소 하단 위치 -> 마우스 호버 시 좌측 중앙 높이로 이동 */
.news_card_expandable .card_text_wrap {
	position: absolute;
	top: 180px;
	/* 평소 시작 위치 */
	left: 0;
	width: 285px;
	padding: 20px;
	box-sizing: border-box;
	z-index: 3;
	transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 호버 시 좌측 영역(285px)의 정확한 수직 중앙 위치(-50%)로 이동 */
.news_card_expandable:hover .card_text_wrap {
	top: 50%;
	transform: translateY(-50%);
}

/* 우측 최신글 패널 (사진 배경 위 투명/반투명 정렬) */
.news_card_expandable .card_expanded_zone {
	position: absolute;
	top: 0;
	right: 0;
	width: 305px;
	height: 100%;
	z-index: 4;
	padding: 20px 22px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.3s ease 0.15s;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.news_card_expandable:hover .card_expanded_zone {
	opacity: 1;
}

/* 우측 상단 +더보기 버튼 */
.card_expanded_zone .expanded_header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.15);
	padding-bottom: 8px;
}

.card_expanded_zone .btn_more_news {
	font-size: 0.82rem;
	color: #334155;
	text-decoration: none;
	font-weight: 700;
	transition: color 0.2s ease;
}

.card_expanded_zone .btn_more_news:hover {
	color: var(--brand-color);
}

/* 최신글 3개 리스트 */
.card_expanded_zone .latest_news_ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.latest_news_ul li {
	border-bottom: 1px dashed rgba(15, 23, 42, 0.15);
}

.latest_news_ul li:last-child {
	border-bottom: none;
}

.latest_news_ul li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	text-decoration: none;
}

.latest_news_ul li a .subject {
	font-size: 0.9rem;
	color: #0f172a;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

.latest_news_ul li a .date {
	font-size: 0.78rem;
	color: #64748b;
}

.latest_news_ul li a:hover .subject {
	color: var(--brand-color);
	font-weight: 800;
}

.latest_news_ul li.empty_news {
	padding: 30px 0;
	text-align: center;
	font-size: 0.88rem;
	color: #64748b;
}

/* ==========================================================================
   회사소개 카드 확장 및 텍스트/이미지 통합 모션 애니메이션 (속도 조율 & 폰트 컬러 동기화)
   ========================================================================== */

/* 확장 가능한 카드 기본 틀 (평소 285px 규격) */
.news_grid_list .news_card_item.news_card_expandable {
	width: 285px;
	height: 380px;
	position: relative;
	overflow: hidden;
	z-index: 5;
	background-color: #ffffff;
	/* 애니메이션 속도를 0.4s -> 0.7s로 여유 있게 완화 */
	transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}

/* 마우스 호버 시 카드 전체 너비가 590px로 확장 */
.news_grid_list .news_card_item.news_card_expandable:hover {
	width: 590px;
	z-index: 10;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 좌측 메인 클릭 링크 및 배치 축 */
.news_card_expandable .card_expand_link_bg {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	position: relative;
}

/* 카드 전체를 덮는 배경 사진 감싸개 */
.news_card_expandable .expand_img_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 180px;
	/* 평소 상단 180px 노출 */
	overflow: hidden;
	transition: height 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.news_card_expandable .expand_img_wrapper img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	display: block;
}

/* 최신글 가독성을 위한 우측 은은한 백그라운드 오버레이 */
.news_card_expandable .expand_img_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.88) 48%, rgba(255, 255, 255, 0.96) 100%);
	opacity: 0;
	transition: opacity 0.6s ease;
}

.news_card_expandable:hover .expand_img_wrapper {
	height: 380px;
}

.news_card_expandable:hover .expand_img_overlay {
	opacity: 1;
}

/* 좌측 텍스트 워딩: 호버 시 좌측 중앙 높이로 이동 (속도 0.7s로 전환 및 폰트색 통일) */
.news_card_expandable .card_text_wrap {
	position: absolute;
	top: 180px;
	/* 평소 하단 시작 지점 */
	left: 0;
	width: 285px;
	padding: 20px;
	box-sizing: border-box;
	z-index: 3;
	transition: top 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 다른 카드와 100% 동일한 폰트 색상 매칭 */
.news_card_expandable .card_text_wrap b {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	/* color: #111111; */
	/* 기존 white_type b 폰트색 고정 */
	margin-bottom: 12px;
}

.news_card_expandable .card_text_wrap p {
	font-size: 0.95rem;
	/* color: #4a5568; */
	/* 기존 카드 p 본문색 고정 */
	line-height: 1.6;
	margin: 0;
}

/* 호버 시 좌측 285px 구역의 수직 중앙 배치 */
.news_card_expandable:hover .card_text_wrap {
	top: 50%;
	transform: translateY(-50%);
}

/* 우측 최신글 패널 */
.news_card_expandable .card_expanded_zone {
	position: absolute;
	top: 0;
	right: 0;
	width: 305px;
	height: 100%;
	z-index: 4;
	padding: 20px 22px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.5s ease 0.2s;
	/* 확장 후 자연스럽게 노출 */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.news_card_expandable:hover .card_expanded_zone {
	opacity: 1;
}

/* 우측 상단 +더보기 버튼 (페이지 세컨더리 텍스트 색상 통일) */
.card_expanded_zone .expanded_header {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--border-light);
	padding-bottom: 8px;
}

.card_expanded_zone .btn_more_news {
	font-size: 0.85rem;
	/* color: #666666; */
	/* 페이지 공통 서브 텍스트 메인컬러 */
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.card_expanded_zone .btn_more_news:hover {
	color: var(--brand-color);
}

/* 최신글 3개 리스트 */
.card_expanded_zone .latest_news_ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.latest_news_ul li {
	border-bottom: 1px dashed var(--border-light);
}

.latest_news_ul li:last-child {
	border-bottom: none;
}

.latest_news_ul li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	text-decoration: none;
}

/* 제목 폰트 컬러: 페이지 공통 본문색(#334155) 적용 */
.latest_news_ul li a .subject {
	font-size: 0.92rem;
	/* color: #334155; */
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
}

/* 날짜 폰트 컬러: 서브 가이드색(#64748b) 적용 */
.latest_news_ul li a .date {
	font-size: 0.8rem;
	/* color: #64748b; */
}

/* 최신글 호버 시 브랜드 딥블루(--brand-color) 강조 */
.latest_news_ul li a:hover .subject {
	color: var(--brand-color);
	font-weight: 700;
}

.latest_news_ul li.empty_news {
	padding: 30px 0;
	text-align: center;
	font-size: 0.88rem;
	/* color: #64748b; */
}


/* ==========================================================================
1-2. 엘에스케이 아이로봇(LSK AIROBOT) 메인 슬라이더 모션 효과 적용
========================================================================== */

/* 1. 배경 이미지 슬로우 줌인 애니메이션 정의 */
@keyframes kensBurnsZoom {
	0% {
		transform: scale(1) rotate(0.01deg);
	}

	100% {
		transform: scale(1.06) rotate(0.01deg);
		/* 눈이 편안한 6% 미세 확대 마스크 줌 */
	}
}

/* 2. 텍스트 요소 슬라이드 업 페이드인 애니메이션 정의 */
@keyframes motionFadeInUp {
	0% {
		opacity: 0;
		transform: translateY(25px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 기본 상태에서는 애니메이션 대기 처리 (오동작 방지) */
.slider_wrapper .main_slide .slide_img_placeholder img {
	transition: transform 0.5s ease-out;
}

.slider_wrapper .main_slide .slide_info_text h2,
.slider_wrapper .main_slide .slide_info_text p {
	opacity: 0;
	/* 첫 로드 및 전환 대기 시 투명 처리 */
}

/* 
   JS에 의해 .motion_start 클래스가 붙는 순간 애니메이션이 실행됩니다.
*/

/* [효과 1] 활성화 시 배경 이미지 줌인 지속 실행 */
.slider_wrapper .main_slide.motion_start .slide_img_placeholder img {
	animation: kensBurnsZoom 5.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* [효과 2] 활성화 시 타이틀(H2) 부드러운 시간차 등장 (딜레이 0.2초) */
.slider_wrapper .main_slide.motion_start .slide_info_text h2 {
	animation: motionFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: 0.2s;
}

/* [효과 3] 활성화 시 설명문(P) 부드러운 시간차 등장 (딜레이 0.4초) */
.slider_wrapper .main_slide.motion_start .slide_info_text p {
	animation: motionFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: 0.4s;
}

/* [효과 4] 메인 슬라이더 전용 문의 버튼 등장 제어 (딜레이 0.6초) */
.main_sec_top .main_slide.motion_start~.bottom_link_zone {
	opacity: 0;
	animation: motionFadeInUp 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: 0.6s;
}

/* ==========================================================================
   투자정보 카드 마우스 호버 시 살짝 위로 올라가는 애니메이션 (.news_card_lift)
   ========================================================================== */

.news_grid_list .news_card_item.news_card_lift {
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

/* 마우스 올렸을 때 위로 6px 이동 및 은은한 그림자 피드백 */
.news_grid_list .news_card_item.news_card_lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}