@charset "UTF-8";

/* 메인 스타일 시작 */
/*.main-top{overflow:hidden;width:100%;margin:0 auto;max-width:2000px;position: relative;}*/
#main_container{width:100%;}
.main-top{overflow:hidden;}
.main-top img {max-width:100%}
.main-center{display:flex; margin:0 auto; width:100%; max-width: var(--site_width); clear:both;  overflow:hidden; }
.tbmain-center{display:flex; margin:0 auto; width:100%; max-width: var(--site_width); clear:both;  overflow:hidden; border:1px solid #ddd; padding:20px}
.main-center2{clear:both;  overflow:hidden; width:100%; max-width:var(--site_width); margin:0 auto}
.main-gap{margin:0 auto 40px ; padding:0 30px}
.main-sm-gap{margin:0 auto 20px ; }

.main_cbt{width:100%; display:block; background:#f5f5f5; text-align: center; }
.main_cbt .section_body{width:100%; max-width:var(--site_width); margin:60px auto; display:inline-block}

.main-section03{width:100%; display:block; text-align: center; }
.main-section03 .section_body{width:100%; max-width:var(--site_width); margin:60px auto; display:inline-block}

.center_bg{background:#fff; width:100%; max-width:var(--site_width); margin: 0 auto; }

.main-visual{position:relative;  overflow:hidden;  width:100%;margin:0 auto;}
.mobile-visual{padding-bottom:74.25%}


.content-section1{display: flex;margin:0 auto;width:100%;max-width:var(--site_width);text-align:left !important; gap:20px}
.content-section1  .textbox{display:flex;     flex-direction: row; justify-content: center; align-items: center; width:33.333333%;padding:30px; position: relative;border-radius:10px; gap:20px}
.content-section1 .textbox_title{color:#fff}
.main-section02 .content-section1 .tbox1, .main-section02 .content-section1 .tbox2{display: flex; text-align: center; flex-direction: column; justify-content: center; align-items: center;}
.content-section1 .textbox_body .textbox_title{font-size:2.2em; font-weight:bold;line-height:100%;letter-spacing:-1px;}
.content-section1 .textbox_image{margin-bottom: 20px;display: flex;  align-items: center; justify-content: center;}

.content-section1 .textbox_txt{font-size:1.15em;margin-bottom: 10px;letter-spacing:-1px}
.content-section1 .textbox_btn {width:100%; margin-top:20px;border:1px solid #fff;padding:5px}
.content-section1 .textbox > a:hover .textbox_image img{transform: scale(1.06); transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1) 0ms;}
.textbox_btn a{display:inline-block;width:100%;}
.content-section1 .textbox_btn:hover{background:#fafafa;transition: all .5s ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;}
.tbox01 .textbox_btn:hover a{color:var(--theme-color) !important; transition: all .5s ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;}
.tbox02 .textbox_btn:hover a{color:var(--theme-color2) !important; transition: all .5s ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;}


.content-section2{float:left; display: inline-block; width:calc(50% - 20px);  }
.content-section3{float:left; display: inline-block; width:calc(50% - 20px); margin-left:40px;  }

.main-section07 .main-center{display:flex; gap:20px}
.main-section07 .main-center > section{border: 1px solid #ddd; padding:20px}
.content-section4{width:calc(50% - 10px); }
.content-section5{width:calc(50% - 10px);}

.content-section7{display: inline-block; width:425px;  height:240px; float:left; }
.content-section8{display: inline-block; width:calc(100% - 266px - 445px);  height:240px; float:left; margin-left:20px}
.content-section9{display: inline-block; width:246px;  height:240px; float:left; margin-left:20px; background:#ebf6ff; border:1px solid #ddd; }
.content-section9 .mb_bt_icon01{border-bottom:1px dashed #ddd}



/*주요 사업*/
/* 1. 그리드 레이아웃 설정 */
.content-section11 {
	display: grid;
	gap: 20px;
	width: 100%;
	max-width: var(--site_width, 1600px);
	margin: 0 auto;
	grid-template-columns: 1fr; /* 모바일: 1열 */
}

/* 2. 박스 기본 스타일 */
.content-section11 .textbox {
	position: relative; /* 오버레이 기준점 */
	border-radius: 15px;
	overflow: hidden;
	min-height: 300px; /* 박스 높이 확보 */
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

/* 3. 배경 오버레이 (가상 요소 ::before) */
.content-section11 .textbox::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1; /* 이미지 위에, 텍스트 아래 */
	background-color: rgba(30, 60, 100, 0.6);
	transition: background-color 0.4s ease;
}

/* 4. 마우스 호버 효과 (박스 & 오버레이) */
.content-section11 .textbox:hover {
	transform: translateY(-5px); /* 박스 살짝 위로 */
	box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.content-section11 .textbox:hover::before {
	/* 호버 시: 검은색 짙은 투명 오버레이 */
	background-color: rgba(0, 0, 0, 0.85);
}

/* 5. 내부 컨텐츠 정렬 (링크 태그) */
.content-section11 .textbox a {
	position: relative;
	z-index: 2; /* 오버레이 위로 올림 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	height: 100%;
	padding: 30px;
	text-align: center;
	color: #fff; /* 기본 글자색 흰색 */
}

/* 6. 타이틀 스타일 */
.content-section11 .textbox_title {
	font-size: clamp(1.4rem,7vw, 1.8rem); /* 반응형 폰트 크기 */
	font-weight: 700;
	line-height:130%;
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 7. 설명 텍스트 (.textbox_txt) 애니메이션 */
.content-section11 .textbox_txt {
	font-size: 1rem;
	line-height: 1.5;
	color: #eee;
	overflow: hidden; /* 높이가 0일 때 내용 넘침 방지 */

    /* [핵심] 평소에는 높이를 0으로 설정하여 없는 취급 -> 제목이 정중앙에 옴 */
    max-height: 0;
    opacity: 0;
    margin-top: 0;

    /* 애니메이션 속도 조절 */
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
}

/* 호버 시 텍스트 나타나기 */
.content-section11 .textbox:hover .textbox_txt {
	max-height: 200px;
    opacity: 1;
    margin-top: 20px; /* 제목과 내용 사이 간격 벌리기 */
	transform: translateY(0); /* 원래 위치로 복귀 */
	transition: all .5s ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;
}


/* 8. 배경 이미지 연결 */
.content-section11 .tbox01 { background-image: url("/theme/basic/img/pub/main_section11_bg01.png"); }
.content-section11 .tbox02 { background-image: url("/theme/basic/img/pub/main_section11_bg02.png"); }
.content-section11 .tbox03 { background-image: url("/theme/basic/img/pub/main_section11_bg03.png"); }
.content-section11 .tbox04 { background-image: url("/theme/basic/img/pub/main_section11_bg04.png"); }


/* 9. 반응형 미디어 쿼리 */
/* 태블릿 (768px 이상) -> 2열 */
@media (min-width: 768px) {
	.content-section11 {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* PC (1024px 이상) -> 4열 */
@media (min-width: 1024px) {
	.content-section11 {
		grid-template-columns: repeat(4, 1fr);
	}
}



.main-section06 .board_body{gap:20px; width:100%; max-width:var(--site_width); margin: 0 auto 40px; }
.main-section06 .board_body > section{display:flex;flex-direction: column; width:calc(33.33333333333% - 13.4px); min-height:280px; border:1px solid #ddd; border-top:2px solid #f26522; padding:20px}
.content-section12{}
.content-section13{}



/*배너존*/
.main_banner_section{width:100%; margin:0 auto; text-align:center; }
.main_banner_section ul{display:inline-flex; }
.main_banner_section li:nth-child(2){margin:0 10px}
.main_banner_section li img{max-width:100%}

.main-banner3 .main-banner_btn-next3 i {line-height:42px;  padding-left:3px}
.main-banner3 .main-banner_btn-prev3 i {line-height:42px;  padding-right:3px}
.main-banner3 .bx-controls-auto {top: -57px;  left:auto !important;  right: 45px; }


/*반응형배너*/
.bnSlider1 {width:100%; }
.bnSlider1 li{width:100%; max-width:2000px; background-size:cover; background-repeat:no-repeat; background-position: center; }
.bnSlider1 .img-wrap {display: block; position: relative; width:100%; }
.bnSlider1 .img-wrap .img-item {display:block; position:absolute; top:calc(50% - 0px); left:0; width:100%; height:27vw; overflow:hidden; }

.bnSlider2 {width:100%; }
.bnSlider2 li{background-size:cover; background-repeat:no-repeat; background-position: center; }
.bnSlider2 .img-wrap {display: block; position: relative; width:100%; height:74vw}
.bnSlider2 .img-wrap .img-item {display:block; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
/*.mobile-visual .bx-viewport{min-height:240px}*/

.bn_content_area{position:absolute;z-index:99999;     height: 100%;   display: flex; align-items: center; width: 100%; justify-content: center;color:#fff;font-size:1.2rem; text-shadow:1px 1px 1px #000; border-radius:10px}
.bn_content_area .bn_content_body{background:rgba(1, 57, 0, 0.52);padding:2vw}



/*tab board style*/
.tab_baord_section1, .tab_baord_section2{width:50%; float:left; display:inline-block; }
.tab_baord_section1{max-width:600px; margin:0 auto; }
.tab_baord_section1 .tab_menu {display:inline-block; width: calc(100% - 40px); }
.tab_baord_section1 .tab_menu li > a {background: #fff; display: block; text-align: center; padding: 10px 15px; width:100%; background: #d9d9d9; font-weight: bold; font-size:10pt; }
.tab_baord_section1 .tab_menu li > a.on:hover{color:#fff !important; }
.tab_baord_section1 .tab_menu li > a.on {background: #265f9f; color: #fff; z-index: 999;     position: Relative; transition: all .3s ease; }
.tab_baord_section1 .tab_menu li > a:hover{background: #265f9f; color: #fff !important;  ;z-index: 999;     position: Relative; transition: all .3s ease; }
.tab_baord_section1 .sec-title {display: block;  margin-bottom: 20px; font-size: 27px; font-weight:600;  line-height:110%}
.tab_baord_section1 .tab_menu li {float: left;  text-align:center; padding-right:1px}
.tab_baord_section1 .tab_menu li:last-child{margin-right:0px}

.tab_baord_section2{width: 100%; max-width:340px; margin:0 auto; margin-left:40px; border:1px solid #ddd; padding:20px; text-align: center; }
.tab_baord_section2 ul{display: inline-flex; flex-direction: column; flex-wrap: nowrap;    align-items: center;}
.tab_baord_section2 ul li{list-style:none;text-align:center;    display: inline-flex;    align-items: center;padding-top:40px;padding-bottom:20px;    flex-direction: column;}
.tab_baord_section2 ul li:first-child{border-bottom:1px dashed #ddd;padding-bottom:40px;padding-top:20px}
.tab_baord_section2 img{max-width:100%}


.b_tit a{color:#474747}
.lat, .pic_It, .empty_li{min-height:209px; width:100%;}
.empty_li{line-height:209px}


.main-bottom{margin-bottom:20px;display:inline-block; width:100%}
.main_bottom {background: #fff;width:100%;margin: 0 auto;text-align:center}

#ft {margin-top:0px !important}


/* MAIN  Default  CSS */
#container_wr{width:100%;margin:0px auto !important; padding:0px !important;}



/* MAIN BANNER */
/*.main-banner{position:absolute;text-align:center; width:100%; max-width:2000px; min-width: var(--site_width);}*/
.main-banner{position:absolute;text-align:center; width:2000px; left:calc(50% - 1000px)}

/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:768px){
/*	.bnSlider2 li{background-size:contain;}*/
}

/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:1199px){
	.main-banner{width:100vw; left:0}
}

/* PAGER */
.bx-wrapper .bx-pager { position: absolute; bottom: 30px; width:100%; text-align:center; z-index: 51; }
.bx-wrapper .bx-pager.bx-default-pager a { background: #fff; text-indent: -9999px; display: block; width: 20px; height: 20px; margin: 0px 0px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); outline: 0; -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px; transition: all .5s ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
-o-transition: 0.5s all ease;}
.bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { vertical-align: bottom; *zoom: 1; *display: inline;  font-size:18px}
.bx-wrapper .bx-pager-item { font-size: 0; line-height: 0; display:inline-block; margin:0 5px;}

/* DIRECTION CONTROLS (NEXT / PREV) */
.main-banner_btn {background: none; border: 0; position: absolute; font-size: 40px; top: 50%; color: #fff; margin-top: -23px;z-index: 99; text-shadow:1px 1px 1px #000;}
.main-banner_btn-prev {left:calc(50% - 600px);}
.responsive_main_visual .main-banner_btn-prev {left: 5vw;}
.main-banner_btn-next {right: calc(50% - 600px);}
.responsive_main_visual .main-banner_btn-next {right: 5vw;}

.mobile-visual .mmain-banner_btn-prev {left: 5vw;}
.mobile-visual .mmain-banner_btn-next {right: 5vw;}

/* BOTTOM DIRECTION CONTROLS (NEXT / PREV) */
.main-banner2{position:relative; clear:both; width:100%; max-width: var(--site_width);margin: 0 auto;}
.main-banner_btn-prev2 {left:0px;}
.main-banner_btn2 {background: none; border: 0; position: absolute; font-size: 40px; top: 50%; color: #fff; margin-top: -24px;z-index: 99;line-height:40px}
.main-banner_btn-next2 {right:0px;}




.main-banner3 .main-banner_btn-prev3 {right:90px;}
.main-banner3 .main-banner_btn-next3 {right: 0px;}
.main-banner3 .main-banner_btn3
{background: none; border: 0; position: absolute; font-size: 15px; top:-57px; color: #fff; z-index: 99;  background-color:var(--bg-theme); border-radius: 30px; width: 40px; height: 40px; line-height: 40px; text-align: center;}
.main-banner3 .main-banner_btn-next3 {right:0px;}
.main-banner3 .main-banner_btn-next3 i {line-height:42px; padding-left:3px}
.main-banner3 .main-banner_btn-prev3 i {line-height:42px; padding-right:3px}

.main-banner3 .bx-controls-auto { top: -57px; left:auto !important; right: 45px;}

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto { text-align: center; }
.bx-wrapper .bx-controls-auto .bx-start{display: flex; margin: 0 5px; width:14px; height:20px; color:#646464; overflow:hidden;align-items: center;}
.bx-wrapper .bx-controls-auto .bx-start:before{content:"\f04b"; font-family:FontAwesome;}
.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:focus { color:#00a7cb; }
.bx-wrapper .bx-controls-auto .bx-stop {display: flex; margin: 0 5px; width:16px; height:20px; color:#646464; overflow:hidden; align-items: center;}
.bx-wrapper .bx-controls-auto .bx-stop:before{content:"\f04c"; font-family:FontAwesome;}
.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:focus { color:#00a7cb }

.main-banner3 .bx-wrapper .bx-controls-auto { text-align: center; position: absolute; z-index: 999; width:40px; height:40px; line-height:40px; background:var(--bg-theme); border-radius:20px; bottom:32px; left:calc(50% - 20px); font-size:0; width:40px; height:40px; font-size:0;}
.main-banner3 .bx-wrapper .bx-controls-auto .bx-start{display: block; margin: 0; width:40px; height:40px; color:#fff; overflow:hidden; padding-left:3px;}
.main-banner3 .bx-wrapper .bx-controls-auto .bx-start:before{content:"\f04b"; font-family:FontAwesome; font-size:15px}
.main-banner3 .bx-wrapper .bx-controls-auto .bx-start.active { display:none}

.main-banner3 .bx-wrapper .bx-controls-auto .bx-stop {display: block; margin: 0; width:40px; height:40px; color:#fff; overflow:hidden; }
.main-banner3 .bx-wrapper .bx-controls-auto .bx-stop:before{content:"\f04c"; font-family:FontAwesome; font-size:15px}
.main-banner3 .bx-wrapper .bx-controls-auto .bx-stop.active{ display:none }

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: center; width: 100%; }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {position: absolute; left: 50%; bottom: 30px; width: 37px; margin-left: -130px; z-index: 99;     display: flex;    align-items: center;}


/* IMAGE CAPTIONS */
.bx-wrapper .bx-controls-direction a { position: absolute; top: 60%; margin-top: -16px;  width: 15px; height: 20px; text-indent: -9999px; z-index: 9999; }
.bx-wrapper .bx-controls-direction a.disabled { display: none; }
.bx-prev, .bx-next {text-indent: -9999px; display:block; position:absolute; top:0; width:33px; height:33px;}
.bx-next{margin-left:4px}
.bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666; background: rgba(80, 80, 80, 0.75); width: 100%; }
.bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; }


.bo_fx{position:absolute; bottom:10px; left:20px; display:inline-block; z-index:99;}
.btn_bo_user{margin:10px auto;width:100px}
.btn_bo_user a{padding:7px 10px;}





/*Responsive 370, 480, 768, 992, 1160*/
@media all and (max-width:1200px){
/*	.main_cbt, .main-center {padding-left:20px;padding-right:20px}*/
}

@media all and (max-width:1130px){
	.tbmain-center{display: flex;max-width:100%;flex-direction: column;flex-wrap: nowrap;align-content: space-around;justify-content: flex-start;align-items: center;}
	.tab_baord_section1{width:100%;margin:0 auto 40px;max-width:100%}
	.tab_baord_section2{width: 100%;margin:0 auto;max-width:100%;}
}

/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:992px){
	.main-section03 .content-section11{flex-wrap: wrap;}

	.main-section06 .board_body{flex-wrap: wrap;}
	.main-section06 .board_body > section{width:calc(50% - 10px)}
	.main-section06 .board_body .content-section14{width:100%}
}

/*Responsive 370, 480, 768, 992, 1160*/
@media all and (max-width:920px){
	body{font-size:14px !important}
	.main-section1{flex-wrap: wrap;transition: all .5s ease;
	-webkit-transition: 0.5s all ease;
	-moz-transition: 0.5s all ease;
	-ms-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;}
	.main-section1 .textbox_body .textbox_title{font-size:1.8em;}
	.main-section1 .textbox:not(:last-child){margin-right:0px}
	.main-section1 .tbox01{width:calc(50% - 10px);margin-right:20px}
	.main-section1 .tbox02{width:calc(50% - 10px);}
	.main-section1 .tbox03{width:100%;margin-top:20px;}
}

/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:834px){
	.pic_lt ul li{width:calc(50% - 10px)}
}

/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:768px){
	.main-section02 .content-section1{flex-wrap: wrap;}
	.content-section1 .textbox{width: calc(50% - 10px);}
	.content-section1 .tbox03{width:100%}
	.main-section02 .content-section1 .textbox .textbox_title{font-size:1.4rem}

	.gallery_lt > ul li{width:calc(50% - 10px)}

	.main-section02 .content-section1{     flex-direction: column;}
	.main-section02 .content-section1 .textbox{width:100%}
}

/*Responsive 370, 480, 768, 992, 1160*/
@media all and (max-width:648px){
	.tab_baord_section1{padding:30px 10px 50px}
	.tab_baord_section1 .tab_menu{width:100%}
	.tab_baord_section1 .tab_menu li {width:auto;}
	.tab_baord_section1 .tab_menu li > a {font-size:13px;font-weight:normal;letter-spacing:-1px;padding:7px 15px}

	.content-section11 .textbox{padding:20px}

	.textbox_image img{max-width:100%}

	.main-section06 .board_body > section {width:100%}
	.main-section07 .main-center{flex-wrap: wrap;}
	.main-section07 .main-center > section{width:100%}
}


/*Responsive 370, 480, 768, 992, 1160*/
@media all and (max-width:570px){
	body{font-size:13px !important}
	.main-section1{flex-direction: column;transition: all .5s ease;
	-webkit-transition: 0.5s all ease;
	-moz-transition: 0.5s all ease;
	-ms-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;}
	.main-section1 .textbox_body .textbox_title{font-size:1.5em;}
	.main-section1 .textbox_txt{font-size:0.98em;}
	.main-section1 .tbox01{width:100%;margin-bottom:20px}
	.main-section1 .tbox02{width:100%}


}

/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:448px){
	.content-section1 .textbox{width:100%}
	.pic_lt ul li{width: 100%}

	.content-section1 .textbox{    flex-direction: column;}
}

/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:370px){
	.gallery_lt > ul li{width: 100%}
}


/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:319px){
	.main-section03  .content-section11 .textbox{width:100%}
}