/* ============================================================
   荐片 jp2026 · Mint Movie Journal 薄荷观影手帐
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #232721; background: #f6f1e4;
    -webkit-font-smoothing: antialiased; line-height: 1.65;
}
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(35,39,33,.05) 1px, transparent 1.4px);
    background-size: 22px 22px;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ol, ul { list-style: none; }
.wr2j { width: 1200px; max-width: calc(100% - 48px); margin: 0 auto; }

/* ===== 奶油毛玻璃头部 ===== */
.hd2j {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(246,241,228,.78);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid rgba(35,39,33,.07);
    transition: background .3s, box-shadow .3s;
}
.hd2j.rfd { background: rgba(255,253,246,.94); box-shadow: 0 14px 38px -20px rgba(35,39,33,.3); }
.hd-in { display: flex; align-items: center; height: 80px; gap: 10px; }
.lg3k { display: flex; align-items: center; gap: 11px; flex: none; }
.lg3k img { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 8px 20px -10px rgba(35,39,33,.4); }
.lg3k span { font-size: 20px; font-weight: 900; letter-spacing: 1px; color: #232721; }
.lg3k span i {
    font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
    color: #175b44; background: linear-gradient(135deg,#7ce8c2,#2fce9e);
    border-radius: 999px; padding: 3px 10px; margin-left: 7px; vertical-align: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.nv7m { display: flex; gap: 4px; margin-left: 40px; flex: 1; }
.nv7m a { font-size: 15px; font-weight: 600; color: rgba(35,39,33,.62); padding: 8px 16px; border-radius: 999px; transition: color .2s, background .2s; }
.nv7m a:hover { color: #129a6f; background: rgba(47,206,158,.12); }
.dl8q {
    flex: none; font-size: 15px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg,#46dcb0,#1cb98c);
    border-radius: 999px; padding: 11px 27px;
    box-shadow: 0 12px 26px -10px rgba(28,185,140,.55), inset 0 1.5px 0 rgba(255,255,255,.45);
    transition: transform .22s, box-shadow .22s;
}
.dl8q:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(28,185,140,.62), inset 0 1.5px 0 rgba(255,255,255,.45); }
.mb7k {
    display: none; flex: none; width: 42px; height: 42px; border: 0; cursor: pointer;
    border-radius: 13px; background: rgba(35,39,33,.07); color: #232721; font-size: 21px;
    align-items: center; justify-content: center;
}
.mnu5 {
    display: flex; flex-direction: column; max-height: 0; overflow: hidden;
    background: rgba(255,253,246,.98); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    transition: max-height .4s ease;
}
.mnu5.mun { max-height: 480px; }
.mnu5 a { padding: 15px 26px; font-size: 15px; font-weight: 600; color: rgba(35,39,33,.82); border-top: 1px solid rgba(35,39,33,.07); }
.mnu5 a:last-child { margin: 12px 22px 20px; text-align: center; background: linear-gradient(135deg,#46dcb0,#1cb98c); color: #fff; border-radius: 999px; padding: 15px; font-weight: 800; border-top: 0; box-shadow: 0 14px 30px -12px rgba(28,185,140,.5); }

/* ===== HERO：奶油纸 + 手帐拼贴板 ===== */
.hr3v { position: relative; overflow: hidden; padding: 150px 0 96px; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; }
.bb-m { width: 440px; height: 440px; left: -130px; top: 40px; background: rgba(47,206,158,.2); }
.bb-r { width: 320px; height: 320px; right: 6%; top: -110px; background: rgba(242,53,47,.1); }
.bb-b { width: 360px; height: 360px; right: -120px; bottom: -120px; background: rgba(24,182,242,.12); }
.hr-in { position: relative; display: flex; align-items: center; gap: 50px; }
.hl4x { flex: 1.02; }
.hl-tg {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 700; color: #157354;
    background: #fffdf6; border: 1.5px dashed rgba(28,185,140,.5);
    border-radius: 999px; padding: 8px 18px;
    box-shadow: 0 10px 26px -16px rgba(28,185,140,.5);
}
.tg-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg,#46dcb0,#1cb98c); box-shadow: 0 0 0 4px rgba(47,206,158,.16); }
h1 { margin: 26px 0 22px; font-size: 54px; line-height: 1.2; font-weight: 900; letter-spacing: 1px; color: #20241e; }
h1 em { font-style: normal; display: inline-block; margin: 14px 0 4px; color: #fff; background: linear-gradient(120deg,#3ed6a5,#13a87e 75%); border-radius: 14px; padding: 2px 16px 7px; box-shadow: 0 14px 30px -14px rgba(28,185,140,.65); }
.hl-ds { font-size: 16.5px; color: #5c6156; max-width: 580px; }
.hl-bn { display: flex; align-items: center; gap: 16px; margin: 34px 0 26px; }
.hl-go {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 17px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg,#46dcb0,#13a87e);
    border-radius: 999px; padding: 16px 34px;
    box-shadow: 0 18px 38px -12px rgba(28,185,140,.55), inset 0 1.5px 0 rgba(255,255,255,.45);
    transition: transform .22s, box-shadow .22s;
}
.hl-go:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -12px rgba(28,185,140,.65), inset 0 1.5px 0 rgba(255,255,255,.45); }
.hl-go i { font-size: 19px; }
.hl-lk {
    display: inline-flex; align-items: center; gap: 7px; font-size: 15.5px; font-weight: 700; color: #3a4038;
    background: #fffdf6; border: 1.5px solid rgba(35,39,33,.12);
    border-radius: 999px; padding: 15px 26px; box-shadow: 0 12px 28px -18px rgba(35,39,33,.4); transition: transform .22s;
}
.hl-lk:hover { transform: translateY(-3px); }
.hl-cp { display: flex; flex-wrap: wrap; gap: 9px; }
.hl-cp li {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight:700; color: #464d42;
    background: #fffdf6; border: 1px solid rgba(35,39,33,.08);
    border-radius: 999px; padding: 8px 14px; box-shadow: 0 8px 20px -15px rgba(35,39,33,.4);
}
.hl-cp i { font-size: 15px; color: #13a87e; }
.hl-cp li:nth-child(3n+2) i { color: #18a8e8; }
.hl-cp li:nth-child(3n) i { color: #f2352f; }

/* 拼贴板 */
.hr6p { flex: .98; display: flex; justify-content: center; }
.bd-cv { position: relative; width: 440px; height: 560px; }
.polar {
    position: absolute; background: #fffef9;
    border-radius: 17px; padding: 12px 12px 14px;
    box-shadow: 0 26px 50px -20px rgba(35,39,33,.35), 0 4px 10px -4px rgba(35,39,33,.12);
    transition: transform .35s ease;
}
.polar-img { border-radius: 11px; overflow: hidden; background: #1b1b1f; }
.polar-cap { text-align: center; font-size: 13px; font-weight: 700; color: #6b7164; margin-top: 9px; letter-spacing: 1px; }
.pc-big { width: 252px; left: 70px; top: 30px; transform: rotate(-3deg); z-index: 2; }
.pc-big .polar-img { height: 350px; }
.pc-big .polar-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pc-big:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); z-index: 6; }
.pc-s1 { width: 172px; left: 0; top: 250px; transform: rotate(6deg); z-index: 3; }
.pc-s1 .polar-img { height: 230px; }
.pc-s1 .polar-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pc-s1:hover { transform: rotate(0deg) translateY(-8px) scale(1.04); z-index: 6; }
.pc-s2 { width: 168px; right: 0; top: 285px; transform: rotate(-7deg); z-index: 1; }
.pc-s2 .polar-img { height: 218px; }
.pc-s2 .polar-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pc-s2:hover { transform: rotate(0deg) translateY(-8px) scale(1.04); z-index: 6; }
.tape {
    position: absolute; width: 92px; height: 27px; z-index: 4;
    background: rgba(47,206,158,.38);
    box-shadow: 0 2px 6px -2px rgba(35,39,33,.18);
    top: -13px; left: 50%; margin-left: -46px; transform: rotate(-3deg);
}
.tp-a { background: rgba(47,206,158,.42); transform: rotate(-4deg); }
.tp-b { width: 72px; margin-left: -36px; background: rgba(242,53,47,.3); transform: rotate(5deg); }
.tp-c { width: 72px; margin-left: -36px; background: rgba(24,182,242,.32); transform: rotate(-6deg); }
.stk {
    position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: #fff; letter-spacing: 1px;
    box-shadow: 0 12px 26px -12px rgba(35,39,33,.5), inset 0 1.5px 0 rgba(255,255,255,.4);
}
.st-hot {
    width: 64px; height: 64px; border-radius: 50%; font-size: 16px;
    background: linear-gradient(135deg,#ff6a5e,#e22018); top: 10px; left: 18px;
    transform: rotate(-14deg); animation: bob 4.4s ease-in-out infinite;
}
.st-hd {
    width: 56px; height: 56px; border-radius: 50%; font-size: 13px;
    background: linear-gradient(135deg,#5cc6ff,#1294d8); top: 30px; right: 6px;
    transform: rotate(12deg); animation: bob 4.4s ease-in-out 1.2s infinite;
}
.st-ep {
    border-radius: 999px; font-size: 12px; padding: 10px 16px; color: #33403a;
    background: rgba(255,254,249,.96); border: 2px dashed rgba(28,185,140,.6);
    bottom: 8px; left: 50%; margin-left: -92px; width: 184px;
    animation: bob 4.4s ease-in-out 2.3s infinite;
}
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ===== 通用标题 ===== */
.sec-t { text-align: center; font-size: 34px; font-weight: 900; letter-spacing: 2px; color: #20241e; margin-bottom: 52px; }
.sec-t.light { color: #f4f7f1; }
.sk-lb {
    display: block; width: fit-content; margin: 0 auto 13px;
    font-size: 12.5px; font-weight: 800; letter-spacing: 2.5px;
    color: #129a6f; background: rgba(47,206,158,.14);
    border-radius: 999px; padding: 6px 17px;
}
.sec-t.light .sk-lb { color: #7ce8c2; background: rgba(124,232,194,.12); }
.tt7 { font-size: 18.5px; font-weight: 800; color: #232721; }
.ds6 { font-size: 14.5px; color: #62685c; }
.ds6.dim { color: rgba(236,240,232,.66); }
.lk2 { color: #0e9c72; font-weight: 800; border-bottom: 1.5px solid rgba(28,185,140,.4); }
.ab2q .lk2 { color: #7ce8c2; border-color: rgba(124,232,194,.45); }

/* ===== 产品展示：四张贴纸拍立得 ===== */
.sw1s { padding: 96px 0 100px; }
.pw-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; }
.pc4f {
    position: relative; background: #fffef9;
    border-radius: 18px; padding: 13px 13px 22px;
    box-shadow: 0 26px 52px -26px rgba(35,39,33,.35), 0 4px 10px -5px rgba(35,39,33,.1);
    transition: transform .3s, box-shadow .3s;
}
.pc4f.t1 { transform: rotate(-1.6deg); }
.pc4f.t2 { transform: rotate(1.2deg); }
.pc4f.t3 { transform: rotate(-1deg); }
.pc4f.t4 { transform: rotate(1.8deg); }
.pc4f:hover { transform: rotate(0deg) translateY(-10px); box-shadow: 0 40px 66px -26px rgba(35,39,33,.42); z-index: 2; }
.tp-d { width: 80px; height: 24px; margin-left: -40px; }
.tp-d.mint { background: rgba(47,206,158,.42); }
.tp-d.blue { background: rgba(24,182,242,.34); }
.tp-d.gold { background: rgba(217,164,55,.4); }
.pi-img { border-radius: 12px; overflow: hidden; background: #1b1b1f; height: 330px; margin-bottom: 17px; }
.pi-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pc4d figcaption, .pc4f figcaption { padding: 0 7px; }
.pc4f b { display: block; font-size: 16.5px; font-weight: 800; margin-bottom: 8px; color: #262b24; }
.pc4f .ds6 { font-size: 13.5px; }

/* ===== 优势亮点：墨绿黑夜 + 奶油玻璃便签 ===== */
.ab2q { position: relative; overflow: hidden; padding: 96px 0; background: linear-gradient(180deg,#20251f,#161a16); }
.ab2q::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; left: -170px; bottom: -200px; background: radial-gradient(circle, rgba(47,206,158,.18), transparent 68%); }
.ag6 { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ad8g {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px; padding: 30px 28px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .28s, background .28s;
}
.ad8g:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); }
.ai-ic {
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 21px; margin-bottom: 19px; font-size: 26px; color: #fff;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 16px 30px -14px rgba(0,0,0,.55);
}
.ai-ic.c-mint { background: linear-gradient(135deg,#5ee3bb,#13a87e); }
.ai-ic.c-red { background: linear-gradient(135deg,#ff7368,#e22018); }
.ai-ic.c-blue { background: linear-gradient(135deg,#5cc6ff,#1294d8); }
.ai-ic.c-gold { background: linear-gradient(135deg,#ecc96a,#cf9a2c); color: #4a3608; }
.ai-ic.c-green { background: linear-gradient(135deg,#8ad96a,#4aab28); }
.ai-ic.c-pink { background: linear-gradient(135deg,#ff9ec4,#e86ba4); }
.ad8g .tt7 { color: #fff; margin-bottom: 10px; }

/* ===== 使用流程：薄荷打卡清单 ===== */
.st9w { padding: 96px 0; }
.ck-list { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.ck-list::before {
    content: ""; position: absolute; top: 37px; left: 12%; right: 12%; height: 0;
    border-top: 3px dashed rgba(28,185,140,.5);
}
.ci5 { position: relative; text-align: center; padding: 0 12px; }
.ck-no {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; margin: 0 auto 22px;
    font-size: 20px; font-weight: 900; color: #127a5a;
    background: #fffdf6; border: 3px solid #2fce9e; border-radius: 50%;
    box-shadow: 0 14px 30px -14px rgba(28,185,140,.55);
}
.ck-no i {
    position: absolute; right: -6px; bottom: -2px;
    width: 30px; height: 30px; border-radius: 50%;
    font-size: 16px; color: #fff; background: linear-gradient(135deg,#46dcb0,#13a87e);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px -5px rgba(28,185,140,.6);
}
.ci5 .tt7 { margin-bottom: 9px; }
.ci5 .ds6 { font-size: 13.5px; }

/* ===== 产品资讯：三色便签 ===== */
.nw3x { padding: 96px 0; background: rgba(255,254,249,.6); }
.ng3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ni9b {
    position: relative; border-radius: 22px; padding: 32px 28px 28px;
    box-shadow: 0 22px 48px -28px rgba(35,39,33,.3);
    transition: transform .28s, box-shadow .28s;
}
.ni9b::before {
    content: ""; position: absolute; top: -11px; left: 50%; margin-left: -36px;
    width: 72px; height: 23px; transform: rotate(-2.5deg);
    box-shadow: 0 2px 6px -2px rgba(35,39,33,.2);
}
.ni9b:hover { transform: translateY(-6px) rotate(0); box-shadow: 0 34px 60px -26px rgba(35,39,33,.38); }
.nt-m { background: #e9f8f1; transform: rotate(-.8deg); }
.nt-m::before { background: rgba(47,206,158,.4); }
.nt-b { background: #eaf5fd; transform: rotate(.9deg); }
.nt-b::before { background: rgba(24,182,242,.34); }
.nt-y { background: #fdf5df; transform: rotate(-.6deg); }
.nt-y::before { background: rgba(217,164,55,.42); }
.nt-tag {
    display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
    color: #127a5a; background: rgba(255,255,255,.75); border-radius: 999px; padding: 5px 14px; margin-bottom: 16px;
}
.nt-b .nt-tag { color: #0f7fbd; }
.nt-y .nt-tag { color: #9a7216; }
.ni9b .tt7 { margin-bottom: 11px; font-size: 18px; }
.ni9b .ds6 { font-size: 14px; }
.ni-time { margin-top: 19px; font-size: 12.5px; font-weight: 700; color: #8d9388; }

/* ===== FAQ：奶油手风琴 ===== */
.fq7y { padding: 96px 0; }
.flist { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.fi5h {
    background: #fffef9; border-radius: 22px; overflow: hidden;
    box-shadow: 0 16px 40px -24px rgba(35,39,33,.28);
    transition: box-shadow .25s;
}
.fi5h.opn { box-shadow: 0 22px 46px -18px rgba(28,185,140,.35); }
.fh5 { display: flex; align-items: center; gap: 16px; padding: 21px 27px; cursor: pointer; }
.fq-q {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg,#46dcb0,#13a87e); color: #fff; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px -7px rgba(28,185,140,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.fh5 b { flex: 1; font-size: 16.5px; font-weight: 700; color: #282d26; }
.fh5 > i {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(47,206,158,.13); color: #13a87e; font-size: 19px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s, background .3s;
}
.fi5h.opn .fh5 > i { transform: rotate(45deg); background: rgba(47,206,158,.22); }
.fb5 { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.fb5 .ds6 { padding: 0 27px 24px 85px; }

/* ===== 用户评价：留言条瀑布流 ===== */
.rv9k { padding: 96px 0; background: rgba(255,254,249,.6); }
.rv-ms { column-count: 3; column-gap: 20px; }
.ri4m {
    break-inside: avoid; margin-bottom: 20px; border-radius: 22px; padding: 25px 26px;
    box-shadow: 0 18px 44px -28px rgba(35,39,33,.3);
    transition: transform .28s;
}
.ri4m:hover { transform: translateY(-5px) rotate(0); }
.ri4m.n1 { background: #fff8e4; transform: rotate(-.5deg); }
.ri4m.n2 { background: #e9f8f1; transform: rotate(.5deg); }
.ri4m.n3 { background: #eaf5fd; transform: rotate(-.4deg); }
.rv-hd { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.rv-av {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg,#46dcb0,#13a87e);
    color: #fff; font-size: 18px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 22px -9px rgba(28,185,140,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.rv-hd p { display: flex; flex-direction: column; }
.rv-hd b { font-size: 15px; font-weight: 800; color: #2a2f28; }
.rv-hd small { font-size: 12px; color: #92978b; }
.ri4m .ds6 { font-size: 14px; }

/* ===== CTA：墨绿卡纸 ===== */
.ct6g { padding: 24px 0 96px; background: rgba(255,254,249,.6); }
.ct-cd {
    position: relative; overflow: hidden; text-align: center;
    background: linear-gradient(150deg,#242a23,#14180f);
    border-radius: 40px; padding: 86px 30px 82px;
    box-shadow: 0 50px 100px -42px rgba(15,22,15,.7);
}
.ct-cd::before {
    content: ""; position: absolute; width: 540px; height: 540px; border-radius: 50%;
    left: 50%; top: -320px; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(47,206,158,.32), transparent 66%);
}
.ct-dot { position: absolute; border-radius: 50%; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4); }
.d1 { width: 26px; height: 26px; left: 7%; top: 16%; background: linear-gradient(135deg,#ff7368,#e22018); }
.d2 { width: 19px; height: 19px; right: 9%; top: 22%; background: linear-gradient(135deg,#5cc6ff,#1294d8); }
.d3 { width: 22px; height: 22px; right: 15%; bottom: 20%; background: linear-gradient(135deg,#ecc96a,#cf9a2c); }
.ct-tt { position: relative; font-size: 38px; font-weight: 900; letter-spacing: 2px; color: #fff; margin-bottom: 16px; }
.ct-ds { position: relative; font-size: 16px; color: rgba(236,240,232,.68); max-width: 570px; margin: 0 auto 38px; }
.ct-go {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 800; color: #0d523c;
    background: linear-gradient(135deg,#7ce8c2,#2fce9e);
    border-radius: 999px; padding: 18px 46px;
    box-shadow: 0 24px 50px -14px rgba(47,206,158,.55), inset 0 1.5px 0 rgba(255,255,255,.6);
    transition: transform .22s, box-shadow .22s;
}
.ct-go:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 32px 60px -14px rgba(47,206,158,.7), inset 0 1.5px 0 rgba(255,255,255,.6); }
.ct-go i { font-size: 20px; }

/* ===== 页脚 ===== */
.ft2k { background: #efe8d4; padding: 46px 0; border-top: 1px solid rgba(35,39,33,.08); }
.ft-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ft-lg { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 800; color: #2c312a; }
.ft-lg img { width: 36px; height: 36px; border-radius: 11px; }
.ft-nv { display: flex; gap: 22px; flex-wrap: wrap; }
.ft-nv a { font-size: 14px; color: #6f7569; font-weight: 600; }
.ft-nv a:hover { color: #13a87e; }
.ft-cp { width: 100%; text-align: center; font-size: 13px; color: #969c8f; margin-top: 10px; }

/* ===== 入场 ===== */
.jo-in { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.jo-on { opacity: 1; transform: translateY(0); }

/* ===== 移动端 768 ===== */
@media (max-width: 768px) {
    .wr2j { max-width: calc(100% - 36px); }
    .hd-in { height: 66px; }
    .lg3k img { width: 40px; height: 40px; }
    .lg3k span { font-size: 17px; }
    .nv7m, .dl8q { display: none; }
    .mb7k { display: flex; }
    .hr3v { padding: 106px 0 60px; }
    .hr-in { flex-direction: column; gap: 30px; }
    h1 { font-size: 37px; }
    h1 em { margin: 10px 0 2px; padding: 1px 12px 5px; border-radius: 12px; }
    .hl-ds { font-size: 15px; }
    .hl-bn { flex-direction: column; align-items: stretch; }
    .hl-go { width: 100%; justify-content: center; font-size: 17px; padding: 16px 22px; }
    .hl-lk { justify-content: center; }
    .hl-cp li { font-size: 12.5px; padding: 8px 13px; }
    .bd-cv { width: 100%; max-width: 380px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
    .polar { position: relative; inset: auto; transform: none; }
    .pc-big { width: 250px; left: auto; top: auto; }
    .pc-big .polar-img { height: 340px; }
    .pc-s1, .pc-s2 { width: 210px; left: auto; right: auto; top: auto; }
    .pc-s1 .polar-img, .pc-s2 .polar-img { height: 270px; }
    .pc-big:hover, .pc-s1:hover, .pc-s2:hover { transform: translateY(-6px) scale(1.02); }
    .st-hot { position: absolute; top: -14px; left: 10px; width: 56px; height: 56px; font-size: 14px; }
    .st-hd { position: absolute; top: -10px; right: 12px; width: 50px; height: 50px; font-size: 12px; }
    .st-ep { position: static; margin: 0; width: auto; }
    .sw1s, .ab2q, .st9w, .nw3x, .fq7y, .rv9k { padding: 64px 0; }
    .ct6g { padding: 6px 0 64px; }
    .sec-t { font-size: 26px; margin-bottom: 38px; }
    .pw-grid { display: flex; overflow-x: auto; gap: 20px; padding: 10px 4px 24px; scroll-snap-type: x mandatory; }
    .pc4f { flex: 0 0 72%; scroll-snap-align: center; transform: none; }
    .pc4f.t1, .pc4f.t2, .pc4f.t3, .pc4f.t4 { transform: none; }
    .pi-img { height: 300px; }
    .ag6 { grid-template-columns: 1fr; gap: 15px; }
    .ad8g { padding: 26px 24px; }
    .ck-list { grid-template-columns: 1fr; gap: 28px; }
    .ck-list::before { display: none; }
    .ci5 { text-align: left; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
    .ck-no { margin: 0 0 14px; width: 64px; height: 64px; font-size: 17px; }
    .ng3 { grid-template-columns: 1fr; gap: 22px; }
    .fh5 { padding: 17px 18px; gap: 13px; }
    .fh5 b { font-size: 15px; }
    .fq-q { width: 38px; height: 38px; font-size: 17px; }
    .fb5 .ds6 { padding: 0 18px 20px; }
    .rv-ms { column-count: 1; }
    .ri4m { transform: none; }
    .ct-cd { border-radius: 30px; padding: 54px 22px 50px; }
    .ct-tt { font-size: 27px; }
    .ct-go { width: calc(100% - 20px); justify-content: center; font-size: 16.5px; padding: 17px 22px; }
    .ft-in { flex-direction: column; text-align: center; }
    .ft-nv { justify-content: center; gap: 14px; }
}
html{scroll-behavior:smooth}