@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: "Futura-Std-Medium";
    src: url(../fonts/Futura\ Std\ Medium.otf);
}

@font-face {
    font-family: "SweiSpringSugarCJKsc-Bold";
    /* src: url(../fonts/SweiSpringSugarCJKsc-Bold.ttf); */
    src: url(../fonts/SweiSpringSugarCJKsc-Bold.woff2);
}

@font-face {
    font-family: "SweiSpringSugarCJKsc-SemiBold";
    /* src: url(../fonts/SweiSpringSugarCJKsc-SemiBold.ttf); */
    src: url(../fonts/SweiSpringSugarCJKsc-SemiBold.woff2);
}

@font-face {
    font-family: "Cinzel-SemiBold";
    src: url(../fonts/Cinzel-SemiBold.ttf);
}

.Futura-Std-Heavy {
    font-family: "Futura-Std-Heavy";
}

.Futura-Std-Medium {
    font-family: "Futura-Std-Medium";
}

.SweiSpringSugarCJKsc-SemiBold {
    font-family: "SweiSpringSugarCJKsc-SemiBold";
}

.SweiSpringSugarCJKsc-Medium {
    font-family: "SweiSpringSugarCJKsc-Medium";
}

.Cinzel-SemiBold {
    font-family: "Cinzel-SemiBold";
}

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

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



.loading {
    background-image: url(../img/m7-bg.jpg);
}

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    --vw-base: calc(100vw / 1920);
    /* 防止 iOS 橫屏時字體變大 */
    -webkit-text-size-adjust: none;
    /* 防止某些瀏覽器自動縮放字體 */
    text-size-adjust: none;
    background-color: #eef2f3;
}

body {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

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,
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pic-txt {
    position: absolute;
    left: calc(13*var(--vw-base));
    bottom: calc(9*var(--vw-base));
    color: #fff;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.1em;
}

.dot-btn {
    width: calc(16*var(--vw-base));
    height: calc(16*var(--vw-base));
    background-image: url(../img/sw-pag-btn.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
}

.dot-btn.active {
    background-image: url(../img/sw-pag-btn-active.png);
}

.comma {
    display: inline-block;
    margin: 0 -0.25em;
}

.title-comma {
    display: inline-block;
    margin: 0 -0.4em 0 0;
}

.sw-prev {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(-44*var(--vw-base));
    z-index: 2;
    width: calc(22*var(--vw-base));
    height: calc(47*var(--vw-base));
    background-image: url(../img/sw-prev.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sw-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(-44*var(--vw-base));
    width: calc(22*var(--vw-base));
    height: calc(47*var(--vw-base));
    background-image: url(../img/sw-next.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.container {
    width: 100%;
    height: auto;
    position: relative;
    /* background-color: #000; */
    /* height: calc(2620*var(--vw-base)); */
}

.en-mark {
    font-family: "Butler_Regular";
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.2em;
    color: #c2a670;
    height: calc(150*var(--vw-base));
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    /* 或 sideways-right */
}

.contain-title {
    color: #c2a670;
    font-family: "SweiSpringSugarCJKsc-SemiBold";
    font-size: calc(30*var(--vw-base));
    line-height: calc(42*var(--vw-base));
    letter-spacing: 0.1em;
}

.contain-subtitle {
    margin-top: calc(5*var(--vw-base));
    color: #304d54;
    font-family: "SweiSpringSugarCJKsc-SemiBold";
    font-size: calc(22*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.1em;
}

.contain-desc {
    margin-top: calc(20*var(--vw-base));
    color: #304d54;
    font-family: "Noto Sans TC";
    font-weight: 300;
    font-size: calc(18*var(--vw-base));
    line-height: calc(35*var(--vw-base));
    letter-spacing: 0.1em;
    text-align: justify;
}

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

.sw-pic {
    position: relative;
}


.m1 {
    position: relative;
    width: 100%;
    height: calc(1250*var(--vw-base));
    overflow: hidden;
}

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

.m1-title {
    position: absolute;
    top: calc(595*var(--vw-base));
    left: calc(650*var(--vw-base));
    width: calc(594*var(--vw-base));
    height: calc(237*var(--vw-base));
}

/* H1 語意保留給搜尋引擎與無障礙閱讀器，視覺仍使用藝術字圖片呈現 */
.m1-title .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.m1-title img {
    object-fit: contain;
}

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

/* .m1-title .t1 {
    position: relative;
    width: 100%;
    height: calc(108*var(--vw-base));
}


.m1-title .t2 {
    position: relative;
    margin-top: calc(10*var(--vw-base));
    width: 100%;
    height: calc(15*var(--vw-base));
}

.m1-title .t3 {
    position: relative;
    margin-top: calc(10*var(--vw-base));
    width: 100%;
    height: calc(26*var(--vw-base));
}

.m1-title .t4 {
    position: relative;
    margin-top: calc(25*var(--vw-base));
    width: 100%;
    height: calc(27*var(--vw-base));
} */

.m2 {
    position: relative;
    width: 100%;
    height: calc(970*var(--vw-base));
    overflow: hidden;
}

.m2 .en-mark {
    position: absolute;
    left: calc(137*var(--vw-base));
    top: calc(40*var(--vw-base));
}

.m2 .contain {
    position: absolute;
    left: calc(137*var(--vw-base));
    top: calc(232*var(--vw-base));
    /* width: calc(536*var(--vw-base)); */
}

.m2 .contain-desc {
    width: calc(500*var(--vw-base));
}

.m2-swiper-box {
    position: absolute;
    right: calc(0*var(--vw-base));
    top: calc(0*var(--vw-base));
    width: calc(1076*var(--vw-base));
}


.m2-swiper {
    position: relative;
    width: 100%;
    height: calc(646*var(--vw-base));
    overflow: hidden;
}

/* m2-swiper 圖片容器與縮放動畫 (Swiper picture container & scale animation) */
.m2-swiper .swiper-slide .sw-pic {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.m2-swiper .swiper-slide .sw-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 預設非 active 狀態為 scale(1.07) (Default non-active scale) */
    transform: scale(1.07);
    transition: transform 5s ease-out;
}

/* 當前 active 狀態縮放至 scale(1) (Active slide image scales to 1) */
.m2-swiper .swiper-slide-active .sw-pic img {
    transform: scale(1);
}

.m2 .sw-pagination {
    position: relative;
    width: 100%;
    display: flex;
    gap: calc(8*var(--vw-base));
    box-sizing: border-box;
    padding-top: calc(10*var(--vw-base));

}

.m3 {
    position: relative;
    width: 100%;
    height: calc(1027*var(--vw-base));
    overflow: hidden;
}

.m3 .en-mark {
    position: absolute;
    right: calc(133*var(--vw-base));
    top: calc(17*var(--vw-base));
    letter-spacing: 0.05em;
}

.m3 .contain {
    position: absolute;
    right: calc(133*var(--vw-base));
    top: calc(277*var(--vw-base));
    width: calc(502*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: end;
}

.m3 .contain-desc {}

.m3-site {
    position: absolute;
    left: calc(137*var(--vw-base));
    top: calc(0*var(--vw-base));
    width: calc(958*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.m3 .site-txt {
    position: relative;
    margin-top: calc(45*var(--vw-base));
    width: calc(702*var(--vw-base));
    height: calc(96*var(--vw-base));
}

.m3 .site-txt .t1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m3 .site-txt img {
    object-fit: contain;
}

/* 站點時間軸樣式 (Site timeline styles) */
.m3 .site-timeline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(15 * var(--vw-base));
}

/* 水平虛線：範圍自 dot1 中心 (43) 至 dot5 中心 (858) (Horizontal dashed line: spans from dot1 center to dot5 center) */
.m3 .site-timeline .line {
    position: absolute;
    top: 50%;
    left: calc(43 * var(--vw-base));
    right: calc(38 * var(--vw-base));
    height: 0;
    border-top: calc(1.5 * var(--vw-base)) dashed #304d54;
    transform: translateY(-50%);
    z-index: 1;
}

/* 5 顆圓點通用基礎樣式 (Common base styles for 5 dots) */
.m3 .site-timeline .dot {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    /* 以圓點中心點為基準進行 X 座標對齊 (Align X coordinate based on dot center) */
    z-index: 2;
    width: calc(15 * var(--vw-base));
    height: calc(15 * var(--vw-base));
    border-radius: 50%;
    border: calc(1.5 * var(--vw-base)) solid #304d54;
    background-color: #eef2f3;
    /* 遮蓋背後虛線 (Background color masks line behind) */
    box-sizing: border-box;
}

/* 5 顆圓點獨立 X 座標：供手動微調 (Individual X coordinates for 5 dots - adjust values as needed) */
.m3 .site-timeline .dot1 {
    left: calc(43 * var(--vw-base));
}

.m3 .site-timeline .dot2 {
    left: calc(255 * var(--vw-base));
}

.m3 .site-timeline .dot3 {
    left: calc(471 * var(--vw-base));
}

.m3 .site-timeline .dot4 {
    left: calc(670 * var(--vw-base));
}

.m3 .site-timeline .dot5 {
    left: calc(852 * var(--vw-base));
}

.m3 .pic-txt {
    left: auto;
    right: calc(13*var(--vw-base));
}

/* m3 滾動動畫初始隱藏樣式 (m3 ScrollTrigger animation initial hidden styles) */
.m3 .site-pic {
    clip-path: inset(0 0 100% 0);
}

.m3 .en-mark {
    opacity: 0;
}

.m3 .contain-title,
.m3 .contain-subtitle,
.m3 .contain-desc {
    opacity: 0;
    transform: translateY(30px);
}

.m3 .site-txt .t1 {
    opacity: 0;
}

.m3 .site-timeline .line {
    clip-path: inset(0 100% 0 0);
}

.m3 .site-timeline .dot {
    opacity: 0;
}

.m4 {
    position: relative;
    width: 100%;
    height: calc(1027*var(--vw-base));
    overflow: hidden;
}

.m4 .en-mark {
    position: absolute;
    right: calc(133*var(--vw-base));
    top: calc(17*var(--vw-base));
    letter-spacing: 0.05em;
}

.m4 .contain {
    position: absolute;
    right: calc(133*var(--vw-base));
    top: calc(277*var(--vw-base));
    width: calc(502*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: end;
}

.m4-swiper-box {
    position: absolute;
    left: calc(137*var(--vw-base));
    top: calc(0*var(--vw-base));
    width: calc(958*var(--vw-base));
}


.m4-swiper {
    position: relative;
    width: 100%;
    height: calc(575*var(--vw-base));
    overflow: hidden;
}

/* m1-title 滾動動畫初始隱藏樣式 (m1-title ScrollTrigger animation initial hidden styles) */
.m1-title .t1,
.m1-title .t2,
.m1-title .t3,
.m1-title .t4 {
    opacity: 0;
    transform: translateY(30px);
}

/* m2-swiper, m4-swiper, m6-swiper & m9-swiper 圖片容器與縮放動畫 (Swiper picture container & scale animation) */
.m2-swiper .swiper-slide .sw-pic,
.m4-swiper .swiper-slide .sw-pic,
.m6-swiper .swiper-slide .sw-pic,
.m9-swiper .swiper-slide .sw-pic {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.m2-swiper .swiper-slide .sw-pic img,
.m4-swiper .swiper-slide .sw-pic img,
.m6-swiper .swiper-slide .sw-pic img,
.m9-swiper .swiper-slide .sw-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 預設非 active 狀態為 scale(1.07) (Default non-active scale) */
    transform: scale(1.07);
    transition: transform 5s ease-out;
}

/* 當前 active 狀態且加入 is-scaled 時觸發縮放至 scale(1) (Active slide scales images simultaneously after is-scaled class added) */
.m2-swiper.is-scaled .swiper-slide-active .sw-pic img,
.m4-swiper.is-scaled .swiper-slide-active .sw-pic img,
.m6-swiper.is-scaled .swiper-slide-active .sw-pic img,
.m9-swiper.is-scaled .swiper-slide-active .sw-pic img {
    transform: scale(1);
}

/* m2, m4, m6 & m9 滾動動畫初始隱藏樣式 (m2, m4, m6 & m9 ScrollTrigger animation initial hidden styles) */
.m2-swiper-box,
.m4-swiper-box,
.m6-swiper-box,
.m9-swiper-box {
    clip-path: inset(0 0 100% 0);
}

.m2 .en-mark,
.m4 .en-mark,
.m5 .en-mark,
.m6 .en-mark {
    opacity: 0;
}

.m2 .contain-title,
.m2 .contain-subtitle,
.m2 .contain-desc,
.m4 .contain-title,
.m4 .contain-subtitle,
.m4 .contain-desc,
.m5 .contain-title,
.m5 .contain-subtitle,
.m5 .contain-desc,
.m6 .contain-title,
.m6 .contain-subtitle,
.m6 .contain-desc,
.m5-pic-box .pic1,
.m5-pic-box .pic2,
.m5-pic-box .m5-pic-en,
.m5-pic-box .pic3,
.m5-pic-box .pic4,
.m5-pic-box .pic5 {
    opacity: 0;
    transform: translateY(30px);
}

/* m9 滾動動畫初始隱藏樣式 (m9 ScrollTrigger animation initial hidden styles) */
.m9 .contain .txt1,
.m9 .contain .txt2,
.m9 .contain .txt3 {
    opacity: 0;
    transform: translateY(30px);
}

/* m7 滾動動畫初始隱藏樣式 (m7 ScrollTrigger animation initial hidden styles) */
.m7-logo {
    opacity: 0;
    transform: translateY(30px);
}

.m7-content .txt-box .txt1,
.m7-content .txt-box .txt2,
.m7-content .txt-box .txt3 {
    opacity: 0;
}

.m7-content .txt-box .line-l,
.m7-content .txt-box .line-r {
    clip-path: inset(0 0 100% 0);
}

.add-icon {
    opacity: 0;
    transform: translateY(20px);
}

/* m8 & m9 滾動動畫初始隱藏樣式 (m8 & m9 ScrollTrigger animation initial hidden styles) */
.m8 .main-bg,
.m9 .main-bg {
    opacity: 0;
}

.m8-city {
    opacity: 0;
    transform: scale(1.06);
}

.m8 .contain .txt1,
.m8 .contain .txt2,
.m8 .contain .txt3 {
    opacity: 0;
    transform: translateY(30px);
}

.m8-paint {
    opacity: 0;
    transform: translateY(20px);
}

/* m10 滾動動畫初始隱藏樣式 (m10 ScrollTrigger animation initial hidden styles) */
.m10-title .pic {
    opacity: 0;
    transform: translateY(30px);
}

.form {
    opacity: 0;
    transform: translateY(30px);
}

.m4 .sw-pagination {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: end;
    gap: calc(8*var(--vw-base));
    box-sizing: border-box;
    padding-top: calc(10*var(--vw-base));

}

.m4 .pic-txt {
    left: auto;
    right: calc(13*var(--vw-base));
}

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

.m5 .en-mark {
    position: absolute;
    left: calc(137*var(--vw-base));
    top: calc(175*var(--vw-base));
    letter-spacing: 0.05em;
}

.m5 .contain {
    position: absolute;
    left: calc(137*var(--vw-base));
    top: calc(347*var(--vw-base));
    width: calc(502*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: start;
}

.m5-pic-box {
    position: absolute;
    right: calc(133*var(--vw-base));
    top: 0;
    width: calc(963*var(--vw-base));
    height: calc(720*var(--vw-base));
}

.m5-pic-box .pic1 {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(300*var(--vw-base));
    height: calc(280*var(--vw-base));
}

.m5-pic-box .pic2 {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(631*var(--vw-base));
    height: calc(348*var(--vw-base));
}


.m5-pic-box .pic3 {
    position: absolute;
    left: 0;
    top: calc(310*var(--vw-base));
    width: calc(300*var(--vw-base));
    height: calc(280*var(--vw-base));
}


.m5-pic-box .pic4 {
    position: absolute;
    left: calc(329*var(--vw-base));
    top: calc(375*var(--vw-base));
    width: calc(300*var(--vw-base));
    height: calc(280*var(--vw-base));
}

.m5-pic-box .pic5 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(300*var(--vw-base));
    height: calc(280*var(--vw-base));
}

.m5-pic-en {
    position: absolute;
    right: calc(10*var(--vw-base));
    top: calc(388*var(--vw-base));
    font-family: "Cinzel-SemiBold";
    font-size: calc(16*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.2em;
    color: #c2a670;
}


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

.m6 .en-mark {
    position: absolute;
    right: calc(133*var(--vw-base));
    top: calc(265*var(--vw-base));
    letter-spacing: 0.05em;
}

.m6 .contain {
    position: absolute;
    right: calc(133*var(--vw-base));
    top: calc(489*var(--vw-base));
    width: calc(502*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: end;
}

.m6-swiper-box {
    position: absolute;
    left: calc(0*var(--vw-base));
    top: calc(289*var(--vw-base));
    width: calc(1167*var(--vw-base));
}


.m6-swiper {
    position: relative;
    width: 100%;
    height: calc(540*var(--vw-base));
    overflow: hidden;
}

.m6-swiper .swiper-slide {
    display: flex;
    justify-content: space-between;
}

.m6 .m6-swiper .swiper-slide .sw-pic {
    width: calc(575*var(--vw-base));
    height: 100%;
}

.m6 .sw-pagination {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: end;
    gap: calc(8*var(--vw-base));
    box-sizing: border-box;
    padding-top: calc(10*var(--vw-base));

}

.m6 .pic-txt {
    left: auto;
    right: calc(13*var(--vw-base));
}

.m7 {
    position: relative;
    width: 100%;
    height: calc(1220*var(--vw-base));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-top: calc(197*var(--vw-base));
}


.m7-logo {
    position: relative;
    width: calc(343*var(--vw-base));
}

.m7-content {
    position: relative;
    margin-top: calc(42*var(--vw-base));
    display: flex;
    gap: calc(83*var(--vw-base));
    padding-left: calc(89*var(--vw-base));
}

.m7-content .txt-box {
    position: relative;
    width: calc(470*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m7-content .txt-box.box2 {
    width: calc(568*var(--vw-base));
}

.m7-content .txt-box .txt1 {
    color: #304d54;
    font-family: "SweiSpringSugarCJKsc-SemiBold";
    font-size: calc(30*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.1em;
}

.m7-content .txt-box .txt2 {
    color: #c2a670;
    font-family: "Butler_Regular";
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.1em;
    padding-top: calc(5*var(--vw-base));
}

.m7-content .txt-box .txt3 {
    color: #304d54;
    font-family: "Noto Sans TC";
    font-weight: 300;
    font-size: calc(18*var(--vw-base));
    line-height: calc(35*var(--vw-base));
    letter-spacing: 0.1em;
    text-align: justify;
    padding-top: calc(28*var(--vw-base));
    text-align-last: center;
}

.m7-content .txt-box.box2 .txt3 {
    width: calc(460*var(--vw-base));
}

.m7-content .txt-box .line-l {
    position: absolute;
    left: calc(0*var(--vw-base));
    top: calc(0*var(--vw-base));
    width: 1px;
    height: calc(62*var(--vw-base));
    background-color: #79aab6;
    /* opacity: 0.5;。 */
}

.m7-content .txt-box .line-r {
    position: absolute;
    right: calc(0*var(--vw-base));
    top: calc(0*var(--vw-base));
    width: 1px;
    height: calc(62*var(--vw-base));
    background-color: #79aab6;
    /* opacity: 0.8; */
}

/* 粗度 1px 十字圖示 (1px thickness cross icon) */
.add-icon {
    position: relative;
    top: calc(58 * var(--vw-base));
    width: calc(67 * var(--vw-base));
    height: calc(67 * var(--vw-base));
}

/* 十字橫線 (1px horizontal line) */
.add-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: #79aab6;
    transform: translateY(-50%);
}

/* 十字直線 (1px vertical line) */
.add-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #79aab6;
    transform: translateX(-50%);
}

.m8 {
    position: relative;
    width: 100%;
    height: calc(1217*var(--vw-base));
    overflow: hidden;
}

.m8-city {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m8 .pic-txt {
    position: absolute;
    left: auto;
    right: calc(22*var(--vw-base));
    top: calc(975*var(--vw-base));
}

.m8 .contain {
    position: absolute;
    left: calc(960*var(--vw-base));
    top: calc(360*var(--vw-base));
    width: calc(585*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: start;
}

.m8 .contain .txt1 {
    color: #304d54;
    font-family: "SweiSpringSugarCJKsc-SemiBold";
    font-size: calc(30*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.1em;
}

.m8 .contain .txt2 {
    color: #c2a670;
    font-family: "Butler_Regular";
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.1em;
    padding-top: calc(18*var(--vw-base));
}

.m8 .contain .txt3 {
    color: #304d54;
    font-family: "Noto Sans TC";
    font-weight: 300;
    font-size: calc(20*var(--vw-base));
    line-height: calc(35*var(--vw-base));
    letter-spacing: 0.1em;
    text-align: justify;
    padding-top: calc(45*var(--vw-base));
    text-align-last: start;
}

.m8-paint {
    position: absolute;
    left: calc(1513*var(--vw-base));
    top: calc(270*var(--vw-base));
    width: calc(209*var(--vw-base));
    height: calc(206*var(--vw-base));
}

.m8-paint img {
    object-fit: contain;
}

.m8-paint-txt {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: "Noto Sans TC";
    font-weight: 300;
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    color: #304d54;
    letter-spacing: 0.075em;
}



.m9 {
    position: relative;
    width: 100%;
    height: calc(897*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m9 .contain {
    position: relative;
    margin-top: calc(50*var(--vw-base));
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m9 .contain .txt1 {
    color: #304d54;
    font-family: "SweiSpringSugarCJKsc-SemiBold";
    font-size: calc(30*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.1em;
}

.m9 .contain .txt2 {
    color: #c2a670;
    font-family: "Butler_Regular";
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.1em;
    padding-top: calc(18*var(--vw-base));
}

.m9 .contain .txt3 {
    color: #304d54;
    font-family: "Noto Sans TC";
    font-weight: 300;
    font-size: calc(20*var(--vw-base));
    line-height: calc(35*var(--vw-base));
    letter-spacing: 0.1em;
    text-align: center;
    padding-top: calc(23*var(--vw-base));
    text-align-last: center;
}


.m9-swiper-box {
    position: relative;
    margin-top: calc(50*var(--vw-base));
    width: calc(1565*var(--vw-base));
}


.m9-swiper {
    position: relative;
    width: 100%;
    height: calc(540*var(--vw-base));
    overflow: hidden;
}

.m9-swiper .swiper-slide {
    display: flex;
    justify-content: space-between;
}

.m9 .m9-swiper .swiper-slide .sw-pic {
    width: calc(767*var(--vw-base));
    height: 100%;
}

.m9 .sw-pagination {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: end;
    gap: calc(8*var(--vw-base));
    box-sizing: border-box;
    padding-top: calc(10*var(--vw-base));

}

.m10 {
    position: relative;
    width: 100%;
    height: calc(2039*var(--vw-base));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m10-title {
    position: relative;
    margin-top: calc(298*var(--vw-base));
    width: calc(558*var(--vw-base));
    height: calc(428*var(--vw-base));
}

.m10-title .pic {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m10-title .pic img {
    object-fit: contain;
}

.m10-map {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(260*var(--vw-base));
    height: calc(108*var(--vw-base));
    /* background-color: #fff; */
}

.m10-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(260*var(--vw-base));
    height: calc(108*var(--vw-base));
    /* background-color: #774343; */
}



.form {
    width: calc(580*var(--vw-base));
    height: auto;
    position: relative;
    margin: calc(286*var(--vw-base)) 0 0vw 0;
    padding-top: calc(100*var(--vw-base));
    z-index: 20;
}

/* ==========================================================================
   表單樣式 (Form Styling) - 主顏色 #193e46 與底線樣式重構
   ========================================================================== */

.form form {
    width: 100%;
}

.form .form-title {
    width: calc(451 * var(--vw-base));
    margin: 0 auto calc(109 * var(--vw-base)) auto;
}

/* 每個表單欄位的外層容器 */
.form-group {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--vw-base));
    margin-bottom: calc(35 * var(--vw-base));
    padding-bottom: calc(8 * var(--vw-base));
    border-bottom: 1.5px solid #193e46;
    /* 主顏色底線 #193e46 */
}

/* 姓名欄位特化：底線僅加在輸入框下方，右側先生/小姐勾選不含底線 */
.form-group.name-group {
    border-bottom: none;
    padding-bottom: 0;
    gap: calc(30 * var(--vw-base));
}

.form-group.name-group .input-wrap {
    border-bottom: 1.5px solid #193e46;
    padding-bottom: calc(8 * var(--vw-base));
}

/* 房型需求欄位不需要底線 */
.form-group.room-group {
    border-bottom: none;
    align-items: center;
    margin-bottom: calc(35 * var(--vw-base));
    padding-bottom: 0;
    gap: calc(30 * var(--vw-base));
}

/* 用戶確認欄位：點擊文字後開啟 Google reCAPTCHA 彈窗 */
.form-group.recaptcha-group {
    align-items: center;
    gap: calc(20 * var(--vw-base));
}

.recaptcha-trigger {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(10 * var(--vw-base));
    height: calc(32 * var(--vw-base));
    border: 0;
    background: transparent;
    color: #193e46;
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(22 * var(--vw-base));
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: calc(32 * var(--vw-base));
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
}

.recaptcha-status-icon {
    width: calc(22 * var(--vw-base));
    height: calc(22 * var(--vw-base));
    object-fit: contain;
    flex: 0 0 auto;
}

.recaptcha-trigger:hover,
.recaptcha-trigger:focus-visible {
    color: #193e46;
    text-decoration: none !important;
}

.recaptcha-trigger.is-verified,
.recaptcha-trigger.is-verified:hover,
.recaptcha-trigger.is-verified:focus-visible {
    color: #193e46;
    text-decoration: none !important;
}

.room-title {
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(22 * var(--vw-base));
    color: #193e46;
    font-weight: 300;
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

/* 輸入框容器 */
.input-wrap {
    flex: 1;
}

.input-wrap input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(22 * var(--vw-base));
    color: #193e46;
    /* 主顏色 #193e46 */
    font-weight: 300;
    letter-spacing: 0.1em;
    outline: none;
    box-sizing: border-box;
    padding: 0;
    height: calc(32 * var(--vw-base));
    line-height: calc(32 * var(--vw-base));
}

/* 提示文字 (Placeholder) 樣式 */
.form input::placeholder {
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(22 * var(--vw-base));
    color: rgba(25, 62, 70, 0.75) !important;
    /* #193e46 透明度 */
    font-weight: 300;
    letter-spacing: 0.1em;
}

/* Chrome/Safari/Opera autofill 修正 */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus,
.form input:-webkit-autofill:active {
    -webkit-text-fill-color: #193e46;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Checkbox & Radio 群組 */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: calc(30 * var(--vw-base));
    flex-wrap: wrap;
}

.gender-group {
    gap: calc(25 * var(--vw-base));
    flex-shrink: 0;
}

/* 通用自訂 checkbox 樣式 */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(22 * var(--vw-base));
    height: calc(22 * var(--vw-base));
    background: url("../img/check.png") no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    margin: 0;
    margin-right: calc(10 * var(--vw-base));
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked,
.checkbox-label input[type="radio"]:checked {
    background-image: url("../img/checked.png");
}

.checkbox-label span {
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(22 * var(--vw-base));
    color: #193e46;
    /* 主顏色 #193e46 */
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
}

/* 個資聲明容器 */
.agree-group {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: calc(25 * var(--vw-base));
    margin-bottom: calc(45 * var(--vw-base));
    padding-left: calc(116.5*var(--vw-base));
}

.agree-group .checkbox-label span {
    letter-spacing: 0.1em;
}

.agree-group .openTxtBtn {
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(22 * var(--vw-base));
    color: #193e46;
    /* 主顏色 #193e46 */
    font-weight: 300;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-underline-offset: calc(6 * var(--vw-base));
    cursor: pointer;
    margin-left: calc(15 * var(--vw-base));
}

/* 送出按鈕樣式 */
.submit-wrap {
    width: 100%;
    position: relative;
}

.submit-wrap button {
    width: 100%;
    height: calc(60 * var(--vw-base));
    background-color: #193e46;
    /* 主顏色背景 #193e46 */
    color: #ffffff;
    border: none;
    font-family: "Butler_Regular", "Butler", serif;
    font-size: calc(24 * var(--vw-base));
    letter-spacing: 0.15em;
    text-indent: 0.15em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.submit-wrap button:hover {
    background-color: #ffffff;
    color: #193e46;
    /* hover 反應色：底色與字色顛倒 (Invert background & text color on hover) */
}

.build-info {
    position: absolute;
    left: 50%;
    bottom: calc(30*var(--vw-base));
    width: calc(825*var(--vw-base));
    height: calc(45*var(--vw-base));
    transform: translateX(-50%);
}

/* Google reCAPTCHA 彈窗 */
.recaptcha-popup {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.68);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.recaptcha-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.recaptcha-dialog {
    position: relative;
    width: min(420px, calc(100vw - 40px));
    min-height: 170px;
    padding: 48px 28px 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.recaptcha-title {
    color: #193e46;
    font-family: "Noto Sans TC", sans-serif;
    font-size: clamp(18px, calc(24 * var(--vw-base)), 24px);
    font-weight: 400;
    letter-spacing: 0.1em;
}

.recaptcha-widget {
    min-height: 78px;
}

.recaptcha-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #193e46;
    font-size: 28px;
    line-height: 32px;
    cursor: pointer;
}


/* 建案資訊 i 圖示：放在最後主區塊右下角 */
.info-icon {
    position: absolute;
    right: calc(10 * var(--vw-base));
    bottom: calc(10 * var(--vw-base));
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(20 * var(--vw-base));
    height: calc(20 * var(--vw-base));
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #193e46;
    border-radius: 50%;
    appearance: none;
    background: transparent;
    padding: 0;
    color: #193e46;
    font-family: Georgia, "Times New Roman", serif;
    font-size: calc(15 * var(--vw-base));
    font-style: normal;
    line-height: 1;
    text-decoration: none !important;
    text-transform: none;
    text-indent: 0;
    letter-spacing: 0;
    cursor: pointer;
}


/* B版：PC 右側滑入建案資訊面板，寬度約 768px */
.info-drawer {
    position: fixed;
    inset: 0;
    z-index: 30000;
    visibility: hidden;
    pointer-events: none;
}

.info-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.info-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 62, 70, 0.32);
    opacity: 0;
    transition: opacity 0.45s ease;
}

.info-drawer.is-open .info-drawer-backdrop {
    opacity: 1;
}

.info-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(768px, 100vw);
    height: 100%;
    overflow: hidden;
    background: #eef2f3;
    box-shadow: -18px 0 45px rgba(25, 62, 70, 0.22);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.info-drawer.is-open .info-drawer-panel {
    transform: translateX(0);
}

.info-drawer-close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #193e46;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.info-drawer-close:hover,
.info-drawer-close:focus-visible {
    background: #c2a670;
    color: #193e46;
}

.info-drawer-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #eef2f3;
}

body.info-drawer-open {
    overflow: hidden;
    padding-right: var(--info-drawer-scrollbar-width, 0px);
}

@media (prefers-reduced-motion: reduce) {

    .info-drawer-backdrop,
    .info-drawer-panel {
        transition: none;
    }
}


/*footer-nav*/

.footer-nav {
    width: 2.5vw;
    position: fixed;
    height: auto;
    bottom: 5.5%;
    right: 2vw;
    z-index: 999;
    box-sizing: border-box;
    display: none;
}

.footer-nav-all {
    width: 100%;
    margin: 0 auto;
}

.footer-nav-li {
    width: 100%;
    height: 2.5vw;
    position: relative;
    display: block;
    margin: 0 0 0.6vw 0;
    transition: all 0.5s linear;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.footer-nav-li:hover {
    opacity: 0.7;
}

.footer-fb {
    width: 29%;
    height: auto;
    display: block;
    margin: 0 auto 0 auto;
    padding: 25% 0 0 0;
}

.footer-book {
    width: 47%;
    height: auto;
    display: block;
    margin: 0 auto 0 auto;
    padding: 25% 0 0 0;
}

.footer-map {
    width: 38%;
    height: auto;
    display: block;
    margin: 0 auto 0 auto;
    padding: 26% 0 0 0;
}

.footer-tel {
    width: 47%;
    height: auto;
    display: block;
    margin: 0 auto 0 auto;
    padding: 28% 0 0 0;
}

.footer-info {
    width: 23%;
    height: auto;
    display: block;
    margin: 0 auto 0 auto;
    padding: 20% 0 0 0;
}














/*同意書照片預覽*/

.black {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 11111;
    font-family: "微軟正黑體";
}

.closeBtn {
    width: 30px;
    position: absolute;
    right: 5%;
    top: 4%;
}

.infoWrap {
    width: 100%;
    margin: 0 auto;
    max-width: 78%;
    position: relative;
    height: 100vh;
    overflow: auto;
}

.infoWrap ul {
    list-style: none;
    font-size: calc(24 * var(--vw-base));
    padding-inline-start: 3vw;
    line-height: 150%;
}

.infoWrap ul>li>ul {
    list-style: none;
    font-size: calc(24 * var(--vw-base));
    padding-inline-start: 1vw;
}

.li1::before {
    content: "一、";
    position: absolute;
    left: 0vw;
}

.li2::before {
    content: "二、";
    position: absolute;
    left: 0vw;
}

.li3::before {
    content: "三、";
    position: absolute;
    left: 0vw;
}

.li4::before {
    content: "四、";
    position: absolute;
    left: 0vw;
}

.li5::before {
    content: "五、";
    position: absolute;
    left: 0vw;
}

.li1-li::before {
    content: "（１）";
    position: absolute;
    left: 0vw;
}

.li2-li::before {
    content: "（２）";
    position: absolute;
    left: 0vw;
}

.li3-li::before {
    content: "（３）";
    position: absolute;
    left: 0vw;
}

.li4-li::before {
    content: "（４）";
    position: absolute;
    left: 0vw;
}

.infoBox {
    width: 100%;
    height: calc(100% - 200px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    color: #fff;
    text-align: left;
}

.infoBox h3 {
    font-size: calc(32 * var(--vw-base));
    line-height: 150%;
    margin-bottom: 1vw;
    text-align: center;
}

.infoBox h4 {
    font-size: calc(26 * var(--vw-base));
    line-height: 130%;
    margin: 1vw 0;
}

.infoBox h5 {
    font-size: calc(26 * var(--vw-base));
    line-height: 130%;
    margin-bottom: 1vw;
}

.infoBox p {
    font-size: calc(26 * var(--vw-base));
    line-height: 200%;
}