/*
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Roboto, sans-serif;
    }

    html {
      font-size: 16px;
    }*/

/*   @media (min-width: 640px)  { html { font-size: 17px; } }
    @media (min-width: 1024px) { html { font-size: 18px; } }
    @media (min-width: 1440px) { html { font-size: 19px; } }
    @media (min-width: 1920px) { html { font-size: 20px; } }*/


    .wjb_container {
      max-width: 1350px;
      margin: 0 auto;
      padding: 0 clamp(1rem, 3vw, 2rem);
    }

    /* ============== Hero Section ============== */
    .wjb_hero_section {
      padding: clamp(10rem, 6vw, 12rem) 0;
      position: relative;
      overflow: hidden;
		background: url("../img/pro_zizhi_bg.jpg") no-repeat center top; background-size: 100% 100%; padding-bottom: 15rem; padding-top: 120px;
    }
    .wjb_hero_top_label {
      text-align: center;
      font-size: clamp(1.2rem, 1vw, 1.6rem);
      text-transform: uppercase;
      color: #0078c3;
      letter-spacing: 1px;
      margin-bottom: clamp(1rem, 1vw, 1.5rem); font-weight: 600; font-size: 22px;
    }
    .wjb_hero_title {
      text-align: center;
      font-size: clamp(4rem, 3vw, 5rem);
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: clamp(5rem, 4vw, 7rem);  margin-bottom: 20px; font-size: 37px;
    }

   .sy_about .wjb_hero_top_label {
      text-align: left;
       font-size: 22px;
    }
    .sy_about .wjb_hero_title {
       text-align: left;
    }






    .wjb_hero_content {
      display: grid;
     /* grid-template-columns: 1fr 1.2fr 1fr;
      gap: clamp(9rem, 3vw, 10rem);*/
      align-items: center;
		
	
		
    }

    .wjb_hero_content.sy_about {
      display: grid;
     /* grid-template-columns: 1fr 1.2fr 1fr;
      gap: clamp(9rem, 3vw, 10rem);*/
   /*   align-items: center;*/
		
	display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;	
		
		
    }



    .wjb_hero_left {
      color: #1a1a1a; text-align: left; padding-right: 20px;
    }
    .wjb_hero_icon {
      width: clamp(40px, 5vw, 50px);
      height: clamp(40px, 5vw, 50px);
      margin-bottom: clamp(1rem, 2vw, 1.5rem);
      stroke: #0078c3;
      stroke-width: 2;
      fill: none;
    }
    .wjb_hero_left h2 {
      font-size: clamp(3rem, 1vw, 5rem);
      margin-bottom: clamp(3rem, 1.5vw, 4rem);
      line-height: 1.3;
    }
  .wjb_hero_left p {
      font-size: clamp(1.1rem, 1.2vw, 1.5rem);
      color: #555;
      line-height: 1.6;
      margin-bottom: clamp(3rem, 2vw, 4rem); font-size: 18px; margin-bottom: 10px; text-align: center;
    }
 .sy_about p { text-align: left;}
    .wjb_hero_left .nnrr {
      font-size: clamp(1.1rem, 1.2vw, 1.5rem);
      color: #555;
      line-height: 1.6;
      margin-bottom: clamp(3rem, 2vw, 4rem); font-size: 18px; margin-bottom: 10px;
    }
    .wjb_btn_black {
      padding: clamp(1rem, 1vw, 1.2rem) clamp(1.4rem, 2vw, 1.8rem);
      background: #0078c3;
      color: #fff;
      border: none;
      border-radius: 24px;
      font-size: clamp(1rem, 1.1vw, 1.4rem);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s; width: 150px; display: ; margin: 40px auto 0px; text-align: center; justify-content: center;
    }
    .wjb_btn_black:hover {
      background: #0078c3;
    }
    .wjb_hero_center {
      position: relative;
    }
    .wjb_hero_center_img {
      width: 100%;
      border-radius: 8px;
      background: #c8e6c9; overflow: hidden;
     /* aspect-ratio: 3/4;*/
    }
.wjb_hero_center_img img { width: 100%; height: 100%; object-fit: cover;}
    .wjb_hero_badge {
      position: absolute;
      right: -12%;
      bottom: 5%;
      width: clamp(100px, 10vw, 110px);
      height: clamp(100px, 10vw, 110px);
      background: #0078c3;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 600;
    }
    .wjb_hero_badge span:first-child {
      font-size: clamp(2.5rem, 2vw, 3rem);
    }
    .wjb_hero_badge span:last-child {
      font-size: clamp(.5rem, 1vw, .8rem);
      text-align: center;
      line-height: 1.2; padding: 0px 10%;
    }
    .wjb_hero_right {
     display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem; margin-top: 60px;
    }
    .wjb_stat_item {
      color: #1a1a1a; text-align: ;
    }


.wjb_stat_item .icon { height:50px; margin: 0px ; padding: 0px; width: 70px;} 
.wjb_stat_item .icon path { fill:#0078c3;}


    .wjb_stat_num {
      font-size:50px;
      font-weight: 600;
      margin-bottom: clamp(0.2rem, 0.5vw, 0.4rem);
    }
.wjb_stat_num sub{ font-size: 15px}
    .wjb_stat_label {
      font-size: clamp(1.5rem, 1vw, 2.5rem);
      color: #555;
      line-height: 1.4;
    }
    /* 优化背景水印：更浅绿色、位置更贴近设计�?*/
    .wjb_hero_watermark {
      position: absolute;
      bottom: -15%;
      left: 0;
      width: 100%;
      font-size: clamp(4rem, 10vw, 8rem);
      font-weight: 800;
      color: #e8f5e9; /* 更浅的绿色背景文�?*/
      text-align: center;
      z-index: -1;
      letter-spacing: -2px;
      text-transform: lowercase;
    }

    /* ============== Projects Swiper Section ============== */
    .wjb_projects_section {
      padding: clamp(12rem, 6vw, 14rem)  0;
      background: #c4e4fd;
	background: linear-gradient(120deg, #c4e4fd, #d7eefd);	
      position: relative;
    }
    .wjb_projects_header {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: clamp(1rem, 3vw, 2rem);
      margin-bottom: clamp(7rem, 4vw, 8rem);
    }
    .wjb_projects_label {
      font-size: clamp(1.5rem, 1vw, 2rem);
      text-transform: uppercase;
      color: #0078c3;
      letter-spacing: 1px;
      margin-bottom: clamp(0.5rem, 1vw, 0.8rem);  font-weight: 600; font-size: 22px;
    }
    .wjb_projects_title {
      font-size: clamp(3rem, 2.5vw, 5rem);
      font-weight: 200;
      color: #1a1a1a; 
    }
.wjb_projects_title_1 {
      font-size: clamp(3rem, 2.5vw, 5rem);
      font-weight: 600;
      color: #1a1a1a; font-size: 48px;
    }

    .wjb_projects_desc {
      font-size: clamp(1.1rem, 1.2vw, 1.5rem);
      color: #555;
      line-height: 1.6;
      align-self: end; font-size: 18px;
    }
    .wjb_projects_swiper {
      margin-bottom: clamp(9rem, 3vw, 10rem);
    }
    .wjb_project_card {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 4/4;
    }
    .wjb_project_img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #c8e6c9;
    }
    .wjb_project_hover {
      position: absolute;
      inset: 0;
      background: ;
	background: linear-gradient(135deg,  rgba(56, 147, 250, 0.85),rgba(1, 98, 145, 0.85));	
		
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.4s;
    }
    .wjb_project_card:hover .wjb_project_hover {
      opacity: 1;
    }
    .wjb_btn_more {
      padding: clamp(0.5rem, 0.8vw, 0.6rem) clamp(0.8rem, 2vw, 1rem);
      background: transparent;
      color: #fff;
      border: 2px solid #fff;
      border-radius: 4px;
      font-size:25px;
      font-weight: 900; text-transform: capitalize;
      cursor: pointer;
      transition: all 0.3s;
    }
    .wjb_btn_more:hover {
      background: #fff;
      color: #0078c3;
    }
    .wjb_projects_cta {
      text-align: center;
    }
    .wjb_btn_red {
      padding: clamp(1rem, 0.8vw, 1.5rem) clamp(1.8rem, 2vw, 2.2rem);
     background: linear-gradient(135deg, #126fbf, #278ff0);
      color: #fff;
      border: none;
      border-radius: 20px;
      font-size: clamp(1.5rem, 1.1vw, 1.85rem);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s; font-size: 18px;
    }
    .wjb_btn_red:hover {
     background: linear-gradient(135deg, #126fbf, #5baefb);
    }
    .wjb_btn_red span {
      background: #fff;
      color: #0f6ec2;
      padding: 2px 6px;
      border-radius: 10px;
      font-size: clamp(1rem, 0.9vw, 1.2rem);
      font-weight: 600; font-size: 16px;
    }
    .wjb_projects_cta a {
      color: #1a1a1a;
      font-size: clamp(1.2rem, 1.2vw, 1.5rem);
      margin-left: clamp(0.5rem, 1vw, 0.8rem);
      text-decoration: underline;
    }

    /* ============== Customers Section ============== */
    .wjb_customers_section {
      padding: clamp(3rem, 6vw, 5rem) 0;
      position: relative;
    }
    .wjb_customers_label {
      text-align: center;
      font-size: clamp(0.7rem, 1vw, 0.8rem);
      text-transform: uppercase;
      color: #0078c3;
      letter-spacing: 1px;
      margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
    }
    .wjb_customers_title {
      text-align: center;
      font-size: clamp(1.4rem, 2.5vw, 2rem);
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: clamp(2rem, 4vw, 3rem);
      line-height: 1.3;
    }
    /* 优化地图背景：更贴近设计图的淡绿色地球轮�?*/
    .wjb_customers_map {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
      height: clamp(200px, 30vw, 300px);
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 500"><path fill="%23e8f5e9" d="M0,250 Q250,100 500,250 T1000,250 L1000,500 L0,500 Z"/></svg>') center/contain no-repeat;
      background-color: #fff;
    }
    .wjb_stat_pin {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(0.3rem, 0.5vw, 0.5rem);
    }
    .wjb_stat_pin_avatar {
      width: clamp(40px, 5vw, 50px);
      height: clamp(40px, 5vw, 50px);
      border-radius: 50%;
      background: #c8e6c9;
      overflow: hidden;
    }
    .wjb_stat_pin_icon {
      width: clamp(40px, 5vw, 50px);
      height: clamp(40px, 5vw, 50px);
      stroke: #0078c3;
      stroke-width: 2;
      fill: none;
    }
    .wjb_stat_pin_num {
      font-size: clamp(0.7rem, 1vw, 0.85rem);
      font-weight: 500;
      color: #1a1a1a;
    }
    .wjb_stat_center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: clamp(80px, 10vw, 100px);
      height: clamp(80px, 10vw, 100px);
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .wjb_stat_center_num {
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      font-weight: 600;
      color: #0078c3;
    }
    .wjb_stat_center_label {
      font-size: clamp(0.6rem, 0.9vw, 0.75rem);
      color: #555;
    }

    /* 精确对齐数据点位�?*/
    .wjb_pin_1 { top: 20%; left: 15%; }
    .wjb_pin_2 { top: 10%; left: 35%; }
    .wjb_pin_3 { top: 70%; left: 20%; }
    .wjb_pin_4 { top: 20%; right: 20%; }
    .wjb_pin_5 { top: 70%; right: 30%; }
    .wjb_pin_6 { top: 75%; right: 10%; }

    /* ============== Responsive ============== */
    @media (max-width: 1024px) {
      .wjb_hero_content {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .wjb_hero_right {
        flex-direction: row;
        justify-content: space-around;
      }
      .wjb_hero_badge {
        right: 5%;
        bottom: 5%;
      }
      .wjb_projects_header {
        grid-template-columns: 1fr;
      }
      .wjb_projects_desc {
        align-self: start;
      }
    }
    @media (max-width: 640px) {
      .wjb_hero_right {
        flex-direction: column;
        align-items: center;
      }
      .wjb_customers_map {
        height: 250px;
      }
      .wjb_hero_watermark {
        bottom: -10%;
        font-size: clamp(3rem, 8vw, 6rem);
      }
    }


.wjb_hero_shuzi { width: 100%; background: url("../images/abg.jpg") no-repeat center center fixed; height: 80vh;  color: #fff;}

.wjb_hero_shuzi { background-size: 100% auto; position: relative;}

.wjb_hero_shuzi::before,.index-application-pic::after  {content: '';height: 50px;background: #e7f5fe;position: absolute;z-index: 2;}
.wjb_hero_shuzi::before {width: 61.5%;left: -10%;top: -1%;transform: skewX(-40deg);}










/*产品*/

   /* 首页产品大板�?*/
        .product-banner {
            width: 100%;
            padding: 100px 20px;
            background: #f8f9fc;
        }
        .wrapper {
            max-width: 1350px;
            margin: 0 auto;
        }
        .banner-title {
            text-align: center;
            font-size: 36px;
            color: #1a1a1a;
            margin-bottom: 50px;
            font-weight: 600;
        }

        /* 核心横排布局 */
        .category-container {
            display: flex;
            gap: 12px;
            height: 480px; margin-top: 50px;
        }

        /* 单个分类项：默认窄款 */
        .category-item {
            flex: 1; /* 未展开占比�?*/
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            background-size: cover;
            background-position: center;
            background-color: #fff;
        }

        /* 🔥 展开状态：宽度变大 */
        .category-item.active {
            flex: 2.8; /* 展开占比更大 */
        }

        /* 遮罩�?*/
        .item-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            z-index: 1;
        }

        /* 内容�?*/
        .item-content {
            position: relative;
            z-index: 2;
            height: 100%;
            padding: 40px 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        /* SVG图标 */
        .item-icon {
            width: 60px;
            height: 60px;
            fill: #fff;
            margin-bottom: 20px;
            transition: 0.3s;
        }
        .category-item.active .item-icon {
            transform: scale(1.1);
        }

        /* 一级分类标�?*/
        .item-name {
            font-size: 26px;
            font-weight: 600;
            margin-bottom: 25px;
            text-align: center;
            white-space: nowrap;
        }

        /* 🔥 二级分类：横向展�?+ 百叶窗隐�?*/
        .sub-category-wrap {
            width: 100%;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }
        .category-item.active .sub-category-wrap {
            max-height: 200px;
        }

        /* 二级分类横向排版 */
        .sub-list {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        /* 二级分类标签样式 */
        .sub-list li {
            padding: 7px 15px;
            background: rgba(255,255,255,0.25);
            border-radius: 50px;
            font-size: 18px;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        .sub-list li:hover {
            background: #fff;
            color: #1677ff;
            transform: translateY(-3px);
        }

        /* 响应式适配 */
        @media (max-width: 992px) {
            .category-container {
                flex-direction: column;
                height: auto;
            }
            .category-item {
                min-height: 120px;
            }
            .category-item.active {
                min-height: 280px;
            }
        }


.featured-services { background: url("../img/sec5bac_02.jpg") no-repeat}