@charset "UTF-8";

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

#top { position: relative; left:0; right:0; top:calc(-1 * var(--top-height)); transition-duration:1s; z-index: 100; height:var(--top-height); padding-top:50px; }
.load-on #top { top:0; }


#top .top-wrap { position:relative; height:100%; padding:0 var(--top-padding); display:flex; align-items:center; justify-content: space-between; z-index:3; transition-duration:700ms; }

#top .top-wrap .logo { position: absolute; left:50%; transform:translateX(-50%); width:50%; max-width:450px; height:100%; background: url("../img/logo-white.png") center/contain no-repeat; transition-duration: 200ms; }

.logo_txt{font-size: 1.25rem; font-weight: 300; margin-top: -20px; letter-spacing: 3px;}


#top .top-wrap .right { display: flex; align-items: center; transition-duration:200ms; }
#top .top-wrap .right .sns { display:flex; align-items: center; margin-right:10px; }
#top .top-wrap .right .sns a { position:relative; width:30px; height:30px; z-index:1; background:none no-repeat center/25px; filter:brightness(100); margin-right:5px; }
#top .top-wrap .right .sns a.kakao { background-image:url('../img/sns_icon_kakao.png'); }
#top .top-wrap .right .sns a.instagram { background-image:url('../img/sns_icon_instagram.png'); }
#top .top-wrap .right .sns a.naver { background-image:url('../img/sns_icon_naver.png'); }
#top .top-wrap .right .sns a.facebook { background-image:url('../img/sns_icon_facebook.png'); }
#top .top-wrap .right .sns a.youtube { background-image:url('../img/sns_icon_youtube.png'); }
#top .top-wrap .right .sns a.twiter { background-image:url('../img/sns_icon_twiter.png'); }




/* 상단 우측 메뉴버튼 */
#top .top-menu-btn { width:24px; transition-duration: 300ms; z-index:2; cursor:pointer; }
#top .top-menu-btn div { background:#fff; border-radius:99px; height:2px; width:100%; }
#top .top-menu-btn div:nth-child(2) { margin: 6px 0; }



@media (max-width: 1024px) {
    :root {
        --top-height:120px;
    }
	#top .top-wrap .right .sns { display:none; }
}

@media (max-width: 767px) {
	:root {
        --top-height:90px;
    }
	#top { padding-top:30px; }
	.logo_txt{font-size: 1rem; font-weight: 300; margin-top: -10px; letter-spacing: 0px;}
	 
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { transition-duration: 200ms; }
#menu .ul { position:relative; width:100%; display: flex; justify-content: center; height:100%; z-index:10; }
#menu .ul .li { position:relative; margin-right:15px; }
#menu .ul .li:hover { z-index:9; }
#menu .ul .li .a { display:flex; align-items:center; justify-content:center; padding:20px 0; font-weight:600; color:#fff; }


#menu .sub-wrap { position: absolute; transition-duration:500ms; padding:20px; opacity:0; visibility:hidden; }
#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: 1024px) {
	#menu { opacity:0; visibility:hidden; }
}