@charset "utf-8";
/* CSS Document */

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      font-family: "MySourceHanSans","Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", sans-serif;
    }

    body {
      color: #1f2d3d;
      background: #fff;
      -webkit-font-smoothing: antialiased;
    }



@font-face {
    font-family: "MySourceHanSans";
    src: url("SourceHanSansCN-Regular.otf") format("opentype");
      font-style: normal;
}



    a {
      text-decoration: none;
      color: inherit;
    }

    /* ===== 顶部导航 ===== */
    .header {
      position: relative;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px;
      padding: 0 48px;
      background: linear-gradient(90deg, #cdd1ea 0%, #c5f7f8 100%);
    }

    .header_cen {
      position: relative;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
       width: 1000px; margin: 0px auto;
          
    }



    
    .logo {
      display: flex;
      align-items: center;
      font-size: 19px;
      font-weight: 700;
      color: #1a2536;
      letter-spacing: 0.5px;
    }

    .logo .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2f7fe0, #19a7e8);
      margin-right: 10px;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 38px;
    }

    .nav a {
      position: relative;
      font-size: 16px;
      color: #2a3a4d;
      padding: 6px 0;
      transition: color .2s;
    }

    .nav a:hover {
      color: #1e6fd0;
    }

    .nav a.active {
      color: #1e6fd0;
      font-weight: 600;
    }

    .nav a.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, #2f7fe0, #19a7e8);
    }

    /* ===== Banner ===== */
	.sy_banner{ width:100%; }
   	.sy_banner img{ width: 100%;}

    /* 三个悬浮按钮卡片 */
    .cards {
      position: relative;
      z-index: 10;
      max-width: 1000px;
      margin: -70px auto 0;
  
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px; 
      display: flex;
      align-items: center;
      justify-content:space-between; padding-bottom: 30px;    }

   .card {
  position: relative;
  border-radius: 21px;

  background: linear-gradient(135deg, #b5bce6 0%, #e3e6f5 25%, #cffbfc 50%, #e3e6f5 75%, #b5bce6 100%);
  box-shadow: 0 14px 36px rgba(13, 63, 134, 0.18);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-sizing: border-box;
  transition: transform .28s ease, box-shadow .28s ease;
  width: 293px;
  height: 185px; 
}


.card a{ display: block; width: 100%; height: 100%;border-radius: 21px;  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 38px;
}



/* 边框伪元素 */
 .card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(135deg, #118997, #b1bae3);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
} 

/* 悬停效果 - 只保留位移和阴影，背景不变 */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(20, 33, 61, 0.18);
  /* 删除了 background: none */
}

    .card-inner {
      display: contents;
    }

    .card .ic {
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .card .ic img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .card .txt h3 {
      font-size: 25px;
      font-weight: 700;
      color: #14213d;
    }

    .card .txt p {
      font-size: 13px;
      color: #6b7a90;
      margin-top: 6px;
    }

    /* ===== 通用区块标题（带蓝色横线） ===== */
    .section {
      padding: 40px 24px 50px 24px;
    }

    .section.alt {
      background: #fff;
    }

    .sec-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-bottom: 46px;
    }
    

    .sec-title .line {
      width: 60px;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, #2f7fe0, #19a7e8);
    }

    .sec-title h2 {
      font-size: 30px;
      font-weight: 800;
      color: #14213d;
      letter-spacing: 2px;
    }

    /* ===== 为什么选择我们 ===== */
    .why-grid {
      max-width: 1000px; 
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;display: flex;
      align-items: center;
      justify-content:space-between; 
    }

    .why-card {
      background: #fff;
      border: 1px solid #eef2f7;
      border-radius: 14px;
      padding: 32px 30px;
      box-shadow: 0 12px 32px rgba(20, 33, 61, 0.10);
      display: flex;
      align-items: center;
      gap: 22px;
      cursor: pointer;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      width: 354px; height: 142px; box-sizing: border-box;
    }

    .why-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 44px rgba(20, 33, 61, 0.18);
      border-color: #c7dbf6;
    }

    .why-card .ic img {
      transition: transform .3s ease;
    }

    .why-card:hover .ic img {
      transform: scale(1.08);
    }

    .why-card h3 {
      transition: color .3s ease;
    }

    .why-card:hover h3 {
      color: #1e6fd0;
    }

    .why-card .ic {
      flex: 0 0 70px;
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .why-card .ic img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(47, 127, 224, 0.18));
    }

    .why-card .body {
      flex: 1;
      min-width: 0;
    }

    .why-card h3 {
      font-size: 20px;
      font-weight: 700;
      color: #14213d;
      margin-bottom: 10px;
    }

    .why-card p {
      font-size: 14px;
      line-height: 1.8;
      color: #6b7888;
    }

    /* ===== 服务保障体系 ===== */

        .sectionfy {
      padding: 40px 24px 10px 24px;
    }

    .sectionfy.alt {
      background: #fff;
    }
    .svc-grid {
      max-width: 1000px; 
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      padding: 60px 0px 40px 0px;
    }

    .svc-card {
      position: relative;
      border-radius: 18px;
      padding: 56px 30px 30px 30px;
      background: linear-gradient(45deg, #8fbdfb 0%, #d0fcfd 50%, #83f2fd 100%);
      border: 1px solid #b9dbf7;
      box-shadow: 0 10px 30px rgba(20, 33, 61, 0.08);
      text-align: center;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      cursor: pointer;
     box-sizing: border-box;
    }

    .svc-card .badge {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 64px;
      height: 64px;
      filter: drop-shadow(0 6px 14px rgba(31, 147, 221, 0.30));
      transition: transform .3s ease;
    }

    .svc-card h3 {
      font-size: 20px;
      font-weight: 700;
      color: #14213d;
      margin-bottom: 12px;
    }

    .svc-card p {
      font-size:16px;
      line-height: 1.85;
      color: #acacac;
    }

    .svc-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 44px rgba(31, 86, 180, 0.22);
      border-color: #6fb1f5;
    }

    .svc-card:hover .badge {
      transform: translateX(-50%) scale(1.10);
    }

    /* ===== 合作流程（bj.png 背景 + 4 段文字叠在绿框椭圆内）===== */
    .sec-title.sec-title-img {
      margin-bottom: 28px;
    }

    .sec-title.sec-title-img .title-line {
      height: 10px;
      width: 132px;
      display: block;
      object-fit: contain;
    }

    .sec-title.sec-title-img .title-line-l {
      transform: scaleX(-1);
    }
    .title-text{
      font-size: 30px;
      font-weight: bold;
    }

    /* 镜像：右端贴深蓝 */

    .flow-card {
      max-width: 1080px;
      margin: 0 auto;
      position: relative;
      height: 212px;
      background: url('../images/bj.png') center/100% 100% no-repeat;
      margin-top: 60px;
      
    }
    .flow--grid{
      width: 86%;
      padding-top: 140px;
      display: flex;
      justify-content:space-between;
      margin:0 auto; 
      
    

    }
      .flow--grid div{
        width: 140px;
        text-align: center;
      }

      .flow--grid div h3{
         color: #14213d; padding-bottom: 10px;
      }
    .flow--grid div p{
         color: #9c9c9d; 
      }




/*===========风险管理============*/

  .sec-titlegl {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 40px;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }

    .sec-titlegl .line {
      width: 5px;
      height: 28px;
      background: linear-gradient(180deg, #2f7fe0, #19a7e8);
      border-radius: 3px;
    }

    .sec-titlegl h2 {
      font-size: 28px;
      font-weight: 700;
      color: #14213d;
      letter-spacing: 1px;
    }

    .features-grid {
      max-width: 1000px; 
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 284px);
      display: flex;
      justify-content: space-between;
      align-items: centers;
      gap: 20px;
    }

    .feature-card {
      width: 280px;
      height: 310px;
      background: #fff;
      border: 1px solid #e8eef4;
      border-radius: 14px;
      padding: 30px 24px 28px;
      text-align: center;
      box-shadow: 0 4px 16px rgba(20, 33, 61, 0.06);
      transition: all .3s ease;
      cursor: pointer;
      box-sizing: border-box;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(20, 33, 61, 0.12);
      border-color: #c7dbf6;
    }

    .feature-card .icon-box {
      width: 130px;
      height: 123px;
      margin: 0 auto 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border-radius: 0; 
    }

    .feature-card .icon-box img {
      width: 116px;
      height: 123px;
      object-fit: contain;
      display: block;
    }

    .feature-card h3 {
      font-size: 20px;
      font-weight: 700;
      color: #062279;
      margin-bottom: 10px;
      letter-spacing: 0.5px;
    }

    .feature-card p {
      font-size: 13px;
      line-height: 1.7;
      color: #6b7888;
       width: 185px;  margin: 0px auto;
    }

    .risks-grid {
      max-width: 1000px; 
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .risk-card {
      position: relative;
      background: #fff;
      border: 1px solid #e8eef4;
      border-radius: 16px;
      padding: 2px 24px 40px 24px;
      text-align: center;
      box-shadow: 0 6px 20px rgba(20, 33, 61, 0.06);
      overflow: hidden;
      transition: all .3s ease;
      cursor: pointer;
    }

    .risk-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(20, 33, 61, 0.12);
    }

    .risk-card .badge {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 56px;
      z-index: 2;
      object-fit: contain;
    }

    .risk-card .icon-box {
      width: 72px;
      height: 72px;
      margin: 0 auto 16px;
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border-radius: 0;
    }

    .risk-card .icon-box img {
      width: 72px;
      height: 72px;
      object-fit: contain;
      display: block;
    }

    .risk-card h3 {
      font-size: 18px;
      font-weight: 700;
      color: #062279;
      margin-bottom: 12px;
      letter-spacing: 0.5px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e8eef4;
    }

    .risk-card p {
      font-size: 13px;
      line-height: 1.7;
      color: #6b7888;
    }

    .pain-points-grid {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 45px; 
    }

    .pain-section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 24px; 
    }

    .pain-point-card {
      background: linear-gradient(180deg, #a5d9fe 0%, #ffffff 100%);
      border: 1px solid #8dacb1;
      border-radius: 20px;
      padding: 40px 10px;
      text-align: center;
      box-shadow: 0 8px 24px rgba(31, 147, 221, 0.12);
      transition: all .3s ease;
      cursor: pointer;
      max-width: 350px;  
    }

    .pain-point-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(31, 147, 221, 0.2);
    }

    .pain-point-card .icon-box {
      width: 76px;
      height: 76px;
      margin: 0 auto 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border-radius: 0;
      box-shadow: none;
    }

    .pain-point-card .icon-box img {
      width: 76px;
      height: 76px;
      object-fit: contain;
      display: block;
    }

    .pain-point-card h3 {
      font-size: 20px;
      font-weight: 700;
      color: #14213d;
      margin-bottom: 14px;
    }

    .pain-point-card p {
      font-size: 14px;
      line-height: 1.8;
      color: #4f6075;
       width: 70%; margin:0 auto;
    }

    .system-section {
      padding: 0px 24px;
    }

    .system-container {
      max-width: 1000px;
      margin: 0 auto;
    }

    .system-flow {
      position: relative;
      padding: 0px 40px;
      background-image: url('../images/fx_tx.jpg');
      background-size: 100% auto;
      background-position: center top ;
      background-repeat: no-repeat;
      border-radius: 20px;
      overflow: hidden;

    }
    .system-nro{
      width: 97%;
      display: flex;
      align-items: center;
      justify-content:space-between;     
      padding-top: 140px;   height: 200px;
    }


    .system-item {     
      z-index: 1;
      flex: 0 0 120px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: 180px; font-size: 14px;
       
    }


    .system-item p {
      font-size: 14px;
      line-height: 1.6;
      color: #8a96a3;
      max-width: 160px; background: #ccc;
    }



    


    /*===================解决方案======================*/

/* ===== 三个解决方案卡片 ===== */
    .solutions-section {
      position: relative;
      z-index: 10;
      max-width: 1000px;
      margin: 110px auto 0;
      padding: 0 24px 80px;
    }

    .solutions-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    .solution-card {
      background: #fff;
      border-radius: 16px;
      padding: 40px 30px 36px;
      box-shadow: 0 8px 32px rgba(13, 63, 134, 0.10);
      border: 1px solid #eef2f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      cursor: pointer;
    }

    .solution-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 48px rgba(13, 63, 134, 0.18);
      border-color: #c7dbf6;
    }

    .solution-card .card-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .solution-card .card-icon img {
      width: 100%;
      height: 100%;
      
     
    }

    .solution-card h3 {
      font-size: 22px;
      font-weight: 700;
      color: #14213d;
      margin-bottom: 14px;
      letter-spacing: 1px;
    }

    .solution-card p {
      font-size: 14px;
      line-height: 1.8;
      color: #6b7888;
      margin: 0;
    }



/*==================运维解决方案====================*/

/* 描述 */
    .overview-section {
      max-width: 1000px;
      margin: 0 auto;
      padding: 50px 0px  0px 0px;
    }

    .overview-section p {
      font-size: 15px;
      line-height: 1.9;
      color: #4f6075;
      text-align: justify;
    }
 .section-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 34px;
    }

    .section-title::before {
      content: "";
      width: 4px;
      height: 24px;
      background: linear-gradient(180deg, #2f7fe0, #19a7e8);
      border-radius: 2px;
    }

    .section-title h2 {
      font-size: 22px;
      font-weight: 700;
      color: #14213d;
    }



/* 两大核心能力 */
    .capability-section {
      max-width: 1000px;
      margin: 0 auto;
      padding: 40px 0px 40px 0px;
    }

    .capability-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 34px;  padding: 10px 0px;
       
    }

    .capability-card {
      background: #fff;
      border: 1px solid #e8eef4;
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 6px 5px rgba(182, 234, 244, 0.5);
      transition: all .3s ease;
    


    }

    .capability-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(20, 33, 61, 0.12);
      border-color: #c7dbf6;
    }

    .capability-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 10px;
    }

    .capability-icon {
      width: 70px;
      height: 70px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .capability-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .capability-header h3 {
      font-size: 30px;
     font-weight:400;
      color: #14213d;
    }

    .capability-card ul {
      list-style: none;
      padding-left: 24px;
    }

    .capability-card li {
      font-size: 14px;
      color: #4f6075;
      line-height: 2;
      position: relative;
      padding-left: 16px;
    }

    .capability-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 12px;
      width: 6px;
      height: 6px;
      background: #14213d;
      border-radius: 50%;
    }

    .value-section {
      padding: 0px 0px;
    }

    .value-container {
      max-width: 1000px;
      margin: 0 auto;
    }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 50px;
    }

    .value-card {
      background: #fff;
      border: 1px solid #e8eef4;
      border-radius: 16px;
      padding: 28px 24px;
      text-align: center;
      box-shadow: 0 6px 20px #e4ffff;
      transition: all .3s ease;
      box-shadow: 0 5px 6px rgba(215, 240, 245, 0.7);
    }

    .value-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(20, 33, 61, 0.12);
    }

    .value-card h4 {
      font-size: 17px;
      font-weight: 600;
      color: #14213d;
      margin-bottom: 10px;
    }

    .value-card p {
      font-size: 13px;
      color: #6b7888;
      line-height: 1.6;
    }

    .flow-section {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      padding: 30px 0;
    }

    .flow-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .flow-circle {
      width: 120px;
      height: 120px;
      background: linear-gradient(135deg, #2f7fe0 0%, #19a7e8 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      line-height: 1.4;
      box-shadow: 0 8px 24px rgba(31, 147, 221, 0.3);
    }

    .flow-center {
      width: 140px;
      height: 140px;
      background: linear-gradient(135deg, #1e6fd0 0%, #0d5cb8 100%);
      font-size: 18px;
    }

    .flow-arrow {
      width: 40px;
      height: 2px;
      background: linear-gradient(90deg, #b9dbf7, #1e6fd0);
      position: relative;
    }

    .flow-arrow::after {
      content: "";
      position: absolute;
      right: 0;
      top: -4px;
      width: 0;
      height: 0;
      border-left: 8px solid #1e6fd0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .scene-section {
      padding: 60px 24px;
      background: #fff;
    }

    .scene-container {
      max-width: 1000px;
      margin: 0 auto;
    }

    .scene-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    .scene-card {
      background: #fff;
      border: 1px solid #e8eef4;
      border-radius: 16px;
      padding: 30px 24px;
      text-align: center;
      transition: all .3s ease;
      box-shadow: 0 6px 10px #e4ffff;
    }

    .scene-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(20, 33, 61, 0.2);
    }

    .scene-card h4 {
      font-size: 17px;
      font-weight: 600;
      color: #14213d;
      margin-bottom: 12px;
    }

    .scene-card p {
      font-size: 13px;
      color: #6b7888;
      line-height: 1.7; width: 85%; margin: 0px auto;
      width: 70%; margin: 0px auto;
    }




/*==================小程序开发===============*/


/* ===== 主体内容:解决方案详情 ===== */
    .solution-wrap {
      max-width: 1050px;
      margin: 48px auto 20px;
      padding: 0 24px;
    }

    /* 方案概述 - 蓝色竖条标题样式 */
    .overview-sectionx {
      margin-bottom: 52px;
    }

    .section-title-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px; position: relative;
    }

    .section-title-bar::before {
      content: "";
      width: 4px;
      height: 28px;
      background: linear-gradient(180deg, #2f7fe0, #19a7e8);
      border-radius: 2px;
  

    }

    .section-title-bar h2 {
      font-size: 26px;
      font-weight: 700;
      color: #14213d;
      letter-spacing: 1px;
    }

    .overview-content {
      font-size: 15px;
      line-height: 1.9;
      color: #3b4c62;
    }

    /* 企业问题 - 4卡片网格(设计稿样式) */
    .problem-section {
      margin-bottom: 48px;
    }

    .problem-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 24px;
    }

  .problem-bank{
      text-align: center;
     
    }

    .problem-card {
      background: #ffffff;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 4px 4px rgba(4, 149, 176, 0.2);
      border: 1px solid #e8eef4;
      transition: all 0.3s ease;
      margin-bottom: 10px;
      border: 1px #d9f4ff solid;
    }

    .carkLine{width: 100%;  position: relative;}
     .carkLine::after{content: "";
      position: absolute;
      left: 0;
      top: 32px; width: 8px; height: 109px; background: #095da5;}


    .problem-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(20, 33, 61, 0.12);
      border-color: #c7dbf6;
    }

    .problem-card .icon-img {
      height: 93px;
      margin: 15px auto 8px;
      object-fit: contain;
    }

    .problem-card h4 {
      font-size: 16px;
      font-weight: 600;
      color: #1d1f52;
      margin-bottom: 1px;
      margin-bottom: 5px;
    }

    .problem-card .subtitle {
      font-size: 15px;
      color: #1d1f52;
      margin-bottom: 16px;
    }

    .problem-bank .desc {
      font-size: 13px;
      color: #333333;
      line-height: 1.6;
      padding-top: 12px;
     
    }

    /* 全流程服务区域 - 图片 + 数据能力卡片 */
    .service-section {
      margin: 48px 0;
    }

    .service-flow-img {
      width: 100%;
      max-width: 900px;
      margin: 0 auto 32px;
      display: block;
    }

    .service-flow-img img {
      width: 100%;
      height: auto;
      border-radius: 12px;
    }

    .service-title {
      text-align: center;
      font-size: 28px;
      font-weight: 700;
      color: #0f2640;
      margin-bottom: 48px;
      padding-top: 20px;
    }

    /* 数据能力卡片 - 渐变色背景 */
    .capability-gridxcx {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1000px;
      margin: 0 auto;
      
    }

    .capability-cardxcx {
      background: linear-gradient(180deg, #ffffff 0%, #d6fefe 100%);
      border-radius: 16px;
      padding: 28px 16px 20px;
      text-align: center;
      border: 1px solid #e0f0f0;
     
      transition: all 0.3s ease;
      box-shadow: 0 4px 4px rgba(4, 149, 176, 0.2);
    }

    .capability-cardxcx:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(20, 33, 61, 0.1);
    }

    .capability-cardxcx img {
      
      height: 96px;
      margin-bottom: 12px;
      object-fit: contain;
    }

    .capability-cardxcx .label {
      font-size: 18px;
      font-weight: 500;
      color: #1a3f6a;
    }

    /* 沉淀用户资产与经营数据 */
    .assets-section {
      margin: 48px 0;
    }

    .assets-title {
      text-align: center;
      font-size: 28px;
      font-weight: 700;
      color: #0f2640;
      margin: 43px 0;
    }

    .assets-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1000px;
      margin: 0 auto;
    }

    .assets-card {
      background: linear-gradient(180deg, #f4f9fc 0%, #e5f8fe 100%);
      border-radius: 16px;
      padding: 28px 16px 20px;
      text-align: center;
      border: 1px solid #dde8f2;
    
      transition: all 0.3s ease;
      box-shadow: 0 4px 4px rgba(4, 149, 176, 0.2);
    }

    .assets-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 20px rgba(20, 33, 61, 0.06), 0 1px 0 #e4ffff;
    }

    .assets-card img {
     
      height: 75px;
      margin-bottom: 12px;
      object-fit: contain;
    }

    .assets-card .label {
      font-size: 16px;
      font-weight: 500;
      color: #1a3f6a;
    }

/*===========================算力解决方案=================================*/
.sectionsl {
      padding: 20px 24px;
      
    }

    .sec-titlesl {
      text-align: center;
      margin-bottom: 20px;
    }

    .sec-titlesl h2 {
      font-size: 28px;
      font-weight: 700;
      color: #011f59;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .sec-titlesl .sub {
      font-size: 14px;
      color: #6b7888;
    }

    .sec-titlesljfsz {
      text-align: center;
      margin-bottom: 20px;position: relative; width: 1000px; margin: 0 auto; height: 40px;
    }
     .sec-titlesljfsz::after{
      content: "";
       position: absolute; left: 0px; top:49%; background: #b2d4dc; width: 100%; height: 1px; z-index: 1;
     }

    .sec-titlesljfsz b {
      font-size: 28px;
      font-weight: 700;
      color: #011f59;
      letter-spacing: 1px;
      margin-bottom: 8px; background: #fff; z-index: 2; position: absolute;left: 0;right: 0; width: 280px; margin: 0 auto;
    }


    .desc-section {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
     
    }
     .desc-section h4{font-size: 18px; border-radius: 25px; width: 210px; height: 44px; line-height: 44px; text-align: center; margin: 0px auto 20px auto; background: #fff; box-shadow: 0 4px 4px rgba(4, 149, 176, 0.2); }
      
      
      .desc-section p {
      font-size: 15px;
      line-height: 1.9;
      color: #4f6075;
      text-align: justify;
      text-indent: 2em;
    }

    .features-gridsl {
      max-width: 1000px;
      margin: 30px auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .feature-cardsl {
      background: #fff;
      border: 1px solid #e8eef4;
      border-radius: 16px;
      padding: 32px 24px;
      text-align: center;
      box-shadow: 0 6px 20px rgba(20, 33, 61, 0.06);
      transition: all .3s ease;
      cursor: pointer;
     
      justify-self: center; 
    }

    .feature-cardsl:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(20, 33, 61, 0.12);
      border-color: #c7dbf6;
    }

    .feature-cardsl .icon-box {
      width: 68px;
      height: 68px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-cardsl .icon-box img {
     
      height: 90px;
      object-fit: contain;
    }

    .feature-cardsl h3 {
      font-size: 18px;
      font-weight: 600;
      color: #14213d;
      margin-bottom: 12px;
    }

    .feature-cardsl p {
      font-size: 13px;
      line-height: 1.7;
      color: #6b7888;
       width: 90%; margin: 0 auto;
    }

    .elastic-section {
      padding: 0px 24px;
    }

    .elastic-grid {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      padding-top:30px;
       
    }

    .elastic-card {
      background: linear-gradient(180deg, #e9f8ff 0%,#ffffff 10%, #b1eafe 80%);
      border: 1px solid #b9dbf7;
      border-radius: 16px;
      padding: 32px 24px;
      text-align: center;
      box-shadow: 0 8px 24px rgba(31, 147, 221, 0.2);
      transition: all .3s ease;
      cursor: pointer;
    }

    .elastic-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(31, 147, 221, 0.2);
    }

    .elastic-card .icon-box {
      width: 68px;
      height: 68px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .elastic-card .icon-box img {
     
      height: 68px;
      object-fit: contain;
    }

    .elastic-card h3 {
      font-size: 18px;
      font-weight: 600;
      color: #14213d;
      margin-bottom: 12px;
    }

    .elastic-card p {
      font-size: 13px;
      line-height: 1.7;
      color: #4f6075;
    }

    .value-sectionsl {
      padding: 60px 24px;
      background: #fff;
    }

    .value-containersl {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
       padding-top: 20px; 
    }

    .value-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
     
    }

    .value-top {
      background: #fff;
      border: 1px solid #b9dbf7;
      border-radius: 20px;
      padding: 8px 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      position: relative;
      height: 140px;
    }

    .value-top::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20px;
      background: linear-gradient(180deg, #fff 0%, #f3ffff 100%);
      border-radius: 0 0 19px 19px;
      pointer-events: none;
    }

    .value-top-item {
     display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;    /* 多行整体垂直居中，替代 align-items */
    height: 100%;
      z-index: 100;
    }

    .value-top-item .icon-boxsl {
       width: 100%;
      display: flex;
      align-items: center;
      justify-content: center; 
    }

    .value-top-item .icon-boxsl img {
     
      height: 82px;
      object-fit: contain; margin-bottom: 8px;
    }

    .value-top-item span {
      font-size: 16px;
      font-weight: 600;
      color: #14213d;
    }

    .value-middle {
      background: #fff;
      border: 1px solid #b9dbf7;
      border-radius: 20px;
      padding: 8px 20px;
      display: flex;
      align-items: center;
      gap: 24px;
      position: relative;
    }

    .value-middle::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20px;
      background: linear-gradient(180deg, #fff 0%, #f3ffff 100%);
      border-radius: 0 0 19px 19px;
      pointer-events: none;
    }

    .value-middle .icon-boxsl {
      width: 40%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;  
    }

    .value-middle .icon-boxsl img {
      height: 85px;
      object-fit: contain;
    }

    .value-middle .text-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      z-index: 100;
    }

    .value-middle .text-content span {
      display: block;
      background: #fff;
      border: 1px solid #b9dbf7;
      border-radius: 10px;
      padding: 15px 20px;
      font-size: 15px;
      font-weight: 600;
      color: #14213d;
      text-align: center;
    }

    .value-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .value-bottom-item {
      background: #fff;
      border: 1px solid #b9dbf7;
      border-radius: 12px;
      padding: 0 20px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
     font-weight: 600;
      color: #14213d;
      position: relative;
    }

    .value-bottom-item span {
      z-index: 100;
    }

    .value-bottom-item::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20px;
      background: linear-gradient(180deg, #fff 0%, #f3ffff 100%);
      border-radius: 0 0 11px 11px;
      pointer-events: none;
    }

    .value-right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-content: start;
    }

    .value-right-item {
      background: #fff;
      border: 1px solid #b9dbf7;
      border-radius: 12px;
      padding: 0 18px;
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
   
      position: relative;
       font-weight: 600;
      color: #14213d;
       font-size: 14px;
    }

    .value-right-item span {
      position: absolute;
      z-index: 100;
    }

    .value-right-item::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 20px;
      background: linear-gradient(180deg, #fff 0%, #f3ffff 100%);
      border-radius: 0 0 11px 11px;
      pointer-events: none;
    }

    .scene-sectionsl {
      padding: 60px 24px;
    }

    .scene-containersl {
      max-width: 1020px;
      margin: 0 auto;
    }

    .scene-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 30px;
    }

    .scene-tags .bj {
      display: inline-block;
      
      background: #fff;
      border-radius: 8px;
      font-size: 14px;
     font-weight: 600;
      color: #14213d;
      border: 1px solid #b9dbf7;
      box-shadow: 0 2px 8px rgba(20, 33, 61, 0.06);
      transition: all .3s ease;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      width: 155px; height: 58px; display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;   

    }

 


/*=================================算力解决方案====================================*/


    .footer {
      background: #f1f4f8;
      text-align: center;
      padding: 15px 20px;
      color: #14213d;
      font-size: 15px;
      letter-spacing: 1px;
      margin-top: 40px;
    }

 .footer b{ font-weight: normal; font-size: 16px; display: block;}
    .footer p{ font-size: 12px; color: #797979; padding-top: 5px;}

     /* ===== 公司简介 ===== */
    .about {
      max-width: 1000px;
      margin: 70px auto 30px;
      padding: 0 24px;
      display: flex;
      gap: 50px;
      align-items: stretch;
    }

    .about-img {
      
      border-radius: 14px;
      overflow: hidden;
     
    }

    .about-img img {
      display: block;
     
      height:500px;
      object-fit: cover;
    }

    .about-card {
      flex: 1;
      min-width: 0;
      background: #fff;
      border: 1px solid #ecf0f5;
      border-radius: 18px;
      padding: 38px 42px;
      box-shadow: 0 8px 30px rgba(20, 33, 61, 0.08);
    }

    .about-card h2 {
      font-size: 26px;
      font-weight: 800;
      color: #14213d;
      letter-spacing: 2px;
      margin-bottom: 22px;
      padding-left: 14px;
      border-left: 4px solid;
      border-image: linear-gradient(180deg, #2f7fe0, #19a7e8) 1;
    }

    .about-card p {
      font-size: 15px;
      line-height: 1.95;
      color: #4a5b71;
      text-indent: 2em;
      margin-bottom: 14px;
    }

    .about-card p:last-child {
      margin-bottom: 0;
    }



 /* ===== 联系我们===== */
    .contact {
      max-width: 1000px;
      margin: 70px auto 30px;
      padding: 0 24px;
      display: flex;
      gap: 20px;
      align-items: stretch;
      border: 1px solid #ecf0f5;
      border-radius: 18px;
      padding: 30px 42px;
      box-shadow: 0 8px 30px rgba(20, 33, 61, 0.08);
    }

  .contact-text {
      
      border-radius: 14px;
      overflow: hidden;
      width: 60%;
     
     
    }
   .contact-text h3 {
      font-size: 24px;
      color: #14213d;
      padding: 10px 0;
    }
    .contact-text h2 {
      font-size: 24px;
      color: #14213d;
      padding-bottom: 10px;
    }
    .contact-text p{ padding-bottom: 10px; color: #4a5b71; font-size: 15px;}
     .contact-text div{ padding-bottom: 10px; line-height: 30px; color: #4a5b71; font-size: 15px;}

    .contact-card {
      flex: 1;
      min-width: 0;
      background: #fff;
   
    }



    /* ===== Tablet & Mobile (≤860px) ===== */
    @media (max-width: 860px) {

      /* 防止横向溢出 */
      html, body {
        overflow-x: hidden;
        max-width: 100%;
      }

      * {
        box-sizing: border-box;
      }

      /* 网格和卡片溢出保护 */
      .features-grid,
      .risks-grid,
      .problem-grid,
      .capability-gridxcx,
      .assets-grid,
      .features-gridsl,
      .elastic-grid,
      .value-grid,
      .svc-grid,
      .solutions-grid,
      .pain-points-grid,
      .scene-grid,
      .capability-grid,
      .value-containersl,
      .why-grid,
      .cards {
        min-width: 0;
      }

      .features-grid > *,
      .risks-grid > *,
      .problem-grid > *,
      .capability-gridxcx > *,
      .assets-grid > *,
      .features-gridsl > *,
      .elastic-grid > *,
      .value-grid > *,
      .svc-grid > *,
      .solutions-grid > *,
      .pain-points-grid > *,
      .scene-grid > *,
      .capability-grid > *,
      .value-containersl > *,
      .why-grid > *,
      .cards > * {
        min-width: 0;
        max-width: 100%;
      }

      /* Header */
      .header {
        padding: 0 16px;
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        gap: 8px;
      }

      .header_cen {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 0;
      }

      .logo {
        font-size: 16px;
      }

      .nav {
        gap: 16px;
        flex-wrap: wrap;
      }

      .nav a {
        font-size: 14px;
        padding: 4px 0;
      }

      /* Banner */
      .sy_banner img {
        min-height: 160px;
        object-fit: cover;
      }

      /* Cards (首页三卡片) */
      .cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin: -40px auto 0;
        padding: 0 16px 5px 16px;
      }

      .card {
        width: 100%;
        max-width: 360px;
        height: auto;
        min-height: 120px;
        padding-top: 0px; 
      }
      .card a{padding-top: 20px;}

      .card .ic {
        width: 56px;
        height: 56px; margin-bottom: 10px;
      }
     .card a .txt h3{ font-weight: normal;}

   
      /* 企业IT运营四大特点 - 手机端一行一个 */
    
      /* Why choose us */
      .why-grid {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 10px 0px;
      }



      .cards {

      display: grid;
    
      gap: 16px; 
       }

      .why-card {
        width: 100%;
        max-width: 400px;
        height: auto;
        padding: 14px 20px;
      }

      .why-card .ic {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
      }

      .why-card h3 {
        font-size: 17px;
      }

      .why-card p {
        font-size: 13px;
      }

      /* Section titles */
      .sec-title {
        gap: 15px;
        margin-bottom: 8px; 
      }

      .sec-title h2,
      .title-text {
        font-size: 22px;
      }

      .sec-title .line {
        width: 36px;
        height: 2px;
      }

      .sec-title.sec-title-img .title-line {
        width: 60px;
      }



      
      .section {
        padding: 24px 16px 32px;
        padding-bottom: 0px;
      }

      /* Service grid */
      .svc-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px 16px 30px;
      }

      .svc-card {
        padding: 48px 20px 24px;
      }

      .svc-card h3 {
        font-size: 18px;
      }

      .svc-card p {
        font-size: 14px;
      }
.sec-title.sec-title-img {
    margin-bottom: 8px;
}
      /* Flow card */
      .flow-card {
        height: auto;
       
        padding: 10px 12px;
        background: none;
        margin-top: 10px;
      }

      .flow--grid {
        flex-direction: column;
        width: 100%;
        padding-top: 0;
        gap: 20px;
        display: grid;
  grid-template-columns: 1fr 1fr;

      }

      .flow--grid div {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        padding: 16px;
        background: linear-gradient(135deg, #e8f4ff 0%, #d0fcfd 100%);
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(20, 33, 61, 0.08);
      }

      .flow--grid div h3 {
        font-size: 17px;
      }

      .flow--grid div p {
        font-size: 13px;
      }

      .section-title-bar{  background: #fff;}
 
     .section-title-bar h2{font-size: 21px;}
    .problem-card h4{ height: 40px;  display:flex;align-items: center; justify-content: center; line-height: 20px;}





      /* Grids: 4-column → 2-column */
      .features-grid,
      .risks-grid,
      
      
      
      .features-gridsl,
      .elastic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 16px; 
      }

 .problem-grid,.capability-gridxcx,.assets-grid{
   grid-template-columns: repeat(2, 1fr);
        gap: 16px;
 }


      /* Grids: 3-column → 1-column or 2-column */
      .pain-points-grid,
     
      .scene-grid , .solutions-grid{
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 16px;
      }




      /* 2-column grids → 1-column */
      .capability-grid,
      .value-containersl {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 16px;
      }

      .value-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px; 
        padding-top: 10px;
       
      }

      /* System section */
      .system-section
      {
        padding: 0 16px;
      }

       .system-container{padding: 0 0px;}
      .system-flow {
        flex-direction: column;
        padding: 20px 16px;
      }

      .system-nro {
        width: 100%;
        display: none;
      }

      .system-item {
        flex: none;
        width: 100%;
      }

      .system-item p {
        width: 100%;
      }

      /* Flow section */
      .flow-section {
        flex-direction: column;
        gap: 16px;
        padding: 0px ;
      }
      .value-grid{margin-bottom: 20px; }

      .flow-arrow {
        transform: rotate(90deg);
      }


.solutions-section{margin: 10px 0; padding: 0px 24px; margin-bottom: 20px; min-height: 72vh; }



  .features-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0 0px;
         display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
      }

      .feature-card {
        width: 100%;
        max-width: 360px;
        height: auto;
        padding: 0px 10px;
       
      }
      .feature-card .icon-box{ margin-bottom: 10px;}
.feature-card h3{ font-weight: normal; font-size: 18px;}

.feature-card p{ width: 100%; font-size: 12px;}

      /* About */
      .about {
        flex-direction: column;
        gap: 24px;
        margin: 10px auto 30px auto;
        padding: 0 16px;
      }

      .about-img {
        width: 100%; display: none;
      }

      .about-img img {
        height: 250px;
      }

      .about-card {
        padding: 24px 20px;
      }

      .about-card h2 {
        font-size: 22px;
      }




/* 联系我们 */
.contact {
        flex-direction: column;
       width: 93%;
        margin: 40px auto;
        padding: 0 16px;
      }

      .contact-text {
        width: 100%; padding-top: 20px;
      }


      .contact-card {
        padding: 0; padding-bottom: 20px;
      }

      .contact-card h2 {
        font-size: 22px;
      }


      /* Solution cards */
      .solution-wrap {
        padding: 0 16px;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .overview-sectionx{margin-bottom: 20px;}

      .solution-card {
        padding: 28px 20px;
      }

      .solution-card h3 {
        font-size: 18px;
      }

      /* Overview sections */
      .overview-section,
      .capability-section,
      .value-section,
      .scene-section,
      .sectionsl,
      .pain-section,.value-container {
        padding: 30px 16px;
      }

      .section-title h2 {
        font-size: 18px;
      }

      /* Value cards */
      .value-top,
      .value-middle {
        height: auto;
        min-height: 100px;
        padding:0 16px;
      }

      .value-bottom,
      .value-right {
        gap: 10px;
      }



      /* 风险管理 - feature cards */
      .feature-card,      .risk-card {
        width: 100%;
        max-width: 320px;
        height: auto;
        padding: 24px 0px;
        margin: 0 auto;
       
      }

      .risks-grid .risk-card {
        width: 100%;
        max-width: 320px;
        height: auto;
        padding: 24px 0px;
        margin: 0 auto;
        height: 260px; 
      }
.risk-card p { font-size: 12px;padding: 0px 15px;}
      
      .feature-card .icon-box,
      .risk-card .icon-box {
        width: 80px;
        height: 80px;
      }

      .feature-card .icon-box img {
        width: 80px;
        height: 80px;
      }

      /* 算力 feature cards */

            /* 机房 */
      .feature-cardsl h3 {font-size: 15px; font-weight: normal; margin-bottom: 0px;}
.feature-cardsl p{ width: 100%;}
.sectionsl{ padding: 10px 16px; }
.feature-cardsl .icon-box{ margin-bottom: 10px;}

      .feature-cardsl {
        width: 100%;
        max-width: 320px;
        padding: 24px 10px;
      }

      /* Scenes tags */
      .scene-tags .bj {
        width: 140px;
        height: 44px;
        font-size: 13px; 
      }

      .value-middle .text-content span{ padding:5px 20px ;}
.value-middle .icon-boxsl img{height: 65px;}
.value-bottom-item,.value-right-item{height: 44px;}
.scene-tags{margin-top: 0px; padding: 0px; }
      /* Risk title */

    .sectionfy {
         padding: 10px 14px 10px 14px;
    }
    .sec-titlegl{ margin-bottom: 10px;}

      
      .sec-titlegl {
        padding: 0 0px;
      }

      .sec-titlegl h2 {
        font-size: 22px;
      }

      /* Pain point cards */
      .pain-point-card {
        max-width: 100%;
        padding: 32px 20px;
      }

      .pain-point-card p {
        width: 90%;
      }

      /* Capability cards */
      .capability-card {
        padding: 24px 20px;
      }

      .capability-header h3 {
        font-size: 24px;
      }

      /* Value containers */
      .value-left,
      .value-right {
        gap: 14px;
      }

      .features-gridsl{margin: 10px 0px;}

      /* 算力页面标题 */
      .sec-titlesl h2 {
        font-size: 22px;
      }
      .sec-titlesljfsz{width: 100%;}

      .sec-titlesljfsz b {
        font-size: 22px;
        width: auto;
        left: 50%;
        transform: translateX(-50%);
      }

      .desc-section {
        padding: 0 0px;
      }

      .desc-section h4 {
        width: 180px;
        height: 38px;
        line-height: 38px;
        font-size: 15px;
      }

      .desc-section p {
        font-size: 14px;
      }

      /* 解决方案卡片图标 */
      .solution-card .card-icon {
        width: 64px;
        height: 64px;
      }

      .solution-card h3 {
        font-size: 18px;
      }

      /* 算力卡片 */
      .feature-cardsl .icon-box img {
        height: 72px;
      }

      .elastic-card .icon-box img {
        height: 56px;
      }

      /* 场景区域 */
      .scene-sectionsl {
        padding: 40px 16px;
      }

      .scene-tags .bj .nr {
        font-size: 12px;
      }
    }

    /* ===== Small phones (≤480px) ===== */
    @media (max-width: 480px) {

      .header {
        padding: 0 5px; 
      }

      .header_cen {
        padding: 6px 0;
      }

      .logo {
        font-size: 14px;
      }

      .nav {
        width: 100%;
        justify-content: center;
        gap: 12px;
      }

      .nav a {
        font-size: 15px;
      }

      .sy_banner img {
        min-height: 120px;
      }

   /*    .card {
        padding: 10px 16px;
      } */

      .card .ic {
        width: 48px;
        height: 48px;
      }

      .card .txt h3 {
        font-size: 18px;
      }

      .why-card {
        padding: 20px 16px;
        gap: 16px;
      }

      .why-card .ic {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
      }

      .why-card h3 {
        font-size: 16px;
      }

      .sec-title h2,
      .title-text {
        font-size: 20px;
      }

      .section {
        padding: 20px 12px 0px 12px;
      }
   .risks-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 10px 0px;
         display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
      }
      

      .carkLine::after{background: #fff;}
     
 .service-title{margin-bottom: 20px; padding-top: 10px; font-size: 21px;}
 .service-flow-img{margin-bottom: 0px;}
 .problem-section{margin-bottom: 10px;}
 .problem-section{margin-bottom: 10px;}

    .service-section,.assets-section {
      margin: 18px 0; 
    }
.assets-section{margin-top: 30px;}

  .value-top-item .icon-boxsl img {
      height: 52px;
    }



 /* 运维标题 */
  .section-title{margin-bottom: 10px; }
.value-container{ padding-top: 0px;}
     .features-gridsl {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0px;
      }
  
  .capability-section{ padding-top: 0; }
      .assets-title{font-size: 21px; margin: 10px 0 20px 0; }
     
      

      .svc-grid {
        padding: 40px 0px 24px 0px
      }

      .flow--grid div {
        max-width: 100%;
      }

      .about-card {
        padding: 20px 16px;
      }

      .about-card h2 {
        font-size: 20px;
        padding-left: 10px;
      }


    .contact{
        padding: 0 16px;
      }

      .contact h2,  .contact h3 {
        font-size: 20px;
      
      }


      .solution-card {
        padding: 24px 16px;
      }

      .scene-tags .bj {
        width: 112px;
        font-size: 12px;
      }

      .scene-tags .bj .nr {
        font-size: 11px;
      }

      /* 算力标题 */
      .sec-titlesl h2,
      .sec-titlesljfsz b {
        font-size: 18px;height: 40px;line-height: 40px; s
      }

      .desc-section h4 {
        width: 160px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
      }

      /* 解决方案 */
      .solution-card .card-icon {
        width: 56px;
        height: 56px;
      }

      /* 算力卡片 */
      .feature-cardsl .icon-box img {
        height: 64px;
      }

      .elastic-card .icon-box img {
        height: 48px;
      }

      .elastic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0px;
      }

      .elastic-section{padding: 0px 16px;}
.elastic-card{padding: 7px 5px;}
.elastic-card h3{font-size: 16px; margin-bottom: 5px;}

.elastic-card .icon-box{margin: 0px auto;}

.value-sectionsl{ padding: 15px 0px 10px 0px;}
.sec-titlesl{ margin-bottom: 10px;}
      
      /* 场景区域 */
      .scene-sectionsl {
        padding: 30px 12px;
      }

      .footer {
        font-size: 12px;
        padding: 14px 12px;
        margin-top: 20px;
  
      }
    }