@charset "UTF-8";

.timeFixed {position: fixed; right: 25px; bottom: 50px; background: #EF4136; color: #fff; font-weight: 600; border-radius: 60px; padding: 4px 12px; z-index: 10; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}

/* visual */
.sub-vis {overflow:hidden; position:relative; background:url('../img/sub/sub_vis.jpg') no-repeat top; height: 420px; background-size: cover;}
.sub-vis > div.wrap {position:relative; padding:156px 0 94px; }

.center {text-align:center; color: #fff;}
.center p {margin-bottom:10px; font-size:4rem; font-weight:600; letter-spacing:-1.3px; line-height:1.4}
.loca ul li {display:inline-block; position:relative; padding:0 13px; font-size:1.6rem; font-weight:500;}
.loca ul li:before {content:''; position:absolute; right:-5px; top:50%; width:5px; height:5px; border-bottom:2px solid #fff; border-right:2px solid #fff; transform:translate(0, -50%) rotate(-45deg);}
.loca ul li:last-child { padding-right:0; font-weight:600;}
.loca ul li:last-child:before {display:none;}
.loca ul li.home {width:19px; height:24px; padding-right:20px; text-indent:-9999px; background:url('../img/sub/sub-tmpl.png') no-repeat 0 -40px;}
/* @media all and (max-width:1440px) {
    .sub-vis > div.wrap {padding:118px 0 64px; background:none;}
    .util {bottom:64px;}
} */
@media all and (max-width:1023px) {
    .sub-vis{height: 340px; background-position: top;}
    .sub-vis > div.wrap {padding:116px 0;}
    .center p {font-size:3.5rem; word-break:break-all;}

}
@media all and (max-width:599px) {
    .sub-vis{height: 200px;}
    .sub-vis > div.wrap {padding: 85px 0 30px;}
    .center p {font-size:3.4rem;}
    .loca ul li {padding:0 10px;}
    .loca ul li:nth-child(2) {padding-left:0;}
    .loca ul li.home {display:none;}
    .content-wrap .util{display: none;}
}

/* container */
#container{margin-bottom: 100px;}
#container section.wrap:after {content:''; clear:both; display:block;}
#container .left {position:relative; float:left; margin-top:-50px;}
.content-wrap {float:right; width:calc(100% - 320px); position: relative;}
/* .content-wrap #content{padding-left: 10px;} */
.content-wrap > h3{color: #373737; font-size: 31px; font-weight: 700; position: relative; margin-top: -50px; margin-left: -50px; background: #fff; padding: 45px 60px;}
.content-wrap > h3::after{position: absolute; content: ""; background: #fff; width: 87%; height: 100%; top: 0; right: -300px;}
.content-wrap .util {position:absolute; top: 0; right:0; z-index:2}
.content-wrap .util a {display:block; width:40px; height:40px; background:url('../img/sub/sub-tmpl.png') no-repeat; border-radius:50%; text-indent:-9999px;}
.content-wrap .util a.print {background-color:#fff; border: 1px solid #ddd; background-position:-1px 0;}
.content-wrap .util a.sns {background-color:#fff; border: 1px solid #ddd; background-position:-40px 0;}
.content-wrap .util a.facebook{background-position:-120px 0; border: 1px solid #ddd;}
.content-wrap .util a.twitter{background-position:-80px 0; border: 1px solid #ddd;}
.content-wrap .util > a {float:left; margin-left:5px;}
.content-wrap .util .open {display:none; position:absolute; top:43px; right:0;}
.content-wrap .util .open a {display:inline-block; margin:5px 0;}
.content-wrap .util .open a.twitter{margin-left: 3px;}

#snb {width:270px;}
#snb .top {padding:45px 30px; background:#037641; color:#fff; text-align: center;}
#snb .top p {line-height:1.6; font-size:1.5rem;}
#snb .top h2 {font-weight:600; font-size:2.8rem;}
#snb .snb a {display:block; position:relative;}
#snb .snb > li > a {display:block; position:relative; margin-top:15px; padding:17px 60px 17px 30px; background:#f2f2f2; border:2px solid #f2f2f2; font-size: 1.7rem; font-weight:500; color: #2b2b2b;}
#snb .snb > li > a:before {content:''; position:absolute; background: url('../img/sub/plus_gr.png') no-repeat; right:31px; top:50%; width:8px; height:8px; transform:translate(0, -50%)}
#snb .snb > li.on > a,
#snb .snb > li:hover > a {border: 2px solid #037641; color:#037641; font-weight:600; background: #fff;}
#snb .snb > li.on > a:before {right:30px; width:8px; height:2px; border:0; background:#037641; transform:translate(0, -50%) rotate(0);}
#snb .snb > li:hover > a:before {border-color:#037641;}
#snb .snb .depth03 {display:none; background:#fff; padding:15px 30px 10px 30px;}
#snb .snb .depth03 > li > a {margin:10px 0; padding-left:15px; font-size:1.6rem;}
#snb .snb .depth03 > li > a:before {content:''; position:absolute; top:10px; left:0; width:4px; height:4px; background:#c3c3c3; border-radius:50%;}

#snb .snb .depth03 > li > a span{position: relative; font-weight:500; color: #373737;}
#snb .snb .depth03 > li.on a span{color: #037641; }
#snb .snb .depth03 > li.on a span:before{position: absolute; content: ""; background: #037641; width: 100%; height: 1px; bottom: 0; right: 0;}

#snb .snb .depth03 > li.on a:before{background:#006c35;}
#snb .snb > li.on .depth03 {display:block;}
.left.fixed #snb .snb {position:fixed; top:15px; width:270px; z-index:100;}
.left.fixed .obj2 {opacity:0;}

.sub_tab{margin-top: 10px;}
.sub_tab ul{overflow: hidden; display: flex;flex-wrap: wrap; justify-content: space-between;}
.sub_tab ul li{width: calc(99.6% / 4); float: left; text-align: center;}
.sub_tab ul li:last-child{margin-right: 0;}
.sub_tab ul li a{display: block; padding: 10px 0; border: 1px solid #ddd; font-size: 1.7rem; font-weight: 500;}
.sub_tab ul li.on{background: #006c35;}
.sub_tab ul li.on a{color: #fff;}

#content {margin:20px 0 100px; /*min-height:1000px;*/}
@media all and (max-width:1440px) {
    #snb,
    .left.fixed #snb .snb {width:250px;}
    .content-wrap {width:calc(100% - 300px);}
}
@media all and (max-width:1240px) {
    #snb,
    .left.fixed #snb .snb {width:230px;}
    .content-wrap {width:calc(100% - 280px);}
    .content-wrap > h3{padding: 30px 60px; font-size: 28px;}
    .content-wrap .util{padding: 30px; top: -50px;}
    .content-wrap .util .open{top: 70px; right: 28px;}
}
@media all and (max-width:1023px) {
    #container .left {display:none;}
    .content-wrap {float:none; width:100%;}
    #content {margin:40px 0 60px;}
    .content-wrap .util{top: 0;}
}
@media all and (max-width: 599px) {
    .content-wrap > h3{display: none;}
    .content-wrap > h3::after{display: none;}
    .sub_tab{margin-top: 20px;}
    .sub_tab ul li{width: 100%; float: none; margin-bottom: 2px;}
}


/* 인사말 */
.greeting{position: relative; padding-bottom: 72px;}
.greeting .tit p{font-size: 2.8rem; font-weight: 600;}
.greeting .tit p span.tit01{position: relative;}
.greeting .tit p span.tit01::after{position: absolute; content: ""; background: #cd3e3e; border-radius: 50%; width: 5px; height: 5px; top: -6px; left: 9px;}
.greeting .tit p span.tit02{color: #0c683e; font-weight: 700;}
.greeting .tit p strong{color: #0d59b7; font-weight: 700;}
.greeting .txt{margin: 30px 0;}
.greeting .txt p{padding: 14px 0; font-size: 1.8rem;}
.greeting .g_img{position: absolute; bottom: -202px;}
@media all and (max-width: 1024px) {
    .greeting .g_img{bottom: -103px; width: 80%; right: 0;}
}
@media all and (max-width: 750px) {
    .greeting .tit p strong{display: block;}
}
@media all and (max-width: 480px) {
    .greeting{padding-bottom: 0;}
    .greeting .tit p span.tit02{display: block;}
    .greeting .tit p strong{margin-top: 10px;}
    .greeting .g_img{display: none;}
}

/* 찾아오시는길 */
.map_box{padding: 20px 67px 20px 100px; border: 6px solid #f1f1f1; margin-bottom: 3%;}
.map_box ul{display: flex;}
.map_box ul li{position: relative; padding: 15px 20px 15px 70px;}
.map_box ul li:first-child{width: 70%; background: url('../img/sub/icon_ad.png') no-repeat left center;}
.map_box ul li:last-child{width: 30%; background: url('../img/sub/icon_tel.png') no-repeat left center;}
.map_box ul li:last-child::before{position: absolute; content: ""; width: 1px; height: 30px; background: #ddd; top: 50%; transform: translateY(-50%); left: -46%;}
@media all and (max-width: 1500px) {
    .map_box{padding-left: 80px;}
    .map_box ul li:last-child::before{display: none;}
}
@media all and (max-width: 1200px) {
    .map_box ul{display: block;}
    .map_box ul li{width: 100% !important;}
    .map_box ul li:last-child{margin-top: 20px;}
}
@media all and (max-width: 650px) {
    .map_box{padding: 16px 30px;}
}
@media all and (max-width: 400px) {
    .map_box{padding: 5px 30px 10px;}
    
    .map_box ul li:first-child{background-size: 40px;padding: 10px 10px 10px 50px;}
    .map_box ul li:last-child{background-size: 38px;padding: 10px 10px 10px 50px;
margin-top: 5px;}
}
/* 시설안내지도 */
.map_detail {width: 100%; height: 100%; overflow: hidden;}
.map_detail > a{color: #fff; font-weight: 600; font-size: 20px;}
.map_detail > a span{display: none; position: relative;}
.map_detail > a span::before{position: absolute; content: ""; background: url('../img/sub/icon_de.png') no-repeat left center; width: 30px; height: 30px; left: 33px; top: 50%; transform: translateY(-50%);}
.map_detail > a:hover img {transition: 0.6s ease-in-out; filter: brightness(60%); position: relative;}
.map_detail > a:hover span{display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; text-align: center;  padding: 10px 20px 10px 50px; border-radius: 50px; border: 3px solid #fff;}

span.sisul01{background:#0da863; color: #fff; font-weight: 500; border-radius: 100px; width: 24px; height: 24px; line-height: 24px; display: inline-block; margin-right: 2px; text-align: center;}
span.sisul02{background:#e65083; color: #fff; font-weight: 500; border-radius: 100px; width: 24px; height: 24px; line-height: 24px; display: inline-block; margin-right: 2px; text-align: center;}
span.sisul03{background:#0368b2; color: #fff; font-weight: 500; border-radius: 100px; width: 24px; height: 24px; line-height: 24px; display: inline-block; margin-right: 2px; text-align: center;}
span.sisul04{background:#f89b01; color: #fff; font-weight: 500; border-radius: 100px; width: 24px; height: 24px; line-height: 24px; display: inline-block; margin-right: 2px; text-align: center;}

.site_box{border: 1px solid #ddd; overflow: hidden; padding: 2% 5%; margin-top: 20px;}
.site_box > li{float: left; width: 25%; padding: 20px 0 20px 5%;}
.site_box > li.site01{background: url('../img/sub/map08.jpg') no-repeat 8px 18px;}
.site_box > li.site02{background: url('../img/sub/map09.jpg') no-repeat 8px 18px;}
.site_box > li.site03{background: url('../img/sub/map10.jpg') no-repeat 8px 18px;}
.site_box > li.site04{background: url('../img/sub/map11.jpg') no-repeat 8px 18px;}
.site_box > li.site05{background: url('../img/sub/map12.jpg') no-repeat 8px 18px;}
.site_box > li.site06{background: url('../img/sub/map01.jpg') no-repeat 8px 18px;}
.site_box > li.site07{background: url('../img/sub/map02.jpg') no-repeat 8px 18px;}
.site_box > li.site08{background: url('../img/sub/map03.jpg') no-repeat 8px 18px;}
.site_box > li.site09{background: url('../img/sub/map04.jpg') no-repeat 8px 18px;}
.site_box > li.site10{background: url('../img/sub/map05.jpg') no-repeat 8px 18px;}
.site_box > li.site11{background: url('../img/sub/map06.jpg') no-repeat 8px 18px;}
.site_box > li.site12{background: url('../img/sub/map07.jpg') no-repeat 8px 18px;}
@media all and (max-width: 1202px) {
    .site_box{padding: 2% 2% 2% 9%;}
    .site_box > li{width: 33.3%; padding: 20px 0 20px 8%;}
}
@media all and (max-width: 760px) {
    .site_box{padding: 2% 2% 2% 9%;}
    .site_box > li{width: 50%; padding: 20px 0 20px 18%;}
}
@media all and (max-width: 480px) {
    .site_box{padding: 2% 2% 2% 2%;}
}

.info .info_box {background:#e8eee2;}
.info .info_img {display:flex; flex-flow:row wrap; margin:0 -10px;}
.info .info_img li {margin:20px 10px 0 10px; flex:1; border:1px solid #ddd; padding:6px;}
@media all and (max-width:1240px){
  .info .info_img li {flex:1 1 40%;}
}
@media all and (max-width:599px){
  .info .info_img li {flex:1 1 50%;}
}

/*시설안내_상세보기*/
#subtab{overflow: hidden;}
#subtab li{width: 33%; float: left; margin-right: 2px;}
#subtab li:last-child{margin-right: 0;}
#subtab li a{padding: 10px 0; display: block; text-align: center; border: 1px solid #363636; color: #363636;}
#subtab li.on > a{background: #363636; color: #fff; font-weight: 600;}

.gallery_wrap{width: 100%; background: #fbfbfb; border: 1px solid #ddd; padding: 20px; margin-top: 20px; position: relative;}
.gallery_wrap .slider-for{width: 100%; position: relative; overflow: hidden; }
.gallery_wrap .slider-for li{display: flex; justify-content: center;}
.gallery_wrap .slider-for li span{position: absolute; bottom: 0; padding: 10px 0; background: rgba(0,0,0,0.5); display: block;  width: 30%; text-align: center; color: #fff; border-radius: 30px; margin-bottom: 12px;}
.gallery_wrap .slider-nav{width: 100%; margin-top: 20px; padding: 10px 0; background: #fbfbfb; overflow: hidden; position: relative;}
.gallery_wrap .slider-nav li{margin: 10px; height: 100%;}

.gallery_wrap2 ul{display: flex; gap: 10px; margin-top: 20px;}
.gallery_wrap2 ul li{padding: 20px; border: 1px solid #ddd; background: #fbfbfb; text-align: center;}
.gallery_wrap2 ul li p{margin-top: 20px; font-weight: 500;}

@media all and (max-width: 1204px) {
    /* .gallery_wrap .slider-nav{height: auto;} */
}
@media all and (max-width: 720px) {
    .gallery_wrap .slider-for li span{width: 50%;}
}
@media all and (max-width: 600px) {
    #subtab li{width: 32%;}
    .gallery_wrap{padding-bottom: 0; }
    .gallery_wrap .slider-nav{margin-top: 0;}
    .gallery_wrap2 ul{flex-wrap: wrap;}
}
@media all and (max-width: 600px) {
    .gallery_wrap .slider-for li span{width: 80%;}
}
@media all and (max-width: 400px) {
    .gallery_wrap .slider-for li span {
        width: auto;
        font-size: 1.5rem;
        padding: 8px 15px;
    }
}

/* .btnWrap{position: absolute; bottom: 20%; z-index: 9999;}
.btnWrap a {display:block !important;}
.btnWrap a.prev{float: left; margin-left: 20px;}
.btnWrap a.next{float: right; margin-right: 20px;}  */




/*#subtab{overflow: hidden;}
#subtab li{width: 33%; float: left; margin-right: 2px;}
#subtab li:last-child{margin-right: 0;}
#subtab li a{padding: 10px 0; display: block; text-align: center; border: 2px solid #037641; color: #037641;}
#subtab li.on > a{background: #037641; color: #fff; font-weight: 600;}

.gallery_wrap{width: 100%;background: #fbfbfb;border: 1px solid #ddd;padding: 30px;margin-top: 30px;position: relative;}
.gallery_wrap .slider-for{width: 100%; position: relative; overflow: hidden; }
.gallery_wrap .slider-for li{display: flex; justify-content: center;}
.gallery_wrap .slider-nav{width: 100%; margin-top: 20px; padding: 10px 0; height: 200px; background: #fbfbfb; overflow: hidden; position: relative;}
.gallery_wrap .slider-nav li{margin: 10px; height: 100%;}


.btnWrap a {display: inline-block !important;}*/

/*공지사항 모바일 검색*/
@media all and (max-width:400px) {
    #srchColumn{width: 23%;}
    .bod_head .bod_search input[type='text']{width: 58.9%;}
    .bod_head .bod_search input[type='submit']{width: 15%;}
}