@charset "utf-8";
/* ==========================================================================
   产品页专用样式（左侧分类导航 + 右侧内容）
   仅用于 module/product/list.html 与 module/product/detail.html，
   不影响其它页面的顶部导航样式。
   ========================================================================== */

.pp-wrap,
.pp-wrap * {box-sizing: border-box}

/* ---------- 整体容器 ---------- */
.pp-wrap {width: 100%;padding: 42px 0 70px;background: #f4f7fb}

.pp-layout {display: flex;align-items: flex-start;gap: 30px;padding-bottom: 0}

.pp-layout--full .pp-side {display: none}

.pp-main {flex: 1 1 auto;min-width: 0}

/* ---------- 左侧导航 ---------- */
/* 高度随内容自然延伸，不做内部滚动，跟随页面一起滚动 */
.pp-side {flex: 0 0 268px;width: 268px}

.pp-side__card {overflow: hidden;background: #fff}

.pp-side__head {padding: 22px 24px 20px;background: linear-gradient(135deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%)}

.pp-side__head h2 {color: #fff;font-size: 20px;font-weight: 600;line-height: 1.3}

.pp-side__head span {display: block;margin-top: 6px;color: rgba(255, 255, 255, .6);font-family: Arial, Helvetica, sans-serif;font-size: 12px;letter-spacing: 2px;text-transform: uppercase}

.pp-side__menu {padding: 8px 0}

/* 一级分类行 */
.pp-side__menu > li {position: relative;border-left: 3px solid transparent;transition: background-color .25s ease, border-color .25s ease}

.pp-side__menu > li.is-active {border-left-color: var(--brand-blue, #115fa3);background: linear-gradient(90deg, rgba(30, 79, 140, .12) 0%, rgba(30, 79, 140, 0) 100%)}

.pp-side__cat-head {display: flex;align-items: stretch;transition: background-color .25s ease}

.pp-side__cat-head:hover {background: rgba(30, 79, 140, .06)}

.pp-side__cat-head > a {flex: 1 1 auto;min-width: 0;padding: 13px 6px 13px 21px;color: #444;font-size: 15px;line-height: 1.4;transition: color .25s ease}

.pp-side__cat-head > a:hover {color: var(--brand-blue, #115fa3)}

.pp-side__menu > li.is-active .pp-side__cat-head > a {color: var(--brand-blue-deep, #0c4a80);font-weight: 600}

/* 展开/收起开关（隐藏的 checkbox + 右侧箭头） */
.pp-side__cat-state {position: absolute;top: 0;left: 0;width: 1px;height: 1px;margin: 0;opacity: 0;pointer-events: none}

.pp-side__cat-toggle {position: relative;flex: 0 0 46px;cursor: pointer}

.pp-side__cat-toggle::before {content: "";position: absolute;top: 50%;left: 50%;width: 7px;height: 7px;border-right: 1.5px solid #9aa7b8;border-bottom: 1.5px solid #9aa7b8;transform: translate(-50%, -50%) rotate(45deg);transition: transform .25s ease, border-color .25s ease}

.pp-side__cat-head:hover .pp-side__cat-toggle::before {border-color: var(--brand-blue, #115fa3)}

.pp-side__menu > li.is-active .pp-side__cat-toggle::before {border-color: var(--brand-blue, #115fa3)}

.pp-side__cat-state:checked ~ .pp-side__cat-head .pp-side__cat-toggle::before {transform: translate(-50%, -50%) rotate(-135deg)}

.pp-side__cat-state:focus-visible ~ .pp-side__cat-head .pp-side__cat-toggle {outline: 2px solid rgba(30, 79, 140, .45);outline-offset: -4px}

/* 分类下的产品条目：默认收起，点击箭头后展开 */
.pp-side__sub {display: none;padding: 2px 0 10px}

.pp-side__cat-state:checked ~ .pp-side__sub {display: block}

.pp-side__sub li a {position: relative;display: block;padding: 7px 22px 7px 42px;overflow: hidden;color: #7c8798;font-size: 13px;line-height: 1.5;text-overflow: ellipsis;white-space: nowrap;transition: color .25s ease, background-color .25s ease}

.pp-side__sub li a::before {content: "";position: absolute;top: 50%;left: 27px;width: 5px;height: 5px;margin-top: -2px;border-radius: 50%;background: #c8d4e2;transition: background-color .25s ease}

.pp-side__sub li a:hover {color: var(--brand-blue, #115fa3);background: rgba(30, 79, 140, .06)}

.pp-side__sub li a:hover::before {background: var(--brand-blue, #115fa3)}

.pp-side__sub li.is-active a {background: rgba(30, 79, 140, .1);color: var(--brand-blue-deep, #0c4a80);font-weight: 600}

.pp-side__sub li.is-active a::before {background: var(--brand-blue, #115fa3)}

/* 侧边咨询卡片 */
.pp-side__contact {margin-top: 16px;padding: 22px 24px 24px;background: #fff}

.pp-side__contact h3 {color: var(--brand-blue-deep, #0c4a80);font-size: 16px;font-weight: 600}

.pp-side__contact p {margin-top: 8px;color: #8b95a3;font-size: 13px;line-height: 1.7}

.pp-side__phone {display: block;margin-top: 12px;color: var(--brand-gold, #ff7a18);font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: 700;line-height: 1.2}

.pp-side__btn {display: block;height: 38px;margin-top: 14px;background: linear-gradient(135deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%);color: #fff;font-size: 14px;line-height: 38px;text-align: center;transition: opacity .25s ease}

.pp-side__btn:hover {color: #fff;opacity: .88}

/* ---------- 面包屑 ---------- */
.pp-crumb {display: flex;align-items: center;flex-wrap: wrap;gap: 8px;margin-bottom: 20px;color: #9aa4b2;font-size: 13px;line-height: 1.6}

.pp-crumb a {display: inline-flex;align-items: center;color: #6b7686;transition: color .25s ease}
.pp-crumb .crumb-icon {width: 12px;height: 12px;margin-right: 5px;flex: none;color: var(--brand-blue, #115fa3)}

.pp-crumb a:hover {color: var(--brand-blue, #115fa3)}

.pp-crumb i {color: #c6cfdb}

.pp-crumb em {color: var(--brand-blue-deep, #0c4a80);font-weight: 600}

/* ---------- 列表页：分类介绍（右侧上半部分） ---------- */
.pp-intro {position: relative;margin-bottom: 20px;padding: 26px 30px 26px 28px;overflow: hidden;background: #fff}

/* .pp-intro::before {content: "";position: absolute;top: 22px;bottom: 22px;left: 0;width: 3px;background: linear-gradient(180deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%)} */

.pp-intro__head {display: flex;align-items: baseline;flex-wrap: wrap;gap: 12px}

.pp-intro__title {color: #1d2b3a;font-size: 24px;font-weight: 600;line-height: 1.35}

.pp-intro__suffix {margin-left: 2px;color: var(--brand-blue-deep, #0c4a80);font-size: 24px;font-weight: 600}

.pp-intro__en {color: #b3bfcd;font-family: Arial, Helvetica, sans-serif;font-size: 12px;letter-spacing: 2px;line-height: 1;text-transform: uppercase}

.pp-intro__label {display: inline-flex;align-items: center;gap: 8px;margin-bottom: 8px;color: var(--brand-blue-deep, #0c4a80);font-size: 13px;font-weight: 600;line-height: 1.4;letter-spacing: 1px}

.pp-intro__label::before {content: "";flex: 0 0 auto;width: 14px;height: 2px;background: var(--brand-blue, #115fa3)}

.pp-intro__desc {margin-top: 10px;color: #5a6b80;font-size: 14px;line-height: 1.95}

.pp-intro__desc p {margin: 0 0 8px}

.pp-intro__desc p:last-child {margin-bottom: 0}

/* ---------- 产品列表：网格卡片 ---------- */
.pp-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 22px}

.pp-card {display: flex;flex-direction: column;overflow: hidden;background: #fff;transition: transform .3s ease, box-shadow .3s ease}

.pp-card:hover {transform: translateY(-4px)}

.pp-card__pic {position: relative;display: block;overflow: hidden;padding-top: 72%;background: #eef2f7}

.pp-card__pic img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform .7s ease}

.pp-card:hover .pp-card__pic img {transform: scale(1.06)}

.pp-card__body {display: flex;flex: 1 1 auto;flex-direction: column;padding: 18px 20px 20px}

.pp-card__title {font-size: 16px;font-weight: 600;line-height: 1.5}

.pp-card__title a {display: block;overflow: hidden;color: #222;text-overflow: ellipsis;white-space: nowrap;transition: color .25s ease}

.pp-card__title a:hover {color: var(--brand-blue, #115fa3)}

.pp-card__desc {display: -webkit-box;margin-top: 10px;overflow: hidden;color: #8b95a3;font-size: 13px;line-height: 1.8;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2}

.pp-card__more {display: inline-flex;align-items: center;justify-content: center;align-self: flex-start;height: 34px;margin-top: 16px;padding: 0 20px;border: 1px solid #dbe4ef;color: #5a6b80;font-size: 13px;line-height: 32px;transition: color .25s ease, background .25s ease, border-color .25s ease}

.pp-card__more:hover,
.pp-card:hover .pp-card__more {border-color: transparent;background: linear-gradient(135deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%);color: #fff}

/* 按钮文字：默认「更多详情」，鼠标悬浮整张卡片时切换为「点击咨询报价」 */
.pp-card__more-tip {display: none}

.pp-card:hover .pp-card__more-text {display: none}

.pp-card:hover .pp-card__more-tip {display: inline}

.pp-empty {grid-column: 1 / -1;padding: 70px 0;color: #9aa4b2;font-size: 14px;text-align: center}

/* ---------- 产品详情 ---------- */
.pp-detail {padding: 32px 34px 36px;background: #fff}

.pp-detail__title {position: relative;margin-bottom: 26px;padding-bottom: 18px;border-bottom: 1px solid #eef2f7;color: #1d2b3a;font-size: 24px;font-weight: 600;line-height: 1.4}

.pp-detail__title::after,
.pp-block__title::after {content: "";position: absolute;bottom: -1px;left: 0;width: 64px;height: 3px;background: linear-gradient(90deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%)}

.pp-detail__hero {display: flex;align-items: flex-start;gap: 32px}

.pp-detail__media {position: relative;flex: 0 0 420px;width: 420px;overflow: hidden;padding-top: calc(420px * .68);background: #eef2f7}

.pp-detail__media img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}

.pp-detail__info {flex: 1 1 auto;min-width: 0}

.pp-detail__summary {color: #5a6b80;font-size: 15px;line-height: 2}

.pp-detail__actions {display: flex;flex-wrap: wrap;gap: 12px;margin-top: 28px}

.pp-btn {display: inline-flex;align-items: center;justify-content: center;min-width: 132px;height: 44px;padding: 0 26px;font-size: 15px;transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease}

.pp-btn--primary {background: linear-gradient(135deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%);color: #fff}

.pp-btn--primary:hover {transform: translateY(-2px);color: #fff}

.pp-btn--ghost {border: 1px solid #cfdcec;background: #fff;color: var(--brand-blue-deep, #0c4a80)}

.pp-btn--ghost:hover {border-color: transparent;background: linear-gradient(135deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%);color: #fff}

.pp-block {margin-top: 46px}

.pp-block__title {position: relative;margin-bottom: 26px;padding-bottom: 14px;border-bottom: 1px solid #eef2f7;color: #1d2b3a;font-size: 19px;font-weight: 600;line-height: 1.4}

.pp-block__body {color: #555;font-size: 14px;line-height: 1.9}

.pp-block__body p {margin: 0 0 12px;color: #555;font-size: 14px;line-height: 1.9}

.pp-block__body img,
.pp-block__body video {max-width: 100%}

.pp-block__body a {color: var(--brand-blue, #115fa3)}

/* ---------- 详情：机型简介（主图右侧） ---------- */
.pp-intro__title {display: flex;align-items: center;gap: 10px;margin-bottom: 16px;color: #1d2b3a;font-size: 17px;font-weight: 600;line-height: 1.4}

.pp-intro__title::before {content: "";flex: 0 0 auto;width: 4px;height: 16px;background: linear-gradient(180deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%)}

.pp-intro__body {color: #5a6b80;font-size: 15px;line-height: 1.95}

.pp-intro__body p {margin: 0 0 12px}

.pp-intro__body p:last-child {margin-bottom: 0}

.pp-intro__body img {margin-bottom: 12px}

/* ---------- 详情：技术参数表格 ---------- */
.pp-table-wrap {width: 100%;margin: 6px 0 4px;overflow-x: auto;-webkit-overflow-scrolling: touch}

.pp-table {width: 100%;min-width: 520px;border-collapse: collapse;background: #fff}

.pp-table td {padding: 12px 16px;border: 1px solid #e3ebf5;color: #4f5f70;font-size: 14px;line-height: 1.75;text-align: left;vertical-align: middle;word-break: break-word}

/* 加粗单元格：整格用站点主色底 + 白字，仍保持加粗 */
.pp-table td.is-bold,
.pp-table td.is-bold strong {background: var(--brand-blue, #115fa3);color: #fff;font-weight: 700}

/* ---------- 详情：应用领域（宫格卡片，参考「关于我们 > 合作伙伴」） ---------- */
.pp-app {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 14px;margin-top: 4px;counter-reset: ppApp}

.pp-app__item {position: relative;display: flex;align-items: center;gap: 12px;min-height: 88px;padding: 20px 22px;overflow: hidden;background: #fff;border: 1px solid #e6edf6;transition: background-color .3s ease, border-color .3s ease, transform .3s ease}

.pp-app__item::before {flex: 0 0 auto;content: counter(ppApp, decimal-leading-zero);counter-increment: ppApp;color: var(--brand-blue, #115fa3);font-family: Arial, Helvetica, sans-serif;font-size: 13px;font-weight: 700;letter-spacing: .08em;opacity: .45;transition: opacity .3s ease}

.pp-app__item::after {content: "";position: absolute;top: 50%;left: 0;width: 3px;height: 0;background: linear-gradient(180deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%);transform: translateY(-50%);transition: height .3s ease}

.pp-app__item:hover {background: var(--brand-blue-soft, #edf4fb);border-color: #b9cae0;transform: translateY(-2px)}

.pp-app__item:hover::before {opacity: 1}

.pp-app__item:hover::after {height: 100%}

.pp-app__text {margin: 0;color: #41505f;font-size: 15px;font-weight: 500;line-height: 1.7;transition: color .3s ease}

.pp-app__item:hover .pp-app__text {color: var(--brand-blue-deep, #0c4a80)}

.pp-app__img {width: 100%;height: 100%;max-height: 56px;object-fit: contain}

/* ---------- 移动端 ---------- */
@media screen and (max-width: 991px) {
    .pp-app {grid-template-columns: repeat(2, minmax(0, 1fr))}
}

/* ---------- 平板（769–1024）：侧栏收窄、产品卡改两列、详情主图与文案上下排 ---------- */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .pp-layout {gap: 20px}

    .pp-side {flex: 0 0 220px;width: 220px}

    .pp-side__head {padding: 18px 18px 16px}

    .pp-side__head h2 {font-size: 18px}

    .pp-side__cat-head > a {padding: 11px 4px 11px 16px;font-size: 14px}

    .pp-side__sub li a {padding: 7px 14px 7px 30px}

    .pp-side__sub li a::before {left: 19px}

    .pp-side__contact {padding: 18px}

    .pp-grid {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 18px}

    .pp-card__body {padding: 14px 16px 16px}

    .pp-detail {padding: 26px 24px 30px}

    .pp-detail__title {margin-bottom: 20px;font-size: 22px}

    .pp-detail__hero {display: block}

    .pp-detail__media {width: 100%;flex: none;padding-top: 68%}

    .pp-detail__info {margin-top: 22px}

    .pp-block {margin-top: 38px}

    .pp-app {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px}

    .pp-app__item {min-height: 74px;padding: 16px 18px}
}

/* ---------- 小笔记本（1025–1199）：详情主图按比例收窄，给右侧文案留出空间 ---------- */
@media screen and (max-width: 1199px) and (min-width: 1025px) {
    .pp-detail__media {flex: 0 0 340px;width: 340px;padding-top: calc(340px * .68)}
}

@media screen and (max-width: 768px) {

    .pp-wrap {padding: 20px 0 36px}

    .pp-layout {display: block;padding: 0 16px}

    .pp-side {width: 100%;margin-bottom: 18px}

    .pp-side__card {border: 1px solid #e8eef6;box-shadow: none}

    .pp-side__head {padding: 14px 16px}

    .pp-side__head h2 {font-size: 17px}

    .pp-side__head span {margin-top: 2px;font-size: 11px}

    .pp-side__menu {display: flex;gap: 8px;overflow-x: auto;padding: 10px 12px;-webkit-overflow-scrolling: touch}

    .pp-side__menu > li {flex: 0 0 auto;border-left: 0;background: none}

    .pp-side__menu > li.is-active {border-left: 0;background: none}

    .pp-side__cat-head {overflow: hidden;background: #f2f5fa}

    .pp-side__cat-head:hover {background: #e6edf7}

    .pp-side__cat-head > a {padding: 8px 16px;font-size: 14px;white-space: nowrap}

    .pp-side__menu > li.is-active .pp-side__cat-head,
    .pp-side__menu > li.is-active .pp-side__cat-head:hover {background: linear-gradient(135deg, var(--brand-blue-deep, #0c4a80) 0%, var(--brand-blue, #115fa3) 100%)}

    .pp-side__menu > li.is-active .pp-side__cat-head > a {color: #fff}

    /* 移动端屏幕窄，箭头与产品条目都收进内容区，只保留分类胶囊 */
    .pp-side__cat-toggle {display: none}

    .pp-side__menu .pp-side__sub {display: none}

    .pp-side__contact {display: none}

    .pp-crumb {margin-bottom: 14px}

    .pp-grid {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px}

    .pp-card__body {padding: 12px 12px 14px}

    .pp-card__title {font-size: 14px}

    .pp-card__desc {display: none}

    .pp-card__more {height: 30px;margin-top: 12px;padding: 0 14px;font-size: 12px;line-height: 28px}

    .pp-detail {padding: 20px 16px 24px}

    .pp-detail__title {margin-bottom: 18px;padding-bottom: 14px;font-size: 19px}

    .pp-detail__hero {display: block}

    .pp-detail__media {width: 100%;flex: none;padding-top: 68%}

    .pp-detail__info {margin-top: 20px}

    .pp-detail__summary {font-size: 14px;line-height: 1.9}

    .pp-btn {min-width: 0;flex: 1 1 0;height: 40px;padding: 0 16px;font-size: 14px}

    .pp-block {margin-top: 32px}

    .pp-block__title {margin-bottom: 18px;font-size: 17px}

    .pp-intro__title {margin-bottom: 12px;font-size: 16px}

    .pp-intro__body {font-size: 14px;line-height: 1.9}

    .pp-table {min-width: 460px}

    .pp-table td {padding: 10px 12px;font-size: 13px}

    .pp-app {grid-template-columns: 1fr}

    .pp-app__item {min-height: 0;padding: 14px 16px}

    .pp-app__text {font-size: 14px}

    /* 分页 / 空状态在窄屏收紧上下留白，避免占掉过多首屏 */
    .lists-anniu {padding-top: 20px}

    .pp-empty {padding: 40px 0}
}

/* ==========================================================================
   产品页补充样式（配合 module/product/list.html、detail.html 内的外壳样式）
   - 内页 banner：原 default.css 中的 .ty-banner-1，缺失时 banner 会跑到图片下方
   - 移动端左右留白：模板里 .pp-wrap .container 的 padding:0 会盖掉 product.css 的
     .pp-layout{padding:0 16px}，这里按同等权重补回
   ========================================================================== */

.ty-banner-1 {position: relative;overflow: hidden}
.ty-banner-1 > img {display: block;width: 100%;height: auto}
.ty-banner-1__overlay {position: absolute;top: 0;left: 0;z-index: 10;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background: linear-gradient(135deg, rgba(18, 54, 104, .45) 0%, rgba(0, 0, 0, .35) 100%);pointer-events: none}
.ty-banner-1__text {text-align: center}
.ty-banner-1__title {margin: 0 0 12px;color: #fff;font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;font-size: 52px;font-weight: 700;line-height: 1.15;letter-spacing: 6px;text-shadow: 0 3px 16px rgba(0, 0, 0, .3)}
.ty-banner-1__sub {margin: 0;color: rgba(255, 255, 255, .75);font-family: "Helvetica Neue", Arial, sans-serif;font-size: 16px;letter-spacing: 8px;text-transform: uppercase}

@media screen and (max-width: 768px) {
    .ty-banner-1__title {font-size: 24px;letter-spacing: 2px}
    .ty-banner-1__sub {font-size: 12px;letter-spacing: 3px}
    .pp-wrap .container {padding-left: 16px;padding-right: 16px}
}

/* ==========================================================================
   列表页：一行 6 个的紧凑网格
   - 主图改为正方形 + object-fit: contain（完整显示，不再裁切）
   - 卡片文字区收窄，窄屏逐级降列（4 / 3 / 2）
   ========================================================================== */
.pp-grid--6 {grid-template-columns: repeat(6, minmax(0, 1fr));gap: 14px}

/* 主图区与文字区同为白底、去掉上内边距，让主图与标题连成一体 */
.pp-grid--6 .pp-card {border: 1px solid #eef2f7}

.pp-grid--6 .pp-card:hover {border-color: #cfdcec;box-shadow: 0 12px 24px rgba(17, 95, 163, .1)}

.pp-grid--6 .pp-card__pic {padding-top: 118%;background: #fff}

.pp-grid--6 .pp-card__pic img {top: 8px;left: 8px;width: calc(100% - 16px);height: calc(100% - 16px);object-fit: contain}

.pp-grid--6 .pp-card:hover .pp-card__pic img {transform: scale(1.04)}

.pp-grid--6 .pp-card__body {padding: 2px 12px 14px}

.pp-grid--6 .pp-card__title {min-height: 41px;margin-bottom: 10px;font-size: 13.5px;line-height: 1.5;text-align: center}

.pp-grid--6 .pp-card__title a {color: #2b3a4a}

.pp-grid--6 .pp-card__title a {display: -webkit-box;overflow: hidden;white-space: normal;text-overflow: clip;-webkit-box-orient: vertical;-webkit-line-clamp: 2}

.pp-grid--6 .pp-card__desc {display: none}

.pp-grid--6 .pp-card__more {align-self: stretch;height: 30px;margin-top: auto;padding: 0 10px;font-size: 12px;line-height: 28px;text-align: center}

/* 小笔记本：6 列太挤，改 4 列 */
@media screen and (max-width: 1199px) {
    .pp-grid--6 {grid-template-columns: repeat(4, minmax(0, 1fr));gap: 14px}

    .pp-intro {padding: 22px 22px 22px 22px}

    .pp-intro__title {font-size: 21px}

    .pp-intro__suffix {font-size: 21px}
}

/* 平板：3 列 */
@media screen and (max-width: 1024px) and (min-width: 769px) {
    .pp-grid--6 {grid-template-columns: repeat(3, minmax(0, 1fr));gap: 14px}
}

/* 手机：2 列 */
@media screen and (max-width: 768px) {
    .pp-grid--6 {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px}

    .pp-grid--6 .pp-card__pic {padding-top: 100%}

    .pp-grid--6 .pp-card__pic img {top: 6px;left: 6px;width: calc(100% - 12px);height: calc(100% - 12px)}

    .pp-grid--6 .pp-card__body {padding: 2px 10px 12px}

    .pp-grid--6 .pp-card__title {min-height: 38px;margin-bottom: 8px;font-size: 13px}

    .pp-intro {margin-bottom: 14px;padding: 18px 16px 18px 16px}

    /* .pp-intro::before {top: 16px;bottom: 16px} */

    .pp-intro__title {font-size: 18px}

    .pp-intro__suffix {font-size: 18px}

    .pp-intro__en {font-size: 11px;letter-spacing: 1px}

    .pp-intro__desc {margin-top: 10px;font-size: 13px;line-height: 1.85}
}