
.navbar{ position:fixed; top:0; background:rgba(0, 0, 0, 0.5); width:100%; height:50px;}
.navbar .navbar_menu {
	list-style-type:none; padding:0;  
	display: flex; 
	justify-content: space-between;
}
.navbar .navbar_menu .dropdown{
	display:inline-block;
	color:#000; 
}
.navbar {height:100px; background-color: rgba(0, 0, 0, 0.5); z-index:99999999;}
.navbar_1 {overflow:hidden; width:1200px; margin:0 auto;display: flex; 
	justify-content: space-between;}
/* .navbar_1 ul {float:right; margin:0; padding:0; height:100%; line-height:85px; width: 85%;} */
.navbar_1 .navbar_menu {margin:0; padding:0; height:100%; width: 80%; }
.navbar_1 .navbar_menu > li {
	width:100%; height:100%; text-align:center; font-size:14px; position: relative;
}
/* .navbar_1 ul:first-child > li {width:auto; height:100%; text-align:right; font-size:14px; margin-left: 50px; position: relative;} */

/* .navbar_1 ul:last-child > li {margin-left: 90px;} */
.dropdown:hover{
	/* background-color: #1648a1; */
	transition: all .3s ease;
}
.navbar_1 .dropdown a {
	width: 100%; height: 100%;
	display: inline-block;
	margin:0; padding:0; 
	line-height:100px; color:rgb(230, 230, 230); 
	font-weight:bold; 
	text-decoration:none; 
	font-size: 18px; 
	text-align: center;
}
.navbar_1 .dropdown a:hover {
	background-color: #1648a1;
	transition: all .3s ease;
}
.navbar_1 .dropdown:hover > a {
	background-color: #1648a1;
	transition: all .3s ease;
}

.nav_logo {width:150px; height:100%;}
.nav_logo img {margin-top:10px; height: 70px;}
.m_but, .menu_m {display:none;}
.navbar .navbar_menu .dropdown {
}
.navbar .navbar_menu .dropdown ul {
	background-color: rgba(0, 0, 0, 0.5);
	
	flex-direction: column;
	opacity: 0;
	transition: all .3s ease;

	display: none;
}

.navbar .navbar_menu .dropdown ul li {
	width: 100%;
}

.navbar .navbar_menu .dropdown ul li:hover, .navbar .navbar_menu .dropdown ul li:hover.dropdown a {
	background-color: #1648a1;
	transition: all .3s ease;
}

.navbar .navbar_menu .dropdown ul li a {
	font-size: 14px;
}
.navbar .navbar_menu .dropdown ul li a:hover {

}

.navbar .dropdown:hover ul {
	display: flex;
	opacity: 1;
	transition: all .3s ease;
}



@media all and (max-width:1250px){ 
/*최대사이즈 1024px 태블릿 및 모바일*/ 

.nav {display:none;}
.menu_m {display:block; width:100vw; height:70px; background:#fff; border-bottom:1px solid #ccc; position:fixed;	z-index:99;} 
.menu_m > div {position: absolute; top: 50%; left: 10px;}
.menu_m > div > a {position: absolute; top: -36.5px; left: 0; display: flex;}
.menu_m > div > a > img {width:auto; height:65px;}
#btn {position: absolute; top: 50%; right:10px; width: 50px; height: 50px; transform: translateY(-50%); cursor: pointer; background: white; border-radius:50%; border: none; outline: none;}
#btn span {overflow: hidden; position: absolute; width: 30px; height: 4px; top: 50%; left: 50%; background: #262626; border-radius: 2px; transition: all 0.3s linear;}
#navigation-list {position: absolute; top: 70px; left: 0; width:100%;}
#navigation-list .navbar_menu {margin:0; padding:0; width:100%; height:100%;}
#navigation-list .navbar_menu .dropdown {width:100%; line-height:50px; background:#fff; border-bottom:1px solid #ccc; text-align:center; list-style:none;}
/* #navigation-list .navbar_menu .dropdown:hover {background:#1648a1;} */
#navigation-list .navbar_menu .dropdown a:hover {border-bottom:1px solid #1648a1;}
#navigation-list .navbar_menu .dropdown a {display:block; color:#000; text-decoration:none; text-align: center;}

/*햄버거버튼 애니메이션*/    
#btn span::before {content: "";	position: absolute;	width: 0; height: 100%;	top: 0;	right: 0; background: gray;	transition: all 0.3s linear;}
#btn span:nth-child(1) {animation: span-first-off 0.5s ease-in-out; animation-fill-mode: forwards;}
#btn span:nth-child(2) {animation: span-second-off 0.5s ease-in-out; animation-fill-mode: forwards;}
#btn span:nth-child(3) {animation: span-third-off 0.5s ease-in-out; animation-fill-mode: forwards;}
#btn.on:hover span::before {width: 100%; transition: all 0.3s linear;}
#btn.on span:nth-child(1) {animation: span-first-on 0.5s ease-in-out; animation-fill-mode: forwards;}
#btn.on span:nth-child(2) {animation: span-second-on 0.5s ease-in-out; animation-fill-mode: forwards;}
#btn.on span:nth-child(3) {animation: span-third-on 0.5s ease-in-out; animation-fill-mode: forwards;} 
@keyframes span-first-on {
	0% {transform: translate(-50%, -300%);}
	30% {transform: translate(-50%, -50%);}
	100% {transform: translate(-50%, -50%) rotate(-45deg);}
}
@keyframes span-first-off {
	0% {transform: translate(-50%, -50%) rotate(-45deg);}
	30% {transform: translate(-50%, -50%) rotate(0deg);}
	100% {transform: translate(-50%, -300%);}
}

@keyframes span-second-on {
	0% {transform: translate(-50%, -50%);}
	25% {background: gray;}
	50% {transform: translate(-50%, -50%) scale(1);}
	100% {transform: translate(-150%, -50%) scale(0);}
}
@keyframes span-second-off {
	0% {transform: translate(-150%, -50%) scale(0);}
	25% {background: gray;}
	50% {transform: translate(-50%, -50%) scale(1);}
	100% {transform: translate(-50%, -50%);}
}
@keyframes span-third-on {
	0% {transform: translate(-50%, 200%);}
	30% {transform: translate(-50%, -50%);}
	100% {transform: translate(-50%, -50%) rotate(45deg);}
}
@keyframes span-third-off {
	0% {transform: translate(-50%, -50%) rotate(45deg);}
	30% {transform: translate(-50%, -50%) rotate(0deg);}
	100% {transform: translate(-50%, 200%);}
}  

}