@charset "UTF-8";
/* Type ⋮ _mixin.scss · Author ⋮ Gahye Park · Create date ⋮ 2023. 12. 27 */
@import "/assets/fonts/pretendard/fonts.css";
@import "/assets/fonts/NotoSansKR/fonts.css";
@import "/assets/fonts/line-awesome/line-awesome.min.css";
@import "/assets/fonts/xeicon/xeicon.min.css";
@font-face {
  font-family: "GongGothicMedium";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/*************************************
    # dashboard 공통 변수 
************************************/
/* font family */
/* font color */
/* responsive */
/* Type ⋮ sub.scss · Author ⋮ Hyeonjin · Create date ⋮ 2025. 01. 03 */
/*--🔸 관리자_태양광 맵 (sub-1 ~ )🔸--*/
.sub-value-1 {
  color: #fff;
  margin-bottom: 1rem;
}
.sub-value-1 .titT1 {
  color: #fff;
}
.sub-value-1 > div {
  display: flex;
  justify-content: space-between;
}
.sub-value-1 > div [class^=item] .item-tit {
  color: #D5DEE2;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sub-value-1 > div [class^=item] [class^=value-icon] {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
}
.sub-value-1 > div [class^=item] .item-figure > strong {
  font-size: 1.5rem;
  font-weight: 500;
  background: linear-gradient(90deg, #FFB027 11%, #53FFE2 89%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 0.5rem;
}
.sub-value-1 > div [class^=item] .item-figure > em {
  font-size: 0.8rem;
  font-weight: 400;
}
.sub-value-1 > div [class^=item] .value-icon5 {
  background: url(/assets/images/sub/value-icon5.png) no-repeat center/100%;
}
.sub-value-1 > div [class^=item] .value-icon7 {
  background: url(/assets/images/sub/value-icon6.png) no-repeat center/100%;
}
.sub-value-1 > div [class^=item] .value-icon6 {
  background: url(/assets/images/sub/value-icon7.png) no-repeat center/100%;
}
.sub-value-1 > div [class^=item] .value-icon8 {
  background: url(/assets/images/sub/value-icon8.png) no-repeat center/100%;
}
.sub-value-1 > div [class^=item] .value-icon9 {
  background: url(/assets/images/sub/value-icon9.png) no-repeat center/100%;
}

.cont.map {
  background: url(/assets/images/sub/map-bg.png) no-repeat center/100% 100%;
  position: relative;
}

.tit-element {
  display: inline-flex;
  align-items: center;
  padding-right: 1rem;
  border-radius: 2.5rem;
  background: #EEF2F5;
  height: 1.5rem;
}
.tit-element > span {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  margin-right: 0.5rem;
  border-radius: 2.5rem;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  color: #fff;
  height: 100%;
}
.tit-element .list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tit-element .list > span {
  font-size: 0.7rem;
  font-weight: 400;
  height: 0.85rem;
  line-height: 0.85rem;
}
.tit-element .list > span > strong {
  font-weight: 500;
  margin-right: 0.15rem;
}

.card-item-wrap {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
}
.card-item-wrap .card-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid #BAC6CF;
  padding: 1rem;
  flex: 1;
  max-width: 23.8%;
}
.card-item-wrap .card-item .card-tit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-item-wrap .card-item .card-tit .tit {
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}
.card-item-wrap .card-item .graph-con {
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #16343C 0%, #1F2130 100%);
  padding: 1rem;
}
.card-item-wrap .card-item .card-detail > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-item-wrap .card-item .card-detail > div > span {
  font-size: 0.8rem;
  font-weight: 500;
}
.card-item-wrap .card-item .card-detail > div > span > strong {
  font-size: 1rem;
  margin-right: 0.25rem;
}

/* 상태 토글 */
.slideToggle-btn {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 1rem;
}
.slideToggle-btn input {
  display: none;
}
.slideToggle-btn .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #BAC6CF;
  transition: 0.4s;
  border-radius: 1.2rem;
}
.slideToggle-btn .slider:before {
  position: absolute;
  content: "";
  height: 0.7rem;
  width: 0.7rem;
  left: 0.15rem;
  bottom: 0.15rem;
  background-color: #fff;
  transition: 0.4s;
  border-radius: 50%;
}
.slideToggle-btn input:checked + .slider {
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
}
.slideToggle-btn input:checked + .slider::before {
  transform: translateX(1rem);
}

/* zoom btn */
.zoom-btn {
  display: inline-flex;
  flex-direction: column;
  border-radius: 0.25rem;
  background: #fff;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.zoom-btn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.25rem;
}
.zoom-btn > a > i {
  font-weight: 600;
}
.zoom-btn > em {
  display: inline-block;
  width: 0.8rem;
  height: 1px;
  background: #ccc;
  margin: auto;
}

/*--🔸 발전소 현황 위치 선택 조회 🔸--*/
.custom-select {
  display: inline-block;
  width: 10rem;
  height: 2rem;
  padding: 0.325rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid #BAC6CF;
  background: #fff;
  position: relative;
}
.custom-select .select-items {
  width: 100%;
  max-height: 13rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid #BAC6CF;
  background: #fff;
  position: absolute;
  z-index: 3;
  top: 115%;
  left: 0;
  overflow-y: auto;
}
.custom-select .select-items > li {
  margin-bottom: 0.25rem;
}
.custom-select .select-items > li > span {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 1.35rem;
  color: #333;
  font-size: 0.75rem;
  font-weight: 400;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-select .select-items > li:last-child {
  margin-bottom: 0;
}
.custom-select .select-items > li:hover > span {
  font-weight: 600;
}
.custom-select .select-items::-webkit-scrollbar {
  width: 0.3rem;
  margin: 1rem 0;
}
.custom-select .select-items::-webkit-scrollbar-thumb {
  background-color: #22859B;
  border-radius: 2.5rem;
  border: 1.5px solid rgba(238, 242, 245, 0.3);
}
.custom-select .select-items::-webkit-scrollbar-track {
  background-color: rgba(238, 242, 245, 0.5);
  border-radius: 2.5rem;
}
.custom-select:after {
  content: "";
  background: url(/assets/images/sub/arrow-down.png) no-repeat center/100%;
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  cursor: pointer;
}
.custom-select.active .select-selected {
  cursor: pointer;
}
.custom-select.active:after {
  content: "";
  background: url(/assets/images/sub/arrow-up.png) no-repeat center/100%;
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  cursor: pointer;
}
.custom-select.type2 {
  max-width: 8rem;
  border-radius: 5rem;
}
.custom-select.type2:after {
  background: url(/assets/images/sub/arrow-down2.png) no-repeat center/100%;
  width: 0.7rem;
  height: 0.5rem;
}
.custom-select.type2.active:after {
  content: "";
  background: url(/assets/images/sub/arrow-up2.png) no-repeat center/100%;
  width: 0.7rem;
  height: 0.5rem;
}

/* card-sort */
.card-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.card-sort > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-sort > div > p {
  display: flex;
  align-items: center;
}
.card-sort > div > p > strong {
  color: #22859B;
  font-weight: 700;
  margin: 0 0.25rem;
}
.card-sort > div .select-group {
  height: 1.5rem;
  width: 5.5rem;
}
.card-sort > div [class^=btn-style] {
  height: 1.5rem;
  line-height: 1.5rem;
}

.card-item-wrap2 {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
  flex-wrap: wrap;
}
.card-item-wrap2 .card-item2 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  flex: 0 0 calc((100% - 4rem) / 5);
}
.card-item-wrap2 .card-item2 .tit-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-item-wrap2 .card-item2 .tit-legend > p {
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}
.card-item-wrap2 .card-item2 .tit-legend > span {
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
.card-item-wrap2 .card-item2 .tit-legend > span .legend-icon {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.25rem;
}
.card-item-wrap2 .card-item2 .graph-con {
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #16343C 0%, #1F2130 100%);
  padding: 1rem;
}
.card-item-wrap2 .card-item2 .card-detail > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-item-wrap2 .card-item2 .card-detail > div > span {
  font-size: 0.8rem;
  font-weight: 500;
}
.card-item-wrap2 .card-item2 .card-detail > div > span > strong {
  font-size: 1rem;
  margin-right: 0.25rem;
}
.card-item-wrap2 .card-item2.type1 {
  border-top: 5px solid #F00;
  border-right: 1px solid #F00;
  border-bottom: 1px solid #F00;
  border-left: 1px solid #F00;
  background: #FFF9F9;
}
.card-item-wrap2 .card-item2.type1 .legend-icon {
  background: url(/assets/images/dashboard/legend-icon1.png) no-repeat center/150%;
}
.card-item-wrap2 .card-item2.type2 {
  border-top: 5px solid #FFB027;
  border-right: 1px solid #FFB027;
  border-bottom: 1px solid #FFB027;
  border-left: 1px solid #FFB027;
  background: #FFFBF5;
}
.card-item-wrap2 .card-item2.type2 .legend-icon {
  background: url(/assets/images/dashboard/legend-icon2.png) no-repeat center/150%;
}
.card-item-wrap2 .card-item2.type3 {
  border-top: 5px solid #009A80;
  border-right: 1px solid #009A80;
  border-bottom: 1px solid #009A80;
  border-left: 1px solid #009A80;
  background: #F6FCFB;
}
.card-item-wrap2 .card-item2.type3 .legend-icon {
  background: url(/assets/images/dashboard/legend-icon3.png) no-repeat center/150%;
}

.card-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.card-list-wrap .card-list {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 0.75rem;
  padding: 0.5rem 1.5rem;
}
.card-list-wrap .card-list .tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 15%;
}
.card-list-wrap .card-list .tit > span {
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}
.card-list-wrap .card-list .tit > p {
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
.card-list-wrap .card-list .tit > p > em {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.25rem;
}
.card-list-wrap .card-list .value-con {
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #16343C 0%, #1F2130 100%);
  padding: 0.5rem 1rem;
  width: 20%;
}
.card-list-wrap .card-list .value-con > p {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: center;
}
.card-list-wrap .card-list .value-con > p > strong {
  font-size: 1.2rem;
  font-weight: 500;
  background: linear-gradient(90deg, #FFB027 11%, #53FFE2 89%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 0.25rem;
}
.card-list-wrap .card-list .list-detail {
  flex: 1;
  display: flex;
}
.card-list-wrap .card-list .list-detail > div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-right: 1px solid #BAC6CF;
  padding: 0 1rem;
}
.card-list-wrap .card-list .list-detail > div > span {
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
.card-list-wrap .card-list .list-detail > div > p {
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
.card-list-wrap .card-list .list-detail > div > p > strong {
  font-size: 1rem;
  margin-right: 0.25rem;
}
.card-list-wrap .card-list .list-detail > div:last-child {
  border: none;
}
.card-list-wrap .card-list.type1 {
  border-top: 1px solid #F00;
  border-right: 1px solid #F00;
  border-bottom: 1px solid #F00;
  border-left: 5px solid #F00;
  background: #FFF9F9;
}
.card-list-wrap .card-list.type1 .legend-icon {
  background: url(/assets/images/dashboard/legend-icon1.png) no-repeat center/150%;
}
.card-list-wrap .card-list.type2 {
  border-top: 1px solid #FFB027;
  border-right: 1px solid #FFB027;
  border-bottom: 1px solid #FFB027;
  border-left: 5px solid #FFB027;
  background: #FFFBF5;
}
.card-list-wrap .card-list.type2 .legend-icon {
  background: url(/assets/images/dashboard/legend-icon2.png) no-repeat center/150%;
}
.card-list-wrap .card-list.type3 {
  border-top: 1px solid #009A80;
  border-right: 1px solid #009A80;
  border-bottom: 1px solid #009A80;
  border-left: 5px solid #009A80;
  background: #F6FCFB;
}
.card-list-wrap .card-list.type3 .legend-icon {
  background: url(/assets/images/dashboard/legend-icon3.png) no-repeat center/150%;
}

/* 기상정보 */
.weather-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid #ccc;
  padding-top: 1rem;
  margin-top: 1rem;
}
.weather-wrap .tit {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.weather-wrap > div {
  margin-top: 1rem;
}
.weather-wrap .weather-inner1 {
  border-radius: 0.5rem;
  border: 1px solid #C1CCD4;
  background: #fff;
  padding: 0.8rem;
  flex: 1;
}
.weather-wrap .weather-inner1 [class^=weather-icon] {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
}
.weather-wrap .weather-inner1 [class^=weather-icon].cloudy {
  background: url(/assets/images/weather-icons/cloudy.png) no-repeat center/cover;
}
.weather-wrap .weather-inner1 [class^=weather-icon].partly_cloudy {
  background: url(/assets/images/weather-icons/partly_cloudy.png) no-repeat center/cover;
}
.weather-wrap .weather-inner1 [class^=weather-icon].rain {
  background: url(/assets/images/weather-icons/rain.png) no-repeat center/cover;
}
.weather-wrap .weather-inner1 [class^=weather-icon].sun {
  background: url(/assets/images/weather-icons/sun.png) no-repeat center/cover;
}
.weather-wrap .weather-inner1 > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.weather-wrap .weather-inner1 > div .weather-inner1-1 {
  text-align: center;
  padding-left: 1rem;
}
.weather-wrap .weather-inner1 > div .weather-inner1-1 .condition-txt {
  font-size: 1rem;
  font-weight: 600;
}
.weather-wrap .weather-inner1 > div .weather-inner1-1 .tem-txt1 {
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.weather-wrap .weather-inner1 > div .weather-inner1-1 .tem-txt1 > strong {
  font-size: 1.7rem;
  font-weight: 500;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.weather-wrap .weather-inner1 > div .weather-inner1-2 .tem-txt2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.weather-wrap .weather-inner1 > div .weather-inner1-2 .tem-txt2 > p {
  font-size: 0.8rem;
  font-weight: 500;
}
.weather-wrap .weather-inner1 > div .weather-inner1-2 .tem-txt2 > p > strong {
  font-size: 1.2rem;
  margin: 0 0.25rem;
}
.weather-wrap .weather-inner1 > div .weather-inner1-2 .weather-detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.weather-wrap .weather-inner1 > div .weather-inner1-2 .weather-detail > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 1.15rem;
  border-radius: 2.5rem;
  background: #EEF2F5;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.weather-wrap .weather-inner1 > div .weather-inner1-2 .weather-detail > div > em {
  font-size: 0.7rem;
}
.weather-wrap .weather-inner2 {
  border-radius: 0.5rem;
  border: 1px solid #C1CCD4;
  background: #fff;
  padding: 0.8rem;
  flex: 1;
}
.weather-wrap .weather-inner2 > div {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  overflow-x: scroll;
  padding-bottom: 0.5rem;
}
.weather-wrap .weather-inner2 > div::-webkit-scrollbar {
  height: 0.5rem;
}
.weather-wrap .weather-inner2 > div::-webkit-scrollbar-thumb {
  background-color: #22859B;
  border-radius: 2.5rem;
  border: 2px solid #D5DEE2;
  background-clip: padding-box;
}
.weather-wrap .weather-inner2 > div::-webkit-scrollbar-track {
  background-color: #D5DEE2;
  border-radius: 2.5rem;
}
.weather-wrap .weather-inner2 > div > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 1rem;
}
.weather-wrap .weather-inner2 > div > div .date {
  font-size: 0.7rem;
}
.weather-wrap .weather-inner2 > div > div [class^=weather-icon] {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
}
.weather-wrap .weather-inner2 > div > div [class^=weather-icon].cloudy {
  background: url(/assets/images/weather-icons/cloudy.png) no-repeat center/cover;
}
.weather-wrap .weather-inner2 > div > div [class^=weather-icon].partly_cloudy {
  background: url(/assets/images/weather-icons/partly_cloudy.png) no-repeat center/cover;
}
.weather-wrap .weather-inner2 > div > div [class^=weather-icon].rain {
  background: url(/assets/images/weather-icons/rain.png) no-repeat center/cover;
}
.weather-wrap .weather-inner2 > div > div [class^=weather-icon].sun {
  background: url(/assets/images/weather-icons/sun.png) no-repeat center/cover;
}
.weather-wrap .weather-inner2 > div > div > p {
  font-size: 0.65rem;
}
.weather-wrap .weather-inner2 > div > div > strong {
  font-size: 0.8rem;
  font-weight: 600;
}

.forecast-list {
  display: flex;
  margin-top: 1rem;
  padding-bottom: 1rem;
  overflow-x: scroll;
}
.forecast-list::-webkit-scrollbar {
  height: 0.5rem;
}
.forecast-list::-webkit-scrollbar-thumb {
  background-color: #22859B;
  border-radius: 2.5rem;
  border: 2px solid #D5DEE2;
  background-clip: padding-box;
}
.forecast-list::-webkit-scrollbar-track {
  background-color: #D5DEE2;
  border-radius: 2.5rem;
}
.forecast-list > li {
  height: 14.5rem;
  width: 4.7619047619%;
  flex-shrink: 0;
  border-bottom: 1px solid #BAC6CF;
}
.forecast-list > li > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  border-right: 1px dashed #BAC6CF;
}
.forecast-list > li > div .forecast-con1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  height: 40%;
}
.forecast-list > li > div .forecast-con1 [class^=w-h-icon] {
  display: inline-block;
  width: 2rem;
  height: 1.4rem;
}
.forecast-list > li > div .forecast-con1 .w-h-icon1 {
  background: url(/assets/images/dashboard/w-h-icon1.png) no-repeat center/100%;
}
.forecast-list > li > div .forecast-con1 .w-h-icon2 {
  background: url(/assets/images/dashboard/w-h-icon2.png) no-repeat center/100%;
}
.forecast-list > li > div .forecast-con1 .w-h-icon3 {
  background: url(/assets/images/dashboard/w-h-icon3.png) no-repeat center/100%;
}
.forecast-list > li > div .forecast-con1 > strong {
  font-size: 0.8rem;
  font-weight: 600;
}
.forecast-list > li > div .forecast-con1 > strong > em {
  font-weight: 400;
}
.forecast-list > li > div .forecast-con2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 60%;
}
.forecast-list > li > div .forecast-con2 .bar {
  width: 0.7rem;
  height: auto;
  border-radius: 2.5rem 2.5rem 0 0;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  position: relative;
}
.forecast-list > li > div .forecast-con2 .bar > p {
  font-weight: 500;
  position: absolute;
  top: -1.25rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}
.forecast-list > li:last-child > div {
  border: none;
}

/*--🔸 /// (sub-1 ~ ) 🔸--*/
/*--🔸 관리자 설비상태 (sub-2 ~ ) 🔸--*/
.sub-value-2 {
  color: #fff;
}
.sub-value-2 .titT1 {
  color: #fff;
}
.sub-value-2 > div {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.sub-value-2 > div .graph-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 25%;
}
.sub-value-2 > div .graph-item > p {
  font-size: 0.9rem;
  text-align: center;
}

/* 상태아이콘(중단/이상/동작) */
.legend-icon1 {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: url(/assets/images/dashboard/legend-icon1.png) no-repeat center/150%;
}

.legend-icon2 {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: url(/assets/images/dashboard/legend-icon2.png) no-repeat center/150%;
}

.legend-icon3 {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: url(/assets/images/dashboard/legend-icon3.png) no-repeat center/150%;
}

.legend-icon4 {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: url(/assets/images/dashboard/legend-icon4.png) no-repeat center/150%;
}

.legend-icon5 {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: url(/assets/images/dashboard/legend-icon5.png) no-repeat center/150%;
}

.legend-icon6 {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: url(/assets/images/dashboard/legend-icon6.png) no-repeat center/150%;
}

/* excel btn */
[class^=btn-style].excel {
  padding-left: 2.1rem;
}
[class^=btn-style].excel:before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  background: url(/assets/images/sub/excel.png) no-repeat center/100%;
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

/* AI 진단 */
.ai-box-wrap {
  display: flex;
  gap: 1rem;
}
.ai-box-wrap > div {
  flex: 1;
  border-radius: 0.75rem;
  height: 20rem;
}
.ai-box-wrap .ai-box1 {
  background: url(/assets/images/sub/map-bg2.png) no-repeat center/100% 100%;
}
.ai-box-wrap .ai-box2 {
  background: #F3F7FA;
  padding: 1rem;
}

/* 예상 발전 금액 전체 현황 */
.sub-value-3 {
  display: flex;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 0.5rem;
}
.sub-value-3 [class^=value] {
  display: flex;
  flex-direction: column;
}
.sub-value-3 [class^=value] [class^=titT1] {
  color: #D5DEE2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sub-value-3 [class^=value] [class^=value-icon] {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
}
.sub-value-3 .value-icon6 {
  background: url(/assets/images/sub/value-icon6.png) no-repeat center/100%;
}
.sub-value-3 .value1 {
  gap: 1rem;
  width: 32%;
}
.sub-value-3 .value1 > p > strong {
  background: linear-gradient(90deg, #FFB027 11%, #53FFE2 89%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
  font-weight: 500;
  margin-right: 0.25rem;
}
.sub-value-3 .value1 > p > em {
  font-size: 1.5rem;
}
.sub-value-3 .value1 > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sub-value-3 .value1 > div > span {
  font-size: 1.2rem;
  font-weight: 500;
}
.sub-value-3 .value1 > div > span > em {
  font-size: 0.8rem;
  font-weight: 300;
  margin-left: 0.25rem;
}
.sub-value-3 .value2 {
  display: flex;
  justify-content: center;
  width: 18%;
}
.sub-value-3 .value2 .badge4 {
  width: 4.1rem;
}
.sub-value-3 .value3 {
  width: 43%;
}
.sub-value-3 .value3 .box-style1 {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  margin: 0;
}
.sub-value-3 .value3 .box-style1 > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sub-value-3 .value3 .box-style1 > div .value-icon2 {
  background: url(/assets/images/dashboard/value-icon2.png) no-repeat center/100%;
}
.sub-value-3 .value3 .box-style1 > div > p > strong {
  background: linear-gradient(90deg, #FFB027 11%, #53FFE2 89%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
  font-weight: 500;
  margin-right: 0.25rem;
}
.sub-value-3 .value3 .box-style1 > div > span {
  font-size: 0.6rem;
  font-weight: 300;
  word-wrap: break-word;
  word-break: keep-all;
}
.sub-value-3 .value3 .box-style1 > div > span > strong {
  font-size: 1.2rem;
  font-weight: 500;
  margin-right: 0.25rem;
}

/* smp 가격 동향 */
.sub-value-4 {
  color: #fff;
}
.sub-value-4 .titT1 {
  color: #fff;
  margin: 0;
}
.sub-value-4 [class^=value] .titT1 {
  color: #D5DEE2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.sub-value-4 [class^=value] [class^=value-icon] {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
}
.sub-value-4 [class^=value] .value-icon10 {
  background: url(/assets/images/sub/value-icon10.png) no-repeat center/100%;
}
.sub-value-4 [class^=value] .value-icon11 {
  background: url(/assets/images/sub/value-icon11.png) no-repeat center/100%;
}
.sub-value-4 > div:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.sub-value-4 > div:nth-child(2) > div {
  flex: 1;
}
.sub-value-4 > div:nth-child(2) .value1 > div {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.sub-value-4 > div:nth-child(2) .value1 > div > div {
  flex: 1;
}
.sub-value-4 > div:nth-child(2) .value1 > div > div > span {
  color: #D5DEE2;
  font-size: 0.9rem;
  font-weight: 500;
}
.sub-value-4 > div:nth-child(2) .value1 > div > div > p {
  font-size: 0.8rem;
}
.sub-value-4 > div:nth-child(2) .value1 > div > div > p > strong {
  color: #FFB027;
  font-size: 1.5rem;
  font-weight: 500;
  margin-right: 0.5rem;
}
.sub-value-4 > div:nth-child(2) .value1 > div > div.flex {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.sub-value-4 > div:nth-child(2) .value2 .box-style1 {
  margin: 0;
}
.sub-value-4 > div:nth-child(2) .value2 .box-style1 > div {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.sub-value-4 > div:nth-child(2) .value2 .box-style1 > div > div {
  flex: 1;
}
.sub-value-4 > div:nth-child(2) .value2 .box-style1 > div > div span {
  color: #D5DEE2;
  font-size: 0.9rem;
  font-weight: 500;
}
.sub-value-4 > div:nth-child(2) .value2 .box-style1 > div > div > p {
  font-size: 0.8rem;
}
.sub-value-4 > div:nth-child(2) .value2 .box-style1 > div > div > p > strong {
  color: #53FFE2;
  font-size: 1.5rem;
  font-weight: 500;
  margin-right: 0.5rem;
}
.sub-value-4 > div:nth-child(2) .value2 .box-style1 > div > div.flex {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/*--🔸 /// (sub-2 ~ ) 🔸--*/
/*--🔸 (sub-3 ~ ) 🔸--*/
.t-badge1 {
  display: inline-block;
  width: 3.6rem;
  height: 1.25rem;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  background: #EEF2F5;
}
.t-badge1 > span {
  font-size: 0.7rem;
  line-height: 1.25rem;
}

.t-badge2 {
  display: inline-block;
  width: 3.6rem;
  height: 1.25rem;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  background: #22859B;
}
.t-badge2 > span {
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.25rem;
}

.setting-wrap {
  display: flex;
  gap: 1.5rem;
  height: calc(100% - 2.75rem);
}
.setting-wrap > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.setting-wrap .code-list > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding-right: 1.3rem;
  overflow-y: auto;
}
.setting-wrap .code-list > ul::-webkit-scrollbar {
  width: 0.3rem;
}
.setting-wrap .code-list > ul::-webkit-scrollbar-thumb {
  background-color: #22859B;
  border-radius: 2.5rem;
  border: 0.5px solid #D5DEE2;
}
.setting-wrap .code-list > ul::-webkit-scrollbar-track {
  background-color: #D5DEE2;
  border-radius: 2.5rem;
}
.setting-wrap .code-list > ul > li .list-box {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border-top: 1px solid #BAC6CF;
  border-right: 1px solid #BAC6CF;
  border-bottom: 1px solid #BAC6CF;
  border-left: 5px solid #BAC6CF;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.setting-wrap .code-list > ul > li .list-box > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setting-wrap .code-list > ul > li .list-box > p .down-btn {
  width: 0.7rem;
  height: 0.4rem;
  background: url(/assets/images/sub/arrow-down.png) no-repeat center/200%;
  transform: rotate(180deg);
  transition: 0.3s;
}
.setting-wrap .code-list > ul > li .list-box .inner-list-box {
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  border-top: 1px solid #BAC6CF;
  border-right: 1px solid #BAC6CF;
  border-bottom: 1px solid #BAC6CF;
  border-left: 5px solid #BAC6CF;
  background: #fff;
  margin-top: 0.4rem;
  display: none;
}
.setting-wrap .code-list > ul > li .list-box .inner-list-box.active {
  display: block;
}
.setting-wrap .code-list > ul > li .list-box.active {
  border-top: 1px solid #009A80;
  border-right: 1px solid #009A80;
  border-bottom: 1px solid #009A80;
  border-left: 5px solid #009A80;
  background: #F6FCFB;
}
.setting-wrap .code-list > ul > li .list-box.active .down-btn {
  transform: rotate(0deg);
}
.setting-wrap .code-detail .code-txt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.75rem;
  background: #F3F7FA;
  padding: 1rem;
  flex: 1;
}
.setting-wrap .code-detail .code-txt > p > strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.setting-wrap .code-detail .code-txt-none {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: #F3F7FA;
  padding: 1rem;
  flex: 1;
}

.setting-wrap2 {
  display: flex;
  gap: 1.5rem;
}
.setting-wrap2 > div {
  display: flex;
  flex-direction: column;
}
.setting-wrap2 .authority-info1 {
  flex: 1;
}
.setting-wrap2 .menu-info1 {
  width: 26%;
  height: 100%;
}
.setting-wrap2 .menu-info1 .depth-check {
  border-radius: 0.75rem;
  background: #F3F7FA;
  padding: 1rem;
  height: 28rem;
}
.setting-wrap2 .menu-info1 .depth-check .tit {
  font-size: 0.8rem;
  font-weight: 700;
}
.setting-wrap2 .menu-info1 .depth-check > ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.setting-wrap2 .menu-info1 .depth-check > ul > li {
  padding-left: 1.1rem;
  position: relative;
}
.setting-wrap2 .menu-info1 .depth-check > ul > li > ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.setting-wrap2 .menu-info1 .depth-check > ul > li > ul > li {
  padding-left: 1.4rem;
  position: relative;
}
.setting-wrap2 .menu-info1 .depth-check > ul > li > ul > li:before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-left: 1px dashed #BAC6CF;
  border-bottom: 1px dashed #BAC6CF;
  position: absolute;
  left: 0.3rem;
  top: 0.2rem;
}
.setting-wrap2 .menu-info1 .depth-check > ul > li:before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-left: 1px dashed #BAC6CF;
  border-bottom: 1px dashed #BAC6CF;
  position: absolute;
  left: 0;
  top: 0.2rem;
}

.setting-wrap3 {
  display: flex;
  gap: 1.5rem;
}
.setting-wrap3 .authority-info2 {
  flex: 1;
}
.setting-wrap3 .authority-info2 > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.setting-wrap3 .authority-info2 .info-list1 {
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  padding: 0.5rem 1rem;
}
.setting-wrap3 .authority-info2 .info-list1 > p {
  color: #fff;
  font-weight: 600;
}
.setting-wrap3 .authority-info2 .info-list2 {
  border-radius: 0.5rem;
  border: 1px solid #BAC6CF;
  background: #F3F7FA;
  padding: 0.5rem 1rem;
}
.setting-wrap3 .authority-info2 .info-list2 > p {
  font-weight: 500;
}
.setting-wrap3 .authority-info2 .info-list3 > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
  border: 1px solid #BAC6CF;
  background: #F3F7FA;
  padding: 0.5rem 1rem;
  transition: 0.2s;
}
.setting-wrap3 .authority-info2 .info-list3 > p > span {
  font-weight: 500;
}
.setting-wrap3 .authority-info2 .info-list3 > p .down-btn {
  width: 1.2rem;
  height: 1.2rem;
  background: url(/assets/images/sub/arrow-down.png) no-repeat center/130%;
  transform: rotate(180deg);
  transition: 0.3s;
}
.setting-wrap3 .authority-info2 .info-list3 > ul {
  padding-left: 1rem;
  padding-top: 0.5rem;
  display: none;
}
.setting-wrap3 .authority-info2 .info-list3.active > p {
  border-top: 1px solid #009A80;
  border-right: 1px solid #009A80;
  border-bottom: 1px solid #009A80;
  border-left: 5px solid #009A80;
  background: #F6FCFB;
}
.setting-wrap3 .authority-info2 .info-list3.active > p > span {
  font-weight: 600;
}
.setting-wrap3 .authority-info2 .info-list3.active > p .down-btn {
  transform: rotate(0deg);
}
.setting-wrap3 .authority-info2 .info-list3.active > ul {
  display: block;
}
.setting-wrap3 .menu-info2 {
  width: 26%;
}
.setting-wrap3 .menu-info2 > div {
  border-radius: 0.75rem;
  background: #F3F7FA;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 28.1rem;
}
.setting-wrap3 .menu-info2 > div > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.setting-wrap3 .menu-info2 > div > div:nth-child(1) .menu-info-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.setting-wrap3 .menu-info2 > div > div:nth-child(1) .menu-info-list > span {
  display: inline-block;
  min-width: 4rem;
}
.setting-wrap3 .menu-info2 > div > div:nth-child(1) .menu-info-list > .InpSel {
  flex: 1;
}
.setting-wrap3 .menu-info2 > div > div:nth-child(1) .menu-info-list > div {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.setting-wrap3 .menu-info2 > div > div:nth-child(1) .menu-info-list > div > input {
  width: 8.2rem;
}

.total-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.total-info > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #EEF2F5;
}
.total-info > div > span {
  font-size: 0.9rem;
  font-weight: 600;
}
.total-info > div > p > strong {
  color: #107F93;
  font-size: 1.2rem;
  font-weight: 700;
  margin-right: 0.25rem;
}

/*--🔸 /// (sub-3 ~ ) 🔸--*/
.graph-con .graph1-wrap {
  position: relative;
  width: 100%;
}

#gauge-line {
  stroke-dasharray: 280 9999;
  stroke-dashoffset: 0.1;
  animation: gauge 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

@keyframes gauge {
  0% {
    stroke-dashoffset: 330;
  }
  100% {
    stroke-dashoffset: 0.1;
  }
}
.graph-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}
.graph-txt .badge3 {
  width: 2.2rem;
}
.graph-txt .badge3 > span {
  font-size: 0.5rem;
}
.graph-txt .txt {
  text-align: center;
}
.graph-txt .txt > p {
  background: linear-gradient(90deg, #FFB027 11%, #53FFE2 89%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.2rem;
  font-weight: 500;
}
.graph-txt .txt > em {
  color: #fff;
}

.graph-txt2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 87%;
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}
.graph-txt2 > span {
  color: #BAC6CF;
  font-size: 0.5rem;
  font-weight: 300;
}

/*----------------------------🔸 25.06 ~~ 🔸----------------------------*/
/*--🔸 map 🔸--*/
#sub_container.solar-map {
  width: 100%;
  min-height: calc(100vh - 3rem);
  height: 100%;
  background: url(/assets/images/sub/map-back.png) no-repeat center center/cover;
  position: relative;
}
#sub_container.solar-map #contents {
  padding: 0;
}
#sub_container.solar-map .container {
  width: 100% !important;
  height: 100%;
}
#sub_container.solar-map .map-legend2 {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
#sub_container.solar-map .location-btn-wrap {
  position: absolute;
  top: 1rem;
  right: 3rem;
  z-index: 2;
}
#sub_container.solar-map .zoom-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}
#sub_container.solar-map .spot-tag-wrap1 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
#sub_container.solar-map .map-weather-box {
  position: absolute;
  bottom: 4.5rem;
  right: 1rem;
  z-index: 2;
}

#sub_container.solar-map2 {
  width: 100%;
  min-height: calc(100vh - 3rem);
  height: 100%;
  background: url(/assets/images/sub/map-back.png) no-repeat center center/cover;
  position: relative;
  z-index: 2;
}
#sub_container.solar-map2 #contents {
  padding: 0;
}
#sub_container.solar-map2 .container {
  width: 100% !important;
  height: 100%;
}
#sub_container.solar-map2 .location-btn-wrap {
  position: absolute;
  top: 1rem;
  right: 3rem;
  z-index: 2;
}
#sub_container.solar-map2 .zoom-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}
#sub_container.solar-map2 .spot-tag-wrap1 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
#sub_container.solar-map2 .map-weather-box {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
}
#sub_container.solar-map2 div[class^=tab-st] {
  z-index: 2;
}

#sub_container.solar-map2-2 {
  width: 100%;
  height: calc(100vh - 3rem);
  background: url(/assets/images/sub/map-back.png) no-repeat center center/cover;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
#sub_container.solar-map2-2 #contents {
  padding: 0;
}
#sub_container.solar-map2-2 .container {
  width: 100% !important;
  height: 100%;
}
#sub_container.solar-map2-2 .location-btn-wrap {
  position: absolute;
  top: 1rem;
  right: 3rem;
  z-index: 2;
}
#sub_container.solar-map2-2 .zoom-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}
#sub_container.solar-map2-2 .spot-tag-wrap1 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}
#sub_container.solar-map2-2 .map-weather-box {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
}
#sub_container.solar-map2-2 div[class^=tab-st] {
  z-index: 2;
  overflow: visible;
}
#sub_container.solar-map2-2 .map-info-box {
  position: absolute;
  top: 1.5rem;
  left: 0;
  z-index: 2;
}
#sub_container.solar-map2-2 .map-info-box .info-txt-wrap {
  max-height: 35rem;
  overflow-y: scroll;
  padding-right: 1rem;
}
#sub_container.solar-map2-2 .map-info-box .info-txt-wrap::-webkit-scrollbar {
  width: 4px;
}
#sub_container.solar-map2-2 .map-info-box .info-txt-wrap::-webkit-scrollbar-track {
  background: #D9D9D9;
  border-radius: 4px;
}
#sub_container.solar-map2-2 .map-info-box .info-txt-wrap::-webkit-scrollbar-thumb {
  background: #B1B1B1;
  border-radius: 4px;
}
#sub_container.solar-map2-2 .map-info-box .info-txt-wrap::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

/* 🔸 map / inverter - mobile 🔸 */
#sub_container.solar-map-m {
  background: #A5D1F2;
  position: relative;
}
#sub_container.solar-map-m #contents:before {
  background: none;
  display: none;
}
#sub_container.solar-map-m .container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#sub_container.solar-map-m .location-btn-wrap {
  display: flex;
  width: 100%;
  gap: 0.2rem;
  overflow: auto;
  padding-bottom: 0.5rem;
}
#sub_container.solar-map-m .location-btn-wrap .location-btn > span {
  white-space: nowrap;
}
#sub_container.solar-map-m .map-area-m {
  width: 100%;
  height: 15rem;
  position: relative;
}
#sub_container.solar-map-m .map-area-m .spot-tag-wrap1 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
#sub_container.solar-map-m .map-legend-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 5rem;
  border-radius: 1rem;
  border: 1px solid #C4C4C4;
  background: #fff;
  overflow: hidden;
}
#sub_container.solar-map-m .map-legend-m > div {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50%;
}
#sub_container.solar-map-m .map-legend-m > div > div {
  border-right: 1px solid #C4C4C4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 1;
  height: 100%;
}
#sub_container.solar-map-m .map-legend-m > div > div > span {
  white-space: nowrap;
  font-size: 0.7rem;
}
#sub_container.solar-map-m .map-legend-m > div > div > span > strong {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0.15rem;
}
#sub_container.solar-map-m .map-legend-m > div > div:last-of-type {
  border-right: none;
}
#sub_container.solar-map-m .map-legend-m > div.rowTop {
  border-bottom: 1px solid #C4C4C4;
}
#sub_container.solar-map-m .map-weather-box {
  min-width: unset;
  border-radius: 0.5rem;
  padding: 0.9rem;
}
#sub_container.solar-map-m .map-info-box {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #C1CCD4;
  padding: 0.9rem;
}
#sub_container.solar-map-m .map-info-box .tit {
  font-size: 1.1rem;
}
#sub_container.solar-map-m .map-info-box .info-txt .txt > strong {
  font-size: 1rem;
}
#sub_container.solar-map-m .map-info-box .info-txt .tit2 {
  font-size: 0.9rem;
}
#sub_container.solar-map-m .map-info-box .info-status > span {
  font-size: 0.7rem;
}
#sub_container.solar-map-m .map-info-box .info-txt .icon-box-wrap {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
#sub_container.solar-map-m .map-info-box .info-txt .icon-box-wrap > div {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  border-radius: 0.5rem;
  background: #F3F3F3;
  padding: 0.6rem;
}
#sub_container.solar-map-m .map-info-box .info-txt .icon-box-wrap > div .c-tit {
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
#sub_container.solar-map-m .map-info-box .info-txt .icon-box-wrap > div [class^=img] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.9rem;
  height: 2.85rem;
}
#sub_container.solar-map-m .map-info-box .info-txt .icon-box-wrap > div .img1 {
  background: url(/assets/images/sub/info-box1.png) no-repeat center/contain;
}
#sub_container.solar-map-m .map-info-box .info-txt .icon-box-wrap > div .img2 {
  background: url(/assets/images/sub/info-box2.png) no-repeat center/contain;
}
#sub_container.solar-map-m .map-info-box .info-txt .icon-box-wrap > div .img3 {
  background: url(/assets/images/sub/info-box3.png) no-repeat center/contain;
}
#sub_container.solar-map-m .map-info-box .custom-select {
  width: 100%;
  margin-bottom: 0.5rem;
}

.layer-wrap.chart-layer {
  width: 90%;
  max-height: 90%;
}
.layer-wrap.chart-layer .badge-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.layer-wrap.chart-layer .graph-wrap {
  overflow-x: auto;
}
.layer-wrap.chart-layer .graph-wrap::-webkit-scrollbar {
  height: 0.5rem;
}
.layer-wrap.chart-layer .graph-wrap::-webkit-scrollbar-thumb {
  background-color: #22859B;
  border-radius: 2.5rem;
  border: 2px solid #D5DEE2;
  background-clip: padding-box;
}
.layer-wrap.chart-layer .graph-wrap::-webkit-scrollbar-track {
  background-color: #D5DEE2;
  border-radius: 2.5rem;
}
.layer-wrap.chart-layer .graph-wrap .chart {
  min-width: 1200px;
}
.layer-wrap.chart-layer .srh-filter {
  border-radius: 0.5rem;
  border: 1px solid #BAC6CF;
  background: #EEF2F5;
  padding: 0.5rem;
}

#sub_container.inverter-m {
  background: #A5D1F2;
  position: relative;
}
#sub_container.inverter-m #contents:before {
  background: none;
  display: none;
}
#sub_container.inverter-m .container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#sub_container.inverter-m .map-area-m {
  width: 100%;
  height: 15rem;
  position: relative;
}
#sub_container.inverter-m .map-area-m .spot-tag-wrap1 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}
#sub_container.inverter-m .map-legend2 {
  min-width: unset;
}
#sub_container.inverter-m .map-legend2 > div {
  padding: 0 0.25rem;
}
#sub_container.inverter-m .map-legend2 > div > span {
  font-size: 0.7rem;
}
#sub_container.inverter-m .map-legend2 > div > span > strong {
  font-size: 0.8rem;
}
#sub_container.inverter-m .inverter-info-box {
  width: 100%;
}
#sub_container.inverter-m .inverter-info-box > ul > li > div .lst-tit-badge .tit1 {
  font-size: 0.9rem;
}

/* map1 */
.map-info-box {
  width: 25%;
  height: 100%;
  border-radius: 0 2.5rem 0 0;
  background: #fff;
  padding: 1.7rem;
  box-shadow: 5px -5px 20px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
.map-info-box .tit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #555;
  font-size: 1.6rem;
  font-weight: 700;
}
.map-info-box .info-txt-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.map-info-box .info-txt {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  padding: 0.75rem 0;
}
.map-info-box .info-txt .tit1 {
  color: #84878D;
  font-size: 0.8rem;
  font-weight: 400;
}
.map-info-box .info-txt .tit2 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #333;
  font-size: 1.1rem;
  font-weight: 700;
}
.map-info-box .info-txt [class^=txt] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.map-info-box .info-txt .txt {
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
.map-info-box .info-txt .txt > strong {
  font-size: 1.1rem;
  font-weight: 700;
}
.map-info-box .info-txt .txt2 {
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
.map-info-box .info-txt .txt2 > strong {
  color: #333;
  font-size: 1.3rem;
  font-weight: 700;
}
.map-info-box .info-txt .txt3 {
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
.map-info-box .info-txt .txt3 > strong {
  color: #3B8276;
  font-size: 1.5rem;
  font-weight: 800;
}
.map-info-box .info-txt > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.map-info-box .info-txt .g-txt {
  display: inline-flex;
  flex-direction: column;
  align-items: start;
  color: #333;
  font-size: 0.9rem;
  font-weight: 500;
}
.map-info-box .info-txt .g-txt > span > strong {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(180deg, #22869C 0%, #019A81 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 0.25rem;
}
.map-info-box .info-txt:last-child {
  border-bottom: none;
}
.map-info-box .info-txt.type2 {
  gap: 0.5rem;
}
.map-info-box .info-txt.type2 .tit1 {
  min-width: 5rem;
  max-width: 5.5rem;
  word-wrap: break-word;
  word-break: keep-all;
}
.map-info-box .info-txt.type2 .txt {
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
}
.map-info-box .info-txt.type2 > p {
  gap: 1rem;
  justify-content: start;
}
.map-info-box .info-txt.f1 {
  flex: 1;
}
.map-info-box .info-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1.5rem;
  padding: 0.45rem;
  border-radius: 2.5rem;
  background: #F3F3F3;
}
.map-info-box .info-status > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #333;
  font-size: 0.8rem;
  font-weight: 500;
}
.map-info-box .info-status > span > strong {
  font-weight: 700;
}
.map-info-box .info-status [class^=status] {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.map-info-box .info-status .status1 {
  background: #53FFE2;
}
.map-info-box .info-status .status2 {
  background: #FFB027;
}
.map-info-box .info-status .status3 {
  background: #F00;
}
.map-info-box [class^=status-badge] {
  height: 1.45rem;
}
.map-info-box [class^=info-badge] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: 1.35rem;
  border-radius: 1rem;
  background: #C0C0C0;
  padding: 0 0.5rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 400;
}
.map-info-box .info-graph-wrap {
  flex: 1;
}

.map-legend2 {
  border: 1px solid #C4C4C4;
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  border-radius: 2.5rem;
  background: #fff;
}
.map-legend2 > div {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  height: 100%;
  flex: 1;
  border-right: 1px solid #C4C4C4;
  padding: 0.25rem;
}
.map-legend2 > div > span {
  color: #333;
  font-size: 0.7rem;
  font-weight: 500;
}
.map-legend2 > div > span > strong {
  margin: 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.map-legend2 > div:last-child {
  border-right: none;
}

.location-btn-wrap .location-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.45rem;
  border-radius: 2.5rem;
  border: 1px solid #BAC6CF;
  background: #fff;
  padding: 0 1rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.location-btn-wrap .location-btn > span {
  color: #555;
  font-size: 0.7rem;
  font-weight: 400;
}
.location-btn-wrap .location-btn:hover {
  background: #BAC6CF;
}

.spot-tag-wrap1 .spot-tag {
  display: inline-flex;
  flex-direction: column;
}
.spot-tag-wrap1 .spot-tag > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.spot-tag-wrap1 .spot-tag > div .tit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: 1.35rem;
  padding: 0 0.5rem;
  border-radius: 5rem;
  background: #fff;
  color: #333;
  font-size: 0.7rem;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.spot-tag-wrap1 .spot-tag > div .tit .status {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.spot-tag-wrap1 .spot-tag > div .num-label {
  display: inline-flex;
  align-items: center;
  height: 2.35rem;
  color: #fff;
  position: relative;
}
.spot-tag-wrap1 .spot-tag > div .num-label .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 100%;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
}
.spot-tag-wrap1 .spot-tag > div .num-label .txt {
  display: inline-flex;
  align-items: center;
  height: 1.35rem;
  padding: 0 0.5rem;
  border-radius: 0 2.5rem 2.5rem 0;
  position: absolute;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 400;
  white-space: nowrap;
}
.spot-tag-wrap1 .spot-tag.normal > div .tit {
  border: 1px solid #279C98;
}
.spot-tag-wrap1 .spot-tag.normal > div .tit .status {
  background: #62D0C8;
}
.spot-tag-wrap1 .spot-tag.normal > div .num-label .num {
  background: #279C98;
}
.spot-tag-wrap1 .spot-tag.normal > div .num-label .txt {
  background: #279C98;
}
.spot-tag-wrap1 .spot-tag.wrong > div .tit {
  border: 1px solid #FFB027;
}
.spot-tag-wrap1 .spot-tag.wrong > div .tit .status {
  background: #FFB027;
}
.spot-tag-wrap1 .spot-tag.wrong > div .num-label .num {
  background: #E69914;
}
.spot-tag-wrap1 .spot-tag.wrong > div .num-label .txt {
  background: #E69914;
}
.spot-tag-wrap1 .spot-tag.stop > div .tit {
  border: 1px solid #FD3131;
}
.spot-tag-wrap1 .spot-tag.stop > div .tit .status {
  background: #F72F31;
}
.spot-tag-wrap1 .spot-tag.stop > div .num-label .num {
  background: #F00;
}
.spot-tag-wrap1 .spot-tag.stop > div .num-label .txt {
  background: #F00;
}
.spot-tag-wrap1 .spot-tag.preparing > div .tit {
  border: 1px solid #536AFF;
}
.spot-tag-wrap1 .spot-tag.preparing > div .tit .status {
  background: #536AFF;
}
.spot-tag-wrap1 .spot-tag.preparing > div .num-label .num {
  background: #536AFF;
}
.spot-tag-wrap1 .spot-tag.preparing > div .num-label .txt {
  background: #536AFF;
}
.spot-tag-wrap1 .spot-tag.n-used > div .tit {
  border: 1px solid #000;
}
.spot-tag-wrap1 .spot-tag.n-used > div .tit .status {
  background: #000;
}
.spot-tag-wrap1 .spot-tag.n-used > div .num-label .num {
  background: #000;
}
.spot-tag-wrap1 .spot-tag.n-used > div .num-label .txt {
  background: #000;
}
.spot-tag-wrap1 .spot-tag2 > div {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  border-radius: 2.5rem;
  padding-right: 0.5rem;
}
.spot-tag-wrap1 .spot-tag2 > div .tit {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  height: 100%;
  color: #333;
  font-size: 0.7rem;
  font-weight: 400;
  border-radius: 2.5rem;
  padding: 0 0.5rem;
  margin-right: 0.3rem;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  white-space: nowrap;
}
.spot-tag-wrap1 .spot-tag2 > div .tit:before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1.6rem;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}
.spot-tag-wrap1 .spot-tag2 > div .tit .status {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.spot-tag-wrap1 .spot-tag2 > div .txt {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;  
  white-space: nowrap;
}
.spot-tag-wrap1 .spot-tag2.normal > div {
  background: #279C98;
}
.spot-tag-wrap1 .spot-tag2.normal .status {
  background: #62D0C8;
}
.spot-tag-wrap1 .spot-tag2.normal .tit {
  border: 1px solid #279C98;
  background: #fff;
}
.spot-tag-wrap1 .spot-tag2.normal .tit:before {
  background: url(/assets/images/sub/spot-bottom-normal.png) no-repeat center/100%;
}
.spot-tag-wrap1 .spot-tag2.wrong > div {
  background: #E69914;
}
.spot-tag-wrap1 .spot-tag2.wrong .status {
  background: #FFB027;
}
.spot-tag-wrap1 .spot-tag2.wrong .tit {
  border: 1px solid #FFB027;
  background: #fff;
}
.spot-tag-wrap1 .spot-tag2.wrong .tit:before {
  background: url(/assets/images/sub/spot-bottom-wrong.png) no-repeat center/100%;
}
.spot-tag-wrap1 .spot-tag2.stop > div {
  background: #F00;
}
.spot-tag-wrap1 .spot-tag2.stop .status {
  background: #F72F31;
}
.spot-tag-wrap1 .spot-tag2.stop .tit {
  border: 1px solid #FD3131;
  background: #fff;
}
.spot-tag-wrap1 .spot-tag2.stop .tit:before {
  background: url(/assets/images/sub/spot-bottom-stop.png) no-repeat center/100%;
}
.spot-tag-wrap1 .spot-tag2.preparing > div {
  background: #536AFF;
}
.spot-tag-wrap1 .spot-tag2.preparing .status {
  background: #536AFF;
}
.spot-tag-wrap1 .spot-tag2.preparing .tit {
  border: 1px solid #536AFF;
  background: #fff;
}
.spot-tag-wrap1 .spot-tag2.preparing .tit:before {
  background: url(/assets/images/sub/spot-bottom-preparing.png) no-repeat center/100%;
}
.spot-tag-wrap1 .spot-tag2.n-used > div {
  background: #000;
}
.spot-tag-wrap1 .spot-tag2.n-used .status {
  background: #000;
}
.spot-tag-wrap1 .spot-tag2.n-used .tit {
  border: 1px solid #000;
  background: #fff;
}
.spot-tag-wrap1 .spot-tag2.n-used .tit:before {
  background: url(/assets/images/sub/spot-bottom-n-used.png) no-repeat center/100%;
}
.spot-tag-wrap1 .spot-tag3 > div {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  border-radius: 2.5rem;
  background: #fff;
  padding-right: 0.5rem;
}
.spot-tag-wrap1 .spot-tag3 > div .tit {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  height: 100%;
  color: #333;
  font-size: 0.7rem;
  font-weight: 400;
  border-radius: 2.5rem;
  background: #fff;
  padding: 0 0.5rem;
  margin-right: 0.3rem;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  position: relative;
}
.spot-tag-wrap1 .spot-tag3 > div .tit:before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1.6rem;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}
.spot-tag-wrap1 .spot-tag3 > div .tit .status {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
}
.spot-tag-wrap1 .spot-tag3 > div .txt {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
}
.spot-tag-wrap1 .spot-tag3 > div .status-circle [class^=sc] {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.spot-tag-wrap1 .spot-tag3 > div .status-circle .sc1 {
  background: #53FFE2;
}
.spot-tag-wrap1 .spot-tag3 > div .status-circle .sc2 {
  background: #E69914;
}
.spot-tag-wrap1 .spot-tag3 > div .status-circle .sc3 {
  background: #F00;
}
.spot-tag-wrap1 .spot-tag3 > div .status-circle .sc4 {
  background: #F00;
}
.spot-tag-wrap1 .spot-tag3 > div .status-circle .sc5 {
  background: #F00;
}
.spot-tag-wrap1 .spot-tag3.normal > div .status {
  background: url(/assets/images/dashboard/legend-icon3.png) no-repeat center/150%;
}
.spot-tag-wrap1 .spot-tag3.normal > div .tit {
  border: 1px solid #279C98;
}
.spot-tag-wrap1 .spot-tag3.normal > div .tit:before {
  background: url(/assets/images/sub/spot-bottom-normal.png) no-repeat center/100%;
}
.spot-tag-wrap1 .spot-tag3.wrong > div .status {
  background: url(/assets/images/dashboard/legend-icon2.png) no-repeat center/150%;
}
.spot-tag-wrap1 .spot-tag3.wrong > div .tit {
  border: 1px solid #FFB027;
}
.spot-tag-wrap1 .spot-tag3.wrong > div .tit:before {
  background: url(/assets/images/sub/spot-bottom-wrong.png) no-repeat center/100%;
}
.spot-tag-wrap1 .spot-tag3.stop > div .status {
  background: url(/assets/images/dashboard/legend-icon1.png) no-repeat center/150%;
}
.spot-tag-wrap1 .spot-tag3.stop > div .tit {
  border: 1px solid #F00;
}
.spot-tag-wrap1 .spot-tag3.stop > div .tit:before {
  background: url(/assets/images/sub/spot-bottom-stop.png) no-repeat center/100%;
}
.spot-tag-wrap1 .spot-tag4 {
  display: inline-block;
}
.spot-tag-wrap1 .spot-tag4 > div {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.spot-tag-wrap1 .spot-tag4 > div .tit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: auto;
  height: 1.1rem;
  border-radius: 5rem;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 0 0.5rem;
  color: #333;
  font-size: 0.7rem;
  font-weight: 400;
}
.spot-tag-wrap1 .spot-tag4 > div .tit .status {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.spot-tag-wrap1 .spot-tag4 > div .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}
.spot-tag-wrap1 .spot-tag4.normal > div .tit {
  border: 1px solid #279C98;
}
.spot-tag-wrap1 .spot-tag4.normal > div .tit .status {
  background: #62D0C8;
}
.spot-tag-wrap1 .spot-tag4.normal > div .num {
  background: #279C98;
}
.spot-tag-wrap1 .spot-tag4.wrong > div .tit {
  border: 1px solid #FFB027;
}
.spot-tag-wrap1 .spot-tag4.wrong > div .tit .status {
  background: #FFB027;
}
.spot-tag-wrap1 .spot-tag4.wrong > div .num {
  background: #E69914;
}
.spot-tag-wrap1 .spot-tag4.stop > div .tit {
  border: 1px solid #FD3131;
}
.spot-tag-wrap1 .spot-tag4.stop > div .tit .status {
  background: #F72F31;
}
.spot-tag-wrap1 .spot-tag4.stop > div .num {
  background: #F00;
}
.spot-tag-wrap1 .spot-tag5 > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  height: 2rem;
  border-radius: 5rem;
  background: #fff;
  padding: 0 0.1rem 0 0.5rem;
}
.spot-tag-wrap1 .spot-tag5 > div .tit {
  color: #333;
  font-size: 0.75rem;
  font-weight: 400;
}
.spot-tag-wrap1 .spot-tag5 > div .txt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}
.spot-tag-wrap1 .spot-tag5 > div .status {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.spot-tag-wrap1 .spot-tag5.normal > div {
  border: 1px solid #279C98;
}
.spot-tag-wrap1 .spot-tag5.normal > div .txt {
  background: #279C98;
}
.spot-tag-wrap1 .spot-tag5.normal > div .status {
  background: #62D0C8;
  margin-right: 0.1rem;
}
.spot-tag-wrap1 .spot-tag5.wrong > div {
  border: 1px solid #E69914;
}
.spot-tag-wrap1 .spot-tag5.wrong > div .txt {
  background: #E69914;
}
.spot-tag-wrap1 .spot-tag5.wrong > div .status {
  background: #E69914;
  margin-right: 0.1rem;
}
.spot-tag-wrap1 .spot-tag5.stop > div {
  border: 1px solid #F00;
}
.spot-tag-wrap1 .spot-tag5.stop > div .txt {
  background: #F00;
}
.spot-tag-wrap1 .spot-tag5.stop > div .status {
  background: #F00;
  margin-right: 0.1rem;
}
.spot-tag-wrap1 .spot-tag5.preparing > div {
  border: 1px solid #536AFF;
}
.spot-tag-wrap1 .spot-tag5.preparing > div .txt {
  background: #536AFF;
}
.spot-tag-wrap1 .spot-tag5.preparing > div .status {
  background: #536AFF;
  margin-right: 0.1rem;
}
.spot-tag-wrap1 .spot-tag5.n-used > div {
  border: 1px solid #000;
}
.spot-tag-wrap1 .spot-tag5.n-used > div .txt {
  background: #000;
}
.spot-tag-wrap1 .spot-tag5.n-used > div .status {
  background: #000;
  margin-right: 0.1rem;
}

.map-weather-box {
  display: inline-block;
  min-width: 21rem;
  border-radius: 1.5rem;
  border: 1px solid #C4C4C4;
  background: #fff;
  padding: 1rem 1.5rem;
}
.map-weather-box .tit {
  color: #333;
  font-size: 0.9rem;
  font-weight: 700;
}
.map-weather-box [class^=weather-icon] {
  display: inline-flex;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
}
.map-weather-box [class^=weather-icon].cloudy {
  background: url(/assets/images/weather-icons/cloudy.png) no-repeat center/cover;
}
.map-weather-box [class^=weather-icon].partly_cloudy {
  background: url(/assets/images/weather-icons/partly_cloudy.png) no-repeat center/cover;
}
.map-weather-box [class^=weather-icon].rain {
  background: url(/assets/images/weather-icons/rain.png) no-repeat center/cover;
}
.map-weather-box [class^=weather-icon].sun {
  background: url(/assets/images/weather-icons/sun.png) no-repeat center/cover;
}
.map-weather-box > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.map-weather-box > div .map-weather-inner1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1rem;
}
.map-weather-box > div .map-weather-inner1 .condition-txt {
  color: #333;
  font-size: 1rem;
  font-weight: 600;
}
.map-weather-box > div .map-weather-inner1 .tem-txt1 {
  color: #333;
  font-size: 1rem;
  font-weight: 500;
}
.map-weather-box > div .map-weather-inner1 .tem-txt1 > strong {
  font-size: 1.7rem;
  font-weight: 500;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.map-weather-box > div .map-weather-inner2 .tem-txt2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #333;
  margin-bottom: 0.5rem;
}
.map-weather-box > div .map-weather-inner2 .tem-txt2 > p {
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.map-weather-box > div .map-weather-inner2 .tem-txt2 > p > strong {
  font-size: 1.2rem;
}
.map-weather-box > div .map-weather-inner2 .tem-txt2 > em {
  color: #ccc;
  font-weight: 500;
}
.map-weather-box > div .map-weather-inner2 .weather-detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.map-weather-box > div .map-weather-inner2 .weather-detail > div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.map-weather-box > div .map-weather-inner2 .weather-detail > div .datail-tit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.35rem;
  border-radius: 2.5rem;
  background: #EEF2F5;
  font-size: 0.7rem;
  font-weight: 700;
}
.map-weather-box > div .map-weather-inner2 .weather-detail > div > em {
  font-size: 0.7rem;
  font-weight: 400;
}

/* map2 */
.map-graph-box {
  min-height: 13.5rem;
  width: 73%;
  max-width: 73%;
  border-radius: 2.5rem 2.5rem 0 0;
  background: #fff;
  box-shadow: 5px -5px 20px 3px rgba(0, 0, 0, 0.06);
  padding: 1rem 2rem;
}
.map-graph-box .tit {
  color: #333;
  font-size: 1.1rem;
  font-weight: 700;
}

.layer-wrap.weahter-box {
  width: 70%;
}

/* map3 */
.table-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.table-mobile .table-card {
  display: inline-block;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #BAC6CF;
  background: #fff;
  padding: 0.6rem 1rem;
}
.table-mobile .table-card.n-bd{
  border:none;
  padding:0;
}
.table-mobile .table-card .inner-tit {
  display: block;
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.table-mobile .table-card .inner-tit:first-of-type {
  margin-bottom: 0.5rem;
}
.table-mobile .table-card > ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.table-mobile .table-card.type2 > ul{
  gap:0;
}
.table-mobile .table-card > ul > li > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.table-mobile .table-card > ul > li > div .tit {
  color: #84878D;
  font-size: 0.7rem;
}
.table-mobile .table-card > ul > li > div .txt {
  color: #666;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.table-mobile .table-card > ul > li > div .txt-no-ellipsis {
  color: #666;
  font-size: 0.8rem;
  font-weight: 600;
  flex: 1;
}
.table-mobile .table-card > ul > li > div.col {
  flex-direction: column;
  gap: 0.15rem;
  align-items: start;
}
.table-mobile .table-card > ul > li > div.col .txt {
  width: 100%;
}
.table-mobile .table-card > ul > li > div .flex-wrap {
  display: flex;
  gap: 0.25rem;
  width: 100%;
}
.table-mobile .table-card > ul > li > div .flex-wrap > div {
  flex: 1;
}
.table-mobile .table-card > ul > li > div .flex-wrap2 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.table-mobile .table-card > ul > li > div .flex-wrap2 > div:nth-child(1) {
  flex: 2;
}
.table-mobile .table-card > ul > li > div .flex-wrap2 > div:nth-child(2) {
  flex: 1;
}
.table-mobile .table-card > ul > li > div .flex-wrap2 [class^=btn-style] {
  margin: 0;
}
.table-mobile .table-card > ul > li > div .calendar-input {
  max-width: unset;
}
.table-mobile .table-card > ul.line {
  border-bottom: 1px solid #ccc;
}

.table-mobile .table-card.no-data{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.table-mobile .table-card.no-data > ul{
  padding-bottom: 0;
  align-items: center;
}

.table-mobile .table-card.type2 ul > li > div{
  flex-direction: row;
  justify-content: space-between;
}
.table-mobile .table-card.type2 > ul > li > div .txt{
  flex: none;
}

.table-mobile.add{
  min-height: 10rem;
  max-height: 20rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.table-mobile.add .table-card > ul > li > div .tit {
  min-width: unset;
  font-size: 0.75rem;
}
.table-mobile.add .table-card > ul > li > div .txt{
  white-space: break-spaces;
  font-size: 0.75rem;
}

.input-list-m .list-tit {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}
.input-list-m > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.input-list-m > ul li > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.input-list-m > ul li > div .input-tit {
  color: #84878D;
  font-size: 0.8rem;
  font-weight: 400;
}
.input-list-m > ul li > div .input-unit {
  display: flex;
  align-items: end;
  gap: 0.5rem;
}

/* inverter1 */
#sub_container.inverter1 {
  width: 100%;
  height: calc(100vh - 3rem);
  background: url(/assets/images/sub/map-back.png) no-repeat center/cover;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
#sub_container.inverter1 #contents {
  padding: 0;
}
#sub_container.inverter1 .container {
  width: 100% !important;
  height: 100%;
}
#sub_container.inverter1 .location-btn-wrap {
  position: absolute;
  top: 1rem;
  right: 3rem;
  z-index: 2;
}
#sub_container.inverter1 .zoom-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}
#sub_container.inverter1 .inverter-info-box {
  position: absolute;
  top: 1.5rem;
  left: 0;
  z-index: 2;
}
#sub_container.inverter1 .map-legend2 {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.inverter-info-box {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.inverter-info-box .tit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #333;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.inverter-info-box .num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: #B9B9B9;
  padding: 0 0.5rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
}
.inverter-info-box > ul {
  max-height: 39rem;
  overflow: scroll;
  padding-right: 0.35rem;
}
.inverter-info-box > ul > li > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid #BAC6CF;
  background: #fff;
  padding: 0.65rem 1rem;
}
.inverter-info-box > ul > li > div .lst-tit-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inverter-info-box > ul > li > div .lst-tit-badge .tit1 {
  color: #333;
  font-size: 0.9rem;
  font-weight: 700;
}
.inverter-info-box > ul > li > div .lst-tit-badge [class^=status] {
  display: inline-flex;
  align-items: center;
  height: 1rem;
  width: 2rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  white-space: nowrap;
}
.inverter-info-box > ul > li > div .lst-tit-badge .status1 {
  background: #279C98;
}
.inverter-info-box > ul > li > div .lst-tit-badge .status2 {
  background: #E69914;
}
.inverter-info-box > ul > li > div .lst-tit-badge .status3 {
  background: #F00;
}
.inverter-info-box > ul > li > div .info-txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.inverter-info-box > ul > li > div .info-txt-wrap .info-txt {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.inverter-info-box > ul > li > div .info-txt-wrap .info-txt.row {
  flex-direction:row;
  gap:0.5rem;
}
.inverter-info-box > ul > li > div .info-txt-wrap .info-txt .tit2 {
  color: #84878D;
  font-size: 0.7rem;
}
.inverter-info-box > ul > li > div .info-txt-wrap .info-txt .txt {
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.inverter-info-box > ul > li > div .info-txt-wrap .info-txt .txt-truncate-3line {
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.inverter-info-box > ul > li > div .info-txt-wrap .info-txt2 {
  display: flex;
  gap: 0.35rem;
  flex-direction: column;
}
.inverter-info-box > ul > li > div .info-txt-wrap .info-txt2 .tit2 {
  color: #84878D;
  font-size: 0.8rem;
  min-width: 3.5rem;
  width: auto;
}
.inverter-info-box > ul > li > div .info-txt-wrap .info-txt2 .txt {
  padding-left: 0.5rem;
  color: #666;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.inverter-info-box > ul > li > div .info-txt-wrap::-webkit-scrollbar {
  width: 4px;
}
.inverter-info-box > ul > li > div .info-txt-wrap::-webkit-scrollbar-track {
  background: #D9D9D9;
  border-radius: 4px;
}
.inverter-info-box > ul > li > div .info-txt-wrap::-webkit-scrollbar-thumb {
  background: #B1B1B1;
  border-radius: 4px;
}
.inverter-info-box > ul > li > div .info-txt-wrap::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}
.inverter-info-box > ul > li + li {
  margin-top: 0.5rem;
}

.layer-wrap.inverter {
  width: 70%;
}
.layer-wrap.inverter .tbl-st2:nth-of-type(2) {
  margin-top: 1rem;
}
.layer-wrap.inverter .tbl-st2:nth-of-type(2) table {
  border-top: none;
}

/* inverter1-m */
.detail-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-list1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #C1CCD4;
  background: #fff;
  padding: 0.6rem 1rem;
}
.detail-list1 .list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.detail-list1 .list .tit {
  color: #84878D;
  font-size: 0.8rem;
  font-weight: 400;
}
.detail-list1 .list .txt {
  color: #666;
  font-size: 0.9rem;
  font-weight: 600;
  word-wrap: break-word;
  word-break: keep-all;
}
.detail-list1 .list .txt .txt1 {
  display: block;
}
.detail-list1 .list .status-txt {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.detail-list2 {
  border-radius: 0.5rem;
  border: 1px solid #C1CCD4;
  background: #fff;
  padding: 0.6rem 1rem;
}
.detail-list2 .list-tit {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}
.detail-list2 .list > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.detail-list2 .list > ul > li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.detail-list2 .list > ul > li > div .tit {
  color: #84878D;
  font-size: 0.8rem;
  font-weight: 400;
}
.detail-list2 .list > ul > li > div .txt {
  color: #666;
  font-size: 0.9rem;
  font-weight: 700;
}

/* evnet */
#sub_container.inverter2 {
  width: 100%;
  height: calc(100vh - 3rem);
  background: #A5D1F2;
  padding: 0;
}
#sub_container.inverter2 #contents {
  padding: 0;
}
#sub_container.inverter2 .container {
  width: 100% !important;
  height: 100%;
  padding: 0 1rem;
}

.inverter2-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.inverter2-wrap .inverter-map {
  flex: 1;
  background: url(/assets/images/sub/inverter-map.png) no-repeat center/contain;
  padding: 1rem 0;
  position: relative;
}
.inverter2-wrap .inverter-map .zoom-btn {
  position: absolute;
  right: 0;
  z-index: 2;
}
.inverter2-wrap .inverter-map .spot-tag-wrap1 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.inverter2-wrap .inverter-map .spot-tag-wrap1 .spot-tag4 {
  position: absolute;
}
.inverter2-wrap .inverter-map .map-legend2 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.inverter2-wrap .col-wrap {
  flex: 1;
}

.btns.w-100 [class^=btn-style] {
  width: 100%;
}

.btns.f1 [class^=btn-style] {
  flex: 1;
}

#sub_container.event2 {
  width: 100%;
  height: calc(100vh - 3rem);
  padding: 0;
  background: url(/assets/images/sub/event-map.png) no-repeat center/100% 100%;
}
#sub_container.event2 #contents {
  padding: 0;
}
#sub_container.event2 #contents:before {
  display: none;
}
#sub_container.event2 .container {
  width: 100% !important;
  height: 100%;
  padding: 0 1rem;
}

.event-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.event-wrap .map-con {
  flex: 1;
  position: relative;
}
.event-wrap .map-con .zoom-btn {
  position: absolute;
  right: 0;
}
.event-wrap .col-wrap {
  flex: 1;
}

.layer-wrap.event-layer {
  max-height: 90%;
  width: 70%;
}
.layer-wrap.event-layer [class^=status-badge] {
  height: 1.45rem;
}

.event-pop {
  height: 30rem;
  overflow: auto;
}
.event-pop > ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1rem;
  padding-bottom: 1.5rem;
}
.event-pop > ul > li.info-type1 > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.event-pop > ul > li.info-type1 > div > p {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.event-pop > ul > li.info-type1 .tit {
  color: #84878D;
  font-weight: 700;
  white-space: nowrap;
}

.event-pop > ul > li.info-type2 > div {
  display: flex;
  align-items: flex-start;
}
.event-pop > ul > li.info-type2 .tit {
  color: #84878D;
  font-weight: 700;
  width: 4.3rem;

}
.event-pop > ul > li.info-type2 .txt-wrap > span {
  display: block;
  color: #666;
  font-size: 0.9rem;
  font-weight: 700;
}
.event-pop > ul > li.info-type2 .list > li > p {
  position: relative;
  padding-left: 0.8rem;
}
.event-pop > ul > li.info-type2 .list > li > p:before {
  content: "";
  display: inline-block;
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 50%;
  background: #666;
  position: absolute;
  left: 0;
  top: 0.45rem;
}
.event-pop > ul > li.info-type2 .txt-area {
  flex: 1;
}
.event-pop > ul > li.info-type3 > div {
  display: flex;
}
.event-pop > ul > li.info-type3 .tit {
  color: #84878D;
  font-size: 0.8rem;
  width: 4.3rem;
}
.event-pop .tit-txt-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.event-pop .tit-txt-btn > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.event-pop .tit-txt-btn .tit {
  display: inline-block;
  color: #84878D;
}
.event-pop .tit-txt-btn .txt {
  color: #666;
  font-weight: 700;
}

.layer-wrap.event-layer2 {
  width: 70%;
  max-height: 85%;
}
.layer-wrap.event-layer2 .btns {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: end;
  width: 100%;
}
.layer-wrap.event-layer2 .btns > a {
  flex: none;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.attachment-list .tit {
  color: #84878D;
  font-size: 0.8rem;
  font-weight: 400;
}
.attachment-list .attachment > a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 0.75rem;
  border: 1px solid #ccc;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.attachment-list .attachment > a:hover {
  font-weight: 500;
}
.attachment-list .attachment > a > span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.basic-box {
  border-radius: 0.5rem;
  border: 1px solid #C1CCD4;
  background: #fff;
  padding: 0.6rem 1rem;
}
.basic-box .tit {
  color: #84878D;
  display: inline-block;
  margin-bottom: 0.25rem;
}
.basic-box .graph {
  max-width: 100%;
  overflow: auto;
  padding-bottom: 0.5rem;
}
.basic-box .graph::-webkit-scrollbar {
  height: 0.5rem;
}
.basic-box .graph::-webkit-scrollbar-thumb {
  background-color: #22859B;
  border-radius: 2.5rem;
  border: 2px solid #D5DEE2;
  background-clip: padding-box;
}
.basic-box .graph::-webkit-scrollbar-track {
  background-color: #D5DEE2;
  border-radius: 2.5rem;
}

/* report */
.report-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.report-wrap .titT3 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}
.report-wrap .titT3 [class^=badge] {
  padding: 0.15rem 0.5rem;
}
.report-wrap .titT3 [class^=badge] > span {
  font-size: 0.7rem;
  font-weight: 600;
}

[class^=report-btn] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 1.6rem;
  border-radius: 2.5rem;
  padding: 0 0.5rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
[class^=report-btn] > span {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.re-btns {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.report-btn1 {
  border: 1px solid #18766B;
  background: #18766B;
}
.report-btn1:hover {
  background: #EEF2F5;
}
.report-btn1:hover > span {
  color: #333;
}

.report-btn2 {
  border: 1px solid #455060;
  background: #455060;
}
.report-btn2:hover {
  background: #EEF2F5;
}
.report-btn2:hover > span {
  color: #333;
}

/* notice */
.notice table .txt-area {
  min-height: 14rem;
  height: 100%;
  overflow: auto;
}
.notice table .txt-area textarea {
  height: 100%;
}

.board-form {
  display: flex;
  flex-direction: column;
  border-top: 2px solid #18766B;
  padding: 1rem;
}
.board-form .tit-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.board-form .tit-wrap .tit {
  color: #333;
  font-size: 1.3rem;
  font-weight: 700;
}
.board-form .tit-wrap .date {
  color: #555;
  font-size: 0.75rem;
  font-weight: 400;
}
.board-form .tit-wrap .date .time {
  margin-left: 0.15rem;
}
.board-form .txt-box {
  min-height: 7rem;
  max-height: 10rem;
  overflow: auto;
  border-top: 1px solid #ccc;
  padding: 1rem;
}

.table-mobile-re {
  display:flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #fff;
}

.table-mobile-re .table-card .card-tit {
  display: inline-block;
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.table-mobile-re .table-card .inner-tit {
  display: block;
  color: #333;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.table-mobile-re .table-card > ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid #BAC6CF;
  padding: 0.75rem;
}
.table-mobile-re .table-card > ul > li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-mobile-re .table-card > ul > li > div .tit {
  display: inline-block;
  min-width: 5rem;
  width: auto;
  color: #84878D;
  font-size: 0.8rem;
  font-weight: 400;
}
.table-mobile-re .table-card > ul > li > div .txt {
  color: #666;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /*flex: 1;*/
}
.table-mobile-re .table-card.type2 > ul {
  background: #18766B;
}
.table-mobile-re .table-card.type2 > ul > li > div .tit {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
}
.table-mobile-re .table-card.type2 > ul > li > div .txt {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.table-mobile-re .table-card.type3 > ul {
  border: 1px solid #18766B;
}
.table-mobile-re .table-card.type3 > ul > li > div .txt {
  color: #18766B;
  font-weight: 600;
}

.table-mobile-re2 .card-tit {
  display: inline-block;
  color: #333;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.table-mobile-re2 > div {
  /*border-radius: 0.5rem;*/
  /*border: 1px solid #C1CCD4;*/
  background: #fff;
  /*padding: 1rem;*/
}
.table-mobile-re2 > div > ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid #C1CCD4;
  background: #fff;
  padding: 0.75rem;
}
.table-mobile-re2 > div > ul > li > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.table-mobile-re2 > div > ul > li > div .tit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #84878D;
  font-size: 0.8rem;
  font-weight: 400;
}
.table-mobile-re2 > div > ul > li > div .txt {
  color: #666;
  font-size: 0.8rem;
  font-weight: 600;
}

.reportTab > ul {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 0.5rem;
}
.reportTab > ul > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 1.6rem;
  padding: 0 1rem;
  border-radius: 2.5rem;
  border: 1px solid #BAC6CF;
  background: #fff;
  color: #555;
  white-space: nowrap;
}
.reportTab > ul > li.on > a {
  background: #18766B;
  color: #fff;
}

/* 자주묻는 질문 */
.board-form2 {
  margin-top: 1rem;
}
.board-form2 .current {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.board-form2 .current > span {
  color: #84878D;
  font-size: 0.75rem;
}
.board-form2 .current > span > strong {
  color: #107F93;
  font-weight: 700;
  margin: 0 0.15rem;
}
.board-form2 > ul > li > div {
  border-bottom: 1px solid #ccc;
}
.board-form2 > ul > li > div .tit-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}
.board-form2 > ul > li > div .tit-wrap > p {
  display: inline-flex;
  align-items: center;
  height: 2.3rem;
  gap: 1rem;
}
.board-form2 > ul > li > div .tit-wrap > p .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(247, 247, 247, 0.6);
  color: #444;
  font-size: 0.8rem;
  font-weight: 700;
}
.board-form2 > ul > li > div .tit-wrap > p .tit {
  color: #444;
}
.board-form2 > ul > li > div .tit-wrap .toggle {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.board-form2 > ul > li > div .tit-wrap .toggle.on {
  transform: rotate(180deg);
}
.board-form2 > ul > li > div .answer-box {
  border-top: 1px solid #ccc;
  background: #F7FCFC;
  padding: 0.5rem;
}
.board-form2 > ul > li > div .answer-box > div {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.board-form2 > ul > li > div .answer-box > div .a-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  color: #fff;
  font-weight: 700;
}
.board-form2 > ul > li > div .attach-list {
  border: none;
}
.board-form2 > ul > li:first-child {
  border-top: 2px solid #18766B;
}

/* 설비상태 팝업 */
.layer-wrap .addres-srh{
  padding: 1rem 0;
}

/*  ---- responsive ---- */
@media screen and (max-width: 1875px) {
  .setting-wrap3 .menu-info2 {
    width: 30%;
  }
}
/* 1800px */
@media (max-width: 1800px) {
  .card-item-wrap2 .card-item2 {
    flex: 0 0 calc((100% - 3rem) / 4); /* gap 계산 포함 */
    max-width: calc((100% - 3rem) / 4); /* 한 줄에 4개 */
  }
  .card-list-wrap .card-list {
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .card-list-wrap .card-list .tit {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }
  .card-list-wrap .card-list .value-con {
    width: 25%;
    padding: 0.5rem;
  }
  .card-list-wrap .card-list .list-detail > div {
    flex-direction: column;
  }
  .sub-value-4 > div:nth-child(2) {
    flex-wrap: wrap;
  }
  .sub-value-4 > div:nth-child(2) > div {
    flex: none;
    width: 100%;
  }
}
/* 1680px */
@media screen and (max-width: 1680px) {
  .weather-wrap .weather-inner2 > div {
    gap: 0.5rem;
  }
  .weather-wrap .weather-inner1 > div .weather-inner1-2 .tem-txt2 > p {
    text-align: center;
  }
  .setting-wrap3 .menu-info2 {
    width: 45%;
  }
}
/* 1600px */
@media (max-width: 1600px) {
  .card-item-wrap .card-item {
    max-width: 100%;
    min-width: none;
  }
  .card-item-wrap2 .card-item2 {
    flex: 0 0 calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3); /* 한 줄에 3개 */
  }
  .setting-wrap2 {
    flex-wrap: wrap;
  }
  .setting-wrap2 .authority-info1 {
    flex: none;
    width: 100%;
  }
  .setting-wrap2 .menu-info1 {
    width: 100%;
  }
  .setting-wrap2 .menu-info1 .depth-check {
    height: auto;
  }
  .setting-wrap2.min-h-4 {
    min-height: none;
  }
}
/* 1400px */
@media (max-width: 1400px) {
  .sub-value-1 > div {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: normal;
  }
  .sub-value-1 > div > div {
    width: calc(33.3% - 1rem);
  }
  .forecast-list > li {
    width: auto;
  }
  .forecast-list > li > div {
    padding: 0 0.25rem;
  }
  .sub-value-2 > div {
    flex-wrap: wrap;
  }
  .sub-value-2 > div .graph-item {
    width: calc(50% - 1rem);
  }
  .sub-value-3 {
    flex-wrap: wrap;
    justify-content: unset;
    gap: 1rem;
  }
  .sub-value-3 .value1 {
    width: calc(50% - 1rem);
  }
  .sub-value-3 .value2 {
    width: calc(50% - 1rem);
  }
  .sub-value-3 .value3 {
    width: 60%;
  }
}
/* 1200px */
@media (max-width: 1200px) {
  .card-item-wrap2 .card-item2 {
    flex: 0 0 calc((100% - 1rem) / 2);
    max-width: calc((100% - 1rem) / 2); /* 한 줄에 2개 */
  }
  .card-list-wrap .card-list .value-con {
    width: 28%;
  }
  .ai-box-wrap {
    flex-wrap: wrap;
  }
  .ai-box-wrap > div {
    flex: none;
    width: 100%;
  }
  .tab-st4.type2 {
    width: 40%;
  }
  .setting-wrap3 .menu-info2 {
    width: 50%;
  }
}
/* 1024px */
@media (max-width: 1024px) {
  .card-item-wrap2 .card-item2 {
    flex: 0 0 calc((100% - 1rem) / 2);
    max-width: calc((100% - 1rem) / 2); /* 한 줄에 3개 */
  }
  .tab-st4 {
    border-radius: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem;
  }
}
/* 950px */
@media screen and (max-width: 950px) {
  .card-list-wrap .card-list {
    flex-wrap: wrap;
    width: 100%;
  }
  .card-list-wrap .card-list .tit {
    width: 20%;
  }
  .card-list-wrap .card-list .value-con {
    flex: 1;
  }
  .card-list-wrap .card-list .list-detail {
    width: 100%;
    flex: none;
  }
}
/* 870px */
@media screen and (max-width: 870px) {
  .map .flex-con2.res2 {
    flex-wrap: wrap;
  }
  .map .flex-con2.res2 .titT1 {
    width: 100%;
    margin-bottom: 0.5rem !important;
  }
  .setting-wrap {
    flex-wrap: wrap;
    height: auto;
  }
  .setting-wrap > div {
    flex: none;
    width: 100%;
  }
  .setting-wrap > div.code-list {
    max-height: 20.5rem;
  }
  .setting-wrap3 {
    flex-wrap: wrap;
  }
  .setting-wrap3 .menu-info2 {
    width: 100%;
  }
  .setting-wrap3 .menu-info2 > div {
    height: 15rem;
  }
  .setting-wrap3 .menu-info2 > div .menu-info-list > div > input {
    flex: 1;
  }
}
/* 768px */
@media (max-width: 768px) {
  .sub-value-1 > div > div {
    width: calc(50% - 1rem);
  }
  .card-sort {
    flex-wrap: wrap;
  }
  .card-sort > div {
    width: 100%;
  }
  .card-sort > div:nth-child(2) {
    justify-content: end;
  }
  .map .flex-con2.res2 .flex-con3 {
    width: 100%;
  }
  .map .flex-con2.res2 .flex-con3 .custom-select {
    width: 33%;
  }
  .card-list-wrap .card-list .tit {
    width: 100%;
  }
  .sub-value-3 .value1, .sub-value-3 .value2, .sub-value-3 .value3 {
    width: 100%;
  }
  .sub-value-4 > div:nth-child(2) .value1 > div {
    flex-wrap: wrap;
  }
  .sub-value-4 > div:nth-child(2) .value1 > div > div {
    width: calc(50% - 1rem);
    flex: none;
  }
  .sub-value-4 > div:nth-child(2) .value2 .box-style1 {
    background: #525F70;
  }
  .sub-value-4 > div:nth-child(2) .value2 .box-style1 > div {
    flex-wrap: wrap;
  }
  .sub-value-4 > div:nth-child(2) .value2 .box-style1 > div > div {
    width: calc(50% - 1rem);
    flex: none;
  }
  .tab-st4.type2 {
    width: 100%;
  }
  .flex-con2.res4 {
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.5rem;
  }
  .flex-con2.res4 .titT5 {
    width: 100%;
  }
  .flex-con1.res4 {
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.5rem;
  }
  .flex-con1.res4 .titT1 {
    width: 100%;
  }
  .total-info {
    flex-wrap: wrap;
  }
  .total-info > div {
    width: 100%;
    flex: none;
  }
  .layer-wrap {
    min-width: unset;
    width: 80%;
    word-wrap: break-word;
    word-break: keep-all;
  }
}
/* 650px */
@media screen and (max-width: 650px) {
  .card-item {
    max-width: 100%;
    min-width: 100%;
  }
  .flex-con2.res1 {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: end;
  }
  .tit-element {
    flex-direction: column;
    border-radius: 0.75rem;
    width: 100%;
    height: 3.35rem;
    padding: 0;
    overflow: hidden;
  }
  .tit-element > span {
    justify-content: center;
    width: 100%;
    height: 50%;
    margin: 0;
    border-radius: 0;
  }
  .tit-element .list {
    height: 50%;
  }
  .card-item-wrap2 .card-item2 {
    flex: none;
    max-width: none;
    width: 100%;
  }
  .card-list-wrap .card-list {
    gap: 0.25rem;
  }
  .card-list-wrap .card-list .list-detail {
    flex-wrap: wrap;
  }
  .card-list-wrap .card-list .list-detail > div {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #BAC6CF;
    padding: 0.25rem 0;
  }
  .weather-wrap .weather-inner2 > div > div {
    margin-top: 0;
    flex: 0 0 calc((100% - 1.5rem) / 3);
    max-width: calc((100% - 1.5rem) / 3); /* 한 줄에 3개 */
  }
  .weather-wrap {
    margin-top: 0.5rem;
  }
  .weather-wrap > div {
    margin-top: 0;
  }
  .weather-wrap .weather-inner2 {
    margin-top: 0;
  }
  .flex-con2.res3 {
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.25rem;
  }
  .flex-con2.res3 .titT1 {
    width: 100%;
  }
}
/* 450px */
@media screen and (max-width: 450px) {
  .sub-value-1 > div [class^=item] .item-figure {
    font-size: 1.3rem;
  }
  .sub-value-1 > div [class^=item] .item-figure > em {
    font-size: 0.75rem;
  }
  .sub-value-1 > div [class^=item] .item-figure > strong {
    margin-right: 0.25rem;
  }
  .sub-value-1 > div > div {
    width: 100%;
  }
  .sub-value-1 > div > div .item-tit {
    font-size: 0.9rem;
  }
  .map .flex-con2.res2 .flex-con3 {
    width: 100%;
    flex-wrap: wrap;
  }
  .map .flex-con2.res2 .flex-con3 .custom-select {
    width: 49%;
  }
  .sub-value-3 .value1 {
    gap: 0.25rem;
  }
  .sub-value-3 .value1 > p > strong {
    font-size: 2.5rem;
  }
  .sub-value-3 .value3 .box-style1 {
    flex-wrap: wrap;
  }
  .sub-value-3 .value3 .box-style1 > div {
    width: 100%;
    gap: 0.25rem;
  }
  .sub-value-4 > div:nth-child(2) .value1 > div {
    gap: 0.5rem;
  }
  .sub-value-4 > div:nth-child(2) .value1 > div > div {
    width: 100%;
  }
  .sub-value-4 > div:nth-child(2) .value2 .box-style1 > div {
    gap: 0.5rem;
  }
  .sub-value-4 > div:nth-child(2) .value2 .box-style1 > div > div {
    width: 100%;
  }
  [class^=srh-filter].res2 > ul > li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  [class^=srh-filter].res2 > ul > li > div {
    flex: none;
  }
  .tab-st4 > li {
    width: 100%;
  }
  .layer-wrap.res1 .layer-cont .tit-input > div {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .layer-wrap.res1 .layer-cont .tit-input > div .InpSel {
    flex: none;
    width: 100%;
  }
  .layer-wrap.res2 .layer-cont .tit-input {
    padding-right: 1rem;
  }
  .layer-wrap.res2 .layer-cont .tit-input > div > span {
    min-width: unset;
  }
  .setting-wrap3 {
    flex-wrap: wrap;
  }
  .setting-wrap3 .menu-info2 > div {
    height: 16rem;
  }
  .setting-wrap3 .menu-info2 > div .menu-info-list {
    gap: 0;
  }
  .setting-wrap3 .menu-info2 > div .menu-info-list > div {
    flex-wrap: wrap;
    gap: 0;
  }
  .setting-wrap3 .menu-info2 > div .menu-info-list > div > input {
    width: 100%;
  }
  .pager {
    display: flex;
  }
}
/* 380px */
@media screen and (max-width: 380px) {
  .setting-wrap3 .menu-info2 > div {
    height: 21rem;
  }
  .setting-wrap3 .menu-info2 > div > div:nth-child(1) {
    margin-bottom: 1rem;
  }
  .setting-wrap3 .menu-info2 > div > div:nth-child(1) .menu-info-list {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .setting-wrap3 .menu-info2 > div > div:nth-child(1) .menu-info-list > span {
    width: 100%;
  }
  .setting-wrap3 .menu-info2 > div > div:nth-child(1) .menu-info-list > div {
    flex-wrap: nowrap;
  }
  [class^=srh-filter] > ul > li > div .calendar-picker {
    flex-wrap: wrap;
  }
  [class^=srh-filter] > ul > li > div .calendar-picker .calendar-input {
    width: 100%;
  }
  [class^=srh-filter] > ul > li > div .calendar-picker > em {
    width: 100%;
  }
}
/* ------- MOBILE ------- */
@media screen and (max-width: 450px) {
  #sub_container.solar-map-m .map-legend-m > div > div {
    flex-wrap: wrap;
  }
  .map-weather-box > div .map-weather-inner2 .tem-txt2 {
    flex-wrap: wrap;
  }
  .map-info-box .info-status {
    height: auto;
  }
  .map-info-box .info-status > span {
    justify-content: center;
    flex-wrap: wrap;
  }
  .map-info-box .info-txt > p {
    flex-wrap: wrap;
  }
  .map-info-box .info-txt > p [class^=txt] {
    flex: 1;
    justify-content: end;
  }
  .tab-st3 li a {
    min-width: unset;
  }
  #sub_container.solar-map-m .map-info-box .info-txt .icon-box-wrap > div [class^=img] {
    width: 2.9rem;
  }
  .map-info-box .info-txt.type2 .txt {
    font-size: 0.8rem;
  }
  .layer-wrap [class^=titT] {
    flex-wrap: wrap;
    font-size: 1.1rem;
  }
  .layer-wrap [class^=titT] [class^=badge] {
    width: 100%;
  }
  .layer-wrap .srh-filter .calendar-picker {
    display: inline-flex;
    flex-wrap: wrap;
  }
  .layer-wrap .srh-filter .calendar-picker > * {
    width: 100%;
  }
  .graphCon {
    max-width: 100%;
    overflow: auto;
    padding-bottom: 0.5rem;
  }
  .graphCon::-webkit-scrollbar {
    height: 0.5rem;
  }
  .graphCon::-webkit-scrollbar-thumb {
    background-color: #22859B;
    border-radius: 2.5rem;
    border: 2px solid #D5DEE2;
    background-clip: padding-box;
  }
  .graphCon::-webkit-scrollbar-track {
    background-color: #D5DEE2;
    border-radius: 2.5rem;
  }
}