* {margin:0;padding:0;box-sizing:border-box;}
    html {scroll-behavior: smooth;}
    body {font-family: "Microsoft Yahei",sans-serif;color:#222;overflow-x:hidden;}

    /*===== 板块从下往上滑入动画 =====*/
    .scroll-section {
      opacity:0;
      transform: translateY(120px);
      transition: all 0.8s ease-out;
    }
    .scroll-section.active {
      opacity:1;
      transform: translateY(0);
    }

    /*===== Banner轮播 =====*/
    /* .banner-wrap {position:relative;overflow:hidden;}
    .banner-item {width:100%;flex-shrink:0;}
    .banner-inner {display:flex;width:300%;transition: transform 0.7s ease;} */

.banner-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 96 / 55;
  overflow: hidden;
  background: #000;
}

.banner-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.banner-item.active {
  opacity: 1;
  z-index: 2;
}

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

.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.3s ease;
}

.arrow-btn:hover {
  background: #e6212a;
}

.arrow-btn.prev {
  left: 24px;
}

.arrow-btn.next {
  right: 24px;
}

.dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  width: 32px;
  border-radius: 6px;
  background: #e6212a;
}

@media (max-width: 768px) {
  .arrow-btn {
    width: 40px;
    height: 40px;
  }

  .arrow-btn.prev {
    left: 12px;
  }

  .arrow-btn.next {
    right: 12px;
  }

  .dots {
    bottom: 12px;
  }
}
    
    /*===== 产品卡片hover背景放大 =====*/
    /* 产品中心标题样式 */
    .section-title-wrap {
  background: #fff;
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 20px;
}
/* 中文 产品中心，匹配原图字体粗细大小比例 */
.title-cn {
  font-family: "Microsoft Yahei", sans‑serif;
  font-size:37px;
  font-weight: 700;
  color: #111111;
  letter‑spacing: 4px;
}
.line-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.line-long {
  width: 56px;
  height: 6px;
  background: #e6212a;
  border-radius: 4px;
}
.line-dot {
  width: 10px;
  height: 6px;
  background: #e6212a;
  border-radius: 4px;
}
.title-en {
  font-family: "Microsoft Yahei", sans‑serif;
  font-size: 26px;
  color: #666666;
  letter‑spacing: 6px;
  margin-top: 2px;
}
/* 响应式：屏幕变小整体等比缩小，字体、线条同步缩放，样式比例不变 */
@media(max‑width:1200px){
  .title-cn{font‑size:60px;}
  .title-en{font‑size:38px;}
  .line-long{width:72px;}
  .line‑dot{width:15px;}
}
@media(max‑width:768px){
  .title-cn{font‑size:42px;letter‑spacing:2px;}
  .title-en{font‑size:26px;letter‑spacing:3px;}
  .line-long{width:54px;height:6px;}
  .line‑dot{width:12px;height:6px;}
}
@media(max‑width:480px){
  .title-cn{font‑size:32px;}
  .title-en{font‑size:20px;}
  .line-long{width:42px;height:5px;}
  .line‑dot{width:9px;height:5px;}
}
    .product-card {overflow:hidden;}
    .product-card .bg-layer {
      transition: transform 0.6s ease;
    }
    .product-card:hover .bg-layer {
      transform: scale(1.08);
    }
    .product_bg{
        background-image: url('/static/images/product_icon1.png') ;
        
    }

    .product-title{
         color: #000;
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 2rem;
        margin-top: 2rem;
    }
    .product-btn{
        background: #cc140a;
        color: #fff;
        border-radius: 1rem;
        padding-left: 1rem;
        padding-right:1rem;
        font-weight: 600;
    }
    .product-desc{
        color: #525252;
        font-weight: 600;
        font-size: 0.9rem;
        line-height: 2rem;
    }
    /*===== 行业解决方案：遮罩从下往上、底部横线从左到右 =====*/
    .solution-header{
    background:#ffffff;
    padding:20px 70px 40px 70px;
}
.inner-wrap{
    max-width:1920px;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.left-title{
    flex-shrink: 0;
}
.left-title .cn{
    font-family:"Microsoft YaHei",sans-serif;
    font-size:37px;
    font-weight:700;
    color:#111111;
    letter-spacing:4px;
    line-height:1.1;
}
.left-title .en{
    font-family:"Microsoft YaHei",sans-serif;
    font-size:26px;
    color:#666666;
    letter-spacing:6px;
    margin-top:12px;
}
.right-desc{
    max-width:65%;
    font-family:"Microsoft YaHei",sans-serif;
    font-size:14px;
    color:#222222;
    line-height:1.8;
    text-align: justify;
    text-align: right;
}

/* 平板 左右布局保留，字体缩小 */
@media(max-width:1400px){
    .left-title .cn{font-size:37px;}
    .left-title .en{font-size:26px;}
    .right-desc{font-size:14px;text-align: right;}
}
/* 小平板：改为上下布局 */
@media(max-width:1024px){
    .inner-wrap{
        flex-direction:column;
        align-items:flex-start;
        gap:30px;
    }
    .right-desc{
        max-width:100%;
    }
    .left-title .cn{font-size:52px;}
    .left-title .en{font-size:34px;}
    .right-desc{font-size:22px;}
}
/* 手机 */
@media(max-width:768px){
    .solution-header{padding:40px 20px;}
    .left-title .cn{font-size:40px;letter-spacing:2px;}
    .left-title .en{font-size:26px;letter-spacing:3px;}
    .right-desc{font-size:18px;line-height:1.7;}
}
@media(max-width:480px){
    .left-title .cn{font-size:32px;}
    .left-title .en{font-size:20px;}
    .right-desc{font-size:16px;}
}
    .solution-item {position:relative;overflow:hidden;}
    .solution-mask {
      position:absolute;
      left:0;right:0;bottom:0;
      height:0;
      background:rgba(0,0,0,0.45);
      transition: height 0.9s ease;
    }
    .solution-line {
      position:absolute;
      left:50%;
      bottom:12px;
      width:0%;
      height:3px;
      background:#e6212a;
      transform: translateX(-50%);
      transition: width 1s ease;
    }
    .solution-item.show .solution-mask {height:100%;}
    .solution-item.show .solution-line {width:80%;}

    /*===== 服务轮播 =====*/
    .service-carousel-wrap {overflow:hidden;position:relative;}
    .service-carousel-inner {display:flex;transition:transform 0.7s ease;}
    .service-car-item {flex-shrink:0;width:100%;}

    /*===== 地图点位跳动动画 =====*/
    @keyframes bounce-point {
      0%,100% {transform: translateY(0);}
      50% {transform: translateY(-8px);}
    }
    .map-point {
      animation: bounce-point 1.4s ease-in-out infinite;
    }

    /*导航样式*/
    .nav-link:hover {color:#e6212a;}

    /* ========== 底部联系我们 ========== */
footer{
    background:#c9c9c9;
    background:url("https://p3-flow-image-sign.byteimg.com/tos-cn-i-a9rns2rl98/gear-bg") center/cover;
    padding:45px 2%;
}
.footer-container{
    max-width:1260px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:25px;
}
@media(max-width:768px){
    .footer-container{grid-template-columns:1fr;}
}



/* 底部 */
 /* 外层容器 带齿轮背景 */
        .contact-wrap {
            width: 100%;
            background: url('/static/images/contact_bg.png');
            position: relative;
            overflow: hidden;
        }
        
        @keyframes gearRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* 内容层 高于背景齿轮 */
        .contact-content {
            position: relative;
            z-index: 2;
            max-width: 1400px;
            margin: 0 auto;
            width: 80%;
        }
        /* 标题区域 */
        .contact-title {
            text-align: center;
            margin-bottom: 30px;
            color: #ffffff;
            margin-top: 20px;
        }
        .contact-title h2 {
            font-size: 36px;
            font-weight: 500;
            letter-spacing: 2px;
            transition: all 0.3s ease;
        }
        .contact-title p {
            font-size: 20px;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 3px;
        }
        .contact-title h2:hover {
            transform: translateY(-4px);
            text-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }
        /* 三栏主布局 */
        .contact-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 30px;
            align-items: stretch;
        }
        /* 通用卡片样式 */
        .contact-card {
            background: transparent;
            border-radius: 4px;
            overflow: hidden;
            /* transition: all 0.4s cubic-bezier(0.2,0.8,0.2,1); */
            transform: translateY(0);
        }
        .contact-card:hover {
            /* transform: translateY(-10px); */
            /* box-shadow: 0 20px 40px rgba(0,0,0,0.3); */
        }
        /* 左侧前台图片卡片 */
        .card-left .card-img {
            width: 90%;
            height: 320px;
            overflow: hidden;
        }
        .card-left .card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        .card-left:hover .card-img img {
            transform: scale(1.08);
        }
        /* 中间表单模块 */
        .card-center {
            display: flex;
            flex-direction: column;
        }
        .form-header {
            width: 80%;
            margin-left: 20%;
            height: 100px;
            background: #ed2024;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .form-header svg {
            width: 80px;
            height: 80px;
            fill: #fff;
            transition: transform 0.4s ease;
        }
        .card-center:hover .form-header svg {
            transform: scale(1.15) rotate(8deg);
        }
        .form-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .form-item {
            display: flex;
            align-items: center;
            /* gap: 10px; */
            
        }
        .form-item label {
            color: #fff;
            width: 20%;
            font-size: 12px;
             white-space: nowrap;
        }
        .form-item input {
            flex: 1;
            height: 27px;
            padding: 0 12px;
            border: none;
            outline: none;
            border-radius: 2px;
            font-size: 12px;
            transition: box-shadow 0.3s;
            background: #fff;
        }
        .form-item input:focus {
            box-shadow: 0 0 0 3px rgba(237,32,36,0.4);
        }
        .submit-btn {
            width: fit-content;
            margin-top: 8px;
            padding: 8px 24px;
            background: #032737;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            margin-left: 20%;
        }
        .submit-btn:hover {
            background: #ed2024;
            letter-spacing: 1px;
        }
        /* 右侧地图卡片 */
        .card-right .card-map {
            width: 90%;
            height: 320px;
            margin-left: 10%;
            background: #fff;
            position: relative;
            overflow: hidden;
        }
        .map-icon-top {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 70px;
            height: 70px;
            background: #ed2024;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            transition: all 0.4s;
        }
        .card-right:hover .map-icon-top {
            transform: translateX(-50%) translateY(-8px) scale(1.1);
        }
        .map-icon-top svg {
            width: 42px;
            height: 42px;
            fill: #fff;
        }
        .map-bg {
            width: 100%;
            height: 100%;
            background: #e8f4fc;
            background-image: url("data:image/svg+xml,%3Csvg width='400' height='300' viewBox='0 0 400 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 120 L400 80 M20 180 L380 130 M60 240 L340 190' stroke='%23a0c8e8' stroke-width='3' fill='none'/%3E%3Ccircle cx='280' cy='170' r='10' fill='%23ed2024'/%3E%3C/svg%3E");
            background-size: cover;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: transform 0.6s ease;
        }
        .card-right:hover .map-bg {
            transform: scale(1.06);
        }

        /* ===== 响应式适配 ===== */
        /* 平板 两栏 */
        @media screen and (max-width: 1024px) {
            .contact-row {
                grid-template-columns: 1fr 1fr;
                gap: 24px;
            }
            .card-center {
                grid-column: span 2;
            }
            .form-header {
                height: 120px;
            }
        }
        /* 手机 单栏 */
        @media screen and (max-width: 768px) {
            .contact-row {
                grid-template-columns: 1fr;
            }
            .card-center {
                grid-column: span 1;
            }
            .contact-title h2 {
                font-size: 28px;
            }
            .contact-wrap {
                padding: 40px 15px;
            }
            .form-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }
            .form-item label {
                width: auto;
            }
            .card-left .card-img, .card-right .card-map {
                height: 260px;
            }
        }

/* 底部横线 */
.bottom-line{
    position:absolute;
    left:0;
    bottom:45px;
    height:2px;
    width:0;
    background:#ffffff;
    transition: width 0.7s ease-out 0.3s;
}

/* 默认初始状态：第一个板块激活 */
.item-container.initial .equip-item:nth-child(1) .item-mask{
    transform: translateY(0);
}
.item-container.initial .equip-item:nth-child(1) .bottom-line{
    width:75%;
}

/* 移动端布局 2栏 */
@media(max-width:768px){
    .item-container{
        grid-template-columns: repeat(2, 1fr);
    }
    /* 移动端两行布局，第二列继续保留右边框，第一行两个，第二行两个 */
}
/* 行业解决方案 */
/* 父容器：一整张完整背景 */
        .product-wrap {
            background: url("/static/images/solution.jpg") center center / cover no-repeat;
            width: 100%;
        }
        .product-item {
            position: relative;
            min-height: 540px;
            overflow: hidden;
            cursor: pointer;
        }
        /* 红色遮罩 默认完全在下方 */
        .mask-layer {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(214, 32, 39, 0.88);
            transform: translateY(110%);
            transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 10;
        }
        /* 激活状态：遮罩升上来 */
        .product-item.active .mask-layer {
            transform: translateY(0);
        }
        /* 遮罩上的文字：默认向下偏移，激活时向上回位，跟随遮罩运动 */
        .mask-content {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 20;
            padding: 32px;
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.4s ease 0.15s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s;
        }
        .product-item.active .mask-content {
            opacity: 1;
            transform: translateY(0);
        }
        .product-item.active .origin-content {
            display: none;
        }
        /* 默认原始文字 */
        .origin-content {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 5;
            padding: 32px;
        }
        .btn-red {
            background-color: #d62027;
            color: #fff;
            padding: 8px 24px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-red:hover {
            background-color: #b8181f;
        }
        .btn-white {
            background-color: #ffffff;
            color: #d62027;
            padding: 8px 24px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-white:hover {
            background-color: #efefef;
        }
/* 关于我们 */
      .company {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 默认情况下两个元素各占50% */
    gap: 3.75rem; /* 可选，设置网格之间的间隔 */
}

/* 媒体查询：当屏幕宽度大于等于768px时（通常认为是平板及以上的设备） */
@media (min-width: 768px) {
    .company {
        grid-template-columns: 38% 58%; /* 电脑屏幕中，第一个元素占70%，第二个元素占30% */
    }
}

/* 媒体查询：当屏幕宽度小于768px时（手机屏幕） */
@media (max-width: 767px) {
    .company {
        grid-template-columns: 1fr; /* 手机屏幕中，两个元素各占100% */
    }
}
/* 全国服务网络 */
/* 整体模块，严格还原效果图横向布局 */
    .nation-service-section {
      width: 100%;
      display: flex;
      /* align-items: center; */
      justify-content: flex-start;
      padding: 40px 0;
      gap: 45px;
    }

    /* 左侧文字容器 */
    .section-left {
      flex: 0 0 440px;
      padding-left: 80px;
    }
    .main-title {
      font-size: 52px;
      font-weight: 900;
      color: #000000;
    margin-bottom: 90px;
    margin-top: 60px;
    }
    .data-row {
      display: flex;
      gap: 50px;
      margin-bottom:60px;
    }
    .data-item {
    }
    .num-wrap {
      display: flex;
      align-items: flex-end;
    }
    .big-number {
      font-size: 104px;
      font-weight: 900;
      line-height: 1;
      color: #000;
    }
    .num-unit {
      font-size: 34px;
      padding-bottom: 12px;
      margin-left: 4px;
      color: #000;
    }
    .data-desc {
      font-size: 20px;
      color: #666666;
      margin-top: 10px;
    }

    /* 红色按钮 */
    .link-more {
      display: inline-flex;
      align-items: center;
      background-color: #dd1c26;
      color: #ffffff;
      font-size: 22px;
      padding: 7px 42px;
      border-radius: 50px;
      text-decoration: none;
      transition: 0.25s;
    }
    .link-more::after {
      content: "»";
      margin-left: 10px;
    }
    .link-more:hover {
      background-color: #c8141d;
    }

    /* 右侧地图区域 */
    .section-right {
      flex: 1;
      padding-right: 65px;
    }
    .map-container {
      width: 100%;
    }
    .map-image {
      width: 100%;
      height: auto;
      display: block;
    }

    /* 数字计数动画 */
    .count-animate {
      display: inline-block;
    }

    /* =====================响应式===================== */
    @media screen and (max-width:1440px) {
      .section-left {
        padding-left: 40px;
      }
      .main-title {
        font-size: 42px;
      }
      .big-number {
        font-size: 82px;
      }
      .num-unit {
        font-size: 28px;
      }
      .data-row {
        gap: 50px;
      }
    }

    @media screen and (max-width:1024px) {
      .nation-service-section {
        flex-direction: column;
        gap: 45px;
        padding:15px 20px;
      }
      .section-left {
        flex: none;
        width: 100%;
        padding-left: 0;
      }
      .main-title {
        font-size: 36px;
        margin-bottom: 30px;
      }
      .big-number {
        font-size: 64px;
      }
      .num-unit {
        font-size: 24px;
      }
      .data-desc {
        font-size: 17px;
      }
      .link-more {
        font-size: 20px;
        padding: 11px 32px;
      }
    }

    @media screen and (max-width:640px) {
      .data-row {
        gap:14px;
      }
      .big-number {
        font-size: 44px;
      }
      .num-unit {
        font-size: 18px;
        padding-bottom: 6px;
      }
      .data-desc {
        font-size:14px;
      }
      .main-title {
        font-size: 28px;
      }
    }