@charset "utf-8";

.page-header{ position: relative; z-index: 7; display: flex; align-items: center; justify-content: center; height: clamp(400rem, calc(500 / var(--container) * 100vw), 500rem); isolation: isolate;
	&.misc :is(.breadcrumb, .local-nav){ display: none; }
	.bg{ contain: content; position: absolute; inset: 0; z-index: -1;
		&::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
		.about &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.business &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.housing-area &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.disclosure &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.community &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.misc &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.program &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.product &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		.board &::before{ background-image:url('/assets/images/pages/page-header-1.webp'); }
		@media(prefers-reduced-motion:no-preference){
			&::before{ animation: page-header-bg 1.8s both; }
		}
	}

	.page-header-container{ display: grid; }
	.heading-ko{ font: var(--font-size-50) var(--font-hanam); }
	.heading-en{ margin-top: .5em; font: var(--font-size-20) var(--font-pre); }
	@media(prefers-reduced-motion:no-preference){
		.heading-ko{ animation: slide-up .6s .2s both; opacity: 0; }
		.heading-en{ animation: slide-up .6s .35s both; opacity: 0; }
	}

	.breadcrumb{ font: var(--font-size-16) var(--font-pre);
		.list{ display: flex; align-items: center; justify-content: end; gap: .5625em; }
		.home{ display: block; width: 1em; height: auto; fill: currentColor; } 
		.gt{ stroke: currentColor; fill: none; }
		.item:last-child{ font-weight: 700; }
		.item:empty{ display: none; }
		@media(prefers-reduced-motion:no-preference){
			&{ animation: slide-up .6s .6s both; opacity: 0; }
		}
		@media(min-width:767px){
			&{ grid-area: 1/2/3/3; align-self: center; }
		}
		@media(max-width:767px){
			&{ display: none; }
		}
	}
}

.local-nav{ position: relative; z-index: 7; font: var(--font-size-18-to-14) var(--font-pre);
	.container{ display: flex; height: 3.88888889em; }
	.home{ display: grid; place-items: center; width: auto; height: 100%; aspect-ratio: 1; background: var(--black); }
	.home-icon{ display: block; width: 1.05555556em; height: auto; fill: white; }
	:where(.level-1, .level-2){ position: relative; }
	.toggle-button{ position: relative; height: 100%; padding-inline: 1.66666667em 3.83333333em; background: lightgray; color: var(--black); text-align: left; }
	.level-2 .toggle-button{ font-weight: 700; }
	.toggle-button::after{ content: ''; position: absolute; inset: 0; margin: auto 29rem auto auto; width: 0.55555556em; aspect-ratio: 10/7; background: url('/assets/images/pages/sub-nav-arrow.svg') no-repeat 50% / contain; }
	.toggle-button[aria-expanded="true"]::after{ scale: 1 -1; }
	:where(.main-menu, .sub-menu){ position: absolute; inset: 100% -1px auto; background: #fff; border: 1px solid var(--border-color); box-shadow: 0 10rem 30rem #0000000D; color: var(--black); visibility: hidden; }
	:where(.main-menu, .sub-menu).is-expanded{ visibility: visible; }
	[data-nav-level]{ display: block; padding: 1em 1.61111111em; }
	@media(prefers-reduced-motion:no-preference){
		.toggle-button::after{ transition: .4s; }
		:where(.main-menu, .sub-menu){ transition: .4s; clip-path: inset(0 -40rem 100%); }
		:where(.main-menu, .sub-menu).is-expanded{ clip-path: inset(0 -40rem -50rem); }
	}
	@media(any-hover){
		[data-nav-level]:hover{ background: #F4F4F4; }
	}
	@media(max-width:767px){
		.level-1{ display: none; }
		.level-2{ flex: 1; }
		.toggle-button{ width: 100%; }
	}
}
@keyframes page-header-bg {
	0%{ scale: 1.05; }
	100%{ scale: 1; }
}
@keyframes slide-up {
	0%{ translate: 0 40rem; opacity: 0; }
	100%{ translate: 0; opacity: 1; }
}
@keyframes slide-right {
	0%{ translate: -40rem; opacity: 0; }
	100%{ translate: 0; opacity: 1; }
}

/* main layout */
#main{ min-height:300px; padding: 90rem 0;
	.legal-document .page-heading, .page-heading-block{ margin-bottom: calc(var(--font-size-35) * 2); text-align: center; }
	.page-heading{ min-height: 1lh; font-size: var(--font-size-35); }
	.page-heading-en{ margin-top: .125em; min-height: 1lh; font-weight: 700; font-size: var(--font-size-16); color: #999; }
	.page-heading-en:empty{ display: none; }
	#main:has(.join_area) .sub_title{ display: none; } /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
}