/*
	상단에 따라다닐 경우
	-> .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%; position:relative; font-family:inherit; z-index:999999999; background-color:#2e68a8; }
.navigation * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.align-to-right { float:right; } /* 메뉴 오른쪽 정렬 */
.nav-header { float:right; }
.nav-menu { float:right; }

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

.navi_lang { position:absolute; top:17.5px; left:50px; cursor:pointer; width:45px; border-radius:5px; transition:all 0.5s; }
.navi_lang p { line-height:45px; text-align:center; background-color:transparent; border-radius:5px; }

.navi_lang .lang_detail { display:none; width:100px; text-align:center; margin:18px 0 0 -25px; background-color:#fdfdfd; border-top:1px #f0f0f0 solid; padding:10px 0; }
.navi_lang .lang_detail a { display:block; margin:10px 0; }
.navi_lang .lang_detail a:hover { color:#000; }

.navi_sns { position:absolute; top:17.5px; left:110px; transition:all 0.5s; }
.navi_sns a { width:45px; height:45px; background-color:transparent; border-radius:5px; display:inline-block; margin-left:10px; }
.navi_lang:hover .navi_sns { right:150px; }

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

.nav-chat { position:absolute; top:50%; margin-top:-12px; left:230px;}
.nav-chat a { font-size:15px; font-weight:bold; color:#fff; background:#e60012; border-radius:5px; padding:5px 10px;}

.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:20000; 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:80px; display:inline-block; text-decoration:none; font-size:17px; color:#fff; -webkit-transition:color 0.3s, background 0.3s; transition:color 0.3s, background 0.3s; line-height:80px; margin:0 35px; }
.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 { font-weight:bold; color:#fff; }
.nav-dropdown > li:hover > a,
.nav-dropdown > li.focus > a { color:#000; }

/* DROPDOWN EXTENSION */
.nav-dropdown { min-width:180px; margin:0; padding:0; display:none; position:absolute; list-style:none; z-index:98; 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; }

.w100 { width:100% !important; }

.index_navi .navi_wrap { padding:0 50px; }

@media screen and (min-width:769px) and (max-width:1199px) { /* tablet */
	.nav-chat { left:210px;}

	.nav-menu{ width:calc(100% - 300px); text-align:center; }
	.nav-menu > li { float:right; }
	.nav-menu > li > a { margin:0 15px; font-size:15px; }
	ul.nav-menu li span.submenu-indicator { display:none; }
	.index_navi .navi_wrap { padding:0 !important; }
	.navigation { padding:0 30px !important; }
	.navi_lang { left:30px; }
	.navi_sns { left:85px; }
}

@media (max-width:768px) { /* mobile */
	.nav-chat { left:100px;}

	.navigation-portrait { height:70px; } /* 모바일 header 높이조정 */
	.nav-menu > li > a { margin:0; padding:0; line-height:50px; }
	.navigation-portrait .nav-dropdown > li > a { color:#000; font-weight:700; }
	.nav-logo .logo_back { width:105px; height:30px; margin-top:20px; background-size:cover; }
	.nav-dropdown { margin:0; }
	.index_navi .navi_wrap { padding:0 !important; }
	.navigation { padding:0 5% !important; }
	.navigation-portrait .nav-menu > li > a { color:#000 !important; }
	.navi_sns { top:12px; right:auto; left:10px; }
	.navi_lang { top:26px; right:40px; left:auto; z-index:999; }
	.navi_lang .lang_detail { background-color:#eee; margin-top:12px; }
}