@charset "UTF-8";
@font-face {
    font-family: 'KCC-eunyoung';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KCC-eunyoung-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face { font-family: 'MapoGoldenPier'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoGoldenPierA.woff') format('woff'); font-weight: normal; font-style: normal; }
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean" rel="stylesheet"> @import url('https://fonts.googleapis.com/css?family=Black+Han+Sans:400'); @import url('https://fonts.googleapis.com/css?family=Black+Han+Sans&display=swap&subset=korean'); 
	.fc_pointer {color:#1F88E5; }
	.content_wrap{width:100%; min-width:320px; max-width:1200px; margin:0 auto;}
	.page_title{width:100%; margin-bottom:70px;}
	.page_title h1{width:100%; margin:0 auto; text-align:center; font-size:2.5em; font-weight:600;}
	.page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;}
	.page_title h2{width:100%; margin:0 auto; text-align:center; font-size:1.2em; color:#666; margin-top:20px; }

	.company_type1 {width:100%; margin:0 auto; }
	.company_type1:after{content:""; clear:both; display:block;}
	.company_type1 .ceo_img {position: relative; float:right; width:500px; text-align:right; padding-left:30px;}
	.company_type1 .ceo_img img {width:100%; height:auto; }
	.company_type1 .ceo_area{ float:left; width:50%;} 
	.company_type1 .ceo_area .ceo_tit { position:relative; float:left; width:100%; font-size:2.4em; font-family: 'MapoGoldenPier'; line-height:1.4em; letter-spacing:-0.05em;  }
	.company_type1 .ceo_area .ceo_txt { float:right; width:100%; padding-top:50px; }
	.company_type1 .ceo_area .ceo_txt p {margin-top:20px; line-height:1.5em; font-size:1.3em; font-weight:200;color: #000; word-break: keep-all; }
	.company_type1 .ceo_area .ceo_txt span.ceo_sign{ display:block; font-size:2em; color:#000; margin-top:50px; font-family: 'KCC-eunyoung';}

	.s_tit {width:100%; height:30px; line-height:30px; text-align:left; border-left:5px solid #000; margin:50px auto;  margin-bottom:10px;  font-size:1.8em;  text-indent:10px;}
	.tbla{width:100%; border-collapse: collapse; margin:0 auto; border:1px solid #ddd; border-bottom:0px;}
	.tbla tr th{width:50%; height:45px; padding:15px 0; text-align:left;padding-left:15px; border-bottom:1px solid #ff6600; font-weight:400;font-size:1.2em;}
	.tbla tr td{width:50%; border-bottom:1px solid #8dc919; padding-left:15px; height:45px; text-align:left;font-size:1.2em;font-weight:400;}

		
	@media screen and (max-width:992px){
		
		.content_wrap{width:96%;}
		.page_title{margin-bottom:50px;}	
		.page_title h1{font-size:2em;}
		.page_title h2{font-size:1em;}
		.s_tit{font-size:1.2em;}

		.company_type1 .ceo_img {width:100%; text-align:center; margin-bottom:30px; padding-left:0; }
		.company_type1 .ceo_img img{width:100%;}
		.company_type1 .ceo_area{ float:none; width:95%; margin:0 auto; } 
		.company_type1 .ceo_area .ceo_tit { font-size:1.8em; text-align:center;}
		.company_type1 .ceo_area .ceo_txt{padding-top:10px;}

		.tbla tr th{width:50%; font-size:1em;}
		.tbla tr td{width:50%; font-size:1em;}

	}

	/*연혁*/

.org1_top { width:180px; height:180px; padding-top:77px; margin:70px auto; line-height:22px; font-size:1.6em; text-align:center; color:#fff;  background:#ff6600; border-radius: 50%; }
.org2_top { width:180px; height:180px; padding-top:77px; margin:70px auto; line-height:22px; font-size:1.6em; text-align:center; color:#fff;  background:#007b2f; border-radius: 50%; }
.org3_top { width:140px; height:140px; padding-top:57px; margin:70px auto; line-height:22px; font-size:1.6em; text-align:center; color:#fff;  background:#8dc919; border-radius: 50%; }
.history_top { width:220px; height:220px; padding-top:77px; margin:70px auto; line-height:22px; font-size:2em;font-weight:600; text-align:center; color:#fff;  background:#007b2f; border-radius: 50%; }
.timeline {box-sizing: border-box; }
.timeline:before {box-sizing: border-box; }
.timeline * {box-sizing: border-box; }
.timeline *:before {box-sizing: border-box; }
.timeline { position: relative; font-size: 1.2em; width: 100%; height: 100%; margin:50px auto; overflow-y: hidden; overflow-x: hidden;}
.timeline .timeline-block {margin-top:-4px;}
.timeline .timeline-icon {position:absolute; width: 12px; height: 12px; left: 50%; margin-left: -6px; margin-top:4px; border: 3px solid #4e9cdd; border-radius: 100%; background-color: #fff; text-align: center; }
.timeline .timeline-icon.timeline-icon-hide-border { border: 0; }
.timeline .timeline-icon.timeline-icon-hide-border i.fa, .timeline .timeline-icon.timeline-icon-hide-border img { margin-left: 0; margin-top: 0;}
.timeline .timeline-icon i.fa, .timeline .timeline-icon img { display: inline-block; width: 32px; height: 32px; margin-left: -4px; margin-top: -4px; vertical-align: bottom; line-height: 32px; text-align: center; font-size: 30px; }
.timeline .timeline-icon img { border-radius: 100%; }
.timeline .timeline-content { position: relative; width: 46%; padding-bottom:50px; line-height: 40px;}
.timeline .timeline-content .bar_count { font-size:2em; font-family: 'Black Han Sans', sans-serif;font-weight:600;color: #ff6600; margin-bottom:10px;}
.timeline .timeline-content ul li {font-size: 1.3em;}
.timeline .timeline-content ul li img{width:100%; height:100px; margin-top:20px; background:red;}
.timeline::before { position: absolute; width: 1px; height: 100%; top:0px; left: 50%; margin-left: -1px; background-color: #eee; content: ""; }/* Half of width */
.timeline.timeline-alternating .timeline-block:nth-of-type(2n+1) .timeline-content{text-align:right}
.timeline.timeline-alternating:not(.timeline-left) .timeline-block:nth-of-type(2n) .timeline-content { left: 54%; }
.timeline.timeline-alternating:not(.timeline-left) .timeline-block:nth-of-type(2n) .timeline-date { left: auto;  right: 115%; margin-left: -400px; }

.gb{font-weight: 600; color:#009C1B;}
table.wide_01{width:100%; border-collapse:collapse; border-spacing:0; text-align:center;}
table.wide_01 thead{}
table.wide_01 thead tr{}
table.wide_01 thead tr th{padding:10px 0; font-weight:bold; border-top:2px solid #777; border-bottom:2px solid #777; border-right:1px solid #777; font-size:1em;color:#000;}
table.wide_01 thead tr th:last-child{border-right:0;}
table.wide_01 tbody{}
table.wide_01 tbody tr{}
table.wide_01 tbody tr td{padding:10px 0; border-right:1px solid #777;font-size:1em; border-bottom:1px solid #ddd; color:#000;}
table.wide_01 tbody tr td:last-child{border-right:0;}
table.wide_01 tbody tr:last-child td{border-bottom:2px solid #777;}

table.wide_02{width:100%; border-collapse:collapse; border-spacing:0; text-align:center;margin-top:20px;margin-bottom:50px;}

table.wide_02 tbody{}
table.wide_02 tbody tr{}
table.wide_02 tbody tr td{padding:10px 0; border-right:1px solid #777;font-size:1em; border-bottom:1px solid #777;border-top:1px solid #777; color:#000;}
table.wide_02 tbody tr td:last-child{border-right:0;}
table.wide_02 tbody tr:last-child td{border-bottom:1px solid #777;}

table.wide_01.w_02{text-align:left;}
table.wide_01.w_02 thead{text-align:center;}
table.wide_01.w_02 thead tr th:last-child{width:15%;}
table.wide_01.w_02 tbody tr td{padding-left:10px; padding-right:10px; word-break:keep-all;}
table.wide_01.w_02 tbody tr td:last-child{width:15%;}
table.wide_01.w_02 tbody tr td b{color:#cd2827;}
table.wide_01.w_02 tbody tr td b span{font-weight:normal;}


	.fc_pointer {color:#BC0000; }
	.content_wrap{width:100%; min-width:320px; max-width:1200px; margin:0 auto;}
	.page_title{width:100%; margin-bottom:70px;}
	.page_title h1{width:100%; margin:0 auto; text-align:center; font-size:2.5em; font-weight:600;}
	.page_title h1:after {content:""; clear:both; display:block; width:30px; margin:10px auto; border:1px solid #000;}
	.page_title h2{width:100%; margin:0 auto; text-align:center; font-size:1.2em; color:#666; margin-top:20px; }

	.vision_type5 {width:100%; min-width:320px; max-width:1200px; margin:0 auto; }
	.vision_type5:after {display:block; visibility:hidden; clear:both; content:""}
	.vision_type5 .vision_area {width:100%; margin-bottom:80px; }
	.vision_type5 .vision_area h2.title {position:relative; font-size:1.8em; color:#000; padding-left:18px; margin-bottom:20px; }
.vision_type5 .vision_area h2.title:before{position:absolute; top:20px; left:0; display:inline-block; content:""; width:8px; height:8px; border:4px solid #1F88E5; background:#fff; }
	.vision_type5 .vision_area ul {margin:0; padding:0; }
	.vision_type5 .vision_area ul li {clear:both; display:table; padding:0; margin:0; width:100%; border:1px solid #ddd; background-color:#fafafa; overflow:hidden;}
	.vision_type5 .vision_area ul li .i_box {display:table-cell; width:30%; vertical-align:middle; }
	.vision_type5 .vision_area:nth-child(1) ul li .i_box {background:#005bab;}
	.vision_type5 .vision_area:nth-child(2) ul li .i_box {background:#36b1d4;}
	.vision_type5 .vision_area:nth-child(3) ul li .i_box {background:#f48025;}
	.vision_type5 .vision_area ul li .i_box .icon {display:block; position:relative; left:0; top:25%; width:100%; text-align:center; }
	.vision_type5 .vision_area ul li .i_box .icon i {display:block; font-size:5em; color:#fff; }
	.vision_type5 .vision_area ul li .i_box .icon em {display:block; font-size:1.2em; color:#fff; font-style:normal; margin-top:20px;}
	.vision_type5 .vision_area ul li .con_txt {display:table-cell; width:70%; height:240px; padding:30px 40px;}
	.vision_type5 .vision_area ul li .con_txt span {display:block; font-size:1.2em; color:#333; text-align:left; line-height:1.5em; word-break:keep-all; margin-top:40px; }

	.vision_type5 .vision_area dl {width:95%; margin:20px auto; }
	.vision_type5 .vision_area dl dd { position:relative; font-size:1.2em; color:#777; padding-left:15px; margin-bottom:15px; }
	.vision_type5 .vision_area dl dd:before{ content: ""; position:absolute; top:10px; left:0;  width:4px; height:4px; background:#333;}

	.s_tit {width:100%; height:30px; line-height:30px; text-align:left; border-left:5px solid #000; margin:50px auto;  margin-bottom:10px;  font-size:1.5em;  text-indent:10;}

	@media screen and (max-width:768px){
		
		.content_wrap{width:96%;}
		.page_title{margin-bottom:50px;}	
		.page_title h1{font-size:2em;}
		.page_title h2{font-size:1em;}
		.s_tit{font-size:1.2em;}

		.vision_type5 .vision_area h2.title { font-size:1.5em; }
		.vision_type5 .vision_area span.stitle{font-size:1em; width:90%;}
		.vision_type5 .vision_area ul li {width:100%;}
		.vision_type5 .vision_area ul li .i_box{ display:block; width:100%; padding:50px 0; }
		.vision_type5 .vision_area ul li .con_txt{display:block; width:100%; height:auto; padding:30px 0; margin:0;}
		.vision_type5 .vision_area ul li .con_txt span { padding:0 30px; }


	}
	/*오시는길*/

.map_wrap{ width:100%; max-width:1200px; margin:0 auto; margin-bottom:0px;}
.map_wrap .map_info {width:100%; margin-top:40px;}
.map_wrap .map_info .con_box {margin-bottom:30px;}
.map_wrap .map_info .con_box>h2 {font-size:1.5em; color:#000;  margin-bottom:10px;}
.map_wrap .map_info table {width:100%; border-top:1px solid #000;}
.map_wrap .map_info table th {padding:0; margin:0; width:20%; text-align:center; font-size:1em; color:#000; vertical-align:middle; font-weight:normal; /*background:url('/html/image/arr1.gif')no-repeat 95% 40%; */ background:#f5f5f5; border-bottom:1px solid #EEE;}
.map_wrap .map_info table td {width:80%; text-align:left; font-size:1em; color:#888; vertical-align:top;  padding:10px 0 10px 15px; border-bottom:1px solid #EEE;}
.map_wrap .map_info table td > a {color:#666;}
.map_wrap .map_info table td > a:hover {color:#000;}

h3.s_tit11{position:relative; font-size:1.3em; color:#000;  padding-left:30px; margin-bottom:20px; }
h3.s_tit11:before{position:absolute; top:5px; left:0; display:inline-block; content:""; width:20px; height:20px; border:5px solid #100279; border-radius:50%; }


	/*자활사업단 소개*/
.selfsupportWrap{}
.selfsupportWrap section{
    position: relative;
    font-size: 16px; color: #777;
    margin:15px 0 50px;}
.selfsupportWrap section h3{    
    position: relative;
    font-size: 30px; color: #000;
    margin-bottom: 20px;}
.selfsupportWrap section h3:before{
    display: inline-block; content: "";
    width:8px; height:8px; vertical-align: middle;
    margin:0 10px 0 0;
    background: #1F88E5;}
.selfsupportWrap section dl{}
.selfsupportWrap section dl dd{
    position: relative;
    font-size: 16px; color: #777;
    margin-bottom: 15px;}
.selfsupportWrap section dl dd:before{
    display: inline-block; content: "";
    width:4px; height:4px; vertical-align: middle;
    margin:0 10px 0 5px;
    background: #333;}
.selfsupportWrap section table{
    width:100%;
    border-spacing: 4px;
    margin:0 0 10px;}
.selfsupportWrap section table th, .selfsupportWrap section table td{
    font-size: 16px; text-align: center;
    padding:8px 5px;}
.selfsupportWrap section table th{
    color: #fff; font-weight: normal;background: #005bab;}
.selfsupportWrap section table td.name{
    width:20%;
    color: #005bab;
    background:#9ad0ff; }
.selfsupportWrap section table td{
    background: #fafafa;}
.selfsupportWrap section .gallery{
    display: flex; flex-wrap: wrap;
    justify-content:space-between;}
.selfsupportWrap section .gallery img{
    width:24%; height: auto;}
@media screen and (max-width:768px){
.selfsupportWrap{}
.selfsupportWrap section{
    position: relative;
    font-size: 16px; color: #777;
    margin:15px 0 50px;}
.selfsupportWrap section h3{    
    position: relative;
    font-size:25px; color: #000;
    margin-bottom:15px;}
.selfsupportWrap section h3:before{
    display: inline-block; content: "";
    width:8px; height:8px; vertical-align: middle;
    margin:0 10px 0 0;
    background: #1F88E5;}
.selfsupportWrap section dl{}
.selfsupportWrap section dl dd{
    position: relative;
    font-size: 16px; color: #777;
    margin-bottom: 15px;}
.selfsupportWrap section dl dd:before{
    display: inline-block; content: "";
    width:4px; height:4px; vertical-align: middle;
    margin:0 10px 0 5px;
    background: #333;}
.selfsupportWrap section .gallery{
    display: flex; flex-wrap: wrap;
    justify-content:space-between;}
.selfsupportWrap section .gallery img{
    width:100%; height: auto;
    margin-bottom:10px;}
}




	/*자활사례관리*/

.sub4cont section{
    position: relative;
    font-size: 16px; color: #777; font-weight:normal;
    margin-bottom:20px;}
.sub4cont h3{
    width: 100%; height:auto;
    font-size: 20px;  text-align: left; line-height: 30px;
    margin: 50px auto 10px;}
.sub4cont h3:before{
    display: inline-block; content: "";
    width:5px; height:20px; vertical-align: middle; 
    margin:0 10px 0 0;
    background: #000;}
.selfSpt01{
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    margin:20px auto;}
.selfSpt01 dd{
    width:17%; height: auto;
    font-size:13px; text-align: center;}
.selfSpt01 dd:nth-child(1){color: #146e77;}
.selfSpt01 dd:nth-child(2){color: #423a85;}
.selfSpt01 dd:nth-child(3){color: #a7460f;}
.selfSpt01 dd:nth-child(4){color: #cc4651;}
.selfSpt01 dd:nth-child(5){color: #124c21;}
.selfSpt01 dd img{
    display: block;
    width:100%; height:auto;
    margin:5px 0 0;}
.sub4cont section table{
    width:100%;
    border-spacing: 4px;}
.sub4cont section table th, .sub4cont section table td{
    font-size: 16px; text-align: center;
    padding:8px 5px;}
.sub4cont section table th{
    color: #fff;}
.sub4cont section table td span{
    display: block;
    font-size:12px;}
.sub4cont section table td img{
    display: inline-block;
    width:50px; height: auto;
    margin-right:10px;}
.sub4cont section table tr th:nth-child(1){background: #e8a040;}
.sub4cont section table tr th:nth-child(2){background: #14317f;}
.sub4cont section table tr th:nth-child(3){background: #025684;}
.sub4cont section table tr td:nth-child(1){background: #f0e1c4;}
.sub4cont section table tr td:nth-child(2){background: #b8c2dd;}
.sub4cont section table tr td:nth-child(3){background: #b6d9e0;}
b.card01{color: #146e77;}
b.card02{color: #423a85;}
b.card03{color: #a7460f;}
b.card04{color: #cc4651;}
b.card05{color: #124c21;}

.selfSpt02{
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    margin:20px auto;}
.selfSpt02 dd{
    display: block;
    width:22%; height: auto;
    font-size:15px; text-align: center; color: #777;
    padding:10px;
    border: 3px solid #eeeeee;}
.selfSpt02 dd b{color: #000;}
.selfSpt02 dd:before{
    display:inline-block;
    width:16px; height:16px;
    font-size:12px; font-weight: bold; color: #fff; line-height:16px; text-align: center; vertical-align: middle;
    background: #474746;
    margin-right: 5px;}
.selfSpt02 dd:nth-child(1):before{content: "1"}
.selfSpt02 dd:nth-child(2):before{content: "2"}
.selfSpt02 dd:nth-child(3):before{content: "3"}
.selfSpt02 dd:nth-child(4):before{content: "4"}
.selfSpt02 dd span{
    display: block;
    font-size: 12px; line-height:16px;}
.selfSpt02 dd span:before{
    display:inline-block; content: "*";
    font-size:10px; line-height:16px; vertical-align: middle;
    margin-right: 5px;}
.selfSpt03{
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    margin:20px auto;}
.selfSpt03 dd{
    width:25%; height: auto;
    font-size:16px; text-align: center;}
.selfSpt03 dd img{
    display: block;
    width:100%; height:auto;
    margin:0 0 5px;}
@media screen and (max-width:768px){
.sub4cont section{
    position: relative;
    font-size: 16px; color: #777; font-weight:normal;
    margin-bottom:20px;}
.sub4cont h3{
    font-size:18px; 
    margin: 50px auto 10px; }
.selfSpt01{
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    margin:20px auto;}
.selfSpt01 dd{
    width:45%; height: auto;
    font-size:13px; text-align: center;
    margin:0 0 10px;}
.selfSpt01 dd:after{
    display: block; content: "";
    clear: both;}
.selfSpt01 dd img{
    display: block;
    width:90%; height:auto;
    margin:0 auto 0;}
.sub4cont section table{
    width:100%;
    border-spacing:2px;}
.sub4cont section table th, .sub4cont section table td{
    font-size: 13px; text-align: center; font-weight: normal;
    padding:5px 5px;}
.sub4cont section table th{
    color: #fff;}
.sub4cont section table td span{
    display: block;
    font-size:12px;}
.sub4cont section table td img{
    display:block;
    width:30px; height: auto;
    margin:0 auto 5px;}
.sub4cont section table tr th:nth-child(1){background: #e8a040;}
.sub4cont section table tr th:nth-child(2){background: #14317f;}
.sub4cont section table tr th:nth-child(3){background: #025684;}
.sub4cont section table tr td:nth-child(1){background: #f0e1c4;}
.sub4cont section table tr td:nth-child(2){background: #b8c2dd;}
.sub4cont section table tr td:nth-child(3){background: #b6d9e0;}
.sub4cont section table td b{font-weight: normal;}
.selfSpt02{
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    margin:20px auto;}
.selfSpt02 dd{
    display: block;
    width:100%; height: auto;
    font-size:14px; text-align:left; color: #777;
    padding:5px;
    margin:0 0 10px;}
.selfSpt02 dd b{color: #000;}
.selfSpt02 dd:before{
    display:inline-block;
    width:16px; height:16px;
    font-size:12px; font-weight: bold; color: #fff; line-height:16px; text-align: center; vertical-align: middle; font-weight: normal;
    background: #474746;
    margin-right: 5px;}
.selfSpt02 dd span{
    display: block;
    font-size: 12px; line-height:16px;}
.selfSpt02 dd span:before{
    display:inline-block; content: "*";
    font-size:10px; line-height:16px; vertical-align: middle;
    margin-right: 5px;}
.selfSpt03{
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    margin:20px auto;}
.selfSpt03 dd{
    width:100%; height: auto;
    font-size:14px; text-align: center;
    margin: 0 0 10px}
.selfSpt03 dd img{
    display: block;
    width:50%; height:auto;
    margin:0 auto 5px;}
}