@charset "UTF-8";

#container h2 { font-family: "JalnanGothic", "맑은 고딕", sans-serif; font-size: 22rem; }
@media all and (max-width: 1600px){
 #container h2 { font-size: 21rem; }
 }

.cont_btn { display: block; text-indent: -99999rem; width: 42rem; height: 42rem; border: 1px solid #bdd3f5; background-color: #fff; background-repeat: no-repeat; background-position: center; border-radius: 50%; margin-left: 15rem; z-index: 10; }

/*cont1*/
.cont1 { background: rgb(255, 255, 255); background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(228, 238, 251) 100%); }
.cont1 .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; padding-top: 80rem; }
.cont1 .left { width: calc(100% - 890rem); }
.cont1 .right { width: 790rem; }
@media all and (max-width: 1600px){
 .cont1 .left, .cont1 .right { width: calc(50% - 30rem); }
 }
@media all and (max-width: 1180px){
 .cont1 .left { width: calc(100% - 600rem); }
 .cont1 .right { width: 540rem; }
 }
@media all and (max-width: 980px){
 .cont1 .left, .cont1 .right { width: 100%; margin: 0 auto; }
 }

/*메인비주얼*/
.visual { color: #0d3970; background: url(/design/water/img/main/visual_bg.png) no-repeat left bottom/100% auto; }
.visual .s_tit, .visual .title { font-family: "JalnanGothic", "맑은 고딕", sans-serif; line-height: 1.5; }
.visual .s_tit { font-size: 27rem; }
.visual .title { font-size: 52rem; }
.visual .sub { font-size: 18rem; margin-top: 10rem; }
@media all and (max-width: 1600px){
 .visual .s_tit { font-size: 20rem; }
 .visual .title { font-size: 40rem; }
 }
@media all and (max-width: 980px){
 .visual { padding-bottom: 40rem; background-position: right bottom; background-size: auto 100%; }
 }
@media all and (max-width: 670px){
 .visual { background: none; text-align: center; }
 .visual .s_tit { font-size: 18rem; }
 .visual .title { font-size: 36rem; }
 }

/*알림창 모음*/
.popup .popup_wrap { border-radius: 20rem; position: relative; overflow: hidden; box-shadow: 0 0 49rem 15rem rgba(215, 228, 244, 0.7); }
.popup .swiper-slide a { display: block; width: 100%; height: 100%; }
.popup .swiper-slide img { width: 100%; min-height: 258px; }
.popup .popup_btn { position: absolute; bottom: 0; right: 0; background: #fff; z-index: 10; display: flex; flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; line-height: 1; padding: 20rem; border-radius: 20rem 0 0 0; width: 270rem; color: #0d3970; }
.popup .swiper-pagination-fraction { position: static; width: auto; font-weight: 600; font-size: 18rem; }
.popup .control a { width: 20rem; height: 20rem; background-image: url(/design/water/img/main/control_popup.png); margin-left: 20rem; }

/*자주찾는 서비스*/
@keyframes favorite {
 0% { opacity: 0; transform: translate(-50%, -50rem); }
 100% { opacity: 1; transform: translate(-50%, 0); }
 }
.favorite { margin: 20rem 0; }
.favorite ul { display: flex; flex-wrap: wrap; justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; align-items: flex-start; }
.favorite ul li { width: 16.6666666667%; text-align: center; line-height: 22rem; margin: 20rem 0; padding: 0 10rem; }
.favorite ul li a { display: block; padding-top: 6.8em; position: relative; }
.favorite ul li a::before { content: ""; display: block; position: absolute; width: 100%; max-width: 79rem; height: 100rem; background: url(/design/water/img/main/icon_favorite.png) no-repeat 0 0/600%; top: 0; left: 50%; transform: translateX(-50%); filter: drop-shadow(0rem 0rem 15rem #e4ebf6); transition: all 0.2s; }
.favorite ul li a:hover::before { animation: favorite 0.5s; }
.favorite ul li a span { font-size: 18rem; font-weight: 500; }
@media all and (max-width: 620px){
 .favorite ul li { width: 33.3333333333%; }
 }
.favorite .fav01 a::before { background-position: 0 0; }
.favorite .fav02 a::before { background-position: 20% 0; }
.favorite .fav03 a::before { background-position: 40% 0; }
.favorite .fav04 a::before { background-position: 60% 0; }
.favorite .fav05 a::before { background-position: 80% 0; }
.favorite .fav06 a::before { background-position: 100% 0; }

/*cont2*/
.cont2 { display: flex; flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; margin-top: 60rem; }
.cont2 .left { width: calc(100% - 850rem); }
.cont2 .right { width: 790rem; }
@media all and (max-width: 1600px){
 .cont2 .left, .cont2 .right { width: calc(50% - 30rem); }
 }
@media all and (max-width: 1160px){
 .cont2 .left, .cont2 .right { width: 100%; }
 .cont2 .right { margin-top: 60rem; }
 }

/*게시판*/
.board { position: relative; }
.board .board_tab { display: flex; flex-wrap: wrap; align-items: center; -webkit-box-align: center; -ms-flex-align: center; padding-top: 6rem; }
.board .board_tab li { position: relative; }
.board .board_tab li.on { color: #1642a5; }
.board .board_tab li.on::before { display: block; position: absolute; content: ""; width: 100%; height: 50%; background: #fff6b7; left: 0; bottom: 5rem; z-index: -1; }
.board .board_tab li:not(:nth-child(1)) { margin-left: 45rem; }
.board .board_tab a { font-family: "JalnanGothic", "맑은 고딕", sans-serif; font-size: 22rem; }
@media all and (max-width: 1600px){
 .board .board_tab a { font-size: 21rem; }
 }
@media all and (max-width: 480px){
 .board .board_tab li:not(:nth-child(1)) { margin-left: 35rem; }
 }
.board .board_cont { margin-top: 18rem; min-height: 337rem;}
.board .board_cont .recent { display: flex; flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; min-height: 183rem; padding: 30rem 25rem; border-bottom: 1px solid #ededed; }
.board .board_cont .recent .date { display: flex; flex-wrap: wrap; align-items: center; -webkit-box-align: center; -ms-flex-align: center; width: 115rem; height: 115rem; position: relative; border-radius: 50%; border: 4px solid #d9e6fa; text-align: center; }
.board .board_cont .recent .date .new { display: block; text-indent: -99999rem; width: 0; height: 0; }
.board .board_cont .recent .date .new::after { content: "N"; display: block; position: absolute; width: 26rem; height: 26rem; background: #af1b1b; color: #ffffff; border-radius: 50%; top: 0; right: 0; text-indent: 0; text-align: center; line-height: 26rem; font-size: 16rem; font-weight: 700; }
.board .board_cont .recent .date > div { width: 100%; }
.board .board_cont .recent .date p { line-height: 1; font-family: "JalnanGothic", "맑은 고딕", sans-serif; }
.board .board_cont .recent .date .y { font-size: 16rem; margin-bottom: 10rem; }
.board .board_cont .recent .date .md { font-size: 24rem; color: #1642a5; }
.board .board_cont .recent .text { width: calc(100% - 135rem); }
.board .board_cont .recent .subject { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 30rem; max-height: 60rem; font-size: 22rem; font-weight: 500; line-height: 30rem; }
.board .board_cont .recent .summary { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 26rem; max-height: 52rem; margin-top: 10rem; font-size: 18rem; }
@media all and (max-width: 480px){
 .board .board_cont .recent { padding: 30rem 20rem; }
 .board .board_cont .recent .date { width: 100rem; height: 100rem; }
 .board .board_cont .recent .date .new::after { width: 23rem; height: 23rem; line-height: 23rem; font-size: 13rem; }
 .board .board_cont .recent .date .md { font-size: 21rem; }
 .board .board_cont .recent .text { width: calc(100% - 120rem); }
 }
.board .board_cont ul { padding: 30rem 25rem; }
.board .board_cont ul li { display: flex; flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; align-items: center; line-height: 1; padding-left: 20rem; position: relative; width: 100%; }
.board .board_cont ul li:not(:nth-child(1)) { margin-top: 20rem; }
.board .board_cont ul li::before { display: block; position: absolute; content: ""; width: 4px; height: 4px; background: #1642a5; border-radius: 50%; top: 50%; left: 0; transform: translateY(calc(-50% - 1px)); }
.board .board_cont ul li a { font-size: 18rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; padding-right: 16rem; display: block; width: calc(100% - 90rem); }
.board .board_cont ul li .date { display: block; width: 90rem; text-align: right; font-size: 16rem; font-weight: 400; color: #6a6969; }
@media all and (max-width: 480px){
 .board .board_cont ul { padding: 30rem 20rem; }
 }
.board .more { position: absolute; top: 0; right: 0; background-image: url(/design/water/img/main/more.gif); }

/*민원서비스 신청 서식*/
.minwonform { margin-top: 35rem; position: relative; }
.minwonform h2 { padding-top: 9rem; }
.minwonform .mf_slide { padding: 36rem 0 35rem; }
.minwonform .mf_slide li { border: 1px solid #c1d6f6; border-radius: 10rem; background-color: #f7faff; background-repeat: no-repeat; background-position: left -15rem bottom -25rem; text-align: center; height: 170rem; padding: 35rem 30rem; font-size: 18rem; font-weight: 600; line-height: 1.3; box-shadow: 4rem 4rem 6rem 0 rgba(215, 228, 244, 0.7); }
.minwonform .mf_slide li .btn { display: block; text-indent: -99999rem; width: 44rem; height: 44rem; position: absolute; bottom: 12rem; right: 12rem; background-color: #ffeb66; background-repeat: no-repeat; background-position: center; border-radius: 50%; transition: all 0.2s; }
.minwonform .mf_slide li .btn:hover { background-color: #ffffff; border: 1px solid #1642a5; }
.minwonform .mf_slide li .btn.down {background-image: url(/design/water/img/main/btn_down.png);}
.minwonform .mf_slide li .btn.link {background-image: url(/design/water/img/main/btn_link.png);}
@media all and (max-width: 1490px){
 .minwonform .mf_slide li { padding: 30rem 25rem; }
 }
.minwonform .mf_slide .form01 { background-image: url(/design/water/img/main/form01.png); }
.minwonform .mf_slide .form02 { background-image: url(/design/water/img/main/form02.png); }
.minwonform .mf_slide .form03 { background-image: url(/design/water/img/main/form03.png); }
.minwonform .mf_slide .form04 { background-image: url(/design/water/img/main/form04.png); }
.minwonform .mf_slide .form05 { background-image: url(/design/water/img/main/form05.png); }
.minwonform .mf_slide .swiper-pagination-progressbar { top: auto; bottom: 0; background: #f5f9ff; border-radius: 2px; overflow: hidden; }
.minwonform .mf_slide .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #1642a5; border-radius: 2px; }
.minwonform .control { position: absolute; top: 0; right: 0; }
.minwonform .control a { background-image: url(/design/water/img/main/control_form.png); background-position: 0 center; background-size: 200% auto; opacity: 1; transition: all 0.2s; }
.minwonform .control a.next { background-position: 100% center; }
.minwonform .control .swiper-button-disabled { opacity: 0.5; cursor: default; }

/*단수안내, 상하수도 요금조회*/
.service { display: flex; flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; }
.service > div { width: calc((100% - 20rem) / 2); border-radius: 20rem; padding: 35rem; height: 238rem; position: relative; box-shadow: 0 0 20rem 5rem rgba(215, 228, 244, 0.7); }
.service > div h2 { padding-left: 50rem; position: relative; }
.service > div h2::before { display: block; position: absolute; content: ""; width: 38rem; height: 38rem; background: url(/design/water/img/main/icon_service.png) 0 center/auto 100%; left: 0; top: -5rem; }
.service > div p { margin-top: 20rem; font-size: 18rem; font-weight: 500; }
.service > div .more { display: block; position: absolute; min-width: 129rem; text-align: center; padding: 14rem 20rem; bottom: 25rem; right: 30rem; color: #1642a5; border-radius: 60rem; font-size: 16rem; font-weight: 500; line-height: 1; transition: all 0.2s; }
.service > div .more span { position: relative; padding-right: 20rem; }
.service > div .more span::after { content: "→"; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
@media all and (max-width: 1600px){
 .service > div { padding: 25rem; }
 .service > div .more { bottom: 20rem; right: 25rem; }
 }
@media all and (max-width: 560px){
 .service > div { width: 100%; margin-top: 30rem; }
 }
.service .suspens { background: #1642a5; color: #ffffff; }
.service .suspens .more { background: #ffeb66; }
.service .suspens .more:hover { background: #ffffff; }
.service .taxinfo { border: 4px solid #1642a5; color: #1642a5; }
.service .taxinfo h2::before { background-position: 100% center; }
.service .taxinfo .more { border: 1px solid #1642a5; }
.service .taxinfo .more:hover { background: #1642a5; color: #ffffff; }

/*민원안내전화*/
.call_list { display: flex; flex-wrap: wrap; justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; }
.call_list > div { width: calc((100% - 20rem) / 2); text-align: center; padding: 35rem; margin-top: 30rem; }
.call_list .title { padding: 35rem 0 32rem 35rem; text-align: left; }
.call_list .title > h2 { position: relative; padding-right: 53rem; display: inline-block; }
.call_list .title > h2::after { display: block; position: absolute; content: ""; width: 44rem; height: 39rem; background: url(/design/water/img/main/icon_calllist.png) no-repeat center/100%; bottom: 8rem; right: 0; }
.call_list .title > p { font-size: 22rem; font-weight: 800; line-height: 1.3; }
.call_list .call_item { border: 1px solid #bdd3f5; border-radius: 20rem; }
.call_list .call_item .subject { font-family: "JalnanGothic", "맑은 고딕", sans-serif; color: #6a6969; }
.call_list .call_item .phone { font-size: 22rem; font-weight: 500; line-height: 1.3; }
@media all and (max-width: 1600px){
 .call_list > div { padding: 25rem; }
 .call_list .title { padding: 25rem 0 22rem 25rem; }
 }
@media all and (max-width: 543px){
 .call_list > div { width: 100%; }
 }