body {
/*    font-family:Microsoft Yahei,Adobe 黑体 Std;*/
    font-size: 16px;
    background: #fff;
    color: #333333;
    line-height: 30px;
}
.wap-nav{ display:none}
.header {
    position: fixed;  
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;  
    background-color: #000000b0;  
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    z-index: 8888;  
    color: #fff;
}
 
.logo {
    display: flex;
    align-items: center;
    
}
 
 
.nav {
    display: flex;
    list-style: none;
}
 
.nav .navone{ display:inline-block; line-height:80px; height:80px; position:relative;   text-align:center;}
.nav .navone a{display: block;  padding:0 20px;  color: #fff;}

.nav .navone .navson{ display:none; position: absolute; left:50%; top:80px; width:100%; z-index:999; width:130px; margin-left:-65px;}
.nav .navone .navson1{ display:none; position: absolute; left:50%; top:80px; width:100%; z-index:999; width:300px; margin-left:-150px;}
.nav .navone .navson li a{ background-color:#f1f1f1; display:block; height:40px; line-height:40px; font-size:14px; text-align:center;  padding:0 ; color: #333;}
.nav .navone:hover .navson{ display: block;}
.nav .navone .navson li a:hover{background-color:#2898ec; color:#fff; }
 
 
 
#fullpage .section {
    padding-top: 80px;
    position: relative; 
}
/* 第一屏样式 */
.section1 {
    background-color: #4c6fc9; /* 匹配效果图的深蓝背景 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
 
}
.section1 .swiper-slide {
    height: 100vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
 
/* ========== 第二屏  ========== */
 .section2 {
    background: url(image/section2bg.png) no-repeat center bottom #d7e0f7;
    background-size: 100%;
    overflow: hidden;
}
/* 顶部分类标签 - 点击光标样式 */
.product-tabs {
    position: absolute;
    top: 130px; /* 导航栏下80px */
    right: 50px;
    display: flex;
    gap: 20px;
    z-index: 9999;
}
.product-tabs a {
    text-decoration: none;
    color: #80807f;
    border-bottom: 2px solid #80807f;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    cursor: pointer; /* 鼠标悬浮显示手型 */
    transition: all 0.3s; /* 样式过渡 */
}
.product-tabs a.active {
    color: #005dac;
    border-bottom: 2px solid #005dac;
}
/* 轮播容器 */
.carousels-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.carousel-container {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 50px;
    display: none; /* [MODIFIED] 默认隐藏所有轮播容器 */
}
.carousel-container.active {
    display: flex; /* [MODIFIED] 只显示激活的轮播容器 */
}
/* 大数字文字层（单独分层） */
.big-number {
    position: absolute;
    font-size:8rem;
    color: #fff;
    font-weight: bold;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
    opacity: 0; height: 0;
	    transition: all 0.3s ease;   transform: translateY(10px);  
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    bottom: 135px;
}
.big-number.active {
    opacity: 1; height: auto;   transform: translateY(0);
}
/* 产品图片容器 */
.product-img-wrap {
    position: relative;
/*    z-index: 2; /* 高于大数字 */*/
    width: 40%; /* 图片宽度占比 */
    display: flex;
    justify-content: center;
    margin-top: 100px;
}
.product-img-item {
    width: 90%;
    height: 58vh; /* 图片最大高度 */
    object-fit: contain;
    display: none; /* 默认隐藏，仅显示当前产品的图片 */
}
.product-img-item.active {
    display: block;
}
/* 产品文字容器（标题+描述） */
.product-text {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 3; /* 最高层 */
}
.product-text-item {
     opacity: 0; height: 0;
	    transition: all 0.3s ease;   transform: translateY(10px);  
}
.product-text-item.active {
    opacity: 1; height: auto;   transform: translateY(0);
}
.product-title {
    font-size: 32px; font-weight:bold;
    color: #005dac;
    margin-bottom: 10px;
}
.product-desc {
    font-size: 18px;
    color: #000000;
    max-width: 600px;
}
.section2 .carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    cursor: pointer;
}
.section2 .carousel-arrow:hover {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3));
}
.section2 .arrow-left {
    left: 50px;
}
.section2 .arrow-right {
    right: 50px;
}
.section2 .arrow-right {
    border-top: 16px solid transparent;
    border-left: 32px solid #fff;
    border-bottom: 16px solid transparent;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}
.section2 .arrow-left {
    border-top: 16px solid transparent;
    border-right: 32px solid #fff;
    border-bottom: 16px solid transparent;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}
/* Discover More按钮容器 */
.discover-btn-wrap {
    position: absolute;
    bottom: 100px;
    right: 50px;
    z-index: 4;
}
/* Discover More按钮样式 */
.discover-btn {
    padding: 10px 20px;
    background: linear-gradient(to right, #005eaf, #0088fb);
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
 
    display: flex;
    align-items: center;
    gap: 5px;
    display: none;   
	 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

}
.discover-btn.active {
    display: flex; /* 激活时显示 */
}

.product-text-item {
     opacity: 0; height: 0;
	    transition: all 0.3s ease;   transform: translateY(10px);  
}
.product-text-item.active {
    opacity: 1; height: auto;   transform: translateY(0);
}
.discover-btn:hover {
  transform: translateY(-2px);
}
/* ========== 第三屏  ========== */
.section3 {
    background: url(image/section3bg.jpg) no-repeat top center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
}
/* 第三屏标题 */
.section3-logo {
    padding: 0 50px 0 50px;
}
.section3-title {
    font-size: 32px; font-weight:bold;
    color: #dedbfd;
    margin: 20px 50px 20px 50px;
 
    font-style: italic;
}
/* Swiper容器 */
.service-swiper {
    padding: 20px 50px;  overflow: visible;
}
/* Swiper卡片样式 */
.service-swiper .swiper-slide {
    display: flex;
    justify-content: center;
}


 .service-card {
            background-color: #fff;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            /* 关键：为 transform 和 box-shadow 添加过渡效果 */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            padding-bottom: 30px;
            width: 100%;
            /* 关键：修复图片圆角问题的核心，裁切超出部分 */
            overflow: hidden;
        }

        /* 鼠标悬停效果：放大并提升层级 */
        .service-card:hover {
            /* 关键：按要求放大到 1.1 倍 */
            transform: scale(1.1);
            /* 关键：提升 z-index，确保悬停的卡片在最上层，不会被旁边的元素遮挡 */
            z-index: 10;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 增强阴影，更有立体感 */
        }

        .service-card-img {
            position: relative;
            margin-bottom: 30px;
        }

        .service-card .service-card-pic {
            width: 100%;
            
            object-fit: cover;
            border-radius: 8px 8px 0 0;
        }

        .service-card .icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(to right, #005eaf, #0088fb);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: -20px;
            left: 20px;
            border: 2px solid white;
        }

        .service-card .icon img {
            width: 24px;
            height: 24px;
        }

        .service-card h3 {
            font-size: 1.1rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            padding: 0 15px;
        }

        .service-card p {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.5;
            padding: 0 15px;
            min-height: 84px; /* 设置最小高度，让所有卡片底部对齐 */
        }
/* ========== 第四屏  ========== */
.section4 {
    background: url(image/section4bg.jpg) no-repeat top center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; padding-bottom: 40px;
    
}
/* 第四屏标题 */
.section4-title {
    font-size: 48px; font-weight:bold;
    color: #333333;
    text-align: center;
    margin-bottom: 40px;
 
    font-weight: 700;
}
/* Swiper容器 */
.news-swiper {
    
  
    padding: 50px 50px; overflow:visible;
}


 

.news-swiper .swiper-slide {
  width: 31%;  transform: scale(0.9);
  transition: transform 0.4s ease, opacity 0.4s ease; /* 添加平滑的过渡动画 */
  opacity: 0.7; /* 非激活的 slide 透明度稍低 */
}
.news-swiper .swiper-slide h3{ padding:0; margin:0;}
/* 
  关键：让当前激活的 slide (中间那个) 放大并且完全不透明。
  Swiper 会自动给当前页添加 .swiper-slide-active 类。
*/
.news-swiper .swiper-slide-active {
  transform: scale(1.2); /* 放大 10% */
  opacity: 1;
  z-index: 1; /* 确保放大的元素在最上层，不会被旁边的遮挡 */
}

/* 响应式调整：在小屏幕上，让 slide 宽度变大 */
@media (max-width: 1023px) {
  .news-swiper .swiper-slide {
    width: 45%; /* 在平板上，一行显示两个，所以宽度接近 50% */
  }
}

@media (max-width: 767px) {
  .news-swiper .swiper-slide {
    width: 80%; /* 在手机上，一行显示一个，宽度可以大一些 */
  }
}








/* 新闻卡片样式 */
.news-card {
    border-radius: 60px 0 60px 0;
 
    transition: transform 0.3s;
    position: relative; /* 相对定位，用于放大效果 */
    z-index: 1; /* 初始层级 */
  
}
.news-card:hover {
    transform: translateY(-5px);
}
/* 放大状态 */
.news-card.swiper-slide-active {
    transform: scale(1.1); /* 放大1.1倍 */
    z-index: 2; /* 提升层级，防止被遮挡 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 更强的阴影 */
}
.news-card img {
    width: 100%;
    object-fit: cover;
    border-radius: 60px 0 60px 0;
    margin-bottom:0;
}
.news-card-txt {
    position: absolute;
    left: 0;
    bottom: 9px;
    width: 100%;
    padding: 10px;
    background: #6287e0;
    background: linear-gradient(to bottom, rgba(98, 135, 224, 0), rgba(98, 135, 224, 1));
    border-radius: 0 0 60px 0;
}
.news-card a{ display:block; position:relative}
.news-card h3 {
 
    color: #fff;
    margin-bottom: 10px;
}
 
 
 
/* ========== 第五屏  ========== */
.section5 {
    background: url(image/section5bg.jpg) no-repeat top center #f4f8fc; background-size: cover; padding-bottom: 30px;
    padding: 0; /* 清除默认内边距 */
    overflow: hidden; /* 隐藏溢出内容 */
}
.contact-main-container {
 
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
/* 左侧文字内容区 */
.contact-text-wrapper {
    flex: 1;
    padding: 0 50px 0 50px;
    width: 60%;
}
/* 标题样式 */
.contact-title {
  
    color: #9f9f9f;
 font-size: 48px; font-weight:bold;
    margin-bottom: 30px;
 
}
/* 描述文本样式 */
.contact-desc {
 
    color: #323232;
 
    margin-bottom: 40px;
}
.contact-desc p {
 
}
.contact-desc p:last-child {
    margin-bottom: 0;
}
/* 核心数据卡片容器 */
.contact-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}
/* 单个数据项 */
.stat-item {
    border-right: #2350bd 1px solid;
}
.stat-item:nth-child(3n){ border-right:none;}
/* 数据数字 */
.stat-number {
    display: block;
     font-size:36px;
    font-weight: bold;
    color: #2350bd;
    margin-bottom: 8px;
}
/* 数据标签 */
.stat-label {
    color: #646464;
    line-height: 1.4;
}
/* Discover More 按钮 */
.contact-discover-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(to right, #005eaf, #0088fb);
    color: #ffffff;
    border-radius: 30px;
    text-decoration: none;
 
    font-weight: 500;
  	 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.contact-discover-btn:hover {
    transform: translateY(-2px);
}
/* 右侧图片区 */
.contact-img-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: right;
    align-items: right;
	 align-self: flex-end;     width: 35%;
    
}
/* 主图片样式 */
.contact-img-wrapper img {
    width: 90%;
 
    border-radius: 60px 0 0 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* 右下角悬浮按钮组 */
 .contact-float-btns {
   position: fixed;
    bottom: 230px;
    right: 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 悬浮按钮样式 */
.float-btn {
    width: 45px;
    height: 45px;
    line-height: 45px;
    display: flex;
    align-items: center; /* 使用 align-items 进行垂直居中 */
    padding-left: 5px;
    border-radius: 25px;
    border: none;
    background-image: linear-gradient(to right, #3b82f6 , #1d4ed8);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none; /* 确保 a 标签没有下划线 */
    overflow: hidden; /* 防止内容在收缩时溢出 */
	    box-shadow:0 10px 15px -3px rgb(59 130 246 / .3), 0 4px 6px -4px rgb(59 130 246 / .3);
}
.float-btn svg{  margin-left:5px;}
.contact-float-btns .edit-btn{ 
 background-image: linear-gradient(to right, #06b6d4 , #0891b2); 
 }
.float-btn span {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap; /* 防止文字在动画过程中换行 */
    color: #fff;
    padding-left: 10px;
    transition: all 0.3s ease;
}

/* --- 这是关键的修改部分 --- */
/* 当父容器有 is-hovered 类时，展开所有 .float-btn */
.contact-float-btns.is-hovered .float-btn {
    width: 165px;
    padding: 0 10px;
}

/* --- 这是关键的修改部分 --- */
/* 当父容器有 is-hovered 类时，显示所有 .float-btn 内的 span */
.contact-float-btns.is-hovered .float-btn span {
    max-width: 120px; /* 一个足够大的值来显示所有文字 */
    opacity: 1;
}

.float-btn img {
    flex-shrink: 0; /* 确保图标在容器收缩时不会被压缩 */
    width: 35px;
}
 
.index_footer_banner {
    height: 293px;
    background: url(image/indexbaner.jpg) no-repeat top center;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 70px 50px;
}
.index_footer_banner h2 {
    color: #fff;
  
    font-weight: 400;
  
}
.index_footer_banner p {
    line-height: 30px;
  
    padding-bottom: 20px;
}
.index_footer_banner_btn a {
    width: 260px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    margin: 0 5px;
    background-color: #1abb9791;
    color: #fff;
 
}
.index_footer_banner_btn a:hover {
    background: #1abb97;
}
#footer {
    background: #e1e1e1;
    padding:30px 50px;
    color: #092533;
}
#footer a {
    color: #092533;
}
.footerbox {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}
.footernav {
    display: flex;
    justify-content: space-between;
    width: 70%;
}
.footernav dl {
    width: 120px;
}
.footernav dl dt, .footer_contact dl dt {
    margin-bottom: 15px;
    padding-bottom: 15px;
    color: #092533;
    border-bottom: #092533 1px solid;
     
}
.footer_contact {
    width: 30%;
}
.fix {
    display: flex;
    justify-content: space-between;
}
.link {
    padding-top: 10px;
}
.copyright {
    padding: 20px 0;
    text-align: center;
}

 
@media (max-width: 768px) {
	.wap-nav{ display:block;}
	.drawer-nav{z-index:9999;}
.drawer-nav li{line-height:3.5rem; text-align:left;  border-bottom:1px solid #efefef; font-size:1.4rem; position:relative}
.drawer-nav li .link{ padding-left:15px; font-size:16px;}
.drawer-nav li i{  
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    display: block;
    width: 8px;
    height: 8px;
    margin: auto;
    position: absolute;
       top: 1.3rem;
    right: 1rem;

    border-color: rgba(255,255,255,.4);
    transform: rotate(135deg);
} 
.drawer-nav li .sub-nav{display:none;}
.drawer-nav li:hover .sub-nav{display:block; background:#fff;}
.drawer-nav li:hover .sub-nav a{display:block; height:3.5rem; line-height:3.5rem; font-size:1.2rem; border-bottom:1px dotted #fff; padding-left:15px; font-size:12px;     border-bottom: #e5e5e5 1px solid; color: #333;
 }

.drawer-nav li:hover .sub-nav a:last-child{ border-bottom:none;}
.fp-responsive .fp-section,
.fp-responsive .fp-slide,
.fp-responsive .fp-tableCell {
    height: auto !important;
}
.section2,.section3,.section4,.section5{ padding-top:20px !important;}
.section6{ padding-top:0 !important;}
.header {
      padding: 0 15px;
}
/* 手机端菜单横向换行/简化 */
.nav {
    display:none;
}
 
 
/* 第一屏响应式 */
 .section1 .swiper-slide {
    height: 200px;
   
}
/* 第二屏响应式 */
	.product-tabs a{ font-size: 14px;}
	.carousel-container.active{ flex-wrap: wrap;}
.carousels-wrapper, .carousel-container{ height: auto; padding-bottom:0;}

.product-tabs {position: relative; padding:0 15px;
    top: auto;
    right:auto;
    gap: 10px;
}
.product-text { 
    top: 20px;
    left: 15px; padding-right: 15px;
}
.product-img-wrap {
    width: 80%;
    margin-top: 20px;
}
.big-number {
   font-size: 3rem;
}
.carousel-arrow {
    width: 40px;
    height: 40px;
}
/* 按钮响应式 */
.discover-btn-wrap {
    position: relative;
    bottom: auto;
    right: auto;
    text-align: center;
    margin-top: 20px;
    padding-bottom: 30px;
}
.discover-btn {
    padding: 8px 15px;
    display: none !important; /* JS会控制显示，这里先强制隐藏所有 */
}
.discover-btn.active {
    display: inline-flex !important; /* 激活时显示为行内flex元素 */
}
/* 第三屏响应式 */
.section3-logo {
    padding: 30px 15px 0 15px;
}
.section3-title {
      margin: 20px 15px 20px 15px;
  
}
.section3 .swiper {
    margin-bottom: 30px;
}
.service-swiper{margin: 0 15px;}
.service-card {
   
     
}
.swiper-button-prev,  .swiper-button-next {
    width: 40px;
    height: 40px;
}
/* 第四屏响应式 */
.section4-title {
    margin-bottom: 30px;     padding-top: 10px;
 
}
.news-card {
 
}
/* 第五屏响应式 */
.contact-container {
    flex-direction: column;
    gap: 20px;
}
.contact-title{
    margin-bottom:10px;

}
.contact-info, .contact-form {
    padding: 20px;
}
.contact-item {
    gap: 10px;
}
.contact-item .icon {
    width: 35px;
    height: 35px;
 
}

/* 第五屏响应式适配 */
 .section5{ padding-bottom:30px;}
.contact-main-container {
    flex-direction: column;     flex-wrap: wrap;
    padding: 10px 15px;
}
.contact-text-wrapper {
    padding-right: 0;
    width: 100%;
    margin-bottom: 30px;     padding: 0 ;
}
.contact-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.contact-img-wrapper {
    width: 100%;     padding-bottom: 0;
}
.contact-float-btns {
    bottom: 20px;
    right: 20px;
}
	.footer_contact_container{ flex-wrap: wrap}
.index_footer_banner{    padding: 30px 15px;}
.index_footer_banner_btn a{ margin-bottom:10px;}
#footer{    padding: 30px 15px;}
.footerbox{ flex-wrap: wrap; gap: 10px}
.footernav{    width: 100%; flex-wrap: wrap;  }
.footernav dl {
    width: 45%; padding-bottom:10px;
}
.footer_contact {
    width: 100%;
}

.stat-item {
    border-right: #2350bd 1px solid;
}
.stat-item:nth-child(3n){  border-right: #2350bd 1px solid;}
.stat-item:nth-child(2n){ border-right:none;}



}

.section4 .fp-tableCell,.section3 .fp-tableCell{vertical-align: middle;}
 .seachbox{ display: none; position: absolute; right: 0; top: 80px; background: rgba(255,255,255,0.5); padding: 5px; z-index:9999 ;}
	.seachbox form{ display: flex;}
	.seachboxtxt{ height: 40px; line-height: 40px; width: 200px; border: none; padding-left: 10px;  }
	.seachboxbtn{ background: url(http://www.ikelvinbio.com/skin/img/seachs.png) no-repeat #2898ec center center; width: 40px; height: 40px ; border: none; cursor: pointer;  }
	.header .lang,.header  .seach {
        margin: 25px 0;
         
    }
	
	.header .lang a {
        display: inline-block;
	padding: 0 10px; color:#fff;}
	.bannerSwiper .swiper-pagination{bottom:110px; }
	.bannerSwiper	.swiper-pagination-bullet{width:12px; height:12px;border-radius:6px;} 
		.bannerSwiper	.swiper-pagination-bullet-active{width:32px; }
		.news-swiper .swiper-pagination{bottom:-20px; }
		.bannerSwiper .swiper-slide a{  display:block; width: 100%; height: 100%;}