@charset "UTF-8";

@media (max-width: 1700px) {

    .gnb.hover {transform: translateX(-30%);}

}

@media (max-width: 1600px) {

    #header {padding: 0 5px;}
    .logo {width: 190px; height: 52px;}
    .gnb.hover {transform: translateX(-20%);}

}

@media (max-width: 1400px) {

    .gnb.hover {transform: translateX(-15%);}

}



@media (max-width: 768px) {

    body {
        overflow-x: hidden !important;
    }

    .fp-tableCell {height: initial !important;}

    /* HEADER - START */

    #header {
        width: 100vw; height: 80px;
        padding: 0 20px;
    }

    .header_inner {min-width: auto;}
    .logo {width: 190px;}

    .menu_open {
        order: 1;
        width: 24px; height: 24px;
        background: url(../images/m_menu_open.png) no-repeat center / contain;
    }

    .menu_wrap {
        overflow-y: auto;
        display: none;
        flex-direction: column; align-items: center;
        width: 100vw; min-height: 100vh; height: 100%;
        padding: 90px 35px 0 35px;
        background-color: #fff;
        position: fixed; right: 0; top: 0; z-index: 100;
    }
    .menu_wrap.on {display: flex;}

    .menu_close {
        width: 25px; height: 25px;
        background: url(../images/m_menu_close.png) no-repeat center / contain;
        position: absolute; right: 20px; top: 27px;
    }

    /* gnb */
    .gnb {
        flex-direction: column;
        width: 100%;
        margin-right: 0;
    }
    .gnb.hover {transform: translateX(0);}
    .gnb_list {
        width: 100%; height: auto; 
        border-bottom: 1px solid #e9e9e9;
    }
    .gnb_list::before, .gnb_list::after {content: "";
        width: 8px; height: 2px;
        background-color: #111;
        position: absolute; right: 18px; top: 35px;
        transform: rotate(45deg);
    }
    .gnb_list::after {
        right: 12px;
        transform: rotate(-45deg);
    }
    .gnb_list > a {
        height: 68px;
        padding: 0 10px;
        font-weight: 500; font-size: 23px; line-height: 68px;
    }
    .gnb_list > a::before {display: none;}

    .depth2 {
        display: none;
        width: 100%;
        padding: 25px 0;
        background-color: #f2f2f2;
        transition: none;
    }
    .depth2 li + li {margin-top: 0;}
    .depth2 li a {
        padding: 0 40px;
        border: none;
        font-size: 18px; line-height: 40px;
    }

    .gnb_bg {display: none;}

    .gnb_list:hover > a::before {left: -100%;}
    .gnb:hover {margin-top: 0px;}
    .gnb:hover .gnb_list {height: auto;}
    .gnb:hover .depth2 {display: none;}
    .gnb:hover + .gnb_bg::before {display: none;}

    /* gnb.on */
    .gnb_list.on::before {
        background-color: #066de0;
        transform: rotate(135deg);
    }
    .gnb_list.on::after {
        background-color: #066de0;
        transform: rotate(-135deg);
    }
    .gnb_list.on > a {color: #066de0;} 
    .gnb_list.on > a::after  {content: "";
        width: 100%; height: 1px;
        background-color: #066de0;
        position: absolute; left: 0; bottom: 0;
    }



    /* login 전 */
    #header .login {
        flex-shrink: 1; order: -1;
        width: 100%;
        padding: 0 80px 0 40px;
        margin-right: 0; margin-bottom: 20px;
        border-radius: 30px;
        font-weight: 500; font-size: 18px; line-height: 60px; text-align: center;
    }


    /* login 후 */
    #header .login_box {
        order: -1; justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;
    }
    #header .user {
        width: 100%;
        position: inherit;
    }
    #header .user_name {
        flex-shrink: 1;
        width: 100%;
        padding: 0 80px 0 40px;
        margin-right: 0;
        border-radius: 30px;
        font-weight: 500; font-size: 18px; line-height: 60px;
    }
    #header .user_name::before, #header .user_name::after {
        width: 8px;
        right: 30px;
    }
    #header .user_name::after {right: 25px;}

    #header .user_name.on {
        border-color: #066de0;
        border-bottom-color: #066de0;
        border-radius: 30px;
        color: #fff;
        background-color: #066de0;
    }
    #header .user_name.on::before {background-color: #fff;}
    #header .user_name.on::after {background-color: #fff;}

    #header .user_pop {
        width: calc(100% - 70px);
        border: 1px solid #536c80;
        border-radius: 10px;
        right: 50%; top: 160px;
        transform: translateX(50%);
    }
    #header .user_pop.on {box-shadow: 5px 5px 5px rgba(0,0,0,0.1);}
    #header .user_info {margin-bottom: 40px;}
    #header .user_photo {width: 70px; height: 70px;}

    #header .user_info p {font-size: 20px; line-height: 30px;}
    #header .user_info p span {font-size: 17px;}

    #header .user_percent {
        height: 30px;
        margin-bottom: 40px;
    }
    #header .user_percent li {width: 30px; height: 30px;}
    #header .user_percent li + li {margin-left: 60px;}
    #header .user_percent li::before {width: 18px; height: 18px;}
    #header .user_percent li::after {
        width: 60px;
        right: 30px; 
    }

    #header .user_percent li.on {background-color: #066de0;}
    #header .user_percent li.on::before {width: 16px; height: 16px;}

    #header .user_data {
        width: 100%;
        font-size: 17px; line-height: 35px;
    }
    #header .user_data strong {font-size: 20px;}

    #header .user_menu {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    #header .user_menu li {
        flex: 1 1 100px;
        min-width: 100px;
        max-width: 100px;
        height: 75px;
    }
    #header .user_menu li a {
        height: 75px;
        padding: 0 25px 0 65px;
        font-size: 18px; line-height: 75px; text-align: left;
    }

    #header .logout {
        padding: 0 40px;
        margin-right: 0; margin-left: 20px;
        border-radius: 30px;
        font-weight: 500; font-size: 18px; line-height: 60px;
    }

    .m_user {
        display: block;
        width: 23px; height: 26px;
        margin-right: 25px;
        background: url(../images/m_user.png) no-repeat center / contain;
        position: relative;
    }
    .m_user::before {content: "";
        display: none;
        width: 5px; height: 5px;
        border-radius: 50%;
        background-color: #066de0;
        position: absolute; right: -5px; top: 0;
    }
    .m_user.on::before {display: block;}

    /* search */
    #header .search_box {
        margin-right: 25px;
        position: inherit;
    }
    #header .search {
        width: 26px; height: 26px;
        border-radius: 0%;
        background: transparent url(../images/m_search.png) no-repeat center / contain;
    }
    #header .search.on {
        width: 42px; height: 42px;
        border-radius: 50%;
        background: #fff url(../images/m_search.png) no-repeat center / 14px;
        transform: translateX(8px);
    }
    #header .search_box fieldset {right: auto; left: 0; top: 0;}
    #header .search_input {
        width: 100vw; height: 80px;
        border-radius: 0;
        font-size: 18px; color: #fff;
        background-color: #003a67;
    }
    #header .search_input::placeholder {font-weight: 300; font-size: 18px; color: #fff;}
    #header .search_delete {
        background-image: url(../images/m_search_close.png);
        right: 20px; top: 50%; 
        transform: translateY(-50%);
    }


    /* zoom-in/out */
    .zoom_box {display: none !important;}

    /* HEADER - END */





    /* MAIN - START */
    .section {height: auto !important;}

    .sec {
        min-width: auto; 
        padding: 100px 0;
    }
    
    .sec_wrap {
        justify-content: flex-start;
        width: 100%; 
        /* padding: 0 35px; */
        padding: 0;
    }

    /* .sec_title {
        display: flex; flex-direction: column; align-items: center;
        margin-bottom: 30px;
        position: relative;
    } */
    .sec_title p {
        font-size: 30px; line-height: 40px;
    }
    /* .sec_title p.desc {
        margin-top: 10px;
        font-weight: normal; font-size: 15px; line-height: 20px; color: #364550;
    } */


    /* sec1 */

    .sec1 {padding-top: 150px;}

    /* sec1_notice */
    .util {height: 70px;}
    .util_inner {
        width: 100vw; min-width: auto; height: 70px;
        padding: 0 25px;
    }

    .util_notice {width: calc(100vw - 50px);}
    .util_notice strong {display: none;}

    .notice {width: 100%; height: 70px;}
    .notice .notice_content {padding-left: 0;}
    .notice .notice_content p {
        overflow: hidden;
        width: calc(100% - 50px); height: 70px;
        font-size: 17px; line-height: 70px; white-space: nowrap; text-overflow: ellipsis;
    }
    .notice .notice_content p span {display: none;}

    .notice .swiper-button-next {
        width: 20px; 
        left: auto; right: 0; top: 60px;
    }
    .notice .swiper-button-prev {
        width: 20px;
        left: auto; right: 0; top: 38px;
    }
    .notice .swiper-button-next::after, .notice .swiper-button-prev::after {font-size: 15px;}

    .util_time {display: none;}


    /* sec1_전국현황 */
    .location {
        width: 100%;
        padding: 40px 35px 0 35px;
    }
    .location_title {
        width: 100%;
        margin-bottom: 50px;
    }
    .location_title p {font-size: 22px; line-height: 37px;}

    .location_data {
        flex-direction: column; align-items: center; justify-content: flex-start;
        margin-top: 0;
        margin-bottom: 40px;
    }
    .location_data_chart {
        width: 100%;
        margin-bottom: 25px;
    }
    .data_chart_title > span {
        display: block;
        width: 140px; height: 42px;
        margin-bottom: 20px;
        border-radius: 16px;
        font: 15px/32px 'Environment'; text-align: center; letter-spacing: 0;
        background: url(../images/ico_main_balloon.png) no-repeat center / contain;
        position: relative;
    }

    .data_chart_title > strong {font-size: 24px;}
    .data_chart_title > strong > span {margin-top: 3px;}
    .location_data_chart > span {
        margin: -20px 0 20px 0;
        font-size: 14px;
    }

    .board_box {width: 100%;}
    .board_box th {
        padding: 15px;
        font-size: 15px; line-height: 19px; 
    }
    .board_box td {
        padding: 15px;
        font-size: 17px;
    }
    .board_box td.flexible {
        display: flex; align-items: center; justify-content: space-between;
        margin-top: 5px;
    }
    .board_box td a.pop_open {
        width: 86px; height: 35px;
        border-radius: 5px;
        font-size: 16px; line-height: 35px;
    }


    /* sec1_상세보기팝업 */
    .location_pop {top: 375px;}
    .pop_header {width: 100%;}
    /* // sec1_상세보기팝업 */


    .location_data_map {
        order: -1;
        width: 100%;
        margin: 0 0 30px 0;
    }
    .location_data_map a {left: 0;}

    .location_data_image {width: 100%; height: auto;}
    .location_data_image img {width: 100%;}

    .location_data_num {
        display: flex; align-items: center; 
        width: 100%;
        margin-bottom: 0px;
    }
    .location_data_num li {
        display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
        width: 50%;
        padding-left: 15px;
        position: relative;
    }
    .location_data_num li + li {margin-top: 0;}
    .location_data_num li p {
        flex-direction: row; align-items: center;
        width: 100%;
        font-size: 19px;
        background-position: left 192px top 36px;
    }
    .location_data_num li p span{
        width: 80px; height: 80px;
        margin: 15px 15px 0 0;
        font-size: 19px; line-height: 80px; 
    }
    .location_data_num li > span {
        font-size: 15px;
        position: absolute; left: 115px; bottom: 15px;
    }


    /* sec1_statistics */
    .stats_data {
        overflow-x: scroll;
        padding: 0 0 0 35px;
        margin-bottom: 30px;
    }
    .stats_data li {
        align-items: center; justify-content: space-between; flex-shrink: 0;
        width: 175px; height: 205px;
        padding: 20px 20px 10px 20px;
        background-position: center bottom 45px;
    }
    .stats_data li:first-child {background-position: left 50px bottom 45px;}
    .stats_data li + li {margin-left: 10px;}
    .stats_data li p {text-align: center;}
    .stats_data li p > span {
        margin-bottom: 5px;
        font-size: 18px; line-height: 30px;
    }
    .stats_data li > span {font-size: 12px; line-height: 20px;}

    .sub_title {margin-bottom: 70px;}

    /* sec1_GIS */
    .gis {
        width: 100%; height: 125px;
        border-radius: 0;
        background-color: rgba(0,0,0,0.4);
        position: absolute; right: 0; top: auto; bottom: 0;
    }
    .gis::before {content: "";
        border-radius: 8px;
        right: auto; left: 275px; bottom: 35px;
    }
    .gis a {
        display: flex; flex-direction: column; justify-content: center;
        height: 100%;
        padding: 30px 30px 30px 55px;
    }
    .gis p {font-size: 15px; line-height: 25px;}
    .gis strong {
        margin-bottom: 0px;
        font-size: 18px; line-height: 35px;
    }



    /* sec2 */

    .sec2 .sec_box {
        width: 100%;
        padding: 0 35px;
    }

    /* 하수도 검색 */
    .sec2 fieldset {margin-bottom: 35px;}
    .sec2 fieldset input {
        width: 100%; height: 55px;
        padding: 0 70px 0 35px;
    }


    /* quick_menu */
    .quick_menu {
        overflow-x: scroll;
        justify-content: start;
        width: 100%;
        padding-left: 35px;
        margin-bottom: 50px;
    }
    .quick_menu li {
        flex-shrink: 0;
        width: auto; min-width: 140px; height: 130px;
        border-radius: 15px;
    }
    .quick_menu li + li {margin-left: 15px;}
    .quick_menu li a {
        justify-content: space-between;
        padding: 30px 25px 20px 25px;
    }
    .quick_menu li a img {
        width: 45px; height: auto;
        margin-bottom: 10px;
    }


    /* 신고하기 */
    .report_box {
        flex-direction: column; justify-content: start;
        width: 100%;
        padding: 0 35px;
    }
    .report {width: 100%; height: auto; min-height: 220px;}
    .report::before {content: "";
        width: 100px; 
        right: 20px; bottom: 70px;
    }
    .report_title span {font-size: 20px; line-height: 30px;}
    .report_image {
        width: 120px; height: 120px;
        margin-right: 15px;
    }

    .report + .intro {margin-top: 30px;}
    
    
    /* 하수도 소개 */
    .intro {width: 100%; }
    .intro .swiper-button-next {left: 188px;}
    .intro .report_image {
        width: 100px; height: 100px;
        margin: 50px 17px 0 0;
    }



    /* sec3 */

    .sec3 .bg {min-height: auto;}
    .sec3 .sec_box {overflow: hidden;}
    .sec3 .sec_title {margin-bottom: 40px;}
    .sec3 .sec_title .btn_more {display: none;}

    /* data_slide */
    .data {margin-left: 35px;}
    .data_box img {width: 100%; height: 110px;}
    .sec3 .swiper-button-next, .sec3 .swiper-button-prev {display: none;}

    .sec_box + .news_box {margin-top: 50px;}


    /* news_slide */
    .news_box {overflow: hidden;}
    .news {
        width: 820px;
        margin-left: 35px;
        padding-bottom: 50px;
    }
    .news_content {
        width: 400px;
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 10px;
        position: relative;
    }
    .news_content a {padding: 25px 50px 25px 30px;}
    .news_content a p {font-size: 18px; line-height: 28px;}
    .news_content a p.desc {
        margin-bottom: 0;
        font-size: 15px; line-height: 25px; 
    }
    .news_content a span {position: absolute; right: 10px; bottom: 10px;}

    .news .swiper-button-next, .news .swiper-button-prev {display: none;}

    .news .swiper-pagination {
        width: auto;
        padding: 5px 10px;
        border-radius: 30px;
        background-color: rgba(0,0,0,0.3);
        right: auto; left: calc(50vw - 50px); bottom: 0;
    }
    .news .swiper-pagination-current {color: #fff;}
    .news .swiper-scrollbar {display: none;}



    /* sec4 */

    .promotion {
        display: block;
        width: 100%;
        padding: 0 35px;
    }
    .tab_menu {
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 25px;
    }
    .tab_menu > a {
        font-weight: 500; font-size: 20px; line-height: 45px;
        position: relative;
        transition: all 0.1s;
    }
    .tab_menu1 {margin-right: 35px;}
    .tab_menu > a::before {content: "";
        display: none;
        width: 100%; height: 3px;
        background-color: #066de0;
        position: absolute; left: 0; bottom: 0;
    }

    .tab_menu > a:hover {color: #066de0;}
    .tab_menu > a:hover::before {display: block;}

    .tab_menu > a.on {color: #066de0;}
    .tab_menu > a.on::before {display: block;}

    .promotion_box {
        width: calc(100vw - 70px);
        border-radius: 20px 10px 10px 10px;
    }
    .promotion_info {margin-right: 0px;}
    .promotion_video {display: none;}

    .promotion_typo {padding: 55px 40px 35px 40px;}
    .promotion_title {font-size: 28px; line-height: 38px;}
    .promotion_title span {display: none;}
    .promotion_typo a::before, .promotion_typo a::after {width: 3px; height: 18px;}

    /* info_slide */
    .info {padding-top: 80px;}
    .info_slide a {height: 280px;}
    .info_slide a p span {font-size: 14px;}

    /* video_slide */
    .video {padding-top: 80px;}
    .video_slide a {height: 280px;}


    .sec4 .swiper-button-next, .sec4 .swiper-button-prev {
        width: 50px; height: 50px;
        top: 25px;
    }
    .sec4 .swiper-button-next {left: 95px;}
    .sec4 .swiper-button-prev {left: 40px;}
    .sec4 .swiper-button-next::after, 
    .sec4 .swiper-button-prev::after {font-weight: bold; font-size: 16px;}
    .sec4 .swiper-pagination {
        width: 50px;
        font-size: 16px;
    }
    .sec4 .swiper-pagination-current {font-size: 18px;}
    
    /* MAIN - END */





    /* FOOTER - START */

    #footer {
        justify-content: start;
        min-width: auto; height: 420px !important;
    }
    #footer::before {display: none;}
    #footer .fp-tableCell {min-width: auto;}

    .footer_inner {
        min-width: auto;
        padding: 0 25px;
    }

    .footer_top {
        overflow: hidden;
        width: 100%;
    }

    .footer_top .footer_inner {
        flex-direction: column; align-items: flex-start;
        padding: 30px 25px;
        position: relative;
    }
    .footer_menu {
        flex-wrap: wrap;
        width: 100%;
        border: 1px solid #c6c6c6;
        border-radius: 10px;
    }
    .footer_menu li {width: 50%; height: 42px;}
    .footer_menu li + li {margin-left: 0;}
    .footer_menu li:first-child {
        border-right: 1px solid #c6c6c6;
        border-bottom: 1px solid #c6c6c6;
    }
    .footer_menu li:nth-child(2) {border-bottom: 1px solid #c6c6c6;}
    .footer_menu li:nth-child(3) {border-right: 1px solid #c6c6c6;}
    .footer_menu li a {
        display: block;
        width: 100%;
        padding-left: 25px;
        font-size: 16px; line-height: 42px;
    }

    .banner {
        order: -1;
        width: 655px;
        margin: 0 0 30px 0;
    }
    #footer .swiper-button-next, 
    #footer .swiper-button-prev {display: none;}

    .footer_bottom {width: 100%;}
    .footer_bottom .footer_inner {padding-top: 0;}
    .footer_bottom address {margin-right: 0;}
    .footer_bottom p {
        display: block;
        margin-right: 0;
    }

    .footer_bottom p span.drop {display: block;}

    /* FOOTER - END */



    .btn_top {
        border: 1px solid #d1d1d1;
        font-weight: 700; font-size: 11px; line-height: 62px; text-align: center; text-indent: 0;
        background: #fff url(../images/m_top.png) no-repeat center top 11px / 10px;
        box-shadow: 1px 2px 7px rgba(0,0,0,0.1);
    }
    .btn_top::before, .btn_top::after {display: none;}


    ::-webkit-scrollbar {
        display: block;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: #444;
    }
    ::-webkit-scrollbar-track {
        background-color: #eee;
    }
}


@media (max-width: 640px) {

    /* HEADER - START */

    .menu_wrap {padding: 80px 25px 0 25px;}

    /* gnb */
    .gnb_list::before, .gnb_list::after {
        width: 7px; 
        top: 27px;
    }
    .gnb_list::after {right: 13px;}
    .gnb_list > a {
        height: 55px;
        font-size: 20px; line-height: 55px;
    }

    .depth2 {padding: 20px 0;}
    .depth2 li a {
        padding: 0 35px;
        font-size: 16px; line-height: 32px;
    }


    /* login 전 */
    #header .login {
        padding: 0 50px 0 30px;
        font-size: 18px; line-height: 50px; 
    }


    /* login 후 */
    #header .user_name {
        padding: 0 50px 0 30px;
        font-size: 16px; line-height: 50px;
    }
    #header .user_name::before, #header .user_name::after {
        width: 6px;
        right: 24px;
    }
    #header .user_name::after {right: 20px;}

    #header .user_pop {
        width: calc(100% - 50px);
        top: 150px;
    }
    #header .user_info {margin-bottom: 35px;}
    #header .user_photo {width: 55px; height: 55px;}

    #header .user_info p {font-size: 18px; line-height: 25px;}
    #header .user_info p span {font-size: 14px;}

    #header .user_percent {
        height: 20px;
        margin-bottom: 25px;
    }
    #header .user_percent li {width: 20px; height: 20px;}
    #header .user_percent li + li {margin-left: 42px;}
    #header .user_percent li::before {width: 12px; height: 12px;}
    #header .user_percent li::after {
        width: 42px;
        right: 20px; 
    }

    #header .user_percent li.on::before {width: 11px; height: 11px;}

    #header .user_data {font-size: 15px; line-height: 24px;}
    #header .user_data strong {font-size: 18px;}

    #header .user_menu {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    #header .user_menu li {
        flex: 1 1 80px;
        min-width: 80px;
        max-width: 80px;
        height: 50px;
    }
    #header .user_menu li a {
        height: 50px;
        padding: 0 25px;
        font-size: 14px; line-height: 50px; text-align: right;
    }

    #header .logout {
        padding: 0 30px;
        font-size: 16px; line-height: 50px;
    }


    /* search */
    #header .search.on {width: 36px; height: 36px;}
    #header .search_input {font-size: 15px;}
    #header .search_input::placeholder {font-size: 15px;}

    /* HEADER - END */





    /* MAIN - START */

    .sec {padding: 90px 0;}
    
    .sec_title {margin-bottom: 25px;}
    .sec_title p {font-size: 26px; line-height: 35px;}
    .sec_title p.desc {
        margin-top: 5px;
        font-size: 14px; line-height: 20px;
    }


    /* sec1 */

    .sec1 {padding-top: 140px;}

    /* sec1_notice */
    .util {height: 60px;}
    .util_inner {
        height: 60px;
        padding: 0 20px;
    }

    .util_notice {width: calc(100vw - 40px);}
    .notice {height: 60px;}
    .notice .notice_content p {
        width: calc(100% - 40px); height: 60px;
        font-size: 15px; line-height: 60px;
    }

    .notice .swiper-button-next {
        width: 16px; 
        top: 55px;
    }
    .notice .swiper-button-prev {
        width: 16px;
        top: 35px;
    }
    .notice .swiper-button-next::after, .notice .swiper-button-prev::after {font-size: 12px;}


    /* sec1_전국현황 */
    .location {padding: 30px 25px 0 25px;}
    .location_title {margin-bottom: 40px;}

    .location_data {margin-bottom: 30px;}
    .location_data_chart {margin-bottom: 20px;}
    .data_chart_title > span {margin-bottom: 10px;}

    /* sec1_상세보기팝업 */
    .location_pop {top: 360px;}
    /* // sec1_상세보기팝업 */

    .location_data_map {margin: 0 0 20px 0;}

    .location_data_num li {padding-left: 0px;}
    .location_data_num li p {background-position: left 190px top 36px;}
    .location_data_num li p span{margin: 15px 10px 0 0;}
    .location_data_num li > span {
        font-size: 14px;
        left: 95px; bottom: 15px;
    }


    /* sec1_statistics */
    .stats_data {
        padding: 0 0 0 25px;
        margin-bottom: 20px;
    }


    /* sec1_GIS */
    .gis {height: 120px;}
    .gis::before {content: "";
        left: 265px; bottom: 35px;
    }
    .gis a {padding: 30px 20px 30px 40px;}
    .gis p {font-size: 14px;}



    /* sec2 */

    .sec2 .sec_box {padding: 0 25px;}

    /* 하수도 검색 */
    .sec2 fieldset {margin-bottom: 30px;}
    .sec2 fieldset input {
        height: 50px;
        padding: 0 60px 0 30px;
        font-size: 15px;
    }
    .sec2 fieldset input::placeholder {font-size: 15px;}


    /* quick_menu */
    .quick_menu {
        padding-left: 25px;
        margin-bottom: 30px;
    }

    

    /* sec3 */

    .sec3 .sec_title {margin-bottom: 30px;}

    /* data_slide */
    .data {margin-left: 25px;}

    .sec_box + .news_box {margin-top: 40px;}


    /* news_slide */
    .news_title {
        margin-bottom: 20px;
        font-size: 22px;
    }
    .news {
        width: 820px;
        margin-left: 25px;
        padding-bottom: 50px;
    }
    .news_content a p {font-size: 17px; line-height: 25px;}
    .news_content a p.desc {font-size: 14px; line-height: 22px;}



    /* sec4 */

    .sec4 .sec_title {margin-bottom: 25px;}
    .sec4 .sec_box {width: 100%;}
    .promotion {padding: 0 25px;}
    .tab_menu > a {font-size: 17px; line-height: 40px;}
    .tab_menu1 {margin-right: 30px;}
    .tab_menu > a::before {height: 2px;}

    .promotion_box {width: calc(100vw - 50px);}

    .promotion_title {font-size: 25px; line-height: 35px;}

    /* info_slide */
    .info {padding-top: 70px;}

    /* video_slide */
    .video {padding-top: 70px;}

    .sec4 .swiper-button-next, .sec4 .swiper-button-prev {width: 45px; height: 45px;}
    .sec4 .swiper-button-next {left: 92px;}
    .sec4 .swiper-button-next::after, 
    .sec4 .swiper-button-prev::after {font-size: 15px;}
    .sec4 .swiper-pagination {
        width: 50px;
        font-size: 16px;
    }
    .sec4 .swiper-pagination-current {font-size: 18px;}
    
    /* MAIN - END */
}


@media (max-width: 480px) {

    /* HEADER - START */
    #header {height: 70px;}
    .logo {width: 160px;}
    .menu_open {width: 20px; height: 20px;}
    .menu_wrap {padding: 70px 20px 0 20px;}
    .menu_close {width: 20px; height: 20px;}

    /* gnb */

    .gnb_list > a {
        height: 50px;
        font-size: 17px; line-height: 50px;
    }

    .depth2 {padding: 15px 0;}
    .depth2 li a {
        padding: 0 30px;
        font-size: 14px; line-height: 28px;
    }


    /* login 전 */
    #header .login {
        padding: 0 40px 0 25px;
        font-size: 14px; line-height: 40px; 
    }


    /* login 후 */
    #header .user_name {
        padding: 0 40px 0 25px;
        font-size: 14px; line-height: 40px;
    }


    #header .user_pop {
        width: calc(100% - 40px);
        padding: 35px 25px;
        top: 120px;
    }
    #header .user_info {margin-bottom: 25px;}
    #header .user_photo {width: 50px; height: 50px;}

    #header .user_info p {font-size: 16px;}
    #header .user_info p span {font-size: 12px; line-height: 20px;}

    #header .user_data {font-size: 13px; line-height: 20px;}
    #header .user_data strong {font-size: 15px;}

    #header .user_menu {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    #header .user_menu li {
        flex: 1 1 60px;
        min-width: 60px;
        max-width: 60px;
        height: 40px;
    }
    #header .user_menu li a {
        height: 40px;
        padding: 0 20px;
        font-size: 13px; line-height: 40px;
        background-size: 18px;
    }

    #header .logout {
        padding: 0 25px;
        margin-left: 15px;
        font-size: 14px; line-height: 40px;
    }

    .m_user {
        width: 18px; height: 20px;
        margin-right: 20px;
    }

    /* search */
    #header .search_box {margin-right: 20px;}
    #header .search {
        width: 20px; height: 20px;
    }
    #header .search.on {width: 36px; height: 36px;}
    #header .search_input {
        height: 70px;
        font-size: 14px;
    }
    #header .search_input::placeholder {font-size: 14px;}
    #header .search_delete {width: 20px; height: 20px;}

    /* HEADER - END */





    /* MAIN - START */

    .sec {padding: 70px 0;}
    
    .sec_title {margin-bottom: 20px;}
    .sec_title p {font-size: 22px; line-height: 30px;}
    .sec_title p.desc {
        margin-top: 2px;
        font-size: 13px; 
    }


    /* sec1 */

    .sec1 {padding-top: 120px;}

    /* sec1_notice */
    .util {
        height: 50px;
        top: 70px;
    }
    .util_inner {
        height: 50px;
        padding: 0 20px;
    }

    .notice {height: 50px;}
    .notice .notice_content p {
        height: 50px;
        font-size: 12px; line-height: 50px;
    }

    .notice .swiper-button-next {top: 47px;}
    .notice .swiper-button-prev {top: 32px;}
    .notice .swiper-button-next::after, .notice .swiper-button-prev::after {font-size: 10px;}


    /* sec1_전국현황 */
    .location {padding: 30px 20px 0 20px;}
    .location_title {margin-bottom: 25px;}
    .location_title_btn a {
        width: 35px; height: 35px;
        margin-right: 8px;
        background-size: 16px;
    }
    .location_title p {font-size: 17px; line-height: 32px;}

    .location_data {margin-bottom: 30px;}
    .location_data_chart {margin-bottom: 15px;}
    .data_chart_title > span {
        width: 125px;
        margin-bottom: 5px;
        font-size: 13px;
    }

    .data_chart_title > strong {font-size: 18px; line-height: 30px;}
    .data_chart_title > strong > span {
        padding-left: 2px;
        margin-top: 0;
        font-size: 12px;
    }
    .location_data_chart > span {
        margin: -17px 0 10px 0;
        font-size: 12px;
    }

    .board_box th {
        padding: 10px 13px;
        font-size: 13px; line-height: 15px;
    }

    .board_box td {
        padding: 10px 13px;
        font-size: 13px;
    }
    .board_box td a.pop_open {
        width: 65px; height: 28px;
        font-size: 13px; line-height: 28px;
    }

    /* sec1_상세보기팝업 */
    .location_pop {top: 285px;}
    .pop_table li {width: 100%;}
    .pop_table li p {font-size: 13px; line-height: 22px;}

    .location_data_map {margin: 0 0 20px 0;}

    .location_data_num li p {
        font-size: 13px;
        background-position: left 145px top 28px;
    }
    .location_data_num li p span{
        width: 65px; height: 65px;
        margin: 10px 5px 0 0;
        font-size: 16px; line-height: 65px;
    }
    .location_data_num li > span {
        font-size: 14px;
        left: 95px; bottom: 15px;
    }    
    .location_data_num li > span {
        font-size: 11px;
        left: 73px;
    }


    /* sec1_statistics */
    .stats_data {
        padding: 0 0 0 20px;
        margin-bottom: 15px;
    }

    .stats_data li {
        width: 140px; height: 170px;
        background-size: 45px;
        background-position: center bottom 42px;
    }
    .stats_data li:first-child {background-position: left 40px bottom 42px;}
    .stats_data li p {font-size: 19px; line-height: 25px;}
    .stats_data li p span {font-size: 15px; line-height: 20px;}

    .sub_title {
        margin-bottom: 55px;
        font-size: 15px;
    }
    .sub_title span {font-size: 12px;}


    /* sec1_GIS */
    .gis {height: 100px;}
    .gis::before {
        width: 22px; height: 22px;
        left: 205px; bottom: 27px;
    }
    .gis a {padding: 30px 20px 30px 20px;}
    .gis p {font-size: 12px; line-height: 20px; letter-spacing: -1px;}
    .gis strong {font-size: 15px;}



    /* sec2 */

    .sec2 .sec_box {padding: 0 25px;}

    /* 하수도 검색 */
    .sec2 fieldset {margin-bottom: 20px;}
    .sec2 fieldset input {
        height: 45px;
        padding: 0 50px 0 20px;
        font-size: 13px;
    }
    .sec2 fieldset input::placeholder {font-size: 13px;}
    .sec2 fieldset button {background-size: 17px;}


    /* quick_menu */
    .quick_menu {
        padding-left: 20px;
        margin-bottom: 25px;
    }
    .quick_menu li {min-width: 115px; height: 105px;}
    .quick_menu li a {padding: 25px 15px 15px 15px;}
    .quick_menu li a img {
        width: 37px;
        margin-bottom: 5px;
    }
    .quick_menu li a span {font-size: 13px;}


    /* 신고하기 */
    .report_box {padding: 0 25px;}
    .report {min-height: 220px;}
    .report::before {
        width: 80px; 
        right: 10px; 
    }
    .report_title {font-size: 12px; line-height: 18px;}
    .report_title span {font-size: 16px; line-height: 23px;}
    .report_desc {font-size: 13px; line-height: 19px; letter-spacing: -1px;}
    .report_btn {
        height: 38px;
        padding: 0 25px;
        font-size: 13.5px; line-height: 38px;
    }
    .report_image {
        width: 100px; height: 100px;
        margin-right: 5px;
    }

    .report + .intro {margin-top: 10px;}
    
    
    /* 하수도 소개 */
    .intro {height: auto;}
    .intro .swiper-button-next, .intro .swiper-button-prev {
        width: 38px; height: 38px;
    }
    .intro .swiper-button-next {left: 163px;}
    .intro .swiper-button-prev {left: 120px;}
    .intro .swiper-button-next::after, .intro .swiper-button-prev::after {font-weight: bold; font-size: 11px;}
    .intro .report_image {
        width: 90px; height: 90px;
        margin: 30px 5px 0 0;
    }



    /* sec3 */

    /* data_slide */
    .data {margin-left: 20px;}
    .data_box img {height: 100px;}
    .data_box p {font-size: 17px; line-height: 25px;}
    .data_box p.desc {font-size: 14px;}
    .sec_box + .news_box {margin-top: 30px;}


    /* news_slide */
    .news_title {
        margin-bottom: 15px;
        font-size: 19px;
    }
    .news {
        width: 650px;
        margin-left: 20px;
        padding-bottom: 40px;
    }
    .news_content {width: 320px;}
    .news_content a {padding: 20px 40px 20px 20px;}
    .news_content a p {font-size: 16px; line-height: 24px;}
    .news_content a p.desc {font-size: 13px; line-height: 21px; }
    .news_content a span {
        width: 20px; height: 20px;
        border-radius: 5px;
        opacity: 0.5;
    }
    .news_content a span::before, .news_content a span::after {width: 1px; height: 6px;}
    .news .swiper-pagination {
        padding: 3px 10px;
        font-size: 13px;
        left: calc(50vw - 45px); 
    }



    /* sec4 */

    .sec4 .sec_title {margin-bottom: 20px;}
    .promotion {padding: 0 20px;}
    .tab_menu {margin-bottom: 20px;}
    .tab_menu > a {font-size: 16px; line-height: 35px;}
    .tab_menu1 {margin-right: 25px;}

    .promotion_box {width: calc(100vw - 40px);}
    .promotion_typo {padding: 40px 30px 20px 30px;}
    .promotion_title {font-size: 22px; line-height: 30px;}
    .promotion_typo a {right: 30px; top: 30px;}
    .promotion_typo a::before, .promotion_typo a::after {width: 2px; height: 14px;}

    /* info_slide */
    .info_slide a {height: 220px;}
    .info_slide a p {font-size: 15px; line-height: 20px;}
    .info_slide a p span {font-size: 11px; line-height: 16px;}

    /* video_slide */
    .video_slide a {height: 220px;}
    .video_slide a::after {
        width: 50px; height: 50px;
        background-size: 50px;
    }
    .sec4 .swiper-button-next, .sec4 .swiper-button-prev {
        width: 40px; height: 40px;
        top: 35px;
    }
    .sec4 .swiper-button-next {left: 77px;}
    .sec4 .swiper-button-prev {left: 30px;}
    .sec4 .swiper-button-next::after, 
    .sec4 .swiper-button-prev::after {font-size: 13px;}
    .sec4 .swiper-pagination {
        font-size: 13px;
        right: 30px; top: 30px;
    }
    .sec4 .swiper-pagination-current {font-size: 15px;}
    
    /* MAIN - END */
    




    /* FOOTER - START */

    #footer {height: 340px !important;}

    .footer_inner {padding: 0 20px;}

    .footer_top {
        overflow: hidden;
        width: 100%;
    }

    .footer_top .footer_inner {padding: 25px 20px 20px 20px;}
    .footer_menu {
        flex-wrap: wrap;
        width: 100%;
        border: 1px solid #c6c6c6;
        border-radius: 10px;
    }
    .footer_menu li {width: 50%; height: 35px;}
    .footer_menu li a {
        padding-left: 25px;
        font-size: 13px; line-height: 35px;
    }

    .banner {
        width: 495px;
        margin: 0 0 20px 0;
    }
    .banner .banner_slide {width: 155px !important; height: 50px;}
    .banner .banner_slide img {width: 135px;}

    .footer_bottom .footer_inner {padding-top: 0;}
    .footer_bottom address {font-size: 13px; line-height: 20px;}
    .footer_bottom p {font-size: 13px; line-height: 20px;}
    .footer_bottom p.copy {font-size: 11px;}

    /* FOOTER - END */
}