﻿/* =============================================
   MOB.CSS — 响应式适配（当前项目专用）
   覆盖：index / about / product / evidence-quality / resources / contact
   Breakpoints: ≤1280px / ≤1024px / ≤820px / ≤480px
   ============================================= */
.mobbutton{display:none}

/* ===== 1280px ===== 小桌面 / 大平板 ===== */
@media screen and (max-width:1280px){
  .w1200,.w1370{max-width:95%;padding:0 20px}
  .top{margin:20px}
  .nav ul{gap:30px}
}

/* ===== 1024px ===== 平板横屏 / 小平板 ===== */
@media screen and (max-width:1024px){
  .top .nav ul li a{font-size:15px}
  .nav ul{gap:20px}
  .language ul li{padding:8px 12px}
  .banner .w1200 .slider-txt .titleh1{font-size:60px}
  .banner .w1200 .slider-txt .sub-title{font-size:18px}

  .CLINICAL h2,.WHY_ENDURA h2,.PRODUCT_PLATFORM h2{font-size:40px}
  .CLINICAL p,.PRODUCT_PLATFORM p{font-size:18px}
  .CLINICALbox{flex-direction:column}
  .CLINICALimg{flex:auto}
  .CLINICALimg img{width:100%}
  .clinicallist{flex:auto}

  .indexvideo{flex-direction:column}
  .indexvideotxt{flex:auto}
  .ivideobox{flex:auto;min-height:240px}

  .flex1200{flex-direction:column}
  .hali{flex:auto}

  .mission-section{flex-direction:column}
  .mission-right{flex:auto}

  .cards{grid-template-columns:repeat(2,1fr)}
  .journey-cards,.service-grid{grid-template-columns:repeat(2,1fr)}

  .banner2 h1{font-size:36px}
  .contact-wrapper{width:auto;margin:40px 20px}
}

/* ===== 820px ===== 手机横屏 / 平板竖屏 ===== */
@media screen and (max-width:820px){
  /* -- Header -- */
  .top .navbox{display: none;position:fixed;width:100%;height:100%;top:0;left:0;z-index:998;}
  .top .nav{display:none;align-items:flex-start}
  .top .nav ul{flex-direction:column;background:#fff;padding:80px 0 20px;width:100%;margin-top:0}
  .top .nav ul li a{height:50px;line-height:50px;border-bottom:1px solid #eee;color:#333;padding:0 30px}
  .top .nav ul li a:hover{color:var(--blue2)}
  .top .nav ul li .iconfont{position:absolute;right:10px;top:5px;height:40px;width:40px;display:flex;align-items:center;justify-content:center;color:#999;transform:rotate(90deg);z-index:10}
  .top .nav ul li{position:relative}
  .top .nav ul li ul{display:none;position:static;background:transparent;padding:0;box-shadow:none;border-radius:0}
  .top .nav ul li:hover ul{display:none}
  .top .nav ul li ul.on{display:block}
  .top .nav ul li ul li a{padding-left:50px;font-size:15px}
  .mobbutton{display:block;width:30px;height:25px;position:relative;z-index:1000}
  .mobbutton span,.mobbutton:after,.mobbutton:before{content:"";width:30px;height:4px;display:block;position:absolute;background:linear-gradient(255deg,#0069D7 42%,#53F1A4 95%);border-radius:4px;transition:.3s}
  .mobbutton span{top:10px}
  .mobbutton:after{top:0}
  .mobbutton:before{bottom:0}
  .mobbutton.on span{display:none}
  .mobbutton.on:after{transform:rotate(45deg);top:10px}
  .mobbutton.on:before{transform:rotate(-45deg);bottom:10px}
  .header .top{border-radius:14px;padding:12px 15px;margin:10px 15px}
  .header.small .top{padding:8px 15px}
  .nav-lang-mobile{display:block}
  .nav-divider{display:block;height:1px;background:#ddd;margin:10px 30px;list-style:none}
  .top .logo img{max-height:36px}
  .language{display:none}

  /* -- Banner -- */
  .bannerbox{height:70vh}
  .banner .w1200{max-width:100%;left:0;margin-left:0;transform:none;padding:20px}
  .banner .w1200 .slider-txt{width:100%;padding:10px}
  .banner .w1200 .slider-txt .titleh1{font-size:32px}
  .banner .w1200 .slider-txt .sub-title{font-size:16px;padding-bottom:20px}
  .bannermore{flex-direction:column;gap:8px}
  .bannermore .btn{padding:12px 20px;font-size:14px;justify-content:center}
  .bannermore .btn.bbtn{width:auto}
  .swiper_box{display:none}
  .autoplay-progress{display:none}

  /* -- Endura -- */
  .endurabox{flex-direction:column;gap:20px;padding:20px;text-align:center}
  .eimg img{max-width:250px;margin:auto}
  .etxt span{font-size:24px}
  .etxt span:nth-child(2){font-size:18px}
  .emore{display:flex;justify-content:center}

  /* -- Clinical Challenge -- */
  .CLINICAL{padding:40px 20px}
  .CLINICAL h2,.WHY_ENDURA h2,.PRODUCT_PLATFORM h2{font-size:28px;padding:20px 0 10px}
  .CLINICAL p,.WHY_ENDURA p,.PRODUCT_PLATFORM p{font-size:16px}
  .CLINICALbox{padding-top:20px}
  .clinicalli{flex:0 0 100%}
  .clinicaltxt p{font-size:14px}

  /* -- Why Endura -- */
  .WHY_ENDURA{padding:40px 20px;background-size:cover}
  .indexvideo{margin-top:20px}
  .indexvideotxt ul li{max-width:100%;font-size:16px;padding:12px 20px}
  .ivideobox{min-height:180px}
  .ivideobox .iconfont{font-size:40px;padding:12px 8px 12px 15px}

  /* -- Product Platform -- */
  .PRODUCT_PLATFORM{padding:40px 20px 0}
  .hali{flex-direction:column;padding:20px;text-align:center;align-items:center}
  .haliimg img{max-width:100px;margin:auto}
  .halitxt p{text-align:center}
  .primg img{width:100%}
  .ha .w1200{padding:0 10px}
  .hamore a{font-size:15px;padding:12px 20px}

  /* -- Who We Serve -- */
  .WHO_WE_SERVE{padding:40px 20px}
  .whobox{padding:20px 0}
  .wholi{flex-direction:column;padding:20px;gap:10px;text-align:center}
  .wholi h3{font-size:20px;flex:auto}
  .wholi p{flex:auto;font-size:15px}
  .wholi a{width:100%;flex:auto}
  .lodcontact{padding:20px 20px;border-radius:16px}
  .lodcontact h3{font-size:22px}
  .lodcontact p{font-size:14px}
  .loacontactbox{flex-direction:column;align-items:center;gap:15px}
  .loacontactbox a{width:100% !important}

  /* -- Banner2 (subpages) -- */
  .banner2{min-height:300px !important;padding-top:120px !important;background-size:cover !important;background-position:center center !important}
  .banner2 .w1200{height:240px !important;justify-content:flex-end;padding:20px}
  .banner2 h1{font-size:26px;padding-top:10px}
  .banner2 p{font-size:14px;max-width:100%}
  .banner2 .titleh1{font-size:18px}

  /* -- CTA Banner -- */
  .cta-banner{padding:20px;font-size:22px}
  .cta-banner .w1200{flex-direction:column;height:auto;gap:15px;text-align:center;padding:20px 0}

  /* -- Footer -- */
  .footerbox{flex-direction:column;gap:20px}
  .flogobox,.fnavbox,.fcontactbox{flex:auto;min-width:auto}
  .flogobox p{max-width:100%}
  .fnavbox a,.fcontactbox li{font-size:15px}
  .ftext{flex-direction:column;gap:8px;text-align:center}
  .copyright{font-size:12px}

  /* -- About Page -- */
  .mission-section{padding:40px 20px;gap:20px}
  .mission-right{flex-direction:column}
  .hero-image{min-height:200px;flex:auto}
  .benefits{flex:auto;padding:15px}
  .benefit-item{gap:15px}
  .icon img{width:60px;height:60px}
  .about-page h2{margin:15px 0}
  .about-page h2 span{font-size:22px}
  .values-section{padding:40px 20px}
  .section-tag{font-size:11px}
  .cards{grid-template-columns:1fr;gap:15px}
  .value-card{padding:15px 15px 100px 15px}
  .value-card h3{font-size:18px}
  .value-card p{font-size:14px}
  .iconbox{width:60px;height:60px;margin:-80px 0 0 -15px}
  .iconbox .iconfont{font-size:24px}
  .journey-section{padding:20px;background-size:100% auto}
  .journey-section h2{font-size:26px}
  .journey-section p{max-width:100%}
  .journey-cards{grid-template-columns:1fr;gap:15px}
  .timeline{flex-wrap:wrap;gap:10px;justify-content:flex-start}
  .service-grid{grid-template-columns:1fr;gap:15px}
  .service-card{min-height:auto;padding:20px}
  .services-section{padding:20px;margin:0 10px}

  /* -- Product Page -- */
  .surface{padding:30px 20px}
  .surface h2{font-size:20px}
  .surface p{font-size:14px}
  .section-product{background-size:100% auto}
  .values-section{padding:40px 20px}
  .section-textbox{max-width:100%}
  .section-textbox h2{font-size:28px}
  .section-textbox p{font-size:14px}
  .steps-section{padding:20px 0 40px}
  .step-card{min-height:auto;padding:25px 15px}
  .step-circle{width:140px;height:140px}
  .step-circle img{width:120px;height:120px}
  .step-card h3{font-size:17px}
  .step-card p{font-size:14px}
  .container{width:100%;padding:0 15px}
  .tech-left h2{font-size:28px}
  .tech-left p{font-size:16px}
  .feature-card{min-height:auto;padding:25px 15px}
  .feature-card h3{font-size:22px}
  .feature-card p{font-size:16px}
  .cta-section h2{font-size:24px}
  .btn-primary,.btn-outline{min-width:auto;width:100%;font-size:14px}

  /* -- Evidence & Quality Page -- */
  section{padding:40px 0}
  h2.title{font-size:24px;margin-bottom:30px}
  .grid3{grid-template-columns:1fr;gap:16px}
  .card{flex-direction:row;padding:15px;align-items: flex-start;}
  .ph .iconfont{width:50px;height:50px;font-size:28px}
  .card h3{font-size:16px}
  .card p{font-size:14px}
  .card2{padding-bottom:5px}
  .card_title{gap:15px;padding:15px 15px 0}
  .card_title .iconfont{width:60px;height:60px;font-size:28px}
  .quality-grid{grid-template-columns:1fr;gap:20px}
  .btn{font-size:14px;padding:12px 20px;text-align:center;display:block}
  .qualitybox{padding-left:0;border-left:none}

  /* -- Resources Page -- */
  .resource-section{padding:40px 0}
  .main-title{font-size:24px}
  .sub-title{font-size:14px}
  .card-grid{grid-template-columns:1fr;gap:20px}
  .card-left{width:100%;}
  .resource-card img{max-width:100%}
  .card-right h3{font-size:18px}
  .card-right p{font-size:14px}
  .group-title{font-size:18px}
  .feature-grid{grid-template-columns:repeat(2,1fr);gap:15px}
  .feature-card{padding:25px 15px}
  .feature-card h3{font-size:16px}
  .feature-card p{font-size:14px}
  .featuricon .iconfont{width:60px;height:60px}
  .featuricon .iconfont::before{font-size:36px}
  .partner-section{padding:40px 0}
  .faq-wrap{margin-top:40px}
  .faq-title{font-size:24px}
  .faq-question{font-size:16px;padding:15px 20px}
  .faq-answer{padding:0 20px 20px;font-size:14px}

  /* -- Contact Page -- */
  .contact-wrapper{width:100%;flex-direction:column;margin:20px 0;gap:20px}
  .left-panel,.right-panel{flex:auto}
  .card{padding:20px;border-radius:14px}
  .contact-wrapper h2{font-size:20px;margin-bottom:20px}
  .form-row{flex-direction:column;gap:10px;margin-bottom:10px}
  .full{margin-bottom:10px}
  input,select,textarea{height:42px;font-size:14px}
  textarea{height:100px}
  .submit-btn{height:48px;font-size:18px}
  .info-item{padding:15px 0}
  .icon-box{width:50px;height:50px}
  .icon-box .iconfont{font-size:22px}
  .info-title{font-size:16px}
  .info-text{font-size:15px}
  .map-box{height:200px}
  .map-marker{font-size:16px;padding:8px 15px}

  /* -- Misc -- */
  .w1200,.w1370{max-width:100%;padding:0 15px}
  .CLINICALimg img,.primg img{width:100%;height:auto}
  .benefit-item{padding:8px 0}
  .ncontent h4{font-size:15px}
  .ncontent p{font-size:14px}
}

/* ===== 480px ===== 小屏手机 ===== */
@media screen and (max-width:480px){
  .banner .w1200 .slider-txt .titleh1{font-size:26px}
  .banner .w1200 .slider-txt .sub-title{font-size:14px}
  .CLINICAL h2,.WHY_ENDURA h2,.PRODUCT_PLATFORM h2{font-size:22px}
  .etxt span{font-size:20px}
  .banner2{min-height:300px !important;padding-top:120px !important}
  .banner2 .w1200{height:180px !important}
  .banner2 h1{font-size:22px}
  .feature-grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .footer{padding:20px 10px}
}

