@charset "utf-8";

/* 2023.12.06 kang nuri */
/* header.css */


/**************************************************/

#header{
	position: absolute;
	top: 0;
	width: 100%;
	color: #fff;
	z-index: 999 !important;
}

.header_logo, .header_menu, .header_lang{
	display: inline-block;
}

.header_logo{
	position: relative;
	margin: 56px 0;
}

.header_logo > a{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.header_logo svg{
	float: left;
}

.header_menu{
	margin-top: 54px;
	padding-left: 172px;
}

.header_menu_list > li{
	display: inline-block;
	float: left;
	line-height: 40px;
	margin-right: 30px;
	font-size: 14px;
}

.header_menu_list > li:last-child{
	margin-right: 0;
}

.header_menu_list > li.active{
	border-bottom: solid 1px #fff;
	font-weight: 600;
}

.header_menu_list_depth2{
	display: none;
	position: absolute;
}

.header_menu_list_depth2.active{
	display: block;
}

/*.header_menu_list_depth2.about{
	margin-left: -19px;
}

.header_menu_list_depth2.business{
	margin-left: -40.18px;
}

.header_menu_list_depth2.sustain{
	margin-left: -46.03px;
}

.header_menu_list_depth2.intra{
	margin-left: -5.72px;
}*/

.header_menu_list_depth2 > li{
	display: block;
	line-height: 22px;
	margin-bottom: 16px;
	font-weight: normal;
}

.header_menu_list_depth2 > li:first-child{
	margin-top: 8px;
}

.header_menu_list_depth2 > li.active{
	color: #c4c4c4;
	font-weight: 600;
}

.header_logo{
	float: left;
}

.header_lang{
	margin-top: 54px;
	float: right;
}

.header_lang_list > li{
	display: inline-block;
	float: left;
	margin-left: 10px;
	line-height: 40px;
	font-size: 12px;
}

.header_lang_list > li span{
	display: inline-block;
	width: 1px;
	height: 11px;
	background-color: #fff;
	margin-left: 10px;
	vertical-align: middle;
}

.header_lang_list > li:first-child{
	margin-left: 0;
}

/* MOBILE ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width:1024px){

	#header{
		position: fixed;
	}

	.header_logo{
		left: 50%;
    	transform: translateX(-50%);
		margin: 24px 0;
		float: none;
	}

	.header_logo svg{
		height: 28px;
	}

	.header_menu_toggle{
		position: absolute;
		top: 32px;
		left: 16px;
		width: 16px;
		height: 13px;
		background-image: url("../img/header/ico_menu.png");
		background-size: 100% auto;
		z-index: 999;
	}

	.header_menu{
		display: none !important;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		width: 50.25%;
		height: 100vh;
		background-color: rgba(14, 35, 142, 0.9);
		padding-left: 0;
		padding: 0 24px;
		margin-top: 0;
		padding-top: 70px;
	}

	.header_menu.active{
		display: block !important;
		padding-bottom: 33px;
	}
	
	.header_menu.active.only_pc{
		display: none !important;
	}

	.header_menu_list{
		height: 100%;
		overflow: auto;
	}

	.header_menu_list > li{
		float: none;
		width: 100%;
		margin-right: 0;
		margin-bottom: 33px;
		line-height: normal;
	}

	.header_menu_list > li:last-child{
		margin-bottom: 55px;
	}

	.header_menu_list > li > a{
		display: inline-block;
		width: 100%;
		border-bottom: solid 1px #ffffff;
		margin-bottom: 15px;
		line-height: 40px;
		font-weight: 700;
	}

	.header_menu_list_depth2{
		position: relative;
		display: inline-block;
	}

	.header_menu_list_depth2 > li{
		margin-bottom: 18px;
		line-height: 20px;
	}

	.header_menu_list_depth2 > li:first-child{
		margin-top: 0;
	}

	.header_menu_list_depth2 > li:last-child{
		margin-bottom: 0;
	}

	.header_lang{
		position: absolute;
		top: 34px;
		right: 16px;
		margin-top: 0;
		float: none;
	}

	.header_lang_list{
		float: left;
		padding-top: 13px;
	}

	.header_lang_list > li{
		display: block;
		margin-left: 0;
		font-size: 8px;
		line-height: 13px;
		float: none;
		margin-bottom: 5px;
	}

	.header_lang_list > li:first-child{
		margin-top: 5px;
	}

	.header_lang_list > li:last-child{
		margin-bottom: 0;
	}

	.header_lang_list > li a{
		display: none;
		display: inline-block;
		width: 26px;
		text-align: center;
		opacity: 0;
	}

	.header_lang_list > li a.active{
		opacity: 1;
	}

	.header_lang_list > li a.font_smbold{
		position: absolute;
		top: 0;
		opacity: 1;
	}

	.header_lang_list > li span{
		display: none;
	}

	.header_lang > div.earth{
		display: inline-block;
		width: 9px;
		height: 9px;
		background-image: url("../img/header/ico_lang.png");
		background-size: 100% auto;
		float: left;
		margin-top: 3px;
	}

	.header_lang > div.arrow{
		display: inline-block;
		border: 2px solid transparent;
		border-top-color: #ffffff;
		float: right;
		margin-top: 6px;
	}

}