@charset "utf-8";
.container { width: 1100px; margin:0 auto}
.theme-color1 { color: #5b97c9; }
.theme-color2 { color: #dfdfdf; }

.btn.theme { background: #5b97c9; color: #fff; border-color: #5b97c9 }
.btn.theme:hover { background: #4b87b9 }

@font-face { font-family: 'NanumGothic';
src: url('../lib/NanumBarunGothic/fonts/NanumGothic.eot');
src: url('../lib/NanumBarunGothic/fonts/NanumGothic.eot') format('embedded-opentype'),
url('../lib/NanumBarunGothic/fonts/NanumGothic.woff') format('woff');}

body {font-family: '나눔고딕', 'NanumGothic', 'serif'; font-size:16px}

a:hover {color: inherit }
h3 { font-size: 20px; font-weight:600 }
h4 {height:25px;border-left:3px solid #28444f; white-space:nowrap; padding-top:3px; padding-left:5px; color:#28444f; font-size:18px}
/*h5 {width:180px; height:50px; background:#046a57; color:#fff; padding:15px 10px; text-align:center; margin-top:50px; font-size:18px}*/
h5:first-child {margin-top:0}

#header { width:100%; position: relative; z-index: 1000; height: 127px; background: #fff ;}
#header #top-menu {width:100%; height: 35px; line-height: 35px; text-align: right; color: #517684; border-bottom:1px solid #e0dddd; font-size:11px; color:#7a7878 }
#header .logo {margin:22px 64px 22px 0; float:left}
#header #gnb {height: 107px; text-align: right; position: relative; z-index: 1000;  padding-top:10px; }
#header #gnb .list-inline li {padding:0; text-align:center}
#header #gnb .list-inline li a {display: block; width: 134px; height: 90px; line-height: 80px; text-align:center; font-size: 16px; font-weight: 500 ;color: #333;}
#header #gnb .list-inline li a:hover { color:#1e306f; text-decoration: none; font-weight:500 }
#header #gnb .list-inline li a.on {color: #1e306f; text-decoration: none; font-weight:500 }

#lnb { display: none; position: absolute; top: 129px; left: 0; z-index: 1000; width: 100%; text-align: right; background: #f6fcfd;  }
#lnb .list-inline { margin: 0 }
#lnb .list-inline li { position: relative; height: calc(40px * 6 + 30px); padding: 17px 0 5px; border-top: 2px solid transparent; border-right: 1px solid #eee; border-left: 1px solid transparent; vertical-align: top }
#lnb .list-inline li:first-child { border-left-color: #e5f1f2 }
#lnb .list-inline li:hover { background: #e5f1f2; border-top-color: #28444f }
#lnb .list-inline li:hover:after { content: ""; position: absolute; top: 0; left: 63px; width: 0; height: 0; border: 0 solid transparent; border-top-color: #28444f; border-width: 7px; }
#lnb .list-inline li a { display: block; width: 143px; height: 40px; line-height: 40px; text-align: center; color: #666; font-size: 14px }
#lnb .list-inline li a:hover { color: #1b838a; text-decoration: none }
#lnb .copyright { height: 30px; line-height: 30px; text-align: left; background: #eee; font-size: 11px; color: #aaa }
#lnb .copyright .rel-link { float: right; font-size: 13px; color: #666}

#visual {width:100%; height:580px; position:relative; background:url("../img/main/visual-bg.jpg") no-repeat center}
#visual p {text-align: center; padding-top:118px}

#bnr-wrap {margin-top:85px;}
#bnr-wrap .container {overflow:hidden}
#bnr-wrap .container .icon-box {width:531px; height:364px;  float:left}
#bnr-wrap .container .icon-box ul {overflow:hidden}
#bnr-wrap .container .icon-box li {float:left; width:264px; height:180px; text-align:center; color:#e7ebeb; padding-top:43px; line-height:1.8}
#bnr-wrap .container .icon-box li a p{font-size:16px; font-weight:500; margin-top:15px}
#bnr-wrap .container .icon-box li:nth-child(1) {background:#3a53ad}
#bnr-wrap .container .icon-box li:nth-child(2) {background:#253981}
#bnr-wrap .container .icon-box li:nth-child(3) {background:#31499d}
#bnr-wrap .container .icon-box li:nth-child(4) {background:#1e306f}
#bnr-wrap .container .account {float:right; width:500px; height:360px; background:url("../img/main/icon-card.jpg") no-repeat 33px 133px #f4f7f9 }
#bnr-wrap .container .account h3 {font-size:20px; width:40px; border-top:2px solid #1e306f; white-space: nowrap; margin-top:50px; margin-left:30px; padding-top:5px; font-weight:600}
#bnr-wrap .container .account p {margin-top:55px; margin-left:120px; font-size:20px; color:#2d2b2b; line-height:1.2}
#bnr-wrap .container .account p span {font-size:16px; color:#818181}
#bnr-wrap .container .account ul {margin-left:35px; color:#2d2b2b; font-size:16px; margin-top:18px}
#bnr-wrap .container .account p.ps {margin-left:35px; font-size:16px; margin-top:15px}
#bnr-wrap .container .account p.ps span {color:#1e306f}

#board-wrap {margin-top:100px; height:367px;}
#board-wrap .container {height:367px;}
#board-wrap .tab {overflow:hidden;  margin-bottom:55px}
#board-wrap .tab li {float:left; width:25%; text-align:center;}
#board-wrap .tab li a {font-size:20px; font-weight:600; color:#2d2b2b; display:block; padding-bottom:10px; text-decoration:none}
#board-wrap .tab li a.active {color:#1e306f; border-bottom:2px solid #1e306f}
#board-wrap {width:100%; height:370px;}
#board02, #board03, #board04 {display:none}
#board-wrap .tab-panel .list-box {width:33.3%; height:268px; border:1px solid #e6e4e4; float:left; padding:13px}
#board-wrap .tab-panel .list-box .headline {float:left; width:53px; height:27px; background:#31499d; text-align:center; color:#fff; padding:2px 0px}
#board-wrap .tab-panel .list-box .headline-long {float:left; width:80px; height:27px; background:#31499d; text-align:center; color:#fff; padding:2px 0px}
#board-wrap .tab-panel .list-box .btn-more {float:right;}
#board-wrap .tab-panel .list-box:nth-child(2) {border-left:none; border-right:none}
#board-wrap .tab-panel .list-box ul {clear:both}
#board-wrap .tab-panel .list-box ul li dl {margin-top:54px}
#board-wrap .tab-panel .list-box ul li dl dt {font-size:18px; color:#222; font-weight:500; width:324px; height:46px; overflow:hidden; white-space: normal; text-overflow: ellipsis; line-height:1.3; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical }
#board-wrap .tab-panel .list-box ul li dl dd {margin-top:26px; font-size:15px; color:#66676a; text-align:justify; width:326px; height:63px; overflow:hidden; white-space: normal; text-overflow: ellipsis; line-height:1.6; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical }
#board-wrap .tab-panel .list-box p.date {text-align:right; font-size:15px; color:#999}
#board-wrap .tab-panel .list-box:hover {border:4px solid #4e6acc}


#sec-gallery {height:493px; background:#f9f9f9; margin-top:91px}
#sec-gallery .container {padding-top:20px; overflow:hidden}
#sec-gallery .container h2 {color:#2d2b2b; font-size:25px;  font-family: 'NanumSquare'; font-weight:bold}
#sec-gallery .container p.btn-more {float:right; margin-top:-50px}
#sec-gallery .container dl {width:31.2%; height:351px; background:#fff; float:left; margin-right:30px; margin-top:40px}
#sec-gallery .container dl:last-child {margin-right:0;}
#sec-gallery .container dl dt {height:205px; text-align:center}
#sec-gallery .container dl dt img {max-width:100%; height:205px}/**/
#sec-gallery .container dl dd {text-align:center; margin-top:45px; margin-left:15px width:250px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; font-size:16px; color:#4c4a4a}
#sec-gallery .container dl dd p {text-align:right; font-size:15px; color:#999; padding-top:34px; padding-right:15px}


#sec-bnr {margin-top:90px; height:75px; margin-bottom:111px;}
#sec-bnr .container ul {overflow:hidden; text-align:center}
#sec-bnr .container ul li {float:left; border:1px solid #ded9d9; width:211px; height:75px;  margin-right:3px}
#sec-bnr .container ul li:last-child {margin-right:0}

#footer {width:100%; height:152px; border-top:2px solid #464747; margin-top:112px; position:relative}
#footer .container {height:155px; position:relative; top:-3px; overflow:hidden}
#footer .container p.logo {float:left; margin-top:47px}
#footer .container address {margin-top:50px; font-size:14px; #6b6b6b; float:right; text-align:right}
#footer .container p.copyright {font-size:14px; color:#9f9b9b; clear:both; float:right}





/* sub page */
#bnr-sub { height: 215px; margin-bottom: 40px; background: #fff url("../img/sub/bnr-sub.jpg")no-repeat center; }
#bnr-sub p {position:relative; left:680px; top:70px}
#snb ul { width: 240px; list-style: none; padding-left: 0 }
#snb ul li.headline { height: 125px; line-height: 120px; background: #8ca28c; color: #fff; text-align: center; font-size: 22px;  }
#snb ul li:not(.headline) a { display: block; width: 100%; height: 50px; line-height: 50px; font-size: 16px; padding-left: 5px; border-bottom: 1px solid #eee }
#snb ul li:not(.headline) a:hover { color: #669966 }
#snb ul li:not(.headline).active a { color: #669966; font-weight:500 }




#quick-menu.affix { top: 60px }
#quick-menu ul { width: 70px; list-style: none; margin-left: 30px; padding-left: 0; border: 1px solid #5b97c9 }
#quick-menu ul li.headline { height: 20px; line-height: 20px; font-size: 9px; color: #fff; background: #5b97c9; text-align: center; font-weight: 200 }
#quick-menu ul li:not(.headline):not(.top) { padding: 0 5px }
#quick-menu ul li:not(.headline):not(.top) a { display: block; height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #eee; font-size: 11px }
#quick-menu ul li.top a { display: block; height: 20px; line-height: 20px; text-align: center; font-size: 9px; color: #5b97c9 }

#sec-sub .cnt-sub > .path { height: 30px; line-height: 30px; text-align: right; font-weight: 200; border-bottom: 1px solid #eee; font-size:14px }
#sec-sub .cnt-sub > .path .fa { margin: 0 5px }
#sec-sub .cnt-sub > .headline {width:900px; height: 65px; line-height: 60px; padding-bottom: 20px; margin-top: 30px; margin-bottom: 50px; border-bottom: 5px solid #507250 }
#sec-sub .cnt-sub > .contents { line-height: 1.8; width: 890px; min-height:600px }
#sec-sub .cnt-sub > .contents p {line-height:1.6; text-align:justify}
#sec-sub .cnt-sub > .contents .para ul { padding-left: 1em; color: #666 }
#sec-sub .cnt-sub > .contents .para p + ul { margin-top: -10px }

#sec-sub #table-member tbody tr:first-child { border-top: 2px solid #5b97c9 }
#sec-sub #table-member tbody th { background: #eee; width: 160px; line-height: 32px; padding-left: 16px; }
#sec-sub #table-member tbody td { line-height: 32px; padding-left: 16px }
#sec-sub #table-member tbody th.important::before { content: "*"; color: #d9534f; padding-right: 5px }
#sec-sub #table-member .form-control { display:inline-block; width: 160px }
#sec-sub #table-member .form-control:placeholder-shown { border: 1px solid rgba(217, 83, 79, .5) }
#sec-sub #table-member .form-control.tel { width: 80px }
#sec-sub #table-member br + .form-control { margin-top: 5px; width: 320px }
#sec-sub #table-member label { margin-right: 5px }

#sec-sub .noti { border-left: 2px solid #666; padding: 15px; background: #eee }
#sec-sub .noti .now { font-size: 16px; color: #5b97c9 }



/*Galliery*/
.bg_wrap {width:100%; height:636px; background:#f5f5f5; position:relative; top:-20px; border-bottom:1px solid #d7d7d7}
.bg_wrap .container {height:636px;}
.bg_wrap .container  h2 {text-align:center; font-size:40px; color:#363636; margin-top:125px; background:url(../img/main/h2_bar.jpg) no-repeat center top; padding-top:15px}
.bg_wrap .container .img_box {height:347px; overflow:hidden; margin-top:50px;}
.bg_wrap .container .img_box > div {float:left; width:327px; height:296px; margin-right:94px; text-align:center; position:relative}
.bg_wrap .container .img_box > div dt a img {width:327px; height:296px;}
.bg_wrap .container .img_box > div:last-child {margin-right:0}
.wrapper-img-box { width: 327px; height: 296px; position: relative; }
.wrapper-img-box:hover .wrapper-more-box {display: table; z-index: 1 }
.wrapper-more-box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; background: rgba(255,255,255,.50); transition: all .3s ease-in-out }
.wrapper-table-cell { display: table-cell; text-align: center; vertical-align: middle }
.wrapper-more-box .wrapper-table-cell img { width: auto !important; height: auto !important }
.bg_wrap .container .img_box dd {margin-top:10px; font-family:"돋움"; font-size:13px; line-height:1.4}
.bg_wrap .container .img_box dd span {color:#9b9999}


.photo_list { padding: 0 }
.photo_list li { display: inline-block; width: 280px; margin-bottom: 20px; padding-right:20px}
.photo_list li:last-child {padding-right:0}
.photo_list li .photo_img { background: #eee; height: 280px; overflow: hidden; background-size: cover; background-position: center center }
.photo_list li .photo_img img { width: 100%; opacity: 0 }
.photo_list li .photo_title h5 { margin: 10px 0 0; overflow: hidden }
.photo_list li .photo_title span { color: #999; font-size: 13px }

.heading-notice { background: #f5f5f5 }


/*board*/
.board_wrap {margin:0 auto; width:1200px; height:260px; position:relative; margin-top:-20px; overflow:hidden}
.board_wrap .board_notice {float:left; width:50%; height:260px; border:1px solid #d7d7d7; border-top:none}
.board_wrap .board_normal {float:left; width:50%; height:260px; border:1px solid #d7d7d7; border-top:none; border-left:none}
.board_wrap h3 {margin-left:31px; margin-top:40px; color:#363636; font-size:18px;}
.board_wrap h3 span {font-size:14px; color:#9b9999; margin-left:12px}
.board_wrap p {float:right; width:11px; height:11px; margin-top:-30px; margin-right:12px}
.board_wrap .board-list { margin-bottom: 0; list-style: none; padding-left:32px; margin-top:33px;}
.board_wrap .board-list li {background:url("../img/main/li_bul.jpg") no-repeat left 7px; padding-left:5px; }
.board_wrap .board-list li a { display: inline-block; width: 100%; color: inherit; font-family:"돋움" font-size:12px;}
.board_wrap .board-list li a span.title:hover {text-decoration:underline}
.board_wrap .board-list li span.title { display: inline-block; max-width: 35em; line-height:20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 200; font-family:"돋움" }
.board_wrap .board-list li span.date { display: inline-block; line-height: 20px; float: right; font-weight: 200; padding-right:29px; color:#9b9999; font-family:"돋움"}

td .photo-title a {display:block; width:268px; overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}

/*banner*/
.banner_wrap {margin:35px auto; margin-bottom:87px; width:1200px; height:77px; overflow:hidden; position:relative}
.banner_wrap ul li {float:left; padding-right:66px}
.banner_wrap ul li:last-child {padding:0}


#nav-mid{ border-bottom:1px solid #ccc; height:40px;}
#nav-mid .container ul li a{font-size:14px;}
#nav-mid .row .lnb{display:none;}
#nav-mid .row > ul > li:hover{cursor:pointer;}
#nav-mid .row > ul > li:nth-child(2) > ul li{display:none;}
#nav-mid .row > ul > li > ul{position:absolute; background-color:#fff; width:calc(100% + 5px); left:-4px; z-index:10}
#nav-mid .row > ul > li > ul > li a{padding-left:30px;}
#nav-mid{background-color:#fff;}
#nav-mid .row > ul > li{border-right:1px solid #ccc; padding-right:50px; padding-left:30px; line-height:40px; position:relative;}
#nav-mid .row > ul > li:not(.home){background:url('../img/sub/arrow-navMid.png') no-repeat 90% center;}
#nav-mid .row > ul > li{width:200px;}
#nav-mid .row .home{padding-left:0; padding-right:0; width:auto; border-left:1px solid #ccc;}
#nav-mid .row .home a{padding:10px 15px;}

#nav-mid .row .lnb li:last-child{border-bottom:1px solid #ccc;}
#nav-mid .row .lnb li{border-right:1px solid #ccc; border-left:1px solid #ccc;}
#nav-mid .row .lnb li a{display:block; height:100%; width:100%;}
#nav-mid .row .lnb li a:hover{color:#fff; background-color:#444;}

#nav-mid .row .gnb li{border-left:1px solid #ccc; border-right:1px solid #ccc;}
#nav-mid .row .gnb li:last-child{border-bottom:1px solid #ccc;}
#nav-mid .row .gnb li a{display:block; height:100%; width:100%;}
#nav-mid .row .gnb li a:hover{color:#fff; background-color:#444;}

#snb h2 .lnb{display:none;}