@charset "UTF-8";
html,
body {
  height: 100%;
  overflow: hidden;
}
/* area */
#container {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #EEF3F6;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-top: calc(var(--portal-height));
}
.highcharts-title {margin-top:3px !important;}

.ecv-body {display:flex;max-width:1920px;margin:0 auto;flex-direction: row;padding:16px 0 0;gap:16px;height: calc(100dvh - var(--portal-height));}
.ecv-content-wrap {flex:1;display:flex;flex-direction: column;height: 100%;min-width:0;}
/* ecv header */
.ecv-header {display:flex;background:#fff;border-radius: 16px 16px 0 0;padding: 12px 24px;border-bottom:1px solid #e0e0e0;}
.ecv-header .ecv-header-wrap {display:flex;width:100%;max-width:1920px;min-width:0;gap:16px;}
.ecv-header .ecv-header-wrap .ecv-header-left {display:flex;align-items:center;gap:24px;flex:1 1 0;min-width:0;}
.ecv-header .ecv-header-wrap h2 {flex:0 1 auto;min-width:0;width:auto;margin:0;text-overflow:ellipsis;font-size:22px;letter-spacing:normal;}
.ecv-header .ecv-header-wrap .ecv-header-right {display:flex;align-items:center;gap:5px;flex-shrink:0;}
.ecv-header .ecv-datepicker {display: flex; flex-direction: row; flex-wrap: nowrap; position: relative;border-radius: 4px;overflow: hidden;flex-shrink:0;}
.ecv-header .ecv-datepicker .input-box-wrap {display:flex;align-items:center;flex-grow:0;gap:8px;}
.ecv-header .input-box-wrap .ecv-control {border: 0; width: 106px; height: 34px; background-color: transparent;text-align: center; font-size: 13px; color: #222;}
.ecv-header .ecv-datepicker select {min-width: 76px;width:fit-content; height: 34px; background-color: #fff;border-radius:4px; font-size: 13px; color: #222;}
.ecv-header .ecv-datepicker .input-box-wrap .filter-group {flex:1;}

.ecv-content-top {background:#fff;border-radius: 0 0 16px 16px;padding:12px 22px;margin-bottom:16px;gap:8px;}
.ecv-content-top .ecv-top-left {display:flex;flex-direction: row;align-items: center;gap:8px;}
.ecv-content-top .ecv-filter-wrap {display:flex;flex-direction: row;align-items: center;gap:8px;}
.ecv-content-top .ecv-filter-wrap .newDropdown {flex:0 1 auto;min-width:0;}
.ecv-content-top .ecv-filter-wrap .newDropdown .newTrigger {width:100%;min-width:96px;max-width:260px;font-weight:400;}
.ecv-content-top .ecv-filter-wrap .newDropdown .newTrigger:after {margin-left:10px;}
.ecv-content-top .ecv-filter-wrap .newDropdown .newTarget li button {font-size:16px;}
.ecv-content-top .ecv-filter-wrap .newDropdown .newTarget li button:hover {background-color:rgba(0, 0, 0, 0.04);}
.ecv-content-top .ecv-filter-wrap .newDropdown .newTarget::-webkit-scrollbar-track {background-color:rgba(255,255,255,.0);}
.ecv-content-top .ecv-filter-wrap .newDropdown .newTarget::-webkit-scrollbar-thumb {background-color:#e0e0e0;border-radius:16px;}

.ecv-content-top .ecv-copy-wrap {display:flex;align-items: center;font-size:16px;color:var(--green);white-space: nowrap;}
.ecv-content-top .ecv-desc-inner {display:flex;flex-direction: row;justify-content:flex-end;align-items: center;}
.ecv-content-top .ecv-desc-wrap dl {border-left:5px solid;border-color:var(--green);padding-left:12px;margin-left:16px;line-height:1.3;}
.ecv-content-top .ecv-desc-wrap dl dt {white-space: nowrap;font-size:14px;color:#878787;}
.ecv-content-top .ecv-desc-wrap dl dd {font-weight:700;}
.ecv-content-wrap .ecv-content-inner {flex:1 1 100%;display:flex;flex-direction:row;gap:16px;overflow:hidden;}
.ecv-content-inner .ecv-map-inner {flex:0 0 35%;max-height:440px;border-radius: 16px;background-color: #fff;padding: 16px;overflow:hidden;}
.ecv-content-inner .ecv-chart-inner {flex:1;display:flex;flex-direction: row;flex-wrap:wrap;height: 100%;gap:16px;overflow-y:auto;}
.ecv-content-inner .ecv-chart-wrap {border-radius: 16px;background-color: #fff;padding: 16px;}
.ecv-content-inner .ecv-chart-wrap.ctype-1 {flex:1 1 100%;height: 100%;min-width:0;}
.ecv-content-inner .ecv-chart-wrap.ctype-2 {flex:1 1 48%;min-height:280px;min-width:0;align-content: center;}
.ecv-content-inner .ecv-chart-wrap.ctype-3 {flex:1 1 100%;min-height:280px;min-width:0;}
.ecv-content-inner .ecv-chart-wrap.ctype-4 {flex:1 1 30%;min-height:200px;min-width:0;}
.ecv-content-inner .ecv-chart-wrap .content-annotation {text-align: right;font-size: 12px;color: #687480;margin-top: 8px;line-height: 1.4;}
.acc-exp {position: relative;cursor:pointer;text-decoration:underline #999999;}
.acc-exp:after{
  content: "";display:inline-block;position: absolute;right: -10px;top:-10px;width: 12px;height: 12px;
  -webkit-mask-position:center center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center center;mask-size:contain;mask-repeat:no-repeat;
  -webkit-mask-image:url(../../../images/wgs/btn/btn-tooltip.svg);mask-image:url(../../../images/wgs/btn/btn-tooltip.svg);
  background-color: #999;
}

.ecv-chart-inner::-webkit-scrollbar-track {background-color:rgba(255,255,255,.0);}
.ecv-chart-inner::-webkit-scrollbar-thumb {background-color:#e0e0e0;border-radius:16px;}

/* chrome, safari */
::-webkit-scrollbar {
  width: 5px;
  height: 0;
}
::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.75);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.75);
}

@media screen and (max-width: 1279px) {
  html,
  body {
    overflow: auto;
    -ms-overflow-style: none;
  }

  body::-webkit-scrollbar {
    display: none;
  }

  #container {
    padding-top: calc(var(--header-height));
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
    margin:0 !important;
  }

  .ecv-header {padding: 16px;height:auto;margin:0;border-bottom:0;border-radius:16px;}
  .ecv-header .ecv-header-wrap {flex-direction:column;justify-content:start;gap:8px;}
  .ecv-header .ecv-header-wrap .ecv-header-left {flex-direction:column;align-items:start;gap:8px;}
  .ecv-header .ecv-header-wrap .ecv-header-left h2 {font-size:18px;}
  .ecv-header .ecv-datepicker {width:100%;}
  .ecv-header .ecv-datepicker .input-box-wrap {flex-grow:1;}
  .ecv-header .ecv-datepicker .input-box-wrap .ecv-control {flex:1;width:auto;}
  .ecv-header .ecv-datepicker .input-box-wrap select {width:100%;}
  .ecv-header .ecv-header-wrap .ecv-header-right {flex-wrap:wrap;}
  .ecv-header .ecv-header-wrap .ecv-header-right button {flex:1;}

  .ecv-body {padding-bottom:0;padding-left:16px;padding-right:16px;height:100%;}
  .ecv-content-wrap {width:100%;gap:16px;}
  .ecv-content-top {background:none;flex-direction:column;gap:16px;padding:0 16px;margin:0;}
  .ecv-content-top .ecv-top-left {flex-wrap:wrap;}
  .ecv-content-top .ecv-filter-wrap {flex-wrap:nowrap;}
  .ecv-content-top .ecv-filter-wrap>div {flex:1;}
  .ecv-content-top .ecv-top-left>.ecv-copy-wrap{flex:0 0 100%;}
  .ecv-content-top .ecv-desc-wrap {background:#fff;border-radius:16px;padding:10px 16px;scroll-snap-type: x mandatory;}
  .ecv-content-top .ecv-desc-inner {gap:40px;justify-content: normal;}
  .ecv-content-top .ecv-desc-inner dl {margin-left:0;}

  .ecv-content-wrap .ecv-content-inner {flex-direction:column;gap:16px;overflow:visible;overflow-y:auto;}
  .ecv-content-inner .ecv-map-inner {min-height:440px;}
  .ecv-content-inner .ecv-chart-inner {overflow-y: visible;}
  .ecv-content-inner .ecv-chart-wrap .content-annotation {white-space:nowrap;}
}

/* 네비게이션 스타일링 */
.ecv-nav-wrap {float:left;flex:0 0 250px;width:250px;height:100%;overflow-y:hidden;padding-bottom:16px;}
.navigation::-webkit-scrollbar-track {background-color:rgba(255,255,255,.0);}
.navigation::-webkit-scrollbar-thumb {background-color:#e0e0e0;border-radius:16px;}
.navigation {height:100%;padding:16px;overflow-y:auto;border-radius:16px;background-color:#fff;}
.navigation .nav-title {display:block;font-size:14px;color:#687480;font-weight:400;margin-bottom:12px;margin-left:4px;}
.navigation .dep01 > li > button {display:flex;font-size:14px;line-height:18px;padding:11px 8px 11px 11px;width:100%;gap:8px;border-radius:4px;transition:background-color 0.1s var(--cubic);background-color:transparent;border:0;}
.navigation .dep01 > li > button:hover,
.navigation .dep01 > li > button:focus {background-color:rgba(0, 0, 0, 0.04);}
.navigation .dep01 > li > button:before {content:'';flex:0 0 18px;width:18px;height:18px;}
.navigation .dep01 > li > button:after {content:'';flex:0 0 16px;width:16px;height:16px;margin-left:auto;background:url("../../../images/gis/arrow-grid-nav-left-chevron.svg") center center / contain no-repeat;transition:transform 0.3s var(--cubic);transform:rotate(0);}
.navigation .dep01 > li.active > button:after {transform:rotate(-90deg);}
.navigation .dep02 > li > a:hover {background-color:rgba(0, 0, 0, 0.04);}
.navigation .dep02 > li > a.active {background-color: #d3e3fd;color: #0842a0;border-radius:4px;}
.navigation .dep01-list01 > button:before {background:url("../../../images/ecv/ico-grid-nav-list01.svg") center center / contain no-repeat;}
.navigation .dep01-list02 > button:before {background:url("../../../images/ecv/ico-grid-nav-list02.svg") center center / contain no-repeat;}
.navigation .dep01-list03 > button:before {background:url("../../../images/ecv/ico-grid-nav-list03.svg") center center / contain no-repeat;}
.navigation .dep01-list04 > button:before {background:url("../../../images/ecv/ico-grid-nav-list04.svg") center center / contain no-repeat;}
.navigation .dep01-list05 > button:before {background:url("../../../images/ecv/ico-grid-nav-list05.svg") center center / contain no-repeat;}
.navigation .dep01-list06 > button:before {background:url("../../../images/ecv/ico-grid-nav-list06.svg") center center / contain no-repeat;}
.navigation .dep01-list07 > button:before {background:url("../../../images/ecv/ico-grid-nav-list07.svg") center center / contain no-repeat;}
.navigation .dep01-list08 > button:before {background:url("../../../images/ecv/ico-grid-nav-list08.svg") center center / contain no-repeat;}
.navigation .dep01-list09 > button:before {background:url("../../../images/ecv/ico-grid-nav-list09.svg") center center / contain no-repeat;}
.navigation .dep02 {position:relative;}
.navigation .dep02:before {content:'';position:absolute;left:19px;top:13px;bottom:13px;background-color:#EEEEEE;width:2px;}
.navigation .dep02 > li > a {display:flex;font-size:14px;line-height:18px;padding:11px 8px 11px 37px;border: 0;text-decoration: none;color: black;}

.btn-fixed-bottom {display:none;}
@media screen and (max-width:1279px) {
  .ecv-nav-wrap {display:none;}
}

@media screen and (max-width:1279px) {
  .btn-fixed-bottom {position:fixed;left:0;bottom:0;width:100%;padding:16px;z-index:2;background:none;display:flex;justify-content:center;}
  .btn-fixed-bottom .trigger-nav {display:flex;align-items:center;gap:8px;background-color:#fff;border:1px solid var(--green);border-radius:50px;font-size:12px;line-height:26px;padding:0 12px;box-shadow:0px 1px 3px 0px #00000057;}
  .btn-fixed-bottom .trigger-nav:before {content:'';width:16px;flex:0 0 16px;height:16px;background:url("../../../images/wgs/ico/ico-economics.svg") center center / contain no-repeat;}
  .btn-fixed-bottom .trigger-chart {display:flex;flex-direction:column;align-items:center;width:56px;padding:8px 0;gap:6px;position:absolute;right:15px;bottom:8px;font-size:12px;color:#222;font-weight:500;line-height:1;}
  .btn-fixed-bottom .trigger-chart:before {content:'';flex:0 0 34px;width:34px;height:34px;background:url("../../../images/gis/ico-chart.png") center center / contain no-repeat;box-shadow:1px 1px 4px 0px #00000057;border-radius:50%;}
}

.navigation .btn-layer-close {display:none;}

/* layerpopup-active */
@media screen and (max-width:1279px) {
  .ecv-nav-wrap.layerpopup-active {position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;display:block;padding:24px 8px;overflow-y:auto;background:#fff;}
  .navigation{position:relative;padding:0;border-radius:0;}
  .ecv-nav-wrap.layerpopup-active .nav-title {display:flex;font-size:20px;font-weight:700;color:#222;margin:0;line-height:1;}
  .navigation .btn-layer-close {display: block;position:absolute;right:0;width:52px;height:52px;background:url("../../../images/gis/btn-sitemap-close-mo.svg") center center / 20px 20px no-repeat;border: none;}
  .navigation .btn-layer-close {top:-16px;}
  .navigation .dep01 {margin-top:20px;}
}