@charset "utf-8";

.page-home {
	.player{ display: block; width: 100%; height: auto; aspect-ratio: 16/9; border: 0; pointer-events: none; user-select: none; }
	.section-hero { align-content: center; height: 960rem; min-height: 400rem; max-height: 100dvh; contain: content; padding-block: calc(var(--header-height) + 1.5%) 0.6%; text-align: center; color: #fff; background: var(--black) url("/assets/images/home/hero-bg.webp") no-repeat 50% / cover;
		.heading { font: var(--font-size-30) var(--font-hanam); text-wrap: balance; }
		.Subheading { margin-block: 0.45em 0.68333333em; font: var(--font-size-60) var(--font-hanam); letter-spacing: -0.025em; }
		.description { font: var(--font-size-22) / 1.59090909 var(--font-sans); }
		.scroll-cue { position: absolute; inset: auto 0 42px; display: inline-flex; align-items: center; justify-content: end; gap: 20rem; user-select: none; }
		.scroll-label { font: 13rem var(--font-sans); letter-spacing: 0; text-transform: uppercase; }
		.scroll-circle { display: grid; place-items: center; width: 50rem; aspect-ratio: 1; background: hsla(0, 0%, 100%, 0.2); border-radius: 50%; }
		.scroll-icon { display: block; width: 14rem; height: auto; }
	}
	.section-nav { padding-block: clamp(var(--section-block), calc(70 / var(--container) * 100vw), 70rem); font: 500 var(--font-size-17) var(--font-sans);
		.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(100rem, 1fr)); gap: 50rem 10rem; }
		.link { display: block; }
		.icon { display: block; width: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem); aspect-ratio: 1; margin-inline: auto; background: var(--primary) no-repeat 50%; border-radius: 50%; box-shadow: 0 10rem 15rem hsla(0, 0%, 0%, 0.2); }
		.icon-1 { background-image: url("/assets/images/home/nav-1.svg"); background-size: 60%; }
		.icon-2 { background-image: url("/assets/images/home/nav-2.svg"); background-size: 68%; }
		.icon-3 { background-image: url("/assets/images/home/nav-3.svg"); background-size: 61%; }
		.icon-4 { background-image: url("/assets/images/home/nav-4.svg"); background-size: 53%; }
		.icon-5 { background-image: url("/assets/images/home/nav-5.svg"); background-size: 60%; }
		.icon-6 { background-image: url("/assets/images/home/nav-6.svg"); background-size: 59%; }
		.icon-7 { background-image: url("/assets/images/home/nav-7.svg"); background-size: 60%; }
		.icon-8 { background-image: url("/assets/images/home/nav-8.svg"); background-size: 70%; }
		.icon-9 { background-image: url("/assets/images/home/nav-9.svg"); background-size: 54%; }
		.label-block { position: relative; display: block; min-height: 1lh; margin-top: 1.17647059em; }
		.label { position: absolute; left: 50%; translate: -50%; }
		@media (prefers-reduced-motion: no-preference) {
			.icon { transition: 0.3s; }
			.link-2.se-visible { transition-delay: 0.1s; }
			.link-3.se-visible { transition-delay: 0.2s; }
			.link-4.se-visible { transition-delay: 0.3s; }
			.link-5.se-visible { transition-delay: 0.4s; }
			.link-6.se-visible { transition-delay: 0.5s; }
			.link-7.se-visible { transition-delay: 0.6s; }
			.link-8.se-visible { transition-delay: 0.7s; }
			.link-9.se-visible { transition-delay: 0.8s; }
		}
		@media (any-hover) {
			.link:hover .icon { background-color: #f15a29; }
		}
	}
	.section-eyebrow { font: var(--font-size-17) var(--font-hanam); letter-spacing: 0; text-align: center; color: var(--secondary); text-transform: uppercase; }
	.section-heading { margin: 0.4em auto 0; font: 600 var(--font-size-50) var(--font-sans); letter-spacing: -0.025em; text-align: center; }
	.section-brand { padding-block: clamp(var(--section-block), calc(140 / var(--container) * 100vw), 140rem); isolation: isolate;
		.horizontal-scroll-sticky { overflow: visible; }
		.container::before { position: absolute; top: 64%; left: 97.9%; z-index: -1; display: block; width: 566rem; aspect-ratio: 566 / 700; background: url("/assets/images/home/brand-ampersand.svg") no-repeat 50% / contain; translate: -50% -50%; opacity: 0.05; content: ""; }
		.section-heading { max-width: 30ch; }
		.list { display: flex; align-items: start; margin-top: 60rem; }
		.item { display: grid; flex: 1 0 100%; width: calc(var(--container-scale) * 100vw); }
		.visual { width: 100%; min-width: 0; aspect-ratio: 75 / 49; background: var(--image-placeholder-bg) no-repeat 50% / cover; border-radius: 10rem; }
		.visual-1 { background-image: url("/assets/images/home/brand-visual-1.webp"); }
		.visual-2 { background-image: url("/assets/images/home/brand-visual-2.webp"); }
		.visual-3 { background-image: url("/assets/images/home/brand-visual-3.webp"); }
		.link { display: block; align-content: center; padding-top: 8%; }
		.title { margin-bottom: 0.375em; font: 700 var(--font-size-40) var(--font-sans); }
		.description { font: var(--font-size-20-to-14) / 1.5 var(--font-sans); color: rgb(from var(--black) r g b / 0.8); }
		.cta { position: relative; display: block; width: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem); aspect-ratio: 1; margin: clamp(30rem, calc(57 / var(--container) * 100vw), 57rem) 0 0 1rem; color: var(--secondary); }
		.cta::before { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; clip-path: polygon(0 0, 100% 0, 100% calc(50% - 15.5rem), 90% calc(50% - 15.5rem), 90% calc(50% + 15.5rem), 100% calc(50% + 15.5rem), 100% 100%, 0 100%); content: ""; }
		.cta::after { position: absolute; top: 50%; right: 0; font: 13rem var(--font-hanam); text-transform: uppercase; translate: 50% -50%; content: "more"; }
		@media (width >= 768px) {
			.link { padding-inline: clamp(3ch, calc(60 / var(--container) * 100vw), 60rem) 3ch; }
			.item { grid-template-columns: repeat(2, 50%); }
			.visual { height: 100%; }
		}
		@media (width < 768px) {
			.item { flex-basis: 80%; }
			.item + .item { margin-left: clamp(16rem, calc(32 / var(--container) * 100vw), 32rem); }
			.description br { display: none; }
		}
	}
	.section-social { padding-block: clamp(var(--section-block), calc(70 / var(--container) * 100vw), 70rem) clamp(var(--section-block), calc(140 / var(--container) * 100vw), 140rem); color: #212121;
		.section-heading { max-width: 22ch; }
		.link-block { display: grid; gap: 16rem clamp(8rem, calc(25 / var(--container) * 100vw), 25rem); margin-top: clamp(50rem, calc(67 / var(--container) * 100vw), 67rem); }
		.link { --symbol-half-size: clamp(30rem, calc(55 / var(--container) * 100vw), 55rem); display: grid; }
		.image-block { display: block; width: 100%; border-radius: 10rem; }
		.label { padding-inline: 1.5em; font: 600 var(--font-size-20-to-14) var(--font-sans); letter-spacing: -0.025em; }
		.symbol { display: block; width: calc(var(--symbol-half-size) * 2); aspect-ratio: 1; border: clamp(3rem, calc(5 / var(--container) * 100vw), 5rem) solid #fff; border-radius: 50%; }
		.link-youtube { grid-template: 1fr var(--symbol-half-size) var(--symbol-half-size) / 1fr auto calc(var(--symbol-half-size) * 0.72727273); }
		.image-block-youtube { grid-area: 1 / 1 / 3 / 4; aspect-ratio: 750 / 422; background: var(--image-placeholder-bg) url("/assets/images/home/social-bg-youtube.webp") no-repeat 50% / cover; }
		.label-youtube { align-self: center; }
		.symbol-youtube { grid-area: 2 / 2 / 3 / 3; background: #ce1312 url("/assets/images/home/social-symbol-youtube.svg") no-repeat 50% / 35%; }
		.link-instagram { grid-template: var(--symbol-half-size) var(--symbol-half-size) 1fr auto / 1fr; justify-items: center; }
		.image-block-instagram { grid-area: 2 / 1 / 4 / 2; aspect-ratio: 350 / 422; background: linear-gradient(0deg, rgb(from var(--secondary) r g b / 0.87) 7%, #0000 31%), var(--image-placeholder-bg) url("/assets/images/home/social-bg-instagram.webp") no-repeat 50% / cover; }
		.label-instagram { grid-area: 3 / 1 / 4 / 2; align-self: end; padding-bottom: 11.5%; text-align: center; color: #fff; }
		.symbol-instagram { grid-area: 1 / 1 / 3 / 2; background: url("/assets/images/home/social-symbol-instagram.svg") no-repeat 50% / 30%, linear-gradient(180deg, #7324c1, #c42968, #dd913f); }
		.link-naver { grid-template: auto 1fr var(--symbol-half-size) var(--symbol-half-size) / 1fr; justify-items: center; }
		.image-block-naver { grid-area: 1 / 1 / 4 / 2; aspect-ratio: 350 / 422; background: linear-gradient(180deg, rgb(from var(--secondary) r g b / 0.87) 7%, #0000 31%), var(--image-placeholder-bg) url("/assets/images/home/social-bg-naver.webp") no-repeat 50% / cover; }
		.label-naver { grid-area: 1 / 1 / 2 / 2; align-self: end; padding-top: 11.5%; text-align: center; color: #fff; }
		.symbol-naver { grid-area: 3 / 1 / 5 / 2; background: #31a936 url("/assets/images/home/social-symbol-naver.svg") no-repeat 50% / 33%; }
		@media (prefers-reduced-motion: no-preference) and (width >= 768px) {
			.link-instagram { transition-delay: 0.1s; }
			.link-naver { transition-delay: 0.2s; }
		}
		@media (width >= 768px) {
			.link-block { grid-template-columns: 50% 1fr 1fr; }
		}
		@media (width < 768px) {
			.link-block { grid-template-columns: 1fr 1fr; }
			.link-youtube { grid-column: 1 / -1; }
		}
	}
	.section-news { --image-placeholder-bg: #fff; --column-gap: clamp(8rem, calc(25 / var(--container) * 100vw), 25rem); --margin-block: clamp(15.5rem, calc(20 / var(--container) * 100vw), 19rem); padding-block: clamp(var(--section-block), calc(139 / var(--container) * 100vw), 139rem) clamp(var(--section-block), calc(137 / var(--container) * 100vw), 137rem); background: #edf5fb;
		.list { margin-top: clamp(50rem, calc(64 / var(--container) * 100vw), 64rem); }
		.thumbnail { display: block; border-radius: 10rem; }
		.date { display: block; font: 500 var(--font-size-16) var(--font-sans); letter-spacing: 0; color: #bbb; }
		.item-1 {
			.link { display: block; }
			.thumbnail { aspect-ratio: 675 / 435; }
			.title { max-width: 28ch; margin-block: 37rem 17rem; font: 600 var(--font-size-26) var(--font-sans); letter-spacing: -0.025em; }
			.excerpt { font: var(--font-size-18-to-14) var(--font-sans); letter-spacing: -0.025em; color: #666; }
			.date { margin-top: 1.0625em; }
		}
		.item:not(.item-1) {
			.link { display: grid; grid-template: "title thumbnail" "date thumbnail" / 1fr clamp(100rem, calc(200 / var(--container) * 100vw), 200rem); gap: calc(var(--font-size-22) * 1.2) 32rem; padding-block: var(--margin-block); border: 0 solid rgb(from var(--black) r g b / 0.15); border-top-width: 1px; }
			&:last-child .link { border-bottom-width: 1px; }
			.thumbnail { grid-area: thumbnail; aspect-ratio: 20 / 15; }
			.title { grid-area: title; align-self: end; font: 600 var(--font-size-22) / 1.36363636 var(--font-sans); letter-spacing: -0.025em; -webkit-line-clamp: 2; }
			.date { grid-area: date; align-self: start; }
		}
		@media (any-hover) {
			.link:hover .title { color: var(--secondary); }
		}
		@media (width >= 768px) {
			.list { display: grid; grid-template-columns: repeat(2, 50%); align-items: start; }
			.item-1 { grid-row: 1 / 4; margin-right: clamp(var(--column-gap), calc(75 / var(--container) * 100vw), 75rem); }
			.item:not(.item-1) { margin-inline: var(--column-gap); }
		}
		@media (width < 768px) {
			.item-1 { margin-bottom: calc(var(--margin-block) * 2); }
		}
	}
	.section-contact { padding-block: clamp(var(--section-block), calc(139 / var(--container) * 100vw), 139rem) clamp(var(--section-block), calc(140 / var(--container) * 100vw), 140rem); background: #fbfbfb url("/assets/images/home/contact-bg.webp") no-repeat 25% 0 / cover;
		.content-block { display: grid; gap: 40rem clamp(10rem, calc(74 / var(--container) * 100vw), 74rem); margin-top: 83rem; }
		.sub-section + .sub-section { border-top: 1px solid #d5d5d5; }
		.title { font: 700 var(--font-size-20) var(--font-sans); }
		.title-directions { margin-bottom: 0.85714286em; font-size: var(--font-size-35); }
		.office-address { font-size: var(--font-size-18); }
		.directions-list { display: grid; gap: 1em; margin-top: 34rem; font-size: var(--font-size-18); }
		.directions-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5lh 1em; }
		.directions-label { position: relative; display: inline-flex; align-items: center; gap: 0.5em; padding-left: 2.72222222em; font-weight: 700; }
		.directions-label::before { position: absolute; top: 50%; left: 0; display: block; flex-shrink: 0; width: 2.22222222em; aspect-ratio: 1; background: #fff no-repeat 50% / auto 40%; border: 1px solid var(--secondary); border-radius: 50%; translate: 0 -50%; content: ""; }
		.directions-label-bus::before { background-image: url("/assets/images/home/contact-bus.png"); }
		.directions-label-subway::before { background-image: url("/assets/images/home/contact-subway.png"); }
		.sub-section-inquiries { display: flex; align-items: center; gap: 37rem; margin-top: clamp(30rem, calc(50 / var(--container) * 100vw), 50rem); padding-top: clamp(30rem, calc(42 / var(--container) * 100vw), 42rem); }
		.call-link { font: 700 var(--font-size-35) var(--font-sans); }
		.sub-section-hours { display: flex; gap: 37rem; margin-top: clamp(30rem, calc(43 / var(--container) * 100vw), 43rem); padding-top: clamp(30rem, calc(51 / var(--container) * 100vw), 51rem); }
		.hours-table { font-size: var(--font-size-18);
			th { border-right: 1.11111111em solid #0000; }
			tr + tr > * { border-top: 0.38888889em solid #0000; }
		}
		.root-map { z-index: 0; width: 100%; overflow: hidden; border: 1px solid #e1e1e1; border-radius: 10rem;
			.wrap_map { height: 100%; }
			svg { pointer-events: none; }
			.map_border, .wrap_controllers, .cont { display: none; }
			@media (width >= 768px) {
				.wrap_map { height: 618rem; }
			}
			@media (width < 768px) {
				& { aspect-ratio: 1; }
			}
		}
		.map-link-block { --block-height: 5em; position: relative; display: flex; align-items: center; justify-content: center; gap: 1lh clamp(2ch, calc(50 / var(--container) * 100vw), 50rem); height: var(--block-height); margin: calc(var(--block-height) * -0.5) clamp(16rem, calc(40 / var(--container) * 100vw), 40rem) 0; padding: 1ch; font-size: var(--font-size-16-to-12); color: #fff; background: var(--secondary); border-radius: 10rem; }
		.map-link { display: inline-flex; align-items: center; gap: 10rem; }
		.map-link::before { display: inline-block; width: 1.875em; aspect-ratio: 1; background: no-repeat 50% / contain; content: ""; }
		.map-link-naver::before { background-image: url("/assets/images/home/contact-naver.png"); }
		.map-link-kakao::before { background-image: url("/assets/images/home/contact-kakao.png"); }
		.map-link-google::before { background-image: url("/assets/images/home/contact-google.png"); }
		@media (width >= 768px) {
			.space { margin-right: 4ch; }
		}
		@media (width >= 1280px) {
			.content-block { grid-template-columns: 1fr 50%; }
			.info-block { margin-top: -5rem; }
			.hours-table { margin-top: -4rem; }
		}
		@media (width < 768px) {
			.space { display: none; }
		}
	}
}

.page-intro {
	--font-size-35: clamp(14rem, calc(38 / var(--container) * 100vw), 38rem);
	& { display: grid; min-height: 100dvh;
		@media (orientation: landscape) { grid-template: "logo home" 1fr "logo chart" 1fr / 1fr auto; background: url("/assets/images/page-intro/bg-pc.webp") no-repeat 20% / cover; }
		@media (orientation: portrait) { grid-template: "logo logo" 1fr "home chart" auto / 1fr 1fr; background: url("/assets/images/page-intro/bg-mob.webp") no-repeat 60% 0 / cover; }
		@media (prefers-reduced-motion: no-preference) {
			html:has(&){
				@view-transition { navigation: none; }
			}
		}
	}
	.logo { position: relative; top: clamp(20rem, calc(60 / var(--container) * 100vw), 60rem); left: clamp(4vw, calc(80 / var(--container) * 100vw), 80rem); display: block; width: auto; height: clamp(43rem, calc(75 / var(--container) * 100vw), 75rem); grid-area: logo; }
	.link { display: grid; grid-template: "icon arrow" 1fr "en en" "title title" / 1fr auto; grid-area: logo; gap: 0.48571429em; padding: clamp(24rem, calc(60 / var(--container) * 100vw), 60rem) clamp(12rem, calc(49 / var(--container) * 100vw), 49rem) clamp(24rem, calc(65 / var(--container) * 100vw), 65rem); font-size: var(--font-size-35); background: hsla(0, 0%, 100%, 0.25); backdrop-filter: blur(10px); isolation: isolate;
		&.link--home { grid-area: home; }
		&.link--chart { grid-area: chart; }
		@media (any-hover) {
			&::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--secondary), var(--primary)); content: ""; }
			&:not(:hover)::before { opacity: 0; }
			&:not(:hover) .arrow { rotate: 45deg; opacity: 0; }
			&:hover :is(.title-en, .title) { color: #fff; }
		}
		@media (prefers-reduced-motion: no-preference) {
			&, &::before, .arrow, .title-en, .title { transition: 0.3s; }
		}
		@media (width >= 768px) { border-left: 1px solid #fff;
			&.link--home { border-bottom: 1px solid #fff; }
		}
		@media(width<768px){
			border-top: 1px solid #fff;
			&.link--home { border-right: 1px solid #fff; }
		}
	}
	.icon { margin-bottom: 1em; display: block; grid-area: icon; width: 3.14285714em; aspect-ratio: 1; background: #fff no-repeat 50% / contain; border-radius: 50%; }
	.icon--home { background-image: url("/assets/images/page-intro/intro-home.svg"); }
	.icon--chart { background-image: url("/assets/images/page-intro/intro-chart.svg"); }
	.arrow { display: block; grid-area: arrow; width: 0.94285714em; aspect-ratio: 1; margin-top: 1.57142857em; background: url("/assets/images/page-intro/arrow.svg") no-repeat 50% / contain; translate: 0 -50%; }
	.title-en { grid-area: en; font: clamp(7rem, calc(14 / var(--container) * 100vw), 14rem) var(--font-hanam); letter-spacing: -0.025em; color: var(--secondary); text-transform: uppercase; }
	.title { grid-area: title; font: 600 var(--font-size-35) var(--font-sans); letter-spacing: -0.025em; }
}