/* ============================================================
 * history2 (걸어온 길 - 연대기 v2)
 * Figma node 6662:580 (PC) / 6795:2 (Mobile)
 * Reference motion : simpac.com/about/history
 * Desktop first : 1920 design baseline, 1440 down ↓ 80%
 * ============================================================ */

@font-face {font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("/font/Inter-Thin.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("/font/Inter-ThinItalic.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("/font/Inter-ExtraLight.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("/font/Inter-ExtraLightItalic.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("/font/Inter-Light.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("/font/Inter-LightItalic.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/font/Inter-Regular.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/font/Inter-Italic.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/font/Inter-Medium.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("/font/Inter-MediumItalic.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/font/Inter-SemiBold.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("/font/Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/font/Inter-Bold.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("/font/Inter-BoldItalic.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/font/Inter-ExtraBold.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("/font/Inter-ExtraBoldItalic.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("/font/Inter-Black.woff2") format("woff2"); }
@font-face {font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("/font/Inter-BlackItalic.woff2") format("woff2"); }


:root {
	--h2-color-black: #000;
	--h2-color-white: #fff;
	--h2-color-dim: rgba(0,0,0,.4);
	--h2-color-mute: #788187;
	--h2-color-bg: #b3b8bc;
	--h2-color-tit: #05141f;
	--h2-color-submenu: rgba(0,0,0,.5);
	--h2-font-main: 'Pretendard', sans-serif;
	--h2-font-num: 'Inter', 'Pretendard', sans-serif;
	--h2-ease: cubic-bezier(.22,1,.36,1);
	--h2-trans: all .8s var(--h2-ease);
	--h2-container: 112.5rem;
}

#history2 {position:relative; width:100%; color:var(--h2-color-black); font-family:var(--h2-font-main);}
.history2 *, .history2 *::before, .history2 *::after {box-sizing:border-box;}
.history2 img {display:block; max-width:100%;}

/* ------------------------------------------------------------
 * MAIN wrapper
 * ------------------------------------------------------------ */
.history2__main {display:flex; flex-direction:column; gap:6.875rem; align-items:center; padding-bottom:9.375rem;}

/* ------------------------------------------------------------
 * SECTION (hero runway at top : 100lvh)
 * ------------------------------------------------------------ */
.history2__sec {position:relative; width:100%; display:flex; flex-direction:column; align-items:center; padding-top:100lvh;}

/* ============================================================
 * CONTENT (title left + items right)
 * ============================================================ */
.history2__cont {position:relative; width:100%; padding:6.875rem 0 0; max-width: 1920px; margin: 0 auto;}
.history2__cont-inner {position:relative; /* display:flex; gap:10.625rem; align-items:flex-start; */ margin:0 auto; padding:0 3.125rem;}

/* ----- Sticky title (left) ----- */
.history2__title {position:sticky; top:7rem; flex:0 0 auto; width:27.5rem; display:flex; flex-direction:column; gap:1rem; z-index: 1; min-height: 20.25rem;}
.history2__title-label {display:flex; flex-direction:column; gap:0.5rem;}
.history2__title-part {display:block; font-family:var(--h2-font-num); font-size:0.75rem; font-weight:400; line-height:1.33; color:var(--h2-color-mute); letter-spacing:0;}
.history2__title-year {display:block; font-family:var(--h2-font-main); font-size:1.75rem; font-weight:600; line-height:1.29; color:var(--h2-color-tit); letter-spacing:0;}
.history2__title-thumb-slot {width: 100%; aspect-ratio:440 / 247.5; visibility:hidden; position: absolute; top: 0; left: 0;}

/* 1) MORPH (default) */
.history2__title-thumb {position:fixed; top:0; left:0; width:100vw; height:100lvh; overflow:hidden; border-radius:0; z-index:5; pointer-events:none; opacity:0; visibility:hidden; will-change:top, left, width, height, border-radius;}
.history2__title-thumb.is-active {opacity:1; visibility:visible;}

/* 2) SETTLED — thumb stays at its natural DOM position (below the label), no reorder, no slot hide */
.history2__title-thumb.is-settled {position:relative; top:auto; left:auto; width:100%; height:auto; aspect-ratio:440 / 247.5; opacity:1; visibility:visible; margin-top: 1rem;}
.history2__title-thumb.is-settled .history2__title-thumb-text {opacity: 0;}
.history2__title-thumb img {width:100%; height:100%; object-fit:cover;}
.history2__title-thumb-dim {position:absolute; inset:0; background:var(--h2-color-dim); pointer-events:none;}
.history2__title-thumb-text {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; gap:2rem; color:var(--h2-color-white); text-align:center; white-space:nowrap; z-index:2; will-change:opacity;}
.history2__title-thumb-title {margin:0; font-family:var(--h2-font-main); font-size:6rem; font-weight:700; line-height:1.08; letter-spacing:-0.03125rem;}
.history2__title-thumb-desc {margin:0; font-family:var(--h2-font-main); font-size:2rem; font-weight:400; line-height:1.25; letter-spacing:0;}

/* ----- Items list (right) ----- */
.history2__items {display: flex; justify-content: flex-end;}
.history2__items .in {min-width:0; display:flex; flex-direction:column; gap:12.5rem; width: 68.8rem;}

/* ----- single item ----- */
.history2__item {position:relative; display:flex; flex-direction:column; gap:3.25rem; max-width:68.75rem;}
.history2__item.is-first {gap:0;}

.history2__item-bg {position: sticky; top: 0; left: 0; display:block; font-family:var(--h2-font-num); font-size:26.875rem; font-weight:700; line-height:1.228; letter-spacing:-1.232rem; color:var(--h2-color-bg); opacity:.1; white-space:nowrap; user-select:none; pointer-events:none;}
.history2__item.is-first .history2__item-bg {margin-bottom:-15.625rem;}

.history2__item-inner {position:relative; display:flex; flex-direction:column; gap:3.75rem; z-index:1;}
.history2__item-head {display:flex; flex-direction:column; gap:0.5rem; color:var(--h2-color-black);}
.history2__item-year {font-family:var(--h2-font-main); font-size:1.75rem; font-weight:600; line-height:1.29; letter-spacing:0;}
.history2__item-tit {margin:0; font-family:var(--h2-font-main); font-size:4.25rem; font-weight:700; line-height:1.12; letter-spacing:-0.01875rem; word-break:keep-all;}

.history2__item-body {display:flex; flex-direction:column; gap:2.5rem;}
.history2__item-txt {font-family:var(--h2-font-main); font-size:1.25rem; font-weight:400; line-height:1.45; letter-spacing:0; color:var(--h2-color-black); word-break:keep-all;}
.history2__item-txt p {margin:0;}
.history2__item-txt p + p {margin-top:1rem;}

.history2__item-img {position:relative; width:100%; aspect-ratio:1100 / 690; overflow:hidden;}
.history2__item-img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.history2__item-img--split {display:flex; gap:0;}
.history2__item-img--split img {position:static; width:50%; height:100%; flex:1 1 50%;}

/* ============================================================
 * Scroll-in animations (initial state for JS to toggle)
 * ============================================================ */
.history2__item {opacity:0; transform:translate3d(0, 3.75rem, 0); transition:opacity .9s var(--h2-ease), transform .9s var(--h2-ease);}
.history2__item.is-inview {opacity:1; transform:translate3d(0, 0, 0);}
.history2__item-bg {transition:transform 1.2s var(--h2-ease); will-change:transform;}

/* sticky title slight reveal — applied on label only (transform on .history2__title would create a containing block and break position:fixed of the thumb) */
.history2__title-label {opacity:0; transform:translate3d(0, 1.5rem, 0); transition:opacity .9s var(--h2-ease), transform .9s var(--h2-ease);}
.history2__sec.is-inview .history2__title-label {opacity:1; transform:translate3d(0, 0, 0);}

/* ============================================================
 * pageNav — floating page-section nav (bottom fixed)
 * ============================================================ */
.pageNav {position:fixed; left:50%; bottom:2.37rem; transform:translateX(-50%); z-index:80; transform-origin:bottom center; font-family:'Pretendard', sans-serif;}
.pageNav__inner {position:relative; display:flex; flex-direction:column; gap:0.625rem; width:16.3rem;}

/* Panel (expanded list) — height animated by jQuery slideDown/slideUp */
.pageNav__panel {display:none; position:relative; background:rgba(0,0,0,.5); border-radius:1.25rem; padding:0.75rem .62rem 0.75rem 0.75rem;}
.pageNav__panel ul {overflow:hidden; max-height: 16.75rem; overflow-y: auto; padding-right: .62rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;}
.pageNav__panel ul::-webkit-scrollbar {width:0.1875rem;}
.pageNav__panel ul::-webkit-scrollbar-track {border-radius: 0.625rem; background:#4C4C4C;}
.pageNav__panel ul::-webkit-scrollbar-thumb {border-radius: 0.625rem; background: #FFF;}

.pageNav__list {display:flex; flex-direction:column; gap:0.75rem; margin:0; padding:0; list-style:none; overflow:hidden;}
.pageNav__btn {display:flex; align-items:center; gap:0.75rem; width:100%; padding:0; background:transparent; border:0; color:#fff; cursor:pointer; text-align:left; transition:opacity .25s ease;}
.pageNav__btn .pageNav__txt {font-size:1.375rem; font-weight:600; line-height:1.45; color:#fff; width: calc(100% - 3.25rem - 0.75rem); word-break: keep-all;}
/* .pageNav__btn:not(.is-active) {opacity:.7;}
.pageNav__btn:not(.is-active):hover {opacity:1;} */

.pageNav__thumb {position:relative; width:3.25rem; aspect-ratio:1/1; overflow:hidden; border-radius:100%;}
.pageNav__thumb img {width:100%; height:100%; object-fit:cover; object-position:center;}

/* Trigger (collapsed) */
.pageNav__trigger {display:flex; align-items:center; gap:0.75rem; width:100%; padding:0.75rem 1.25rem 0.75rem 0.75rem; background:rgba(0,0,0,.5); border:0; border-radius:3.125rem; cursor:pointer;}
.pageNav__current {flex:1 1 auto; font-size:1.375rem; font-weight:600; line-height:1.45; color:#fff; white-space:nowrap; text-align:left; max-width: calc(100% - 3.25rem - 1.5rem - (0.75rem * 2)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.pageNav__plus {width:1.5rem; aspect-ratio:1/1; display:inline-flex; align-items:center; justify-content:center;}
.pageNav__plus img {width:100%; height:100%;}

/* ============================================================
 * Tablet / Mobile : ≤1680
 * ============================================================ */
@media (max-width:1680px) {
	.history2__items .in {width: 55.8rem;}
	.history2__item-bg {font-size: 18.875rem;}
}
/* ============================================================
 * Tablet / Mobile : ≤1440
 * ============================================================ */
@media (max-width:1440px) {
	.history2__items {padding: 0;}
}
/* ============================================================
 * Tablet / Mobile : ≤1280
 * ============================================================ */
@media (max-width:1280px) {
	.history2__title {width: 23.5rem;}
	.history2__items {padding: 0;}
	.history2__items .in {width: 48.8rem;}
}
/* ============================================================
 * Tablet / Mobile : ≤1024
 * ============================================================ */
@media (max-width:1024px) {

	.history2__main {gap:3.75rem; padding-bottom:5rem;}

	/* Section : no hero runway on mobile */
	.history2__sec {padding-top:0;}

	/* Cont */
	.history2__cont {padding:0;}
	.history2__cont-inner {flex-direction:column; gap:2.5rem; padding:0; max-width:100%;}
	.history2__cont-inner img.pc {display: block !important;}
	.history2__cont-inner img.mob {display: none !important;}
	
	.history2__title {top:0; width:100%; padding-top:0; z-index: -1; height: 45rem; display: block;}
	
	/* Slot hidden / thumb becomes static fullwidth hero on mobile */
	.history2__title-label,
	.history2__title-thumb-slot {display:none;}
	.history2__title-thumb {position:relative; width:100% !important; height:100% !important; aspect-ratio:auto; z-index:auto; opacity:1; visibility:visible; top: auto !important; left: auto !important;}
	.history2__title-thumb-title {font-size:2.25rem; line-height:1.22; letter-spacing:0;}
	.history2__title-thumb-desc {font-size:1.125rem; line-height:1.5;}
	.history2__title-thumb-text {gap:1.25rem; white-space:normal; padding:0 1.25rem; width:100%;}
	
	.history2__items {gap:0; width:100%; background: #fff; padding: 3.75rem 1.25rem 0;}
	.history2__items .in {gap: 3.75rem; width: 100%;}
	.history2__item, .history2__item.is-first {max-width:100%; gap:1.5rem;}
	.history2__item-bg {font-size:3.5625rem; line-height:1.12; letter-spacing:-0.015625rem; font-family:var(--h2-font-main); transform: none !important;}
	.history2__item.is-first .history2__item-bg {margin-bottom:0; position: relative; top: auto; left: auto; transform: none !important;}

	.history2__item-inner {gap:2.5rem;}
	.history2__item-head {gap:0.5rem;}
	.history2__item-year {font-size:1.75rem; line-height:1.29;}
	.history2__item-tit {font-size:1.75rem; line-height:1.29; letter-spacing:0;}
	[data-year="1997"] .history2__item-tit br {display: none;}

	.history2__item-body {gap:2.5rem;}
	.history2__item-txt {font-size:0.875rem; line-height:1.43;}
	.history2__item-txt p + p {margin-top:.75rem;}
	.history2__item-img {width:100%; aspect-ratio:auto;}
	.history2__item-img img {position: relative; top: auto; left: auto;}

	/* pageNav (mobile) */
	.pageNav__inner {width:16.0625rem;}
	.pageNav__btn .pageNav__txt {width: calc(100% - 2.5rem - 0.75rem);}
	.pageNav__btn .pageNav__txt, .pageNav__current {font-size:1.125rem; line-height:1.25;}
	.pageNav__current {max-width: calc(100% - 3.25rem - 1.5rem - 0.75rem);}
	.pageNav__thumb {flex-basis:2.5rem; width:2.5rem; height:2.5rem;}
	.pageNav__panel {padding: 0.75rem .44rem 0.75rem 0.75rem;}
	.pageNav__panel ul {padding-right: calc(1.25rem - .44rem - .125rem);}
	.pageNav__panel ul::-webkit-scrollbar {width:0.125rem;}
}

/* ============================================================
 * Mobile : ≤768
 * ============================================================ */
@media (max-width:768px) {
	.history2__title {max-height: 100lvh;}
	.history2__title-thumb-title {font-size:2.25rem;}
	.history2__title-thumb-desc {font-size:1.125rem;}

	.history2__main {gap:3.75rem;}
	.history2__cont-inner {gap:2rem;}
	.history2__cont-inner img.pc {display: none !important;}
	.history2__cont-inner img.mob {display: block !important;}
	.history2__items {gap:3.75rem;}

	.history2__item-tit {font-size:1.5rem;}
	.history2__item-txt {font-size:0.875rem;}
}

/* ============================================================
 * project (성과의 궤적 - 프로젝트로 보는 HG)
 *  - PC : sticky pin + horizontal scroll (Simpac style)
 *  - Mobile : 일반 세로 스크롤
* ============================================================ */

.project {position:relative; width:100%; background:#000;}
.pageNav2 .pageNav__inner {width: 23.5rem;}
.project *, .project *::before, .project *::after {box-sizing:border-box;}
.project img {display:block; max-width:100%;}

.project__pin {position:relative; width:100%; height:100lvh; overflow:hidden;}
.project__track {position:relative; display:flex; align-items:stretch; height:100lvh; will-change:transform;}

.project__panel {position:relative; width:100vw; height:100lvh; overflow:hidden; color:#fff;}
.project__bg {position:absolute; inset:0; overflow:hidden; z-index:0; /* max-width: 1920px; */}
.project__bg img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform;}
.project__dimd {position:absolute; inset:0; background:rgba(0,0,0,.4);}

/* intro panel */
.project__intro {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; gap:2rem; color:#fff; text-align:center; z-index:2; word-break:keep-all; width:100%; padding:0 1.25rem; /* max-width: 1920px; */}
.project__intro-title {margin:0; font-size:6rem; font-weight:700; line-height:1.08; letter-spacing:-0.03125rem;}
.project__intro-sub {margin:0; font-size:1.875rem; font-weight:400; line-height:1.34;}
/* .project__panel.is-show#panel1 .is-anim > * {animation: projectFadeUp .9s cubic-bezier(.16,1,.3,1) both;}
.project__panel.is-show#panel1 .is-anim > *:nth-child(1) { animation-delay: .25s; }
.project__panel.is-show#panel1 .is-anim > *:nth-child(2) { animation-delay: .40s; }
@keyframes projectFadeUp {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
} */

.project .is-anim > * { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); will-change: opacity, transform;}
.project__panel.is-show .is-anim > * { opacity: 1; transform: translateY(0);}
.project__panel.is-show .is-anim > *:nth-child(1) {transition-delay: .35s;}
.project__panel.is-show .is-anim > *:nth-child(2) {transition-delay: .6s;}
.project__panel.is-show .is-anim > *:nth-child(3) {transition-delay: .75s;}
.project__panel.is-show .is-anim > *:nth-child(4) {transition-delay: 1.2s;}
.project__panel.is-leave-up .is-anim > * { opacity: 0; transform: translateY(-40px); transition-duration: .45s; transition-delay: 0s;}
.project__panel.is-leave-down .is-anim > * { opacity: 0; transform: translateY(40px); transition-duration: .45s; transition-delay: 0s;}

/* intro menu */
.project__menu {position:absolute; top:calc(50% + 14rem); left:50%; transform:translateX(-50%); width:23.5rem; padding:.75rem .75rem .75rem .75rem; border-radius:1.25rem; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:2;}
.project__menu-list {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0;}
.project__menu-list li {display:block;}
.project__menu-btn {display:flex; align-items:center; gap:.75rem; width:100%; padding:.5rem 1.25rem .5rem .75rem; background:transparent; border:0; color:#fff; cursor:pointer; text-align:left; border-radius:.75rem; transition:background-color .25s ease;}
.project__menu-btn:hover {background:rgba(255,255,255,.08);}
.project__menu-thumb {position:relative; flex:0 0 3.25rem; width:3.25rem; height:3.25rem; overflow:hidden; border-radius:.375rem; background:#222;}
.project__menu-thumb img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.project__menu-txt {font-size:1.375rem; font-weight:600; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* project copy */
.project__copy {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; color:#fff; z-index:2; word-break:keep-all; width: 100%; padding: 0 3.12rem;}
.project__year {font-size:1.75rem; font-weight:600; line-height:1.29;}
.project__name {margin:0; font-size:4.25rem; font-weight:700; line-height:1.12; letter-spacing:-0.01875rem; margin: .5rem 0 1.25rem;}
.project__desc {margin:0; font-size:1.25rem; font-weight:400; line-height:1.45;}

/* project tag (bottom center) */
.project__tag {position:absolute; bottom:5.5rem; left:50%; transform:translateX(-50%); z-index:2;}
.project__tag-btn {display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem .75rem .75rem; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:0; color:#fff; border-radius:3.125rem; cursor:pointer;}
.project__tag-thumb {position:relative; flex:0 0 3.25rem; width:3.25rem; height:3.25rem; overflow:hidden; border-radius:100%; background:#222;}
.project__tag-thumb img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.project__tag-txt {font-size:1.375rem; font-weight:600; line-height:1.45; white-space:nowrap;}
.project__tag-ic {position:relative; flex:0 0 1.5rem; width:1.5rem; height:1.5rem;}
.project__tag-ic::before, .project__tag-ic::after {content:""; position:absolute; left:50%; top:50%; background:#fff;}
.project__tag-ic::before {width:1rem; height:1px; transform:translate(-50%, -50%);}
.project__tag-ic::after {width:1px; height:1rem; transform:translate(-50%, -50%);}

/* ============================================================
 * Tablet / Mobile : project
 * ============================================================ */
@media (max-width:1024px) {
	.pageNav2 .pageNav__inner {width: 16.06rem;}

	/* intro panel */
	.project__intro {gap:1.25rem;}
	.project__intro-title {font-size:2rem;}
	.project__intro-sub {font-size:1rem;}

	/* project copy */
	.project__copy {padding: 0 1.25rem;}
	.project__year {font-size:1.25rem; line-height: 1.45;}
	.project__name {font-size:1.75rem; margin: .25rem 0 1.25rem; line-height: 1.29;}
	.project__name br.mob {display: none !important;}
	.project__desc {font-size:0.875rem; line-height: 1.43;}

	/* project tag (bottom center) */
	.project__tag {bottom:1.25rem;}
	.project__tag-btn {padding: 0.75rem 1.25rem 0.75rem 0.75rem;}
	.project__tag-thumb {flex:0 0 2.5rem; width:2.5rem; height:2.5rem;}
	.project__tag-txt {font-size:1.125rem;}
}

@media (max-width:768px) {
	.project__panel {height:40rem;}
	.project__panel--intro {height:40rem;}
	.project__bg img.pc {display: none !important;}
	.project__bg img.mob {display: block !important;}
	.project__intro-title {font-size:1.75rem;}
	.project__menu {width:20rem;}
	.project__menu-txt {font-size:1rem;}
	.project__name {font-size:1.5rem;}
	.project__name br.mob {display: block !important;}
}


/* ============================================================
 * anniversary 30th (함께 만든 30년 - 30주년 Anniversary)
 *  - hero + sec01 (swiper) + sec02 (promo video)
 *  - sec03 (message marquee, hover pause)
 *  - sec04 (media list)
 * ============================================================ */

.anniv {position:relative; width:100%; color:#000; background:#fff;}
.anniv *, .anniv *::before, .anniv *::after {box-sizing:border-box;}
.anniv img {display:block; max-width:100%;}

/* sec01 : card swiper */
.anniv__sec01 {position:relative; padding:9.375rem 0 0;}
.anniv__sec01-inner {position:relative; display:flex; flex-direction:column; gap:3.75rem; max-width:100%; padding:0 0;}
.anniv__sec01-head {display:flex; flex-direction:column; gap:.5rem; text-align:center; padding:0 10rem;}
.anniv__sec01-cate {font-size:1.75rem; font-weight:600; line-height:1.29;}
.anniv__sec01-title {margin:0; font-size:4.25rem; font-weight:700; line-height:1.12; letter-spacing:-0.01875rem;}
.anniv__sec01-card {display:flex; flex-direction:column; gap:2.5rem; align-items:center; width:100%; max-width: 1920px; margin: 0 auto;}
.anniv__swiper {width:100%; max-width:100%; overflow:hidden;}
.anniv__swiper .swiper-slide {width:100%;}
.anniv__sec01-img {position:relative; width:100%; height:50rem; overflow:hidden;}
.anniv__sec01-img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* thumb nav */
.anniv__thumb-nav {display:flex; align-items:center; gap:2.5rem; justify-content:center; padding:0 1.25rem;}
.anniv__nav-btn {width:3rem; aspect-ratio: 1/1; background:transparent; border:0; cursor:pointer; position:relative; padding:0;}
.anniv__nav-btn img {width: 100%;}
.anniv__nav-btn:disabled {opacity:.25; cursor:not-allowed;}

.anniv__thumb-list {flex:0 1 auto; max-width:60rem; overflow:hidden; margin: 0;}
.anniv__thumb-list .swiper-slide {width:8.75rem;}
.anniv__thumb {width:8.75rem; aspect-ratio: 1/1; opacity:.6; cursor:pointer; transition:opacity .25s ease; position:relative; overflow:hidden; margin-right: 0.75rem;}
.anniv__thumb.swiper-slide-thumb-active {opacity:1;}
.anniv__thumb.swiper-slide-thumb-active::after {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border:2.625px solid #110546;}
.anniv__thumb-img {position:absolute; inset:0; display:block;}
.anniv__thumb-img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* sec02 : promotion video */
.anniv__sec02 {position:relative; padding:9.375rem 0; background:#f8f8f8; overflow:hidden; margin-top: 9.375rem;}
.anniv__sec02-bg {position:absolute; top:9.87rem; left:49.5%; transform:translateX(-50%); width: 100%;}
.anniv__sec02-bg img {width: 100%;}
.anniv__sec02-inner {position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:3.75rem;}
.anniv__sec02-head {display:flex; flex-direction:column; gap:.5rem; text-align:center;}
.anniv__sec02-cate {font-size:1.375rem; font-weight:600; line-height:1.45;}
.anniv__sec02-title {margin:0; font-size:2.8125rem; font-weight:700; line-height:1.15;}
.anniv__sec02-video {width:100%; display:flex; justify-content:center; max-width:75rem; margin:0 auto;}
.anniv__video {position:relative; width:75rem; aspect-ratio:1200/675; overflow:hidden; border-radius:2.5rem;}
.anniv__video-img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.anniv__video-frame {position:absolute; inset:0; width:100%; height:100%; border:0;}
.anniv__play-btn {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:block; width:5.75rem; aspect-ratio: 1/1; border-radius:50%; overflow: hidden; border: 0; outline: none; background: none;}
.anniv__play-btn img {width: 100%;}

/* sec03 : message marquee */
.anniv__sec03 {position:relative; padding:0; overflow:hidden;}
.anniv__sec03-bg {position:absolute; inset:0; overflow:hidden; z-index:0;}
.anniv__sec03-bg img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.anniv__sec03-inner {position:relative; z-index:1; padding:10rem 0; display:flex; flex-direction:column; gap:3.75rem; color:#fff;}
.anniv__sec03-head {display:flex; flex-direction:column; gap:.5rem;}
.anniv__sec03-cate {font-size:1.375rem; font-weight:600; line-height:1.45;}
.anniv__sec03-title {margin:0; font-size:2.8125rem; font-weight:700; line-height:1.15;}

.anniv__msg-card {position:relative; width:100%; max-width:100rem; margin:0 auto; padding:0 3rem; border-radius: 0.625rem; background: rgba(17, 17, 17, 0.70); display:flex; flex-direction:column; gap:2.5rem; align-items:center; height:41rem; overflow:hidden;}
.anniv__msg-title {margin:0; font-size:2.8125rem; font-weight:700; line-height:1.15; color:#fff; text-align:center;}
.anniv__msg-marquee {position:relative; flex:1 1 auto; width:100%; overflow:hidden; mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);}
.anniv__msg-track {position:relative; will-change:transform;}
.anniv__msg-group {display:flex; flex-direction:column; gap:2.5rem; padding-bottom:3.75rem;}
.anniv__msg-group .cont {display:flex; flex-direction:column; gap:3.75rem;}
.anniv__msg-item {display:flex; flex-direction:column; gap:1.25rem; align-items:center; text-align:center; color:#fff; word-break:keep-all;}
.anniv__msg-author {margin:0; font-size:1.75rem; font-weight:600; line-height:1.29;}
.anniv__msg-text p {font-size:1.25rem; font-weight:400; line-height:1.45; margin:0;}

/* sec04 : media list */
.anniv__sec04 {position:relative; padding:9.375rem 0;}
.anniv__sec04-inner {display:flex; flex-direction:column; gap:3.75rem;}
.anniv__sec04-head {display:flex; flex-direction:column; gap:.5rem;}
.anniv__sec04-cate {font-size:1.375rem; font-weight:600; line-height:1.45;}
.anniv__sec04-title {margin:0; font-size:2.8125rem; font-weight:700; line-height:1.15;}

.anniv__media {margin: 0 calc(2.5rem / 2); width: 48.8rem;}
.anniv__media-list {position:relative; width:100%;}
.anniv__media-swiper {overflow:hidden;}
.anniv__media-swiper .swiper-wrapper {align-items:flex-start;}
.anniv__media {display:flex; flex-direction:column; align-items:center; gap:1.75rem; height:auto; min-width:0;}
.anniv__media-thumb {position:relative; width:100%; aspect-ratio:780/534; border-radius:1.25rem; overflow:hidden;}
.anniv__media-img {width:100%; height:100%; object-fit:cover; object-position: center;}
.anniv__media-thumb .anniv__play-btn {width: 3.25rem;}
.anniv__media-title {font-size: 1.75rem; font-weight: 600; line-height: 129%; opacity: 0; text-align: center;}
.swiper-slide-active .anniv__media-title {opacity: 1;}


/* ============================================================
 * Tablet / Mobile : anniversary
 * ============================================================ */
@media (max-width:1024px) {

	.anniv__sec01 {padding:3.75rem 0 0;}
	.anniv__sec01-inner {gap:2.5rem;}
	.anniv__sec01-head {padding:0 1.25rem;}
	.anniv__sec01-card {gap: 1.25rem;}
	.anniv__sec01-cate {font-size:1rem; line-height:1.5;}
	.anniv__sec01-title {font-size:2rem; line-height:1.25;}
	.anniv__sec01-img {height:auto; aspect-ratio: 2.4/1;}
	.anniv__thumb-nav {gap:1.0625rem; padding: 0 3.7rem;}
	.anniv__nav-btn {width:1.28569rem; min-width: 1.28569rem;}
	.anniv__thumb-list .swiper-slide {width:3.75rem;}
	.anniv__thumb {width:3.75rem; margin-right: 0.32144rem;}
	.anniv__thumb.swiper-slide-thumb-active::after {border-width:1.125px;}

	.anniv__sec02 {padding:3.75rem 0; margin-top: 3.75rem;}
	.anniv__sec02-bg {font-size:3.75rem; letter-spacing: 0; text-align: center; left: 50%; padding: 0 .4rem; top: 8.5rem;}
	.anniv__sec02-inner {gap:3.75rem;}
	.anniv__sec02-cate {font-size:1rem; line-height:1.5;}
	.anniv__sec02-title {font-size:1.75rem; line-height:1.29;}
	.anniv__video {width:100%; aspect-ratio:344/193; border-radius: 0.71669rem;}
	.anniv__play-btn {width:3rem;}

	.anniv__sec03-inner {padding:3.75rem 1.25rem; gap:2.5rem;}
	.anniv__sec03-cate {font-size:1rem; line-height:1.5;}
	.anniv__sec03-title {font-size:1.75rem; line-height:1.29;}
	.anniv__msg-card {padding:0; height:30.4rem; background: none;}
	.anniv__msg-group {gap:2.5rem; padding-bottom:3.75rem;}
	.anniv__msg-group .cont {gap:3.75rem;}
	.anniv__msg-title {font-size:1.5rem; line-height:1.33;}
	.anniv__msg-author {font-size:1.125rem; line-height:1.5;}
	.anniv__msg-text p {font-size:.875rem; line-height:1.43;}
	.anniv__msg-item {gap: 1.25rem;}

	.anniv__sec04 {padding:3.75rem 0;}
	.anniv__sec04-inner {gap:2.5rem;}
	.anniv__sec04-cate {font-size:1rem; line-height:1.5;}
	.anniv__sec04-title {font-size:1.75rem; line-height:1.29;}
	.anniv__media-swiper {overflow:visible;}
	.anniv__media {width:18.1rem; gap:.5rem; margin: 0 calc(0.72313rem/2);}
	.anniv__media-thumb {border-radius:.375rem;}
	.anniv__media-thumb .anniv__play-btn {width:2rem;}
	.anniv__media-title {font-size:0.875rem; line-height:1.43;}

	.anniv__sec03-bg img.pc {display: block !important;}
	.anniv__sec03-bg img.mob {display: none !important;}
}
/* ============================================================
 * Tablet / Mobile : 768
 * ============================================================ */
@media (max-width:768px) {
	.anniv__play-btn {width:1.64831rem;}
	.anniv__media-thumb .anniv__play-btn {width:1.5rem;}
	.anniv__media {width:14.1rem;}

	.anniv__sec03-bg img.pc {display: none !important;}
	.anniv__sec03-bg img.mob {display: block !important;}

	.anniv__thumb-nav {padding: 0 2rem;}
	.anniv__thumb-list .swiper-slide {width: 3rem;}
}


/* ============================================================
 * museum (함께 만든 30년 - HG 뮤지엄)
 * Figma node 6662:1163 (PC) / 6876:708 (Mobile)
 * ============================================================ */

.museum {position:relative; width:100%; color:#000;}
.museum *, .museum *::before, .museum *::after {box-sizing:border-box;}
.museum img {display:block; max-width:100%;}

/* shared visual hero (museum + museum-detail) */
.museum__visual {position:relative; width:100%; height:67.5rem; overflow:hidden; background:#000;}
.museum__visual-bg {position:absolute; inset:0;}
.museum__visual-bg img {width:100%; height:100%; object-fit:cover;}
.museum__visual-copy {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2rem; color:#fff; text-align:center; padding:0 1.25rem; word-break:keep-all; width: 100%;}
.museum__visual-title {margin:0; font-family:'Pretendard',sans-serif; font-size:6rem; font-weight:700; line-height:1.08; letter-spacing:-0.03125rem;}
.museum__visual-sub {margin:0; font-family:'Pretendard',sans-serif; font-size:2rem; font-weight:400; line-height:1.25;}

/* section */
.museum__sec {padding:9.375rem 0;}
.museum__inner {max-width:108.125rem; margin:0 auto; padding:0 1.25rem; display:flex; flex-direction:column; gap:9.375rem;}

/* head */
.museum__head {display:flex; flex-direction:column; align-items:center; gap:1.75rem; text-align:center; word-break:keep-all;}
.museum__head-title {margin:0; font-family:'Pretendard',sans-serif; font-size:2.8125rem; font-weight:700; line-height:1.15; word-break: keep-all;}
.museum__head-desc {margin:0; font-family:'Pretendard',sans-serif; font-size:1.25rem; font-weight:400; line-height:1.45; word-break: keep-all;}

/* cards grid */
.museum__cards {margin:0; padding:0; display: grid; grid-template-columns: repeat(4,1fr); gap:1.875rem;}
.museum__card {position:relative; aspect-ratio: 1/1;}

.museum__card-link {display:block; position:relative; width:100%; height:100%; overflow:hidden; border-radius:1.25rem; background:#f8f8f8; cursor:pointer; transition:all .4s;}

/* museum__down */
.museum__downCont {padding-top: 0 !important; text-align: center;}
.museum__down-title {font-size: 2.8125rem; font-weight: 700; line-height: 1.15;}
.museum__down-sub {margin-top: 1.75rem; font-size: 1.25rem; font-weight: 400; line-height: 1.45;}
.museum__down {margin: 3.75rem auto 0; max-width: calc(105.625rem + 2.5rem); width: 100%; padding: 0 1.25rem; gap: 1.88rem;}
.museum__down-itme {flex: 1; padding: 1.875rem; border-radius: 1.25rem; background: #FAFAFA; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;}
.museum__down-itme p {font-size: 1.375rem; font-weight: 600; line-height: 1.45;}
.museum__down-itme .flex {gap: 1.25rem; width: 100%;}
.museum__down-itme a {display: flex; align-items: center; justify-content: center; gap: 0.3125rem; flex: 1; height: 3.125rem; border-radius: 0.625rem; background: #FFF; font-size: 1.125rem; font-weight: 400; border: 1px solid #fff; transition: all .4s ease;}
.museum__down-itme a img {width: 1.5rem;}
.museum__down-itme a:hover {border: 1px solid #000;}
@media (min-width:1025px) {
	.museum__card-link:hover {border-radius: 100%;}
}
@media (max-width:1024px) {
	.museum__secList {padding-bottom: 2.5rem;}
	/* museum__down */
	.museum__down-title {font-size: 1.75rem;}
	.museum__down-sub {margin-top: 1.25rem; font-size: 0.875rem;}
	.museum__down {margin: 2.5rem auto 0; max-width: 100%; padding: 0 1.25rem; gap: 1.5625rem; flex-direction: column; width: 100%;}
	.museum__down-itme {padding: 1.25rem; width: 100%;}
	.museum__down-itme p {font-size: 1.25rem;}
	.museum__down-itme .flex {gap: 0.9375rem;}
	.museum__down-itme a {height: 2.8125rem; font-size: 0.875rem;}
	.museum__down-itme a img {width: 1.25rem;}
}
@media (max-width:350px) {
	.museum__down-itme .flex {flex-direction: column;}
	.museum__down-itme .flex a {width: 100%; height: 2.5rem; flex: auto;}
}
.museum__card-link img {width:100%; height:100%; object-fit:cover;}

/* ============================================================
 * museum-detail (함께 만든 30년 - HG 뮤지엄 상세)
 * Figma node 6823:574 (PC) / 6854:2 (Mobile)
 * ============================================================ */

.museum-detail {position:relative; width:100%; color:#000;}
.museum-detail *, .museum-detail *::before, .museum-detail *::after {box-sizing:border-box;}
.museum-detail img {display:block; max-width:100%;}

.museum-detail__sec {position:relative; padding:9.375rem 0; overflow:hidden; margin-top: 5.625rem;}
.museum-detail__inner {display:flex; flex-direction:column; position:relative; z-index:1;}

/* head */
.museum-detail__head {display:flex; flex-direction:column; gap:2.5rem; word-break:keep-all;}
.museum-detail__swiper__cont {margin-top: 15rem; position: relative; display: flex; align-items: center; flex-direction: column; gap: 5rem;}

/* huge faded background text */
.museum-detail__bgtxt {position:absolute; left:.5rem; top:-8.5rem;}

.museum-detail__title {margin:0; font-family:'Pretendard',sans-serif; font-size:2.8125rem; font-weight:700; line-height:1.15;}
.museum-detail__desc {font-family:'Pretendard',sans-serif; font-size:1.25rem; font-weight:400; line-height:1.45;}
.museum-detail__desc p {margin:0; word-break: keep-all;}
.museum-detail__desc p + p {margin-top:0;}
.museum-detail__desc br.pc {display:inline;}
.museum-detail__desc br.mob {display:none;}

/* media list (swiper) */
.museum-detail__media {position:relative; width:100%;}
.museum-detail__media .swiper-wrapper {align-items:flex-start;}

.museum-detail__item {display:flex; flex-direction:column; gap:1.75rem; margin:0; flex-shrink:0; margin-right: 2.5rem;}
.museum-detail__item.swiper-slide {height:auto;}
.museum-detail__item--wide {width:51.25rem;}
.museum-detail__item--wide2 {width:56.3125rem;}
.museum-detail__item--narrow {width:22.125rem;}
.museum-detail__item--narrow2 {width:42.9375rem;}

.museum-detail__img {position:relative; width:100%; height:31.25rem; overflow:hidden; background:#eee;}
.museum-detail__item--narrow .museum-detail__img {border:1px solid #e3e3e3;}
.museum-detail__img img {width:100%; height:100%; object-fit:cover;}

.museum-detail__cap {margin:0; font-family:'Pretendard',sans-serif; font-size:1.75rem; font-weight:600; line-height:1.29; color:#000; word-break:keep-all;}

/* progress + arrow */
.museum-detail__nav {display:flex; flex-direction:column; align-items:flex-end; gap:2.5rem; width: 100%;}
.museum-detail__progress {width:100%; height:0.125rem; background:rgba(0, 0, 0, 0.30); position:relative; overflow:hidden;}
.museum-detail__progress-bar {position:absolute; left:0; top:0; height:100%; width:100%; background:#000; transform:scaleX(0); transform-origin:left center; transition:transform .35s cubic-bezier(.22,1,.36,1);}

.museum-detail__arrows {display:flex; gap:.75rem; align-items:center;}
.museum-detail__arrow {display:flex; align-items:center; justify-content:center; width:4.375rem; aspect-ratio: 1/1; border-radius:50%; background:#fff; border:1.5px solid #000; color:#000; cursor:pointer; padding:0; transition:all .25s ease;}
.museum-detail__arrow img {width:1.4625rem; transition:all .25s ease;}
.museum-detail__arrow:hover {background:#000; color:#fff;}
.museum-detail__arrow:hover img {filter: brightness(0) invert(1);}

/* pager : 이전 / 목록 / 다음 — 이전/다음이 없어도 목록은 중앙 유지 */
.museum-detail__pager {margin-top:5rem; padding-top:1.75rem; border-top:1px solid #E3E3E3; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.25rem; width:100%;}
.museum-detail__pager-link--prev {justify-self:start;}
.museum-detail__pager-list {justify-self:center;}
.museum-detail__pager-link--next {justify-self:end;}
.museum-detail__pager-link {display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#000; font-family:'Pretendard',sans-serif; font-size:1.375rem; font-weight:400; line-height:1.45; transition:opacity .25s ease;}
/* .museum-detail__pager-link:hover {opacity:.7;} */
.museum-detail__pager-link.is-disabled {opacity:0; pointer-events:none; cursor:default;}
.museum-detail__pager-link.is-disabled:hover {opacity:0;}
.museum-detail__pager-link--next {flex-direction:row; justify-content: flex-end;}
.museum-detail__pager-arrow {display:flex; align-items:center; justify-content:center; width:4.375rem; aspect-ratio:1/1; border-radius:50%; background:#E3E3E3; border:1.5px solid #fff; transition:background .25s ease;}
.museum-detail__pager-arrow img {width:1.4625rem;}
.museum-detail__pager-link:hover .museum-detail__pager-arrow {background:#000;}
.museum-detail__pager-link:hover .museum-detail__pager-arrow img {filter:brightness(0) invert(1);}
.museum-detail__pager-label {white-space:nowrap;}
.museum-detail__pager-list {display:inline-flex; align-items:center; gap:.25rem; padding:1rem 1.25rem; border-radius:3.125rem; background:#000; color:#fff; text-decoration:none; font-family:'Pretendard',sans-serif; font-size:1.375rem; font-weight:400; line-height:1.45; transition:opacity .25s ease;}
.museum-detail__pager-list img {width:2rem; height:2rem;}
/* .museum-detail__pager-list:hover {opacity:.85;} */

/* ============================================================
 * Tablet / Mobile : ≤1690
 * ============================================================ */
@media (max-width:1800px) {
	.museum__inner {padding: 0 3.125rem;}
}
/* ============================================================
 * Tablet / Mobile : ≤1440
 * ============================================================ */
@media (max-width:1440px) {
	.museum-detail__item.swiper-slide:first-child {margin-left: 3.125rem !important;}
	.museum__inner {gap: 6.375rem;}
}
/* ============================================================
 * Tablet / Mobile : ≤1024
 * ============================================================ */
@media (max-width:1024px) {
	html {font-size:100%;}

	/* visual */
	.museum__visual {height:45rem;}
	.museum__visual img.pc {display: block !important;}
	.museum__visual img.mob {display: none !important;}

	.museum__visual-copy {gap:1.25rem;}
	.museum__visual-title {font-size:2.25rem; line-height:1.22; letter-spacing:0;}
	.museum__visual-sub {font-size:1.125rem; line-height:1.5;}

	/* section */
	.museum__sec {padding:3.75rem 0;}
	.museum__inner {gap:2.5rem; padding:0 1.25rem;}

	/* head */
	.museum__head {gap:1.25rem;}
	.museum__head-title {font-size:1.75rem; line-height:1.29;}
	.museum__head-desc {font-size:.875rem; line-height:1.43;}
	.museum__head-desc br.pc {display:block !important;}
	.museum__head-desc br.mob {display:none !important;}

	/* cards */
	.museum__cards {gap:1.6125rem; justify-content:center; grid-template-columns: repeat(2,1fr);}


	/* ============================================================
	* museum-detail
 	* ============================================================ */
	.museum-detail__sec {padding:3.75rem 0; margin-top: 4.375rem;}

	/* head */
	.museum-detail__swiper__cont {margin-top: 2.5rem; gap: 2.5rem;}

	/* huge faded background text */
	.museum-detail__bgtxt {display: none;}

	.museum-detail__head {gap: 2.5rem;}
	.museum-detail__title {font-size:1.75rem;}
	.museum-detail__desc {font-size:0.875rem;}

	.museum-detail__item {gap:0.75rem; margin-right: 1.25rem;}
	.museum-detail__item.swiper-slide:first-child {margin-left: 1.25rem !important;}
	.museum-detail__item--wide {width:17.46169rem;}
	.museum-detail__item--wide2 {width:17.46169rem;}
	.museum-detail__item--narrow {width:7.53831rem;}
	.museum-detail__item--narrow2 {width:7.53831rem;}

	.museum-detail__img {height:10.64738rem;}

	.museum-detail__cap {font-size:0.875rem;}

	/* progress + arrow */
	.museum-detail__nav {gap:1.25rem; margin-top: 2.5rem;}
	.museum-detail__arrows {gap:.43rem;}
	.museum-detail__arrow {width:2.5rem;}
	.museum-detail__arrow img {width:0.83331rem;}

	/* pager */
	.museum-detail__pager {margin-top:2.5rem; padding-top:1.25rem; gap:.75rem;}
	.museum-detail__pager-link {gap:.5rem; font-size:1rem;}
	.museum-detail__pager-arrow {width:2.5rem;}
	.museum-detail__pager-arrow img {width:0.83331rem;}
	.museum-detail__pager-list {gap:.25rem; padding:.625rem 1rem; font-size:1rem;}
	.museum-detail__pager-list img {width:1.25rem; height:1.25rem;}
	.museum-detail__pager-label {white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; max-width: 150px;}
}

/* ============================================================
 * Mobile : ≤768
 * ============================================================ */
@media (max-width:768px) {
	.museum__visual img {object-position: center bottom;}
	.museum__visual img.pc {display: none !important;}
	.museum__visual img.mob {display: block !important;}

	.museum__head-desc br.pc {display: none !important;}
	.museum__head-desc br.mob {display: block !important;}

	.museum-detail__desc br.pc {display: none;}
	.museum-detail__desc br.mob {display: inline;}

	/* cards */
	.museum__cards {grid-template-columns: repeat(1,1fr);}


	/* ============================================================
	* museum-detail
 	* ============================================================ */
	.museum-detail__item {margin-right: 0;}
	/* head */
	.museum-detail__swiper__cont {gap: 0;}

	.museum-detail__media .swiper-wrapper {padding-left: 1.25rem;}
	.museum-detail__item.swiper-slide {margin-right: 1rem;}
	.museum-detail__item.swiper-slide:first-child {margin-left: 0 !important;}
	.museum-detail__cap {opacity: 0; transition: all .3s;}
	.swiper-slide-active .museum-detail__cap {opacity: 1;}

	/* pager : 모바일은 2단 구조 — 1행 [이전 | 다음], 2행 [목록] */
	.museum-detail__pager {display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"prev next" "list list"; gap:.75rem; padding:1rem 1.25rem 0; margin-top:2.5rem;}
	.museum-detail__pager-link {gap:.43rem; font-size:.875rem;}
	.museum-detail__pager-link--prev {grid-area:prev; justify-self:start;}
	.museum-detail__pager-link--next {grid-area:next; justify-self:end;}
	.museum-detail__pager-arrow {width:2.5rem;}
	.museum-detail__pager-arrow img {width:0.83331rem;}
	.museum-detail__pager-list {grid-area:list; justify-self:center; gap:.15rem; padding:.5715rem .7145rem; border-radius:1.785rem; font-size:.875rem;}
	.museum-detail__pager-list img {width:1.143rem; height:1.143rem;}
}

/* ============================================================
 * Mobile : ≤500
 * ============================================================ */
@media (max-width:500px) {
}


/* ============================================================
 * keyword-hg (성과의 궤적 - 키워드로 보는 HG)
 *  - shared by : keyword_pioneer / keyword_challenge / keyword_human
 *  - PC : 1600 inner, left title 440 / right body 820
 *  - section alternates light(.keyword-hg__sec) / dark(.keyword-hg__sec--dark with bg image)
 *  - reveal motion : translateY rise on scroll (Kia reference)
 *  - per-section swiper : autoplay 3s
 * ============================================================ */

.keyword-hg {position:relative; width:100%; color:#000; font-family:'Pretendard', sans-serif; overflow:hidden;}
.keyword-hg *, .keyword-hg *::before, .keyword-hg *::after {box-sizing:border-box;}
.keyword-hg img {display:block; max-width:100%;}

/* ---------- visual (shared with museum__visual) ---------- */

/* ---------- section base ---------- */
.keyword-hg__sec {position:relative; width:100%; padding-top:10.625rem; padding-bottom:10.625rem; display:flex; justify-content:center;}
.keyword-hg__sec--first {padding-top:9.375rem;}
.keyword-hg__sec--dark {background:#000; overflow:hidden;}

/* dark bg image */
.keyword-hg__bg {position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;}
.keyword-hg__bg img {width:100%; height:100%; object-fit:cover;}
.keyword-hg__sec--dark.keyword-hg__sec--light-mask .keyword-hg__bg::after {background:rgba(255,255,255,.5);}

/* huge faded year number bg text */
.keyword-hg__num {position:absolute; bottom:7.81rem; left:0; z-index:1; color: #FFF; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #B3B8BC; font-family: Inter; font-size: 23.75rem; font-style: normal; font-weight: 700; line-height: 33rem; letter-spacing: -1.23188rem; opacity: 0.2; white-space: nowrap;}
.keyword-hg__sec--dark .keyword-hg__num {color:transparent; -webkit-text-stroke:1px #fff;}
.keyword-hg__sec--solid-num .keyword-hg__num {color:#fff; -webkit-text-stroke:0;}
.keyword-hg__num--right {left:auto; right:0;}
.keyword-hg__num--bottom {bottom: 0;}
.keyword-hg__num--bottom2 {bottom: 3.31rem;}
.keyword-hg__num.op1 {opacity: 1;}

/* inner */
.keyword-hg__inner {position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:5rem; z-index:2; width: 100%;}

/* head (left col) */
.keyword-hg__head {flex:0 0 39.5rem; width:39.5rem; display:flex; flex-direction:column; color:#000;}
.keyword-hg__sec--dark .keyword-hg__head {color:#fff;}
.keyword-hg__head--gap2 {gap:1.75rem;}

.keyword-hg__year {font-family:'Pretendard',sans-serif; font-size:5rem; font-weight:700; line-height:1.1; letter-spacing:-0.025rem;}
.keyword-hg__year-unit {font-size:2.25rem; font-weight:700; line-height:1.22; letter-spacing:-0.015625rem;}
.keyword-hg__metric {font-family:'Pretendard',sans-serif; font-size:4.25rem; font-weight:700; line-height:1.12; letter-spacing:-0.01875rem;}
.keyword-hg__metric strong {font-weight: 700;}
.keyword-hg__metric-unit {font-size:2.25rem; font-weight:700; line-height:1.22; letter-spacing:0;}
.keyword-hg__metric-label {font-size:2.25rem; font-weight:400; line-height:1.22; letter-spacing:0;}
.keyword-hg__title {margin:0; font-size:4.25rem; font-weight:700; line-height:1.12; letter-spacing:-0.01875rem; word-break:keep-all;}
.keyword-hg__title-sub {margin-top:1.75rem; font-size:2.25rem; font-weight:400; line-height:1.22; letter-spacing:0; word-break:keep-all;}
.keyword-hg__title-sub strong {font-weight: 700;}
.keyword-hg__title-sub.mt_0 {margin-top: 0;}

/* body (right col) */
.keyword-hg__body {flex:1 1 auto; min-width:0; max-width:51.25rem; display:flex; flex-direction:column; gap:2.5rem; position: relative; z-index: 1;}

.keyword-hg__txt {font-family:'Pretendard',sans-serif; font-size:1.25rem; font-weight:400; line-height:1.45; letter-spacing:0; color:#000; word-break:keep-all;}
.keyword-hg__sec--dark .keyword-hg__txt {color:#fff;}
.keyword-hg__txt p {margin:0;}
.keyword-hg__txt strong {font-weight:600;}
.keyword-hg__txt b {font-weight:600; font-size: 2rem;}
.keyword-hg__txt .keyword-hg__quote {display:block; font-weight:600; margin:1.45em 0;}
.keyword-hg__txt .keyword-hg__big {display:block; font-size:2rem; font-weight:600; line-height:1.25; margin:1em 0;}

/* image (single img by default, swiper only on sec04 책임형CM) */
.keyword-hg__media {position:relative; width:100%; aspect-ratio:1100/680; overflow:hidden;}
.keyword-hg__media > img {width:100%; height:100%; object-fit:cover;}
.keyword-hg__media .swiper, .keyword-hg__media .swiper-wrapper, .keyword-hg__media .swiper-slide {width:100%; height:100%;}
.keyword-hg__media .swiper-slide {overflow:hidden;}
.keyword-hg__media .swiper-slide img {width:100%; height:100%; object-fit:cover;}

/* swiper arrows */
.keyword-hg__media-arrow {position:absolute; top:50%; transform:translateY(-50%); width:3.125rem; aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; z-index:5; padding:0; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(2px);}
.keyword-hg__media-arrow--prev {left:0;}
.keyword-hg__media-arrow--next {right:0;}
.keyword-hg__media-arrow img {width:0.92613rem;}

/* ============================================================
 * Scroll-in motion (Kia reference)
 * ============================================================ */
.keyword-hg__reveal {transform:translate3d(0, 4rem, 0); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); will-change:opacity, transform;}
.keyword-hg__reveal.is-inview {opacity:1; transform:translate3d(0, 0, 0);}
.keyword-hg__reveal--d1 {transition-delay:.15s;}
.keyword-hg__reveal--d2 {transition-delay:.3s;}
.keyword-hg__reveal--d3 {transition-delay:.45s;}

/* 최초에서 최고까지 */
.keyword-hg #sec01 .keyword-hg__num {top: 12.87rem; bottom: auto;}
#keywordPioneer #sec03 .keyword-hg__num {bottom: 3.81rem;}
#keywordPioneer #sec05 .keyword-hg__num {bottom: 1.62rem;}
#keywordPioneer #sec06 .keyword-hg__num {bottom: auto; top: 15.06rem;}
/* 더 큰 시장을 향한 도전 */
#keywordChallenge #sec03 .keyword-hg__num,
#keywordChallenge #sec05 .keyword-hg__num,
#keywordChallenge #sec07 .keyword-hg__num,
#keywordChallenge #sec09 .keyword-hg__num {bottom: auto; top: 15.06rem;}
/* 사람 중심 경영, 시대를 향한 책임  */
#keywordHuman #sec03 .keyword-hg__num {bottom: auto; top: 12.88rem;}
#keywordHuman #sec05 .keyword-hg__num {bottom: auto; top: 15.06rem;}


/* 더 큰 시장을 향한 도전 */

/* ============================================================
 * 1680
 * ============================================================ */
@media (max-width:1680px) {
	/* .keyword-hg__num {font-size:18rem; letter-spacing:-.9rem;} */
}

/* ============================================================
 * 1440
 * ============================================================ */
@media (max-width:1440px) {
	.keyword-hg__sec {padding-top:7.5rem; padding-bottom: 7.5rem;}
	.keyword-hg__inner {gap:2.75rem;}
	.keyword-hg__head {flex-basis:28rem; width:28rem;}
	.keyword-hg__title {font-size: 3rem;}
	.keyword-hg .keyword-hg__num {left: 3.125rem;}
	.keyword-hg .keyword-hg__num {font-size: 18rem;}
	.keyword-hg .keyword-hg__num img,
	#keywordChallenge .keyword-hg__num img {height: 15.5rem;}
}

/* ============================================================
 * 1160
 * ============================================================ */
@media (max-width:1160px) {
	.keyword-hg__txt br.pc {display: none !important;}
}

/* ============================================================
 * Tablet / Mobile ≤1024
 * ============================================================ */
@media (max-width:1024px) {
	.keyword-hg__bg img.pc {display: none !important;}
	.keyword-hg__bg img.mob {display: block !important;}

	.keyword-hg__sec {padding-top:3.75rem; padding-bottom:3.75rem;}
	.keyword-hg__sec.inner1600 {padding-left: 1.25rem; padding-right: 1.25rem;}
	.keyword-hg__sec--first {padding-top:3.75rem;}

	.keyword-hg__inner {flex-direction:column; gap:2.5rem;}
	.keyword-hg__head, .keyword-hg__body {flex:0 0 auto; width:100%; max-width:100%;}
	.keyword-hg__head--gap2 {gap:0.5rem;}

	/* bg number */
	.keyword-hg__num {font-size:8.625rem; line-height:1; letter-spacing:0; top:1.8rem; transform:none; -webkit-text-stroke-width: 1px;}
	.keyword-hg__num--right {left:0; right:auto;}
	.keyword-hg__num--bottom {bottom: 0; top: auto;}
	.keyword-hg__num--bottom2 {bottom: 3.31rem; top: auto;}
	.keyword-hg__num.op1 {opacity: 1;}
	
	/* head txt */
	.keyword-hg__year {font-size:1.75rem; line-height:1.29; letter-spacing:0; font-weight: 600;}
	.keyword-hg__year-unit {font-size:1.25rem; line-height:1.45; font-weight: 600;}
	.keyword-hg__metric {font-size:1.75rem; line-height:1.29; letter-spacing:0;}
	.keyword-hg__metric-unit {font-size:1.25rem; line-height:1.45; font-weight: 600;}
	.keyword-hg__metric-unit strong {font-weight: 600;}
	.keyword-hg__metric-label {font-size:1.25rem; line-height:1.45;}
	.keyword-hg__title {font-size:1.75rem; line-height:1.29; letter-spacing:0;}
	.keyword-hg__title-sub {font-size:1.375rem; line-height:1.45; margin-top: .5rem;}
	.keyword-hg__title-sub strong {font-weight: 600;}
	
	/* body */
	.keyword-hg__body {gap:2.5rem;}
	.keyword-hg__txt {font-size:0.875rem; line-height:1.43;}
	.keyword-hg__txt b {font-size: 1rem; line-height: 1.5;}
	.keyword-hg__txt .keyword-hg__big {font-size:1rem; line-height:1.5;}
	/* .keyword-hg__txt br.pc {display: block !important;} */

	.keyword-hg__media {aspect-ratio:344/210;}
	.keyword-hg__media-arrow {width:2.5rem; height:2.5rem;}

	#keywordPioneer #sec06 {margin-bottom: -1px;}
	#keywordPioneer #sec06 .keyword-hg__body {flex-direction: column-reverse;}

	.keyword-hg .keyword-hg__num {left: 1.25rem; font-size: 8.625rem;}
	/* 최초에서 최고까지 */
	.keyword-hg #sec01 .keyword-hg__num {top: 1.25rem; bottom: auto;}
	#keywordPioneer #sec02 .keyword-hg__num {bottom: auto; top: 26.94rem;}
	#keywordPioneer #sec02 .keyword-hg__num img {max-width: none; height: 9.5rem;}
	#keywordPioneer #sec03 .keyword-hg__num {bottom: auto; top: 0;}
	#keywordPioneer #sec05 .keyword-hg__num {display: none;}
	#keywordPioneer #sec06 .keyword-hg__num {bottom: 8.25rem; top: auto;}
	#keywordPioneer #sec04 .keyword-hg__title br:nth-of-type(2) {display: none;}
	
	/* 더 큰 시장을 향한 도전 */
	#keywordChallenge #sec03 .keyword-hg__num,
	#keywordChallenge #sec05 .keyword-hg__num,
	#keywordChallenge #sec07 .keyword-hg__num,
	#keywordChallenge #sec09 .keyword-hg__num {bottom: auto; top: 15.06rem;}
	#keywordChallenge #sec06 .keyword-hg__title br:nth-of-type(1),
	#keywordChallenge #sec06 .keyword-hg__title br:nth-of-type(3),
	#keywordChallenge #sec04 .keyword-hg__title br,
	#keywordChallenge #sec05 .keyword-hg__title br {display: none;}

	/* 사람 중심 경영, 시대를 향한 책임  */
	#keywordHuman #sec02 .keyword-hg__num {bottom: 5.38rem; top: auto;}
	#keywordHuman #sec03 .keyword-hg__num {bottom: auto; top: 12.88rem;}
	#keywordHuman #sec04 .keyword-hg__num {bottom: 5.36rem;}
	#keywordHuman #sec05 .keyword-hg__num {bottom: auto; top: 15.06rem;}
	#keywordHuman #sec06 .keyword-hg__num {bottom: 7.28rem;}
	#keywordHuman #sec06 .keyword-hg__title br:nth-of-type(2),
	#keywordHuman #sec05 .keyword-hg__title br:nth-of-type(2),
	#keywordHuman #sec03 .keyword-hg__title br,
	#keywordHuman #sec04 .keyword-hg__title br {display: none;}
}

/* ============================================================
 * Mobile ≤768
 * ============================================================ */
@media (max-width:768px) {
	.keyword-hg__bg img.pc {display: block !important;}
	.keyword-hg__bg img.mob {display: none !important;}
}



/*use_wrap*/
.use_wrap .sub_pc_menu {display: none;}
.use_wrap .sub_menu {display: none;}
.use_wrap .headline {display:block;margin:0 0 0.9375rem;border-bottom:0.0625rem dotted #d6d6d6;}
.use_wrap .headline.margin-top-30 {margin-top: 2.5rem;}
.use_wrap .headline h1,
.use_wrap .headline h2,
.use_wrap .headline h3,
.use_wrap .headline h4,
.use_wrap .headline h5,
.use_wrap .headline h6 {margin:0 0 -0.0625rem;padding:0.3125rem 0.125rem;display:inline-block;color:#363636;border-bottom:0.0625rem solid #767676;margin-top:1.875rem;font-size:1.5rem;}
.use_wrap .headline h5:first-child {margin-top:0;}
.use_wrap .contents-box-inner {font-size:1.25rem; color:#555555; line-height:1.45; padding-top: 9.375rem; padding-bottom: 9.375rem; min-height: 50dvh;}
.use_wrap ol{margin:1em 0; padding-inline-start:0rem }
.use_wrap ol li{list-style-type:decimal}
.use_wrap .disc {padding-inline-start:1.25rem;}
.use_wrap .disc li{list-style-type:disc; padding-left:0.625rem; position:relative;}
.use_wrap .disc li:before{content:''; display:block; width:0.25rem; height:0.25rem; border-radius:50%; background:#ccc; position:absolute; top:0.75rem; left:0;}
.use_wrap .sub_pc_menu {display: none;}
.use_wrap .sub_menu {display: none;}
.use_wrap .sub_vis_txt span.sub_vis_subtit {display: none;}
.use_wrap .sub_visual .sub_vis_txt p{display: none;}

html.popup-open, body.popup-open {overflow:hidden !important;}
#useEmail_Popup {display:none; position:fixed; top:0; left:0; width: 100%; height: 100%; z-index:10000; font-family:'Pretendard'; text-align:left;}
#useEmail_Popup .popup_bg{position:absolute; width:100%; height:100%; background: rgba(0, 0, 0, 0.50);}
#useEmail_Popup .popup_inner{position:absolute; background:#fff; width:50.37288rem; top:50%; left:50%; transform:translate(-50%, -50%); padding:2.8125rem 2.5rem 5rem; max-width: calc(100% - 2.5rem);}
#useEmail_Popup .pop_close{position:absolute; cursor:pointer; right:0; top:-2.1875rem;}
#useEmail_Popup .pop_tit{display:flex; align-items:center; justify-content:space-between; padding-bottom:0.9375rem; border-bottom:0.0625rem solid #000; margin-bottom:1.875rem;}
#useEmail_Popup .pop_tit h4{font-size:1.5625rem; font-weight:700;}
#useEmail_Popup .contents-box-inner {padding: 0; min-height: auto;}
#useEmail_Popup .contents-box-inner ol {margin-top: 0 !important;}

@media screen and (max-width:1024px){
	.sub_title h3 {font-size:1.6875rem;}
	/*use_wrap*/
	.use_wrap{margin-top: 0;}
	.use_wrap .headline.margin-top-30 {margin-top: 1.25rem;}
	.use_wrap .headline h1,
	.use_wrap .headline h2,
	.use_wrap .headline h3,
	.use_wrap .headline h4,
	.use_wrap .headline h5,
	.use_wrap .headline h6 {font-size: 1.125rem;}
	.use_wrap .contents-box-inner {min-height: auto; font-size: 0.875rem; padding-top: 3.75rem; padding-bottom: 3.75rem;}

	
	#useEmail_Popup .popup_inner{padding: 1.5rem 1.25rem; width: 30rem;}
	#useEmail_Popup .pop_tit {padding-bottom: .8rem; margin-bottom: .8rem;}
	#useEmail_Popup .pop_tit h4 {font-size: 1.125rem;}
	#useEmail_Popup .pop_close {width: 1.5rem; top: -2rem;}
}