﻿.bg-dashboard {background: #f2f4f4;}
.sub-dashboard-wrap {position: relative; overflow: auto; margin: 0; padding: 0; /*float: left;*/ font-size: 1rem;}
.dashboard-date {text-align: left; margin: -35px 0 25px; color: #202123; font-size: 1rem;}
.dashboard-cont-wrap {font-size: 0; margin: 8px 0; display: inline-block; width: 100%;}
.dashboard-item {overflow: hidden; border: 1px solid #ddd; background: #f4f4f4; margin: .45rem; display: inline-block; vertical-align: top; width: calc( 33.3% - .9rem ); box-sizing: border-box; float: left; height: 29.6rem; font-size: 1.1rem; transition: var(--transition-2) var(--transition-2)}
.dashboard-item:hover { /*box-shadow: 0.2em 0.2em 0.2em rgb(0 0 0 / 10%); border-color: #bbb*/}
.dashboard-item.ht1-1 {height: 32.3rem;}
.dashboard-item.ht1-2 {height: 32.3rem;}
.dashboard-item.ht1-3 {height: 32.3rem;}
.dashboard-item.ht1-4 {height: 29.6rem;}
.dashboard-item.ht1-5 {height: 29.6rem;}
.dashboard-item.map {margin-bottom: .5rem;}

.dash-header {background: var(--gray); height: 2.3em; line-height: 2.2em; padding: 0 .5em 0 .8em; font-size: 1em; position: relative;}
.dash-header h3 {color: #fff; font-weight: 400; float: left; font-family: var(--fonttype-2); letter-spacing: 0; font-size: .8em; margin-bottom: 0; word-break: keep-all;}
.dash-header h3 small {font-size: .9em; font-weight: 300; opacity: .7; font-family: var(--fonttype-1); margin-left: 4px; display: inline-block;}
.dash-header select {border: none; border-radius: 3px; height: 28px; font-size: .9rem; color: #202123; margin: 6px 0 0; background: url(../../../images/domain/SI67602841/ico_select_arrow.png) no-repeat calc( 100% - .5em) 50% #fff; font-weight: 300; padding-right: 2em; position: absolute; right: .6em; top: .05em;}
.dash-header-select2 {display: inline-block; position: relative !important; right: auto !important; top: auto !important; height: 25px !important; line-height: 25px !important; font-size: .7em !important; padding: 0 .6em !important; border-radius: .3em !important; margin:0 !important; font-weight: 300 !important; background:url(../../../images/domain/SI67602841/ico_select_arrow.png) no-repeat calc( 100% - .5em) 50% #fff; width: 100px;}
.dash-content {color: #202123; font-size: .85em; padding: 1em 1em; clear: both; font-weight: 300; text-align: center; height: calc( 100% - 3em ); position: relative;}
.dash-content.full {height: 100% !important;}
.dash-content.inhead {height: calc( 100% - 3em ) !important;}
.dash-map-wrap {height: 100%;}
.dash-map-wrap img, .dash-map-wrap svg {width: 100%; height: 100%; max-height: 100%;}
.btn-dash-down {display: inline-block; background: #202123; color: #fff; height: 25px; line-height: 25px; font-size: .7em; padding: 0 .6em; border-radius: .3em; margin: .6em 0 0 0; font-weight: 300; position: absolute; right: .6em; top: 0;}

.dash-header .tbl-btn-wrap {right: .6em; top: 0; margin: 0; position: absolute;}
.dash-header .tbl-btn-wrap p {display: inline-block; color: #fff; opacity: .7; font-size: .7em; line-height: 1; vertical-align: middle;}
.dash-header .tbl-btn-wrap .btn {display: inline-block; background: #202123; color: #fff; height: 25px; line-height: 25px; font-size: .7em; padding: 0 .6em; border-radius: .3em; margin:0; font-weight: 300;}

.dash-tit-wrap:after {content: ""; height: 0; display: block; visibility: hidden; clear: both;}
* html .dash-tit-wrap {height: 1%;}
.dash-tit-wrap {display: block; min-height: 1%; margin-bottom: .8em; position: relative; min-height: .7em; padding: 0 1em;}
.dash-tit-wrap h4 {color: #202123; font-weight: 500; font-size: .92rem; letter-spacing: -.08em; text-align: left; margin: 0 !important;}
.dash-tit-wrap p {font-weight: 300; position: absolute; right: .1em; top: .2em; font-size: .8rem; letter-spacing: -.08em; text-align: right;}
.dash-tit-wrap span {font-weight: 300; font-size: .8em;  letter-spacing: -.08em; text-align: left; color: #738291; display: block;}
.dash-chart-wrap {background: #fff; height: 20em; margin: 0 0 1.5em;}
.dash-chart-wrap.height2 {height: 13.8em;}
.dash-content .dash-chart-wrap:last-of-type {margin-bottom: 0;}
.dash-content canvas {height: 100%; width: 100%; background: #fff;}

.dash-chart-wrap.chart2 {background: transparent; height: 20em; margin: 0 0 1.5em; display: flex; flex-flow: row wrap; gap: 1em;}
.dash-chart-wrap.chart2 canvas {height: 100%; background: #fff;}
.dash-chart-wrap.chart2 canvas:nth-child(1) {width: calc(70% - .5rem)}
.dash-chart-wrap.chart2 canvas:nth-child(2) {width: calc(30% - .5rem)}

.sub-dashboard-wrap .satisfaction-wrap {background: rgba(255,255,255,.45); margin: 3em 0 0; padding: 1.5em; border: 1px solid #fff; box-sizing: border-box; border-radius: 5px;}
.dashboard-tab {border-bottom: 3px solid #085bb9; box-sizing: content-box; margin-bottom: 2em; margin-top: -2.7em; padding-right: 8em;}
.dashboard-tab ul {display: inline-block; height: 100%;}
.dashboard-tab ul li {display: inline-block; height: 100%; padding-top: .25em;}
.dashboard-tab ul li .ds-tab {display: inline-block; height: 100%; line-height: 2em; padding: 0 1.4em; border: 2px solid #085bb9; color: #085bb9; background: #fff; border-top-right-radius: 1em; border-top-left-radius: .2em; box-sizing: border-box; margin-bottom: -2px;}
.dashboard-tab ul li .ds-tab.active {background: #085bb9; color: #fff;}
.h100p {height: 100% !important;}

.dash-content .tab.list li a {color: #598fc7; background: #fff; border: 1px solid #598fc7;  box-sizing: border-box;}
.dash-content .tab.list li.active a {background: #598fc7; color: #fff;}
.dashboard-item.bg-blue {background: #edf5fc; border: 1px solid var(--gray);}
.dashboard-group2 {overflow: hidden; margin: 0 .45rem; display: inline-block; vertical-align: top; box-sizing: border-box; float: left; width: calc( 80% - .9rem );}

.dashboard-item.ht2-1 {height: 15rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-2 {height: 15rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-3 {height: 15rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-4 {height: 45.4rem; width: calc( 25% - .9rem ); float: right;}
.dashboard-item.ht2-5 {height: 29.6rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-6 {height: 29.6rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-7 {height: 29.6rem; width: calc( 25% - .9rem );}

.dashboard-item.ht3-1 {height: 15rem; width: calc( 50% - .9rem ); height: 20rem;}
.dashboard-item.ht3-2 {height: 15rem; width: calc( 50% - .9rem ); height: 20rem;}
.dashboard-item.ht3-3 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-4 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-5 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-6 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-7 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-8 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-9 {height: 21rem; width: calc( 50% - .9rem );}
.dashboard-item.ht3-10 {height: 21rem; width: calc( 50% - .9rem );}

.dashboard-item.ht4-1 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-2 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-3 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-4 {height: 23.5rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-5 {height: 23.5rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-6 {height: 23.5rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-7 {height: 20rem; width: calc( 25% - .9rem );}
.dashboard-item.ht4-8 {height: 20rem; width: calc( 25% - .9rem );}
.dashboard-item.ht4-9 {height: 20rem; width: calc( 25% - .9rem );}
.dashboard-item.ht4-10 {height: 20rem; width: calc( 25% - .9rem );}

.dashboard-item.ht5-1 {height: 10rem; width: calc( 20% - .9rem );}
.dashboard-item.ht5-2 {height: auto; width: calc( 50% - .9rem );}
.dashboard-item.ht5-2 .dash-chart-wrap {height: 19em;}
.dashboard-item.ht5-2 .dash-content .dash-tit-wrap {padding: .5em 0 !important}
.dashboard-item.ht5-2 .dash-tt {text-align: left; color: #fff; font-family: var(--fonttype-2); font-weight: 500; margin: 0 10px; font-size: .8em; line-height: 1.4; display: inline-block;}
.dashboard-item.ht5-2 .tab.list {overflow: hidden;}
.dashboard-item.ht6-1 {height: 17.6rem; width: calc( 100% - .9rem );}
.dashboard-item.ht6-2 {height: 12rem; width: calc( 14.28% - .9rem ); background-color: #fff; border-color: #ddd; transition: var(--transition-2) var(--transition-2)}
.dashboard-item.ht6-2:hover {background-color: #f8edef; border-color: #e7616f;}
.dashboard-item.ht6-3 {height: 28.3rem; width: calc( 100% - .9rem );}
.dashboard-item.ht6-3 .dash-chart-wrap {height: 20em;}
.dashboard-item.ht6-4 {height: 57.5rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht6-5 {height: 32rem; width: calc( 100% - .9rem );}
.dashboard-item.ht6-5 .dash-chart-wrap {height: 15.7em;}
.dashboard-item.ht6-6 {height: 24.6rem; width: calc( 100% - .9rem );}
.dashboard-item.ht6-6 .dash-chart-wrap {height: 15.7em;}

.arrow2 {width: 1em;}
.dash-wordcloud-wrap {background: #fff; height: 100%; font-size: .4em; letter-spacing: -.5em; padding: .5em;}
.jqcloud-word {line-height: 1;}

.dash-cont-type2 {line-height: 1.5; position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.dash-cont-type2 h4 {font-family: var(--fonttype-2); letter-spacing: 0; font-size: 1.5em; line-height: 1.2; margin: 0 0 .3em !important; text-align: center !important; padding-left: 0 !important;}
.dash-cont-type2 h4 strong {font-family: var(--fonttype-2); font-size: 1.8em; font-weight: 800; display: inline-block;}
.dash-cont-type2 h4::before {display: none !important;}
.dash-cont-type2 p {font-size: 1.3em; font-weight: 400;}
.dash-cont-type2 p.updown {font-weight: 600; font-family: var(--fonttype-2); letter-spacing: 0; }
.dash-cont-type2 .arrow {margin-right: .4em; vertical-align: middle;}

.dash-cont-type3 {line-height: 1.5; width: 100%; font-size: .9em;}
.dash-cont-type3 h4 {font-family: var(--fonttype-2); letter-spacing: 0; font-size: 1.3em; line-height: 1.2; margin-bottom: .4em; padding-left: 0 !important;}
.dash-cont-type3 h4 strong {font-family: var(--fonttype-2); font-size: 1.8em; font-weight: 800; display: inline-block;}
.dash-cont-type3 p {font-size: 1.3em; font-weight: 400;}
.dash-cont-type3 p.updown {font-weight: 600; font-family: var(--fonttype-2); letter-spacing: 0; }
.dash-cont-type3 .arrow {margin-right: .4em; vertical-align: middle;}
.dash-cont-type3 .ico {width: 6em;}

.dash-cont-type4 {line-height: 1.5; position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.dash-cont-type4 h4 {font-family:'Gmarket Sans' !important; letter-spacing: 0; font-size: 1.2em; line-height: 1.2; margin: 0 0 .4em !important; text-align: center !important; padding-left: 0 !important; color: #465268;}
.dash-cont-type4 h4 strong {font-family: var(--fonttype-2); font-size: 1.2em; font-weight: 800; display: inline-block; letter-spacing: -1px;}
.dash-cont-type4 h4::before {display: none !important;}
.dash-cont-type4 p {font-size: 1em; font-weight: 400; COLOR: #465268;}
.dash-cont-type4 p.updown {font-weight: 600; font-family: var(--fonttype-2); letter-spacing: 0; }
.dash-cont-type4 .arrow {margin-right: .4em; vertical-align: middle;}
.population-status {margin-bottom: 1.4em;}
.population-status .tbl-basic {min-width: auto;}
.population-status .tbl-basic th {background-color: #bed3e5; padding: .3em; color: #202123; border-bottom: 1px solid #dce8f3;}
.population-status .tbl-basic td {padding: .3em; color: #202123; border-bottom: 1px solid #cedfee;}

.alignm { width: 100%; height: 19em; background: #fff; display:table/*position: absolute; left: 0; top: 50%; transform: translateY(-50%);*/}
.alignm .alignm-con {display: table-cell; vertical-align:middle;}
.alignm .alignm-con h4 {font-family: var(--fonttype-2); letter-spacing: 0; font-size: 1.5em; line-height: 1.2; margin: 0 !important; text-align: center !important; padding-left: 0 !important;}
.alignm .alignm-con h4 strong {font-family: var(--fonttype-2); font-weight: 800;}
.alignm .alignm-con h4::before {display: none !important;}
.bor-dashed {border-right: 1px dashed;}
.ico-population {height: 100%; max-width: 85%;}
.ico-dash {width: 4em; margin: 3em 0 1em;}
.ds-group1 {float: left; width: 33.3%;}
.ds-group2 {float: left; width: 33.3%;}
.sub-search-wrap3 {border: 1px solid var(--gray); border-radius: 5px; background: #edf5fc; margin: .45rem; display: inline-block; vertical-align: top; width: calc( 100% - .9rem ); box-sizing: border-box; font-size: .95rem; padding: 1.5em .5em; color: #202123; transition: var(--transition-2);}
.sub-search-wrap3:hover {box-shadow: 0.2em 0.2em 0.2em rgb(0 0 0 / 10%)}
.sub-search-wrap3 .group {display: inline-block; vertical-align: middle; margin: 0 0 0; font-weight: 600;}
.sub-search-wrap3 .group select {width: auto; min-width: 150px; font-weight: 300; height: 35px; font-size: .9em; color: #666;padding: 0 10px; border-color: #cadcec;}
.sub-search-wrap3 .group input[type="text"] { vertical-align: middle; margin: -0 5px 0 0; color: #666; font-weight: 300; height: 35px; line-height: 35px; font-size: .95em; border-color: #cadcec; max-width: 160px;}
.sub-search-wrap3 .group input[type="checkbox"] {width: 18px; height: 18px; border-color: #cadcec;}
.sub-search-wrap3 .group label {color: #666; cursor: pointer; font-weight: 400; }
.tbl-dash {border-collapse: separate; border: 0; padding: 0; margin: 0; width: 100%; font-size: .865em; border-bottom: 1px solid #abb4bd; border-top: 1px solid var(--gray); /*border-top:0 !important;*/}
.tbl-dash th, .tbl-dash td {white-space: nowrap; word-break: break-all;}
.tbl-dash thead {position: sticky; top: 0; z-index: 1;}
.tbl-dash thead th {background:#ccc; color:#202123; text-align: center; font-weight: 400; letter-spacing: -0.1em; border-right: 1px solid #bbb !important; border-bottom: 1px solid #bbb !important; vertical-align: middle; padding: 6px 4px; border-bottom: none;}
.tbl-dash tbody th {background: #edf2f8 !important; border-bottom: 1px solid #ddd; padding: .37em;}
.tbl-dash td {color: #1d3145; vertical-align: middle; text-align: center; padding: .37em; font-weight: 400; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #fff;}
.tbl-dash td > b {font-weight: 800;}

/*.tbl-dash tr:nth-child(even) td {background: #e2e6e9;}
.tbl-dash tr:nth-child(odd) td {background: #fff;}*/
.tbl-dash th:last-child, .tbl-dash td:last-child {border-right: none;}
.tbl-dash .left {text-align: left;}
.tbl-dash .right {text-align: right;}
.tbl-dash .arrow {width: 14px; margin: -3px 0 0;}
.tbl-dash .btn-dash-more img {width: 14px; margin: -3px 0 0; opacity: .6; transition: var(--transition-2) var(--transition-2)}
.tbl-dash .btn-dash-more:hover img {opacity: 1;}
.tbl-dash .btn-dash-more.active img {opacity: 1; transform: rotate(90deg);}
.tbl-dash .arrow-a {transform: rotate(-90deg); opacity: .6;}
.tbl-dash .arrow-b {transform: rotate(90deg); opacity: .6;}
.tbl-typeC {border-collapse: collapse; border: 0; padding: 0; margin: 0 0 1em; width: 100%; font-size: 1em; border-bottom: 1px solid var(--gray); border-top: 1px solid var(--gray);}
.tbl-typeC th, .tbl-typeC td {white-space: nowrap; word-break: break-all;}
.tbl-typeC thead th {background:var(--gray); color:#fff; text-align: center; font-weight: 400; letter-spacing: -0.1em; border-right: 1px solid #6c93ba; vertical-align: middle; padding: 10px 5px; border-bottom: none;}
.tbl-typeC tbody th {background: #edf2f8 !important;}
.tbl-typeC td {color: #202123; vertical-align: middle; text-align: center; padding: .37em; font-weight: 400;}
.tbl-typeC tr:nth-child(even) td {background: rgba(131,167,203,.2);}
.tbl-typeC tr:nth-child(odd) td {background: rgba(255,255,255,.3);}
.tbl-typeC th:last-child, .tbl-typeC td:last-child {border-right: none;}
.tbl-typeC .left {text-align: left;}

/* 맵 */
.dashboard2 {display: flex; justify-content: space-between; justify-content: center; /*align-items: center; */box-sizing: border-box;}
.dashboard2 .db-content {position: relative; font-size: 1em; height: 100%;}
.dashboard2 .db-content h3 {float: none; text-align: left;}
.dashboard2 .db-content h3 .dash-tt {display: inline-block; font-size: .9em; margin: 0 5px;}
.dashboard2 .db-content h4 {margin: 0; font-size: 1em; font-weight: 500; padding-left: 18px; line-height: 2;}
.dashboard2 .db-content h4::before {content: '';position: absolute; width: 3px; height: 3px; left: 5px; top: 9px; border-radius: 15px; border: 2px solid #2f67cb;}

.dashboard2 .db-content .dashboard-item {min-height: 260px;}
.dashboard2 .db-content:nth-child(1) {flex-grow: 1; order: 1; flex-basis: 31%;}
.dashboard2 .db-content:nth-child(2) {flex-grow: 1; order: 2; flex-basis: 38%;}
.dashboard2 .db-content:nth-child(2) .map-tt {text-align: center; font-size: 2rem !important;}
.dashboard2 .db-content:nth-child(3) {flex-grow: 1; order: 3; flex-basis: 31%;}
.dashboard2 .db-content:nth-child(3) .dash-header {background-color: #4b7df6;}
.dashboard2 .db-content:nth-child(3) .dashboard-item {border-color: #4b7df6; background-color: #f6faff;}
.dashboard2 .db-content .board.typeF-1 {height: 300px;}
.dashboard2 .db-content .board.typeF-2 {height: calc(100% - 439px);}
.dashboard2 .db-content .board.typeF-3 {height: 115px; margin-bottom: 0; padding: 2em 1.5em !important;}
.dashboard2 .db-content .board.typeF-2 > .chart-wrap {height:calc(100% - 40px);}
.dashboard2 .db-content .board.typeF-2 > .chart-wrap > div {height: 100%;}
.dashboard2 .db-content .board .comment {font-size: 14px; color: #3958c4; font-weight: 600; text-align: left; font-family: Gmarket Sans; margin: 0 6px;}
.dashboard2 .db-content.bg-none .board {background: transparent !important; padding: 2em 0 0 !important;}
.dashboard2 .db-content.bg-none .board .chart-wrap {height: calc(33% - 23px) !important;}
.dashboard2 .db-content.bg-none .board .chart-wrap > div {background: #eff2f9 !important; border: 1px solid #aab8e7 !important; height: calc(100% - 56px) !important;}

.dashboard2 .dashboard-item {width: calc( 100% - .9rem ); height: auto;}
.dashboard2 .dashboard-item .dash-chart-wrap {margin: 0; height: 15em; padding: .5em; box-sizing: border-box;}
.dashboard2 .dashboard-item .dash-content canvas {height: calc(100% - 20px);}

.map-content {text-align: center; margin: 0 .45rem 3rem; padding: 3rem; background-color: #f1f6fb; box-sizing: border-box; border-left: 1px solid #bdd2e9;}
.map-content > svg {width: 100%; max-width: 800px; margin: 0 auto;}
.map-content .map-tt {font-family: Gmarket Sans !important; font-weight: 600; color: #222 !important; font-size: 20px !important; margin: 60px 0 20px !important;}
.map-content .map-tt span {color: #3958c4; font-weight: 600 !important;  font-size: 1em !important;}
.img-map {width: 100%; max-width: 600px; display: block; margin: 0 auto;}
.map-con-subject {margin-bottom: 2em;  font-family: Gmarket Sans; font-size: 1em; }
.map-con-subject li { display: inline-block; margin: 0 2px; border-radius: 20px; background: #3357df; overflow: hidden;}
.map-con-subject li a {color: #fff;padding: .3em 1em; display: block; width: 100%; text-align: center;  box-sizing: border-box;}
.map-con-subject li:hover {background: #1a3ec5;}
.map-con-subject li.active a {background: #e05fab;}
.map-con-label {display: inline-block; margin: 0 auto 20px; font-size: 0; position: relative;}
.map-con-label li {width: 10px; 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: #456ab8;}
.map-con-label::after {content:'높음'; position: absolute; width: 30px; height: 20px; top: -18px; right: 0; font-size: 11px; text-align: right; color: #456ab8;}
.dash-tbl {height: 310px;}
.dash-chart-wrap3 {height: 371px;}

.map-con {border: 1px solid #ddd; margin: .45rem; background: #fff; padding: .85em; font-size: 1em;}
.img_move {width: 20px; display: block; margin: 0 auto;}

.analysis-list2 {margin: 30px 0; text-align: center; font-size: 0; }
.analysis-list2 > div {display: inline-block; background: #fff; border: 1px solid var(--gray); box-sizing: border-box; width: calc(20% - 10px); margin: 0 5px 10px; font-size: 14px; padding: 18px 5px;vertical-align: top; min-height: 120px; transition: var(--transition-2);}
.analysis-list2 > div .tt {font-family: var(--fonttype-2); font-size: 1em; font-weight: 500; margin: 0 0 10px; color: #465268; transition: var(--transition-2);}
.analysis-list2 > div .result {font-family: var(--fonttype-2); font-size: 2em; font-weight: 800; line-height: 1; color: #465268; margin-bottom: 10px; transition: var(--transition-2);}
.analysis-list2 > div .result small {display: inline-block;font-size: 50%; font-weight: 500; margin-left: 5px;}
.analysis-list2 > div .result img {display: inline-block; margin: -4px 0 0 3px;}
.analysis-list2 > div .chart-wrap {background-color: #fff; min-height: 100px; position: relative;}
.analysis-list2 > div.active, .analysis-list2 > div:hover {cursor: pointer; border-color: #e7616f; background-color: #f8edef;}

.dash-search > div {height: 20em}

.dash-content-search {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap: 4px; padding: 8px; background-color: #fff; border-bottom: 1px solid #ddd; box-sizing: border-box;}
.dash-content-search > div {flex: 1 1 33%;}
.dash-content-search .typeA input, .dash-content-search .typeA select,.dash-content-search .typeA div {width: calc(100% - 100px); float: left;}
.dash-content-search .typeA button {width: 100px; float: left;}
.dash-content-search ~ canvas {height: calc(100% - 50px);}
.dash-list .total {height: 40px; line-height: 40px; font-size: 1.4em; font-weight: bold; font-family: var(--fonttype-2); background-color: #598fc7; color: #fff;}
.dash-list-con {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap: 1%;}
.dash-list-con > div {flex: 1 1 48%; height: 250px; margin: 1% 0; border: 1px solid #ddd;}
.dash-list-con > div .tt {height: 30px; line-height: 30px; font-size: 1em; background-color: #7ca3cc; color: #fff;}
.dash-list-con > div canvas {height: calc(100% - 30px);}
.dash-map {height: 556px;}

.dash-list2 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap: 1%; background-color: transparent;}
.dash-list2-1 {flex: 1 1 49%; height: 100%;}
.dash-list2-1 .tt {height: 30px; line-height: 30px; font-size: 1em; background-color: #7ca3cc; color: #fff;}
.dash-list2-1  canvas {height: calc(100% - 30px);}
.dash-list2-1-1 {height: calc(5em - 4px); margin-bottom: 4px;}
.dash-list2-1-2 {height: calc(7em - 4px); margin-bottom: 4px;}
.dash-list2-1-3 {height: 7em}
.dash-list2-1 .total {background-color: #598fc7; color: #fff; font-family: 'Gmarket Sans'; font-size: 1.4em; font-weight: bold; height: calc(100% - 30px); line-height: 2.2;}
.dash-list2-2 {flex: 1 1 49%; height: 100%;}
.dash-list2-2 .tt {height: 30px; line-height: 30px; font-size: 1em; background-color: #7ca3cc; color: #fff;}
.dash-list2-2  canvas {height: calc(100% - 30px);}

@media screen and (max-width: 1730px) {
}


@media screen and (max-width: 1714px) and (min-width: 1000px) {

  .dash-content-search ~ canvas {height: calc(100% - 85px);}

}

@media screen and (max-width: 1600px) {
  .dashboard-item.ht6-2 {height: 8rem; width: calc( 20% - .9rem ); font-size: .9em;}
  .dashboard-item.ht6-1 {height: 22.6rem;}
  .dashboard2 .db-content .board {padding: 2em 1.5em;}
}
@media screen and (max-width: 1200px) {
  .dashboard-item.ht2-1, .dashboard-item.ht2-2, .dashboard-item.ht2-3 {width: calc( 33.3% - .9rem );}
  .dashboard-item.ht2-4, .dashboard-item.ht2-5, .dashboard-item.ht2-6, .dashboard-item.ht2-7 {width: calc( 50% - .9rem ); height: 20rem;}
  .dash-cont-type2 {font-size: .8em;}
  .dashboard-item.ht4-7, .dashboard-item.ht4-8, .dashboard-item.ht4-9, .dashboard-item.ht4-10 {width: calc( 50% - .9rem );}
  .dashboard-item.ht5-1 {width: calc( 25% - .9rem ); font-size: .85rem;}
  .dashboard-item.ht6-2 {width: calc( 25% - .9rem ); font-size: .8em;}

  .dashboard2 {flex-direction: column;}
  .dashboard2 .db-content {width: 100%; height: auto !important;}
  .dashboard2 .db-content:nth-child(1) {order: 3;}
  .dashboard2 .db-content:nth-child(2) {order: 1;}
  .dashboard2 .db-content:nth-child(3) {order: 2;}
  .dashboard2 .db-content .dashboard-item {min-height: auto;}
  .map-content .map-tt {margin: 40px 0 20px !important;}


}
@media screen and (max-width: 1400px) {
  .population-status .f-left {display: none;}
  .population-status .f-right {width: 100% !important;}
  .ds-group1 {width: 50%;}
  .ds-group2 {width: 100%;}
  .dashboard-item.ht6-4 {float: left; height: 40.9rem; width: calc( 50% - .9rem );}
  .dashboard-item.ht6-3 {height: 20rem;}
  .dashboard-item.ht6-3 .dash-chart-wrap {height: 11.2em;}
  .dashboard-item.ht6-5 {width: calc( 50% - .9rem ); height: 28.9em;}
  .dashboard-item.ht6-6 {width: calc( 50% - .9rem ); height: 28.9em;}
  .dashboard-item.ht6-6 .dash-chart-wrap {height: 23.9em;}
  .analysis-list > div {width: calc(25% - 10px);}
  .analysis-list2 {text-align: left;}
  .analysis-list2 > div { width: calc(33.33% - 10px); text-align: center;}
}

@media screen and (max-width: 1000px) {
  
  .dashboard-item.ht3-6, .dashboard-item.ht3-7, .dashboard-item.ht3-8, .dashboard-item.ht3-9, .dashboard-item.ht3-10 {width: calc( 100% - .9rem ) !important;}
  .dashboard-item.ht5-1 {width: calc( 33.3% - .9rem );}
  .dashboard-item.ht6-4 {width: calc( 100% - .9rem ); margin: -79.1rem .45rem 0; height: 24.3em;}
  .ds-group1 {float: right; margin: 28rem 0 0 0; width: 100%;}
  .dashboard-item.ht6-3 {height: 25rem;}
  .dashboard-item.ht6-3 .dash-chart-wrap {height: 15.6em;}
  .dashboard-item.ht6-5 {width: calc( 100% - .9rem ); height: 30em;}
  .dashboard-item.ht6-6 {width: calc( 100% - .9rem ); height: 22.8em;}
  .dashboard-item.ht6-6 .dash-chart-wrap {height: 15.7em;}
  .dashboard-item.ht5-2 {width: calc( 100% - .9rem );}
  .dash-content > div {width: 100% !important; float: none; padding: 0 !important; margin-bottom: 1em; height: 20em; overflow: hidden;}
  .dash-content > div:last-child {margin-bottom: 0;}
  .alignm {height: auto; min-height: 15em;}
  
  .dashboard2 {flex-direction: column;}
  .dashboard2 .db-content {width: 100%; height: auto !important;}
  .dashboard2 .db-content:nth-child(1) {order: 3;}
  .dashboard2 .db-content:nth-child(2) {order: 1;}
  .dashboard2 .db-content:nth-child(3) {order: 2;}
  .dashboard2 .db-content .board.typeA-2 {margin-bottom: 12px;}
  .dashboard2 .db-content .board.typeC-1 {height: auto;}
  .dashboard2 .db-content .board.typeC-3 {margin-bottom: 12px;}
  .dashboard2 .db-content .board .comment {text-align: center;}
  .dashboard2 .db-content .board.typeF-2 {height: auto; min-height: 220px;}
  .dashboard2 .db-content .board.typeF-3 {height: auto; min-height: 100px;} 
  .dashboard2 .db-content.bg-none .board .chart-wrap > div {height: auto !important; min-height: 220px;}
  .dash-tbl {height: auto;}
  .sub-search-wrap {margin: 0 0 1em}
  .map-content {margin: 0 0 1rem 0; padding: 1rem;}
/*   .dash-content > div {height: auto !important;} */
  .dash-content > div {/* height: auto !important; */ min-height: 200px;}
  .dash-list-con > div {height: 180px;}
  
  .dash-list2-1, .dash-list2-2 {flex: 1 1 100%;}
  .dash-list2-2 {margin-top: 4px;}



  .dash-chart-wrap.chart2 {flex-flow: column wrap;}
  .dash-chart-wrap.chart2 canvas {width: 100% !important;}

  .dash-header {height: auto; line-height:normal; background: #f4f4f4; padding: 0 1em;}
  .dash-header h3 {color: #202123; float: none; line-height: 1.4; margin: 1em 0 0; font-size: .9em;}
  .dash-header .tbl-btn-wrap {right: auto; top: auto;margin: 0; position: relative;}
  .dash-header .tbl-btn-wrap p {color: #222;}
  
  .dash-content .dash-chart-wrap { min-height: 400px !important; }
}

@media screen and (max-width: 860px) {
.dashboard-item { width: 100% !important; margin: .45rem 0;}
.dashboard2 .db-content .board.typeA-1 {height: auto;}
.dashboard2 .db-content h3 {margin-bottom: .5em;}
.dashboard2 .db-content .board {padding: 12px;}
.dashboard2 .chart-wrap .tbl-basic thead th {padding: .4em;}
.dashboard2 .chart-wrap .tbl-basic td {padding: .4em;}
.analysis-list > div {min-height: 130px;}
.analysis-list > div .result {font-size: 1.5em; height: 35px;}
.analysis-list2 > div .result {font-size: 1.5em; height: auto;}

}
@media screen and (max-width: 600px) {
  .dashboard-item.ht2-1, .dashboard-item.ht2-2, .dashboard-item.ht2-3 {height: 10rem !important;}
  .dashboard-item.ht2-4, .dashboard-item.ht2-5, .dashboard-item.ht2-6, .dashboard-item.ht2-7 {width: calc( 100% - .9rem ) !important; height: 20rem !important;}
  .dash-cont-type2, .dash-cont-type3 {font-size: .6em !important;}
  .dashboard-item.ht3-1, .dashboard-item.ht3-2 {height: 17.6rem !important;}
  .dashboard-item.ht3-3, .dashboard-item.ht3-4, .dashboard-item.ht3-5 {height: 10rem !important;}
  .dashboard-item.ht3-6, .dashboard-item.ht3-7, .dashboard-item.ht3-8, .dashboard-item.ht3-9, .dashboard-item.ht3-10 {height: 16.4rem !important;}
  .dashboard-item.ht4-4, .dashboard-item.ht4-5, .dashboard-item.ht4-6 {width: calc( 100% - .9rem ); height: auto !important;}
  .dashboard-item.ht4-7, .dashboard-item.ht4-8, .dashboard-item.ht4-9, .dashboard-item.ht4-10 {width: calc( 100% - .9rem ); height: 16.4rem !important;}
  .dashboard-item.ht4-1, .dashboard-item.ht4-2, .dashboard-item.ht4-3, .dashboard-item.ht4-7 {height: 10rem !important;}
  .dashboard-item.ht5-1 {width: calc( 50% - .9rem ); height: 8em !important;}
  
  .dashboard-item.ht6-2 {width: calc( 25% - 4px ); font-size: .7em; margin: 2px; height: 10em !important;}
  .dashboard-item.ht6-4 {height: 30em !important; margin: -70.2rem .45rem 0 !important;}
  .dashboard-item.ht6-4 .dash-content {height: calc( 100% - 3em );}
  .ds-group1 {margin: 26.6rem 0 0 0;}
  .dashboard-item.ht6-3 {height: 21.2rem !important;}
  .dashboard-item.ht6-3 .dash-chart-wrap {height: 18.8em;}
  .dashboard-item.ht6-5 .dash-chart-wrap {height: 19.4em;}
  .dashboard-item.ht6-6 .dash-chart-wrap {height: 19.4em;}
  .dashboard-item.ht6-5 {height: 27.6rem !important;}
  .dashboard-item.ht6-6 {height: 21.6rem !important;}
  .sub-search-wrap3 .group {display: block; margin: 0 1em .5em; text-align: left;}
  .alignm {min-height: 10em;}

  .dashboard2 .chart-wrap .tbl-basic thead th {padding: .5em;}
  .dashboard2 .chart-wrap .tbl-basic td {padding: .5em;}
  .analysis-tab > li {font-size: 14px; height: 28px; line-height: 28px;}
  .analysis-list2 > div { width: calc(50% - 10px);}
  .analysis-list > div .result img {width: 15px;}
  .analysis-list2 > div .result img {width: 15px;}
  .analysis-con .chart-con .con-wrap .chart-wrap.col2 > div:nth-child(1) {width: 100%; margin-right: 0; margin-bottom: 10px;}
  .analysis-con .chart-con .con-wrap .chart-wrap.col2 > div:nth-child(2) {width: 100%;}


  .dash-header h3 {font-size: .8em;}


}


/* chart, table  */
.chart-div-align-center {display: flex; align-items: center; justify-content: center;}
.td-align-center {text-align:center; vertical-align:middle;}
.tbl-btn-wrap .select-2 {position: relative; display: inline-block; width: 120px; top: 0; right: 0; margin: 0 2px; background: url(../../../images/inner/bg_select01.png) no-repeat calc( 100% - .5em) 50% #fff; height: 25px; line-height: 25px; }
