@charset 'euc-kr';

/* Top Banner */
 

/* Header */
#header_wrap {height:160px;  width:100%; display:inline-block;  border-bottom:1px solid rgba(255,255,255,.3); position:relative; transition: background-color 0.3s ease-in; z-index:99999999}
#header_wrap:hover {background-color:#fff}

.logo {width:260px; height:40px; background:url('/common/img/logo.png') center no-repeat;  }
#header_wrap:hover .logo {background:url('/common/img/logo_color.png') center no-repeat; }
#header_wrap .logo a {width:100%; height:40px; display:inline-block; }


.header_top {width:100%; display:flex; box-sizing:border-box; padding:0 3%; position:absolute; top:25px; justify-content:space-between; align-items:center;   }
.header_top p {width:30%; line-height:0 } 
.header_top  a {font-size:0.9rem;  line-height:1; padding-left:10px; color:#fff !important; font-family: 'Montserrat', sans-serif; }
#header_wrap:hover   .header_top  a {color:#333 !important}

.header_top div.top_search {width:30%; position:relative;   }



.top_search_container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height:47px;  
}
.top_search_container .search {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
   width: 47px;
  height: 47px;
  border-radius: 50%;
  transition: all 1s;
  z-index: 4;
 }
 
.top_search_container .search::before {
  content: "";
  position: absolute;
  margin: auto;
  top: 15px;
  right: 0;
  bottom: 0;
  left: 16px;
  width: 12px;
  height: 2px;
  background: white;
  transform: rotate(45deg);
  transition: all 0.3s;
}
.top_search_container .search::after {
  content: "";
  position: absolute;
  margin: auto;
  top: -10px;
  right: 0;
  bottom: 0;
  left: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid white;
  transition: all 0.3s;
}
.top_search_container input {
  
  position: absolute;
  margin: auto;
  top: 0;
  right: 3px;
  bottom: 0;
  left: 0;
  width:300px;
  height: 47px;
  outline: none;
   background:rgba(255,255,255,.2); border:none;
   color: #fff;
    padding: 0 80px 0 20px; box-sizing:border-box; 
  
  transition: all 1s;
  opacity: 0;
  z-index: 5;
 }
.top_search_container input:hover {
  cursor: pointer;
}
.top_search_container input:focus {
  width: 300px;
  opacity: 1; 
  cursor: text;
}
 .top_search_container input:focus ~ .search {
  right: 0; 
  
}
.top_search_container input:focus ~ .search::before {
  top: 0;
  left: 0;
  width: 25px;
}
.top_search_container input:focus ~ .search::after {
  top: 0;
  left: 0;
  width: 25px;
  height: 2px;
  border: none;
  background: #fff;
  border-radius: 0%;
  transform: rotate(-45deg);
} 
.top_search_container input::placeholder {color: #fff; }

 
.top_search_container   .search_link {width:1px; background-color:#ddd;   height:47px; text-align:center;   position:absolute;  z-index:9999999;  float:left; right:0 ; padding:0}
  

.top_search_container input:focus ~ .search_link {
  right:0;   width:50px; 
} 
 
 
 

#header_wrap:hover .top_search .top_search_container .search::before { background: #888; }
#header_wrap:hover .top_search .top_search_container .search::after {  border: 2px solid #888;}

#header_wrap:hover .top_search .top_search_container input {background:none; border:2px solid #ddd; box-sizing:border-box; color:#333}

#header_wrap:hover .top_search  .top_search_container input:focus ~ .search::after { border: none;  background-color:#ddd}
#header_wrap:hover .top_search  .top_search_container input:focus ~ .search::before { background-color:#ddd }
#header_wrap:hover .top_search .top_search_container input::placeholder { color: #888; }


  

header#header {
	position: relative;
	z-index: 2;  
	width: 100%;
	 box-sizing:border-box;  
	padding: 0;	margin: 0px auto;
 
	box-sizing: border-box;
}
header#header h1 {
	text-align: right;
	line-height: 1;
	background-color: white;
}
header#header h1 a {
	position: relative;
	z-index: 2;
}
header#header h1 a img {
	vertical-align: top;
	
}
nav#gnb {
	position: absolute;
	z-index: 1;
	top:85px;
	right:0; 
	width:100%; padding:0 3%;  
	 box-sizing:border-box;   
}
 
nav#gnb:after {width:100%;  content:''; background-color:#fff;  position:absolute; top:73px; left:0; height:0; transition: all 0.6s ease-out; }
nav#gnb:hover:after {width:100%;  content:''; background-color:#fff; position:absolute; top:73px; left:0; height:200px; border-top:1px solid #ddd}


nav#gnb > ul {
	overflow: hidden;  text-align:Center; width:100%; 
}
nav#gnb > ul > li {
	 display:inline-block; vertical-align:top;
	 box-sizing:border-box; width:16%;  text-align:Center;  
	  
}
nav#gnb > ul > li:last-child  { background:none }
 
nav#gnb > ul > li > a {

		background:url('/common/img/li_line.png') no-repeat right;
		font-size: 1.3rem;
		line-height:1.2; height:75px; display:flex; align-items:center; justify-content:center;
		letter-spacing:-1.3px;
		font-weight:600; width:100%; 
		color: #fff; box-sizing:border-box; transition: all 0.2s ease-out;
}
 
#header_wrap:hover  nav#gnb > ul > li > a {color:#333;  background:url('/common/img/li_line2.png') no-repeat right;}

 nav#gnb > ul > li > a.active {
	color: #094b7a;
	
}

nav#gnb > ul > li:first-child > a {font-size:1.5rem; font-weight:700}

#header_wrap:hover  nav#gnb > ul > li > a.active {color:#094b7a; border-bottom:4px solid #094b7a; }


nav#gnb > ul > li > ul {
	display: none;
	padding:20px 0; position:relative; z-index:99
}
nav#gnb > ul > li > ul > li {
	line-height: 1; background:none; 
}
nav#gnb > ul > li > ul > li > a {
	position: relative;
	color: #777;
	line-height: 30px;
	font-size: 16px;
	font-weight: 400;
}
nav#gnb > ul > li > ul > li > a:hover {color:#094b7a }
nav#gnb > ul > li > ul > li > a:after {
	/*content: '';
	display: block;
	position: absolute;
	bottom: -3px;
	left: 0px;
	width: 0%;
	height: 2px;
	background-color: red;
	transition: 0.4s ease width;*/ 
}
nav#gnb > ul > li > ul > li > a:hover:after,
nav#gnb > ul > li > ul > li > a:focus:after {
	width: 100%;
	transition: 0.4s ease width;
}
/* nav#gnb .bar_gnb {
 	display: none;
 	position: absolute;
 	top: 50px; 
 	left: 0px;
 	width: 0px;
 	height: 3px;
 	background-color: #fff;
 	transition: 0.2s ease left,0.2s ease width;
 }
  
  */
 
#header_wrap .bg_gnb {
	display: none;
	position: absolute;
	z-index: 1;
	top:160px;
	right: 0;
	width: 100%;
	height: 170px;  
	background:rgba(255,255,255,1);
 }




.menu-fixed {
   	  position: fixed;
     width:100%; display:inline-block; 
	  left:0px;   top: 0px;  background-color:#fff; height:75px;  z-index:99999999
	}

.menu-fixed li a {color:#333 !important}
.menu-fixed  { display:inline;   }
.menu-fixed nav#gnb { top:0;  }



@media all and (min-width:1100px) {
	.top2 {display:none}
}


@media all and (max-width:1350px) {
	nav#gnb {padding:0 0;   }

}




@media all and (max-width:1100px){
	#header_wrap  {display:none}
	.menu-fixed {display:none}

	.top2 {width:100%;   display:flex; align-items:center;  position:absolute; top:0; left:0; color:#fff; padding:10px 3%; height:70px; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,.2); z-index:99999999999999999999999999}
	.top2 h1 {font-size:20px;  color:#fff}
	.top2 h1 img {margin-top:10px}
	.top2 div {margin-left:auto; font-size:30px}
}