/* 基本樣式 (小於640px，小型裝置，例如手機) */
.max-width-50 {
  max-width: 50%;
}

.max-width-43 {
    max-width: 43%;
}

.max-width-80 {
  max-width: 80%;
}
.max-width-100 {
  max-width: 100%;
}
.max-width-300px {
  max-width: 300px;
}

.text-align-c{text-align: center;}
.text-align-l{text-align: left;}
.text-align-r{text-align: right;}


.video-100 iframe
{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.table_scroll
{
  overflow: scroll;
}
.table_scroll table
{
  min-width: 800px;
}

/* 中型裝置及以上（min-width: 768px，例如平板） */
@media (min-width: 768px) {
  .md\:max-width-50 {
    max-width: 50%;
  }  
  .md\:max-width-43 {
    max-width: 43%;
  }
    .md\:max-width-50 {
    max-width: 50%;
  }
  .md\:max-width-80 {
    max-width: 80%;
  }
  .md\:max-width-100 {
    max-width: 100%;
  }
  .md\:max-width-300px {
    max-width: 300px;
  }
}

/* 大型裝置及以上（min-width: 1024px，例如桌面裝置） */
@media (min-width: 1024px) {
  .lg\:max-width-50 {
    max-width: 50%;
  }

  .lg\:max-width-43 {
    max-width: 43%;
  }

  .lg\:max-width-80 {
    max-width: 80%;
  }
  .lg\:max-width-100 {
    max-width: 100%;
  }
  .lg\:max-width-300px {
    max-width: 300px;
  }
}





/* 基本樣式 (小型裝置) - 默認 */
.padding-top-0 { padding-top: 0; }
.padding-top-8 { padding-top: 8px; }
.padding-top-12 { padding-top: 12px; }
.padding-top-24 { padding-top: 24px; }
.padding-top-36 { padding-top: 36px; }

.padding-bottom-0 { padding-bottom: 0; }
.padding-bottom-8 { padding-bottom: 8px; }
.padding-bottom-12 { padding-bottom: 12px; }
.padding-bottom-24 { padding-bottom: 24px; }
.padding-bottom-36 { padding-bottom: 36px; }

.padding-left-0 { padding-left: 0; }
.padding-left-8 { padding-left: 8px; }
.padding-left-12 { padding-left: 12px; }
.padding-left-24 { padding-left: 24px; }
.padding-left-36 { padding-left: 36px; }

.padding-right-0 { padding-right: 0; }
.padding-right-8 { padding-right: 8px; }
.padding-right-12 { padding-right: 12px; }
.padding-right-24 { padding-right: 24px; }
.padding-right-36 { padding-right: 36px; }

.margin-top-0 { margin-top: 0; }
.margin-top-8 { margin-top: 8px; }
.margin-top-12 { margin-top: 12px; }
.margin-top-24 { margin-top: 24px; }
.margin-top-36 { margin-top: 36px; }

.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-8 { margin-bottom: 8px; }
.margin-bottom-12 { margin-bottom: 12px; }
.margin-bottom-24 { margin-bottom: 24px; }
.margin-bottom-36 { margin-bottom: 36px; }

.margin-left-0 { margin-left: 0; }
.margin-left-8 { margin-left: 8px; }
.margin-left-12 { margin-left: 12px; }
.margin-left-24 { margin-left: 24px; }
.margin-left-36 { margin-left: 36px; }

.margin-right-0 { margin-right: 0; }
.margin-right-8 { margin-right: 8px; }
.margin-right-12 { margin-right: 12px; }
.margin-right-24 { margin-right: 24px; }
.margin-right-36 { margin-right: 36px; }

/* 中型裝置 (平板) - min-width: 768px */
@media (min-width: 768px) {
  .md\:padding-top-0 { padding-top: 0; }
  .md\:padding-top-8 { padding-top: 8px; }
  .md\:padding-top-12 { padding-top: 12px; }
  .md\:padding-top-24 { padding-top: 24px; }
  .md\:padding-top-36 { padding-top: 36px; }

  .md\:padding-bottom-0 { padding-bottom: 0; }
  .md\:padding-bottom-8 { padding-bottom: 8px; }
  .md\:padding-bottom-12 { padding-bottom: 12px; }
  .md\:padding-bottom-24 { padding-bottom: 24px; }
  .md\:padding-bottom-36 { padding-bottom: 36px; }

  .md\:padding-left-0 { padding-left: 0; }
  .md\:padding-left-8 { padding-left: 8px; }
  .md\:padding-left-12 { padding-left: 12px; }
  .md\:padding-left-24 { padding-left: 24px; }
  .md\:padding-left-36 { padding-left: 36px; }

  .md\:padding-right-0 { padding-right: 0; }
  .md\:padding-right-8 { padding-right: 8px; }
  .md\:padding-right-12 { padding-right: 12px; }
  .md\:padding-right-24 { padding-right: 24px; }
  .md\:padding-right-36 { padding-right: 36px; }

  .md\:margin-top-0 { margin-top: 0; }
  .md\:margin-top-8 { margin-top: 8px; }
  .md\:margin-top-12 { margin-top: 12px; }
  .md\:margin-top-24 { margin-top: 24px; }
  .md\:margin-top-36 { margin-top: 36px; }

  .md\:margin-bottom-0 { margin-bottom: 0; }
  .md\:margin-bottom-8 { margin-bottom: 8px; }
  .md\:margin-bottom-12 { margin-bottom: 12px; }
  .md\:margin-bottom-24 { margin-bottom: 24px; }
  .md\:margin-bottom-36 { margin-bottom: 36px; }

  .md\:margin-left-0 { margin-left: 0; }
  .md\:margin-left-8 { margin-left: 8px; }
  .md\:margin-left-12 { margin-left: 12px; }
  .md\:margin-left-24 { margin-left: 24px; }
  .md\:margin-left-36 { margin-left: 36px; }

  .md\:margin-right-0 { margin-right: 0; }
  .md\:margin-right-8 { margin-right: 8px; }
  .md\:margin-right-12 { margin-right: 12px; }
  .md\:margin-right-24 { margin-right: 24px; }
  .md\:margin-right-36 { margin-right: 36px; }
}

/* 大型裝置 (桌面) - min-width: 1024px */
@media (min-width: 1024px) {
  .lg\:padding-top-0 { padding-top: 0; }
  .lg\:padding-top-8 { padding-top: 8px; }
  .lg\:padding-top-12 { padding-top: 12px; }
  .lg\:padding-top-24 { padding-top: 24px; }
  .lg\:padding-top-36 { padding-top: 36px; }

  .lg\:padding-bottom-0 { padding-bottom: 0; }
  .lg\:padding-bottom-8 { padding-bottom: 8px; }
  .lg\:padding-bottom-12 { padding-bottom: 12px; }
  .lg\:padding-bottom-24 { padding-bottom: 24px; }
  .lg\:padding-bottom-36 { padding-bottom: 36px; }

  .lg\:padding-left-0 { padding-left: 0; }
  .lg\:padding-left-8 { padding-left: 8px; }
  .lg\:padding-left-12 { padding-left: 12px; }
  .lg\:padding-left-24 { padding-left: 24px; }
  .lg\:padding-left-36 { padding-left: 36px; }

  .lg\:padding-right-0 { padding-right: 0; }
  .lg\:padding-right-8 { padding-right: 8px; }
  .lg\:padding-right-12 { padding-right: 12px; }
  .lg\:padding-right-24 { padding-right: 24px; }
  .lg\:padding-right-36 { padding-right: 36px; }

  .lg\:margin-top-0 { margin-top: 0; }
  .lg\:margin-top-8 { margin-top: 8px; }
  .lg\:margin-top-12 { margin-top: 12px; }
  .lg\:margin-top-24 { margin-top: 24px; }
  .lg\:margin-top-36 { margin-top: 36px; }

  .lg\:margin-bottom-0 { margin-bottom: 0; }
  .lg\:margin-bottom-8 { margin-bottom: 8px; }
  .lg\:margin-bottom-12 { margin-bottom: 12px; }
  .lg\:margin-bottom-24 { margin-bottom: 24px; }
  .lg\:margin-bottom-36 { margin-bottom: 36px; }

  .lg\:margin-left-0 { margin-left: 0; }
  .lg\:margin-left-8 { margin-left: 8px; }
  .lg\:margin-left-12 { margin-left: 12px; }
  .lg\:margin-left-24 { margin-left: 24px; }
  .lg\:margin-left-36 { margin-left: 36px; }

  .lg\:margin-right-0 { margin-right: 0; }
  .lg\:margin-right-8 { margin-right: 8px; }
  .lg\:margin-right-12 { margin-right: 12px; }
  .lg\:margin-right-24 { margin-right: 24px; }
  .lg\:margin-right-36 { margin-right: 36px; }
}


/* 在所有裝置下默認顯示 */
.show {
  display: block;
}

/* 在所有裝置下默認隱藏 */
.hide {
  display: none;
}

/* 小型裝置 (手機) - 預設顯示 */
@media (max-width: 767px) {
  .sm-show {
    display: block;
  }
  .sm-hide {
    display: none;
  }
}

/* 中型裝置 (平板) - min-width: 768px */
@media (min-width: 768px) {
  .md-show {
    display: block;
  }
  .md-hide {
    display: none;
  }
}

/* 大型裝置 (桌面) - min-width: 1024px */
@media (min-width: 1024px) {
  .lg-show {
    display: block;
  }
  .lg-hide {
    display: none;
  }
}

/* 特大型裝置 (大型桌面) - min-width: 1280px */
@media (min-width: 1280px) {
  .xl-show {
    display: block;
  }
  .xl-hide {
    display: none;
  }
}