/* ============================================
   Product-iBend 产品页面样式
   设计稿: PC 1440px / iPad 768-1199px / App 390px
   安全区域: 1220px
   严格还原 Figma 设计，不参考 Product-AT/N 视觉风格
   ============================================ */


/* 公共样式 */
.swiperList-hover .swiper-button-next,
.swiperList-hover .swiper-button-prev {
    width: 44px;
    height: 44px;
    border: 1px solid #000;
    padding: 14px;
    border-radius: 50%;
    /* top: -40px; */
    /* background: #828898; */
    /* opacity: 0.5; */
}

.swiperList-hover .swiper-button-prev {
    right: 64px;
    left: initial;
    background-image: url(../img/l.svg);
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    /* filter: invert(100%); */
}

.swiperList-hover .swiper-button-next {
    right: 0;
    left: initial;
    background-image: url(../img/r.svg);
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    /* filter: invert(100%); */
}

   /* 导航栏 */
.header_bg {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.7);
}

/* CSS 变量 - 基于 Figma 设计 */
:root {
    /* 主色调 */
    --color-primary: #ff4610;
    --color-black: #000000;
    --color-white: #ffffff;

    /* 文字颜色 */
    --color-text: #171B25;
    --color-text-secondary: rgba(0, 0, 0, 0.65);
    --color-text-white: #ffffff;
    --color-text-white-secondary: rgba(255, 255, 255, 0.65);

    /* 背景色 */
    --color-bg-gray: #f5f6f8;
    --color-bg-gray-light: #fafafb;
    --color-bg-black: #F5F6F8;;

    /* Tab 状态 */
    --color-tab-inactive: #999999;
    --color-tab-active: rgba(0, 0, 0, 0.95);

    /* 字体 */
    --font-pingfang: 'PingFangSC-Semibold', 'RedHatDisplay-SemiBold', 'Oswald-SemiBold', 'Microsoft YaHei';
    --font-pingfang-desc: 'PingFangSC-Regular', 'RedHatDisplay-Regular', 'Oswald-Regular', "Microsoft YaHei";
    --font-sf: 'SF New Republic', 'PingFang SC', sans-serif;
    --font-oswald: 'Oswald', 'PingFang SC', sans-serif;
    --font-source-han: 'Source Han Sans CN', 'PingFang SC', sans-serif;

    /* 布局 */
    --content-width: 1120px;
    --section-padding: 120px;
    --card-gap: 16px;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 8px;
}

/* 通用容器 */
.container {
    width: var(--content-width);
    margin: 0 auto;
}

/* ============================================
   S0: Banner (800px)
   Figma: 标题 100px SF New Republic Bold
   副标题 20px Source Han Sans Regular
   ============================================ */
.banner-section {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
}

.banner-bg {
    position: absolute;
    inset: 0;
    background-color: #1a1a1a;
}


.dimWhite {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(255, 255, 255, 0.7);
}

.dimWhite .li svg {
    filter: invert(100%);
}

.dimWhite .c-white {
    color: #000000 !important;
}

.dimWhite .btn_box>div {
    color: #fff !important;
}

.banner-bg picture {
    display: block;
    width: 100%;
    height: 100%;
}

.banner-bg picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.banner-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.banner-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

.banner-content {
    position: absolute;
    top: 210px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.banner-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-title {
    font-family: var(--font-sf);
    font-size: 100px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    white-space: nowrap;
}

.banner-title strong {
    color: var(--color-primary);
    font-family: var(--font-sf);
    font-weight: 700;
}

.banner-subtitle {
    font-family: var(--font-source-han);
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: var(--color-white);
    letter-spacing: 8px;
}

.banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 117px;
    height: 36px;
    background: var(--color-white);
    border-radius: 30px;
    font-family: var(--font-pingfang);
    font-size: 17px;
    color: var(--color-black);
    cursor: pointer;
    gap: 6px;
}

.banner-btn svg {
    width: 12px;
    height: 12px;
}

.sub-nav {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--content-width);
    height: 57px;
    z-index: 10;
}

/* ============================================
   S1: 全链国际高标准 (680px)
   Figma: pt-120, 标题与卡片 gap-48
   标题 48px PingFang Bold lh-1.4
   描述 18px Regular lh-1.6
   卡片 268x400 gap-16
   卡片标题 24px Semibold
   描述 16px Regular
   ============================================ */
.standards-section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background: var(--color-white);

}

.standards-header {
    text-align: center;
    margin-bottom: 48px;
}

.section-title {
    font-family: var(--font-pingfang);
    font-size: 48px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text);
    margin-bottom: 16px;
}

.section-desc {
    font-family: var(--font-pingfang-desc);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.standards-cards {
    display: flex;
    gap: var(--card-gap);
    justify-content: center;
}

.standard-card {
    flex: 1;
    max-width: 292px;
    height: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

.card-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #2a2a2a;
}

.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 16px 24px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.9));
    text-align: center;
    padding-top: 200px;
}

.card-info h3 {
    font-family: var(--font-pingfang);
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: var(--color-white);
    margin-bottom: 4px;
}

.card-info p {
    font-family:"PingFang SC";
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    height: 50px;
    color: var(--color-text-white-secondary);


}

/* ============================================
   通用卖点样式
   Figma: 标题 48px Semibold lh-1.3
   副标题 28px Bold lh-1.3, gap-8 到描述
   描述 18px Regular lh-1.6
   按钮 gap-80 到文字块
   按钮 16px Medium, h-36, px-16, radius-4
   箭头 40x40
   ============================================ */
.feature-section {
    padding: var(--section-padding) 0;
}

.feature-section.feature-left {
    background: var(--color-bg-gray);
}

.feature-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feature-text {
    flex-shrink: 0;
}

.feature-title {
    font-family: var(--font-pingfang);
    /*font-size: 48px;*/
    font-weight: 500;
    /*line-height: 1.3;*/
    line-height: 48px;
    color: var(--color-text);
}

.feature-subtitle {
    font-family: var(--font-pingfang);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
}

.feature-desc {
    font-family: var(--font-pingfang-desc);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-secondary);
}

.feature-btns {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    background: var(--color-black);
    border-radius: var(--radius-sm);
    font-family: var(--font-source-han);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.64px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.6;
}

.btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e0e2e4;
    cursor: pointer;
    text-decoration: none;
}

/* ============================================
   S2: 碳钢机架 (bg #f5f6f8, py-120)
   Figma: 左文(460px) 右图(600x460)
   justify-between
   标题 gap-24 到副标题块
   副标题 gap-8 到描述
   按钮 gap-80 到文字块
   ============================================ */
#frame-body .feature-text {
    width: 460px;
}

#frame-body .feature-title {
    margin-bottom: 0;
}

#frame-body .feature-text .feature-subtitle {
    margin-top: 24px;
}

#frame-body .feature-text .feature-subtitle + .feature-desc,
#frame-body .feature-text .feature-desc {
    margin-top: 8px;
}

#frame-body .feature-btns {
    margin-top: 80px;
}

#frame-body .feature-image {
    width: 600px;
    height: 460px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
}

/* ============================================
   S3: 钢制刀具 (bg white)
   Figma: 左图(440x560) gap-80 右文
   标题 48px Bold lh-1.2 tracking -2.88px
   gap-28 到副标题块
   副标题 28px Bold lh-1.4
   gap-12 到描述
   描述 18px Regular lh-1.5
   数据 gap-32 到副标题块
   数据值 36px Oswald SemiBold lh-1.1 #ff4610
   数据标签 16px Source Han Sans Regular lh-1.25
   gap-12 到值
   分隔线 1px h-68
   按钮 gap-80 到数据块
   ============================================ */
#blade {
    background: var(--color-white);
    padding: var(--section-padding) 0;
}

#blade .feature-layout {
    gap: 80px;
    justify-content: center;
}

#blade .feature-image {
    width: 440px;
    height: 560px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

.img-note {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-family: var(--font-pingfang);
    font-size: 8px;
    line-height: 1.5;
    color: var(--color-white);
    text-align: center;

}

#blade .feature-text {
    flex: 1;
    max-width: 596px;
}

#blade .feature-title {
    font-weight: 500;
    /*line-height: 1.2;*/
    line-height: 48px;
    /* letter-spacing: -2.88px; */
    margin-bottom: 0;
}

#blade .feature-text .feature-subtitle {
    margin-top: 24px;
}

#blade .feature-text .feature-subtitle + .feature-desc {
    margin-top: 12px;
}

#blade .feature-desc {
    line-height: 1.5;
}

#blade .feature-btns {
    margin-top: 80px;
}

.blade-stats {
    display: flex;
    align-items: center;
    gap: 44px;
    margin-top: 32px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 140px;
    gap: 12px;
}

.stat-value {
    font-family: var(--font-oswald);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-primary);
}

.stat-label {
    font-family: var(--font-source-han);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-text-secondary);
}

.stat-divider {
    width: 1px;
    height: 68px;
    background: #e0e2e4;
}

/* ============================================
   S4: 后挡结构 (bg #f5f6f8, py-120)
   Figma: 标题 48px Semibold lh-1.3
   副标题块 gap-28 到标题
   副标题 28px Bold
   gap-12 到描述
   描述 18px Regular lh-1.5
   按钮 gap-28 到副标题块
   图片 1120x520 gap-32 到按钮
   ============================================ */
#back-gauge {
    background: var(--color-bg-gray);
}

.backgauge-header .feature-title {
    margin-bottom: 0;
}

.backgauge-info {
    margin-top: 28px;
}

.backgauge-info .feature-subtitle {
    margin-bottom: 12px;
}

.backgauge-info .feature-desc {
    line-height: 1.5;
}

#back-gauge .feature-btns {
    margin-top: 28px;
}

.backgauge-header {
    margin-bottom: 32px;
}

.backgauge-image {
    width: 100%;
    height: 520px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
}

/* ============================================
   S5: 自动挠度补偿 (1120x680)
   标题 48px Semibold 白色
   标配标签 16px Bold
   副标题 24px Bold 白色
   描述 18px Regular lh-1.5
   ============================================ */
.deflection-section {
    padding: var(--section-padding) 0;
}

.deflection-content {
    position: relative;
    width: 100%;
    height: 680px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.deflection-image {
    width: 100%;
    height: 100%;
    /*background-color: #1a1a1a;*/
    background-size: cover;
    background-position: center;
}

.deflection-text {
    position: absolute;
    top: 40px;
    left: 50px;
    width: 1020px;
}

.deflection-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.deflection-title-other {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.deflection-title-row .feature-title {
    /*font-size: 48px;*/
    line-height: 48px;
    color: var(--color-white);
}

.btn-video-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    /*background: rgba(255, 255, 255, 0.2);*/
    background: var(--color-black);

    border: 1px solid var(--color-white);
    border-radius: 8px 8px 8px 0px;
    font-family: var(--font-pingfang);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.6;
    white-space: nowrap;
}

.btn-video-sm-other {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    /*background: rgba(255, 255, 255, 0.2);*/
    background: var(--color-black);
    border: 1px solid var(--color-white);
    border-radius: 8px 8px 8px 0px;
    font-family: var(--font-pingfang);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.6;
    white-space: nowrap;
}

.deflection-text .feature-subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-white);
    margin-bottom: 8px;
}

.deflection-text .feature-desc {
    color: var(--color-text-white-secondary);
}

/* ============================================
   S6: 选配功能 (bg #f5f6f8)
   标题 48px Bold tracking -2.88px
   Tab 24px
   图片 1120x620
   ============================================ */
.optional-section {
    padding: var(--section-padding) 0;
    background: var(--color-bg-gray);
}

.section-title-center {
    font-family: var(--font-pingfang);
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    color: #0c0c0d;
    text-align: center;
    letter-spacing: -2.88px;
    margin-bottom: 48px;
}

.optional-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.optional-image {
    width: 100%;
    height: 620px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    position: relative;
}

.optional-overlay {
    position: absolute;
    top: 60px;
    left: 60px;
}

/* 第2、3个Tab - 文字在左下 */
.optional-overlay-bottom {
    top: auto;
    bottom: 50px; /* 距离底部 */
}

.optional-overlay .feature-subtitle {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-white);
    margin-bottom: 8px;
}

.optional-overlay .feature-desc {
    /*font-size: 18px;*/
    /*line-height: 1.5;*/
    color: var(--color-text-white-secondary);
    width: 800px;
}

.optional-note {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-family: var(--font-pingfang);
    font-size: 8px;
    line-height: 1.5;
    color: var(--color-white);
}

.optional-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deflection-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.tab-nav {
    display: flex;
    gap: 68px;
    width: 856px;
    margin: 0 auto;
}

.tab-item {
    width: 240px;
    font-family: var(--font-pingfang);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-tab-inactive);
    text-align: center;
    cursor: pointer;
    padding-bottom: 20px;
}

.tab-item.active {
    font-weight: 700;
    color: var(--color-tab-active);
}

.tab-indicator {
    width: 856px;
    height: 1px;
    background: #e0e2e4;
    position: relative;
    margin: 0 auto;
}

.tab-indicator::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 240px;
    height: 2px;
    background: var(--color-primary);
    transition: left 0.3s ease;
}

/* ============================================
   S7: 实机照片
   左列 740px (大图 740x400 + 2小图 360x200)
   右列 360px
   ============================================ */
.gallery-section {
    padding: var(--section-padding) 0;
}

.gallery-grid {
    display: flex;
    gap: 20px;
}

.gallery-left {
    display: flex;
    flex-direction: column;
    gap: 19px;
    flex: 1;
}

.gallery-main {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
}

.gallery-bottom {
    display: flex;
    gap: 20px;
}

.gallery-sm {
    flex: 1;
    height: 200px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
}

.gallery-right {
    display: flex;
    flex-direction: column;
    gap: 19px;
    width: 360px;
    flex-shrink: 0;
}

.gallery-tall {
    width: 100%;
    height: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
}

/* 手机端 2x3 网格布局 */
.gallery-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
}

/* ============================================
   S8: 全球品质服务
   标题 48px Semibold
   副标题 18px Regular
   数值 48px Oswald SemiBold #ff4610
   标签 18px tracking 0.72px
   ============================================ */
.service-section {
    padding: 0 0 var(--section-padding);

}

.service-header {
    margin-bottom: 36px;
}

.service-header .feature-title {
    margin-bottom: 16px;
}

.service-subtitle {
    font-family: var(--font-pingfang-desc);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-secondary);
}

.service-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.service-image {
    flex: 1;
    height: 460px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
}

.service-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.service-image picture img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
}

.service-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.service-stat-item {
    width: 370px;
    height: 220px;
    background: var(--color-bg-gray-light);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.service-stat-value {
    font-family: var(--font-oswald);
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.stat-unit {
    font-family: var(--font-oswald), 'Noto Sans JP', sans-serif;
    font-size: 44px;
    font-weight: 700;
    color: var(--color-primary);
}

.service-stat-label {
    font-family: var(--font-pingfang);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-secondary);
    letter-spacing: 0.72px;
}

/* ============================================
   S9: 适用行业
   标题 48px Semibold
   描述 20px Regular
   了解更多 16px #ff4610
   ============================================ */
.industry-section {
    padding: 0 0 var(--section-padding);
}

.industry-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 48px;
}

.industry-info {
    flex: 1;
}

.industry-info .feature-title {
    margin-bottom: 12px;
}

.industry-desc {
    font-family: var(--font-pingfang);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(28, 31, 35, 0.62);
}

.btn-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-pingfang);
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-more svg {
    width: 20px;
    height: 20px;
}

.btn-more svg path {
    stroke: var(--color-primary);
}

.industry-grid {
    display: flex;
    gap: 16px;
    height: 608px;
}

.industry-tall {
    width: 256px;
    height: 397px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.industry-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 256px;
    flex-shrink: 0;
}

.industry-item {
    width: 100%;
    height: 192px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #2a2a2a;
    background-size: cover;
    background-position: center;
}

.industry-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 304px;
    flex-shrink: 0;
}

.industry-right .industry-item {
    width: 100%;
}

.industry-tall-r {
    height: 400px;
}

/* ============================================
   响应式 - iPad (768px ~ 1199px)
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1200px) {
    :root {
        --content-width: 944px;
        --section-padding: 80px;
    }

    .service-subtitle {
        font-size: 16px;
    }
    /* Banner */
    .banner-title {
        font-size: 80px;
    }

    .banner-subtitle {
        font-size: 18px;
        letter-spacing: 6px;
    }

    /* 全链国际高标准 */
    .section-title {
        font-size: 36px;
    }

    .section-desc {
        font-size: 16px;
    }

    .standard-card {
        height: 334px;
    }

    .card-info h3 {
        font-size: 20px;
    }

    .card-info p {
        font-size: 12px;
    }

    /* 通用卖点 */
    .feature-title {
        font-size: 36px;
    }

    .feature-subtitle {
        font-size: 22px;
    }

    .feature-desc {
        font-size: 16px;
    }

    /* 碳钢机架 */
    #frame-body .feature-text {
        width: 380px;
    }

    #frame-body .feature-image {
        width: 500px;
        height: 400px;
    }

    #frame-body .feature-btns {
        margin-top: 48px;
    }

    /* 钢制刀具 */
    #blade .feature-layout {
        gap: 48px;
    }

    #blade .feature-image {
        width: 380px;
        height: 480px;
    }

    #blade .feature-btns {
        margin-top: 48px;
    }

    .blade-stats {
        gap: 28px;
    }

    .stat-item {
        width: 110px;
    }

    .stat-value {
        font-size: 28px;
    }

    /* 后挡结构 */
    .backgauge-image {
        height: 420px;
    }

    /* 挠度补偿 */
    .deflection-content {
        height: 540px;
    }

    .deflection-text {
        width: 860px;
    }

    .deflection-title-row .feature-title {
        font-size: 36px;
    }

    /* 选配功能 */
    .section-title-center {
        font-size: 36px;
    }

    .optional-image {
        height: 500px;
    }

    .tab-nav {
        width: 756px;
        gap: 48px;
    }

    .tab-item {
        width: 220px;
        font-size: 20px;
    }

    .tab-indicator {
        width: 756px;
    }

    .tab-indicator::after {
        width: 220px;
    }

    /* 实机照片 */
    .gallery-right {
        width: 300px;
    }

    .gallery-main {
        height: 340px;
    }

    .gallery-sm {
        height: 170px;
    }

    .gallery-tall {
        height: 340px;
    }

    /* 全球服务 */
    .service-stat-item {
        width: 300px;
        height: 200px;
    }

    .service-stat-value {
        font-size: 36px;
    }

    .stat-unit {
        font-size: 34px;
    }

    /* 适用行业 */
    .industry-grid {
        height: auto;
    }

    .industry-tall {
        width: 220px;
        height: 340px;
    }

    .industry-col {
        width: 220px;
    }

    .industry-right {
        width: 260px;
    }

    .industry-item {
        height: 160px;
    }

    .industry-tall-r {
        height: 340px;
    }
    .w-1120{
        width: 1120px !important;
    }
}

/* ============================================
   响应式 - 手机端 (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
    .service-subtitle {
        font-size: 12px;
    }
    /* 碳钢机架图片 - 手机端显示 _m 版本 */
    #frame-body .feature-image {
        background-image: url('../img/tangang_m.webp') !important;
    }

    /* 钢制刀具图片 - 手机端显示 _m 版本 */
    #blade .feature-image {
        background-image: url('../img/shipin_m.webp') !important;
    }

    /* 后挡结构图片 - 手机端显示 _m2 版本 */
    .backgauge-image {
        background-image: url('../img/shipin_m2.webp') !important;
    }

    /* 挠度补偿图片 - 手机端显示 _m 版本 */
    .deflection-content {
        background-image: url('../img/buchang_m.webp') !important;
    }

    /* 选配功能图片 - 手机端显示 _m 版本 */
    .optional-image[data-tab-content="0"] {
        background-image: url('../img/fuzhu1_m.webp') !important;
    }
    .optional-image[data-tab-content="1"] {
        background-image: url('../img/fuzhu2_m.webp') !important;
    }
    .optional-image[data-tab-content="2"] {
        background-image: url('../img/fuzhu3_m.webp') !important;
    }


    :root {
        --content-width: calc(100% - 32px);
        --section-padding: 60px;
    }

    .container {
        width: calc(100% - 32px);
    }

    /* Banner */
    .banner-section {
        height: 624px;
    }

    .banner-content {
        top: 177px;
        gap: 16px;
    }

    .banner-title {
        font-size: 52px;
    }

    .banner-title strong {
        font-size: 52px;
    }

    .banner-subtitle {
        font-size: 14px;
        letter-spacing: 4px;
    }

    .banner-btn {
        width: 100px;
        height: 30px;
        font-size: 14px;
    }

    .sub-nav {
        display: none;
    }

    /* 全链国际高标准 */
    .standards-header {
        margin-bottom: 16px;
        text-align: left;
    }

    .section-title {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 8px;
        text-align: left;
    }

    .section-desc {
        font-size: 14px;
        text-align: left;
    }

    .standards-cards {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: flex-start !important;
        /* 隐藏滚动条但保持可滚动 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    /* 隐藏Chrome/Safari滚动条 */
    .standards-cards::-webkit-scrollbar {
        display: none;
    }

    .standard-card {
        width: 160px;
        min-width: 160px;  /* 关键！防止被压缩 */
        height: 242px;
        flex-shrink: 0;   /* 关键！不收缩 */
        scroll-snap-align: start;
        max-width: none;
    }

    .card-img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--radius-sm);
    }

    .card-mobile-img {
        display: none;
    }

    .card-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 152px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.9) 100%);
        text-align: left; /* 左对齐 */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 左对齐 */
        justify-content: flex-end;
    }

    .card-info h3 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 4px;
    }

    .card-info p {
        /*  font-size: 12px;
        line-height: 18px;
        color: rgba(255,255,255,0.65); */
        height: 50px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        color: rgba(255, 255, 255, 0.65);
        text-align: center;
        font-family: "PingFang SC";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 18px */
    }

    /* 分页指示器 */
    .standards-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }

    .standards-dots .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #D1D1D6;
        transition: all 0.3s ease;
        cursor: pointer; /* 可点击 */
    }

    .standards-dots .dot.active {
        width: 18px;
        border-radius: 3px;
        background: #000000;
    }

    /* 通用卖点 */
    .feature-layout {
        flex-direction: column;
        gap: 24px;
    }

    .feature-title {
        font-size: 22px;
    }

    .feature-subtitle {
        font-size: 16px;
    }

    .feature-desc {
        font-size: 14px;
        line-height: 1.5;
    }

    .feature-btns {
        margin-top: 16px !important;
    }

    .btn-video {
        height: 28px;
        font-size: 12px;
        padding: 0 12px;
    }

    .btn-arrow {
        width: 28px;
        height: 28px;
    }

    .btn-arrow svg {
        width: 14px;
        height: 14px;
    }

    /* 碳钢机架 */
    #frame-body .feature-text {
        width: 100%;
    }

    #frame-body .feature-text .feature-subtitle {
        margin-top: 8px;
    }

    #frame-body .feature-image {
        width: 100%;
        height: 240px;
    }

    /* 钢制刀具 */
    #blade .feature-layout {
        gap: 16px;
        flex-direction: column-reverse;
    }

    #blade .feature-image {
        width: 100%;
        height: 240px;
    }

    #blade .feature-text {
        max-width: 100%;
    }

    #blade .feature-text .feature-subtitle {
        margin-top: 8px;
    }

    .blade-stats {
        gap: 0;
        justify-content: space-between;
        margin-top: 16px;
    }

    .stat-item {
        width: auto;
        gap: 4px;
    }

    .stat-value {
        font-size: 20px;
    }

    .stat-label {
        font-size: 12px;
    }

    .stat-divider {
        height: 40px;
    }

    /* 后挡结构 */
    .backgauge-info {
        margin-top: 12px;
    }

    .backgauge-info .feature-subtitle {
        margin-bottom: 4px;
    }

    .backgauge-image {
        height: 200px;
    }

    /* 挠度补偿 */
    .deflection-content {
        height: 300px;
    }

    .deflection-text {
        top: 16px;
        left: 16px;
        width: calc(100% - 32px);
    }

    .deflection-title-row .feature-title {
        font-size: 22px;
    }

    .deflection-title-row {
        margin-bottom: 8px;
    }

    .btn-video-sm {
        font-size: 10px;
        padding: 2px 8px;
    }

    /* High-Quality Hardware 按钮移动端样式 */
    .deflection-title-other {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .deflection-title-other .feature-title {
        font-size: 22px;
        line-height: 1.3;
    }

    .btn-video-sm-other {
        font-size: 10px;
        padding: 2px 8px;
    }

    .deflection-text .feature-subtitle {
        font-size: 14px;
    }

    .deflection-text .feature-desc {
        font-size: 12px;
        line-height: 1.5;
    }

    /* 选配功能 */
    .section-title-center {
        font-size: 22px;
        letter-spacing: 0;
        margin-bottom: 16px;
    }

    .optional-image {
        height: 240px;
    }

    .optional-overlay {
        top: 16px;
        left: 16px;
    }

    /* 手机端 - 第2、3个Tab文字在左下 */
    .optional-overlay-bottom {
        top: auto;
        bottom: 16px;
    }

    .optional-overlay .feature-subtitle {
        font-size: 14px;
    }

    .optional-overlay .feature-desc {
        font-size: 12px;
        width: calc(100% - 32px);
    }

    .optional-content {
        gap: 16px;
    }

    .tab-nav {
        width: 100%;
        gap: 0;
        justify-content: space-between;
    }

    .tab-item {
        width: auto;
        flex: 1;
        font-size: 14px;
        padding-bottom: 12px;
    }

    .tab-indicator {
        width: 100%;
    }

    .tab-indicator::after {
        width: 33.33%;
    }

    /* 实机照片 - 手机端等比例缩小布局 */
    .gallery-section {
        padding: 40px 0;
    }

    .gallery-mobile-flex {
        flex-direction: row;
        gap: 4px;
    }

    .gallery-mobile-flex .gallery-left {
        flex: 1;
        gap: 4px;
    }

    .gallery-mobile-flex .gallery-main {
        height: 160px;
        background-image: url('../img/shiji1_m.webp');
        border-radius: var(--radius-sm);
    }

    .gallery-mobile-flex .gallery-bottom {
        gap: 4px;
    }

    .gallery-mobile-flex .gallery-bottom .gallery-sm:nth-child(1) {
        background-image: url('../img/shiji1-0_m.webp');
    }

    .gallery-mobile-flex .gallery-bottom .gallery-sm:nth-child(2) {
        background-image: url('../img/shiji1-1_m.webp');
    }

    .gallery-mobile-flex .gallery-sm {
        height: 80px;
        border-radius: var(--radius-sm);
    }

    .gallery-mobile-flex .gallery-tall {
        border-radius: var(--radius-sm);
    }

    .gallery-mobile-flex .gallery-right {
        width: 35%;
        flex-direction: column;
        gap: 4px;
    }

    .gallery-mobile-flex .gallery-tall {
        flex: 1;
        height: auto;
        background-image: url('../img/shiji2-1_m.webp');
    }

    .gallery-mobile-flex .gallery-right .gallery-sm {
        flex: none;
        height: 80px;
        background-image: url('../img/shiji2_m.webp');
    }

    /* 全球服务 */
    .service-content {
        flex-direction: column;
        gap: 16px;
    }

    .service-image {
        width: 100%;
        height: 220px;
    }

    .service-stats {
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

    .service-stat-item {
        width: calc(50% - 4px);
        height: 116px;
        gap: 8px;
    }

    .service-stat-value {
        font-size: 24px;
    }

    .stat-unit {
        font-size: 22px;
    }

    .service-stat-label {
        font-size: 12px;
        letter-spacing: 0;
    }

    /* 适用行业 */
    .industry-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 20px;
    }

    .industry-desc {
        font-size: 14px;
    }

    .btn-more {
        font-size: 12px;
    }

    .industry-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        height: auto;
    }

    .industry-tall,
    .industry-item {
        width: 100%;
        height: 130px;
    }

    .industry-col {
        display: contents;
    }

    .industry-col .industry-item {
        width: 100%;
    }

    .industry-right {
        display: contents;
    }

    .industry-right .industry-item {
        width: 100%;
    }

    .industry-tall-r {
        height: 130px;
    }


    .swiper-pagination-bullet.swiper-pagination-bullet-active {
        opacity: 1 !important;
        background-color: #fff;
    }

    .swiper-pagination-bullet {
        width: 6.4vw;
        height: 0.533vw;
        background-color: #fff;
        opacity: 1;
        border-radius: 2666.4vw;
    }
}

/* ============================================
   1440px+ 适配
   ============================================ */
@media screen and (min-width: 1440px) {
    :root {
        --content-width: 1220px;
    }
    .w-1120{
        width: 1120px !important;
    }
}
.btn-video-sm-other span{
    color: var(--color-white) !important;
}