/*
 * SUB PAGE CSS — CURRENT FINAL BEFORE TECHNOLOGY
 *
 * 포함 범위:
 * - 기존 Sub Visual
 * - Platform / Solutions / Markets
 * - Products / Products Detail
 *
 * 기준:
 * - 공통 컴포넌트 우선 사용
 * - 최소 폰트 크기 14px
 * - 일반 본문 16px~18px
 * - Technology 페이지 작업 전 기준본
 * - Board 영역 제외
 */

.sub_visual {
	position: relative;
}


.sub_visual_top {
	position: relative;
	height: 840px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}


.sub_visual_top .sub_visual_bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}


.sub_visual_top .inner_w {
	position: relative;
	z-index: 2;
	width: 100%;
}


.sub_visual_top .sub_visual_bg img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	animation: visualZoom 4s ease-out forwards;
}


.sub_visual_top .txt {
	text-align: center;
}


.sub_visual_top .txt ul {
	display: flex;
	align-items: center;
	gap: 18px;
	justify-content: center;
}


.sub_visual_top .txt ul li {
	color: #FFF;
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 7px;
}

.sub_visual_top .txt ul li a{color: #fff}

.sub_visual_top .txt ul li i {
	width: 1px;
	height: 10px;
	background: #fff;
	display: block;
}


.sub_visual_top .txt h2 {
	margin-top: 24px;
	line-height: 150%;
	word-break: keep-all;
	font-weight: 700;
	color: #fff;
}


@keyframes visualZoom {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1.0);
    }
}


.sub_section {
	padding: 150px 0;
}

.sub_section.notop {
	padding-top: 0;
}

.sub_title {
	margin-bottom: 60px;
}

.sub_title.center {
	text-align: center;
}


.sub_title h2 {
	color: #111;
	font-weight: 700;
	line-height: 140%;
	word-break: keep-all;
}


.sub_title p {
	color: rgba(255, 255, 255, 0.70);
	font-weight: 400;
	line-height: 140%;
	/* 28px */
}


.sub_title h2 + p {
	margin-top: 24px;
}


/* ==================================================
	COMMON SUB SYSTEM
================================================== */

/* ==================================================
	TYPOGRAPHY SYSTEM
	- 일반 본문: 16px ~ 18px
	- 작은 보조 문구: 14px
	- 14px 미만 사용 금지
================================================== */
:root {
	--fs-visual-title: 60px;
	--fs-page-title: 52px;
	--fs-section-title: 44px;
	--fs-lead: 20px;
	--fs-card-title: 18px;
	--fs-body-large: 18px;
	--fs-body: 16px;
	--fs-button: 16px;
	--fs-caption: 14px;
}

.sub_visual_top .txt h2 {
	font-size: var(--fs-visual-title);
}

.core_hero_text h1,
.energyflex_intro_content h1,
.feature_intro_text h1,
.governance_intro_text h1,
.insight_intro_text h1,
.lifecycle_intro_text h1,
.model_intro_text h1,
.pilot_intro_text h1,
.pipeline_intro_text h1,
.twin_intro_text h1 {
	font-size: var(--fs-page-title);
}

.sub_common_title h2,
.sub_title h2 {
	font-size: var(--fs-section-title);
}

.core_architecture_content strong,
.core_asset_card strong,
.core_center_card strong,
.core_environment_box strong,
.energyflex_governance_area h3,
.energyflex_pipeline_head strong,
.energyflex_workflow > span,
.feature_application_card strong,
.feature_cloud_evidence strong,
.feature_parameter_card strong,
.key_model_card strong,
.pipeline_overview_head strong,
.pipeline_quality_card strong,
.sub_basic_card_title,
.sub_icon_card_title,
.sub_image_card_title {
	font-size: var(--fs-card-title);
}

.core_architecture_content p,
.core_environment_copy p,
.core_hero_text p,
.energyflex_intro_content p,
.energyflex_predictive_section .sub_common_title p,
.energyflex_reality_section .sub_common_title p,
.feature_cloud_section .sub_common_title p,
.feature_intro_text p,
.governance_advisory_section .sub_common_title p,
.governance_intro_text p,
.insight_intro_text p,
.lifecycle_intro_text p,
.model_intro_text p,
.model_pipeline_section .sub_common_title p,
.pilot_advisory_section .sub_common_title p,
.pilot_card_ui_section .sub_common_title p,
.pilot_intro_text p,
.pipeline_intro_text p,
.sub_common_title p,
.sub_title p,
.twin_intro_text p {
	font-size: var(--fs-body-large);
}

.core_environment_box p,
.energyflex_matrix th,
.energyflex_matrix td,
.energyflex_pipeline_column li,
.energyflex_pipeline_head span,
.energyflex_step_head span,
.energyflex_step_head strong,
.energyflex_workflow_item,
.insight_overview_text li,
.key_model_card p,
.model_output_card strong,
.pipeline_flow_card strong,
.pipeline_flow_side_item strong,
.pipeline_overview_body p,
.sub_basic_card_text,
.sub_visual_top .txt ul li,
.twin_overview_text li {
	font-size: var(--fs-body);
}

.core_cta_list a,
.energyflex_intro_buttons a,
.feature_cta_list a,
.model_cta_list a,
.pipeline_cta_list a,
.solution_depth_nav a,
.sub_cta_list a {
	font-size: var(--fs-button);
}

.core_feature_item strong,
.energyflex_step_head p,
.energyflex_workflow_item small,
.feature_cloud_item strong,
.pilot_card_ui_grid .sub_basic_card_title,
.pilot_modules_grid .sub_basic_card_title,
.pipeline_interoperability p,
.pipeline_interoperability strong,
.sub_basic_grid_six .sub_basic_card_title,
.sub_icon_card_text,
.sub_image_card_text {
	font-size: var(--fs-caption);
}


.sub_page {
	position: relative;
	background: #010827;
	color: #fff;
}


.sub_page * {
	box-sizing: border-box;
}


.sub_page img {
	max-width: 100%;
	vertical-align: top;
}


.sub_page a {
	color: inherit;
	text-decoration: none;
}


.inner_w {
	width: 100%;
	padding: 0 14rem;
}


.sub_common_title {
	margin-bottom: 60px;
}


.sub_common_title h2 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.035em;
	word-break: keep-all;
}


.sub_common_title p {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
	line-height: 1.6;
}


/* ==================================================
	01. HERO
================================================== */

.core_hero {
	position: relative;
	padding-top: 240px;
	background: #010827;
}


.core_hero_text {
	padding-bottom: 70px;
}


.core_hero_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}


.core_hero_text p {
	max-width: 1240px;
	margin: 30px 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-weight: 400;
	line-height: 1.65;
}


.core_hero_image {
	position: relative;
	width: 100%;
	height: 620px;
	overflow: hidden;
}


.core_hero_image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.08) 0%,
			rgba(1, 8, 39, 0.14) 55%,
			rgba(1, 8, 39, 0.42) 100%
		);
}


.core_hero_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: coreHeroScale 3.5s ease-out forwards;
}


@keyframes coreHeroScale {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. ASSET CARDS
================================================== */

.core_assets_section {
	background: #010827;
}


.core_asset_grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}


.core_asset_card {
	position: relative;
	height: 250px;
	padding: 30px;
	border: 1px solid rgba(67, 104, 190, 0.35);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	overflow: hidden;
	background: linear-gradient(
			135deg,
			rgba(12, 27, 70, 0.96),
			rgba(7, 18, 54, 0.96)
		);
	transition: background-color 0.35s ease,
		border-color 0.35s ease,
		transform 0.35s ease,
		box-shadow 0.35s ease;
}


.core_asset_card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.98),
			rgba(240, 244, 255, 0.98)
		);
	opacity: 0;
	transition: opacity 0.35s ease;
}


.core_asset_icon,
.core_asset_card strong {
	position: relative;
	z-index: 2;
}


.core_asset_icon {
	align-self: flex-end;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: background-color 0.35s ease,
		transform 0.35s ease;
}


.core_asset_icon img {
	max-width: 25px;
	max-height: 25px;
}


.core_asset_card strong {
	color: #fff;
	font-weight: 700;
	transition: color 0.35s ease;
}


.core_asset_card:hover,
.core_asset_card.active {
	border-color: #fff;
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24);
}


.core_asset_card:hover::before,
.core_asset_card.active::before {
	opacity: 1;
}


.core_asset_card:hover strong,
.core_asset_card.active strong {
	color: #1e5eff;
}


.core_asset_card:hover .core_asset_icon,
.core_asset_card.active .core_asset_icon {
	background: #1e5eff;
	transform: translateY(-3px);
}


.core_asset_card.active .core_asset_icon img,
.core_asset_card:hover .core_asset_icon img {
	filter: brightness(0) invert(1);
}


/* ==================================================
	03. OPERATING ENVIRONMENT
================================================== */

.core_environment_section {
	background: #010827;
}


.core_environment {
	position: relative;
}


.core_environment_grid {
	display: grid;
	grid-template-columns: 1fr 220px 1fr;
	gap: 70px;
	align-items: center;
}


.core_environment_side {
	display: flex;
	flex-direction: column;
	gap: 34px;
}


.core_environment_box {
	position: relative;
	min-height: 150px;
	padding: 34px;
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 8px;
	background: rgba(4, 13, 48, 0.82);
}


.core_environment_box strong {
	display: block;
	color: #fff;
	font-weight: 700;
}


.core_environment_box p {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.5;
}


.core_environment_side.left .core_environment_box::after,
.core_environment_side.right .core_environment_box::before {
	content: "";
	position: absolute;
	top: 50%;
	width: 70px;
	height: 1px;
	border-top: 1px dashed rgba(255, 255, 255, 0.35);
}


.core_environment_side.left .core_environment_box::after {
	right: -70px;
}


.core_environment_side.right .core_environment_box::before {
	left: -70px;
}


.core_environment_center {
	display: flex;
	justify-content: center;
}


.core_center_card {
	width: 180px;
	height: 240px;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	box-shadow: 0 20px 50px rgba(30, 94, 255, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.15);
}


.core_center_icon {
	width: 82px;
	height: 82px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.core_center_icon img {
	max-width: 72px;
	max-height: 72px;
}


.core_center_card strong {
	margin-top: 20px;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}


.core_environment_summary {
	margin-top: 55px;
	padding: 36px 45px;
	border-radius: 8px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 60px;
	align-items: center;
	background: rgba(38, 48, 85, 0.85);
}


.core_environment_copy p {
	margin: 0;
	color: #fff;
	font-weight: 600;
	line-height: 1.55;
}


.core_environment_features {
	display: flex;
	align-items: stretch;
}


.core_feature_item {
	min-width: 145px;
	padding: 0 30px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	text-align: center;
}


.core_feature_item:first-child {
	border-left: 0;
}


.core_feature_icon {
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.core_feature_icon img {
	max-width: 28px;
	max-height: 28px;
}


.core_feature_item strong {
	display: block;
	margin-top: 15px;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 500;
	line-height: 1.4;
}


/* ==================================================
	04. ARCHITECTURE
================================================== */

.core_architecture_section {
	background: #010827;
}


.core_architecture_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}


.core_architecture_card {
	position: relative;
	height: 260px;
	border-radius: 10px;
	display: block;
	overflow: hidden;
	background: #091538;
}


.core_architecture_image {
	position: absolute;
	inset: 0;
}


.core_architecture_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease,
		filter 0.8s ease;
}


.core_architecture_card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
			0deg,
			rgba(2, 8, 32, 0.88) 0%,
			rgba(2, 8, 32, 0.28) 60%,
			rgba(2, 8, 32, 0.08) 100%
		);
}


.core_architecture_content {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 27px;
	z-index: 2;
}


.core_architecture_content strong {
	display: block;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}


.core_architecture_content p {
	margin: 9px 0 0;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.45;
}


.core_architecture_card:hover .core_architecture_image img {
	transform: scale(1.07);
	filter: brightness(1.08);
}


.core_architecture_card:hover .core_architecture_content strong {
	color: #00d1ff;
}


/* ==================================================
	05. CTA
================================================== */

.core_cta_section {
	padding: 30px 0 160px;
	background: #010827;
}


.core_cta_list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}


.core_cta_list a {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-weight: 700;
	transition: background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.core_cta_list a:hover {
	background: #00aeea;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 209, 255, 0.25);
}


/* ==================================================
	SCROLL MOTION INITIAL
================================================== */

.js_motion_item {
	opacity: 0;
	transform: translateY(60px);
}


/* ==================================================
	SENSOR TO AI DATA PIPELINE
================================================== */

.pipeline_page {
	position: relative;
	background: #010827;
	color: #fff;
}


.pipeline_page * {
	box-sizing: border-box;
}


.pipeline_page img {
	max-width: 100%;
	vertical-align: top;
}


.pipeline_page a {
	color: inherit;
	text-decoration: none;
}


/* ==================================================
	COMMON TITLE
================================================== */


/* ==================================================
	01. INTRO
================================================== */

.pipeline_intro {
	position: relative;
	padding-top: 230px;
	background: #010827;
}


.pipeline_intro_text {
	padding-bottom: 65px;
}


.pipeline_intro_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.035em;
	word-break: keep-all;
}


.pipeline_intro_text p {
	margin: 28px 0 0;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 400;
	line-height: 1.65;
	word-break: keep-all;
}


.pipeline_intro_visual {
	position: relative;
	width: 100%;
	height: 610px;
	overflow: hidden;
}


.pipeline_intro_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	animation: pipelineVisualZoom 4s ease-out forwards;
}


.pipeline_intro_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.12) 0%,
			rgba(1, 8, 39, 0.04) 55%,
			rgba(1, 8, 39, 0.28) 100%
		);
}


@keyframes pipelineVisualZoom {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. OVERVIEW
================================================== */

.pipeline_overview_section {
	background: #010827;
}


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


.pipeline_overview_item {
	min-width: 0;
}


.pipeline_overview_head {
	min-height: 96px;
	padding: 20px 25px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(41, 50, 86, 0.85);
	text-align: center;
}


.pipeline_overview_head strong {
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
}


.pipeline_overview_body {
	min-height: 120px;
	margin-top: 12px;
	padding: 25px;
	border: 1px solid rgba(77, 101, 170, 0.2);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(3, 12, 47, 0.72);
	text-align: center;
}


.pipeline_overview_body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.5;
}


/* ==================================================
	03. FLOW PIPELINE
================================================== */

.pipeline_flow_section {
	padding-top: 80px;
	background: #010827;
}


.pipeline_flow {
	width: 100%;
	overflow-x: auto;
	padding-bottom: 8px;
}


.pipeline_flow::-webkit-scrollbar {
	height: 4px;
}


.pipeline_flow_main {
	min-width: 1180px;
	display: flex;
	align-items: stretch;
	gap: 12px;
}


.pipeline_flow_card {
	position: relative;
	width: 150px;
	min-height: 290px;
	padding: 30px 16px;
	border: 1px solid rgba(67, 104, 190, 0.3);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(3, 12, 47, 0.78);
	text-align: center;
}


.pipeline_flow_card_wide {
	width: 180px;
}


.pipeline_flow_icon {
	width: 50px;
	height: 50px;
	margin-bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.pipeline_flow_icon img {
	max-width: 42px;
	max-height: 42px;
	object-fit: contain;
}


.pipeline_flow_card strong,
.pipeline_flow_side_item strong {
	color: #fff;
	font-weight: 600;
	line-height: 1.45;
}


.pipeline_flow_arrow {
	position: relative;
	flex: 0 0 17px;
	align-self: center;
	height: 1px;
	background: rgba(255, 255, 255, 0.28);
}


.pipeline_flow_arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
	transform: translateY(-50%) rotate(45deg);
}


.pipeline_flow_center {
	flex: 1 1 auto;
	min-width: 450px;
	display: flex;
	flex-direction: column;
}


.pipeline_flow_top {
	display: flex;
	align-items: stretch;
	gap: 12px;
}


.pipeline_flow_top .pipeline_flow_card {
	flex: 1;
	width: auto;
	min-height: 205px;
}


.pipeline_interoperability {
	position: relative;
	min-height: 82px;
	margin-top: 12px;
	padding: 18px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(41, 50, 86, 0.9);
	text-align: center;
}


.pipeline_interoperability::before,
.pipeline_interoperability::after {
	content: "";
	position: absolute;
	top: -13px;
	width: 1px;
	height: 13px;
	background: rgba(255, 255, 255, 0.3);
}


.pipeline_interoperability::before {
	left: 25%;
}


.pipeline_interoperability::after {
	right: 25%;
}


.pipeline_interoperability strong {
	color: #fff;
	font-weight: 700;
}


.pipeline_interoperability p {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.52);
}


.pipeline_flow_side {
	width: 150px;
	border: 1px solid rgba(67, 104, 190, 0.3);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	background: rgba(3, 12, 47, 0.78);
}


.pipeline_flow_side_item {
	flex: 1;
	padding: 25px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}


.pipeline_flow_side_item + .pipeline_flow_side_item {
	border-top: 1px solid rgba(67, 104, 190, 0.22);
}


.pipeline_flow_side_item .pipeline_flow_icon {
	margin-bottom: 16px;
}


/* ==================================================
	04. DATA QUALITY
================================================== */

.pipeline_quality_section {
	padding-top: 80px;
	background: #010827;
}


.pipeline_quality_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}


.pipeline_quality_card {
	position: relative;
	height: 270px;
	border-radius: 12px;
	display: block;
	overflow: hidden;
	background: #071438;
}


.pipeline_quality_image {
	position: absolute;
	inset: 0;
}


.pipeline_quality_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease,
		filter 0.8s ease;
}


.pipeline_quality_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			0deg,
			rgba(2, 8, 32, 0.88) 0%,
			rgba(2, 8, 32, 0.18) 65%,
			rgba(2, 8, 32, 0.02) 100%
		);
}


.pipeline_quality_card strong {
	position: absolute;
	left: 25px;
	right: 25px;
	bottom: 24px;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}


.pipeline_quality_card:hover .pipeline_quality_image img {
	transform: scale(1.07);
	filter: brightness(1.08);
}


.pipeline_quality_card:hover strong {
	color: #00d1ff;
}


/* ==================================================
	05. CTA
================================================== */

.pipeline_cta_section {
	padding: 10px 0 160px;
	background: #010827;
}


.pipeline_cta_list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}


.pipeline_cta_list a {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	transition: background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.pipeline_cta_list a:hover {
	background: #00aeea;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 209, 255, 0.22);
}


/* ==================================================
	PHYSICAL FEATURE ENGINEERING
================================================== */

.feature_page {
	position: relative;
	background: #010827;
	color: #fff;
}


.feature_page * {
	box-sizing: border-box;
}


.feature_page img {
	max-width: 100%;
	vertical-align: top;
}


.feature_page a {
	color: inherit;
	text-decoration: none;
}


/* ==================================================
	01. INTRO
================================================== */

.feature_intro {
	position: relative;
	padding-top: 220px;
	background: #010827;
}


.feature_intro_text {
	padding-bottom: 60px;
}


.feature_intro_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.035em;
	word-break: keep-all;
}


.feature_intro_text p {
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.58);
	font-weight: 400;
	line-height: 1.65;
	word-break: keep-all;
}


.feature_intro_visual {
	position: relative;
	width: 100%;
	height: 610px;
	overflow: hidden;
}


.feature_intro_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	animation: featureVisualZoom 4s ease-out forwards;
}


.feature_intro_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.06) 0%,
			rgba(1, 8, 39, 0.04) 55%,
			rgba(1, 8, 39, 0.28) 100%
		);
}


@keyframes featureVisualZoom {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. PARAMETERS
================================================== */

.feature_parameters_section {
	background: #010827;
}


.feature_parameter_grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}


.feature_parameter_card {
	position: relative;
	height: 225px;
	padding: 28px 25px;
	border: 1px solid rgba(67, 104, 190, 0.35);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	overflow: hidden;
	background: linear-gradient(
			135deg,
			rgba(12, 27, 70, 0.96),
			rgba(7, 18, 54, 0.96)
		);
	transition: border-color 0.35s ease,
		transform 0.35s ease,
		box-shadow 0.35s ease;
}


.feature_parameter_card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	transition: opacity 0.35s ease;
}


.feature_parameter_icon,
.feature_parameter_card strong {
	position: relative;
	z-index: 2;
}


.feature_parameter_icon {
	align-self: flex-end;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: background-color 0.35s ease,
		transform 0.35s ease;
}


.feature_parameter_icon img {
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
}


.feature_parameter_card strong {
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	transition: color 0.35s ease;
}


.feature_parameter_card:hover,
.feature_parameter_card.active {
	border-color: #fff;
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}


.feature_parameter_card:hover::before,
.feature_parameter_card.active::before {
	opacity: 1;
}


.feature_parameter_card:hover strong,
.feature_parameter_card.active strong {
	color: #1e5eff;
}


.feature_parameter_card:hover .feature_parameter_icon,
.feature_parameter_card.active .feature_parameter_icon {
	background: #1e5eff;
	transform: translateY(-3px);
}


.feature_parameter_card:hover .feature_parameter_icon img,
.feature_parameter_card.active .feature_parameter_icon img {
	filter: brightness(0) invert(1);
}


/* ==================================================
	03. GOVERNANCE
================================================== */

.feature_governance_section {
	padding-top: 80px;
	background: #010827;
}


.feature_governance_wrap {
	padding: 28px;
	border: 1px solid rgba(67, 104, 190, 0.18);
	border-radius: 12px;
	background: rgba(2, 11, 43, 0.5);
}


.feature_governance_image_box {
	position: relative;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	background: #020d33;
}


.feature_governance_image_box img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	04. CLOUD
================================================== */

.feature_cloud_section {
	padding-top: 80px;
	background: #010827;
}


.feature_cloud_section .sub_common_title p {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.5;
}


.feature_cloud_bar {
	min-height: 175px;
	padding: 35px 45px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	background: rgba(42, 52, 91, 0.86);
}


.feature_cloud_evidence {
	display: flex;
	align-items: center;
	gap: 25px;
}


.feature_cloud_evidence_icon {
	width: 62px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.feature_cloud_evidence_icon img {
	max-width: 58px;
	max-height: 58px;
}


.feature_cloud_evidence strong {
	color: #fff;
	font-weight: 700;
}


.feature_cloud_items {
	display: flex;
	align-items: stretch;
}


.feature_cloud_item {
	min-width: 160px;
	padding: 0 35px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}


.feature_cloud_item span {
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.feature_cloud_item span img {
	max-width: 28px;
	max-height: 28px;
}


.feature_cloud_item strong {
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.76);
	font-weight: 500;
	line-height: 1.4;
}


/* ==================================================
	05. APPLICATION
================================================== */

.feature_application_section {
	padding-top: 80px;
	background: #010827;
}


.feature_application_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}


.feature_application_card {
	position: relative;
	height: 250px;
	border-radius: 12px;
	display: block;
	overflow: hidden;
	background: #071438;
}


.feature_application_image {
	position: absolute;
	inset: 0;
}


.feature_application_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease,
		filter 0.8s ease;
}


.feature_application_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			0deg,
			rgba(2, 8, 32, 0.88) 0%,
			rgba(2, 8, 32, 0.13) 65%,
			rgba(2, 8, 32, 0.02) 100%
		);
}


.feature_application_card strong {
	position: absolute;
	left: 25px;
	right: 25px;
	bottom: 23px;
	z-index: 2;
	color: #fff;
	font-weight: 700;
}


.feature_application_card:hover .feature_application_image img {
	transform: scale(1.07);
	filter: brightness(1.08);
}


.feature_application_card:hover strong {
	color: #00d1ff;
}


/* ==================================================
	06. CTA
================================================== */

.feature_cta_section {
	padding: 10px 0 160px;
	background: #010827;
}


.feature_cta_list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}


.feature_cta_list a {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	transition: background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.feature_cta_list a:hover {
	background: #00aeea;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 209, 255, 0.22);
}


/* ==================================================
	AI MODEL LIBRARY
================================================== */

.model_library_page {
	position: relative;
	background: #010827;
	color: #fff;
}


.model_library_page * {
	box-sizing: border-box;
}


.model_library_page img {
	max-width: 100%;
	vertical-align: top;
}


.model_library_page a {
	color: inherit;
	text-decoration: none;
}


/* ==================================================
	01. INTRO
================================================== */

.model_intro {
	position: relative;
	padding-top: 220px;
	background: #010827;
}


.model_intro_text {
	padding-bottom: 58px;
}


.model_intro_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}


.model_intro_text p {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.56);
	font-weight: 400;
	line-height: 1.7;
	word-break: keep-all;
}


.model_intro_visual {
	position: relative;
	width: 100%;
	height: 610px;
	overflow: hidden;
}


.model_intro_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: modelVisualZoom 4s ease-out forwards;
}


.model_intro_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.06) 0%,
			rgba(1, 8, 39, 0.03) 55%,
			rgba(1, 8, 39, 0.26) 100%
		);
}


@keyframes modelVisualZoom {
	from {
		transform: scale(1.08);
	}
	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. SENSOR TO AI PIPELINE
================================================== */

.model_pipeline_section {
	background: #010827;
}


.model_pipeline_section .sub_common_title p {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.48);
	line-height: 1.6;
}


.model_pipeline_wrap {
	position: relative;
	width: 100%;
	padding: 0px;
	border: 1px solid rgba(67, 104, 190, 0.22);
	border-radius: 12px;
	background: rgba(2, 11, 43, 0.55);
}


.model_pipeline_image {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 9px;
}


.model_pipeline_image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	03. KEY MODEL CARDS
================================================== */

.key_model_section {
	padding-top: 85px;
	background: #010827;
}


.key_model_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}


.key_model_card {
	position: relative;
	min-height: 245px;
	padding: 30px 30px 28px;
	border: 1px solid rgba(67, 104, 190, 0.3);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	background: linear-gradient(
			135deg,
			rgba(12, 27, 70, 0.96),
			rgba(7, 18, 54, 0.96)
		);
	overflow: hidden;
	transition: border-color 0.35s ease,
		transform 0.35s ease,
		box-shadow 0.35s ease;
}


.key_model_card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	transition: opacity 0.35s ease;
}


.key_model_icon,
.key_model_card strong,
.key_model_card p {
	position: relative;
	z-index: 2;
}


.key_model_icon {
	align-self: flex-end;
	width: 48px;
	height: 48px;
	margin-bottom: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: background-color 0.35s ease,
		transform 0.35s ease;
}


.key_model_icon img {
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
}


.key_model_card strong {
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	transition: color 0.35s ease;
}


.key_model_card p {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.55;
	transition: color 0.35s ease;
}


.key_model_card:hover,
.key_model_card.active {
	border-color: #fff;
	transform: translateY(-6px);
	box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24);
}


.key_model_card:hover::before,
.key_model_card.active::before {
	opacity: 1;
}


.key_model_card:hover strong,
.key_model_card.active strong {
	color: #1e5eff;
}


.key_model_card:hover p,
.key_model_card.active p {
	color: rgba(23, 33, 71, 0.72);
}


.key_model_card:hover .key_model_icon,
.key_model_card.active .key_model_icon {
	background: #1e5eff;
	transform: translateY(-3px);
}


.key_model_card:hover .key_model_icon img,
.key_model_card.active .key_model_icon img {
	filter: brightness(0) invert(1);
}


/* ==================================================
	04. OUTPUT EXAMPLES
================================================== */

.model_output_section {
	padding-top: 90px;
	background: #010827;
}


.model_output_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}


.model_output_card {
	position: relative;
	height: 200px;
	border-radius: 12px;
	display: block;
	overflow: hidden;
	background: #071438;
}


.model_output_image {
	position: absolute;
	inset: 0;
}


.model_output_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease,
		filter 0.8s ease;
}


.model_output_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			0deg,
			rgba(2, 8, 32, 0.86) 0%,
			rgba(2, 8, 32, 0.14) 62%,
			rgba(2, 8, 32, 0.02) 100%
		);
}


.model_output_card strong {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 22px;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}


.model_output_card:hover .model_output_image img {
	transform: scale(1.07);
	filter: brightness(1.08);
}


.model_output_card:hover strong {
	color: #00d1ff;
}


/* ==================================================
	05. CTA
================================================== */

.model_cta_section {
	padding: 14px 0 160px;
	background: #010827;
}


.model_cta_list {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}


.model_cta_list a {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	transition: background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.model_cta_list a:hover {
	background: #00aeea;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 209, 255, 0.22);
}


/* ==================================================
	COMMON IMAGE CARD
================================================== */

.sub_image_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}


.sub_image_card {
	position: relative;
	height: 250px;
	border-radius: 12px;
	display: block;
	overflow: hidden;
	background: #071438;
}


.sub_image_card_image {
	position: absolute;
	inset: 0;
}


.sub_image_card_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease,
		filter 0.8s ease;
}


.sub_image_card_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			0deg,
			rgba(2, 8, 32, 0.88) 0%,
			rgba(2, 8, 32, 0.16) 65%,
			rgba(2, 8, 32, 0.02) 100%
		);
}


.sub_image_card_content {
	position: absolute;
	left: 25px;
	right: 25px;
	bottom: 23px;
	z-index: 2;
}


.sub_image_card_title {
	display: block;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	transition: color 0.3s ease;
}


.sub_image_card_text {
	margin: 9px 0 0;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.45;
}


.sub_image_card:hover .sub_image_card_image img {
	transform: scale(1.07);
	filter: brightness(1.08);
}


.sub_image_card:hover .sub_image_card_title {
	color: #00d1ff;
}


/* ==================================================
	PHYSICALINK INSIGHT
================================================== */

.insight_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. INTRO
================================================== */

.insight_intro {
	position: relative;
	padding-top: 220px;
	background: #010827;
}


.insight_intro_text {
	padding-bottom: 58px;
}


.insight_intro_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}


.insight_intro_text p {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.56);
	font-weight: 400;
	line-height: 1.7;
	word-break: keep-all;
}


.insight_intro_visual {
	position: relative;
	width: 100%;
	height: 610px;
	overflow: hidden;
}


.insight_intro_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: insightVisualZoom 4s ease-out forwards;
}


.insight_intro_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.05) 0%,
			rgba(1, 8, 39, 0.02) 58%,
			rgba(1, 8, 39, 0.25) 100%
		);
}


@keyframes insightVisualZoom {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. OVERVIEW
================================================== */

.insight_overview_section {
	background: #010827;
}


.insight_overview_text {
	margin-bottom: 45px;
}


.insight_overview_text ul {
	margin: 0;
	padding-left: 20px;
}


.insight_overview_text li {
	color: rgba(255, 255, 255, 0.72);
	font-weight: 400;
	line-height: 1.65;
}


.insight_overview_text li + li {
	margin-top: 4px;
}


.insight_overview_text strong {
	color: #fff;
	font-weight: 700;
}


.insight_dashboard_image {
	position: relative;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}


.insight_dashboard_image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	03. DASHBOARD
================================================== */

.insight_dashboard_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	04. REPORT
================================================== */

.insight_report_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	05. ROLE BASED VIEW
================================================== */

.insight_role_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	COMMON ICON CARD
================================================== */

.sub_icon_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}


.sub_icon_card {
	min-height: 285px;
	padding: 45px 30px 35px;
	border: 1px solid rgba(67, 104, 190, 0.34);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
			135deg,
			rgba(12, 27, 70, 0.96),
			rgba(7, 18, 54, 0.96)
		);
	text-align: center;
	transition: transform 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}


.sub_icon_card_icon {
	width: 72px;
	height: 72px;
	margin-bottom: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}


.sub_icon_card_icon img {
	max-width: 32px;
	max-height: 32px;
	object-fit: contain;
}


.sub_icon_card_title {
	display: block;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}


.sub_icon_card_text {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.56);
	font-weight: 400;
	line-height: 1.5;
}


.sub_icon_card:hover {
	border-color: #1e5eff;
	transform: translateY(-6px);
	box-shadow: 0 20px 42px rgba(0, 0, 0, 0.25);
}


/* ==================================================
	DIGITAL TWIN SYNC
================================================== */

.twin_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. INTRO
================================================== */

.twin_intro {
	position: relative;
	padding-top: 220px;
	background: #010827;
}


.twin_intro_text {
	padding-bottom: 58px;
}


.twin_intro_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}


.twin_intro_text p {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.56);
	font-weight: 400;
	line-height: 1.7;
	word-break: keep-all;
}


.twin_intro_visual {
	position: relative;
	width: 100%;
	height: 610px;
	overflow: hidden;
}


.twin_intro_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: twinVisualZoom 4s ease-out forwards;
}


.twin_intro_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.05) 0%,
			rgba(1, 8, 39, 0.02) 58%,
			rgba(1, 8, 39, 0.25) 100%
		);
}


@keyframes twinVisualZoom {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. OVERVIEW
================================================== */

.twin_overview_section {
	background: #010827;
}


.twin_overview_text {
	margin-bottom: 45px;
}


.twin_overview_text ul {
	margin: 0;
	padding-left: 20px;
}


.twin_overview_text li {
	color: rgba(255, 255, 255, 0.72);
	font-weight: 400;
	line-height: 1.65;
}


.twin_overview_text li + li {
	margin-top: 4px;
}


.twin_overview_text strong {
	color: #fff;
	font-weight: 700;
}


.twin_overview_image {
	position: relative;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}


.twin_overview_image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	03. KEY MODEL CARDS
================================================== */

.twin_cards_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	COMMON BASIC CARD
================================================== */

.sub_basic_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}


.sub_basic_card {
	position: relative;
	min-height: 245px;
	padding: 30px 30px 28px;
	border: 1px solid rgba(67, 104, 190, 0.3);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	background: linear-gradient(
			135deg,
			rgba(12, 27, 70, 0.96),
			rgba(7, 18, 54, 0.96)
		);
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.35s ease,
		transform 0.35s ease,
		box-shadow 0.35s ease;
	justify-content: space-between;
}


.sub_basic_card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	transition: opacity 0.35s ease;
}


.sub_basic_card_icon,
.sub_basic_card_title,
.sub_basic_card_text {
	position: relative;
	z-index: 2;
}


.sub_basic_card_icon {
	align-self: flex-end;
	width: 48px;
	height: 48px;
	margin-bottom: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	transition: background-color 0.35s ease,
		transform 0.35s ease;
}


.sub_basic_card_icon img {
	max-width: 24px;
	max-height: 24px;
	object-fit: contain;
}


.sub_basic_card_title {
	display: block;
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	transition: color 0.35s ease;
}


.sub_basic_card_text {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-weight: 400;
	line-height: 1.55;
	transition: color 0.35s ease;
}


.sub_basic_card:hover,
.sub_basic_card.active {
	border-color: #fff;
	transform: translateY(-6px);
	box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24);
}


.sub_basic_card:hover::before,
.sub_basic_card.active::before {
	opacity: 1;
}


.sub_basic_card:hover .sub_basic_card_title,
.sub_basic_card.active .sub_basic_card_title {
	color: #1e5eff;
}


.sub_basic_card:hover .sub_basic_card_text,
.sub_basic_card.active .sub_basic_card_text {
	color: rgba(23, 33, 71, 0.72);
}


.sub_basic_card:hover .sub_basic_card_icon,
.sub_basic_card.active .sub_basic_card_icon {
	background: #1e5eff;
	transform: translateY(-3px);
}


.sub_basic_card:hover .sub_basic_card_icon img,
.sub_basic_card.active .sub_basic_card_icon img {
	filter: brightness(0) invert(1);
}


/* ==================================================
	05. CTA
================================================== */

.sub_cta_section {
	padding: 30px 0 160px;
	background: #010827;
}


.sub_cta_list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}


.sub_cta_list a {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-weight: 700;
	transition: background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}


.sub_cta_list a:hover {
	background: #00aeea;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 209, 255, 0.25);
}


/* ==================================================
	LIFECYCLE INTELLIGENCE
================================================== */

.lifecycle_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. INTRO
================================================== */

.lifecycle_intro {
	position: relative;
	padding-top: 220px;
	background: #010827;
}


.lifecycle_intro_text {
	padding-bottom: 58px;
}


.lifecycle_intro_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}


.lifecycle_intro_text p {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.56);
	font-weight: 400;
	line-height: 1.7;
	word-break: keep-all;
}


.lifecycle_intro_visual {
	position: relative;
	width: 100%;
	height: 610px;
	overflow: hidden;
}


.lifecycle_intro_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: lifecycleVisualZoom 4s ease-out forwards;
}


.lifecycle_intro_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.05) 0%,
			rgba(1, 8, 39, 0.02) 58%,
			rgba(1, 8, 39, 0.25) 100%
		);
}


@keyframes lifecycleVisualZoom {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. VALUE ACROSS TIME
================================================== */

.lifecycle_value_section {
	background: #010827;
}


.lifecycle_value_grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* ==================================================
	03. KEY SECTIONS
================================================== */

.lifecycle_key_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	04. APPLICABLE ASSETS
================================================== */

.lifecycle_assets_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	XAI + HITL GOVERNANCE
================================================== */

.governance_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. INTRO
================================================== */

.governance_intro {
	position: relative;
	padding-top: 220px;
	background: #010827;
}


.governance_intro_text {
	padding-bottom: 58px;
}


.governance_intro_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}


.governance_intro_text p {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.56);
	font-weight: 400;
	line-height: 1.7;
	word-break: keep-all;
}


.governance_intro_visual {
	position: relative;
	width: 100%;
	height: 610px;
	overflow: hidden;
}


.governance_intro_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: governanceVisualZoom 4s ease-out forwards;
}


.governance_intro_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.05) 0%,
			rgba(1, 8, 39, 0.02) 58%,
			rgba(1, 8, 39, 0.25) 100%
		);
}


@keyframes governanceVisualZoom {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. KEY SECTIONS
================================================== */

.governance_key_section {
	background: #010827;
}


/* ==================================================
	03. ADVISORY
================================================== */

.governance_advisory_section {
	padding-top: 80px;
	background: #010827;
}


.governance_advisory_section .sub_common_title p {
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.48);
	line-height: 1.6;
}


/* ==================================================
	04. GOVERNANCE FLOW
================================================== */

.governance_flow_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	COMMON DIAGRAM IMAGE
================================================== */

.sub_diagram_image {
	position: relative;
	width: 100%;
	border: 1px solid rgba(67, 104, 190, 0.18);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(2, 11, 43, 0.5);
	padding: 30px;
}


.sub_diagram_image img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	05. MOCKUP
================================================== */

.governance_mockup_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	06. PARAMETERS
================================================== */

.governance_parameters_section {
	padding-top: 80px;
	background: #010827;
}


.sub_basic_grid_six {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}


.sub_basic_grid_six .sub_basic_card_simple {
	min-height: 190px;
	padding: 24px 18px;
}


.sub_basic_grid_six .sub_basic_card_icon {
	width: 44px;
	height: 44px;
}


.sub_basic_grid_six .sub_basic_card_title {
	line-height: 1.4;
}


/* ==================================================
	PHYSICALINK PILOT
================================================== */

.pilot_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. INTRO
================================================== */

.pilot_intro {
	position: relative;
	padding-top: 220px;
	background: #010827;
}


.pilot_intro_text {
	padding-bottom: 58px;
}


.pilot_intro_text h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}


.pilot_intro_text p {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.56);
	font-weight: 400;
	line-height: 1.7;
	word-break: keep-all;
}


.pilot_intro_visual {
	position: relative;
	width: 100%;
	height: 610px;
	overflow: hidden;
}


.pilot_intro_visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: pilotVisualZoom 4s ease-out forwards;
}


.pilot_intro_dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
			180deg,
			rgba(1, 8, 39, 0.05) 0%,
			rgba(1, 8, 39, 0.02) 58%,
			rgba(1, 8, 39, 0.25) 100%
		);
}


@keyframes pilotVisualZoom {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}


/* ==================================================
	02. WORKFLOWS
================================================== */

.pilot_workflow_section {
	background: #010827;
}


/* ==================================================
	03. ADVISORY DIAGRAM
================================================== */

.pilot_advisory_section {
	padding-top: 80px;
	background: #010827;
}


.pilot_advisory_section .sub_common_title p {
	margin-top: 18px;
	color: rgba(255, 255, 255, 0.48);
	line-height: 1.6;
}


/* ==================================================
	04. LIFECYCLE DIAGRAM
================================================== */

.pilot_lifecycle_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	05. ADVISORY CARD UI
================================================== */

.pilot_card_ui_section {
	padding-top: 80px;
	background: #010827;
}


.pilot_card_ui_section .sub_common_title p {
	margin-top: 18px;
	color: rgba(255, 255, 255, 0.48);
	line-height: 1.6;
}


.pilot_card_ui_grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}


.pilot_card_ui_grid .sub_basic_card_simple {
	min-height: 205px;
	padding: 25px 20px;
}


.pilot_card_ui_grid .sub_basic_card_title {
	line-height: 1.45;
}


/* ==================================================
	06. ADVISORY MODULES
================================================== */

.pilot_modules_section {
	padding-top: 80px;
	background: #010827;
}


.pilot_modules_grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}


.pilot_modules_grid .sub_basic_card_simple {
	min-height: 205px;
	padding: 25px 17px;
}


.pilot_modules_grid .sub_basic_card_title {
	line-height: 1.45;
}


/* ==================================================
	ENERGYFLEX ADVISORY
================================================== */

.energyflex_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. SOLUTIONS 3DEPTH
================================================== */

.solution_depth_nav {
	position: relative;
	padding-top: 150px;
	background: #010827;
}


.solution_depth_nav ul {
	display: flex;
	align-items: center;
	gap: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}


.solution_depth_nav li {
	position: relative;
}


.solution_depth_nav a {
	position: relative;
	display: block;
	padding: 16px 0;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	transition: color 0.25s ease;
}


.solution_depth_nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: #00d1ff;
	transition: width 0.3s ease;
}


.solution_depth_nav li:hover a,
.solution_depth_nav li.active a {
	color: #00d1ff;
}


.solution_depth_nav li:hover a::after,
.solution_depth_nav li.active a::after {
	width: 100%;
}


/* ==================================================
	02. INTRO
================================================== */

.energyflex_intro {
	padding: 90px 0 120px;
	background: #010827;
}


.energyflex_intro_layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 90px;
	align-items: center;
}


.energyflex_intro_image {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}


.energyflex_intro_image img {
	display: block;
	width: 100%;
	height: auto;
}


.energyflex_intro_content h1 {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.035em;
}


.energyflex_intro_content p {
	margin: 28px 0 0;
	color: rgba(255, 255, 255, 0.58);
	line-height: 1.6;
}


.energyflex_intro_buttons {
	margin-top: 45px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}


.energyflex_intro_buttons a {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-weight: 700;
	transition: background-color 0.25s ease,
		transform 0.25s ease;
}


.energyflex_intro_buttons a:hover {
	background: #00aeea;
	transform: translateY(-3px);
}


/* ==================================================
	03. PHYSICAL REALITY
================================================== */

.energyflex_reality_section {
	background: #010827;
}


.energyflex_reality_section .sub_common_title p {
	margin-top: 22px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.65;
}


.energyflex_reality_section .sub_common_title strong {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
}


/* ==================================================
	04. ADVISORY PIPELINE
================================================== */

.energyflex_pipeline_section {
	padding-top: 80px;
	background: #010827;
}


.energyflex_pipeline_table {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}


.energyflex_pipeline_column {
	min-width: 0;
}


.energyflex_pipeline_head {
	min-height: 86px;
	padding: 17px 20px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.9);
	text-align: center;
}


.energyflex_pipeline_head span {
	color: #00d1ff;
	font-weight: 700;
}


.energyflex_pipeline_head strong {
	margin-top: 5px;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}


.energyflex_pipeline_column ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}


.energyflex_pipeline_column li {
	min-height: 70px;
	padding: 15px 18px;
	border: 1px solid rgba(67, 104, 190, 0.2);
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(3, 12, 47, 0.72);
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.5;
	text-align: center;
}


.energyflex_pipeline_column li + li {
	margin-top: 10px;
}


/* ==================================================
	05. PREDICTIVE STEPS
================================================== */

.energyflex_predictive_section {
	padding-top: 80px;
	background: #010827;
}


.energyflex_predictive_section .sub_common_title p {
	margin-top: 22px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.65;
}


.energyflex_step_grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 15px;
}


.energyflex_step_item {
	min-width: 0;
}


.energyflex_step_head {
	min-height: 145px;
	padding: 20px 15px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.86);
	text-align: center;
}


.energyflex_step_head span {
	color: #00d1ff;
	font-weight: 700;
}


.energyflex_step_head strong {
	margin-top: 6px;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}


.energyflex_step_head p {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, 0.46);
	line-height: 1.4;
}


.energyflex_step_image {
	height: 155px;
	margin-top: 12px;
	border: 1px solid rgba(67, 104, 190, 0.18);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: rgba(3, 12, 47, 0.7);
}


.energyflex_step_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* ==================================================
	06. GOVERNANCE
================================================== */

.energyflex_governance_section {
	padding-top: 80px;
	background: #010827;
}


.energyflex_governance_area h3 {
	margin: 0 0 22px;
	color: #fff;
	font-weight: 700;
}


.energyflex_workflow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto
		minmax(0, 1fr) auto
		minmax(0, 1fr) auto
		minmax(0, 1fr) auto
		minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}


.energyflex_workflow_item {
	min-height: 78px;
	padding: 15px;
	border-radius: 7px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.88);
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}


.energyflex_workflow_item small {
	color: rgba(255, 255, 255, 0.55);
	font-weight: 400;
}


.energyflex_workflow > span {
	color: rgba(255, 255, 255, 0.65);
}


.energyflex_matrix_title {
	margin-top: 45px !important;
}


.energyflex_matrix {
	width: 100%;
	overflow-x: auto;
}


.energyflex_matrix table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}


.energyflex_matrix th,
.energyflex_matrix td {
	padding: 15px 18px;
	border: 1px solid rgba(67, 104, 190, 0.2);
	line-height: 1.45;
	text-align: center;
}


.energyflex_matrix th {
	background: rgba(42, 52, 91, 0.9);
	color: rgba(255, 255, 255, 0.84);
	font-weight: 700;
}


.energyflex_matrix td {
	background: rgba(3, 12, 47, 0.72);
	color: rgba(255, 255, 255, 0.55);
}


.energyflex_matrix tr.recommended td {
	color: #00d1ff;
}


/* ==================================================
	07. DECISION WORKFLOW
================================================== */

.energyflex_decision_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	MARKETS
================================================== */
.markets_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. MARKETS 3DEPTH
================================================== */
.markets_depth_nav ul {
	gap: 42px;
}


/* ==================================================
	02. INTRO
================================================== */
.markets_intro {
	padding: 90px 0 120px;
	background: #010827;
}

.markets_intro_layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 90px;
	align-items: center;
}

.markets_intro_image {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}

.markets_intro_image img {
	display: block;
	width: 100%;
	height: auto;
}

.markets_intro_content h1 {
	margin: 0;
	color: #fff;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.035em;
	word-break: keep-all;
}

.markets_intro_content p {
	margin: 28px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
}

.markets_intro_buttons {
	margin-top: 42px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.markets_intro_buttons a {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.markets_intro_buttons a:hover {
	background: #00aeea;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 209, 255, 0.2);
}


/* ==================================================
	03. HIDDEN PHYSICAL COST
================================================== */
.markets_cost_section {
	background: #010827;
}

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

.markets_quadrant_item {
	min-width: 0;
}

.markets_quadrant_head {
	min-height: 96px;
	padding: 20px 24px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.88);
	text-align: center;
}

.markets_quadrant_head span {
	color: #00d1ff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.markets_quadrant_head strong {
	margin-top: 5px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.markets_quadrant_body {
	min-height: 145px;
	margin-top: 12px;
	padding: 25px 22px;
	border: 1px solid rgba(67, 104, 190, 0.2);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(3, 12, 47, 0.72);
	text-align: center;
}

.markets_quadrant_body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
}


/* ==================================================
	04. SENSOR TO AI PIPELINE
================================================== */
.markets_pipeline_section {
	padding-top: 80px;
	background: #010827;
}

.markets_pipeline_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.markets_pipeline_item {
	min-width: 0;
}

.markets_pipeline_head {
	min-height: 88px;
	padding: 18px 24px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.88);
	text-align: center;
}

.markets_pipeline_head span {
	color: #00d1ff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.markets_pipeline_head strong {
	margin-top: 5px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.markets_pipeline_body {
	min-height: 150px;
	margin-top: 12px;
	padding: 24px;
	border: 1px solid rgba(67, 104, 190, 0.2);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(3, 12, 47, 0.72);
	text-align: center;
}

.markets_pipeline_body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
}


/* ==================================================
	05. APPLICATION
================================================== */
.markets_application_section {
	padding-top: 80px;
	background: #010827;
}

.markets_application_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 55px 24px;
}

.markets_application_item {
	min-width: 0;
}

.markets_application_image {
	position: relative;
	height: 390px;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}

.markets_application_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.8s ease,
		filter 0.8s ease;
}

.markets_application_item:hover .markets_application_image img {
	transform: scale(1.04);
	filter: brightness(1.06);
}

.markets_application_content {
	padding-top: 22px;
}

.markets_application_content h3 {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	word-break: keep-all;
}

.markets_application_content ul {
	margin: 14px 0 0;
}

.markets_application_content li {
	color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	position: relative;
	padding-left: 15px;
}

.markets_application_content li:after{
	content: '·';
	position: absolute; left: 0;
	 top: 0
}

.markets_application_content li + li {
	margin-top: 5px;
}


/* ==================================================
	06. INTELLIGENCE MATRIX
================================================== */
.markets_matrix_section {
	padding-top: 80px;
	background: #010827;
}

.markets_matrix_wrap {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}

.markets_matrix_labels {
	padding-top: 68px;
	display: grid;
	grid-template-rows: repeat(3, minmax(100px, 1fr));
	gap: 12px;
}

.markets_matrix_labels strong {
	display: flex;
	align-items: center;
	color: rgba(255, 255, 255, 0.76);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.markets_matrix_grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 15px;
}

.markets_matrix_column {
	min-width: 0;
}

.markets_matrix_column h3 {
	min-height: 56px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.9);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.markets_matrix_column div {
	min-height: 100px;
	margin-top: 12px;
	padding: 18px 14px;
	border: 1px solid rgba(67, 104, 190, 0.2);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(3, 12, 47, 0.72);
	color: rgba(255, 255, 255, 0.62);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}


/* ==================================================
	07. ENERGYFLEX WORKFLOW
================================================== */
.markets_workflow_section {
	padding-top: 80px;
	background: #010827;
}

.markets_workflow_image {
	padding: 0;
}

.markets_workflow_image img {
	width: 100%;
}


/* ==================================================
	08. DIGITAL TWIN & INSIGHT
================================================== */
.markets_twin_section {
	padding-top: 80px;
	background: #010827;
}

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

.markets_twin_item {
	min-width: 0;
}

.markets_twin_image {
	position: relative;
	height: 350px;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}

.markets_twin_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.8s ease,
		filter 0.8s ease;
}

.markets_twin_item:hover .markets_twin_image img {
	transform: scale(1.04);
	filter: brightness(1.06);
}

.markets_twin_content {
	padding-top: 22px;
}

.markets_twin_content h3 {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.markets_twin_content p {
	margin: 12px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}


/* ==================================================
	PRODUCTS
================================================== */
.products_page {
	position: relative;
	min-height: 100vh;
	background: #010827;
	color: #fff;
}

.products_section {
	padding: 140px 0 180px;
	background: #010827;
}


/* ==================================================
	CATEGORY
================================================== */
.products_category {
	margin-bottom: 100px;
}

.products_category ul {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 54px;
	list-style: none;
}

.products_category li {
	position: relative;
}

.products_category a {
	position: relative;
	display: block;
	padding: 16px 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	transition: color 0.3s ease;
}

.products_category a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background: #00d1ff;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

.products_category li:hover a,
.products_category li.active a {
	color: #00d1ff;
}

.products_category li:hover a::after,
.products_category li.active a::after {
	width: 100%;
}


/* ==================================================
	PRODUCT GRID
================================================== */
.products_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 65px 24px;
}

.products_item {
	min-width: 0;
}

.products_link {
	display: block;
}

.products_thumbnail {
	position: relative;
	height: 360px;
	border: 1px solid rgba(67, 104, 190, 0.25);
	border-radius: 18px;
	overflow: hidden;
	background: #061537;
}

.products_thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.8s ease,
		filter 0.8s ease;
}

.products_thumbnail_overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(1, 8, 39, 0.58);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.products_thumbnail_overlay span {
	min-width: 120px;
	padding: 13px 20px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 6px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	transform: translateY(15px);
	transition: transform 0.35s ease;
}

.products_name {
	margin: 24px 0 0;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.025em;
	word-break: keep-all;
	transition: color 0.3s ease;
}

.products_link:hover .products_thumbnail img {
	transform: scale(1.06);
	filter: brightness(0.78);
}

.products_link:hover .products_thumbnail_overlay {
	opacity: 1;
}

.products_link:hover .products_thumbnail_overlay span {
	transform: translateY(0);
}

.products_link:hover .products_name {
	color: #00d1ff;
}


/* 필터로 숨길 때 */
.products_item.is_hidden {
	display: none;
}


/* ==================================================
	PRODUCT DETAIL
================================================== */
.product_detail_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. CATEGORY
================================================== */
.product_depth_nav ul {
	gap: 42px;
}


/* ==================================================
	PRODUCT DETAIL INTRO
================================================== */
.product_detail_intro {
	padding: 90px 0 120px;
	background: #010827;
}

.product_detail_intro_layout {
	display: grid;
	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(0, 0.92fr);
	align-items: stretch;

}


/* ==================================================
	PRODUCT IMAGE
================================================== */
.product_detail_intro_image {
	position: relative;
	min-height: 510px;
	overflow: hidden;
	background: #061537;
}

.product_detail_intro_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==================================================
	PRODUCT INFORMATION
================================================== */
.product_detail_intro_content {
	min-width: 0;
	padding: 34px 0 34px 70px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.product_detail_intro_content h1 {
	margin: 0;
	color: #fff;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.48;
	letter-spacing: -0.035em;
	word-break: keep-all;
}

.product_detail_description {
	max-width: 620px;
	margin: 28px 0 0;
	color: rgba(255, 255, 255, 0.48);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	word-break: keep-all;
}


/* ==================================================
	PURCHASE FORM
================================================== */
.product_purchase_form {
	margin-top: 44px;
}

.product_purchase_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
}


/* ==================================================
	QUANTITY
================================================== */
.product_quantity {
	height: 44px;
	display: inline-grid;
	grid-template-columns: 44px 70px 44px;
	border: 1px solid rgba(67, 104, 190, 0.42);
	background: rgba(3, 12, 47, 0.8);
}

.product_quantity_button {
	width: 44px;
	height: 42px;
	padding: 0;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		color 0.25s ease;
}

.product_quantity_button:hover {
	background: rgba(30, 94, 255, 0.25);
	color: #00d1ff;
}

.product_quantity_input {
	width: 70px;
	height: 42px;
	padding: 0 8px;
	border: 0;
	border-left: 1px solid rgba(67, 104, 190, 0.35);
	border-right: 1px solid rgba(67, 104, 190, 0.35);
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 42px;
	text-align: center;
	outline: none;
	appearance: textfield;
	-moz-appearance: textfield;
}

.product_quantity_input::-webkit-inner-spin-button,
.product_quantity_input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}


/* ==================================================
	TOTAL PRICE
================================================== */
.product_total_price {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	color: #fff;
	white-space: nowrap;
}

.product_total_price_value {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.product_total_price span {
	margin-left: 2px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}


/* ==================================================
	PURCHASE BUTTONS
================================================== */
.product_detail_intro_buttons {
	margin-top: 45px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.product_detail_intro_buttons button,
.product_detail_intro_buttons a {
	min-width: 150px;
	min-height: 46px;
	padding: 11px 22px;
	border: 0;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.product_detail_intro_buttons button:hover,
.product_detail_intro_buttons a:hover {
	background: #00aeea;
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 209, 255, 0.2);
}


/* ==================================================
	03. DESIGN PARADIGM
================================================== */
.product_paradigm_section {
	background: #010827;
}

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

.product_paradigm_item {
	min-width: 0;
}

.product_paradigm_image {
	position: relative;
	height: 340px;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}

.product_paradigm_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}

.product_paradigm_item:hover .product_paradigm_image img {
	transform: scale(1.04);
}

.product_paradigm_content {
	padding-top: 22px;
}

.product_paradigm_content h3 {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
}

.product_paradigm_content ul {
	margin: 14px 0 0;

}

.product_paradigm_content li {
	color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	position: relative;
	padding-left: 15px
}

.product_paradigm_content li:after{
	content: '·';
	position: absolute;
	left: 0;
	top: 0
}


/* ==================================================
	04. BRAND & SAFETY
================================================== */
.product_guardrail_section {
	padding-top: 80px;
	background: #010827;
}

.product_color_system h3,
.product_binary_section h3 {
	margin: 0 0 25px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.product_color_grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

.product_color_item {
	min-width: 0;
}

.product_color_chip {
	display: block;
	width: 100%;
	height: 150px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
}

.color_background {
	background: #010827;
}

.color_architecture {
	background: #1e5eff;
}

.color_signal {
	background: #00d1ff;
}

.color_overlay {
	background: #18284f;
}

.color_safe {
	background: #37c95a;
}

.color_advisory {
	background: #ff7a16;
}

.product_color_item strong {
	display: block;
	margin-top: 14px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.product_color_item p {
	margin: 7px 0 0;
	color: rgba(255, 255, 255, 0.48);
	font-size: 14px;
	line-height: 1.4;
}

.product_binary_section {
	margin-top: 70px;
}

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

.product_binary_card {
	padding: 30px;
	border: 1px solid rgba(67, 104, 190, 0.24);
	border-radius: 10px;
	background: rgba(3, 12, 47, 0.72);
}

.product_binary_card h4 {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.product_binary_card ul {
	margin: 18px 0 0;
}

.product_binary_card li {
	color: rgba(255, 255, 255, 0.62);
	font-size: 16px;
	line-height: 1.6;
	position: relative;
	padding-left: 15px
}

.product_binary_card li:after{
	content: '·';
	position: absolute;
	left: 0;
	top: 0
}


/* ==================================================
	CONTINUOUS PIPELINE MATRIX
================================================== */
.product_pipeline_section {
	padding-top: 80px;
	background: #010827;
}

.product_pipeline_flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;

}

.product_pipeline_box {

	min-height: 145px;
	padding: 22px 16px;
	border: 1px solid rgba(67, 104, 190, 0.22);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.78);
	text-align: center;
}

.product_pipeline_box_wide {
	flex-basis: 170px;
}

.product_pipeline_box strong {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
}


/* ==================================================
	중앙 상하 2단 박스
================================================== */
.product_pipeline_stack {
	flex: 0 0 160px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.product_pipeline_stack_box {
	flex: none;
	width: 100%;
	min-height: 145px;
}

.product_pipeline_stack_box:first-child {
	min-height: 175px;
}

.product_pipeline_stack_box:last-child {
	min-height: 145px;
}


/* ==================================================
	화살표
================================================== */
.product_pipeline_arrow {
	position: relative;
	flex: 0 0 20px;
	height: 1px;
	background: #1E5EFF;
}

.product_pipeline_arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid #1e5eff;
	border-right: 2px solid #1e5eff;
	transform: translateY(-50%) rotate(45deg);
}


/* ==================================================
	마지막 CTA 박스
================================================== */
.product_pipeline_cta_box {
	flex-basis: 160px;
}


/* ==================================================
	가로 영역 보호
================================================== */
.product_pipeline_section .inner_w {
	overflow-x: auto;
	padding-bottom: 10px;
}

.product_pipeline_section .inner_w::-webkit-scrollbar {
	height: 5px;
}

.product_pipeline_section .inner_w::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
}

.product_pipeline_section .inner_w::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(30, 94, 255, 0.5);
}


/* ==================================================
	06. PLACEMENT MAP
================================================== */
.product_placement_section {
	padding-top: 80px;
	background: #010827;
}

.product_placement_image {
	padding: 0;
}


/* ==================================================
	07. SUB-MENU ENTRIES
================================================== */
.product_entries_section {
	padding-top: 80px;
	background: #010827;
}

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

.product_entry_card {
	display: block;
}

.product_entry_image {
	position: relative;
	border: 1px solid rgba(67, 104, 190, 0.22);
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}

.product_entry_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.7s ease;
}

.product_entry_card strong {
	display: block;
	margin-top: 18px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	transition: color 0.3s ease;
}

.product_entry_card:hover .product_entry_image img {
	transform: scale(1.04);
}

.product_entry_card:hover strong {
	color: #00d1ff;
}


/* ==================================================
	08. ECOSYSTEM HERO
================================================== */
.product_ecosystem_section {
	padding-top: 80px;
	background: #010827;
}

.product_ecosystem_image {
	padding: 0;
}


/* ==================================================
	09. CONNECTION PATH
================================================== */
.product_connection_section,
.product_sensor_family_section,
.product_hardware_section {
	padding-top: 80px;
	background: #010827;
}


/* ==================================================
	10. PRODUCT DETAIL HERO
================================================== */
.product_detail_hero_section {
	padding-top: 80px;
	background: #010827;
}

.product_detail_hero_image {
	padding: 0;
}


/* ==================================================
	11. SPECIFICATION
================================================== */
.product_specification_section {
	padding-top: 80px;
	background: #010827;
}

.product_specification_image {
	padding: 0;
}


/* ==================================================
	PRODUCT VISUAL GRID
	- 이미지와 텍스트가 분리된 제품형 레이아웃
================================================== */
.product_visual_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.product_visual_item {
	display: block;
	min-width: 0;
	color: #fff;
	text-decoration: none;
}

.product_visual_image {
	position: relative;
	width: 100%;
	aspect-ratio: 45 / 25;
	overflow: hidden;
	background: #020a24;
	border: 1px solid rgba(67, 104, 190, 0.18);
	border-radius: 16px;
}

.product_visual_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.6s ease,
		filter 0.6s ease;
}

.product_visual_title {
	display: block;
	margin-top: 18px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.02em;
	word-break: keep-all;
	transition: color 0.3s ease;
}

a.product_visual_item:hover .product_visual_image img {
	transform: scale(1.035);
	filter: brightness(1.06);
}

a.product_visual_item:hover .product_visual_title {
	color: #00d1ff;
}








/* ==================================================
	TECHNOLOGY
================================================== */
.technology_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. TECHNOLOGY INTRO
================================================== */
.technology_intro_section {
	padding-top: 180px;
	padding-bottom: 160px;
	background: #010827;
}

.technology_intro_title {
	margin-bottom: 58px;
}

.technology_intro_title h1 {
	margin: 0;
	color: #fff;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.035em;
	word-break: keep-all;
}

.technology_intro_title p {
	max-width: 1280px;
	margin: 28px 0 0;
	color: rgba(255, 255, 255, 0.64);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	word-break: keep-all;
}


/* ==================================================
	TECHNOLOGY STACK VISUAL
================================================== */
.technology_stack_visual {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #020a24;
}

.technology_stack_visual img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	TECHNOLOGY LAYERS
================================================== */
.technology_layer_grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin-top: 22px;
}

.technology_layer_card {
	min-height: 270px;
	padding: 34px 30px 30px;
	border: 1px solid rgba(67, 104, 190, 0.16);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	background: rgba(34, 44, 79, 0.92);
	transition:
		transform 0.35s ease,
		border-color 0.35s ease,
		background-color 0.35s ease,
		box-shadow 0.35s ease;
}

.technology_layer_number {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #00c9f5;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.technology_layer_title {
	display: block;
	margin-top: 27px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.technology_layer_text {
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	word-break: keep-all;
}

.technology_layer_card:hover {
	border-color: rgba(0, 209, 255, 0.55);
	background: rgba(39, 51, 91, 0.96);
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}



/* ==================================================
	TECHNOLOGY DETAIL
================================================== */
.technology_detail_page {
	position: relative;
	background: #010827;
	color: #fff;
}


/* ==================================================
	01. INTRO
================================================== */
.technology_detail_intro {
	padding-top: 170px;
	padding-bottom: 70px;
	background: #010827;
}

.technology_detail_heading h1 {
	margin: 0;
	color: #fff;
	font-size: var(--fs-page-title);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.035em;
	word-break: keep-all;
}

.technology_detail_heading p {
	max-width: 1260px;
	margin: 27px 0 0;
	color: rgba(255, 255, 255, 0.58);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.65;
	word-break: keep-all;
}


/* ==================================================
	KEYWORDS
================================================== */
.technology_keyword_area {
	margin-top: 62px;
}

.technology_keyword_area h2 {
	margin: 0 0 22px;
	color: #fff;
	font-size: var(--fs-card-title);
	font-weight: 700;
	line-height: 1.4;
}

.technology_keyword_list {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
}

.technology_keyword_list li {
	min-height: 38px;
	padding: 8px 16px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.9);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--fs-caption);
	font-weight: 700;
	line-height: 1.4;
}


/* ==================================================
	02. APPLICATION CASES
================================================== */
.technology_case_section {
	padding: 70px 0 90px;
	background: #010827;
}

.technology_case_list {
	display: flex;
	flex-direction: column;
	gap: 38px;
}

.technology_case_item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 70px;
	align-items: center;
}

.technology_case_image {
	position: relative;
	height: 390px;
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 14px;
	overflow: hidden;
	background: #020a24;
}

.technology_case_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.75s ease,
		filter 0.75s ease;
}

.technology_case_item:hover .technology_case_image img {
	transform: scale(1.035);
	filter: brightness(1.05);
}

.technology_case_content {
	padding: 30px 0;
}

.technology_case_content p {
	margin: 0;
	color: #fff;
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.technology_case_item.image_right {
	padding-left: 180px;
}

.technology_case_item.image_right .technology_case_content {
	padding-left: 0;
}

.technology_case_item.image_left .technology_case_content {
	padding-left: 10px;
}


/* ==================================================
	03. SENSING GAP
================================================== */
.technology_gap_section {
	padding-top: 100px;
	background: #010827;
}

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

.technology_gap_card {
	min-height: 470px;
	padding: 40px 44px;
	border: 1px solid rgba(67, 104, 190, 0.3);
	border-radius: 14px;
	background: rgba(3, 12, 47, 0.72);
}

.technology_gap_card h3 {
	margin: 0;
	color: #fff;
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.technology_gap_icon {
	height: 170px;
	margin-top: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.technology_gap_icon img {
	display: block;
	max-width: 220px;
	max-height: 150px;
	object-fit: contain;
}

.technology_gap_card ul {
	margin: 35px 0 0;
}

.technology_gap_card li {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.55;
	padding-left: 15px;
	position: relative
}

.technology_gap_card li:after{
	content: '·';
	position: absolute; left: 0;
	 top: 0
}

.technology_gap_card li + li {
	margin-top: 3px;
}


/* ==================================================
	TECHNOLOGY 02
	SENSING & MEASUREMENT
================================================== */

/* ==================================================
	01. INTRO VISUAL
================================================== */
.technology02_intro_visual {
	position: relative;
	width: 100%;
	margin-top: 70px;
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 14px;
	overflow: hidden;
	background: #020a24;
}

.technology02_intro_visual img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	02. SENSOR TO SIGNAL MAPPING
================================================== */
.technology_mapping_section {
	padding-top: 80px;
	background: #010827;
}

.technology_mapping_wrap {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		46px
		minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.technology_mapping_panel {
	min-height: 750px;
	padding: 38px 30px 30px;
	border: 1px solid rgba(67, 104, 190, 0.3);
	border-radius: 14px;
	background: rgba(3, 12, 47, 0.72);
}

.technology_mapping_panel h3 {
	margin: 0 0 30px;
	color: #fff;
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.technology_mapping_list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.technology_mapping_item {
	min-height: 105px;
	padding: 22px 24px;
	border-radius: 8px;
	background: rgba(42, 52, 91, 0.86);
}

.technology_mapping_item strong {
	display: block;
	color: #fff;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.4;
}

.technology_mapping_item p {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-caption);
	font-weight: 400;
	line-height: 1.5;
}

.technology_mapping_connector {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
}

.technology_risk_list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
}

.technology_risk_list li {
	min-height: 48px;
	padding: 12px 22px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	background: rgba(42, 52, 91, 0.86);
	color: #fff;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.4;
}

.technology_risk_list li::before {
	content: "•";
	margin-right: 12px;
	color: #fff;
}


/* ==================================================
	03. DIAGRAM SECTIONS
================================================== */
.technology_interrogation_section,
.technology_center_section,
.technology_edge_section {
	padding-top: 90px;
	background: #010827;
}

.technology02_diagram {
	padding: 0;
}

.technology02_diagram img {
	display: block;
	width: 100%;
	height: auto;
}



/* ==================================================
	TECHNOLOGY 03
	PHYSICAL FEATURE ENGINEERING
================================================== */
.technology03_intro {
	padding-bottom: 170px;
}


/* ==================================================
	TECHNOLOGY VISUAL
================================================== */
.technology03_visual {
	position: relative;
	width: 100%;
	margin-top: 85px;
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 16px;
	overflow: hidden;
	background: #020a24;
}

.technology03_visual img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	TECHNOLOGY 04
	PHYSICAL AI & DIGITAL TWIN
================================================== */
.technology04_intro {
	padding-bottom: 170px;
}


/* ==================================================
	PHYSICAL AI & DIGITAL TWIN VISUAL
================================================== */
.technology04_visual {
	position: relative;
	width: 100%;
	margin-top: 85px;
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 16px;
	overflow: hidden;
	background: #020a24;
}

.technology04_visual img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==================================================
	TECHNOLOGY 05
	GOVERNANCE & DEPLOYMENT
================================================== */
.technology05_intro {
	padding-bottom: 170px;
}


/* ==================================================
	GOVERNANCE & DEPLOYMENT VISUAL
================================================== */
.technology05_visual {
	position: relative;
	width: 100%;
	margin-top: 85px;
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 16px;
	overflow: hidden;
	background: #020a24;
}

.technology05_visual img {
	display: block;
	width: 100%;
	height: auto;
}


/* ==================================================
	REQUEST FORM PAGE
================================================== */
.request_form_page {
	position: relative;
	background: #fff;
	color: #111;
}

.start_project_section {
	padding: 120px 0 180px;
	background: #fff;
}


/* ==================================================
	01. REQUEST TYPE TABS
================================================== */
.project_request_tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 60px;
}

.project_request_tab {
	min-width: 155px;
	min-height: 48px;
	padding: 11px 22px;
	border: 1px solid #dfe5f1;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f3f5f9;
	color: #4d5566;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.project_request_tab:hover {
	border-color: #b9c8e8;
	background: #eaf0ff;
	color: #1e5eff;
	transform: translateY(-2px);
}

.project_request_tab.active {
	border-color: #1e5eff;
	background: #1e5eff;
	color: #fff;
	box-shadow: 0 12px 28px rgba(30, 94, 255, 0.18);
}


/* ==================================================
	02. FORM
================================================== */
.project_request_form {
	width: 100%;
}

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

.project_form_field {
	min-width: 0;
	min-height: 64px;
	padding: 0 20px;
	border: 1px solid #dfe5f1;
	border-radius: 8px;
	display: grid;
	grid-template-columns: 145px minmax(0, 1fr);
	align-items: center;
	background: #fff;
	transition:
		border-color 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease;
}

.project_form_field:hover {
	border-color: #c7d2e8;
}

.project_form_field:focus-within {
	border-color: #1e5eff;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(30, 94, 255, 0.08);
}

.project_form_field_full {
	grid-column: 1 / -1;
}

.project_form_field label {
	color: #111827;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	cursor: text;
}

.project_form_field label span {
	color: #00aeea;
}

.project_form_field input,
.project_form_field textarea {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #111827;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	outline: none;
}

.project_form_field input {
	height: 62px;
}

.project_form_field input::placeholder,
.project_form_field textarea::placeholder {
	color: #9aa3b2;
	opacity: 1;
}


/* ==================================================
	TEXTAREA
================================================== */
.project_form_textarea {
	min-height: 210px;
	padding-top: 24px;
	padding-bottom: 24px;
	align-items: start;
}

.project_form_textarea label {
	padding-top: 2px;
}

.project_form_textarea textarea {
	min-height: 160px;
	resize: vertical;
}


/* ==================================================
	03. PRIVACY AGREEMENT
================================================== */
.project_form_agree {
	margin-top: 26px;
}

.project_form_agree label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #222b3a;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}

.project_form_agree input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.project_checkbox_icon {
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid #9db3e0;
	border-radius: 3px;
	background: #fff;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.project_checkbox_icon::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	opacity: 0;
	transform: rotate(45deg) scale(0.7);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.project_form_agree input:checked + .project_checkbox_icon {
	border-color: #1e5eff;
	background: #1e5eff;
}

.project_form_agree input:checked + .project_checkbox_icon::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.project_form_agree input:focus-visible + .project_checkbox_icon {
	box-shadow: 0 0 0 3px rgba(30, 94, 255, 0.15);
}


/* ==================================================
	04. SUBMIT
================================================== */
.project_form_submit {
	margin-top: 55px;
	display: flex;
	justify-content: center;
}

.project_form_submit button {
	min-width: 130px;
	min-height: 54px;
	padding: 13px 25px;
	border: 0;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.project_form_submit button:hover {
	background: #144bd4;
	transform: translateY(-3px);
	box-shadow: 0 15px 32px rgba(30, 94, 255, 0.2);
}

.project_form_submit button:disabled {
	background: #d8deea;
	color: #8c95a5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}






/* ==================================================
	MY PAGE
================================================== */
.mypage_page {
	position: relative;
	background: #010827;
	color: #fff;
}

.mypage_section {
	padding: 120px 0 180px;
	background: #010827;
}

.mypage_block + .mypage_block {
	margin-top: 120px;
}

.mypage_section_title {
	margin-bottom: 42px;
}

.mypage_section_title h1,
.mypage_section_title h2 {
	margin: 0;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.03em;
}


/* ==================================================
	PROFILE
================================================== */
.mypage_profile {
	min-height: 125px;
	padding: 28px 32px;
	border: 1px solid rgba(30, 94, 255, 0.45);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	background:
		linear-gradient(
			110deg,
			rgba(15, 52, 97, 0.9) 0%,
			rgba(5, 18, 54, 0.9) 100%
		);
}

.mypage_profile_info {
	display: flex;
	align-items: center;
	gap: 90px;
}

.mypage_profile_item {
	min-width: 120px;
}

.mypage_profile_item span {
	display: block;
	color: rgba(255, 255, 255, 0.5);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.mypage_profile_item strong {
	display: block;
	margin-top: 12px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.mypage_profile_buttons {
	display: flex;
	align-items: center;
	gap: 12px;
}


/* ==================================================
	COMMON MY PAGE BUTTON
================================================== */
.mypage_button {
	min-height: 40px;
	padding: 9px 16px;
	border: 0;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.9);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.mypage_button.primary {
	background: #1e5eff;
}

.mypage_button:hover {
	background: #00aeea;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 174, 234, 0.18);
}


/* ==================================================
	SUMMARY
================================================== */
.mypage_summary_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 18px;
}

.mypage_summary_card {
	min-height: 145px;
	padding: 30px 34px;
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background:
		linear-gradient(
			120deg,
			rgba(18, 31, 76, 0.92),
			rgba(6, 15, 50, 0.92)
		);
	transition:
		border-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.mypage_summary_card:hover {
	border-color: rgba(30, 94, 255, 0.75);
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.mypage_summary_text span {
	display: block;
	color: rgba(255, 255, 255, 0.55);
	font-size: 16px;
	line-height: 1.4;
}

.mypage_summary_text strong {
	display: block;
	margin-top: 10px;
	color: #fff;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
}

.mypage_summary_icon {
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.mypage_summary_icon img {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain;
}


/* ==================================================
	CART HEADER
================================================== */
.mypage_block_header {
	margin-bottom: 42px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.mypage_block_header .mypage_section_title {
	margin-bottom: 0;
}

.mypage_cart_actions {
	display: flex;
	align-items: center;
	gap: 12px;
}


/* ==================================================
	CART TABLE
================================================== */
.mypage_cart_table {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.mypage_cart_head,
.mypage_cart_row {
	display: grid;
	grid-template-columns:
		65px
		minmax(0, 1.8fr)
		minmax(160px, 0.65fr)
		minmax(150px, 0.55fr)
		130px;
	align-items: center;
}

.mypage_cart_head {
	min-height: 46px;
	background: rgba(42, 52, 91, 0.85);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.mypage_cart_head > div,
.mypage_cart_row > div {
	height: 100%;
	border-right: 1px solid rgba(67, 104, 190, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mypage_cart_head > div:last-child,
.mypage_cart_row > div:last-child {
	border-right: 0;
}

.mypage_cart_row {
	min-height: 120px;
	border-bottom: 1px solid rgba(67, 104, 190, 0.2);
	background: rgba(2, 10, 36, 0.38);
}




/* ==================================================
	CHECKBOX
================================================== */
.mypage_check {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.mypage_check input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.mypage_check span {
	position: relative;
	width: 17px;
	height: 17px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 2px;
}

.mypage_check span::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	opacity: 0;
	transform: rotate(45deg);
}

.mypage_check input:checked + span {
	border-color: #1e5eff;
	background: #1e5eff;
}

.mypage_check input:checked + span::after {
	opacity: 1;
}


/* ==================================================
	CART PRODUCT
================================================== */
.mypage_cart_product {
	padding: 16px 22px;
	justify-content: flex-start !important;
	gap: 18px;
}

.mypage_cart_thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 5px;
	overflow: hidden;
	background: #e9edf4;
}

.mypage_cart_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mypage_cart_product_text {
	min-width: 0;
}

.mypage_cart_product_text strong {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.mypage_cart_product_text p,
.mypage_cart_product_text span {
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	line-height: 1.45;
}

.mypage_cart_type {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}


/* ==================================================
	CART QUANTITY
================================================== */
.mypage_cart_quantity {
	display: grid !important;
	grid-template-columns: 34px 48px 34px;
}

.mypage_quantity_button,
.mypage_quantity_input {
	height: 34px;
	border: 1px solid rgba(67, 104, 190, 0.38);
	background: transparent;
	color: #fff;
	font-family: inherit;
	text-align: center;
}

.mypage_quantity_button {
	font-size: 16px;
	cursor: pointer;
}

.mypage_quantity_input {
	width: 48px;
	border-right: 0;
	border-left: 0;
	font-size: 14px;
	appearance: textfield;
	-moz-appearance: textfield;
}

.mypage_quantity_input::-webkit-inner-spin-button,
.mypage_quantity_input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}


/* ==================================================
	DELETE
================================================== */
.mypage_cart_delete {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	cursor: pointer;
}

.mypage_cart_delete img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}


/* ==================================================
	RECENT ORDER
================================================== */
.mypage_order_list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mypage_order_item {
	border: 1px solid rgba(67, 104, 190, 0.24);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(2, 10, 36, 0.42);
}

.mypage_order_header {
	width: 100%;
	min-height: 66px;
	padding: 18px 24px;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	background: rgba(42, 52, 91, 0.85);
	color: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.mypage_order_header_info {
	min-width: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.mypage_order_header_info strong {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.mypage_order_header_info > span:not(.mypage_order_status) {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.4;
}

.mypage_order_status {
	padding: 5px 10px;
	border-radius: 4px;
	background: #00c9f5;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.mypage_order_arrow {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 3px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.mypage_order_item.open .mypage_order_arrow {
	transform: rotate(225deg);
}


/* 중요
	JS의 slideDown / slideUp이 display를 직접 제어하므로
	open 클래스에서 display:block을 주지 않음
*/
.mypage_order_content {
	display: none;
	padding: 24px;
	background: rgba(2, 10, 36, 0.42);
}

.mypage_order_product {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.mypage_order_product > strong {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.mypage_order_product > p {
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.4;
}

.mypage_order_product > span:not(.mypage_order_category) {
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	line-height: 1.4;
}

.mypage_order_category {
	padding: 5px 9px;
	border-radius: 4px;
	background: #00c9f5;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.mypage_order_cancel {
	margin-left: auto;
	min-height: 40px;
	padding: 8px 18px;
	border: 0;
	border-radius: 7px;
	background: #1e5eff;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}

.mypage_order_cancel:hover {
	background: #00aeea;
	transform: translateY(-2px);
}

.mypage_delivery_info {
	margin-top: 20px;
}

.mypage_delivery_info > strong {
	display: block;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.mypage_delivery_row {
	padding-top: 14px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
}

.mypage_delivery_row span {
	color: rgba(255, 255, 255, 0.56);
	font-size: 14px;
	line-height: 1.4;
}

.mypage_delivery_row em {
	margin-right: 8px;
	color: #fff;
	font-style: normal;
	font-weight: 700;
}



/* ==================================================
	QUOTE HISTORY
================================================== */
.quote_history_page,
.quote_view_page {
	position: relative;
	background: #010827;
	color: #fff;
}

.quote_history_section,
.quote_view_section {
	padding: 120px 0 180px;
	background: #010827;
}

.quote_history_title,
.quote_view_title {
	margin-bottom: 70px;
}

.quote_history_title h1,
.quote_view_title h1 {
	margin: 0;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.03em;
}


/* ==================================================
	HISTORY TOP
================================================== */
.quote_history_top {
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.quote_history_count {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}

.quote_history_count strong {
	margin: 0 3px;
	color: #00d1ff;
	font-size: 20px;
	font-weight: 700
}


/* ==================================================
	SEARCH
================================================== */
.quote_history_search {
	width: 500px;
	height: 52px;
	border: 1px solid rgba(67, 104, 190, 0.32);
	border-radius: 10px;
	display: grid;
	grid-template-columns: 125px minmax(0, 1fr) 52px;
	overflow: hidden;
	background: rgba(2, 10, 36, 0.45);
}

.quote_history_search select,
.quote_history_search input {
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	outline: none;
}

.quote_history_search select {
	padding: 0 42px 0 18px;
	border: 0;
	border-right: 1px solid rgba(67, 104, 190, 0.22);
	background-color: #010827;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	outline: none;
	cursor: pointer;
	color-scheme: dark;
}

.quote_history_search select option {
	background-color: #010827;
	color: #fff;
	font-size: 16px;
}
.quote_history_search input {
	padding: 0 18px;
}

.quote_history_search input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.quote_history_search_button {
	position: relative;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
    justify-content: center;
    align-items: center;
}

.quote_history_search_button svg{display: inline-block}




/* ==================================================
	LIST
================================================== */
.quote_history_list {
	border-top: 1px solid rgba(255, 255, 255, 0.8);
}

.quote_history_item {
	min-height: 92px;
	padding: 0 28px;
	border-bottom: 1px solid rgba(67, 104, 190, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	color: #fff;
	transition:
		background-color 0.25s ease,
		padding-left 0.25s ease;
}

.quote_history_item:hover {
	background: rgba(42, 52, 91, 0.35);
	padding-left: 36px;
}

.quote_history_item:first-child {
	background: rgba(42, 52, 91, 0.72);
}

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

.quote_history_subject strong {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.quote_history_reply_mark {
	color: rgba(255, 255, 255, 0.75);
	font-size: 18px;
}

.quote_history_item time {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.42);
	font-size: 16px;
}


/* ==================================================
	PAGING
================================================== */
.quote_history_paging {
	margin-top: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

.quote_history_paging a {
	min-width: 18px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	text-align: center;
}

.quote_history_paging a.active {
	color: #00d1ff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 5px;
}


/* ==================================================
	QUOTE VIEW
================================================== */
.quote_view_article,
.quote_view_reply {
	border: 1px solid rgba(67, 104, 190, 0.26);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(2, 10, 36, 0.42);
}

.quote_view_header {
	min-height: 110px;
	padding: 26px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	background: rgba(42, 52, 91, 0.76);
}

.quote_view_type {
	display: inline-flex;
	padding: 6px 10px;
	border-radius: 5px;
	background: #00c9f5;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.quote_view_header h2 {
	margin: 12px 0 0;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.quote_view_header time,
.quote_view_reply_title time {
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
}

.quote_view_information {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-bottom: 1px solid rgba(67, 104, 190, 0.2);
}

.quote_view_information dl {
	min-height: 65px;
	margin: 0;
	padding: 0 28px;
	border-right: 1px solid rgba(67, 104, 190, 0.2);
	border-bottom: 1px solid rgba(67, 104, 190, 0.2);
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	align-items: center;
}

.quote_view_information dl:nth-child(2n) {
	border-right: 0;
}

.quote_view_information dt {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.quote_view_information dd {
	margin: 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 16px;
}

.quote_view_content {
	min-height: 260px;
	padding: 36px 30px;
	color: rgba(255, 255, 255, 0.76);
	font-size: 16px;
	line-height: 1.75;
}

.quote_view_reply {
	margin-top: 26px;
}

.quote_view_reply_title {
	min-height: 68px;
	padding: 0 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(42, 52, 91, 0.76);
}

.quote_view_reply_title strong {
	color: #fff;
	font-size: 18px;
}

.quote_view_reply_content {
	min-height: 180px;
	padding: 32px 30px;
	color: rgba(255, 255, 255, 0.76);
	font-size: 16px;
	line-height: 1.75;
}

.quote_view_buttons {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}

.quote_view_list_button {
	min-width: 120px;
	min-height: 48px;
	padding: 11px 22px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}



/* ==================================================
	ORDER
================================================== */
.order_page {
	position: relative;
	background: #010827;
	color: #fff;
}

.order_section {
	padding: 150px 0;
	background: #010827;
}



.order_page_title {
	margin-bottom: 62px;
}

.order_page_title h1 {
	margin: 0;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.03em;
}

.order_block + .order_block {
	margin-top: 58px;
}

.order_block_title {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.order_block_title h2 {
	margin: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}


/* ==================================================
	ORDER PRODUCT
================================================== */
.order_product_list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.order_product_item {
	min-height: 130px;
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 150px;
	align-items: center;
	gap: 26px;
}

.order_product_image {
	width: 190px;
	height: 130px;
	border-radius: 16px;
	overflow: hidden;
	background: #061537;
}

.order_product_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.order_product_content {
	min-width: 0;
}

.order_product_name {
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	word-break: keep-all;
}

.order_product_description {
	max-width: 460px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.48);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	word-break: keep-all;
}


/* ==================================================
	ORDER QUANTITY
================================================== */
.order_product_quantity {
	display: grid;
	grid-template-columns: 38px 76px 38px;
	justify-self: end;
}

.order_quantity_button,
.order_quantity_input {
	height: 38px;
	border: 1px solid rgba(67, 104, 190, 0.42);
	background: transparent;
	color: #fff;
	font-family: inherit;
	text-align: center;
}

.order_quantity_button {
	padding: 0;
	font-size: 16px;
	cursor: pointer;
}

.order_quantity_button:hover {
	background: rgba(30, 94, 255, 0.2);
	color: #00d1ff;
}

.order_quantity_input {
	width: 76px;
	border-right: 0;
	border-left: 0;
	font-size: 16px;
	font-weight: 600;
	outline: none;
	appearance: textfield;
	-moz-appearance: textfield;
}

.order_quantity_input::-webkit-inner-spin-button,
.order_quantity_input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}


/* ==================================================
	DELIVERY INFORMATION
================================================== */
.order_delivery_table {
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 8px;
	overflow: hidden;
}

.order_delivery_row {
	min-height: 56px;
	border-bottom: 1px solid rgba(67, 104, 190, 0.2);
	display: grid;
	grid-template-columns: 165px minmax(0, 1fr);
	background: rgba(2, 10, 36, 0.42);
}

.order_delivery_row:last-child {
	border-bottom: 0;
}

.order_delivery_row label {
	padding: 17px 20px;
	display: flex;
	align-items: center;
	background: rgba(42, 52, 91, 0.72);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.order_delivery_row label span {
	margin-left: 4px;
	color: #00d1ff;
}

.order_delivery_row input,
.order_delivery_row textarea {
	width: 100%;
	padding: 0 20px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.55;
	outline: none;
}

.order_delivery_row input {
	height: 55px;
}

.order_delivery_row input::placeholder,
.order_delivery_row textarea::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.order_delivery_row:focus-within {
	background: rgba(4, 16, 54, 0.7);
}


/* ==================================================
	POSTCODE
================================================== */
.order_postcode_field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 130px;
	align-items: center;
}

.order_postcode_button {
	min-width: 115px;
	min-height: 38px;
	margin-right: 16px;
	padding: 8px 14px;
	border: 0;
	border-radius: 7px;
	background: #1e5eff;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.order_postcode_button:hover {
	background: #00aeea;
}


/* ==================================================
	DELIVERY REQUEST
================================================== */
.order_delivery_request {
	min-height: 120px;
}

.order_delivery_request label {
	align-items: flex-start;
}

.order_delivery_request textarea {
	min-height: 118px;
	padding-top: 18px;
	padding-bottom: 18px;
	resize: vertical;
}


/* ==================================================
	PAYMENT INFORMATION
================================================== */
.order_payment_summary {
	padding: 26px 28px;
	border-radius: 8px;
	background: rgba(42, 52, 91, 0.78);
}

.order_payment_row {
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.order_payment_row span {
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	line-height: 1.4;
}

.order_payment_row strong {
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
}

.order_payment_row.total span,
.order_payment_row.total strong {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}


/* ==================================================
	SUBMIT
================================================== */
.order_submit {
	margin-top: 35px;
	display: flex;
	justify-content: center;
}

.order_submit button {
	min-width: 130px;
	min-height: 50px;
	padding: 11px 24px;
	border: 0;
	border-radius: 8px;
	background: #1e5eff;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.order_submit button:hover {
	background: #00aeea;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 174, 234, 0.2);
}





/* ==================================================
	PHYSICAL AI EXPERIENCE GALLERY
================================================== */
.experience_gallery_page,
.experience_view_page {
	position: relative;
	background: #010827;
	color: #fff;
}

.experience_gallery_section,
.experience_view_section {
	padding: 120px 0 180px;
	background: #010827;
}


/* ==================================================
	CATEGORY
================================================== */
.experience_category {
	margin-bottom: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.experience_category a {
	min-width: 70px;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid rgba(67, 104, 190, 0.18);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(42, 52, 91, 0.82);
	color: rgba(255, 255, 255, 0.88);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.experience_category a:hover {
	border-color: rgba(30, 94, 255, 0.7);
	color: #fff;
	transform: translateY(-2px);
}

.experience_category a.active {
	border-color: #1e5eff;
	background: #1e5eff;
	color: #fff;
}


/* ==================================================
	GALLERY TOP
================================================== */
.experience_gallery_top {
	margin-bottom: 30px;
}


/* ==================================================
	GALLERY GRID
================================================== */
.experience_gallery_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 20px;
}

.experience_gallery_card {
	min-width: 0;
	padding: 24px 24px 30px;
	border: 1px solid rgba(30, 94, 255, 0.42);
	border-radius: 16px;
	display: block;
	background:
		linear-gradient(
			145deg,
			rgba(21, 34, 77, 0.96),
			rgba(7, 16, 52, 0.96)
		);
	transition:
		border-color 0.35s ease,
		background-color 0.35s ease,
		transform 0.35s ease,
		box-shadow 0.35s ease;
}

.experience_gallery_image {
	position: relative;
	width: 100%;
	aspect-ratio: 1.45 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}

.experience_gallery_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.65s ease,
		filter 0.65s ease;
}

.experience_gallery_content {
	padding-top: 20px;
}

.experience_gallery_content strong {
	display: block;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.025em;
	word-break: keep-all;
	transition: color 0.3s ease;
}

.experience_gallery_content time {
	display: block;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.experience_gallery_card:hover {
	border-color: rgba(30, 94, 255, 0.9);
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.22);
}

.experience_gallery_card:hover .experience_gallery_image img {
	transform: scale(1.045);
	filter: brightness(1.06);
}

.experience_gallery_card:hover .experience_gallery_content strong {
	color: #1e5eff;
}


/* 흰색 활성 카드가 필요할 경우 */
.experience_gallery_card.featured {
	border-color: #fff;
	background: #fff;
}

.experience_gallery_card.featured .experience_gallery_content strong {
	color: #1e5eff;
}

.experience_gallery_card.featured .experience_gallery_content time {
	color: #777;
}


/* ==================================================
	EMPTY
================================================== */
.experience_gallery_empty {
	grid-column: 1 / -1;
	min-height: 240px;
	border-top: 1px solid rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid rgba(67, 104, 190, 0.24);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.55);
	font-size: 16px;
}



/* ==================================================
	EXPERIENCE VIEW
================================================== */
.experience_view_article {
	border: 1px solid rgba(67, 104, 190, 0.28);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(2, 10, 36, 0.45);
}

.experience_view_header {
	min-height: 130px;
	padding: 30px 34px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	background: rgba(42, 52, 91, 0.76);
}

.experience_view_heading {
	min-width: 0;
}

.experience_view_category {
	display: inline-flex;
	min-height: 32px;
	padding: 5px 12px;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
	background: #00c9f5;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.experience_view_heading h1 {
	margin: 14px 0 0;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.experience_view_header time {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.5);
	font-size: 16px;
	line-height: 1.4;
}

.experience_view_content {
	padding: 50px 42px 65px;
}

.experience_view_image {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #061537;
}

.experience_view_image img {
	display: block;
	width: 100%;
	height: auto;
}

.experience_view_text {
	min-height: 220px;
	padding-top: 42px;
	color: rgba(255, 255, 255, 0.76);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	word-break: keep-all;
}


/* ==================================================
	PREV / NEXT
================================================== */
.experience_view_navigation {
	margin-top: 26px;
	border-top: 1px solid rgba(67, 104, 190, 0.28);
	border-bottom: 1px solid rgba(67, 104, 190, 0.28);
}

.experience_view_nav_item {
	min-height: 70px;
	padding: 0 28px;
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr);
	align-items: center;
	border-bottom: 1px solid rgba(67, 104, 190, 0.2);
	color: #fff;
	transition: background-color 0.25s ease;
}

.experience_view_nav_item:last-child {
	border-bottom: 0;
}

.experience_view_nav_item:hover {
	background: rgba(42, 52, 91, 0.36);
}

.experience_view_nav_item > span {
	color: rgba(255, 255, 255, 0.52);
	font-size: 16px;
}

.experience_view_nav_item strong {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}


/* ==================================================
	LIST BUTTON
================================================== */
.experience_view_buttons {
	margin-top: 42px;
	display: flex;
	justify-content: center;
}

.experience_view_list_button {
	min-width: 125px;
	min-height: 48px;
	padding: 11px 24px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1e5eff;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.experience_view_list_button:hover {
	background: #00aeea;
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 174, 234, 0.18);
}

/* ==================================================
	RESOURCE LIST PAGE
================================================== */
.resource_list_page {
	position: relative;
	background: #010827;
	color: #fff;
}

.resource_list_section {
	padding: 120px 0 180px;
	background: #010827;
}


/* ==================================================
	RESOURCE BOARD LIST
================================================== */
.resource_board_list {
	border-top: 1px solid rgba(255, 255, 255, 0.72);
}

.resource_board_item {
	border-bottom: 1px solid rgba(88, 108, 170, 0.22);
	background: transparent;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease;
}

.resource_board_link {
	min-height: 94px;
	padding: 0 32px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 40px;
	color: #fff;
}

.resource_board_title {
	min-width: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.025em;
	word-break: keep-all;
	transition: color 0.25s ease;
}


/* ==================================================
	DATE / DOWNLOAD
================================================== */
.resource_board_info {
	display: grid;
	grid-template-columns: 110px 42px;
	align-items: center;
	justify-content: end;
	gap: 20px;
}

.resource_board_info time {
	color: rgba(255, 255, 255, 0.42);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
	text-align: right;
}

.resource_download_icon,
.resource_download_space {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
}

.resource_download_icon {
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #1e5eff;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.resource_download_icon svg {
	display: block;
	width: 18px;
	height: 18px;
}


/* ==================================================
	ACTIVE / HOVER
================================================== */
.resource_board_item.active,
.resource_board_item:hover {
	background: rgba(38, 48, 84, 0.78);
}

.resource_board_item.active .resource_download_icon,
.resource_board_item:hover .resource_download_icon {
	background: #1e5eff;
	color: #fff;
}

.resource_board_item:hover .resource_download_icon {
	transform: translateY(-2px);
}



/* ==================================================
	EXPERIENCE VIEW YOUTUBE
================================================== */
.experience_view_video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.experience_view_video iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}


/* ==================================================
	EXPERIENCE VIEW ATTACHMENT
================================================== */
.experience_view_attachment {
	border-top: 1px solid rgba(67, 104, 190, 0.28);
}

.experience_attachment_title {
	padding: 22px 34px;
	background: rgba(42, 52, 91, 0.65);
}

.experience_attachment_title strong {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.experience_attachment_list {
	padding: 0 34px;
}

.experience_attachment_item {
	min-height: 72px;
	border-bottom: 1px solid rgba(67, 104, 190, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	color: #fff;
	transition:
		background-color 0.25s ease,
		color 0.25s ease;
}

.experience_attachment_item:last-child {
	border-bottom: 0;
}

.experience_attachment_item:hover {
	color: #00d1ff;
}

.experience_attachment_info {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}

.experience_attachment_icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: #fff;
	color: #1e5eff;
}

.experience_attachment_icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.experience_attachment_name {
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.experience_attachment_name strong {
	overflow: hidden;
	color: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.experience_attachment_name span {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.4);
	font-size: 14px;
	line-height: 1.4;
}

.experience_attachment_download {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.experience_attachment_item:hover .experience_attachment_download {
	color: #00d1ff;
}

/* ==================================================
	FAQ PAGE
================================================== */
.faq_page {
	position: relative;
	background: #010827;
	color: #fff;
}

.faq_section {
	padding: 120px 0 180px;
	background: #010827;
}


/* ==================================================
	FAQ CATEGORY
================================================== */
.faq_category {
	margin-bottom: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.faq_category_button {
	min-width: 76px;
	height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(67, 104, 190, 0.12);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1b2546;
	color: rgba(255, 255, 255, 0.9);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease;
}

.faq_category_button:hover {
	border-color: rgba(39, 100, 255, 0.7);
	color: #fff;
	transform: translateY(-2px);
}

.faq_category_button.active {
	border-color: #2764ff;
	background: #2764ff;
	color: #fff;
}


/* ==================================================
	FAQ LIST
================================================== */
.faq_list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.faq_item {
	border: 1px solid rgba(67, 104, 190, 0.24);
	border-radius: 11px;
	overflow: hidden;
	background: #020a24;
}

.faq_question {
	position: relative;
	width: 100%;
	min-height: 86px;
	padding: 20px 72px 20px 30px;
	border: 0;
	display: flex;
	align-items: center;
	gap: 18px;
	background: #1b2546;
	color: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.faq_category_name {
	flex: 0 0 auto;
	min-width: 78px;
	min-height: 30px;
	padding: 5px 10px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #13c7ef;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.faq_question_text {
	min-width: 0;
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	word-break: keep-all;
}


/* ==================================================
	FAQ ARROW
================================================== */
.faq_arrow {
	position: absolute;
	right: 30px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.3s ease;
}

.faq_item.open .faq_arrow {
	transform: translateY(-30%) rotate(225deg);
}


/* ==================================================
	FAQ ANSWER
================================================== */
.faq_answer {
	display: none;
	background: #020a24;
}

.faq_answer_inner {
	min-height: 130px;
	padding: 40px 30px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	word-break: keep-all;
}

.faq_item.open .faq_question {
	border-bottom: 1px solid rgba(67, 104, 190, 0.2);
}


/* ==================================================
	HOVER
================================================== */
.faq_question:hover {
	background: #202b4d;
}

.faq_question:hover .faq_question_text {
	color: #fff;
}


/* ==================================================
	FAQ EMPTY
================================================== */
.faq_empty {
	display: none;
	min-height: 220px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid rgba(67, 104, 190, 0.24);
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 16px;
}


/* ==================================================
	DOWNLOADS PAGE
================================================== */
.downloads_page {
	position: relative;
	background: #010827;
	color: #fff;
}

.downloads_section {
	padding: 120px 0 180px;
	background: #010827;
}


/* ==================================================
	DOWNLOADS GRID
================================================== */
.downloads_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 20px;
}


/* ==================================================
	DOWNLOADS CARD
================================================== */
.downloads_card {
	position: relative;
	min-height: 274px;
	padding: 42px 42px 34px;
	border: 1px solid rgba(30, 94, 255, 0.62);
	border-radius: 16px;
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			rgba(23, 34, 76, 0.98),
			rgba(8, 17, 52, 0.98)
		);
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.downloads_card_content {
	min-width: 0;
}

.downloads_card time {
	display: block;
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.downloads_card_title {
	display: block;
	margin-top: 18px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	word-break: keep-all;
}


/* ==================================================
	DOWNLOAD BUTTON
================================================== */
.downloads_card_button {
	position: absolute;
	right: 34px;
	bottom: 34px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #1e5eff;
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.downloads_card_button svg {
	display: block;
	width: 20px;
	height: 20px;
}




/* ==================================================
	DOWNLOADS CARD
================================================== */
.downloads_card {
	position: relative;
	min-height: 274px;
	padding: 42px 42px 34px;
	border: 1px solid rgba(30, 94, 255, 0.62);
	border-radius: 16px;
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			rgba(23, 34, 76, 0.98),
			rgba(8, 17, 52, 0.98)
		);
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.downloads_card time {
	display: block;
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	transition: color 0.25s ease;
}

.downloads_card_title {
	display: block;
	margin-top: 18px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	word-break: keep-all;
	transition: color 0.25s ease;
}

.downloads_card_button {
	position: absolute;
	right: 34px;
	bottom: 34px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #1e5eff;
	transition:
		background-color 0.5s ease,
		color 0.5s ease,
		transform 0.5s ease,
		box-shadow 0.5s ease;
}

.downloads_card_button svg {
	display: block;
	width: 20px;
	height: 20px;
}
.downloads_card_button svg path{
	transition-duration: .5s
}

/* ==================================================
	HOVER
================================================== */
.downloads_card:hover {
	border-color: #fff;
	background: #fff;
	transform: none;
	box-shadow: none;
}

.downloads_card:hover time {
	color: #777;
}

.downloads_card:hover .downloads_card_title {
	color: #111;
}

.downloads_card:hover .downloads_card_button {
	background: #1e5eff;
	color: #fff;
	transform: none;
	box-shadow: none;
}

.downloads_card:hover .downloads_card_button svg path{fill: #FFF;}


/* ==================================================
	EMPTY
================================================== */
.downloads_empty {
	grid-column: 1 / -1;
	min-height: 240px;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid rgba(67, 104, 190, 0.24);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 16px;
}


/* ==================================================
	PATENTS PAGE
================================================== */
.patents_page {
	position: relative;
	background: #010827;
	color: #fff;
}

.patents_section {
	padding: 120px 0 180px;
	background: #010827;
}


/* ==================================================
	PATENTS CATEGORY
================================================== */
.patents_category {
	margin-bottom: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.patents_category_button {
	min-width: 68px;
	height: 44px;
	padding: 0 20px;
	border: 1px solid rgba(67, 104, 190, 0.12);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1b2546;
	color: rgba(255, 255, 255, 0.9);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease;
}

.patents_category_button:hover {
	border-color: #2764ff;
	color: #fff;
}

.patents_category_button.active {
	border-color: #2764ff;
	background: #2764ff;
	color: #fff;
}


/* ==================================================
	PATENTS GRID
================================================== */
.patents_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 20px;
}

.patents_card {
	min-width: 0;
	border: 1px solid rgba(30, 94, 255, 0.52);
	border-radius: 16px;
	overflow: hidden;
	background:
		linear-gradient(
			145deg,
			rgba(23, 34, 76, 0.98),
			rgba(8, 17, 52, 0.98)
		);
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease;
}

.patents_card_button {
	width: 100%;
	padding: 28px 28px 32px;
	border: 0;
	display: block;
	background: transparent;
	color: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.patents_card_image {
	width: 100%;
	aspect-ratio: 32 / 45;
	overflow: hidden;
	background: #fff;
}

.patents_card_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.patents_card_content {
	padding-top: 18px;
	text-align: center;
}

.patents_card_category {
	min-height: 28px;
	padding: 5px 12px;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #10c7ed;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.patents_card_title {
	display: block;
	margin-top: 14px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.02em;
	word-break: keep-all;
	transition: color 0.25s ease;
}


/* ==================================================
	PATENTS HOVER
================================================== */
.patents_card:hover {
	border-color: #fff;
	background: #fff;
}

.patents_card:hover .patents_card_title {
	color: #111;
}

.patents_card:hover .patents_card_image img {
	transform: scale(1.02);
}


/* ==================================================
	EMPTY
================================================== */
.patents_empty {
	display: none;
	grid-column: 1 / -1;
	min-height: 240px;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 16px;
}


/* ==================================================
	PATENTS MODAL
================================================== */
.patents_modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.patents_modal.open {
	display: flex;
}

.patents_modal_backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 4, 20, 0.82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.patents_modal_dialog {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	max-height: calc(100vh - 80px);
	border: 1px solid rgba(67, 104, 190, 0.45);
	border-radius: 16px;
	overflow: hidden;
	background: #091230;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.patents_modal_header {
	min-height: 70px;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid rgba(67, 104, 190, 0.28);
	background: #16203f;
}

.patents_modal_header h3 {
	margin: 0;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.patents_modal_close {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.patents_modal_close span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 2px;
	background: #fff;
}

.patents_modal_close span:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.patents_modal_close span:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.patents_modal_content {
	max-height: calc(100vh - 150px);
	padding: 30px;
	overflow-y: auto;
	text-align: center;
}

.patents_modal_image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	background: #fff;
}


/* ==================================================
	RELATED CONTENT PAGES · LIGHT THEME
	아래 코드를 CSS 파일 가장 마지막에 추가
================================================== */
.experience_gallery_page,
.experience_view_page,
.resource_list_page,
.faq_page,
.downloads_page,
.patents_page {
	position: relative;
	background: #fff;
	color: #111827;
}

.experience_gallery_section,
.experience_view_section,
.resource_list_section,
.faq_section,
.downloads_section,
.patents_section {
	background: #fff;
}


/* ==================================================
	COMMON CATEGORY BUTTON
================================================== */
.experience_category a,
.faq_category_button,
.patents_category_button {
	border: 1px solid #e1e7f0;
	background: #f3f5f9;
	color: #4b5563;
}

.experience_category a:hover,
.faq_category_button:hover,
.patents_category_button:hover {
	border-color: #2764ff;
	background: #eef3ff;
	color: #2764ff;
}

.experience_category a.active,
.faq_category_button.active,
.patents_category_button.active {
	border-color: #2764ff;
	background: #2764ff;
	color: #fff;
}


/* ==================================================
	COMMON TOTAL
================================================== */
.experience_gallery_page .quote_history_count,
.resource_list_page .quote_history_count,
.downloads_page .quote_history_count,
.patents_page .quote_history_count {
	color: #111827;
}

.experience_gallery_page .quote_history_count strong,
.resource_list_page .quote_history_count strong,
.downloads_page .quote_history_count strong,
.patents_page .quote_history_count strong {
	color: #00a8d8;
}


/* ==================================================
	COMMON SEARCH
================================================== */
.experience_gallery_page .quote_history_search,
.resource_list_page .quote_history_search,
.downloads_page .quote_history_search,
.patents_page .quote_history_search {
	border-color: #dfe5ef;
	background: #fff;
}

.experience_gallery_page .quote_history_search select,
.resource_list_page .quote_history_search select,
.downloads_page .quote_history_search select,
.patents_page .quote_history_search select {
	border-right: 1px solid #e2e7ef;
	background-color: #fff;
	color: #111827;
	color-scheme: light;
}

.experience_gallery_page .quote_history_search select option,
.resource_list_page .quote_history_search select option,
.downloads_page .quote_history_search select option,
.patents_page .quote_history_search select option {
	background: #fff;
	color: #111827;
}

.experience_gallery_page .quote_history_search input,
.resource_list_page .quote_history_search input,
.downloads_page .quote_history_search input,
.patents_page .quote_history_search input {
	background: #fff;
	color: #111827;
}

.experience_gallery_page .quote_history_search input::placeholder,
.resource_list_page .quote_history_search input::placeholder,
.downloads_page .quote_history_search input::placeholder,
.patents_page .quote_history_search input::placeholder {
	color: #9ca3af;
}

.experience_gallery_page .quote_history_search_button,
.resource_list_page .quote_history_search_button,
.downloads_page .quote_history_search_button,
.patents_page .quote_history_search_button {
	color: #111827;
}

.experience_gallery_page .quote_history_search_button:hover,
.resource_list_page .quote_history_search_button:hover,
.downloads_page .quote_history_search_button:hover,
.patents_page .quote_history_search_button:hover {
	background: #eef3ff;
	color: #2764ff;
}

/*
	검색 SVG에 stroke="white"가 들어가 있으면
	아래 CSS가 적용되지 않으므로 PHP에서
	stroke="currentColor"로 변경
*/
.experience_gallery_page .quote_history_search_button svg path,
.resource_list_page .quote_history_search_button svg path,
.downloads_page .quote_history_search_button svg path,
.patents_page .quote_history_search_button svg path {
	stroke: currentColor;
}


/* ==================================================
	COMMON PAGINATION
================================================== */
.experience_gallery_page .quote_history_paging a,
.resource_list_page .quote_history_paging a,
.downloads_page .quote_history_paging a,
.patents_page .quote_history_paging a {
	color: #6b7280;
}

.experience_gallery_page .quote_history_paging a:hover,
.resource_list_page .quote_history_paging a:hover,
.downloads_page .quote_history_paging a:hover,
.patents_page .quote_history_paging a:hover {
	color: #2764ff;
}

.experience_gallery_page .quote_history_paging a.active,
.resource_list_page .quote_history_paging a.active,
.downloads_page .quote_history_paging a.active,
.patents_page .quote_history_paging a.active {
	color: #00a8d8;
}


/* ==================================================
	EXPERIENCE GALLERY
================================================== */
.experience_gallery_card {
	border-color: #dfe6f2;
	background: #fff;
	box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
}

.experience_gallery_image {
	background: #eef2f7;
}

.experience_gallery_content strong {
	color: #111827;
}

.experience_gallery_content time {
	color: #6b7280;
}

.experience_gallery_card:hover {
	border-color: #2764ff;
	background: #fff;
	box-shadow: 0 18px 42px rgba(39, 100, 255, 0.12);
}

.experience_gallery_card:hover .experience_gallery_content strong {
	color: #2764ff;
}

/* 기존 featured 강제 흰색 처리 제거 */
.experience_gallery_card.featured {
	border-color: #dfe6f2;
	background: #fff;
}

.experience_gallery_card.featured .experience_gallery_content strong {
	color: #111827;
}

.experience_gallery_card.featured .experience_gallery_content time {
	color: #6b7280;
}

.experience_gallery_card.featured:hover {
	border-color: #2764ff;
}

.experience_gallery_card.featured:hover .experience_gallery_content strong {
	color: #2764ff;
}

.experience_gallery_empty {
	border-top-color: #d9e0eb;
	border-bottom-color: #e5eaf1;
	color: #9ca3af;
}


/* ==================================================
	EXPERIENCE VIEW
================================================== */
.experience_view_article {
	border-color: #dfe5ef;
	background: #fff;
	box-shadow: 0 12px 36px rgba(17, 24, 39, 0.05);
}

.experience_view_header {
	border-bottom: 1px solid #e3e8f0;
	background: #f4f6fa;
}

.experience_view_heading h1 {
	color: #111827;
}

.experience_view_header time {
	color: #7b8494;
}

.experience_view_content {
	background: #fff;
}

.experience_view_image {
	background: #f1f4f8;
}

.experience_view_text {
	color: #4b5563;
}

.experience_view_navigation {
	border-top-color: #dfe5ef;
	border-bottom-color: #dfe5ef;
}

.experience_view_nav_item {
	border-bottom-color: #e5eaf1;
	color: #111827;
}

.experience_view_nav_item:hover {
	background: #f5f8ff;
}

.experience_view_nav_item > span {
	color: #8a94a5;
}

.experience_view_nav_item strong {
	color: #1f2937;
}

.experience_view_nav_item:hover strong {
	color: #2764ff;
}


/* ==================================================
	EXPERIENCE VIEW YOUTUBE
================================================== */
.experience_view_video {
	background: #000;
	box-shadow: 0 8px 28px rgba(17, 24, 39, 0.12);
}


/* ==================================================
	EXPERIENCE VIEW ATTACHMENT
================================================== */
.experience_view_attachment {
	border-top-color: #dfe5ef;
	background: #fff;
}

.experience_attachment_title {
	border-bottom: 1px solid #e3e8f0;
	background: #f4f6fa;
}

.experience_attachment_title strong {
	color: #111827;
}

.experience_attachment_list {
	background: #fff;
}

.experience_attachment_item {
	border-bottom-color: #e5eaf1;
	color: #1f2937;
}

.experience_attachment_item:hover {
	color: #2764ff;
	background: #f7f9ff;
}

.experience_attachment_icon {
	background: #eef3ff;
	color: #2764ff;
}

.experience_attachment_name span {
	color: #8a94a5;
}

.experience_attachment_download {
	color: #6b7280;
}

.experience_attachment_item:hover .experience_attachment_download {
	color: #2764ff;
}


/* ==================================================
	RESOURCE LIST
================================================== */
.resource_board_list {
	border-top-color: #9ca6b5;
}

.resource_board_item {
	border-bottom-color: #e3e8f0;
	background: #fff;
}

.resource_board_link {
	color: #111827;
}

.resource_board_title {
	color: #111827;
}

.resource_board_info time {
	color: #7b8494;
}

.resource_download_icon {
	border: 1px solid #dfe5ef;
	background: #fff;
	color: #2764ff;
}

.resource_board_item.active,
.resource_board_item:hover {
	background: #f3f6fc;
}

.resource_board_item.active .resource_board_title,
.resource_board_item:hover .resource_board_title {
	color: #2764ff;
}

.resource_board_item.active .resource_download_icon,
.resource_board_item:hover .resource_download_icon {
	border-color: #2764ff;
	background: #2764ff;
	color: #fff;
}


/* ==================================================
	FAQ
================================================== */
.faq_item {
	border-color: #dfe5ef;
	background: #fff;
	box-shadow: 0 6px 22px rgba(17, 24, 39, 0.04);
}

.faq_question {
	background: #f3f5f9;
	color: #111827;
}

.faq_question_text {
	color: #111827;
}

.faq_arrow {
	border-right-color: #4b5563;
	border-bottom-color: #4b5563;
}

.faq_answer {
	background: #fff;
}

.faq_answer_inner {
	color: #4b5563;
}

.faq_item.open .faq_question {
	border-bottom-color: #dfe5ef;
	background: #eef3ff;
}

.faq_item.open .faq_question_text {
	color: #2764ff;
}

.faq_item.open .faq_arrow {
	border-color: #2764ff;
}

.faq_question:hover {
	background: #eef3ff;
}

.faq_question:hover .faq_question_text {
	color: #2764ff;
}

.faq_empty {
	border-top-color: #d9e0eb;
	border-bottom-color: #e5eaf1;
	color: #9ca3af;
}


/* ==================================================
	DOWNLOADS
================================================== */
.downloads_card {
	border-color: #dfe6f2;
	background: #fff;
	box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
}

.downloads_card time {
	color: #7b8494;
}

.downloads_card_title {
	color: #111827;
}

.downloads_card_button {
	border: 1px solid #dfe5ef;
	background: #f4f7fc;
	color: #2764ff;
}

.downloads_card:hover {
	border-color: #2764ff;
	background: #f7f9ff;
	box-shadow: 0 18px 42px rgba(39, 100, 255, 0.12);
}

.downloads_card:hover time {
	color: #667085;
}

.downloads_card:hover .downloads_card_title {
	color: #2764ff;
}

.downloads_card:hover .downloads_card_button {
	border-color: #2764ff;
	background: #2764ff;
	color: #fff;
}

/*
	SVG가 fill 방식이면 적용
*/
.downloads_card_button svg path {
	transition:
		fill 0.3s ease,
		stroke 0.3s ease;
}

.downloads_card:hover .downloads_card_button svg path {
	fill: #fff;
	stroke: #fff;
}

.downloads_empty {
	border-top-color: #d9e0eb;
	border-bottom-color: #e5eaf1;
	color: #9ca3af;
}


/* ==================================================
	PATENTS
================================================== */
.patents_card {
	border-color: #dfe6f2;
	background: #fff;
	box-shadow: 0 10px 30px rgba(17, 24, 39, 0.05);
}

.patents_card_button {
	color: #111827;
}

.patents_card_image {
	border: 1px solid #edf0f5;
	background: #fff;
}

.patents_card_title {
	color: #111827;
}

.patents_card:hover {
	border-color: #2764ff;
	background: #f7f9ff;
	box-shadow: 0 18px 42px rgba(39, 100, 255, 0.12);
}

.patents_card:hover .patents_card_title {
	color: #2764ff;
}

.patents_empty {
	color: #9ca3af;
}


/* ==================================================
	PATENTS MODAL
================================================== */
.patents_modal_backdrop {
	background: rgba(15, 23, 42, 0.72);
}

.patents_modal_dialog {
	border-color: #dfe5ef;
	background: #fff;
	box-shadow: 0 30px 80px rgba(17, 24, 39, 0.25);
}

.patents_modal_header {
	border-bottom-color: #e3e8f0;
	background: #f4f6fa;
}

.patents_modal_header h3 {
	color: #111827;
}

.patents_modal_close span {
	background: #111827;
}

.patents_modal_content {
	background: #fff;
}


/* ==================================================
	FOCUS
================================================== */
.experience_category a:focus-visible,
.faq_category_button:focus-visible,
.patents_category_button:focus-visible,
.experience_gallery_card:focus-visible,
.resource_board_link:focus-visible,
.downloads_card_button:focus-visible,
.patents_card_button:focus-visible,
.experience_view_list_button:focus-visible {
	outline: 3px solid rgba(39, 100, 255, 0.25);
	outline-offset: 3px;
}


.experience_view_buttons a{color: #fff}