@charset "UTF-8";
@import "lib/feather.css";
/*---------
contents
---------*/
#container {min-height:500px;}

/* sub visual */
.sub-vis-wrap {position:relative; width:100%; height:250px; background:#f4f2f0; border-bottom:1px solid #e5e5e4;}

/*.sub-vis-text {position:absolute; top:50%; left:50%; width:1100px; height:auto; margin-left:-550px; transform:translateY(-50%); z-index: 1;}*/
/* 디자이너 요청에 의해서 메뉴 영역 조정*/
.sub-vis-text {position:absolute; top:calc(50% + 40px); left:50%; width:1100px; height:auto; margin-left:-550px; transform:translateY(-50%); z-index: 1;}

.sub-vis-text .title-en {font-size:70px; font-weight:700; color:#666; line-height:75px;}
.sub-vis-text .title-kr {font-size:21px;}
.sub-vis-img {width:100%; text-align: center;}

/* sub contents */
.sub-contents {padding:70px 0;}
.inner-wrap + .inner-wrap {margin-top:50px;}
.cont-title {display:block; width:485px; font-size:33px; font-weight:700; color:#000; line-height:130%;}
.cont-title.underline {border-bottom:2px solid #e46b10; line-height:56px;}
.cont-text {font-size:19px; color:#000;}
.cont-title + .cont-text {margin-top:30px;}

/* greet 인사말 */
.greet {background:url(../img/contents/greet-bg.png) no-repeat center right;}
.greet-text {font-size:18px;}
.greet-text.point-up {font-size:23px; font-weight: 700;}
.greet-text + .greet-text {margin-top:20px;}
.greet-sign {margin-top:74px;}
.greet-sign span {display: inline-block; font-size:17px;}
.greet-sign span + span {margin-left:14px;}
.greet-sign .sign {display: inline-block; position:relative; width:187px; height:64px; margin-left:10px; background:url("../img/contents/plus-intro-sign.jpg") no-repeat; vertical-align: middle; text-indent: -9999px;}

/* plus-intro 사업단소개*/
.history {position: relative; width:100%; height:auto; margin-bottom:50px;}
.history::after {content:""; display:block; position:absolute; top:0; bottom:0; left:50%; width:2px; height:100%; margin-left:-1px; background: linear-gradient(to bottom,#eeeeee,#db530f); }
.history-year {position:relative; height:68px; padding-top:20px; z-index: 3; text-indent: -9999px;}
.history-year.year2019 {background:url("../img/contents/history-year-2019.png") no-repeat center;}
.history-year.year2020 {margin-top:40px; background:url("../img/contents/history-year-2020.png") no-repeat center;}
.history-year.year2021 {margin-top:40px; background:url("../img/contents/history-year-2021.png") no-repeat center;}
.history-year::after {content:""; display:block; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; margin-left:-5px; background:#db530f; border-radius: 100%;}
.history-list {background:#f0ece9; padding:20px 0;}
.history-list::after {content:""; display: block; clear:both;}
.timeline {float:left;}
.timeline li {position:relative; padding-left:80px; font-size:18px; }
.timeline li + li {margin-top:5px;}
.timeline li strong {position:absolute; left:0; margin-right:20px; font-size:21px; font-weight:700; line-height:25px;}
.timephoto {float:right;}
.cont-ci {width:100%; height:auto; margin-top:45px;}
.cont-ci::after {content:""; display: block; clear:both;}
.cont-ci .ci-img {float:left; position:relative; width:420px; height:240px; border:1px solid #e5e5e4;}
.cont-ci .ci-img img {position:absolute; top:50%; left:50%; width:242px; height:77px; transform: translate(-50%, -50%);}
.cont-ci .ci-info {float:left; margin-left:60px;}
.cont-ci .ci-info p {font-size:19px; color:#000;}
.cont-ci .ci-info .color-system {margin-top:54px;}
.cont-ci .ci-info .color-system::after {content:""; display: block; clear:both;}
.cont-ci .ci-info .color-system li {float:left; position:relative; width:80px; height:80px; background:#ccc; border-radius: 100%;}
.cont-ci .ci-info .color-system li:nth-child(1) {background: linear-gradient(to right,#d7391e,#f89b03);}
.cont-ci .ci-info .color-system li:nth-child(2) {background:#dc5310;}
.cont-ci .ci-info .color-system li:nth-child(3) {background:#0b663a;}
.cont-ci .ci-info .color-system li:nth-child(4) {background:#3a3635;}
.cont-ci .ci-info .color-system li + li {margin-left:60px;}
.cont-ci .ci-info .color-system span {position:absolute; top:50%; width:100%; text-align: center; transform: translateY(-50%); font-size:17px; color:#fff;}

/* map 오시는길 */
.map-info {position:relative; padding-left:370px;}
.map-info h3 {position:absolute; top:0; left:0; font-size:21px; font-weight:700; color:#000;}
.map-info .info {position:relative; padding-left:24px; font-size:19px; border-left:3px solid #e46b10; line-height:160%;}
.map-info .info strong {margin-right:5px;}
.map-info .info span.tel {margin-right:20px;}
.map-info .info span.email {display: block;}
.map-box {width:100%; height:400px; margin-top:70px; border:1px solid #e5e5e4;}

/* business-intro 사업 소개 */
.business-bg {position:relative; width:100%; background: linear-gradient(to bottom,#fff,#f0ece9);}
.business-bg .inner-wrap {position:static;}
.business-contents { padding:30px 0 40px;}
.business-contents::after {content:""; position:absolute; top:466px; left:0; right:0; height:6px; background:#e46b10;}
.business-contents .navigation {padding-bottom:70px;}
.business-contents .navigation::after {content:""; display: block; clear:both;}
.business-contents .navigation li {float:left; position:relative; width:32%; margin-right:2%; cursor: pointer;}
.business-contents .navigation li.active::after, .business-contents .navigation li:hover::after {margin-left:-11px; opacity: 1;}
.business-contents .navigation li::after {content:""; position:absolute; bottom:-35px; left:50%; width:22px; height:20px; margin-left:-50px; background:url("../img/contents/business-arr.png") no-repeat; opacity: 0; transition: all 0.3s ease;}
.business-contents .navigation li:nth-child(3n-3) {margin-right:0;}
.business-contents .navigation li .title {font-size:19px; font-weight:700; transition: all 0.3s ease;}
.business-contents .navigation li .title strong {margin-right:10px; font-size:70px; font-weight:900; color:#ccc; letter-spacing: -0.4rem;}
.business-contents .navigation li.active .title, .business-contents .navigation li:hover .title {font-size:25px;}
.business-contents .navigation li.active .title strong {color:#e46b10;}
.business-contents .navigation li .thumb {width:100%; height:240px; border:5px solid #fff; box-shadow:0 5px 10px rgba(0,0,0,.3);}
.business-contents .navigation li .thumb img {width:100%; height:100%; opacity: .5; transition: all 0.3s ease;}
.business-contents .navigation li.active .thumb img, .business-contents .navigation li:hover .thumb img {opacity: 1;}
.business-contents .business-list-wrap {position:relative; width:100%; height:210px;}
.business-contents .business-list {position:absolute; top:0; left:-50px; width:100%; opacity:0; visibility: hidden; transition: all 0.3s ease;}
.business-contents .business-list.active {left:0; opacity:1; visibility: visible;}
.business-contents .business-list::after {content:""; display: block; clear:both;}
.business-contents .business-list > li {display:inline-block; position: relative; width:330px; height:210px; margin-right:20px; background:#fff; vertical-align:middle;}
.business-contents .business-list > li:last-child {margin-right:0;}
.business-contents .business-list > li .title {width:100%; background:#666; text-align:center; line-height:70px; font-size:19px; color:#fff;}
.business-contents .business-list > li .cont {padding:18px 40px; text-align: left; transform:skew(-0.03deg);}
.business-contents .business-list > li .cont li::before {content:"-"; margin-right:5px; font-size:16px;}
.business-contents .business-list.list01 {text-align: left;}
.business-contents .business-list.list02 {text-align: center;}
.business-contents .business-list.list03 {text-align: right;}

/* cooperate 협력기관 */
.cooperate-list::after {content:""; display: block; clear:both;}
.cooperate-list li {float:left; width:32%; height:150px; margin-right:2%; margin-bottom:20px; border:1px solid #e5e5e4;}
.cooperate-list li:nth-child(3n-3) {margin-right:0;}
.cooperate-list li a {display:block; position:relative; width:100%; height:100%;}
.cooperate-list li a img {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}

.board {padding:70px 0;}

.board .board-util {width:100%; height:56px; padding:10px 0;}
.board .board-util::after {content:""; display: block; clear:both;}
.board .board-util .total {display: inline-block; font-weight:700; font-size:15px; color:#999; line-height: 36px;transform:skew(-0.03deg);}
.board .board-util .search {float: right;}
.board .board-util .search select {width:95px;}
.board .board-util .search input {width:146px; margin-left:-3px;}
.board .board-util .search button.btn-sch {width:36px; line-height:36px; margin-left:-3px; background:url("../img/board/btn-sch.png") no-repeat; text-indent: -9999px;}

.board-list {display:table; table-layout: fixed; width:100%; height:auto; border-top:1px solid #333; border-collapse: collapse; border-spacing: 0;}
.board-list > li {display:table-row; border-bottom:1px solid #999;}
.board-list > li > * {display:table-cell; padding:28px 0; font-size:17px;}
.board-list > li .number {width:100px; text-align:center; color:#000;}
.board-list > li .number .notice-label {display:inline-block; width:40px; background:#df5c16; line-height:25px; color:#fff; font-size:13px; border-radius:5px;}
/*.board-list > li .date {width:180px; text-align:center; font-size:15px; color:#666;}*/
.board-list > li .date {width:150px; text-align:center; font-size:15px; color:#666; transform:skew(-0.03deg);}
.board-list > li .file {width:100px;}
/*.board-list > li .file a {display:block; width:20px; height:20px; margin:0 auto; background:url("../img/board/ico-file.jpg") no-repeat; text-indent: -9999px;}*/
.board-list > li .file span {display:block; width:20px; height:20px; margin:0 auto; background:url("../img/board/ico-file.jpg") no-repeat; text-indent: -9999px;}
.board-list > li .subject {padding:0 20px;}
.board-list > li .subject a {display:block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}
.board-list > li .subject:hover a {font-weight: 700; opacity: 1; text-decoration: underline;}

.go-mailform {display:table; position:relative; width:100%; height:100px; margin-bottom:20px; background:#f0ece9; font-size:17px;}
.go-mailform > * {display:table-cell; height:100%; padding:0 30px; vertical-align: middle;}
.go-mailform > span {}
.go-mailform > div {text-align: right;}
.go-mailform > div > a {display: inline-block; position:relative; width:280px; padding:0 34px; line-height:52px;background: linear-gradient(to bottom,#e89151,#e67f31); color:#fff; text-align:left;}
.go-mailform > div > a::after {content:">"; display:block; position:absolute; top:50%; right:34px; transform: translateY(-50%);}

.board-faq {display:block; width:100%; height:auto; border-top:1px solid #333;}
.board-faq li {border-bottom:1px solid #d2d2d2;}
.board-faq li > .subject {display:block; padding:28px 20px; font-size:17px; font-weight:700; color:#000; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}
.board-faq li > .subject::before {content:"Q."; display: inline-block; margin-right:10px;}
.board-faq li > .faq-cont {display:none; padding:28px 20px; font-size:15px; border-top:1px solid #d2d2d2; transform: skew(-0.03deg);}
.board-faq li.active > a {background:#f4f2f0; color:#E46B10;}

.board-view {width:100%; height:auto; padding:30px 0; border-top:1px solid #333; border-bottom:1px solid #999;}
.board-view .subject {display:block; padding:0 50px; font-size:23px; color:#000;}
.board-view .board-view-info {display:block; padding:20px 50px; border-bottom:1px solid #999;}
.board-view .board-view-info li {display:inline-block; font-size:17px; color:#666;}
.board-view .board-view-info li strong {color:#333; margin-right:20px;}
.board-view .board-cont {padding:60px 50px 20px; font-size:17px; line-height:160%;}
.board-view .file-list {padding:10px 50px;}
.board-view .file-list li {display:block; position:relative; font-size:15px; color:#666; transform:skew(-0.03deg);}
.board-view .file-list li + li {margin-top:15px;}
.board-view .file-list li::before {content:""; display:inline-block; width:20px; height:20px; margin-right:10px; background:url("../img/board/ico-file.jpg") no-repeat; vertical-align: middle;}
.board-view .file-list li strong {color:#333;}
.board-view .file-view {padding:30px 50px;}
.board-view .file-view img {max-width:100%; height:auto;margin-top:20px;}
.board-view .file-view img:first-child {margin-top:0px;}


.board-gall {width:100%; height:auto;}
/*.board-gall .gall-list {margin:60px -17px; border-top:1px solid #333;}*/
.board-gall .gall-list {margin-top:1rem;border-top:1px solid #333;}
.board-gall .gall-list::after {content:""; display: block; clear:both;}
.board-gall .gall-list li {float:left; width:25%; padding:30px 17px 10px;}
.board-gall .gall-list li a {display:block; width:100%; height:auto;}
.board-gall .gall-list li a .gall-thumb {position:relative; width:100%; height:270px; overflow: hidden;}
.board-gall .gall-list li:hover a {opacity: 1;}
.board-gall .gall-list li a .gall-thumb::after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:5px solid #e46b10; opacity: 0; transition: all 0.3s ease;}
.board-gall .gall-list li:hover a .gall-thumb::after {opacity: 1;}
.board-gall .gall-list li a .gall-thumb img {position:absolute; top:50%; left:50%; width:auto; height:100%; transform:translate(-50%,-50%);}
.board-gall .gall-list li a .gall-info {margin-top:24px;}
.board-gall .gall-list li a .gall-info .subject {width:100%; font-size:19px; color:#333; font-weight:700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all;}
.board-gall .gall-list li a .gall-info .date {width:100%; margin-top:10px; font-size:15px; color:#333; font-weight:700;  transform:skew(-0.03deg);}

.board-write{width:100%; height:auto; padding:0; border-top:1px solid #333; border-bottom:1px solid #999;}
.board-write .subject {display:block; padding:20px 50px; border-bottom:1px solid #ccc;}
.board-write .subject input {width:100%; border:0; padding:0; font-size:23px; color:#000 !important; font-weight:700;}
.board-write .mailto {width:100%; border-bottom:1px solid #ccc;}
.board-write .mailto > * {display:table-cell;}
.board-write .mailto .mailto-tit {padding:30px 20px 30px 50px; font-size:17px; color:#000;}
.board-write .mailto .mailto-input {padding:30px 50px 30px 20px;}
.board-write .mailto .mailto-input input {width:600px; font-size:17px; border:0;}
.board-write .board-cont {padding:30px 50px; border-bottom:1px solid #ccc;}
/*.board-write .board-cont textarea {padding:20px; width:100%; height:200px; font-size:17px;}*/
.board-write .board-cont textarea {padding:20px; width:100%; height:400px; font-size:17px;}

/* 기타입력 추가 */
.board-write .etc {display:block; width:100%;  padding:20px 50px; border-bottom:1px solid #ccc;}
.board-write .etc label {display:inline-block; border:0;  margin-right:40px; padding:0; font-size:17px; color:#000 !important; font-weight:700;}
.board-write .etc input {display:inline-block; width:70%; border:0; padding:0px 14px; font-size:17px; color:#000 !important; font-weight:500;}


.board-write .file-list {padding:30px 50px; border-bottom:1px solid #ccc;}
.board-write .file-list li {display:block; position:relative; font-size:15px; color:#666; transform:skew(-0.03deg);}
.board-write .file-list li::after {content:""; display: block; clear:both;}
.board-write .file-list li + li {margin-top:15px;}
.board-write .file-list li::before {content:""; float:left; display:inline-block; width:20px; height:20px; margin-right:10px; background:url("../img/board/ico-file.jpg") no-repeat; vertical-align: middle;}
.board-write .file-list li strong {float:left; color:#333;}
.board-write .file-list li a {float:left;}
.board-write .file-list li button.btn-file {float:left; width:26px; height:26px; margin-left:2px; background:#ccc; font-weight:700; font-size:17px; vertical-align: middle;}
.board-write .file-list li button.btn-file:first-of-type {margin-left:15px; transform:skew(-0.03deg);}
.board-write .file-list li button.btn-file span {display: inline-block; text-indent: -9999px;}
.board-write .file-list li button.btn-file i {line-height:24px;}
.board-write .file-list li button.btn-file.btn-del {background:#333; border:1px solid #333; color:#fff;}
.board-write .file-list li button.btn-file.btn-arr {background:#fff; border:1px solid #333;}

.board-write .file-upload {width:100%; border-bottom:1px solid #ccc;}
.board-write .file-upload > * {display:table-cell;}
.board-write .file-upload .upload-tit {padding:30px 20px 30px 50px; font-size:17px; color:#000;}
.board-write .file-upload .upload-list {padding:30px 50px 30px 20px;}
.board-write .file-upload .upload-list li + li {margin-top:15px;}
.board-write .file-util {padding:30px 50px; border-bottom:1px solid #ccc;}
.board-write .file-util dl {display:inline-block;}
.board-write .file-util dl > * {display:inline-block; font-size:17px; color:#000;}
.board-write .file-util dl dt + dd {margin-left:24px;}
.board-write .file-util dl dd + dt {margin-left:100px;}
.board-write .file-util dl dd select {width:120px;}
.board-write .link {width:100%; border-bottom:1px solid #ccc;}
.board-write .link > * {display:table-cell;}
.board-write .link .link-tit {padding:30px 20px 30px 50px; font-size:17px; color:#000;}
.board-write .link .link-url {padding:30px 50px 30px 20px;}
.board-write .link .link-url input {width:600px; font-size:17px; border:0;}

.board-write .file-view {padding:30px 50px;}
.board-write .file-view img {max-width:100%; height:auto;}


/* button */
/*.btn-wrap {width:100%; padding:20px 0; text-align: center;}*/
.btn-wrap {width:100%; padding:20px 0; text-align: right;}
.btn-wrap::after {content:""; display: block; clear:both;}
.btn-wrap .btn.btn-right {float:right;}
.btn-wrap .btn {display:inline-block; width:150px; line-height:50px; font-size:17px; color:#333; text-align: center; border:1px solid #ccc;}
.btn-wrap .btn:hover {color:#000; border:1px solid #000; opacity: 1;}
.btn-wrap .btn.primary {color:#fff; border:1px solid #df5c16; background:#df5c16;}
.btn-wrap .btn.primary:hover {color:#df5c16; border:1px solid #df5c16; background:#fff;}
/* paging */
.paging-wrap {width:100%; padding:30px 0; text-align: center;}
.paging-wrap a {display: inline-block; width:32px; line-height:32px; font-size:17px; text-align: center; color:#666;}
.paging-wrap a.page-btn {text-indent:-9999px; border:1px solid #ccc;}
.paging-wrap a.page-btn.prev {margin-right:18px; background:url("../img/board/page-btn-prev.jpg") no-repeat center;}
.paging-wrap a.page-btn.next {margin-left:18px; background:url("../img/board/page-btn-next.jpg") no-repeat center;}
.paging-wrap a.active {font-weight:700; color:#df5c16;}

/* 처음 마지막 추가 */
.paging-wrap a.page-btn.first {margin-right:18px; background:url("../img/board/page-btn-first.jpg") no-repeat center;}
.paging-wrap a.page-btn.last {margin-left:18px; background:url("../img/board/page-btn-last.jpg") no-repeat center;}


/* 공통 폼 스타일 */
select, textarea, input[type="text"], input[type="password"], input[type="submit"], input[type="search"], input[type="number"] { padding: 0 14px; background: #fff; border: 1px solid #ccc;}

select[placeholder], textarea[placeholder], input[type="text"][placeholder], input[type="password"][placeholder], input[type="submit"][placeholder], input[type="search"][placeholder], input[type="number"][placeholder] { color: #666; }
input[type="text"], input[type="password"], input[type="date"], input[type="search"] { height: 36px; }

select { display: inline-block; height: 36px; padding-right: 26px; background: url("../img/common/select.png") no-repeat right center; background-size: 30px 20px; background-clip: padding-box; color:#333; }

input[type="checkbox"], input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; cursor: pointer; }
input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; position: relative; width: auto; padding-left: 30px; vertical-align: middle; }
input[type="checkbox"] + label::before, input[type="radio"] + label::before { content: ""; position: absolute; top: 50%; left: 0; width: 20px; height: 20px; text-align: center; border: 1px solid #ccc; background: #fff; transform: translateY(-50%); }
input[type="checkbox"] + label::after, input[type="radio"] + label::after { content: ""; position: absolute; }
input[type="checkbox"] + label span, input[type="radio"] + label span { padding-left: 5px; padding-right: 10px; }
input[type="checkbox"]:focus + label, input[type="radio"]:focus + label { font-weight: 500; }
input[type="checkbox"]:focus + label::before, input[type="radio"]:focus + label::before { border-color: #999; }
input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before { border-color: #999; }

input[type="checkbox"] + label::after { top: 50%; left: 0; width: 20px; height: 20px; text-align: center; line-height: 20px; transform: translateY(-50%); }
input[type="checkbox"]:checked + label::before { border: 1px solid #df5c16; background: #df5c16; }
input[type="checkbox"]:checked + label::after { content: "\e92b"; font-family: "feather" !important; color: #fff; font-weight: 400; }

input[type="radio"] + label::before { border-radius: 100%; }
input[type="radio"] + label::after { top: 50%; left: 5px; width: 10px; height: 10px; transform: translateY(-50%); }
input[type="radio"]:checked + label::after { background: #df5c16; border-radius: 100%; }