@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+TC:wght@100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');


@font-face {
    font-family: "Futura-Std-Heavy";
    src: url(../fonts/Futura\ Std\ Heavy.otf);
}

@font-face {
    font-family: "Futura-Std-Light";
    src: url(../fonts/Futura\ Std\ Light.otf);
}

@font-face {
    font-family: "Futura-Std-Medium";
    src: url(../fonts/Futura\ Std\ Medium.otf);
}

@font-face {
    font-family: "Futura-Std-BookOblique";
    src: url(../fonts/Futura\ Std\ Book\ Oblique.otf);
}


.Lato {
    font-family: "Lato";
}

.NotoSansTC {
    font-family: "Noto Sans TC";

}

:root {
    --vw-base: 1px;
    /* 字級專用 base：桌機 = 1px（設計 px）；手機設下限避免過小（見 @media 768） */
    --vw-base-lock: 1px;
}

body,
html {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

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: calc(0 * var(--vw-base));
    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;
}

.sw-prev {
    width: calc(9 * var(--vw-base));
    height: calc(15 * var(--vw-base));
    background-image: url(../img/sw-prev.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;

}

.sw-next {
    width: calc(9 * var(--vw-base));
    height: calc(15 * var(--vw-base));
    background-image: url(../img/sw-next.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}



.container {
    position: relative;
    width: 100%;
    height: auto;
    /* opacity: 0; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main1 {
    position: relative;
    width: 100%;
    height: calc(900 * var(--vw-base));
    background-color: #000;
}

.main1-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    max-width: calc(1400 * var(--vw-base));
    overflow: hidden;
    /* scale(1.08) 溢出由此裁切，動畫交給內層 img */
}

/* 載入特效初始狀態（避免 GSAP 執行前閃一下）；動畫由 GSAP 統一控制 */
.main1-bg img {
    opacity: 0;
}

.m1-content {
    position: absolute;
    left: 50%;
    bottom: calc(80 * var(--vw-base));
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(101 * var(--vw-base));
}

.m1-txt {
    width: calc(212 * var(--vw-base));
    height: calc(68 * var(--vw-base));
    opacity: 0;
}

.m1-arr {
    width: calc(22 * var(--vw-base));
    height: calc(46 * var(--vw-base));
    opacity: 0;
}

/* 各 section 頂端青綠分隔線（由 border-top 改為獨立元素，方便 clip 由左至右顯示） */
.main3-border-top,
.main4-border-top,
.main5-border-top,
.main6-border-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(3 * var(--vw-base));
    background-color: #54B2B0;
    z-index: 2;
}

.main2 {
    width: calc(1040 * var(--vw-base));
    box-sizing: border-box;
    padding: calc(80 * var(--vw-base)) 0 calc(55 * var(--vw-base)) 0;
    display: flex;
    gap: calc(67 * var(--vw-base));
}

.main2 .txt1 {
    width: calc(470 * var(--vw-base));
    padding-left: calc(16.5 * var(--vw-base));
}

.main2 .txt1 h3 {
    font-family: "Noto Sans TC";
    font-size: calc(23 * var(--vw-base-lock));
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: 0.03em;
}

.main2 .txt1 p {
    font-family: "Noto Sans TC";
    font-size: calc(16 * var(--vw-base-lock));
    font-weight: 300;
    line-height: 1.4em;
    letter-spacing: 0.05em;
    text-align: justify;
}

.main2 .txt2 {
    width: calc(465 * var(--vw-base));
}

.main2 .txt2 h3 {
    font-family: "Rethink Sans";
    font-size: calc(22 * var(--vw-base-lock));
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: -0.03em;
}

.main2 .txt2 p {
    font-family: "Lato";
    font-size: calc(15 * var(--vw-base-lock));
    font-weight: 300;
    line-height: 1.47em;
    letter-spacing: 0.02em;
}

.main3 {
    position: relative;
    width: calc(1040 * var(--vw-base));
    height: calc(506 * var(--vw-base));
}

.m3-swiper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: calc(78 * var(--vw-base));
}

.m3-swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--vw-base));
    box-sizing: border-box;
    margin: 0;
    cursor: pointer;
}

.m3-swiper .swiper-slide .sw-pic {
    width: calc(214 * var(--vw-base));
    height: calc(298.4 * var(--vw-base));
}

.m3-swiper .swiper-slide .sw-pic img {
    object-fit: contain;
}

.m3-swiper .swiper-slide .sw-txt {
    width: calc(214 * var(--vw-base));
    height: calc(16 * var(--vw-base));
    font-family: "Rethink Sans";
    font-size: calc(18 * var(--vw-base-lock));
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: 0.05em;
    text-align: center;
    /* transition: color 0.3s ease; */
    color: #54B2B0;
}

.m3-swiper .swiper-slide:hover .sw-txt {
    color: #54B2B0;
}

.main3 .sw-btn {
    position: absolute;
    right: 0;
    top: calc(39 * var(--vw-base));
    display: flex;
    gap: calc(28 * var(--vw-base));
    z-index: 10;
}

.main3-layout {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #393939ba;
    z-index: 101;
    /* 預設隱藏，點 m3 slide 後加 .is-open 才顯示 */
    display: none;
    /* 內容超過視窗高度時可向下捲動，不會破版 */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(40 * var(--vw-base)) 0;
    box-sizing: border-box;
}

.main3-layout.is-open {
    display: flex;
}

/* layout 開啟時隱藏自製捲軸（背景已鎖捲動），避免它擋到右上的關閉 X
   用 !important 蓋過 scrollbar.js 設的 inline display */
body.layout-open #custom-scrollbar-track {
    display: none !important;
}

/* 右上白色關閉 X（content 外，固定於視窗右上） */
.layout-close {
    position: fixed;
    top: calc(28 * var(--vw-base));
    right: calc(28 * var(--vw-base));
    width: calc(34 * var(--vw-base));
    height: calc(34 * var(--vw-base));
    cursor: pointer;
    z-index: 20;
}

.layout-close::before,
.layout-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(2 * var(--vw-base));
    background-color: #fff;
    border-radius: calc(2 * var(--vw-base));
}

.layout-close::before {
    transform: translateY(-50%) rotate(45deg);
}

.layout-close::after {
    transform: translateY(-50%) rotate(-45deg);
}

.main3-layout .content-box {
    min-height: 90vh;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* width: 100%; */
    box-sizing: border-box;
}

.main3-layout .content {
    position: relative;
    /* margin:auto → 內容比視窗矮時垂直置中；比視窗高時可正常捲動（不被裁切） */
    margin: auto;
    background-color: #fff;
    box-sizing: border-box;
    padding: calc(30*var(--vw-base));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: calc(22 * var(--vw-base));
    grid-row-gap: calc(0 * var(--vw-base));
}

/* 只有 1 張卡時，讓卡片橫跨兩欄並水平置中 */
.main3-layout .content.has-one .card {
    grid-column: 1 / -1;
    justify-self: center;
    /* width: 50%; */
}

.main4 {
    position: relative;
    width: calc(1040 * var(--vw-base));
    height: auto;
    box-sizing: border-box;
    padding: calc(40 * var(--vw-base)) calc(0.5 * var(--vw-base)) 0 calc(0.5 * var(--vw-base));
}

.m4-title {
    color: #000;
    font-family: "Rethink Sans";
    font-size: calc(30 * var(--vw-base-lock));
    font-weight: 500;
    line-height: 1em;
    letter-spacing: -0.04em;
    text-align: start;
}

.main4 .m4-swiper {
    position: relative;
}

.main4 .swiper-wrapper {
    box-sizing: border-box;
    padding-top: calc(30 * var(--vw-base));
}

.main4 .swiper-slide {
    position: relative;
    width: calc(330 * var(--vw-base));
    display: flex;
    flex-direction: column;
}

.card {
    width: 100%;
    height: calc(360 * var(--vw-base));
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--vw-base));
    cursor: pointer;
}

.card .sw-pic {
    width: 100%;
    height: calc(248 * var(--vw-base));
}

.card .sw-title {
    width: 100%;
    font-family: "Noto Sans TC";
    font-size: calc(16 * var(--vw-base-lock));
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: -0.05em;
    text-align: start;
    padding-top: calc(15 * var(--vw-base));
}

.card .sw-txt1 {
    width: 100%;
    font-family: "Lato";
    font-size: calc(14 * var(--vw-base-lock));
    font-style: italic;
    line-height: 1em;
    letter-spacing: 0em;
    text-align: start;
    padding-top: calc(0 * var(--vw-base));
    color: rgba(117, 117, 117, 1);
}

.card .sw-txt2 {
    width: 100%;
    font-family: "Noto Sans TC";
    font-size: calc(13.5 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: 0em;
    text-align: start;
    color: rgba(117, 117, 117, 0.75);
}

.main4 .sw-btn {
    position: absolute;
    right: 0;
    top: calc(0 * var(--vw-base));
    display: flex;
    gap: calc(28 * var(--vw-base));
    z-index: 10;
}


.main5 {
    position: relative;
    width: calc(1040 * var(--vw-base));
    height: auto;
    box-sizing: border-box;
    padding: calc(40 * var(--vw-base)) calc(0.5 * var(--vw-base)) 0 calc(0.5 * var(--vw-base));
}

.m5-title {
    color: #000;
    font-family: "Rethink Sans";
    font-size: calc(30 * var(--vw-base-lock));
    font-weight: 500;
    line-height: 1em;
    letter-spacing: -0.04em;
    text-align: start;
}

.main5 .m5-swiper {
    position: relative;
}

.main5 .swiper-wrapper {
    box-sizing: border-box;
    padding-top: calc(30 * var(--vw-base));
}

.main5 .swiper-slide {
    position: relative;
    width: calc(330 * var(--vw-base));
    display: flex;
    flex-direction: column;
}

/* m4 / m5 卡片 hover：文字漸變成品牌色 */
.card .sw-title,
.card .sw-txt1,
.card .sw-txt2 {
    transition: color 0.3s ease;
}

.card:hover .sw-title,
.card:hover .sw-txt1,
.card:hover .sw-txt2 {
    color: #54B2B0;
}

.main5 .sw-btn {
    position: absolute;
    right: 0;
    top: calc(0 * var(--vw-base));
    display: flex;
    gap: calc(28 * var(--vw-base));
    z-index: 10;
}

.main6 {
    position: relative;
    width: calc(1040 * var(--vw-base));
    height: auto;
    box-sizing: border-box;
    padding: calc(30 * var(--vw-base)) calc(0 * var(--vw-base)) 0 calc(0 * var(--vw-base));
}

.m6-title {
    position: relative;
    color: #000;
    font-family: "Rethink Sans";
    font-size: calc(30 * var(--vw-base-lock));
    font-weight: 500;
    line-height: 1em;
    letter-spacing: -0.04em;
    text-align: start;
}

.m6-grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, calc(160 * var(--vw-base)));
    justify-content: space-between;
    grid-row-gap: calc(35 * var(--vw-base));
    padding: calc(39 * var(--vw-base)) 0 calc(110 * var(--vw-base)) 0;
}

.m6-grid .grid-item {
    position: relative;
    width: calc(160 * var(--vw-base));
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m6-grid .grid-pic {
    position: relative;
    width: 100%;
    height: calc(160 * var(--vw-base));
    border-radius: 50%;
}

/* 疊在圓圖上方的綠環：用 inset 陰影厚度，hover 時從外緣往內長出 */
.m6-grid .grid-pic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 calc(0 * var(--vw-base)) #54B2B0;
    transition: box-shadow 0.3s ease;
    pointer-events: none;
}

/* m6 hover：綠環往內生長 + 文字漸變品牌色 */
.m6-grid .grid-txt1,
.m6-grid .grid-txt2 {
    transition: color 0.3s ease;
}

.m6-grid .grid-item:hover .grid-pic::after {
    box-shadow: inset 0 0 0 calc(5 * var(--vw-base)) #54B2B0;
}

.m6-grid .grid-item:hover .grid-txt1,
.m6-grid .grid-item:hover .grid-txt2 {
    color: #54B2B0;
}

.m6-grid .grid-txt1 {
    position: relative;
    margin-top: calc(11 * var(--vw-base));
    /* width: 100%; */
    font-family: "Noto Sans TC";
    font-size: calc(18 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: 0em;
    text-align: center;
    /* padding-top: calc(15 * var(--vw-base)); */
    white-space: nowrap;
}

.m6-grid .grid-txt2 {
    width: 100%;
    font-family: "Noto Sans TC";
    font-size: calc(13.5 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: 0em;
    text-align: center;
    padding-top: calc(0 * var(--vw-base));
}

.main6-layout {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #393939ba;
    z-index: 100;
    overflow-y: auto;
    /* -webkit-overflow-scrolling: touch; */
    padding: calc(40 * var(--vw-base)) 0;
    box-sizing: border-box;
    /* 預設隱藏，點 m6 grid-item 後加 .is-open 才顯示 */
    display: none;
}

.main6-layout.is-open {
    display: block;
}


.main6-layout .content {
    position: relative;
    margin: auto;
    background-color: #fff;
    box-sizing: border-box;
    padding: calc(30*var(--vw-base));
    width: calc(740*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.artist-info {
    display: flex;
    gap: calc(20*var(--vw-base));
}

.artist-pic {
    position: relative;
    width: calc(170*var(--vw-base));
    height: calc(229*var(--vw-base));
}

.artist-txt {
    align-self: flex-end;
}

.artist-title {
    color: #54B2B0;
    font-family: "Rethink Sans";
    font-size: calc(16 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1em;
    letter-spacing: -0.03em;
    text-align: start;
}

.artist-name {
    display: inline-block;
    margin-top: calc(8 * var(--vw-base));
    color: #000;
    font-family: "Noto Sans TC";
    font-size: calc(16 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1.25em;
    letter-spacing: -0.045em;
    text-align: start;
    border-bottom: #54B2B0 1px solid;
}

.artist-birth {
    margin-top: calc(18 * var(--vw-base));
    width: 100%;
    font-family: "Noto Sans TC";
    font-size: calc(13.5 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: 0em;
    text-align: start;
    color: rgba(117, 117, 117, 0.8);
}

.artist-work {
    margin-top: calc(0 * var(--vw-base));
    width: 100%;
    font-family: "Noto Sans TC";
    font-size: calc(13.5 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1.1em;
    letter-spacing: 0em;
    text-align: start;
    color: rgba(117, 117, 117, 0.8);
}

.artist-desc {
    margin-top: calc(40*var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    font-size: calc(16*var(--vw-base-lock));
    line-height: 1.4em;
    letter-spacing: 0.05em;
    text-align: justify;
    color: #000;
}

.artist-line {
    position: relative;
    margin: calc(25*var(--vw-base)) 0;
    width: 100%;
    height: calc(3 * var(--vw-base));
    background-color: #54B2B0;
    z-index: 2;
}

.main6-layout .card-box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(22*var(--vw-base));
}

.main7 {
    position: relative;
    width: 100%;
    background-color: #F5F5F5;
    box-sizing: border-box;
    padding: calc(60 * var(--vw-base)) 0 calc(120 * var(--vw-base)) 0;

}

.main7-contain {
    position: relative;
    width: calc(1040 * var(--vw-base));
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: calc(66 * var(--vw-base));
}

.main7 .m7-pic {
    position: relative;
    width: calc(533 * var(--vw-base));
    height: calc(363 * var(--vw-base));
}

.main7 .m7-txt {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    width: calc(418 * var(--vw-base));
}

.main7 .m7-txt h2 {
    margin-top: calc(33 * var(--vw-base));
    font-family: "Noto Sans TC";
    font-size: calc(23 * var(--vw-base-lock));
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: 0.03em;
    text-align: start;
}

.main7 .m7-txt p.cn {
    display: inline-block;
    margin-top: calc(30 * var(--vw-base));
    font-family: "Noto Sans TC";
    font-size: calc(16 * var(--vw-base-lock));
    font-weight: 300;
    line-height: 1.4em;
    letter-spacing: 0.05em;
    text-align: start;
}

.main7 .m7-txt p.en {
    display: inline-block;
    margin-top: calc(18 * var(--vw-base));
    font-family: "Lato";
    font-size: calc(15 * var(--vw-base-lock));
    font-weight: 300;
    line-height: 1.4em;
    letter-spacing: 0em;
    text-align: start;
}

.main7 .m7-txt .m7-btn {
    position: relative;
    margin-top: calc(50 * var(--vw-base));
    color: #54B2B0;
    font-family: "Rethink Sans";
    font-size: calc(16 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1em;
    letter-spacing: -0.03em;
    text-align: center;
}

.top-btn {
    position: fixed;
    bottom: calc(40 * var(--vw-base));
    right: calc(40 * var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(15*var(--vw-base));
    cursor: pointer;
    z-index: 99;
    /* 置頂時隱藏，往下捲才淡入 */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.top-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.top-btn .top-img {
    width: calc(20 * var(--vw-base));
    height: calc(10 * var(--vw-base));
    object-fit: contain;

}

.top-btn .top-txt {
    position: relative;
    font-family: "Rethink Sans";
    font-size: calc(13 * var(--vw-base-lock));
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.05em;
    text-align: center;
}

/*
 * ===================== RWD 手機版 =====================
 * 以圖稿寬度 768 為基準等比縮放：尺寸 = calc(<圖稿px> * var(--vw-base))。
 * 768 時還原成原 px（例：43 * 100vw/768 = 43px），768 以下整體等比縮小。
 * 字級維持 px 不縮。
 */
@media (max-width: 1200px) {
    :root {
        --vw-base: calc(100vw / 1200);
        --vw-base-lock: calc(100vw / 1200);
    }

    .container {
        box-sizing: border-box;
        padding: 0 calc(80*var(--vw-base));
    }
}

@media (max-width: 768px) {
    :root {
        --vw-base: calc(100vw / 768);
        /* 字級下限：約 660px 以下凍結在 0.88px/單位，避免小手機字過小（版面仍照 --vw-base 等比縮）。 */
        --vw-base-lock: max(calc(100vw / 768), 0.8px);
    }

    .container {
        box-sizing: border-box;
        padding: 0 calc(43*var(--vw-base));
    }

    /* 手機：關閉按鈕改為 relative 圓形（60% of M6 grid-pic 160vw = 96vw） */
    .layout-close {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        display: block;
        width: calc(60 * var(--vw-base-lock));
        height: calc(60 * var(--vw-base-lock));
        border-radius: 50%;
        border: calc(2.5 * var(--vw-base)) solid #fff;
        box-sizing: border-box;
    }

    .layout-close::before,
    .layout-close::after {
        left: 20%;
        width: 60%;
        height: calc(2.5 * var(--vw-base));
    }

    /* main3-layout 手機：直排，從頂部排（覆蓋桌機的 justify-content:center） */
    .main3-layout.is-open {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    /* content-box：撐滿剩餘空間，column 方向垂直置中 content（少卡置中；多卡自然撐高） */
    .main3-layout .content-box {
        min-height: auto;
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* width: 100%; */
        box-sizing: border-box;
    }

    .main3-layout .content {
        width: 100%;
        flex-shrink: 0;
        margin: 0;
    }

    .main3-layout .content.has-one .card {
        width: calc(330*var(--vw-base));
    }

    .main3-layout .layout-close {
        flex-shrink: 0;
        margin: calc(30 * var(--vw-base)) auto calc(40 * var(--vw-base));
    }

    /* main6-layout：block 排版，按鈕水平置中並留間距 */
    .main6-layout .layout-close {
        margin: calc(30 * var(--vw-base)) auto calc(40 * var(--vw-base));
    }

    /* 手機隱藏 m3/m4/m5 的左右箭頭 */
    .main3 .sw-btn,
    .main4 .sw-btn,
    .main5 .sw-btn {
        display: none;
    }

    .main1 {
        height: calc(1366*var(--vw-base));
    }

    .m1-content {
        position: absolute;
        left: 50%;
        bottom: calc(200 * var(--vw-base));
        transform: translateX(-50%);
        color: #fff;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(55 * var(--vw-base));
    }

    .m1-txt {
        width: calc(311 * var(--vw-base));
        height: calc(100 * var(--vw-base));
    }

    .m1-arr {
        width: calc(22 * var(--vw-base));
        height: calc(46 * var(--vw-base));
    }


    .main2 {
        width: 100%;
        padding: calc(53 * var(--vw-base-lock)) calc(0 * var(--vw-base));
        flex-direction: column;
        gap: calc(40 * var(--vw-base));
    }

    .main2 .txt1 {
        width: 100%;
        padding-left: 0;
    }

    .main2 .txt2 {
        width: 100%;
    }

    .main2 .txt1 p {
        font-weight: 400;
        font-size: calc(20 * var(--vw-base-lock));
        letter-spacing: 0.03em;

    }


    .main2 .txt2 p {
        font-size: calc(17 * var(--vw-base-lock));
        letter-spacing: 0.02em;
        font-weight: 400;
    }

    /* main3：房子圖 149.18 x 208 等比縮放，間隔 35 */
    .main3 {
        position: relative;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 0 calc(0 * var(--vw-base));
    }

    .m3-swiper {
        padding: calc(40 * var(--vw-base)) 0;
    }

    .m3-swiper .swiper-slide {
        /* 移除 width 限制，由 Swiper 核心自動計算寬度 */
    }

    .m3-swiper .swiper-slide .sw-pic {
        width: calc(149.18 * var(--vw-base));
        height: calc(208 * var(--vw-base));
    }


    .m3-swiper .swiper-slide .sw-txt {
        width: 100%;
        /* 讓文字容器寬度滿版，提供更多水平空間避免文字折行 */
    }

    .main3-layout {
        padding: calc(80 * var(--vw-base)) calc(10 * var(--vw-base)) calc(10 * var(--vw-base)) calc(10 * var(--vw-base));

    }

    /* main4 / main5：滿版、一次 2 區塊；尺寸/間距等比縮放 */
    .main4,
    .main5 {
        width: 100%;
        box-sizing: border-box;
        padding: calc(73 * var(--vw-base)) calc(0 * var(--vw-base)) 0 calc(0 * var(--vw-base));
    }

    .main4 .swiper-wrapper,
    .main5 .swiper-wrapper {
        padding-top: calc(30 * var(--vw-base));
    }

    /* 卡片高度自動，圖片用固定比例維持寬版並依寬度等比縮放 */
    .card {
        height: calc(400*var(--vw-base));
        gap: calc(5 * var(--vw-base));
        padding-bottom: calc(20*var(--vw-base));
    }

    .card .sw-pic {
        /* height: auto;
        aspect-ratio: 332 / 248; */
    }

    .card .sw-title {
        padding-top: calc(15 * var(--vw-base));
    }

    /* main6：一排 5 -> 一排 2，間距等比縮放 */
    .main6 {
        width: 100%;
        box-sizing: border-box;
        padding: calc(30 * var(--vw-base)) calc(0 * var(--vw-base)) 0 calc(0 * var(--vw-base));
    }

    .m6-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 改為一排兩個 */
        grid-column-gap: calc(40 * var(--vw-base));
        grid-row-gap: calc(45 * var(--vw-base));
        justify-items: center;
        /* 讓內容在網格單元中置中對齊 */
        padding: calc(54 * var(--vw-base)) 0 calc(78 * var(--vw-base)) 0;
    }

    .m6-grid .grid-item {
        width: calc(160 * var(--vw-base));
        /* 稍微放大寬度，提供更多空間避免名字與其他元素重疊 */
    }

    .m6-grid .grid-pic {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .main6-layout {
        padding: calc(80 * var(--vw-base)) calc(10 * var(--vw-base)) calc(10 * var(--vw-base)) calc(10 * var(--vw-base));

    }

    .main6-layout .content {

        width: 100%;

    }

    .main6-layout .card {
        height: auto;
    }

    .main7 {
        background-color: #fff;
    }

    /* main7：左圖右文 -> 上圖下文（間距 66） */
    .main7-contain {
        width: 100%;
        flex-direction: column;
        gap: calc(66 * var(--vw-base));
    }

    .main7 .m7-pic {
        width: 100%;
        height: auto;
        aspect-ratio: 533 / 363;
    }

    .main7 .m7-txt {
        width: 100%;
        box-sizing: border-box;
        padding: 0 calc(43 * var(--vw-base));
    }

    .top-btn {
        bottom: calc(30 * var(--vw-base));
        right: calc(9 * var(--vw-base));
    }
}

@media (max-width: 400px) {
    .m6-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .m6-grid .grid-item {
        width: calc(200 * var(--vw-base));
    }

    .main3-layout {
        padding: calc(80 * var(--vw-base)) calc(20 * var(--vw-base)) calc(20 * var(--vw-base)) calc(20 * var(--vw-base));
    }

    .m4-title,
    .m5-title,
    .m6-title {
        font-size: calc(22 * var(--vw-base-lock));
    }



    .main6-layout {
        padding: calc(80 * var(--vw-base)) calc(20 * var(--vw-base)) calc(20 * var(--vw-base)) calc(20 * var(--vw-base));
    }

    .card .sw-title {
        font-size: calc(15 * var(--vw-base-lock));
    }

    .card .sw-txt1 {
        font-size: calc(13 * var(--vw-base-lock));
    }

    .card .sw-txt2 {

        font-size: calc(12.2 * var(--vw-base-lock));
    }


}