.elementor-4243 .elementor-element.elementor-element-7fed079{--display:flex;}.elementor-4243 .elementor-element.elementor-element-7fed079.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4243 .elementor-element.elementor-element-79a5240{--display:flex;}.elementor-4243 .elementor-element.elementor-element-cf0b776{--display:flex;}.elementor-4243 .elementor-element.elementor-element-2c16896.elementor-wc-products ul.products li.product{--button-align-display:flex;--button-align-direction:column;--button-align-justify:space-between;border-radius:0px;padding:10px 10px 10px 10px;}.elementor-4243 .elementor-element.elementor-element-2c16896.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4243 .elementor-element.elementor-element-2c16896.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-4243 .elementor-element.elementor-element-384cf12{--display:flex;}.elementor-4243 .elementor-element.elementor-element-dbb1900{--display:flex;}.elementor-4243 .elementor-element.elementor-element-09f4c46.elementor-wc-products ul.products li.product{--button-align-display:flex;--button-align-direction:column;--button-align-justify:space-between;}.elementor-4243 .elementor-element.elementor-element-09f4c46.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4243 .elementor-element.elementor-element-09f4c46.elementor-wc-products ul.products li.product span.onsale{display:block;}.elementor-4243 .elementor-element.elementor-element-d571cdc{--display:flex;}@media(max-width:1024px){.elementor-4243 .elementor-element.elementor-element-2c16896.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4243 .elementor-element.elementor-element-09f4c46.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-4243 .elementor-element.elementor-element-7fed079{--width:551.556px;}.elementor-4243 .elementor-element.elementor-element-2c16896.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-4243 .elementor-element.elementor-element-2c16896.elementor-wc-products ul.products li.product{padding:0px 0px 0px 0px;}.elementor-4243 .elementor-element.elementor-element-09f4c46.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(min-width:768px){.elementor-4243 .elementor-element.elementor-element-cf0b776{--width:1700px;}.elementor-4243 .elementor-element.elementor-element-dbb1900{--width:1700px;}}/* Start custom CSS for html, class: .elementor-element-a560a23 *//* =====================================================
   TECHCAT PRODUCT CATEGORY MODULE
   完全隔離版
===================================================== */

.techcat-section {

  --techcat-bg: #0B0F1A;

  --techcat-card: #121826;

  --techcat-card-hover: #162033;


  --techcat-primary: #6B9EFF;

  --techcat-secondary: #8BB4FF;

  --techcat-light-blue: #A8D4FF;


  --techcat-text: #E8EEF7;

  --techcat-muted: #A0AEC0;

  --techcat-border:
    rgba(160, 174, 192, 0.16);


  position: relative;

  width: 100%;

  min-height: 920px;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(107, 158, 255, 0.08) 0%,
      rgba(107, 158, 255, 0.035) 18%,
      rgba(11, 15, 26, 0) 46%
    );

  overflow: hidden;

  isolation: isolate;

  box-sizing: border-box;
}


/* =====================================================
   星空 Canvas
   只存在於 TECHCAT 模塊
===================================================== */

.techcat-stars {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: block;

  pointer-events: none;

  z-index: 0;

  opacity: 0.72;
}


/* =====================================================
   主容器
===================================================== */

.techcat-orbit {

  position: relative;

  z-index: 2;

  width: min(100%, 1700px);

  height: 920px;

  margin: 0 auto;
}


/* =====================================================
   中央區域
===================================================== */

.techcat-center {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 520px;

  transform:
    translate(-50%, -50%);

  text-align: center;

  z-index: 10;
}


/* =====================================================
   小標題
===================================================== */

.techcat-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  color:
    var(--techcat-muted);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.22em;

  line-height: 1;
}


.techcat-eyebrow__dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    var(--techcat-primary);

  box-shadow:
    0 0 12px
    rgba(107, 158, 255, 0.65);
}


/* =====================================================
   主標題
===================================================== */

.techcat-center__title {

  margin: 0;

  color:
    var(--techcat-text);

  font-size:
    clamp(38px, 3.2vw, 58px);

  font-weight: 600;

  letter-spacing: -0.045em;

  line-height: 1.08;
}


/* =====================================================
   描述
===================================================== */

.techcat-center__text {

  max-width: 440px;

  margin:
    20px auto 30px;

  color:
    var(--techcat-muted);

  font-size: 15px;

  font-weight: 400;

  line-height: 1.8;
}


/* =====================================================
   全部產品按鈕
===================================================== */

.techcat-center__button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  min-width: 175px;

  height: 58px;

  padding:
    0 27px;

  border:
    1px solid
    rgba(255, 255, 255, 0.85);

  border-radius: 50px;

  background:
    #E8EEF7;

  color:
    #0B0F1A;

  font-size: 15px;

  font-weight: 600;

  text-decoration: none;

  box-shadow:
    0 10px 40px
    rgba(107, 158, 255, 0.08);

  transition:
    transform 0.45s
    cubic-bezier(0.22, 1, 0.36, 1),

    box-shadow 0.45s ease,

    background-color 0.35s ease;
}


.techcat-center__button:hover {

  transform:
    translateY(-4px);

  background:
    #ffffff;

  box-shadow:
    0 18px 55px
    rgba(107, 158, 255, 0.18);
}


.techcat-center__arrow {

  display: inline-block;

  font-size: 18px;

  transition:
    transform 0.4s
    cubic-bezier(0.22, 1, 0.36, 1);
}


.techcat-center__button:hover
.techcat-center__arrow {

  transform:
    translate(3px, -3px);
}


/* =====================================================
   產品卡片
===================================================== */

.techcat-card {

  position: absolute;

  display: flex;

  align-items: center;

  width: 360px;

  min-height: 168px;

  padding:
    24px 25px;

  box-sizing: border-box;

  border:
    1px solid
    var(--techcat-border);

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(30, 41, 59, 0.72),
      rgba(18, 24, 38, 0.88)
    );

  color:
    var(--techcat-text);

  text-decoration: none;

  overflow: hidden;

  z-index: 5;

  isolation: isolate;

  box-shadow:
    0 18px 55px
    rgba(0, 0, 0, 0.18);

  will-change:
    transform;

  transition:
    transform 0.6s
    cubic-bezier(0.22, 1, 0.36, 1),

    border-color 0.45s ease,

    background 0.45s ease,

    box-shadow 0.45s ease;
}


/* =====================================================
   卡片內部微弱光暈
===================================================== */

.techcat-card::before {

  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  left: -90px;

  top: -90px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(107, 158, 255, 0.14) 0%,
      rgba(107, 158, 255, 0) 70%
    );

  opacity: 0;

  transition:
    opacity 0.6s ease;

  pointer-events: none;

  z-index: -1;
}


/* =====================================================
   六張卡片位置
===================================================== */

.techcat-card--01 {

  left: 6%;

  top: 21%;

  animation:
    techcat-float-one
    6.8s
    ease-in-out
    infinite;
}


.techcat-card--02 {

  right: 6%;

  top: 21%;

  animation:
    techcat-float-two
    7.5s
    ease-in-out
    infinite;
}


.techcat-card--03 {

  left: 6%;

  bottom: 20%;

  animation:
    techcat-float-three
    7.2s
    ease-in-out
    infinite;
}


.techcat-card--04 {

  right: 6%;

  bottom: 20%;

  animation:
    techcat-float-four
    6.6s
    ease-in-out
    infinite;
}


.techcat-card--05 {

  left: 50%;

  top: 6%;

  animation:
    techcat-float-five
    7.8s
    ease-in-out
    infinite;
}


.techcat-card--06 {

  left: 50%;

  bottom: 5%;

  animation:
    techcat-float-six
    7.1s
    ease-in-out
    infinite;
}


/* =====================================================
   卡片內容
===================================================== */

.techcat-card__icon {

  flex:
    0 0 62px;

  width: 62px;

  height: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 17px;

  border:
    1px solid
    rgba(168, 212, 255, 0.16);

  border-radius: 19px;

  background:
    rgba(107, 158, 255, 0.06);

  transition:
    transform 0.55s
    cubic-bezier(0.22, 1, 0.36, 1),

    background-color 0.4s ease,

    border-color 0.4s ease,

    box-shadow 0.4s ease;
}


.techcat-card__icon svg {

  width: 29px;

  height: 29px;

  fill: none;

  stroke:
    var(--techcat-light-blue);

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition:
    transform 0.5s
    cubic-bezier(0.22, 1, 0.36, 1),

    stroke 0.4s ease;
}


.techcat-card__content {

  min-width: 0;

  flex: 1;
}


.techcat-card__number {

  display: block;

  margin-bottom: 5px;

  color:
    rgba(160, 174, 192, 0.58);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.16em;
}


.techcat-card__title {

  margin: 0;

  color:
    var(--techcat-text);

  font-size: 18px;

  font-weight: 600;

  line-height: 1.25;
}


.techcat-card__description {

  display:
    -webkit-box;

  margin:
    7px 0 0;

  color:
    var(--techcat-muted);

  font-size: 12px;

  line-height: 1.55;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;
}


.techcat-card__link {

  position: absolute;

  right: 22px;

  bottom: 19px;

  color:
    rgba(168, 212, 255, 0.65);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.04em;

  opacity: 0.7;

  transition:
    color 0.4s ease,

    opacity 0.4s ease,

    transform 0.4s ease;
}


.techcat-card__link span {

  display: inline-block;

  margin-left: 4px;

  transition:
    transform 0.4s
    cubic-bezier(0.22, 1, 0.36, 1);
}


/* =====================================================
   Hover / Active
===================================================== */

.techcat-card:hover,
.techcat-card--active {

  z-index: 20;

  transform:
    translateY(-10px)
    scale(1.025);

  border-color:
    rgba(139, 180, 255, 0.42);

  background:
    linear-gradient(
      145deg,
      rgba(30, 41, 59, 0.92),
      rgba(18, 24, 38, 0.98)
    );

  box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.28),

    0 0 45px
    rgba(107, 158, 255, 0.08);
}


.techcat-card:hover::before,
.techcat-card--active::before {

  opacity: 1;
}


.techcat-card:hover
.techcat-card__icon,

.techcat-card--active
.techcat-card__icon {

  transform:
    translateY(-2px)
    scale(1.08);

  border-color:
    rgba(139, 180, 255, 0.38);

  background:
    rgba(107, 158, 255, 0.1);

  box-shadow:
    0 0 28px
    rgba(107, 158, 255, 0.08);
}


.techcat-card:hover
.techcat-card__icon svg,

.techcat-card--active
.techcat-card__icon svg {

  stroke:
    #A8D4FF;

  transform:
    scale(1.06);
}


.techcat-card:hover
.techcat-card__link,

.techcat-card--active
.techcat-card__link {

  color:
    var(--techcat-secondary);

  opacity: 1;

  transform:
    translateX(2px);
}


.techcat-card:hover
.techcat-card__link span,

.techcat-card--active
.techcat-card__link span {

  transform:
    translate(3px, -3px);
}


/* =====================================================
   浮動動畫
===================================================== */

@keyframes techcat-float-one {

  0%,
  100% {

    transform:
      translate3d(0, 0, 0);

  }

  50% {

    transform:
      translate3d(0, -13px, 0);

  }

}


@keyframes techcat-float-two {

  0%,
  100% {

    transform:
      translate3d(0, 0, 0);

  }

  50% {

    transform:
      translate3d(0, 11px, 0);

  }

}


@keyframes techcat-float-three {

  0%,
  100% {

    transform:
      translate3d(0, 0, 0);

  }

  50% {

    transform:
      translate3d(0, -10px, 0);

  }

}


@keyframes techcat-float-four {

  0%,
  100% {

    transform:
      translate3d(0, 0, 0);

  }

  50% {

    transform:
      translate3d(0, 14px, 0);

  }

}


@keyframes techcat-float-five {

  0%,
  100% {

    transform:
      translate3d(-50%, 0, 0);

  }

  50% {

    transform:
      translate3d(-50%, -12px, 0);

  }

}


@keyframes techcat-float-six {

  0%,
  100% {

    transform:
      translate3d(-50%, 0, 0);

  }

  50% {

    transform:
      translate3d(-50%, 13px, 0);

  }

}


/* =====================================================
   Tablet
===================================================== */

@media (max-width: 1200px) {

  .techcat-section {

    min-height: 900px;

  }


  .techcat-orbit {

    height: 900px;

  }


  .techcat-card {

    width: 310px;

    min-height: 155px;

    padding: 21px;

  }


  .techcat-card--01,
  .techcat-card--03 {

    left: 3%;

  }


  .techcat-card--02,
  .techcat-card--04 {

    right: 3%;

  }


  .techcat-center {

    width: 430px;

  }

}


/* =====================================================
   Tablet / 小筆電
===================================================== */

@media (max-width: 900px) {

  .techcat-section {

    min-height: auto;

    padding:
      100px 24px;

  }


  .techcat-orbit {

    width: 100%;

    height: auto;

    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 20px;

  }


  .techcat-center {

    position: relative;

    left: auto;

    top: auto;

    width: 100%;

    grid-column:
      1 / -1;

    grid-row: 1;

    transform: none;

    margin-bottom: 25px;

  }


  .techcat-card {

    position: relative;

    left: auto;

    right: auto;

    top: auto;

    bottom: auto;

    width: 100%;

  }


  .techcat-card--01,
  .techcat-card--02,
  .techcat-card--03,
  .techcat-card--04,
  .techcat-card--05,
  .techcat-card--06 {

    animation: none;

  }


  .techcat-card--05 {

    grid-column: 1;

  }


  .techcat-card--06 {

    grid-column: 2;

  }

}


/* =====================================================
   Mobile
===================================================== */

@media (max-width: 600px) {

  .techcat-section {

    padding:
      80px 18px;

  }


  .techcat-orbit {

    display: flex;

    flex-direction: column;

    gap: 15px;

  }


  .techcat-center {

    margin-bottom: 20px;

  }


  .techcat-eyebrow {

    margin-bottom: 15px;

    font-size: 10px;

  }


  .techcat-center__title {

    font-size: 34px;

    letter-spacing:
      -0.04em;

  }


  .techcat-center__text {

    margin-top: 16px;

    margin-bottom: 25px;

    font-size: 13px;

  }


  .techcat-center__button {

    height: 54px;

    min-width: 165px;

    font-size: 14px;

  }


  .techcat-card {

    min-height: 145px;

    padding: 20px;

    border-radius: 24px;

    animation: none;

  }


  .techcat-card__icon {

    flex-basis: 54px;

    width: 54px;

    height: 54px;

    margin-right: 14px;

    border-radius: 16px;

  }


  .techcat-card__icon svg {

    width: 25px;

    height: 25px;

  }


  .techcat-card__title {

    font-size: 16px;

  }


  .techcat-card__description {

    font-size: 11px;

  }


  .techcat-card__link {

    right: 18px;

    bottom: 16px;

  }

}


/* =====================================================
   Reduced Motion
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .techcat-card {

    animation: none !important;

    transition: none;

  }


  .techcat-center__button,

  .techcat-card__icon,

  .techcat-card__link,

  .techcat-card__link span,

  .techcat-card__icon svg {

    transition: none;

  }


  .techcat-stars {

    opacity: 0.5;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-615941b *//* =========================================================
   蒸汽幻霧｜熱銷產品展示
   完全模塊化 CSS
========================================================= */

.vuhot-module {
  --vuhot-bg: #0B0F1A;
  --vuhot-blue: #6B9EFF;
  --vuhot-blue-light: #8BB4FF;
  --vuhot-sky: #A8D4FF;
  --vuhot-dark: #121826;
  --vuhot-card: #151E2E;
  --vuhot-border: rgba(168, 212, 255, 0.12);
  --vuhot-text: #E8EEF7;
  --vuhot-muted: #A0AEC0;

  position: relative;
  width: 100%;
  max-width: 100%;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(107, 158, 255, 0.07),
      transparent 32%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(139, 180, 255, 0.045),
      transparent 35%
    ),
    var(--vuhot-bg);

  isolation: isolate;

  box-sizing: border-box;

  padding:
    100px 0 72px;
}


/* =========================================================
   所有元素尺寸控制
========================================================= */

.vuhot-module,
.vuhot-module *,
.vuhot-module *::before,
.vuhot-module *::after {
  box-sizing: border-box;
}


/* =========================================================
   星空
========================================================= */

.vuhot-module__stars {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  pointer-events: none;

  z-index: 0;

  opacity: 0.8;
}


/* =========================================================
   背景柔光
========================================================= */

.vuhot-module__glow {
  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(90px);

  opacity: 0.08;

  z-index: 0;
}

.vuhot-module__glow--one {
  top: -180px;
  left: 10%;

  background: #6B9EFF;
}

.vuhot-module__glow--two {
  right: 5%;
  bottom: -220px;

  background: #8BB4FF;
}


/* =========================================================
   1700px 主容器
========================================================= */

.vuhot-module__container {
  position: relative;

  z-index: 2;

  width: min(
    calc(100% - 80px),
    1700px
  );

  margin: 0 auto;
}


/* =========================================================
   Header
========================================================= */

.vuhot-module__header {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 40px;

  margin-bottom: 54px;
}


/* =========================================================
   標題
========================================================= */

.vuhot-module__heading {
  min-width: 0;
}

.vuhot-module__eyebrow {
  display: inline-flex;

  align-items: center;

  margin-bottom: 14px;

  color: var(--vuhot-blue-light);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.2em;

  line-height: 1;

  text-transform: uppercase;
}

.vuhot-module__title {
  margin: 0;

  color: var(--vuhot-text);

  font-size: clamp(
    36px,
    4vw,
    58px
  );

  font-weight: 700;

  line-height: 1.05;

  letter-spacing: -0.04em;
}

.vuhot-module__subtitle {
  margin: 16px 0 0;

  color: var(--vuhot-muted);

  font-size: 15px;

  line-height: 1.7;
}


/* =========================================================
   左右按鈕
========================================================= */

.vuhot-module__controls {
  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;
}

.vuhot-module__nav {
  position: relative;

  width: 54px;
  height: 54px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid
    rgba(168, 212, 255, 0.16);

  border-radius: 50px;

  background: rgba(
    18,
    24,
    38,
    0.75
  );

  color: var(--vuhot-text);

  font-size: 21px;

  line-height: 1;

  cursor: pointer;

  transition:
    transform 0.35s
      cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.vuhot-module__nav:hover {
  transform: translateY(-4px);

  background: #1E293B;

  border-color:
    rgba(139, 180, 255, 0.4);

  box-shadow:
    0 12px 35px
    rgba(107, 158, 255, 0.15);
}

.vuhot-module__nav:active {
  transform: translateY(-1px) scale(0.95);
}

.vuhot-module__nav--next {
  background:
    linear-gradient(
      135deg,
      #6B9EFF,
      #8BB4FF
    );

  border-color: transparent;

  color: #0B0F1A;

  box-shadow:
    0 10px 30px
    rgba(107, 158, 255, 0.22);
}

.vuhot-module__nav--next:hover {
  background:
    linear-gradient(
      135deg,
      #8BB4FF,
      #A8D4FF
    );

  box-shadow:
    0 14px 38px
    rgba(107, 158, 255, 0.3);
}


/* =========================================================
   商品滑動區
========================================================= */

.vuhot-module__viewport {
  position: relative;

  width: 100%;

  overflow: hidden;
}


/* =========================================================
   商品 Track

   手機同樣保留橫向滑動
========================================================= */

.vuhot-module__track {
  display: flex;

  gap: 24px;

  width: 100%;

  overflow-x: auto;

  overflow-y: visible;

  padding:
    12px 6px 34px;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  scrollbar-width: none;

  -ms-overflow-style: none;

  overscroll-behavior-x: contain;
}

.vuhot-module__track::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   商品卡片
========================================================= */

.vuhot-product {
  position: relative;

  flex:
    0 0
    calc(
      (100% - 72px) / 4
    );

  min-width: 280px;

  scroll-snap-align: start;

  animation:
    vuhotFloat
    6s
    ease-in-out
    infinite;

  will-change: transform;
}


/*
 * 不同卡片錯開浮動時間
 * 讓整體不會像複製貼上
 */

.vuhot-product:nth-child(2) {
  animation-delay: -1.2s;
}

.vuhot-product:nth-child(3) {
  animation-delay: -2.4s;
}

.vuhot-product:nth-child(4) {
  animation-delay: -3.6s;
}

.vuhot-product:nth-child(5) {
  animation-delay: -4.8s;
}

.vuhot-product:nth-child(6) {
  animation-delay: -1.8s;
}


/* =========================================================
   上下浮動
========================================================= */

@keyframes vuhotFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-9px);
  }

}


/* =========================================================
   商品 Link
========================================================= */

.vuhot-product__link {
  position: relative;

  display: block;

  color: inherit;

  text-decoration: none;

  outline: none;
}


/* =========================================================
   商品圖片
========================================================= */

.vuhot-product__media {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  margin: 0;

  overflow: hidden;

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      #182235,
      #111927
    );

  border:
    1px solid
    var(--vuhot-border);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.22);

  isolation: isolate;
}


/* 圖片 */

.vuhot-product__media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 0.75s
      cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s ease;
}


/* Hover 圖片放大 */

.vuhot-product__link:hover
.vuhot-product__media img {
  transform: scale(1.055);

  filter:
    brightness(1.04)
    saturate(1.04);
}


/* =========================================================
   圖片上的淡淡科技光
========================================================= */

.vuhot-product__media::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(139, 180, 255, 0.12),
      transparent 40%,
      rgba(107, 158, 255, 0.06)
    );

  opacity: 0;

  transition:
    opacity 0.5s ease;
}

.vuhot-product__link:hover
.vuhot-product__media::after {
  opacity: 1;
}


/* =========================================================
   商品編號
========================================================= */

.vuhot-product__number {
  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 2;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 50px;

  background:
    rgba(11, 15, 26, 0.58);

  color: #E8EEF7;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.05em;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transition:
    transform 0.35s ease,
    background 0.35s ease;
}

.vuhot-product__link:hover
.vuhot-product__number {
  transform: translateY(-3px);

  background:
    rgba(107, 158, 255, 0.85);

  color: #0B0F1A;
}


/* =========================================================
   商品右上角箭頭
========================================================= */

.vuhot-product__arrow {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 2;

  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(11, 15, 26, 0.55);

  border:
    1px solid
    rgba(255, 255, 255, 0.1);

  color: #E8EEF7;

  font-size: 18px;

  opacity: 0;

  transform:
    translate(-5px, 5px);

  transition:
    opacity 0.4s ease,
    transform 0.45s
      cubic-bezier(0.16, 1, 0.3, 1);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

.vuhot-product__link:hover
.vuhot-product__arrow {
  opacity: 1;

  transform:
    translate(0, 0);
}


/* =========================================================
   商品文字
========================================================= */

.vuhot-product__content {
  padding:
    22px 6px 0;
}


/* 小標 */

.vuhot-product__meta {
  margin-bottom: 10px;

  color: var(--vuhot-blue-light);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.16em;

  line-height: 1;

  text-transform: uppercase;
}


/* 商品名稱 */

.vuhot-product__name {
  margin: 0;

  color: var(--vuhot-text);

  font-size: 20px;

  font-weight: 650;

  line-height: 1.3;

  letter-spacing: -0.02em;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.vuhot-product__link:hover
.vuhot-product__name {
  color: var(--vuhot-blue-light);

  transform:
    translateX(3px);
}


/* 商品介紹 */

.vuhot-product__description {
  margin: 9px 0 0;

  color: var(--vuhot-muted);

  font-size: 13px;

  line-height: 1.7;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;
}


/* =========================================================
   Focus
========================================================= */

.vuhot-product__link:focus-visible {
  outline:
    2px solid
    var(--vuhot-blue-light);

  outline-offset: 5px;

  border-radius: 28px;
}


/* =========================================================
   底部提示
========================================================= */

.vuhot-module__bottom {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 6px;

  color: var(--vuhot-muted);

  font-size: 11px;

  letter-spacing: 0.04em;
}

.vuhot-module__line {
  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--vuhot-blue),
      transparent
    );
}


/* =========================================================
   平板
========================================================= */

@media (max-width: 1200px) {

  .vuhot-product {
    flex:
      0 0
      calc(
        (100% - 48px) / 3
      );
  }

}


/* =========================================================
   手機
========================================================= */

@media (max-width: 767px) {

  .vuhot-module {

    padding:
      72px 0 55px;

  }


  .vuhot-module__container {

    width:
      calc(100% - 36px);

  }


  .vuhot-module__header {

    align-items:
      flex-end;

    margin-bottom:
      34px;

    gap: 20px;

  }


  .vuhot-module__title {

    font-size:
      38px;

  }


  .vuhot-module__subtitle {

    font-size:
      13px;

  }


  .vuhot-module__controls {

    gap: 8px;

  }


  .vuhot-module__nav {

    width: 46px;
    height: 46px;

    font-size: 18px;

  }


  /*
   * 手機刻意讓一張卡片
   * 不完全佔滿螢幕
   *
   * 使用者會自然看到下一張，
   * 因此知道可以左右滑動。
   */

  .vuhot-product {

    flex:
      0 0
      78vw;

    min-width:
      0;

  }


  .vuhot-module__track {

    gap: 18px;

    padding:
      8px 3px 28px;

    scroll-snap-type:
      x mandatory;

  }


  .vuhot-product__media {

    border-radius:
      23px;

  }


  .vuhot-product__content {

    padding:
      18px 3px 0;

  }


  .vuhot-product__name {

    font-size:
      18px;

  }


  .vuhot-product__description {

    font-size:
      12px;

  }


  /*
   * 手機沒有 hover，
   * 因此箭頭直接保持低存在感。
   */

  .vuhot-product__arrow {

    opacity:
      0.75;

    transform:
      translate(0, 0);

  }


  .vuhot-module__bottom {

    margin-top:
      3px;

  }


  .vuhot-module__glow {

    width:
      280px;

    height:
      280px;

    filter:
      blur(70px);

  }

}


/* =========================================================
   小手機
========================================================= */

@media (max-width: 420px) {

  .vuhot-module__container {

    width:
      calc(100% - 28px);

  }


  .vuhot-product {

    flex:
      0 0
      82vw;

  }


  .vuhot-module__title {

    font-size:
      34px;

  }

}


/* =========================================================
   減少動畫
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .vuhot-product {

    animation:
      none;

  }


  .vuhot-module__track {

    scroll-behavior:
      auto;

  }


  .vuhot-product__media img,
  .vuhot-product__link,
  .vuhot-product__arrow,
  .vuhot-product__number,
  .vuhot-product__name {

    transition:
      none;

  }


  .vuhot-module__stars {

    opacity:
      0.5;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e5505bc *//* =========================================
   TW FAQ
   Premium Dark / Light Tech
   ========================================= */

.tw-faq {
  --tw-bg: #0B0F1A;
  --tw-card: #121826;
  --tw-card-hover: #162033;

  --tw-border: rgba(160, 174, 192, 0.14);
  --tw-border-hover: rgba(107, 158, 255, 0.38);

  --tw-primary: #6B9EFF;
  --tw-primary-light: #8BB4FF;
  --tw-primary-bright: #A8D4FF;

  --tw-heading: #E8EEF7;
  --tw-text: #A0AEC0;

  position: relative;

  width: 100%;

  background: var(--tw-bg);

  color: var(--tw-heading);

  overflow: hidden;

  isolation: isolate;
}


/* =========================================
   星空 Canvas

   最底層
   不接收滑鼠點擊
========================================= */

.tw-faq__stars {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  pointer-events: none;

  z-index: -1;

  opacity: 0.78;
}


/* =========================================
   所有 FAQ 元素
========================================= */

.tw-faq,
.tw-faq *,
.tw-faq *::before,
.tw-faq *::after {
  box-sizing: border-box;
}


/* =========================================
   Main Layout
========================================= */

.tw-faq__inner {

  position: relative;

  z-index: 2;

  width: min(
    1700px,
    calc(100% - 64px)
  );

  margin: 0 auto;

  padding: 120px 0;

  display: grid;

  grid-template-columns:
    minmax(300px, 0.78fr)
    minmax(500px, 1.22fr);

  gap: clamp(
    70px,
    8vw,
    150px
  );

  align-items: start;
}


/* =========================================
   Left
========================================= */

.tw-faq__intro {

  max-width: 500px;

  padding-top: 8px;
}


.tw-faq__eyebrow {

  display: inline-flex;

  align-items: center;

  margin-bottom: 22px;

  color:
    var(--tw-primary-light);

  font-size: 11px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.tw-faq__eyebrow::before {

  content: "";

  width: 28px;

  height: 1px;

  margin-right: 12px;

  background:
    linear-gradient(
      90deg,
      var(--tw-primary),
      transparent
    );
}


.tw-faq__title {

  margin: 0 0 26px;

  color:
    var(--tw-heading);

  font-size:
    clamp(
      42px,
      4vw,
      64px
    );

  font-weight: 600;

  line-height: 1.06;

  letter-spacing: -0.045em;
}


.tw-faq__title span {

  display: block;

  background:
    linear-gradient(
      100deg,
      var(--tw-primary),
      var(--tw-primary-bright)
    );

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color:
    transparent;

  color: transparent;
}


.tw-faq__description {

  max-width: 460px;

  margin: 0 0 38px;

  color:
    var(--tw-text);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.75;

  letter-spacing: 0.005em;
}


/* =========================================
   LINE CTA
========================================= */

.tw-faq__cta {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 54px;

  padding:
    0 20px
    0 10px;

  gap: 11px;

  border:
    1px solid
    rgba(
      139,
      180,
      255,
      0.5
    );

  border-radius: 50px;

  background:
    linear-gradient(
      135deg,
      var(--tw-primary),
      var(--tw-primary-light)
    );

  color:
    #0B0F1A;

  font-size: 14px;

  font-weight: 700;

  line-height: 1;

  text-decoration: none;

  box-shadow:
    0 8px 28px
    rgba(
      107,
      158,
      255,
      0.16
    ),

    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.32
    );

  transition:
    transform 240ms ease,
    box-shadow 240ms ease,
    filter 240ms ease;

  -webkit-tap-highlight-color:
    transparent;
}


.tw-faq__cta:hover {

  color:
    #0B0F1A;

  transform:
    translateY(-2px);

  filter:
    brightness(1.05);

  box-shadow:
    0 12px 36px
    rgba(
      107,
      158,
      255,
      0.24
    ),

    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.38
    );
}


.tw-faq__cta:active {

  transform:
    translateY(1px)
    scale(0.985);
}


.tw-faq__cta-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  flex: 0 0 36px;

  border-radius: 50%;

  background:
    rgba(
      11,
      15,
      26,
      0.14
    );
}


.tw-faq__cta-icon svg {

  width: 20px;

  height: 20px;
}


.tw-faq__cta-arrow {

  margin-left: 4px;

  font-size: 17px;

  transition:
    transform 240ms ease;
}


.tw-faq__cta:hover
.tw-faq__cta-arrow {

  transform:
    translateX(3px);
}


/* =========================================
   FAQ List
========================================= */

.tw-faq__list {

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-width: 0;
}


.tw-faq__item {

  position: relative;

  overflow: hidden;

  border:
    1px solid
    var(--tw-border);

  border-radius: 18px;

  background:
    rgba(
      18,
      24,
      38,
      0.88
    );

  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);

  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}


.tw-faq__item:hover {

  border-color:
    var(--tw-border-hover);

  background:
    rgba(
      22,
      32,
      51,
      0.92
    );
}


.tw-faq__item.is-open {

  border-color:
    rgba(
      107,
      158,
      255,
      0.34
    );

  background:
    rgba(
      20,
      29,
      45,
      0.94
    );

  box-shadow:
    0 10px 35px
    rgba(
      0,
      0,
      0,
      0.12
    ),

    inset 0 1px 0
    rgba(
      168,
      212,
      255,
      0.035
    );
}


/* =========================================
   Open Blue Accent
========================================= */

.tw-faq__item::before {

  content: "";

  position: absolute;

  top: 18px;

  bottom: 18px;

  left: 0;

  width: 2px;

  border-radius:
    0 3px 3px 0;

  background:
    var(--tw-primary);

  opacity: 0;

  transform:
    scaleY(0.4);

  transform-origin:
    center;

  transition:
    opacity 280ms ease,
    transform 280ms ease;
}


.tw-faq__item.is-open::before {

  opacity: 0.9;

  transform:
    scaleY(1);
}


/* =========================================
   Question
========================================= */

.tw-faq__question {

  width: 100%;

  min-height: 82px;

  padding:
    22px
    24px
    22px
    28px;

  border: 0;

  outline: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  background: transparent;

  color:
    var(--tw-heading);

  font: inherit;

  text-align: left;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.tw-faq__question:focus-visible {

  box-shadow:
    inset 0 0 0 2px
    rgba(
      107,
      158,
      255,
      0.6
    );
}


.tw-faq__question-text {

  color:
    var(--tw-heading);

  font-size: 16px;

  font-weight: 600;

  line-height: 1.45;

  letter-spacing: -0.01em;
}


/* =========================================
   Chevron
========================================= */

.tw-faq__icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  flex: 0 0 36px;

  border:
    1px solid
    rgba(
      160,
      174,
      192,
      0.14
    );

  border-radius: 50%;

  background:
    rgba(
      11,
      15,
      26,
      0.28
    );

  color:
    var(--tw-text);

  transition:
    transform 360ms
      cubic-bezier(
        0.4,
        0,
        0.2,
        1
      ),

    color 260ms ease,

    border-color 260ms ease,

    background-color 260ms ease;
}


.tw-faq__icon svg {

  width: 18px;

  height: 18px;
}


.tw-faq__item:hover
.tw-faq__icon {

  border-color:
    rgba(
      107,
      158,
      255,
      0.35
    );

  color:
    var(--tw-primary-light);
}


.tw-faq__item.is-open
.tw-faq__icon {

  border-color:
    rgba(
      107,
      158,
      255,
      0.48
    );

  background:
    rgba(
      107,
      158,
      255,
      0.09
    );

  color:
    var(--tw-primary-light);

  transform:
    rotate(180deg);
}


/* =========================================
   Answer
========================================= */

.tw-faq__answer {

  height: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    height 400ms
      cubic-bezier(
        0.4,
        0,
        0.2,
        1
      ),

    opacity 260ms ease;
}


.tw-faq__item.is-open
.tw-faq__answer {

  opacity: 1;
}


.tw-faq__answer-inner {

  padding:
    0
    76px
    26px
    28px;

  color:
    var(--tw-text);

  font-size: 15px;

  font-weight: 400;

  line-height: 1.8;
}


.tw-faq__answer-inner strong {

  color:
    var(--tw-primary-bright);

  font-weight: 600;
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 1100px) {

  .tw-faq__inner {

    width:
      min(
        calc(100% - 48px),
        900px
      );

    grid-template-columns: 1fr;

    gap: 60px;

    padding:
      90px 0;
  }


  .tw-faq__intro {

    max-width: 650px;
  }


  .tw-faq__description {

    max-width: 600px;
  }


  .tw-faq__title {

    font-size:
      clamp(
        44px,
        7vw,
        58px
      );
  }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 767px) {

  .tw-faq__stars {

    opacity: 0.55;
  }


  .tw-faq__inner {

    width:
      calc(100% - 36px);

    gap: 44px;

    padding:
      72px 0;
  }


  .tw-faq__eyebrow {

    margin-bottom: 18px;

    font-size: 10px;
  }


  .tw-faq__title {

    margin-bottom: 20px;

    font-size:
      clamp(
        38px,
        11vw,
        48px
      );

    line-height: 1.08;

    letter-spacing:
      -0.04em;
  }


  .tw-faq__description {

    margin-bottom: 28px;

    font-size: 15px;

    line-height: 1.7;
  }


  .tw-faq__cta {

    min-height: 52px;

    font-size: 13px;
  }


  .tw-faq__list {

    gap: 10px;
  }


  .tw-faq__item {

    border-radius: 16px;
  }


  .tw-faq__question {

    min-height: 72px;

    padding:
      18px
      16px
      18px
      20px;

    gap: 16px;
  }


  .tw-faq__question-text {

    font-size: 15px;

    line-height: 1.45;
  }


  .tw-faq__icon {

    width: 34px;

    height: 34px;

    flex-basis: 34px;
  }


  .tw-faq__answer-inner {

    padding:
      0
      20px
      22px;

    font-size: 14px;

    line-height: 1.75;
  }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 390px) {

  .tw-faq__inner {

    width:
      calc(100% - 28px);

    padding:
      58px 0;
  }


  .tw-faq__title {

    font-size: 36px;
  }


  .tw-faq__question {

    padding-left: 17px;

    padding-right: 13px;
  }


  .tw-faq__question-text {

    font-size: 14px;
  }


  .tw-faq__answer-inner {

    padding-left: 17px;

    padding-right: 17px;
  }

}


/* =========================================
   Reduced Motion
========================================= */

@media (
  prefers-reduced-motion: reduce
) {

  .tw-faq__stars {

    opacity: 0.38;
  }


  .tw-faq__item::before {

    transition: none;
  }


  .tw-faq * {

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

}/* End custom CSS */