@charset "utf-8";

:root{ --header-height: 100rem; }
@media(max-width: 1279px){
	:root{ --header-height: 80rem; }
}

/* inner */
:where(.inr, .wrapper){ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }
.inr-narrow{ max-width: calc(var(--inr-narrow) * 1rem); }

/* header */
header{ --header-border: color-mix(in srgb, currentColor 30%, #0000); position: absolute; inset: 0 0 auto; z-index: 10; height: calc(var(--header-height) + 1px); border-bottom: 1px solid var(--header-border); color: #fff; }
header .inr{ display: grid; align-items: center; height: 100%; }
.logo{ position: relative; display: inline-block; }
.logo__a{ display: block; aspect-ratio: 148/50; height: calc(var(--header-height) / 2); background: url('/images/common/logo-white.png') no-repeat 50% / contain; }
.logo__img{ display: block; width: 100%; height: 100%; opacity: 0; }
.mGnb-open header{ --header-border: #ddd; background: #fff; color: var(--black); }
.mGnb-open .logo__a{ background-image: url('/images/common/logo.png'); }
@media(prefers-reduced-motion:no-preference){
	header, .logo__a{ transition: .3s; }
}
@media(min-width:1280px){
	header .inr{ grid-template-columns: 1fr auto 1fr; }
}
@media(min-width:1921px){
	.logo__a{ background-image: url('/images/common/logo-white-uhd.png'); }
	.mGnb-open .logo__a{ background-image: url('/images/common/logo-uhd.png'); }
}
@media(max-width:1279px){
	header .inr{ grid-template-columns: 1fr auto; }
	.isScrolled{
		header{ --header-border: #ddd; position: fixed; background: #fff; color: var(--black); }
		.logo__a{ background-image: url('/images/common/logo.png'); }
	}
}

/* gnb */
header nav{ position: relative; display: flex; align-items: center; height: 100%; text-transform: uppercase; }
header .gnb{ position: relative; display: flex; height: 100%; }
header .gnb > li{ position: relative; display: inline-block; height: 100%; }
header .gnb [data-gnb="1"]{ display: flex; align-items: center; height: 100%; padding: 0 49rem; font: 500 20rem/1.5 var(--font-pre); }
header .gnb .sub_menu{ visibility: hidden; position: absolute; top: 75%; left: 50%; transform: translateX(-50%); display: grid; gap: 10px; min-width: 140px; width: max-content; padding: 23rem 20rem 19rem; background: #fff; text-align: center; opacity: 0; }
header .gnb li:hover .sub_menu{ visibility: visible; top: 85%; opacity: 1; }
header .gnb [data-gnb="2"]{ font: 500 17rem var(--font-pre); color: #666; text-align: center; }
header .gnb [data-gnb="2"]:hover{ color: var(--primary); }
header .gnb .sub_menu li:first-child [data-gnb="2"]{ border-top: 0; }
@media(prefers-reduced-motion:no-preference){
	.gnb .sub_menu,
	header .gnb [data-gnb="2"]{ transition: .3s; }
}
@media(max-width: 1279px){
	header nav{ display: none; }
}

/* mobile-menu */
.menu-btn{ justify-self: end; position: relative; width: 32px; height: 32px; background: 0; color: inherit; z-index: 1;
	.bar{ position: absolute; inset: 0; margin: auto 0 auto auto; display: block; width: 100%; height: 2px; background: currentcolor; }
	.bar:nth-child(1){ translate: 0 -9px; }
	.bar:nth-child(2){ scale: 1; transform-origin: left; }
	.bar:nth-child(3){ translate: 0 9px; width: 62.5%; }
	&:hover .bar:nth-child(3){ width: 100%; }
	@media(prefers-reduced-motion:no-preference){
		.bar{ transition: .3s, color 0s; }
	}
}
.mGnb-open .menu-btn{
	.bar:nth-child(1){ translate: 0; rotate: 45deg; }
	.bar:nth-child(2){ scale: 0 1; }
	.bar:nth-child(3){ translate: 0; rotate: -45deg; width: 100%; }
}

/* 모바일 메뉴 */
.mGnb-open{ overflow: clip; }
body:not(.mGnb-open) .mGnb{ opacity: 0; visibility: hidden; }
.mGnb{ overflow: hidden auto; position: fixed; inset: var(--header-height) 0 0; z-index: 3; display: grid; background: var(--white); border-top: 1px solid #ddd; text-transform: uppercase;
	.mGnb__ul{ margin: auto; display: grid; gap: 30rem 0; max-width: 1400rem; width: 100%; padding: 30rem 0; }
	.mGnb__ul > li{ padding: 0 min(20rem, 4vw); }
	[data-gnb="1"]{ font: 600 30rem var(--font-pre); color: var(--black); }
	.sub_menu{ margin-top: 22rem; display: flex; flex-wrap: wrap; gap: 9rem 13rem; }
	[data-gnb="2"]{ font: 500 20rem var(--font-pre); color: #999; }
	[data-gnb="2"]:hover{ color: var(--primary); }
	@media(min-width:768px) and (min-height:768px){
		&{ grid-template-rows: 49.2% 1fr; }
		.mGnb__ul{ grid-template-columns: repeat(4, 1fr); }
		.sub_menu{ flex-direction: column; }
		&::after{ content: ''; background: url('/images/common/mGnb-bg.jpg') no-repeat 50% / cover; }
	}
}
.cover{ position: fixed; inset: var(--header-height) 0 0; background: rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; z-index: 2; }
.mGnb-open .cover{ visibility: visible; opacity: 1; }
@media(prefers-reduced-motion: no-preference){
	.mGnb{ transition: .3s; }
	.mGnb [data-gnb="1"], .cover{ transition: .3s; }
}

/* footer */
.top-btn-wrapper{ float: right; position: sticky; bottom: 0; z-index: 9;
	body:not(.isScrolled) &{ opacity: 0; visibility: hidden; }
	.top-btn{ position: absolute; right: 20rem; bottom: 20rem; display: grid; place-items: center; aspect-ratio: 1; width: 70rem; background: #ababab80; border-radius: 50%; }
	.arrow{ width: 16rem; height: auto; fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}
	@media(prefers-reduced-motion:no-preference){
		&{ transition: .3s; }
	}
	@media(min-width:768px){
		.top-btn{ width: 70rem; }
	}
	@media(min-width:1280px){
		.top-btn{ bottom: 57rem; }
	}
	@media(max-width:767px){
		.top-btn{ width: 50rem; }
	}
}

footer{ padding: 70rem 0 67rem; background: #282828; color: #dadada;
	.footer-logo{ width: 148rem; height: auto; }
	.links{ display: flex; gap: 15rem; }
	.links a{ display: inline-block; padding: 4rem 10rem 2rem 9rem; background: #484848; border-radius: 5rem; font-weight: 600; color: #efefef; }
	.address{ margin-top: 28rem; display: flex; flex-wrap: wrap; gap: 9rem 26rem; max-width: 700rem; font: 300 14rem var(--font-pre); }
	.address b{ margin-right: 3rem; font-weight: 500; color: #e6e6e6; }
	.copyright{ margin-top: 26rem; font: 300 13rem var(--font-pre); color: #c7c7c7; text-transform: uppercase; }
	.copyright b{ font-weight: 600; color: #eee; }
	@media(min-width:768px){
		.inr{ display: grid; grid-template-columns: 1fr auto; gap: 0 40rem; }
		.pic{ grid-area: 1/2/3/3; order: 3; align-self: center; translate: 0 3.5%; }
	}
	@media(max-width:767px){
		.footer-logo{ margin-bottom: 30rem; }
	}
}