@charset "utf-8";

/***************************************************/
/* video slider start */
/***************************************************/

/* 父容器設置 */
.video-background-container {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: auto;
}

/* 背景圖片設置 */
.background-image {
  width: 100%;
  height: auto;
  display: block;
}

/* 視頻覆蓋層樣式 */
.video-overlay {
  position: absolute;
  width: 60%;
  /* 視頻寬度占父容器的百分比，可根據需要調整 */
  padding-top: 16.875%;
  /* 按 16:9 比例設置高度 (9 / 16 = 0.5625) */
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.video-overlay3 {
  position: absolute;
  width: 83%;
  /* 視頻寬度占父容器的百分比，可根據需要調整 */
  padding-top: 16.875%;
  /* 按 16:9 比例設置高度 (9 / 16 = 0.5625) */
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.video-overlay4 {
  position: absolute;
  width: 36%;
  /* 視頻寬度占父容器的百分比，可根據需要調整 */
  padding-top: 16.875%;
  /* 按 16:9 比例設置高度 (9 / 16 = 0.5625) */
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.video-overlay5 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.b4-overlay {
  position: absolute;
  width: 26%;
  /* 視頻寬度占父容器的百分比，可根據需要調整 */
  padding-top: 16.875%;
  /* 按 16:9 比例設置高度 (9 / 16 = 0.5625) */
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.b4_a {
  top: 55.2%;
  left: 20%;
}

.b4_b {
  top: 55.2%;
  left: 50%;
}

.b4_c {
  top: 55.2%;
  left: 79.5%;
}

.v1-layer1 {
  top: 70.2%;
  left: 64%;
  z-index: 1;
}

.v1-layer2 {
  top: 45%;
  left: 50%;
  z-index: 2;
  width: 100%;
}

.v2-layer1 {
  top: 43.2%;
  left: 50%;
  z-index: 1;
}

.v2-layer2 {
  top: 42%;
  left: 50%;
  z-index: 2;
}

.video1 {
  top: 62.2%;
  left: 75%;
}

.video2 {
  top: 70.2%;
  left: 75%;
}

.video3 {
  top: 62.2%;
  left: 50%;
}

.video4 {
  top: 48.2%;
  left: 76%;
}

.video5 {
  top: 0;
  left: 1px;
}

/* 視頻元素樣式 */
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/***************************************************/
/* video slider end */
/***************************************************/