@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/*.lora-<uniquifier> {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}*/

/*
Bickham Script Pro 3 Regular
font-family: "bickham-script-pro-3", sans-serif;
font-weight: 400;
font-style: normal;
Bickham Script Pro 3 Bold
font-family: "bickham-script-pro-3", sans-serif;
font-weight: 700;
font-style: normal;
*/
.Bickham-Script-Pro-3-Regular {
  font-family: "bickham-script-pro-3", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lora-Regular {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.lora-Bold {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

body,
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  --vw-base: calc(100vw / 1920);
  background-color: #f3eee7;
}

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;
}

video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.top-menu.show2 {
  animation: top-menu-show ease 1s forwards;
  pointer-events: auto;
}

@keyframes top-menu-show {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.container {
  width: 100%;
  height: auto;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  background-color: #f3eee7;
}

.main-line1 {
  position: absolute;
  left: 12.7vw;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(137, 126, 121, 0.5);
}

.main-line2 {
  position: absolute;
  left: 86.5vw;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(137, 126, 121, 0.5);
}

.bottom-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(137, 126, 121, 0.5);
}

.no-scroll {
  overflow: hidden;
  /* 禁止滚动条 */
  touch-action: none;
  /* 禁止移动端触摸滚动 */
  position: fixed;
  /* 防止页面跳动 */
  width: 100%;
  height: 100vh;
}

.opacity {
  opacity: 1;
  position: relative;
  visibility: visible;
}

.main1 {
  position: relative;
  width: 100%;
  height: calc(1365 * var(--vw-base));
  /* background-color: #f3eee7; */
  /* 確保超出容器的部分被隱藏，達成裁切感 */
  overflow: hidden;
  margin-bottom: calc(250 * var(--vw-base));
}

.m1-title {
  position: absolute;
  top: calc(420*var(--vw-base));
  left: calc(318*var(--vw-base));
}

.m1-year {
  position: relative;
  font-size: calc(26 * var(--vw-base));
  line-height: calc(40 * var(--vw-base));
  letter-spacing: 0.07em;
  color: #897e79;
  margin: 0;
  font-family: "Lora", serif;
  font-weight: 600;
  opacity: 0;
}

.m1-casename {
  position: relative;
  color: #897e79;
  font-size: calc(22*var(--vw-base));
  font-weight: 700;
  line-height: calc(30*var(--vw-base));
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.1em;
  opacity: 0;
}

.m1-subtitle {
  position: relative;
  font-size: calc(18 * var(--vw-base));
  line-height: calc(28 * var(--vw-base));
  letter-spacing: 0.07em;
  color: #897e79;
  margin: 0;
  font-family: "Lora", serif;
  font-weight: 600;
  opacity: 0;
}

.m1-pic1 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(660*var(--vw-base));
  height: calc(656*var(--vw-base));
  opacity: 0;
}


.m1-pic2 {
  position: absolute;
  right: 0;
  top: calc(136*var(--vw-base));
  width: calc(858*var(--vw-base));
  height: calc(0 * var(--vw-base));
  overflow: hidden;
  background-color: #000;
}

.m1-pic2.active {
  animation: m1-pic2 ease 2s forwards;
}

@keyframes m1-pic2 {
  0% {
    height: calc(0 * var(--vw-base));
  }

  100% {
    height: calc(814 * var(--vw-base));
  }
}

.m1-pic2 img {
  position: relative;
  width: calc(859*var(--vw-base));
  height: calc(814*var(--vw-base));
}

.m1-pic2.active img {
  animation: m1-pic2-img ease 2s forwards;
}

@keyframes m1-pic2-img {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.m1-title-line {
  position: relative;
  width: calc(0*var(--vw-base));
  height: calc(3*var(--vw-base));
  opacity: 0;
  overflow: hidden;
  transition: all 1s ease;
}

.m1-title-line.active {
  position: relative;
  width: calc(476*var(--vw-base));
  height: calc(3*var(--vw-base));
  opacity: 1;
}

.m1-title-line-arr {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(476*var(--vw-base));
  height: calc(3*var(--vw-base));
}


.m1-txt {
  position: absolute;
  bottom: 0;
  left: calc(1045*var(--vw-base));
  width: calc(560*var(--vw-base));
  z-index: 10;
}

.m-txt-title {
  color: #756b66;
  font-size: calc(22 * var(--vw-base));
  line-height: calc(30 * var(--vw-base));
  font-weight: 700;
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.08em;
  transform: scaleX(0.95);
  transform-origin: left center;
  display: block;
}

.m-txt-stitle {
  color: #756b66;
  font-size: calc(18 * var(--vw-base));
  line-height: calc(30 * var(--vw-base));
  font-weight: 700;
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.08em;
  margin-bottom: 1vw;
}

.m-txt-cent {
  color: #756b66;
  font-size: calc(16 * var(--vw-base));
  line-height: calc(30 * var(--vw-base));
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.05em;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-ideograph;
  margin-bottom: 1.2vw;
}

.m-txt-cent:last-child {
  margin-bottom: 0vw;
}

/* 初始隱藏文字內容 */
.m1-txt .m-txt-title,
.m1-txt .m-txt-stitle,
.m1-txt .m-txt-cent {
  opacity: 0;
  will-change: transform, opacity;
}


/* 基礎視覺比例設定 */
.m-scale {
  display: inline-block;
  transform: scaleX(0.95);
  /* 預設維持 left，給左邊的 2024 使用 */
  transform-origin: left center;
}


/*MAIN2*/
.main2 {
  position: relative;
  width: 100%;
  height: calc(370 * var(--vw-base));
  overflow: hidden;

  /* 新增：讓內部的 .m2-contain 置中 */
  display: flex;
  justify-content: center;
  /* 水平置中 */
  align-items: center;
  /* 垂直置中 */
}

.m2-pic {
  width: 100%;
  height: calc(370*var(--vw-base));
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.img-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(370*var(--vw-base));
  background-color: rgba(26, 18, 17, 0.7);
  /* 變暗時的底色 */
  overflow: hidden;
  z-index: 30;
}

.m2-contain {
  position: relative;
  z-index: 40;
  cursor: pointer;
  display: flex;
  /* 改為 flex */
  flex-direction: column;
  /* 讓文字垂直排列 */
  align-items: center;
  /* 讓標題、線條、副標題水平中心對齊 */
  text-align: center;
  /* 文字置中 */

  /* 移除原本的 left 偏移 */
  width: 73.8vw;
  /* left: 12.7vw;  <-- 建議註解或刪除 */
}

.m2-contain .m2-title {
  color: #fff;
  font-size: calc(22 * var(--vw-base));
  line-height: calc(50 * var(--vw-base));
  font-weight: 700;
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.25em;
}

.m2-contain .m2-subtitle {
  color: #fff;
  font-size: calc(22 * var(--vw-base));
  line-height: calc(50 * var(--vw-base));
  font-family: "Lora", serif;
  font-weight: 600;
  letter-spacing: 0.25em;
}

.m2-title,
.m2-subtitle {
  opacity: 0;
  will-change: transform, opacity;
}

/* 修正 Main2 線條 */
.m2-title-line {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* 確保垂直置中 */
  width: 0%;
  height: calc(3 * var(--vw-base));
  /* ✨ 補上高度 */
  overflow: hidden;
  z-index: 35;
  transition: width 1.5s ease;
}

.m2-title-line.active {
  width: 100%;
}

.m2-title-line-arr {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(1410*var(--vw-base));
  height: calc(3*var(--vw-base));
}



/*MAIN3*/
.main3 {
  position: relative;
  width: 100%;
  height: calc(1150*var(--vw-base));
  display: flex;
  overflow: hidden;
  margin-bottom: calc(220*var(--vw-base));
}

.m3-pic {
  position: relative;
  width: calc(951*var(--vw-base));
  height: calc(656*var(--vw-base));
}

.m3-contain {
  position: absolute;
  bottom: 0;
  left: 57.5vw;
  width: calc(515*var(--vw-base));
  z-index: 10;
  padding-right: 2vw;
}

.m3-title {
  position: relative;
  color: #897e79;
  font-size: calc(22*var(--vw-base));
  font-weight: 700;
  line-height: calc(30*var(--vw-base));
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.1em;
  margin-bottom: calc(20*var(--vw-base));
}

.m3-eng {
  position: absolute;
  left: 57.5vw;
  top: calc(670*var(--vw-base));
  color: #897e79;
  font-size: calc(22*var(--vw-base));
  line-height: calc(30*var(--vw-base));
  font-family: "Lora", serif;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.m3-info {
  position: relative;
  color: #897e79;
  font-size: calc(16*var(--vw-base));
  font-weight: 400;
  line-height: calc(30*var(--vw-base));
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.1em;
}

.m3-pic1 {
  position: absolute;
  left: calc(180*var(--vw-base));
  top: calc(260*var(--vw-base));
  width: calc(662*var(--vw-base));
  height: calc(885*var(--vw-base));
  opacity: 0;
}

.m3-pic2 {
  position: absolute;
  left: 57.5vw;
  top: calc(260*var(--vw-base));
  width: calc(558*var(--vw-base));
  height: calc(0 * var(--vw-base));
  overflow: hidden;
  background-color: #000;
}

.m3-pic2.active {
  animation: m3-pic2 ease 2s forwards;
}

@keyframes m3-pic2 {
  0% {
    height: calc(0 * var(--vw-base));
  }

  100% {
    height: calc(365 * var(--vw-base));
  }
}

.m3-pic2 img {
  position: relative;
  width: calc(558*var(--vw-base));
  height: calc(365*var(--vw-base));
}

.m3-pic2.active img {
  animation: m3-pic2-img ease 2s forwards;
}

@keyframes m3-pic2-img {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}



/*MAIN4*/
.main4 {
  position: relative;
  width: 100%;
  height: calc(320 * var(--vw-base));
  overflow: hidden;

  /* 新增：讓內部的 .m2-contain 置中 */
  display: flex;
  justify-content: center;
  /* 水平置中 */
  align-items: center;
  /* 垂直置中 */
}

.m4-contain {
  position: relative;
  z-index: 40;
  cursor: pointer;
  display: flex;
  /* 改為 flex */
  flex-direction: column;
  /* 讓文字垂直排列 */
  align-items: center;
  /* 讓標題、線條、副標題水平中心對齊 */
  text-align: center;
  /* 文字置中 */

  /* 移除原本的 left 偏移 */
  width: calc(1200 * var(--vw-base));
}

.m4-contain .m4-title {
  color: #897e79;
  font-size: calc(22 * var(--vw-base));
  line-height: calc(50 * var(--vw-base));
  font-weight: 700;
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.25em;
}

.m4-contain .m4-subtitle {
  color: #897e79;
  font-size: calc(22 * var(--vw-base));
  line-height: calc(50 * var(--vw-base));
  font-family: "Lora", serif;
  font-weight: 600;
  letter-spacing: 0.25em;
}

.m4-title-line {
  position: absolute;
  left: 0;
  top: 50%;
  /* 視具體排版微調 */
  width: 0%;
  overflow: hidden;
  z-index: 35;
  transition: width 1.2s ease-in-out;
  /* 這裡控制線條展開速度 */
}

.m4-title-line.active {
  width: 100%;
}

.m4-title-line-arr {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(1200*var(--vw-base));
  height: calc(3*var(--vw-base));
}

.m4-title,
.m4-subtitle {
  opacity: 0;
  will-change: transform, opacity;
}





/* 確保內部的圖片(線條圖) 寬度正確且置中 */
.m2-title-line-arr,
.m4-title-line-arr {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  /* 填滿父層高度 */
  display: flex;
  align-items: center;
}

.m2-title-line-arr img,
.m4-title-line-arr img {
  width: 100%;
  height: auto;
  /* 讓圖片依比例縮放 */
}




/* --- 修正後的 MAIN4 線條 --- */
.m4-title-line {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* 確保垂直置中 */
  width: 0%;
  height: calc(3 * var(--vw-base));
  /* ✨ 補上高度 */
  overflow: hidden;
  z-index: 35;
  transition: width 1.5s ease;
}

.m4-title-line.active {
  /* 這裡的寬度應與 .m4-contain 保持一致 */
  width: calc(1200 * var(--vw-base));
}

.m4-title-line-arr {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 圖片容器寬度固定，避免被父層 width 壓縮 */
  width: calc(1200 * var(--vw-base));
  height: 100%;
  display: flex;
  align-items: center;
}

.m4-title-line-arr img {
  width: 100%;
  height: auto;
  display: block;
}



/*MAIN5*/
.main5 {
  position: relative;
  width: 73.8vw;
  left: 12.7vw;
  overflow: hidden;
  margin-bottom: calc(250 * var(--vw-base));
}

.m5-pic {
  position: relative;
  width: 100%;
  height: calc(592*var(--vw-base));
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: calc(60 * var(--vw-base));
  /* 保持響應式間距 */
  padding: 0 2vw 0 4vw;
}

.status-tag {
  color: #897e79;
  font-family: "Lora", serif;
  font-weight: 600;
  font-size: calc(22 * var(--vw-base));
  line-height: calc(40 * var(--vw-base));
  letter-spacing: 0.2em;
  text-align: left;
}

.brand-info {
  max-width: 75%;
  text-align: right;
  margin-left: auto;
  /* 防止 Flexbox 壓縮 */
  flex-shrink: 0;
}

.brand-info h2 {
  margin: 0;
  color: #897e79;
  text-align: right;
  font-size: calc(22 * var(--vw-base));
  line-height: calc(30 * var(--vw-base));
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.2em;
  font-weight: 700;
}

.brand-info p {
  margin: 1.5vw 0 0;
  color: #897e79;
  text-align: right;
  font-size: calc(16 * var(--vw-base));
  line-height: calc(30 * var(--vw-base));
  font-family: 'Noto Serif TC', sans-serif;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* --- MAIN5 初始狀態優化 --- */
.m5-pic,
.status-tag,
.brand-info h2,
.brand-info p {
  opacity: 0;
  will-change: transform, opacity;
}

/* 確保 .info-row 的排版穩定 */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  /* 防止位移動畫造成溢出捲軸 */
}




/*MAIN6*/
.main6 {
  position: relative;
  width: 73.8vw;
  left: 12.7vw;
  overflow: hidden;
  margin-bottom: calc(250 * var(--vw-base));
}

.m6-pic {
  position: relative;
  width: 100%;
  height: calc(964*var(--vw-base));
}

.main6 .img-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 18, 17, 0.7);
  z-index: 30;

  /* 新增：使用 Flexbox 讓子元素(img)置中 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
  /* 增加切換時的平滑感 */
}

.main6 .img-mask img {
  /* 您的原始設定 */
  width: calc(100 * var(--vw-base));
  height: calc(100 * var(--vw-base));

  /* 確保圖片不會被 Flex 壓縮變形 */
  flex-shrink: 0;
}

/* 強制 YouTube iframe 填滿父容器 */
#player iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/* 讓滑鼠移到遮罩上有點擊感 */
#video-trigger {
  cursor: pointer;
}


/*MAIN7*/
.main7 {
  width: 100%;
  position: relative;
  margin: calc(100 * var(--vw-base)) 0;
}

.mySwiper {
  width: 95vw;
  margin: 0 auto;
  overflow: hidden;
  z-index: 50;
}

.main7 .m7-pic {
  width: 100%;
  /* 根據原圖比例調整高度，假設為正方形或接近 1:1.2 */
  height: calc(478 * var(--vw-base));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 如果需要圖片之間的間距，由 Swiper 的 spaceBetween 控制，
   但 CSS 可以確保圖片撐滿 slide */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}



/*MAIN8*/
.main8 {
  position: relative;
  width: 100%;
  /* height: calc(680*var(--vw-base)); */
  /* margin-bottom: calc(100*var(--vw-base)); */
  box-sizing: border-box;
  padding: calc(140*var(--vw-base)) 0 calc(230*var(--vw-base)) calc(358*var(--vw-base));
}

.m8-contain {
  position: relative;
  width: calc(1200*var(--vw-base));
  display: flex;
  align-items: start;
  box-sizing: border-box;
  padding: calc(63*var(--vw-base)) 0 0 calc(0*var(--vw-base));
}

.detail-tilte {
  position: absolute;
  top: calc(0*var(--vw-base));
  left: calc(0*var(--vw-base));
  font-size: calc(22 * var(--vw-base));
  line-height: calc(36 * var(--vw-base));
  letter-spacing: 0.13em;
  color: #897e79;
  margin: 0;
  font-family: "Lora", serif;
  font-weight: 600;
}

.download-tilte {
  position: absolute;
  top: calc(0*var(--vw-base));
  left: calc(712*var(--vw-base));
  font-size: calc(22 * var(--vw-base));
  line-height: calc(36 * var(--vw-base));
  letter-spacing: 0.13em;
  color: #897e79;
  margin: 0;
  font-family: "Lora", serif;
  font-weight: 600;
}

.m8-title-line {
  position: absolute;
  left: 0;
  top: calc(40*var(--vw-base));
  width: 0%;
  height: calc(3*var(--vw-base));
  overflow: hidden;
  transition: width 1s ease;
}

.m8-title-line.active {
  width: calc(1198*var(--vw-base));
}

.m8-title-line-arr {
  position: absolute;
  top: 0;
  right: 0;
  height: calc(3*var(--vw-base));
  width: calc(1200*var(--vw-base));
}

.m8-detail {
  position: relative;
  width: calc(712*var(--vw-base));
  /* margin-top: calc(30*var(--vw-base)); */
  display: grid;
  /* 關鍵：第一欄由內容決定寬度，第二欄固定給線(比如1px)，第三欄填滿剩餘空間 */
  grid-template-columns: max-content 1px 1fr;
  /* 設定列與列之間的間距（視覺上的行距） */
  row-gap: calc(9*var(--vw-base));
  /* 設定欄與欄之間的間距（文字與線的距離） */
  column-gap: calc(20*var(--vw-base));
  align-items: start;
  /* 確保右邊字多換行時，左邊標題仍對齊頂部 */
  overflow: hidden;
  /* grid-template-rows: repeat(5, auto); */
  grid-template-columns: max-content 1px minmax(0, 1fr);
}

.m8-detail.dtailright {
  width: calc(485*var(--vw-base));
}

/* 左側名稱 */
.m8-detail-name {
  grid-column: 1;
  text-align: left;
  /* 這裡可以加顏色、字體大小等 */
  font-size: calc(16 * var(--vw-base));
  line-height: calc(25 * var(--vw-base));
  color: #897e79;
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 400;
  letter-spacing: 0.2em;
}

.m8-detail-name.jus-name {
  text-align-last: justify;
}

/* 右側描述 */
.m8-detail-desc {
  position: relative;
  width: calc(350*var(--vw-base));
  grid-column: 3;
  font-size: calc(16 * var(--vw-base));
  line-height: calc(25 * var(--vw-base));
  color: #897e79;
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 400;
  letter-spacing: 0.2em;
}

/* 完整的那條線 */
.m8-detail-line {
  position: relative;
  grid-column: 2;
  /* 放在中間那一欄 */
  /* grid-row: 1 / -1; */
  /* 讓它從第一行跨越到最後一行 (20只是一個保險的大數字) */
  top: 50%;
  width: 1px;
  height: calc(100% - 0.5vw);
  background-color: #756b66;
  /* 線條顏色 */
  justify-self: center;
  transform: translateY(-50%);
  /* 在 1px 的空間裡水平居中 */

  /* 如果要做動態，可以加這行 */
  transform-origin: top;
}






/* --- 新增的部分 --- */
.m8-header-wrapper {
  position: relative;
  width: calc(1200 * var(--vw-base));
  /* 與下方內容寬度一致 */
  display: flex;
  align-items: flex-end;
  /* 讓文字與線條底部對齊 */
  margin-bottom: calc(100 * var(--vw-base));
  /* 與下方 Detail 的間距 */
}

.m8-header-left {
  flex-shrink: 0;
  margin-right: calc(20 * var(--vw-base));
}

.m8-p-name {
  font-size: calc(22 * var(--vw-base));
  line-height: 1.2;
  color: #756b66;
  font-family: "Noto Serif TC", sans-serif;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.m8-p-ename {
  font-size: calc(18 * var(--vw-base));
  color: #756b66;
  font-family: "Lora", serif;
  margin-top: calc(5 * var(--vw-base));
  letter-spacing: 0.15em;
  font-weight: 600;
}

/* 伸縮軌道：強制它向右延伸 */
.m8-line-track {
  flex-grow: 1;
  position: relative;
  height: calc(20 * var(--vw-base));
  margin-bottom: calc(0 * var(--vw-base));
  /* 這裡不要用 overflow: hidden，否則符號裝飾可能會被切掉 */
}

/* 2. 動畫線條本體：這是一條從左往右長的「純直線」 */
.m8-flex-title-line {
  position: absolute;
  left: calc(0*var(--vw-base));
  bottom: 0;
  width: 0%;
  /* 初始寬度 */
  height: calc(3*var(--vw-base));
  /* 這裡填寫您圖片中線條的顏色 */
  transition: width 1s ease;
  overflow: hidden;
}


.m8-flex-title-line.active {
  width: calc(851*var(--vw-base));
}

.m8-flex-line-arr {
  position: absolute;
  right: 0;
  top: 0;
  width: calc(1200*var(--vw-base));
  height: calc(3*var(--vw-base));
}


/* 右側連結列：獨立浮在最右邊，壓在線條上 */
.m8-header-right {
  position: absolute;
  right: 0;
  bottom: 0.2vw;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--vw-base));
  /* 調整這個數值：數值越小，線條離 Link 越近；設為 0 則線條會穿過文字 */
  padding-left: calc(10 * var(--vw-base));

  z-index: 2;
  line-height: 1.2;
}

.m8-link {
  text-decoration: none;
  font-size: calc(18 * var(--vw-base));
  line-height: calc(30 * var(--vw-base));
  color: #756b66;
  letter-spacing: 0.1em;
  font-family: "Noto Serif TC", serif;
  font-weight: 400;

  /* 新增：平滑過渡效果，時間設為 0.3 秒 */
  transition: color 0.3s ease;
}

/* 新增：滑鼠滑入時改變顏色 */
.m8-link:hover {
  color: #c5a583;
}

.m8-split {
  color: #756b66;
  font-size: calc(10 * var(--vw-base));
  line-height: calc(30 * var(--vw-base));
  font-family: "Noto Serif TC", sans-serif;
}

/* 修正原本的 .m8-contain，確保它不會擠壓到上方 */
.m8-contain {
  position: relative;
  width: calc(1200 * var(--vw-base));
  display: flex;
  align-items: start;
  box-sizing: border-box;
  /* 原本 padding 為 63，若加了 header wrapper 覺得太遠可微調 */
  padding: calc(63 * var(--vw-base)) 0 0 0;
}