@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");

@font-face {
    font-family: "Butler_Regular";
    src: url(../fonts/Butler_Regular.otf);
}

@font-face {
    font-family: "Butler_Light";
    src: url(../fonts/Butler_Light.otf);
}

@font-face {
    font-family: "Butler_Bold";
    src: url(../fonts/Butler_Bold.otf);
}

.NotoSansTC {
    font-family: "Noto Sans TC";
    font-weight: 300;
    letter-spacing: 0.2em;
}

.Butler_Light {
    font-family: "Butler_Light";
    letter-spacing: 0;
}

.Butler_Regular {
    font-family: "Butler_Regular";
    /* letter-spacing: 0; */
}

[data-aos="opacity-up"] {
    opacity: 1;
    clip-path: inset(100% 0 0% 0);
    /* 初始状态下完全隐藏 */
}

[data-aos="opacity-up"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* 显示全部图片 */
}



body,
html {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* scroll-behavior: smooth; */
    --vw-base: calc(100vw / 1920);
    /* cursor: none; */
    /* 自訂游標暫時停用 */
}


body>* {}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    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;
}

/* 隱藏瀏覽器原生的滾動條以防止 100vw 的寬度包含滾動條 (Hide native scrollbar to prevent 100vw from including scrollbar width) */
::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

html {
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE and Edge */
}


/* 自製滾動條軌道容器 (Custom Scrollbar Track Container) */
.custom-scrollbar {
    position: fixed;
    right: 4px;
    top: 4px;
    bottom: 4px;
    width: 4px;
    /* background-color: rgba(255, 255, 255, 0.02); */
    /* 微弱的半透明背景軌道 */
    border-radius: 4px;
    z-index: 999999;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* 當滑鼠懸停於軌道或是有 visible 類別時顯示滾動條 (Show scrollbar when hovered or has visible class) */
.custom-scrollbar.visible,
.custom-scrollbar:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.08);
    /* 懸停時軌道背景變深一點 */
}

/* 自製滾動條滑塊 (Custom Scrollbar Thumb) */
.custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    /* 高度由 JS 動態設定 */
    background-color: rgba(0, 0, 0, 0.3);
    /* 半透明白色色塊 */
    /* border-radius: 4px; */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* 滑塊懸停或啟用狀態 (Thumb hover or active state) */
.custom-scrollbar-thumb:hover,
.custom-scrollbar-thumb.active {
    background-color: rgba(0, 0, 0, 0.5);
    /* 更亮一些 */
}

/* 拖曳時臨時停用平滑捲動以防止滑塊抖動滯後 (Temporarily disable smooth scroll during drag to prevent thumb lag) */
html.no-smooth {
    scroll-behavior: auto !important;
}

.pic-txt {
    position: absolute;
    bottom: calc(8* var(--vw-base));
    right: calc(8* var(--vw-base));
    color: #fff;
    font-size: calc(12* var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: calc(20* var(--vw-base));
    z-index: 10;
    text-shadow: #4e484698 1px 1px 1px;
}

/*內容*/
.container {
    position: relative;
    width: 100%;
    height: auto;
    /* opacity: 0; */
    background-color: #e6e6e6;
}


.m1 {
    position: relative;
    width: 100%;
    height: calc(950*var(--vw-base));
    background-color: #e6e6e6;
    /* 白色背景開始 */
    z-index: 10;
}

.m1-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
    /* 或 screen */
    opacity: 0.08;
    /* 使用遮罩：700vw-base前完全顯示，700~900vw-base漸漸淡出，900~950vw-base完全遮蔽影片 (CSS mask-image gradient stops) */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(700*var(--vw-base)), rgba(0, 0, 0, 0) calc(900*var(--vw-base)), rgba(0, 0, 0, 0) calc(950*var(--vw-base)));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) calc(700*var(--vw-base)), rgba(0, 0, 0, 0) calc(900*var(--vw-base)), rgba(0, 0, 0, 0) calc(950*var(--vw-base)));
}


.m1-pic {
    position: absolute;
    /* top: calc(438*var(--vw-base)); */
    top: calc(438*var(--vw-base));
    /* 950 - 512 = 438, 貼齊底部 */
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(1569*var(--vw-base));
    height: calc(512*var(--vw-base));
    z-index: 5;
    overflow: hidden;
    /* 新增裁切效果，隱藏超出容器的部分 (Clip overflowing parts) */
    will-change: transform;
    /* transform 才是 GPU compositing 屬性，width/height/top 會觸發 layout reflow */
}

.logo-row {
    position: absolute;
    left: 50%;
    top: calc(20*var(--vw-base));
    transform: translate(-50%, 0);
    width: calc(71*var(--vw-base));
    height: calc(41*var(--vw-base));
    opacity: 0;
    /* 預設隱藏，待圖片即將升到置頂約 92% 時淡入 */
}

.logo-row img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.m1-scroll {
    position: absolute;
    top: calc(750*var(--vw-base));
    /* 位於下方 230vw-base 剩餘空間的居中偏下 */
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    z-index: 3;
    opacity: 0;
    /* 預設隱藏，由 GSAP 控制淡入與上浮 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10*var(--vw-base));
    z-index: 3;
}

.m1-scroll-txt {
    position: relative;
    color: #333333;
    font-family: "Butler_Light";
    font-size: calc(18*var(--vw-base));
    line-height: calc(25*var(--vw-base));
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0em;
}

/* 外層容器：確保箭頭位置固定 */
.m1-scroll-wrapper {
    position: relative;
    width: calc(4 * var(--vw-base));
    height: calc(137 * var(--vw-base));
}

/* 1. 底層靜態箭頭 */
.arr1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.arr1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 2. 動態光束層 */
.arr2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* 初始：隱藏光束 */
    clip-path: inset(0% 0% 100% 0%);
}

.arr2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* ==========================================
   M2 核心外框與排版佈局 (新分欄結構)
   ========================================== */
.m2 {
    position: relative;
    width: 100%;
    /* 1. 移除固定高度，改由內容無限向下撐開 */
    min-height: 100vh;
    background-color: #e6e6e6;
    /* 白色背景開始 */

    /* 2. 使用 Flex 讓左大欄、中欄、右大欄水平並排，並維持頂端對齊 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: calc(100 * var(--vw-base)) 0;
    box-sizing: border-box;
}

/* 背景裝飾線改為滿版絕對定位，完全不干擾圖文排版 */
/*.m2-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.m2-bg .bg1,
.m2-bg .bg2 {
    position: absolute;
    left: 0;
    top: calc(155 * var(--vw-base));
    width: 100%;
    height: calc(550 * var(--vw-base));
}*/
/* 固定背景的容器 */
.fixed-bg-container {
    position: fixed;
    /* 關鍵：相對於視窗固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* 放在所有內容後方 */
}

.fixed-bg-container .bg1,
.fixed-bg-container .bg2 {
    position: absolute;
    top: calc(155 * var(--vw-base));
    width: 100%;
    height: calc(550 * var(--vw-base));
    background-repeat: no-repeat;
    background-size: contain;
    /* 或 cover，視你的圖片需求而定 */
}

.fixed-bg-container .bg1 {
    background-image: url('../img/index/m2-bg-line1.svg');
}

.fixed-bg-container .bg2 {
    background-image: url('../img/index/m2-bg-line2.svg');
}



/* ==========================================
   【新設】左側與右側的「大外包裝欄」
   ========================================== */
.m2-col-left {
    display: flex;
    flex-direction: column;
    /* 這裡可以控制左邊無限加時，上下兩組之間的間距 */
    gap: calc(300 * var(--vw-base));
    width: calc(563 * var(--vw-base));
    margin: 16vw 0 3vw calc(95 * var(--vw-base));
    z-index: 2;
}

.m2-col-right {
    display: flex;
    flex-direction: column;
    /* 這裡可以控制右邊無限加時，上下兩組之間的間距 */
    gap: calc(300 * var(--vw-base));
    width: calc(442 * var(--vw-base));
    margin: 10vw calc(109 * var(--vw-base)) 3vw 0;
    z-index: 2;
}

/* ==========================================
   單組圖文區塊設定 (修正原本的定位偏移)
   ========================================== */
.m2-left {
    position: relative;
    display: block;
    width: 100%;
    /* 寬度由父層大欄位控制 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.m2-left .pic {
    position: relative;
    width: 100%;
    height: calc(608 * var(--vw-base));
    overflow: hidden;
    /* 防止圖片放大時溢出 (Prevent image overflow during scale) */
}

.m2-right {
    position: relative;
    display: block;
    width: 100%;
    /* 寬度由父層大欄位控制 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 6vw;
}

.m2-right .pic {
    position: relative;
    width: 100%;
    height: calc(502 * var(--vw-base));
    overflow: hidden;
    /* 防止圖片放大時溢出 (Prevent image overflow during scale) */
}

.m2-left .pic-inner,
.m2-right .pic-inner {
    width: 100%;
    height: 100%;
    transform: scale(1.1) translateZ(0);
    will-change: transform;
}

/* ==========================================
   【核心】中間文字 Sticky 固定黏滯設定
   ========================================== */
.m2-center {
    position: -webkit-sticky;
    position: sticky;
    top: -3vw;
    /* 滾動到頂時鎖定 */
    height: 100vh;
    /* 鎖定滿版視窗高度 */
    z-index: 3;
    flex: 1;
    /* 自動分配並填滿左右剩下的空間 */

    /* 讓內層文字在這 100vh 之中保持垂直、水平置中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 calc(100 * var(--vw-base)) 0 0;
    box-sizing: border-box;
}

/* ==========================================
   文字、箭頭細節樣式 (保留你原本的所有參數)
   ========================================== */
.m2-left h4,
.m2-right h4 {
    color: #333333;
    font-family: "Noto Serif TC";
    font-weight: 300;
    font-size: calc(20 * var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.3em;
    margin-top: calc(18 * var(--vw-base));
    margin-bottom: 0;
}

.m2-left .arr,
.m2-right .arr {
    margin-top: calc(10 * var(--vw-base));
    width: calc(58 * var(--vw-base));
    height: calc(3 * var(--vw-base));
}

.m2-left .arr img,
.m2-right .arr img {
    object-fit: contain;
}

.m2-left p,
.m2-right p {
    margin-top: calc(12 * var(--vw-base));
    margin-bottom: 0;
    color: #333333;
    font-family: "Noto Serif TC";
    font-weight: 300;
    font-size: calc(16 * var(--vw-base));
    line-height: 1.6em;
    letter-spacing: 0.2em;
}

.m2-right p {
    text-align: end;
}

.m2-left p,
.m2-right p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.m2-center .txt1 {
    color: #333333;
    font-family: "Noto Serif TC";
    font-weight: 300;
    font-size: calc(20 * var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.3em;
}

.m2-center .txt1 .eng {
    color: #333333;
    font-weight: 300;
    font-family: "Butler_Light";
    font-size: calc(18 * var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.05em;
    font-style: italic;
}

.m2-center .txt2 {
    margin-top: calc(40 * var(--vw-base));
    color: #333333;
    font-family: "Butler_Light";
    font-size: calc(18 * var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0em;
    font-style: italic;
    text-align: center;
}

.m2-center .txt3 {
    margin-top: calc(38 * var(--vw-base));
    color: #333333;
    font-family: "Noto Serif TC";
    font-weight: 300;
    font-size: calc(16 * var(--vw-base));
    line-height: 1.6em;
    letter-spacing: 0.3em;
    text-align: center;
}

/* ==========================================
   M2 圖片 Hover Overlay 特效
   ========================================== */
.m2-left .pic,
.m2-right .pic {
    cursor: pointer;
    overflow: hidden;
}

/* 暗色遮罩 */
.pic-hover-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.5s ease;
    pointer-events: none;
    z-index: 2;
}

.m2-left .pic:hover .pic-hover-overlay,
.m2-right .pic:hover .pic-hover-overlay {
    background-color: rgba(0, 0, 0, 0.4);
}



/* 2. 新的 MORE 按鈕樣式 (取代原本的 .pic-hover-more) */
.m2-more {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    opacity: 0;
    /* 預設隱藏 */
    transition: opacity 0.5s ease;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
}

/* Hover 時讓整個按鈕顯現 */
.m2-right .pic:hover .m2-more,
.m2-left .pic:hover .m2-more {
    opacity: 1;
}

/* 3. 文字樣式 */
.m2-more .more-txt {
    color: #ffffff;
    font-family: "Butler_Regular";
    font-size: calc(18 * var(--vw-base));
    font-style: italic;
    letter-spacing: 0.05em;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    /* 確保文字在圓圈上層 */
}

.m2-more .m2-more-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(107 * var(--vw-base));
    height: calc(107 * var(--vw-base));
    transform: translate(-50%, -50%);
    border: none !important;
    /* 如果原本是線條圈 */
    z-index: 1;
    /* 墊在文字與箭頭後面 */
    box-sizing: border-box;
    transform-origin: center center;
}

.m2-more .m2-more-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hover 時圓圈的縮放動畫 */
.m2-right .pic:hover .m2-more .m2-more-circle {
    opacity: 1;
}

.m2-more-arr {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(107 * var(--vw-base));
    height: calc(107 * var(--vw-base));
    transform: translate(-50%, -50%);
    border: none !important;
    /* 如果原本是線條圈 */
    z-index: 2;
    /* 墊在文字與箭頭後面 */
    box-sizing: border-box;
    transform-origin: center center;
}

/* ==========================================
   【M2 區塊】影像與影片通用樣式完美修正
   ========================================== */
/* ==========================================
   偵錯專用：強制撐開影片容器並還原顯示
   ========================================== */

/* 1. 強制讓包覆影片的容器擁有寬高與固定比例 (以常見的 4:3 或 16:9 測試) */
.m2-pic-left-el,
.m2-pic-right-el {
    position: relative !important;
    width: 100% !important;
    min-height: 450px !important;
    /* 暫時強迫給它一個基本高度 */
}

.pic-inner {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* 2. 暴力拔除 GSAP 的隱藏與模糊，讓影片本體現形 */
.m2-pic-left-el video,
.m2-pic-right-el video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* 讓影片像 background-size: cover 一樣填滿 */

    /* 核心覆寫：打破被 GSAP 鎖死的透明度 */
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* 3. 內部圖片與影片通用樣式：絕對定位並強制裁剪滿版 */
.m2-pic-left-el .pic-inner img,
.m2-pic-right-el .pic-inner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 強制裁剪填滿，避免影片比例不對出現黑邊 */
    object-position: center;
    /* 置中對齊 */
    display: block;

    /* --- 關鍵修正：將初始狀態寫在最高權重，交給 GSAP 初始化處理 --- */
    opacity: 0;
    filter: blur(20px);
    transform: scale(1.05);
}

/* 3. 自訂 AOS 特效：m2-focus 縮放模糊動態（支援圖片與影片） */
[data-aos="m2-focus"] img,
[data-aos="m2-focus"] video {
    opacity: 0;
    transform: scale(1.05) translateZ(0);
    filter: blur(20px);
    will-change: transform, filter, opacity;
    transition: transform 1.44s cubic-bezier(0.22, 1, 0.36, 1) 0.48s,
        opacity 1.68s cubic-bezier(0.22, 1, 0.36, 1) 0.36s,
        filter 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.24s;
}

[data-aos="m2-focus"].aos-animate img,
[data-aos="m2-focus"].aos-animate video {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* 4. 修正 Hover 遮罩與裝飾元件層級，確保它們乖乖壓在影片/圖片上方 */
.pic-hover-overlay,
.pic-hover-more,
.pic-hover-circle {
    z-index: 2;
    /* 高於 .pic-inner 的 z-index: 1 */
}


/* ==========================================
   GSAP 文字兩階段動畫初始狀態 & 排版微調
   ========================================== */

/* 原本其他區塊的 GSAP 初始化保持不變 */
.m4-contain .txt1,
.m4-contain .txt2-1,
.m4-contain .txt2-2 div,
.m4-contain .txt2-3,
.m4-contain .more-btn,
.m5-contain .txt1,
.m5-contain .txt2-1,
.m5-contain .txt2-2 div,
.m5-contain .txt2-3,
.m5-contain .more-btn {
    opacity: 0;
    transform: translateY(20px);
}

.m4-contain .txt2-2 div,
.m5-contain .txt2-2 div {
    margin-bottom: 0;
}

.m4-contain .txt2-2 div:first-child {
    margin-bottom: calc(20 * var(--vw-base));
}

.m5-contain .txt2-2 div:first-child {
    margin-top: calc(20 * var(--vw-base));
}

.m4-contain .txt2-3 div,
.m5-contain .txt2-3 div {
    line-height: 1.6em;
}

/* --- M2 專屬 GSAP 動態初始狀態 --- */
.m2-left h4,
.m2-left .arr,
.m2-left p {
    opacity: 0;
    transform: translateX(20px);
}

.m2-right h4,
.m2-right .arr,
.m2-right p {
    opacity: 0;
    transform: translateX(-20px);
}

.m2-center .txt1,
.m2-center .txt2 div,
.m2-center .txt3 {
    opacity: 0;
    transform: translateY(20px);
}

.m2-center .txt2 div {
    margin-bottom: 0;
}

.m2-center .txt2 div:nth-child(1),
.m2-center .txt2 div:nth-child(2) {
    margin-bottom: calc(20 * var(--vw-base));
}

.m2-center .txt3 div {
    line-height: 1.6em;
}





.more-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 確保內容在圓圈內垂直置中 */
    margin-top: calc(145 * var(--vw-base));
    position: relative;
    /* 關鍵：讓內層圓圈能對齊這個外框 */

    /* 根據設計稿，設定圓圈按鈕整體的點擊範圍寬高 (例如 120px) */
    /* width: calc(120 * var(--vw-base)); */
    /* height: calc(120 * var(--vw-base)); */
}

.more-txt {
    color: #333333;
    font-family: "Butler_Regular";
    font-size: calc(16 * var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.05em;
    font-style: italic;
    z-index: 2;
    /* 確保文字在圓圈圖層上方 */
}

.more-arr {
    position: absolute;
    bottom: calc(-3 * var(--vw-base));
    width: calc(58 * var(--vw-base));
    height: calc(3 * var(--vw-base));
    z-index: 2;
}

.more-arr img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* --- 新增：CSS 純手工繪製圓圈 --- */
.m-more-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 這裡依你原本的圖片樣式決定要哪一種底色： */
    border: calc(1 * var(--vw-base)) solid #333333;
    /* 如果原本是線條圈 */
    /* background-color: #000000; */
    /* 如果原本是實心圈 */

    border-radius: 50%;
    /* 關鍵：強制變正圓 */
    z-index: 1;
    /* 墊在文字與箭頭後面 */
    box-sizing: border-box;
    transform-origin: center center;
}



.m3 {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 10;
    background-color: #e6e6e6;
    overflow: visible;
}

.m3-swiper {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* 讓 swiper-wrapper 自動撐開高度 */
.m3-swiper .swiper-wrapper {
    height: auto !important;
    display: flex;
    align-items: flex-start;
}

/* 確保 slide 不被限制高度 */
.m3-swiper .swiper-slide {
    height: auto !important;
    min-height: calc(361 * var(--vw-base));
}

/* 圖片區塊維持高度 */
.m3-swiper .sw-pic {
    position: relative;
    width: 100%;
    height: calc(361 * var(--vw-base));
    flex-shrink: 0;
}

/* 文字區塊：改用 relative，透過 margin 撐開與圖片的距離 */
.m3-swiper .sw-out-txt {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: calc(20 * var(--vw-base));
    margin-bottom: calc(20 * var(--vw-base));
    color: #333333;
    font-family: "Noto Serif TC", serif;
    font-size: calc(16 * var(--vw-base));
    line-height: 1.8em;
    letter-spacing: 0.2em;
    z-index: 15;
    /* 移除所有 CSS transition，全權交給 GSAP */
    opacity: 0;
    filter: blur(12px);
}

.m3-swiper .sw-out-txt p {
    display: inline;
}

.m3-swiper .sw-out-txt p:first-child {
    padding-right: 5vw;
}



.m3-swiper .sw2-txt1 {
    position: absolute;
    left: calc(340*var(--vw-base));
    top: 0;
    width: calc(596*var(--vw-base));
    height: calc(361*var(--vw-base));
}

.m3-swiper .sw2-txt2 {
    position: absolute;
    right: calc(238*var(--vw-base));
    top: 0;
    width: calc(420*var(--vw-base));
    height: calc(361*var(--vw-base));
}

/* ==========================================
   Swiper 輪播特效樣式 (Swiper Animation Effects)
   ========================================== */

/* 1. sw1 特效：txt1~8 fade in (0.6s) + line1~8 clip-down (1s)，每組錯開 0.2s，由 GSAP 控制 */
.m3-swiper .sw1 [class^="sw1-txt"],
.m3-swiper .sw1 [class^="sw1-line"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.m3-swiper .sw1 [class^="sw1-txt"] {
    opacity: 0;
    /* GSAP 負責 fade in */
}

.m3-swiper .sw1 [class^="sw1-line"] {
    clip-path: inset(0 0 100% 0);
    /* GSAP 負責 clip-down */
}

/* 2. sw2 特效：blur + 往右淡入 + clip-right 同時作用
   opacity 初始 0.2 讓 clip 展開時有東西可見，clip 初始 60% 讓右側展開效果明顯 */
.m3-swiper .sw2 .sw2-txt1 {
    opacity: 0.2;
    transform: translateX(calc(-30*var(--vw-base)));
    filter: blur(12px);
    clip-path: inset(0 95% 0 0);
    transition: opacity 2s ease,
        transform 2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1s ease,
        clip-path 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.m3-swiper .sw2 .sw2-txt2 {
    opacity: 0.2;
    transform: translateX(calc(-30*var(--vw-base)));
    filter: blur(12px);
    clip-path: inset(0 95% 0 0);
    transition: opacity 2s ease 0.8s,
        transform 2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s,
        filter 1s ease 0.8s,
        clip-path 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}

/* sw2 動畫激活 */
.m3-swiper.in-view .swiper-slide-active.sw2 .sw2-txt1,
.m3-swiper.in-view .swiper-slide-active.sw2 .sw2-txt2 {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    clip-path: inset(0 0% 0 0);
}

/* 修改 sw1 容器，讓內部內容可以撐開高度 */
.m3-swiper .sw1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 確保圖片層級與定位正確 */
.m3-swiper .sw1 .sw-pic {
    position: relative;
    width: 100%;
    height: calc(361 * var(--vw-base));
}

/* 設定外層文字樣式與初始動畫狀態 */
.m3-swiper .sw1 .sw1-out-txt {
    text-align: center;
    margin-top: calc(12 * var(--vw-base));
    margin-bottom: 0;
    color: #333333;
    font-family: "Noto Serif TC";
    font-weight: 300;
    font-size: calc(14 * var(--vw-base));
    line-height: 1.6em;
    letter-spacing: 0.2em;

    /* 動畫初始狀態 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
    z-index: 10;
}

/* 動畫激活狀態 */
.m3-swiper.in-view .swiper-slide-active.sw1 .sw1-out-txt {
    opacity: 1;
    transform: translateY(0);
}



.m4 {
    position: relative;
    width: 100%;
    height: calc(1277*var(--vw-base));
    background-color: #e6e6e6;
    z-index: 10;
}

.m4-bg {
    position: absolute;
    left: 0;
    top: calc(609*var(--vw-base));
    width: 100%;
    height: calc(493*var(--vw-base));
    /* 初始將背景裁剪於最左側 (Initially clipped to the leftmost) */
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
}

.m4-bg .bg-txt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m4-pic {
    position: absolute;
    left: calc(900*var(--vw-base));
    top: calc(217*var(--vw-base));
    width: calc(766*var(--vw-base));
    height: calc(817*var(--vw-base));
    overflow: hidden;
}

/* 確保 Swiper 填滿 .m4-pic */
.m4-pic.swiper {
    overflow: hidden;
}

.m4-pic .swiper-wrapper,
.m4-pic .swiper-slide {
    width: 100%;
    height: 100%;
}

.m4-pic .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持圖片比例填充 */
}

/* 點點容器的自訂樣式，方便後續替換 */
.m4-pic .swiper-pagination {
    bottom: 20px !important;
    /* 根據你的需求調整位置 */
    z-index: 10;
}

.m4-pic .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
    margin: 0 6px !important;
    transition: 0.3s;
}

.m4-pic .swiper-pagination-bullet-active {
    background: #fff;
    /* 點點選中時顏色 */
}

.m4-contain {
    position: absolute;
    left: calc(299*var(--vw-base));
    top: calc(307*var(--vw-base));
    display: flex;
}

.m4-contain .txt1 {
    margin-right: calc(20*var(--vw-base));
    color: #333333;
    font-family: "Noto Serif TC";
    font-weight: 400;
    font-size: calc(20*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.3em;
}

.m4-contain .txt2 {
    margin-right: calc(48*var(--vw-base));
    display: flex;
    flex-direction: column;
}

.m4-contain .txt2-1 {
    color: #333333;
    font-family: "Butler_Light";
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0em;
    font-style: italic;
}

.m4-contain .txt2-2 {
    margin-top: calc(34*var(--vw-base));
    color: #333333;
    font-family: "Butler_Light";
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0em;
    font-style: italic;
}

.m4-contain .txt2-3 {
    margin-top: calc(33*var(--vw-base));
    color: #333333;
    font-family: "Noto Serif TC";
    font-weight: 400;
    font-size: calc(16*var(--vw-base));
    line-height: 1.6em;
    letter-spacing: 0.3em;
}

.m4 .more-btn {
    align-self: flex-end;
}

/* m4 more-btn 特殊樣式：半月裝飾預設顯示，hover 時消失並出現圓圈 */
.m4-more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -2vw;
}

/* m4 more-arr：預設顯示，hover 往右淡出 */
.m4-more .more-arr {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.m4-more:hover .more-arr {
    opacity: 0;
    transform: translateX(calc(15*var(--vw-base)));
}

/* 圓圈 circle-black.png — arr 先跑完（0.25s）後才出現 */
.m4-more .m4-more-circle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(60*var(--vw-base)) !important;
    height: calc(60*var(--vw-base)) !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.m4-more:hover .m4-more-circle {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.m5 {
    position: relative;
    width: 100%;
    height: calc(897*var(--vw-base));
    background-color: #e6e6e6;
    z-index: 10;
}

/* m5 more-btn 白色版：與 m4-more 相同結構，filter:invert(1) 變白 */
.m5-more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* m5 more-arr：預設顯示，hover 往右淡出 */
.m5-more .more-arr {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.m5-more:hover .more-arr {
    opacity: 0;
    transform: translateX(calc(15*var(--vw-base)));
}

/* 圓圈 — 白色（brightness(0)+invert(1)），預設隱藏，hover 出現（fade + scale 1.1→1） */
.m5-more .m5-more-circle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: calc(60*var(--vw-base)) !important;
    height: calc(60*var(--vw-base)) !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.m5-more:hover .m5-more-circle {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.m5-pic {
    position: relative;
    margin: 0 auto;
    width: calc(1782*var(--vw-base));
    height: calc(842*var(--vw-base));
    overflow: hidden;
    /* 防止圖片放大時溢出 (Prevent image overflow during scale) */
}

.m5-contain {
    position: absolute;
    left: calc(0*var(--vw-base));
    top: calc(0*var(--vw-base));
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    box-sizing: border-box;
    padding-bottom: calc(22*var(--vw-base));
}

.m5-contain .txt1 {
    color: #fff;
    font-family: "Noto Serif TC";
    font-weight: 400;
    font-size: calc(20*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.3em;
}

.m5-contain .txt2 {
    margin-top: calc(8*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m5-contain .txt2-1 {
    color: #fff;
    font-family: "Butler_Light";
    line-height: 1.15em;
    letter-spacing: 0em;
    font-style: italic;
}

.m5-contain .txt2-2 {
    margin-top: calc(40*var(--vw-base));
    color: #fff;
    font-family: "Butler_Light";
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0em;
    font-style: italic;
    text-align: center;
}

.m5-contain .txt2-3 {
    margin: calc(100*var(--vw-base)) 0 0 calc(13*var(--vw-base));
    color: #fff;
    font-family: "Noto Serif TC";
    font-weight: 400;
    font-size: calc(16*var(--vw-base));
    line-height: 1.6em;
    letter-spacing: 0.3em;
    text-align: center;
}

.m5 .more-btn {
    margin: calc(70*var(--vw-base)) calc(10*var(--vw-base)) calc(22*var(--vw-base)) 0;
}

.m5 .more-btn .more-txt {
    color: #fff;
}

.back-to-top {
    z-index: 999;
    position: fixed;
    right: calc(45 * var(--vw-base));
    bottom: calc(130 * var(--vw-base));
    width: calc(43 * var(--vw-base));
    height: calc(70 * var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 新增懸停 (Hover) 效果：使按鈕整體優雅地向上平移 5 像素 */
.back-to-top:hover {
    transform: translateY(-5px);
}

.back-to-top div {
    color: #333333;
    font-family: "Butler_Light";
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0em;
    font-style: italic;
}

.back-to-top .back-txt-2 {
    margin-right: calc(3*var(--vw-base));
}

.back-to-top .back-bottom-line {
    position: absolute;
    left: calc(-2 * var(--vw-base));
    bottom: calc(-3 * var(--vw-base));
    width: calc(45 * var(--vw-base));
    height: calc(45 * var(--vw-base));
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}


.back-to-top:hover .back-bottom-line {
    transform: translateY(10px) rotate(-15deg);
}

/* ==========================================
   GSAP navbar 動態初始狀態 (GSAP Navbar Animation Initial State)
   ========================================== */
.bar-logo {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(30px);
    /* 初始高模糊狀態 (Initial heavy blur) */
}



.m1-pic>img,
.m1-pic>video {
    opacity: 0;
    filter: blur(30px);
    /* 初始高模糊狀態 (Initial heavy blur) */
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: calc(720*var(--vw-base));
    object-fit: cover;
    will-change: transform, filter, opacity;
    /* 提示瀏覽器對濾鏡、透明度與視差平移等視覺屬性開啟 GPU 加速 */
}