@charset "utf-8";

/* ==================================================
	공통 틀 CSS
================================================== */
/* sticky(Materials intro pin)가 동작하도록 메인만 overflow 완화 */
#wrap.mwarp {
	overflow: visible;
	overflow-x: clip;
}

.mcontents {
	position: relative;
	max-width: 100%;
	overflow-x: clip;
}

/* 메인 공통 타이포 / MORE */
.mwarp .m-en {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.1rem;
	font-family: var(--font-Barlow);
	font-weight: var(--font-sb);
	font-size: var(--rem-30);
	line-height: 1;
	color: var(--brand-color-main);
}

.mwarp .m-en-dot {
	display: block;
	width: 2.2rem;
	height: 2.2rem;
	margin-top: -0.7rem;
	margin-left: 0.4rem;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8%200%2010.1%205.9%2016%208l-5.9%202.1L8%2016l-2.1-5.9L0%208l5.9-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8%200%2010.1%205.9%2016%208l-5.9%202.1L8%2016l-2.1-5.9L0%208l5.9-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mwarp .m-en::after {
	content: "";
	display: block;
	width: 2.2rem;
	height: 2.2rem;
	margin-top: -0.7rem;
	margin-left: 0.4rem;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8%200%2010.1%205.9%2016%208l-5.9%202.1L8%2016l-2.1-5.9L0%208l5.9-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8%200%2010.1%205.9%2016%208l-5.9%202.1L8%2016l-2.1-5.9L0%208l5.9-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mwarp .m-en:has(.m-en-dot)::after {
	content: none;
}

.mwarp .m-tit {
	margin: 0;
	font-family: var(--font-Pretendard);
	font-weight: var(--font-sb);
	font-size: var(--rem-60);
	line-height: 1.25;
	color: var(--color-black);
	letter-spacing: -0.02em;
}

/* 영문 문장이 길어서 국문 2줄 제목보다 커 보이지 않도록 한 단계 줄임 */
.mwarp .facility-head-txt .m-tit,
.mwarp .inquiry-content .m-tit,
.mwarp .global-copy .m-tit {
	font-size: 4.2rem;
}

.mwarp .inquiry-content .m-tit {
	max-width: 72rem;
}

@media (min-width: 1601px) {
	.mwarp .materials-intro .m-tit {
		font-size: 4.2rem;
	}
}

.mwarp .m-desc {
	margin: 0;
	font-family: var(--font-Pretendard);
	font-weight: var(--font-rg);
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--color-gray1);
}

.mwarp .m-more {
	display: inline-flex;
	align-items: flex-end;
	gap: 0.7rem;
	font-family: var(--font-Barlow);
	font-weight: var(--font-md);
	font-size: var(--rem-16);
	line-height: 1;
	color: var(--color-black);
	text-decoration: none;
	transition: color 0.35s ease, opacity 0.35s ease;
}

.mwarp .m-more:hover {
	color: var(--brand-color-main);
	opacity: 1;
}

.mwarp .m-more-line {
	display: block;
	width: 6.2rem;
	height: 0.6rem;
	background: url("../../lib/images/icon/more_line.svg") no-repeat right bottom / 6.1707rem 0.585352rem;
	transition: transform 0.35s ease, width 0.35s ease;
}

.mwarp .m-more:hover .m-more-line {
	transform: translateX(0.6rem);
}

/* ==================================================
	공통 사항 — reveal
================================================== */
.mwarp .mcontents .reveal-main {
	opacity: 0;
	transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--reveal-delay, 0);
	will-change: opacity, transform;
}

.mwarp .mcontents .reveal-main.is-visible {
	opacity: 1;
}

.mwarp .mcontents .reveal-main[data-animation="fade-up"] {
	transform: translateY(3.2rem);
}

.mwarp .mcontents .reveal-main.is-visible[data-animation="fade-up"] {
	transform: translateY(0);
}

.mwarp .mcontents .reveal-main[data-animation="slide-up"] {
	transform: translateY(4.8rem);
}

.mwarp .mcontents .reveal-main.is-visible[data-animation="slide-up"] {
	transform: translateY(0);
}

.mwarp .mcontents .reveal-main[data-animation="slide-left"] {
	transform: translateX(-4rem);
}

.mwarp .mcontents .reveal-main.is-visible[data-animation="slide-left"] {
	transform: translateX(0);
}

.mwarp .mcontents .reveal-main[data-animation="slide-right"] {
	transform: translateX(4rem);
}

.mwarp .mcontents .reveal-main.is-visible[data-animation="slide-right"] {
	transform: translateX(0);
}

.mwarp .mcontents .reveal-main[data-animation="scale-in"] {
	transform: scale(0.94);
}

.mwarp .mcontents .reveal-main.is-visible[data-animation="scale-in"] {
	transform: scale(1);
}

.mwarp .mcontents .reveal-main[data-animation="fade-in"] {
	transform: none;
}

.mwarp .mcontents .reveal-main.is-visible[data-animation="fade-in"] {
	opacity: 1;
}

.mwarp .mcontents .reveal-main[data-animation="zoom-fade"] {
	transform: scale(1.06);
}

.mwarp .mcontents .reveal-main.is-visible[data-animation="zoom-fade"] {
	transform: scale(1);
}

/* 히어로 진입 — 페이저·스크롤 */
.hero-section .hero-pager,
.hero-section .hero-scroll {
	opacity: 0;
	transform: translateY(2.4rem);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section .hero-scroll {
	transform: translate(-50%, 2.4rem);
}

.hero-section.is-ready .hero-pager,
.hero-section.is-ready .hero-scroll {
	opacity: 1;
	transform: translateY(0);
}

.hero-section.is-ready .hero-scroll {
	transform: translate(-50%, 0);
}

.hero-section.is-ready .hero-pager { transition-delay: 0.78s; }
.hero-section.is-ready .hero-scroll { transition-delay: 0.95s; }

.hero-section .hero-bg {
	transform: scale(1.06);
	transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section.is-ready .hero-bg {
	transform: scale(1);
}

/* 히어로 텍스트 — 슬라이드 전환마다 순차 fade-up */
.hero-texts .hero-text .hero-en,
.hero-texts .hero-text .hero-tit-line
/* .hero-texts .hero-text .hero-desc */ {
	opacity: 0;
	transform: translateY(2.4rem);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-texts .hero-text.is-anim .hero-en {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.08s;
}

.hero-texts .hero-text.is-anim .hero-tit-line:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.22s;
}

.hero-texts .hero-text.is-anim .hero-tit-line:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.38s;
}

.hero-texts .hero-text.is-anim .hero-tit-line:nth-child(3) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.54s;
}

.hero-texts .hero-text.is-anim .hero-tit-line:nth-child(4) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.7s;
}

/* .hero-texts .hero-text.is-anim .hero-desc {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.54s;
} */

@media (prefers-reduced-motion: reduce) {
	.mwarp .mcontents .reveal-main,
	.hero-section .hero-pager,
	.hero-section .hero-scroll,
	.hero-section .hero-bg,
	.hero-texts .hero-text .hero-en,
	.hero-texts .hero-text .hero-tit-line,
	/* .hero-texts .hero-text .hero-desc, */
	.global-bg {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.about-visual:hover img,
	.mat-card:hover,
	.mat-card:hover .mat-card-img img,
	.facility-visual:hover img,
	.facility-cards a:hover,
	.inquiry-box:hover .inquiry-bg {
		transform: none !important;
	}
}

/* ==================================================
	메인비주얼 (풀페이지)
================================================== */
.hero-section {
	position: relative;
	height: 100vh;
	height: 100dvh;
	min-height: 70rem;
	overflow: hidden;
	background: var(--color-white2);
}

.hero-banner,
.hero-slide {
	position: absolute;
	inset: 0;
}

.hero-slide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1s ease, visibility 0s linear 1s;
	z-index: 0;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity 1s ease, visibility 0s linear 0s;
}

.hero-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero-slide--video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.28) 9%, rgba(255, 255, 255, 0) 20%),
		linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.48) 40%, rgba(255, 255, 255, 0.42) 64%, rgba(255, 255, 255, 0.14) 78%, rgba(255, 255, 255, 0) 90%);
}

.hero-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 0 var(--header-inner-padding);
	box-sizing: border-box;
}

.hero-texts {
	position: relative;
	max-width: none;
	width: 100%;
}

.hero-text {
	max-width: none;
}

.hero-texts .hero-text {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.hero-texts .hero-text.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.hero-texts .hero-text:not(.is-active) {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

/* Desktop 1920 — EN 20 / Tit 64 / Desc 24 */
.hero-en {
	margin: 0 0 3.2rem;
	font-family: var(--font-Barlow);
	font-weight: var(--font-sb);
	font-size: var(--rem-20);
	line-height: 1;
	letter-spacing: 0.1rem;
	color: var(--brand-color-main);
}

.hero-tit {
	margin: 0;
	font-family: var(--font-Pretendard);
	font-weight: var(--font-bd);
	font-size: 6.4rem;
	line-height: 1.22;
	letter-spacing: -0.128rem;
	color: var(--color-black);
}

.hero-tit-line {
	display: block;
	white-space: nowrap;
}

.hero-tit em {
	font-style: normal;
	font-weight: var(--font-bd);
	color: var(--brand-color-main);
}

/* 영문 2~4번 슬라이드 문장이 길어서 국문 히어로보다 커 보이지 않도록 */
.hero-texts .hero-text:not(.hero-text--video) .hero-en {
	font-size: 1.8rem;
}

.hero-texts .hero-text:not(.hero-text--video) .hero-tit {
	font-size: 4.8rem;
}

.hero-texts .hero-text--video .hero-en {
	font-size: 1.7rem;
	text-shadow: 0 0 0.8rem rgba(255, 255, 255, 0.95), 0 0 1.8rem rgba(255, 255, 255, 0.75);
}

.hero-texts .hero-text--video .hero-tit {
	font-size: clamp(3.6rem, 2.7vw, 5.2rem);
	max-width: 100%;
	text-shadow: 0 0 0.8rem rgba(255, 255, 255, 0.95), 0 0 1.8rem rgba(255, 255, 255, 0.75);
}

.hero-texts .hero-text--video .hero-tit-line {
	white-space: normal;
}

.hero-br {
	display: none;
}

/* .hero-desc {
	margin: 4rem 0 0;
	font-family: var(--font-Barlow);
	font-weight: var(--font-md);
	font-size: var(--rem-24);
	line-height: 1.2;
	color: var(--color-black);
	text-transform: capitalize;
} */

.hero-pager {
	position: absolute;
	left: var(--header-inner-padding);
	bottom: 8rem;
	display: flex;
	align-items: center;
	gap: 4.1rem;
}

/* Figma 218:462 — 01: 24 SemiBold blue / 03: 20 #333 */
.hero-pager-num {
	margin: 0;
	font-family: var(--font-Pretendard);
	font-weight: var(--font-sb);
	font-size: var(--rem-20);
	line-height: 1;
	color: #333;
	white-space: nowrap;
}

.hero-pager-num .current {
	font-size: var(--rem-24);
	color: var(--brand-color-main);
}

.hero-pager-total {
	font-size: var(--rem-20);
	color: #333;
}

.hero-pager-bars {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.hero-pager-bars button {
	display: block;
	box-sizing: content-box;
	width: 9.3rem;
	height: 0.6rem;
	padding: 1.1rem 0;
	margin: -1.1rem 0;
	border: 0;
	border-radius: 0;
	background-color: #A7AEB6;
	background-clip: content-box;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.35s ease;
}

.hero-pager-bars button.is-on {
	background-color: var(--brand-color-main);
}

.hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 4rem;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	transform: translateX(-50%);
	text-decoration: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero-section.is-ready .hero-scroll:hover {
	transform: translate(-50%, -0.5rem);
	opacity: 0.85;
}

.hero-scroll-txt {
	font-family: var(--font-Barlow);
	font-weight: var(--font-bd);
	font-size: var(--rem-12, 1.2rem);
	letter-spacing: 0.1em;
	color: var(--brand-color-main);
}

.hero-scroll-mouse {
	position: relative;
	width: 2.6rem;
	height: 4.1rem;
	border: 2px solid var(--brand-color-main);
	border-radius: 5rem;
	box-sizing: border-box;
}

.hero-scroll-dot {
	position: absolute;
	left: 50%;
	top: 1.2rem;
	width: 0.3rem;
	height: 0.8rem;
	margin-left: -0.15rem;
	border-radius: 5rem;
	background: var(--brand-color-main);
	animation: hero-scroll-dot 1.6s ease-in-out infinite;
}

@keyframes hero-scroll-dot {
	0%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}
	50% {
		transform: translateY(0.8rem);
		opacity: 0.35;
	}
}

/* ==================================================
	ABOUT YGS
================================================== */
.about-section {
	padding: 10rem var(--header-inner-padding);
	box-sizing: border-box;
}

.about-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(4rem, 4vw, 10rem);
	width: 100%;
	margin: 0 auto;
}

.about-visual {
	flex: 1 1 50%;
	max-width: none;
	aspect-ratio: 880 / 761;
	border-radius: 3rem;
	overflow: hidden;
}

.about-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-visual:hover img {
	transform: scale(1.04);
}

.about-content {
	flex: 1 1 42%;
	max-width: none;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(6rem, 5vw, 10rem);
}

.about-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4rem;
}

.about-head .m-en {
	margin-bottom: 2.5rem;
}

.about-head .m-tit {
	margin-top: 0;
	font-size: 5rem;
}

.about-links {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-links > li {
	flex: 1 1 0;
	position: relative;
	min-width: 0;
}

.about-links > li + li {
	padding-left: 5rem;
}

.about-links > li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background: var(--border-soft);
}

.about-links > li:first-child {
	padding-right: 5rem;
}

.about-links a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4.4rem;
	min-height: 12.8rem;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.35s ease;
}

.about-links a:hover {
	opacity: 1;
}

.about-links a:hover .about-links-tit {
	color: var(--brand-color-main);
}

.about-links-num {
	font-family: var(--font-Barlow);
	font-weight: var(--font-sb);
	font-size: var(--rem-22);
	line-height: 1;
	color: var(--brand-color-main);
	transition: transform 0.35s ease;
}

.about-links a:hover .about-links-num {
	transform: translateX(0.4rem);
}

.about-links-tit {
	font-family: var(--font-Pretendard);
	font-weight: var(--font-sb);
	font-size: var(--rem-30);
	line-height: 1.2;
	color: var(--color-black);
	white-space: nowrap;
	transition: color 0.35s ease;
}

.about-links-arrow {
	display: block;
	width: 2.4rem;
	height: 0.8rem;
	object-fit: contain;
	transition: transform 0.35s ease;
}

.about-links a:hover .about-links-arrow {
	transform: translateX(0.8rem);
}

/* ==================================================
	MATERIALS (keoc section2 참조)
	- 좌측 타이틀 sticky pin
	- 2·4번 카드 교차(translateY) 배치
	- 이미지 clip-path 리빌
================================================== */
.materials-section {
	position: relative;
	/* Figma 취급강종: py 100~105.5 — 체감 여백 확보로 상·하 동일하게 확대 */
	padding: 16rem var(--header-inner-padding) 16rem;
	overflow: visible;
	box-sizing: border-box;
}

.materials-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

/* Figma 201:611 — 동일 배경을 상·하 2레이어 + 화이트 페이드 */
.materials-bg-layer {
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
}

.materials-bg-layer img {
	display: block;
	position: absolute;
	max-width: none;
	pointer-events: none;
}

.materials-bg-layer::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Rectangle 113: h 1137 / section 1999 */
.materials-bg-layer--top {
	top: 0;
	height: 56.88%;
}

.materials-bg-layer--top img {
	left: -19.09%;
	top: -27.14%;
	width: 138.18%;
	height: 100%;
	object-fit: cover;
}

.materials-bg-layer--top::after {
	background: linear-gradient(
		to top,
		var(--color-white) 29.595%,
		rgba(255, 255, 255, 0) 61.873%
	);
}

/* Rectangle 114: y 913, h 1086 / section 1999 — 상단 레이어와 겹치며 반전 */
.materials-bg-layer--bottom {
	top: 45.67%;
	height: 54.33%;
}

.materials-bg-layer--bottom img {
	/* Figma: left 119.09% / w -138.18% → 수평 반전 크롭 = top과 동일 폭 */
	left: -19.09%;
	top: 0;
	width: 138.18%;
	height: 104.7%;
	object-fit: cover;
	transform: scale(-1);
	transform-origin: center center;
}

.materials-bg-layer--bottom::after {
	background: linear-gradient(
		to bottom,
		var(--color-white) 4.617%,
		rgba(255, 255, 255, 0) 25.154%
	);
}

.materials-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(42rem, 0.42fr) minmax(0, 1fr);
	gap: clamp(4rem, 3.5vw, 8rem) clamp(4rem, 4vw, 8rem);
	align-items: start;
	width: 100%;
	margin: 0 auto;
}

@media (min-width: 1920px) {
	.mwarp .materials-intro .m-tit-lines {
		font-size: 4.6rem;
		white-space: normal;
	}

	.materials-inner:has(.m-tit-lines) {
		grid-template-columns: minmax(52rem, 0.4fr) minmax(0, 1fr);
	}
}

.materials-sticky-wrap {
	align-self: start;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.materials-intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4rem;
	position: sticky;
	top: calc(var(--header-hei) + 8rem);
	align-self: start;
	z-index: 2;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.materials-intro .m-en {
	margin-bottom: 2.5rem;
}

.materials-intro .m-desc b {
	white-space: nowrap;
}

.materials-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2.4rem, 2vw, 4.1rem);
	align-items: start;
	width: 100%;
}

/* 좌·우 컬럼 분리 — 우측 stagger가 좌측(mat-card--3) 상단 여백에 영향 주지 않음 */
.materials-col {
	display: flex;
	flex-direction: column;
	gap: 12rem; /* Figma: card1→3 / card2→4 = 120px */
	min-width: 0;
}

.materials-col--offset {
	/* Figma: 우측 컬럼 top 420px */
	padding-top: 42rem;
}

.mat-card {
	display: flex;
	flex-direction: column;
	gap: clamp(2.4rem, 2.5vw, 5rem);
	text-decoration: none;
	color: inherit;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mat-card:hover {
	transform: translateY(-0.6rem);
}

.mat-card-img {
	position: relative;
	width: 100%;
	aspect-ratio: 563 / 500;
	border-radius: 3rem;
	overflow: hidden;
	background: var(--color-white2);
	opacity: 0;
}

.mat-card.is-inview .mat-card-img {
	animation: mat-img-motion 1s ease-in-out 0.1s forwards;
}

@keyframes mat-img-motion {
	0% {
		clip-path: inset(50%);
		opacity: 0;
	}
	100% {
		clip-path: inset(0);
		opacity: 1;
	}
}

.mat-card-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mat-card:hover .mat-card-img img {
	transform: scale(1.06);
}

.mat-card-txt {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	opacity: 0;
	transform: translateY(2.4rem);
	transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}

.mat-card.is-inview .mat-card-txt {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s ease 0.35s, transform 0.45s ease;
}

.mat-card.is-inview:hover .mat-card-txt {
	transform: translateY(-0.2rem);
}

.mat-card-tit {
	font-family: var(--font-Barlow);
	font-weight: var(--font-bd);
	font-size: var(--rem-32);
	line-height: 1.25;
	color: var(--color-black);
}

.mat-card-desc {
	font-family: var(--font-Pretendard);
	font-weight: var(--font-rg);
	font-size: 1.6rem;
	line-height: 1.5;
	color: var(--color-gray1);
}

/* ==================================================
	FACILITY
================================================== */
.facility-section {
	position: relative;
	padding: 10rem 0 0;
}

.facility-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4rem;
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--header-inner-padding);
	box-sizing: border-box;
}

.facility-head-txt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4rem;
}

.facility-head-txt .m-en {
	margin-bottom: 2.5rem;
}

.facility-visual {
	position: relative;
	margin-top: 8rem;
	width: 100%;
	height: 88.6rem;
	overflow: hidden;
}

.facility-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.facility-visual:hover img {
	transform: scale(1.03);
}

.facility-visual::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18%;
	background: linear-gradient(180deg, transparent, var(--color-white));
	pointer-events: none;
}

.facility-cards {
	display: flex;
	gap: 2.6rem;
	width: 100%;
	margin: -10.5rem auto 0;
	padding: 0 var(--header-inner-padding) 10rem;
	list-style: none;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
}

.facility-cards > li {
	flex: 1 1 0;
	min-width: 0;
}

.facility-cards a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.6rem;
	min-height: 20.9rem;
	padding: 0 4rem;
	border: 1px solid var(--border-soft);
	border-radius: 2rem;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(2px);
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s ease,
		border-color 0.35s ease,
		background 0.35s ease;
}

.facility-cards a:hover {
	transform: translateY(-0.8rem);
	box-shadow: 0 1.6rem 3.6rem rgba(7, 65, 159, 0.1);
	border-color: var(--brand-color-main);
	background: rgba(255, 255, 255, 0.98);
}

.facility-card-tit {
	font-family: var(--font-Barlow);
	font-weight: var(--font-sb);
	font-size: var(--rem-28);
	line-height: 1.2;
	color: var(--brand-color-main);
	transition: transform 0.35s ease;
}

.facility-cards a:hover .facility-card-tit {
	transform: translateX(0.4rem);
}

.facility-card-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
}

.facility-card-desc {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-Pretendard);
	font-weight: var(--font-rg);
	font-size: 1.6rem;
	line-height: 1.4;
	color: var(--color-gray1);
}

.facility-card-arrow {
	flex: 0 0 auto;
	width: 3.2rem;
	height: 0.8rem;
	object-fit: contain;
	transition: transform 0.35s ease;
}

.facility-cards a:hover .facility-card-arrow {
	transform: translateX(0.8rem);
}

/* ==================================================
	GLOBAL NETWORK (Figma 201:673)
================================================== */
.global-section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Figma: 1920×847, pt 100 / pb 500 */
	min-height: 84.7rem;
	padding: 10rem var(--header-inner-padding) 50rem;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
}

.global-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(3rem);
	transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}

.global-section.is-inview .global-bg {
	opacity: 1;
	transform: translateY(0);
}

.global-bg img {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	/* 상단 여백 유지 + 지구 위치 (조금 아래) */
	top: -12%;
	height: 112%;
	object-fit: cover;
	object-position: center bottom;
}

.global-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Figma: text group ↔ MORE = 50px */
	gap: 5rem;
	width: 100%;
}

.global-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Figma: en ↔ copy = 65px */
	gap: 6.5rem;
}

.global-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.4rem;
}

.global-copy .m-tit {
	line-height: 1.15;
}

.global-copy .m-desc {
	line-height: 1.4;
}

.global-inner .m-en {
	margin-bottom: 0;
}

.global-inner .m-tit,
.global-inner .m-desc {
	text-align: center;
}

/* ==================================================
	INQUIRY
================================================== */
.inquiry-section {
	padding: 10rem var(--header-inner-padding);
	box-sizing: border-box;
}

.inquiry-box {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 54rem;
	padding: 10rem 8rem;
	border-radius: 3rem;
	overflow: hidden;
	background: var(--color-white2);
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.inquiry-bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.inquiry-box:hover .inquiry-bg {
	transform: scale(1.03);
}

.inquiry-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4rem;
	max-width: 120rem;
}

.inquiry-content .m-en {
	margin-bottom: 2.5rem;
}

.inquiry-content .m-more {
	font-family: var(--font-Pretendard);
}

/* ==================
	반응형CSS
	1600 / 1400 / 1280 / 1024 / 768 / 480
=====================*/
@media (max-width: 1600px) {
	.hero-tit {
		font-size: 5.6rem;
	}

	.hero-texts .hero-text--video .hero-tit {
		font-size: 4.6rem;
	}

	.hero-en {
		font-size: var(--rem-18);
		margin-bottom: 2.8rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-en {
		font-size: 1.6rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-tit {
		font-size: 4.2rem;
	}

	/* .hero-desc {
		font-size: var(--rem-22);
		margin-top: 3.2rem;
	} */

	.mwarp .m-tit {
		font-size: 4.8rem;
	}

	.mwarp .facility-head-txt .m-tit,
	.mwarp .inquiry-content .m-tit,
	.mwarp .global-copy .m-tit {
		font-size: 3.6rem;
	}

	.mwarp .materials-intro .m-tit {
		font-size: 3.8rem;
	}

	.about-inner,
	.materials-inner {
		gap: 5rem;
	}

	.about-head {
		gap: 3.2rem;
	}

	.materials-section {
		padding-top: 12rem;
		padding-bottom: 12rem;
	}

	.materials-col {
		gap: 8rem;
	}

	.materials-col--offset {
		padding-top: 32rem;
	}

	.mat-card-tit {
		font-size: var(--rem-28);
	}

	.facility-visual {
		height: 70rem;
	}

	.facility-cards a {
		padding: 0 3.2rem;
		min-height: 18rem;
	}

	.global-section {
		min-height: 76rem;
		padding-bottom: 42rem;
	}

	.inquiry-box {
		padding: 8rem 6rem;
		min-height: 50rem;
	}
}

@media (max-width: 1400px) {
	.hero-pager {
		bottom: 6rem;
	}

	.hero-tit {
		font-size: 5.2rem;
	}

	.hero-texts .hero-text--video .hero-tit {
		font-size: 4.2rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-tit {
		font-size: 4rem;
	}

	/* .hero-desc {
		font-size: var(--rem-20);
		margin-top: 3rem;
	} */

	.about-links-tit {
		font-size: var(--rem-24);
	}

	.about-links > li + li {
		padding-left: 3.2rem;
	}

	.about-links > li:first-child {
		padding-right: 3.2rem;
	}

	.materials-inner {
		grid-template-columns: 1fr;
	}

	.materials-sticky-wrap {
		height: auto !important;
	}

	.materials-intro {
		position: static;
		top: auto;
		max-width: none;
	}

	.materials-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
	}

	.materials-col {
		gap: 6rem;
	}

	.materials-col--offset {
		padding-top: 12rem;
	}

	.facility-visual {
		height: 56rem;
		margin-top: 6rem;
	}

	.facility-cards {
		margin-top: -8rem;
	}

	.inquiry-box {
		padding: 8rem 5rem;
		min-height: 48rem;
	}
}

/* site token: --header-inner-padding 2rem / html 9.5px */
@media (max-width: 1280px) {
	.hero-section {
		min-height: 60rem;
	}

	.hero-tit {
		font-size: 4.4rem;
	}

	.hero-texts .hero-text--video .hero-tit {
		font-size: 3.6rem;
	}

	.hero-tit-line {
		white-space: normal;
	}

	.hero-en {
		font-size: var(--rem-16);
		margin-bottom: 2.2rem;
	}

	.hero-texts .hero-text--video .hero-en {
		font-size: 1.5rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-en {
		font-size: 1.5rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-tit {
		font-size: 3.4rem;
	}

	/* .hero-desc {
		font-size: var(--rem-18);
		margin-top: 2.4rem;
	} */

	.hero-pager {
		bottom: 5.5rem;
	}

	.hero-pager-bars button {
		width: 7rem;
	}

	.mwarp .m-tit {
		font-size: 4rem;
	}

	.mwarp .facility-head-txt .m-tit,
	.mwarp .inquiry-content .m-tit,
	.mwarp .global-copy .m-tit {
		font-size: 3.2rem;
	}

	.mwarp .m-en {
		font-size: var(--rem-26);
	}

	.mwarp .m-desc,
	.mat-card-desc,
	.facility-card-desc {
		font-size: 1.5rem;
	}

	.about-section,
	.inquiry-section {
		padding-top: 8rem;
		padding-bottom: 8rem;
	}

	.about-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 4rem;
	}

	.about-visual {
		flex: none;
		max-width: none;
		width: 100%;
		max-height: 52rem;
	}

	.about-content {
		gap: 4.8rem;
		max-width: none;
	}

	.about-head {
		gap: 2.4rem;
		max-width: none;
	}

	.about-links > li + li {
		padding-left: 2.4rem;
	}

	.about-links > li:first-child {
		padding-right: 2.4rem;
	}

	.about-links a {
		gap: 3.2rem;
		min-height: 10rem;
	}

	.about-links-tit {
		font-size: var(--rem-22);
		white-space: normal;
	}

	.materials-section {
		padding-top: 8rem;
		padding-bottom: 8rem;
	}

	.materials-grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 5.6rem;
	}

	.materials-col {
		gap: 5.6rem;
	}

	.materials-col--offset {
		padding-top: 0;
	}

	.mat-card {
		gap: 2.8rem;
	}

	.mat-card-tit {
		font-size: var(--rem-26);
	}

	.mat-card-desc {
		font-size: 1.5rem;
	}

	.facility-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 3.2rem;
	}

	.facility-head-txt {
		gap: 2.8rem;
	}

	.facility-visual {
		height: 44rem;
		margin-top: 5rem;
	}

	.facility-cards {
		gap: 1.6rem;
		margin-top: -6rem;
		padding-bottom: 8rem;
	}

	.facility-cards a {
		padding: 0 2.4rem;
		min-height: 16rem;
		gap: 1.6rem;
	}

	.facility-card-tit {
		font-size: var(--rem-24);
	}

	.facility-card-desc {
		font-size: 1.5rem;
	}

	.global-section {
		min-height: 56rem;
		padding-top: 8rem;
		padding-bottom: 28rem;
	}

	.global-head {
		gap: 4rem;
	}

	.global-inner {
		gap: 4rem;
	}

	.inquiry-box {
		min-height: 42rem;
		padding: 6rem 4rem;
	}

	.inquiry-content {
		gap: 3.2rem;
		max-width: 56rem;
	}
}

@media (max-width: 1200px) {
	.inquiry-content .m-tit br,
	.facility-head-txt .m-tit br,
	.materials-intro .m-tit br,
	.about-head .m-tit br,
	.m-desc br {
		display: none;
	}

	.materials-intro .m-desc .materials-desc-end {
		white-space: nowrap;
	}
}

@media (max-width: 1024px) {
	.hero-tit {
		font-size: 3.8rem;
	}

	.hero-texts .hero-text--video .hero-tit {
		font-size: 3.1rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-tit {
		font-size: 2.8rem;
	}

	.hero-pager-bars button {
		width: 6rem;
	}

	.mwarp .m-tit {
		font-size: 3.4rem;
	}

	.mwarp .facility-head-txt .m-tit,
	.mwarp .inquiry-content .m-tit,
	.mwarp .global-copy .m-tit {
		font-size: 2.8rem;
	}

	.mwarp .m-en {
		font-size: var(--rem-24);
	}

	.mwarp .m-desc,
	.mat-card-desc,
	.facility-card-desc {
		font-size: 1.45rem;
	}

	.about-section,
	.materials-section,
	.inquiry-section {
		padding-top: 6.4rem;
		padding-bottom: 6.4rem;
	}

	.about-links {
		flex-direction: column;
		gap: 0;
	}

	.about-links > li,
	.about-links > li + li,
	.about-links > li:first-child {
		padding: 0;
	}

	.about-links > li + li {
		margin-top: 2.4rem;
		padding-top: 2.4rem;
	}

	.about-links > li + li::before {
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
	}

	.about-links a {
		min-height: 0;
		gap: 1.6rem;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.about-links-tit {
		font-size: var(--rem-20);
	}

	.about-links-arrow {
		margin-left: auto;
	}

	.materials-grid {
		row-gap: 4.8rem;
	}

	.materials-col {
		gap: 4.8rem;
	}

	.mat-card {
		gap: 2.4rem;
	}

	.mat-card-tit {
		font-size: var(--rem-24);
	}

	.facility-visual {
		height: 40rem;
		margin-top: 4.8rem;
	}

	.facility-cards {
		flex-direction: column;
		margin-top: -4rem;
		padding-bottom: 6.4rem;
	}

	.facility-cards a {
		min-height: 0;
		padding: 2.8rem 2.4rem;
	}

	.global-section {
		min-height: 52rem;
		padding-top: 6.4rem;
		padding-bottom: 24rem;
	}

	.inquiry-box {
		min-height: 38rem;
		padding: 5.6rem 3.2rem;
	}

	.inquiry-bg {
		opacity: 0.35;
		object-position: center;
	}
}

@media (max-width: 768px) {
	.hero-section {
		min-height: 0;
		height: 100svh;
		height: 100dvh;
	}

	/* 2·3번: 상단 밝은 그라데이션으로 컬러 로고 가독성 확보 */
	.hero-slide:nth-child(2)::after,
	.hero-slide:nth-child(3)::after {
		content: "";
		position: absolute;
		inset: 0 0 auto;
		height: 28%;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.72) 0%,
			rgba(255, 255, 255, 0.38) 45%,
			rgba(255, 255, 255, 0) 100%
		);
	}

	.hero-inner {
		padding-bottom: 12rem;
		box-sizing: border-box;
	}

	.hero-tit {
		font-size: 3.2rem;
		line-height: 1.3;
	}

	.hero-texts .hero-text--video .hero-tit {
		font-size: 2.6rem;
	}

	.hero-en {
		font-size: var(--rem-14);
		margin-bottom: 1.8rem;
		letter-spacing: 0.06rem;
	}

	.hero-texts .hero-text--video .hero-en {
		font-size: 1.3rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-en {
		font-size: 1.3rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-tit {
		font-size: 2.4rem;
	}

	/* .hero-desc {
		font-size: var(--rem-16);
		margin-top: 2rem;
	} */

	.hero-pager {
		bottom: 9rem;
		gap: 1.2rem 1.6rem;
		flex-wrap: wrap;
		max-width: calc(100% - 7rem);
	}

	.hero-pager-num {
		font-size: var(--rem-16);
	}

	.hero-pager-num .current {
		font-size: var(--rem-20);
	}

	.hero-pager-bars {
		gap: 0.8rem;
	}

	.hero-pager-bars button {
		width: 4.8rem;
	}

	.hero-scroll {
		bottom: 2rem;
		gap: 0.8rem;
	}

	.about-section,
	.materials-section,
	.inquiry-section,
	.facility-section {
		padding-top: 5.6rem;
	}

	.about-section,
	.materials-section,
	.inquiry-section {
		padding-bottom: 5.6rem;
	}

	.about-head {
		gap: 2rem;
	}

	.about-content {
		gap: 3.6rem;
	}

	.about-links > li + li {
		margin-top: 2rem;
		padding-top: 2rem;
	}

	.about-links-tit {
		font-size: var(--rem-18);
	}

	.about-links-num {
		font-size: var(--rem-18);
	}

	.about-visual,
	.mat-card-img,
	.inquiry-box {
		border-radius: 2rem;
	}

	.mat-card-tit {
		font-size: var(--rem-22);
	}

	.mat-card-desc,
	.mwarp .m-desc {
		font-size: 1.4rem;
	}

	.mat-card {
		gap: 2rem;
	}

	.materials-grid {
		row-gap: 4rem;
	}

	.materials-col {
		gap: 4rem;
	}

	.facility-head-txt {
		gap: 2.4rem;
	}

	.facility-visual {
		height: 32rem;
		margin-top: 4rem;
	}

	.facility-cards {
		margin-top: -3.2rem;
		padding-bottom: 5.6rem;
		gap: 1.2rem;
	}

	.facility-cards a {
		padding: 2.4rem 2rem;
		gap: 1.4rem;
		min-height: 0;
	}

	.facility-card-tit {
		font-size: var(--rem-20);
	}

	.facility-card-desc {
		font-size: 1.4rem;
	}

	.global-section {
		min-height: 40rem;
		padding-top: 5.6rem;
		padding-bottom: 16rem;
	}

	.global-head {
		gap: 3.2rem;
	}

	.global-inner {
		gap: 3.2rem;
	}

	.global-copy {
		gap: 1.6rem;
	}

	.mwarp .m-tit {
		font-size: 2.8rem;
	}

	.mwarp .facility-head-txt .m-tit,
	.mwarp .inquiry-content .m-tit,
	.mwarp .global-copy .m-tit {
		font-size: 2.4rem;
	}

	.mwarp .m-en {
		font-size: var(--rem-22);
	}

	.mwarp .m-en-dot {
		width: 1.6rem;
		height: 1.6rem;
		margin-top: -0.45rem;
	}

	.mwarp .m-en::after {
		width: 1.6rem;
		height: 1.6rem;
		margin-top: -0.45rem;
	}

	.inquiry-box {
		padding: 4.8rem 2.4rem;
		min-height: 32rem;
	}

	.inquiry-content {
		gap: 2.4rem;
		max-width: none;
	}
}

@media (max-width: 480px) {
	.hero-inner {
		padding-bottom: 13rem;
	}

	.hero-tit {
		font-size: 2.6rem;
		letter-spacing: -0.05rem;
	}

	.hero-texts .hero-text--video .hero-tit {
		font-size: 2.2rem;
	}

	.hero-br {
		display: inline;
	}

	.hero-en {
		font-size: 1.4rem;
		margin-bottom: 1.4rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-en {
		font-size: 1.3rem;
	}

	.hero-texts .hero-text:not(.hero-text--video) .hero-tit {
		font-size: 2.2rem;
	}

	/* .hero-desc {
		font-size: 1.4rem;
		margin-top: 1.6rem;
	} */

	.hero-pager {
		bottom: 10rem;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.2rem;
		max-width: none;
	}

	.hero-pager-bars button {
		width: 3.6rem;
	}

	.hero-scroll {
		bottom: 1.6rem;
		gap: 0.6rem;
	}

	.hero-scroll-mouse {
		width: 2.2rem;
		height: 3.4rem;
	}

	.about-section,
	.materials-section,
	.inquiry-section,
	.facility-section {
		padding-top: 4.8rem;
	}

	.about-section,
	.materials-section,
	.inquiry-section {
		padding-bottom: 4.8rem;
	}

	.about-visual {
		max-height: 36rem;
		border-radius: 1.6rem;
	}

	.about-links-tit {
		font-size: 1.6rem;
	}

	.mat-card-img {
		border-radius: 1.6rem;
	}

	.mat-card-tit {
		font-size: 1.9rem;
	}

	.mat-card-desc {
		font-size: 1.4rem;
	}

	.materials-grid {
		row-gap: 3.2rem;
	}

	.materials-col {
		gap: 3.2rem;
	}

	.facility-visual {
		height: 24rem;
		margin-top: 3.2rem;
	}

	.facility-cards {
		margin-top: -2.4rem;
		padding-bottom: 4.8rem;
	}

	.facility-cards a {
		padding: 2rem 1.6rem;
		border-radius: 1.6rem;
	}

	.facility-card-tit {
		font-size: 1.8rem;
	}

	.facility-card-desc {
		font-size: 1.4rem;
	}

	.facility-card-arrow {
		width: 2.4rem;
	}

	.global-section {
		min-height: 32rem;
		padding-top: 4.8rem;
		padding-bottom: 12rem;
	}

	.global-bg img {
		top: 0;
		height: 100%;
	}

	.mwarp .m-tit {
		font-size: 2.4rem;
		line-height: 1.35;
	}

	.mwarp .facility-head-txt .m-tit,
	.mwarp .inquiry-content .m-tit,
	.mwarp .global-copy .m-tit {
		font-size: 2.2rem;
	}

	.mwarp .m-en {
		font-size: 2rem;
	}

	.mwarp .m-desc {
		font-size: 1.4rem;
	}

	.mwarp .m-more {
		font-size: 1.4rem;
	}

	.inquiry-box {
		padding: 4rem 2rem;
		min-height: 28rem;
		border-radius: 1.6rem;
	}

	.inquiry-content {
		gap: 2rem;
	}
}