/*
	상단에 따라다닐 경우
	-> .navigation { position:fixed; top:0; left:0; z-index:99999; background-color:transparent; transition:background 0.5s; }
	-> .navigation:hover { background-color:#fff !important; transition:background 0.5s; }
	-> .nav-menu > li > a { color:#000; }
	-> .navigation:hover li a { color:#000 !important; }

	상단에 따라다니는것이 필요없을 경우
	-> .navigation { position:relative; background-color:#fff; }
	-> .nav-menu > li > a { color:#000; }
*/
*{ margin:0; padding:0; }
.navigation { width:100%; display:table; position:relative; font-family:inherit; z-index:9; position:fixed;}
.navigation * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.align-to-right { float:right; } /* 메뉴 오른쪽 정렬 */
.nav-header { float:left; }
.nav_bg{background:#fff; width:100%;height:100px; z-index:9999; }



/* .nav-logo .logo_back 의 가로와 세로는 로고사이즈. */
.nav-logo .logo_back { width:340px; height:50px; margin-top:25px; padding:0px; float:left; background-image:url("/img/top_logo.jpg"); background-position:center bottom; background-repeat:no-repeat; }

.nav-toggle { width:30px; height:18px; position:absolute; top:52%; margin-top:-9px; right:15px; display:none; cursor:pointer; }
.nav-toggle:before { content:""; position:absolute; width:30px; height:2px; background-color:#70798b; border-radius:10px; box-shadow:0 8px 0 0 #70798b, 0 16px 0 0 #70798b; }

.nav-menus-wrapper-close-button { width:48px; height:48px; margin:11px 0; display:none; float:right; color:#70798b; font-size:26px; cursor:pointer; text-align:center; line-height:50px; }
.navigation-portrait .nav-toggle { display:block; }
.navigation-portrait .nav-menus-wrapper { width:100%; height:100%; top:0; left:-800px; position:fixed; background-color:#ffffff; z-index:9; overflow-y:auto; -webkit-overflow-scrolling:touch; -webkit-transition-duration:.8s; transition-duration:.8s; -webkit-transition-timing-function:ease; transition-timing-function:ease; }
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right { left:auto; right:-400px; }
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open { left:0; }
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open { left:auto; right:0; }
.navigation-portrait .nav-menus-wrapper-close-button { display:block; }
.navigation-portrait .nav-menu { width:100%; }
.nav-menu > li { display:inline-block; float:left; text-align:center; position:relative; }
.navigation-portrait .nav-menu > li { width:100%; position:relative; border-top:solid 1px #f0f0f0; }
.navigation-portrait .nav-menu > li:last-child { border-bottom:solid 1px #f0f0f0; }
.nav-menu + .nav-menu > li:first-child { border-top:none; }
.nav-menu > li > a { height:100px; display:inline-block; text-decoration:none; font-size:20px; color:#213357; -webkit-transition:color 0.3s, background 0.3s; transition:color 0.3s, background 0.3s; line-height:100px; margin:0 20px;font-weight: 700; letter-spacing: -1px;  }
.navigation-portrait .nav-menu > li > a { width:100%; height:auto; padding:20px 15px; }
.nav-menu > li:hover > a,
.nav-menu > li.active > a,
.nav-menu > li.focus > a { }

.nav-dropdown li{display:none;}

.nav-dropdown > li:hover > a,
.nav-dropdown > li.focus > a { color:#213357; }
.nav-menu > li > a.box {}
.nav-dropdown li a:hover{color:#213357; -webkit-transition:color 0.3s, background 0.3s; transition:color 0.3s, background 0.3s;font-weight: 400; }

.nav-menu li a:before{content: ''; position: absolute;background-color: #213357; height: 2px; width: 0px;bottom: 30px; transition: 0.5s;left: 50%;transform: translateX(-50%); border-radius:20px;}
.nav-menu li a:hover:before{width: 50%;}

.nav-dropdown li a:hover:before{width:0%;}
/* DROPDOWN EXTENSION */
.nav-dropdown { min-width:180px; margin:0; padding:0; position:absolute; list-style:none; z-index:9; white-space:nowrap; left:50%; margin-left:-90px; }
.navigation-portrait .nav-dropdown { width:100%; position:static; left:0; }
.nav-dropdown .nav-dropdown { left:100%; margin-left:0 !important; }
.nav-menu > li > .nav-dropdown { border-top:solid 1px #f0f0f0; }
.nav-dropdown > li { width:100%; float:left; clear:both; position:relative; text-align:center; }
.nav-dropdown > li > a { width:100%; padding:16px 20px; display:inline-block; text-decoration:none; float:left; font-size:15px; color:#70798b; background-color:#fdfdfd; -webkit-transition:color 0.3s, background 0.3s; transition:color 0.3s, background 0.3s; }
.nav-dropdown.nav-dropdown-left { right:0; }
.nav-dropdown > li > .nav-dropdown-left { left:auto; right:100%; }
.navigation-landscape .nav-dropdown.nav-dropdown-left > li > a { text-align:right; }
.navigation-portrait .nav-dropdown > li > ul > li > a { font-weight:400; color:#666; }

.nav_product{width:100%; height:80px; background:#213357; position:fixed; top:9%; z-index:99; box-shadow: 3px 3px 10px rgba(0,0,0, .3);}
.nav_product_menu{text-align:right;}
.nav_product_menu li{display:inline-block; }
.nav_product_menu li a{color:#fff; margin-right: 50px; line-height: 80px; font-size: 16px; font-weight: 400; opacity: 0.5;}
.nav_product_menu li a:hover{opacity:1; transition:.3s}

.nav-up {top: -100px; transition: all ease 1s 0s;}
.nav-down {top:100px;transition: all ease 1s 0s; }

@media screen and (min-width:769px) and (max-width:1200px) { /* tablet */
	.nav-menu{ width:100%; text-align:center; }
	.nav-menu > li:nth-child(1) { width:20%; }
	.nav-menu > li:nth-child(2) { width:20%; }
	.nav-menu > li:nth-child(3) { width:25%; }
	.nav-menu > li:nth-child(4) { width:15%; }
	.nav-menu > li:nth-child(5) { width:20%; }
	ul.nav-menu li span.submenu-indicator { display:none; }
	.nav-menu{width:47%;}

	.nav_product_menu li a{margin-right: 20px;  font-size: 15px; }
	

}



@media (max-width:768px) { /* mobile */
		.nav-dropdown li{display:block;}	
	.navigation-portrait { height:70px; } /* 모바일 header 높이조정 */
	.navigation { background-color:#fff !important; }
	.nav-menu > li > a { margin:0; padding:0; line-height:50px; }
	.navigation-portrait .nav-dropdown > li > a { color:#000; font-weight:700; }
	.nav-dropdown { margin:0; }
	.nav-logo .logo_back { width:191px; height:50px; margin-top:20px; padding:0px; float:left; margin-left:115px;
background-image:url("/img/main_logo.png"); background-position:center bottom; background-repeat:no-repeat; }
		.nav_product{display:none;}
		.box{color:#213357 !important;}

}