/* 메인 페이지는 fullPage.js가 뷰포트 전체를 관리하므로 헤더 패딩 불필요 */
/* section-pair CSS 변수는 /css/section-pair-vars.css (header에서 base 다음 로드) */
html, body {
	overflow-x: hidden;
	word-break: keep-all;
}

/* fullPage.js가 섹션7에서 body overflow를 복원해도 수평 스크롤 차단 */
#fullpage {
	overflow-x: hidden;
}

#wrap {
	padding-top: 0;
}

/* ===== Intro Overlay ===== */
.intro-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-primary) 0%, #112230 100%);
	transition: opacity 0.8s ease;
	pointer-events: auto;
}

.intro-overlay--out {
	opacity: 0;
	pointer-events: none;
}

.intro-overlay__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.intro-overlay__title {
	display: flex;
	align-items: center;
	gap: 16px;
}

.intro-overlay__clip {
	overflow: hidden;
}

.intro-overlay__text-top {
	display: block;
	color: var(--color-white);
	font-size: 72px;
	font-family: var(--baseFont, Pretendard);
	font-weight: 600;
	line-height: 1.3;
	animation: introSlideDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

.intro-overlay__text-bottom {
	display: block;
	font-size: 72px;
	font-weight: 700;
	line-height: 1.3;
	background: linear-gradient(90deg, #9A8853 0%, #F3E2B3 50%, #9A8853 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: introSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}
.intro-overlay__sub {
	color: var(--color-white);
	font-size: 26px;
	font-family: var(--baseFont, Pretendard);
	font-weight: 500;
	text-align: center;
	opacity: 0;
	animation: introFade 0.8s ease 0.3s forwards;
}

@keyframes introSlideDown {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes introSlideUp {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@keyframes introFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ===== FullPage 메인 페이지 스타일 ===== */

/* Section 기본 스타일
   · jquery.fullPage.css 의 .fp-section.fp-table(display:table) 보다 #fullpage .section 이 나중에 로드되어 display:flex 가 유지되는 경우가 많음.
   · 이 때 자식 .fp-tableCell 이 flex 아이템이 되며, align-items:center 면 셀 블록 전체가 뷰포트 세로 중앙에 올라가 고정 헤더에 가림 → 섹션별로 align-items 를 덮어써야 함.
   · display:table 이 실제로 이기는 환경에서는 세로 정렬이 .fp-tableCell 의 vertical-align 만 먹음. */
#fullpage .section {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100vh;
}

/* .con02 의 align-items 는 특이도가 #fullpage .section 보다 낮아 적용 안 됐음 — 섹션 단위로 명시 */
#fullpage .section.con02 {
	align-items: flex-start;
	justify-content: flex-start;
}

#fullpage .section.con03 {
	align-items: flex-start;
	justify-content: flex-start;
}

#fullpage .section.con04 {
	align-items: flex-start;
	justify-content: flex-start;
}

#fullpage .section.con06 {
	align-items: flex-start;
	justify-content: flex-start;
}

.section-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 60px 20px;
}

/* ===== Section 01 - 성공사례 슬라이더 ===== */
.con01 {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--color-bg-light);
	font-family: var(--baseFont, Pretendard);
}

.con01__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 2vh, 20px);
	width: 100%;
	margin-top: clamp(10px, 2vh, 20px);
}

.con01__heading {
	color: var(--section-pair-main-color, var(--color-primary)) !important;
	font-size: var(--section-pair-main-fs-max, 48px);
	font-weight: 700;
	line-height: var(--section-pair-main-lh-max, 72px);
	text-align: center;
}

.con01__sub {
	color: var(--section-pair-sub-color, var(--color-text-dark)) !important;
	font-size: var(--section-pair-sub-fs-max, 20px);
	font-weight: 300;
	line-height: var(--section-pair-sub-lh-max, 32px);
	text-align: center;
}

.con01__swiper {
	width: 100%;
	margin-top: clamp(24px, 4.8vh, 48px);
	overflow: visible;
}

.con01__swiper .swiper-slide {
	width: 385px;
	padding-top: 20px;
}

.con01__card {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 4vh, 40px);
	width: 385px;
	padding: clamp(20px, 4vh, 40px);
	background: var(--color-white);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.con01__card:hover {
	background: var(--color-primary);
	transform: translateY(-20px);
}

.con01__card:hover .con01__tag {
	background: var(--color-white);
	color: var(--color-primary);
}

.con01__card:hover .con01__card-body {
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

.con01__card:hover .con01__card-title {
	color: var(--color-white);
}

.con01__card:hover .con01__card-desc {
	color: rgba(255, 255, 255, 0.8);
}

.con01__card:hover .con01__lawyer-label {
	color: rgba(255, 255, 255, 0.8);
}

.con01__card:hover .con01__lawyer-name {
	color: var(--color-white);
}

.con01__card-tags {
	display: flex;
	align-items: center;
	gap: 5px;
}

.con01__tag {
	padding: 5px 15px;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.con01__card-body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: clamp(10px, 2vh, 20px);
	padding-bottom: clamp(20px, 4vh, 40px);
	border-bottom: 1px solid var(--color-border);
}

.con01__card-title {
	color: var(--color-black);
	font-size: 28px;
	font-weight: 600;
	line-height: 42px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	-webkit-box-pack: start;
	overflow: hidden;
}

.con01__card-desc {
	color: var(--color-gray-pale);
	font-size: clamp(8.533px, 2vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	-webkit-box-pack: start;
	overflow: hidden;
}

.con01__card-lawyer {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.5625vw, 30px);
}

.con01__lawyer-img {
	flex-shrink: 0;
	width: clamp(34.667px, 3.38542vw, 65px);
	height: clamp(42.667px, 4.16667vw, 80px);
	overflow: hidden;
}

.con01__lawyer-img img {
	width: clamp(42.667px, 4.16667vw, 80px);
	height: clamp(42.667px, 4.16667vw, 80px);
	object-fit: cover;
}

.con01__lawyer-info {
	display: flex;
	flex-direction: column;
	gap: clamp(2.667px, 0.260417vw, 5px);
}

.con01__lawyer-label {
	color: var(--color-text-dark);
	font-size: clamp(8.533px, 0.833333vw, 16px);
	font-weight: 500;
	line-height: 1.3;
}

.con01__lawyer-name {
	color: var(--color-black);
	font-size: clamp(12.8px, 1.25vw, 24px);
	font-weight: 600;
	line-height: 1.3;
}

.con01__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, 0.78125vw, 15px);
	width: 100%;
	margin-top: clamp(14.933px, min(1.45833vw, 2.8vh), 28px);
}

.con01__btn-prev,
.con01__btn-next {
	display: flex;
	align-items: center;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-primary);
	font-size: 16px;
	cursor: pointer;
}

.con01__btn-prev:focus-visible,
.con01__btn-next:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.con01__pagination.swiper-pagination-progressbar {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: clamp(53.333px, 5.20833vw, 100px);
	height: 2px;
	background: var(--color-border);
	flex-shrink: 0;
}

.con01__pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--color-primary);
}

/* ===== 페이지 네비게이션 ===== */
.page-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 19px;
	position: fixed;
	z-index: 100;
	top: 50%;
	left: 50px;
	transform: translateY(-50%);
}

.page-nav__dot {
	display: block;
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	padding: 0;
	background: #DDDDDD;
	border: none;
	border-radius: 9999px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.page-nav__dot--active {
	width: 10px;
	height: 10px;
	background: transparent;
	border: 2px solid var(--color-primary);
}

.page-nav--light .page-nav__dot--active {
	border-color: var(--color-white);
}

/* fullPage 네비게이션 커스터마이징 (필요시) */
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
	background-color: rgba(0, 0, 0, 0.5);
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {
	background-color: #000;
}

/* ===== Section 02 - 왜 새율인가? 인트로 ===== */
.con02 {
	background: linear-gradient(180deg, #22445E 0%, #001627 100%);
	justify-content: flex-start;
	align-items: flex-start;
	padding: 0;
	position: relative;
}

/* 1025px 이상: 슬라이더 좌우 inset — Swiper offset 대신 clamp 패딩(1920 기준 160px) */
@media (min-width: 1025px) {
	.con01__swiper {
		padding-left: clamp(85.333px, 8.33333vw, 160px);
		padding-right: clamp(85.333px, 8.33333vw, 160px);
		box-sizing: border-box;
	}

	/* con04: 1920 설계 → 1025~1920 clamp — 1024 이하는 media.css */
	.con04__inner {
		max-width: clamp(calc(1600 * 1024 / 1920 * 1px), calc(1600 / 1920 * 100vw), 1600px);
		padding-top: clamp(calc(150 * 1024 / 1920 * 1px), calc(150 / 1920 * 100vw), 150px);
		gap: clamp(calc(40 * 1024 / 1920 * 1px), calc(40 / 1920 * 100vw), 40px);
	}

	.con04__title {
		gap: clamp(calc(20 * 1024 / 1920 * 1px), calc(20 / 1920 * 100vw), 20px);
	}

	.con04__heading {
		font-size: var(--section-pair-main-fs-max, 48px);
		line-height: var(--section-pair-main-lh-max, 72px);
	}

	.con04__sub {
		font-size: var(--section-pair-sub-fs-max, 20px);
		line-height: var(--section-pair-sub-lh-max, 32px);
	}

	.con04__card {
		height: clamp(calc(280 * 1024 / 1920 * 1px), calc(280 / 1920 * 100vw), 280px);
	}

	.con04__card-content {
		gap: clamp(calc(15 * 1024 / 1920 * 1px), calc(15 / 1920 * 100vw), 15px);
		font-size: clamp(calc(24 * 1024 / 1920 * 1px), calc(24 / 1920 * 100vw), 24px);
	}

	.con04__card-label {
		font-size: 1em;
		line-height: clamp(calc(31.2 * 1024 / 1920 * 1px), calc(31.2 / 1920 * 100vw), 31.2px);
	}

	.con04__card-content svg {
		width: 0.52em;
		height: 0.52em;
		flex-shrink: 0;
		display: block;
	}
}

/* fullPage 활성 구간(JS: 너비 1025px 이상): .fp-tableCell flex 세로 정렬 — main.js fullResize 와 동일 기준 */
@media (min-width: 1025px) {
	#fullpage .section.con02.fp-section {
		display: flex !important;
	}

	#fullpage .section.con02 .fp-tableCell {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
		align-self: stretch;
		width: 100%;
		min-height: 0;
		box-sizing: border-box;
		position: relative;
		padding-top: var(--header-main-height, 90px);
		/* 상단 헤더 여백과 비슷한 하단 안전 여백 — flex-end 때처럼 하단 잘림 방지 */
		padding-bottom: clamp(56px, 12vh, 140px);
	}

	#fullpage .section.con01.fp-section {
		display: flex !important;
	}

	#fullpage .section.con01 .fp-tableCell {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
		align-self: stretch;
		width: 100%;
		min-height: 0;
		box-sizing: border-box;
		position: relative;
		/* 카테고리 태그·인트로 타이틀이 고정 헤더에 붙어 보이는 문제 방지 — 헤더 높이만큼 상단 여백 확보 */
		padding-top: var(--header-main-height, 90px);
		padding-bottom: clamp(56px, 12vh, 140px);
	}

	#fullpage .section.con01 {
		padding-top: 70px;
		padding-bottom: 0;
	}

	#fullpage .section.con03.fp-section {
		display: flex !important;
	}

	#fullpage .section.con03 .fp-tableCell {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
		align-self: stretch;
		width: 100%;
		min-height: 0;
		box-sizing: border-box;
		position: relative;
		padding-top: var(--header-main-height, 90px);
		padding-bottom: clamp(56px, 12vh, 140px);
	}

	#fullpage .section.con04.fp-section {
		display: flex !important;
	}

	#fullpage .section.con04 .fp-tableCell {
		display: flex !important;
		flex-direction: column;
		justify-content: flex-start;
		flex: 1 1 auto;
		align-self: stretch;
		width: 100%;
		min-height: 0;
		box-sizing: border-box;
		position: relative;
		/* 배너+메인 고정 스택 전체 — main-height(90)만 쓰면 본문이 메인 바(60~150px) 구간에 겹침 */
		padding-top: var(--fixed-header-stack, 150px);
		padding-bottom: clamp(56px, 12vh, 140px);
	}

	/* fp 셀에서 이미 스택만큼 띄움 — inner padding-top 과 이중 여백 방지 */
	html.fp-enabled #fullpage .section.con04 .con04__inner {
		padding-top: 50px;
	}

	#fullpage .section.con06.fp-section {
		display: flex !important;
	}

	#fullpage .section.con06 .fp-tableCell {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
		align-self: stretch;
		width: 100%;
		min-height: 0;
		box-sizing: border-box;
		position: relative;
		padding-top: var(--header-main-height, 90px);
		padding-bottom: clamp(56px, 12vh, 140px);
	}

	/* .con06__inner 상단 패딩(1920 기준 90)은 fp-tableCell 의 header-main 패딩과 역할이 겹침 */
	/* justify-content:center(중앙정렬) 대신 상단 고정 — 콘텐츠가 뷰포트보다 길면 중앙정렬 시 위쪽이 고정 헤더에 가려지므로, 넘칠 경우 아래쪽으로만 넘치도록 함 */
	#fullpage .section.con06 .con06__inner {
		padding-top: 0;
		justify-content: flex-start;
	}
}

.con02__content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	width: 100%;
	padding: 0 clamp(85.33px, 8.3333vw, 160px);
}

.con02__heading {
	display: flex;
	flex-direction: column;
	gap: clamp(10.67px, 1.0417vw, 20px);
	flex: 1;
	padding-top: clamp(26.67px, 2.6042vw, 50px);
}

.con02__heading-title {
	color: var(--color-white);
	font-size: var(--section-pair-main-fs-max, 48px);
	font-weight: 700;
	line-height: var(--section-pair-main-lh-max, 72px);
}

.con02__heading-sub {
	color: var(--color-white);
	font-size: var(--section-pair-sub-fs-max, 20px);
	font-weight: 200;
	line-height: var(--section-pair-sub-lh-max, 32px);
}

.con02__items {
	display: flex;
	flex-direction: column;
	width: min(100%, clamp(458.67px, 44.7917vw, 860px));
	margin: 0;
	padding: 0;
	list-style: none;
}

.con02__item {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding: clamp(32px, 3.125vw, 60px) 0;
	overflow: hidden;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.con02__item-bg {
	position: absolute;
	top: clamp(51.73px, 5.0521vw, 97px);
	left: 0;
	color: var(--color-white);
	font-size: clamp(53.33px, 5.2083vw, 100px);
	font-family: Figtree;
	font-style: italic;
	font-weight: 800;
	line-height: clamp(69.33px, 6.7708vw, 130px);
	opacity: 0.05;
	white-space: nowrap;
	pointer-events: none;
}

.con02__item-title {
	color: var(--color-white);
	font-size: clamp(11.73px, 1.1458vw, 22px);
	font-family: Pretendard;
	font-weight: 600;
	line-height: clamp(15.25px, 1.4896vw, 28.6px);
}

.con02__item-stat {
	display: flex;
	align-items: baseline;
	gap: clamp(4.27px, 0.4167vw, 8px);
}

.con02__stat-number {
	color: var(--color-white);
	font-size: clamp(23.47px, 2.2917vw, 44px);
	font-family: Figtree;
	font-weight: 700;
	line-height: clamp(30.51px, 2.9792vw, 57.2px);
}

.con02__stat-label {
	color: var(--color-white);
	font-size: clamp(11.73px, 1.1458vw, 22px);
	font-family: Pretendard;
	font-weight: 600;
	line-height: clamp(15.25px, 1.4896vw, 28.6px);
}

.con02__stat-number--kr {
	font-family: var(--baseFont, Pretendard);
}

.con02__slot-wrap {
	display: inline-flex;
	align-items: flex-end;
}

.con02__slot-digit {
	display: inline-block;
	height: clamp(30.51px, 2.9792vw, 57.2px);
	overflow: hidden;
}

.con02__slot-strip {
	display: flex;
	flex-direction: column;
	will-change: transform;
}

.con02__slot-strip span {
	display: block;
	height: clamp(30.51px, 2.9792vw, 57.2px);
	line-height: clamp(30.51px, 2.9792vw, 57.2px);
	text-align: center;
}

.con02__slot-sep {
	display: inline-block;
	height: clamp(30.51px, 2.9792vw, 57.2px);
	line-height: clamp(30.51px, 2.9792vw, 57.2px);
}

.con02__item-desc {
	color: var(--color-white);
	font-size: clamp(11.73px, 1.1458vw, 22px);
	font-family: Pretendard;
	font-weight: 600;
	line-height: clamp(15.25px, 1.4896vw, 28.6px);
}

.con02__item-desc strong {
	font-size: clamp(23.47px, 2.2917vw, 44px);
	font-weight: 700;
	line-height: clamp(30.51px, 2.9792vw, 57.2px);
}

@keyframes con02Fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ===== Section 03 - 변호사 소개 ===== */
.con03 {
	position: relative;
	overflow: hidden;
	background: #D9D9D9;
	padding: 0;
	align-items: flex-start;
	justify-content: flex-start;
}

.con03__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.con03__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

/* 데스크(1025+): 1920 설계 → 1280~1920 구간만 vw 비율 축소(1025~1279는 1280 스케일로 고정). ≤1024는 media.css + .con03__inner { display:contents } */
@media (min-width: 1025px) {
	.con03__inner {
		display: block;
		position: relative;
		width: 100%;
		z-index: 1;
		flex: 0 0 auto;
		min-height: clamp(calc(910 * 1280 / 1920 * 1px), calc(910 / 1920 * 100vw), 910px);
	}

	.con03__title {
		position: absolute;
		left: clamp(calc(160 * 1280 / 1920 * 1px), calc(160 / 1920 * 100vw), 160px);
		top: clamp(calc(200 * 1280 / 1920 * 1px), calc(200 / 1920 * 100vw), 200px);
		width: clamp(calc(620 * 1280 / 1920 * 1px), calc(620 / 1920 * 100vw), 620px);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: clamp(calc(20 * 1280 / 1920 * 1px), calc(20 / 1920 * 100vw), 20px);
		z-index: 1;
	}

	.con03__title-texts {
		display: flex;
		flex-direction: column;
		gap: clamp(calc(20 * 1280 / 1920 * 1px), calc(20 / 1920 * 100vw), 20px);
		align-self: stretch;
	}

	.con03__title-main {
		align-self: stretch;
		color: var(--section-pair-main-color, var(--color-primary)) !important;
		font-size: var(--section-pair-main-fs-max, 48px);
		font-family: var(--baseFont);
		font-weight: 700;
		line-height: var(--section-pair-main-lh-max, 72px);
		letter-spacing: -0.96px;
		text-wrap: nowrap;
	}

	.con03__title-sub {
		align-self: stretch;
		color: var(--section-pair-sub-color, var(--color-text-dark)) !important;
		font-size: var(--section-pair-sub-fs-max, 20px);
		font-weight: 300;
		line-height: var(--section-pair-sub-lh-max, 32px);
		letter-spacing: -0.4px;
	}

	.con03__info {
		position: absolute;
		left: clamp(calc(160 * 1280 / 1920 * 1px), calc(160 / 1920 * 100vw), 160px);
		top: clamp(calc(548 * 1280 / 1920 * 1px), calc(548 / 1920 * 100vw), 548px);
		width: clamp(calc(620 * 1280 / 1920 * 1px), calc(620 / 1920 * 100vw), 620px);
		display: flex;
		flex-direction: column;
		gap: clamp(calc(30 * 1280 / 1920 * 1px), calc(30 / 1920 * 100vw), 30px);
		z-index: 1;
	}

	.con03__name {
		display: flex;
		align-items: center;
		gap: clamp(calc(25 * 1280 / 1920 * 1px), calc(25 / 1920 * 100vw), 25px);
		padding-bottom: clamp(calc(30 * 1280 / 1920 * 1px), calc(30 / 1920 * 100vw), 30px);
		border-bottom: 1px solid #000;
	}

	.con03__name-icon {
		flex-shrink: 0;
	}

	.con03__name svg {
		width: clamp(calc(44 * 1280 / 1920 * 1px), calc(44 / 1920 * 100vw), 44px);
		height: clamp(calc(40 * 1280 / 1920 * 1px), calc(40 / 1920 * 100vw), 40px);
	}

	.con03__name-text {
		color: var(--color-black);
		font-size: clamp(calc(32 * 1280 / 1920 * 1px), calc(32 / 1920 * 100vw), 32px);
		font-family: Pretendard;
		font-weight: 700;
		line-height: clamp(calc(41.6 * 1280 / 1920 * 1px), calc(41.6 / 1920 * 100vw), 41.6px);
	}

	.con03__list {
		display: flex;
		flex-direction: column;
		gap: clamp(calc(15 * 1280 / 1920 * 1px), calc(15 / 1920 * 100vw), 15px);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.con03__list-item {
		display: flex;
		align-items: flex-start;
		gap: clamp(calc(15 * 1280 / 1920 * 1px), calc(15 / 1920 * 100vw), 15px);
		color: var(--color-gray-mid);
		font-size: clamp(calc(20 * 1280 / 1920 * 1px), calc(20 / 1920 * 100vw), 20px);
		font-family: Pretendard;
		font-weight: 400;
		line-height: clamp(calc(32 * 1280 / 1920 * 1px), calc(32 / 1920 * 100vw), 32px);
	}

	.con03__list-item::before {
		content: '';
		flex-shrink: 0;
		width: clamp(calc(4 * 1280 / 1920 * 1px), calc(4 / 1920 * 100vw), 4px);
		height: clamp(calc(4 * 1280 / 1920 * 1px), calc(4 / 1920 * 100vw), 4px);
		background: var(--color-primary);
		margin-top: clamp(calc(14 * 1280 / 1920 * 1px), calc(14 / 1920 * 100vw), 14px);
	}

	.con03__slide {
		position: absolute;
		left: clamp(calc(735 * 1280 / 1920 * 1px), calc(735 / 1920 * 100vw), 735px);
		top: clamp(calc(120 * 1280 / 1920 * 1px), calc(120 / 1920 * 100vw), 120px);
		display: flex;
		align-items: flex-end;
		gap: clamp(calc(10 * 1280 / 1920 * 1px), calc(10 / 1920 * 100vw), 10px);
		z-index: 1;
	}

	.con03__slide-btn {
		flex-shrink: 0;
		width: clamp(calc(30 * 1280 / 1920 * 1px), calc(30 / 1920 * 100vw), 30px);
		height: clamp(calc(170 * 1280 / 1920 * 1px), calc(170 / 1920 * 100vw), 170px);
		background: var(--color-gray-dark);
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.con03__slide-btn:focus-visible {
		outline: 2px solid var(--color-white);
		outline-offset: 2px;
	}

	.con03__thumbs {
		width: clamp(calc(395 * 1280 / 1920 * 1px), calc(395 / 1920 * 100vw), 395px);
		flex-shrink: 0;
		overflow: hidden;
	}

	.con03__thumb {
		position: relative;
		width: 100%;
		height: clamp(calc(170 * 1280 / 1920 * 1px), calc(170 / 1920 * 100vw), 170px);
		overflow: hidden;
		cursor: pointer;
		padding: 0;
		border: none;
		background: none;
	}

	.con03__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		filter: grayscale(100%);
		transition: filter 0.3s ease;
	}

	.con03__thumb--active img {
		filter: grayscale(0%);
	}

	.con03__thumb-gra {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(23, 51, 73, 0) 0%, var(--color-primary) 100%);
	}

	.con03__main-img {
		position: relative;
		flex-shrink: 0;
		width: clamp(calc(580 * 1280 / 1920 * 1px), calc(580 / 1920 * 100vw), 580px);
		height: clamp(calc(790 * 1280 / 1920 * 1px), calc(790 / 1920 * 100vw), 790px);
		overflow: hidden;
	}

	.con03__main-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}

	.con03__view-more {
		position: absolute;
		bottom: clamp(calc(53 * 1280 / 1920 * 1px), calc(53 / 1920 * 100vw), 53px);
		left: 50%;
		transform: translateX(-50%);
		background: none;
		border: none;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(calc(4 * 1280 / 1920 * 1px), calc(4 / 1920 * 100vw), 4px);
		color: var(--color-white) !important;
		font-size: clamp(calc(18 * 1280 / 1920 * 1px), calc(18 / 1920 * 100vw), 18px);
		font-family: Figtree;
		font-weight: 400;
		line-height: clamp(calc(23.4 * 1280 / 1920 * 1px), calc(23.4 / 1920 * 100vw), 23.4px);
		white-space: nowrap;
		padding: 0;
	}

	.con03__view-more::after {
		content: '';
		width: clamp(calc(86 * 1280 / 1920 * 1px), calc(86 / 1920 * 100vw), 86px);
		height: 1px;
		background: rgba(255, 255, 255, 0.3);
	}
}

.con03__mobile-swiper { display: none; }
.con03__mobile-view-more { display: none; }

/* ===== Section 04 - 주요업무분야 ===== */
.con04 {
	position: relative;
	overflow: hidden;
	background: #1a1a1a;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
}

.con04__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.con04__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(5px);
	transform: scale(1.05);
}

.con04__bg-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.60);
}

.con04__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
}

.con04__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.con04__heading {
	color: var(--color-white);
	font-weight: 700;
}

.con04__sub {
	color: var(--color-white);
	font-weight: 300;
}

.con04__grid {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.con04__row {
	display: flex;
}

.con04__card {
	position: relative;
	flex: 0 0 20%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	outline: 1px solid rgba(255, 255, 255, 0.10);
	outline-offset: -1px;
	background: rgba(255, 255, 255, 0.10);
	text-decoration: none;
}

.con04__card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.20);
	z-index: 1;
}

.con04__card:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: -4px;
}

.con04__card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scaleY(0) translateZ(0);
	transform-origin: center center;
	will-change: transform;
	transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.con04__card:hover .con04__card-bg {
	transform: scaleY(1) translateZ(0);
}

.con04__card-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	transform: translateZ(0) scale(1);
	transform-origin: center center;
	will-change: transform;
	transition: transform 0.35s ease;
}

.con04__card:hover .con04__card-content {
	transform: translateZ(0) scale(1.27);
}

.con04__card-label {
	color: var(--color-white);
	font-weight: 600;
	display: inline-block;
}

.con04__card-arrow {
	display: block;
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	position: relative;
}

.con04__card-arrow::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	left: 2px;
	top: 1px;
	outline: 2px solid var(--color-white);
	outline-offset: -1px;
}

/* ===== Section 05 - 성공사례/후기 ===== */
.con05 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	padding: 0 160px;
	background-color: var(--color-bg-light);
	background-image: url('/img/main/con05_bg.png');
	background-size: cover;
	background-position: center top;
	position: relative;
	overflow: hidden;
}

.con05__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	margin-bottom: 48px;
}

.con05__title {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.con05__heading {
	color: var(--color-primary);
	font-size: var(--section-pair-main-fs-max, 48px);
	font-weight: 700;
	line-height: var(--section-pair-main-lh-max, 72px);
}

.con05__sub {
	color: var(--color-text-dark);
	font-size: var(--section-pair-sub-fs-max, 20px);
	font-weight: 300;
	line-height: var(--section-pair-sub-lh-max, 32px);
}

.con05__more {
	flex-shrink: 0;
}

.con05__slider {
	position: relative;
	width: 100%;
}

.con05__swiper {
	width: 100%;
	overflow: hidden;
}

.con05__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	cursor: pointer;
}

.con05__card-img {
	width: 100%;
	aspect-ratio: 287 / 180;
	background-color: #D9D9D9;
	background-size: 100%;
	background-position: center top;
	transition: background-size 0.35s ease;
}
.con05__card:hover .con05__card-img {
	background-size: 106%;
}

.con05__card:hover .con05__card-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.con05__card-txt {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.con05__card-title {
	color: var(--color-black);
	font-size: 20px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -0.4px;
}

.con05__card-date {
	color: var(--color-gray);
	font-size: 16px;
	font-family: var(--engFont, Figtree);
	font-weight: 500;
	line-height: 1.3;
}

.con05__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	left: -50px;
	right: -50px;
	top: 90px;
	transform: translateY(-50%);
	pointer-events: none;
}

.con05__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 60px;
	background: var(--color-gray-dark);
	border: none;
	cursor: pointer;
	pointer-events: auto;
	color: var(--color-white);
	font-size: 18px;
}

/* ===== Section 06 - 법률정보 영상 =====
   1920 기준 px → 1025~1920: clamp( N*(1024/1920)px, N/1920*100vw, Npx ). ≤1024는 media.css */
.con06__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(calc(48 * 1024 / 1920 * 1px), calc(48 / 1920 * 100vw), calc(48 * 1px));
	width: 100%;
	height: 100%;
	padding: clamp(calc(90 * 1024 / 1920 * 1px), calc(90 / 1920 * 100vw), calc(90 * 1px))
		clamp(calc(160 * 1024 / 1920 * 1px), calc(160 / 1920 * 100vw), calc(160 * 1px))
		0;
	background: var(--color-bg-light);
}

.con06__top {
	display: flex;
	align-items: flex-start;
	gap: clamp(calc(85 * 1024 / 1920 * 1px), calc(85 / 1920 * 100vw), calc(85 * 1px));
	margin-top: 20px;
}

.con06__video {
	position: relative;
	flex-shrink: 0;
	width: clamp(calc(725 * 1024 / 1920 * 1px), calc(725 / 1920 * 100vw), calc(725 * 1px));
	height: clamp(calc(408 * 1024 / 1920 * 1px), calc(408 / 1920 * 100vw), calc(408 * 1px));
	overflow: hidden;
	background: #D9D9D9;
}

.con06__video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.con06__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	width: 71px;
	aspect-ratio: 71 / 50;
	transition: transform 0.3s ease;
}

.con06__play--sm {
	width: 71px;
	aspect-ratio: 43 / 30;
}

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

a.con06__video:hover .con06__play,
a.con06__card:hover .con06__play {
	transform: translate(-50%, -50%) scale(1.18);
}

.con06__txt {
	display: flex;
	flex-direction: column;
	gap: clamp(calc(40 * 1024 / 1920 * 1px), calc(40 / 1920 * 100vw), calc(40 * 1px));
	flex: 1;
	min-width: 0;
}

.con06__title {
	display: flex;
	flex-direction: column;
	gap: clamp(calc(20 * 1024 / 1920 * 1px), calc(20 / 1920 * 100vw), calc(20 * 1px));
}

.con06__heading {
	color: var(--color-primary);
	font-size: clamp(calc(36 * 1024 / 1920 * 1px), calc(36 / 1920 * 100vw), calc(36 * 1px));
	font-weight: 700;
	line-height: clamp(calc(52 * 1024 / 1920 * 1px), calc(52 / 1920 * 100vw), calc(52 * 1px));
}

.con06__sub {
	color: var(--color-text-dark);
	font-size: var(--section-pair-sub-fs-max, 20px);
	font-weight: 300;
	line-height: var(--section-pair-sub-lh-max, 32px);
}

.con06__desc {
	color: var(--color-gray);
	font-size: clamp(calc(18 * 1024 / 1920 * 1px), calc(18 / 1920 * 100vw), calc(18 * 1px));
	font-weight: 500;
	line-height: 1.6;
}

.con06__more {
	width: fit-content;
}

.con06__bottom {
	position: relative;
	/* 썸네일만 기준으로 화살표 수직 중앙(calc) — container는 슬라이드와 동일 너비 */
	container-type: inline-size;
	container-name: con06-bottom;
}

.con06__swiper {
	overflow: hidden;
}

.con06__card {
	display: flex;
	flex-direction: column;
	gap: clamp(calc(20 * 1024 / 1920 * 1px), calc(20 / 1920 * 100vw), calc(20 * 1px));
	width: 100%;
}

.con06__card-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #D9D9D9;
}

.con06__card-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.con06__card-txt {
	display: flex;
	flex-direction: column;
	gap: clamp(calc(10 * 1024 / 1920 * 1px), calc(10 / 1920 * 100vw), calc(10 * 1px));
}

.con06__card-title {
	color: var(--color-black);
	font-size: clamp(calc(20 * 1024 / 1920 * 1px), calc(20 / 1920 * 100vw), calc(20 * 1px));
	font-weight: 500;
	line-height: clamp(calc(26 * 1024 / 1920 * 1px), calc(26 / 1920 * 100vw), calc(26 * 1px));
}

.con06__card-date {
	color: var(--color-gray);
	font-size: clamp(calc(16 * 1024 / 1920 * 1px), calc(16 / 1920 * 100vw), calc(16 * 1px));
	font-family: var(--engFont, Figtree);
	font-weight: 500;
	line-height: 1.3;
}

.con06__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	left: clamp(calc(-80 * 1024 / 1920 * 1px), calc(-80 / 1920 * 100vw), calc(-50 * 1px));
	right: clamp(calc(-80 * 1024 / 1920 * 1px), calc(-80 / 1920 * 100vw), calc(-50 * 1px));
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

@supports (container-type: inline-size) {
	.con06__nav {
		/*
			Figma: 화살표는 카드 텍스트가 아니라 썸네일(.con06__card-video) 세로 중앙.
			desktop(con06Swiper): slidesPerView 4, spaceBetween 20 → 가로 간격 합 60px,
			썸네일 높이 = slideW * (9/16)(aspect-ratio) → 중앙 = slideW * 9/32 = (cqw - 60) * 9/128
		*/
		top: calc((100cqw - clamp(calc(60 * 1024 / 1920 * 1px), calc(60 / 1920 * 100vw), calc(60 * 1px))) * 9 / 128);
	}
}

.con06__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(calc(30 * 1024 / 1920 * 1px), calc(30 / 1920 * 100vw), calc(30 * 1px));
	height: clamp(calc(60 * 1024 / 1920 * 1px), calc(60 / 1920 * 100vw), calc(60 * 1px));
	background: var(--color-gray-dark);
	border: none;
	cursor: pointer;
	pointer-events: auto;
	color: var(--color-white);
	font-size: clamp(calc(14 * 1024 / 1920 * 1px), calc(14 / 1920 * 100vw), calc(14 * 1px));
}

/* ===== Section 07 - SAEYUL IN THE MEDIA ===== */
.con07 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	padding-top: 110px;
	padding-bottom: 20px;
	box-sizing: border-box;
}

.con07__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.con07__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.20);
}

.con07__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	width: 1600px;
	padding: 50px 0;
	background: rgba(255, 255, 255, 0.90);
}

.con07__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
}

.con07__heading {
	color: var(--color-primary);
	font-size: var(--section-pair-main-fs-max, 48px);
	font-family: var(--engFont, Figtree);
	font-weight: 700;
	line-height: var(--section-pair-main-lh-max, 72px);
	text-align: center;
}

.con07__sub {
	color: var(--color-text-dark);
	font-size: var(--section-pair-sub-fs-max, 20px);
	font-weight: 300;
	line-height: var(--section-pair-sub-lh-max, 32px);
	text-align: center;
}

.con07__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 1440px;
}

.con07__row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 20px;
}

.con07__card {
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 0 0 calc((100% - 60px) / 4);
	max-width: calc((100% - 60px) / 4);
	text-decoration: none;
	cursor: pointer;
}

.con07__card-img {
	width: 100%;
	height: 180px;
	overflow: hidden;
	background: var(--color-white);
}

.con07__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

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

.con07__card:hover .con07__card-title {
	text-decoration: underline;
	text-underline-offset: 3px;
	letter-spacing: -0.4px;
}

.con07__card--noimg .con07__card-img {
	display: flex;
	align-items: center;
	justify-content: center;
}

.con07__card--noimg .con07__card-img img {
	width: auto;
	height: auto;
	max-width: 170px;
	object-fit: contain;
}

.con07__card-txt {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.con07__card-title {
	color: var(--color-black);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.32px;
}

.con07__card-date {
	color: var(--color-gray);
	font-size: 16px;
	font-family: var(--engFont, Figtree);
	font-weight: 500;
	line-height: 1.3;
}