@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/Jalnan.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* PSD 제목 글꼴: 합성 Bold 없이 원본 서체 사용 */
@font-face {
    font-family: 'VITRO CORE';
    src: url('../fonts/VITRO-CORE.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------------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;}


/* --------------- common -------------------- */
.color_red {color: #f76e5a;}
.color_red2 {color: #e17272;}
.color_blue {color: #1a63b5;}


/* --------------------main bg start---------------------------- */
#index1{width: 100%; background: url(../images/bg_deco.png) #fffbe7; background-size: contain;}
#index2{width: 100%; background: url(../images/bg_deco2.png) #f6fafd; background-size: contain;}
#index3{width: 100%; background: url(../images/bg_deco3.png) #ecfaf6; 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) #fcf5ff; 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: 855px; background: url(../images/main_bg.png) center 0 no-repeat; background-size: cover; position: absolute; z-index: 0;}
.main{width: 1100px; height: auto; 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{position: relative; 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: 20px 0; margin: 0 auto;}
.title img{max-width: 100%;}


.menu{width: 100%; margin: 0 auto; position: relative; z-index: 1;}
.menu>ul{width: 100%; padding: 5% 20px; gap: 20px; box-sizing: border-box; display: flex; justify-content: space-between;}
.menu>ul li{width: 180px; height: 180px; border-radius: 30px; background-color: #fff; position: relative;}
.menu>ul li a{display: flex; width: 100%; height: 100%; padding: 20px; border-radius: 30px; position: relative; z-index: 10;border: 5px solid #f4f4f4; box-sizing: border-box;flex-direction: column;align-items: center;}
.menu>ul li a .icon {display: flex; flex: 1; width: 100%;}
.menu>ul li:nth-child(1) a .icon{background: url(../images/ic_siren_off.png) center no-repeat; }
.menu>ul li:nth-child(2) a .icon{background: url(../images/ic_medicine_off.png) center no-repeat; }
.menu>ul li:nth-child(3) a .icon{background: url(../images/ic_traffic_off.png) center no-repeat; }
.menu>ul li:nth-child(4) a .icon{background: url(../images/ic_trash_off.png) center no-repeat; }
.menu>ul li:nth-child(5) a .icon{background: url(../images/ic_etc_off.png) center no-repeat; ;}
.menu>ul li a .text {display: flex; flex: 1 0;max-height: 2.4em;line-height: 1.2; color: #6b6b6b; font-size: 20px; align-items: center;}

.menu>ul li:nth-child(1) a.on , .menu>ul li:nth-child(1) a:hover {border-color: #f76e5a;}
.menu>ul li:nth-child(2) a.on , .menu>ul li:nth-child(2) a:hover {border-color: #36528e;}
.menu>ul li:nth-child(3) a.on , .menu>ul li:nth-child(3) a:hover {border-color: #348778;}
.menu>ul li:nth-child(4) a.on , .menu>ul li:nth-child(4) a:hover {border-color: #f36f91;}
.menu>ul li:nth-child(5) a.on , .menu>ul li:nth-child(5) a:hover {border-color: #b76ad7;}
.menu>ul li:nth-child(1) a.on .text, .menu>ul li:nth-child(1) a:hover .text{color: #f76e5a;font-weight: bold;}
.menu>ul li:nth-child(2) a.on .text, .menu>ul li:nth-child(2) a:hover .text{color: #36528e;font-weight: bold;}
.menu>ul li:nth-child(3) a.on .text, .menu>ul li:nth-child(3) a:hover .text{color: #348778;font-weight: bold;}
.menu>ul li:nth-child(4) a.on .text, .menu>ul li:nth-child(4) a:hover .text{color: #f36f91;font-weight: bold;}
.menu>ul li:nth-child(5) a.on .text, .menu>ul li:nth-child(5) a:hover .text{color: #b76ad7;font-weight: bold;}
.menu>ul li:nth-child(1) a.on .icon,.menu>ul li:nth-child(1) a:hover .icon{background: url(../images/ic_siren_on.png) center no-repeat;}
.menu>ul li:nth-child(2) a.on .icon,.menu>ul li:nth-child(2) a:hover .icon{background: url(../images/ic_medicine_on.png) center no-repeat;}
.menu>ul li:nth-child(3) a.on .icon,.menu>ul li:nth-child(3) a:hover .icon{background: url(../images/ic_traffic_on.png) center no-repeat;}
.menu>ul li:nth-child(4) a.on .icon,.menu>ul li:nth-child(4) a:hover .icon{background: url(../images/ic_trash_on.png) center no-repeat;}
.menu>ul li:nth-child(5) a.on .icon,.menu>ul li:nth-child(5) a:hover .icon{background: url(../images/ic_etc_on.png) center no-repeat;}

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

/* --------------------quick menu start---------------------------- */
.quick{width:195px;position:absolute;top:0;right:-220px;z-index:100;}
.q_menu{width:195px;box-sizing:border-box;margin:0 auto;padding:10px 0;position:relative;border:0;text-align:center;display:flex;flex-direction:column;gap:16px;}

/* .q_menu::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:5px;transform:translateX(-50%);border-radius:3px;background:#f2f2f2;} */
.q_menu>li{margin:0;position:relative;}
.q_menu>li::after,.q_menu>li>a::after{content:none;display:none;}
.q_menu>li>a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:38px;margin:0;padding:0 10px;border:1px solid #cecece;border-radius:20px;background:#fff;font-family:'Jalnan',Arial,sans-serif;font-size:18px;font-weight:400;line-height:1.2;letter-spacing:0;color:#3c3c3c;white-space:nowrap;position:relative;z-index:1;}
.q_menu>li:nth-child(1){--quick-active:#f76e5a;}
.q_menu>li:nth-child(2){--quick-active:#36528e;}
.q_menu>li:nth-child(3){--quick-active:#348778;}
.q_menu>li:nth-child(4){--quick-active:#f36f91;}
.q_menu>li:nth-child(5){--quick-active:#c577e6;}
.q_menu>li:nth-child(2)>a{letter-spacing:-.025em;}
.q_menu>li:hover>a,.q_menu>li.q_on>a,.q_menu>li>a:focus-visible{border-color:var(--quick-active);background:var(--quick-active);color:#fff;}
.q_menu>li>a:focus-visible{outline:2px solid var(--quick-active);outline-offset:3px;}

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

/* ---------------------공통----------------------------- */
#section_2 {width: 1200px; margin: 0 auto; padding: 80px 0 120px; 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;}
.d{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: 280px; 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;}


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 #9e5f45; 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: #e0eef6; }
.tr_blue > th {border-bottom: 1px solid #4763b0;}

.tb_pink{border-color: #d12748;}
.tr_pink{background-color: #F9D2D4;}

.tb_green{border-color: #348778;}
.tb_green td {background-color: rgb(255 255 255 / 0%);}
.tr_green{background-color: #d1efea;}
.tr_green > th {border-bottom: 1px solid #348778;}
.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: #f7e4fe;}
.tr_purple>td{background-color: #a857c9; line-height: 14px;}
.tr_purple th{border-color: #b7becc;}
.tr_purple > th {border-bottom: 1px solid #5a47b0;}
.tb_purple td {background-color: rgb(255 255 255 / 0%);word-break: keep-all;}
.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; }
/* ------------------------------------------------------ */
/* -------------------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%;}




/* ================= PSD 5종 공통 텍스트 스타일 =================
   원본: PSD_공통텍스트스타일/공통_텍스트_스타일.md
   1:1 데스크톱 수치. 자동 행간 120%는 line-height: 1.2로 구현.
   제목/인사말/하단 배너의 이미지 안 글자는 CSS 적용 대상이 아님.
   레이아웃·문구는 유지하고 문자 속성만 적용한다.
================================================================ */
.menu>ul li a .text,
.menu>ul li a .ic {
    font-family: 'S-CoreDream', Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: #6b6b6b;
}
.menu>ul li:nth-child(1) { --menu-text-active: #dd5b48; }
.menu>ul li:nth-child(2) { --menu-text-active: #36528e; }
.menu>ul li:nth-child(3) { --menu-text-active: #348778; }
.menu>ul li:nth-child(4) { --menu-text-active: #f36f91; }
.menu>ul li:nth-child(5) { --menu-text-active: #b76ad7; }
.menu>ul li.menu_on a :is(.text, .ic),
.menu>ul li a.on :is(.text, .ic),
.menu>ul li:nth-child(n) a:hover :is(.text, .ic),
.menu>ul li:nth-child(n) a.on :is(.text, .ic) {
    /* font-weight: 600;
    color: var(--menu-text-active); */
}

h3,
dt,
dd,
.copy {
    font-family: 'S-CoreDream', Arial, sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.05em;
    color: #2e2e2e;
}
h3 span { font-size: inherit; font-weight: inherit; }
.tb_gr .tb-ul-list li,
dd.font-bold,
dd span.gr-bold { font-weight: 600; }
dd>a.sty-none { font-size: inherit; }
.copy .coral { color: #f76e5a; }
.copy .blue,
.color_blue { color: #1a63b5; }
.copy .contacts {
    font-size: 22px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.05em;
}
.copy .contacts .coral { color: #e17272; }
.copy .contacts a { color: inherit; }

.guideline>p,

#index2 .tb_gr>li>dl:has(>.scroll)>dt {
    font-family: 'VITRO CORE', Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #3a3939;
}
.guideline>p>span { color: inherit; font-weight: inherit; font-size: inherit; }

/* 반복 표 스타일: ②·③ Medium / ④·⑤ 헤더 Bold */
:is(#index2, #index3) table th {
    font-family: 'S-CoreDream', Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: #272728;
}
:is(#index2, #index3) table td {
    font-family: 'S-CoreDream', Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: #272728;
}
:is(#index4, #index5) table th {
    font-family: 'S-CoreDream', Arial, sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: #272728;
}
:is(#index2, #index3) :is(.tb_h4, p.tb-plus) {
    font-family: 'S-CoreDream', Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.05em;
    color: #e17272;
}
/* ================= PSD 공통 텍스트 스타일 끝 ================= */

@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;}


    .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;}
    .menu>ul li a :is(.text, .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;}

    .main{width: 100%;}
    .menu>ul{ justify-content: center; width: 1047px; margin: 0 auto;}
    .menu>ul li{ margin: 10px 30px;}
}
@media screen and (max-width:1200px) {


    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;}


    h3{font-size: 22px; margin-bottom: 30px;}
    h3 span{font-size: inherit;}
    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;}

}

@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;}
    .menu>ul li a :is(.text, .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;}



    h3{font-size: 20px; margin-bottom: 20px; line-height: 38px;}
    h3 span{font-size: inherit;}
    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;}

    .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;}


    h3{font-size: 18px; margin-bottom: 20px; line-height: 38px;}
    h3 span{font-size: inherit;}
    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;}

    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;}

}

@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;}
    .menu>ul li a :is(.text, .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;}


    h3{font-size: 16px; margin-bottom: 20px; line-height: 32px;}
    h3 span{font-size: inherit;}
    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;}


    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: inherit;}
    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}
}
/* PSD 데스크톱 크기는 1201px 이상에서 유지한다. */
@media screen and (min-width:1201px) {
    .menu>ul li a :is(.text, .ic) { font-size: 20px; }
}
/* 본문 신규 .copy와 소제목/표도 기존 반응형 구간에 맞춰 조정. */
@media screen and (max-width:1200px) {
    .copy { font-size: 22px; }
    .copy .contacts { font-size: 20px; }
     #index2 .tb_gr>li>dl:has(>.scroll)>dt { font-size: 32px; }
}
@media screen and (max-width:964px) {
    :is(#index2, #index3, #index4, #index5) table th { font-size: 14px; }
    :is(#index2, #index3) table td { font-size: 14px; }
    :is(#index2, #index3) :is(.tb_h4, p.tb-plus) { font-size: 16px; line-height: 1.6; }
}
@media screen and (max-width:920px) {
    .copy { font-size: 20px; line-height: 32px; }
    .copy .contacts { font-size: 18px; line-height: 32px; }
     #index2 .tb_gr>li>dl:has(>.scroll)>dt { font-size: 28px; }
}
@media screen and (max-width:780px) {
    .copy { font-size: 18px; line-height: 30px; }
    .copy .contacts { font-size: 16px; line-height: 28px; }
     #index2 .tb_gr>li>dl:has(>.scroll)>dt { font-size: 24px; }
    :is(#index2, #index3, #index4, #index5) table th { font-size: 13px; }
    :is(#index2, #index3) table td { font-size: 13px; }
    :is(#index2, #index3) :is(.tb_h4, p.tb-plus) { font-size: 14px; }
}
@media screen and (max-width:610px) {
    .copy { font-size: 16px; line-height: 28px; }
    .copy .contacts { font-size: 15px; line-height: 26px; }
     #index2 .tb_gr>li>dl:has(>.scroll)>dt { font-size: 20px; }
    :is(#index2, #index3, #index4, #index5) table th { font-size: 12px; }
    :is(#index2, #index3) table td { font-size: 12px; }
}


/* PSD 1~5 지정 안내문 전용. 표·메뉴·다른 안내 영역에 영향을 주지 않는다. */
.psd-copy {
    margin: 0 0 24px;
    font-family: 'S-CoreDream', Arial, sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.05em;
    color: #2e2e2e;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.psd-copy p { margin: 0; font: inherit; letter-spacing: inherit; }
.psd-copy .psd-line { position: relative; padding-left: 16px; }
.psd-copy .psd-line::before { content: '-'; position: absolute; left: 0; }
.psd-copy .psd-paragraph-gap { margin-top: 16px; }
.psd-copy .psd-detail { margin-left: 34px; }
.psd-note { margin-top: 12px; }
.psd-copy .psd-contacts { margin: 10px 0 0 28px; }
.psd-copy .psd-contact { position: relative; }
.psd-copy .psd-contact::before { content: '·'; position: absolute; left: -12px; }
.psd-copy .psd-medium { font-weight: 500; }
.psd-copy .psd-size-22 { font-size: 22px; }
.psd-copy .psd-size-20 { font-size: 20px; }
.psd-copy .psd-blue { color: #1a63b5; }
.psd-copy .psd-coral { color: #f76e5a; }
.psd-copy .psd-rose { color: #e17272; }
.psd-copy a { color: inherit; }
@media screen and (max-width:780px) {
    .psd-copy { font-size: 18px; line-height: 30px; }
    .psd-copy .psd-size-22 { font-size: 17px; }
    .psd-copy .psd-size-20 { font-size: 16px; }
}
@media screen and (max-width:610px) {
    .psd-copy { font-size: 16px; line-height: 28px; }
    .psd-copy .psd-size-22 { font-size: 15px; }
    .psd-copy .psd-size-20 { font-size: 14px; }
    .psd-copy .psd-detail { margin-left: 24px; }
}

/* 종합상황실: PSD 제목과 안내문 오른쪽 삽화 */
#index1 .situation-panel {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
#index1 .situation-panel::after { display: none; }
.situation-title {
    display: flex;
    align-items: center;
    gap: 17px;
    margin: 0 0 36px;
    font-family: 'VITRO CORE', Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #3a3939;
    text-align: left;
}
.situation-title img { flex: 0 0 64px; width: 64px; height: auto; }
.situation-content {
    display: grid;
    grid-template-columns: minmax(0, 650px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    margin-top: 0;
}
.situation-content .psd-situation { min-width: 0; margin: 0; }
.situation-illustration {
    display: block;
    width: 459px;
    max-width: 100%;
    height: auto;
    justify-self: end;
    align-self: end;
}
@media screen and (max-width:1100px) {
    #index1 .situation-panel { padding: 0 20px; }
    .situation-content { grid-template-columns: 1fr; gap: 24px; }
    .situation-illustration { width: 360px; justify-self: center; }
}
@media screen and (max-width:780px) {
    .situation-title { font-size: 28px; gap: 12px; }
    .situation-title img { flex-basis: 48px; width: 48px; }
}
@media screen and (max-width:610px) {
    #index1 .situation-panel { padding: 0; }
    .situation-title { font-size: 22px; gap: 10px; }
    .situation-title img { flex-basis: 38px; width: 38px; }
    .situation-title { margin-bottom: 24px; }
    .situation-illustration { width: 300px; }
}



/* 제목과 콘텐츠 사이 간격은 .situation-title의 margin-bottom만 사용한다.
   HTML에서 제목 다음 요소에 situation-following을 표시해 적용 범위를 한정한다. */
.situation-title + .situation-following,
.situation-title + .situation-following > :first-child,
.situation-title + .situation-following > .scroll:first-child > table:first-child {
    margin-top: 0;
}

/* PSD 3번: 추진기간 주의 문구는 같은 줄 오른쪽에 표시. */
.psd-copy .psd-inline-note {
    display: inline-block;
    margin-left: 20px;
}
@media screen and (max-width:780px) {
    .psd-copy .psd-inline-note { display: block; margin-left: 0; }
}

/* PSD 4번: 표 아래 주의 문구와 배출일 안내 */
#index4 .trash-table-section table { margin-bottom: 0; }
#index4 .trash-table-section > dl { margin-bottom: 0; }
.trash-box {
    width: 100%;
    box-sizing: border-box;
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: 'S-CoreDream', Arial, sans-serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.05em;
    color: #2e2e2e;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.trash-box > .trash-note {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #f23232;
}
.trash-box .trash-date { margin-top: 32px; padding: 0; }
.trash-box .trash-date p { position: relative; margin: 0; padding-left: 16px; }
.trash-box .trash-date p::before { content: '-'; position: absolute; left: 0; }
.trash-box .trash-prohibited { color: #fc4141; }
.trash-box .trash-resume { color: #1a63b5; }
@media screen and (max-width:780px) {
    .trash-box { font-size: 18px; line-height: 30px; }
    .trash-box > .trash-note { font-size: 16px; }
    .trash-box .trash-date { margin-top: 24px; }
}
@media screen and (max-width:610px) {
    .trash-box { font-size: 16px; line-height: 28px; }
    .trash-box > .trash-note { font-size: 14px; }
}

/* PSD 5: market event details in the merged cell. */
#index5 .tb_purple .market-event-details {
  padding: 20px 32px;
  text-align: left;
  vertical-align: middle;
  font-family: 'S-CoreDream', Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  color: #272728;
  word-break: keep-all;
}
#index5 .market-event-copy { width: max-content; max-width: 100%; margin: 0 auto; }
#index5 .market-event-copy p { margin: 0; }
#index5 .market-event-item { position: relative; padding-left: 13px; }
#index5 .market-event-item::before { content: '-'; position: absolute; left: 0; }
#index5 .market-event-copy .market-event-note { margin-top: 2px; color: #df2842; }

/* Links in the additional traffic and civil document guides. */
.traffic-information .document-link,
.civil-document-information .document-link {
  color: #1a63b5;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Responsive layout for the current PSD-based pages; desktop remains unchanged. */
@media screen and (max-width:1200px) {
  #section_1 { position: relative; }
  .main { width: 100%; height: auto; box-sizing: border-box; padding: 0 24px 40px; }
  .bg { height: 100%; background-size: cover; }
  .logo { width: 210px; padding-top: 24px; margin: 0 auto; }
  .title { width: min(680px, 100%); padding: 24px 0 32px; }
  .title img, .logo img { width: 100%; height: auto; }
  .menu > ul { width: 100%; max-width: 1000px; padding: 0; margin: 0 auto; gap: 16px; flex-wrap: nowrap; justify-content: center; }
  .menu > ul li { flex: 1 1 0; min-width: 0; max-width: 160px; width: auto; height: 140px; margin: 0; border-radius: 22px; }
  .menu > ul li a { width: 100%; height: 100%; padding: 12px 8px; border-width: 3px; border-radius: 22px; gap: 8px; }
  .menu > ul li::after { display: none; }
  .menu > ul li:nth-child(n) a .icon { flex: 1 1 auto; min-height: 36px; background-size: auto 46px; }
  .menu > ul li a .text { flex: 0 0 2.7em; max-height: none; justify-content: center; padding: 0; font-size: 16px; line-height: 1.2; word-break: keep-all; }
  #section_2 { width: 100%; box-sizing: border-box; margin: 0 auto; padding: 32px 0 56px; overflow: visible; }
  .tb_gr, #index2 > #section_2 > div > .tb_gr { padding: 0 24px; }
  #index1 .ment_gr { padding: 0 24px; }
  #index1 .situation-panel { width: 100%; padding: 0; }
  .situation-title { font-size: 30px; line-height: 1.35; align-items: flex-start; overflow-wrap: anywhere; word-break: keep-all; }
  .situation-title img { margin-top: .15em; }
  .psd-copy, .trash-box { overflow-wrap: anywhere; }
  .scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .scroll > table { width: 100%; min-width: 760px; }
  .scroll > .ex_table { min-width: 1020px; }
  .traffic-information .scroll > table { min-width: 800px; }
  .civil-document-information .scroll > table { min-width: 0; table-layout: fixed; }
  #section_3 { height: auto; aspect-ratio: 48 / 7; margin-top: 0; background-size: 100% auto; }
}
@media screen and (max-width:780px) {
  .main { padding: 0 20px 28px; }
  .logo { width: 170px; padding-top: 20px; }
  .title { width: min(540px, 100%); padding: 20px 0 28px; }
  .menu > ul { gap: 10px; }
  .menu > ul li { height: 110px; border-radius: 18px; }
  .menu > ul li a { padding: 10px 5px; border-radius: 18px; gap: 5px; }
  .menu > ul li:nth-child(n) a .icon { background-size: auto 36px; min-height: 32px; }
  .menu > ul li a .text { font-size: 13px; }
  .tb_gr, #index2 > #section_2 > div > .tb_gr { padding: 0 20px; }
  #index1 .ment_gr { padding: 0 20px; }
  .situation-title { font-size: 26px; margin-bottom: 26px; gap: 10px; }
  .tb_gr > li { margin-bottom: 40px; }
  :is(#index2,#index3,#index4,#index5) table :is(th,td) { font-size: 14px; line-height: 1.5; padding: 12px 8px; }
  #index5 .tb_purple .market-event-details { font-size: 15px; line-height: 24px; padding: 16px; }
  .civil-document-information table td { word-break: keep-all; overflow-wrap: anywhere; }
  .civil-document-information table td br { display: none; }
  #section_2 dt { word-break: keep-all; overflow-wrap: anywhere; }
}
@media screen and (max-width:610px) {
  .main { padding: 0 16px 24px; }
  .logo { width: 140px; padding-top: 18px; }
  .title { width: 100%; max-width: 440px; padding: 18px 0 24px; }
  .menu > ul { max-width: 400px; flex-wrap: wrap; gap: 12px; }
  .menu > ul li { flex: 0 0 calc((100% - 24px) / 3); max-width: none; height: 105px; }
  .menu > ul li a .text { font-size: 13px; }
  #section_2 { padding: 24px 0 40px; }
  .tb_gr, #index2 > #section_2 > div > .tb_gr { padding: 0 16px; }
  #index1 .ment_gr { padding: 0 16px; }
  .situation-title { font-size: 22px; line-height: 1.4; margin-bottom: 24px; gap: 8px; }
  .situation-title img { width: 38px; flex-basis: 38px; }
  .situation-illustration { width: min(300px, 85%); }
  .tb_gr > li { margin-bottom: 36px; }
  #section_2 dt { font-size: 17px; line-height: 1.6; }
  #section_2 dd { font-size: 15px; line-height: 1.6; }
  .psd-copy .psd-contacts { margin-left: 16px; }
  .civil-document-information .psd-copy a { overflow-wrap: anywhere; }
  .top_btn, .top_btn a { width: 44px; height: 44px; font-size: 12px; }
  .top_btn { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media screen and (max-width:780px) {
  .scroll::before { content: '표를 좌우로 밀어 확인하세요.'; display: block; position: sticky; left: 0; width: fit-content; max-width: 100%; padding-bottom: 8px; color: #626262; font-size: 12px; line-height: 1.5; text-align: left; }
  .civil-document-information .scroll::before { display: none; }
}
@media screen and (max-width:610px) {
  #section_3 { aspect-ratio: auto; height: max(84px, 26vw); background-size: auto 100%; }
}

@media screen and (max-width:1200px) {
  .menu > ul li:nth-child(n) a:is(.on, :hover) .icon { background-size: auto 46px; }
}
@media screen and (max-width:780px) {
  .menu > ul li:nth-child(n) a:is(.on, :hover) .icon { background-size: auto 36px; }
}

/* Common body list levels: ring, dash, then dot. */
.psd-copy .psd-line, .dt_pp { position: relative; text-align: left; padding-left: 26px; }
.psd-copy .psd-line::before, .dt_pp::before {
  content: '';
  margin: 0;
  display: block;
  position: absolute;
  left: 0;
  top: .78em;
  transform: translateY(-50%);
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  border: 4px solid #6f50da;
  border-radius: 50%;
}
.psd-copy .psd-detail > .psd-medium {
  display: block;
  position: relative;
  padding-left: 16px;
}
.psd-copy .psd-detail > .psd-medium::before {
  content: '-';
  position: absolute;
  left: 0;
}
.psd-copy .psd-detail > .psd-medium.psd-size-20 {
  margin-left: 12px;
  padding-left: 12px;
}
.psd-copy .psd-detail > .psd-medium.psd-size-20::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  top: .8em;
  transform: translateY(-50%);
}
.psd-copy .psd-detail:has(> .psd-medium) > br { display: none; }
@media screen and (max-width:780px) {
  .psd-copy .psd-line, .dt_pp { position: relative; text-align: left; padding-left: 24px; }
  .psd-copy .psd-line::before, .dt_pp::before { width: 6px; height: 6px; }
}
@media screen and (max-width:610px) {
  .psd-copy .psd-line, .dt_pp { position: relative; text-align: left; padding-left: 22px; }
  .psd-copy .psd-line::before, .dt_pp::before { width: 4px; height: 4px; }
}

/* Match body list rings to each page active menu color. */
#index1 .psd-copy .psd-line::before, #index1 .dt_pp::before { border-color: #f76e5a; }
#index2 .psd-copy .psd-line::before, #index2 .dt_pp::before { border-color: #36528e; }
#index3 .psd-copy .psd-line::before, #index3 .dt_pp::before { border-color: #348778; }
#index4 .psd-copy .psd-line::before, #index4 .dt_pp::before { border-color: #f36f91; }
#index5 .psd-copy .psd-line::before, #index5 .dt_pp::before { border-color: #b76ad7; }

/* Fuel supply subheadings: dash marker. */
dd.dd-dash::after {
  content: '-';
  width: auto;
  height: auto;
  top: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  line-height: inherit;
}