@charset "utf-8";
@import url('/resource/css/reset.css');
@import url('/resource/css/modal.css');
@import url('/resource/css/common.css');

/* 
 * 포미트 : POMIT
 * 파일명 : sub.css
 * 작성자 : 김윤지
 * 작성일 : 2026.01.228
 * 사용처 : 서브 페이지 스타일
 */

/* .sub-header {
	width: 100%;
	background-color: #88888833;
	display: none;
} */


.sub-header {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: none;
	display: none;
}

.sub-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: translateX(-3%) scale(1.1);
	transition: transform 1.5s ease-out;
	will-change: transform;
	z-index: 0;
}

.sub-header.is-loaded::before {
	transform: scale(1);
}

.sub-header.technology::before {
	background-image: url(/resource/images/technology/header-visual.png);
}

.sub-header.products::before {
	background-image: url(/resource/images/products/header-visual.png);
}

.sub-header.reference::before {
	background-image: url(/resource/images/reference/header-visual.png);
}

.sub-header.company::before {
	background-image: url(/resource/images/company/header-visual.png);
}

.sub-header.contactus::before {
	background-image: url(/resource/images/contactus/header-visual.png);
}

@media(min-width: 992px) {
	.sub-header {
		height: 360px;
		display: flex;
		flex-direction: column;
	}

	.sub-header .container {
		flex: 1;
		padding: 64px 0 120px;
	}
}

@media(min-width: 1400px) {
	.sub-header {
		height: 416px;
	}

	.sub-header .container {
		padding: 100px 0 120px;
	}
}

.breadcrumb {
	margin-top: 64px;

	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.breadcrumb li {
	color: var(--white);
	padding-right: 24px;
	background: url(/resource/images/icon/keyboard_arrow_right-white.svg) no-repeat right center;
	background-size: auto;
}

.breadcrumb li:last-child {
	background: none;
	padding-right: 0;
}

.heading {
	margin-top: 20px;

	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 24px;

	color: var(--white);
}

.heading strong {
	font-family: var(--en), sans-serif;
	font-size: 56px;
	font-weight: 800;
}

.heading span {
	font-family: var(--kr), sans-serif;
	font-size: 24px;
	font-weight: 700;
}

@media(min-width: 1400px) {
	.heading strong {
		font-size: 68px;
	}

	.heading span {
		font-size: 36px;
	}
}

/* sub-navigation */
.sub-nav {
	width: 100%;

	background-color: var(--white);
	border-bottom: 1px solid var(--gray-200);

	position: sticky;
	top: 64px;
	z-index: 3;

	display: flex;
	flex-direction: column;
	height: 48px;

	padding-top: 2px;
}

.sub-nav::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 2px;
	display: block;

	background-image: linear-gradient(to right,
			#1254D8 0%,
			#01C1C8 50%,
			#BFDC00 75%,
			#0A3463 100%);
}

.sub-nav .container {
	flex: 1;

	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	padding: 0;

	-webkit-overflow-scrolling: touch;
}

.sub-nav .container::-webkit-scrollbar {
	display: none;
}

.sub-navigation {
	flex: 1;
	width: fit-content;
	height: 100%;
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1px;
	background-color: var(--gray-200);
}

.sub-navigation li {
	flex: 1 0 64vw;

	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background-color: var(--white);
}

.sub-navigation li a {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
}

.sub-navigation li:has(.is-active) {
	background-color: var(--gray-050);
	border-bottom: 2px solid var(--gray-800);

	color: var(--gray-800);
	font-weight: 700;
}

@media(min-width: 576px) {
	.sub-navigation li {
		flex: 1 0 32vw;
	}
}

@media(min-width: 992px) {
	.sub-nav {
		margin-top: 0;
		padding-top: 4px;
		height: 64px;
	}

	.sub-nav::before {
		height: 4px;
	}

	.sub-navigation {
		padding: 0 1px;
	}

	.sub-navigation li {
		flex: 1 0 25vw;
	}

	.sub-navigation li:hover,
	.sub-navigation li:has(.is-active) {
		border-bottom: 4px solid var(--gray-800);
	}
}

@media(min-width: 1200px) {
	.sub-navigation {
		width: 100%;
		justify-content: center;
	}

	.sub-navigation li {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media(min-width: 1400px) {
	.sub-nav {
		top: 100px;
	}
}

/* 공통 - 콘텐츠 하단 여백 */
.container:has(.page-title) {
	padding-top: 64px;
	padding-bottom: 40px;
	width: 100vw;
	overflow: visible;
}

@media(min-width: 992px) {
	.container:has(.page-title) {
		padding-top: 0;
	}
}

/* subpage title */
.page-title {
	font-size: 32px;
	padding: 48px 0;
	text-align: center;
}

@media(min-width: 992px) {
	.page-title {
		padding: 48px 0;
	}
}

@media(min-width: 1200px) {
	.page-title {
		font-size: 48px;
		padding: 64px 0;
	}
}

@media(min-width: 1400px) {
	.page-title {
		padding: 80px 0;
	}
}

/* responsive-box */
.responsive-box {
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
}

.responsive-box .img-fluid {
	min-width: 640px;
}

/* 본문섹션 공통 */
.section {
	--header-width: 100%;

	display: flex;
	flex-wrap: wrap;
	gap: 24px;

	line-height: 1.4;
	margin-bottom: 24px;
}

.section-header {
	flex: 1 0 var(--header-width);
	max-width: var(--header-width);

	display: flex;
	flex-direction: column;
	gap: 0;
}

.section-body {
	flex: 1;

	display: flex;
	flex-direction: column;
	gap: 24px;
}

.section-header.full,
.section-body.full {
	flex: 1 0 100%;
	max-width: 100%;
}

.section-body.full {
	row-gap: 8px;
}

.section-body.full:has(>.responsive-box:first-child) {
	row-gap: 8px;
}

.section-body-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.section-title.has-img {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.section-title.has-img>.title {
	flex: 1 0 100%;
}

@media(min-width: 576px) {
	.section-title.has-img>.title {
		flex: 0 0 auto;
	}
}

/* 텍스트 */
.section-title {
	font-size: 24px;
	font-weight: 700;
}

.section-subtitle {
	font-size: 16px;
	opacity: .8;
}

.section-body {
	font-size: 18px;
}

.section-body .title {
	font-size: 20px;
}

@media(min-width: 992px) {
	.section {
		gap: 24px 40px;
		margin-bottom: 40px;
	}
}

/* tablet- horizontal */
@media(min-width: 1200px) {
	.section {
		--header-width: 320px;
	}
}

/* pc */
@media(min-width: 1600px) {
	.section {
		--header-width: 400px;
		gap: 40px 80px;
		margin-bottom: 80px;
	}

	.section-title {
		font-size: 28px;
	}

	.section-subtitle {
		font-size: 16px;
	}

	.section-body {
		font-size: 20px;
	}
}

.source {
	word-break: break-all;
	font-size: 14px;
	opacity: 0.7;
}

.source a {
	color: var(--indigo-500);
	background: url(/resource/images/icon/arrow_outward-indigo.svg) no-repeat right center;
	background-size: 24px;
	padding-right: 28px;
	text-decoration: underline;
}

ol:has(sup) {
	font-size: 14px;
	color: var(--gray-600);

	border-left: 4px solid var(--gray-300);
	padding-left: 16px;
	margin-top: 16px;
	margin-bottom: 16px;
}

ol:has(sup) li {
	padding-bottom: 8px;
	display: flex;
	align-items: stretch;
	gap: 8px;
}

ol:has(sup) li>* {
	height: 100%;
}

.responsive-box:has(figure.box) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;

	border-radius: 24px;
	border: 1px solid var(--gray-200);
	padding: 16px;
}

.responsive-box:has(figure.predictiveDesc-figure) {
	align-items: flex-start;
	padding: 24px 24px 16px;
	border-radius: 16px;
}

.predictiveDesc-figure+.source {
	width: 100%;
}

/* tablet - vertical */
@media(min-width: 768px) {
	.responsive-box:has(figure.box) {
		justify-content: center;
		padding: 24px 8px;
	}

	.responsive-box:has(figure.predictiveDesc-figure) {
		padding: 24px;
	}
}

@media(min-width: 1200px) {
	.source {
		font-size: 16px;
	}

	ol:has(sup) {
		font-size: 16px;
	}

	.responsive-box:has(figure.box) {
		border-radius: 40px;
	}

	.responsive-box:has(figure.predictiveDesc-figure) {
		border-radius: 24px;
		padding: 40px 40px 24px;
	}

	.predictiveDesc-figure {
		width: 100%;
	}

	.predictiveDesc-figure img {
		width: 100%;
		height: auto;
	}
}

@media(min-width: 1600px) {
	ol:has(sup) {
		font-size: 18px;
	}

	.responsive-box:has(figure.box) {
		border-radius: 80px;
		padding: 40px 24px 32px;
	}

	.responsive-box:has(figure.predictiveDesc-figure) {
		padding: 64px 80px 32px;
		border-radius: 24px;
	}
}

/* card */
.diagram {
	--gap: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 24px;
	border: 1px solid var(--gray-200);
	padding: 24px 16px;
	gap: var(--gap);

	width: 100%;
	overflow: hidden;
}

.diagram-header {
	width: 100%;
	font-size: 20px;
	font-weight: 500;
	color: var(--gray-700);
	text-align: center;
}

.diagram-body {
	width: 100%;
	display: flex;
}

/* tablet - vertical */
@media(min-width: 768px) {
	.diagram {
		justify-content: center;
		padding: 24px;
	}
}

@media(min-width: 1200px) {
	.diagram {
		--gap: 24px;
		border-radius: 40px;
	}

	.diagram-header {
		font-size: 24px;
	}
}

@media(min-width: 1600px) {
	.diagram {
		border-radius: 80px;
		padding: 40px 24px;
	}
}

/* process-list */
.process-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/* 카드 */
.process-card {
	flex: 1;
	position: relative;
	padding: 40px 24px;
}

/* 화살표 (모바일: 아래 방향) */
.process-card:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -40px;
	transform: translateX(-50%);
	width: 120px;
	height: 40px;
	background: url("/resource/images/icon/img-down.svg") no-repeat center;
	background-size: contain;
}

/* 아이콘 */
.process-icon {
	width: 120px;
	height: 120px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 48px;
}

/* 아이콘 컬러 */
.process-icon.step01 {
	background-color: #49C78A;
}

.process-icon.step02 {
	background-color: #17B6B0;
}

.process-icon.step03 {
	background-color: #2C8FC7;
}

.process-icon.step04 {
	background-color: #1C79D8;
}

.process-icon.step05 {
	background-color: #4C79D8;
}

/* 텍스트 */
.process-icon {
	text-align: center;
	font-family: var(--en), sans-serif;
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
}

.process-title {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 16px;
}

.process-title span {
	font-weight: 400;
	font-size: 80%;
	display: block;
}

.process-desc {
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* ========================= tablet 이상: 가로 플로우 ========================= */
@media (min-width: 992px) {
	.process-list {
		flex-direction: row;
		align-items: stretch;
		gap: 24px;
	}

	.process-card {
		padding: 40px 20px;
	}

	/* 화살표: 오른쪽 방향 */
	.process-card:not(:last-child)::after {
		top: 50%;
		right: -24px;
		left: auto;
		bottom: auto;
		transform: translateY(-50%);
		width: 24px;
		height: 72px;
		background: url("/resource/images/icon/img-next.svg") no-repeat center;
		background-size: contain;
	}
}

/* ========================= pc 이상: 카드 강조 ========================= */
@media (min-width: 1400px) {
	.process-list {
		gap: 24px;
	}

	.process-card {
		padding: 40px 32px;
	}
}

/* plm */
.plm .process-card {
	width: 100%;
	border-radius: 24px;
	border: 1px solid var(--gray-200);
}

.plm .process-icon {
	padding-top: 24px;
	background-position: center 48px;
}

.plm .step01 {
	background-image: url(/resource/images/technology/plm-icon01.svg);
}

.plm .step02 {
	background-image: url(/resource/images/technology/plm-icon02.svg);
}

.plm .step03 {
	background-image: url(/resource/images/technology/plm-icon03.svg);
}

.plm .step04 {
	background-image: url(/resource/images/technology/plm-icon04.svg);
}

.plm .step05 {
	background-image: url(/resource/images/technology/plm-icon05.svg);
}

.plm .process-desc {
	max-width: 280px;
	margin: 0 auto;
	text-align: center;
}

@media (min-width: 768px) {
	.plm .process-list {
		flex-direction: row;
		align-items: stretch;
		gap: 24px;
	}

	.plm .process-card {
		flex: 1 0 calc((100% - 24px) * 0.5);
	}

	.plm .process-card:not(:last-child)::after {
		top: 50%;
		right: -24px;
		left: auto;
		bottom: auto;
		transform: translateY(-50%);
		width: 24px;
		height: 72px;
		background: url(/resource/images/icon/img-next.svg) no-repeat center;
		background-size: contain;
	}
}

@media(min-width: 992px) {
	.plm .process-card {
		flex: 1 0 calc((100% - 48px) * 0.33);
	}
}

/* dxax */
.dxax.diagram {
	padding: 24px 0;
}

/* stage-list */
.stage-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px 0;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

/* 카드 */
.stage-header {
	border: 1px solid var(--green-300);
	border-radius: 40px;
	width: fit-content;
	padding: 8px 48px;
	margin: 0 auto 24px;
}

.card01 .stage-header,
.card01 .stage-title {
	color: var(--green-400);
	border-color: var(--green-300);
}

.card02 .stage-header,
.card02 .stage-title {
	color: var(--teal-400);
	border-color: var(--teal-300);
}

.card03 .stage-header,
.card03 .stage-title {
	color: var(--cyan-400);
	border-color: var(--cyan-300);
}

.card04 .stage-header,
.card04 .stage-title {
	color: var(--indigo-400);
	border-color: var(--indigo-300);
}

/* 아이콘 */
.stage-icon {
	width: 240px;
	height: 152px;
	max-width: 100%;
	margin: 0 auto 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 152px;

	position: relative;
}

.stage-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	background: url("/resource/images/technology/dxax-icon01.svg") no-repeat center;
	background-size: contain;
}

/* 텍스트 */
.stage-title {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 16px;
}

.stage-title>span {
	font-size: 16px;
	font-weight: 400;
	display: block;
}

/* ========================= tablet 이상: 가로 플로우 ========================= */
@media (min-width: 768px) {
	.stage-list {
		flex-direction: row;
		justify-content: space-evenly;
		align-items: stretch;
		gap: 24px 48px;
	}

	.stage-card {
		margin: 0 -12px 0;
	}

	.stage-icon {
		width: 320px;
		height: 200px;
		background-size: auto 200px;
	}

	.stage-icon::after {
		width: 44px;
		height: 44px;
	}
}

/* ========================= pc 이상: 카드 강조 ========================= */
@media (min-width: 1200px) {
	.stage-list {
		gap: 24px 128px;
	}
}

@media (min-width: 1400px) {
	.stage-list {
		gap: 24px 0;
	}

	.stage-icon {
		width: 312px;
		height: 200px;
		background-size: auto 200px;
	}
}

/* ========================= pc 이상: 카드 강조 ========================= */
@media (min-width: 1600px) {
	.stage-card {
		margin: 16px -8px 0;
	}

	.stage-icon {
		width: 340px;
		height: 220px;
		background-size: auto 220px;
	}

	.stage-icon::after {
		width: 48px;
		height: 48px;
	}
}

.card01 .stage-icon {
	background-image: url(/resource/images/technology/dxax-step01.svg);
}

.card02 .stage-icon {
	background-image: url(/resource/images/technology/dxax-step02.svg);
}

.card03 .stage-icon {
	background-image: url(/resource/images/technology/dxax-step03.svg);
}

.card04 .stage-icon {
	background-image: url(/resource/images/technology/dxax-step04.svg);
}

/* data */
.data.diagram .diagram-header {
	font-size: 18px;
}

.data.diagram .title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	gap: 4px;
}

.data.diagram .title>span {
	font-size: 87.5%;
	font-weight: 400;
}

@media(min-width: 768px) {
	.data.diagram .diagram-header {
		max-width: 700px;
	}
}

@media (min-width: 992px) {
	.data.diagram .stage-list {
		gap: 24px 48px;
	}
}

@media (min-width: 1200px) {
	.data.diagram .stage-icon {
		width: 240px;
		height: 154px;
		background-size: auto 154px;
	}
}

@media (min-width: 1600px) {
	.data.diagram .stage-list {
		gap: 24px 48px;
	}

	.data.diagram .stage-icon {
		width: 296px;
		height: 188px;
		background-size: auto 188px;
	}
}

.data .card01 .stage-icon::after {
	background-image: url(/resource/images/technology/data-icon01.svg);
}

.data .card02 .stage-icon::after {
	background-image: url(/resource/images/technology/data-icon02.svg);
}

.data .card03 .stage-icon::after {
	background-image: url(/resource/images/technology/data-icon03.svg);
}

.data .card04 .stage-icon::after {
	background-image: url(/resource/images/technology/data-icon04.svg);
}

/* Digital Twin & dx */
.dxax .card01 .stage-icon::after {
	background-image: url(/resource/images/technology/dxax-icon01.svg);
}

.dxax .card02 .stage-icon::after {
	background-image: url(/resource/images/technology/dxax-icon02.svg);
}

.dxax .card03 .stage-icon::after {
	background-image: url(/resource/images/technology/dxax-icon03.svg);
}

.dxax .card04 .stage-icon::after {
	background-image: url(/resource/images/technology/dxax-icon04.svg);
	transform: translate(-42%, -50%);
}

.stage-header {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
}

.stage-desc {
	margin: 0 auto 16px;
	text-align: center;
}

.stage-desc.bg {
	padding: 20px 16px;
	position: relative;
}

.stage-desc.bg::before {
	content: '';
	width: 80%;
	height: 100%;
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	border-radius: 24px;
	background-color: var(--gray-050);
}

.stage-desc {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.stage-desc.bg {
	font-weight: 400;
}

@media(min-width: 768px) {
	.stage-desc {
		display: flex;
		flex-direction: column;
		height: 52px;
	}

	.stage-desc.bg {
		justify-content: center;
		height: 112px;
	}

}

/* aiax */
.aiax.diagram {
	--gap: 0;
}

.aiax .process-icon {
	background-color: var(--indigo-400);
}

.aiax .step01 {
	background-image: url(/resource/images/technology/aiax-icon01.svg);
}

.aiax .step02 {
	background-image: url(/resource/images/technology/aiax-icon02.svg);
}

.aiax .step03 {
	background-image: url(/resource/images/technology/aiax-icon03.svg);
}

.aiax .step04 {
	background-image: url(/resource/images/technology/aiax-icon04.svg);
}

.aiax .step05 {
	background-image: url(/resource/images/technology/aiax-icon05.svg);
}

.aiax .process-title {
	white-space: nowrap;
}

@media (min-width: 768px) {
	.aiax .process-list {
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		gap: 64px;
	}

	.aiax .process-card {
		padding: 24px 24px;
	}

	/* 화살표: 오른쪽 방향 */
	.aiax .process-card:not(:last-child)::after {
		top: 40%;
		right: -64px;
		left: auto;
		bottom: auto;
		transform: translateY(-50%);
		width: 40px;
		height: 120px;
		background: url("/resource/images/icon/img-next.svg") no-repeat center;
		background-size: contain;
	}
}

@media (min-width: 1200px) {
	.aiax .process-card {
		padding: 16px 48px;
	}
}

@media (min-width: 1400px) {
	.aiax .process-card {
		padding: 16px 32px;
	}
}

/* evolution */
.evolution.diagram {
	padding: 24px 0;
}

.evolution .process-card {
	padding-top: 20px;
	padding-bottom: 20px;
}

.evolution .process-icon {
	background-color: transparent;
}

.evolution .process-title {
	white-space: nowrap;
	margin-bottom: 0;
}

.evolution .step01 {
	background-color: var(--teal-400);
	background-image: url(/resource/images/technology/data-evolution-icon01.svg);
}

.evolution .step02 {
	background-image: url(/resource/images/technology/data-evolution-icon02.svg);
}

.evolution .step03 {
	background-image: url(/resource/images/technology/data-evolution-icon03.svg);
}

.evolution .step04 {
	background-image: url(/resource/images/technology/data-evolution-icon04.svg);
}

.evolution .step05 {
	background-image: url(/resource/images/technology/data-evolution-icon05.svg);
}

.evolution .step06 {
	background-image: url(/resource/images/technology/data-evolution-icon06.svg);
}

.evolution .step07 {
	background-color: var(--indigo-400);
	background-image: url(/resource/images/technology/data-evolution-icon07.svg);
}

.evolution .icon-list {
	width: 100%;
	margin: 0 auto;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	gap: 24px 0;
	padding: 24px 40px;

	border-radius: 64px;
	border: 1px dashed var(--blue-700);
}

.evolution .icon-list .process-icon {
	width: 100px;
	height: 48px;
	border-radius: 0;
}

.evolution .icon-list .process-title {
	font-weight: 400;
	font-weight: 80%;
}

@media(min-width: 768px) {
	.evolution .process-list {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.evolution .icon-list {
		gap: 24px 0;
	}

	/* 화살표 (모바일: 아래 방향) */
	.evolution .process-list {
		gap: 40px;
	}

	.evolution .process-card:not(:last-child)::after {
		top: inherit;

		content: '';
		position: absolute;
		left: 50%;
		bottom: -40px;
		transform: translateX(-50%);
		width: 120px;
		height: 40px;
		background: url("/resource/images/icon/img-down.svg") no-repeat center;
		background-size: contain;
	}
}

@media(min-width: 992px) {
	.evolution .process-list {
		flex-direction: column;
	}

	.evolution .icon-list {
		gap: 24px;
	}
}

@media(min-width: 1200px) {
	.evolution .process-list {
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		gap: 24px;
	}

	/* 화살표: 오른쪽 방향 */
	.evolution .process-card:not(:last-child)::after {
		top: 50%;
		right: -24px;
		left: auto;
		bottom: auto;
		transform: translateY(-50%);
		width: 24px;
		height: 72px;
		background: url("/resource/images/icon/img-next.svg") no-repeat center;
		background-size: contain;
	}

	.evolution .process-card:nth-child(1) {
		max-width: 240px;
	}

	.evolution .process-card:nth-child(3) {
		max-width: 280px;
	}
}

@media(min-width: 1400px) {
	.evolution.diagram {
		padding: 40px 24px;
	}

	.evolution.diagram .icon-list {
		max-width: 480px;
	}
}

@media(min-width: 1600px) {
	.evolution.diagram .icon-list {
		max-width: 100%;
	}
}

/* digitaltwin */
.digitaltwin.diagram {
	padding: 0;
}

.digitaltwin .process-card img {
	max-width: 320px;
}

@media (min-width: 768px) {
	.digitaltwin .process-list {
		flex-direction: row;
		align-items: center;
		gap: 120px;
	}

	.digitaltwin .process-card {
		flex: 1;
		max-width: 480px;
		padding: 40px 20px;
	}

	/* 화살표: 오른쪽 방향 */
	.digitaltwin .process-card:not(:last-child)::after {
		top: 50%;
		right: -88px;
		left: auto;
		bottom: auto;
		transform: translateY(-50%);
		width: 56px;
		height: 168px;
		background: url("/resource/images/icon/img-next.svg") no-repeat center;
		background-size: contain;
	}

	.digitaltwin .process-card img {
		max-width: 100%;
	}
}

@media (min-width: 1600px) {
	.digitaltwin .process-card {
		max-width: 560px;
	}

	.digitaltwin .process-card:not(:last-child)::after {
		right: -100px;
		width: 80px;
		height: 240px;
	}

	.digitaltwin .process-card img {
		max-width: 440px;
	}
}

/* global standards & AAS - color-box */
.color-box {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.color-box .item {
	flex: 1;
	border: 1px solid var(--gray-300);
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	padding: 20px 24px;
	overflow: hidden;

	font-size: 18px;
}

.color-box strong {
	font-size: 20px;
	font-weight: 700;
}

.color-box .green {
	border-color: var(--green-400);
}

.color-box .indigo {
	border-color: var(--indigo-350);
}

.color-box .green strong {
	color: var(--green-700);
}

.color-box .indigo strong {
	color: var(--indigo-600);
}

.color-box:has(.item-body) .item {
	padding: 0;
}

.color-box .item-body {
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 24px 20px;
	background-color: var(--gray-050);

	font-size: 16px;
}

@media(min-width: 576px) {
	.color-box .item {
		gap: 24px;
	}

	.color-box strong {
		font-size: 24px;
	}

	.color-box.col-4 {
		flex-wrap: wrap;
		flex-direction: row;
		align-items: stretch;
	}

	.color-box.col-4 .item {
		flex: 1 0 calc((100% - 24px) * .5);
	}
}

@media(min-width: 768px) {
	.color-box {
		flex-wrap: wrap;
		flex-direction: row;
		align-items: stretch;
	}
}

@media(min-width: 992px) {
	.color-box.col-4 .item {
		flex: 1 0 calc((100% - 72px) * .25);
	}
}

@media(min-width: 1400px) {
	.color-box {
		gap: 40px;
	}

	.color-box.col-3 .item-body {
		padding: 24px 40px;
	}

	.color-box.col-4 .item {
		flex: 1;
		padding: 24px 40px;
	}
}

.item-header {
	width: 100%;
	height: 180px;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
}

.color-box.col-3 .item {
	gap: 0;
}

/* grid */
.grid-wrap {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	/* mobile 1x1 */
}

/* 992px: 2x2 */
@media (min-width: 768px) {
	.grid-wrap {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

/* tablet - horizontal 3x3 */
@media (min-width: 1200px) {
	.grid-wrap {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	/* 중앙(5번째)만 이미지로 보이게 */
	.grid-item.is-center {
		grid-column: 2;
		grid-row: 2;
		background: url(/resource/images/technology/aiAx-img02.png) no-repeat center / cover;
		min-height: 180px;
		/* 필요 시 조정 */
	}
}

/* AI & AX : 기본: 중앙 아이템은 1400px 미만에서는 숨김 */
.grid-item.is-center {
	display: none;
}

.grid-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;

	border: 1px solid var(--gray-300);
	border-radius: 24px;
	padding: 24px;

}

.grid-title {
	text-align: center;
	font-weight: 700;
	position: relative;
	padding-top: 64px;
}

.grid-title::before {
	content: '';
	display: block;
	position: absolute;
	width: 48px;
	height: 48px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-image: url(/resource/images/technology/ai-solutions-icon01.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 48px;
	overflow: hidden;
}

.grid-item:nth-child(2) .grid-title::before {
	background-image: url(/resource/images/technology/ai-solutions-icon02.svg);
}

.grid-item:nth-child(3) .grid-title::before {
	background-image: url(/resource/images/technology/ai-solutions-icon03.svg);
}

.grid-item:nth-child(4) .grid-title::before {
	background-image: url(/resource/images/technology/ai-solutions-icon04.svg);
}

.grid-item:nth-child(6) .grid-title::before {
	background-image: url(/resource/images/technology/ai-solutions-icon05.svg);
}

.grid-item:nth-child(7) .grid-title::before {
	background-image: url(/resource/images/technology/ai-solutions-icon06.svg);
}

.grid-item:nth-child(8) .grid-title::before {
	background-image: url(/resource/images/technology/ai-solutions-icon07.svg);
}

.grid-item:nth-child(9) .grid-title::before {
	background-image: url(/resource/images/technology/ai-solutions-icon08.svg);
}

.grid-text {
	font-size: 90%;
	word-break: keep-all;
}

@media (min-width: 768px) {
	.grid-item {
		border-radius: 24px;
		padding: 24px 32px;
	}

}

@media (min-width: 1200px) {
	.grid-item {
		border-radius: 40px;
		padding: 32px 40px;
	}

	.grid-item.is-center {
		display: block;
	}
}

/* products : AXPlatform */
.ui-group {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.ui-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 1200px 이상: 4칼럼 */
@media (min-width: 992px) {
	.ui-group {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 1600px 이상: 5칼럼 */
@media (min-width: 1600px) {
	.ui-group.twinPlant {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.ui-item {
	height: 100%;

	border-radius: 24px;
	border: 1px solid var(--gray-200);
	padding: 88px 8px 20px;
	align-self: flex-end;
	justify-content: center;

	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.05rem;
	text-align: center;
	white-space: nowrap;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;

	position: relative;
}

.ui-item::before {
	content: '';

	display: block;
	position: absolute;
	left: 50%;
	top: 24px;
	transform: translateX(-50%);

	width: 48px;
	height: 48px;

	background-position: 0 center;
	background-size: auto 48px;
	background-repeat: no-repeat;
}

.ui-group.twinPlant .ui-item::before {
	background-image: url(/resource/images/products/axPlatform/ui-component.svg);
}

.ui-group.testBed .ui-item::before {
	background-image: url(/resource/images/products/axPlatform/ax-platform-process.svg);
}

.ui-item:nth-child(2)::before {
	background-position: -100px center;
}

.ui-item:nth-child(3)::before {
	background-position: -200px center;
}

.ui-item:nth-child(4)::before {
	background-position: -300px center;
}

.ui-item:nth-child(5)::before {
	background-position: -400px center;
}

.ui-item:nth-child(6)::before {
	background-position: -500px center;
}

.ui-item:nth-child(7)::before {
	background-position: -600px center;
}

.ui-item:nth-child(8)::before {
	background-position: -700px center;
}

.ui-item:nth-child(9)::before {
	background-position: -800px center;
}

.ui-item:nth-child(10)::before {
	background-position: -900px center;
}

.ui-item:nth-child(11)::before {
	background-position: -1000px center;
}

.ui-item:nth-child(12)::before {
	background-position: -1100px center;
}

.ui-item:nth-child(13)::before {
	background-position: -1200px center;
}

.ui-item:nth-child(14)::before {
	background-position: -1300px center;
}

.ui-item:nth-child(15)::before {
	background-position: -1400px center;
}

.ui-item:nth-child(16)::before {
	background-position: -1500px center;
}

/* swiper */
.swiper-box {
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
	background-color: var(--white);
}

.swiper-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	background-color: var(--gray-100);
	padding: 0 16px;
	height: 32px;
}

.swiper-header .dot {
	width: 10px;
	height: 10px;
	border-radius: 10px;
}

.swiper-header .dot.red {
	background-color: #EC6452;
}

.swiper-header .dot.yellow {
	background-color: #EEB748;
}

.swiper-header .dot.green {
	background-color: #54BD47;
}

.swiper-body {
	padding: 8px;
	position: relative;
}

@media(min-width: 768px) {
	.swiper-body {
		padding: 16px;
	}
}

@media(min-width: 1200px) {
	.swiper-body {
		padding: 32px;
	}
}

/* swiper */
.swiper.product-gallery {
	overflow: hidden;
	height: auto;
}

.swiper.product-gallery .swiper-wrapper,
.swiper.product-gallery .swiper-slide {
	width: 100%;
	height: 100%;
}

.swiper.product-gallery .swiper-slide {
	height: 100%;

	display: flex;
	align-items: flex-start;
	justify-content: center;

	cursor: pointer;
}

/* 이미지 꽉 채우기 */
.swiper.product-gallery .slide {
	width: 100%;
	height: 100%;
}

.swiper.product-gallery .slide img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* nav */
.swiper.product-gallery .swiper-button-prev,
.swiper.product-gallery .swiper-button-next {
	pointer-events: auto;
	cursor: pointer;
	z-index: 10;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
}

.swiper.product-gallery .swiper-pagination {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	z-index: 10;

	width: auto;
	padding: 6px 10px;
	border-radius: 999px;

	/* 필요 없으면 제거 가능 */
	background-color: var(--white-500);
	backdrop-filter: blur(4px);
}

.swiper.product-gallery .swiper-pagination-bullets {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.swiper.product-gallery .swiper-pagination-bullet {
	opacity: 1;
	background-color: var(--black-500);
}

.swiper.product-gallery .swiper-pagination-bullet-active {
	background-color: var(--accent-blue);
	opacity: 1;
}

/* counter-box */
/* .section:has(.counter-box) {
	gap: 0 80px;
} */

.section.chart {
	--section-header: 100%;
	--gap: 0;
	margin-bottom: 40px;
}

.section.chart .section-header {
	flex-direction: column;
	gap: 16px;
}

@media(min-width: 768px) {
	.section.chart {
		--header-width: 240px;
		margin-bottom: 80px;
	}

	.section.chart .section-header {
		flex-direction: column;
		gap: 16px;
	}
}

@media(min-width: 992px) {
	.section.chart {
		--header-width: 320px;
	}
}

@media(min-width: 1400px) {
	.section.chart {
		--header-width: 480px;
	}
}

.counter-box {
	flex: 1;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--gray-050);
	border-radius: 24px;
	padding: 24px;
	gap: 16px;
}

.counter-header {
	font-size: 20px;
}

.counter-body strong {
	font-family: var(--en), sans-serif;
	font-weight: 500;
	font-size: 48px;

	width: 112px;
	display: inline-flex;
	justify-content: flex-end;
}

.counter-body span {
	font-size: 24px;
}

@media(min-width: 768px) {
	.counter-box {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0;
		padding: 24px 40px;
	}

	.counter-body strong {
		font-size: 52px;
		width: 104px;
		justify-content: flex-start;
	}
}

@media(min-width: 992px) {
	.counter-box {
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		gap: 24px;
		padding: 24px;
	}

	.counter-body strong {
		font-size: 64px;
		width: 136px;
	}
}

@media(min-width: 1400px) {
	.counter-body strong {
		font-size: 100px;
		width: 180px;
	}
}

/* chart */
.chart-box {
	display: grid;
	justify-items: center;
	grid-template-columns: 1fr;
	gap: 16px;
}

.chart-wrap {
	position: relative;
	/* width: 100%;
	height: 320px; */
	aspect-ratio: 1 / 1;
	height: clamp(280px, 40vw, 400px);
	margin: 0 auto;
}

.chart-wrap canvas {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

.legend {
	display: flex;
	align-items: center;
}

.legend-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 12px;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	flex: 0 0 auto;
}

.legend-text {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	font-size: 14px;
	color: var(--gray-900);
	min-width: 0;
}

.legend-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.legend-value {
	color: var(--muted);
	font-weight: 600;
	flex: 0 0 auto;
}

/* ====== 992px 이상: 2열 ====== */
@media (min-width: 992px) {
	.chart-box {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: stretch;
		gap: 0;
	}

	.chart-wrap {
		height: 320px;
	}

	.legend-grid {
		grid-template-columns: 1fr;
	}
}

/* ====== 1400px 이상: 더 넓게 ====== */
@media (min-width: 1200px) {
	.chart-wrap {
		height: 440px;
	}

	.legend-text {
		gap: 24px;
		font-size: 18px;
	}
}

/* customers */
.section.customers {
	--header-width: 100%;
	gap: 0;
	position: relative;
	line-height: 1;
	margin-bottom: 40px;
}

.section.customers::before {
	content: '';
	height: 4px;
	display: block;
	position: absolute;
	top: -4px;
	left: 0;
	width: 100%;
	background-color: var(--gray-200);
}

.section.customers::after {
	content: '';
	height: 4px;
	display: block;
	position: absolute;
	top: -4px;
	left: 0;
	width: var(--header-width);
	background-color: var(--indigo-400);
}

.customers .section-header,
.customers .section-body {
	padding: 16px 20px;
}

.customers .section-header {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	flex-basis: var(--header-width);
	max-width: var(--header-width);
	background-color: var(--black-050);
	border-bottom: 1px solid var(--gray-200);
	padding: 24px;
}

.customers .section-body {
	flex: 1;
	justify-content: center;
}

.customers .section-title {
	font-size: 16px;
	font-weight: 700;
	padding-top: 8px;
}

.customers .section-subtitle {
	font-family: var(--en), sans-serif;
	font-size: 48px;
	font-weight: 500;
	opacity: 1;
}

.logo-grid {
	display: grid;
	align-items: center;
	justify-content: start;
	grid-template-columns: repeat(1, 1fr);
	gap: 48px;
	padding: 24px 0;
}

.logo-grid > * {
	text-align: center;
}
.logo-grid > *:nth-child(odd) {
  order: 1;
}
.logo-grid > *:nth-child(even) {
  order: 2;
}

.logo-grid img {
	max-width: 72%;
}

@media(min-width: 768px) {
	.section.customers {
		--header-width: 240px;
		border-bottom: 1px solid var(--gray-100);
	}

	.customers .section-header,
	.customers .section-body {
		padding: 24px;
	}

	.customers .section-header {
		gap: 48px;
		flex-direction: column;
		justify-content: space-between;
		border-bottom: none;
	}
	.customers .section-subtitle {
		font-size: 80px;
		align-self: flex-end;
	}
	.logo-grid {
		padding: 24px 48px;
		gap: 64px;
	}
	.logo-grid > * {
		text-align: left;
	}
}

@media(min-width: 992px) {
	.section.customers {
		--header-width: 320px;
	}

	.customers .section-header,
	.customers .section-body {
		padding: 24px 48px;
	}

	.customers .section-title {
		font-size: 16px;
	}
	.logo-grid {
		padding: 16px 48px;
		gap: 48px;
	}
	.logo-grid img {
		max-width: 50%;
	}
}

@media(min-width: 1200px) {
	.logo-grid {
		gap: 48px;
		grid-template-columns: repeat(2, 1fr);
	}
	.logo-grid > * {
		order: initial !important;
	}
	.logo-grid img {
		max-width: 76%;
	}
}

@media(min-width: 1400px) {
	.section.customers {
		--header-width: 480px;
		margin-bottom: 80px;
	}

	.customers .section-header {
		padding: 48px 40px;
	}
	.customers .section-body {
		padding: 48px 80px;
	}

	.customers .section-title {
		font-size: 20px;
	}

	.customers .section-subtitle {
		font-size: 100px;
	}

	.logo-grid {
		padding: 24px 0;
		gap: 64px 48px;
	}
	.logo-grid img {
		max-width: 92%;
	}
}

/* timeline */
.timeline-box {
	position: relative;
}

.timeline-box::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 48px;
	height: 48px;
	border-top-left-radius: 24px;
	border-bottom-left-radius: 24px;
	background-image: linear-gradient(to right,
			#059DD4 20%,
			transparent 100%);
}

.timeline-box::after {
	content: '';
	display: block;
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	border-top-right-radius: 24px;
	border-bottom-right-radius: 24px;
	background-image: linear-gradient(to right,
			transparent 0%,
			#0060CD 80%);
}

.timeline-list {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	width: 100%;
	height: 48px;
	border-radius: 40px;

	padding: 0 16px;
	margin: 0 auto;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x proximity;
	scroll-padding-left: 16px;
	scroll-padding-right: 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	position: relative;
	background-image: linear-gradient(to right,
			#059DD4 20%,
			#1882C4 50%,
			#0060CD 80%);
}

.timeline-list::-webkit-scrollbar {
	display: none;
}

.timeline-item {
	flex: 0 0 auto;
	scroll-snap-align: center;
	scroll-snap-stop: always;

	white-space: nowrap;
	font-size: 16px;
	font-weight: 500;
	color: var(--white-500);

	padding: 0 24px;
	height: 100%;
}

.timeline-item.is-active {
	font-weight: 700;
	color: var(--white);
}

.timeline-box .section {
	--gap: 0;
	margin-top: 44px;
	margin-bottom: 0px;
}

.timeline-box .section-title {
	display: flex;
	align-items: center;
	gap: 16px;
}

.timeline-box:not(.technical) .section-title {
	letter-spacing: -0.1rem;
}


.timeline-box .section-title>span {
	font-size: 28px;
}

.timeline-box .section-subtitle {
	font-size: 14px;
	line-height: 1.2;
}

.timeline-box .section-body-block {
	gap: 0 40px;
	padding-top: 20px;
}

.timeline-box .section-body-block .year {
	flex: 1 0 56px;
	max-width: 48px;
	font-size: 24px;
	font-weight: 700;
}

.timeline-box .section-body-block ol {
	flex: 1;
}

.timeline-box .section-body-block ol li {
	margin-bottom: 16px;
}

.timeline-box .section-header,
.timeline-box .section-body {
	padding-left: 64px;
}

@media(min-width: 576px) {

	.timeline-box .section-header,
	.timeline-box .section-body {
		padding-left: 160px;
	}
}

@media(min-width: 768px) {

	.timeline-box::before,
	.timeline-box::after {
		display: none;
	}

	.timeline-list {
		width: 92%;
		justify-content: center;
	}
}

@media(min-width: 992px) {
	.timeline-box .section-body-block {
		flex-direction: row;
	}

	.timeline-box .section-body-block .year {
		font-size: 18px;
	}
}

@media(min-width: 1200px) {
	.timeline-list {
		width: fit-content;
		min-width: 1000px;
		height: 80px;
	}

	.timeline-item {
		font-size: 20px;
	}

	.timeline-box .section {
		margin-top: 48px;
	}

	.timeline-box .section-subtitle {
		max-width: 76%;
		word-break: keep-all;
	}

	.timeline-box .section-header,
	.timeline-box .section-body {
		padding-left: 0;
	}

	.timeline-box .section-body-block .year {
		flex: 1 0 100px;
		max-width: 100px;
		font-size: 20px;
	}
}

@media(min-width: 1400px) {
	.timeline-list {
		padding: 0 80px;
		gap: 0 24px;
		justify-content: center;
	}

	.timeline-box .section {
		margin-top: 80px;
	}

	.timeline-box .section-subtitle {
		max-width: 84%;
	}

	.timeline-box .section-title>span {
		font-size: 48px;
	}

	.timeline-box.technical .section-title>span {
		font-size: 64px;
	}

	.timeline-box.technical .section-body-block .year {
		font-size: 24px;
	}
}

/* timeline */
.timeline {
	position: absolute;
	z-index: -1;
	left: 24px;
	top: 0;
	bottom: 0px;
	width: 2px;
}

.timeline-base,
.timeline-progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
}

.timeline-base {
	height: 100%;
	background: var(--gray-350);
}

.timeline-progress {
	background: var(--indigo-600);
	height: 0;
	will-change: height;
}

/* 움직이는 활성 dot(1개) */
.timeline-progress::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -24px;
	margin-top: -24px;
	transform: translateX(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--white);
	border: 8px solid var(--indigo-600);
}

@media(min-width: 576px) {
	.timeline {
		position: absolute;
		left: 80px;
	}
}

@media(min-width: 992px) {}

@media(min-width: 1200px) {
	.timeline {
		left: 320px;
	}
}

@media(min-width: 1600px) {
	.timeline {
		left: 400px;
	}
}

/* technical-history */
.timeline-box.technical .section-body-block {
	flex-direction: column;
}

.timeline-box.technical .year {
	flex: 1 0 auto;
	font-weight: 700;

	color: var(--indigo-500);
}

.timeline-box.technical .milestone-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 16px;
}

.timeline-box.technical .milestone-desc {
	font-size: 16px;
	font-weight: 400;
}

.tag-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 0;
}

.tag {
	display: inline-flex;
	width: fit-content;
	border: 1px solid var(--gray-300);
	padding: 8px 24px;
	border-radius: 40px;

	font-size: 16px;
	font-weight: 700;
}

@media(min-width: 1400px) {
	.timeline-box.technical .milestone-title {
		font-size: 32px;
	}

	.timeline-box.technical .milestone-desc {
		font-size: 20px;
	}

	.tag-box {
		padding: 48px 0;
	}

	.tag {
		font-size: 24px;
	}
}

/* company > history */
.timeline-box.history .timeline-list {
	justify-content: center;
}

.timeline-box.history .section-title {
	gap: 0;
	align-items: baseline;
}

@media(min-width: 1600px) {
	.timeline-box.history .timeline {
		left: 320px;
	}

	.timeline-box.history .section {
		--header-width: 320px;
	}
}

/* map */
.section.map .root_daum_roughmap .cont {
	display: none;
}

.section.location .section-header,
.section.location .section-body {
	font-size: 18px;
}

.section.location {
	flex-direction: row-reverse;
}

.section.location .section-body {
	padding: 16px 0;
}

.location-info {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.location-info>* {
	flex: 1;
}

.location-info strong {
	max-width: 120px;
}

.btn-map.mobile {
	display: flex;
}

.btn-map.web {
	display: none;
}

.btn-map {
	--icon-size: 24px;
	position: relative;

	display: flex;
	justify-content: center;
	gap: 8px;

	color: var(--white) !important;
	background-color: var(--indigo-600);

	line-height: var(--icon-size);
	padding: 16px 40px;
	border-radius: 8px;
}

.btn-map::before {
	content: '';
	position: relative;
	top: 50%;
	left: auto;
	transform: translateY(-50%);
	display: inline-flex;
	width: var(--icon-size);
	height: var(--icon-size);

	background-image: url(/resource/images/icon/location.svg);
	background-repeat: no-repeat;
	background-size: var(--icon-size);
	background-position: center;
}

.map-box {
	width: 100%;
	aspect-ratio: 2 / 1;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid var(--gray-200);
}

.map-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
	transform-origin: center;
}

@media(min-width: 768px) {
	.section.location .section-header {
		--header-width: 200px;
		align-items: flex-end;
	}

	.location-info {
		flex-direction: row;
	}

	.location-info strong {
		max-width: 100px;
	}

	.btn-map.mobile {
		display: none;
	}

	.btn-map.web {
		display: flex;
	}

	.btn-map {
		--icon-size: 24px;
		max-width: fit-content;
		padding: 16px 24px;
	}
}

@media(min-width: 1400px) {
	.section.location .section-header {
		--header-width: 240px;
	}

	.section.location .section-header,
	.section.location .section-body {
		font-size: 20px;
	}

	.location-info strong {
		max-width: 160px;
	}

	.btn-map {
		--icon-size: 32px;
	}

	.btn-map::before {
		border-radius: 12px;
	}

	.map-box {
		border-radius: 80px;
	}
}

@media(min-width: 1600px) {

	.section.location .section-header,
	.section.location .section-body {
		font-size: 24px;
	}

	.location-info strong {
		max-width: 200px;
	}

	.btn-map {
		--icon-size: 36px;
	}

	.btn-map::before {
		border-radius: 16px;
	}
}

/* business-inquiry */
.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
}

.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

	font-size: 20px;
	padding: 16px 16px;
	height: 56px;
	border-radius: 8px;
	border: 1px solid var(--gray-200);
}

.form-control::placeholder {
	font-weight: 400;
	font-size: 18px;
	color: var(--gray-350);
}

.form-label {
	font-size: 20px;
}

.form-label .required {
	line-height: 1;
	font-weight: 700;
	color: var(--orange-500);
}

.form-group.agree {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	line-height: 1;
}

.form-check-input:checked[type=checkbox] {
	--form-check-bg-image: url('/resource/images/icon/input-check.svg');
}

.form-check-input:checked {
	background-color: var(--indigo-500);
	border-color: var(--indigo-500);
}

.form-check-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	background-image: var(--form-check-bg-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	border: 1px solid var(--gray-350);
	accent-color: var(--indigo-500);
	width: 20px;
	height: 20px;

	line-height: 1rem;
	margin: 0;
	border-radius: 4px;

	cursor: pointer;
}

.form-check-input:hover,
.form-check-input:focus {
	accent-color: var(--indigo-500);
}

.textarea {
	height: 120px;
}

.btn-confirm {
	font-size: 24px;
	color: var(--white);
	padding: 16px 64px;
	border-radius: 64px;
	background-color: var(--indigo-600);
	cursor: pointer;
	margin-top: 24px;
	transition: background 1s ease-in-out;
}

.btn-confirm:hover {
	background-color: var(--indigo-400);
}

.error-msg {
	font-size: 16px;
	color: var(--indigo-700);
	margin-top: 4px;
	display: none;
}

.form-control:active,
.form-control:focus,
.form-group.error input,
.form-group.error textarea {
	color: var(--gray-900);
	background-color: var(--white);
	border-color: var(--indigo-300);
	outline: 0;
	box-shadow: 0 0 0 .25rem var(--indigo-200);
}

.form-group.error .error-msg {
	display: block;
}

/* 인덱스에서 슬라이더 클릭시 이동포인트 지정 */
.anchor-offset {
	display: block;
	position: relative;
	visibility: hidden;
	margin-top: -112px;
	padding-top: 128px;
}

@media(min-width: 1400px) {
	.anchor-offset {
		margin-top: -164px;
		padding-top: 180px;
	}
}