@charset "UTF-8";

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-9Black.woff) format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-8Heavy.woff) format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-7ExtraBold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-6Bold.woff) format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-5Medium.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-4Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-3Light.woff) format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Jalnan';
    src: url('../fonts/Jalnan2.woff2') format('woff2'),
        url('../fonts/Jalnan2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ---------------font-------------------- */

*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none; color: black;}
img{border: none; vertical-align: top;}

body{font-family: S-CoreDream, Arial, sans-serif; letter-spacing: -0.05em;}

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

/* --------------------main bg start---------------------------- */
#index1{width: 100%; background: url(../images/bg_deco.png) #fef9eb; background-size: contain;}
#index2{width: 100%; background: url(../images/bg_deco2.png) #D2E9F4; background-size: contain;}
#index3{width: 100%; background: url(../images/bg_deco3.png) #DEF0CC; background-size: contain;}
#index4{width: 100%; background: url(../images/bg_deco4.png) #FEF0EB; background-size: contain;}
#index5{width: 100%; background: url(../images/bg_deco5.png) #EAEEF7; background-size: contain;}

.top_btn{width: 65px; height: 65px; background-color: #214097; border-radius: 50%;  position: fixed; bottom: 20px; right: 30px; z-index: 50000; display: none;}
.top_btn a{width: 65px; height: 65px; color: #fff; font-weight: bold; border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center; letter-spacing: 1px;}

.bg{width: 100%; height: 1063px; background: url(../images/main_bg.png) center 0 no-repeat; background-size: cover; position: absolute; z-index: 0;}
.main{width: 1200px; height: 1063px; margin: 0 auto; text-align: center;}
.logo{margin: 0 auto; padding-top: 30px; position: relative; z-index: 1;}
.logo a{display: block; width: 100%; height: 100%;}
.logo img{max-width: 100%;}
.ment{margin: 0 auto;}
.ment>span{padding: 10px 30px; background-color: #ff8604; font-size: 24px; border-radius: 40px; font-weight: 500; color: #fff; position: absolute; top: -30px; left: 50%; translate: -50%;}
.title{padding: 30px 0; margin: 0 auto;}
.title img{max-width: 100%;}
.ment{position: relative; padding: 30px 0 0 0;}

.menu{width: 100%; margin: 0 auto; position: relative; z-index: 1;}
.menu>ul{width: 100%; padding: 5% 8%; box-sizing: border-box; display: flex; justify-content: space-between;}
.menu>ul li{width: 170px; height: 170px; border-radius: 50%; background-color: #4f67b1d6; position: relative;}
.menu>ul li a{display: block; width: 170px; height: 170px; border-radius: 50%; position: relative; z-index: 10;}
.menu>ul li:nth-child(1) a{background: url(../images/ic_siren.png) center no-repeat; background-position: 50% 30%;}
.menu>ul li:nth-child(2) a{background: url(../images/ic_medicine.png) center no-repeat; background-position: 50% 30%;}
.menu>ul li:nth-child(3) a{background: url(../images/ic_traffic.png) center no-repeat; background-position: 50% 30%;}
.menu>ul li:nth-child(4) a{background: url(../images/ic_trash.png) center no-repeat; background-position: 50% 30%;}
.menu>ul li:nth-child(5) a{background: url(../images/ic_etc.png) center no-repeat; background-position: 50% 30%;}
.ic{padding-top: 100px; color: #fff; font-size: 20px; ;}
.menu>ul li::after{display: block; content: ""; width: 170px; height: 170px; border-radius: 50%; position: absolute; left: 0; top: 0; opacity: 0;}
.menu>ul li:nth-child(1):after{background-color: #f76e5a; }
.menu>ul li:nth-child(2):after{background-color: #3775ec; }
.menu>ul li:nth-child(3):after{background-color: #84bb4d; }
.menu>ul li:nth-child(4):after{background-color: #f85b83; }
.menu>ul li:nth-child(5):after{background-color: #6f50da; }


.menu>ul li:hover::after, .menu>ul li.menu_on::after{outline: 15px solid #ffffffa9; opacity: 1;}

/* --------------------main bg end---------------------------- */

/* --------------------quick menu start---------------------------- */
.quick{width: 200px; position: absolute; top: 0px; right: -250px; z-index: 100;}
.q_menu{width: 230px; margin: 0 auto; border-right: 2px solid #c3d0de; text-align: right;}
.q_menu>li{margin-bottom: 30px; position: relative;}
.q_menu>li::after{display: block; content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: #034ea2; position: absolute; right: -6px; top: 35%;}
.q_menu>li>a{ margin-right: -15px; padding: 8px 37px; border-radius: 37px; font-size: 18px; position: relative; z-index: 101;}
.q_menu>li:hover a::after, .q_menu>li.q_on a::after{font-weight: 500; color: #fff; opacity: 1;}
.q_menu>li a::after{display: block; padding: 8px 37px; border-radius: 37px; font-size: 18px; position: absolute; left: 0; top: 0; opacity: 0;}
.q_menu>li:nth-child(1) a::after{ content: "종합상황실"; background-color: #f76e5a; }
.q_menu>li:nth-child(2) a::after{ content: "응급진료기관 & 약국"; background-color: #4763b0; padding: 8px 36.9px;}
.q_menu>li:nth-child(3) a::after{ content: "교통"; background-color: #84bb4d; }
.q_menu>li:nth-child(4) a::after{ content: "생활폐기물 배출"; background-color: #f85b83; }
.q_menu>li:nth-child(5) a::after{ content: "기타생활"; background-color: #9c78f9; }

/* ---------------------quick menu end---------------------------- */

/* ---------------------공통----------------------------- */
#section_2 {width: 1200px; margin: 0 auto; padding: 100px 0; text-align: center; position: relative;}
.guide{width: 100%; margin: 0 auto;}
.page_ic{padding-bottom: 30px; width: 102px; margin: 0 auto;}
.guideline{box-sizing: border-box; margin: 0 auto; width: 100%; padding: 0 40px; margin-bottom: 50px; display: flex; justify-content: space-between;}
.guideline>p{white-space: nowrap; font-family: Jalnan, Arial, sans-serif; font-size: 38px; color: #fc806e; padding: 0 20px;}
.gl_line{width: 100%; height: 2px; background-color: #fbc2b1; margin-top: 17px;}
.g_pink span{color: #d12748;}

.ment_gr{width: 100%; margin: 0 auto; box-sizing: border-box; position: relative;}
.info_ment{width: 100%; box-sizing: border-box;}
.gl_ment{width: calc(100% - 80px); margin: 0 auto; padding-bottom: 250px;}
.gl_ment::after{display: block; content: ""; width: 511px; height: 509px; background: url(../images/deco_bag.png) center no-repeat; background-size: cover; position: absolute; right: -150px; bottom: -100px; z-index: 0;}
h3{font-size: 24px; font-weight: normal; line-height: 42px; margin-bottom: 50px; letter-spacing: -1px;  word-break: keep-all;}
h3 span{font-weight: bold; font-size: 28px;}
h4{display: inline-block; line-height: 42px; color: #555555; font-weight: 500; font-size: 22px; margin: 0 auto; text-align: center; letter-spacing: -1px; word-break: keep-all;}
h4 span{font-weight: 400; font-size: 20px; color: #6a6a6a;}

#section_3{width: 100%; height: 328px; background: url(../images/under_bn.png) center no-repeat; background-size: cover;}
/* 위 내용은 공통 사항 */

.g_blue span{color: #214097;}
.g_green span{color: #487c14;}
.g_orange span{color: #f64f37;}
.g_purple span{color: #6f50da;}

.ment_og::after{display: none;}
.ment_pp::after{display: none;}
.ment_og{border-bottom: 2px solid #fbc2b1; padding-bottom: 20px; margin-bottom: 50px;}
.ment_pk{border-bottom: 2px solid #f85b83; padding-bottom: 20px; margin-bottom: 50px;}
.ment_pp{border-bottom: 2px solid #cbc4f4; padding-bottom: 20px; margin-bottom: 50px;}

/*  */
.tb_gr{box-sizing: border-box; width: 100%; margin: 0 auto; padding-left: 50px; padding-right: 50px;} 
.tb_gr li{margin-bottom: 50px;}
.tb_gr li:last-child{margin-bottom: 0;}
.tb_gr .tb-ul-list li{margin-bottom: 0; padding: 5px 0 5px 0; font-weight: normal;}
.tb_title{text-align: left; font-weight: 600; padding-left: 43px; position: relative; margin-bottom: 0px;}
.tb_title::before{display: inline-block; content: ""; width: 38px; height: 40px; background:url(../images/deco_ic.png) center no-repeat; background-size: contain; position: absolute; left: 0; top: 0;}
table{width: 100%; border-top: 3px solid; border-spacing: 0; font-size: 16px; margin-top: 10px; word-break: break-all;}
th, td{padding: 20px 0; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc;}
td{padding: 20px 10px; background-color: #fff; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; font-weight: 300;}
th:first-child, td:first-child{border-left: 1px solid #cccccc;}
.tb_h4{display: block; font-size: 18px; font-weight: 300; padding: 5px 0 50px 0; color: #3050bf; text-align: left;}
td>p{margin-top: 7px;}
td>p a{text-align: left; padding: 3px 20px 3px 12px; background: url(../images/ic_arrow.png) 85% center no-repeat #f65a44; background-size: auto; font-size: 11px; border-radius: 14px; color: #fff;}
td>p .go {background: url(../images/ic_go.png) 85% center no-repeat #f65a44;}
td strong{letter-spacing: -1px; }
table .gr-bg{background-color: #f2e2b6; font-weight: 500;}
.tb_bus{box-sizing: border-box;}
.tb_bus th{font-size: 14px;}
.tb_bus td{font-size: 13px; padding: 10px 5px; word-break: keep-all;}
.bus-scroll{overflow-x: scroll;}
/* 위 내용은 table 태그 공통 사항 */

.tb_blue{font-size: 15px;}
.tb_blue td{padding: 12px 5px; font-size: 14px}
.hp_black{font-size: 12px;}
.hp_red{color: #b90211; font-size: 12px;}

.tb_blue{border-color: #4763b0; margin-bottom: 50px;}
.tr_blue{background-color: #b4e0f4;}
.tb_pink{border-color: #d12748;}
.tr_pink{background-color: #F9D2D4;}
.tb_green{border-color: #79ab49;}
.tr_green{background-color: #accf8b;}
.tb_orange{border-color: #dbb23f; margin-bottom: 0;}
.tr_orange{background-color: #f2e2b6;}
.tb_purple{border-color: #5a47b0; margin-top: 10px;}
.tr_purple{background-color: #c5cdf6;}
.tr_purple>td{background-color: #c5cdf6; line-height: 14px;}
.tr_purple th{border-color: #b7becc;}
.tr_purple:last-child th{padding: 10px;}

.tb_fix{table-layout: fixed;}

.tb_green ul{text-align: left; padding-left: 30px;}
.tb_green ul>li{line-height: 30px;}
td>ul li>a{margin-left: 10px; padding: 3px 28px 3px 15px; background: url(../images/ic_go.png) 85% center no-repeat #4892f1; font-size: 14px; border-radius: 14px; color: #fff;}
td>ul li>a img{padding-top: 8.5px; padding-left: 5px;}
/* --------- */

dl{text-align: left;}
dt{font-size: 20px; font-weight: 600; padding-left: 15px; padding-bottom: 15px; position: relative; margin-top: 15px;}
dt::before{display: inline-block; content: ""; width: 8px; height: 8px; border-radius: 50%; border: 4px solid #3050bf; margin-right: 10px;}
dd{padding-left: 50px; position: relative; padding-bottom: 5px; font-size: 18px; font-weight: 300; padding-right: 10px;}
dd::after{display: block; content: ""; width: 5px; height: 5px; border-radius: 50%; background-color: #4763b0; position: absolute; left: 35px; top: 10px;}
dd>a{margin-left: 5px; padding: 3px 28px 3px 15px; background: url(../images/ic_go.png) 85% center no-repeat #4892f1; font-size: 14px; border-radius: 14px; color: #fff;}
dd>a.sty-none{margin-left: 0; padding: 0; background: none; color: #000; font-size: 18px;}
dd.font-bold{font-weight: bold;}
dd span.gr-bold{font-weight: bold; color: #487c14;}

dl table{text-align: center; margin-top: 0; margin-bottom: 50px;}
dl.dl_table{padding: 0;}
dl table.mgb-none{margin-bottom: 0;}
p.tb-plus{font-size: 18px;font-weight: 300;padding: 5px 0 50px 0;color: #3050bf;}
/* 위 내용은 dl 태그 공통 사항 */
.tb_gr dt.dt_pk::before{border-color: #f85b83;}
.tb_gr dd.dd_pk::after{background-color: #f85b83;}

.dt_og::before{border-color: #f65a44;}
.dd_og::after{background-color: #f76e5a;}
.dt_gr::before{border-color: #487c14;}
.dd_gr::after{background-color: #487c14;}
.dt_pp::before{border-color: #6f50da;}
.dd_pp::after{background-color: #9075ed;}

.dd_og i{position: relative; z-index: 1; width: 100%;}
.dd_og i::after{display: inline-block; content: ""; width: 100%; height: 10px; background-color: #fad496; position: absolute; z-index: -1; left: 0; bottom: 0;}
.dt_none::before{display: none;}
.dd_none::after{display: none;}

dd.app::after{display: none;}
.app_gr{display: flex; align-items: center; position: relative;}
.app{display: flex;}
.app>p{margin-left: 5px;}
.app_gr.green_app{margin-left: 10px;}

td.mark_x{background:url(../images/mark_x.png) #fff center no-repeat; background-size: 30%;}
.marking_x{background: url(../images/mark_small_x.png) center no-repeat #fee7f8; background-size: 25%}
.marking_o{background: url(../images/mark_small_o.png) center no-repeat #dfedfe; background-size: 25%}
.tb_mini{font-size: 12px; font-weight: 300;}

/* --------------------traffic--------------------- */
.traffic_box{width: 100%; background-color: #fff; border-radius: 10px; margin-top: 10px; margin-bottom: 30px; padding: 80px 40px 60px 40px; box-sizing: border-box;}
.traffic_box div{margin: 0 auto;}
.traffic_box img{max-width: 100%;}
.traffic_box p{margin: 0 auto; width: 100%; max-width: 1041px; text-align: left; color: #6a6a6a; padding-top: 50px;}

.traffic_info{width: 40%; position: absolute; bottom: 0;}
.info{padding-top: 100px; height: 219px; text-align: center;  background: url(../images/deco_police.png) left 100% no-repeat; position: relative; left: 0px; bottom: 0px; line-height: 40px;}
.info_box{position: absolute; left: 100px; bottom: 40px;}
.info_box span{padding:50px; font-size: 20px;  text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;}
.info_box p a{ padding: 7px 30px; border-radius: 40px; font-size: 18px; font-weight: 300; color: #fff;}
.info_box p a img{margin-left: 20px; margin-top: 10px; padding: 6px 5px; border: 1px solid #fff; border-radius: 50%;}
.traffic_box>ul:last-child{padding-left: 0;}

.traffic_box>ul:last-child>li{display: flex; width: 100%; align-items: center; margin-bottom: 20px;}
.traffic_box>ul:last-child>li div{padding-left: 20px;}
/* ------------------------------------------------------- */
/* -------------------trash------------------------- */
.slash {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="gray" /></svg>');}
.backslash {background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>');}
.slash, .backslash { text-align: left; padding-left: 10px; }
.slash div, .backslash div { text-align: right; padding-right: 10px; }
.trash-box{width: 100%; max-height: 350px; box-sizing: border-box; background-color: #fff; border: 1px solid #cccccc; padding: 65px; position: relative;}
.trash-box img{position: absolute; bottom: 0px;}
.trash-box img.trash-left{left: 30px;}
.trash-box img.trash-right{right: 25px;}
.trash-box h2{font-size: 22px; font-weight: 600;}
.trash-box>p{font-size: 18px; font-weight: 400; color: #d12e4d; padding-top: 10px;}
.trash-date{padding: 30px 0;}
.trash-date p{font-size: 18px; font-weight: 200; padding: 2.5px 0;}
.trash-date p span{font-size: 20px; color: #d12e4d; font-weight: 600;}
.trash-box .tb_h4{padding-bottom: 0;}
/* ------------------------------------------------------ */
/* -------------------gas-------------------- */
.gas_box{width: 100%; background-color: #fff; border-radius: 10px; margin-top: 10px;}
.gas_box ul{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 50px 40px;}
.gas_box>ul>li{position: relative; width: 48%; box-sizing: border-box; padding: 20px 15px; margin-bottom: 30px; border: 3px dashed #9075ed; border-radius: 20px; display: flex; justify-content: space-between;}
.num{position: absolute; left: -25px; z-index: 10; padding: 13px 15px; font-size: 30px; font-weight: 700; letter-spacing: -2px; color: #fff; background-color: #6f50da; border-radius: 5px 20px 20px 20px;}
.gas_box li:nth-child(3){width: 100%;}
.gas_box li:nth-child(4){width: 100%;}


.gas_box li:nth-child(4) dl>dd>ul{padding: 0 15px; line-height: 30px; position: relative;}
.gas_box li:nth-child(4) dl>dd>ul>li::before{display: block; content: "-"; position: absolute; left: 0;}
.gas_box li:nth-child(6) dl>dd>ul{padding: 0 15px; line-height: 30px; position: relative;}
.gas_box li:nth-child(6) dl>dd>ul>li::before{display: block; content: "-"; position: absolute; left: 0;}
.gas_box li:nth-child(5), .gas_box li:nth-child(6){margin-bottom: 0;}
.gas_box ul li>dl{width: 60%; padding: 0;}
.dt_none{font-size: 18px; padding-left: 45px;}
.dd_none{font-size: 16px; font-weight: 300; letter-spacing: -1px; padding-left: 45px; padding-bottom: 20px;}
.dd_none li{line-height: 24px; padding-bottom: 10px;}
.gas_img{width: 170px; height: 170px; margin-left: 20px;}
.gas_img img{max-width: 100%; max-height: 100%;}



@media screen and (max-width:1800px) {
    .quick{display: none;}
    .gl_ment::after{width: 450px; height: 448px;}
}
@media screen and (max-width:1500px) {
    .top_btn{display: block;}

    .bg{height: 960px;}
    .main{width: 1200px; height: 960px;}
    .logo{width: 275px;}
    .ment>span{font-size: 22px;}
    .title{width: 650px;}
    .menu>ul li{width: 160px; height: 160px;}
    .menu>ul li a{width: 160px; height: 160px;}
    .menu>ul li::after{width: 160px; height: 160px;}
    .ic{font-size: 18px;}

    #section_2{width: 1120px; margin: 0px auto; padding: 0 0 60px 0; overflow: hidden;}
    .gl_ment{padding-bottom: 50px;}
    .gl_ment::after{display: none;}

    .ment_og{padding-bottom: 15px;}
    .ment_pp{padding-bottom: 15px;}

    .tb_blue{font-size: 14px;}
    .tb_blue td{padding: 12px 5px; font-size: 13px}
    .hp_black{font-size: 11px;}
    .hp_red{color: #b90211; font-size: 11px;}

    #section_3{height: 200px;}

}
@media screen and (max-width:1280px){
    .logo{width: 235px;}
    .ment>span{font-size: 20px; top: -20px;}
    .title{width: 550px; padding: 40px 0;}
    .bg{height: 960px;}
    .main{width: 100%;}
    .menu>ul{flex-wrap: wrap; justify-content: center; width: 1047px; margin: 0 auto;}
    .menu>ul li{ margin: 10px 30px;}
}
@media screen and (max-width:1200px) {

    .tb_title{padding-left: 35px;}
    dt{padding-left: 0;}
    dt::before{margin-right: 7px;}
    dd{padding-left: 20px;}
    dd::after{left: 10px;}

    .page_ic{width: 85px;}
    .guideline{margin-bottom: 30px;}
    .guideline> p{font-size: 32px;} 

    .tb_title::before {width: 32px; left: -3px;}
    h3{font-size: 22px; margin-bottom: 30px;} 
    h3 span{font-size: 24px;}
    h4{font-size: 20px; line-height: 38px;}
    #section_2{width: 100%;}
    .gas_box>ul>li{width: 100%;}
    .gas_box li:nth-child(5){margin-bottom: 30px;}
    .gas_box ul li>dt>dd{width: 70%;}
}

@media screen and (max-width:1064px){
    .menu>ul{width: 100%;}
    .ment>span{font-size: 18px;}
    .title{width: 480px; padding-top: 35px; padding-bottom: 50px;}
    
}

@media screen and (max-width:964px){

    #index2>#section_2>div>.tb_gr{padding: 0 15px;}
    .scroll{overflow-x: scroll; margin-bottom: 0px;}
    .scroll>table{width: 1020px;}

    th{font-size: 14px;}
    td{font-size: 14px;}
    .tb_h4{font-size: 16px;}
    p.tb-plus{font-size: 16px; padding: 5px 0 20px 0;}
    dt{font-size: 18px; padding-bottom: 12px; margin-top: 12px;}
    dt::before{width: 7px; height: 7px;}
    dd{font-size: 16px;}
    .app{left: 290px;}
    h4 span{font-size: 16px;}

    td>ul li>a{font-size: 14px;}

    td>p a{text-align: left; padding: 2px 18px 2px 10px; font-size: 10px;}
    .tb_blue{font-size: 13px; margin-bottom: 0;}
    .tb_pink{margin-bottom: 0;}
    .tb_purple{margin-bottom: 0; margin-top: 5px;}
    .tb_blue td{padding: 8px 5px; font-size: 12px}
    .hp_black{font-size: 10px;}
    .hp_red{color: #b90211; font-size: 10px;}

    .scroll.mgb-30{margin-bottom: 30px;}

    .traffic_box{padding: 40px 30px;}

    .trash-box{padding: 35px;}
    .trash-box h2{font-size: 18px;}
    .trash-box>p{font-size: 16px;}
    .trash-box img{height: 120px;}
    .trash-box img.trash-left{left: 15px;}
    .trash-box img.trash-right{right: 15px;}
    .trash-date{padding: 20px;}
    .trash-date p{font-size: 16px;}
    .trash-date p span{font-size: 18px;}
}

@media screen and (max-width:920px){
    .bg{height: 800px;}
    .main{height: 800px;}
    .logo{width: 180px; margin-top: 0px;}
    .ment>span{font-size: 16px; top: -10px;}
    .title{width: 400px; padding: 40px 0;}
    .menu>ul{padding: 0 0%;}
    .menu>ul li{width: 120px; height: 120px; margin: 10px 15px;}
    .menu>ul li a{width: 120px; height: 120px;}
    .menu>ul li::after{width: 120px; height: 120px;}
    .ic{font-size: 13px; padding-top: 70px;}
    .menu>ul li:nth-child(1) a{background-size: 40%; background-position: 55% 35%;}
    .menu>ul li:nth-child(2) a{background-size: 40%; background-position: 55% 35%;}
    .menu>ul li:nth-child(3) a{background-size: 40%; background-position: 55% 35%;}
    .menu>ul li:nth-child(4) a{background-size: 40%; background-position: 55% 35%;}
    .menu>ul li:nth-child(5) a{background-size: 40%; background-position: 55% 35%;}
    .menu>ul li:hover::after, .menu>ul li.menu_on::after{outline: 10px solid #ffffffa9; opacity: 1;}
 
    .page_ic{width: 65px;}
    .guideline{margin-bottom: 20px;}
    .guideline> p{font-size: 28px;} 
    .gl_line{margin-top: 15px;}

    .tb_title{padding-left: 32px;}
    .tb_title::before {width: 28px;}
    h3{font-size: 20px; margin-bottom: 20px; line-height: 38px;} 
    h3 span{font-size: 22px;}
    h4{font-size: 18px; line-height: 32px;}
    .gl_ment{padding-bottom: 0px;}

    #section_3{height: 170px;}

}

@media screen and (max-width:840px){
    .tb_green ul{padding-left: 10px;}
    .traffic_box>ul:last-child>li div{height: 130px; line-height: 22px;}
    .traffic_box>ul:last-child>li div span{font-size: 16px;}
    .traffic_box>ul:last-child>li div h5{font-size: 14px;}
    .info_box{line-height: 30px; left: 60px; bottom: 20px;}
    .info_box span{font-size: 16px;}
    .info_box p{margin-top: 0;}
    .info_box p a{ padding: 7px 20px; border-radius: 40px; font-size: 14px; font-weight: 300; color: #fff;}
    .info_box p a img{margin-left: 10px; margin-top: 6px;}
}

@media screen and (max-width:780px) {
    #section_2{margin-top: 0px;}
    
    dl table{margin-bottom: 0;}
    .tb_title{margin-top: 20px;}

    .menu>ul{padding: 0 15%;}

    .page_ic{width: 55px;}
    .guideline> p{font-size: 24px;} 
    .gl_line{margin-top: 12px;}
    .gl_ment{padding: 0 10px; box-sizing: border-box;}

    .tb_title::before {width: 26px;}
    h3{font-size: 18px; margin-bottom: 20px; line-height: 38px;} 
    h3 span{font-size: 20px;}
    h4{font-size: 16px; line-height: 32px;}

    #section_3{height: 150px; margin-top: 0px;}

    th{font-size: 13px;}
    .tb_bus th{font-size: 13px;}
    td{font-size: 13px;}
    .tb_h4{font-size: 14px; padding-bottom: 0px;}
    p.tb-plus{font-size: 14px;}
    /* .tb_h4{padding: 0; margin-top: -30px;} */
    dt{font-size: 16px; padding-bottom: 6px; margin-top: 12px;}
    dt::before{width: 6px; height: 6px;}
    dd{font-size: 14px; line-height: 24px;}
    dd>a{font-size: 13px;}
    .app{left: 260px;}
    h4 span{font-size: 14px;}

    td>ul li>a{font-size: 13px;}

    .traffic_box>ul li{font-size: 15px;}
    .traffic_box>ul li h5{font-size: 13px;}

    .trash-box{padding: 20px;}
    .trash-box h2{font-size: 16px;}
    .trash-box>p{font-size: 14px; padding-top: 5px;}
    .trash-date{padding-bottom: 15px;}
    .trash-date p{font-size: 14px;}
    .trash-date p span{font-size: 16px;}
    .trash-box img{display: none;}
    .trash-box .tb_h4{padding-top: 0;}
    td.mark_x{background-size: 20%;}

    .num{font-size: 24px;}
    .dt_none{font-size: 16px; padding-left: 25px; padding-bottom: 5px;}
    .dd_none{font-size: 14px; padding-left: 25px; padding-bottom: 5px; }
    .h4_none{ margin-top: 0px;}
    .gas_box>ul>li{flex-wrap: wrap; padding: 10px 20px;}
    .gas_box ul li>dl{width: 100%;}
    .gas_img{margin: 0 auto;}
}

@media screen and (max-width:720px) {
    .traffic_info{ position: absolute; top: 0; right: 30px;}
    .info{height: 25px; background-position: 0 0%; background-size: auto; margin-top: 10px;}
    .info_box{width: 100%; left: 50px; bottom: 20px;}
    .info_box span{padding:0px; font-size: 16px; text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;}
    .info_box p a{font-size: 12px; padding: 5px 22px;}
    .info_box p a img{height: 6px; padding: 4px 3px; margin-top: 8px;}

    .traffic_box>ul li{padding-bottom: 15px; line-height: 26px;}

    .traffic_box>ul:last-child>li div {line-height: 20px;}
    .traffic_box>ul:last-child>li div span{font-size: 15px;}
    .traffic_box>ul:last-child>li div h5{font-size: 13px;}

    .tb_gr{ padding-left: 20px; padding-right: 20px;}

    .guideline{padding: 0 20px;}
    .gl_ment{width: calc(100% - 40px);}
}

@media screen and (max-width:659px) {
    .bg{height: 900px;}
    .main{height: 900px;} 
    .info{background: none;}
    .info_box{padding: 10px 0;  width: 100%; left: 30px; bottom: 0px;}

    
    .traffic_box>ul:last-child{flex-wrap: wrap;}
    .traffic_box>ul:last-child>li{width: 100%; margin-right: 15px; padding: 5px 10px;}
    .traffic_box>ul:last-child>li div{height: auto; font-size: 16px; padding-left: 12px; padding-right: 12px;}
    .ic_tf{padding-bottom: 5px; }
    .ic_tf img{height: 50px}
}

@media screen and (max-width:640px){
    .ment>span{white-space: nowrap; font-size: 13px;}
    .title{width: 350px; padding: 30px 0;}
    /* td>p a{font-size: 10px; padding: 3px 15px 3px 6px;} */
    td>p .go{background-position: 90% 55%; background-size: 13%;}
    .traffic_box{padding: 40px 20px 30px 20px;}
    .traffic_box p{padding-top: 20px; font-size: 14px;}
    .tb_gr li{margin-bottom: 30px;}
}

@media screen and (max-width:615px){
    
    dt{font-size: 14px; margin-top: 12px;}
    dt::before{width: 5px; height: 5px;}
    dd{font-size: 14px; line-height: 24px;}
    dd>a{font-size: 13px;}
    .app{left: 260px;}
    th{font-size: 12px;}
    td{font-size: 12px;}
    .tb_h4{font-size: 13px;}
    p.tb-plus{font-size: 13px;}
    td>p .go{background-position: 90% 55%; background-size: 13%;}
    td>ul li>a{font-size: 12px;}
    h4 span{font-size: 13px;}

    .trash-box h2{font-size: 15px;}
    .trash-box>p{font-size: 13px;}
    .trash-date p{font-size: 13px;}
    .trash-date p span{font-size: 15px;}
}

@media screen and (max-width:610px){
    .bg{height: 750px;}
    .main{height: 750px;}
    .menu>ul{padding: 0 12%;}
    .menu>ul li{width: 100px; height: 100px; margin: 10px 10px;}
    .menu>ul li a{width: 100px; height: 100px;}
    .menu>ul li::after{width: 100px; height: 100px;}
    .ic{font-size: 12px; padding-top: 60px;}
    .menu>ul li:nth-child(1) a{background-size: 40%; background-position: 55% 30%;}
    .menu>ul li:nth-child(2) a{background-size: 40%; background-position: 55% 30%;}
    .menu>ul li:nth-child(3) a{background-size: 40%; background-position: 55% 30%;}
    .menu>ul li:nth-child(4) a{background-size: 40%; background-position: 55% 30%;}
    .menu>ul li:nth-child(5) a{background-size: 40%; background-position: 55% 30%;}
    .menu>ul li:hover::after, .menu>ul li.menu_on::after{outline: 7px solid #ffffffa9; opacity: 1;}

    .page_ic{width: 45px; padding-bottom: 20px;}
    .guideline{margin-bottom: 30px;}
    .guideline> p{font-size: 20px; padding: 0 10px;}
    .ment_gr{padding: 0 40px;}
    .gl_line{margin-top: 10px;}
    .tb_title{padding-left: 25px;}
    .tb_title::before {width: 24px; top: -8px;}
    h3{font-size: 16px; margin-bottom: 20px; line-height: 32px;} 
    h3 span{font-size: 18px;}
    h4{font-size: 15px; line-height: 28px; text-align: center;}
    .tb_h4{text-align: left;}
}

@media screen and (max-width:570px){
    #section_2{margin-top: -20px;}

    th{font-size: 12px;}
    .tb_bus th{font-size: 12px;}
    td{font-size: 12px;}
    .tb_bus td{font-size: 12px;}

    .trash-date p{word-break: keep-all;}
    .trash-date p span{font-size: 14px;}
     
    td>p .go{background-position: 90% 55%; background-size: 13%;}

    .traffic_box>ul li{font-size: 14px; line-height: 20px;}
    .traffic_box>ul li h5{font-size: 12px;}

    .traffic_box>ul:last-child>li div {line-height: 18px;}
    .traffic_box>ul:last-child>li div span{font-size: 13px;}
    .traffic_box>ul:last-child>li div h5{font-size: 11px;}
    .info_box{padding: 10px 0;  width: 100%; left: 30px; bottom: 25px;}
    .info_box span{font-size: 14px;}
    .info_box p a{font-size: 11px}
    .info_box p a img{height: 5px; padding: 4px 3px; margin-top: 8px;}

    td>ul li>a {font-size: 11px; margin-left: 3px; padding: 2px 20px 2px 10px; background-size: 11%;}
    
    #section_3{margin-top: -20px;}
}

@media screen and (max-width:520px) {
    .fix_th{width: 88px;}
    dd.app_gr{flex-wrap: wrap;}
    dd::after{top: 9px;}
    .app>p{margin-top: 5px;}
    .green_app>p{margin-bottom: 5px;}
    td{padding: 5px;}
    .traffic_box{padding: 20px;}
    .traffic_box p{font-size: 12px; padding-top: 10px;}

    .tb_pink td{padding: 15px 10px;}
    .tb_purple{margin-top: 0;}
}

@media screen and (max-width:490px){
    .top_btn{width: 50px; height: 50px; right: 15px; bottom: 15px;}
    .top_btn a{width: 50px; height: 50px; font-size: 13px;}

    .bg{height: 800px;}
    .main{height: 800px;}
    th{font-size: 11px;}
    td{font-size: 11px; overflow-wrap: break-word; }
    dt{font-size: 14px; padding-bottom: 6px; margin-top: 10px;}
    dt::before{width: 4px; height: 4px;}
    dd{font-size: 12px; line-height: 20px;}
    dd>a{font-size: 11px;}
    dd::after{top: 7px;}

    .traffic_info{width: 100%; position: static; padding-bottom: 0;}
    .traffic_box>ul li:nth-child(2){padding-bottom: 0;}
    .traffic_box>ul li:last-child{padding-bottom: 0;}
    .info_box{position: static; padding: 0; ; display: flex;}
    .info_box p{margin-left: 10px;}
    .info{padding:0; height: auto;}
    .info_box span{margin-top: 0;}
    .traffic_box>ul{padding: 20px;}
    .traffic_box>ul:last-child{width: 100%; margin: 0 auto; margin-bottom: 10px; box-sizing: border-box; padding: 0px 0px; display: flex; justify-content: space-around;}
    .traffic_box>ul:last-child>li{box-sizing: border-box; width: 30%;flex-wrap: wrap; padding: 10px 5px; margin-left: 0; margin-right: 0; border: 3px solid #accf8b; border-radius: 10px;}
    .traffic_box>ul:last-child>li:last-child{margin-right: 0px;}
    .traffic_box>ul:last-child>li div{height: 120px; line-height: 15px; padding: 5px;}

    #section_3{height: 100px;}
}


@media screen and (max-width:380px){
    #section_2{margin-top: 0px;}
    
    .title{width: 300px; padding: 30px 0;}
    .main{height: 800px;}
    .page_ic{width: 45px; padding-bottom: 10px;}
    .guideline{padding: 0 10px;}
    .ment_gr{padding: 0 40px;}
    .guideline{margin-bottom: 15px;}
    .guideline> p{font-size: 20px; padding: 0 5px;} 
    .gl_line{margin-top: 10px;}
    .gl_ment{width: calc(100% - 20px);}

    h3{font-size: 14px; margin-bottom: 15px; line-height: 26px;} 
    h3 span{font-size: 16px;}
    h4{font-size: 13px; line-height: 22px;}
    .traffic_box>ul:last-child>li div{line-height: 14px;}
    .traffic_box>ul:last-child>li div span{font-size: 12px;}
    .traffic_box>ul:last-child>li div h5{font-size: 10px;}

    .info_box p a{padding: 5px 12px;}

    td>ul li{word-break: keep-all}
}