@charset "utf-8";

.clearfix:after{clear:both; content:""; display:block;}
.inner{width:100%; max-width:1460px; margin:0 auto;}

.dim{width:100%; height:100vh; background:rgba(0,0,0,0.5); position:absolute; left:0; top:0; display:none; transition:all 0.2s ease; z-index:999;}
.dim.on{display:block;}
/* .inner{width:100%; max-width:1440px; margin:0 auto;} */
/* body{background:#fafafa; font-family: 'Noto Sans KR', sans-serif;} */

/*
배경컬러:   #fafafa;
font-family: 'Noto Sans KR', sans-serif;  Regular 400 , Bold 700
font-family: 'Montserrat', sans-serif;
font-family: 'Roboto', sans-serif;
*/

/*헤더영역*/

header{
	position:fixed;
	z-index:9999;
	width:100%;
	height:100px;
	background:rgba(0,0,0,0.5);
	border-bottom:1px solid rgba(255,255,255,0.2);
	transition:0.6s;
}

/* header:hover{ */
	/* background:#fff; */
/* } */

.logo{
	float:left;
	padding:33px 0 0 60px;
	transition:0.6s;
}

.logo.on{
	opacity:0;
}

.logo_mo{
	display:none;
}

.logo a{
	display:block;
}

.logo a img{
	width:150px;
	transition:0.6s;
}

.menu_btn{
	display:none; width:39px; position:absolute; top:23px; right:25px; transition:all 0.2s ease; cursor:pointer;
}
.menu_btn span{
	width:100%; height:2px; background:#fff; display:block;
}
.menu_btn span:nth-child(2){
	margin:12px 0;
}

.main_menu{
	font-family: 'Noto Sans KR', sans-serif;
	font-size:16px;
	font-weight:700;
	float:right;
	width:700px;
	margin-top:30px;
	transition:0.6s;
}

.main_menu ul li{
	display:inline-block;
	width:15%; /*20251230 -메뉴추가*/
	text-align:center;
}

.main_menu ul li a{
	color:#fff;
}

.ico_box{
	position:absolute;
	bottom:10%;
	right:5%;
	z-index:10;
}

.ico_box img{
	width:33px;
}

.ico_box li:first-child{
	margin-bottom:30px;
}

.ico_box_mo{
	display:none;
}

@media screen and (max-width:1024px){
	/*헤더*/
header{
	height:170px;
}	
	
.logo{
	float:inherit;
	width:150px;
}
	
.main_menu{
	font-size:19px;
	width:inherit;
	float:inherit;
}	

	
	
}

@media screen and (max-width:730px){
	.main_menu{
		font-size:16px;
	}
	
	
}

@media screen and (max-width:640px){
	header{
		height:70px;
	}
	
	.main_menu{
		position:absolute;
		width:80vw;
		height:100vh;
		z-index:999;
		background:#3669ec;
		top:-50px;
		right:-80vw;
		margin-top:0;
	}
	
	.logo{
		margin:inherit;
		padding:20px 0 0 30px;
	}
	
	.logo a img{
		width:120px;
	}
	
	.logo_mo{
		display:block;
		margin:100px 0 0 40px;
	}
	
	.logo_mo a img{
		display:block;
		width:130px;
	}
	
	.menu_btn{
		display:block;
	}
	
	.main_menu .close_btn{
		width:39px; height:30px; position:absolute; right:50px; top:100px; display:none; transition:all 0.2s ease; cursor:pointer;
	}
	.main_menu .close_btn span{
		display:block; width:100%; height:2px; background:#fff;
	}
	.main_menu .close_btn span:nth-child(1){
		transform:rotate(45deg);
	}
	.main_menu .close_btn span:nth-child(2){
		transform:rotate(-45deg); margin-top:-2px;
	}
	.main_menu .close_btn.on{
		display:block;
	}
	
	.main_menu ul{
		margin-top:130px;
	}

	.main_menu ul li{
		display:block;
		width:100%;
		text-align:inherit;
		border-top:1px solid rgba(255,255,255,0.2);
		line-height:80px;
		padding-left:50px;
	}

	.main_menu ul li:last-child{
		border-bottom:1px solid rgba(255,255,255,0.2);
	}

	.ico_box{
		display:none;
	}

	.ico_box_mo{
		display:block;
		padding:100px 0 0 270px;
	}
	
	.ico_box_mo a{
		margin-left:20px;
	}
	
	
}

@media screen and (max-width:400px){
	.logo_mo{
		margin:90px 0 0 22px;
	}
	
	.main_menu .close_btn{
		right:25px;
		top:90px;
	}
	
	.main_menu{
		font-size:14px;
	}
	
	.main_menu ul{
		margin-top:90px;
	}
	
	.main_menu ul li{
		line-height:60px;
		padding-left:30px;
	}
	
	.ico_box_mo{
		padding:50px 0 0 150px;
	}
	
	.ico_box_mo a img{
		width:30px;
	}
}