@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: "TrajanPro-Bold";

    src: url(../fonts/TrajanPro-Bold.otf);

}

@font-face {

    font-family: "TrajanPro-Regular";

    src: url(../fonts/TrajanPro-Regular.otf);

}



@font-face {

    font-family: "Futura-Std-Light";

    src: url(../fonts/Futura\ Std\ Light.otf);

}



@font-face {

    font-family: "Futura-Std-Book";

    src: url(../fonts/Futura\ Std\ Book.otf);

}



@font-face {

    font-family: "Futura-Std-Medium";

    src: url(../fonts/Futura\ Std\ Medium.otf);

}







.Futura-Std-Medium {

    font-family: "Futura-Std-Medium";

}



.Futura-Std-Light {

    font-family: "Futura-Std-Light";

}



.Futura-Std-Book {

    font-family: "Futura-Std-Book";

}





[data-aos="opacity-down"] {

    opacity: 0;

    clip-path: inset(0% 0 100% 0);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-down"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}



[data-aos="opacity-up"] {

    opacity: 0;

    clip-path: inset(100% 0 0% 0);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-up"].aos-animate {

    opacity: 1;

    clip-path: inset(0% 0 0 0);

    /* 显示全部图片 */

}



[data-aos="opacity-right"] {

    opacity: 0;

    clip-path: inset(0% 100% 0% 0);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-right"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}



[data-aos="opacity-left"] {

    opacity: 0;

    clip-path: inset(0% 0% 0% 100%);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-left"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}





.dot-left {

    display: inline-block;

    margin-left: -0.6vw;

}



body,

html {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    /* scroll-behavior: smooth; */

    --vw-base: calc(100vw / 1920);

    -ms-overflow-style: none;

    scrollbar-width: none;

}



html::-webkit-scrollbar {

    /* display: 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;

}



video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.visibility {

    visibility: visible !important;

}



.all {

    width: 100%;

    height: auto;

    overflow: hidden;

}



.opacity {

    opacity: 0;

    transition: all 0.3s linear;

}



.opacity1 {

    opacity: 1;

    transition: all 0.3s linear;

}





.voice ,.voice2{

    width: 2vw;

    z-index: 9;

    color: #fff;

    position: absolute;

    right: 2vw;

    bottom: 3vw;

    cursor: pointer;

}





.haveVoice,

.noVoice {

    width: 100%;

    position: relative;

}

.haveVoice2,

.noVoice2 {

    width: 100%;

    position: relative;

}



.pic-txt {

    position: absolute;

    bottom: 1vw;

    left: 1vw;

    color: #fff;

    font-size: calc(13* var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: calc(20* var(--vw-base));

    z-index: 10;

    text-shadow: #4e484698 1px 1px 1px;

}

.pic-txt.right {

    position: absolute;

    bottom: 1vw;

    right: 1vw;

    left: auto;

    color: #fff;

    font-size: calc(18* var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: calc(20* var(--vw-base));

    z-index: 10;

    text-shadow: #4e484698 1px 1px 1px;

}

.pic-txt.topright {

    position: absolute;

    top: 1vw;

    bottom: auto;

    right: 1vw;

    left: auto;

    color: #fff;

    font-size: calc(18* var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: calc(20* var(--vw-base));

    z-index: 10;

    text-shadow: #4e484698 1px 1px 1px;

}







.nav-icon img {

    object-fit: contain;

}





/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

}



.simpleParallax {

    overflow: visible !important;

}





.bg-fallback {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: opacity .6s ease;

    z-index: 2;

}



.bg-ready .bg-fallback {

    opacity: 0;

    pointer-events: none;

}





/*第1頁*/



.m1 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: clip;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #000;

}



.m1-bg {

    position: absolute;

    width: 100%;

    height: 100%;

}



.m1-txt {

    position: absolute;

    left: 9vw;

    top: 22vw;

    width: calc(500*var(--vw-base));

    height: calc(150*var(--vw-base));

}



.m1-txt .e1,

.m1-txt .e2,

.m1-txt .cn {

    position: relative;

    left: 0;

    top: 0;

    width: 100%;

}



.m1-txt .e1 {

    display: inline-block;

    color: #fff;

    font-size: calc(40*var(--vw-base));

    font-family: "TrajanPro-Bold";

    letter-spacing: 0.05em;

    line-height: calc(60*var(--vw-base));

}

.m1-txt .e2 {

    display: inline-block;

    color: #fff;

    font-size: calc(33*var(--vw-base));

    font-family: "TrajanPro-Regular";

    letter-spacing: 0.05em;

    line-height: calc(43*var(--vw-base));

}









/*第2頁*/

.m2 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: clip;

    display: flex;

    align-items: center;

    justify-content: center;

}

.m2-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}

.m2-txt1 {

    position: absolute;

    left: 7vw;

    top: 33vw;

    width: calc(837*var(--vw-base));

    height: calc(220*var(--vw-base));

    z-index: 10;

}

.m2-txt1 .cn {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.m2-txt1 img {

    object-fit: contain;

}

.m2-bg video{

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

    object-fit: cover;

    border: none;

    font-size: 0;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    pointer-events: none;

}



.m2-txt2 {

    position: absolute;

    right: 6.5vw;

    top: 29vw;

    width: calc(335*var(--vw-base));

    height: calc(339*var(--vw-base));

    z-index: 10;

}

.m2-txt2 .cn {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.m2-txt2 img {

    object-fit: contain;

}









/*第3頁*/

.m3 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: hidden;

}

.m3-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.m3-bg-s{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 3;

    animation: m3-shine 1.5s ease 1s infinite;

    animation-delay: 1s;

    opacity: 0;



}

@keyframes m3-shine {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: 0;

    }

}

.m3-tag , .m3-logo{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 9;

}

.m3-tag img ,  .m3-logo img{

    object-fit: cover;

    width: 100%;

    height: 100%;

}

.m3-logo{

    animation: m3-logo 1.5s ease 1s infinite;

    animation-delay: 1s;

}

@keyframes m3-logo {

    0% {

        top: 0;

    }

    50% {

        top: 2%;

    }

    100% {

        top: 0;

    }

}



.m3-txt {

    position: absolute;

    left: 7vw;

    top: 4vw;

    width: calc(530*var(--vw-base));

    height: calc(79*var(--vw-base));

    z-index: 9;

}

.m3-txt2 {

    width: 25vw;

    position: absolute;

    right: 5vw;

    top: 9vw;

    z-index: 9;

}

.m3-txt2 h1 {

    position: relative;

    color: #fff;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

}

.m3-txt2 h2 {

    position: relative;

    color: #fff;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

}

.m3-txt2 h3 {

    margin-top: calc(30*var(--vw-base));

    position: relative;

    color: #fff;

    font-size: calc(20*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: calc(42*var(--vw-base));

    text-align: left;

}



.m3-txt .e1,

.m3-txt .e2,

.m3-txt .cn {

    position: relative;

    left: 0;

    top: 0;

    width: 100%;

}



.m3-txt .e1{

    display: inline-block;

    color: #fff;

    font-size: calc(40*var(--vw-base));

    font-family: "TrajanPro-Bold";

    letter-spacing: 0.05em;

    line-height: calc(60*var(--vw-base));

}

.m3-txt .e2 {

    display: inline-block;

    color: #fff;

    font-size: calc(33*var(--vw-base));

    font-family: "TrajanPro-Regular";

    letter-spacing: 0.05em;

    line-height: calc(40*var(--vw-base));

}







/*第4頁*/

.m4 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: clip;

    display: flex;

    align-items: center;

    justify-content: center;

}

.m4-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m4-txt {

    position: absolute;

    right: 5vw;

    top: 4vw;

    width: calc(530*var(--vw-base));

    height: calc(79*var(--vw-base));

    z-index: 5;

}

.m4-txt2 {

    width: 25vw;

    position: absolute;

    left: 8vw;

    top: 13vw;

    z-index: 9;

}

.m4-txt2 h1 {

    position: relative;

    color: #6a3906;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

}

.m4-txt2 h2 {

    position: relative;

    color: #40220f;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

}

.m4-txt2 h3 {

    margin-top: calc(80*var(--vw-base));

    position: relative;

    color: #231815;

    font-size: calc(20*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.1em;

    line-height: calc(42*var(--vw-base));

    text-align: left;

}



.m4-txt .e1,

.m4-txt .e2{

    position: relative;

    width: 100%;

}



.m4-txt .e1{

    display: inline-block;

    color: #6a3906;

    font-size: calc(40*var(--vw-base));

    font-family: "TrajanPro-Bold";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

    text-align: right;

}

.m4-txt .e2 {

    display: inline-block;

    color: #40220f;

    font-size: calc(33*var(--vw-base));

    font-family: "TrajanPro-Regular";

    letter-spacing: 0.05em;

    line-height: calc(40*var(--vw-base));

    text-align: right;

}





/*-----Swiper---------*/

#m4 .swiper {

  position: absolute;       /* ✅ 固定在螢幕右側，不被其他版塊影響 */

  top: 50%;

  right: 0;

  transform: translateY(-50%);

  width: 60vw;           /* 右側佔 30% 寬度，可自行調整 */

  height: 28vw;

  z-index: 10;

  overflow: hidden;

}



#m4 .swiper-wrapper {

  display: flex;

  align-items: center;

}



#m4 .swiper-slide {

  width: 25vw;

  height: 28vw;           /* ✅ 配合 slidesPerView:'auto' */

  flex-shrink: 0;

  margin-right: 2.5vw;

  overflow: hidden;

}

#m4 .swiper-slide img {

  width: 25vw;

  height: 25vw; 

  object-fit: cover;

  border-radius: 0;

  cursor: pointer;

  transition: transform 0.3s ease;

  opacity: 0.3;

  transition: all 0.3s ease; 

}

#m4 .swiper-slide.swiper-slide-active img{

    opacity: 1;

}

#m4 .pic_title{

    margin-top: calc(10*var(--vw-base));

    position: relative;

    color: #231815;

    font-size: calc(15*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: calc(30*var(--vw-base));

    text-align: left;

}

#m4 .control-bar{

    width: 28vw;

    position: absolute;

    left: 60vw;

    top: 41vw;

    text-align: center;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    align-items: center;

    justify-content: center;



}

#m4 .control-bar .swiper-pagination {

    position: relative;

    text-align: center;

    z-index: 10;

    margin: 0vw;

}

#m4 .control-bar .swiper-pagination-bullet {

    display: inline-block;

    background-repeat: no-repeat;

    background-size: contain;

    width: 3vw;

    height: 1px;

    margin: 0 !important;

    opacity: 1;

    border: none;

    background-color: #c9bc9c;

    border-radius: 0;

}

#m4 .control-bar .swiper-pagination-bullet-active {

    background-color: #40220f;

    width: 3vw;

    height: 2px;

    margin: 0 !important;

}



/* === Swiper Scrollbar === */

#m4 .control-bar .swiper-scrollbar {

  position: absolute;

  top: 0;

  left: 0;

  width: 28vw;

  height: 1px;                  /* ✅ 外觀仍細 */

  background: #c9bc9c;

  border-radius: 0;

  z-index: 59;

  cursor: grab;

  transition: background 0.3s ease;

}



/* ✅ 利用偽元素擴大可拖曳範圍（不改外觀） */

#m4 .control-bar .swiper-scrollbar::before {

  content: "";

  position: absolute;

  inset: -6px 0;                /* ↑↑ 上下各加 6px 的透明區域 */

  background: transparent;

  cursor: grab;

  z-index: 60;                  /* 要比 scrollbar 本身高一層 */

}



/* 可拖曳的滑塊 */

#m4 .control-bar .swiper-scrollbar-drag {

  height: 2px;

  background: #40220f;

  border-radius: 10px;

  cursor: grab;

}



/* hover 時略亮（仍不改 hit 範圍） */

#m4 .control-bar .swiper-scrollbar:hover {

  background: #bbae90;

}





/* Swiper 控制按鈕 */

#m4 .swiper-button-prev{ 

    width: 1.8vw;

    height: 1.8vw;

    position: absolute;

    font-size: 0;

    left: 37vw;

    background-image: url(../img/ar-l.png);

    background-repeat: no-repeat;

    background-size: contain;

    z-index: 9;

}

#m4 .swiper-button-next { 

    width: 1.8vw;

    height: 1.8vw;

    font-size: 0;

    right: 3vw; 

    background-image: url(../img/ar-r.png);

    background-repeat: no-repeat;

    background-size: contain;

}



/* === Lightbox === */

.lightbox-swiper {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: url(../img/bg3-opbg.png) no-repeat center/cover;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 9999999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 1s ease; /* ✅ 柔和淡入 */

}

/* 開啟狀態 */

.lightbox-swiper.active {

  opacity: 1;

  pointer-events: auto;

}





.lightbox-swiper .swiper {

  width: 80vw;

  height: 80vh;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* ✅ 水平排列 slide */

.lightbox-swiper .swiper-wrapper {

  display: flex;

  width: 100%;

  height: 100%;

}



/* === 每張 slide === */

.lightbox-swiper .swiper-slide {

  position: relative;

  flex-shrink: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* === 圖片包裝區（維持16:9比例）=== */

.lightbox-swiper .img-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9; /* 🔸固定 16:9 顯示區域 */

  background: transparent;

  overflow: hidden;

}



/* === 圖片 === */

.lightbox-swiper .swiper-slide img {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 85%;

  height: 85%;

  object-fit: contain;  /* 保留完整圖片內容 */

  transition: transform 0.3s ease, opacity 0.3s ease;

  opacity: 1;

  cursor: pointer;

}





/* 關閉按鈕 */

.close-lightbox {

    position: absolute;

    width: 2vw;

    height: 2vw;

    top: 5vh;

    right: 3.5vw;

    font-size: 0;

    background-image: url(../img/close.png);

    background-repeat: no-repeat;

    background-size: contain;

    cursor: pointer;

    z-index: 10000;

}



/* 左右箭頭 */

/* === 左右箭頭 === */

.lightbox-swiper .swiper-button-prev,

.lightbox-swiper .swiper-button-next {

  position: absolute;

  width: 1.8vw;

  height: 1.8vw;

  font-size: 0;

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

  z-index: 10001;              /* ✅ 確保在最上層 */

  opacity: 0;

  transform: translateY(10px);

  transition: all 0.4s ease;

  cursor: pointer;

}



/* ✅ 開啟時淡入 */

.lightbox-swiper.active .swiper-button-prev,

.lightbox-swiper.active .swiper-button-next {

  opacity: 1;

  transform: translateY(0);

  transition-delay: 0.3s;

}



/* 圖片設定 */

.lightbox-swiper .swiper-button-prev { 

  left: 3vw; 

  background-image: url(../img/ar-l.png);

}

.lightbox-swiper .swiper-button-next { 

  right: 3vw; 

  background-image: url(../img/ar-r.png);

}













/*第5頁*/

.m5 {

  position: relative;

  width: 100%;

  height: calc(950 * var(--vw-base));

  overflow: hidden;

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}

.m5-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



/* === 圖片分層設定 === */

.m5 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  left: 0;

  top: 0;

  background: transparent;

  z-index: 5;

}



/* === 文字區塊設定 === */

.m5-txt {

  position: absolute;

  left: 8.8vw;

  top: 6vw;

  width: calc(530 * var(--vw-base));

  height: calc(79 * var(--vw-base));

  z-index: 5;

}

.m5-txt2 {

  width: 30vw;

  position: absolute;

  left: 8.8vw;

  top: 22vw;

  z-index: 9;

}

.m5-txt.right {

  right: 8vw;

  left: auto;

  top: 6vw;

  z-index: 5;

}

.m5-txt2.right {

  right: 8vw;

  left: auto;

  top: 20vw;

  width: calc(530 * var(--vw-base));

  z-index: 9;

}



/* === 主標、副標、內文 === */

.m5-txt2 h1 {

  position: relative;

  color: #6a3906;

  font-size: calc(30 * var(--vw-base));

  font-family: "Noto Sans TC";

  font-weight: 500;

  letter-spacing: 0.1em;

  line-height: calc(50 * var(--vw-base));

  text-align: left;



}

.m5-txt2 h2 {

  position: relative;

  color: #40220f;

  font-size: calc(30 * var(--vw-base));

  font-family: "Noto Sans TC";

  font-weight: 400;

  letter-spacing: 0.1em;

  line-height: calc(50 * var(--vw-base));

  text-align: left;



}

.m5-txt2 h3 {

  margin-top: calc(80 * var(--vw-base));

  position: relative;

  color: #231815;

  font-size: calc(20 * var(--vw-base));

  font-family: "Noto Sans TC";

  font-weight: 400;

  letter-spacing: 0.05em;

  line-height: calc(42 * var(--vw-base));

  text-align: left;



}



/* === 英文字樣 === */

.m5-txt .e11,

.m5-txt .e22 {

  position: relative;

  width: 100%;

  transition: all 0.4s ease;

}

.m5-txt .e11 {

  display: inline-block;

  color: #6a3906;

  font-size: calc(40 * var(--vw-base));

  font-family: "TrajanPro-Bold";

  letter-spacing: 0.05em;

  line-height: calc(50 * var(--vw-base));

  text-align: left;



}

.m5-txt .e22 {

  display: inline-block;

  color: #40220f;

  font-size: calc(33 * var(--vw-base));

  font-family: "TrajanPro-Regular";

  letter-spacing: 0.05em;

  line-height: calc(40 * var(--vw-base));

  text-align: left;



}













/*第6頁*/

.m6 {

    position: relative;

    width: 100%;

    height: calc(1360*var(--vw-base));

    overflow: hidden;

}



.m6-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.m6-txt {

    position: absolute;

    right: 5vw;

    top: 5vw;

    width: calc(830*var(--vw-base));

    height: calc(79*var(--vw-base));

    z-index: 9;

}

.m6-txt2 {

    width: 50vw;

    position: absolute;

    left: 8vw;

    top: 10vw;

    z-index: 9;

}

.m6-txt2 h1 {

    position: relative;

    color: #fff;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

}

.m6-txt2 h2 {

    position: relative;

    color: #fff;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

}

.m6-txt2 h3 {

    margin-top: calc(30*var(--vw-base));

    position: relative;

    color: #fff;

    font-size: calc(20*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: calc(42*var(--vw-base));

    text-align: left;

}

.m6-txt .e1,

.m6-txt .e2{

    position: relative;

    width: 100%;

}

.m6-txt .e1{

    display: inline-block;

    color: #fff;

    font-size: calc(40*var(--vw-base));

    font-family: "TrajanPro-Bold";

    letter-spacing: 0.05em;

    line-height: calc(60*var(--vw-base));

    text-align: right;

}

.m6-txt .e2 {

    display: inline-block;

    color: #fff;

    font-size: calc(33*var(--vw-base));

    font-family: "TrajanPro-Regular";

    letter-spacing: 0.05em;

    line-height: calc(40*var(--vw-base));

    text-align: right;

}















/*第7頁*/

.m7 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: clip;

    background: #000;

}



.m7-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}











/*第8頁*/

.m8 {

    position: relative;

    width: 100%;

    height: calc(850*var(--vw-base));

    overflow: clip;

    display: flex;

    align-items: center;

    justify-content: center;

}

.m8-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.m8-txt {

    position: absolute;

    right: 5vw;

    top: 4vw;

    width: calc(630*var(--vw-base));

    height: calc(79*var(--vw-base));

    z-index: 5;

}

.m8-txt2 {

    width: 25vw;

    position: absolute;

    left: 6vw;

    top: 10vw;

    z-index: 9;

}

.m8-txt2 h1 {

    position: relative;

    color: #6a3906;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

}

.m8-txt2 h2 {

    position: relative;

    color: #40220f;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

}

.m8-txt2 h3 {

    margin-top: calc(40*var(--vw-base));

    position: relative;

    color: #231815;

    font-size: calc(20*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.05em;

    line-height: calc(42*var(--vw-base));

    text-align: left;

}



.m8-txt .e1,

.m8-txt .e2{

    position: relative;

    width: 100%;

}



.m8-txt .e1{

    display: inline-block;

    color: #6a3906;

    font-size: calc(40*var(--vw-base));

    font-family: "TrajanPro-Bold";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

    text-align: right;

}

.m8-txt .e2 {

    display: inline-block;

    color: #40220f;

    font-size: calc(33*var(--vw-base));

    font-family: "TrajanPro-Regular";

    letter-spacing: 0.05em;

    line-height: calc(40*var(--vw-base));

    text-align: right;

}





/* === M8 Swiper === */

#m8 .swiper {

    position: absolute;

    top: 50%;

    right: 6vw;

    transform: translateY(-50%);

    width: 55vw;

    height: 38vw;

    z-index: 10;

    overflow: hidden;

}

#m8 .swiper-wrapper {

  display: flex;

  align-items: center;

}



#m8 .swiper-slide {

  width: 100%;

  height: 100%;

  flex-shrink: 0;

  margin-right: 2.5vw;

  overflow: hidden;

}



#m8 .swiper-slide img {

  width: 55vw;

  height: 30vw;

  object-fit: cover;

  cursor: pointer;

  transition: all 0.3s ease;

}

#m8 .swiper-slide.swiper-slide-active img {

}



#m8 .pic_title {

    margin-top: calc(15 * var(--vw-base));

    position: relative;

    color: #231815;

    font-size: calc(23 * var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.1em;

    line-height: calc(40 * var(--vw-base));

    text-align: center;

}



/* === Control Bar === */

#m8 .control-bar {

    width: 28vw;

    position: absolute;

    left: 53vw;

    top: 38vw;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

}



#m8 .control-bar .swiper-pagination {

  position: relative;

  text-align: center;

  z-index: 10;

  margin: 0;

}



#m8 .control-bar .swiper-pagination-bullet {

  display: inline-block;

  width: 3vw;

  height: 1px;

  margin: 0 !important;

  background-color: #c9bc9c;

  opacity: 1;

  border-radius: 0;

}



#m8 .control-bar .swiper-pagination-bullet-active {

  background-color: #40220f;

  height: 2px;

}



/* === Scrollbar === */

#m8 .control-bar .swiper-scrollbar {

  position: absolute;

  top: 0;

  left: 0;

  width: 28vw;

  height: 1px;

  background: #c9bc9c;

  border-radius: 0;

  z-index: 59;

  cursor: grab;

  transition: background 0.3s ease;

}



#m8 .control-bar .swiper-scrollbar::before {

  content: "";

  position: absolute;

  inset: -6px 0; /* 擴大可拖曳範圍 */

  background: transparent;

  cursor: grab;

  z-index: 60;

}



#m8 .control-bar .swiper-scrollbar-drag {

  height: 2px;

  background: #40220f;

  border-radius: 10px;

  cursor: grab;

}



#m8 .control-bar .swiper-scrollbar:hover {

  background: #bbae90;

}



/* === Swiper Buttons === */

#m8 .swiper-button-prev {

    width: 1.8vw;

    height: 1.8vw;

    position: absolute;

    top: 40%;

    left: 35vw;

    background: url(../img/ar-l.png) no-repeat center / contain;

    z-index: 9;

}



#m8 .swiper-button-next {

    width: 1.8vw;

    height: 1.8vw;

    position: absolute;

    top: 40%;

    right: 2.3vw;

    background: url(../img/ar-r.png) no-repeat center / contain;

    z-index: 10;

}



/* === Lightbox === */

#lightbox-m8 {

  position: fixed;

  inset: 0;

  background: url(../img/bg3-opbg.png) no-repeat center/cover;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 9999999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 1s ease;

}



#lightbox-m8.active {

  opacity: 1;

  pointer-events: auto;

}



/* === Lightbox Swiper === */

#lightbox-m8 .swiper {

  width: 80vw;

  height: 80vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  position: relative;

}



#lightbox-m8 .swiper-wrapper {

  display: flex;

  width: 100%;

  height: 100%;

}



#lightbox-m8 .swiper-slide {

  position: relative;

  flex-shrink: 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}



#lightbox-m8 .img-wrap {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

}

#lightbox-m8 .img-wrap img{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 50%;

    left: 50%;

    font-size: 0;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    -webkit-transition: all 0.35s ease-out;

    transition: all 0.35s ease-in-out;

}

#lightbox-m8 .pic_title {

    position: absolute;

    right: 2vw;

    top: 1.5vw;

    left: auto;

    color: #fff;

    font-size: calc(18 * var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

    opacity: 0;

    transform: translateY(10px);

    transition: opacity 0.5s ease, transform 0.4s ease;

    z-index: 5;

}



#lightbox-m8.active .swiper-slide-active .pic_title {

  opacity: 1;

  transform: translateY(0);

}







/* Close Button */

#lightbox-m8 .close-lightbox {

  position: absolute;

  width: 2vw;

  height: 2vw;

  top: 5vh;

  right: 3.5vw;

  background: url(../img/close.png) no-repeat center/contain;

  cursor: pointer;

  z-index: 10000;

}



/* Arrows */

#lightbox-m8 .swiper-button-prev,

#lightbox-m8 .swiper-button-next {

  position: absolute;

  width: 1.8vw;

  height: 1.8vw;

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

  z-index: 10001;

  opacity: 0;

  transform: translateY(10px);

  transition: all 0.4s ease;

  cursor: pointer;

}



#lightbox-m8.active .swiper-button-prev,

#lightbox-m8.active .swiper-button-next {

  opacity: 1;

  transform: translateY(0);

  transition-delay: 0.3s;

}





#lightbox-m8 .swiper-button-prev {

  left: 3vw;

  background-image: url(../img/ar-l.png);

}

#lightbox-m8 .swiper-button-next {

  right: 3vw;

  background-image: url(../img/ar-r.png);

}













/*第10頁*/

.m10 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: hidden;

    background-image: url(../img/bg10-2.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}

.m10-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}

.m10-txt {

    position: absolute;

    left: 8.5vw;

    top: 6.5vw;

    width: calc(530 * var(--vw-base));

    height: calc(79 * var(--vw-base));

    z-index: 5;

}

.m10-txt2 {

    width: 30vw;

    position: absolute;

    left: 35vw;

    top: 23vw;

    z-index: 9;

}

.m10-txt.right {

    position: absolute;

    right: 10vw;

    left: auto;

    top: 6.5vw;

    width: calc(530*var(--vw-base));

    height: calc(79*var(--vw-base));

    z-index: 5;

}

.m10-txt2.right  {

    width: 35vw;

    position: absolute;

    right: 3vw;

    left: auto;

    top: 19.2vw;

    z-index: 9;

}

.m10-txt2 h1 {

    position: relative;

    color: #6a3906;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: center;

    opacity: 0;

    transition: all 0.4s ease;

    transform: translate3d(0px, -40px, 0);

}

.m10-txt2 h2 {

    position: relative;

    color: #40220f;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: center;

    opacity: 0;

    transition: all 0.4s ease;

    transform: translate3d(0px, 0px, 0);

}

.m10-txt2 h3 {

    margin-top: calc(50 * var(--vw-base));

    position: relative;

    color: #231815;

    font-size: calc(20 * var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

    line-height: calc(42 * var(--vw-base));

    text-align: center;

    opacity: 0;

    transition: all 0.4s ease;

    transform: translate3d(0px, 0px, 0);

}

.m10-txt2.right  h1 , .m10-txt2.right  h2 , .m10-txt2.right  h3{

    text-align: left;

}

.m10-txt .e1,

.m10-txt .e2{

    position: relative;

    width: 100%;

    opacity: 0;

    transition: all 0.4s ease;

}



.m10-txt .e1{

    display: inline-block;

    color: #6a3906;

    font-size: calc(40*var(--vw-base));

    font-family: "TrajanPro-Bold";

    letter-spacing: 0.05em;

    line-height: calc(50*var(--vw-base));

    text-align: left;

    opacity: 0;

    transform: translate3d(40px, 0, 0);

}

.m10-txt .e2 {

    display: inline-block;

    color: #40220f;

    font-size: calc(33*var(--vw-base));

    font-family: "TrajanPro-Regular";

    letter-spacing: 0.05em;

    line-height: calc(40*var(--vw-base));

    text-align: left;

    opacity: 0;

    transform: translate3d(-40px, 0, 0);

}

#m10 .swiper {

  position: absolute;       /* ✅ 固定在螢幕右側，不被其他版塊影響 */

  top: 0%;

  right: 0;

  width: 100%;           /* 右側佔 30% 寬度，可自行調整 */

  height: 100%;

  z-index: 10;

  overflow: hidden;

}



#m10 .swiper-wrapper {

  display: flex;

  align-items: center;

}



#m10 .swiper-slide {

  width: 100%;

  height: 100%;           /* ✅ 配合 slidesPerView:'auto' */

  flex-shrink: 0;

  margin-right:0;

  overflow: hidden;

    /*background-image: url('../img/bg10-1.jpg');*/

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}

#m10 .swiper-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  left: 0;

  top: 0;

  background: transparent;

  opacity: 0;

  transition: opacity 1s ease;

}

#m10 .swiper-slide img.m1 {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: relative;

  left: 0;

  top: 0;

}

/* 分層 */

#m10 .m1 { z-index: 1; }

#m10 .m2 { z-index: 2; }

#m10 .m3 { z-index: 3; }

#m10 .m4 { z-index: 4; }



/* 開啟動畫後的顯示狀態 */

#m10 .swiper-slide.animate img {

  opacity: 1;

}

/* === 左右箭頭 === */

#m10 .swiper-button-prev,

#m10 .swiper-button-next {

  position: absolute;

  width: 1.8vw;

  height: 1.8vw;

  font-size: 0;

  top: 50%;

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

  z-index: 100;              /* ✅ 確保在最上層 */

  cursor: pointer;

}

/* 圖片設定 */

#m10 .swiper-button-prev { 

  left: 3vw; 

  background-image: url(../img/ar-l.png);

}

#m10 .swiper-button-next { 

  right: 3vw; 

  background-image: url(../img/ar-r.png);

}



/* 一開始全部隱藏 */

#m10 .m10-txt .e1,

#m10 .m10-txt .e2,

#m10 .m10-txt2 h1,

#m10 .m10-txt2 h2,

#m10 .m10-txt2 h3 {

  opacity: 0;

  transform: translate3d(0,0,0);

}















/*第11頁*/

.m11 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: hidden;

}



.m11-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}

.m11-pic{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 8;

}

.m11-pic img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    left: 0;

    top: 0;

}

.m11-txt {

    width: 50vw;

    position: absolute;

    left: 25vw;

    top: 5vw;

    z-index: 9;

}

.m11-txt2 {

    width: 50vw;

    position: absolute;

    left: 25vw;

    top: 10vw;

    z-index: 9;

}

.m11-txt2 h1 {

    position: relative;

    color: #6a3906;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: center;

    opacity: 0;

    transition: all 0.4s ease;

    transform: translate3d(0px, -40px, 0);

}

.m11-txt2 h2 {

    position: relative;

    color: #40220f;

    font-size: calc(30*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.1em;

    line-height: calc(50*var(--vw-base));

    text-align: center;

    opacity: 0;

    transition: all 0.4s ease;

    transform: translate3d(0px, 0px, 0);

}

.m11-txt2 h3 {

    margin-top: calc(50 * var(--vw-base));

    position: relative;

    color: #231815;

    font-size: calc(20 * var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

    line-height: calc(42 * var(--vw-base));

    text-align: center;

    opacity: 0;

    transition: all 0.4s ease;

    transform: translate3d(0px, 0px, 0);

}

.m11-txt .e1,

.m11-txt .e2{

    position: relative;

    width: 100%;

    opacity: 0;

    transition: all 0.4s ease;

}

.m11-txt .e2 {

    display: inline-block;

    color: #40220f;

    font-size: calc(33*var(--vw-base));

    font-family: "TrajanPro-Regular";

    letter-spacing: 0.05em;

    line-height: calc(40*var(--vw-base));

    text-align: center;

    opacity: 0;

    transform: translate3d(-40px, 0, 0);

}



.m11-btn{

    width: 14.5vw;

    height: 23vw;

    position: absolute;

    z-index: 10;

    cursor: pointer;

   /* background-color: rgba(0, 0, 25, 0.5);*/

}

.m11-btn1{left: 4.5vw;top: 17vw;}

.m11-btn2{left: 19.8vw;top: 17vw;}

.m11-btn3{left: 35.1vw;top: 17vw;}

.m11-btn4{left: 50.4vw;top: 17vw;}

.m11-btn5{left: 65.6vw;top: 17vw;}

.m11-btn6{left: 80.9vw;top: 17vw;}







#lightbox-m11 {

  position: fixed;

  inset: 0;

  background: url(../img/bg3-opbg.png) no-repeat center/cover;

  display: flex; /* 常駐，避免 reflow */

  justify-content: center;

  align-items: center;

  z-index: 9999999;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 0.8s ease, visibility 0.8s ease;

  will-change: opacity;

  backface-visibility: hidden;

  transform: translateZ(0);

}

#lightbox-m11.active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}





/* === Lightbox Swiper === */

#lightbox-m11 .swiper {

  width: 80vw;

  height: 80vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  position: relative;

}



#lightbox-m11 .swiper-wrapper {

  display: flex;

  width: 100%;

  height: 100%;

}



#lightbox-m11 .swiper-slide {

  position: relative;

  flex-shrink: 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}



#lightbox-m11 .img-wrap {

  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

}

#lightbox-m11 .img-wrap img{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 50%;

    left: 50%;

    font-size: 0;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    -webkit-transition: all 0.35s ease-out;

    transition: all 0.35s ease-in-out;

}



/* Close Button */

#lightbox-m11 .close-lightbox {

  position: absolute;

  width: 2vw;

  height: 2vw;

  top: 5vh;

  right: 3.5vw;

  background: url(../img/close.png) no-repeat center/contain;

  cursor: pointer;

  z-index: 10000;

}



/* Arrows */

#lightbox-m11 .swiper-button-prev,

#lightbox-m11 .swiper-button-next {

  position: absolute;

  width: 1.8vw;

  height: 1.8vw;

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

  z-index: 10001;

  opacity: 0;

  transform: translateY(10px);

  transition: all 0.4s ease;

  cursor: pointer;

}



#lightbox-m11.active .swiper-button-prev,

#lightbox-m11.active .swiper-button-next {

  opacity: 1;

  transform: translateY(0);

  transition-delay: 0.3s;

}





#lightbox-m11 .swiper-button-prev {

  left: 3vw;

  background-image: url(../img/ar-l.png);

}

#lightbox-m11 .swiper-button-next {

  right: 3vw;

  background-image: url(../img/ar-r.png);

}











/*第9頁*/

.m9 {

    position: relative;

    width: 100%;

    height: calc(950*var(--vw-base));

    overflow: clip;

    background: #000;

}



.m9-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m9-info {

    position: absolute;

    left: calc(245*var(--vw-base));

    top: calc(192*var(--vw-base));

    display: flex;

    flex-direction: column;

}



.m9-txt1 {

    position: relative;

    width: calc(420*var(--vw-base));

     height: calc(350*var(--vw-base));

}

.m9-txt2 {

    position: relative;

    width: calc(420 * var(--vw-base));

    height: calc(40 * var(--vw-base));

    margin-top: 1.25vw;

}

.m9-txt2 a{

    display: block;

    height: calc(40 * var(--vw-base));

}

.m9-txt2 a.map{

    display: block;

    height: calc(30 * var(--vw-base));

}

.m9-txt3 {

    position: relative;

    width: calc(420 * var(--vw-base));

    height: calc(146 * var(--vw-base));

    margin-top: 3vw;

}

.m9-txt1 img{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    object-fit: contain;

}

.m9-txt2 img , .m9-txt3 img{

    position: relative;

    width: 100%;

    object-fit: contain;

}









.form-info {

    position: absolute;

    right: calc(210*var(--vw-base));

    top: calc(200*var(--vw-base));

    display: flex;

    flex-direction: column;

    align-items: center;

}



.form-container {

    position: relative;

    width: calc(814*var(--vw-base));

    background-image: url(../img/bg9-formbg.jpg);

    background-repeat: no-repeat;

    background-size: cover;

    box-sizing: border-box;

    padding: 2vw calc(68*var(--vw-base)) 0 calc(68*var(--vw-base));

}



.form-title {

    position: relative;

    margin-top: calc(25 * var(--vw-base));

    margin-bottom: calc(35 * var(--vw-base));

    width: 100%;

}



.input {

    position: relative;

    width: 100%;

    height: calc(75*var(--vw-base));

    box-sizing: border-box;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    /* padding: 0 calc(17*var(--vw-base)); */

}



.input::before {

    content: '';

    position: absolute;

    bottom: 0;

    /* 偽元素位於 .input 上方 */

    left: 0;

    width: 100%;

    /* 偽元素寬度填滿 */

    height: 0.5px;

    /* 偽元素高度，可調整為間隔需求 */

    background-color: #fff;

    /* 視覺樣式 */

}





.input label {

    position: relative;

    top: calc(0*var(--vw-base));

    /* width: calc(106*var(--vw-base)); */

    text-align-last: justify;

    font-size: calc(24*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.075em;

    color: #fff;

}



input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-text-fill-color: #fff;

    -webkit-box-shadow: 0 0 0px 1000px transparent inset;

    /*淡淡的白*/

    transition: background-color 5000s ease-in-out 0s;

    /*透明*/

}



.input input[type="text"],

.input input[type="tel"],

.input input[type="email"] {

    position: relative;

    top: calc(2*var(--vw-base));

    flex-grow: 1;

    font-size: calc(21* var(--vw-base));

    border: none;

    background-color: transparent;

    color: #fff;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: 'Noto Sans TC';

    font-weight: 400;

    letter-spacing: 0.05em;

    line-height: calc(30 * var(--vw-base));

    box-sizing: border-box;

    padding: 0 0 0 calc(17*var(--vw-base));

}



form button,

    #submitbtn {

    position: relative;

    appearance: none;

    -webkit-appearance: none;

    border-radius: 0;

    width: calc(142 * var(--vw-base));

    height: calc(35 * var(--vw-base));

    background-color: transparent;

    border: none;

    outline: none;

    cursor: pointer;

    z-index: 100;

    /* box-shadow: #231815 1px 1px 1px 1px; */

    transition: all 0.2s ease;

    background-color: #ffffff41;

    color: #40220f;

    letter-spacing: 0.05vw;

    font-weight: 400;

    font-size: calc(17 * var(--vw-base));

    line-height: calc(35 * var(--vw-base));

}





.form-btn {

    position: relative;

    width: 100%;

    margin: calc(30 * var(--vw-base)) 0 calc(70 * var(--vw-base));

    display: flex;

    justify-content: space-between;

    align-items: center;

}







.check-item {

    position: relative;

    display: flex;

    gap: calc(15*var(--vw-base));

    font-family: 'Noto Sans TC';

    font-weight: 400;

    letter-spacing: 0.2em;

    color: #fff;

    font-size: calc(20*var(--vw-base));

    cursor: pointer;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.openTxtBtn {

    position: relative;

    display: inline-block;

    letter-spacing: 0.2em;

    font-size: calc(15*var(--vw-base));

}



.openTxtBtn::before {

    content: '';

    position: absolute;

    bottom: calc(-5 * var(--vw-base));

    left: calc(0 * var(--vw-base));

    width: 100%;

    height: 1px;

    background-color: #fff;

}



.check-item label input {

    position: relative;

    top: calc(3 * var(--vw-base));

    width: calc(20 * var(--vw-base));

    height: calc(20 * var(--vw-base));

    margin: 0% 5% -2.5% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background-color: #fff;

    -webkit-mask-image: url(../img/check.png);

    /* 使用 -webkit-mask-image */

    mask-image: url(../img/check.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

    -webkit-mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

    /* 設置大小 */

    mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

    border: none;

    cursor: pointer;

}



.check-item label input:checked {

    mask-image: url(../img/checked.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

    -webkit-mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

    /* 設置大小 */

    mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

}



.m9 .input .check-item-sex {

    position: absolute;

    top: calc(23*var(--vw-base));

    right: calc(0*var(--vw-base));

    display: flex;

    gap: calc(20*var(--vw-base));

    font-size: calc(20 * var(--vw-base));

}



.m9 .input .check-item-sex label {

    cursor: pointer;

    width: calc(80* var(--vw-base));

    text-align: end;

    font-size: calc(20 * var(--vw-base));



}



.check-item-sex label input[type="radio"] {

    position: relative;

    top: calc(3.2 * var(--vw-base));

    width: calc(20 * var(--vw-base));

    height: calc(20 * var(--vw-base));

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background-color: #fff;

    -webkit-mask-image: url(../img/check.png);

    /* 使用 -webkit-mask-image */

    mask-image: url(../img/check.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

    -webkit-mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

    /* 設置大小 */

    mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

    cursor: pointer;

}



.check-item-sex label input:checked {

    mask-image: url(../img/checked.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

    -webkit-mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

    /* 設置大小 */

    mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

}



.pin-radios {

    position: relative;

    flex-grow: 1;

    box-sizing: border-box;

    padding: 0 0 0 calc(14 * var(--vw-base));

}



.pin-radios>label {

    position: relative;

    display: inline-block;

    font-size: calc(20*var(--vw-base));

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

    letter-spacing: 0.1em;

}



.pin-radios label input[type="radio"] {

    position: relative;

    margin: 0 0.3vw 0 0.4vw;

    top: calc(4 * var(--vw-base));

    width: calc(20* var(--vw-base));

    height: calc(20* var(--vw-base));

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background-color: #fff;

    -webkit-mask-image: url(../img/check.png);

    /* 使用 -webkit-mask-image */

    mask-image: url(../img/check.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

    -webkit-mask-size: calc(20 * var(--vw-base)) calc(20* var(--vw-base));

    /* 設置大小 */

    mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

    cursor: pointer;

}



.pin-radios label input:checked {

    mask-image: url(../img/checked.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

    -webkit-mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

    /* 設置大小 */

    mask-size: calc(20 * var(--vw-base)) calc(20 * var(--vw-base));

}



.nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: calc(70*var(--vw-base));

    display: flex;

    justify-content: space-between;

    box-sizing: border-box;

    background-color: #40220f;

    padding: 0 calc(68*var(--vw-base)) 0 calc(68*var(--vw-base));

    z-index: 99999;

    opacity: 0;

    transform: translateY(-100%);

    transition: all 0.6s ease;

}



.nav.show {

    opacity: 1;

    transform: translateY(0);

}



.nav-logo {

    position: relative;

    width: calc(170*var(--vw-base));

    height: 100%;

}



.nav-logo img {

    object-fit: contain;

}



.nav-right {

    position: relative;

    display: flex;

}



.nav-items {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    width: calc(200*var(--vw-base));

    height: 100%;

    gap: calc(10*var(--vw-base));

}



.nav-items::after {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    width: 1px;

    height: 1.8vw;

    transform: translateY(-50%);



    background-color: #c9a063;

}



.nav-items:last-child::after {

    display: none;

}



.nav-items img {

    object-fit: contain;

}



.nav-icon {

    position: relative;

    height: calc(25*var(--vw-base));

}





.nav-txt {

    position: relative;

    color: #fff;

    font-size: calc(20*var(--vw-base));

    font-family: "Futura-Std-Light";

    line-height: calc(17*var(--vw-base));

    letter-spacing: 0.1em;

}



canvas {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: 1 !important;

    transform: rotate(-25deg);

    pointer-events: none;

}



.form-end {

    position: relative;

    margin-top: 1.2vw;

    box-sizing: border-box;

    width: 100%;

}

.form-end img{

    width: 100%;

    object-fit: contain;

}



/*同意書照片預覽*/



.black {

    display: none;

    width: 100%;

    height: 100%;

    position: fixed;

    left: 0px;

    top: 0px;

    background-color: rgba(0, 0, 0, 0.9);

    z-index: 111111;

    font-family: "Noto Sans TC";

}



.closeBtn {

    width: 30px;

    position: absolute;

    right: 5%;

    top: 4%;

    cursor: pointer;

}



.infoWrap {

    width: 100%;

    margin: 0 auto;

    max-width: 65%;

    position: relative;

    height: 100vh;

    overflow: auto;

}



.infoWrap ul {

    list-style: none;

    font-size: 1vw;

    padding-inline-start: 2vw;

}



.infoWrap ul>li>ul {

    list-style: none;

    font-size: 1vw;

    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% - 20vw);

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    overflow-y: auto;

    color: #fff;

    text-align: left;

}



.infoBox h3 {

    font-size: 1.2vw;

    line-height: 180%;

    margin-bottom: 25px;

    text-align: center;

}



.infoBox h4 {

    font-size: 1vw;

    line-height: 180%;

    margin-bottom: 1vw;

}



.infoBox h5 {

    font-size: 1.2vw;

    line-height: 180%;

    margin-bottom: 1vw;

}



.infoBox p {

    font-size: 1vw;

    line-height: 180%;

}