@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* =========================================================
   기본 (리셋 · 스크롤바)
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
	word-break: keep-all;
	margin: 0;
	padding: 0;
}
* {
	font-family: "Pretendard Variable","Poppins", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 500;
	outline: none;
	word-break: keep-all;
	transition: ease 0.5s;
	font-size: 18px;
	letter-spacing: -0.01em;
	line-height: 1.6;
}
body {
	color: #0F0F10;
	outline: none;
	scroll-behavior: smooth;
}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
}
ul,
ol,
li {
	list-style: none;
	margin: 0;
	padding: 0;
}
a {
	color: inherit;
	text-decoration: none;
}
html::-webkit-scrollbar {
	width: 10px;
}
html::-webkit-scrollbar-thumb {
	background-color: #6b6b6b;
	border-radius: 10px;
	background-clip: padding-box;
	border: 2px solid transparent;
}
html::-webkit-scrollbar-track {
	background-color: #ebebeb;
	border-radius: 10px;
}

/* =========================================================
   변수
   ========================================================= */
:root {
	/* 레이아웃 · 반응형 크기 계산 기준 */
	--header-height: 105px;
	--base-ratio: 0.75;
	--base-size: 1680;
	--inner: 1760px;
	--contents: 1560px;
	--base-percent: 100vw;

	/* 헤더: --hd-bar 막대 높이 / --hd-top 맨 위에 있을 때 위에서 띄우는 거리
	   PC 는 시안(Frame 2) 기준: 폭 1760px 가운데, 높이 80px, 위에서 30px */
	--hd-pad-x: clamp(20px, 3.2vw, 60px);
	--hd-bar: 64px;
	--hd-top: 0px;

	/* 색 · 효과 */
	--ink: #0b1220;
	--muted: #556173;
	--bg: #ffffff;
	--soft: #dfe6f1;
	--navy: #0b2140;
	--radius: 18px;
	--shadow: 0 18px 50px rgba(2,8,23,.12);
	--overlap: 120px;
	--stickyTop: 96px;
}
@media (min-width: 1200px) {
	:root {
		--hd-bar: 80px;
		--hd-top: 30px;
	}
}

/* =========================================================
   공통 레이아웃 · 타이포그래피 · 배경
   ========================================================= */
.con-title {
	margin: max(calc(80px * var(--base-ratio)), calc(calc(80 / var(--base-size)) * var(--base-percent))) 0;
}
.title {
	font-size: clamp( 20px, calc(20px + (12 * ((100vw - 640px) / 1280))), 32px);
	font-weight: 700;
	word-break:keep-all;
}
.main-title {
	font-size: clamp(24px, calc(24px + (16 * ((100vw - 375px) / 1545))), 40px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	word-break: keep-all;
}
.main-text {
	font-size: clamp( 18px, calc(18px + (10 * ((100vw - 640px) / 1280))), 24px);
	font-weight: 400;
	line-height: 1.4;
	padding-top: 20px;
	padding-bottom: 60px;
}
.title.sec-title {
	margin-bottom: max(calc(30px * var(--base-ratio)), calc(calc(30 / var(--base-size)) * var(--base-percent)));
}
.text {
	margin-top: max(calc(20px * var(--base-ratio)), calc(calc(20 / var(--base-size)) * var(--base-percent)));
	font-size: clamp(17px, calc(17px + (5 * ((100vw - 640px) / 1280))),22px);
	font-weight: 300;
	word-break:keep-all;
}
.inner {
	max-width: var(--inner);
	padding: 0 clamp( 20px, calc((60 / var(--base-size)) * var(--base-percent)), 60px);
	width: 100%;
	margin: 0 auto;
}
.__bg {
	padding: clamp(60px, calc((120 / var(--base-size)) * var(--base-percent)), 120px) 0 clamp(80px, calc((150 / var(--base-size)) * var(--base-percent)), 150px) 0;
}

@media (max-width: 640px) {
	.text {
		font-weight: 400;
	}
}

/* 배경 이미지 컨테이너: ::before 에 이미지, 화면에 보이면(.is-visible, script.js) 확대 → 원래 크기 */
.bg-cont {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.bg-cont::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: -1;
	transform: scale(1.2);
	transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1);
}
.bg-cont.is-visible::before {
	transform: scale(1.0);
}

/* =========================================================
   헤더 · 언어 선택 · 내비게이션
   - 1200px 이상: 가로 메뉴 + 항목별 드롭다운(네이비 패널), hover / 키보드 포커스로 열림
   - 1199.98px 이하: 햄버거 → 헤더 아래 전체 화면 패널, 1차 메뉴 탭하면 아코디언으로 열림
   - 상태 클래스는 js/script.js 가 붙임
     #header.is-open  : 모바일 메뉴 열림 (body.nav-open 으로 스크롤 잠금)
     .dropdown__item.is-open : 모바일 아코디언 열린 항목
   ========================================================= */
#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: var(--hd-top);
	transition: transform .4s ease, padding-top .3s ease, background-color .3s ease, backdrop-filter .3s ease;
}
/* 스크롤해서 배경이 생기면 위 여백 없이 화면 맨 위에 붙음 */
#header.show,
#header.is-open {
	padding-top: 0;
}
#header .header_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: min(var(--inner), calc(100% - var(--hd-pad-x) * 2));
	height: var(--hd-bar);
	padding: 0;
	margin: 0 auto;
}

/* 스크롤 내릴 때 헤더 올라감(hide) / 올릴 때 반투명 배경으로 내려옴(show) */
#header.hide {
	transform: translateY(-100%);
}
#header.show {
	transform: translateY(0);
	background: rgba(255, 255, 255, .85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* 로고: 투명 헤더에서는 흰 로고, 배경이 생기면 컬러 로고 */
.nav__data {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
#header .logo {
	display: block;
	position: relative;
	z-index: 2;
	width: clamp(140px, 11vw, 200px);
}
.logo img {
	display: block;
	width: 100%;
}
.logo .c_logo,
#header.show .logo .w_logo,
#header.is-open .logo .w_logo {
	display: none;
}
#header.show .logo .c_logo,
#header.is-open .logo .c_logo {
	display: block;
}

/* ---------- 언어 선택 ---------- */
.pc_login {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}
.pc_login .language {
	position: relative;
}
.pc_login .lang_btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.pc_login .lang_btn img {
	width: 20px;
	height: 20px;
}
#header.show .pc_login .lang_btn,
#header.is-open .pc_login .lang_btn {
	color: #0f0f10;
}
#header.show .pc_login .lang_btn img,
#header.is-open .pc_login .lang_btn img {
	filter: invert(1);
}
.pc_login .lang_dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 70px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	text-align: center;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.pc_login .language:hover .lang_dropdown,
.pc_login .language:focus-within .lang_dropdown,
.pc_login .language.is-open .lang_dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .2s, transform .2s;
}
.pc_login .lang_dropdown li a {
	display: block;
	padding: 6px 12px;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .2s ease;
}
.pc_login .lang_dropdown li a:hover,
.pc_login .lang_dropdown li a.active {
	background-color: #f1f5f9;
	color: #0055b8;
	font-weight: 700;
}

/* ---------- 햄버거 버튼 ---------- */
.nav__toggle {
	display: none;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.nav__burger {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
.nav__burger div {
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform .35s ease, opacity .2s ease, background-color .3s ease;
}
#header.show .nav__burger div,
#header.is-open .nav__burger div {
	background: #0f0f10;
}
#header.is-open .nav__burger .line1 {
	transform: translateY(8px) rotate(45deg);
}
#header.is-open .nav__burger .line2 {
	opacity: 0;
}
#header.is-open .nav__burger .line3 {
	transform: translateY(-8px) rotate(-45deg);
}
/* 예전 닫기 아이콘 마크업은 쓰지 않음 (햄버거 선이 X 로 바뀜) */
.nav__close {
	display: none;
}
.nav__toggle:focus-visible {
	outline: 2px solid #0055b8;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- 메뉴 공통 ---------- */
.nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav__link {
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.dropdown__menu {
	margin: 0;
	list-style: none;
}
.dropdown__link {
	display: block;
	text-decoration: none;
}

/* =========================================================
   PC (1200px 이상)
   ========================================================= */
@media (min-width: 1200px) {
	.nav__menu {
		flex: 1;
		display: flex;
		justify-content: center;
		height: 100%;
		min-width: 0;
	}
	.nav__list {
		display: flex;
		align-items: stretch;
		column-gap: clamp(20px, 2.6vw, 56px);
		height: 100%;
	}
	.dropdown__item {
		position: relative;
		display: flex;
		align-items: center;
	}
	.nav__link {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
		color: #fff;
		font-size: clamp(15px, 1.05vw, 18px);
		transition: color .3s;
	}
	/* 밑줄 */
	.nav__link::after {
		display:none;
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 18px;
		height: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .3s ease;
	}
	.dropdown__item:hover .nav__link::after,
	.dropdown__item:focus-within .nav__link::after {
		transform: scaleX(1);
	}
	#header.show .nav__link {
		color: #0f0f10;
	}
	/* 드롭다운: 헤더 바로 아래(top: 100%)에서 열림.
	   ::before 투명 다리로 위쪽 틈을 메워 마우스가 내려가는 사이 닫히지 않게 함 */
	.dropdown__menu {
		position: absolute;
		top: calc(100%);
		left: 50%;
		min-width: 200px;
		padding: 14px 0 16px;
		text-align: center;
		background: #182055;
		border-radius: 8px;
		box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .35);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 8px);
		transition: opacity .2s ease, transform .25s ease, visibility 0s .25s;
		pointer-events: none;
	}
	.dropdown__item:hover .dropdown__menu,
	.dropdown__item:focus-within .dropdown__menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity .2s ease, transform .25s ease;
		pointer-events: auto;
	}
	.dropdown__menu::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 16px;
	}
	.dropdown__link {
		padding: 7px 24px;
		color: rgba(255, 255, 255, .85);
		font-size: 16px;
		font-weight: 500;
		white-space: nowrap;
		transition: color .2s, background-color .2s;
	}
	.dropdown__link:hover,
	.dropdown__link:focus-visible {
		color: #fff;
		background: rgba(255, 255, 255, .08);
	}
}

/* =========================================================
   태블릿 · 모바일 (1199px 이하): 햄버거 + 전체 화면 패널
   ========================================================= */
@media (max-width: 1199.98px) {
	:root {
		--hd-bar: 64px;
	}
	#header .header_container {
		gap: 8px;
	}
	.nav__data {
		display: contents;
	}
	#header .logo {
		order: 0;
		margin-right: auto;
	}
	.pc_login {
		order: 1;
	}
	.nav__toggle {
		display: block;
		order: 2;
		margin-right: -8px;
	}
	#header.is-open {
		background: #fff;
		transform: none;
	}
	.nav__menu {
		position: fixed;
		top: var(--hd-bar);
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100vh - var(--hd-bar));
		height: calc(100dvh - var(--hd-bar));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px var(--hd-pad-x) 40px;
		background: #fff;
		border-top: 1px solid #eee;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
	}
	/* 전환 효과는 JS 준비(.nav-ready) 후에만: 페이지 로딩 때 메뉴가 비쳐 보이는 현상 방지 */
	#header.nav-ready .nav__menu {
		transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
	}
	#header.is-open .nav__menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	#header.nav-ready.is-open .nav__menu {
		transition: opacity .3s ease, transform .3s ease;
	}
	.dropdown__item {
		border-bottom: 1px solid #eee;
	}
	.nav__link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18px 0;
		color: #0f0f10;
		font-size: 18px;
		font-weight: 700;
		-webkit-tap-highlight-color: transparent;
	}
	/* + 아이콘 → 열리면 X 로 회전 */
	.nav__link::after {
		content: '';
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		margin-left: 12px;
		background:
			linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
		transition: transform .3s ease;
	}
	.dropdown__item.is-open .nav__link::after {
		transform: rotate(45deg);
	}
	.dropdown__item.is-open .nav__link {
		color: #0055b8;
	}
	/* 아코디언: 높이는 JS 가 scrollHeight 로 넣어 줌 */
	.dropdown__menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height .35s ease;
	}
	.dropdown__menu::after {
		content: '';
		display: block;
		height: 14px;
	}
	.dropdown__link {
		padding: 9px 0 9px 4px;
		color: #555;
		font-size: 16px;
	}
	.dropdown__link:active,
	.dropdown__link:hover {
		color: #0055b8;
	}
	/* 메뉴 열린 동안 뒤 페이지 스크롤 잠금 */
	body.nav-open {
		overflow: hidden;
	}
}

@media (max-width: 640px) {
	.pc_login .lang_btn {
		padding: 8px 6px;
		font-size: 14px;
	}
}

/* =========================================================
   메인 - 히어로 · 공통 배경
   ========================================================= */
/* UI 컨트롤러 */
.custom-pagination-inner {
	position: absolute;
	bottom: clamp(36px, 6vh, 60px);
	right: var(--hd-pad-x);
	left: auto;
	transform: none;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 15px;
	width: 280px;
	/* PC에서 프로그레스바 너비 */
}
.progress-bar-container {
	flex: 1;
	height: 2px;
	background: rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
}
.progress-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: #ffffff;
	transition: none;
}
.progress-bar-fill.active {
	width: 100%;
	transition: width 3000ms linear;
}
.fraction-num {
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 1px;
	white-space: nowrap;
}
.hero-swiper {
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 520px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.hero-swiper .swiper-slide {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3rem;
	color: white;
	font-weight: bold;
}
/* 문구는 진행 바 위쪽에 두어 어떤 폭에서도 겹치지 않게 함 */
.hero-txt {
	position: absolute;
	left: 0;
	bottom: clamp(96px, 13vh, 150px);
	z-index: 2;
	width: 100%;
	padding: 0 var(--hd-pad-x);
	color: #fff;
	text-align: left;
	font-size: clamp(28px, calc(28px + (36 * ((100vw - 640px) / 1280))), 64px);
	font-weight: 600;
	line-height: 1.3;
	word-break: keep-all;
}
.hero-txt span {
	display: block;
	max-width: 22em;
	margin-top: 14px;
	font-size: clamp(16px, calc(16px + (18 * ((100vw - 640px) / 1280))), 34px);
	font-weight: 400;
	line-height: 1.5;
}
.hero-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transform-origin: center center;
	/* transform: translateX(-50%) scale(1);
	transition: transform 3s ease-out; */
	transform: translateX(-50%) scale(1.2);
	will-change: transform;
}
.hero-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
	z-index: 0;
}
.hero-bg-1 {
	background-image: url('../img/hero01.webp');
}
.hero-bg-2 {
	background-image: url('../img/hero02.webp');
}
.hero-bg-3 {
	background-image: url('../img/hero03.webp');
}
.hero-bg-4 {
	background-image: url('../img/hero04.webp');
}
.hero-swiper .swiper-slide-active .hero-bg {
	animation: heroScaleIn 4s ease-out forwards;
}
.hero-swiper .swiper-slide-prev .hero-bg {
	transform: translateX(-50%) scale(1);
}
@keyframes heroScaleIn {
	from { transform: translateX(-50%) scale(1.07); }
	to   { transform: translateX(-50%) scale(1); }
}

@media (max-width: 768px) {
	.hero-swiper {
		height: 70vh;
		height: 70svh;
		min-height: 440px;
		max-height: 640px;
	}
	.custom-pagination-inner {
		left: var(--hd-pad-x);
		right: calc(var(--hd-pad-x) + 64px);
		width: auto;
	}
	.hero-bg,
	.hero-swiper .swiper-slide-active .hero-bg {
		animation: none;
		transform: translateX(-50%) scale(1);
	}
}



/* =========================================================
   메인 - INTRO
   ========================================================= */
.intro {
	padding: 130px 0 150px 0;
	text-align: center;
	background: linear-gradient(to bottom, #F0F0F0, #ffffff);
}
.intro_cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	text-align: left;
	margin-top: clamp(0px, calc(30 * ((100vw - 375px) / 1545)), 30px);
}
.intro_card,
.lineup_item {cursor: pointer;}
.intro_card {
	position: relative;
	display: block;
	overflow: hidden;
	background: #eee;
	width: 100%;
	aspect-ratio: 16 / 15;
	border-radius: 12px;
}
.intro_card_body {
	width: 100%;
	height: 100%;
	position: relative;
}
.intro-btn {
	width: 100px;
	display: block;
	position: absolute;
	right: 30px;
	bottom: 55px;
}
.intro-btn img {
	width: 100%;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45));
	transition: transform 0.4s ease;
}
/* 카드 어디에 마우스를 올려도 화살표가 오른쪽으로 이동 */
.intro_card:hover .intro-btn img,
.intro-btn:focus-visible img {
	transform: translateX(10px);
}
.intro_card_body:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	transition: transform .4s ease;
}
.intro_card:nth-child(1) .intro_card_body:before {
	background: url('../img/intro_card01.webp')no-repeat center center / cover;
}
.intro_card:nth-child(2) .intro_card_body:before {
	background: url('../img/intro_card02.webp')no-repeat center center / cover;
}
.intro_card:hover .intro_card_body:before {
	transform: scale(1.05);
	transition: transform .4s ease;
}
.intro_card_body > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	/* 위: 제목 가독성 / 아래: 오른쪽 아래 흰 화살표가 밝은 사진에서도 보이게 */
	background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%);
	padding: clamp(20px, 5vw, 60px);
}

.intro_card_body h3 {
	color: #fff;
	font-size: clamp(20px, calc(20px + (12 * ((100vw - 375px) / 1545))), 32px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

@media (max-width: 1024px) {
	.intro-btn {
		width: 70px;
		right: 24px;
		bottom: 30px;
	}
}

@media (max-width: 640px) {
	.intro {
		padding: 80px 0 100px 0;
	}
	.intro_cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.intro_card {
		aspect-ratio: 16 / 10;
	}
	.intro-btn {
		width: 56px;
		right: 20px;
		bottom: 24px;
	}
}

/* =========================================================
   메인 - LINE-UP
   ========================================================= */
.pin-section {
	position: relative;
	overflow: hidden;
}
/* GSAP 이 위치를 매 프레임 바꾸므로 전역 transition 해제 (끊김 방지) */
.pin-section,
.pin-spacer,
#lineup,
.lineup_track {
	transition: none !important;
}
#lineup {
	position: relative;
	padding: 150px 0;
	overflow: hidden;
	background: url('../img/lineup-bg.webp')no-repeat center center / cover;
}
#lineup .inner {
	position: relative;
	z-index: 2;
}
#lineup > * {
	color: #fff;
}
.lineup_slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}
/* 카드 줄: 왼쪽·오른쪽 여백을 LINE-UP 제목(.inner 안쪽 선)에 맞춤 */
.lineup_track {
	--lineup-side: calc(max(0px, (100% - var(--inner)) / 2) + clamp(20px, calc((60 / var(--base-size)) * var(--base-percent)), 60px));
	display: flex;
	gap: 20px;
	width: max-content;
	padding: 0 var(--lineup-side);
	will-change: transform;
}
.lineup_item {
	width: 38vw;
	max-width: 480px;
	padding: 25px 25px 50px 25px;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(4px);
	flex-shrink: 0;
	position: relative;
	border-radius: 12px;
}
.lineup_item .arrow-btn {
	position: absolute;
	width: 40px;
	right: 20px;
	bottom: 20px;
}
.lineup_item .arrow-btn img {
	width: 100%;
	transition: transform 0.4s ease;
}
.lineup_item:hover .arrow-btn img,
.lineup_item .arrow-btn:focus-visible img {
	transform: translateX(6px);
}
.lineup_thumb {
	width: 100%;
	aspect-ratio: 4 / 3.05;
	margin-bottom: 16px;
	background: #fff;
	border-radius: 12px;
}
.lineup_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.lineup_item .tag,
.lineup_item h3 {
	color: #fff;
}

/* PC·태블릿: 섹션이 화면을 채운 채 고정되고, 세로 스크롤만큼 카드가 가로로 이동 (script.js) */
@media (min-width: 769px) {
	#lineup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
		min-height: 100svh;
		padding: 100px 0;
	}
}

/* 모바일: 고정 없이 손가락으로 넘기는 가로 스와이프 */
@media (max-width: 768px) {
	.lineup_slider {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: clamp(20px, calc((60 / var(--base-size)) * var(--base-percent)), 60px);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.lineup_slider::-webkit-scrollbar {
		display: none;
	}
	.lineup_track {
		gap: 12px;
	}
	.lineup_item {
		width: 72vw;
		padding: 18px 18px 44px 18px;
		scroll-snap-align: start;
	}
	.lineup_item .arrow-btn {
		width: 32px;
		right: 16px;
		bottom: 16px;
	}
}

@media (max-width: 640px) {
	.lineup {
		margin-top: calc(-1 * max(calc(135px * var(--base-ratio)), calc(calc(135 / var(--base-size)) * var(--base-percent))));
	}
}

/* =========================================================
   메인 - PARTNER CTA
   ========================================================= */
/* NYT 컨택 섹션 방식: 화면 높이(vh) 대신 최소 높이 + 가운데 정렬,
   배경은 화면에 들어올 때 한 번만 서서히 나타남(.is-visible, script.js 4번).
   스크롤 중 계속 다시 그려지던 blur(backdrop-filter)는 뺌 */
.partner_cta {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(475px, 42vw, 720px);
	padding: clamp(80px, 8vw, 140px) 0;
	overflow: hidden;
	color: #fff;
	background: #0a2a55;
}
.partner_cta > .inner {
	position: relative;
	z-index: 1;
}
.bg-cont.partner_cta::before {
	z-index: -2;
	background-image: url('../img/partner_cta_bg.webp');
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 1.3s ease, transform 2.2s cubic-bezier(0.25, 1, 0.5, 1);
	backface-visibility: hidden;
}
.bg-cont.partner_cta.is-visible::before {
	opacity: 1;
	transform: none;
}
/* 글자 가독성용: 왼쪽(문구 쪽)만 살짝 어둡게 */
.partner_cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0, 10, 30, .45), rgba(0, 10, 30, 0) 60%);
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.bg-cont.partner_cta::before {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
.partner_cta h2 {
	font-size: clamp(24px, calc(24px + (16 * ((100vw - 375px) / 1545))), 40px);
	font-weight: 800;
	line-height: 1.3;
	margin-bottom: 18px;
}
.partner_cta p {
	color: rgba(255,255,255,0.7);
}
.partner_cta_btns {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	width: 30%;
	height: 100%;
	display: flex;
}
.cta_btn {
	position: relative;
	display: flex;
	align-items: center;
	width: calc(100% / 2);
	padding: 15% 5%;
	height: 100%;
	transition: all 0.4s;
	flex-direction: column;
	justify-content: flex-end;
	text-align: center;
	justify-content: space-between;
	overflow: hidden;
	color:#fff;
}
.cta_btn > img {
	width: 50px;
}
.cta_btn:nth-child(1) {
	background: rgba(255, 255, 255, 0.18);
}
.cta_btn:nth-child(2) {
	background: rgba(255, 255, 255, 0.28);
}
.cta_ico {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	font-size: 20px;
	transition: background .2s ease;
}
.cta_ico img {
	width: 40px;
}
/* hover: 버튼임을 보여주는 효과 (파란 톤 배경 + 파란 하단 라인 + 화살표/아이콘 이동) */
.cta_btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #0055b8;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.cta_btn::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #0055b8;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
.cta_btn > img,
.cta_ico {
	position: relative;
	transition: transform 0.4s ease;
}
.cta_btn:hover::before,
.cta_btn:focus-visible::before {
	opacity: 0.35;
}
.cta_btn:hover::after,
.cta_btn:focus-visible::after {
	transform: scaleX(1);
}
.cta_btn:hover > img,
.cta_btn:focus-visible > img {
	transform: translateX(10px);
}
.cta_btn:hover .cta_ico,
.cta_btn:focus-visible .cta_ico {
	transform: translateY(-6px);
}

@media (max-width: 768px) {
	.partner_cta {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 80px 0 0 0;
	}
	.partner_cta::after {
		background: rgba(0, 10, 30, .35);
	}
	.partner_cta_btns {
		position: relative;
		width: 100%;
		height: auto;
	}
	.cta_btn {
		padding: 28px 20px;
		min-height: 170px;
	}
	.cta_btn > img {
		width: 36px;
	}
	.cta_ico {
		gap: 14px;
		font-size: 17px;
	}
	.cta_ico img {
		width: 32px;
	}
}

/* =========================================================
   메인 - PARTNERS
   ========================================================= */
.partners {
	padding: 90px 0 110px;
	text-align: center;
}
.partners .main-text {
	text-align: left;
	margin-bottom: 40px;
}
.partners h2 {
	text-align: left;
}
/* 로고 흐름 (NYT .tk 방식, CSS 만으로 동작)
   .partners_track 안에 같은 ul 두 개 → 트랙 전체를 -50% 이동하면 두 번째 ul 이 첫 번째 자리로 정확히 옴
   ul 의 padding-right 를 gap 과 같게 둬서 묶음 사이 간격도 로고 사이 간격과 똑같음 */
.partners_marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners_track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: partners-mq 48s linear infinite;
	will-change: transform;
}
.partners_track > ul {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: clamp(48px, 5vw, 90px);
	padding-right: clamp(48px, 5vw, 90px);
}
.partners_marquee:hover .partners_track {
	animation-play-state: paused;
}
@keyframes partners-mq {
	to {
		transform: translateX(-50%);
	}
}
.partner_logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(140px, 22vw, 180px);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 700;
	color: #4a4f57;
	padding: 0 12px;
	text-align: center;
}
.partner_logo2 {
	width: clamp(120px, 22vw, 150px);
}
.partner_logo img {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.partners_track {
		animation: none;
	}
}

/* =========================================================
   푸터
   ========================================================= */
.footer {
	background-color: #121212;
	color: #a0a0a0;
	font-size: 14px;
	line-height: 1.6;
}
.footer .inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 50px 20px;
}
.footer-top {
	margin-bottom: 40px;
}
.footer-logo img {
	height: 32px;
	width: auto;
}
.footer-nav {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	padding-bottom: 40px;
}
.footer-nav .f-col {
	flex: 1;
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	padding-left: 20px;
}
.footer-nav .f-col:first-child {
	border-left: none;
	padding-left: 0;
}
.footer-nav .f-col-wide {
	flex: 2;
}
.footer-nav h4 {
	color: #ffffff;
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 18px;
}
.footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-nav ul.grid-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 15px;
}
.footer-nav ul li {
	margin-bottom: 8px;
}
.footer-nav ul li a {
	color: #888888;
	text-decoration: none;
	font-size: 16px;
	transition: color 0.2s ease;
}
.footer-nav ul li a:hover {
	color: #ffffff;
}
.footer-bottom {
	background-color: #0a0a0a;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-bottom .inner {
	padding: 25px 20px;
}
.footer-bottom .bottom-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}
.footer-info p {
	margin: 0 0 4px 0;
	font-size: 13px;
	color: #888888;
}
.footer-info p span {
	margin-right: 15px;
	font-size: 16px;
}
.footer-copy {
	font-size: 13px;
	color: #666666;
}

@media (max-width: 1118px) {
	.footer-nav { display: none; }
	.footer-top { margin-bottom: 0; }
}

@media (max-width: 768px) {
	.footer .inner {
		padding: 35px 20px;
	}
	.footer-nav {
		gap: 25px 15px;
	}
	.footer-nav .f-col {
		flex: 1 1 45%;
		/* 2열 배치 */
	}
	.footer-nav .f-col-wide {
		flex: 1 1 100%;
	}
	.footer-bottom .bottom-wrap {
		flex-direction: column;
		align-items: flex-start;
	}
	.footer-info p span {
		display: block;
		/* 모바일에서 주소/대표/전화번호 줄바꿈 */
		margin-right: 0;
		margin-bottom: 2px;
	}
}

/* =========================================================
   서브 공통 (상단 비주얼 · 표 · 모달 · 타이틀 · 레이아웃)
   ========================================================= */
.sec {
	margin: clamp( 60px, calc((130 / var(--base-size)) * var(--base-percent)), 130px) 0 clamp( 100px, calc((130 / var(--base-size)) * var(--base-percent)), 130px) 0;
}
.sec.sec-last {
	margin: clamp( 60px, calc((130 / var(--base-size)) * var(--base-percent)), 130px) 0 0 0;
}
.prod-sec {
	margin: clamp( 50px, calc((80 / var(--base-size)) * var(--base-percent)), 80px) 0 0 0;
}
.breadcrumbs {
	font-weight: 400;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}
.breadcrumbs .breadcrumbs-home:before {
	display: block;
	content: '';
	background: url('../img/icon-home.svg')no-repeat center center / 100%;
	width: 18px;
	height: 18px;
}
.breadcrumb span {
	font-size: clamp(14px, calc(14px + (4 * ((100vw - 640px) / 1280))),18px);
}
.breadcrumb span:first-of-type {
	color: #fff;
}
.breadcrumb span:last-of-type {
	color: #fff;
}
.breadcrumb i:before {
	display: block;
	content: '';
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
}
/* 서브 상단 비주얼: 폭에 비례(56vw)하되 최소 300px, 최대 화면 높이 75% */
.sub-header {
	width: 100%;
	overflow: hidden;
	height: clamp(300px, 56vw, 75vh);
	position: relative;
	z-index: -1;
}
/* 제목은 헤더 높이만큼 아래로 내린 가운데 */
.sub-header-txt {
	position: absolute;
	z-index: 2;
	gap: clamp(10px, 1.2vw, 18px);
	padding: 0 var(--hd-pad-x);
	max-width: var(--inner);
	width: 100%;
	left: 50%;
	top: calc(50% + (var(--hd-bar) + var(--hd-top)) / 2);
	transform: translate(-50%,-50%);
	color: #fff;
	font-weight: 600;
	text-align: center;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: center;
}
.sub-tit {
	font-weight: 700;
	font-size: clamp(28px, calc(28px + (32 * ((100vw - 640px) / 1280))), 60px);
	line-height: 1.25;
	word-break: keep-all;
}
@media (max-width: 640px) {
	.breadcrumbs {
		gap: .6rem;
	}
	.breadcrumb span {
		font-size: 13px;
	}
	.breadcrumbs .breadcrumbs-home:before {
		width: 15px;
		height: 15px;
	}
}
.sub-hero {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: inherit;
	z-index: -1;
}
.sub-hero-wrap {
	z-index: 1;
	overflow: hidden;
	position: relative;
	height: inherit;
}
.sub-hero-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 15, 40, .5) 0%, 
	rgba(0, 15, 40, .25) 80%, 
	rgba(0, 15, 40, .1) 100%
  );
}

.contents {
	padding-bottom: clamp(50px, 8vw, 150px);
}
.contents .inner {
	width: 100%;
	max-width: var(--contents);
	margin: 0 auto;
}
.contents-gray-box {
	background-color: rgb(246, 246, 246);
	padding: clamp(30px, 5vw, 50px);
	border-radius: max(calc(16px * var(--base-ratio)), calc(calc(16 / var(--base-size)) * var(--base-percent)));
}
.contents-tit {
	padding: 0 20px 60px 20px;
	width: 100%;
	margin: 0 auto;
}
.contents-tit h2 {
	font-size: clamp(20px, calc(20px + (20 * ((100vw - 640px) / 1280))), 40px);
	font-weight: 900;
}
.visual {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	--parallax-y: 0px;
	transform: translate(0%, 0%) translate3d(0, var(--parallax-y), 0);
	will-change: transform;
	animation: heroZoomIn 5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
html:not(.is-ready) .visual {
	transition: none !important;
}
@keyframes heroZoomIn {
	0% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1.0);
	}
}
.greeting-top {
	background-image: url('../img/greeting-top.webp');
}
.history-top {
	background-image: url('../img/history-top.webp');
}
.organization-top {
	background-image: url('../img/organization-top.webp');
}
.equipment-top {
	background-image: url('../img/equipment-top.webp');
}
.inspection-top {
	background-image: url('../img/inspection-top.webp');
}
.production-top {
	background-image: url('../img/production-top.webp');
}
.location-top {
	background-image: url('../img/location-top.webp');
}
.insulator-top {
	background-image: url('../img/insulator-top.webp');
}
.nameplate-top {
	background-image: url('../img/nameplate-top.webp');
}
.esg-overview-top {
	background-image: url('../img/esg-overview-top.webp');
}
.esh-top {
	background-image: url('../img/esh-top.webp');
}
.certificates-top {
	background-image: url('../img/certificates-top.webp');
}
.integrity-top {
	background-image: url('../img/integrity-top.webp');
}
.skills-top {
	background-image: url('../img/skills-top.webp');
}
.raw-material-top {
	background-image: url('../img/raw-material-top.webp');
}
.inquiry-top {
	background-image: url('../img/inquiry-top.webp');
}
.clients-top {
	background-image: url('../img/clients-top.webp');
}


.spec_table_wrap {
	width: 100%;
	overflow-x: auto;
	margin: 20px 0;
	background: #fff;
}
.spec_table_wrap h3 {
	padding: 10px 0 10px 6px;
}
.spec_table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	font-size: clamp(13px, 1.1vw, 15px);
}
.spec_table thead th {
	font-weight: 500;
	padding: clamp(12px, 1.5vw, 15px) clamp(10px, 1vw, 16px);
	border-top: 2px solid #0F0F10;
	border-left:1px solid rgba(15,15,16,0.5);
	border-bottom: 2px solid #0F0F10;
}
.spec_table tbody td {
	padding: clamp(14px, 1.8vw, 18px) clamp(10px, 1vw, 16px);
	border-bottom: 1px solid rgba(15,15,16,0.5);
	border-left:1px solid rgba(15,15,16,0.5);
	font-weight: 400;
}
/* .spec_table thead th:first-child, .spec_table tbody td:first-child{
	border-left:0;
} */
.spec_table { border-left: hidden; }
.spec_table tbody td strong {
	font-weight: 700;
}

/* 범용 [보기] 버튼 스타일 */
.table_view_btn {
	display: inline-block;
	padding: 6px 14px;
	background-color: #0f0f10;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
	border: none;
}
.table_view_btn:hover {
	background-color: #014052cc;
	color: #fff;
}

/* table_modal*/
.table_modal_wrap {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	padding: 20px;
}
.table_modal_wrap.active {
	display: flex;
}
.table_modal_wrap .modal_container {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 550px;
	padding: 30px 20px 30px 20px;
	border-radius: 12px;
	height: auto;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	animation: modalFadeIn 0.3s ease;
}
.table_modal_wrap .table_modal_close {
	position: absolute;
	display: block;
	right: 0;
	top: 0;
	background: none;
	border: none;
	font-size: 26px;
	font-weight: bold;
	color: #666;
	cursor: pointer;
	transition: color 0.2s;
	padding: 0;
	line-height: 1;
}
.table_modal_wrap .modal_header {
	padding: 0 24px;
	border-bottom: 0;
}
.table_modal_wrap .table_modal_close:hover {
	color: #0052cc;
}
.table_modal_wrap .modal_body {
	padding: 24px;
	text-align: center;
	max-height: fit-content;
}
.table_modal_wrap .modal_body img {
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
}
@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: translateY(-15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.card-layout {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
}
.card {
	width: 31.666%;
	position: relative;
}
.card-img {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: max(calc(12px * var(--base-ratio)), calc(calc(12 / var(--base-size)) * var(--base-percent)));
	overflow: hidden;
}
.card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-title {
	color: #fff;
	font-size: max(calc(24px * var(--base-ratio)), calc(calc(24 / var(--base-size)) * var(--base-percent)));
	padding-bottom: 140px;
	font-weight: 600;
}
.card-text {
	padding: clamp(24px,5vw,45px);
}
.card-text ul {
	color: #fff;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(50px);
	padding: 24px;
	border-radius: 8px;
}
.card-text ul li {
	font-size: clamp( 17px, calc(17px + (1 * ((100vw - 640px) / 1280))), 18px);
}
.flex-layout {
	display: flex;
	justify-content: space-between;
	margin: max(calc(40px * var(--base-ratio)), calc(calc(40 / var(--base-size)) * var(--base-percent))) 0;
}
.flex-left {
	width: 33%;
}
.flex-right {
	width: 60%;
}

@media (max-width: 1024px) {
	.flex-layout {
		flex-direction: column;
	}
	.flex-left {
		width: 100%;
	}
	.flex-right {
		width: 100%;
		margin-top: 15px;
	}
	.card-layout {
		flex-direction: column;
		gap: 15px;
	}
	.card {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.spec_table {
		min-width: 680px;
	}
	.spec_table th,
	.spec_table td {
		white-space: nowrap;
	}
	.spec_table td[colspan] {
		white-space: normal;
	}
}

/* =========================================================
   인사말
   ========================================================= */
.greeting {
	position: relative;
	display: flex;
	z-index: -1;
	margin-bottom: -150px;
}
.greeting:before {
	background-image: url('../img/greeting-bg.webp');
	z-index: -1;
}
.greeting:after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	z-index: -1;
}
.greeting-text {
	width: 80ch;
	color: #fff;
	margin: 0 auto;
}
.greeting-text p,
.greeting-text b {
	padding: 10px 0;
	word-break: keep-all;
	text-align: center;
}
.feature-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px 20px;
	flex-wrap: wrap;
}
.feature-en .card-content {
	max-width: 76%;
}
.feature-en .card-content p {
	font-size: clamp(16px, calc(16px + (4 * ((100vw - 640px) / 1280))), 20px);
	line-height: 1.35;
	word-break:keep-all;
}
.dot-orbit-card {
	position: relative;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 1);
}
.dot-orbit-card + .dot-orbit-card {
	margin-left: -20px;
}
.dot-orbit-card::after {
	content: '';
	position: absolute;
	top: -4px;
	left: 50%;
	width: 8px;
	height: 8px;
	background: #ffffff;
	border-radius: 50%;
	transform-origin: 3px 123px;
	animation: orbitDot 6s linear infinite;
	box-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff;
	z-index: 1;
}
.card-1::after {
	animation-delay: 0s;
}
.card-2::after {
	animation-delay: -1s;
}
.card-3::after {
	animation-delay: -2s;
}
.card-content {
	position: relative;
	z-index: 2;
	word-break: keep-all;
}
.card-content p {
	text-align: center;
	color: #ffffff;
	font-size: clamp(18px, calc(18px + (6 * ((100vw - 640px) / 1280))), 24px);
	font-weight: 600;
	line-height: 1.4;
}
@keyframes orbitDot {
	0% {
		transform: translateX(-50%) rotate(0deg);
	}
	100% {
		transform: translateX(-50%) rotate(360deg);
	}
}

@media (max-width: 1024px) {
	.greeting-text {
		width: 100%;
		position: relative;
	}
}

@media (max-width: 768px) {
	.feature-container {
		--c: min(170px, 46vw);
		display: grid;
		grid-template-columns: repeat(2, var(--c));
		justify-content: center;
		gap: 0;
		padding: 30px 15px;
	}
	.feature-en .card-content p {
		font-size: 14px;
	}
	.dot-orbit-card {
		width: var(--c);
		height: var(--c);
	}
	.dot-orbit-card::after {
		transform-origin: 3px calc(var(--c) / 2 + 3px);
	}
	.card-1 {
		grid-column: 1 / -1;
		justify-self: center;
	}
	.dot-orbit-card + .dot-orbit-card {
		margin-left: 0;
		margin-top: -55px;  
	}
	.card-2 {
		left: 22px;          
	}
	.card-3 {
		left: -22px;       
	}
	.card-content p {
		font-size: 16px;
	}
}

/* =========================================================
   회사 연혁
   ========================================================= */
.timeline-container {
	position: relative;
}
.timeline-container .flex-layout {
	margin-top: -30px;
}
.timeline-container .flex-left {
	width: 40%;
}
.timeline-container .flex-right {
	width: 60%;
	padding-left: 4%;
}
.timeline-bg-line {
	position: absolute;
	left: 40%;
	top: 0;
	width: 2px;
	height: 100%;
	background: #e0e0e0;
}
.timeline-line {
	position: absolute;
	left: 40%;
	top: 0;
	width: 2px;
	height: 0%;
	background: #0055b8;
	transition: height 0.1s ease-out;
}
.history-title {
	font-size: clamp(22px, 5vw, 50px);
	font-weight: 700;
	line-height: 1.4;
	top: 0;
}
.history-list {
	margin-top: -30px;
	padding-bottom: 80px;
}
.timeline-container .flex-layout:last-of-type .history-list {
	padding-bottom: 0;
}
.history-item {
	padding: 40px 20px;
	border-bottom: 1px solid #e5e5e5;
}
.history-desc {
	font-size: clamp(16px, calc(16px + (4 * ((100vw - 640px) / 1280))), 20px);
	color: #636363;
	line-height: 1.6;
	display: flex;
	align-items: baseline;
}
.history-desc strong {
	color: #111;
	margin-right: 14px;
	font-weight: 700;
	flex-shrink: 0;
}
.timeline-node {
	position: absolute;
	left: 39.6%;
	width: 14px;
	height: 14px;
	background: #fff;
	border: 3px solid #ccc;
	border-radius: 50%;
	z-index: 5;
	transition: all 0.3s ease;
}
.timeline-node.is-active {
	background: #0055b8;
	border-color: #0055b8;
	animation: pulse 1.5s infinite;
}
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 85, 184, 0.4);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(0, 85, 184, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 85, 184, 0);
	}
}

@media (max-width: 1024px) {
	.history-title {
		position: relative;
	}
	.timeline-container {
		padding-left: 32px;
	}
	.timeline-container .flex-layout {
		margin-top: 0;
	}
	.timeline-container .flex-left,
	.timeline-container .flex-right {
		width: 100%;
		padding-left: 0;
	}
	.timeline-bg-line,
	.timeline-line {
		left: 6px;
	}
	.timeline-node {
		left: 0;
	}
	.history-list {
		margin-top: 0;
		padding-bottom: 50px;
	}
	.history-item {
		padding: 24px 0;
	}
}

@media (max-width: 640px) {
	.timeline-container {
		padding-left: 26px;
	}
	.history-title {
		font-size: 22px;
	}
	.history-desc {
		font-size: 15px;
		flex-direction: column;
	}
	.history-desc strong {
		display: block;
		margin: 0 0 4px 0;
		white-space: nowrap;
	}
}

/* =========================================================
   보유장비현황
   ========================================================= */
.equipment-swiper-section {
	width: 100%;
}
.equipment-swiper {
	width: 100%;
	overflow: hidden;
}
.equipment-swiper .marquee-style {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.equipment-swiper .swiper-wrapper {
	transition-timing-function: linear;
}
.equipment-card {
	background-color: rgb(246, 246, 246);
	border-radius: max(calc(12px * var(--base-ratio)), calc(calc(12 / var(--base-size)) * var(--base-percent)));
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	position: relative;
	transition: transform 0.3s ease;
	align-items: flex-start;
}
.equipment-card .badge {
	font-size: 16px;
	font-weight: 600;
	color: #d15900;
	margin-bottom: 10px;
}
.equipment-card .badge2 {
	color: #4d6cb7;
}
.equipment-card .badge3 { 
	color:#878787;
}
.equipment-card .img-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 9 / 10;
}
.equipment-card .img-box img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.equipment-card .info-box h3 {
	font-size: clamp(18px, calc(18px + (2 * ((100vw - 640px) / 1280))),20px);
	font-weight: 700;
	color: #1d1d1f;
	margin-bottom: 6px;
}
.equipment-card .info-box p {
	font-size: clamp(16px, calc(16px + (1 * ((100vw - 640px) / 1280))),17px);
	color: #86868b;
}

/* =========================================================
   생산현장
   ========================================================= */
.production-swiper {
	position: relative;
	overflow: hidden;
}
.production-swiper .swiper-container {
	position: relative;
	width: 65%;
	margin: 0 auto;
}
.production-swiper .swiper-slide {
	width: 100%;
	opacity: 0.5;
	transform: scale(0.85);
	transition: transform 0.4s ease, opacity 0.4s ease;
}
.production-swiper .swiper-slide-active {
	opacity: 1;
	transform: scale(1);
	z-index: 10;
}
.production-swiper .img-box {
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 12px;
}
.production-swiper .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.production-swiper .swiper-button-prev,
.production-swiper .swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	z-index: 20;
	cursor: pointer;
	transition: all 0.3s ease;
}
.production-swiper .swiper-button-prev {
	left: -30px;
}
.production-swiper .swiper-button-next {
	right: -30px;
}

/* Swiper 기본 화살표 아이콘 크기 및 색상 조절 */
.production-swiper .swiper-button-prev::after,
.production-swiper .swiper-button-next::after {
	font-size: 18px;
	font-weight: bold;
	color: #333333;
}
.production-swiper .swiper-button-prev:hover,
.production-swiper .swiper-button-next:hover {
	background-color: #0f0f10;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.production-swiper .swiper-button-prev:hover::after,
.production-swiper .swiper-button-next:hover::after {
	color: #ffffff;
}

@media (max-width: 768px) {
	.production-swiper .swiper-button-prev,
	.production-swiper .swiper-button-next {
		display: none;
	}
}

/* =========================================================
   오시는 길
   ========================================================= */
.location {
	width: 100%;
}
.location:last-child {
	margin-top: max(calc(80px * var(--base-ratio)), calc(calc(80 / var(--base-size)) * var(--base-percent)));
}
.map {
	width: 100%;
	height: 60vh;
	border-radius: 12px;
	overflow: hidden;
}
.loca-list {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 20px;
	padding: clamp(20px, calc(20px + (20 * ((100vw - 640px) / 1280))),40px) clamp(10px, calc(10px + (20 * ((100vw - 640px) / 1280))),30px) ;
	border-bottom: 1px solid #e5e5e5;
}
.loca-name {
	font-size: clamp(18px, calc(18px + (6 * ((100vw - 640px) / 1280))),24px);
	font-weight: 600;
	color: #27272b;
}
.loca-desc span {
	font-size: clamp(17px, calc(17px + (5 * ((100vw - 640px) / 1280))),22px);
	font-weight: 600;
	color: #27272b;
	padding-right: 50px;
}
.loca-desc span img {
	width: 30px;
	margin-right: 8px;
}
.loca-desc {
	font-size: clamp(17px, calc(17px + (5 * ((100vw - 640px) / 1280))),22px);
	color: #636363;
}

@media (max-width: 1024px) {
	.loca-desc span {
		display: block;
		margin-bottom: 5px;
	}
	.loca-list {
		grid-template-columns: 80px 1fr;
	}
}

@media (max-width: 640px) {
	.map {
		height: 40vh;
	}
}

/* ---------- 오시는 길 (재디자인) ----------
   NYT 사업장 카드 방식: 회색 둥근 카드 안에 지도 + 정보, 본사 라벨은 남색 그라데이션
   예전 .location / .map / .loca-* 클래스는 영문 페이지 등에서 쓸 수 있어 그대로 둠 */
.loc_eyebrow {
	display: block;
	margin-bottom: clamp(10px, 1vw, 16px);
	color: #00a2f3;
	font-size: clamp(14px, 1.04vw, 18px);
	font-weight: 600;
	letter-spacing: 0.14em;
}
.loc_card {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: clamp(14px, 1vw, 20px);
	padding: clamp(14px, 1vw, 20px);
	border-radius: 20px;
	background: #f8f8f8;
}
.loc_map {
	position: relative;
	min-height: clamp(320px, 32vw, 560px);
	border-radius: 14px;
	overflow: hidden;
	background: #e9edf3;
}
.loc_map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.loc_info {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 1.6vw, 28px);
	padding: clamp(22px, 2.4vw, 44px) clamp(10px, 1.6vw, 30px);
}
.loc_head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.loc_tag {
	padding: 5px 14px;
	border-radius: 999px;
	background: linear-gradient(160deg, #123a78, #001031);
	color: #fff;
	font-size: clamp(13px, 0.85vw, 16px);
	font-weight: 700;
	font-style: normal;
}
.loc_name {
	font-size: clamp(19px, 1.45vw, 28px);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #27272b;
}
.loc_list > div {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 12px;
	padding: clamp(14px, 1.2vw, 20px) 0;
	border-top: 1px solid #e5e5e5;
}
.loc_list > div:last-child {
	border-bottom: 1px solid #e5e5e5;
}
.loc_list dt {
	color: #999;
	font-size: clamp(14px, 0.95vw, 16px);
	font-weight: 500;
}
.loc_list dd {
	color: #27272b;
	font-size: clamp(16px, 1.1vw, 19px);
	font-weight: 500;
	line-height: 1.5;
	word-break: keep-all;
}
/* 전역 * { font-size: 18px } 때문에 링크 글자만 커지지 않게 */
.loc_list dd a {
	font-size: inherit;
	font-weight: inherit;
}
.loc_list dd a:hover {
	color: #0055b8;
}
.loc_btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}
.loc_btns a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 999px;
	background: #fff;
	font-size: clamp(13px, 0.85vw, 15px);
	font-weight: 500;
	transition: background 0.3s, color 0.3s;
}
/* 오른쪽 꺾쇠 화살표 */
.loc_btns a::after {
	content: '';
	width: 6px;
	height: 6px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}
.loc_btns a:hover {
	background: #001031;
	color: #fff;
}

@media (max-width: 1024px) {
	.loc_card {
		grid-template-columns: 1fr;
	}
	.loc_map {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.loc_btns {
		margin-top: 0;
	}
}

@media (max-width: 640px) {
	.loc_card {
		border-radius: 16px;
	}
	.loc_map {
		aspect-ratio: 4 / 3;
		border-radius: 10px;
	}
	.loc_info {
		padding: 22px 8px 10px;
	}
	.loc_list > div {
		grid-template-columns: 72px 1fr;
	}
}

/* =========================================================
   제품 (절연물 · 명판 사업부)
   ========================================================= */
.prod-contents-tit {
	font-size: clamp(20px, calc(20px + (8 * ((100vw - 640px) / 1280))),28px);
	font-weight: 700;
	padding-bottom: clamp(18px, 5vw, 26px);
}
.prod-contents-txt {
	font-size: clamp(17px, calc(17px + (3 * ((100vw - 640px) / 1280))),20px);
	color: rgba(15,15,16,0.7);
	padding-bottom: clamp(20px, 5vw, 24px);
}
.contents-tit.prod-content-tit {
	max-width: var(--contents);
	border-bottom: 1px solid #ddd;
	padding: clamp(30px, 10vw, 150px) 20px clamp(30px, 4vw, 60px);
}
.prod-contents {
	max-width: var(--contents);
	width: 100%;
	margin: 0 auto;
	padding: clamp(30px, 4vw, 60px) 20px;
	display: flex;
	align-items: flex-start;
	gap: 100px;
	position: relative;
}
.prod-contents-inner {
	width: 100%;
	min-width: 0;
}
.mobile_dropdown_toggle {
	display: none;
}
.sub_aside {
	width: 260px;
	flex-shrink: 0;
	position: sticky;
	top: calc(var(--hd-h, 150px) + 20px);
	transition: top .4s;
}
body.header-hidden .sub_aside {
	top: 10px;
}
.aside_menu li {
	padding-bottom: 15px;
}
.aside_menu li a {
	color: #adadad;
	transition: color 0.3s ease;
}
.aside_menu li a.active {
	color: #0F0F10;
}
.aside_menu li a.active:before {
	display: inline-block;
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	margin-bottom: 2px;
	background: #3B79FF;
}



.pv_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: clamp(24px, 3vw, 50px);
}
.pv_card {
	padding: clamp(14px, 1vw, 20px);
	border-radius: 20px;
	background: #f8f8f8;
}
.pv_head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: clamp(8px, 0.8vw, 14px) clamp(6px, 0.8vw, 14px) clamp(16px, 1.4vw, 24px);
}
.pv_tag {
	padding: 5px 14px;
	border-radius: 999px;
	background: linear-gradient(160deg, #123a78, #001031);
	color: #fff;
	font-size: clamp(13px, 0.85vw, 16px);
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.04em;
}
.pv_tit {
	font-size: clamp(19px, 1.45vw, 26px);
	font-weight: 700;
	color: #27272b;
}
.pv_time {
	margin-left: auto;
	color: #999;
	font-size: clamp(13px, 0.9vw, 16px);
	font-weight: 500;
	letter-spacing: 0.04em;
}
/* 세로 영상이라 폭을 360px 로 제한하고 카드 가운데에 둠 (높이 약 640px) */
.pv_video {
	position: relative;
	width: min(100%, 360px);
	margin: 0 auto;
	aspect-ratio: 9 / 16;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(160deg, #123a78, #001031 70%);
}
.pv_video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
}

@media (max-width: 768px) {
	.pv_grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.pv_card {
		border-radius: 16px;
		padding: 10px;
	}
	.pv_video {
		border-radius: 10px;
	}
	.pv_time {
		margin-left: 0;
	}
}





.product_photo_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 34px;
	width: 100%;
}

.spec_table_wrap + .product_photo_grid{
	margin: clamp( 50px, calc((80 / var(--base-size)) * var(--base-percent)), 80px) 0 0 0;
}

.product_photo .thumb {
	width: 100%;
	border-radius: max(calc(10px * var(--base-ratio)), calc(calc(10 / var(--base-size)) * var(--base-percent)));
	overflow: hidden;
	margin-bottom: 20px;
	cursor: pointer;
}
.photo_modal_wrap {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	justify-content: center;
	align-items: center;
}
.photo_modal_wrap.active {
	display: flex;
}
.photo_modal_container {
	position: relative;
	background: #fff;
	width: 90%;
	max-width: 780px;
	border-radius: 12px;
	padding: 40px clamp(12px, 4vw, 40px) clamp(12px, 4vw, 40px); 
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0,0,0,0.2);
	animation: modalUp 0.3s ease-out;
}
.photo_modal_body {
	text-align: center;
}
.photo_modal_body img {
	width: auto;
	max-width: 100%;
	max-height: 75vh;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 6px;
}
.photo_modal_close {
	position: absolute;
	right: clamp(10px, 2vw, 20px); 
	top: clamp(8px, 2vw, 20px);
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	color: #999;
	line-height: 1;
}
.photo_modal_close:hover {
	color: #111;
}
.product_photo .thumb img {
	width: 100%;
}
.product_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 34px;
	width: 100%;
}
.prod-contents-txt + .product_grid {
	margin-top: 50px;
}
.product_card {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: max(calc(10px * var(--base-ratio)), calc(calc(10 / var(--base-size)) * var(--base-percent)));
	padding: clamp(20px, 5vw, 24px);
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
}
.product_card.badge:before {
	position: absolute;
	display: block;
	content: '';
	right: 40px;
	top: 40px;
	font-size: 18px;
	line-height: 28px;
	height: 28px;
	font-weight: 400;
	background-color: #EDEDEE;
	border-radius: 20px;
	padding: 0 clamp(14px, 5vw, 18px);
	z-index: 0;
	color: #727891;
}
.product_card.smc-badge:before {
	content: 'SMC';
}
.product_card.bmc-badge:before {
	content: 'BMC';
}
.product_card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.product_card .thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #fff;
	border-radius: max(calc(10px * var(--base-ratio)), calc(calc(10 / var(--base-size)) * var(--base-percent)));
	overflow: hidden;
	margin-bottom: 20px;
}
.product_card .thumb img {
	width: 100%;
}
.product_card .info .code {
	display: block;
	font-size: clamp(16px, 5vw, 19px);
	color: rgba(15,15,16,0.5);
	margin-bottom: 6px;
}
.product_card .info .name {
	font-size: clamp(17px, 5vw, 22px);
	font-weight: 600;
	margin: 0;
}
.drawing_modal_wrap {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	justify-content: center;
	align-items: center;
}
.drawing_modal_wrap.active {
	display: flex;
}
.modal_container {
	position: relative;
	background: #fff;
	width: 90%;
	max-width: 1290px;
	border-radius: 12px;
	padding: 30px clamp(12px, 4vw, 30px) clamp(12px, 4vw, 30px); 
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
	animation: modalUp 0.3s ease-out;
	transition: max-width 0.3s ease;
}
.modal_container.single-modal {
	max-width: 780px;
}
.modal_header {
	position: relative;
	text-align: center;
	padding-bottom: 20px;
}
.modal_header h3 {
	font-size: clamp(17px, 4vw, 20px);
	font-weight: 700;
	margin: 0;
	color: #111;
}
.modal_header h3 span {
	font-weight: 700;
}
.modal_close {
	position: absolute;
	right: 20px;
	top: 15px;
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	color: #999;
	line-height: 1;
}
.modal_close:hover {
	color: #111;
}
.modal_body {
	max-height: 75vh;
	overflow-y: auto;
}
.drawing_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.drawing_item {
	border: 1px solid #e9ecef;
	border-radius: 6px;
	padding: 15px;
	text-align: center;
}
.drawing_item.single-item {
	grid-column: 1 / -1;
	max-width: 700px;
	margin: 0 auto;
	width: 100%;
}
.drawing_item img {
	width: 100%;
	height: auto;
	display: block;
}
.drawing_caption {
	font-size:clamp(16px,4vw,18px);
	text-align: left;
	color: rgba(15,15,16,0.7);
}
@keyframes modalUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.product_color_grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	/* 5열 배열 */
	gap: 20px;
}
.product_color {
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 12px;
	padding: 20px 15px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.product_color .color-box {
	width: 100%;
	height: 90px;
	border-radius: 8px;
	margin-bottom: 15px;
}
.product_color .info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.product_color .name-ko {
	font-size: 14px;
	color: #555;
}
.product_color .name-en {
	font-size: 13px;
	color: #777;
	font-weight: 500;
}
.product_color .code {
	font-size: 14px;
	color: #111;
	font-weight: 700;
	margin-top: 2px;
}
.product_spec_row {
	margin-bottom: 40px;
}
.product_spec_content {
	display: flex;
	gap: clamp(30px, 5vw, 80px);
	align-items: flex-start;
}
.product_thumb {
	width: 280px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	text-align: center;
}
.product_thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.product_spec_row + .product_spec_row {
	margin-top: 50px;
}
.product_spec_content .spec_table_wrap {
	flex-grow: 1;
	background-color: rgb(246, 246, 246);
	padding: clamp(30px, 5vw, 50px);
	border-radius: max(calc(12px * var(--base-ratio)), calc(calc(12 / var(--base-size)) * var(--base-percent)));
	margin: 0;
}
.product_spec_content .spec_table_wrap td {
	text-align: left;
}
.prod-inner {
	width: 100%;
}
.tabs_list_wrap {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.tabs_list_wrap::-webkit-scrollbar {
	display: none;
}
.prod_tabs:last-child {
	margin-bottom: 0;
}
.tabs__list {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 8px;
}
.prod_tabs .tabs__tab {
	background: none;
	border: 0;
	padding: clamp(2px, 5vw, 3px) clamp(20px, 5vw, 26px);
	border-radius: clamp(20px, 5vw, 30px);
	font-size: clamp( 17px, calc(17px + (3 * ((100vw - 640px) / 1280))), 20px);
	color: rgba(15,15,16,0.5);
	white-space: nowrap;
	border: 2px solid #D9D9D9;
}
.prod_tabs .tabs__tab.is-active {
	border: 2px solid #0F0F10;
	color: #0F0F10;
}
.prod_tabs .tabs__panels {
	padding: clamp(30px, 5vw, 60px) 0 0 0;
}
.prod_tabs .tabs__panel.is-active {
	display: block;
}
.prod_tabs .tabs__panel {
	display: none;
	font-size: clamp(18px, 5vw, 20px);
	justify-content: space-between;
}

@media (max-width: 1400px) {
	.prod_tabs .tabs__panel .tabs__inner {
		flex-direction: column;
	}
}

@media (max-width: 1024px) {
	.product_color_grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.tabs_list_wrap {
		margin-top: 15px;
	}
	.prod_tabs .tabs__list {
		justify-content: flex-start;
	}
	.prod-contents {
		flex-direction: column;
		gap: 0;
	}
	.mobile_dropdown_toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		font-size: 16px;
		font-weight: 600;
		color: #111;
		cursor: pointer;
		background: #fff;
		border-radius: 8px;
	}
	.mobile_dropdown_toggle .arrow_icon {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);   /* ∨ */
		transition: transform 0.3s;
	}

	.sub_aside.is-open .mobile_dropdown_toggle .arrow_icon {
		transform: translateY(2px) rotate(-135deg);  /* ∧ */
	}
	.sub_aside .aside_menu {
		display: none;
		position: absolute;
		top: calc(100% + 5px);
		left: 0;
		width: 100%;
		background: #fff;
		padding: 10px 20px 20px 20px;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
		z-index: 99;
	}
	.sub_aside.is-open .aside_menu {
		display: block;
	}
	.sub_aside {
		background: #f8f9fa;
		border: 1px solid #e9ecef;
		border-radius: 8px;
		padding: 0;
		width: 100%;
		margin-bottom: 30px;
		position: sticky;
		z-index: 2;
	}
	.product_spec_content {
		flex-direction: column;
	}
	.product_thumb {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.modal_header {
		padding-top: 20px;
	}
	.modal_header h3 span {
		display: block;
	}
}

@media (max-width: 640px) {
	.product_grid {
		grid-template-columns: 1fr;
		width: 100%;
		gap: 20px;
	}
	.drawing_grid {
		grid-template-columns: 1fr;
		width: 100%;
	}
	.product_color_grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.product_photo_grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* =========================================================
   인증서
   ========================================================= */

/* 배너 카드 공통 스타일 */
.cert_banner {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 16px;
	padding: clamp(30px, 5vw, 80px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 25px;
}
.spec_table_wrap + .cert_banner {
	margin: clamp(60px, calc((130 / var(--base-size)) * var(--base-percent)), 130px) 0 0 0;
}
.cert_banner_left h3 {
	font-size: clamp( 22px, calc(22px + (6 * ((100vw - 640px) / 1280))), 28px);
	font-weight: 700;
	color: #0f0f10;
	margin: 0 0 6px 0;
}
.cert_banner_left p {
	font-size: clamp( 15px, calc(15px + (1 * ((100vw - 640px) / 1280))), 16px);
	color: #666;
	font-weight: 500;
	margin: 0;
}
.cert_banner_right {
	background: #0f0f10;
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
}

/* 발행기관별 포인트 컬러 커스텀 (선택사항) */
.banner-kipris .cert_banner_right {
	background: #0052cc;
}
.banner-kosre .cert_banner_right {
	background: #00875a;
}
.banner-research .cert_banner_right {
	background:#61bbdd;
}

/* =========================================================
   조직도
   ========================================================= */
.org-chart {
	--line: 40px;
	--gap: 20px;
	--step: 0.22s;
	--navy: #182055;
	--blue: #0055b8;
	--line-color: #c3c9dd;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: max(calc(40px * var(--base-ratio)), calc(calc(40 / var(--base-size)) * var(--base-percent))) 0;
}

/* 상단 박스 (대표이사 / 관리이사 / 공장장) */
.org-node {
	width: 200px;
	padding: 20px 24px;
	border-radius: 12px;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	position: relative;
	z-index: 1;
}
.org-ceo {
	background: var(--navy);
	box-shadow: 0 14px 30px -14px rgba(24, 32, 85, 0.6);
}
.org-exec {
	background: var(--blue);
	box-shadow: 0 14px 30px -16px rgba(0, 85, 184, 0.55);
}

/* 세로 연결선 */
.org-line {
	display: block;
	width: 2px;
	height: var(--line);
	background: var(--line-color);
}

/* 팀 */
.org-teams {
	position: relative;
	width: 90%;
}
.org-teams ul {
	display: flex;
	gap: var(--gap);
}
.org-team {
	flex: 1;
	min-width: 0;
	position: relative;
	padding-top: var(--line);
}

/* 팀을 잇는 가로선: 첫 팀 가운데 ~ 마지막 팀 가운데 */
.org-bar {
	position: absolute;
	top: 0;
	left: calc((100% - (var(--count) - 1) * var(--gap)) / var(--count) / 2);
	right: calc((100% - (var(--count) - 1) * var(--gap)) / var(--count) / 2);
	height: 2px;
	background: var(--line-color);
}
.org-spine {
	display: none;
}

/* 가로선에서 각 팀으로 내려가는 선 */
.org-team::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: var(--line);
	margin-left: -1px;
	background: var(--line-color);
}
.org-team-box {
	padding: 20px;
	border: 1px solid #dfe4f2;
	border-top: 3px solid var(--blue);
	border-radius: 12px;
	background: #f3f6fc;
	box-shadow: 0 12px 24px -16px rgba(24, 32, 85, 0.35);
	color: var(--navy);
	font-weight: 600;
	text-align: center;
	font-size: 18px;
	white-space: nowrap;
}

/* ---------- 등장 애니메이션 ----------
   JS가 .org-ready 를 붙이면 즉시 숨김(전환 없음) → 화면에 보이면 .is-visible 로 순서대로 등장 */
.org-ready .org-node,
.org-ready .org-team-box {
	opacity: 0;
	transform: translateY(-16px);
	transition: none;
}
.org-ready .org-line,
.org-ready .org-spine,
.org-ready .org-team::before {
	transform: scaleY(0);
	transform-origin: top;
	transition: none;
}
.org-ready .org-bar {
	transform: scaleX(0);
	transform-origin: center;
	transition: none;
}
.org-ready.is-visible .org-node,
.org-ready.is-visible .org-team-box {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--i) * var(--step));
}
.org-ready.is-visible .org-team-box {
	transition-delay: calc(var(--i) * var(--step) + 0.15s);
}
.org-ready.is-visible .org-line,
.org-ready.is-visible .org-spine,
.org-ready.is-visible .org-team::before {
	transform: none;
	transition: transform 0.4s ease-out;
	transition-delay: calc(var(--i) * var(--step));
}
.org-ready.is-visible .org-bar {
	transform: none;
	transition: transform 0.5s ease-out;
	transition-delay: calc(var(--i) * var(--step));
}

@media (max-width: 1024px) {
	.org-chart {
		--gap: 12px;
	}
	.org-teams {
		width: 100%;
	}
	.org-team-box {
		padding: 18px 6px;
		font-size: 15px;
	}
}

/* 모바일: 왼쪽 세로 줄기에 팀이 매달린 트리 형태 */
@media (max-width: 768px) {
	.org-chart {
		--line: 32px;
	}
	.org-node {
		width: 180px;
		padding: 16px 20px;
		font-size: 16px;
	}
	.org-teams {
		max-width: 360px;
		padding-left: 28px;
	}
	.org-teams ul {
		flex-direction: column;
		gap: 12px;
		padding-top: 24px;
	}
	.org-team {
		padding-top: 0;
	}
	/* 공장장 아래 가운데 → 왼쪽 줄기까지 가로선 */
	.org-bar {
		left: 8px;
		right: 50%;
	}
	.org-ready .org-bar {
		transform-origin: right;
	}
	/* 왼쪽 세로 줄기: 마지막 팀 가운데까지 */
	.org-spine {
		display: block;
		position: absolute;
		top: 0;
		bottom: 26px;
		left: 8px;
		width: 2px;
		background: var(--line-color);
	}
	/* 줄기에서 각 팀으로 가는 짧은 가로선 */
	.org-team::before {
		top: 50%;
		left: -20px;
		width: 20px;
		height: 2px;
		margin: -1px 0 0 0;
	}
	.org-ready .org-team::before {
		transform: scaleX(0);
		transform-origin: left;
	}
	/* 모바일은 위쪽 포인트 대신 왼쪽 포인트 */
	.org-team-box {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 52px;
		padding: 0 16px;
		border-top-width: 1px;
		border-top-color: #dfe4f2;
		border-left: 3px solid var(--blue);
		font-size: 16px;
	}
}

/* =========================================================
   ESG 경영 - 지속가능경영 약속 (기존)
   ========================================================= */
.growth-bt {
	background: url('../img/growth-bt.png')no-repeat center center / cover;
}
.blur-box {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(30px);
	border-radius: max(calc(12px * var(--base-ratio)), calc(calc(12 / var(--base-size)) * var(--base-percent)));
	padding: max(calc(60px * var(--base-ratio)), calc(calc(60 / var(--base-size)) * var(--base-percent)));
	display: flex;
}
.blur-box .flex-layout {
	margin: 0;
}
.blur-box .flex-layout .text {
	margin: 0;
}

/* =========================================================
   원료 개요
   ========================================================= */

/* ---------- SMC / BMC 소개 ---------- */
.rm_sec_head {
	margin-bottom: clamp(30px, calc((50 / var(--base-size)) * var(--base-percent)), 50px);
}
.rm_sec_head .text {
	color: #555;
}
.rm_list {
	display: flex;
	flex-direction: column;
	gap: clamp(60px, calc((120 / var(--base-size)) * var(--base-percent)), 120px);
}
.rm_item {
	display: flex;
	align-items: center;
	gap: clamp(30px, calc((80 / var(--base-size)) * var(--base-percent)), 80px);
}
.rm_item:nth-child(even) {
	flex-direction: row-reverse;
}
.rm_media {
	width: 48%;
	flex-shrink: 0;
}
.rm_media_grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	border-radius: 16px;
	overflow: hidden;
}
.rm_media_grid.col-2 {
	grid-template-columns: 1fr 1fr;
}
.rm_media_grid img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.rm_media_grid.col-2 img {
	aspect-ratio: 3 / 4;
}
.rm_item:hover .rm_media_grid:not(.col-2) img {
	transform: scale(1.04);
}
.rm_body {
	position: relative;
	flex: 1;
	min-width: 0;
}
.rm_mark {
	display: block;
	font-size: clamp(64px, calc(64px + (56 * ((100vw - 640px) / 1280))), 120px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	opacity: 0.05;
	margin-bottom: 20px;
}
.rm_tag {
	display: inline-block;
	padding: 4px 14px;
	background: #0f0f10;
	color: #fff;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.rm_name {
	margin: 14px 0 20px;
	font-size: clamp(24px, calc(24px + (8 * ((100vw - 640px) / 1280))), 32px);
	font-weight: 700;
	line-height: 1.3;
}
.rm_name small {
	display: block;
	margin-top: 4px;
	font-size: clamp(15px, calc(15px + (3 * ((100vw - 640px) / 1280))), 18px);
	font-weight: 400;
	color: #777;
}
.rm_desc {
	font-size: clamp(16px, calc(16px + (3 * ((100vw - 640px) / 1280))), 19px);
	font-weight: 400;
	color: #222;
}
.rm_desc strong {
	font-size: inherit;
	font-weight: 700;
}
.rm_points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}
.rm_points li {
	padding: 8px 18px;
	border: 1px solid #ddd;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 500;
	color: #0f0f10;
	background: #fff;
}

/* ---------- 구성 원료 ---------- */
.rm_compose {
	background: #f8f9fa;
	margin-bottom: 0;
}

/* 주원료 2개(1행) + 첨가제 5개(2행) */
.rm_compose_grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 16px;
}
.rm_compose_grid li {
	display: flex;
	flex-direction: column;
	min-height: 200px;
	padding: clamp(24px, 2.4vw, 36px);
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 16px;
	grid-column: span 2;
}
.rm_compose_grid li.is-main {
	grid-column: span 5;
	background: #0f0f10;
	border-color: #0f0f10;
	color: #fff;
}
.rm_compose_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: auto;
}
.rm_compose_grid .num {
	font-size: 14px;
	font-weight: 600;
	color: #999;
}
.rm_compose_grid li.is-main .num {
	color: rgba(255,255,255,0.5);
}
.rm_compose_grid .role {
	padding: 3px 12px;
	border: 1px solid #ddd;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	color: #777;
	white-space: nowrap;
}
.rm_compose_grid li.is-main .role {
	border-color: #fff;
	background: #fff;
	color: #0f0f10;
	font-weight: 600;
}
.rm_compose_grid strong {
	margin-top: 40px;
	font-size: clamp(19px, calc(19px + (5 * ((100vw - 640px) / 1280))), 24px);
	font-weight: 700;
	line-height: 1.35;
}
.rm_compose_grid em {
	margin-top: 4px;
	font-style: normal;
	font-size: 14px;
	font-weight: 400;
	color: #777;
}
.rm_compose_grid li.is-main em {
	color: rgba(255,255,255,0.6);
}

/* ---------- 제조 흐름 ---------- */
.rm_flow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 2px solid #0f0f10;
	counter-reset: none;
}
.rm_flow li {
	position: relative;
	padding: clamp(24px, 2.4vw, 40px) clamp(16px, 2vw, 32px) clamp(24px, 2.4vw, 40px) 0;
}
.rm_flow li + li {
	padding-left: clamp(16px, 2vw, 32px);
	border-left: 1px solid #e9ecef;
}
.rm_flow li:not(:last-child)::after {
	content: '';
	position: absolute;
	top: -7px;
	right: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #0f0f10;
	z-index: 1;
}
.rm_flow .step {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #999;
	letter-spacing: 0.04em;
}
.rm_flow strong {
	display: block;
	margin: 10px 0 12px;
	font-size: clamp(19px, calc(19px + (5 * ((100vw - 640px) / 1280))), 24px);
	font-weight: 700;
}
.rm_flow p {
	font-size: clamp(15px, calc(15px + (2 * ((100vw - 640px) / 1280))), 17px);
	font-weight: 400;
	color: #555;
}

/* ---------- 비교표 ---------- */
.rm_table th:first-child,
.rm_table td:first-child {
	width: 20%;
}
.rm_table th {
	font-weight: 600;
}
.rm_table td[colspan] {
	background: #f8f9fa;
}

/* ---------- 제품 바로가기 ---------- */
.rm_links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: clamp(60px, calc((100 / var(--base-size)) * var(--base-percent)), 100px);
}
.rm_link {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	padding: clamp(30px, 3vw, 50px);
	background: #0f0f10;
	border-radius: 16px;
	color: #fff;
	overflow: hidden;
}
.rm_link_txt {
	font-size: clamp(22px, calc(22px + (6 * ((100vw - 640px) / 1280))), 28px);
	font-weight: 700;
	color: #fff;
}
.rm_link_txt em {
	display: block;
	margin-bottom: 6px;
	font-style: normal;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255,255,255,0.5);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.rm_link_arrow {
	width: clamp(60px, 6vw, 100px);
	flex-shrink: 0;
}
.rm_link_arrow img {
	display: block;
	width: 100%;
	transition: transform .4s ease;
}
.rm_link:hover .rm_link_arrow img {
	transform: translateX(10px);
}

@media (max-width: 1024px) {
	.rm_item,
	.rm_item:nth-child(even) {
		flex-direction: column;
		align-items: stretch;
	}
	.rm_media {
		width: 100%;
	}
	.rm_mark {
		position: absolute;
		top: -10px;
		right: 0;
		margin: 0;
	}
	.rm_compose_grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.rm_compose_grid li,
	.rm_compose_grid li.is-main {
		grid-column: auto;
	}
	.rm_compose_grid li:last-child {
		grid-column: span 2;
	}
	.rm_flow {
		grid-template-columns: repeat(2, 1fr);
	}
	.rm_flow li:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
	.rm_flow li:nth-child(n+3) {
		border-top: 1px solid #e9ecef;
	}
	.rm_flow li:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 640px) {
	.rm_compose_grid {
		grid-template-columns: 1fr;
	}
	.rm_compose_grid li,
	.rm_compose_grid li.is-main,
	.rm_compose_grid li:last-child {
		grid-column: auto;
		min-height: auto;
	}
	.rm_compose_grid strong {
		margin-top: 20px;
	}
	.rm_flow {
		grid-template-columns: 1fr;
	}
	.rm_flow li,
	.rm_flow li + li {
		padding-left: 0;
		border-left: 0;
	}
	.rm_flow li + li {
		border-top: 1px solid #e9ecef;
	}
	.rm_table th:first-child,
	.rm_table td:first-child {
		width: 28%;
	}
	.rm_links {
		grid-template-columns: 1fr;
	}
	.rm_points li {
		font-size: 14px;
		padding: 6px 14px;
	}
}

/* =========================================================
   보유 기술
   ========================================================= */
.tc_sec_head {
	margin-bottom: clamp(30px, calc((50 / var(--base-size)) * var(--base-percent)), 50px);
}
.tc_sec_num {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 600;
	color: #999;
	letter-spacing: 0.04em;
}
.tc_sec_head .text {
	color: #555;
}

/* 더보기 링크 */
.tc_more {
	margin-top: 30px;
	text-align: right;
}
.tc_more a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 22px;
	border: 1px solid #0f0f10;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 500;
}
.tc_more a::after {
	content: '→';
	font-size: inherit;
	transition: transform .3s ease;
}
.tc_more a:hover {
	background: #0f0f10;
	color: #fff;
}
.tc_more a:hover::after {
	transform: translateX(4px);
}

/* ---------- 요약 지표 ---------- */
.tc_stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 2px solid #0f0f10;
	border-bottom: 1px solid #e9ecef;
}
.tc_stats li {
	padding: clamp(24px, 2.4vw, 40px) clamp(16px, 2vw, 32px);
}
.tc_stats li + li {
	border-left: 1px solid #e9ecef;
}
.tc_stats_label {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: #777;
}
.tc_stats strong {
	display: block;
	margin-top: 8px;
	font-size: clamp(40px, calc(40px + (24 * ((100vw - 640px) / 1280))), 64px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
}
.tc_stats strong small {
	margin-left: 4px;
	font-size: clamp(16px, calc(16px + (4 * ((100vw - 640px) / 1280))), 20px);
	font-weight: 600;
	letter-spacing: 0;
}

/* ---------- 01 지식재산권 ---------- */
.tc_ip_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.tc_ip_grid li {
	display: flex;
	flex-direction: column;
	min-height: 280px;
	padding: clamp(24px, 2.4vw, 36px);
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 16px;
}
.tc_ip_type {
	align-self: flex-start;
	padding: 3px 14px;
	background: #0f0f10;
	color: #fff;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
}
.tc_ip_grid li.is-design .tc_ip_type {
	background: #fff;
	color: #0f0f10;
	border: 1px solid #0f0f10;
}
.tc_ip_name {
	margin: 24px 0 auto;
	font-size: clamp(20px, calc(20px + (6 * ((100vw - 640px) / 1280))), 26px);
	font-weight: 700;
	line-height: 1.35;
}
.tc_ip_grid dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}
.tc_ip_grid dt,
.tc_ip_grid dd {
	font-size: 15px;
}
.tc_ip_grid dt {
	color: #999;
	font-weight: 400;
}
.tc_ip_grid dd {
	font-weight: 500;
	text-align: right;
}

/* ---------- 02 핵심 공정 기술 ---------- */
.tc_process {
	background: #f8f9fa;
}
.tc_group + .tc_group {
	margin-top: clamp(40px, calc((60 / var(--base-size)) * var(--base-percent)), 60px);
}
.tc_group_head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 2px solid #0f0f10;
}
.tc_group_head h4 {
	font-size: clamp(20px, calc(20px + (4 * ((100vw - 640px) / 1280))), 24px);
	font-weight: 700;
}
.tc_group_head span {
	font-size: 15px;
	color: #777;
}
.tc_process_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.tc_process_grid > li {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.4vw, 36px);
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 16px;
}
.tc_process_grid .num {
	font-size: 14px;
	font-weight: 600;
	color: #999;
}
.tc_process_grid strong {
	margin: 10px 0 12px;
	font-size: clamp(19px, calc(19px + (5 * ((100vw - 640px) / 1280))), 24px);
	font-weight: 700;
}
.tc_process_grid p {
	font-size: clamp(15px, calc(15px + (2 * ((100vw - 640px) / 1280))), 17px);
	font-weight: 400;
	color: #555;
}
.tc_equip {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 24px;
}
.tc_equip li {
	padding: 5px 12px;
	background: #f1f3f5;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #222;
}

/* ---------- 04 품질 · 인증 ---------- */
.tc_quality {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 16px;
}
.tc_iso {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.tc_iso li {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 220px;
	padding: clamp(24px, 2.4vw, 36px);
	background: #0f0f10;
	border-radius: 16px;
	color: #fff;
}
.tc_iso strong {
	font-size: clamp(22px, calc(22px + (6 * ((100vw - 640px) / 1280))), 28px);
	font-weight: 700;
	color: #fff;
}
.tc_iso span {
	margin-top: 4px;
	font-size: 15px;
	color: rgba(255,255,255,0.6);
}
.tc_partner {
	padding: clamp(24px, 2.4vw, 36px);
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 16px;
}
.tc_partner h4 {
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 700;
}
.tc_partner li {
	display: flex;
	gap: 20px;
	padding: 10px 0;
	border-top: 1px solid #e9ecef;
	font-size: 16px;
	font-weight: 500;
}
.tc_partner li span {
	font-size: inherit;
	font-weight: 600;
	color: #999;
}

@media (max-width: 1400px) {
	.tc_quality {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1024px) {
	.tc_stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.tc_stats li:nth-child(3) {
		border-left: 0;
	}
	.tc_stats li:nth-child(n+3) {
		border-top: 1px solid #e9ecef;
	}
	.tc_ip_grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.tc_process_grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.tc_ip_grid,
	.tc_iso {
		grid-template-columns: 1fr;
	}
	.tc_ip_grid li {
		min-height: auto;
	}
	.tc_iso li {
		min-height: auto;
	}
	.tc_more {
		text-align: left;
	}
}

/* =========================================================
   ESG (ESG 경영 / 환경·안전·보건 / 정도경영)
   ========================================================= */

/* ---------- 공통 ---------- */
.esg_num {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #999;
	letter-spacing: 0.04em;
}
.esg_sec_head {
	margin-bottom: clamp(30px, calc((50 / var(--base-size)) * var(--base-percent)), 50px);
}
.esg_sec_head .esg_num {
	margin-bottom: 10px;
}

/* =========================================================
   ESG 경영
   ========================================================= */
.esg_pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.esg_pillars li {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 560px;
	padding: clamp(30px, 3vw, 50px);
	background: #0f0f10;
	border-radius: 16px;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}

/* 카드 배경 이미지 */
.esg_pillar_img {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.esg_pillar_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.esg_pillars li:hover .esg_pillar_img img {
	transform: scale(1.05);
}

/* 텍스트 가독성용 그라데이션 (메인 intro_card 톤) */
.esg_pillars li::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 75%);
}
.esg_pillar_tit {
	margin-top: auto;
	font-size: clamp(24px, calc(24px + (8 * ((100vw - 640px) / 1280))), 32px);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}
.esg_pillar_tit span {
	display: block;
	margin-top: 6px;
	font-size: clamp(16px, calc(16px + (2 * ((100vw - 640px) / 1280))), 18px);
	font-weight: 500;
	color: rgba(255,255,255,0.7);
}
.esg_pillar_txt {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.3);
	font-size: clamp(15px, calc(15px + (2 * ((100vw - 640px) / 1280))), 17px);
	font-weight: 400;
	color: rgba(255,255,255,0.85);
	word-break:keep-all;
}

/* 지속가능경영 약속 */
.esg_promise {
	background: linear-gradient(135deg, #0a2a55 0%, #001031 100%);
	color: #fff;
}
.esg_promise_inner {
	display: flex;
	gap: clamp(30px, calc((80 / var(--base-size)) * var(--base-percent)), 80px);
}
.esg_promise .title {
	flex-shrink: 0;
	width: 35%;
	color: #fff;
}
.esg_promise .text {
	margin-top: 0;
	color: rgba(255,255,255,0.8);
}

/* 하위 페이지 바로가기 */
.esg_links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.esg_link {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	padding: clamp(30px, 3vw, 50px);
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 16px;
}
.esg_link:hover {
	background: #0f0f10;
	border-color: #0f0f10;
}
.esg_link_txt {
	font-size: clamp(22px, calc(22px + (6 * ((100vw - 640px) / 1280))), 28px);
	font-weight: 700;
}
.esg_link_txt em {
	display: block;
	margin-bottom: 6px;
	font-style: normal;
	font-size: 14px;
	font-weight: 500;
	color: #999;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.esg_link:hover .esg_link_txt {
	color: #fff;
}
.esg_link_arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(60px, 6vw, 90px);
	height: clamp(60px, 6vw, 90px);
	flex-shrink: 0;
	background: #0f0f10;
	border-radius: 50%;
}
.esg_link_arrow img {
	display: block;
	width: 50%;
	transition: transform .4s ease;
}
.esg_link:hover .esg_link_arrow {
	background: #fff;
}
.esg_link:hover .esg_link_arrow img {
	filter: invert(1);
	transform: translateX(4px);
}

/* =========================================================
   환경/안전/보건
   ========================================================= */
.esg_row {
	display: flex;
	gap: clamp(30px, calc((80 / var(--base-size)) * var(--base-percent)), 80px);
	padding: clamp(40px, calc((60 / var(--base-size)) * var(--base-percent)), 60px) 0;
	border-top: 2px solid #0f0f10;
}
.esg_row + .esg_row {
	margin-top: clamp(30px, calc((60 / var(--base-size)) * var(--base-percent)), 60px);
}
.esg_row_head {
	flex-shrink: 0;
	width: 32%;
}
.esg_row_head h3 {
	margin-top: 10px;
	font-size: clamp(26px, calc(26px + (14 * ((100vw - 640px) / 1280))), 40px);
	font-weight: 700;
	line-height: 1.2;
}
.esg_row_head em {
	display: block;
	margin-top: 6px;
	font-style: normal;
	font-size: clamp(16px, calc(16px + (4 * ((100vw - 640px) / 1280))), 20px);
	font-weight: 400;
	color: #999;
}
.esg_row_list {
	flex: 1;
	min-width: 0;
}
.esg_row_list li {
	padding: 28px 0;
	border-bottom: 1px solid #e9ecef;
}
.esg_row_list li:first-child {
	padding-top: 0;
}
.esg_row_list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.esg_row_list strong {
	display: block;
	font-size: clamp(19px, calc(19px + (5 * ((100vw - 640px) / 1280))), 24px);
	font-weight: 700;
}
.esg_row_list p {
	margin-top: 8px;
	font-size: clamp(15px, calc(15px + (3 * ((100vw - 640px) / 1280))), 18px);
	font-weight: 400;
	color: #555;
}

/* =========================================================
   정도경영
   ========================================================= */
.esg_spirit {
	padding: clamp(40px, 5vw, 80px);
	background: #0f0f10;
	border-radius: 16px;
	color: #fff;
}
.esg_spirit_label {
	display: inline-block;
	padding: 4px 14px;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}
.esg_spirit p {
	margin-top: 30px;
	font-size: clamp(17px, calc(17px + (5 * ((100vw - 640px) / 1280))), 22px);
	font-weight: 300;
	color: rgba(255,255,255,0.8);
}
.esg_spirit strong {
	display: block;
	margin-top: 20px;
	font-size: clamp(20px, calc(20px + (10 * ((100vw - 640px) / 1280))), 30px);
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}
.esg_box_grid {
	display: grid;
	gap: 16px;
}
.esg_box_grid.col-3 {
	grid-template-columns: repeat(3, 1fr);
}
.esg_box_grid.col-2 {
	grid-template-columns: repeat(2, 1fr);
}
.esg_box_grid li {
	display: flex;
	flex-direction: column;
	min-height: 260px;
	padding: clamp(28px, 2.8vw, 44px);
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 16px;
}
.esg_box_num {
	font-size: 14px;
	font-weight: 600;
	color: #999;
	margin-bottom: auto;
}
.esg_box_grid strong {
	margin-top: 40px;
	font-size: clamp(20px, calc(20px + (6 * ((100vw - 640px) / 1280))), 26px);
	font-weight: 700;
}
.esg_box_grid p {
	margin-top: 10px;
	font-size: clamp(15px, calc(15px + (2 * ((100vw - 640px) / 1280))), 17px);
	font-weight: 400;
	color: #555;
	word-break:keep-all;
}
.esg_channel {
	display: flex;
	gap: clamp(30px, calc((80 / var(--base-size)) * var(--base-percent)), 80px);
	padding-top: clamp(40px, calc((60 / var(--base-size)) * var(--base-percent)), 60px);
	border-top: 2px solid #0f0f10;
}
.esg_channel_head {
	flex-shrink: 0;
	width: 32%;
}
.esg_channel_head .title {
	margin-top: 10px;
}
.esg_channel .text {
	margin-top: 0;
	color: #555;
}

@media (max-width: 1024px) {
	.esg_pillars {
		grid-template-columns: 1fr;
	}
	.esg_pillars li {
		min-height: 480px;
	}
	.esg_promise_inner,
	.esg_row,
	.esg_channel {
		flex-direction: column;
		gap: 24px;
	}
	.esg_promise .title,
	.esg_row_head,
	.esg_channel_head {
		width: 100%;
	}
	.esg_box_grid.col-3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.esg_links,
	.esg_box_grid.col-3,
	.esg_box_grid.col-2 {
		grid-template-columns: 1fr;
	}
	.esg_box_grid li {
		min-height: auto;
	}
	.esg_box_grid strong {
		margin-top: 20px;
	}
	.esg_pillars li {
		min-height: 420px;
	}
	.esg_row_list li {
		padding: 20px 0;
	}
}

/* =========================================================
   주요 고객사
   ========================================================= */
/* 로고 그리드(7개): PC 4+3 (12칸 그리드로 윗줄 3칸씩·아랫줄 4칸씩), 태블릿·모바일 첫 칸 전체폭 + 2열 */
.cl_grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: clamp(220px, 17vw, 290px);
	border-top: 1px solid #e3e6ee;
	border-left: 1px solid #e3e6ee;
}
.cl_item {
	position: relative;
	display: flex;
	flex-direction: column;
	grid-column: span 3;
	border-right: 1px solid #e3e6ee;
	border-bottom: 1px solid #e3e6ee;
	background: #fff;
	transition: background-color 0.3s ease;
}
.cl_item:nth-child(-n+3) {
	grid-column: span 4;
}
.cl_item::after {
	content: '';
	position: absolute;
	inset: -1px;
	border: 1px solid #0f0f10;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.cl_item:hover {
	background: #f8f9fa;
}
.cl_item:hover::after {
	opacity: 1;
}
.cl_logo {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}
.cl_logo img {
	display: block;
	width: var(--logo-w, 60%);
	max-height: 90px;
	object-fit: contain;
	transition: transform 0.4s ease;
}
.cl_item:hover .cl_logo img {
	transform: scale(1.04);
}
.cl_info {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 0 clamp(20px, 2vw, 30px) clamp(20px, 2vw, 28px);
}
.cl_info strong {
	font-size: clamp(16px, calc(16px + (2 * ((100vw - 640px) / 1280))), 18px);
	font-weight: 700;
	color: #0f0f10;
}
.cl_info span {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #999;
	text-align: right;
}
/* [비교안 B] 하단 문의를 메인 partner_cta 그대로 사용: 그리드와 간격, 푸터에 바로 붙게 */
.cl_partner_cta {
	margin: clamp(100px, calc((150 / var(--base-size)) * var(--base-percent)), 150px) 0 -150px 0;
}
/* 하단 문의 영역 */
.cl_cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	padding: clamp(36px, 4vw, 64px);
	background: #0f0f10;
	border-radius: 16px;
	color: #fff;
}
.cl_cta_txt h3 {
	font-size: clamp(22px, calc(22px + (8 * ((100vw - 640px) / 1280))), 30px);
	font-weight: 700;
	color: #fff;
}
.cl_cta_txt p {
	margin-top: 10px;
	font-size: clamp(15px, calc(15px + (2 * ((100vw - 640px) / 1280))), 17px);
	font-weight: 400;
	color: rgba(255,255,255,0.65);
}
.cl_cta_btns {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.cl_btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}
/* 메인과 같은 긴 화살표 (icon-arrow2.svg, 흰색) */
.cl_btn::after {
	content: '';
	width: 36px;
	height: 12px;
	background: url('../img/icon-arrow2.svg') no-repeat center / contain;
	transition: transform 0.3s ease;
}
.cl_btn_main::after {
	filter: invert(1);
}
.cl_btn:hover::after {
	transform: translateX(4px);
}
.cl_btn:hover {
	border-color: #fff;
}
.cl_btn_main {
	background: #fff;
	border-color: #fff;
	color: #0f0f10;
}
.cl_more { margin-top: clamp(60px, 6vw, 100px); }

.cl_list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 4vw, 60px); border-top: 1px solid #e3e6ee; border-left: 1px solid #e3e6ee; }
.cl_list li { display: flex; align-items: center; gap: 12px; min-height: clamp(64px, 5.2vw, 84px); padding: 0 clamp(18px, 1.8vw, 28px); border-right: 1px solid #e3e6ee; border-bottom: 1px solid #e3e6ee; font-size: clamp(15px, 14px + 0.15625vw, 17px); font-weight: 600; color: #0f0f10; background: #fff; transition: background-color .3s; }
.cl_list li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #00a2f3; opacity: .35; transition: opacity .3s; }
.cl_list li:hover { background: #f8f9fa; }
.cl_list li:hover::before { opacity: 1; }

@media (max-width: 1024px) {
	.cl_grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(170px, 30vw, 260px);
	}
	.cl_item, .cl_item:nth-child(-n+3){
		grid-column: auto;
	}
	.cl_item:first-child {
		grid-column: 1 / -1;
	}
	.cl_item:first-child .cl_logo img {
		max-width: min(45%, 240px);
	}
	.cl_cta {
		flex-direction: column;
		align-items: flex-start;
	}
	.cl_list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.cl_item {
		aspect-ratio: auto;
		min-height: 170px;
	}
	.cl_logo {
		padding: 24px 14px 12px;
	}
	.cl_logo img {
		width: calc(var(--logo-w, 60%) + 20%);
		max-height: 56px;
	}
	.cl_info {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		padding: 0 14px 16px;
	}
	.cl_info strong {
		font-size: 15px;
	}
	.cl_info span {
		font-size: 10px;
		text-align: left;
	}
	.cl_cta_btns {
		width: 100%;
		flex-direction: column;
	}
	.cl_btn {
		justify-content: center;
		padding: 13px 10px;
		font-size: 15px;
		white-space: nowrap;
	}
	.cl_list li { gap: 8px; min-height: 56px; padding: 0 14px; font-size: 14px; letter-spacing: -0.02em; }
	.cl_list li::before { width: 4px; height: 4px; }
}

/* =========================================================
   공통 - 남색 카드 (NYT .sp-nv · .gr-fc 방식)
   각 섹션 원래 배경(#0f0f10) 위에 덮어씀 → 이 블록은 페이지별 섹션보다 뒤에 있어야 함
   ========================================================= */
/* NYT .sp-nv 카드: 남색 그라데이션 + 오른쪽 위 하늘색 빛 (마우스 올리면 커짐) */
.rm_compose_grid li.is-main,
.rm_link,
.tc_iso li,
.esg_spirit,
.esg_promise,
.cl_cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #123a78, #001031 70%);
	border-color: transparent;
	color: #fff;
}
.rm_compose_grid li.is-main::before,
.rm_link::before,
.tc_iso li::before,
.esg_spirit::before,
.esg_promise::before,
.cl_cta::before {
	content: "";
	position: absolute;
	right: -30%;
	top: -60%;
	width: 80%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 162, 243, .35), transparent 65%);
	pointer-events: none;
	transition: transform 1s cubic-bezier(.22, 1, .36, 1);
}
.rm_compose_grid li.is-main:hover::before,
.rm_link:hover::before,
.tc_iso li:hover::before,
.esg_spirit:hover::before,
.cl_cta:hover::before {
	transform: scale(1.3);
}
/* 빛 번짐 위로 내용이 올라오게 */
.rm_compose_grid li.is-main > *,
.rm_link > *,
.tc_iso li > *,
.esg_spirit > *,
.esg_promise > *,
.cl_cta > * {
	position: relative;
}

/* NYT .gr-fc 카드 모양: 둥근 모서리 20px, 번호 하늘색, 설명 흰색 65% */
.rm_compose_grid li.is-main,
.rm_link,
.tc_iso li,
.esg_spirit,
.cl_cta {
	border-radius: 20px;
}
.rm_compose_grid li.is-main .num {
	color: #00a2f3;
	font-weight: 500;
}
.rm_compose_grid li.is-main em,
.tc_iso li span,
.esg_spirit p,
.cl_cta_txt p {
	color: rgba(255, 255, 255, .65);
}

/* =========================================================
   유틸리티
   ========================================================= */
.txt-white {
	color: #fff !important;
}
.txt-center {
	text-align: center;
}