@charset "utf-8";
:root {
  --grayish-blue: #a3a5ae;
  --very-light-gray: #83A6D2;
}

/* 내용관리 */
#ctt { margin: 0; background: #F2F4F5; }
.ctt_admin {text-align:right;display: none;}
#ctt header h1 {text-align: left; font-size:1.6rem; color:#f90;}
#ctt_con { margin: auto; padding: 5rem; width: 1200px; font-size: 1rem; font-weight: 400; color: #555; background: #FFF; box-shadow: 0 5px 5px rgba(0,0,0,0.05); }
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

.miniTitle {position: relative; margin-bottom: 1rem !important; padding-left: 0.5rem; font-size: 1.2rem !important; color: black; }
.miniTitle:before { content:''; position: absolute; top: 5px; left: 0; width: 3px; height: 1.1rem; background: #67DED7; }

.boxTitle { display: inline-block; margin: 1rem 0 0.5rem 0 !important; padding: 0.2rem 1rem; min-width: 120px; font-size: 1rem !important; color: #FFF; font-weight: bold; background: #67DED7; border-radius: 0.2rem; text-align: center; }
.subboxTitle { display: inline-block; margin-top:0; padding-left: 1rem; }

.mainDanrak { position: relative; display: block; padding-left: 0.8rem; }
.mainDanrak:before { content:''; position: absolute; top: 47%; left: 0; transform: translateY(-50%); width: 5px; height: 5px; background: #868E97; }
.subDanrak { position: relative; display: block; margin-bottom: 0.6rem; padding-left: 1rem; line-height: 1.3rem; text-align: left; }
.subDanrak:before { content:''; position: absolute; top: 0.5rem; left: 0.5rem; transform: translateY(-50%); width: 3px; height: 3px; background: #DDD; }
.lineBox { display: flex; align-items: center; flex-wrap: wrap; margin: 1.5rem 0 2rem 0; padding: 2rem 1.5rem; min-height: 150px; border: 8px solid #EEE; }

.normalTable { width: 100%; border-spacing: 0; border-collapse : collapse; }
.normalTable .txtL { text-align: left !important; }
.normalTable .txtR { text-align: right !important; }
.normalTable th { background: #313B46; color: #FFF; }
.normalTable th, .normalTable td { border: 1px solid #D9DFE6; padding: 0.5rem; text-align: center; }
.normalTable th:first-child, .normalTable td:first-child{ border-left: 0 !important; }
.normalTable th:last-child, .normalTable td:last-child{ border-right: 0 !important; }

.normalTable_m { width: 100%; border-spacing: 0; border-collapse : collapse; display: none; }
.normalTable_m tbody { }
.normalTable_m .txtL { text-align: left !important; }
.normalTable_m .txtR { text-align: right !important; }
.normalTable_m th { background: #313B46; color: #FFF; }
.normalTable_m th, .normalTable_m td { display: block; width: 100%; border: 1px solid #D9DFE6; padding: 0.5rem; text-align: center; }

.nolineTable th { padding: 1.5rem; background: #1B5FE9; }
.nolineTable td { border: none !important; }
.nolineTable tr td:first-child div { position: relative; background: #E3F2FF; border: 1px solid #E3F2FF; justify-content: center; }
.nolineTable tr td:first-child div:after { content:'▼'; position: absolute; bottom: -20px; left:50%; transform: translateX(-50%); color: #1B5FE9;}
.nolineTable tr:last-child td:first-child div:after { display: none;}

mark { position: relative; display: inline-block; font-size: 1.7rem; color: black; background: none; }
mark:before { content:''; position: absolute; bottom:0; left:0; height: 50%; width: 100%; opacity: 0.2; mix-blend-mode: multiply; }
.markBlue:before { background: #54FFF9; }
.markGreen:before { background: #58FF54; }
.markYellow:before { background: yellow; }

.swipage { position:relative; width:800px; margin:0 auto }

.autoBox { display: flex; align-items: center; padding: 1rem; border: 1px solid #DDD; min-height: 240px; border-radius: 10px; }



#sub i { display: inline-block; padding-right: 5px; color: #43A3FF; }

/* 지원단소개 > 지원단소개 */
.aboutTxt { padding: 0 5rem; }
.aboutTxt span { display: block; padding-right: 5%; }
.aboutTxt span big { color: black; font-weight: bold; }
.aboutTable { margin: 0 6%; width: calc(100% - 12%); }

.aboutImg { position: relative; margin-top: 5rem; width: 100%; }
.aboutImgBox { display: flex; align-items: center; font-size: 1rem; margin: 0 6% 3rem 6%; width: calc(100% - 12%);}
.aboutImgBox div { margin: 0.5rem; width: calc(100% / 4); height: 280px; border-radius: 1rem; text-align: center; font-size: 1.1rem; color: #FFF; }
.aboutImgBox div:nth-child(1) { background: #56C800; }
.aboutImgBox div:nth-child(2) { background: #3B87FF; }
.aboutImgBox div:nth-child(3) { background: #FF720D; }
.aboutImgBox div:nth-child(4) { background: #DB33AE; }
.aboutImgBox img { display: block; margin: 3rem auto 2rem auto; width: 100px; height: 100px; border-radius: 50%; background: #FFF; }



/* 지원단소개 > 미션비전 */
.missionWrap { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 0;}
.missionWrap > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 50%; margin: auto;  }
.missionWrap p { display: inline-block; text-align: left; color: #888; }
.missionWrap big { display: inline-block; margin-top: 1rem; padding-bottom: 1rem; width: 80%; font-weight: 600; border-bottom: 1px solid #DDD; font-size: 1.2rem; word-break: break-word; }
.missionWrap big:nth-child(4) { margin-top: 1rem; }
.missionWrap > div { position: relative; margin: 1rem; padding: 2rem; width: calc((90% - 4rem)/ 2 ); height: 250px; font-size: 1rem; margin-top: 1rem; border: 3px solid #F9F9F9; background: #FFF; box-shadow: 0 5px 20px -11px var(--very-light-gray);
}
.missionWrap > div.mb { margin-top: 22rem; }
.missionWrap > div > img { position: absolute; top: 0; right: 1rem; display: block; border-radius: 50%; margin: 1rem auto; width: 100px; height: 100px; background: #E9E9E9; }
.missionWrap:nth-child(3) { }
.missionWrap > div a { display: block; height: 100%; font-size: 1.1rem; font-weight: 600; }
.missionWrap > div a:hover { background: yellow; }
.missionWrap small { display: block; }

.missionWrap h1 { position: relative; display: inline-block; margin: auto; padding: 2rem 1rem; width: 80%; height: 180px; font-size: 2rem; color:black; text-align: center; }
.missionWrap h1 img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.missionWrap h1 small { font-size: 1rem; z-index: 1;}

.missionWrap > div small { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 1rem; background: #3B87FF; color: #FFF; }

div.mission_tit{ padding: 3rem 0 5rem;}
div.mission_tit > h3{position: relative; width: fit-content; text-align: center; padding: .4rem 5rem; margin: 0 auto; border-radius: 4rem; background: #424e5c; color: #fff; }
div.mission_tit > h3::before{position: absolute; bottom:-4rem; left:50%; transform: translateX(-50%); content:""; width: 60%; height: 80%; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgb(231 231 231) 73.52%);}


/* 지원단소개 > 연혁 */
.his_wrap {position:relative;z-index:2; padding-top:80px;}
.his_wrap:after{content:"";display:block;position:absolute; left:50%; margin-left:-0.5px; width:1px;height:96%; border:1px dashed #d1d1d1; top:60px; z-index:0;}
.his_wrap .tit {position:absolute;top:-28px; left:0; line-height:1; width:100%; font-size:2.2em;text-align:center;font-weight:500}
.hiscon .hlist {text-align:center}
.hiscon .hlist .year {position:relative;display:block;line-height:1.2;font-size:1.765em;color:#1877f2;font-weight:600;letter-spacing:0;margin:0 0 20px}
.hiscon .hlist .year .dot {content:"";display:block;position:absolute;width:12px;height:12px;background:#23262D;top:50%;margin-top:-4px;border-radius:50%;z-index:1;transition:all .3s ease}
.hiscon .hlist .year .dot.over {background:#1877f2}
.hiscon .hlist .history {position:relative;padding:25px 0;border-top:1px solid #d1d1d1}
.hiscon .hlist .history li {display:block;box-sizing:border-box;position:relative;padding:0 0 0 50px;margin:0 0 13px}
.hiscon .hlist .history li:last-child {margin:0}
.hiscon .hlist .history li .day {display:block;position:absolute;top:3px;box-sizing:border-box;color:#333;letter-spacing:0;font-weight:600}
.his_wrap:last-child .hiscon .hlist:last-child {margin:0}
.his_wrap:last-child .hiscon .hlist:last-child .history:after {content:"";display:block;position:absolute;width:40px;height:170%;background:#fff;right:-51px;top:-40px}
.hiscon .hlist:nth-child(odd) li {padding:0 0 0 50px}
.hiscon .hlist:nth-child(even) li {padding:0 50px 0 0}
.hiscon .hlist:nth-child(odd) .history li .day {left:0}
.hiscon .hlist:nth-child(even) .history li .day {right:0}
.hiscon .hlist:nth-child(odd) .history li .txt {text-align:left}
.hiscon .hlist:nth-child(even) .history li .txt {text-align:right}
.hiscon .hlist:nth-child(odd) {margin:-45px 0 20px 0;padding:0 0 0 50%}
.hiscon .hlist:nth-child(odd) .year {text-align:left;padding:0 0 0 50px}
.hiscon .hlist:nth-child(odd) .year .dot {left:-26px}
.hiscon .hlist:nth-child(odd) .history {margin:0 0 0 50px}
.hiscon .hlist:nth-child(even) {margin:-45px 0 20px 0;padding:0 50% 0 0}
.hiscon .hlist:nth-child(even) .year {text-align:right;padding:0 50px 0 0}
.hiscon .hlist:nth-child(even) .year .dot {right:14px}
.hiscon .hlist:nth-child(even) .history {margin:0 50px 0 0}



/* 지원단소개 > 조직도 */
.organWrap { position: relative; }
.organWrap p { margin: 0.3rem 0; font-size: 0.9rem; }
.organWrap table th { padding: 1rem; font-size: 1.1rem; }
.organWrap table td:first-child { width: 200px; background: #BDC1CB; color: #FFF; }
.organImg { display: block; margin-bottom: 4rem; width: 100%; text-align: center; }


/* 지원단소개 > 오시는길 */
.directionMap { height: 500px; border: 1px solid #EEE; }
.directionTxt i { color: #3B87FF; font-size: 1.5rem; }
.directionTxt { margin-top: 10px; border-bottom: 1px solid #DDD; }
.directionTxt b { display: inline-block; min-width: 80px;}
.directionTxt big { display: inline-block; padding: 1rem; color: black; }
.directionTxt span { display: block; padding: 0.5rem 0; background: #BDC1CB; color: #FFF; text-align: center !important;}
.directionTxt > div { display: flex; justify-content: space-between; }
.directionTxt #car { width: 100%; }
.directionTxt #bus { text-align: left; }
.directionTxt #subway { text-align: center; border-right: 1px dotted #e8e8e8; }
.directionTxt #bus, #subway { width: 50%; }
.directionTxt > div > div p { padding: 1rem; }

/* 사업현황 > 링크페이지 */
#busiMap { display: flex; flex-wrap: wrap; }
#busiMap > a p { text-align: center; font-size: 1.5rem; }
#busiMap > a { position: relative; display: block; margin: 0.5rem; width: calc(100% / 2 - 1rem); height: 400px; border-radius: 10px; overflow: hidden; }

#busiMap > a p { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); padding: 0.5rem 1.5rem; border-radius: 5rem; background: #FFF; z-index: 1; }
#busiMap > a:nth-child(1) { background: #F7FFE8; }
#busiMap > a:nth-child(2) { background: #E8F4FF; }
#busiMap > a:nth-child(3) { background: #FFE8E8; }
#busiMap > a:nth-child(4) { background: #FEFFEF; }
#busiMap > a > img { position: absolute; bottom: 0%; left: 50%; transform: translateX(-50%); display: inline-block; }

/* 사업안내 > 사회서비스란 */
.businessServiceTxt { text-align: center; }
.businessServiceTxt .lineBox { text-align: left; }
.businessServiceTxt span { display: inline-block; margin-top: 2rem; font-size: 1.2rem; }
.businessServiceTxt img { display: inline-block; margin: 2rem auto; }


/* 사업안내 > 청년신체,마음 */
.youth_01 > div { margin-bottom: 2rem; }
.youth_01 > div p { display: block; margin-bottom: 0.5rem !important; }
.youth_01 table td:nth-child(2){ padding-left: 1.5rem; text-align: left; }

.youth_02 > div { margin-bottom: 2rem; }
.youth_02 > div p { display: block; margin-bottom: 0.5rem !important; }
.youth_02 table { overflow: auto; }
.youth_02 table td:nth-child(2){ padding-left: 1.5rem; text-align: left; }
.youth_02 img { display: block; margin: 0 auto 3rem auto; }


/* 사업안내 > 전자바우처란 */
.voucherTxt > div { text-align: center; }
.voucherTxt span { display: inline-block; margin-top: 2rem; width: 100%; font-size: 1.2rem; }
.voucherTxt img { display: inline-block; margin: 2rem 0 4rem 0; width: 570px; height: 360px !important; }
.voucherTxt .boxTitle {   }


/* 사업안내 > 지역자율형사회서비스 투자사업이란 */
.investmentWrap { position: relative; }
.investmentTxt a { position: relative; margin: 0 0 0.7rem 1rem; padding: 0.5rem 1.5rem; border-radius: 5rem; color: #FFF; border: 1px solid red; background: red; width: 100%; height: 100%; }
.investmentTxt .miniTitle { display: inline-block; margin: 2rem 0; }
.youthBtn { text-align: center; height: 50px; }
.youthBtn a { background: #F75100; border: 1px solid #F75100;  }
.ctt_investment ul { width: 20%; }

#investmentTab { }
#investmentTab ul { position: relative; display: flex; justify-content: space-between; margin: auto; width: 90%; }
#investmentTab ul li { position: relative; margin: 0 0.5rem 4rem 0.5rem; width: calc(100%/3);  text-align: center;  }
#investmentTab ul li:hover { transform: translateY(-3px); transition: all 0.3s; }
#investmentTab ul li:hover img { opacity: 100%; }
#investmentTab ul li a { }
#investmentTab ul li img { overflow: hidden; display: block; margin: auto; opacity: 30%; }
#investmentTab ul span { display: block; padding-top: 0.4rem; height: 40px; color: #FFF; line-height: 40px; }

#investmentTab ul li:nth-child(1) { border: 2px solid #56C800; }
#investmentTab ul li:nth-child(2) { border: 2px solid #3B87FF; }
#investmentTab ul li:nth-child(3) { border: 2px solid  #FF720D; }
#investmentTab ul li:nth-child(1) span { background: #56C800; }
#investmentTab ul li:nth-child(2) span { background: #3B87FF; }
#investmentTab ul li:nth-child(3) span { background: #FF720D; }

#investmentTab .investmentActive { font-weight: bold; font-size: 1.1rem; color: black; }
#investmentTab .investmentActive img { opacity: 100%; }

#investmentTab ul { width: 100%;  }
#investmentTab ul:after { display: none; }

#investmentTab ul li:after { display: none; }
#investmentTab ul li img { width: inherit; height: inherit; }
#investmentTab ul span {  font-size: 1rem; line-height: 30px; }

.investIntro { text-align: center; }
.investIntro span { display: inline-block; margin-top: 2rem; width: 90%; font-size: 1.2rem; }

.investmentList { margin-top: 3rem; display: none; }
.investmentList .lineBox { text-align: center; font-size: 1.1rem; }
.investmentList .lineBox p { display: block; margin: 0; width: calc(100% / 3); text-align: center; border: 1px solid #FFF; background: #EFF1F3;}
.investmentList .lineBox p:first-child { display: block; margin-bottom: 2rem; width: 100%; font-size: 1.4rem; text-align: center; background: none; }
.investmentList .lineBox b { display: inline-block; margin-right: 1rem; padding: 0.5rem 0; min-width: 140px; font-size: 1rem; text-align: center; }
.investmentList i { border: 2px solid #547d9d; margin-right: 10px; padding: 0.5rem; border-radius: 50%; background: #304D64; color: #FFF; }

.investmentImg { text-align: center; }

.columnBox { display: flex; justify-content:space-between; }
.columnBox big { font-size: 1.1rem; font-weight: bold; color: #313B46; }
.columnBox > div { margin: 2px; padding: 1.5rem 1rem; background: #FAFAFA; }
.columnBox > div:nth-child(1) { width: 15%; }
.columnBox > div:nth-child(2) { width: 85%; }
.columnBox > div p { margin: 0.5rem; padding: 1.5em; border: 1px solid #EFF1F3; background: #FFF; }
.columnBox .txtBg { display: inline-block; margin-bottom: 0.5rem; padding: 0.3rem 1rem; background: #313B46; color: #FFF; }
.columnBoxBg { margin: 2px; padding: 1.5rem 2rem; background: #FAFAFA; }
.columnBoxBg b { display: inline-block; margin-bottom: 0.5rem; font-size: 1.2rem; color: black; }
.columnBoxBg .miniTitle { margin-top: 0.5rem; padding-right: 1rem; }

.infoStep { display: flex; justify-content:space-between; margin: auto; width: 70%; }
.infoStep p { position: relative; display: inline-block; width: 150px; height: 150px; background: url('/theme/ssdj/img/img_step.png') no-repeat bottom / cover; }
.infoStep p:last-child { background: url('/theme/ssdj/img/img_step_last.png') no-repeat bottom / cover; }
.infoStep p span{ position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; }


/* 관련사이트 */
.mainSite { display: flex; flex-wrap: wrap; }
.mainSite > a { display: inline-block; padding: 0.5rem; width: calc(100% / 3); text-align: center; }
.mainSite > a div { display: inline-block; margin-bottom: 1rem; width: 100%; height: 200px; border-radius: 0.5rem; box-shadow:  0 0 7px rgba(1,1,1,0.1);}

.subSite { display: flex; flex-wrap: wrap; }
.subSite p { margin-top: 0; }
.subSite > a { display: inline-block; padding: 0.5rem; width: calc(100% / 4); text-align: center; font-size: 0.9rem; letter-spacing: -0.05rem; }
.subSite > a div { display: inline-block; margin-bottom: 1rem; width: 100%; height: 80px; border-radius: 0.5rem; box-shadow:  0 0 7px rgba(1,1,1,0.1);}

.subMini { display: inline-block; margin-top: 4rem; }



/* -----------------------------통계 */
/* 대전기본통계 */
.dj_stats_01 { display: flex; align-items: center; flex-wrap: wrap; margin-top: 5rem; font-size: 0;}
.dj_stats_01 > div { display: inline-block; margin: 0.1rem; width: calc((100% - 1rem)/ 5 ); height: 200px; font-size: 1rem; margin-top: 0.1rem; background: #F9F9F9; text-align: center; }
.dj_stats_01 > div a { display: block; height: 100%; font-size: 1.1rem; font-weight: 600; }
.dj_stats_01 > div a:hover { background: yellow; }
.dj_stats_01 > div a img { display: block; margin: 0 auto 0.5rem auto; width: 120px; height: 120px; }
.dj_stats_01 > div small { display: block; }

/* 전국사회보장통계 */
.dj_stats_02 { display: flex; align-items: center; flex-wrap: wrap; margin-top: 5rem; font-size: 0;}
.dj_stats_02 > div { display: inline-block; margin: 0.5rem; width: calc((100% - 4rem)/ 4 ); height: 400px; font-size: 1rem; margin-top: 1rem; background: #FFF; text-align: center; }
.dj_stats_02 > div a { position: relative; display: block; height: 100%; font-size: 1.1rem; font-weight: 600; border: 1px solid #DDD; }
.dj_stats_02 > div:nth-child(1) a:hover { background: #CFFFF2; }
.dj_stats_02 > div:nth-child(2) a:hover { background: #FFFBC4; }
.dj_stats_02 > div:nth-child(3) a:hover { background: #A2E4FF; }
.dj_stats_02 > div:nth-child(4) a:hover { background: #FFD6C1; }
.dj_stats_02 > div a:hover big{ border-bottom: 1px solid #FFF; }

.dj_stats_02 > div a big { display: inline-block; margin: 1rem 0; padding: 0.5rem 0; border-bottom: 1px solid #DDD; font-size: 2rem; }
.dj_stats_02 > div a img { position: absolute; top:0; left: 50%; transform: translateX(-50%); display: block; margin: 0 auto 0.5rem auto; width: 100%; height: 100%; }

/* 이용자 모니터링 */
.monitor_new { padding: 4rem 8rem; margin: auto; background:#F9F9F9;}
.monitor_new h4 { margin-bottom: 0; font-size: 1.5rem; font-weight: 600; color: #304D64; }
.monitor_new h5 { position: relative; margin-bottom: 0.5rem; padding-left: 1rem; font-size: 1.2rem; font-weight: 600; color: #0080FA; }
.monitor_new h5:before { content:'';  position: absolute; top:50%; left:-5px; transform: translateY(-50%); width: 15px; height: 15px; border: 3px solid #0080FA; border-radius: 50%;  }
.monitor_new h5:after { content:'';  position: absolute; top: 10px; left:-5px; transform: translateY(-50%); width: 2px; height: 2px; border: 5px solid #74FFEB; border-radius: 50%; mix-blend-mode: multiply; }
.monitor_new div { margin: auto; }
.monitor_new div img { display: block; margin: auto; }
.monitor_new table { margin: auto; width: 785px; border-spacing: 0; border-collapse : collapse; background: #FFF;}
.monitor_new table th { padding: 0.5rem; background: #0080FA; color: #FFF; }
.monitor_new table td { padding: 0.5rem; }
.monitor_new table tr > td:first-child { background: #F2F2F2; }
.monitor_new table .imp { background: #FFF !important; }

/* 제공기관 공급현황 > 링크페이지 */
#areaMap { position: relative; display: flex; justify-content: center; align-items: center; padding: 2rem; background: #55C1FF; }
#areaMap > span { position: absolute; display: inline-block; font-size: 1.2rem; font-weight: 600; }
#areaMap #locationCount_1 { top: 60%; right: 32%; transform: translate(-50%, -50%);}/* 동구 */
#areaMap #locationCount_2 { top: 68%; right: 46%; transform: translate(-50%, -50%);}/* 중구 */
#areaMap #locationCount_3 { top: 62%; left: 38.5%; transform: translate(-50%, -50%);}/* 서구 */
#areaMap #locationCount_4 { top: 40%; left: 34%; transform: translate(-50%, -50%); }/* 유성구 */
#areaMap #locationCount_5 { top: 37%; right: 41.5%; transform: translate(-50%, -50%);}/* 대덕구 */

/* 제공기관 공급현황 */
.condition { }
.condition { padding: 4rem 8rem; margin: auto; }
.condition h4 { margin-bottom: 0; font-size: 1.5rem; font-weight: 600; color: #304D64; }
.condition h5 { position: relative; margin-bottom: 0.5rem; padding-left: 1rem; font-size: 1.2rem; font-weight: 600; color: #0080FA; }
.condition h5:before { content:''; position: absolute; top:50%; left:-5px; transform: translateY(-50%); width: 15px; height: 15px; border: 3px solid #0080FA; border-radius: 50%;  }
.condition h5:after { content:''; position: absolute; top: 10px; left:-5px; transform: translateY(-50%); width: 2px; height: 2px; border: 5px solid #74FFEB; border-radius: 50%; mix-blend-mode: multiply; }
.condition div { margin: auto; }
.condition div img { display: block; margin: auto; }
.condition table { margin: auto; width: 785px; }
.condition table th { padding: 0.5rem; background: #0080FA; color: #FFF; }

/* 사회서비스 인식도 */
.service_new { padding: 4rem 8rem; margin: auto; background:#F9F9F9;}
.service_new h4 { margin-bottom: 0; font-size: 1.5rem; font-weight: 600; color: #304D64; }
.service_new h5 { position: relative; margin-bottom: 0.5rem; padding-left: 1rem; font-size: 1.2rem; font-weight: 600; color: #0080FA; }
.service_new h5:before { content:'';  position: absolute; top:50%; left:-5px; transform: translateY(-50%); width: 15px; height: 15px; border: 3px solid #0080FA; border-radius: 50%;  }
.service_new h5:after { content:'';  position: absolute; top: 10px; left:-5px; transform: translateY(-50%); width: 2px; height: 2px; border: 5px solid #74FFEB; border-radius: 50%; mix-blend-mode: multiply; }
.service_new div { margin: auto; }
.service_new div img { display: block; margin: auto; }
.service_new table { margin: auto; width: 785px; }
.service_new table th { padding: 0.5rem; background: #0080FA; color: #FFF; }

/* 제공인력 모니터링 결과 */
.search { padding: 4rem 8rem; margin: auto; background:#F9F9F9;}
.search h4 { margin-bottom: 0; font-size: 1.5rem; font-weight: 600; color: #304D64; }
.search h5 { position: relative; margin-bottom: 0.5rem; padding-left: 1rem; font-size: 1.2rem; font-weight: 600; color: #0080FA; }
.search h5:before { content:'';  position: absolute; top:50%; left:-5px; transform: translateY(-50%); width: 15px; height: 15px; border: 3px solid #0080FA; border-radius: 50%;  }
.search h5:after { content:'';  position: absolute; top: 10px; left:-5px; transform: translateY(-50%); width: 2px; height: 2px; border: 5px solid #74FFEB; border-radius: 50%; mix-blend-mode: multiply; }
.search div { margin: auto; }
.search div img { display: block; margin: auto; }
.search table { margin: auto; width: 785px; border-spacing: 0; border-collapse : collapse; }
.search table th { padding: 0.5rem; background: #0080FA; color: #FFF; }
.search table tr > td:first-child { background: #F2F2F2; }
.search table .imp { background: #FFF !important; }

/* 클린센터 동영상 시작 */
.videoWrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.videoTxt { width: calc(100% - 40%); }
.videoBox { width: calc(100% - 60%); border: 3px solid #f9f9f9; font-size: 0; }
.videoBox video { width: 100%; }

@media (max-width: 500px) {
.videoWrap { margin-bottom: 2rem;}
.videoTxt { width: 100%; }
.videoBox { width: 100%; }
}
/* 클린센터 동영상 끝 */

@media (max-width: 1200px) {
	#ctt_con { width: 100%; }
	.aboutTxt { padding: 0; }
	.search { padding: 0 2rem; width: 100%; }
	.dj_stats_02 > div a { position: relative; display: block; width: 100%; height: 100%; font-size: 1.1rem; font-weight: 600; border: 1px solid #DDD; }
	.dj_stats_02 > div a img { display: none; }
}

@media (max-width: 1170px) {
	.ctt_businessService .normalTable { display: none; }
	#areaMap #locationCount_1 { top: 60%; right: 31.5%; transform: translate(-50%, -50%);}/* 동구 */
	#areaMap #locationCount_2 { top: 68%; right: 46%; transform: translate(-50%, -50%);}/* 중구 */
	#areaMap #locationCount_3 { top: 62%; left: 38%; transform: translate(-50%, -50%);}/* 서구 */
	#areaMap #locationCount_4 { top: 40%; left: 33.5%; transform: translate(-50%, -50%); }/* 유성구 */
	#areaMap #locationCount_5 { top: 37%; right: 41%; transform: translate(-50%, -50%);}/* 대덕구 */
}

@media (max-width: 1170px) {
	#busiMap > a { width: 100%; height: 350px; }
	div.mission_tit{ padding: 3rem;}
	div.mission_tit > h3{position: relative; width: 30%; font-size: clamp(8px, 5vh, 18px); padding:.1rem 1rem;}
	div.mission_tit > h3::before{bottom:-2.8rem; }
}

@media (max-width: 600px) {
	#ctt { padding: 20px 0; }
	#ctt_con { padding: 1rem; }
	#subTab { width: auto; }
	mark { margin-bottom: 1rem; }
	mark:before { height: 100%; }
	.subTitle { margin-left: 0; line-height: 2rem; }
	.mainSite > a { width: calc(100% / 1); }
	.subSite > a { width: calc(100% / 2); }

	.historyTab ul li { margin-bottom: 0.5rem; width: 100%; }
	.historyTab ul li a { text-align: center; }
	.historyItemWrap { margin-left: 0; padding-left: 0; }
	.historyItemWrap:before { display: none; }
	.historyItem b:before { width: 100%; }
	#historyImg { display: none; }

	.normalTableWrap { overflow: auto;position: relative;}
	.normalTableWrapInfo{ display: none; position: absolute;  background: rgba(0,0,0,0.85); padding: 10px;font-size:15px; color:#fff; width:100%; height:100%;}
	.normalTable { width:auto; white-space: nowrap; }
	/* .normalTable th { display: flex; flex-wrap: wrap; padding: 1rem !important; width: 100%; }
	.normalTable td { display: flex; flex-wrap: wrap; width: 100% !important; }
	.normalTable td:nth-child(1) { margin-top: 1.5rem; }
	.normalTable td:nth-child(3) { border: none; } */

	#investmentTab ul { width: 100%; }
	#investmentTab ul:after { display: none; }
	#investmentTab ul li { width: 100px; height: 100px; }
	#investmentTab ul li:after { display: none; }
	#investmentTab ul li img { width: inherit; height: inherit; }
	#investmentTab ul span { font-size: 0.8rem; line-height: 1rem; }

	.investmentList .lineBox p:not(:first-child) { margin-bottom: 0.5rem; border: 2px solid #C3CCD6; background: #F5F7FC; color: #313B46; }
	.investmentList .lineBox b { display: block; width: 100%; }
	.infoStep { justify-content: flex-start; flex-wrap: wrap; width: 100%; }
	.infoStep p { display: inline-block; width: calc(100% / 3); background: url(/theme/ssdj/img/img_step.png) no-repeat center / contain; }
	.infoStep p:last-child { background: url(/theme/ssdj/img/img_step_last.png) no-repeat center / contain; }
	.infoStep p span { font-size: 0.9rem; line-height: 1.1rem; }
	.investIntro span { width: 100%; font-size: 1.1rem; }

	.aboutImgBox { display: flex; align-items: center; flex-wrap: wrap; flex-direction: row; font-size: 1rem; }
	.aboutImgBox div { margin: 0.1rem; width: calc(100% / 2 - 0.4rem) !important; height: 250px; border-radius: 1rem; text-align: center; font-size: 1.1rem; color: #FFF; }

	.missionWrap { flex-direction: row; flex-wrap: wrap; font-size: 0; }
	.missionWrap > div { position: relative; margin: 0.5rem; padding: 1.5rem; width: calc((100% - 2rem)/ 1 ); height: 240px; font-size: 0.9rem; letter-spacing: -0.01rem; }
	.missionWrap p { width: 100%; }
	.missionWrap big { font-size: 0.9rem;}
	.missionWrap > div > img { right: 1rem; width: 70px; height: 70px; }
	#subway b { display: block; }
	#bus b { display: block; margin-top: 0.5rem; margin-bottom: 0.2rem; }

	#areaMap #locationCount_1 { top: 61%; right: 29%; transform: translate(-50%, -50%);}/* 동구 */
	#areaMap #locationCount_2 { top: 68%; right: 43%; transform: translate(-50%, -50%);}/* 중구 */
	#areaMap #locationCount_3 { top: 62%; left: 34%; transform: translate(-50%, -50%);}/* 서구 */
	#areaMap #locationCount_4 { top: 42%; left: 28%; transform: translate(-50%, -50%); }/* 유성구 */
	#areaMap #locationCount_5 { top: 39%; right: 40%; transform: translate(-50%, -50%);}/* 대덕구 */
}

/* media query 1170*/
@media screen and (max-width: 1170px) {
	.investmentList .lineBox p { width: calc(100% / 2); }
	/*.normalTable { display: none; }*/
	.normalTable_m { display: block; }
	.swipage { width: 100%; }
	.dj_stats_02 > div { display: flex; align-items: center; width: calc((100% - 2rem)/ 2 ); height: 200px; overflow: hidden; }

	.monitor_new { padding: 4rem 2rem; }
	.condition { padding: 4rem 2rem; }
	.service_new { padding: 4rem 2rem; }
	.search { padding: 4rem 2rem;}
	.missionWrap > div.mb { margin-top: 0; }
	.missionWrap > img { position: initial; transform: translate(0); width: 100%; }
}

/* media query 670*/
@media screen and (max-width: 670px) {
	.mainSite > a div { margin-bottom: 0; height: 170px; overflow: hidden; }
	.mainSite > a div img { width: 80%; }
	.subSite > a div { margin-bottom: 0; height: 70px; }
	#investmentTab ul li { position: relative; margin: 0 0 4rem 0; width: calc(100%/3); width: 100px; height: 100px; text-align: center; }
}

/* media query 470*/
@media screen and (max-width: 470px) {
	.investmentList .lineBox p { width: 100%;}
	.aboutImgBox div { width: calc(100% / 1) !important;}
}