@charset "UTF-8";

/********************************************************
■ Header : 헤더 - 기본
********************************************************/
#top { left: 0; position: fixed; right: 0; top: 0; z-index: 10; /* 메뉴높이 */ height:100px; }
.menu-on:before { content:""; position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.4); z-index:9; }

#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 0px; transition-duration: 200ms; }
 

#top:hover .top-wrap, body.scrolled #top { background:#fff; box-shadow:5px 0 10px #aaa; }

#top .top-wrap { position:relative; height:100%; z-index:3; }
#top .top-wrap .c { position:relative; transition-duration: 200ms; height:100%; display:flex;padding-left: 0 !important; align-items:center; justify-content: space-between; padding-right: 0 !important; }

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

#top:hover .top-wrap .left .logo, body.scrolled #top .top-wrap .left .logo { background-image:url("../img/logo.png"); }


@font-face {
    font-family: 'Hanyoon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Hanyoon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#top .top-wrap .txt { position:absolute; left:15px; top:100px; transition-duration:0ms;  font-family: 'NPSfontBold'; font-size:1.4rem; display:none; }
#top .top-wrap .txt .head { font-weight:500; font-size:1rem; line-height: 1.8; color:#555 }
.top_txt_blue{color:#0c6fdf}
.top_txt_green{color:#51a42c}
.top_txt_org{color:#d66f1c}
.top_txt_purple{color:#7a50b4}
.top_txt_yellow{color:#d3a400}
.top_txt_pink{color:#d9525b}
.top_txt_blue2{color:#2a6390}


#top .top-wrap .right { position:relative; /*width:200px;*/ width:30px; margin-right:10px; display: flex; align-items: center; transition-duration: 200ms; }
#top .top-wrap .right section { position: relative; margin-right: 30px; }

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

#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: 1px solid #333; 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: #888; }
#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: #666; flex: 0 0 25px; margin-left: 5px; }
#top .top-wrap .top-search-box .wrap form button:focus { outline: none; }
#top .top-wrap .top-search-box .search-close { position:absolute; left:100%; top:35%; padding-left:5px; width:20px; height:20px; }

#top .top-wrap .right .lang { position:absolute; top:-5px; right:0; border:1px solid #fff; color:#fff; 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; }


#top:hover .top-wrap .top-wrap .right .lang, body.scrolled #top .top-wrap .right .lang { border-color:#333; color:#333; background:#fff; }

#top .top-wrap .right .links { position:relative; padding:20px 0; }
#top .top-wrap .right .links .member-btn { display:block; width:25px; height:25px; background:url('../img/top-icon-login.png') no-repeat center/contain; }
#top .top-wrap .right .links .sub { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:20px 30px; background:#fff; border:1px solid #ddd; display: none; }
#top .top-wrap .right .links:hover .sub, #top .top-wrap .right .links .sub:hover { display:block; }
#top .top-wrap .right .links .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 .links .sub a { display:block; color:#aaa; padding:5px 0; text-align:center; }


#menu-wrap-bottom-bg {position:absolute; left:0; right:0; top:100%; transition-duration: 500ms;}
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 { position:absolute; right:0px; top:50%; transform: translateY(-50%); height: 50px; width: 25px; transition-duration: 300ms; }
#top .top-menu-btn div { background: #fff; border-radius: 99px; height: 3px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s; width: 30px; }
#top .top-menu-btn div:nth-child(1) { margin-top: -8px; }
#top .top-menu-btn div:nth-child(3) { margin-top: 8px; }
#top:hover .top-wrap .top-menu-btn div, body.scrolled #top .top-menu-btn div { background:#111; }

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); }



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

#menu { position: relative; padding-left: 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 50px; text-align: center; color:#333; font-size: 1.12rem; font-weight: 600; }
#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:50px; display:none;font-size: 0.952rem; }
#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 20px; 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: 1605px) { 
	 
	#menu .ul .li .a { padding: 0 45px;font-size: 1rem; }
}

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