body, html {
margin: 0;
padding: 0;
height: 100%; /* 确保body和html占满整个视口 */
}
body {
padding-top: 80px;
font-family: 'M PLUS 1p', sans-serif;
}
/* 針對中文文字使用 M PLUS 1p 字體 */
body * {
font-family: 'M PLUS 1p', sans-serif;
}
/* 使用語言標籤來選擇性地套用 M PLUS 1p 給中文 */
body:lang(zh), html:lang(zh) {
font-family: 'M PLUS 1p', sans-serif;
}
/* 電腦版（預設） */
.fullscreen-img {
width: 100%; /* 讓圖片寬度填滿父容器 */
height: 600px; /* 設定圖片高度 */
object-fit: cover; /* 讓圖片覆蓋容器，保持比例並裁切 */
display: block; /* 確保圖片顯示為塊級元素 */
}
/* 手機版 */
@media (max-width: 991.98px) {
.fullscreen-img {
height: 250px; /* 手機版上縮小高度 */
object-fit: cover; /* 保持圖片覆蓋容器，保持比例並裁切 */
}
}
/* 可選：若你不希望裁切圖片，使用 contain */
@media (max-width: 991.98px) {
.fullscreen-img {
height: auto; /* 讓圖片高度自動調整 */
object-fit: contain; /* 確保圖片完全顯示，不裁切 */
}
}
.logo {
width: 85px;
height: 85px;
object-fit: contain;
padding-top: 7px;
}
@media (max-width: 991.98px) {
.logo {
width: 70px;
height: 70px;
padding-top: 0px;
}
}
@media (max-width: 768.98px) {
.logo {
width: 70px;
height: 70px;
padding-top: 3px;
}
}
.carousel-item img {
height: 800px; /* 設置圖片高度為800px */
object-fit: cover; /* 確保圖片覆蓋整個區域 */
clip-path: polygon(0 0, 100% 0, 100% 87%, 50% 94%, 0 89%, 0% 50%);
pointer-events: none; 
}
.carousel-control-prev,
.carousel-control-next {
width: 5em; /* 設置箭頭寬度 */
height: 5em; /* 設置箭頭高度 */
display: flex; /* 使用 flexbox 對齊圖標 */
align-items: center; /* 垂直居中對齊 */
justify-content: center; /* 水平居中對齊 */
position: absolute; /* 絕對定位 */
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 使其真正居中 */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: none; /* 隱藏默認箭頭圖標 */
}
.carousel-control-prev i,
.carousel-control-next i {
color: white; /* 設置箭頭顏色為白色 */
font-size: 3em; /* 增大圖標大小 */
}
.carousel-caption {
position: absolute; /* 絕對定位 */
top: 50%; /* 距離頂部50% */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 使其真正居中 */
color: white; /* 文字顏色為白色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 添加陰影效果 */
white-space: nowrap; /* 防止文字換行 */
text-align: center; /* 文字置中 */
}
.carousel-caption h5 {
font-size: 3em; /* 增大字體大小 */
font-weight: bold; /* 設置字體為粗體 */
margin: 0; /* 去掉外邊距 */
animation: flyInH5 1s forwards; /* 添加飛入動畫效果 */
}
.carousel-caption p {
font-size: 1em; /* 設置段落字體大小 */
margin: 0; /* 去掉外邊距 */
animation: flyInP 1.2s forwards; /* 添加飛入動畫效果，延遲0.2秒 */
}
.carousel-indicators {
bottom: auto !important;         /* 移除預設底部位置 */
left: auto !important;           /* 移除預設置左 */
width: auto !important;          /* 不要讓它占據整個寬度 */
margin: 0 !important;            /* 清除 margin */
}
.carousel-indicators {
position: absolute;
top: 40%;
right: 10%; /* 靠右 */
transform: translateY(-50%);
z-index: 10;
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 20px; /* 可微調間距離圖片右緣 */
pointer-events: none; /* 防止指示器遮擋箭頭點擊，如有需要 */
}
.carousel-indicators li {
width: 14px;
height: 14px;
border: 2px solid white;
background-color: transparent;
border-radius: 50%;
opacity: 0.6;
transition: all 0.3s;
list-style: none;
pointer-events: auto; /* 讓點可以點 */
cursor: pointer;
}
.carousel-indicators li.active {
background-color: #0056a3;
opacity: 1;
}
@keyframes flyInH5 {
from { transform: translate(-50%, 100%); opacity: 0; } /* 從下方進入 */
to { transform: translate(-50%, 0); opacity: 1; } /* 到達最終位置 */
}
@keyframes flyInP {
from { transform: translate(-50%, 50%); opacity: 0; } /* 從中間進入 */
to { transform: translate(-50%, 20%); opacity: 1; } /* 到達最終位置，稍微上移 */
}
@media (max-width: 768px) {
/* 圖片高度縮小並移除 clip-path，避免變形 */
.carousel-item img {
height: 300px;
object-fit: cover;
clip-path: none;
pointer-events: none;
}
/* 手機版：隱藏左右箭頭 */
.carousel-control-prev,
.carousel-control-next {
display: none !important;
}
/* 手機版：標題與文字等比例縮小，維持居中 */
.carousel-caption h5 {
font-size: 1.6em;
line-height: 1.2;
}
.carousel-caption p {
font-size: 0.9em;
line-height: 1.4;
width:200px;
}
/* 調整 caption 整體置中與位置 */
.carousel-caption {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 10px;
white-space: normal; /* 手機允許換行 */
}
/* 調整右側圓點指示器位置 */
.carousel-indicators {
right:1% ;
top: 50%;
}
.carousel-indicators li {
width: 14px;
height: 14px;
pointer-events: auto !important; /* 讓點可以點 */
cursor: pointer;
}
}
.news-item span {
margin-left: -7px; /* 服務項目文字向左移動2px */
}
.about-item span {
margin-left: -5px; /* 服務項目文字向左移動2px */
}
.service-item span {
margin-left: -9px; /* 服務項目文字向左移動2px */
}
.price-item span {
margin-left: -5px; /* 服務項目文字向左移動2px */
}
.content-item span {
margin-left: -5px; /* 服務項目文字向左移動2px */
}
/* 頁首設定 */
.navbar {
background-color: #ffffff !important;
height: 80px;
line-height: 80px;
}
/* 手機版調整圖片大小可選（避免太大） */
@media (max-width: 768px) {
/* 讓導覽列本身更緊湊 */
.navbar {
background-color: #ffffff !important;
padding-top: 0;
padding-bottom: 0;
min-height: 80px;
}
.navbar-brand img
{
width:80px; 
height:80px;
vertical-align: top !important;
object-fit: contain !important;
margin-top: 0 !important; 
padding-top: 5px important;
}
}
/*@media (max-width: 767.98px) {*/
/*  .navbar {*/
/*    background-color: #0056a3 !important;*/
/*  }*/
/*}*/
/* 頁首連結 */
.nav-link {
color: #000000 !important;
font-size: 15px;
transition: background-color 0.3s, color 0.3s, transform 0.3s;
padding: 15px 15px;
font-weight: 400;
}
/* 頁首選單項目懸停效果 */
.nav-item:hover .nav-link {
color: #ffffff !important;
font-weight: 600;
background-color: #4786bc;
height: 95px;
}
/* 頁首圖示懸停效果 */
.nav-item:hover .nav-link i {
color: #ffffff !important;
transition: color 0.3s;
}
/* 頁首選單項目間距 */
.nav-item {
margin-left: 30px;
text-align: center;
}
/* 淡入側邊選單 */
.sidenav {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 250px;
background-color: #0056a3;
padding-top: 80px;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
z-index: 1050;
}
.sidenav.open {
opacity: 1;
visibility: visible;
}
.closebtn.fade-out {
opacity: 0.5;
transition: opacity 0.4s ease;
}
.closebtn.rotate {
transform: rotate(90deg);
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.sidenav.open {
width: 100%;
}
.sidenav a.closebtn {
position: absolute;
top: 16px;
right: 20px;
font-size: 32px;
font-weight: 100;
color: #fff;
text-decoration: none;
}
.navbar-toggler {
position: absolute;          /* 使選單絕對定位 */
right: 0;                  /* 距離右邊 5px */
top: 0;                      /* 頂部與頁首對齊 */
height: 80px;                /* 與頁首高度一致（可調整） */
background-color: #0056a3;
border: none;                /* 移除邊框 */
outline: none;               /* 移除點擊時的外框 */
box-shadow: none;            /* 移除陰影 */
display: flex;               /* 讓圖示垂直置中 */
align-items: center;         /* 使圖示垂直居中 */
padding: 0 2.4rem;           /* 設置內邊距 */
border-radius: 0;            /* 確保沒有圓角 */
}
.navbar-toggler-icon {
position: absolute;          /* 使選單絕對定位 */
right: 20px; 
width: 30px;
height: 35px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
.closebtn.rotate {
transform: rotate(90deg);
}
.closebtn.fade-out {
opacity: 0;
}
.mobile-menu-list {
color: #ffffff;
list-style: none;
padding: 0;
margin: 0;
letter-spacing: 2px;
font-weight: 500;
}
.mobile-menu-list li {
margin: 0 !important;
padding: 0 !important;
}
.mobile-menu-list li a {
color: #ffffff !important;
font-weight: 500 !important;
text-align: left !important;
display: flex; /* 改為 flex 排版 */
justify-content: space-between; /* 左右分散：文字左、icon右 */
align-items: center; /* 垂直置中 */
padding: 1rem;
font-size: 1.2rem;
text-decoration: none;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
}
.mobile-menu-list li a i {
margin-left: 1rem;
font-size: 1.2rem;
}
/* 桌面版隱藏手機選單按鈕 */
@media (min-width: 992px) {
.mobile-menu-btn {
display: none !important; /* 強制隱藏選單圖示 */
}
.mobile-menu {
display: none !important; /* 強制隱藏手機選單 */
}
.nav-item:hover .nav-link {
height: 95px; /* 這裡保持原來的 height */
}
}
/* 手機版選單按鈕 */
@media (max-width: 991.98px) {
.nav-item:hover .nav-link {
height: auto; /* 手機版不改變高度 */
}
}
/* 手機版調整圖標完全置右，並保持右邊距離 */
@media (max-width: 768px) {
.nav-link {
position: relative;  /* 讓 <a> 元素相對定位 */
display: flex;       /* 使用 flex 排列 */
align-items: center; /* 使文字與圖標垂直居中 */
}
.nav-link i {
position: absolute;  /* 讓 <i> 元素絕對定位 */
right: 23px;         /* 圖標距離右邊 10px */
font-size: 20px;     /* 控制圖標大小 */
}
#p-contactLink i {
position: absolute;  /* 讓 <i> 元素絕對定位 */
right: 25px;         /* 圖標距離右邊 10px */
font-size: 20px;     /* 控制圖標大小 */
}
#about_padding i {
position: absolute;  /* 讓 <i> 元素絕對定位 */
right: 25px;         /* 圖標距離右邊 10px */
font-size: 20px;     /* 控制圖標大小 */
}
#pricing_padding i {
position: absolute;  /* 讓 <i> 元素絕對定位 */
right: 25px;         /* 圖標距離右邊 10px */
font-size: 20px;     /* 控制圖標大小 */
}
#phone-site i {
position: absolute;  /* 讓 <i> 元素絕對定位 */
right: 26px;         /* 圖標距離右邊 10px */
font-size: 20px;     /* 控制圖標大小 */
}
#p-faq i {
position: absolute;  /* 讓 <i> 元素絕對定位 */
right: 25px;         /* 圖標距離右邊 10px */
font-size: 20px;     /* 控制圖標大小 */
}
}
/* 主選單項目 */
.nav-item.dropdown {
position: relative; /* 使子選單相對於主選單顯示 */
}
/* 子選單樣式 */
/* 子選單樣式 */
.mobile-menu-sub-list {
font-size: 15px; /* 字體大小 */
background-color: rgba(71, 134, 188, 0.7); /* 背景顏色設為半透明藍色 */
width: 93px; /* 寬度 */
padding: 0; /* 去除內邊距 */
list-style: none; /* 去除列表標記 */
position: absolute; /* 讓子選單相對於父選單顯示 */
top: 100%; /* 顯示在主選單下方 */
left: 0; /* 與主選單對齊 */
display: none; /* 默認隱藏子選單 */
border-radius: 0px; /* 可選，圓角效果 */
z-index: 1000; /* 確保子選單在其他元素之上 */
margin-top: -15px; /* 確保子選單緊鄰在父選單下方 */
}
/* 顯示子選單的效果 */
.nav-item.dropdown:hover .mobile-menu-sub-list {
display: block; /* 當懸停時顯示子選單 */
}
/* 子選單項目樣式 */
.mobile-menu-sub-list li a {
color: white; /* 項目文字顏色 */
text-decoration: none; /* 去除下劃線 */
display: block; /* 項目塊顯示 */
padding: 0px; /* 項目內邊距，調整為更合適的數值 */
font-weight:500;
transition: background-color 0.3s; /* 動態背景色過渡效果 */
}
/* 子選單項目懸停樣式 */
.mobile-menu-sub-list li a:hover {
background-color: #0056a3; /* 懸停時背景顏色 */
font-weight:800;
}
/* 圖示樣式 */
.sub-item-icon {
width: 15px;               /* 設置圖片寬度為 15px */
height: 15px;              /* 設置圖片高度為 15px */
filter: invert(1) brightness(100%); /* 反轉顏色並保持亮度 */
margin-right: 5px;         /* 圖示與文字之間的間距 */
}
/* 電腦版保持原樣，不做更動 */
@media (max-width: 768px) {
.sidenav {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 250px;
background-color: #0056a3;
padding-top: 80px;
overflow-y: auto; /* 允許滾動條 */
transition: transform 0.4s ease;
z-index: 1050; /* 確保側邊選單的 z-index 層級在最上層 */
transform: translateX(-250px); /* 初始位置在左邊 */
}
/* 側邊選單開啟時的變化 */
.sidenav.open {
transform: translateX(0); /* 打開選單 */
}
/* 手機端選單子選單樣式 */
.mobile-menu-sub-list {
display: none; /* 初始隱藏子選單 */
list-style-type: none;
padding: 0;
margin: 0;
background-color:#242424;
width: 100%;
max-height: 0; /* 初始高度設為0 */
overflow: hidden;
opacity: 0; /* 初始透明 */
visibility: hidden; /* 初始隱藏 */
position: relative;
z-index: 1051; /* 確保子選單顯示在聯絡我們之上 */
transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease-out;
}
/* 顯示子選單時的樣式 */
.mobile-menu-sub-list.show {
display: block; /* 顯示子選單 */
max-height: 400px; /* 設定最大高度 */
opacity: 1; /* 顯示時淡入 */
visibility: visible; /* 顯示時可見 */
}
/* 手機端主選單項目樣式 */
.nav-item a {
color: white;
padding: 15px;
display: block;
text-decoration: none;
background-color: #0056a3;
z-index: 1049; /* 確保主選單項目在子選單下層 */
position: relative; /* 保證它處於正常層級 */
}
.nav-item a:hover {
background-color: #4786bc;
}
/* 子選單項目樣式 */
.mobile-menu-sub-list li a {
color: white;
text-decoration: none;
padding: 15px 16px;
display: block;
font-size: 18px;
background-color: #5b5b5b; /* 背景顏色 */
margin-left: 0px; /* 稍微向右偏移，讓垂直線不會貼邊 */
}
/* 子選單項目懸停樣式 */
.mobile-menu-sub-list li a:hover {
background-color: #4786bc;
}
}
.slashie-section {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slashie-title {
font-family: 'Sansation', sans-serif !important; 
font-size: 42px;
font-weight: bold;
display: block;
}
.slashie-subtitle {
font-size: 24px;
letter-spacing:3px;
display: block;
}
.slashie-line {
width: 1px; /* 垂直線的寬度 */
height: 20px; /* 垂直線的高度 */
background-color: lightgray; /* 淺灰色 */
margin: -5px 0px; /* 線的上下邊距 */
}
@media (max-width: 768px) {
.slashie-section {
position: absolute;
top: 30% !important;
left: 50% !important;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slashie-title {
font-family: 'M PLUS 1p', sans-serif !important;
font-size: 18px !important;
font-weight: bold;
display: block;
}
.slashie-subtitle {
font-family: 'M PLUS 1p', sans-serif !important;
font-size: 16px !important;
letter-spacing:3px;
display: block;
}
}
@media (max-width: 768px) {
#carouselExample
{
margin-bottom: 100px !important;
}
}
.about-text {
opacity: 0; /* 初始隱藏 */
transform: translateY(100px); /* 初始稍微向下，增加位移 */
transition: opacity 0.5s ease, transform 0.5s ease; /* 添加過渡效果 */
margin-top: 20px; /* 增加標題與段落之間的距離 */
}
.about-text.visible {
opacity: 1; /* 完全可見 */
transform: translateY(0); /* 移回原位 */
}
.about-image {
transition: transform 0.3s; /* 平滑過渡 */
}
.about-image:hover {
transform: scale(1.05); /* 懸停時放大 */
}
.about-section {
display: flex;
flex-direction: column; /* 垂直排列 */
align-items: center; /* 水平置中 */
}
.about-title {
font-size: 36px; /* 英文標題字體大小 */
letter-spacing: 2px;
margin-top: 0px; /* 上方間距 */
font-weight: 700;
}
.about-subtitle {
font-size: 18px; /* 中文標題字體大小 */
margin-top: 5px; /* 上方間距 */
font-weight: 500;
color: #0056a3;
}
.vertical-line {
width: 1px; /* 垂直線的寬度 */
height: 20px; /* 垂直線的高度 */
background-color: lightgray; /* 淺灰色 */
margin: -5px 0px; /* 線的上下邊距 */
}
.news-section {
display: flex;
flex-direction: column; /* 垂直排列 */
align-items: center; /* 水平置中 */
}
.news-title {
font-family: 'Sansation', sans-serif !important; 
font-size: 36px; /* 英文標題字體大小 */
letter-spacing: 2px;
margin-top: 0px; /* 上方間距 */
font-weight: 700;
}
.news-subtitle {
font-size: 18px; /* 中文標題字體大小 */
margin-top: 5px; /* 上方間距 */
font-weight: 500;
color: #0056a3;
}
.services-section {
display: flex;
flex-direction: column; /* 垂直排列 */
align-items: center; /* 水平置中 */
}
.services-title {
font-size: 36px; /* 英文標題字體大小 */
letter-spacing: 2px;
margin-top: 0px; /* 上方間距 */
font-weight: 700;
}
.services-subtitle {
font-size: 18px; /* 中文標題字體大小 */
margin-top: 5px; /* 上方間距 */
font-weight: 500;
color: #0056a3;
}
.pricing-section {
display: flex;
flex-direction: column; /* 垂直排列 */
align-items: left; /* 水平置中 */
}
.pricing-title {
font-size: 36px; /* 英文標題字體大小 */
letter-spacing: 2px;
margin-top: 0px; /* 上方間距 */
font-weight: 700;
}
.pricing-subtitle {
font-size: 18px; /* 中文標題字體大小 */
margin-top: 5px; /* 上方間距 */
font-weight: 500;
color: #0056a3;
}
.contact-section {
display: flex;
flex-direction: column; /* 垂直排列 */
align-items: center; /* 水平置中 */
}
.contact-title {
font-size: 36px; /* 英文標題字體大小 */
letter-spacing: 2px;
margin-top: 0px; /* 上方間距 */
font-weight: 700;
}
.contact-subtitle {
font-size: 18px; /* 中文標題字體大小 */
margin-top: 5px; /* 上方間距 */
font-weight: 500;
color: #0056a3;
}
/* 手機版字體大小調整 */
@media (max-width: 768px) {
.about-title {
font-size: 24px; /* 手機版字體大小調整 */
}
.news-title {
font-size: 24px; /* 手機版字體大小調整 */
}
.pricing-title {
font-size: 24px; /* 手機版字體大小調整 */
}
.services-title {
font-size: 24px; /* 手機版字體大小調整 */
}
.contact-title {
font-size: 24px; /* 手機版字體大小調整 */
}
.contact-section {
display: flex;
flex-direction: column; /* 垂直排列 */
align-items: flex-start; /* 靠左對齊 */
}
}
.service-item {
position: relative;
overflow: hidden; /* 隱藏溢出部分 */          
height: 320px; /* 統一高度 */
border: 0.5px solid #ddd; /* 添加邊框 */
border-radius: 0; /* 去掉圓角 */
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); /* 添加陰影效果 */
margin: 10px 0px 10px -10px; /* 添加外邊距，確保每個項目之間有間距 */
padding: 5px; /* 添加內邊距，確保內容不緊貼邊框 */
}
.service-item img {
width: 100%; /* 確保圖片寬度為100% */
height: 100%; /* 確保圖片高度為100% */
object-fit: cover; /* 確保圖片覆蓋整個區域 */
border-radius: 0; /* 去掉圓角 */
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.2); /* 半透明背景 */
color: white; /* 文字顏色 */
opacity: 0; /* 初始隱藏 */
transition: opacity 0.3s; /* 過渡效果 */
}
.service-item:hover .overlay {
opacity: 1; /* 懸停時顯示 */
}
.overlay i {
font-size: 3em; /* 圖標大小 */
margin-bottom: 10px; /* 圖標與文字間距 */
transition: transform 0.3s; /* 添加過渡效果 */
}
.service-item:hover .overlay i {
transform: scale(1.1); /* 懸停時放大圖標 */
}
.service-item:hover .overlay p {
font-size: 1.3em;
transform: translateY(0); /* 懸停時顯示文字 */
opacity: 1; /* 懸停時文字可見 */
transition: opacity 0.3s, transform 0.3s; /* 添加過渡效果 */
}
/* 手機版調整 */
@media (max-width: 768px) {
.service-item {
border: 0px solid #ddd; /* 添加邊框 */
padding: 0px; /* 添加內邊距，確保內容不緊貼邊框 */
}
/* 強制顯示圖標和文字，不依賴hover */
.service-item .overlay {
opacity: 1; /* 保持顯示 */
}
.overlay i {
font-size: 2.4em; /* 圖標大小縮小 */
}
.overlay p {
font-size: 20px; /* 文字大小縮小 */
font-weight: 400; /* 讓文字加粗，使其更清晰 */
}
.service-item:hover .overlay i {
transform: scale(1.2); /* 懸停時放大圖標 */
}
.service-item:hover .overlay p {
font-size: 24px;
transform: translateY(0); /* 懸停時顯示文字 */
opacity: 1; /* 懸停時文字可見 */
transition: opacity 0.3s, transform 0.3s; /* 添加過渡效果 */
}
/* 讓每個項目的高度保持一致，確保手機上顯示一致 */
.service-item {
height: 250px; /* 改為較小的高度，符合手機版顯示 */
}
/* 強制圖片填滿 */
.service-item img {
height: 100%; /* 讓圖片高度填滿容器 */
object-fit: cover; /* 確保圖片完全覆蓋區域 */
}
/* 手機版：讓文字和圖標居中對齊 */
.overlay {
text-align: center; /* 確保文字居中 */
}
}
.quote-container {
position: relative; /* 使其能夠放置絕對定位的元素 */
}
.quote-icon {
font-size: 1.5em; /* 設置圖標大小 */
color: rgba(0, 0, 0, 0.3); /* 設置圖標顏色為深橘色，透明度為0.7 */
position: absolute; /* 絕對定位 */
}
.quote-icon.fa-quote-left {
top: 35px; /* 距離頂部10px */
left: 3px; /* 距離左側10px */
}
.quote-icon.fa-quote-right {
bottom: -15px; /* 距離底部10px */
right: 5px; /* 距離右側10px */
}
.footer {
margin-top: 100px !important;
font-size: 14px;
background-color: #f8f9fa; /* 頁尾背景顏色 */
padding: 40px 0; /* 增加上下內邊距以增加高度 */
position: relative; /* 使其能夠放置絕對定位的元素 */
}
@media (max-width: 768px) {
.footer {
margin-top: 50px !important;
}
}
.footer-text {
margin: 0; /* 去掉外邊距 */
color: #000000; /* 文字顏色 */
text-align: left;
}
.footer-info {
margin-top: 10px; /* 上邊距 */
color: #000000; /* 文字顏色 */
text-align: left;
}
.footer-info p {
margin: 10px 0; /* 增加每行之間的間距 */
}
.footer-info i {
margin-right: 5px; /* 圖標與文字之間的間距 */
color: #000000; /* 圖標顏色 */
}
.footer-info a {
text-decoration: none; /* 移除下划线 */
}
.footer-info a:hover {
text-decoration: none; /* 悬停时也移除下划线 */
}
.footer-line {
border: none;
height: 0;
border-top: 0.5px solid lightgray; /* 浅灰色线条 */
position: relative;
}
.footer-line::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 1px; /* 黑色线条的高度 */
width: 15%; /* 黑色线条占 30% */
background-color: black; /* 黑色线条 */
}
.item6 {
display: -webkit-box;
background: none;
border-bottom: 1px solid #dfdfdf;
border-radius: 0px;
padding: 20px;
position: relative;
overflow: hidden;
margin: 0 0 5px 0;
}
.item-ico {
overflow: hidden;
position: relative;
}
.item-ico img {
height: 200px;
width: 300px;
transform: scale(1, 1);
transition: transform 0.2s linear;
border-radius: 5px;
}
.item-ico:hover img {
transform: scale(1.1, 1.1);
}
.item-ico .over-layer {
height: 200px;
width: 300px;
position: absolute;
top: 20px;
left: 20px;
opacity: 0;
background: linear-gradient(-45deg, rgba(6,190,244,0.75) 0%, rgba(45,112,253,0.6) 100%);
transition: all 0.50s linear;
}
.item-ico:hover .over-layer {
opacity: 1;
text-decoration: none;
}
.item-ico .over-layer i {
position: relative;
top: 45%;
text-align: center;
display: block;
color: #fff;
font-size: 20px;
}
.item-intro {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
font-size: 20px;
font-weight: bold;
text-align: left;
padding: 0px 50px 0px 50px;
}
.news_title a {
text-decoration: none;
}
.news_title {
position: relative;  /* 确保后续的元素可以相对定位 */
display: inline-block; /* 如果标题是内联元素，使用 inline-block 以便加背景 */
padding: 10px 10px;
font-weight: 400;
background-color: #f1f1f1;  /* 设置背景颜色 */
color: #000000;  /* 文字颜色 */
border-radius: 0px 10px 0px 10px;  /* 去除圆角 */
}
.news_content {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-align: justify;
font-size: 15px;
font-weight: 400;
line-height: 2;
margin-top: 20px;
padding: 0px;
}
.news-post-date {
font-size: 14px;
color: #0056a3;
border-radius: 0px;
padding: 0px;
position: relative;  /* 改为 relative 定位 */
margin-top: 20px;    /* 距离内容底部一定距离 */
z-index: 10;
}
.tip {
position: absolute;
top: -5px;
background: #cc0000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: -50px;
width: 120px;
text-align: center;
color: #fff;
font-size: 14px;
padding: 5px 0;
font-weight: bold;
}
/* ✅ 手機版修正 */
@media (max-width: 767.98px) {
.item6 {
display: block !important;
padding: 15px !important;
}
.item-ico,
.item-ico img,
.item-ico .over-layer {
width: 100% !important;
height: auto !important;
}
.item-ico .over-layer {
top: 0 !important;
left: 0 !important;
}
.item-intro {
padding: 15px 0 0 0 !important;
font-size: 18px !important;
font-weight: 600 !important;
}
.news_content {
font-size: 14px !important;
line-height: 1.8 !important;
text-align: justify !important;
}
.news-post-date {
position: static !important;
margin-top: 10px;
display: inline-block;
}
.news_title a {
font-size: 18px !important;
font-weight: 600 !important;
display: inline-block;
margin-bottom: 8px;
}
.tip {
position: absolute;
background: #cc0000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 120px;
text-align: center;
color: #fff;
font-size: 14px;
padding: 5px 0;
font-weight: bold;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px); /* 從上方進入 */
}
to {
opacity: 1;
transform: translateY(0); /* 到達最終位置 */
}
}
.animated-title {
opacity: 0; /* 初始隱藏 */
transition: opacity 0.5s ease-in-out; /* 添加過渡效果 */
}
.visible {
opacity: 1; /* 當可見時設置為可見 */
animation: fadeIn 1s forwards; /* 動畫效果 */
}
/* Desktop version remains unchanged */
.swiper {
height: 400px;
}
.swiper .swiper-wrapper + .container {
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
top: -60px;
right: 3%;
z-index: 5;
}
.swiper .swiper-wrapper + .container .swiper-button-prev,
.swiper .swiper-wrapper + .container .swiper-button-next {
height: 16px;
top: 0px;
margin-top: 0px;
}
.swiper .swiper-wrapper + .container .swiper-button-prev::after,
.swiper .swiper-wrapper + .container .swiper-button-next::after {
font-size: 16px;
}
.swiper .swiper-wrapper + .container .swiper-button-prev,
.swiper .swiper-wrapper + .container .swiper-button-next,
.swiper .swiper-wrapper + .container .swiper-pagination {
position: relative;
left: unset;
right: unset;
}
.swiper .swiper-wrapper + .container .swiper-pagination {
max-width: 200px;
}
.swiper .swiper-pagination-progressbar {
background: transparent !important;
}
.swiper .swiper-pagination-progressbar-fill {
background: transparent !important;
}
.swiper .swiper-pagination-progressbar-fill::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
display: block;
margin-right: -2px;
position: absolute;
right: 50%;
top: -1px;
transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1);
transition: all 0.32s ease-in-out;
}
/* Modify position for progress bar circles */
.swiper .swiper-pagination-progressbar-fill[style*="scaleX(0.142857)"]::after {
right: 85.7%;
}
.swiper .swiper-pagination-progressbar-fill[style*="scaleX(0.285714)"]::after {
right: 71.4%;
}
.swiper .swiper-pagination-progressbar-fill[style*="scaleX(0.428571)"]::after {
right: 57.1%;
}
.swiper .swiper-pagination-progressbar-fill[style*="scaleX(0.571429)"]::after {
right: 42.9%;
}
.swiper .swiper-pagination-progressbar-fill[style*="scaleX(0.714286)"]::after {
right: 28.6%;
}
.swiper .swiper-pagination-progressbar-fill[style*="scaleX(0.857143)"]::after {
right: 14.3%;
}
.swiper .swiper-pagination-progressbar-fill[style*="scaleX(1)"]::after {
right: 0%;
}
.swiper .swiper-pagination-progressbar {
display: flex;
}
.swiper .bullet-circle {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
.swiper .bullet-circle::before {
content: "";
display: block;
border: 1px solid #fff;
border-radius: 50%;
width: 16px;
height: 16px;
}
.swiper-slide {
overflow: hidden;
position: relative;
}
.swiper-slide .slide-image {
display: block;
object-fit: cover;
height: 400px;
position: relative;
width: 66%;
z-index: 1;
}
.swiper-slide .slide-content .slide-content-inner h2 {
font-size: 32px; /* 字體大小 */
font-weight: 500; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 2px; /* 添加字間距 */
text-align: left; /* 右對齊 */
margin-bottom: 0px; /* 底部間距 */
}
.swiper-slide h3 {
font-size: 16px; /* 字體大小 */
font-weight: 300; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 2px; /* 添加字間距 */
text-align: left; /* 右對齊 */
margin-bottom: 10px; /* 底部間距 */
}
.swiper-slide p {
font-size: 14px; /* 字體大小 */
font-weight: 300; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 1px; /* 字間距 */
margin: 1px 0; /* 上下間距設置為 5px */
text-align: left; /* 右對齊 */
}
.swiper-slide::before {
content: "";
background: linear-gradient(-315deg, #f8f8fc 70%, #fcfcfc 30%);
display: block;
height: 100%;
position: absolute;
left: 55%;
width: 70%;
top: 0px;
transform: skew(-20deg);
z-index: 2;
}
.swiper-slide::after {
content: "";
background-image: linear-gradient(
65deg,
rgba(6, 22, 75, 0.5) 20%,
rgba(5, 26, 105, 0.5) 80%
);
display: block;
height: 100%;
position: absolute;
top: 0px;
right: 45%;
width: 0px;
transform: skew(-20deg);
transition: width 0.32s ease-in-out;
z-index: 3;
}
.swiper-slide.swiper-slide-active::after {
width: 100px;
}
.swiper-slide .container {
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
top: -25px;
left: 43%;
transform: translateX(-50%);
z-index: 3;
height: 100%;
color: #fff;
}
.swiper-slide .slide-content .slide-content-inner {
text-align: left;
}
.swiper .swiper-pagination {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.swiper .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: transparent;
border: 1px solid #4786bc;
border-radius: 50%;
margin: 0 8px;
opacity: 1;
position: relative;
}
.swiper .swiper-pagination-bullet-active {
background: #4786bc;
}
.swiper .swiper-pagination-bullet::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.swiper .swiper-pagination-bullet-active::after {
opacity: 1;
}
.learn-more {
margin-top: 10px;
}
@media (max-width: 767.98px) and (orientation: portrait) {
/* 隱藏桌面版的內容 */
.swiper {
width: 100% !important; /* 讓 swiper 佔滿全寬 */
height:500px !important; /* 讓 swiper 佔滿整個視口高度 */
overflow: hidden; /* 隱藏溢出的內容 */
position: relative; /* 保證 swiper-slide 內部元素相對於它定位 */
}
.swiper-slide .container {
position: absolute;
top: 0;
left: 0 !important;
width:100% !important;
transform: translateX(0%);
}
/* swiper-slide 設置 */
.swiper-slide {
display: block; /* 保證內部元素垂直排列 */
position: relative; /* 使絕對定位的內容相對於這個父元素定位 */
width: 100% !important; /* 保證 swiper-slide 寬度為 100% */
height: 100%; /* 保證每個 slide 佔滿 swiper 的全部高度 */
}
.swiper-slide::before {
display: none;
}
.swiper-slide::after {
display: none;
}
.swiper-slide .slide-image {
width: 100%; /* 讓圖片佔據整個寬度 */
height: 250px; /* 讓圖片高度根據寬度自動調整 */
object-fit: cover; /* 使圖片自適應容器並保持比例 */
display: block; /* 確保圖片顯示為區塊 */
margin-bottom: 0; /* 確保圖片底部沒有多餘的間距 */
}
.swiper-slide .slide-content {
background: linear-gradient(-65deg, #f8f8fc 70%, #fcfcfc 30%);
color: #000000;
width: 100% !important; /* 讓文字框和圖片寬度相同 */
box-sizing: border-box;
text-align: left;
padding: 70px 40px; /* 增加內邊距 */
position: absolute; /* 設置為絕對定位 */
bottom: 0; /* 讓文字框貼住圖片的下緣 */
left: 0; /* 確保文字框從左邊開始 */
right: 0; /* 確保文字框從右邊結束 */
z-index: 1; /* 確保文字框顯示在圖片上面 */
margin-top: -20px !important; /* 讓文字框緊貼圖片底部 */
}
.swiper-slide .slide-content .slide-content-inner h2 {
font-size: 28px; /* 字體大小 */
font-weight: 600; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 2px; /* 添加字間距 */
text-align: left; /* 右對齊 */
margin-bottom: 0px; /* 底部間距 */
}
.swiper-slide h3 {
font-size: 16px; /* 字體大小 */
font-weight: 300; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 2px; /* 添加字間距 */
text-align: left; /* 右對齊 */
margin-bottom: 10px; /* 底部間距 */
}
.swiper-slide p {
font-size: 14px; /* 字體大小 */
font-weight: 300; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 1px; /* 字間距 */
margin: 1px 0; /* 上下間距設置為 5px */
text-align: left; /* 右對齊 */
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #4786bc;
border-radius: 0rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #000000 !important;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 100%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff !important;
}
@keyframes fly-in-skew {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.swiper .swiper-wrapper + .container .swiper-button-prev,
.swiper .swiper-wrapper + .container .swiper-button-next,
.swiper .swiper-wrapper + .container .swiper-pagination{
height: 16px;
top: 0px;
display: inline-block; /* 設置為inline-block，這樣可以使其居中 */
margin:30px 10px 50px 15px !important; /* 使按鈕居中並增加上方間距 */
text-align: center; /* 文字居中 */
}
}
@media (max-width: 768px) and (orientation: landscape) {
.swiper {
width: 100% !important; /* 讓 swiper 佔滿全寬 */
height:510px !important; /* 讓 swiper 佔滿整個視口高度 */
overflow: hidden; /* 隱藏溢出的內容 */
position: relative; /* 保證 swiper-slide 內部元素相對於它定位 */
}
.swiper-slide .container {
position: absolute;
top: 0;
left: 0 !important;
width:100% !important;
transform: translateX(0%);
}
/* swiper-slide 設置 */
.swiper-slide {
display: block; /* 保證內部元素垂直排列 */
position: relative; /* 使絕對定位的內容相對於這個父元素定位 */
width: 100% !important; /* 保證 swiper-slide 寬度為 100% */
height: 100%; /* 保證每個 slide 佔滿 swiper 的全部高度 */
}
.swiper-slide::before {
display: none;
}
.swiper-slide::after {
display: none;
}
.swiper-slide .slide-image {
width: 100%; /* 讓圖片佔據整個寬度 */
height: 250px; /* 讓圖片高度根據寬度自動調整 */
object-fit: cover; /* 使圖片自適應容器並保持比例 */
display: block; /* 確保圖片顯示為區塊 */
margin-bottom: 0; /* 確保圖片底部沒有多餘的間距 */
}
.swiper-slide .slide-content {
background: linear-gradient(-65deg, #f8f8fc 70%, #fcfcfc 30%);
color: #000000;
width: 100% !important; /* 讓文字框和圖片寬度相同 */
box-sizing: border-box;
text-align: left;
padding: 70px 40px; /* 增加內邊距 */
position: absolute; /* 設置為絕對定位 */
bottom: 0; /* 讓文字框貼住圖片的下緣 */
left: 0; /* 確保文字框從左邊開始 */
right: 0; /* 確保文字框從右邊結束 */
z-index: 1; /* 確保文字框顯示在圖片上面 */
margin-top: -20px !important; /* 讓文字框緊貼圖片底部 */
}
.swiper-slide .slide-content .slide-content-inner h2 {
font-size: 28px; /* 字體大小 */
font-weight: 600; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 2px; /* 添加字間距 */
text-align: left; /* 右對齊 */
margin-bottom: 0px; /* 底部間距 */
}
.swiper-slide h3 {
font-size: 16px; /* 字體大小 */
font-weight: 300; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 2px; /* 添加字間距 */
text-align: left; /* 右對齊 */
margin-bottom: 10px; /* 底部間距 */
}
.swiper-slide p {
font-size: 14px; /* 字體大小 */
font-weight: 300; /* 字體粗細 */
color: #000000; /* 字體顏色 */
letter-spacing: 1px; /* 字間距 */
margin: 1px 0; /* 上下間距設置為 5px */
text-align: left; /* 右對齊 */
}
button.learn-more {
width: 12rem;
height: auto;
}
button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #4786bc;
border-radius: 0rem;
}
button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #000000 !important;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 100%;
}
button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #fff !important;
}
@keyframes fly-in-skew {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.swiper .swiper-wrapper + .container .swiper-button-prev,
.swiper .swiper-wrapper + .container .swiper-button-next,
.swiper .swiper-wrapper + .container .swiper-pagination{
height: 16px;
top: 0px;
display: inline-block; /* 設置為inline-block，這樣可以使其居中 */
margin:30px 23px 50px 60px !important; /* 使按鈕居中並增加上方間距 */
text-align: center; /* 文字居中 */
}
}
#btnSend,button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
#btnSend,button.learn-more {
width: 12rem;
height: auto;
}
#btnSend,button.learn-more .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #4786bc;
border-radius: 0rem;
}
#btnSend,button.learn-more .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
#btnSend,button.learn-more .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
#btnSend,button.learn-more .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
#btnSend,button.learn-more .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #000000;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
#btnSend,button:hover .circle {
width: 100%;
}
#btnSend,button:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
#btnSend,button:hover .button-text {
color: #fff;
}
@keyframes fly-in-skew {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.background-animation {
position: fixed;
top: 0;
right: 0;
width: 120%;
height: 100%;
overflow: hidden;
animation: fly-in-skew 1s ease-in-out 2s forwards;
z-index: -1;
opacity: 0;
}
.background-skew {
width: 100%;
height: 100%;
background: linear-gradient(-30deg, #f8f8fc 60%, #fcfcfc 40%);
transform: skewY(30deg);
box-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
transition: transform 0.3s ease-out;
}
.background-animation::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: linear-gradient(-30deg, #f8f8fc 60%, #fcfcfc 40%);
transform: skewY(30deg);
box-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}
.i-p-list {
overflow-x: hidden; /* 避免水平捲動 */
}
.i-p-list .i-p-list-right {
padding-right: 30px !important;
}
.i-p-list .box {
display: block;
margin: 0 auto 150px auto;
padding: 40px 0px 0px 30px;
}
.i-p-list .box {
display: table;
width: 100%;
}
.i-p-list .box:hover .img img {
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
.i-p-list .box:hover .img:before {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
.i-p-list .box:hover .more div {
padding-right: 10px;
}
.i-p-list .box:hover .more div:before {
width: 100px;
}
.i-p-list .box .img {
display: table-cell;
vertical-align: middle;
z-index: 0;
position: relative;
width: 53%;
}
.i-p-list .box .img:before {
content: '';
display: block;
position: absolute;
z-index: 0;
top: 9%;
width: 100%;
height: 82%;
background: #e7edf2;
-webkit-transition: top .35s, left .35s, right .35s, -webkit-transform .5s;
transition: top .35s, left .35s, right .35s, transform .5s, -webkit-transform .5s;
}
.i-p-list .box .img img {
max-width: 100%;
position: relative;
z-index: 2;
width: 100%;
-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
-webkit-transition: -webkit-transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.i-p-list .box .text {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
width: 47%;
padding: 0 7% 0 5%;
direction: ltr;
}
.i-p-list .box .text h2 {
text-align: left ;
font-size: 32px ;
font-weight: 500 ;
}
.i-p-list .box .text .desc,
.i-p-list .box .text p {
font-size: 16px ;
text-align: justify;
line-height: 2;
font-weight: 400 ;
}
.i-p-list .box .text .icon {
width: 80px;
height: 80px;
display: block;
}
.i-p-list .box .text .desc {
font-size: 1rem;
color: #666;
}
.i-p-list .box .text .title {
font-size: 2rem;
color: #222;
}
.i-p-list .box:nth-of-type(odd) .img:before {
left: 6.25%;
}
.i-p-list .box:nth-of-type(even) a {
direction: rtl;
}
.i-p-list .box:nth-of-type(even) .img:before {
left: -6.25%;
}
/* 左邊底層區塊調整 */
.i-p-list .box:last-of-type .img:before {
height: 100%;
left: 7.25%;
}
.i-p-list .box:first-of-type .img:before {
height: 100%;
left: -7.25%;
}
/* ✅ 手機版調整 */
@media (max-width: 768px) {
.i-p-list .box {
display: block !important;
padding: 20px 20px;
margin-bottom: 30px;
}
.i-p-list .box .img,
.i-p-list .box .text {
display: block !important;
width: 100% !important;
padding: 0 !important;
}
.i-p-list .box .img img {
width: 100%;
height: auto;
}
.i-p-list .box .text {
margin-top: 20px;
text-align: left !important;
}
.i-p-list .box .text h2 {
text-align: left !important;
font-size: 20px !important;
font-weight: 600 !important;
}
.i-p-list .box .text .desc,
.i-p-list .box .text p {
font-size: 14px !important;
text-align: justify !important;
line-height: 1.8;
}
.i-p-list .box .img:before {
display: none;
}
}
#toTop {
position: fixed;
bottom: 60px;
right: 35px;
width: 40px;
height: 70px;
z-index: 200;
display: block;
font-size: 0;
background-color: #4786bc;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: background-color 0.2s, opacity 0.25s, -webkit-transform 0.25s;
transition: background-color 0.2s, opacity 0.25s, -webkit-transform 0.25s;
transition: background-color 0.2s, opacity 0.25s, transform 0.25s;
transition: background-color 0.2s, opacity 0.25s, transform 0.25s, -webkit-transform 0.25s;
}
#toTop:before {
content: '';
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -3px;
margin-top: -15px;
width: 8px;
height: 35px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: skewY(45deg);
transform: skewY(45deg);
}
#toTop.scroll-view {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
#toTop:hover {
background: #0056a3;
}
@media (max-width: 1199px) {
#toTop {
width: 35px;
height: 50px;
right: 30px;
bottom: 30px;
}
#toTop:before {
height: 24px;
margin-top: -8px;
}
}
@media (max-width: 991px) {
#toTop {
right: 20px;
bottom: 20px;
}
}
.scroll-down {
font-family: 'M PLUS 1p', sans-serif !important;
position: absolute;
z-index: 3;
bottom: 14%;
left: 50%;
width: 20px;
height: 30px;
border-radius: 25px;
border: 2px solid #fff;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-webkit-animation: ani_scroll_jump 1.5s infinite both;
animation: ani_scroll_jump 1.5s infinite both;
}
.scroll-down:before, .scroll-down:after {
content: '';
width: 2px;
height: 10px;
position: absolute;
background: #fff;
left: 50%;
margin-left: -1px;
}
.scroll-down:before {
top: -10px;
}
.scroll-down:after {
bottom: -10px;
}
.scroll-down .line {
width: 2px;
height: 6px;
position: absolute;
background: #fff;
left: 50%;
top: 5px;
margin-left: -1px;
}
.scroll-down .text {
font-family: 'M PLUS 1p', sans-serif !important;
font-size: 0.875rem;
color: #ffffff;
position: absolute;
left: 50%;
bottom: -10px;
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
}
.mb .scroll-down {
display: none;
}
@media (max-width: 767px) {
.scroll-down {
display: none;
}
}@-webkit-keyframes ani_scroll_jump {
0%, 100% {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
50% {
-webkit-transform: translate(-50%, -10px);
transform: translate(-50%, -10px);
}
}
@keyframes ani_scroll_jump {
0%, 100% {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
50% {
-webkit-transform: translate(-50%, -10px);
transform: translate(-50%, -10px);
}
}
/* 遮罩背景 */
.modal-overlay,.modal-overlay-dry,.modal-overlay-ironing,.modal-overlay-bag,.modal-overlay-bed,.modal-overlay-leather,.modal-overlay-month  {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
overflow-y: auto;
opacity: 0; /* 初始隱藏 */
transition: opacity 0.5s ease-in-out; /* 淡入效果 */
}
/* 彈窗內容 */
.modal-content,.modal-content-dry,.modal-content-ironing,.modal-content-bag,.modal-content-bed,.modal-content-leather,.modal-content-month {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 30px 20px;
border-radius: 10px;
text-align: center;
width: 90%;
max-width: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
font-size: 14px;
opacity: 0; /* 初始隱藏 */
transition: opacity 0.5s ease-in-out; /* 淡入效果 */
}
/* 彈窗顯示時 */
.modal-overlay.show, .modal-overlay-dry.show, .modal-overlay-ironing.show, .modal-overlay-bag.show, .modal-overlay-bed.show, .modal-overlay-leather.show, .modal-overlay-month.show,
.modal-content.show, .modal-content-dry.show, .modal-content-ironing.show, .modal-content-bag.show, .modal-content-bed.show, .modal-content-leather.show, .modal-content-month.show {
opacity: 1; /* 顯示時的透明度 */
}
/* 表格樣式 */
.modal-content table, .modal-content-dry table, .modal-content-ironing table, .modal-content-bag table, .modal-content-bed table, .modal-content-leather table, .modal-content-month table {
width: 100%;
border-collapse: collapse;
margin-top: 0px;
table-layout: fixed; /* 欄寬平均 */
color: #000000;
}
/* 表頭樣式 */
.modal-content th,.modal-content-dry th,.modal-content-ironing th,.modal-content-bag th,.modal-content-bed th,.modal-content-leather th,.modal-content-month th {
background: #f3f3fa;
border-bottom: 0px solid #e7e7e7;
padding: 15px 15px;
font-size: 16px;
font-weight: 600;
letter-spacing: 3px;
position: relative;
border-top: solid 0px #e7e7e7;
border-bottom: solid 0px #e7e7e7;
}
.modal-content th i,.modal-content-dry th i,.modal-content-ironing th i,.modal-content-ironing th i,.modal-content-bag th i,.modal-content-bed th i,.modal-content-leather th i,.modal-content-month th i {
margin-right: 5px;
}
.price-line {
border: none;
height: 0;
border-top: 0.5px solid lightgray; /* 浅灰色线条 */
position: relative;
width: 70%; /* 控制整條分隔線的長度 */
margin: 0 auto; /* 讓線條置中 */
}
.modal-content th .price-line,.modal-content-dry th .price-line,.modal-content-ironing th .price-line,.modal-content-bag th .price-line,.modal-content-bed th .price-line,.modal-content-leather th .price-line,.modal-content-month th .price-line {
border: none;
height: 0;
border-top: 0.5px solid lightgray; /* 浅灰色线条 */
position: relative;
margin-top: 5px; /* 添加點距離來調整位置 */
}
.modal-content th .price-line::before,.modal-content-dry th .price-line::before,.modal-content-ironing th .price-line::before,.modal-content-bag th .price-line::before,.modal-content-bed th .price-line::before,.modal-content-leather th .price-line::before,.modal-content-month th .price-line::before    {
content: '';
position: absolute;
left: 0;
top: 0;
height: 1px; /* 黑色线条的高度 */
width: 20%; /* 黑色线条占 15% */
background-color: black; /* 黑色线条 */
}
/* 說明欄：圖示與文字的排列 */
.modal-content td,.modal-content-dry td,.modal-content-ironing  td,.modal-content-bag td,.modal-content-bed td,.modal-content-leather td,.modal-content-month td   {
text-align: center; /* 置中對齊 */
border-bottom: 0.5px solid #e7e7f5;
padding: 12px 15px;
font-size: 14px;
font-weight: 400;
}
/* 價格欄樣式 */
.modal-content td:nth-child(2),.modal-content-dry td:nth-child(2),.modal-content-ironing td:nth-child(2),.modal-content-bag td:nth-child(2),.modal-content-bed td:nth-child(2),.modal-content-leather td:nth-child(2),.modal-content-month td:nth-child(2) {
font-size: 14px;
font-weight: 500;
}
/* 移除斑馬線與 hover 效果 */
.modal-content tr,.modal-content-dry tr,.modal-content-ironing tr,.modal-content-bag tr,.modal-content-bed tr,.modal-content-leather tr,.modal-content-month tr {
background-color: transparent;
}
.modal-content tr:hover,.modal-content-dry tr:hover,.modal-content-ironing  tr:hover,.modal-content-bag  tr:hover,.modal-content-bed  tr:hover,.modal-content-leather  tr:hover,.modal-content-month  tr:hover {
background-color: transparent;
}
/* 響應式調整 */
@media (max-width: 768px) {
.modal-content, .modal-content-dry, .modal-content-ironing, .modal-content-bag, .modal-content-bed, .modal-content-leather, .modal-content-month   {
padding: 20px 15px;
}
.modal-content th, .modal-content-dry th, .modal-content-ironing th, .modal-content-bag th, .modal-content-bed th, .modal-content-leather th, .modal-content-month th {
font-size: 16px !important;
padding: 15px 15px !important;
}
.modal-content td, .modal-content-dry td, .modal-content-ironing td, .modal-content-bag td, .modal-content-bed td, .modal-content-leather td, .modal-content-month td {
font-size: 14px;
padding: 10px;
}
.modal-content table, .modal-content-dry table, .modal-content-ironing table, .modal-content-bag table, .modal-content-bed table, .modal-content-leather table, .modal-content-month table {
font-size: 14px;
}
}
.description {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平置中 */
}
.item-icon {
width: 20px; /* 設置圖示大小 */
height: 20px; /* 設置圖示大小 */
margin-right: 10px; /* 圖片與文字間距 */
}
.item-name {
font-size: 14px;
background-color: #f0f0f0; /* 淺灰色背景 */
padding: 5px 10px; /* 內邊距 */
border-radius: 30px; /* 圓角 */
}
.gree-item-icon {
filter: invert(30%) sepia(100%) hue-rotate(90deg) saturate(400%);
width: 40px; /* 設置圖示大小 */
height: 40px; /* 設置圖示大小 */
margin-right: 10px; /* 圖片與文字間距 */
}
.health-item-icon {
filter: invert(30%) sepia(100%) hue-rotate(90deg) saturate(400%);
width: 40px; /* 設置圖示大小 */
height: 40px; /* 設置圖示大小 */
margin-right: 10px; /* 圖片與文字間距 */
}
@media (max-width: 768px) {
.gree-item-icon {
width: 25px !important; /* 設置圖示大小 */
height: 25px !important; /* 設置圖示大小 */
filter: invert(30%) sepia(100%) hue-rotate(90deg) saturate(400%);
margin-right: 10px; /* 圖片與文字間距 */
}
.health-item-icon {
filter: invert(30%) sepia(100%) hue-rotate(90deg) saturate(400%);
width: 25px; /* 設置圖示大小 */
height: 25px; /* 設置圖示大小 */
margin-right: 10px; /* 圖片與文字間距 */
}
}
.divider {
width: 1px;
/*  background-color: #909090;*/
border: 0.5px dashed #c0c0c0;
height: 10px; /* 調整分隔線高度 */
margin-left: 8px;
margin-right: 11px; /* 圖示和文字中間的分隔線 */
}
.sup {
font-family: 'M PLUS 1p', sans-serif !important;
vertical-align: super; /* 將字母 s 設為上標 */
font-size: smaller; /* 可選，讓上標的字體稍微小一點 */
}
#phone-site i,#menu-site i {
color: green;
}
@media (max-width: 768px) {
#phone-site i,#menu-site i {
color: white;
}
}
/* 關閉按鈕樣式 */
.close-btn {
margin-top: 20px;
background-color: #4786bc;
color: #ffffff;
padding: 15px 15px;
border: none;
border-radius: 0px;
font-size: 16px;
cursor: pointer;
font-weight: 400;
border: 0.5px solid #a6a6a6;
letter-spacing: 0px;
width:100%;
}
.close-btn i {
font-size: 16px;  /* 設定圖示大小 */
margin-right: 8px; /* 圖示和文字之間的間距 */
}
.close-btn:hover {
background-color: #0056a3;
color: #ffffff;
}
.plus-sign {
margin-left: -8px;  /* 調整 + 號左邊的間距 */
margin-right: 0px; /* 調整 + 號右邊的間距 */
font-size: 20px;
vertical-align: middle; /* Align the + sign with the middle of the line-height of the icons */
}
@media (max-width: 768px) {
.plus-sign {
margin-left: -10px !important;  /* 調整 + 號左邊的間距 */
margin-right: 0px  !important; /* 調整 + 號右邊的間距 */
font-size: 16px  !important;
vertical-align: middle; /* Align the + sign with the middle of the line-height of the icons */
}
}
/* 保證 input-group 的對齊與高度一致 */
.input-group {
display: flex;
align-items: stretch;
border-radius: 0px;
overflow: hidden;
}
/* 設置 input-group-addon 的樣式 */
.input-group-addon {
display: flex;
align-items: center;
justify-content: center;
height: 38px;
font-size: 14px;
padding: 0 10px;
background-color: transparent;
border: 0.5px solid #ced4da;
border-right: none;
width: 100px;
}
/* 表單欄位樣式 */
.form-control {
height: 38px;
border: 0.5px solid #ced4da;
background-color: transparent;
padding-left: 10px;
font-size: 14px;
}
/* 調整 textarea 的 input group 附加區樣式 */
.input-group-addon-textarea {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
font-size: 14px;
padding: 0 10px;
background-color: transparent;
border: 0.5px solid #ced4da;
border-right: none !important; /* ✅ 強制取消右邊框線 */
width: 100px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
/* textarea 本體樣式 */
.form-control.textarea {
height: 120px;
resize: vertical;
background-color: transparent;
padding-left: 10px;
font-size: 14px;
border-top: 0.5px solid #ced4da;
border-right: 0.5px solid #ced4da;
border-bottom: 0.5px solid #ced4da;
border-radius: 0 8px 8px 0;
}
/* 錯誤提示樣式 */
.error, .has-error {
color: #cc3300;
font-size: 14px;
}
/* 保證所有文字欄位都使用14px的文字大小 */
input, textarea, .input-group-addon {
font-size: 14px;
}
/* 圖示與文字之間間距 */
.input-group-addon i,
.input-group-addon-textarea i {
margin-right: 8px;
}
/* 確認按鈕 */
.swal2-confirm {
background-color: #0056a3 !important;
color: #fff !important;
border: 0.5px solid #0056a3 !important;
box-shadow: none !important;
transition: all 0.3s ease;
font-size: 18px !important;
}
/* 確認按鈕 hover / active 狀態 */
.swal2-confirm:hover,
.swal2-confirm:active {
background-color: #000 !important;
color: #fff !important;
border: 0.5px solid #000 !important;
}
/* 取消按鈕 */
.swal2-cancel {
background-color: #6e6e6e !important;
color: white !important;
border: 0.5px solid #6e6e6e !important;
box-shadow: none !important;
transition: all 0.3s ease;
font-size: 18px !important;
}
/* 取消按鈕 hover / active 狀態 */
.swal2-cancel:hover,
.swal2-cancel:active {
background-color: #000 !important;
border: 0.5px solid #000 !important;
color: #fff !important;
}
/* 針對手機版的字體大小調整 */
@media (max-width: 768px) {
.swal2-title,
.swal2-content,
.swal2-confirm,
.swal2-cancel {
font-size: 18px !important;  /* 確保手機版所有文字為 16px */
}
}
#button-container {
display: flex;
/*height: 100vh;*/
flex-direction: row;
justify-content: center;
align-items: center;
}
.primary-button {
position: relative;
border: 1px solid #4786bc;
border-radius: 0px;
width: 200px;
height: 48px;
overflow: hidden;
background-color: #4786bc;
text-transform: uppercase;
color: #ffffff;
font-size: 16px;
font-family: "Rubik", sans-serif;
font-weight: 500;
}
.primary-button:hover {
color: #ffffff;
cursor: pointer;
border: 1px solid #000000;
background-color: #000000;
}
.primary-button .round {
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 5px;
left: 10px;
z-index: -1;
animation: scale-down 0.2s forwards;
}
.primary-button.animate .round {
animation: scale-up 0.5s forwards;
}
@keyframes scale-up {
to {
transform: scale(600);
}
}
@keyframes scale-down {
from {
transform: scale(600);
}
to {
transform: scale(0);
}
}
@keyframes ani_btn_hover {
0% {
-webkit-transform: translate(-110%, 0);
transform: translate(-110%, 0);
}
100% {
-webkit-transform: translate(110%, 0);
transform: translate(110%, 0);
}
}
.view-all-position
{
text-align:center;
margin-top:10px;
margin-bottom:100px;
}
/* FORM - BUTTON */
.btn-style {
position: relative;
display: inline-block;
vertical-align: middle;
width: 250px;
height: 48px;
font-size: 1rem;
font-weight: 500;
line-height: 46px;
text-align: center;
white-space: nowrap;
margin: 0;
padding: 0 1%;
border-style: solid;
border-width: 1px;
-webkit-transition: background .2s, color .2s, border .2s;
transition: background .2s, color .2s, border .2s;
border-color: #014a8c;
background-color: transparent;
color: #014a8c;
overflow: hidden;
}
.btn-style:before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
width: 100%;
display: block;
background: white;
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0)));
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
-webkit-transform: scaleX(0) translate(0, 0);
transform: scaleX(0) translate(0, 0);
}
.btn-style span {
font-family: 'M PLUS 1p', sans-serif !important;
color: inherit;
letter-spacing:2px;
}
.btn-style span i {
margin-left: 10px;
margin-right: 10px;
}
.btn-style:link {
color: #014a8c;
}
.btn-style:link:hover {
color: #fff;
text-decoration: none;
font-weight: 600;
}
.btn-style:hover {
color: #fff;
background: #014a8c;
border-color: #014a8c;
}
.btn-style:hover:before {
-webkit-animation: ani_btn_hover .4s linear;
animation: ani_btn_hover .4s linear;
}
.btn-style:hover:after {
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.btn--list {
padding-left: 2.2%;
}
.btn--list span {
position: relative;
display: block;
}
.btn--list span:after {
content: '';
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 2px;
width: 12px;
height: 12px;
background: url(images/icon_grid.png) no-repeat 0 0;
background-size: 100% auto;
}
.btn--list:link:hover span:after, .btn--list:hover span:after {
background-position: 0 100%;
}
@media (max-width: 768px) {
.btn-style {
font-size: 0.875rem;
width: 200px !important;
height: 45px;
line-height: 43px;
}
}
@media (max-width: 399px) {
.btn-style {
width: 100%;
}
}
.pagination-container {
text-align: center;            /* Center the pagination controls */
margin-top: 20px;              /* 20px margin from the top */
margin-bottom: 50px;           /* 20px margin from the bottom */
}
.page-button {
/*   font-family: 'M PLUS 1p', sans-serif !important;*/
background: transparent;
border: 0.5px solid #ced4da;
color: #0056a3;
padding: 0px 15px;
margin: 0 0px;
border-radius: 0px;
text-decoration: none;
font-weight: bold;
display: inline-block;
font-weight: 300;
}
.page-button:hover {
background-color: #4786bc;
color: #ffffff;
cursor: pointer;
text-decoration: none;
font-weight: 500;
}
.page-button:active {
background-color: #0056a3;
color: #ffffff;
}
.page-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
opacity: 0.5;  /* Set opacity to make the button look disabled */
}
.page-button.active {
background-color: #0056a3;
color: #ffffff;
}
.page-button:disabled.active {
background-color: #cccccc;  /* Disable active button's color */
}
.paginator {
font: 12px Arial, Helvetica, sans-serif;
padding: 15px 0px 10px 0;
margin: 0px;
text-align:center;
cursor: pointer; 
}
.paginator a {
padding: 5px 10px;
border: solid 1px #ddd;
background: #fff;
text-decoration: none;
margin-right: 2px;
color: #0056a3;
}
.paginator a:hover {
color: #fff;
background: #4786bc;
border-color: #4786bc;
text-decoration: none;
}
.paginator a:visited {
padding: 1px 6px;
border: solid 1px #ddd;
background: #fff;
text-decoration: none;
color: #4786bc;
}
.paginator .cpb {
padding: 5px 12px;
font-weight: bold;
font-size: 13px;
border: none;
color: #ffffff;
background: #4786bc;
}
/* 手機模式下的設置 */
@media (max-width: 767.98px) {
.paginator {
font-size: 12px;
display: flex;
flex-wrap: wrap;  /* 讓頁碼按鈕換行 */
justify-content: center; /* 居中對齊 */
gap: 0px;                /* 減小間距 */
}
.paginator a {
padding: 6px 8px;
}
.paginator .cpb,
.paginator .first-page,
.paginator .last-page {
font-size: 12px;            /* 減小字體大小 */
padding: 6px 8px;          /* 減小內邊距 */
width: auto;                /* 讓按鈕的寬度根據內容自適應 */
min-width: 10px;            /* 設置最小寬度，防止太小 */
text-align: center;         /* 文字居中 */
}
/* 避免頁碼按鈕重疊，並確保它們不會被壓縮 */
.paginator {
flex-direction: row;  /* 讓頁碼按鈕保持橫向排列 */
}
/* 防止頁碼按鈕太多時內容重疊 */
.paginator .page-button {
flex: 0 1 auto; /* 防止過度擠壓 */
}
}