.gnav{

	height:100%;

	display:flex;

	align-items:center;

	justify-content:center;

	gap:48px;

}

.gnav > li{

	position:relative;

}

.gnav > li > a{

	height:100%;
	display:flex;
	align-items:center;
	font-size:11px;
	letter-spacing:.22em;
	position:relative;
	padding-bottom:2px;
}

.gnav > li > a::after{

	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:0;
	height:1px;
	background:var(--accent);
	transform:translateX(-50%);
	transition:.3s ease;

}

.gnav > li > a:hover::after{

	width:24px;

}

.gnav > li.current > a::after{
	width:24px;
}


/*Sub Menu
---------------------------------------------------------------------------*/
.sub{

	position:absolute;

	top:100%;
	left:50%;

	transform:translateX(-50%);

	min-width:220px;

	background:#fff;

	border:1px solid rgba(0,0,0,.06);

	padding:12px 0;

	opacity:0;

	visibility:hidden;

	transition:.3s;

}

.has-sub:hover .sub{

	opacity:1;

	visibility:visible;

}
.sub li{

	text-align:center;

}
.sub a{

	display:block;

	padding:10px 20px;

	font-size:11px;

	letter-spacing:.15em;

	position:relative;

}

.sub a::after{

	content:"";

	position:absolute;

	left:50%;

	bottom:8px;

	width:0;

	height:1px;

	background:var(--accent);

	transform:translateX(-50%);

	transition:.3s ease;

}

.sub a:hover::after{

	width:24px;

}

.sub li.current > a{
	color:var(--accent);
}

.sub li.current > a::after{
	width:24px;
}

/* =========================================================
SP Menu
========================================================= */

body.menu-open{
	overflow:hidden;
}

/* =========================================================
Hamburger
========================================================= */

.menu-btn{

	display:none;

	position:absolute;
	right:30px;
	top:50%;

	transform:translateY(-50%);

	width:26px;
	height:18px;

	background:none;
	border:none;

	cursor:pointer;

	z-index:3000;
}

.menu-btn > span{

	display:block;

	width:26px;
	height:1px;

	background:#111;

	flex-shrink:0;

	transition:.35s ease;
}

.menu-btn.active span:nth-child(1){

	transform:
	translateY(8.5px)
	rotate(45deg);
}

.menu-btn.active span:nth-child(2){

	opacity:0;
}

.menu-btn.active span:nth-child(3){

	transform:
	translateY(-8.5px)
	rotate(-45deg);
}

.sp-nav > li.current > a,
.sp-sub li.current > a,
.sp-has-sub.current > .sp-sub-btn{
	color:var(--accent);
}

.sp-nav > li.current > a::before,
.sp-sub li.current > a::before,
.sp-has-sub.current > .sp-sub-btn::before{
	display:none;
}

/* =========================================================
SP MENU BASE
========================================================= */

.sp-menu{
	display:none;
}


/* =========================================================
SP NAV
========================================================= */

.sp-nav{

	padding:40px 30px 0;
}

.sp-nav > li{

	border-bottom:
	1px solid rgba(0,0,0,.08);
	opacity:0;
	transform:translateY(10px);
}

.sp-menu.active .sp-nav > li{
	opacity:1;
	transform:none;
}

.sp-nav > li > a,
.sp-sub-btn{

	width:100%;

	display:flex;
	align-items:center;
	justify-content:space-between;

	padding:22px 0;

	background:none;
	border:none;

	font-size:13px;
	font-weight:400;

	letter-spacing:.22em;

	text-align:left;

	cursor:pointer;
}

.sp-nav > li.current > a{
	color:var(--accent);
}

/* =========================================================
SP SUB
========================================================= */

.sp-sub{

	max-height:0;

	overflow:hidden;

	transition:
	max-height .45s ease;
}

.sp-has-sub.active .sp-sub{

	max-height:320px;
}

.sp-sub a{
	display:block;
	padding:
	14px
	0
	14px
	20px;
	font-size:11px;
	letter-spacing:.18em;
	color:#666;
}

.sp-has-sub.current > .sp-sub-btn{
	color:var(--accent);
}


/* =========================================================
ARROW
========================================================= */

.sp-arrow{

	width:8px;
	height:8px;

	border-right:1px solid #111;
	border-bottom:1px solid #111;

	transform:rotate(45deg);

	transition:.35s ease;
}

.sp-has-sub.active .sp-arrow{

	transform:rotate(-135deg);
}


/* =========================================================
BOTTOM
========================================================= */

.sp-bottom{

	padding:40px 30px 60px;
	display:grid;
	gap:24px;
	border-top:1px solid rgba(0,0,0,.06);
	margin-top:40px;
	text-align:center;

}

.sp-bottom > a{
	display:block;
	font-size:11px;
	letter-spacing:.22em;
}

.sp-lang{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:10px;
}

/* =========================================================
SP SOCIAL
========================================================= */
.sp-social{

	display:flex;

	justify-content:center;

	gap:32px;

	padding:
	10px 30px 60px;

}

.sp-social a{

	width:40px;
	height:40px;

	display:flex;

	align-items:center;
	justify-content:center;

	border:1px solid rgba(0,0,0,.08);

	border-radius:50%;

	font-size:14px;

	color:#111;

	transition:.35s ease;

}

.sp-social a:hover{

	color:var(--accent);

	border-color:var(--accent);

	transform:translateY(-2px);

}
/* =========================================================
Tablet / SP
========================================================= */

@media(max-width:1024px){

	/* ---------- Header ---------- */

	.header-top{

		grid-template-columns:1fr;

		justify-items:center;
	}

	.header-top-left,
	.header-top-right{

		display:none;
	}

	.header-nav{

		display:none;
	}

	.menu-btn{

		display:flex;

		flex-direction:column;

		justify-content:space-between;
	}


	/* ---------- Drawer ---------- */

.sp-menu{

	display:block;

	position:fixed;

	left:0;

	width:100%;

	background:#fff;

	z-index:2000;

	overflow-y:auto;

	-webkit-overflow-scrolling:touch;

	transform:translateX(100%);

	opacity:0;

	visibility:hidden;

	pointer-events:none;

	transition:
		transform .55s cubic-bezier(.22,.61,.36,1),
		opacity .35s ease,
		visibility .35s ease;
}

	.sp-menu.active{

		transform:translateX(0);

		opacity:1;

		visibility:visible;

		pointer-events:auto;
	}
}