/* ============================================================
   KEYINS 官网 · 响应式样式
   REM体系：设计稿 1920px → 1rem = 100px
   依赖：reset.css（变量、重置、容器） + layout.css（布局样式）
   断点层级（html font-size 阶梯，与参考项目一致）：
   1901+ → 100px / 1580 → 82px / 1440 → 75px / 1366 → 71px
   / 1280 → 66px / 1199 → 62px / 1024 → 56px / 991 → 50px
   / 767 → calc(100vw/10) / 480 → calc(100vw/7.5)
   ============================================================ */

/* 超宽屏：锁定 rem = 100px */
@media screen and (min-width: 1901px) {
    html { font-size: 100px; }
}

/* 1580px */
@media screen and (max-width: 1580px) {
    html { font-size: 82px; }
}

/* 1440px — 常见笔记本 */
@media screen and (max-width: 1440px) {
    html { font-size: 75px; }
}

/* 1366px */
@media screen and (max-width: 1366px) {
    html { font-size: 71px; }
}

/* 1280px — 小屏笔记本 */
@media screen and (max-width: 1280px) {
    html { font-size: 66px; }
    .categories-grid { grid-template-columns: repeat(4, 1fr); }
    .products-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 1199px */
@media screen and (max-width: 1199px) {
    html { font-size: 62px; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 1024px — 平板横屏：切换移动端导航 */
@media screen and (max-width: 1024px) {
    html { font-size: 56px; }
    :root { --navbar-h: 1.2rem; }

    /* 导航切换移动端 */
    .navbar .nav-links { display: none; }
    .navbar .nav-actions { display: none; }
    .navbar .menu-toggle { display: flex; }
    .navbar .nav-inner { height: var(--navbar-h); }

    /* Hero */
    .hero-title { font-size: 0.46rem; }
    .hero-info-grid { gap: 0.24rem; flex-wrap: wrap; }

    /* 分类 / 产品 */
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: repeat(2, 1fr); }

    /* 关于：左右分栏改上下 */
    .story-grid { grid-template-columns: 1fr; }
    .story-panel { padding: 0.8rem 0.6rem; }
    .story-panel::after { display: none; }
    .story-image { min-height: 4rem; }

    /* Why 统计 */
    .why-stats { grid-template-columns: repeat(2, 1fr); }

    /* 内页 Banner：留足 label + title + 多行 desc 的高度 */
    .inner-banner { height: 4rem; }
    .ib-title { font-size: var(--font36); }

    /* 质检 / 解决方案 */
    .solution-row { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.36rem 0; }
    .solution-row:nth-child(even) .solution-media { order: 0; }
    .solution-why { grid-template-columns: repeat(2, 1fr); }
    .quality-intro { grid-template-columns: 1fr; gap: 0.4rem; }
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
    .qc-process { grid-template-columns: repeat(2, 1fr); }
    .qc-gallery { grid-template-columns: repeat(2, 1fr); }

    /* 产品详情 */
    .product-grid { grid-template-columns: 1fr; gap: 0.3rem; }

    /* 联系 */
    .contact-channels { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 0.4rem; }

    /* Footer：≤1024 段在 991 段为 1rem=50px（768~991 区间），桌面 rem 值减半，
       故 gap/padding 也 ×2 对齐 A（双列 gap≈48 / padding-top≈80） */
    .footer { padding: 1rem 0 0; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; margin-bottom: 1rem; }
}

/* 991px */
@media screen and (max-width: 991px) {
    html { font-size: 50px; }
    .why-tags { flex-direction: column; }

    /* About Story 平板：塌成单列，图置底 */
    .about-story { grid-template-columns: 1fr; gap: 0.3rem; }
    .about-story .as-img { order: 2; height: 3.4rem; }
    .about-story .as-text { order: 1; }
}

/* 767px — 手机横/竖屏 */
@media screen and (max-width: 767px) {
    html { font-size: calc(100vw / 10); }

    /* Why 模块图标移动端加大两倍，更醒目 */
    .why-tag-icon { width: 0.8rem; height: 0.8rem; }
    .why-tag-icon svg { width: 0.44rem; height: 0.44rem; }
    .why-stat-icon { width: 0.88rem; height: 0.88rem; }
    .why-stat-icon svg { width: 0.52rem; height: 0.52rem; }

    /* Partners 移动端：参考设计稿 2 列对齐网格 */
    .partners-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.2rem 0.24rem;
        justify-items: center;
    }
    .partner-logo { height: 2rem; padding: 0 0.05rem; }
    .partner-logo a{height: 2rem;}
    
    .hero-info-item .icon{width: 0.7rem;height: 0.7rem;}

    /* About Story 手机：单列堆叠，4 统计横排对齐 A 项目截图 */
    .about-story { gap: 0.28rem; }
    .about-story .as-text h2 { font-size: var(--font24); margin-bottom: 0.18rem; }
    .about-story .as-text p { line-height: 1.7; }
    .about-story .as-text p:first-of-type { font-size: var(--font14); }
    .about-story .as-text p:last-of-type { font-size: var(--font13); }
    .about-stats { gap: 0.12rem; margin-top: 0.24rem; }
    .about-stat .num { font-size: var(--font20); }
    .about-stat .lbl { font-size: 10px; line-height: 1.3; }

    /* 联系页图标移动端加大两倍，更醒目 */
    .channel-icon { width: 1.12rem; height: 1.12rem; border-radius: 0.28rem; font-size: var(--font50); }
    .contact-detail-icon { width: 0.88rem; height: 0.88rem; border-radius: 0.24rem; font-size: var(--font50); }
	.contact-form-head .cf-icon{ width: 0.96rem; height: 0.96rem; border-radius: 0.24rem; font-size: var(--font50); }
	.form-group input{padding: 0.2rem 0.16rem;}
	.form-group textarea{min-height: 2.4rem;}
	.btn-submit{padding: 0.25rem 0.14rem;}

    /* 容器 */
    .container { max-width: 94%; }
    .container-w { max-width: 94%; }
	.inner-banner .container{width: 100%;}

    /* Navbar */
    .navbar .nav-inner { height: var(--navbar-h);}
    .navbar .nav-logo img { height: 0.8rem; }
    .navbar .menu-toggle { width: 0.46rem; height: 0.36rem; }
    .navbar .menu-toggle.active span:nth-child(1) { transform: translateY(0.17rem) rotate(45deg); }
    .navbar .menu-toggle.active span:nth-child(3) { transform: translateY(-0.17rem) rotate(-45deg); }

	.float-contact{display: none;}
    /* Hero：保留 swiper 背景图显示，内容层与 info-bar 用 z-index 抬到背景之上 */
    .hero { min-height: calc(100vh - var(--navbar-h)); }
    .hero .hero-bg-content { min-height: auto; padding:0; }
    .hero-inner { padding: 1.1rem 0 1.2rem; position: relative; z-index: 10; }
    .hero-title { font-size: 0.42rem; }
    .hero-desc { font-size: var(--font14); }
    .hero-info-bar {
        position: absolute; bottom: 0; left: 0;
        z-index: 10;
        /* background: var(--charcoal-2); */
        padding: 0.3rem 0;
        width: 100%;
    }
    .hero-info-grid { flex-direction: column; align-items: stretch; gap: 0.16rem; }
    .hero-info-item { width: 100%; box-sizing: border-box; }
    .hero-arrows { display: none; }
    .hero-dots { display: none; }

    /* Why */
    .why-section-head h2 { font-size: var(--font30); }
    .why-stats { grid-template-columns: 1fr; }
    .why-banner { padding: 0.6rem 0; }

    /* 通用 section */
    .section { padding: 0.5rem 0; }
    .section-head { margin-bottom: 0.35rem; }
    .section-head .cn { font-size: var(--font28); }
    .section-head .desc { font-size: var(--font14); }

    /* 分类 / 产品 */
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 0.15rem; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.15rem; }
    .page-products .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.15rem; }
    /* .category-img { height: 1.6rem; } */
	.story-content{max-width: 100%;}

    /* 关于 */
    .story-panel { padding: 0.6rem 0.3rem; }
    .story-title { font-size: var(--font30); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }

    /* 新闻 */
    .news-grid { grid-template-columns: 1fr; }
    .news-faq-grid { grid-template-columns: 1fr; gap: 0.4rem; }
    .news-item { flex-direction: column; }
    .news-thumb { width: 100%; height: 3.2rem; }
	.news-card-img{height: 4rem;}
	.nd-article{padding: 0;box-shadow: none;}
	
	.faq-toggle{width:0.56rem;height:0.56rem;font-size:0.48rem;}
	.faq-col .faq-toggle{width:0.48rem;height:0.48rem;font-size:0.48rem;}
	.gallery-thumb{width:1.2rem;  height:1.2rem;}
	.lightbox-close{font-size: 0.7rem;}
	.tabs-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;}
	.tabs-nav .tab-btn{white-space:nowrap;padding:0.18rem 0.28rem;font-size:var(--font13);}
	.product-info h1{font-size: var(--font24);}
	.specs-table td:first-child{width: 2.4rem;}
	.product-cta{gap: 0.24rem;}
	.product-cta a{width: 100%;padding: 0.24rem 0.36rem;}
	.inquiry-mini input, .inquiry-mini textarea{padding: 0.24rem 0.16rem;}
	.inquiry-mini-row{grid-template-columns: 1fr;gap: 0.24rem;}
	.feature-grid{grid-template-columns: 1fr;}
	.feature-icon{width: 0.8rem;height: 0.8rem;font-size: var(--font40);}
	.related-section .related-grid{grid-template-columns: 1fr 1fr;}
	.related-head h3{font-size: var(--font40);}
	.stat-num{font-size: var(--font60);}
	.quality-stats .container{gap:0.4rem;}
	.section-alt .qc-process{grid-template-columns: 1fr 1fr;}
	.qc-step-num{width: 1rem;height: 1rem;font-size: var(--font24);}
	.cert-icon{width: 1rem;height: 1rem;font-size:var(--font40);}
	.qc-gallery-item{height: 3.4rem;}
	.resource-thumb{height: 3rem;}
	.resource-download{padding: 0.2rem 0;}

    /* 内页 Banner：参考 A 项目 768 段 min-height:240px + title 28px */
    .inner-banner { height: auto; min-height: calc(100vh - var(--navbar-h)); }
    .inner-banner .ib-title { font-size: var(--font28); line-height: 1.15; }
    .inner-banner .ib-desc {  line-height: 1.65; }
    .ib-label { font-size: var(--font11); margin-bottom: 0.1rem; letter-spacing: 0.02rem; }
    .ib-divider { width: 0.6rem; height: 0.05rem; }
    .inner-banner-inner { padding: 0.5rem 0; }

    /* 质检 / 资源 / 解决方案 */
    .cert-grid { grid-template-columns: 1fr; }
    .qc-process { grid-template-columns: 1fr; }
    .qc-gallery { grid-template-columns: 1fr; }
    .resource-grid { grid-template-columns: 1fr; }
    .solution-why { grid-template-columns: 1fr; }
	.solution-num{width: 1rem;height: 1rem;}
	.solution-content .btn-outline{padding: 0.2rem 0.3rem;}
	.solution-features{gap: 0.15rem;}

    /* 产品详情 */
    .related-grid { grid-template-columns: repeat(2, 1fr); }

    /* FAQ */
    .faq-question { font-size: var(--font16); }
    /* 搜索图标：桌面 20px，移动端输入框左内距加大且图标左移，避免 rem 缩放后图标压住输入文字 */
    .faq-search input { padding-left: 0.86rem; }
    .faq-search .search-icon { left: 0.2rem; }

    /* 联系 */
    .contact-channels { grid-template-columns: 1fr; }

    /* 关于 / 质检 / 产品详情：桌面多列统计与卡片在手机端降列，避免被压窄溢出 */
    .about-stats { grid-template-columns: repeat(4, 1fr); gap: 0.08rem; }
    .quality-stats .container { grid-template-columns: repeat(2, 1fr); }
    .packaging-grid { grid-template-columns: 1fr; }

    /* Footer：≤767 段根字号为 100vw/10（1rem≈48~77px），桌面 rem 值在此段减半，
       故 footer 间距统一 ×2 对齐 A 的 px 值（gap≈48 / padding-top≈80 / h4≈24 / li≈12） */
    .footer { padding: 1rem 0 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 0.4rem; margin-bottom: 1rem; }
    .footer-brand .footer-logo { margin-bottom: 0.32rem; }
    .footer-brand .footer-logo img { height: 0.56rem; }
    .footer-brand p { margin-bottom: 0.4rem; }
    .footer-col h4 { margin-bottom: 0.4rem; }
    .footer-links li { margin-bottom: 0.24rem; }
    .footer-contact p { margin-bottom: 0.24rem; }
    .footer-contact .btn-footer-quote { margin-top: 0.24rem; padding: 0.2rem 0.48rem; }
    .inquiry-form:not(.narrow) { margin-top: 0.32rem; }
    .inquiry-form:not(.narrow) input { padding: 0.2rem 0.28rem; margin-bottom: 0.24rem; }
    .inquiry-form:not(.narrow) button { padding: 0.2rem 0.48rem; }
    .footer-social { gap: 0.24rem; }
    .footer-social a { width: 0.6rem; height: 0.6rem; }
    .footer-bottom { flex-direction: column; gap: 0.32rem; text-align: center; padding: 0.48rem 0; }
    .footer-bottom .container-w { justify-content: center; }

    /* 浮动联系：对齐 A ≤768（right 12 / btn 38 / font 15 / gap 12），1rem≈48~77px 取中值 */
    .float-contact { right: 0.2rem; top: 50%; transform: translateY(-50%); gap: 0.2rem; }
    .float-btn { width: 0.63rem; height: 0.63rem; font-size: 0.25rem; }
    .float-icon-social { font-size: 0.25rem; }
    .float-icon-social svg,
    .float-icon-social img { width: 0.25rem; height: 0.25rem; }
    .float-tip, .float-qr { right: 0.9rem; }
    .float-qr .qr-box { width: 2rem; height: 2rem; }
    .faq-layout { grid-template-columns: 1fr; gap: 0.4rem; }
    .faq-sidebar { position: static; }
    .faq-cat-nav { flex-direction: row; flex-wrap: wrap; }
    .faq-cta { padding: 0.32rem; }
	
	.wn-sub li a{padding: 0.2rem;}
}

/* 640px */
@media screen and (max-width: 640px) {
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 0.15rem; }
    .products-grid { grid-template-columns: 1fr; }
    .page-products .products-grid { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }

    /* About 里程碑时间轴 → 单列堆叠 */
    .timeline::before { left: 0.14rem; }
    .timeline-item { grid-template-columns: 1fr; column-gap: 0; padding-left: 0.4rem; }
    .timeline-year { text-align: left; display: flex; align-items: baseline; gap: 0.1rem; margin-bottom: 0.12rem; }
    .timeline-year .y { font-size: var(--font24); }
    .timeline-year .idx { margin-top: 0; }
    .timeline-item::after { left: 0.14rem; top: 0.06rem; }
    .timeline-content::before { left: -0.26rem; width: 0.26rem; top: 0.16rem; }
}

/* 480px — 手机竖屏 */
@media screen and (max-width: 480px) {
    html { font-size: calc(100vw / 7.5); }

    /* 导航：紧凑但留足高度，logo + menu-toggle 更醒目 */
    .navbar .nav-inner { height: var(--navbar-h);}
    .navbar .nav-logo img { height: 0.8rem; }
    .menu-toggle { width: 0.46rem; height: 0.36rem; }
    .menu-toggle.active span:nth-child(1) { transform: translateY(0.17rem) rotate(45deg); }
    .menu-toggle.active span:nth-child(3) { transform: translateY(-0.17rem) rotate(-45deg); }

    .hero-title { font-size: 0.4rem; }
    .hero-buttons, .story-buttons { flex-direction: column; }
    .products-grid { grid-template-columns: 1fr; }
    .related-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }

    /* Footer：≤480 段根字号 100vw/7.5（375px 屏 1rem=50px），桌面 rem 值在此段正好减半，
       故全部 ×2 让实际 px 值精确对齐 A：padding-top 80 / gap 48 / margin-bottom 60 /
       h4 24 / li 12 / logo 32 / social 36 / input 12·16 / bottom 24 */
    .footer { padding: 1rem 0 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 0.3rem; margin-bottom: 0.8rem; }
    .footer-brand .footer-logo { margin-bottom: 0.32rem; }
    .footer-brand .footer-logo img { height: 0.64rem; }
    .footer-brand p { font-size: var(--font14); line-height: 1.7; margin-bottom: 0.4rem; }
    .footer-col h4 { font-size: var(--font16); margin-bottom: 0.48rem; }
    .footer-links li { margin-bottom: 0.24rem; }
    .footer-links li a { font-size: var(--font14); }
    .footer-contact p { margin-bottom: 0.24rem; }
    .footer-contact .btn-footer-quote { margin-top: 0.24rem; padding: 0.2rem 0.48rem; }
    .inquiry-form:not(.narrow) { margin-top: 0.32rem; }
    .inquiry-form:not(.narrow) input { padding: 0.24rem 0.32rem; font-size: var(--font14); margin-bottom: 0.24rem; }
    .inquiry-form:not(.narrow) button { padding: 0.24rem 0.48rem; font-size: var(--font14); }
    .footer-social { gap: 0.24rem; }
    .footer-social a { width: 0.72rem; height: 0.72rem; font-size: var(--font18); }
    .footer-bottom { flex-direction: column; gap: 0.32rem; text-align: center; padding: 0.48rem 0; }
    .footer-bottom .container-w { font-size: var(--font13); justify-content: center; gap: 0.08rem; }

    /* 浮动联系：精确对齐 A ≤768（right 12 / btn 38×38 / font 15 / gap 12 / 垂直居中），
       375px 屏 1rem=50px，故 right 0.24 / btn 0.76 / font 0.3 / gap 0.24 */
    .float-contact { right: 0.24rem; top: 50%; bottom: auto; transform: translateY(-50%); gap: 0.24rem; }
    .float-btn { width: 0.76rem; height: 0.76rem; font-size: 0.3rem; box-shadow: 0 4px 12px rgba(22,104,227,0.25); }
    .float-icon-social svg, .float-icon-social img { width: 0.3rem; height: 0.3rem; }
    .float-tip, .float-qr { right: 1.08rem; }
    .float-qr .qr-box { width: 2.4rem; height: 2.4rem; }
    .back-to-top { width: 0.8rem; height: 0.8rem; font-size: 0.32rem; right: 0.1rem; bottom: 0.6rem; box-shadow: 0 3px 10px rgba(0,0,0,0.2); }

    .inner-banner { height: auto; min-height: 50vh; }
    .inner-banner .ib-title { line-height: 1.2; }
    .inner-banner .ib-desc { line-height: 1.55;max-width: 100%; }
    .inner-banner-inner { padding: 0.5rem 0; }

    /* Hero info-bar 小屏内边距收紧 */
    .hero-info-bar { padding: 0.24rem 0; }
    .hero-info-item { padding: 0.1rem 0.16rem; }
}