@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { left: 0; position: fixed; right: 0; top: 0; transition-duration: 200ms; z-index: 10; background:rgba(0,0,0,.7); }
body.scrolled .is-index #top { background:rgba(0,0,0,.7); }
.is-subpage #top { background:#fff; box-shadow:0 0 5px #aaa; }
#top .top-wrap { position: relative; transition-duration: 200ms; /* 메뉴높이 */ height: 90px; width:1000px; }

#top .logo { position:absolute; z-index:2; left:20px; top:50%; transform:translateY(-50%); transition-duration: 200ms; width:200px; height:50px; z-index:11; }
#top .logo a { display:block; background: url("../img/logo-white.png") center/contain no-repeat; height:100%; }
.is-subpage #top .logo a { background-image:url("../img/logo.png"); }

@media (max-width: 1199px) { 
	#top .logo { width: 150px; }
}

#top .right { position:absolute; right:70px; top:50%; transform: translateY(-50%); display: flex; align-items: center; transition-duration: 200ms; z-index:999; }
#top .right section { margin-right: 15px; position: relative; }
#top .right section:last-child { margin-right: 0; }

#top .right .lang { position:relative; top:0; }
#top .right .lang * { color:#fff; font-size:.875rem; }
.is-subpage #top .right .lang * { color:#333; }

#top .right .links { display:flex; align-items:center; justify-content:center; display:none; }
#top .right .links .icon { width:20px; height:20px; background: none center/contain no-repeat; margin:0 5px; }
#top .right .links .adm { background-image:url('../img/top_icon_adm-white.png'); }
#top .right .links .logout { background-image:url('../img/top_icon_logout-white.png'); }
#top .right .links .login { background-image:url('../img/top_icon_login-white.png'); }
#top .right .links .join { background-image:url('../img/top_icon_join-white.png'); }
.is-subpage #top .right .links .adm { background-image:url('../img/top_icon_adm.png'); }
.is-subpage #top .right .links .logout { background-image:url('../img/top_icon_logout.png'); }
.is-subpage #top .right .links .login { background-image:url('../img/top_icon_login.png'); }
.is-subpage #top .right .links .join { background-image:url('../img/top_icon_join.png'); }
#top .right .links .icon:last-child { margin-right: 0; }

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


#menu-wrap-bottom-bg { position: absolute; left:-100%; right:-100%; transition-duration: 300ms; height:0; top:100%; background:rgba(0,0,0,.5); box-sizing:content-box; z-index:9; }
/*body.menu-on #menu-wrap-bottom-bg { min-height:150px; }*/


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { transition-duration: 300ms; position:absolute; right:20px; top:50%; transform:translateY(-50%); z-index:99; height: 40px; width: 40px; }
#top .top-menu-btn div { background-color: #fff; border-radius: 2px; height: 2px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s; width: 30px; }
#top .top-menu-btn div:nth-child(1) { margin-top: -6px; }
#top .top-menu-btn div:nth-child(3) { margin-top: 6px; }

.is-subpage #top .top-menu-btn div { background-color:#333; }

body.m-menu-on #top .top-menu-btn div { margin-top: 0; }
body.m-menu-on #top .top-menu-btn div:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg) scaleX(1.3); }
body.m-menu-on #top .top-menu-btn div:nth-child(2) { opacity: 0; }
body.m-menu-on #top .top-menu-btn div:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.3); }

@media (max-width: 1024px) { 	
	#top .top-menu-btn { right: 10px; top:0; transform:translateY(0); position:relative; }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { position:relative; height:100%; }
#menu .ul { position:relative; width:100%; padding:0 100px; display: flex; align-items: center; justify-content: space-between; transition-duration: 200ms; height: 100%; z-index:10; }
#menu .ul:after { display:none; }
#menu .ul .li { position: relative; }
#menu .ul .li .a { display:block; font-size: 17px; font-weight: 400; z-index:2; text-align:center; color:#fff; }
.is-subpage #menu .ul .li .a { color:#111; }

@media (max-width: 1400px) { 
	#menu .ul { padding:0 150px; }
	#menu .ul .li .a { font-size:16px; }
}

@media (max-width: 1124px) { 
	#menu .ul { padding:0 200px; }
}

#menu .depth2 { position: absolute; top:100%; left:0; transition-duration: 300ms; width:100%; padding:30px 0; display:none; }
#menu .depth2 li { position:relative; transition-duration: 400ms; }
#menu .depth2 .sub-wrap { position:relative; padding: 15px 0; left: 50%; transform:translateX(-50%); display:inline-block; }
#menu .depth2 .sub-a { color: #eee; display: block; font-size: 15px; font-weight: 300; padding: 10px; position: relative; text-align: left; white-space: nowrap; z-index:2; }
#menu .depth2 .sub-a span { position:relative; }
#menu .depth2 .sub-a span:before { content:""; position:absolute; top:100%; left:0; width:0; right:100%; height:1px; transition-duration: 300ms; }
#menu .depth2 .sub-a.on span:before, #menu .depth2 .sub-a:hover span:before { width:100%; right:0; }

#menu .depth3 { visibility:hidden; opacity:0; position:absolute; top:40px; transition-duration: 0ms; }
#menu .depth3.on { visibility:visible; opacity:1; transition-duration: 200ms; }
#menu .depth3.on:before { content:""; position:absolute; left:0; right:0; top:0; bottom:0; animation:slide_down 200ms linear 100ms forwards; z-index:3; }
#menu .depth3 .sub-a { color:rgba(255,255,255,.6); padding:5px; }
#menu .depth3 .sub-a:before { content:"- "; }

@keyframes slide_down {
	0%   { top:0; }
	100% { top:100%; }
}