@charset "utf-8";

.btn_menu,
#search{display:none;}
.btn_menu{border-right:1px solid #e9e9e9; border-left-color:#e9e9e9;}

.logo {top: 24px;}
.logo strong{padding:4px 0 0 0; font-size: 30px;}
.logo span > span{font-size:18px; color:#222; font-weight:400; font-family:"NanumSquare";}
.global .dokdo img{height:20px;}
.global {font-family: 'score_300';}
#font_control {top: 44%; transform: translateY(-50%); position: absolute; right: 0; float: none;}
.global > li:nth-child(2):before{display:block;}
.util_wrap .btns {border-radius: 20px;}


/* 메인메뉴 */
#menuArea{overflow:initial; height: 100px;}
#menuArea.on{box-shadow:none;}
#menuArea:after{z-index:95;}
#menuArea:before,
#menuArea.on:before{display: none;}
#menuArea:after, #menuArea:before {top: 100px;}
#topmenu{padding:0 0 0 50%;}
#topmenu > li{position:relative; width:25%;}
#topmenu > li:last-child {display:block;}
#topmenu > li > a {font-size: 22px; line-height: 100px;}
#topmenu > li:hover > a,
#topmenu > li > a:hover,
#topmenu > li > a:active,
#topmenu > li > a:focus,
#topmenu > li.current_on > a{color:#0a2553;}

#topmenu li .menu{z-index:96; visibility:hidden; opacity:0; position:absolute; top:70px; left:50%; width:180px; min-height:0; padding:21px 0; box-shadow:3px 3px 18px rgba(0,0,0,0.1); transform:translateX(-50%); text-align:center; background: #1f4d7a; transition: 0.22s ease-in-out; border-radius: 10px;}
#topmenu li.active .menu{visibility:visible; opacity:1; top:78px;}
#topmenu .menu > ul > li{width:100%; padding:0; margin:0 0 7px;}
#topmenu .menu > ul > li > a{height:auto; line-height:110%; padding:10px 0; color:#fff; text-decoration:none;}
#topmenu .menu > ul > li > a,
#topmenu .menu > ul > li:hover > a, 
#topmenu .menu > ul > li.current_on > a, 
#topmenu .menu > ul > li > a:hover{background:transparent; border:none; color: #fff;}
#topmenu li li a span{position:relative; display:inline-block; padding:0 18px;}
#topmenu li li a span:after{content:''; display:block; position: absolute; bottom:-8px; left:50%; width:0; height:2px; background:rgba(255,255,255,0.5);}
#topmenu li li a:hover span:after{left:0; width:100%; transition:0.18s ease-in-out;}

#footer {padding:10px 0 0 0;}
#footer .logo strong{padding :0 0 2px;}
#footer .logo span{font-size:10px; font-family:"Noto Sans KR"; font-weight:400;}

#menuArea.on:after{display:none;}



@media all and (max-width:1680px) {
	#font_control {top: 50%; transform: none;}
}
@media all and (max-width:1024px) {
	.btn_menu {display:block; border: none; width: 40px;}
    
    .logo {left: 0; top: 16px;}
	.logo strong{padding:3px 0 0 0; letter-spacing:-2px; font-size:23px;}
	.logo span > span{font-size:15px; padding-left: 0;}
	.logo * {vertical-align: bottom;}
	
	.m_menu .logo {width: calc(100% - 10%);}
	.m_menu .logo > a {width: 100%;}
	.m_menu .logo > a > span {width: calc(100% - 15%);}
	.m_menu .logo > a > span strong {font-size: 22px;}
	.m_menu > ul > li.current_on .menu,
	.m_menu > ul > li .on + .menu{display:block !important;} 
	
	#footer .logo span{font-size:9px;}
}
@media all and (max-width:860px) {
	.m_menu .logo > a > span strong {width: calc(100% - 15%);}
}
@media all and (max-width:768px) {
	.logo span > span{font-size:14px;}
	.m_menu .logo > a > span {margin-top: 5px;}
	.m_menu .logo > a > span strong {font-size: 19px; width: auto; padding: 0;}
	
	#footer .logo span{font-size:8px;}
}
@media all and (max-width:660px) {
	.m_menu .logo > a > span {width: calc(100% - 18%);}
}
@media all and (max-width:568px) {
	.logo strong{font-size: 22px;}
	.m_menu .logo > a > span strong {width: calc(100% - 20%);}
    .btn_menu {top: 35px;}
}
@media all and (max-width:425px) {
}
@media all and (max-width:380px) {
	.logo span > span{font-size:13px;}
}