@charset "utf-8";
@layer reset, form;

:root {
	--header-height: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);
	--container-narrow: 1280;
	--container: 1500;
	--container-wide: 1820;
	--container-scale: 0.92;
	--container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
	--primary: #a40000;
	--secondary: #e87a4a;
	--placeholder-bg: #444444;
	--white: #fff;
	--black: #222;
	--border-color: #ddd; /* components.css 공유 */
	--border-color-hover: #444; /* components.css 공유 */
	--font-pret: "Pretendard Variable", "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
	--font-sans: var(--font-pret);
	--toggle-nav-button-size: 32rem;
	/* 
     * 사이트 공통 이미지 플레이스홀더 변수
     * 
     * - --placeholder-image-bg : 기본 배경색 (이미지 로딩 실패 또는 미설정 시 표시)
     * - --placeholder-image-url : 플레이스홀더 로고 이미지 경로
     * - --placeholder-image-size : 플레이스홀더 로고 크기 (최대 크기 제한 포함)
     *
     * layout.css 에 선언하여 전역에서 동일한 디자인 컨셉 유지 및 관리.
     * 접근성 향상을 위해 이미지가 없을 경우에도 시각적 빈 공간이 없도록 함.
     */
	--placeholder-image-bg: #e0e0e0;
	--placeholder-image-url: url("/assets/images/layouts/placeholder-image.png");
	--placeholder-image-size: min(60%, 200rem);
}
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}
}

/* #region view transition, scroll behavior */
/* html{ scroll-padding-top: var(--header-height); } */
@media (prefers-reduced-motion: no-preference) {
	/* @view-transition  { navigation: auto; } */
	html { scroll-behavior: smooth; }
}
/* #endregion view transition, scroll behavior */

.site-header {position: fixed;inset: 0 0 auto;z-index: 10;background: rgb(255 255 255 / 0%);backdrop-filter: blur(18rem);-webkit-backdrop-filter: blur(16px);border-bottom: 1rem solid rgb(255 255 255 / 30%);transition: all .3s;
	.container {display: flex;align-items: center;justify-content: space-between;height: var(--header-height);transition: all .3s;}
	.logo { position: relative; display: inline-block; justify-self: start; }
	.logo-image {display: block;width: auto; height:clamp(30rem, calc(60 / var(--container) * 100vw), 60rem);}
	.logo-image.black { display: none; }
	.main-nav {
		.nav-menu-level-1 {display:flex;}
		.nav-item-level-1 {position:relative;}
		.nav-link-level-1 {display: flex;align-items:center;font: 600 21rem var(--font-sans);color: #fff;height: var(--header-height);min-width: 160rem;justify-content: center;border-bottom: 2rem solid transparent;transition: all .3s;
			summary&::after{ content: ''; flex-shrink: 0; margin-left: 1ch; width: .45em; aspect-ratio: 1; border: solid currentColor; border-width: 0 1rem 1rem 0; rotate: 45deg; translate: 0 -25%; }
			[open] summary&::after{ rotate: -135deg; translate: 0 25%; }
		}
		.nav-menu-level-2 {position: absolute;left: 50%;width: max-content;min-width: 160rem;background: transparent;transform: translateX(-50%);opacity: 0;transition: all .3s;visibility: hidden;padding: 20rem 20rem;}
		.nav-details-level-1:hover .nav-menu-level-2 {opacity: 1; visibility: visible;}
		.nav-link-level-2 {display: block;padding-block: 10rem;font-size: var(--font-size-18);color: #333;transition: all .3s;text-align: center;}
		.nav-link-level-2:hover {color: #a40000;font-weight: 600;}
		.nav-item-level-2 + .nav-item-level-2 {border-top: 0;}
		
		.nav-details-level-1::details-content, .nav-menu-level-2 { transition: 0.3s allow-discrete; }
		.nav-details-level-1 {
			&::details-content { opacity: 0; }
			&[open]::details-content { opacity: 1; }
		}
		.nav-details-level-1:not([open]) .nav-menu-level-2 {}

		@media (width < 1280px) {
			display: none;
		}
	}
	.right-side { display: flex; gap: clamp(10rem, calc(60 / var(--container) * 100vw), 60rem); align-items: center; }
	.right-side .cta-member { display: flex; gap: clamp(10rem, calc(30 / var(--container) * 100vw), 30rem); color: #fff; font-size: var(--font-size-18);}
	.toggle-nav-button {position: relative;display: flex;gap: 8rem;width: var(--toggle-nav-button-size);aspect-ratio: 1;cursor: pointer;flex-direction: column;justify-content: center;height: auto;
		.bar {position: relative;height: 2rem;background: #fff;}
		.bar-1 {}
		.bar-3 {}
	}
}
.site-header.scroll { background: #f2f2f2; transition: all .3s; }
.site-header.scroll .nav-link-level-1 { color: #111;}
.site-header.scroll .right-side .cta-member { color: #333; }
.site-header.scroll .toggle-nav-button .bar { background: #333; }
.site-header.scroll .logo-image.black {display: block; }
.site-header.scroll .logo-image { display: none; }

/*  mega menu hover */
.site-header:hover { background: #f2f2f2; transition: all .2s; }
.site-header:hover .nav-link-level-1 {color: #111;min-width: 180rem;}
.site-header .nav-item:hover .nav-link-level-1 { border-color: #a40000; }
.site-header:hover .right-side .cta-member { color: #333; }
.site-header:hover .toggle-nav-button .bar { background: #333; }
.site-header:hover .logo-image.black {display: block;}
.site-header:hover .logo-image { display: none; }
.site-header .main-nav:hover {}
.site-header .main-nav:hover .nav-menu { opacity: 1; visibility: visible; border: 0; min-width: 180rem; }
.site-header .main-nav::before { content: ''; position: absolute; display: block; width: 100vw; height: 0; background: #f2f2f2; bottom: 0; left: -80rem; z-index: -1; visibility: hidden; transition: all .3s; border-top: 1rem solid #ddd; }
.site-header .main-nav:hover::before { height: 250rem; bottom: -250rem; visibility: visible; }

.toggle-nav {--border-color: #eaeaea;--padding-block: 15rem;--padding-inline: 16rem;left: auto;z-index: 12;width: 100%;height: 100dvh;padding: 0;color: #000;background: #fff;border: 0;
	&::backdrop { background: #000; }
	.toggle-nav-header {display: flex;align-items: center;justify-content: space-between;height: var(--header-height);padding-inline: clamp(0rem, calc(60 / var(--container) * 100vw), 60rem);margin: 0 auto;border-bottom: 1rem solid #ddd;}
	.toggle-nav-close {position: relative;display: block;width: var(--toggle-nav-button-size);aspect-ratio: 1;background: 0;
		&::before, &::after { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background: currentcolor; transform: translateY(-50%) rotate(45deg); content: ""; }
		&::after { transform: translateY(-50%) rotate(-45deg); }
	}
	.logo-image {display: block !important;}
	.nav-menu-level-1 { 
		display: flex; gap: 25rem; justify-content: center; padding-block: clamp(40rem, calc(80 / var(--container) * 100vw), 80rem); background: #fff; 
		
		.nav-item-level-1 {min-width: 280rem;}
		.nav-item-level-1:last-child {}
		.nav-link-level-1 {position: relative;display: block;width: 100%;font-size: var(--font-size-35);font-weight: 700;text-align: left;height: auto;min-width: auto;}
		summary.nav-link-level-1::before { position: absolute; inset: 0; display: block; width: 8rem; aspect-ratio: 1; margin: auto 16rem auto auto; border: solid currentcolor; border-width: 0 1px 1px 0; transform: rotate(45deg) translateY(-75%); content: ""; }
		[open] summary.nav-link-level-1::before { translate: 0 -50%; scale: 1 -1; }
		::details-content { height: 0; overflow: clip; }
		[open]::details-content { height: auto; }
		.nav-menu-level-2 {background: transparent;margin-top: clamp(10rem, calc(30 / var(--container) * 100vw), 30rem);}
		.nav-item-level-2 {border-top: 0;}
		.nav-link-level-2 {position: relative;display: block;font-size: var(--font-size-18);color: #555;padding-block: 5rem;}
		.nav-link-level-2:hover { color: #a40000; font-weight: 700; }
	}
	.bg-nav {position: relative;max-height: 300rem;height: 100%;width: calc(100% - 100rem);margin-inline: auto;overflow: hidden;object-position: center;border-radius: 500rem;background: url(/assets/images/layouts/bg-nav-toggle.jpg) no-repeat center / cover;background-position: bottom;margin-block: clamp(30rem, calc(60 / var(--container) * 100vw), 60rem);}
	.bg-nav::after { content: ''''; display: block; position: absolute; width: 100%; height: 100%; background: #000; top: 0; opacity: .3; }
	.bg-nav img { width: 100%; height: 100%; object-fit: cover; }
	.bg-nav figcaption {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;z-index: 2;font-size: var(--font-size-30);font-family: 'Georgia';text-align: center;text-transform: uppercase;}

	@media (prefers-reduced-motion: no-preference) {
		translate: 100%; transition: 0.6s allow-discrete;
		&::backdrop { opacity: 0; transition: 0.6s allow-discrete; }
		&:popover-open { translate: 0;
			&::backdrop { opacity: 0.6; }
			@starting-style { translate: 100%;
				&::backdrop { opacity: 0; }
			}
		}
		.nav-menu-level-1 {
			.nav-link-level-1, summary::before, ::details-content { transition: 0.6s allow-discrete; }
			::details-content { height: 0; overflow: clip; }
			[open]::details-content { height: auto; }
		}
	}

	@media(max-width: 1279px){
		.nav-menu-level-1 .nav-item-level-1 {min-width: unset;}
		.bg-nav {position: relative;max-height: 150rem;height: 100%;inset: unset;transform: none;margin-bottom: 80rem;width: 90%;}
		.nav-menu-level-1 {display: grid;width: 90%;margin: 0 auto;grid-template-columns: repeat(5, 1fr);}
		.nav-menu-level-1 .nav-item-level-1 { margin-bottom: 20rem; border-bottom: 1rem solid #ddd; padding-bottom: 20rem; }
	}
	@media(max-width: 1023px){
		.nav-menu-level-1 {grid-template-columns: repeat(2, 1fr);gap: 10rem;}
	}

}


.client-marquee { 
	overflow:hidden; width:100%; background: #efefef; 

	.client-track {display:flex;align-items:center;gap: 15rem;padding-block: clamp(10rem, calc(30 / var(--container) * 100vw), 30rem);width:max-content;animation: marquee 40s linear infinite;}
	.client-track img {height: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);flex-shrink:0;}
}

@keyframes marquee {
	from { transform:translateX(0); }
	to { transform:translateX(-50%); }
}

.site-footer {
	position: relative;background: #ffffff;padding-block: clamp(40rem, calc(80 / var(--container) * 100vw), 80rem); border-top:1px solid #ddd;

	.container {display: flex;gap: clamp(30rem, calc(85 / var(--container) * 100vw), 85rem);}
	.logo-footer {max-height: 81rem; width: auto;}
	.footer-wrap {display: flex;flex-direction: column;width: 100%;gap: clamp(20rem, calc(50 / var(--container) * 100vw), 50rem);}
	.terms-nav {display: flex;justify-content: space-between;align-items: center;padding-bottom: 35rem;border-bottom: 1rem solid rgb(0 0 0 / 15%);}
	.terms-nav .name-company {font-size: var(--font-size-25);line-height: 1;}
	.terms-nav .nav-menu {display: flex;gap: 20rem;}
	.terms-nav .nav-menu .nav-item { font-weight: 500; }
	.terms-nav .nav-menu .nav-item:hover { color: #a40000; font-weight: 700; }
	.site-info {position: relative;display: flex;flex-direction: column;gap: 40rem;}
	.site-info .info-bank {display: flex;align-items: center;flex-wrap: wrap;row-gap: 20rem;}
	.site-info .info-bank>span { display: flex; gap: 20rem; font-size: var(--font-size-20); font-weight: 700; align-items: center; }
	.site-info .info-bank>span em {display: flex;padding: 10rem 12rem;font-size: 16rem;background: #a40000;color: rgb(255 255 255 / 80%);line-height: 1;border-radius: 5rem;}
	.site-info .info-bank>p {font-size: var(--font-size-18);padding-left: 30rem;margin-left: 30rem;border-left: 1rem solid;line-height: 1;color: #333;}
	.site-info-list {display: flex;gap: 10rem 30rem;flex-wrap: wrap; max-width: 90%;}
	.site-info-list .site-info-item {display: flex;font-size: 15rem;color: #555;gap: 10rem;letter-spacing: 0%;}
	.site-info-list .site-info-item dt { color: #777; }
	.site-info .copyright {font-size: 13rem;color: #aaa;margin-top: 10rem;}

	.footer-family { position: absolute; width: 220rem; right: 0; top: -15rem; }
	.footer-family .family-site { width: 100%; height: 48rem; padding: 0 46rem 0 16rem; border: 1px solid #ddd; border-radius: 5rem; background: url('/assets/images/components/board/arr_search_select.svg') no-repeat right 16rem center / 12rem,  transparent; appearance: none; cursor: pointer; }
	.footer-family .family-site option { color: #111; background: #fff; }


@media (max-width: 768px) {
	.footer-family { position: relative; width: 100%; max-width: 260rem; top: unset; }
	.footer-family .family-site { height: 46rem; font-size: 14rem; }

}

	@media(max-width: 767px){
		.container { flex-direction: column; align-items: center; }
		.site-footer .container { flex-direction: column; align-items: center; }
		.terms-nav { flex-direction: column; gap: 20rem; padding-bottom: 20rem; }
		.site-info .info-bank>p { margin: 0; padding: 0; border: 0; }
		.site-info-list { flex-direction: column; }
	}
}