.tabpanel {display: none;font-size: 92%;}
.tabpanel.on {display: block;}

.content .m_t_10 {margin-top: 10px;}
.content .m_t_20 {margin-top: 20px;}
.content .m_t_30 {margin-top: 30px;}
.content .m_b_20 {margin-bottom: 20px;}
.content .m_b_30 { margin-bottom: 30px !important;}
.content .m_b_50 {margin-bottom: 50px;}
.content .text_center {text-align: center;}
.content .text_left {text-align: left;}

/* 제목 */
.content h2 {font-size:20px; font-weight:600; color:#222; padding-left:3px; margin:0 0 10px;letter-spacing: -1px;-ms-word-break: keep-all;word-break: keep-all;}
.content h3 {position: relative;font-size: 16px;font-weight: 600;color: #1e5095;padding-left: 13px; background:url(/images/sub/story/bg_h3.png) no-repeat 0 5px;margin: 0 0 5px;-ms-word-break: keep-all;word-break: keep-all;}
.content p {-ms-word-break: keep-all;word-break: keep-all;line-height: 1.6;}


/* 탭 */
.tab { margin-bottom:30px; border-left:1px solid #ddd; z-index:100;}
.tab ul:after {clear:both; display:block; content:"";}
.tab ul { width:100%; border-top:1px solid #ddd;}
.tab ul li { float:left;width: 20%;}
.tab ul li a { display:block; color:#232323; padding:10px 20px; font-size:14px; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}
.tab ul li.on a{background-color: #3066a2; color: #fff;}


/* 테이블 */
/* table_t1 */
.table_t1, .table_t1 th, .table_t1 td { border:0; border-collapse:collapse; font-size:14px;}
.table_t1 {width:100% !important; border-bottom:2px solid #3989ca !important;}
.table_t1.bottom_none {border-bottom:none !important;}
.table_t1 .first {background:#f7f7f7;}
.table_t1 th, .table_t1 td { padding:9px; border-bottom:solid 1px #ddd; border-right:1px solid #ddd;-ms-word-break: keep-all;word-break: keep-all;}
.table_t1 thead th {color:#fff; font-weight:600; border:none; border-right:solid 1px rgba(255,255,255,0.3); background:#3989ca;}
.table_t1 thead th:last-of-type{border-right:none;}
.table_t1 thead .alt th { background:#1b88c8 !important; border-top:solid 1px rgba(255,255,255,0.3);}
.table_t1 thead .alt th:last-of-type{border-right:solid 1px rgba(255,255,255,0.3);}
.table_t1 thead .alt th.right_none {border-right:none;}

.table_t1 tbody th { font-weight:400; color:#333;}
.table_t1 tbody th:first-of-type, .table_t1 tbody th:first-of-type {border-left:none;}
.table_t1 tbody td:last-of-type {border-right:none; color:#666;}

.table_t1 tfoot th {font-weight:400; color:#666;}
.table_t1 tfoot th:first-of-type {border-left:none;}
.table_t1 tfoot td:last-of-type {border-right:none;}
.table_t1 .line_right { border-right:1px solid #ddd !important;}
.table_t1 .text_right { align:right}
.table_txt {font-size:14px; margin-top:10px;}
/* table_t2 */
.table_t2 {width:100%;}
.table_t2, .table_t2 th, .table_t2 td { border:0; border-collapse:collapse; font-size:15px;}
.table_t2 th, .table_t2 td { padding:10px 5px; word-break:keep-all;}
.table_t2 tbody {border-top:solid 1px rgba(191, 191, 191, 0.5);}
.table_t2 tbody th { font-weight:600; color:#fff; border-right:solid 1px rgba(191, 191, 191, 0.5); border-bottom:solid 1px rgba(191, 191, 191, 0.5); background:#3989ca;}
.table_t2 tbody td {border-right:solid 1px rgba(191, 191, 191, 0.5); border-bottom:solid 1px rgba(191, 191, 191, 0.5);}
.table_t2 tbody td:last-of-type{border-right:none;}
.table_t2 ul.bu {margin-bottom:0 !important;}


/* ul.bu */
.content ul.bu {margin-bottom:20px;}
.content ul.bu > li {padding-left:10px; background:url("/images/sub/story/bu_li1.png") no-repeat 0 11px; line-height:1.8em; word-break:keep-all;}
.content ul.bu > li > ul { margin-bottom:10px;}
.content ul.bu > li > ul > li {padding-left:10px; background:url("/images/sub/story/bu_li2.png") no-repeat 0 11px; line-height:1.8em; word-break:keep-all;}
.content ul.bu > li > ul > li > ul > li {padding-left:10px; background:url("/images/sub/story/bu_li3.png") no-repeat 0 11px; line-height:1.8em; word-break:keep-all;}
/* view */
.btn_zoom { display:none;}

@media all and (max-width:1000px) {
.tab ul li  {width: 33.33%;}
.btn_zoom { display:block; position:absolute; top:0; right:0; width:40px; height:40px; text-indent:-9999px; background:#003963 url("/images/sub/story/btn_zoom.png") no-repeat center; background-size:50%;}
}

@media all and (max-width:767px) {
.table_t1 th, .table_t2 th {-ms-word-break: break-all;word-break: break-all;}

}

@media all and (max-width:414px) {
.w100 {width:100% !important;}
.tab ul li  {width: 50%;}
.tab ul li a {padding: 10px;}
}

/* 하수도소개 */
.about_tit_box {font-size:36px; color:#111; text-align:center; padding:20px 0 40px 0; letter-spacing:-1.5px;font-weight: 700;-ms-word-break: keep-all;word-break: keep-all;}
.about_tit01 {color:#3487cb;}
.about_tit02 {color:#0eaf47;}
.about_tit03 {color:#f09221;}
.about_tit04 {color:#e31b23;}
.about_tit05 {color:#666;}
.font_normal {font-weight:normal;}
.font_s {font-size:16px;}

.about_box {margin-bottom:40px;}
.about_box li {padding:50px 0 35px 28.33%; margin-bottom:10px;background-position: 9% 50%;background-repeat: no-repeat;}
.about_box li:nth-of-type(1) { background-color:#d9effc;background-image: url("/images/sub/story/icon_abou01.png")}
.about_box li:nth-of-type(2) { background-color:#faeadc;background-image: url("/images/sub/story/icon_abou02.png")}
.about_box li:nth-of-type(3) { background-color:#ecf4dd;background-image: url("/images/sub/story/icon_abou03.png"); margin-bottom:0;}
.about_box li .tit { margin-bottom:10px; font-weight:bold; font-size:16px;}
.about_box li:nth-of-type(1) .tit {color:#0479b6;}
.about_box li:nth-of-type(2) .tit {color:#ff6600;}
.about_box li:nth-of-type(3) .tit {color:#28841e;}
.about_box li .con {color:#666; margin-bottom:5px;}
.about_box li .comment {color:#e8312b; font-size:14px;}

.con_img_box {position:relative; border:1px solid #ddd; padding:50px; text-align:center; margin-bottom:40px;}

@media all and (max-width:767px) {
.tab ul li  {width: 33.33%;}
.about_tit_box {font-size:26px; padding:0; padding-bottom:20px; border-bottom:1px solid #ddd; margin-bottom:20px;}
.con_img_box {padding:30px; margin-bottom:30px;}
}

@media all and (max-width:414px) {
.tab ul li  {width: 50%;}
.tab ul li a {padding: 10px;}
.about_tit_box {font-size:20px; line-height:1 !important;}

.about_box {margin-bottom:30px;}
.about_box li {padding:20px; margin-bottom:10px;background-image: none !important;}
.about_box li:nth-of-type(1) { background-position:center 20px;}
.about_box li:nth-of-type(2) { background-position:center 20px;}
.about_box li:nth-of-type(3) { background-position:center 20px;}

.con_img_box {padding:20px;}
}

/* 하수도의구성 */
.water_box {margin-bottom:40px;}
.water_box li {float:left; width:22%; border:1px solid #ddd; border-radius:10px; padding:10px; box-sizing:border-box;}
.water_box li:nth-of-type(2n) {border:none; width:4%; padding:0; text-align:center; padding-top:110px;}
#contents .water_box_tit {background:#01b9f3; color:#fff; text-align:center; padding:10px; border-radius:5px; text-align:center; font-size:17px;}
.water_box li.bg1 {background:url("/images/sub/story/bg_water_step01.jpg") center 60px no-repeat;}
.water_box li.bg2 {background:url("/images/sub/story/bg_water_step02.jpg") center 60px no-repeat;}
.water_box li.bg3 {background:url("/images/sub/story/bg_water_step03.jpg") center 60px no-repeat;}
.water_box li.bg4 {background:url("/images/sub/story/bg_water_step04.jpg") center 60px no-repeat;}
.water_box p {padding-top:150px; text-align:center;}
.water_box li.arrow img {width:50%;}

#contents .yes_box h4 {background:#01b9f3; color:#fff; text-align:center; padding:9px; text-align:center; font-size:17px;}
.yes_box li p {padding:50px 40px 50px 30%; border:1px solid #ddd; border-top:none;}
.yes_box li p.bg1 {background:url("/images/sub/story/bg_yes_water01.png") 90px center no-repeat; background-size:13%;}
.yes_box li p.bg2 {background:url("/images/sub/story/bg_yes_water02.png") 90px center no-repeat; background-size:13%;}
.yes_box li p.bg3 {background:url("/images/sub/story/bg_yes03.png") 90px center no-repeat; background-size:13%;}
.yes_box li p.bg4 {background:url("/images/sub/story/bg_yes04.png") 90px center no-repeat; background-size:13%;}
.yes_box li p.bg5 {background:url("/images/sub/story/bg_yes05.png") 70px center no-repeat; background-size:18%;}
.yes_box li p.bg6 {background:url("/images/sub/story/bg_yes06.png") 70px center no-repeat; background-size:18%;}
.yes_box li p.bg7 {background:url("/images/sub/story/bg_yes07.png") 30px center no-repeat; background-size:23%;}

@media all and (max-width:767px) {
.water_box {margin-bottom:30px;}
.water_box li {min-height:255px;}
.water_box li.bg1, .water_box li.bg2, .water_box li.bg3, .water_box li.bg4 {background-position:center 62px; background-size:85%;}
.water_box p {padding-top:95px;line-height: 1.6;}

.yes_box li p {padding:30px 30px 30px 25%;}
.yes_box li p.bg7 {background-position:center 20px; background-size:40%; padding:200px 30px 30px 30px;}
}

@media all and (max-width:414px) {
.water_box li {float:left; width:46%; padding:8px; min-height:225px; margin-bottom:10px;}
.water_box li:nth-of-type(2n) {width:8%;}
.water_box li:nth-of-type(4) {display:none;}
.water_box li:nth-of-type(5), .water_box li:nth-of-type(6), .water_box li:nth-of-type(7) { margin-bottom:0;}
.water_box_tit {padding:8px; font-size:14px;}
.water_box li.bg1, .water_box li.bg2, .water_box li.bg3, .water_box li.bg4 {background-position:center 55px; background-size:89%;}
.water_box p {padding-top:115px; font-size:13px;}

#contents .yes_box h4 {font-size:14px;}
.yes_box li p {padding:120px 30px 30px 30px; font-size:13px;}
.yes_box li p.bg1, .yes_box li p.bg2, .yes_box li p.bg3, .yes_box li p.bg4, .yes_box li p.bg4 {background-position:center 20px; background-size:30%;}
.yes_box li p.bg5, .yes_box li p.bg6, .yes_box li p.bg7 {background-position:center 20px; background-size:40%;}
.yes_box li p.bg7 { background-size:70%; padding:200px 30px 30px 30px;}
}

/* I/I, CSOs, SSOs */
.ii_box.bg1 {background:url("/images/sub/story/bg_ii01.jpg") left top no-repeat; background-size:36% 100%;}
.ii_box.bg2 {background:url("/images/sub/story/bg_ii02.jpg") left top no-repeat; background-size:36% 100%;}
.ii_box.bg3 {background:url("/images/sub/story/bg_ii03.jpg") left top no-repeat; background-size:36% 100%;}
.ii_box .ii_table {padding-left:40%; width:60%;}

@media all and (max-width:767px) {
.ii_box .ii_table {padding-left:0; width:100%; padding-top:240px;}
.ii_box.bg1, .ii_box.bg2, .ii_box.bg3 {background-position:center top;}
.ii_box.bg1 {background-size:62%;}
.ii_box.bg2 {background-size:82%;}
.ii_box.bg3 {background-size:70%;}
}

@media all and (max-width:414px) {
.ii_box .ii_table {padding-top:160px;}
}

/* 하수처리공법 */
.water_box2 {margin-bottom:40px;}
.water_box2 > ul > li {float:left; width:23%; border:1px solid #ddd; border-radius:10px; padding:10px; box-sizing:border-box; margin-right:2%;font-size: 93%;}
.water_box2 > ul > li:nth-of-type(3) {width:50%; margin-right:0;}
#contents .water_box2_tit {background:#01b9f3; color:#fff; text-align:center; padding:10px; border-radius:5px; text-align:center; font-size:17px;}
.water_box2 > ul > .bg1 {background:url("/images/sub/story/bg_water02_step01.jpg") center 60px no-repeat;}
.water_box2 > ul > .bg2 {background:url("/images/sub/story/bg_water02_step02.jpg") center 60px no-repeat;}
.water_box2 > ul > li > ul > .bg3 {background:url("/images/sub/story/bg_water02_step03.jpg") center 5px no-repeat;}
.water_box2 > ul > li > ul > .bg4 {background:url("/images/sub/story/bg_water02_step04.jpg") center 5px no-repeat;}
.water_box2 > ul > li > p, .water_box2 > ul > li > ul > li > p {padding-top:130px; text-align:center;}
.water_box2 > ul > li > ul > li {float:left; width:50%; padding:0 !important;}

.con_img_box02 .con_left {background:#d3e7ff; padding:25.5px; float:left; width:45%; box-sizing:border-box; box-sizing:border-box; min-height:280px;}
.con_img_box02 .con_right {width:55%; margin-left:45%;}
.con_img_box02 .con_right img {width:100%; min-height:280px;}

.con_img_box03 {margin-bottom:40px;font-size: 95%;}
.con_img_box03 .con_left { float:left; width:55%;}
.con_img_box03 .con_left img {width:100%; min-height:280px;}
.con_img_box03 .con_right {background:#eed7f1; padding:25.5px; width:45%; margin-left:55%; box-sizing:border-box; min-height:280px;}

.img_cnr {text-align:center;}

@media all and (max-width:767px) {
.water_box2 {margin-bottom:30px;}
.water_box2 > ul > li {min-height:auto;}
.water_box2 > ul > .bg1, .water_box2 > ul > .bg2 {background-position:center 62px; background-size:85%;}
.water_box2 > ul > li > ul > .bg3, .water_box2 > ul > li > ul > .bg4 {background-position:center 5px; background-size:85%;}
.water_box2 > ul > li > p, .water_box2 > ul > li > ul > li > p {padding-top:80px;}

.con_img_box02 .con_left {padding:30px 30px 10px 30px; float:none; width:100%; min-height:auto;}
.con_img_box02 .con_right {width:100%; margin-left:0;}
.con_img_box02 .con_right img {width:100%; min-height:auto;}

.con_img_box03 {margin-bottom:30px;}
.con_img_box03 .con_left { float:none; width:100%;}
.con_img_box03 .con_left img {width:100%; min-height:auto;}
.con_img_box03 .con_right {padding:30px 30px 10px 30px; width:100%; margin-left:0%;}
}

@media all and (max-width:414px) {
.water_box2 > ul > li {float:left; width:49%; padding:8px; min-height:auto; margin-bottom:10px;}
.water_box2 > ul > li:nth-of-type(2) {margin-right:0;}
.water_box2 > ul > li:nth-of-type(3) {width:100%;}
.water_box2_tit {padding:8px;}
.water_box2 li.bg1, .water_box2 li.bg2, .water_box2 li.bg3, .water_box2 li.bg4 {background-position:center 55px; background-size:89%;}
.water_box2 > ul > li > p, .water_box2 > ul > li > ul > li > p {padding-top:100px;}
}

/* 하수관거 */
.water_box3 {margin-bottom:40px;}
.water_box3 > ul > li {float:left; width:32%; border:1px solid #ddd; border-radius:10px; padding:10px; box-sizing:border-box; margin-right:2%;}
.water_box3 > ul > li:nth-of-type(3) {margin-right:0;}
#contents .water_box3_tit {background:#01b9f3; color:#fff; text-align:center; padding:10px; border-radius:5px; text-align:center; font-size:17px;}
.water_box3 > ul > li > ul > .bg1 {background:url("/images/sub/story/bg_sewer01.jpg") center 50px no-repeat; height:180px;}
.water_box3 > ul > li > ul > .bg2 {background:url("/images/sub/story/bg_sewer02.jpg") center 50px no-repeat; height:180px;}
.water_box3 > ul > li > .bg3 {text-align:center; background:url("/images/sub/story/bg_sewer03.jpg") center 30px no-repeat; height:170px;}
.water_box3 > ul > li > ul > .bg4 {background:url("/images/sub/story/bg_sewer04.jpg") center 50px no-repeat; height:180px;}
.water_box3 > ul > li > ul > .bg5 {background:url("/images/sub/story/bg_sewer05.jpg") center 50px no-repeat; height:180px;}
.water_box3 > ul > li > .bg6 {text-align:center; background:url("/images/sub/story/bg_sewer06.jpg") center 30px no-repeat; height:170px;}
.water_box3 > ul > li > ul > .bg7 {background:url("/images/sub/story/bg_sewer07.jpg") center 50px no-repeat; height:180px;}
.water_box3 > ul > li > ul > .bg8 {background:url("/images/sub/story/bg_sewer08.jpg") center 50px no-repeat; height:180px;}
.water_box3 > ul > li > .bg9 {text-align:center; background:url("/images/sub/story/bg_sewer09.jpg") center 30px no-repeat; height:170px;}
.water_box3 > ul > li > ul > li {float:left; width:49%; padding:0 !important; margin-right:2%;}
.water_box3 > ul > li > ul > li:last-of-type {margin-right:0;}

.yes_box li p.bg8 {background:url("/images/sub/story/bg_yes08.png") 50px center no-repeat; padding:60px 0 60px 50%;}

@media all and (max-width:414px) {
.water_box3 {margin-bottom:30px;}
.water_box3 > ul > li {float:none; width:100%; margin-bottom:20px;}
.water_box3 > ul > li:nth-of-type(3) {margin-bottom:0;}

.yes_box li p.bg8 {background:url("/images/sub/story/bg_yes08.png") center 20px no-repeat; padding:150px 30px 30px 30px; background-size:80%;}
}

/* 우수토실이란? */
.yes_box .txt_line {border:1px dashed #007dc3; padding:10px 20px; display:inline-block; margin:7px 0;}
.yes_box li p.bg9 {background:url("/images/sub/story/bg_yes09.png") 60px center no-repeat; padding:40px 40px 40px 28%;}
.yes_box li p.bg10 {background:url("/images/sub/story/bg_yes10.png") 60px center no-repeat; padding:40px 40px 40px 28%;}
.soil_img_box {float:left;}
.soil_table_box {margin-left:330px;}

@media all and (max-width:414px) {
.soil_img_box {float:none;}
.soil_table_box {margin-left:0;}

.yes_box li p.bg9 {background:url("/images/sub/story/bg_yes09.png") center 20px no-repeat; padding:160px 30px 30px 30px;}
.yes_box li p.bg10 {background:url("/images/sub/story/bg_yes10.png") center 20px no-repeat; padding:180px 30px 30px 30px;}
}

/* 하수관거검사 */
.yes_box li p.bg11 {background:url("/images/sub/story/bg_yes11.jpg") 40px center no-repeat; padding:40px 40px 40px 59%;}

.water_box4 {margin-bottom:40px;}
.water_box4 > ul > li {float:left; width:49%; border:1px solid #ddd; border-radius:10px; padding:10px; box-sizing:border-box; margin-right:2%;}
.water_box4 > ul > li:last-of-type {margin-right:0;}
.water_box4 > ul > .bg1 {background:url("/images/sub/story/bg_test01.jpg") center 60px no-repeat;}
.water_box4 > ul > .bg2 {background:url("/images/sub/story/bg_test02.jpg") center 60px no-repeat;}
#contents .water_box4_tit {background:#01b9f3; color:#fff; text-align:center; padding:10px; border-radius:5px; text-align:center; font-size:17px;}
.water_box4 > ul > li p {padding:240px 10px 10px 10px;}

.con_img_box .test_txt {margin:0 auto; padding:10px 50px 0 50px;}

@media all and (max-width:414px) {
.yes_box li p.bg11 {background-position:center 20px; padding:120px 30px 30px 30px; background-size:80%;}

.water_box4 > ul > li {float:none; width:100%; margin-bottom:20px;}
.water_box4 > ul > li:last-of-type {margin-bottom:0;}
.con_img_box .test_txt {margin:0 auto; padding:10px 20px 0 20px; font-size:13px;}
}

/* 수밀검사 */
.water_box5 {margin-bottom:40px;}
.water_box5 > ul > li {float:left; width:32%; border:1px solid #ddd; border-radius:10px; padding:10px; box-sizing:border-box; margin-right:2%;}
.water_box5 > ul > li:nth-of-type(3n) {margin-right:0;}
.water_box5 > ul > li:nth-of-type(1), .water_box5 > ul > li:nth-of-type(2), .water_box5 > ul > li:nth-of-type(3) {margin-bottom:10px;}
.water_box5 > ul > .bg1 {background:url("/images/sub/story/bg_watertight01.jpg") center 65px no-repeat;}
.water_box5 > ul > .bg2 {background:url("/images/sub/story/bg_watertight02.jpg") center 65px no-repeat;}
.water_box5 > ul > .bg3 {background:url("/images/sub/story/bg_watertight03.jpg") center 65px no-repeat;}
.water_box5 > ul > .bg4 {background:url("/images/sub/story/bg_watertight04.jpg") center 65px no-repeat;}
.water_box5 > ul > .bg5 {background:url("/images/sub/story/bg_watertight05.jpg") center 65px no-repeat;}
.water_box5 > ul > .bg6 {background:url("/images/sub/story/bg_watertight06.jpg") center 65px no-repeat;}
#contents .water_box5_tit {background:#01b9f3; color:#fff; text-align:center; padding:10px; border-radius:5px; text-align:center; font-size:17px;}
.water_box5 > ul > li p {padding:150px 0 10px 0; text-align:center;font-size: 95%;letter-spacing: -0.06px;}

.yes_box li p.bg12 {padding:40px;}

.watertight_step {margin-bottom:40px;}
.watertight_step li { border:1px solid #ddd; border-radius:10px; padding: 50px 30px;box-sizing:border-box; margin-bottom:10px;}
.watertight_step li .num {font-size:20px; font-weight:600; color:#007dc3;}
.watertight_step .bg1 {background:url("/images/sub/story/bg_watertight_step01.jpg") 95% center no-repeat;}
.watertight_step .bg2 {background:url("/images/sub/story/bg_watertight_step02.jpg") 95% center no-repeat;}
.watertight_step .bg3 {background:url("/images/sub/story/bg_watertight_step03.jpg") 95% center no-repeat;}
.watertight_step .bg4 {background:url("/images/sub/story/bg_watertight_step04.jpg") 95% center no-repeat;}
.watertight_step .bg5 {background:url("/images/sub/story/bg_watertight_step05.jpg") 95% center no-repeat;}

@media all and (max-width:414px) {
.water_box5 > ul > li {float:none; width:100%; margin-bottom:10px;}
.water_box5 > ul > li:last-of-type {margin-bottom:0;}

.watertight_step {margin-bottom:30px;}
.watertight_step li { border:1px solid #ddd; border-radius:10px; padding:30px; box-sizing:border-box; margin-bottom:10px;}
.watertight_step li .num {font-size:13px;}
.watertight_step .bg1, .watertight_step .bg2, .watertight_step .bg3, .watertight_step .bg4 {background-position:center 10px; padding:100px 30px 20px 30px;}
.watertight_step .bg5 {background-position:center 10px; padding:140px 30px 20px 30px;}
}

/* sy_box */
.sy_box { text-align:left; width:90%; margin:0 auto;}
.sy_box p { padding:0;}
.sy_box > div > img { width:100%; margin-bottom:20px;}
.sy_box .left { float:left; width:50%; padding:0 10px; box-sizing:border-box;}
.sy_box .right { float:left; width:50%; padding:0 10px; box-sizing:border-box;}


.sy_box2 { width:100%; margin:0 auto;}
.sy_box3 { width:100%; margin:0 auto;}
.sy_box3 .left { width:46%;}
.sy_box3 .right { width:54%;}

.sy_water_box { margin-bottom:20px;}
.sy_water_box li {float:left; padding:0 27px 15px 0; background:url("/images/sub/story/water_arrow.png") 96% center no-repeat; background-size:15px;}
.sy_water_box li img { width:100%;}
.sy_water_box li:last-child { background:none;}
.sy_water_box li .box_in { border:1px solid #ddd; border-radius:10px; padding:10px; width:115px; height:190px; text-align:center;}
.sy_water_box li p { margin-top:10px; text-align:left;font-size: 95%;}



.yes_box li p.bg_sy1 {background:url("/images/sub/story/img_sy12_11.jpg") 90px center no-repeat; background-size:13%;}
.yes_box li p.bg_sy2 {background:url("/images/sub/story/img_sy12_12.jpg") 90px center no-repeat; background-size:13%;}

.box_sy_right { background:#feefec; padding:10px;}
.box_sy_right.bg2 { background:#e7eef8;}
.box_sy_right .img { float:left; padding-right:10px;}


@media all and (max-width:767px) {
.sy_img { width:100%;}

.sy_box3 .left { width:100%;}
.sy_box3 .right { width:100%;}

.sy_water_box li { width:33.33%; box-sizing:border-box;}
.sy_water_box li img { width:auto; }
.sy_water_box li .box_in { width:100%; height:220px; box-sizing:border-box;}

.yes_box li p.bg_sy1, .yes_box li p.bg_sy2 {background-position: 7% center;}
}

@media all and (max-width:414px) {
.sy_box .left { width:100%;}
.sy_box .right { width:100%; margin-top:20px;}
.sy_water_box li img { width:auto; float:center;}
.sy_water_box li .box_in { height:135px;}
.sy_water_box li p { float:left; width:100%; margin-left:10px;}

.box_sy_right .img { float:left; padding:0 0 10px 0; width:100%;}
.box_sy_right p { padding-left:10px;}

.yes_box li p.bg_sy1, .yes_box li p.bg_sy2 {background-position:center 20px; background-size:30%;}
}

/* 배수설비유지관리 */
.faci_box li { float:left; width:31.33%; border:1px solid #ddd; border-radius:10px; padding:10px; margin-right:3%; box-sizing:border-box;}
.faci_box li:last-child { margin-right:0;}
#contents .faci_box_tit { background:#01b9f3; color:#fff; text-align:center; padding:10px; border-radius:5px; text-align:center; font-size:16px;}
.faci_box li.bg1 {background:url("/images/sub/story/bg_faci_coop01.jpg") center 50% no-repeat;}
.faci_box li.bg2 {background:url("/images/sub/story/bg_faci_coop02.jpg") center 50% no-repeat;}
.faci_box li.bg3 {background:url("/images/sub/story/bg_faci_coop03.jpg") center 50% no-repeat;}
.faci_box p { padding-top:140px; text-align:center;}
.faci_box .em_red {position: absolute;margin-top: 3px;color:#f00}
.faci_clean li {font-size:12px; text-align:left !important;}
.faci_clean li span {color:#333;}

@media all and (max-width:1000px) {
#contents .faci_box_tit { font-size:14px;}
.faci_box p { padding-top:150px; text-align:center;}
}

@media all and (max-width:767px) {
.faci_box li { height:320px;}
.faci_box li p {font-size: 95%;}
.faci_box li:last-child p { padding-top:170px;}
.faci_box li.bg1 {background:url("/images/sub/story/bg_faci_coop01.jpg") center 50% no-repeat; background-size:100%;}
.faci_box li.bg2 {background:url("/images/sub/story/bg_faci_coop02.jpg") center 50% no-repeat; background-size:100%;}
.faci_box li.bg3 {background:url("/images/sub/story/bg_faci_coop03.jpg") center 50% no-repeat; background-size:100%;}
}

@media all and (max-width:414px) {
.faci_box li { width:100%; height:320px; margin-right:0; margin-bottom:20px;}
.faci_box li:last-child { margin-bottom:0;}
.faci_box li:last-child p { padding-top:210px;}
.faci_box p { padding-top:210px; text-align:center;}
}

/* 배수설비구성은 */
.sanitary { width:100%;}
.sanitary .left { float:left; width:48%; margin-right:4%; box-sizing:border-box;}
.sanitary .right {float:left; width:48%; box-sizing:border-box;}

.yes_box li p.bg_sy16 {background:url("/images/sub/story/bg_sy16.jpg") 40px center no-repeat; background-size:25%;}


@media all and (max-width:1000px) {
.sanitary .left { width:100%;}
.sanitary .right { width:100%;}
}

@media all and (max-width:767px) {
.san_box .yes_box li p {padding: 30px 30px 30px 48%;}
.yes_box li p.bg_sy16 {background:url("/images/sub/story/bg_sy16.jpg") 25px center no-repeat; background-size:40%;}
}

@media all and (max-width:414px) {
.san_box .yes_box li p {padding:120px 30px 20px 30px;}
.yes_box li p.bg_sy16 {background-position:center 20px; background-size:70%;}
}

/* 안전사고예방 */
@media all and (max-width:414px) {
.m_accident .con_img_box {width:100%; padding:10px; box-sizing:border-box;}
}

/* 하수도 관련업무 */
.work_org_box {position:relative; text-align:center; margin:30px 0 100px 0;}
.work_box {background:url("/images/sub/story/bg_work_center.png") center 50px no-repeat; height:600px;}
.work_box > ul {width:648px; margin:0 auto;}
.work_box > ul > li {float:left; min-height:320px; box-sizing:border-box; width:204px;}
.work_box .bg1 {background:url("/images/sub/story/bg_work01.png") left top no-repeat; padding-top:220px; margin:0 60px;}
.work_box .bg2 {background:url("/images/sub/story/bg_work02.png") left top no-repeat; padding-top:220px; margin:0 60px;}
.work_box .bg3 {background:url("/images/sub/story/bg_work03.png") left top no-repeat; padding-top:220px; margin:0 60px;}
.work_box .bg4 {background:url("/images/sub/story/bg_work04.png") left top no-repeat; padding-top:220px; margin:0 60px;}

@media all and (max-width:1000px) {
.work_org_box {margin:10px 0 50px 0;}
}

@media all and (max-width:767px) {
.work_box {background:none;}
.work_box > ul {width:100%;}
.work_box > ul > li {float:left; min-height:320px; box-sizing:border-box; width:50%;}
.work_box .bg1, .work_box .bg2, .work_box .bg3, .work_box .bg4 {margin:0 !important; background-position:center top; background-size:70%; padding-top:220px;}
.work_box > ul > li > ul > li {margin:0 10%; font-size:14px;}
}

@media all and (max-width:414px) {
.work_box > ul > li { min-height:300px;}
.work_box .bg1, .work_box .bg2, .work_box .bg3, .work_box .bg4 {padding-top:120px;}
.work_box > ul > li > ul > li {margin:0 5%;}
}