.chart {
  margin: 0 8px;
}

.boxer {
   display: table;
   border-collapse: collapse;
   margin: 20px auto 40px auto;
}
 
.boxer .box-row {
   display: table-row;
}

.black.black.black.black.black.black {
    background: #000;
    color: #fff;
    text-align: center;
    font-weight: 300;
    font-family: PingFangTC-Light, 'Noto Sans TC';
}

.gray {
    background: #e1e1e0;
    color: #000000;
}
 
.boxer .box {
   display: table-cell;
   vertical-align: middle;
   text-align: justify;
   border: 2px solid #fff;
   width: 76vw;
   font-size: 3.1vw;
   line-height: 1.4;
   letter-spacing: 0.3px;
   padding: 2vw 3vw;
   font-family: PingFangTC-Regular, 'Noto Sans TC';
}

.boxer > div:nth-child(odd) > div {
  background: #cdcdcd;
}

.boxer > div:nth-child(even) > div {
  background: #eeeeee;
}

.box-row > div:nth-child(2), .box-row > div:nth-child(3) {
  width: 15vw;
  text-align: center;
}

.box-row > div:nth-child(4) {
  width: 29vw;
  text-align: justify;
  text-justify: inter-word;
  padding: 2vw 0 2vw 3vw;
}

.bottom-part {
  display: table;
  background: #eeeeee;
  /*width: 100vw;*/
  padding: 3vw 0;
}

.bottom-part > div {
  display: table-row;
}

.bottom-part > div > div {
  display: block;
  width: 100vw;
  text-align: center;
}

.bottom-part > div > div > iframe {
  width:94vw;
  height: 53vw;
  margin-bottom: 3vw;
}

.fb-page-container {
  background: #ffffff;
  padding: 4vw 0;
}

.fb-page.web, .fb-page.web > a {
  display: none;
}

.fb-page.mobile,.fb-page.mobile > a {
  display: block;
}

.pagination {
  display: none;
}

.video-link > a {
  color: #c12134;
  font-size: 1.5vw;
  padding: 0 4vw;
}

.video-container {
  height: 65vw;
}

@media only screen and (min-width: 950px) {

  .black.black.black.black.black.black {
      background: #000;
      color: #fff;
      text-align: center;
      font-weight: 300;
      font-family: PingFangTC-Light, 'Noto Sans TC';
      font-size: 1.6vw;
  }

  .chart {
    margin: 6vw 8vw;
  }

  .boxer {
     display: table;
     border-collapse: collapse;
     margin: 50px auto 10px auto;
  }

  .boxer .box {
     font-size: 1.4vw;
     line-height: 1.3;
  }

  .box-row > div:nth-child(2), .box-row > div:nth-child(3) {
    width: 17vw;
  }

  .box-row > div:nth-child(4) {
    width: 17vw;
    text-align: left;
    padding: 1vw 0 1vw 2vw;
  }

  .bottom-part {
    padding: 5vw 7vw 2vw 7vw;
    margin-bottom: 4vw;
  }

  .bottom-part > div > div {
    display: table-cell;
    vertical-align: top;
  }

  .bottom-part > div > div > iframe {
    width: 60vw;
    height: 32vw;
    margin-bottom: 1vw;
  }

  .fb-page.mobile, .fb-page.mobile > a {
    display: none;
  }

  .fb-page.web, .fb-page.web > a {
    display: block;
  }

  .fb-page,
  .fb-page span,
  .fb-page span iframe[style] {
      max-height: 32vw !important;
  }

  .fb-page-container {
    background: none;
    padding: 0;
  }

  .pagination {
    display: block;
    text-align: center;
    font-size: 1vw;
  }

  .video-link > a {
    font-size: 1.5vw;
    padding: 0 4vw;
  }

  .video-container {
    height: auto;
  }
}