@charset "utf-8";


/* 레이아웃 */

#gaonwrap { min-width:140rem; width:100%; }

#top { position:relative; min-width:140rem; width:100%; height:18.2rem; border-bottom:1px solid #ddd; background:#fff; z-index:100; }
	#toparea { position:relative; width:140rem; margin:0 auto; }
	
#container { position:relative; min-width:100%; width:100%; z-index:1; }	
	.inner { position:relative; width:140rem; margin:0 auto;  }
	
	
#bottom { position:relative; width:100%; background:#162745; z-index:2; }	



@media (min-width:1281px) and (max-width:1400px){
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; height:24.2rem; border-bottom:1px solid #ddd; background:#fff; z-index:100; }
		#toparea { position:relative; width:100%; padding:0 2.8rem; margin:0 auto; }
	
	#container { position:relative; min-width:100%; width:100%; z-index:1; }
        .inner { position:relative; width:100%; padding:0 2.8rem; margin:0 auto; }
		
            
	#bottom { position:relative; width:100%; background:#162745; z-index:2; }
}


@media (min-width:1025px) and (max-width:1280px){
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; height:24.2rem; border-bottom:1px solid #ddd; z-index:100; }
		#toparea { position:relative; width:100%; padding:0 2.8rem; margin:0 auto; }
	
	#container { position:relative; min-width:100%; width:100%; z-index:1; }
        .inner { position:relative; width:100%; padding:0 2.8rem; margin:0 auto; }
		
            
			
	#bottom { position:relative; width:100%; background:#162745; z-index:2; }
}


@media (min-width:769px) and (max-width:1024px){
	html, body, #gaonwrap { min-width:100%; width:100%; }
		
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; height:12.3rem; border-bottom:1px solid #ddd; z-index:100; }
		#toparea { position:relative; width:100%; margin:0 auto; }
	
	#container { position:relative; min-width:100%; width:100%; z-index:1; }
        .inner { position:relative; width:100%;  padding:0 2.4rem; margin:0 auto; }
		
			
	#bottom { position:relative; width:100%; background:#162745; z-index:2; }
}


@media (max-width:768px){
	html, body, #gaonwrap { min-width:100%; width:100%; }
		
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; height:10.3rem; border-bottom:1px solid #ddd; z-index:100; }
		#toparea { position:relative; width:100%; margin:0 auto; }
	
	#container { position:relative; min-width:100%; width:100%; z-index:1; }
        .inner { position:relative; width:100%; padding:0 1.6rem; margin:0 auto; }
		
			
	#bottom { position:relative; width:100%; background:#162745; z-index:2; }
}





/* 상단배너 */
#top-ban { width:100%; height:32px; line-height:32px; background:#EEEEF7;  }
#top-ban .nuri { padding-left:31px; background:url(/images/common/icon_taegeukgi.gif) no-repeat 0 50%; font-size:1.6rem; }

@media (max-width:768px){
	#top-ban .nuri { font-size:1.4rem; }
}






/* 모바일용 상단 버튼 */
.mobileTopBtn { display:none; width:0; height:0; overflow:hidden;  }

@media (min-width:769px) and (max-width:1024px){
	.mobileTopBtn { display:block; }
	.mobileTopBtn li.mobileTopBtn1 { position:absolute; right:30px; top:18px; display:block; }
	.mobileTopBtn li.mobileTopBtn2 { position:absolute; right:84px; top:28px; display:block; }
	.mobileTopBtn li.mobileTopBtn3 { position:absolute; right:84px; top:28px; display:block;}

	.mobileTopBtn li.mobileTopBtn1 a { text-align:center; font-size:1.5rem; display:flex; flex-direction:column; justify-content:center; align-items:center; }
	.mobileTopBtn li.mobileTopBtn1 a img { width:34px; display:block; margin-bottom:5px; }
}


@media (max-width:768px){
	.mobileTopBtn { display:block; }
	.mobileTopBtn li.mobileTopBtn1 { position:absolute; right:15px; top:15px; display:block; }
	.mobileTopBtn li.mobileTopBtn2 { position:absolute; right:47px; top:24px; display:block; }
	.mobileTopBtn li.mobileTopBtn3 { position:absolute; right:47px; top:24px; display:block; }
	.mobileTopBtn li.mobileTopBtn1 img { width:22px; }
	.mobileTopBtn li.mobileTopBtn2 img { width:22px; }
	.mobileTopBtn li.mobileTopBtn3 img { width:22px; }

	.mobileTopBtn li.mobileTopBtn1 a { text-align:center; font-size:1.4rem; display:flex; flex-direction:column; justify-content:center; align-items:center; }
	.mobileTopBtn li.mobileTopBtn1 a img { width:22px; display:block; margin-bottom:5px; }
}




/* 외부 링크 */
.underLink { position:relative; display:flex; justify-content:space-between; margin-top:15px; }


.underLinkUl { display:flex; justify-content:space-between; }
.underLinkUl > li { position:relative; height:20px; padding:0 16px 0 15px; }
.underLinkUl > li:after { content:''; position:absolute; right:0; top:8px; width:3px; height:3px; background:#ddd; display:inline-block; }
.underLinkUl > li:first-child { padding-left:0; }
.underLinkUl > li:last-child::after { display:none; }

.underLinkUl > li > a:link,
.underLinkUl > li > a:visited { height:20px; line-height:20px; color:#666; font-size:1.6rem; text-align:center; display:block; }
.underLinkUl > li > a:active,
.underLinkUl > li > a:focus,
.underLinkUl > li > a:hover { color:#113d8e; }
.underLinkUl > li > a.select { font-weight:800; }

.underLinkUl > li:nth-child(2) > a,
.underLinkUl > li:nth-child(3) > a { padding-right:23px; background:url(/images/common/underLink_arrow.png) no-repeat right 50%; }

.underLinkUl > li > ul { display:none; }




/* 폰트크기 */
.fontSetting { position:relative; }
.fontSetting .abtn_fontSize:link,
.fontSetting .abtn_fontSize:visited { position:relative; top:-3px; padding-left:15px; color:#555; padding-right:20px; background:url(/images/common/blt_arrowDown.png) no-repeat right 50%; font-size:1.6rem; }
.fontSetting .abtn_fontSize:active,
.fontSetting .abtn_fontSize:focus,
.fontSetting .abtn_fontSize:hover { color:#113d8e; }

.fontSetting .fontSizeCont { position:absolute; left:50%; top:35px; width:100px; padding:16px; border-radius:12px; border:1px solid #ddd; background:#fff; transform:translate(-50%, 0); box-shadow:0 3px 5px rgba(0,0,0,0.1); display:none; z-index:100;  }
.fontSetting .fontSizeCont:before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1.6rem; height: 1.6rem; background:#fff; border:1px solid #E6E8EA; border-top-color: transparent; border-left-color: transparent; transform: translateX(-50%) rotate(-135deg); margin-bottom:-.8rem;}


.fontSetting .fontSizeCont li a:link,
.fontSetting .fontSizeCont li a:visited { width:100%; padding:4px; font-size:90%; text-align:center; margin:2px 0; }
.fontSetting .fontSizeCont li a:active,
.fontSetting .fontSizeCont li a:focus,
.fontSetting .fontSizeCont li a:hover { border-radius:4px; background:#EEF2F7; color:#233479; }


@media (max-width:1024px){
	.underLink { display:none; }
}







/* 사이드메뉴 */
.sidemenu { display:flex; justify-content:flex-end; gap:5px; }
.sidemenu li a:link,
.sidemenu li a:visited { width:30px; height:30px; line-height:28px; border: 1px solid #BFBFBF; border-radius:5px; text-align:center; display:flex; justify-content:center; align-items:center; }
.sidemenu li a:active,
.sidemenu li a:focus,
.sidemenu li a:hover { border-color: #6e6e6e; background:#eef1fa; }


@media (min-width:1025px) and (max-width:1400px){
	
}

@media (max-width:1024px){
	
}





/* 타이틀 */
#top h1.title { position:absolute; left:0; top:90px; transform:translateY(-50%);}
#top h1.title a { width:100%; height:56px; padding:0px 0 0 67px; background:url(/images/common/mark.png) no-repeat; background-size:auto 56px; display:inline-block; word-break:keep-all; }
#top h1.title a strong { position:relative; top:-3px; color:#000; font-size:3.4rem; font-weight:800; } 
#top h1.title a span { color:#6A6A6A; font-size:1.7rem; font-weight:500;  letter-spacing:-0.5px; display:block; margin-top:-4px; }

@media (min-width:769px) and (max-width:1024px){
	#top h1.title { left:16px; top:15px; transform:none; }
}

@media (max-width:768px){
	#top h1.title { left:16px; top:15px; transform:none; }
	#top h1.title a { height:40px; padding:0 0 0 50px; background-size:auto 40px; }
	#top h1.title a strong { top:-7px; font-size:2.5rem; }
	#top h1.title a span { font-size:1.2rem; margin-top:-8px; }
}





/* 메인 메뉴 */
#menu { display:flex; justify-content:end; max-width:1400px; width:100%; z-index:99; margin:1rem auto 0;}
#topMenu { position:relative; max-width:800px; display:flex; justify-content:space-between; width:100%; overflow:visible !important; }

#topMenu > li { position:relative; flex-grow:1; text-align:center; display:inline-block; }
#topMenu > li > a:link,
#topMenu > li > a:visited { position:relative; display:flex; justify-content:center; align-items:center; min-height:8rem; color:#111; font-size:2.3rem; font-weight:700; letter-spacing:-1px; word-break:keep-all; }
#topMenu > li > a:active,
#topMenu > li > a:focus,
#topMenu > li > a:hover,
#topMenu > li > a.select { color:#ff6747;  }

#topMenu > li > a:link::before,
#topMenu > li > a:visited::before { position:absolute; left:50%; bottom:0; content:''; width:0; height:3px; background:#ff6747; text-align:center; transition:0.3s; transform:translate(-50%, 0); display:block; z-index:100; }
#topMenu > li > a:active::before,
#topMenu > li > a:focus::before,
#topMenu > li > a:hover::before { width:100%; }

#topMenu > li > a:link > ul::before,
#topMenu > li > a:visited > ul::before { position:absolute; left:50%; bottom:0px; content:''; width:0; border-bottom:3px solid #ff6747; text-align:center; transition:0.3s; transform:translate(-50%, 0); display:block; z-index:100; }
#topMenu > li > a:active > ul::before,
#topMenu > li > a:focus > ul::before,
#topMenu > li > a:hover > ul::before { width:100%; }




@media (min-width:1025px) and (max-width:1280px){
	#topMenu > li > a:link,
	#topMenu > li > a:visited { font-size:2.0rem; }
}



@media (max-width:1024px){
	#menu { display:none; } 
}


/* 서브메뉴 표시 */
#topMenu > li:hover > ul { background:#fafafa; }
#topMenu > li > ul { position:absolute; left:0; top:calc(100% - 1px); width:100%; height:25.8rem; padding:10px 0 0 0px; border-top:1px solid #ddd; border-left: 1px solid #eee; background:#fff; display:none; clear:both; z-index:1003;   }
#topMenu > li > ul > li { position:relative; width:100%; padding:3px 10px 4px 10px;  text-align:left; display:block; }
#topMenu > li > ul.end { border-right: 1px solid #eee;}

#topMenu > li > ul > li > a:link,
#topMenu > li > ul > li > a:visited { width:100%; height:auto; padding:0; background:none; color:#333; border:0; line-height:1.3; text-decoration:none; font-family:pgovm; font-size:1.5rem; margin:0; letter-spacing:-1px;  }
#topMenu > li > ul > li > a:active,
#topMenu > li > ul > li > a:hover,
#topMenu > li > ul > li > a:focus,
#topMenu > li > ul > li > a.select { clear:both; color:#2268bd; }

#topMenu > li > ul > li > ul.mdepth3 { width:0; height:0; font-size:0; display:none; }

.submenu { display:none; overflow:hidden; }

.menubox { position:absolute; left:0; top:18.1rem; width:100%; height:26.1rem; border-top:1px solid #ddd; border-bottom:3px solid #ff6747; background:#fff; display:none; z-index:10; }


@media (max-width:1024px){
	.topMenu,
	.menubox { display:none; } 	
	.menubox { width:0; height:0; border:0; line-height:0; }
}