@charset "utf-8";
/* 상단헤더 */
header .gnb { width: 100%; height: 40px; display: flex; justify-content: center; margin: 0 auto; line-height: 40px; box-sizing: border-box; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); }
header .gnb nav .pc_menuArea li a { height: 40px; font-size: 15px; color: #000000; font-weight: 500;  display: flex !important; justify-content: center; align-items: center; line-height: 1.5; }


.subContent .sub_top { width: 100%; padding: 40px 0; background: url('/img/sub_top_bg.jpg')0 0 no-repeat; background-size: cover; }
.subContent .sub_top h2 { color: #ffffff; text-align: center; font-size: 36px; font-weight: 600; }
.subContent .sub_top h2 span { display: block; font-size: 13px; font-weight: 500; padding-bottom: 8px; }

/* 목록페이지 */
.subNotice .noticeCon { display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: #f7f7f7; border: 1px solid #dddddd; padding: 30px 40px; box-sizing: border-box; }
.subNotice .noticeCon p { font-size: 15px; }
.subNotice .noticeCon span { color: #ff2323; font-weight: 500; }
.subNotice .noticeCon .noticeSearch .selectBox { display: flex; align-items: center; }
.subNotice .noticeCon .noticeSearch .selectBox .select { width: 150px; padding: 5px 10px; margin-right: 5px; }
.subNotice .noticeCon .noticeSearch input[type=search] { width: 300px; padding: 14px 0 14px 10px; }
.subNotice .noticeCon .noticeSearch button { width: 30px; height: 30px; padding: 5px; background-color: #065bb6; box-sizing: border-box; }
.subNotice .tableArea table { width: 100%; font-size: 15px; text-align: center; margin-top: 40px; margin-bottom: 20px; line-height: 50px; table-layout:fixed; /* 내용상관없이 cell width fixed */ border-top: 2px solid #000000; }
.subNotice .tableArea table tr { width: 100%; height: 50px; border-bottom: 1px solid #d9d9d9; }
.subNotice .tableArea table thead tr { font-weight: 600; background-color: #f7f7f7; }
.subNotice .tableArea table tr td a { display: block; width: 100%; text-align: left; color: #000000; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.subNotice .tableArea table tr td { width: 100%; color: #000000; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.notipagebox { width: 100%; text-align: center; }
.notipagebox .notipage li { display: inline-block; width: 30px; height: 30px; line-height: 30px; vertical-align: middle; }
.notipagebox .notipage li a { display: block; font-weight: 400; color: #777777; }
.notipagebox .notipage li.active a { font-weight: 600; color: #000000; }

.subNotice .tableArea.viewp table tr td, .subNotice .tableArea.questionTb table tr td, .subNotice .tableArea.replyTb table tr td { text-overflow:unset; white-space: unset; }


/* 등록테이블 하단버튼_230809 */
.tbbtnArea { display: flex; justify-content: end; }
.tbbtnArea button { margin: unset; }

/* 등록페이지_230809 */
.registCon .regWrite { width: 100%; border-top: 1px solid #000000; border-bottom: 1px solid #d9d9d9; font-size: 13px; text-align: center; table-layout: fixed; }
.registCon .regWrite tr { width: 100%; height: 50px; font-weight: 500; table-layout: fixed; line-height: 50px; border: 1px solid #d9d9d9; border-width: 1px 0; }
.registCon .regWrite thead tr { background-color: #f7f7f7; }
.registCon .regWrite tr th { height: 50px; color: #000000; font-weight: 600; }
.registCon .regWrite tr td { color: #111111; font-weight: 400; }
.registCon .regWrite tr td.sort { font-weight: 600; vertical-align: middle; }
.registCon .regWrite tr td.sortin { padding: 0 10px; }
.registCon .regWrite tr td.sortin input { padding: 16px; }
.registCon .regWrite tr td.sortin .idcheckArea { display: flex; padding: 8px 0; }
.registCon .regbtn { display: flex; justify-content: flex-end; }
.registCon .regbtn button { margin: 0 0 0 10px;  }

/* 하단푸터 */
footer { background-color: #eeeeee; padding: 20px 0; }
footer .footerArea { display: flex; align-items: center; width: 1800px; margin: 0 auto; }
footer .footerArea .foot_logo img { display: inline-block; width: 38px; vertical-align: middle; }
footer .footerArea .foot_logo p { display: inline-block; font-weight: 500; margin-left: 10px; vertical-align: middle !important; }
footer .footerArea .foot_text span { display: block; margin-left: 90px; }

/* 등록 뷰페이지_230825 */
.subNotice .notiConfirm thead tr td:first-child { text-align: left; padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subNotice .notiConfirm thead tr { background-color: #555555 !important; color: #ffffff; }
.subNotice .notiConfirm tbody { text-align: left; }
.subNotice .notiConfirm tbody tr td { padding: 20px; line-height: 2; height: 280px; }
.subNotice .notiConfirm thead .noti_info { background-color: #ffffff !important; border-bottom: 1px solid #a3a3a3; color: #555555; }
.subNotice .notiConfirm thead .noti_info td ul li { display: inline-block; position: relative; margin-right: 20px; }
.subNotice .notiConfirm thead .noti_info td ul li::after { content:''; position: absolute; top: 18px; right: -13px; width: 1px; height: 13px; background-color: rgba(0,0,0,.6); }
.subNotice .notiConfirm thead .noti_info td ul li:last-child::after { display: none; }

/* 접속통계_230828 */
.subStats { min-height: calc(100vh - 439px); }
.subStats .statsCon { display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: #f7f7f7; border: 1px solid #dddddd; padding: 30px 40px; box-sizing: border-box; }
.subStats .statsCon p { font-size: 15px; }
.subStats .statsCon span { font-weight: 500; }
.subStats .statsCon .selectBox { display: flex; align-items: center; margin-right: 10px; }
.subStats .statsCon .selectBox .select { padding: 5px 10px; margin-right: 5px; }
.subStats .statsCon input[type=search] { width: 300px; padding: 14px 0 14px 10px; }
.subStats .statsCon button { width: 30px; height: 30px; padding: 5px; background-color: #065bb6; box-sizing: border-box; margin-left: auto; }
#tabStat { text-align: center; }
#tabStat .statTableth { background-color: #747474; color: #ffffff; font-size: 13px; font-weight: 700; padding: 10px 0; }
.remarks { width: 100%; font-size: 13px; padding: 20px 0; }
.remarks p { display: inline-block; height: 20px; }
.remarks p span { display: inline-block; width: 50px; height: 20px; vertical-align: middle; margin-right: 10px; }
.remarks p:first-child { margin-right: 20px; }
.remarks p:first-child span { background-color: #f2b230; }
.remarks p:nth-child(2) span { background-color: #01314e; }
#tabStat .tap_thead tr { border: 1px solid #747474; }
#tabStat #tabStatBody tr { border-bottom: 1px solid #d9d9d9; }
#tabStat #tabStatBody tr td { height: 40px; font-size: 13px; border: 1px solid #d9d9d9; vertical-align: middle; }
#tabStat .statTabletdW { font-weight: 700; border-width: 0 !important; background-color: #f2b230; }
#tabStat .statTabletdM { font-weight: 700; border-width: 0 !important; color: #ffffff; background-color: #01314e; }

/* FAQ_230912 */
.faqList li { border-bottom: 1px solid #111111; }
.faqList h3 { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 18px; font-weight: 500; padding: 15px 0 15px 15px; box-sizing: border-box; }
.faqList h3 p { width: 88%; }
.faqList h3 span { font-size: 50px; color: #757575; width: 6%; }
.faqList h3 button { width: 6%; background-color: #ffffff; }
.faqList h3 button img { width: 30px; }
.faqList .answerFaq { display: none; color: rgb(48, 50, 55); background-color: #eaf1ff; }
.faqList .answerFaq.active { display: block; }
.faqList section { width: 100%; font-size: 16px; padding: 15px 55px 15px 22px; box-sizing: border-box; }
.faqList section span { width: 55px; font-size: 50px; color: #0650a3; font-weight: 500; padding-right: 8px; }
.faqList section p { font-weight: 400; }
button.less img { transform: rotateX(180deg); }

/* reply_230919 */
.questionTb .notiConfirm { border-top: 2px solid #001329; }
.questionTb .notiConfirm tr { border-bottom: 1px solid #9a9a9a !important; }
.questionTb .notiConfirm thead tr { background-color: #0650a3 !important; }
.replyArea .notiConfirm tbody tr td { height: 100px; }
.replyArea .regbtn { display: flex; justify-content: flex-end; padding-bottom: 23px; }
.replyArea .regbtn button { margin: 0 0 0 10px; }
.replyArea .notiConfirm thead .noti_info { background-color: #eeeeee !important; }
.replyArea textarea { padding: 10px; width: calc(100% - 23px) !important; }

/* 비밀글_230920 */
.board_pw { display: flex; justify-content: center; align-items: center; background: url('/img/password_bg.jpg')0 0 no-repeat; width: 100%; height: 100%; min-height: calc(100vh - 194px); }
.board_pw .wrap { display: flex; justify-content: center; }
.board_pw .pwBox { background-color: #ffffff; }
.board_pw .pwBox p { text-align: center; line-height: 1.2; }
.board_pw .pwBox .pw_title { color: #ffffff; font-size: 20px; font-weight: 800; background-color: #494949; padding: 15px 0; }
.board_pw .pwBox .pwArea { padding: 40px 285px; border: 1px solid #cdcdcd; }
.board_pw .pwBox .pwinputArea { position: relative; text-align: center; }
.board_pw .pwBox .pwinputArea::before { content: ''; width: 36px; height: 36px; background: url('/img/lock_icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: -46px; }
.board_pw .pwBox .pwinputArea input[type=password] { font-size: 16px; width: 246px; height: 35px; margin: 20px 0; }
.board_pw .pwBox .pwinputArea button { display: block; margin: 0 auto; }

/* 사이트맵_231005 */
.sitemapBox { display: flex; }
.sitemapBox p { display: inline-block; vertical-align: top; width: 30%; font-weight: 800; font-size: 26px; color: #000e1d; padding-top: 25px; border-top: 3px solid #0650a3; }
.sitemapBox ul { display: inline-block; width: 70%; border-top: 1px solid #bbbbbb; background-color: #ececec; background-image: url('/img/sitemap_bg.png'); background-repeat: no-repeat; background-position: 0 0; background-size: cover; padding: 30px 20px; box-sizing: border-box; }
.sitemapBox ul li { display: inline-block; width: 49%; padding: 0 10px; box-sizing: border-box; line-height: 2; }
.sitemapBox ul li a { color: #003165; font-size: 17px; font-weight: 800; }

/* 통계추가_231012 */
.tab-panel { padding: 0; border-top: 1px solid #cccccc; overflow-x: auto; margin-bottom: 10px; border-right: 1px solid #dddddd; }
.infotb { display: block; min-width: 100%; margin: 0 auto; font-size: 14px; clear: both; table-layout: fixed; border-collapse: collapse; }
.infotb tr { border-left: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; width: 100%; display: inline-flex; }
.infotb thead tr { border-left: 1px solid #d9d9d9; }
.infotb th { border-left: 1px solid #d9d9d9; display: inline-block; height: 50px; color: #ffffff; font-weight: normal; text-align: center; background: #333333; }
.infotb td { border-left: 1px solid #d9d9d9; display: inline-block; color: #111111; font-weight: 300; text-align: center; background-color: #ffffff; }
.infotb .infotd_location { min-width: 150px; padding-left: 10px; }
.infotb td.infotd_location { min-width: 150px; text-align: left; background-color: #eeeeee; }
.infotb .infotd_location h5 { margin-top: 8px; line-height: 18px; font-size:14px; margin-bottom: 5px; font-weight: 800; }
.infotb .infotd_location span { line-height: 15px; font-size: 13px; font-weight: 500; }
.infotb .infotd_day { width: 6%; min-width: 60px; }
.infotb .infotd_month { width: 6%; min-width: 40px; }
.infotb .infotd_year { width: 9%; min-width: 96.93px; }
.infosearch_result h4 { display: inline-block; float: right; line-height: 40px; font-size: 14px; font-weight: 400; }
.infotb th.infotd_average { min-width: 60px; }
.infotb td.infotd_average { min-width: 60px; background-color:#f7f7f7; }
.infotb th { line-height: 50px; }
.infotb td { height: 75px; }
.infotb td.infotd_average, .infotb td.infotd_day, .infotb td.infotd_year { line-height: 75px; }



/* 사이트안내_231207 */
.siteinfo_sec01 { display: flex; }
.siteinfo_sec01 .txtArea { color: #333333; padding: 100px 35px 0 0; }
.siteinfo_sec01 .txtArea h3 { padding-bottom: 70px; font-size: 36px; font-weight: 800; line-height: 43px; }
.siteinfo_sec01 .txtArea h3 p { font-weight: 400; }
.siteinfo_sec01 .txtArea ul { padding-left: 20px; font-size: 16px; list-style: disc; }
.siteinfo_sec01 .txtArea ul li { margin-bottom: 13px; line-height: 19px; }
.siteinfo_sec02 { width: 100%; margin-top: 15px; padding-bottom: 80px; background: url('/img/siteinfo_bg.jpg')0 0 no-repeat; background-size: contain; }
.siteinfo_sec02 .wrap { padding-top: 160px; display: flex; }
.siteinfo_sec02 ul .box { width: 50%; background-color: #ffffff; border: 1px solid #d9d9d9; }
.siteinfo_sec02 ul .box img { width: 100%; border-bottom: 1px solid #d9d9d9; }
.siteinfo_sec02 ul .box .txtArea { padding: 50px 50px 50px 50px; min-height: 250px; box-sizing: border-box; }
.siteinfo_sec02 ul .box h4 { font-size: 30px; font-weight: 800; color: #0650a3; padding-bottom: 40px; }
.siteinfo_sec02 ul .box .txtArea ul li { list-style: disc; margin-left: 20px; font-size: 16px; color: #333333; line-height: 19px; margin-bottom: 13px; }
.siteinfo_sec02 ul .box:first-child { margin-right: 20px; }
.siteinfo_sec02 ul .box:nth-child(2) { margin-left: 20px; }

/* 시스템소개_231211 */
.sys_sec01 { text-align: center; }
.sys_sec01 p { line-height: 21px; }
.sys_sec01 h3, .sys_sec03 h3, .sys_sec05 h3 { font-size: 36px; font-weight: 800; color: #333333; padding-bottom: 30px; }
.sys_sec02 { margin-top: 60px; }
.sys_sec02 ul { display: flex; width: 100%; flex-wrap: wrap; }
.sys_sec02 ul li { width: 20%; text-align: center; min-height: 220px; box-sizing: border-box; padding: 55px 10px 0 10px; border: 1px solid #d1e0f0; }
.sys_sec02 ul li dl dt { width: 36px; height: 36px; margin: 0 auto 34px auto; background-color: #0650a3; color: #ffffff; font-size: 16px; font-weight: 800; line-height: 36px; border-radius: 30px; }
.sys_sec02 ul li:nth-child(even) { background-color: #d1e0f0; }
.sys_sec02 ul li:nth-child(odd) { background-color: #ffffff; }
.sys_sec02 ul li dl dd { line-height: 20px; font-size: 16px; }
.sys_sec03 { background: url('/img/system_bg.jpg') 0 0 no-repeat; background-size: cover; margin-top: -150px; }
.sys_sec03 .wrap { padding: 220px 60px 60px 60px; }
.sys_sec03 h3 { color: #ffffff; }
.sys_sec03 ul { display: inline-flex; width: 50%; }
.sys_sec03 ul li { width: 50%; }
.sys_sec03 ul li:nth-child(2) { padding-top: 67px; }
.sys_sec03 ul li img { width: 100%; }
.sys_sec03 ul li span { display: block; text-align: center; font-size: 16px; color: #ffffff; padding-top: 20px; }
.sys_sec03 p { display: inline-block; margin-left: 65px; max-width: 44%; font-size: 16px; color: #ffffff; line-height: 21px; vertical-align: super; }
.sys_sec04 .wrap { display: flex; padding: 80px 0; }
.sys_sec04 table { width: 33.33%; text-align: center; border: 1px solid #d9d9d9; }
.sys_sec04 .table_middle { width: 33.33%; margin: 0 20px; }
.sys_sec04 .table_middle table { width: 100% !important; }
.sys_sec04 table th { width: 100%; height: 50px; font-size: 18px; font-weight: 800; color: #ffffff; background-color: #0650a3; vertical-align: middle; }
.sys_sec04 table .th2 td { width: 100%; height: 50px; font-size: 16px; color: #0062ad; background-color: #d1e0f0; vertical-align: middle; }
.sys_sec04 table .con td { vertical-align: middle; }
.sys_sec04 .table_middle table .con td { padding: 30px 0 20px 0; }
.sys_sec04 .table_middle table ul li:first-child { padding-bottom: 0; }
.sys_sec04 table ul li span { display: block; margin-top: 10px; font-size: 15px; }
.sys_sec04 table:nth-child(2) .con { min-height: 160px; box-sizing: border-box; }
.sys_sec04 table .middle li { display: inline-block; }
.sys_sec04 table .middle.type2 { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.sys_sec04 table:first-child, .sys_sec04 .table_middle table:nth-child(2), .sys_sec04 table:nth-child(3) { position: relative; }

.sys_sec04 table .middle li:nth-child(3) { width: 100%; }
.sys_sec04 .table_middle.type2 table ul li:first-child { width: 50%; }
.sys_sec04 .table_middle.type2 table ul li:nth-child(2) { width: 50%; }
.sys_sec04 table .middle.type2 li:nth-child(3) { font-size: 15px; color: #0650a3; margin-top: 15px; }
.sys_sec04 table .middle.type2 span { margin: 0 auto; text-align: center; max-width: 90px; word-break: break-all; }
/* 화살표 */
.sys_sec04 table:first-child::after { content: ''; position: absolute; top: 51%; right: -33px; width: 41px; height: 41px; background: url('/img/system_arrow.png')0 0 no-repeat; z-index: 1; }
.sys_sec04 .table_middle table:first-child::after { content: none; }
.sys_sec04 .table_middle table:nth-child(2)::after { content: ''; position: absolute; top: -30px; left: 46%; width: 41px; height: 41px; background: url('/img/system_arrow.png')0 0 no-repeat; transform: rotate(90deg); z-index: 1; }
.sys_sec04 table:nth-child(3)::after { content: ''; position: absolute; top: 51%; left: -33px; width: 41px; height: 41px; background: url('/img/system_arrow.png')0 0 no-repeat; transform: rotate(180deg); z-index: 1; }

.sys_sec05 { padding-bottom: 60px; }
.sys_sec05 h3 { padding-bottom: 20px; }
.sys_sec05 table { width: 100%; margin-top: 30px; }
.sys_sec05 table tr { height: 50px; }
.sys_sec05 table thead tr { background-color: #0650a3; color: #ffffff; }
.sys_sec05 table thead tr th { font-size: 18px; font-weight: 800; color: #ffffff; border-right: 1px solid #adcee7; vertical-align: middle; }
.sys_sec05 table thead tr th:last-child { border-right: 0; }
.sys_sec05 table tbody { font-size: 16px; color: #444444; text-align: center; }
.sys_sec05 table tbody tr td { border-right: 1px solid #adcee7; vertical-align: middle; }
.sys_sec05 table tbody tr:nth-child(odd) { background-color: #d1e0f0; }
.sys_sec05 table .green { color: #00ff00; }
.sys_sec05 table .yellow { color: #ffff00; }
.sys_sec05 table .red { color: #ff0000; }


/* trafficStatistics page */
.card{
    width: 100%;
    border: 1px solid  #e5e5e5;
    padding: 10px;
    box-sizing: border-box;
}

.mapbox{
    width: 100%;
    border: 1px solid  #e5e5e5;
    box-sizing: border-box;
    min-height: 500px;
    margin-bottom: 20px;
}

.bento-chartbox {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px;
    position: relative;
}

.bento-chartbox .chart-list {
    flex: 1 1 70%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bento-chartbox h5,
.bento-chartbox hr{
    width: 100%;
}

.bento-chartbox h5{
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    line-height: 1.0;
    height: fit-content;
}

.bento-chartbox hr{
    height: 1px;
    color: #e5e5e5;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e5e5e5;
}

.chart-tit{
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 18px;
}

.chart-tit + p{
    font-size: 14px;
}

.chart-list li {
    flex: 1 1 calc(20% - 8px);
    aspect-ratio: 1 / 1;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #f7f7f7;
    box-sizing: border-box;
}

.total-chart {
    flex: 0 0 30%;
    box-sizing: border-box;
}

.total-chart .chart-in-box{
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #f7f7f7;
}

.total-chart h5{
    margin-bottom: 10px;
}

.chartArea.card{
    margin-top: 20px;
    min-height: 300px;
}

.chart-list2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 4px;
}

.chart-list2 li{
    aspect-ratio: 1 / 1;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background-color: #f7f7f7;
    box-sizing: border-box;
}

.btn-download{
    width: 140px;
    height: 40px;
    background-color: #edf5ff;
    border: 1px solid #065bb6;
    color: #065bb6;
    position: absolute;
    top: 0;
    right: 0;
    transition: .25s ease;
    cursor: pointer;
}

.btn-download:hover{
    background-color: #b8d8ff;
}

.chart-head{
    position: relative;
    padding-right: 180px;
    border-left: 4px solid #065bb6;
    padding-left: 6px;
    margin-bottom: 10px;
}

.nodata {
    position: relative;
    overflow: hidden;
}

.nodata::after{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: 'No data available.';
}

.nodata::before{
    background: #f7f7f7;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    content: '';
}

.nodata .bento-chartbox,
.nodata .chart-head button,
.nodata .chart-list2,
.nodata div:not(.chart-head){
    display: none;
}

/* 반응형 작업 */
@media screen and (max-width:1919px)
{
    footer .footerArea { width: 100%; padding: 0 20px; box-sizing: border-box; }

    /* 등록페이지_230809 */
    .registCon .regWrite #admin_id { width: 91% !important; }
    .btnStyle.idcheck { padding: 0; width: 120px; }

    /* 통계추가_231012 */
    .infotb .infotd_day { min-width: 74px; }
    .infotb .infotd_year { min-width: 135px; }

    /* 시스템소개_231208 */
    .sys_sec04 { padding: 60px 20px; width: 100%; box-sizing: border-box; }
}

/* 접속통계 추가_231010 */
@media screen and (max-width:1300px)
{
    .subStats .statsCon { flex-wrap: wrap; justify-content: start; }
    .subStats .statsCon button { width: 100%; margin-top: 15px; margin-bottom: 10px; }
    .subStats .statsCon .selectBox { margin-right: 0 !important; }
    .statsCon .selectBox span { margin-top: 10px; }


    /* 사이트안내_231207 */
    .siteinfo_sec01 { flex-direction: column; }
    .siteinfo_sec01 .txtArea { padding: 0; }
    .siteinfo_sec01 .txtArea h3 { padding-bottom: 30px; font-size: 30px; }
    .siteinfo_sec01 .imgArea { margin-top: 20px; }
    .siteinfo_sec01 .imgArea img { width: 100%; }

    /* 시스템소개_231208 */
    .sys_sec03 ul { width: 100%; }
    .sys_sec03 ul li:nth-child(2) { padding: 0; }
    .sys_sec03 p { width: 100%; text-align: center; padding-top: 30px; margin: 0; max-width: unset; }
    .sys_sec04 .wrap { padding: 0; }
    .sys_sec04 .table_middle .middle li { width: 49%; margin: 0 !important; }
    .sys_sec04 .table_middle .middle img { width: 85%; }

    /* 통계 */
    .bento-chartbox{
        flex-direction: column;
    }

    .bento-chartbox .chart-list{
        flex: none;
    }

    .chart-list li{
        flex: unset;
        width: calc(100% / 5 - 40px / 5);
    }
}

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

    .footerArea { display: block !important; width: 100% !important; box-sizing: border-box; }
    .footerArea .foot_text { margin-top: 15px;  }
    .footerArea .foot_text span { margin-left: 0 !important; }

    /* 목록페이지 */
    .subNotice .noticeCon p { margin-bottom: 5px; }
    .subNotice .tableArea { overflow-x: scroll; margin-bottom: 40px; }
    .subNotice .tableArea table { width: 140%; margin-bottom: 0; }

    /* 언어선택영역 */
    .langArea {width: 100%;}
    .langArea .selectBox {width: 100% !important;}

    /* 등록 뷰페이지_230825 */
    .subNotice .viewp { overflow: auto; }
    .subNotice .viewp .tbbtnArea { padding-bottom: 5px;  }
    /*.subNotice .notiConfirm { width: 100% !important; }*/
    .subNotice .notiConfirm thead tr td:nth-child(3) { opacity: 0; }
    .subNotice .viewp .tbbtnArea { margin-top: 30px; }

    /* 접속통계_230828 */
    #tabStat { width: 100%; overflow-x: auto; }
    #statTable { width: 300% !important; }
    .subStats .statsCon { display: block; padding: 20px; }
    .subStats .statsCon .selectBox { align-items: baseline; flex-direction: column; }
    .subStats .statsCon .selectBox:first-child { display: block; }
    .subStats .statsCon .selectBox span select { margin-left: 13px; }
    .subStats .statsCon button { width: 100%; margin-top: 10px; }

    /* FAQ_230912 */
    .faqList h3 { padding: 15px 0; align-items: normal; }
    .faqList h3 span { width: 10%; font-size: 24px; }
    .faqList h3 p { font-size: 16px; width: 80%; padding-top: 6px; }
    .faqList h3 button { width: 9%; }
    .faqList section { padding: 15px; }
    .faqList section span { width: 9%; font-size: 24px; }
    .faqList section p { padding-top: 6px; }

    /* 비밀글_230920 */
    .board_pw .wrap { display: block; }
    .board_pw .pwBox .pwArea { width: 100%; box-sizing: border-box; padding: 40px 0; }
    .board_pw .pwBox .pwinputArea::before { left: 130px; }

    /* 사이트맵_231005 */
    .sitemapBox { flex-direction: column; }
    .sitemapBox p { width: 100%; }
    .sitemapBox ul { width: 100%; margin-top: 25px; }


    /* 사이트안내_231207 */
    .siteinfo_sec02 { padding-bottom: 40px; }
    .siteinfo_sec02 .wrap { flex-direction: column; }
    .siteinfo_sec02 ul .box { width: 100%; }
    .siteinfo_sec02 ul .box:first-child { margin-right: 0; }
    .siteinfo_sec02 ul .box:nth-child(2) { margin: 15px 0 0 0; }
    .siteinfo_sec02 ul .box .txtArea { padding: 30px; min-height: unset; }

    /* 시스템소개_231208 */
    .sys_sec01 h3, .sys_sec03 h3, .sys_sec05 h3 { font-size: 30px; }
    .sys_sec02 ul li { width: 50%; }
    .sys_sec02 ul li:nth-child(even) { background-color: #ffffff; }
    .sys_sec02 ul li:nth-child(2), .sys_sec02 ul li:nth-child(3), .sys_sec02 ul li:nth-child(6), .sys_sec02 ul li:nth-child(7), .sys_sec02 ul li:nth-child(10) { background-color: #d1e0f0; }
    .sys_sec04 { padding: 0; margin: 60px 0; overflow-x: scroll; }
    .sys_sec04 .wrap { padding: 0 20px; width: 900px; overflow: hidden; box-sizing: border-box; }
    .sys_sec04 .table_middle .middle li { width: 48%; }
    .sys_sec05 { width: 100%; padding: 0; margin-bottom: 60px; }
    .sys_sec05 .tableArea { width: 100%; overflow-x: scroll; } /* 모바일 스크롤을 위해서 만든 클래스 */
    .sys_sec05 table { width: 900px; }


    /* 통계 */
    .bento-chartbox{
        flex-direction: column;
    }
    .chart-list2{
        display: flex;
        flex-wrap: wrap;
    }
    .chart-list2 li{
        width: calc(100% / 2 - 5px);
    }
    .chart-list li{
        width: calc(100% / 2 - 5px);
        flex: none;
    }
    .bento-chartbox .chart-list{
        flex: none;
    }
}

@media screen and (max-width:620px)
{ 
    /* 목록페이지 */
    .subNotice .noticeCon { flex-direction: column; align-items: baseline; padding: 20px; }
    .subNotice .noticeCon .noticeSearch input[type=search] { width: 220px; }
    .subNotice .tableArea table { width: 180%; margin-bottom: 0; }

    /* 비밀글_230920 */
    .board_pw .pwBox .pwinputArea::before { display: none; }

    /* 시스템소개_231208 */
    .sys_sec01 p br { display: none; }
    .sys_sec03 p br { display: none; }

    /* 사이트맵추가_231227*/
    .sitemapBox ul li { display: block; width: 100%; }

    .subNotice .tableArea {width: 100%;}
}

@media screen and (max-width:470px)
{
    /* 목록페이지 */
    .subNotice .noticeCon .noticeSearch .selectBox .select { width: 110px; }
    .subNotice .noticeCon .noticeSearch input[type=search] { width: 150px; }
    .subNotice .tableArea table { width: 250%; }

    /* 등록 뷰페이지_230825 */
    .subNotice .viewp { overflow: auto; }

    /* h1사이즈 수정_230920 */
    header h1 p { font-size: 13px; }

    .subNotice .tableArea .tbbtnArea { width: 250% !important; margin: 20px 0; } /* 231227_추가 */

    .subNotice .tableArea.viewp table { width: 180% }/* 231227_수정 */
    .subNotice .tableArea.viewp .tbbtnArea { width: 180% !important; } /* 231227_수정 */

    /* 231227_추가 */
    .subNotice .tableArea.questionTb table, .subNotice .tableArea.replyTb table { width: 180%; }
    .subNotice .tableArea.questionTb .regbtn { width: 180%; }

    /* 231227_추가 */
    footer .footerArea .foot_logo img { width: 32px; }
    footer .footerArea .foot_logo p { font-size: 15px; }
    .foot_text { font-size: 14px; }
 }

.marker-label {
    position: absolute;
    transform: translate(-50%, 0);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 11px;
    color: #000;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1; /* z-index 낮게 설정 */
}


#loading { position: fixed; z-index: 99999; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.3); }
#loading .loading_area { position: absolute; top: 50%; left: 50%;  text-align: center; background-color: #ffffff; }
#loading .loading_area p { position: absolute; color: #2a5bb9; font-size: 26px; font-weight: 600; }
#loading .loading_area p span { display: block; color: #606060; font-size: 16px; font-weight: 400; }
/* 스타일1 */
#loading .loading_test01 { height: 121px; margin-top: -50px; margin-left: -212px; }
#loading .loading_test01 p { top: 20%; left: 33%; }
/* 스타일2 */
#loading .loading_test02 { border: 2px solid #d6d6d6; margin-top: -86px; margin-left: -105px; }
#loading .loading_test02 p { top: 70%; left: 20%; }
/* 스타일3 */
#loading .loading_test03 { border: 2px solid #d6d6d6; margin-top: -86px; margin-left: -125px; }
#loading .loading_test03 p { top: 70%; left: 24%; }