@charset "UTF-8";
/*-------------------------------------------------
title       :메인
Create date :2022-08-01
-------------------------------------------------*/



/*비주얼*/
.visual {position:relative; width:100%; height:60rem; display:flex}
.visual .desc {position: absolute; left: 50%; top:46%; transform: translate(-50%, -50%); word-break: keep-all; width:138rem; z-index:3; display:none}
.visual .desc .title {color:#fff; display:block; font-size:7.2rem; font-weight:normal; line-height:1.2; position:relative}
.visual .desc .title span {color:#fff; display:block}
.visual .desc .txt {color:#fff; font-size:1.8rem; max-width:47rem; margin:1rem 0 0 4px; word-break:keep-all}
.visual .desc .btn {color:#fff; display:inline-block; font-size:1.8rem; margin-top:3rem; position:relative; z-index:1; transition:all .3s}
.visual .desc .btn:after {content:''; background:linear-gradient(130deg, #b1569c, #009ed7); border-radius:100rem; width:5rem; height:5rem; position:absolute; left:0; top:0; z-index:-1; transition:all .3s}
.visual .desc .btn i {color:#fff; display:inline-block; font-size:2.4rem; width:5rem; height:5rem; line-height:5rem; margin-right:1rem; text-align:center; vertical-align:-3px;  transition:all .3s}
.visual .list {width:100%; height:60rem}
.visual .img img {display:block}
.visual .slick-list {height:100%}
.visual .slick-track {height:100%}
.visual .slick-slide {height:100%}

.visual .slick-dots {overflow:hidden; visibility:hidden}
.visual .control_box {max-width:138rem; width:calc(100% - 4rem); position:absolute; left:50%; bottom:5%; transform:translate(-50%, -50%); justify-content: center; display:flex; z-index:0}
.visual .control_box .dots {display:inline-block;  display: flex; align-self:center}
.visual .control_box .dots .item {margin: 0 0.5rem;position:relative;transition:all .3s; width: 1rem;height:1rem; display:inline-block; background: #fff;border-radius:1.5rem;text-align: center; font-size:0}
.visual .control_box .dots .item.slick-active {background-color:#009ed7; opacity:1; width:2rem; }
.visual .control_box .dots .item.slick-active:after {width:100%}
.visual .control_box .paging {display:none}
.visual .control_box .control {margin:0 1rem}
.visual .control_box .controller{display: flex; padding-left: 2%}
.visual .controller button::before{color:#fff; width:3.6rem; height:3.6rem; line-height:3.2rem; text-align:center; border-radius: 100%; border:2px solid #fff}
@media screen and (min-width:1024px) {
	/*효과*/
	.visual .desc .btn:hover {color:#fff}
	.visual .desc .btn:hover:after {width:calc(100% + 2rem)}
	.visual .desc .btn:hover i {margin:0 0.5rem}
	.visual .control_box .dots .item:hover {opacity:1}
	.visual .controller button:hover::before{background-color:#fff; color:#333}
	
}

/*공통*/
.section {position:relative; padding:5rem 0 }
.section .contents {max-width:138rem; width:calc(100% - 4rem); margin:0 auto}
.section h3{margin: 0 auto 4rem 0;  position:relative}
.section h3 .title {display:block; text-align:center; font-size:4rem; line-height:1.2; }
.more{width:3rem; height:3rem; line-height:2.6rem; text-align:center; position:absolute; right:0rem; top: 1rem; border:1px solid #333}
.more a{display:block}


@media screen and (min-width:1024px) {
	/*효과*/
	.section h3 .more:hover i {margin-left:1rem}
}

/*주요사업*/
#section01 .contents {overflow: hidden;}
#section01 .conBox .item {position:relative; width:33rem; margin-right:2rem; border:1px solid #e8e8e8; padding:1rem; text-align:left; transition:all .3s}
#section01 .conBox .item  a{display:block}
#section01 .conBox .item .img {background-color: #f9fafa; display: block; width: 100%; overflow: hidden; padding-top: 60%; margin-bottom: 2rem; position: relative}
#section01 .conBox .item .img img{display: block; width: 100%; height: auto; position: absolute; left: 0; top: 0; min-height: 100%; min-width: 100%; object-fit: cover}
#section01 .conBox .item .cate {color:#688d7e; display:block; font-size:1.6rem; position:relative}
#section01 .conBox .item .cate:before {content:''; background-color:#688d7e; border-radius:100%; width:0.5rem; height:0.5rem; position:absolute; left:-0.5rem; top:0}
#section01 .conBox .item .tt {color:#333; display:block; font-size:1.8rem; line-height:1.6; margin-top:1rem; word-break:keep-all; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
#section01 .conBox .item .cons{color:#777; font-size:1.4rem; height:4.4rem; line-height:1.6; margin:1rem 0 2rem 0; word-break:keep-all; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis}
#section01 .conBox .item .date {color:#777; display:block; font-size:1.2rem; margin-top:1rem}
#section01 .conBox .item .dateTag {margin-right:1rem; color:#5164a7}
#section01 .conBox ._blank {background-color:#f9fafa; color:#666; width:100%; height:calc(100% - 4rem); padding-top:18rem; text-align:center}
#section01 .slick-list{margin-right:-2rem}
#section01 .slick-slide{min-height:36rem; margin:0 2rem 2rem 0}
#section01 .control_box{text-align:center}






/*게시판*/
#section02 {background: #eff6f7 url(/main/img/main/board_bg.png) right bottom no-repeat;}
#section02 .group{display:flex}
#section02 .board{width:33.333%; overflow:hidden; border-radius:0 2rem 0 2rem; background-color:#fff}
#section02 .board .tt{position:relative; color:#fff; padding:2rem; font-size:2rem}
#section02 .board .conBox{padding:2.4rem 1rem}
#section02 .board .list li{line-height:4rem; padding:0 1rem; border-bottom:1px solid #e8e8e8;}
#section02 .board .list li a{display:block}
#section02 .board .conBox li::before{content:"";  color:#e32464; font-weight:normal; display:block; font-family:'xeicon'; font-size:2rem; width:2rem; height:2rem; line-height:inherit; position:absolute;}
#section02 .conBox .title{max-width:98%;  padding-left:3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
#section02 .conBox .desc{display:none}
#section02 .conBox .date{display:none}

#section02 .board .conBox li:nth-of-type(1){border-top:1px solid #e8e8e8}
#section02 .board .more{right:1rem; top:2.2rem; border:1px solid #fff}

#section02 .board01{margin-right:2rem; border:1px solid #03a287}
#section02 .board01 .tt{background:#03a287}
#section02 .board02{margin-right:2rem; border:1px solid #51a101}
#section02 .board02 .tt{background:#51a101}
#section02 .board03 .tt{background:#71ab38}
#section02 .board03{border:1px solid #2277be}
#section02 .board03 .tt{background:#2277be}


@media screen and (min-width:1024px) {
	/*효과*/
	.news .board a:hover .title:after {width:100%}
	.gallery .list a:focus .img,
	.gallery .list a:hover .img {background-color:#000; transition:all .3s}
	.gallery .list a:focus .img:before,
	.gallery .list a:hover .img:before,
	.gallery .list a:focus .img:after,
	.gallery .list a:hover .img:after {opacity:1; transform:rotate(0); transition:all 0.4s 0.1s}
	.gallery .list a:focus .img img,
	.gallery .list a:hover .img img {opacity:0.6; transition:all .3s}
	.gallery .more:hover i {transform:rotate(180deg)}
	.sns .list a:hover i{transform:translateY(-5px)}
}