@charset "utf-8";

/* 서브01_인사말 */
.txt_r{ float:right; display:block; }
.sign { display:block; float:right; width: 140px; height: 30px; background: url("/_img/sub/greImg01.gif") right top no-repeat; }
.greeting { display:block; float:left; /*background: url("/_img/sub/greetings_img.jpg") left top no-repeat; padding-left:170px;*/ }


/* 서브01_센터안내 */


/* 서브01_연혁 */
.history_cont {float:left; background:url(/_img/sub/hisImg01.jpg) left bottom no-repeat;}
.history_cont .history { line-height:1.6; margin-left: 300px;}
.history_cont .history > li {position:relative;padding-left:80px;overflow:hidden; margin: 10px 0;}
.history_cont .history .year { display:block;position:absolute;left:0;top:0; width:80px;padding-top:5px;border-top:1px solid #3075d2;color:#3075d2; font-size:25px; }
.history_cont .history .details { padding:4px 0 14px 0px; font-size:14px; border-top:1px solid #d9d9d9; width: 100%;}
.history_cont .history .details > li {position:relative; padding:0px 0 0px 60px;overflow:hidden; width: 290px;}
.history_cont .history .details > li .month { display:block;position:absolute;left:0;top:0; width:60px;color:#555555;text-align:left; font-size:15px; padding-top:10px; }
.history_cont .history .details > li ul li { margin-top:0px; width: 100%; text-align:left; word-break: keep-all; padding-bottom:10px; padding-top:10px; border-bottom:1px dotted #ccc;}

/*  서브01_조직도 */
.orgbg { background: url(/_img/sub/orgImg01.gif) center no-repeat; width: 100%; height:230px; margin: 10px auto; }

/* 서브02_센터이용안내: 직업훈련 , 서브02_직업재활프로그램*/
.busbg_01 { background: url(/_img/sub/busImg01.gif) center no-repeat; width: 100%; height:120px; margin: 20px auto; }
.busbg_02 { background: url(/_img/sub/busImg02.gif) center no-repeat; width: 100%; height:730px; margin: 10px 0 50px 0; }
.busbg_03 { background: url(/_img/sub/busImg03.gif) center no-repeat; width: 100%; height:420px; margin: 30px 0; }
.justify_btw { width: 750px; height: auto; display: flex; justify-content: space-between; margin-bottom: 7px; }
.justify_btw>img {float:inherit; width: 370px; height: 200px; border: 1px solid #cccccc; }

/* 서브03_생산품이용 */
.produal { float:left; width: 165px; height:260px; text-align:center; margin:5px 10px; }
.produal2 { float:left; width: 335px; height:260px; text-align:center; margin:5px 10px; }
.protitle { line-height: 200%; text-align: center; font-size: 17px; color: #005baa; font-weight:bold; }
.protitle span { line-height: 200%; text-align: center; font-size: 15px; color: #005baa; font-weight:normal; }
.protext { line-height: 125%; text-align: center; font-size: 14px; color: #444444; }
.pro1img1 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo01.jpg") center no-repeat; }
.pro1img2 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo02.jpg") center no-repeat; }
.pro1img3 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo03.jpg") center no-repeat; }
.pro1img4 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo04.jpg") center no-repeat; }
.pro1img5 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo05.jpg") center no-repeat; }
.pro1img6 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo06.jpg") center no-repeat; }
.pro1img7 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo07.jpg") center no-repeat; }
.pro1img8 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo08.jpg") center no-repeat; }
.pro1img9 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo09.jpg") center no-repeat; }
.pro1img10 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo10.jpg") center no-repeat; }
.pro1img11 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo11.jpg") center no-repeat; }
.pro1img12 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo12.jpg") center no-repeat; }
.pro1img13 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo13.jpg") center no-repeat; }
.pro1img14 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo14.jpg") center no-repeat; }
.pro1img15 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo15.jpg") center no-repeat; }


.pro2img1 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo01.jpg") center no-repeat; }
.pro2img2 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo02.jpg") center no-repeat; }
.pro2img3 { width: 320px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo03.jpg") center no-repeat; }
.pro2img4 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo04.jpg") center no-repeat; }
.pro2img5 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo05.jpg") center no-repeat; }
.pro2img6 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo06.jpg") center no-repeat; }
.pro2img7 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo07.jpg") center no-repeat; }
.pro2img8 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro1_photo08.jpg") center no-repeat; }

/* pro2 제품사진이 나오면 아래 코드로 변경
.pro2img1 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo01.jpg") center no-repeat; }
.pro2img2 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo02.jpg") center no-repeat; }
.pro2img3 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo03.jpg") center no-repeat; }
.pro2img4 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo04.jpg") center no-repeat; }
.pro2img5 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo05.jpg") center no-repeat; }
.pro2img6 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo06.jpg") center no-repeat; }
.pro2img7 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo07.jpg") center no-repeat; }
.pro2img8 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/pro2_photo08.jpg") center no-repeat; } */

.procdual { float:left; width: 155px; height:190px; text-align:center; margin:5px; }
.proctitle {margin-left:10px; line-height: 200%; text-align: center; font-size: 17px; color: #444444; font-weight:bold; }
.markright { display:table-cell; float:inherit; text-align:center; vertical-align: middle; padding:20px 0 0 4px; width:23px; height:190px; font-size: 80px; color: #ea547d; font-weight: bold; line-height: 130%; }
.proc1img1 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/sys1_photo01.jpg") center no-repeat; }
.proc1img2 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/sys1_photo02.jpg") center no-repeat; }
.proc1img3 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/sys1_photo03.jpg") center no-repeat; }
.proc1img4 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/sys1_photo04.jpg") center no-repeat; }
.proc2img1 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/sys2_photo01.jpg") center no-repeat; }
.proc2img2 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/sys2_photo02.jpg") center no-repeat; }
.proc2img3 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/sys2_photo03.jpg") center no-repeat; }
.proc2img4 { width: 155px; height: 155px; margin:0 auto; border: 4px solid #eee; border-radius:20px; background: url("/_img/product/sys2_photo04.jpg") center no-repeat; }

/* 서브04_자원봉사안내 */
.bgboxbg2 { float:left; width:95%; margin:0px; border: 4px solid #f9d4de; padding: 15px; line-height: 150%; background: url("/_img/sub/volImg01.gif") bottom right no-repeat;  }
.bgbox3 { float:left; width:100%; height:180px; border: 4px solid #d0e6ff; padding: 15px; line-height: 150%; }
.bgbox4 { float:left; width:100%; height:180px; border: 4px solid #d0e6ff; padding: 15px; line-height: 150%; }
.boxdual3 { float:left; width: 43%; margin-right: 65px; }
.boxdual4 { float:left; width: 43%; }
.conul>.lit2 { list-style-type:none; list-style-position:outside; line-height: 150%; text-align: left; font-size: 14px; color: #3c7dc5; margin-bottom: 0px; margin-left: 0px; }
.conul>.lit3 { list-style-type:square; list-style-position:outside; line-height: 200%; text-align: left; font-size: 15px; color: #444444; margin-bottom: 0px; margin-left: 0px; }
.conul>.lit4 { list-style-type:none; list-style-position:outside; line-height: 150%; text-align: left; font-size: 17px; font-weight:bold; color: #005baa; margin-bottom: 5px; margin-left: 0px; }
.conul>.li { list-style-type:none; list-style-position:outside; line-height: 150%; text-align: left; font-size: 14px; color: #444; margin-bottom: 0px; margin-left: 0px; }

.conul>.lit5 { list-style-type:square; list-style-position:outside; line-height: 150%; text-align: left; font-size: 16px; color: #005baa; font-weight:bold; margin-bottom: 0px; }
.conul>.lit5 span { list-style-type:none; list-style-position:outside; line-height: 170%; text-align: left; font-size: 15px; margin-bottom: 15px; font-weight:normal; color:#333; }


/* 서브04_자원봉사안내 20190618_추가 */


.vol_bg1 {background: url(/_img/sub/vol0101.gif) center no-repeat; margin: 0 auto; width: 100%; height: 80px; padding-bottom:30px;}

.bgbox5 { border: 4px solid #d0e6ff; padding: 15px; line-height: 180%;overflow:hidden;}
.bgbox5:before,.bgbox5:after{display:block;content:'';clear:both;float:none;}
.bgbox5 .title1 {float:left; width:95px; font-size: 15px; font-weight: bold; margin-left: 5px; color: #005baa; margin-right: 30px;display:inline-block;  position:relative; padding-left:10px;}
.bgbox5 .title1:before {content:'';width:5px;height:5px; background-color:#005baa;display:inline-block;   position:absolute; top:50%; left:0; margin-top:-3px}
.bgbox5 .box_ul1 { float:left; background-color: #fff; width: 540px; padding: 0px 15px 0px 10px; box-shadow: none; text-align: left; font-size: 15px; list-style-type:disc; list-style-position: outside; }
.bgbox5 .box_ul1 li { float:left;color: #7db4f0; text-align: left; width:100%; margin-bottom: 5px; padding-top:0px; word-break: break-all;}
.bgbox5 .box_ul1 li span { color: #444;}

.bgbox6 { border: 4px solid #f9d4de; padding: 15px; line-height: 180%;overflow:hidden;}
.bgbox6:before,.bgbox5:after{display:block;content:'';clear:both;float:none;}
.bgbox6 .title1 {float:left; width:95px; font-size: 15px; font-weight: bold; margin-left: 5px; color: #d5387e; margin-right: 30px;display:inline-block;  position:relative; padding-left:10px;}
.bgbox6 .title1:before {content:'';width:5px;height:5px; background-color:#d5387e;display:inline-block;   position:absolute; top:50%; left:0; margin-top:-3px}
.bgbox6 .box_ul1 { float:left; background-color: #fff; width: 540px; padding: 0px 15px 0px 10px; box-shadow: none; text-align: left; font-size: 15px; list-style-type:disc; list-style-position: outside; }
.bgbox6 .box_ul1 li { float:left;color: #e294b1; text-align: left; width:100%; margin-bottom: 5px;padding-top:0px; word-break: break-all;}
.bgbox6 .box_ul1 li span { color: #444;}

.bgbox7 { border: 4px solid #a8dbdb; padding: 15px; line-height: 170%;overflow:hidden;}
.bgbox7:before,.bgbox5:after{display:block;content:'';clear:both;float:none;}
.bgbox7 .title1 {float:left; width:95px; font-size: 15px; font-weight: bold; margin-left: 5px; color: #179393; margin-right: 30px;display:inline-block;  position:relative; padding-left:10px;}
.bgbox7 .title1:before {content:'';width:5px;height:5px; background-color:#179393;display:inline-block;   position:absolute; top:50%; left:0; margin-top:-3px}
.bgbox7 .box_ul1 { float:left; background-color: #fff; width: 540px; padding: 0px 15px 0px 10px; box-shadow: none; text-align: left; font-size: 15px; list-style-type:disc; list-style-position: outside; }
.bgbox7 .box_ul1 li { float:left;color: #4ebcca; text-align: left; width:100%; margin-bottom: 5px;padding-top:5px; word-break: break-all;}
.bgbox7 .box_ul1 li span { color: #444;}