@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { position: fixed; left: 0; right: 0; top: 0; z-index: 999; transition-duration: 200ms; }
#top.bg { background:#fff; }
#top .top-wrap { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 30px 80px; transition-duration: 200ms; }

.is-subpage #top { position:absolute; }

@media (max-width: 1699px) { 
	#top .top-wrap { padding:30px; }
}
#top .top-wrap .left { display: flex; align-items: center; transition-duration: 200ms; }
#top .top-wrap .logo { width: 350px; height: 60px; background: url("../img/logo-white.png") left center/contain no-repeat; transition-duration: 200ms; }
body.menu-on #top .top-wrap .logo, #top.bg .logo { background-image: url("../img/logo.png"); }

@media (max-width: 1024px) { 
#top .top-wrap .logo { /*flex: 0 0 100px;*/ width: 150px; }
}
#top .top-wrap .top-search-box { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px 10px; }
#top .top-wrap .top-search-box .wrap { display: flex; align-items: center; justify-content: center; height: 100%; }
#top .top-wrap .top-search-box .wrap form { display: flex; width: 300px; padding: 7px 8px 8px; border: 4px solid white; }
#top .top-wrap .top-search-box .wrap form .searchbox { flex: 1; border: 0; background: transparent; color: white; }
#top .top-wrap .top-search-box .wrap form .searchbox::placeholder { color: #eee; }
#top .top-wrap .top-search-box .wrap form .searchbox:focus { outline: none; }
#top .top-wrap .top-search-box .wrap form button { flex: 0 0 25px; margin-left: 5px; border: 0; background: transparent; color: white; }
#top .top-wrap .top-search-box .wrap form button:focus { outline: none; }
#top.bg .top-wrap .top-search-box .wrap form { border: 4px solid #ccc; }
#top.bg .top-wrap .top-search-box .wrap form .searchbox { color: #ccc; }
#top.bg .top-wrap .top-search-box .wrap form .searchbox::placeholder { color: #ddd; }
#top.bg .top-wrap .top-search-box .wrap form button { color: #ccc; }

#top .top-wrap .right { display: flex; align-items: center; transition-duration: 200ms; }
#top .top-wrap .right section { position: relative; margin-right: 15px; }
#top .top-wrap .right section:last-child { margin-right: 0; }
#top .top-wrap .right .top-search { width: 25px; text-align: right; }
#top .top-wrap .right .top-search a { color: white; }
body.menu-on #top .top-wrap .right .top-search a, #top.bg .right .top-search a { color: #333; }

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

#top .top-wrap .right .links { margin-left: 5px; }
#top .top-wrap .right .links a { color: white; font-size: 13px; margin-right: 15px; }
#top .top-wrap .right .links a:last-child { margin-right: 0; }
#top .top-wrap .right .lang { position: relative; padding: 10px; background: transparent; cursor: pointer; }
#top .top-wrap .right .lang .item { border: 1px solid transparent; color: white; font-size: 13px; }
#top .top-wrap .right .lang .sub { position: absolute; left: 0; top: 0; z-index: 10; padding: 7px 0; border: 1px solid #333; background: white; display: none; }
#top .top-wrap .right .lang .sub a { display: block; color: #333; font-size: 13px; padding: 5px 10px; }
#top .top-wrap .right .lang .sub a i { display: inline; }

#menu-wrap-bottom-bg { position: absolute; top:0; left:0; right:0; transition-duration: 300ms; }
body.menu-on #menu-wrap-bottom-bg { background-color: rgba(253, 253, 253, 0.9); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); }


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

body.menu-on #top .top-menu-btn div, #top.bg .top-menu-btn div { background:#666; }

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: 767px) { 
	#top .top-menu-btn { right: 10px; } 
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
/* 메뉴높이 */
#menu { height: 50px; }

#menu { position: relative; padding-right: 40px; transition-duration: 200ms; }
#menu .ul { display: flex; align-items: stretch; justify-content: space-between; height: 100%; }
#menu .ul .li { position: relative; }

#menu .ul .li .a { position:relative; display: flex; align-items: center; height: 100%; padding: 0 36px; text-align: center; color: white; font-size: 1.2rem; font-weight: 300; }
#menu .ul .li .a:before { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; right:0; opacity: 0; height:3px; width:0; transition-duration: 300ms; }
#menu .ul .li:hover .a:before, #menu .ul .li.on .a:before { opacity: 1; width:80%; }

body.menu-on #menu .ul .li .a, #top.bg #menu .ul .li .a { color: #333; }

#menu .depth2 { position: absolute; left: 0; top: 100%; width:100%; padding-top:20px; display:none; }
#menu .depth2 .sub-wrap { text-align:center; }
#menu .depth2 .sub-wrap li { position:relative; transition-duration: 400ms; }
#menu .depth2 .sub-a { display:block; padding: 5px 10px; color: #888; font-weight: 400; white-space: nowrap; }

#menu .depth3 { visibility:hidden; opacity:0; }
#menu .depth3.on { visibility:visible; opacity:1; }
#menu .depth3 .sub-a { color:#aaa; font-size:.875rem; }

@media (max-width: 1500px) { 
	#menu { padding-right:0; }
	#menu .ul .li .a { padding: 0 20px; }
}
@media (max-width: 1024px) {
	#menu .ul .li .a { display:none; }
	#menu .depth2 .sub-a { padding: 5px 10px; font-size:.9rem; }
}