@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Noto+Sans+TC:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Stick+No+Bills:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
/* 斷點 */
ul, ul li, ol, ol li, label, p, h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
}

a, a:hover, a:focus {
  color: inherit;
}

input,
input[type=search]::-webkit-search-cancel-button,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  resize: none;
  border: 0;
  outline: 0;
}

input[type=text]:disabled {
  opacity: 0.75;
}

input[type=checkbox] {
  min-width: 0.75rem;
  width: 0.75rem;
  max-width: 0.75rem;
  height: 0.75rem;
  background-color: transparent;
  border: 0.0625rem solid #FFFFFF;
  border-radius: 0.0625rem;
  position: relative;
}
@media (min-width: 48rem) {
  input[type=checkbox] {
    min-width: 1rem;
    width: 1rem;
    max-width: 1rem;
    height: 1rem;
  }
}

input[type=checkbox]:checked::after {
  flex-shrink: 0;
  border-right: 0.1875rem solid #FFFFFF;
  border-bottom: 0.1875rem solid #FFFFFF;
  width: 0.5125rem;
  height: 0.925rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) rotate(40deg);
  content: "";
}

.swiper-button-next:after,
.swiper-button-next:focus,
.swiper-button-prev:after,
.swiper-button-prev:focus,
.swiper-pagination-bullet:focus,
a,
a:focus,
a:hover {
  text-decoration: none;
  outline: 0;
  content: "";
}

.swiper-button-next:hover,
.swiper-button-prev:hover,
.swiper-pagination-bullet:hover {
  opacity: 0.75;
}

.swiper-button-prev,
.swiper-button-next {
  background-image: url(../images/icons/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  top: 50%;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  transform: rotate(180deg);
  right: 0;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0.5rem;
}
.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 1.25rem;
  height: 0.25rem;
  border-radius: 0;
  background-color: #898989;
}
.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #57D4EF;
}

.datepicker {
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
}

/*#ui-datepicker-div {
  z-index: 80 !important;
}
.ui-datepicker-year,
.ui-datepicker-month {
    text-align: center;
}
.ui-widget-header .ui-icon {
    background-image: url(../images/datepicker.png);   
}
https://xdsoft.net/jqplugins/datetimepicker/
.xdsoft_monthpicker {
  display: flex; align-items: center;
}
.xdsoft_datetimepicker.xdsoft_dark {
  box-shadow: 0 5px 15px $clr_000000;
}
.xdsoft_datetimepicker .xdsoft_label,
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option {
  padding: 0px;
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_monthselect {
  min-width: 85px;
  right: 0;
  text-align: left;
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_yearselect {
  min-width: 50px;
  right: 0;
  text-align: center;
}
.xdsoft_datetimepicker .xdsoft_label span,
.xdsoft_datetimepicker .xdsoft_option {
  font-size: .75rem;
  padding: 5px 0;
} */
html {
  -webkit-touch-action: none;
  touch-action: none;
  font-size: 16px;
}

body {
  font-family: "Noto Sans TC", sans-serif;
  background-color: #3E3E44;
  font-size: 1rem;
  line-height: 1.5;
  color: #FFFFFF;
  letter-spacing: 0.0938rem;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  word-break: break-all;
  position: relative;
}

.allHidden {
  overflow: hidden;
}

.scroll_area {
  height: calc(100% - var(--fixedArea));
  overflow-x: hidden;
  overflow-y: auto;
}

.trans_org_left_top {
  transform-origin: left top;
}

.trans_org_left_center {
  transform-origin: left center;
}

.trans_org_left_bottom {
  transform-origin: left bottom;
}

.trans_org_right_top {
  transform-origin: right top;
}

.trans_org_right_center {
  transform-origin: right center;
}

.trans_org_right_bottom {
  transform-origin: right bottom;
}

.trans_org_center_top {
  transform-origin: center top;
}

.trans_org_center_bottom {
  transform-origin: center bottom;
}

.trans_org_center_center {
  transform-origin: center center;
}

table {
  width: 100%;
}
table thead tr th,
table thead tr td,
table tbody tr th,
table tbody tr td {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  text-align: center;
  padding: 0.625rem 0.9375rem;
  white-space: nowrap;
}
table thead {
  position: sticky;
  top: -0.125rem;
  left: 0;
  right: 0;
  z-index: 2;
  min-width: 100%;
}
table thead tr {
  background-color: #4E4E4E;
  position: relative;
}
table tbody tr:nth-of-type(odd) {
  background-color: #040404;
  position: relative;
}
table tbody tr:nth-of-type(even) {
  background-color: #232323;
  position: relative;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(0.625rem);
  backdrop-filter: blur(0.625rem);
  z-index: 99;
}
#loader svg {
  width: 100%;
  height: 4.375rem;
}
#loader svg path {
  fill: none;
  stroke: #CC0000;
  stroke-width: 0.125rem;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: loader_line 2.6s linear forwards, loader_fill 0.3s linear 1.5s forwards;
}

#cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 88;
}

.superIndex {
  z-index: 99;
  position: relative;
}

@keyframes loader_line {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes loader_fill {
  to {
    fill: #CC0000;
    stroke: none;
    box-shadow: 0 0 0.625rem rgba(204, 0, 0, 0.3);
  }
}
/* reversed bootstrap css */
.modal {
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(0.125rem);
  backdrop-filter: blur(0.125rem);
}
.modal .modal-dialog {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.875rem 0.9375rem;
  height: 100%;
}
.modal .modal-dialog.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
.modal .modal-dialog .modal-content {
  border: 0;
  max-height: 100%;
  border-radius: 0;
  background-color: transparent;
}
.modal .modal-dialog .modal-header {
  border: 0;
  padding: 0;
}
.modal .modal-dialog .modal-body {
  padding: 26px;
  position: relative;
}
.modal .modal-dialog .modal_close {
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: #75757C;
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
}
.modal .modal-dialog .modal_close:hover {
  color: #FFFFFF;
}
.modal .modal-dialog .modal_close:active {
  transform: scale(0.95);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0.375rem rgba(0, 0, 0, 0.3);
  border-radius: 0.625rem;
  background-color: transparent;
}

::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}

::-webkit-scrollbar-thumb {
  background-color: #75757C;
  border-radius: 0.625rem;
}

/* 添加Class */
u {
  text-decoration: none;
}

.r-90 {
  transform: rotate(90deg);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 48;
}

.f-36 {
  font-size: 36px;
}

.f-40 {
  font-size: 40px;
}

.f-42 {
  font-size: 42px;
}

.f-50 {
  font-size: 50px;
}

.f-100 {
  font-size: 100px;
}

.f-120 {
  font-size: 120px;
}

.w-220p {
  width: 220px;
}

.w-120p {
  width: 120px;
}

.mw-80 {
  max-width: 80px;
}

.fixb-8p {
  margin-bottom: -8px;
}

.w-30p {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt-10 {
  margin-right: 10px;
}

.fc-gray, .fc-gray > td, .fc-gray > td input {
  color: #999999 !important;
}

.fc-red, .fc-red > td, .fc-red > td input {
  color: #FA9696 !important;
}

.fc-blue, .fc-blue > td, .fc-blue > td input {
  color: #57D4EF !important;
}

.fc-green {
  color: #57EF57;
}

.tc {
  text-align: center;
}

.norwap {
  white-space: nowrap;
}

.opacity-gray {
  opacity: 0.6;
}

@media (min-width: 1200px) {
  .mobile_hide {
    display: none !important;
  }
}

/* icon revised CSS */
.fa-signal:not(.fc-red) {
  font-size: 20px;
  color: #000000;
  background: linear-gradient(to right, rgb(0, 255, 0) var(--comlv), rgba(0, 255, 0, 0.3) var(--comlv), rgba(255, 255, 255, 0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fa-signal.fc-red {
  font-size: 20px;
  background: linear-gradient(to right, rgb(250, 150, 150) var(--comlv), rgba(250, 150, 150, 0.3) var(--comlv), rgba(255, 255, 255, 0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 整個框的樣式 */ /* 主要需要被控制的為: html/section/main/article/footer */
html {
  height: 100%;
}
@media (min-width: 1200px) {
  html {
    height: 71.25rem;
  }
}

body {
  height: 100%;
  overflow: hidden;
}
body.en-US, body.vi {
  font-family: "Poppins", sans-serif;
}
body.en-US .search_bar h1, body.vi .search_bar h1 {
  -moz-text-align-last: left;
       text-align-last: left;
  text-align: left;
}
body.en-US .landscape .lands_search .search_frame h1, body.vi .landscape .lands_search .search_frame h1 {
  -moz-text-align-last: left;
       text-align-last: left;
}
body.en-US {
  word-break: keep-all;
}
@media (min-width: 992px) {
  body.en-US .wrapper_top > .row .col-lg-4 {
    width: auto !important;
  }
}
body.en-US .search_bar h1 span {
  letter-spacing: 0;
}
@media (min-width: 992px) {
  body.en-US .tabsTime .complexTabs span {
    width: 4.375rem;
    height: 4.375rem;
  }
}
@media (min-width: 1400px) {
  body.en-US .tabsTime .complexTabs span {
    width: 5rem;
    height: 5rem;
  }
}
@media (min-width: 992px) {
  body.en-US .tabsTime .time {
    min-width: 12rem;
  }
}
@media (min-width: 1400px) {
  body.en-US .tabsTime .time {
    min-width: 16.25rem;
  }
}
@media (min-width: 992px) {
  body.en-US .tabsTime .time h3 {
    font-size: 3.125rem;
  }
}
@media (min-width: 1400px) {
  body.en-US .tabsTime .time h3 {
    font-size: 3.75rem;
  }
}
body.en-US .tabsTime .rangePicker .dateBox .dateRange .dateForm h2 {
  display: flex;
}
body.en-US .tabsTime .rangePicker .dateBox .dateRange .dateForm h2 i:first-of-type {
  order: 1;
}
body.en-US .data_visual .visual_swiper .park_bar::before, body.en-US .data_visual .visual_swiper .park_bar::after {
  -o-border-image: none;
     border-image: none;
  width: 0;
  height: 0;
}
@media (min-width: 768px) {
  body.en-US .landscape .lands_search .search_frame h1 {
    min-width: 11.5rem;
  }
}
body.en-US #modal_signUp .signUp_edit.edit::before,
body.en-US #modal_myInfo .signUp_edit.edit::before {
  color: #57D4EF;
  content: "Edit";
}
body.en-US #modal_signUp .signUp_edit.choice::before,
body.en-US #modal_myInfo .signUp_edit.choice::before {
  color: #57D4EF;
  content: "Select";
}
body.en-US #modal_signUp .signUp_edit.confirm::before,
body.en-US #modal_myInfo .signUp_edit.confirm::before {
  color: #66CC33;
  content: "Save";
}
body.zh-TW {
  font-family: "Noto Sans TC", sans-serif;
}
@media (min-width: 992px) {
  body.zh-TW .search_bar {
    max-width: 26.875rem;
  }
}
body.zh-TW .search_bar h1 {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
}
body.zh-TW .idx_status h1 {
  letter-spacing: 0.2rem;
}
body.zh-TW .idx_flood {
  width: 18.125rem;
  max-width: 18.125rem;
}
body.zh-TW .idx_flood .flood_frame .flood_box h2 {
  -moz-text-align-last: justify;
  text-align-last: justify;
}
body.type-P .idx_status #status_issue .fxheight img,
body.type-P .idx_status #status_car .fxheight img {
  height: 2.4rem;
  margin-bottom: 20px;
}

#app {
  height: 100%;
  position: relative;
  z-index: 2;
  -webkit-pointer-events: none;
  pointer-events: none;
  display: flex;
  overflow: hidden;
}

section {
  flex-grow: 1;
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1200px) {
  section {
    flex-direction: row;
    overflow: hidden;
  }
}

header {
  order: 2;
  flex-shrink: 0;
  background-color: #292931;
  position: sticky !important;
  left: 0;
  bottom: 0;
  z-index: 85 !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
@media (min-width: 1200px) {
  header {
    order: 1;
    top: 0;
  }
}

main {
  flex-grow: 1;
  order: 1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding-top: 10px;
  z-index: 80;
}
@media (min-width: 1200px) {
  main {
    width: 0;
    order: 2;
  }
}
@media (min-width: 1800px) {
  main {
    padding-top: 15px;
  }
}

article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
@media (min-width: 1200px) {
  article {
    height: 100%;
    overflow: hidden;
  }
}
article > div {
  padding: 0 10px;
}
@media (min-width: 1800px) {
  article > div {
    padding: 0 15px;
  }
}

footer {
  font-family: "Poppins", sans-serif;
  flex-shrink: 0;
  letter-spacing: 0.4px;
}
footer p {
  font-size: 12px;
  line-height: 1.2;
  color: #898989;
  font-weight: 500;
  text-align: right;
  padding: 6px 10px;
}
@media (min-width: 576px) {
  footer p {
    font-size: 14px;
  }
}
@media (min-width: 1200px) {
  footer p {
    letter-spacing: 2px;
  }
}
@media (min-width: 1800px) {
  footer p {
    padding: 6px 15px;
  }
}

/* 側邊導航 */
header .header_container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  header .header_container {
    padding: 0 0.9375rem;
  }
}
@media (min-width: 1200px) {
  header .header_container {
    width: auto;
    height: 100%;
    padding: 3.75rem 0;
    justify-content: space-between;
    flex-direction: column;
  }
}
header .header_navs {
  display: flex;
  align-items: center;
  width: calc(100% - 3.75rem);
}
@media (min-width: 768px) {
  header .header_navs {
    width: calc(100% - 4.375rem);
  }
}
@media (min-width: 1200px) {
  header .header_navs {
    flex-direction: column;
    width: auto;
    height: calc(100% - 4.375rem);
  }
}
header .header_swiper {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
@media (min-width: 768px) {
  header .header_swiper {
    width: calc(100% - 9.0625rem);
  }
}
@media (min-width: 1200px) {
  header .header_swiper {
    width: auto;
    height: calc(100% - 5.625rem);
  }
}
@media (min-width: 1200px) {
  header .header_swiper .swiper .swiper-wrapper {
    flex-direction: column;
  }
}
header .header_swiper .swiper .swiper-wrapper .swiper-slide {
  width: auto;
}
@media (min-width: 1200px) {
  header .header_swiper .swiper .swiper-wrapper .swiper-slide {
    height: auto;
  }
}
header .header_logo {
  display: none;
}
@media (min-width: 768px) {
  header .header_logo {
    display: inline;
    margin-right: 3.75rem;
  }
}
@media (min-width: 1200px) {
  header .header_logo {
    margin-right: 0;
    margin-bottom: 3.75rem;
  }
}
header .header_item {
  cursor: pointer;
  display: block;
  padding: 1.25rem;
  position: relative;
}
@media (min-width: 1200px) {
  header .header_item {
    padding: 1.25rem 1.875rem;
  }
}
header .header_item.active, header .header_item:hover {
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.6) inset;
}
header .header_item.active::before {
  width: 100%;
  height: 0.1875rem;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(87, 77, 230);
  background: linear-gradient(0deg, rgb(87, 77, 230) 0%, rgb(25, 25, 176) 100%);
  content: "";
}
@media (min-width: 1200px) {
  header .header_item.active::before {
    width: 0.1875rem;
    height: 100%;
  }
}
header .header_item:hover .header_sub {
  display: block;
}
header .header_item:active .header_icon:active {
  transform: scale(0.95);
}
header .header_icon {
  background-image: var(--header_icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 768px) {
  header .header_icon {
    width: 1.5625rem;
    height: 1.5625rem;
  }
}
header .header_sub {
  position: absolute;
  right: 0.9375rem;
  bottom: calc(var(--header_h) - 0.625rem);
  background-color: #292931;
  border-radius: 0.375rem;
  display: none;
}
@media (min-width: 1200px) {
  header .header_sub {
    left: calc(var(--header_w) - 0.625rem);
    right: auto;
    bottom: 0;
    border-radius: 0.625rem;
  }
}
header .header_sub a {
  min-width: 8.75rem;
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  padding: 0.625rem;
  border-radius: 0.375rem;
  text-transform: capitalize;
  position: relative;
}
@media (min-width: 1200px) {
  header .header_sub a {
    min-width: 10rem;
    font-size: 1.125rem;
    padding: 0.9375rem;
    border-radius: 0.625rem;
  }
}
header .header_sub a.active, header .header_sub a:active, header .header_sub a:hover {
  background-color: #1E1C23;
}
header .header_sub a.active::before {
  width: 0.5rem;
  height: 0.9375rem;
  position: absolute;
  top: 0.5rem;
  right: 1.25rem;
  border-right: 0.1875rem solid #FFFFFF;
  border-bottom: 0.1875rem solid #FFFFFF;
  transform: rotate(45deg);
  content: "";
}
@media (min-width: 1200px) {
  header .header_sub a.active::before {
    top: 1.25rem;
    right: 0.9375rem;
  }
}
header .icon_slide {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1.375rem;
  margin-left: -1.625rem;
  background-image: url(../images/icons/icon_slide_x.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 3.25rem;
  height: 2.75rem;
  opacity: 0.5;
  animation: ani_x infinite forwards;
  animation-duration: 2s;
}
@media (min-width: 1200px) {
  header .icon_slide {
    background-image: url(../images/icons/icon_slide_y.svg);
    animation: ani_y infinite forwards;
    animation-duration: 2s;
  }
}

/* 避開地圖 處理層級 */
/* .login .login_box, */
header,
.search_bar,
.tabsTime,
.tabs_swiper,
.idx_weather,
.idx_status,
.idx_flood,
.data_visual,
.report,
.landscape .land_l,
.landscape .land_r,
.sara_box {
  position: relative;
  z-index: 2;
  -webkit-pointer-events: auto;
  pointer-events: auto;
}

/* 主要内殼 */
.main_title {
  flex-shrink: 0;
  margin-bottom: 5px;
}

.main_box {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  flex-grow: 1;
  padding-top: 5px;
}
@media (min-width: 1200px) {
  .main_box {
    overflow: hidden;
  }
}

/* 大地圖 */
.map {
  position: fixed;
  cursor: grab;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.mapboxgl-ctrl-logo {
  display: none !important;
}

.mapboxgl-popup {
  max-width: none !important;
}

/* 整個頁面的關係互動 */
div#app #tab_status_car {
  display: none;
}
div#app.isDevice .idx_status #tab_status_issue,
div#app.isDevice .idx_status #status_issue {
  display: none;
}
div#app.isDevice .idx_status #tab_status_car,
div#app.isDevice .idx_status #status_car {
  display: flex;
}
div#app.isDevice .idx_status #status_car {
  display: none;
}
div#app.isDevice .idx_status:has(#tab_status_car.active) #status_car {
  display: flex;
}

/* 首頁内殼 */
.main_title .row {
  margin: 0 -8px;
}
.main_title .row > div {
  padding: 0 8px;
}
.main_title .row > div:last-of-type {
  margin-left: auto;
}

.main_box .main_l,
.main_box .main_r {
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.main_box .main_l {
  flex-grow: 1;
  width: 100%;
  max-width: 1600px;
  height: 100%;
  overflow: hidden;
  display: none;
}
@media (min-width: 1200px) {
  .main_box .main_l {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-between;
  }
}
.main_box .main_l .main_lt {
  display: flex;
  justify-content: flex-end;
}
.main_box .main_l .main_lb {
  width: 100%;
  max-width: 100%;
  margin-top: auto;
}
.main_box .main_r {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 1200px) {
  .main_box .main_r {
    width: 270px;
    padding-left: 10px;
  }
}
@media (min-width: 1800px) {
  .main_box .main_r {
    padding-left: 20px;
  }
}

/* tabs */
.tabs span:active {
  transform: scale(0.95);
}

/* 時間 & 按鈕 */
.tabsTime {
  position: fixed;
  left: 0;
  bottom: calc(var(--header_h) + 1.25rem);
  display: flex;
  align-items: center;
  z-index: 5;
}
@media (min-width: 768px) {
  .tabsTime {
    left: auto;
    bottom: auto;
    position: relative;
  }
}
.tabsTime .tabs,
.tabsTime .complexTabs {
  width: auto;
  margin-left: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 768px) {
  .tabsTime .tabs,
  .tabsTime .complexTabs {
    width: auto;
    margin-right: 0.625rem;
    flex-direction: row;
  }
}
.tabsTime .tabs i,
.tabsTime .complexTabs i {
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  background-image: url(../images/icons/icon_backfirst.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1.875rem;
  height: 1.5625rem;
  margin-right: 0.3125rem;
}
.tabsTime .tabs span,
.tabsTime .complexTabs span {
  display: inline-block;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 3.75rem;
  height: 3.75rem;
  background: rgb(80, 78, 83);
  background: radial-gradient(circle, rgba(80, 78, 83, 0.95) 25%, rgba(42, 42, 49, 0.95) 79%, rgba(22, 22, 29, 0.95) 100%);
  filter: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  position: relative;
}
@media (min-width: 768px) {
  .tabsTime .tabs span,
  .tabsTime .complexTabs span {
    width: 5rem;
    height: 5rem;
  }
}
.tabsTime .tabs span:not(:last-of-type),
.tabsTime .complexTabs span:not(:last-of-type) {
  margin-bottom: 0.625rem;
}
@media (min-width: 768px) {
  .tabsTime .tabs span:not(:last-of-type),
  .tabsTime .complexTabs span:not(:last-of-type) {
    margin-bottom: 0;
    margin-right: 0.625rem;
  }
}
.tabsTime .tabs span::before,
.tabsTime .complexTabs span::before {
  background-image: var(--tabs_icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 2.0625rem;
  height: 1.5625rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
}
@media (min-width: 768px) {
  .tabsTime .tabs span::before,
  .tabsTime .complexTabs span::before {
    width: 2.75rem;
    height: 2.0625rem;
  }
}
.tabsTime .tabs span:hover,
.tabsTime .complexTabs span:hover {
  transition: all 0.2s;
  transform: scale(0.95);
}
.tabsTime .tabs span:hover, .tabsTime .tabs span:active, .tabsTime .tabs span.active,
.tabsTime .complexTabs span:hover,
.tabsTime .complexTabs span:active,
.tabsTime .complexTabs span.active {
  background: rgb(54, 29, 156);
  background: radial-gradient(circle, rgb(54, 29, 156) 0%, rgb(13, 16, 45) 100%);
}
.tabsTime .time {
  min-width: 16.25rem;
  display: none;
  filter: drop-shadow(0 0 0.625rem rgba(0, 0, 0, 0.5));
}
@media (min-width: 992px) {
  .tabsTime .time {
    display: block;
  }
}
.tabsTime .time .row {
  margin-left: -0.1875rem;
  margin-right: -0.1875rem;
  display: flex;
  align-items: last baseline;
  justify-content: flex-end;
}
.tabsTime .time .row .col-auto {
  padding-left: 0.1875rem;
  padding-right: 0.1875rem;
}
.tabsTime .time h1 {
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  line-height: 1;
  color: #FFFFFF;
  font-weight: 600;
  text-align: right;
  margin-bottom: 0.375rem;
  letter-spacing: 0.1875rem;
}
.tabsTime .time h2 {
  font-family: "Poppins", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  color: #FFFFFF;
  font-weight: 600;
  text-align: right;
  letter-spacing: 0.0625rem;
}
.tabsTime .time h3 {
  font-family: "Stick No Bills", sans-serif;
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 200;
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
}
.tabsTime .rangePicker {
  min-width: 20.625rem;
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  padding: 1rem 1rem 1rem 1.25rem;
  border-radius: 1.375rem;
  display: none;
}
@media (min-width: 992px) {
  .tabsTime .rangePicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.tabsTime .rangePicker .dateBox {
  min-width: 15.625rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tabsTime .rangePicker .dateBox.active img {
  transition: all 0.2s;
  transform: rotate(180deg);
}
.tabsTime .rangePicker .dateBox .dateRange .dateForm {
  display: flex;
  align-items: center;
}
.tabsTime .rangePicker .dateBox .dateRange .dateForm h1,
.tabsTime .rangePicker .dateBox .dateRange .dateForm h2 {
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 0.1563rem;
}
.tabsTime .rangePicker .dateBox .dateRange .dateForm h1 {
  font-size: 1.0625rem;
  line-height: 1.1765;
  margin-bottom: 0.3125rem;
}
.tabsTime .rangePicker .dateBox .dateRange .dateForm h2 {
  font-size: 1.5rem;
  line-height: 1.1667;
}
.tabsTime .rangePicker .dateBox .dateRange .dateForm h2 i {
  font-style: normal;
}
.tabsTime .rangePicker .dateBox .dateRange .dateForm span {
  display: inline-block;
  width: 0.9375rem;
  height: 0.0625rem;
  background-color: #FFFFFF;
  margin: 0 0.9375rem;
}

/* 搜尋框 */
.search_bar {
  width: 100%;
  max-width: 100%;
  padding-top: 0.375rem;
  position: relative;
  z-index: 90;
}
@media (min-width: 768px) {
  .search_bar {
    padding-top: 0;
    max-width: 25rem;
  }
}
@media (min-width: 992px) {
  .search_bar {
    max-width: 33rem;
  }
}
.search_bar h1 {
  width: 100%;
  font-size: 1.75rem;
  line-height: 1.2;
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 0.625rem;
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
  display: flex;
  align-items: center;
  filter: drop-shadow(0 0 0.625rem rgba(0, 0, 0, 0.5));
  -webkit-pointer-events: none;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .search_bar h1 {
    font-size: 1.6875rem;
    margin-bottom: 0.9375rem;
  }
}
@media (min-width: 1400px) {
  .search_bar h1 {
    font-size: 2.1875rem;
  }
}
.search_bar h1 span {
  display: block;
  width: 100%;
  max-width: 100%;
}
.search_bar h1 img {
  height: 2.5rem;
  margin-right: 1.25rem;
  flex: none;
}
@media (min-width: 1200px) {
  .search_bar h1 img {
    height: 3.125rem;
  }
}
.search_bar .inputs {
  position: relative;
}
.search_bar .inputs input {
  width: 100%;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
  font-weight: 400;
  background-color: #F1F1F1;
  padding: 0.3125rem 3.4375rem 0.3125rem 1.5rem;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
}
@media (min-width: 1200px) {
  .search_bar .inputs input {
    font-size: 1.125rem;
    padding: 0.625rem 3.4375rem 0.625rem 1.5rem;
  }
}
.search_bar .inputs .goSearch {
  position: absolute;
  cursor: pointer;
  top: 50%;
  right: 0.9375rem;
  margin-top: -0.625rem;
  -webkit-pointer-events: none;
  pointer-events: none;
}
.search_bar .inputs .goSearch.goSearch {
  -webkit-pointer-events: auto;
  pointer-events: auto;
}
.search_bar .inputs .clearSearch {
  position: absolute;
  cursor: pointer;
  top: 50%;
  right: 2.375rem;
  color: #3F3F46;
  transform: translateY(-50%);
  display: none;
}
.search_bar .inputs .search_box {
  width: 100%;
  max-width: 100%;
  max-height: 12.5rem;
  overflow: hidden auto;
  position: absolute;
  background-color: #F1F1F1;
  animation: fadeIn 0.3s linear;
  box-shadow: 0 0.375rem 0.5rem rgba(0, 0, 0, 0.5);
  display: none;
}
.search_bar .inputs .search_box span {
  cursor: pointer;
  line-height: 1.3;
  color: #000000;
  font-weight: 500;
}
.search_bar .inputs .search_box.search_advise {
  padding: 0.625rem;
  display: none;
}
.search_bar .inputs .search_box.search_advise.active {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.search_bar .inputs .search_box.search_advise h2 {
  width: 100%;
  max-width: 100%;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #000000;
  font-weight: 700;
  margin-bottom: 0.625rem;
  letter-spacing: 0.125rem;
}
.search_bar .inputs .search_box.search_advise span {
  display: inline-block;
  font-size: 0.8125rem;
  padding: 0.125rem 0.625rem 0.25rem 0.625rem;
  border: 0.0625rem solid #D9D9D9;
  border-radius: 0.75rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.search_bar .inputs .search_box.search_advise span.active, .search_bar .inputs .search_box.search_advise span:active, .search_bar .inputs .search_box.search_advise span:hover {
  background-color: transparent;
  color: #1AA6C5;
  border: 0.0625rem solid #1AA6C5;
}
.search_bar .inputs .search_box.search_vague.active {
  display: block;
}
.search_bar .inputs .search_box.search_vague span {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.3;
  padding: 0.625rem;
  border-top: 0.0625rem solid #75757C;
}
.search_bar .inputs .search_box.search_vague span:hover {
  color: #FFFFFF;
  background-color: #232229;
}

/* 時間選擇器 */
.datePicker {
  --bs-gutter-x: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: calc(100% + var(--bs-gutter-x));
  max-width: calc(100% + var(--bs-gutter-x));
  margin: 0 calc(var(--bs-gutter-x) * -0.5);
}
.datePicker > div {
  width: 100%;
  padding: 0 calc(var(--bs-gutter-x) * 0.5);
  margin-bottom: 10px;
  position: relative;
}
@media (min-width: 768px) {
  .datePicker > div {
    width: 50%;
    margin-bottom: 0;
  }
}
.datePicker > div::before, .datePicker > div::after {
  content: "";
}
.datePicker > div::before {
  background: url(../images/icons/icon_calendar.svg) no-repeat center;
  background-size: contain;
  width: 26px;
  height: 26px;
  position: absolute;
  top: calc(50% - 13px);
  right: 24px;
}
@media (min-width: 768px) {
  .datePicker > div::before {
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
  }
}
.datePicker > div::after {
  background-color: #FFFFFF;
  border-radius: 8px;
  position: absolute;
  top: calc(50% - 0.75px);
}
@media (min-width: 768px) {
  .datePicker > div::after {
    width: 20px;
    height: 1.5px;
  }
}
.datePicker > div > input {
  font-family: "Poppins", sans-serif;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  color: #FFFFFF;
  background-color: #202026;
  padding: 9px 40px 9px 10px;
  border-radius: 0;
}
@media (min-width: 768px) {
  .datePicker > div > input {
    font-size: 16px;
    line-height: 1.5;
    padding-right: 45px;
  }
}
.datePicker > div:first-of-type::after {
  right: -10px;
}
.datePicker > div:last-of-type::after {
  width: 0;
  height: 0;
}

.datepicker {
  position: absolute;
  z-index: 10;
  min-width: calc(100% - 3.75rem);
}
@media (min-width: 576px) {
  .datepicker {
    min-width: 25rem;
  }
}
.datepicker table thead tr td,
.datepicker table thead tr th,
.datepicker table tbody tr td,
.datepicker table tbody tr th {
  border: 0.125rem solid transparent;
  background-color: #FFFFFF;
  color: #292931;
  font-weight: 500;
  padding: 0.625rem;
}
.datepicker table thead tr td.old,
.datepicker table thead tr th.old,
.datepicker table tbody tr td.old,
.datepicker table tbody tr th.old {
  color: #75757C;
}
.datepicker table thead tr td.new, .datepicker table thead tr td.disabled,
.datepicker table thead tr th.new,
.datepicker table thead tr th.disabled,
.datepicker table tbody tr td.new,
.datepicker table tbody tr td.disabled,
.datepicker table tbody tr th.new,
.datepicker table tbody tr th.disabled {
  color: #9D9A9E;
}
.datepicker table tbody tr td {
  font-family: "Poppins", sans-serif;
}
.datepicker table tbody tr td:not(.disabled) {
  cursor: pointer;
  transition: all 0.15s;
}
.datepicker table tbody tr td:not(.disabled).active, .datepicker table tbody tr td:not(.disabled):hover {
  color: #FFFFFF;
  background-color: #0A72EC;
}

/* 天氣下雨狀態 */
.idx_weather {
  font-family: "Poppins", sans-serif;
  width: 100%;
  max-width: 100%;
  min-height: 10.625rem;
  height: 10.625rem;
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  margin-bottom: 10PX;
  border-radius: 1.875rem;
  position: relative;
  display: none;
}
@media (min-width: 1200px) {
  .idx_weather {
    display: block;
  }
}
.idx_weather .weather_swiper {
  width: 100%;
  height: 100%;
  position: relative;
}
.idx_weather .weather_swiper .weather_more {
  width: 1.625rem;
  height: 1.625rem;
  position: absolute;
  cursor: pointer;
  right: 0.25rem;
  bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.idx_weather .weather_swiper .weather_more.off {
  width: 1.875rem;
  height: 1.875rem;
  background-image: url(../images/icons/icon_area.svg);
}
.idx_weather .weather_swiper .weather_more.off + .weather_chooice {
  display: none;
}
.idx_weather .weather_swiper .weather_more.off + .weather_chooice + .swiper {
  display: block;
}
.idx_weather .weather_swiper .weather_more.on {
  background-image: url(../images/icons/icon_close.svg);
}
.idx_weather .weather_swiper .weather_more.on + .weather_chooice {
  display: block;
}
.idx_weather .weather_swiper .weather_more.on + .weather_chooice + .swiper {
  display: none;
}
.idx_weather .weather_swiper .weather_chooice {
  background-color: #202026;
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  animation: ani_clip_circle 0.7s linear forwards;
  -webkit-clip-path: circle(0% at 100% 100%);
  clip-path: circle(0% at 100% 100%);
  padding: 0.9375rem 0.9375rem 1.875rem 0.9375rem;
  position: relative;
  z-index: 15;
}
.idx_weather .weather_swiper .weather_chooice .box {
  width: 100%;
  height: 100%;
  padding: 0.3125rem;
  overflow: hidden auto;
}
.idx_weather .weather_swiper .weather_chooice .box span {
  display: inline-block;
  cursor: pointer;
  padding: 0.3125rem;
  font-size: 1rem;
  font-weight: 700;
}
.idx_weather .weather_swiper .weather_chooice .box span:active:active {
  transform: scale(0.95);
}
.idx_weather .weather_swiper .weather_chooice .box span:hover, .idx_weather .weather_swiper .weather_chooice .box span.active {
  color: #57D4EF;
}
.idx_weather .weather_swiper .swiper-slide {
  padding: 1.25rem;
  padding-top: 0.9375rem;
  padding-bottom: 1.25rem;
}
.idx_weather .weather_swiper .swiper-slide .frame {
  height: 100%;
  overflow: hidden auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.idx_weather .weather_swiper .swiper-slide .frame .row {
  margin: 0 -0.3125rem;
}
.idx_weather .weather_swiper .swiper-slide .frame .row .col-auto {
  padding: 0 0.3125rem;
  width: 100%;
}
.idx_weather .weather_swiper .swiper-slide h1,
.idx_weather .weather_swiper .swiper-slide h2 {
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 0.075rem;
  font-weight: 300;
}
.idx_weather .weather_swiper .swiper-slide h2 {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idx_weather .weather_swiper .swiper-slide h2 span {
  margin-top: -0.3125rem;
  margin-right: 0.3125rem;
}
.idx_weather .weather_swiper .swiper-slide h2 span.icon {
  min-width: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}
.idx_weather .weather_swiper .swiper-slide .temperature {
  text-align: center;
  margin-bottom: 0.3125rem;
}
.idx_weather .weather_swiper .swiper-slide .temperature i, .idx_weather .weather_swiper .swiper-slide .temperature b {
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5;
}
.idx_weather .weather_swiper .swiper-slide .temperature i::after, .idx_weather .weather_swiper .swiper-slide .temperature b::after {
  content: "°";
}
.idx_weather .weather_swiper .swiper-slide .temperature b {
  margin-left: 0.3125rem;
  opacity: 0.6;
}
.idx_weather .weather_swiper .swiper-slide .pop {
  width: 100%;
  margin-bottom: 0.3125rem;
  font-size: 0.75rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idx_weather .weather_swiper .swiper-slide .pop::before {
  display: inline-block;
  background-image: url(../images/icons/icon_drop.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1.0625rem;
  height: 0.8125rem;
  content: "";
}
.idx_weather .weather_swiper .swiper-slide .pop::after {
  content: "%";
}
.idx_weather .weather_swiper .swiper-slide .rainmm {
  font-size: 0.9375rem;
  line-height: 2;
  display: none;
}
.idx_weather .weather_swiper .swiper-slide .rainmm::after {
  content: "mm";
}
.idx_weather .weather_swiper .swiper-slide .list {
  height: 100%;
  text-align: center;
  overflow: hidden auto;
}
.idx_weather .weather_swiper .swiper-slide .list span {
  display: inline-block;
  cursor: pointer;
  font-size: 0.9375rem;
  padding: 0 0.3125rem;
}
.idx_weather .weather_swiper .swiper-slide .list span:hover {
  color: #57D4EF;
}
.idx_weather .weather_swiper .swiper-slide .list span:active:active {
  transform: scale(0.95);
}
.idx_weather .weather_swiper .swiper-slide .icon {
  min-width: 3.125rem;
  min-height: 3.125rem;
  width: 3.125rem;
  height: 3.125rem;
  position: relative;
}
.idx_weather .weather_swiper .swiper-slide .icon::before, .idx_weather .weather_swiper .swiper-slide .icon::after {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.idx_weather .weather_swiper .swiper-slide .icon.icon_02d::before, .idx_weather .weather_swiper .swiper-slide .icon.icon_10d::before {
  background-image: url(../images/weather/sun.svg);
}
.idx_weather .weather_swiper .swiper-slide .icon.icon_02n::before, .idx_weather .weather_swiper .swiper-slide .icon.icon_10n::before {
  background-image: url(../images/weather/moon.svg);
}
.idx_weather .weather_swiper .swiper-slide .icon.icon_03d::before, .idx_weather .weather_swiper .swiper-slide .icon.icon_03n::before {
  background-image: url(../images/weather/cloudFFFFFF.svg);
  filter: brightness(0.9);
}
.idx_weather .weather_swiper .swiper-slide .icon.icon_04d::before, .idx_weather .weather_swiper .swiper-slide .icon.icon_04n::before, .idx_weather .weather_swiper .swiper-slide .icon.icon_09d::before, .idx_weather .weather_swiper .swiper-slide .icon.icon_09n::before, .idx_weather .weather_swiper .swiper-slide .icon.icon_11d::before, .idx_weather .weather_swiper .swiper-slide .icon.icon_11n::before {
  background-image: url(../images/weather/cloud48484A.svg);
  z-index: -1;
}
.idx_weather .weather_swiper .swiper-slide .icon.icon_09d::after, .idx_weather .weather_swiper .swiper-slide .icon.icon_09n::after, .idx_weather .weather_swiper .swiper-slide .icon.icon_10d::after, .idx_weather .weather_swiper .swiper-slide .icon.icon_10n::after {
  top: 0.2813rem;
  background-image: url(../images/weather/rain.svg);
  filter: brightness(2);
}
.idx_weather .weather_swiper .swiper-slide .icon.icon_11d::after, .idx_weather .weather_swiper .swiper-slide .icon.icon_11n::after {
  background-image: url(../images/weather/lighter.svg);
}
.idx_weather .weather_swiper .swiper-slide .icon img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.idx_weather .weather_swiper .swiper-slide.today .frame .row {
  display: none;
}
.idx_weather .weather_swiper .swiper-slide.today .frame .row .col-auto {
  width: auto;
}
.idx_weather .weather_swiper .swiper-slide.today h1 {
  font-size: 1.125rem;
  font-weight: 500;
}
.idx_weather .weather_swiper .swiper-slide.today .icon {
  min-width: 3.75rem;
  min-height: 3.75rem;
  width: 3.75rem;
  height: 3.75rem;
}
.idx_weather .weather_swiper .swiper-slide.today .icon.icon_01d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_13d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_13n {
  animation: loader3d 15s linear infinite both;
}
.idx_weather .weather_swiper .swiper-slide.today .icon.icon_01n {
  animation: pulse 0.8s ease-in-out infinite;
}
.idx_weather .weather_swiper .swiper-slide.today .icon.icon_02d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_02n, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_03d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_03n, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_04d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_04n, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_09d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_09n, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_10d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_10n, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_11d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_11n {
  transform: scale(1.4) translateY(0.1875rem);
}
.idx_weather .weather_swiper .swiper-slide.today .icon.icon_02d::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_02n::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_03d::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_03n::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_04d::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_04n::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_09d::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_09n::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_10d::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_10n::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_11d::before, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_11n::before {
  animation: ani_cloud 2.4s linear infinite forwards;
}
.idx_weather .weather_swiper .swiper-slide.today .icon.icon_09d::after, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_09n::after, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_10d::after, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_10n::after {
  top: 0.125rem;
  opacity: 0;
  animation: ani_rain 1.5s linear infinite both;
}
.idx_weather .weather_swiper .swiper-slide.today .icon.icon_11d::after, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_11n::after {
  animation: tada 2s linear infinite both;
}
.idx_weather .weather_swiper .swiper-slide.today .icon.icon_50d, .idx_weather .weather_swiper .swiper-slide.today .icon.icon_50n {
  animation: ani_cloud 2.4s linear infinite forwards;
}
.idx_weather .weather_swiper .swiper-slide.today .temperature {
  margin-bottom: 0;
}
.idx_weather .weather_swiper .swiper-slide.today .temperature i, .idx_weather .weather_swiper .swiper-slide.today .temperature b {
  font-size: 0.9375rem;
}
.idx_weather .weather_swiper .swiper-slide.today .temperature b {
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}
.idx_weather .weather_swiper .swiper-slide.today .pop {
  font-size: 0.9375rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idx_weather .weather_swiper .swiper-slide.today .pop::before {
  height: 0.9375rem;
}
.idx_weather .weather_swiper .swiper-slide.today .rainmm {
  display: block;
}

/* 當前區域狀態 */
.idx_status {
  width: 100%;
  max-width: 100%;
  height: 100%;
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  border-radius: 1.875rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.idx_status h1 {
  font-size: 1.125rem;
  line-height: 1.5555;
  color: #FFFFFF;
  font-weight: 500;
  padding: 0 1.375rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  letter-spacing: 0;
}
.idx_status h1 img {
  height: 0.9375rem;
}
.idx_status .tabs {
  padding: 0 0.3125rem;
  margin-bottom: 1rem;
  border-bottom: 0.0625rem solid #75757C;
  display: flex;
  justify-content: center;
  position: relative;
}
.idx_status .tabs span {
  display: block;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #FFFFFF;
  text-align: center;
  padding: 0.4375rem 0.9375rem;
  position: relative;
  border-bottom: 0.125rem solid transparent;
  letter-spacing: 0.075rem;
}
.idx_status .tabs span:active, .idx_status .tabs span:hover, .idx_status .tabs span.active {
  border-bottom: 0.125rem solid #FFFFFF;
}
.idx_status .status_header {
  position: relative;
  padding-top: 1rem;
  flex-shrink: 0;
}
.idx_status .status_header h1 {
  line-height: 1.3333;
  color: #75757C;
  letter-spacing: 0.125rem;
}
.idx_status .status_panes {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
}
.idx_status .status_panes > div {
  height: 100%;
  animation: fadeIn 0.3s linear;
  display: none;
}
.idx_status .status_panes > div.active {
  display: flex;
  flex-direction: column;
}
.idx_status .status_panes .body {
  flex-grow: 1;
  height: 100%;
  padding: 28px 15px;
  padding-bottom: 1px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
}
.idx_status .status_panes .body .deStatus {
  flex-shrink: 0;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(241, 241, 241, 0.8);
  text-align: center;
}
.idx_status .status_panes .body .deStatus > img {
  height: 52px;
}
.idx_status .status_panes .body .deStatus h1,
.idx_status .status_panes .body .deStatus h2 {
  font-family: "Poppins", sans-serif;
  line-height: 1.5;
  display: block;
  text-align: center;
  letter-spacing: 1.5px;
  margin: 0;
}
.idx_status .status_panes .body .deStatus h1 {
  font-size: 22px;
  color: #FFFFFF;
  font-weight: 700;
  padding: 8px 0;
}
.idx_status .status_panes .body .deStatus h2 {
  font-size: 15px;
  color: #9F9F9F;
  font-weight: 400;
}
.idx_status .status_panes .body .deContent {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idx_status .status_panes .body .deContent > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}
.idx_status .status_panes .body .deContent > div h3 {
  font-size: 16px;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 1.5px;
}
.idx_status .status_panes .body .deContent > div h3:not(:last-of-type) {
  margin-bottom: 26px;
}
.idx_status .status_panes .body .deContent > div h3 .useIcon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}
.idx_status .status_panes .body .deContent > div h3 .useIcon svg path {
  fill: #FFFFFF;
}
.idx_status .status_panes .body .deContent > div h3 .useIcon svg g:first-of-type {
  display: block;
}
.idx_status .status_panes .body .deContent > div h3 .useIcon svg g:last-of-type {
  display: none;
}
.idx_status .status_panes .body .deContent > div h3 span {
  min-width: 100px;
  text-align: center;
}
.idx_status .status_panes .body .deContent > div h3.error {
  color: #E14E41;
}
.idx_status .status_panes .body .deContent > div h3.error svg path {
  fill: #E14E41;
}
.idx_status .status_panes .body .deContent > div h3.error svg g:first-of-type {
  display: none;
}
.idx_status .status_panes .body .deContent > div h3.error svg g:last-of-type {
  display: block;
}
.idx_status .status_panes .footer {
  flex-shrink: 0;
  padding: 16px 10px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idx_status .status_panes .footer .notify_btn {
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
  min-width: 10rem;
  max-width: 100%;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: #202026;
  background-color: #E14E41;
  padding: 0.3125rem 0.625rem;
  letter-spacing: 0.0781rem;
  border-radius: 2.5rem;
  position: relative;
}
.idx_status .status_panes .footer .notify_btn:hover {
  opacity: 0.75;
}
.idx_status .status_panes .footer .notify_btn.active {
  cursor: default;
  background-color: #FDFF90;
}
.idx_status .status_panes .footer .notify_btn.active:hover {
  opacity: 1;
}
.idx_status .status_panes .footer .notify_btn.active span::after {
  content: "" attr(data-done) "";
}
.idx_status .status_panes .footer .notify_btn span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.idx_status .status_panes .footer .notify_btn span::after {
  content: "" attr(data-undone) "";
}
.idx_status .status_panes .btns {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 2;
  display: none;
}
@media (min-width: 1200px) {
  .idx_status .status_panes .btns {
    display: block;
  }
}
.idx_status .status_panes .btns .btnView,
.idx_status .status_panes .btns .btnOutput {
  display: inline-block;
  cursor: pointer;
  margin: 0 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  -webkit-waspect-ratio: 1/1;
  aspect-ratio: 1/1;
  transition: 0.2s;
}
.idx_status .status_panes .btns .btnView:hover,
.idx_status .status_panes .btns .btnOutput:hover {
  transform: scale(1.2);
  transition: 0.2s;
}
.idx_status .status_panes .btns .btnView {
  background-image: url(../images/icons/icon_zoomout.svg);
}
.idx_status .status_panes .btns .btnView.active {
  background-image: url(../images/icons/icon_zoomin.svg);
}
.idx_status .status_panes .btns .btnOutput {
  background-image: url(../images/icons/icon_upload.svg);
}
.idx_status .status_panes .status_park .body,
.idx_status .status_panes .status_flood .body {
  padding: 28px 15px;
}
.idx_status .status_panes .status_park h1,
.idx_status .status_panes .status_flood h1 {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #FFFFFF;
  font-weight: 400;
  padding: 0 0.3125rem;
  margin-bottom: 1.6875rem;
  display: flex;
  align-items: center;
}
.idx_status .status_panes .status_park h1 .h1_box,
.idx_status .status_panes .status_flood h1 .h1_box {
  display: none;
  background-color: #34343B;
  border-radius: 0.3125rem;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.45);
  position: absolute;
  top: -0.3125rem;
  left: 1.25rem;
  z-index: 2;
}
.idx_status .status_panes .status_park h1 .h1_box span,
.idx_status .status_panes .status_flood h1 .h1_box span {
  display: block;
  cursor: pointer;
  padding: 0.5rem 3.9375rem 0.5rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #9F9F9F;
  margin-bottom: 0.625rem;
}
.idx_status .status_panes .status_park h1 .h1_box span.active, .idx_status .status_panes .status_park h1 .h1_box span:hover,
.idx_status .status_panes .status_flood h1 .h1_box span.active,
.idx_status .status_panes .status_flood h1 .h1_box span:hover {
  color: #FFFFFF;
  background-color: #000000;
}
.idx_status .status_panes .status_park h1 .h1_box span:not(:last-of-type),
.idx_status .status_panes .status_flood h1 .h1_box span:not(:last-of-type) {
  margin-bottom: 0.25rem;
}
.idx_status .status_panes .status_park h1.active .h1_box,
.idx_status .status_panes .status_flood h1.active .h1_box {
  display: inline;
}
.idx_status .status_panes .status_park .box,
.idx_status .status_panes .status_flood .box {
  margin-bottom: 0.25rem;
}
.idx_status .status_panes .status_park .box.active .box_area,
.idx_status .status_panes .status_flood .box.active .box_area {
  display: block;
}
.idx_status .status_panes .status_park .box h2,
.idx_status .status_panes .status_flood .box h2 {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 400;
  cursor: pointer;
  color: #FFFFFF;
  background-color: #424248;
  padding: 0.25rem 0.5rem;
  background-color: #424248;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.idx_status .status_panes .status_park .box h2:hover,
.idx_status .status_panes .status_flood .box h2:hover {
  font-weight: 500;
}
.idx_status .status_panes .status_park .box h2.active img,
.idx_status .status_panes .status_flood .box h2.active img {
  transition: all 0.2s;
  transform: rotate(180deg);
}
.idx_status .status_panes .status_park .box .box_area,
.idx_status .status_panes .status_flood .box .box_area {
  display: none;
}
.idx_status .status_panes .status_park .box .box_area.active,
.idx_status .status_panes .status_flood .box .box_area.active {
  padding: 0.25rem 0;
}
.idx_status .status_panes .status_park .box .box_area.active table,
.idx_status .status_panes .status_flood .box .box_area.active table {
  display: table;
  margin-bottom: 0.3125rem;
}
.idx_status .status_panes .status_park .box .box_area h3,
.idx_status .status_panes .status_flood .box .box_area h3 {
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  color: #FFFFFF;
  font-weight: 400;
  padding: 0 0.3125rem 0 0.5625rem;
  margin-bottom: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}
.idx_status .status_panes .status_park .box .box_area h3:hover,
.idx_status .status_panes .status_flood .box .box_area h3:hover {
  opacity: 0.75;
}
.idx_status .status_panes .status_park .box .box_area table,
.idx_status .status_panes .status_flood .box .box_area table {
  width: 100%;
  max-width: 100%;
  display: none;
}
.idx_status .status_panes .status_park .box .box_area table thead td,
.idx_status .status_panes .status_flood .box .box_area table thead td {
  font-size: 0.9375rem;
  line-height: 1.3333;
  color: #838384;
  text-align: center;
  padding: 0.25rem;
  letter-spacing: 0.0938rem;
}
.idx_status .status_panes .status_park .box .box_area table tbody tr,
.idx_status .status_panes .status_flood .box .box_area table tbody tr {
  margin-bottom: 0.125rem;
  position: relative;
}
.idx_status .status_panes .status_park .box .box_area table tbody tr td,
.idx_status .status_panes .status_flood .box .box_area table tbody tr td {
  font-size: 1rem;
  line-height: 1.5;
  color: #FFFFFF;
  letter-spacing: 0.0938rem;
}
.idx_status .status_panes .status_park .box .box_area table tbody tr td:nth-of-type(1),
.idx_status .status_panes .status_flood .box .box_area table tbody tr td:nth-of-type(1) {
  text-align: left;
}
.idx_status .status_panes .status_park .box .box_area table tbody tr td:nth-of-type(5),
.idx_status .status_panes .status_flood .box .box_area table tbody tr td:nth-of-type(5) {
  font-size: 0.8125rem;
  text-align: right;
}
.idx_status .status_panes .status_park .box .box_area table .device_result td,
.idx_status .status_panes .status_flood .box .box_area table .device_result td {
  position: relative;
}
.idx_status .status_panes .status_park .box .box_area table .device_result td span,
.idx_status .status_panes .status_flood .box .box_area table .device_result td span {
  text-align: right;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(-100% + 0.3125rem);
  padding-top: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.idx_status .status_panes .status_park .box .box_area table .device_result td span i,
.idx_status .status_panes .status_flood .box .box_area table .device_result td span i {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
}
.idx_status .status_panes .status_park .box .box_area table .device_result.noCar i,
.idx_status .status_panes .status_flood .box .box_area table .device_result.noCar i {
  border: 0.0625rem solid #FFFFFF;
}
.idx_status .status_panes .status_park .box .box_area table .device_result.hasCar i,
.idx_status .status_panes .status_flood .box .box_area table .device_result.hasCar i {
  border: 0.0625rem solid #FFFFFF;
  background-color: #FFFFFF;
}
.idx_status .status_panes .status_park .box .box_area table .device_result.parkOver i,
.idx_status .status_panes .status_flood .box .box_area table .device_result.parkOver i {
  border: 0.0625rem solid #0A72EC;
  box-shadow: 0 0 0.3125rem #0A72EC !important;
}
.idx_status .status_panes .status_park .box .box_area table .device_result.parkOver td:last-of-type,
.idx_status .status_panes .status_flood .box .box_area table .device_result.parkOver td:last-of-type {
  color: #0A72EC;
}
.idx_status .status_panes .status_park .box .box_area table .device_result.sensorError i,
.idx_status .status_panes .status_flood .box .box_area table .device_result.sensorError i {
  border: 0.0625rem solid #E14E41 !important;
  box-shadow: 0 0 0.3125rem #E14E41;
}
.idx_status .status_panes .status_park .box .box_area table .device_result.noSignal td:nth-child(2), .idx_status .status_panes .status_park .box .box_area table .device_result.noSignal td:nth-child(3),
.idx_status .status_panes .status_flood .box .box_area table .device_result.noSignal td:nth-child(2),
.idx_status .status_panes .status_flood .box .box_area table .device_result.noSignal td:nth-child(3) {
  opacity: 0.45;
}
.idx_status .status_panes .status_park .box .box_area table .device_result.noSensor td:nth-child(2), .idx_status .status_panes .status_park .box .box_area table .device_result.noSensor td:nth-child(3),
.idx_status .status_panes .status_flood .box .box_area table .device_result.noSensor td:nth-child(2),
.idx_status .status_panes .status_flood .box .box_area table .device_result.noSensor td:nth-child(3) {
  opacity: 0;
}
.idx_status .status_panes .status_park .box .box_area table td:nth-of-type(1),
.idx_status .status_panes .status_flood .box .box_area table td:nth-of-type(1) {
  padding-left: 0.5625rem;
}
.idx_status .status_panes .status_park .box .box_area table td:nth-of-type(4),
.idx_status .status_panes .status_park .box .box_area table td:nth-of-type(5),
.idx_status .status_panes .status_flood .box .box_area table td:nth-of-type(4),
.idx_status .status_panes .status_flood .box .box_area table td:nth-of-type(5) {
  display: none;
}
.idx_status .status_panes .status_park .box .box_area table td:nth-of-type(4),
.idx_status .status_panes .status_flood .box .box_area table td:nth-of-type(4) {
  text-align: center;
}
.idx_status .status_panes .status_park .box .box_area table td:nth-of-type(5),
.idx_status .status_panes .status_flood .box .box_area table td:nth-of-type(5) {
  text-align: right;
}
.idx_status .status_panes .status_park .box .box_area table .icon_signal,
.idx_status .status_panes .status_park .box .box_area table .icon_hole,
.idx_status .status_panes .status_flood .box .box_area table .icon_signal,
.idx_status .status_panes .status_flood .box .box_area table .icon_hole {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0 auto;
}
.idx_status .status_panes .status_park .box .box_area table .icon_signal.signal0,
.idx_status .status_panes .status_flood .box .box_area table .icon_signal.signal0 {
  background-image: url(../images/icons/icon_signal0.svg);
}
.idx_status .status_panes .status_park .box .box_area table .icon_signal.signal1,
.idx_status .status_panes .status_flood .box .box_area table .icon_signal.signal1 {
  background-image: url(../images/icons/icon_signal1.svg);
}
.idx_status .status_panes .status_park .box .box_area table .icon_signal.signal2,
.idx_status .status_panes .status_flood .box .box_area table .icon_signal.signal2 {
  background-image: url(../images/icons/icon_signal2.svg);
}
.idx_status .status_panes .status_park .box .box_area table .icon_signal.signal3,
.idx_status .status_panes .status_flood .box .box_area table .icon_signal.signal3 {
  background-image: url(../images/icons/icon_signal3.svg);
}
.idx_status .status_panes .status_park .box .box_area table .icon_signal.signal4,
.idx_status .status_panes .status_flood .box .box_area table .icon_signal.signal4 {
  background-image: url(../images/icons/icon_signal4.svg);
}
.idx_status .status_panes .status_park .box .box_area table .icon_signal.signal5,
.idx_status .status_panes .status_flood .box .box_area table .icon_signal.signal5 {
  background-image: url(../images/icons/icon_signal5.svg);
}
.idx_status .status_panes .status_park .box .box_area table .icon_hole.hole_good,
.idx_status .status_panes .status_flood .box .box_area table .icon_hole.hole_good {
  background-image: url(../images/icons/icon_pizza_good.svg);
}
.idx_status .status_panes .status_park .box .box_area table .icon_hole.hole_bad,
.idx_status .status_panes .status_flood .box .box_area table .icon_hole.hole_bad {
  background-image: url(../images/icons/icon_pizza_error.svg);
}
.idx_status .status_panes .status_park .box .b-high {
  color: #00CC99;
}
.idx_status .status_panes .status_park .box .b-medium {
  color: #57D4EF;
}
.idx_status .status_panes .status_park .box .b-low {
  color: #E14E41;
}
.idx_status .status_panes .status_park .box .box_area {
  overflow-x: hidden;
}
.idx_status .status_panes .status_park .box .box_area div.box {
  font-size: 0.9375rem;
  line-height: 1.3333;
  color: #838384;
  text-align: center;
  padding: 0.25rem;
  letter-spacing: 0.0938rem;
}
.idx_status .status_panes .status_park .box .box_area table thead tr {
  max-width: 120px;
  text-align: center;
}
.idx_status .status_panes .status_park .box .box_area.on table {
  display: table;
  margin-bottom: 0.3125rem;
}
.idx_status .status_panes .status_park .lv2.on h2 {
  margin-bottom: 10px;
}
.idx_status .status_panes .status_flood .body h1 {
  flex-shrink: 0;
}
.idx_status .status_panes .status_flood .box .box_area {
  overflow-x: auto;
}
.idx_status .status_panes .status_flood .box .box_area table tbody tr td:nth-of-type(1) {
  font-family: "Poppins", sans-serif;
  padding-left: 0.9375rem;
}
.idx_status .status_panes .status_flood .box .box_area table .battery::after {
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0;
  content: "" attr(val) "%";
}
.idx_status .status_panes .status_flood .box .box_area table .battery.low {
  color: #E14E41;
}
.idx_status .status_panes .status_flood .box .box_area table .battery.medium {
  color: #57D4EF;
}
.idx_status .status_panes .status_flood .box .box_area table .battery.high {
  color: #00CC99;
}
.idx_status .status_panes .status_flood .box .box_area table .signal {
  min-width: 3.125rem;
  min-height: 2.5rem;
  width: 3.125rem;
  height: 2.5rem;
}
.idx_status .status_panes .status_flood .box .box_area table .signal svg {
  width: 100%;
  height: 100%;
  -webkit-aspect-ratio: 1/1;
  aspect-ratio: 1/1;
}
.idx_status .status_panes .status_flood .box .box_area table .signal svg path {
  fill: #FFFFFF;
  opacity: 0.5;
}
.idx_status .status_panes .status_flood .box .box_area table .signal.signal1 svg path:nth-child(-n+1) {
  opacity: 1;
}
.idx_status .status_panes .status_flood .box .box_area table .signal.signal2 svg path:nth-child(-n+2) {
  opacity: 1;
}
.idx_status .status_panes .status_flood .box .box_area table .signal.signal3 svg path:nth-child(-n+3) {
  opacity: 1;
}
.idx_status .status_panes .status_flood .box .box_area table .signal.signal4 svg path:nth-child(-n+4) {
  opacity: 1;
}
.idx_status .status_panes .status_flood .box .box_area table .signal.signal5 svg path:nth-child(-n+5) {
  opacity: 1;
}
.idx_status .status_panes .status_flood .box .box_area table .device_result td span {
  left: calc(-100% + 0.6875rem);
}
.idx_status .status_panes #status_park #status_park_body input {
  background-color: transparent;
  caret-color: transparent;
  color: #FFFFFF;
}
.idx_status .status_panes #status_park #status_park_body u > input {
  cursor: pointer;
}
.idx_status .status_panes #status_park #status_park_body:is(.err-power, .err-link, .err-signal, .err-alert) .lv2.on .lv3.hasCount {
  display: block;
}
.idx_status .status_panes #status_park #status_park_body:is(.err-power, .err-link, .err-signal, .err-alert) .lv3,
.idx_status .status_panes #status_park #status_park_body:is(.err-power, .err-link, .err-signal, .err-alert) .mplv-4 {
  display: none;
}
.idx_status .status_panes #status_park #status_park_body.err-power .mplv-4.err-power {
  display: table-row;
}
.idx_status .status_panes #status_park #status_park_body.err-link .mplv-4.err-link {
  display: table-row;
}
.idx_status .status_panes #status_park #status_park_body.err-signal .mplv-4.err-signal {
  display: table-row;
}
.idx_status .status_panes #status_park #status_park_body.err-alert .mplv-4.err-alert {
  display: table-row;
}
.idx_status .status_panes #status_park .lv2.on .lv3 {
  display: block;
}
.idx_status .status_panes #status_park .lv2.on:has(.lv3.one.on) .lv3 {
  display: none !important;
}
.idx_status .status_panes #status_park .lv2.on:has(.lv3.one.on) .lv3.one.on {
  display: block !important;
  margin-top: 10px;
}
.idx_status .status_panes #status_park.filter .lv2,
.idx_status .status_panes #status_park.filter .lv3 {
  display: block;
}
.idx_status .status_panes #status_park.filter .lv2:not(.on) {
  display: none;
}
.idx_status .status_issue div.gi {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idx_status .status_issue div.gi u {
  font-size: 2rem;
}
.idx_status .status_issue b.sum {
  color: #898989;
}
.idx_status .status_issue .body {
  text-align: center;
  padding: 1.75rem 1.875rem 0.0625rem 1.875rem;
  display: flex;
  flex-direction: column;
}
.idx_status .status_issue .body > img {
  height: 2.0625rem;
  margin-bottom: 1.25rem;
}
.idx_status .status_issue .row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-bottom: 0.625rem;
}
.idx_status .status_issue .col-6 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 1rem;
}
.idx_status .status_issue .status_inner {
  width: 100%;
  min-height: 5rem;
  cursor: pointer;
  color: #CCCCCC;
  background-color: #3F3F46;
  border-radius: 0.625rem;
  text-align: center;
  border: 0.0625rem solid #3F3F46;
  padding: 0.625rem 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.idx_status .status_issue .status_inner svg {
  width: 1.5625rem;
  height: 1.5625rem;
  margin: 0.3125rem auto;
}
.idx_status .status_issue .status_inner svg path {
  fill: #FFFFFF;
}
.idx_status .status_issue .status_inner svg g:first-of-type {
  display: block;
}
.idx_status .status_issue .status_inner svg g:last-of-type {
  display: none;
}
.idx_status .status_issue .status_inner span,
.idx_status .status_issue .status_inner i {
  display: none;
}
.idx_status .status_issue .status_inner b,
.idx_status .status_issue .status_inner h2 {
  font-family: "Comfortaa", sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #898989;
}
.idx_status .status_issue .status_inner h2 {
  color: #FFFFFF;
}
.idx_status .status_issue .status_inner.error {
  cursor: pointer;
}
.idx_status .status_issue .status_inner.error:hover {
  border: 0.0625rem solid #E14E41;
}
.idx_status .status_issue .status_inner.error svg path {
  fill: #E14E41;
}
.idx_status .status_issue .status_inner.error svg g:first-of-type {
  display: none;
}
.idx_status .status_issue .status_inner.error svg g:last-of-type {
  display: block;
}
.idx_status .status_issue .status_inner.error h2 {
  color: #E14E41;
}
.idx_status .status_issue .status_inner.error:active:active {
  transform: scale(0.95);
}
.idx_status .status_issue .status_inner.on, .idx_status .status_issue .status_inner.on:hover {
  border: 3px solid #E14E41;
}
.idx_status .status_issue .status_inner .status_icons {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
}
.idx_status .status_issue .status_inner .status_icons.icon_battery {
  background-image: url(../images/icons/icon_battery1.svg);
}
.idx_status .status_issue .status_inner .status_icons.icon_lightning {
  background-image: url(../images/icons/icon_lightning1.svg);
}
.idx_status .status_issue .status_inner .status_icons.icon_abnormal {
  background-image: url(../images/icons/icon_abnormal1.svg);
}
.idx_status .status_issue .status_inner .status_icons.icon_wifi {
  background-image: url(../images/icons/icon_wifi1.svg);
}
.idx_status .status_issue .status_inner .status_icons.icon_rsrp {
  background-image: url(../images/icons/icon_rsrp1.svg);
}
.idx_status .status_issue .status_inner .status_icons.icon_snr {
  background-image: url(../images/icons/icon_snr1.svg);
}
.idx_status .status_issue .status_inner .status_icons.icon_pizza {
  background-image: url(../images/icons/icon_pizza1.svg);
}
.idx_status .status_issue .status_inner h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 700;
}
.idx_status .status_issue .error {
  color: #F26464;
}

/* 數據可視化 */
.data_visual {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.data_visual > div {
  border-radius: 1.875rem;
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  display: none;
  position: relative;
  transition: all 0.2s;
  animation: fadeIn 1s;
  margin-left: auto;
}
.data_visual > div.active {
  display: block;
}
.data_visual .visual_inner {
  height: 16.25rem;
  padding: 26px 36px;
  padding-bottom: 0;
  display: flex;
}
.data_visual .visual_inner > div {
  padding-bottom: 26px;
}
.data_visual .visual_inner .visual_ {
  flex-shrink: 0;
  display: flex;
}
.data_visual .visual_inner .visual_ > h1 {
  font-size: 0.875rem;
  line-height: 1.4286;
  color: #F1F1F1;
  font-weight: 500;
  text-align: right;
  opacity: 0.65;
  position: absolute;
  right: 1.25rem;
  bottom: 0.5rem;
}
.data_visual .visual_inner .visual_ > h1 span {
  font-family: "Poppins", sans-serif;
}
.data_visual .visual_inner .visual_title {
  width: 11.875rem;
  max-width: 11.875rem;
  padding-bottom: 0.9375rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.data_visual .visual_inner .visual_title h1 {
  font-size: 2.25rem;
  line-height: 1.4857;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data_visual .visual_inner .visual_title h1 span,
.data_visual .visual_inner .visual_title h1 small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data_visual .visual_inner .visual_title h1 small {
  font-size: 1rem;
  color: #9F9F9F;
  margin-left: 0.3125rem;
}
.data_visual .visual_inner .visual_title h2 {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 0.3125rem;
  position: relative;
  padding: 0 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  justify-content: center;
  flex-direction: column;
  display: none;
}
.data_visual .visual_inner .visual_title h2::before {
  width: 0.1875rem;
  height: 60%;
  background-color: #FFFFFF;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
}
.data_visual .visual_inner .visual_title h2 b {
  display: block;
  font-weight: 500;
}
.data_visual .visual_inner .visual_title h3,
.data_visual .visual_inner .visual_title h4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 1px;
}
.data_visual .visual_inner .visual_title h3 span {
  font-family: "Poppins", sans-serif;
  font-size: 1.75rem;
  line-height: 1.4286;
  color: #FFFFFF;
  font-weight: 500;
  padding-left: 0.75rem;
}
.data_visual .visual_inner .visual_title h4 b {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #E3E3E3;
  font-weight: 500;
  padding-left: 0.3125rem;
}
.data_visual .visual_inner .visual_title h5 {
  font-size: 1.75rem;
  line-height: 1.4286;
  color: #57D4EF;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: 0.075rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data_visual .visual_inner .visual_title b {
  font-size: 28px;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  position: relative;
}
.data_visual .areas_swiper {
  padding: 0.25rem 5rem 0.25rem 4rem;
  border-bottom: 0.0625rem solid #9F9F9F;
  max-width: none;
  position: relative;
  animation: fadeIn;
  animation-duration: 1s;
}
.data_visual .areas_swiper .swiper {
  animation: fadeInRight;
  animation-duration: 0.6s;
}
.data_visual .areas_swiper .swiper-slide {
  width: auto;
  padding: 0 1.25rem;
}
.data_visual .areas_swiper .swiper-slide span {
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  line-height: 1.4286;
  cursor: pointer;
  color: #9F9F9F;
  font-weight: 300;
  text-align: center;
}
.data_visual .areas_swiper .swiper-slide span.active, .data_visual .areas_swiper .swiper-slide span:active, .data_visual .areas_swiper .swiper-slide span:hover {
  color: #FFFFFF;
}
.data_visual .areas_swiper .swiper-button-next {
  right: 2.75rem;
}
.data_visual .areas_swiper .swiper-button-prev {
  left: 2.0625rem;
}
.data_visual .visual_swiper {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}
.data_visual .visual_swiper .swiper {
  height: 100%;
}
.data_visual .visual_swiper .swiper .swiper-slide {
  min-width: 160px;
  width: auto;
  height: 100%;
  padding: 0 8px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.data_visual .visual_swiper .swiper .swiper-slide > div {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}
.data_visual .visual_swiper .swiper .swiper-slide > div + h1 {
  width: 100%;
  text-align: center;
}
.data_visual .visual_swiper h1 {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.6;
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.data_visual .visual_swiper .park_pie #bigCharts,
.data_visual .visual_swiper .park_pie #barCharts,
.data_visual .visual_swiper .park_bar #bigCharts,
.data_visual .visual_swiper .park_bar #barCharts {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.data_visual .visual_swiper .park_pie {
  width: 208px !important;
  height: 208px !important;
  margin: 0 30px;
  margin-right: 30px;
}
.data_visual .visual_swiper .park_pie b {
  display: inline-block;
  width: 94%;
  height: 94%;
  background-color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1.5rem solid #CACACB;
}
.data_visual .visual_swiper .four_pies {
  width: 20rem !important;
  max-width: 20rem;
  padding: 10px !important;
}
.data_visual .visual_swiper .four_pies .row {
  --bs-gutter-x: 6px;
}
.data_visual .visual_swiper .four_pies .row .col-6 {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.data_visual .visual_swiper .four_pies .four_item {
  flex-shrink: 0;
  width: 4rem;
  -webkit-aspect-ratio: 1/1;
  aspect-ratio: 1/1;
  position: relative;
}
.data_visual .visual_swiper .four_pies .four_item canvas {
  width: 3.8rem !important;
  height: 3.8rem !important;
}
.data_visual .visual_swiper .four_pies .four_num {
  text-align: center;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}
.data_visual .visual_swiper .four_pies .four_num p {
  font-family: "Poppins", sans-serif;
  min-width: 3.125rem;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  color: #FFFFFF;
}
.data_visual .visual_swiper .four_pies .four_num img {
  max-width: 60px;
}
.data_visual .visual_swiper .park_bar::before, .data_visual .visual_swiper .park_bar::after {
  position: absolute;
  content: "";
}
.data_visual .visual_swiper .park_bar::before {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #34353B;
  border-radius: 50%;
  left: 3rem;
  bottom: 2rem;
  z-index: 1;
}
.data_visual .visual_swiper .park_bar::after {
  background-image: url(../images/icons/icon_arrow_car.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  left: 1.5rem;
  bottom: 0.625rem;
  z-index: 2;
}
.data_visual .visual_swiper .park_bar > div {
  width: 325px;
  height: 214px;
}
.data_visual .visual_swiper .park_rate h1,
.data_visual .visual_swiper .out_record h1 {
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #9F9F9F;
  font-weight: 500;
  text-align: left;
  padding-bottom: 0.375rem;
}
.data_visual .visual_swiper .park_rate {
  width: 24rem !important;
  max-width: 24rem;
  text-align: center;
  padding-bottom: 10px !important;
}
.data_visual .visual_swiper .park_rate .row {
  --bs-gutter-x: 7px;
  position: relative;
  z-index: 89;
}
.data_visual .visual_swiper .park_rate .row .col-6 {
  margin-bottom: 0.875rem;
}
.data_visual .visual_swiper .park_rate .row .rate_box {
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0.5rem 0.5rem 0.75rem 0.5rem;
  border-radius: 0.875rem;
  border: 0.0625rem dashed #75757C;
}
.data_visual .visual_swiper .park_rate .row .rate_box::before {
  font-size: 1.625re0m;
  color: #75757C;
  content: "+";
}
.data_visual .visual_swiper .park_rate .row .rate_box.getDanger h2 span {
  color: #F26464 !important;
}
.data_visual .visual_swiper .park_rate .row .rate_box.getDanger h2 span::after {
  content: "" !important;
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty {
  background-color: #3F3F46;
  border: 0.0625rem solid #3F3F46;
  display: block;
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty::before {
  font-size: 0;
  content: "";
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty h2,
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty h3 {
  display: block;
  letter-spacing: 0.0938rem;
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty h2 {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #57D4EF;
  font-weight: 700;
  margin-bottom: 0.3125rem;
  display: flex;
  justify-content: space-between;
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty h2 span {
  color: #FFFFFF;
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty h2 span::after {
  content: "%";
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty h3 {
  font-size: 0.9375rem;
  line-height: 1.3333;
  color: #FFFFFF;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty h3 span:first-of-type {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data_visual .visual_swiper .park_rate .row .rate_box.noEmpty h3 span:last-of-type {
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
}
.data_visual .visual_swiper .park_rate .row .rate_box h2,
.data_visual .visual_swiper .park_rate .row .rate_box h3 {
  text-align: left;
  display: none;
}
.data_visual .visual_swiper .out_record {
  width: 100% !important;
  max-width: 1300px !important;
  padding: 0 30px 25px 30px !important;
}
.data_visual .visual_swiper .out_record > div {
  display: block !important;
  overflow: auto;
}
.data_visual .visual_swiper .out_record table thead tr th:first-of-type,
.data_visual .visual_swiper .out_record table thead tr td:first-of-type,
.data_visual .visual_swiper .out_record table tbody tr th:first-of-type,
.data_visual .visual_swiper .out_record table tbody tr td:first-of-type {
  z-index: 1;
  text-align: center;
}
.data_visual .visual_swiper .out_record table thead tr td:last-child,
.data_visual .visual_swiper .out_record table tbody tr td:last-child {
  text-align: center;
}
.data_visual .visual_swiper .out_record table tbody tr:nth-of-type(odd) td {
  background-color: #040404;
}
.data_visual .visual_swiper .out_record table tbody tr:nth-of-type(even) td {
  background-color: #232323;
}
.data_visual .visual_swiper .out_record table tbody tr td:nth-of-type(2) {
  text-align: center;
}
.data_visual .visual_swiper .out_record table thead tr th {
  background-color: #4E4E4E;
}
.data_visual .visual_swiper .out_record table tr th,
.data_visual .visual_swiper .out_record table tr td {
  position: sticky;
  left: 0;
}
.data_visual .visual_swiper .out_record table u {
  cursor: pointer;
}
.data_visual .visual_swiper .out_record table u input {
  cursor: pointer;
  background-color: transparent;
  caret-color: transparent;
  color: #FFFFFF;
  -webkit-pointer-events: none;
  pointer-events: none;
}
.data_visual .visual_swiper .abt_car,
.data_visual .visual_swiper .abt_device,
.data_visual .visual_swiper .abt_carType,
.data_visual .visual_swiper .noBind,
.data_visual .visual_swiper .noConnect,
.data_visual .visual_swiper .abt_car_in,
.data_visual .visual_swiper .abt_car_delay {
  min-width: 200px !important;
}
.data_visual .visual_swiper .abt_car i svg,
.data_visual .visual_swiper .abt_device i svg,
.data_visual .visual_swiper .abt_carType i svg,
.data_visual .visual_swiper .abt_hole i svg,
.data_visual .visual_swiper .abt_circle i svg {
  width: 100%;
  height: 100%;
}
.data_visual .visual_swiper .abt_car i {
  display: block;
  width: 6.4375rem;
  height: 6rem;
}
.data_visual .visual_swiper .abt_car i svg path {
  fill: #FFFFFF;
}
.data_visual .visual_swiper .abt_car h1::before {
  content: "" attr(data-status-has-car) "";
}
.data_visual .visual_swiper .abt_device i {
  width: 6.4375rem;
  height: 6rem;
}
.data_visual .visual_swiper .abt_device i svg path {
  fill: #FFFFFF;
}
.data_visual .visual_swiper .abt_device h1::before {
  content: "" attr(data-status-nice-device) "";
}
.data_visual .visual_swiper .abt_carType i {
  height: 5.9375rem;
}
.data_visual .visual_swiper .abt_carType i.ct1 {
  width: 7rem;
}
.data_visual .visual_swiper .abt_carType i.ct2 {
  width: 6rem;
}
.data_visual .visual_swiper .abt_carType i.ct3 {
  width: 6.875rem;
}
.data_visual .visual_swiper .abt_carType i.ct4 {
  display: block;
  width: 6.875rem;
}
.data_visual .visual_swiper .abt_carType i.ct5 {
  width: 9rem;
}
.data_visual .visual_swiper .abt_carType i.ct6 {
  width: 9rem;
}
.data_visual .visual_swiper .abt_carType i svg path {
  fill: #FFFFFF;
}
.data_visual .visual_swiper .noBind {
  display: none !important;
}
.data_visual .visual_swiper .noBind i {
  display: block;
  width: 6.4375rem;
  height: 6rem;
}
.data_visual .visual_swiper .noBind img {
  max-height: 100px;
}
.data_visual .visual_swiper .noConnect {
  color: #666666 !important;
  display: none !important;
}
.data_visual .visual_swiper .noConnect h1 {
  color: #666666 !important;
}
.data_visual .visual_swiper .abt_car_in,
.data_visual .visual_swiper .abt_car_delay {
  min-width: 210px !important;
}
.data_visual .visual_swiper .abt_car_in > div,
.data_visual .visual_swiper .abt_car_delay > div {
  flex-grow: 0 !important;
  width: 100%;
  max-width: 100%;
  height: 5.5rem !important;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #FFFFFF;
  font-weight: 500;
  border-radius: 0.75rem;
  border: 0.125rem solid #FFFFFF;
  flex-direction: column;
}
.data_visual .visual_swiper .abt_car_in > div span,
.data_visual .visual_swiper .abt_car_delay > div span {
  font-size: 1rem;
  font-weight: 300;
}
.data_visual .visual_swiper .abt_car_in h1,
.data_visual .visual_swiper .abt_car_delay h1 {
  width: 100%;
  text-align: center;
  margin-bottom: 0.75rem;
  align-self: flex-start;
}
.data_visual .visual_swiper .abt_car_in .time_box span, .data_visual .visual_swiper .abt_car_in .time_box b,
.data_visual .visual_swiper .abt_car_delay .time_box span,
.data_visual .visual_swiper .abt_car_delay .time_box b {
  font-family: "Poppins", sans-serif;
  display: none;
}
.data_visual .visual_swiper .abt_car_in .time_box i,
.data_visual .visual_swiper .abt_car_delay .time_box i {
  font-style: normal;
  display: block;
}
.data_visual .visual_swiper .abt_gasValue {
  min-width: 310px !important;
}
.data_visual .visual_swiper .abt_gasValue > div {
  flex-direction: column;
}
.data_visual .visual_swiper .abt_gasValue span {
  font-family: "Roboto", sans-serif;
}
.data_visual .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 16px;
}
.data_visual.isCity .visual_inner .visual_title h1 small {
  display: none;
}
.data_visual.isCity .visual_inner .visual_title h2 b {
  display: none;
}
.data_visual.isCity .visual_inner .visual_title h5 {
  display: none;
}
.data_visual.isDist .visual_inner .visual_title h1 small {
  display: none;
}
.data_visual.isDist .visual_inner .visual_title h2 b {
  display: none;
}
.data_visual.isDist .visual_inner .visual_title h5 {
  display: none;
}
.data_visual.isDist #areas_stage1_swiper,
.data_visual.isDist #areas_stage2_swiper {
  display: block;
}
.data_visual.isRoad .visual_inner .visual_title h1 {
  font-size: 1.375rem;
}
.data_visual.isRoad .visual_inner .visual_title h2 {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.data_visual.isRoad .visual_inner .visual_title h5 {
  display: none;
}
.data_visual.isRoad #areas_stage1_swiper,
.data_visual.isRoad #areas_stage2_swiper {
  display: block;
}
.data_visual.isDevice .visual_inner .visual_title h1 {
  font-size: 1.375rem;
}
.data_visual.isDevice .visual_inner .visual_title h2 {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.data_visual.isDevice .visual_inner .title_result {
  display: none;
}
.data_visual.isDevice #areas_stage1_swiper,
.data_visual.isDevice #areas_stage2_swiper {
  display: block;
}
.data_visual.isDevice #visual_car_swiper,
.data_visual.isDevice #visual_flood_swiper {
  display: none;
}
.data_visual.isDevice #car_device_swiper,
.data_visual.isDevice #flood_device_swiper {
  display: block;
}
.data_visual.isDevice.noCar .abt_car svg {
  opacity: 0.3;
}
.data_visual.isDevice.noCar .abt_car h1::before {
  opacity: 0.3;
  content: "" attr(data-status-no-car) "";
}
.data_visual.isDevice.noCar .abt_car_in .time_box span, .data_visual.isDevice.noCar .abt_car_in .time_box b,
.data_visual.isDevice.noCar .abt_car_delay .time_box span,
.data_visual.isDevice.noCar .abt_car_delay .time_box b {
  display: none;
}
.data_visual.isDevice.noCar .abt_car_in .time_box i,
.data_visual.isDevice.noCar .abt_car_delay .time_box i {
  display: block;
}
.data_visual.isDevice.hasCar .abt_car h1::before {
  content: "" attr(data-status-has-car) "";
}
.data_visual.isDevice.hasCar .abt_car_in .time_box span, .data_visual.isDevice.hasCar .abt_car_in .time_box b {
  display: block;
}
.data_visual.isDevice.hasCar .abt_car_in .time_box i {
  display: none;
}
.data_visual.isDevice.hasCar .abt_car_delay .time_box b {
  display: none;
}
.data_visual.isDevice.hasCar .abt_car_delay .time_box i {
  display: block;
}
.data_visual.isDevice.isDelay .abt_car h1::before {
  content: "" attr(data-status-has-car) "";
}
.data_visual.isDevice.isDelay .abt_car_in .time_box span, .data_visual.isDevice.isDelay .abt_car_in .time_box b {
  display: block;
}
.data_visual.isDevice.isDelay .abt_car_in .time_box i {
  display: none;
}
.data_visual.isDevice.isDelay .abt_car_delay .time_box {
  border: 2px solid #0A72EC;
}
.data_visual.isDevice.isDelay .abt_car_delay .time_box b {
  display: block;
}
.data_visual.isDevice.isDelay .abt_car_delay .time_box i {
  display: none;
}
.data_visual.isDevice.fineDevice .abt_device .d {
  display: block;
}
.data_visual.isDevice.fineDevice .abt_device .q {
  display: none;
}
.data_visual.isDevice.fineDevice .abt_device i path {
  fill: #FFFFFF;
}
.data_visual.isDevice.fineDevice .abt_device h1::before {
  content: "" attr(data-status-nice-device) "";
}
.data_visual.isDevice.badDevice .abt_device .d {
  display: block;
}
.data_visual.isDevice.badDevice .abt_device .q {
  display: none;
}
.data_visual.isDevice.badDevice .abt_device i svg path {
  fill: #E14E41;
}
.data_visual.isDevice.badDevice .abt_device h1::before {
  color: #E14E41;
  content: "" attr(data-status-bad-device) "";
}
.data_visual.isDevice.loseDevice .abt_device .d, .data_visual.isDevice.loseDevice .abt_device .q {
  display: block;
}
.data_visual.isDevice.loseDevice .abt_device i svg path {
  fill: #E14E41;
}
.data_visual.isDevice.loseDevice .abt_device i.q svg path {
  fill: #FFFFFF;
}
.data_visual.isDevice.loseDevice .abt_device h1::before {
  color: #E14E41;
  content: "" attr(data-status-bad-device) "";
}
.data_visual.isDevice.carType1 .abt_carType .ct1 {
  display: block;
}
.data_visual.isDevice.carType1 .abt_carType i:not(.ct1) {
  display: none;
}
.data_visual.isDevice.carType1 .abt_carType h1::before {
  content: "" attr(carType1) "";
}
.data_visual.isDevice.carType2 .abt_carType .ct2 {
  display: block;
}
.data_visual.isDevice.carType2 .abt_carType i:not(.ct2) {
  display: none;
}
.data_visual.isDevice.carType2 .abt_carType h1::before {
  content: "" attr(carType2) "";
}
.data_visual.isDevice.carType3 .abt_carType .ct3 {
  display: block;
}
.data_visual.isDevice.carType3 .abt_carType i:not(.ct3) {
  display: none;
}
.data_visual.isDevice.carType3 .abt_carType h1::before {
  content: "" attr(carType3) "";
}
.data_visual.isDevice.carType4 .abt_carType .ct4 {
  display: block;
}
.data_visual.isDevice.carType4 .abt_carType i:not(.ct4) {
  display: none;
}
.data_visual.isDevice.carType4 .abt_carType h1::before {
  content: "" attr(carType4) "";
}
.data_visual.isDevice.carType5 .abt_carType .ct5 {
  display: block;
}
.data_visual.isDevice.carType5 .abt_carType i:not(.ct5) {
  display: none;
}
.data_visual.isDevice.carType5 .abt_carType h1::before {
  content: "" attr(carType5) "";
}
.data_visual.isDevice.carType6 .abt_carType .ct6 {
  display: block;
}
.data_visual.isDevice.carType6 .abt_carType i:not(.ct6) {
  display: none;
}
.data_visual.isDevice.carType6 .abt_carType h1::before {
  content: "" attr(carType6) "";
}
.data_visual.isDevice.holeOn .abt_hole svg path {
  fill: #E14E41;
}
.data_visual.isDevice.holeOn .abt_hole h1::before {
  color: #E14E41;
  content: "" attr(data-status-hole-on) "";
}
.data_visual.isDevice.holeOff .abt_hole svg path {
  fill: #FFFFFF;
}
.data_visual.isDevice.holeOff .abt_hole h1::before {
  content: "" attr(data-status-hole-off) "";
}
.data_visual.isDevice.niceCircle .abt_circle h1::before {
  content: "" attr(data-status-nice-circle) "";
}
.data_visual.isDevice.niceCircle .abt_circle svg path {
  fill: #FFFFFF;
}
.data_visual.isDevice.badCircle .abt_circle svg path {
  fill: #E14E41;
}
.data_visual.isDevice.badCircle .abt_circle h1::before {
  color: #E14E41;
  content: "" attr(data-status-bad-circle) "";
}
.data_visual:not(.isCity) .visual_inner .visual_title h2 {
  display: block;
}
.data_visual:not(.isCity) .visual_inner .visual_title b {
  display: none;
}
.data_visual.noBind .noBind {
  display: flex !important;
}
.data_visual.noBind .hasBind {
  display: none !important;
}
.data_visual.noConnect .noConnect {
  display: flex !important;
}
.data_visual.noConnect .hasConnect {
  display: none !important;
}
.data_visual .flood_icons {
  min-width: 215px !important;
  padding-left: 20px !important;
}
.data_visual .flood_line,
.data_visual .abt_flood {
  margin-top: 30px;
  padding-right: 40px !important;
}
.data_visual .flood_line #floodLine,
.data_visual .flood_line #abtFlood,
.data_visual .abt_flood #floodLine,
.data_visual .abt_flood #abtFlood {
  width: 500px;
  height: 210px;
  position: relative;
}
.data_visual .flood_line #floodLine::before,
.data_visual .flood_line #abtFlood::before,
.data_visual .abt_flood #floodLine::before,
.data_visual .abt_flood #abtFlood::before {
  width: 100%;
  height: 0.1875rem;
  background-color: #FFFFFF;
  border-radius: 1.25rem;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.data_visual .flood_line #floodLine::after,
.data_visual .flood_line #abtFlood::after,
.data_visual .abt_flood #floodLine::after,
.data_visual .abt_flood #abtFlood::after {
  width: calc(100% - 2.5rem);
  height: 55.3990610329%;
  background: #2B2C33;
  background: linear-gradient(180deg, rgb(242, 100, 100) 25%, rgb(249, 157, 90) 25%, rgb(249, 157, 90) 50%, rgb(253, 255, 144) 50%, rgb(253, 255, 144) 75%, rgb(43, 44, 51) 75%);
  border: 0.0625rem solid #FFFFFF;
  border-top: 0;
  position: absolute;
  top: 0.1875rem;
  left: 1.25rem;
  z-index: -1;
  content: "";
}
.data_visual .abt_hole i {
  width: 90px;
  height: 90px;
}
.data_visual .abt_hole i svg path {
  fill: #FFFFFF;
}
.data_visual .abt_hole h1::before {
  content: "" attr(data-status-hole-off) "";
}
.data_visual .abt_circle i {
  width: 6.4375rem;
  height: 6rem;
}
.data_visual .abt_circle i svg path {
  fill: #FFFFFF;
}
.data_visual .abt_circle h1::before {
  content: "" attr(data-status-nice-circle) "";
}
.data_visual #carStage {
  max-width: 100%;
}
.data_visual #waterStage {
  max-width: 1450px;
}
.data_visual #areas_stage1_swiper,
.data_visual #areas_stage2_swiper {
  display: none;
}
.data_visual #areas_stage1_swiper .swiper .swiper-slide.on span,
.data_visual #areas_stage2_swiper .swiper .swiper-slide.on span {
  color: #AFE2FA;
  font-weight: 500;
}
.data_visual #areas_stage1_swiper .swiper .swiper-slide h1,
.data_visual #areas_stage2_swiper .swiper .swiper-slide h1 {
  padding-top: 0.625rem;
}
.data_visual #car_device_swiper,
.data_visual #flood_device_swiper {
  display: none;
}
.data_visual #car_device_swiper h1,
.data_visual #flood_device_swiper h1 {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #FFFFFF;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.0938rem;
}

/* 淹水警示 */
.idx_flood {
  width: 20rem;
  max-width: 20rem;
  padding-top: 0.9375rem;
  padding-bottom: 0.75rem;
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  border-radius: 1.875rem;
  animation: fadeIn 0.3s linear;
}
.idx_flood h1 {
  font-size: 1.125rem;
  line-height: 1.5555;
  color: #FFFFFF;
  font-weight: 500;
  padding: 0 1.375rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  letter-spacing: 0.4375rem;
}
.idx_flood h1 img {
  height: 1.5625rem;
}
.idx_flood .flood_frame {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 0.125rem solid rgba(255, 255, 255, 0.1);
  min-height: 9.375rem;
  padding: 1.125rem 0;
}
.idx_flood .flood_frame .flood_box {
  padding: 0 1.125rem;
}
.idx_flood .flood_frame .flood_box .flood_area {
  max-height: 13.75rem;
}
.idx_flood .flood_frame .flood_box h2,
.idx_flood .flood_frame .flood_box h3,
.idx_flood .flood_frame .flood_box h4 {
  width: 100%;
  font-size: 1.125rem;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.0781rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.idx_flood .flood_frame .flood_box h2.active svg,
.idx_flood .flood_frame .flood_box h3.active svg,
.idx_flood .flood_frame .flood_box h4.active svg {
  transition: all 0.2s;
  transform: rotate(180deg);
}
.idx_flood .flood_frame .flood_box h2 input,
.idx_flood .flood_frame .flood_box h3 input,
.idx_flood .flood_frame .flood_box h4 input {
  margin-right: 0.3125rem;
  display: none;
}
.idx_flood .flood_frame .flood_box h2 span,
.idx_flood .flood_frame .flood_box h3 span,
.idx_flood .flood_frame .flood_box h4 span {
  width: 100%;
  display: flex;
  align-items: center;
}
.idx_flood .flood_frame .flood_box h2 label,
.idx_flood .flood_frame .flood_box h3 label,
.idx_flood .flood_frame .flood_box h4 label {
  width: 100%;
  cursor: pointer;
}
.idx_flood .flood_frame .flood_box h2 label:hover,
.idx_flood .flood_frame .flood_box h3 label:hover,
.idx_flood .flood_frame .flood_box h4 label:hover {
  opacity: 0.85;
}
.idx_flood .flood_frame .flood_box h2 p,
.idx_flood .flood_frame .flood_box h3 p,
.idx_flood .flood_frame .flood_box h4 p {
  font-size: 1.125rem;
  flex: none;
  font-weight: 500;
  text-align: center;
  color: var(--color_warn);
}
.idx_flood .flood_frame .flood_box h2 p b,
.idx_flood .flood_frame .flood_box h3 p b,
.idx_flood .flood_frame .flood_box h4 p b {
  padding-right: 0.3125rem;
}
.idx_flood .flood_frame .flood_box h2 p svg,
.idx_flood .flood_frame .flood_box h3 p svg,
.idx_flood .flood_frame .flood_box h4 p svg {
  width: 0.8125rem;
  height: 0.4375rem;
}
.idx_flood .flood_frame .flood_box h2 p svg path,
.idx_flood .flood_frame .flood_box h3 p svg path,
.idx_flood .flood_frame .flood_box h4 p svg path {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 0.0625rem;
}
.idx_flood .flood_frame .flood_box h2.active svg,
.idx_flood .flood_frame .flood_box h3.active svg,
.idx_flood .flood_frame .flood_box h4.active svg {
  transition: all 0.2s;
  transform: rotate(180deg);
}
.idx_flood .flood_frame .flood_box h2 {
  line-height: 1;
  min-height: 1.75rem;
  color: var(--color_warn);
  -moz-text-align-last: start;
  text-align-last: start;
}
.idx_flood .flood_frame .flood_box h2 span {
  padding-right: 0.9375rem;
}
.idx_flood .flood_frame .flood_box h2 p svg path {
  stroke: var(--color_warn);
}
.idx_flood .flood_frame .flood_box h3 {
  line-height: 1.5555;
  padding-right: 0.625rem;
}
.idx_flood .flood_frame .flood_box h3 span {
  padding: 0 0.625rem;
}
.idx_flood .flood_frame .flood_box h3 p {
  font-size: 0.75rem;
  line-height: 1.5;
}
.idx_flood .flood_frame .flood_box h3 p svg {
  width: 0.625rem;
  height: 0.625rem;
}
.idx_flood .flood_frame .flood_box h4 {
  font-size: 0.875rem;
  line-height: 1.5555;
  padding-right: 0.625rem;
}
.idx_flood .flood_frame .flood_box h4 span {
  padding: 0 0.9375rem;
}
.idx_flood .flood_frame .flood_box h4 p {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1.5;
  position: relative;
}
.idx_flood .flood_frame .flood_box h4 p.star::before {
  background-image: url(../images/icons/icon_star.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  left: -0.6875rem;
  margin-top: -0.25rem;
  content: "";
}
.idx_flood .flood_frame .flood_box h4 p svg {
  width: 0.625rem;
  height: 0.625rem;
}
.idx_flood .flood_frame .flood_box .flood_list {
  overflow: hidden auto;
  height: 7.5rem;
}
.idx_flood .flood_frame .flood_box .flood_list p {
  font-size: 0.625rem;
  line-height: 1.6;
  color: #9F9F9F;
  font-weight: 500;
  padding-left: 1.625rem;
  padding-right: 0.9375rem;
  letter-spacing: 0.125rem;
}
.idx_flood .flood_notify {
  padding: 0 0.75rem 0 1.25rem;
}
.idx_flood .flood_notify h3 {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: 0.125rem;
  text-decoration: underline;
}
.idx_flood .flood_notify h3 span {
  display: inline-block;
  padding-left: 0.5rem;
  text-decoration: none;
}
.idx_flood .flood_notify .flood_action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.idx_flood .flood_notify .flood_action span {
  font-size: 1.125rem;
  line-height: 1.5555;
  cursor: pointer;
  color: #FFFFFF;
  margin-right: 0.5rem;
  transition: all 0.2s;
}
.idx_flood .flood_notify .flood_action span::before {
  content: "" attr(choice) "";
}
.idx_flood .flood_notify .flood_action span.active::before {
  content: "" attr(cancel) "";
}
.idx_flood .flood_notify .flood_action span:hover {
  opacity: 0.65;
}
.idx_flood .flood_notify .flood_action .confirm_btns {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #FFFFFF;
  background-color: #3F3F46;
  padding: 0.25rem 1rem;
  border-radius: 2.5rem;
  transition: all 0.2s;
}
.idx_flood .flood_notify .flood_action .confirm_btns.active {
  cursor: pointer;
  color: #FFFFFF;
  background-color: #CC0000;
}
.idx_flood .flood_notify .flood_action .confirm_btns.active:hover {
  color: #FFFFFF;
  background-color: #CC0000;
  opacity: 0.75;
}
.idx_flood .flood_area,
.idx_flood .flood_stree,
.idx_flood .flood_list {
  display: none;
}
.idx_flood .flood_box.active .flood_area {
  display: block;
}
.idx_flood .flood_area.active .flood_stree {
  display: block;
}
.idx_flood .flood_stree.active .flood_list {
  display: block;
}

/* 報表 */
.report {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  transition: all 0.2s;
}
@media (min-width: 1200px) {
  .report {
    width: 60%;
    border-radius: 0;
    position: fixed;
    top: 0;
    right: 0;
  }
}
@media (min-width: 1600px) {
  .report {
    width: 65%;
  }
}
.report .report_t {
  flex-shrink: 0;
  padding: 47px 22px 22px 22px;
  position: relative;
}
@media (min-width: 768px) {
  .report .report_t {
    padding-top: 70px;
  }
}
@media (min-width: 1800px) {
  .report .report_t {
    padding-top: 47px;
  }
}
.report .report_t .row {
  --bs-gutter-x: 8px;
}
.report .report_t > .row {
  margin-bottom: 8px;
}
.report .report_t > .row > div > .row > div {
  margin-bottom: 10px;
}
.report .report_b {
  flex-grow: 1;
  padding: 14px;
  padding-top: 0;
  overflow: hidden;
  position: relative;
}
.report .report_b .tabs_panes {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.report .report_b .tabs_panes > div {
  display: none;
}
.report .report_b .tabs_panes > div.active {
  display: block;
}
.report .switch {
  width: 6.25rem;
  height: 2.5rem;
  padding: 0.125rem;
  position: absolute;
  top: 20px;
  right: 22px;
  margin-left: auto;
}
@media (min-width: 768px) {
  .report .switch {
    top: 20px;
    transform: scale(1.26);
    transform-origin: right bottom;
  }
}
@media (min-width: 1800px) {
  .report .switch {
    position: relative;
    top: auto;
    right: auto;
    transform: scale(1.36);
  }
}
.report .switch .outer {
  width: 100%;
  height: 100%;
  background-color: #000000;
  border-radius: 1.875rem;
}
.report .switch .res {
  width: 3.125rem;
  height: 3.125rem;
  position: absolute;
  top: 50%;
  left: 0;
  border-radius: 50%;
  margin-top: -1.5625rem;
  background: rgb(54, 29, 156);
  background: radial-gradient(circle, rgb(54, 29, 156) 0%, rgb(13, 16, 45) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.4);
  filter: drop-shadow(0 0 0.375rem rgba(54, 29, 156, 0.2));
  animation: ani_switch_to_left 0.36s forwards;
}
.report .switch .res.active {
  animation: ani_switch_to_right 0.36s forwards;
}
.report .switch .res.active + .button::before {
  transform: scale(0.8);
}
.report .switch .res.active + .button::after {
  transform: scale(1.05);
  right: 0.75rem;
}
.report .switch .res.active + .but::before {
  transform: scale(0.8);
}
.report .switch .res.active + .but::after {
  transform: scale(1);
}
.report .switch .but {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.report .switch .but::before, .report .switch .but::after {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  z-index: 1;
  top: 50%;
  transition: linear 0.3s;
  content: "";
}
.report .switch .but::before {
  background-image: url(../images/icons/icon_car.svg);
  width: 32px;
  height: 32px;
  margin-top: -16px;
  left: 6px;
}
.report .switch .but::after {
  background-image: url(../images/icons/icon_drop.svg);
  width: 24px;
  height: 24px;
  margin-top: -12px;
  right: 10px;
  transform: scale(0.7);
}
.report .report_t h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  color: #FFFFFF;
  font-weight: 700;
}
@media (min-width: 1200px) {
  .report .report_t h1 {
    font-size: 2.1875rem;
  }
}
.report .report_t h2 {
  width: 100%;
  max-width: 100%;
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
  background-color: #202026;
  padding: 0.5rem 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media (min-width: 768px) {
  .report .report_t h2 {
    font-size: 1.125rem;
    padding: 0.625rem 1rem;
  }
}
.report .report_t h2::before {
  background-image: url(../images/icons/icon_arrow_down.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1.125rem;
  height: 1.875rem;
  position: absolute;
  top: 50%;
  margin-top: -0.9375rem;
  right: 0.75rem;
  content: "";
}
.report .report_t h2.active {
  border-radius: 0;
}
.report .report_t h2.active::before {
  transition: all 0.2s;
  transform: rotate(180deg);
}
.report .report_t h2.active .sub {
  display: block;
  animation: fadeIn 0.3s linear;
}
.report .report_t h2 .sub {
  width: 100%;
  max-width: 100%;
  max-height: 16.25rem;
  background-color: #202026;
  position: absolute;
  top: 2.5rem;
  left: 0;
  overflow: hidden auto;
  z-index: 3;
  display: none;
}
@media (min-width: 768px) {
  .report .report_t h2 .sub {
    top: 2.875rem;
  }
}
@media (min-width: 1200px) {
  .report .report_t h2 .sub {
    top: 3rem;
  }
}
.report .report_t h2 .sub span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #FFFFFF;
  padding: 0.5rem;
  padding-left: 1.25rem;
}
@media (min-width: 768px) {
  .report .report_t h2 .sub span {
    font-size: 0.9375rem;
  }
}
.report .report_t h2 .sub span:hover, .report .report_t h2 .sub span.active {
  background-color: #040404;
}
.report .report_t .report_select {
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1800px) {
  .report .report_t .report_select > .col-12:first-of-type {
    width: 76.430976431%;
  }
}
@media (min-width: 768px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(1) {
    width: 15%;
  }
}
@media (min-width: 1200px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(1) {
    width: 26%;
  }
}
@media (min-width: 1400px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(1) {
    width: 20%;
  }
}
@media (min-width: 1800px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(1) {
    width: 15.4185022026%;
  }
}
@media (min-width: 768px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(2) {
    width: 30%;
  }
}
@media (min-width: 1400px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(2) {
    width: 33%;
  }
}
@media (min-width: 1800px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(2) {
    width: 16.5198237885%;
  }
}
@media (min-width: 768px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(3) {
    width: 55%;
  }
}
@media (min-width: 1200px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(3) {
    width: 44%;
  }
}
@media (min-width: 1400px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(3) {
    width: 47%;
  }
}
@media (min-width: 1800px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(3) {
    width: 41.2995594714%;
  }
}
@media (min-width: 768px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(4) {
    width: 100%;
  }
}
@media (min-width: 1800px) {
  .report .report_t .report_select > .col-12:first-of-type .col-12:nth-of-type(4) {
    width: 26.7621145374%;
  }
}
@media (min-width: 1800px) {
  .report .report_t .report_select > .col-12:last-of-type {
    width: auto;
  }
}
.report .report_t .report_range {
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.report .report_t .tabs_view i {
  width: 26px;
  height: 26px;
  transition: transform 1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.report .report_t .tabs_view i:hover {
  transform: scale(1.2);
}
.report .report_t .tabs_view i svg {
  width: 100%;
  height: 100%;
}
.report .report_t .tabs_view i svg path {
  stroke: none;
  fill: #FFFFFF;
}
.report .report_t .tabs_view + .col-auto {
  display: flex;
  align-items: center;
  justify-content: center;
}
.report .report_t .tabs_view + .col-auto img {
  transition: transform 1s;
  height: 26px;
}
.report .report_t .tabs_view + .col-auto img:hover {
  transform: scale(1.2);
}
.report .report_swiper {
  position: relative;
}
.report .report_swiper .swiper {
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.5);
}
.report .report_swiper .swiper-slide {
  width: auto;
}
.report .report_swiper .swiper-slide span {
  display: inline-block;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
  text-align: center;
  padding: 0.5rem;
  letter-spacing: 0.0781rem;
}
@media (min-width: 768px) {
  .report .report_swiper .swiper-slide span {
    font-size: 0.875rem;
    padding: 0.6875rem 0.75rem;
  }
}
.report .report_swiper .swiper-slide span:not(:last-of-type) {
  margin-right: 0.9375rem;
}
.report .report_swiper .swiper-slide span:hover {
  color: #FFFFFF;
}
.report .report_swiper .swiper-slide span.active {
  color: #FFFFFF;
  border-bottom: 0.125rem solid #FFFFFF;
}
.report .flood_swiper {
  width: 100%;
  padding: 20px 40px;
  position: relative;
}
.report .flood_swiper .swiper .swiper-slide {
  width: auto;
  text-align: center;
  padding: 0 0.5rem;
}
.report .flood_swiper .swiper .swiper-slide.level1 small, .report .flood_swiper .swiper .swiper-slide.level1 p {
  color: #F26464;
}
.report .flood_swiper .swiper .swiper-slide.level2 small, .report .flood_swiper .swiper .swiper-slide.level2 p {
  color: #F99D5A;
}
.report .flood_swiper .swiper .swiper-slide.level3 small, .report .flood_swiper .swiper .swiper-slide.level3 p {
  color: #FDFF90;
}
.report .flood_swiper .swiper .swiper-slide.level4 small, .report .flood_swiper .swiper .swiper-slide.level4 p {
  color: #FFFFFF;
}
.report .flood_swiper .swiper .swiper-slide .waveBox {
  width: 112px;
  padding: 60px 0 15px 0;
  position: relative;
}
.report .flood_swiper .swiper .swiper-slide .waveBox::before, .report .flood_swiper .swiper .swiper-slide .waveBox::after {
  display: block;
  position: absolute;
}
.report .flood_swiper .swiper .swiper-slide .waveBox::before {
  width: 48px;
  height: 52px;
  top: 0;
  left: calc(50% - 24px);
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNTMiIHZpZXdCb3g9IjAgMCA0OSA1MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjc3MDIgMTkuMTA3M0MxOC45MzgyIDE5LjIyODIgMTcuMjI4MiAxOS43MTIgMTUuNjQwNSAyMC40Mzc1QzE0LjY2MzQgMjAuOTIxMyAxMy42ODYzIDIxLjQwNSAxMi44MzEzIDIxLjg4ODdDMTEuMTIxNCAyMi43MzUyIDkuMjg5MzEgMjIuMzcyNCA4LjQzNDM0IDIwLjgwMDNDNy41NzkzOCAxOS4yMjgyIDguMDY3OTMgMTcuNTM1MiA5LjY1NTcyIDE2LjQ0NjhDMTIuMzQyNyAxNC43NTM4IDE1LjI3NCAxMy40MjM2IDE4LjU3MTcgMTIuODE4OUMyMy4zMzUxIDEyLjA5MzMgMjcuOTc2MyAxMi42OTggMzIuMjUxMSAxNS4xMTY2QzM1LjU0ODggMTYuOTMwNiAzOS4wOTA4IDE3Ljg5OCA0Mi45OTkyIDE3Ljc3NzFDNDMuNjA5OSAxNy43NzcxIDQ0LjM0MjcgMTcuNzc3MSA0NC45NTM0IDE3Ljc3NzFDNDYuNzg1NSAxNy43NzcxIDQ4LjEyOSAxOS4yMjgyIDQ4LjEyOSAyMC45MjEzQzQ4LjEyOSAyMi43MzUyIDQ2Ljc4NTUgMjQuMDY1NCA0NC45NTM0IDI0LjE4NjRDNDIuMTQ0MyAyNC4zMDczIDM5LjMzNTEgMjQuNDI4MiAzNi41MjU5IDIzLjgyMzZDMzQuODE2IDIzLjMzOTkgMzMuMTA2MSAyMi43MzUyIDMxLjM5NjIgMjIuMjUxNUMzMS4xNTE5IDIyLjEzMDYgMzEuMDI5OCAyMi4xMzA2IDMwLjc4NTUgMjIuMDA5NkMzMC42NjM0IDIyLjEzMDYgMzAuNjYzNCAyMi4zNzI0IDMwLjU0MTIgMjIuNDkzM0MyOS42ODYzIDI1LjAzMjkgMjguODMxMyAyNy42OTMzIDI4LjA5ODUgMzAuMjMyOUMyNy45NzYzIDMwLjQ3NDcgMjguMDk4NSAzMC44Mzc1IDI4LjIyMDYgMzAuOTU4NUMzMS42NDA1IDMzLjczOTkgMzMuODM4OSAzNy4zNjc4IDM1LjA2MDMgNDEuNDc5NEMzNS42NzEgNDMuNjU2MSAzNi4xNTk1IDQ1LjgzMjkgMzYuNTI1OSA0OC4wMDk2QzM2Ljg5MjQgNDkuODIzNiAzNS42NzEgNTEuNTE2NiAzMy44Mzg5IDUyLjAwMDNDMzIuMDA2OSA1Mi40ODQgMzAuMTc0OCA1MS41MTY2IDI5LjQ0MiA0OS44MjM2QzI4LjcwOTIgNDguMDA5NiAyOC4wOTg1IDQ2LjA3NDcgMjcuNDg3OCA0NC4yNjA4QzI2LjYzMjggNDEuNzIxMyAyNS4xNjcyIDM5LjU0NDUgMjMuMjEzIDM3LjczMDZDMjIuODQ2NiAzNy4zNjc4IDIyLjYwMjMgMzcuMDA1IDIyLjIzNTkgMzYuNjQyMkMyMS42MjUyIDM3LjI0NjggMjEuMTM2NiAzNy44NTE1IDIwLjUyNTkgMzguNDU2MUMxNy40NzI1IDQxLjg0MjIgMTMuNjg2MyA0My40MTQzIDkuMDQ1MDMgNDMuNDE0M0M3LjIxMjk3IDQzLjQxNDMgNS4zODA5MSA0My40MTQzIDMuNjcwOTggNDMuNDE0M0MyLjIwNTM0IDQzLjQxNDMgMC45ODM5NjIgNDIuNjg4NyAwLjM3MzI3NSA0MS4zNTg1Qy0wLjIzNzQxMiA0MC4wMjgyIC0wLjExNTI3NSAzOC42OTggMC44NjE4MjQgMzcuNjA5NkMxLjU5NDY1IDM2LjY0MjIgMi42OTM4OSAzNi4yNzk0IDMuOTE1MjYgMzYuMjc5NEM1Ljc0NzMyIDM2LjI3OTQgNy43MDE1MiAzNi4yNzk0IDkuNTMzNTggMzYuMjc5NEMxMS40ODc4IDM2LjI3OTQgMTIuOTUzNCAzNS41NTM4IDE0LjA1MjcgMzQuMTAyN0MxNS4yNzQgMzIuNTMwNiAxNi4zNzMzIDMwLjk1ODUgMTcuNTk0NiAyOS4zODY0QzE3LjgzODkgMjkuMTQ0NSAxNy45NjExIDI4Ljc4MTcgMTguMDgzMiAyOC40MTg5QzE4LjgxNiAyNS4yNzQ3IDE5Ljc5MzEgMjIuMjUxNSAyMC43NzAyIDE5LjEwNzNaIiBmaWxsPSIjNTdENEVGIi8+CjxwYXRoIGQ9Ik0zMS4zOTggMTIuMzM0OUMyNy45NzgyIDEyLjMzNDkgMjUuMTY5IDkuNTUzNDkgMjUuMDQ2OSA2LjE2NzQ0QzI1LjA0NjkgMi43ODE0IDI3Ljg1NiAwIDMxLjI3NTkgMEMzNC42OTU3IDAgMzcuNTA0OSAyLjc4MTQgMzcuNTA0OSA2LjE2NzQ0QzM3LjYyNyA5LjU1MzQ5IDM0LjgxNzkgMTIuMzM0OSAzMS4zOTggMTIuMzM0OVoiIGZpbGw9IiM1N0Q0RUYiLz4KPC9zdmc+Cg==");
}
.report .flood_swiper .swiper .swiper-slide .waveBox::after {
  width: 128px;
  height: 3px;
  background-color: #FFFFFF;
  border-radius: 10px;
  top: 58px;
  left: -8px;
  content: "";
}
.report .flood_swiper .swiper .swiper-slide .waveBox .rainBox {
  height: 112px;
  padding-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.report .flood_swiper .swiper .swiper-slide .waveBox .rainBox span {
  display: block;
  width: 100%;
  margin: 0 auto;
  height: 25%;
  background-color: var(--clr);
}
.report .flood_swiper .swiper .swiper-slide .waveBox .rainBox .wave {
  width: 441px;
  height: calc(var(--val) / var(--total) * 100% - 8px);
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #4E99AD;
  filter: drop-shadow(1px 1px 6px #4e99ad);
  animation: ani_wave 3s ease-out infinite alternate;
}
.report .flood_swiper .swiper .swiper-slide .waveBox .rainBox .wave::before {
  background-image: url(../images/wave.svg);
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: contain;
  width: 448px;
  height: 41px;
  position: absolute;
  top: -8px;
  left: 0;
  content: "";
}
.report .flood_swiper .swiper .swiper-slide .area,
.report .flood_swiper .swiper .swiper-slide .value {
  line-height: 1.5;
  font-weight: 500;
  color: #FFFFFF;
}
.report .flood_swiper .swiper .swiper-slide .area {
  font-size: 18px;
}
.report .flood_swiper .swiper .swiper-slide .value {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
}
.report .flood_swiper .swiper .swiper-slide .value::after {
  font-size: 16px;
  content: "" attr(unit) "";
}
.report .flood_swiper .swiper-button-next {
  right: 0;
}
.report .flood_swiper .swiper-button-prev {
  left: 0;
}
.report .report_charts,
.report .report_o_charts,
.report .report_water,
.report .report_o_water,
.report .report_quality {
  position: relative;
}
@media (min-width: 1800px) {
  .report .report_charts,
  .report .report_o_charts,
  .report .report_water,
  .report .report_o_water,
  .report .report_quality {
    height: 100%;
  }
}
.report .report_charts .row,
.report .report_o_charts .row,
.report .report_water .row,
.report .report_o_water .row,
.report .report_quality .row {
  --bs-gutter-x: 12px;
}
@media (min-width: 1800px) {
  .report .report_charts .row,
  .report .report_o_charts .row,
  .report .report_water .row,
  .report .report_o_water .row,
  .report .report_quality .row {
    --bs-gutter-x: 20px;
  }
}
.report .report_charts .row .box,
.report .report_o_charts .row .box,
.report .report_water .row .box,
.report .report_o_water .row .box,
.report .report_quality .row .box {
  padding: calc(var(--bs-gutter-x) * 0.5) 0;
}
.report .report_charts .row .box .frame,
.report .report_o_charts .row .box .frame,
.report .report_water .row .box .frame,
.report .report_o_water .row .box .frame,
.report .report_quality .row .box .frame {
  border: 1px solid rgba(241, 241, 241, 0.6);
  padding: 16px 24px 15px 24px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
}
.report .report_charts .row .box .frame h1,
.report .report_charts .row .box .frame h2,
.report .report_charts .row .box .frame h4,
.report .report_o_charts .row .box .frame h1,
.report .report_o_charts .row .box .frame h2,
.report .report_o_charts .row .box .frame h4,
.report .report_water .row .box .frame h1,
.report .report_water .row .box .frame h2,
.report .report_water .row .box .frame h4,
.report .report_o_water .row .box .frame h1,
.report .report_o_water .row .box .frame h2,
.report .report_o_water .row .box .frame h4,
.report .report_quality .row .box .frame h1,
.report .report_quality .row .box .frame h2,
.report .report_quality .row .box .frame h4 {
  width: 100%;
  line-height: 1.4;
  color: #F1F1F1;
  font-weight: 500;
  letter-spacing: 2px;
}
.report .report_charts .row .box .frame h1,
.report .report_o_charts .row .box .frame h1,
.report .report_water .row .box .frame h1,
.report .report_o_water .row .box .frame h1,
.report .report_quality .row .box .frame h1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-bottom: 5px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .report .report_charts .row .box .frame h1,
  .report .report_o_charts .row .box .frame h1,
  .report .report_water .row .box .frame h1,
  .report .report_o_water .row .box .frame h1,
  .report .report_quality .row .box .frame h1 {
    font-size: 20px;
  }
}
.report .report_charts .row .box .frame h1 img,
.report .report_o_charts .row .box .frame h1 img,
.report .report_water .row .box .frame h1 img,
.report .report_o_water .row .box .frame h1 img,
.report .report_quality .row .box .frame h1 img {
  margin-left: auto;
}
.report .report_charts .row .box .frame h1 + *,
.report .report_o_charts .row .box .frame h1 + *,
.report .report_water .row .box .frame h1 + *,
.report .report_o_water .row .box .frame h1 + *,
.report .report_quality .row .box .frame h1 + * {
  margin: auto 0;
}
.report .report_charts .row .box .frame h1:has(+ div),
.report .report_o_charts .row .box .frame h1:has(+ div),
.report .report_water .row .box .frame h1:has(+ div),
.report .report_o_water .row .box .frame h1:has(+ div),
.report .report_quality .row .box .frame h1:has(+ div) {
  padding-bottom: 20px;
}
.report .report_charts .row .box .frame h2,
.report .report_o_charts .row .box .frame h2,
.report .report_water .row .box .frame h2,
.report .report_o_water .row .box .frame h2,
.report .report_quality .row .box .frame h2 {
  font-family: "Poppins", sans-serif;
  font-size: 50px;
  text-align: center;
}
@media (min-width: 1800px) {
  .report .report_charts .row .box .frame h2,
  .report .report_o_charts .row .box .frame h2,
  .report .report_water .row .box .frame h2,
  .report .report_o_water .row .box .frame h2,
  .report .report_quality .row .box .frame h2 {
    font-size: 45px;
  }
}
.report .report_charts .row .box .frame h2::after,
.report .report_o_charts .row .box .frame h2::after,
.report .report_water .row .box .frame h2::after,
.report .report_o_water .row .box .frame h2::after,
.report .report_quality .row .box .frame h2::after {
  content: "" attr(unit) "";
}
.report .report_charts .row .box .frame h3,
.report .report_o_charts .row .box .frame h3,
.report .report_water .row .box .frame h3,
.report .report_o_water .row .box .frame h3,
.report .report_quality .row .box .frame h3 {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  height: 0;
  cursor: pointer;
  transform: translateY(-40px);
  transition: transform 1s;
}
.report .report_charts .row .box .frame h3 i,
.report .report_o_charts .row .box .frame h3 i,
.report .report_water .row .box .frame h3 i,
.report .report_o_water .row .box .frame h3 i,
.report .report_quality .row .box .frame h3 i {
  width: 85px;
  height: 30px;
}
.report .report_charts .row .box .frame h3 i svg,
.report .report_o_charts .row .box .frame h3 i svg,
.report .report_water .row .box .frame h3 i svg,
.report .report_o_water .row .box .frame h3 i svg,
.report .report_quality .row .box .frame h3 i svg {
  width: 100%;
  height: 100%;
}
.report .report_charts .row .box .frame h3 i svg path,
.report .report_o_charts .row .box .frame h3 i svg path,
.report .report_water .row .box .frame h3 i svg path,
.report .report_o_water .row .box .frame h3 i svg path,
.report .report_quality .row .box .frame h3 i svg path {
  fill: rgba(85, 85, 89, 0.4);
}
.report .report_charts .row .box .frame h3:hover,
.report .report_o_charts .row .box .frame h3:hover,
.report .report_water .row .box .frame h3:hover,
.report .report_o_water .row .box .frame h3:hover,
.report .report_quality .row .box .frame h3:hover {
  transform: translateY(-46px);
}
.report .report_charts .row .box .frame h3:hover i svg path,
.report .report_o_charts .row .box .frame h3:hover i svg path,
.report .report_water .row .box .frame h3:hover i svg path,
.report .report_o_water .row .box .frame h3:hover i svg path,
.report .report_quality .row .box .frame h3:hover i svg path {
  fill: rgba(87, 212, 239, 0.6);
}
.report .report_charts .row .box .frame h4,
.report .report_o_charts .row .box .frame h4,
.report .report_water .row .box .frame h4,
.report .report_o_water .row .box .frame h4,
.report .report_quality .row .box .frame h4 {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #9F9F9F;
  margin: 0 !important;
}
.report .report_charts .row .box .frame h4 span,
.report .report_o_charts .row .box .frame h4 span,
.report .report_water .row .box .frame h4 span,
.report .report_o_water .row .box .frame h4 span,
.report .report_quality .row .box .frame h4 span {
  font-size: 28px;
  font-weight: 700;
  padding-left: 12px;
}
.report .report_charts .row .box .frame h4 span::after,
.report .report_o_charts .row .box .frame h4 span::after,
.report .report_water .row .box .frame h4 span::after,
.report .report_o_water .row .box .frame h4 span::after,
.report .report_quality .row .box .frame h4 span::after {
  content: "" attr(unit) "";
}
.report .report_charts .row .box .frame h5,
.report .report_o_charts .row .box .frame h5,
.report .report_water .row .box .frame h5,
.report .report_o_water .row .box .frame h5,
.report .report_quality .row .box .frame h5 {
  margin-bottom: 10px;
}
.report .report_charts .row .box .frame h5 > .row,
.report .report_o_charts .row .box .frame h5 > .row,
.report .report_water .row .box .frame h5 > .row,
.report .report_o_water .row .box .frame h5 > .row,
.report .report_quality .row .box .frame h5 > .row {
  --bs-gutter-x: 28px;
}
.report .report_charts .row .box .frame h5 > .row p,
.report .report_o_charts .row .box .frame h5 > .row p,
.report .report_water .row .box .frame h5 > .row p,
.report .report_o_water .row .box .frame h5 > .row p,
.report .report_quality .row .box .frame h5 > .row p {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(241, 241, 241, 0.6);
  font-weight: 500;
  letter-spacing: 1.5px;
}
.report .report_charts .row .box .frame h5 > .row p span,
.report .report_o_charts .row .box .frame h5 > .row p span,
.report .report_water .row .box .frame h5 > .row p span,
.report .report_o_water .row .box .frame h5 > .row p span,
.report .report_quality .row .box .frame h5 > .row p span {
  font-family: "Poppins", sans-serif;
  font-style: 17px;
  line-height: 1.5;
  color: var(--clr);
  font-weight: 700;
  letter-spacing: 2.6px;
  padding-right: 7px;
  -webkit-text-transform: uppercase;
  text-transform: uppercase;
}
.report .report_charts > .row > .col-12 {
  min-height: 260px;
}
@media (min-width: 1800px) {
  .report .report_charts > .row > .col-12 {
    height: 33.3333333333%;
  }
}
@media (min-width: 1800px) {
  .report .report_charts > .row > .col-12:nth-of-type(1), .report .report_charts > .row > .col-12:nth-of-type(2), .report .report_charts > .row > .col-12:nth-of-type(3) {
    width: 33.3333333333%;
  }
}
@media (min-width: 1800px) {
  .report .report_charts > .row > .col-12:nth-of-type(5), .report .report_charts > .row > .col-12:nth-of-type(6) {
    width: 50%;
  }
}
@media (min-width: 1800px) {
  .report .report_charts > .row > .col-12:nth-of-type(4) .row .col-12 {
    width: 50%;
  }
}
.report .report_o_charts > .row > .col-12 {
  min-height: 390px;
}
@media (min-width: 1800px) {
  .report .report_o_charts > .row > .col-12 {
    height: 43.4782608696%;
  }
}
@media (min-width: 1800px) {
  .report .report_o_charts > .row > .col-12:nth-of-type(2) {
    width: 60%;
  }
}
@media (min-width: 1800px) {
  .report .report_o_charts > .row > .col-12:nth-of-type(3) {
    width: 40%;
  }
}
@media (min-width: 1800px) {
  .report .report_o_charts > .row > .col-12:nth-of-type(5), .report .report_o_charts > .row > .col-12:nth-of-type(6) {
    width: 50%;
  }
}
@media (min-width: 1800px) {
  .report .report_o_charts > .row > .col-12:nth-of-type(4) .row .col-12 {
    width: 50%;
  }
}
.report .report_water > .row > .col-12 {
  min-height: 390px;
}
@media (min-width: 1800px) {
  .report .report_water > .row > .col-12 {
    height: 50%;
  }
}
.report .report_o_water > .row > .col-12 {
  min-height: 390px;
}
.report .report_quality > .row > .col-12 {
  min-height: 390px;
}
@media (min-width: 1800px) {
  .report .report_quality > .row > .col-12 {
    height: 50%;
  }
}
.report .stop_bar,
.report .stop_lines,
.report .type_bar,
.report .stop_pie,
.report .stop_line,
.report .stay_bar,
.report .times_bar,
.report .type_pie,
.report .flood_water,
.report .water_line,
.report .water_flood,
.report .quality_line,
.report .battery_line {
  width: 100%;
  position: relative;
}
.report .stop_bar #stopBar,
.report .stop_bar #stopLines,
.report .stop_bar #typeBar,
.report .stop_bar #stopPie,
.report .stop_bar #stopLine,
.report .stop_bar #stayBar,
.report .stop_bar #timesBar,
.report .stop_bar #typePie,
.report .stop_bar #waterFlood,
.report .stop_bar #waterLine,
.report .stop_bar #waterFlood2,
.report .stop_bar #qualityLine,
.report .stop_bar #batteryLine,
.report .stop_lines #stopBar,
.report .stop_lines #stopLines,
.report .stop_lines #typeBar,
.report .stop_lines #stopPie,
.report .stop_lines #stopLine,
.report .stop_lines #stayBar,
.report .stop_lines #timesBar,
.report .stop_lines #typePie,
.report .stop_lines #waterFlood,
.report .stop_lines #waterLine,
.report .stop_lines #waterFlood2,
.report .stop_lines #qualityLine,
.report .stop_lines #batteryLine,
.report .type_bar #stopBar,
.report .type_bar #stopLines,
.report .type_bar #typeBar,
.report .type_bar #stopPie,
.report .type_bar #stopLine,
.report .type_bar #stayBar,
.report .type_bar #timesBar,
.report .type_bar #typePie,
.report .type_bar #waterFlood,
.report .type_bar #waterLine,
.report .type_bar #waterFlood2,
.report .type_bar #qualityLine,
.report .type_bar #batteryLine,
.report .stop_pie #stopBar,
.report .stop_pie #stopLines,
.report .stop_pie #typeBar,
.report .stop_pie #stopPie,
.report .stop_pie #stopLine,
.report .stop_pie #stayBar,
.report .stop_pie #timesBar,
.report .stop_pie #typePie,
.report .stop_pie #waterFlood,
.report .stop_pie #waterLine,
.report .stop_pie #waterFlood2,
.report .stop_pie #qualityLine,
.report .stop_pie #batteryLine,
.report .stop_line #stopBar,
.report .stop_line #stopLines,
.report .stop_line #typeBar,
.report .stop_line #stopPie,
.report .stop_line #stopLine,
.report .stop_line #stayBar,
.report .stop_line #timesBar,
.report .stop_line #typePie,
.report .stop_line #waterFlood,
.report .stop_line #waterLine,
.report .stop_line #waterFlood2,
.report .stop_line #qualityLine,
.report .stop_line #batteryLine,
.report .stay_bar #stopBar,
.report .stay_bar #stopLines,
.report .stay_bar #typeBar,
.report .stay_bar #stopPie,
.report .stay_bar #stopLine,
.report .stay_bar #stayBar,
.report .stay_bar #timesBar,
.report .stay_bar #typePie,
.report .stay_bar #waterFlood,
.report .stay_bar #waterLine,
.report .stay_bar #waterFlood2,
.report .stay_bar #qualityLine,
.report .stay_bar #batteryLine,
.report .times_bar #stopBar,
.report .times_bar #stopLines,
.report .times_bar #typeBar,
.report .times_bar #stopPie,
.report .times_bar #stopLine,
.report .times_bar #stayBar,
.report .times_bar #timesBar,
.report .times_bar #typePie,
.report .times_bar #waterFlood,
.report .times_bar #waterLine,
.report .times_bar #waterFlood2,
.report .times_bar #qualityLine,
.report .times_bar #batteryLine,
.report .type_pie #stopBar,
.report .type_pie #stopLines,
.report .type_pie #typeBar,
.report .type_pie #stopPie,
.report .type_pie #stopLine,
.report .type_pie #stayBar,
.report .type_pie #timesBar,
.report .type_pie #typePie,
.report .type_pie #waterFlood,
.report .type_pie #waterLine,
.report .type_pie #waterFlood2,
.report .type_pie #qualityLine,
.report .type_pie #batteryLine,
.report .flood_water #stopBar,
.report .flood_water #stopLines,
.report .flood_water #typeBar,
.report .flood_water #stopPie,
.report .flood_water #stopLine,
.report .flood_water #stayBar,
.report .flood_water #timesBar,
.report .flood_water #typePie,
.report .flood_water #waterFlood,
.report .flood_water #waterLine,
.report .flood_water #waterFlood2,
.report .flood_water #qualityLine,
.report .flood_water #batteryLine,
.report .water_line #stopBar,
.report .water_line #stopLines,
.report .water_line #typeBar,
.report .water_line #stopPie,
.report .water_line #stopLine,
.report .water_line #stayBar,
.report .water_line #timesBar,
.report .water_line #typePie,
.report .water_line #waterFlood,
.report .water_line #waterLine,
.report .water_line #waterFlood2,
.report .water_line #qualityLine,
.report .water_line #batteryLine,
.report .water_flood #stopBar,
.report .water_flood #stopLines,
.report .water_flood #typeBar,
.report .water_flood #stopPie,
.report .water_flood #stopLine,
.report .water_flood #stayBar,
.report .water_flood #timesBar,
.report .water_flood #typePie,
.report .water_flood #waterFlood,
.report .water_flood #waterLine,
.report .water_flood #waterFlood2,
.report .water_flood #qualityLine,
.report .water_flood #batteryLine,
.report .quality_line #stopBar,
.report .quality_line #stopLines,
.report .quality_line #typeBar,
.report .quality_line #stopPie,
.report .quality_line #stopLine,
.report .quality_line #stayBar,
.report .quality_line #timesBar,
.report .quality_line #typePie,
.report .quality_line #waterFlood,
.report .quality_line #waterLine,
.report .quality_line #waterFlood2,
.report .quality_line #qualityLine,
.report .quality_line #batteryLine,
.report .battery_line #stopBar,
.report .battery_line #stopLines,
.report .battery_line #typeBar,
.report .battery_line #stopPie,
.report .battery_line #stopLine,
.report .battery_line #stayBar,
.report .battery_line #timesBar,
.report .battery_line #typePie,
.report .battery_line #waterFlood,
.report .battery_line #waterLine,
.report .battery_line #waterFlood2,
.report .battery_line #qualityLine,
.report .battery_line #batteryLine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
}
.report .stop_bar,
.report .stop_line,
.report .stop_pie,
.report .stop_lines {
  margin: 0 auto 15px auto;
}
@media (min-width: 1800px) {
  .report .stop_bar,
  .report .stop_line,
  .report .stop_pie,
  .report .stop_lines {
    margin: 0 auto;
  }
}
.report .type_bar,
.report .stay_bar,
.report .times_bar,
.report .type_pie,
.report .flood_water,
.report .water_line,
.report .water_flood,
.report .quality_line,
.report .battery_line {
  margin: auto !important;
}
.report .stop_bar,
.report .stop_lines {
  max-width: 552px;
  height: 195px;
}
.report .type_bar {
  max-width: 540px;
  height: 190px;
}
.report .stop_pie,
.report .stop_line {
  max-width: 552px;
  height: 195px;
}
.report .stay_bar,
.report .times_bar {
  max-width: 595px;
  height: 200px;
}
@media (min-width: 1800px) {
  .report .stay_bar,
  .report .times_bar {
    height: 230px;
  }
}
.report .type_pie {
  max-width: 540px;
  height: 240px;
}
.report .flood_water {
  max-width: 830px;
  height: 280px;
}
.report .water_line {
  max-width: 830px;
  height: 210px;
}
.report .water_flood {
  max-width: 830px;
  height: 210px;
}
.report .quality_line,
.report .battery_line {
  max-width: 625px;
  height: 210px;
}
.report .errorTimes {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  max-width: 540px;
  margin: auto !important;
}
.report .errorTimes > div {
  padding: 0 var(--bs-gutter-x);
  margin-bottom: 15px;
  width: 50%;
}
@media (min-width: 576px) {
  .report .errorTimes > div {
    width: auto;
  }
}
.report .errorTimes > div b {
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: 1.2;
}
.report .errorTimes > div b + div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
}
.report .errorTimes > div b + div .useIcon {
  width: 48px;
  height: 48px;
}
.report .errorTimes > div b + div .useIcon svg {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.report .errorTimes > div b + div .useIcon svg g:first-of-type {
  display: block;
}
.report .errorTimes > div b + div .useIcon svg g:last-of-type {
  display: none;
}
.report .errorTimes > div b + div .useIcon svg path {
  stroke: none;
  fill: #FFFFFF;
}
.report .errorTimes > div b + div p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(241, 241, 241, 0.6);
  font-weight: 500;
  text-align: center;
  width: 100%;
}
.report .errorTimes > div.error b {
  color: #E14E41;
}
.report .errorTimes > div.error b + div .useIcon svg g:first-of-type {
  display: none;
}
.report .errorTimes > div.error b + div .useIcon svg g:last-of-type {
  display: block;
}
.report .errorTimes > div.error b + div .useIcon svg path {
  stroke: none;
  fill: #E14E41;
}

/* 風景區 */
.landscape {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
@media (min-width: 992px) {
  .landscape .land_l,
  .landscape .land_r {
    padding: 0 8px;
  }
}
@media (min-width: 1400px) {
  .landscape .land_l,
  .landscape .land_r {
    padding: 0;
  }
}
.landscape .land_l {
  flex-shrink: 0;
  display: none;
}
@media (min-width: 1200px) {
  .landscape .land_l {
    display: block;
  }
}
.landscape .land_r {
  max-width: 100%;
  flex-grow: 1;
  height: 100%;
}
@media (min-width: 1200px) {
  .landscape .land_r {
    max-width: 800px;
  }
}
@media (min-width: 1400px) {
  .landscape .land_r {
    max-width: 600px;
  }
}
.landscape .land_r .tabs_panes {
  width: 100%;
  height: 100%;
}
.landscape .land_r .tabs_panes > div {
  display: none;
}
.landscape .land_r .tabs_panes > div.active {
  animation: fadeIn 0.6s;
  display: block;
}
.landscape .land_r .tabs_panes > div.step1 .step1 {
  display: flex;
}
.landscape .land_r .tabs_panes > div.step2 .step2 {
  display: flex;
}
.landscape .land_r .tabs_panes > div.step3 .step3 {
  display: flex;
}
.landscape .land_r .tabs_panes > div {
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  border-radius: 30px;
}
.landscape .land_r .tabs_panes > div > div {
  height: 100%;
  flex-direction: column;
  padding: 24px 0;
  animation: fadeIn 0.6s;
  display: none;
}
.landscape .lands_percent {
  min-width: 380px;
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  border-radius: 0.625rem;
}
@media (min-width: 992px) {
  .landscape .lands_percent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 1.875rem;
    padding: 20px;
  }
}
.landscape .lands_percent > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landscape .lands_percent > div h1,
.landscape .lands_percent > div h2 {
  font-size: 0.75rem;
  line-height: 1.3333;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.0938rem;
}
.landscape .lands_percent .lands_txt {
  margin-bottom: 0.5rem;
}
.landscape .lands_percent .lands_txt h1 {
  width: 33%;
  max-width: 33%;
  color: var(--color_percent);
}
.landscape .lands_percent .lands_bar {
  width: calc(100% - 1rem);
  max-width: calc(100% - 1rem);
  margin-bottom: 0.25rem;
  overflow: hidden;
  position: relative;
}
.landscape .lands_percent .lands_bar::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  transform: skew(-30deg);
  z-index: 2;
  animation-name: ani_lighter;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  content: "";
}
.landscape .lands_percent .lands_bar span {
  display: block;
  width: 40%;
  height: 0.25rem;
  background-color: var(--color_percent);
  border-left: 0.0625rem solid #000000;
  border-right: 0.0625rem solid #000000;
}
.landscape .lands_percent .lands_bar span:first-of-type, .landscape .lands_percent .lands_bar span:last-of-type {
  z-index: 1;
  position: relative;
  width: 30%;
  max-width: 30%;
}
.landscape .lands_percent .lands_nums h2 {
  text-align: left;
}
.landscape .lands_percent .lands_nums h2:nth-of-type(1) {
  width: 30%;
}
.landscape .lands_percent .lands_nums h2:nth-of-type(2) {
  width: 38%;
}
.landscape .lands_percent .lands_nums h2:nth-of-type(3) {
  width: 20%;
}
.landscape .lands_percent .lands_nums h2:nth-of-type(4) {
  min-width: 3.75rem;
  text-align: right;
}
.landscape .landTitle {
  flex-shrink: 0;
  padding: 0 20px;
}
@media (min-width: 992px) {
  .landscape .landTitle {
    padding: 0 25px;
  }
}
.landscape .landTitle .landUnderLine {
  min-height: 130px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
}
@media (min-width: 1200px) {
  .landscape .landTitle .landUnderLine {
    min-height: 225px;
  }
}
.landscape .landTitle .landUnderLine > div {
  padding: 0 7px;
}
.landscape .landTitle .landUnderLine > div:first-of-type {
  flex-shrink: 0;
}
.landscape .landTitle .landUnderLine > div:last-of-type {
  flex-grow: 1;
}
.landscape .landTitle .landUnderLine .landAvatar {
  display: none;
  width: 148px;
  height: 182px;
  overflow: hidden;
}
.landscape .landTitle .landUnderLine .landAvatar > div {
  background-image: var(--bground);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  margin-bottom: 17px;
}
.landscape .landTitle .landUnderLine .landInfo > *:last-child {
  margin-bottom: 0;
}
.landscape .landTitle .landUnderLine .landInfo h1,
.landscape .landTitle .landUnderLine .landInfo h2,
.landscape .landTitle .landUnderLine .landInfo h3,
.landscape .landTitle .landUnderLine .landInfo h4 {
  line-height: 1.4;
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.landscape .landTitle .landUnderLine .landInfo h1::after,
.landscape .landTitle .landUnderLine .landInfo h2::after,
.landscape .landTitle .landUnderLine .landInfo h3::after,
.landscape .landTitle .landUnderLine .landInfo h4::after {
  content: "" attr(unit) "";
}
.landscape .landTitle .landUnderLine .landInfo h1,
.landscape .landTitle .landUnderLine .landInfo h4 {
  font-weight: 500;
}
.landscape .landTitle .landUnderLine .landInfo h2,
.landscape .landTitle .landUnderLine .landInfo h4 {
  font-size: 16px;
}
@media (min-width: 1200px) {
  .landscape .landTitle .landUnderLine .landInfo h2,
  .landscape .landTitle .landUnderLine .landInfo h4 {
    font-size: 20px;
  }
}
.landscape .landTitle .landUnderLine .landInfo h1 {
  font-size: 26px;
}
@media (min-width: 1200px) {
  .landscape .landTitle .landUnderLine .landInfo h1 {
    font-size: 35px;
  }
}
.landscape .landTitle .landUnderLine .landInfo h2 {
  color: rgba(241, 241, 241, 0.6);
}
.landscape .landTitle .landUnderLine .landInfo h3 {
  font-size: 14px;
  color: #57D4EF;
}
@media (min-width: 1200px) {
  .landscape .landTitle .landUnderLine .landInfo h3 {
    font-size: 16px;
  }
}
.landscape .landTitle.hasLandAvatar .landUnderLine .landAvatar {
  display: block;
}
.landscape .landBox {
  flex-grow: 1;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1200px) {
  .landscape .landBox {
    overflow: hidden;
  }
}
.landscape .landBox .landBox_t {
  padding: 0 28px;
  padding-bottom: 24px;
}
.landscape .landBox .landBox_b {
  padding: 0 28px;
  padding-right: 22px;
}
@media (min-width: 1200px) {
  .landscape .landBox .landBox_b {
    overflow: hidden auto;
  }
}
.landscape .landBox .landBox_b .landItem {
  display: flex;
}
.landscape .landBox .landBox_b .landItem:last-of-type .info {
  border-bottom: 0;
}
.landscape .landBox .landBox_b .landItem .no {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  color: #FFFFFF;
  font-weight: 500;
  flex-shrink: 0;
  width: 60px;
  padding-right: 5px;
}
.landscape .landBox .landBox_b .landItem .info {
  width: calc(100% - 60px);
  padding-left: 6px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(227, 227, 227, 0.2);
  display: flex;
  align-items: center;
}
.landscape .landBox .landBox_b .landItem .info .avatar {
  flex-shrink: 0;
  width: 100px;
  -webkit-aspect-ratio: 1/1;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
  display: none;
}
.landscape .landBox .landBox_b .landItem .info .avatar > div {
  background-image: var(--bground);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.landscape .landBox .landBox_b .landItem .info .landPlace {
  flex-grow: 1;
}
.landscape .landBox .landBox_b .landItem .info .landPlace > .row {
  --bs-gutter-x: 8px;
}
@media (min-width: 992px) {
  .landscape .landBox .landBox_b .landItem .info .landPlace > .row {
    --bs-gutter-x: 16px;
  }
}
.landscape .landBox .landBox_b .landItem .info .landPlace h1, .landscape .landBox .landBox_b .landItem .info .landPlace h2 {
  line-height: 1.4;
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.landscape .landBox .landBox_b .landItem .info .landPlace h1 {
  font-size: 18PX;
  color: #FFFFFF;
  font-weight: 500;
}
@media (min-width: 768px) {
  .landscape .landBox .landBox_b .landItem .info .landPlace h1 {
    font-size: 20px;
  }
}
.landscape .landBox .landBox_b .landItem .info .landPlace h2 {
  font-size: 14px;
  color: #9F9F9F;
  font-weight: 400;
}
@media (min-width: 768px) {
  .landscape .landBox .landBox_b .landItem .info .landPlace h2 {
    font-size: 16px;
  }
}
.landscape .landBox .landBox_b .landItem .info .landPlace span {
  flex-shrink: 0;
  min-width: 62px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #57D4EF;
  padding-left: 16px;
}
@media (min-width: 768px) {
  .landscape .landBox .landBox_b .landItem .info .landPlace span {
    font-size: 16px;
  }
}
.landscape .landBox .landBox_b .landItem .info .landPlace span::after {
  content: "" attr(unit) "";
}
@media (min-width: 576px) {
  .landscape .landBox .landBox_b .landItem.hasLandAvatar .info .avatar {
    display: block;
  }
  .landscape .landBox .landBox_b .landItem.hasLandAvatar .info .landPlace {
    padding-left: 20px;
  }
}
.landscape .landSearch {
  display: flex;
  align-items: center;
}
.landscape .landSearch .search {
  flex-grow: 1;
  position: relative;
}
.landscape .landSearch .search::before {
  background-image: url(../images/icons/icon_search_wht.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
  right: 20px;
  content: "";
}
.landscape .landSearch .search input {
  width: 0;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.5;
  padding: 6px 15px;
  padding-right: 55px;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  opacity: 0;
  background-color: #F1F1F1;
  transition: 0.4s;
}
.landscape .landSearch .search input:focus {
  width: 100%;
  opacity: 1;
}
.landscape .landSearch .search:has(input:focus)::before {
  background-image: url(../images/icons/icon_search.svg);
}
.landscape .landSearch:hover .search::before {
  background-image: url(../images/icons/icon_search.svg);
}
.landscape .landSearch:hover .search input {
  width: 100%;
  opacity: 1;
}
.landscape .landSearch > img {
  flex-shrink: 0;
  cursor: pointer;
  margin: 0 10px;
}
.landscape .landSwiper {
  padding-top: 16px;
  position: relative;
}
.landscape .landSwiper .swiper-slide {
  width: auto;
}
.landscape .landSwiper .swiper-slide span {
  display: inline-block;
  min-width: 80px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
  color: #57D4EF;
  font-weight: 500;
  text-align: center;
  padding: 2px 12px;
  border: 1px solid #57D4EF;
  border-radius: 17px;
}
.landscape .landSwiper .swiper-slide span:hover {
  color: rgba(241, 241, 241, 0.6);
  border-color: rgba(241, 241, 241, 0.6);
}

/* 使用添加/移除類名稱來處理的行爲 */
article.makeView.makerLarView .main_r {
  width: 430px;
}
article.makeView.makerLarView .idx_status .status_header h1 {
  font-size: 1.25rem;
  line-height: 1.2;
  padding: 0 1.5625rem;
  display: flex;
  align-items: center;
  letter-spacing: 0.4375rem;
}
article.makeView.makerLarView .idx_status .status_header h1 img {
  height: 0.9375rem;
}
article.makeView.makerLarView .idx_status .tabs span {
  font-size: 16px;
  padding: 7px 20px;
}
article.makeView.makerLarView .idx_status .status_issue .body .row {
  margin-bottom: 3px;
}
article.makeView.makerLarView .idx_status .status_issue .body > img {
  height: 40px;
  margin-bottom: 25px;
}
article.makeView.makerLarView .idx_status .status_park h1,
article.makeView.makerLarView .idx_status .status_flood h1 {
  font-size: 16px;
}
article.makeView.makerLarView .idx_status .status_park h1 img,
article.makeView.makerLarView .idx_status .status_flood h1 img {
  height: 20px;
}
article.makeView.makerLarView .idx_status .status_park .box .box_area,
article.makeView.makerLarView .idx_status .status_flood .box .box_area {
  overflow-x: auto;
}
article.makeView.makerLarView .idx_status .status_park .box .box_area table td:nth-of-type(4),
article.makeView.makerLarView .idx_status .status_park .box .box_area table td:nth-of-type(5),
article.makeView.makerLarView .idx_status .status_flood .box .box_area table td:nth-of-type(4),
article.makeView.makerLarView .idx_status .status_flood .box .box_area table td:nth-of-type(5) {
  display: table-cell;
}

/* 所有模態框 */
.modal_effect {
  width: 5rem;
  height: 5rem;
  border-width: 0.25rem;
  border-style: solid;
  border-radius: 50%;
  padding: 0;
  margin: 0 auto 0.9375rem auto;
  box-sizing: content-box;
  position: relative;
}
@media (min-width: 992px) {
  .modal_effect {
    zoom: 140%;
    -ms-zoom: 140%;
  }
}
.modal_effect.modal_effect_success {
  border-color: #00CC99;
}
.modal_effect.modal_effect_success .modal_effect_success_line {
  position: absolute;
  height: 0.3125rem;
  background-color: #00CC99;
  display: block;
  border-radius: 0.125rem;
  z-index: 2;
}
.modal_effect.modal_effect_success .modal_effect_success_line.modal_effect_success_line_long {
  width: 2.9375rem;
  top: 2.375rem;
  right: 0.5rem;
  transform: rotate(-45deg);
  animation: ani_modal_effect_success 0.75s;
}
.modal_effect.modal_effect_success .modal_effect_success_line.modal_effect_success_line_tip {
  width: 1.5625rem;
  left: 0.875rem;
  top: 2.875rem;
  transform: rotate(45deg);
  animation: ani_modal_effect_success_tip 0.75s;
}
.modal_effect.modal_effect_error {
  border-color: #E14E41;
  animation: ani_modal_error 0.5s;
}
.modal_effect.modal_effect_error .modal_effect_error_xmark {
  position: relative;
  display: block;
  animation: ani_modal_error_XMark 0.5s;
}
.modal_effect.modal_effect_error .modal_effect_error_xmark .modal_effect_error_line {
  position: absolute;
  height: 0.3125rem;
  width: 2.9375rem;
  background-color: #E14E41;
  display: block;
  top: 2.3125rem;
  border-radius: 0.125rem;
}
.modal_effect.modal_effect_error .modal_effect_error_xmark .modal_effect_error_line.modal_effect_error_line_left {
  transform: rotate(45deg);
  left: 1.0625rem;
}
.modal_effect.modal_effect_error .modal_effect_error_xmark .modal_effect_error_line.modal_effect_error_line_right {
  transform: rotate(-45deg);
  right: 1rem;
}
.modal_effect.modal_effect_warning {
  border-color: #F99D5A;
  animation: ani_modal_warning 0.5s;
}
.modal_effect.modal_effect_warning::before, .modal_effect.modal_effect_warning::after {
  position: absolute;
  left: 50%;
  background-color: #F99D5A;
  content: "";
}
.modal_effect.modal_effect_warning::before {
  width: 0.3125rem;
  height: 1.8125rem;
  border-radius: 0.125rem;
  margin-left: -0.125rem;
  top: 1.1875rem;
}
.modal_effect.modal_effect_warning::after {
  bottom: 1.0625rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  margin-left: -0.1875rem;
}
.modal_effect.modal_effect_info {
  border-color: #57D4EF;
  animation: ani_modal_info 0.8s;
}
.modal_effect.modal_effect_info::before, .modal_effect.modal_effect_info::after {
  position: absolute;
  left: 50%;
  background-color: #57D4EF;
  content: "";
}
.modal_effect.modal_effect_info::before {
  width: 0.3125rem;
  height: 1.8125rem;
  bottom: 1.0625rem;
  border-radius: 0.125rem;
  margin-left: -0.125rem;
}
.modal_effect.modal_effect_info::after {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  margin-left: -0.1875rem;
  top: 1.1875rem;
}
.modal_effect.modal_effect_question {
  border-color: #1AA6C5;
  animation: ani_modal_question 0.8s;
}
.modal_effect.modal_effect_question::before {
  font-family: "Comfortaa", sans-serif;
  font-size: 3.4375rem;
  line-height: 1;
  font-weight: 300;
  color: #1AA6C5;
  margin-top: 0.3125rem;
  margin-left: 0.0625rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "?";
}

.modal .modal-dialog {
  width: 100%;
  padding: 1.25rem 0.9375rem;
}
@media (min-width: 768px) {
  .modal .modal-dialog {
    padding: 2.5rem 0.9375rem;
  }
}
@media (min-width: 992px) {
  .modal .modal-dialog {
    padding: 4.375rem 1.875rem;
  }
}
.modal .modal-dialog .modal-content {
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
}

/* alert 通知框 */
#modal_alert {
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  background-color: transparent;
}
#modal_alert .modal-dialog {
  max-width: 31.25rem;
}
#modal_alert .modal-dialog .modal-content {
  background: transparent;
  box-shadow: none;
}
#modal_alert .modal-dialog .modal-content .modal-body {
  font-size: 1rem;
  line-height: 2;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.125rem;
}
#modal_alert .modal-dialog .modal-content .modal-body .alert {
  padding: 1.25rem;
  margin: 0;
}
#modal_alert .modal-dialog .modal-content .modal-body .alert.alert-default {
  color: #424248;
  background-color: #E3E3E3;
}
#modal_alert .modal-dialog .modal-content .modal-body .alert.alert-dark {
  color: #D9D9D9;
  background-color: #28282F;
}

/* 註冊帳戶/ 我的帳號 */
#modal_signUp .modal-dialog,
#modal_myInfo .modal-dialog {
  max-width: 41.25rem;
}
#modal_signUp .modal-dialog .modal-content,
#modal_myInfo .modal-dialog .modal-content {
  border-radius: 0.625rem;
}
#modal_signUp .modal-dialog .modal-header,
#modal_myInfo .modal-dialog .modal-header {
  padding: 1.25rem 1.875rem;
}
@media (min-width: 768px) {
  #modal_signUp .modal-dialog .modal-header,
  #modal_myInfo .modal-dialog .modal-header {
    padding: 2rem 3.75rem;
  }
}
#modal_signUp .modal-dialog .modal-header .signUp_title h1,
#modal_myInfo .modal-dialog .modal-header .signUp_title h1 {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 0.0938rem;
}
#modal_signUp .modal-dialog .modal-body,
#modal_myInfo .modal-dialog .modal-body {
  padding: 1.875rem 1.25rem;
}
@media (min-width: 768px) {
  #modal_signUp .modal-dialog .modal-body,
  #modal_myInfo .modal-dialog .modal-body {
    padding: 2rem 3.75rem;
    padding-bottom: 2.375rem;
  }
}
#modal_signUp .modal-dialog .modal-body .signUp_information,
#modal_myInfo .modal-dialog .modal-body .signUp_information {
  letter-spacing: 0.0938rem;
  padding-left: 1rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information > div:not(:last-of-type),
#modal_myInfo .modal-dialog .modal-body .signUp_information > div:not(:last-of-type) {
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information h2,
#modal_myInfo .modal-dialog .modal-body .signUp_information h2 {
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 0.625rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information h3,
#modal_myInfo .modal-dialog .modal-body .signUp_information h3 {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 400;
  padding-top: 1.125rem;
  margin-bottom: 0.9375rem;
}
@media (min-width: 768px) {
  #modal_signUp .modal-dialog .modal-body .signUp_information h3,
  #modal_myInfo .modal-dialog .modal-body .signUp_information h3 {
    margin-bottom: 1.25rem;
  }
}
#modal_signUp .modal-dialog .modal-body .signUp_information p,
#modal_myInfo .modal-dialog .modal-body .signUp_information p {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  font-size: 0.875rem;
  line-height: 1.25;
  color: #7D7D7F;
  letter-spacing: 0.0625rem;
  word-break: break-word;
}
#modal_signUp .modal-dialog .modal-body .signUp_information label,
#modal_myInfo .modal-dialog .modal-body .signUp_information label {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information input,
#modal_myInfo .modal-dialog .modal-body .signUp_information input {
  width: calc(100% - 2.5rem);
  max-width: 17.5rem;
  font-size: 0.9375rem;
  line-height: 1;
  color: #FFFFFF;
  padding: 0.25rem 0.5rem;
  background-color: transparent;
  border: 0.0625rem solid rgba(241, 241, 241, 0.6);
  border-radius: 0.25rem;
  letter-spacing: 0.0625rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information input:disabled,
#modal_myInfo .modal-dialog .modal-body .signUp_information input:disabled {
  border: 0.0625rem solid rgba(255, 255, 255, 0.4);
}
#modal_signUp .modal-dialog .modal-body .signUp_information small,
#modal_myInfo .modal-dialog .modal-body .signUp_information small {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-left: 0.3125rem;
  color: #999999;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_check,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_check {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 1.6875rem;
  height: 1.6875rem;
  animation: bounceIn 0.5s ease-in-out;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .error .signUp_check,
#modal_myInfo .modal-dialog .modal-body .signUp_information .error .signUp_check {
  background-image: url(../images/icons/icon_incorrect.svg);
}
#modal_signUp .modal-dialog .modal-body .signUp_information .error input,
#modal_myInfo .modal-dialog .modal-body .signUp_information .error input {
  border: 0.0625rem solid #E14E41;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .error small,
#modal_myInfo .modal-dialog .modal-body .signUp_information .error small {
  display: block;
  color: #E14E41;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .error label,
#modal_myInfo .modal-dialog .modal-body .signUp_information .error label {
  color: #E14E41;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .success .signUp_check,
#modal_myInfo .modal-dialog .modal-body .signUp_information .success .signUp_check {
  background-image: url(../images/icons/icon_correct.svg);
}
#modal_signUp .modal-dialog .modal-body .signUp_information .success small,
#modal_myInfo .modal-dialog .modal-body .signUp_information .success small {
  display: none;
}
@media (min-width: 768px) {
  #modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name,
  #modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name {
    padding-left: 1rem;
  }
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_avatar,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_avatar {
  background-color: #D9D9D9;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-width: 3.75rem;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  overflow: hidden;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_username,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_username {
  min-width: calc(100% - 3.75rem);
  width: calc(100% - 3.75rem);
  max-width: calc(100% - 3.75rem);
  padding-left: 1.875rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_username h1,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_username h1 {
  font-size: 1rem;
  color: #FFFFFF;
  font-weight: 400;
  margin-bottom: 0.25rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_username div,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_username div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_username div input:disabled,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name .signUp_user .signUp_username div input:disabled {
  padding: 0.25rem 0;
  background-color: transparent;
  border: 0.0625rem solid rgba(241, 241, 241, 0);
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name label[for=upload_avatar1],
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_name label[for=upload_avatar2],
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name label[for=upload_avatar1],
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_name label[for=upload_avatar2] {
  display: inline-block;
  min-width: 3.75rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  color: #FFFFFF;
  letter-spacing: 0.0625rem;
  padding: 0 0.3125rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_pwd > div,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_pwd > div {
  margin-bottom: 0.625rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_pwd > div > div,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_pwd > div > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_pwd > div:last-of-type,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_pwd > div:last-of-type {
  margin-bottom: 0;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_type > div,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_type > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_info .signUp_info_box > div:not(:last-of-type),
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_info .signUp_info_box > div:not(:last-of-type) {
  margin-bottom: 0.625rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code input,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code input {
  margin-bottom: 0.625rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a, #modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input {
  min-width: 8.75rem;
  display: inline-block;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  padding: 0.8125rem 1.625rem;
  letter-spacing: 0.075rem;
  border-radius: 0.625rem;
  color: #000000;
  background-color: #F1F1F1;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a:hover, #modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input:hover,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a:hover,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input:hover {
  filter: brightness(1.1);
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a.btn_cfm, #modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input.btn_cfm,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a.btn_cfm,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input.btn_cfm {
  max-width: 8.75rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a a.disabled, #modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input a.disabled,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a a.disabled,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input a.disabled {
  cursor: default;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a a.disabled:hover, #modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input a.disabled:hover,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a a.disabled:hover,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input a.disabled:hover {
  filter: brightness(0);
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a span, #modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input span,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns a span,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code .signUp_btns input span {
  display: flex;
  align-items: center;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code #signUpCodeInput,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code #signUpCodeInput {
  display: none;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_code #signUpCfmBtn,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_code #signUpCfmBtn {
  display: none;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map > div,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map > div:first-of-type,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map > div:first-of-type {
  margin-bottom: 1rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label {
  flex: none;
  display: inline-block;
  width: 2.5rem;
  height: 0.75rem;
  font-size: 0.625rem;
  position: relative;
  margin-left: 1rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label input,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label input {
  width: 0;
  height: 0;
  opacity: 0;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label input:checked + .slider,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label input:checked + .slider {
  background-color: #57D4EF;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label input:focus + .slider,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label input:focus + .slider {
  box-shadow: 0 0 0.0625rem #57D4EF;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label input:checked + .slider:before,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label input:checked + .slider:before {
  transform: translateX(1.875rem);
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label span,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label span {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #75757C;
  border-radius: 3.125rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label span::before,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_switch label span::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  inset: 0;
  background-color: #FFFFFF;
  border-radius: 3.125rem;
  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: absolute;
  top: -0.4375rem;
  left: -0.625rem;
  content: "";
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select > div,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select > div {
  margin-bottom: 0.625rem;
  position: relative;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select > div::before,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select > div::before {
  background-image: url(../images/icons/icon_arrow_down.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  right: 0.5rem;
  margin-top: -0.625rem;
  -webkit-pointer-events: none;
  pointer-events: none;
  content: "";
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select > div:not(:last-of-type),
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select > div:not(:last-of-type) {
  padding-right: 0.75rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select > div:not(:last-of-type)::before,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select > div:not(:last-of-type)::before {
  right: 1.25rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select select.form-select,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select select.form-select {
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0.0625rem;
  border: 0.0625rem solid rgba(241, 241, 241, 0.6);
  background-color: #414141;
  color: #FFFFFF;
  padding: 0.5rem;
  padding-right: 1.875rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select select.form-select:focus,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select select.form-select:focus {
  outline: none;
  box-shadow: none;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select select.form-select:disabled,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_map .signUp_select select.form-select:disabled {
  font-size: 1rem;
  background-color: transparent;
  border: 0.0625rem solid transparent;
  padding: 0.375rem;
  padding-right: 0;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_notify > div,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_notify > div {
  display: flex;
  align-items: center;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_notify > div:first-of-type,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_notify > div:first-of-type {
  margin-bottom: 1rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_notify > div span,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_notify > div span {
  min-width: 4rem;
  width: 4rem;
  max-width: 4rem;
  padding-left: 0.0313rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_notify .signUp_worker,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_notify .signUp_worker {
  margin-top: 0.625rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_notify .signUp_worker .row,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_notify .signUp_worker .row {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_notify .signUp_worker .row .col-auto,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_notify .signUp_worker .row .col-auto {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 1rem;
  line-height: 1.75;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_notify .signUp_worker .row .col-auto span,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_notify .signUp_worker .row .col-auto span {
  font-size: 0.875rem;
  line-height: 1.3333;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_signout span,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_signout span {
  font-size: 0.9375rem;
  cursor: pointer;
  color: #7D7D7F;
  letter-spacing: 0.125rem;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_signout span:hover,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_signout span:hover {
  color: #FFFFFF;
}
#modal_signUp .modal-dialog .modal-body .signUp_information .signUp_signout span.active:active,
#modal_myInfo .modal-dialog .modal-body .signUp_information .signUp_signout span.active:active {
  transform: scale(0.95);
}
#modal_signUp .signUp_edit,
#modal_myInfo .signUp_edit {
  cursor: pointer;
  flex: none;
  font-size: 0.75rem;
  text-align: right;
  letter-spacing: 0.125rem;
  transition: all 0.2s;
}
#modal_signUp .signUp_edit.edit::before,
#modal_myInfo .signUp_edit.edit::before {
  content: "修改";
  color: #57D4EF;
}
#modal_signUp .signUp_edit.choice::before,
#modal_myInfo .signUp_edit.choice::before {
  color: #57D4EF;
  content: "選擇";
}
#modal_signUp .signUp_edit.confirm::before,
#modal_myInfo .signUp_edit.confirm::before {
  color: #66CC33;
  content: "確認";
}

/* 新密碼發送成功-忘記密碼/忘記帳號/註冊帳戶成功/驗證碼發送成功/帳號登出成功/通報成功 */
#modal_getPass .modal-dialog,
#modal_getAcc .modal-dialog,
#modal_signUpSuccess .modal-dialog,
#modal_codeSuccess .modal-dialog,
#modal_signout .modal-dialog,
#modal_notify_success .modal-dialog,
#modal_result .modal-dialog {
  max-width: 35rem;
}
#modal_getPass .modal-dialog .modal-content,
#modal_getAcc .modal-dialog .modal-content,
#modal_signUpSuccess .modal-dialog .modal-content,
#modal_codeSuccess .modal-dialog .modal-content,
#modal_signout .modal-dialog .modal-content,
#modal_notify_success .modal-dialog .modal-content,
#modal_result .modal-dialog .modal-content {
  border-radius: 0.625rem;
}
#modal_getPass .modal-dialog .modal-content .modal-body,
#modal_getAcc .modal-dialog .modal-content .modal-body,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body,
#modal_codeSuccess .modal-dialog .modal-content .modal-body,
#modal_signout .modal-dialog .modal-content .modal-body,
#modal_notify_success .modal-dialog .modal-content .modal-body,
#modal_result .modal-dialog .modal-content .modal-body {
  padding: 2rem 1.25rem;
}
@media (min-width: 768px) {
  #modal_getPass .modal-dialog .modal-content .modal-body,
  #modal_getAcc .modal-dialog .modal-content .modal-body,
  #modal_signUpSuccess .modal-dialog .modal-content .modal-body,
  #modal_codeSuccess .modal-dialog .modal-content .modal-body,
  #modal_signout .modal-dialog .modal-content .modal-body,
  #modal_notify_success .modal-dialog .modal-content .modal-body,
  #modal_result .modal-dialog .modal-content .modal-body {
    padding: 2rem 3.125rem;
  }
}
#modal_getPass .modal-dialog .modal-content .modal-body h1,
#modal_getPass .modal-dialog .modal-content .modal-body h2,
#modal_getAcc .modal-dialog .modal-content .modal-body h1,
#modal_getAcc .modal-dialog .modal-content .modal-body h2,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body h1,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body h2,
#modal_codeSuccess .modal-dialog .modal-content .modal-body h1,
#modal_codeSuccess .modal-dialog .modal-content .modal-body h2,
#modal_signout .modal-dialog .modal-content .modal-body h1,
#modal_signout .modal-dialog .modal-content .modal-body h2,
#modal_notify_success .modal-dialog .modal-content .modal-body h1,
#modal_notify_success .modal-dialog .modal-content .modal-body h2,
#modal_result .modal-dialog .modal-content .modal-body h1,
#modal_result .modal-dialog .modal-content .modal-body h2 {
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 0.9375rem;
}
#modal_getPass .modal-dialog .modal-content .modal-body h1,
#modal_getAcc .modal-dialog .modal-content .modal-body h1,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body h1,
#modal_codeSuccess .modal-dialog .modal-content .modal-body h1,
#modal_signout .modal-dialog .modal-content .modal-body h1,
#modal_notify_success .modal-dialog .modal-content .modal-body h1,
#modal_result .modal-dialog .modal-content .modal-body h1 {
  font-size: 1.75rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.1875rem;
}
#modal_getPass .modal-dialog .modal-content .modal-body h2,
#modal_getAcc .modal-dialog .modal-content .modal-body h2,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body h2,
#modal_codeSuccess .modal-dialog .modal-content .modal-body h2,
#modal_signout .modal-dialog .modal-content .modal-body h2,
#modal_notify_success .modal-dialog .modal-content .modal-body h2,
#modal_result .modal-dialog .modal-content .modal-body h2 {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 1.875rem;
  letter-spacing: 0.125rem;
}
#modal_getPass .modal-dialog .modal-content .modal-body .getPass_btn,
#modal_getAcc .modal-dialog .modal-content .modal-body .getPass_btn,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body .getPass_btn,
#modal_codeSuccess .modal-dialog .modal-content .modal-body .getPass_btn,
#modal_signout .modal-dialog .modal-content .modal-body .getPass_btn,
#modal_notify_success .modal-dialog .modal-content .modal-body .getPass_btn,
#modal_result .modal-dialog .modal-content .modal-body .getPass_btn {
  margin-bottom: 0.875rem;
}
#modal_getPass .modal-dialog .modal-content .modal-body .getPass_btn a span,
#modal_getAcc .modal-dialog .modal-content .modal-body .getPass_btn a span,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body .getPass_btn a span,
#modal_codeSuccess .modal-dialog .modal-content .modal-body .getPass_btn a span,
#modal_signout .modal-dialog .modal-content .modal-body .getPass_btn a span,
#modal_notify_success .modal-dialog .modal-content .modal-body .getPass_btn a span,
#modal_result .modal-dialog .modal-content .modal-body .getPass_btn a span {
  width: 100%;
  max-width: 12.5rem;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
  font-weight: 500;
  text-align: center;
  background-color: #F1F1F1;
  padding: 0.75rem;
  border-radius: 0.5rem;
}
#modal_getPass .modal-dialog .modal-content .modal-body .getPass_btn a span:active,
#modal_getAcc .modal-dialog .modal-content .modal-body .getPass_btn a span:active,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body .getPass_btn a span:active,
#modal_codeSuccess .modal-dialog .modal-content .modal-body .getPass_btn a span:active,
#modal_signout .modal-dialog .modal-content .modal-body .getPass_btn a span:active,
#modal_notify_success .modal-dialog .modal-content .modal-body .getPass_btn a span:active,
#modal_result .modal-dialog .modal-content .modal-body .getPass_btn a span:active {
  transform: scale(0.95);
}
#modal_getPass .modal-dialog .modal-content .modal-body .getPass_btn a span:hover,
#modal_getAcc .modal-dialog .modal-content .modal-body .getPass_btn a span:hover,
#modal_signUpSuccess .modal-dialog .modal-content .modal-body .getPass_btn a span:hover,
#modal_codeSuccess .modal-dialog .modal-content .modal-body .getPass_btn a span:hover,
#modal_signout .modal-dialog .modal-content .modal-body .getPass_btn a span:hover,
#modal_notify_success .modal-dialog .modal-content .modal-body .getPass_btn a span:hover,
#modal_result .modal-dialog .modal-content .modal-body .getPass_btn a span:hover {
  filter: brightness(1.1);
}

/* 通報設定 */
#modal_notify .modal-dialog {
  max-width: 47.5rem;
}
#modal_notify .modal-dialog .modal-content {
  height: 40.625rem;
  max-height: 100%;
  border-radius: 1.25rem;
}
#modal_notify .modal-dialog .modal-content .modal-header {
  display: block;
  padding: 2rem 1.25rem 1.875rem 1.25rem;
  border-bottom: 0.0625rem solid #75757C;
  position: relative;
}
@media (min-width: 1200px) {
  #modal_notify .modal-dialog .modal-content .modal-header {
    padding: 2rem 1.25rem 1.875rem 3.5rem;
  }
}
#modal_notify .modal-dialog .modal-content .modal-header h1 {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 0.1563rem;
  margin-bottom: 0.75rem;
}
#modal_notify .modal-dialog .modal-content .modal-header .search_bar {
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 10;
}
@media (min-width: 992px) {
  #modal_notify .modal-dialog .modal-content .modal-header .search_bar {
    max-width: 23.125rem;
  }
}
#modal_notify .modal-dialog .modal-content .modal-header .search_bar input {
  width: 100%;
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.5;
  color: #9F9F9F;
  font-weight: 400;
  background-color: #F1F1F1;
  padding: 0.5rem 2.8125rem 0.5rem 1.5rem;
  border-radius: 0;
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
}
#modal_notify .modal-dialog .modal-content .modal-header .search_bar img {
  position: absolute;
  cursor: pointer;
  top: 50%;
  right: 1.125rem;
  margin-top: -0.625rem;
}
#modal_notify .modal-dialog .modal-content .modal-body {
  display: flex;
  overflow: hidden;
}
#modal_notify .modal-dialog .modal-content .modal-body .modal_left,
#modal_notify .modal-dialog .modal-content .modal-body .modal_right {
  height: 100%;
  margin-right: 0.25rem;
  overflow-x: hidden;
  overflow-y: auto;
}
#modal_notify .modal-dialog .modal-content .modal-body .modal_left {
  width: 35%;
  max-width: 35%;
  border-right: 0.0625rem solid #75757C;
}
#modal_notify .modal-dialog .modal-content .modal-body .modal_right {
  width: 65%;
  max-width: 65%;
}
#modal_notify .modal-dialog .modal-content .modal-body h3,
#modal_notify .modal-dialog .modal-content .modal-body .box {
  padding: 0.9375rem;
  display: flex;
  align-items: center;
  opacity: 0.55;
}
@media (min-width: 768px) {
  #modal_notify .modal-dialog .modal-content .modal-body h3,
  #modal_notify .modal-dialog .modal-content .modal-body .box {
    padding: 1.25rem;
  }
}
#modal_notify .modal-dialog .modal-content .modal-body h3:not(:last-of-type),
#modal_notify .modal-dialog .modal-content .modal-body .box:not(:last-of-type) {
  border-bottom: 0.0625rem solid #75757C;
}
#modal_notify .modal-dialog .modal-content .modal-body h3 span,
#modal_notify .modal-dialog .modal-content .modal-body .box span {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #FFFFFF;
  padding-left: 0.625rem;
  -webkit-pointer-events: none;
  pointer-events: none;
}
@media (min-width: 768px) {
  #modal_notify .modal-dialog .modal-content .modal-body h3 span,
  #modal_notify .modal-dialog .modal-content .modal-body .box span {
    font-style: 1rem;
  }
}
#modal_notify .modal-dialog .modal-content .modal-body h3.active,
#modal_notify .modal-dialog .modal-content .modal-body .box.active {
  opacity: 1;
}
#modal_notify .modal-dialog .modal-content .modal-body .h3_box {
  display: none;
  animation: fadeIn 0.3s linear;
}
#modal_notify .modal-dialog .modal-content .modal-body .h3_box.active {
  display: block;
}
#modal_notify .modal-dialog .modal-content .modal-body .h3_box.active .box {
  opacity: 1;
}
#modal_notify .modal-dialog .modal-content .modal-footer {
  display: block;
  text-align: right;
  border-top: 0.0625rem solid #75757C;
}
#modal_notify .modal-dialog .modal-content .modal-footer a {
  display: inline-block;
  margin-left: auto;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #000000;
  font-weight: 500;
  text-align: center;
  background-color: #57D4EF;
  letter-spacing: 0.125rem;
  padding: 0.3125rem 2.5rem;
  border-radius: 2.5rem;
}
#modal_notify .modal-dialog .modal-content .modal-footer a:hover {
  opacity: 0.75;
}

/* 放大版異常 */
#modal_issues .modal-dialog {
  max-width: 31.25rem;
}
#modal_issues .modal-dialog .modal-content {
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 1.875rem;
}
#modal_issues .modal-body {
  height: 100%;
}
#modal_issues .idx_status {
  height: 100%;
  background: transparent;
  box-shadow: none;
}
#modal_issues .idx_status .action_btns .viewTrigger {
  display: none;
}
#modal_issues .idx_status .action_btns .output {
  display: block;
}
#modal_issues .idx_status .status_park .box .box_area,
#modal_issues .idx_status .status_flood .box .box_area {
  overflow-x: auto;
}
#modal_issues .idx_status .status_park .box .box_area table td:nth-of-type(4), #modal_issues .idx_status .status_park .box .box_area table td:nth-of-type(5),
#modal_issues .idx_status .status_flood .box .box_area table td:nth-of-type(4),
#modal_issues .idx_status .status_flood .box .box_area table td:nth-of-type(5) {
  display: table-cell;
}

/* 電量異常/水位感應訊號異常 */
#modal_hazards .modal-dialog {
  max-width: 55rem;
}
#modal_hazards .modal-dialog .modal-content {
  height: 31.25rem;
  border: 0.0625rem solid rgba(241, 241, 241, 0.8);
  padding: 0 0.9375rem;
  border-radius: 1.25rem;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content {
    border-radius: 1.875rem;
    padding: 0 3rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-header {
  display: block;
  border-bottom: 0.0625rem solid #75757C;
  position: relative;
  padding: 2.25rem 1.25rem 1rem 1.25rem;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-header {
    padding: 3.1875rem 3.125rem 1rem 3.125rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-header h1 {
  font-size: 1.5rem;
  line-height: 1.4623;
  color: #E14E41;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.0938rem;
  -webkit-text-transform: uppercase;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-header h1 {
    font-size: 1.75rem;
    margin-bottom: 1.1875rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-header h1 svg {
  width: 1.875rem;
  height: 1.875rem;
}
#modal_hazards .modal-dialog .modal-content .modal-header h1 svg path {
  fill: #E14E41;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-header h1 svg svg {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-header h2 {
  font-size: 1.125rem;
  line-height: 1.8636;
  color: #515152;
  font-weight: 500;
  text-align: right;
  letter-spacing: 0.0938rem;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-header h2 {
    font-size: 1.375rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-header h2 span {
  font-size: 1.5rem;
  color: #75757C;
  font-weight: 700;
  position: relative;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-header h2 span {
    font-size: 1.75rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-header h2 span::before {
  width: 0.625rem;
  height: 0.625rem;
  background-color: rgba(225, 78, 65, 0.8);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -1.3125rem;
  margin-top: -0.0625rem;
  content: "";
}
#modal_hazards .modal-dialog .modal-content .modal-header h2 small {
  font-size: 1.125rem;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-header h2 small {
    font-size: 1.375rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-header h2 small::before {
  padding: 0 0.5rem;
  content: "/";
}
#modal_hazards .modal-dialog .modal-content .modal-body {
  display: flex;
  align-items: center;
  padding: 1rem 0 2.5rem 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-body {
    padding: 1rem 1.25rem 2.5rem 1.25rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-body .left,
#modal_hazards .modal-dialog .modal-content .modal-body .right {
  width: 50%;
  max-width: 50%;
  height: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-right: 0.3125rem;
  overflow-x: hidden;
  overflow-y: auto;
}
#modal_hazards .modal-dialog .modal-content .modal-body h3 {
  font-size: 0.875rem;
  line-height: 1.4545;
  cursor: pointer;
  color: #515152;
  font-weight: 500;
  letter-spacing: 0.075rem;
  padding: 0.875rem 0;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
#modal_hazards .modal-dialog .modal-content .modal-body h3:hover {
  color: #F1F1F1;
}
#modal_hazards .modal-dialog .modal-content .modal-body h3.active, #modal_hazards .modal-dialog .modal-content .modal-body h3:active {
  color: #FFFFFF;
}
#modal_hazards .modal-dialog .modal-content .modal-body h3.error span {
  padding-left: 0.625rem;
  position: relative;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-body h3.error span {
    padding-left: 1.375rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-body h3.error span::before {
  width: 0.375rem;
  height: 0.375rem;
  background-color: #E14E41;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.1875rem;
  content: "";
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-body h3.error span::before {
    width: 0.625rem;
    height: 0.625rem;
    margin-top: -0.3125rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-body h4 {
  display: block;
  text-align: right;
  font-size: 0.875rem;
  line-height: 1.4444;
  color: #FFFFFF;
  font-weight: 400;
  padding: 0.625rem 0;
  letter-spacing: 0.0625rem;
  border-bottom: 0;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-body h4 {
    font-size: 1.125rem;
    padding: 0.25rem 0;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-body h4.error span {
  padding-left: 0.625rem;
  position: relative;
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-body h4.error span {
    padding-left: 1.375rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-body h4.error span::before {
  width: 0.375rem;
  height: 0.375rem;
  background-color: #E14E41;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.1875rem;
  content: "";
}
@media (min-width: 768px) {
  #modal_hazards .modal-dialog .modal-content .modal-body h4.error span::before {
    width: 0.625rem;
    height: 0.625rem;
    margin-top: -0.3125rem;
  }
}
#modal_hazards .modal-dialog .modal-content .modal-body .h3_box {
  display: none;
  animation: fadeIn 0.3s linear;
}
#modal_hazards .modal-dialog .modal-content .modal-body .h3_box.active {
  display: block;
}

/* 通報-路/區/自動/警戒/再一次警戒 */
#modal_stree .modal-dialog,
#modal_area .modal-dialog,
#modal_auto .modal-dialog,
#modal_warn .modal-dialog,
#modal_again .modal-dialog {
  max-width: 36.25rem;
}
#modal_stree .modal-dialog .modal-content,
#modal_area .modal-dialog .modal-content,
#modal_auto .modal-dialog .modal-content,
#modal_warn .modal-dialog .modal-content,
#modal_again .modal-dialog .modal-content {
  padding: 0 0.9375rem;
  border-radius: 1.25rem;
  background: #3E3E44;
  background: linear-gradient(180deg, rgba(52, 52, 59, 0.95) 0%, rgba(42, 42, 49, 0.95) 50%, rgba(42, 42, 49, 0.95) 100%);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.5);
  border: 0.0625rem solid rgba(241, 241, 241, 0.8);
}
@media (min-width: 768px) {
  #modal_stree .modal-dialog .modal-content,
  #modal_area .modal-dialog .modal-content,
  #modal_auto .modal-dialog .modal-content,
  #modal_warn .modal-dialog .modal-content,
  #modal_again .modal-dialog .modal-content {
    border-radius: 1.875rem;
    padding: 0 2.1875rem;
  }
}
#modal_stree .modal-dialog .modal-content .modal-header,
#modal_area .modal-dialog .modal-content .modal-header,
#modal_auto .modal-dialog .modal-content .modal-header,
#modal_warn .modal-dialog .modal-content .modal-header,
#modal_again .modal-dialog .modal-content .modal-header {
  display: block;
  border-bottom: 0.0625rem solid #75757C;
  padding: 2.25rem 1.25rem 0.875rem 1.25rem;
}
@media (min-width: 768px) {
  #modal_stree .modal-dialog .modal-content .modal-header,
  #modal_area .modal-dialog .modal-content .modal-header,
  #modal_auto .modal-dialog .modal-content .modal-header,
  #modal_warn .modal-dialog .modal-content .modal-header,
  #modal_again .modal-dialog .modal-content .modal-header {
    padding: 3.75rem 1.25rem 0.875rem 1.25rem;
  }
}
#modal_stree .modal-dialog .modal-content .modal-header h1,
#modal_area .modal-dialog .modal-content .modal-header h1,
#modal_auto .modal-dialog .modal-content .modal-header h1,
#modal_warn .modal-dialog .modal-content .modal-header h1,
#modal_again .modal-dialog .modal-content .modal-header h1 {
  font-size: 1.5rem;
  line-height: 1.4623;
  color: #E14E41;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.125rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  #modal_stree .modal-dialog .modal-content .modal-header h1,
  #modal_area .modal-dialog .modal-content .modal-header h1,
  #modal_auto .modal-dialog .modal-content .modal-header h1,
  #modal_warn .modal-dialog .modal-content .modal-header h1,
  #modal_again .modal-dialog .modal-content .modal-header h1 {
    font-size: 1.75rem;
  }
}
#modal_stree .modal-dialog .modal-content .modal-header h1 img,
#modal_area .modal-dialog .modal-content .modal-header h1 img,
#modal_auto .modal-dialog .modal-content .modal-header h1 img,
#modal_warn .modal-dialog .modal-content .modal-header h1 img,
#modal_again .modal-dialog .modal-content .modal-header h1 img {
  height: 2.25rem;
  margin-right: 0.9375rem;
}
@media (min-width: 768px) {
  #modal_stree .modal-dialog .modal-content .modal-header h1 img,
  #modal_area .modal-dialog .modal-content .modal-header h1 img,
  #modal_auto .modal-dialog .modal-content .modal-header h1 img,
  #modal_warn .modal-dialog .modal-content .modal-header h1 img,
  #modal_again .modal-dialog .modal-content .modal-header h1 img {
    height: 2.6875rem;
  }
}
#modal_stree .modal-dialog .modal-content .modal-header h2,
#modal_area .modal-dialog .modal-content .modal-header h2,
#modal_auto .modal-dialog .modal-content .modal-header h2,
#modal_warn .modal-dialog .modal-content .modal-header h2,
#modal_again .modal-dialog .modal-content .modal-header h2 {
  font-size: 1.375rem;
  line-height: 1.4545;
  color: #FFFFFF;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.0938rem;
}
#modal_stree .modal-dialog .modal-content .modal-body,
#modal_area .modal-dialog .modal-content .modal-body,
#modal_auto .modal-dialog .modal-content .modal-body,
#modal_warn .modal-dialog .modal-content .modal-body,
#modal_again .modal-dialog .modal-content .modal-body {
  padding: 1.5rem 0.25rem 3.3125rem 0.25rem;
}
@media (min-width: 768px) {
  #modal_stree .modal-dialog .modal-content .modal-body .row,
  #modal_area .modal-dialog .modal-content .modal-body .row,
  #modal_auto .modal-dialog .modal-content .modal-body .row,
  #modal_warn .modal-dialog .modal-content .modal-body .row,
  #modal_again .modal-dialog .modal-content .modal-body .row {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
}
#modal_stree .modal-dialog .modal-content .modal-body .row .col-auto,
#modal_area .modal-dialog .modal-content .modal-body .row .col-auto,
#modal_auto .modal-dialog .modal-content .modal-body .row .col-auto,
#modal_warn .modal-dialog .modal-content .modal-body .row .col-auto,
#modal_again .modal-dialog .modal-content .modal-body .row .col-auto {
  margin-bottom: 0.9375rem;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  #modal_stree .modal-dialog .modal-content .modal-body .row .col-auto,
  #modal_area .modal-dialog .modal-content .modal-body .row .col-auto,
  #modal_auto .modal-dialog .modal-content .modal-body .row .col-auto,
  #modal_warn .modal-dialog .modal-content .modal-body .row .col-auto,
  #modal_again .modal-dialog .modal-content .modal-body .row .col-auto {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-bottom: 0.5625rem;
  }
}
#modal_stree .modal-dialog .modal-content .modal-body .row input[type=checkbox],
#modal_area .modal-dialog .modal-content .modal-body .row input[type=checkbox],
#modal_auto .modal-dialog .modal-content .modal-body .row input[type=checkbox],
#modal_warn .modal-dialog .modal-content .modal-body .row input[type=checkbox],
#modal_again .modal-dialog .modal-content .modal-body .row input[type=checkbox] {
  margin-right: 0.6875rem;
}
#modal_stree .modal-dialog .modal-content .modal-body .row label,
#modal_area .modal-dialog .modal-content .modal-body .row label,
#modal_auto .modal-dialog .modal-content .modal-body .row label,
#modal_warn .modal-dialog .modal-content .modal-body .row label,
#modal_again .modal-dialog .modal-content .modal-body .row label {
  font-size: 1rem;
  line-height: 1.4545;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 0.0938rem;
}
@media (min-width: 768px) {
  #modal_stree .modal-dialog .modal-content .modal-body .row label,
  #modal_area .modal-dialog .modal-content .modal-body .row label,
  #modal_auto .modal-dialog .modal-content .modal-body .row label,
  #modal_warn .modal-dialog .modal-content .modal-body .row label,
  #modal_again .modal-dialog .modal-content .modal-body .row label {
    font-size: 1.375rem;
  }
}
#modal_stree .modal-dialog .modal-content .modal-body h3,
#modal_area .modal-dialog .modal-content .modal-body h3,
#modal_auto .modal-dialog .modal-content .modal-body h3,
#modal_warn .modal-dialog .modal-content .modal-body h3,
#modal_again .modal-dialog .modal-content .modal-body h3 {
  font-size: 1.375rem;
  line-height: 1.4545;
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 4.375rem;
  letter-spacing: 0.0938rem;
}
@media (min-width: 768px) {
  #modal_stree .modal-dialog .modal-content .modal-body h3,
  #modal_area .modal-dialog .modal-content .modal-body h3,
  #modal_auto .modal-dialog .modal-content .modal-body h3,
  #modal_warn .modal-dialog .modal-content .modal-body h3,
  #modal_again .modal-dialog .modal-content .modal-body h3 {
    margin-bottom: 6.8125rem;
  }
}
#modal_stree .modal-dialog .modal-content .modal-body .btn_notify,
#modal_area .modal-dialog .modal-content .modal-body .btn_notify,
#modal_auto .modal-dialog .modal-content .modal-body .btn_notify,
#modal_warn .modal-dialog .modal-content .modal-body .btn_notify,
#modal_again .modal-dialog .modal-content .modal-body .btn_notify {
  display: inline-block;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1.5555;
  color: #000000;
  font-weight: 700;
  text-align: center;
  background-color: #E14E41;
  letter-spacing: 0.125rem;
  padding: 0.25rem 2.5rem;
  border-radius: 2.5rem;
}
#modal_stree .modal-dialog .modal-content .modal-body .btn_notify:hover,
#modal_area .modal-dialog .modal-content .modal-body .btn_notify:hover,
#modal_auto .modal-dialog .modal-content .modal-body .btn_notify:hover,
#modal_warn .modal-dialog .modal-content .modal-body .btn_notify:hover,
#modal_again .modal-dialog .modal-content .modal-body .btn_notify:hover {
  opacity: 0.75;
}

/* 通報-自動/警戒/再一次警戒 */
#modal_auto .modal-dialog,
#modal_warn .modal-dialog,
#modal_again .modal-dialog {
  max-width: 41.25rem;
}
#modal_auto .modal-dialog .modal-content .modal-header,
#modal_warn .modal-dialog .modal-content .modal-header,
#modal_again .modal-dialog .modal-content .modal-header {
  border: 0;
}
#modal_auto .modal-dialog .modal-content .modal-header h2,
#modal_warn .modal-dialog .modal-content .modal-header h2,
#modal_again .modal-dialog .modal-content .modal-header h2 {
  text-align: left;
}
#modal_auto .modal-dialog .modal-content .modal-body table,
#modal_warn .modal-dialog .modal-content .modal-body table,
#modal_again .modal-dialog .modal-content .modal-body table {
  margin-bottom: 6.25rem;
}
@media (min-width: 768px) {
  #modal_auto .modal-dialog .modal-content .modal-body table,
  #modal_warn .modal-dialog .modal-content .modal-body table,
  #modal_again .modal-dialog .modal-content .modal-body table {
    margin-bottom: 6.25rem;
  }
}
#modal_auto .modal-dialog .modal-content .modal-body table tbody,
#modal_warn .modal-dialog .modal-content .modal-body table tbody,
#modal_again .modal-dialog .modal-content .modal-body table tbody {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  #modal_auto .modal-dialog .modal-content .modal-body table tbody,
  #modal_warn .modal-dialog .modal-content .modal-body table tbody,
  #modal_again .modal-dialog .modal-content .modal-body table tbody {
    display: table-row-group;
  }
}
#modal_auto .modal-dialog .modal-content .modal-body table tbody tr,
#modal_warn .modal-dialog .modal-content .modal-body table tbody tr,
#modal_again .modal-dialog .modal-content .modal-body table tbody tr {
  background-color: transparent;
  margin-bottom: 0.625rem;
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  #modal_auto .modal-dialog .modal-content .modal-body table tbody tr,
  #modal_warn .modal-dialog .modal-content .modal-body table tbody tr,
  #modal_again .modal-dialog .modal-content .modal-body table tbody tr {
    display: table-row;
    margin-bottom: 0;
  }
}
#modal_auto .modal-dialog .modal-content .modal-body table tbody tr td,
#modal_warn .modal-dialog .modal-content .modal-body table tbody tr td,
#modal_again .modal-dialog .modal-content .modal-body table tbody tr td {
  text-align: left;
  font-size: 1.375rem;
  line-height: 1.4545;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 0.0938rem;
  white-space: normal;
  padding: 0;
  width: 100%;
}
@media (min-width: 768px) {
  #modal_auto .modal-dialog .modal-content .modal-body table tbody tr td,
  #modal_warn .modal-dialog .modal-content .modal-body table tbody tr td,
  #modal_again .modal-dialog .modal-content .modal-body table tbody tr td {
    width: auto;
    padding: 0.3125rem;
  }
  #modal_auto .modal-dialog .modal-content .modal-body table tbody tr td:first-child,
  #modal_warn .modal-dialog .modal-content .modal-body table tbody tr td:first-child,
  #modal_again .modal-dialog .modal-content .modal-body table tbody tr td:first-child {
    min-width: 9.375rem;
  }
}
#modal_auto .modal-dialog .modal-content .modal-body table tbody tr td b:not(:last-of-type)::after,
#modal_warn .modal-dialog .modal-content .modal-body table tbody tr td b:not(:last-of-type)::after,
#modal_again .modal-dialog .modal-content .modal-body table tbody tr td b:not(:last-of-type)::after {
  padding: 0 0.1875rem;
  content: "/";
}
#modal_auto .modal-dialog .modal-content .modal-body table tbody tr td span,
#modal_warn .modal-dialog .modal-content .modal-body table tbody tr td span,
#modal_again .modal-dialog .modal-content .modal-body table tbody tr td span {
  font-size: 0.875rem;
  line-height: 1.7143;
  padding-right: 0.3125rem;
}
#modal_auto .modal-dialog .modal-content .modal-body a,
#modal_warn .modal-dialog .modal-content .modal-body a,
#modal_again .modal-dialog .modal-content .modal-body a {
  font-size: 0.875rem;
  line-height: 1.4286;
  cursor: pointer;
  color: #57D4EF;
  letter-spacing: 0.125rem;
}
#modal_auto .modal-dialog .modal-content .modal-body a:hover,
#modal_warn .modal-dialog .modal-content .modal-body a:hover,
#modal_again .modal-dialog .modal-content .modal-body a:hover {
  text-decoration: underline;
}
#modal_auto .modal-dialog .modal-content .modal-footer,
#modal_warn .modal-dialog .modal-content .modal-footer,
#modal_again .modal-dialog .modal-content .modal-footer {
  border-top: 0;
  padding-bottom: 2.1875rem;
}
#modal_auto .modal-dialog .modal-content .modal-footer a,
#modal_warn .modal-dialog .modal-content .modal-footer a,
#modal_again .modal-dialog .modal-content .modal-footer a {
  font-size: 1.125rem;
  line-height: 1.5555;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
  padding: 0.25rem 2.5rem;
  letter-spacing: 0.0938rem;
  border-radius: 2.5rem;
}
#modal_auto .modal-dialog .modal-content .modal-footer a:not(:last-of-type),
#modal_warn .modal-dialog .modal-content .modal-footer a:not(:last-of-type),
#modal_again .modal-dialog .modal-content .modal-footer a:not(:last-of-type) {
  margin-right: 1.1875rem;
}
#modal_auto .modal-dialog .modal-content .modal-footer a:hover,
#modal_warn .modal-dialog .modal-content .modal-footer a:hover,
#modal_again .modal-dialog .modal-content .modal-footer a:hover {
  opacity: 0.75;
}
#modal_auto .modal-dialog .modal-content .modal-footer .cancel,
#modal_warn .modal-dialog .modal-content .modal-footer .cancel,
#modal_again .modal-dialog .modal-content .modal-footer .cancel {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(189, 189, 189, 0.1);
}
#modal_auto .modal-dialog .modal-content .modal-footer .confirm,
#modal_warn .modal-dialog .modal-content .modal-footer .confirm,
#modal_again .modal-dialog .modal-content .modal-footer .confirm {
  color: #000000;
  background-color: #E14E41;
}

/* 詳細資料匯出 */
#modal_report .modal-dialog {
  max-width: 92.5rem;
}
#modal_report .modal-dialog .modal-content {
  height: 56.25rem;
  border-radius: 1.25rem;
  padding: 0 2.0625rem;
}
#modal_report .modal-dialog .modal-content .modal-header {
  display: block;
  padding: 2.0625rem 0 0 0;
  margin-bottom: 0.625rem;
  border-bottom: 0.0625rem solid #75757C;
}
#modal_report .modal-dialog .modal-content .modal-header h1 {
  font-size: 1.5rem;
  line-height: 1.25;
  color: #FFFFFF;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.125rem;
  letter-spacing: 0.0781rem;
}
#modal_report .modal-dialog .modal-content .modal-header h1 img {
  height: 1.875rem;
  margin-right: 1.3125rem;
}
#modal_report .modal-dialog .modal-content .modal-header .modal_swiper {
  position: relative;
  padding: 0 1.25rem;
}
@media (min-width: 1200px) {
  #modal_report .modal-dialog .modal-content .modal-header .modal_swiper {
    padding: 0 1.625rem;
  }
}
#modal_report .modal-dialog .modal-content .modal-header .modal_swiper .swiper-slide {
  width: auto;
}
#modal_report .modal-dialog .modal-content .modal-header .modal_swiper .swiper-slide span {
  display: inline-block;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 500;
  text-align: center;
  padding: 0.5rem;
  letter-spacing: 0.0781rem;
}
@media (min-width: 768px) {
  #modal_report .modal-dialog .modal-content .modal-header .modal_swiper .swiper-slide span {
    font-size: 1rem;
    padding: 0.6875rem 0.75rem;
  }
}
#modal_report .modal-dialog .modal-content .modal-header .modal_swiper .swiper-slide span:not(:last-of-type) {
  margin-right: 0.9375rem;
}
#modal_report .modal-dialog .modal-content .modal-header .modal_swiper .swiper-slide span:hover {
  color: #FFFFFF;
}
#modal_report .modal-dialog .modal-content .modal-header .modal_swiper .swiper-slide span.active {
  color: #FFFFFF;
  border-bottom: 0.125rem solid #FFFFFF;
}
#modal_report .modal-dialog .modal-content .modal-body {
  overflow: auto;
}
#modal_report .modal-dialog .modal-content .modal-body .modal_panes > div {
  display: none;
}
#modal_report .modal-dialog .modal-content .modal-body .modal_panes > div.active {
  display: block;
}
#modal_report .modal-dialog .modal-content .modal-footer {
  padding: 1.25rem 0;
  border: 0;
  justify-content: center;
}
#modal_report .modal-dialog .modal-content .modal-footer a {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #FFFFFF;
  font-weight: 500;
  text-align: center;
  background-color: #58595F;
  padding: 0.5rem 4rem;
  border-radius: 0.5rem;
}
#modal_report .modal-dialog .modal-content .modal-footer a:hover {
  opacity: 0.75;
}
#modal_report .modal-dialog .modal-content .modal-footer a:active {
  transform: scale(0.9);
}

/* 手機版天氣 */
#modal_weather .modal-dialog {
  max-width: 25rem;
}
#modal_weather .modal-dialog .modal-content {
  border-radius: 1.25rem;
}
#modal_weather .modal-dialog .modal-body {
  font-family: "Poppins", sans-serif;
  height: 10.625rem;
}

/* 纍積雨量 */
#modal_rainfall .modal-dialog {
  max-width: 41.875rem;
}
#modal_rainfall .modal-dialog .modal-content {
  height: 44.375rem;
  max-height: 100%;
  padding: 0 0.5625rem 1.25rem 0.5625rem;
  border-radius: 1.875rem;
}
#modal_rainfall .modal-dialog .modal-content .modal-body {
  overflow: hidden;
}
#modal_rainfall .modal-dialog .modal-content .modal-body .modal_rainfall_title {
  padding: 1.5625rem 0.5625rem 0.75rem 0.5625rem;
}
@media (min-width: 992px) {
  #modal_rainfall .modal-dialog .modal-content .modal-body .modal_rainfall_title {
    padding: 1.5625rem 0.5625rem 0.75rem 1.875rem;
  }
}
#modal_rainfall .modal-dialog .modal-content .modal-body .modal_rainfall_sub {
  padding: 0 0.5625rem 0.9375rem 0.5625rem;
  display: none;
}
@media (min-width: 768px) {
  #modal_rainfall .modal-dialog .modal-content .modal-body .modal_rainfall_sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media (min-width: 992px) {
  #modal_rainfall .modal-dialog .modal-content .modal-body .modal_rainfall_sub {
    padding: 0 0.5625rem 1.25rem 1.875rem;
  }
}
#modal_rainfall .modal-dialog .modal-content h1,
#modal_rainfall .modal-dialog .modal-content h2,
#modal_rainfall .modal-dialog .modal-content h3 {
  color: #FFFFFF;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0.3125rem;
  letter-spacing: 0.1563rem;
}
#modal_rainfall .modal-dialog .modal-content h1 {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
}
#modal_rainfall .modal-dialog .modal-content h2 {
  font-size: 0.75rem;
  line-height: 1.25;
}
#modal_rainfall .modal-dialog .modal-content h3 {
  font-size: 1rem;
  line-height: 1.1875;
}
#modal_rainfall .modal-dialog .modal-content h4 {
  font-size: 1.25rem;
  line-height: 1.5;
  color: #9F9F9F;
  padding-right: 0.9375rem;
  letter-spacing: 0.1563rem;
  margin-bottom: 0.3125rem;
}
@media (min-width: 992px) {
  #modal_rainfall .modal-dialog .modal-content h4 {
    padding-right: 2.3125rem;
    margin-bottom: 0;
  }
}
#modal_rainfall .modal-dialog .modal-content .rainTabs {
  width: 100%;
  max-width: 100%;
  background-color: #000000;
  border-radius: 0.625rem;
  padding: 0.125rem 0.5rem 0.0938rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  #modal_rainfall .modal-dialog .modal-content .rainTabs {
    max-width: calc(100% - 11.875rem);
  }
}
#modal_rainfall .modal-dialog .modal-content .rainTabs span {
  display: inline-block;
  min-width: 7.5rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.1818;
  color: #9F9F9F;
  text-align: center;
  padding: 0.0625rem 0.625rem;
}
#modal_rainfall .modal-dialog .modal-content .rainTabs span:hover, #modal_rainfall .modal-dialog .modal-content .rainTabs span:active, #modal_rainfall .modal-dialog .modal-content .rainTabs span.active {
  border-radius: 0.625rem;
  background-color: #9F9F9F;
  color: #000000;
  transition: all 0.2s;
}
#modal_rainfall .modal-dialog .modal-content .rainPanes > div {
  height: 100%;
  display: none;
  animation: fadeIn 1s linear;
}
#modal_rainfall .modal-dialog .modal-content .rainPanes > div.active {
  display: block;
}
#modal_rainfall .modal-dialog .modal-content .rain_bar {
  width: 100%;
  height: 100%;
  position: relative;
}
#modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar10m,
#modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar3hr,
#modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar24hr {
  width: 100%;
  height: 100%;
  position: relative;
}
@media (min-width: 768px) {
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar10m::before, #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar10m::after,
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar3hr::before,
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar3hr::after,
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar24hr::before,
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar24hr::after {
    height: calc(100% - 3.125rem);
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 2.1875rem;
    right: 0;
    border-left: 0.125rem dashed rgba(255, 255, 255, 0.5);
    -webkit-pointer-events: none;
    pointer-events: none;
    content: "";
  }
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar10m::before,
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar3hr::before,
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar24hr::before {
    width: 53.3%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 0%);
  }
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar10m::after,
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar3hr::after,
  #modal_rainfall .modal-dialog .modal-content .rain_bar #rainBar24hr::after {
    width: 27%;
    background-repeat: repeat-y;
    background: linear-gradient(315deg, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-size: 0.625rem 0.625rem;
  }
}

/* pageLoader */
.pageLoader,
.saraLoader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pageLoader img,
.saraLoader img {
  display: flex;
  max-width: 100%;
}
@media (min-width: 992px) {
  .pageLoader img,
  .saraLoader img {
    max-width: 18.75rem;
  }
}

.loader3d {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.loader3d span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1.25rem;
  margin-left: -1.25rem;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border: 0.375rem solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top: 0.375rem solid rgba(255, 255, 255, 0.8);
  animation: loader3d 0.8s linear infinite both;
}

.cover {
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 88;
}

/* 動畫 */
@keyframes ani_x {
  50% {
    transform: translateX(1.25rem);
  }
}
@keyframes ani_y {
  50% {
    transform: translateY(1.25rem);
  }
}
@keyframes ani_cloud {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.25rem);
  }
}
@keyframes ani_rain {
  to {
    transform: translateY(0.25rem);
    opacity: 1;
  }
}
@keyframes ani_clip_circle {
  from {
    --webkit-clip-path: circle(0% at 100% 100%);
    -webkit-clip-path: circle(0% at 100% 100%);
            clip-path: circle(0% at 100% 100%);
  }
  to {
    --webkit-clip-path: circle(150% at 100% 100%);
    -webkit-clip-path: circle(150% at 100% 100%);
            clip-path: circle(150% at 100% 100%);
  }
}
@keyframes ani_switch_to_left {
  from {
    transform: translateX(3.125rem);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes ani_switch_to_right {
  to {
    transform: translateX(3.1875rem);
  }
}
@keyframes ani_wave {
  to {
    transform: translateX(calc(-70% + 112px)) translate3d(0, 0, 0);
  }
}
@keyframes ani_lighter {
  from {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(150%);
  }
}
@keyframes loader3d {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ani_modal_effect_success {
  0% {
    width: 0;
    right: 2.875rem;
    top: 3.375rem;
  }
  65% {
    width: 0;
    top: 3.375rem;
    right: 2.875rem;
  }
  84% {
    width: 3.4375rem;
    top: 2.1875rem;
    right: 0;
  }
  100% {
    width: 2.9375rem;
    top: 2.375rem;
    right: 0.5rem;
  }
}
@keyframes ani_modal_effect_success_tip {
  0% {
    width: 0;
    top: 1.1875rem;
    left: 0.0625rem;
  }
  54% {
    width: 0;
    top: 1.1875rem;
    left: 0.0625rem;
  }
  70% {
    width: 3.125rem;
    top: 2.3125rem;
    left: -0.5rem;
  }
  84% {
    width: 1.0625rem;
    top: 3rem;
    left: 1.3125rem;
  }
  100% {
    width: 1.5625rem;
    top: 2.8125rem;
    left: 0.875rem;
  }
}
@keyframes ani_modal_error {
  0% {
    transform: rotateX(100deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}
@keyframes ani_modal_error_XMark {
  0% {
    transform: scale(0.4);
    margin-top: 1.625rem;
    opacity: 0;
  }
  50% {
    transform: scale(0.4);
    margin-top: 1.625rem;
    opacity: 0;
  }
  80% {
    transform: scale(1.15);
    margin-top: -0.375rem;
  }
  100% {
    transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes ani_modal_warning {
  0% {
    transform: scale(0.4);
    margin-top: 1.625rem;
    opacity: 0;
  }
  50% {
    transform: scale(0.4);
    margin-top: 1.625rem;
    opacity: 0;
  }
  80% {
    transform: scale(1.15);
    margin-top: -0.375rem;
  }
  100% {
    transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes ani_modal_info {
  0% {
    transform: rotateZ(45deg);
    opacity: 0;
  }
  25% {
    transform: rotateZ(-25deg);
    opacity: 0.4;
  }
  50% {
    transform: rotateZ(15deg);
    opacity: 0.8;
  }
  75% {
    transform: rotateZ(-5deg);
    opacity: 1;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes ani_modal_question {
  0% {
    transform: rotateY(-360deg);
  }
  100% {
    transform: rotateY(0);
  }
}
/*-----------------GAS------------------*/
body.type-G .data_visual .visual_swiper .park_bar::after {
  background-image: url(../images/gas/icon_reload.svg);
}

img.tab_page_icon {
  width: 3rem;
  height: auto;
  margin-bottom: 1.25rem;
}

body.type-G .swiper-slide.abt_car_delay,
body.type-G .swiper-slide.abt_carType,
body.type-G .swiper-slide.abt_car {
  display: none !important;
}

body.type-G #chart_panel .visual_title .road_text {
  font-size: 1.2rem;
}

body.type-P .swiper-slide.abt_gasType,
body.type-P .swiper-slide.abt_gasValue,
body.type-P .swiper-slide.abt_gasSwitch {
  display: none !important;
}

.swiper-slide.abt_gasValue > div {
  margin-top: -1.25rem;
}

.swiper-slide.abt_gasType img,
.swiper-slide.abt_gasSwitch img {
  height: 7.5rem;
}

.abt_gasSwitch .f-red {
  color: #E14E41;
}

.data_visual .visual_inner .visual_title {
  overflow: hidden;
}

body.type-G .data_visual .visual_swiper .four_pies .four_num img {
  max-height: 3.75rem;
  margin-left: 0.3125rem;
}

body.type-G #fourItem4 ~ div img {
  margin-top: 0.9375rem;
}

body.type-G .data_visual .visual_swiper .park_bar::before,
body.type-G .data_visual .visual_swiper .park_bar::after {
  background-image: none;
  width: 0;
  height: 0;
}

body:not(.type-G) .idx_status #status_car .stock {
  display: none;
}

.modal .modal-dialog {
  max-width: 35rem;
}

.modal .modal-dialog .modal-content {
  border-radius: 0.625rem;
}

.modal .modal-body h1.text {
  font-size: 1.75rem;
  line-height: 1.5;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 0.9375rem;
  letter-spacing: 0.1875rem;
}

.modal .modal-body h2.text {
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 1.875rem;
  letter-spacing: 0.125rem;
}

.modal button {
  display: block;
  cursor: pointer;
  width: 100%;
  max-width: 12.5rem;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.5;
  color: #000000;
  font-weight: 500;
  text-align: center;
  background-color: #F1F1F1;
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.modal button:hover {
  filter: brightness(1.1);
}

@media (min-width: 768px) {
  #modal_pop .modal-dialog .modal-content .modal-body {
    padding: 2rem 3.125rem;
  }
}
#modal_yn .modal-dialog .modal-body {
  padding: 3.125rem 0 0 0;
  text-align: center;
}

#modal_yn .modal-dialog .modal-content {
  border-radius: 0.625rem;
  background: #FFFFFF;
  overflow: hidden;
}

#modal_yn .modal-dialog .modal-body h1.text {
  font-size: 1.375rem;
  color: #000000;
}

#modal_yn .modal-dialog .modal-body .row .col-6 {
  text-align: center;
  padding: 0;
}

#modal_yn .modal-dialog .modal-body .btn:hover {
  background-color: #F1F1F1;
}

#modal_yn .modal-dialog .modal-body .btn {
  display: block;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  padding: 2rem 0;
}

#modal_yn .modal-dialog .modal-body .btn-y {
  color: #CC0000;
}

#modal_yn .modal-dialog .modal-body .btn-n {
  color: #000000;
}

.modal_effect.modal_effect_question.red {
  border-color: #CC0000;
}

.modal_effect.modal_effect_question.red::before {
  color: #CC0000;
}

.modal-backdrop {
  display: none;
}

.lang-link {
  font-family: "Poppins", sans-serif;
}

#search_box {
  display: block;
  max-height: 15rem;
}

.ui-autocomplete {
  top: 0px !important;
  position: relative !important;
}

.search_bar .inputs .search_box .ui-autocomplete {
  font-size: 1.1rem;
}

#record_table tr th {
  min-width: 3rem;
}

section {
  -webkit-pointer-events: auto;
  pointer-events: auto;
  background: url(../images/login_bground.jpg) no-repeat center center;
  background-size: cover;
}
@media (min-width: 1200px) {
  section {
    overflow: hidden auto;
  }
}

main {
  padding-top: 18px;
}

@media (min-width: 1200px) {
  article {
    height: auto;
    overflow: inherit;
  }
}

.login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loginBox {
  margin: auto;
  width: 100%;
  max-width: 500px;
  background-color: rgba(32, 32, 38, 0.5);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 38px 26px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: 0.4s;
  position: relative;
  overflow: hidden;
}
@media (min-width: 576px) {
  .loginBox {
    padding: 38px 48px;
  }
}
@media (min-width: 768px) {
  .loginBox {
    padding: 60px 48px;
  }
}
@media (min-width: 992px) {
  .loginBox {
    padding: 60px 90px;
  }
}
.loginBox .loginLangIcon {
  position: absolute;
  cursor: pointer;
  top: 10px;
  right: 10px;
  background-image: url(../images/icons/icon_language.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 26px;
  -webkit-aspect-ratio: 1/1;
  aspect-ratio: 1/1;
  transition: 0.4s;
  z-index: 10;
}
@media (min-width: 576px) {
  .loginBox .loginLangIcon {
    width: 30px;
    height: 30px;
  }
}
@media (min-width: 992px) {
  .loginBox .loginLangIcon {
    width: 40px;
    height: 40px;
  }
}
.loginBox .loginLangIcon:hover + .loginLang {
  display: flex;
  align-items: center;
  animation: fadeIn 0.6s linear;
  background-color: #202026;
}
.loginBox .loginLang {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  border-radius: 30px 0 0 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 5;
  display: none;
}
@media (min-width: 992px) {
  .loginBox .loginLang {
    width: 65%;
  }
}
.loginBox .loginLang:hover {
  display: flex;
  align-items: center;
  background-color: #202026;
}
.loginBox .loginLang .loginLangBox {
  margin: auto 0;
  padding-left: 30px;
}
@media (min-width: 576px) {
  .loginBox .loginLang .loginLangBox {
    padding-left: 15%;
  }
}
.loginBox .loginLang .loginLangBox a {
  display: block;
  font-size: 20px;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  padding-left: 26px;
  position: relative;
}
@media (min-width: 992px) {
  .loginBox .loginLang .loginLangBox a {
    font-size: 23px;
  }
}
.loginBox .loginLang .loginLangBox a::before {
  position: absolute;
  top: 0;
  left: 3px;
  font-size: 20px;
}
.loginBox .loginLang .loginLangBox a:not(:last-of-type) {
  margin-bottom: 10px;
}
.loginBox .loginLang .loginLangBox a.active::before {
  content: "✓";
}
.loginBox .login_t {
  margin-bottom: 26px;
}
@media (min-width: 992px) {
  .loginBox .login_t {
    margin-bottom: 70px;
  }
}
.loginBox .login_t .logo {
  width: 68px;
  height: 30px;
  margin: 0 auto 25px auto;
}
.loginBox .login_t .logo svg {
  width: 100%;
  height: 100%;
}
.loginBox .login_t .logo svg path {
  stroke: none;
  fill: #CC0000;
}
.loginBox .login_t .title {
  font-size: 24px;
  line-height: 1.5;
  color: #9F9F9F;
  text-align: center;
}
.loginBox .login_b .login_bt {
  margin-bottom: 15px;
}
.loginBox .login_b .login_bt h1 {
  font-size: 28px;
  line-height: 1.5;
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 39px;
}
@media (min-width: 992px) {
  .loginBox .login_b .login_bt h1 {
    font-size: 40px;
  }
}
.loginBox .login_b .login_bt:has(h1 + p) h1 {
  margin-bottom: 0;
}
.loginBox .login_b .login_bt > p {
  font-size: 16px;
  line-height: 1.5;
  color: #F1F1F1;
  padding-top: 30px;
  padding-bottom: 10px;
}
.loginBox .login_b .login_bt .loginLetter .err {
  font-style: italic;
  color: #FF3333;
  padding-bottom: 15px;
  display: none;
}
.loginBox .login_b .login_bt .input-group {
  margin-bottom: 35px;
}
.loginBox .login_b .login_bt .input-group .input-group-text {
  color: #FFFFFF;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
}
.loginBox .login_b .login_bt .input-group .input-group-text i {
  width: 26px;
  height: 26px;
}
.loginBox .login_b .login_bt .input-group .input-group-text i svg {
  width: 100%;
  height: 100%;
}
.loginBox .login_b .login_bt .input-group .input-group-text i svg path {
  stroke: none;
  fill: #FFFFFF;
}
.loginBox .login_b .login_bt .input-group .form-control {
  font-size: 16px;
  line-height: 1.5;
  color: #FFFFFF;
  background-color: transparent;
  padding: 8px;
  border-radius: 4px !important;
  border-color: rgba(241, 241, 241, 0.45);
}
.loginBox .login_b .login_bt .input-group .form-control::-webkit-input-placeholder {
  color: rgba(241, 241, 241, 0.45);
}
.loginBox .login_b .login_bt .input-group .form-control:focus {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.loginBox .login_b .login_bt button {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border: 0;
  width: 100%;
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  font-weight: 500;
  text-align: center;
  background-color: #F1F1F1;
  padding: 12px 15px;
  border-radius: 6px;
  transition: 0.4s;
}
.loginBox .login_b .login_bt button:hover {
  transition: 0.4s;
  filter: brightness(1.2);
}
.loginBox .login_b .login_bb {
  justify-content: space-between;
}
.loginBox .login_b .login_bb .row {
  --bs-gutter-x: 6px;
}
.loginBox .login_b .login_bb .row > div:last-of-type {
  margin-left: auto;
}
.loginBox .login_b .login_bb a {
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(241, 241, 241, 0.45);
  font-weight: 500;
  transition: 0.4s;
}
.loginBox .login_b .login_bb a:not(:last-of-type)::after {
  transition: 0s;
  display: inline-block;
  padding: 0 16px;
  content: "|";
}
.loginBox .login_b .login_bb a:hover {
  transition: 0.4s;
  color: #f1f1f1;
}
.loginBox .login_b .login_bb a:hover::after {
  transition: 0s;
  color: rgba(241, 241, 241, 0.45);
}/*# sourceMappingURL=login.css.map */