header.menu{
	display: flex;
	flex-direction:row ;
	width: 100%;
	height: 4rem;
	align-items: center;
	justify-content: center;
	max-width: 1920px;
	margin: 0 auto;
	padding-left: 4rem;
	padding-right: 4rem;
	position: fixed;
	background-color: #fff;
	z-index: 10;
	left: 50%;
	transform: translateX(-50%);
}

header.menu > div .d1{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	column-gap: 0.5rem;
	color: #898989;
    font-size: var(--font-size-12);
}

header.menu > nav{
	display: flex;
	flex-direction: row;
	max-width: 600px;
	margin: 0 auto;
	width: 100%;
	height: 4rem;
}

header.menu > nav > ul{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}

header.menu > nav > ul > li > div{
	/*display: none;*/
}

header.menu > nav > ul > li{
	flex: 1;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #191919;
	border-top:4px solid #fff;
}

header.menu > nav > ul > li > a{
    font-size: var(--font-size-18);
}

header.menu > nav > ul > li:hover{
	border-top:4px solid #0072BC;
}

header.menu > nav > ul > li > a + div{
	display: none;
}

header.menu > nav > ul > li:hover > a + div{
	display: flex;
	width: 100%;
	position: absolute;
	background-color: #F7F7F7;
	z-index: 100;
	left: 0;
	flex-direction: column;
	top:4rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}


header.menu > nav > ul > li:hover > a + div .d0{
	display: flex;
	column-gap: 1rem;
	padding: 1rem;
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	flex-direction: column;
	align-items: flex-start;
	row-gap: 2rem;
}

header.menu > nav > ul > li:hover > a + div .d0:last-child{
	border-bottom: none;
	margin-bottom: 0;
}

header.menu > nav > ul > li:hover > a + div h3{
	font-weight: 700;
	font-size: var(--font-size-22);
	letter-spacing: -0.02em;
	color: #000000;
}

header.menu > nav > ul > li:hover > a + div .c0{
	display: flex;
	flex-direction: row;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	align-items: flex-start;
	justify-content: space-between;
}

header.menu > nav > ul > li:hover > a + div .d0 > ul{
	display: flex;
	column-gap: 2rem;
	flex-direction: row;
	font-size: 0.85rem;
	flex-direction: column;
	row-gap: 0.5rem;
}


header.menu > nav > ul > li:hover > a + div .d0  > ul > li{
	text-align: left;
	font-weight: 600;
	font-size: var(--font-size-16);
	letter-spacing: -0.02em;
	color: #000000;
}

header.menu > nav > ul > li > a + div .d0 > ul > li > ul{
	display: flex;
	flex-direction: column;
	row-gap: 0.7rem;
	font-size: 0.8rem;
	align-items: flex-start;
	margin-top: 0.7rem;
	margin-bottom: 1.5rem;
}

header.menu > nav > ul > li:hover > a + div .d0 > ul > li > ul > li{
	font-size: inherit;
	position: relative;
	font-weight: 400;
	font-size: var(--font-size-14);
	letter-spacing: -0.02em;
	color: #666666;
	white-space: nowrap;
}

header.menu > nav > ul > li:hover > a + div .d0 > ul > li > ul > li:before{
	content: '';
	display: block;
	position: absolute;
	width: 2px;
	height: 2px;
	background-color: #fff;
	left: 0;
	top:0.45rem;
}

header.menu > nav > ul > li:hover > a + div .d0 > ul > li > ul > li a{
	opacity: 0.6;
}

header.menu > nav > ul > li:hover > a + div .d1{
	display: flex;
	flex-direction: row;
	width: 100%;
	background-color: #1a325c;
	margin-top: -1.5rem;
	padding: 1rem;
	align-items: center;
}

header.menu > nav > ul > li:hover > a + div .d1 > a{
	width: 6rem;
}

header.menu > nav > ul > li:hover > a + div .d1 > div{
	display: flex;
	flex-direction: row;
	flex:1;
	align-items: center;
}

header.menu > nav > ul > li:hover > a + div .d1 > div .app-view{
	overflow:hidden;
    flex:1;
    padding: 0 1rem;
}

header.menu > nav > ul > li:hover > a + div .d1 > div .app-list{
	display:flex;
    transition:.35s;
}

header.menu > nav > ul > li:hover > a + div .d1 > div .app-list > li{
	flex:0 0 7rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

header.menu > nav > ul > li:hover > a + div .d1 > div .app-list > li > a{
	display: flex;
	flex-direction: row;
	font-size: 0.8rem;
	column-gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

/* 두번째 메뉴 */
header.menu > nav > ul > li:hover > a + div > ul{
	display: flex;
	flex-direction: row;
	column-gap: 2rem;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	max-width: 1100px;
}

header.menu > nav > ul > li:hover > a + div > ul > li{
	position: relative;
	font-size: var(--font-size-16);
	text-align: left;
	white-space: nowrap;
	color: #000;
	font-weight: 600;
}


header.menu > nav > ul > li:hover > a + div > ul > li > ul{
	display: flex;
	flex-direction: column;
	row-gap: 0.7rem;
	align-items: flex-start;
	margin-top: 0.7rem;
}
header.menu > nav > ul > li:hover > a + div > ul > li > ul > li{
	font-size: var(--font-size-14);
	position: relative;
	white-space: nowrap;
	font-weight: 400;
}
/*
header.menu > nav > ul > li:hover > a + div > ul > li > ul > li:before{
	content: '';
	display: block;
	position: absolute;
	width: 2px;
	height: 2px;
	background-color: #fff;
	left: 0;
	top:0.45rem;he
}
*/

header.menu > nav > ul > li:hover:nth-child(1) > a + div > ul{
	padding-left: 10%;
}

header.menu > nav > ul > li:hover:nth-child(2) > a + div > ul{
	padding-left: 34%;
}

header.menu > nav > ul > li:hover:nth-child(3) > a + div > ul{
	padding-left: 40%;
}

html[lang=en] header.menu > nav > ul > li:hover:nth-child(3) > a + div > ul{
	padding-left: 41%;
}

header.menu > nav > ul > li:hover:nth-child(4) > a + div > ul{
	padding-left: 44%;
}

header.menu .c3{
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	font-weight: 600;
	font-size: var(--font-size-16);
	align-items: center;
	position: relative;
}

header.menu .show-search-area{
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	position: absolute;
	right:0;
	top:-10rem;
	background-color: #fff;
	transition: top 0.5s;
}

header.menu .show-search-area.on{
	display: flex;
	top:-5px;
}

header.menu .show-search-area .cus-submit{
	display: flex;
	font-size: 0;
	width: 1.78rem;
	height: 1.78rem;
	background-image: url(/web/gaon/site/images/new/search.png);
	background-size: cover;
	position: absolute;
	right: 0.5rem;
	top:50%;
	transform: translateY(-50%);
}

header.menu .show-search-area input{
	width: 100%;
}

header.menu .show-search-area .cus-close{
	width: 1.78rem;
	height: 1.78rem;
	font-size: 0;
	position: absolute;
	right: -2rem;
	display: flex;
	top: 50%;
}

header.menu .show-search-area .cus-close:after{
	content: '\f508';
	font-family: 'Material';
	font-size: 2rem;
}

header.menu > nav > ul > li > a + div .d0.Ou > ul > li{
	white-space: nowrap;
}

header.menu > nav > ul > li > a + div .d0.Ou h3{
	white-space: nowrap;
} 

@media screen and (max-width: 1199px) {
	header.menu{
		padding-left: 1rem;
		padding-right: 1rem;
	}

	header.menu > nav > ul > li > a{
		font-size: 0.85rem;
	}

	header.menu > nav > ul > li:hover > a + div h3{
		font-size: 1rem;
	}
	header.menu > nav > ul > li > a{
    	font-size: 0.8rem;
	}

	header.menu .c3{
		font-size:  0.8rem;
	}

	header.menu > nav > ul > li:hover > a + div > ul > li{
		font-size:  0.8rem;
	}

	header.menu > nav > ul > li:hover > a + div > ul > li > ul > li{
		font-size:  0.8rem;
	}
}

@media screen and (max-width: 1024px) {

	header.menu{
		padding-left: 1rem;
		padding-right: 1rem;
		justify-content: space-between;
	}

	header.menu .c1 img{
		height: 1.5rem;
	}

	.cl-mo-menu span{
		font-size: 2rem;
	}

	html.open .menu-mobile { 
		right:0 !important;
		overflow-y: auto;
		transition: all 0.8s;
		box-shadow: -16px -7px 40px -24px rgba(255,255,255,1);
		/*-webkit-overflow-scrolling: touch;*/
	}
		
	.menu-mobile { 
		z-index: 10000; 
		transition: all 0.8s;
		overflow:hidden;
		height:100%;
		position:fixed;
		background-color:#fff;
		width:100%;
		max-width:480px;
		top:0;
		right:-100vw;
		display:block;
	}
		
	.menu-mobile .header{
		display:flex;
		width:100%;
		color:#333;
		padding: 0 1rem;
		border-bottom: 1px solid #ccc;
		height:4rem;
		align-items: center;
		justify-content: space-between;
	}

	.menu-mobile .header img{
		height: 1.5rem;
	}

	.menu-mobile .header .menu-mobile-close-cl{
		display: flex;
	}
	.menu-mobile .header .menu-mobile-close-cl:after{
		font-family: 'Material';
		content: '\e5cd';
		font-size: 2rem;
	}

	.menu-mobile nav > ul{
		display:flex;
		width: 100%;
		flex-direction: column;
	}

	.menu-mobile nav > ul > li{
		display: flex;
		flex-direction: column;
		
		border-bottom: 1px solid #ccc;
	}

	.menu-mobile nav > ul > li > div{
		display: none;
		background-color: #f2f2f2;
		padding: 0.5rem 1.5rem 1.5rem 1.5rem;
	}

	.menu-mobile nav > ul > li > a{
		font-size: 1.4rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.5rem;
	}

	.menu-mobile nav > ul >li > a:after{
		content: '\e5cf';
		font-family: 'Material';
		font-size: 2rem;
	}

	.menu-mobile nav > ul > li > div > div > div >  h3{
		margin-top: 1rem;
	}

	.menu-mobile nav > ul > li > div > div > div > ul{
		font-size: 1.2rem;
		opacity: 0.7;
		margin-top: 1rem;
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
		font-weight: 600;
	}

	.menu-mobile nav > ul > li > div > div > div > ul > li{
		border: 1px solid #333;
		padding: 1rem;
		border-radius: 0.5rem;
	}

	.menu-mobile nav > ul > li > div > div > div > ul > li > ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		row-gap:0.5rem;
		column-gap: 2rem;
		font-size: 1.1rem;
		margin-top: 0.5rem;
		font-weight: 400;
	}

	.menu-mobile nav > ul > li > div > div > div > ul > li > ul > li{
		flex:1 1 calc( (100% - 2rem) / 2);
		line-height: 1.4em;
	}


	.menu-mobile nav > ul > li > div > ul{
		font-size: 1.2rem;
		opacity: 0.7;
		margin-top: 1rem;
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
		font-weight: 600;
	}

	.menu-mobile nav > ul > li > div > ul > li > ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
		row-gap:0.5rem;
		column-gap: 2rem;
		font-size: 1rem;
		margin-top: 0.5rem;
		font-weight: 400;
	}

	.menu-mobile nav > ul > li > div > ul > li > ul > li{
		flex:1 1 calc( (100% - 2rem) / 2);
		line-height: 1.4em;
	}

	.menu-mobile .header > div{
		display: flex;
		flex-direction: row;
		column-gap: 1rem;
		align-items: center;
	}

	.menu-mobile .header > div .cus-lang{
		font-size: 1rem;
		border: 1px solid #ccc;
		padding: 0.4rem 1rem;
		border-radius: 0.4rem;
		font-weight: 600;
	}

	.menu-mobile nav > ul >li a.sub-menu-cl{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		column-gap: 0.5rem;
	}

	.menu-mobile nav > ul >li a.sub-menu-cl:after{
		content: '\e5cf';
		font-family: 'Material';
		font-size: 1.5rem;
	}

	.menu-mobile nav > ul >li a.sub-menu-cl + ul{
		display: none;
		padding-left: 1rem;
		margin-top: 0.5rem;
	}

	.menu-mobile nav > ul >li a.sub-menu-cl + ul > li{
		padding: 0.3rem;
	}
}