@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;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; font-size: 1em; }
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; }

/* 탭 초기화 */
.tabBox1 .nav { border: none; }
.tabBox1 .nav > li { margin: 0; }
.tabBox1 .nav > li > a { padding: 0; margin: 0; border-radius:0; border: 0; }
.tabBox1 .nav > li:hover > a { background: none; } 
.tabBox1 .nav > li.active > a { border: 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
#0076c0

*/

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

.wrap { padding-top: var(--head-height); }
@media (max-width:991px) {
	.wrap { }
}


:root {
	
	--head-height: 10rem; 

}

/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
.header_wrap { 
position:fixed; right:0; top:0; width:100%;  transition:0.4s; background: #fff; z-index: 999;
} 

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

.logo { width: 14.64vw; min-width: 180px; } 
.logo a { display: block; }


/* menu */
/*---------------------------------------- outer ---------------------------------------------*/

.menu_box {padding-right: 110px;}

/*.menu_box {margin: 0 29.2vw 0 0;}*/
#h_menu .outer { -ms-display:flex; display:flex; }
#h_menu .outer > li { position:relative; } 
#h_menu .outer > li > a {
display:block; font-size:min(4vw,17px); font-weight:700; text-align:center; transition:0.4s;
height: var(--head-height); line-height:var(--head-height); color: #000; padding: 0 max(15px, 2.08vw);
}
/*---------------------------------------- //outer ---------------------------------------------*/


/*---------------------------------------- inner ---------------------------------------------*/
#h_menu .outer > li > .inner {
position:absolute; right:0; z-sec2_frame:1; width:138px; background:rgba( 0,0,0,0.5 ); padding:10px 0; display:none; height: auto !important;
}
#h_menu .outer > li > .inner > li > a  { display:block; transition:all 0.4s; padding:15px 10px; font-size:max(14px, 0.798vw); text-align: center; line-height: 1.2; text-align: right; color: #fff;}
/*---------------------------------------- //inner ---------------------------------------------*/



/* hover */
#h_menu .outer > li:hover > a { color:#0072d6;}
#h_menu .outer >  li:hover > .inner { display:block;}
#h_menu .outer > li > .inner > li > a:hover { color:#0072d6; } 


/* 스크롤 했을 때 해드 효과 */
.header_wrap.scroll { box-shadow:0 0 10px rgba(0,0,0,0.2); }


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



/*main_img---------------------------------------*/
.main{width: 100%; height: calc(100vh - var(--head-height)); display: flex;}
.main .containerV1 {max-width: 1540px; display: flex; align-items: center; gap: 0 15%; justify-content: space-between;}

.main .containerV1 .title_icon {max-width: 25.94vw; }
.main .containerV1 .title_text_box {max-width: 42.03vw;}
.main .containerV1 .title_text_box .main_title_mob {display: none;}
.main .containerV1 .title_text_box > .title_pc01 {margin-top: 2.6%; margin-bottom: 0.6%;}




@media (max-width:991px) {
	
	.main{height: auto; aspect-ratio: 5 / 3;}
/*	.main{height: auto; aspect-ratio: 5 / 5;}*/
	.main .containerV1 {flex-direction: column; justify-content: flex-start; gap: 12% 0;}
	.main .containerV1 .title_icon {order: 1;}
	.main .containerV1 .title_text_box {order: 2; max-width: 77.03vw; }
	.main .containerV1 .title_text_box .main_title_pc {display: none;}
	.main .containerV1 .title_text_box > .title_mob01 {margin-top: 2.6%; margin-bottom: 0.6%;}
	.main .containerV1 .title_text_box .main_title_mob {display: block;}
/*	.main .containerV1 .title_text_box img:nth-child(2) {position: relative; left: 4.24vw;}*/
/*	.main .containerV1 .title_text_box img:nth-child(3) {position: relative; left: 4.25vw;}*/

	#header .containerV1 { height: var(--head-height); }

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


	/* menu */
	.menu_box { 
	background-color:#000; width: 20em; height: 100%; 
	position: fixed; right:0; top: 0; z-sec2_frame:9999; margin-right:-20em; transition:margin-right 0.3s;
	padding-right: 0;
	}
	#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 > 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;
	height: auto !important;}

	#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:hover > li > .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; }

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


/*main_img_500*/
@media all and (max-width: 500px) {
	.main{height: auto; aspect-ratio: 5 / 4;}
	.main .containerV1 {gap: 15% 0;}
	.main .containerV1 .title_icon {max-width: 35.94vw; padding-top: 15px;}
	.main .containerV1 .title_text_box {max-width: 100%;}

}


/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



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

/*버튼*/
.more { font-size: min(3.71vw, 15px); font-weight: 400;  width: 170px; text-align: center;}
.more a {color: #fff; display: block; width: 100%; height: 100%; background-color: #0072d6; line-height: 44px;  transition: 0.2s;}
.more > a:hover {background: #000;}


@media all and (max-width: 991px) {
	.more > a:hover {background: #0072d6;}
}


.sec1_frame {padding: 75px 0 45px 0; line-height: 1.6;}
.sec1_frame .itemBox {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px;}
/*.sec1_frame .itemBox li {display: flex; flex-direction: column; align-items: center;}*/
.sec1_frame .itemBox li {display: grid; justify-items: center; align-content: space-between;}
.sec1_frame .itemBox li .titleBox {margin-bottom: 20px; text-align: center;}
.sec1_frame .itemBox li:nth-child(1) .titleBox h2 {font-weight: bold;}
.sec1_frame .itemBox li:nth-child(1) .titleBox {margin-bottom: 35px;}
.sec1_frame .itemBox li .titleBox h2 {font-size: min(7.14vw, 30px); color: #0072d6; }
.sec1_frame .itemBox li .titleBox p {font-size: min(3.71vw, 18px);}
.sec1_frame .itemBox li .item {width: 100%;}
.sec1_frame .itemBox li .more {margin-top: 54px;}




@media (max-width:991px) {
.sec1_frame .itemBox {grid-template-columns: repeat(1, 1fr); row-gap: 100px;}
/*.sec1_img1 {margin: 0 auto; text-align: center;}*/
/*.sec1_text4 {font-size: 16px; padding-bottom:30px;}*/
}

.sec1_frame select::after {content: ''; position: absolute; width: 10px; height: 10px; background: #000; clip-path: polygon(50% 100%, 0 0, 100% 0);}



.sec2_frame .section2 {
padding: 60px 0; background: #eee;
}
.sec2_frame > .section2 .contents_box {
-ms-display:flex; -ms-align-items:center;
display:flex; align-items:center;
}
.sec2_frame .section2 .contents_box .contents1 { width: auto; padding:0 4.375% 0 0; position:relative;  }
.sec2_frame .section2 .titleBox { margin-bottom: 15px; font-size: min(7.14vw, 30px); line-height: 1.3;}
.sec2_frame .section2 .titleBox h2 {line-height: 35px;}
.sec2_frame .section2 .titleBox > .sub {font-size: 18px; line-height: 1.5;}
.sec2_frame .section2 .contents1 .text { font-size: min(3.71vw, 15px); color:#000; margin-bottom:40px; line-height: 22px; }



.sec2_frame .section2 .contents_box .contents2 { width: calc( 100% - 25% ); }


@media ( max-width:991px ) {
	.sec2_frame .section2 .contents_box .contents1 { width:33.3333%; }
	.sec2_frame .section2 .contents_box .contents2 { width: calc( 100% - 33.3333% ); }
}
@media ( max-width:768px ) {
	.sec2_frame .section2 { padding: 60px 0; }
	.sec2_frame .section2 .contents_box  { display:block; }
	.sec2_frame .section2 .contents_box .contents1 { width:100%; margin:0; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0;}
	.sec2_frame .section2 .contents_box .contents2 { width:100%; }
}









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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer_box*/
footer { background: #313131; }

footer > .contents_box { padding: 30px 15px 20px; 15px;}
footer .contents {
-ms-display:flex; -ms-flex-wrap:wrap; -ms-align-items:center; -ms-justify-content:center;
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
}


footer .item2 > div { line-height: 1.6; font-size: 13px; color: #fff; text-align: center; font-weight: 300; }
footer .item2 > div a { color: inherit; font-weight: inherit; }
footer .item2 > .text > span { position: relative; margin-right:10px; font-weight: inherit;  }
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: 300; }




footer > .info_box { padding:10px 0; background:#000; }


footer > .info_box .info { 
-ms-display:flex; -ms-justify-content:center; -ms-flex-wrap:wrap; 
display:flex; justify-content:center; flex-wrap:wrap; 
text-align: center;
}
footer .info > .item { position:relative; }
footer .info > .item:before { content:''; position:absolute; right:7px; top:50%; transform:translateY(-50%); width:1px; height:13px; background:#fff; }
footer .info > .item:last-child:before { display:none; }
footer .info > .item > a { display:block; color:#fff; font-size:13px; font-weight:500; line-height:1.8; margin-right:15px;  }

@media (max-width:1200px) {
footer .contents > li:nth-child(1) { width: auto; }
}

@media (max-width:991px) {
footer .contents > li:nth-child(1) { width: 100%; margin-right: 0; margin-bottom: 20px; }
footer > .contents_box { padding: 30px 15px 10px; 15px}
}

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

footer .item2 { margin-top: 20px; }
}
@media (max-width:450px) {
footer > .info_box .info {  }
footer .info > .item { width:50%; }
footer .info > .item:nth-child(1) { order:1; }
footer .info > .item:nth-child(2) { order:4; }
footer .info > .item:nth-child(3) { order:3; }
footer .info > .item:nth-child(4) { order:2; }
footer .info > .item:before { right: 0; }
footer .info > .item:nth-child(2n):before { display:none; }
footer .info > .item > a { margin-right: 0; }
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/


/*--------------------------------------------------- 푸터세팅 인규 ----------------------------------------------------------------------------*/

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


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