/*-----------------------------------------------------------*/
/*
RESPONSTABLE 2.0 by jordyvanraaij
  Designed mobile first!

If you like this solution, you might also want to check out the 1.0 version:
  https://gist.github.com/jordyvanraaij/9069194

*/
/* 讓表頭 <th> 固定不動 */
.responstable thead {
  position: sticky;
  top: 0;
  background-color: var(--main-fg-color);
  /* 確保背景色不會透明 */
  color: white;
  z-index: 10;
}

.responstable {
  table-layout: fixed;
  /* 让所有列平均分配 */
  /* margin: 1em 0; */
  padding: 5px;
  width: 100%;
  background: #fff;
  color: #404040;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
  opacity: 1;
  /*透明度*/
  border-collapse: collapse;
  /* 去除表格邊框間隙 */
}

.responstable tr {
  border-width: 0 1px 1px 1px; /* 上 右 下 左 */
  border-style: solid;
  border-color: #d9e4e6;
}

.responstable tr:nth-child(odd) {
  background-color: var(--main-bg-color);
}

.responstable th {
  display: none;
  color: #898c94;
  font-weight: 500;
  background-color: #fff;
  /* padding: 1em; */
  font-size: 14px;
}

.responstable th:first-child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.responstable th:nth-child(2) {
  display: table-cell;
}

.responstable th:nth-child(2) span {
  display: none;
}

.responstable th:nth-child(2):after {
  content: attr(data-th);
}

@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }

  .responstable th:nth-child(2):after {
    display: none;
  }
}

.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 7em;
  padding: 0;
  width: 100%;
  font-size: 12px;
}

.responstable td:first-child {
  display: table-cell;
  /* border-right: 1px solid #d9e4e6; */
}

@media (min-width: 480px) {
  .responstable td {
    /* border: 1px solid #d9e4e6; */
  }
}

.responstable th,
.responstable td {
  margin: 0.5em 1em;
  text-align: left;
  vertical-align: middle;
}

@media (min-width: 480px) {
  .responstable th,
  .responstable td {
    display: table-cell;
    padding: 1.1rem;
    /* text-align: center; */
    /* 目前版型是靠左邊 */
  }
}

/*
body {
    padding: 0 2em;
    font-family: Arial, sans-serif;
    color: #024457;
    background: #f2f2f2;
}
    */

h1 {
  font-weight: 400;
  color: #404040;
}

h1 span {
  color: #167f92;
}