/* ===== 全站背景圖設定 ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f8fafc; /* 背景底色，可搭配圖片主色 */
  background-image: url("../images/bg.png"); /* ← 路徑依實際放置修正 */
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: cover; /* 讓圖片隨螢幕自動縮放 */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7); /* 白霧效果，可改深淺 */
  pointer-events: none;
  z-index: -1;
}


img {
	image-rendering: crisp-edges; /* 適用於像素風格的圖片 */
	image-rendering: optimizeQuality; /* 提高渲染質量 */
}
/* 重置一些默認樣式 */
body, h2, p {
	margin: 0;
	padding: 0;
	font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
}
/* 容器樣式 */
.container {
	width: 100%;padding-bottom:30px;
}
/* 通用 DIV 樣式 */
.box {
	width: 100%;
	height:auto;
	/*min-height: 100vh; /* 每個 DIV 至少佔滿整個視窗高度 */
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	text-align: center;
	padding: 5% 20px;
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* 各個 DIV 的背景圖片 */
.box1 {
	z-index:11;
	background-image: var(--top-banner);
	position: relative; /* 確保 z-index 生效 */
	min-height:40vh;
}
@media (max-width: 1024px) {
.box1 {
    min-height: 30vh;
	}
}
 
@media (max-width: 600px) {
.box1{
    min-height: 26vh;
    margin: 0 0 5px 0;
	}
}
.box2 {
	z-index:12;
	position: relative; /* 確保 z-index 生效 */
	min-height: 30vh;
	width: 100%; /* 確保外部 DIV 寬度為 100% */
	padding: 5px 20px;
}
.inner-container {
	display: flex; /* 使用 flexbox 來排列內部 DIV */
	max-width: 1280px; /* 設定最大寬度為 1200px */
	width: 100%; /* 使其寬度為 100% */
	margin: 0 auto; /* 使其居中對齊 */
	flex-wrap: wrap; /* 允許內部 DIV 自動轉行 */
}
.half-box {
	flex: 1; /* 每個內部 DIV 佔據相同的空間 */
	max-width: 100%; /* 最大寬度 50% */
	box-sizing: border-box; /* 包含邊框和內邊距在內 */
	padding: 0 10px 10px 10px; /* 添加內邊距 */
}
.box3 {
	background-image: url("../images/bg_01.png");
	z-index:13;
	position: relative; /* 確保 z-index 生效 */
	padding: 3% 20px;
	min-height: 30vh;
}
.box4 {
	background-image: url("../images/bg_02.png");
	z-index:14;
	position: relative; /* 確保 z-index 生效 */
	padding: 3% 20px;
	min-height: 30vh;
}
.box5 {
	background-image: url("../images/bg_03.png"); /* 請準備此圖片 */
	z-index:15;
	position: relative; /* 確保 z-index 生效 */
	padding: 3% 20px;
	min-height: 30vh;
}
.page {
	background-image: url("../images/page_top_bg.png");
	z-index:11;
	position: relative; /* 確保 z-index 生效 */
	min-height:50px;
	padding:10% 20px;
}
/* 文字樣式 */
h2 {
	font-size: 2.5rem;
	margin-bottom: 20px;
}

/* 使用CSS变量定义图片 */
:root {
    --desktop-img-1: url('../images/box3-01.png');
    --desktop-img-2: url('../images/box4-01.png');
    --desktop-img-3: url('../images/box5-01.png');
    --desktop-img-4: url('../images/banner-02-title.png');
    --mobile-img-1: url('../images/mobile/box3-01.png');
    --mobile-img-2: url('../images/mobile/box4-01.png');
    --mobile-img-3: url('../images/mobile/box5-01.png');
    --mobile-img-4: url('../images/mobile/banner-02-title.png');
}

.title {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
	height: 100px;
}

.title img {
    display: none;
}

/* 使用CSS变量设置图片 */
.title.img-1 {
    background-image: var(--desktop-img-1);
}

.title.img-2 {
    background-image: var(--desktop-img-2);
}

.title.img-3 {
    background-image: var(--desktop-img-3);
}

.title.img-4 {
    background-image: var(--desktop-img-4);
}
/* 響應式設計 */
@media (max-width: 1024px) {
    .title.img-1 {
        background-image: var(--mobile-img-1);
    }
    
    .title.img-2 {
        background-image: var(--mobile-img-2);
    }
    
    .title.img-3 {
        background-image: var(--mobile-img-3);
    }
    .title.img-4 {
        background-image: var(--mobile-img-4);
    }
.container {
	padding-bottom:0px;
}
 .page {
 height:350px;
}
 h2 {
 font-size: 1.8rem;
}
 p {
 font-size: 1rem;
}
 .half-box {
 padding: 10px 5px 0px 5px;
 max-width: 90%; /* 將最大寬度設為 100% */
 flex: 0 0 100%; /* 使每個內部 DIV 佔據整行 */
 margin: 0 auto;
}

}
/* 可選：添加滾動動畫效果 */
.box {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.box.visible {
	opacity: 1;
	transform: translateY(0);
}
.banner-container {
	display: grid;
	grid-template-columns: 4fr 1fr 1fr; /* 4:1:1 比例 */
	gap: 10px; /* 间距 */
	width: 100%;
	/*max-width: 600px; /* 最大宽度限制 */
    margin: 10px auto; /* 水平居中 */
	box-sizing: border-box;
	padding-top:3px;
}
/* 400x100 横幅 - 原有樣式 + 圓角 + 陰影 + 跳動 */
.banner-400x100 {
	aspect-ratio: 4.1 / 1; /* 4:1 比例 */
	background: url('../banner/box2_01.png') center/cover no-repeat;
	width: 100%; /* 宽度随父容器伸缩 */
	height: auto; /* 高度由 aspect-ratio 自动计算 */
	text-indent: -9999px; /* 將文字推到畫面外 */
	overflow: hidden; /* 隱藏超出範圍的內容 */
	white-space: nowrap; /* 防止文字換行 */
	/* 新增圓角（弧形邊）*/
    border-radius: 53px; /* 調整數值可改變圓角大小 */
	/* 新增陰影效果 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 標準陰影 */
	/* 跳動動畫 */
    animation: pulse 1.5s infinite ease-in-out;
}

/* 跳動動畫定義 */
@keyframes pulse {
 0%, 100% {
 transform: scale(1);
}
 50% {
 transform: scale(1.03);
}
}
/* 懸停時陰影加深 + 動畫加快 */
.banner-100x100-1:hover, .banner-100x100-2:hover, .banner-400x100:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); /* 懸停時陰影更深 */
	animation: pulse 0.8s infinite ease-in-out;
}
/* 100x100 方形 */
.banner-100x100-1, .banner-100x100-2 {
	aspect-ratio: 1 / 1; /* 1:1 比例 */
	width: 100%; /* 宽度随父容器伸缩 */
	height: auto; /* 高度由 aspect-ratio 自动计算 */
	text-indent: -9999px; /* 將文字推到畫面外 */
	overflow: hidden; /* 隱藏超出範圍的內容 */
	white-space: nowrap; /* 防止文字換行 */
	/* 新增圓角（弧形邊）*/
    border-radius: 90px; /* 調整數值可改變圓角大小 */
	/* 新增陰影效果 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 標準陰影 */
	/* 跳動動畫 */
    animation: pulse 1.5s infinite ease-in-out;
}
.banner-100x100-1 {
	background: url('../banner/box2_02.png') center/cover no-repeat;
}
.banner-100x100-2 {
	background: url('../banner/box2_03.png') center/cover no-repeat;
}
.banner-400x100, .banner-100x100-1, .banner-100x100-2 {
	text-indent: -9999px; /* 將文字推到畫面外 */
	overflow: hidden; /* 隱藏超出範圍的內容 */
	white-space: nowrap; /* 防止文字換行 */
}

@media (max-width: 600px) {
    .box.box2 {
        padding: initial; /* 或者其他你想要的默认值 */
    }
}