/* 通用樣式 */
html {
/* 這裡移除了 scroll-behavior: smooth; 因為現在由 Lenis 處理滾動效果 */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 確保所有元素在 RWD 變化時有平滑過渡 */
transition: all 0.4s ease;
}
body {
font-family: 'Microsoft JhengHei', Arial, sans-serif; /* 微軟正黑體 */
overflow-x: hidden; /* 確保沒有水平捲軸 */
-webkit-overflow-scrolling: touch;
line-height: 1.6;
color: #333;
background-color: #000;
}
/* 確保長單詞和數字在需要時自動斷行，不溢出容器 */
div, p, h1, h2, h3, h4, span, a, li {
word-break: break-word;
overflow-wrap: break-word;
}
/* 導航列樣式 - PC 版置底 */
.navbar {
position: fixed;
bottom: 0; /* PC 版靠下置底 */
width: 100%;
background-color: #ff0000; /* PC 版 navbar 背景色更改為紅色 #ff0000 */
/* padding: 15px 0; <--- 已移除此行 */
z-index: 500; /* PC 版 navbar 的 Z-index */
text-align: center;
display: flex; /* 使用 flexbox 佈局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
transition: all 0.4s ease; /* 為位置和佈局變化添加過渡 */
flex-wrap: wrap; /* 允許內容換行，以防萬一 */
background-image: url('../images/bg-menu.png') !important; /* 使用 !important 強制覆蓋 */
background-size: auto 100% !important; /* 寬度100%貼合畫面，高度自動調整 */
background-position: center top !important; /* 圖片中心對齊元素頂部 */
background-repeat: no-repeat !important; /* 不重複背景圖片 */
background-color: #000 !important; /* 設定手機版背景顏色為黑色 */
}
/* PC 版導航連結容器 */
.nav-links {
list-style: none;
display: flex; /* PC 版顯示為橫向排列 */
justify-content: center;
padding: 0;
margin: 0;
/* PC 版不再使用 fixed 定位，讓它作為 navbar 的子元素自動流動 */
position: static; /* 確保不是 fixed 或 absolute */
width: auto; /* 寬度自動適應內容 */
z-index: auto; /* Z-index 也自動 */
transform: translateY(0); /* PC 版確保可見 */
visibility: visible; /* PC 版確保可見 */
background-color: transparent; /* PC 版不需要黑色背景 */
height: auto; /* PC 版高度自動 */
top: auto; /* PC 版不從 top: 60px 開始 */
}
.nav-links ul {
list-style: none;
display: flex; /* PC 版顯示為橫向排列 */
justify-content: center;
padding: 0;
margin: 0;
}
.nav-links ul li {
margin: 0 5px; /* 調整按鈕間距，可根據圖片寬度調整 */
}
/* PC 版隱藏 Home 按鈕 */
.nav-links ul li.home-nav-item {
display: none;
}
.nav-links ul li a {
text-decoration: none;
padding: 0; /* 圖片按鈕不需要額外 padding */
transition: transform 0.3s ease; /* 為 hover 效果添加平滑過渡 */
display: flex; /* 使用 flexbox 讓圖片在連結內水平置中 */
justify-content: center; /* 水平置中 */
align-items: center; /* 垂直置中 (如果連結有高度的話) */
color: transparent; /* PC 版文字隱藏 */
}
.nav-links ul li a img {
display: block; /* 確保圖片是區塊元素 */
width: auto; /* 寬度自動，保持比例 */
max-height: 95px; /* 設定圖片按鈕的最大高度為 95px (PC 版) */
max-width: 100%; /* 防止圖片溢出其父元素 */
vertical-align: middle; /* 消除圖片底部空隙 */
}
/* PC 版文字隱藏 */
.nav-links ul li a .nav-text {
display: none;
}
.nav-links ul li a:hover {
transform: scale(1.05); /* 鼠標懸停時輕微放大 */
background-color: transparent; /* 保持透明背景 */
}
/* 手機版 LOGO 圖片容器 (PC 版隱藏) */
.mobile-logo {
display: none; /* PC 版預設隱藏 */
}
/* 漢堡菜單圖標容器 (PC 版隱藏) */
.hamburger-container {
display: none; /* PC 版隱藏 */
position: absolute; /* 相對於 navbar 定位 */
top: 0px; /* 貼齊 navbar 頂部 */
right: 0px; /* 貼齊 navbar 右側 */
width: 65px; /* 白色方形寬度 (放大) */
height: 65px; /* 白色方形高度 (放大) */
background-color: #fff;
border-radius: 0;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.4s ease;
z-index: 600; /* 漢堡容器的 Z-index */
/* 上寬下窄的傾斜 (左邊) */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%); /* 恢復傾斜效果 */
top: 0px;
}
.hamburger-menu {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 22px;
padding-left: 15px;
padding-right: 5px;
box-sizing: content-box;
}
.hamburger-menu .bar {
width: 100%;
height: 4px;
background-color: #ff0000;
border-radius: 2px;
transition: all 0.3s ease-in-out;
}
/* 漢堡菜單打開時的動畫 (JS 會添加 .open 類別到 .hamburger-container) */
.hamburger-container.open .hamburger-menu .bar:nth-child(1) {
transform-origin: center center; /* 確保旋轉中心在條的中央 */
transform: translateY(5px) rotate(45deg); /* 維持您肉眼判斷為正的 translateY */
}
.hamburger-container.open .hamburger-menu .bar:nth-child(2) {
opacity: 0;
}
.hamburger-container.open .hamburger-menu .bar:nth-child(3) {
transform-origin: center center; /* 確保旋轉中心在條的中央 */
transform: translateY(-9px) rotate(-45deg); /* 維持您肉眼判斷為正的 translateY */
}
/* 滿版區塊樣式 */
.full-screen-section {
display: flex;
justify-content: center; /* 水平置中 */
width: 100%;
min-height: 100vh; /* 新增：確保全螢幕區塊至少佔據一個視窗的高度 */
text-align: center;
background-size: cover;
background-position: center;
color: #fff;
position: relative;
}
/* 每個區塊的內容容器 */
.full-screen-section .content {
z-index:100;
max-width: 800px;
padding: 20px;
border-radius: 10px;
}
.full-screen-section h1,
.full-screen-section h2 {
font-size: 3em;
margin-bottom: 20px;
}
.full-screen-section p {
font-size: 1.2em;
margin-bottom: 20px;
}
/* ================================================================= */
/* 主視覺容器樣式 (PC 版) */
.main-visual-container-pc {
top: 45%;
left: 75%;
right: 10%;
bottom: 10%;
position: absolute;
transform: translate(-50%, -50%);
z-index: 50; /* 確保 z-index 為 50，比其他元件低 */
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.main-visual-container-pc img {
display: block;
height: auto; /* 高度自動，保持比例 */
object-fit: cover; /* 讓圖片覆蓋整個容器，多餘部分裁切，同時保持比例 */
object-position: center center; /* 確保圖片中心點對齊容器中心點 */
}
@media (min-width: 1901px) {
.main-visual-container-pc img {
margin-top: 10%;
max-width: 90%;
min-width: 70vw;
min-height: 100vh;
}
}
@media (max-width: 1900px) and (min-width: 1501px) {
.main-visual-container-pc img {
margin-top: 10%;
max-width: 95%;
min-width: 85vw;
min-height: 100vh;
}
}
@media (max-width: 1520px) and (min-width: 1201px) {
.main-visual-container-pc img {
margin-right: -10%;
margin-top: 10%;
max-width: 95%;
min-width: 110vw;
min-height: 100vh;
}
.home-top-left-carousel-container{left: 2%!important;}
}
@media (max-width: 1200px) and (min-width: 1001px) {
.home-top-left-carousel-container{left: 2%!important;}
.main-visual-container-pc img {
margin-right: -15%;
margin-top: 10%;
max-width: 100%;
min-width: 135vw;
min-height: 100vh;
}
}
@media (max-width: 1000px) and (min-width: 769px) {
.home-top-left-carousel-container{left: 2%!important;}
.main-visual-container-pc img {
margin-right: -20%;
margin-top: 10%;
max-width: 100%;
min-width: 155vw;
min-height: 100vh;
}
}
/* 主視覺容器樣式 (手機版) */
.main-visual-container-mobile {
display: none; /* 預設隱藏，只在手機版顯示 */
/* 移除 PC 版的絕對定位相關樣式，這些會在 media query 中恢復 */
position: static;
top: auto;
left: auto;
transform: none;
z-index: 50; /* 保持與 PC 版相同的 z-index */
width: 100%;
height: auto; /* 讓容器高度由內容撐開 */
/* 啟用 Flexbox 垂直排列，以便放置 logo 和 img-1-m.png */
flex-direction: column; /* 垂直堆疊 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
overflow: hidden; /* 確保圖片縮放時不會超出容器 */
padding: 0; /* 確保容器本身沒有額外 padding */
}
.main-visual-container-mobile .mobile-main-logo {
display: block; /* 確保顯示 */
width: 100%; /* 寬度 100% */
max-width: 768px; /* 為了保持一致性，也給個最大寬度 */
height: auto; /* 高度自動 */
object-fit: contain;
z-index: 51; /* 確保在背景圖片上方，但比主要內容低 */
margin-top: 20px; /* 增加與上方的間距，避免太靠近 navbar */
}
/* 針對 img-1-m.png (第二個圖片) */
.main-visual-container-mobile img:not(.mobile-main-logo) { /* 針對 img-1-m.png */
margin-top: -5%;
display: none; /* PC 版預設隱藏 */
width: 100%; /* 圖片寬度為容器的 100% */
max-width: 768px; /* 手機版圖片最大寬度 768px */
height: auto; /* 高度自動，保持比例 */
object-fit: contain; /* 確保圖片完整顯示，保持比例，不裁切 */
object-position: center center; /* 圖片居中 */
}
/* ================================================================= */
.no-img-pc img {width:100%}
.no-img-m img {width:100%;}
.no-img-pc{display:block;;max-width:1600px;}
.no-img-m{display:none;}
@media (max-width: 768px) {
.no-img-pc{display:none;}
.no-img-m{display:block;max-width:800px;}
}
/* PC 版的 Logo 容器樣式 */
.logo-container {
position: absolute; /* 相對於 .home 定位 */
top: 67%;
bottom: 0%;
left: 25%;
right: 0%;
transform: translate(-50%, -50%); /* 精確居中 */
width: 100%; /* 寬度 100% */
max-width: 938px; /* 最大寬度 938px */
z-index: 60; /* 比 main-visual-container (50) 更高 */
display: flex; /* 使用 flexbox 讓圖片居中 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
pointer-events: none; /* 讓下面的元素可以被點擊 */
}
.logo-container img {
display: block;
width: 100%; /* 圖片填滿容器寬度 */
height: auto; /* 高度自動 */
max-width: 100%; /* 確保圖片不會溢出容器 */
object-fit: contain; /* 確保圖片完整顯示，不裁切 */
}
@media (max-width: 1920px) {
.logo-container img{
width: 100%;
max-width: 100%;
min-width: 50vw;
min-height: 100vh;
margin-left: 5%;
}
}
@media (max-width: 1919px) and (min-width: 1501px) {
.logo-container img{
margin-top: 10%;
width: 90%;
max-width: 100%;
min-width: 50vw;
min-height: 100vh;
margin-left: 5%;
}
}
@media (max-width: 1520px) and (min-width: 1201px) {
.logo-container img{
margin-top: 10%;
width: 70%;
max-width: 100%;
min-width: 50vw;
min-height: 100vh;
margin-left: 10%;
}
}
@media (max-width: 1200px) and (min-width: 1001px) {
.logo-container img{
margin-top: 5%;
width: 75%;
max-width: 100%;
min-width: 50vw;
min-height: 100vh;
margin-left: 20%;
}
}
@media (max-width: 1000px) and (min-width: 769px) {
.logo-container img{
width: 70%;
max-width: 100%;
min-width: 50vw;
min-height: 100vh;
margin-left: 20%;
}
}
/* images-overlay-container 通用樣式 */
.images-overlay-container {
display: flex;
flex-direction: column; /* 垂直堆疊 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
width: 100%; /* 容器寬度100% */
}
/* PC 版的 images-overlay-container */
.images-overlay-container.pc-version {
position: absolute; /* 絕對定位 */
top: 25%;
bottom: 0%;
left: 25%;
right: 0%;
transform: translate(-50%, -50%); /* 精確居中 */
z-index: 70; /* 比 logo-container (60) 更高 */
}
/* 手機版的 images-overlay-container */
.images-overlay-container.mobile-version {
position: static; /* 正常流動 */
margin-top: 0; /* 重置可能存在的 margin */
margin-bottom: 0; /* 重置可能存在的 margin */
z-index: auto; /* 恢復自動 z-index */
}
/* 針對 picture 元素內的圖片進行樣式設定 (預設/PC 版) */
.images-overlay-container .other-image-1-picture .other-image-1-img {
display: block;
width: 100%; /* 圖片寬度為容器的 100% */
height: auto; /* 高度自動，保持比例 */
vertical-align: middle; /* 移除圖片底部間隙 */
object-fit: contain; /* 確保圖片完整顯示，保持比例 */
}
/* 結束 other-1.png 的 CSS 修改部分 */
@media (max-width: 1920px) {
.images-overlay-container .other-image-1-picture .other-image-1-img {
max-width: 852px; /* PC 版最大寬度 852px */
}
}
@media (max-width: 1919px) and (min-width: 1501px) {
.images-overlay-container .other-image-1-picture .other-image-1-img {
max-width: 852px; /* PC 版最大寬度 852px */
}
}
@media (max-width: 1520px) and (min-width: 1201px) {
.images-overlay-container .other-image-1-picture .other-image-1-img {
max-width: 750px;
}
}
@media (max-width: 1200px) and (min-width: 1001px) {
.images-overlay-container .other-image-1-picture .other-image-1-img {
max-width: 700px;
}
}
@media (max-width: 1235px) and (min-width: 1143px) {
.images-overlay-container .other-image-1-picture .other-image-1-img {
margin-left: 5%;
}
}
@media (max-width: 1142px) and (min-width: 1001px) {
.images-overlay-container .other-image-1-picture .other-image-1-img {
margin-left: 7%;
}
}
@media (max-width: 930px) and (min-width: 769px) {
.images-overlay-container .other-image-1-picture .other-image-1-img {
margin-left: 10%;
}
}
@media (max-width: 1000px) and (min-width: 769px) {
.images-overlay-container .other-image-1-picture .other-image-1-img {
max-width: 650px;
}
.images-overlay-container.pc-version {
left: 30%;
}
.images-overlay-container .join-button {
max-width: 400px!important;
}
}
/* 從這裡開始修改 other-1.png 的 CSS 部分 */
/* 新增：other-image-1-picture 容器樣式 */
.images-overlay-container .other-image-1-picture {
display: flex; /* 確保圖片能正確置中 */
justify-content: center; /* 水平置中 */
align-items: center; /* 垂直置中 */
width: 100%; /* 確保容器寬度為 100% */
pointer-events: none; /* 繼續不接收點擊事件 */
}
/* 將原本 .join-image 的樣式應用到 .join-button */
.images-overlay-container .join-button {
display: block;
width: 100%; /* 寬度 100% */
max-width: 516px; /* 最大寬度 516px */
/* 高度現在將由 min-height: 222px 控制 */
min-height: 222px; /* 根據用戶需求設定為 222px */
/* 已移除 padding-bottom: 29.06%; */
margin-top: -30px; /* 向上移動以減少與上方圖片的間距 */
background-image: url('../images/join.png'); /* 設定初始背景圖片 */
background-repeat: no-repeat;
background-position: center;
background-size: contain; /* 確保圖片完整顯示在其容器內，保持比例 */
cursor: pointer; /* 添加滑鼠指標，表示可點擊 */
transition: background-image 0.3s ease-in-out; /* 添加過渡效果，使圖片漸變 */
}
.images-overlay-container .join-button:hover {
background-image: url('../images/join-hover.png'); /* Hover 時更換背景圖片 */
}
@media (max-width: 768px) {
.images-overlay-container .join-button {
display: block;
width: 100%; /* 寬度 100% */
max-width: 516px; /* 最大寬度 516px */
min-height: 0px;
margin-top: 0px;
background-image: url('../images/join-x.png'); /* 設定初始背景圖片 */
background-repeat: no-repeat;
background-position: center;
background-size: contain; /* 確保圖片完整顯示在其容器內，保持比例 */
cursor: pointer; /* 添加滑鼠指標，表示可點擊 */
transition: background-image 0.3s ease-in-out; /* 添加過渡效果，使圖片漸變 */
}
.images-overlay-container .join-button:hover {
background-image: url('../images/join-hover-x.png'); /* Hover 時更換背景圖片 */
}
.images-overlay-container.mobile-version .join-button {
/* 您可以設定按鈕容器的寬度 */
width: 100%;
max-width: 516px; /* 如果您希望按鈕寬度不超過原始圖片寬度 */
margin-left: auto;
margin-right: auto;
}
.images-overlay-container.mobile-version .join-button a {
display: block; /* 讓 標籤是塊級元素 */
}
.images-overlay-container.mobile-version .join-button .join-button-img {
width: 100%; /* 讓圖片寬度適應父容器 */
height: auto; /* 高度自動調整，保持圖片比例 */
display: block; /* 移除圖片底部多餘空間 */
}
/* 確保圖片容器和圖片本身具有響應式 /
.images-overlay-container.mobile-version .join-button a {
display: block;
width: 100%; / 確保填滿父容器 /
max-width: 516px; / 原始圖片寬度 /
margin: 0 auto; / 水平居中 */
.images-overlay-container.mobile-version .join-button .join-button-img {
display: block;
width: 100%;
height: auto;
transition: opacity 0.2s ease-in-out; /* 可選：增加淡入淡出效果 */
}
.images-overlay-container.mobile-version .join-button a:hover .join-button-img {
content: url('../images/join-hover.png'); /* 注意：<img> 不直接支援 content，此行無效 */
opacity: 1; /* 可選：懸停時稍微降低透明度 */
}
}
/* 移除舊的 home 內部圖片相關樣式 */
.home-other-img-container,
.home-other-img,
.home-other-button,
.home-img-t01,
.home-img,
.home-img-1-1 {
display: none; /* 隱藏這些元素 */
}
/* 首頁向下捲動按鈕 */
.scroll-down-btn {
display: inline-block;
margin-top: 30px;
padding: 10px 20px;
background-color: #f39c12;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-size: 1.1em;
transition: background-color 0.3s ease;
}
.scroll-down-btn:hover {
background-color: #e67e22;
}
/* 服務項目網格佈局 */
.services-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.service-item {
background-color: rgba(255, 255, 255, 0.1);
padding: 25px;
border-radius: 8px;
flex: 1;
min-width: 280px;
max-width: 350px;
text-align: left;
transition: transform 0.3s ease;
}
.service-item:hover {
transform: translateY(-5px);
}
.service-item h3 {
font-size: 1.5em;
margin-bottom: 15px;
color: #ffd700;
}
.service-item p {
font-size: 1em;
margin-bottom: 0;
}
/* 回到 Home 的浮動按鈕樣式 */
.back-to-top-btn {
position: fixed;
right: 20px; /* 距離右側 20px */
bottom: -150px; /* 預設將按鈕完全藏在視窗底部下方 (可根據圖片高度調整，通常設定為負的圖片高度 + 一些餘裕) */
top: auto; /* 確保不與 top 屬性衝突 */
z-index: 400; /* Z-index 設定在 navbar 之下，但在頁面內容之上 */
opacity: 0; /* 預設完全透明 */
visibility: hidden; /* 預設隱藏 */
/* 調整過渡效果，讓 bottom 和 transform 都有平滑動畫 */
transition: opacity 0.4s ease-out, transform 0.4s ease-out, bottom 0.4s ease-out;
transform: translateY(0); /* 初始不作額外位移，主要由 bottom 控制 */
}
.back-to-top-btn.show {
opacity: 1; /* 顯示 */
visibility: visible;
bottom: 50%; /* 向上移動到垂直置中 */
/* 計算新的 translateY 讓它在置中後再往下偏移 50px */
/* 95px 是圖片的 max-height */
/* 原本是向上移動自身高度的一半 (50%)，現在額外再向下移動 50px */
transform: translateY(calc(50% + 50px)); /* 將負號改為正號，並調整偏移量 */
}
.back-to-top-btn img {
display: block;
width: auto;
max-height: 95px; /* 設定圖片最大高度為 95px */
cursor: pointer;
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.4)); /* 添加陰影增加立體感 */
}
.back-to-top-btn:hover {
/* 懸停時的 transform 也需調整，讓它在新的基礎位置上輕微向上 */
transform: translateY(calc(50% + 45px)) scale(1.05); /* 輕微向上移動 5px */
}
/* 響應式設計 */
@media (max-width: 768px) {
/* PC 版的 images-overlay-container 在手機版隱藏 */
.images-overlay-container.pc-version {
display: none;
}
/* 手機版的 images-overlay-container 顯示 */
.images-overlay-container.mobile-version {
display: flex; /* 在手機版顯示 */
margin-top: -45%; /* 新增 */
z-index:10;
}
/* ================================================================= */
/* 手機版隱藏 PC 版的 Logo 容器 */
.logo-container {
display: none;
}
/* ================================================================= */
/* 手機版讓 home 容器高度由內容撐開 */
.home {
min-height: auto; /* 移除最小高度限制 */
height: auto; /* 高度自動 */
align-items: center; /* 讓內容物在垂直方向上居中 */
padding-top: 60px; /* 為 Navbar 預留空間 */
/* 移除 padding-bottom: 20px; */
}
/* 調整 mobile-main-logo 的樣式 */
.main-visual-container-mobile .mobile-main-logo {
margin-bottom: 0; /* 移除負邊距 */
margin-top: 20%; /* 增加與上方的間距，避免太靠近 navbar */
padding-left: 5%; /* 新增 */
padding-right: 5%; /* 新增 */
}
/* ================================================================= */
/* 手機版隱藏 PC 版主視覺，顯示手機版主視覺 */
.main-visual-container-pc {
display: none; /* 在手機版隱藏 PC 版主視覺 */
}
.main-visual-container-mobile {
display: flex; /* 在手機版顯示手機版主視覺 */
position: static; /* 讓它參與正常的文檔流，不再絕對定位 */
top: auto;
left: auto;
transform: none; /* 移除 transform */
height: auto; /* 讓其高度自動由內容撐開 */
padding: 0; /* 移除 padding */
}
/* 確保 img-1-m.png 在手機版顯示 */
.main-visual-container-mobile img:not(.mobile-main-logo) {
display: block; /* 在手機版顯示 */
}
/* ================================================================= */
/* 導航列樣式 - 手機版置上 */
.navbar {
top: 0;
bottom: auto;
padding: 0;
height: 60px;
display: flex;
justify-content: space-between; /* 讓內容兩端對齊 */
align-items: center; /* 垂直置中內容 */
position: fixed;
width: 100%; /* 確保佔滿寬度 */
z-index: 500; /* navbar 的 Z-index */
flex-wrap: nowrap; /* 手機版不允許換行 */
}
/* 手機版導航連結容器 (此處維持 fixed 定位，因為是滑出選單) */
.nav-links {
border-bottom: 3px solid #ff0000;
position: fixed; /* 手機版需要 fixed 定位 */
top: 60px; /* 從 navbar 下方開始 */
right: 0; /* 從右側定位 */
width: 100%;
height: auto; /* 讓高度根據內容自動調整 */
max-height: calc(100vh - 60px); /* 最大高度為視窗高度減去 navbar 高度 */
background-color: rgba(0, 0, 0, 0.95);
overflow-y: auto; /* 如果內容超過 max-height，則啟用垂直捲軸 */
padding: 15px 0; /* 選單內部 padding 縮短 */
z-index: 50; /* 您備份中的 Z-index */
transform: translateX(100%); /* 初始時向右平移 100% 自己的寬度，藏起來 */
transition: transform 0.5s ease-in-out, visibility 0.5s ease-in-out; /* 過渡 transform 和 visibility */
visibility: hidden; /* 預設完全隱藏，不佔空間，也不可點擊 */
}
.nav-links.open {
transform: translateX(0); /* 滑入到原始位置 */
visibility: visible; /* 變成可見 */
z-index:10!important;
}
.nav-links ul {
flex-direction: column; /* 垂直排列 */
align-items: center; /* 水平置中 */
width: 100%;
padding: 0; /* 確保 ul 沒有多餘 padding */
margin: 0; /* 確保 ul 沒有多餘 margin */
}
.nav-links ul li {
width: 80%; /* 每個按鈕佔 80% 寬度 */
margin: 3px 0; /* 上下間距減小 */
text-align: center; /* 文字置中 */
list-style: none; /* 移除點點 */
}
/* 手機版 Home 按鈕顯示 */
.nav-links ul li.home-nav-item {
display: block; /* 手機版顯示 */
}
.nav-links ul li a {
/* 手機版連結的樣式，用於顯示文字 */
color: #fff; /* 文字顏色 */
text-decoration: none;
font-size: 1.2em; /* 文字大小 */
padding: 1.8% 0; /* 內部 padding */
display: block; /* 讓整個區域可點擊 */
border-bottom: 2px solid rgba(255, 255, 255, 0.3); /* 底線寬度加粗 */
transition: color 0.3s ease; /* 確保 hover 效果平滑 */
font-weight: bold; /* 文字加粗 */
justify-content: center; /* 確保文字在連結內居中 */
align-items: center; /* 確保文字在連結內居中 */
}
/* 移除最後一個 li 元素的底線 */
.nav-links ul li:last-child a {
border-bottom: none;
}
/* 手機版隱藏圖片 */
.nav-links ul li a img {
display: none;
}
/* 手機版顯示文字 */
.nav-links ul li a .nav-text {
display: block; /* 手機版顯示文字 */
}
/* 手機版選單按鈕 Hover 效果 */
.nav-links ul li a:hover {
color: #ff0000; /* hover 時文字變紅色 */
background-color: transparent; /* 保持透明背景 */
}
/* 手機版 LOGO 圖片容器 (手機版顯示) */
.mobile-logo {
display: flex;
height: 100%;
flex-grow: 1; /* 讓 LOGO 容器佔據剩餘的所有空間 */
justify-content: center; /* 在其內部水平置中 */
align-items: center; /* 垂直置中 */
z-index: 450; /* 保持相對較低的 z-index，比 navbar 低，比選單更低 */
}
.mobile-logo img {
max-height: 80%; /* 圖片最大高度為容器的 80%，留有上下間距 */
width: auto; /* 寬度自動調整以保持比例 */
object-fit: contain; /* 確保圖片完全顯示在內容框內，保持比例 */
}
/* 漢堡菜單容器 - 手機版顯示，上寬下窄的傾斜 (左邊) */
.hamburger-container {
display: flex;
position: relative; /* 這裡改為 relative，讓它正常參與 flex 佈局 */
top: auto;
right: auto;
width: 65px;
height: 65px;
background-color: #fff;
border-radius: 0;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.4s ease;
z-index: 600; /* 漢堡容器的 Z-index */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%); /* 加回這行，確保傾斜效果 */
flex-shrink: 0; /* 防止漢堡條縮小 */
}
/* 漢堡圖標本身不需要 transform 抵消 */
.hamburger-menu {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 22px;
padding-left: 15px;
padding-right: 5px;
box-sizing: content-box;
}
.hamburger-menu .bar {
width: 100%;
height: 4px;
background-color: #ff0000;
border-radius: 2px;
transition: all 0.3s ease-in-out;
}
/* 漢堡菜單打開時的動畫，不需要額外的 skewX */
.hamburger-container.open .hamburger-menu .bar:nth-child(1) {
transform-origin: center center; /* 確保旋轉中心在條的中央 */
transform: translateY(5px) rotate(45deg);
}
.hamburger-container.open .hamburger-menu .bar:nth-child(2) {
opacity: 0;
}
.hamburger-container.open .hamburger-menu .bar:nth-child(3) {
transform-origin: center center; /* 確保旋轉中心在條的中央 */
transform: translateY(-9px) rotate(-45deg); /* 維持您肉眼判斷為正的 translateY */
}
/* 調整 full-screen-section 的 padding-top */
.full-screen-section {
/* 移除 padding-top: 60px; */
/* 移除 padding-bottom: 20px; */
}
/* 滿版區塊文字大小調整 */
/* 使用 clamp() 實現更好的響應式字體大小 */
.full-screen-section h1 {
/* 最小 2em (約 32px), 隨著 7vw (視窗寬度的 7%) 縮放, 最大 3em (約 48px) */
font-size: clamp(2em, 7vw, 3em);
margin-bottom: 15px; /* 調整行高 */
}
.full-screen-section h2 {
/* 最小 1.8em (約 28.8px), 隨著 5vw 縮放, 最大 2.5em (約 40px) */
font-size: clamp(1.8em, 5vw, 2.5em);
margin-bottom: 15px; /* 調整行高 */
}
.full-screen-section p {
/* 最小 0.9em (約 14.4px), 隨著 2.5vw 縮放, 最大 1.2em (約 19.2px) */
font-size: clamp(0.9em, 2.5vw, 1.2em);
margin-bottom: 15px; /* 調整行高 */
}
/* 服務項目網格調整 */
.services-grid {
flex-direction: column;
align-items: center;
}
.service-item {
width: 90%;
max-width: 400px;
}
/* 手機版 other-image-1 圖片的最大寬度 */
.images-overlay-container .other-image-1-picture .other-image-1-img {
max-width: 600px; /* 手機版最大寬度 600px */
}
/* 手機版隱藏回到頂部按鈕 */
.back-to-top-btn {
display: none !important; /* 手機版強制隱藏 */
}
}
/* ----------------------2025.6.19-局部調整---------------------- */
/* 從這裡開始是疊加的修改 */
/* Page-1 背景設定 - PC 版 */
#page-1 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-2.jpg') !important; /* 使用 !important 強制覆蓋 */
background-size: cover !important; /* 使背景圖片覆蓋整個元素，保持圖片比例 */
background-position: center center !important; /* 圖片中心對齊元素中心 */
background-repeat: no-repeat !important; /* 不重複背景圖片 */
background-color: transparent !important; /* PC 版背景色預設為透明 */
}
@media (min-width: 769px) {
#page-1 {
background-attachment: fixed;}
}
/* Page-1 背景設定 - 手機版 (寬度 <= 768px) */
@media (max-width: 768px) {
#page-1 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-4.jpg') !important;
background-size: cover !important; /* **改為 cover，確保圖片覆蓋整個區域** */
background-position: center center !important; /* **改為 center center，讓圖片更居中** */
background-repeat: no-repeat !important;
background-color: #000 !important;
/* background-attachment: fixed; **移除這行，確保手機上能正常顯示背景圖** */
}
}
/* Page-2 背景設定 - PC 版 (新增) */
#page-2 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-5.jpg') !important; /* 使用 !important 強制覆蓋 */
background-size: cover !important; /* 使背景圖片覆蓋整個元素，保持圖片比例 */
background-position: center center !important; /* 圖片中心對齊元素中心 */
background-repeat: no-repeat !important; /* 不重複背景圖片 */
background-color: #000 !important; /* PC 版背景色預設為透明 */
}
@media (min-width: 769px) {
#page-2 {
background-attachment: fixed;}
}
/* Page-2 背景設定 - 手機版 (寬度 <= 768px) (新增) */
@media (max-width: 768px) {
#page-2 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-6.jpg') !important;
background-size: cover !important; /* **改為 cover** */
background-position: center center !important; /* **改為 center center** */
background-repeat: no-repeat !important;
background-color: #000;
/* background-attachment: fixed; **移除這行，確保手機上能正常顯示背景圖** */
}
}
/* 放在 style.css 或 01.css 的最底部，或確保它有足夠的權重 */
#page-3 {
opacity: 1 !important; /* 強制設定為完全不透明 */
transition: none !important; /* 強制移除所有過渡效果 */
}
/* 如果您有 .full-screen-section 並且 page-3 有這個 class */
.full-screen-section#page-3 { /* 更精確的選擇器 */
opacity: 1 !important;
transition: none !important;
}
/* Page-3 背景設定 - PC 版 (新增) */
#page-3 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-2.jpg') !important; /* 使用 !important 強制覆蓋 */
background-size: cover !important; /* 使背景圖片覆蓋整個元素，保持圖片比例 */
background-position: center center !important; /* 圖片中心對齊元素中心 */
background-repeat: no-repeat !important; /* 不重複背景圖片 */
background-color: #000; /* PC 版背景色預設為透明 */
}
@media (min-width: 769px) {
#page-3 {
background-attachment: fixed;}
}
/* Page-3 背景設定 - 手機版 (寬度 <= 768px) (新增) */
@media (max-width: 768px) {
#page-3 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-4.jpg') !important;
background-size: cover !important; /* **改為 cover** */
background-position: center center !important; /* **改為 center center** */
background-repeat: no-repeat !important;
background-color: #000;
/* background-attachment: fixed; **移除這行，確保手機上能正常顯示背景圖** */
}
}
/* Page-4 背景設定 - PC 版 (新增) */
#page-4 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-7.jpg') !important; /* 使用 !important 強制覆蓋 */
background-size: cover !important; /* 使背景圖片覆蓋整個元素，保持圖片比例 */
background-position: center center !important; /* 圖片中心對齊元素中心 */
background-repeat: no-repeat !important; /* 不重複背景圖片 */
background-color: #000; /* PC 版背景色預設為透明 */
}
@media (min-width: 769px) {
#page-4 {
background-attachment: fixed;}
}
/* Page-4 背景設定 - 手機版 (寬度 <= 768px) (新增) */
@media (max-width: 768px) {
#page-4 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-6.jpg') !important;
background-size: cover !important; /* **改為 cover** */
background-position: center center !important; /* **改為 center center** */
background-repeat: no-repeat !important;
background-color: #000;
/* background-attachment: fixed; **移除這行，確保手機上能正常顯示背景圖** */
}
}
/* Page-5 背景設定 - PC 版 (新增) */
#page-5 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-2.jpg') !important; /* 使用 !important 強制覆蓋 */
background-size: cover !important; /* 使背景圖片覆蓋整個元素，保持圖片比例 */
background-position: center center !important; /* 圖片中心對齊元素中心 */
background-repeat: no-repeat !important; /* 不重複背景圖片 */
background-color: transparent !important; /* PC 版背景色預設為透明 */
}
@media (min-width: 769px) {
#page-5 {
background-attachment: fixed;}
}
/* Page-5 背景設定 - 手機版 (寬度 <= 768px) (新增) */
@media (max-width: 768px) {
#page-5 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-4.jpg') !important;
background-size: cover !important; /* **改為 cover** */
background-position: center center !important; /* **改為 center center** */
background-repeat: no-repeat !important;
background-color: #000 !important;
/* background-attachment: fixed; **移除這行，確保手機上能正常顯示背景圖** */
}
}
/* Page-6 背景設定 - PC 版 (新增) */
#page-6 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-8.jpg') !important; /* 使用 !important 強制覆蓋 */
background-size: cover !important; /* 使背景圖片覆蓋整個元素，保持圖片比例 */
background-position: center center !important; /* 圖片中心對齊元素中心 */
background-repeat: no-repeat !important; /* 不重複背景圖片 */
background-color: transparent; /* PC 版背景色預設為透明 */
}
@media (min-width: 769px) {
#page-6 {
background-attachment: fixed;}
}
/* Page-6 背景設定 - 手機版 (寬度 <= 768px) (新增) */
@media (max-width: 768px) {
#page-6 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-9.jpg') !important;
background-size: cover !important; /* **改為 cover** */
background-position: center center !important; /* **改為 center center** */
background-repeat: no-repeat !important;
background-color: #000;
/* background-attachment: fixed; **移除這行，確保手機上能正常顯示背景圖** */
}
}
/* Page-7 背景設定 - PC 版 (新增) */
#page-7 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-10.jpg') !important; /* 使用 !important 強制覆蓋 */
background-size: cover !important; /* 使背景圖片覆蓋整個元素，保持圖片比例 */
background-position: center center !important; /* 圖片中心對齊元素中心 */
background-repeat: no-repeat !important; /* 不重複背景圖片 */
background-color: transparent; /* PC 版背景色預設為透明 */
}
@media (min-width: 769px) {
#page-7 {
background-attachment: fixed;}
}
/* Page-6 背景設定 - 手機版 (寬度 <= 768px) (新增) */
@media (max-width: 768px) {
#page-7 {
background-image: url('https://www.xander.com.tw/x-power/images/bg-11.jpg') !important;
background-size: cover !important; /* **改為 cover** */
background-position: center center !important; /* **改為 center center** */
background-repeat: no-repeat !important;
background-color: #000;
/* background-attachment: fixed; **移除這行，確保手機上能正常顯示背景圖** */
}
}
@media (min-width: 481px) {
/* 針對 page-1 到 page-6 的 .content 容器樣式 */
/* 使用 :not() 選擇器確保不影響 #home 內的 .content */
#page-1 .content,
#page-2 .content,
#page-3 .content,
#page-5 .content,
#page-6 .content {
width: 100% !important; /* 內容物 div 寬度 100% */
max-width: 1500px !important; /* **已調整為 1500px** */
margin-left: auto !important; /* 水平置中 */
margin-right: auto !important; /* 水平置中 */
padding: 5% !important; /* 上下左右間距暫時用 5% 設定 */
box-sizing: border-box !important; /* 確保 padding 不會增加總寬度 */
display: flex !important; /* 使用 Flexbox 來協助內容置中 */
flex-direction: column !important; /* 內容垂直排列 */
justify-content: center !important; /* 垂直置中內容 */
align-items: center !important; /* 水平置中內容 */
text-align: center !important; /* 確保文字本身也置中 */
color: #fff !important; /* 預設文字顏色為白色，以搭配深色背景 */
/* 移除 min-height 的 calc 設置，讓其根據內容和父元素 Flexbox 自動調整 */
min-height: auto !important; /* 讓內容高度自動 */
}
}
@media (min-width: 481px) {
/* 針對 page-1 到 page-6 的 .content 容器樣式 */
/* 使用 :not() 選擇器確保不影響 #home 內的 .content */
#page-7 .content {
width: 100% !important; /* 內容物 div 寬度 100% */
max-width: 1500px !important; /* **已調整為 1500px** */
margin-left: auto !important; /* 水平置中 */
margin-right: auto !important; /* 水平置中 */
padding-top: 5% !important; /* 上下左右間距暫時用 5% 設定 */
padding-bottom: 0% !important; /* 上下左右間距暫時用 5% 設定 */
padding-left: 5% !important; /* 上下左右間距暫時用 5% 設定 */
padding-right: 5% !important; /* 上下左右間距暫時用 5% 設定 */
box-sizing: border-box !important; /* 確保 padding 不會增加總寬度 */
display: flex !important; /* 使用 Flexbox 來協助內容置中 */
flex-direction: column !important; /* 內容垂直排列 */
justify-content: center !important; /* 垂直置中內容 */
align-items: center !important; /* 水平置中內容 */
text-align: center !important; /* 確保文字本身也置中 */
color: #fff !important; /* 預設文字顏色為白色，以搭配深色背景 */
/* 移除 min-height 的 calc 設置，讓其根據內容和父元素 Flexbox 自動調整 */
min-height: auto !important; /* 讓內容高度自動 */
}
}
@media (min-width: 481px) {
#page-4 .content {
width: 100% !important; /* 內容物 div 寬度 100% */
max-width: 1820px !important; /* **已調整為 1500px** */
margin-left: auto !important; /* 水平置中 */
margin-right: auto !important; /* 水平置中 */
padding: 5% !important; /* 上下左右間距暫時用 5% 設定 */
box-sizing: border-box !important; /* 確保 padding 不會增加總寬度 */
display: flex !important; /* 使用 Flexbox 來協助內容置中 */
flex-direction: column !important; /* 內容垂直排列 */
justify-content: center !important; /* 垂直置中內容 */
align-items: center !important; /* 水平置中內容 */
text-align: center !important; /* 確保文字本身也置中 */
color: #fff !important; /* 預設文字顏色為白色，以搭配深色背景 */
/* 移除 min-height 的 calc 設置，讓其根據內容和父元素 Flexbox 自動調整 */
min-height: auto !important; /* 讓內容高度自動 */
}
}
@media (max-width: 480px) {
/* 針對 page-1 到 page-6 的 .content 容器樣式 */
/* 使用 :not() 選擇器確保不影響 #home 內的 .content */
#page-1 .content,
#page-2 .content,
#page-3 .content,
#page-5 .content,
#page-6 .content,
#page-7 .content {
width: 100% !important; /* 內容物 div 寬度 100% */
max-width: 1500px !important; /* **已調整為 1500px** */
margin-left: auto !important; /* 水平置中 */
margin-right: auto !important; /* 水平置中 */
padding: 5% !important; /* 上下左右間距暫時用 5% 設定 */
box-sizing: border-box !important; /* 確保 padding 不會增加總寬度 */
display: flex !important; /* 使用 Flexbox 來協助內容置中 */
flex-direction: column !important; /* 內容垂直排列 */
justify-content: center !important; /* 垂直置中內容 */
align-items: center !important; /* 水平置中內容 */
text-align: center !important; /* 確保文字本身也置中 */
color: #fff !important; /* 預設文字顏色為白色，以搭配深色背景 */
/* 移除 min-height 的 calc 設置，讓其根據內容和父元素 Flexbox 自動調整 */
min-height: auto !important; /* 讓內容高度自動 */
}
}
/*-----------------------追加縮放比例的版面調整(高度)OP------------------------*/
@media (max-height: 650px) {
/* 針對 page-1 到 page-6 的 .content 容器樣式 */
/* 使用 :not() 選擇器確保不影響 #home 內的 .content */
#page-1 .content,
#page-2 .content,
#page-3 .content,
#page-5 .content,
#page-6 .content,
#page-7 .content {
max-width: 100% !important; /* **已調整為 1500px** */
}
}
@media (max-height: 650px) {
#page-4 .content {
max-width: 100% !important; /* **已調整為 1500px** */
}
}
/*-----------------------追加縮放比例的版面調整(高度)ED------------------------*/
/* 調整 .content 內文字的基礎樣式，確保在所有 page 內文字都是白色並有響應式調整 */
/* 移除 h2, h3, p 預設的 margin-bottom，讓 .content 的 padding 控制整體間距 */
#page-1 .content h2,
#page-2 .content h2,
#page-3 .content h2,
#page-4 .content h2,
#page-5 .content h2,
#page-6 .content h2,
#page-7 .content h2 {
color: #fff !important; /* 確保 h2 標題為白色 */
font-size: clamp(2em, 5vw, 3em) !important; /* 最小 2em, 隨著 5vw 縮放, 最大 3em */
margin-bottom: 0 !important; /* 移除預設底部間距 */
padding-bottom: 15px !important; /* 增加 h2 自身與下方內容的間距 */
}
#page-1 .content h3,
#page-2 .content h3,
#page-3 .content h3,
#page-4 .content h3,
#page-5 .content h3,
#page-6 .content h3,
#page-7 .content h3 {
color: #eee !important; /* 確保 h3 標題為淺白色 */
font-size: clamp(1.5em, 3.5vw, 2em) !important; /* 最小 1.5em, 隨著 3.5vw 縮放, 最大 2em */
margin-bottom: 0 !important; /* 移除預設底部間距 */
padding-bottom: 10px !important; /* 增加 h3 自身與下方內容的間距 */
}
#page-1 .content p,
#page-2 .content p,
#page-3 .content p,
#page-4 .content p,
#page-5 .content p,
#page-6 .content p {
color: #ddd; /* 確保 p 段落文字為淺白色 */
font-size: clamp(1em, 2.5vw, 1.2em) !important; /* 最小 1em, 隨著 2.5vw 縮放, 最大 1.2em */
line-height: 1.8 !important; /* 調整行高 */
max-width: 800px !important; /* 限制段落寬度以提高可讀性 */
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 0 !important; /* 移除預設底部間距 */
padding-bottom: 10px !important; /* 增加 p 自身與下方內容的間距 */
}
#page-7 .content p {
text-align: center;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 0 !important; /* 移除預設底部間距 */
padding-bottom: 10px !important; /* 增加 p 自身與下方內容的間距 */
}
/* 如果 .service-container 也存在於這些頁面，可能也需要調整其間距 */
#page-1 .content .service-container {
margin-top: 20px !important; /* 讓服務項目容器與上方標題有間距 */
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 20px !important; /* 項目之間的間距 */
}
#page-1 .content .service-item {
background-color: rgba(0, 0, 0, 0.5) !important; /* 服務項目背景色，半透明 */
padding: 20px !important;
border-radius: 8px !important;
max-width: 300px !important;
width: 100% !important; /* 確保在小螢幕下獨佔一行 */
box-sizing: border-box !important;
}
/* 由於 navbar 是 fixed，它會浮在頁面內容上方。*/
/* 為了解決 .content 被 navbar 遮擋的問題，我們在 .full-screen-section 底部增加了 padding */
/* 因此 .content 自身不需要額外的 margin-bottom */
/* 移除 .content 的 margin-bottom */
#page-1 .content,
#page-2 .content,
#page-3 .content,
#page-4 .content,
#page-5 .content,
#page-6 .content,
#page-7 .content {
margin-bottom: 0 !important; /* 移除之前為了 navbar 設定的 margin-bottom */
}
/* 手機版適應性調整 */
@media (max-width: 768px) {
/* 調整 full-screen-section 在手機版頂部空間，考慮手機版 navbar 的高度 */
.full-screen-section:not(#home) {
/* 假設手機版頂部導航列高度為 60px */
padding-top: calc(2% + 60px) !important; /* 頂部 5% 間距 + 手機版頂部 navbar 高度 */
padding-bottom: calc(5% + 80px) !important; /* 底部 5% 間距 + 手機版底部 navbar 高度 (假設PC/手機底部導航列高度一致) */
min-height: auto !important; /* 在手機版上，高度可能不需要強制 100vh，讓內容決定 */
}
/* 如果手機版導航列的實際高度與 PC 版不同，這裡需要調整 */
/* 您的 navbar 在手機版似乎會移動到頂部，並有一個高度 */
/* 我們需要在 JavaScript 中動態獲取 navbar 的高度，並將其設置為 CSS 變數 */
/* 這裡為了純 CSS 解決方案，我再次假設了手機版 navbar 的高度 */
/* 在手機版，如果導航列是在頂部，內容應從導航列下方開始 */
/* 假設手機版頂部 navbar 高度為 60px */
/* 這裡其實不用特別設 margin-top，因為 full-screen-section 的 padding-top 已經處理了 */
/* .content {
margin-top: 0 !important;
} */
/* 如果 mobile-logo 也會影響布局，需要調整 */
.mobile-logo {
height: 60px !important; /* 假設 mobile-logo 高度 */
line-height: 60px !important;
}
/* 確保手機版 nav-links 展開時不會遮擋內容 */
.nav-links.open {
top: 60px !important; /* 假設 mobile-logo 佔據頂部 60px */
overflow-y: auto;
}
}
/* 為確保與下方按鈕貼齊，需要在 JavaScript 中獲取 .navbar 的實際高度 */
/* 並在 .full-screen-section 的 --navbar-height 變數中動態更新 */
/* 目前我設定了一個預設值 80px */
/* 在您的 script.js 中，可以加入以下程式碼來動態設定這個變數 (如果您有需要的話) */
/* script.js (僅供參考，請自行添加到您的 script.js 中合適的位置) */
/*
document.addEventListener('DOMContentLoaded', () => {
const navbar = document.querySelector('.navbar');
if (navbar) {
// Function to update CSS variable
const updateNavbarHeight = () => {
document.documentElement.style.setProperty('--navbar-height', `${navbar.offsetHeight}px`);
};
// Initial set
updateNavbarHeight();
// Update on resize
window.addEventListener('resize', updateNavbarHeight);
// Also update if any content within navbar changes (e.g., images load)
// This might require a MutationObserver for more robust solutions
const observer = new MutationObserver(updateNavbarHeight);
observer.observe(navbar, { childList: true, subtree: true, attributes: true });
}
});
*/
/* ----------------------title標題css---------------------- */
/* 通用標題容器的基本樣式 */
.page-title-text-wrapper {
position: absolute;
left: 2%; /* 根據您的微調，將 left 從 1.5% 改為 2% */
top: -39%; /* 這是通用的大標題文字垂直定位 */
z-index: 3;
}
.page-title-shapes-wrapper {
display: flex;
width: 80%; /* 1920px 現在的寬度 */
height: 25%;
transform: skewX(-20deg);
transform-origin: 0% 100%;
position: absolute;
top: -10px;
left: 0;
z-index: 2;
}
.page-title-border-shape {
width: 60%; /* 1920px 現在的寬度 */
height: 40px; /* 1920px 現在的高度 */
border: 4px solid #445a86;
background-color: transparent;
transform: skewX(-20deg) translateX(-18px); /* 1920px 現在的變形 */
transform-origin: 0% 100%;
box-sizing: border-box; /* 確保 padding 不影響寬度計算 */
position: absolute;
right: 0;
top: 10px;
z-index: 1;
}
.page-description-wrapper {
margin-top: -155px; /* 1920px 現在的負上邊距 */
width: 600px; /* 1920px 現在的寬度 */
margin-left: 382px; /* 1920px 現在的左邊距 */
box-sizing: border-box; /* 新增 box-sizing */
}
/* -------------------- 響應式調整 (從大到小依序遞減) -------------------- */
/* 寬1200 breakpoint */
@media (max-width: 1200px) {
.page-title-shapes-wrapper {
width: 75%;
}
.page-description-wrapper {
margin-left: 382px;
}
}
/* 寬1074 breakpoint - 從 0620-標題字響應式.jpg 的 1074 數值，與 1073 斷點區分 */
@media (max-width: 1074px) {
.page-title-text-wrapper {
top: -33%; /* 通用的大標題文字垂直定位調整 */
left: 2.5%; /* 根據您的微調 */
}
}
/* 寬1073 breakpoint (涵蓋 1073px 到 1001px) - 精修視覺效果 */
@media (max-width: 1073px) {
/* 這裡沒有顯式設置 left，會繼承 1074px 的 2.5% */
.page-title-shapes-wrapper {
width: 85%; /* 調整為 85%，以在 1073px 呈現更好的視覺長度 */
height: 25%;
}
.page-title-border-shape {
width: 60%;
height: 43px;
transform: skewX(-20deg) translateX(-18px);
right: 0;
left: auto;
}
.page-description-wrapper {
margin-top: -145px;
margin-left: 1.5%;
width: 85vh; /* 調整小字寬度以避免重疊，並確保顯示空間 */
position: static;
top: auto;
}
}
/* 寬1000 breakpoint - 修正小字位置及整體佈局 */
@media (max-width: 1000px) {
.page-title-text-wrapper {
top: -39%; /* 通用的大標題文字垂直定位調整 */
left: 3%; /* 根據您的微調 */
}
.page-title-shapes-wrapper {
width: 80%; /* 根據 0620-標題字響應式.jpg 的 1000px 斷點，雖然沒有明確寫出，但看起來像是 75% 左右的感覺 */
margin-left: 0; /* 清除可能繼承的 margin-left */
}
.page-title-border-shape {
width: 65%; /* 讓線條在 1000px 變短一些，為小字留出空間 */
height: 40px;
transform: skewX(-20deg) translateX(-18px);
right: 0;
left: auto;
}
.page-description-wrapper {
width: 80vh; /* 根據矩形線 65% 和左側 1.5% 計算小字寬度，並留出 10px 間距 */
margin-left: 1.5%; /* 與標題左對齊 */
padding-left: 0; /* 清除 padding */
position: static;
top: auto;
margin-top: -155px;
}
}
@media (max-width: 950px) {
.page-title-text-wrapper {
top: -34%; /* 通用的大標題文字垂直定位調整 */
/* left 會繼承 1000px 的 3% */
}
.page-description-wrapper {
width: 70vh;
}
}
/* 寬850 breakpoint - 精確還原截圖效果 */
@media (max-width: 850px) {
.page-title-text-wrapper {
left: 4%; /* 通用的大標題文字水平定位調整 */
top: -43%; /* 通用的大標題文字垂直定位調整 */
}
.page-title-shapes-wrapper {
margin-top: -10px; /* 通用的色塊組件垂直定位調整 */
margin-left: 1.5%; /* 讓它從左邊 1.5% 開始，與大標題字左對齊 */
width: 85%; /* **調整：讓紅藍色塊更長，符合 850px 截圖的視覺效果** */
height: 25%; /* 保持一致 */
transform: skewX(-20deg); /* 保持一致 */
}
.page-title-border-shape {
width: 65%; /* 來自 0620-標題字響應式.jpg */
height: 35px; /* 來自 0620-標題字響應式.jpg */
transform: skewX(-20deg) translateX(-18px); /* 保持一致 */
right: 0; /* 保持靠右 */
left: auto; /* 確保清除 left */
}
.page-description-wrapper {
margin-left: 2.5%; /* **調整：與大標題字左側對齊** */
width: 95%; /* **調整：讓小字跟畫面差不多寬，並允許它自己換行，配合新的 margin-left 和 padding** */
margin-top: -140px; /* 通用的小標題描述垂直定位調整 */
padding-left: 0; /* 清除可能繼承的 padding */
padding-right: 0; /* 清除可能繼承的 padding */
text-align: left; /* 確保文字左對齊 */
position: static; /* 確保不是絕對定位 */
left: auto; top: auto; /* 清除可能的絕對定位 */
}
}
/* 寬800 breakpoint - 保持與 0620-標題字響應式.jpg 一致 */
@media (max-width: 800px) {
.page-title-text-wrapper {
left: 4.5%; /* 通用的大標題文字水平定位調整 */
top: -49%; /* 通用的大標題文字垂直定位調整 */
}
.page-title-shapes-wrapper {
width: 85%; /* 保持與 850px 類似的寬度，確保整體感 */
margin-left: 1.5%; /* 保持與 850px 類似的對齊 */
margin-top: 0px;
}
.page-title-border-shape {
width: 65%; /* 保持與 850px 類似的寬度 */
height: 35px;
}
.page-description-wrapper {
margin-top: -125px; /* 通用的小標題描述垂直定位調整 */
margin-left: 2.5%; /* 調整為與大標題左對齊 */
width: 95%; /* 保持與 850px 類似的寬度，讓它跟畫面差不多寬 */
padding: 0%;
}
}
/* 寬768 (手機版) breakpoint - 統一參考 850px 佈局，並適應手機 */
@media (max-width: 768px) {
.page-title-text-wrapper {
left: 1.5%; /* 通用的大標題文字水平定位調整 */
top: -55%; /* 通用的大標題文字垂直定位調整 */
transform: skewX(-10deg) translateX(2.5vw); /* 來自 0620-標題字響應式.jpg */
transform-origin: 0% 50%;
}
.page-title-shapes-wrapper {
width: 90%; /* 來自 0620-標題字響應式.jpg */
height: 28%; /* 來自 0620-標題字響應式.jpg */
transform: skewX(-15deg); /* 來自 0620-標題字響應式.jpg */
transform-origin: 0% 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.page-title-border-shape {
width: 68%; /* 來自 0620-標題字響應式.jpg */
height: 30px; /* 來自 0620-標題字響應式.jpg */
border: 4px solid #445a86;
transform: skewX(-15deg) translateX(-1.5%); /* 來自 0620-標題字響應式.jpg */
transform-origin: 0% 100%;
box-sizing: border-box;
position: absolute;
right: 0;
top: 20px; /* 通用的線條垂直定位調整 */
z-index: 1;
}
.page-description-wrapper {
margin-top: -75px; /* 通用的小標題描述垂直定位調整 */
width: calc(100% - 30px); /* 來自 0620-標題字響應式.jpg，確保不被切到線 */
margin-left: 15px; /* 來自 0620-標題字響應式.jpg */
padding: 0%;
position: static;
top: auto;
}
}
@media (max-width: 750px) {
.page-title-text-wrapper {
left: 2.5%; /* 根據您的微調 */
top: -51%; /* 通用的大標題文字垂直定位調整 */
}
}
@media (max-width: 700px) {
.page-title-text-wrapper {
top: -48%; /* 通用的大標題文字垂直定位調整 */
/* left 會繼承 750px 的 2.5% */
}
}
@media (max-width: 650px) {
.page-title-text-wrapper {
top: -42%; /* 通用的大標題文字垂直定位調整 */
/* left 會繼承 750px 的 2.5% */
}
}
/* 寬600 (手機版) breakpoint - 統一參考 850px 佈局，並適應更小的手機螢幕 */
@media (max-width: 600px) {
.page-title-text-wrapper {
left: 4.5%;
top: -50%; /* 通用的大標題文字垂直定位調整 */
}
.page-title-shapes-wrapper {
width: 80%; /* 來自 0620-標題字響應式.jpg */
height: 35%; /* 來自 0620-標題字響應式.jpg */
transform: skewX(-15deg); /* 保持與 768px 一致 */
}
.page-title-border-shape {
width: 80%; /* 來自 0620-標題字響應式.jpg */
height: 30px; /* 來自 0620-標題字響應式.jpg */
border: 3px solid #445a86; /* 來自 0620-標題字響應式.jpg */
transform: skewX(-15deg) translateX(-1.5%); /* 保持與 768px 一致 */
top: 15px; /* 通用的線條垂直定位調整 */
}
.page-description-wrapper {
margin-top: -56px; /* 通用的小標題描述垂直定位調整 */
width: calc(100% - 20px); /* 來自 0620-標題字響應式.jpg */
margin-left: 10px; /* 來自 0620-標題字響應式.jpg */
padding: 0%;
}
}
@media (max-width: 550px) {
.page-title-text-wrapper {
top: -42%; /* 通用的大標題文字垂直定位調整 */
/* left 會繼承 600px 的 4.5% */
}
}
@media (max-width: 500px) {
.page-title-text-wrapper {
top: -42%; /* 通用的大標題文字垂直定位調整 */
/* left 會繼承 600px 的 4.5% */
}
.page-title-shapes-wrapper .page-title-shape.red-part {
width: 90%;
}
}
@media (max-width: 450px) {
.page-title-text-wrapper {
top: -35%; /* 通用的大標題文字垂直定位調整 */
/* left 會繼承 600px 的 4.5% */
}
}
@media (max-width: 380px) {
.page-title-text-wrapper {
top: -27%; /* 通用的大標題文字垂直定位調整 */
/* left 會繼承 600px 的 4.5% */
}
}
@media (max-width: 300px) {
.page-title-text-wrapper {
top: -18%; /* 通用的大標題文字垂直定位調整 */
/* left 會繼承 600px 的 4.5% */
}
}
.page-title-block-wrapper {
margin-top: 2%;
margin-bottom: 2%;
}
@media (max-width: 850px) {
.page-title-block-wrapper{width:100%;}
}
/* ----------------------2025.6.19-局部調整-page-3---------------------- */
/* 1920px (現在) 及以上的基本 PC 版樣式 */
/* 當螢幕寬度大於 1000px 時，這些固定像素值將生效，使文字大小固定 */
#page-3 .content .page-title-container {
width: 100%;
max-width: 1000px; /* 矩形線和一些定位的基準寬度 */
height: 180px;
position: relative;
margin-bottom: 30px;
}
#page-3 .content .page-title-text-wrapper h2 {
color: #FFFFFF;
font-weight: bold;
font-size: 69.12px !important; /* 修正點：從 3.6vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
transform: skewX(-15deg) translateX(1.8vw); /* 這裡的 translateX 仍然使用 vw 以保持相對位置 */
transform-origin: 0% 50%;
white-space: nowrap;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#page-3 .content .page-title-shapes-wrapper .page-title-shape.red-part {
background-color: #c00000;
width: 80%;
height: 100%;
flex-shrink: 0;
}
#page-3 .content .page-title-shapes-wrapper .page-title-shape.blue-part {
background-color: #445a86;
width: 5%;
height: 100%;
flex-shrink: 0;
}
#page-3 .content .page-description-wrapper p {
color: #FFFFFF;
font-size: 21.12px !important; /* 修正點：從 1.1vw 改為固定 px，使其在 1000px 以上不隨螢幕縮放 */
margin-top: 0;
margin-bottom: 0;
text-align: left;
line-height: 1.5 !important;
font-style: italic;
font-weight: bold;
}
/* -------------------- 響應式調整 (從大到小依序遞減) -------------------- */
/* 寬1200 breakpoint */
/* 這裡的 vw 再次生效，文字將開始隨著螢幕縮小 */
@media (max-width: 1200px) {
#page-3 .content .page-title-text-wrapper h2 {
font-size: 5.7vw !important;
}
#page-3 .content .page-description-wrapper p {
font-size: 1.8vw !important;
}
}
/* 寬1073 breakpoint (涵蓋 1073px 到 1001px) - 精修視覺效果 */
@media (max-width: 1073px) {
#page-3 .content .page-title-container {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
#page-3 .content .page-title-text-wrapper h2 {
font-size: 5.7vw !important; /* 繼承 1200px 的字體大小 */
}
#page-3 .content .page-description-wrapper p {
font-size: 2vw !important;
}
}
/* 寬1000 breakpoint - 修正小字位置及整體佈局 */
@media (max-width: 1000px) {
#page-3 .content .page-title-container {
width: 100%;
max-width: 980px; /* 稍微縮小 max-width，讓內邊距有空間 */
margin-left: auto;
margin-right: auto;
padding-left: 10px; /* 增加左側內邊距 */
padding-right: 10px; /* 增加右側內邊距 */
box-sizing: border-box; /* 確保 padding 不增加總寬度 */
}
#page-3 .content .page-title-text-wrapper h2 {
font-size: 7vw !important; /* 更積極地縮小字體 */
}
#page-3 .content .page-description-wrapper p {
font-size: 2vw !important;
}
}
@media (max-width: 950px) {
#page-3 .content .page-description-wrapper p {
font-size: 2.4vw !important;
}
}
/* 寬850 breakpoint - 精確還原截圖效果 */
@media (max-width: 850px) {
#page-3 .content .page-title-container {
height: 160px; /* 根據截圖，高度可能有所縮小 */
max-width: 850px; /* 設定最大寬度為 850px */
margin-left: auto;
margin-right: auto;
padding: 0; /* 清除之前的 padding */
}
#page-3 .content .page-title-text-wrapper h2 {
font-size: 7vw !important; /* 來自 0620-標題字響應式.jpg */
transform: skewX(-15deg) translateX(1.8vw); /* 保持與 PC 版一致的 skew 和 translateX */
}
#page-3 .content .page-description-wrapper p {
font-size: 2.8vw !important; /* 來自 0620-標題字響應式.jpg */
}
}
/* 寬800 breakpoint - 保持與 0620-標題字響應式.jpg 一致 */
@media (max-width: 800px) {
#page-3 .content .page-title-container {
height: 150px; /* 根據 0620-標題字響應式.jpg 截圖，高度繼續縮小 */
}
#page-3 .content .page-title-text-wrapper h2 {
font-size: 8.5vw !important; /* 來自 0620-標題字響應式.jpg */
}
#page-3 .content .page-description-wrapper p {
font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
}
}
/* 寬768 (手機版) breakpoint - 統一參考 850px 佈局，並適應手機 */
@media (max-width: 768px) {
#page-3 .content .page-title-container {
height: 120px; /* 統一手機版高度 */
margin-bottom: 20px;
width: 100%;
max-width: 100%; /* 手機版不限制最大寬度 */
padding-left: 15px; /* 為邊緣留出一些空間 */
padding-right: 15px;
box-sizing: border-box;
}
#page-3 .content .page-title-text-wrapper h2 {
font-size: 8.5vw !important; /* 來自 0620-標題字響應式.jpg */
transform: skewX(-10deg) translateX(2.5vw); /* 來自 0620-標題字響應式.jpg */
transform-origin: 0% 50%;
}
#page-3 .content .page-title-shapes-wrapper .page-title-shape.red-part {
width: 85%; /* 來自 0620-標題字響應式.jpg */
}
#page-3 .content .page-title-shapes-wrapper .page-title-shape.blue-part {
width: 5%; /* 來自 0620-標題字響應式.jpg */
}
#page-3 .content .page-description-wrapper p {
font-size: 2.5vw !important; /* 來自 0620-標題字響應式.jpg */
line-height: 1.3 !important; /* 來自 0620-標題字響應式.jpg */
margin-top: 0;
margin-bottom: 0;
text-align: left;
font-style: italic;
font-weight: bold;
}
}
@media (max-width: 650px) {
#page-3 .content .page-description-wrapper p {
font-size: 2.9vw !important;
}
}
/* 寬600 (手機版) breakpoint - 統一參考 850px 佈局，並適應更小的手機螢幕 */
@media (max-width: 600px) {
#page-3 .content .page-title-container {
height: 100px; /* 進一步縮小高度 */
margin-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
}
#page-3 .content .page-title-text-wrapper h2 {
font-size: 9vw !important; /* 更積極地縮小字體 */
}
#page-3 .content .page-description-wrapper p {
font-size: 3vw !important; /* 來自 0620-標題字響應式.jpg */
line-height: 1.35 !important; /* 來自 0620-標題字響應式.jpg */
}
}
@media (max-width: 500px) {
#page-3 .content .page-title-text-wrapper h2 {
font-size: 10vw !important; /* 更積極地縮小字體 */
}
#page-3 .content .page-description-wrapper p {
font-size: 3.5vw !important;
}
#page-3 .content .page-title-shapes-wrapper .page-title-shape.red-part {
width: 90%;
}
}
@media (max-width: 450px) {
#page-3 .content .page-description-wrapper p {
font-size: 3.7vw !important;
}
}
@media (max-width: 300px) {
#page-3 .content .page-description-wrapper p {
font-size: 4.1vw !important;
}
}
/* 在 style.css 中加入這個新的規則 */
#page-3 .content .page-3-table-content {
width: 100%; /* 確保容器佔滿可用寬度 */
overflow-x: auto; /* 啟用水平捲軸 */
-webkit-overflow-scrolling: touch; /* 為了 iOS 設備上的平滑滾動 */
padding-bottom: 10px; /* 給捲軸預留一些空間，避免遮擋內容 */
}
/* 為了更好地測試，我們可以臨時給它一個背景色看看範圍 */
/* #page-3 .content .page-3-table-content {
background-color: rgba(255, 255, 0, 0.2);
} */
/* 新增的 Home 區塊動畫 CSS */
/* 通用類別，用於初始隱藏，然後透過動畫顯示 */
.initial-hidden {
opacity: 0;
}
/* Home 區塊背景淡入動畫 */
@keyframes fadeInBackground {
from { opacity: 0; }
to { opacity: 1; }
}
/* main-visual-container-pc 從右向左淡入動畫 */
@keyframes fadeInMoveFromRight {
0% {
opacity: 0;
transform: translate(50px, -50%); /* 從右邊 50px 處開始，同時保持垂直置中 */
}
100% {
opacity: 1;
transform: translate(-50%, -50%); /* 移動到最終位置 */
}
}
/* logo-container 和 images-overlay-container.pc-version 從下淡入動畫 */
@keyframes fadeInUpCustom {
0% {
opacity: 0;
/* 對於 logo-container 和 images-overlay-container，它們在 CSS 中是絕對定位，
且 transform: translate(-50%, -50%) 會影響它們的起始點。
這裡調整為從相對其最終位置下方開始，水平保持居中。
具體 translate Y 值可能需要微調，取決於元素實際高度和最終定位。
例如：-50% 是垂直居中，那麼從下方開始可以是 translate(-50%, 0) 或 translate(-50%, 50px)
這裡先沿用 translate(-50%, -50%) 的 X 軸位移，並在 Y 軸上從下方抬升。
為了簡化，讓其從下方某個固定像素值（例如 50px）向上移動並淡入。
*/
transform: translate(-50%, calc(-50% + 50px)); /* 從下方 50px 處開始，水平保持居中 */
}
100% {
opacity: 1;
transform: translate(-50%, -50%); /* 移動到最終位置 */
}
}
/* 將動畫應用到相關元素 */
/* home 區塊的背景設定 - 淡入動畫 */
/* 請注意：這個樣式應該已經在 style.css 的 .home::before 規則中 */
.home::before {
animation: fadeInBackground 2s ease-out forwards; /* 背景淡入動畫 */
}
/* main-visual-container-pc 動畫 */
/* 請注意：這個樣式應該已經在 style.css 的 .main-visual-container-pc 規則中 */
.main-visual-container-pc {
animation: fadeInMoveFromRight 1.5s ease-out 0.5s forwards; /* 1.5s 持續時間，0.5s 延遲 */
}
/* logo-container 動畫 */
/* 請注意：這個樣式應該已經在 style.css 的 .logo-container 規則中 */
.logo-container {
animation: fadeInUpCustom 1.2s ease-out 0.8s forwards; /* 1.2s 持續時間，0.8s 延遲 */
}
/* images-overlay-container.pc-version 動畫 */
/* 請注意：這個樣式應該已經在 style.css 的 .images-overlay-container.pc-version 規則中 */
.images-overlay-container.pc-version {
animation: fadeInUpCustom 1.2s ease-out 1.2s forwards; /* 1.2s 持續時間，1.2s 延遲 */
}
/* 區塊背景顏色/圖片 */
/* home 區塊樣式 - 請確保這是您檔案中的 .home 規則 */
.home {
background-color: #000; /* 保留背景色，當圖片未載入或透明時顯示 */
position: relative; /* 確保 home 是定位父元素 */
display: flex;
justify-content: center;
align-items: flex-start;
overflow: hidden;
/* **** 重要的修改：從這裡移除所有背景圖片相關設定 **** */
/* background-size: auto 100%; */
/* background-position: center center; */
/* background-repeat: no-repeat; */
/* background-attachment: fixed; */
}
/* home::before 偽元素用於背景圖片和淡入動畫 */
.home::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover; /* 確保背景圖片覆蓋整個區塊 */
background-position: center center; /* 背景圖片置中 */
background-repeat: no-repeat; /* 不重複 */
z-index: 1; /* 讓背景在內容下方，但高於 .home 的 background-color */
opacity: 0; /* 初始透明度為 0 */
animation: fadeInBackground 2s ease-out forwards; /* 背景淡入動畫 */
}
@media (min-width: 769px) {
/* PC 版：將背景圖片應用到 home::before */
.home::before {
background-image: url("../images/bg.jpg"); /* PC 版背景圖片 */
background-attachment: fixed; /* 固定背景 */
}
}
/* home 背景設定 - 手機版 (寬度 <= 768px) */
@media (max-width: 768px) {
/* 手機版：將背景圖片應用到 home::before */
.home::before {
background-image: url("https://www.xander.com.tw/x-power/images/bg-3.jpg")!important; /* 手機版背景圖片 */
background-size: cover; /* 手機版背景大小，確保覆蓋 */
height:100%;
}
}
/* 重新調整 full-screen-section 的 padding，以適應 navbar */
/* 目標是讓 .content 在 section 內垂直置中，並預留 navbar 空間 */
.full-screen-section:not(#home) { /* 確保不影響 #home */
padding-bottom: calc(2% + var(--navbar-height, 80px)) !important; /* 底部 5% 間距 + navbar 高度 */
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* 讓內容在 full-screen-section 內垂直置中 */
min-height: 100vh !important; /* 確保每個區塊至少為一個視窗高度 */
box-sizing: border-box !important; /* 確保 padding 不會導致溢出 */
}
@media (min-width: 481px) {
/* 重新調整 full-screen-section 的 padding，以適應 navbar */
/* 目標是讓 .content 在 section 內垂直置中，並預留 navbar 空間 */
.full-screen-section:not(#home) { /* 確保不影響 #home */
align-items: center !important; /* 讓內容在 full-screen-section 內水平置中 */
}
}
/* 確保 @keyframes gradient-flow 存在 (通常在檔案開頭，不需要重複定義) */
@keyframes gradient-flow {
0% { background-position: 0% 0%; }
100% { background-position: -300% 0%; }
}
/* ---------------------------------------------------- */
/* ** PC 版：body::before 僅用於全螢幕「頂部」漸層線 ** */
/* ---------------------------------------------------- */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh; /* 保持全屏高度，但現在只顯示頂部線 */
z-index: 9999; /* 保持在最頂層 */
pointer-events: none; /* 確保不阻擋點擊 */
/* 漸層背景色與動畫 (保持不變) */
background: linear-gradient(to right, #b71717, #731cbb, #156ad7, #c51111);
background-size: 400% 100%;
animation: gradient-flow 6s linear infinite;
/* **PC 版遮罩：僅顯示頂部一條線 (14px 粗)** */
-webkit-mask-image: linear-gradient(black, black); /* 只有一個 mask layer 來定義頂部線 */
mask-image: linear-gradient(black, black);
-webkit-mask-size: 100% 14px; /* 線條寬度 100%，高度 14px */
mask-size: 100% 14px;
-webkit-mask-position: top; /* 線條在頂部 */
mask-position: top;
-webkit-mask-repeat: no-repeat; /* 確保不重複 */
mask-repeat: no-repeat;
-webkit-mask-composite: source-over; /* 組合 mask */
mask-composite: source-over;
}
/* ---------------------------------------------------- */
/* ** Navbar 的基礎樣式 (PC 和手機的共同尺寸/背景/層級等，但**不包含**定位) ** */
/* ---------------------------------------------------- */
.navbar {
/* **請將您原本 .navbar 的其他樣式（例如：寬度、高度、背景色、padding、display 等）複製到這裡** */
/* 範例 (請替換為您的實際值): */
/* width: 100%; */
/* height: 80px; */
/* background-color: #333; */
/* padding: 10px 20px; */
/* display: flex; */
/* justify-content: space-between; */
/* align-items: center; */
z-index: 900; /* navbar 的 z-index，低於 body::before (9999)，但高於一般內容 */
}
/* ---------------------------------------------------- */
/* ** PC 版專用：設定 navbar 的 position: relative; ** */
/* ** 這樣只在桌面版為 .navbar::before 提供定位基準 ** */
/* ---------------------------------------------------- */
@media (min-width: 769px) { /* 當螢幕寬度大於 768px 時應用 */
.navbar {
}
}
/* ---------------------------------------------------- */
/* ** Navbar 上方的新漸層線 (.navbar::before) - PC/手機通用 ** */
/* ** 這個規則不需要修改，因為其 position: absolute; 會相對其父元素 (.navbar) 定位，** */
/* ** 無論父元素是 relative 還是 fixed，都會正確工作。 ** */
/* ---------------------------------------------------- */
.navbar::before {
content: '';
position: absolute;
bottom: 100%; /* 將此偽元素放置在 navbar 的正上方 (100% navbar 高度) */
left: 0;
width: 100%; /* 與 navbar 等寬 */
height: 10px; /* 線條的粗細 */
z-index: inherit; /* 繼承 navbar 的 z-index，或給一個比 navbar 高但比 body::before 低的值 */
pointer-events: none; /* 確保線條不阻擋點擊事件 */
background: linear-gradient(to right, #b71717, #731cbb, #156ad7, #c51111);
background-size: 400% 100%;
animation: gradient-flow 6s linear infinite;
}
/* ---------------------------------------------------- */
/* ** 手機版特定樣式：body::before 顯示底部線條，navbar 固定在底部 ** */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
body::before {
display: block; /* 確保在手機版顯示 */
background: linear-gradient(to right, #b71717, #731cbb, #156ad7, #c51111);
background-size: 400% 100%;
animation: gradient-flow 6s linear infinite;
-webkit-mask-image: linear-gradient(black, black);
mask-image: linear-gradient(black, black);
-webkit-mask-size: 100% 15px;
mask-size: 100% 15px;
-webkit-mask-position: bottom;
mask-position: bottom;
-webkit-mask-composite: source-over;
mask-composite: source-over;
}
/* ** 手機版 navbar 定位：讓選單固定在底部 ** */
.navbar {
position: fixed; /* **讓 navbar 固定在視窗底部** */
bottom: 0; /* **定位在底部** */
left: 0; /* 從左邊緣開始 */
width: 100%; /* 佔滿整個寬度 */
/* **請將您手機版 navbar 的其他樣式（例如：背景色、padding、height 等）複製到這裡** */
/* background-color: rgba(0, 0, 0, 0.8); */
/* padding: 10px 0; */
/* height: 60px; */
z-index: 1000; /* 確保 navbar 在大部分內容之上，但低於 body::before 的 9999 */
}
/* .navbar::before 在手機版也會正常顯示 */
/* 如果手機版需要不同的線條粗細，可以在這裡定義 .navbar::before 的 height */
}
/* =============================================================== */
/* 2025.07.08 - 首頁 PC 版新內容容器 START */
/* =============================================================== */
.home-pc-new-content {
/* 相對於 #home 定位 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5; /* 確保在背景圖 (z-index: 1) 之上 */
/* 預設隱藏，只在 PC 螢幕尺寸下顯示 */
display: none;
/* 如果需要，可以開啟下面的背景色協助測試定位，測試完後移除 */
/* background-color: rgba(0, 0, 255, 0.2); */
}
/* 僅在 PC 螢幕寬度 (大於 768px) 下顯示此內容 */
@media (min-width: 769px) {
.home-pc-new-content {
display: block; /* 在 PC 螢幕下顯示 */
}
}
/* 確保手機版 (小於等於 768px) 時的顯示邏輯 */
@media (max-width: 768px) {
.main-visual-container-mobile {
display: block; /* 確保在手機版顯示手機專用內容 */
}
.main-visual-container-pc {
display: none; /* 在手機版隱藏 PC 背景圖 */
}
.home-pc-new-content {
display: none; /* 在手機版隱藏 PC 輪播內容 */
}
}
/* =============================================================== */
/* 首頁 PC 版新內容容器 END */
/* =============================================================== */
/* =============================================================== */
/* 2025.07.08 - 左上角輪播區塊樣式 START */
/* =============================================================== */
.home-top-left-carousel-container {
position: sticky; /* 從 absolute 改為 sticky */
top: 0; /* 設定為 0，表示當它滾動到瀏覽器視窗頂部時會黏住 */
left: 5%; /* 保持或根據需要調整此定位 */
width: 60%;
margin-top:2%;
max-width: 800px;
height: auto;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 20px rgba(128, 0, 128, 0.8), 0 0 20px rgba(128, 0, 128, 0.6);
aspect-ratio: 80 / 30;
background-color: #000;
}
.home-carousel-track {
display: flex; /* 使用 Flexbox 讓圖片水平排列 */
width: 100%; /* 軌道寬度是輪播容器的 100% */
height: 100%;
transition: transform 0.5s ease-in-out; /* 平滑的過渡效果，用於圖片切換 */
}
/* 每張輪播圖片的容器 */
.carousel-slide {
/* 移除或註解掉這一行，讓 JavaScript 來控制寬度 */
/* min-width: 100%; */
flex-shrink: 0; /* 防止圖片縮小 */
}
/* 確保圖片在容器內縮放 */
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover; /* 保持圖片比例並覆蓋整個區域 */
}
/* 輪播控制按鈕 (左右箭頭) */
.carousel-control {
position: absolute;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 垂直居中的精確調整 */
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
color: white; /* 白色箭頭 */
border: none;
padding: 10px 15px; /* 內邊距 */
cursor: pointer; /* 鼠標懸停時顯示為手型 */
font-size: 2em; /* 箭頭文字大小 */
z-index: 10; /* 確保按鈕在圖片和指示器之上 */
border-radius: 50%; /* 圓形按鈕 */
line-height: 1; /* 確保文字垂直居中 */
display: flex; /* 使用 Flexbox 居中箭頭符號 */
justify-content: center;
align-items: center;
width: 40px; /* 固定寬度 */
height: 40px; /* 固定高度 */
transition: background-color 0.3s ease; /* 背景色過渡效果 */
}
.carousel-control:hover {
background-color: rgba(0, 0, 0, 0.8); /* 鼠標懸停時背景色變深 */
}
.carousel-control.prev {
left: 10px; /* 左箭頭位置 */
}
.carousel-control.next {
right: 10px; /* 右箭頭位置 */
}
/* 輪播指示器 (底部的點點) */
.carousel-indicators {
position: absolute;
bottom: 10px; /* 距離底部 10px */
width: 100%; /* 確保容器佔滿寬度 */
display: flex; /* 使用 Flexbox 使點點水平排列 */
justify-content: center; /* 使點點在容器中水平置中 */
align-items: center; /* 垂直置中 (如果指示器有高度) */
gap: 8px; /* 點點之間的間距 */
z-index: 10; /* 確保在輪播圖片之上 */
}
.indicator-dot {
width: 30px!important; /* 調整寬度，使其呈現長方形 */
height: 5px!important; /* 調整高度，使其呈現扁平 */
background-color: rgba(255, 255, 255, 0.5); /* 預設為半透明白色 */
border-radius: 0px!important; /* 稍微帶點圓角，看起來更柔和 */
cursor: pointer;
transition: background-color 0.3s ease, width 0.3s ease; /* 添加平滑過渡效果 */
}
.indicator-dot.active {
background-color: #ff0000; /* 活躍狀態時為紅色 */
width: 30px; /* 活躍時稍微變長，增加視覺強調 */
}
/* 針對手機版 (螢幕寬度小於或等於 768px) 的調整 */
@media (max-width: 768px) {
/* * 即使 HTML 順序已調整，若父元素 #home 在其他地方被設定為 display: flex 或 grid，
* 子元素仍可能並排。因此，我們需要在此明確指示它們垂直堆疊。
*/
#home {
display: flex;
flex-direction: column; /* **關鍵修改**：確保子元素垂直堆疊 */
align-items: center; /* 讓子元素在水平方向上置中 */
min-height: auto; /* 確保在手機版上高度由內容決定，避免過高 */
padding-top: 0; /* 確保頂部沒有不必要的 padding */
/* 移除任何可能導致橫向溢出的寬度設定或負邊距 */
width: 100%;
overflow-x: hidden;
}
/* 確保手機版主要視覺區塊 (.main-visual-container-mobile) 正常顯示 */
.main-visual-container-mobile {
display: block; /* 確保在手機版顯示 (如果之前被隱藏) */
width: 100%; /* 確保其寬度佔滿 */
/* 您可能還需要在這個類別中調整其內部圖片或內容的尺寸和間距，以適應手機版 */
}
/* 調整包含輪播區塊的父容器 (.home-pc-new-content) 的顯示和樣式 */
.home-pc-new-content {
display: block; /* **修改**：讓輪播內容在手機版顯示出來 (之前可能設定為 display: none;) */
width: 100%; /* 確保其寬度佔滿 */
/* 移除 PC 專用的定位屬性，讓它回歸正常文檔流 */
position: static;
left: unset;
top: unset;
transform: unset;
margin: 0; /* 重置可能影響手機佈局的外部邊距 */
padding: 0; /* 重置可能影響手機佈局的內部填充 */
/* 使用 flexbox 來幫助內部輪播在 home-pc-new-content 中水平居中 */
display: flex;
justify-content: center;
align-items: center;
margin-bottom:5%;
}
/* =============================================================== */
/* 左上角輪播區塊樣式 - 手機版 START */
/* =============================================================== */
.home-top-left-carousel-container {
position: static; /* **關鍵修改**：取消 sticky 效果，讓它在文檔流中正常顯示 */
width: 96%; /* 寬度為 100% 減去左右各 2% 的間距 (100% - 左右 4% = 96%) */
left: unset; /* 取消 PC 版的 left 定位 */
top: unset; /* 取消 PC 版的 top 定位 */
transform: unset; /* 取消 PC 版的 transform 居中 */
margin: 20px auto; /* 設置上下的間距 (20px)，左右自動置中 */
max-width: 100%; /* 確保在手機上不會有超出寬度的問題 */
box-shadow: 0 0 20px rgba(128, 0, 128, 0.8), 0 0 20px rgba(128, 0, 128, 0.6);
/* 保持 height: auto; 和 aspect-ratio: 80 / 30; 以維持圖片比例 */
}
/* 確保輪播內圖片正確縮放 */
.carousel-slide img {
width: 100%;
height: auto; /* 確保高度根據寬度等比例縮放 */
object-fit: cover;
}
/* 輪播控制按鈕 (左右箭頭) - 手機版微調 */
.carousel-control {
font-size: 1.5em; /* 手機版按鈕字體可以小一點 */
width: 40px; /* 保持原寬高，確保按鈕有足夠的觸控區域 */
height: 40px;
left: 5px; /* 將左右按鈕調整為距離邊緣 5px */
right: 5px;
}
/* 輪播指示器 (底部的點點) - 手機版微調 */
.carousel-indicators {
bottom: 10px;
gap: 5px;
}
.indicator-dot {
width: 20px !important;
height: 4px !important;
}
.indicator-dot.active {
width: 25px;
}
}
/* =============================================================== */
/* 左上角輪播區塊樣式 END */
/* =============================================================== */
/* ==============================嘗試解決縮放問題OP================================= */
@media (max-width: 750px) and (max-height: 750px){
.home-top-left-carousel-container {
margin-left: 2%!important;
max-width: 100%!important;
}
}
@media (max-width: 650px) and (max-height: 650px){
.home-top-left-carousel-container {
margin-left: 2%!important;
max-width: 100%!important;
}
}
@media (max-width: 800px) and (max-height: 300px){
.home-top-left-carousel-container {
margin-left: 2%!important;
max-width: 100%!important;
}
}
@media (max-width: 550px) and (max-height: 550px){
.home-top-left-carousel-container {
margin-left: 2%!important;
max-width: 100%!important;
}
}
/* ==175%== */
@media (max-width: 1550px) and (max-height: 820px) {
.nav-links ul li a img {
width: auto;
max-height: 70px;
max-width: 100%;
vertical-align: middle;
}
.home-top-left-carousel-container {
margin-left:10%;
max-width: 40%;
}
}
/* ==175%== */
@media (max-width: 1097px) and (max-height: 550px) {
.main-visual-container-pc img {
margin-right: -5%;
margin-top: 15%;
max-width: 100%;
min-width: 100vw;
min-height: 100vh;
}
.nav-links ul li a img {
width: auto;
max-height: 50px;
max-width: 100%;
vertical-align: middle;
}
.home-top-left-carousel-container {
margin-left:10%;
max-width: 40%;
}
}
/* ==150%== */
@media (max-width: 1280px) and (max-height: 643px) {
.main-visual-container-pc img {
margin-right: -5%;
margin-top: 15%;
max-width: 100%;
min-width: 90vw;
min-height: 100vh;
}
.nav-links ul li a img {
width: auto;
max-height: 60px;
max-width: 100%;
vertical-align: middle;
}
.home-top-left-carousel-container {
margin-left:10%;
max-width: 42%;
}
}
/* ==125%== */
@media (max-width: 1536px) and (max-height: 600px) {
.main-visual-container-pc img {
margin-right: -5%;
margin-top: 15%;
max-width: 100%;
min-width: 90vw;
min-height: 100vh;
}
.nav-links ul li a img {
width: auto;
max-height: 70px;
max-width: 100%;
vertical-align: middle;
}
.home-top-left-carousel-container {
margin-left:10%;
max-width: 40%;
}
}
/* ==110%== */
@media (max-width: 1745px) and (max-height: 600px) {
.main-visual-container-pc img {
margin-right: -5%;
margin-top: 15%;
max-width: 100%;
min-width: 90vw;
min-height: 100vh;
}
.nav-links ul li a img {
width: auto;
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
.home-top-left-carousel-container {
margin-left:2%;
max-width: 45%;
}
}
/* ==============================嘗試解決縮放問題ED================================= */
/* ----------------------2025.07.10-home-pc-new-content 淡入效果---------------------- */
.home-pc-new-content {
opacity: 0; /* 初始完全透明 */
transition: opacity 1s ease-out; /* 1秒的淡入動畫 */
transition-delay: 1s;/* 新增：延遲 0.5 秒才開始淡入 */
pointer-events: none; /* 當透明時，不阻擋鼠標事件 */
visibility: hidden; /* 確保元素在透明時不佔用空間，並且初始不可見 */
/* 保持您原有的其他樣式，例如 display: block; 等佈局相關的 */
}
/* 當 home-pc-new-content 元素被 Intersection Observer 監測到時，添加此類別 */
.home-pc-new-content.is-visible {
opacity: 1; /* 完全不透明，顯示出來 */
pointer-events: auto; /* 恢復鼠標事件 */
visibility: visible; /* 恢復可見 */
}
/* ================================================================= */
/* 全站頁尾樣式 (Footer Styles) */
/* ================================================================= */
#main-footer {
width: 100%;
color: #f0f0f0; /* 頁尾預設文字顏色，但會被各 block 內部顏色覆蓋 */
text-align: center; /* 預設文字置中對齊 */
box-sizing: border-box; /* 確保 padding 不影響寬度 */
}
.footer-content {
margin: 0 auto; /* 水平置中 */
display: flex;
flex-direction: column; /* 讓內部的三個區塊垂直堆疊 */
box-sizing: border-box; /* 確保 padding 不影響寬度 */
}
/* 每個頁尾區塊的通用樣式 */
.footer-block {
width: 100%; /* 確保每個區塊佔滿其父容器的寬度 */
box-sizing: border-box; /* 確保 padding 不影響寬度 */
border-radius: 8px; /* 輕微圓角 */
}
/* 頁尾區塊內部內容容器樣式 */
.footer-block-inner-content {
max-width: 950px; /* **已更新：預設內部內容的最大寬度調整為 950px** */
margin: 0 auto; /* 內部內容水平置中 */
padding: 30px; /* 預設區塊內部內容的內邊距，會被特定 block 覆蓋 */
box-sizing: border-box; /* 確保 padding 不影響寬度 */
}
/* 頁尾區塊 1 的特定樣式 */
.footer-block-1 {
background-color: #fff; /* 區塊 1 的背景色 */
color: #000; /* 區塊 1 的文字顏色設定為 #000 */
/* padding 和 border-bottom 已移除 */
border-radius: 0; /* 移除圓角 */
}
/* 頁尾區塊 1 內部容器最大寬度調整與佈局 */
.footer-block-1 .footer-block-inner-content {
max-width: 1000px; /* 調整為 1000px */
display: flex; /* 啟用 Flexbox 佈局 */
align-items: center; /* 垂直置中對齊 */
justify-content: center; /* 水平置中所有內容 */
gap: 30px; /* 左右兩個 div 之間的間距 */
/* flex-wrap: wrap; 已移除，強制並排在桌面版 */
padding: 40px; /* 為 footer-block-1 的內容增加內邊距 */
}
/* 頁尾區塊 1 左側 LOGO 容器樣式 (新) */
.footer-block-1 .footer-logo-container {
flex-shrink: 0; /* 防止 LOGO 區塊收縮 */
}
/* 頁尾區塊 1 左側 LOGO 圖片樣式 (新) */
.footer-block-1 .footer-logo-container img {
width: 100%; /* 寬度 100% */
max-width: 200px; /* 最大寬度 200px */
height: auto; /* 保持圖片比例 */
display: block; /* 確保圖片可以設定寬高 */
margin: 0 auto; /* 在 flex 項目中，如果單獨佔一行或空間足夠時，可以輔助置中 */
}
/* 頁尾區塊 1 右側文字內容容器樣式 (新) */
.footer-block-1 .footer-text-content {
flex-grow: 1; /* 允許右側區塊填滿剩餘空間 */
text-align: left; /* 文字靠左對齊 */
}
/* 頁尾區塊 1 內的標題樣式 (新) */
.footer-block-1 .footer-title {
color: #000; /* 標題文字顏色 */
font-size: 2em; /* 標題字體大小調整為 2em */
font-weight: bold; /* 標題字體加粗 */
margin-bottom: 10px; /* 標題與下方內容的間距 */
}
/* 頁尾區塊 1 內的分隔線樣式 (新) */
.footer-block-1 .footer-divider {
height: 2px; /* 線條高度 */
background-color: #000; /* 線條顏色 */
width: 100% !important; /* 線條寬度，強制 100% */
margin: 5px 0 10px 0; /* 上下間距較小，靠左對齊，因父層已 text-align: left */
}
/* 頁尾區塊 1 內的描述文字樣式 (新) */
.footer-block-1 .footer-description {
color: #000; /* 描述文字顏色 */
font-size: 1em; /* 描述文字大小 */
line-height: 1.5; /* 行高調整為 1.5 */
margin-top: 10px; /* 與分隔線的間距 */
}
/* 確保描述文字內的 span 元素也繼承顏色 */
.footer-block-1 .footer-description span {
color: #000;
}
/* 頁尾區塊 2 的特定樣式 */
.footer-block-2 {
background-color: #dddddd; /* 區塊 2 的背景色 */
}
/* 頁尾區塊 2 內部內容的內邊距 */
.footer-block-2 .footer-block-inner-content {
max-width: 1000px; /* 調整為 1000px */
display: flex;
flex-wrap: wrap; /* 允許換行 */
justify-content: center; /* 左右元素一起水平置中 */
align-items: center; /* 垂直置中 */
gap: 20px; /* 左右元素間距 */
}
.footer-block-2 .footer-text-left {
flex-shrink: 0; /* 防止文字區塊在空間不足時收縮 */
text-align: left; /* 文字靠左對齊 */
color: #6b6262; /* 區塊 2 文字顏色 */
font-size: 1.6em; /* 文字大小調整為 1.6em */
font-weight: bold; /* 增加粗體 */
line-height: 1.6;
}
/* 頁尾區塊 3 的特定樣式 */
.footer-block-3 {
background-color: #000000; /* 區塊 3 的背景色 */
}
/* 頁尾區塊 3 內部內容的內邊距 */
.footer-block-3 .footer-block-inner-content {
padding: 15px; /* 區塊 3 內部內容的預設內邊距改為 10px */
display: flex;
flex-wrap: wrap; /* 允許換行 */
justify-content: space-between; /* 左右元素靠兩邊對齊 */
color: #fff; /* 區塊 3 文字顏色 */
font-size: 0.9em; /* 區塊 3 文字較小 */
}
.footer-block-3 .footer-copyright-left {
display: flex;
align-items: center; /* 確保內部文字和圖片垂直置中 */
gap: 8px; /* 文字與 icon 之間的間距 */
white-space: nowrap; /* 防止「官方網站：」換行 */
}
.footer-block-3 .footer-copyright-left span {
margin-top: -3%;
line-height: 1; /* 調整行高，讓文字更精確地垂直置中 */
}
.footer-block-3 .footer-copyright-right {
text-align: right; /* 版權文字靠右對齊 */
flex-shrink: 0; /* 防止版權文字壓縮 */
}
.footer-block-3 .footer-copyright-right span {
line-height: 1; /* 調整行高，讓文字更精確地垂直置中 */
}
/* 頁尾內部 h3 標題樣式 (針對沒有被特定區塊覆蓋的，現在 footer-block-1 已有自己的標題樣式) */
.footer-block h3 {
color: #fff; /* 標題文字顏色 */
margin-bottom: 15px; /* 標題與下方內容的間距 */
font-size: 1.6em;
}
/* 頁尾內部 p 段落文字樣式 (針對沒有被特定區塊覆蓋的，現在 footer-block-1 已有自己的描述文字樣式) */
.footer-block p {
font-size: 1em;
line-height: 1.8;
margin-bottom: 10px;
}
/* 針對存放 logo 的容器進行彈性佈局 */
.partner-logos-3 {
display: flex;
flex-wrap: wrap; /* 允許 logo 圖片換行 */
justify-content: center; /* 水平置中所有 logo */
align-items: center;
gap: 20px; /* logo 圖片之間的間距 */
margin-top: 0;
}
/* 針對頁尾內部的 logo 圖片進行樣式設定 */
.footer-block img {
width: 100%; /* 確保圖片寬度適應容器 */
height: auto; /* 保持圖片原始比例 */
vertical-align: middle; /* 消除圖片底部可能有的空隙，並有助於與文字對齊 */
}
/* footer-3-logo-x.png 這系列的圖片 */
.partner-logos-3 img {
max-width: 137px; /* 設定 footer-block-2 logo 的最大寬度 */
}
/* footer-4-logo-x.png 這系列的圖片 */
.footer-copyright-left img {
max-width: 30px; /* 設定 footer-block-3 小 icon 的最大寬度調整為 30px */
}
/* ================================================================= */
/* 頁尾手機版適應 (Media Queries for Footer) */
/* ================================================================= */
@media (max-width: 768px) { /* 當螢幕寬度小於或等於 768px 時應用 */
#main-footer {
padding: 10px 0; /* 手機版頁尾上下內邊距可以減少 */
}
.footer-content {
/* 手機版移除 gap 和 padding */
/* gap: 15px; */
/* padding: 0 15px; */
}
/* 手機版時，所有區塊都應該佔滿可用寬度，並自動置中 */
.footer-block-1,
.footer-block-2,
.footer-block-3 {
width: 100%;
max-width: 100%; /* 確保 block 本身佔滿寬度 */
margin: 0 auto; /* 保持置中 */
}
/* 手機版內部內容的調整 */
.footer-block-inner-content {
max-width: 100%; /* 內部內容在手機版也佔滿可用寬度 */
padding: 20px; /* 手機版區塊內部內容的內邊距 */
}
/* 針對 footer-block-3 的手機版 padding 覆蓋 */
.footer-block-3 .footer-block-inner-content {
padding: 10px; /* 手機版也維持 10px */
/* gap: 0; 此處已移除 gap */
}
/* 頁尾區塊 1 的內部容器最大寬度調整 (手機版) */
.footer-block-1 .footer-block-inner-content {
max-width: 100%; /* 手機版維持 100% */
flex-direction: column; /* 手機版改為垂直堆疊 */
gap: 20px; /* 垂直間距 */
padding: 30px; /* 手機版內邊距調整 */
flex-wrap: wrap; /* 手機版允許換行 */
}
/* 手機版 footer-block-1 內的文字內容置中 */
.footer-block-1 .footer-text-content {
text-align: center; /* 手機版文字置中對齊 */
}
/* 頁尾區塊 2 的內部容器最大寬度調整 (手機版) */
.footer-block-2 .footer-block-inner-content {
max-width: 100%; /* 手機版維持 100% */
}
/* 手機版標題和段落字體大小 */
.footer-block h3,
.footer-block-1 .footer-title { /* 確保 footer-block-1 的標題也適用手機版縮小 */
font-size: 1.4em; /* 手機版標題字體縮小 */
font-weight: bold; /* 手機版也保持粗體 */
margin-bottom: 10px;
}
.footer-block p,
.footer-block-1 .footer-description { /* 確保 footer-block-1 的描述也適用手機版縮小 */
font-size: 0.95em; /* 手機版段落字體縮小 */
}
/* 手機版 footer-block-2 的佈局調整 */
.footer-block-2 .footer-block-inner-content {
flex-direction: column; /* 手機版改為垂直堆疊 */
text-align: center; /* 文字置中 */
gap: 15px; /* 垂直間距 */
}
.footer-block-2 .footer-text-left {
text-align: center; /* 文字在手機版置中 */
font-size: 1.4em; /* 手機版文字大小 */
}
.partner-logos-3 {
gap: 10px; /* 手機版 logo 間距 */
}
/* 手機版 footer-block-3 的佈局調整 */
.footer-block-3 .footer-block-inner-content {
flex-direction: column; /* 手機版改為垂直堆疊 */
/* gap: 10px; 此處已移除 gap */
}
.footer-block-3 .footer-copyright-left {
text-align: center; /* 文字在手機版置中 */
justify-content: center; /* Flex items 置中 */
gap: 10px; /* 保留 gap: 10px */
}
.footer-block-3 .footer-copyright-left span {
margin-top: -0.8%; /* 手機版調整 margin-top */
}
.footer-block-3 .footer-copyright-right {
text-align: center; /* 文字在手機版置中 */
}
/* 手機版 footer-block-2 logo 尺寸 */
.partner-logos-3 img {
max-width: 130px; /* 手機版 logo 圖片調整為 130px (基礎) */
}
/* 手機版 footer-block-3 logo 尺寸 */
.footer-copyright-left img {
max-width: 30px; /* 手機版小 icon 圖片維持 30px */
}
/* 更細緻的 .partner-logos-3 img 手機版尺寸調整 */
@media (max-width: 450px) {
.partner-logos-3 img {
max-width: 110px; /* 寬450時變110px */
}
}
@media (max-width: 404px) {
.partner-logos-3 img {
max-width: 90px; /* 寬404時變90px */
}
}
@media (max-width: 344px) {
.partner-logos-3 img {
max-width: 80px; /* 寬344時變80px */
}
}
}
/* --- 新增：針對 PC 版置底導航列的底部空間調整 --- */
@media (min-width: 769px) {
/* 為 footer-block-3 的內部內容增加底部內邊距，以預留固定導航列的空間 */
.footer-block-3 .footer-block-inner-content {
padding-bottom: 7.5%; /* 調整為 6% 以適合不同寬度 */
}
}
@media (max-width: 768px) {
/* 為 footer-block-3 的內部內容增加底部內邊距，以預留固定導航列的空間 */
.footer-block-3 .footer-block-inner-content {
padding-bottom: 3%; /* 調整為 6% 以適合不同寬度 */
}
}
/* ================================================================= */
/* Page 7 純文字部分樣式 */
/* ================================================================= */
.page-7 .page-7-text-wrapper {
width: 100%;
max-width: 1100px; /* 容器最大寬度 */
margin: 30px auto 0 auto; /* 上方間距，水平置中，下方無間距 */
padding: 0 20px; /* 左右內邊距，避免文字貼邊 */
box-sizing: border-box; /* 確保 padding 不影響寬度 */
color: #fff; /* 文字顏色設為淺灰色，與黑色背景對比 */
text-align: justify; /* 文字左右對齊 */
/* 確保內部的 p 元素可以繼承這些樣式 */
}
.page-7 .page-7-text-wrapper p {
background-color: rgba(0, 0, 0, 0.5); /* 黑色，70% 不透明度 */
font-size: 1.5em; /* 基礎字體大小，會在媒體查詢中調整 */
font-weight: bold;
line-height: 1.8;
/* 已加強：紫色光暈效果 */
text-shadow: 0 0 8px rgba(128, 0, 128, 0.8), 0 0 15px rgba(128, 0, 128, 0.6);
}
/* 針對 1920px 寬度的字體大小 */
@media (min-width: 769px) {
.page-7 .page-7-text-wrapper p {
font-size: 2.2em!important; /* 1920px 時的字體大小 */
line-height: 1.5!important;
}
}
/* 手機版調整 (在 768px 以下應用) */
@media (max-width: 768px) {
.page-7 .page-7-text-wrapper {
margin-top: 20px; /* 手機版上方間距減少 */
padding: 0 15px; /* 手機版左右內邊距減少 */
text-align: left; /* 手機版純文字靠左對齊，justify 在小螢幕可能效果不佳 */
}
.page-7 .page-7-text-wrapper p {
font-size: 1.5em!important; /* 手機版字體大小調整 */
line-height: 1.6;
text-shadow: 0 0 3px rgba(128, 0, 128, 0.4); /* 手機版光暈效果減弱 */
}
}
#page-7 .content p{max-width: 1100px;}
/* ================================================================= */
/* Page 7 專屬樣式 (覆蓋或追加 .full-screen-section:not(#home) 的樣式) */
/* ================================================================= */
.full-screen-section.page-7:not(#home) {
min-height: 50vh !important;
}
/* ================================================================= */
/* Home Page 輪播下方內容樣式 (最終調整 - 響應式佈局) */
/* ================================================================= */
/* 確保 #home 區塊設定相對定位，以便內部元素進行絕對定位 */
#home {
position: relative;
/* 其他 #home 樣式請保持不變或原樣 */
}
/* 最外層的容器，用於設定最大寬度和左對齊 */
.home-bottom-left-wrapper {
position: absolute;
bottom: var(--navbar-height, 60px); /* 距離底部導航列的高度，使用 CSS 變數 */
left: 0; /* 靠左對齊 */
width: 100%; /* 確保在小於 max-width 時佔滿可用寬度 */
max-width: 1050px; /* 預設最大寬度，將被媒體查詢覆蓋 */
z-index: 100; /* 確保它在最上層 */
/* 淡入動畫 */
opacity: 0; /* 初始狀態為透明 */
animation: fadeIn 1s ease-out forwards; /* 1秒淡入，結束時保持可見 */
animation-delay: 0.5s; /* 動畫延遲 0.5 秒開始 */
}
/* 整個左下角內容的主容器 (現在是 wrapper 的子元素) */
.home-bottom-left-content {
width: 100%; /* 佔滿其父容器 (wrapper) 的寬度 */
/* 移除 padding-left 和 padding-right */
box-sizing: border-box;
margin-bottom: 2%; /* 預設底部外邊距，將被媒體查詢覆蓋 */
margin-left: 0; /* 預設左外邊距，將被媒體查詢覆蓋 */
}
/* LOGO 圖片容器 (1號 div) - 預設置中 */
.home-bottom-left-logo {
text-align: center; /* 預設圖片水平置中 */
margin-bottom: 5px;
pointer-events: none;
}
/* LOGO 圖片本身 - 預設置中 */
.home-bottom-left-logo img {
width: 100%;
max-width: 820px; /* 預設最大寬度，將被媒體查詢覆蓋 */
height: auto;
display: block;
}
@media (min-width: 1701px) {.home-bottom-left-logo img {margin: 0 auto; /* 預設圖片水平置中 */}}
/* 額外圖片和加入按鈕的容器 (2號 div) */
.home-bottom-left-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 預設水平置中，將被媒體查詢覆蓋 */
width: 100%;
}
/* 額外圖片容器 (2-1號 div) */
.home-bottom-left-extra-image {
flex-shrink: 0;
}
/* 額外圖片本身 */
.home-bottom-left-extra-image img {
width: 100%;
max-width: 640px; /* 預設最大寬度，將被媒體查詢覆蓋 */
height: auto;
display: block;
}
/* 加入按鈕容器 (2-2號 div) */
.home-bottom-left-join-button {
flex-shrink: 0;
}
/* 加入按鈕圖片本身 */
.home-bottom-left-join-button img {
width: 100%;
max-width: 400px; /* 預設最大寬度，將被媒體查詢覆蓋 */
height: auto;
display: block;
}
/* ================================================================= */
/* 動畫定義 */
/* ================================================================= */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ================================================================= */
/* 響應式調整 (從大到小) */
/* ================================================================= */
/* 寬度 >= 1501px */
@media (min-width: 1501px) {
.home-bottom-left-content {
margin-left: 0%; /* 靠左邊距 5% */
margin-bottom: 2%; /* 底部間距 2% */
}
}
/* 寬度 <= 1700px */
@media (max-width: 1700px) {
.home-bottom-left-wrapper {
max-width: 1050px; /* 最大寬度 950px */
}
.home-bottom-left-logo img {
max-width: 800px; /* Logo 最大寬度 700px */
}
.home-bottom-left-extra-image img {
max-width: 600px; /* 額外圖片最大寬度 600px */
}
.home-bottom-left-join-button img {
max-width: 350px; /* 加入按鈕最大寬度 350px */
}
.home-bottom-left-content {
margin-left: 0%; /* 左邊距 3% */
margin-bottom: 2%; /* 底部間距 2% (確保一致) */
}
/* 在此範圍內，Logo 和按鈕群預設仍然置中 */
.home-bottom-left-logo {
text-align: center;
margin-left: 3%;
}
.home-bottom-left-logo img {
}
.home-bottom-left-buttons {
justify-content: center;
}
}
/* 寬度 <= 1500px */
@media (max-width: 1500px) {
.home-bottom-left-wrapper {
max-width: 1050px; /* 最大寬度 950px */
}
.home-bottom-left-logo img {
max-width: 700px; /* Logo 最大寬度 700px */
}
.home-bottom-left-extra-image img {
max-width: 600px; /* 額外圖片最大寬度 600px */
}
.home-bottom-left-join-button img {
max-width: 350px; /* 加入按鈕最大寬度 350px */
}
.home-bottom-left-content {
margin-left: 0%; /* 左邊距 3% */
margin-bottom: 2%; /* 底部間距 2% (確保一致) */
}
/* 在此範圍內，Logo 和按鈕群預設仍然置中 */
.home-bottom-left-logo {
text-align: center;
}
.home-bottom-left-logo img {
}
.home-bottom-left-buttons {
justify-content: left;
}
}
/* 寬度 <= 1400px */
@media (max-width: 1400px) {
.home-bottom-left-wrapper {
max-width: 950px; /* 仍為 950px */
}
.home-bottom-left-logo {
margin-left: 0%;
text-align: left; /* Logo 改為靠左對齊 */
}
.home-bottom-left-logo img {
max-width: 700px;
margin: 0; /* 移除 auto margin */
margin-left: 0%; /* 靠左對齊 5% */
}
.home-bottom-left-extra-image img {
max-width: 500px; /* 額外圖片最大寬度 500px */
}
.home-bottom-left-join-button img {
max-width: 300px; /* 加入按鈕最大寬度 300px */
}
.home-bottom-left-content {
margin-left: 2%; /* 左邊距 2% */
margin-bottom: 7%; /* 底部間距變為 7% */
}
.home-bottom-left-buttons {
justify-content: left; /* 按鈕群改為靠左對齊 */
}
}
/* 寬度 <= 1200px */
@media (max-width: 1200px) {
.home-bottom-left-wrapper {
max-width: 650px; /* 最大寬度 650px */
}
.home-bottom-left-buttons {
justify-content: center; /* 按鈕群恢復置中 (上下排列) */
}
.home-bottom-left-logo {
text-align: center; /* Logo 恢復置中 */
}
.home-bottom-left-logo img {
margin: 0 auto; /* 恢復 auto margin */
margin-left: 0; /* 移除左邊距 */
max-width: 100%; /* 讓它能適應容器，不限制死 */
}
.home-bottom-left-extra-image img {
max-width: 100%; /* 額外圖片最大寬度適應容器 */
}
.home-bottom-left-join-button img {
max-width: 450px; /* 加入按鈕最大寬度 450px */
}
.home-bottom-left-content {
margin-left: 0; /* 移除左邊距 */
margin-bottom: 2%; /* 底部間距 2% */
}
}
/* 寬度 <= 1100px */
@media (max-width: 1100px) {
.home-bottom-left-content {
margin-left: 2%; /* 左邊距 2% */
margin-bottom: 2%; /* 底部間距 2% */
}
.home-bottom-left-wrapper {
max-width: 550px; /* 最大寬度 550px */
}
.home-bottom-left-extra-image img {
max-width: 550px; /* 額外圖片最大寬度 550px */
}
}
/* 寬度 <= 900px */
@media (max-width: 900px) {
.home-bottom-left-content {
margin-left: 2%; /* 左邊距 2% */
}
.home-bottom-left-wrapper {
max-width: 500px; /* 最大寬度 500px */
}
.home-bottom-left-extra-image img {
max-width: 500px; /* 額外圖片最大寬度 500px */
}
}
/* 手機版隱藏整個 home-bottom-left-wrapper 區塊 */
@media (max-width: 768px) {
.home-bottom-left-wrapper {
display: none !important;
}
}
/* 確保 PC 版仍然顯示 (在 769px 以上) */
@media (min-width: 769px) {
.home-bottom-left-wrapper {
display: block !important;
}
}
/* ================================================================= */
/* 加入按鈕 Hover 效果 (使用 img 標籤直接控制) */
/* ================================================================= */
/* 包裹加入按鈕的超連結本身 */
.home-bottom-left-join-button a {
display: block; /* 讓 a 標籤變成塊級元素，才能包含圖片並控制寬度 */
width: 100%; /* 讓 a 標籤佔滿父容器的寬度 */
max-width: 400px; /* 根據您的圖片原始尺寸設定最大寬度 */
height: auto; /* 讓高度自動，由圖片內容撐開 */
position: relative; /* 為圖片的絕對定位提供參考點 */
overflow: hidden; /* 確保內容不溢出 */
}
/* 預設顯示的圖片 */
.home-bottom-left-join-button a .join-button-default {
display: block; /* 確保圖片顯示 */
width: 100%; /* 圖片寬度填滿 a 標籤 */
height: auto; /* 高度自動，保持圖片比例 */
transition: opacity 0.3s ease; /* 淡入淡出過渡效果 */
opacity: 1; /* 預設顯示 */
}
/* 懸停時顯示的圖片 (預設隱藏) */
.home-bottom-left-join-button a .join-button-hover {
display: block; /* 確保圖片是塊級元素 */
width: 100%; /* 圖片寬度填滿 a 標籤 */
height: auto; /* 高度自動，保持圖片比例 */
position: absolute; /* 絕對定位，與預設圖片重疊 */
top: 0;
left: 0;
transition: opacity 0.3s ease; /* 淡入淡出過渡效果 */
opacity: 0; /* 預設隱藏 */
}
/* 當滑鼠懸停在 a 標籤上時 */
.home-bottom-left-join-button a:hover .join-button-default {
opacity: 0; /* 預設圖片淡出隱藏 */
}
.home-bottom-left-join-button a:hover .join-button-hover {
opacity: 1; /* 懸停圖片淡入顯示 */
}
/* ==============================嘗試解決縮放問題二代OP================================= */
/* ==175%實際測試根本125%？！== */
@media (max-width: 1550px) and (max-height: 820px) {
.home-bottom-left-content {margin-left: 5%;margin-bottom: 2%;}
.home-bottom-left-logo {text-align: center;margin-bottom: 5px;}
.home-bottom-left-wrapper{max-width: 1050px;}
.home-bottom-left-logo img{max-width: 700px;}
.home-bottom-left-extra-image img{max-width: 500px;}
.home-bottom-left-join-button img{max-width: 300px;}
}
/* ==175%== */
@media (max-width: 1097px) and (max-height: 550px) {
.home-bottom-left-content {margin-left: 2%;margin-bottom: 2%;}
.home-bottom-left-logo {text-align: center;margin-bottom: 5px;}
.home-bottom-left-wrapper{max-width: 1050px;}
.home-bottom-left-logo img{max-width: 700px;}
.home-bottom-left-extra-image img{max-width: 500px;}
.home-bottom-left-join-button img{max-width: 300px;}
}
/* ==150%，真正的150%== */
@media (max-width: 1280px) and (max-height: 643px) {
.home-bottom-left-content {margin-left: 2%;margin-bottom: 2%;}
.home-bottom-left-logo {text-align: center;margin-bottom: 5px;}
.home-bottom-left-wrapper{max-width: 800px;}
.home-bottom-left-logo img{max-width: 600px;}
.home-bottom-left-extra-image img{max-width: 500px;}
.home-bottom-left-join-button img{max-width: 300px;}
}
/* ==125%== */
@media (max-width: 1536px) and (max-height: 600px) {
.home-bottom-left-content {margin-left: 2%;margin-bottom: 2%;}
.home-bottom-left-logo {text-align: center;margin-bottom: 5px;}
.home-bottom-left-wrapper{max-width: 1050px;}
.home-bottom-left-logo img{max-width: 700px;}
.home-bottom-left-extra-image img{max-width: 500px;}
.home-bottom-left-join-button img{max-width: 300px;}
}
/* ==110%==(有時卻是175%??) */
@media (max-width: 1745px) and (max-height: 600px) {
.home-bottom-left-content {margin-left: 2%;margin-bottom: 2%;}
.home-bottom-left-logo {text-align: center;margin-bottom: 5px;}
.home-bottom-left-wrapper{max-width: 1050px;}
.home-bottom-left-logo img{max-width: 500px;}
.home-bottom-left-extra-image img{max-width: 300px;}
.home-bottom-left-join-button img{max-width: 180px;}
.home-bottom-left-buttons {justify-content: left;}
}
/* ==============================嘗試解決縮放問題二代ED================================= */
@media (min-width: 769px) {.home-top-left-carousel-container{display:block;} .home-top-left-carousel-container-2{display:none;}}
@media (max-width: 768px) {.home-top-left-carousel-container{display:none;} .home-top-left-carousel-container-2{display:block;}}
/* ==============================手機版的新輪播區-2 OP================================= */
/* 手機版的新輪播區-2 OP - (輪播主容器) */
.home-top-left-carousel-container-2 {
position: sticky; /* 從 absolute 改為 sticky */
top: 0; /* 設定為 0，表示當它滾動到瀏覽器視窗頂部時會黏住 */
margin-left: 2%;
margin-right: 2%;
width: 100%;
margin-top: 2%;
max-width: 800px;
height: auto;
overflow: hidden; /* **這個非常重要，用於隱藏超出的部分** */
border-radius: 10px;
box-shadow: 0 0 20px rgba(128, 0, 128, 0.8), 0 0 20px rgba(128, 0, 128, 0.6);
aspect-ratio: 80 / 30; /* 保持圖片比例 */
background-color: #000;
position: relative; /* 添加此行，以便內部絕對定位的按鈕和指示器相對它定位 */
touch-action: none; /* NEW: 完全禁用瀏覽器對此元素的觸摸行為，交由JS處理 */
}
/* 輪播軌道 (mobile-swipe-carousel-track) */
.mobile-swipe-carousel-track {
display: flex; /* 使用 Flexbox 讓圖片水平排列 */
/* REMOVE width: 100%; 讓它的寬度由其子元素決定 */
height: 100%; /* 確保軌道高度填充容器 */
transition: transform 0.5s ease-in-out; /* 平滑的過渡效果，用於圖片切換 */
}
/* 每張輪播幻燈片 (carousel-slide) */
.mobile-swipe-carousel-track .carousel-slide {
flex-shrink: 0; /* **關鍵：防止幻燈片在 Flex 容器中縮小** */
width: 100%; /* **關鍵：每張幻燈片佔用其父容器（即 .home-top-left-carousel-container-2）的 100% 寬度** */
height: 100%; /* 確保幻燈片高度填充容器 */
/* object-fit: cover; 圖片本身的樣式已在 img 設置 */
}
/* 確保輪播中的圖片完全填充其容器 (carousel-slide) */
.home-top-left-carousel-container-2 .carousel-slide img {
width: 100%; /* 確保圖片寬度佔滿父容器 */
height: 100%; /* 確保圖片高度佔滿父容器 */
object-fit: cover; /* 確保圖片填充，可能會裁剪 */
display: block; /* 移除圖片底部多餘空間 */
}
/* 手機版輪播導航按鈕樣式 */
.mobile-carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
z-index: 10;
font-size: 1.5em;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.mobile-carousel-button:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.mobile-carousel-button.prev-button {
left: 0px;
}
.mobile-carousel-button.next-button {
right: 0px;
}
/* 手機版輪播指示器樣式 (小紅點) */
.mobile-carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px; /* 小點之間的間距 */
z-index: 10;
}
.mobile-carousel-indicator {
width: 30px!important; /* 調整寬度，使其呈現長方形 */
height: 5px!important; /* 調整高度，使其呈現扁平 */
background-color: rgba(255, 255, 255, 0.5); /* 預設為半透明白色 */
border-radius: 0px!important; /* 稍微帶點圓角，看起來更柔和 */
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.mobile-carousel-indicator.active {
background-color: #ff0000; /* 選中的小點為紅色 */
transform: scale(1.2); /* 選中的小點稍微放大 */
}
/* ==============================手機版的新輪播區-2 ED================================= */