@charset "utf-8";
a{text-decoration: none !important;}
button{border: 0px; cursor: pointer;}
/* LSM20210924 아리수 챗봇 추가로 인해 수정 */
/* .wrap{overflow-x: hidden;} */
body{-webkit-text-size-adjust: 100%;}
.wrap{overflow: hidden;}
.header{border-bottom: 1px solid #dbdbdb;}
.header .search button.mb{display: none;}
.header .login-group{background: #f8f8f8; height: 35px; line-height: 35px; font-size: 14px; box-sizing: border-box; padding: 0 10px;}
.header .login-group *{vertical-align:middle;}
.header .login-group > div{max-width:1200px; color:#777;  margin: 0 auto; text-align: right; height: 40px; }
.header .login-group > div a{color:#555; display : inline-block}
.header .gnb-group > div{max-width:1200px;margin: 0 auto; position: relative; padding: 0 10px; box-sizing: border-box;}
.header .btn-plus,.header .btn-minus{font-size: 0px; background: url("../../images/cyber/common/minus.png") no-repeat center center; width: 17px; height: 17px; display: inline-block;}
.header .btn-plus{background-image: url("../../images/cyber/common/plus.png"); margin-left: 1px; margin-right: 0px;}
.header .gnb{display: block; position: absolute; left:190px; top:30px; z-index: 999;}
.header .gnb ul li{float: left;}
.header .gnb > ul > li{ padding-left: 40px;}
.header .gnb > ul > li > a{font-size: 19px; font-weight: bold; display: block; height: 60px;}
.header .gnb > ul > li > a:before{content:""; display: inline-block; width: 5px; height: 5px; border-radius: 180px; background-color: #d4d4d4; position: relative; left:-20px; top:-5px;}
.header .gnb > ul > li:first-child > a:before{display: none;}
.header .gnb-m{position: absolute; right: 0px; top:50%; min-width: 300px; padding-right: 185px; box-sizing: border-box; margin-top: -20px;  }
.header .search{position: relative; }
.header .search input{ height: 40px; border: 1px solid #dbdbdb; width: 100%; padding-right: 40px; box-sizing: border-box; text-indent: 5px;}
.header .search button{background:url("../../images/cyber/common/btn_search.png") no-repeat center center; display: block; position: absolute; right: 0px; top:0px; width: 40px;  height: 40px; text-indent:-9999px;}
.header .view{margin-left: 10px;}
.header .view span{position: relative; top:-3px;}
.header h1{padding-top: 15px; padding-bottom: 21px;}
.title-group{border-bottom: 2px solid #333; margin-bottom: 30px;}
.title-group:after{content:""; clear: both; display: block;}
.title-group h2{float: left; padding-bottom:15px;}
.title-group .location{float: right; position: relative; top:5px; font-size: 14px;}
.tablet,.mobile-menu{display: none;}
.headerBtn{border: 1px solid #dbdbdb; position: absolute; right: 0px; top:0px;}
.headerBtn a{padding: 11px 10px; display: inline-block; background-color: #f4f5f6; color:#3d3e3f;}
.headerBtn a:first-child{color:#fff; background-color:#2d66ba; }

#contents{margin:40px 0;}
.content_row1 > div{display: block; font-size: 0;margin: 0; padding: 0; width:100%; max-width: 1200px; position: relative; box-sizing: border-box; padding-right: 428px; box-sizing: border-box;}
.content_row1 > div:after{content:""; display: block; clear: both;}
.content_row2 > div{display: block; margin: 0; padding: 0; width:100%; max-width: 1200px; position: relative;}
.content_row2 > div:after{content:""; display: block; clear: both;}
.content_row3 > div{display: block; margin: 0; padding: 0; width:100%; max-width: 1200px; position: relative; z-index: 999; }
.content_row3 > div:after{content:""; display: block; clear: both;}

/* 메인 비주얼 영역 (롤링배너) */
.visual .slide1 { min-width: 200px; max-width: 100%; padding: 0; position: relative;}
.visual .cycle-slideshow, .cycle-slideshow * {
	/* 2020.11.17 bhr 웹 호환성 수정 */
	/* -webkit-box-sizing: border-box; */
	/* -moz-box-sizing: border-box; */
	box-sizing: border-box;
}
.visual .cycle-slideshow div.slide { width: 100%; height: 100% }
.visual .cycle-slideshow img { position: absolute; top: 0; left: 0; width: 100%; padding: 0; display: block; min-height: 269px;}
.visual .cycle-slideshow img:first-child { position: static; z-index: 100;}
.visual .cycle-pager { text-align: center;  z-index: 200; position: absolute; top: 0px; right: 20px; overflow: hidden;}
.visual .cycle-pager span { font-family: arial; font-size: 42px; width: 16px; height: 16px; display: inline-block; color: #ddd; cursor: pointer; margin: 0 1px; display: none;}
.visual .cycle-pager span.cycle-pager-active { color: #2d66ba;}
.visual .cycle-pager > * { cursor: pointer;}

/* 서비스 바로가기 */
.main_service{display: block; border-top: 1px #dbdbdb solid; border-right: 1px #dbdbdb solid; width: 428px; position: absolute; right:0px; top:0px;}
.main_service h3{font-size: 20px; display: inline-block; vertical-align:top; border-right: 1px #dbdbdb solid; padding: 90px 15px; margin: 17px 0;}
.main_service ul{width: 70%; display: inline-block; padding: 24px 10px;}
.main_service ul li{display: inline-block; text-align: center; margin: 12px 0; width: 50%;}
.main_service ul li a{font-size: 14px; display: inline-block; padding-top: 70px; padding-left: 10px; padding-right: 10px;}
.main_service ul li .servicelist1{ background: url(../../images/cyber/main/serviceico1.png) center 0 no-repeat; }
.main_service ul li .servicelist2{ background: url(../../images/cyber/main/serviceico2.png) center 0 no-repeat; }
.main_service ul li .servicelist3{ background: url(../../images/cyber/main/serviceico3.png) center 0 no-repeat; }
.main_service ul li .servicelist4{ background: url(../../images/cyber/main/serviceico4.png) center 0 no-repeat; }
.main_service ul li a span{display: block; font-weight: bold;}
.m-left{width:calc(100% - 428px);}
.c-group{position: relative;}
.office_tel{position: absolute; right: 0px;}

/*header 부분*/
.gnb>ul>li>ul{ display:none; position:absolute; left:22px; top:51px; width:1000px; text-align:center; height:50px; font-weight:200;}
.gnb>ul>li>ul:before{content:""; display: block; position: absolute; width: 10000px; height:50px; left:-5000px; background: url("../../images/cyber/common/main-menu_open_02.png") repeat left top;}
.gnb>ul>li>ul>li{ display:inline-block; position: relative;}
.gnb>ul>li>ul>li>a{ font-size:14px; color:#fff; text-decoration:none; display:block; padding:15px 5px; margin:0 5px; font-weight:400;position: relative;}
.gnb>ul>li>ul>li>a:hover{ color:#fff; text-decoration:underline!important;}
.gnb>ul>li>ul>li.active-m a{color:yellow;}
.gnb>ul>li.on>a, .gnb>ul>li.menu_on>a, .gnb>ul>li.menu_on>ul>li.menu_on>a{ color:#13589f;}
.gnb>ul>li.on>ul{ display:block !important; z-index:9990;}
.gnb>ul>li.menu_on>ul{ display:block;}

.gnb>ul>li>ul>li::before{content:''; width: 1px; height: 10px; background: #fff; position: absolute; display: inline-block; left: -3px; top: 20px;}
.gnb>ul>li>ul>li:first-child::before{content:''; display: none;}
.blue{color:#3298df;}
.under-line{text-decoration: underline;}
/*2차 메뉴 위치 조정*/
.gnb>ul>li:nth-child(1)>ul>li:first-child{}
.gnb>ul>li:nth-child(2)>ul>li:first-child{ }
.gnb>ul>li:nth-child(3)> ul > li:first-child{margin-left:140px;}
.gnb>ul>li:nth-child(4)>ul>li:first-child{ }
.gnb>ul>li:nth-child(5)> ul > li:first-child{margin-left:290px;}
.gnb > ul > li > ul > li > a {margin-right: 10px;}

/* 수도요금 간편조회 */
.check_charge{display: inline-block; border: 5px #2d66ba solid; background: url(../../images/cyber/main/check_charge_bg.png) 0 0 no-repeat; padding: 13px 19px; float: left; width: 100%; padding-right: 310px; box-sizing: border-box; padding-left: 100px; min-height: 145px;}
.check_charge *{box-sizing: border-box;}
.check_charge h3{display: inline-block; width: 84px; vertical-align: top; padding-top: 27px; font-size: 20px; margin-right: 8px; position: absolute; left:20px; top:20px;}
.check_charge form{display: block; position: relative; box-sizing: border-box; width:100%; padding-right: 110px; margin-top: 5px;}
.check_charge label{font-weight: 600; font-size: 15px; margin-right: 9px;}
.check_charge input{width:100%; height: 30px; border: 1px #9d9d9d solid;margin:0; padding: 0 5px; }
.check_charge button[type="submit"]{ width: 94px; font-size: 16px; height: 99px; background: #2d66ba; border: 0px; color: #fff; vertical-align: top; display: block; position: absolute; top:0px; right:10px;}
.check_charge div{position: relative; padding: 0px;}
.check_charge div button{position: absolute; right: 0px; top:0px;}
.input-g{position: relative; width: 100%; box-sizing: border-box;}
.input-g > div{position: relative; padding-left: 60px; box-sizing: border-box; margin-top:5px;}
.input-g > div:first-child{margin-top: 0px;}
.input-g > div:first-child input{padding-right: 30px;}
.input-g > div label{position: absolute; left:0px; top:7px;}
.input-g > div input{width: 100%; margin: 0px;}
.input-g > div .ui-datepicker-trigger{display: block; height: 30px; font-size: 0px; width: 30px; background: url("../../images/cyber/main/cal.png") no-repeat center center;}

.check_charge div.myForm{display: block; position: relative; box-sizing: border-box; width:100%; padding-right: 110px; margin-top: 5px;} /* 추가 */

/* 전화문의 */
.office_tel{background:#2d66ba; display:block; float: left; vertical-align: top; padding: 16px 10px 20px 10px; box-sizing: border-box; min-height: 145px; background-size: 40%; width: 310px;}
.office_tel:after{content: ""; display: block; clear: both;}
.office_tel h3{color: #fff; display:block; padding: 5px; font-size: 20px; margin-bottom: 22px;}
.office_tel > span{display: block; color: #fff; float: left; box-sizing: border-box; width: 50%; text-align: center;}
.office_tel span a{color: #fff; font-size: 14px;}
.office_tel strong{color: #fff; font-weight: normal;}

/* 배너 */
.benner{display:block; vertical-align: top; position: absolute; right:0px; top:0px; width: 428px;}/*width: calc(100% - 770px);*/ /* LSM20211001 width값 추가 */
.benner .btn-group{position: absolute; left:10px; top:10px; z-index: 999;}
.benner .btn-group2{position: absolute; left:10px; top:2px; z-index: 999;}
.benner .btn-group:after{content:""; display: block; clear: both;}
.benner .btn-group button{display:block; float: left; width: 30px; height: 30px; background:url("../../images/cyber/main/play.png") no-repeat center center; font-size: 0px;}
.benner .btn-group button#pause{background-image: url("../../images/cyber/main/stop.png");}
.benner .btn-group button#prev{background-image: url("../../images/cyber/main/left.png");}
.benner .btn-group button#next{background-image: url("../../images/cyber/main/right.png");}
.benner .btn-group2 button{display:block; float: left; width: 20px; height: 22px; background:url("../../images/cyber/main/play2.png") no-repeat center center; font-size: 0px;}
.benner .btn-group2 button#pause{background-image: url("../../images/cyber/main/stop2.png");}
.benner .btn-group2 button#prev{background-image: url("../../images/cyber/main/left2.png");}
.benner .btn-group2 button#next{background-image: url("../../images/cyber/main/right2.png");}
.benner .slide2 {  padding: 0; position: relative;}
.benner .cycle-slideshow, .cycle-slideshow * {
	/* 2020.11.17 bhr 웹 호환성 수정 */
	/* -webkit-box-sizing: border-box; */
	/* -moz-box-sizing: border-box; */
	box-sizing: border-box;
}
.benner .cycle-slideshow div.slide { width: 100%; height: 100% }
.benner .cycle-slideshow img { position: absolute; top: 0; left: 0; width: 100%; padding: 0; display: block; height: 262px;} /*LSM20210827 min-height: 282px;를 height: 262px로 수정*/
.benner .cycle-slideshow img:first-child { position: static; z-index: 100;}
/* .benner .cycle-pager { text-align: center;  z-index: 200; position: absolute; top: 0px; right: 20px; overflow: hidden;} */ /* 2018-08-19 메인홈페이지 배너 사이클 페이저 보이도록 수정 */
.benner .cycle-pager { text-align: center;  z-index: 200; position: absolute; top: 2px; left: 80px;}
.benner .cycle-pager span { font-family: arial; font-size: 21px; width: 20px; height: 19px; display: inline-block; color: white; cursor: pointer; margin: 0 1px;}
.benner .cycle-pager span.cycle-pager-active { color: #3DA9D4; font-weight: bold; }
.benner .cycle-pager > * { cursor: pointer;}


/* 민원바로가기 */
.sector_box{display: inline-block; vertical-align: top; border-left: 1px #dbdbdb solid; padding: 20px 15px;}
.sector_box h3{font-size: 20px; display: inline-block; vertical-align: top;border-right: 1px #dbdbdb solid; padding:15px 20px 15px 0;}
/* .sector_box h3 span{color: #ec6733; } */
.sector_box h3 span{color: #CD4713; }
.sector_box .sector_list{display: inline-block;}
.sector_box ul li{display: inline-block; text-align: center;}
/* .sector_box .sector_list a{display: inline-block; vertical-align: top; font-size: 14px; font-weight: bold;} */ /* 2018-09-18 메인페이지 민원신ㅊ청 바로가기 위치 수정 */
.sector_box .sector_list a{display: inline-block; font-size: 14px; font-weight: bold;}
.sector_box .sector_list span{display: block; width: 100px; height: 60px; }
.sector_box .sector_list1{ background: url(../../images/cyber/main/sector_list_ico1.png) center top no-repeat; background-position-y: 8px;}
.sector_box .sector_list2{ background: url(../../images/cyber/main/sector_list_ico2.png) center top no-repeat; background-position-y: 9px;}
.sector_box .sector_list3{ background: url(../../images/cyber/main/sector_list_ico3.png) center top no-repeat; background-position-y: 7px;}
.sector_box .sector_list4{ background: url(../../images/cyber/main/sector_list_ico4.png) center top no-repeat; background-position-y: 6px;}
.sector_box .sector_list5{ background: url(../../images/cyber/main/sector_list_ico5.png) center top no-repeat; background-position-y: 13px;}
.sector_box .sector_list6{ background: url(../../images/cyber/main/sector_list_ico6.png) center top no-repeat; background-position-y: 6px;}

/* 자주하는 질문 */
.qna{display: block; float: left; background: url(../../images/cyber/main/qna_bg.png) 0 0 repeat; padding: 19px; padding-left: 170px; padding-right: 110px; position: relative; width: calc(100% - 428px); box-sizing: border-box; min-height: 150px;}
.qna h3{font-size: 20px; color: #fff;  vertical-align: top; position: absolute; left:25px; top:35px;}
.qna ul{padding: 0px;}
.qna ul li{margin: 8px 0;}
.qna ul li a {color: #fff; display: block;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
.qna_more{position: absolute; right: 30px;top: 20px; vertical-align: top;}
.qna_more a{display: inline-block; color: #fff;}
.qna_more .qna_moreico{display: inline-block;background: url(../../images/cyber/main/qna_more.png) 0 0 no-repeat; width: 31px; height: 31px; margin-left: 10px; margin-top: -6px; vertical-align: top;}

/* 관련기관 바로가기 */
/* LSM20210812 사이버고객센터 메인화면 수도사업소 사이트 삭제로인해 관련기관 바로가기 삭제 및 padding 조절  */
/* .footer_banner{position: relative; width: 428px; display: block; padding: 15px 0; background: #434956; float: left; box-sizing: border-box; } */
.footer_banner{position: relative; width: 428px; display: block; padding: 15px 10px; background: #434956; float: left; box-sizing: border-box; }
.footer_banner .contents_box{position:relative; margin: 7px 0px 7px 13px; display: inline-block; background: #fff;}
/* LSM20210812 사이버고객센터 메인화면 수도사업소 사이트 삭제로인해 관련기관 바로가기 삭제 및 padding 조절  */
/* .footer_banner .contents_box .tit{position:relative;display:block;padding:14px 0 14px 15px;font-size:13px;line-height:16px;color:#454545;border:1px solid #a3a3a3;background:url(../../images/cyber/main/footer_banner_tit_on.png) 95% center no-repeat; width: 175px; letter-spacing:-2px;} */
.footer_banner .contents_box .tit{position:relative;display:block;padding:14px 0px 14px 15px;font-size:16px;line-height:16px;color:#454545;border:1px solid #a3a3a3;background:url(../../images/cyber/main/footer_banner_tit_on.png) 95% center no-repeat; width: 365px; letter-spacing:4px;}
.footer_banner .contents_box .cont_box{display:none;position:absolute;right:0;bottom:46px;width:100%;border:1px solid #4f5154;box-sizing:border-box;background-color:#fff; z-index: 300;}
.footer_banner .contents_box .cont_box li{padding:0 2%;box-sizing:border-box; font-size: 13px;}
.footer_banner .contents_box:nth-child(2) .cont_box li{ float: left; width: 50%;  padding:0 2%;box-sizing:border-box; font-size: 13px; }
.footer_banner .contents_box:first-child .cont_box{right:inherit;left:0;}
.footer_banner .contents_box:nth-child(3) .cont_box{right:inherit;left:0;}
.footer_banner .contents_box .tit.on{color:#fff;border:1px solid #3f3f3f;background-image:url(../../images/cyber/main/footer_banner_tit_off.png);background-color:#2d66ba;}
.footer_banner .contents_box .cont_box li a{position:relative;display:block;padding:5px 10px 5px 10px;font-size:13px;line-height:16px;color:#555;letter-spacing:-1px;}
.footer_banner .contents_box .cont_box li a:before{position:absolute;left:0;top:11px;display:inline-block;width:6px;height:1px;content:'';background-color:#555;}
.g-group:after,.c-group:after{content:""; display: block; clear: both;}
.mobile-con{display: none;}


/*풋터*/
.footer{width: 100%; border-top:1px solid #dbdbdb; margin-top: 40px; }
.footer > div{margin: 0 auto; max-width: 1200px; position: relative;}
.footer > div .add{position:relative; padding-left: 200px; padding-top: 35px; padding-bottom: 45px;}
.footer > div .add > img{position: absolute; left:0px; top:40px;}
.footer > div .list{}
.footer > div .list ul:after{content: ""; display: block; clear: both;}
.footer > div .list li{float: left; border-left:1px solid #c6c6c6; margin-bottom: 15px;}
.footer > div .list li:first-child{border: 0px;}
.footer > div .list li:first-child a{padding-left: 0px;}
.footer > div .list li a{font-size: 1.2em; color:#3b3b3b; display: block; padding: 0 23px;}
.footer address{color:#828282; font-size: 1em; font-style: normal; margin-bottom: 10px;}
.footer .copyright{font-size: 0.9em; color:#2d66ba;}
.footer .top-g{position: absolute; top:0px; right: 0px; padding-right: 120px; padding-top: 29px;}
/*.footer .top-g img#iSeoulU{padding-top: 25px; padding-right: 100px;}*/
.footer .top-g img#iSeoulU{padding-top: 5px; padding-right: 100px;}
.footer .top-g a#WA_mark{margin-top:25px; margin-right:140px;  background: #fff;}
.footer .top-g a{color: #fff; width: 66px; height: 60px; display: block; background: #626878; text-align: center; line-height: 80px; position: absolute; right:0px; top:0px;}
.footer .top-g a:after{content:">"; display: block; color:#fff; position: absolute; left:-10px; top:-2px; width: 40px; height: 40px; transform: rotate(-90deg); font-size: 1.5em;}
.mobile-con{display: none;}
table.ui-datepicker-calendar { display:none; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{background: #2d66ba; color:#fff; border: 0px;}
.ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all{background-color: #666;}
.ui-datepicker-close.ui-state-hover{background-color: #2d66ba !important;}
.ui-datepicker-title *{vertical-align: middle;}
.ui-datepicker .ui-datepicker-title{ position: relative;  top: -1px; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{width: 48%; margin: 0 1%;}
.ui-widget-header{background: #2d66ba !important; border: 0px;}
.ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all.ui-state-hover{background: #666 !important; }
.ui-state-hover{background:rgba(255,255,255,0.2) !important; border: 0px !important;}
.ui-icon{background-image: url("../../images/cyber/main/ui-icons_222222_256x240.png") !important;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{border: 1px solid rgba(255,255,255,0.1); color:#fff; background-color: rgba(255,255,255,0.2);}
.ui-datepicker select.ui-datepicker-month option, .ui-datepicker select.ui-datepicker-year option{color:#2d66ba;}
@media only screen and (max-width:1200px){
    .quick{display: none;}
    .input-g > div{padding-left: 70px; }
    .office_tel{float: none; width: 100%; position: relative; background-size: auto 83%; background-position: right center; }
    .check_charge{padding-right: 110px; float: none; border-bottom: 3px solid #2d66ba; background-size: 100% auto !important; background-position: left bottom !important; }
    .check_charge form div{width: 100%;}
    .check_charge input{width: calc(100% - 100px);}
    .check_charge input[type="submit"]{position: absolute; right: 20px; top:16px;}
    .sector_box{position: absolute; left:0px; bottom:-125px; width: 100%; box-sizing: border-box; padding-left: 120px;}
    .sector_box .sector_list{width: 100%;}
    .sector_box h3{position: absolute; left:20px;}
    .sector_box ul li{width: 16%;}
    .content_row2{padding-bottom: 140px; position: relative;}
    .header .search .search-g.on{display: block;}
     h5.f_logo{margin-left: 20px;}
    .header .search button.mb{border: 1px solid #ccc; display: block;}
    .header .search .search-g{display: none; position: relative; z-index: 999;}
    .footer > div .list li a{font-size: 0.9em;}
    .header .search .toggle{position: absolute; left:0px; top:0px; width: 20px; background:url("../../images/cyber/common/arr.png") no-repeat center center rgba(0,0,0,0.0); border-right:1px solid #ddd; background-size: 40%; text-indent:-9999px;}
    .header .search input{padding-left: 30px;}
    .footer > div .add > img{left:10px;}
    .office_tel{min-height:50px; padding: 15px 20px; background-image: none;}
    .office_tel *{vertical-align: middle;}
    .office_tel h3,.office_tel > span{display:block; margin-bottom: 0px; float: left; }
    .office_tel > span{ text-align: center; width: calc(50% - 50px); display: inline-block;}
    .check_charge{padding: 20px; min-height: 212px;}
    .check_charge h3{position: relative; width: 100%; display: block; padding: 0px; top:0px; left:0px; margin-bottom: 25px;}
    .header .gnb > ul > li{padding-left: 35px;}
    .office_tel strong{display: block; color:#f69018; }
    .office_tel strong:last-child{font-weight: bold; color:#fff; }
    .benner .cycle-slideshow img {min-height: 282px;} /* LSM20210827 min-height 추가 */
}

@media only screen and (max-width:1024px){
    #seoul-common-gnb{display: block;}
    .login-group{display: none;}
    .wrap{width: 100%;}
    #header{background-image: none;}
    .content_row1 > div{padding-right: 0%;}
    .qna_more{left:65px; top:80px; right:auto;}
    .qna{padding-right: 19px; width: 60%;}
    .visual{}
    .visual { width: 100%;}
    .banner{width: 40%;}
    .main_service h3{font-size: 20px; position: absolute; left:0px; top:0px; padding: 10px; display: block; min-height: 120px;  margin: 0px; margin-top: 10px; width: 120px; box-sizing: border-box; text-align: center;}
    .main_service h3 span{position: relative; top:40px; display: inline-block; text-align: left;}
    .main_service ul{width: 100%;}
    .main_service ul li{ width: 25%;}
    .main_service ul li a{}
    .visual .cycle-slideshow img{min-height: 160px; width: 100%;}
    .main_service{width: 100%; position: relative; right:0px; box-sizing: border-box; padding-left: 100px;}
    /* #header .gnb h1 img{max-width: 145px; vertical-align:middle;}
    #header .gnb ul{margin-left: 20px;}
    #header .gnb ul.gnb_menu li{background: url(../../images/cyber/common/cir.png) 6px 11px no-repeat; font-size: 16px; padding-left:21px;}
    #header .gnb ul li{padding-left: 26px;}
    #header .gnb ul li a{font-size: 16px;} */
    #header .gnb_box>.wrap{text-align: center;}
    #header .gnb h1 img{max-width: 145px; vertical-align:middle;}
    #header .gnb ul{margin-left: 20px;}
    #header .gnb ul.gnb_menu li{background: url(../../images/cyber/common/cir.png) 6px 11px no-repeat; font-size: 16px; padding-left:21px;}
    #header .gnb ul li{padding-left: 26px;}
    #header .gnb ul li a{font-size: 16px;}
    #header .search_box {margin-left: 35px;}
    #header .search_box .search {border: none;}
    #header .search_box .search input.text{position: absolute; top:40px;}
    #header .search_box .search input[type="submit"] { width: 30px; height: 30px; background:url(../../images/cyber/common/search_open.png) 0 0 no-repeat #434956;overflow:hidden; margin-top: 5px; background-size: 100%;}
    #header .gnb_link{ vertical-align: top; float: none; margin-top: 14px}
    #header .gnb_link ul li {padding:5px 2px;}
    #header .gnb_link ul li a{font-size: 12px;}
    .header .view{display: none;}
    .header .gnb{display: none;}
    .tablet{display: block;}/*, .mobile-menu*/
    .tablet{position: absolute; right: 0px; top:5px;}
    .tablet button{background: url("../../images/cyber/common/m-menu.png") no-repeat center center; width: 30px;  height: 34px; background-size: 100%;}
    .headerBtn{right:50px;}
    .headerBtn a:last-child{display: none;}
    .header .gnb-m{padding-right: 165px;}
    /* .mobile-menu.on{display: block; position: fixed; left:0px; top:0px; background: #13589f; color:#fff; width: 80%; max-width: 400px;  z-index: 9990; height: calc(100vh - 0px); }
    .mobile-menu.on a{color:#fff; display: block; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1);}
    .mobile-menu.on > ul > li > a{background-color: rgba(255,255,255,0.1);}
    .mobile-menu.on > ul{overflow-y: auto; height: calc(100vh - 117px);}
    .mobile-menu.on ul > li > ul > li > a{padding-left: 20px;}
    .mobile-menu.on ul > li > ul > li > a:before{content:"-"; display: inline-block; margin-right:10px;}
    .mobile-bg{display: none;}
    .m-on{overflow:hidden;}
    .m-close{position: absolute; right:-33px; top:3px; width: 30px; height: 30px; display: block; background: url("../../images/cyber/common/x.png") no-repeat center center; }
    .m-on .mobile-bg{position: fixed; left:0px; right:0px; top:0px; bottom:0px; background: rgba(0,0,0,0.4); display: block; z-index: 9990;} */
    .mobile-menu.on{display: block; position: absolute; left:0px; top:0px; background: #13589f; color:#fff; width: 80%; max-width: 400px; height: 100vh;  z-index: 9990; }
    .mobile-menu.on a{color:#fff; display: block; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1);}
    .mobile-menu.on > ul > li > a{background-color: rgba(255,255,255,0.1);}
    .mobile-menu.on ul > li > a:before,.mobile-menu.on ul > li > a.depth1.on:before{content:"-"; display: inline-block; margin-right:10px;}
	.mobile-menu.on ul > li > a.depth1:before,.mobile-menu.on ul > li > a.depth1.on.to:before,.mobile-menu.on ul > li.active > a.depth1.to:before{content:"+";}
	.mobile-menu.on ul > li.active > a.depth1:before{content: "-";}
	.mobile-menu.on > ul ul ul{padding-left: 10px; background-color: rgba(0,0,0,0.2);}
    .mobile-menu.on > ul{overflow-y: auto; height: calc(100vh - 147px);}
    .mobile-menu.on ul > li > ul > li > a{padding-left: 20px;}
    .mobile-menu.on ul > li > ul > li > a:before,.mobile-menu.on ul > li > ul > li > a.depth2.on:before{content:"-"; display: inline-block; margin-right:10px;}
	.mobile-menu.on ul > li > ul > li > a.depth2:before,.mobile-menu.on ul > li > ul > li > a.depth2.on.to:before,.mobile-menu.on ul > li.active > ul > li.active > a.depth2.to:before{content:"+";}
	.mobile-menu.on ul > li.active > ul > li.active > a.depth2:before{content: "-";}
    .mobile-menu.on > ul ul ul a:before{content:"." !important; position: relative; top:-4px;}
    .mobile-menu.on .link-g ul > li > a:before{content:""; margin-right: 0px;} /* 햄버거메뉴 로그인 회원가입에 - 안생기게끔 처리 */
    .mobile-bg{display: none;}
    .m-on{overflow:hidden;}
    .m-close{position: absolute; right:-33px; top:5px; width: 30px; height: 30px; display: block; background: url("../../images/cyber/common/x.png") no-repeat center center; }
    .m-on .mobile-bg{position: fixed; left:0px; right:0px; top:0px; bottom:0px; background: rgba(0,0,0,0.4); display: block; z-index: 9990;}
    .link-g a{display: block; box-sizing: border-box; text-align: center; padding: 80px 0 20px 0 !important; background: url("../../images/cyber/common/m1.png") no-repeat center 20px; background-color: rgba(0,0,0,0.2);}
    .link-g li.join a{background-image: url("../../images/cyber/common/m1.png");}
    .link-g li.info a{background-image: url("../../images/cyber/common/m2.png");}
    .link-g li.login a{background-image: url("../../images/cyber/common/m4.png");}
    .link-g li.logout a{background-image: url("../../images/cyber/common/m5.png");}
    .link-g li.sitemap a{background-image: url("../../images/cyber/common/m3.png");}
    .link-g li{float: left; width:50%; box-sizing: border-box; padding: 1px;}
    .link-g:after{content:""; display: block; clear: both;}
    .header h1{margin-left: 20px;}
    .header .gnb-m{right:20px;}
    .top-g img{display: none;}
    .m-left{width: 60%;}
    .benner{width: 40%;}
    /* LSM20210812 사이버고객센터 메인화면 수도사업소 사이트 삭제로인해 관련기관 바로가기 삭제 및 padding 조절  */
    /* .footer_banner{width: 40%; min-height: 150px;} */
    .footer_banner{width: 40%; min-height: 150px; padding: 15px 15px;}
    /* LSM20210812 사이버고객센터 메인화면 수도사업소 사이트 삭제로인해 관련기관 바로가기 삭제 및 padding 조절  */
    /* .footer_banner .contents_box{margin: 0px; padding: 7px 0px 7px 7px; box-sizing: border-box; width: 49%; background: transparent;} */
    .footer_banner .contents_box{margin: 0px; padding: 7px 0px 7px 7px; box-sizing: border-box; width: 98%; background: transparent;}
    .footer_banner .contents_box .tit{width: 100%; box-sizing: border-box; background-color: #fff; padding: 14px 0 14px 1vw;}
    /* #gnb{overflow-y: auto !important; height: calc(100vh - 120px);}
    #gnb a.depth1 {cursor: pointer; display: block; padding: 20px; font-size: 16px;}
    #gnb a.depth1 span {margin-right: 10px;}
    #gnb li {list-style-type: none;}
    #gnb ul ul li a {
        -webkit-transition: all 0.15s;
        -moz-transition: all 0.15s;
        -o-transition: all 0.15s;
        -ms-transition: all 0.15s;
        transition: all 0.15s;
        background-color: rgba(255,255,255,0.1);
        padding: 20px;
    }
	#gnb ul ul ul li a {
        -webkit-transition: all 0.15s;
        -moz-transition: all 0.15s;
        -o-transition: all 0.15s;
        -ms-transition: all 0.15s;
        transition: all 0.15s;
        background-color: rgba(255,255,255,0.2);
        padding: 10px 20px;
        }
    #gnb ul ul {display: none;}
    #gnb li.active ul {display: block;} */
    
    #gnb{overflow-y: auto !important; height: calc(100vh - 120px);}
    #gnb a.depth1 {cursor: pointer; display: block; padding: 20px; font-size: 16px;}
    #gnb a.depth1 span {margin-right: 10px;}
    #gnb li {list-style-type: none;}
    #gnb ul ul li a {
    	/* 2020.11.17 bhr 웹 호환성 수정 */
        /* -webkit-transition: all 0.15s; */
        /* -moz-transition: all 0.15s; */
        /* -o-transition: all 0.15s; */
        /* -ms-transition: all 0.15s; */
        transition: all 0.15s;
        background-color: rgba(255,255,255,0.1);
        padding: 15px 40px 15px;
    }
    #gnb ul ul ul li a {
    	/* 2020.11.17 bhr 웹 호환성 수정 */
        /* -webkit-transition: all 0.15s; */
        /* -moz-transition: all 0.15s; */
        /* -o-transition: all 0.15s; */
        /* -ms-transition: all 0.15s; */
        transition: all 0.15s;
        background-color: rgba(255,255,255,0.2);
        padding: 10px 60px 10px;
    }
    #gnb ul ul:not(.active) {display: none;}
    #gnb ul ul ul{display: none;}
    
    /* #gnb li.active ul {display: block;} */
    /* #gnb ul li.active ul {display: block;} */
    #gnb ul li.active ul li.active ul{display: block;}
}

@media only screen and (max-width:910px){
    .footer_banner{padding: 5px 0px;}
    /* LSM20210812 사이버고객센터 메인화면 수도사업소 사이트 삭제로인해 관련기관 바로가기 삭제 및 padding 조절  */
    /* .footer_banner .contents_box{width:100%; padding: 3px 10px 3px 10px;} */
    .footer_banner .contents_box{width:100%; padding: 15px 15px 0px 15px;}
    /* LSM20210812 사이버고객센터 메인화면 수도사업소 사이트 삭제로인해 관련기관 바로가기 삭제 및 padding 조절  */
    /* .footer_banner .contents_box .tit{padding: 5px 0px 5px 1vw;} */
    .footer_banner .contents_box .tit{padding: 15px 0px 15px 1vw; letter-spacing: 2px;}
    .map em{display: none;}
    /*.check_charge{padding-right: 80px; padding-left: 70px;}
    .check_charge h3{font-size: 13px; width: 60px;}
    .check_charge label{font-size: 13px;}
    .check_charge input[type="submit"]{width: 75px;} */
}

@media only screen and (max-width:767px){
	#seoul-common-gnb{display: none;}
    #contents{margin: 0px;}
    .content-area{padding-top: 45px;}
    .visual{display: none;}
    .benner{width: 100%;}
    #footer { text-align: center; background: #434956;}
    .login-group{display: none;}
    #footer { text-align: center; background: #434956;}
    #footer h5.f_logo{display: none;}
    #footer .footer_nav ul li a{ color: #fff;}
    #footer .footer_info .add{  color: #fff;}
    #footer .footer_info .copy{ color: #fff;}
    #footer h6.iseoulu{display: none;}
    /* .search,.headerBtn{display: none;} *//* 2018-09-18 자주하는 질문 - 모바일화면 검색버튼 사라짐 */
    .headerBtn{display: none;}
    .header .search button.mb {display: none;}
    #footer .topBtn,#header .gnb > ul{display: none;}
    /*#footer h5.f_logo{display: block; width: auto;}
    #footer h5.f_logo img{width: auto;}
    #footer h6.iseoulu{display: block;  width: auto; float: none; margin: 0;}
    #footer h6.iseoulu img{ width: auto;}*/
    .m-left{width: 100%;}
    .benner{position: relative;}
    #header .gnb ul li ul{display:none !important;}
    .mobile-con{display: block;}
    .mobile-con ul:after{content:""; display: block;}
    .mobile-con ul li{float: left; width: 50%; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.1);}
    .mobile-con ul li a{display: block; text-align: center; padding: 15px; color:#fff;}
    .mobile-con ul li:nth-child(1) a{background: #13589f;}
    .mobile-con ul li:nth-child(1) a span{display: inline-block; padding-left: 20px; background: url("../../images/cyber/common/mo.png") no-repeat left center; background-size: auto 100%;}
    .mobile-con ul li:nth-child(2) a span{display: inline-block; padding-left: 30px; background: url("../../images/cyber/common/mo1.png") no-repeat left center; background-size: auto 100%;}
    .mobile-con ul li:nth-child(2) a{background: #434343;}
    .mobile-con ul li:nth-child(3) a{background: #f69018;}
    .mobile-con ul li:nth-child(4) a{background: #71a71a;}
    .qna{float: none; width: 100%;}
    .footer_banner{width: 100%; box-sizing: border-box; float: none; padding: 20px; background-color: #fff;}
    .footer_banner ul{box-sizing: border-box; width: 100%;}
    .footer_banner .contents_box{width: 100%; box-sizing: border-box; margin: 0px; margin-top: 10px; padding: 0px;}
    /* LSM20210812 사이버고객센터 메인화면 수도사업소 사이트 삭제로인해 관련기관 바로가기 삭제 및 padding 조절  */
    /* .footer_banner .contents_box:first-child{ margin-top: 0px;} */
    .footer_banner .contents_box:first-child{ margin-top: 6px;}
    /* LSM20210812 사이버고객센터 메인화면 수도사업소 사이트 삭제로인해 관련기관 바로가기 삭제 및 font-size 조절  */
    /* .footer_banner .contents_box .tit{width: 100%; box-sizing: border-box; background-color: #f4f4f4; border: 1px solid #f3f3f3; } */
    .footer_banner .contents_box .tit{width: 100%; box-sizing: border-box; background-color: #f4f4f4; border: 1px solid #f3f3f3; font-size: 18px; letter-spacing: 4px;}
    .main_service{padding: 10px; padding-top: 5px;}
    .main_service h3{position: relative; border: 0px; text-align: center; min-height: 0px; width: 100%;}
    .main_service h3 br{display: none;}
    .main_service h3 span{top:0px; text-align: center; display: block; width: 100%;}
    .main_service ul{padding-top: 0px; box-sizing: border-box;}
    .check_charge{padding: 20px;}
    .check_charge h3{position: relative; left:0px; top:0px; margin: 0px; display: block; width: 100%; font-size: 20px; text-align: center; padding:10px 0px 20px 0px;}
    .check_charge input[type="submit"]{position: relative; display: block; left: 0px; top:0px; width: 100%; box-sizing: border-box; right: 0px; height:50px; line-height: 50px;}
    .check_charge input{width: calc(100% - 75px);}
    .check_charge input[type="submit"]:before{content: ">"; display: block; position: absolute; right: 0px;}
    .office_tel{ background-size: auto 113%;    background-position: right 15px;}
    .sector_box{padding: 20px; position: relative; bottom: 0px;}
    .sector_box h3{position: relative; left:0px; text-align: center; display: block; border: 0px;}
    .sector_box h3 br{display: none;}
    .sector_box ul li{width: 33.333%; box-sizing: border-box; float: left; margin-bottom: 20px;}
    .sector_box ul:after{content: ""; display: block; clear: both;}
    .content_row2{padding-bottom: 0px;}
    .footer .add img{display: none;}
    .footer > div .add{padding: 20px;}
    .footer .copyright{text-align: center; color:#ccc;}
    .footer address{text-align: center; color:#ccc; font-size: 0.8em;}
    .footer > div .list{padding-bottom: 0px;}
    .footer > div .list ul{ }
    .footer > div .list li{text-align: center; width: 50%; box-sizing: border-box; border: 0px; position: relative; border-bottom: 1px dashed rgba(255,255,255,0.2); padding-bottom: 15px; }
    .footer > div .list li:first-child{border-bottom: 1px dashed rgba(255,255,255,0.2); }
    .footer > div .list li:nth-child(even):before{content:""; width:1px; background-color: rgba(255,255,255,0.2); height: 15px; display: inline-block; position: absolute; left:0px; top:0px;}
    .footer > div .list li a{padding:0 10px !important; display: inline-block; color:#ccc;}
    .footer{background-color: #434956; margin-top: 0px;}
    .top-g{display: none;}
    .footer_banner .contents_box .tit{padding: 14px 0 14px 15px;}
    .office_tel h3{display: block; float: none; text-align: center; margin-bottom: 20px;}
    .office_tel > span{margin-bottom: 10px; width: 50%;}
}

@media only screen and (max-width:380px){
    .office_tel{padding-left:0px; padding-right: 0px; }
    .office_tel h3{display: block; text-align: center; margin-bottom: 15px;}
    .office_tel > span{width: 50%; float: left;}
    .office_tel:after{content: ""; display: block; clear: both;}
    #footer .topBtn{display: none;}
    .qna h3{position: relative; display: block; text-align: center; left: 0px; top:0px; margin-bottom: 20px;}
    .qna{padding: 20px; background-size: 100% 100%;}
    .qna_more{top:20px; right: 20px; left: auto; font-size: 0px;}
    .check_charge form{padding-right: 0px;}
    .check_charge button[type="submit"]{position: relative; right:0px; width: 100%; height: 50px; line-height: 50px; margin-top: 20px;}
    .main_service ul li a{padding-left: 0px; padding-right: 0px; background-size: 100% !important;}

    .check_charge div.myForm{padding-right: 0px;} /* 추가 */
}