@charset "utf-8";
/* =========================================================
   MEDLIFE · 响应式
   ========================================================= */

/* ----- 大屏 1440 以下 ----- */
@media (max-width:1440px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid>.prod-card:first-child{grid-column:span 2;grid-row:span 1}
  .prod-grid>.prod-card:first-child .pic{min-height:240px;aspect-ratio:16/9;height:auto}
}

/* ----- 笔记本 1200 以下 ----- */
@media (max-width:1200px){
  :root{--header-h:74px}
  .sec{padding:84px 0}
  .header-tel{display:none}
  .svc-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .counters{flex-direction:column}
  .counters .item{border-right:0;border-bottom:1px solid var(--line)}
  .counters .item:last-child{border-bottom:0}
  .proc-layout{grid-template-columns:1fr;gap:32px}
  .proc-panel{position:static}
  .proc-highlight li{padding:16px 14px}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .news-list{display:flex;flex-direction:column;gap:18px;grid-column:1/-1}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .footer-main{grid-template-columns:1fr 1fr;gap:32px}
  .fcol-qr{grid-column:1/-1}
  .fcol-qr .ewm-card{max-width:280px}
  .fcb-item{min-width:160px;padding:20px 18px}
  .footer-contact-bar .fcb-inner{flex-wrap:wrap}
  .prod-list{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid>.prod-card:first-child{grid-column:span 2;grid-row:span 1}
  .prod-grid>.prod-card:first-child .pic{min-height:220px;aspect-ratio:16/9;height:auto}
  .hero-grid{gap:36px}
  .hero-stats .st{min-width:100px}
  .about-grid{grid-template-columns:1fr}
  .about-visual{order:0}
  .about-body{order:0}
}

/* ----- 平板 992 以下 ----- */
@media (max-width:992px){
  .site-header{
    z-index:1000;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.98);
  }
  body.nav-open .site-header{z-index:1060}
  .site-header .wrap{gap:14px;width:94%}
  .main-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(340px,82vw);height:100vh;height:100dvh;
    background:#fff;border-left:1px solid var(--line);
    transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
    z-index:1050;padding:calc(var(--header-h) + 20px) 24px 40px;overflow-y:auto;
    box-shadow:-10px 0 40px -16px rgba(15,37,69,.2);
    -webkit-overflow-scrolling:touch;
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav>ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav>ul>li{border-bottom:1px solid var(--line)}
  .main-nav>ul>li:has(.sub){margin:0}
  .nav-item-hd{display:flex;align-items:stretch;width:100%;height:auto}
  .main-nav>ul>li>a,
  .main-nav .nav-item-hd>a{
    height:auto;min-height:48px;padding:14px 12px;border-bottom:0;
    font-size:17px;display:flex;align-items:center;flex:1;
    -webkit-tap-highlight-color:transparent;border-radius:0;
    background:transparent!important;
  }
  .main-nav>ul>li.active>a,
  .main-nav>ul>li.active .nav-item-hd>a{
    color:var(--blue);font-weight:600;
    box-shadow:inset 3px 0 0 var(--blue);
    background:transparent!important;
  }
  .main-nav>ul>li>a:hover,
  .main-nav .nav-item-hd>a:hover{color:var(--blue);background:transparent!important}
  .sub-toggle{
    display:grid;place-items:center;width:48px;min-height:48px;flex-shrink:0;
    background:transparent;border:0;border-left:1px solid var(--line);
    color:var(--text-dim);cursor:pointer;transition:.25s;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  }
  .sub-toggle svg{transition:transform .25s}
  .main-nav>ul>li.open>.nav-item-hd .sub-toggle{color:var(--blue)}
  .main-nav>ul>li.open>.nav-item-hd .sub-toggle svg{transform:rotate(180deg)}
  .main-nav>ul>li.has-sub>.sub{
    display:none;position:static;transform:none;opacity:1;visibility:visible;
    background:var(--bg-soft);border:0;box-shadow:none;padding:4px 0 10px;margin:0;
    min-width:0;border-radius:0;border-top:1px solid var(--line);
  }
  .main-nav>ul>li.has-sub.open>.sub{display:flex;flex-direction:column;gap:0}
  .main-nav .sub a{
    padding:12px 16px 12px 24px;color:var(--text-soft);font-size:15px;
    min-height:44px;display:flex;align-items:center;border-radius:0;
    background:transparent!important;
  }
  .main-nav .sub a:hover,.main-nav .sub a:active{color:var(--blue)}
  .main-nav a:focus{outline:none}
  .main-nav a:focus-visible,.sub-toggle:focus-visible{
    outline:2px solid var(--blue);outline-offset:-2px;border-radius:var(--radius-sm);
  }
  .nav-toggle:focus{outline:none}
  .nav-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--radius-sm)}
  .nav-toggle{
    display:flex;z-index:1061;position:relative;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  }
  .nav-mask{
    display:block;position:fixed;top:0;right:0;bottom:0;left:0;
    background:rgba(10,27,51,.5);opacity:0;visibility:hidden;transition:.4s;z-index:1040;
    touch-action:manipulation;
  }
  .nav-mask.show{opacity:1;visibility:visible}

  .hero{min-height:clamp(420px,56vh,520px);padding-top:var(--header-h)}
  .hero-grid{width:92%;margin:0 auto;padding:32px 0 40px}
  .hero-text{max-width:100%}
  .hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.82) 45%,rgba(255,255,255,.4) 100%)}
  .hero-nav{right:4%;bottom:20px}
  .hero-dots{left:4%;bottom:24px}
  .prod-grid>.prod-card:first-child{grid-column:span 1;grid-row:span 1}
  .prod-grid>.prod-card:first-child .pic{aspect-ratio:4/3;height:auto;min-height:0}
  .prod-tabs{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%;padding-bottom:4px;margin-bottom:32px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .prod-tabs::-webkit-scrollbar{display:none}
  .prod-tabs a{flex-shrink:0;white-space:nowrap}
  .prod-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px}
  .layout,.layout.reverse{grid-template-columns:1fr;min-width:0}
  .order-aside{order:2}
  .order-main{order:1;min-width:0;overflow:hidden}
  .footer-main{grid-template-columns:1fr;gap:28px}
  .fcol-qr .ewm-card{max-width:280px;margin:0 auto}
  body.qr-open{overflow:hidden}
  body.qr-open::before{
    content:"";position:fixed;inset:0;background:rgba(10,27,51,.5);z-index:1998;
  }
  .qr-float-layer{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    z-index:1999;background:#fff;padding:18px;border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);text-align:center;width:min(268px,80vw);
  }
  .qr-float-layer img{width:100%;max-width:210px;height:auto;margin:0 auto;border-radius:var(--radius-sm)}
  .qr-float-layer em{display:block;font-size:13px;color:var(--text-soft);font-style:normal;margin-top:10px}
  .footer-brand .qr-pop{display:none}
  .footer-brand .socials .qr-trigger.show-qr{background:var(--blue);border-color:var(--blue);color:#fff}
  .footer-brand .socials .qr-trigger:hover{transform:none}
  .footer-contact-bar .fcb-inner{flex-direction:column}
  .fcb-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.12);width:100%;min-width:0}
  .fcb-item:last-of-type{border-bottom:0}
  .footer-contact-bar .fcb-cta{width:100%;justify-content:center;padding:16px 0 20px}
  .honor-item{flex:0 0 200px;width:200px}
  .honor-item .hpic{height:260px}
  .hero-stats .st{flex:1 1 45%;border-right:0;border-bottom:1px solid var(--line)}
  .hero-stats .st:nth-child(odd){border-right:1px solid var(--line)}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-feat{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr;gap:40px}
  .prod-detail{grid-template-columns:1fr;gap:34px}
  .contact-grid{grid-template-columns:1fr;gap:34px}
  .aside-box{position:static}
  .page-hero{height:auto;min-height:280px;padding:calc(var(--header-h) + 20px) 0 36px}
  .page-hero h1{font-size:clamp(26px,6vw,40px)}
  .crumb{font-size:12.5px;line-height:1.65;word-break:break-word}
  .cta-box{padding:52px 40px}
  .article{padding:40px 36px}
}

/* ----- 手机 768 以下 ----- */
@media (max-width:768px){
  body{font-size:14.5px}
  .site-header .logo img{height:36px}
  .site-header .logo .ltxt strong{font-size:19px}
  .sec,.sec-sm{padding:60px 0}
  .sec-head{margin-bottom:40px}
  .sec-head h2{font-size:clamp(24px,6vw,32px)}
  .svc-grid,.why-grid,.counters,.prod-grid,.prod-list,.honor-grid,.news-grid{grid-template-columns:1fr}
  .svc-grid:has(.svc-card:nth-child(3):last-child) .svc-card:last-child{max-width:100%;grid-column:auto}
  .news-list{display:flex;flex-direction:column;gap:16px}
  .prod-card:first-child{grid-column:auto;grid-row:auto}
  .prod-card .pic{aspect-ratio:4/3;height:auto}
  .prod-card .pic img{transform:none!important}
  .prod-card .info h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .prod-card .info{padding:18px 16px}
  .reveal.left,.reveal.right{transform:translateY(34px)}
  .reveal.in{transform:none}
  .prod-tabs{gap:8px;margin-bottom:28px}
  .prod-tabs a{padding:8px 14px;font-size:13px}
  .proc-steps{padding-left:0}
  .proc-step{grid-template-columns:46px 1fr;gap:12px}
  .proc-step .dot{width:46px;height:46px;font-size:15px}
  .proc-steps::before{left:22px;top:23px;bottom:23px}
  .proc-step .body{padding:16px 14px}
  .proc-highlight{grid-template-columns:1fr 1fr}
  .why-grid:has(.why-item:nth-child(3):last-child) .why-item:last-child{max-width:100%;grid-column:auto}
  .about-feat{grid-template-columns:1fr}
  .page-hero-sm{height:auto;min-height:220px}
  .about-grid{gap:32px}
  .hero{min-height:clamp(380px,52vh,480px)}
  .hero-grid{width:94%;padding:28px 0 56px}
  .hero h1{font-size:clamp(30px,8vw,42px)}
  .hero p.lead{margin:20px 0 28px;font-size:15px}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-nav button{width:40px;height:40px}
  .hero-dots{bottom:20px}
  .hero-stats{flex-direction:column;border:0;max-width:100%}
  .hero-stats .st{border-right:0;border-bottom:1px solid var(--line);width:100%;padding:16px 8px}
  .hero-stats .st:last-child{border-bottom:0}
  .page-main{padding:48px 0}
  .page-hero{min-height:220px;padding:calc(var(--header-h) + 16px) 0 28px}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:28px 20px;
    padding:32px 0 18px;
    align-items:start;
    overflow:visible;
  }
  .site-footer{overflow:visible}
  .footer-contact-bar{position:relative;z-index:1}
  .footer-brand{grid-column:1/-1;overflow:visible;text-align:center;padding-bottom:4px;border-bottom:1px solid var(--line)}
  .footer-brand .logo{justify-content:center}
  .footer-brand>p{margin:0 auto 14px;max-width:100%;font-size:13px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .footer-brand .socials{justify-content:center;gap:10px}
  .footer-brand .socials a,.footer-brand .socials .qr-trigger{width:42px;height:42px}
  .footer-brand .socials a:hover,.footer-brand .socials .qr-trigger:hover{background:var(--blue-soft);border-color:var(--blue-soft);color:var(--blue);transform:none}
  .fcol{min-width:0}
  .fcol h4{font-size:14px;margin-bottom:10px}
  .fcol h4::after{width:24px;margin-top:8px}
  .fcol ul li{margin-bottom:7px}
  .fcol ul li a{font-size:13px;line-height:1.5}
  .fcol-qr{grid-column:1/-1;text-align:center;padding-top:4px;border-top:1px solid var(--line)}
  .fcol-qr .ewm-card{max-width:240px;margin:12px auto 0}
  .fcol-qr .ewm-tip{margin-bottom:0}
  .footer-bottom{padding:14px 0 18px}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-bottom .links{justify-content:center;flex-wrap:wrap}
  .art-row{grid-template-columns:1fr}
  .art-row .pic img{min-height:200px;aspect-ratio:16/9}
  .art-row .txt{padding:22px 20px}
  .form-grid{grid-template-columns:1fr}
  .prevnext{grid-template-columns:1fr}
  .prevnext .next{text-align:left}
  .pd-params{grid-template-columns:1fr}
  .pd-tabhead{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .pd-tabhead a{flex-shrink:0;white-space:nowrap}
  .pd-gallery .main-pic{aspect-ratio:4/3}
  .pd-thumbs{flex-wrap:wrap;justify-content:center}
  .cta-inner{align-items:center;text-align:center}
  .cta-box{padding:40px 24px}
  .article{padding:30px 22px}
  .form-box{padding:30px 24px}
  .pd-panel{padding:26px 24px}
  .pd-tabhead a{padding:15px 20px;font-size:14px}
  .to-top{right:16px;bottom:16px;width:46px;height:46px}
  .trust-bar .wrap{gap:18px}
  .partner-logo{width:140px;height:72px;padding:10px 16px}
  .partner-marquee{padding:50px 0}
  .honor-item{flex:0 0 200px}
  .honor-item .hpic{height:240px}
  .pager{margin-top:36px;gap:6px}
  .pager a,.pager span{min-width:38px;height:38px;font-size:14px}
  .faq-q .q{padding:18px 18px;gap:12px}
  .faq-q .a .inner{padding:0 18px 22px 18px}
  .cta-actions{flex-direction:column;width:100%}
  .cta-actions .btn{width:100%;justify-content:center}
}

/* ----- 小屏 480 以下 ----- */
@media (max-width:480px){
  .hero h1{font-size:36px}
  .sec-head h2{font-size:26px}
  .hero-stats{gap:22px 34px}
  .btn{padding:13px 24px;font-size:14px}
  .honor-grid:not(.honor-marquee){grid-template-columns:1fr}
  .article{padding:26px 18px}
  .contact-grid .form-box{padding:24px 18px}
}