@charset "utf-8";

html,body {position:relative;height:100%;}
body {font-family:'S-CoreDream', 'Noto Sans KR', 'Spoqa Han Sans Neo', 'Malgun Gothic', sans-serif;font-weight:400;min-width:300px;}
body[data-group="no"] {padding-top:100px;}
body a {font-family:'S-CoreDream', 'Noto Sans KR', 'Spoqa Han Sans Neo', 'Malgun Gothic', sans-serif;font-weight:400}
*{font-family:'S-CoreDream', 'Noto Sans KR', 'Spoqa Han Sans Neo', 'Malgun Gothic', sans-serif;font-weight:400}

.swr-wrapper {position:relative;z-index:2;min-width:260px;max-width:1740px;padding-left:20px !important;padding-right:20px !important;margin:0 auto;}
.swr-wrapper:after {content:" ";display:block;clear:both;height:0;visibility:hidden;margin:0;padding:0;}

.swr-inner {position:relative;}
.swr-inner:after {content:" ";display:block;clear:both;height:0;visibility:hidden;margin:0;padding:0;}



.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }



.swr-imgwrap {position:relative;display:inline-block;overflow:hidden;text-align:center;}
.swr-imgwrap.with-logo {background-repeat:no-repeat;background-position:center center;background-size:70% auto;background-image:url(../images/seoul-water-logo.png);}


div.swr-imgwrap {display:block;}
.swr-imgwrap:before {position:absolute;z-index:5;left:0;top:0;width:100%;height:100%;content:"";}
.swr-imgwrap > img {width:100%;max-height:none;position:relative;z-index:1;}

.swr-imgwrap.abs > img {position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
.swr-imgwrap.abs.top > img {top:0;transform: translate(-50%,0);}
.swr-imgwrap.abs.fill > img {height:100%;}


.swr-imgwrap .ico {position:absolute;z-index:4;display:block;left:50%;top:50%;transform: translate(-50%,-50%);width:50px;height:50px;border-radius:10px;overflow:hidden;}
.swr-imgwrap .ico:before {position:absolute;z-index:2;display:block;content:"";left:50%;top:50%;transform: translate(-50%,-50%);width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:50% auto;}
.swr-imgwrap .ico:after {position:absolute;z-index:1;display:block;content:"";left:50%;top:50%;transform: translate(-50%,-50%);width:100%;height:100%;}

.swr-imgwrap .ico.youtube {height:38px;}
.swr-imgwrap .ico.youtube:before {background-image:url(../images/icon-ui/sns-youtube.png);}
.swr-imgwrap .ico.youtube:after {background-color:#fb0202;}




.swr-header {position:fixed;z-index:9998;top:0;left:0;right:0;min-width:300px;}


.swr-header .tnb {position:relative;z-index:99;}
.swr-header .tnb:after {position:absolute;z-index:-1;content:"";left:0;right:0;top:0;bottom:0;background-color:#000;opacity:0.4;transition:0.5s;}
.swr-header:hover .tnb:after {background-color:#fff;opacity:1;border-bottom:1px solid #ddd;}

body[data-group="no"] .swr-header .tnb:after {opacity:1;background-color:#062147;}


.swr-header .tnb-logo {position:absolute;left:-10px;top:50%;transform: translateY(-50%);}
.swr-header .tnb-logo:before {position:absolute;display:block;content:"";left:10px;right:10px;top:2px;bottom:10px;background-repeat:no-repeat;background-position:center center;background-size:100% auto;background-image:url(../images/logo/seoul-cityhall-w.png);}
.swr-header .tnb-logo > a {position:relative;z-index:2;display:block;width:101px;height:26px;box-sizing:content-box;padding:10px;}


.swr-header .tnb-nav {margin-left:145px;margin-right:145px;display:flex;justify-content:flex-end;}
.swr-header .tnb-nav > ul {display:flex;justify-content:flex-end;}
.swr-header .tnb-nav > ul > li > a {display:inline-block;color:#fff;padding:15px 15px;}


.swr-header .tnb-util {position:absolute;right:0;top:50%;transform: translateY(-50%);display:flex;gap:20px;}
.swr-header .tnb-util .item {position:relative;width:44px;height:44px;border-radius:100%;background-repeat:no-repeat;background-position:center center;background-size:66% auto;overflow:hidden;}
.swr-header .tnb-util .item.youtube {background-color:#fb0202;background-image:url(../images/icon-ui/sns-youtube.png);}
.swr-header .tnb-util .item.instagram {background-image:url(../images/icon-ui/sns-instagram.png);}
.swr-header .tnb-util .item.instagram:after {position:absolute;content:"";z-index:-1;left:0;right:0;top:0;bottom:0;background: #833ab4;background: linear-gradient(to right, #833ab4,#fd1d1d,#fcb045);}




/* 서울 플러그인 추가 */
header.swr-header.on #seoul-gnb-plugin { background-color:transparent !important; transition:all 0.5s !important; } 


.swr-header #seoul-common-gnb {margin-right:145px;height:55px;}
.swr-header #seoul-gnb-plugin {height:55px;}

.swr-header #seoul-gnb-plugin a {transition:0s;}
.swr-header #seoul-gnb-plugin button {transition:0.2s;}
.swr-header #seoul-gnb-plugin a:hover {opacity:0.6;}
.swr-header #seoul-gnb-plugin button:hover {opacity:0.6;}

.swr-header #seoul-gnb-plugin * {font-family:'S-CoreDream', 'Noto Sans KR', 'Spoqa Han Sans Neo', 'Malgun Gothic', sans-serif !important;}
.swr-header #seoul-gnb-plugin .seoul-gnb-menu > dd > a {font-family:'S-CoreDream', 'Noto Sans KR', 'Spoqa Han Sans Neo', 'Malgun Gothic', sans-serif !important;color:#fff !important;transition:0.5s;}
.swr-header #seoul-gnb-plugin .seoul-gnb-menu > dd > button {font-family:'S-CoreDream', 'Noto Sans KR', 'Spoqa Han Sans Neo', 'Malgun Gothic', sans-serif !important;color:#fff !important;transition:0.5s;}

.swr-header #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-news dd a {font-family:'S-CoreDream', 'Noto Sans KR', 'Spoqa Han Sans Neo', 'Malgun Gothic', sans-serif !important;color:#fff !important;transition:0.5s;}

.swr-header #seoul-gnb-plugin .seoul-gnb-holder {height:55px !important;max-width:none !important;}
.swr-header #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-news {top:4px;;}
.swr-header #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-menu {top:4px;;}

.swr-header #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-link a {background: url(//www.seoul.go.kr/seoulgnb/images/icon_set_common.png) no-repeat -122px -165px !important;}

.swr-header #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-icon-notice {margin-top:-8px !important;background: url(../images/icon/speaker-w.png) no-repeat !important;background-size:14px auto !important;background-position:0 0 !important;;transition:0.5s;}





.swr-header:hover #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-link a {background: url(//www.seoul.go.kr/seoulgnb/images/icon_set_common.png) no-repeat -5px -165px !important;}
.swr-header:hover #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-icon-notice {background-image:url(../images/icon/speaker.png) !important;}
.swr-header:hover #seoul-gnb-plugin .seoul-gnb-menu > dd > a {color:#555 !important;}
.swr-header:hover #seoul-gnb-plugin .seoul-gnb-menu > dd > button {color:#555 !important;}
.swr-header:hover #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-news dd a {color:#555 !important;}
/* 서울 플러그인 추가 */




.swr-header .logo {position:absolute;left:-10px;top:50%;transform: translateY(-50%);}
.swr-header .logo:before {position:absolute;display:block;content:"";left:10px;right:10px;top:2px;bottom:10px;background-repeat:no-repeat;background-position:center center;background-size:100% auto;background-image:url(../images/seoul-water-logo.png);}
.swr-header .logo > a {position:relative;z-index:2;display:block;width:235px;height:45px;box-sizing:content-box;padding:10px;}


.swr-header .gnb {position:relative;}
.swr-header .gnb:after {position:absolute;z-index:-1;content:"";left:0;right:0;top:0;bottom:0;background-color:#fff;transition:0.5s;}
.swr-header .gnb:hover:after {background-color:#fff;}
.swr-header .gnb .logo {position:}


.swr-header .gnb .nav {margin-left:290px;margin-right:165px;display:flex;justify-content:flex-end;word-break:keep-all;}

.swr-header .gnb .nav .level1 {flex-grow:1;max-width:1000px;display:flex;align-items:flex-start;justify-content:flex-end;}

.swr-header .gnb .nav .level1 .lv1-item {flex-grow:1;text-align:center;}
.swr-header .gnb .nav .level1 .lv1-item > a {position:relative;display:inline-block;font-size:1.33rem;padding:20px 5px;white-space:nowrap;font-family:'S-CoreDream', sans-serif;font-weight:500;letter-spacing:-0.05em;}

.swr-header .gnb .nav .level1 .lv1-item.active > a {color:#024ea6;transition:0.5s;}
.swr-header .gnb .nav .level1 .lv1-item.active > a:before {content:"";display:block;position:absolute;left:-15px;top:15px;width:14px;height:20px;background-repeat:no-repeat;background-position:center center;background-size:100% auto;background-image:url(../images/icon-ui/gnb-active.png);transition:0.5s;}

.swr-header .gnb .nav .level1:hover .lv1-item.active > a {color:#222;}
.swr-header .gnb .nav .level1:hover .lv1-item.active > a:before {opacity:0;margin-top:26px;}


.swr-header .gnb .nav .level1 .lv1-item > a:after {content:"";display:block;position:absolute;z-index:9;left:50%;transform: translateX(-50%);bottom:0;width:0;height:4px;background-color:#024ea6;transition:0.5s;}
.swr-header .gnb .nav .level1 .lv1-item.hover > a:after {width:100%;}



.swr-header .gnb .nav .level2 { opacity: 0; transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease; visibility: hidden; z-index: -9; }

.swr-header .gnb .nav .lv1-item.hover .level2 { opacity: 1; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease; visibility: visible; z-index: 9; }


.swr-header .gnb .nav .level2 {position:absolute;right:0;gap:20px 30px;display:flex;flex-wrap:wrap;justify-content:flex-start;text-align:left;padding:39px 0;margin-top:-1px;}
.swr-header .gnb .nav .lv1-item.active .level2 {z-index:2;}
.swr-header .gnb .nav .level2:after {position:absolute;z-index:-1;content:"";left:-50000px;right:-500px;top:0;height:100%;transition:0.2s;background-color:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
.swr-header .gnb .nav .lv1-item.hover .level2:after {height:100%;}


.swr-header .gnb .nav .level2 .lv2-item {transition:0.5s;}
.swr-header .gnb .nav .level2 .lv2-item > a {display:block;padding:10px;font-size:1.2rem;font-weight:500;white-space:normal;transition:0.2s;}
.swr-header .gnb .nav .level2 .lv2-item:hover > a {color:#024ea6;}

.swr-header .gnb .nav .lv1-item:nth-child(2) .level3 .lv3-item {max-width:160px;}

.swr-header .gnb .nav .level3 .lv3-item > a {display:flex;gap:5px;align-items:flex-start;padding:6px 10px;;font-weight:400;line-height:1.4;transition:0.2s;}
.swr-header .gnb .nav .level3 .lv3-item > a:before {flex-shrink:0;content:"";width:4px;height:4px;background-color:#555;border-radius:100%;margin-top:10px;transition:0.2s;}
.swr-header .gnb .nav .level3 .lv3-item:hover > a {color:#024ea6;}
.swr-header .gnb .nav .level3 .lv3-item:hover > a:before {background-color:#024ea6;}

.swr-header .gnb .nav .level4 {padding-bottom:10px;}
.swr-header .gnb .nav .level4 .lv4-item > a {display:flex;gap:5px;align-items:flex-start;padding:2px 10px 2px 20px;font-size:0.9rem;font-weight:300;transition:0.2s;}
.swr-header .gnb .nav .level4 .lv4-item > a:before {flex-shrink:0;content:"";width:4px;height:1px;background-color:#555;border-radius:100%;margin-top:11px;transition:0.2s;}
.swr-header .gnb .nav .level4 .lv4-item:hover > a {color:#024ea6;}
.swr-header .gnb .nav .level4 .lv4-item:hover > a:before {background-color:#024ea6;}


.swr-header .gnb .nav .level2 .lv2-item.active > a {color:#024ea6;}
.swr-header .gnb .nav .level3 .lv3-item.active > a {text-decoration:underline;text-decoration-color:#555;}
.swr-header .gnb .nav .level4 .lv4-item.active > a {text-decoration:underline;text-decoration-style:dashed;text-decoration-color:#555;}


.swr-header .gnb-util {position:absolute;right:0;top:50%;transform: translateY(-50%);display:flex;align-items:center;gap:15px;}
.swr-header .gnb-util .item {cursor:pointer;position:relative;width:44px;height:44px;background-repeat:no-repeat;background-position:center center;background-size:66% auto;overflow:hidden;}
.swr-header .gnb-util .item.search {background-image:url(../images/icon-ui/search.png);}
.swr-header .gnb-util .item.search.close {background-image:url(../images/icon-ui/close.png);transform: rotate(0deg);transition:0.2s;}
.swr-header .gnb-util .item.menu {background-image:url(../images/icon-ui/menu.png);border:1px solid #000;}

.swr-header .gnb-util .item.lang {background-color:#e0e8f8;background-image:url(../images/icon-ui/lang-en.png);}


.swr-header .tnb {transition:0.5s;}
.swr-header.header-fixed .tnb {margin-top:-55px;}
.swr-header.header-fixed .gnb:after {border-bottom:1px solid #ddd;}






.swr-header .search-box {display:none;position:absolute;z-index:1;left:0;right:0;padding:30px 0 50px 0;}
.swr-header .search-box:after {position:absolute;z-index:-1;content:"";left:0;right:0;top:0;bottom:0;background-color:#fff;border-bottom:1px solid #002e7b;}

.swr-search-wrap {max-width:800px;margin:0 auto;display:flex;justify-content:center;height:80px;}
.swr-search-wrap .inp {flex-grow:1;width:100%;padding:0 30px;border:2px solid #002e7b;font-size:1.8rem;}
.swr-search-wrap .inp::placeholder {font-size:1rem;}
.swr-search-wrap .btn {flex-shrink:0;width:80px;background-color:#002e7b;background-repeat:no-repeat;background-position:center center;background-size:50% auto;background-image:url(../images/icon/search-w.png);}










.swr-menu-all {position:fixed;z-index:9999;left:0;right:0;top:0;bottom:0;display:none;}
/*
.swr-menu-all {transform: translateY(-100%); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;opacity: 0; }
.swr-menu-all.open {transform: translateY(0); opacity: 1;  transition:0 !important;}
*/

.swr-menu-all:after {position:absolute;z-index:-1;left:0;right:0;top:0;bottom:0;content:"";background-color:#fff;opacity:1;}

.swr-menu-all .title {position:sticky;z-index:3;top:0;color:#fff;margin-bottom:20px;}
.swr-menu-all .title:after {position:absolute;z-index:-1;left:0;right:0;top:0;bottom:0;content:"";background-color:#0b3279;}
.swr-menu-all .title .swr-inner {height:73px;display:flex;align-items:center;}
.swr-menu-all .title h2 {flex-grow:1;font-size:1.8rem;font-weight:600;}
.swr-menu-all .close {flex-shrink:0;width:40px;height:40px;background-color:#fff;border-radius:100%;background-repeat:no-repeat;background-position:center center;background-size:66% auto;background-image:url(../images/icon-ui/close.png);cursor:pointer;}


.swr-menu-all .gnb {position:absolute;z-index:2;left:0;right:0;top:0;bottom:0;overflow:hidden;overflow-y:auto;padding-bottom:50px;}

.swr-menu-all .gnb .nav {margin:0 -5px;}
.swr-menu-all .gnb .nav .level1 {display:flex;flex-wrap:wrap;align-items:flex-start;gap:50px 10px;}
.swr-menu-all .gnb .nav .level1 .lv1-item {flex-grow:1;}
.swr-menu-all .gnb .nav .level1 .lv1-item > a {position:relative;display:inline-block;font-size:1.6rem;padding:10px 5px;white-space:nowrap;font-family:'S-CoreDream', sans-serif;font-weight:600;letter-spacing:-0.05em;color:#0b3279;}


.swr-menu-all .gnb .nav .level2  {border-top:1px solid #ccc;padding-top:10px;}
.swr-menu-all .gnb .nav .level2 .lv2-item  {padding-bottom:10px;}
.swr-menu-all .gnb .nav .level2 .lv2-item > a {position:relative;display:inline-block;font-size:1.1rem;padding:3px 5px;font-weight:600;letter-spacing:-0.05em;}


.swr-menu-all .gnb .nav .level3 .lv3-item > a {position:relative;display:inline-block;font-size:1rem;padding:3px 5px;padding-left:2px;font-weight:400;letter-spacing:-0.05em;display:inline-flex;gap:7px;align-items:flex-start;}
.swr-menu-all .gnb .nav .level3 .lv3-item > a:before {flex-shrink:0;content:"";width:4px;height:4px;background-color:#555;border-radius:100%;margin-top:11px;transition:0.2s;}


.swr-menu-all .gnb .nav .level4 {padding-bottom:5px;}
.swr-menu-all .gnb .nav .level4 .lv4-item > a {position:relative;display:inline-block;font-size:0.9rem;padding:0 5px;padding-left:20px;font-weight:300;letter-spacing:-0.05em;display:inline-flex;gap:5px;align-items:flex-start;}
.swr-menu-all .gnb .nav .level4 .lv4-item > a:before {flex-shrink:0;content:"";width:4px;height:1px;background-color:#555;border-radius:100%;margin-top:11px;transition:0.2s;}




/*
.swr-menu-all .gnb .nav .level2  {display:flex;flex-wrap:wrap;gap:20px 30px;}
*/





.swr-footer {position:relative;background-color:#062147;}
.swr-footer * {color:#fff;}
.swr-footer a {vertical-align: baseline;}
.swr-footer. inb {display:inline-block;}

.swr-footer .fnb-wrap {padding:26px 0;}
.swr-footer .info-wrap {padding:36px 0;border-top:1px solid #395274;}


.swr-footer .fnb {line-height:44px;display:flex;gap:50px;align-items:center;}
.swr-footer .fnb .menu {flex-grow:1;}
.swr-footer .fnb .menu > ul {display:flex;gap:20px;align-items:center;}
.swr-footer .fnb .menu .line {display:block;padding:0 20px;border:1px solid #395274;}


.swr-footer .fnb .link {flex-shrink:0;position:relative;}
.swr-footer .fnb .link .title {position:relative;display:block;font-weight:400;width:250px;padding:0 20px;border:1px solid #ddd;}
.swr-footer .fnb .link button.title {height:44px;text-align:left;font-size:1rem;font-family:'S-CoreDream', sans-serif;font-weight:400;}
.swr-footer .fnb .link .title:before {position:absolute;right:20px;top:50%;transform: translateY(-50%);display:block;content:"▼";font-size:9px;transition:0.1s;}
.swr-footer .fnb .link:hover .title:before {transform: translateY(-50%) scaleY(-1);}
.swr-footer .fnb .link.open .title:before {transform: translateY(-50%) scaleY(-1);}
.swr-footer .fnb .link .wrapper {display:none;position:absolute;left:0;right:0;bottom:100%;border:1px solid #ddd;border-bottom:0;background-color:#fff;max-height:51vh;overflow:hidden;overflow-y:auto;}
.swr-footer .fnb .link.open .wrapper {display:block;}
.swr-footer .fnb .link .wrapper > ul > li > a {display:block;color:#222;line-height:1.4rem;font-size:0.9rem;padding:10px 20px;border-top:1px solid #ddd;}
.swr-footer .fnb .link .wrapper > ul > li:first-child > a {border-top:0;}
.swr-footer .fnb .link .wrapper > ul > li > a:hover {background-color:#ebeff5;}
.swr-footer .fnb .link .wrapper > ul > li > a:focus {background-color:#ebeff5;}




.swr-footer .logo {position:relative;display:inline-block;margin-left:-10px;}
.swr-footer .logo:before {position:absolute;display:block;content:"";left:10px;right:10px;top:2px;bottom:10px;background-repeat:no-repeat;background-position:center center;background-size:100% auto;background-image:url(../images/seoul-water-logo-w.png);}
.swr-footer .logo > a {position:relative;z-index:2;display:block;width:235px;height:45px;box-sizing:content-box;padding:10px;}

.swr-footer. inb {display:inline-block;vertical-align:middle;}



.swr-footer .footer-info {display:flex;gap:50px;align-items:flex-start;}
.swr-footer .footer-info > *:first-child {flex-grow:1;}
.swr-footer .footer-info > *:last-child {flex-shrink:0;}


.swr-footer .info {display:flex;gap:29px 50px;align-items:flex-start;flex-wrap:wrap;}

.swr-footer .info > dl > dt {font-size:1.2rem;font-weight:500;margin-bottom:5px;}
.swr-footer .info > dl > dd {font-size:0.9rem;}
.swr-footer .info > dl > dd .inb {margin-right:20px;}

.swr-footer .info .copy {width:100%;font-size:0.9rem;}


.swr-footer .mark {display:flex;gap:5px 10%;align-items:center;}