/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ===== 菜單載入 ===== */
/* ----- 進入白底內容時使用的樣式（header-light） ----- */
.header-light #header,
.header-light #header #header-wrap {
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

.header-light .primary-menu .menu-link {
	color: #222;
}

.header-light .primary-menu .menu-item:hover>.menu-link,
.header-light .primary-menu .menu-item.current>.menu-link {
	color: #1ABC9C;
}

.header-light .primary-menu-trigger,
.header-light .header-misc i {
	color: #222;
}

.header-light .sub-menu-container .menu-link {
	color: #444;
}

.header-light .sub-menu-container .menu-item:hover>.menu-link {
	color: #1ABC9C;
}

/* 有些主題用 .dark 讓字變白；白底狀態時強制還原 */
.header-light #header.dark,
.header-light #header #header-wrap.dark {
	background: #fff !important;
	color: #222 !important;
}

/* 如果 page-menu 有漸層/偽元素，避免影響偵測與視覺 */
#page-menu,
#page-menu #page-menu-wrap,
#page-menu::before,
#page-menu #page-menu-wrap::before {
	background-image: none;
}

/* 可選：讓 page-menu 永遠維持主題綠 */
#page-menu,
#page-menu #page-menu-wrap {
	background-color: #1ABC9C;
}

/* 白底狀態，無論 header 上是否還掛著 transparent-header，都給白底 */
.header-light #header {
	background: #fff !important;
}

.header-light #header.transparent-header {
	background: #fff !important;
}



/* ===== What We Do ===== */
.wwd-section {
	position: relative;
	padding: clamp(64px, 7vw, 120px) 0;
	background: #f8f7f5;
	overflow: hidden;
	color: #0b0b0b;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Microsoft JhengHei", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 線條容器 */
.wwd-line {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

/* SVG 全寬 */
.line-svg {
	width: 100%;
	height: 100%;
}

/* 線條樣式 */
.line-svg path {
	fill: none;
	stroke: url(#rainbowGradient);
	/* 使用漸層 */
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
	animation: draw-rainbow-line 3s ease-in-out infinite;
}

/* 畫線動畫 */
@keyframes draw-rainbow-line {
	0% {
		stroke-dashoffset: 1500;
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

.wwd-container {
	width: min(1100px, 92%);
	margin: 0 auto;
	position: relative;
}


/* 讓它待在區塊右下，像水印一樣 */
.wwd-watermark.circle-text {
	position: absolute;
	right: -100px;
	bottom: -12%;
	opacity: 0.06;
	pointer-events: none;
	user-select: none;
}

/* 尺寸（可調整） */
.circle-text-svg {
	width: clamp(320px, 36vw, 520px);
	height: auto;
	display: block;
}

/* 字體樣式 */
.circle-text-content {
	font: 700 clamp(18px, 2.2vw, 28px)/1 "Noto Sans JP", "Microsoft JhengHei", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	fill: #000000;
	/* 顏色 */
}

/* 繞圈圈動畫（像 loading）*/
.rotate {
	transform-origin: 150px 150px;
	/* 對應 viewBox 的中心 */
	animation: wwd-circle-spin 18s linear infinite;
	/* 速度可改 */
}

@keyframes wwd-circle-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 行動版：縮小或隱藏水印（選用） */
@media (max-width: 640px) {
	.wwd-watermark.circle-text {
		right: -60px;
		bottom: -8%;
		opacity: 0.05;
	}

	.circle-text-svg {
		width: 360px;
	}
}

/* 細標＋水平線 */
.wwd-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.wwd-eyebrow .plus {
	color: #3a75ff;
	/* 可改品牌色 */
	font-weight: 700;
}

.wwd-eyebrow .label {
	font-size: 14px;
	font-weight: 600;
}

.wwd-eyebrow .line {
	height: 1px;
	background: #dcdcdc;
	width: 120px;
	flex: 0 0 120px;
}

/* 兩欄排版 */
.wwd-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(28px, 6vw, 72px);
	align-items: start;
}

@media (max-width: 992px) {
	.wwd-grid {
		grid-template-columns: 1fr;
	}
}

/* 左：大標題 */
.wwd-title {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.6;
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0;
}

/* 右：內文與按鈕 */
.wwd-body {
	max-width: 56ch;
}

.wwd-body p {
	margin: 0 0 1.1em;
	color: #333333;
	line-height: 2;
	font-size: clamp(15px, 1.3vw, 16.5px);
}

/* see more + 圓形箭頭 */
.wwd-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	text-decoration: none;
	color: #111;
	font-weight: 600;
}

.wwd-cta-icon {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid #e5e5e5;
	transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.wwd-cta:hover .wwd-cta-icon {
	transform: translateX(4px);
	background: #0b0b0b;
	color: #fff;
	border-color: #0b0b0b;
}


/*-----------------------------------------------------------------*/
/*主頁-品牌介紹*/
/* 卡片外觀 */
.product-card {
	border-radius: 14px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

/* 圖片比例：用 .ratio 讓封面固定比例裁切（Bootstrap 5 有內建） */
.product-cover {
	display: block;
}

.product-cover-wrapper {
	position: relative;
}

.brand-badge {
	position: absolute;
	left: -8px;
	bottom: -8px;
	width: 150px !important;
	/* 強制使用 80px */
	height: auto !important;
	/* 高度依比例縮放 */
	max-width: none !important;
	/* 防止被 max-width:100% 限制 */
	background: #fff;
	/* 白底 */
	border-radius: 10px;
	/* 圓角 */
	padding: 8px;
	/* 內距，讓 logo 不貼邊 */
	/*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	/* 陰影 */
}

.product-card .card-img-top {
	width: 100%;
	height: 300px;
	object-fit: cover;
}

/* 文字排版 */
.product-card .card-title {
	font-size: 1.05rem;
	margin: 0 0 .35rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* 最多兩行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card .card-subtitle {
	font-size: .95rem;
	min-height: 2.6em;
	/* 保持行高一致 */
	margin: 0;
}

/* Owl Carousel 導航微調（可選） */
#product-carousel .owl-stage-outer {
	padding: 6px 0;
}

#product-carousel .owl-nav button.owl-prev,
#product-carousel .owl-nav button.owl-next {
	position: absolute;
	top: 42%;
	width: 42px;
	height: 42px;
	border-radius: 9999px;
	border: 0;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

#product-carousel .owl-nav button.owl-prev {
	left: -12px;
}

#product-carousel .owl-nav button.owl-next {
	right: -12px;
}

#product-carousel .owl-nav [class*="owl-"]:hover {
	background: #f7f7f7;
}

#product-carousel .owl-dots {
	margin-top: 10px;
}

.read-more-link {
	color: #0d6efd;
	/* 主色，可改 */
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.read-more-link:hover {
	color: #0a58ca;
	/* hover 深色 */
	text-decoration: underline;
}



/*-----------------------------------------------------------------*/
/*主頁-頁尾*/

/*logo改顏色*/
/* 把任何顏色的 PNG 轉成全白 */
.logo-white {
	filter: brightness(0) invert(1);
}

/* 如果看起來偏灰，再加一點對比 */
.logo-white {
	filter: brightness(0) invert(1) contrast(120%);
}

/*icon距離*/
.footer-icon {
	margin-right: 8px;
	font-size: 1rem;
}

.circle-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.circle-icon i {
	color: #fff;
	/* 白色 LINE LOGO */
	font-size: 1.4rem;
}

.circle-icon:hover {
	transform: scale(1.15);
}

/*-----------------------------------------------------------------*/
/*頁尾-標籤字調整*/
/*調整Footer 區塊跟Logo距離 */
.footer-content {
	padding-left: 50px;
	/* 或調整成 60px, 80px 根據視覺需求 */
}

/* Footer 區塊標題顏色 */
.widget_links h4 {
	color: #ffffff;
	/* 深灰色，比預設黑色柔和一點，也更清晰 */
	font-weight: 600;
}

/* Footer 連結字體顏色與滑過效果 */
.widget_links ul li a {
	color: #ffffff;
	position: relative;
	display: inline-block;
	transition: color 0.3s ease;
	text-decoration: none;
}

/* 動畫底線效果 */
.widget_links ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	/* 線條與文字間距 */
	width: 100%;
	height: 2px;
	background-color: #35dc89;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

/* 滑過時顯示動畫底線 */
.widget_links ul li a:hover::after {
	transform: scaleX(1);
}

/*-----------------------------------------------------------*/
/*頁尾-content箭頭*/
/* 新增這個 CSS 樣式 */
.link-button {
	text-decoration: none;
	/* 移除下劃線 */
	color: inherit;
	/* 讓連結繼承按鈕的文字顏色 */
}

/* 按鈕容器 */
.my-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border: 2px solid #000;
	background-color: #f0f0f0;
	cursor: pointer;
	font-size: 16px;
	position: relative;
	overflow: hidden;
	/* 這裡加入圓弧邊角效果 */
	border-radius: 50px;
	gap: 10px;
	/* 文字與 icon 之間的間距 */
}

/* 按鈕文字 */
.my-button span {
	/* 讓文字在 hover 時不會被跑馬燈覆蓋 */
	position: relative;
	z-index: 2;
}

/* 跑馬燈容器 */
.marquee-container {
	width: 65px;
	/* 限制容器寬度，剛好是一個 icon 的大小 */
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	/* 預設隱藏跑馬燈，只在 hover 時顯示 */
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

/* 跑馬燈內容 */
.marquee-content {
	width: fit-content;
	display: inline-block;
	white-space: nowrap;
	/* 預設狀態：不啟動任何動畫 */
	transform: translateX(0);
}

/* 跑馬燈裡面的 icon */
.marquee-content i {
	font-size: 50px;
	margin: 0 10px;
	color: #333;
}

/* 當滑鼠移到按鈕的任何地方時 */
.my-button:hover .marquee-container {
	opacity: 1;
}

/* 當滑鼠懸停在容器上時，啟動動畫 */
.my-button:hover .marquee-content {
	/* 啟動動畫 */
	animation: marquee 10s linear infinite;
}

/* 定義動畫 */
@keyframes marquee {
	0% {
		/* 動畫開始：讓 icon 從左側移出 */
		transform: translateX(-100%);
	}

	100% {
		/* 動畫結束：讓 icon 從右側移入 */
		transform: translateX(0%);
	}
}

/*---------------------------------------------------------------*/
/* --- 右下角 聊天機器人 快捷按鈕 --- */
#gotoChatbot {
	position: fixed;
	right: 20px;
	bottom: 160px;
	/* 在 LINE 按鈕上方 */
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #007bff;
	/* 藍色，可依喜好改 */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	z-index: 1000;
	transition: transform .2s ease;
	text-decoration: none;
}

/* --- 右下角 LINE 快捷按鈕 --- */
#gotoLine,
.floating-line {
	position: fixed;
	right: 20px;
	bottom: 92px;
	/* 讓它剛好在 #gotoTop 上方 */
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #06C755;
	/* LINE 綠 */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	/* bi-line 圖示大小 */
	z-index: 1000;
	transition: transform .2s ease;
	text-decoration: none;
}

#gotoChatbot:hover {
	transform: translateY(-2px);
}

#gotoLine:hover {
	transform: translateY(-2px);
}

/* 與 Canvas 題庫的 #gotoTop 共存、確保位置 */
#gotoTop {
	right: 20px !important;
	bottom: 24px !important;
	z-index: 1000;
}

/* 行動版調整：按鈕略大、間距更舒服 */
@media (max-width: 576px) {
	#gotoChatbot {
		bottom: 152px;
		width: 54px;
		height: 54px;
		font-size: 24px;
	}

	#gotoLine {
		bottom: 88px;
		width: 54px;
		height: 54px;
		font-size: 26px;
	}
}

/*----------------------------------------------------------------------*/
/*最新消息*/
/* 外層：上下區塊 */
.news-filter-group {
	width: 100%;
	display: block;
	margin-bottom: 12px;
}

/* 主條：灰底圓角，左右排版 */
.news-filter-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background-color: #f5f5f5;
	padding: 1rem 1.5rem;
	border-radius: 12px;
	width: clamp(320px, 92vw, 900px);
	margin-left: 15px;
}

/* 左側品牌區 */
.filter-left {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 右側按鈕 */
.filter-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	justify-content: flex-end;
}

/* 膠囊按鈕 */
.btn-pill {
	border-radius: 9999px !important;
	padding: 8px 18px;
	font-size: 14px;
	line-height: 1.2;
	transition: all .2s ease-in-out;
}

.btn-pill:hover {
	opacity: 0.9;
}

/* 下拉：膠囊圓角 + 自訂箭頭 */
.pretty-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 9999px;
	border: 1px solid #e6e6e6;
	background-color: #fff;
	padding: .6rem 2.75rem .6rem 1rem;
	font-size: 0.95rem;
	line-height: 1.25rem;
	color: #111;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .03) inset, 0 1px 2px rgba(0, 0, 0, .04);
	transition: all .18s ease-in-out;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='%23000' d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: 16px 16px;
	min-width: 160px;
}

.pretty-select:hover {
	border-color: #000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.pretty-select:focus {
	outline: none;
	border-color: #000;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
}

/* label 與輸入框並排時保持對齊 */
.form-label {
	white-space: nowrap;
	margin-right: 6px;
}

/* 手機版：品牌和按鈕上下堆疊 */
@media (max-width: 768px) {
	.news-filter-wrap {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-left,
	.filter-right {
		width: 100%;
	}

	.filter-right {
		justify-content: flex-end;
		margin-top: .5rem;
	}
}


/*------------------------------------------------------------*/
/*影音資訊*/
/*-影片-分類*/

/* 讓篩選整條有一致卡片感 */
.video-filter-bar {
	background-color: #f5f5f5;
	padding: 1rem 1.5rem;
	border-radius: 12px;
	margin-bottom: 1rem;
}

/* --- Select：膠囊圓角 + 自訂箭頭 --- */
.pretty-select,
.custom-select.pretty-select {
	/* 兼容 Bootstrap4 的 custom-select */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 9999px;
	/* 膠囊 */
	border: 1px solid #e6e6e6;
	background-color: #fff;
	padding: .6rem 2.75rem .6rem 1rem;
	/* 右側預留箭頭空間 */
	font-size: 0.95rem;
	line-height: 1.25rem;
	color: #111;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .03) inset, 0 1px 2px rgba(0, 0, 0, .04);
	transition: all .18s ease-in-out;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='%23000' d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	/* 箭頭位置 */
	background-size: 16px 16px;
}

/* hover 與 focus 的黑白反轉感（與你的按鈕一致） */
.pretty-select:hover {
	border-color: #000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.pretty-select:focus {
	outline: none;
	border-color: #000;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
}

/* 使禁用狀態也好看 */
.pretty-select:disabled {
	background-color: #f3f3f3;
	color: #777;
	border-color: #eee;
	cursor: not-allowed;
}

/* 按鈕：膠囊造型，與 Select 風格一致 */
.btn-pill {
	border-radius: 9999px !important;
	padding: .55rem 1rem;
	border-width: 1px;
}

.btn-pill:hover {
	color: #fff;
	background-color: #000;
	border-color: #000;
}

/* 行動裝置：讓點擊更好瞄準 */
@media (max-width: 768px) {
	.pretty-select {
		padding: .85rem 2.75rem .85rem 1rem;
		font-size: 1rem;
	}
}


/*----------------------------------------------------------------------*/

/*-影片延遲載入（Lazy Loading）*/
.youtube-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	/* 讓縮圖/iframe有固定比例 */
	cursor: pointer;
	overflow: hidden;
}

.youtube-thumbnail,
.youtube-container iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.youtube-play-button {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	background: rgba(0, 0, 0, .6);
	border-radius: 12px;
}

.youtube-play-button::before {
	content: '';
	position: absolute;
	left: 26px;
	top: 16px;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
}

/*-----------------------------------------------------------------*/
/* =====全台電商===== */

/* 限制卡片區塊最大寬度並置中（想更寬可調 1240/1320） */
.feature-grid {
	max-width: 1100px;
	margin-inline: auto;
}

/* 基礎卡片 */
.feature-card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 18px 20px;
	border: 1px solid #eee;
	border-radius: 16px;
	text-decoration: none;
	background: #fff;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

/* 放大版本（圖示、字級、行距都更大） */
.feature-card--lg {
	padding: 22px 24px;
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
}

.feature-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .08);
	border-color: #e6e6e6;
	background-color: #fff;
}

/* 圖示容器更大、更圓 */
.feature-icon {
	flex: 0 0 auto;
	width: 76px;
	/* 原 52 → 放大 */
	height: 76px;
	/* 原 52 → 放大 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: #f7f7f7;
	overflow: hidden;
}

.feature-icon img {
	max-width: 74%;
	max-height: 74%;
	display: block;
}

/* 文字區塊放大＋更舒適的行距 */
.feature-body {
	display: grid;
	gap: 6px;
}

.feature-title {
	font-weight: 800;
	font-size: 1.2rem;
	/* 原 1.05rem → 放大 */
	line-height: 1.25;
	color: #111;
}

.feature-desc {
	font-size: 1rem;
	/* 原 .95rem → 放大 */
	color: #5f5f5f;
	line-height: 1.65;
}

/* heading 與內容距離微調 */
.heading-block+* {
	margin-top: 10px;
}

/* 視窗夠大時，拉開卡片間距並讓卡片看起來更「大塊」 */
@media (min-width: 1200px) {
	.feature-grid {
		max-width: 1200px;
	}
}



/*-----------------------------------------------------------------*/

/*聯絡我們-聯絡輸入欄位*/

.required-star {
	color: red;
	margin-left: 2px;
}

form label {
	font-weight: 500;
}

form .form-group {
	margin-bottom: 1.2rem;
}


/*----------------------------------------------------------------------*/
/*會員保固註冊*/

.req {
	color: #dc3545;
	margin-left: .25rem;
	font-weight: 700;
}

.sn-tip {
	position: absolute;
	z-index: 1000;
	border: 1px solid #ddd;
	background: #fff;
	padding: 8px;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}