@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
:root {
    --top-height:120px; /* 메뉴높이 */
}

#top { padding-top:var(--top-height); }

#top > div { position:fixed; top:calc(-1 * var(--top-height)); transform:translateY(-50%); transition-duration:400ms; z-index:1110; }
.load-on #top > div { top:calc(var(--top-height)/2); }

#top .logo { left:var(--top-padding); }
#top .logo a { display:block; width:40px; height:40px; background: url("../img/logo.svg") left center/contain no-repeat; transition-duration: 200ms; }
#top .logo span { position:absolute; left:calc(100% + 5px); top:50%; transform: translateY(-50%); width:0; font-size:1.25rem; overflow:hidden; white-space: nowrap; transition-duration: 300ms; }
#top .logo:hover span { width:170px; }


/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { right:var(--top-padding); font-size:2.125rem; cursor:pointer;  font-weight: 600;}
#top .top-menu-btn:before,
#top .top-menu-btn:after { }
#top .top-menu-btn:before { content:"Menu"; }
#top .top-menu-btn:hover { color:var(--main-color1); }
.m-menu-on #top .top-menu-btn:before { opacity:0; }
.m-menu-on #top .top-menu-btn:after { content:"Close"; }


@media (max-width: 1024px) {
    :root {
        --top-height:100px;
    }

    #top .top-menu-btn { font-size:1.5rem; }
}

@media (max-width: 767px) {
	:root {
        --top-height:60px;
    }

	#top .logo a { width:30px; height:30px; }
    #top .logo span { font-size:1rem; transition-duration: 100ms; }
    #top .logo:hover span { width:150px; }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { padding:0 var(--top-padding); margin-bottom:20px; }
#menu .ul { position:relative; width:100%; display: flex; height:100%; z-index:10; gap:10px; }
#menu .ul .li { position:relative; }
#menu .ul .li:hover { z-index:9; }
#menu .ul .li .a { display:flex; align-items:center; justify-content:center; padding:5px 20px; color:#111; border-radius: 99px; border:1px solid #333; }
#menu .ul .li .a:hover,
#menu .ul .li.on .a { color:#fff; background:var(--main-color1); border-color:var(--main-color1); }

#menu .sub-wrap { position: absolute; transition-duration:500ms; padding:20px; opacity:0; visibility:hidden; display:none; }
#menu .sub-wrap .sub-a { display: block; white-space: nowrap; }
#menu li:hover > .sub-wrap { opacity:1; visibility:visible; }


#menu .depth2 { top:30%; left:0; min-width:250px; background:#fff; }
#menu .depth2 > li { position:relative; transition-duration: 400ms; }
#menu .depth2 > li > .sub-a { color: #666; padding: 10px; display:flex; align-items:center; justify-content:space-between; width:100%; }
#menu .depth2 > li > .sub-a i { font-size:6px; }
#menu li:hover > .depth2 { top:100%; }
#menu .depth2 > li:hover > .sub-a { background:var(--main-color1); color:#fff; }

#menu .depth3 { top:0; left:120%; min-width:150px; border:1px solid var(--main-color1); background:rgba(255,255,255,.95); box-shadow:0 0 5px rgba(0,0,0,.3); }
#menu .depth3 .sub-a { color:#aaa; padding:5px 10px; }
#menu li:hover > .depth3 { left:100%; }
#menu .depth3 li:hover .sub-a { color:var(--main-color1); text-decoration:underline; }


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