@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Color */
/* Breakpoints（對齊 Bootstrap） */
/* Font Family */
/* ========================
🎬 Video Components
======================== */
.bg-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bg-video-wrap > div {
  position: absolute;
  inset: 0;
}
.bg-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-ctrl-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.video-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 9999;
  pointer-events: auto;
}

/* 共用樣式：在此調整按鈕大小與顏色 */
.btn-music {
  font-size: 2rem;
  color: #E0DFC6;
  cursor: pointer;
  background: none;
  border: none;
  padding: 1.5vw;
  line-height: 1;
}

/* 顯示邏輯（勿改）*/
.btn-sound {
  display: none;
}

.video-wrap {
  display: flex;
  width: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
}
.video-wrap > div {
  width: 100%;
  font-size: 0;
  position: relative;
}
.video-wrap > div video {
  display: block;
  width: 100%;
}
.video-wrap .video-controls {
  width: 100%;
}

.youtube-embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1680/954;
  border: none;
}

.youtube-thumb {
  overflow: hidden;
  padding: 5% 10%;
}
.youtube-thumb a {
  display: block;
}
.youtube-thumb a .Img .img-ratio {
  padding-top: 56%;
}
.youtube-thumb a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 5rem;
  transition: all 0.5s;
}
.youtube-thumb a:hover i {
  font-size: 6rem;
  transition: all 0.5s;
}/*# sourceMappingURL=video.css.map */