@charset "utf-8";

/*---------- font ----------*/
/* Noto Sans KR */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(../../../fonts/NotoSansKR-Thin.woff) format('woff');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(../../../fonts/NotoSansKR-Light.woff) format('woff');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(../../../fonts/NotoSansKR-Regular.woff) format('woff');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(../../../fonts/NotoSansKR-Medium.woff) format('woff');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(../../../fonts/NotoSansKR-Bold.woff) format('woff');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(../../../fonts/NotoSansKR-Black.woff) format('woff');
}
/* nanum square round */
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 300;
  src: url(../../../fonts/NanumSquareRoundL.woff) format("woff");
}
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 400;
  src: url(../../../fonts/NanumSquareRoundR.woff) format("woff");
}
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 700;
  src: url(../../../fonts/NanumSquareRoundB.woff) format("woff");
}
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 900;
  src: url(../../../fonts/NanumSquareRoundEB.woff) format("woff");
}
/* reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
table caption {overflow: hidden; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 0;}
a {color: #10192D; text-decoration: none;}
label, img {vertical-align: middle;}
div, label {box-sizing: border-box;}
html {-webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale;}
input {-webkit-border-radius: 0; -webkit-appearance: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

.w100p {width: 100% !important;}
.w90p {width: 90% !important;}
.w80p {width: 80% !important;}
.w70p {width: 70% !important;}
.w60p {width: 60% !important;}
.w50p {width: 50% !important;}
.w40p {width: 40% !important;}
.w45p {width: 45% !important;}
.w48p {width: 48% !important;}
.w49p {width: 49% !important;}
.w30p {width: 30% !important;}
.w20p {width: 20% !important;}
.w10p {width: 10% !important;}

.w20 {width: 20px !important;}
.w24 {width: 24px !important;}
.w32 {width: 32px !important;}
.w40 {width: 40px !important;}
.w48 {width: 48px !important;}
.w56 {width: 56px !important;}
.w88 {width: 88px !important;}
.w100 {width: 100px !important;}
.w160 {width: 160px !important;}

.h50 {height: 50px !important;}
.h100 {height: 100px !important;}
.h150 {height: 150px !important;}
.h170 {height: 170px !important;}
.h200 {height: 200px !important;}
.h250 {height: 250px !important;}
.h300 {height: 300px !important;}
.h350 {height: 350px !important;}
.h400 {height: 400px !important;}
.h450 {height: 450px !important;}
.h500 {height: 500px !important;}
.h520 {height: 520px !important;}
.h1025 {height: 1025px !important;}
.h100p {height: 100% !important;}

.mt-8 {margin-top: -8px !important;}
.mt-4 {margin-top: -4px !important;}
.mt0 {margin-top: 0px !important;}
.mt4 {margin-top: 4px !important;}
.mt8 {margin-top: 8px !important;}
.mt12 {margin-top: 12px !important;}
.mt16 {margin-top: 16px !important;}
.mt24 {margin-top: 24px !important;}
.mt32 {margin-top: 32px !important;}
.mt40 {margin-top: 40px !important;}
.mt48 {margin-top: 48px !important;}
.mt56 {margin-top: 56px !important;}

.mb0 {margin-bottom: 0px !important;}
.mb4 {margin-bottom: 4px !important;}
.mb8 {margin-bottom: 8px !important;}
.mb12 {margin-bottom: 12px !important;}
.mb16 {margin-bottom: 16px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb24 {margin-bottom: 24px !important;}
.mb32 {margin-bottom: 32px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb48 {margin-bottom: 48px !important;}
.mb56 {margin-bottom: 56px !important;}
.mb68 {margin-bottom: 68px !important;}

.ml0 {margin-left: 0px !important;}
.ml4 {margin-left: 4px !important;}
.ml6 {margin-left: 6px !important;}
.ml8 {margin-left: 8px !important;}
.ml16 {margin-left: 16px !important;}
.ml24 {margin-left: 25px !important;}
.ml32 {margin-left: 32px !important;}
.ml40 {margin-left: 40px !important;}
.ml48 {margin-left: 48px !important;}
.ml56 {margin-left: 56px !important;}

.mr0 {margin-right: 0 !important;}
.mr4 {margin-right: 4px !important;}
.mr6 {margin-right: 6px !important;}
.mr8 {margin-right: 8px !important;}
.mr16 {margin-right: 16px !important;}
.mr24 {margin-right: 24px !important;}
.mr32 {margin-right: 32px !important;}
.mr40 {margin-right: 40px !important;}
.mr48 {margin-right: 48px !important;}
.mr56 {margin-right: 56px !important;}

.p0 {padding: 0 !important;}
.p8 {padding: 8px !important;}
.p12 {padding: 12px !important;}
.p16 {padding: 16px !important;}
.p24 {padding: 24px !important;}
.p32 {padding: 32px !important;}
.p40 {padding: 40px !important;}
.p48 {padding: 48px !important;}
.p56 {padding: 56px !important;}

.pt0 {padding-top: 0 !important;}
.pt8 {padding-top: 8px !important;}
.pt16 {padding-top: 16px !important;}
.pt24 {padding-top: 24px !important;}
.pt30 {padding-top: 30px !important;}
.pt32 {padding-top: 32px !important;}
.pt40 {padding-top: 40px !important;}
.pt48 {padding-top: 48px !important;}
.pt56 {padding-top: 56px !important;}
 
.pb0 {padding-bottom: 0 !important;}
.pb8 {padding-bottom: 8px !important;}
.pb16 {padding-bottom: 16px !important;}
.pb24 {padding-bottom: 24px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb32 {padding-bottom: 32px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb48 {padding-bottom: 48px !important;}
.pb56 {padding-bottom: 56px !important;}

.pl0 {padding-left: 0 !important;}
.pl8 {padding-left: 8px !important;}
.pl16 {padding-left: 16px !important;}
.pl24 {padding-left: 24px !important;}
.pl32 {padding-left: 32px !important;}
.pl40 {padding-left: 40px !important;}
.pl48 {padding-left: 48px !important;}
.pl56 {padding-left: 56px !important;}

.pr0 {padding-right: 0 !important;}
.pr8 {padding-right: 8px !important;}
.pr16 {padding-right: 16px !important;}
.pr24 {padding-right: 24px !important;}
.pr32 {padding-right: 32px !important;}
.pr40 {padding-right: 40px !important;}
.pr48 {padding-right: 48px !important;}
.pr56 {padding-right: 56px !important;}

/* typography */
.heading1 {font-size: 40px; line-height: 110%; letter-spacing: -.6px; font-weight: 800;}
.heading2 {font-size: 32px; line-height: 110%; letter-spacing: -.6px; font-weight: 800;}
.heading3 {font-size: 24px; line-height: 120%; letter-spacing: -.6px; font-weight: 800;}
.heading4 {font-size: 20px; line-height: 120%; letter-spacing: -.6px; font-weight: 800;}
.subtitle1 {font-size: 18px; line-height: 120%; letter-spacing: -.6px;}
.subtitle2 {font-size: 16px; line-height: 120%; letter-spacing: -.6px;}
.extrabold {font-weight: 800 !important;}
.bold {font-weight: 700 !important;}
.semibold {font-weight: 600 !important;}
.regular {font-weight: 400 !important;}
.c-black {color: #10192D !important;}
.c-blue {color: #2873FF !important;}
.c-red {color: #F65556 !important;}
.c-gray {color: #8E9BAE !important;}
.c-yellow {color: #f9bd2e !important;}
.c-orange {color: #e86534 !important;}
.t-center {text-align: center !important;}
.t-right {text-align: right !important;}
.t-left {text-align: left !important;}
.lh12 {line-height: 1.2;}
.lh14 {line-height: 1.4;}
.lh15 {line-height: 1.5;}
.lh18 {line-height: 1.8;}
.v-middle {vertical-align: middle;}
.v-top {vertical-align: top;}

.fs12 {font-size: 12px !important;}
.fs14 {font-size: 14px !important;}
.fs16 {font-size: 16px !important;}
.fs18 {font-size: 18px !important;}
.fs20 {font-size: 20px !important;}
.fs16 {font-size: 16px !important;}
.fs24 {font-size: 24px !important;}
.fs32 {font-size: 32px !important;}
.fs40 {font-size: 40px !important;}
.fs48 {font-size: 48px !important;}

.dpinline {display: inline-block !important;}
.dpblock { display: block !important;}

/* skip */
.skip a {display: block; position: absolute; left: 0; top: -9999px; overflow: hidden; width: 100%; background: black; font-weight: 300; color: #fff; font-size: 1em; font-weight: bold; text-align: center;}
.skip a:focus {position: absolute; top: 0; padding: 10px 0; z-index: 99999; outline: none !important;}

/* form */
input[type=text], input[type=number], input[type=password], input[type=search], input[type=tel] { border: 1px solid rgba(255,255,255, .2); background-color: transparent;  border-radius: 2px; color: #fff; font-size: .9rem; font-weight: 400; width: auto; box-sizing: border-box; padding: 0 .5rem; vertical-align: middle; letter-spacing: -.3px;}
select, .select {border: 0; background: url(../../../images/domain/SI24856041/bg_select_wh.png) no-repeat calc( 100% - 6px) 50% #272B34; background-size: 12px 12px; width: auto; box-sizing: border-box; padding: 0 5px; color: rgba(255,255,255, .5); vertical-align: middle; font-size: 14px; letter-spacing: -.3px; font-weight: 600; appearance: none; -webkit-appearance: none; width: 100%; text-align: left; cursor: pointer;}
select::-ms-expand {display: none;}
select.placeholder {color: rgba(255,255,255, .5);}
input[type=text]:focus, input[type=text]:hover, input[type=text].active,
input[type=password]:focus, input[type=password]:hover, input[type=password].active, 
input[type=search]:focus, input[type=search]:hover, input[type=search].active,
input[type=number]:focus, input[type=number]:hover, input[type=number].active,
input[type=tel]:focus, input[type=tel]:hover, input[type=tel].active, 
select:focus, select:hover, .select:focus, .select:hover {outline: none !important;}
select option[value=""][disabled] {display: none;}
::placeholder {color: rgba(255,255,255, .5); font-size: .9rem; font-weight: 400;}
input[type=checkbox] {display: none;}
input[type=checkbox] ~ label {font-size: 16px; color: #10192D; letter-spacing: -.3px; line-height: 1.2;}
input[type=checkbox] ~ label::before {display: inline-block; content: ''; width: 24px; height: 24px; vertical-align: middle; margin-right: 8px; background: url(../../../images/domain/SI24856041/ic-checkbox-off.svg) no-repeat center; background-size: 100% 100%;}
input[type=checkbox]:checked ~ label::before {background-image: url(../../../images/domain/SI24856041/ic-checkbox-on.svg);}
input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none; height: 20px; width: 20px; border-radius: 10px; background: url(../../../images/domain/SI24856041/ic-searchclear.svg) no-repeat 50% 50%; background-size: contain; opacity: 0; pointer-events: none; position: absolute; right: 14px;}
input[type="search"]:focus::-webkit-search-cancel-button {opacity: 1; pointer-events: all;}

/* table */
.tbl-typeA {font-size: 1em; color: #fff; width: 100%; border-collapse: collapse;}
.tbl-typeA th, .tbl-typeA td {background: #5586e0; font-size: .75em; font-weight: 400; padding: .55em 1.5em; border-bottom: 1px solid #ddd; box-sizing: border-box; font-family: 'NanumSquareRound';}
.tbl-typeA th {text-align: left;}
.tbl-typeA td {text-align: right;}
.tbl-typeA tr:nth-child(even) th, .tbl-typeA tr:nth-child(even) td {background: #819ee8}

/* float */
.f-clear:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}
* html .f-clear {height: 1%;}
.f-clear {display: block; min-height: 1%;}
.f-left {float: left;}
.f-right {float: right;}
.clear {clear: both; }

.overflow-h {overflow: hidden !important;}
.overflow-v {overflow: visible !important;}
/* button */
button {border: 0; background-color: transparent; letter-spacing: -.3px; padding: 0; cursor: pointer; opacity: 1;}
button:hover {opacity: .8; transition: all .3s ease;}
/* 기본 */
html, body {height: 100%; min-height: -webkit-fill-available; background: #363A45; font-size: 16px;}
body {font-weight: 400; line-height: 1.2; font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;}
#wrap {min-height: 940px; height: 100%; position: relative;}
#wrap::before {position: absolute; left: 0; bottom: 0; width: 100%;height: 1.5rem; line-height: 1.5; content: 'COPYRIGHT ⓒ 2024 YANGJU CITY. ALL RIGHTS RESERVED'; font-size: 11px; color: rgba(255,255,255, .3); font-weight: 300; text-align: center;}

/* header */
header {background: #272a33; height: 80px; padding: 0; text-align: right; position: relative; box-sizing: border-box; transition: all .3s ease;}
header h1 {position: absolute; left: 1.25rem; top: 0;}
header h1 a {line-height: 60px; display: block;}
header h1 a img {width: 60px; display: inline-block; vertical-align: middle; margin-right: 1rem; margin-top: 8px;}
header h1 a p {font-family: 'NanumSquareRound'; font-weight: 600; color: #fff; font-size: 1.1rem; display: inline-block; vertical-align: top; line-height: 80px;}

header .nav-wrap .menu {display: inline-block; vertical-align: top; margin-right: 1.5rem;}
header .nav-wrap .menu li {float: left; height: 80px;}
header .nav-wrap .menu li a {font-family: 'NanumSquareRound'; color: rgba(255,255,255, .7); display: block; padding: 0 2.5rem; margin: 20px .25rem 0; height: 40px;line-height: 40px; font-weight: 600; font-size: 1.1rem; transition: all .3s ease; cursor: pointer;}
header .nav-wrap .menu li a img {vertical-align: middle; margin: -2px 0 0 0;}
header .nav-wrap .menu li a:hover { color: rgba(255,255,255, 1);}
header .nav-wrap .menu li a.active {background: #e86534;  color: rgba(255,255,255, 1);border-radius: 20px; font-weight: 800;}
header .nav-wrap .profile {display: inline-block; padding: 0; color: rgba(255,255,255, .5); height: 80px; vertical-align: top;}
header .nav-wrap .profile img {display: inline-block; vertical-align: middle; line-height: 65px; margin: -2px 4px 0 0;}
header .nav-wrap .profile p {display: inline-block; line-height: 80px; color: #fff; font-weight: 300; font-size: 1rem; padding-left:1.5rem;}
header .nav-wrap .profile p span {color: #fff; display: inline-block; font-weight: 600; margin-left: 4px;}
header .nav-wrap .etc {padding-top: 15px; margin: 0 1.5rem; display: inline-block; box-sizing: border-box;}
header .nav-wrap .search {display: inline-block; width: 160px; height: 30px; line-height: 30px; border-radius: 30px; background-color: #fff; overflow: hidden; vertical-align: middle; padding: 0 2px; margin:0 3px 0 0;}
header .nav-wrap .search input[type=text] {float: left; width: calc(100% - 30px); height: 30px; line-height: 30px; border-radius: 0; border: 0; padding-right: 0; color: #333; font-size: .9rem;}
header .nav-wrap .search input[type=text]::placeholder{ font-size: .9rem; color: #ccc; font-weight: 300;}
header .nav-wrap .search button {float: left; width: 30px; height: 30px;}
header .nav-wrap .setting { width: 30px; height: 30px; margin: 10px 0 0;}
header .nav-wrap .setting img {margin: -2px 0 0 0;}
header .btn-menu {width: 30px; height: 30px; background: url(../../../images/domain/SI24856041/btn_menu.png) no-repeat center;  position: absolute; top: .5rem; right: .5rem; border: 0; display: none; z-index: 11;}

/* footer */
.footer {color: #5d5d5d; text-align: center; font-size: 1em; display: block; height: 50px;}
.footer .util {float: left; display: block; font-size: 0;}
.footer .util li {display: inline-block; font-size: .9rem; padding: 1rem 0;}
.footer .util li a {display: inline-block; font-weight: 300; color: #666; border-right: 1px solid #ccc; padding: 0 1em; letter-spacing: -.06em;}
.footer .util li:first-child a {padding-left: 0;}
.footer .util li:last-child a {border-right: none;}
.footer .util li a b {font-weight: 500; color: #222;}
.footer .copyright {clear: none; float: right; color: #222; text-align: center; padding: 1rem 0; font-size: .8rem; font-weight: 300; opacity: 1;}

/* main */
.map_wrap > svg {margin-top: 8rem; max-width: 370px;}
.map-total {width: 180px;position: absolute; top: 5rem; left: 0; border: 1px solid #110011;}
.map-total th {background-color: #110011 !important; padding: 4.5px .3em !important;}
.map-total td {padding: 1rem .25rem !important; color: #fff !important; background-color: rgba(0,0,0, .1) !important;}
.map-level {position: absolute; right: 0; top: 13rem; width: 100px; font-size: .8rem; background-color: rgba(0,0,0, .1); border: 1px solid #110011; height: 135px;}
.map-level > p {text-align:right; background-color: #110011; color: #fff; padding: 0 2px; height: 24px; line-height: 24px;}
.map-level ul {padding: 8px; text-align: left;}
.map-level ul li {display: block; margin-bottom:4px; color: rgba(255,255,255, .4); font-weight: 300;}
.map-level ul li > span {width: 8px; height: 4px; display: inline-block; margin: -2px 4px 0 0;vertical-align: middle; border: 1px solid rgba(0,0,0, .5);}
.map-level ul li:last-child {margin-bottom: 0;}

.map-info {width: 260px;position: absolute; top: 5rem; right: 0; border: 1px solid #110011;}
.map-info h4 {height: 24px; line-height: 24px; text-align:left; background-color: #110011; color: #fff; padding: 0 2px; width: 100%; font-size: .8rem; box-sizing: border-box; display: block;}
.map-info h4 > a {float: right; margin-right: .25rem; margin-top: -2px;}
.map-info td {background-color: rgba(0,0,0, .2) !important; color: #fff !important;}
.map-weather {position: absolute; right: 270px; top: 5rem; width: 150px; height: 100px; display: flex; flex-flow: column wrap; font-size: .8rem; background-color: rgba(0,0,0, .1); border: 1px solid #110011;}
.map-weather h4 {height: 24px; line-height: 24px; text-align:center; background-color: #110011; color: #fff; padding: 0; width: 100%;}
.map-weather-con {height: calc(100% - 24px); padding: 1rem; box-sizing: border-box;}


.main-search {height: 30px; display: flex; flex-flow: row wrap; padding: 0; gap: 0 4px;}
.main-search input[type=text]{flex: 1; height: 26px; line-height: 26px;}
.main-search button {width: 100px; height: 26px; line-height: 26px;  border-radius: 2px; background-color: #f9bd2e;}
.main-tbl-info {height: 24px; display: flex; flex-flow: row wrap; padding: 0; margin-bottom: 10px; gap: 0 4px;}
.main-tbl-info > select {width: 100px; height: 26px; line-height: 26px; background-color: transparent; border: 1px solid rgba(255,255,255, .2);}
.main-tbl-info .btn-wrap {flex: 1; text-align: right}
.main-tbl-info .btn-wrap a {display: inline-block; background-color: #c7aa02; border-radius: 2px; height: 26px; line-height: 26px; padding: 0 4px; transition: all .2s ease; font-size: .8rem;}
.main-tbl-info .btn-wrap a:hover {background-color: #f9bd2e;}
.main-table-wrap {height: calc(100% - 74px) !important; margin: 0 !important;}
.mCSB_inside > .mCSB_container {margin-right: 0 !important;}

/* contents */
.contents-title {font-family: 'NanumSquareRound'; height: 50px; line-height: 50px; border-bottom: 1px solid rgba(255,255,255, .1); color: #fff; font-size: 1.125rem; font-weight: 600; padding: 0 1.5rem; text-align: left; position: relative;}
.contents-title .tt {font-size: 1.1em; position: relative; padding-left: 20px;}
.contents-title .tt::before {position: absolute; left: 0; top: 18px; width: 12px; height: 12px; border-radius: 12px; border: 3px solid #e86534; box-sizing: border-box; content:'';}
.contents-title .date {position: absolute; right: 1.5rem; top: 0;}
.contents {padding: 0 1.5rem 1.5rem; height: calc(100% - 130px); box-sizing: border-box; position: relative;}
.contents .dashboard-wrap { display: flex; justify-content: space-between; flex-direction: row; gap: 1.5rem; align-items: flex-start; height: 100%; box-sizing: border-box;}
.contents .dashboard-wrap .db-content { flex: 1 1 32%; height: 100%; padding: 1rem 0; box-sizing: border-box; overflow: hidden;}
.contents .dashboard-wrap .db-content > h3 {color: #fff; font-family: 'NanumSquareRound'; font-weight: 800; font-size: 1.6rem; line-height: 2.4; transition: all .3s ease;}
.contents .dashboard-wrap .db-content2-1 { flex: 1 1 59%;}
.contents .dashboard-wrap .db-content2-2 { flex: 1 1 39%;}

/* table */
.contents .tbl-basic {min-width: auto; height: 100%; font-size: .8rem; text-align: center;}
.contents .tbl-basic.border-top {border-top: 1px solid #51648c;}
.contents .tbl-basic .b-bottom {border-bottom: 1px solid rgba(255,255,255, .2);}
.contents .tbl-basic .b-bottom0 {border-bottom: 0 !important}
.contents .tbl-basic thead th {padding: .5em .3em .3em; color: #fff; border-right: 1px solid rgba(255,255,255, .2); vertical-align: middle; background-color: #53565e;}
.contents .tbl-basic thead th:last-child {border-right: 0;}
.contents .tbl-basic tbody th {color: rgba(255,255,255, .4); border-bottom: 1px solid rgba(0,0,0, .5); border-right: 1px solid rgba(255,255,255, .2); vertical-align: middle;}
.contents .tbl-basic td {padding: .34em; color: rgba(255,255,255, .4); border-bottom: 1px solid rgba(255,255,255, .2); border-right: 1px solid rgba(255,255,255, .2); vertical-align: middle;}
.contents .tbl-basic td:last-child {border-right: 0;}
.contents .tbl-basic td a {color: rgba(255,255,255, .7);}
.contents .tbl-basic td a:hover {cursor: pointer; color: rgba(255,255,255, 1);}
.contents .tbl-basic tbody tr:last-child th,.contents .tbl-basic tbody tr:last-child td {border-bottom: 0;} 
.contents .tbl-basic.text-c td {text-align: center !important;}

/* 인구현황/인구지표/경제현황/경제지표*/
.type-col2 {display: flex; flex-direction: column; height: 100%; color: #fff; gap: 1rem;}
.type-col2 .chart-wrap > h4 {font-size: 1.25rem; font-weight: 800; height: 32px; line-height: 1; font-family: 'NanumSquareRound'; text-align: center; color: #ffffff;} 
.type-col2 .chart-wrap > h4 span {font-weight: 300; display: inline-block; margin: 0 0 0 6px; letter-spacing: -.5px; font-size: .8rem;}
.type-col2 .chart-wrap .result-content {height: calc(100% - 32px); font-size: .9rem;}
.type-col2 .chart-wrap.population1 {height: 30%;}
.type-col2 .chart-wrap.population2 {height: 70%;}
.population1 .result-content {display: flex; flex-direction: row;}
.population1 .result-content > div { flex: 1 1 50%; padding: 0; box-sizing: border-box;}

.type-col2 .chart-wrap.economy1 {height: 22%;}
.type-col2 .chart-wrap.economy2 {height: 78%;}
.economy1 .result-content {display: flex; flex-direction: row;}
.economy2 .result-content > div { flex: 1 1 50%; padding: 0; box-sizing: border-box;}


/* 동별 현황 */
.type-col3 {display: flex; flex-direction: column;  justify-content: space-between; height: 100%; color: #fff; font-family: 'NanumSquareRound'; gap: 1rem;}
.type-col3 h4 {font-size: 1.25rem; font-weight: 800; height: 32px; line-height: 32px;text-align: center; color: #fff; }
.type-col3 .chart-wrap h5 {font-size: .96rem; height: 32px; line-height: 32px; color: rgba(255,255,255,1); position: relative; padding: 0 16px 0 24px; background-color: #110011; font-family: 'NanumSquareRound';}
.type-col3 .chart-wrap h5 span {font-weight: 300; color: rgba(255,255,255,.7); font-size: .9rem; letter-spacing: -.05em;}
.type-col3 .chart-wrap h5 small {font-size: .8rem; font-weight: 300; color: rgba(255,255,255,.5); display: block; margin: 0 0 0 6px; float: right;}
.type-col3 .chart-wrap h5::before {width: 8px; height: 8px; border-radius: 8px; border: 2px solid #fff; content:''; position: absolute; left: 10px; top: 12px; box-sizing: border-box;}
.type-col3 .chart-wrap .source {font-size: .7rem; color: rgba(255,255,255, .3); font-weight: 300; padding: 0 4px; box-sizing: border-box; height: 20px; line-height: 20px;}
.type-col3 .chart-wrap {flex: 1 1 calc(33% - 20px); padding: 0; font-size: .9rem; box-sizing: border-box; background-color: #272B34;}
.type-col3 .result-content {height: calc(100% - 70px);}

.type-col3 .result-content.content2 {height: calc(100% - 32px);}

.type-col3 .tab-result-content {height: calc(100% - 96px); }
.chart-wrap-row2 {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: space-around; height: 100%;}
.chart-wrap-row2 > div {height: calc(100% - 10px); margin: 5px;}
.chart-wrap-row2 > div:nth-child(1) {flex: 1 1 calc(60% - 10px); border-right: 1px solid rgba(255,255,255, .1);;}
.chart-wrap-row2 > div:nth-child(2) {flex: 1 1 calc(40% - 10px);}
/* 지도 */
.map-content {text-align: center; margin: 0; padding: 1rem 0 ; height: auto; position: relative;}
.map-content .map-tt {font-family: 'NanumSquareRound' ; font-weight: 600; color: #222 ; font-size: 2.5rem ; margin-bottom: .5em ; }
.map-content .map-tt span {color: #3958c4; font-weight: 600 ;  font-size: 1em ;}

/*.map-content .map_wrap > svg {max-width: 500px;}*/
.img-map {width: 100%; max-width: 600px; display: block; margin: 0 auto;}
.map-con-subject {margin: 1rem 0;  font-family: 'NanumSquareRound'; font-size: 1rem; }
.map-con-subject li { display: inline-block; margin: 0 .125rem; border-radius: 20px; background: #110011; overflow: hidden;}
.map-con-subject li a {color: #fff; padding: .3rem 1rem; display: block; width: 100%; text-align: center;  box-sizing: border-box; font-weight: 400; transition: all .3s ease;}
.map-con-subject li:hover a {background: #e86534;}
.map-con-subject li.active a {background: #e86534; font-weight: 700;}
.map-con-label {display: inline-block; margin: 2rem auto 2.5rem; font-size: 0; position: relative;}
.map-con-label li {width: 30px; height: 10px; display: inline-block;}
.map-con-label::before {content:'낮음'; position: absolute; width: 30px; height: 20px; top: -18px; left: 0; font-size: 11px; text-align: left; color: rgba(255,255,255, .6);}
.map-con-label::after {content:'높음'; position: absolute; width: 30px; height: 20px; top: -18px; right: 0; font-size: 11px; text-align: right; color: rgba(255,255,255, .6);}

/* 인구현황/경제현황 */
.population-statistics {display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: .5rem; height: 100%;  width: 100%; margin: 0 auto; }
.population-statistics li { flex: 1 1; margin: 0; height: 100%; background-color: #272B34; text-align: center;box-sizing: border-box; font-size: 1rem; transition: all .3s ease-in-out; vertical-align: top;}
.population-statistics .img {display: block; margin: 1rem auto .5rem}
.population-statistics .tt1 {text-align: center ; padding: 1.5rem 0 1rem 0 ;color: #fff; line-height: 1.4;}
.population-statistics .tt1::before {display: none ;}
.population-statistics .con {font-size: 1.5rem; font-family: 'NanumSquareRound'; font-weight: 800; color: #ffffff; letter-spacing: -1px; margin: 0 0 .5rem 0;}
.population-statistics .unit {display: inline-block; margin: .2rem; font-size: .8rem; color: rgba(255,255,255, .4);}
.population-statistics .date {display: inline-block; margin: .2rem; font-size: .8rem; color: rgba(255,255,255, .4);}
.population-statistics .source {display: block; margin: .2rem; font-size: .7rem; color: rgba(255,255,255, .4);}
.population-statistics li.down .con {color: #da1a3e; position: relative; }
.population-statistics li.down .con small {font-size: 1rem; display: inline; margin-left: .3125rem;}
.population-statistics li.down .con::before {content: ''; display: inline-block; width: 15px; height: 15px; background: url(../../../images/domain/SI24856041/ico_down.png) 0 0 no-repeat; vertical-align: middle; margin: -.5rem .375rem 0 0;}
.population-statistics li.up .con {color: #4c9dec; position: relative; }
.population-statistics li.up .con small {font-size: 1rem; display: inline; margin-left: .3125rem;}
.population-statistics li.up .con::before {content: ''; display: inline-block; width: 15px; height: 15px; background: url(../../../images/domain/SI24856041/ico_up.png) 0 0 no-repeat; vertical-align: middle; margin: -.5rem .375rem 0 0;}

/* 인구지표/경제지표 */
.population-list {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; /*align-content: space-between;*/ height: 100%; gap: .5rem;}
.population-list li {flex: 1 1 calc(50% - .5rem); margin: 0; display: inline-block; vertical-align: top; text-align: center; color: #fff; background: #272B34; font-size: 1rem; /*height: calc(25% - 5px);*/}
.population-list li .tt1 {background-color: #110011; font-family: 'NanumSquareRound'; line-height: 2; font-size: 1rem;}
.population-list li .tt1 small {font-size: .8rem; display: inline-block; margin-left: 3px; letter-spacing: -.5px;}
.population-list li .tt2 {color: rgba(255,255,255,.5); font-size: .9rem; line-height: 2; display: block;}
.population-list li .con {font-size: 1.5rem; font-family: 'NanumSquareRound'; font-weight: 800; margin: .5rem 0 0; line-height: 1.6; color: #f9bd2e;}
.population-list li .con small {font-size: .8rem; font-weight: 500; display: inline-block; margin-left: 5px; opacity: .7;}
.population-list li .unit {display: inline-block; margin: .2rem; font-size: .8rem; color: rgba(255,255,255, .4);}
.population-list li .date {display: inline-block; margin: .2rem; font-size: .8rem; color: rgba(255,255,255, .4);}
.population-list li .source {display: block; margin: .2rem; font-size: .7rem; color: rgba(255,255,255, .4);}

/* 기상현황/환경지표 */
.type-col2 .chart-wrap.environment1 {height: 40%;}
.type-col2 .chart-wrap.environment2 {height: 60%;}
.environment-list {display: flex; flex-flow: row wrap; gap: .5rem; height: 100%;}
.environment-list li {flex: 1 0 calc(33% - 1.5rem); background-color: #272B34; text-align: center;}
.environment-list li .img {margin: 1rem 0 .25rem;}
.environment-list li .tt1 {color: #ffffff; padding: 0.5rem; font-size: 1rem; font-weight: 300; height: 20px; line-height: 20px;}
.environment-list li .con {color: #f9bd2e; font-size: 1.5rem; font-family: 'NanumSquareRound'; font-weight: 800; letter-spacing: -1px; margin: 0 0 0.5rem 0;}
.environment-list li .con.wind {font-size: 1.2rem;}
.environment-list li .con small {font-size: .7rem; display: inline; margin-left: 0.3125rem;}
.environment-list li .con span {color: #fff294; font-weight: 300; font-size: 1.1rem;}

/* 민원 & 챗봇상담 */
.type-col2 .chart-wrap.customer1 {height: 30%; align-items: center;}
.type-col2 .chart-wrap.customer2 {height: 70%; align-items: center;}
.type-col2 .chart-wrap .customer {display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 100%; width: 100%; margin: 0 auto; gap: 5px; }
.type-col2 .chart-wrap .customer > div { flex: 1 1 0; margin: 0; height: 100%; background-color: #272B34; text-align: center;box-sizing: border-box; font-size: 1rem; transition: all .3s ease-in-out; vertical-align: top; height: 100%;}
.type-col2 .chart-wrap .customer > div .tt1 {text-align: center; font-family: 'NanumSquareRound'; font-size: 1rem; height: 60px; line-height: 60px;}
.type-col2 .chart-wrap .customer > div .tt1 img {width: 20px; display: inline-block; margin: -2px 5px 0 0;}
.type-col2 .chart-wrap .customer .customer-con1 {background-color: #5973b9;}
.type-col2 .chart-wrap .customer .customer-con1 .tt2 {font-family: 'NanumSquareRound'; font-size: 1.8vw; font-weight: 700; display: block; height: calc(100% - 120px); line-height: 1.6; padding-top: 1.2rem; box-sizing: border-box;}
.type-col2 .chart-wrap .customer .customer-con1 .tt2 small {display: block; margin: 0; font-size: .7em; font-weight: 300; letter-spacing: -.5px; line-height: 1.2;}
.type-col2 .chart-wrap .customer .customer-con1 .tt3 {height: 60px; line-height: 1.4; font-weight: 600; font-size: 1rem;}
.type-col2 .chart-wrap .customer .customer-con1 .tt3 small {font-weight: 400; font-size: .8em; opacity: .7; display: block;}
.type-col2 .chart-wrap .customer .customer-con2 {background-color: #7d8db8;}
.type-col2 .chart-wrap .customer .customer-con2 .list1 {height: calc(100% - 60px); overflow-y: auto; padding: .3rem .6rem; box-sizing: border-box; text-align: left; font-size: .9rem;}
.type-col2 .chart-wrap .customer .customer-con2 .list1 .list1-con {position: relative; padding-left: 15px; word-break: keep-all; margin-bottom: 3px;}
.type-col2 .chart-wrap .customer .customer-con2 .list1 .list1-con::before {width: 8px; height: 8px; border-radius: 8px; border: 2px solid #cbd6ff; content:''; position: absolute; left: 0; top: 5px; box-sizing: border-box;}
.type-col2 .chart-wrap .customer .customer-con2 .list2 {margin: 6px;}
.type-col2 .chart-wrap .customer .customer-con2 .list2 .list2-con {font-size: .9em; font-weight: 300; opacity: .7; position: relative; padding-left: 10px;}
.type-col2 .chart-wrap .customer .customer-con2 .list2 .list2-con::before {width: 8px; height: 8px; content:'- '; position: absolute; left: 0; top: 0; box-sizing: border-box;}

/* 민원현황 & 민원추이 */
.type-col2 .chart-wrap .result-content {height: calc(100% - 32px); font-size: .9rem;}
.type-col2 .chart-wrap.complaint1 {height: 30%;}
.type-col2 .chart-wrap.complaint2 {height: 70%;}
.complaint1 .result-content {display: flex; flex-direction: row;}
.complaint1 .result-content > div { flex: 1 1 50%; padding: .25rem; box-sizing: border-box;}

/* 민원처리현황 & 민원 키워드 */
.type-col2-2 {display: flex; flex-direction: column; height: 100%; color: #fff;}
.type-col2-2 .chart-wrap {height: 50%;}
.type-col2-2 .chart-wrap > h4 {font-size: 1.25rem; font-weight: 800; height: 32px; line-height: 32px; font-family: 'NanumSquareRound'; text-align: center; color: #ffffff;}
.type-col2-2 .chart-wrap > h4 > span {font-weight: 300;display: inline-block; margin: 0 0 0 6px; letter-spacing: -.5px;} 
.type-col2-2 .chart-wrap > h4 > small {font-size: .8rem; font-weight: 300; color: #a9b1ce; display: block; margin: 0 0 0 6px; float: right;}
.type-col2-2 .chart-wrap .result-content {height: calc(100% - 70px); font-size: .9rem; background-color: #272B34;}
.type-col2-2 .chart-wrap .source {font-size: .7rem; height: 18px; line-height: 18px; color: rgba(255,255,255, .3); font-weight: 300; padding: 3px; box-sizing: border-box; font-family: 'NanumSquareRound';}
.type-col2-3 {display: flex; flex-direction: column; height: 100%; color: #fff;}
.type-col2-3 > div{flex: 1 1 0; height: 50%; padding: 0; font-size: .9rem; box-sizing: border-box;}
.type-col2-3 h5 { font-size: 1rem; height: 30px; line-height: 30px; color: #cbd6ff; position: relative; padding-left: 15px;}
.type-col2-3 h5::before {width: 8px; height: 8px; border-radius: 8px; border: 2px solid #cbd6ff; content:''; position: absolute; left: 0; top: 11px; box-sizing: border-box;}
.type-col2-3 .result-content {height: calc(100% - 48px); font-size: .9rem; background-color: #272B34;}
.type-col2-3 .source {font-size: .7rem; height: 18px; line-height: 18px; color: rgba(255,255,255, .3); font-weight: 300; padding: 3px; box-sizing: border-box; font-family: 'NanumSquareRound';}


/* 키워드별 상세민원 */
.tbl-search {height: 24px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 4px; font-size: 12px;}
.tbl-search > div {flex: 1 1 0;}
.tbl-search > div select {width: 100%;}
.tbl-search > div:nth-child(1) > select {width: 50%;}
.tbl-search > div:nth-child(1) > p {display: inline;}
.table-wrap {width: 100%; height: calc(100% - 84px); margin: 0; overflow-y: auto; background-color: #272B34;}
.table-wrap2 {width: 100%; height: 215px; margin: 0; overflow-y: auto;}
.table-wrap3 {width: 100%; height: calc(100% - 34px); margin: 0; overflow-y: auto; background-color: #272B34;}
/* paging */
.paging {height: 30px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; text-align: center; gap: 2px; max-width: 300px; margin: 0 auto;}
.paging li {flex: 1 1 auto; width: 30px; height: 30px; line-height: 30px;}
.paging li a {width: 100%; height: 100%; display: block;  color: rgba(255,255,255, .6); font-size: 13px; font-weight: normal; text-align: center; cursor: pointer; transition: .2s ease; }
.paging li a:hover {color: #ffbb02; }
.paging .active, .paging .active:hover { font-weight:800; color:#ffbb02;}
.paging img { vertical-align: middle; margin-top: -4px}
.paging li.img a {border-color: rgba(255,255,255, .5)}

/* 양주지표 */
.contents .dashboard-wrap2 { display: block;}
.contents .dashboard-wrap2 .db-content {flex: 1 1 0; width: 100%;}
.contents .dashboard-wrap2 .db-content3-1 { height: 200px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 10px;}
.contents .dashboard-wrap2 .db-content3-1 > div {flex: 1 1 0; margin: 0; height: 100%; background-color: #272B34; text-align: center;}
.contents .dashboard-wrap2 .db-content3-1 > div .img {margin:1rem 0 .5rem;}
.contents .dashboard-wrap2 .db-content3-1 > div .tt1 {color: #ffffff; padding: .5rem; font-size: 1rem; font-weight: 300; height: 20px; line-height: 20px;}
.contents .dashboard-wrap2 .db-content3-1 > div .con {color: #f9bd2e; font-size: 2rem; font-family: 'NanumSquareRound'; font-weight: 800; letter-spacing: -1px; margin: 0 0 0.5rem 0;}
.contents .dashboard-wrap2 .db-content3-1 > div .con small {font-size: .7rem; display: inline; margin-left: 0.3125rem;}
.contents .dashboard-wrap2 .db-content3-1 > div .move-list {font-size: 1.6rem; margin-top: .8rem;}
.contents .dashboard-wrap2 .db-content3-1 > div .move-list p {display: block; margin: 0 5px;}
.contents .dashboard-wrap2 .db-content3-1 > div .move-list p span {font-size: 1rem; color: rgba(255,255,255, 1);font-weight: 500; display: inline-block; vertical-align: middle;}
.contents .dashboard-wrap2 .db-content3-1 > div .move-list p span::after {content:' : '}

.contents .dashboard-wrap2 .db-content3-1 > div .gender {font-size: 1rem !important; margin: 6px 0 0 0 !important;}

.contents .dashboard-wrap2 .db-content3-2 {height: calc(50% - 100px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 10px;}
.contents .dashboard-wrap2 .db-content3-2 > div {flex: 1 1 0; }
.contents .dashboard-wrap2 .db-content3-2 .result-content {height: calc(100% - 115px); background-color: #272B34;}
.contents .dashboard-wrap2 .db-content .tt1 {color: #fff; font-family: 'NanumSquareRound'; line-height: 30px; height: 30px; font-size: 1rem;}
.contents .dashboard-wrap2 .db-content .tt1 small {font-size: .8rem; display: inline-block; margin-left: 3px; letter-spacing: -.5px;}
.contents .dashboard-wrap2 .db-content .tt2 {color: #fff; font-family: 'NanumSquareRound'; line-height: 30px; height: 30px; font-size: 1rem;}
.contents .dashboard-wrap2 .db-content .tt2 small {font-size: .8rem; display: inline-block; margin-left: 3px; letter-spacing: -.5px;}
.contents .dashboard-wrap2 .db-content .tt1 {font-size: 1.1rem; font-weight: 800; font-family: 'NanumSquareRound'; text-align: center; color: #fff; line-height: 30px; height: 30px;}

/*.contents .dashboard-wrap2 .db-content .tt2 {font-weight: 300;display: block; margin: 0 0 0 6px; letter-spacing: -.5px; line-height: 30px; height: 30px;} 
.contents .dashboard-wrap2 .db-content .tt2 small {font-size: .8rem; font-weight: 300; color: #a9b1ce; display: block; margin: 0 0 0 6px; float: right;}*/


.contents .dashboard-wrap2 .db-content .tt2 {font-size: 1rem; height: 40px; line-height: 40px; color: rgba(255,255,255,1); position: relative; padding: 0 16px 0 32px; background-color: #110011; font-family: 'NanumSquareRound';}
.contents .dashboard-wrap2 .db-content .tt2 small {font-size: .8rem; font-weight: 300; color: rgba(255,255,255,.5); display: block; margin: 0 0 0 6px; float: right;}
.contents .dashboard-wrap2 .db-content .tt2::before {width: 8px; height: 8px; border-radius: 8px; border: 2px solid #fff; content:''; position: absolute; left: 16px; top: 14px; box-sizing: border-box;}

.contents .dashboard-wrap2 .db-content3-2 .source {font-size: .7rem; height: 18px; line-height: 18px; color: rgba(255,255,255, .3); font-weight: 300; padding: 3px; box-sizing: border-box; font-family: 'NanumSquareRound';}
.dashboard-wrap2 .db-content .tt2 {color: rgba(255,255,255,.5); font-size: .9rem; line-height: 2; display: block;}
.dashboard-wrap2 .db-content .unit {display: inline-block; margin: .2rem; font-size: .8rem; color: rgba(255,255,255, .4);}
.dashboard-wrap2 .chart-wrap .result-content {height: calc(100% - 70px); font-size: .9rem; background-color: #272B34;}
.basic-tab {display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: 0; width: 100%; height: 26px; line-height: 26px; background-color: #272B34;} 
.basic-tab li {flex: 1 1 auto; font-size: .865rem; text-align: center; background: #53565e; border-right: 1px solid rgba(0,0,0, .5);}
.basic-tab li:last-child {border-right: 0;}
.basic-tab li a {color: rgba(255,255,255, .6); font-family: 'NanumSquareRound'; font-weight: 400; display: block; width: 100%; padding: 0; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.basic-tab li.active a {position: relative; font-weight: 600;}
.basic-tab li.active a, .basic-tab li.active a:hover, .basic-tab li a:active {background: #f9bd2e; color: #110011;}
.basic-tab li a:hover {color: #110011; background: #ae9714;}


/* 블로그 검색 */
.dashboard-search {height: 50px; display: flex; flex-flow: row wrap; align-items:top; box-sizing: border-box; padding: 24px 0 0 0; z-index: 6;}
.dashboard-search.search2 {padding: 12px 1.5rem !important;}
.dashboard-search .basic-tab {flex: 1;}
.dashboard-search-con {flex: 1; text-align: right; vertical-align: middle; }
.search_checklist {height: 26px; line-height: 26px; width: calc(100% - 100px); cursor: pointer; font-size: .9rem; float: left; background-color: #272B34; font-weight: 300;}
.search_checklist p {display: block;width: 100%; height: 100%; padding: 0 .5rem; text-align: left; box-sizing: border-box;  overflow: hidden; border: 0; background: url(../../../images/domain/SI24856041/btn_more.png) calc(100% - .5rem) 50% no-repeat #272B34; background-size: 12px auto; color: rgba(255,255,255, .5);}
.search_checklist .checklist {display: none; opacity: 0; visibility: hidden; z-index: 6; position: relative; background-color: #272B34;color: rgba(255,255,255, .5); border-top: 0; padding: .5rem 1rem; transition:  all .2s ease; height: 100px; overflow-y: auto; text-align: left;}
.search_checklist .checklist li {display: block; line-height: 1.5; }
.search_checklist .checklist li label {min-width: auto; margin: 0 4px 0 0;}
.search_checklist:hover .checklist {visibility: visible; display: block; opacity: 1;} 
.search_checklist .btn_close {display: inline-block; margin: -2px 0 0 4px; vertical-align: middle; transition: all .2s ease;}
.search_checklist .btn_close:hover {opacity: .7;}
.dashboard-search-con {height: calc(100% - 50px) !important;}
.search-typeA {width: 50%;max-width: 300px; display: inline-block;}
.search-typeA select {width: calc(33.33% - 33.4px); float: left; height: 26px; line-height: 26px; font-weight: 300;}
.search-typeB {width:45%;max-width: 300px;  display: inline-block;}
.search-typeA button, .search-typeB button {width: 100px; background-color: #f9bd2e; height: 26px; line-height: 26px;}
.type-keyword {height: calc(100% - 50px);}
.header-search-con { width: 270px; height: 80px; background-color:rgba(0,0,0, 1); display: none; position: absolute; top: -80px; right: 0; opacity: 0; transition: all .3s ease;}
.header-search-con input {width: 140px; height: 30px; line-height: 30px; border-radius: 15px; background-color: #fff; border: 0; padding: 0;}
.type-keyword h4 {font-size: 1.25rem; font-weight: 800; height: 50px; line-height: 50px; font-family: 'NanumSquareRound'; text-align: center; color: #ffffff;} 
.type-keyword h4 span {font-weight: 300; display: inline-block; margin: 0 0 0 6px; letter-spacing: -.5px; font-size: .8rem;}
.header-search-con.active {display: block; opacity: 1; top: 0;}

/* 민원신고센터 */
.complaints-wrap {display: flex; flex-flow: row wrap; gap: .25rem; padding: 1rem;}
.complaints-wrap li {flex: 0 0 calc(50% - .25rem); background-color: #f9bd2e; opacity: .7; color: #110011; border-radius: .25rem; text-align: center; transition: all .3s ease;}
.complaints-wrap li a {width: 100%; height: 100%;cursor: pointer; display: block; padding : 1rem 0; font-weight: 600; box-sizing: border-box;}
.complaints-wrap li:hover {opacity: 1;}

/*----------------------------------- gis */

.toggleSwitch {width: 32px; margin: -2px 4px 0 0; height: 16px; display: inline-block; position: relative; border-radius: 30px; background-color: #fff; border: 1px solid rgba(0,0,0, .1); cursor: pointer; }
.toggleSwitch .toggleButton {width: 12px; height: 12px; position: absolute; top: 50%; left: 2px; transform: translateY(-50%); border-radius: 50%; background: #e86534;}
.toggleSwitch.active {background: #e86534; }
.toggleSwitch.active .toggleButton {left: calc(100% - 14px); background: #fff !important; }
.toggleSwitch, .toggleButton {transition: all 0.2s ease-in;}

.gis-content {padding: 0 !important; overflow: auto;}
.gis_wrap {height: calc(100% - 50px); min-height: 700px; width: 100%; overflow: hidden; position: relative; overflow-x: auto; min-width: 1100px;}
.gis_map_wrap {width: 100%; height: 100%; background: #eee; position: relative;}
.tbl-gis {border-collapse: collapse; border: 0; padding: 0; margin: 0 0 1em; width: 100%; background:#fff; font-size: 13px; border: 1px solid #4f74a2; min-width: 800px; table-layout: fixed;}
.tbl-gis th, .tbl-gis td {white-space: nowrap; word-break: break-all;}
.tbl-gis thead th {background:#85a2c5; color:#fff; text-align: center; font-weight: 400; letter-spacing: -0.1em; border-right: 1px solid #4f74a2; vertical-align: middle; padding: 5px; border-bottom: none;}
.tbl-gis tbody th {background: #edf2f8 !important;}
.tbl-gis td {background: #fff; color: #4f74a2; border-right: 1px solid #4f74a2; border-bottom: 1px solid #4f74a2; vertical-align: middle; text-align: center; padding: 5px;}
.tbl-gis .left {text-align: left;}
.tbl-gis tr.bg1 td { background:#edf2f8 !important;}
.inquery-wrap {width: 280px; background: #fff; position: absolute; top: 20px; left: 20px; z-index: 4; text-align: center; margin-bottom: 15px; padding: 1rem .5rem .5rem; border: 1px solid #272a33;}

.gis-stt {text-align: left; font-size: 14px; font-weight: 600; color: #272a33; line-height: 1; margin: 0 0 10px; padding-left: 12px; position: relative;}
.gis-stt::before {content:''; position: absolute; left: 2px; top: 4px; width: 6px; height: 6px; border-radius: 10px; background: #666;}

.cont-container {background: #f8f8f8; border: 1px solid #d0d5da; padding: 10px 0px 10px 10px;}
.cont-container ul li {display: block; font-size: 13px; text-align: left; margin-bottom: 8px; color: #272a33; padding-right: 5px; box-sizing: border-box; position: relative; }
.cont-container ul li:first-child {width: 100%;}

.info-list-cont .legend {font-size: .7rem; margin: 0; padding: .5rem; }
.info-list-cont .legend li {display: block; color: #999; margin-bottom: .25rem;}
.info-list-cont .legend li > span {width:12px; height: 12px; display: inline-block; vertical-align: middle; margin: -2px 4px 0 0; border: 1px solid rgba(0,0,0, .2);}
.info-list-cont .legend.legend2 li {display: inline-block; margin-right: 4px;}
.legend-comment {font-size: .9em; color: #999;}
.map-link-wrap {position: absolute; top: 20px; right: 280px; display: flex; flex-flow: row wrap; gap: 2px;}
.map-link-wrap li {}
.map-link-wrap li a {display: block; background-color: #EE8350; color: #fff; font-size: .9rem; height: 30px; line-height: 28px; padding: 0 1rem; border-radius: 4px; transition: all .2s ease; font-weight: 300;}
.map-link-wrap li a img {display: inline-block; vertical-align: middle; margin: -4px 0 0 4px;}
.map-link-wrap li a:hover {background-color: #3F322F;}
.search-p-wrap {height: 32px; width: 250px; position: absolute; top: 20px; right: 20px; z-index: 5; box-sizing: border-box;}
.search-p-wrap .keywordbox {position: absolute; top: 30px; left: 0px; width: 100%; border: 1px solid #272a33; background: #fff;  border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding: 0; height: 150px; line-height: 1.3; display: none;}
.search-p-wrap .keywordbox ul {padding: 0; border-top: 1px solid #eaeaea; height: calc(100% - 25px); overflow: auto;}
.search-p-wrap .keywordbox li {border-bottom: 1px solid #eaeaea; text-align: left;}
.search-p-wrap .keywordbox li a {display: block; padding: 7px 10px; color: #272a33; font-size: 12px; font-weight: 400;}
.search-p-wrap .keywordbox li a strong {color: var(--orange); font-weight: 600;}
.search-p-wrap .keywordbox li a:hover {background: #fffdf0;}
.search-p-wrap .keywordbox-close {height: 30px; width: 100%; line-height: 30px; color: #fff; background: #272a33; text-align: right; padding: 0 10px 0 0; box-sizing: border-box; position: absolute; bottom: 0; left: 0; font-size:13px; }
.search-p-wrap .keywordbox-close img {margin: -2px 0 0 3px; display: inline-block; }
.btn-p-input {width: calc( 100% - 30px) !important; height: 30px !important; border: none !important; padding: 0 10px !important; color: #333; font-size: 13px !important; float: left; font-weight: 400 !important; background-color: #656872 !important; border-radius: 0 !important;}
.btn-p-input::placeholder {font-size: 13px; color: #999;}
.btn-p-search {background: url(../../../images/domain/SI24856041/ico_search_p.png) no-repeat center #272a33; width: 30px; height: 30px; display: block; border: 0; float: right;}
.map-select {width: 60px; position: absolute; right: 20px; top: 60px; z-index: 3; border: 1px solid #ddd; box-sizing: border-box; background: #fff; border-radius: 0; overflow: hidden;}
.map-select select {border: 0; width: 100%; padding: 0 0 0 5px; height: 30px; line-height: 30px; font-size: 12px;}
.tool-wrap {width: 28px; position: absolute; top: 100px; right: 20px; z-index: 3; border: 1px solid #272a33; box-sizing: border-box; background: #fff; border-radius: 0; overflow: hidden; }
.tool-wrap ul {display: block;background: #fff; text-align: center; }
.tool-wrap ul li {display: block; position: relative;width: 26px; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.tool-wrap ul li:last-child {border-bottom: 0;}
.tool-wrap ul li button {padding: 0; margin: 0; background: #fff; border: none; width: 26px; height: 26px; border-radius: 0; color: #333;}
.tool-wrap ul li button:hover {background: #efefef;}
.data-list-wrap {width: 200px; position: absolute; top: 295px; right: 20px; z-index: 3; border: 1px solid #272a33; box-sizing: border-box; height: 200px; background: #fff; overflow: hidden;}
.data-list-head {height: 30px; color: #fff; background: #272a33; font-size: 13px; font-weight: 400; text-align: left; padding: 0 10px; line-height: 28px; position: relative;}
.data-list-handle {position: absolute; top: 0px; right: 0px; border: 0; background: url(../../../images/domain/SI24856041/ico_bottom_handle_up.png) no-repeat center; width: 30px; height: 30px;;}
.data-list-cont {padding: 10px; width: 100%; height: calc( 100% - 30px ); overflow-x: hidden; overflow-y: auto;}
.data-list-wrap.folded {height: 30px !important; width: 80px;}
.data-list-wrap.folded .data-list-handle {background-image: url(../../../images/domain/SI24856041/ico_bottom_handle_down.png);}
.data-list-wrap.folded .data-list-cont {font-display: none;}
.ztree * {font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;}
.data-list-wrap .ztree {height: calc(100% - 30px); overflow-y: auto; padding: 15px 5px; box-sizing: border-box;}
.data-list-wrap .ztree li a:hover {text-decoration:underline; color: #2f67cb;}
.data-list-wrap .ztree li a.curSelectedNode:hover {color: #000;}
.info-list-wrap {width: 250px; position: absolute; z-index: 3; border: 1px solid #272a33; box-sizing: border-box; height: 200px; background: #fff; overflow: hidden; font-size: 12px;}
.info-list-wrap.sm {height: 130px;}
.info-list-head {height: 30px; color: #fff; background: #272a33; font-size: 13px; font-weight: 400; text-align: left; padding: 0 10px; line-height: 28px; position: relative;}
.info-list-handle {position: absolute; top: 0px; right: 0px; border: 0; background: url(../../../images/domain/SI24856041/btn_b_tab_close_wh.png) no-repeat center; background-size: auto; width: 30px; height: 30px;;}
.info-list-cont {padding: 10px; width: 100%; height: calc( 100% - 30px ); overflow-x: hidden; overflow-y: auto;}
.info-list-wrap .tbl_basic {min-width: auto !important; font-size: 11px; margin-bottom: 0;}
.info-list-wrap .tbl_basic td, .info-list-wrap .tbl_basic th {padding: .25em .5em;}
.info-list-wrap.cctv {height: auto}
.info-list-cont.cctv164 {padding:0; width: 100%; height: auto; padding-bottom: 56.25%; overflow-x: hidden; overflow-y: auto; background-color: red;}
.info-list-cont.cctv43 {padding:0; width: 100%; height: auto; padding-bottom: 75%; overflow-x: hidden; overflow-y: auto; background-color: red;}
ul.checktree ul {margin: 0 -10px; background: #f2f5f9; padding: 0 10px 0; text-align: left;}
ul.checktree li {color: #333; display: block; position: relative; text-align: left; margin-top: -2px;}
ul.checktree li:hover {color: #2f67cb;}
ul.checktree li::before {height: 25px; width: 15px; content: ""; display: inline-block; background-repeat: no-repeat; background-position: left top; margin-bottom: -2px;}
ul.checktree > li label {display: inline-block; vertical-align: top; margin-top: 4px; width: auto; text-align: left; font-size: 13px;}
ul.checktree > li:first-child::before {background-image: url(../../../images/domain/SI24856041/tree1.png);}
ul.checktree > li::before {background-image: url(../../../images/domain/SI24856041/tree5.png);}
ul.checktree > li li {color: #6283b7; font-size: 12px;}
ul.checktree > li li::before {width: 24px; background-image: url(../../../images/domain/SI24856041/tree2.png);}
ul.checktree > li:last-child::before {width: 15px; background-image: url(../../../images/domain/SI24856041/tree4.png);}
ul.checktree > li li:last-child::before {width: 24px; background-image: url(../../../images/domain/SI24856041/tree3.png);}
ul.checktree > li:last-child li::before {width: 24px; background-image: url(../../../images/domain/SI24856041/tree6.png);}
ul.checktree > li:last-child li:last-child::before {width: 24px; background-image: url(../../../images/domain/SI24856041/tree7.png);}
ul.checktree > li ul li label {font-size: 11px;}
ul.checktree input[type=checkbox] {display: none;}
ul.checktree .btn-toggletrigger {position: absolute; top: 6px; left: -2px; width: 14px; height: 14px; border: none; background: none; cursor: pointer;}
ul.checktree .btn-toggletrigger:focus {outline: solid 1px #45b5ff !important; box-shadow: 0 0 2px 2px #45b5ff inset;}
.legend-wrap {width: 180px; position: absolute; bottom: 20px; left: 20px; z-index: 3; border: 1px solid #ddd; box-sizing: border-box; height: auto; background: #fff; overflow: hidden;}
.legend-head {height: 30px; color: #fff; background: #272a33; font-size: 14px; font-weight: 400; text-align: left; padding: 0 10px; line-height: 30px; position: relative;}
.legend-handle {position: absolute; top: 0; right: 0; border: 0; background: url(../../../images/domain/SI24856041/ico_bottom_handle_up.png) no-repeat center; width: 30px; height: 30px;;}
.legend-wrap.folded {height: 30px;}
.legend-wrap.folded .legend-handle {background-image: url(../../../images/domain/SI24856041/ico_bottom_handle_down.png);}
.legend-wrap.folded .legend-cont {font-display: none;}
.legend-cont {padding: 10px; width: 100%; height: calc( 100% - 30px ); overflow-x: hidden; overflow-y: auto;}
.legend-cont .group {padding: 0 0 10px; border-bottom: 1px dashed #ddd; margin-bottom: 10px;}
.legend-cont select {width: 100%; font-size: 13px;}
.legend-cont h4 {font-size: 14px; color: #000; font-weight: 400; text-align: left; margin-bottom: 10px;}
.legend-st1 ul {padding: 0 5px;}
.legend-st1 li {display: block; text-align: left; color: #666; line-height: 1.1; margin-bottom: 4px; font-size: 11px;}
.legend-st1 li:last-child {margin-bottom: 0;}
.legend-cont .group:last-of-type {border-bottom: none; margin-bottom: 0; padding: 0;}
.legend-st1 .i {display: inline-block; width: 8px; height: 8px; border-radius: 10px; vertical-align: middle; margin-right: 5px; margin-top: -3px;}
.t-wave {text-align: center; line-height: 30px; height: 30px; width: 12px; font-size: 13px; color: #4f4f4f; margin: 0 0 0 -6px; padding-left: 4px; display: inline;}

.info-list-cont .tbl_wrap {margin: 1em 0 2em; overflow-x: auto;}
.info-list-cont .tbl_basic {border-collapse: collapse; border: 0; padding: 0; margin: 0; border-top: 2px solid #121212; width: 100%; background:#fff; font-size: .9em;}
.info-list-cont .tbl_basic th {background: #F9F9F9; color: var(--black); font-weight: 500; letter-spacing: -0.05em; border-right: 1px solid #e2e3e5; vertical-align: middle; padding: .7em 1em; border-bottom: 1px solid #E7E7E7;}
.info-list-cont .tbl_basic .titbg {background: #e4f3fb !important;}
.info-list-cont .tbl_basic .whitebg {background: #fff !important;}
.info-list-cont .tbl_basic .whitebg2 {background: #fafafa !important;}
.info-list-cont .tbl_basic tbody tr:nth-child(1) {border-top: 0;}
.info-list-cont .tbl_basic td {background: #fff; color: var(--gray); font-weight: 300; border-right: 1px solid #ebeced; border-bottom: 1px solid #E7E7E7; vertical-align: middle; text-align: center; padding: .6em 1em;}
.info-list-cont .tbl_basic td.sl {white-space: nowrap;}
.info-list-cont .tbl_basic td.whitebg {background: #fff !important;}
.info-list-cont .tbl_basic td a:hover {color: var(--orange); text-decoration: underline;}
.info-list-cont .tbl_basic th:last-child, .tbl_basic td:last-child {border-right: 0;}
.info-list-cont .tbl_basic tr.highlight td { background: #ffffcc !important;}



@media screen and (min-width: 1921px) {
html, body {font-size: 16px;}
}

@media screen and (max-width: 1919px) {  
  .map_wrap > svg {max-width: 340px; margin-right: 5rem;}

  .map-weather {right: 0; bottom: 1rem; top: auto; left: auto;}

  .map-total {right: 0; left: auto; top: auto !important; bottom: 9rem; width: auto;}
  .map-info {left:0; right:auto;}
}

@media screen and (max-width: 1400px) {
  html, body {font-size: 15px;}
  header {width: 100%; height: 50px; left: 0; top: 0; }
  header h1 a {line-height: 45px;}
  header h1 a p {line-height: 45px; font-size: .9;}
  header h1 a img {width: 40px; margin-right: 10px; margin-top: -4px;}
  .dim {display: none; content: ''; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); backdrop-filter: blur(10px); z-index: 9; transition: all .3s ease;}
  header .btn-menu {display: block; }
  header .btn-menu.on {background-image: url(../../../images/domain/SI24856041/btn_menu_close.png);}
  header .btn-menu.on ~ .nav-wrap {right: 0; top: -1px;}
  header .btn-menu.on ~ .dim {display: block !important;}
  header .nav-wrap  {height: 100%; width: 320px; position: fixed; right: -320px; z-index: 10; transition: all .3s ease;}
  header .nav-wrap ul {height: 100% !important; overflow: auto; background: #272B34; z-index: 100;}
  header .nav-wrap ul.active {height: 100%;}
  header .nav-wrap ul + .box {display: none !important;}
  header .nav-wrap ul li a {padding: 0; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255, .2); }
  header .nav-wrap .menu {margin-right: 0; text-align: left;}
  header .nav-wrap .menu li {height: auto;}
  header .nav-wrap .menu li a {padding: .5rem 2rem; margin: 0; height: auto; line-height: auto;}
  header .nav-wrap .menu li a:hover {background: #e86534;}
  header .nav-wrap .menu li a.active {background: none; color: #e86534; border-radius: 0;}
  header .nav-wrap ul li {height: auto; position: relative; width: 100%; margin-right: 0;}
  header .nav-wrap ul li:nth-child(1) {margin-top: 50px;}
  header .nav-wrap ul li:hover > ul, .nav-wrap > ul > li.active > ul {height: auto; }
  header .nav-wrap ul li a {height: 50px; line-height: 50px; font-size: 18px; padding: 0 1.25rem; color: #151b26;}
  header .nav-wrap ul li a img {display: none;}
  header .nav-wrap .profile {position: absolute; bottom: 0; left: 0; border: 0; width: 100%; text-align: center; margin-left: 0; background-color: rgba(255,255,255, .1); height: 50px;}
  header .nav-wrap .profile p {line-height:50px; padding-left: 0;}
  header .nav-wrap .etc {padding-top: 0; margin: 0; width: 100%; position: absolute; right: 0; top: 0; text-align: left; border-bottom: 1px solid rgba(255,255,255 .3);}
  header .nav-wrap .search {margin: 2px 4px 0 14px;}  
  #wrap::before {height: 20px; line-height: 16px; font-size: 10px;}
  .contents {padding: 0 1.5rem;}
  .contents .dashboard-wrap .db-content > h3 {font-size: 1.6rem;}
  .gis-content  {height: calc(100% - 100px) !important;}
  .gis_wrap {min-height: 848px;}
}

@media screen and (max-width: 980px) {
  html, body, #wrap {height: auto;}
  #wrap {padding-bottom: 20px;}
  .contents {height: auto;}
  .contents .dashboard-wrap {display: block;}
  .contents .dashboard-wrap .db-content {width: 100%; height: auto; overflow: inherit;}
  .contents-title {margin-bottom: 16px;}
  .type-col2 .chart-wrap > h4, .type-col3 h4 {text-align: center;}
  .type-col2 .chart-wrap .result-content, .type-col3 .result-content {height: auto; min-height: 200px;}
  .map-content {padding: 0 0 5rem;}

  .population-statistics li {padding: 1rem 0 0; min-height: 200px;}
  .population-list li {padding: 0 0 1rem;}
  .population-list li .source {margin: .2rem .2rem 1rem;}
  .contents .tbl-basic th, .contents .tbl-basic td {padding: .5em;}
  .type-col2 .chart-wrap .customer > div,
  .type-col2-2 .chart-wrap .result-content {height: 200px;}
  .type-col2 .chart-wrap .customer .customer-con1 .tt2 {font-size: 2rem; padding-top: 0;}
  .db-content2-1 .result-content, .db-content2-2 .result-content {height: auto; min-height: 200px;}
  .db-content2-1 .chart-wrap > h4, .db-content2-2 .chart-wrap > h4 {height: auto; line-height: 1.6; margin-bottom: 4px;}
  .db-content2-1 .chart-wrap > h4 span, .db-content2-2 .chart-wrap > h4 span {font-size: .9rem;}
  .contents .dashboard-wrap2 .db-content3-1, .contents .dashboard-wrap2 .db-content3-2 {height: auto;}
  .contents .dashboard-wrap2 .db-content3-1 > div {flex: 1 1 32%; padding: 0; min-height: 150px;}
  .contents .dashboard-wrap2 .db-content3-1 > div .con .move-list p {display: inline-block;}
  .contents .dashboard-wrap2 .db-content3-1 > div .move-list {margin-top: .4rem;}
  .contents .dashboard-wrap2 .db-content3-1 > div .con {font-size: 1.6rem;}
  .contents .dashboard-wrap2 .db-content3-2 {flex-direction: column;}
  .contents .dashboard-wrap2 .db-content3-2 .result-content{height: auto; min-height: 200px; border-top: 0;}
  .tbl-search {height: auto;}
  .tbl-search > div {flex: 1 1 auto}
  .tbl-search > div:nth-child(1) {width: 100%;}

  .dashboard-search {height: auto; flex-flow: column wrap; gap: 8px;}
  .dashboard-search-con {text-align: center;}
  .search-typeA , .search-typeB {max-width: 1000px; width: 49.5%;}
  .table-wrap, .table-wrap2, .table-wrap3 {height: 400px;}
  .map_wrap > svg{margin-right: 12rem; margin-top: 0;}
  .map-level{top: 14.5rem;}
  .map-total {top: 25rem; bottom: auto;}
  .map-weather {top: 32rem;}
}


@media screen and (max-width: 680px) {
  .dashboard-search.search2 .search-typeA,  .dashboard-search.search2 .search-typeB {width: 100%; margin: 2px 0 ;}
  .contents .dashboard-wrap {height: auto;}
  .map-content .map_wrap {margin-bottom: 4rem; margin-top: 2rem;}
  .map_wrap > svg {margin-right: 8rem;}
}

@media screen and (max-width: 560px) {
  html, body {font-size: 14px;}
  .type-col2 .chart-wrap .customer {flex-direction: column;}
  .type-col2 .chart-wrap .customer > div {width: 100%; height: auto;}
  .contents .dashboard-wrap2 .db-content3-1 > div {flex: 1 1 calc(50% - 10px);}
  .basic-tab {flex-wrap: wrap; gap: .25rem; height: auto;}
  .basic-tab li {flex:0 1 calc(33% - .25rem);}
  
}

@media screen and (max-width: 480px) {
  html, body {font-size: 13px;}
  .population-statistics {flex-direction: column;}
  .population-statistics li {padding: 0 0 1rem; min-height:auto;}
  .environment-statistics {flex-direction: column;}
  .environment-statistics li {padding: 0 0 1rem; min-height:auto;}
}