/* 麦尚食品 · about 页面样式（PC 段 + 手机段，各自媒体查询包裹） */

/* PC 布局：≥1200px */
@media (min-width: 1200px) {
  button {
          margin: 0;
          padding: 0;
          border: 0.0694vw solid transparent;
          outline: none;
          background-color: transparent;
        }
        input {
          background-color: transparent;
          border: 0;
          outline: none;
        }

        /* ============ 页面骨架 ============ */
        .page {
          position: relative;
          width: 100vw;
          margin: 0 auto;
        }

        /* ============ 头部导航 ============ */
        .header-zone {
          width: 100vw;
          height: 29.1667vw;
        }

        /* ============ 顶部深色 Banner ============ */
        /*
         * 背景图没有 CSS 兜底 —— 由 page-about.php 从后台
         * 「关于我们 → 顶部 Banner → 首屏 Banner（电脑端）」内联输出
         * （background-image / position:center / size:cover 一起写）。
         * 原设计稿那张 banner-about.webp 只在字段为空时才有意义，
         * 客户已上传自己的图，兜底图连同文件一起去掉了。
         */
        .about-hero {
          width: 100vw;
          height: 20.8333vw;
        }
        .about-hero h1 {
          color: rgba(255, 255, 255, 1);
          font-size: 4.1667vw;
          font-weight: 600;
          white-space: nowrap;
          padding: 6.0417vw 0 0 8.3333vw;
        }

        /* ============ 通用标题横幅 / 红条 ============ */
        .sec-banner {
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin: 0 auto;
          display: flex;
          flex-direction: row;
          justify-content: center;
        }
        .sec-banner span {          color: rgba(51, 51, 51, 1);
          font-size: 2.7778vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          white-space: nowrap;
          line-height: 2.7778vw;
        }
        .sec-rule {
          background-color: rgba(230, 0, 18, 1);
          width: 5.5556vw;
          height: 0.2778vw;
          margin: 0 auto;
        }

        /* ============ 关于麦尚 ============ */
        .sec-ms {
          width: 100vw;
          height: 51.3889vw;
          /* 装饰底图内联在标签上（见 page-about.php 的 $ms_section_bg） */
          background-color: rgba(255, 255, 255, 1);
        }
        .ms-title {
          height: 6.7361vw;
          width: 40.4167vw;
          margin: 6.25vw auto 0;
          background: url(../../img/title-about.webp) 100% no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .ms-title span {
          color: rgba(51, 51, 51, 1);
          font-weight: 600;
          font-size: 2.7778vw;
          white-space: nowrap;
        }
        .ms-rule {
          margin-top: 2.7083vw;
        }
        .ms-content {
          width: 82.7083vw;
          margin: 2.4306vw auto 0;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .ms-photo {
          width: 40.5556vw;
        }
        .ms-photo img {
          width: 100%;
        }
        .ms-right {
          width: 40.0306vw;
          margin-top: 0.2083vw;
          display: flex;
          flex-direction: column;
        }
        .ms-intro {
          color: rgba(51, 51, 51, 1);
          font-size: 1.1111vw;
          text-align: left;
          line-height: 2.2222vw;
          word-break: break-all;
          margin-bottom: 1vw;
        }
        .ms-honor {
          display: flex;
          flex-direction: row;
          align-items: center;
        }
        .ms-honor-dot {
          background-color: rgba(230, 0, 18, 1);
          border-radius: 50%;
          width: 0.5556vw;
          height: 0.5556vw;
          margin: 0 0.8333vw 0 0;
        }
        .ms-honor-text {
          color: rgba(51, 51, 51, 1);
          font-size: 1.3889vw;
          font-weight: 600;
          text-align: left;
          line-height: 2.7778vw;
          flex: 1;
        }

        /* ============ 核心能力 ============ */
        .sec-core {
          background-color: rgba(250, 250, 250, 1);
          width: 100vw;
          height: 54.1667vw;
          padding-top: 7.3611vw;
        }
        .core-banner {
          background-image: url(../../img/title-core.webp);
          width: 25.6944vw;
          height: 4.8611vw;
        }
        .core-banner span {
          margin-top: 0.9028vw;
        }
        .core-rule {
          margin-top: 1.4583vw;
        }
        .core-list {
          width: 83.3333vw;
          margin: 2.7778vw auto 0;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .core-card {
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 13.8889vw;
          height: 27.7778vw;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          padding: 2.2222vw 0 0 0.9722vw;
        }
        .core-mark {
          background-color: rgba(230, 0, 18, 1);
          width: 0.2778vw;
          height: 5.5556vw;
        }
        .core-name {          color: rgba(255, 255, 255, 1);
          font-size: 2.2222vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          writing-mode: vertical-rl;
          white-space: nowrap;
          line-height: 2.7778vw;
          margin-left: 0.8333vw;
        }

        /* ============ 品牌介绍 ============ */
        .sec-brand {
          /* 装饰底图内联在标签上（见 page-about.php 的 $ms_section_bg） */
          background-color: rgba(255, 255, 255, 1);
          width: 100vw;
          height: 43.0556vw;
          display: flex;
          flex-direction: row;
        }
        .brand-left {
          width: 40vw;
          margin: 7.1528vw 0 0 8.3333vw;
        }
        .brand-banner {
          background-image: url(../../img/title-brand.webp);
          width: 22.0833vw;
          height: 4.8611vw;
          margin: 0;
          justify-content: flex-start;
        }
        .brand-banner span {
          margin: 1.1111vw 0 0 0;
        }
        .brand-rule {
          margin: 1.6667vw 0 0;
        }
        .brand-text {
          width: 40vw;
          color: rgba(51, 51, 51, 1);
          font-size: 1.1111vw;
          text-align: left;
          line-height: 2.2222vw;
          margin-top: 2.6389vw;
        }
        .brand-figure {
          width: 42.2222vw;
          margin: 6.1806vw 7.2222vw 0 2.2222vw;
        }
        .brand-figure img {
          width: 100%;
        }

        /* ============ 食品安全保障 ============ */
        .sec-safety {
          width: 100vw;
          background: url(../../img/hero-safety-pc.webp) 100% no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
        .safety-title {          width: 16.5278vw;
          height: 2.7083vw;
          color: rgba(255, 255, 255, 1);
          font-size: 2.7778vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: center;
          white-space: nowrap;
          line-height: 2.7778vw;
          margin: 5.4861vw auto 0;
        }
        .safety-bar {
          background-color: rgba(255, 255, 255, 1);
          width: 5.5556vw;
          height: 0.2778vw;
          margin: 2.7083vw auto 0;
        }
        /* 四个面板轮播：标题/横线/背景不动，图文切换（Swiper fade，交互稿） */
        .safety-content {
          margin-top: 3.4028vw;
          display: flex;
          justify-content: center;
          overflow: hidden;
        }
        .safety-track {
          width: 100vw;
        }
        .safety-figure {
          width: 58.3333vw;
          height: auto;
          margin-top: 0.0694vw;
          margin-right: 5vw;
        }
        .safety-info {
          width: 27.9861vw;
          height: auto;
          display: flex;
          flex-direction: column;
        }
        .safety-info h3 {          width: auto;
          height: auto;
          color: rgba(255, 255, 255, 1);
          font-size: 2.2222vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 2.2222vw;
          margin-left: 0.0694vw;
        }
        .safety-info p {
          width: 27.9861vw;
          color: rgba(255, 255, 255, 1);
          font-size: 1.1111vw;
          text-align: left;
          line-height: 2.2222vw;
          margin-top: 2.7083vw;
        }
        .safety-info img {
          width: 17.1528vw;
          height: auto;
          margin-top: 3.1944vw;
        }
        .safety-strip {
          box-shadow: 0 0.0694vw 0 0 rgba(204, 204, 204, 1);
          background-color: rgba(255, 255, 255, 1);
          border-bottom: 1px solid #ccc;
          height: 8.3333vw;
          margin-top: 4.7917vw;
          width: 100vw;
          display: flex;
          flex-direction: column;
        }
        .safety-strip-inner {
          width: 83.5278vw;
          font-size: 0;
          text-align: center;
          white-space: nowrap;
          line-height: 2.7778vw;
          margin: 1.3194vw auto 0;
          display: flex;
          justify-content: space-around;
        }
        .safety-strip-inner-item {
          color: rgba(51, 51, 51, 1);
          font-size: 1.25vw;
          text-align: left;
          white-space: nowrap;
          line-height: 2.7778vw;
          cursor: pointer;
        }
        .safety-strip-inner-item.is-active {
          color: rgba(230, 0, 18, 1);
          font-weight: 600;
        }
        .safety-strip-inner-item:hover {
          color: rgba(230, 0, 18, 1);
        }
        /* 四个面板轮播：Swiper fade 切换，激活时内容上浮入场（交互稿） */
        .safety-panel {
          width: 100vw;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
        }
        .safety-panel.swiper-slide-active {
          animation: safetyIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes safetyIn {
          from {
            opacity: 0;
            transform: translateY(1.1111vw);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* ============ 发展历程 ============ */
        .sec-history {
          background-color: rgba(255, 255, 255, 1);
          position: relative;
          width: 100vw;
          height: 55.5556vw;
          overflow: hidden;
        }
        .history-banner {
          background-image: url(../../img/title-history.webp);
          width: 27.7083vw;
          height: 5vw;
          margin-top: 7.0833vw;
        }
        .history-banner span {
          margin-top: 1.1806vw;
        }
        .history-rule {
          margin-top: 1.5972vw;
        }
        /* 日期指示器：外层窗口默认只露出 9 个日期，当前日期越界时内层轨道滚动到下一个 */
        .history-dates {
          width: 73.4722vw;
          margin: 3.4028vw auto 0;
          overflow: hidden;
        }
        .history-dates-track {
          /* 宽度取内容实际宽度（12 格），百分比位移按它计算 */
          width: max-content;
          display: flex;
          flex-direction: row;
          align-items: center;
          transition: transform 0.5s ease;
        }
        .history-date {
          width: 8.1636vw; /* 73.4722vw / 9，窗口均分 9 格 */
          flex-shrink: 0;
          color: rgba(51, 51, 51, 1);
          font-size: 1.3889vw;
          text-align: center;
          white-space: nowrap;
          line-height: 1.1111vw;
          cursor: pointer;
          transition: color 0.3s ease;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .history-date .dot {
          width: 1.3889vw;
          height: 1.3889vw;
          border: 0.08vw solid transparent;
          border-radius: 50%;
          position: relative;
          margin-top: 1vw;
        }
        .history-date .dot:after {
          content: '';
          width: 0.76vw;
          height: 0.76vw;
          background-color: rgba(230, 0, 18, 1);
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .history-date:hover {
          color: rgba(230, 0, 18, 1);
        }
        .history-date:hover .dot {
          border-color: rgba(230, 0, 18, 1);
        }
        .history-date.is-active {          color: rgba(230, 0, 18, 1);
          font-family: PingFangSC-Semibold;
          font-weight: 600;
        }
        .history-date.is-active .dot {
          border-color: rgba(230, 0, 18, 1);
        }
        .history-line {
          width: 83.3333vw;
          height: 0.0694vw;
          margin: -0.6994vw auto 0;
        }
        /* 时间轴轮播：Swiper 居中卡片，两侧卡片 50% 透明度（交互稿） */
        .history-viewport {
          width: 83.3333vw;
          height: 21.5278vw;
          margin: 4.7917vw auto 0;
          overflow: hidden;
        }
        .history-track {
          height: 21.5278vw;
          display: flex;
          flex-direction: row;
        }
        .history-card {
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 26.3889vw;
          min-height: 21.5278vw;
          opacity: 0.5;
          transition: opacity 0.5s ease;
          border: 0.4vw solid rgba(230, 0, 18, 1);
        }
        .history-card.swiper-slide-active {
          opacity: 1;
        }
        .hc-date {
          position: absolute;
          left: -1px;
          top: 0;
          font-size: 2.2222vw;
          line-height: 1;
          letter-spacing: 0.02em;
          color: #fff;
          font-weight: 500;
          background: rgba(230, 0, 18, 1) url(../../img/history-card-bg.webp) 100% 100%
            no-repeat;
          background-size: contain;
          border-radius: 0 0 2.2222vw 0;
          padding: 0.2vw 5vw 0.2vw 0.5vw;
        }
        .hc-body {
          padding: 2.8222vw 1vw 1vw;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .hc-text {
          width: 10.8333vw;
          margin-top: 0.7639vw;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .hc-title {
          color: rgba(51, 51, 51, 1);
          font-size: 1.6667vw;
          font-family: PingFangSC-Regular, Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial,
    'PingFang SC-Light', 'Microsoft YaHei', sans-serif;
          font-weight: 600;
          text-align: left;
          line-height: 2.0833vw;
        }
        .hc-desc {
          color: rgba(102, 102, 102, 1);
          font-size: 0.9722vw;
          text-align: left;
          line-height: 1.6667vw;
        }
        .hc-body--stack {
          height: auto;
          flex-direction: column;
          justify-content: flex-start;
        }
        .hc-row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .hc-row .hc-title {
          width: 8.3333vw;
          margin-top: 0.6944vw;
        }
        .hc-body--stack .hc-desc {
          width: 22.5694vw;
          margin-top: 2.1528vw;
        }
        /*
         * 只有时间轴实际用到的三种版式（见 inc/functions/about.php 的
         * side / side_wide / stack）各有自己的图片尺寸。
         *
         * 这几个类都写死了宽高。设计稿里每张图的尺寸是按它自己的原始比例
         * 量的，客户换图之后比例对不上就会被压扁 —— 按框裁切，宁可裁掉一点。
         */
        .hc-photo--164 {
          width: 11.3889vw;
          height: 15.7639vw;
        }
        .hc-photo--194 {
          width: 13.4722vw;
          height: 8.4722vw;
        }
        .hc-photo--183 {
          width: 12.7083vw;
          height: 9.3056vw;
        }
        .hc-photo--164,
        .hc-photo--183,
        .hc-photo--194 {
          object-fit: cover;
        }
        .history-arrow {
          position: absolute;
          top: 18.5417vw;
          width: 3.1944vw;
          height: 3.1944vw;
          cursor: pointer;
          border: 0;
          padding: 0;
          background: none;
          transition:
            transform 0.3s ease,
            opacity 0.3s ease;
        }
        .history-arrow:hover {
          transform: translateY(-0.2778vw);
        }
        .history-arrow img {
          position: absolute;
          left: 0;
          top: 0;
          width: 3.1944vw;
          height: 3.1944vw;
          transition: opacity 0.3s ease;
        }
        .history-arrow img.arrow-hover {
          opacity: 0;
        }
        .history-arrow:hover img.arrow-hover {
          opacity: 1;
        }
        .history-arrow--prev {
          left: 8.125vw;
        }
        .history-arrow--next {
          left: 88.6806vw;
        }
        /* 首尾焦点时：切换为置灰箭头并禁止点击 */
        .history-arrow.is-disabled,
        .history-arrow.swiper-button-disabled {
          cursor: default;
          transform: none;
          pointer-events: none;
        }
        .history-arrow img.arrow-disabled {
          opacity: 0;
        }
        .history-arrow.is-disabled img,
        .history-arrow.swiper-button-disabled img {
          opacity: 0;
        }
        .history-arrow.is-disabled img.arrow-disabled,
        .history-arrow.swiper-button-disabled img.arrow-disabled {
          opacity: 1;
        }

        /* ============ 企业文化 ============ */
        .sec-culture {
          background-color: rgba(250, 250, 250, 1);
          width: 100vw;
          height: 54.1667vw;
          padding-top: 7.2917vw;
        }
        .culture-banner {
          background-image: url(../../img/title-culture.webp);
          width: 28.9583vw;
          height: 5vw;
        }
        .culture-banner span {
          margin-top: 0.9722vw;
        }
        .culture-rule {
          margin-top: 1.3889vw;
        }
        .culture-cards {
          width: 83.3333vw;
          margin: 2.7778vw auto 0;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;
        }
        /* 交互稿：鼠标悬浮卡片上移、图标垂直旋转 360° */
        .culture-card {
          box-shadow: 0 0 1.6667vw 0 rgba(0, 0, 0, 0.08);
          background-color: rgba(255, 255, 255, 1);
          border-radius: 1.1111vw;
          width: 26.3889vw;
          height: 26.3889vw;
          display: flex;
          flex-direction: column;
          align-items: center;
          transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
        }
        .culture-card--offset {
          margin-top: 1.3889vw;
        }
        .culture-card:hover {
          transform: translateY(-1.3889vw);
        }
        .culture-icon {
          width: 5.1389vw;
          height: 5.1389vw;
          margin-top: 3.5417vw;
          background-color: #e60012;
          border-radius: 50%;
          overflow: hidden;
        }
        .culture-card:hover .culture-icon {
          animation: iconFlip 0.8s ease;
        }
        @keyframes iconFlip {
          from {
            transform: rotateY(0);
          }
          to {
            transform: rotateY(360deg);
          }
        }
        .culture-title {          color: rgba(51, 51, 51, 1);
          font-size: 2.2222vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          white-space: nowrap;
          line-height: 2.7778vw;
          margin-top: 1.7361vw;
        }
        .culture-value {
          color: rgba(51, 51, 51, 1);
          font-size: 1.6667vw;
          text-align: center;
          line-height: 2.5vw;
          margin-top: 3.8194vw;
          padding: 0 1rem;
        }

        /* ============ 品牌形象 IP ============ */
        .sec-ip {
          /* 装饰底图内联在标签上（见 page-about.php 的 $ms_section_bg） */
          background-color: rgba(255, 255, 255, 1);
          width: 100vw;
          height: 55.5556vw;
          padding-top: 7.0833vw;
        }
        .ip-banner {
          background-image: url(../../img/title-ip.webp);
          width: 25.7639vw;
          height: 5vw;
        }
        .ip-banner span {
          margin-top: 1.1806vw;
        }
        .ip-rule {
          margin-top: 1.5972vw;
        }
        .ip-content {
          width: 73.1944vw;
          margin: 1.4583vw auto 0;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          position: relative;
        }
        /* 交互稿：IP 造型图 Swiper 横向循环轮播（自动播放），或点击圆点跳转 */
        .ip-stage {
          position: relative;
          width: 28.6806vw;
          height: 29.7917vw;
          overflow: hidden;
        }
        .ip-slide {
          width: 28.6806vw;
          height: 29.7917vw;
        }
        .ip-slide img {
          width: 28.6806vw;
          height: 29.7917vw;
          /* 吉祥物是透明底整只出镜的图，用 contain —— cover 会把犄角裁掉 */
          object-fit: contain;
        }
        .ip-info {
          width: 32.7778vw;
          margin-top: 5.2778vw;
        }
        .ip-intro {
          width: 32.7778vw;
          color: rgba(51, 51, 51, 1);
          font-size: 1.1111vw;
          text-align: left;
          line-height: 2.2222vw;
        }
        .ip-name {          color: rgba(51, 51, 51, 1);
          font-size: 2.0833vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          white-space: nowrap;
          line-height: 2.2222vw;
          margin-top: 3.8194vw;
        }
        .ip-profile {
          margin-top: 2.6389vw;
        }
        .ip-profile .row {
          display: flex;
          flex-direction: row;
          gap: 0.5vw;
          font-size: 1.1111vw;
          text-align: left;
          line-height: 2.5vw;
          color: rgba(51, 51, 51, 1);
        }
        .ip-profile .row dt {
          font-weight: 600;
        }
        .ip-dots {
          position: absolute;
          top: 30.7917vw;
          left: 10.3403vw;
          width: 6vw;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .ip-dot {
          background-color: rgba(255, 255, 255, 1);
          border: 0.0694vw solid rgba(230, 0, 18, 1);
          border-radius: 50%;
          width: 0.8333vw;
          height: 0.8333vw;
          cursor: pointer;
          padding: 0;
          transition: background-color 0.3s ease;
        }
        .ip-dot.is-active {
          background-color: rgba(230, 0, 18, 1);
        }

        /* ============ 公益事业 ============ */
        .sec-charity {
          background-color: rgba(250, 250, 250, 1);
          width: 100vw;
          height: 76.3889vw;
          padding-top: 7.2917vw;
        }
        .charity-banner {
          background-image: url(../../img/title-charity.webp);
          width: 52.5vw;
          height: 5vw;
        }
        .charity-banner span {
          margin-top: 0.9722vw;
        }
        .charity-rule {
          margin-top: 1.3889vw;
        }
        .charity-text {
          width: 73.1944vw;
          color: rgba(51, 51, 51, 1);
          font-size: 1.1111vw;
          text-align: center;
          line-height: 2.2222vw;
          margin: 3.3333vw auto 0;
        }
        .charity-figure {
          width: 100vw;
          margin-top: 3.2639vw;
        }

        /* ============ 合作表单 / 页脚 ============ */
        /* 高度交给内容撑开：原稿的 86.1806vw 是「表单 + 页脚」的高度，
           而页脚已由 footer.php 挪到所有区块之外，写死会在页面底部
           空出一整个页脚。 */
        .sec-contact {
          width: 100vw;
          display: flex;
          flex-direction: column;
        }
        .contact-panel {
          width: 100vw;
          height: 41.6667vw;
          background: url(../../img/hero-cooperation-pc.webp) 100% no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          padding-left: 51.0417vw;
        }
        .contact-heading {
          width: 29.5833vw;
          margin: 5.4861vw 0 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .contact-heading h2 {          width: 19.3056vw;
          color: rgba(51, 51, 51, 1);
          font-size: 2.7778vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 2.7778vw;
          margin-left: 0.1389vw;
        }
        .contact-heading p {
          width: 29.5833vw;
          color: rgba(102, 102, 102, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 2.2222vw;
          margin-top: 1.0417vw;
        }
        .contact-form {
          width: 40.5556vw;
          display: block;
        }
        /* 报错状态的 .form-input.has-error 规则统一放在 base.css（两套稿共用） */
        .form-row {
          display: flex;
          gap: 2.7778vw;
        }
        .form-row .form-row-item {
          flex: 1;
        }
        .form-row-item {
          display: flex;
          flex-direction: column;
          margin-bottom: 0.6944vw;
        }
        .form-label {
          color: rgba(51, 51, 51, 1);
          font-size: 1.25vw;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 1.6667vw;
          margin-bottom: 0.3472vw;
        }
        .form-label .req {
          color: rgba(230, 0, 18, 1);
        }
        .form-input {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          border: 0.0694vw solid transparent;
          height: 3.3333vw;
          padding: 0 1.1111vw;
          font-size: 1.1111vw;
          color: rgba(51, 51, 51, 1);
          font-family: inherit;
          transition:
            border-color 0.3s ease,
            box-shadow 0.3s ease;
        }
        .form-input::placeholder {
          color: rgba(153, 153, 153, 1);
        }
        .form-input:focus {
          border-color: rgba(230, 0, 18, 1);
          box-shadow: 0 0 0.5556vw 0 rgba(230, 0, 18, 0.25);
        }
        .captcha-row {
          height: 3.3333vw;
          display: flex;
          flex-direction: row;
          gap: 2.7778vw;
        }
        .captcha-box {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          height: 3.3333vw;
          width: 18.8889vw;
          display: flex;
          flex-direction: row;
          overflow: hidden;
        }
        .captcha-box .form-input {
          width: 10.4167vw;
        }
        .captcha-box img {
          width: 8.3333vw;
          height: 3.1944vw;
          cursor: pointer;
        }
        .btn-submit {
          position: relative;
          overflow: hidden;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          height: 3.3333vw;
          width: 8.3333vw;
          cursor: pointer;
          display: flex;
          flex-direction: column;
        }
        .btn-submit::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(230, 0, 18, 1);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .btn-submit:hover::before {
          transform: scaleX(1);
        }
        .btn-submit span {
          color: rgba(51, 51, 51, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 3.3333vw;
          text-align: center;
          position: relative;
          z-index: 1;
          transition: color 0.35s ease;
        }
        .btn-submit:hover span {
          color: #fff;
        }

        /* ============ 降噪 ============ */
        @media (prefers-reduced-motion: reduce) {
          *,
          *::before,
          *::after {
            animation: none !important;
            transition: none !important;
          }
        }


    /* ===== 英文稿与中文稿的差异（自动生成，来源：线上 PC 稿）===== */
    html[lang^="en"] .about-hero h1 {
      padding: 5.0417vw 0 0 8.3333vw;
    }
    html[lang^="en"] .contact-heading h2 {
      width: auto;
    }
    html[lang^="en"] .core-name {
      white-space: normal;
    }
    html[lang^="en"] .hc-title {
      font-size: 1.7583vw;
    }
    html[lang^="en"] .hc-title {
      line-height: 1.2;
    }
    html[lang^="en"] .ip-name {
      margin-top: 2.1194vw;
    }
    html[lang^="en"] .ip-profile {
      margin-top: 2.1389vw;
    }
    html[lang^="en"] .ms-honor-text {
      font-size: 1.1111vw;
    }
    html[lang^="en"] .safety-info h3 {
      font-size: 1.6667vw;
    }
    html[lang^="en"] .safety-info h3 {
      line-height: 1.9444vw;
    }
    html[lang^="en"] .safety-strip-inner {
      width: 83vw;
    }
    html[lang^="en"] .safety-title {
      width: auto;
    }
    html[lang^="en"] .sec-ms {
      height: 64vw;
    }

    /* 设计稿声明了、主题漏写的两个值（自动审计发现的"主题：缺"） */
    html[lang^="en"] .about-hero h1 {
      line-height: 1.2;
    }
    html[lang^="en"] .core-name {
      height: 23.6111vw;
    }

    /*
     * 历程卡片配图：设计稿的规则是「高度定值、宽度随图片自身比例」
     *   .hc-photo  { width:auto; height:16vw }   —— side 版式（230px @1440）
     *   .hc-photo2 { width:auto; height:9vw  }   —— stack / wide 版式（130px）
     *   img { width:auto; height:100% }          —— 不裁切（object-fit 默认 fill）
     * 主题改成了按尺寸硬编码 + object-fit:cover，宽度与是否裁切都对不上。
     */
    html[lang^="en"] .hc-photo--164 {
      width: auto;
      height: 16vw;
      object-fit: fill;
    }
    html[lang^="en"] .hc-photo--194,
    html[lang^="en"] .hc-photo--183 {
      width: auto;
      height: 9vw;
      margin: 0.7639vw auto 0;
      object-fit: fill;
    }
  }

/* 手机布局：<1200px */
@media (max-width: 1199.98px) {
  /* ---------- 页面横幅（本页横幅图） ---------- */
        .page-hero {
          background-image: url(../../img/about-banner.webp);
        }

        /* 关于我们 */
        .about-section {
          background: url(../../img/block-bg-2.webp) 100% no-repeat;
          background-position: 100% 100%;
        }
        #about-title {
          background: url(../../img/about-title-bg.webp) 50% 50% / contain no-repeat;
        }

        /* ---------- 核心能力 ---------- */
        .ability-section {
          background: #fafafa;
        }
        #ability-title {
          background: url(../../img/ability.webp) 50% 50% / contain no-repeat;
        }
        .ability-swiper {
          width: 6.86rem;
          max-width: 100%;
          margin: 0 auto;
        }
        .ability-swiper .swiper-slide {
          width: calc(100% / 3);
        }
        .ability-swiper .swiper-pagination {
          position: static;
          margin-top: 0.3rem;
          line-height: 0;
        }
        .ability-swiper .swiper-pagination-bullet {
          width: 0.16rem;
          height: 0.16rem;
          background: transparent;
          border: 0.02rem solid #e60012;
          opacity: 1;
          transition: background 0.3s;
        }
        .ability-swiper .swiper-pagination-bullet-active {
          background: #e60012;
        }
        .ability-item {
          position: relative;
          width: 2.29rem;
          height: 4.56rem;
          overflow: hidden;
        }
        .ability-item img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .ability-label {
          position: absolute;
          left: 0.17rem;
          top: 0.36rem;
          display: flex;
          gap: 0.15rem;
        }
        .ability-label::before {
          content: '';
          width: 0.04rem;
          height: 0.9rem;
          background: #e60012;
          flex-shrink: 0;
        }
        .ability-label span {
          writing-mode: vertical-rl;
          font-size: 0.36rem;
          line-height: 1;
          letter-spacing: 0.22em;
          color: #fff;
          font-weight: 600;
          font-family: PingFangSC-Semibold;
        }

        /* ---------- 品牌介绍 ---------- */
        .brand-section {
          background: url(../../img/block-bg-2.webp) 100% no-repeat;
          background-position: 100% 100%;
        }
        #brand-title {
          background: url(../../img/brand.webp) 50% 50% / contain no-repeat;
        }
        .brand-intro {
          font-size: 0.28rem;
          line-height: 0.5rem;
          color: #333;
          word-break: break-all;
        }
        .brand-photo {
          width: 7.12rem;
          max-width: 100%;
          margin: 0.65rem auto 0;
        }
        .brand-photo img {
          width: 100%;
          display: block;
          border-radius: 0.08rem;
        }

        /* ---------- 食品安全保障轮播（Swiper 横向滑动 + 循环播放，容器高度随内容自适应） ---------- */
        .safety-swiper .swiper-slide {
          width: 100%;
        }
        .safety-slide p {
          font-size: 0.28rem;
          line-height: 0.5rem;
          color: rgba(255, 255, 255, 0.85);
          word-break: break-all;
        }

        /* ---------- 发展历程 ---------- */
        .history-section {
          background: url(../../img/block-bg-2.webp) 100% no-repeat;
          background-position: 100% 100%;
        }
        #history-title {
          background: url(../../img/history.webp) 50% 50% / contain no-repeat;
        }
        .history-years-row {
          display: flex;
          align-items: center;
          margin-top: 0.5rem;
          padding: 0 0.72rem;
          position: relative;
          z-index: 1;
        }
        .history-years-row::after {
          content: '';
          height: 2px;
          background: #ccc;
          position: absolute;
          left: 0.72rem;
          right: 0.72rem;
          bottom: calc(0.15rem - 1px);
        }
        .history-years-row .carousel-arrow {
          position: absolute;
          bottom: calc(-0.15rem - 2px);
          z-index: 10;
        }
        .history-years-row .carousel-arrow:first-child {
          left: 0;
        }
        .history-years-row .carousel-arrow:last-child {
          right: 0;
        }
        /* 聚焦首/尾节点时：切换为置灰箭头并禁止点击 */
        .history-years-row .carousel-arrow img {
          transition: opacity 0.3s ease;
        }
        .history-years-row .carousel-arrow img.arrow-disabled {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
        .history-years-row .carousel-arrow.swiper-button-disabled {
          cursor: default;
          pointer-events: none;
        }
        .history-years-row
          .carousel-arrow.swiper-button-disabled
          img:not(.arrow-disabled) {
          opacity: 0;
        }
        .history-years-row
          .carousel-arrow.swiper-button-disabled
          img.arrow-disabled {
          opacity: 1;
        }
        .history-years {
          flex: 1;
          min-width: 0;
          display: flex;
          gap: 0.5rem;
          padding: 0 0.5rem;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }
        .history-years::-webkit-scrollbar {
          display: none;
        }
        .history-years .yr {
          flex-shrink: 0;
          padding: 0;
          background: none;
          border: 0;
          font-size: 0.32rem;
          line-height: 0.64rem;
          color: #333;
          cursor: pointer;
          transition: color 0.3s ease;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .history-years .yr .dot {
          width: 0.3rem;
          height: 0.3rem;
          border: 1px solid transparent;
          border-radius: 50%;
          position: relative;
          z-index: 2;
        }
        .history-years .yr .dot:after {
          content: '';
          width: 0.2rem;
          height: 0.2rem;
          background-color: rgba(230, 0, 18, 1);
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .history-years .yr.is-active {
          color: #e60012;
          font-weight: 600;
          font-family: PingFangSC-Semibold;
        }
        .history-years .yr.is-active .dot {
          border-color: rgba(230, 0, 18, 1);
        }
        .history-stage {
          position: relative;
          margin-top: 0.4rem;
        }
        .history-swiper {
          width: 6rem;
          margin: 0 auto;
        }
        .history-swiper .swiper-slide {
          width: 6rem;
          display: flex;
          justify-content: center;
        }
        .m-card {
          position: relative;
          width: 6rem;
          min-height: 4.9rem;
          background: #fff;
          /* background: url(../../img/history-card-bg.webp) 100% / 100% no-repeat; */
          border: 0.1rem solid rgba(230, 0, 18, 1);
        }
        .m-year {
          position: absolute;
          left: 0;
          top: 0;
          font-size: 0.5rem;
          line-height: 1;
          letter-spacing: 0.02em;
          color: #fff;
          font-weight: 500;
          background: rgba(230, 0, 18, 1) url(../../img/history-card-bg.webp) 100% 100%
            no-repeat;
          background-size: contain;
          border-radius: 0 0 1rem 0;
          padding: 0.1rem 1.5rem 0.1rem 0.1rem;
        }
        .m-body {
          padding: 0.9rem 0.24rem 0.24rem;
          display: flex;
          justify-content: space-between;
        }
        .m-body2 {
          padding: 0.9rem 0.24rem 0.24rem;
          display: flex;
          flex-direction: column;
        }
        .m-text {
          width: 2.25rem;
          padding-top: 0.22rem;
        }
        .m-text h3 {
          font-size: 0.37rem;
          line-height: 0.47rem;
          color: #333;
          word-break: break-all;
        }
        .m-text p {
          margin-top: 0.29rem;
          font-size: 0.22rem;
          line-height: 0.37rem;
          color: #666;
          word-break: break-all;
        }
        .m-text2 {
          padding-top: 0.22rem;
          display: flex;
        }
        .m-text2 h3 {
          font-size: 0.37rem;
          line-height: 0.47rem;
          color: #333;
          flex: 1;
          word-break: break-all;
        }
        .m-text2 p {
          margin-top: 0.29rem;
          font-size: 0.22rem;
          line-height: 0.37rem;
          color: #666;
          word-break: break-all;
        }
        .m-photo {
          width: 2.31rem;
          height: 3.65rem;
        }
        .m-photo2 {
          width: 3rem;
          margin-left: 0.25rem;
        }
        .m-photo img,
        .m-photo2 img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0.06rem;
          display: block;
        }

        /* ---------- 企业文化 ---------- */
        .culture-section {
          background: url(../../img/block-bg-2.webp) 100% no-repeat;
          background-position: 100% 100%;
        }
        #culture-title {
          background: url(../../img/culture.webp) 50% 50% / contain no-repeat;
        }
        .culture-list {
          display: flex;
          flex-direction: column;
          gap: 0.4rem;
        }
        .culture-item {
          display: flex;
          align-items: center;
          gap: 0.55rem;
          width: 6.86rem;
          max-width: 100%;
          height: 2.5rem;
          padding: 0 0.55rem;
          background: #fff;
          border-radius: 0.16rem;
          box-shadow: 0 0 0.24rem rgba(0, 0, 0, 0.08);
        }
        .culture-item img {
          width: 1.2rem;
          height: 1.2rem;
          object-fit: contain;
          flex-shrink: 0;
        }
        .culture-text h3 {
          font-size: 0.36rem;
          line-height: 1.3;
          color: #333;
        }
        .culture-text p {
          margin-top: 0.23rem;
          font-size: 0.28rem;
          line-height: 1.3;
          color: #333;
        }

        /* ---------- 品牌形象IP ---------- */
        .ip-section {
          background: url(../../img/block-bg-2.webp) 100% no-repeat;
          background-position: 100% 100%;
        }
        #mascot-title {
          background: url(../../img/mascot.webp) 50% 50% / contain no-repeat;
        }
        .mascot-swiper {
          padding: 0.1rem 0 0.4rem;
        }
        .mascot-swiper .swiper-slide {
          display: flex;
          justify-content: center;
        }
        .mascot-swiper img {
          width: 4.6rem;
          height: 4.6rem;
          object-fit: contain;
        }
        .mascot-swiper .swiper-pagination {
          position: static;
          line-height: 0;
        }
        .mascot-swiper .swiper-pagination-bullet {
          width: 0.16rem;
          height: 0.16rem;
          background: #fff;
          border: 0.02rem solid #e60012;
          opacity: 1;
          transition: background 0.3s;
        }
        .mascot-swiper .swiper-pagination-bullet-active {
          background: #e60012;
        }
        .mascot-copy {
          margin-top: 0.5rem;
          font-size: 0.28rem;
          line-height: 0.5rem;
          color: #333;
          word-break: break-all;
        }
        .mascot-name {
          margin-top: 0.4rem;
          font-size: 0.36rem;
          color: #333;
          font-weight: 600;
          font-family: PingFangSC-Semibold;
        }
        .mascot-profile {
          margin-top: 0.3rem;
          display: flex;
          flex-direction: column;
          gap: 0.1rem;
        }
        .mascot-profile .row {
          display: flex;
          gap: 0.1rem;
        }
        .mascot-profile dt {
          flex-shrink: 0;
          min-width: 0.7rem;
          font-size: 0.28rem;
          line-height: 0.56rem;
          color: #333;
          font-weight: 600;
        }
        .mascot-profile dd {
          font-size: 0.28rem;
          line-height: 0.56rem;
          color: #333;
        }

        /* ---------- 公益事业 ---------- */
        .charity-section {
          background: url(../../img/block-bg-2.webp) 100% no-repeat;
          background-position: 100% 100%;
        }
        #charity-title {
          background: url(../../img/public-benefit.webp) 50% 50% / contain no-repeat;
          line-height: 1.42rem;
        }
        .charity-section .section-head .section-bar {
          margin-top: -0.25rem;
          position: relative;
        }
        .charity-text {
          text-align: center;
          font-size: 0.28rem;
          line-height: 0.5rem;
          color: #333;
        }
        .charity-photo {
          width: 6.86rem;
          max-width: 100%;
          margin: 0.5rem auto 0;
        }
        .charity-photo img {
          width: 100%;
          display: block;
          border-radius: 0.08rem;
        }


    /* ===== 英文稿与中文稿的差异（自动生成，来源：线上 手机 稿）===== */
    html[lang^="en"] .charity-text {
      text-align: left;
    }
    html[lang^="en"] .page-hero {
      text-align: left;
    }
  }