@charset "UTF-8";
:root {
  /*主色*/
  --mc-color1: #ffb524;
  --mc-color2: #f7e9cc;
  --mc-color3: #f39201;
  --mc-color4: #fff9ed;
  /*輔色1*/
  --sc-color1: #81c408;
  --sc-color2: #6d9627;
  --sc-color3: #e9f7d1;
  --sc-color4: #f2f7eb;
  --sc-color5: #2b4203;
  /*輔色2*/
  --sc2-color1: #ffac8e;
  --sc2-color2: #fdede8;
  --sc2-color3: #fc936d;
  /*輔色3*/
  --sc3-color1: #879799;
  --sc3-color2: #f7f4f4;
  --sc3-color3: #45595b;
}

html,
body {
  font-family: "微軟正黑體";
}

h2 {
  font-size: 3.5rem;
}

.bg-sc {
  background-color: var(--sc-color1) !important;
}

.bg-sc-light {
  background-color: var(--sc-color3) !important;
}

.bg-sc-dark {
  background-color: var(--sc-color2) !important;
}

.border-sc {
  border-color: var(--sc-color1) !important;
}

.border-sc-dark {
  border-color: var(--sc-color2) !important;
}

.bg-sc2 {
  background-color: var(--sc2-color1);
}

.bg-sc2-light {
  background-color: var(--sc2-color2);
}

.bg-sc2-dark {
  background-color: var(--sc2-color3);
}

.bg-sc3 {
  background-color: var(--sc3-color1);
}

.bg-sc3-light {
  background-color: var(--sc3-color2);
}

.bg-sc3-dark {
  background-color: var(--sc3-color3);
}

.bg-mc {
  background-color: var(--mc-color1);
}

.bg-mc-light {
  background-color: var(--mc-color2);
}

.fruite .fruite-item:hover {
  box-shadow: 0 0 55px rgba(0, 0, 0, 0.4);
}

/*** City View ***/
#cityview .card-body {
  min-height: 350px;
  /*height: 450px;*/
}

/*最新人口*/
#lastpop tbody tr td:first-child {
  font-weight: bold;
}

#lastpop tbody tr td:nth-last-child(1) {
  text-align: right;
}

/*年齡五分層*/
#table-pop tbody tr td {
  text-align: right;
  padding-right: 20px;
}

#table-pop tbody tr td:nth-child(1) {
  text-align: center;
  white-space: nowrap;
}

#draw-chart-nhi {
  position: relative;
  width: 100%;
}

#inx_gp3 table td:nth-child(2),
#inx_gp4 table td:nth-child(2) {
  text-align: left;
}

#inx_gp3 table td:nth-last-child(1),
#inx_gp4 table td:nth-last-child(1) {
  text-align: right;
  padding-right: 2.5rem;
}

/*地圖選單*/
#select-map object {
  /* height: 360px; */
  width: 95%;
}
/* For devices 400px and larger: */
@media only screen and (min-device-width: 1400px) {
  #select-map object {
    height: 420px;
  }
}

/*** Topic Start ***/
.topic .topic-item .topic-icon {
  position: relative;
  width: 120px;
  height: 120px;
}

.topic .topic-item .topic-icon::after {
  content: "";
  width: 35px;
  height: 35px;
  background: var(--bs-secondary);
  position: absolute;
  bottom: -10px;
  transform: translate(-50%);
  transform: rotate(45deg);
}

.topic .topic-item .topic-icon:hover::after {
  background: #ffc045;
}

.topic a {
  color: var(--sc3-color3);
  text-decoration: none;
}

.topic a:hover {
  color: var(--sc-color1);
}
/*** Topic End ***/

/*** Header ***/
.search-header {
  position: relative;
  background: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3)
    ),
    url(../../image/search-bg-3.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.definition-header {
  position: relative;
  background: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3)
    ),
    url(../../image/definition-bg-2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-header {
  position: relative;
  background: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3)
    ),
    url(../../image/about-bg-1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.download-header {
  position: relative;
  background: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3)
    ),
    url(../../image/download-bg-2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.statmap-header {
  position: relative;
  background: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.3)
    ),
    url(../../image/statmap-bg-1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 992px) {
  .search-header,
  .definition-header,
  .download-header,
  .about-header,
  .statmap-header {
    margin-top: 152px !important;
  }
}

@media (max-width: 992px) {
  .search-header,
  .about-header,
  .download-header,
  .definition-header,
  .statmap-header {
    margin-top: 97px !important;
  }
}
/*** Header end ***/