body {
	background-image: url("../images/bg.png");
	background-size: cover; /* 或 contain / 100% 100% */
	background-attachment: fixed; /* 可选：固定背景 */
	background-repeat: no-repeat;
	background-position: center;
	padding-top: 80px;
	margin: 0;
	font-size:16px;
}
.ProductPurchase {
    background-image: url(../images/buy_button.gif);
    background-size: contain;       /* 保持圖片比例，完整顯示 */
    background-repeat: no-repeat;   /* 防止重複 */
    background-position: center;    /* 圖片置中 */
    width: 130px;
    height: 130px;
    position: fixed;
    bottom: 5px;
    z-index: 1001;
    cursor: pointer;                /* 滑鼠懸停時顯示手指指標 */
}

/* 左下角按鈕 */
.ProductPurchase.left {
    left: 0;
}

/* 右下角按鈕 */
.ProductPurchase.right {
    right: 5px;
}
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:150px;*/
}
/* 通用 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: 15% 20px;
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* 各個 DIV 的背景圖片 */
.box1 {
	background-image: url("../images/top_bg.png");
	z-index:11;
	position: relative; /* 確保 z-index 生效 */
	min-height:100vh;
}
.box2 {
	z-index:12;
	position: relative; /* 確保 z-index 生效 */
	min-height: 50vh;
	width: 100%; /* 確保外部 DIV 寬度為 100% */
	padding: 20px 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: 10px; /* 添加內邊距 */
}
.box3 {
	background-image: url("../images/bg_01.png");
	z-index:13;
	position: relative; /* 確保 z-index 生效 */
}
.box4 {
	background-image: url("../images/bg_02.png");
	z-index:14;
	position: relative; /* 確保 z-index 生效 */
	margin-top: -9%; /*  向上移動與上一個box 重疊 */
}
.box5 {
	background-image: url("../images/bg_03.png"); /* 請準備此圖片 */
	z-index:15;
	position: relative; /* 確保 z-index 生效 */
	margin-top: -9%; /*  向上移動與上一個box 重疊 */
}
.page {
	background-image: url("../images/page_top_bg.png");
	z-index:11;
	position: relative; /* 確保 z-index 生效 */
	min-height:50px;
	padding:10% 20px;
}
/* 文字樣式 */
h2 {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	font-size: 2.5rem;
	margin-bottom: 20px;
}



/* 響應式設計 */
@media (max-width: 1024px) {
.ProductPurchase {
	z-index: 999;

}
 .page {
 height:350px;
}
 h2 {
 font-size: 1.8rem;
}
 p {
 font-size: 1rem;
}
 .half-box {
 max-width: 100%; /* 將最大寬度設為 100% */
 flex: 0 0 100%; /* 使每個內部 DIV 佔據整行 */
}
 .box1 {
 min-height:50vh;
}
}
/* 可選：添加滾動動畫效果 */
.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 {
        padding: 25% 20px 5% 20px;
    }
    .box.box2 {
        padding: initial; /* 或者其他你想要的默认值 */
    }
}