@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { position: fixed; left:0; right:0; top:0; transition-duration:500ms; z-index: 100; /* 메뉴높이 */ height:100px; }
body.scrolled #top { background:#fff; box-shadow:0 0 10px rgba(0,0,0,.1); }
.is-subpage #top:before { content:""; position:absolute; left:0; top:0; right:0; bottom:-100%; background:linear-gradient(to bottom, #000, transparent) }
body.scrolled #top:before { display:none; }

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

#top .top-wrap .left { width:227px; height:60px; }
#top .top-wrap .left .logo { display:block; height:100%; background: url("../img/logo-white.png") left center/contain no-repeat; transition-duration: 200ms; }
body.scrolled #top .top-wrap .left .logo { background-image: url("../img/logo.png"); }

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

#top .top-wrap .right .top-search { }
#top .top-wrap .right .top-search .search-btn { display:block; width:20px; height:20px; background:url('../img/top-icon-search-white.png') no-repeat center/contain; }
body.scrolled #top .top-wrap .right .top-search .search-btn { background-image: url("../img/top-icon-search.png"); }

#top .top-wrap .top-search-box { display: none; left: 50%; padding: 20px 10px; position: absolute; top: 50%; 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: 3px solid #fff; display: flex; padding: 7px 8px 8px; 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: #ddd; }
#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:#ddd; flex: 0 0 25px; margin-left: 5px; }
#top .top-wrap .top-search-box .wrap form button:focus { outline: none; }


#top .top-wrap .right .lang { border-radius: 20px; transition-duration: 300ms; z-index:9; }
#top .top-wrap .right .lang > a { color:#fff; font-size:1.25rem; }
body.scrolled #top .top-wrap .right .lang > a { color:#333; }

#top .top-wrap .right .links {  }
#top .top-wrap .right .links .member-btn { display:block; width:20px; height:20px; background:url('../img/top-icon-login-white.png') no-repeat center/contain; }
body.scrolled #top .top-wrap .right .links .member-btn { background-image: url("../img/top-icon-login.png"); }

#top .top-wrap .right section .sub { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:10px 20px; background:#fff; border:1px solid #ddd; display: none; }
#top .top-wrap .right section:hover .sub, #top .top-wrap .right section .sub:hover { display:block; }
#top .top-wrap .right section .sub:before { content:""; position:absolute; bottom:calc(100% - 10px); left:50%; transform:translateX(-50%) rotate(45deg); width:20px; height:20px; background:#fff; border-left:1px solid #ddd; border-top:1px solid #ddd; }
#top .top-wrap .right section .sub a { display:block; color:#aaa; padding:5px 0; text-align:center; }


body.scrolled #top .top-wrap .right .links .sub a { color:#333; }


#menu-wrap-bottom-bg { position:absolute; left:0; right:0; top:100%; transition-duration: 500ms; }


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

body.scrolled #top .top-menu-btn div { background:#333; }


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

@media (max-width: 767px) {
	#top { height:70px; }
	#top .top-wrap { padding:0 15px; }
	#top .top-wrap .left { height:40px; }

	#top .top-wrap .right section { margin-right:15px; }
}

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

body.scrolled #menu .ul .li .a { color:#111; }


#menu .sub-wrap { position: absolute; top:30%; left:0; width:250px; background:#fff; transition-duration:500ms; padding:20px; opacity:0; visibility:hidden; }
#menu .li:hover .sub-wrap { top:100%; opacity:1; visibility:visible; }
#menu .sub-wrap .sub-a { color: #666; display: block; padding: 10px; white-space: nowrap; }

#menu .depth2 li { position:relative; transition-duration: 400ms; }

#menu .depth3 { top:40px; transition-duration: 0ms; }
#menu .depth3.on { transition-duration: 200ms; }
#menu .depth3 .sub-a { color:#aaa; padding:5px 10px; font-size:.875rem; }
#menu .depth3 .sub-a:before { content:"- "; }


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