/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
:root {
  --primary: #F2921A;
  --second: #51ffc7;
  /* --primary: #fff; */
}

@font-face {
  font-family: 'HachiMaruPop-Regular';
  src: url(HachiMaruPop-Regular.woff) format('woff');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  /* border: 0; */
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .2s;
  transition: all .2s;
}

html, body {
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

/* 以下開始 */

/* ---------------寬度 -------------- */
.w-80 {
  width: 80%;
}

/* --------------------------------- */

/* ---------------顏色 -------------- */
.c-primary {
  color: var(--primary) !important;
}

.c-second {
  color: var(--second) !important;
}

.bg-second {
  background: var(--second) !important;
}

.table-primary-dark {
  --bs-table-bg: #4979c2;
  --bs-table-striped-bg: #0066ff;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bacbe6;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfd1ec;
  --bs-table-hover-color: #000;
  color: #fff;
  border-color: #bacbe6;
}
.table-blue-light {
  --bs-table-bg: #ebf3ff;
  --bs-table-striped-bg: #0007c6;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #ffffff;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #1700ff;
  --bs-table-hover-color: #000;
  color: #000;
  border-color: #badce3;
}

/* --------------------------------- */
/* ---------------圖片 -------------- */
.object-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------- */
/* ---------------滑動效果 -------------- */

.img-hover {
  overflow: hidden;
}

.img-hover img {
  transform: scale(1, 1);
  transition: all .1s ease-out;
}

.img-hover img:hover {
  transform: scale(1.1, 1.1);
}

.border-hover {
  border: 1px solid #000;
}

.border-hover:hover {
  border: 3px solid rgb(30, 127, 206);
}

/* --------------------------------- */
.c-pointer {
  cursor: pointer;
}

body {
  font-family: '微軟正黑體', sans-serif;
  /* font-family: 'HachiMaruPop-Regular'; */
  font-weight: bold;
}

.topBar {
  /* border-bottom: 2px solid var(--primary); */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
  background-color: #000000b5;
}

.topBar a {
  text-decoration: none;
  color: var(--primary);
  font-size: 1.25rem;
}

.topBar a:hover {
  color: #000000;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 寬高比 */
}

    .video-container.full-height {
        padding-bottom: 100%; /* 1:1 寬高比，適用於全高度影片 */
    }

    .video-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


@media (max-width: 900px) {}

@media (max-width: 768px) {}

@media (max-width: 576px) {}

@media (max-width: 414px) {}

@media (max-width: 320px) {}