*{
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
body {
    /* 优先使用微软雅黑，如果没有则使用系统默认无衬线字体 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
/* ================公司介绍===================== */
.mains{
    background-color: #ffffff;
}
.main1 {
    display: flex;
    /* align-items: center; */
    width: auto;
    gap: 6.5104vw;                 /* 左右间距 6.5104vw */
   justify-content: end;
    box-sizing: border-box;
    height: 35.1563vw;
    background-color: #f1faff;
}

/* 左侧文字区块：宽度 44.5313vw */
.about-text {
    width: 44.5313vw;
    flex-shrink: 0;            /* 防止压缩 */
}

/* 标题：英文 + 中文 */
.about-title {
    display: flex;
    
    
     margin-top: 4.6875vw;
     position: relative;
}
.about-title .en {
    font-size: 3.125vw;
    font-weight: bold;
    color: #d9edf9;
    margin-bottom: 3.6458vw;
    
}
.about-title .zh {
    top: 1.8042vw;
    position: absolute;
    font-size: 2.0833vw;
    font-weight: bold;
    color: #004a95;
    
}

/* 正文 */
.about-desc {
    font-size: 1.0417vw;
    line-height: 2.5vw;
    color: #0275b1;
    margin-bottom: 4.1667vw;
    text-align: justify;
}

/* 查看更多链接 */
.about-more{
    display: inline-block;
    font-size: 0.8333vw;
    
    color: #004a95;
    text-decoration: none;
    background-color: #f1faff;;
    transition: color 0.2s, border-color 0.2s;
    padding: 0.7813vw 2.0833vw;
    border-radius: 2.6042vw;
    border: #004a95 0.0521vw solid;
}
.about-more:hover {
    background-color: #004a95;
    color: #ffffff;
    
}

/* 右侧图片：宽 40.625vw，高 24.2188vw */
.about-image {
    width: 40.625vw;
    height: 24.2188vw;
    
    border-radius: 0 4.5625vw 0 4.5625vw;
    overflow: hidden;
    background: #e8edf0;        /* 占位背景色（图片未加载时显示） */
    margin-top: 5.9896vw;
}
.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 保持图片比例裁剪，或使用 contain 完整显示 */
    display: block;
}

/* ==================核心定位与业务布局================ */
        .main2{
            height: auto;
            width: 100%;
            background-color: #ffffff;
        }
        .container {
            margin: 0 auto;
            max-width: 83.3333vw;
            width: 100%;
            padding-bottom: 5.4688vw;
        }

        /* --- 标题盒子 --- */
        .page-title{
            width: 100%;
            height: 11.7188vw;  
            position: relative;
            padding-top: 4.0863vw;
        }
        .page-title-en{
            
        }
        .page-title-en h1{
            
            font-size: 3.125vw;
            font-weight: bold;
            color: #ebf8ff;
        }
        /* .page-title-ch {
            font-size: 2.0833vw;
            color: #004a95;
            font-weight: bold;
        } */

        .page-title-ch h1 {
            top: 5.704vw;
            font-size: 2.0833vw;
            color: #004a95;
            font-weight: bold;
            position: absolute;
            
            display: inline-block;
        }

        

        /* --- 主内容盒子 --- */
        .content-box {
            background-color: #ffffff;
            
            box-shadow: 0 0.4167vw 1.5625vw rgba(0, 0, 0, 0.08);
            overflow: hidden; /* 确保内部圆角生效 */
        }

        /* --- 信息展示区 (图片+文字) --- */
        .swiper2s .swiper-wrapper {
            position: relative;
            height: 29.4271vw;
        }
         .bg-image-layer{
            width: 100%;
            height: 100%;
         }
        /* 蓝色渐变遮罩层 */
        .overlay-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, #004a95 0%, rgba(0, 74, 149, 0.6) 50%, rgba(0, 74, 149, 0) 100%);
        }
        /* 文本内容层 */
        .text-content-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 3.125vw 2.6042vw;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            color: #ffffff;
            z-index: 2;
        }

        .text-content-layer h2 {
            font-size: 1.5625vw;
            font-weight: bold;
            line-height: 1.875vw;
            margin-top: 0;
            margin-bottom: 2.6042vw;
            text-shadow: 0 0.1042vw 0.2083vw rgba(0,0,0,0.2);
        }

        .text-content-layer p {
            font-size: 1.0417vw;
            line-height: 1.875vw;
            max-width: 31.25vw;
            margin-bottom: 4.1667vw;
            text-shadow: 0 0.0521vw 0.1563vw rgba(0,0,0,0.2);
        }

        .btn-more {
            display: inline-block;
            padding: 0.625vw 2.0833vw;
            border: 0.0521vw solid rgba(255, 255, 255, 0.8);
            border-radius: 1.5625vw;
            color: #ffffff;
            text-decoration: none;
            font-size: 0.8333vw;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-more:hover {
            background-color: #ffffff;
            color: #0a3264;
        }

        /* --- 底部导航标签 --- */
         .swiper2x .swiper-slide{
            font-size: 24px;
            color: #333333;
            height: 5.2083vw;
            display: flex;
            align-items: center;
            justify-content: center;
         }

        /* 激活状态的标签样式 */
        .mySwiper2x .swiper-slide-thumb-active {
            color: #ffffff !important;
            font-weight: 600;
            background-color: #32a05e;
        }
        a:hover{
            color: #fff;
        }

       .swiper2{
        display: none;
       }
       .s2-left{
        display: none;
       }
       .s2-right{
        display: none;
       }


        /* =============核心产品=============== */
        .main3{
            width: 100%;
            height: 42.4479vw;
            position: relative;
            background-color: #ffffff;
        }
    /* --- 1. 外层大容器 (蓝色背景) --- */
        .main-container {
            width: 100%;
            height: 27.6042vw;
            background-image: url(../images/main3_Bag.png);
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden; /* 防止内容溢出 */
        }
        

        /* --- 2. 标题区域盒子 --- */
        .header-box {
            text-align: center;
            margin-top: 3.125vw; /* 距离顶部的距离，可根据需要微调 */
            margin-bottom: 2.0833vw; /* 标题与下方产品的间距 */
            position: relative;
            z-index: 2;
        }

        .en-title {
            font-size: 3.125vw; /* 严格按照要求：英文3.125vw */
            font-weight: bold; /* 严格按照要求：加粗 */
            color: rgba(255, 255, 255, 0.1); /* 浅色半透明，作为背景装饰 */
            line-height: 1;
            margin-bottom: -0.7813vw; /* 让中文稍微覆盖一点英文，或者拉开距离，这里做重叠效果 */
            letter-spacing: 0.1042vw;
        }

        .cn-title {
            font-size: 2.0833vw; /* 严格按照要求：核心产品大小2.0833vw */
            font-weight: bold; /* 严格按照要求：加粗 */
            color: #ffffff;
            position: relative;
            z-index: 2;
            top: -0.7813vw;
        }

        /* --- 3. 产品列表盒子 --- */
        .products-wrapper {
            top: 12.12vw;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: flex-start; /* 顶部对齐 */
            width: 100%;
            max-width: 88.5417vw; /* 限制最大宽度，防止在大屏上太散 */
        }
        .swiper3{
            overflow: hidden;
            width: 83.3333vw;
            height: 26.0417vw;
            padding: 0 0.2604vw;
        }

        /* --- 单个产品卡片 --- */
        .swiper3 .swiper-slide {
            width: 26.0417vw; 
            background-color: #ffffff;
            height: 25.7813vw;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0.2083vw 0.7813vw rgba(0, 0, 0, 0.07); /* 添加轻微阴影增加立体感 */
             
        }

        /* ========= */
        /* 1. 产品列表容器基础样式 */
                    .list_product {
                        position: relative; /* 必须设置，用于定位左右按钮 */
                    }
                    
                    /* 将 padding 移到 wrapper 上，让按钮精准对齐图片区域 */
                    .list_product .swiper-wrapper {
                        /* padding: 20px 0;  */
                    }

                    /* 2. 左右按钮基础样式：垂直居中 & 缩小 */
                    .mySwiper3 .swiper-button-prev,
                    .mySwiper3 .swiper-button-next {
                        top: 50%; /* 垂直居中定位 */
                        transform: translateY(-170%); /* 配合 top:50% 实现完美垂直居中 */
                        
                        opacity: 0;
                        visibility: hidden;
                        transition: all 0.3s ease;
                        
                        color: #333; 
                        background: rgba(255, 255, 255, 0.4); 
                        width: 30px;  /* 缩小按钮宽度 */
                        height: 30px; /* 缩小按钮高度 */
                        border-radius: 50%;
                    }

                        
                    /* 3. 核心：缩小箭头图标 */
                    .mySwiper3 .swiper-button-prev::after,
                    .mySwiper3 .swiper-button-next::after {
                        font-size: 10px; /* 默认箭头较大，这里缩小到 14px */
                        font-weight: bold;
                        line-height: 50px; /* 让箭头在按钮内垂直居中 */
                    }

                    /* 4. 鼠标移入容器时，显示按钮 */
                    .mySwiper3:hover .swiper-button-prev,
                    .mySwiper3:hover .swiper-button-next {
                        opacity: 1;
                        visibility: visible;
                    }

                    /* 5. 按钮悬停效果 */
                    .mySwiper3 .swiper-button-prev:hover,
                    .mySwiper3 .swiper-button-next:hover {
                        background: #fff;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
                    }

        /* =========== */

        /* 移除最后一个元素的右边距，保证居中对称 */
        .product-card:last-child {
            margin-right: 0;
        }

        /* --- 产品图片区域 --- */
        .swiper3 .swiper-slide img {
            /* width: 26.0417vw; */
            height: 15.625vw; /* 严格按照要求：高15.625vw */
            object-fit: cover; /* 保持图片比例填充，不变形 */
            display: block;
        }

        /* --- 产品名称/详情盒子 --- */
        .product-info {
            width: 100%;
            height: 10.4167vw; /* 严格按照要求：名称盒子高10.4167vw */
            display: flex;
            flex-direction: column;
            justify-content: center; /* 内容垂直居中 */
            align-items: center; /* 内容水平居中 */
            padding: 1.0417vw;
            text-align: center;
        }

        .product-name {
            font-size: 1.1458vw;
            color: #333333;
            margin-bottom: 1.3021vw;
            font-weight: 500;
        }

        .btn-detail {
            display: inline-block;
            padding: 0.625vw 1.8229vw;
            border: 0.0521vw solid #438f61; /* 浅绿色边框，参考原图风格 */
            color: #438f61;
            border-radius: 1.0417vw;
            text-decoration: none;
            font-size: 0.7292vw;
            transition: all 0.3s ease;
        }

        .btn-detail:hover {
            background-color: #438f61;
            color: #fff;
        }

        .main3_porduct1{
            position: absolute;
            height: 10.4167vw;
            width: 100%;
            bottom: 0;
            background-color: #d9edf9;
        }
        .swiper3-mobile{
            display: none;
        }


/* ================新闻中心============= */
        
/* --- 主容器 --- */
        .main4-container {
            width: 100%; /* 总宽度：左800 + 右960 */
            position: relative;
            /* margin-bottom: 2.6042vw03; */
        }

        /* --- 顶部标题区域 --- */
        .header-section {
            text-align: center;
            height: 4.1667vw; /* 预留高度 */
            margin-bottom: 5.4688vw;
            position: relative;
        }

        .bg-text-en {
            font-size: 3.125vw;
            font-weight: bold;
            color: #ebf8ff; /* 浅蓝色 */
            position: absolute;
            top: -0.5208vw;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            z-index: 1;
            letter-spacing: 0.1042vw;
        }

        .title-cn {
            font-size: 2.0833vw;
            font-weight: bold;
            color: #0c5da9; /* 深蓝色 */
            position: relative;
            z-index: 2;
            padding-top: 1.5625vw;
        }

        /* --- 内容区域布局 --- */
        .content-wrapper {
            display: flex;
            /* width: 100%; */
            justify-content: end;
            margin-bottom: 1.5200vw;
        }

        /* ---------- 左侧盒子 (图片新闻) -------- */
        .left-box {
            width: 42.1011vw;
            position: relative;
            top: -2.0833vw;
            overflow: hidden;
            border-radius: 1.5625vw;
                box-shadow: 0.2083vw 0.2083vw 0.625vw rgba(0, 0, 0, 0.1);
        }

    .swiper {
        width: 100%;
        /* height: 23.1771vw; */
      }
    .swiper {
            margin-left: auto;
            margin-right: auto;
        }
     .swiper .swiper-slide {
        text-align: center;
       
        
        justify-content: center;
        align-items: center;
      }

      .swiper .swiper-slide img {
        display: block;
        width: 100%;
        height: 23.1771vw;
        object-fit: cover;
      }
      
      
      /* =========== */

      .mySwiper {
        position: relative;
        overflow: hidden; /* 防止内容溢出 */
    }

    /* 2. 确保图片宽度占满且不变形 */
    .mySwiper .news-image {
        width: 100%;
        height: auto;
        display: block;
    }

   /* ================ */
   /* --- 分页器核心样式修正版 --- */

/* 1. 容器定位：强制右下角 */
#main4_dian {
    position: absolute !important;
    display: block;
    right: 1.5vw !important;    /* 距离右侧距离 */
    left: auto !important;      /* 关键：取消默认居中 */
    width: auto !important;     /* 宽度自适应内容 */
    z-index: 999;
    text-align: right;          /* 确保内容靠右 */
}

/* 2. 基础样式：未选中的点是“窄胶囊” */
#main4_dian .swiper-pagination-bullet {
    width: 0.8vw !important;    /* 【窄】未选中宽度 (约等于原来的高度) */
    height: 0.4vw !important;   /* 【高】胶囊的高度 */
    background: #fff !important;/* 默认白色 */
    opacity: 0.5 !important;    /* 默认半透明 */
    border-radius: 0.4vw !important; /* 圆角设为高度的一半，形成完美胶囊 */
    margin: 0 0.3vw !important; /* 间距 */
    transition: all 0.3s ease !important; /* 添加过渡动画，让变宽过程平滑 */
    display: inline-block !important;
}

/* 3. 激活样式：当前选中的点变宽、变色 */
#main4_dian .swiper-pagination-bullet-active {
    width: 1.6vw !important;    /* 【宽】选中时宽度翻倍 */
    background: #ffffff !important; /* 选中颜色（蓝色，参考图1） */
    opacity: 1 !important;      /* 完全不透明 */
}
      
/* ===================================== */
        .left-text-area {
            height: 9.31vw;
            padding: 1.0417vw 1.8229vw; /* 上下留白，让文字居中 */
            background-color: #fff;
            text-align: left;
        }

        .left-title {
            font-size: 0.9375vw;
            line-height: 1.9792vw;
            color: #333333;
            font-weight: bold;
            margin-bottom: 0.5208vw;
        }
          .left-title h3{
            font-weight: normal;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

        .left-desc {
            font-size: 0.8333vw;
            line-height: 1.3542vw;
            color: #888888;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限制显示行数，模拟图片效果 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .left-date{
            text-align: right;
            color: #888; 
            font-size: 14px; 
            margin-top: 0.5208vw;
        }
        .swiper .swiper-slide a{
            display: block;
        }
        a:hover .left-text-area h3,
        a:hover .left-text-area p,
        a:hover .left-text-area .left-date {
            color: #5f5f5f; /* 这里替换为您需要的高亮颜色 */
        }
        a:hover .left-text-area h3{
            font-weight: bold;
        }
        /* .left-title h3:hover{
            color: #004a95;
        }
        .left-desc p:hover{
            color: #004a95;
        } */
        #main4_dian{
            text-align: right;
             bottom: 9.8958vw;
        }

        /* --- 右侧盒子 (列表新闻 & 蓝色背景) --- */
        .right-box {
            width: 49.2vw;
            /* 关键：蓝色背景从这里开始，填满剩余空间 */
            /* background-color: #125298;  */
            display: flex;
            flex-direction: column;
            
            padding: 0; 
        }

        /* 每一条新闻项 */
        .news-item {
            height: 9.8vw; /* 严格按照要求：高9.8958vw */
            width: 100%;
            display: flex;
            align-items: center; /* 垂直居中 */
            position: relative;
            
        }
        /* 新闻内容的容器，控制宽度和边距 */
        .news-content-inner {
            /* margin: 0 2.0833vw;  */
            border-bottom: #d7d7d7 0.0521vw solid;
            width: 50vw;
            margin-left: 75px; /* 左边距 */
            margin-right: 8.3333vw; 
            display: flex;
            flex-direction: column;
            justify-content: center; /* 垂直居中文字 */
            height: 100%;
        }
        
        .news-item:hover{
            background-color: #004a95;
        }
        .news-item:hover h3{
            color: rgb(255, 255, 255);
        }
        .news-item:hover p{
            color: rgb(255, 255, 255);
        }
        .news-item:hover .item-date{
            color: rgb(255, 255, 255);
        }
        .news-item:hover .news-content-inner{
            border-bottom:  0vw;
        }

        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 0.5208vw;
        }
        

        .item-title {
            font-size: 0.9375vw;
            line-height: 1.9792vw; /* 虽然单行不需要这么高，但保持行高属性 */
            color: #333333; /* 注意：在蓝色背景上，标题通常是白色，原图看起来是白色或极浅蓝 */
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 31.25vw;
        }
        .item-title h3{
           font-weight: normal; 
            white-space: nowrap;      /* 2. 强制文本不换行 */
            overflow: hidden;         /* 3. 隐藏超出容器的内容 */
            text-overflow: ellipsis;  /* 4. 溢出部分显示省略号 */
        }
        .item-title1 h3{
            font-weight: normal; 
             white-space: nowrap;      /* 2. 强制文本不换行 */
            overflow: hidden;         /* 3. 隐藏超出容器的内容 */
            text-overflow: ellipsis;  /* 4. 溢出部分显示省略号 */
        }
        

        .item-date {
            font-size: 0.7292vw;
            color: #888888; /* 日期颜色稍淡 */
        }
        
        .item-desc {
            font-size: 0.8333vw;
            line-height: 1.3542vw;
            color: #888888; /* 内容颜色：在深蓝背景上应为浅色，原图看起来是白色或浅灰 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            opacity: 0.9;
        }
        
        
        .right-box-mobile{
            display: none;
        }