@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&display=swap");
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif; }

[v-cloak] {
  display: none; }

.is-loaded .site-item .content .text:before {
  display: none; }

.main-container {
  max-width: 870px;
  width: 100%;
  margin: 0 auto; }

.main-map {
  position: relative;
  padding-bottom: 194%;
  background: url(../images/map.jpg) 0 0 no-repeat;
  background-size: 100% auto;
  overflow: hidden; }

.main-content {
  width: 100%;
  height: 100%;
  position: absolute; }

.site .site-item {
  position: absolute; }
  .site .site-item img {
    max-width: 100%; }

.site .content {
  position: absolute; }
  .site .content .text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 14%;
    color: #535353;
    font-size: 2.7vw;
    font-weight: 500;
    letter-spacing: 0.3vw;
    white-space: nowrap; }
    @media (min-width: 870px) {
      .site .content .text {
        font-size: 24px; } }
    .site .content .text:before {
      width: 100%;
      height: 100%;
      position: absolute;
      content: "";
      display: block;
      border-radius: 0.5rem;
      background-color: #ddd; }
  .site .content .text-pm10 {
    position: absolute;
    top: 29%;
    left: 1%;
    width: 49%;
    height: 47%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 7.6vw;
    letter-spacing: 0.5vw; }
    @media (min-width: 870px) {
      .site .content .text-pm10 {
        font-size: 67px; } }
    .site .content .text-pm10:before {
      width: 60%;
      height: 60%; }
  .site .content .text-speed {
    position: absolute;
    top: 19.5%;
    left: 77.5%; }
  .site .content .text-direc {
    position: absolute;
    top: 49%;
    left: 77.5%; }

.site .site-item-416 {
  top: 17.35%;
  left: 0.3%;
  width: 53%;
  height: 45.1%; }
  .site .site-item-416 .content {
    top: 6.1%;
    left: 4%;
    width: 83%;
    height: 25.6%; }

.site .site-item-401 {
  top: 69.5%;
  left: 52%;
  width: 48.2%;
  height: 31.1%; }
  .site .site-item-401 .content {
    top: 58.4%;
    left: 4%;
    width: 92%;
    height: 36.4%; }

.site .site-item-417 {
  top: 32.1%;
  left: 0.4%;
  width: 59.9%;
  height: 40.2%; }
  .site .site-item-417 .content {
    top: 6.6%;
    left: 4%;
    width: 73%;
    height: 29.4%; }

.site .site-item-guanshan {
  top: 2.8%;
  left: 0.4%;
  width: 62%;
  height: 15.75%; }
  .site .site-item-guanshan .content {
    top: 17.6%;
    left: 3%;
    width: 71.5%;
    height: 74%; }

.site .site-item-taitung {
  top: 69.5%;
  left: 0.4%;
  width: 57.3%;
  height: 31%; }
  .site .site-item-taitung .content {
    top: 58.6%;
    left: 3.5%;
    width: 77.2%;
    height: 37%; }