/* =========================================================
   Amazfit 十月品牌週 EDM（1220px 版）
   原稿 2000px 等比縮至 momo PC 版型 1220px；中文 Noto Sans TC，品牌型號 Poppins
   側邊選單不縮放，尺寸比照 momo 黏人精
   ========================================================= */
@font-face{font-family:"Noto Sans TC";font-weight:500;font-display:swap;src:url(../fonts/NotoSansTC-Medium.woff2) format("woff2"),local("Noto Sans TC Medium")}
@font-face{font-family:"Noto Sans TC";font-weight:700;font-display:swap;src:url(../fonts/NotoSansTC-Bold.woff2) format("woff2"),local("Noto Sans TC Bold")}
@font-face{font-family:"Noto Sans TC";font-weight:800;font-display:swap;src:url(../fonts/NotoSansTC-ExtraBold.woff2) format("woff2"),local("Noto Sans TC ExtraBold")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(../fonts/Poppins-Bold.woff2) format("woff2"),local("Poppins Bold")}
@font-face{font-family:"Poppins";font-weight:800;font-display:swap;src:url(../fonts/Poppins-ExtraBold.woff2) format("woff2"),local("Poppins ExtraBold")}

:root{
  --dark:#221f1f;
  --red:#b91f24;
  --nav-red:#e8362f;
  --pill:#535455;
  --panel:#909294;
  --frame:#d1d3d4;
  --page-w:2000px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#39383a;font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;color:var(--dark);-webkit-font-smoothing:antialiased;line-height:1.3}
a{color:inherit;text-decoration:none}
img{display:block;border:0}
ul{list-style:none;margin:0;padding:0}
.en{font-family:"Poppins","Noto Sans TC",sans-serif}

/* ---------- 整頁：比照 momo PC 版型，內容欄 1220px，背景延伸至整個視窗 ---------- */
/* 原稿以 2000px 繪製，整體等比縮為 1220px（2000 × 0.61） */
.page{
  position:relative;width:100%;min-width:1220px;overflow:hidden;
  background:linear-gradient(to bottom,#7c7e80 696px,#39383a 3662px,#888a8d 7320px);
}
.wrapper{position:relative;width:var(--page-w);margin:0 auto;zoom:0.61;background:none}
section{scroll-margin-top:60px}

/* ---------- 版頭 ---------- */
.hero{position:relative;height:1141px;background:url(../images/hero_bg.jpg) no-repeat center top;overflow:hidden}
.hero-title{position:absolute;left:500px;top:270px;width:1000px;transform-origin:50% 50%;
  animation:popin 1.3s cubic-bezier(.34,1.6,.64,1) .35s both}
.hero-title img{width:100%}
.hero-watch{position:absolute;left:1322px;top:538px;width:417px;z-index:2;transform-origin:50% 62%;
  animation:wobble 1.1s ease-in-out .9s infinite alternate}
.hero-watch img{width:100%}
@keyframes popin{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes wobble{0%{transform:rotate(-3.5deg)}100%{transform:rotate(3.5deg)}}
@media (prefers-reduced-motion:reduce){.hero-title,.hero-watch{animation:none}}

/* ---------- 區塊標題（黑色標籤） ---------- */
.tag{
  position:relative;z-index:3;width:922px;height:172px;margin:0 auto;
  background:var(--dark);clip-path:polygon(48px 0,100% 0,100% 100%,0 100%);
  display:flex;align-items:center;justify-content:center;gap:30px;
  color:#fff;font-size:71px;font-weight:800;letter-spacing:.02em;
}
.tag .star{font-size:52px;line-height:1;margin-top:6px}
.tag::after{content:"";position:absolute;right:12px;bottom:12px;width:0;height:0;
  border-style:solid;border-width:0 0 83px 83px;border-color:transparent transparent #dcdbdb transparent}
.hero + .tag{margin-top:-38px}

/* ---------- 強打爆殺產品（輪播） ---------- */
.hot{padding-top:23px}
.hot .swiper{width:1610px;margin:0 auto;overflow:hidden;padding-top:12px} /* 留空間給卡片 hover 上浮，避免被 overflow 切到 */
.hot .swiper-slide{width:510px}
.pcard{
  display:block;position:relative;width:510px;height:740px;overflow:hidden;
  background:#fff;border:3px solid var(--dark);border-radius:28px;text-align:center;
  transition:transform .3s ease;
}
.pcard:hover{transform:translateY(-6px)}
.pcard::after{content:"";position:absolute;right:-1px;bottom:-1px;width:0;height:0;
  border-style:solid;border-width:0 0 72px 72px;border-color:transparent transparent var(--dark) transparent}
.pcard .img{height:420px;display:flex;align-items:center;justify-content:center;padding-top:14px}
.pcard .img img{max-height:386px;max-width:400px;width:auto;height:auto}
.pcard .label{display:inline-block;background:var(--pill);color:#fff;font-size:33px;font-weight:800;line-height:62px;padding:0 34px;border-radius:12px;white-space:nowrap}
.pcard .name{margin-top:10px;font-size:52px;font-weight:800;line-height:1.2;color:var(--dark);white-space:nowrap}
.pcard .name small{font-family:"Noto Sans TC",sans-serif;font-size:34px;font-weight:800;margin-left:10px}
.pcard .price{color:var(--red);font-size:66px;font-weight:800;line-height:1.05;margin-top:2px}
.price .cur{font-size:.88em;margin-right:-.22em}
.pcard .orig{display:inline-block;margin-top:6px;font-size:34px;font-weight:700;line-height:1.2;color:var(--dark);
  text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--dark)}
.hot .swiper-pagination{position:static;margin-top:76px;height:16px;line-height:16px}
.hot .swiper-pagination-bullet{width:14px;height:14px;margin:0 7px;background:#fff;opacity:1;border-radius:7px;transition:width .3s}
.hot .swiper-pagination-bullet-active{width:38px;background:var(--dark)}

/* ---------- 好禮三重奏 ---------- */
.gift{margin-top:215px}
.gifts{display:flex;justify-content:center;gap:85px;margin-top:60px}
.gcard{position:relative;display:block;width:500px;height:480px;overflow:hidden;
  background:#fff;border:3px solid var(--dark);border-radius:28px;transition:transform .3s}
.gcard:hover{transform:translateY(-6px)}
.gcard img{position:absolute;height:auto}
.gcard .big{position:absolute;left:0;right:0;bottom:84px;text-align:center;font-size:106px;font-weight:800;line-height:1.1;color:#fff;
  paint-order:stroke fill;-webkit-text-stroke:10px var(--dark);text-shadow:0 6px 10px rgba(0,0,0,.35);letter-spacing:.02em}
.gcard .bar{position:absolute;left:0;right:0;bottom:0;height:88px;background:var(--dark);color:#fff;font-size:32px;font-weight:800;line-height:88px;text-align:center;white-space:nowrap}
.gcard .bar::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;
  border-style:solid;border-width:0 0 44px 44px;border-color:transparent transparent #fff transparent}

/* ---------- 登記參與活動 ---------- */
.register{margin-top:275px}
.reglist{margin-top:106px}
.regcard + .regcard{margin-top:220px} /* 原按鈕列高度，保留留白 */
.regcard{
  position:relative;display:flex;align-items:center;width:1690px;height:450px;margin:0 auto;overflow:hidden;
  background:#fff;border:3px solid var(--dark);border-radius:28px;
}
.regcard::before,.regcard::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.regcard::before{right:-1px;top:-1px;border-width:0 34px 34px 0;border-color:transparent var(--dark) transparent transparent}
.regcard::after{left:-1px;bottom:-1px;border-width:34px 0 0 34px;border-color:transparent transparent transparent var(--dark)}
.regcard .pic{position:absolute;left:0;top:0;width:520px;height:100%}
.regcard .pic img{position:absolute}
.regcard .txt{position:absolute;left:520px;top:0;bottom:0;width:980px;display:flex;flex-direction:column;justify-content:center}
.regcard .txt h3{margin:0;font-size:59px;font-weight:800;line-height:1.2;color:var(--dark)}
.regcard .txt p{margin:10px 0 0;font-size:47px;font-weight:500;line-height:1.25;color:var(--dark)}
.regcard .go{position:absolute;right:0;top:0;bottom:0;width:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:transform .3s}
.regcard:hover .go{transform:scale(1.06)}
.regcard .go i{display:block;width:0;height:0;border-style:solid;border-width:52px 0 52px 86px;border-color:transparent transparent transparent var(--dark)}
.regcard .go b{font-size:60px;font-weight:800;line-height:1;color:var(--dark)}

/* ---------- 系列區（外框 + 內面板） ---------- */
.series{position:relative;width:1640px;margin:0 auto;border:3px solid var(--frame);border-radius:6px;padding:60px 50px 40px}
.series.narrow{width:1262px}
.series + .series{margin-top:293px}
.series.last{margin-top:419px}
.series-wrap{margin-top:1163px}
.stitle{position:absolute;left:50%;top:-70px;transform:translateX(-50%);width:664px;height:140px;padding:3px;
  background:var(--dark);clip-path:polygon(34px 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%,0 34px)}
.stitle span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fff;
  clip-path:polygon(33px 0,100% 0,100% calc(100% - 33px),calc(100% - 33px) 100%,0 100%,0 33px);
  font-size:75px;font-weight:700;color:var(--dark);letter-spacing:.04em}
.panel{display:flex;justify-content:center;gap:26px;background:var(--panel);border-radius:10px;padding:44px 31px 40px}
.scard{display:block;width:350px;height:516px;background:#fff;border-radius:18px;text-align:center;overflow:hidden;transition:transform .3s}
.scard:hover{transform:translateY(-6px)}
.scard .img{height:290px;display:flex;align-items:center;justify-content:center;padding-top:14px}
.scard .img img{max-height:272px;max-width:290px;width:auto;height:auto}
.scard .label{display:inline-block;margin-top:2px;background:var(--pill);color:#fff;font-size:23px;font-weight:800;line-height:42px;padding:0 20px;border-radius:9px;white-space:nowrap}
.scard .name{margin-top:8px;font-size:35px;font-weight:800;line-height:1.2;color:var(--dark);white-space:nowrap}
.scard .name small{font-family:"Noto Sans TC",sans-serif;font-size:23px;font-weight:800;margin-left:6px}
.scard .price{color:var(--red);font-size:45px;font-weight:800;line-height:1.05;margin-top:2px}
.scard .orig{display:inline-block;margin-top:4px;font-size:23px;font-weight:700;line-height:1.2;color:var(--dark);
  text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--dark)}

/* ---------- 頁尾 ---------- */
.footer{padding:326px 0 716px;text-align:center}
.footer .logo{display:flex;align-items:center;justify-content:center;width:1316px;height:390px;margin:0 auto;background:#fff;transition:transform .3s}
.footer .logo:hover{transform:scale(.97)}
.footer .logo img{width:838px}
.footer .go{display:inline-flex;align-items:center;gap:44px;margin-top:40px;font-size:84px;font-weight:800;line-height:1;color:var(--dark);letter-spacing:.04em}
.footer .go i{display:block;width:0;height:0;border-style:solid;border-width:40px 0 40px 66px;border-color:transparent transparent transparent var(--dark)}

/* ---------- 側邊錨點選單（尺寸比照 momo PC 黏人精：寬 110px、字 15px） ---------- */
.sidenav{
  position:fixed;right:0;top:200px;z-index:90;width:110px;padding:14px 0 10px;text-align:center;
  background:rgba(0,0,0,.65);border-radius:20px 0 0 20px;
  font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
  transform:translateX(150px);transition:transform .25s ease;
}
.sidenav.on{transform:translateX(0)}
.sidenav ul{margin:0 0 0 10px}
.sidenav li{position:relative;padding:10px 0;font-size:15px;font-weight:800;line-height:20px;white-space:nowrap}
.sidenav li::before{content:"";position:absolute;left:18%;bottom:0;width:64%;height:1px;background:#fff;opacity:.2}
.sidenav li:last-child::before{display:none}
.sidenav li a{display:block;color:#fff;transition:color .2s}
.sidenav li a:hover{color:var(--nav-red)}
.sidenav li .pin{display:none;position:absolute;left:-4px;top:50%;width:12px;height:12px;margin-top:-6px;fill:var(--nav-red)}
.sidenav li.active a{color:var(--nav-red)}
.sidenav li.active .pin{display:block}
.sidenav .top{position:relative;display:block;margin:10px 0 0 10px;padding-top:11px;font-size:24px;font-weight:800;line-height:1.1;color:#fff}
.sidenav .top::before{content:"";position:absolute;top:0;left:50%;width:0;height:0;margin-left:-5px;border-style:solid;border-width:0 5px 8px 5px;border-color:transparent transparent #fff transparent}
.sidenav .top:hover{color:var(--nav-red)}
.sidenav .top:hover::before{border-color:transparent transparent var(--nav-red) transparent}
