@charset "utf-8";

/*---- common ----*/
@import url("https://ids.iwplay.com.tw/includ/footer/footer.css");

*,
a,
span {
  font-family:
    "Noto Sans TC",
    Arial,
    Helvetica,
    微軟正黑體,
    Microsoft JhengHei,
    sans-serif;
}

a {
  text-decoration: none !important;
}

/*====卷軸===*/
/* 細捲軸開始 */
::-webkit-scrollbar {
  height: 5px;
  overflow: visible;
  width: 5px;
  display: none;
}
.modal ::-webkit-scrollbar,
.popup_con ::-webkit-scrollbar,
.list_box ::-webkit-scrollbar {
  display: block;
}

.modal ::-webkit-scrollbar-thumb {
  background-color: #5c442b;
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0 0 0 0px;
  min-height: 28px;
  padding: 100px 0 0;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0),
    inset 0 -1px 0 rgba(0, 0, 0, 0);
}

.modal ::-webkit-scrollbar-thumb:hover {
  background-color: #a77340;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);
}

.modal ::-webkit-scrollbar-thumb:active {
  background-color: #5510d4;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track {
  background-color: #000000;
}

/* 細捲軸結束 */

html,
body {
  padding: 0;
  margin: 0;
}

section {
  width: 100%;
  display: inline-block;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}

.display_none {
  display: none;
}

/*禁止滑動*/
.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/*--大背景--*/
.wrapper {
  width: 100%;
  height: auto;
  padding-bottom: 0%;
  overflow: hidden;

  background-color: #19181e;
}

.btn-hover {
  transform: scale(1);
  transition: 0.3s;
  cursor: pointer;
}
.btn-hover:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

.down_cover {
  position: absolute;
  width: 100%;
  left: 0;
  /* opacity: 0.5; */
  z-index: 68;
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            浮水印
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.fixed_nav_pc {
  position: fixed;
  width: 13%;
  height: auto;
  padding-bottom: 33%;
  top: 32%;
  right: 0;

  background-color: rgba(226, 21, 21, 0);
  /*顏色標記*/

  z-index: 80;
  display: block;

  background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/flex/flex_pc_bg.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}

/*--按鈕--*/
.fixed_nav_pc .btn_box {
  position: absolute;
  width: 52%;
  height: auto;
  padding-bottom: 64%;
  top: 41%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;

  background-color: rgba(226, 21, 21, 0);
  /*顏色標記*/
}

.fixed_nav_pc .btn_box .events_btn {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 0%;
  top: 0%;
  left: 0%;
  z-index: 3;
  cursor: pointer;
}

.fixed_nav_pc .btn_box .home_btn {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 0%;
  top: 10%;
  left: 0%;
  z-index: 3;
  cursor: pointer;
}

.fixed_nav_pc .btn_box .download_btn {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 0%;
  top: 40%;
  left: 0%;
  z-index: 3;
  cursor: pointer;
}

.fixed_nav_pc .btn_box .go_fb_btn {
  position: absolute;
  width: 100%;
  height: auto;
  padding-bottom: 0%;
  top: 70%;
  left: 0%;
  z-index: 3;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .fixed_nav_pc {
    display: none;
  }
}

/* 繩結 */
.fixed_nav_pc .knot {
  position: absolute;
  width: 30%;
  height: auto;
  padding-bottom: 0%;
  top: 109%;
  left: 35.5%;
  background-color: rgba(221, 33, 158, 0);
  /*顏色標記*/
  z-index: 70;
}
.fixed_nav_pc .knot img {
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .fixed_nav_pc {
    display: none;
  }
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            浮水印_tb_mob
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.noke_flex_sp {
  display: none;
}

@media (max-width: 767px) {
  .noke_flex_sp {
    position: fixed;
    width: 100%;
    height: auto;
    padding-bottom: 17.5%;
    bottom: -26%;
    left: 0%;
    z-index: 99;
    /*overflow: hidden;*/
    background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260211/image/flex/ezgif.com-webp-maker-m.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgba(161, 127, 255, 0);
    /*顏色標記*/
    cursor: pointer;
    transition: all 0.5s ease;
    display: none;
    /*左邊*/
  }

  /* .noke_flex_sp.scroll {
    bottom: -2.6%;
  } */

  /*寶箱*/
  .noke_flex_sp .gift_item {
    position: absolute;
    width: 40%;
    height: auto;
    padding-bottom: 0%;
    /* top: -81%; */
    bottom: 0%;
    right: -5%;
    z-index: 20;
    pointer-events: none;
  }

  /*按鈕*/
  .noke_flex_sp .btn_box {
    position: absolute;
    width: 70%;
    height: 36%;
    top: 59%;
    left: 3%;
    background-color: rgba(224, 75, 167, 0);
    /*顏色標記*/
    /* display: flex; */

    z-index: 22;
  }
  .noke_flex_sp .btn_box a {
    padding: 1%;
  }

  .noke_flex_sp {
    width: 100%;
    padding-bottom: 29%;
    background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/flex/flex_m_bg.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    bottom: 0;
    transform: translateY(120%);
  }

  .noke_flex_sp.scroll {
    /* bottom: 0%; */
    transform: translateY(0);
  }

  .noke_flex_sp .download_btn {
    position: absolute;
    width: 40%;
    padding-bottom: 0%;
    top: 10%;
    left: 4%;
  }

  .noke_flex_sp .go_fb_btn {
    position: absolute;
    width: 40%;
    padding-bottom: 0%;
    top: 10%;
    left: 50%;
  }
}

.big_title {
  position: absolute;
  width: 40%;
  height: auto;
  padding-bottom: 0%;
  top: 0;
  left: 31.5%;

  z-index: 5;
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            top_zone區域
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.top_zone {
  width: 100%;
  height: auto;
  background: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/kv/kv_bg1.webp)
    center bottom no-repeat;
  background-size: cover;
  position: relative;
  /*顏色標記*/
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            主視覺區域
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
/* KV --------------------------------------------------------------------*/
.kv_zone {
  width: 100%;
  height: 49.79vw;
  /* background: url(https://images1.iwplay.com.tw/image/pwm/events/20260514/image/kv/kv_bg.webp)
    center bottom no-repeat;
  background-size: cover; */
  position: relative;
  animation: kv_ani 1.1s forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#scenekv,
#scenekv .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
}
#scenekv .layer img {
  object-fit: cover;
  display: block;
  width: 24%;
  height: auto;
}
#scenekv .item5 img {
  position: absolute;
  top: -4%;
  left: 50%;
}
#scenekv .item4 img {
  width: 16%;
  position: absolute;
  top: 25%;
  left: 55%;
}
#scenekv .item3 img {
  width: 19%;
  position: absolute;
  top: 30%;
  left: 43%;
}
#scenekv .item2 img {
  width: 24%;
  position: absolute;
  top: 46%;
  left: 31%;
}
#scenekv .item1 img {
  width: 22%;
  position: absolute;
  top: 42%;
  left: 51%;
}
.kv_zone .down_cover {
  bottom: -2.8%;
}

.kv_zone .big_logo {
  position: absolute;
  left: 4.08vw;
  top: 3.56vw;
  width: 11.96vw;
  /* z-index: 10; */
}
.kv_zone .big_logo img {
  width: 100%;
}

.kv_zone .big_title {
  position: absolute;
  width: 17%;
  top: 9%;
  left: 70%;
  pointer-events: none;
  /* filter: drop-shadow(6px 4px 2px rgba(0, 0, 0, 0.4)); */
}
.kv_zone .big_title .kv_title {
  width: 100%;
  opacity: 0;
  animation: title 1s forwards 0.1s ease-in-out;
}
.kv_zone .big_title .kv_title_light {
  position: absolute;
  width: 100%;
  left: 0%;
  /* mix-blend-mode: screen; */
}
.kv_zone .tt_left {
  position: absolute;
  width: 32vw;
  bottom: 0;
  left: 4vw;
  pointer-events: none;
  z-index: 10;
}
.kv_zone .go_event1_btn {
  cursor: pointer;
  position: absolute;
  left: 39.2%;
  width: 23vw;
  bottom: 6.5vw;
  opacity: 1;
  animation: show_btn 1s forwards 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s;
  animation-delay: 0.2s;
}
.kv_zone .go_event1_btn img {
  width: 100%;
}
.kv_zone .go_event1_btn:hover {
  filter: brightness(1.3);
  /* bottom: 9vw; */
}
.kv_zone .sub_tt {
  position: absolute;
  left: 41.8%;
  width: 18vw;
  height: auto;
  bottom: 5.5vw;
  pointer-events: none;
  animation: show_btn 1s forwards 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s;
  animation-delay: 0.2s;
}
.kv_zone .video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 1;
  /* transform: rotate(0.5turn);
  filter: hue-rotate(90deg) brightness(1.2) contrast(1.5); */
}
.kv_zone .video-bg img {
  width: 100vw;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 閃電特效容器 (嘗試不同混合方案解決黑邊) */
.kv_zone .lightning_wrap {
  position: absolute;
  width: 11.5vw;
  height: 12vw;
  top: 3.7vw;
  left: 13.2vw;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen !important; /* 在容器層級套用濾色 */
}

.kv_zone .lightning_wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateZ(0);
  will-change: opacity;
}

/*--↑主視覺區域↑--*/

@media (max-width: 768px) {
  .top_zone {
    background: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/kv/kv_bg_m.webp)
      center top no-repeat;
    background-size: cover;
  }
  #scenekv {
    display: none;
  }
  .kv_zone {
    height: 178vw;
    /* background: url(https://images1.iwplay.com.tw/image/pwm/events/20260514/image/kv/kv_bg_m.webp)
      center top no-repeat; */
    background-size: cover;
  }
  .kv_zone .big_logo {
    width: 23vw;
    top: 4vw;
    left: 4%;
    /* margin: 0 auto;  */
  }
  .kv_zone .big_title {
    position: absolute;
    width: 94%;
    top: 56%;
    left: 2%;
  }
  .kv_zone .tt_left {
    width: 35vw;
    bottom: 90vw;
    left: 7%;
  }
  .kv_zone .go_event1_btn {
    width: 66vw;
    bottom: 21vw;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .kv_zone .sub_tt {
    width: 44vw;
    bottom: 19vw;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .kv_zone .go_event1_btn:hover {
    /* bottom: 17vw; */
  }
  .kv_zone .down_cover {
    bottom: -1.9%;
  }
  /* 手機版隱藏閃電效果 */
  .kv_zone .lightning_wrap {
    display: none;
  }
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            登入區塊_區域
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.events_2 {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 45.5%;
  /* background-color: rgb(1, 31, 49);

  background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260514/image/event2/event2_bg.webp);
  background-repeat: no-repeat;
  background-size: 100%; */
  overflow: hidden;
}

.events_2 .down_cover {
  bottom: -1.9%;
}

/*中央*/
.events_2 .main_center {
  position: absolute;
  width: 72vw;
  height: 100%;
  padding-bottom: 0%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 60;
  background-color: rgba(226, 21, 21, 0);
  /*顏色標記*/
}

/* 人物區 */
.peo {
  position: absolute;
  width: 100%;
  /* padding-bottom: 50%; */
  bottom: -1%;
  left: 25%;
  transform: translate(-50%, -50%);
  z-index: 50;
  pointer-events: none;
}

.peo img:nth-child(1) {
  position: absolute;
  width: 70%; /* 恢復到您覺得適合的大小 */
  height: auto; /* 強制高度自動，防止拉伸 */
  object-fit: contain;
  left: 0;
  bottom: 0;
  animation: float 1.3s alternate-reverse infinite
    cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.peo img:nth-child(2) {
  position: absolute;
  width: 37%;
  height: auto;
  object-fit: contain;
  right: 0;
  bottom: 0;
  animation: float 1.6s alternate-reverse infinite
    cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.events_2 .birds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
}
.events_2 .bird {
  position: absolute;
  height: auto;
  width: 25vw;
  right: -15vw;
  top: 15%;
  animation: bird_fly 3s alternate infinite ease-in-out;
}

/*登入區*/
.events_2 .main_center .frame_out {
  position: absolute;
  width: 49vw;
  height: auto;
  padding-bottom: 36%;
  top: 29%;
  left: 17%;
  z-index: 63;

  background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/event2/out_frame_pc.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}

.events_2 .main_center .frame_out .log_befor,
.events_2 .main_center .frame_out .log_after {
  position: absolute;
  width: 40%;
  height: auto;
  padding-bottom: 30.5%;
  top: 15%;
  left: 7%;
  z-index: 5;

  background-color: #7be20600;
}

.events_2 .main_center .frame_out .log_title {
  position: absolute;
  width: 61%;
  right: 22%;
  top: 11%;
}
.events_2 .main_center .frame_out .log_after .log_title {
  position: absolute;
  width: 43%;
  right: 32%;
  top: 11%;
}

.events_2 .gift_box {
  position: absolute;
  width: 92%;
  height: auto;
  padding-bottom: 0%;
  top: -8.5%;
  left: 40%;
  z-index: 5;

  background-color: #0665e200;
}

.events_2 .chara {
  position: absolute;
  width: 40%;
  height: auto;
  padding-bottom: 0%;
  top: 16.5%;
  left: 0%;
  z-index: 65;

  background-color: #0665e200;
}
.events_2 .text_gold {
  color: #9e6227;
  /* font-weight: bold; */
}

.events_2 .log_befor .lv2_word_2_1,
.events_2 .log_after .lv2_word_2_2 {
  position: absolute;
  width: 90%;
  height: auto;
  padding-bottom: 40%;
  top: 33%;
  background-color: #44338300;
  right: 8%;
  z-index: 2;
}

.events_2 .log_befor .lv2_word_2_1 p,
.events_2 .log_after .lv2_word_2_2 p {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 0.9vw;
  line-height: 153%;
  margin-block-start: 0em;
  margin-block-end: 0em;
  color: #000000;
  font-weight: 500;
  margin-top: 0.5%;
  text-align: center;

  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.events_2 .frame_cover {
  position: absolute;
  left: 50%;
  width: 100%;
  height: auto;
}
.events_2 .frame_cover.top {
  top: -3%;
  transform: translateX(-50%);
}
.events_2 .frame_cover.bottom {
  bottom: -11%;
  transform: translateX(-50%) scaleY(-1);
}

.events_2 .log_befor .button_2_1,
.events_2 .log_after .button_2_2 {
  position: absolute;
  width: 75%;
  height: auto;
  top: 99%;
  right: 16%;
  z-index: 65;
}

.events_2 .log_befor .button_2_1 img {
  transform: scale(1);
  transition: 0.3s;
}

.events_2 .log_befor .button_2_1 img:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

.events_2 .main_center .frame_out .log_after {
  /* background-color: #ffc40069; */
}

.events_2 .log_after .button_2_2 img {
  transform: scale(1);
  transition: 0.3s;
}

.events_2 .log_after .button_2_2 img:hover {
  transform: scale(1.1);
  transition: 0.3s;
}

.events_2 .notic_btn {
  position: absolute;
  width: 23%;
  height: auto;
  top: 89%;
  left: 38.5%;
  z-index: 2;
}

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

@media (max-width: 768px) {
  .events_2 {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 226%;
    /* background: url(https://images1.iwplay.com.tw/image/pwm/events/20260514/image/event2/event2_bg_m.webp)
      center top no-repeat; */
    background-size: 100%;
    background-color: #44338300;
  }
  .events_2 .main_center {
    width: 100%;
  }
  .peo {
    display: none;
  }
  .events_2 .down_cover {
    bottom: -1.4%;
  }

  .events_2 .big_title {
    width: 83%;
    left: 0;
    right: 0;
    top: -1vw;
    margin: 0 auto;
  }

  /*登入區*/
  .events_2 .main_center .frame_out {
    position: absolute;
    width: 90%;
    height: auto;
    padding-bottom: 168%;
    top: 18%;
    left: 49%;
    transform: translateX(-50%);
    z-index: 63;

    background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/event2/out_frame_mo.webp);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .events_2 .main_center .frame_out .log_title {
    width: 66%;
    right: 20%;
  }

  .events_2 .main_center .frame_out .log_befor,
  .events_2 .main_center .frame_out .log_after {
    width: 76%;
    padding-bottom: 62%;
    top: 48%;
    left: 15%;
  }
  .events_2 .log_befor .button_2_1,
  .events_2 .log_after .button_2_2 {
    top: 103%;
    right: 15%;
  }
  .events_2 .log_befor .lv2_word_2_1 p,
  .events_2 .log_after .lv2_word_2_2 p {
    font-size: 3vw;
  }
  .events_2 .log_befor .lv2_word_2_1,
  .events_2 .log_after .lv2_word_2_2 {
    padding-bottom: 43%;
  }

  .events_2 .gift_box {
    width: 165%;
    top: -3%;
    left: -4%;
  }
  .events_2 .chara {
    width: 100%;
    top: 50%;
    left: -41%;
  }
  .events_2 .notic_btn {
    position: absolute;
    width: 58%;
    height: auto;
    top: 94%;
    left: 21.5%;
    z-index: 2;
  }
}
/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            main_zone區域
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.main_zone {
  background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/event5/main_zone_bg.webp);
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

/* 視差滾動裝飾 */
.parallax_decorations {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none; /* 裝飾圖層不阻擋下方點擊 */
  z-index: 7;
  overflow: hidden;
}
.parallax_item {
  position: absolute;
  pointer-events: auto; /* 如果需要 hover 則開啟 */
}
.parallax_item.robot {
  width: 25%;
  top: -13%;
  right: 2%;
}
.parallax_item.phoenix {
  width: 35%;
  top: 91%;
  right: -4%;
  z-index: 75; /* 飛鳥圖層高一點 */
}
.parallax_item.plane {
  width: 32%;
  top: -31%;
  left: -5%;
}
.parallax_item img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 768px) {
  .parallax_item.robot {
    width: 35%;
    top: 2%;
    right: -5%;
  }
  .parallax_item.phoenix {
    width: 45%;
    bottom: 5%;
    right: -10%;
  }
  .parallax_item.plane {
    width: 40%;
    top: 35%;
    left: -10%;
  }
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            135達成_區域
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.events_3 {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 55%;
  /* background-color: rgba(123, 182, 13, 0);

  background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260514/image/event3/event3_bg.webp);
  background-repeat: no-repeat;
  background-size: 100%; */
}

.events_3 .down_cover {
  bottom: -1%;
}

/*中央*/
.events_3 .main_center {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-bottom: 0%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 60;
  background-color: rgba(226, 21, 21, 0);
  /*顏色標記*/
}
.events_3 .main_center .big_title {
  width: 40%;
  left: 30.5%;
  top: 3%;
}
/*main_center_box flex設定*/
.events_3 .main_center .main_center_box {
  position: absolute;
  width: 100%;
  height: auto;
  top: 25.5%;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  /* gap: 2%; */
}

/*大標*/

/*文字*/
.events_3 .s_tt {
  position: absolute;
  width: 38.5%;
  height: auto;
  padding-bottom: 0%;
  top: 20%;
  left: 30.5%;
  z-index: 2;
}

.events_3 .s_tt p {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 0.8vw;
  line-height: 153%;
  margin-block-start: 0em;
  margin-block-end: 0em;
  color: #f6e9ce;
  font-weight: 500;
  margin-top: 0.5%;
  text-align: left;
  /*text-shadow: #ffffff 0.1em 0.1em 0.4em, #ffffff 0.1em 0.1em 0.4em;*/
}

.events_3 .s_tt p span {
  color: #0d1c73;
}

/*--SNS--*/
.events_3 .sns_box {
  position: relative;
  width: 14%;
  height: auto;
  padding-bottom: 4%;
  top: auto;
  left: auto;

  z-index: 5;

  background-color: rgba(122, 139, 46, 0);
  /*顏色標記*/
}

.events_3 .sns_box .btn {
  position: absolute;
  width: 26%;
  height: auto;
  padding-bottom: 0%;
  /* top: -5%; */
  z-index: 3;
  cursor: pointer;
  padding: 0;
}

.events_3 .sns_box .line_btn {
  left: 0%;
}

.events_3 .sns_box .fb_btn {
  left: 34%;
}

.events_3 .sns_box .copy_btn {
  left: 68%;
}

.events_3 .invite {
  position: relative;
  width: 17%;
  height: auto;
  padding-bottom: 0%;
  top: auto;
  left: auto;
  z-index: 5;
  background-color: rgba(122, 139, 46, 0);
  margin-left: 1%;
}

.events_3 .invite p {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 1.3vw;
  line-height: 153%;
  margin-block-start: 0em;
  margin-block-end: 0em;
  color: #472d20;
  font-weight: bold;
  margin-top: 0.5%;
  text-align: center;
  letter-spacing: 0.08vw;
}

.events_3 .invite span {
  font-size: 2vw;
  color: #d96848;
  font-weight: 700;
}

.events_3 .join_box {
  position: absolute;
  width: 100%;
  height: auto;
  /* padding-bottom: 39%; */
  top: 26%;
  left: 0%;
  z-index: 66;
  background-color: rgba(21, 86, 226, 0);
  pointer-events: none;
}

.events_3 .join_gift {
  position: absolute;
  padding-bottom: 39%;
  width: 60%;
  left: 40%;
  background-color: rgba(226, 21, 182, 0);
  /*顏色標記*/
}
.events_3 .join_card_box {
  display: flex;
  justify-content: center;
  /* gap: 1%; */
  align-items: center;
  width: 90%;
  margin: 1% auto 0;
  position: relative;
  pointer-events: auto;
}

.events_3 .pp_card {
  position: relative;
  width: 15%;
  height: auto;
  z-index: 3;
  display: block;
  transition: transform 0.3s ease;
  animation: swing infinite 12s ease-in-out alternate;
  transform-origin: top center;
}

/* .events_3 .pp_card:hover {
  transform: translateY(-12px);
  cursor: pointer;
} */

.events_3 .pp_card img {
  width: 100%;
  display: block;
}

.events_3 .join_card_box .pp_card:nth-child(2) {
  animation-delay: 0.3s;
}
.events_3 .join_card_box .pp_card:nth-child(3) {
  animation-delay: 0.5s;
}
.events_3 .join_card_box .pp_card:nth-child(4) {
  animation-delay: 0.7s;
}
.events_3 .join_card_box .pp_card:nth-child(5) {
  animation-delay: 0.3s;
}

.events_3 .event3_subtt {
  position: absolute;
  width: 54%;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 77;
}

/*雙按鈕*/
.events_3 .gn_btn_box {
  position: absolute;
  /* width: 34%; */
  width: 40vw;
  min-width: 280px;
  height: auto;
  top: 86%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  justify-content: center;
  background-color: rgba(122, 139, 46, 0);
  /*顏色標記*/
  gap: 9%;
}

.events_3 .gn_btn_box .gift_history_btn {
  /* position: absolute; */
  width: 40%;
  height: auto;
  padding-bottom: 0%;
  /* top: 50%;
    left: 26%; */
  cursor: pointer;

  z-index: 5;
}
.events_3 .gn_btn_box .notic_btn {
  width: 40%;
  height: auto;
  cursor: pointer;
  z-index: 5;
}

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

@media (max-width: 768px) {
  .events_3 {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 303%;
  }
  .events_3 .down_cover {
    bottom: 0;
  }
  .events_3 .main_center .big_title {
    position: absolute;
    width: 83%;
    height: auto;
    padding-bottom: 0%;
    top: -3%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 5;
  }

  .events_3 .main_center .main_center_box {
    position: static;
    width: 100%;
    height: auto;
  }
  .events_3 .sns_box {
    position: absolute;
    width: 39%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 16%;
  }
  .events_3 .sns_box .btn {
    width: 23%;
  }
  .events_3 .sns_box .line_btn {
    left: 0%;
  }
  .events_3 .sns_box .fb_btn {
    left: 38%;
  }
  .events_3 .sns_box .copy_btn {
    left: 77%;
  }
  .events_3 .invite {
    position: absolute;
    width: 52%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 21%;
  }

  .events_3 .invite p {
    font-size: 3.5vw;
  }
  .events_3 .invite span {
    font-size: 6vw;
  }

  .events_3 .join_box {
    width: 100vw;
    top: 13%;
    padding-bottom: 0;
    left: 0;
    z-index: 2;
  }

  .events_3 .join_gift .pp_10_box {
    background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260211/image/event3/pp_10_bg_m.webp);
    width: 94vw;
    left: -59%;
    top: 365%;
    padding-bottom: 167%;
  }
  .events_3 .pp_10_box .pp_btn {
    width: 9%;
    top: 62%;
  }

  .events_3 .join_card_box {
    width: 85vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0%;
    padding-bottom: 0;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
  }

  .events_3 .pp_card {
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 1%;
    animation: swing1 infinite 12s ease-in-out alternate;
    transform-origin: top center;
  }

  .events_3 .event3_subtt {
    width: 77%;
    bottom: 4%;
  }

  .events_3 .gn_btn_box {
    position: absolute;
    width: 100%;
    height: auto;
    padding-bottom: 9%;
    top: 88%;
    left: 50%;
    z-index: 2;
  }
  .events_3 .gn_btn_box .gift_history_btn {
    position: absolute;
    width: 33%;
    height: auto;
    padding-bottom: 0%;
    top: 0;
    left: 51.5%;
    cursor: pointer;
    z-index: 2;
  }
  .events_3 .gn_btn_box .notic_btn {
    position: absolute;
    width: 33%;
    height: auto;
    padding-bottom: 0%;
    top: 0;
    left: 15.5%;
    cursor: pointer;
    z-index: 2;
  }
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            商店圖_區域
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.events_4 {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 50%;
  background-color: rgba(13, 182, 154, 0);

  background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/event4/event4_bg.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}
.events_4 .peo2 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}
.events_4 .peo2 img {
  position: absolute;
  height: auto;
}
/* event4_peo1.webp (右邊老虎) */
.events_4 .peo2 img:nth-child(1) {
  right: 0%;
  bottom: -2%;
  width: 100%;
  animation: float 2.1s alternate-reverse infinite
    cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
/* event4_peo2.webp (左邊女孩) */
.events_4 .peo2 img:nth-child(2) {
  left: 0%;
  bottom: 0%;
  width: 100%;
  animation: float 1.3s alternate-reverse infinite
    cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
/* cloude_m (手機版雲朵) */
.events_4 .peo2 .cloude_m {
  display: none;
}

@media screen and (max-width: 768px) {
  .events_4 .peo2 img:nth-child(1) {
    right: -9%;
    bottom: -2%;
    width: 125%;
  }
  .events_4 .peo2 img:nth-child(2) {
    display: none;
  }
  .events_4 .peo2 .cloude_m {
    display: block;
    left: 0;
    bottom: -2%;
    width: 100%;
    animation: float 1.9s alternate-reverse infinite
      cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
}

/*中央*/
.events_4 .main_center {
  position: absolute;
  width: 72vw;
  height: auto;
  padding-bottom: 0%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 60;
  background-color: rgba(226, 21, 21, 0);
  /*顏色標記*/
}

.events_4 .main_center .big_title {
  position: absolute;
  width: 45%;
  height: auto;
  padding-bottom: 0%;
  top: 6%;
  left: 28%;

  z-index: 5;
}

/*商店圖*/

.events_4 .gallery {
  position: absolute;
  /* margin: 0 auto; */
  width: 70vw;
  height: auto;
  padding-bottom: 2%;
  top: 26%;
  left: 1%;
  z-index: 6;
  overflow: hidden;
}

.events_4 .gallery .video_box {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 39.25%;
}

.events_4 .gallery .video_box video {
  position: absolute;
  width: 70%;
  height: 100%;
  top: 5%;
  left: 15%;
  object-fit: cover;
}

.events_4 .gallery .carousel {
  position: relative;
  width: 93vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 2.6vw 0;
}

.events_4 .gallery .carousel .swiper-slide img {
  width: 100%;
  filter: drop-shadow(0 0 0.1rem rgba(0, 0, 0, 0.6));
}

.events_4 .gallery .carousel .swiper-slide::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgb(0, 0, 0),
    rgb(0, 0, 0),
    rgba(0, 0, 0, 0)
  );
  opacity: 0;
  transition: 0.3s;
  z-index: 1;
}

.events_4 .gallery .carousel .swiper-slide-active::before {
  opacity: 0;
}

.events_4 .gallery .carousel .btn_prev,
.events_4 .gallery .carousel .btn_next {
  width: 2.5vw;
  height: 2.5vw;
  background: url(https://images2.iwplay.com.tw/image/pwm/events/20260211/image/event4/arrow.webp)
    center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.events_4 .gallery .carousel .btn_prev {
  left: 20.5vw;
}

.events_4 .gallery .carousel .btn_next {
  right: 20.5vw;
  transform: translateY(-50%) rotate(180deg);
}

/*雙按鈕*/
.events_4 .gn_btn_box {
  position: absolute;
  width: 45%;
  height: auto;
  padding-bottom: 9%;
  top: 86%;
  left: 27.5%;

  z-index: 5;

  background-color: rgba(122, 139, 46, 0);
  /*顏色標記*/
}

.events_4 .gn_btn_box .gift_history_btn {
  position: absolute;
  width: 42%;
  height: auto;
  padding-bottom: 0%;
  top: 20%;
  left: 7%;
  cursor: pointer;

  z-index: 5;
}

.events_4 .gn_btn_box .notic_btn {
  position: absolute;
  width: 42%;
  height: auto;
  padding-bottom: 0%;
  top: 20%;
  left: 53%;
  cursor: pointer;

  z-index: 5;
}

/*--------影片區--------*/
.events_4 .main_center .vd_box {
  position: absolute;
  width: 68%;
  height: auto;
  padding-bottom: 0%;
  top: 27%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.events_4 .main_center .vd_box .vd_box_1 {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/event4/event4_video_bg.webp)
    no-repeat center;
  background-size: 100% 100%;
  padding: 2%;
  /* aspect-ratio: 1072 / 633; */
}
.events_4 .main_center .vd_box .vd_box_1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/event4/event4_video_bg1.webp)
    no-repeat center;
  background-size: 100% 100%;
  z-index: 1;
  pointer-events: none;
}

/*播放按鈕*/
.events_4 .main_center .vd_box .vd_box_1 .play_btn {
  position: absolute;
  width: 12%;
  height: auto;
  padding-bottom: 0%;
  top: 42%;
  left: 50%;
  z-index: 10;
  background-color: rgba(0, 255, 255, 0);
  /*顏色標記*/
  cursor: pointer;

  transform: translateX(-50%) scale(1);
  transition: 0.5s;
}

.events_4 .main_center .vd_box .vd_box_1 .play_btn:hover {
  transform: translateX(-50%) scale(1.1);
  transition: 0.5s;
}

/*影片背景*/
.events_4 .main_center .vd_box .vd_box_1 video {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: left top;
  display: block;
}

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

/*@media (max-width:1100px) {
	.events_4 {
		padding-bottom: 135%;
		background-color: rgb(42, 21, 226);
	}
}*/

@media (max-width: 768px) {
  .events_4 {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 148.5%;
    background: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/event4/event4_bg_m.webp)
      center top no-repeat;
    background-size: 100%;
  }

  /*--中央區--*/
  .events_4 .main_center {
    width: 90vw;
  }

  .events_4 .main_center .big_title {
    width: 89%;
    top: 7%;
    left: 0;
    right: 0;
    /* transform: translateX(-50%); */
    margin: 0 auto;
  }

  /*商店圖*/
  .events_4 .gallery {
    width: 147%;
    top: 32%;
    left: -23.5%;
  }

  /*箭頭*/
  .events_4 .gallery .carousel .btn_prev,
  .events_4 .gallery .carousel .btn_next {
    width: 10.72vw;
    height: auto;
    padding-bottom: 19%;

    background: url(https://images2.iwplay.com.tw/image/pwm/events/20260211/image/event4/arrow.webp)
      center no-repeat;
    background-size: 100%;
  }

  .events_4 .gallery .carousel .btn_prev {
    left: 0vw;
  }

  .events_4 .gallery .carousel .btn_next {
    right: 0vw;
  }

  /*雙按鈕*/
  .events_4 .gn_btn_box {
    width: 100%;
    padding-bottom: 30%;
    top: 73%;
    left: 0%;
    background-color: rgba(42, 21, 226, 0);
  }

  .events_4 .gn_btn_box .gift_history_btn {
    width: 50%;
    top: 0%;
    left: 25%;
  }

  .events_4 .gn_btn_box .notic_btn {
    width: 50%;
    top: 60%;
    left: 25%;
  }

  /* 影片 */
  .events_4 .main_center .vd_box {
    width: 100%;
    top: 30%;
    height: auto;
  }
  .events_4 .main_center .vd_box .vd_box_1 {
    position: relative;
    width: 100%;
    aspect-ratio: 1072 / 633;
    padding: 0;
    overflow: hidden;
  }
  .events_4 .main_center .vd_box .vd_box_1 video {
    position: absolute;
    top: 5.5%;
    left: 3.4%;
    width: 93%;
    height: 89% !important;
    object-fit: fill;
    display: block;
  }
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            footer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
footer {
  background: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
}

footer p,
footer ul {
  opacity: 1;
  padding-left: 0.2rem;
}

.footer .company > img {
  width: initial;
  height: auto;
}

footer img {
  width: initial;
  height: initial;
  margin: 8px 3px;
}

@media (max-width: 1100px) {
  footer {
    /* padding-bottom: 16%; */
  }
}

@media (max-width: 767px) {
  footer {
    padding-bottom: 25%;
  }
}

/*▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
            互動地圖活動demo區塊
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀*/
.events_map {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 46.53%; /* 1920x1623 精確比例 */
  /* background: url(https://images1.iwplay.com.tw/image/pwm/events/20260514/image/event5/event5_bg.webp)
    center top no-repeat;
  background-size: 100%;
  background-color: #000; */
}
.events_map .up_cover {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 68;
  top: -29%;
  pointer-events: none;
}
.events_map .down_cover {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 68;
  bottom: -1.8%;
}
.events_map .main_center {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 60;
}
.events_map .big_title {
  top: 7%;
  left: 30.5%;
}
.events_map .map_container {
  position: relative;
  width: 100%;
  height: 100%;
}

.events_map .interactive_map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.events_map .interactive_map.map_m {
  display: none;
}
.events_map .map_region {
  cursor: pointer !important;
  pointer-events: all;
}

.events_map .map_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.events_map .map_overlay img {
  position: absolute;
  height: auto;
  /* 讓圖片中心點對齊座標 (選用，目前先用左上角對齊) */
}
.events_map .sns_box {
  position: absolute;
  width: 14%;
  height: auto;
  top: 34%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 5;
  background-color: rgba(122, 139, 46, 0);
  display: flex;
  justify-content: center;
  gap: 5.1%;
}
.events_map .sns_box .btn {
  padding: 0;
}

/* 寶箱獎勵進度條 */
.reward_progress_box {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  /* 移除 max-width 限制，使其跟隨地圖寬度縮放 */
  z-index: 100;
  text-align: center;
}

.reward_progress_box .gift_list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* gap: 4%; */
}

.reward_progress_box .gift_item {
  position: relative;
  width: 17%;
}

.progress_labels {
  position: relative;
  width: 100%;
  height: 40px;
  margin-top: 10px;
}

.progress_labels .label_item {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.progress_labels .label_item p {
  color: #fff;
  font-size: 1.1vw;
  line-height: 1.3;
  text-shadow: 1px 1px 3px #000;
}

/* 任務點定位 (PC 版預估) */
.lb1 {
  left: 27%;
}
.lb2 {
  left: 49%;
}
.lb3 {
  left: 72%;
}

.reward_progress_box .gift_img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.reward_progress_box .gift_img.status_done {
  cursor: pointer;
}

.reward_progress_box .progress_bar {
  position: relative;
  width: 100%;
  margin: 0 auto 1%;
  /* 高度由內容撐開或固定，建議讓圖片撐開 */
}

.reward_progress_box .progress_bar img {
  display: block;
}

.reward_progress_box .line_bg {
  width: 100%;
  height: auto;
}

.reward_progress_box .line_point {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 3;
}

.reward_progress_box .line_blood_box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  transition: width 1s ease-out;
}

.reward_progress_box .line_blood {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.reward_progress_box .title_text {
  color: #fff;
  font-size: 1.1vw;
  letter-spacing: 0.1vw;
  text-shadow: 1px 1px 3px #000;
}

/* 手機版適應 */
@media screen and (max-width: 768px) {
  .main_zone {
    background-image: url(https://images1.iwplay.com.tw/image/pwm/events/20260618/image/event5/main_zone_bg_m.webp);
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .events_map {
    padding-bottom: 270.53%;
  }
  .parallax_decorations {
    display: none;
  }
  .events_map .up_cover {
    top: -7%;
  }
  .events_map .big_title {
    top: 3%;
    left: 8.5%;
    width: 82%;
  }
  .events_map .sns_box {
    width: 41%;
    top: 22%;
  }
  .reward_progress_box {
    width: 92%;
    top: 30%;
    bottom: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  .reward_progress_box .progress_bar {
    width: 9.9%;
    margin-bottom: 0;
    margin-right: 2%;
    margin-top: -4%;
  }
  .reward_progress_box .gift_list {
    position: relative;
    width: 88%;
  }
  .reward_progress_box .gift_item {
    position: absolute;
    width: 100%;
    left: 0;
    transform: translateY(-50%);
  }

  /* ====== 調整這五個百分比來對齊發光點 ====== */
  .reward_progress_box .gift1 {
    top: 9%;
  }
  .reward_progress_box .gift2 {
    top: 29%;
  }
  .reward_progress_box .gift3 {
    top: 49%;
  }
  .reward_progress_box .gift4 {
    top: 69.5%;
  }
  .reward_progress_box .gift5 {
    top: 89%;
  }
  .reward_progress_box .progress_labels {
    display: none;
  }

  /* 針對直式進度條的覆寫 */
  .reward_progress_box .line_blood_box {
    width: 100% !important;
    height: 66%; /* 預設高度，如果需要 JS 控制請改為控制 height */
  }
  .reward_progress_box .line_blood {
    object-fit: cover;
    object-position: top;
  }
}