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

/* reset */

* { margin:0; padding:0; outline:none; box-sizing:border-box; }
html { font-size: 10px; }
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; padding: 0; }
a { outline:0; text-decoration:none; color: #000; }
a:focus { outline:none; }
figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0; }
img { border:none; outline:none; max-width: 100%; }
p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
button, input, submit { border: none; background: none; }
dt { font-weight: normal; }

/* 탭 초기화 */
.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; }
}
@media (min-width:1200px) and (max-height:800px) {/* 너비 1200이상 높이 800이하 */
html { font-size: 8px; }
}
@media (min-width:1200px) and (max-height:650px) {/* 너비 1200이상 높이 650이하 */
html { font-size: 7.5px; }
}
@media (min-width:1200px) and (max-height:500px) {/* 너비 1200이상 높이 500이하 */
html { font-size: 6.5px; }
}



:root {
/* 컨텐츠 너비 */
--containerV1-width : 1200px;

--logo-width: max(200px, 16.46vw);

--header-height: 10rem;

--main-color : #64a25e; /* mainColor */

--page-main-color : #6ea669;
--page-main-color2 : #6fa669;

--font-size30 : min(7.50vw,30px); /* 30px */
--font-size25 : min(6.25vw,25px); /* 25px */
--font-size22 : max(16px,2.2rem); /* 22px */
--font-size20 : max(15px,2rem); /* 20px */
--font-size18 : max(14px,1.8rem); /* 18px */
--font-size16 : max(13px,1.6rem); /* 16px */
--font-size15 : max(12px,1.5rem); /* 15px */
--font-size14 : max(11.5px,1.4rem); /* 14px */
}

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

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


/* head */
.header_wrap { 
position:sticky; left:0; top:0; width:100%; z-index:1000; background:#fff; border-bottom: 1px solid #ededed;
transition:0.2s;
}

#header { 
-ms-display:flex; display:flex; 
-ms-align-items:center; align-items:center;
height:var(--header-height);
}

.logo { width: var(--logo-width); margin-right: 5rem; }
.logo a { display: block; }

.menu_box { margin-left: auto; margin-right: 0; }
.menu_box #h_menu {
-ms-display:flex; -ms-flex-wrap:wrap; -ms-align-items:center;
display:flex; flex-wrap:wrap; align-items:center;
}


/* Outer */
.menu_box .outer { -ms-display:flex; display:flex; }
.menu_box .outer > li { margin-right: 4rem; }
.menu_box .outer > li:last-child { margin-right: 0; }
.menu_box .outer > li > a { 
display:block; font-size:var(--font-size20); font-weight: bold; color:#333; transition:0.4s; position:relative;
height:var(--header-height); line-height:var(--header-height); letter-spacing: -0.02em;
}
.menu_box .outer > li > a:after {
content: ''; position: absolute; left: 0; bottom: 2rem; border-bottom: 2px solid var(--main-color); width: 100%; display: none;
}



/* Inner */
.menu_box .inner_wrap { position:absolute; left:0; top:100%; width:100%; background:#f4f4f4; display:none; transition:0.4s; }
.menu_box .inner_box { 
display:flex; flex-wrap:wrap; align-items:stretch;
position:relative;
}
.menu_box .inner_box > .text_box { 
-ms-display:flex; -ms-flex-direction:column; -ms-justify-content:center; -ms-align-items:center;
display:flex; flex-direction:column; justify-content:center; align-items:center;
width: calc(var(--logo-width) + 5rem); background: var(--main-color);  color: #fff; text-align: center;
}
.menu_box .inner_box > .text_box > p { width: 100%; }
.menu_box .inner_box > .text_box > .text1 { font-size:max(3.077rem,1.46vw); font-weight:bold; margin-bottom:2.4rem; }
.menu_box .inner_box > .text_box > .h_line1 { width: 4.6rem; height: 1px; background: #fff; margin: 0 auto 2.4rem; }

.menu_box .inner_box > .inner { 
flex:1; padding: 4.5rem 0 7.5rem 4.5rem; 
display:grid; grid-template-columns:repeat(4,1fr); gap:4rem 7rem;
}
.menu_box .inner_box > .inner > li > a {
display:block; font-size:var(--font-size16); position:relative; padding-bottom: 15px; color:#000; position: relative;
}
.menu_box .inner_box > .inner > li > a:after {
content: ''; position: absolute; right: 0; top: 5px; width: 14px; height: 5px;
background-image: url(img/head_innerIcon1.png); background-repeat:no-repeat; background-position: center center; background-size:cover;
}
.menu_box .inner_box > .inner > li > a:before { content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--main-color); transition:0.4s; }


/* //Inner */
/* //Outer */







/* hover */
.menu_box .outer > li:hover > a { color:var(--main-color); }
.menu_box .outer > li:hover > a:after { display: block; }
.menu_box .outer > li:hover .inner_wrap { display:block; } /* outer li hover inner_wrap보이게  */
.menu_box .inner_box > .inner > li:hover > a { color: var(--main-color); }
.menu_box .inner_box > .inner > li:hover > a:before { width:100%; } /* inner li a hover 밑줄보이게 */


/* outer li a 클릭해서 페이지 또는 게시판 이동하면 해당 outer li a의 color */
.menu_box .outer > li > a.on { color:var(--main-color); }
.menu_box .outer > li > a.on:after { display: block; }

/* 스크롤할때 */


@media (max-width:1230px) {
	.menu_box .inner_wrap .containerV1 { padding: 0 15px 0 0; }
}


@media (max-width:991px) {
	.header_wrap { top:0; overflow-x: hidden; }

	#header { justify-content:space-between; }

	.open_btn { font-size:20px; cursor:pointer; color: #000; }

	.menu_box { 
	border-right: solid 1px #eee; width: 20em; height: 100%; 
	position: fixed; right:0; top: 0; z-index: 9999; margin-right:0; transition:0.4s; background: #f4f4f4;
	margin-right:-20em;
	}
	.menu_box #h_menu { width: 100%; left: 0; height:100%; position: absolute; top: 0; display: block; overflow-x: hidden; overflow-y: auto; }

	.mob_box1 { 
	background: var(--main-color); padding:10px;
	display:flex !important; justify-content:space-between; align-items:center;
	}
	.mob_box1 .logo_mob { width: var(--logo-width); }
	.mob_box1 .logo_mob a { display: block; }

	.close_btn { cursor:pointer; height: 46px; }
	.close_btn > i { display:block; color:#fff; text-align:center; font-size:25px; line-height: 46px; }

	/* Outer */
	.menu_box .outer { display:block; background: #fff; width: calc( 100% - 20px ); margin: 20px auto 0; padding: 10px 0; }
	.menu_box .outer > li { padding: 0 10px; margin-right: 0; }
	.menu_box .outer > li > a { padding:0; height:auto; line-height:1; padding:12px 15px; border-bottom: 1px solid #dadada; font-size:16px; pointer-events:none; }
	.menu_box .outer > li:last-child > a { border-bottom: none; }
	.menu_box .outer > li > a:after { 
	content:'\f107'; left: auto; right:15px; top:50%; bottom: auto; border-bottom: none; width: auto;
	transform:translateY(-50%); font-family:fontAwesome; transition:0.4s; display: block;
	} /* outer li a 화살표 */
	
	
	

	/* Inner */
	.menu_box .inner_wrap { position:static; display:block; visibility:hidden; height:0; transform:translateY(0); opacity:0; border-bottom:none; }

	.menu_box .inner_wrap .containerV1 { width:auto; margin:0; padding:0; }
	.menu_box .inner_box > .text_box { display:none; }

	.menu_box .inner_box { padding:0; display:block; }
	.menu_box .inner_box > .inner { display: block; transform:translateY(0); padding: 0; }
	.menu_box .inner_box > .inner > li { border-bottom:1px solid #eee; }
	.menu_box .inner_box > .inner > li:last-child { border-bottom:none; }
	.menu_box .inner_box > .inner > li > a { background-color: #eee; font-size: 14px; color: #333; padding:10px 15px 10px 20px; }
	.menu_box .inner_box > .inner > li > a:after { right: 15px; top: 50%; transform:translateY(-50%); }
	.menu_box .inner_box > .inner > li > a:before { display:none; }
	/* Inner */
	/* Outer */



	
	/* 메뉴박스 보이게 하는 클래스 */
	.menu_box.inactive { margin-right:0; } 
	
	/* hover */
	.menu_box .outer > li:hover > a { color:var(--main-color); }


	/* (max-width:991px에서 outer li 클릭했을때 inner_wrap이 나오는 효과) 및 outer li a 효과 */
	.menu_box .outer > li.on > a { background:var(--main-color); color:#fff; }
	.menu_box .outer > li.on > a:after { transform:translateY(-50%) rotate(180deg); display: block; }
	.menu_box .outer > li.on .inner_wrap { visibility:visible; height:auto; transform:translateY(1); opacity:1; }
}

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

/*.wrap { padding-top: var(--header-height); }*/





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



/*메인페이지 타이틀 박스*/
main .titleBox { text-align: center; }
main .titleBox .title { font-size: max(3rem,1.82vw); line-height: 1.3; }
main .titleBox .text1 { font-size: var(--font-size18); line-height: 1.4; }

main  .sec_btn {margin-top: 2.5rem; display: flex; gap: 0 25px; font-size: 0.52vw;}
main  .sec_btn > a {width: 100%; max-width: 200px; padding: 15px 5px; text-align: center; color: #fff; position: relative; overflow: hidden; transition: all 0.4s;
border-radius: 10px; background: var(--page-main-color); display: flex; align-items: baseline; justify-content: center; font-size: max(12px, 1.6em); line-height: 1.2; gap: 0 10px;}
main  .sec_btn > a > * {position: relative; z-index: 2;}

main  .sec_btn > a::after {height: 0; left: 50%; top: 50%; width: 0; transition: all 0.4s ease; border-radius: 50%; transform: translate(-50%, -50%);
position: absolute; content:""; background: #fff; z-index: 1;}
main  .sec_btn > a:hover:after {height: 200%;  width: 150%;}
main  .sec_btn > a:hover {color: var(--page-main-color);}

/*section_title_frame*/

main .section_title_frame {padding: 3rem 0;}
main .section_title_frame .text_wrap {display: flex; font-size: 0.52vw;}
main .section_title_frame .text_img {display: flex; justify-content: center; align-items: center;}
main .section_title_frame .text_wrap .text_box {padding: 5.7em 0 0 4.7em; display: flex; flex-direction: column; gap: 25px 0;} 
main .section_title_frame .text_box h3 {font-size: var(--font-size25); font-weight: bold; color: #90c740; line-height: 1.4;}
main .section_title_frame .text_box .text1 {font-size: min(4.00vw, 16px); font-weight: 500; line-height: 1.5;}
main .section_title_frame .text_box .text_item .text_unit {margin-bottom: 20px;}


/*section1*/
main .section1 { padding: 35px 0 10rem; }
main .section1 .titleBox { margin-bottom: 8rem; }
main .section1 .titleBox .title { margin-bottom: 25px; font-weight: normal; color: #333; font-size: min(4.50vw, 18px); line-height: 1.8;}
main .section1 .titleBox .text1 { color: #636363; font-size: min(4.00vw, 16px);}
/*main .section1 .titleBox .title { margin-bottom: 12px; font-weight: normal; color: #000; }*/
/*main .section1 .titleBox .text1 { color: #636363; }*/
main .section1 .itemBox { display:grid; grid-template-columns:repeat(4,1fr); gap:0 1.5rem; }
main .section1 .itemBox .imgBox { position: relative; transition:0.4s ease-in; }
main .section1 .itemBox .imgBox > .textBox { 
position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; background: rgba(100,162,94,0.7); font-size: max(2.4rem,1.46vw); color: #fff; padding: 3.8rem 10px;
text-align: center; height: calc(1em + 7.6rem); transition:0.4s; display:flex; align-items:center; justify-content:center; line-height: 1.3;
}
/*hover*/
main .section1 .itemBox > li > a:hover .imgBox { box-shadow:0 10px 10px rgba(0,0,0,0.5); transform:translateY(-10px); }
main .section1 .itemBox > li > a:hover .imgBox > .textBox { height: 100%; }

@media (max-width: 991px) {
	main .section_title_frame {overflow: hidden;}
	main .section_title_frame .text_wrap {position: relative; width: 100%; justify-content: center;}
	main .section_title_frame .text_img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; opacity: 0.3; width: 100%;}
	main .section_title_frame .text_wrap .text_box {text-align: center; z-index: 2;}
}


@media (max-width:768px) {
	main .section1 .itemBox { grid-template-columns:repeat(2,1fr); gap:1.5rem;}
	main .section1 .itemBox img { width: 100%; }
	main .section1 .itemBox > li > a:hover .imgBox { box-shadow:none; transform:translateY(0); }
}



/*section2*/
main .section2 {background: linear-gradient(180deg, #fff, #eee); padding: 45px 0 9.4rem 0; position: relative;}
main .section2::before {content:""; position: absolute; right: 0; width: 40.5rem; height: 30.3rem; background: url("img/section2_img01.png") no-repeat; background-size: cover; 
background-position: right; top: 66%; left: 86%; transform: translate(-50%, -50%); z-index: 1;}
main .section2 .containerV1 {position: relative; z-index: 2;}
main .section2 .itemBox {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 35px; }
main .section2 .itemBox .frameBox {height: 325px;}
main .section2 .itemBox .item_textBox {flex-basis: 0; flex-grow: 1; position: relative; display: flex; flex-direction: column; justify-content: center;}

main .section2 .itemBox .item_textBox > * {position: relative; z-index: 2;}
/*main .section2 .itemBox .item_textBox .title {font-size: max(3rem, 1.56vw); color: #000; line-height: 1.3; margin-bottom: 2.5rem;}*/
/*main .section2 .itemBox .item_textBox .title > .color-tag {color: var(--page-main-color); font-weight: bold;}*/
main .section2 .itemBox .item_textBox .text1 {font-size: var(--font-size20); line-height: 1.5; margin-bottom: 30px;}
main .section2 .itemBox .item_textBox .text1:last-child {margin-bottom: 0;}

@media all and (max-width: 991px) {
	main .section2 {padding: 9rem 0;}
	main .section2 .itemBox {grid-template-columns: repeat(1, 1fr); gap: 9rem 0;}
	main .section2 .itemBox .frameBox {width: 100%; max-width: 580px;  margin: 0 auto; }
	main .section2 .itemBox .item_textBox {text-align: center; }
	main .section2::before {opacity: 0.5; top: 79%; left: 50%;}
	main .section2 .itemBox .item_textBox .text1 {font-weight: 500; font-size: min(5vw, 20px);}

}
@media all and (max-width: 768px) {
/*	main .section2 .itemBox .item_textBox::after {opacity: 0.3;}*/
	main .section2 .itemBox .item_textBox .text1 br {display: none;}
}

@media all and (max-width: 680px) {
	main .section2 .itemBox .frameBox {position: relative; height: auto; padding-bottom: 325px;}
	main .section2 .itemBox .frameBox iframe {position: absolute; top: 0; left: 0; }
}

@media all and (max-width: 650px) {
}



/*section3*/
main .section3 { padding: 3rem 0 7rem; }
main .section3 input[type=radio] {display: none;}
main .section3 .news_box {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.8rem;}
main .section3 .itemBox .top_title {display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #000; padding-bottom: 5px;}
main .section3 .itemBox .top_title h2.title {font-size: min(7.50vw, 30px); font-weight: bold; line-height: 1.3; }
main .section3 .itemBox01 .top_title h2.title {color: var(--page-main-color);}
main .section3 .itemBox02 .top_title h2.title {color: #2584c7;}

main .section3 .itemBox .top_title .label_box {font-size: 0.52vw; display: flex; gap: 0 max(10px, 2.4em);}
main .section3 .itemBox .top_title .label_box label {color: #707070; font-size: min(4.50vw, 18px); font-weight: bold; cursor: pointer; transition: all 0.3s;}


main .section3 .itemBox .widget_list {position: relative; padding-bottom: 305px;}
main .section3 .itemBox .widget_list > div {position: absolute; opacity: 0; visibility: hidden; top: 0; left: 0; width: 100%; transition: all 0.3s;}


/* itemBox01 */
main .section3 input#tab1-1:checked ~ .top_title > .label_box > .label1-1,
main .section3 input#tab1-2:checked ~ .top_title > .label_box > .label1-2,
main .section3 input#tab1-3:checked ~ .top_title > .label_box > .label1-3 {color: var(--page-main-color);}

main .section3 .itemBox01 input#tab1-1:checked ~ .widget_list > div.widget01,
main .section3 .itemBox01 input#tab1-2:checked ~ .widget_list > div.widget02,
main .section3 .itemBox01 input#tab1-3:checked ~ .widget_list > div.widget03 {opacity: 1; visibility: visible;}


/* itemBox02 */
main .section3 input#tab2-1:checked ~ .top_title > .label_box > .label2-1,
main .section3 input#tab2-2:checked ~ .top_title > .label_box > .label2-2,
main .section3 input#tab2-3:checked ~ .top_title > .label_box > .label2-3 {color: #2584c7;}

main .section3 .itemBox02 input#tab2-1:checked ~ .widget_list > div.widget01,
main .section3 .itemBox02 input#tab2-2:checked ~ .widget_list > div.widget02,
main .section3 .itemBox02 input#tab2-3:checked ~ .widget_list > div.widget03 {opacity: 1; visibility: visible;}


@media all and (max-width: 860px) {
	main .section3 .news_box {grid-template-columns: repeat(1, 1fr);}
	
}
@media all and (max-width: 500px) {
	main .section3 .itemBox .top_title h2.title {font-size: 20px;}
	main .section3 .itemBox .top_title .label_box label {font-size: 14px;}
}


/*section4*/
/*main .section4 { padding: 8rem 0; background: #f8f8f6; background: url("img/section4_bg.jpg") no-repeat; background-size: cover;}*/
/*main .section4 .titleBox { margin-bottom: 4.5rem; }*/
/*main .section4 .titleBox .title { margin-bottom: 1.5rem; font-weight: bold; color: #000; }*/
/*main .section4 .titleBox .title > .color-tag {color: var(--page-main-color);}*/
/*main .section4 .titleBox .text1 { color: #636363; }*/
/*main .section4 .sec_btn {margin: 6.4rem auto 0 auto; width: 100%; max-width: 200px;}*/

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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer_box*/
footer { background: var(--main-color); }



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


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




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

footer .contents > li > div { line-height: 1.8; font-size: var(--font-size15); color: #fff; }
footer .contents > li > div a { color: inherit;}
footer .contents > li > .text > span { position: relative; margin-right:15px; font-weight: inherit;  }
footer .contents > li > .text > span:after { content:'|'; font-size: 11px; position:absolute; right:-11px; top:50%; transform:translateY(-53%); }
footer .contents > li > .text > span:last-child:after { display: none; }
footer .contents > li > .copy { text-transform: uppercase; font-weight: inherit; margin-top: 5px; }


@media (max-width:768px) {
footer .contents > li > .text > span { display:block; margin-right:0; }
footer .contents > li > .text > span:after { display:none; }
}
@media (max-width:480px) {
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 var(--main-color); background-color: var(--main-color);}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: var(--main-color); }
.border-color, i.border-color, img.border-color {border-color: var(--main-color);}