/*
 * ============================================================
 * TABLE OF CONTENTS (目錄)
 * ============================================================
 *
 *  1.  CSS Variables (:root)
 *       1-1. Font Family
 *       1-2. Font Sizes
 *       1-3. Font Weights
 *       1-4. Line Heights
 *       1-5. Spacing & Layout
 *       1-6. Colors
 *       1-7. SVG Filters
 *       1-8. Transitions
 *       1-9. Misc
 *
 *  2.  Root Responsive Overrides
 *       2-1. min-width: 992px
 *       2-2. min-width: 1200px
 *       2-3. max-width: 991px  (empty)
 *       2-4. max-width: 767px  (empty)
 *       2-5. max-width: 576px
 *
 *  3.  Base / Reset
 *       3-1. Links
 *       3-2. Button Close
 *       3-3. Body
 *       3-4. Dropdown
 *       3-5. Layout Blocks (main / header / footer / section)
 *       3-6. Textarea
 *
 *  4.  Color Utilities
 *
 *  5.  Support Overlay
 *
 *  6.  Sticky Top
 *
 *  7.  Page Head Section
 *
 *  8.  Cookie
 *       8-1. Cookie Overlay
 *       8-2. Cookie Box Container
 *       8-3. Cookie Content
 *       8-4. Cookie Settings
 *       8-5. Cookie Scrollbar
 *       8-6. Cookie Buttons
 *
 *  9.  Fancybox / Lightbox
 *
 * 10.  Explore Header
 *
 * 11.  Compare Button & Badge
 *
 * 12.  Products Grid & Cards
 *       12-1. Products Info Grid
 *       12-2. Product Info Card
 *       12-3. Product Badge / Tag / Favorite
 *       12-4. Product Image
 *       12-5. Product Title & Description
 *
 * 13.  Custom Tooltip
 *
 * 14.  Load More / Add Button
 *
 * 15.  Account Actions
 *
 * 16.  Breadcrumb
 *
 * 17.  Sticky Top (has-sticky-top)
 *
 * 18.  Buttons
 *       18-1. btn-basic
 *       18-2. btn-outline-secondary / btn-secondary
 *       18-3. btn-learn-more
 *       18-4. btn-dw (Download Button)
 *       18-5. btn-send
 *
 * 19.  Alert Modal
 *
 * 20.  Filter Container
 *       20-1. Filter Layout
 *       20-2. Custom Select
 *       20-3. Select Arrow
 *       20-4. Custom Search Input
 *       20-5. Search Button
 *
 * 21.  Form Inputs
 *       21-1. Input Wrapper & Icon
 *       21-2. Form Input
 *       21-3. Select Wrapper
 *       21-4. Custom Switch
 *       21-5. Captcha
 *
 * 22.  Common / Shared Styles
 *       22-1. News Tags
 *       22-2. Header Link
 *       22-3. Read More
 *       22-4. Info Content
 *       22-5. Section Title & Subtitle
 *       22-6. Tags Row & Tag Variants
 *       22-7. Badge New
 *       22-8. has-check Button
 *
 * 23.  Logo
 *
 * 24.  Video Player
 *
 * 25.  Date Info
 *
 * 26.  Container Responsive Overrides
 *       26-1. min-width: 1200px
 *       26-2. min-width: 1440px
 *       26-3. min-width: 1600px
 *       26-4. max-width: 1199px
 *       26-5. max-width: 991px
 *       26-6. max-width: 767px
 *       26-7. max-width: 576px
 *
 * ============================================================
 */
/* ============================================================
 * 1. CSS Variables (:root)
 * ============================================================ */ :root {
		/* ---- 1-1. Font Family ---- */
		--font-family-basic: 'Roboto', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		/* ---- 1-2. Font Sizes ---- */
		/* 超大字體 - 用於 Hero 標題、特殊強調 */
		--font-size-3xl: clamp(32px, 2rem + 2vw, 48px);
		/* 特大字體 - 用於大標題、Banner */
		--font-size-2xl: clamp(24px, 1.5rem + 1.5vw, 36px);
		--font-size-xl: clamp(22px, 1.375rem + 1vw, 34px);
		/* 大字體 - 用於副標題、重要資訊 */
		--font-size-4lg: clamp(22px, 1.375rem + 0.75vw, 32px);
		--font-size-3lg: clamp(20px, 1.25rem + 0.5vw, 30px);
		--font-size-2lg: clamp(19px, 1.1875rem + 0.5vw, 28px);
		--font-size-lg: clamp(18px, 1.125rem + 0.5vw, 24px);
		/* 基礎字體 - 用於特別字級 */
		--font-size-base-2lg: clamp(18px, 1.125rem + 0.25vw, 20px);
		--font-size-base-lg: clamp(16px, 1rem + 0.25vw, 18px);
		/* 基礎字體 - 用於一般內文 */
		--font-size-base: clamp(16px, 0.875rem + 0.25vw, 16px);
		/* 小字體 - 用於次要資訊、說明文字 */
		--font-size-sm: clamp(14px, 0.75rem + 0.25vw, 14px);
		/* 極小字體 - 用於註解、版權聲明 */
		--font-size-xs: clamp(10px, 0.625rem + 0.15vw, 12px);
		--font-size-xxs: 2.25vw;
		/* ---- 1-3. Font Weights ---- */
		--font-weight-light: 300;
		--font-weight-normal: 400;
		--font-weight-medium: 400;
		--font-weight-semibold: 600;
		--font-weight-bold: 700;
		/* ---- 1-4. Line Heights ---- */
		--line-height-tight: 1.25;
		--line-height-normal: 1.5;
		--line-height-relaxed: 1.75;
		/* ---- 1-5. Spacing & Layout ---- */
		--nav-height: 50px;
		--megamenu-height: 450px;
		--megamenu-width: 700px;
		--megamenu-sidebar-width: 240px;
		--logo-width: 120px;
		--container-max-width: 1920px;
		--dropdown-width-lg: 280px;
		--dropdown-width: 250px;
		--dropdown-width-sm: 150px;
		--chat-width: 355px;
		--hero-ad-height: 740px;
		/* ---- 1-6. Colors ---- */
		/* Gradients */
		--bg-gradient: linear-gradient(90deg, #005EAC 0%, #00A1FF 100%);
		--bg-light-gradient: linear-gradient(90deg, #00A1FF 0%, #0058DD 100%);
		--bg-gradient-o: linear-gradient(90deg, RGBA(0, 94, 172, .9) 0%, RGBA(0, 161, 255, .9) 100%);
		--bg-gradient-tl-o: linear-gradient(to left, RGBA(0, 94, 172, .9) 0%, RGBA(0, 161, 255, .9) 100%);
		--bg-gradient-g: linear-gradient(to right, #FDfbFB 30%, #EBEDEE 100%);
		--bg-gradient-tl-g: linear-gradient(to left, #FDfbFB 30%, #EBEDEE 100%);
		--bg-gradient-w: linear-gradient(to right, RGBA(255, 255, 255, 0) 10%, RGBA(255, 255, 255, .35) 100%);
		--bg-gradient-sp: linear-gradient(to right, #005EAC 5%, #00ffd3 80%);
		/* Text */
		--text-basic: #333333;
		/* Brand Blues */
		--primary-blue: #3183C8;
		--secondary-blue: #00A1FF;
		--dark-blue: #005EAC;
		--dark-blue-rgb: 0, 94, 172;
		--sp-blue: #00ffd3;
		--light-blue: #F3F9FF;
		--cloud-blue: #70beff;
		/* Accent */
		--color-yellow: #ffee00;
		/* Neutrals */
		--color-black: #000000;
		--color-white: #ffffff;
		--color-red: #FF0033;
		--color-dark-red: #c90104;
		--color-gray: #777777;
		--color-gray-dark: #666666;
		--color-light-gray: #f5f5f5;
		--dark-gray: #333333;
		--hover-gray: #a7a3a3;
		--bg-gray-rgb: 128, 128, 128;
		--footer-text: #d9d9d9;
		--border-color: #d9d9d9;
		/* Tool Buttons */
		--tools-btn: #00A1FF;
		--tools-btn-hover: #005EAC;
		/* ---- 1-7. SVG Filters ---- */
		/* Light Blue */
		--svg-hover-light-blue: brightness(0) saturate(100%) invert(85%) sepia(26%) saturate(3207%) hue-rotate(115deg) brightness(103%) contrast(106%);
		--svg-hover-sp-blue: brightness(0) saturate(100%) invert(76%) sepia(93%) saturate(2234%) hue-rotate(126deg) brightness(104%) contrast(106%);
		--svg-hover-yellow: brightness(0) saturate(100%) invert(85%) sepia(72%) saturate(1844%) hue-rotate(360deg) brightness(106%) contrast(106%);
		/* Primary Blue */
		--svg-hover-blue: brightness(0) saturate(100%) invert(56%) sepia(99%) saturate(2844%) hue-rotate(175deg) brightness(101%) contrast(101%);
		/* Dark Blue */
		--svg-hover-dark-blue: brightness(0) saturate(100%) invert(23%) sepia(98%) saturate(1847%) hue-rotate(192deg) brightness(95%) contrast(101%);
		/* Red */
		--svg-hover-red: brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(7280%) hue-rotate(357deg) brightness(88%) contrast(119%);
		/* White */
		--svg-hover-white: brightness(0) invert(1);
		/* Gray #777777 */
		--svg-hover-gray: brightness(0.5) saturate(0);
		/* ---- 1-8. Transitions ---- */
		--transition-basic: all 0.3s ease;
		--transition-fast: all 0.1s linear;
		/* ---- 1-9. Misc ---- */
		--sp-space: calc(100% - (100% - 1135px) / 3 - 15px);
}
/* ============================================================
 * 2. Root Responsive Overrides
 * ============================================================ */
/* ---- 2-1. min-width: 992px ---- */
@media (min-width: 992px) {
		:root {
				--nav-height: 62px;
				--logo-width: 170px;
		}
}
/* ---- 2-2. min-width: 1200px ---- */
@media (min-width: 1200px) {
		:root {
				--nav-height: 70px;
				--footer-height: 250px;
				--logo-width: 210px;
		}
}
/* ---- 2-3. max-width: 991px (reserved) ---- */
@media (max-width: 991px) {}
/* ---- 2-4. max-width: 767px (reserved) ---- */
@media (max-width: 767px) {}
/* ---- 2-5. max-width: 576px ---- */
@media (max-width: 576px) {
		:root {
				/** Space **/
				--nav-height: 50px;
				--megamenu-height: 450px;
				--megamenu-width: 700px;
				--megamenu-sidebar-width: 240px;
				--logo-width: 120px;
				--container-max-width: 1920px;
				--dropdown-width-lg: 280px;
				--dropdown-width: 250px;
				--dropdown-width-sm: 150px;
				--chat-width: calc(100vw - 1rem);
		}
}
/* ============================================================
 * 3. Base / Reset
 * ============================================================ */
/* ---- 3-1. Links ---- */
a, a:hover {
		text-decoration: none;
}
/* ---- 3-2. Button Close ---- */
.btn-close:focus {
		outline: none !important;
		-webkit-box-shadow: none !important;
		        box-shadow: none !important;
}
/* ---- 3-3. Body ---- */
body {
		font-family: var(--font-family-basic);
		color: var(--text-basic);
		min-height: 100vh;
		overflow-x: hidden;
}
body, .text-base {
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-normal);
		line-height: var(--line-height-normal);
}
.no a {
		color: var(--color-white);
		text-decoration: none;
}
.no a:hover {
		color: var(--color-white);
		text-decoration: underline;
}
/* ---- 3-4. Dropdown ---- */
.dropdown-menu[data-bs-popper] {
		margin-top: 0 !important;
}
/* ---- 3-5. Layout Blocks ---- */
main {
		min-height: calc(100vh - var(--nav-height) - var(--footer-height));
}
header {
		min-height: var(--nav-height);
}
footer {
		min-height: var(--footer-height);
		position: relative;
		z-index: 2;
}
section {
		position: relative;
		z-index: 2;
}
/* ---- 3-6. Textarea ---- */
textarea.form-control {
		border-color: var(--color-gray);
}
textarea.form-control:focus {
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-color: var(--dark-blue);
}
/* ============================================================
 * 4. Color Utilities
 * ============================================================ */
.c-dark-blue {
		color: var(--dark-blue) !important;
}
.form-check-label a,
a.text-primary,
.c-primary-blue {
		color: var(--primary-blue) !important;
}
.form-check-label a:hover,
a.text-primary:hover {
		color: var(--dark-blue) !important;
}
.c-secondary-blue {
		color: var(--secondary-blue) !important;
}
/* ============================================================
 * 5. Support Overlay
 * ============================================================ */
.support-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
		-o-transition: opacity 0.3s ease, visibility 0.3s ease;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 1052;
		pointer-events: none;
}
.support-overlay.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
}
/* ============================================================
 * 6. Sticky Top (sticky-top-m)
 * ============================================================ */
.sticky-top-m:not(.is-close) {
		top: 69px;
		padding-top: 10px;
		position: sticky;
		background-color: var(--color-white);
		z-index: 1000;
}
.sticky-top-m.is-close {
		top: 0;
		padding-top: 15px;
		position: relative;
}
/* ============================================================
 * 7. Page Head Section
 * ============================================================ */
#section-pagehead.has-act-btn nav {
		max-width: calc(100% - 350px);
}
#section-pagehead > div.py-4 {
		padding-top: 18px !important;
		padding-bottom: 1.5rem !important;
}
/* ============================================================
 * 8. Cookie
 * ============================================================ */
/* ---- 8-1. Cookie Overlay ---- */
#cookieOverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9998; /* 在 cookieBox 下方 */
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
		-o-transition: opacity 0.3s ease, visibility 0.3s ease;
		transition: opacity 0.3s ease, visibility 0.3s ease;
}
#cookieOverlay.active {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
}
/* ---- 8-2. Cookie Box Container ---- */
.cookie-box {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-color: var(--color-white);
		-webkit-box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
		padding: 30px 20px;
		z-index: 9999;
		max-width: 100%;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
		/* 初始狀態：隱藏在底部 */
		-webkit-transform: translateY(100%);
		-ms-transform: translateY(100%);
		transform: translateY(100%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		/* 平滑過渡 */
		-webkit-transition: opacity 0.4s ease-out, visibility 0.4s ease-out, -webkit-transform 0.4s ease-out;
		transition: opacity 0.4s ease-out, visibility 0.4s ease-out, -webkit-transform 0.4s ease-out;
		-o-transition: transform 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s ease-out;
		transition: transform 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s ease-out;
		transition: transform 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s ease-out, -webkit-transform 0.4s ease-out;
}
/* 顯示狀態 */
.cookie-box.active {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
}
/* ---- 8-3. Cookie Content ---- */
.cookie-content {
		max-width: 900px;
		margin: 0 auto;
		text-align: center;
}
.cookie-title {
		font-size: var(--font-size-lg);
		font-weight: 600;
		color: var(--dark-gray);
		margin-bottom: 16px;
}
.cookie-text {
		font-size: var(--font-size-sm);
		color: var(--color-gray-dark);
		line-height: 1.6;
		margin-bottom: 28px;
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
}
/* ---- 8-4. Cookie Settings ---- */
.cookie-settings-title {
		font-size: var(--font-size-base-2lg);
		font-weight: 600;
		color: var(--dark-gray);
		margin-bottom: 10px;
		text-align: left;
}
.cookie-settings-subtitle {
		font-size: var(--font-size-sm);
		color: var(--color-gray-dark);
		margin-bottom: 25px;
		text-align: left;
		line-height: 1.5;
}
.cookie-category {
		background-color: var(--color-light-gray);
		border-radius: 8px;
		padding: 20px;
		text-align: left;
		height: 100%;
}
.cookie-category-header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin-bottom: 10px;
}
.cookie-category-title {
		font-size: var(--font-size-base);
		font-weight: 600;
		color: var(--dark-gray);
		margin: 0;
}
.cookie-category-description {
		font-size: var(--font-size-sm);
		color: var(--color-gray-dark);
		line-height: 1.5;
		margin: 0;
}
.cookie-info-section {
		padding: 15px 0;
		margin-top: 20px;
		text-align: left;
}
.cookie-info-title {
		font-size: var(--font-size-sm);
		font-weight: 600;
		color: var(--dark-gray);
		margin-bottom: 8px;
}
.cookie-info-text {
		font-size: var(--font-size-xs);
		color: var(--color-gray-dark);
		line-height: 1.5;
		margin: 0;
}
.cookie-settings, .cookie-welcome {
		max-width: 1440px;
		margin: auto;
}
.cookie-settings.show {
		display: block !important;
}
.cookie-welcome.hidden {
		display: none !important;
}
/* ---- 8-5. Cookie Scrollbar ---- */
.cookie-box::-webkit-scrollbar {
		width: 8px;
}
.cookie-box::-webkit-scrollbar-track {
		background-color: var(--color-light-gray);
		border-radius: 4px;
}
.cookie-box::-webkit-scrollbar-thumb {
		background-color: var(--color-gray);
		border-radius: 4px;
}
.cookie-box::-webkit-scrollbar-thumb:hover {
		background-color: var(--color-gray-dark);
}
/* ---- 8-6. Cookie Buttons ---- */
.cookie-buttons {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}
.cookie-buttons .btn {
		width: 100%;
}
/* ============================================================
 * 9. Fancybox / Lightbox
 * ============================================================ */
.f-thumbs__slide button {
		aspect-ratio: 1 / 1;
		height: auto;
		margin-bottom: 10px;
		max-width: 80px;
}
.f-thumbs.is-horizontal {
		max-height: 100px;
}
.fancybox__slide {
		padding: 20px 20px 0 20px;
}
.f-html {
		background-color: transparent;
		max-width: 1200px;
		aspect-ratio: 16 / 9;
		max-height: 675px !important;
		padding: 0;
}
/* ============================================================
 * 10. Explore Header
 * ============================================================ */
.explore-header {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		margin-bottom: 45px;
}
.explore-header .explore-text {
		max-width: 75%;
		margin: auto;
}
.act-btn-group {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 8px;
		background-color: var(--color-white);
		text-decoration: none;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		position: absolute;
		right: 0;
		color: var(--color-gray);
		top: -100%;
		margin: 0;
}
/* Override: 修正 top 值 */
.act-btn-group {
		top: -3rem;
}
/* ============================================================
 * 11. Compare Button & Badge
 * ============================================================ */
.compare-btn {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 8px;
		padding: 5px 15px;
		border: 1px solid var(--color-gray);
		border-radius: 20px;
		background-color: var(--color-white);
		text-decoration: none;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		color: var(--color-gray);
}
.compare-btn img {
		width: 20px;
}
.compare-btn:hover {
		border-color: var(--secondary-blue);
		background-color: var(--secondary-blue);
		color: var(--color-white);
}
.compare-btn:hover img {
		-webkit-filter: var(--svg-hover-white);
		filter: var(--svg-hover-white);
}
.compare-badge {
		background-color: var(--dark-blue);
		color: var(--color-white);
		border-radius: 50%;
		width: 20px;
		height: 20px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		font-size: var(--font-size-sm);
		font-weight: 600;
}
.compare-btn:hover .compare-badge {
		background-color: var(--color-white);
		color: var(--dark-blue);
}
/* ============================================================
 * 12. Products Grid & Cards
 * ============================================================ */
/* ---- 12-1. Products Info Grid ---- */
.products-info-grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 40px 1fr 40px 1fr;
		grid-template-columns: repeat(3, 1fr);
		gap: 30px 40px;
		margin-bottom: 40px;
}
.products-layout.collapsed .products-info-grid {
		-ms-grid-columns: (1fr)[4];
		grid-template-columns: repeat(4, 1fr);
}
.products-layout.collapsed .products-info-grid.just-one {
		-ms-grid-columns: (1fr)[1];
		grid-template-columns: repeat(1, 1fr);
}
/* ---- 12-2. Product Info Card ---- */
.product-info-card {
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		position: relative;
}
.product-info-card:hover .product-info-image {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
/* ---- 12-3. Product Badge / Tag / Favorite ---- */
.product-badge {
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--dark-blue);
		color: var(--color-white);
		padding: 4px 12px;
		border-radius: 4px;
		font-size: var(--font-size-xs);
		font-weight: 600;
		z-index: 2;
		font-weight: normal;
}
.product-badge.is-new {
		background-color: var(--secondary-blue);
}
.product-tag {
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--color-white);
		color: var(--color-gray);
		border: 1px solid var(--color-gray);
		padding: 4px 12px;
		border-radius: 4px;
		font-size: var(--font-size-xs);
		font-weight: 600;
}
.product-tag:hover {
		color: var(--color-white);
		background-color: var(--dark-blue);
}
.product-favorite {
		position: absolute;
		top: 0;
		right: 0;
		background-color: transparent;
		border: none;
		cursor: pointer;
		color: var(--dark-blue);
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		z-index: 100;
}
.product-favorite .icon {
		min-width: 25px;
		position: relative;
}
.product-favorite:hover {
		color: var(--dark-blue);
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
		transform: scale(1.2);
}
.product-favorite.active {
		color: var(--sp-blue);
}
/* ---- 12-4. Product Image ---- */
.product-info-image {
		aspect-ratio: 1 / 1;
		width: 100%;
		padding: 0;
		text-align: center;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		max-width: 220px;
		margin: auto;
}
.product-info-image img {
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		object-fit: contain;
		margin: auto;
}
/* ---- 12-5. Product Title & Description ---- */
.product-title {
		font-size: var(--font-size-base);
		font-weight: 600;
		color: var(--dark-blue);
		margin-bottom: 10px;
		text-decoration: none;
		display: block;
}
.product-info-card:hover .product-title, .product-title:hover {
		color: var(--secondary-blue);
}
.product-description {
		color: var(--color-gray-dark);
		font-size: var(--font-size-sm);
		line-height: 1.5;
		margin-bottom: 15px;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
}
/* ============================================================
 * 13. Custom Tooltip
 * ============================================================ */
.custom-tooltip .tooltip-inner {
		background-color: var(--secondary-blue);
		color: var(--color-white);
		font-size: var(--font-size-sm);
		padding: 8px 12px;
}
.custom-tooltip .tooltip-arrow::before {
		border-top-color: var(--secondary-blue) !important;
}
/* Bottom placement */
.custom-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
		border-bottom-color: var(--secondary-blue) !important;
}
/* Top placement */
.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
		border-top-color: var(--secondary-blue) !important;
}
/* Left placement */
.custom-tooltip.bs-tooltip-start .tooltip-arrow::before {
		border-left-color: var(--secondary-blue) !important;
}
/* Right placement */
.custom-tooltip.bs-tooltip-end .tooltip-arrow::before {
		border-right-color: var(--secondary-blue) !important;
}
/* ============================================================
 * 14. Load More / Add Button
 * ============================================================ */
.load-more-btn, .add-btn {
		border-color: var(--color-gray);
		color: var(--color-gray);
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
}
.load-more-btn img, .add-btn img {
		width: 20px;
		margin-right: 5px;
		position: relative;
		top: -2px;
}
.load-more-btn:hover, .add-btn:hover {
		border-color: var(--dark-blue);
		background-color: var(--dark-blue);
		color: var(--color-white);
}
.load-more-btn:hover img, .add-btn:hover img {
		-webkit-filter: var(--svg-hover-white);
		filter: var(--svg-hover-white);
}
/* ============================================================
 * 15. Account Actions
 * ============================================================ */
.account-actions {
		position: absolute;
		right: 0;
}
.account-actions .btn {
		background-color: var(--color-light-gray);
		border-radius: 6px;
		border: 1px solid #9f9f9f;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		width: 40px;
		position: relative;
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
.account-actions .btn > img {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		aspect-ratio: 1;
}
.account-actions .btn:hover {
		color: var(--color-white);
		background-color: var(--secondary-blue);
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
.account-actions .btn:hover img {
		-webkit-filter: var(--svg-hover-white);
		filter: var(--svg-hover-white);
}
/* ============================================================
 * 16. Breadcrumb
 * ============================================================ */
.breadcrumb {
		margin-bottom: 0;
}
.breadcrumb-item, .breadcrumb-item a {
		color: var(--color-gray);
		font-size: var(--font-size-sm);
}
.breadcrumb-item.active {
		color: var(--color-gray);
}
.breadcrumb-item a:hover {
		color: var(--dark-gray);
}
.breadcrumb-item a:hover .home-icon {
		-webkit-filter: var(--svg-hover-blue);
		filter: var(--svg-hover-blue);
}
/* Light mode (非頂部狀態) */
.light-mode:not(.is-top) .breadcrumb-item, .light-mode:not(.is-top) .breadcrumb-item.active, .light-mode:not(.is-top) .breadcrumb-item a {
		color: var(--color-white);
}
.light-mode:not(.is-top) .breadcrumb-item + .breadcrumb-item::before {
		color: var(--color-white);
}
.light-mode:not(.is-top) .breadcrumb-item .home-icon {
		-webkit-filter: var(--svg-hover-white);
		filter: var(--svg-hover-white);
}
/* ============================================================
 * 17. Sticky Top (has-sticky-top)
 * ============================================================ */
.has-sticky-top {
		top: 70px;
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
.has-sticky-top > div, .has-sticky-top.is-top > div, .has-sticky-top, .has-sticky-top.is-top {
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
.has-sticky-top.is-top {
		background-color: RGBA(255, 255, 255, .95);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
}
.has-sticky-top.is-top > div {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
}
/* ============================================================
 * 18. Buttons
 * ============================================================ */
/* ---- 18-1. btn-basic ---- */
.btn-basic {

		border-radius: 5rem;
		min-width: 200px;
		padding: 8px 20px;
}
/* ---- 18-2. btn-outline-secondary / btn-secondary ---- */
.btn-outline-secondary {
		border-color: var(--color-gray);
}
.btn-secondary, .btn-outline-secondary:hover {
		background-color: var(--color-gray);
		border-color: var(--color-gray);
}
.btn-secondary:hover {
		background-color: var(--dark-blue);
		border-color: var(--dark-blue);
}
/* ---- 18-3. btn-learn-more ---- */
.btn-learn-more {
		background-color: transparent;
		border: 1px solid var(--color-gray);
		color: var(--color-gray);
		padding: 8px 10px;
		cursor: pointer;
		border-radius: 8px;
		-ms-flex-item-align: start;
		align-self: flex-start;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.btn-learn-more:hover {
		background-color: var(--primary-blue);
		border-color: var(--primary-blue);
		color: var(--color-white);
}
/* ---- 18-4. btn-dw (Download Button) ---- */
.btn-dw {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 8px;
		padding: 8px 16px;
		background-color: transparent;
		border: 1px solid var(--color-white);
		border-radius: 8px;
		color: var(--color-white);
		font-size: var(--font-size-sm);
		cursor: pointer;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		text-decoration: none !important;
}
.btn-dw.btn-lg {
		padding: 16px 16px;
		font-size: var(--font-size-base);
}
.btn-dw:hover {
		background-color: var(--secondary-blue);
		border-color: var(--secondary-blue);
}
.btn-dw .btn-icon {
		width: 16px;
		height: 16px;
		-ms-flex-negative: 0;
		flex-shrink: 0;
}
.btn-dw.dark {
		border-color: var(--dark-blue);
		background-color: var(--dark-blue);
		color: var(--color-white) !important;
}
.btn-dw.dark:hover {
		border-color: var(--secondary-blue);
		background-color: var(--secondary-blue);
}
/* 確保文字不換行 */
.btn-dw span {
		white-space: nowrap;
}
/* ---- 18-5. btn-send ---- */
.btn-send {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 8px;
		padding: 8px 16px;
		background-color: var(--color-light-gray);
		border: 1px solid var(--color-gray);
		font-size: var(--font-size-sm);
		cursor: pointer;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		text-decoration: none !important;
		-webkit-box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
		box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.btn-send:hover {
		color: var(--color-white);
		background-color: var(--secondary-blue);
		border-color: var(--secondary-blue);
}
.btn-send .btn-icon {
		width: 18px;
		height: 18px;
		-ms-flex-negative: 0;
		flex-shrink: 0;
}
.btn-send:hover .btn-icon {
		-webkit-filter: var(--svg-hover-white) !important;
		filter: var(--svg-hover-white) !important;
}
/* ============================================================
 * 19. Alert Modal
 * ============================================================ */
.alertmodal .modal-content {
		border-radius: 20px;
		border: none;
		-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.alertmodal .modal-body {
		padding: 60px 40px;
}
.alertmodal .modal-title {
		text-align: center;
		font-size: var(--font-size-2xl);
		font-weight: 300;
		color: var(--color-black);
		margin: 0 auto;
}
.alertmodal .modal-title strong, .alertmodal .modal-title b {
		font-weight: 600;
}
.alertmodal .text-muted {
		font-size: var(--font-size-base);
		color: var(--color-gray-dark);
		line-height: 1.6;
}
/* Modal 背景 */
.alertmodal .modal-backdrop {
		background-color: rgba(0, 0, 0, 0.5);
}
/* ============================================================
 * 20. Filter Container
 * ============================================================ */
/* ---- 20-1. Filter Layout ---- */
.filter-container {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		gap: 20px;
		margin-bottom: 20px;
}
/* ---- 20-2. Custom Select (filter) ---- */
.filter-container .custom-select-wrapper {
		position: relative;
		width: 305px;
}
.filter-container .custom-select-wrapper:not(.visible) {
		min-width: 200px;
		display: none;
}
/* ---- 20-3. Select Arrow ---- */
.select-arrow {
		position: absolute;
		right: 10px;
		top: 50%;
		text-align: center;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 25px;
		height: 25px;
		pointer-events: none;
		-webkit-transition: -webkit-transform 0.3s ease;
		transition: -webkit-transform 0.3s ease;
		-o-transition: transform 0.3s ease;
		transition: transform 0.3s ease;
		transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.custom-select:focus ~ .select-arrow {
		-webkit-transform: translateY(-50%) rotate(180deg);
		-ms-transform: translateY(-50%) rotate(180deg);
		transform: translateY(-50%) rotate(180deg);
}
/* ---- 20-4. Custom Search Input ---- */
.filter-container .custom-search-wrapper {
		position: relative;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		min-width: 320px;
		max-width: 320px;
		margin-left: auto;
}
.custom-search-input {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		width: 100%;
		height: 40px;
		border: 1px solid var(--color-gray);
		border-radius: 5rem;
		padding: 0 45px 0 20px;
		background-color: var(--color-white);
		font-size: var(--font-size-base);
		color: var(--dark-gray);
		outline: none;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.custom-search-input::-webkit-input-placeholder {
		color: var(--color-gray);
}
.custom-search-input::-moz-placeholder {
		color: var(--color-gray);
}
.custom-search-input:-ms-input-placeholder {
		color: var(--color-gray);
}
.custom-search-input::-ms-input-placeholder {
		color: var(--color-gray);
}
.custom-search-input::placeholder {
		color: var(--color-gray);
}
.custom-search-input:hover {
		border-color: var(--color-gray-dark);
}
.custom-search-input:focus {
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-color: var(--dark-blue);
}
/* ---- 20-5. Search Button ---- */
.search-btn {
		position: absolute;
		right: 8px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 32px;
		height: 32px;
		border: none;
		background-color: transparent;
		cursor: pointer;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		border-radius: 50%;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.search-btn img {
		width: 20px;
		height: 20px;
}
/* ============================================================
 * 21. Form Inputs
 * ============================================================ */
/* ---- 21-1. Input Wrapper & Icon ---- */
.input-wrapper {
		position: relative;
		width: 100%;
}
.input-icon {
		position: absolute;
		left: 20px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 25px;
		height: 25px;
		pointer-events: none;
		z-index: 1;
}
.input-icon.user {
		width: 20px;
		height: 20px;
}
/* ---- 21-2. Form Input ---- */
.form-input {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		width: 100%;
		height: 40px;
		border: 1px solid var(--color-gray);
		border-radius: 5rem;
		padding: 0 20px 0 55px;
		background-color: var(--color-white);
		font-size: var(--font-size-base);
		outline: none;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.form-input.short {
		padding: 0 15px 0 15px;
		width: auto;
}
.form-input::-webkit-input-placeholder {
		color: var(--color-gray);
}
.form-input::-moz-placeholder {
		color: var(--color-gray);
}
.form-input:-ms-input-placeholder {
		color: var(--color-gray);
}
.form-input::-ms-input-placeholder {
		color: var(--color-gray);
}
.form-input::placeholder {
		color: var(--color-gray);
}
.form-input:hover {
		border-color: var(--color-gray);
}
.form-input:focus {
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-color: var(--dark-blue);
}
/* ---- 21-3. Select Wrapper & Custom Select ---- */
.select-wrapper {
		position: relative;
		width: 100%;
}
.custom-select-wrapper {
		position: relative;
		min-width: 200px;
		/* display: none; */
}
.custom-select-wrapper.visible {
		display: block;
}
.custom-select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		width: 100%;
		height: 40px;
		border: 1px solid var(--color-gray);
		border-radius: 5rem;
		padding: 0 20px 0 20px;
		background-color: var(--color-white);
		cursor: pointer;
		font-size: var(--font-size-base);
		color: var(--color-gray);
		outline: none;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.custom-select:hover {
		border-color: var(--color-gray-dark);
}
.custom-select:focus {
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-color: var(--dark-blue);
}
.custom-select option {
		padding: 15px;
		font-size: var(--font-size-base);
		color: var(--dark-gray);
}
.custom-select option:disabled {
		color: var(--color-gray);
}
/* ---- 21-4. Custom Switch ---- */
.custom-switch-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 10px;
}
.switch-label-left, .switch-label-right {
		font-size: var(--font-size-base);
		-webkit-transition: color 0.3s ease;
		-o-transition: color 0.3s ease;
		transition: color 0.3s ease;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
}
.form-switch-lg {
		--switch-width: 45px;
		--switch-height: 20px;
		--switch-dot-size: 14px;
}
.form-switch-lg .form-check-input {
		width: var(--switch-width);
		height: var(--switch-height);
		border-radius: calc(var(--switch-height) / 2);
		cursor: pointer;
		background-color: var(--color-white);
		border-color: var(--border-color);
}
.form-switch-lg .form-check-input::before {
		width: var(--switch-dot-size);
		height: var(--switch-dot-size);
}
.form-switch-lg .form-check-input:checked {
		background-color: var(--dark-blue);
		border-color: var(--dark-blue);
}
.form-check-input:checked {
		background-color: var(--dark-blue);
		border-color: var(--dark-blue);
}
.form-check-label {
		font-size: var(--font-size-base);
		cursor: pointer;
		margin-left: 8px;
}
/* ---- 21-5. Captcha ---- */
.captcha-block .form-input.short {
		width: 120px !important;
}
.captcha-image {
		height: 40px;
}
.captcha-refresh {
		width: 40px;
		height: 40px;
		border: 0;
		background-color: transparent;
		cursor: pointer;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		padding: 0;
}
.captcha-refresh img {
		width: 30px;
		height: 30px;
}
/* ============================================================
 * 22. Common / Shared Styles
 * ============================================================ */
/* ---- 22-1. News Tags ---- */
.news-tags {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 5px;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}
/* ---- 22-2. Header Link ---- */
.header-link {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 10px;
		color: var(--color-gray);
		cursor: pointer;
}
.header-link img {
		width: 20px;
}
.header-link:hover {
		color: var(--secondary-blue);
}
.header-link:hover img {
		-webkit-filter: var(--svg-hover-blue);
		filter: var(--svg-hover-blue);
}
/* ---- 22-3. Read More ---- */
.read-more {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		gap: 10px;
		color: var(--secondary-blue);
		cursor: pointer;
		margin-top: auto;
		text-align: end;
		font-size: var(--font-size-base);
}
.read-more.light {
		color: var(--color-white);
}
.read-more.light:hover {
		color: var(--secondary-blue);
}
.read-more img {
		width: 12px;
		position: relative;
		top: -2px;
}
.read-more:hover {
		color: var(--dark-blue);
}
.read-more:hover img {
		-webkit-filter: var(--svg-hover-dark-blue);
		filter: var(--svg-hover-dark-blue);
}
/* ---- 22-4. Info Content ---- */
.info-content {
		margin: auto;
		word-break: break-word;
		font-size: var(--font-size-base);
		line-height: 1.5;
		color: var(--color-gray);
		/* padding-bottom: 100px; */
}
.info-content.has-underline ol, .info-content.has-underline ul {
		margin-bottom: 2px;
		padding-left: 1.25rem;
}
.info-content.has-underline li {
		margin-bottom: 2px;
}
.info-content.has-underline p {
		margin-bottom: 2px;
}
.info-content.has-underline a {
		color: var(--color-gray);
		text-decoration: underline;
}
/* ---- 22-5. Section Title & Subtitle ---- */
.section-title {
		text-align: center;
		font-size: var(--font-size-3xl);
		font-weight: 300;
		color: var(--color-black);
		margin: 0 auto .5rem auto;
}
.section-title strong, .section-title b {
		font-weight: 600;
}
.section-subtitle {
		text-align: center;
		font-size: var(--font-size-xl);
		margin: 0 auto;
}
.section-header .section-subtitle {
		margin: 0;
}
/* ---- 22-6. Tags Row & Tag Variants ---- */
.tags-row {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		gap: 10px;
		margin: 30px 0;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}
.tag-outline-gray {
		border: 1px solid var(--color-gray);
		color: var(--color-gray);
		padding: 2px 4px;
		border-radius: 5px;
		font-size: var(--font-size-sm);
}
.tag-outline-gray:hover {
		color: var(--color-white);
		background-color: var(--color-gray);
}
.tag-outline-white {
		border: 1px solid var(--color-white);
		border-radius: 5px;
		padding: 2px 4px;
		font-size: var(--font-size-sm);
		color: var(--color-white);
}
.tag-outline-white:hover {
		border-color: var(--secondary-blue);
		background-color: var(--secondary-blue);
}
.tag-red {
		background-color: var(--color-red);
		color: var(--color-white);
		padding: 5px 10px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 10px;
		font-size: var(--font-size-sm);
}
.tag-blue {
		background-color: var(--secondary-blue);
		color: var(--color-white);
		padding: 5px 10px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		gap: 10px;
		font-size: var(--font-size-sm);
}
.tag-blue.dark {
		background-color: var(--dark-blue);
}
a.tag-red:hover, a.tag-blue:hover {
		border-color: var(--color-gray);
		background-color: var(--color-gray);
}
/* ---- 22-7. Badge New ---- */
.badge-new {
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--secondary-blue);
		color: var(--color-white);
		padding: 2px 10px;
		font-size: var(--font-size-sm);
}
/* ---- 22-8. has-check Button ---- */
.btn.has-check.active {
		color: var(--secondary-blue);
		font-weight: bold;
		border: 1px solid var(--color-gray);
		background-color: var(--color-white);
}
/* ============================================================
 * 23. Logo
 * ============================================================ */
.vecow-logo {
		width: var(--logo-width);
		max-width: var(--logo-width);
}
/* ============================================================
 * 24. Video Player
 * ============================================================ */
.video-player {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		position: relative;
		max-width: 50%;
}
.video-thumbnail {
		width: 100%;
		height: auto;
		display: block;
}
.play-button {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		cursor: pointer;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		z-index: 10;
		opacity: .85;
}
.play-button:hover {
		-webkit-transform: scale(1.25);
		-ms-transform: scale(1.25);
		transform: scale(1.25);
		opacity: 1;
}
.play-button img {
		width: 100%;
		height: 100%;
}
/* ============================================================
 * 25. Date Info
 * ============================================================ */
.date-info {
		color: var(--color-gray);
		font-size: var(--font-size-sm);
}
/* ============================================================
 * 26. Container Responsive Overrides
 * ============================================================ */
/* ---- 26-1. min-width: 1200px ---- */
@media (min-width: 1200px) {
		.container-xxl.wide {
				max-width: 100%;
		}
		.container-xxl.sp {
				max-width: 1100px;
				padding: 0;
		}
		.container-xxl {
				max-width: 100%;
				padding-left: 6rem;
				padding-right: 6rem;
		}
		/*
    #section-pagehead > .container-xxl {
        max-width: 1100px;
        padding-left: 0;
        padding-right: 0;
    }
    */
		.container-xxl:not(.wide) {
				max-width: 100%;
				padding-left: 7rem;
				padding-right: 7rem;
		}
		/*
    .info-content:not(.wide) {
        max-width: 1230px;
        padding-left: 0;
        padding-right: 0;
    }
    */
		.info-content.sp {
				max-width: 990px;
		}
		.site-footer .container-xxl, .vecow-header .container-xxl {
				max-width: 100%;
				padding-left: 5rem !important;
				padding-right: 5rem !important;
		}
}
/* ---- 26-2. min-width: 1440px ---- */
@media (min-width: 1440px) {
		.container-xxl.wide {
				max-width: 100%;
		}
		.container-xxl.sp {
				max-width: 1110px;
				padding: 0;
		}
		.container-xxl.sp-wide {
				max-width: 1160px !important;
				padding: 0;
		}
		/*
    .products-section > .container-xxl,
    .account-detail-section > .container-xxl,
    #section-pagehead > .container-xxl {
        max-width: 100%;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
    */
		.info-content.sp {
				max-width: 990px;
		}
		.info-content.wide {
				max-width: 100%;
		}
		#section-pagehead.has-act-btn nav {
				max-width: 100%;
		}
}
/* ---- 26-3. min-width: 1600px ---- */
@media (min-width: 1600px) {
		.container-xxl:not(.wide) {
				max-width: 1345px !important;
				padding-left: 2rem !important;
				padding-right: 2rem !important;
		}
		.container-xxl.sp-wide {
				max-width: 1160px !important;
				padding: 0 !important;
		}
		.container-xxl.wide {
				max-width: 1920px;
		}
		.site-footer .container-xxl, .vecow-header .container-xxl {
				max-width: 1345px !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
		}
}
/* ---- 26-4. max-width: 1199px ---- */
@media (max-width: 1199px) {
		#section-pagehead > div.py-4 {
				padding-top: 0 !important;
				padding-bottom: 0 !important;
		}
		.vecow-header .container-xxl {
				padding-left: 1rem !important;
				padding-right: 1rem !important;
		}
		.explore-header {
				padding-top: 15px;
				margin-bottom: 15px;
		}
		.btn-learn-more {
				padding: 8px 5px;
		}
		.sticky-top-m .act-btn-group {
				top: 0;
				margin-left: auto;
		}
		#section-pagehead nav {
				display: none;
		}
		#section-pagehead > div {
				padding: 0 !important;
		}
		.vecow-logo {
				margin-left: 1rem;
		}
		.container-xxl.sp, .container-xxl.wide {
				max-width: 100%;
		}
		.container-xxl.sp, .container-xxl {
				padding-left: 4rem;
				padding-right: 4rem;
		}
		.info-content.sp {
				max-width: 100%;
		}
		#section-pagehead > .container-xxl, .container-xxl:not(.wide) {
				padding-left: 4rem;
				padding-right: 4rem;
		}
		.cookie-text {
				font-size: var(--font-size-sm);
		}
		.section-title {
				font-size: var(--font-size-2xl);
		}
		.header-link {
				font-size: var(--font-size-sm);
		}
		.header-link img {
				width: 17px;
		}
		.product-tag, .tag-outline-white, .btn-view-all, .tag-blue, .tag-blue.dark, .tag-outline-gray {
				font-size: var(--font-size-sm);
				text-wrap: nowrap;
		}
		.btn-basic {
				min-width: 150px;
				padding: 4px 10px;
				font-size: var(--font-size-sm);
		}
		.cookie-settings, .cookie-welcome {
				max-width: 100%;
		}
		.act-btn-group {
				top: 0;
				position: relative;
		}
}
/* ---- 26-5. max-width: 991px ---- */
@media (max-width: 991px) {
		.explore-header {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
		}
		.products-info-grid {
				-ms-grid-columns: 1fr 20px 1fr;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px 20px;
		}
		.filter-container .custom-search-wrapper {
				min-width: 300px;
				max-width: 300px;
		}
		.has-sticky-top {
				top: 50px;
		}
		.section-title {
				font-size: var(--font-size-2lg);
		}
		.header-link {
				font-size: var(--font-size-sm);
		}
		.site-footer .container-xxl, #section-pagehead > .container-xxl, .container-xxl:not(.wide) {
				padding-left: 3rem;
				padding-right: 3rem;
		}
		.container-xxl.sp, .container-xxl {
				padding-left: 3rem;
				padding-right: 3rem;
		}
		.vecow-header .container-xxl {
				padding-left: .5rem !important;
				padding-right: .5rem !important;
		}
		.sticky-top-m:not(.is-close) {
				top: 50px;
				padding-top: 30px;
		}
		.product-detail-header .compare-btn {
				font-size: var(--font-size-sm);
				padding: 5px 10px;
		}
		.compare-badge {
				font-size: var(--font-size-sm);
		}
		.compare-btn img {
				width: 15px;
		}
}
/* ---- 26-6. max-width: 767px ---- */
@media (max-width: 767px) {
		#section-pagehead > .container-xxl, .container-xxl:not(.wide) {
				padding-left: 1rem;
				padding-right: 1rem;
		}
		.cookie-box {
				padding: 20px 15px;
				max-width: 100%;
				overflow-y: auto;
				overflow-x: hidden;
		}
		.cookie-settings {
				height: 100vh;
				padding: 3rem 0;
		}
		.filter-container .custom-search-wrapper {
				min-width: 100%;
				max-width: 100%;
				margin-left: 0;
		}
		.filter-container .custom-select-wrapper {
				min-width: 47%;
				max-width: 47%;
				margin-left: 0;
		}
		.filter-container .custom-select-wrapper:nth-child(2) {
				margin-left: auto;
		}
		.filter-container {
				-webkit-box-orient: horizontal;
				-webkit-box-direction: normal;
				-ms-flex-direction: row;
				flex-direction: row;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
		}
		#page-nav > .container-xxl.sp {
				padding-left: .5rem !important;
				padding-right: .5rem !important;
		}
		.section-subtitle {
				font-size: var(--font-size-lg);
				margin: 40px 0 20px 0;
		}
		.center-mode .container-xxl {
				padding-left: 0 !important;
				padding-right: 0 !important;
		}
		.btn-basic {
				min-width: 150px;
				padding: 4px 15px;
		}
		.copyright {
				line-height: 1;
		}
}
/* ---- 26-7. max-width: 576px ---- */
@media (max-width: 576px) {
		.explore-header .explore-text {
				max-width: 100%;
		}
		.social-follow {
				margin-top: 1rem;
		}
		.vecow-logo {
				margin-left: .5rem;
		}
		#section-pagehead > .container-xxl, .container-xxl:not(.wide) {
				padding-left: 1.5rem;
				padding-right: 1.5rem;
		}
		.container-xxl.sp, .container-xxl {
				padding-left: 1.5rem;
				padding-right: 1.5rem;
		}
		.section-subtitle {
				font-size: var(--font-size-2lg);
				margin: 20px 0 20px 0 !important;
		}
		.btn-basic {
				min-width: 100px;
				padding: 4px 10px;
		}
}