body,
html {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  --vw-base: calc(100vw / 1920);
  background-color: #66696b;
}

body>* {}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

button,
input,
textarea,
select,
option {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  border-radius: 0;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.container {
  position: relative;
  width: 100%;
  height: auto;
}

.material_fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(../img/index/bg-Material.jpg);
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 10;
}

/*main1*/
.main1 {
  position: relative;
  width: 100%;
  height: calc(950*var(--vw-base));
  overflow: hidden;
  background-image: url(../img/index/bg-w.jpg);
  background-repeat: repeat-y;
  background-size: cover;
  background-position: center;
  /*min-height: 100vh;*/
}

.main1-sticky-dark {
  width: calc(1805*var(--vw-base));
  height: calc(790*var(--vw-base));
  position: relative;
  margin: 0 auto;
  margin-top: calc(84*var(--vw-base));
  background-color: transparent;
  z-index: 20;
  overflow: hidden;
  /* ✅ 保留裁切 */
}

.main1-sticky-dark video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/*跑馬燈*/
.main1 .main1-marquee {
  position: relative;
  width: calc(1805*var(--vw-base));
  height: 3vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0 auto;
  z-index: 10;
  clip-path: inset(0 100% 0 0);
  /* 右側全遮 */
  transition: clip-path 1s ease-in-out;
}

.main1 .main1-marquee.active {
  clip-path: inset(0 0% 0 0);
  /* 展開 */
}

.main1 .main1-marquee .marquee-move-main {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-main1 15s linear infinite;
  padding: 0 2vw;
}

.main1 .main1-marquee .marquee-move-main .marquee-squash {
  display: inline-block;
  transform-origin: center;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  color: #8c8c8c;
  font-style: normal;
  font-size: calc(12 * var(--vw-base));
  line-height: 3vw;
  letter-spacing: 0.15vw;
}

.main1 .main1-marquee .marquee-move-main .marquee-squash:before {
  content: "";
  width: 0.65vw;
  height: 0.65vw;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #8c8c8c;
  position: absolute;
  left: 0.8vw;
  top: 1vw;
}

.main1 .main1-marquee .marquee-move-main .marquee-squash.bold {
  font-weight: 500;
}

.main1 .main1-marquee .marquee-move-main .marquee-squash.bold:before {
  content: "";
  width: 0.65vw;
  height: 0.65vw;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0);
  border: 1.5px solid #8c8c8c;
  position: absolute;
  left: 0.8vw;
  top: 1vw;
}

@keyframes marquee-main1 {
  0% {
    transform: translateX(0);
  }

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



/* main2 */
.main2 {
  position: relative;
  width: 100%;
  height: calc(1070*var(--vw-base));
  overflow: visible;
  background-image: url(../img/index/bg-w.jpg);
  background-repeat: repeat-y;
  background-size: cover;
  background-position: center;
  /*min-height: 100vh;*/
}

#main2Content {
  position: relative;
  width: 100%;
}

/* 背景直向跑馬燈 */
.bg-vertical-marquee {
  width: 100%;
  height: calc(1070*var(--vw-base));
  position: absolute;
  left: 0;
  top: 0;
  inset: 0;
  display: grid;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* 每一欄 */
.bg-vertical-marquee .col {
  position: relative;
  overflow: hidden;
}

/* 跑動軌道（只動 Y，避免 transform 衝突） */
.bg-vertical-marquee .track {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 3vh;
  padding: 2vh 0;
  will-change: transform;
}

/* 文字樣式 */
.bg-vertical-marquee span {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: calc(33 * var(--vw-base));
  letter-spacing: 0.12vw;
  text-transform: uppercase;
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: scale(1, 1);
  transform-origin: center;
  white-space: nowrap;
  opacity: .5;
}

/* 上下跑 */
.bg-vertical-marquee .up .track {
  animation: vUp 40s linear infinite;
}

.bg-vertical-marquee .down .track {
  animation: vDown 40s linear infinite;
}

/* 無縫循環 */
@keyframes vUp {
  from {
    transform: translate(-50%, 0);
  }

  to {
    transform: translate(-50%, -50%);
  }
}

@keyframes vDown {
  from {
    transform: translate(-50%, -50%);
  }

  to {
    transform: translate(-50%, 0);
  }
}

/* mask 層 */
.bg-vertical-marquee-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.bg-vertical-marquee-mask-dark {
  z-index: 5;
}

.bg-vertical-marquee-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main2-seabox {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 100%;
  height: calc(1353*var(--vw-base));
  z-index: 8;
  overflow: hidden;
}

.main2-seabox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main2-seabox .main2-seabox-water {
  position: absolute;
  z-index: 9;
  left: -0.35%;
  bottom: 0;
  width: 100.7%;
  height: 50%;
  pointer-events: none;
  -webkit-mask-image: url("../img/index/main2-seabox.png");
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-image: url("../img/index/main2-seabox.png");
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center bottom;
  overflow: hidden;
}

.main2-seabox .main2-seabox-water svg {
  position: absolute;
  left: 0;
  bottom: -20%;
  width: 100%;
  height: 120%;
  transform: none;
}


.seabox-light {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  height: calc(1000*var(--vw-base));
}

.seabox-light img {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seabox-light img.seabox-light1 {
  mix-blend-mode: soft-light;
  z-index: 14;
}

.seabox-light img.seabox-light2 {
  mix-blend-mode: screen;
  z-index: 15;
}

/*ball*/
#c {
  display: block;
  width: 110%;
  height: calc(1180 * var(--vw-base));
  position: absolute;
  left: -5%;
  top: 9vw;
  z-index: 7;
}

/*counter*/
#counter {
  font-size: calc(196.57*var(--vw-base));
  color: #fff;
  letter-spacing: 0.15em;
  font-family: "new-astro", sans-serif;
  font-weight: 300;
  font-style: normal;
  position: relative;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
}

/* ✅ 每一位固定寬 */
#counter span {
  display: inline-block;
  width: 1ch;
  /* 關鍵：每個數字一樣寬 */
  text-align: center;
}

/* main2 進入時：固定在視窗正中央 */
#counter.is-fixed-center {
  position: absolute !important;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  z-index: 8 !important;
  pointer-events: none;
}

/* 可選：更穩定（避免字型微抖） */
#counter.is-fixed-center {
  will-change: transform;
}

#counter.is-hidden {
  opacity: 0;
}

#counter:after {
  content: "";
  width: calc(19*var(--vw-base));
  height: calc(55*var(--vw-base));
  background-image: url(../img/index/main2-arr.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  right: -1.5vw;
  bottom: 2vw;
  animation: arrowUp 0.8s ease infinite;
}

@keyframes arrowUp {
  0% {
    bottom: 2vw;
  }

  50% {
    bottom: 3.5vw;
  }

  100% {
    bottom: 2vw;
  }
}

#countertxt {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #595959;
  line-height: 3vw;
  height: 3vw;
  font-size: calc(30 * var(--vw-base));
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 1em;
  text-align: center;
  font-weight: 300;
  overflow: hidden;
  text-indent: 1.5vw;
  z-index: 8;
}


/*main3*/
.main3 {
  position: relative;
  width: 100%;
  height: calc(1630*var(--vw-base));
  background-color: #f16d25;
  overflow: hidden;
}

/*ball*/
#c3 {
  display: block;
  width: 100%;
  height: calc(1630 * var(--vw-base));
  position: absolute;
  left: 0%;
  top: 0vw;
  z-index: 5;
}

/* ===== main3-tree 基礎 ===== */
.main3-tree {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(1101*var(--vw-base));
  z-index: 8;
  pointer-events: none;
}

/* 兩層完全貼齊 */
.main3-tree .main3-tree-line,
.main3-tree .main3-tree-bg {
  position: absolute;
  inset: 0;
}

/* ===== LINE 圖本體 ===== */
.main3-tree .main3-tree-line img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .20));
}

/* LINE：遮色片中間往外 */
.main3-tree .main3-tree-line {
  --spread: 0%;
  --soft: 3.2%;
  opacity: 0;
  filter: blur(18px);
  transform: scale(0.994);
  will-change: opacity, filter, transform;

  -webkit-mask-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) calc(50% - var(--spread)),
      rgba(255, 255, 255, 1) calc(50% - var(--spread) + var(--soft)),
      rgba(255, 255, 255, 1) calc(50% + var(--spread) - var(--soft)),
      rgba(255, 255, 255, 0) calc(50% + var(--spread)),
      rgba(255, 255, 255, 0) 100%);
  mask-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) calc(50% - var(--spread)),
      rgba(255, 255, 255, 1) calc(50% - var(--spread) + var(--soft)),
      rgba(255, 255, 255, 1) calc(50% + var(--spread) - var(--soft)),
      rgba(255, 255, 255, 0) calc(50% + var(--spread)),
      rgba(255, 255, 255, 0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* BG：滿版容器（樹形底色＝背景色，讓一開始看不出來） */
.main3-tree .main3-tree-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* GSAP 會拉到 1 */
  overflow: hidden;
  isolation: isolate;
}

/* 樹形底色（跟背景一樣） */
.main3-tree .main3-tree-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f16d25;
  opacity: 1;
  pointer-events: none;

  -webkit-mask-image: url("../img/index/main3-tree.png");
  mask-image: url("../img/index/main3-tree.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ✅ 你新的固定 overlay：直接定位滿版，並套同一張樹形 mask */
.main3-tree .m3-ink-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  /* 在 bg 上面，line 之下/之上看你需求 */
  pointer-events: none;
  opacity: 0;
  /* JS 會拉到 1 */
  mix-blend-mode: normal;
  /* 確認看得到後可改 multiply */

  -webkit-mask-image: url("../img/index/main3-tree.png");
  mask-image: url("../img/index/main3-tree.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ✅ solid：放在 overlay 最底層（不要蓋掉墨點紋理） */
.main3-tree .m3-ink-overlay .m3-ink-solid {
  position: absolute;
  inset: 0;
  background: #66696b;
  opacity: 0;
  z-index: 9;
}

/* 墨點在 solid 上方 */
.main3-tree .m3-ink-overlay .m3-ink,
.main3-tree .m3-ink-overlay .m3-ink {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
  will-change: transform, opacity, filter;
  z-index: 1;
}

/* 墨點樣式（#66696b） */
.main3-tree .m3-ink-overlay .m3-ink {
  background: radial-gradient(circle at 50% 50%,
      rgba(102, 105, 107, 0.98) 0%,
      rgba(102, 105, 107, 0.65) 32%,
      rgba(102, 105, 107, 0.28) 60%,
      rgba(102, 105, 107, 0) 78%);
  filter: blur(10px);
}

.main3-tree .m3-ink-overlay .m3-ink-cloud {
  background: radial-gradient(circle,
      rgba(102, 105, 107, 0.22) 0%,
      rgba(102, 105, 107, 0.12) 40%,
      rgba(102, 105, 107, 0) 80%);
  filter: blur(26px);
}

/* main3 轉場遮片：用 tree 圖當過場蓋畫面 */
.m3-tree-transition {
  position: absolute;
  inset: 0;
  z-index: 10;
  /* 建議介於 canvas(5) 與 tree(8) 之間 */
  pointer-events: none;
  opacity: 0;
  background: url("../img/index/main3-tree.png") center bottom / cover no-repeat;
  will-change: opacity, transform, filter;
}

.main3-tree-light {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(1101*var(--vw-base));
  z-index: 11;
  pointer-events: none;

}

.main3-tree-light {
  -webkit-mask-image: url("../img/index/main3-tree.png");
  mask-image: url("../img/index/main3-tree.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  display: none;
}

.main3-tree-light img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 0%;
  /* ✅ 中間最上方 */
  will-change: transform, opacity, filter;
  pointer-events: none;
}


.m3-title {
  width: 5vw;
  position: absolute;
  left: 4vw;
  top: 24vw;
}

.m3-title .m3-title-eng {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.m3-title .m3-title-eng .m3-title-eng-word {
  width: 5vw;
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: calc(130 * var(--vw-base));
  line-height: 5vw;
  letter-spacing: 0.5vw;
  writing-mode: vertical-rl;
}

.m3-title .m3-title-eng .m3-title-eng-w {
  color: #fff;
}

.m3-title .m3-title-eng .m3-title-eng-0 {
  color: #cf5a1a;
  opacity: 0.3;
  mix-blend-mode: multiply;
}

/* 讓兩個 project 完全重疊 */
.m3-title .m3-title-eng-word {
  position: relative;
  /* 給內層 absolute 參考 */
  width: 5vw;
  /* 跟內層字一致 */
  height: auto;
}

/* 兩個同字層：疊在一起 */
.m3-title .m3-title-eng .m3-title-eng-w,
.m3-title .m3-title-eng .m3-title-eng-0 {
  position: absolute;
  left: 0;
  top: 0;
  width: 5vw;
  /* 你原本的字樣式保留即可（font/size/line-height/writing-mode...） */
}

/* 上半部 */
.m3-title .m3-title-eng .m3-title-eng-w {
  clip-path: inset(0% 0% 0% 60%);
}

/* 下半部 */
.m3-title .m3-title-eng .m3-title-eng-0 {
  clip-path: inset(0% 40% 0% 0);
}

.m3-title-cht {
  width: 2vw;
  height: 14vw;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: calc(26 * var(--vw-base));
  line-height: 2vw;
  letter-spacing: 0.15vw;
  writing-mode: vertical-rl;
  color: #fff;
  text-align: center;
  position: absolute;
  left: -0.35vw;
  top: 10vw;
}

.m3-title-line {
  width: 1px;
  height: 60vw;
  position: absolute;
  left: 0;
  top: -14vw;
  background-color: rgba(255, 255, 255, 0.5);
}

/*MORE*/
.more-btn {
  position: absolute;
  left: 50%;
  top: 38.5vw;
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: center;
  gap: 0.8vw;
  text-decoration: none;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: calc(18 * var(--vw-base));
  line-height: 2vw;
  letter-spacing: 0.15vw;
  z-index: 20;
  cursor: pointer;
}

.more-btn .circle {
  position: relative;
  width: 3.6vw;
  height: 3.6vw;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.more-btn .more-text {
  position: relative;
  z-index: 2;
}

.more-btn .trends {
  position: relative;
  padding-bottom: 0vw;
}

.more-btn::after {
  content: "";
  position: absolute;
  left: calc(3.6vw - 1.55vw);
  bottom: 1.25vw;
  width: 5.9vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
  /*transition: width .45s cubic-bezier(.4, 0, .2, 1);*/

}

.more-btn:hover::after {
  will-change: transform;
  animation: moreline 1s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes moreline {
  0% {
    width: 0vw;
  }

  80%,
  100% {
    width: 5.9vw;
  }
}



/* =========================
   M3 MENU BOX (整理版)
   - hover：文字變色 + cutIn + socketIn
   - active：鎖定文字變色 + cutIn + socket「固定在接上狀態」（不再被 hover/out 動畫打架）
   - 非 active：滑出才 socketOut + cutOut
========================= */

.m3-menu-box {
  width: 50vw;
  position: absolute;
  left: 25vw;
  bottom: 8vw;
  /* transform: translate(-50%, 0); */
  display: flex;
  gap: 2.2vw;
  align-items: center;
  z-index: 12;
}

:root {
  --m3-bg: #66696b;
  --line: rgba(255, 255, 255, .8);
  --accent: #f5b54a;
  --bw: 1px;
  --easePlug: cubic-bezier(.4, 0, .2, 1);
  --durPlug: .45s;
}

/* =========================
   Wrapper：外框 + 斷線遮罩
========================= */
.m3-menu-box-btn-wrap {
  position: relative;
  display: inline-block;
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  z-index: 12;
}

/* 斷線遮罩（挖掉上邊框一段） */
.m3-menu-box-btn-wrap::after {
  content: "";
  position: absolute;
  top: calc(0px - var(--bw));
  left: 33%;
  width: 55%;
  height: calc(var(--bw) + 1px);

  /* 底色 */
  background-color: var(--m3-bg);

  /* 材質 */
  background-image: url(../img/index/bg-Material.jpg);
  background-repeat: repeat;
  background-size: 160px 160px;
  /* ⭐ 關鍵：不要 cover */
  background-position: center;

  /* ⭐ 重點：用這個，不是 mix-blend-mode */
  background-blend-mode: multiply;

  opacity: 1;
  pointer-events: none;
  z-index: 1;

  animation-duration: var(--durPlug);
  animation-timing-function: var(--easePlug);
  animation-fill-mode: forwards;
  animation-name: cutOut;
}


/* hover 預覽（非 active 才跑） */
.m3-menu-box-btn-wrap:not(.active):has(.m3-menu-box-btn:hover)::after {
  animation-name: cutIn;
}

/* active：鎖定 cutIn */
.m3-menu-box-btn-wrap.active::after {
  animation-name: cutIn;
}

@keyframes cutIn {
  0% {
    left: 33%;
    width: 55%;
  }

  80% {
    left: 68%;
    width: 20%;
  }

  100% {
    left: 68%;
    width: 20%;
  }
}

@keyframes cutOut {
  0% {
    left: 68%;
    width: 20%;
  }

  30% {
    left: 68%;
    width: 20%;
  }

  100% {
    left: 33%;
    width: 55%;
  }
}

/* =========================
   Button：文字 + plug + socket
========================= */
.m3-menu-box-btn {
  position: relative;
  z-index: 3;
  border: 0;
  padding: 0.4vw 1.5vw;
  color: #fff;
  background: transparent;
  font-size: calc(20 * var(--vw-base));
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  font-weight: 300;
  cursor: pointer;
}

/* 文字：hover or active 變色 */
.m3-menu-box-btn:hover,
.m3-menu-box-btn.active {
  color: var(--accent);
}

/* 沒有首頁展示內容的分類仍顯示，但不提供 hover／active 變色 */
.m3-menu-box-btn.is-empty {
  cursor: default;
}

.m3-menu-box-btn.is-empty:hover {
  color: #fff;
}

/* =========================
   Plug（右上）- 不變色
========================= */
.m3-menu-box-btn::before {
  content: "";
  position: absolute;
  top: -0.45vw;
  left: 65%;

  --pW: calc(20 * var(--vw-base));
  --pH: calc(15 * var(--vw-base));
  width: var(--pW);
  height: var(--pH);

  border: var(--bw) solid var(--line);
  border-radius: 2.5px;
  box-sizing: border-box;

  --holeW: calc(4 * var(--vw-base) * 0.7);
  --holeH: calc(6 * var(--vw-base));
  --gap: calc(3 * var(--vw-base));
  --padY: calc(2.5 * var(--vw-base));

  --inset: calc(2 * var(--vw-base));
  --innerW: calc(var(--pW) - (var(--bw) * 2) - (var(--inset) * 2));
  --groupW: calc((var(--holeW) * 2) + var(--gap));
  --padX: calc(var(--inset) + (var(--innerW) - var(--groupW)) / 2);

  --y0: var(--padY);
  --x0L: var(--padX);
  --x0R: calc(var(--padX) + var(--holeW) + var(--gap));
  --x1L: calc(var(--x0L) + var(--holeW));
  --x1R: calc(var(--x0R) + var(--holeW));
  --y1: calc(var(--y0) + var(--holeH));

  background:
    linear-gradient(var(--line), var(--line)) no-repeat,
    linear-gradient(var(--line), var(--line)) no-repeat,
    linear-gradient(var(--line), var(--line)) no-repeat,
    linear-gradient(var(--line), var(--line)) no-repeat,
    linear-gradient(var(--line), var(--line)) no-repeat,
    linear-gradient(var(--line), var(--line)) no-repeat,
    linear-gradient(var(--line), var(--line)) no-repeat,
    linear-gradient(var(--line), var(--line)) no-repeat;

  background-size:
    var(--holeW) var(--bw), var(--holeW) var(--bw), var(--bw) var(--holeH), var(--bw) var(--holeH),
    var(--holeW) var(--bw), var(--holeW) var(--bw), var(--bw) var(--holeH), var(--bw) var(--holeH);

  background-position:
    var(--x0L) var(--y0),
    var(--x0L) var(--y1),
    var(--x0L) var(--y0),
    var(--x1L) var(--y0),
    var(--x0R) var(--y0),
    var(--x0R) var(--y1),
    var(--x0R) var(--y0),
    var(--x1R) var(--y0);

  z-index: 13;
}

/* =========================
   Socket（左上）- base
========================= */
.m3-menu-box-btn::after {
  content: "";
  position: absolute;
  top: -0.18vw;
  left: 32%;
  width: 0.35vw;
  height: 0.35vw;
  border: var(--bw) solid var(--line);
  border-bottom: 0;
  border-radius: 2px;
  transform: rotate(-90deg);
  background-color: rgba(255, 255, 255, 0);
  z-index: 13;
}

/* hover：只有「非 active」才跑 socketIn */
.m3-menu-box-btn:not(.active):hover::after {
  top: -0.4vw;
  width: 0.35vw;
  height: 0.6vw;
  border-radius: 2px;
  animation: socketIn var(--durPlug) var(--easePlug) forwards;
}

/* 滑出：只有「非 active」才退場 */
.m3-menu-box-btn:not(.active):not(:hover)::after {
  animation: socketOut var(--durPlug) var(--easePlug) forwards;
}

/* active：直接鎖在「接上完成狀態」（不跑動畫、不會被 hover/out 覆蓋） */
.m3-menu-box-btn.active::after {
  top: -0.4vw;
  left: calc(73.5% - 0.35vw);
  width: 0.35vw;
  height: 0.6vw;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 1);
  animation: none;
}

@keyframes socketIn {
  0% {
    left: 32%;
    height: 0.35vw;
    top: -0.18vw;
    background-color: rgba(255, 255, 255, 0);
  }

  80% {
    left: calc(73.5% - 0.25vw);
    height: 0.6vw;
    top: -0.4vw;
    background-color: rgba(255, 255, 255, 1);
  }

  100% {
    left: calc(73.5% - 0.35vw);
    height: 0.6vw;
    top: -0.4vw;
    background-color: rgba(255, 255, 255, 1);
  }
}

@keyframes socketOut {
  0% {
    left: calc(73.5% - 0.35vw);
    height: 0.6vw;
    top: -0.4vw;
    background-color: rgba(255, 255, 255, 1);
  }

  30% {
    left: calc(73.5% - 0.25vw);
    height: 0.6vw;
    top: -0.4vw;
    background-color: rgba(255, 255, 255, 1);
  }

  100% {
    left: 32%;
    height: 0.35vw;
    top: -0.18vw;
    background-color: rgba(255, 255, 255, 0);
  }
}


/*project個案區塊*/
.marquee-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(1101*var(--vw-base));
  z-index: 11;
  /*pointer-events:none;*/
  -webkit-mask-image: url("../img/index/main3-tree.png");
  mask-image: url("../img/index/main3-tree.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  position: absolute;
  top: 18vw;
  left: 0;
}

/* 套入你的 scroll-animations-example */
.scroll-animations-example {
  display: inline-block;
  white-space: nowrap;
  padding: 0;
}

/* ===== 以下全部都是你提供的 CSS ===== */
.scroll-animations-example>.scrollsection {
  display: inline-block;
}

.item-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.scroll-animations-example>.scrollsection>.item {
  display: inline-block;
  position: relative;
  margin: 0 -30vh 0 3vh;
}

.scroll-animations-example>.scrollsection>.item::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.scroll-animations-example>.scrollsection>.item.-p1 {
  width: calc(310*var(--vw-base));
  height: calc(453*var(--vw-base));
  margin: 0 -3vw 0 0vw;
  z-index: 1;
}

.scroll-animations-example>.scrollsection>.item.-p2 {
  width: calc(230*var(--vw-base));
  height: calc(337*var(--vw-base));
  margin: 0 0 0 0;
  z-index: 2;
  bottom: -1.5vw;
}

.scroll-animations-example>.scrollsection>.item.-p3 {
  width: calc(321*var(--vw-base));
  height: calc(181*var(--vw-base));
  margin: 0 0 0 -2vw;
  bottom: -5vw;
  z-index: 3;
}

.scroll-animations-example>.scrollsection>.item.-p4 {
  width: calc(537*var(--vw-base));
  height: calc(303*var(--vw-base));
  margin: 0 0 0 -13vw;
  bottom: 3vw;
  z-index: 2;
}

.scroll-animations-example>.scrollsection>.item.-p5 {
  width: calc(310*var(--vw-base));
  height: calc(453*var(--vw-base));
  z-index: 4;
  margin: 0 0 0 -3vw;
  bottom: 0vw;
}

.scroll-animations-example>.scrollsection>.item.-p6 {
  width: calc(321*var(--vw-base));
  height: calc(181*var(--vw-base));
  z-index: 5;
  margin: 0 0 0 -4vw;
  bottom: -5vw;
}

.scroll-animations-example>.scrollsection>.item.-p7 {
  width: calc(230*var(--vw-base));
  height: calc(336*var(--vw-base));
  z-index: 6;
  margin: 0 0 0 -5vw;
  bottom: 3vw;
}

.scroll-animations-example>.scrollsection>.item.-p8 {
  width: calc(537*var(--vw-base));
  height: calc(303*var(--vw-base));
  z-index: 7;
  margin: 0 0 0 -2vw;
  bottom: -1vw;
}

.scroll-animations-example>.scrollsection>.item.-p9 {
  width: calc(230*var(--vw-base));
  height: calc(336*var(--vw-base));
  z-index: 8;
  margin: 0 0 0 -6vw;
  bottom: -2.5vw;
}

.scroll-animations-example>.scrollsection>.item.-p10 {
  width: calc(321*var(--vw-base));
  height: calc(181*var(--vw-base));
  z-index: 9;
  margin: 0 0 0 -5vw;
  bottom: -5.5vw;
}

.scroll-animations-example>.scrollsection>.item>.image {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  filter: grayscale(1);
  opacity: 0;
  pointer-events: none;
  object-fit: cover;
  transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
}

.scroll-animations-example>.scrollsection>.item>.image.-active {
  opacity: 1;
  pointer-events: auto;
}

.scroll-animations-example>.scrollsection>.item>.image.-clicked {
  opacity: 0;
}

.scroll-animations-example>.scrollsection>.item>.image.-active:hover {
  filter: grayscale(0);
  opacity: 1;
  cursor: pointer;
}