@charset "UTF-8";
/* =========================================
    시그니처 계열 공통 (signature / stemcell / petit)
    - sub.scss 의 .about 프레임 + 공통 섹션(dark-split/cards/steps/band/recommend/faq/benefits) 위에서 동작
    - 여기엔 시그니처 계열에만 쓰이는 섹션 : --sig-video / --program / --iconcards
    - 색감·라인색 등 계열 전용 조정
    - 스코프 : 해당 페이지 #contents 안에서만
========================================= */
#contents {
	/* --program / --iconcards 헤더·리스트도 흰 섹션 인셋 (cards/steps/benefits 는 sub.scss) */
}
#contents .about__sec.--program .sig__head,
#contents .about__sec.--program .program__list,
#contents .about__sec.--iconcards .sig__head,
#contents .about__sec.--iconcards .iconcards__list {
	padding-inline: var(--sec-pad-side);
}
#contents {
	/* =========================================
      01. SIG-VIDEO  (레일 인셋 영상)
  ========================================= */
	/* 시안 : intro 하단 라인 → 영상 상단 50, 그 사이를 중앙 스텁 라인이 이음 */
}
#contents .about__sec.--sig-video .sec__inner {
	padding-top: 50px;
}
#contents .about__sec.--sig-video .sig-video__box {
	padding-inline: var(--sec-pad-side);
}
#contents .about__sec.--sig-video .sig-video__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1400/787;
	background: #0c0c0c;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#contents .about__sec.--sig-video .sig-video__stage video,
#contents .about__sec.--sig-video .sig-video__stage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
#contents .about__sec.--sig-video .sig-video__stage {
	/* 시안 라벨 232x60 · 20/32 (모바일과 동일 비율) */
}
#contents .about__sec.--sig-video .sig-video__stage .sig-video__label {
	position: relative;
	z-index: 1;
	padding: 14px 43px;
	font-size: 20px;
	line-height: 32px;
	color: rgba(0, 0, 0, 0.55);
	background: rgba(255, 255, 255, 0.85);
}
#contents .about__sec.--sig-video .content__line.--height.--stub {
	left: 50%;
	width: 1px;
	height: 50px;
	/* 섹션 상단 여백(50) 안 : intro 하단 라인 ~ 영상 상단 */
}
#contents .about__sec.--sig-video .content__line.--height.--stub.--top {
	top: 0;
}
#contents .about__sec.--sig-video .content__line.--height.--stub.--bottom {
	top: 100%;
	height: 60px;
}
#contents {
	/* =========================================
      04. PROGRAM / DEVICES  (대형 다크 이미지 카드 2열)
  ========================================= */
}
#contents .about__sec.--program .sig__head {
	margin-bottom: 50px;
}
#contents .about__sec.--program .program__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
#contents .about__sec.--program .program__card {
	position: relative;
	aspect-ratio: 690/340;
	overflow: hidden;
	background: #2a2a2a;
	color: var(--white-color);
	display: block;
}
#contents .about__sec.--program .program__card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-transition: -webkit-transform 0.7s ease;
	transition: -webkit-transform 0.7s ease;
	transition: transform 0.7s ease;
	transition:
		transform 0.7s ease,
		-webkit-transform 0.7s ease;
}
#contents .about__sec.--program .program__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}
#contents .about__sec.--program .program__card .program__body {
	position: absolute;
	left: 50px;
	right: 40px;
	bottom: 40px;
	z-index: 1;
}
#contents .about__sec.--program .program__card .--num {
	display: block;
	font-size: 18px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}
#contents .about__sec.--program .program__card h3 {
	margin-top: 4px;
	font-size: 18px;
	line-height: 1.4;
	color: var(--white-color);
}
#contents .about__sec.--program .program__card .--desc {
	margin-top: 14px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.57;
	letter-spacing: -0.05em;
	color: rgba(255, 255, 255, 0.7);
}
#contents .about__sec.--program .program__card .--more {
	display: inline-block;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--white-color);
}
@media (min-width: 1024px) {
	#contents .about__sec.--program .program__card:hover > img {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}
}
#contents .about__sec.--program.--devices .program__body {
	bottom: 36px;
}
#contents {
	/* =========================================
      07. ICON CARDS  (흰 · 원형 아이콘 + 텍스트, 아이콘 관통 라인)
  ========================================= */
}
#contents .about__sec.--iconcards .sig__head {
	margin-bottom: 60px;
}
#contents .about__sec.--iconcards .iconcards__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	/* 아이콘 관통 라인 : 레일 ~ 레일 (list 는 padding-inline 만 있어 박스 자체가 레일~레일) */
}
#contents .about__sec.--iconcards .iconcards__list::before {
	content: "";
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.06);
}
#contents .about__sec.--iconcards .iconcards__list {
	/* 2·3·5열 변형 */
}
#contents .about__sec.--iconcards .iconcards__list.--2 {
	grid-template-columns: repeat(2, 1fr);
}
#contents .about__sec.--iconcards .iconcards__list.--3 {
	grid-template-columns: repeat(3, 1fr);
}
#contents .about__sec.--iconcards .iconcards__list.--5 {
	grid-template-columns: repeat(5, 1fr);
}
#contents .about__sec.--iconcards .iconcards__card {
	position: relative;
	padding: 0 20px;
	text-align: center;
}
#contents .about__sec.--iconcards .iconcards__card .--ico {
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #eee;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#contents .about__sec.--iconcards .iconcards__card .--ico img,
#contents .about__sec.--iconcards .iconcards__card .--ico svg {
	width: 36px;
	height: 36px;
	opacity: 0.5;
}
#contents .about__sec.--iconcards .iconcards__card h3 {
	font-size: 18px;
	color: var(--txt-color);
}
#contents .about__sec.--iconcards .iconcards__card p {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.57;
	letter-spacing: -0.01em;
	color: rgba(113, 113, 113, 0.7);
}
#contents {
	/* =========================================
      RESPONSIVE (시그니처 계열 전용)
  ========================================= */
}
@media (max-width: 1200px) {
	#contents .about--signature .sig__head .sec__subject {
		font-size: 30px;
	}
	#contents .about__sec.--iconcards .iconcards__list,
	#contents .about__sec.--iconcards .iconcards__list.--2,
	#contents .about__sec.--iconcards .iconcards__list.--3,
	#contents .about__sec.--iconcards .iconcards__list.--5 {
		grid-template-columns: repeat(2, 1fr);
		gap: 44px 24px;
	}
	#contents .about__sec.--iconcards .iconcards__list::before {
		display: none;
	}
}
@media (max-width: 1024px) {
	#contents .about--signature .sig__head .sec__subject {
		font-size: 26px;
	}
	#contents .about__sec.--program .program__list {
		grid-template-columns: 1fr;
	}
	#contents .about__sec.--program .program__card .program__body {
		left: 30px;
		right: 30px;
		bottom: 30px;
	}
}
@media (max-width: 640px) {
	#contents .about--signature .sig__head .sec__subject {
		font-size: 6.25vw; /* 40 */
		line-height: 1.25;
	}
	#contents .about--signature .sig__head .sec__en {
		font-size: 3.13vw; /* 20 */
	}
	#contents .about__sec.--program .sig__head,
	#contents .about__sec.--iconcards .sig__head {
		margin-bottom: 7.81vw; /* 50 */
	}
	#contents {
		/* SIG-VIDEO : 레일~레일 (x30 w580) */
		/* 모바일 시안은 intro 텍스트 → 영상 50 (intro 하단 패딩으로 충분) → 상단 여백 원복 */
	}
	#contents .about__sec.--sig-video .sec__inner {
		padding-top: 0;
	}
	#contents .about__sec.--sig-video .sig-video__box {
		padding-inline: 0;
	}
	#contents .about__sec.--sig-video .sig-video__stage {
		aspect-ratio: 580/326;
	}
	#contents .about__sec.--sig-video .sig-video__stage .sig-video__label {
		padding: 2.19vw 6.8vw; /* 14 / 43 → 232x60 */
		font-size: 3.13vw; /* 20 */
		line-height: 1.6;
	}
	#contents {
		/* ICON CARDS : 1열 · 아이콘 좌 + 텍스트 우, 아이콘 중심을 잇는 세로선 */
	}
	#contents .about__sec.--iconcards .iconcards__list,
	#contents .about__sec.--iconcards .iconcards__list.--2,
	#contents .about__sec.--iconcards .iconcards__list.--3,
	#contents .about__sec.--iconcards .iconcards__list.--5 {
		grid-template-columns: 1fr;
		gap: 9.38vw; /* 60 */
	}
	#contents .about__sec.--iconcards .iconcards__card {
		display: grid;
		grid-template-columns: 12.5vw 1fr; /* 80 */
		-webkit-column-gap: 6.25vw;
		-moz-column-gap: 6.25vw;
		column-gap: 6.25vw; /* 40 */
		-ms-flex-line-pack: start;
		align-content: start;
		padding: 0;
		text-align: left;
		/* 세로선 : 이 카드 아이콘 중심 → 다음 카드 아이콘 중심 (gap 60 포함) */
	}
	#contents .about__sec.--iconcards .iconcards__card:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 6.25vw;
		left: 6.25vw;
		width: 1px;
		height: calc(100% + 9.38vw);
		background: rgba(0, 0, 0, 0.08);
	}
	#contents .about__sec.--iconcards .iconcards__card .--ico {
		grid-column: 1;
		grid-row: 1 / span 2;
		z-index: 1;
		width: 12.5vw;
		height: 12.5vw;
		margin: 0;
	}
	#contents .about__sec.--iconcards .iconcards__card .--ico img,
	#contents .about__sec.--iconcards .iconcards__card .--ico svg {
		width: 5.63vw; /* 36 */
		height: 5.63vw;
	}
	#contents .about__sec.--iconcards .iconcards__card h3 {
		grid-column: 2;
		grid-row: 1;
		font-size: 3.44vw; /* 22 */
		line-height: 1.45;
	}
	#contents .about__sec.--iconcards .iconcards__card p {
		grid-column: 2;
		grid-row: 2;
		margin-top: 1.25vw; /* 8 */
		font-size: 3.13vw; /* 20 */
		line-height: 1.6;
	}
	#contents {
		/* PROGRAM : 1열 카드 520x400 */
	}
	#contents .about__sec.--program .program__list {
		gap: 3.13vw; /* 20 */
	}
	#contents .about__sec.--program .program__card {
		aspect-ratio: 520/400;
	}
	#contents .about__sec.--program .program__card .program__body {
		left: 4.69vw;
		right: 4.69vw;
		bottom: 4.69vw;
	}
	#contents .about__sec.--program .program__card .--num {
		font-size: 3.44vw; /* 22 */
		line-height: 1.45;
	}
	#contents .about__sec.--program .program__card h3 {
		margin-top: 1.56vw; /* 10 */
		font-size: 3.44vw; /* 22 */
		line-height: 1.45;
	}
	#contents .about__sec.--program .program__card .--desc {
		margin-top: 1.56vw; /* 10 */
		font-size: 3.13vw; /* 20 */
		line-height: 1.6;
	}
	#contents .about__sec.--program .program__card .--more {
		margin-top: 3.13vw; /* 20 */
		font-size: 3.13vw; /* 20 */
		line-height: 1.6;
	}
} /*# sourceMappingURL=signature-common.css.map */