/* ========== HarmonyOS Sans SC ========== */
@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("/static/fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("/static/fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("/static/fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HarmonyOS Sans SC";
  src: url("/static/fonts/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========== 全局重置 ========== */
/* ========== 全局重置 ========== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: calc(0.875rem + 0.0125vw); /* 14px + 0.2vw */
  overflow-x: hidden;
  color: var(--fontColor1);
  line-height: 1.6;
}

/* 去掉所有列表的默认标记 */
ul, ol {
  list-style: none;
}

a {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
}
:root {
  --main: #090059;
  --fontColor1: #333333;
  --borderColor: #e0e0e0;
  --font-family: "HarmonyOS Sans SC", "Noto Sans SC",
                -apple-system, BlinkMacSystemFont, "Segoe UI",
                Helvetica, Arial, "Microsoft YaHei", sans-serif;
}
.container-center {
  max-width: 1440px;
  margin: auto;
  width: 85%; 

}
/* ========== 导航栏 ========== */
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.header-item{
   max-width: 1400px;
  height:90px;
  z-index:1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}
.nav{
  max-width: 601px;
  display:flex; align-items:center; gap:48px;
}
.nav li{cursor:pointer; font-size:16px;color:#fff}
/*.nav li.has-mega{font-weight:600;}*/

/* Mega Menu */
.mega-menu{
  position:fixed; top:90px; left:0;
  width:100vw; background:#fff;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  display:none; z-index:999;
  padding: 20px;
}
.mega-menu.show{display:block;}
.mega-inner{max-width:60vw; margin:0 auto;  display:flex;}
.mega-left{width:260px; border-right:1px solid #eee;}
.mega-left li{padding:10px 0; cursor:pointer; transition:.2s;}

.mega-left li a{color:#000}
/*.mega-left li.active,.mega-left li a:hover{color:#080157; font-weight:600;}*/
.mega-left li a:hover{color:#080157; font-weight:600;}
.mega-right{flex:1; padding-left:40px;}
.right-panel{
    display:none;
    padding: 10px;
}

.right-panel-items{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; 
    width: 100%;
}

.right-panel-item{
    width: 100%; 
}

.right-panel-item img{
    max-width: 100%;
    display: block;
}
.right-panel-page{
    width: 100%;
    height: 100%;
}
.data-menu{
   display:flex; 
   align-items: center;
   gap: 16px; 
}
.data-menu-item{
     flex: 1; 
     border-radius: 4px;
     height: 90px;
     line-height: 90px;
     text-align: center;
}
.data-menu-item a{
    display: block;
    color: #000000;
}
.data-menu-item a:hover {
  background-color: #F8F8F8;
 
}
.right-panel.active{display:block;}

.right-panel-item .cards{ gap:24px;background-color: #F8F8F8;}

.card{background-color: #fff;line-height: 20px;}
.card h3{
    font-size: 1rem;
    margin-bottom: 10px;
}
/*.card img{max-width:100%; border-radius:10px;}*/
/*.card p{margin-top:8px; font-weight:600;}*/
/*.page{padding-top:120px; min-height:2000px; background:linear-gradient(#f7f7f7,#eaeaea);}*/
.header-item .logo {
  display: block;     
  width: 101px;
}
.logo-img {
  width: 100%;
  height: auto;
  display: block;    
}
/* 黑色 logo 默认隐藏 */
.logo-color {
  display: none;
}
/* 当 header-dark 时，切换显示 */
header.header-dark .logo-white {
  display: none;       /* 白色隐藏 */
}
header.header-dark .logo-color {
  display: block;      /* 黑色显示 */
}
/* 导航字体切换 */
header.header-dark .nav li { color: #000; }
header.header-dark .header_right .Language { color: #000; }
header.header-dark .header_right svg path { stroke: #000; }
/* 最后一张 slide 时字体变黑 */
header.header-dark .nav li { color: #000; }
header.header-dark .header_right .Language { color: #000; }
header.header-dark .header_right svg path { stroke: #000; }

/* ========== 右侧按钮 ========== */
.header-item .header_right {
    max-width: 98px;
    display: flex;  
    align-items: center;   
    gap: 4px;
    color: inherit; 
    font-size: 1rem;  
      cursor: pointer;
  
}
.header_right svg{
    max-width: 20px;
}
.header_right .Language{
    max-width: 74px;
    font-weight: 400;
    line-height: 20px;
    font-size: 16px;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
    text-transform: none;
  
}


/*最后一张变颜色*/
/* 轮播最后一张，header-dark 类下字体变黑 */
header.header-dark .nav li {
  color: #000; /* 黑色字体 */
}

/* 右侧按钮颜色也变黑 */
header.header-dark .header_right .Language {
  color: #000;
}

header.header-dark .header_right svg path {
  stroke: #000; /* SVG 路径也变黑 */
}
/* 向下滚动隐藏 */
#header.header-hide {
  transform: translateY(-100%);
}

/* 背景白色 */
#header.header-scrolled {
  background-color: #fff;
}
/* 默认状态：透明 header，文字白色 */
#header .nav li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* 滚动后：背景白色，文字黑色 */
#header.header-scrolled .nav li a {
  color: #000;
}
/* 导航字体默认白色 */
#header .nav li,
#header .header_right .Language,
#header .header_right svg path {
  color: #fff;
  stroke: #fff;
  transition: color 0.3s ease, stroke 0.3s ease;
}




/* 背景白色时字体黑色 */
#header.header-scrolled .nav li,
#header.header-scrolled .header_right .Language,
#header.header-scrolled .header_right svg path {
  color: #000;
  stroke: #000;
}

#langBtn {
    cursor: pointer;
}


/* logo 切换 */
.logo-color { display: none; }
header.header-scrolled .logo-white { display: none; }
header.header-scrolled .logo-color { display: block; }















/* ===== 语言遮罩 + 模糊 ===== */
.lang-overlay{
  position:fixed;
  inset:0;
  background: rgba(12,12,12,0.5);
  backdrop-filter: blur(12px);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:999;
}

.lang-overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* ===== 弹窗 ===== */
.lang-popup{
  width:40vw;
  background:#FFFFFF;
  border-radius:18px;
  padding:40px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.96);
  transition:.25s;
}

.lang-overlay.show .lang-popup{
  transform:translate(-50%,-50%) scale(1);
}

/* 标题 */
.lang-popup h3{
  text-align:center;
  margin-bottom:40px;
  font-weight: bold;
  font-size: 20px;
    color: #000000;
    font-style: normal;
    text-transform: none;
  
  
}

/* 语言列表 */
.lang-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.lang-item{
  background: #F8F8F8;
  border-radius:10px;
  padding:12px 16px;
 
  cursor:pointer;
  transition:.2s;
}
.lang-item a{
  width: 100%;
     display:flex;
  justify-content:space-between;
  align-items:center;
}
.lang-item b{
    color: #000000;
    font-weight: 500;
    font-size: 16px;
}
.lang-item span{
  color:#A8A8A8;
  font-size:16px;
}

.lang-item:hover{
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* 关闭 */
.lang-close{
  position:absolute;
  right:16px;
  top:14px;
  font-size:18px;
  cursor:pointer;
  color:#666;
}
.lang-close:hover{color:#000}















/* ========== Swiper 轮播 ========== */

.banner-swiper{
    width: 100vw;
      margin-left: calc(50% - 50vw);
}

.swiper { height: 100vh; }

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-swiper .swiper-pagination {
  bottom: 30px;
}
/* 普通横线 */
.banner-swiper .swiper-pagination-bullet {
  width: 30px;
  height: 3px;
  border-radius: 0;
   background: #5A6373; 
  opacity: 1;
  margin: 0 6px !important;
  transition: all 0.3s ease;
}

/* 当前激活的横线 */
.banner-swiper .swiper-pagination-bullet-active {
  background: #777C88;
  width: 60px;
}

/* slide 本身作为定位参照 */
.banner-swiper .swiper-slide {
  position: relative;
}
/* 图片全屏铺满 */
.banner-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 内容层 */
.banner-content {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  width: 100%;
  padding: 0 20px;
}

/* 标题 */
.banner-title {
  margin-bottom: 16px;
height: 56px;
font-weight: bold;
font-size: 2.2rem;
color: #FFFFFF;
text-align: center;
font-style: normal;
text-transform: none;
}

/* 简介 */
.banner-desc {
    margin-bottom: 36px;
    height: 28px;
    font-weight: 300;
    font-size: 1.5rem;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
}
/* 按钮 */
.banner-btn {
  display: inline-block;
  margin-top: 36px;
  padding: 10px 40px;
  color: #000000 ;
  text-decoration: none;
  transition: all .3s ease;
  background: #FFFFFF;
  border-radius:25px;
}

.banner-btn:hover {
  background: #fff;
  color: #000;
}
/* 最后一张：字体变黑 */
.banner-swiper .swiper-slide.is-last .banner-title,
.banner-swiper .swiper-slide.is-last .banner-desc,
.banner-swiper .swiper-slide.is-last .banner-btn {
  color: #000;
  border-color: #000;
}

/* 按钮 hover 也一起改 */
.banner-swiper .swiper-slide.is-last .banner-btn:hover {
  background: #000;
  color: #fff;
}
/* 最后一张：按钮文字 + 边框都变黑 */
.banner-swiper .swiper-slide.is-last .banner-btn {
  color: #000;
  border-color: #000;
}

/* hover 状态也统一 */
.banner-swiper .swiper-slide.is-last .banner-btn:hover {
  background: #000;
  color: #fff;
}

/* 默认（前几张 Banner） */
#header a {
  color: #fff;
  transition: color .3s ease;
}

/* 最后一张 Banner */
#header.header-dark a {
  color: #000;
}

/* 默认 Banner：白色 */
#header {
  color: #fff;
}

/* 最后一张 Banner */
#header.header-dark {
  color: #000;
}

/* SVG 跟随文字颜色 */
.lang-icon {
  display: block;
}







/* ========== Swiper 按钮 ========== */
.swiper-button-next,
.swiper-button-prev {
  width: 3rem; /* 48px */
  height: 3rem; /* 48px */
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -1.5rem; /* -24px */
  transition: all 0.3s ease;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1); /* 2px 8px */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.25rem; /* 20px */
  color: white;
  opacity: 0.7;
}

.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
  opacity: 1;
}

/* ========== 产品中心模块 ========== */
#index_pro {
    margin-top: 77px;
  /*padding: 4.375rem 0 6.25rem;*/

  /*background-color: var(--bgLight);*/
}

.ind_tit {
  margin-bottom: 50px;
  height: 60px
font-weight: bold;
font-size: 40px;
color: #333333;
text-align: left;
font-style: normal;
text-transform: none;
  text-align: center;
  
}

/* 主容器：垂直排列各行 */
.products-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
}

/* 每一行是一个独立的 Grid */
.product-row {
  width: 100%;
 display: flex;
 gap:28px;
}

.card-left{
    width: 998px;
    height: 100%;
     border-radius: 25px;
     height: 450px;
     background: linear-gradient( 0deg, #6B7889 0%, #A4B4C7 49.04%, #C8D7EA 100%);
    
}
.card-right{
    width: 414px;
    background-color: #F8F8F8;
    height: 450px;
    border-radius:25px;
}



.card-a{
    position: relative;
    display: block;
    height: 100%;
    border-radius: 25px;
    overflow: hidden;
    
}

.i-pic {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.i-pic img {
  max-width: 80%;
  object-fit: cover;
  display: block;
  will-change: transform; 
  transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

.card-a:hover .i-pic img {
  transform: scale(1.03);
}
.card-a-top {
  position: absolute;
  bottom: 30px; 
  left: 30px;   
  z-index: 30;
  color: #fff;
  transform: translateY(0); 
  transition: transform 0.9s cubic-bezier(0.34,1.56,0.64,1);
  
}


.card-a-top .name{
    font-weight: bold;
    font-size: 22px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
}



.card-a-top .brief{
    font-weight: 400;
    font-size: 18px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.card-a-top-more2 {
  font-size: 0.9rem;
  gap: 0.375rem; 
  transform: translateY(0.625rem);
  opacity: 0;
  transform: translateY(1.25rem); 
  transition:  opacity 0.8s ease 0.3s,  transform 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.3s;
}


#index_pro .row-2{
    margin-top: 28px;
    
}

#index_pro .row-2 .row2-half{
    width: 706px;
    height: 450px;
    background-color: #F8F8F8;
    border-radius: 25px;
  
     
}

#index_pro .row-3{
    margin-top: 28px;
    
}
#index_pro .row-3 .card-left{
  background: #F8F8F8 !important;

}



  /*<a href="#" class="card-a">*/
  /*          <div class="i-pic"><img src="/static/index/xin/1757473226.webp " alt="" /></div>*/
  /*          <div class="card-a-t*/





        /*<div class="card-left">*/
            
        /*  <a href="#" class="card-a">*/
        /*    <div class="i-pic"><img src="/static/index/xin/1757473226.webp " alt="" /></div>*/
        /*    <div class="card-a-top">*/
        /*      <h3 class="name">NAS私有云</h3>*/
        /*      <p class="brief">更懂你的数据中心</p>*/
        /*      <div class="card-a-top-more2"><span>了解更多</span></div>*/
        /*    </div>*/
        /*  </a>*/
        /*</div>*/





/* 第一行：4 + 2 列 */
/*.product-row.row-1 { grid-template-columns: repeat(6, 1fr); }*/
/*.product-row.row-1 .row1-large { grid-column: span 4; }*/
/*.product-row.row-1 .row1-small { grid-column: span 2; }*/

/* 第二行：3 + 3 列 */
/*.product-row.row-2 { grid-template-columns: repeat(6, 1fr); }*/
/*.product-row.row-2 .row2-half { grid-column: span 3; }*/

/* 第三行：2 + 2 + 2 列 */
/*.product-row.row-3 { grid-template-columns: repeat(6, 1fr); }*/
/*.product-row.row-3 .row3-third { grid-column: span 2; }*/

/* ========== 卡片通用样式 ========== */
 /*.card {
  /*width: 100%;*/
/*  max-width: 998px;*/
/*  background: white;*/
  /* //border-radius: 1.5625rem; /* 25px */
/*  overflow: hidden;*/
  /* box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.08); /* 4px 12px */
/*  transition: transform 0.3s ease;*/
/*  position: relative; */

/*}*/

/*.card-a {*/
/*  display: block;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  position: relative;*/
/*  text-decoration: none;*/
/*  color: inherit;*/
/*  border-radius: 1.5625rem;*/
/*  overflow: visible; */
/*}*/





/*.card-a:hover .card-a-top {*/
/*  transform: translateY(-0.9375rem);*/
/*}*/

/*.card-a:hover .card-a-top-more2 {*/
/*  opacity: 1;*/
/*  transform: translateY(0);*/
/*}*/






/* 新板块 Swiper 样式 */
#index_swiper2 .swiper-slide {
  width: 78%; 
  transition-timing-function: linear;
  position: relative;
  height: 600px;
  margin-top: 100px;
  
}
.index_swiper2_center-container{
    height: 100%;
}
.index_swiper2_center-container .swiper-wrapper .swiper-slide{
    position: relative;
    z-index: 1;
}
/* 初始状态：标题整体向下 40px，透明 */
.index_swiper2_center-container-title {
  position: absolute;
  top: 3.125rem;
  left: 50%;
  transform: translate(-50%, 200px); /* 初始向下40px */
  opacity: 0;
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
   transition: opacity 2s ease, transform 2s cubic-bezier(.22,1,.36,1); /* 整体慢一些 */
}

/* 激活状态：滑入浮动 */
#index_swiper2 .swiper-slide-active .index_swiper2_center-container-title {
  opacity: 1;
  transform: translate(-50%, 0); /* 慢慢上浮到原位 */
}

/* 子元素初始状态：轻微下移 + 透明 */
.index_swiper2_center-container-title h2,
.index_swiper2_center-container-title span,
.index_swiper2_center-container-title .index_swiper2_center-container-desc {
  opacity: 0;
  transform: translateY(15px); /* 下移15px */
}

/* 子元素过渡动画：逐个延迟出现 */
.index_swiper2_center-container-title h2 {
  transition: opacity 1.8s ease 0.3s, transform 1.8s cubic-bezier(.22,1,.36,1) 0.3s;
}

.index_swiper2_center-container-title span {
  transition: opacity 1.8s ease 0.6s, transform 1.8s cubic-bezier(.22,1,.36,1) 0.6s;
}

.index_swiper2_center-container-title .index_swiper2_center-container-desc {
  transition: opacity 1.8s ease 0.9s, transform 1.8s cubic-bezier(.22,1,.36,1) 0.9s;
}

/* 激活状态：子元素逐个浮现 */
#index_swiper2 .swiper-slide-active .index_swiper2_center-container-title h2,
#index_swiper2 .swiper-slide-active .index_swiper2_center-container-title span,
#index_swiper2 .swiper-slide-active .index_swiper2_center-container-title .index_swiper2_center-container-desc {
  opacity: 1;
  transform: translateY(0);
}
.index_swiper2_center-container-title h2{
    font-size: 2rem !important;
    margin-bottom: 1rem;
}
.index_swiper2_center-container-title span{
    margin-bottom: 1rem;
    font-size: 0.9rem;
}


/* 默认状态：白色边框，透明背景 */
.index_swiper2_center-container-title .index_swiper2_center-container-desc a {
  display: inline-block;
  padding: 0.5rem 1.25rem;   /* 上下 8px，左右 20px，可调 */
  border: 2px solid #fff;    /* 白色边框 */
  border-radius: 1.25rem;    /* 20px 圆角 */
  color: #fff;               /* 白色文字 */
  text-decoration: none;
  transition: all 0.3s ease; /* 平滑过渡 */
}
/* 鼠标悬停状态：填充绿色背景，文字变白 */
.index_swiper2_center-container-title .index_swiper2_center-container-desc a:hover {
  background-color: #090059;
  border-color: #090059;  /* 边框也变绿，更自然 */
  color: #fff;
}
/*#index_swiper2 .swiper-slide-active .index_swiper2_center-container-title > * {*/
/*  opacity: 1;*/
/*  transform: translateY(0);*/
/*  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);*/
/*}*/
.index_swiper2_center-container-title h2 { transition-delay: .1s; }
.index_swiper2_center-container-title span { transition-delay: .25s; }
.index_swiper2_center-container-title .index_swiper2_center-container-desc { transition-delay: .4s; }
#index_swiper2 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 25px;
}
#index_swiper2 .index_swiper2-pagination   .swiper-pagination-bullet { background:none; opacity:1; margin:0 6px !important; width:20px; height:9px; position:relative; }
#index_swiper2 .index_swiper2-pagination .swiper-pagination-bullet span {
  width:3px; height:3px; background:#CCC; display:block; border-radius:50%; margin-top:3px; margin-left:3px;
}
#index_swiper2 .index_swiper2-pagination   .swiper-pagination-bullet i {
  background:rgb(0 204 136); height:1px; width:33px; position:absolute; top:4px; transform:scaleX(0); transform-origin:left; z-index:3; transition-timing-function:linear;
}
#index_swiper2 .index_swiper2-pagination .swiper-pagination-bullet-active span,
#index_swiper2 .index_swiper2-pagination .swiper-pagination-bullet:hover span {
  width:9px; height:9px; margin-top:0; margin-left:0; background:rgb(0 204 136); position:relative; z-index:1;
}
#index_swiper2 .index_swiper2-pagination .swiper-pagination-bullet-active i { animation:middle 6s; }
@keyframes middle { 0% {transform:scaleX(0.7);left:-10px;} 20% {transform:scaleX(0.45);left:2px;} 100% {transform:scaleX(1);left:2px;} }
#index_swiper2 .index_swiper2-pagination {
  position: absolute;
  bottom: 20px;        /* 距底部20px */
  left: 50%;           /* 左边50% */
  transform: translateX(-50%); /* 居中 */
  display: flex;
  justify-content: center; /* 居中对齐子弹 */
  gap: 6px;
  z-index: 10;
  width: auto;         /* 不要设置 100%，让 transform 居中生效 */
}
#index_swiper2 .index_swiper2-button-prev,
#index_swiper2 .index_swiper2-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s ease;
}

#index_swiper2 .index_swiper2-button-prev { left: 10px; }
#index_swiper2 .index_swiper2-button-next { right: 10px; }
#index_swiper2 .index_swiper2-button-prev:hover,
#index_swiper2 .index_swiper2-button-next:hover {
    background-color: rgba(255,255,255,0.3);
    transform: translateY(-50%) scale(1.1);
}
/* 箭头符号 */
#index_swiper2 .index_swiper2-button-prev::after,
#index_swiper2 .index_swiper2-button-next::after {
  font-size: 20px;
  color: #000;
  opacity: 0.7;
}
#index_swiper2 .index_swiper2-button-prev:hover::after,
#index_swiper2 .index_swiper2-button-next:hover::after {
  opacity: 1;
}
#index_swiper2 .index_swiper2-button-prev span,
#index_swiper2 .index_swiper2-button-next span {
    font-size: 24px;
    color: #000;
}



#index_about {
    margin-top: 108px;
}
#index_about .box {
    background: linear-gradient(to bottom, #E2EFF8, #A8B7CB, #BDC9D8);
    /* background-image: url(/static/index/xin/1753085058.jpg); */
    /* background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    height: 562px;
   
    position: relative; */


  display: flex;
  border-radius: 25px;
    /* 图片底部对齐 */
    justify-content: space-between;
    height: 562px;
    position: relative;


 
}
.index_about_list{
  
  width: 320px;
    margin-top: 12px;
    margin-left: 154px;
    /* 或用 align-self 控制位置 */
    z-index: 33;
    
}
.index_about_right{
  position: static;
    /* 不再需要 absolute */
    height: 100%;
    overflow: hidden;

} 
.index_about_right img {
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  /* 类似 background-size: cover */
}
.index_about_list h2{
  width: 320px;
  margin-top: 81px;
    height: 47px;
    
  font-weight: bold;
    font-size: 40px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.index_about_list p {
  margin-top: 32px;
  font-weight: 400;
    font-size: 16px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
 
}
.index_about_list a{
  margin-top: 50px;
  display: block;
  width: 222px;
    height: 50px;
  background: #080157;
    border-radius: 999px 999px 999px 999px;
 
  color: #fff;
  line-height: 50px;
  text-align: center;
}



.index_form{
  margin-bottom: 100px;

}
.index_form_list{
   background-color: #F8F8F8;
    display: flex;
    justify-content: center;
    align-items: center;
  
}
  

.index_form_list_c{
  width: 1058px;

}

.index_form_list_c h2{
  
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: bold;
    font-size: 30px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 57px;
}




.index_form_list_get{
  margin-top: 33px;
}







#index_blog{
  padding: 100px 0;  
}
.index_blog_h2{
    margin: 0;
    font-size: 40px;
    line-height: 1.5;
    color: #333;
    font-weight: 600;
    text-align: center;
}
.index_blog_centent{
    margin-top: 50px;  
    display: flex;
    justify-content: space-between;
    height: 600px;

}
.index_blog_centent_list  , .index_blog_centent_swiper{
    width: 48%;
}
.index_blog_centent_list{
    padding: 30px;
    background-color: #f8f8f8;
    position: relative;
}

.index_blog_centent_swiper .img {
width: 100%;
height: 300px;
background: #000000;
border-radius: 0px 0px 0px 0px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}
.index_blog_centent_swiper_b{
    padding: 20px;
    font-size: 1rem;
        background-color: #f8f8f8;
}
.index_blog_centent_swiper_b h3{
    font-size: 1.2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index_blog_centent_swiper_b p{
    margin-top: 7px;
    font-size: 0.9rem;
    line-height: 27px;
    color: #888;
    transition: all 0.5s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index_blog_centent_swiper_b .time{
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 22px;
    color: #888;
    transition: all 0.5s ease;
    font-size: 0.9rem;
}
.index_blog_centent_swiper_b h3:hover {
    color: #090059;
}

.index_blog_centent_swiper_b_more:hover {
    color: #090059;
}

.index_blog_centent_swiper_b_more{
    margin-top: 40px;
    display: inline-flex;
    width: max-content;
    font-size: 16px;
    line-height: 25px;
    color: #888;
     font-size: 0.9rem;
    transition: all 0.5s ease;  
}
.index_blog_centent_list_group{
    padding: 0 5%;
    width: 100%;
    overflow-y: auto;
    height: 100%;
}
.index_blog_centent_list_group .index_blog_centent_list_group-item{
    background-color: transparent;
    padding: 1.5rem 0 1.4rem;
     display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
}
.index_blog_centent_list_group .index_blog_centent_list_group-item:hover {
    border-bottom-color: #090059;
}
.index_blog_centent_list_group .index_blog_centent_list_group-item:hover h3 {
    color: #090059;
}
.index_blog_centent_list_group .index_blog_centent_list_group-item .time{
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 20px;
    color: #888;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none
}
.index_blog_centent_list_group .title{
    font-size: 1.15rem;
    line-height: 30px;
    color: #333;
    font-weight: 600;
    transition: all 0.3s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

#index_blog .view_more{
    margin: 45px auto 0;
    width: 160px;
    height: 50px;
    font-size: 0.9rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background-color: #333;
    transition: all 0.5s ease; 
}
#index_blog .view_more:hover {
    background-color:  #011689;
}
/* ===== index_blog 分元素动画 ===== */
#index_blog .index_blog_h2,
#index_blog .index_blog_centent,
#index_blog .view_more {
  opacity: 0;
  transform: translateY(80px);
  transition: transform 0.8s ease, opacity 0.8s ease;
}

#index_blog.active .index_blog_h2 {
  opacity: 1;
  transform: translateY(0);
}

#index_blog.active .index_blog_centent {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

#index_blog.active .view_more {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.footer{
        background-color: #f8f8f8;
       
}


.footer .ftop{
    display: flex;
    padding: 80px 0 55px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.footer .foot_left{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.footer .foot_left .foot_left_item{
    height: 100%;

}
.footer .foot_left .foot_left_item img{
    max-width: 100%;
    max-height: 100%;
}





.footer .foot_nav{
    display: flex;
    justify-content: space-between;
    flex-direction: initial;
    width: 70%;
 }


.footer .foot_nav .fnav{
   
    width: 33.33%;
    font-size: 1rem;
}


.footer .foot_nav .fnav-two { 
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    
}
.footer .foot_nav .fnav-two { 
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    
}
.fnav-two a:first-child {
  margin-top: 0 !important;
}
.footer .foot_nav  .fnav-one-a {
    font-size: 1.1rem;
    line-height: 1;
    color: #221f1c;
    font-weight: 500;
}
.footer .foot_nav .fnav-two .fnav-two-a{
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
    margin-top: 0.7rem;
    font-size: 1rem;
    color: #666;
    line-height: 1.6rem;  
}

.footer .foot_nav .fnav-two .fnav-two-a:hover {
    color: #090059;
}
.foot-media{
    display: flex;
    margin-top: 12px;
    justify-content: right;
    height: 68px;
}
.foot-media-a{
    width: 44px;
    height: 44px;
    overflow: hidden; 
    margin-right: 12px;
}

.foot-media-a:last-child {
    margin-right: 33px;
}

.fbot{
  padding: 18px 0;
    background-color: #e5e5e5;
    text-align: center;
    font-size: 0.9rem;
    color: #999;
    line-height: 21px
}


.fbot a:hover {
      color: #090059;
}




/* ====== 响应式 ====== */
/*@media (max-width: 1440px) {*/
/*    #header .header-list,*/
/*    #header .container-center {*/
/*        width: 85%;*/
/*    }*/
/*}*/
/*@media (max-width: 1024px) {*/
/*    #header .header-list,*/
/*    #header .container-center {*/
/*        width: 80%;*/
/*    }*/
/*}*/