@import url('/css/swiper-bundle.min.css') layer(swiper);
@import url('/css/common.css') layer(common);
@layer swiper, base, common, layout, main, content;

/* inner */
.wrapper{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inrWidth) * 100%); }
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inrWidth) * 100%); z-index: 2; }
.inr.wide{ max-width: calc(var(--inrWide) * 1rem); }
.inr.narrow{ max-width: calc(var(--inrNar) * 1rem); }

/* header */
:root{
	--header_height: 90rem;
}
header{ position: fixed; inset: 0 0 auto; height: var(--header_height); background: #fff; z-index: 10; }
.header__inr{ display: grid; align-items: center; height: 100%; z-index: unset; }
header .logo{ display: flex; gap: 10rem; }
.logo{ display: inline-block; z-index: 1; }
.logo__a{ font-size: 32rem; font-weight: 600; }

header nav{ display: flex; justify-content: center; height: 100%; }
header .gnb{ display: flex; position: relative; height: 100%; }
header .gnb > li{ display: inline-block; position: relative; height: 100%; pointer-events: auto; }
header .gnb [data-gnb="1"]{ display: flex; align-items: center; height: 100%; padding: 0 37rem; font-size: 18rem; font-weight: 600; }
header .gnb .sub_menu{ visibility: hidden; position: absolute; top: 75%; left: 50%; transform: translateX(-50%); min-width: 120px; width: max-content; background: #fff; border: 1px solid #ddd; opacity: 0; }
header .gnb li:hover .sub_menu{ visibility: visible; top: 80%; opacity: 1; }
header .gnb [data-gnb="2"]{ display: block; padding: 14px; color: #333; border-top: 1px solid #ddd; font-size: 14px; text-align: center; }
header .gnb [data-gnb="2"]:hover{ background: var(--primary); color: #fff; }
header .gnb li:first-child [data-gnb="2"]{ border-top: 0; }

.headerUtile{ display: flex; justify-content: flex-end; gap: 15rem; font-size: 14rem;  color: #fff; }
.headerUtile__a{ display: flex; align-items: center; height:44rem; border-radius: 5em; }
.headerUtile__a.tel{ gap: 9rem; font-weight: 500; padding: 0 25rem; background: #000; }
.headerUtile__a.blog{ justify-content: center; width:44rem; padding-bottom: 0.2%; background: #03c65a; }
.headerUtile__icon{fill:#fff;stroke-width:0px;}
.tel .headerUtile__icon{ position: relative; top: 0; width:20rem;}
.blog .headerUtile__icon{width:25rem;}



/* mobile-menu */
.btn_menu{ position: relative; margin-left: 20rem; width: 25rem; height: 25rem; background: 0; color: inherit; z-index: 1; }
.btn_menu span{ display: block; margin-left: auto; width: 100%; height: 1rem; background: currentcolor; }
.btn_menu span + span{ margin-top: 7rem; }
@media(prefers-reduced-motion:no-preference){
	header,
	.logo__a{ transition: .7s; }
	.gnb .sub_menu,
	.btn_menu span{ transition: .4s; }
}
@media(min-width:1280px){
	.header__inr{ grid-template-columns: repeat(3, 1fr); }
	.btn_menu{ display: none; }
}
@media(max-width: 1279px){
	:root{
		--header_height: 80rem;
	}
	.header__inr{ grid-template-columns: 1fr auto auto }
	header nav{ display: none; }
}

/* 모바일 메뉴 */
.mGnb{ overflow: hidden auto; position: fixed; top: 0; right: 0; transform: translateX(100%); max-width: 280rem; width: 100%; height: 100%; background: var(--white); transition-timing-function: ease-out; z-index: 3; }
.mGnb.active{ transform: translateX(0); }
.mGnb__header{ display: flex; align-items: center; justify-content: flex-end; height: var(--header_height); }
.mGnb [data-gnb="1"]{ display: block; position: relative; padding: 15rem 25rem; border-bottom: 1rem solid #eaeaea; color: #424242; transition: all .3s ease 0s; }
.mGnb > ul > li:first-child > a{ border-top: 1rem solid #eaeaea; }
.mGnb [data-gnb="1"].open::before{ content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 10rem; width: 11rem; height: 7rem; background: url('/images/common/menu_button.svg') no-repeat 50% 0; transition: all .4s ease 0s; background-size: 100%; }
.mGnb [data-gnb="1"].active::before{ transform: translateY(-50%) rotate(180deg); }
.mGnb .sub_menu{ display: none; background: #efefef; }
.mGnb .sub_menu > li{ border-bottom: 1rem solid #dedede; }
.mGnb [data-gnb="2"]{ position: relative; display: block; padding: 15rem 25rem; font-size: 14rem; color: var(--black); }

.mGnb .btn_close{ opacity: 0; flex: 0 0 25rem; display: block; position: relative; margin-right: -100vw; width: 22rem; height: 22rem; background: 0; font-size: 0; }
.mGnb.active .btn_close{ opacity: 1; margin-right: 15rem; }
.mGnb .btn_close::before,
.mGnb .btn_close::after{ content: ''; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1rem; background: var(--black); transform: translateY(-50%) rotate(45deg); }
.mGnb .btn_close::after{ transform: translateY(-50%) rotate(-45deg); }

.cover{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, .4); visibility: hidden; opacity: 0; z-index: 2; }
.cover.active{ visibility: visible; opacity: 1; }
@media(prefers-reduced-motion: no-preference){
	.mGnb{ transition-duration: .5s; }
	.mGnb .btn_close{ transition: .8s; }
	.cover{ transition: .4s; }
}

/* footer */
footer{ padding: 51rem 0 52rem; background: #222; font-size: 15rem; color: #ffffff80; }
footer .logo__a{ position: absolute; top: -4rem; right: -4rem; }
.footer__address{ position: relative; display: flex; flex-wrap: wrap; gap: 12rem 37rem; max-width: 780rem; }
.footer__copyright{ margin-top: 16rem; }
@media(min-width:1280px){
	.footer__inr{ grid-template-columns: auto 1fr; }
	.footer__address span:nth-child(3){ flex: 1 50%; }
}
@media(max-width:767px){
	.footer__address{ flex-direction: column; }
}