@charset "UTF-8";



/********************************************************

■ Header : 헤더 - 기본

********************************************************/

#top { position: fixed; left: 0; right: 0; top: 0; z-index: 10; transition-duration: 200ms;  background-image:url("../img/top_bg.png"); }

#top .top-wrap { position: relative; display: flex; align-items: center; justify-content: space-between; transition-duration: 200ms; }

/*#top .top-wrap .logo { width: 200px; margin-top:20px; height: 60px; background: url("../img/logo-white.png") left bottom/contain no-repeat; transition-duration: 200ms; }*/

#top .top-wrap .logo { width: 200px; height: 80px; background: url("../img/logo-white1.png") left bottom/contain no-repeat; transition-duration: 200ms; }


@media (max-width: 1199px) { 

	#top .top-wrap .logo { width:120px; } 

}



#top .top-wrap .right { position:absolute; right:15px; top:15px; display: flex; align-items: center; transition-duration: 200ms; font-size:.875rem; }

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



#top .top-wrap .right .member { color: #fff; }

#top .top-wrap .right .member a { position:relative; color: #fff; margin: 0 10px; }

#top .top-wrap .right .member a:after { content:"·"; position:absolute; right:-15px; top:50%; transform:translateY(-50%); }



#top .top-wrap .right .lang { position: relative; background: transparent; cursor: pointer; }

#top .top-wrap .right .lang .item { display: flex; align-items: center; height: 100%; color: #fff; }

#top .top-wrap .right .lang .item .fa { margin-right:5px; }

#top .top-wrap .right .lang .sub { position: absolute; left: 50%; transform:translateX(-50%); padding: 10px; background: #fff; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); border-radius:5px; display:none; }

#top .top-wrap .right .lang .sub a { display: flex; align-items: center; color: #666; }

#top .top-wrap .right .lang .sub a img { width: 20px; height: 20px; }

#top .top-wrap .right .lang .sub a span { margin-left: 5px; font-size:.813rem; }



#top .top-wrap .right .top-search-box { width:200px; border: 1px solid #fff; border-radius:5px; margin-left:15px; }

#top .top-wrap .right .top-search-box form { position: relative; display: flex; align-items: center; width: 100%; padding: 5px 10px; }

#top .top-wrap .right .top-search-box form .searchbox { width:160px; border: 0; background: transparent; color: #fff; font-size:.875rem; }

#top .top-wrap .right .top-search-box form .searchbox:-ms-input-placeholder { color:rgba(255,255,255,.5); }

#top .top-wrap .right .top-search-box form .searchbox::-ms-input-placeholder { color:rgba(255,255,255,.5); }

#top .top-wrap .right .top-search-box form .searchbox::-webkit-input-placeholder { color:rgba(255,255,255,.5); } 

#top .top-wrap .right .top-search-box form .searchbox::-moz-placeholder { color:rgba(255,255,255,.5); }

#top .top-wrap .right .top-search-box form .searchbox:focus { outline: none; }

#top .top-wrap .right .top-search-box form button { margin-left:5px; border: 0; background: transparent; color: #fff; }

#top .top-wrap .right .top-search-box form button:focus { outline: none; }



@media (max-width: 1400px) { 

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

}



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

body.menu-on #menu-wrap-bottom-bg { border-bottom:1px solid #ddd; }

.is-subpage #menu-wrap-bottom-bg { height:50px; border-bottom:1px solid #ddd; }



/* 상단 우측 메뉴버튼 */

#top .top-menu-btn { position:absolute; right:20px; top:20px; transition-duration: 300ms; width: 25px; height: 25px; }

#top .top-menu-btn div { background-color: #fff; position: absolute; left: 50%; top: 50%; width: 25px; height: 4px; border-radius: 2px; transform: translate(-50%, -50%); transition: all .5s; }

#top .top-menu-btn div:nth-child(1) { margin-top: -7px; }

#top .top-menu-btn div:nth-child(3) { margin-top: 7px; }

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: 80px; margin-top:40px; }

body.menu-on #menu-wrap-bottom-bg, #menu .sub-wrap, #menu .sub-menu-fix { top:100%; height: 50px; }



#menu { position: relative; width:calc(100% - 200px); }

@media (max-width: 1199px) { 

	#menu { width:calc(100% - 120px); padding-left:10px; }

}

#menu .ul { display: flex; align-items: stretch; justify-content: space-between; height: 100%; }
#menu .ul::after { display:none; }

#menu .ul .li { position: relative; flex:1; }

/*#menu .ul .li .a { display: inline-block; align-items: center; padding:0 30px; height: 100%; color: #fff; font-size: 17px; font-family: 'Godo'; font-weight: 400;  padding-top:30px}*/
#menu .ul .li .a { display: flex; align-items: center; justify-content:flex-end; height: 100%; color: #fff; font-size: 17px; font-family: 'Godo'; font-weight: 400; }

#menu .ul .li:hover .a, #menu .ul .li.on .a { color: #fff; }

#menu .ul .li .sub-wrap, #menu .ul .li .sub-menu-fix { position: absolute; left:0px; opacity:0; transition-duration: 200ms; z-index:-9999; }

#menu .ul .li:nth-child(1) .sub-wrap, #menu .ul .li:nth-child(1)  .sub-menu-fix {left:60px; }

#menu .ul .li:nth-child(2) .sub-wrap, #menu .ul .li:nth-child(2)  .sub-menu-fix{  left:0px; }

#menu .ul .li:nth-child(3) .sub-wrap, #menu .ul .li:nth-child(3)  .sub-menu-fix { left:-530px; }

#menu .ul .li:nth-child(4) .sub-wrap, #menu .ul .li:nth-child(4)  .sub-menu-fix  { left:-100px; }

#menu .ul .li:nth-child(5) .sub-wrap, #menu .ul .li:nth-child(5)  .sub-menu-fix  {  left:30px;  }

#menu .ul .li:nth-child(6) .sub-wrap, #menu .ul .li:nth-child(6)  .sub-menu-fix { left:-510px; }

#menu .ul .li:nth-child(7) .sub-wrap, #menu .ul .li:nth-child(7)  .sub-menu-fix { left:-510px; }

#menu .ul .li:last-of-type .sub-wrap, #menu .ul .li:last-of-type .sub-menu-fix { left:auto; right:0; transform:translateX(0); }

#menu .ul .li:hover .sub-wrap, #menu .ul .li.on .sub-menu-fix { opacity:1; transition-delay:100ms; }

#menu .ul .li.on .sub-menu-fix { z-index:9998; }

#menu .ul .li:hover .sub-wrap { z-index:9999; }

#menu .ul .li:hover .sub-wrap + .sub-menu-fix { opacity:0; z-index:-9999; }

#menu .ul .li .sub-1div { display: flex; align-items: center; height: 100%; }

#menu .ul .li .sub-a { padding: 0 15px; text-align: left; color: #333; font-size: .9rem; font-weight: 500; white-space: nowrap; }

#menu .ul .li .sub-a:last-child { padding-right:0; }







@media (max-width: 1500px) {

	#menu .ul .li .a { padding: 0 15px; padding-top:30px }

	#menu .sub-wrap .sub-a { padding: 0 15px; } 

}



@media (max-width: 1199px) {

	#menu .ul .li .a { padding: 0 5px; padding-top:30px }

	#menu .sub-wrap .sub-a { padding: 0 5px; } 

}