@charset "utf-8";

.box-img01 {display:block;}

/* 이용안내 > 민원업무안내 > 감염병관리팀 */
.process > ul {margin:0 -1em;}
.process > ul > li > ul > li {position:relative; float:left; width:20%; font-size:.882em; letter-spacing:-1px; padding:0 1em;}
.process ul li li div { width:100%; height:9.75em; margin:0 auto; text-align:center; padding:0 .5em; box-sizing:border-box; border-radius:10px; background:#FFF7FA; border:2px solid #ffcfe1;}
.process li.step05 > div{display:table; margin-bottom:.5em;}
.process li.step01 {display:table;}
.process li.step02, .process li.step04 {position:relative; display:table;}
.process li.step01 div {display:table-cell; vertical-align:middle; height:20em; background:#F3F6FE; border:2px solid #d3dfff;}
.process li.step01 div span {display:block;}
.process li.step05 div p {display:table-cell; vertical-align:middle;}
.process li.step05 > div:last-child {margin-bottom:0;}
.process li.step02 div, .process li.step04 div {display:table-cell; vertical-align:middle; height:20em; padding:1em; box-sizing:border-box;}
.process li.step03 {display:table;}
.process li.step03 div {display:table-cell; vertical-align:middle; height:20em; background:#F3F6FE; border:2px solid #d3dfff; padding:1em; box-sizing:border-box;}
.process li.step05 div {background:#F3F6FE; border:2px solid #d3dfff;}
.process > ul > li > ul > li:before {content:''; border-top:10px solid #92a3a0; border-left:10px solid transparent; border-right:10px solid transparent; width:0px; height:0px; position:absolute; margin-right:-10px; top:50%; right:0; transform:rotate( -90deg );}
.process > ul > li:first-child li.step05:before {display:none;}
.process ul li ul:after {content:''; display:block; clear:both;}

@media all and (max-width:860px){
	.process > ul > li > ul > li {width:33.3%; margin-bottom:1em;}
	.process > ul > li:first-child li.step03:before {display:none;}
}

@media all and (max-width:480px){
	.process ul li li div {height:auto !important; padding:1em 0;}
	.process > ul > li > ul > li {width:100%; margin-bottom:2em;}
	.process > ul > li:first-child li.step03:before {display:block;}
	.process > ul > li > ul > li:before {left:50%; top:auto; bottom:-1.5em; transform: translateX(-50%);}
}

/* 동물 > 유기동물 발견시 대처방법 */
@media all and (max-width: 1024px){
	.lose-step .item-last .desc div{padding:.5em;}
}

/* 알아야될 환경상식Ⅱ */
.environment_box { margin:20px 0 40px 0; }
.environment_box h4 {margin-top:0;}
.environment_box .img { float:left; }
.environment_box .list { float:right; width:57%; letter-spacing:-1px; padding:15px; box-sizing:border-box; }
.environment_box .title {  margin-top:20px; position:relative; border-top:1px solid #ddd; }
.environment_box .title span.var { position:absolute; left:0; top:-3px; display:block; width:12%; border-radius:10px; height:5px; background:#009edb; }
.environment_box .title h4 { padding-left:0; padding-top:20px; }
.environment_box .title h4:before { background:none !important; }
.environment_box .txt { margin-top:20px; padding:40px 20px; box-sizing:border-box; border:1px dashed #ddd; border-radius:10px; }
.environment_box .txt p { font-size:15px; margin-top:10px; }
.environment_box .txt p:first-child { margin-top:0; }
.environment_box:after { content:''; display:block; clear:both; }

/* 우리가 지켜야할 약속 */
.rule_box { margin-top:20px; padding:10px; box-sizing:border-box; }
.rule_box li { margin-top:30px; }
.rule_box li:first-child { margin-top:0; }
.rule_box > ul > li > div { padding:20px 25px; box-sizing:border-box; border-radius: 0.294em; box-sizing: border-box; border: 1px solid #DDDDDD; background: #FFF8FA; border-color: #F0CDD8; box-shadow:0px 2px 0px rgba(240,199,212,.3); }
.rule_box span { display:inline-block; width:122px; height:122px; vertical-align:middle; }
.rule_box .list01 span.ico { background:url(/depart/img/sub09/ico_rule01.png) no-repeat; }
.rule_box .list02 span.ico { background:url(/depart/img/sub09/ico_rule02.png) no-repeat; }
.rule_box .list03 span.ico { background:url(/depart/img/sub09/ico_rule03.png) no-repeat; }
.rule_box .list04 span.ico { background:url(/depart/img/sub09/ico_rule04.png) no-repeat; }
.rule_box .txt { display:inline-block; width:84%; vertical-align:middle; margin-left:2%; }
.rule_box .txt h5 { color: #D22259; padding-left:0 !important; margin-left:0 !important; margin-top:0 !important; }
.rule_box .txt p { margin-top:10px; }
.rule_box .txt h5:before { background:none !important; }

@media all and (max-width:1024px){
	.rule_box > ul > li > div { padding:20px}
}

/* 물 절약 방법 */
.water_box { margin-top:20px; }
.water_box > ul > li { margin-top:30px; }
.water_box li:first-child { margin-top:0; }
.water_box > ul > li > div { padding:20px 15px; box-sizing:border-box; background:#fff; border-radius:10px; border: 1px solid #DDDDDD; box-shadow: 0px 2px 0px #EFEFEF;}
.water_box span { display:inline-block; width:15%; height:122px; vertical-align:top; background-position:center 0 !important; }
.water_box .list01 span.ico { background:url(/depart/img/sub09/ico_water01.png) no-repeat; }
.water_box .list02 span.ico { background:url(/depart/img/sub09/ico_water02.png) no-repeat; }
.water_box .list03 span.ico { background:url(/depart/img/sub09/ico_water03.png) no-repeat; }
.water_box .list04 span.ico { background:url(/depart/img/sub09/ico_water04.png) no-repeat; }
.water_box div.con { display:inline-block; width:84%; vertical-align:top; }
.water_box h5 { color: #D22259; padding-left:0 !important; margin:0 !important; margin-top:10px !important; }
.water_box h5:before { background:none !important; }
.water_box .txt { margin-top:15px; }
.water_box p { letter-spacing:-1px; margin-top:5px; }
.water_box p:first-child { margin-top:0; }
.water_box .list { margin-top:15px; background:#f8f8f8; padding:10px 15px 17px 18px; border-radius:5px; box-sizing:border-box; }
.water_box .list li { position:relative; padding-left:20px; margin-top:5px; }
/*.water_box .list li:before { content:''; position:absolute; width:11px; height:11px; left:0; top:4px; background:url(/common/img/common/spr_bu.png) no-repeat 0 -109px; }*/

/* 수돗물 바로알기 */
.topbox.water { background:url(/depart/img/sub09/ico_topbox_water.png) no-repeat 0px 29px; }

@media all and (max-width:1024px){
	.environment_box .img { width:45%; }
	.environment_box .img img { height:100%; }
	.environment_box .list { width:54%; }
	.environment_box .title { margin-top:0; }
	.environment_box .txt { padding:20px; }

	.rule_box span { width:17%; }
	.rule_box .txt { margin-left:0; width:82%; }

	.water_box span { width:16%; background-position:left 0 !important; }
	.water_box div.con { width:83%; }
}

@media all and (max-width:955px){

}

@media all and (max-width:890px){
	.water_box span { width:18%; }
	.water_box div.con { width:81%; }
}

@media all and (max-width:850px){
	.rule_box span { width:20%; }
	.rule_box .txt { width:79%; }
}

@media all and (max-width:780px){
	.water_box span { width:20%; }
	.water_box div.con { width:79%; }
}

@media all and (max-width:750px){
	.rule_box span { width:23%; }
	.rule_box .txt { width:76%; }
}

@media all and (max-width:700px){
	.environment_box { margin-top:0; }
	.environment_box .img { width:100%; height:100%; margin:0 auto; padding:15px; box-sizing:border-box; }
	.environment_box .img img { display:block; margin:0 auto; width:100%; }
	.environment_box .list { width:100%; }
}

@media all and (max-width:690px){
	.water_box span { width:23%; }
	.water_box div.con { width:76%; }
}

@media all and (max-width:650px){
	.rule_box span { width:26%; }
	.rule_box .txt { width:73%; }
}

@media all and (max-width:620px){
	.water_box span { width:25%; }
	.water_box div.con { width:74%; }
}

@media all and (max-width:580px){
	.rule_box { margin:0 auto; text-align:center; }
	.rule_box span { display:block; width:100%; margin:0 auto; background-position:center 0 !important; }
	.rule_box .txt { display:block; width:100%; margin-top:15px; }
	.rule_box .txt h5 { text-align:center; }

	.water_box span { display:block; width:100%; background-position:center 0 !important }
	.water_box div.con { display:block; text-align:center; width:100%; }
	.water_box h5 { text-align:center; margin-top:15px !important; }
	.water_box .txt { margin-top:10px; }
	.water_box .list { text-align:left; }
}

/* 상하수도-하수처리장의 역할 */
.con090305_wrap {box-sizing:border-box;}
.con090305_img {width:47%; float:left;}
.con090305_txt {width:46%; float:right;}
.con090305_wrap:after {content:''; display:block; clear:both;}

.con090305_icon {margin-top:15px; overflow:hidden;}
.con090305_icon ul {}
.con090305_icon li {float:left; width:33.3%; height:138px; text-align: center; margin:0 auto;}
.con090305_icon li.icon01 {background: url(/depart/img/sub09/icon_090305-01.jpg) no-repeat center;}
.con090305_icon li.icon02 {background: url(/depart/img/sub09/icon_090305-02.jpg) no-repeat center;}
.con090305_icon li.icon03 {background: url(/depart/img/sub09/icon_090305-03.jpg) no-repeat center;}
.con090305_icon li span {padding-top: 150px; display: block; font-weight:600; font-size:18px;}

@media all and (max-width:916px){
	.con090305_txt{width: 45%;}
}
@media all and (max-width:640px){
	.con090305_img, .con090305_txt {width:100%; float:none; margin-bottom:.8em;}
}

@media all and (max-width:560px){
	.con090305_icon li span {font-size:16px;}
}

@media all and (max-width:540px){
	.con090305_icon li {float:none; width:100%; margin-bottom: 40px;}
	.con090305_icon li:last-child {margin-bottom:0;}
}

@media all and (max-width:518px){
	.topbox.water { background-position:center 33px !important; }
}

/* 상하수도-옥내누수 점검 */
.con09030801_wrap:after {content:''; display:block; clear:both;}
.con09030801_txt {width:58%; float:left;}
.con09030801_img {width:39%; float:right;}
.con09030801_img .box-img {padding:.8em;}

@media all and (max-width:768px){
	.con09030801_img, .con09030801_txt {width:100%; float:none; margin-bottom:1em;}
}

/* 수돗물 생산과정 */
.water-photo-list .list-ul {overflow:hidden; margin-top:-20px;}
.water-photo-list.li4 li{float:left; width: 25%; box-sizing:border-box;}
.water-photo-list.li4 li + li {margin-top:20px;}
.water-photo-list.li4 li:first-child{margin-top: 20px;}
@media all and (max-width:1024px){
	.water-photo-list.li4 li{width: 33%; font-size: 13px;}
	.water-photo-list.li4 li.photo_04{margin-right: 1%;}
}
@media all and (max-width:688px){
	.water-photo-list.li4 li{width: 49%;}
}
@media all and (max-width:555px){
	.water-photo-list.li4 li{width: 100% !important;}
}

/* 복지 - 한눈에 보는 복지정보 - 복지로 */
.topbox.air_gg{background: url(/depart/img/sub09/ico_topbox_air_gg.png) no-repeat 25px 29px;}
@media (max-width: 518px){
	.topbox.air_gg{background: url(/depart/img/sub09/ico_topbox_air_gg.png) no-repeat center 33px;}
}

/* 생활환경 - 광주시민 알뜰 벼룩시장 */
.list_0901060000 {background: #fff;border-radius: 5px;padding: 10px;box-sizing: border-box;}
.list_0901060000 >li {float: left;margin: 0 20px 0 0 !important;}

/* 상하수도 - 저수조/옥내급수관 유지관리 */

.step.water > li div {width: 90%!important;}
.step.water > li::after{display:none;}
.step.water > li .txt02 a{border:0;}

.register {background: #4fb948 !important; border:none !important; color:#fff !important;}
.register:hover {background: #16990d !important; border:#16990d 2px solid; color:#fff;}

.water_list a.link{ color:#000; font-weight:600;}

.topbox.confirm {background:url('/depart/img/sub09/img050305_02.png') no-repeat center left 40px;}
.topbox.cleaning{background: url('/depart/img/sub09/icon_090305-02.jpg') no-repeat center left 40px / 120px; padding-left:190px;}
.topbox .title{padding-left: 0;color: #276cad;font-weight: 600;font-size: 22px;}
.watertank_list{position:relative;}
.watertank_list .watertank_btn {position:absolute; top:0; right:0; }
.watertank_list .watertank_btn .btn{border-radius:5px; padding: 6px 10px;}
.watertank_list .watertank_btn .add{background: #4fb948 !important; border:#4fb948 2px solid; color:#fff;}
.watertank_list .watertank_btn .add:hover {background: #16990d !important; border:#16990d 2px solid; color:#fff;}

.btn.save{background: #338adc !important; border:#338adc 2px solid; color:#fff;}
.btn.save:hover{background: #276cad !important;border:#276cad 2px solid;color:#fff;}

.water_depth05 li{width:20%; border-right: 1px solid #e1e5ed; font-size:15px;}
.water_depth05 li:last-child{border-right-width:0;}
.water_depth05 li.on a{font-weight:bold; color:#22a922;}

@media all and (max-width: 1024px){
	.step.water > li {width:33.3% !important;}
	.water_depth05{padding:20px;}
	.water_depth05 li{ width:33.3%; border-right: 1px solid #e1e5ed!important; font-size:15px; margin-bottom:10px;}
	.water_depth05 li:nth-child(3){border-right-width0:0!important;}
	.water_depth05 li:nth-child(4){margin-bottom:0;border-right: 1px solid #e1e5ed!important;}
	.water_depth05 li:nth-child(5){border-right-width:0!important;margin-bottom:0;}
}

@media all and (max-width: 568px){
	.step.water{margin-left:15px;}
	.step.water > li {width:50% !important; }
	.water_depth05{padding:10px;}
	.water_depth05 > li{width:50%;border-right-width:1px !important; margin-bottom:10px; }
	.water_depth05 li:nth-child(3){border-right-width:1px!important;}
	.water_depth05 li:nth-child(4){margin-bottom:10px; border-left:1px solid #e1e5ed!important;}
	.water_depth05 > li:nth-child(5){border-right-width:0!important;margin-bottom:0;}
	.water_depth05 li:nth-child(2n){border-right-width:0!important;}

	.topbox.confirm,
	.topbox.cleaning{background-position:center 33px;padding: 160px 30px 30px!important;text-align: center;}
	.topbox .title{text-align: center;}
}

/* 너른고을 자원순환가게 본인인증화면 */
#realNameTab ul.re-born {width:100%; margin:0 auto;}
#realNameTab ul.re-born li .login_box {width:100% !important;height: auto;  margin-left:0;}

/* 하수처리 방류수 수질현황 게시판 수정 */
h4.blind {
	display:none;
}

.file_list .blank {
	position: relative;
	width: auto;
    height: auto;
    padding: 4px 30px 2px 15px;
    background-color: #fafbfc;
    font-weight: normal;
    border: 2px solid #ddd;
}

.file_list .blank:after {
	content: '';
    position: absolute;
    right: 10px;
    top: 7px;
    width: 12px;
    height: 12px;
    background: url(/common/img/common/spr_bu.png) 0 -130px no-repeat;
    text-indent: -9999px;
}

/* 신재생에너지 */
.stepFlow .item .desc div span {display:block; margin-top:.5em; font-size:.9em; color:#777;}

.service-Info {position:relative; display:block;}
.service-Info .info-top {background:#3A4BA6; color:#fff; padding:1em 2em;}
.service-Info .info-top span {display:inline-block; text-align:left; font-size:1.5em; font-weight:700;}
.service-Info .info-top span em {color:#FFCE52;}
.service-Info .info-top ul {display:block;float:right; padding:.25em 0;}
.service-Info .info-top ul li {position:relative; display:inline-block; padding-left:2em; font-size:1.25em; }
.service-Info .info-top ul li + li {margin-left:1em;}
.service-Info .info-top ul li:before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.5em; height:1.5em; }
.service-Info .info-top ul li:nth-child(1):before { background:url(../img/sub09/0902_ico_call.svg) no-repeat center center; background-size:100% auto;}
.service-Info .info-top ul li:nth-child(2):before { background:url(../img/sub09/0902_ico_time.svg) no-repeat center center; background-size:100% auto;}
.service-Info .info-step {padding:1em 2em 2em; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}
.service-Info .info-step p {font-size:1.5em; font-weight:700;}
.service-Info .info-step ul {text-align:center; margin-top:1em;}
.service-Info .info-step ul li {position:relative;display:inline-block;width: 16%;margin:0 -2px; vertical-align:top; padding-right:1em; }
.service-Info .info-step ul li:before {content:''; position:absolute; right:0; top:2em; width:1.25em; height:1.25em; background:url(../img/sub09/0902_ico_arrow.svg) no-repeat center center; background-size:100% auto;}
.service-Info .info-step ul li p {font-size:1em; margin:.5em 0 0; font-weight:700;}
.service-Info .info-step ul li:last-child:before {content:none;}

.list-img {position:relative; }
.list-img > li {position:relative; display:inline-block; width:30.33333%; margin:1%; text-align:center; vertical-align:top;}
.list-img > li > div  {border:1px solid #ddd; border-radius:.5em;  padding:.5em;}
.list-img > li p {font-weight:700; margin-top:0.5em;}
.list-img > li p em {display:inline-block; margin-right:.5em;}
.list-img > li span{ display:block; margin-top:.5em; font-size:.9em; color:#777; word-break:keep-all;}

@media all and (max-width:1024px) {
  .service-Info .info-top span {display:block;}
	.service-Info .info-top ul {float:none;}

}

@media all and (max-width:768px) {
  .service-Info .info-step ul:after {content:''; clear:both; display:block;}
	.service-Info .info-top ul li {display:block;}
	.service-Info .info-top ul li + li {margin-left:0; margin-top:.5em;}
	.service-Info .info-step ul li {display:block; width:32%; float:left; padding:1em;}
	.service-Info .info-step ul li:before {top:3em;}

  .service-Info .info-step ul li {width:49%;;}
	.list-img > li {width:47%;}

}

@media all and (max-width:380px) {
  .service-Info .info-step ul li {height:165px;}
	.list-img > li {width:97%;}

}