/* imgServerPath = https://twimage.daigobang.com/web/events/202609JDirectItemsAuction */

/* Config Event color */
/* 色票取自 202609 JDirectItems Auction 設計稿 */
:root {
  --main-color: #1e1e1e;
  /* 字型主色 */
  --highlight-text-color: #ff1e8e;
  /* 高亮字型 (活動辦法重點) */
  --main-bg-color: #dcc2ff;
  /* 折扣區背景 */
  --rules-bg-color: #b272ff;
  /* 活動辦法區背景 */
  --belt-bg-color: #7000d1;
  /* 腰帶 / 浮動選單背景 */
  --banner-bg-color: #a45bfb;
  /* banner 底色 */

  /* 輔助色 */
  --accent-yellow: #fff830;
  --accent-green: #4ae798;
  --accent-cyan: #16c4ff;
  --accent-pink: #ff83de;
  --accent-orange: #fe6f08;
  --accent-purple: #b488ff;

  /* 腰帶按鈕 */
  --btn-bg-color: #ffffff;
  --btn-color: #1e1e1e;
  --btn-arrow-1: #fe6f08;
  /* 加入會員 */
  --btn-arrow-2: #ff399f;
  /* 活動內容 */
  --btn-arrow-3: #1693ff;

  /* 內容區寬度 */
  --content-width: 1172px;
}

/* ===================== */

/* Basic setting */
/* 這頁沒有 js, 錨點捲動用 css 處理 */
html {
  scroll-behavior: smooth;
}

/* w-version / m-version 沿用 css/event/header_temp.css 的定義, 這裡不重複宣告 */

/* 大網 / 小網換圖 (小網的圖檔名前綴 m-) */
.event-img-w,
.event-img-m {
  display: block;
  width: 100%;
  height: auto;
}

.event-img-m {
  display: none;
}

/* 只給螢幕閱讀器 / SEO 的文字 */
.u-hidden-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.all-wrapper {
  width: 100%;
  position: relative;
  background-color: var(--main-bg-color);
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Heiti TC", Arial, sans-serif;
  color: var(--main-color);
}

.inside-wrapper {
  min-width: 1200px;
  position: relative;
  overflow: hidden;
}

.l-inner {
  width: var(--content-width);
  margin: 0 auto;
  position: relative;
}

.l-container {
  height: auto;
  padding-bottom: 90px !important;
}

/* ===================== */

/* banner */
.banner {
  position: relative;
  width: 100%;
  background-color: var(--banner-bg-color);
  overflow: hidden;
}

/* 小網不分層, 直接換一張整圖 */
.m-banner {
  display: none;
  width: 100%;
  height: auto;
}

.banner-stage {
  background-image: url(https://twimage.daigobang.com/web/events/202609JDirectItemsAuction/1920.png);
  background-position: center center;
  background-size: cover;
  position: relative;
  width: 100%;
  /* 設計稿 1920 x 785 */
  padding-top: 41%;
  overflow: hidden;
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.banner-layer {
  position: absolute;
  display: block;
  height: auto;
  margin: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.banner-layer img {
  display: block;
  width: 100%;
  height: auto;
}

/* -- 放射尖角 (opacity 一直是 1; 人物 1.3s 進場完後馬上接手, 三個一起從 banner 外面滑進來, 衝過終點再快速拉回; 1.6s 收尾) -- */
.banner-layer--ray-pink {
  left: 60%;
  bottom: 72.67%;
  z-index: 3;
  animation: bannerRayInRight 0.3s ease-out 1.05s both;
}

.banner-layer--ray-lavender {
  left: 67.03%;
  top: 58.73%;
  z-index: 3;
  animation: bannerRayInRightDown 0.3s ease-out 1.05s both;
}

.banner-layer--ray-yellow-cyan {
  right: 65.75%;
  top: 64.99%;
  z-index: 3;
  animation: bannerRayInLeft 0.3s ease-out 1.05s both;
}

/* -- 爆點 (一開始隱藏, 主標題 0.3s 播完後淡入) -- */
.banner-layer--burst {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://twimage.daigobang.com/web/events/202609JDirectItemsAuction/banner-burst-black.png);
  background-position: top 65% left 100px;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  opacity: 0;
  animation: bannerFadeIn 0.1s 0.3s both;
}

/* -- 點點 (一開始就出現, 直接上下擺動) -- */
.banner-layer--dots {
  left: 7.29%;
  top: 3.18%;
  width: 84.01%;
  z-index: 3;
  animation: bannerFloat 0.7s ease-in-out infinite;
}

/* -- 主標題 (只有進場動畫) -- */
.banner-layer--title {
  left: 25.83%;
  top: 3.82%;
  width: 55.10%;
  z-index: 2;
  animation: bannerTitleIn 0.3s both;
}

/* -- 星星 (一開始就出現, 直接閃爍) -- */
.banner-layer--star-cyan {
  left: 17.60%;
  top: 12.48%;
  z-index: 6;
  animation: bannerTwinkle 0.5s ease-in-out infinite;
}

.banner-layer--star-pink {
  left: 77.71%;
  top: 10.96%;
  z-index: 6;
  animation: bannerTwinkle 0.5s ease-in-out 0.25s infinite;
}

.banner-layer--star-yellow {
  left: 62%;
  top: 77.96%;
  z-index: 6;
  animation: bannerTwinkle 0.5s ease-in-out 0.75s infinite;
}

/* -- 購物人物 (爆點淡入後兩邊同時跑進來 0.5~1.3s, 跑完馬上換放射尖角進場) -- */
/* 搖擺從進場全部結束的 1.6s 才開始, 才不會蓋掉還在跑的 transform */
/* 搖擺以圖片中心為軸左右擺; 同一組 keyframes 只在前半週期動, 右邊 delay 1.6s / 左邊再晚半個週期 (2.6s), 兩邊輪流 */
.banner-layer--shopper-left {
  left: 14.48%;
  top: 29.17%;
  width: 16.67%;
  z-index: 7;
  animation: bannerShopperLeftIn 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) 0.5s both,
    bannerShopperSway 2s ease-in-out 2.6s infinite;
}

.banner-layer--shopper-right {
  left: 65.99%;
  top: 26.11%;
  width: 18.85%;
  z-index: 7;
  animation: bannerShopperRightIn 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) 0.5s both,
    bannerShopperSway 2s ease-in-out 1.6s infinite;
}

/* -- banner 動畫 -- */
/* 進場 */
/* 0~80% 放大並衝過頭, 80~100% (0.06s) 快速彈回 */
@keyframes bannerTitleIn {
  0% {
    transform: scale(0.01);
  }

  80% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes bannerShopperLeftIn {
  0% {
    transform: translateX(-200%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes bannerShopperRightIn {
  0% {
    transform: translateX(200%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes bannerRayInLeft {
  0% {
    /* 整個移出左邊界 (自身寬 773px, 需 > 653px) */
    transform: translate(-100%, 40%);
  }

  70% {
    /* 衝過終點一點點 (往右上 +23px / -18px) */
    transform: translate(3%, -4%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes bannerRayInRight {
  0% {
    /* 整個移出上邊界 (自身高 238px, 需 > 204px) */
    transform: translate(80%, -120%);
  }

  70% {
    /* 衝過終點一點點 (往左下 -19px / +19px) */
    transform: translate(-6%, 8%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes bannerRayInRightDown {
  0% {
    /* 整個移出右邊界 (自身寬 1279px, 需 > 633px) */
    transform: translate(60%, 30%);
  }

  70% {
    /* 衝過終點一點點 (往左上 -26px / -21px) */
    transform: translate(-2%, -5%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes bannerFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 無限循環 (點點 / 星星 / 左右人物) */
@keyframes bannerFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1.2%);
  }
}

/* 以圖片中心為軸左右搖擺 */
/* 2s 一個週期: 前 1s 擺兩次 (一次 0.5s), 後 1s 靜止換另一邊擺 */
@keyframes bannerShopperSway {
  0% {
    transform: rotate(0);
  }

  6% {
    transform: rotate(-2deg);
  }

  19% {
    transform: rotate(2deg);
  }

  25% {
    transform: rotate(0);
  }

  31% {
    transform: rotate(-2deg);
  }

  44% {
    transform: rotate(2deg);
  }

  50%,
  100% {
    transform: rotate(0);
  }
}

@keyframes bannerTwinkle {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.86);
  }
}

/* ===================== */

/* 腰帶 (大網, 和小網一樣一開始就固定在畫面底部) */
.event-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--belt-bg-color);
  padding: 20px 0;
  z-index: 1000;
}

.event-nav-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0 12px;
  list-style: none;
}

.event-nav-item {
  flex: 0 1 260px;
  min-width: 0;
}

.event-nav-btn {
    line-height: 46px;
    border: 2px solid #000;
    display: block;
    text-align: center;
    background-color: var(--btn-bg-color);
    border-radius: 12px;
    color: var(--btn-color);
    font-size: 25px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.event-nav-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--btn-arrow-1);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.event-nav-item:nth-child(2) .event-nav-btn::after {
  border-left-color: var(--btn-arrow-2);
}

.event-nav-item:nth-child(3) .event-nav-btn::after {
  border-left-color: var(--btn-arrow-3);
}

.event-nav-btn:hover {
  color: #fff;
  background-color: var(--btn-arrow-1);
}

.event-nav-item:nth-child(2):hover .event-nav-btn {
  background-color: var(--btn-arrow-2);
}

.event-nav-item:nth-child(3):hover .event-nav-btn {
  background-color: var(--btn-arrow-3);
}

/* ===================== */

/* 折扣區 */
.discount {
  position: relative;
  background-color: var(--main-bg-color);
  background-image: url(https://twimage.daigobang.com/web/events/202609JDirectItemsAuction/discount-bg-stars@2x.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1780px auto;
  padding: 100px 0;
}

.discount-firstbuy {
  margin: 0 auto;
}

.discount-tiers {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 38px;
  margin: 39px 0 0;
  padding: 0;
  list-style: none;
}

.discount-tier {
  width: 366px;
  max-width: calc((100% - 76px) / 3);
}

.discount-tier img {
  width: 100%;
  height: auto;
}

/* ===================== */

/* 活動辦法 */
.rules {
  position: relative;
  background-color: var(--rules-bg-color);
  padding: 99px 0 104px;
}

.rules-title {
  width: 500px;
  max-width: 70%;
  margin: 0 auto -44px;
  position: relative;
  z-index: 2;
}

.rules-title img {
  width: 100%;
  height: auto;
}

.rules-card {
  position: relative;
  z-index: 1;
  background-image: url(https://twimage.daigobang.com/web/events/202609JDirectItemsAuction/rules-card-bg.png);
  padding: 45px 95px;
  font-weight: bold;
  background-size: 1173px auto;
  background-repeat: no-repeat;
  letter-spacing: 1px;
}

.rules-list {
  font-size: 20px;
  line-height: 48px;
  list-style: auto;
  padding-left: 30px;
}

.rules-list > li {
  margin-bottom: 0;
}

.rules-list .rules-sub {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

.rules-list .rules-mark {
  color: var(--highlight-text-color);
}

.rules-cs {
  margin-top: 20px;
  font-size: 20px;
  line-height: 48px;
}

.rules-cs p:last-child {
  margin: 0;
}

.rules-cs a {
  color: var(--main-color);
  text-decoration: none;
}

/* -- 活動辦法區的雲朵裝飾 -- */
.rules-cloud {
  position: absolute;
  display: block;
  z-index: 3;
  pointer-events: none;
}

.rules-cloud--1 {
  top: 90px;
  right: 90px;
}

.rules-cloud--2 {
  top: 315px;
  left: -65px;
}

.rules-cloud--3 {
  bottom: 545px;
  left: -45px;
}

.rules-cloud--4 {
  bottom: 120px;
  right: -45px;
}

.rules-cloud--5 {
  bottom: 40px;
  right: 90px;
}

/* ===================== */

/* 小網最下方浮動選單 */
.m-foot-nav {
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Heiti TC", Arial, sans-serif;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--belt-bg-color);
  padding: 10px;
  z-index: 1000;
}

.m-foot-nav .event-nav-list {
  gap: 10px;
  padding: 0;
}

.m-foot-nav .event-nav-item {
  flex: 1 1 0;
}

.m-foot-nav .event-nav-btn {
  width: 100%;
  gap: 6px;
  font-size: 16px;
  letter-spacing: 0.8px;
  line-height: 52px;
  text-align: left;
  padding-left: 12px;
  border-width: 1px;
  border-radius: 15px;
}

.m-foot-nav .event-nav-btn::after {
  border-width: 8px 0 8px 13px;
  right: 12px;
}

/* ===================== */

/* RWD */
@media screen and (max-width: 480px) {
  /* Basic setting */
  .inside-wrapper {
    min-width: 100%;
  }

  .l-inner {
    width: 100%;
    max-width: calc(100% - 24px);
  }

  /* 底部浮動選單是 fixed, 讓 footer 自己墊出等高的背景, 版權文字才不會被蓋到 */
  .l-container {
    padding-bottom: 74px !important;
  }

  /* banner: 小網換一張整圖, 不分層 */
  .banner-stage {
    display: none;
  }

  .m-banner {
    display: block;
  }

  /* 大網 / 小網換圖 */
  .event-img-w {
    display: none;
  }

  .event-img-m {
    display: block;
  }

  /* 腰帶改為小網底部浮動選單 */
  .event-nav {
    display: none;
  }

  .m-foot-nav {
    display: block;
  }

  /* 折扣區 */
  .discount {
    padding: 40px 0;
    background-image: url(https://twimage.daigobang.com/web/events/202609JDirectItemsAuction/m-discount-bg-stars@2x.png);
    background-position: center top 20px;
    background-size: 332px 884px;
  }

  .discount-tiers {
    display: block;
    margin: 20px 0 0;
  }

  .discount-tier {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .discount-tier:last-child {
    margin-bottom: 0;
  }

  /* 活動辦法 */
  .rules {
    padding: 40px 0;
  }

  .rules-title {
    width: 250px;
    max-width: 66%;
    margin-bottom: -25px;
  }

  /* 卡片底改用 m 版圖, 高度隨文字拉伸 (100% 100%) */
  .rules-card {
    padding: 40px 20px;
    background-image: url(https://twimage.daigobang.com/web/events/202609JDirectItemsAuction/m-rules-card-bg.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .rules-list {
    padding-left: 20px;
    font-size: 16px;
    line-height: 40px;
  }

  .rules-cs {
    font-size: 16px;
    line-height: 40px;
  }

  .rules-cloud--1 {
    width: 48px;
    top: 2.5%;
    right: -1%;
  }

  .rules-cloud--2 {
    display: none;
  }

  .rules-cloud--3,
  .rules-cloud--4,
  .rules-cloud--5 {
    width: 32px;
  }

  .rules-cloud--3 {
    bottom: 27%;
    left: -2%;
  }

  .rules-cloud--4 {
    bottom: 2%;
    right: -2%;
  }

  .rules-cloud--5 {
    bottom: -0.5%;
    right: 10%;
    scale: -1;
  }

  .event-nav-btn:hover::after,
  .event-nav-item:nth-child(2) .event-nav-btn:hover::after,
  .event-nav-item:nth-child(3) .event-nav-btn:hover::after {
    border-color: transparent transparent transparent #fff;
  }
}

/* 使用者關閉動畫效果時, 直接顯示最終畫面 */
@media (prefers-reduced-motion: reduce) {
  .banner .banner-layer {
    animation: none !important;
  }

  .banner .banner-layer--burst {
    opacity: 0 !important;
  }
}