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

/* S-CoreDream */
@font-face {
  font-family: 'S-CoreDream';
  font-weight: 200;
  src: local('S-CoreDream light'), local('scdream2'),
      url('../../../fonts/scdream2.woff2') format('woff2'),
      url('../../../fonts/scdream2.woff') format('woff');
  font-style: normal;
}
@font-face {
  font-family: 'S-CoreDream';
  font-weight: 400;
  src: local('S-CoreDream normal'), local('scdream4'),
      url('../../../fonts/scdream4.woff2') format('woff2'),
      url('../../../fonts/scdream4.woff') format('woff');
  font-style: normal;
}
@font-face {
  font-family: 'S-CoreDream';
  font-weight: 500;
  src: local('S-CoreDream normal'), local('scdream5'),
      url('../../../fonts/scdream5.woff2') format('woff2'),
      url('../../../fonts/scdream5.woff') format('woff');
  font-style: normal;
}
@font-face {
  font-family: 'S-CoreDream';
  font-weight: 600;
  src: local('S-CoreDream bold'), local('scdream6'),
      url('../../../fonts/scdream6.woff2') format('woff2'),
      url('../../../fonts/scdream6.woff') format('woff');
  font-style: normal;
}
@font-face {
  font-family: 'S-CoreDream';
  font-weight: 800;
  src: local('S-CoreDream heavy'), local('scdream8'),
      url('../../../fonts/scdream8.woff2') format('woff2'),
      url('../../../fonts/scdream8.woff') format('woff');
  font-style: normal;
}

/* 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;}
.mt10 {margin-top: 10px !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-green {color: #2ED4DF !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; height: 26px; flex: 1;}
select, .select {border: 0; background: url(../../../images/domain/SI24850002/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/SI24850002/ic-checkbox-off.svg) no-repeat center; background-size: 100% 100%;}
input[type=checkbox]:checked ~ label::before {background-image: url(../../../images/domain/SI24850002/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/SI24850002/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: 'Noto Sans KR';}
.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;}

/* text align */
.ta-r {text-align: right !important;}
.ta-l {text-align: left !important;}
.ta-c {text-align: center !important;}
/* button */
button {border: 0; background-color: transparent; letter-spacing: -.3px; padding: 0; cursor: pointer; opacity: 1;}
button:hover {transition: all .3s ease; opacity: .9;}
/* 기본 */
html, body {height: 100%; min-height: -webkit-fill-available; background: #133B4E; font-size: 16px;}
body {font-weight: 400; line-height: 1.2; font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;}
#wrap {height: 100%;position: relative;display: flex;overflow: auto;width: 100%;flex-direction: column; background: url(../../../images/domain/SI24850002/img_allbg.jpg) 0 100% no-repeat; background-size: cover;}

/* header */
header {background: rgba(0,0,0, .3);height: 100%;padding: 0 60px;text-align: left; position: relative;box-sizing: border-box;width: 100%;z-index: 2;height: 80px;}
header h1 {display: inline-block; width: 300px;}
header h1 a {line-height: 80px;}
header h1 a img {width: 24px; height: 48px; object-fit: cover; object-position: top; display: inline-block; margin: -4px 16px 0 0;}
header h1 a p {font-family: 'Noto Sans KR'; font-weight: 600; color: #fff; font-size: 1.5rem; display: inline-block; text-align: left; line-height: 1;}
header h1 a p span {display: none;}
/* header .nav-wrap {display: inline-block; width: calc(100% - 400px); text-align: right;} */
header .nav-wrap {display: inline-block; width: calc(100% - 310px); text-align: right;}
header .nav-wrap .menu {display: flex; flex-flow: row wrap; justify-content: flex-end;}
header .nav-wrap .menu li {}
header .nav-wrap .menu li a {font-family: 'S-CoreDream'; color: #fff; display: block; padding: 0 24px; font-weight: 600; font-size: 1.125rem; height: 80px; line-height: 80px; cursor: pointer; text-align: left; transition: all .2s ease-in-out;}
header .nav-wrap .menu li a:hover {background-color: #2ED4DF; color: #111;}
header .nav-wrap .menu li a.active {background-color: #2ED4DF; color: #111;}

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: #fff; 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 .header-etc {position: absolute; right: 60px; top: 24px; display: flex; flex-flow: row wrap; gap: 8px;}
header .btn-menu {width: 30px;height: 30px;background: url(../../../images/domain/SI24850002/btn_menu.png) no-repeat center;border: 0;z-index: 11; display: none;}
header .btn-login {width: 30px;height: 30px;background: url(../../../images/domain/SI24850002/btn_login.png) no-repeat center;border: 0;z-index: 11;}
header .btn-logout {width: 30px;height: 30px;background: url(../../../images/domain/SI24850002/btn_logout.png) no-repeat center;border: 0;z-index: 11;}
header .btn-join {width: 30px;height: 30px;background: url(../../../images/domain/SI24850002/btn_join.png) no-repeat center;border: 0;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;}

/* main */
.map-total {display: flex; gap: 20px; justify-content: center; margin-top: 20px;}
.map-total dl {margin-bottom: 10px; display: block;}
.map-total dt {display: block; background: #e9dd35; color: #111; height: 26px; line-height: 28px; border-radius: 4px; margin-bottom: 6px; font-family: 'S-CoreDream';}
.map-total dd {font-size: 1rem; font-weight: 300; color: #fff;}
.map-total dd strong {font-weight: 700;}
.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 {font-size: .8rem;border-radius: 5px; padding: 0 8px; width: fit-content; margin: 0 auto; display: flex; align-items: flex-start;
background-color: rgba(0, 0, 0, .5); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2);}
.map-level > p {color: rgba(255, 255, 255, .5); display: inline-block; padding: 10px 4px; line-height: 1; white-space: nowrap;}
.map-level ul {padding: 6px 4px 8px; text-align: left; display: inline-block;}
.map-level ul li {display: inline-block; padding: 2px 8px 0; color: rgba(255, 255, 255, .5);}
.map-level ul li > span {width: 16px; height: 8px; display: inline-block; margin: -3px 4px 0 0; vertical-align: middle; border: 1px solid rgba(196,247,249,.5);}
.map-level ul li:last-child {margin-bottom: 0;}
.map_wrap {width: 100%; max-width: 640px; margin: 0 auto auto; position: relative;}
.copyright {color: rgba(255,255,255, .3); font-size: 13px; text-align: center; font-weight: 300; margin-top: auto; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);}
.map-info {width: 260px; position: absolute; border-radius: 5px; overflow: hidden;; z-index: 1; background: #fff; box-shadow: 4px 4px 6px rgba(0,0,0,.2);}
.map-info h4 {height: 24px; line-height: 24px; text-align:left; background-color: #0051ac; color: #fff; padding: 0 4px; width: 100%; font-size: .8rem; box-sizing: border-box; display: block; font-weight: 600;}
.map-info h4 > a {float: right; margin-right: .25rem; margin-top: -2px;}
.map-info h4 img {filter: invert()}
.map-info td {background-color: #FFF !important; color: #333 !important; border-right: 1px solid #ededed !important;}
.map-info th {background-color: #ddd !important; border-right: 1px solid #ededed !important;}
.map-weather {width: 150px; height: 100px; display: flex; flex-flow: column wrap; font-size: .8rem; border-radius: 5px; margin: -8vw 0 50px auto;

  background-color: rgba(0, 0, 0, .35);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
}
.map-weather h4 {height: 24px; line-height: 24px; text-align:center; background-color: #0051ac; color: #fff; padding: 0; width: 100%; display: none;}
.map-weather-con {height: 100%; padding: 1rem; box-sizing: border-box;}

.main-search {height: 30px; display: flex; flex-flow: row wrap; padding: 0; gap: 0 4px; margin-bottom: 8px;}
.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: #e9dd35; color: #111;}
.main-tbl-info {height: 24px; display: flex; flex-flow: row; padding: 0; margin-bottom: 10px; gap: 0 4px; color: #fff;}
.main-tbl-info > select {width: 130px; 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: #dbe1e5; 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 {padding: 0 32px;height: calc(100% - 80px);box-sizing: border-box;position: relative;flex: 1;display: flex;flex-direction: column;min-height: 940px; width: 100%;z-index: 1;}
.contents-title {font-family: 'S-CoreDream'; height: 50px; line-height: 50px; color: #fff; font-size: 1.3rem; font-weight: 700; padding: 0 1rem; text-align: left; position: relative; margin-top: 20px;}
.contents-title .tt {font-size: 1.1em; position: relative; padding: 2px 0 0 20px;}
.contents-title .tt::before {position: absolute; left: 0; top: 18px; width: 14px; height: 14px; border-radius: 14px; border: 4px solid #017AC4; box-sizing: border-box; content:'';}
.contents-title .date {position: absolute; right: 32px; top: 0; font-size: 1rem; font-weight: 400; font-family: 'Noto Sans KR'; color: #fff;}
.contents .dashboard-wrap {display: flex;justify-content: space-between;flex-direction: row;gap: 1.5rem;align-items: flex-start; height: 100%; /*height: calc( 100% - 70px );*/ box-sizing: border-box;position: relative;z-index: 0;}
.contents .dashboard-wrap .db-content {flex: 1 1 32%; height: 100%; padding: 32px 0; box-sizing: border-box;}
.contents .dashboard-wrap .db-content > h3 {color: #fff; font-family: 'S-CoreDream'; font-weight: 700; font-size: 2.4rem; line-height: 1.2; transition: all .3s ease; margin-top: auto;}
.contents .dashboard-wrap .db-content > h3 > span {color: #2ED4DF;}
.contents .dashboard-wrap .db-content2-1 {flex: 1 1 59%;}
.contents .dashboard-wrap .db-content2-2 {flex: 1 1 39%;}
.content-source {position: absolute; bottom: 8px; left: 14px; color: rgba(255,255,255, .5); background-color: rgba(0,0,0,.3); font-size: 10px; z-index: 10; font-weight: 300;}


/* table */
.contents .tbl-basic {min-width: auto; height: 100%; font-size: .9rem; 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 .5em; color: #111; border-right: 1px solid rgba(0,0,0, .5); vertical-align: middle; background-color: #2ED4DF;}
.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, .7);  vertical-align: middle; background: transparent; font-size: .95em;}
.contents .tbl-basic tr:nth-child(even) td {background: rgba(255,255,255, .1)}
.contents .tbl-basic td a {color: rgba(255,255,255, .7);}
.contents .tbl-basic td a:hover {cursor: pointer; color: #fff;}
.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, .type-col2 .chart-wrap > h5 {font-size: 1.25rem; height: 60px; line-height: 60px; color: rgba(255,255,255,1); position: relative; padding: 0 16px; font-family: 'S-CoreDream'; font-weight: 600; border-top-left-radius: 8px; border-top-right-radius: 8px; text-align: left;}
.type-col2 .chart-wrap > h4 span {font-weight: 300; display: inline-block; margin: 0 0 0 6px; letter-spacing: -.5px; font-size: .8em;}
.type-col2 .chart-wrap > h4 small {font-size: .75rem; font-weight: 300; color: #fff; display: block; margin: 0 0 0 6px; float: right;}
.type-col2 .chart-wrap h5 small {font-size: .75rem; font-weight: 300; color: #fff; display: block; margin: 0 0 0 6px; float: right;}
.type-col2 .chart-wrap .result-content {height: 100%; font-size: .9rem; position: relative;}
.type-col2 .chart-wrap {height: 100%; border-radius: 16px;  background-color: rgba(0,0,0,.35); overflow: hidden; border: 1px solid rgba(255,255,255, .2);}
.type-col2 .chart-wrap.population1 {height: 30%; min-height: fit-content;}
.type-col2 .chart-wrap.population2 {height: 70%;}

.population1 .result-content {display: flex; flex-direction: row; position: relative;}
.population1 .result-content > div { flex: 1 1 50%; padding: 0; box-sizing: border-box;}
.type-col2 .chart-wrap .source {font-size: 11px; color: rgba(255,255,255, .4); font-weight: 300; padding: 0 8px; box-sizing: border-box; height: 20px; line-height: 14px; letter-spacing: .05em; font-family: 'Noto Sans KR'; text-indent: 8px;}
.type-col2 .chart-wrap.economy1 {height: 22%; border-radius: 16px; overflow: hidden;}
.type-col2 .chart-wrap.economy1 .result-content {height: calc(100% - 65px);}
.type-col2 .chart-wrap.economy2 {height: 78%; border-radius: 16px; overflow: hidden;}
.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: #111; font-family: 'Noto Sans KR'; gap: 0; border-radius: 8px;  background-color: rgba(0, 0, 0, .35); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2);}
.type-col3 h4 {font-size: 1.25rem; height: 60px; line-height: 60px; color: rgba(255, 255, 255, 1); position: relative; padding: 0 16px; font-family: 'S-CoreDream'; font-weight: 600; text-align: left;}
.type-col3 h4 span {font-weight: 400; color: rgba(255,255,255,.7); font-size: 1rem; letter-spacing: -.05em;}
.type-col3 h4 small {font-size: .7rem; font-weight: 300; color: #fff; display: block; margin: 0 0 0 6px; float: right;}


.type-col3 .chart-wrap h5 {font-size: 1rem; height: 40px; line-height: 40px;  color: rgba(255,255,255,1); position: relative; padding: 0 16px 0 24px; color: #fff; font-family: 'Noto Sans KR'; font-weight: 600;}
.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: .75rem; font-weight: 300; color: #fff; 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 #2ED4DF; content:''; position: absolute; left: 12px; top: 16px; box-sizing: border-box;}
.type-col3 .chart-wrap .source {font-size: .8rem; color: #999; font-weight: 300; padding: 0 8px; box-sizing: border-box; height: 20px; line-height: 20px; letter-spacing: -.05em; font-family: 'Noto Sans KR';}
.type-col3 .chart-wrap {flex: 1 1 calc(33% - 20px); padding: 0; font-size: .9rem; box-sizing: border-box;}
.type-col3 .result-content {height: calc(100% - 60px); padding: 5px 16px 24px; position: relative;}

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

.type-col3 .tab-result-content {height: calc(100% - 100px); margin-bottom: 4px; margin-top: 4px;}
.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; flex-direction: column; display: flex; flex: 1 1 50% !important;}
.map-content .map-tt {font-family: 'Noto Sans KR' ; 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 > h3 {margin-top: 1rem !important;}
.img-map {width: 100%; max-width: 600px; display: block; margin: 0 auto;}
.map-con-subject {margin: 1rem auto; font-family: 'Noto Sans KR'; font-size: 1rem; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 98%;}
.map-con-subject li { display: inline-block; margin: 0; border-radius: 20px; overflow: hidden; background-color: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); background-color: #005c63;}
.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, .map-con-subject li.active a {background: #e9dd35; color: #111; font-weight: 700;}
.map-con-label {display: inline-block; margin: 1em auto 0; font-size: 0; position: relative; padding: 1rem 2.5rem; background-color: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px;}



.map-con-label li {width: 30px; height: 10px; display: inline-block;border: 1px solid rgba(196,247,249,.8); border-right: 0;}
.map-con-label li:last-child {border-right: 1px solid rgba(196,247,249,.8) !important;}
.map-con-label::before {content:'낮음'; position: absolute; width: 30px; height: 20px; top: 14px; left: 10px; font-size: 11px; text-align: left; color: rgba(255, 255, 255, .5);}
.map-con-label::after {content:'높음'; position: absolute; width: 30px; height: 20px; top: 14px; right: 10px; font-size: 11px; text-align: right; color: rgba(255, 255, 255, .5);}

/* 인구현황/경제현황 */
.population-statistics {display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: 1px; height: 100%; width: 100%; margin: 0 auto; background: transparent; gap: 10px;}
.population-statistics li {flex: 1 1 100%; margin: 0; text-align: center;box-sizing: border-box; font-size: 1rem; transition: all .3s ease-in-out; vertical-align: top; background: rgba(255,255,255,.05); border-radius: 8px; display: flex; flex-direction: column; justify-content: center;}
.population-statistics .img {display: block; margin: 1rem auto .5rem}
.population-statistics .tt1 {text-align: center ; padding: 0; color: #fff; line-height: 1.4; font-weight: 600; font-size: 1rem;}
.population-statistics .tt1::before {display: none ;}
.population-statistics .con {font-size: 1.3rem; font-family: 'Noto Sans KR'; font-weight: 800; color: #fff; letter-spacing: -1px; margin:.2rem 0;}
.population-statistics .unit {display: inline-block; margin: .2rem; font-size: .8rem; color: #fff; line-height: 1.5;}
.population-statistics .date {display: inline-block; margin: .2rem; font-size: .8rem; color: #fff; margin: 10px 0 auto;}
.population-statistics .source {display: block; margin: .2rem; font-size: .7rem; color: #fff;}
.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/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/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; height: 100%; gap: 10px; background: transparent; overflow: hidden;}
.population-list li {flex: 1 1 48%; margin: 0; display: inline-block; vertical-align: top; text-align: center; color: #fff; background: rgba(255,255,255,.05); font-size: 1rem; display: flex; flex-direction: column; border-radius: 8px; justify-content: center;}
.population-list li .tt1 {font-size: 1rem; line-height: 1.4; color: #fff; position: relative; padding: 0 16px; font-family: 'Noto Sans KR'; font-weight: 600;}
.population-list li .tt1 small {font-size: .8rem; display: block; margin-left: 0; letter-spacing: -.5px; float: none; opacity: .8;}
.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: 'Noto Sans KR'; font-weight: 800; margin: .5rem 0; line-height: 1; color: #fa9d3c;}
.population-list li .con small {font-size: .8rem; font-weight: 500; display: inline-block; margin-left: 5px; opacity: .7;}
.population-list li .con2 {font-size: 1.1rem; font-family: 'Noto Sans KR'; font-weight: 300; margin: 0; line-height: 1.4;}
.population-list li .unit {display: inline-block; margin: 0 .3rem; color: #fff;}
.population-list li .date {display: inline-block; margin: 0 .3rem; color: #fff;}
.population-list li .source {display: block; margin: .2rem 0 0; font-size: .75rem; color: #999; font-weight: 300; letter-spacing: -.05em;}
.population-list li div {margin: .5rem 0 0; color: #aaa; font-size: .8rem;}


/* 기상현황/환경지표 */
.type-col2 .chart-wrap.environment1 {height: 40%;}
.type-col2 .chart-wrap.environment2 {height: 60%;}
.environment-list {display: flex; flex-flow: row wrap; gap: 10px; height: 100%; background: transparent;}
.environment-list li {flex: 1 0 calc(33% - 1.5rem); background: rgba(255, 255, 255, .05); text-align: center; display: flex; flex-direction: column; align-items: center; padding: 10px; box-sizing: border-box; border-radius: 8px;}
.environment-list li .img {margin: auto 0 -7px; width: 40px;}
.environment-list li .tt1 {color: #fff; padding: 0.5rem; font-size: 1rem; font-weight: 600; height: 20px; line-height: 20px; margin-top: 6px;}
.environment-list li .con {color: #fa9d3c; font-size: 1.5rem; font-family: 'Noto Sans KR'; font-weight: 800; letter-spacing: -1px; margin: 0 0 auto 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: #fa9d3c; font-weight: 300; font-size: .9rem;}

.environment-list2 {display: flex; flex-flow: row wrap; gap: 10px; height: 100%; background: transparent;}
.environment-list2 li {background: rgba(255, 255, 255, .05); font-size: .9rem; text-align: left; display: flex; flex-direction: row; align-items: center; padding: 10px 24px; box-sizing: border-box; border-radius: 8px; width: 100%; gap: 2rem}
.environment-list2 li .img {margin: 0; width: 70px;}
.environment-list2 li .env-con {text-align: center; display: flex; flex-direction: column; align-items: flex-start;}
.environment-list2 li .tt {color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.4;}
.environment-list2 li .con {color: #fff; font-size: .9em; font-weight: 400; line-height: 1.4;}
.environment-list2 li .re {color: #fa9d3c; font-size: 1.5em; font-family: 'Noto Sans KR'; font-weight: 800; letter-spacing: 0; display: block; margin: .3rem 0 .5rem;}
.environment-list2 li .date, .environment-list2 li .unit {font-size: .75em; font-weight: 300; color: #fff;}
/* 민원 & 챗봇상담 */
.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: 'Noto Sans KR'; 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: 'Noto Sans KR'; 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% - 60px); font-size: .9rem; padding: 0 16px 24px;}
.type-col2 .chart-wrap.complaint1 {height: 30%;}
.type-col2 .chart-wrap.complaint2 {height: 70%;}
.type-col2 .tab-result-content {height: calc(100% - 86px) !important;}
.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: 40px; line-height: 40px;  font-family: 'Noto Sans KR'; 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: 'Noto Sans KR';}
.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: 'Noto Sans KR';}

/* 키워드별 상세민원 */
.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;}
.table-wrap2 {width: 100%; height: 215px; margin: 0; overflow-y: auto;}
.table-wrap3 {width: 100%; height: calc(100% - 34px); margin: 0; overflow-y: auto;}
.contents .dashboard-wrap .db-content.m4 {flex: 0 auto; width: 32%;}
/* 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: #fa9d3c; }
.paging .active, .paging .active:hover { font-weight:800; color:#fa9d3c;}
.paging img { vertical-align: middle; margin-top: -4px}
.paging li.img a {border-color: rgba(255,255,255, .5)}

/* 충북지표 */
.contents .dashboard-wrap2 {flex-direction: column; height: calc( 100% - 32px );}
.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: 20px; padding: 35px 0 0; flex: 0 0 240px;}
.contents .dashboard-wrap2 .db-content3-1 > div {flex: 1 1 0; margin: 0; height: 100%; text-align: center; color: #fff; box-shadow: 2px 2px 4px rgba(0,0,0,.1); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; background-color: rgba(0, 0, 0, .35); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); position: relative;}
.contents .dashboard-wrap2 .db-content3-1 > div .img {margin: 1rem 0 .5rem; width: 50px;}
.contents .dashboard-wrap2 .db-content3-1 > div .tt1 {color: #fff; padding: .5rem; font-size: 1rem; font-weight: 600; min-height: 20px; line-height: 1.2;}
.contents .dashboard-wrap2 .db-content3-1 > div .con {color: #2ED4DF; font-size: 2rem; font-family: 'Noto Sans KR'; 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: #fff; 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; gap: 20px; padding: 0;}
.contents .dashboard-wrap2 .db-content3-2 > div {flex: 1;}
.contents .dashboard-wrap2 .db-content3-2 .result-content {height: calc( 100% - 60px); padding: 0 16px 16px;}
.contents .dashboard-wrap2 .db-content3-2 .result-content .chart {height: calc( 100% - 46px); margin-top: 10px; min-height: 180px;}
.contents .dashboard-wrap2 .db-content3-2 .result-content .basic-tab {padding: 0; width: 100%;}
.contents .dashboard-wrap2 .db-content .tt1 {color: #fff; font-family: 'Noto Sans KR'; 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: 'Noto Sans KR'; 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: 1rem; font-weight: 600; font-family: 'S-CoreDream'; color: #fff; line-height: 30px; height: 30px;}
.contents .dashboard-wrap2 .db-content .tt2 {font-size: 1rem; height: 40px; line-height: 40px; color: #fff; position: relative; padding: 0 5px 0 5px; font-family: 'Noto Sans KR'; font-weight: 600; letter-spacing: -.05em;}
.contents .dashboard-wrap2 .db-content .tt2 small {font-size: .75rem; font-weight: 300; display: block; margin: 0 0 0 6px; float: right;}
.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: 'Noto Sans KR';}
.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;}
.basic-tab {display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: 0; width: calc(100% - 32px); height: 26px; line-height: 26px; flex-wrap: wrap; gap: 4px; padding: 0 16px;} 
.basic-tab li {flex: 1; font-size: .865rem; text-align: center; background: transparent; /* mix-blend-mode: multiply;*/}
.basic-tab li:last-child {border-right: 0;}
.basic-tab li a {color: #fff; font-family: 'Noto Sans KR'; font-weight: 400; display: block; width: 100%; padding: 0; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; box-sizing: border-box; border:1px solid rgba(255,255,255, .3); transition: all .2s ease-in-out;}
.basic-tab li.active a {position: relative; font-weight: 500; }
.basic-tab li.active a, .basic-tab li.active a:hover, .basic-tab li a:active {color: #fff;background-color: transparent;}
.basic-tab li.active a,.basic-tab li a:hover  {background-color: #2ED4DF; border-color:#2ED4DF; color: #111;}


/* 블로그 검색 */
.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; align-items: baseline;}
.dashboard-search.search2 {padding: 12px 1.5rem !important;}
.dashboard-search .basic-tab {flex: 1; padding: 0; width: 100%;}
.dashboard-search .basic-tab li a {color: #fff;}
.dashboard-search .basic-tab li.active a {color: #111;}
.dashboard-search .basic-tab li a:hover {background-color: #2ED4DF; border-color:#2ED4DF; color: #111;}

.dashboard-search-con {flex: 1; text-align: right; vertical-align: middle; height: calc( 100% - 120px ) !important;}
.search_checklist {height: 30px; line-height: 28px; width: calc(100% - 100px); cursor: pointer; font-size: .9rem; float: left; background-color: transparent; font-weight: 300; border: 1px solid rgba(255, 255, 255, .2);}
.search_checklist p {display: block;width: 100%; height: 100%; padding: 0 .5rem; text-align: left; box-sizing: border-box;  overflow: hidden; border: 0;color: #fff; background-image: url(../../../images/domain/SI24850002/btn_more.png); background-size: 12px auto; background-color: transparent; background-position: calc(100% - .5rem) 50% ; background-repeat: no-repeat; }
.search_checklist .checklist {display: none; opacity: 0; visibility: hidden; z-index: 6; position: relative; background-color: #fff;color: #333; border-top: 0; padding: .5rem; transition:  all .2s ease; height: 100px; overflow-y: auto; text-align: left; border: 1px solid #abd0d5;}
.search_checklist .checklist li {display: flex; justify-content: space-between; line-height: 1.5; padding: 0 .5rem;}
.search_checklist .checklist li:hover {background: #f6f7f8;}
.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); min-width: fit-content; float: left; height: 30px; line-height: 28px; font-weight: 400; background-color: transparent; border: 1px solid rgba(255, 255, 255, .2); border-right: 0;}
.search-typeB {width:45%;max-width: 300px;  display: inline-block;}
.search-typeA button, .search-typeB button {width: 100px; background-color: #e9dd35; height: 30px; line-height: 26px;}


.type-keyword {height: 100%; border-radius: 8px;  background-color: #fff; overflow: hidden;}
.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: .96rem; height: 40px; line-height: 40px;  color: rgba(255, 255, 255, 1); position: relative; padding: 0 16px 0 24px; background: linear-gradient(90deg, #5CB531, #0079C4); font-family: 'S-CoreDream'; font-weight: 600; border-top-left-radius: 8px; border-top-right-radius: 8px; text-align: left;} 
.type-keyword h4::before {width: 8px; height: 8px; border-radius: 8px; border: 2px solid #fff; content: ''; position: absolute; left: 10px; top: 12px; box-sizing: border-box;}
.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: 4px; height: 100%;}
.complaints-wrap li {flex: 0 0 calc(50% - .25rem); background-color: rgba(255, 255, 255, .2); color: #fff; border-radius: 4px; text-align: center; transition: all .3s ease; overflow: hidden;}
.complaints-wrap li a {width: 100%; height: 100%;cursor: pointer; display: block; padding :0; font-weight: 500; font-family: 'S-CoreDream'; font-size: .9rem; box-sizing: border-box; color: #fff; align-items: center; justify-content: center; display: flex;}
.complaints-wrap li:hover a {background: #e9dd35; color: #111; font-weight: 700;}

/* gis */
.toggleSwitch {width: 32px; margin: -2px 4px 0 0; height: 16px; display: inline-block; position: relative; border-radius: 30px; background-color: #b9cbd0; 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: #fff;}
.toggleSwitch.active {background: #0051ac;}
.toggleSwitch.active .toggleButton {left: calc(100% - 14px); background: #fff !important; }
.toggleSwitch, .toggleButton {transition: all 0.2s ease-in;}

.gis-content {overflow: auto;padding: 0; height:calc(100% - 80px)}
.gis_wrap {height: calc(100% - 50px); min-height: 700px; width: 100%; overflow: hidden; position: relative; overflow-x: auto; min-width: 1100px; margin: 0 ; background: #666;}
.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; border-radius: 5px; }

.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;}
.info-list-cont .legend.legend3 li span {width: 18px; height: 18px; border-radius: 50%; border: 0;margin-bottom: .3rem;}
.info-list-cont .legend.legend3 li span img {width: 18px; height: 18px;}
.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; box-shadow: 2px 2px 4px rgba(0,0,0,.1); border: 1px solid #333; border-radius: 5px;}
.search-p-wrap input[type="text"] {color: #111;}
.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: #0051ac; 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: #fff; font-size: 13px !important; float: left; font-weight: 400 !important; background-color: #fff !important; border-radius: 5px !important;}
.btn-p-input::placeholder {font-size: 13px; color: #999;}
.btn-p-search {background: url(../../../images/domain/SI24850002/ico_search_p.png) no-repeat center #0051ac; 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: 60px; 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: #fff;}
.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; border-radius: 5px; box-shadow: 2px 2px 4px rgba(0,0,0,.1);}
.data-list-head {height: 30px; color: #fff; background: #0051ac; 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/SI24850002/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/SI24850002/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; border: 1px solid #333; border-radius: 5px; overflow: hidden; z-index: 3; background: #fff;  font-size: 12px;}
.info-list-wrap.sm {height: 130px;}
.info-list-head {height: 24px; line-height: 24px; text-align: left; background-color: #fff; color: #111; padding: 5px 10px; width: 100%; font-size: .8rem; box-sizing: border-box; display: block; font-weight: 600;}
.info-list-handle {position: absolute; top: 0px; right: 0px; border: 0; background: url(../../../images/domain/SI24850002/btn_b_tab_close1.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: #000; color: #fff;}
.info-list-cont.cctv43 {padding:0; width: 100%; height: auto; padding-bottom: 75%; overflow-x: hidden; overflow-y: auto; background-color: #000; color: #fff;}
ul.checktree ul {margin: 0 -10px; background: #f2f5f9; padding: 0 10px 0; text-align: left;}
ul.checktree li {color: #fff; 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/SI24850002/tree1.png);}
ul.checktree > li::before {background-image: url(../../../images/domain/SI24850002/tree5.png);}
ul.checktree > li li {color: #6283b7; font-size: 12px;}
ul.checktree > li li::before {width: 24px; background-image: url(../../../images/domain/SI24850002/tree2.png);}
ul.checktree > li:last-child::before {width: 15px; background-image: url(../../../images/domain/SI24850002/tree4.png);}
ul.checktree > li li:last-child::before {width: 24px; background-image: url(../../../images/domain/SI24850002/tree3.png);}
ul.checktree > li:last-child li::before {width: 24px; background-image: url(../../../images/domain/SI24850002/tree6.png);}
ul.checktree > li:last-child li:last-child::before {width: 24px; background-image: url(../../../images/domain/SI24850002/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/SI24850002/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/SI24850002/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 (max-width: 1600px) {
.map-content {flex: 1 1 32% !important;}
.type-col3 h4, .type-col2 .chart-wrap h5, .type-col2 .chart-wrap > h4, .population-statistics .tt1 {font-size: 1.125rem;}
.type-col3 h4 small,.type-col2 .chart-wrap h5 small, .type-col2 .chart-wrap > h4 small {position: absolute; left: .7rem; bottom: 6px; line-height: 1; opacity: .6; font-size: .6rem;}
.population-list li .tt1 small {position: relative; left: auto; bottom: auto; }
.environment-list li .tt1, .environment-list2 li .tt {font-size: 13px;}
.environment-list2 li {gap: 1rem; font-size: .9rem;}
.environment-list2 li .img {width: 60px;}
.environment-list2 li .env-con {text-align: left;}
.contents .dashboard-wrap .db-content > h3 {font-size: 2rem;}
}
@media screen and (max-width: 1400px) {
 
  html, body {font-size: 15px;}
  header {width: 100%; height: 80px; left: 0; top: 0; padding: 0;}
  header h1 {padding: 0 0 0 16px; border-bottom: 0;}
  header h1 a {line-height: 80px;}

  .dim {content: ''; position: fixed; top: 0; right: 16px; width: 100%; height: 100%; background: rgba(0,0,0,.4); backdrop-filter: blur(10px); z-index: 9; opacity: 0; visibility: hidden; transition: all .3s ease; pointer-events: none;}
  header .header-etc {right: 16px; top: 24px;}
  header .btn-menu {display: inline-block; position: relative;}
  header .btn-menu.on {background-image: url(../../../images/domain/SI24850002/btn_menu_close.png);}
  header .nav-wrap {height: 100%;width: 280px;position: fixed;right: -280px;top: 0;z-index: 10;transition: all .3s ease; background: #e4f3fb;}
  header .nav-wrap.active {right: 0;}
  .dim.active {opacity: 1; visibility: visible;}
  header .nav-wrap ul {height: 100% !important; overflow: auto; background: #e4f3fb; 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;display: block; background: #2ED4DF;}
  header .nav-wrap .menu li {height: auto;}
  header .nav-wrap .menu li a {padding: 0 1rem; margin: 0; height: auto; color: #fff;}
  header .nav-wrap .menu li a:hover {color: #fff;}
  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 .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;}  
  header .nav-wrap .menu li a img {filter: brightness(1.6) saturate(0.3) hue-rotate(20deg);}
  header .nav-wrap .menu li a:hover img {filter: none;}
  header .nav-wrap .menu li a.active {background: #fff; color: #017AC4; border-top-left-radius: 34px; border-bottom-left-radius: 34px;}
  header h1 a p span {display: inline;}
  .environment-list2 li {font-size: 1rem;}

/*  .contents .dashboard-wrap {flex-wrap: wrap; height: auto !important;}*/
  
  .copyright {position: static; width: 100%; text-align: center; padding-bottom: 1rem; transform: none; font-size: 11px;}

  .map-weather {margin-top: -9vw;}
  .contents .dashboard-wrap2 .db-content3-1 > div {flex: 1 1 30%; height: auto; padding-bottom: .5rem;}
  .gis-content {padding: 0 !important;}
/*  .population-statistics li {padding: 1rem 0 0; min-height: 210px;}*/
  .population-list li {padding: 1rem 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; flex: 0 !important;}
  .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; margin: 0 !important;}
  .contents .dashboard-wrap2 .db-content3-2 .result-content{height: auto; min-height: 220px; border-top: 0;}
  .tbl-search {height: auto;}
  .tbl-search > div {flex: 1 1 auto}
  .tbl-search > div:nth-child(1) {width: 100%;}
  .contents .dashboard-wrap2 {padding-bottom: 35px;}
  .dashboard-search {flex-direction: column; gap: 10px; height: auto;}
  .dashboard-search-con {display: flex; gap: 10px; width: 100%;}
  .search-typeA, .search-typeB {max-width: none; width: 50%;}


  .dashboard-wrap .dashboard-search-con {flex-direction: column;}
  
  .contents .dashboard-wrap .db-content.m3 {width: 100%;}
  .contents .dashboard-wrap .db-content.m4 {width: 100%;}
  .contents .dashboard-wrap.dashboard-search-con .db-content.m4 {width: 32%;}


}
@media screen and (max-width: 1200px) {
  
  
  .contents {padding: 0 20px;}
  .contents .dashboard-wrap {gap: 1rem}
  .contents .dashboard-wrap .db-content {flex: 0 0 100%; padding: 1rem 0;height: 100vh;}  
  .contents .dashboard-wrap .db-content.map-content {height: auto; padding: 3rem 0 0;}  
  .map-total {margin-bottom: 0;}
  .dashboard-search-con {flex-direction: column; margin-bottom: 15px;}
  .search-typeA, .search-typeB {width: 100%;}
  .main-tbl-info {flex-direction: column; height: auto; gap: 8px;}
  .main-tbl-info > select, .main-tbl-info > input {width: 100%; height: 30px;}
  .contents .dashboard-wrap2 .db-content3-1 > div {flex: 1 1 40%;}
  .environment-list li .con,.environment-list2 li .re {font-size: 1.2rem;}
  .population-statistics .tt1 br {display: none;}
  .environment-list2 li {flex: 1; padding: 24px 8px; gap: 1rem; align-items: stretch;}
  .environment-list2 li .env-con {word-break: keep-all; }
  .environment-list2 li .img {width: 50px;}
  .contents .dashboard-wrap .db-content.m4 {margin-top: 0;}

  .contents .dashboard-wrap {flex-wrap: wrap; height: auto !important;}
  .contents .dashboard-wrap .db-content {height: auto !important;}
  
  .contents .dashboard-wrap .db-content:nth-last-of-type(1) {padding-top: 0; margin-top: -10px;}
  .type-col2, .type-col3 {height: auto !important;}
    
  .type-col2 .chart-wrap, .type-col3 .chart-wrap {min-height: 200px !important;}
  .type-col2 .chart-wrap.environment1,.type-col2 .chart-wrap.environment2 {height: auto;}
  .type-col2 .result-content , .type-col3 .result-content {min-height: 120px;}
  
  .contents .dashboard-wrap .db-content.m2 {margin-top: -30px;}
  .contents .dashboard-wrap .db-content.m4 { margin-top: -30px;}
  .contents .dashboard-wrap.dashboard-search-con .db-content {height: auto !important;}
  .contents .dashboard-wrap.dashboard-search-con .db-content.m4 {margin-top: 0;}
  
  .dashboard-search-con .type-col2 {height: 600px;}
  .contents .dashboard-wrap.dashboard-search-con .db-content.m4 {width: 100%;}
  .map-con-label {margin: 0 auto;}
  .chart-wrap.customer, .chart-wrap.customer .result-content {min-height: auto !important;}
  
  .complaints-wrap li a{padding: .6rem 0; font-size: .8rem;}
}
@media screen and (max-width: 640px) {

  header {height: 50px;}
  header h1 a {line-height: 50px;}
  header h1 a p {font-size: 1.1rem;}
  header h1 a img {width: 16px; margin: -6px 8px 0 0; height: 30px; object-fit: cover; object-position: top;}
  header .header-etc {right: 8px; top: 10px; gap: 0;}
  header .btn-menu, header .btn-login, header .btn-logout, header .btn-join {width: 30px;height: 30px;}
  header .nav-wrap .menu li a {line-height: 60px; font-size: 1.1rem;}
  #wrap::before {height: 20px; line-height: 16px; font-size: 10px;}
  .contents {padding: 0 15px 16px; margin-left: 0;}
  .contents .dashboard-wrap .db-content > h3 {font-size: 1.6rem;}
  .gis-content  {height: 100%;}
  .gis_wrap {min-height: 848px;}
  .contents-title {padding: 0 .8rem;}
  .contents-title .tt {font-size: 16px;}
  .contents-title .date {right: .8rem; font-size: 13px;}
  .type-col2 .chart-wrap > h4, .type-col2 .chart-wrap > h5, .type-col3 h4 {font-size: 14px;}
  .type-col3 h5 {font-size: 13px;}
  .dashboard-search.search2 {padding: 12px 1rem 0 !important;}
  .population-statistics {flex-direction: column;}
  .population-statistics li {padding: 1rem 0; min-height: auto;}
  .population-statistics .tt1 {padding: 0 0 1rem 0;}
  .contents .dashboard-wrap {gap: .5rem;}
  .contents .dashboard-wrap .db-content {padding-top: 1.5rem;}
  .contents .dashboard-wrap2 .db-content3-1 > div .con {font-size: 1.3rem;}
  .contents .dashboard-wrap2 .db-content3-1 > div .tt1 {font-size: .9rem;}
  .contents .dashboard-wrap2 .db-content3-1 {gap: 10px;}
  .basic-tab li {flex: 1 1 20%;}
  .environment-list2 {flex-flow: column wrap;}
  .environment-list2 li {flex-direction: column; }
  .environment-list2 li .img {margin: 0 auto; }
  .environment-list2 li .env-con {align-items: center;text-align: center;}
  .environment-list2 li .re {margin: .5rem auto;}
  .environment-list2 li .env-con > div {margin: 0 auto; opacity: .8;}
  .environment-list li {flex: 1 0 calc(50% - 1.5rem);}
  .environment-list li .img, .environment-list2 li .img {width: 30px;}
}

/* 다크모드 */
@media (prefers-color-scheme: dark) {
  html {background: #1F3A53;}
  body {background: linear-gradient(#28659D, #1F3A53);}
  header {background: rgba(0, 0, 0, .5);}
  header .nav-wrap .menu li a.active img {filter: brightness(5) hue-rotate(250deg) saturate(2);}
  header .nav-wrap .menu li a.active {background: #215B91;  color: #DAE000;}
  .type-col2 .chart-wrap, .contents-title {background-color: rgba(0, 0, 0, .5) !important; border-color: rgba(255,255,255,.15); color: #fff;}
  .population-statistics {background-color: transparent; gap: 0;}
  .population-statistics li {background-color: transparent; border-right: 1px solid rgba(255,255,255,.2);}
  .population-statistics li:last-child {border-right: none;}
  .population-statistics .tt1 {color: #fff;}
  .population-statistics .unit {color: #fff;}
  .population-statistics li.up .con {color: #63b3ff;}
  .population-statistics li.down .con {color: #fd5d7b;}
  .contents-title .tt::before {border: 4px solid #DAE000;}
  .contents-title .date {color: rgba(255,255,255,.6);}
  .complaints-wrap li {background-color: rgba(153, 224, 1, 0.4); opacity: 1;}
  .complaints-wrap li:hover {background-color: rgba(153, 224, 1, 1);}
  .complaints-wrap li a {color: #fff;}
  .basic-tab {align-items: flex-end; margin-top: 5px;}
  .basic-tab li {background: #017ac4; mix-blend-mode: normal;}
  .basic-tab li a {color: #fff;}
  .basic-tab li.active a {background-color: #6FBA2C; color: #fff; border: none; border-top: 4px solid #ffcf00;}
  .main-tbl-info > select, input[type=text], input[type=number], input[type=password], input[type=search], input[type=tel] {background-color: rgba(255, 255, 255, .3); border: 1px solid rgba(255, 255, 255, .2); color: #fff; mix-blend-mode: plus-lighter;}
  input::placeholder {color: rgba(255,255,255,.3);}
  .table-wrap3 {background-color: transparent;}
  .contents .tbl-basic td {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .3); border-right: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1);}
  .contents .tbl-basic tr:nth-child(even) td {background: rgba(255,255,255,.2);}
  .contents .tbl-basic td a {color: rgba(255,255,255,1)}
  .population-list, .population-list li {background: transparent;}
  .population-list {gap: 8px;}
  .population-list li .tt1 {color: #fff;}
  .population-list li .unit, .population-list li .date {color: rgba(255,255,255,.7);}
  .population-list li {border: 1px solid rgba(255,255,255,.2);}
  .contents .dashboard-wrap .db-content > h3 {color: #fff;}
  .type-col3 {background-color: rgba(0, 0, 0, .5);}
  .type-col3 .chart-wrap h5 {color: #fff;}
  .type-col3 .chart-wrap h5::before {border: 2px solid #fff;}
  .type-col3 .chart-wrap {border-bottom: 1px solid rgba(255, 255, 255, .2);}
  .type-col3 .chart-wrap:last-of-type {border-bottom: none;}
  .table-wrap {background-color: transparent;}
  .main-search button {background-color: #555;}
  .dashboard-search .basic-tab li.active a {color: #fff;}
  .c-green {color: #DAE000 !important;}
  .map-con-subject li.active a {background: #DAE000; color: #fff;}
  .type-col2 .chart-wrap > h4, .type-col2 .chart-wrap > h5, .type-col3 h4 {background: linear-gradient(90deg, #DAE000, #5CB531); color: #1a2246 !important;}
  .type-col2 .chart-wrap h5 small {color: #1a2246; font-weight: 400;}
  .type-col2 .chart-wrap > h4::before, .type-col2 .chart-wrap > h5::before, .type-col3 h4::before {border-color: #1a2246;}
  .map-total dd {color: #fff;}
  header h1 a img {display: none;}
  header h1 a::before {content: ''; display: block; width: 72px; height: 72px; margin: 0 auto 8px; background: url(../../../images/domain/SI24850002/img_header_logo2.svg) no-repeat center / 100% 100%;}
  .population-list li .tt1 small {color: #fff !important;}
  .gis_wrap {background: rgba(255,255,255,.2);}
  .data-list-head {background: #14324d;}
  .environment-list {gap: 8px; background: transparent;}
  .environment-list li {border: 1px solid rgba(255,255,255,.2); background: transparent;}
  .environment-list li .tt1 {color: #fff;}
  .contents .dashboard-wrap2 .db-content3-1 > div {background-color: rgba(0, 0, 0, .5); counter-reset: #fff;}
  .contents .dashboard-wrap2 .db-content3-1 > div .tt1, 
  .contents .dashboard-wrap2 .db-content3-1 > div .move-list p span {color: #fff;}
  .contents .dashboard-wrap2 .db-content3-2 .result-content {background-color: rgba(0, 0, 0, .5);}
  .contents .dashboard-wrap2 .db-content .tt2 {background: transparent; color: #fff;}
  .contents .dashboard-wrap2 .db-content .tt2 small {color: #fff;}
  .basic-tab li a:hover {background: #0c8dde; color: #fff;}
  .basic-tab li.active a:hover {background-color: #6FBA2C; color: #fff;}
  .map_wrap text {filter: drop-shadow(1px 1px 0 rgba(255, 255, 255, 1)) drop-shadow(-1px -1px 0 rgba(255, 255, 255, 1)) drop-shadow(-1px 1px 0 rgba(255, 255, 255, 1)) drop-shadow(1px -1px 0 rgba(255, 255, 255, 1)); fill: #000;}
  
  @media screen and (max-width: 980px) {
    .dashboard-search {padding-top: 0;}
  }
  @media screen and (max-width: 640px) {
    .population-statistics li {border-bottom: 1px solid rgba(255, 255, 255, .2); border-right: none;}
    .population-statistics li:last-child {border-bottom: none;}
    header h1 a::before {width: 30px; margin: 0 8px 0 0; height: 30px;}
  }
}