@media (width: 1024px) {
	.navbar-nav>.nav-item {
		margin-left: 0 !important;
	}
}

/* 手機 + iPad mini/Air 都要這樣排 */
@media (max-width: 820px) {

	ul.navbar-nav.mb-2.mb-lg-0.me-lg-2 {
		margin-top: 60px;
		margin-right: 20px;
		margin-left: 20px;
	}
}


.arrow-left,
.arrow-right {
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	vertical-align: middle;
}

/* 左箭頭 */
.arrow-left {
	border-width: 7px 10px 7px 0;
	border-color: transparent #fff transparent transparent;
}

/* 右箭頭 */
.arrow-right {
	border-width: 7px 0 7px 10px;
	border-color: transparent transparent transparent #fff;
}

.container.position-relative.menu-container {
	padding-right: 20px;
}


@media (min-width: 768px) and (max-width: 991.98px) {
	ul#myTab .nav-item .nav-link {
		padding: 15px 120px !important;
		/* 調整 iPad 上的間距 */

	}

	.row>* {
		padding-left: calc(var(--bs-gutter-x) * 0.9) !important;
		/* 調整 iPad 上的間距 */
	}
}



@media (min-width: 768px) and (max-width: 1024px) {
	.navbar .nav-link {
		font-size: 10pt !important;
		/* 調整 iPad 上的字體大小 */
	}

	.custom-cart-btn,
	.custom-shop-btn {
		font-size: 11pt !important;
		/* 調整 iPad 上的字體大小 */
	}


	.container,
	.container-lg,
	.container-md,
	.container-sm {
		max-width: 1024px !important;
	}
}


@media (min-width: 768px) and (max-width: 991.98px) {
	.container.position-relative.menu-container {
		margin: 0px !important;
		padding: 0px !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 0px !important;
		/* 只在桌機版調整右側間距 */

	}
}

@media (min-width: 1024px) {
	.member-paragraph {
		padding: 0px 120px;
	}
}



/* iPad 版本專用樣式 */
@media (min-width: 768px) and (max-width: 1024px) {
	.about-haba-section {
		padding: 0px 20px !important;
		/* 設定 iPad 上的 padding */
	}
}



/* 平板設備專用樣式 */
@media (min-width: 768px) and (max-width: 1024px) {
	.image-button-row {
		gap: 20px;
		/* 設定平板上的間距為 0px */
	}
}


/* 手機版調整 */
@media (max-width: 767.98px) {
	.discount-badge {
		position: absolute;
		top: 8px;
		/* 微調圖示的垂直位置 */
		right: 10px;
		/* 靠右邊一點 */
		max-width: 25%;
		/* 手機版圖標尺寸適當調整 */
	}
}

/* 桌面版 */
.product-card {
	position: relative;
	/* 設定父容器為相對定位，以便子元素 (小圖示) 使用絕對定位 */
}

.discount-badge {
	position: absolute;
	top: 10px;
	/* 頂部間距 */
	right: 10px;
	/* 右側間距 */
	max-width: 20%;
	/* 調整圖示的大小 */
}

.question {
	color: #069;
	font-weight: bold;
	text-align: left;
	padding: 10px;
	margin: 0px;
	scroll-margin-top: 100px;
	/* 根據 header 高度調整 */
}



.answer {
	text-align: left;
	padding: 10px;
	margin: 0px;
}


/* 手機版表格橫向捲動 */
@media (max-width: 768px) {
	.card-body {
		overflow-x: auto;
	}

	table {
		min-width: 600px;
		/* 或依你表格內容微調 */
	}

	.card-body::-webkit-scrollbar {
		height: 6px;
	}

	.card-body::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 3px;
	}

	/* 限制地圖 icon 圖片大小 */
	.card-body img {
		max-width: 100%;
		height: auto;
	}
}


.custom-collapse-btn {
	background: #f4f4f4;
	color: #333;
	border: 1px solid #ccc;
	padding: 10px 16px;
	font-weight: bold;
	position: relative;
}

.custom-collapse-btn .toggle-icon {
	font-weight: normal;
	transition: transform 0.3s ease;
}

@media (max-width: 768px) {
	.timeline-container {
		padding: 0 !important;
	}
}

.custom-img-col {
	flex: 1 1 calc(25% - 24px);
	/* 一列四張、gap留空間 */

}

.equal-height-img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 768px) {
	.custom-img-col {
		flex: 1 1 calc(50% - 12px);
		/* 手機變兩張一列 */
		max-width: calc(50% - 12px);
	}
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 每列 2 張 */
	gap: 16px;
	margin-top: 20px;
}

.image-grid img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

/* 手機版：一列一張 */
@media (max-width: 575.98px) {
	.image-grid {
		grid-template-columns: 1fr;
	}
}

.about-haba-section {
	padding: 0px 20px;
	/* 預設手機／平板 padding */
}

.responsive-img {
	width: 100%;
	height: auto;
}

.haba-tab-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 8px;
	max-width: 600px;
	margin: 20px auto;
}

.tab-btn {
	display: block;
	text-align: center;
	padding: 10px;
	background: #f4f4f4;
	color: #333;
	border: 1px solid #ccc;
	text-decoration: none;
	font-size: 16px;
	border-radius: 4px;
	transition: background 0.3s, color 0.3s;
}

.tab-btn.active {
	background-color: #000;
	color: #fff;
	font-weight: bold;
	border-color: #000;
}

.tab-btn:hover {
	background: #ddd;
}

.tab-btn.active {
	background-color: #000;
	color: #fff;
	font-weight: bold;
	border-color: #000;
}


/* 桌機版才套用左右 200px padding */
@media (min-width: 992px) {
	.about-haba-section {
		padding: 0px 200px;
	}
}

.sub-title {
	color: #069;
	font-weight: bold;
	text-align: left;
}

.sub-paragraph {
	text-align: left;
}

/* 確保網站內容不會超過螢幕寬度 */
html,
body {
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


body {
	font-family: Helvetica, Arial, "微軟正黑體", sans-serif;
	overflow-x: hidden;
	/* 禁止水平方向的滾動條 */
}

/* Logo 間距 */
@media (max-width: 992px) {
	.navbar-brand {
		margin-right: 40px;
	}
}

@media (max-width: 1280px) {
	.navbar-nav {
		flex-wrap: nowrap;
	}

	.navbar-brand {
		margin-right: 20px;
	}
}


@media (max-width: 991px) {
	.logo-mobile {
		padding: 0px 0px 0px 40px;

	}
}



/* 導覽列固定樣式(電腦) */
@media (min-width: 1200px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 1280px;
	}
}

.navbar {
	padding: 0px;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 防止文字換行 */
.navbar-nav .nav-link {
	white-space: nowrap;
}


/* 預設間距 */
.navbar-nav .nav-link {
	padding-left: 1rem;
	padding-right: 1rem;
	white-space: nowrap;
}

/* 螢幕變小時調整間距 */
@media (max-width: 1280px) {
	.navbar-nav .nav-link {
		padding-left: 4px;
		padding-right: 4px;
	}
}

@media (max-width: 768px) {
	.container-fluid {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* 導覽列項目間距 */
.navbar-nav>.nav-item {
	margin-left: 10px;
	margin-right: 10px;
}



/* nav-link 基本樣式 */
.navbar .nav-link {
	position: relative;
	font-weight: 500;
	color: #251E1C;
	letter-spacing: 0.05em;
	font-size: 12pt;
	padding: 16px 10px;
	transition: color 0.3s ease;
}

/* hover 文字變色 */
.navbar .nav-link:hover {
	color: #b60005;
}

/* 只有非 dropdown-toggle 才有底線動畫 */
.navbar .nav-link:not(.dropdown-toggle)::after {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 10%;
	width: 0%;
	height: 2px;
	background-color: #b60005;
	transition: width 0.4s ease-in-out;
}

.navbar .nav-link:not(.dropdown-toggle):hover::after {
	width: 80%;
}

a.nav-link.btn.btn-outline-secondary.px-3 {
	border: 1px solid #000;
	/* 預設邊框為黑色 */
	color: #000;
	/* 預設文字為黑色 */
	background-color: transparent;
	/* 背景為透明 */
}



/* 設定購物車按鈕常態樣式 */
.custom-cart-btn,
.custom-shop-btn {
	/* border: 1px solid #000; */
	color: #ffffff;
	background-color: #333;
	padding: 8px 16px;
	border-radius: 999px;
	/* 圓角樣式 */
	text-decoration: none;
	/* 去除底線 */
	white-space: nowrap;
	/* 防止文字換行 */
	display: inline-block;
	/* 或者使用 inline-flex，根據需求 */
}

/* 設定購物車按鈕 hover 時樣式 */
.custom-cart-btn:hover,
.custom-cart-btn:focus .custom-shop-btn:hover,
.custom-shop-btn:focus {
	border-color: #b60005;
	/* hover 時邊框顏色為紅色 */
	color: #fff;
	/* hover 時文字顏色為白色 */
	background-color: #b60005;
	/* hover 時背景為紅色 */
}

/* 設定購物車按鈕點擊後樣式 */
.custom-cart-btn:active .custom-shop-btn:active {
	border-color: #b60005;
	/* 點擊後邊框顏色為紅色 */
	color: #fff;
	/* 點擊後文字顏色為白色 */
	background-color: #b60005;
	/* 點擊後背景為紅色 */
}

.custom-shop-btn {
	margin-top: 20px;
	/* 調整按鈕上方的間距 */
}

@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav {
		flex-direction: row;
		display: flex;
		align-content: space-between;
		align-items: center;
	}
}

/* 設定 dropdown-toggle 按鈕 hover 時動畫 */
.navbar .nav-link.dropdown-toggle[href="#"]:hover::before {
	width: 80%;
}


/* 螢幕變小時調整間距 */
@media (max-width: 992px) {
	.navbar-nav .nav-link {
		padding-left: 2px;
		padding-right: 2px;
	}
}

@media (max-width: 768px) {
	.container-fluid {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* 導覽列樣式(手機) */
.navbar-toggler {
	border: none;
	/* 去除邊框 */
	background-color: transparent;
	/* 背景透明 */
}

/* 下拉子選單 - 右側展開 */
.dropdown-submenu {
	position: relative;
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-left: 0.1rem;
	margin-top: -0.25rem;
	display: none;
	position: absolute;
	z-index: 1000;
}

/* 顯示隱藏控制（搭配 JavaScript） */
.dropdown-menu .dropdown-menu.show {
	display: block;
}

/* ---------- 桌機用：巢狀選單 hover 展開 ---------- */
/* ⚠️ 改成只在桌機啟用 hover 顯示 */
@media (min-width: 992px) {
	.dropdown-submenu:hover>.dropdown-menu {
		display: block;
	}
}


/* 給 dropdown-toggle 用 before 畫紅線動畫 */
.navbar .nav-link.dropdown-toggle[href="#"]::before {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 10%;
	width: 0%;
	height: 2px;
	background-color: #b60005;
	transition: width 0.4s ease-in-out;
}

.mobile-bottom-nav a {
	text-decoration: none;
	font-size: 0.85rem;
}

.mobile-bottom-nav i {
	display: block;
	line-height: 1.2;
}

.mobile-bottom-nav .badge {
	font-size: 0.6rem;
	padding: 0.3em 0.4em;
	z-index: 1;
}

/* 保持響應式設計的基本結構 */
@media (max-width: 992px) {

	/* 手機版選單樣式 */
	.navbar-expand-lg {
		/* 移除電腦版的樣式，只在手機版顯示 */
		display: block !important;
	}

	.navbar-nav {
		display: block;
		padding-left: 0;
		padding-right: 0;
	}

	.navbar-nav .nav-item {
		width: auto;
		text-align: left;
		border-bottom: 1px solid #ccc;
		/* 每一個選項有底線 */
	}


	.navbar-nav .nav-item.search a {
		border: none !important;
		text-decoration: none !important;
	}



	/* 漢堡選單 */
	.navbar-toggler {
		background-color: transparent;
		border: none;
	}



	/* Logo 只在手機版顯示 */
	.navbar-brand.d-lg-none {
		display: block;
	}

	.navbar-brand.d-none.d-lg-block {
		display: none;
	}

	/* 搜尋框與icon在手機版顯示 */
	.searchToggle {
		display: block;
	}

	/* 排除掉其他電腦版icon */
	.navbar-nav .d-none.d-lg-flex {
		display: none;
	}


	.dropdown-menu {
		display: none;
		/* 預設隱藏下拉選單 */
	}

	.dropdown-menu.collapse.show {
		display: block;
		/* 顯示收合狀態的下拉選單 */
	}


	/* 確保手機版下拉選單點擊後顯示 */
	.navbar-nav .dropdown-toggle:focus {
		outline: none;
	}


	/* 調整選單文字 */
	.navbar-nav .nav-link {
		font-size: 16px !important;
		/* 字體大小可以調整 */
		padding: 10px 10px;
		color: #5D463A;
		/* 調整顏色 */
	}



	/* 取消 hover 時底線動畫 */
	.navbar .nav-link:not(.dropdown-toggle)::after {
		content: none !important;
		/* 取消底線的顯示 */
	}

	/* 取消 hover 時的紅色變化 */
	.navbar .nav-link:hover {
		color: inherit;
		/* 恢復為正常顏色，不改變 */
	}


}



/* 跑馬燈樣式 */
.marquee-wrapper {
	background-color: #5D463A;
	height: 40px;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0 50px;
	/* 讓左右箭頭外面留空間 */
	position: relative;
	color: white;
	font-weight: 500;
	font-size: 14px;
	user-select: none;
}

.marquee-link {
	flex: 1;
	text-decoration: none;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.marquee-link.hide {
	opacity: 0;
}

/* 按鈕共通 */
.marquee-btn {
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 100%;
	background: transparent !important;
	border: none !important;
	color: white !important;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	transition: background 0.3s;
	z-index: 10;
	outline: none !important;
	box-shadow: none !important;
	padding: 0;
	border-radius: 0;
}

.marquee-btn.left {
	left: 0;
	border-radius: 4px 0 0 4px;
	font-size: 12px;
}

.marquee-btn.right {
	right: 0;
	border-radius: 0 4px 4px 0;
	font-size: 12px;
}

.marquee-btn:hover {
	background: rgba(0, 0, 0, 0.4);
}

.marquee-btn:focus,
.marquee-btn:active {
	outline: none !important;
	box-shadow: none !important;
}


/* 縮小手機版Logo */
@media (max-width: 576px) {
	.navbar-brand img {
		height: 60px !important;
	}
}

/* 針對手機狀態調整 hover 寬度 */
@media (max-width: 768px) {

	.navbar .nav-link:not(.dropdown-toggle)::after,
	.navbar .nav-link.dropdown-toggle[href="#"]::before {
		left: 50%;
		transform: translateX(-50%);
		width: 0;
	}

	.navbar .nav-link:not(.dropdown-toggle):hover::after,
	.navbar .nav-link.dropdown-toggle[href="#"]:hover::before {
		width: 60%;
	}
}



/* 自動輪播圖區塊 */

.carousel-control-prev,
.carousel-control-next {
	width: auto;
	height: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	/* 禁用整個按鈕區域的事件觸發 */

}

@media (max-width: 1920px) {
	.carousel-control-prev {
		left: 150px !important;
		/* 向左移動箭頭，調整至更接近圖片 */
	}

	.carousel-control-next {
		right: 150px !important;
		/* 向右移動箭頭，調整至更接近圖片 */
	}
}

@media (max-width: 576px) {
	.carousel-control-prev {
		left: 5px !important;
		/* 向左移動箭頭，調整至更接近圖片 */
	}

	.carousel-control-next {
		right: 5px !important;
		/* 向右移動箭頭，調整至更接近圖片 */
	}
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	width: 30px;
	/* 調整大小 */
	height: 30px;
	/* 調整大小 */
	background-color: #000;
	/* 圓形背景色，根據需要調整 */
	border-radius: 50%;
	pointer-events: auto;
	/* 只有圓形箭頭會觸發事件 */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
	cursor: pointer;
}

.carousel-indicators button {
	border: none;
	background-color: transparent;
	box-shadow: none;
}

button::after {
	background: transparent !important;
	/* 移除紅色背景 */
}

/* 全屏顯示圖片 */
img.d-block.w-100 {
	width: 80% !important;
	display: block;
	margin: auto;
	/* margin-right: auto; 可以根據需要開啟 */
}

/* 針對手機版的樣式調整 */
@media (max-width: 576px) {

	/* 確保圖片的寬度為100%，並清除不必要的外邊距 */
	img.d-block.w-100 {
		width: 100% !important;
		margin: 0;
		padding: 0;
		/* 如果有多餘的 padding，也可以清除 */
	}
}


/* === 主視覺輪播區塊 mySwiper 專用 === */
.mySwiper {
	width: 100%;
	overflow: visible;
	padding-top: 20px;
	padding-bottom: 60px;
	box-sizing: border-box;
}

/* 分頁點樣式 */
.swiper-pagination {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

/* 只影響 .mySwiper 中的 .swiper-slide */
.mySwiper .swiper-slide {
	width: 1200px;
	height: 629px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* 其他 Swiper 區塊的 .swiper-slide 不受影響 */
.eventSwiper .swiper-slide {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 12px;
}

.recommend-swiper .swiper-slide {
	width: auto;
	height: auto;
}

/* 修正非 Swiper 圖片區塊的排版 */
.product-block {
	display: flex;
	flex-direction: column;
	/* 確保圖片在上，文字在下 */
	align-items: center;
	/* 使圖片與文字居中 */
	margin: 20px;
}

.product-image {
	max-width: 100%;
	height: auto;
	/* 保持比例 */
	object-fit: cover;
	/* 保持圖片填滿容器 */
	border-radius: 8px;
}

.product-card .title,
.product-card .price {
	margin: 5px 0;
	/* 保證文字間有空隙 */
}

.product-text {
	margin-top: 10px;
	text-align: center;

}

.product-text {
	overflow: visible !important;
	/* 確保文字區域可以顯示 */
	text-align: center;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	/* 讓文字自動換行 */
}

/* 手機版 RWD 調整 */
@media (max-width: 992px) {
	.swiper-slide {
		width: 100%;
		height: auto;
		/* 高度自適應 */
	}

	.product-card img {
		width: 100%;
		height: auto;
		/* 確保圖片比例保持 */
	}
}

@media screen and (min-width: 768px) and (max-width: 992px) {
	.floating-product {
		position: absolute;
		top: -200px !important;
		width: 300px !important;

	}

	.image-button-row {
		gap: 50px !important;
	}

}

.image-button-row {
	display: flex;
	align-items: center;
	margin-top: 20px;
	gap: 50px;
}


/* 主視覺圖片的樣式 */
.mySwiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* 其他區塊文字樣式 */
.product-text {
	font-size: 16px;
	line-height: 1.5;
}

/* ✅ 手機版主視覺輪播 RWD */
@media (max-width: 992px) {
	.mySwiper .swiper-slide {
		width: 100% !important;
		height: auto;
	}

	.mySwiper .swiper-slide img {
		width: 100%;
		height: auto;
		border-radius: 0;
	}

	.mySwiper .swiper-button-next,
	.mySwiper .swiper-button-prev {
		display: none;
	}

	.mySwiper {
		padding-bottom: 30px;
	}

	/* 手機版其他區塊樣式 */
	.product-block {
		margin: 10px;
	}
}



/* 活動輪播區塊 */
/* 手機版設定 .swiper-slide.product-card.swiper-slide-active 的 margin-left */
@media (max-width: 576px) {
	.swiper-slide.product-card.swiper-slide-active {
		margin-left: 10px;
	}
}

.swiper-button-prev.event-prev {
	position: relative;
	left: 5px !important;
}

.event-swiper-section {
	padding: 40px 0;
	background-color: #fff;
}

.event-card {
	border-radius: 8px;
	text-align: center;
	height: 100%;
}

.event-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 12px;
}

.event-card h5 {
	font-size: 16px;
	margin-bottom: 8px;
	color: #b60005;
}

.event-card p {
	font-size: 14px;
	color: #444;
	line-height: 1.4;
	margin: 0;
}

/* Swiper 箭頭調整 */
.swiper-button-prev.event-prev,
.swiper-button-next.event-next {
	color: #888;
	top: 50%;
	transition: color 0.3s ease;
	width: 30px !important;
	height: 30px !important;
	border: 2px solid #333 !important;
	border-radius: 50% !important;
	background-color: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: border-color 0.3s, background-color 0.3s !important;
}

/* 左箭頭 */
.swiper-button-prev.event-prev {
	position: absolute !important;
	top: 50%;
	left: 0;
	/* 靠左邊 0px */
	transform: translateY(-50%);
	z-index: 10;
}


/* 強制覆蓋 Swiper 預設箭頭字型內容 */
.swiper-button-prev.event-prev::after,
.swiper-button-next.event-next::after {
	font-family: swiper-icons !important;
	font-size: 12px !important;
	font-weight: bold;
	color: #333 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-variant: normal !important;
	line-height: 1 !important;
	opacity: 1 !important;
}

.eventSwiper .swiper-button-next:hover,
.eventSwiper .swiper-button-prev:hover {
	color: #b60005;
}

/* 分頁點樣式 */
.mainSwiper-pagination {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

.mainSwiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	transition: background 0.3s ease;
}

.mainSwiper-pagination-bullet-active {
	background: #b60005 !important;
}

.swiper-pagination {
	position: relative !important;
	bottom: 10px;
	text-align: center;
	z-index: 10;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	bottom: var(--swiper-pagination-bottom, 8px);
	top: var(--swiper-pagination-top, auto);
	left: 0;
	width: 100%;
	margin-top: 16pt;
}


/* hover 狀態 */
.swiper-button-prev.event-prev:hover,
.swiper-button-next.event-next:hover {
	border-color: #8a8a8a !important;
	background-color: rgba(231, 231, 231, 0.1) !important;
}

.swiper-button-prev.event-prev:hover::after,
.swiper-button-next.event-next:hover::after {
	color: #8a8a8a !important;
}

.eventSwiper {
	position: relative;
	/* 確保子元素絕對定位基準 */
}

/* 活動輪播區塊 */
/* 左箭頭 */
.swiper-button-prev.event-prev {
	position: absolute !important;
	top: 40%;
	left: 0px;
	/* 靠左邊 0px，可調整 */
	transform: translateY(-50%);
	z-index: 10;
}

/* 右箭頭 */
.swiper-button-next.event-next {
	position: absolute !important;
	top: 40%;
	right: 5px;
	/* 靠右邊 0px，可調整 */
	transform: translateY(-50%);
	z-index: 10;
}



.swiper-button-prev::after,
.swiper-button-next::after {
	font-family: swiper-icons !important;
	font-size: 12px !important;
	font-weight: bold;
	color: #333 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-variant: normal !important;
	line-height: 1 !important;
	opacity: 1 !important;
}

.swiper-button-next::after {
	font-family: swiper-icons !important;
	font-size: 12px !important;
	font-weight: bold;
	color: #333 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-variant: normal !important;
	line-height: 1 !important;
	opacity: 1 !important;
}

/* 修正 swiper-slide 中文字被卡住的情況 */
.recommend-swiper .swiper-slide {
	display: flex;
	flex-direction: column;
	/* 確保圖片和文字排成縱向 */
	align-items: center;
	/* 使內容居中對齊 */
	padding: 10px;
	/* 適當的內邊距 */
	box-sizing: border-box;
}

.product-card p {
	margin: 5px 0;
	/* 適當的字距 */
}


/* 品牌故事區塊 */
/* 共用的區塊 */
section.brand-story {
	background-color: #f5f5f5;
	padding: 60px 0;
	position: relative;
	z-index: 1;
}

.brand-story h2,
.brand-story p {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
	font-weight: bold !important;
	text-align: left;
	color: #5D463A;
}

.brand-story h2 {
	font-size: 32px;
}

.brand-story p {
	font-size: 16px;
}

/* 一般版型（桌機、手機版共用） */
.image-button-row {
	display: flex;
	align-items: center;
	margin-top: 20px;
	gap: 200px;
}

.floating-product-wrapper {
	position: relative;
	display: block;
}

/* 桌機版專用 */
@media (min-width: 768px) {
	.floating-product-wrapper {
		display: block;
	}

	.floating-product {
		position: absolute;
		right: -100px;
		top: -300px;
		width: 400px;
		max-width: none;
		z-index: 10;
		pointer-events: none;
	}
}

/* 手機版專用 */
@media (max-width: 767.98px) {

	/* 隱藏桌機版的產品圖 */
	.floating-product-wrapper {
		display: none;
	}

	/* 手機版調整按鈕的樣式 */
	.image-button-row {
		gap: 0;
	}
}

/* 自定按鈕樣式 */

.el_arwTxtLink a {
	gap: 12px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #333;
	font-weight: 500;
	padding: 8px 12px;
	position: relative;
}

.el_arwTxtLink a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	/* 預設為 100%，顯示底線 */
	height: 2px;
	background-color: #5e5e5e;
	transition: width 0.3s ease-in-out;
}

.el_arwTxtLink a:hover::after {
	width: 100%;
	/* hover 時，底線從左到右延伸 */
}

.el_arwTxtLink .txt {
	margin-right: 8px;
}

.el_arwTxtLink .el_icon_ellipse {
	width: 24px;
	height: 24px;
	border: 2px solid #5e5e5e;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.3s, background-color 0.3s;
}

.el_arwTxtLink .el_icon.el_icon_arw {
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #5e5e5e;
	transition: border-left-color 0.3s;
}

.el_arwTxtLink a:hover {
	color: #5e5e5e;
	/* hover 時文字顏色 */
}

.el_arwTxtLink a:hover .el_icon_ellipse {
	border-color: #5e5e5e;
}

.el_arwTxtLink a:hover .el_icon.el_icon_arw {
	border-left-color: #5e5e5e;
}



/* 置頂banner圖樣式 */
.image-link-grid {
	padding: 120px 0px 0px 0px;
	background-color: #fff;
}

.image-link-grid img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.5s ease, box-shadow 0.5s ease;
	border-radius: 8px;
}

.image-link-grid a:hover img {
	transform: scale(1.03);
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);
}

/* 針對新設定的 class，設置圖片大小 */
.aboutsq-img {
	width: 60%;
	/* 設定圖片寬度為父容器的 100% */
	height: auto;
	/* 保持圖片的高度自動調整 */
}

/* 針對手機版的尺寸調整 */
@media (max-width: 576px) {
	.aboutsq-img {
		width: 80% !important;
		/* 設定手機版圖片寬度為 40% */
		height: auto;
		/* 保持高度比例 */
		padding-bottom: 10px;
	}
}


.aboutsq-section {
	padding: 60px 80px;
}

/* 手機版的 padding 調整 */
@media (max-width: 576px) {
	.aboutsq-section {
		padding: 30px 0px;
		/* 調整手機版的 padding 值 */
	}
}

/* From Uiverse.io by satyamchaudharydev */
button {
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
	--primary-color: #111;
	--hovered-color: #c84747;
	position: relative;
	display: flex;
	font-weight: 600;
	font-size: 20px;
	gap: 0.5rem;
	align-items: center;
}

button p {
	margin: 0;
	position: relative;
	font-size: 20px;
	color: var(--primary-color);
}

button::after {
	position: absolute;
	content: "";
	width: 0;
	left: 0;
	bottom: -7px;
	background: var(--hovered-color);
	height: 2px;
	transition: 0.3s ease-out;
}

button p::before {
	position: absolute;
	content: "";
	width: 0%;
	inset: 0;
	color: var(--hovered-color);
	overflow: hidden;
	transition: 0.3s ease-out;
}

button:hover::after {
	width: 100%;
}

button:hover p::before {
	width: 100%;
}

button:hover svg {
	transform: translateX(4px);
	color: var(--hovered-color);
}

button svg {
	color: var(--primary-color);
	transition: 0.2s;
	position: relative;
	width: 15px;
	transition-delay: 0.2s;
}

/* 整體 footer 樣式 */
.footer {
	padding: 60px 0px 0px 0px;
	background-color: #ffffff;
}

/* 圖片區塊 */
.footer-image {
	text-align: center;
	margin-bottom: 50px;
}

.footer-image img {
	max-width: auto;
	height: 250px;
}

/* 社群 icon */
.footer-social {
	display: flex;
	justify-content: center;
	background-color: #f5f5f5;
	padding: 10px 0;
}

.social-icon {
	margin: 0 15px;
	width: auto;
	height: 30px;
}

.footer-social a:hover .social-icon {
	opacity: 0.8;
}

/* 選單區塊 */
.footer-menu {
	background-color: #5D463A;
	/* 背景顏色 */
	padding: 20px 80px;
}

.link-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	/* 禁止換行 */
	margin-top: 20px;
}

.box {
	width: 16.6%;
	/* 6個選單在一列中，設置寬度為 16.6% */
	margin: 0 10px;
}

.box .ttl {
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	/* 改為白色文字 */
}

.txt-link-list {
	list-style-type: none;
	padding: 0px;
}

.txt-link-list li {
	margin: 5px 0;
}

.txt-link-list a {
	text-decoration: none;
	color: #ddd;
	/* 改為較淺的文字顏色 */
}

.txt-link-list a:hover {
	color: #fff;
	/* 滑鼠懸停時變為白色 */
}

.footer-menu .box-title {
	border-bottom: 1px solid white;
	padding-bottom: 8px;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;

	font-weight: bold;
	cursor: pointer;
	color: #fff;
	/* 白色文字 */
}

.footer-copyright {
	font-size: 12px;
	text-align: center;
	padding: 10px 0;
	background-color: #f8f8f8;
	/* 可依你網站背景調整 */
	color: #333;
	/* 可依你設計需求調整字色 */
	border-top: 1px solid #ddd;
	/* 細線效果 */
}

.footer-menu .toggle-icon {
	font-size: 18px;
	transition: transform 0.3s ease;
}

/* 預設情況下，顯示 toggle-icon */
.footer-menu .toggle-icon {
	display: block;
	/* 或者設為 inline-block，根據需求 */
}

/* 電腦版（大於 992px 螢幕）隱藏 toggle-icon */
@media (min-width: 992px) {
	.footer-menu .toggle-icon {
		display: none;
	}
}


/* 手機版導覽列最佳化（適用 max-width: 576px 以下） */
@media (max-width: 870px) {

	/* 手機版避免巢狀子選單往右展開 */
	.dropdown-menu {
		position: static !important;
		float: none;
	}

	.dropdown-submenu .dropdown-menu {
		margin-left: 0;
	}

	.navbar-nav {
		flex-direction: column;
		/* 讓導覽列項目垂直排列 */
		align-items: center;
		/* 導覽列項目置中 */
	}

	img.img-fluid {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		/* 如果要置中可加這行 */
		width: 100%;
	}

	.container-fluid {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		width: 100vw;
		max-width: 100vw;
	}

	html,
	body {
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		width: 100vw;
	}

	.footer-image img {
		height: 170px;
		width: auto;
		display: block;
		margin: 0 auto;
	}
}

/* 手機版footer頁 */
@media (max-width: 767.98px) {
	.footer-menu {
		padding: 10px 30px 50px 35px;
	}

	.footer-menu .link-wrap {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.footer-menu .box {
		width: 100%;
	}

	.footer-menu .box-title {
		padding: 15px;
		font-weight: bold;
		width: 90%;
	}

	.footer-menu .txt-link-list {
		padding: 0px 20px;
		display: none;
		/* 預設隱藏 */
	}

	.footer-menu .box.active .txt-link-list {
		display: block;
		/* 被點擊時顯示 */
	}

	.contact-img-box {
		max-width: 100%;
	}

	.contact-text-box {
		padding: 20px;
	}

	h3 {
		margin-top: 10px;
	}

	.image-link-grid {
		padding: 60px 0px 20px 0px;
	}

	section.brand-story {
		padding: 60px 20px;
	}
}

/* 內容區塊寬度與圖片滿版處理 */
.container,
.container-fluid,
.content-wrapper,
/* 可根據你的實際 class 名稱調整 */
.main-content {
	padding-left: 12px;
	padding-right: 12px;
}

.swiper-wrapper,
.swiper-slide {
	width: 100%;
	margin: 0 auto;
}

img.img-fluid.phone-full {
	width: 100vw;
	max-width: 100vw;
	object-fit: cover;
	display: block;
}

.menu-container {
	position: relative;
}

.menu-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 250px;
	/* 遮罩從選單寬度之後開始 */
	background: rgba(0, 0, 0, 0.5);
	z-index: 1040;
	display: none;
}

.menu-overlay.show {
	display: block;
}

/* 搜尋遮罩與搜尋框 */
#searchOverlay {
	display: none;
	/* 初始隱藏 */
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 2000;
}

#searchOverlay.show {
	display: block;
	/* 顯示時打開 */
}

#searchBox {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	width: 100%;
	max-width: 600px;
	height: 90px !important;
	background: #fff;
	padding: 1rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	border-radius: 0 0 8px 8px;
	transition: transform 0.25s ease;
}

#searchOverlay.show #searchBox {
	transform: translateX(-50%) translateY(0);
}

/* 手機版漢堡背景遮罩 */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 黑色遮罩 */
	display: none;
	z-index: 1050;
	/* 在選單上面 */
}

/* 修改漢堡選單展開的寬度 */
.navbar-collapse {
	position: fixed;
	top: 0;
	left: -80%;
	/* 初始位置在外面 */
	width: 80%;
	height: 100%;
	background-color: #fff;
	transition: left 0.3s ease-in-out;
	/* 預設滑動效果 */
	z-index: 1060;
	/* 在遮罩上面 */
}

.navbar-collapse.show {
	left: 0;
	/* 展開時位置 */
}

/* 當選單展開時 body 禁止滾動 */
body.menu-open {
	overflow: hidden;
}

@media (min-width: 992px) {
	.navbar-collapse {
		position: static;
		/* 保持選單原始排列方式 */
		width: auto;
		/* 防止設定過寬 */
		transition: none;
		/* 去除過渡動畫 */
	}
}

/* Logo 大小調整 */
.navbar-brand img {
	max-width: auto;
	/* 依需要調整 Logo 的大小 */
}

/* 調整搜尋icon的間距 */
.navbar-nav .search {
	margin-right: 10px;
	/* 你可以根據需求調整 */
}

/* 手機版選單關閉按鈕樣式 */
#closeMenuBtn {
	display: none;
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1055;
	border: none;
	border-radius: 50%;
	font-size: 1.2rem;
	padding: 6px 10px;
}

/* 顯示關閉按鈕（僅手機） */
@media (max-width: 991px) {
	#mainNavbar.collapse.show #closeMenuBtn {
		display: block;
	}
}




/* 聯絡我們 */
.contact-img-box {
	flex-shrink: 0;
	max-width: 600px;
	/* 可調整最大寬度 */
	width: 100%;
	overflow: hidden;
}

.contact-img-box img {
	width: 100%;
	height: auto;
	/* 保持原圖比例 */
	display: block;
}

.contact-text-box {
	flex-grow: 1;
	padding: 40px;
	background-color: #f1f2f4;
	text-align: left;
}

.contact-content h3 {
	font-weight: bold;
}

.contact-content h4 {
	font-size: 18px;
	font-weight: bold;
	margin-top: 15px;
}

.contact-content p {
	margin-top: 10px;
	line-height: 1.6;
}

.black-btn {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 20px;
	background-color: black;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s ease;
	/* 平滑過渡效果 */
}

.black-btn:hover {
	background-color: #333;
	/* 修改底色（此處為深灰色，可以根據需求調整顏色） */
}


.timeline-container {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 40px 20px;
	position: relative;
}

.timeline-item {
	display: flex;
	gap: 20px;
	align-items: center;
	margin: 20px 0;
	position: relative;
}

/* 左側年份 */
.timeline-item .timeline-year {
	width: 80px;
	font-weight: bold;
	color: #b89b5e;
	font-size: 18px;
}

/* 左側內容 */
.timeline-item .timeline-text {
	width: calc(100% - 70px);
	text-align: left;
}



/* 手機版上下排 */
@media (max-width: 767.98px) {
	.contact-img-box {
		max-width: 100%;
	}

	.contact-text-box {
		padding: 20px;
	}
}

/* 手機版部分調整 */
@media (max-width: 870px) {
	body {
		padding-bottom: 70px;
		/* 固定導覽列高度 */
	}

	.mobile-bottom-nav {
		padding-bottom: 10px;
		/* 可以根據需要調整 */
	}

	/* 手機版底部導覽列 */
	.d-flex.justify-content-around.text-center.py-2 {
		background-color: #5D463A;
	}

	.text-dark {
		--bs-text-opacity: 1;
		color: #fff !important;
	}




	span.carousel-control-next-icon {
		position: relative;
		left: -100px;
	}

	span.carousel-control-prev-icon {
		position: relative;
		right: -100px;
	}

	span.carousel-control-next-icon {
		position: relative;
		left: 0px;
		/* 向左移動箭頭 */
	}

	span.carousel-control-prev-icon {
		position: relative;
		right: 0px;
	}


	.event-swiper-section {
		padding: 20px 0px;
		/* 縮小內邊距，避免太多空白 */
	}

	section.recommend-section.new-products {
		margin: 40px 0px;
		/* 縮小上下邊距 */
	}

	section.recommend-section {
		margin: 20px 0px;
		/* 縮小上下邊距 */
	}


	.row>* {
		flex-shrink: 0;
		width: 100%;
		max-width: 100%;
		padding-right: 20px;
		padding-left: 20px;
		margin-top: var(--bs-gutter-y);
	}

	.aboutsq-content {
		padding: 0px 20px;
		/* 設定左右 padding 為 20px，頂部與底部為 0px */
	}


	.image-button-row {
		display: flex;
		flex-direction: column;
		/* 設定為垂直排列 */
		align-items: flex-start;
		/* 左對齊 */
		margin-top: 20px;
		/* 設定上方間距 */
		gap: 20px;
		/* 調整按鈕與圖片之間的間距 */
	}

	.image-button-row img {
		width: 100%;
		/* 圖片寬度為 100% */
		max-width: none;
		/* 取消最大寬度限制 */
	}

	.el_arwTxtLink {
		margin-top: 10px;
		/* 調整按鈕與圖片之間的間距 */
	}


	/* 調整購物車數字圓圈位置在購物車 icon 的右邊 */
	.mobile-bottom-nav .bi-cart {
		position: relative;
		/* 讓 .badge 能相對於這個元素定位 */
	}

	.mobile-bottom-nav .badge {
		position: absolute;
		/* 絕對定位 */
		top: 0;
		/* 設為 0，讓圓圈垂直與圖標對齊 */
		left: 100%;
		/* 圓圈位置在圖標的右邊 */
		margin-left: 15px;
		/* 圓圈與購物車圖標之間的間距 */
		transform: translate(0, -50%);
		/* 讓圓圈垂直居中於圖標 */
		font-size: 0.8rem;
		/* 控制數字的大小 */
		background-color: red;
		/* 背景顏色設為紅色 */
		color: white;
		/* 文字顏色為白色 */
		border-radius: 50%;
		/* 圓形圓圈 */
		width: 15px;
		/* 設定圓圈的寬度 */
		height: 15px;
		/* 設定圓圈的高度 */
		display: flex;
		justify-content: center;
		/* 垂直居中數字 */
		align-items: center;
		/* 水平居中數字 */
		font-weight: bold;
		/* 調整數字的字重 */
	}



	.swiper-pagination-bullet-active {
		opacity: var(--swiper-pagination-bullet-opacity, 1);
		background: #b60005 !important;
		/* 確保分頁點的背景色為紅色 */
	}

	/* 先在頁面初始化時將變數重設 */
	:root {
		--swiper-theme-color: #b60005;
	}

	/* 在特定螢幕尺寸時覆蓋 */

	.swiper-pagination-bullet-active {
		background-color: #b60005 !important;
		/* 確保背景顏色 */
	}



	ul.navbar-nav.mb-2.mb-lg-0.me-lg-2 {
		margin-top: 60px;
		margin-right: 20px;
		margin-left: 20px;
	}

	.swiper-pagination-bullet-active {
		opacity: var(--swiper-pagination-bullet-opacity, 1);
		background: #b60005 !important;
		/* 確保分頁點的背景色為紅色 */
	}

	.footer-menu .txt-link-list {
		padding: 0 20px 10px;
		margin: 0px;
	}


	.footer-menu .link-wrap {
		gap: 0px !important;
		/* 禁止換行 */
	}


	.footer-menu .txt-link-list {
		padding: 0px 20px !important;
		/* 設定左右 padding 為 20px，頂部與底部為 0px */
		margin: 0px;
	}
}



/* 手機版導覽列固定於頁面頂端 */
@media (max-width: 991px) {
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1050;
		/* 確保它在所有內容之上 */
		background-color: white;
		/* 可以選擇白色或其他背景顏色 */
		border-bottom: 1px solid #ddd;
		/* 可選，視需求添加底部邊框 */
	}

	/* 頁面內容需要向下移動，避免與固定的 navbar 重疊 */
	body {
		padding-top: 56px;
		/* 設定為 navbar 高度，若 navbar 高度改變需要調整此值 */
	}

	/* 增加跑馬燈區塊的間距 */
	.marquee-wrapper {
		margin-top: 10px;
		/* 確保跑馬燈區塊不會與固定的 navbar 重疊 */
	}

	/* 手機版底部導航列固定於頁面底部 */
	.mobile-bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1050;
		/* 確保它在頁面內容上方，但在 navbar 下方 */
		background-color: white;
		/* 設置底部導航的背景顏色 */
		border-top: 1px solid #ddd;
		/* 可選，添加頂部邊框以與頁面內容分隔 */
	}

	/* 防止底部導航列與頁面內容重疊 */
	.content-wrapper {
		padding-bottom: 10px;
		/* 設置頁面底部留白，等於底部導航的高度 */
	}
}

@media (max-width: 767.98px) {
	.navbar-nav>.nav-item {
		margin-left: 0px;
	}
}

/* 手機版 submenu-header 排版 */
@media (max-width: 991.98px) {
	.submenu-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}

	.submenu-header .nav-link,
	.submenu-header .dropdown-item {
		flex: 1;
		margin: 0;
		color: inherit;
		text-decoration: none;
		padding: 0px;
		left: -5px;
		font-weight: bold;
	}

	.submenu-header .toggle-btn {
		margin-left: 0.5rem;
		font-size: 1.25rem;
		line-height: 1;
	}
}



.signup-container {
	margin-left: 20px !important;
	margin-right: 20px !important;
}

.tab-content {
	margin-left: 20px !important;
	margin-right: 20px !important;
}

/*產品內頁的樣式設定*/
.event-label {

	font-weight: bold !important;
	background-color: #e0e0e0 !important;
	padding: 8px 12px !important;
	color: #333 !important;
	width: fit-content !important;
}



@media (max-width: 991.98px) {
	.dropdown-item {
		border-top: 1px solid #cccccc;
		padding: 10px 20px;
	}

	.navbar-nav .dropdown-menu {
		border: none;
		padding: 0px;
	}
}




@media (max-width: 991.98px) {
	.submenu-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 16px;
		border-top: 1px solid #ccc;
		background-color: #f4f4f4;
		color: #5D463A;
	}

	.submenu-header a {
		flex: 1;
		margin: 0;
		color: #333;
		text-decoration: none;
	}

	.submenu-header .toggle-btn {
		font-size: 18px;
		color: #5D463A;
		padding-left: 10px;
		cursor: pointer;
		font-weight: bold;
	}
}




/* 當選單展開時，body 禁止滾動 */
body.menu-open {
	overflow: hidden;
	position: fixed;
	width: 100%;
}

/* 導覽列展開的內容可滾動 */
#mainNavbar.show {
	max-height: 100vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}



.mobile-bottom-nav.hide {
	display: none !important;
}



.mobile-menu-images img {
	border-radius: 8px;
}



.mobile-menu-images.d-lg-none.px-3.pb-3 {
	padding: 20px 0px !important;
}



.toggle-btn {
	display: inline-block;
	width: 1.5em;
	/* 或你想要的固定寬度 */
	text-align: right;
	/* 讓＋、－都靠右對齊 */
	margin-left: auto;
	/* 若需要自動貼齊右側 */
	font-size: 1.25rem;
	/* 可視需求調整大小 */
}


.submenu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 預設桌機顯示，手機隱藏 */
.mobileSwiper,
.mobileSwiper+.swiper-pagination {
	display: none;
}

/* 手機顯示 mobileSwiper，隱藏 desktopSwiper */
@media (max-width: 768px) {

	.desktopSwiper,
	.desktopSwiper+.swiper-pagination {
		display: none;
	}

	.mobileSwiper,
	.mobileSwiper+.swiper-pagination {
		display: block;
	}
}

.equal-height-img {
	height: auto;
	/* 你可以依實際需要調整高度 */
	object-fit: cover;
	width: 100%;
}

/* 響應式：.tab-pane 內容區塊 RWD 樣式 */

@media (max-width: 767.98px) {
   .tab-content {
	   /* width: 100% !important; */
	   padding: 10px 16px 10px 16px !important;
	   font-size: 16px !important;
	   overflow: visible !important;
	   white-space: normal !important;
	   text-align: left !important;
   }
   .tab-content .tab-pane {
	   overflow: visible !important;
	   white-space: normal !important;
	   word-break: break-word !important;
	   overflow-wrap: break-word !important;
	   text-align: left !important;
   }
   .tab-content p {
	   background: transparent !important;
	   margin: 0 0 1em 0 !important;
	   padding: 0 !important;
	   line-height: 1.7 !important;
	   word-break: break-word !important;
	   overflow-wrap: break-word !important;
	   color: #222 !important;
	   overflow: visible !important;
	   white-space: normal !important;
	   text-align: left !important;
   }

	/* 針對 .tab-content 內 table 響應式處理 */
	.tab-content table {
		width: 100% !important;
		min-width: unset !important;
		max-width: 100% !important;
		display: block;
		overflow-x: auto;
		box-sizing: border-box;
		margin-bottom: 1em;
	}
	.tab-content table td, .tab-content table th {
		word-break: break-word;
		white-space: normal;
		padding: 8px 6px;
	}
	/* 讓 table 可橫向捲動（如有超出） */
	.tab-content {
		overflow-x: auto !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.tab-content {
		padding: 20px !important;
		font-size: 18px !important;
	}
	.tab-content p {
		background: transparent !important;
		margin: 0 0 1em 0 !important;
		padding: 0 !important;
		line-height: 1.7 !important;
		word-break: break-word !important;
		overflow-wrap: break-word !important;
		color: #222 !important;
	}
}

/* 強制覆蓋 .tab-pane 白底，解決 inline style 問題 */
.tab-content .tab-pane {
  background: transparent !important;
  box-shadow: none !important;
}