@charset "UTF-8";
/* SI 사업 페이지 (Figma 유니와이드_부분개편 2026 > SI > SI-2) */

/* 공통 서브 비주얼·탭 메뉴 대신 페이지 자체 Hero 사용 */
.header-wrap .sub-header,
.header-wrap .sub-header-menu {
	display: none;
}
.header-wrap {
	background: transparent;
}
.sub-wrap {
	padding: 0;
}

.si-page {
	color: #212529;
	font-family: "Noto Sans KR", sans-serif;
	word-break: keep-all;
}
.si-page h2,
.si-page h3,
.si-page p,
.si-page ul,
.si-page ol {
	margin: 0;
	padding: 0;
}
.si-page ul,
.si-page ol {
	list-style: none;
}
.si-page img {
	max-width: 100%;
	vertical-align: top;
}
.si-page .si-wrap {
	max-width: 1336px;
	margin: 0 auto;
	padding: 0 20px;
}
.si-page .si-br-pc {
	display: inline;
}

/* 섹션 공통 타이틀 */
.si-page .si-kicker {
	color: #228de0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 2.08px;
}
.si-page .si-title {
	margin-top: 14px;
	color: #212529;
	font-size: 56px;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -1.26px;
}
.si-page .si-title .text-point {
	color: #0d6efd;
}
.si-page .si-title-sm {
	font-size: 48px;
}
.si-page .si-lead {
	margin-top: 18px;
	color: #617188;
	font-size: 24px;
	line-height: 1.5;
}

/* Hero */
.si-page .si-hero {
	position: relative;
	min-height: 980px;
	padding: 210px 0 120px;
	background-color: #dcebff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.si-page .si-hero::before,
.si-page .si-hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
}
.si-page .si-hero::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 212px;
	background: linear-gradient(180deg, rgba(0, 90, 208, 0.6) 0%, rgba(0, 90, 208, 0) 100%);
}
.si-page .si-hero::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(450px 230px at 33.4% 69.8%, #fff 2%, rgba(255, 255, 255, 0) 100%);
}
.si-page .si-hero .si-wrap {
	position: relative;
	z-index: 1;
}
.si-page .si-hero-eyebrow {
	color: #0d6efd;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 2.52px;
}
.si-page .si-hero-title {
	margin-top: 22px;
	color: #212529;
	font-size: 72px;
	font-weight: 700;
	line-height: 96px;
	letter-spacing: -1px;
}
.si-page .si-hero-title span {
	color: #0d6efd;
	font-size: 90px;
}
.si-page .si-hero-desc {
	margin-top: 24px;
	color: #495057;
	font-size: 24px;
	line-height: 1.4;
}
.si-page .si-hero-items {
	display: flex;
	margin-top: 40px;
}
.si-page .si-hero-items li {
	width: 220px;
}
.si-page .si-hero-items li + li {
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px solid #dee2e6;
	width: 241px;
}
.si-page .si-hero-items img {
	width: 44px;
	height: 44px;
}
.si-page .si-hero-items strong {
	display: block;
	margin-top: 18px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.48px;
}
.si-page .si-hero-items p {
	margin-top: 6px;
	color: #495057;
	font-size: 18px;
	line-height: 1.4;
}

/* SI 사업영역 */
.si-page .si-areas {
	padding: 120px 0;
	background: #fff;
}
.si-page .si-area-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 52px;
}
.si-page .si-area-cards li {
	min-height: 210px;
	padding: 29px 29px 30px;
	border: 1px solid #e3eaf2;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 35px rgba(24, 47, 75, 0.06);
	transition: all 0.2s ease-in;
}
.si-page .si-area-cards li:hover {
	border-color: #0d6efd;
	transform: translateY(-4px);
}
.si-page .si-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 69px;
	height: 69px;
	border-radius: 20px;
	background: #ecf4fe;
}
.si-page .si-card-icon img {
	width: 40px;
	height: 40px;
}
.si-page .si-area-cards strong {
	display: block;
	margin-top: 26px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}
.si-page .si-area-cards p {
	margin-top: 6px;
	color: #617188;
	font-size: 18px;
	line-height: 1.5;
}

/* 주요 프로젝트 레퍼런스 */
.si-page .si-refs {
	padding: 100px 0;
	background: #f1f6ff;
}
.si-page .si-ref-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 35px;
	margin-top: 64px;
}
.si-page .si-ref-list li {
	position: relative;
	min-height: 276px;
	overflow: hidden;
	border: 1px solid #e3eaf2;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 35px rgba(24, 47, 75, 0.06);
}
.si-page .si-ref-img {
	height: 150px;
	overflow: hidden;
}
.si-page .si-ref-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.si-page .si-ref-list li:hover .si-ref-img img {
	transform: scale(1.05);
}
.si-page .si-ref-cate {
	position: absolute;
	top: 125px;
	left: 15px;
	padding: 0 30px;
	border-radius: 25px;
	background: #fff;
	color: #0d6efd;
	font-size: 18px;
	font-weight: 700;
	line-height: 50px;
}
.si-page .si-ref-list p {
	padding: 42px 28px 28px;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: -0.48px;
}

/* 연도별 매출 */
.si-page .si-growth {
	padding: 110px 0;
	background: #fff;
}
.si-page .si-growth-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}
.si-page .si-growth-text .si-title {
	margin-top: 0;
	letter-spacing: 0;
	line-height: 58px;
}
.si-page .si-growth-desc {
	margin-top: 28px;
	color: #617188;
	font-size: 24px;
	line-height: 1.45;
	letter-spacing: -0.47px;
}
.si-page .si-chart {
	flex: 0 0 724px;
	max-width: 724px;
}
.si-page .si-chart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-left: 0;
}
.si-page .si-chart-head strong {
	font-size: 26px;
	font-weight: 700;
}
.si-page .si-chart-head span {
	color: #617188;
	font-size: 18px;
}
.si-page .si-line-chart {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 16px;
	overflow: visible;
}
.si-page .si-chart-grid line {
	stroke: rgba(0, 0, 0, 0.082);
	stroke-width: 1.15;
}
.si-page .si-chart-axis text {
	fill: #617188;
	font-size: 15px;
}
.si-page .si-chart-dot circle {
	fill: #fff;
	stroke: #228de0;
	stroke-width: 5;
}
.si-page .si-chart-value text {
	fill: #212529;
	font-size: 20px;
	font-weight: 700;
}
.si-page .si-chart-rate rect {
	fill: rgba(255, 255, 255, 0.5);
}
.si-page .si-chart-rate text {
	fill: #0029af;
	font-size: 18px;
	font-weight: 700;
}
.si-page .si-chart-year text {
	fill: #495057;
	font-size: 18px;
}

/* 포트폴리오 통계 */
.si-page .si-stats {
	padding: 110px 0;
	background: #f3f8fe;
}
.si-page .si-stats-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.si-page .si-stat-panel {
	padding-right: 50px;
}
.si-page .si-stat-panel + .si-stat-panel {
	padding-right: 0;
	padding-left: 40px;
	border-left: 1px solid #c1d0e0;
}
.si-page .si-stat-title {
	color: #0b1220;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -1.5px;
}
.si-page .si-stat-desc {
	max-width: 560px;
	margin-top: 22px;
	color: #687582;
	font-size: 18px;
	line-height: 1.5;
}
.si-page .si-stat-view {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-top: 46px;
}
.si-page .si-donut {
	position: relative;
	flex: 0 0 225px;
	width: 225px;
	height: 225px;
}
.si-page .si-donut svg {
	display: block;
	width: 100%;
	height: 100%;
}
.si-page .si-donut circle {
	fill: none;
	stroke-width: 25;
}
.si-page .si-donut strong {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #2865c9;
	font-size: 28px;
	font-weight: 900;
	white-space: nowrap;
}
.si-page .si-legend {
	flex: 0 1 300px;
}
.si-page .si-legend li {
	display: flex;
	align-items: center;
	line-height: 1.6;
}
.si-page .si-legend li + li {
	margin-top: 10px;
}
.si-page .si-legend i {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	margin-right: 16px;
	border-radius: 50%;
}
.si-page .si-legend span {
	flex: 1;
	font-size: 23px;
}
.si-page .si-legend strong {
	font-size: 20px;
	font-weight: 700;
}
.si-page .si-legend .text-strong {
	color: #0029af;
}

/* SI 사업 수행 프로세스 */
.si-page .si-process {
	padding: 100px 0;
	background: #fff;
}
.si-page .si-process .si-lead {
	color: #687582;
}
.si-page .si-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-top: 56px;
	text-align: center;
}
.si-page .si-steps li {
	position: relative;
}
.si-page .si-steps li + li::before {
	content: "\279C";
	position: absolute;
	top: 86px;
	left: 0;
	color: #228de0;
	font-size: 25px;
	line-height: 1;
	transform: translateX(-50%);
}
.si-page .si-step {
	display: inline-block;
	color: #0029af;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}
.si-page .si-step::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin: 4px auto 0;
	background: #0029af;
}
.si-page .si-step-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	margin: 12px auto 0;
	border-radius: 50%;
	background: #eaf2ff;
	box-shadow: 0 6px 17px rgba(43, 109, 189, 0.043), inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.si-page .si-step-ring img {
	width: 50px;
	height: 50px;
}
.si-page .si-steps strong {
	display: block;
	margin-top: 22px;
	color: #173654;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.3px;
}
.si-page .si-steps p {
	margin-top: 8px;
	color: #53677b;
	font-size: 16px;
	line-height: 1.5;
}

/* Responsive */
@media (max-width: 1400px) {
	.si-page .si-chart {
		flex-basis: 620px;
		max-width: 620px;
	}
}
@media (max-width: 1200px) {
	.si-page .si-hero {
		min-height: 860px;
		padding-top: 180px;
	}
	.si-page .si-hero-title {
		font-size: 60px;
		line-height: 80px;
	}
	.si-page .si-hero-title span {
		font-size: 74px;
	}
	.si-page .si-area-cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.si-page .si-ref-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.si-page .si-growth-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
	}
	.si-page .si-chart {
		flex: none;
		max-width: none;
	}
	.si-page .si-stats-inner {
		grid-template-columns: 1fr;
		gap: 64px;
	}
	.si-page .si-stat-panel,
	.si-page .si-stat-panel + .si-stat-panel {
		padding: 0;
		border: 0;
	}
	.si-page .si-stat-panel + .si-stat-panel {
		padding-top: 64px;
		border-top: 1px solid #c1d0e0;
	}
}
@media (max-width: 992px) {
	.si-page .si-title {
		font-size: 44px;
	}
	.si-page .si-title-sm,
	.si-page .si-stat-title {
		font-size: 38px;
	}
	.si-page .si-lead,
	.si-page .si-growth-desc {
		font-size: 20px;
	}
	.si-page .si-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px 0;
	}
	.si-page .si-steps li:nth-child(4)::before {
		display: none;
	}
}
@media (max-width: 768px) {
	.si-page .si-br-pc {
		display: none;
	}
	.si-page .si-hero {
		min-height: 0;
		padding: 150px 0 80px;
	}
	.si-page .si-hero-eyebrow {
		font-size: 15px;
		letter-spacing: 1.5px;
	}
	.si-page .si-hero-title {
		margin-top: 14px;
		font-size: 30px;
		line-height: 1.3;
	}
	.si-page .si-hero-title span {
		font-size: 40px;
	}
	.si-page .si-hero-desc {
		margin-top: 18px;
		font-size: 17px;
		line-height: 1.6;
	}
	.si-page .si-hero-items {
		flex-direction: column;
		gap: 14px;
		margin-top: 32px;
	}
	.si-page .si-hero-items li,
	.si-page .si-hero-items li + li {
		display: grid;
		grid-template-columns: 44px 1fr;
		column-gap: 16px;
		width: auto;
		margin: 0;
		padding: 14px 16px;
		border: 0;
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.72);
	}
	.si-page .si-hero-items img {
		grid-row: span 2;
		align-self: center;
		width: 36px;
		height: 36px;
	}
	.si-page .si-hero-items strong {
		margin-top: 0;
		font-size: 18px;
	}
	.si-page .si-hero-items p {
		margin-top: 2px;
		font-size: 15px;
	}
	.si-page .si-hero-items p br {
		display: none;
	}
	.si-page .si-kicker {
		font-size: 15px;
	}
	.si-page .si-title,
	.si-page .si-title-sm,
	.si-page .si-stat-title {
		font-size: 30px;
		letter-spacing: -0.8px;
	}
	.si-page .si-growth-text .si-title {
		line-height: 1.3;
	}
	.si-page .si-lead,
	.si-page .si-growth-desc,
	.si-page .si-stat-desc {
		margin-top: 14px;
		font-size: 16px;
	}
	.si-page .si-areas,
	.si-page .si-refs,
	.si-page .si-growth,
	.si-page .si-stats,
	.si-page .si-process {
		padding: 72px 0;
	}
	.si-page .si-area-cards {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 32px;
	}
	.si-page .si-area-cards li {
		display: grid;
		grid-template-columns: 56px 1fr;
		column-gap: 18px;
		min-height: 0;
		padding: 20px;
	}
	.si-page .si-card-icon {
		grid-row: span 2;
		align-self: center;
		width: 56px;
		height: 56px;
		border-radius: 16px;
	}
	.si-page .si-card-icon img {
		width: 32px;
		height: 32px;
	}
	.si-page .si-area-cards strong {
		margin-top: 0;
		font-size: 19px;
	}
	.si-page .si-area-cards p {
		margin-top: 2px;
		font-size: 15px;
	}
	.si-page .si-ref-list {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 32px;
	}
	.si-page .si-ref-list li {
		min-height: 0;
	}
	.si-page .si-ref-img {
		height: 180px;
	}
	.si-page .si-ref-cate {
		top: 158px;
		left: 14px;
		padding: 0 18px;
		font-size: 14px;
		line-height: 40px;
	}
	.si-page .si-ref-list p {
		padding: 36px 20px 22px;
		font-size: 18px;
	}
	.si-page .si-chart-head strong {
		font-size: 19px;
	}
	.si-page .si-chart-head span {
		font-size: 14px;
	}
	.si-page .si-line-chart {
		margin-top: 8px;
	}
	.si-page .si-chart-axis text,
	.si-page .si-chart-year text {
		font-size: 20px;
	}
	.si-page .si-chart-value text,
	.si-page .si-chart-rate text {
		font-size: 24px;
	}
	.si-page .si-stats-inner {
		gap: 48px;
	}
	.si-page .si-stat-panel + .si-stat-panel {
		padding-top: 48px;
	}
	.si-page .si-stat-view {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
		margin-top: 32px;
	}
	.si-page .si-donut {
		flex: none;
		width: 200px;
		height: 200px;
		margin: 0 auto;
	}
	.si-page .si-donut strong {
		font-size: 24px;
	}
	.si-page .si-legend {
		flex: none;
		padding: 18px 20px;
		border-radius: 14px;
		background: #fff;
	}
	.si-page .si-legend span {
		font-size: 17px;
	}
	.si-page .si-legend strong {
		font-size: 17px;
	}
	.si-page .si-steps {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 36px;
		text-align: left;
	}
	.si-page .si-steps li {
		display: grid;
		grid-template-columns: 80px 1fr;
		column-gap: 20px;
		align-items: center;
		padding: 18px 0;
	}
	.si-page .si-steps li + li {
		border-top: 1px solid #e3eaf2;
	}
	.si-page .si-steps li + li::before,
	.si-page .si-steps li:nth-child(4)::before {
		display: none;
	}
	.si-page .si-step-ring {
		grid-row: 1 / span 3;
		width: 80px;
		height: 80px;
		margin: 0;
	}
	.si-page .si-step-ring img {
		width: 36px;
		height: 36px;
	}
	.si-page .si-step {
		grid-column: 2;
		grid-row: 1;
	}
	.si-page .si-step::after {
		display: none;
	}
	.si-page .si-steps strong {
		grid-column: 2;
		margin-top: 2px;
		font-size: 19px;
	}
	.si-page .si-steps p {
		grid-column: 2;
		margin-top: 2px;
		font-size: 15px;
	}
	.si-page .si-steps p br {
		display: none;
	}
}
@media (max-width: 480px) {
	.si-page .si-hero-title {
		font-size: 26px;
	}
	.si-page .si-hero-title span {
		font-size: 34px;
	}
	.si-page .si-title,
	.si-page .si-title-sm,
	.si-page .si-stat-title {
		font-size: 26px;
	}
}