@charset "UTF-8";

/*=========================================================
	Header
=========================================================*/
.site-header{
	position:fixed;
	top:0;
	width:100%;
	max-width:120rem;
	z-index:1000;
}

.HeaderBg{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0, 0, 0, 0.20);
	will-change: backdrop-filter;
	transform: translateZ(0);
}

.is-Blur .HeaderBg{
	 backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.HeaderInfo{
	padding:0.5rem 0;
	display:flex;
	justify-content: space-between;
	align-items:center;
	position:relative;
}

/*	MobileMenu
=========================================================*/
.MobileMenu{
	width:2rem;
	height:2rem;
	background-image:url(../../images/icon/ico_menu.png);
	background-size:100% 100%;
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	display:none;
}

/*	로고
=========================================================*/
.LogoFlex{
	display:flex;
	align-items:center;
}

.SiteLink{
	padding-right:0.875rem;
	margin-right:0.875rem;
	position:relative;
}

.SiteLink:after{
	content:"";
	width:1px;
	height:1.75rem;
	background-color:rgba(255,255,255,0.2);
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
}

.SiteLink-link{
	width:5.438rem;
	height:2rem;
	background-image:url(../../images/logo/site_logo_ko.png);
	background-size:100% 100%;
	display:block;
}

.Logo-link{
	width:4.813rem;
	height:3rem;
	background-image:url(../../images/logo/logo.png);
	background-size:100% 100%;
	display:block;
}

/*	LangSelect
=========================================================*/
.SiteHeadMeta{
	display:flex;
	align-items:center;
}

.LangSelect{
	width:6.25rem;
	border:solid 1px rgba(255,255,255,0.3);
	border-radius:0.5rem;
	margin-right:1.25rem;
	position:relative;
}

.LangSelect-text{
	display:block;
	font-size:0.875rem;
	line-height:1.2em;
	color:#fff;
	font-weight:700;
	position:relative;
	padding:0.5rem 1.5rem 0.5rem 0.5rem;
	border-radius:0.5rem;
}

.LangSelect-text:after{
	content:"";
	width:1rem;
	height:1rem;
	background-image:url(../../images/icon/ico_select_arrow.svg);
	background-size:100% 100%;
	position:absolute;
	top:50%;
	right:8px;
	transform:translateY(-50%);
}

.LangSelectList{
	position:absolute;
	top:2.5rem;
	left:0;
	right:0;
	border:solid 1px rgba(255,255,255,0.3);
	border-radius:0.5rem;
	padding:0.25rem 0.25rem;
	background: #fff;
	opacity:0;
	visibility:hidden;
	transition-property: opacity,visibility,transform;
    transition-duration: 0.1s;
}

.is-Open .LangSelect-text{
	background-color:#fff;
	color:#000;
}

.is-Open .LangSelect-text:after{
	background-image:url(../../images/icon/ico_select_arrow_orange.svg);
}

.is-Open .LangSelectList{
	opacity:1;
	visibility:visible;
}

.LangSelectList-text{
	display:block;
	font-size:0.875rem;
	line-height:1.2em;
	color:#000;
	font-weight:700;
	border-radius:0.5rem;
	padding:0.375rem 0.5rem;
}

.is-Current .LangSelectList-text{
	background-color:#FF7800;
	color:#fff;
}

/*언어별*/
.page-template-page-ja-php .LangSelect-text{
	font-family:'Noto Sans JP', Helvetica, "Apple SD Gothic Neo",Dotum, 돋움, sans-serif; 
}

.page-template-page-zh .LangSelect-text{
	font-family:'Noto Sans TC', Helvetica, "Apple SD Gothic Neo",Dotum, 돋움, sans-serif; 
}

.page-template-page-th .LangSelect-text{
	font-family:'Noto Sans TH', Helvetica, "Apple SD Gothic Neo",Dotum, 돋움, sans-serif; 
}

@media screen and (min-width:1200px){
	.LangSelect:not(.is-Open):hover .LangSelect-text{
		background-color:rgba(255, 255, 255, 0.30);
	}
}

/*	ClipCopy
=========================================================*/
.ClipCopy-link{
	display:block;
	width:2rem;
	height:2rem;
	border-radius:100% 100%;
	background-color:#fff;
	position:relative;
}

.ClipCopy-link:after{
	content:"";
	width:1.25rem;
	height:1.25rem;
	background-image:url(../../images/icon/ico_clip.svg);
	background-size:100% 100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

/*	SiteMenu
=========================================================*/
.SiteMenu .menu-wrapper{
	display:flex;
	align-items:center;
}

.SiteMenu .menu-wrapper .menu-item{
	padding:0 1.25rem;
	position:relative;
}

.SiteMenu .menu-wrapper .menu-item + .menu-item:after{
	content:"";
	width:1px;
	height:0.75rem;
	background-color:rgba(255,255,255,0.2);
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
}

.SiteMenu .menu-wrapper .menu-item a{
	display:block;
	position:relative;
	font-size:1rem;
	line-height:1.2em;
	color:#fff;
	font-weight:700;
}

.SiteMenu .menu-wrapper .menu-item a:after{
	content:"";
	width:5.438rem;
	height:0.438rem;
	background-image:url(../../images/icon/ico_nav_current.png);
	background-size:100% 100%;
	position:absolute;
	bottom:-0.688rem;
	left:0;
	width:100%;
	display:none;
}

/*	MobileNav
=========================================================*/
.MobileNav{
	position:absolute;
	top:0;
	width:100%;
	max-width:500px;
	height:100vh;
	height:100dvh;
	margin-left:-1rem;
	background: linear-gradient(180deg, #010A16 0%, #0A2349 100%);
	opacity:0;
	visibility:hidden;
}

.is-NavOpen .MobileNav{
	opacity:1;
	visibility:visible;
}

.MobileNav:before{
	content:"";
	width:5.625rem;
	height:7.938rem;
	background-image:url(../../images/icon/nav_bg1.png);
	background-size:100% 100%;
	position:absolute;
	top:4.813rem;
	right:0;
}

.MobileNav:after{
	content:"";
	width:9.5rem;
	height:10.188rem;
	background-image:url(../../images/icon/nav_bg2.png);
	background-size:100% 100%;
	position:absolute;
	bottom:0;
	left:0;
}

.MobileNavScroll{
	padding:5rem 1rem;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display: flex;
    flex-direction: column;
	overflow:hidden;
    overflow-y: auto;
	z-index:1;
}

.MobileNavFlex{
	width:100%;
	margin-top: auto;
    margin-bottom: auto;
}

.MobileNavLogo{
	width:16rem;
	line-height:0;
	margin:0 auto 1.5rem;
}

/*	MobileNavInfo
=========================================================*/
.MobileNavInfo .menu-wrapper .menu-item{
	text-align:center;
	font-size:0;
	line-height:0;
}

.MobileNavInfo .menu-wrapper .menu-item + .menu-item{
	margin-top:1.25rem;
}

.MobileNavInfo .menu-wrapper .menu-item a{
	font-size:1.25rem;
	line-height:1.2em;
	color:#700;
	color:#fff;
	position:relative;
	display:inline-block;
}

.MobileNavInfo .menu-wrapper .menu-item.is-Current a{
	padding-bottom:1rem;
	background: linear-gradient(90deg, #FFD74B 0%, #FFA655 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.MobileNavInfo .menu-wrapper .menu-item.is-Current a:after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:0.625rem;
	background-image:url(../../images/icon/ico_mo_nav_current.png);
	background-size:100% 100%;
}



/*	responsive
=========================================================*/
@media screen and (min-width:1200px){
	.HeaderInfo{
		height:4rem;
	}
	
	.SiteMenu .menu-wrapper .menu-item a:hover{
		background: linear-gradient(90deg, #FFD74B 0%, #FFA655 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.SiteMenu .menu-wrapper .menu-item.is-Current a{
		background: linear-gradient(90deg, #FFD74B 0%, #FFA655 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.SiteMenu .menu-wrapper .menu-item.is-Current a:after{
		display:block;
	}
	
	.MobileNav{
		display:none !important;
	}
}

@media screen and (max-width:1199px) and (min-width:500px){
	.site-header{
		max-width:500px;
	}
	
	.is-NavOpen .site-header{
		background-color:transparent;
	}
	
	.HeaderInfo{
		justify-content: center;
		height:64px;
		z-index:5;
	}
	
	.is-NavOpen .HeaderInfo{
		justify-content: end;
	}
	
	.is-NavOpen .LogoFlex{
		display:none;
	}
	
	.SiteMenu{
		display:none;
	}
	
	.SiteHeadMeta{
		display:none;
	}
	
	.is-NavOpen .SiteHeadMeta{
		display:flex;
	}
	
	.MobileMenu{
		display:block;
	}
	
	.is-NavOpen .MobileMenu{
		background-image:url(../../images/icon/ico_menu_close.png);
	}
}

@media screen and (max-width:499px) and (min-width:1px){
	.is-NavOpen .site-header{
		background-color:transparent;
	}
	
	.HeaderInfo{
		justify-content: center;
		height:4rem;
		z-index:5;
	}
	
	.is-NavOpen .HeaderInfo{
		justify-content: end;
	}
	
	.is-NavOpen .LogoFlex{
		display:none;
	}
	
	.SiteMenu{
		display:none;
	}
	
	.SiteHeadMeta{
		display:none;
	}
	
	.is-NavOpen .SiteHeadMeta{
		display:flex;
	}
	
	.MobileMenu{
		display:block;
	}
	
	.HeaderInfo{
		padding:0.5rem 0;
	}
	
	/*	MobileMenu
	=========================================================*/
	.is-NavOpen .MobileMenu{
		background-image:url(../../images/icon/ico_menu_close.png);
	}

	/*	로고
	=========================================================*/
	.SiteLink{
		padding-right:0.875rem;
		margin-right:0.875rem;
	}

	.SiteLink:after{
		height:1.75rem;
	}

	.SiteLink-link{
		width:5.375rem;
		height:2rem;
	}

	.Logo-link{
		width:4.813rem;
		height:3rem;
	}

	/*	MobileNav
	=========================================================*/
	.MobileNav{
		margin-left:-1rem;
	}
	
	.MobileNav:before{
		width:5.625rem;
		height:7.938rem;
		top:4.813rem;
	}

	.MobileNav:after{
		width:9.5rem;
		height:10.188rem;
	}

	.MobileNavScroll{
		padding:5rem 1rem;
	}

	.MobileNavLogo{
		width:16rem;
		margin:0 auto 1.5rem;
	}

	/*	MobileNavInfo
	=========================================================*/
	.MobileNavInfo .menu-wrapper .menu-item + .menu-item{
		margin-top:1.25rem;
	}

	.MobileNavInfo .menu-wrapper .menu-item a{
		font-size:1.25rem;
	}

	.MobileNavInfo .menu-wrapper .menu-item.is-Current a{
		padding-bottom:1rem;
	}

	.MobileNavInfo .menu-wrapper .menu-item.is-Current a:after{
		height:0.625rem;
	}
}