html {
  scroll-behavior: smooth;
}
/* ////////////////// 區塊設定共用 //////////////////  */
#cover,
#section04 {
  position: relative;
  overflow: hidden;
}

/* ////////////////// 共用 //////////////////  */
#section04 {
  position: relative;
  width: 100%;
  height: 80dvh;
  color: #fff;
  text-align: center;
}

/*///////////// section背景 /////////////*/

#section04 {
  background: url(../images/bg_sec02.webp);
  background-position: center top;
  background-size: 100% auto;
  background-size: 100% 100%;
}

/* //////////////////////////////////// 各專區 //////////////////////////////////// */
/* //////////////////////////////////// 各專區 //////////////////////////////////// */
/* //////////////////////////////////// 各專區 //////////////////////////////////// */
/* //////////////////////////////////// 各專區 //////////////////////////////////// */
/* //////////////////////////////////// 各專區 //////////////////////////////////// */

/* ////////////////// #section04 //////////////////  */

#section04 .sec_content {
  justify-content: flex-start;
}
.sec_title_group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tt_s {
  margin: 0rem !important;
  width: 35%;
}

/* --- sec04 外層 --- */
.sec04 {
  position: relative;
  width: 100%;
  margin: auto;
  background-repeat: no-repeat;
  pointer-events: none;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -3rem;
}

/* --- 文字元素位置 --- */
.sec04_tt {
  position: absolute;
  width: 30%;
  bottom: 12%;
}

.sec04_ch {
  position: absolute;
  width: 34%;
  right: 8%;
  /* top: -4%; */
}

/* --- 背景底板（比影片大）--- */
.sec04_vedio_wrap {
  position: relative;
  width: 80%;
  aspect-ratio: 16.1 / 9;
  background: url(../images/new/sec01_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* margin-right: 5%; */
  /* margin-top: 1rem; */
  margin-top: 1rem;
  /* pointer-events: none; */
}

/* --- 影片位置（比背景小一圈）--- */
.sec04_vedio {
  position: absolute;
  /* 概念：扣掉 padding 後塞進去 → 影片小於背景 */
  inset: 5%;
}

/* --- 影片本體 --- */
.sec04_vedio iframe {
  position: relative;
  width: 65%;
  height: 65%;
  top: 14%;
  pointer-events: none;
}

.sec04_vedio video {
  position: relative;
  width: 65%;
  height: 65%;
  top: 14%;
  pointer-events: none;
}

.video_map {
  position: relative;
  width: 65%;
  height: 65%;
  top: 14%;
  pointer-events: none;
}

.swiper {
  overflow: visible !important;
}

/* 左右箭頭共同設定 */
.swiper-button-prev.sec04-prev,
.swiper-button-next.sec04-next,
.swiper-button-prev.sec05-prev,
.swiper-button-next.sec05-next {
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 左箭頭 */
.swiper-button-prev.sec04-prev {
  background-image: url('../images/new/btn-arrow_l.png');
  top: 40%;
  left: 10%;
  animation: btn_m_swiper 0.8s infinite alternate;
  filter: drop-shadow(0 0 15px rgba(255, 200, 50, 0.3)); /* 發光效果 */
}

/* 右箭頭 */
.swiper-button-next.sec04-next {
  background-image: url('../images/new/btn-arrow_r.png');
  top: 40%;
  right: 10%;
  animation: btn_m_swiper 0.8s infinite alternate;
  filter: drop-shadow(0 0 15px rgba(255, 200, 50, 0.3)); /* 發光效果 */
}

/* 左箭頭 */
.swiper-button-prev.sec05-prev {
  background-image: url('../images/new/btn-arrow_l.png');
  top: 55%;
  left: 10%;
  animation: btn_m_swiper 0.8s infinite alternate;
  filter: drop-shadow(0 0 15px rgba(255, 200, 50, 0.3)); /* 發光效果 */
}

/* 右箭頭 */
.swiper-button-next.sec05-next {
  background-image: url('../images/new/btn-arrow_r.png');
  top: 55%;
  right: 13%;
  animation: btn_m_swiper 0.8s infinite alternate;
  filter: drop-shadow(0 0 15px rgba(255, 200, 50, 0.3)); /* 發光效果 */
}
@keyframes btn_m_swiper {
  from {
    transform: scale(1);
    filter: drop-shadow(0 0 15px rgba(255, 200, 50, 0.3)); /* 發光效果 */
  }
  to {
    transform: scale(1.2);
    filter: drop-shadow(0 0 15px rgba(255, 200, 50, 0.8)); /* 發光效果 */
  }
}

/* hover 放大一點點 */
.swiper-button-prev.sec04-prev:hover,
.swiper-button-next.sec04-next:hover,
.swiper-button-prev.sec05-prev:hover,
.swiper-button-next.sec05-next:hover {
  scale: 1.05; /* 建議 1.05~1.1 */
}

/* 點下去縮小 */
.swiper-button-prev.sec05-prev:active,
.swiper-button-next.sec05-next:active {
  scale: 0.9;
}

/* 隱藏 Swiper 預設箭頭 */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

@media screen and (max-width: 1440px) {
  /* ////////////////// 00_cover首頁 //////////////////  */

  #section04 {
    background: url(../images/bg_sec02.webp);
    background-position: center top;
    background-size: 120% 100%;
  }

  .sec04_ch {
    position: absolute;
    width: 40%;
    right: 5%;
    /* top: -4%; */
  }
}

@media screen and (max-width: 1024px) {
  /*///////////// section背景 /////////////*/
  .bg-wrap {
    background: url(../images/bg_sec02_xs.webp) no-repeat center top;
    background-size: 100% 100%;
    background-position-x: 60%;
  }

  #section04 {
    height: 100% !important;
    background: transparent;
  }
  #section04 {
    background: url(../images/bg_sec02_xs.webp);
    background-position: center top;
    background-size: 100% 100%;
  }

  #section04 {
    height: 100% !important;
    padding: 2rem 0;
  }

  #section04 .tt_s {
    margin-bottom: 3rem !important;
    width: 80%;
  }

  .tt_s {
    margin-bottom: -0rem !important;
    width: 80%;
  }
}

@media screen and (max-width: 640px) {
  #section04 {
    background: url(../images/bg_sec02_xs.webp);
    background-position: center top;
    background-size: 130% 100%;
    background-position-x: 60%;
  }

  .monster {
    position: relative;
    width: 30%;
    padding: 0.5rem;
    overflow: hidden;
  }

  .swiper-button-prev.sec04-prev,
  .swiper-button-next.sec04-next {
    width: 40px;
    height: 40px;
  }

  .swiper-button-next.sec04-next {
    background-image: url('../images/new/btn-arrow_r.png');
    top: 40%;
    right: 0%;
  }

  .swiper-button-prev.sec04-prev {
    background-image: url('../images/new/btn-arrow_l.png');
    top: 40%;
    left: 0%;
  }

  .sec04_tt {
    position: absolute;
    width: 60%;
    bottom: 2%;
  }

  .sec05_tt {
    position: absolute;
    width: 70%;
    bottom: -15%;
    left: 20%;
  }

  .sec05_vedio_wrap {
    width: 90%;
    margin-left: 0%;
    margin-top: 0%;
    /* pointer-events: none; */
  }

  .sec04_vedio_wrap {
    position: relative;
    width: 90%;
    margin-right: 5%;
    margin-top: 0rem;
    /* pointer-events: none; */
  }

  .sec04_ch {
    position: absolute;
    width: 50%;
    right: -5%;
    /* top: -4%; */
    overflow: hidden;
  }

  #newButton a {
    display: block;
    width: 100px;
    height: auto;
    transition:
      transform 0.3s ease,
      filter 0.3s ease;
  }
}

/* 手機或平板橫版時才生效 */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  #cover,
  #section04 {
    height: auto;
    min-height: 100vh;
  }
}