@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');

.clear:after { 
    content:""; 
    display:block; 
    clear:both;
}
* { margin:0; padding:0; outline:none; }
body {
line-height:1; font-size:14px; font-weight:400; color:#000; font-family: 'Noto Sans KR', sans-serif; word-wrap: break-word; word-break: keep-all;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif; line-height:1;  }
ul, ol { list-style:none; margin:0; }
a { outline:0; text-decoration:none; }
a:focus { outline:none; }
img { border:none; outline:none; max-width: 100%; }
p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
button { border: none; background: none; }

/* 탭 초기화 */
.tabBox .nav { border: none; }
.tabBox .nav > li { margin: 0; }
.tabBox .nav > li > a { padding: 0; margin: 0; border-radius:0; border: 0; }
.tabBox .nav > li:hover > a { background: none; } 
.tabBox .nav > li.active > a { border: none; background: none;  }


/* html 폰트 사이즈 */
@media (max-width:1200px) {
	html { font-size: 8.5px; }
}
@media (max-width:991px) {
	html { font-size: 8px; }
}
@media (max-width:768px) {
	html { font-size: 7.5px; }
}
@media (max-width:580px) {
	html { font-size: 6.5px; }
}

/*
mainColor
#004986

*/

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: 1400px; }
@media (max-width:1430px) {
	.containerV1 { padding: 0 15px; }
}

/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
.header_wrap { 
position:fixed; right:0; top:0; width:100%; z-index:2000; transition:0.4s; background: #fff; box-shadow:0 0 10px rgba(0,0,0,0.1);
}

.topBarWrap { background: #eee; }
.topBarWrap .containerV1 {
-ms-display:flex; -ms-justify-content:space-between; -ms-align-items:center;
display:flex; justify-content:space-between; align-items:center;
height: 40px;
}
.topBarWrap .containerV1 .leftItem { padding-left: 10px; }
.topBarWrap .containerV1 .leftItem > .item { display: inline-block; color: #959595; font-weight: 500; font-size: 13px; margin-right: 6px; }
.topBarWrap .containerV1 .leftItem > .item:after { content: '|'; display: inline-block; margin-left: 10px; font-size: 10px; transform:translateY(-2px); }
.topBarWrap .containerV1 .leftItem > .item:last-child { margin-right: 0; }
.topBarWrap .containerV1 .leftItem > .item:last-child:after { display: none; }
.topBarWrap .containerV1 .leftItem > .item a { color: inherit; }
.topBarWrap .containerV1 .leftItem > .item i { margin-right: 5px; }
.topBarWrap .containerV1 .rightItem { height: inherit; }
.topBarWrap .containerV1 .rightItem > a { 
display: block; background: #bfbfbf; height: inherit; line-height: 40px; padding: 0 2rem; color: #fff; font-size: 13px; font-weight: 500;
}
.topBarWrap .containerV1 .rightItem > a i { margin-right: 5px; }


#header { 
-ms-display:flex; -ms-justify-content:space-between; -ms-align-items:center;
display:flex; justify-content:space-between; align-items:center;
}

.logo a { 
display: block; width: 18.75vw; height: 2.66vw; transition:0.4s; min-width: 250px; min-height: 35px;
background-image: url(img/logo.png); background-repeat: no-repeat; background-position: 0 center; background-size:100%;
}


/* menu */
/*---------------------------------------- outer ---------------------------------------------*/
#h_menu .outer { -ms-display:flex; display:flex; position: relative; }
#h_menu .outer > li { position:relative;  } 
#h_menu .outer > li > a {
display:block; font-size:18px; text-align:center; transition:0.4s; padding: 0 2.5rem;
height:9.5rem; line-height:9.5rem; color: #434343;
}
/*---------------------------------------- //outer ---------------------------------------------*/


/*---------------------------------------- inner ---------------------------------------------*/
#h_menu .outer > li > .inner {
position:absolute; left: 0; z-index:1; border: 1px solid #ddd;
width:10.51vw; min-width: 150px; background:#fff; padding:10px 0; display:none;
}
#h_menu .outer > li > .inner > li > a  { display:block; transition:all 0.4s; padding:15px 20px; font-size:15px; }
/*---------------------------------------- //inner ---------------------------------------------*/



/* hover */
#h_menu .outer > li:hover > a { color:#fff; background: #004986; }
#h_menu .outer > li:hover > .inner { display:block; } 
#h_menu .outer > li > .inner > li > a:hover { color:#000; background:rgba(0,0,0,.1); } 


/* 스크롤 했을 때 해드 효과 */
.header_wrap.scroll { top: -40px; }
.header_wrap.scroll .logo a { background-size:90%; }
.header_wrap.scroll #h_menu .outer > li > a { height: 8rem; line-height: 8rem; }

/* 페이지 및 게시판 이동하면 해당 메뉴 스타일 */
#h_menu .outer > li > a.on { color:#fff; background: #004986; } 






@media (max-width:1500px) {
	#h_menu .outer > li > .inner { left: auto; right: 0; text-align: right; }
}


@media (max-width:991px) {

	.header_wrap { top: 0; height: 9.5rem; }

	.header_wrap #header { height: 9.5rem; }

	/* 모바일 열기 버튼 */
	.header_wrap .open_btn { font-size:25px; cursor:pointer; color:#000;}


	/* menu */
	.menu_box { 
	background-color:#004986; width: 20em; height: 100%; 
	position: fixed; right:0; top: 0; z-index:9999; margin-right:-20em; transition:margin-right 0.3s;
	}
	#h_menu {
	width: 20em; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; 
	}

	/* 모바일닫기버튼 */
	.close_btn { width:50px; height:50px; margin-right:auto; margin-left:0; cursor:pointer; }
	.close_btn > i { display:block; color:#fff; text-align:center; line-height:50px; font-size:30px; }
	
	

	/*---------------------------------------- outer ---------------------------------------------*/
	#h_menu .outer { flex-wrap:wrap; padding:30px 0; border-top:1px solid rgba(255,255,255,.1); }
	#h_menu .outer > li { width:100%; margin-right: 0; }
	#h_menu .outer > .btnBefore { margin-right: 0; }
	#h_menu .outer > li > a { 
	padding:12px 20px; font-weight:500; color:rgba(255,255,255,0.7); text-align:left; height:auto; line-height:1; border-bottom:1px solid rgba(255,255,255,.4);
	font-size: 16px; pointer-events:none;
	}
	/*---------------------------------------- //outer ---------------------------------------------*/

	/*---------------------------------------- inner ---------------------------------------------*/
	#h_menu .outer > li > .inner { 
	position:static; width:100%; padding:0; margin-left:30px; border-left:1px solid rgba(255,255,255,0.4); 
	background:none; border-top:none; border-bottom: none;
	transform:translateX(0);
	}
	#h_menu .outer > li > .inner > li:last-child > a { border-bottom:none; }
	#h_menu .outer > li > .inner > li > a { padding:10px 0 10px 15px; font-size: 14px; position:relative; text-align:left; color:#fff; }
	#h_menu .outer > li > .inner > li > a:before { 
	content:''; position:absolute; left:-3px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:#fff; 
	}
	/*---------------------------------------- //inner ---------------------------------------------*/

	

	/* hover */
	#h_menu .outer > li:hover > a { color:#fff; }
	#h_menu .outer > li:hover .inner { display:none; } /* 모바일일때 inner 나오게 하는 후버 효과 X */
	#h_menu .outer > li > .inner > li > a:hover { color:#fff; background:none; } 


	/* 모바일메뉴박스 보이게 하는 클래스 */
	.menu_box.inactive { margin-right:0; } 

	/* 모바일에서 outer li 클릭했을때 inner 나오는 효과 */
	#h_menu .outer > li.on > a { border-bottom:1px solid transparent; }
	#h_menu .outer > li.on .inner { display:block; }

	/* 스크롤 했을 때 해드 효과 */
	.header_wrap.scroll { top:0; }
	.header_wrap.scroll .logo a { background-size:90%; }
	.header_wrap.scroll #h_menu .outer > li > a { height: auto; line-height: 1; color:rgba(255,255,255,0.7); font-size: 16px; }

	/* 페이지 및 게시판 이동하면 해당 메뉴 스타일 */
	#h_menu .outer > li > a.on,
	.header_wrap.scroll #h_menu .outer > li > a.on { color:#fff; } 
}
/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/

/* 해드 밑에 빈 공간 높이 설정 */
.wrap { padding-top: calc( 9.5rem + 40px ); }
@media (max-width:991px) {
	.wrap { padding-top: 9.5rem; }
}



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
/* 타이틀박스 세팅 */
.index .titleBox .text1 { font-size: calc( 17px + 0.42vw ); font-weight: bold; color: #000; }


/* section1 */
.index .section1 { padding-top: calc( 50px + 2.15vw ); padding-bottom: calc( 30px + 1.58vw ); }
.index .section1 .titleBox { margin-bottom: 28px; padding-left: 1rem; }
.index .section1 .itemBox { 
-ms-display:flex; -ms-flex-wrap:wrap; -ms-align-items:flex-start;
display:flex; flex-wrap:wrap; align-items:flex-start;
}
.index .section1 .itemBox > li { flex:1; padding: 0 1rem; }
.index .section1 .itemBox > li .img1 { margin-bottom: 1.2rem; }
.index .section1 .itemBox > li .text1 { font-size: 2rem; color: #000; font-weight: bold; margin-bottom: 1.4rem; }
.index .section1 .itemBox > li .text2 { font-size: calc( 11px + 0.21vw ); color: #707070; font-weight: 500; margin-bottom: 3.5rem; line-height: 1.6; }
.index .section1 .itemBox > li .more { display: inline-block; }
.index .section1 .itemBox > li .more a { display: block; font-size: calc( 11px + 0.21vw ); color: #00a0e9; font-weight: 500; text-transform: uppercase; }
.index .section1 .itemBox > li .more a:hover { text-decoration: underline; }

@media (max-width:1200px) {
	.index .section1 .itemBox > li .text2 { height: 6.4em; margin-bottom: 2.5rem; }
}
@media (max-width:991px) {
	.index .section1 .itemBox > li .text2 { height: 8em; margin-bottom: 2rem; }
}
@media (max-width:768px) {
	.index .section1 .itemBox > li { width: 100%; flex:auto; margin-bottom: 3rem; padding: 0 1rem 3rem; max-width: 600px; border-bottom: 1px solid #eee; }
	.index .section1 .itemBox > li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
	.index .section1 .itemBox > li .text2 { height: auto }
}


/* section2 */
.index .section2 { padding-top: calc( 40px + 1.58vw ); padding-bottom: calc( 30px + 1.58vw ); background: #f7f7f7; }

.index .section2 .titleBox { margin-bottom: 20px; }

.index .section2 .textBox1 {
background: #00a1e9; border-radius:2rem; text-align: right; padding: 2.5rem 1.5rem; color: #fff; font-weight: 500; font-size: calc( 12px + 0.32vw );
line-height: 1.4;
}
.index .section2 .tabBox { margin: 15px 0 0; }
.index .section2 .tabBox .scrollBox1 { overflow-y: hidden; overflow-x: auto; }
.index .section2 .tabBox .nav { border-bottom: 2px solid #e5e5e5; display:flex; }
.index .section2 .tabBox .nav > li { float: none; text-align: center; flex:1; }
.index .section2 .tabBox .nav > li > a { font-size: calc( 12px + 0.32vw ); font-weight: 500; color: #434343; padding: 16px 2rem; position: relative; }
.index .section2 .tabBox .nav > li > a:after {
content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; border-bottom: 2px solid #2ba0db; display: none;
}
.index .section2 .tabBox .nav > li:hover > a { color: #000; } 
.index .section2 .tabBox .nav > li.active > a { color: #000; }
.index .section2 .tabBox .nav > li:hover> a:after { display: block; } 
.index .section2 .tabBox .nav > li.active > a:after { display: block; } 
.index .section2 .tabBox .tab-content { padding-top: 3rem; }

.index .section2 .more { margin-top: 4rem; }
.index .section2 .more a {
display: block; background: #004986; border-radius:2rem; padding: 2.7rem 1.5rem; color: #fff; position: relative; overflow: hidden;
}
.index .section2 .more a p { 
font-size: calc( 11px + 0.21vw ); font-weight: bold; text-transform: uppercase;
position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); line-height: 1; height: 1em; z-index: 10;
}
.index .section2 .more a span { 
position: absolute; left: 0; top: 0; width: 100%; height: 0; background: #00a1e9; z-index: 9; transition:0.4s;
}
.index .section2 .more a:hover span { height: 100%; }


/* section3 */
.index .section3 { padding: 8rem 0; }

.index .section3 .itemBox { 
-ms-display:flex; -ms-flex-wrap:wrap; -ms-align-items:flex-start;
display:flex; flex-wrap:wrap; align-items:flex-start;
}
.index .section3 .itemBox .titleBox { width: 25%; padding-right: 15px; }
.index .section3 .itemBox .titleBox .text1 { margin-bottom: 4.5rem; }
.index .section3 .itemBox .titleBox .text2 { color: #004986; margin-bottom: 2.5rem; font-size: calc( 12px + 0.32vw ); font-weight: bold; line-height: 1.4; }
.index .section3 .itemBox .titleBox .text3 { color: #7d7d7d; margin-bottom: 3rem; font-size: calc( 11px + 0.21vw ); line-height: 1.6; }
.index .section3 .more { display: inline-block; text-align: center; }
.index .section3 .more > a { 
color: #fff; display: block; font-size: calc( 11px + 0.21vw ); background: #00a1e9; border: 1px solid #00a1e9; padding: 1.3rem 4rem; border-radius:1rem;
text-transform: uppercase; transition:0.3s;
}
.index .section3 .more > a:hover { background: transparent; color: #00a1e9;  }

.index .section3 .itemBox .slideBox { width: calc( 100% - 25% ); height:100%;}


@media (max-width:991px) {
	.index .section3 .itemBox .titleBox { width: 100%; padding-right: 0; padding-bottom: 30px; }
	.index .section3 .itemBox .slideBox { width: 100%; }
}


/* section4 */
.index .section4 { padding: 15px 0; background: #004986; }

/*--------------------------------------------------- 인덱스세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
#footer { background: #004986; border-top: 1px solid #fff; }

#footer .contents_box { padding: 30px 0; }
#footer .contents {
-ms-display:flex; -ms-flex-wrap:wrap; -ms-align-items:center;
display:flex; flex-wrap:wrap; align-items:center;
}
#footer .contents > li:nth-child(1) { width: 25%; padding-right: 3rem; }


#footer .item2 { width: 50%; }
#footer .item2 > div { line-height: 1.6; font-size: 13px; color: #fff; }
#footer .item2 > div a { color: inherit;}
#footer .item2 > .text > span { position: relative; margin-right:10px; }
#footer .item2 > .text > span:after { content:'|'; position:absolute; right:-8px; top:50%; transform:translateY(-55%); }
#footer .item2 > .text > span:last-child:after { display: none; }
#footer .item2 > .copy { text-transform: uppercase; font-weight: inherit; }
#footer .item3 { margin-left: auto; margin-right: 0;}
#footer .item3 a { display: inline-block; padding: 10px 12px; color: #fff; font-size: 13px; border:1px solid #fff; transition:0.3s; }
#footer .item3 a:hover { background: #fff; color: #004986; }




@media (max-width:991px) {
#footer .contents > li:nth-child(1) { width: 100%; padding: 0; }
#footer .contents > li:nth-child(1) a { display: inline-block; }
#footer .contents > li:nth-child(1) img { display: block; width: 15.66vw; min-width: 250px; }
#footer .item2 { width: 100%; margin-bottom: 20px; }
#footer .item3 { width: 100%; }
}

@media (max-width:768px) {
#footer .item2 > .text > span { display:block; margin-right:0; }
#footer .item2 > .text > span:after { display:none; }

#footer .item2 { margin-top: 20px; }
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/








/* 서브페이지 */
.tmt_sub_frame { padding:30px 0 50px; min-height: 80vh; }



/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid #004986; background-color: #004986;}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: #004986;}
.border-color, i.border-color, img.border-color {border-color: #004986;}



.ik_top_sub_menu_frame {padding:0 0 30px;}
.ik_top_sub_menu_frame .sub_menu_con {display: flex; justify-content: center; align-items: center;}
.ik_top_sub_menu_frame .sub_menu_item {flex-basis: auto; padding: 0 10px;}

.ik_top_sub_menu_frame .sub_menu_item .menu_btn {border: 1px solid #DDDDDD; background: #f8f8f8;  text-align: center; padding:15px 30px;}
.ik_top_sub_menu_frame .sub_menu_item a {color: #666666;}

.ik_top_sub_menu_frame .sub_menu_item .menu_btn:hover {border: 1px solid #004986; background: #0469bd; color: #fff;}

.ik_top_sub_menu_frame .sub_menu_item .menu_btn_on {border: 1px solid #004986; background: #0469bd; color: #fff;}


.ik_top_sub_pimg_frame {padding:0 0 30px;}