.bgEffect {
  content: "";
  position: absolute;
  z-index: 1;
  background: transparent;
}
.bgEffect-1 {
  width: 1px;
  height: 1px;
  filter: blur(1px);
  border-radius: 10px;
  box-shadow:
    571px 173px 1px 2px rgba(208, 162, 25, 0.5),
    1732px 143px 1px 2px rgba(208, 162, 25, 0.5),
    1745px 454px 1px 2px rgba(255, 87, 34, 0.5),
    234px 784px 1px 2px rgba(208, 162, 25, 0.5),
    1793px 1123px 1px 2px rgba(255, 152, 0, 0.5),
    1076px 504px 1px 2px rgba(208, 162, 25, 0.5),
    633px 601px 1px 2px rgba(255, 87, 34, 0.5),
    350px 630px 1px 2px rgba(255, 235, 59, 0.5),
    1164px 782px 1px 2px rgba(208, 162, 25, 0.5),
    76px 690px 1px 2px rgba(246, 162, 75, 0.5),
    1825px 701px 1px 2px rgba(205, 220, 57, 0.5),
    1646px 578px 1px 2px rgba(255, 235, 59, 0.5),
    544px 293px 1px 2px rgba(192, 125, 37, 0.5),
    445px 1061px 1px 2px rgba(206, 148, 10, 0.5),
    928px 47px 1px 2px rgba(208, 162, 25, 0.5),
    168px 1410px 1px 2px rgba(241, 229, 40, 0.5),
    777px 782px 1px 2px rgba(255, 87, 34, 0.5),
    1235px 1941px 1px 2px rgba(255, 87, 34, 0.5),
    104px 1690px 1px 2px rgba(241, 229, 40, 0.5),
    1167px 1338px 1px 2px rgba(247, 157, 102, 0.5),
    345px 1652px 1px 2px rgba(215, 65, 40, 0.5),
    1682px 1196px 1px 2px rgba(244, 67, 54, 0.5),
    1995px 494px 1px 2px rgba(241, 229, 40, 0.5),
    428px 798px 1px 2px rgba(255, 87, 34, 0.5),
    340px 1623px 1px 2px rgba(244, 67, 54, 0.5),
    605px 349px 1px 2px rgba(255, 87, 34, 0.5),
    1339px 1344px 1px 2px rgba(206, 148, 10, 0.5),
    1102px 1745px 1px 2px rgba(246, 162, 75, 0.5),
    1592px 1676px 1px 2px rgba(192, 125, 37, 0.5),
    419px 1024px 1px 2px rgba(255, 152, 0, 0.5),
    630px 1033px 1px 2px rgba(192, 125, 37, 0.5),
    1995px 1644px 1px 2px rgba(208, 162, 25, 0.5),
    1092px 712px 1px 2px rgba(255, 87, 34, 0.5),
    1355px 606px 1px 2px rgba(244, 67, 54, 0.5);
  animation: animStar 150s linear infinite;
}
.bgEffect-2 {
  width: 3px;
  height: 3px;
  box-shadow:
    571px 173px 2px rgba(208, 162, 25, 0.5),
    1732px 143px 2px rgba(208, 162, 25, 0.5),
    1745px 454px 2px rgba(255, 87, 34, 0.5),
    234px 784px 2px rgba(208, 162, 25, 0.5),
    1793px 1123px 2px rgba(255, 152, 0, 0.5),
    1076px 504px 2px rgba(208, 162, 25, 0.5),
    633px 601px 2px rgba(255, 87, 34, 0.5),
    350px 630px 2px rgba(255, 235, 59, 0.5),
    1164px 782px 2px rgba(208, 162, 25, 0.5),
    76px 690px 2px rgba(246, 162, 75, 0.5),
    1825px 701px 2px rgba(205, 220, 57, 0.5),
    1646px 578px 2px rgba(255, 235, 59, 0.5),
    544px 293px 2px rgba(192, 125, 37, 0.5),
    445px 1061px 2px rgba(206, 148, 10, 0.5),
    928px 47px 2px rgba(208, 162, 25, 0.5),
    168px 1410px 2px rgba(241, 229, 40, 0.5),
    777px 782px 2px rgba(255, 87, 34, 0.5),
    1235px 1941px 2px rgba(255, 87, 34, 0.5),
    104px 1690px 2px rgba(241, 229, 40, 0.5),
    1167px 1338px 2px rgba(247, 157, 102, 0.5),
    345px 1652px 2px rgba(215, 65, 40, 0.5),
    1682px 1196px 2px rgba(244, 67, 54, 0.5),
    1995px 494px 2px rgba(241, 229, 40, 0.5),
    428px 798px 2px rgba(255, 87, 34, 0.5),
    340px 1623px 2px rgba(244, 67, 54, 0.5),
    605px 349px 2px rgba(255, 87, 34, 0.5),
    1339px 1344px 2px rgba(206, 148, 10, 0.5),
    1102px 1745px 2px rgba(246, 162, 75, 0.5),
    1592px 1676px 2px rgba(192, 125, 37, 0.5),
    419px 1024px 2px rgba(255, 152, 0, 0.5),
    630px 1033px 2px rgba(192, 125, 37, 0.5),
    1995px 1644px 2px rgba(208, 162, 25, 0.5),
    1092px 712px 2px rgba(255, 87, 34, 0.5),
    1355px 606px 2px rgba(244, 67, 54, 0.5),
    622px 1881px 2px rgba(205, 220, 57, 0.5),
    1481px 621px 2px rgba(158, 158, 158, 0.5),
    19px 1348px 2px rgba(241, 229, 40, 0.5),
    864px 1780px 2px rgba(247, 157, 102, 0.5),
    442px 1136px 2px rgba(192, 125, 37, 0.5),
    67px 712px 2px rgba(255, 87, 34, 0.5),
    89px 1406px 2px rgba(244, 67, 54, 0.5),
    275px 321px 2px rgba(215, 65, 40, 0.5),
    592px 630px 2px rgba(247, 157, 102, 0.5),
    1012px 1690px 2px rgba(255, 87, 34, 0.5),
    1749px 23px 2px rgba(206, 148, 10, 0.5),
    94px 1542px 2px rgba(255, 235, 59, 0.5),
    1201px 1657px 2px rgba(246, 162, 75, 0.5),
    1505px 692px 2px rgba(192, 125, 37, 0.5),
    1799px 601px 2px rgba(208, 162, 25, 0.5),
    656px 811px 2px rgba(208, 162, 25, 0.5),
    701px 597px 2px rgba(208, 162, 25, 0.5),
    1202px 46px 2px rgba(255, 87, 34, 0.5),
    890px 569px 2px rgba(255, 87, 34, 0.5),
    1613px 813px 2px rgba(192, 125, 37, 0.5),
    223px 252px 2px rgba(255, 152, 0, 0.5),
    983px 1093px 2px rgba(244, 67, 54, 0.5),
    726px 1029px 2px rgba(255, 193, 7, 0.5),
    1764px 778px 2px rgba(205, 220, 57, 0.5),
    622px 1643px 2px rgba(244, 67, 54, 0.5),
    174px 1559px 2px rgba(206, 148, 10, 0.5),
    212px 517px 2px rgba(208, 162, 25, 0.5),
    340px 505px 2px rgba(255, 255, 255, 0.5),
    1700px 39px 2px rgba(255, 255, 255, 0.5),
    1768px 516px 2px rgba(244, 67, 54, 0.5),
    849px 391px 2px rgba(255, 152, 0, 0.5),
    228px 1824px 2px rgba(255, 255, 255, 0.5),
    1119px 1680px 2px rgba(255, 193, 7, 0.5),
    812px 1480px 2px rgba(246, 162, 75, 0.5),
    1438px 1585px 2px rgba(205, 220, 57, 0.5),
    137px 1397px 2px rgba(255, 255, 255, 0.5),
    1080px 456px 2px rgba(206, 148, 10, 0.5),
    1208px 1437px 2px rgba(208, 162, 25, 0.5),
    857px 281px 2px rgba(244, 67, 54, 0.5),
    1254px 1306px 2px rgba(205, 220, 57, 0.5),
    987px 990px 2px rgba(192, 125, 37, 0.5),
    1655px 911px 2px rgba(208, 162, 25, 0.5),
    1102px 1216px 2px rgba(255, 87, 34, 0.5),
    1807px 1044px 2px rgba(255, 255, 255, 0.5),
    660px 435px 2px rgba(208, 162, 25, 0.5),
    299px 678px 2px rgba(192, 125, 37, 0.5),
    1193px 115px 2px rgba(255, 152, 0, 0.5),
    918px 290px 2px rgba(205, 220, 57, 0.5),
    1447px 1422px 2px rgba(255, 235, 59, 0.5),
    91px 1273px 2px rgba(255, 87, 34, 0.5),
    108px 223px 2px rgba(255, 235, 59, 0.5),
    146px 754px 2px rgba(208, 162, 25, 0.5),
    461px 1446px 2px rgba(255, 87, 34, 0.5),
    1004px 391px 2px rgba(206, 148, 10, 0.5),
    1529px 516px 2px rgba(244, 67, 54, 0.5),
    1206px 845px 2px rgba(205, 220, 57, 0.5),
    347px 583px 2px rgba(215, 65, 40, 0.5),
    1102px 1332px 2px rgba(244, 67, 54, 0.5),
    709px 1756px 2px rgba(208, 162, 25, 0.5),
    1972px 248px 2px rgba(255, 255, 255, 0.5),
    1669px 1344px 2px rgba(255, 87, 34, 0.5),
    1132px 406px 2px rgba(244, 67, 54, 0.5),
    320px 1076px 2px rgba(205, 220, 57, 0.5),
    126px 943px 2px rgba(255, 235, 59, 0.5),
    263px 604px 2px rgba(255, 87, 34, 0.5),
    1546px 692px 2px rgba(244, 67, 54, 0.5);
  animation: animStar 10s linear infinite;
}
.bgEffect-3 {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  filter: blur(0.5px);
  box-shadow:
    571px 173px 30px 20px rgba(208, 162, 25, 0.5),
    1732px 143px 30px 20px rgba(208, 162, 25, 0.5),
    1745px 454px 30px 20px rgba(255, 87, 34, 0.5),
    234px 784px 30px 20px rgba(208, 162, 25, 0.5),
    1793px 1123px 30px 20px rgba(255, 152, 0, 0.5),
    1076px 504px 30px 20px rgba(208, 162, 25, 0.5),
    633px 601px 30px 20px rgba(255, 87, 34, 0.5),
    350px 630px 30px 20px rgba(255, 235, 59, 0.5),
    1164px 782px 30px 20px rgba(208, 162, 25, 0.5),
    76px 690px 30px 20px rgba(246, 162, 75, 0.5),
    1825px 30px 30px 20px rgba(205, 220, 57, 0.5),
    1646px 578px 30px 20px rgba(255, 235, 59, 0.5),
    544px 293px 30px 20px rgba(192, 125, 37, 0.5),
    445px 1061px 30px 20px rgba(206, 148, 10, 0.5),
    928px 47px 30px 20px rgba(208, 162, 25, 0.5),
    168px 1410px 30px 20px rgba(241, 229, 40, 0.5),
    777px 782px 30px 20px rgba(255, 87, 34, 0.5),
    1235px 1941px 30px 20px rgba(255, 87, 34, 0.5),
    104px 1690px 30px 20px rgba(241, 229, 40, 0.5),
    1167px 1338px 30px 20px rgba(247, 157, 102, 0.5),
    345px 1652px 30px 20px rgba(215, 65, 40, 0.5),
    1682px 1196px 30px 20px rgba(244, 67, 54, 0.5),
    1995px 494px 30px 20px rgba(241, 229, 40, 0.5),
    428px 798px 30px 20px rgba(255, 87, 34, 0.5),
    340px 1623px 30px 20px rgba(244, 67, 54, 0.5),
    605px 349px 30px 20px rgba(255, 87, 34, 0.5),
    1339px 1344px 30px 20px rgba(206, 148, 10, 0.5),
    1102px 1745px 30px 20px rgba(246, 162, 75, 0.5),
    1592px 1676px 30px 20px rgba(192, 125, 37, 0.5),
    419px 1024px 30px 20px rgba(255, 152, 0, 0.5),
    630px 1033px 30px 20px rgba(192, 125, 37, 0.5),
    1995px 1644px 30px 20px rgba(208, 162, 25, 0.5),
    1092px 712px 30px 20px rgba(255, 87, 34, 0.5),
    1355px 606px 30px 20px rgba(244, 67, 54, 0.5);
  animation: animStar 50s linear infinite;
}
.bgEffect-4 {
  width: 2px;
  height: 2px;
  border-radius: 2px;
  filter: blur(0.5px);
  box-shadow:
    571px 173px 3px #d0a219,
    1732px 143px 3px #d0a219,
    1745px 454px 3px #ff5722,
    234px 784px 3px #d0a219,
    1793px 1123px 3px #ff9800,
    1076px 504px 3px #d0a219,
    633px 601px 3px #ff5722,
    350px 630px 3px #ffeb3b,
    1164px 782px 3px #d0a219,
    76px 690px 3px #eb500d,
    1825px 701px 3px #cddc39,
    1646px 578px 3px #ffeb3b,
    544px 293px 3px #c07d25,
    445px 1061px 3px #ce940a,
    928px 47px 3px #d0a219,
    168px 1410px 3px #f1e528,
    777px 782px 3px #ff5722,
    1235px 1941px 3px #ff5722,
    104px 1690px 3px #f1e528,
    1167px 1338px 3px #f79d66,
    345px 1652px 3px #d74128,
    1682px 1196px 3px #f44336,
    1995px 494px 3px #f1e528,
    428px 798px 3px #ff5722,
    340px 1623px 3px #f44336,
    605px 349px 3px #ff5722,
    1339px 1344px 3px #ce940a,
    1102px 1745px 3px #f6a24b,
    1592px 1676px 3px #c07d25,
    419px 1024px 3px #ff9800,
    630px 1033px 3px #c07d25,
    1995px 1644px 3px #d0a219,
    1092px 712px 3px #c9461e,
    1355px 606px 3px #f44336,
    622px 1881px 3px #cddc39,
    1481px 621px 3px #9e9e9e,
    19px 1348px 3px #f1e528,
    864px 1780px 3px #f79d66,
    442px 1136px 3px #c07d25,
    67px 712px 3px #ff5722,
    89px 1406px 3px #f44336,
    275px 321px 3px #d74128,
    592px 630px 3px #f79d66,
    1012px 1690px 3px #ff5722,
    1749px 23px 3px #ce940a,
    94px 1542px 3px #ffeb3b,
    1201px 1657px 3px #f6a24b,
    1505px 692px 3px #c07d25,
    1799px 601px 3px #d0a219,
    656px 811px 3px #d0a219,
    701px 597px 3px #d0a219,
    1202px 46px 3px #ff5722,
    890px 569px 3px #ff5722,
    1613px 813px 3px #c07d25,
    223px 252px 3px #ff9800,
    983px 1093px 3px #f44336,
    726px 1029px 3px #ffc107,
    1764px 778px 3px #cddc39,
    622px 1643px 3px #f44336,
    174px 1559px 3px #ce940a,
    212px 517px 3px #d0a219,
    340px 505px 3px #fff,
    1700px 39px 3px #fff,
    1768px 516px 3px #f44336,
    849px 391px 3px #ff9800,
    228px 1824px 3px #fff,
    1119px 1680px 3px #ffc107,
    812px 1480px 3px #f6a24b,
    1438px 1585px 3px #cddc39,
    137px 1397px 3px #fff,
    1080px 456px 3px #ce940a,
    1208px 1437px 3px #d0a219,
    857px 281px 3px #f44336,
    1254px 1306px 3px #cddc39,
    987px 990px 3px #c07d25,
    1655px 911px 3px #d0a219,
    1102px 1216px 3px #ff5722,
    1807px 1044px 3px #fff,
    660px 435px 3px #d0a219,
    299px 678px 3px #c07d25,
    1193px 115px 3px #ff9800,
    918px 290px 3px #cddc39,
    1447px 1422px 3px #ffeb3b,
    91px 1273px 3px #ff5722,
    108px 223px 3px #ffeb3b,
    146px 754px 3px #d0a219,
    461px 1446px 3px #ff5722,
    1004px 391px 3px #ce940a,
    1529px 516px 3px #f44336,
    1206px 845px 3px #cddc39,
    347px 583px 3px #d74128,
    1102px 1332px 3px #f44336,
    709px 1756px 3px #d0a219,
    1972px 248px 3px #fff,
    1669px 1344px 3px #ff5722,
    1132px 406px 3px #f44336,
    320px 1076px 3px #cddc39,
    126px 943px 3px #ffeb3b,
    263px 604px 3px #ff5722,
    1546px 692px 3px #f44336;
  animation: animStar 80s linear infinite;
}

@keyframes animStar {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-2000px);
  }
}

.project {
  font-family: "futura-pt", serif;
}
.kv {
  position: relative;
  overflow: hidden;
  background: #8f1212;
}
.kv__bgBox {
  position: relative;
  z-index: 1;
}
.kv__bgBox img {
  display: block;
  width: 100%;
  height: auto;
}
.kv__imgBox,
.kv__pdBox,
.kv__mainBox {
  position: absolute;
  inset: 0;
}
.kv__pdBox {
  z-index: 2;
  width: 100%;
  height: 100%;
}
.kv__imgBox {
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 顺序：title → pdBox → imgBox */
  animation: kvFadeUp 1s ease-out 1.55s forwards;
}
.kv__mainBox {
  z-index: 4;
  width: 50%;
  height: 100%;
  left: 0;
  right: auto;
}
.kv__imgBox picture,
.kv__pdBox-item {
  position: absolute;
  inset: 0;
  display: block;
}
.kv__imgBox img,
.kv__pdBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
/* 进场顺序：title → pd（交错浮动）→ imgBox */
.kv__pdBox-item {
  opacity: 0;
  will-change: transform, opacity;
}
.kv__pdBox-item--1 {
  animation:
    kvFadeUp 0.85s ease-out 0.85s forwards,
    kvFloatUp 3.4s ease-in-out 1.8s infinite;
}
.kv__pdBox-item--3 {
  animation:
    kvFadeUp 0.85s ease-out 1s forwards,
    kvFloatDown 3.4s ease-in-out 1.95s infinite;
}
.kv__pdBox-item--2 {
  animation:
    kvFadeUp 0.85s ease-out 1.15s forwards,
    kvFloatUp 3.4s ease-in-out 2.1s infinite;
}
/* 烟花绽放（错开节奏循环） */
.kv__mainBox-pattern .kv-firework1,
.kv__mainBox-pattern .kv-firework2,
.kv__mainBox-pattern .kv-firework3 {
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}
.kv__mainBox-pattern .kv-firework1 {
  top: 19%;
  right: 12%;
  width: 20%;
  animation: kvFireworkBurst 2.8s ease-out 1.1s infinite;
}
.kv__mainBox-pattern .kv-firework2 {
  top: 39%;
  left: 9%;
  width: 12%;
  animation: kvFireworkBurst 3.2s ease-out 1.6s infinite;
}
.kv__mainBox-pattern .kv-firework3 {
  top: 34%;
  right: 13%;
  width: 8%;
  animation: kvFireworkBurst 2.6s ease-out 2.1s infinite;
}
@media (min-width: 996px) {
  .kv__mainBox-pattern .kv-firework2 {
    top: 74%;
    left: 9%;
  }
  .kv__mainBox-pattern .kv-firework3 {
    top: 63%;
    right: 20%;
  }
}
@keyframes kvFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes kvFloatUp {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -14px, 0);
  }
}
@keyframes kvFloatDown {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 14px, 0);
  }
}
@keyframes kvFireworkBurst {
  0% {
    opacity: 0;
    transform: scale(0.18) rotate(-12deg);
    filter: brightness(1.6);
  }
  22% {
    opacity: 1;
    transform: scale(1.22) rotate(0deg);
    filter: brightness(1.35);
  }
  42% {
    opacity: 1;
    transform: scale(1) rotate(6deg);
    filter: brightness(1.05);
  }
  72% {
    opacity: 0.75;
    transform: scale(0.96) rotate(2deg);
    filter: brightness(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(0deg);
    filter: brightness(0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kv__title,
  .kv__title > p,
  .kv__title > h2,
  .kv__imgBox,
  .kv__pdBox-item--1,
  .kv__pdBox-item--2,
  .kv__pdBox-item--3,
  .kv__mainBox-pattern .kv-firework1,
  .kv__mainBox-pattern .kv-firework2,
  .kv__mainBox-pattern .kv-firework3 {
    opacity: 1;
    animation: none;
    transform: none;
    filter: none;
  }
}
/*
  以 1920×720 KV 画布定位（底图 3840×1440 等比）。
  left/top/width 用 % 锁相对位置；字号用 vw/1920 等比，无 clamp 上限。
*/
.kv__title {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  animation: kvFadeUp 0.85s ease-out 0.08s forwards;
}
.kv__title > h1 {
  position: absolute;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
}
.kv__title > p,
.kv__title > h2 {
  position: absolute;
  left: calc(1180 / 1920 * 100%);
  width: calc(400 / 1920 * 100%);
  margin: 0;
  color: #9a0c0a;
  font-family: "futura-pt", serif;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.kv__title > p {
  top: calc(130 / 720 * 100%);
  font-size: calc(28 / 1920 * 100vw);
}
.kv__title > h2 {
  top: calc(168 / 720 * 100%);
  font-size: calc(44 / 1920 * 100vw);
  font-weight: 800;
}
.kv__mainBox-badge {
  position: absolute;
  top: 7%;
  left: 5%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.7vw;
}
.kv__mainBox-badge img {
  flex: 0 0 32%;
  width: 32%;
  height: auto;
  max-width: 80px;
}
.kv__mainBox-badge p {
  margin: 0;
  color: #fff;
  font-size: clamp(9px, 0.95vw, 16px);
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(80, 0, 0, 0.35);
}
.kv__mainBox-title {
  position: absolute;
  top: 34%;
  left: 16%;
  z-index: 2;
  width: 60%;
}
.kv__mainBox-title img {
  display: block;
  width: 100%;
  height: auto;
}
.kv__mainBox-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.kv__mainBox-pattern img {
  position: absolute;
  height: auto;
}
.kv__mainBox-pattern .kv-light1 {
  top: 18%;
  left: 7%;
  width: 15%;
}
.kv__mainBox-pattern .kv-light2 {
  top: 38%;
  right: 15%;
  width: 10%;
}
@media (min-width: 996px) {
  .kv__mainBox-pattern .kv-light1 {
    top: 32%;
    left: 7%;
    width: 15%;
  }
  .kv__mainBox-pattern .kv-light2 {
    top: 74%;
    right: 22%;
    width: 10%;
  }
}
/*
  <996：直式 KV（对齐全版 HAPPY FESTIVE SEASON 构图）
  上：Intel 左上 + 置中 title 图
  中：Bring home… 文案置中
  下：人物／笔电由 xs 底图承载
*/
@media (max-width: 995.98px) {
  .kv__mainBox {
    width: 100%;
    left: 0;
    right: 0;
  }

  .kv__mainBox-badge {
    top: 9%;
    left: 5%;
    gap: 1.6vw;
    max-width: 46%;
  }
  .kv__mainBox-badge img {
    flex: 0 0 auto;
    width: clamp(40px, 11vw, 58px);
    max-width: 58px;
  }
  .kv__mainBox-badge p {
    font-size: clamp(8px, 2.5vw, 12px);
    line-height: 1.2;
  }

  /* HAPPY FESTIVE SEASON 标题图：上方置中 */
  .kv__mainBox-title {
    top: 20.5%;
    left: 0;
    right: 0;
    width: min(86%, 420px);
    margin: 0 auto;
  }

  /* Bring home…：标题图下方、产品区上方，水平置中 */
  .kv__title > p,
  .kv__title > h2 {
    left: 0;
    right: 0;
    width: min(92%, 420px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    white-space: nowrap;
  }
  .kv__title > p {
    top: 58%;
    font-size: clamp(15px, 4.4vw, 24px);
    color: #9a0c0a;
    font-weight: 600;
  }
  .kv__title > h2 {
    top: 62%;
    font-size: clamp(22px, 6vw, 34px);
    color: #9a0c0a;
    font-weight: 800;
  }

  /* xs 底图已含灯笼／烟花边框，避免叠两层 */
  .kv__mainBox-pattern {
  }
}

@media (min-width: 996px) {
  .kv__titleBox {
    margin-top: 0;
    flex: 0 0 50%;
  }
}
.kv__titleBox .elephant {
  flex: 0 0 15%;
}
.kv__storeBox {
  position: relative;
  padding-top: 20vw;
  margin-top: 5vw;
}
@media (min-width: 996px) {
  .kv__storeBox {
    flex: 0 0 50%;
    padding-top: 0;
    margin: 0;
  }
}
.kv__store {
  position: relative;
}
.kv__store::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("../images/kv-store-flash.png") top center no-repeat;
  background-size: cover;
  animation: flash 2s infinite ease-in-out;
}
@media (min-width: 996px) {
  .kv__store {
    width: 80%;
    margin-left: 10%;
    margin-top: 10%;
  }
}

@keyframes explode {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes balloon {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(10px);
  }
}
@keyframes flash {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.commonbg {
  background: rgba(210, 32, 26, 1);
}
@media (min-width: 996px) {
  .commonbg {
    background: linear-gradient(
      to right,
      rgba(145, 23, 16, 1) 0%,
      rgba(210, 32, 26, 1) 17%,
      rgba(210, 32, 26, 1) 83%,
      rgba(145, 23, 16, 1) 100%
    );
  }
}
.special {
  position: relative;
  overflow: hidden;
  padding: 40px 0 120px;
}
.special__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.special__bg-left,
.special__bg-right {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  max-width: 52%;
  object-fit: contain;
  /* PNG 黑底：在红色 commonbg 上消黑，只留灯笼／烟花 */
  mix-blend-mode: screen;
}
.special__bg-left {
  left: 0;
  object-position: left center;
}
.special__bg-right {
  right: 0;
  object-position: right center;
}
.special .msi__container {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  padding: 50px 20px 0;
}
.special__title {
  text-align: center;
  margin-bottom: 28px;
}
.special__title h2 {
  margin: 0;
  color: #fff6e2;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}
.special__flexBox {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.special__itemBox {
  display: flex;
  /* flex-direction: column; */
  align-items: stretch;
  gap: 12px;
  padding: 18px 16px 20px;
  background: #fff6e2;
  border-radius: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.special__itemBox-img {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
}

.special__itemBox-img img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
}
.special__itemBox-txtBox {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.special__itemBox-txtBox h3 {
  margin: 0 0 10px;
  color: #8a1515;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
}
.special__itemBox-txtBox ul {
  margin: 0 0 16px;
  padding-left: 18px;
  list-style: disc;
}
.special__itemBox-txtBox li {
  margin-bottom: 4px;
  color: #2a1a1a;
  font-size: 12px;
  line-height: 1.45;
  list-style: disc;
}
.special__itemBox-txtBox li:last-child {
  margin-bottom: 0;
}
.special__itemBox-link {
  margin-top: auto;
  font-size: 0;
  text-align: center;
}
.special-price-txt {
  margin: 0 0 2px;
  color: #8a1515;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.special-price {
  margin: 0 0 14px;
  color: #8a1515;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.special-price span {
  font-size: 0.85em;
  margin-right: 2px;
}
.special__itemBox-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 10px 28px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  background: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/price-btn.png)
    no-repeat;
  background-size: 100% 100%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
  display: block;
}

.special__itemBox-link a:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
@media (min-width: 768px) {
  .special {
    padding: 56px 0 250px;
  }
  .special__bg-left,
  .special__bg-right {
    max-width: 42%;
  }
  .special__title {
    margin-bottom: 36px;
  }
  .special__flexBox {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }
  .special__itemBox {
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 22px 24px 22px 10px;
    border-radius: 32px;
  }
  .special__itemBox-img {
    flex: 0 0 42%;
  }
  .special__itemBox-img img {
    max-width: 100%;
  }
  .special__itemBox-txtBox {
    flex: 1 1 58%;
    padding-right: 6px;
  }
  .special__itemBox-txtBox li {
    font-size: 13px;
  }
  .special-price-txt {
    font-size: 13px;
  }
  .special__itemBox-link a {
    font-size: 15px;
    padding: 12px 32px;
  }
}
@media (min-width: 996px) {
  .special__itemBox {
    gap: 12px;
    padding: 24px 28px 24px 12px;
  }
  .special__itemBox-img {
    flex: 0 0 50%;
  }
  .special__itemBox-txtBox h3 {
    margin-bottom: 12px;
  }
  .special__itemBox-txtBox ul {
    margin-bottom: 18px;
  }
  .special__itemBox-txtBox li {
    font-size: 13px;
    margin-bottom: 5px;
  }
}

.offer {
  position: relative;
  padding-bottom: 5%;
}
.offer__flexBox {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* .offer .msi__container {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: end;
  align-items: center;
} */
.offer__img {
  width: 100%;
  display: block;
  line-height: 0;
}
.offer__img img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.offer__txtBox {
  width: 100%;
}
.offer__txtBox-title {
  text-align: center;
}
/* 主標 */
.offer__txtBox-title h2 {
  margin: 0;
  color: #fff6e2;
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(80, 0, 0, 0.35);
}
.offer__txtBox-title h3 {
  margin: 0;
  color: #fff6e2;
  font-size: clamp(20px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(80, 0, 0, 0.35);
}
/* 副標：WITH / 日期 */
.offer__txtBox-with {
  margin: 0.18em 0;
  color: #fff6e2;
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.offer__txtBox-date {
  margin: 0.35em 0 0;
  color: rgba(255, 246, 226, 0.92);
  font-size: clamp(14px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.offer__txtBox-img {
  margin-top: 12px;
}
.offer__txtBox-img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
@media (min-width: 996px) {
  .offer__txtBox-img {
    width: 70%;
    margin: auto;
  }
}
/* 優惠詳情：主標 h3 / 副標 label / 內文 p */
.offer__txtBox-detail {
  margin-top: 28px;
  text-align: center;
  color: #fff6e2;
}
.offer__detail-block {
  margin: 0 0 28px;
}
.offer__detail-block:last-child {
  margin-bottom: 0;
}
.offer__txtBox-detail h3 {
  margin: 0 0 0.45em;
  color: #fff6e2;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(80, 0, 0, 0.3);
}
.offer__txtBox-detail p {
  margin: 0;
  color: rgba(255, 246, 226, 0.9);
  font-size: clamp(13px, 1.35vw, 16px);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-transform: none;
  text-shadow: none;
}
/* 須蓋過 .offer__txtBox-detail p，否則字級/字重會被吃掉 */
.offer__txtBox-detail p.offer__detail-label {
  display: inline-block;
  margin: 1.15em 0 0.5em;
  padding: 0.4em 1.15em;
  color: #fff6e2;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: none;
  background: rgba(40, 8, 8, 0.72);
  border: 1px solid rgba(255, 224, 138, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 226, 0.06),
    0 0 0 4px rgba(0, 0, 0, 0.12);
  border-radius: 30px;
}
.offer__detail-steps {
  margin: 1.15em auto 0;
  padding: 0.85em 1em;
  max-width: 38em;
  list-style: none;
  counter-reset: offer-step;
  text-align: left;
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid #ffe08a;
}
.offer__detail-steps li {
  position: relative;
  margin: 0 0 0.7em;
  padding-left: 5.6em;
  color: #fff6e2;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 600;
  line-height: 1.55;
  counter-increment: offer-step;
}
.offer__detail-steps li:last-child {
  margin-bottom: 0;
}
.offer__detail-steps li::before {
  content: "Step 0" counter(offer-step) ":";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ffe08a;
}
.offer__txtBox-detail a {
  color: #ffe08a;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.offer__txtBox-detail a:hover {
  color: #fff6e2;
}
@media (min-width: 996px) {
  .offer__txtBox {
    width: 100%;
    padding-top: 5%;
  }
  .offer__img {
    width: 50%;
  }
  .offer__flexBox {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

.promo {
  background: #f3f3f3;
  text-align: center;
  padding: 50px 0;
}
.promo .slick-slid {
  border-radius: 20px;
  overflow: hidden;
  margin: 15px;
}
.promo .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  font-size: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 30px;
  box-shadow: #999 5px 5px 20px;
}
.promo .slick-arrow:hover {
  background: radial-gradient(
    circle at center,
    rgba(252, 54, 34, 0.3),
    rgb(252, 54, 34),
    #f46e00,
    rgba(252, 54, 34, 0.5)
  );
  color: #fff;
}
.promo .slick-arrow::before {
  font-family: "msi-icons";
  font-size: 20px;
}
@media (min-width: 996px) {
  .promo .slick-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50px;
  }
}
.promo .slick-next {
  right: 0;
}
.promo .slick-next::before {
  content: "\ea09";
}
@media (min-width: 996px) {
  .promo .slick-next {
    right: 25px;
  }
}
.promo .slick-prev {
  left: 0;
}
.promo .slick-prev::before {
  content: "\ea10";
}
@media (min-width: 996px) {
  .promo .slick-prev {
    left: 25px;
  }
}

.buynowWp {
  position: relative;
  padding-top: 15%;
  /* background-color: #d82520; */
  background-image: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-doll.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 100%;
  background-size: 100%;
  background-attachment: fixed, scroll;
}

.mainBody {
  background: transparent;
}

.mainarea.buyNow {
  position: relative;
  z-index: 10; /* 高于 guide/experience/explore，sticky tab 才能盖住箭头 */
}

.buyNow .tab__flex {
  position: relative;
  z-index: 2;
  padding-top: 24px;
  overflow: visible;
  justify-content: center;
}
.buyNow .tab__flex::before,
.buyNow .tab__flex::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  width: clamp(72px, 9vw, 130px);
  height: clamp(72px, 9vw, 130px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  transform: translateY(-50%);
}
.buyNow .tab__flex::before {
  left: 0;
  background-image: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-left-light.png);
}
.buyNow .tab__flex::after {
  right: 0;
  background-image: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-right-light.png);
}
@media (min-width: 996px) {
  .buynowWp {
    position: relative;
    padding-top: 8%;
    background-image: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-doll-l.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 100%;
    background-size: 100%;
    background-attachment: fixed, scroll;
  }
  .buyNow .tab__flex::before,
  .buyNow .tab__flex::after {
    display: block;
  }
  .buyNow .tab__flex::before {
    left: 0%;
  }
  .buyNow .tab__flex::after {
    right: 0%;
  }
}

.buyNow .tab__flexBoxInside {
  display: flex;
  flex-direction: column-reverse;
  overflow: visible !important;
  background: transparent;
  border: none;
  outline: none;
  border-radius: 0;
  color: #8a1515;
  aspect-ratio: 3 / 4;
  height: auto;
  box-shadow: none;
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}
.buyNow .tab__flexBoxInside-pic::after {
  display: none !important;
}
.buyNow .tab__flexBoxInside:hover .tab__flexBoxInside-pic,
.buyNow .tab__flexBox:hover .tab__flexBoxInside-pic,
.buyNow .tab__flexBoxInside:hover .tab__flexBoxInside-pic img,
.buyNow .tab__flexBox:hover .tab__flexBoxInside-pic img {
  transform: none !important;
  opacity: 1;
}

.buyNow .tab__flexBox {
  filter: none;
  width: 28%;
  max-width: 240px;
  margin: 0 8px;
  overflow: visible;
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}
.buyNow .tab__flexBox:hover {
  transform: translateY(-6px);
  filter: brightness(1.06);
}
.buyNow .tab__flexBox.select:hover {
  transform: none;
  filter: none;
  cursor: default;
}
.buyNow .tab__flexBox-icon {
  display: none;
  width: 36px;
  bottom: -18px;
}
.buyNow .tab__flexBox.select {
  filter: none;
}
.buyNow .tab__flexBox.select .tab__flexBox-icon {
  display: block;
  opacity: 1;
}

.buyNow .tab__flexBoxInside-pic {
  flex: 0 0 68%;
  display: block; /* 覆盖 buynow.css 的 flex 置中 */
  width: 100% !important; /* 覆盖 buynow.css 的 95% */
  height: 68%;
  margin: 0;
  margin-top: -2px; /* 蓋住與 tab__label 交界的紅底透光縫 */
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: #1a1a1a;
  position: relative;
  z-index: 1;
}
.buyNow .tab__flexBoxInside-pic picture {
  display: block;
  width: 100%;
  height: 100%;
}
.buyNow .tab__flexBoxInside-pic img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  vertical-align: bottom;
  transform: none;
  transition: none;
}

.buyNow .tab__label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32%;
  width: 100%;
  height: 32%;
  min-height: 0;
  margin: 0;
  margin-bottom: -2px; /* 與圖片重疊，避免紅底透出一條線 */
  padding: 22% 8px 8%;
  color: #8a1515;
  text-align: center;
  background-color: transparent;
  background-image: url("https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-pd-top.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  border: none;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
}
.buyNow .tab__label p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  color: #8a1515;
  font-size: clamp(11px, 1.2vw, 16px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 996px) {
  .buyNow .tab__flexBox {
    width: 24%;
    max-width: 260px;
    margin: 0 12px;
  }
  .buyNow .tab__flexBox-icon {
    width: 44px;
    bottom: -20px;
  }
  .buyNow .tab__label {
    padding: 24% 10px 8%;
  }
}
@media (min-width: 1600px) {
  .buyNow .tab__flexBox {
    width: 22%;
    max-width: 280px;
  }
}

.buyNow .selectarea__filter-item {
  background: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-tab-btn.png)
    center / 100% 100% no-repeat;
  background-color: transparent;
  color: #8a1515;
  cursor: pointer;
  width: 45%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
@media (min-width: 996px) {
  .buyNow .selectarea__filter-item {
    width: auto;
    min-width: 110px;
  }
}
.buyNow .selectarea__filter-item:hover {
  color: #8a1515;
  box-shadow: none;
  filter: brightness(1.06);
  background: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-tab-btn.png)
    center / 100% 100% no-repeat;
}
.buyNow .selectarea__filter-item--active {
  color: #8a1515;
  filter: brightness(1.08);
  box-shadow: none;
  background: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-tab-btn.png)
    center / 100% 100% no-repeat;
}
.buyNow .selectarea__filter-item--active:hover {
  color: #8a1515;
  cursor: default;
  filter: brightness(1.08);
  background: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/wtb-tab-btn.png)
    center / 100% 100% no-repeat;
  border: none;
}

.buyNow .hatch__slider .hatch__box::before,
.buyNow .hatch__slider .hatch__box::after {
  display: none;
}

.buyNow .sec3__buynowarea {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}
.buyNow .sec3__buynowarea > br {
  display: none !important;
}
.buyNow .sec3__buynowarea-item,
.buyNow .hatch__slider .hatch__box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 18px 16px 20px;
  background: #fff6e2;
  border: none;
  border-radius: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}
/* JS 篩選會寫 inline display:none / block，在此對應處理 */
.buyNow .sec3__buynowarea-item[style*="display: none"],
.buyNow .sec3__buynowarea-item[style*="display:none"] {
  display: none !important;
}
.buyNow .sec3__buynowarea-item[style*="display: block"],
.buyNow .sec3__buynowarea-item[style*="display:block"] {
  display: flex !important;
}
.buyNow .sec3__buynowarea-item .sec3__buynowarea-top,
.buyNow .sec3__buynowarea-item .hatch__txt {
  width: 100%;
}
.buyNow .sec3__buynowarea-item .hatch__flex {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxPic {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin: 0;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxPic-product {
  max-width: 280px;
  width: 100%;
  flex: none;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxPic-product img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxTxt {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxTxt-title {
  margin: 0 0 10px;
  color: #8a1515;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxTxt ul {
  margin: 0 0 16px;
  padding-left: 18px;
  list-style: disc;
  font-size: 12px;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxTxt ul li {
  margin: 0 0 4px;
  color: #2a1a1a;
  font-size: 12px;
  line-height: 1.45;
  list-style: disc;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxTxt-note {
  border-color: #8a1515;
  color: #fff6e2;
  margin-bottom: 10px;
  background: linear-gradient(
    to right,
    rgba(255, 246, 226, 1) 0%,
    rgba(138, 21, 21, 1) 41%,
    rgba(138, 21, 21, 1) 58%,
    rgba(255, 246, 226, 1) 100%
  );
  text-align: center;
  padding: 5px 0;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxTxt-price {
  margin: 0 0 14px;
  color: #8a1515;
  justify-content: center;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxTxt-price del {
  color: #8a1515;
  opacity: 0.65;
}
.buyNow .sec3__buynowarea-item .hatch__flexBoxTxt-price span {
  color: #8a1515;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.buyNow .sec3__buynowarea-item .hatch__buyNowBtn {
  margin-top: auto;
  text-align: center;
}
.buyNow .sec3__buynowarea-item .hatch__buyNowBtn-buynow,
.buyNow .hatch__buyNowBtn-buynow--gaming,
.buyNow .hatch__buyNowBtn-buynow--business,
.buyNow .hatch__buyNowBtn-buynow--claw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  margin: 0 auto;
  padding: 10px 28px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0;
  background: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/price-btn.png)
    no-repeat center / 100% 100%;
  box-shadow: none;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}
.buyNow .sec3__buynowarea-item .hatch__buyNowBtn-buynow::before,
.buyNow .sec3__buynowarea-item .hatch__buyNowBtn-buynow::after,
.buyNow .sec3__buynowarea-item .hatch__buyNowBtn-buynow span::before,
.buyNow .sec3__buynowarea-item .hatch__buyNowBtn-buynow span::after {
  display: none;
}
.buyNow .sec3__buynowarea-item .hatch__buyNowBtn-buynow:hover,
.buyNow .hatch__buyNowBtn-buynow--gaming:hover,
.buyNow .hatch__buyNowBtn-buynow--business:hover,
.buyNow .hatch__buyNowBtn-buynow--claw:hover {
  background: url(https://storage-asset.msi.com/event/2026/in/2026-msi-diwali-laptop-sale/images/price-btn.png)
    no-repeat center / 100% 100%;
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: none;
}
.buyNow .sec3__buynowarea-item .hatch__buyNowBtn-buynow:hover span {
  color: #fff;
}

.buyNow .sec3__title {
  color: #fff6e2;
  padding: 5px 0 30px;
  font-weight: bold;
  width: 100%;
  margin: 0 auto;
  max-width: 800px;
}

.buyNow .tab__flexBoxInside-pic {
  width: 100% !important;
}

@media (min-width: 768px) {
  .buyNow .sec3__buynowarea {
    gap: 24px;
  }
  .buyNow .sec3__buynowarea-item,
  .buyNow .hatch__slider .hatch__box {
    flex: 0 0 calc(50% - 12px);
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
    flex-direction: column;
    padding: 22px 24px 22px 10px;
    border-radius: 32px;
  }
  .buyNow .hatch__slider .hatch__box:nth-child(odd),
  .buyNow .hatch__slider .hatch__box:nth-child(even) {
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
  .buyNow .sec3__buynowarea-item .hatch__flex {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxPic {
    flex: 0 0 42%;
    width: 42%;
    max-width: 42%;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxPic-product {
    max-width: 100%;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxTxt {
    flex: 1 1 58%;
    width: 58%;
    max-width: 58%;
    padding-right: 6px;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxTxt ul,
  .buyNow .sec3__buynowarea-item .hatch__flexBoxTxt ul li {
    font-size: 13px;
  }
  .buyNow .sec3__buynowarea-item .hatch__buyNowBtn-buynow {
    font-size: 15px;
    padding: 12px 32px;
  }
}
@media (min-width: 996px) {
  .buyNow .sec3__buynowarea-item,
  .buyNow .hatch__slider .hatch__box {
    gap: 12px;
    padding: 24px 28px 24px 12px;
    border-right: none;
    border-bottom: none;
    flex: 0 0 calc(50% - 12px);
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
  .buyNow .hatch__slider .hatch__box:nth-child(odd),
  .buyNow .hatch__slider .hatch__box:nth-child(even) {
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
  .buyNow .sec3__buynowarea-item .hatch__flex {
    flex-direction: row;
    gap: 12px;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxPic {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxTxt {
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxTxt-title {
    margin-bottom: 12px;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxTxt ul {
    margin-bottom: 18px;
  }
  .buyNow .sec3__buynowarea-item .hatch__flexBoxTxt ul li {
    margin-bottom: 5px;
  }
}
.project .buynowWp .common-title {
  margin: 0 0 28px;
  padding: 0 !important;
  color: #fff6e2;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
}
.project .buynowWp .common-title span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.hatch__container {
  padding-bottom: 5%;
}

@media (min-width: 1600px) {
  .buyNow .tab__flexBox {
    width: 22%;
    max-width: 280px;
  }
}
.store {
  background: linear-gradient(
    to right,
    rgba(145, 23, 16, 1) 0%,
    rgba(210, 32, 26, 1) 25%,
    rgba(210, 32, 26, 1) 67%,
    rgba(145, 23, 16, 1) 100%
  );
  color: var(--color-gray-800);
  position: relative;
  padding-top: 10%;
}
.store img {
  max-width: 100%;
  vertical-align: bottom;
}
.store__titleBox {
  background: url("../images/store-bg.png") top center repeat-x;
  background-size: 100% 100%;
}
@media (min-width: 996px) {
  .store__titleBox {
  }
}
.store__title {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.store__text {
  position: relative;
  z-index: 2;
  padding: 24px 20px 12px;
  color: #fff6e2;
  font-size: clamp(28px, 3.8vw, 50px);
}
.store__text h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.store__text p {
  margin: 0;
  color: #fff6e2;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
@media (min-width: 996px) {
  .store {
    padding-top: 0;
  }
  .store__text {
    position: absolute;
    left: 57%;
    top: 16%;
    padding: 0;
    text-align: right;
  }
}
.store__inner {
  background-color: #38373c;
  padding-bottom: 3%;
}
.store .msi__container {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: end;
  align-items: center;
}
@media (min-width: 996px) {
  .store .msi__container {
    position: absolute;
    left: 50%;
    top: 14%;
    transform: translate(-50%, -50%);
  }
}

.store__inner {
  margin-top: -6%;
  position: relative;
  z-index: 1;
  background-color: #38373c;
}
.store__inner::after {
  content: "";
  position: absolute;
  bottom: 0%;
  left: 0;
  width: 100%;
  height: 70%;
  background-color: #38373c;
}
.store__box {
  width: 90%;
  margin: 0 auto;
  max-width: 1300px;
  background: #fff;
  border-radius: 30px;
  padding: 25px;
  position: relative;
  z-index: 1;
}
@media (min-width: 996px) {
  .store__box {
    padding: 50px;
  }
}
.store__bgBox {
  background: linear-gradient(
    to right,
    rgba(145, 23, 16, 1) 0%,
    rgba(210, 32, 26, 1) 25%,
    rgba(210, 32, 26, 1) 67%,
    rgba(145, 23, 16, 1) 100%
  );
}
.store img {
  width: 100%;
}
.storeNav {
  position: relative;
  border-bottom: #ccc 3px solid;
  padding-right: 30px;
}
.storeNav .slick-slide {
  text-align: center;
}
.storeNav .slick-slide:hover {
  color: #f00;
  cursor: pointer;
}
.storeNav .slick-current {
  color: #f00;
}
.storeItem {
  height: auto;
  padding: 25px 0;
}
.storeItem .slick-slide {
  height: auto;
}
.storeItem .storeCard {
  margin: 10px auto;
  font-size: 15px;
}
@media (min-width: 996px) {
  .storeItem .storeCard {
    display: inline-flex;
    flex-direction: column;
    width: calc(25% - 40px);
    margin: 15px;
  }
}
.storeItem .storeCard__title {
  font-size: 18px;
  margin-bottom: 10px;
}
.storeItem .storeCard__phone {
  padding-top: 8px;
  opacity: 0.7;
}
.storeItem .storeCard__phone::before {
  content: "Phone : ";
}
.storeItem .storeCard__add a {
  color: #333;
}
.storeItem .storeCard__add a:hover {
  color: #f7530d;
  text-decoration: underline;
}
.storeItem .storeCard__map {
  padding-top: 8px;
}
.storeItem .storeCard__map a {
  display: inline-block;
  background: #f7820d;
  color: #fff;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 5px;
  text-transform: uppercase;
}
.storeItem .storeCard__map a:hover {
  background: #f7530d;
}
.store .slick-arrow {
  font-size: 0;
}
.store .slick-arrow::before {
  font-family: "msi-icons";
  font-size: 20px;
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
}
.store .slick-prev::before {
  content: "\ea10";
  left: 0;
}
.store .slick-next::before {
  content: "\ea09";
  right: 0;
}

.vd {
  background: #4b4b4b;
  text-align: center;
  padding: 50px 0;
}
@media (min-width: 996px) {
  .vd {
    padding-bottom: 80px;
  }
}
.vd .common-title {
  color: #fff !important;
}
.vd .slick-slid {
  border-radius: 20px;
  overflow: hidden;
  margin: 15px;
}
.vd .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  font-size: 0;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 30px;
  box-shadow: #999 5px 5px 20px;
}
.vd .slick-arrow:hover {
  background: radial-gradient(
    circle at center,
    rgba(252, 54, 34, 0.3),
    rgb(252, 54, 34),
    #f46e00,
    rgba(252, 54, 34, 0.5)
  );
  color: #fff;
}
.vd .slick-arrow::before {
  font-family: "msi-icons";
  font-size: 20px;
}
@media (min-width: 996px) {
  .vd .slick-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50px;
  }
}
.vd .slick-next {
  right: 0;
}
.vd .slick-next::before {
  content: "\ea09";
}
@media (min-width: 996px) {
  .vd .slick-next {
    right: 25px;
  }
}
.vd .slick-prev {
  left: 0;
}
.vd .slick-prev::before {
  content: "\ea10";
}
@media (min-width: 996px) {
  .vd .slick-prev {
    left: 25px;
  }
}

.vd-play {
  display: block;
  position: relative;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
}
.vd-play figcaption {
  padding: 15px 10px;
}
@media (min-width: 996px) {
  .vd-play figcaption {
    min-height: 120px;
  }
}
.vd-play figcaption h3 {
  font-size: 20px;
}
.vd-play figcaption p {
  padding-top: 8px;
  font-size: 16px;
  opacity: 0.7;
}
.vd-play figcaption span {
  padding: 0 15px;
  font-size: 20px;
}

.community {
  background: #ed1c24;
  text-align: center;
  padding: 50px 0;
}
@media (min-width: 996px) {
  .community {
    padding-top: 30px;
    padding-bottom: 100px;
  }
}
.community .common-title {
  color: #fff !important;
}
.community__box {
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
  display: flex;
  justify-content: center;
}

.ig-play {
  position: relative;
  flex: 1;
  margin: 0 20px 0 0;
  border-radius: 10px;
  border: #ccc 1px solid;
  overflow: hidden;
}
.ig-play img {
  transition: 1s all ease-in-out;
  position: relative;
  z-index: 3;
}
.ig-play:last-child {
  margin-right: 0;
}
.ig-play::after {
  content: "\ea19";
  font-family: "msi-icons";
  color: #fff;
  position: absolute;
  z-index: 10;
  right: 30px;
  bottom: 30px;
  font-size: 40px;
}
.ig-play::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  background: #000;
  opacity: 0.5;
  transition: 1s all ease-in-out;
}
.ig-play:hover img {
  transform: scale(1.1);
}
.ig-play:hover::before {
  opacity: 0;
}

.campaign {
  position: relative;
  background: #ffd200;
  color: var(--color-gray-800);
  text-align: center;
  padding-bottom: 45px;
  overflow: hidden;
}
@media (min-width: 996px) {
  .campaign {
    padding-top: 30px;
    padding-bottom: 100px;
  }
}
.campaign .lucky {
  display: none;
}
@media (min-width: 996px) {
  .campaign .lucky {
    display: block;
    position: absolute;
    width: 300px;
    bottom: -50px;
  }
  .campaign .lucky2 {
    right: 10%;
  }
  .campaign .lucky1 {
    left: 10%;
  }
}
.campaign-text {
  padding-top: 15px;
}
.campaign-text p {
  padding: 8px 0;
}
.campaign-text a {
  display: inline-block;
  background: #fff;
  border-radius: 30px;
  padding: 8px 15px;
  color: var(--color-gray-800);
}
.campaign-text a:hover {
  background: #000;
  color: #fff;
}
@media (min-width: 996px) {
  .campaign-text {
    text-align: left;
    flex: 0 0 420px;
  }
  .campaign-text h3 {
    font-size: 28px;
    padding-bottom: 10px;
  }
  .campaign-text p {
    font-size: 20px;
    padding-bottom: 25px;
  }
  .campaign-text a {
    padding: 20px 50px;
  }
}
@media (min-width: 996px) {
  .campaign__box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
  }
}
@media (min-width: 996px) {
  .campaign-img {
    flex: 0 0 300px;
  }
}

.visitStore {
  background: #ee1c1f;
  text-align: center;
  padding: 45px 0;
}
.visitStore .common-title {
  color: #fff;
}
.visitStore-text {
  padding-top: 15px;
}
@media (min-width: 996px) {
  .visitStore__box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }
  .visitStore-img {
    flex: 0 0 40%;
    order: 2;
  }
  .visitStore h3 {
    font-size: 28px;
    padding-bottom: 10px;
  }
  .visitStore p {
    font-size: 20px;
  }
}

.service {
  text-align: center;
  color: var(--color-gray-800);
}
.service .btn {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  background: #ed1c24;
  color: #fff;
  border-radius: 30px;
  padding: 8px 20px;
}
@media (min-width: 996px) {
  .service .btn {
    padding: 20px 50px;
  }
}
.service .btn img {
  width: 20px;
  margin-left: 20px;
}
.service ul {
  padding-top: 30px;
}
@media (min-width: 996px) {
  .service ul {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.service ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
@media (min-width: 996px) {
  .service ul li {
    font-size: 24px;
    margin: 25px;
  }
}
.service ul li img {
  width: 20px;
  margin-right: 8px;
}
.service ul li a {
  color: var(--color-gray-800);
}
.service ul li a:hover {
  color: #ed1c24;
}

.swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.swiper-button-next::after {
  font-size: 20px;
  color: #222;
}
.swiper-button-next:hover {
  background-color: #8a1515;
}
.swiper-button-next:hover::after,
.swiper-button-next:hover::before {
  color: #fff;
}
.swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.swiper-button-prev::after {
  font-size: 20px;
  color: #222;
}
.swiper-button-prev:hover {
  background-color: #8a1515;
}
.swiper-button-prev:hover::after,
.swiper-button-prev:hover::before {
  color: #fff;
}

.YouTubePopUp-Wrap {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.9);
}
.YouTubePopUp-Content {
  position: relative;
  padding: 2px;
  top: 50%;
  left: 50%;
  max-width: 1400px;
  transform: translate(-50%, -50%);
}
.YouTubePopUp-Content iframe,
.YouTubePopUp-Content object,
.YouTubePopUp-Content embed {
  width: 100%;
  max-width: 100%;
  height: 220px;
  border: none;
}
@media (min-width: 768px) {
  .YouTubePopUp-Content iframe,
  .YouTubePopUp-Content object,
  .YouTubePopUp-Content embed {
    height: 320px;
  }
}
@media (min-width: 996px) {
  .YouTubePopUp-Content iframe,
  .YouTubePopUp-Content object,
  .YouTubePopUp-Content embed {
    height: 788px;
  }
}
.YouTubePopUp-Close {
  position: fixed;
  right: calc(50% - 25px);
  bottom: 20px;
  z-index: 5;
  width: 45px;
  height: 45px;
  border-radius: 45px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: url("../images/paper-bg.jpg") left bottom no-repeat;
  background-size: cover;
}
.YouTubePopUp-Close::before {
  content: "\ea02";
  font-family: "msi-icons";
}
.YouTubePopUp-Close:hover {
  filter: drop-shadow(0 0 5px rgba(240, 255, 0, 0.75)) brightness(1.2);
}
.YouTubePopUp-Hide {
  animation: 0.5s YouTubePopUpHide;
}

@keyframes YouTubePopUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes YouTubePopUpHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.scroll-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 998;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    background-color 0.3s ease;
}
.scroll-to-top:hover {
  background-color: rgba(220, 53, 69, 0.9);
}
.scroll-to-top i {
  font-size: 24px;
}
.scroll-to-top--show {
  display: flex;
}

.project {
  position: relative;
}
.project img {
  height: auto;
}
.project picture {
  display: block;
}

.project * {
  box-sizing: border-box;
}
.project .common-container {
  width: 100%;
  margin: 0 auto;
  max-width: 1300px;
  padding: 0 25px;
}
@media (min-width: 996px) {
  .project .common-container {
    padding: 0;
  }
}
.project .common-title {
  text-align: center;
  font-size: var(--title-xl);
  color: #222;
  padding: 45px 25px;
}

/* ========== guide / experience / explore ========== */
.guide,
.experience,
.explore {
  position: relative;
  z-index: 1; /* 整段（含箭头）低于 tab__flexMobile */
  padding: 50px 0;
  background: #fff6e2;
}

.guide__title,
.experience__title,
.explore__title {
  text-align: center;
  margin-bottom: 28px;
}
.guide__title h2,
.experience__title h2,
.explore__title h2 {
  margin: 0;
  color: #8a1515;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* shared slider / nav */
.guide__sliderBox,
.experience__sliderBox,
.explore__sliderBox {
  position: relative;
}
.guide__slider,
.explore__slider {
  overflow: hidden;
  padding: 0 4px;
}
@media (max-width: 575.98px) {
  .explore__slider,
  .experience__slider {
    padding: 0;
  }
}

/* guide: 满版，不留左边距 */
.guide {
  overflow: hidden;
}
.guide__sliderBox {
  position: relative;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.guide__slider {
  overflow: hidden;
  padding: 0;
  height: auto !important;
}
.guide__slider .swiper-wrapper {
  align-items: flex-start;
  height: auto !important;
}
.guide .swiper-slide {
  height: auto !important;
  opacity: 0.45;
  transition: opacity 0.35s ease;
}
/* 中间主卡片实色，左右半透明 */
.guide .swiper-slide-active {
  opacity: 1;
}
.guide__nav {
  position: absolute;
  z-index: 5;
  top: 50%;
  margin-top: 0;
}
/* 贴在中间主卡片左右两侧（配合 slidesPerView: 1.2 / 1.5 / 2.4） */
.guide .swiper-button-prev,
.guide__nav--prev {
  left: calc(50% - (100% / 1.2 / 2));
  right: auto;
  transform: translate(calc(-100% - 12px), -50%);
}
.guide .swiper-button-next,
.guide__nav--next {
  left: calc(50% + (100% / 1.2 / 2));
  right: auto;
  transform: translate(12px, -50%);
}
.guide .swiper-button-prev,
.guide .swiper-button-next,
.experience .swiper-button-prev,
.experience .swiper-button-next,
.explore .swiper-button-prev,
.explore .swiper-button-next {
  width: 40px;
  height: 40px;
  margin-top: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: #666;
}
/* 盖过上方共用 transform，保持贴在中间卡片两侧 */
.guide .swiper-button-prev,
.guide__nav--prev {
  transform: translate(calc(-100% - 12px), -50%);
  left: calc(50% - (100% / 1.5 / 2));
}
.guide .swiper-button-next,
.guide__nav--next {
  transform: translate(12px, -50%);
  left: calc(50% + (100% / 1.5 / 2));
}
.guide .swiper-button-prev::after,
.guide .swiper-button-next::after,
.experience .swiper-button-prev::after,
.experience .swiper-button-next::after,
.explore .swiper-button-prev::after,
.explore .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
}

/* <996：箭头移到内容外侧（配合下方 slider 收窄） */
.experience .swiper-button-prev,
.experience__nav--prev,
.explore .swiper-button-prev,
.explore__nav--prev {
  left: -44px;
}
.experience .swiper-button-next,
.experience__nav--next,
.explore .swiper-button-next,
.explore__nav--next {
  right: -44px;
}

@media (min-width: 640px) {
  .guide .swiper-button-prev,
  .guide__nav--prev {
    left: calc(50% - (100% / 1.5 / 2));
  }
  .guide .swiper-button-next,
  .guide__nav--next {
    left: calc(50% + (100% / 1.5 / 2));
  }
}
@media (min-width: 996px) {
  .guide .swiper-button-prev,
  .guide .swiper-button-next,
  .experience .swiper-button-prev,
  .experience .swiper-button-next,
  .explore .swiper-button-prev,
  .explore .swiper-button-next {
    width: 48px;
    height: 48px;
  }
  .guide .swiper-button-prev,
  .guide__nav--prev {
    left: calc(50% - (100% / 2.4 / 2));
    transform: translate(calc(-100% - 16px), -50%);
  }
  .guide .swiper-button-next,
  .guide__nav--next {
    left: calc(50% + (100% / 2.4 / 2));
    transform: translate(16px, -50%);
  }
  .experience .swiper-button-prev,
  .experience__nav--prev,
  .explore .swiper-button-prev,
  .explore__nav--prev {
    left: -52px;
  }
  .experience .swiper-button-next,
  .experience__nav--next,
  .explore .swiper-button-next,
  .explore__nav--next {
    right: -52px;
  }
}

/* guide - landscape: 2 full + right peek */
.guide__item {
  height: auto;
}
.guide__item a {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.guide__item-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #e8dcc8;
}
.guide__item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* experience - portrait cards (swiper) */
.experience {
  position: relative;
}
.experience-pattern {
  position: absolute;
}
.experience-pattern--left {
  left: 0;
  top: 46%;
  transform: translate(0%, -50%);
}
.experience-pattern--right {
  right: 0;
  top: 50%;
  transform: translate(0%, -50%);
}
@media (max-width: 1599px) {
  .experience-pattern,
  .explore-pattern {
    display: none;
  }
}
.experience__content {
  position: relative;
}
.experience__sliderBox,
.explore__sliderBox {
  position: relative;
  min-width: 0;
  /* 箭头在外侧（left/right: -52px），外层不可 overflow:hidden */
  overflow: visible;
}
.experience__sliderBox.is-nav-hidden .experience__nav,
.explore__sliderBox.is-nav-hidden .explore__nav {
  display: none !important;
}
.experience__nav,
.explore__nav,
.experience .swiper-button-prev,
.experience .swiper-button-next,
.explore .swiper-button-prev,
.explore .swiper-button-next {
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 2; /* 低于 tab__flexMobile (100) */
}
/* 自定义 disabledClass 时仍保持可点（配合 rewind） */
.explore__nav.is-swiper-nav-nolock,
.experience__nav.is-swiper-nav-nolock,
.explore__nav.swiper-button-disabled,
.experience__nav.swiper-button-disabled {
  opacity: 1;
  pointer-events: auto !important;
  cursor: pointer;
}
.experience__slider,
.explore__slider {
  overflow: hidden;
  padding: 0;
}
.experience__item,
.explore__item {
  text-align: center;
  height: auto;
}
.experience__slider .swiper-slide,
.explore__slider .swiper-slide {
  height: auto;
  box-sizing: border-box;
}
/* 防止未初始化／旧脚本时 slide 默认 width:100% 只露出一张 */
.explore__slider:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 16px;
}
.explore__slider:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 16px) / 2);
  flex: 0 0 calc((100% - 16px) / 2);
  max-width: calc((100% - 16px) / 2);
}
@media (max-width: 575.98px) {
  .explore__slider:not(.swiper-initialized) .swiper-slide,
  .experience__slider:not(.swiper-initialized) .swiper-slide {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.experience__item a,
.explore__item a {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.experience__item-img,
.explore__item-img {
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: #e8dcc8;
  margin: 0 auto;
}
.experience__item-img img,
.explore__item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.experience__item-label,
.explore__item-label {
  margin: 14px 0 0;
  color: #8a1515;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
.experience__nav,
.explore__nav {
  position: absolute;
  z-index: 2;
  top: 42%;
  margin-top: 0;
  transform: translateY(-50%);
}
.experience__nav--prev,
.explore__nav--prev {
  left: -44px;
}
.experience__nav--next,
.explore__nav--next {
  right: -44px;
}
.experience .swiper-button-prev,
.experience .swiper-button-next,
.explore .swiper-button-prev,
.explore .swiper-button-next {
  top: 42%;
}
/* guide / experience / explore 箭头 hover 统一 */
.guide .swiper-button-prev:hover,
.guide .swiper-button-next:hover,
.experience .swiper-button-prev:hover,
.experience .swiper-button-next:hover,
.explore .swiper-button-prev:hover,
.explore .swiper-button-next:hover,
.guide__nav:hover,
.experience__nav:hover,
.explore__nav:hover {
  background: #8a1515 !important;
  background-color: #8a1515 !important;
}
.guide .swiper-button-prev:hover::after,
.guide .swiper-button-prev:hover::before,
.guide .swiper-button-next:hover::after,
.guide .swiper-button-next:hover::before,
.experience .swiper-button-prev:hover::after,
.experience .swiper-button-prev:hover::before,
.experience .swiper-button-next:hover::after,
.experience .swiper-button-next:hover::before,
.explore .swiper-button-prev:hover::after,
.explore .swiper-button-prev:hover::before,
.explore .swiper-button-next:hover::after,
.explore .swiper-button-next:hover::before {
  color: #fff !important;
}

/* explore - title left (= exp item1) + 2 cards (= exp item2/3) */
.explore {
  position: relative;
}
.explore-pattern {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0%, -50%);
}
.explore__flexBox {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.explore__intro {
  display: flex;
  align-items: center;
  justify-content: center;
}
.explore__title {
  flex: 1 1 auto;
  text-align: center;
  margin-bottom: 0;
}
.explore__title h2 {
  text-align: center;
}
.explore__title h2 span {
  display: inline;
}
.explore__sliderBox {
  width: 100%;
}
@media (min-width: 640px) {
  .explore__flexBox {
    gap: 20px;
  }
}
@media (min-width: 996px) {
  .explore__title h2 span {
    display: block;
  }
  .guide,
  .experience,
  .explore {
    padding: 70px 0;
  }
  .explore__flexBox {
    flex-direction: row;
    align-items: center;
    /* same 20px gap as experience__slider */
    gap: 20px;
  }
  /* title column width = experience item 1 */
  .explore__intro {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
    justify-content: flex-start;
  }
  .explore__title {
    text-align: left;
  }
  .explore__title h2 {
    text-align: left;
  }
  /* slider = experience item 2 + gap + item 3 */
  .explore__sliderBox {
    flex: 1 1 auto;
    width: calc(((100% - 40px) / 3) * 2 + 20px);
    max-width: calc(((100% - 40px) / 3) * 2 + 20px);
  }
}

/*
  <1400：箭头在外侧 -52px，需把 slider 收窄，避免撑出横向卷轴
*/
@media (max-width: 1399.98px) {
  .experience,
  .explore {
    overflow-x: clip;
  }
  .experience__sliderBox {
    width: calc(100% - 120px);
    max-width: calc(100% - 120px);
    margin-left: auto;
    margin-right: auto;
  }
  .experience__slider,
  .explore__slider {
    width: 100%;
    max-width: 100%;
  }
  .explore__sliderBox {
    width: calc(100% - 120px);
    max-width: calc(100% - 120px);
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 996px) and (max-width: 1399.98px) {
  /* 桌面双栏：整排（标题+slider）一起收窄，箭头仍贴 slider 外侧 */
  .explore__flexBox {
    width: calc(100% - 120px);
    max-width: calc(100% - 120px);
    margin-left: auto;
    margin-right: auto;
  }
  .explore__sliderBox {
    width: calc(((100% - 40px) / 3) * 2 + 20px);
    max-width: calc(((100% - 40px) / 3) * 2 + 20px);
    margin-left: 0;
    margin-right: 0;
  }
}

/* MSI Instagram consent popup — 对齐 ig-popup-test，勿再加 min-height / flex-shrink */
.msi-ig-consent-popup {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  max-width: none !important;
  margin: 0 !important;
}
.msi-ig-consent-popup[hidden] {
  display: none !important;
}
.msi-ig-consent-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}
.msi-ig-consent-popup__panel {
  position: relative;
  z-index: 1;
  /* 禁止被 flex 压扁，高度跟内容走 */
  flex: 0 0 auto;
  width: min(540px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 40px 16px 16px;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.msi-ig-consent-popup__close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #222;
  padding: 0 4px;
}
.msi-ig-consent-popup__target .instagram-media,
.msi-ig-consent-popup__target iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* Mobile sticky tab nav (参照 2.HTML / buynow.css tab__flexMobile) */
.buyNow .tab__flexBoxInside-mobile {
  border-radius: 0;
  color: #fff;
}
.buyNow .tab__flexMobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; /* 高于 experience / explore 箭头 */
  padding: 0;
  background-color: transparent;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.buyNow .tab__flexMobile--active {
  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;
  width: 100%;
}
@media (min-width: 768px) {
  .buyNow .tab__flexMobile,
  .buyNow .tab__flexMobile--active {
    display: none;
  }
}
.buyNow .tab__flexMobileBox {
  margin: 0;
  width: 33.3333333333%;
  background: #eee;
  color: #fff;
  border-left: 2px solid #ffffff;
}
.buyNow .tab__flexMobileBox:nth-child(1) {
  border-left: none;
}
.buyNow .tab__flexMobileBox.hoverB {
  background: #5471a5;
}
.buyNow .tab__flexMobileBox.hoverG {
  background: #ea492b;
}
.buyNow .tab__flexMobileBox.hoverC {
  background: #f2bb28;
}
.buyNow .tab__flexMobileBox.select {
  position: relative;
  -webkit-filter: drop-shadow(0 8px 5px #c5bfb4);
  filter: drop-shadow(0 8px 5px #c5bfb4);
}
.buyNow .tab__flexMobileBox.select::after {
  position: absolute;
  bottom: -9px;
  content: "";
  width: 0;
  height: 0;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.buyNow .tab__flexMobileBox.select.hoverB::after {
  border-top: 16px solid #5471a5;
}
.buyNow .tab__flexMobileBox.select.hoverG::after {
  border-top: 16px solid #ea492b;
}
.buyNow .tab__flexMobileBox.select.hoverC::after {
  border-top: 16px solid #f2bb28;
}
.buyNow .tab__flexMobile .tab__label {
  flex: none;
  width: 100%;
  height: auto;
  min-height: 56px;
  margin: 0;
  padding: 8px 6px;
  color: #fff;
  background: transparent;
  background-image: none;
  text-align: center;
  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;
  -webkit-transition: 0.1s all ease-in;
  transition: 0.1s all ease-in;
}
.buyNow .tab__flexMobile .tab__label p {
  display: block;
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.buyNow .tab__flexMobile .tab__label p span,
.buyNow .tab__flexMobile .tab__label small {
  display: none;
}