html{
  /* 容器左右内边距。所有断点只改这一个变量，
     .zs-wp / .content 以及被清零内边距的行容器都跟着走。 */
  --zs-gutter: 40px;

  /* 全站字体：Inter（本地自托管的可变字体，见下方 @font-face）。
     后面的系统字体只作为字体加载失败或中日韩等非拉丁字符的兜底。 */
  --zs-font: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* 全站按钮统一渐变。任何按钮只用这两个变量，不要再写具体色值，
     这样调整品牌色只需改这里。 */
  --zs-btn-grad: linear-gradient(90deg, #2B7FFF 0%, #C31FD1 100%);
  --zs-btn-grad-hover: linear-gradient(90deg, #1668FF 0%, #A814B5 100%);
}

/* ==========================================================================
   Inter 可变字体（本地自托管）
   --------------------------------------------------------------------------
   用 Google Fonts 官方分发的 woff2 可变字体，一个文件覆盖 400~800 全部字重，
   放在本站 static/font/ 下，避免向 fonts.googleapis.com / fonts.gstatic.com
   发起第三方请求（少 2 次 DNS + TLS 握手，也不受第三方可用性影响）。
   拆成 latin / latin-ext 两个子集，浏览器按 unicode-range 按需下载：
   站内英文内容只会下载 latin（47 KB），latin-ext 通常不会被请求。
   font-display:swap 保证字体加载期间文字先用系统字体显示，不出现空白。
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../font/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../font/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*,*:before,*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}
body {
  margin:0;
  padding:0 0 0 0;
  font: 16px/1.5 var(--zs-font) !important;
  color:#333;
  background-color: #F6F6F6;
}
/* overflow-x 用 clip 而不是 hidden：hidden 会把 body 变成滚动容器，
   站内 .dla-toc / .lg-toc 的 position:sticky 会因此失效。clip 只裁切、
   不建立滚动容器，sticky 不受影响。这是下面 max-width 之外的第二道保险。 */
body {
    overflow-x: clip;
}
body::before,body::after {
    position: absolute;
    content: "";
    width: 573px;
    /* 这两层是装饰性的模糊光斑，绝对定位、不参与布局，但 573px 是死值：
       ::before 从 left:24px 起，占到 x=597，任何窄于 597px 的视口都会被它
       顶出横向滚动条，整页可以左右拖动，移动端看起来就像完全没做适配。
       用 max-width 限住即可：桌面 100vw-64 远大于 573，渲染结果一模一样；
       390px 手机上收到 326px，正好落在视口内。 */
    max-width: calc(100vw - 64px);
    height: 355px;
    background: linear-gradient(152deg, rgba(246, 246, 246, 0.2) 17.12%, rgba(5, 228, 242, 0.2) 105.91%);
    filter: blur(100px);
    left: 24px;
    top: 0;
    z-index: -1;
}
body::after {
    background: linear-gradient(152deg, rgba(246, 246, 246, 0.2) 17.12%, rgba(94, 53, 242, 0.2) 105.91%);
    left: auto;
    right: 40px;
}
select,textarea,button{
    font: 16px/1.5 var(--zs-font) !important;
}
/* 原来这里有 iconfont 和 Din 两套 @font-face。
   iconfont 整套字体（woff2 + woff + ttf）全站只用到一个字形——页脚订阅
   按钮的箭头，已换成内联 SVG；Din 的 .din 类在 28 个页面里零使用，
   而且 DINPro-Bold.otf 是 88 KB 的未压缩 OTF。两套一起去掉，
   每页少一个 6 KB 的字体请求，也省掉一次 FOIT 等待。 */
body.zs-home{
  background-color: #FFFF;
}
/* 内页：底色同首页为白，但页眉不做透明浮层。
   .zs-home 会把 .zs-header 变成 absolute + transparent，那是给首页深色 banner 用的；
   没有深色 banner 的内页套上它，导航白字会压在白底上直接看不见。 */
body.zs-page{
  background-color: #FFFF;
}
ul,li,dl,dd,dt{
  margin:0;
  padding:0;
  list-style-type:none;
}
h1,h2,h3,h4,h5,h6{
  margin:0;
  padding:0;
  font-weight: normal;
}
em,i{
    font-style: normal;
}
/* 媒体元素不允许超出容器。站内原来只给 img 清了 border，没有宽度上限，
   窄屏上任何一张比容器宽的图/内联 SVG 都会顶出横向滚动。
   height:auto 配 max-width 才能等比缩，否则 HTML 上写死的 height 会把图压扁。 */
img,
svg,
video,
canvas,
iframe,
embed,
object{
    max-width: 100%;
}
img,
video{
    height: auto;
}
img{
    border: 0;
}
/* 长 URL、邮箱、命令行参数这类不带空格的长串在窄屏会撑破容器。
   break-word 只在一行放不下时才切，正常文本的断行规则不变。 */
body{
    overflow-wrap: break-word;
}
/* body 上已有 overflow-x:clip，html 上再补一道：iOS Safari 在某些情况下
   只认根元素上的这一条。clip 不建立滚动容器，sticky 不受影响。 */
html{
    overflow-x: clip;
}
a,a:focus,a:hover,.btn:focus,li, li:focus, li:hover, input, input:focus, input:hover, textarea, textarea:focus, textarea:hover, select, select:focus, select:hover {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
a,a:link,a:active,a:visited {
  color:#000;
  text-decoration:none;
  outline: none;
}
a:hover {
  color:#0695FF;
  transition: all 0.35s;
  text-decoration:none !important;
}
textarea{
    resize: none;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
    color:#CCCCCC;
}
input::-moz-placeholder,textarea::-moz-placeholder{   /* Mozilla Firefox 19+ */
   color:#CCCCCC;
}
input:-moz-placeholder,textarea:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
   color:#CCCCCC;
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{    /* ie  */
   color:#CCCCCC;
}
/* 主体容器：内容宽度上限仍为 1600px（与原设计一致），
   但改为流式收缩，替代原来的 body{zoom} 缩放方案。
   max-width = 1600 + 左右各 40px 内边距，因此 ≥1680px 视口下
   内容区精确等于 1600px，视觉与原稿完全相同。
   左右内边距由 --zs-gutter 统一驱动，各断点只需改变量值。 */
.zs-wp{
  display: block;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding-left: var(--zs-gutter);
  padding-right: var(--zs-gutter);
}
/* 下面这些元素既是 .zs-wp，自身类里又有 padding:X 0 的简写，
   会把容器左右内边距清零，导致内部 ul{margin:0 -15px/-18px}
   的负外边距顶出视口产生横向滚动。
   用两个类名（特异性 0,2,0）把内边距补回来，
   这样无论 index.css / course.css 的加载顺序如何都能生效。 */
.zs-moban-list.zs-wp,
.blogs-list.zs-wp,
.product-list.zs-wp,
.compare-list.zs-wp,
.zs-filter.zs-wp,
.zs-news-list.zs-wp{
  padding-left: var(--zs-gutter);
  padding-right: var(--zs-gutter);
}
/*页眉 start*/
.zs-header {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    /* 80px 对齐参考站 hitpaw.com 的页眉高度（.header-inner / .nav-link 都是 5rem） */
    height: 80px;
    transition: all 0.35s;
    z-index: 99999;
    background: #000;
    background-size: 100% auto;
}
.zs-home .zs-header{
    position: absolute;
    background: transparent;
}
/* 滚动后吸顶：用纯黑而不是蓝紫渐变，页面内容压在下面时对比更干净 */
.zs-header.show {
    position: fixed;
    background: #000;
    box-shadow: 0 2px 12px 0 rgba(0,9,27,.35);
    transition: all 0.35s;
}
.zs-header .zs-wp{
    /* flow-root 让这一层自己建立 BFC，把 logo / nav / rightbox 三个浮动真正包住。
   只加 clearfix 是不够的：clearfix 只影响父容器的高度计算，浮动依旧留在
   根 BFC 里，页眉后面任何 overflow 不为 visible 的块（BFC 盒）都会主动
   避开它，被挤窄并右移。nav 的浮动下沿正好落在页眉高度上，所以受影响的
   只有紧贴页眉的那一个区块。flow-root 不裁切内容，下拉菜单是 absolute，
   不受影响。 */
display: flow-root;
    height: 80px;
    align-items: center;
}
/* logo / nav / rightbox 都是 float，而这一层是固定高度、不会自动包住它们。
   浮动一旦漏到文档流里，页眉后面任何建立 BFC 的块（overflow 不为 visible）
   都会主动避开它，被挤窄并右移。这里补一个 clearfix 把浮动收住。
   不用 overflow:hidden 收：那会把下拉菜单和语言浮层一起裁掉。 */
.zs-header .zs-wp::after{
    content: "";
    display: block;
    clear: both;
}
.zs-header .logo{
    float: left;
    width: auto;
    height: 35px;
    margin: 22px 0 23px 0;
}
/* width 必须是 auto。原来写 width:100% 配 height:100%，两个方向都被钉死，
   SVG 的宽高比就失效了：float 的收缩宽度按旧比例算出来，词标右端会被切掉，
   而且内容在 35px 盒子里居中后，文字基线和右侧导航（line-height:80px）也对不上。
   下面 767px 断点里的那条覆写本来就是 width:auto，这里跟它保持一致。 */
.zs-header .logo img{
    display: block;
    width: auto;
    height: 100%;
}
.zs-header .nav {
    float: left;
    display: flex;
    padding-left: 5%;
    width: 56%;
    flex-direction: row;
    justify-content: space-between;
}
.zs-header .nav li{
    position: relative;
    height: 80px;
}
/* 字号 16px / 字重 600 / 行高撑满整条页眉，与 hitpaw 的 .nav-link 一致 */
.zs-header .nav li a{
    display: block;
    padding: 0 0;
    font-size: 18px;
    color: #FFF;
    line-height: 80px;
    font-weight: 600;
    position: relative;
    /* "Supported sites" 带空格，而这一行的 line-height 就是页眉高度，
       一旦折行整条页眉会被顶高，所以禁止换行。 */
    white-space: nowrap;
}
.zs-header .nav li a:hover{
    color: #FFF;
}
.zs-header .nav li.cur a{
    color: #FFF;
    font-weight: bold;
}
.zs-header .nav li a:after {
    position: absolute;
    display: block;
    content: "";
    left: 50%;
    bottom: 16px;
    width: 0;
    height: 2px;
    background-color: #FFF;
    transition: all 0.35s;
}
.zs-header .nav li.cur a:after, .zs-header .nav li a:hover:after {
    width: 100%;
    margin-left: -50%;
    background-color: #FFF;
    bottom: 16px;
}
.zs-header li:hover .dropdown-menu{
    /*display: block;*/
}
.zs-header .dropdown-menu {
    position: absolute;
    top: 80px;
    left: 50%;
    z-index: 1000;
    display: none;
    float: left;
    width: auto;
    min-width: 115px;
    margin-left: -54px;
    padding: 10px;
    margin-top: -1px;
    font-size: 14px;
    text-align: left;
    list-style: none;
    border: none;
    white-space: nowrap;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.zs-header .dropdown-menu li{
    height: auto;
}
.zs-header .dropdown-menu:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: -8px;
    left: 45px;
}
.zs-header .dropdown-main-nav {
    width: 100%;
    line-height: 1.4;
}
.zs-header .dropdown-main-nav .dropdown-sub-item {
    padding: 0;
    float: left;
    width: 100%;
}
.zs-header .dropdown-main-nav .dropdown-sub-item>a {
    display: flex;
    width: 100%;
    padding: 10px 15px 8px 15px;
    line-height: 1.4;
    color: #333 !important;
    font-size: 15px;
    border-radius: 3px;
    font-weight: normal !important;
}
.zs-header .dropdown-main-nav .dropdown-sub-item>a:after {
    display: none;
}
.zs-header .dropdown-main-nav .dropdown-sub-item>a:hover {
    color: #e4362d;
    text-decoration: none;
    background-color: #f5f5f5;
}
.zs-header .rightbox{
    float: right;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 225px;
    margin-top: 20px;
    height: 40px;
    justify-content: flex-end;
}
.zs-header .rightbox .ico-contact{
    display: block;
}
.zs-header .rightbox .ico-contact a{
    display: block;
    width: 118px;
    height: 40px;
    line-height: 40px;
    color: #FFF;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    background: var(--zs-btn-grad);
    border-radius: 20px;
}
.zs-header .rightbox .ico-contact a:hover{
    background: var(--zs-btn-grad-hover);
}

/* --- 页眉里的语言下拉 ---
   从页脚移上来。触发器是"地球图标 + 当前语言缩写 + 箭头"，
   悬停向下展开，四列网格装 13 个语种。
   页眉 z-index 是 99999 且没有别的层叠上下文夹在中间，
   所以这里不会遇到页脚那种被 .zs-cta 盖住的问题。 */
.zs-header .hd-lang{
    position: relative;
    display: block;
    height: 40px;
}
.zs-header .hd-lang-btn{
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 20px;
    white-space: nowrap;
    transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.zs-header .hd-lang-btn:hover{
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .5);
    background-color: rgba(255, 255, 255, .08);
}
.zs-header .hd-lang-globe{
    flex: none;
    width: 17px;
    height: 17px;
}
.zs-header .hd-lang-arrow{
    flex: none;
    width: 14px;
    height: 14px;
    transition: transform .3s ease;
}
.zs-header .hd-lang:hover .hd-lang-arrow{
    transform: rotate(180deg);
}
.zs-header .hd-lang-box{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1200;
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    width: 420px;
    box-sizing: border-box;
    padding: 12px 10px;
    font-size: 13px;
    line-height: 2.2;
    text-align: left;
    white-space: nowrap;
    background-color: #1b1b24;
    border: 1px solid #34343f;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.zs-header .hd-lang:hover .hd-lang-box{
    display: grid;
}
/* 触发器与菜单之间那 10px 空隙补一段透明桥，避免鼠标穿过时菜单收起 */
.zs-header .hd-lang-box::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}
.zs-header .hd-lang-box::after{
    content: "";
    position: absolute;
    top: -8px;
    right: 26px;
    width: 14px;
    height: 14px;
    background: #1b1b24;
    border-left: 1px solid #34343f;
    border-top: 1px solid #34343f;
    transform: rotate(45deg);
}
.zs-header .hd-lang-box a{
    display: block;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 6px;
    color: #a5a1b0;
    transition: color .25s ease, background-color .25s ease;
}
.zs-header .hd-lang-box a:hover{
    color: #FFFFFF;
    background: var(--zs-btn-grad);
}
.icon-menu {
    display: none;
    position: absolute;
    right: 4%;
    top: 20px;
    width: 20px;
    height: 18px;
    background: url(../img/icon-menu.png) no-repeat center center;
    background-size: 100% 100%;
}
/*页眉 end*/
/*subbanner*/
.zs-subbanner{
    display: block;
    width: 100%;
    height: 660px;
    background: url(../img/bg-subbanner.jpg) no-repeat center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.content{
    display: block;
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding-left: var(--zs-gutter);
    padding-right: var(--zs-gutter);
    padding-bottom: 30px;
}
.path{
    display: block;
    width: auto;
    padding: 10px 0;
    line-height: 54px;
    font-size: 16px;
    position: relative;
    z-index: 20;
    color: #666;
}
.path .zs-wp{
  margin: 0 auto;
}
.path span {
    font-family: 宋体;
    font-size: 16px;
    padding: 0px 10px;
    color: #999;
    font-weight: bold;
}
/*箭头*/
.h2title{
    display: flex;
    justify-content: space-between;
    position: relative;
}
/* 带 View All 按钮的列表区标题。比 .zs-*-head 的 46px 区块标题低半级，
   但字重同为 700，属于同一梯队。 */
.h2title .title{
    display: block;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -.02em;
    background: linear-gradient(45deg, #0099FF 0%, #CC00FF 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.h2title .more{
    display: block;
}
.h2title .more a{
    display: block;
    width: 210px;
    height: 55px;
    line-height: 53px;
    color: #FFF;
    font-size: 17px;
    font-weight: 600;
    border-radius: 28px;
    margin: 0 0 0 0;
    text-align: center;
    background: var(--zs-btn-grad);
}
.h2title .more a:hover{
    background: var(--zs-btn-grad-hover);
}
/*页脚 start*/
/* 纯黑通栏，不再套背景图。布局：左列（logo / 社交 / 语言 / 订阅）+ 右侧三列链接，
   下面是居中的安全认证徽标，最后是保留原样的版权行（分隔线 + 左版权右链接）。 */
.zs-footer{
    display: block;
    position: relative;
    width: 100%;
    /* 顶部内边距比原来多 10px（56 -> 66），logo 上方的留白同步加大 */
    padding: 66px 0 22px 0;
    margin-top: 70px;
    border-radius: 4.5rem 4.5rem 0 0;
    background: #000;
}
.zs-footer .foot-box{
    display: flex;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 46px;
}
/* 左列定宽 420px：订阅输入框从 260px 加宽到 390px（+50%），
   左列按它取整留出余量，其余元素（邮箱/地址/支付栅格/语言下拉）都以 390px 对齐。
   右侧四列 225×4 + 40×3 = 1020px，加上左列 420 与列间 40，
   合计 1480px，仍在 1520px 的内容区里，不挤压 4 列布局。 */
.zs-footer .foot-box .foot-left{
    flex: 0 0 420px;
    width: 420px;
}
.zs-footer .foot-logo{
    width: auto;
    height: 39px;
}
.zs-footer .foot-logo img{
    display: block;
    width: auto;
    height: 100%;
}
.zs-footer .foot-nav{
    font-size: 15px;
}
/* 链接列：4 列定宽 + 固定间距，整组靠右。
   列宽 225px 是按最长的一条（AI Earth Zoom Video Generator）在 14px 字号下
   不触发 nowrap 溢出定的；靠右之后第一列落在容器 34% 附近，与参考站一致。 */
.zs-footer .foot-nav{
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 40px;
}
.zs-footer .foot-nav li{
    flex: 0 0 auto;
    display: block;
    width: auto;
    min-width: 225px;
    height: auto;
    text-align: left;
}
/* 第 4 列里 About 之后还接一个 Support 小节，给第二个标题留出分节间距 */
.zs-footer .foot-nav li h3.nav-sub{
    margin-top: 28px;
}
.zs-footer .foot-nav li:first-child{
    padding-left: 0;
}
.zs-footer .foot-nav li h3{
    display: block;
    font-weight: bold;
    margin-bottom: 12px;
}
.zs-footer .foot-nav li h3 a{
    line-height: 1;
    font-size: 18px;
    color: #eaeaea;
}
.zs-footer .foot-nav li a{
    display: block;
    line-height: 160%;
    font-size: 14px;
    padding: 7px 0;
    white-space: nowrap;
    color: #999;
}
.zs-footer .foot-nav li a:hover{
    color: #FFFFFF;
    text-decoration: underline !important;
}
/* 免费升级会员的入口卡。宽度跟订阅框对齐，
   渐变底在纯黑页脚上比描边按钮显眼得多。 */
/* 底色不用「品牌渐变压低透明度」那一套：在纯黑上叠 30% 的蓝和洋红，
   混出来是一片发灰的深蓝到暗红，很脏。改成实底深紫 + 两角柔光，
   顶边再补一道内高光，颜色干净也更有质感。 */
.zs-footer .foot-vip{
display: flex;
align-items: center;
gap: 14px;
width: 390px;
margin-top: 26px;
padding: 16px 18px;
border-radius: 16px;
border: 1px solid rgba(167, 139, 250, .38);
background-color: #2a1054;
background-image:
radial-gradient(120% 150% at 0% 0%, rgba(43, 127, 255, .5) 0%, rgba(43, 127, 255, 0) 56%),
radial-gradient(120% 150% at 100% 100%, rgba(195, 31, 209, .46) 0%, rgba(195, 31, 209, 0) 58%),
linear-gradient(100deg, #26124c 0%, #371566 54%, #45135c 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 26px -16px rgba(139, 92, 246, .55);
transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.zs-footer .foot-vip:hover{
border-color: rgba(196, 181, 253, .95);
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 38px -16px rgba(139, 92, 246, .8);
}
.zs-footer .foot-vip .fv-ico{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	color: #FFFFFF;
	background: var(--zs-btn-grad);
}
.zs-footer .foot-vip .fv-ico svg{
	display: block;
	width: 21px;
	height: 21px;
}
.zs-footer .foot-vip .fv-text{
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}
.zs-footer .foot-vip .fv-t{
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: #FFFFFF;
}
.zs-footer .foot-vip .fv-s{
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .66);
}
.zs-footer .foot-vip .fv-arrow{
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	color: rgba(255, 255, 255, .8);
	transition: transform .3s ease;
}
.zs-footer .foot-vip:hover .fv-arrow{
	transform: translateX(3px);
}

/* 只给屏幕阅读器的标签，视觉上不占位。
   保持全局类而不是限定在 .zs-footer 下：页脚订阅框以外的表单
   （如 contact.html）也要用，收窄作用域会让 label 直接显示出来。 */
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* 版权行落在卡内底部。分隔线画在内层 .zs-wp 上而不是这一层：
   这一层是通栏的，border 会一路顶到视口两侧、穿出卡片边缘。 */
.zs-footer .foot-copyright{
    display: block;
    font-size: 14px;
    color: #8b8698;
    padding: 0;
    line-height: 1.45;
    border-top: 0;
}
.zs-footer .foot-copyright .zs-wp{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.zs-footer .foot-copyright a{
    color: #999;
}
.zs-footer .foot-copyright .link a{
    margin: 0 8px;
}
.zs-footer .foot-copyright a:hover{
    text-decoration: underline !important;
}
/* 左列内部纵向节奏：logo -> 社交 -> 联系方式 -> 订阅 -> 语言 -> 支付方式
   logo 与社交之间比原来多留 10px（26 -> 36）。 */
.zs-footer .foot-share{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 9px;
	padding-top: 0;
	margin-top: 36px;
	justify-content: flex-start;
}
/* 八个平台挤在一行里，所以图标控制在 24px、间距用 gap 统一给。
   全部改成 CSS mask + 内联 SVG：原来前五个是 PNG 背景图，
   后加的几个没有对应素材，混用会一眼看出粗细和留白不一致。
   mask 方案只描述形状，颜色由 background-color 给，也便于 hover 变色。 */
.zs-footer .foot-share li{
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	padding-top: 0;
	transition: transform .35s ease;
}
.zs-footer .foot-share li:hover{
	transform: scale(1.18);
}
.zs-footer .foot-share li a{
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, .78);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transition: background-color .3s ease;
}
.zs-footer .foot-share li a:hover{
	background-color: #FFFFFF;
}
.icon-linkedin a,
.icon-linkedin .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.6 3.5a2.1 2.1 0 1 1 0 4.2 2.1 2.1 0 0 1 0-4.2M2.7 9.3h3.8V21H2.7zm6.2 0h3.6v1.6h.1c.5-.9 1.7-1.9 3.5-1.9 2.7 0 3.9 1.7 3.9 4.6V21h-3.8v-6.3c0-1.5-.5-2.4-1.8-2.4-1.1 0-1.7.7-1.9 1.5-.1.3-.1.6-.1 1V21H8.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.6 3.5a2.1 2.1 0 1 1 0 4.2 2.1 2.1 0 0 1 0-4.2M2.7 9.3h3.8V21H2.7zm6.2 0h3.6v1.6h.1c.5-.9 1.7-1.9 3.5-1.9 2.7 0 3.9 1.7 3.9 4.6V21h-3.8v-6.3c0-1.5-.5-2.4-1.8-2.4-1.1 0-1.7.7-1.9 1.5-.1.3-.1.6-.1 1V21H8.9z'/%3E%3C/svg%3E");
}
/* X（原 Twitter）：两条交叉的粗斜杠 */
.icon-x a,
.icon-x .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.53 3h3.2l-6.99 7.99L21.9 21h-6.06l-4.75-5.7L4.6 21H1.4l7.5-8.57L1.7 3h6.2l4.4 5.28zm-1.1 16.1h1.77L6.62 4.8H4.72z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.53 3h3.2l-6.99 7.99L21.9 21h-6.06l-4.75-5.7L4.6 21H1.4l7.5-8.57L1.7 3h6.2l4.4 5.28zm-1.1 16.1h1.77L6.62 4.8H4.72z'/%3E%3C/svg%3E");
}
/* 微信视频号：对话气泡 + 播放三角。视频号是微信体系里的视频平台，
   和页脚里的微信公众号、小红书一样是按官方标识特征描的简笔轮廓，
   官方没有单色线性素材，混用彩色 PNG 会和这一排对不上。 */
.icon-channels a,
.icon-channels .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3.2c-4.9 0-8.9 3.4-8.9 7.7 0 2.5 1.4 4.7 3.5 6.1l-.9 3.4 3.6-1.7c.9.2 1.8.3 2.7.3 4.9 0 8.9-3.4 8.9-7.7S16.9 3.2 12 3.2m0 1.9c3.9 0 7 2.6 7 5.8s-3.1 5.8-7 5.8c-.8 0-1.6-.1-2.4-.3l-.5-.2-1.5.7.4-1.4-.6-.4C5.7 14.5 5 12.9 5 10.9c0-3.2 3.1-5.8 7-5.8m-1.4 2.9v5.8l4.6-2.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3.2c-4.9 0-8.9 3.4-8.9 7.7 0 2.5 1.4 4.7 3.5 6.1l-.9 3.4 3.6-1.7c.9.2 1.8.3 2.7.3 4.9 0 8.9-3.4 8.9-7.7S16.9 3.2 12 3.2m0 1.9c3.9 0 7 2.6 7 5.8s-3.1 5.8-7 5.8c-.8 0-1.6-.1-2.4-.3l-.5-.2-1.5.7.4-1.4-.6-.4C5.7 14.5 5 12.9 5 10.9c0-3.2 3.1-5.8 7-5.8m-1.4 2.9v5.8l4.6-2.9z'/%3E%3C/svg%3E");
}
.icon-youtube a,
.icon-youtube .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.6 7.2c-.2-1-.9-1.7-1.8-1.9C18 5 12 5 12 5s-6 0-7.8.3c-.9.2-1.6.9-1.8 1.9C2 9 2 12 2 12s0 3 .4 4.8c.2 1 .9 1.7 1.8 1.9C6 19 12 19 12 19s6 0 7.8-.3c.9-.2 1.6-.9 1.8-1.9.4-1.8.4-4.8.4-4.8s0-3-.4-4.8M10 15.2V8.8l5.2 3.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21.6 7.2c-.2-1-.9-1.7-1.8-1.9C18 5 12 5 12 5s-6 0-7.8.3c-.9.2-1.6.9-1.8 1.9C2 9 2 12 2 12s0 3 .4 4.8c.2 1 .9 1.7 1.8 1.9C6 19 12 19 12 19s6 0 7.8-.3c.9-.2 1.6-.9 1.8-1.9.4-1.8.4-4.8.4-4.8s0-3-.4-4.8M10 15.2V8.8l5.2 3.2z'/%3E%3C/svg%3E");
}
.icon-instagram a,
.icon-instagram .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2 0 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2m0 1.8c-3.1 0-3.5 0-4.7.1-.9 0-1.4.2-1.7.3-.4.2-.7.4-1 .6-.3.3-.5.6-.6 1-.1.3-.3.8-.3 1.7-.1 1.2-.1 1.6-.1 4.7s0 3.5.1 4.7c0 .9.2 1.4.3 1.7.2.4.4.7.6 1 .3.3.6.5 1 .6.3.1.8.3 1.7.3 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c.9 0 1.4-.2 1.7-.3.4-.2.7-.4 1-.6.3-.3.5-.6.6-1 .1-.3.3-.8.3-1.7.1-1.2.1-1.6.1-4.7s0-3.5-.1-4.7c0-.9-.2-1.4-.3-1.7-.2-.4-.4-.7-.6-1-.3-.3-.6-.5-1-.6-.3-.1-.8-.3-1.7-.3-1.2-.1-1.6-.1-4.7-.1m0 3.1a5 5 0 1 1 0 10 5 5 0 0 1 0-10m0 1.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4m5.2-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2 0 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2m0 1.8c-3.1 0-3.5 0-4.7.1-.9 0-1.4.2-1.7.3-.4.2-.7.4-1 .6-.3.3-.5.6-.6 1-.1.3-.3.8-.3 1.7-.1 1.2-.1 1.6-.1 4.7s0 3.5.1 4.7c0 .9.2 1.4.3 1.7.2.4.4.7.6 1 .3.3.6.5 1 .6.3.1.8.3 1.7.3 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c.9 0 1.4-.2 1.7-.3.4-.2.7-.4 1-.6.3-.3.5-.6.6-1 .1-.3.3-.8.3-1.7.1-1.2.1-1.6.1-4.7s0-3.5-.1-4.7c0-.9-.2-1.4-.3-1.7-.2-.4-.4-.7-.6-1-.3-.3-.6-.5-1-.6-.3-.1-.8-.3-1.7-.3-1.2-.1-1.6-.1-4.7-.1m0 3.1a5 5 0 1 1 0 10 5 5 0 0 1 0-10m0 1.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4m5.2-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4'/%3E%3C/svg%3E");
}
/* 微信公众号：两个重叠的对话气泡 */
.icon-wechat a,
.icon-wechat .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.9 3.2C5 3.2 1.9 5.9 1.9 9.2c0 1.9 1 3.6 2.7 4.7l-.8 2.4 2.7-1.4c.7.2 1.4.3 2.1.3h.5a5.4 5.4 0 0 1-.1-1.1c0-3.1 3-5.6 6.8-5.6h.6c-.7-2.9-3.9-5.3-8.1-5.3zM6.6 6.4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4.7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM15.8 10c-3.3 0-5.9 2.2-5.9 4.8s2.6 4.8 5.9 4.8c.6 0 1.3-.1 1.9-.3l2.3 1.2-.6-2c1.4-.9 2.4-2.2 2.4-3.7 0-2.6-2.7-4.8-6-4.8zm-2 3a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8zm4 0a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.9 3.2C5 3.2 1.9 5.9 1.9 9.2c0 1.9 1 3.6 2.7 4.7l-.8 2.4 2.7-1.4c.7.2 1.4.3 2.1.3h.5a5.4 5.4 0 0 1-.1-1.1c0-3.1 3-5.6 6.8-5.6h.6c-.7-2.9-3.9-5.3-8.1-5.3zM6.6 6.4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm4.7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM15.8 10c-3.3 0-5.9 2.2-5.9 4.8s2.6 4.8 5.9 4.8c.6 0 1.3-.1 1.9-.3l2.3 1.2-.6-2c1.4-.9 2.4-2.2 2.4-3.7 0-2.6-2.7-4.8-6-4.8zm-2 3a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8zm4 0a.9.9 0 1 1 0 1.8.9.9 0 0 1 0-1.8z'/%3E%3C/svg%3E");
}
/* TikTok 与抖音是同一套音符标识，用 title/aria-label 区分 */
.icon-tiktok a,
.icon-tiktok .abso-ico,
.icon-douyin a,
.icon-douyin .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.4 2h-3.1v13.1a2.4 2.4 0 1 1-2.4-2.4c.3 0 .5 0 .8.1V9.5a5.6 5.6 0 1 0 4.8 5.6V8.4a5.9 5.9 0 0 0 3.5 1.2V6.4a3.5 3.5 0 0 1-3.6-3.5V2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.4 2h-3.1v13.1a2.4 2.4 0 1 1-2.4-2.4c.3 0 .5 0 .8.1V9.5a5.6 5.6 0 1 0 4.8 5.6V8.4a5.9 5.9 0 0 0 3.5 1.2V6.4a3.5 3.5 0 0 1-3.6-3.5V2z'/%3E%3C/svg%3E");
}
/* 抖音图标略作区分：音符加一条尾巴 */
.icon-douyin a,
.icon-douyin .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.3 2h-2.8v12.6a2.2 2.2 0 1 1-2.2-2.2c.2 0 .5 0 .7.1V9.6a5.2 5.2 0 1 0 4.5 5.1V8.8a5.5 5.5 0 0 0 3.3 1.1V7a3.3 3.3 0 0 1-3.4-3.3V2z'/%3E%3Ccircle fill='%23000' cx='5.2' cy='18.6' r='2.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.3 2h-2.8v12.6a2.2 2.2 0 1 1-2.2-2.2c.2 0 .5 0 .7.1V9.6a5.2 5.2 0 1 0 4.5 5.1V8.8a5.5 5.5 0 0 0 3.3 1.1V7a3.3 3.3 0 0 1-3.4-3.3V2z'/%3E%3Ccircle fill='%23000' cx='5.2' cy='18.6' r='2.2'/%3E%3C/svg%3E");
}
/* B 站：显示器加两根天线 */
.icon-bilibili a,
.icon-bilibili .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.7 2.3 9.2 4.8h5.6l2.5-2.5 1.3 1.3-1.2 1.2H19a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3h1.6L5.4 3.6zM5 6.6a1.2 1.2 0 0 0-1.2 1.2v8A1.2 1.2 0 0 0 5 17h14a1.2 1.2 0 0 0 1.2-1.2v-8A1.2 1.2 0 0 0 19 6.6zm2.6 2.7 1.5 1.1v2.9l-1.5-1.1zm8.8 0v2.9l-1.5 1.1v-2.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.7 2.3 9.2 4.8h5.6l2.5-2.5 1.3 1.3-1.2 1.2H19a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3h1.6L5.4 3.6zM5 6.6a1.2 1.2 0 0 0-1.2 1.2v8A1.2 1.2 0 0 0 5 17h14a1.2 1.2 0 0 0 1.2-1.2v-8A1.2 1.2 0 0 0 19 6.6zm2.6 2.7 1.5 1.1v2.9l-1.5-1.1zm8.8 0v2.9l-1.5 1.1v-2.9z'/%3E%3C/svg%3E");
}
/* 小红书：摊开的书本轮廓（原来那版方框加简笔看起来像字母 HL，辨识度太差） */
.icon-xiaohongshu a,
.icon-xiaohongshu .abso-ico{
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5.4A10.4 10.4 0 0 0 5.4 3.1c-.7 0-1.3 0-2 .2v14.4c.7-.1 1.3-.2 2-.2 2.5 0 4.8.8 6.6 2.2a10.4 10.4 0 0 1 6.6-2.2c.7 0 1.3 0 2 .2V3.3c-.7-.1-1.3-.2-2-.2A10.4 10.4 0 0 0 12 5.4zm-1 12.2a12 12 0 0 0-5.6-1.8h-.2V5.1h.2c2 0 3.9.6 5.6 1.6zm2 0V6.7a10.5 10.5 0 0 1 5.6-1.6h.2v10.7h-.2A12 12 0 0 0 13 17.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 5.4A10.4 10.4 0 0 0 5.4 3.1c-.7 0-1.3 0-2 .2v14.4c.7-.1 1.3-.2 2-.2 2.5 0 4.8.8 6.6 2.2a10.4 10.4 0 0 1 6.6-2.2c.7 0 1.3 0 2 .2V3.3c-.7-.1-1.3-.2-2-.2A10.4 10.4 0 0 0 12 5.4zm-1 12.2a12 12 0 0 0-5.6-1.8h-.2V5.1h.2c2 0 3.9.6 5.6 1.6zm2 0V6.7a10.5 10.5 0 0 1 5.6-1.6h.2v10.7h-.2A12 12 0 0 0 13 17.6z'/%3E%3C/svg%3E");
}

/* --- 联系方式：Email 行 + 地址行，排在订阅框上方 --- */
.zs-footer .foot-contact{
	display: block;
	margin-top: 28px;
}
.zs-footer .foot-contact li{
	display: block;
	margin-bottom: 14px;
}
.zs-footer .foot-contact li:last-child{
	margin-bottom: 0;
}
/* 与 "Join Our Newsletter:" 同规格：17px / 600 / #eaeaea */
.zs-footer .foot-contact .fc-label{
	display: block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #eaeaea;
	margin-bottom: 6px;
}
.zs-footer .foot-contact a,
.zs-footer .foot-contact address{
	display: block;
	max-width: 390px;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.65;
	color: #a5a1b0;
	transition: color .3s ease;
}
.zs-footer .foot-contact a:hover{
	color: #FFFFFF;
}
/* "Spot stale data or a dead tool? Tell us" 要在同一行。
   上面那条给 .foot-contact a 设了 display:block，<address> 里的链接因此被顶到
   第二行——这里把它扳回 inline，并用品牌紫和 600 字重把它从灰色正文里挑出来。
   min-height 保住原来两行的高度，避免右边几列跟着上移错位。
   注意必须限定到 .fc-addr：邮政地址（.fc-loc）本来就是两行，
   套上 nowrap 会被挤成一行顶出横向滚动。 */
.zs-footer .foot-contact .fc-addr address{
	min-height: 50px;
	max-width: none;
	white-space: nowrap;
}
.zs-footer .foot-contact address a{
	display: inline;
	max-width: none;
	font-weight: 600;
	color: #b79bff;
}
.zs-footer .foot-contact address a:hover{
	color: #FFFFFF;
	text-decoration: underline !important;
}
/* 邮政地址：两行正常折行，行距比默认紧一点，读起来是一块而不是两条 */
.zs-footer .foot-contact .fc-loc address{
	max-width: 320px;
	white-space: normal;
	line-height: 1.6;
}
/* 订阅块已移除：Fixes & submissions 下移到原订阅块的位置，左列总高度不变。
   139px = 上一行原有间距 14 + 原订阅块占高 125（46 外边距 + 17 标题 + 14 间距 + 48 输入框）；
   写 139 而不是 125，是因为它会和上一个 li 的 margin-bottom:14px 折叠。
   仅桌面端左右分栏时需要；≤1320px 左列独占一行，不必补高。 */
@media only screen and (min-width:1321px){
	.zs-footer .foot-contact .fc-addr{
		margin-top: 139px;
	}
}
/* 窄屏里 Fixes 那一行放不下，允许折行，min-height 也不再需要 */
@media only screen and (max-width:767px){
	.zs-footer .foot-contact .fc-addr address{
		min-height: 0;
		white-space: normal;
	}
}

/* 支付方式徽标已从页脚移除；语言切换移到了页眉右上角，见上面的 .zs-header .hd-lang */
/*页脚 end*/

/*页码*/
.zs-pages {
    padding: 30px 0 20px 0;
    display: flex;
    justify-content: center;
}
/*现在位置*/
.zs-path{
    margin-top: 25px;
    color: #808080;
}
.icon-close{
    display: none;
}
/* ==========================================================================
   自适应断点
   --------------------------------------------------------------------------
   原方案用 body{zoom:0.9/0.8/0.66} 整体缩放 1600px 布局来"适配"，问题是：
     1) zoom 会让文字与边框渲染发虚，并造成点击热区与视觉位置错位；
     2) 768~1600px 之间没有任何真实断点，平板/笔记本只是被缩小的桌面版；
     3) zoom 非标准属性，Firefox 早期版本不支持，表现不一致。
   现改为真实的流式布局 + 逐级断点：1600 / 1440 / 1280 / 1024 / 900 / 768
   / 640 / 480，覆盖桌面、笔记本、平板、手机。
   ========================================================================== */

/* --- 大桌面 1441px ~ 1680px：容器开始收缩，内边距同步减小 --- */
@media screen and (max-width: 1680px) {
    html {
        --zs-gutter: 32px;
    }
}

/* --- 笔记本 1281px ~ 1440px --- */
@media screen and (max-width: 1440px) {
    html {
        --zs-gutter: 28px;
    }
    .zs-header .nav {
        padding-left: 3%;
        width: 60%;
    }
    /* 字号在桌面各档都保持 16px / 600，与 hitpaw 一致；宽度不够时靠 .nav 的
       百分比宽度和 padding-left 让位，不再降字号 */
    .zs-header .nav li a {
        font-size: 18px;
    }
    .zs-header .rightbox {
        gap: 14px;
    }
    .zs-header .rightbox .ico-contact a {
        width: 110px;
        font-size: 14px;
    }
    .zs-header .hd-lang-btn {
        padding: 0 10px;
        font-size: 14px;
    }
    .h2title .title {
        font-size: 34px;
    }
    .h2title .more a {
        width: 180px;
        height: 50px;
        line-height: 48px;
        font-size: 16px;
    }
}

/* --- 小笔记本 1025px ~ 1280px --- */
@media screen and (max-width: 1280px) {
    html {
        --zs-gutter: 24px;
    }
    /* 词标 InYouTubeDownloader 比原来的 GrabHub 长得多，页眉要多留宽度给 logo。
       原来 64% + 1.5% 内边距只给 logo 剩约 211px，而它需要 230px，
       1201-1280 这段会把导航挤出去。收到 56% 后 logo 有约 316px 可用。
       .nav 是 space-between，收窄只是让菜单项靠得更紧，7 项本身只要约 414px。 */
    .zs-header .nav {
        padding-left: 1%;
        width: 56%;
    }
    .zs-header .nav li a {
        font-size: 17px;
    }
    .zs-header .rightbox {
        min-width: 0;
        gap: 10px;
    }
    .zs-header .rightbox .ico-contact a {
        width: 102px;
        font-size: 14px;
    }
    .zs-header .hd-lang-btn {
        padding: 0 9px;
        font-size: 13px;
    }
    .zs-header .hd-lang-globe {
        width: 15px;
        height: 15px;
    }
    .zs-header .hd-lang-box {
        width: 360px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* 1440 视口内容区 1376px：四列 218×4 + 30×3 = 962px，
       留给左列 374px，仍能放下 350px 的输入框和一行 10 个社媒图标 */
    .zs-footer .foot-box .foot-left {
        flex: 0 0 374px;
        width: 374px;
    }
    .zs-footer .foot-share {
        gap: 9px;
    }
    .zs-footer .foot-nav {
        gap: 30px;
    }
    .zs-footer .foot-nav li {
        min-width: 218px;
    }
}

/* --- ≤1320px：左列 + 四列并排已经放不下（最长条目要 225px 且不能换行，
       挤压的话会顶出横向滚动）。把左列放成独占一行，四列移到下一行，
       这样四列仍是完整的一排，不会出现 3+1 的断行。 --- */
@media screen and (max-width: 1320px) {
    .zs-footer .foot-box {
        flex-wrap: wrap;
    }
    .zs-footer .foot-box .foot-left {
        flex: 0 0 100%;
        width: 100%;
    }
    .zs-footer .foot-nav {
        flex: 0 0 100%;
        width: 100%;
        justify-content: space-between;
        padding-top: 36px;
        gap: 26px 30px;
    }
}

/* --- 平板 / 小笔记本 ≤1200px：主导航切换为抽屉式 ---
   原稿只在 ≤767px 才出汉堡菜单。实测 1024~1200px 时
   logo(约184px) + 7 个导航项(约500px) + 右侧语言/CTA(约244px)
   会超出容器宽度并互相重叠，因此把抽屉断点上移到 1200px。 */
@media screen and (max-width: 1200px) {
    .zs-home .zs-header {
        position: relative;
        background: #000;
    }
    .zs-header .nav {
        display: none;
        position: absolute;
        left: 0;
        top: 80px;
        width: 100%;
        max-height: calc(100vh - 80px);
        overflow: auto;
        padding: 24px 20px 32px 20px;
        flex-direction: column;
        flex-wrap: nowrap;
        background-color: #1d1d20;
    }
    .zs-header .nav li {
        height: auto;
        padding: 0;
        margin-bottom: 6px;
    }
    .zs-header .nav li a {
        display: block;
        font-size: 18px;
        line-height: 46px;
        padding: 0;
    }
    .zs-header .nav li a:after,
    .zs-header .nav li.cur a:after,
    .zs-header .nav li a:hover:after {
        display: none;
    }
    .zs-header .dropdown-menu {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        float: none;
        width: auto;
        min-width: 100%;
        margin: 0 0 0 14px;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    .zs-header .dropdown-menu:after {
        display: none;
    }
    .zs-header .dropdown-menu .dropdown-main-nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .zs-header .dropdown-main-nav .dropdown-sub-item {
        float: none;
        width: auto;
    }
    .zs-header .dropdown-main-nav .dropdown-sub-item > a {
        width: auto;
        padding: 0 18px 0 0;
        font-size: 14px;
        line-height: 2;
        color: #FFF !important;
    }
    .zs-header .rightbox {
        position: static;
        display: flex;
        float: right;
        min-width: 0;
        margin-top: 15px;
        margin-right: 46px;
        justify-content: flex-end;
    }
    .icon-menu {
        display: block;
        top: 26px;
    }
    .icon-menu.show {
        background: url(../img/icon-close.png) no-repeat center center;
        background-size: auto 20px;
    }
    /* 页脚：三栏（简介 + 导航 50% + 订阅 300px）在 1024~1200px 装不下，
       会顶出约 28px 横向滚动。此处与页眉抽屉同一断点改为换行堆叠。 */
    .zs-footer {
        border-radius: 2.5rem 2.5rem 0 0;
    }
    .zs-footer .foot-box {
        flex-wrap: wrap;
    }
    .zs-footer .foot-box .foot-left {
        flex: 0 0 100%;
        width: 100%;
    }
    .zs-footer .foot-nav {
        flex: 1 1 auto;
        max-width: none;
        width: auto;
        margin-left: 0;
        padding-top: 32px;
        justify-content: flex-start;
        gap: 40px;
    }
}

/* --- 平板 768px ~ 1023px：通用排版收敛 --- */
@media screen and (max-width: 1023px) {
    html {
        --zs-gutter: 20px;
    }
    .h2title .title {
        font-size: 29px;
    }
    .h2title .more a {
        width: 150px;
        height: 44px;
        line-height: 42px;
        font-size: 15px;
    }
}

/* --- 大屏手机 / 竖屏平板 641px ~ 900px --- */
@media screen and (max-width: 900px) {
    .zs-footer .foot-nav {
        flex: 0 0 100%;
        width: 100%;
        flex-wrap: wrap;
        gap: 24px 40px;
    }
}

/*Mobile v1*/
@media only screen and (max-width:767px){
/* 13px 继承给未显式设字号的文本偏小，Lighthouse 的 legible-font-sizes 会挑。
   提到 14px。!important 是被迫的：上面 base 的 body{font:...!important} 简写
   会连带把 font-size 也标成 important，不加就压不过去。 */
body {
    font-size: 14px !important;
    padding-top: 55px;
}
body::before, body::after {
    width: 100%;
    height: 280px;
    left: 0;
}
.zs-home .zs-header {
    position: absolute;
    background: #000;
}
.zs-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 55px;
  padding-bottom: 0;
}
.zs-header .zs-wp {
  height: 55px;
}
.zs-header .logo {
  width: auto;
  height: 33px;
  margin: 12px 0 10px 0;
}
.zs-header .logo img {
  display: block;
  width: auto;
  height: 100%;
}
.zs-header .nav {
  display: none;
  position: absolute;
  left: 0;
  top: 55px;
  width: 100%;
  height: 94vh;
  overflow: auto;
  padding: 30px 4% 30px 4%;
  flex-direction: column;
  flex-wrap: nowrap;
  background-color: #333;
}
.zs-header .nav li {
  padding: 0px 20px;
  position: relative;
  height: auto;
  margin-bottom: 10px;
}
.zs-header .nav li a {
  font-size: 18px;
  padding: 0;
  line-height: 45px;
}
.zs-header .nav li a:after{
  display: none;
}
.zs-header .nav li.cur a:after, .zs-header .nav li a:hover:after {
  display: none;
  width: 30px;
  left: 0;
  margin-left: 0;
  bottom: 0;
}
.zs-header .dropdown-menu:after{
    display: none;
}
.zs-header .dropdown-menu {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  float: none;
  width: auto;
  min-width: 100%;
  margin-left: 0;
  padding: 0;
  font-size: 14px;
  transform: translate(0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: transparent;
}
.zs-header .dropdown-menu .dropdown-main-nav{
  padding: 0 0;
}
.zs-header .dropdown-menu .dropdown-main-nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.zs-header .dropdown-main-nav .dropdown-sub-item {
  padding: 0;
  float: none;
  width: auto;
}
.zs-header .dropdown-main-nav .dropdown-sub-item>a {
  display: flex;
  justify-content: center;
  width: auto;
  padding: 0 18px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #FFF !important;
}
/* 抽屉里的右侧区：语言切换和 CTA 竖排居中。
   语言菜单在这里改成两列，并且不再绝对定位——抽屉本身可滚动，
   浮层式的定位在小屏上会跑到视口外。 */
.zs-header .rightbox {
    position: absolute;
    top: 74vh;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    justify-content: center;
    float: none;
}
.zs-header .rightbox.show{
    display: flex;
}
.zs-header .hd-lang{
    height: auto;
}
.zs-header .hd-lang-box{
    position: static;
    width: 260px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
    box-shadow: none;
}
.zs-header .hd-lang-box::after{
    display: none;
}
.icon-menu {
  display: block;
}
.icon-menu.show {
  background: url(../img/icon-close.png) no-repeat center center;
  background-size: auto 20px;
}
html {
    --zs-gutter: 4%;
}
.zs-wp {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
.path {
    line-height: 1.6;
    font-size: 15px;
}
.h2title .title {
    font-size: 25px;
}
.h2title .more a {
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
}
.content {
    width: 100%;
    max-width: 100%;
    padding-bottom: 20px;
}
.h2title {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
}

.zs-footer {
    padding: 28px 0 0 0;
    margin-top: 20px;
    border-radius: 1.5rem 1.5rem 0 0;
    background: #000;
}
.zs-footer .foot-box {
    display: flex;
    margin: 0 auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 20px;
    gap: 0;
    flex-direction: column;
}
.zs-footer .foot-nav {
    flex: 0 0 100%;
    width: 100%;
    padding: 20px 0 0 0;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.zs-footer .foot-nav li {
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: left;
    margin-bottom: 10px;
}
.zs-footer .foot-nav li h3 {
    margin-bottom: 5px;
}
.zs-footer .foot-nav li h3 a {
    line-height: 1;
    font-size: 16px;
    padding: 0;
}
/* 原来是 width:48% 双列，配上基础样式里继承的 white-space:nowrap。那是按中文
   链接名设计的：中文短，两列放得下。换成英文后最长的是
   "Turbo Downloader for Instagram"（30 字符，14px 下约 210px），
   而 48% 在 390px 手机上只有约 173px —— nowrap 不换行，直接横向溢出。
   手机端改成单列并允许换行，宁可多占一行也不要溢出。 */
.zs-footer .foot-nav li a {
    display: block;
    width: 100%;
    line-height: 150%;
    font-size: 14px;
    padding: 3px 0;
    white-space: normal;
}

.zs-footer .foot-share {
    gap: 8px;
    margin-top: 24px;
}
.zs-footer .foot-contact {
    margin-top: 20px;
}
.zs-footer .foot-copyright {
    font-size: 13px;
    line-height: 1.8;
}
.zs-footer .foot-copyright .zs-wp {
    padding-top: 15px;
}
.zs-footer .foot-copyright .zs-wp {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

}