/* =========================================================
   ROOT
========================================================= */

:root {
	--main-vh: 100vh;

	/* 인트로 스테이지(시안 캔버스) 실크기 : JS 가 계산해서 넣는다 */
	--stage-w: 100vw;
	--stage-h: 50vw;

	/* 폰트 환산 단위 */
	--fu: calc(var(--stage-w) / 1920);

	--main-bg: #1c1c1c;
	--main-blue: #0575c9;
	--main-blue-light: #37a4ff;
}


html,
body {
	margin: 0;
	padding: 0;

	width: 100%;
	min-width: 320px;

	background: var(--main-bg);
}


/*
   ★ 인트로 중에도 스크롤바 자리를 그대로 둔다.
     overflow:hidden 으로 스크롤바를 없애면 인트로가 끝나는 순간
     스크롤바(약 15px)가 생기면서 화면 폭이 줄고,
     그만큼 안정환이 왼쪽으로 밀려 "틀어지는" 것처럼 보인다.
     스크롤 차단은 JS(wheel/touch/key 차단 + pinTop)가 이미 하고 있으므로
     여기서는 폭만 고정해 주면 된다.
*/
html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

html.main-intro-lock,
body.main-intro-lock {
	touch-action: pinch-zoom;
	overscroll-behavior: none;
}


.main-page {
	position: relative;

	width: 100%;
	overflow: hidden;

	background: var(--main-bg);
}

.main-page *,
.main-page *::before,
.main-page *::after {
	box-sizing: border-box;
}

.main-page img,
.main-page svg {
	display: block;
}


/* =========================================================
   INTRO v4
   ---------------------------------------------------------
   캔버스 : 1920 x 960 (PC / 모바일 공통)
   인트로 이미지는 전부 "캔버스 통짜 PNG" (./img/intro/).
   좌표를 잡을 필요 없이 겹쳐 놓기만 하면 시안과 동일.
========================================================= */

.main-intro {
	position: fixed;
	inset: 0;
	z-index: 100000;

	width: 100%;
	height: var(--main-vh);

	overflow: hidden;

	/*background: #1c1c1c;*/
	background-image: url("../img/intro/main_intro_bg.jpg");
	color: #fff;
	background-size: cover;

	cursor: none;
}

.main-intro.is-complete {
	pointer-events: none;
}

.main-intro img,
.main-intro picture {
	display: block;
}


/* ---------- SKIP : PC 커서 ---------- */

.intro-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100100;

	width: 88px;
	height: 88px;
	margin: -44px 0 0 -44px;

	opacity: 0;

	pointer-events: none;
	will-change: transform, opacity;
}

.intro-cursor svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cur-ring {
	fill: none;
	stroke: rgba(255, 255, 255, .16);
	stroke-width: 1;
}

.cur-prog {
	fill: none;
	stroke: rgba(255, 255, 255, .62);
	stroke-width: 1;

	stroke-dasharray: 195;
	stroke-dashoffset: 195;

	transform: rotate(-90deg);
	transform-origin: 50% 50%;

	transition: stroke-dashoffset .5s ease;
}

.intro-cursor.is-hold .cur-prog {
	stroke-dashoffset: 0;
}

.cur-text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 2.5px;

	color: rgba(255, 255, 255, .8);
	white-space: nowrap;
}

.intro-skip-mo {
	display: none;
}


@media screen and (max-width: 991px), (pointer: coarse) {

	.main-intro {
		cursor: default;
		background-size: cover;
	}

	.intro-cursor { display: none; }

	.intro-skip-mo {
		position: absolute;
		right: 40px;
		bottom: 52px;
		z-index: 300;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 112px;
		height: 112px;
		padding: 0;

		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 50%;

		background: rgba(255, 255, 255, .04);
		backdrop-filter: blur(2px);

		font-family: 'Pretendard-Regular', sans-serif;
		font-size: 20px;
		line-height: 1;
		letter-spacing: 3px;
		text-indent: 3px;

		color: rgba(255, 255, 255, .82);
		cursor: pointer;

		animation: skipPulse 2.8s ease-in-out infinite;
	}

	.intro-skip-mo::before {
		content: "";
		position: absolute;
		inset: -9px;

		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 50%;
	}

	@keyframes skipPulse {
		0%, 100% { border-color: rgba(255, 255, 255, .22); }
		50%      { border-color: rgba(255, 255, 255, .5); }
	}
}


/* ---------- STAGE ----------
   introStage  : 화면 중앙 정렬 → CUT 1 / 3 / 5 / 6(카피)
   introStageB : 화면 하단 정렬 → CUT 2 / 4 (안정환 하단 잘림 컷)
---------------------------- */

.intro-stage {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 10;

	width:  var(--stage-w);
	height: var(--stage-h);

	/* transform 대신 margin 으로 센터링 → transform 은 흔들림 연출 전용 */
	margin-left: calc(var(--stage-w) / -2);
	margin-top:  calc(var(--stage-h) / -2);
}

.intro-stage-btm {
	top: auto;
	bottom: 0;
	z-index: 11;

	margin-top: 0;
}


/* ---------- CUT 공통 ---------- */

.intro-cut {
	position: absolute;
	inset: 0;

	opacity: 0;
	visibility: hidden;

	will-change: opacity;
}

/* 안정환이 타이포보다 위 (시안4 : 머리가 '쳤' 위로 올라온다) */
.intro-cut .ia-model {
	z-index: 3;
}

/*
   위치·크기는 JS(layoutIa)가 잡는다.
   크기 = PNG 원본 픽셀을 시안 캔버스(1920x960) 기준으로 환산 → 원본 그대로.
   위치 = HTML 의 data-cx / data-cy (중심 좌표 %), data-bottom = 바닥 정렬.
*/
.intro-cut .ia {
	position: absolute;
	left: 0;
	top: 0;

	display: block;
	opacity: 0;

	backface-visibility: hidden;      /* 추가 : 첫 등장 버벅임 방지 */
	transform: translateZ(0);         /* 추가 */

	will-change: transform, opacity, clip-path;
}
.intro-cut .ia picture {
	display: block;
	width: 100%;
	height: 100%;
}
.intro-cut .ia img {
	display: block;
	width: 100%;
	height: 100%;
}


/* ---------- 좌표표 : 시안 실측값 ---------- */

/* CUT 2 : 헉! */
#c2t1 { --x: 38.23%; --y: 13.65%; --w: 15.21%; }   /* 헉 */
#c2t2 { --x: 56.67%; --y: 15.31%; --w:  3.96%; }   /* !  */
#c2m  { --x: 33.28%; --y: 46.15%; --w: 31.46%; }   /* 안정환 (근사치 · 필요시 조정) */

/* CUT 4 : 미쳤군! */
#c4t1 { --x: 21.77%; --y: 13.96%; --w: 14.37%; }   /* 미 */
#c4t2 { --x: 37.86%; --y: 13.96%; --w: 17.19%; }   /* 쳤 */
#c4t3 { --x: 55.31%; --y: 15.52%; --w: 16.35%; }   /* 군 */
#c4t4 { --x: 73.75%; --y: 15.42%; --w:  3.96%; }   /* !  */
#c4m  { --x: 36.09%; --y: 45.31%; --w: 28.70%; }   /* 안정환 (근사치 · 필요시 조정) */

/* CUT 5 : 공원을 가진 새로운 센텀시티 */
#c5t1 { --x: 25.36%; --y: 32.81%; --w: 20.16%; }   /* 약 78만㎡ 예술공원 + 선 */
#c5t2 { --x: 23.23%; --y: 36.77%; --w: 22.14%; }   /* 공원을 가진 */
#c5t3 { --x: 29.17%; --y: 33.23%; --w: 45.94%; }   /* 새로운 센텀시티 + 밑줄 */
#c5t4 { --x: 59.53%; --y: 29.27%; --w: 15.89%; }   /* 약 191만㎡ 센텀2지구 + 선 */

/* CUT 6 : COMING SOON 트리븐 센텀 */
#c6t1 { --x: 13.44%; --y: 31.04%; --w: 42.50%; }   /* COMING SOON */
#c6t2 { --x: 14.22%; --y: 40.31%; --w: 48.28%; }   /* 선 + 트리븐 센텀 */


/* ---------- COPY (CUT 1 / 3) : 이미지가 아니라 실제 텍스트 ---------- */

.intro-copy {
	position: absolute;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	z-index: 5;

	width: max-content;
	max-width: 88%;
	height: auto;

	text-align: center;

	transform: translate(-50%, -50%);

	opacity: 0;
	visibility: hidden;
}

.intro-copy p {
	margin: 0;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: calc(30 * var(--fu));
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: -.03em;

	color: rgba(255, 255, 255, .72);

	white-space: nowrap;
}

.intro-copy b {
	font-family: 'Pretendard-Bold', sans-serif;
	font-weight: 700;
	color: #fff;
}

.intro-copy .ch {
	display: inline-block;

	font-style: inherit;
	font-weight: inherit;

	will-change: transform, opacity;
}

/* 띄어쓰기 : 폰트에 상관없이 폭 고정 */
.intro-copy .ch.sp {
	width: .3em;
	height: 1em;
}


/* 타이핑 커서 */
.intro-copy p::after {
	content: "";
	display: inline-block;
	vertical-align: -.1em;

	width: calc(3 * var(--fu));
	height: 1.1em;

	margin-left: .09em;

	background: #fff;

	opacity: 0;
}

.intro-copy.is-typing p::after {
	opacity: 1;
	animation: caretBlink .62s step-end infinite;
}

@keyframes caretBlink {
	50% { opacity: 0; }
}


.js-split {
	will-change: filter;
}


/* ---------- CUT 6 MODEL ----------
   메인(.sec1-model)과 완전히 동일한 사각형.
   JS(syncModel) 가 sec1 모델의 실측 rect 를 px 로 박아넣는다.
   아래는 JS 가 돌기 전 폴백 값.
---------------------------------- */

.intro-model-main {
	position: fixed;
	right: 13%;
	bottom: -60px;
	z-index: 12;

	height: 92vh;

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	will-change: transform, opacity;
}

.intro-model-main img {
	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: bottom center;
}

/* JS 실측이 들어가면 이 클래스가 붙는다 */
.intro-model-main.is-synced {
	right: auto;
	bottom: auto;

	/* 인트로 끝 모델이 미세하게 어긋나면 이 두 값만 조정 */
	margin-left: var(--end-x, 0px);
	margin-top:  var(--end-y, 0px);
}


/* ---------- FLASH (기본 미사용) ---------- */

.intro-flash {
	position: absolute;
	inset: 0;
	z-index: 100;

	background: #fff;

	opacity: 0;
	visibility: hidden;

	pointer-events: none;
}



/* ---------- CUT 3 하단 주석 ---------- */

.intro-note {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	z-index: 20;

	padding: 0 40px;
	text-align: center;

	opacity: 0;
	visibility: hidden;

	pointer-events: none;
}

.intro-note p {
	margin: 0;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: calc(15 * var(--fu));
	line-height: 1.6;
	letter-spacing: -.03em;
	word-break: keep-all;

	color: rgba(255, 255, 255, .45);
}




/* =========================================================
   INTRO : MOBILE  (시안 캔버스 750 x 960)
========================================================= */
/* 모바일 전용 줄바꿈 */
.br-mo { display: none; }

@media screen and (max-width: 991px) {

	:root {
		--fu: calc(var(--stage-w) / 750);
	}

	.br-mo { display: block; }

	/*
	   CUT 2 / 4 : 캔버스 40% 지점(모델 머리 끝)이 화면 정중앙에 오도록 고정.
	   아래로 넘치는 몸통은 화면 밖으로 잘린다.
	*/
	.intro-stage-btm {
		top: 50%;
		bottom: auto;
		margin-top: calc(var(--stage-h) * -0.40);
	}

	.intro-copy {
		width: 88vw;
		max-width: 88vw;
	}

	.intro-copy p {
		font-size: calc(36 * var(--fu));
		line-height: 1.7;
		white-space: normal;
		word-break: keep-all;
	}


	.intro-note {
		bottom: 200px;
		padding: 0 60px;
	}

	.intro-note p {
		font-size: calc(20 * var(--fu));
		line-height: 1.7;
	}


}

















/* =========================================================
   SECTION COMMON
========================================================= */

:root {
	--head-h: 88px;
	--nav-h: 116px;

	--navy: #05205f;
	--navy-d: #041a4d;
	--blue: #0066b3;
	--blue-l: #3d8fd6;
}


.only-pc { display: block; }
.only-mo { display: none !important; }


/* ---------- 리빌 기본 상태 ---------- */

[data-rv] {
	will-change: transform, opacity, clip-path;
}


[data-rv="up"],
[data-rv="fade"],
[data-rv="pop"],
[data-rv="left"],
[data-rv="right"],
[data-rv="model"],
[data-rv="bg"],
[data-rv="clip"],
[data-rv="lineR"],
[data-rv="lineL"],
[data-rv="navup"] {
	opacity: 0;
}


[data-rv="up"]     { transform: translateY(70px); }
[data-rv="left"]   { transform: translateX(-90px); }
[data-rv="right"]  { transform: translateX(90px); }
[data-rv="pop"]    { transform: scale(.6) rotate(-14deg); }
[data-rv="model"]  { transform: translateX(150px) scale(1.1); }
[data-rv="bg"]     { transform: scale(1.14); }

/* 바 자체는 제자리에 두고 살짝만 올라온다 (overflow 에 잘리지 않는다) */
[data-rv="navup"] {
	opacity: 0;
	transform: translateY(30px);
}

[data-rv="clip"] {
	clip-path: inset(0 0 100% 0);
	opacity: 1;
}

/* 왼쪽에서 오른쪽으로 열리는 클립 */
[data-rv="clipL"] {
	clip-path: inset(0 100% 0 0);
	opacity: 1;
	transform: translateX(-40px);
}

[data-rv="lineR"] { transform: scaleX(0); transform-origin: left center; opacity: 1; }
[data-rv="lineL"] { transform: scaleX(0); transform-origin: right center; opacity: 1; }


/* 마스크 리빌 : 글자가 아래에서 올라온다 */
.rv-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;

	padding: 0;
	margin: -.18em 0 -.22em;
}


.rv-mask > span {
	display: inline-block;
	transform: translateY(118%) skewY(4deg);
	will-change: transform;
}


/* =========================================================
   SECTION 1
========================================================= */

.sec1 {
	position: relative;
	z-index: 2;

	width: 100%;
	height: 100vh;
	min-height: 620px;
	max-height: 1100px;

	overflow: hidden;

	background: #fff;
}


.sec1-bg {
	position: absolute;
	inset: 0;
	z-index: 1;

	/*background: #fff url("../img/sec1/bg.jpg") no-repeat center top;*/
	background-color: #ffffff;
	background-size: cover;
}


.sec1-inner {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;

	width: 100%;
	height: calc(100% - var(--nav-h));
}

/* ---------- COPY : 통이미지 ---------- */

.sec1-copy {
	position: absolute;
	left: 11%;
	top: 57%;
	z-index: 6;


	transform: translateY(-50%);
}


.sec1-copy img {
	display: block;

	width: 100%;
	height: auto;
}


/* ---------- SIDE ---------- */

.sec1-side {
	position: absolute;
	right: 2.4%;
	top: calc(var(--head-h) + 3vh);
	z-index: 14;

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: clamp(12px, 1.2vw, 24px);
}


.sec1-badge {
	position: relative;

	width: 129px;
	height: 129px;

	padding: 0;
	border: 0;
	background: transparent;

	cursor: pointer;
}


.badge-ring {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	animation: badgeSpin 14s linear infinite;
}


@keyframes badgeSpin {
	to { transform: rotate(360deg); }
}


.badge-txt {
	position: absolute;
	left: 50%;
	top: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 93px;
	height: 93px;

	border-radius: 50%;
	background: var(--blue);

	transform: translate(-50%, -50%);

	font-family: 'Pretendard-Bold', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.03em;
	text-align: center;
	padding-top: 5px;
	color: #fff;

	transition: background .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}


.sec1-badge:hover .badge-txt {
	background: var(--navy);
	transform: translate(-50%, -50%);
}


.sec1-soon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 115px;
	height: 115px;

	border-radius: 50%;
	background: var(--navy);

	font-family:'FuturaCyrillicDemi';
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: .04em;
	text-align: center;

	color: #fff;
}


/* ---------- MODEL : 네이비 바 위로 올라타 하단에 붙는다 ---------- */

.sec1-model {
	position: absolute;
	right: 13%;
	bottom: -60px;
	z-index: 12;

	height: 92%;

	pointer-events: none;
}


.sec1-model img {
	display: block;

	width: auto;
	height: 100%;
	max-width: none;

	object-fit: contain;
	object-position: bottom center;
}


/* ---------- NAV ---------- */

.sec1-nav {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 9;

	display: flex;
	align-items: center;

	width: 100%;
	height: var(--nav-h);

	padding: 0 24% 0 5%;

	background: var(--navy);
}


.sec1-nav-list {
	display: flex;
	align-items: center;

	flex: 1 1 auto;

	margin: 0;
	padding: 0;

	list-style: none;
}


.sec1-nav-list li {
	position: relative;
	padding: 0 clamp(20px, 2.6vw, 52px);
	width: 370px;
}


.sec1-nav-list li + li::before {
	content: "";

	position: absolute;
	left: 0;
	top: 50%;

	width: 1px;
	height: 38px;

	background: rgba(255, 255, 255, .18);

	transform: translateY(-50%);
}


.nav-btn {
	display: block;

	padding: 6px 0;

	border: 0;
	background: transparent;

	text-align: left;
	cursor: pointer;
}


.nav-btn em {
	display: block;

	font-family:'FuturaCyrillicLight';
	font-size: 20px;
	font-style: normal;
	letter-spacing: 0.5px;

	color: rgba(255, 255, 255, .62);

	transition: letter-spacing .5s cubic-bezier(.22, 1, .36, 1), color .4s ease;
}


.nav-btn strong {
	display: flex;
	align-items: center;

	margin-top: 6px;

	font-family: 'Pretendard-Bold', sans-serif;
	font-size: 22px;
	letter-spacing: -.02em;

	color: #fff;

	transition: letter-spacing .5s cubic-bezier(.22, 1, .36, 1);
}


.nav-arw {
	position: relative;

	display: inline-block;

	width: 22px;
	height: 8px;

	margin-left: 10px;

	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}


.nav-arw::before {
	content: "";

	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 1px;

	background: #fff;
}


.nav-arw::after {
	content: "";

	position: absolute;
	right: 0;
	top: 50%;

	width: 6px;
	height: 6px;

	border-top: 1px solid #fff;
	border-right: 1px solid #fff;

	transform: translateY(-50%) rotate(45deg);
}


.nav-btn:hover .nav-arw,
.nav-btn.is-on .nav-arw {
	transform: translateX(9px);
}


.nav-btn:hover em,
.nav-btn.is-on em {
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, .9);
}


.nav-btn:hover strong,
.nav-btn.is-on strong {
	letter-spacing: .012em;
}


.sec1-sign {
	position: absolute;
	right: 7.7%;
	bottom: 0;
	z-index: 16;

	display: flex;
	align-items: center;
	gap: clamp(10px, 1vw, 20px);

	height: var(--nav-h);
	flex-direction: row-reverse;
}


.sec1-sign img {
	width: clamp(52px, 4.4vw, 88px);
	height: auto;

	opacity: .9;
}


.sec1-sign span {
	font-family:'Pretendard-Regular';
	font-size: 17px;
	letter-spacing: -.01em;
	white-space: nowrap;
	text-align: end;

	color: rgba(255, 255, 255, .78);
}
.sec1-sign span em {
	font-family:'Pretendard-SemiBold';
	font-size: 20px;
	letter-spacing: 0.85px;
}


/* =========================================================
   SECTION 2 (컨테이너)
========================================================= */

.sec2 {
	position: relative;
	z-index: 2;

	width: 100%;

	background: #fff;
}


.sec2-type {
	display: none;
}


.sec2-type.is-active {
	display: block;
}


.sec2-sec {
	position: relative;
	overflow: hidden;
}


/* =========================================================
   TOP
========================================================= */

.btn-top {
	position: fixed;
	right: 30px;
	bottom: 34px;
	z-index: 9000;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;

	border: 0;
	border-radius: 50%;

	background: rgba(5, 32, 95, .9);

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 11px;
	letter-spacing: .06em;

	color: #fff;

	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);

	cursor: pointer;

	transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1),
	visibility .45s ease, background .3s ease;
}


.btn-top.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


.btn-top:hover {
	background: var(--blue);
}


/* =========================================================
   SECTION 1 : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	.only-pc { display: none !important; }
	.only-mo { display: block !important; }


	/* ---------- SEC1 : 모바일 ---------- */

	.sec1 {
		height: auto;
		min-height: 0;
		max-height: none;

		overflow: unset;
	}


	.sec1-bg {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;

		/*background-image: url("../img/sec1/bg_mo.jpg");*/
		background-position: center top;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: #fff;
	}


	/*
	   모델이 absolute 라 부모 높이에 안 잡힌다.
	   inner 에 충분한 하단 여백을 줘서 높이를 확보한다.
	*/
	.sec1-inner {
		position: relative;

		padding: 100px 0 0;
		height: 850px;
	}


	.sec1-copy {
		position: relative;
		left: auto;
		top: 50%;
		z-index: 8;

		width: 100%;

		padding: 0 0 0 56px;

	}


	.sec1-copy img {
		width: unset;
	}


	.sec1-model {
		position: absolute;
		left: auto;
		right: 0px;
		top: auto;
		bottom: -50px;

		height: auto;

		z-index: 20;
	}


	.sec1-model img {
		width: 100%;
		height: auto;
	}


	.sec1-side {
		display: none;
	}


	/* ---------- NAV : 모바일 ---------- */

	.sec1-nav {
		position: relative;
		left: auto;
		bottom: auto;
		z-index: 9;

		display: flex;

		width: 100%;
		height: 500px;

		padding: 20px 40px;

		background: var(--navy);
	}


	.sec1-nav-list {
		display: block;

		width: 100%;
		margin: 0;
		padding: 0;
	}


	.sec1-nav-list li {
		position: relative;

		width: 100%;
		padding: 40px 0 40px 20px;
	}


	.sec1-nav-list li:first-child {
		padding-top: 0;
	}


	.sec1-nav-list li:last-child {
		padding-bottom: 0;
	}


	.sec1-nav-list li + li::before {
		content: "";

		position: absolute;
		left: 0;
		top: 0;

		width: 100%;
		height: 1px;

		background: rgba(255, 255, 255, .22);

		transform: none;
	}


	.nav-btn {
		width: 100%;
		padding: 0;
	}


	.nav-btn em {
		font-size: 21px;
		letter-spacing: .1em;

		color: rgba(255, 255, 255, .66);
	}


	.nav-btn strong {
		margin-top: 16px;
		font-size: 28px;
		letter-spacing: 1px;
	}
	.nav-btn:hover strong, .nav-btn.is-on strong {
		letter-spacing: 1.2px;
	}


	.nav-arw {
		width: 40px;
		height: 12px;
		margin-left: 18px;
	}


	.nav-arw::before {
		height: 2px;
	}


	.nav-arw::after {
		width: 12px;
		height: 12px;

		border-top-width: 2px;
		border-right-width: 2px;
	}


	/* ---------- SIGN : 네비 우측 중앙 ---------- */

	.sec1-sign {
		position: absolute;
		left: auto;
		right: 130px;
		top: unset;
		bottom: 220px;

		height: auto;
		z-index: 25;

		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 5px;

		transform: translateY(-50%);
	}


	.sec1-sign img {
		width: 95px;
		height: auto;

		opacity: .95;
	}


	.sec1-sign span {
		font-size: 22px;
		color: rgba(255, 255, 255, .82);
	}

	.sec1-sign span em {
		font-size: 25px;
	}

	/* ---------- TOP ---------- */

	.btn-top {
		right: 26px;
		bottom: 120px;

		width: 84px;
		height: 84px;

		font-size: 18px;
	}

}


/* 아주 작은 기기 / 플립 접힘 등 */
@media screen and (max-width: 991px) and (max-height: 900px) {

	.sec1-inner { padding-top: 100px; }

}




/* 노트북 낮은 높이 */
@media screen and (min-width: 992px) and (max-height: 780px) {

	.sec1-nav { height: 78px; }
	.sec1-inner { height: calc(100% - 78px); }
	.sec1-side { top: 8%; }

}







































/* =========================================================
   추가 리빌 타입
========================================================= */

/* 위에서 아래로 열림 */
[data-rv="clipD"] {
	clip-path: inset(0 0 100% 0);
	opacity: 1;
	transform: none;
}

/* 사선 (/) : 좌하 → 우상으로 그려진다 */
[data-rv="slash"] {
	opacity: 1;
	transform: scaleY(0);
	transform-origin: left bottom;
}


/* =========================================================
   T1 COMMON
========================================================= */

.t1 {
	font-family: 'Pretendard-Regular', sans-serif;
}


.t1-slash,
.t1s1-slash {
	display: block;

	width: 1px;
	height: 140px;

	background: currentColor;

	transform: rotate(45deg);
	transform-origin: left bottom;
}

.t1s2-slash,
.t1s3-slash {
	display: block;

	width: 1px;
	height: 90px;

	background: currentColor;

	transform: rotate(45deg);
	transform-origin: left bottom;
}


/* =========================================================
   T1-1 : 부산을 대표하는 공원이 되다
========================================================= */

.t1s1 {
	position: relative;

	width: 100%;
	height: 960px;

	color: #fff;
}


.t1s1-bg {
	position: absolute;
	inset: 0;
	z-index: 1;

	background: #1b2a2f url("../img/t1/s1_bg_n.jpg") no-repeat center center;
	background-size: cover;
}


.t1s1-inner {
	position: relative;
	z-index: 5;

	width: 100%;
	max-width: 1600px;
	height: 100%;

	margin: 0 auto;
	padding: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
}



.t1s1-eyebrow {
	display: block;
	margin-bottom: 18px;

	font-family:'Pretendard-ExtraLight';
	font-size: 24px;
	letter-spacing: -.01em;

	color: rgba(255, 255, 255, .82);
}


.t1s1-title {
	margin: 0;
	/*margin-top: 200px;*/
}


.t1s1-title span {
	display: block;

	font-family:'KoPubWorld-Batang-Light';
	font-size: 54px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -.035em;

	color: #fff;
}


.t1s1-slash {
	margin: -10px 0 30px 0;
	color: rgba(255, 255, 255, .7);
}


.t1s1-script {
	margin-bottom: 12px;
}


.t1s1-script img {
	width: 680px;
	height: auto;
}
.t2 .t1s1-script img {
	width: unset;
}

.t1s1-desc p {
	margin: 0;

	font-family:'Pretendard-Light';
	font-size: 22px;
	line-height: 1.8;
	letter-spacing: 0;

	color: rgba(255, 255, 255, .9);
}


/* =========================================================
   T1-2 : 정영선 조경가
========================================================= */

.t1s2 {
	position: relative;

	width: 100%;

	padding: clamp(90px, 9vw, 170px) 0 0;

	background: #fff;
}
.t2 .t1s2 {
	height: 960px;
}


.t1s2-inner {
	width: 100%;
	max-width: 1600px;

	margin: 0 auto;
	padding: 0 60px 0 0;
}


.t1s2-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 5%;

	margin-bottom: -80px;
}


.t1s2-left {
	flex: 1 1 auto;
	min-width: 0;
}


.t1s2-quote {
	margin: 0;
}


.t1s2-quote span {
	display: block;

	font-family:'KoPubWorld-Batang-Light';
	font-size: 45px;
	line-height: 1.36;
	letter-spacing: -.04em;

	color: #000;
}
.t2 .t1s2-quote span {
	font-size: 44px;
	letter-spacing: 1px;
	line-height: 1.65;
}


.t1s2-slash {
	margin: 5px 0 20px 0;
	color: rgba(0, 0, 0, .55);
}
.t2 .t1s2-slash {
	margin: 20px 0 35px 0;
}


.t1s2-sub {
	margin: 0;

	font-family:'Pretendard-Light';
	font-size: 24px;
	line-height: 1.6;
	letter-spacing: -.03em;

	color: #000;
}


.t1s2-person {
	flex: 0 0 auto;

	text-align: right;
	position: relative;
	top: -25px;
}
.t2 .t1s2-person {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
}


.t1s2-person img {
	width: 100%;
	height: auto;

}
.t2 .t1s2-person img {
	width: unset;
}


.t1s2-person strong {
	display: block;
	margin-top: 16px;

	font-family:'Pretendard-SemiBold';
	font-size: 20px;
	letter-spacing: -.02em;

	color: #1a1a1a;
}


.t1s2-body {
	display: flex;
	gap: 10%;

}



.t1s2-col p {
	margin: 0 0 26px;

	font-family: 'Pretendard-Light';
	font-size: 18px;
	line-height: 1.9;
	letter-spacing: -.025em;

	color: #4a4a4a;
}


.t1s2-col p:last-child {
	margin-bottom: 0;
}


.t1s2-script {
	width: 100%;

	padding: 0 11% 0 0;

	text-align: right;
	position: relative;
	bottom: -60px;
}


.t1s2-script img {
	display: inline-block;

	height: auto;
}


/* =========================================================
   T1-3 : ART VALLEY SLIDER
========================================================= */

.t1s3 {
	position: relative;

	width: 100%;

	height: 960px;
	display: flex;
	align-items: center;

	overflow: hidden;
}


.t1s3-bg {
	position: absolute;
	inset: 0;
	z-index: 1;

	background: #e9f0ef url("../img/t1/s3_bg.jpg") no-repeat center center;
	background-size: cover;
}


.t1s3-slider {
	position: relative;
	z-index: 5;

	width: 100%;

	overflow: hidden;

	cursor: grab;
	user-select: none;
}


.t1s3-slider.is-drag {
	cursor: grabbing;
}


.t1s3-track {
	display: flex;
	align-items: flex-start;

	will-change: transform;
}


.t1s3-item {
	flex: 0 0 auto;

	display: flex;
	align-items: flex-end;

	width: 92vw;
	max-width: 1560px;

	padding: 0;
}
.t1s3-item em {
	font-size: 16px;
	color: #fff;
	position: absolute;
	bottom: 5px;
	right: 10px;
}


.t1s3-thumb {
	position: relative;

	flex: 0 0 auto;
	width: 873px;
	height: 518px;
}


.t1s3-thumb > img:first-child {
	width: 100%;
	height: auto;
}


.t1s3-logo {
	position: absolute;
	left: 50px;
	bottom: 0;

	width: 486px;
	height: auto;

	opacity: 1;

	transition: opacity .8s ease .2s;

	pointer-events: none;
}


/* 메인이 아닌 슬라이드에서만 숨긴다 */
.t1s3-item:not(.is-main) .t1s3-logo {
	opacity: 0;
}


.t1s3-info {
	flex: 1 1 auto;
	min-width: 0;

	padding: 0 0 0 2%;
}


.t1s3-info h4 {
	margin: 0 0 10px;

	font-family:'FuturaCyrillicDemi';
	font-size: 42px;
	letter-spacing: -.01em;

	color: #111;
}


.t1s3-info p {
	margin: 0;

	font-family:'Pretendard-Regular';
	font-size: 20px;
	line-height: 1.75;
	letter-spacing: -1px;

	color: #444;
}


.t1s3-info .t1s3-slash {
	margin: 0px 0 15px;
	color: rgba(0, 0, 0, .45);
}


.t1s3-info ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


.t1s3-info li {
	font-family: 'Pretendard-Light', sans-serif;
	font-size: 18px;
	line-height: 1.9;
	letter-spacing: -.02em;

	color: #373737;
}





/* ---------- T1-3 하단 경고문구 ---------- */

.t1s3-note {
	position: absolute;
	z-index: 6;

	left: 49.6%;              /* 시안 x953 / 1920 */
	right: 40px;
	bottom: 34px;
}


.t1s3-note p {
	margin: 0;

	padding-left: 15px;
	text-indent: -15px;

	font-family: 'Pretendard-Regular';
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: -.03em;

	color: #55595a;
}


/* ---------- CTRL ---------- */

/*.t1s3-ctrl {
	position: relative;
	z-index: 6;

	display: flex;
	align-items: center;
	justify-content: center;

	gap: clamp(18px, 2vw, 40px);

	margin-top: clamp(40px, 4vw, 70px);
}*/


/*.t1s3-arw {
	position: relative;

	width: clamp(38px, 3.2vw, 56px);
	height: clamp(38px, 3.2vw, 56px);

	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 50%;

	background: transparent;

	cursor: pointer;

	transition: background .4s ease, border-color .4s ease;
}


.t1s3-arw::after {
	content: "";

	position: absolute;
	left: 50%;
	top: 50%;

	width: 8px;
	height: 8px;

	border-top: 1px solid #05205f;
	border-right: 1px solid #05205f;

	transition: border-color .4s ease;
}


.t1s3-arw.next::after {
	transform: translate(-60%, -50%) rotate(45deg);
}


.t1s3-arw.prev::after {
	transform: translate(-40%, -50%) rotate(-135deg);
}


.t1s3-arw:hover {
	background: var(--navy);
	border-color: var(--navy);
}


.t1s3-arw:hover::after {
	border-color: #fff;
}


.t1s3-dots {
	display: flex;
	align-items: center;
	gap: 10px;
}


.t1s3-dot {
	width: 8px;
	height: 8px;

	border: 0;
	border-radius: 50%;

	background: rgba(0, 0, 0, .2);

	cursor: pointer;

	transition: width .5s cubic-bezier(.22, 1, .36, 1), background .4s ease;
}


.t1s3-dot.is-on {
	width: 30px;
	border-radius: 6px;

	background: var(--navy);
}*/


/* =========================================================
   T1 : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	/* ---------- T1-1 ---------- */

	.t1s1 {
		height: 1060px;
		padding: 0;
		display: flex;
	}

	.t1s1-bg {
		background-image: url("../img/t1/s1_bg_mo.jpg");
	}

	.t1s1-inner {
		max-width: none;
		height: auto;
		padding: 100px 40px 0 40px;
	}
	.t2 .t1s1-inner {
		padding: 0 40px 40px 40px;
	}

	.t1s1-title {
		margin-top: 25px;
	}
	.t1s1-title span {
		letter-spacing: 1px;
	}


	.t1s1-slash {
		margin: 0px 0 40px 0;
	}

	.t1s1-script {
		margin-bottom: 20px;
	}

	.t1s1-desc p {
		line-height: 1.95;
	}


	/* ---------- T1-2 ---------- */

	.t1s2 {
		padding: 150px 0 0;
	}
	.t2 .t1s2 {
		height: unset;
		padding: 150px 0;
	}
	.t1s2-inner {
		max-width: none;
		padding: 0 40px;
	}

	.t1s2-head {
		gap: 0;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.t2 .t1s2-head {
		flex-direction: column;
		gap: 50px;
	}

	.t1s2-quote span {
		font-size: 48px;
	}

	.t2 .t1s2-quote span {
		font-size: 48px;
		max-width: 80vw;
	}

	.t1s2-slash {
		margin: 15px 0 30px 0;
	}

	.t1s2-sub {
		font-size: 26px;
	}

	.t1s2-person {
		display: flex;
		align-items: flex-end;
		gap: 20px;

		text-align: left;
		flex-direction: column;
		top: 0;
	}

	.t1s2-person img {
		width: 255px;
		flex: 0 0 auto;
	}
	.t2 .t1s2-person img {
		width: 200px;
	}

	.t1s2-person strong {
		margin: 0 0 8px;
		font-size: 21px;
	}

	.t1s2-body {
		flex-direction: column;
		gap: 40px;

		padding-bottom: 90px;
	}

	.t1s2-col p {
		margin-bottom: 34px;
		font-size: 21px;
		line-height: 1.95;
	}

	.t1s2-script {
		padding: 0 40px;
		bottom: -40px;
	}

	.t1s2-script img {
	}


	/* ---------- T1-3 ---------- */


	.t1s3 {
		height: 1200px;
	}

	.t1s3-item {
		flex-direction: column;

		max-width: none;

		padding: 0;
		align-items: flex-start;
	}

	.t1s3-thumb {
		width: 620px;
		height: unset;
	}

	.t1s3-thumb > img:first-child {
		height: 353px;
	}
	.t1s3-item em {
		font-size: 20px;
		bottom: 10px;
	}


	.t1s3-info {
		padding: 30px 0px 0 40px;
		max-width: 620px;
	}

	.t1s3-info h4 {
		margin-bottom: 10px;
		font-size: 50px;
	}

	.t1s3-info p {
		font-size: 21px;
		line-height: 2.2;
	}


	.t1s3-info li {
		font-size: 21px;
		line-height: 2;
	}



	/* ---------- T1-3 하단 경고문구 ---------- */

	.t1s3-note {
		left: 43px;
		right: 43px;
		bottom: 37px;
	}

	.t1s3-note p {
		padding-left: 20px;
		text-indent: -20px;

		font-size: 19px;
		line-height: 1.32;
	}

	/*.t1s3-ctrl {
		gap: 34px;
		margin-top: 70px;
	}*/

	/*.t1s3-arw {
		width: 76px;
		height: 76px;
	}

	.t1s3-arw::after {
		width: 14px;
		height: 14px;
		border-width: 2px;
	}

	.t1s3-dot {
		width: 14px;
		height: 14px;
	}

	.t1s3-dot.is-on {
		width: 48px;
		border-radius: 10px;
	}*/



}
























/* =========================================================
   T2 : 센텀2지구 개발현황
   T2-1 = t1s1 재사용 / T2-2 = t1s2 재사용
   여기서는 배경 교체와 T2 고유 요소만 정의한다.
========================================================= */

/* ---------- T2-1 : 배경만 교체 ---------- */

.t2s1-bg {
	background-color: #0b1830;
	background-image: url("../img/t2/s1_bg.jpg");
}


/* ---------- T2-2 : 인물 영역 추가 정보 ---------- */




.t2s2-bio {
	margin: 15px 0 0;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: -.025em;

	color: #333;
}


.t2s2-career {
	margin: 22px 0 0;
	padding: 0;

	list-style: none;
}


.t2s2-career li {
	font-family: 'Pretendard-Light', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: -.025em;

	color: #333;
}


/* =========================================================
   T2-3 : 조성사업 / 개발목표 / 핵심유치산업 / 추진일정
========================================================= */

.t2s3 {
	position: relative;
	width: 100%;
	height: 960px;
	padding-top: 80px;
	overflow: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}


.t2s3-bg {
	position: absolute;
	inset: 0;
	z-index: 1;

	background: var(--navy) url("../img/t2/s3_bg.jpg") no-repeat center center;
	background-size: cover;
}


.t2s3-inner {
	position: relative;
	z-index: 5;

	max-width: 1700px;

}


/* ---------- VISUAL ---------- */

.t2s3-visual {
	position: relative;

	display: flex;
	align-items: flex-end;

	gap: 3%;

	margin-bottom: 140px;
	width: 100%;
	justify-content: space-between;
}


.t2s3-main {
}


.t2s3-main img {
	width: 100%;
	height: auto;
}


.t2s3-badge {
	position: absolute;
	left: 1114px;
	top: -54px;
	z-index: 8;
}


.t2s3-badge img {
	width: 100%;
	height: auto;

	animation: badgeSpin 16s linear infinite;
}


.t2s3-thumbs {
	flex: 0 0 auto;

	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1vw, 18px);
	align-items: flex-end;
	position: relative;
	top: 90px;
}


.t2s3-thumb img {
	height: auto;

	transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}


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


/* ---------- LIST ---------- */

.t2s3-list {
	display: flex;
	align-items: flex-start;
	width: 100vw;
	justify-content: center;
	padding: 0 160px;
}


.t2s3-box {
	position: relative;

	flex: 1 1 25%;
	min-width: 0;

	padding: 0 clamp(20px, 2.2vw, 46px);
}


.t2s3-box:first-child {
	padding-left: 0;
	flex: 1 1 35%;
}
.t2s3-box:nth-child(2) {
	flex: 1 1 35%;
}



.t2s3-box:last-child {
	padding-right: 0;
}


.t2s3-box + .t2s3-box::before {
	content: "";

	position: absolute;
	left: 0;
	top: 10px;

	width: 1px;
	height: 220px;

	background: rgba(255, 255, 255, .16);
}


.t2s3-box h4 {
	margin: 0 0 22px;

	font-family:'Pretendard-SemiBold';
	font-size: 25px;
	letter-spacing: -.03em;

	color: #59b8ff;

	transition: color .4s ease, letter-spacing .5s cubic-bezier(.22, 1, .36, 1);
}


.t2s3-box:hover h4 {
	color: #a8d4ff;
	letter-spacing: -.01em;
}


.t2s3-box ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


.t2s3-box ul.col2 {
	display: flex;
	flex-wrap: wrap;
	column-gap: 6%;
}


.t2s3-box ul.col2 li {
	flex: 0 0 47%;
}


.t2s3-box li {
	position: relative;

	padding-left: 14px;
	margin-bottom: 12px;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -.025em;

	color: rgba(255, 255, 255, .84);

	transition: color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}


.t2s3-box li::before {
	content: "";

	position: absolute;
	left: 0;
	top: 10px;

	width: 7px;
	height: 7px;

	border-radius: 50%;
	background: #6fb4ff;
}


.t2s3-box li:hover {
	color: #fff;
	transform: translateX(4px);
}


/* =========================================================
   T2 : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	/* ---------- T2-1 : 배경만 교체 ---------- */

	.t2s1-bg {
		background-image: url("../img/t2/s1_bg_mo.jpg");
	}


	/* ---------- T2-2 ---------- */

	.t2s2-person {
		width: 100%;
	}

	.t2s2-bio {

		margin-top: 10px;
		font-size: 22px;
		line-height: 1.95;
		text-align: end;
	}

	.t2s2-career {
		margin-top: 10px;
	}

	.t2s2-career li {
		font-size: 22px;
		line-height: 1.95;
		text-align: end;
	}


	/* ---------- T2-3 ---------- */

	.t2s3 {
		padding: 130px 0 150px;
		height: unset;
	}

	.t2s3-inner {
		max-width: none;
		padding: 0;
	}

	.t2s3-visual {
		display: block;
		margin-bottom: 70px;
		position: unset;
	}

	.t2s3-main {
		margin-bottom: 20px;
	}

	.t2s3-badge {
		left: 610px;
		top: -57px;
		width: 115px;
	}

	.t2s3-thumbs {
		flex-direction: column;
		width: 100%;
		gap: 20px;

		position: absolute;
		bottom: 0;
		top: unset;
	}

	.t2s3-thumb {
		flex: 1 1 50%;
	}

	.t2s3-list {
		display: flex;
		flex-direction: column;
		padding: 0 40px;
	}

	.t2s3-box {
		width: 100%;
		padding: 40px 0;
	}

	.t2s3-box:first-child {
		padding-top: 0;
	}

	.t2s3-box:last-child {
		padding-bottom: 0;
	}

	.t2s3-box + .t2s3-box::before {
		left: 0;
		top: 0;

		width: 100%;
		height: 1px;
	}

	.t2s3-box h4 {
		margin-bottom: 30px;
		font-size: 32px;
	}

	.t2s3-box ul.col2 {
		column-gap: 0;
		width: 80%;
	}

	.t2s3-box ul.col2 li {
		flex: 0 0 48%;
	}

	.t2s3-box li {
		padding-left: 22px;
		margin-bottom: 18px;

		font-size: 24px;
		line-height: 1.7;
	}

	.t2s3-box li::before {
		width: 10px;
		height: 10px;
		top: 15px;
	}


	.t2s3-main img {
		width: 668px;
	}



}






/* =========================================================
   T3 : 트리븐센텀 사업개요
========================================================= */

/* 오른쪽에서 덮으며 나타나는 패널 */
[data-rv="panel"] {
	opacity: 1;
	clip-path: inset(0 0 0 100%);
}


/* =========================================================
   T3-1 : 단지 일러스트 + SUMMARY (하단 오버레이형)
========================================================= */

.t3s1 {
	position: relative;

	width: 100%;
	overflow: hidden;

	background: #e9efe3;
}


.t3s1-illust {
	position: relative;

	width: 100%;
	font-size: 0;
}


.t3s1-illust picture {
	display: block;
	width: 100%;
}

.t3s1-illust img {
	width: 100%;
	height: auto;
}


.t3s1-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: auto;
	bottom: 0;
	z-index: 5;

	display: block;
	width: 100%;
	height: auto;

	padding: 25px 0 18px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.54);
	width: fit-content;
	margin: 0 auto;
}


.t3s1-inner {
	width: 100%;
	max-width: 1760px;

	margin: 0 auto;
	padding: 0;
}





.t3s1-row {
	display: flex;
	align-items: flex-start;

	gap: 240px;
}


.t3s1-head {
	flex: fit-content;
	min-width: 0;
}


.t3s1-title {
	margin: 0;

	font-family: 'FuturaCyrillicDemi';
	font-size: 51px;
	line-height: 1;
	letter-spacing: .01em;

	color: var(--navy);
}


.t3s1-head em {
	display: block;

	margin: 16px 0 0;

	font-family: 'Pretendard-SemiBold';
	font-size: 21px;
	font-style: normal;
	letter-spacing: -.02em;

	color: #000;
}


.t3s1-box {
	flex: 1 1 39%;
	min-width: 0;
	margin: 0;
}


.t3s1-box h4 {
	margin: 0 0 clamp(14px, 1.3vw, 24px);

	font-family: 'Pretendard-SemiBold';
	font-size: 23px;
	letter-spacing: -.02em;

	color: #05205f;
}


.t3s1-box ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


.t3s1-box li {
	position: relative;

	padding-left: 15px;
	margin-bottom: 10px;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: -.025em;

	color: #14161a;

	transition: color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}


.t3s1-box li:last-child {
	margin-bottom: 0;
}


.t3s1-box li::before {
	content: "";

	position: absolute;
	left: 0;
	top: .62em;

	width: 7px;
	height: 7px;

	border-radius: 50%;
	background: #05205f;
}


.t3s1-box li:hover {
	color: #05205f;
	transform: translateX(4px);
}



/* ---------- 하단 경고문구 ---------- */

.t3s1-note {
	margin: 36px 0 0;
}


.t3s1-note p {
	margin: 0;
	padding-left: 15px;
	text-indent: -15px;

	font-family: 'Pretendard-Regular';
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: -.03em;

	color: #3d4a35;
}


/* =========================================================
   T3-2 : TRIVN 두산에너빌리티
========================================================= */

.t3s2 {
	position: relative;

	width: 100%;

	padding: clamp(90px, 9vw, 170px) 0 0;

	background: #fff;

	text-align: center;
}


.t3s2-inner {
	width: 100%;
	max-width: 1200px;

	margin: 0 auto;
	padding: 0 6%;
}


.t3s2-logo {
	margin-bottom: clamp(30px, 3vw, 56px);
}


.t3s2-logo img {
	height: auto;

	margin: 0 auto;
}


.t3s2-title {
	margin: 0 0 clamp(24px, 2.4vw, 44px);
}


.t3s2-title span {
	display: block;

	font-family:'Pretendard-SemiBold';
	font-size: 42px;
	line-height: 1.42;
	letter-spacing: 0;

	color: #05205f;
}


.t3s2-desc {
	margin: 0;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 23px;
	line-height: 1.7;
	letter-spacing: -.025em;

	color: #000;
}


.t3s2-imgs {
	display: flex;

	width: 100%;
	background-color: #000000;

}


.t3s2-img {
	flex: 1 1 33.333%;

	overflow: hidden;
	font-size: 0;
}


.t3s2-img img {
	width: 100%;
	height: auto;

	transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	object-fit: cover;
}


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


/* =========================================================
   T3-3 : 서울숲 부산숲
========================================================= */

.t3s3 {
	position: relative;

	width: 100%;

	height: 960px;

	display: flex;
	justify-content: center;
	align-items: center;

	overflow: hidden;
}


.t3s3-bg {
	position: absolute;
	inset: 0;
	z-index: 1;

	background: #dce9f7 url("../img/t3/s3_bg_n2.jpg") no-repeat center center;
	background-size: cover;
}


.t3s3-inner {
	position: relative;
	z-index: 5;

	display: flex;
	align-items: flex-end;

	gap: 60px;

	width: 100%;
	max-width: 1600px;

	margin: 0 auto;
	padding: 0;
}


.t3s3-left {
	min-width: 0;
}


.t3s3-title {
}


.t3s3-title span {
	display: block;

	font-family:'Pretendard-SemiBold';
	font-size: 26px;
	line-height: 2;
	letter-spacing: 0;

	color: #05205f;
}


.t3s3-photo {
	margin-bottom: 40px;
	margin-top: 30px;
}


.t3s3-photo img {
	height: auto;
}


.t3s3-big span {
	display: block;

	font-family:'KoPubWorld-Dotum-Bold';
	font-size: 72px;
	line-height: 1.5;
	letter-spacing: -.05em;

	color: #05205f;
}


.t3s3-right {
	flex: 1 1 auto;
	min-width: 0;

	padding-top: clamp(30px, 3vw, 60px);
}


.t3s3-right p {
	margin: 0 0 40px;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 21px;
	line-height: 1.65;
	letter-spacing: -.025em;

	color: #000;
}


.t3s3-right p:last-child {
	margin-bottom: 0;
	font-size: 22px;
	font-family:'Pretendard-Medium';
}


/* =========================================================
   T3-4 : HISTORY
========================================================= */

.t3s4 {
	position: relative;

	width: 100%;
	height: 1405px;          /* ★ 배경 이미지 실제 높이 */

	display: block;
	overflow: hidden;

	padding: 0;
}


.t3s4-bg {
	position: absolute;
	inset: 0;
	z-index: 1;

	background: #eef1f5 url("../img/t3/s4_bg_n.jpg") no-repeat center top;
	background-size: cover;
}


.t3s4-inner {
	position: relative;
	z-index: 5;

	display: flex;
	align-items: flex-start;
	gap: 0;

	width: 100%;
	max-width: 1600px;
	height: auto;

	margin: 0 auto;
	padding: 148px 0 0;      /* ★ 타이틀 시작 높이 */
}


.t3s4-head {
	flex: 0 0 628px;         /* ★ 타이틀 ~ 주상복합 열 간격 */
	min-width: 0;
	height: auto;

	display: block;
}


.t3s4-tit h3 {
	margin: 0 0 12px;

	font-family:'FuturaCyrillicDemi';
	font-size: 53px;
	line-height: 1.35;
	letter-spacing: -.01em;

	color: var(--navy);
}
.t3s4-tit h3 span {
	line-height: 1.2;
}


.t3s4-tit p {
	margin: 0;

	font-family:'Pretendard-Medium';
	font-size: 23px;
	letter-spacing: -.025em;

	color: #000;
}


/* 카드 10장 통이미지 : 1548 x 388, 컨테이너 기준 고정 */
.t3s4-cards {
	position: relative;
	z-index: 5;
	width: fit-content;
	margin: 0 auto;
	margin-top: 40px;

}



.t3s4-body {
	flex: 1 1 auto;

	display: flex;
	align-items: flex-start;

	gap: 0;

	min-width: 0;
}


.t3s4-col {
	flex: 0 0 626px;
	min-width: 0;
}
.t3s4-col:first-child {
	border-right: 0;
}

.t3s4-col:last-child {
	flex: 1 1 auto;
}


.t3s4-col h4 {
	margin: 0 0 20px;

	font-family:'Pretendard-SemiBold';
	font-size: 26px;
	letter-spacing: -.03em;

	color: var(--navy);
}


.t3s4-lists {
	display: grid;
	grid-template-columns: repeat(2, 290px);
	gap: 0 20px;
}


.t3s4-lists ul {
	flex: 1 1 auto;

	margin: 0;
	padding: 0;

	list-style: none;
}
.t3s4-col:last-child .t3s4-lists {
	grid-template-columns: 1fr;
}


.t3s4-lists li {
	position: relative;

	padding-left: 14px;
	margin-bottom: 8px;

	font-family:'Pretendard-Regular';
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: -.025em;

	color: #000;

	transition: color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}


.t3s4-lists li::before {
	content: "";

	position: absolute;
	left: 0;
	top: 10px;

	width: 7px;
	height: 7px;

	border-radius: 50%;
	background: #0066b3;
}


.t3s4-lists li:hover {
	color: var(--navy);
	transform: translateX(4px);
}


/* =========================================================
   T3-5 : 사전고객등록
========================================================= */

.t3s5 {
	position: relative;

	width: 100%;

	background: #fff;
}


.t3s5-inner {
	display: flex;
	align-items: stretch;

	width: 100%;
	min-height: 700px;
}


.t3s5-left {
	position: relative;

	width: 570px;
	display: flex;
	align-items: center;
	justify-content: center;

	padding: clamp(60px, 6vw, 110px) 4%;

	background: #f4f6f8 url("../img/t3/s5_bg.jpg") no-repeat center center;
	background-size: cover;
}


.t3s5-lead {
	text-align: center;
}


.t3s5-lead h3 {
	margin: 0 0 20px;

	font-family:'FuturaCyrillicHeavy';
	font-size: 51px;
	line-height: 1.28;
	letter-spacing: .02em;

	color: var(--navy);
}


.t3s5-lead h3 span {
	display: inline-block;
	line-height: 1.1;
}


.t3s5-lead strong {
	display: block;
	margin-bottom: 16px;

	font-family:'KoPubWorld-Dotum-Bold';
	font-size: 24px;
	letter-spacing: -.02em;

	color: #2d2b27;
}


.t3s5-lead p {
	margin: 0;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 18px;
	line-height: 1.8;
	letter-spacing: -.025em;

	color: #2d2b27;
}


.t3s5-right {
	flex: 1 1 auto;
	min-width: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(60px, 6vw, 110px) 6%;
}


.t3s5-form {
	width: 100%;
}


/* ---------- 약관 ---------- */

.t3s5-agree h4, .t3s5-inhead h4 {
	margin: 0 0 10px;

	font-family:'Pretendard-SemiBold';
	font-size: 20px;
	letter-spacing: -.03em;

	color: #000;
}


.t3s5-terms {
	height: clamp(120px, 12vw, 190px);

	padding: 20px 22px;
	margin-bottom: 10px;

	border: 1px solid #ddd;
	background: #fafafa;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


.t3s5-terms p {
	margin: 0 0 8px;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: -.025em;

	color: #666;
}


.t3s5-terms b {
	font-family: 'Pretendard-SemiBold', sans-serif;
	color: #333;
}


.t3s5-radio {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: clamp(20px, 2vw, 40px);

	margin-bottom: clamp(36px, 3.6vw, 66px);
}


.t3s5-radio label {
	display: inline-flex;
	align-items: center;

	cursor: pointer;
}


.t3s5-radio input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;
}


.t3s5-radio i {
	position: relative;

	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	margin-right: 9px;

	border: 1px solid #bbb;
	border-radius: 50%;

	background: #fff;

	transition: border-color .3s ease;
}


.t3s5-radio i::after {
	content: "";

	position: absolute;
	left: 50%;
	top: 50%;

	width: 9px;
	height: 9px;

	border-radius: 50%;
	background: var(--navy);

	transform: translate(-50%, -50%) scale(0);

	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}


.t3s5-radio input:checked + i {
	border-color: var(--navy);
}


.t3s5-radio input:checked + i::after {
	transform: translate(-50%, -50%) scale(1);
}


.t3s5-radio span {
	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 19px;
	letter-spacing: -.025em;

	color: #333;
}


.t3s5-radio em {
	font-family: 'Pretendard-Light', sans-serif;
	font-size: 15px;
	font-style: normal;

}


/* ---------- 입력 ---------- */

.t3s5-inhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;

	margin-bottom: 10px;
}


.t3s5-inhead h4 {
	margin: 0;
}


.t3s5-inhead span {
	font-family: 'Pretendard-Light', sans-serif;
	font-size: clamp(10px, .76vw, 14px);
	letter-spacing: -.02em;

}
.t3s5-inhead span em {
	color: #ed1c24;
}

.t3s5-row {
	display: flex;
	align-items: center;

	padding: 10px 0;

	border-bottom: 1px solid #e5e5e5;
	border-top: 1px solid #e5e5e5;
}
.t3s5-row:nth-child(3) {
	border-top: none;
}

.t3s5-row label {
	flex: 0 0 clamp(80px, 8vw, 130px);

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: clamp(12px, .9vw, 17px);
	letter-spacing: -.025em;

	color: #333;
}


.t3s5-row label b {
	color: #e03131;
}


.t3s5-field {
	flex: 1 1 auto;
	min-width: 0;
}


.t3s5-field input {
	width: 100%;
	height: clamp(38px, 3.4vw, 54px);

	padding: 0 14px;

	border: 1px solid #ddd;
	border-radius: 2px;

	background: #fff;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 17px;
	letter-spacing: -.025em;

	color: #222;

	transition: border-color .3s ease, box-shadow .3s ease;
}


.t3s5-field input::placeholder {
	color: #bbb;
	font-size: 17px;
}


.t3s5-field input:focus {
	outline: 0;

	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(5, 32, 95, .08);
}


.t3s5-field input.is-error {
	border-color: #e03131;
}


.t3s5-tel {
	display: flex;
	align-items: center;

	gap: clamp(6px, .7vw, 12px);
}


.t3s5-tel input {
	flex: 1 1 33%;
	text-align: center;
}


.t3s5-dash {
	flex: 0 0 auto;
	color: #bbb;
}


.t3s5-error {
	min-height: 22px;
	margin: 12px 0 0;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: clamp(11px, .82vw, 15px);
	letter-spacing: -.025em;

	color: #e03131;

	opacity: 0;
	transform: translateY(-4px);

	transition: opacity .35s ease, transform .35s ease;
}


.t3s5-error.is-on {
	opacity: 1;
	transform: translateY(0);
}


.t3s5-submit {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 210px;
	height: 60px;

	margin: 0 auto;
	margin-top: 90px;

	border: 0;
	border-radius: 50px;

	background: var(--navy);

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 18px;
	letter-spacing: -.02em;

	color: #fff;

	cursor: pointer;

	transition: background .4s ease;
}


.t3s5-submit:hover {
	background: var(--blue);
}


.t3s5-submit .nav-arw {
	margin-left: 12px;
}


/* =========================================================
   T3 : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	/* ---------- T3-1 : 모바일 = 시안 이미지 그대로 ---------- */

	.t3s1 {
		background: #ccd8b4;          /* 이미지 하단색 (여백 대비용) */
	}

	/* 크롭 / 그라데이션 등 기존 효과 전부 제거 */
	.t3s1-illust img {
		height: auto;
		object-fit: initial;
		object-position: initial;
	}

	.t3s1-illust::after {
		display: none;
	}

	/* 텍스트는 배경 이미지 위에 얹는다 */
	.t3s1-panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 33.3%;
		bottom: auto;

		width: 100%;
		height: auto;
		padding: 0;

		background: none;
		border-top: none;
	}

	.t3s1-inner {
		max-width: none;
		padding: 0 12%;               /* ★ 시안 좌우 여백 */
	}

	.t3s1-row {
		display: block;
	}

	/* SUMMARY + 트리븐센텀 : 시안처럼 한 줄로 */
	.t3s1-head {
		margin-bottom: 70px;
		display: flex;
		align-items: flex-end;
	}

	.t3s1-title {
		display: inline-block;
		vertical-align: middle;

		font-size: 64px;
		line-height: 0.75;
	}

	.t3s1-head em {
		display: inline-block;
		vertical-align: middle;

		margin: 0 0 0 20px;
		font-size: 28px;
	}

	.t3s1-box {
		width: 100%;
		margin-bottom: 60px;
	}

	.t3s1-box:last-child {
		margin-bottom: 0;
	}




	/* ---------- 하단 경고문구 ---------- */

	.t3s1-note {
		margin: 82px -47px 0;         /* 좌우 여백 43px 로 벌린다 (inner 패딩 상쇄) */
	}

	.t3s1-note p {
		padding-left: 20px;
		text-indent: -20px;

		font-size: 19px;
		line-height: 1.47;
	}



	.t3s1-box h4 {
		margin-bottom: 15px;
		font-size: 32px;
	}

	.t3s1-box li {
		padding-left: 26px;
		margin-bottom: 0;

		font-size: 25px;
		line-height: 1.7;
		letter-spacing: -1px;
	}

	.t3s1-box li::before {
		width: 10px;
		height: 10px;
		top: .62em;
	}


	/* ---------- T3-2 ---------- */

	.t3s2 {
		padding: 140px 0 0;
	}

	.t3s2-inner {
		max-width: none;
		padding: 0 56px;
	}

	.t3s2-logo {
		margin-bottom: 46px;
	}

	.t3s2-logo img {
	}

	.t3s2-title {
		margin-bottom: 40px;
	}

	.t3s2-title span {
	}

	.t3s2-desc {
		font-size: 23px;
		line-height: 1.9;
		letter-spacing: -1px;
	}

	.t3s2-img {
		height: 280px;
	}
	.t3s2-img img {
		height: 100%;
		object-fit: cover;
	}
	.t3s2-imgs > div:nth-child(1) img {
		object-position: 10%;
	}
	.t3s2-imgs > div:nth-child(2) img {
		object-position: 24%;
	}
	.t3s2-imgs > div:nth-child(3) img {
		object-position: 35%;
	}


	/* ---------- T3-3 ---------- */


	.t3s3-bg {
		background: #dce9f7 url("../img/t3/s3_bg_mo_n.jpg") no-repeat center center;
	}
	.t3s3 {
		padding: 100px 0;
		height: 1567px;
		align-items: flex-start;
	}

	.t3s3-inner {
		flex-direction: column;
		gap: 0px;
		align-items: flex-start;
		max-width: none;
		padding: 0 40px;
	}

	.t3s3-left {
		flex: 0 0 auto;
		width: 100%;
	}

	.t3s3-title {
	}

	.t3s3-title span {
		font-size: 24px;
		line-height: 1.8;
	}

	.t3s3-photo {
		margin-bottom: 40px;
	}

	.t3s3-big span {
		font-size: 62px;
	}

	.t3s3-right {
		padding-top: 0;
		margin-top: 35px;
	}

	.t3s3-right p {
		margin-bottom: 30px;
		font-size: 21px;
	}

	.t3s3-right p:last-child {
		font-size: 21px;
	}

	/* ---------- T3-4 ---------- */

	.t3s4 {
		height: 2556px;
		padding: 0;
		display: block;
	}

	.t3s4-bg {
		background: #eef1f5 url("../img/t3/s4_bg_mo.jpg") no-repeat center top;
		background-size: 100% auto;
	}

	.t3s4-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;

		max-width: none;
		height: auto;

		padding: 105px 43px 0;
	}

	.t3s4-head {
		flex: 0 0 auto;
		width: 100%;

		display: block;
		text-align: left;
	}

	.t3s4-tit h3 {
		margin: 0 0 14px;
		font-size: 48px;
		line-height: 1.35;
	}

	.t3s4-tit p {
		margin: 0;
		font-size: 30px;
	}

	.t3s4-body {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.t3s4-col {
		flex: 0 0 auto;
		width: 100%;
	}

	.t3s4-col:first-child {
		margin-top: 82px;
		border-right: 0;
	}

	.t3s4-col:last-child {
		margin-top: 30px;
	}

	.t3s4-col h4 {
		margin: 0 0 20px;
		font-size: 34px;
	}

	.t3s4-lists {
		display: grid;
		grid-template-columns: repeat(2, 330px);
		gap: 0 37px;
		width: auto;
	}

	.t3s4-col:last-child .t3s4-lists {
		grid-template-columns: 340px;   /* 오른쪽 카드 2장과 안 겹치게 */
	}

	.t3s4-lists li {
		padding-left: 22px;
		margin-bottom: 5px;

		font-size: 22px;
		line-height: 1.5;
	}

	.t3s4-lists li::before {
		width: 7px;
		height: 7px;
		top: .58em;
	}

	/* 카드 통이미지 */
	.t3s4-cards {
		margin-top: -410px;
	}


	/* ---------- T3-5 ---------- */

	.t3s5-inner {
		flex-direction: column;
		min-height: 0;
	}

	.t3s5-left {
		flex: 0 0 auto;
		width: 100%;

		padding: 110px 56px;
	}

	.t3s5-lead h3 {
		margin-bottom: 30px;
		font-size: 60px;
	}

	.t3s5-lead strong {
		margin-bottom: 24px;
		font-size: 30px;
	}

	.t3s5-lead p {
		font-size: 23px;
		line-height: 1.85;
	}

	.t3s5-right {
		padding: 110px 56px;
	}

	.t3s5-form {
		max-width: none;
	}

	.t3s5-agree h4, .t3s5-inhead h4 {
		margin-bottom: 26px;
		font-size: 30px;
	}

	.t3s5-terms {
		height: 300px;

		padding: 30px 32px;
		margin-bottom: 30px;
	}

	.t3s5-terms p {
		margin-bottom: 14px;
		font-size: 21px;
		line-height: 1.8;
	}

	.t3s5-radio {
		flex-direction: column;
		align-items: flex-start;

		gap: 26px;

		margin-bottom: 60px;
	}

	.t3s5-radio i {
		width: 32px;
		height: 32px;

		margin-right: 16px;
	}

	.t3s5-radio i::after {
		width: 16px;
		height: 16px;
	}

	.t3s5-radio span {
		font-size: 24px;
	}

	.t3s5-inhead {
		display: block;
		margin-bottom: 30px;
	}

	.t3s5-inhead span {
		display: block;
		margin-top: 12px;

		font-size: 19px;
	}

	.t3s5-row {
		display: block;
		padding: 30px 0;
	}

	.t3s5-row label {
		display: block;
		margin-bottom: 18px;

		font-size: 25px;
	}

	.t3s5-field input {
		height: 86px;

		padding: 0 24px;

		font-size: 25px;
	}

	.t3s5-tel {
		gap: 14px;
	}

	.t3s5-error {
		min-height: 34px;
		margin-top: 20px;

		font-size: 21px;
	}

	.t3s5-submit {
		width: 320px;
		height: 92px;

		margin: 0 auto;
		margin-top: 50px;

		font-size: 25px;
	}

	.t3s5-submit .nav-arw {
		width: 34px;
		margin-left: 16px;
	}

}




/* GNB 열림 시 배경 스크롤 잠금 */
body.gnb-lock {
	overflow: hidden !important;

	touch-action: pinch-zoom;
	overscroll-behavior: none;
}



























/* =========================================================
   DOOSAN 4대 사업영역
   PC 시안 기준 : 컨테이너 1600 / 4열 / 열간 80
========================================================= */

.bxfeat {
	width: 100%;
	padding: 100px 0 45px;
}

.bxfeat-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0;
	justify-content: center;
	list-style: none;
}

.bxfeat-list li {
	margin: 0;
}

.bxfeat-ico {
	margin-bottom: 15px;
	height: 60px;
	display: flex;
	align-items: flex-end;
}

.bxfeat-ico img {
	display: block;
	object-fit: contain;
	object-position: left bottom;
}

.bxfeat-list strong {
	display: block;
	margin-bottom: 18px;

	font-family:'FuturaCyrillicHeavy';
	font-size: 33px;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-align: start;
	color: #05205f;
}

.bxfeat-list p {
	margin: 0;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.62;
	letter-spacing: -.02em;
	text-align: start;

	color: #000;
}


/* ---------- 모바일 : 2 x 2 ---------- */

@media screen and (max-width: 991px) {

	.bxfeat {
		padding: 100px 0 90px;
	}

	.bxfeat-list {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 80px;
		row-gap: 85px;

		max-width: none;
		padding: 0 65px;
	}

	.bxfeat-ico {
		margin-bottom: 15px;
	}

	.bxfeat-list strong {
		margin-bottom: 14px;
		font-size: 30px;
	}

	.bxfeat-list p {
		font-size: 17px;
		letter-spacing: -1px;
		line-height: 1.6;
	}

	/* 모바일에서는 <br> 무시하고 자동 줄바꿈 */
	.bxfeat-list p br {
		display: none;
	}
}





@media screen and (max-width: 991px) {

	.사진리스트클래스 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}

	.사진리스트클래스 li {
		width: auto;
	}

	.사진리스트클래스 img {
		width: 100%;
		height: 285px;          /* 시안 기준 */
		object-fit: cover;
	}
}














/* =====================================================
   폼 하단 등록 버튼
====================================================== */

.t3s5-submit-btm {
	margin-top: 45px !important;
}

@media (max-width: 991px) {

	.t3s5-submit-btm {
		margin-top: 50px !important;
	}

}



























/* =========================================================
   SECTION 2 · DEFAULT : CONTACT (오시는 길)
========================================================= */

.ct {
	position: relative;

	width: 100%;
	padding: 115px 0 100px;

	overflow: hidden;

	background: #efedea;
}


.ct-bg {
	position: absolute;
	inset: 0;
	z-index: 1;

	background: #efedea url("../img/contact/bg_pc.jpg") no-repeat center top;
	background-size: cover;
}


.ct-inner {
	position: relative;
	z-index: 5;

	width: 100%;
	max-width: 1110px;

	margin: 0 auto;
	padding: 0 20px;
}


/* ---------- HEAD ---------- */

.ct-head {
	margin-bottom: 52px;
	text-align: center;
}


.ct-title {
	margin: 0;

	font-family: 'FuturaCyrillicDemi';
	font-size: 58px;
	line-height: 1.1;
	letter-spacing: .18em;
	text-indent: .18em;

	color: var(--navy);
}


.ct-sub {
	margin: 14px 0 0;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 20px;
	letter-spacing: -.02em;

	color: #3a3a3a;
}


/* ---------- MAPS ---------- */

.ct-maps {
	display: flex;
	align-items: flex-start;

	gap: 34px;
}


.ct-map {
	flex: 1 1 50%;
	min-width: 0;

	font-size: 0;

	box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}


.ct-map picture {
	display: block;
	width: 100%;
}


.ct-map img {
	display: block;

	width: 100%;
	height: auto;
}


/* ---------- LIST ---------- */

.ct-list {
	display: flex;
	align-items: flex-start;

	margin: 40px 0 0;
	padding: 0;

	list-style: none;
}


.ct-list li {
	position: relative;

	flex: 1 1 33.333%;
	min-width: 0;

	padding: 6px 20px 0;

	text-align: center;
}


.ct-list li + li::before {
	content: "";

	position: absolute;
	left: 0;
	top: 4px;

	width: 1px;
	height: 160px;

	background: rgba(0, 0, 0, .14);
}


.ct-list strong {
	display: block;
	margin-bottom: 12px;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 22px;
	letter-spacing: -.02em;

	color: var(--navy);
}


.ct-list p {
	margin: 0;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: -.03em;
	word-break: keep-all;

	color: #333;
}


.ct-btns {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 14px;

	margin-top: 24px;
}


.ct-btn {
	display: block;

	width: 56px;
	height: 56px;

	border-radius: 50%;
	overflow: hidden;

	font-size: 0;

	transition: transform .55s cubic-bezier(.22, 1, .36, 1),
	box-shadow .4s ease;
}


.ct-btn img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


.ct-btn:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 20px rgba(5, 32, 95, .25);
}


/* ---------- 노트북 낮은 높이 ---------- */

@media screen and (min-width: 992px) and (max-height: 780px) {

	.ct { padding: 90px 0 80px; }

	.ct-head { margin-bottom: 40px; }

	.ct-title { font-size: 48px; }

}


/* =========================================================
   CONTACT : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	.ct {
		padding: 120px 0 130px;
	}

	.ct-bg {
		background-image: url("../img/contact/bg_mo.jpg");
		background-position: center top;
		background-size: cover;
	}

	.ct-inner {
		max-width: none;
		padding: 0 45px;
	}


	/* ---------- HEAD ---------- */

	.ct-head {
		margin-bottom: 55px;
	}

	.ct-title {
		font-size: 48px;
		letter-spacing: .16em;
		text-indent: .16em;
	}

	.ct-sub {
		margin-top: 12px;
		font-size: 26px;
	}


	/* ---------- MAPS ---------- */

	.ct-maps {
		display: block;
	}

	.ct-map {
		width: 100%;
		margin-bottom: 26px;
	}

	.ct-map:last-child {
		margin-bottom: 0;
	}


	/* ---------- LIST ---------- */

	.ct-list {
		display: block;
		margin-top: 30px;
	}

	.ct-list li {
		display: flex;
		align-items: center;
		justify-content: space-between;

		gap: 20px;

		width: 100%;
		padding: 45px 0;

		text-align: left;
	}

	.ct-list li:first-child {
		padding-top: 0;
	}

	.ct-list li:last-child {
		padding-bottom: 0;
	}

	.ct-list li + li::before {
		left: 0;
		top: 0;

		width: 100%;
		height: 1px;
	}

	.ct-txt {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ct-list strong {
		margin-bottom: 14px;
		font-size: 30px;
	}

	.ct-list p {
		font-size: 23px;
		line-height: 1.5;
	}

	.ct-btns {
		flex: 0 0 auto;

		gap: 18px;
		margin-top: 0;
	}

	.ct-btn {
		width: 72px;
		height: 72px;
	}

	.ct-btn:hover {
		transform: none;
		box-shadow: none;
	}

}
































/* =========================================================
   SECTION 2 · DEFAULT : ONE CITY (시안 섹션)
   · 제목 위치는 .oc-copy 의 top 한 곳만 조정하면 된다
========================================================= */

.oc {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff;
}

.oc-visual {
	position: relative;
	width: 100%;
	font-size: 0;
}

.oc-visual picture {
	display: block;
	width: 100%;
}

.oc-visual img {
	display: block;
	width: 100%;
	height: auto;
}


/* 이미지 위에 얹는 제목 : 이미지가 vw 로 커지므로 글자도 vw */
.oc-copy {
	position: absolute;
	left: 0;
	right: 0;
	top: 12%;
	z-index: 5;

	padding: 0 20px;
	text-align: center;
}

.oc-sub {
	margin: 0;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 27px;            /* 시안 33px / 1920 */
	line-height: 1.4;
	letter-spacing: -.02em;

	color: #1b0832;
}

.oc-sub em {
	font-style: normal;
	font-size: 18px;
}

.oc-title {

	font-family: 'Pretendard-Bold', sans-serif;
	font-size: 60px;            /* 시안 68px / 1920 */
	line-height: 1.25;
	letter-spacing: -.03em;

	color: #1b0832;
}

.oc-title b {
	font-family: 'Pretendard-Bold', sans-serif;
	color: #0066b3;               /* 시안 블루 */
}


/* ---------- 노트북 낮은 높이 : 이미지 기준이라 그대로 ---------- */


/* =========================================================
   ONE CITY : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	.oc-copy {
		top: 8.6%;
		padding: 0 40px;
	}

	.oc-sub {
		font-size: 34px;
		line-height: 1.55;
	}

	.oc-comma {
		display: none;            /* 모바일 시안은 쉼표 없음 */
	}

	.oc-title {
		margin-top: 40px;
		font-size: 65px;
		line-height: 0.85;
	}

}



















/* =========================================================
   T4 : PR CENTER · 언론보도 (NEWS)
========================================================= */

.t4 {
	background: #fff;
}


.t4s1 {
	position: relative;

	width: 100%;
	padding: 160px 0 170px;

	background: #fff;
	overflow: hidden;
}


/* 상단 은은한 글로우 */
.t4s1::before {
	content: "";

	position: absolute;
	left: 50%;
	top: -260px;
	z-index: 1;

	width: 1500px;
	height: 720px;

	transform: translateX(-50%);

	background: radial-gradient(ellipse at center, rgba(5, 32, 95, .055) 0%, rgba(255, 255, 255, 0) 70%);

	pointer-events: none;
}


.t4s1-inner {
	position: relative;
	z-index: 5;

	width: 100%;
	max-width: 1600px;

	margin: 0 auto;
	padding: 0 40px;
}


/* ---------- HEAD ---------- */

.t4s1-head {
	margin-bottom: 80px;
	text-align: center;
}


.t4s1-title {
	margin: 0;

	font-family: 'Pretendard-Bold', sans-serif;
	font-size: 50px;
	line-height: 1.2;
	letter-spacing: -.035em;

	color: #111;
}


.t4s1-eng {
	margin: 16px 0 0;

	font-family: 'FuturaCyrillicLight', sans-serif;
	font-size: 17px;
	letter-spacing: .45em;
	text-indent: .45em;

	color: #9aa0a8;
}


.t4s1-line {
	display: block;

	width: 48px;
	height: 2px;

	margin: 30px auto 0;

	background: var(--navy);
}


/* ---------- LIST ---------- */

.news-zone {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	gap: 30px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.news-zone > li {
	min-width: 0;
}


.news-zone > li > a {
	display: block;
	height: 100%;

	color: inherit;
	text-decoration: none;
}


.news-zone > li > a.no-link {
	cursor: default;
}


.news-zone .inner {
	position: relative;

	height: 100%;
	padding: 48px 44px 42px;

	border: 1px solid #e6e8ec;
	background: #fff;

	overflow: hidden;

	transition: transform .75s cubic-bezier(.22, 1, .36, 1),
	box-shadow .75s cubic-bezier(.22, 1, .36, 1),
	border-color .5s ease;
}


/* 상단 라인 : 왼쪽에서 그려진다 */
.news-zone .inner::before {
	content: "";

	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;

	width: 100%;
	height: 3px;

	background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 100%);

	transform: scaleX(0);
	transform-origin: left center;

	transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}


/* 우하단 원형 글로우 */
.news-zone .inner::after {
	content: "";

	position: absolute;
	right: -70px;
	bottom: -70px;
	z-index: 1;

	width: 230px;
	height: 230px;

	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 102, 179, .13) 0%, rgba(0, 102, 179, 0) 70%);

	opacity: 0;
	transform: scale(.6);

	transition: opacity .8s ease, transform .95s cubic-bezier(.22, 1, .36, 1);

	pointer-events: none;
}


.news-zone .content {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;

	height: 100%;
}


.news-name {
	margin: 0 0 22px;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 16px;
	letter-spacing: -.02em;

	color: var(--blue);

	transition: color .45s ease;
}


.news-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	margin: 0 0 20px;
	min-height: 3em;

	font-family: 'Pretendard-Bold', sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -.035em;

	color: #14161a;

	transition: color .45s ease;
}


.news-content {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;

	margin: 0 0 44px;
	min-height: 5.25em;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: -.03em;

	color: #8b9098;

	transition: color .45s ease;
}


.news-date {
	position: relative;

	margin: auto 0 0;
	padding-top: 22px;

	border-top: 1px solid #eceef1;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 15px;
	letter-spacing: .02em;

	color: #9aa0a8;

	transition: color .45s ease, border-color .45s ease;
}


/* 화살표 */
.news-date::after {
	content: "";

	position: absolute;
	right: 4px;
	bottom: 4px;

	width: 16px;
	height: 16px;

	border-top: 1px solid #c3c8ce;
	border-right: 1px solid #c3c8ce;

	opacity: 0;
	transform: rotate(45deg) translate(-8px, 8px);

	transition: transform .65s cubic-bezier(.22, 1, .36, 1),
	opacity .5s ease,
	border-color .45s ease;
}


/* ---------- HOVER ---------- */

.news-zone > li > a:not(.no-link):hover .inner {
	transform: translateY(-12px);

	border-color: #dfe3e9;
	box-shadow: 0 28px 54px rgba(5, 32, 95, .14);
}


.news-zone > li > a:not(.no-link):hover .inner::before {
	transform: scaleX(1);
}


.news-zone > li > a:not(.no-link):hover .inner::after {
	opacity: 1;
	transform: scale(1);
}


.news-zone > li > a:not(.no-link):hover .news-title {
	color: var(--navy);
}


.news-zone > li > a:not(.no-link):hover .news-content {
	color: #6d737b;
}


.news-zone > li > a:not(.no-link):hover .news-date {
	color: var(--navy);
	border-color: rgba(5, 32, 95, .25);
}


.news-zone > li > a:not(.no-link):hover .news-date::after {
	opacity: 1;
	transform: rotate(45deg) translate(0, 0);
	border-color: var(--navy);
}


/* ---------- EMPTY ---------- */

.news-empty {
	grid-column: 1 / -1;

	padding: 130px 0;

	border: 1px solid #eceef1;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 19px;
	letter-spacing: -.02em;
	text-align: center;

	color: #9aa0a8;
}


/* ---------- PAGINATION ---------- */

.t4s1 .indicator {
	margin-top: 90px;
}


.t4s1 .indicator ul {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 4px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.t4s1 .indicator a {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 42px;
	height: 42px;

	padding: 0 4px;

	border: 0;
	background: transparent;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 16px;
	letter-spacing: .01em;

	color: #a3a8af;
	text-decoration: none;

	transition: color .4s ease;
}


/* 숫자 밑줄 */
.t4s1 .indicator a .no::after {
	content: "";

	position: absolute;
	left: 50%;
	bottom: 8px;

	width: 16px;
	height: 1px;

	background: var(--navy);

	transform: translateX(-50%) scaleX(0);
	transform-origin: center;

	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}


.t4s1 .indicator a:hover {
	color: #14161a;
}


.t4s1 .indicator a:hover .no::after {
	transform: translateX(-50%) scaleX(1);
}


/* 현재 페이지 : 백엔드 classname 이 무엇이든 잡히게 */
.t4s1 .indicator a.on,
.t4s1 .indicator a.active,
.t4s1 .indicator a.current,
.t4s1 .indicator a.select,
.t4s1 .indicator a.is-on {
	font-family: 'Pretendard-SemiBold', sans-serif;
	color: var(--navy);
}


.t4s1 .indicator a.on .no::after,
.t4s1 .indicator a.active .no::after,
.t4s1 .indicator a.current .no::after,
.t4s1 .indicator a.select .no::after,
.t4s1 .indicator a.is-on .no::after {
	width: 22px;
	transform: translateX(-50%) scaleX(1);
}


/* ---------- 화살표 : 텍스트 숨기고 도형으로 ---------- */

.t4s1 .indicator li:nth-child(1),
.t4s1 .indicator li:nth-child(2) {
	margin-right: 10px;
}


.t4s1 .indicator li:nth-last-child(1),
.t4s1 .indicator li:nth-last-child(2) {
	margin-left: 10px;
}


.t4s1 .indicator .arrow {
	position: relative;

	display: block;

	width: 100%;
	height: 100%;

	font-size: 0;
	line-height: 0;
	color: transparent;
}


.t4s1 .indicator .arrow::before,
.t4s1 .indicator .arrow::after {
	content: "";

	position: absolute;
	top: 50%;

	width: 7px;
	height: 7px;

	border-top: 1px solid #b6bbc2;
	border-right: 1px solid #b6bbc2;

	transition: border-color .4s ease;
}


/* 오른쪽 방향 (> , >>) */
.t4s1 .indicator li:nth-last-child(1) .arrow::before,
.t4s1 .indicator li:nth-last-child(1) .arrow::after,
.t4s1 .indicator li:nth-last-child(2) .arrow::before {
	transform: translate(-50%, -50%) rotate(45deg);
}


/* 왼쪽 방향 (< , <<) */
.t4s1 .indicator li:nth-child(1) .arrow::before,
.t4s1 .indicator li:nth-child(1) .arrow::after,
.t4s1 .indicator li:nth-child(2) .arrow::before {
	transform: translate(-50%, -50%) rotate(-135deg);
}


/* 단일 화살표 ( < , > ) : 겹침 요소 숨김 */
.t4s1 .indicator li:nth-child(2) .arrow::after,
.t4s1 .indicator li:nth-last-child(2) .arrow::after {
	display: none;
}


/* 위치 : 단일 */
.t4s1 .indicator li:nth-child(2) .arrow::before,
.t4s1 .indicator li:nth-last-child(2) .arrow::before {
	left: 50%;
}


/* 위치 : 이중 ( << , >> ) */
.t4s1 .indicator li:nth-child(1) .arrow::before,
.t4s1 .indicator li:nth-last-child(1) .arrow::before {
	left: 42%;
}

.t4s1 .indicator li:nth-child(1) .arrow::after,
.t4s1 .indicator li:nth-last-child(1) .arrow::after {
	left: 62%;
}


.t4s1 .indicator a:hover .arrow::before,
.t4s1 .indicator a:hover .arrow::after {
	border-color: var(--navy);
}


/* ---------- CTA ---------- */

.t4cta {
	position: relative;

	width: 100%;
	padding: 110px 0 120px;

	background: var(--navy);

	text-align: center;
}


.t4cta-inner {
	width: 100%;
	max-width: 1600px;

	margin: 0 auto;
	padding: 0 40px;
}


.t4cta-txt {
	margin: 0 0 34px;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 30px;
	line-height: 1.5;
	letter-spacing: -.03em;

	color: rgba(255, 255, 255, .92);
}


.t4cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 62px;
	padding: 0 40px;

	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50px;

	background: transparent;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 18px;
	letter-spacing: -.02em;

	color: #fff;

	cursor: pointer;

	transition: background .45s ease, border-color .45s ease;
}


.t4cta-btn .nav-arw {
	margin-left: 12px;
}


.t4cta-btn:hover {
	border-color: var(--blue);
	background: var(--blue);
}


/* =========================================================
   T4 : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	.t4s1 {
		padding: 130px 0 150px;
	}

	.t4s1::before {
		top: -200px;
		width: 900px;
		height: 520px;
	}

	.t4s1-inner {
		max-width: none;
		padding: 0 45px;
	}

	.t4s1-head {
		margin-bottom: 64px;
	}

	.t4s1-title {
		font-size: 58px;
	}

	.t4s1-eng {
		margin-top: 18px;
		font-size: 23px;
	}

	.t4s1-line {
		width: 60px;
		height: 3px;
		margin-top: 32px;
	}

	/* ---------- 모바일 : 2열 ---------- */

	.news-zone {
		display: flex;
		flex-wrap: wrap;

		gap: 24px 22px;

		width: 100%;
	}

	.news-zone > li {
		display: block;

		flex: 0 0 calc((100% - 22px) / 2);
		width: calc((100% - 22px) / 2);
		max-width: calc((100% - 22px) / 2);
	}

	.news-zone > li > a {
		display: block;
		width: 100%;
	}

	.news-zone .inner {
		display: block;
		width: 100%;

		padding: 40px 30px 34px;
	}

	.news-zone .content {
		display: flex;
		flex-direction: column;

		width: 100%;
		min-width: 0;
		height: 100%;
	}

	.news-name {
		margin-bottom: 18px;

		font-size: 20px;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.news-title {
		display: -webkit-box !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;

		margin-bottom: 18px;
		min-height: 4.35em;

		font-size: 25px;
		line-height: 1.45;
		letter-spacing: -.04em;

		word-break: keep-all;
	}

	.news-content {
		display: -webkit-box !important;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;

		margin-bottom: 30px;
		min-height: 5.1em;

		font-size: 20px;
		line-height: 1.7;

		word-break: keep-all;
	}

	.news-date {
		padding-top: 22px;
		padding-right: 34px;

		font-size: 19px;
	}

	/* 터치 기기는 hover 가 없으니 화살표를 항상 보여준다 */
	.news-date::after {
		right: 2px;
		bottom: 50%;

		width: 18px;
		height: 18px;

		margin-bottom: -13px;

		opacity: 1;
		transform: rotate(45deg);
	}

	.news-zone > li > a:hover .inner {
		transform: none;
		box-shadow: none;
	}

	.news-empty {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;

		padding: 150px 0;
		font-size: 25px;
	}

	.t4s1 .indicator {
		margin-top: 70px;
	}

	.t4s1 .indicator ul {
		gap: 6px;
	}

	.t4s1 .indicator a {
		min-width: 62px;
		width: auto;
		height: 62px;

		font-size: 24px;
	}

	.t4s1 .indicator li:nth-child(1),
	.t4s1 .indicator li:nth-child(2) {
		margin-right: 14px;
	}

	.t4s1 .indicator li:nth-last-child(1),
	.t4s1 .indicator li:nth-last-child(2) {
		margin-left: 14px;
	}

	.t4s1 .indicator a .no::after {
		bottom: 11px;
		width: 22px;
		height: 2px;
	}

	.t4s1 .indicator a.on .no::after,
	.t4s1 .indicator a.active .no::after,
	.t4s1 .indicator a.current .no::after,
	.t4s1 .indicator a.select .no::after,
	.t4s1 .indicator a.is-on .no::after {
		width: 30px;
	}

	.t4s1 .indicator .arrow::before,
	.t4s1 .indicator .arrow::after {
		width: 11px;
		height: 11px;

		border-top-width: 2px;
		border-right-width: 2px;
	}

	.t4cta {
		padding: 120px 0 130px;
	}

	.t4cta-inner {
		max-width: none;
		padding: 0 45px;
	}

	.t4cta-txt {
		margin-bottom: 44px;
		font-size: 34px;
		line-height: 1.6;
	}

	.t4cta-btn {
		height: 96px;
		padding: 0 52px;
		font-size: 26px;
	}

	.t4cta-btn .nav-arw {
		width: 34px;
		margin-left: 16px;
	}

}















/* =========================================================
   T5 : PR CENTER · 홍보영상 (PROMOTION)
========================================================= */

.t5 {
	background: #fff;
}


.t5s1 {
	position: relative;

	width: 100%;
	padding: 160px 0 170px;

	background: #fff;
	overflow: hidden;
}


.t5s1::before {
	content: "";

	position: absolute;
	left: 50%;
	top: -260px;
	z-index: 1;

	width: 1500px;
	height: 720px;

	transform: translateX(-50%);

	background: radial-gradient(ellipse at center, rgba(5, 32, 95, .055) 0%, rgba(255, 255, 255, 0) 70%);

	pointer-events: none;
}


.t5s1-inner {
	position: relative;
	z-index: 5;

	width: 100%;
	max-width: 1280px;

	margin: 0 auto;
	padding: 0 40px;
}


/* ---------- HEAD ---------- */

.t5s1-head {
	margin-bottom: 68px;
	text-align: center;
}


.t5s1-title {
	margin: 0;

	font-family: 'Pretendard-Bold', sans-serif;
	font-size: 50px;
	line-height: 1.2;
	letter-spacing: -.035em;

	color: #111;
}


.t5s1-eng {
	margin: 16px 0 0;

	font-family: 'FuturaCyrillicLight', sans-serif;
	font-size: 17px;
	letter-spacing: .45em;
	text-indent: .45em;

	color: #9aa0a8;
}


.t5s1-line {
	display: block;

	width: 48px;
	height: 2px;

	margin: 30px auto 0;

	background: var(--navy);
}


/* ---------- TABS ---------- */

.t5-tabs {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 14px;

	margin-bottom: 50px;
}


.t5-tab {
	position: relative;

	display: inline-flex;
	align-items: center;

	height: 62px;
	padding: 0 34px 0 24px;

	border: 1px solid #e2e5ea;
	border-radius: 50px;

	background: #fff;

	cursor: pointer;

	overflow: hidden;

	transition: border-color .5s ease, box-shadow .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}


.t5-tab::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;

	background: var(--navy);

	opacity: 0;

	transition: opacity .5s ease;
}


/* 재생 아이콘 원 */
.t5-tab-ico {
	position: relative;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: 30px;
	height: 30px;

	margin-right: 13px;

	border-radius: 50%;
	background: #eef1f5;

	transition: background .5s ease;
}


.t5-tab-ico i {
	display: block;

	width: 0;
	height: 0;

	margin-left: 2px;

	border-left: 8px solid var(--navy);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;

	transition: border-left-color .5s ease;
}


.t5-tab-txt {
	position: relative;
	z-index: 2;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 18px;
	letter-spacing: -.03em;

	color: #3a4048;

	transition: color .45s ease;
}


/* HOVER (비활성) */
.t5-tab:hover {
	border-color: #cdd2da;
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(5, 32, 95, .10);
}


/* 활성 */
.t5-tab.is-on {
	border-color: var(--navy);
	box-shadow: 0 14px 34px rgba(5, 32, 95, .26);
}


.t5-tab.is-on::before {
	opacity: 1;
}


.t5-tab.is-on .t5-tab-ico {
	background: rgba(255, 255, 255, .18);
}


.t5-tab.is-on .t5-tab-ico i {
	border-left-color: #fff;
}


.t5-tab.is-on .t5-tab-txt {
	color: #fff;
}


/* ---------- PANELS ---------- */

.t5-panels {
	position: relative;
}


.t5-panel {
	display: none;
}


.t5-panel.is-on {
	display: block;

	animation: t5PanelIn .7s cubic-bezier(.22, 1, .36, 1);
}


@keyframes t5PanelIn {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}


.t5-stage {
	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	border-radius: 14px;
	overflow: hidden;

	background: #000;
	box-shadow: 0 30px 70px rgba(5, 32, 95, .22);
}


.t5-video {
	position: absolute;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	background: #000;
}


/* ---------- 소리 켜기 버튼 ---------- */

.t5-sound {
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 5;

	display: inline-flex;
	align-items: center;

	height: 44px;
	padding: 0 18px 0 16px;

	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50px;

	background: rgba(5, 32, 95, .55);
	backdrop-filter: blur(4px);

	cursor: pointer;

	transition: background .35s ease, border-color .35s ease, opacity .35s ease;
}


.t5-sound:hover {
	background: rgba(5, 32, 95, .8);
	border-color: rgba(255, 255, 255, .85);
}


.t5-sound-ico {
	display: block;

	width: 20px;
	height: 20px;

	margin-right: 9px;

	fill: #fff;
	stroke: #fff;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* 스피커 몸통은 채우고 테두리 없음 */
.t5-sound-ico path:first-child {
	stroke: none;
}


/* 음파 / X 표시는 선만 */
.t5-sound-ico .t5-wave,
.t5-sound-ico .t5-x {
	fill: none;
}


.t5-sound-ico .t5-wave2 {
	opacity: .55;
}


/* ---- 상태별 아이콘 토글 ---- */

/* 기본(소리 꺼짐) : 음소거 아이콘만 */
.t5-sound-ico.t5-ico-on {
	display: none;
}

.t5-sound-ico.t5-ico-off {
	display: block;
}


/* 소리 켜짐 : 스피커+음파 아이콘만 */
.t5-stage.is-unmuted .t5-sound-ico.t5-ico-on {
	display: block;
}

.t5-stage.is-unmuted .t5-sound-ico.t5-ico-off {
	display: none;
}


.t5-sound-txt {
	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 14px;
	letter-spacing: -.02em;

	color: #fff;
}




/* ---------- EMPTY ---------- */

.t5-empty {
	padding: 130px 0;

	border: 1px solid #eceef1;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 19px;
	letter-spacing: -.02em;
	text-align: center;

	color: #9aa0a8;
}


/* ---------- CTA ---------- */

.t5cta {
	position: relative;

	width: 100%;
	padding: 110px 0 120px;

	background: var(--navy);

	text-align: center;
}


.t5cta-inner {
	width: 100%;
	max-width: 1600px;

	margin: 0 auto;
	padding: 0 40px;
}


.t5cta-txt {
	margin: 0 0 34px;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 30px;
	line-height: 1.5;
	letter-spacing: -.03em;

	color: rgba(255, 255, 255, .92);
}


.t5cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 62px;
	padding: 0 40px;

	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50px;

	background: transparent;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 18px;
	letter-spacing: -.02em;

	color: #fff;

	cursor: pointer;

	transition: background .45s ease, border-color .45s ease;
}


.t5cta-btn .nav-arw {
	margin-left: 12px;
}


.t5cta-btn:hover {
	border-color: var(--blue);
	background: var(--blue);
}


/* =========================================================
   T5 : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	.t5s1 {
		padding: 130px 0 150px;
	}

	.t5s1::before {
		top: -200px;
		width: 900px;
		height: 520px;
	}

	.t5s1-inner {
		max-width: none;
		padding: 0 45px;
	}

	.t5s1-head {
		margin-bottom: 58px;
	}

	.t5s1-title {
		font-size: 58px;
	}

	.t5s1-eng {
		margin-top: 18px;
		font-size: 23px;
	}

	.t5s1-line {
		width: 60px;
		height: 3px;
		margin-top: 32px;
	}

	.t5-tabs {
		gap: 16px;

		margin-bottom: 36px;
	}

	.t5-tabs {
		gap: 14px;
		margin-bottom: 44px;
	}

	.t5-tab {
		height: 92px;
		padding: 0 40px 0 30px;
	}

	.t5-tab-ico {
		width: 44px;
		height: 44px;
		margin-right: 18px;
	}

	.t5-tab-ico i {
		border-left-width: 12px;
		border-top-width: 8px;
		border-bottom-width: 8px;
	}

	.t5-tab-txt {
		font-size: 25px;
	}

	.t5-tab:hover {
		transform: none;
		box-shadow: none;
	}

	.t5-sound {
		right: 24px;
		top: 24px;

		height: 66px;
		padding: 0 26px 0 22px;
	}

	.t5-sound-ico {
		width: 30px;
		height: 30px;
		margin-right: 12px;
	}
	.t5-sound-txt {
		font-size: 21px;
	}

	.t5-stage {
		border-radius: 16px;
	}

	.t5-empty {
		padding: 150px 0;
		font-size: 25px;
	}

	.t5cta {
		padding: 120px 0 130px;
	}

	.t5cta-inner {
		max-width: none;
		padding: 0 45px;
	}

	.t5cta-txt {
		margin-bottom: 44px;
		font-size: 34px;
		line-height: 1.6;
	}

	.t5cta-btn {
		height: 96px;
		padding: 0 52px;
		font-size: 26px;
	}

	.t5cta-btn .nav-arw {
		width: 34px;
		margin-left: 16px;
	}

}


























/* =========================================================
   T6 : PR CENTER · 이벤트 당첨자 (WINNER)
   ---------------------------------------------------------
   ★ 통이미지(파란배경+타이틀+컵+빈 흰카드) 위에 표를 얹는다.
     이미지 크기는 원본 그대로(width:100%, height:auto).
     흰 카드가 시작되는 지점만 --wTop 으로 맞추면 된다.
========================================================= */

.t6 {
	background: #fff;
}


.t6s1 {
	position: relative;

	width: 100%;
	padding: 160px 0 170px;

	background: #fff;
	overflow: hidden;
}


.t6s1::before {
	content: "";

	position: absolute;
	left: 50%;
	top: -260px;
	z-index: 1;

	width: 1500px;
	height: 720px;

	transform: translateX(-50%);

	background: radial-gradient(ellipse at center, rgba(5, 32, 95, .055) 0%, rgba(255, 255, 255, 0) 70%);

	pointer-events: none;
}


.t6s1-inner {
	position: relative;
	z-index: 5;

	width: 100%;
	max-width: 1100px;   /* 통이미지 원본 폭 */

	margin: 0 auto;
	padding: 0 40px;
}


/* ---------- HEAD ---------- */

.t6s1-head {
	margin-bottom: 44px;
	text-align: center;
}


.t6s1-title {
	margin: 0;

	font-family: 'Pretendard-Bold', sans-serif;
	font-size: 50px;
	line-height: 1.2;
	letter-spacing: -.035em;

	color: #111;
}


.t6s1-eng {
	margin: 16px 0 0;

	font-family: 'FuturaCyrillicLight', sans-serif;
	font-size: 17px;
	letter-spacing: .45em;
	text-indent: .45em;

	color: #9aa0a8;
}


.t6s1-line {
	display: block;

	width: 48px;
	height: 2px;

	margin: 30px auto 0;

	background: var(--navy);
}


/* ---------- TABS ---------- */

.t6-tabs {
	display: flex;
	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 10px;

	margin-bottom: 40px;
}


.t6-tab {
	height: 50px;
	padding: 0 30px;

	border: 1px solid #d7dbe1;
	border-radius: 50px;

	background: #fff;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 16px;
	letter-spacing: -.02em;

	color: #6c727a;

	cursor: pointer;

	transition: border-color .4s ease, background .4s ease, color .4s ease, box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}


.t6-tab:hover {
	border-color: #b8bdc6;
	color: #14161a;
}


.t6-tab.is-on {
	border-color: var(--navy);
	background: var(--navy);

	font-family: 'Pretendard-SemiBold', sans-serif;
	color: #fff;

	box-shadow: 0 12px 28px rgba(5, 32, 95, .22);
}


/* ---------- PANELS ---------- */

.t6-panel {
	display: none;
}


.t6-panel.is-on {
	display: block;

	animation: t6PanelIn .7s cubic-bezier(.22, 1, .36, 1);
}


@keyframes t6PanelIn {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ---------- BOARD (통이미지 + 오버레이) ---------- */

.t6-board {
	position: relative;

	width: 100%;

	/* ★ 1st_pc.png 실측 : 흰카드 top 21.2% / 좌7% / 우5.9% / 하 95.7%
	     여기에 카드 안쪽 여백을 더해 텍스트 시작점을 잡는다 */
	--wSide: 11%;
	--wTop: 25%;
	--wBottom: 6%;
}


.t6-board-bg {
	display: block;
	width: 100%;
}


.t6-board-bg img {
	display: block;

	width: 100%;
	height: auto;   /* ★ 원본 비율 그대로 */
}


/* 흰 카드 위에 얹히는 내용 */
.t6-board-body {
	position: absolute;
	left: var(--wSide);
	right: var(--wSide);
	top: var(--wTop);
	bottom: var(--wBottom);

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


/* ---------- 안내문 ---------- */

.t6-guide {
	margin: 0 0 22px;

	font-family: 'Pretendard-Regular', sans-serif;
	font-size: 19px;
	line-height: 1.6;
	letter-spacing: -.03em;

	color: #4a4f57;

	text-align: start;
}


.t6-key {
	display: inline-block;

	min-width: 34px;
	padding: 2px 8px;

	border: 1px solid #c7ccd3;
	border-radius: 5px;

	background: #f5f6f8;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 18px;
	line-height: 1.4;

	color: #333;
	text-align: center;
	vertical-align: middle;
}


/* ---------- 표 ---------- */

.t6-cols {
	display: flex;
	gap: 20px;
}


.t6-table {
	flex: 1 1 50%;

	width: 100%;

	border-collapse: collapse;

	font-family: 'Pretendard-Regular', sans-serif;
}


.t6-table th {
	padding: 12px 8px;

	background: #dfe7f5;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 16px;
	letter-spacing: .05em;

	color: var(--navy);

	text-align: center;
}


.t6-table td {
	padding: 7px 8px;

	border-bottom: 1px solid #eceef1;

	font-size: 15px;
	letter-spacing: .01em;

	color: #14161a;

	text-align: center;
}


.t6-table tbody tr:hover td {
	background: #f6f8fb;
}


/* ---------- EMPTY ---------- */

.t6-empty {
	padding: 130px 0;

	border: 1px solid #eceef1;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 19px;
	letter-spacing: -.02em;
	text-align: center;

	color: #9aa0a8;
}


/* ---------- CTA ---------- */

.t6cta {
	position: relative;

	width: 100%;
	padding: 110px 0 120px;

	background: var(--navy);

	text-align: center;
}


.t6cta-inner {
	width: 100%;
	max-width: 1600px;

	margin: 0 auto;
	padding: 0 40px;
}


.t6cta-txt {
	margin: 0 0 34px;

	font-family: 'Pretendard-Light', sans-serif;
	font-size: 30px;
	line-height: 1.5;
	letter-spacing: -.03em;

	color: rgba(255, 255, 255, .92);
}


.t6cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 62px;
	padding: 0 40px;

	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 50px;

	background: transparent;

	font-family: 'Pretendard-SemiBold', sans-serif;
	font-size: 18px;
	letter-spacing: -.02em;

	color: #fff;

	cursor: pointer;

	transition: background .45s ease, border-color .45s ease;
}


.t6cta-btn .nav-arw {
	margin-left: 12px;
}


.t6cta-btn:hover {
	border-color: var(--blue);
	background: var(--blue);
}


/* =========================================================
   T6 : MOBILE (viewport width=750)
========================================================= */

@media screen and (max-width: 991px) {

	.t6s1 {
		padding: 130px 0 150px;
	}

	.t6s1::before {
		top: -200px;
		width: 900px;
		height: 520px;
	}

	.t6s1-inner {
		max-width: none;
		padding: 0 40px;
	}

	.t6s1-head {
		margin-bottom: 50px;
	}

	.t6s1-title {
		font-size: 58px;
	}

	.t6s1-eng {
		margin-top: 18px;
		font-size: 23px;
	}

	.t6s1-line {
		width: 60px;
		height: 3px;
		margin-top: 32px;
	}

	.t6-tabs {
		gap: 12px;
		margin-bottom: 40px;
	}

	.t6-tab {
		height: 82px;
		padding: 0 40px;

		font-size: 24px;
	}

	/* ---------- BOARD : 모바일 ---------- */

	.t6-board {
		/* ★ 1st_mo.png 실측 : 흰카드 top 12.34% / 좌우 약 5% / 하 98.7% */
		--wSide: 9%;
		--wTop: 15%;
		--wBottom: 4%;
	}

	.t6-guide {
		margin-bottom: 26px;
		font-size: 21px;
		line-height: 1.6;
	}

	.t6-key {
		min-width: 46px;
		padding: 3px 10px;
		font-size: 18px;
		border-radius: 6px;
	}

	.t6-table th {
		padding: 16px 6px;
		font-size: 23px;
	}

	.t6-table td {
		padding: 8px 6px;
		font-size: 22px;
	}

	.t6cta {
		padding: 120px 0 130px;
	}

	.t6cta-inner {
		max-width: none;
		padding: 0 45px;
	}

	.t6cta-txt {
		margin-bottom: 44px;
		font-size: 34px;
		line-height: 1.6;
	}

	.t6cta-btn {
		height: 96px;
		padding: 0 52px;
		font-size: 26px;
	}

	.t6cta-btn .nav-arw {
		width: 34px;
		margin-left: 16px;
	}

}