@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { position:relative; background:#fff; transition-duration:500ms; z-index: 9999; border-bottom:1px solid #ccc; }
#top:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background: linear-gradient(to bottom, transparent 0%, var(--main-color2) 83%); }

#top .top-wrap { position:relative; display:flex; align-items:center; justify-content: space-between; height:110px; z-index:3; }

#top .top-wrap .left { position:relative; width:220px; height:80px; margin:15px 0; }
#top .top-wrap .left .swiper-container { height:100%; }
#top .top-wrap .left .swiper-slide { width:100%; }
#top .top-wrap .left .swiper-slide .img { height:100%; background:none no-repeat center/cover; }

#top .top-wrap .logo { position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%) translateZ(0px); width:200px; height:85px; background: url("../img/logo-white.png") center/contain no-repeat; }
#top .top-wrap .logo { image-rendering: -moz-pixelated; /* firefox */ image-rendering: -o-pixelated; /* opera */ image-rendering: -webkit-pixelated; /* chrome */ image-rendering: pixelated; backface-visibility: hidden; }

#top .top-wrap .right { position:relative; display:flex; flex-direction: column; align-items: flex-end; justify-content: space-between; height:100%; color:#fff; padding:10px 0 20px; }
#top .top-wrap .right a { margin-left:15px; font-size:.875rem; color:inherit; font-weight:600; }
#top .top-wrap .right .links { }
#top .top-wrap .right .links i { font-size:1rem; vertical-align:middle; margin-top:-2px; }
#top .top-wrap .right .top-nav { display:flex; text-align:center; line-height:.9; }
#top .top-wrap .right .top-nav i { font-size:28px; }
#top .top-wrap .right .top-nav span { display:block; }

#top .top-wrap .top-search-box { display: none; right:0; padding: 10px; position: absolute; top:100%; background:#fff; border:1px solid #ddd; }
#top .top-wrap .top-search-box form { border:1px solid #fff; display: flex; padding: 7px 8px 8px; width: 300px; color:#666; }
#top .top-wrap .top-search-box form .searchbox { background: transparent; border: 0; flex: 1; }
#top .top-wrap .top-search-box form .searchbox::placeholder { color: #888; }
#top .top-wrap .top-search-box form .searchbox:focus { outline: none; }
#top .top-wrap .top-search-box form button { background: transparent; border: 0; color:#666; flex: 0 0 25px; margin-left: 5px; }
#top .top-wrap .top-search-box form button:focus { outline: none; }
/*
#top .top-wrap .right .lang { position:absolute; top:-5px; right:0; border:1px solid #333; color:#333; border-radius: 20px; transition-duration: 300ms; padding:5px 15px; z-index:9; margin-right:0; display:none; }
#top .top-wrap .right .lang.on { background: #fff; color: #111; }
#top .top-wrap .right .lang .item .fa { margin:0 2.5px; }
#top .top-wrap .right .lang .sub { display: none; padding:10px 5px 5px; }
#top .top-wrap .right .lang .sub a { display: block; padding: 5px 0; color: #fff; }
#top .top-wrap .right .lang.on .sub a { color: #111; }
#top .top-wrap .right .lang .sub img { max-width: 16px; }
*/


#menu-wrap-bottom-bg { position:absolute; left:0; right:0; top:100%; transition-duration: 500ms; }
body.menu-on #menu-wrap-bottom-bg { background:#f3f3f3; border-top:1px solid #ddd; transition-duration: 300ms; }


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

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-wrap .left { width:30px; }
	#top .top-wrap .left .swiper-container { display:none; }
	#top .top-menu-btn { display:block; }
}

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

	#top .top-menu-btn { left:15px; }
}

/********************************************************
■ Menu : 데스크톱 메뉴
********************************************************/
#menu { position:relative; transition-duration: 200ms; height:70px; background:#fff; z-index:2; }
#menu.active { position:fixed; left:0; top:0; right:0; box-shadow:0 0 10px rgba(0,0,0,.1); }
#menu .ul { position:relative; width:100%; display: flex; justify-content: space-between; height:100%;  z-index:10; }
#menu .ul:after { display:none; }
#menu .ul .li { position: relative; height:100%; flex:1; }
#menu .ul .li:first-child:before, #menu .ul .li:after { content:""; position:absolute; top:15px; bottom:15px; width:1px; height:calc(100% - 30px); background:#eee; }
#menu .ul .li:first-child:before { right:100%; }
#menu .ul .li:after { left:100%; }

#menu .ul .li .a { position:relative; display:flex; align-items:center; justify-content:center; height:100%; font-weight: 500; z-index:2; color:#111; font-size:1.25rem; }
#menu .ul .li .a:before { content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:3px; width:0; transition-duration:200ms; }
#menu .ul .li .a:hover:before { width:100%; }
#menu .ul .li .a i { margin-right:10px; }


#menu .sub-wrap { position: absolute; padding:15px 0; transition-duration: 300ms; opacity:0; visibility:hidden; }
#menu .sub-wrap.on { opacity:1; visibility:visible; }
#menu .sub-wrap .sub-a { display:block; line-height:1.2; color:#333; white-space: nowrap; padding:15px 20px; }
#menu .sub-wrap .sub-a:hover, #menu .sub-wrap .sub-a.on { text-decoration:underline; }

#menu .sub-wrap.depth2 { background:#fff; border:1px solid #ddd; left:50%; top:100%; transform:translateX(-50%); margin-left:100px; width:100%; }
#menu .sub-wrap.depth2.on { margin-left:0; }
#menu .sub-wrap.depth2 li { position:relative; }
#menu .sub-wrap.depth2 li > .sub-a { padding-right:40px; position:relative; }
#menu .sub-wrap.depth2 i { position:absolute; right:20px; top:50%; transform:translateY(-50%); }

#menu .sub-wrap.depth3 { background:#f8f8f8; border:1px solid #ddd; left:100%; top:-16px; transform:translateX(50px); margin-left:1px; min-width:200px; }
#menu .sub-wrap.depth3.on { transform:translateX(0); }
#menu .sub-wrap.depth3 .sub-a { }

@media (max-width: 1400px) {
	#menu .ul { padding:0; }
}
@media (max-width: 1024px) {
	#menu { display:none; }
}