@charset "UTF-8";
body {
  font-family: "Kanit", "Noto Sans", "Noto Sans TC", "Noto Sans SC", Helvetica, sans-serif;
  font-weight: 400;
}

.product-card,
.filter-btn,.platform-btn,
.load-more-btn,
.social-link,
footer,
.countdown,
#countdown {
  font-family: "Kanit", "Noto Sans", "Noto Sans TC", "Noto Sans SC", Helvetica, sans-serif; 
}

strong,
h1,
h2,
h3,
.product-card h3,
.filter-btn,.platform-btn,
.load-more-btn {
  font-weight: 700;
}

:lang(en),
:lang(en) * {
  font-family: "Kanit", sans-serif;
  font-weight: 700;
}

:lang(zh),
:lang(zh-Hant),
:lang(zh-TW),
:lang(zh) * {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
}

.product-card,
.product-card * {
  font-family: "Kanit", "Noto Sans", "Noto Sans TC", "Noto Sans SC", Helvetica, sans-serif;
}

.product-card .price-info {
  text-align: right;
}
.product-card .price-info p {
  margin: 0;
  line-height: 1.2;
}
.product-card .price-info .old-price {
  font-size: 0.75rem;
  color: #9ca3af;
  text-decoration: line-through;
}
.product-card .price-info .new-price {
  font-size: 1.25rem;
  color: #ea580c;
  font-weight: 800;
}

.product-card .discount-label {
  font-size: 0.75rem;
  font-weight: bold;
  color: white;
  background-color: #f97316;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.product-card .discount-label.no-discount{background-color: #FFFFFF;}

.filter-btn,.platform-btn,
.load-more-btn,
.social-link,
footer,
.countdown,
#countdown {
  font-family: "Kanit", "Noto Sans", "Noto Sans TC", "Noto Sans SC", Helvetica, sans-serif;
}

.filter-btn ,.platform-btn{
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.filter-btn:hover,.platform-btn:hover {
  background-color: #eff6ff;
}
.filter-btn:active,.platform-btn:active {
  transform: scale(0.95);
}
.filter-btn.active {
  background-color: #3b82f6; /******FILTER TAG ACTIVE COLOR******/
  color: white;
}
@media (min-width: 640px) {
  .filter-btn ,.platform-btn{
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}
@media (min-width: 768px) {
  .filter-btn,.platform-btn {
    font-size: 1rem;
  }
}

.ip-logo {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
}
.ip-logo:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  /*background: linear-gradient(to right, #60a5fa, #a78bfa);*/
  background:#818cab;
  color:white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  transition: opacity 0.3s ease;
}
.social-link:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.load-more-btn {
  background: linear-gradient(to right, #60a5fa, #a78bfa);
  color: white;
  font-weight: bold;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.3s ease;
}
.load-more-btn:hover {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

/* 背景基底色 */
.bg-base {
  background-color: #ffffff;
}
/* 整個視差容器貼滿全螢幕、置底 */
#parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
	background: url("../img/bg.jpg") no-repeat center; background-size:100% auto; 
  background-color:#eef0f2; /*主體背景色#e2e6eb  */
}

@media (min-width: 681px) and (max-width: 1280px) {
#parallax-bg { background-size:auto 100%; }
}

@media (max-width: 680px) {
#parallax-bg {background-size:1280px auto; }
}


/* 背景圖層通用 */
.bg-layer {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: repeat-y;
  background-position: center top;
  transition: background-position 0.2s ease-out;
}

/* 遠層背景：滿版 */
.layer-back {
  width: 100%;
  background-size: cover;
  background-image: url("../img/bg-far.png");
  z-index: 1;
}

/* 前層裝飾：固定寬度居中 */
.layer-front {
  width: 1440px;
  left: 50%;
  transform: translateX(-50%);
  background-size: contain;
  background-image: url("../img/bg-near.png");
  opacity: 0.8;
  z-index: 2;
}

/* JS提示 */
.noscript-warning{ text-align:center; padding:0 0.5rem; color:#fff45a; }

*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}
progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}
fieldset{margin:0;padding:0}
legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}
audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}
.absolute{position:absolute}
.relative{position:relative}
.sticky{position:sticky}
.top-0{top:0px}
.right-2{right:0.5rem}
.top-2{top:0.5rem}
.z-10{z-index:10}
.mx-auto{margin-left:auto;margin-right:auto}
.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mb-1{margin-bottom:0.25rem}
.block{display:block}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.h-12{height:3rem}
.h-full{height:100%}
.h-14{height:3.5rem}
.w-full{width:100%}.w-16{width:4rem}
.max-w-6xl{max-width:72rem}
.max-w-sm{max-width:27rem}
.cursor-pointer{cursor:pointer}
.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}
.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-end{align-items:flex-end}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}

.gap-10{gap:2.5rem}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.overflow-hidden{overflow:hidden}
.rounded{border-radius:0.25rem}
.rounded-lg{border-radius:0.5rem}
.rounded-md{border-radius:0.375rem}
.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}
.bg-blue-500{--tw-bg-opacity:1;background-color:#3457bf;}
.bg-blue-100\/10{background-color:rgb(219 219 219 / 80%)}/*footer背景色*/
.bg-blue-500{--tw-bg-opacity:1;background-color:#3457bf;}/*提示欄位背景色*/

.bg-blue-900{--tw-bg-opacity:1;background-color:rgb(30 58 138 / var(--tw-bg-opacity, 1))}
.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}
.bg-white\/80{background-color:rgb(255 255 255 / 0.8)}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232 / var(--tw-bg-opacity, 1))}
.bg-orange-600{--tw-bg-opacity:1;background-color:rgb(234 88 12 / var(--tw-bg-opacity, 1))}
.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}
.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-purple-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}
.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}
.object-cover{object-fit:cover}.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.text-left{text-align:left}.text-center{text-align:center}
.font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-\[10px\]{font-size:10px}
.text-base{font-size:1rem;line-height:1.5rem}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}
.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}
.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}
.text-yellow-200{--tw-text-opacity:1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}
.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}
.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity, 1))}
.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}
.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.duration-500{transition-duration:500ms}.duration-300{transition-duration:300ms}
.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.hover\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

@media (min-width: 640px){.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.sm\:flex-row{flex-direction:row}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}}

@media (min-width: 768px){.md\:block{display:block}.md\:hidden{display:none}.md\:w-1\/3{width:33.333333%}.md\:w-3\/5{width:60%}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:py-24{padding-top:4rem;padding-bottom:4rem}.md\:text-3xl{font-size:1.687rem;line-height:2.2rem}}

@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}

/* <640px: 一列 1 個 */
section .grid-cols-1 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* ≥640px: 一列 2 個 */
@media (min-width: 460px) {
section .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ≥768px: 一列 3 個 */
@media (min-width: 768px) {
section .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ≥1024px: 一列 4 個 */
@media (min-width: 1024px) {
section .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/*----調整----*/

.notice{ margin: 1em auto ;}

.max-w-6xl {
    max-width:90rem;
}/*
#thumbnail-container{ height:auto;position: relative;}
.w-16 {
    width: auto;
}
.h-14 {
    height: 30%; max-height:195px;
}*/
#logo{ position:absolute; top:-50px; left:0%; margin:0; padding:0;width: 40vw; max-width: 200px;} #logo img{ width:100%; height:auto;}
.period{ text-align:right; color:#f97316;}

/*
footer
*/
footer div p{ width:100%; font-weight: 900;color: #646464; }
#link p::before,#sns p:before{ content:'- ';} 
#link p:after,#sns p:after{ content:' -';}

#link{position:relative; display: flex;  justify-content:center; flex-wrap:wrap;  align-items:center; gap:20px;align-items:center;margin:0 0 2em 0; text-align: center;}
#link p{ margin-bottom: 1em;}
#sns a{ position: relative; margin: 0; color:#fff;font-weight: 600; display: block; width: auto; background:#a0a0a0;  border-radius: 50px; overflow: hidden; transition: all .3s;}
footer a:hover{ opacity:0.8;   font-size: 1.125rem; line-height: 1.75rem;}

#sns{position:relative; display: flex;  justify-content:center; flex-wrap:wrap;  align-items:center; gap:20px;align-items:center;margin:0 0 2em 0; text-align: center;}
#sns a { width: 15vw; max-width: 70px; height: 15vw; max-height: 70px;}
#sns p{ font-weight: 700;}
#sns a#yt{  background: url(../img/sns_yt.png) center center no-repeat #bbbbbb; background-size: auto 84%; }
#sns a#fb{  background: url(../img/sns_fb.png) center bottom no-repeat #bbbbbb; background-size: auto 90%;}
#sns a#ig{  background: url(../img/sns_ig.png) center center no-repeat #bbbbbb; background-size: auto 90%; }
#sns a span{ display:none;}

#copyright{position:relative; display: flex;  justify-content:center; flex-wrap:wrap;  align-items:center; gap:20px;align-items:center;margin:0 0 ; text-align: center;}
/* ============================= */
/* Banner Carousel Layout */
/* ============================= */

.banner-wrapper{
  display:flex;
  gap:12px;
	max-width:840px;
}

/* 大圖 */
.banner-main{
  flex:1;
  aspect-ratio:1/1;
  border-radius:8px;
}

/* 小圖容器 */
#thumbnail-container{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:calc((100% - 12px) / 4);
}

/* 小圖 */
.thumbnail{
  width:100%;
  border-radius:6px;
  aspect-ratio:1/1;
  object-fit:cover;
}

.thumbnail:hover{
  filter:brightness(1.1);
}
.thumbnail.active{
  outline:3px solid #3b82f6;
}
#countdown.font-extrabold {font-weight: 600; }

/* ============================= */
/* MORE PLATFORM =LINK TO CJ*/
/* ============================= */

#more-platform{position:relative; width: calc(100vw -  2em); max-width:400px; margin: 1em auto 2em auto;}
#more-platform a { display:block; 
	background: linear-gradient( 135deg,  #3457bf 0%,  #3a61d1 100% );color: #fff; font-weight: 500; font-size: 1.2rem; line-height: 1.2rem;box-shadow: 0 2px 4px rgba(0,0,0,0.2); border-radius: 0.5rem; text-align: center; text-align-last: center; padding: 1.2em 0;}
#more-platform a:hover{ font-size: 1.2rem;line-height: 1.2rem;}
#more-platform a::after {
  content: "";
  position: absolute;
  top: 50%;          
  right: 10px;          
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid white;
}
/* ============================= */
/* 260421*/
/* ============================= */
@media (min-width: 460px) {
.text-base{ min-height:3rem;}
}
#notice{padding-left:0.5rem; padding-right:.5rem;  position: relative; margin: 0;}
#countdown{ position: relative; padding-top:0.75rem;padding-bottom:0.75rem;}

/* ============================= */
/* 260702 追加平台*/
/* ============================= */
.bg-grey{background-color:rgb(70 70 70 / 80%);}

#platform-buttons{width: 100%; border-bottom-width:1px;padding-top: 1rem;padding-bottom: 1rem;}
#filter-buttons{border-top-width:1px;padding-top: 1rem;padding-bottom: 1rem;}
.platform-btn.platform-btn-steam.active{ background:#1B2838; color:#fff;}
.platform-btn.platform-btn-ps.active{ background:#003791; color:#fff;}
.platform-btn.platform-btn-switch.active{ background:#E60012;color:#fff;}
.platform-btn.platform-btn-xbox.active{ background:#107C10;  color:#fff;}
/*商品左上小標籤*/
.platform-label{ font-size:10px; font-weight:bold; padding:3px 8px; border-radius:6px; left:0.5rem; color:white; box-shadow:0 2px 4px rgba(0,0,0,.2);}
.platform-steam{  background:#1b2838;}
.platform-ps{ background:#003791;}
.platform-switch{ background:#e60012;}
.platform-xbox{ background:#107c10;}

/* Filter 收合按鈕 */
.filter-wrapper{
    position:sticky;
}
.filter-toggle-btn{
    position:absolute; bottom:-36px; transform:translateX(-50%);
    width:86px;
    height:36px;
    border-radius:0 0 10px 10px; background-color:rgb(255 255 255 / 0.85);
	left:50%; display: flex;align-items: center;justify-content: center;
    cursor:pointer;  z-index:20;
	backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    transition:.25s;
}

/* 收合動畫 */
#filter-content{ max-height:500px; overflow: hidden; transition:max-height .30s ease;}
#filter-content.collapsed{ max-height:0;}
.filter-toggle-btn{transition:.25s;}
.toggle-icon{ transition:transform .25s ease;}
.filter-toggle-btn.collapsed .toggle-icon{  transform:rotate(180deg);}

/* 非 sticky 時隱藏按鈕 */
.filter-toggle-btn{ opacity:0; pointer-events:none;}
.filter-wrapper.is-sticky .filter-toggle-btn{opacity:1;pointer-events:auto;}

/* 手機才顯示 */

@media(min-width:768px){
    .filter-toggle-btn{ display:none; }
}