@charset 'utf-8';

.page-banner{font-size: 0;}
.page-banner img{width: 100%;height: 100%;}


/* //////////////////////////////// */
.index_f1{padding:50px 0;}
.index_f1 .index_auto1{margin-top:50px;}
  /* —————————— About板块唯一类名：about-youking —————————— */
    .about-youking-container {
      width: 100%;
      /* max-width: 1200px; */ /* 适配设计图宽度 */
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 10%; /* 匹配设计图文字和图片的间距 */
      position: relative;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s ease 0.2s forwards;
    }

    /* 全局渐入动画 */
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 右上角极简标识（带交互） */
    .about-youking-marker {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      gap: 4px;
    }
    .about-youking-marker span {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #eee;
      border-radius: 50%;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .about-youking-marker span.active {
      background: #1c689c; /* 设计图蓝色 */
      transform: scale(1.2);
    }
    .about-youking-marker span:hover:not(.active) {
      background: #ccc;
      transform: scale(1.1);
    }

    /* 左侧文字区域（分步动画） */
    .about-youking-text {
      flex: 1;
    }

    /* 顶部小标题（延迟动画） */
    .about-youking-subtitle {
      font-size: 14px;
      color: #1c689c; /* 设计图浅蓝色 */
      letter-spacing: 1px;
      margin-bottom: 12px;
      font-weight: 600;
      opacity: 0;
      transform: translateX(-10px);
      animation: fadeInLeft 0.6s ease 0.4s forwards;
    }

    /* 主标题（延迟动画） */
    .about-youking-title {
      font-size: 42px; /* 匹配设计图字号 */
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 30px;
      opacity: 0;
      transform: translateX(-10px);
      animation: fadeInLeft 0.6s ease 0.6s forwards;
    }
    .about-youking-title .blue {
      color: #1c689c; /* About 蓝色 */
      display: block; /* 单独一行 */
    }
    .about-youking-title .black {
      color: #000; /* YouKing Mould 黑色 */
    }

    /* 正文内容（延迟动画） */
    .about-youking-desc {
      font-size: 15px;
      line-height: 1.8;
      color: #555; /* 匹配设计图文字灰度 */
      margin-bottom: 30px;
      /* max-width: 500px; */ /* 控制文字宽度，匹配设计图 */
      opacity: 0;
      transform: translateX(-10px);
      animation: fadeInLeft 0.6s ease 0.8s forwards;
    }

    /* 文字左滑渐入动画 */
    @keyframes fadeInLeft {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* 按钮样式（增强交互） */
    .about-youking-btn {
      display: inline-block;
      padding: 12px 30px;
      background: #1c689c;
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      border-radius: 2px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(10px);
      animation: fadeInUpBtn 0.6s ease 1s forwards;
    }

    /* 按钮渐入动画 */
    @keyframes fadeInUpBtn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 按钮hover效果 */
    .about-youking-btn:hover {
      background: #1c689c;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
    }
    /* 按钮点击波纹效果 */
    .about-youking-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
    }
    .about-youking-btn:active::after {
      width: 300px;
      height: 300px;
      opacity: 0;
    }

    /* 右侧图片区域（带hover缩放） */
    .about-youking-img {
      flex: 1;
      opacity: 0;
      transform: translateX(20px);
      animation: fadeInRight 0.8s ease 0.5s forwards;
    }
    .about-youking-img-wrap {
      overflow: hidden;
      border-radius: 4px;
      position: relative;
    }
    .about-youking-img img {
      width: 100%;
      height: auto;
      object-fit: cover;
      border: none;
      transition: transform 0.6s ease;
    }
    .about-youking-img:hover img {
      transform: scale(1.03); /* 轻微缩放，不夸张 */
    }
    /* 图片hover遮罩 */
    .about-youking-img-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(33, 150, 243, 0.05);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .about-youking-img:hover .about-youking-img-wrap::after {
      opacity: 1;
    }

    /* 图片右滑渐入动画 */
    @keyframes fadeInRight {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
      .about-youking-container {
        flex-direction: column;
        text-align: left;
        gap: 30px;
      }
      .about-youking-title {
        font-size: 32px;
      }
      .about-youking-desc {
        max-width: 100%;
      }
      .about-youking-img {
        transform: translateY(20px);
        animation: fadeInUp 0.8s ease 0.5s forwards;
      }
    }

	
	
	





/* //////////////////////////// */
.about_mode1{padding:50px 0;background: #f5f5f5;}
.about_mode1 .about_auto1{/* margin-top:50px; */}
     /* 区域头部 */
        .core-advantages-section {
            max-width: 100%;
            margin: 0 auto;
        }

        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-subtitle {
            display: block;
            font-size: 14px;
            color: #2385bb;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .section-title {
            font-size: 50px;
            font-weight: 700;
            color: #222;
            line-height: 1.1;
            margin: 0;
        }

        /* 卡片容器 */
        .advantages-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
        }

        /* 卡片基础样式 - 全部白色背景 */
        .advantage-card {
            background-color: #ffffff;
            padding: 40px 32px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            color: #333;
        }

        /* 卡片编号线条默认蓝色 */
        .number-line {
            display: inline-block;
            width: 32px;
            height: 2px;
            background-color: #2385bb;
            margin-right: 12px;
            transition: width 0.3s ease;
        }

        /* 卡片编号文字默认蓝色 */
        .number-text {
            font-size: 22px;
            font-weight: 600;
            color: #2385bb;
        }

        /* 卡片图标默认蓝色 */
        .card-icon {
            width: 48px;
            height: 48px;
            margin: 24px 0;
            color: #2385bb;
            transition: transform 0.3s ease;
        }

        /* 卡片标题 */
        .card-title {
            font-size: 20px;
            font-weight: 600;
            color: #222;
            margin-bottom: 12px;
            line-height: 1.4;
        }

        /* 卡片描述 */
        .card-desc {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
        }

        /* 🔥 鼠标悬停效果：卡片变蓝色，文字变白 */
        .advantage-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(35, 133, 187, 0.25);
            background-color: #2385bb;
            color: #ffffff;
        }

        /* 悬停时 线条、编号、图标、文字全部变白（已修复：去掉背景色） */
        .advantage-card:hover .number-line,
        .advantage-card:hover .number-text,
        .advantage-card:hover .card-icon,
        .advantage-card:hover .card-title,
        .advantage-card:hover .card-desc {
            color: #ffffff;
        }

        /* 悬停线条拉长 */
        .advantage-card:hover .number-line {
            width: 60px;
            background-color: #fff;
        }

        /* 悬停图标旋转放大 */
        .advantage-card:hover .card-icon {
            transform: scale(1.15) rotate(8deg);
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
            .section-title {
                font-size: 2.5rem;
            }
            .advantage-card {
                padding: 32px 24px;
            }
        }

        @media (max-width: 480px) {
            .section-title {
                font-size: 2rem;
            }
            .advantages-container {
                grid-template-columns: 1fr;
            }
        }

  

/* //////////////////////////// */
.about_mode2{padding:50px 0;}
.about_mode2 .about_auto2{/* margin-top:50px; */}
     /* 工厂实景板块容器 */
        .factory-footage-section {
            /* max-width: 1200px; */
            margin: 0 auto;
            padding: 20px 0;
        }

        /* 板块头部 */
        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }


        /* 图片网格容器 */
        .factory-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 12px; /* 图片间距和设计图一致 */
        }

        /* 图片项样式 */
        .factory-item {
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            /* aspect-ratio: 4/3; */ /* 保持图片比例统一 */
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        /* 工厂图片样式 */
        .factory-img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片自适应容器，保持比例 */
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* 图片悬停效果 */
        .factory-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(35, 133, 187, 0.15);
        }

        .factory-item:hover .factory-img {
            transform: scale(1.08); /* 图片轻微放大 */
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
            .section-title {
                font-size: 2.5rem;
            }
            .factory-grid {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 8px;
            }
        }

        @media (max-width: 480px) {
            .section-title {
                font-size: 2rem;
            }
            .factory-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .factory-item {
                aspect-ratio: 16/9; /* 移动端调整图片比例更适配 */
            }
        }
 
      

        /* 选项卡样式 */
        .factory-tabs{
            margin-top: 20px;
        }
        .tab-nav{
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }
        .tab-btn{
            padding: 10px 25px;
            border: none;
            background: #f5f5f5;
            cursor: pointer;
            font-size: 16px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .tab-btn.active{
            background: #1c689c;
            color: #fff;
        }
        .tab-pane{
            display: none;
        }
        .tab-pane.active{
            display: block;
        }

        /* 图片网格 */
        .factory-grid{
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        .factory-item img{
            width: 100%;
            /* height: 200px; */
            object-fit: cover;
            border-radius: 6px;
            display: block;
        }
  

/* //////////////////////////////// */
.index_f5{padding:50px 0;}
.index_f5 .index_auto5{/* margin-top:50px; */}

 /* —————————— 唯一类名：honors-qualifications —————————— */
    .honors-qualifications-container {
      width: 100%;
      /* max-width: 1400px; */
      margin: 0 auto;
      /* padding: 40px 0; */
    }

    /* 标题区域（核心优化：严格左右结构） */
    .honors-qualifications-header {
      margin-bottom: 40px;
      display: flex; 
      align-items: center; /* 垂直居中对齐（更符合设计习惯） */
      justify-content: space-between; /* 强制标题左、箭头右 */
      width: 100%; /* 确保占满容器宽度 */
    }
    /* 标题文字容器 - 仅占内容宽度，居左 */
    .honors-qualifications-title-wrap {
      flex: 0 1 auto; /* 不拉伸，仅占自身宽度 */
    }
    .honors-qualifications-subtitle {
      font-size: 14px;
      color: #1c689c; /* 设计图浅蓝色 */
      letter-spacing: 1px;
      margin-bottom: 8px;
      font-weight: 600;
    }
    .honors-qualifications-title {
      font-size: 50px;
      font-weight: 700;
      color: #000;
      line-height: 1.2;
    }

    /* 轮播箭头容器 - 固定居右 */
    .honors-qualifications-nav {
      display: flex;
      gap: 8px;
      z-index: 10;
      flex: 0 0 auto; /* 不拉伸，仅占自身宽度 */
      position: relative;
      width: 10%;
    }
    .honors-qualifications-nav-btn {
      width: 36px;
      height: 36px;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background: #fff;
      transition: all 0.3s ease;
    }
    .honors-qualifications-nav-btn:hover {
      border-color: #1c689c;
      color: #1c689c;
      background: rgba(33, 150, 243, 0.05);
    }
    .honors-qualifications-nav-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: #eee;
      color: #999;
      background: #f9f9f9;
    }
    .honors-qualifications-nav-btn i {
      font-size: 16px;
    }

	
	.index_f5 .swiper-button-prev, .index_f5 .swiper-container-rtl .swiper-button-next {
    background-image: url(../images/lig.png);
    left: 10px;
    right: auto;
}




.index_f5 .swiper-button-next, .index_f5 .swiper-container-rtl .swiper-button-prev {
    background-image: url(../images/rig.png);
    right: 10px;
    left: auto;
}



.index_f5 .swiper-button-next, .index_f5 .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 45px;
    height: 45px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-size: 45px 45px;
    background-position: center;
    background-repeat: no-repeat;
}
    /* Swiper轮播容器 */
    .honors-qualifications-swiper {
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    /* 轮播单页（一行4张证书展示） */
    .honors-qualifications-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      transition: all 0.3s ease;
    }

    /* 资质证书卡片样式 */
    .honors-cert-card {
      width: 100%;
      height: auto;
      position: relative;
      transition: all 0.4s ease;
      opacity: 0;
      transform: translateY(15px);
      animation: cardFadeIn 0.6s ease forwards;
    }
    /* 证书分步渐入动画 */
    .honors-cert-card:nth-child(1) { animation-delay: 0.1s; }
    .honors-cert-card:nth-child(2) { animation-delay: 0.2s; }
    .honors-cert-card:nth-child(3) { animation-delay: 0.3s; }
    .honors-cert-card:nth-child(4) { animation-delay: 0.4s; }

    @keyframes cardFadeIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 证书hover交互效果 */
    .honors-cert-card:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }
    .honors-cert-card img {
      /* width: 100%; */
      height: auto;
      object-fit: cover;
      border: none;
    }

    /* 响应式适配 */
    @media (max-width: 1200px) {
      .honors-qualifications-title {
        font-size: 32px;
      }
    }
    @media (max-width: 768px) {
      .honors-qualifications-title {
        font-size: 28px;
      }
      .honors-qualifications-nav-btn {
        width: 32px;
        height: 32px;
      }
    }
    @media (max-width: 480px) {
      /* 手机端：标题和箭头改为上下布局 */
      .honors-qualifications-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;
      }
      .honors-qualifications-nav {
        margin-top: 15px;
        margin: 35px auto;
        width: 50%;
      }
      .honors-qualifications-title {
        font-size: 24px;
      }
    }
  


/* //////////////////////////// */
.about_mode2s{padding:50px 0;background: #f5f5f5;}
.about_mode2s .about_auto2{/* margin-top:50px; */}
     /* 工厂实景板块容器 */
  .about_mode2s      .factory-footage-section {
            /* max-width: 1200px; */
            margin: 0 auto;
            padding: 20px 0;
        }

        /* 板块头部 */
     .about_mode2s   .section-header {
            text-align: center;
            margin-bottom: 40px;
        }


        /* 图片网格容器 */
     .about_mode2s   .factory-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 12px; /* 图片间距和设计图一致 */
        }

        /* 图片项样式 */
      .about_mode2s  .factory-item {
            position: relative;
            overflow: hidden;
            border-radius: 0;
            aspect-ratio: initial; /* 保持图片比例统一 */
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            background: #fff;
            text-align: center;
            padding: 20px;
        }

        /* 工厂图片样式 */
     .about_mode2s   .factory-img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片自适应容器，保持比例 */
            transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* 图片悬停效果 */
      .about_mode2s  .factory-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(35, 133, 187, 0.15);
        }

       .about_mode2s .factory-item:hover .factory-img {
            transform: scale(1.08); /* 图片轻微放大 */
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
         .about_mode2s   .section-title {
                font-size: 2.5rem;
            }
        .about_mode2s    .factory-grid {
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 8px;
            }
        }

        @media (max-width: 480px) {
           .about_mode2s .section-title {
                font-size: 2rem;
            }
         .about_mode2s   .factory-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }
         .about_mode2s   .factory-item {
                /* aspect-ratio: 16/9; */ /* 移动端调整图片比例更适配 */
            }
        }

  



/* //////////////////////////////// */
.index_f7{padding:50px 0;background: #ecedf1;}
.index_f7 .index_auto7{/* margin-top:50px; */}
   /* —————————— 唯一类名：contact-banner —————————— */
    .contact-banner-container {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      /* padding: 30px 40px; */ /* 内边距匹配设计图 */
      /* background: #f5f7fa; */ /* 背景色和设计图一致 */
      display: flex;
      align-items: center;
      justify-content: space-between; /* 左侧内容左，按钮右 */
      gap: 20px;
    }

    /* 左侧内容（Logo+标题） */
    .contact-banner-left {
      display: flex;
      align-items: center;
      gap: 60px; /* Logo和标题间距 */
      flex: 1;
    }
    /* Logo容器 */
    .contact-banner-logo {
      /* width: 48px; */ /* Logo尺寸适配 */
      /* height: 48px; */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .contact-banner-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    /* 标题文字 */
    .contact-banner-title {
      font-size: 38px;
      font-weight: 600;
      color: #000;
      line-height: 1.3;
      letter-spacing: 0.5px;
    }

    /* 右侧按钮 */
    .contact-banner-btn {
      flex: 0 0 auto; /* 按钮不拉伸 */
      padding: 12px 24px;
      background: #1c689c; /* 设计图蓝色按钮 */
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s ease;
      text-decoration: none; /* 若用a标签则去除下划线 */
    }
    /* 按钮hover交互效果 */
    .contact-banner-btn:hover {
      background: #1c689c; /* 深蓝hover色 */
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
    }
    .contact-banner-btn i {
      font-size: 12px;
      transition: transform 0.3s ease;
    }
    .contact-banner-btn:hover i {
      transform: translateX(3px); /* 箭头右移 */
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
      .contact-banner-container {
        padding: 20px 24px;
        flex-direction: column; /* 平板：上下布局 */
        align-items: flex-start;
        gap: 16px;
      }
      .contact-banner-title {
        font-size: 20px;
      }
      .contact-banner-btn {
        padding: 10px 20px;
        width: 100%; /* 按钮占满宽度 */
        justify-content: center;
      }
    }
    @media (max-width: 480px) {
      .contact-banner-left {
        flex-direction: column; /* 手机：Logo和标题上下布局 */
        align-items: flex-start;
        gap: 12px;
      }
      .contact-banner-title {
        font-size: 18px;
      }
      .contact-banner-logo {
        width: 40px;
        height: 40px;
      }
    }