@charset "UTF-8";

.hero {
	background-color: #F5F6F6;
	height: 80vh;
	border-bottom-right-radius: 300px;
	background-image: url('/images/main/hero.png');
	background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
	background-position: right center; /* 이미지를 오른쪽 중앙에 배치 */
	background-size: contain; /* 이미지가 잘리지 않고 컨테이너 안에 맞게 표시 */
	display: flex; /* 내부 컨텐츠 정렬을 위해 flexbox 사용 */
	align-items: center; /* 텍스트를 수직 중앙에 배치 */
}

/* 텍스트 컨테이너에 왼쪽 여백 추가 */
.hero .container {
	max-width: 1400px;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: flex-start;
	justify-content: center;
}

.hero h1 {
	font-size: 64px;
	padding-bottom: 20px;
}

.hero .hero-info {
	font-weight: 400;
	font-size: 20px;
	color: #505050;
}

@media ( max-width :768px) {
	.hero {
		border-radius: 0;
		padding: 10px;
		background-position: bottom; /* 모바일에서도 우측 하단 */
		background-size: contain; /* 모바일에서도 이미지 비율 유지 */
		background-color: rgba(245, 246, 246, 0.6);
		background-blend-mode: lighten;
	}
	.hero h1 {
		font-size: 48px;
	}
}

/* 전체 섹션을 감싸는 스타일 */
section.features {
	background-color: #FFFFFF;
	padding: 0px;
	height: 100vh;
}

/* 3개 아이템을 가로로 정렬하는 컨테이너 */
.features .features-container {
	display: flex;
	/* 아이템들을 중앙에 배치 */
	align-items: center; /* 아이템들을 위쪽 기준으로 정렬 */
	/* 화면이 작아지면 줄바꿈 */
	/* gap: 60px; */ /* 아이템 사이의 간격 */
	width: 100%;
	/* max-width: 1400px; */
	margin: 0 auto;
	height: 100%;
/* 	padding-top: 100px; */
}

/* 각 기능 아이템 박스 */
.feature-item {
	flex: 1; /* 아이템들이 동일한 비율로 공간 차지 */
	min-width: 280px; /* 최소 너비 */
	/* max-width: 320px; */ /* 최대 너비 */
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column; /* 자식 요소들을 세로로 쌓도록 방향 설정 */
	justify-content: center; /* 주축(세로) 방향으로 중앙 정렬 */
	background-size: 70% auto, cover;
	background-repeat: no-repeat;
	background-position: right -140px bottom -230px, 0 0;
	background-size: 85% auto, cover;
	transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
	position: relative;
	overflow: hidden; /* 가상 요소가 밖으로 삐져나가지 않도록 */
}

/* 마지막 아이템을 제외하고 오른쪽에 세로 구분선 추가 */
.feature-item:not(:first-child)::after {
	content: '';
	position: absolute;
	top: 5%; /* 구분선 시작 높이 (조절 가능) */
	bottom: 5%; /* 구분선 끝 높이 (조절 가능) */
	/* gap(60px)의 절반인 30px만큼 오른쪽으로 이동시켜 아이템 사이 중앙에 배치 */
	width: 2px; /* 구분선 두께 */
	/* 세로 방향 그라디언트 적용 */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #9AC0FF,
		rgba(255, 255, 255, 0));
}

/* 아이콘을 감싸는 원형 스타일 */
.feature-icon {
	margin-bottom: 40px;
}

.feature-icon img {
	width: auto;
}

/* 파란색 타이틀 스타일 */
.feature-title {
	font-weight: 500;
	font-size: 28px;
	color: #416BB2;
	position: relative; /* 구분선을 위한 기준점 */
}

/* 기능 설명 리스트 */
.feature-description {
	margin-top: 20px; /* 구분선과의 간격 확보 */
}

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

.feature-description li {
	/* font-weight: 400; */
	/* font-size: 20px; */
	/* color: #505050; */
	
}

/* 호버 오버레이 레이어 */
.feature-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0; /* 기본은 안 보임 */
	transition: opacity 0.6s ease-in-out; /* 부드러운 페이드 효과 */
	z-index: 1;
	background-position: right -340px bottom -500px, 0 0;
	background-repeat: no-repeat;
	/* ✅ 첫 번째 이미지: 화면 폭의 40%로, 두 번째 그라디언트: 전체 채움 */
	background-size: 40vw auto, cover;
	/* ✅ 이미지 위치도 상대 단위로 */
	background-position: right -13vw bottom -35vh, 0 0;
	background-repeat: no-repeat, no-repeat;
}

/* 아이템별 배경 설정 */
.feature-item.item-video::before {
	background-image: url('/images/main/AI_bg.png'),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.2),
		rgba(67, 199, 255, 0.2));
}

.feature-item.item-ai::before {
	background-image: url('/images/main/ondevice_bg.png'),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.2),
		rgba(67, 199, 255, 0.2));
}

.feature-item.item-sql::before {
	background-image: url('/images/main/SQL_bg.png'),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.2),
		rgba(67, 199, 255, 0.2));
}

/* 호버 시 Fade-in */
.feature-item:hover::before {
	opacity: 1;
}

/* 실제 콘텐츠는 가상요소보다 위에 있도록 */
.feature-item>* {
	position: relative;
	z-index: 2;
}

/* 기본 아이콘 컨테이너 스타일 (변경 없음) */
.icon-normal {
	border: 1px solid #4383F0;
	border-radius: 50%;
	padding: 15px;
	box-shadow: 0px 0px 20px rgb(255, 255, 255);
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.icon-normal img {
	width: 100%;
	height: auto;
}

.feature-item:hover .icon-normal {
	background-color: white;
	border-color: white;
	box-shadow: 0px 0px 20px rgba(135, 180, 255, 1);
}

.feature-item:hover .icon-normal {
	border: 1px white;
	background: white;
	border-radius: 50%;
	padding: 15px;
	box-shadow: 0px 0px 20px rgba(135, 180, 255, 1);
}

@media ( max-width :768px) {
	section.features {
		height: auto;
	}
	.features-container {
		flex-direction: column;
	}

	/* 세로 구분선 제거 */
	.feature-item::after {
		display: none;
	}

	/* 모바일에서 하단 가로선 추가 (마지막 아이템 제외) */
	.feature-item:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 10%; /* 좌우 여백 조절 가능 */
		right: 10%;
		bottom: 0;
		height: 2px; /* 구분선 두께 */
		background: linear-gradient(to right, rgba(255, 255, 255, 0), #9AC0FF,
			rgba(255, 255, 255, 0));
	}

	/* 각 아이템 높이를 줄이거나 패딩 조정 가능 */
	.feature-item {
		margin-bottom: 40px; /* 아이템 사이 간격 */
		min-height: 200px; /* 필요 시 조정 */
		height: 500px;
	}

	/* 배경 이미지 위치도 모바일에 맞게 조정 */
	.feature-item::before {
		background-position: center bottom, 0 0; /* 이미지가 하단 중앙에 위치 */
		background-size: 70% auto, cover;
	}
	.feature-item {
		width: 100%;
		max-width: unset;
		padding: 80px 20px;
	}
}

/*
프로덕트
*/
.product {
	max-width: 1400px;
	margin: 0 auto;
	/* padding: 60px 20px; */
}

.product-header {
	display: flex;
	/* 좌우로 배치 */
	/* 상단 정렬 */
	margin-bottom: 30px;
	text-align: left;
	justify-content: space-between;
}

h2.title {
	font-weight: 600;
	font-size: 40px;
	color: #416BB2;
}
.product-info p{
	font-size: 18px;
}
.product-tab {
	list-style: none;
	display: flex;
	gap: 5px;
	margin-top: 15px;
	padding: 0;
	flex-direction: column;
	align-items: flex-end;
}

.product-tab li {
	cursor: pointer;
	font-weight: 500;
	color: #555;
	font-size: 18px;
}
.product-tab li:hover {
	color: #3b74cf;
}
.product-tab li.active {
	color: #2c5ca9;
	font-weight: 700;
}

.product-content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.product-item {
	position: relative;
	height: 500px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	cursor: pointer;
	width: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-item:hover {
	transform: translateY(-15px); /* 호버 시 살짝 위로 이동 */
	box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	filter: brightness(1.2);
}

.product-content a {
	text-decoration: none; /* 링크 밑줄 제거 */
	color: inherit; /* 부모 요소의 텍스트 색상 상속 */
}

/* ✅ 각 배경 이미지 */
.product-item.bg1 {
	background-image: url('/images/main/product_1.png');
}

.product-item.bg2 {
	background-image: url('/images/main/product_2.png');
}

.product-item.bg3 {
	background-image: url('/images/main/product_3.png');
}

.product-item.bg4 {
	background-image: url('/images/main/product_4.png');
}

.product-item.bg5 {
	background-image: url('/images/main/AIPlatform_1.png');
}

.product-item.bg6 {
	background-image: url('/images/main/AIPlatform_2.png');
}

.product-item.bg7 {
	background-image: url('/images/main/AIPlatform_3.png');
}

.product-item.bg8 {
	background-image: url('/images/main/AIData_1.png');
}

.product-item.bg9 {
	background-image: url('/images/main/AIData_2.png');
}

.product-item.bg10 {
	background-image: url('/images/main/AIData_3.png');
}

.product-item.bg11 {
	background-image: url('/images/main/AIData_4.png');
}

.product-text {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 30px 15px;
	background: rgba(0, 0, 0, 0.1); /* 반투명 배경 유지 */
	color: #fff;
	font-weight: 500;
	font-size: 24px;
	backdrop-filter: blur(5px); /* 블러 강도 조절 가능 */
	-webkit-backdrop-filter: blur(5px); /* Safari 지원 */
}

.product-text * {
	display: block;
	margin-top: 14px;
    color: #fff;
    font-weight: 500;
    font-size: 22px;
}

.product-text span {
	font-weight: 400;
	font-size: 16px;
}

/* 🚨 [수정] 탭을 가로로 배치합니다. */
.product-tab {
	list-style: none;
	display: flex;
	justify-content: space-between; /* 탭을 균등하게 배치 */
	padding: 0;
	width: 300px; /* 탭 영역의 너비를 적절히 조절하세요 */
	margin-top: 15px;
}

.product-tab li {
	cursor: pointer;
	font-weight: 500;
	color: #555;
	text-align: center; /* 텍스트를 중앙 정렬 */
}

.product-tab li.active {
	color: #2c5ca9;
	font-weight: 700;
}

/* ✅ [추가] 인디케이터와 라인을 감싸는 컨테이너 */
.tab-indicator-container {
	position: relative; /* 자식 요소(absolute)의 기준점 */
	width: 100%;
	height: 20px; /* 인디케이터 높이와 동일하게 설정 */
	margin-bottom: 30px; /* 콘텐츠와의 간격 */
}

/* ✅ [수정] 헤더 아래 라인 */
.tab-line {
	position: absolute;
	top: 50%; /* 컨테이너의 세로 중앙 */
	transform: translateY(-50%); /* 정확한 중앙 정렬 */
	width: 100%;
	height: 1px;
	background-color: #416BB2;
	z-index: 1;
}

/* ✅ [수정] 이동하는 원 */
.tab-indicator {
	position: absolute; /* container를 기준으로 위치 이동 */
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	background-color: #416BB2;
	border-radius: 50%;
	transition: left 0.3s ease;
	z-index: 2; /* 라인보다 위에 오도록 설정 */
}

@media ( max-width :768px) {
	.product-header {
		flex-direction: column;
	}
	.product-tab {
		width: 100%;
	}
	.product-content {
		grid-template-columns: repeat(1, 1fr); /* 1열 */
	}
	.product-item {
		height: 300px;
	}
}

/*customer*/
section.customer {
	background-image: url('/images/main/customer_bg.png');
	background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
	height: 950px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-content: center;
	background-size: cover; /* 이미지가 섹션을 가득 채우도록 설정 */
	background-position: center; /* 이미지를 중앙에 위치시킴 */
}

section.customer * {
	max-width: 1400px;
	/* margin:auto; */
	padding: 0;
}

.logo-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	padding: 20px;
	justify-items: center;
	margin: auto;
	margin-top: 100px;
}

.logo-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 70px;
	border-radius: 20px;
}

.logo-item img {
	max-width: 100%;
	height: auto;
}

.vision-statement {
	text-align: center;
}

.vision-title {
	font-weight: 600;
	font-size: 38px;
	color: #FFFFFF;
	margin-bottom: 20px
}

.vision-statement p {
	font-weight: 400;
	font-size: 20px;
	color: #FFFFFF;
	margin: 0;
}

section.news {
	background-color: #F0F9FF;
	background-image: url('/images/main/Chat.png');
	background-repeat: no-repeat; /* 이미지가 반복되지 않도록 설정 */
	background-position: right top; /* 이미지를 오른쪽 상단에 배치 */
	min-height: 60vh;
}

@media ( max-width :768px) {
	section.customer {
		height: 100%;
	}
	section.customer *:not(.logo-item, .logo-item img) {
		padding: 10px;
		word-break: keep-all;
	}
	.logo-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.logo-item {
		width: auto;
	}
}

/* ==============================================
   뉴스 섹션 (News Section)
============================================== */
section.news {
	position: relative; /* 가상 요소(배경 그래픽)의 위치 기준점 */
	background-color: #F0F9FF;
	padding: 100px 0;
	overflow: hidden; /* 섹션 밖으로 나가는 배경 그래픽을 숨김 */
}

/* 뉴스 섹션의 모든 콘텐츠는 배경 그래픽보다 위에 위치 */
.news .container {
	position: relative;
	z-index: 2;
}

.section-header {
	display: flex;
	justify-content: space-between;
	/* ✅ align-items: flex-start 대신 stretch를 사용하여 자식 요소들이 같은 높이를 갖도록 함 */
	align-items: stretch;
	margin-bottom: 40px;
	border-bottom: 1px solid #fff; /* ✅ 흰색 배경에 보이도록 색상 변경 */
	padding-bottom: 25px; /* ✅ 하단 선과 콘텐츠 사이에 여백 추가 */
}

.section-header .section-title p {
	font-size: 18px;
	color: #505050;
	line-height: 1.6;
}

.btn-more {
	font-weight: 500;
	font-size: 16px;
	line-height: 140%;
	color: #4B4B4B;
}

a.btn-more:hover {
	text-decoration: none;
	font-weight: 700;
	color: #4B4B4B;
}
/* 뉴스 슬라이더 */
.news-slider-container {
	overflow: hidden; /* 이 영역 밖으로 나가는 카드들을 숨김 */
}

.news-slider-track {
	display: flex; /* 카드들을 가로로 나열 */
	gap: 20px; /* 카드 사이의 간격 */
	transition: transform 0.5s ease-in-out; /* 부드러운 슬라이드 효과 */
}

.news-slider-track a:hover {
	text-decoration: none;
}

.slider-controls {
	display: flex;
	gap: 10px;
}

/* 뉴스 카드 스타일 */
.news-card {
	flex: 0 0 calc(25% - 15px); /* 한 줄에 4개가 보이도록 너비 계산 (gap 고려) */
	background-color: #fff;
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
	transform: translateY(-15px); /* 호버 시 살짝 위로 이동 */
}

.news-card .news-thumbnail-wrapper {
	width: 100%;
	height: 180px; /* 썸네일 영역 높이 고정 */
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-card .news-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 이미지가 영역에 꽉 차도록 설정 */
}

.news-card .news-meta {
	display: flex;
	justify-content: space-between;
	font-size: 14px ;
	color: #888;
	margin-bottom: 10px;
}

.news-card .news-meta .news-category {
	color: #416BB2;
	font-weight: 500;
}

.news-card .news-title {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	/* 여러 줄 말줄임 처리 */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 2줄까지 표시 */
	-webkit-box-orient: vertical;
	height: 54px; /* 폰트크기 * 줄간격 * 줄 수 (18 * 1.5 * 2) */
}

.slider-arrow {
	background-color: #fff;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 24px;
	color: #416BB2;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s;
	pointer-events: all; /* 버튼은 클릭되도록 */
}

.slider-arrow:hover {
	transform: scale(1.1);
}

.section-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}

@media ( max-width :768px) {
	.news-slider-track {
		flex-direction: column;
	}
}

/* CONTACT 섹션 전체 배경 및 패딩 */
section.contact {
	background-color: #F0F5FA; /* 이미지와 유사한 배경색 */
	padding: 100px 0;
}

/* ✅ 메인 레이아웃: Flexbox로 좌우 분할 */
.contact-wrapper {
	display: flex;
	gap: 30px; /* 좌우 콘텐츠 사이의 간격 */
	align-items: stretch; /* 양쪽 높이를 동일하게 맞춤 */
}

/* ✅ 왼쪽 폼 영역과 오른쪽 지도 영역이 절반씩 차지 */
.contact-form-area, .contact-map-area {
	flex: 1; /* 동일한 비율(1:1)로 너비를 나눔 */
	min-width: 0; /* flex item이 부모 너비를 넘어가지 않도록 설정 */
}

/* 제목 스타일 */
.contact-form-area .section-title {
	margin-bottom: 40px;
}

.contact-form-area .section-title .title {
	color: #416BB2;
	font-size: 38px;
	margin-bottom: 15px;
}

.contact-form-area .section-title p {
	font-size: 18px;
	color: #505050;
}

/* ✅ 폼 입력 필드를 한 줄에 2개씩 배치하기 위한 Flexbox */
.form-row {
	display: flex;
	gap: 20px; /* 입력 필드 사이의 간격 */
	margin-bottom: 20px;
}

/* 폼 그룹 스타일 */
.form-group {
	flex: 1; /* form-row 안에서 동일한 너비를 차지 */
	display: flex;
	flex-direction: column; /* 라벨과 인풋을 세로로 배치 */
}

.form-group label {
	font-weight: 500;
	font-size: 24px;
	color: #111111;
}

/* 입력 필드 및 텍스트 영역 공통 스타일 */
.form-main input[type="text"], .form-main input[type="email"],
	.form-main textarea {
	width: 100%;
	padding: 15px;
	border: 1px solid #E0E0E0;
	border-radius: 8px;
	font-size: 16px;
	box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
}

.form-main textarea {
	height: 150px; /* 문의 내용 높이 */
	resize: vertical; /* 세로로만 크기 조절 가능 */
}

/* 전송 버튼 */
.form-footer {
	margin-top: 30px;
}

.btn-contact {
	width: 100%;
	padding: 16px;
	background-color: #416BB2;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s;
}

.btn-contact:hover {
	background-color: #2c5ca9;
}

/* 지도 영역 스타일 */
.contact-map-area iframe {
	border-radius: 15px; /* 지도 모서리를 둥글게 */
	min-height: 500px; /* 최소 높이 지정 */
}

/* 반응형 웹: 화면이 작아지면 세로로 배치 */
@media ( max-width : 992px) {
	.contact-wrapper {
		flex-direction: column; /* 세로로 쌓이도록 변경 */
	}
	.form-row {
                grid-template-columns: 1fr;
                flex-direction: column;
            }
}

/* ==================================
   Solution Section Styles
================================== */
/* 아코디언 컨테이너 */
.solution-accordion {
	display: flex;
	width: 100%;
	height: 350px;
	gap: 10px;
	max-width: 1400px;
}

/* 개별 솔루션 아이템 */
.solution-item {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	cursor: pointer;
	color: white;
	/* Flexbox 설정 */
	flex-shrink: 0;
	flex-grow: 0; /* ✨ 기본적으로 아이템이 늘어나지 않도록 설정 */
	flex-basis: 150px; /* 접혔을 때의 고정 너비 */
	background-size: cover;
	background-position: center;
	transition: flex 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
	background-size: cover;
	background-position: center; /* 중앙 정렬 */
}

/* ✨ 색상 오버레이 역할을 할 가상 요소 */
.solution-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* 컨텐츠보다 아래, 배경이미지보다 위에 위치 */
	opacity: 1; /* 기본 상태(접혔을 때)에서는 불투명 */
	transition: opacity 0.6s ease; /* 부드러운 전환 효과 */
}

/* ✨ 각 아이템의 색상을 가상 요소에 적용 */
.solution-item.deepsdk::before {
	background-color: #E5C764;
}

.solution-item.safetyguard::before {
	background-color: #FF8442;
}

.solution-item.sqmldi::before {
	background-color: #4383F0;
}

/* 활성화된 아이템 스타일 */
.solution-item.active {
	flex-grow: 1;
	cursor: default;
}

/* ✨ 활성화되면 색상 오버레이(::before)를 투명하게 만듦 */
.solution-item.active::before {
	opacity: 0;
}

/* 아이템 헤더 (연도 표시) */
.item-header {
	position: relative; /* ✨ 오버레이보다 위에 표시되도록 z-index 적용 */
	z-index: 2;
	top: 50%;
	margin: auto;
	transform: translateY(-50%);
	text-orientation: mixed;
	transition: opacity 0.4s ease-in-out;
	padding: 10px;
	display: flex;
	flex-direction: column;
}

.item-header .year {
	color: #fff;
	font-weight: 700;
	font-size: 32px;
}

.item-header .text {
	color: #fff;
}

/* 활성화된 아이템의 헤더는 숨김 */
.solution-item.active .item-header {
	/* 	opacity: 0; */
	
}

/* 아이템 콘텐츠 (로고, 설명, 버튼) */
.item-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 40px 150px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
	z-index: 2; /* ✨ 오버레이보다 위에 표시되도록 z-index 적용 */
}

/* 활성화된 아이템의 콘텐츠만 보이도록 설정 */
.solution-item.active .item-content {
	opacity: 1;
	transform: translateX(0);
}

.item-content .logo {
	max-height: 45px;
	width: auto;
	align-self: flex-start;
	margin-bottom: 20px;
}

.item-content .logo-text {
	font-size: 36px;
	font-weight: 700;
	margin: 0 0 20px 0;
}

.item-content .description {
	font-weight: 400;
	font-size: 20px;
	color: #FFFFFF;
}

.btn-go {
	position: absolute;
	top: 50%;
	right: 60px;
	transform: translateY(-50%);
	background-color: white;
	padding: 12px 28px;
	border-radius: 10px;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.3s;
	font-weight: 600;
	font-size: 20px;
	color: #2F280F;
	border-width: 1px;
	border-style: solid;
}

.btn-go:hover {
	text-decoration: none;
	color: #2F280F;
}

.solution-item.deepsdk .btn-go {
	border-color: #C9AC48;
}

.solution-item.safetyguard .btn-go {
	border-color: #FF8442;
}

.solution-item.sqmldi .btn-go {
	border-color: #4383F0;
}

@media ( max-width : 1200px) {
	.btn-go {
		position: relative; 
		top: auto;
		right: auto;
		transform: none;
		width: 150px;
		text-align: center;
	}
}

/* ==================================
   Responsive Styles (for Mobile)
================================== */
@media ( max-width : 768px) {
	/* 아코디언 컨테이너를 세로 방향으로 변경 */
	.solution-accordion {
		flex-direction: column; /* 아이템을 세로로 쌓음 */
		height: auto; /* 고정 높이 제거, 내용에 따라 유연하게 조절 */
		max-width: 100%; /* 모바일에서는 화면 꽉 채움 */
	}

	/* 개별 솔루션 아이템의 높이를 애니메이션 대상으로 변경 */
	.solution-item {
		flex-basis: auto; /* 가로 너비 기준 제거 */
		width: 100%;
		height: 80px; /* 접혔을 때의 기본 높이 */
		transition: height 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
		/* 높이를 애니메이션 */
	}

	/* 활성화된 아이템은 높이를 확장 */
	.solution-item.active {
		flex-grow: 0; /* 세로에서는 grow가 필요 없음 */
		height: 400px; /* 펼쳐졌을 때의 높이 */
	}

	/* 아이템 헤더를 가로형으로 재배치 */
	.item-header {
		writing-mode: horizontal-tb; /* 텍스트 방향을 가로로 되돌림 */
		display: flex;
		flex-direction: row; /* year와 text를 가로로 배치 */
		align-items: center; /* 세로 중앙 정렬 */
		gap: 15px; /* year와 text 사이 간격 */
		left: 30px; /* 왼쪽에서 30px 띄움 */
		top: 40px; /* 상단에서 절반(40px)만큼 내림 */
		margin: 0;
		width: calc(100% - 60px);
	}
	.item-header .year {
		font-size: 28px;
	}

	/* 콘텐츠 영역 패딩 조정 */
	.item-content {
		padding: 90px 30px 30px 30px; /* 헤더(80px) 아래에 위치하도록 상단 패딩 조정 */
		justify-content: flex-start; /* 위에서부터 콘텐츠 시작 */
	}

	/* 버튼 위치를 다시 문서 흐름에 맞게 변경 */
	.btn-go {
		position: relative; /* absolute 해제 */
		top: auto;
		right: auto;
		transform: none; /* transform 해제 */
		margin-top: 30px; /* 설명과의 간격 */
		align-self: flex-start; /* 왼쪽 정렬 */
	}
}