@charset "utf-8";
/* ============================================================
   About Webvista — Figma 241:361
   ------------------------------------------------------------
   시안은 1920 폭 기준. 화면 배율(zoom/--abk) 없이 1:1로 그린다.

   세로 자리(시안 → 이 파일)
     Why          0 ~ 1180
     History   1180 ~ 1970
     Certifications 1970 ~ 3038
     Awards    3038 ~ 4118
     Location  4118 ~ 5163
   각 구역 안의 좌표 = 시안 좌표 - 구역 시작 y
   ============================================================ */

.ab {
	position: relative;
	background: #fff;
	overflow: hidden;
}
.ab__stage {
	width: 100%;
	margin: 0 auto;

	/* 헤더(.site-header__inner)와 같은 바깥 여백 */
	--ab-pad: var(--gutter, 100px);
	/* 시안에서 220 자리에 있던 글·표는 여백에서 120 더 들어간 자리다 */
	--ab-in: calc(var(--ab-pad) + 120px);
	--ab-w: calc(100% - var(--ab-pad) * 2);
	--ab-inw: calc(100% - var(--ab-in) * 2);
}
.ab__stage section { position: relative; }

/* 등장 효과 — 스크립트가 is-in 을 붙인다. 없으면 처음부터 보인다. */
.has-ab .js-ab-up { opacity: 0; transform: translateY(28px); }
.has-ab .js-ab-up.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .7s ease var(--d, 0ms), transform .8s cubic-bezier(.2, .8, .25, 1) var(--d, 0ms);
}

/* ============================================================
   1. Why Webvista   (0 ~ 860)
   ------------------------------------------------------------
   시안이 바뀌었다(241:361) — 띠가 1180 → 860 으로 짧아지고,
   글이 가운데로 오고, 배경 그림이 오른쪽 위 크롬 물결로 바뀌었다.
   1920 좌표를 vw 로 풀어 두어 1024~1920 사이에서 시안 비율 그대로 줄어든다.
   (1024 이하는 아래 @media 에서 흐름 배치로 다시 쌓는다)
   ============================================================ */
.ab-why {
	/* 860 / 1920 = 44.792% */
	height: clamp(600px, 44.792vw, 860px);
	overflow: hidden;
	background: #05060f;
	color: #fff;
	padding: 0;
}
/* 시안의 hero 그림(image 15/16)은 피그마에서 빈 검정으로 내려왔다.
   그래서 같은 자리를 CSS 로 그린다 — 어두운 밤하늘에 푸른 빛무리가 천천히 도는 그림. */
.ab-why__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 78% 8%, #1b2360 0%, rgba(27, 35, 96, 0) 60%),
		radial-gradient(90% 70% at 12% 0%, #2a1f5e 0%, rgba(42, 31, 94, 0) 62%),
		linear-gradient(180deg, #070a1c 0%, #05060f 100%);
	/* 새 시안 배경 — 1920×860 을 그대로 내보낸 것이라 비율이 같아 cover 로 딱 맞는다 */
	background: url(../img/about/ab-why-bg-v2.jpg) no-repeat center top / cover;
}
/* 새 배경은 빛무리까지 그려져 있다 — 위에 또 덧칠하면 시안과 달라진다.
   (되살리려면 이 한 줄만 지우면 된다) */
.ab-why__bg span { display: none; }
.ab-why__bg span {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	will-change: transform;
}
.ab-why__bg span:nth-child(1) {
	left: 46%; top: -22%;
	width: 980px; height: 760px;
	background: radial-gradient(circle, rgba(70, 96, 255, .55) 0%, rgba(70, 96, 255, 0) 70%);
	animation: abDrift1 22s ease-in-out infinite alternate;
}
.ab-why__bg span:nth-child(2) {
	left: 4%; top: 6%;
	width: 760px; height: 640px;
	background: radial-gradient(circle, rgba(178, 179, 255, .34) 0%, rgba(178, 179, 255, 0) 70%);
	animation: abDrift2 27s ease-in-out infinite alternate;
}
.ab-why__bg span:nth-child(3) {
	left: 62%; top: 34%;
	width: 900px; height: 620px;
	background: radial-gradient(circle, rgba(255, 138, 190, .22) 0%, rgba(255, 138, 190, 0) 70%);
	animation: abDrift3 31s ease-in-out infinite alternate;
}
@keyframes abDrift1 { to { transform: translate3d(-130px, 60px, 0) scale(1.12); } }
@keyframes abDrift2 { to { transform: translate3d(120px, -50px, 0) scale(1.08); } }
@keyframes abDrift3 { to { transform: translate3d(-90px, -70px, 0) scale(1.15); } }

/* 아래로 갈수록 어두워지는 덮개 — 새 배경 그림에 이미 그려져 있어 끈다 */
.ab-why::after { display: none; }
.ab-why--legacy-fade::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 520px;
	z-index: 1;
	background: linear-gradient(180deg, rgba(5, 6, 15, 0) 0%, rgba(5, 6, 15, .82) 62%, #05060f 100%);
	pointer-events: none;
}
/* 배경 위에 내용. flex 로 위에서부터 쌓고, 통계판은 아래로 민다. */
.ab-why > .inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	max-width: 1480px;
	height: 100%;
	margin: 0 auto;
	/* 시안 : 리드 글 223 부터 · 로고 밑끝 794 · 띠 끝 860 */
	padding: clamp(150px, 11.615vw, 223px) 0 clamp(40px, 3.438vw, 66px);
}

/* ---------- 안내 탭 (시안 243:540) ----------
   판 밖에 두고 화면에 고정한다. 대메뉴(--header-h) 바로 아래 15px. */
.ab-tabs {
	position: fixed;
	left: 50%;
	top: calc(var(--header-h, 100px) + 15px);
	z-index: 90;
	width: auto;
	max-width: calc(100vw - 40px);
	height: 60px;
	padding: 0 clamp(20px, 5vw, 50px);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 300px;
	background: rgba(0, 0, 0, .8);
	-webkit-backdrop-filter: blur(20px);
	        backdrop-filter: blur(20px);
	transform: translateX(-50%);
}
.ab-tabs__inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 30px;
	width: 100%;
	height: 100%;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: thin;
        scrollbar-color: rgba(195, 191, 255, 0.65) rgba(255, 255, 255, .1);
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

/* 글자 꼴은 Resources 의 같은 자리 탭(.rs-nav — style.css)과 똑같이 맞춘다.
     font-size: clamp(13px, 1.278vw, 16px) · font-weight: 600 · line-height: 1.6
   색도 저쪽과 같다(흰 글씨, 고른 것·마우스 얹은 것은 #ffd8c8). */
.ab-tabs__item {
	flex: none;
	font-size: clamp(13px, 1.278vw, 16px);
	font-weight: 600;
	line-height: 1.6;
	color: #fff;
	transition: color .25s ease;
}
.ab-tabs__item:hover,
.ab-tabs__item.is-current { color: #ffd8c8; }

/* ---------- 문구 ---------- */
.ab-why__eyebrow {
	/* 새 시안에는 이 제목이 없다. 다만 이 페이지의 h1 이라 지우지 않고 감춘다
	   — 검색엔진·화면낭독기에는 그대로 남는다. */
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.ab-why__eyebrow--show {
	position: static;
	width: auto; height: auto;
	margin: 0; clip: auto;
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(30.2px, 3.355vw, 48.3px);
	font-weight: 800;
	line-height: 1.6;
	color: #fff;
	white-space: nowrap;
}
.ab-why__lead {
	margin: 0;
	/* 시안 42px */
	font-size: clamp(20px, 2.1875vw, 42px);
	font-weight: 500;
	line-height: 1.5;
	color: #c9bfff;
	text-align: center;
	white-space: nowrap;
	--d: 90ms;
}
.ab-why__lead b { font-weight: 800; }
.ab-why__sub {
	/* 시안 : 리드 밑끝 349 → 서브 373 */
	margin: clamp(12px, 1.25vw, 24px) 0 0;
	font-size: clamp(14px, 0.9375vw, 18px);
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	--d: 180ms;
}

/* ---------- 통계판 (시안 243:501) ---------- */
.ab-stats {
	display: flex;
	align-items: center;
	width: 100%;
	/* 시안 200 */
	height: clamp(140px, 10.417vw, 200px);
	margin-top: auto;
	border-radius: 8px;
	background: radial-gradient(120% 160% at 8% 12%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, .02) 100%);
	-webkit-backdrop-filter: blur(20px);
	        backdrop-filter: blur(20px);
	--d: 260ms;
}
.ab-stat {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* 시안 : 숫자 줄상자 53~116 · 이름표 119~151 */
	gap: clamp(1px, 0.156vw, 3px);
	/* 가운데로 놓으면 시안보다 4px 위에 붙는다 — 그만큼 아래로 민다 */
	padding-top: clamp(4px, 0.417vw, 8px);
	min-width: 0;
	text-align: center;
	white-space: nowrap;
}
/* 첫 칸 제외 — 왼쪽에 짧은 구분선 */
.ab-stat:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: clamp(50px, 5.208vw, 100px);
	background: rgba(255, 255, 255, .22);
	transform: translateY(-50%);
	pointer-events: none;
}
.ab-stat__num {
	display: block;
	font-family: var(--font-num, Montserrat), sans-serif;
	/* 시안 52px · 줄 간격은 시안과 같은 normal (1 로 두면 글자가 10px 위로 붙는다) */
	font-size: clamp(30px, 2.708vw, 52px);
	line-height: normal;
	color: #b2b3ff;
}
.ab-stat__num em { font-style: normal; font-weight: 600; }
.ab-stat__num i  { font-style: normal; font-weight: 100; }
.ab-stat__label {
	display: block;
	/* 시안 20px */
	font-size: clamp(13px, 1.042vw, 20px);
	font-weight: 800;
	line-height: 1.6;
	color: #B2B3FF;
}

/* ---------- 인증 기관 로고 (시안 243:549~555) ---------- */
.ab-partners {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	height: clamp(30px, 2.604vw, 50px);
	margin-top: clamp(28px, 3.49vw, 67px);
}
/* 평소 밝기를 opacity 로 직접 들고 있고, 처음 들어올 때만 애니메이션이 덧칠한다.
   예전에는 base 가 opacity:0 이고 animation … forwards 가 .5 를 붙들고 있어서,
   오버할 때 animation:none 으로 끄는 순간 붙들고 있던 값이 사라져
   방금 지나온 로고가 0 으로 꺼졌다가 딜레이(--d)를 다시 기다려 나타났다.
   이제는 애니메이션을 끄지 않고 opacity 만 오르내린다. backwards 라
   차례로 나타나는 시작 모습은 그대로다. */
.ab-partner {
	flex: none;
	max-width: none;
	width:auto;
	height: clamp(30px, 5vw, 50px);
	opacity: .5;
	object-fit: contain;
	animation: abFadeIn .8s ease var(--d) backwards;
	transition: opacity .25s ease;
}
@keyframes abFadeIn { from { opacity: 0; } to { opacity: .5; } }
.ab-partner:hover { opacity: 1; }

/* ============================================================
   2. History   (1180 ~ 1970)   시안 y - 1180
   ============================================================ */
/* 시안: 제목 1235 · 카드줄 1326 · 진행막대 1868 · 구역 끝 1970 (구역 시작 1180 기준)
   내용이 많은 해가 있어 카드 키는 480 을 최소로 두고 늘어나게 했다.        */
   .ab-hist {padding: clamp(30px, 10vw, 150px) 10px; padding-bottom: 0px;}
.ab-hist > .inner {
	position: relative;
	width: 100%;
	max-width: 1480px;
	margin: 0 auto;
}
.ab-hist__title {
	margin: 0 0 26px;
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(30.2px, 3.355vw, 48.3px);
	font-weight: 800;
	line-height: 1.6;
	color: #000;
	white-space: nowrap;
}

.ab-hist__viewport {
	position: relative;
	width: 100%;

	cursor: grab;
	padding-top: 10px;
}
.ab-hist__viewport.is-drag { cursor: grabbing; }
.ab-hist__track {
	display: flex;
	align-items: stretch;     /* 내용이 많은 해에 맞춰 다 같은 키가 된다 */
	gap: 19px;                /* 시안: 카드 360 + 간격 19 = 379 */
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}
.ab-year {
	position: relative;
	flex: none;
	width: clamp(300px, 36vw, 360px);
	min-height: 480px;
	padding: 42px 34px 34px;  /* 연도 1368 - 카드 1326 = 42 */
	border-radius: 30px;
	background: #f5f5f5;
	color: #000;
	transition: transform .45s cubic-bezier(.2, .8, .25, 1), box-shadow .45s ease;
}
.ab-year--on { background: var(--c-blue); color: #fff; }
.ab-year:hover {
	transform: translateY(-10px);
}
.ab-year__no {
	margin: 0;
	font-size: clamp(20px, 2.395vw, 30px);
	font-weight: 700;
	line-height: 1.4;
}
.ab-year__list {
	margin: 7px 0 0;          /* 첫 항목 1417 - 연도 1368 - 42(줄높이) = 7 */
	padding: 0;
	list-style: none;
}
.ab-year__list > li {
	display: flex;
	gap: 12px;                /* 월 639 → 글 671 */
	margin-top: 1em;
	font-size: clamp(13px, 1.278vw, 16px);
	line-height: 1.5;
}
.ab-year__list > li:first-child { margin-top: 0; }
.ab-year__list em {
	flex: none;
	width: 20px;
	font-style: normal;
	font-weight: 700;
}
.ab-year__list span { font-weight: 600; }
.ab-year--on .ab-year__list span { font-weight: 700; }

/* ---------- Drag 안내 (시안 339:2970) ---------- */
.ab-hist__drag {
	position: absolute;
	left: 50%;
	top: 50%;   
	transform: translate(-50%, -50%);            /* 1469 - 1326 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: clamp(160px, 15vw, 190px);
	aspect-ratio:1/1;
	margin: 0;
	border: 1px solid #eabfff;
	border-radius: 300px;
	background: radial-gradient(circle at 22% 26%, rgba(165, 239, 255, .35) 0%, rgba(110, 191, 244, .1) 62%, rgba(70, 144, 212, 0) 100%);
	-webkit-backdrop-filter: blur(40px);
	        backdrop-filter: blur(40px);
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(15px, 2vw, 27.6px);
	font-weight: 600;
	color: #fff;
	pointer-events: none;
	transition: opacity .4s ease;
}
.ab-hist__drag svg { width: 24px; height: 24px; }
.ab-hist__drag svg:first-child { animation: abNudgeL 1.8s ease-in-out infinite; }
.ab-hist__drag svg:last-child  { animation: abNudgeR 1.8s ease-in-out infinite; }
@keyframes abNudgeL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes abNudgeR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.ab-hist__viewport:hover .ab-hist__drag,
.ab-hist__viewport.is-drag .ab-hist__drag { opacity: 0; }

/* ---------- 진행 막대 (시안 244:645) ---------- */
.ab-hist__bar {
	position: relative;
	width: 100%;
	height: 6px;
	margin: 62px 0 0;   /* 1868 - 1326 - 480 = 62 */
	background: #d9d9d9;
}
.ab-hist__thumb {
	display: block;
	width: 303px;
	height: 6px;
	border-radius: 30px;
	background: #000;
	transform: translateX(var(--x, 0px));
}

/* ============================================================
   3. Certifications   (1970 ~ 3038)   시안 y - 1970
   ============================================================ */
.ab-certs { background: #fff; padding: clamp(30px, 10vw, 150px) 10px; }

/* 판 — 헤더 안쪽과 같은 폭 (시안 1920 에서 100~1820) */
.ab-certs__panel {
	
	max-width:1720px;
	height: 840px;
	margin: 0 auto;
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	background: url(../img/about/ab-certs__panel.jpg) no-repeat center center / cover;
}
.ab-certs__paint { display: none; }
/* 시안 304:1197 · 304:1198 — 구체 뒤에서 번지는 빛 */
.ab-certs__blob {
	position: absolute;
	border-radius: 120px;
	filter: blur(70px);
	pointer-events: none;
}
.ab-certs__blob--a {
	right: 100px; top: 38px;
	width: 556px; height: 652px;
	background: rgba(255, 255, 255, .5);
	animation: abFloat 11s ease-in-out infinite alternate; 
}
.ab-certs__blob--b {
	right: 50px; top: -50px;
	width: 456px; height: 499px;
	border-radius: 90px;
	background: rgba(255, 0, 132, .45);
	animation: abFloat 14s ease-in-out infinite alternate-reverse;
}
.ab-certs__orb {
	position: absolute;
	right: 7.03%;             /* 121 / 1720 */
	top: 3.69%;               /* 31 / 840 */
	width: 17.73%;            /* 305 / 1720 */
	height: auto;
	animation: abFloat 7s ease-in-out infinite alternate;
}
/* 시안 339:2977 — 구체 위에 얹히는 부메랑 마크 */
.ab-certs__mark {
	position: absolute;
	right: 19.3%;             /* 332 / 1720 */
	top: 12.26%;              /* 103 / 840 */
	width: 8.6%;              /* 148 / 1720 */
	height: auto;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25));
	animation: abFloat 7s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes abFloat { from { transform: translateY(0) rotate(0); } to { transform: translateY(-16px) rotate(4deg); } }

.ab-certs__title {
	position: absolute;
	left: 120px;              /* 판 안쪽 여백 — 시안 220 - 100 */
	top: 122px;
	margin: 0;
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(30.2px, 3.355vw, 48.3px);
	font-weight: 800;
	line-height: 1.6;
	color: #fff;
	white-space: nowrap;
}
.ab-certs__lead {
	position: absolute;
	left: 120px;
	top: 203px;
	margin: 0;
	font-size: clamp(18px, 2.555vw, 36.8px);
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	white-space: nowrap;
	--d: 90ms;
}
.ab-certs__lead b { font-weight: 800; }

/* ---------- 인증서 줄 (시안 291:536) ----------
   카드 한 장이 서류철이다.
     뒤판(Vector2) → 상장 → 앞덮개(ProjectFolder4) → 가운데 마크(Middle)
   가리키면 앞덮개가 열린 것(ProjectFolder3)으로 바뀌고 상장이 위로 올라온다. */
.ab-certs__deck {
	position: absolute;
	left: 0;
	top: 520px;
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: grab;
	touch-action: pan-y;
}
.ab-certs__deck.is-drag { cursor: grabbing; }
.ab-certs__strip {
	display: flex;
	gap: 20px;                /* 291 + 20 = 311 */
	margin: 0 0 0 -29px;
	padding: 0;
	list-style: none;
	will-change: transform;
}
.ab-cert { flex: none; width: 291px; }
.ab-cert__btn {
	display: block;
	width: 100%;

	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: zoom-in;
}
/* 서류철 (시안 291:664)
   닫혀 있을 때  : 안쪽 무늬(Vector2) + 앞덮개(ProjectFolder4) + 가운데 마크(Middle)
   가리켰을 때  : 앞덮개가 진해지고(ProjectFolder3) 상장이 아래에서 위로 올라온다 */
.ab-cert { flex: none; width: 291px; position: relative; }
.ab-cert__folder {
	position: relative;
	display: block;
	width: 100%;

	height: auto;
	aspect-ratio: 291/218;
}
.ab-cert__back {          /* 서류철 안쪽 무늬 */
	position: absolute;
	left: 4.47%;              /* 13 / 291 */
	bottom: 12.39%;           /* 27 / 218 */
	z-index: 1;
	width: 91%;
	aspect-ratio: 265/188;
	height: auto;
	border-radius: 20px;
	object-fit: cover;
}
.ab-cert__front,
.ab-cert__open {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	width: 100%;
	max-width: 291px;
	height: auto; 
	aspect-ratio: 291/218;

	z-index:5;
}
.ab-cert__open { opacity: 0; transition: opacity .35s ease; }
/* 상장 — 평소엔 서류철 안에 잠겨 있다 */
.ab-cert__paper {
	position: absolute;
	left: 4.47%;              /* 13 / 291 */
	bottom: 12.39%;           /* 27 / 218 */
	z-index: 2;
	width: 91%;
	aspect-ratio: 605/881;
	border-radius: 16px;
	object-fit: contain;      /* 실제 인증서 이미지 비율이 제각각이라, cover 로 채우면 좌우/아래가 잘렸다. 전체가 다 보이게 줄여서 넣는다 */
	object-position: center top;
	background: #fff;
	box-shadow: 0 18px 34px rgba(20, 20, 60, .35);
	opacity: 0;
	transition: height .55s cubic-bezier(.2, .8, .25, 1),
	            opacity .3s ease .05s,
	            box-shadow .4s ease;
}
.ab-cert__badge {         /* 시안 291:618 middle — 여백 제거 후 실제 마크 크기 */
	position: absolute;
	right:9%;
	top:-5%;
	z-index:5;
	width:clamp(49px, 6vw, 69px);
	aspect-ratio: 39/54;
	height: auto !important;
	transition: opacity .3s ease;
	pointer-events: none;
}
/* 확대 단추 — 가리켰을 때만 */
.ab-zoombtn {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(20, 18, 30, .78);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	color: #fff;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.7);
	transition: opacity .28s ease, transform .34s cubic-bezier(.2, .8, .25, 1);
	pointer-events: none;
}
.ab-zoombtn svg { width: 26px; height: 26px; }
/* 인증서 호버 오픈 — 실제 호버 가능한 환경만 (터치 sticky hover 방지) */ 
@media (hover: hover) and (pointer: fine) {
	.ab-certs__deck:not(.is-drag) .ab-cert__btn:hover .ab-cert__cap { color: #fff; }
	.ab-certs__deck:not(.is-drag) .ab-cert__btn:hover { position: relative; z-index: 5; }
	.ab-certs__deck:not(.is-drag) .ab-cert__btn:hover .ab-cert__paper {
		height: auto;            /* 시안: 상장 265x385 가 서류철 위로 194 만큼 솟는다 */
		opacity: 1;
		z-index: 5;
		box-shadow: 0 26px 54px rgba(20, 20, 60, .45);
	}
	.ab-certs__deck:not(.is-drag) .ab-cert__btn:hover .ab-cert__front { opacity: 0; }
	.ab-certs__deck:not(.is-drag) .ab-cert__btn:hover .ab-cert__open  { opacity: 1; }
	.ab-certs__deck:not(.is-drag) .ab-cert__btn:hover .ab-cert__badge { opacity: 0; }
	.ab-certs__deck:not(.is-drag) .ab-cert__btn:hover .ab-zoombtn {
		opacity: 1;
		/* 서류철 가운데에서 위로 끌어올린 양. 186 이면 상장 윗머리에 너무 붙어
		   40px 내렸다. */
		transform: translate(-50%, -146px) scale(1);
	}
}
.ab-cert__cap {
	display: block;
	margin-top: 14px;
	font-size: clamp(13px, 1.358vw, 17px);
	font-weight:700;
	line-height: 1.6;
	color: #B2B3FF;
	position: absolute;
	width: 100%;
	z-index: 6;
	bottom: 13%;
	padding: 1em;
	padding-left: 2em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================
   4. Awards   (3038 ~ 4118)   시안 y - 3038
   ============================================================ */
.ab-awards {
	height: 1080px;
	overflow: hidden;
	background: #101420;
	color: #fff;
	padding: clamp(30px, 10vw, 150px) 10px;
}
/* 시안 293:887 의 BLUE HUE — 1920 기준 vw 로 비율 유지 */
.ab-awards__hue {
	position: absolute;
	left: 30%;
	top: -18.91vw;            /* -363 / 1920 */
	width: 83.96vw;           /* 1612 / 1920 */
	height: 63.7vw;           /* 1223 / 1920 */
	transform: translateX(-50%);
	background:
		radial-gradient(46% 40% at 50% 62%, rgba(80, 140, 255, .72) 0%, rgba(49, 107, 255, .38) 42%, rgba(26, 73, 194, 0) 72%),
		conic-gradient(from 90deg at 50% 62%, rgba(100, 150, 255, .32) 0deg, rgba(80, 140, 255, .55) 8deg, rgba(49, 107, 255, .28) 60deg, rgba(7, 11, 22, 0) 190deg, rgba(7, 11, 22, 0) 330deg, rgba(80, 130, 230, .22) 352deg, rgba(100, 150, 255, .32) 360deg);
	filter: blur(1.56vw);     /* 30 / 1920 */
	pointer-events: none;
}
.ab-awards__prism {
	position: absolute;
	left: -42px;
	top: 400px;
	width: 636px;
	height: 813px;
	z-index: 2;
	animation: abFloat 9s ease-in-out infinite alternate;
	pointer-events: none;
}
.ab-awards__title {
	position: absolute;
	left: var(--ab-in, 220px);
	top: 156px;               /* 3194 - 3038 */
	margin: 0;
	z-index: 2;
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(30.2px, 3.355vw, 48.3px);
	font-weight: 800;
	line-height: 1.6;
	color: #fff;
	white-space: nowrap;
}
.ab-awards__lead {
	position: absolute;
	left: var(--ab-in, 220px);
	top: 237px;
	margin: 0;
	z-index: 2; 
	font-size: clamp(18px, 2.555vw, 32px);
	font-weight: 500;
	line-height: 1.5;  
	color: #fff;

	--d: 90ms;
	max-width:34vw;
}
.ab-awards__lead b { font-weight: 800; }

/* 시안 293:378 계열 — 280x400 카드가 세 줄로 나뉘어 천천히 위로 흐른다.
   줄은 x 1100 / 1400 / 1700 (시안의 50%+140 · +440 · +740), 줄마다 시작 높이가 다르다. */
.ab-awards__cols {
	position: absolute;
	/* 최대 1720 판의 오른쪽 — 화면이 더 넓으면 가운데 1720 기준, 좁으면 gutter 유지 */
	right: max(var(--ab-pad, 100px), calc((100% - 1720px) / 2));
	left: auto;
	top: 0;
	z-index: 2;
	display: flex;
	gap: 20px;
	height: 1080px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
	        mask-image: linear-gradient(180deg, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%);
}
.ab-awards__col {
	flex: none;
	width: 280px;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateY(var(--off, 0px));
	animation: abRoll calc(var(--n, 10) * 3.4s) linear infinite;
	will-change: transform;
}
.ab-awards__col:nth-child(2) { animation-direction: reverse; }
@keyframes abRoll {
	from { transform: translateY(var(--off, 0px)); }
	to   { transform: translateY(calc(var(--off, 0px) - var(--n, 10) * 420px)); }
}
/* 마우스를 얹으면 멈춘다 */
.ab-awards__cols:hover .ab-awards__col { animation-play-state: paused; }
/* 예전에는 :focus-within 이었다. 그런데 상장을 눌러 크게 보기를 연 뒤 닫으면
   (제자리로 돌아가라고) 눌렀던 단추에 다시 초점을 주는데, 그 초점 때문에
   롤링이 멈춘 채로 남아 있었다. 아무 데나 한 번 더 눌러야 다시 돌았다.
   :focus-visible 은 키보드로 옮겨 온 초점에만 켜지므로, 키보드 사용자는
   여전히 멈춘 화면에서 살펴볼 수 있고 마우스로 닫았을 때는 바로 다시 돈다.
   :has() 를 모르는 브라우저에서 위 :hover 규칙까지 함께 버려지지 않도록 줄을 나눈다. */
.ab-awards__cols:has(:focus-visible) .ab-awards__col { animation-play-state: paused; }

.ab-award { margin: 0 0 20px; }        /* 400 + 20 = 420 */
.ab-award__btn {
	position: relative;
	display: block;
	width: 280px;
	height: 400px;
	padding: 0;
	overflow: hidden;
	border: 1px solid #eabfff;
	border-radius: 8px;
	background:
		radial-gradient(60% 45% at 15% 21%, rgba(165, 239, 255, .20) 0%, rgba(110, 191, 244, .05) 77%, rgba(70, 144, 212, 0) 100%),
		rgba(255, 255, 255, .04);
	cursor: zoom-in;
	transition: border-color .35s ease, box-shadow .35s ease;
}
/* portfolio_list 카드와 같은 노이즈 오버레이 (시안 293:505) */
.ab-award__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	background: url(../img/work/Rectangle.jpg) center / cover no-repeat;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}
.ab-award__shot {
	position: absolute;
	left: 35px;
	top: 26px;
	display: block;
	width: 210px;
	height: 287px;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}
.ab-award__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .8, .25, 1), filter .4s ease;
}
.ab-award__ttl {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 327px;
	z-index: 1;
	font-size: clamp(14px, 2vw, 20.7px);
	font-weight: 800;
	line-height: 1.6;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ab-award__sub {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 357px;
	z-index: 1;
	font-size: clamp(13px, 1.2vw, 16.1px);
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(255, 255, 255, .72);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* hover 층 — 돋보기·텍스트를 flex 가운데 정렬 (기본 ttl/sub 자리는 그대로) */
.ab-award__over {
	position: absolute;
	inset: 0;
	z-index: 5;  
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	padding: 20px;
	border-radius: inherit;
	opacity: 0;
	visibility: hidden;
	
	pointer-events: none;
	transition: opacity .35s ease, visibility .35s;
}
.ab-award__zoom {
	flex: none;
	width: clamp(50px, 26%, 74px);
	height: auto;
	aspect-ratio: 1;
	margin: 0 0 8px;
	border-radius: 50%;
	overflow: hidden;
	transform: scale(.5) rotate(-40deg);
	box-shadow: 0 0 20px rgba(0, 0, 0, .5); 
	transition: transform .45s cubic-bezier(.2, 1.3, .4, 1) .05s;
}
.ab-award__over-ttl,
.ab-award__over-sub {
	display: block;
	max-width: 100%;
	margin: 0;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ab-award__over-ttl {
	font-size: clamp(14px, 2vw, 20.7px);
	font-weight: 800;
	line-height: 1.4;
	color: #fff;
}
.ab-award__over-sub {
	font-size: clamp(13px, 1.2vw, 16.1px);
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;
	color: rgba(255, 255, 255, .85);
}
.ab-award__btn:hover::before { opacity: 1; }
.ab-award__btn:hover .ab-award__over { opacity: 1; visibility: visible; }
.ab-award__btn:hover .ab-award__shot img {
	transform: scale(1.12);
	filter: blur(22px) brightness(1.15);
}
.ab-award__btn:hover .ab-award__zoom {
	transform: scale(1) rotate(0);
}
.ab-award__btn:hover {
	border-color: #eabfff;
	box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
}

/* 시안 297:247 — 프리즘 위 로고 */
.ab-awards__logo {
	position: absolute;
	left: 230px;
	top: 594px;
	z-index: 3;
	width: 179px;
	height: 146px;
	filter: brightness(2.4) drop-shadow(0 4px 16px rgba(0, 0, 0, .35));
	pointer-events: none;
}

/* 시안 303:1087 Gradient 12 — ab-gem.svg 한 장으로 교체 */
.ab-gem {
	position: absolute;
	left: 446px;
	top: 705px;
	z-index: 1;
	width: 265px;
	height: 265px;
	max-width: none;
	object-fit: contain;
	pointer-events: none;
	animation: abFloat 13s ease-in-out infinite alternate;
}

/* ============================================================
   5. Location   (4118 ~ 5163)   시안 y - 4118
   ============================================================ */
.ab-loc {

	padding: clamp(30px, 10vw, 120px) 10px;
	background: #fff;
}
.ab-loc__title {
	position: relative;
	width: 100%;
	max-width: 1720px;
	margin: 0 auto 26px;
	padding: 0;
	z-index: 2;
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(30.2px, 3.355vw, 48.3px);
	font-weight: 800;
	line-height: 1.6;
	color: #000;
	white-space: nowrap;
}
/* 시안: 지도 1140 + 간격 10 + 카드 570 = 1720 */
.ab-loc > .inner {
	display: flex;
	align-items: stretch;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 1720px;
	margin: 0 auto;
}
.ab-loc__map {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	/* 700 에서 5% 줄였다. 오른쪽 주소 칸(.ab-loc__card)은 .inner 가
	   align-items: stretch 라 이 높이를 그대로 따라온다 — 따로 안 건드린다. */
	height: 665px;
	border-radius: 30px;
	overflow: hidden;
	background: #eef1f6;
}
/* 구글 지도 — 지점마다 한 장씩 깔고 켜진 것만 보인다 */
.ab-loc__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility 0s linear .45s;
}
.ab-loc__frame.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity .45s ease, visibility 0s;
}
.ab-loc__big {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border-radius: 300px;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 8px 24px rgba(20, 20, 60, .18);
	font-size: clamp(13px, 1.198vw, 17.3px);
	font-weight: 700;
	color: #111;
	transition: background .25s ease, transform .25s ease;
}
.ab-loc__big svg { width: 18px; height: 18px; }
.ab-loc__big:hover { background: #fff; transform: translateY(-2px); }

.ab-loc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	box-sizing: border-box;
	flex: none;
	width:40%;
	max-width: 570px;
	padding: 45px 45px 40px;
	border-radius: 30px;
	background: #f5f5f5;
	box-shadow: 0 24px 60px rgba(20, 20, 60, .12);
}
.ab-loc__tabs {
	position: relative;
	display: flex;
	flex: none;
	width: 100%;
	height: 65px;
	padding: 10px 15px;
	border-radius: 300px;
	background: #fff;
}
.ab-loc__pill {
	position: absolute;
	left: 15px;
	top: 10px;
	width: calc((100% - 30px) / 2);
	height: 45px;
	border-radius: 300px;
	background: var(--c-blue);
	transition: transform .4s cubic-bezier(.2, .8, .25, 1);
	transform: translateX(var(--x, 0px));
}
.ab-loc__tab {
	position: relative;
	z-index: 1;
	flex: 1;
	border: 0;
	background: none;
	font-size: clamp(14px, 1.358vw, 19.5px);
	font-weight: 800;
	line-height: 1.6;
	color: #000;
	cursor: pointer;
	transition: color .3s ease;
}
.ab-loc__tab.is-on { color: #fff; }

.ab-loc__body {
	display: none;
	flex: 1 1 auto;
	width: 100%;
	margin-top: clamp(20px, 5vw, 50px);
}
.ab-loc__body.is-on {
	display: block;
	animation: abLocBodyIn .45s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes abLocBodyIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.ab-loc__eyebrow {
	margin: 0;
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(14px, 1.25vw, 18px);
	font-weight: 600;
	color: var(--c-blue);
	letter-spacing: .02em;
}
.ab-loc__name {
	margin: 4px 0 0;
	font-size: clamp(22px, 2.222vw, 32px);
	font-weight: 800;
	line-height: 1.4;
	color: #000;
}
.ab-loc__addr {
	margin: 12px 0 0;
	padding-bottom: clamp(15px, 3vw, 30px);
	margin-bottom: clamp(15px, 3vw, 30px);
	border-bottom: 1px solid #000;
	font-size: clamp(15px, 2vw, 24px);
	font-weight: 800;
	line-height: 1.4;
	color: #000;
}
.ab-loc__row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: clamp(5px, 1.2vw, 1em);
	font-family: var(--font-num, Montserrat), sans-serif;
	font-size: clamp(14px, 1.438vw, 18px);
	font-weight: 500;
	color: #000;
}
.ab-loc__row a { color: inherit; }
.ab-loc__row a:hover { color: var(--c-blue); }
.ab-loc__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: clamp(40px, 5vw, 50px);
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 16px rgba(20, 20, 60, .08);
}
.ab-loc__ico img {
	display: block;
	width: clamp(20px, 2.5vw, 24px);
	height: auto;
	aspect-ratio: 1;
	max-width: none;
}

/* ============================================================
   인증서·상장 크게 보기
   ============================================================ */
.ab-zoom {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
}
.ab-zoom[hidden] { display: none; }
.ab-zoom__dim {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(0, 0, 0, .82);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	cursor: zoom-out;
	animation: abFade .25s ease both;
}
@keyframes abFade { from { opacity: 0; } }
.ab-zoom__box {
	position: relative;
	z-index: 1;
	max-width: min(500px, 90vw);
	max-height: min(500px, 86vh);
	margin: 0;
	text-align: center;
	animation: abPop .32s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes abPop { from { opacity: 0; transform: scale(.94) translateY(14px); } }
.ab-zoom__box img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(500px, 90vw);
	max-height: min(500px, 74vh);
	margin: 0 auto;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.ab-zoom__box figcaption {
	margin-top: 18px;
	font-size: clamp(14px, 1.278vw, 18.4px);
	font-weight: 600;
	color: #fff;
}
.ab-zoom__x {
	position: absolute;
	right: 36px;
	top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
}
.ab-zoom__x svg { width: 22px; height: 22px; }
.ab-zoom__x:hover { background: rgba(255, 255, 255, .18); }

/* ============================================================
   Awards — 1700 이하: 왼쪽(타이틀·리드·장식) 위 / 카드 줄 아래
   세로 롤링(abRoll)은 유지. 1024 이하는 아래 좁은 화면 규칙이 덮어씀.
   ============================================================ */
@media (max-width: 1700px) {
	.ab-awards {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	/* 위: 타이틀·리드 (문서 흐름) */
	.ab-awards__title {
		position: relative; 
		left: auto;
		top: auto;
		margin: 0;
		padding: 0 max(var(--ab-pad, 100px), 24px);
		max-width: 100%;
		white-space: normal;
	}
	.ab-awards__lead {
		position: relative;
		left: auto;
		top: auto;
		margin: 14px 0 0;
		padding: 0 max(var(--ab-pad, 100px), 24px);
		max-width:30em;
		white-space: normal; 
	}

	/* 장식 — 오른쪽 클러스터, vw 로 비율 유지 (한 단 축소) */
	.ab-awards__hue {
		left: 55%;
		top: -14vw;
		width: 90vw;
		height: 55vw;
		filter: blur(1.4vw);
	}
	.ab-awards__prism {
		left: auto;
		right: max(0px, calc((100% - 1480px) / 2));
		top: 20px;
		bottom: auto;
		width: clamp(260px, 28vw, 420px);
		height: auto;
		max-height: 480px;
		object-fit: contain;
	}
	.ab-awards__logo {
		left: auto;
		right: calc(max(0px, (100% - 1480px) / 2) + clamp(90px, 10vw, 150px));
		top: 150px;
		width: clamp(80px, 8vw, 110px);
		height: auto;
	}
	.ab-gem {
		left: auto;
		right: calc(max(0px, (100% - 1480px) / 2) + clamp(8px, 1.5vw, 28px));
		top: 200px;
		width: clamp(100px, 10vw, 140px);
		height: auto;
		aspect-ratio: 1;
	}

	/* 아래: 세 줄 롤링 — 높이·overflow·mask 유지로 모션 그대로 */
	.ab-awards__cols {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		width: 100%;
		max-width: 100%;
		height: 900px;
		margin: 56px auto 0;
		justify-content: center;
	}
}

/* ============================================================
   좁은 화면 — 판을 통째로 줄이면 글자가 너무 작아지므로 흐름으로 다시 쌓는다
   ============================================================ */
@media (max-width: 1024px) {
	.ab__stage { width: auto; }

	.ab-why { height: auto; padding: clamp(160px, 22vw, 220px) 10px clamp(80px, 10vw, 90px); }
	.ab-why > .inner {
		height: auto;
		padding: 0px;
	}

	.ab-why__eyebrow, .ab-why__lead, .ab-why__sub {
		white-space: normal;
	}
	.ab-why__lead { margin-top: 18px; }
	.ab-why__sub { margin-top: 16px; }
	.ab-stats {
		height: auto;
		margin-top: 40px;
		padding: 30px 20px;
		flex-wrap: wrap;
		gap:20px;
		justify-content: center;
	}
	.ab-stat { gap: 8px; flex: 1 1 31%; }
	.ab-stat:not(:first-child)::before { display: none; }
	.ab-partners {
		/* 글이 가운데로 바뀌었으니 로고도 가운데로 모은다 */
		justify-content: center;
		height: auto;
		margin-top: 34px;
		gap: 18px;
	}
	.ab-partner { opacity: .5; animation: none; }

	.ab-hist__title, .ab-hist__viewport, .ab-hist__bar,
	.ab-certs__panel, .ab-certs__title, .ab-certs__lead, .ab-certs__deck,
	.ab-awards__title, .ab-awards__lead, .ab-awards__cols,
	.ab-loc__tabs, .ab-loc__body {
		/* static 으로 두면 z-index 가 죽어 .ab-why__bg(positioned) 아래로 글이 깔린다 */
		position: relative;
		left: auto; top: auto;
		width: auto;
		max-width: 100%;
		transform: none;
		white-space: normal;
	}

	.ab-awards__title {padding: 0px 24px;}

	.ab-hist__title { margin: 0 0 26px; }
	.ab-hist__viewport { height: auto; overflow-x: auto; }
	.ab-hist__bar { display: none; }
	.ab-hist__track { padding: 0; height: auto; }

	
	.ab-certs__panel { height: auto; padding: 50px 24px; }
	
	.ab-certs__panel { background: linear-gradient(140deg, #6f7bff 0%, #a06ce0 55%, #f2f2f7 100%); }

	.ab-certs__lead { margin-top: 14px; }
	.ab-certs__deck {
		gap: 14px;
		padding-top: clamp(100px, 30vw, 250px);
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x;           /* JS 드래그 대신 네이티브 가로 스크롤 */
		overscroll-behavior-x: contain;
		cursor: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.ab-certs__strip {
		margin-left: 0;
		gap: 14px;
		transform: none !important;    /* PC용 translate 드래그 해제 */
		will-change: auto;
	}
	.ab-cert { width:40vw; max-width: 260px; }   
	 

	/* 장식은 숨기지 않고 vw 비율로 축소 — 1700 규칙 위에 좁은 화면 보정 */
	.ab-awards__hue {
		left: 60%;
		top: -12vw;
		width: 100vw;
		height: 60vw;
		filter: blur(1.6vw);
	}
	.ab-awards__prism {
		display: none; /* 20분 전: 1024 이하 숨김 */
	}
	.ab-awards__logo,
	.ab-gem {
		display: none; /* 20분 전: 1024 이하 숨김 */
	}

	.ab-awards__lead { margin-top: 14px; padding: 0px 24px;}
	/* 카드는 시안 280×400 유지 — 칸이 좁아져도 줄어들지 않고 가로로 민다 */
	.ab-awards__cols {
		margin-top: 34px; 
		gap: clamp(5px, 3vw, 20px);
		width: 100%;
		height: clamp(600px, 80vw, 800px);

		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		padding-bottom: 8px;
	}
	.ab-award__shot { width:100%; position: relative; left:auto; top:auto; height: auto; margin-bottom: 1em; aspect-ratio: 210/287; }
	.ab-award__ttl {position: relative; inset:auto;}
	.ab-award__sub {position: relative; inset:auto;}
	.ab-awards__col {
		flex: none;
		width:calc((100% - (clamp(5px, 3vw, 20px) * 2)) / 3);
		transform: none;
		animation: none;
	}
	.ab-awards__col li[aria-hidden="true"] { display: none; }
	.ab-award { margin-bottom: 14px; }
	.ab-award__btn {
		width: 100%;

		height: auto;
		display: flex;
		flex-direction: column;
		padding: clamp(5px, 2vw, 20px);
		min-height: 100%;
		overflow: hidden;
	}


	.ab-loc__title { max-width: none; margin: 0 0 26px; white-space: normal; }
	.ab-loc > .inner {
		flex-direction: column;
		max-width: none;
		gap: 20px;
	}
	.ab-loc__map { position: relative; width: 100%; height: 320px; }
	.ab-loc__big { left: 12px; bottom: 12px; height: 38px; padding: 0 14px; }
	.ab-loc__card { width: 100%; max-width:none; height: auto; padding: 24px; }
	.ab-loc__tabs { width: 100%; }

	.ab-loc__body {
		display: none;
		margin-top: 24px;
		animation: none;
	}
	.ab-loc__body.is-on { display: block; }

}

@media (prefers-reduced-motion: reduce) {
	.ab-certs__orb, .ab-awards__prism, .ab-hist__drag svg { animation: none; }
	.has-ab .js-ab-up { opacity: 1; transform: none; }
	.ab-awards__col { animation: none; }
	.ab-why__bg span { animation: none; }
	.ab-partner { opacity: .5; animation: none; }
}

/* ---------- 푸터의 둥근 윗모서리가 보이게 ----------
   .site-footer 는 어느 쪽이든 윗모서리가 50px 둥글다(style.css).
   그런데 이 페이지는 $page_theme='dark' 라 body 가 #141415 인데
   푸터가 #111 이라, 모서리가 파인 자리에 거의 같은 어둠이 비쳐
   각진 것처럼 보였다. 본문(.ab)이 어차피 흰 바탕이므로
   body 바탕도 흰색으로 두어 다른 페이지와 같게 만든다.
   글자색(is-dark 의 color)은 건드리지 않는다. */
body.is-dark { background: #fff; }


/* ============================================================
   휠 한 번에 구역 하나씩(main-snap.js) — Awards 를 한 화면에 담는다
   ------------------------------------------------------------
   안내 탭(.rs-nav)이 화면 위에 붙박여 있어, 구역이 실제로 보이는 자리는
   「화면 높이 − 탭 아랫선」 이다. 그 값을 --ab-room 으로 둔다.
   Awards 는 원래 1431px 이라 두 화면을 넘겼다. 카드 줄은 어차피 위로
   흘러가는 마키라 조금 잘려도 내용이 사라지지 않는다 — 제목·설명을 먼저
   앉히고 **남는 자리 전부**를 카드 줄에 준다.
   1024 이하(모바일·태블릿)는 넘기기 자체를 안 하므로 건드리지 않는다.
   ============================================================ */
@media (min-width: 1025px) {
	:root {
		--ab-room: calc(100vh - var(--header-h, 100px) - 5px - clamp(44px, 6vw, 60px));
	}

	/* Awards 는 안내 탭 아래가 아니라 **대메뉴 바로 밑**에 붙여 세운다
	   (data-snap-flush). 그러니 높이도 탭 몫을 빼지 않고 대메뉴만 뺀다 —
	   그래야 위도 아래도 빈 데 없이 한 화면을 꽉 채운다. 탭 띠는 그 위에 겹친다. */
	.ab-awards {
		height: calc(100vh - var(--header-h, 100px));
		min-height: 560px;
		/* 탭 띠가 겹치는 자리(띠 아랫선까지)만큼은 비워 둬야 제목이 안 가린다 */
		padding-top: calc(5px + clamp(44px, 6vw, 60px) + clamp(16px, 2.5vh, 34px));
		padding-bottom: clamp(16px, 3vh, 44px);
	}

	/* 페이드(마스크)도 상자가 낮아진 만큼 같이 줄인다 —
	   110px 을 그대로 두면 낮은 화면에서 위아래가 거의 다 흐려진다. */
	.ab-awards__cols {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(36px, 11%, 110px), #000 calc(100% - clamp(36px, 11%, 110px)), transparent 100%);
		        mask-image: linear-gradient(180deg, transparent 0, #000 clamp(36px, 11%, 110px), #000 calc(100% - clamp(36px, 11%, 110px)), transparent 100%);
	}
}

/* 1700 이하 — 제목·설명이 흐름에 있고 카드 줄이 그 아래다. 남는 자리를 준다. */
@media (min-width: 1025px) and (max-width: 1700px) {
	.ab-awards__cols {
		height: auto;
		flex: 1 1 auto;
		min-height: 0;
		margin-top: clamp(14px, 2.5vh, 44px);
	}
}

/* 1701 이상 — 제목·설명이 왼쪽에 못박혀 있고 카드 줄은 오른쪽 기둥이다.
   위아래를 상자에 붙여 높이를 따라가게 한다.
   제목의 top:156 은 상자가 1080 이던 시절 값이라, 상자를 한 화면으로 줄인 지금은
   위가 훵하게 빈다(사용자 지적). 좁은 화면 쪽 여백(44)과 같은 자리로 끌어올린다. */
@media (min-width: 1701px) {
	.ab-awards__cols {
		top: 0;
		bottom: 0;
		height: auto;
	}
	.ab-awards__title { top: calc(5px + clamp(44px, 6vw, 60px) + clamp(16px, 2.5vh, 34px)); }
	.ab-awards__lead  { top: calc(5px + clamp(44px, 6vw, 60px) + clamp(16px, 2.5vh, 34px) + 95px); }
}


/* ============================================================
   Certifications — 끌어서 볼 수 있다는 표시
   ------------------------------------------------------------
   History 는 한가운데 큰 동그라미에 「Drag」 라고 띄운다. 여기는
   상장을 가리면 안 되므로 **아래쪽 가느다란 띠**로 다르게 만들었다.
     · 왼쪽 갈매기 — 「끌어서 보기」 — 오른쪽 갈매기
     · 그 아래 진행 줄이 지금 어디쯤인지 알려 준다 (about-new.js 가 민다)
   끌기 시작하면 글자는 옅어지고 진행 줄만 남는다.
   ============================================================ */
.ab-certs__hint {
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	width: min(320px, 60%);
	margin: 0;
	transform: translateX(-50%);
	pointer-events: none;
}
.ab-certs__hint b {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 18px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 300px;
	background: rgba(18, 16, 40, .34);
	-webkit-backdrop-filter: blur(14px);
	        backdrop-filter: blur(14px);
	color: #fff;
	font-size: clamp(12px, .95vw, 14px);
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	transition: opacity .35s ease;
}
.ab-certs__hint svg { width: 15px; height: 15px; flex: none; }
.ab-certs__hint svg:first-child { animation: abCertNudgeL 1.7s ease-in-out infinite; }
.ab-certs__hint svg:last-child  { animation: abCertNudgeR 1.7s ease-in-out infinite; }
@keyframes abCertNudgeL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes abCertNudgeR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* 진행 줄 — 얼마나 왔는지 */
.ab-certs__hint i {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 300px;
	background: rgba(255, 255, 255, .22);
	overflow: hidden;
}
.ab-certs__hint i::after {
	content: "";
	display: block;
	width: var(--seen, 18%);
	height: 100%;
	border-radius: 300px;
	background: linear-gradient(90deg, #ed35a4, #6136d9);
	transition: width .12s linear;
}
/* 끌기 시작하면 글자는 물러나고 진행 줄만 남긴다 */
.ab-certs__deck.is-drag ~ .ab-certs__hint b,
.ab-certs__deck:hover ~ .ab-certs__hint b { opacity: .35; }

@media (prefers-reduced-motion: reduce) {
	.ab-certs__hint svg { animation: none; }
}
@media (max-width: 1024px) {
	.ab-certs__hint { display: none; }   /* 좁은 화면은 손가락으로 쓸면 된다 */
}


/* ============================================================
   인증서 — 손이 닿는 자리를 카드 한 칸으로 묶는다
   ------------------------------------------------------------
   상장 그림(.ab-cert__paper)은 아래에서 위로 올라오는 연출 때문에
   카드보다 **위로 195px 더 크다**. 넘쳐 나온 자식도 부모의 :hover 를
   켜므로, 배너 한복판에 마우스를 올려도 카드가 열렸다(사용자 지적).
   상장은 보여 주기만 하는 그림이니 손을 안 받게 한다 —
   그러면 닿는 자리가 서류철 한 칸(291×218)으로 딱 떨어진다.
   ============================================================ */
.ab-cert__paper { pointer-events: none; }   /* ab-cert__paper 는 손을 안 받는다 */