@charset "utf-8";


/* 건너뛰기 */   
.skipNav { position:absolute; left:0; right:0; top:-2px; width:100%; text-align:center; z-index:10000;}
.skipNav a { display:block; color:#fff; height:1px; overflow:hidden;}
.skipNav a:focus,
.skipNav a:active { height:30px; line-height:30px; background:#da131a; color:#fff !important; font-size:110%; }
.rotate>* {-ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg);}




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

#top-ban .inner { display:flex; justify-content:space-between; align-items:center; height:3.2rem; }


@media (min-width:1025px) and (max-width:1170px){
	#top-ban .inner { flex-wrap:wrap; height:6.4rem;  justify-content:flex-start; }
	#top-ban .underLinkUl { margin-bottom:0.6rem; }
}

@media (max-width:1024px){
	#top-ban .underLinkUl { display:none; }
}

@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:3rem; top:1.2rem; 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:1.6rem; top:1.2rem; display:block; }

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


.underLinkUl { display:flex; justify-content:flex-end; }
.underLinkUl > li { position:relative; padding:0 1.6rem; }
.underLinkUl > li:after { content:'|'; position:absolute; top:-3px; right:-2px; color:#cdd0d5; font-family:gulim; display:inline-block; }
.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.5rem; text-align:center; display:block; }
.underLinkUl > li > a:active,
.underLinkUl > li > a:focus,
.underLinkUl > li > a:hover { color:#113d8e; }
.underLinkUl > li > a.select { color:#113d8e; font-weight:700; }



.underLinkUl > li > div { position:absolute; left:50%; top:20px; transform:translate(-50%,0); display:none; z-index:9999 !important; padding-top: 5px; }
.underLinkUl > li > div ul { display:flex; flex-wrap:wrap;  justify-content:flex-start; padding:1.6rem; border:1px solid #ddd; border-radius:2.0rem; background:#fafafa;margin-top: 5px; /* 약간의 여백이 필요하다면 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 그림자를 주면 경계가 명확해짐 */ }



.underLinkUl > li > div ul li a:link,
.underLinkUl > li > div ul li a:visited { position:relative; color:#555; font-size:1.6rem;  }
.underLinkUl > li > div ul li a:active,
.underLinkUl > li > div ul li a:focus,
.underLinkUl > li > div ul li a:hover { color:#113d8e; }

.underLinkUl > li > div ul li a:link::before,
.underLinkUl > li > div ul li a:visited::before { content:''; position:absolute; left:50%; bottom:0; width:0; height:2px; background-color:#fff; text-align:center; transform:translate(-50%,0); transition:0.3s; }
.underLinkUl > li > div ul li a:active::before,
.underLinkUl > li > div ul li a:focus::before,
.underLinkUl > li > div ul li a:hover::before { width:110%; background-color:#06c; }


.memberList { width:24rem;   }
.memberList ul li { width:33.333%; text-align:center;  }

.committeeList { width:24rem; }
.committeeList ul li { width:100%; text-align:center;  }


.mUnderLink .memberList { width:100%;   }
.mUnderLink .memberList ul { display:flex; justify-content:flex-start; flex-wrap:wrap; padding:0.8rem 0; background:#131b2a;   }
.mUnderLink .memberList ul li { width:33.333%; text-align:center;  }
.mUnderLink .memberList ul li a:link,
.mUnderLink .memberList ul li a:visited { padding:0.8rem 0; color:#ccc; font-size:1.6rem; display:inline-block; }
.mUnderLink .memberList ul li a:active,
.mUnderLink .memberList ul li a:focus,
.mUnderLink .memberList ul li a:hover { color:#fff; }


.mUnderLink .committeeList { width:100%; }
.mUnderLink .committeeList ul { display:flex; justify-content:flex-start; flex-wrap:wrap;  width:100%; padding:0.8rem 0; background:#131b2a;  }
.mUnderLink .committeeList ul li { width:100%; text-align:center;  }
.mUnderLink .committeeList ul li a:link,
.mUnderLink .committeeList ul li a:visited { padding:0.8rem 0; color:#ccc; font-size:1.6rem; display:inline-block; }
.mUnderLink .committeeList ul li a:active,
.mUnderLink .committeeList ul li a:focus,
.mUnderLink .committeeList ul li a:hover { color:#fff; }





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







/* utilList */
.utilList { display:flex; justify-content:flex-end; }
.utilList li { display:flex; align-items:center; margin-right:3.0rem; }
.utilList li:last-child { margin-right:0; }
.utilList li.sns { margin-right:1.2rem; }
.utilList li:nth-child(3).sns { margin-right:3.0rem; } 

.utilList li a:link,
.utilList li a:visited { color:#1e2124; font-weight:700; }
.utilList li a:active,
.utilList li a:focus,
.utilList li a:hover { color:#225588; }

.utilList li.sns a:link,
.utilList li.sns a:visited { width:4rem; height:4rem; border: 1px solid #E1E1E1; border-radius:50%; text-align:center; display:flex; justify-content:center; align-items:center; }
.utilList li.sns a:active,
.utilList li.sns a:focus,
.utilList li.sns a:hover { border-color: #6e6e6e; background:#eef1fa; }


.utilList a svg { position:relative; top:-1px; color:#9d9d9d; font-size:1.4rem; }

	/* 폰트셋팅, 유틸과 사이트바에 사용*/
li.fontSize { position:relative; }
li.fontSize ul { position:absolute; left:50%; top:5rem; width:10rem; padding:1.6rem; border-radius:1.2rem; border:1px solid #ddd; background:#fafafa; transform:translateX(-50%); text-align:center; box-shadow:0 0.4rem 1rem rgba(0,0,0,0.1); z-index:100;  display:none;   }
li.fontSize ul: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; }

li.fontSize ul li { width:100%; display:block;}
li.fontSize ul li a:link,	
li.fontSize ul li a:visited { width:100%; line-height:1.8; padding:0; font-size:1.6rem; font-weight:500; text-align:center; display:block; }
li.fontSize ul li a:active,
li.fontSize ul li a:focus,
li.fontSize ul li a:hover { color:#c43858; }

@media (min-width:1025px) and (max-width:1280px){
	.utilList li { margin-right:2.0rem; }
}

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


















#bottom > .inner { padding:4rem 0 4rem; font-size:1.6rem; }

#bottom .f-logo { height:5.2rem; line-height:4.8rem; padding:0px 0 0 6.6rem; background:url(/images/common/mark.png) no-repeat; background-size:auto 5.2rem; display:inline-block; word-break:keep-all; margin-bottom:2.4rem; }
#bottom .f-logo strong { position:relative; top:-2px; color:#777; font-size:3.2rem; font-weight:700; }


#bottom .f-cnt { color:#666; display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:3.2rem;}

#bottom .f-cnt .f-info { display:flex; flex-direction:column; line-height:2.0; }
#bottom .f-cnt .f-info dl dt { float:left; width:70px; font-weight:700; }
#bottom .f-cnt .f-info dl dd { margin-left:70px; width:calc(100% - 70px); }

#bottom .f-cnt .f-link .link-go { display:flex; justify-content:flex-start; flex-direction:column; margin-bottom:3.2rem; }

#bottom .f-cnt .f-link .link-go a:link,
#bottom .f-cnt .f-link .link-go a:visited { line-height:3.2rem; color:#666; display:flex; justify-content:space-between; align-items:center;  }
#bottom .f-cnt .f-link .link-go a:active, 
#bottom .f-cnt .f-link .link-go a:focus,
#bottom .f-cnt .f-link .link-go a:hover { color:#284394; }


#bottom .f-cnt .f-link .link-sns { display:flex; justify-content:flex-start; gap:0.8rem;  }
#bottom .f-cnt .f-link .link-sns a:link,
#bottom .f-cnt .f-link .link-sns a:visited { width:4rem; height:4rem; border:1px solid #ddd; border-radius:50%; background:#F4F5F6; display:flex; justify-content:center; align-items:center; }
#bottom .f-cnt .f-link .link-sns a:active, 
#bottom .f-cnt .f-link .link-sns a:focus,
#bottom .f-cnt .f-link .link-sns a:hover { border:1px solid #284394; background:#284394; color:#fff; }


#bottom .f-btm { padding-top:3.2rem; border-top:.1rem solid #cdd0d5; color:#666;   }
#bottom .f-btm .f-btm-text { display:flex; justify-content:space-between;}
#bottom .f-btm .f-btm-text .f-menu { display:flex; justify-content:flex-start; gap:2rem; }

#bottom .f-btm .f-btm-text .f-menu a:link,
#bottom .f-btm .f-btm-text .f-menu a:visited { color:#666; }
#bottom .f-btm .f-btm-text .f-menu a:active,
#bottom .f-btm .f-btm-text .f-menu a:focus,
#bottom .f-btm .f-btm-text .f-menu a:hover { color:#284394; }

#bottom .f-btm .f-btm-text .f-menu a:nth-child(1):link,
#bottom .f-btm .f-btm-text .f-menu a:nth-child(1):visited { color:#284394; }
#bottom .f-btm .f-btm-text .f-menu a:nth-child(1):active,
#bottom .f-btm .f-btm-text .f-menu a:nth-child(1):focus,
#bottom .f-btm .f-btm-text .f-menu a:nth-child(1):hover { color:#0c2264; }

#bottom .f-btm .f-copy { font-size:1.5rem;  }



@media (max-width: 1400px) {
	#bottom > .inner { padding:4rem 2.8rem 4rem; font-size:1.6rem; }
}


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

@media (max-width: 768px) {
	#bottom > .inner { padding:4rem 1.6rem 4rem; font-size:1.5rem; word-break:keep-all; }
		
	#bottom .f-cnt { justify-content:flex-start; flex-wrap:wrap; }
	#bottom .f-cnt .f-info { width:100%; margin-bottom:2.8rem; }
	
	#bottom .f-btm .f-btm-text { justify-content:flex-start; flex-wrap:wrap; }
	#bottom .f-btm .f-btm-text .f-menu { width:100%; gap:0.4rem 1.6rem; flex-wrap:wrap; margin-bottom:1.6rem; }
}