.swiper-container {
  width: 100%;
  /* height: 500px; */
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
  z-index: 999;
}


/* ==============================宫格===================================== */
.grid-content {}

.grid-content .grid-content-text {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #fff;

}

.grid-content .grid-content-title {
font-weight: 600;
font-size: 18px;
  color: #333333;
  line-height: 28px;
  cursor: pointer;
  /* 默认就显示小手，提升可点击感知 */
}

.grid-content .grid-content-Intro {
  font-weight: 400;
font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 10px;
  height: 66px;
  /* 限制最多 3 行 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid-content .grid-content-Intro p{
font-size: 14px;
}
.grid-content .grid-content-more {
  font-weight: 400;
font-size: 14px;
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.65);
}

/* 悬停效果 */
.grid-content:hover .grid-content-title {
  color: #2E74FF;
  /* 变蓝，按你主题色调整 */
}

/* 当 title 被 hover 时，让后面的 more 也变蓝 */
.grid-content:hover .grid-content-title~.grid-content-more {
  color: #2E74FF;
}

/* ============================全部精选内容============================= */
.all-content-tab-box{
    position: relative;
    margin-bottom: 40px;
    height: 50px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}
.all-content-tab {
     display: flex
;
    justify-content: center;
    width: 100vw;
    height: 50px;
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.10); */
    color: rgba(0, 0, 0, 0.85);
    font-weight: 400;
    font-size: 16px;
    /*padding-top: 20px;*/
    /* position: absolute; */
    /* margin-bottom: 40px;
  
  /* 可选，但不影响子项 */
}

.all-content-tab div {
  margin: 0 20px;
  cursor: pointer;
  position: relative;
  /* ✅ 关键：让 ::after 相对于自己定位 */
  user-select: none;
}

/* 默认隐藏短线 */
.all-content-tab div::after {
  content: '';
  position: absolute;
  bottom: -1px;
  /* 对齐父容器的 border-bottom */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #2E74FF;
  transition: width 0.3s ease;

}

/* 激活状态 */
.all-content-tab div.active {
  color: #2E74FF;
    font-weight: 600;
}

.all-content-tab div.active::after {
  width: 100%;
  /* 相对于当前 div 的宽度 */
}




/* ==================了解我们的数据产品与服务================== */

/* ========== 卡片容器 ========== */
.card-wrapper {
  margin: 0 auto;
  position: relative;
}

.card-container {
  display: flex;
  background-image: url('../images//genealogy-index/card.png');
  border-radius: 12px;
  overflow: hidden;
  min-height: 240px;
  height: 285px;
  /* 固定高度，防止整体容器抖动 */
}

.homecard {
  /* border-radius: 10px; */
  cursor: pointer;
  flex-shrink: 0;
  transition: width 0.5s ease, box-shadow 0.3s ease, background 0.5s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.homecard.collapsed {
  width: 20%;
}

.homecard.expanded {
  width: 40%;
  z-index: 10;
  /*background: linear-gradient(135deg, #2E51FF 0%, #677AFF 62%, #63BDF7 100%);*/
  /*background-image: url('');*/
    background-image: url('../images/fox.png');
        background-size: 100% 100%;
    background-repeat: no-repeat;
}
.homecard.expanded .ENimg1 {
display: none;
}
.homecard.expanded .ENimg2 {
  display: block;
  }
.homecard .ENimg2 {
  display: none;
  }
.card-content {
  padding:  30px ;
  height: 100%;
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*position: relative;*/
  display: flex
;
    position: relative;
    flex-direction: column;
}

.card-content-left,
.card-content-right {
  transition: width 0.5s ease;
}

.homecard.collapsed .card-content-left {
  width: 100%;
}
.homecard.collapsed .card-content-left  .sjTU {
display: none;
}
.homecard.expanded .card-content-left {
  width: 100%;
      display: flex
;
    justify-content: space-between;
}
.homecard .card-content-left .sjTU {
    display: block;
 width: 200px;
    height: 200px;
    margin-top: -27px;
}
.card-title-zh {
  font-weight: 500;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
  transition: color 0.4s ease, font-size 0.4s ease;
}

.homecard.expanded .card-title-zh {
  font-size: 24px;
  color: #FFFFFF;
}

.card-title-en {
  margin-top: 10px;
}

.cardbl {
  background: linear-gradient(90deg, #015EFF 0%, #00BAFF 100%);
  border-radius: 1px;
  width: 25px;
  height: 1px;
  margin-top: 20px;
  transition: background 0.4s ease;
}

.homecard.expanded .cardbl {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, #FFFFFF 100%);
}

/* ========== 关键：用 opacity + visibility + absolute 替代 display ========== */
.card-desc1 {
  margin-top: 16px;

  font-weight: 300;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  /*opacity: 1;*/
  display: block;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.homecard.expanded .card-desc1 {
  /*opacity: 0;*/
  display: none;
  visibility: hidden;
  pointer-events: none;
}

.card-desc2 {
    margin-top: 30px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 24px;
  
  
  
  transition: opacity 0.4s ease, visibility 0.4s;
}

.homecard.expanded .card-desc2 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
      width: 70%;
}

/* ========== 右侧内容区 ========== */
.card-content-right {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s;
  width:100%;display: flex;align-items: flex-end;    justify-content: space-between;
  
}

.homecard.expanded .card-content-right {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.card-content-right img {
  /*margin-bottom: 10px;*/
}

.card-btn {
     margin-top: 12px;
    padding: 4px 14px;
    cursor: pointer;
    width: 130px;
    height: 35px;
    background: #FFFFFF;
    border-radius: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #2E74FF;
    display: flex
;
    align-items: center;
    justify-content: space-around;
}

.card-btn img {
  width: 16px;
 margin-bottom: 0px; 
  /*margin-top: 2px;*/
}

/* ========== 底部区域 ========== */
.card-wrapper-bottom {
  height: 96px;
  background: #FFFFFF;
  border-radius: 8px;
  margin-top: 30px;
      /*margin-bottom: 80px;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

.card-wrapper-bottom-title-box {
  display: flex;
  align-items: center
}

.card-wrapper-bottom-title-box .card-wrapper-bottom-title1 {
  /*margin-right: 10px;*/
font-weight: 500;
font-size: 20px;
color: rgba(0,0,0,0.85);
}

.card-wrapper-bottom-title-box .card-wrapper-bottom-title2 {
  /*margin-right: 10px;*/
  width: 154px;
  /* height: 22px; */
}

.card-wrapper-bottom-title-box .card-wrapper-bottom-title3 {
  margin-left: 40px;
font-size: 16px;
color: rgba(0,0,0,0.65);
  color: rgba(0, 0, 0, 0.65);
}
.line{
    width: 1px;
height: 21px;
background: rgba(0,0,0,0.15);
border-radius: 1px;
margin: 0 20px;
}
.arrow-button {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.arrow-button:hover {
  transform: scale(1.1);
}

/* ====================关于瓴羊 */
.about-ly {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.about-ly .about-ly-left{
    padding: 0;
}
.about-ly .about-ly-left .about-ly-title {
  font-weight: 600;
  font-size: 40px;
  color: #000000;
}

.about-ly .about-ly-left .about-ly-desc {
  margin-top: 24px;
  font-weight: 400;
font-size: 15px;
color: rgba(0,0,0,0.45);
  
}

.about-ly .about-ly-left .about-ly-more {
font-weight: 400;
font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 30px;
}

/*当屏幕尺寸小于760px时*/
@media (max-width: 767px) {
    .line{
        display: none;
    }
    .card-wrapper-bottom-title-box .card-wrapper-bottom-title3 {
        margin-left: 0px;
    }
  .card-container {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .card-content {
    display: flex;
    flex-direction: column;
  }

  .card-content-right img {
    display: none;
  }

  .card-content-right {
    width: auto;
    display: block;
  }

  .homecard.collapsed {
    width: 100%;
    height: 170px;
  }

  .homecard.expanded {
    width: 100%;
    /*height: 300px;*/

  }

  .card-desc2 {
    /*margin-top: -45px;*/
  }

  .card-wrapper-bottom-title-box {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  /* 关于瓴羊 */
  .about-ly {
    display: flex;
    flex-direction: column-reverse;
  }

  .about-ly .about-ly-left {
    margin-top: 30px;
  }
  .togetherLybg {
    padding: 10px;
}
}

/*当屏幕尺寸大于768px时*/
@media (min-width: 768px) {}

/*当屏幕尺寸大于1200px时*/
@media (min-width: 1200px) {}