@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(../fonts/NotoSansTC-Regular.woff2) format('woff2'),
          url(../fonts/NotoSansTC-Regular.woff) format('woff'),
          url(../fonts/NotoSansTC-Regular.otf) format('opentype');
 }

 body{
	font-family: 'Noto Sans TC', "Microsoft JhengHei", "Microsoft Yahei", Arial, sans-serif;
	background: #000000;
	margin: 0;
	padding: 0;
	color: #FFF;
  overflow-x: hidden;  /* 禁止橫向滾動 */
}


*/
a:focus, a:hover{
  text-decoration: none;
}

 #wrapper{
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.content{
	margin: 0;
	padding: 0;
}

.link-btn img{
  max-width: 100%;
}
/*==================================================================
[ Form ]*/

.contact100-form {
  width: 100%;
}

.contact100-form-title {
  display: block;
  font-size: 30px;
  color: #403866;
}

/*---------------------------------------------*/
button {
  outline: none !important;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}

iframe {
  border: none !important;
}


/*---------------------------------------------*/

/*------------------------------------------------*/

.container-contact100 {
  width: 100%;  
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 10px;
}

.wrap-contact100 {
  width: 35%;
  background: transparent;
}


/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
  width: 100%;
  margin-bottom: 16px;
  position: relative;
}

.input100 {
  position: relative;
  display: block;
  width: 100%;
  background: #fff;
  font-family: 'Noto Sans TC';
  font-size: 18px;
  color: #333;
  line-height: 1.2;
}


.link-btn{
  background-color: transparent;
  position: fixed;
  right: 10px;
  bottom: 0;
  width: 45px;
  text-align: center;
  z-index: 100;
}

.link-btn.hide{
  display: none;
}

.link-btn ul{
  padding: 20px 0;
}

.link-btn ul li{
  display: block;
}

.linkbtn{
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  width: 55px;
  height: 55px;
  background-color: transparent;
  border-radius: 3px;
  z-index: 1;
  margin:0 0 0 -10px;
}

button.linkbtn.icon1{

  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

button.linkbtn.icon2{

  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


button.linkbtn.icon3{

  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/*---------------------------------------------*/

/*--------------輸入欄打的字-------------------*/
input.input100 {
  font-family: 'Noto Sans TC', serif;
  padding: 10px 0 10px 9px;
  border: 0.5px solid;
  border-color: #C9C9CA;
  color: #595757;
  /*border-radius: 5px;*/
}

textarea.input100-area {
  font-family: 'Noto Sans TC', serif;
  padding: 10px 0 160px 9px;
  border: 0.5px solid;
  border-color: #C9C9CA;
  color: #595757;
  /*border-radius: 5px;*/
  position: relative;
}

textarea.input100 {
  min-height: 120px;
  padding: 19px 35px 0 35px;

}

textarea.input100 a{
  min-height: 200px;
  padding: 19px 35px 0 35px;
}

.input100-area{
  position: relative;
  display: block;
  width: 100%;
  min-height: 15vh;
  font-size: 15px;
  line-height: 1.2;
  box-sizing: border-box;
}


  .g-recaptcha{
    z-index: 4;
    padding-top: 20px;
    width: 100%;
  }

.contact100-form-btn,.contact100-form-btn2{
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 300px;
  height: 55px;
  background-color: transparent;
  border-radius: 31px;

  font-family: 'Noto Sans TC';
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 1px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  position: relative;
  z-index: 1;
}

.contact100-form-btn::before,.contact100-form-btn2::before{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 60%;
  height: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
  border: 1px solid #ffffff;
  
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

/*.contact100-form-btn:hover:before,.contact100-form-btn2:hover:before{
  background-color: #e9422c;
  width: calc(100% + 20px);
}

*/


/*img{
    max-width: 100%;
    height: auto;
}
*/
/*------------------------------------------------------------------
[ Button ]*/
.container-contact100-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 50px;
}


/*------------------------------------------------------------------
[ Alert validate ]以下為電腦版圖片*/

.page01{
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/t1.jpg") center center no-repeat;
    background-size: contain;
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 1300;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 15;
}

.page01logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 74%;                        /* 從頂部偏移 50% */
    left: 62%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 100%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page01logo img {
    width: 100%;
    height: auto;
}

.page02{
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/t2.jpg") center center no-repeat;
    background-size: contain;
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 1875;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 14;
}

.page02logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 35%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 45%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page02logo img {
    width: 100%;
    height: auto;
}

.page02logo2 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 75%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 15%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page02logo2 img {
    width: 100%;
    height: auto;
}



.page03{
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/t3.jpg") center center no-repeat;
    background-size: contain;
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 1850;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 14;
}

.page03logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 56%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 75%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page03logo img {
    width: 100%;
    height: auto;
}

.page03logo2 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 29%;                        /* 從頂部偏移 50% */
    left: 23%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    font-family: 'Belladonna Normal', serif; /* <-- 改成您自訂的字體 */
    width: 75%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

/* 設定文字本身的樣式 */
.page03logo2 p {
    font-size: 8vw;
    /* 關鍵：建立藍色金屬漸層效果 */
    background: linear-gradient(to bottom,#87a5b7, #2c6479, #ffffff, #799fb0, #34626c);
    
    /* 將背景漸層應用到文字上 */
    -webkit-background-clip: text;  /* 適用於 Chrome/Safari */
    background-clip: text;
    /* 讓文字本身變透明，才能透出背景的漸層色 */
    color: transparent;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    margin: 0;          /* 移除 p 標籤的預設邊距 */
}


.page03logo3 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 35.8%;                        /* 從頂部偏移 50% */
    left: 41%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: right; /* <-- 修改成 right */
    font-family: 'Belladonna Normal', serif; /* <-- 改成您自訂的字體 */
    width: 75%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

/* --- 數字輪盤動畫樣式 --- */

/* 1. 設定數字容器 */
.odometer-container {
    display: flex; /* 使用 Flexbox 來排列數字 */
    justify-content: flex-end; /* 讓整串數字靠右對齊 */

    /* 將原本 p 標籤的文字樣式移到這裡 */
    font-family: 'Belladonna Normal', serif;
    font-size: 7vw; /* 您可以繼續使用 vw 或固定的 px */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    
    /* 漸層效果也移到這裡 */
    background: linear-gradient(to bottom, #87a5b7, #2c6479, #ffffff, #799fb0, #34626c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 2. 設定每個數字/符號的「格子」(span) */
.odometer-container > span {
    display: inline-block;
    width: 0.57em;  /* 關鍵！給每個數字一個固定的寬度 (0.6倍字高) */
    text-align: center; /* 讓數字在自己的格子內置中 */
}

/* 3. 逗號的格子可以窄一點 */
.odometer-container > span.comma {
    width: 0.3em; 
}


.page03logo4 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 82%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 100%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page03logo4 img {
    width: 100%;
    height: auto;
}


/* --- page03logo4 圖片動畫：遮罩由下往上 > 變白 > 再向下移動 --- */

/* 1. 定義動畫的關鍵影格 (keyframes) */
@keyframes reveal-then-move {
  /* 動畫開始 (0%)：圖片完全被遮罩，顏色正常 */
  0% {
    clip-path: inset(100% 0 0 0);
    transform: translateY(0);
    filter: grayscale(0) brightness(1); /* 確保初始為原色 */
  }

  /* 動畫中點 (60%)：圖片完全顯示，顏色仍然正常 */
  60% {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    filter: grayscale(0) brightness(1); /* 移動前保持原色 */
  }

  100% {
    clip-path: inset(0 0 0 0);
    transform: translateY(var(--final-move-y, 170%)); /* <--- 修改這裡 */
    filter: grayscale(1) brightness(100);
  }
}

.page03logo4 img,
.S03logo4 img {
  /* 確保圖片在動畫開始前是隱藏的，且為原色 */
  clip-path: inset(0 0 100% 0);
  filter: grayscale(0) brightness(1);
}

/* 電腦版：觸發動畫，並設定最終 Y 軸移動距離為 170% */
.page03logo4 img.start-animation {
  --final-move-y: 170%; /* <--- 為電腦版設定變數值 */
  animation: reveal-then-move 4s ease-in-out 0.5s forwards;
}

/* 手機版：觸發動畫，並設定最終 Y 軸移動距離為 200% */
.S03logo4 img.start-animation {
  --final-move-y: 190%; /* <--- 為手機版設定新的變數值 */
  animation: reveal-then-move 4s ease-in-out 0.5s forwards;
}

.page04{
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/t4.jpg") center center no-repeat;
    background-size: contain;
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 2150;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 13;
}

.page04logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 63%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 37%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page04logo img {
    width: 100%;
    height: auto;
}

.page04logo2 {
    position: absolute;
    top: 87%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 10%;
    z-index: 1;
}

.page04logo2 a {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
}

.page04logo2 img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

/* 預設顯示正常圖 */
.page04logo2 .btn-img {
    z-index: 2;    /* 永遠在上層 */
    opacity: 1;
}

/* 預設隱藏 hover 圖 */
.page04logo2 .btn-img-hover {
    z-index: 1;    /* 放在底下 */
    opacity: 0;
}

/* 滑入時，hover 圖淡入 */
.page04logo2 a:hover .btn-img-hover {
    opacity: 1;
}

/* 滑入時，正常圖淡出 */
.page04logo2 a:hover .btn-img {
    opacity: 0;
}



.page05{
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/t5.jpg") center center no-repeat;
    background-size: contain;
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 1090;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 13;
}

.page05logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 50%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 37%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page05logo img {
    width: 100%;
    height: auto;
}


.page06 {
    margin: 0;
    position: relative;
    background: url("../img/BG00.jpg") center center no-repeat;
    background-size: cover; /* 或 contain，根據您的設計需求 */
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 1080; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 12; 
}

/* --- 請將這段 CSS 加到您的 main.css，修正縮圖樣式 --- */

/* 1. 移除縮圖輪播的背景、邊框和陰影 */
#carousel1.flexslider {
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none; /* 兼容舊版瀏覽器 */
    -moz-box-shadow: none;
}

/* 2. 將縮圖項目置中對齊 */
#carousel1 .flex-viewport {
    display: flex;
    justify-content: center;
}

/* --- 請將這段 CSS 加到 main.css，修正圓點與縮圖的置中 --- */

/* 1. 修正圓點的置中 */
/* 移除 flexslider.css 中不必要的 padding，讓置中語法生效 */
#slider1 .flex-control-nav {
    padding: 0;
    width: 100%; /* 確保容器是滿寬的 */
    text-align: center; /* 確保圓點本身在容器內也是居中的 */
}

/* 2. 修正縮圖的置中 */
/* 將縮圖容器的寬度縮小，讓它更貼合內容，這樣置中效果才會明顯 */
#carousel1 {
    width: 50%; /* 您可以試著調整這個百分比，例如 40% 或 60%，找到最適合的寬度 */
    max-width: 650px; /* 增加一個最大寬度，避免在大螢幕上過寬 */
}
/* --- 針對 width: 1000% 問題的最終修正 --- */

/* 1. 讓縮圖的容器 (.flex-viewport) 使用 flexbox 置中 */
#carousel1 .flex-viewport {
    display: flex;
    justify-content: center;
}

/* 2. 覆寫 JS 強加的寬度和位移，讓縮圖的寬度由內容決定 */
#carousel1 .slides {
    /* 使用 !important 來確保能覆寫 JS 加上的 width: 1000% */
    width: auto !important; 
    
    /* 同時也取消 JS 用於滑動的 transform 位移 */
    transform: none !important; 
}

.page07{
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/t7-1.jpg") center center no-repeat;
    background-size: contain;
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 1830;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 13;
}

.page07logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 11%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 58%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page07logo img {
    width: 100%;
    height: auto;
}

.page07logo2 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 80%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 37%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page07logo2 img {
    width: 100%;
    height: auto;
}


.page08{
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/t8-1.jpg") center center no-repeat;
    background-size: contain;
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 2476;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
}

.page08logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 41%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 33%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page08logo img {
    width: 100%;
    height: auto;
}

.page08logo2 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 73%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 43%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.page08logo2 img {
    width: 100%;
    height: auto;
}

/* --- 調整 page08 的汽車導航按鈕位置 --- */
.page08 .container-contact100-form-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 這兩行是為了讓按鈕保持水平置中 */

    bottom: 5%; /* <-- 您可以修改這個百分比，來控制按鈕的垂直位置 */
                 /* 數字越大，按鈕越往上；數字越小，按鈕越往下 */
    
    margin: 0; /* 移除原本的 margin-bottom */
}
/* --- 調整 page08 導航按鈕的滑入(hover)效果 --- */

/* 1. 移除連結預設的底線和顏色變化 */
.page08 .container-contact100-form-btn a {
    text-decoration: none; /* 移除底線 */
    color: inherit;        /* 讓文字顏色繼承按鈕原本的設定，不要變色 */
}

/* 2. 設定按鈕的預設狀態 (半透明) */
.page08 .container-contact100-form-btn {
    opacity: 0.6; /* 預設透明度，您可以調整 0.7 到 0.9 之間的值 */
    transition: opacity 0.5s ease; /* 讓透明度變化有 0.3 秒的漸變動畫，看起來更滑順 */
}

/* 3. 設定滑鼠滑入時的狀態 (完全不透明) */
.page08 .container-contact100-form-btn:hover {
    opacity: 1; /* 滑鼠移入時，透明度變為 1 (完全不透明) */
}



/* --- 讓 page14 的背景能與 page08 等比例縮放 --- */
.page14 {
    /* 移除負邊距，避免縮放時與上方區塊發生非預期的重疊 */
    margin: 0;
    
    /* --- 以下是關鍵的等比例縮放設定 --- */
    width: 100vw;
    height: auto;
    /* 重要：請將下面的 1920 / 1080 換成您背景圖 t9.jpg 的「實際寬度 / 實際高度」 */
    aspect-ratio: 1920 / 900;
    
    /* --- 以下是您原有的樣式 (大部分保持不變) --- */
    background: url("../img/t9.jpg") center center no-repeat;
    background-size: cover;
    z-index: 1;
    position: relative;
    border-top: none; /* 確保區塊間沒有多餘的邊線 */
}

.page14logo {
    text-align: center;
    display: block;
    margin: auto;
    width: 16%; /* <-- 現在調整這裡就會有作用了 */
}

.page14logo img {
    /* ↓↓↓ 請加上或修改成這兩行 ↓↓↓ */
    width: 100%;   /* 讓圖片寬度永遠等於父層 .page14logo 的寬度 */
    height: auto;  /* 根據寬度自動調整高度，保持圖片比例 */
    
    margin-top: 17%;
}


/* --- 修改 page14 回覆表單樣式 (修正版) --- */

/* 1. 統一設定所有輸入欄位 (input, select, textarea) 的基本樣式 */
.page14 .wrap-input100 .input100,
.page14 .wrap-input100 .input100-area { /* <-- 新增 .input100-area */
    background-color: transparent; /* 透明底 */
    border: 1px solid #ffffff;     /* 白色框 */
    color: #ffffff;                /* 白色字 */
    box-sizing: border-box;
    border-radius: 0;
}

/* 2. 統一設定一般欄位 (input, select) 的高度 */
.page14 .wrap-input100 .input100 {
    height: 55px;
    padding: 0 20px;
}

/* 3. 特別設定留言區 (textarea) 的樣式 */
.page14 .wrap-input100 .input100-area {
    min-height: 165px;
    padding: 20px;
    height: auto;
}

/* 4. 將 placeholder 文字 (提示文字) 改為白色 */
.page14 .input100::placeholder,
.page14 .input100-area::placeholder {
    color: #ffffff;
    opacity: 0.7;
}

/* --- 修正聯絡時間下拉選單的文字透明度 (最終版) --- */

/* 當選單處於預設狀態 (顯示"聯絡時間") 時，文字為半透明 */
.page14 select.input100:invalid {
  color: rgba(255, 255, 255, 0.7);
}

/* 當使用者選擇了有效選項後，文字變為不透明的純白色 */
.page14 select.input100:valid {
  color: #ffffff;
}

/* (這部分不變) 設定下拉選單中的「選項」文字顏色 */
.page14 select.input100 option {
    color: #000000;
}

/* --- 調整「聯絡時間」下拉選單的箭頭位置 --- */

.page14 select.input100 {
    /* 步驟 1: 隱藏瀏覽器預設的下拉箭頭 */
    -webkit-appearance: none; /* 適用於 Chrome, Safari, Edge */
    -moz-appearance: none;    /* 適用於 Firefox */
    appearance: none;         /* 標準寫法 */

    /* 步驟 2: 使用自訂的白色箭頭圖片作為背景 */
    /* 這是一段 SVG 程式碼，代表一個白色的向下箭頭，無需額外找圖片 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: .65em auto; /* 控制箭頭的顯示大小 */

    /* 步驟 3: 控制箭頭的位置 (核心) */
    background-position: right 25px top 50%; /* <-- 修改這裡的 25px 即可 */
}

/*------------------------------------------------------------------
[ Alert validate ]以下為手機版圖片*/


.S01 {
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/S/m1.jpg") center center no-repeat;
    background-size: contain;        /* 等比例顯示背景 */
    width: 100vw;                    /* 全寬 */
    height: auto;                    /* 高度根據內容調整 */
    aspect-ratio: 800 / 1356;          /* 根據圖片的實際比例 */
    position: relative;              /* 讓內部元素可以絕對定位 */
    display: flex;                   /* Flexbox 布局 */
    justify-content: center;         /* 水平居中 */
    align-items: center;             /* 垂直居中 */
}


.S01logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 70%;                        /* 從頂部偏移 50% */
    left: 20%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 200%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S01logo img {
    width: 100%;
    height: auto;
}

.S02 {
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/S/m2.jpg") center center no-repeat;
    background-size: contain;        /* 等比例顯示背景 */
    width: 100vw;                    /* 全寬 */
    height: auto;                    /* 高度根據內容調整 */
    aspect-ratio: 800 / 1100;          /* 根據圖片的實際比例 */
    position: relative;              /* 讓內部元素可以絕對定位 */
    display: flex;                   /* Flexbox 布局 */
    justify-content: center;         /* 水平居中 */
    align-items: center;             /* 垂直居中 */
}

.S02logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 40%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 75%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S02logo img {
    width: 100%;
    height: auto;
}

.S02logo2 {
    position: absolute;               /* 使用絕對定位 */
    top: 78%;                          /* 調整為 S01logo 的正下方 */
    left: 50%;                         /* 水平居中 */
    transform: translateX(-50%);      /* 保持 S01logo2 水平居中 */
    display: flex;                    /* 使用 flexbox 排列圖片 */
    justify-content: space-evenly;    /* 圖片之間的間距縮小 */
    width: 80%;                        /* 根據需要調整寬度 */
    z-index: 2;                       /* 確保 S01logo2 在 S01logo 上方 */
}

.S02logo2 img {
    width: 20%;                       /* 控制每張圖片的寬度，讓它們在同一行內排列 */
    height: auto;                     /* 保持圖片比例 */
}

.S03 {
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/S/m3.jpg") center center no-repeat;
    background-size: contain;        /* 等比例顯示背景 */
    width: 100vw;                    /* 全寬 */
    height: auto;                    /* 高度根據內容調整 */
    aspect-ratio: 800 / 1167;          /* 根據圖片的實際比例 */
    position: relative;              /* 讓內部元素可以絕對定位 */
    display: flex;                   /* Flexbox 布局 */
    justify-content: center;         /* 水平居中 */
    align-items: center;             /* 垂直居中 */
}

.S03logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 54%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 75%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S03logo img {
    width: 100%;
    height: auto;
}

.S03logo2 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 34%;                        /* 從頂部偏移 50% */
    left: 25%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    font-family: 'Belladonna Normal', serif; /* <-- 改成您自訂的字體 */
    width: 75%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

/* 設定文字本身的樣式 */
.S03logo2 p {
    font-size: 8vw;
    /* 關鍵：建立藍色金屬漸層效果 */
    background: linear-gradient(to bottom,#87a5b7, #2c6479, #ffffff, #799fb0, #34626c);
    
    /* 將背景漸層應用到文字上 */
    -webkit-background-clip: text;  /* 適用於 Chrome/Safari */
    background-clip: text;
    /* 讓文字本身變透明，才能透出背景的漸層色 */
    color: transparent;
    text-shadow: 1px 1px 1.5px rgba(0, 0, 0, 0.3);
    margin: 0;          /* 移除 p 標籤的預設邊距 */
}


.S03logo3 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 39.4%;                        /* 從頂部偏移 50% */
    left: 40%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: right; /* <-- 修改成 right */
    font-family: 'Belladonna Normal', serif; /* <-- 改成您自訂的字體 */
    width: 75%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

/* --- 數字輪盤動畫樣式 --- */

/* 1. 設定數字容器 */
.odometer-container2 {
    display: flex; /* 使用 Flexbox 來排列數字 */
    justify-content: flex-end; /* 讓整串數字靠右對齊 */

    /* 將原本 p 標籤的文字樣式移到這裡 */
    font-family: 'Belladonna Normal', serif;
    font-size: 7vw; /* 您可以繼續使用 vw 或固定的 px */
    text-shadow: 1px 1px 1.5px rgba(0, 0, 0, 0.3);
    
    /* 漸層效果也移到這裡 */
    background: linear-gradient(to bottom, #87a5b7, #2c6479, #ffffff, #799fb0, #34626c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 2. 設定每個數字/符號的「格子」(span) */
.odometer-container2 > span {
    display: inline-block;
    width: 0.57em;  /* 關鍵！給每個數字一個固定的寬度 (0.6倍字高) */
    text-align: center; /* 讓數字在自己的格子內置中 */
}

/* 3. 逗號的格子可以窄一點 */
.odometer-container2 > span.comma {
    width: 0.3em; 
}


.S03logo4 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 82%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 100%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S03logo4 img {
    width: 100%;
    height: auto;
}




.S04 {
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/S/m4.jpg") center center no-repeat;
    background-size: contain;        /* 等比例顯示背景 */
    width: 100vw;                    /* 全寬 */
    height: auto;                    /* 高度根據內容調整 */
    aspect-ratio: 800 / 1356;          /* 根據圖片的實際比例 */
    position: relative;              /* 讓內部元素可以絕對定位 */
    display: flex;                   /* Flexbox 布局 */
    justify-content: center;         /* 水平居中 */
    align-items: center;             /* 垂直居中 */
}

.S04logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 58%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 75%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S04logo img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {

  /* 選取到與桌機版相同的元素 */
  .page04logo2  {
    /* 在這裡寫下您想在手機上套用的新樣式 */
    width: 20%; 
    top:88%;
  }
}


.S05 {
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/S/m5.jpg") center center no-repeat;
    background-size: contain;        /* 等比例顯示背景 */
    width: 100vw;                    /* 全寬 */
    height: auto;                    /* 高度根據內容調整 */
    aspect-ratio: 800 / 900;          /* 根據圖片的實際比例 */
    position: relative;              /* 讓內部元素可以絕對定位 */
    display: flex;                   /* Flexbox 布局 */
    justify-content: center;         /* 水平居中 */
    align-items: center;             /* 垂直居中 */
}

.S05logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 49%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 74%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S05logo img {
    width: 100%;
    height: auto;
}

.S06 {
    margin: 0;
    position: relative;
    background: url("../img/BG00.jpg") center center no-repeat;
    background-size: cover; /* 或 contain，根據您的設計需求 */
    width: 100vw;
    height: auto;
    aspect-ratio: 800 / 800; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 12; 
}


.S07 {
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/S/m7.jpg") center center no-repeat;
    background-size: contain;        /* 等比例顯示背景 */
    width: 100vw;                    /* 全寬 */
    height: auto;                    /* 高度根據內容調整 */
    aspect-ratio: 800 / 1050;          /* 根據圖片的實際比例 */
    position: relative;              /* 讓內部元素可以絕對定位 */
    display: flex;                   /* Flexbox 布局 */
    justify-content: center;         /* 水平居中 */
    align-items: center;             /* 垂直居中 */
    z-index: 13; 
}

.S07logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 8%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 70%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S07logo img {
    width: 100%;
    height: auto;
}

.S07logo2 {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 75%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 70%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S07logo2 img {
    width: 100%;
    height: auto;
}



.S08{
    margin: 0;
    border-style: dashed;
    border-top: none;
    background: url("../img/S/m8.jpg") center center no-repeat;
    background-size: contain;
    width: 100vw;
    height: auto;
    aspect-ratio: 800 / 1589;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 14;
}

.S08logo {
    position: absolute;              /* 絕對定位，控制居中 */
    top: 56%;                        /* 從頂部偏移 50% */
    left: 50%;                       /* 從左側偏移 50% */
    transform: translate(-50%, -50%);/* 移動到中心點 */
    text-align: center;
    width: 74%;                       /* 調整寬度，增大整個容器 */
    z-index: 1;                      /* 確保 S01logo 在最上層 */
}

.S08logo img {
    width: 100%;
    height: auto;
}


/* --- 調整 page08 的汽車導航按鈕位置 --- */
.S08 .container-contact100-form-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 這兩行是為了讓按鈕保持水平置中 */

    bottom: 5%; /* <-- 您可以修改這個百分比，來控制按鈕的垂直位置 */
                 /* 數字越大，按鈕越往上；數字越小，按鈕越往下 */
    
    margin: 0; /* 移除原本的 margin-bottom */
}
/* --- 調整 page08 導航按鈕的滑入(hover)效果 --- */

/* 1. 移除連結預設的底線和顏色變化 */
.S08 .container-contact100-form-btn a {
    text-decoration: none; /* 移除底線 */
    color: inherit;        /* 讓文字顏色繼承按鈕原本的設定，不要變色 */
}

/* 2. 設定按鈕的預設狀態 (半透明) */
.S08 .container-contact100-form-btn {
    opacity: 0.6; /* 預設透明度，您可以調整 0.7 到 0.9 之間的值 */
    transition: opacity 0.5s ease; /* 讓透明度變化有 0.3 秒的漸變動畫，看起來更滑順 */
}

/* 3. 設定滑鼠滑入時的狀態 (完全不透明) */
.S08 .container-contact100-form-btn:hover {
    opacity: 1; /* 滑鼠移入時，透明度變為 1 (完全不透明) */
}


@media screen and (max-width: 768px) {
.page14logo {
    width: 70%; /* <-- 現在調整這裡就會有作用了 */
    }
}

/* --- 請將這段 CSS 加到您的 main.css，修正縮圖樣式 --- */

/* 1. 移除縮圖輪播的背景、邊框和陰影 */
#carousel1-s.flexslider {
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none; /* 兼容舊版瀏覽器 */
    -moz-box-shadow: none;
}

/* 2. 將縮圖項目置中對齊 */
#carousel1-s .flex-viewport {
    display: flex;
    justify-content: center;
}

/* --- 請將這段 CSS 加到 main.css，修正圓點與縮圖的置中 --- */

/* 1. 修正圓點的置中 */
/* 移除 flexslider.css 中不必要的 padding，讓置中語法生效 */
#slider1-s .flex-control-nav {
    bottom: 12%;
    padding: 0;
    width: 100%; /* 確保容器是滿寬的 */
    text-align: center; /* 確保圓點本身在容器內也是居中的 */
}

/* 2. 修正縮圖的置中 */
/* 將縮圖容器的寬度縮小，讓它更貼合內容，這樣置中效果才會明顯 */
#carousel1-s {
    width: 50%; /* 您可以試著調整這個百分比，例如 40% 或 60%，找到最適合的寬度 */
    max-width: 650px; /* 增加一個最大寬度，避免在大螢幕上過寬 */
}
/* --- 針對 width: 1000% 問題的最終修正 --- */

/* 1. 讓縮圖的容器 (.flex-viewport) 使用 flexbox 置中 */
#carousel1-s .flex-viewport {
    display: flex;
    justify-content: center;
}

/* 2. 覆寫 JS 強加的寬度和位移，讓縮圖的寬度由內容決定 */
#carousel1-s .slides {
    /* 使用 !important 來確保能覆寫 JS 加上的 width: 1000% */
    width: auto !important; 
    
    /* 同時也取消 JS 用於滑動的 transform 位移 */
    transform: none !important; 
}





/*------------------------------------------------------------------
[ Alert validate ]*/



/*-----------------------------------------------------------------*/

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  z-index: 1000;
  max-width: 100%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 14px;
  padding: 4px 25px 4px 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  pointer-events: none;

  font-family: 'Noto Sans TC';
  color: #c80000;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;

/*  visibility: hidden;
  opacity: 0;*/

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f06a";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  z-index: 1100;
  color: #c80000;
  font-size: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 16px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 990px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
  .wrap-contact100{
    width: 45%;
  }
  input.input100{
    height: 40px;
  }
  .input100{
    font-size: 16px;
  }
  .contact100-form-btn,.contact100-form-btn2{
    font-size: 17px;
  }
  .map{
  	padding: 0px 20px 20px 20px;
  }
}

@media (max-width: 550px) {
  .wrap-contact100{
    width: 90%;
  }
  input.input100{
    height: 40px;
  }
  .input100{
    font-size: 16px;
  }
  .contact100-form-btn,.contact100-form-btn2{
    font-size: 16px;
  }
}

input[type="radio"] {
   accent-color: #000;
  }

input[type="checkbox"] {
   accent-color: #000;
  }


/* --- 修正瀏覽器「自動填入」造成的白底黑字問題 --- */

.page14 .input100:-webkit-autofill,
.page14 .input100:-webkit-autofill:hover,
.page14 .input100:-webkit-autofill:focus,
.page14 .input100:-webkit-autofill:active {
    /* 技巧1: 使用超長的 transition 延遲來取消背景色的變化 */
    transition: background-color 5000s ease-in-out 0s;

    /* 技巧2: 強制設定文字顏色為白色 */
    -webkit-text-fill-color: #ffffff !important;
}

/* 針對 Firefox 瀏覽器的修正 */
.page14 .input100:-moz-autofill {
    /* 技巧3: 用 box-shadow 蓋掉背景色 */
    box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset;
    -moz-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset;
}

/* --- 調整 page14「送出預約資訊」按鈕的滑入(hover)效果 --- */

/* 1. 設定按鈕的預設狀態 (半透明) */
.page14 .container-contact100-form-btn {
    opacity: 0.8; /* 預設透明度，您可以調整 0.7 到 0.9 之間的值 */
    transition: opacity 0.3s ease; /* 讓透明度變化有 0.3 秒的漸變動畫 */
}

/* 2. 設定滑鼠滑入時的狀態 (完全不透明) */
.page14 .container-contact100-form-btn:hover {
    opacity: 1; /* 滑鼠移入時，透明度變為 1 (完全不透明) */
}


/*-----------------------------------------------------------*/
/* 基本樣式 */


/* 1440px 以下，頁面縮放至 75% */
@media (max-width: 1440px) {

}

/* 1024px 以下，頁面縮放至 53.33% */
@media (max-width: 1024px) {

}

/* 1024px 以下，頁面縮放至 53.33% */
@media (max-width: 768px) {

.contact100-form{
  width: 100%;
  display:grid;
  place-content: center;
}

  .page14{
    margin:-3% 0 0 0;
    width: 100%;
    height: 850px;
}

  .page14logo img{
    margin-top:20%;
    width: 60%;
}

}

/* --- 將禁止水平滑動的樣式改為套用在此 --- */
#page-wrapper {
    width: 100%;
    overflow-x: hidden;
}

/*------------------------------------------------------------