@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { position:fixed; left:0; right:0; top:auto; background:#fff; z-index:10; box-shadow:0 3px 3px rgba(0, 0, 0, .1); height:90px; padding:0 50px; transition-duration:200ms; }
#top:before { content:""; position:absolute; left:0; top:0; right:0; height:25px; }
body.scrolled #top { margin-top:-25px; }

#top-bar { position:relative; height:25px; line-height:22px; color:rgba(255, 255, 255, 0.5); font-size:13px; }

#top .top-wrap { position:relative; display:flex; justify-content: space-between; align-items:center; height:65px; }
#top .top-wrap .left { width:235px; height:50px; }
#top .top-wrap .left .logo { display:block; height:100%; background:url('../img/logo.png') no-repeat left center/contain; }


#top .top-wrap .right { position:relative; margin-right:50px; display: flex; align-items: center; transition-duration:200ms; }
#top .top-wrap .right section { position: relative; display:flex; margin-right:10px; }

#top .top-wrap .right a { position:relative; }
/*#top .top-wrap .right a:after { position:absolute; left:50%; top:100%; margin-top:5px; background:#fff; padding:2px 5px; border:1px solid #ddd; font-size:11px; font-weight:400; opacity:0; }
#top .top-wrap .right a:hover:after { opacity:1; }*/

#top .top-wrap .right .top-search { }
#top .top-wrap .right .top-search .search-btn { width:20px; height:20px; font-size:.875rem; color:#333; }

#top .top-wrap .top-search-box { position:absolute; display:none; left:50%; top: 50%; padding: 20px 10px; transform: translate(-50%, -50%); }
#top .top-wrap .top-search-box .wrap { align-items: center; display: flex; height: 100%; justify-content: center; }
#top .top-wrap .top-search-box .wrap form { border-bottom:1px solid #666; display: flex; padding:5px 10px; width: 300px; }
#top .top-wrap .top-search-box .wrap form .searchbox { background: transparent; border: 0; flex: 1; }
#top .top-wrap .top-search-box .wrap form .searchbox::placeholder { color: #888; }
#top .top-wrap .top-search-box .wrap form .searchbox:focus { outline: none; }
#top .top-wrap .top-search-box .wrap form button { background: transparent; border: 0; color:#888; flex: 0 0 25px; margin-left: 5px; }
#top .top-wrap .top-search-box .wrap form button:focus { outline: none; }

#top .top-wrap .right .lang { }
#top .top-wrap .right .lang a { margin:0 5px; padding-left:25px; background:none no-repeat left center/20px; font-size:.75rem; font-weight:600; color:#333; }
#top .top-wrap .right .lang a.kor { background-image:url('../img/lang_kor.png'); }
#top .top-wrap .right .lang a.eng { background-image:url('../img/lang_eng.png'); }

#top .top-wrap .right .links { }
#top .top-wrap .right .links a { width:20px; height:20px; margin:0 5px; background:none no-repeat center/15px; }
#top .top-wrap .right .links a:hover:after { opacity:1; }
#top .top-wrap .right .links a.logout { background-image:url('../img/top-member-logout.png'); }
#top .top-wrap .right .links a.mypage { background-image:url('../img/top-member-mypage.png'); }
#top .top-wrap .right .links a.admin { background-image:url('../img/top-member-admin.png'); }
#top .top-wrap .right .links a.login { background-image:url('../img/top-member-login.png'); }
#top .top-wrap .right .links a.join { background-image:url('../img/top-member-join.png'); }


#menu-wrap-bottom-bg { position:absolute; left:0; right:0; top:100%; height:40px; opacity:0; visibility:hidden; transition-duration:300ms; }
body.menu-on #menu-wrap-bottom-bg { opacity:1; visibility:visible; }


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { position:absolute; right:0; top:50%; transform:translateY(-50%); width:30px; height:40px; }
#top .top-menu-btn div { background-color:#555; position:absolute; left:50%; top:50%; width:90%; height:2px; border-radius:2px; transform:translate(-50%, -50%); transition:all .5s; }
#top .top-menu-btn div:nth-child(1) { margin-top:-8px; }
#top .top-menu-btn div:nth-child(3) { margin-top:8px; }


@media (max-width:1600px) {	
	#top { padding:0 20px; }
}

@media (max-width:1400px) {	
	#top .top-wrap .right .top-search, #top .top-wrap .right .links { display:none; }
}



/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { max-width:1200px; height:100%; }		

#menu ul { display:flex; justify-content: space-between; align-items:center; }
#menu .ul { height:100%; }
#menu .ul .li { position:relative; margin:0 20px; height:100%; display:flex; align-items:center; }
#menu .ul .li .a { display:block; text-align:center; font-size:1.125rem; padding:0 30px; color:#333; font-weight:600; }

#menu .sub-wrap { position:absolute; left:0; top:100%; height:40px; opacity:0; visibility:hidden; transition-duration:300ms;}	
#menu .sub-wrap.on { opacity:1; visibility:visible; }

#menu .ul .li:nth-of-type(n+4) .sub-wrap, #menu .ul .li:last-of-type .sub-wrap { left:auto; right:0; }

#menu .sub-a { display:inline-block; font-size:.938rem; color:#fff; padding:0 20px; margin-right:10px; white-space: nowrap; }
#menu .ul .li:nth-of-type(n+4) .sub-a, #menu .ul .li:last-of-type .sub-a { margin-left:10px; margin-right:0; }

#menu .sub-a.on, #menu .sub-a:hover { text-decoration:underline; }

		


@media (max-width:1199px) {	
	#menu { display:none; }
}