#wrap{
  max-width: 2500px;
  box-sizing: border-box;
}
#wrap *{
  box-sizing: border-box;
  line-height: 1em;
}
.content-detail{
  position: relative;
}
.content-wrap{
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0 66px;
  position: relative;
}
.content-wrap .mian-title{
  font-size: 28px;
  text-align: center;
  font-weight: 600;
  color: #262626;
  margin-bottom: 40px;
}

#home-banner{
  background: url(../images/banner-bg.png) center center no-repeat;
  width: 100%;
  height: 450px;
}

#home-banner .banner-info{
  width: 1200px;
  margin: 0 auto;
  padding-left: 10px;
  padding-top: 90px;
  position: relative;
  height: 450px;
}
#home-banner .banner-info .banner-left{
  position: absolute;
  left: -74px;
  top: 10px;
  z-index: 2;
}
#home-banner .banner-info .banner-left .go-consult{
  display: block;
  width: 202px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  background: linear-gradient(to right, #fbd554, #fd5550);
  color: #ffffff;
  font-size: 22px;
  border-radius: 21px;
  margin-left: 103px;
  margin-top: 13px;
}
#home-banner .banner-info .banner-left .go-consult:hover{
  background: linear-gradient(to right, #fada71, #fa716c);
}
#home-banner .banner-info .banner-right{
  position: absolute;
  right: -10px;
  bottom: 0;
  z-index: 1;
}

#home-banner .banner-info .banner-right::after{
  content: "";
  display: block;
  background: url(../images/banner-float.png) center center no-repeat;
  background-size: 100%;
  width: 619px;
  height: 298px;
  position: absolute;
  right: -103px;
  top: -71px;
  animation: windSway 8s ease-in-out infinite;
  transform-origin: center bottom; 
}
@keyframes windSway {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) translateX(-10px) rotate(-2deg);
  }
  50% {
    transform: translateY(-25px) translateX(10px) rotate(2deg);
  }
  75% {
    transform: translateY(-15px) translateX(-5px) rotate(-1deg);
  }
}

.loader {
  position: relative;
}

.loader span {
  position: absolute;
  color: #fff;
  transform: translate(-50%, -50%);
  font-size: 66px;
  letter-spacing: 5px;
  right: 98px;
  top: 165px;
}

.loader span:nth-child(1) {
  color: #0cc6cc;
  -webkit-text-stroke: 0.3px #0cc6cc;
}

.loader span:nth-child(2) {
  color: #0070fe;
  -webkit-text-stroke: 1px #0070fe;
  animation: uiverse723 3s ease-in-out infinite;
}

@keyframes uiverse723 {
  0%, 100% {
    clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 
     54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }

  50% {
    clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 
     51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}


#face-problem .problem-detail{
  width: 1200px;
  margin: 0 auto;
  padding-top: 59px;
  padding-bottom: 51px;
  display: flex;
}
#face-problem .problem-detail .problem-right{
  margin-left: 105px;
  padding-top: 58px;
}

#face-problem .problem-detail .problem-right .info-title{
  color: #111111;
  font-size: 30px;
  margin-bottom: 35px;
}

#face-problem .problem-detail .problem-right .info-list li.item{
  margin-bottom: 31px;
}

#face-problem .problem-detail .problem-right .info-list li.item h2{
  font-size: 18px;
  color: #111111;
  font-weight: 600;
  margin-bottom: 13px;
}

#face-problem .problem-detail .problem-right .info-list li.item p{
  font-size: 16px;
  color: #111111;
}


#face-problem .problem-detail .problem-right .info-txt{
  font-size: 20px;
  color: #111111;
}

#face-problem .problem-detail .problem-right .info-txt span{
    background: linear-gradient(to right, #f1f669, #f1f669) no-repeat;
    background-size: 97% 11px;
    background-position: center bottom;
}
#face-problem .problem-detail .problem-right .info-txt span em{
  font-weight: 600;
}
#section1{
  background: url(../images/section1-bg.png) center bottom no-repeat;
  background-color: #ebf3ff;
  padding-bottom: 139px;
  position: relative;
}
#section1 .go-consult{
  width: 161px;
  height: 45px;
  font-size: 22px;
  line-height: 45px;
  color: #ffffff;
  text-align: center;
  border-radius: 13px;
  display: block;
  background: linear-gradient(to right, #fd5550, #fbd554) no-repeat;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 137px;
}
#section1 .go-consult:hover{
  background: linear-gradient(to right, #fc706b, #fddc6d) no-repeat;
}
#section1 .flow-nav {
  display: flex;
  margin: 0 44px;
  border-bottom: 1px solid #dee2eb;
  justify-content: space-between;
  padding: 0 76px;
  position: relative; /* 为 slider 定位 */
}

#section1 .flow-nav .item {
  display: flex;
  align-items: center;
  width: 200px;
  padding-bottom: 11px;
  cursor: pointer;
  padding-left: 35px;
  transition: color 0.3s;
}

#section1 .flow-nav .item i {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

#section1 .flow-nav .item.active i {
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 19px rgb(0 0 0 / 5%);
}

#section1 .flow-nav .item span {
  color: #333333;
  font-size: 17px;
}

#section1 .flow-nav .item.active span {
  color: #0024ff;
}

/* 滑动指示器 */
#section1 .flow-nav .slider {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #0024ff;
  transition: left 0.3s ease, width 0.3s ease;
  transform-origin: left;
}

#section1 .flow-box {
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 35px 23px 28px;
    margin-top: 13px;
}

#section1 .flow-box .box-title{
  text-align: center;
  font-size: 17px;
  color: #262626;
  font-weight: 600;
  margin-bottom: 43px;
}
#section1 .flow-box .box-title em{
    background: linear-gradient(to right, #f1f669, #f1f669) no-repeat;
    background-size: 97% 11px;
    background-position: center bottom;
}
#section1 .flow-box .box-detial{
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#section1 .flow-box .box-detial::before{
  content: "";
  display: block;
  width: 19px;
  height: 15px;
  background: url(../images/section1-bg-icon1.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: -30px;
}
#section1 .flow-box .box-detial::after{
  content: "";
  display: block;
  width: 19px;
  height: 15px;
  background: url(../images/section1-bg-icon2.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  right: 18px;
  bottom: 31px;
}
#section1 .flow-box .box-detial .box-item{
  width: 567px;
  background: linear-gradient(to bottom, #e1e7ff, #ffffff);
  padding: 11px 17px;
  margin-bottom: 10px;
}

#section1 .flow-box .box-detial .box-item h3{
    font-size: 15px;
    color: #333333;
    line-height: 24px;
    margin-bottom: 9px;
    font-weight: 600;
}

#section1 .flow-box .box-detial .box-item h3 em{
  color: #ff0000;
  font-weight: 600;
}

#section1 .flow-box .box-detial .box-item p{
  font-size: 14px;
  color: #696969;
  padding-left: 13px;
  position: relative;
  line-height: 30px;
}
#section1 .flow-box .box-detial .box-item p::before{
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background-color: #0024ff;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 14px;
}
#section1 .flow-box .box-detial .box-item p label{
  font-weight: 600;
  color: #000000;
}
#section1 .flow-box .box-detial .box-item p em{
  color: #ff0000;
  font-weight: 600;
}
#section1 .box-right{
  width: auto;
}
#section1 .box-right .box-item h3{
  text-align: center;
}
#section1 .box-right p{
  text-align: center;
}
#section1 .box-right p::before{
  display: none !important;
}
#section1 .box-right .box-table{
  width: 100%;
  margin-top: 12px;
}

#section1 .box-right .box-table th,#section1 .box-right .box-table tr{
  height: 28px;
  text-align: center;
}
#section1 .box-right .box-table th{
  background-color: #f8b913;
  font-size: 14px;
  color: #ffffff;
}

#section1 .box-right .box-table tr td{
  color: #696969;
  font-size: 12px;
  background-color: #ece9dc;
}

#section1 .box-right .box-table tr td:nth-child(2){
  color: #ff0000;
  font-weight: 600;
}

#section1 .box-right .box-item p.box-main-title{
  text-align: right;
  font-size: 25px;
  margin-top: 18px;
  color: #333333;
}

#section1 .box-right .box-item p.box-main-title em{
    background: linear-gradient(to right, #f1f669, #f1f669) no-repeat;
    background-size: 97% 11px;
    background-position: center bottom;
    color: #333333;
    font-weight: normal;
}

#section1 .flow-box.flow-box-2 .box-detial::after{
  bottom: -15px;
} 
#section1 .flow-box.flow-box-3 .box-title em{
    background-size: 100% 11px;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-header{
  display: flex;
  justify-content: center;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-header div{
  height: 28px;
  text-align: center;
  line-height: 28px;
  font-size: 13px;
  color: #ffffff;
  font-weight: 600;
  background-color: #f8b913;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-header div:first-child{
  width: 160px;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-header div:nth-child(2){
  width: 284px;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-header div:last-child{
  width: 381px;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-body .box-table-tr{
  display: flex;
  justify-content: center;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-body .box-table-tr div{
  height: 35px;
  text-align: center;
  line-height: 35px;
  font-size: 13px; /* 默认 */
  color: #696969;
  background-color: #f9f3dc;
  transition: all 0.2s ease; /* 添加过渡 */
}
#section1 .flow-box.flow-box-3 .box-table .box-table-body .box-table-tr.active{
    box-sizing: content-box;
    padding: 0 10px;
    width: 826px;
    background-color: #faf88c;
}

#section1 .flow-box.flow-box-3 .box-table .box-table-body .box-table-tr div:first-child{
  width: 160px;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-body .box-table-tr div:nth-child(2){
  width: 284px;
}
#section1 .flow-box.flow-box-3 .box-table .box-table-body .box-table-tr div:last-child{
  width: 381px;
}

#section1 .flow-box.flow-box-3 .box-table .box-table-body .box-table-tr.active div{
  background-color: #faf88c;
  color: #333333;
  font-size: 14px; /* active 时稍大 */
}
#section1 .flow-box.flow-box-3{
  margin-bottom: 33px;
  position: relative;
}
#section1 .flow-box.flow-box-3 .box-title{
  position: relative;
  z-index: 2;
}
#section1 .flow-box.flow-box-3::before{
  content: "";
  display: block;
  width: 1200px;
  height: 378px;
  background: url(../images/section1-box3-bg-icon1.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
#section1 .flow-box.flow-box-3::after{
  content: "";
  display: block;
  width: 1200px;
  height: 378px;
  background: url(../images/section1-box3-bg-icon2.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
#section1 .flow-box.flow-box-3 .box-detial{
  padding-bottom: 20px;
  z-index: 2;
}

#section1 .flow-box.flow-box-3 .box-detial::after{
  bottom: -2px;
  z-index: 1;
}


#section2 .content-detail::before{
  content: "";
  display: block;
  width: 1026px;
  height: 592px;
  background: url(../images/section2-bg.png) center center no-repeat;
  background-size: 100%;
  margin: 0 auto;
}

#section2 .content-detail .section2-box{
  padding: 20px 36px;
  width: 282px;
  background-color: rgba(235, 239, 253, 0.8);
  position: absolute;
  border-radius: 13px;
}
#section2 .content-detail .left-box{
    left: 36px;
    top: 196px;
    animation: floatUpAndDown 4s ease-in-out infinite;
}
#section2 .content-detail .right-box{
    right: 0px;
    bottom: 132px;
    animation: floatDownAndUp 4s ease-in-out infinite;
}
#section2 .content-detail .section2-box .box-title{
  color: #333333;
  font-size: 20px;
  position: relative;
  margin-bottom: 17px;
}

#section2 .content-detail .section2-box .box-title::before{
  content:"";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background-color: #1560fe;
  position: absolute;
  left: -20px;
  top: 7px;
}

#section2 .content-detail .section2-box label{
  color: #1663fe;
  font-size: 17px;
  display: block;
  margin-bottom: 11px;
}

#section2 .content-detail .section2-box p{
  font-size: 14px;
  line-height: 24px;
  color: #696969;
}


@keyframes floatUpAndDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* 向上 */
  }
}

/* 右边：0 → 下移 → 回到原位（与左边相反） */
@keyframes floatDownAndUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px); /* 向下 */
  }
}

#section2 .content-wrap::before{
  content: "";
  display: block;
  background: url(../images/section2-left-flost.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  left: -350px;
  top: 50px;
  width: 361px;
  height: 353px;
}

#section2 .content-wrap::after{
  content: "";
  display: block;
  background: url(../images/section2-right-flost.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  right: -358px;
  bottom: 74px;
  width: 699px;
  height: 525px;
}
#section3 {
  background-color: #f5f7f9;
  position: relative;
}
#section3::before{
  content: "";
  display: block;
  background: url(../images/section3-left-bg.png) center center no-repeat;
  background-size: 100%;
  width: 288px;
  height: 744px;
  position: absolute;
  left: 0;
  bottom: 10px;
}
#section3::after{
  content: "";
  display: block;
  background: url(../images/section3-right-bg.png) center center no-repeat;
  background-size: 100%;
  width: 300px;
  height: 747px;
  position: absolute;
  right: 0;
  top: 10px;
}

#section3 .section3-detail{
  width: 1200px;
  margin: 0 auto;
  padding-top: 62px;
}

#section3 .section3-detail .section3-title{
  display: flex;
  align-items: center;
}

#section3 .section3-detail .section3-title::before{
  content: "";
  display: block;
  background: url(../images/section3-title-icon.png) center center no-repeat;
  background-size: 100%;
  width: 52px;
  height: 45px;
  margin-right: 12px;
}

#section3 .section3-detail .section3-title span{
  font-size: 22px;
  font-weight: 600;
  color: #262626;
}

#section3 .section3-detail .section3-box1{
  width: 1149px;
  height: 380px;
  background: url(../images/section3-bg-img1.png) bottom center no-repeat;
  position: relative;
  margin: 0 auto;
  margin-top: 170px;
}

#section3 .section3-detail .section3-box1 .box1-list li.item {
  width: 266px;
  padding: 16px 28px 14px;
  text-align: center;
  position: absolute;
  border-radius: 12px;
  cursor: pointer;

  /* 👇 关键：不再用 transition: all！而是分开写 */
  /* 滚动动画：opacity + transform（慢） */
  opacity: 0;
  transform: translateY(80px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;

  /* Hover 效果：background + box-shadow（快） */
  background-color: transparent; /* 初始无背景 */
  box-shadow: none;
  transition-property: opacity, transform, background-color, box-shadow;
  transition-duration: 0.7s, 0.7s, 0.3s, 0.3s;
  transition-timing-function: ease-out, ease-out, ease, ease;
}

/* ===== 滚动出现状态 ===== */
#section3 .section3-detail .section3-box1 .box1-list li.item.animate-fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 时间差延迟（只影响 opacity/transform 的延迟） ===== */
#section3 .section3-detail .section3-box1 .box1-list li.item.animate-fade-in[data-delay="0"]   { transition-delay: 0s, 0s, 0s, 0s; }
#section3 .section3-detail .section3-box1 .box1-list li.item.animate-fade-in[data-delay="0.3"] { transition-delay: 0.3s, 0.3s, 0s, 0s; }
#section3 .section3-detail .section3-box1 .box1-list li.item.animate-fade-in[data-delay="0.6"] { transition-delay: 0.6s, 0.6s, 0s, 0s; }
#section3 .section3-detail .section3-box1 .box1-list li.item.animate-fade-in[data-delay="0.9"] { transition-delay: 0.9s, 0.9s, 0s, 0s; }

/* ===== Hover 交互效果 ===== */
#section3 .section3-detail .section3-box1 .box1-list li.item:hover {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(22, 99, 254, 0.1);
}
#section3 .section3-detail .section3-box1 .box1-list li.item h3{
  font-size: 21px;
  color: #1663fe;
  margin-bottom: 12px;
}

#section3 .section3-detail .section3-box1 .box1-list li.item p{
  font-size: 14px;
  line-height: 20px;
  color: #696969;
}


#section3 .section3-detail .section3-box2{
  width: 988px;
  height: 470px;
  background: url(../images/section3-bg-img2.png) center center no-repeat;
  background-size: 100%;
  margin: 0 auto;
  position: relative;
  margin-top: 34px;
}

#section3 .section3-detail .section3-box2 .box2-list li.item{
  position: absolute;
}

#section3 .section3-detail .section3-box2 .box2-list li.item .item-info {
  position: relative;
  padding: 34px 23px 20px;
  border: 1px solid transparent;
  background-color: #f1f6ff;
  /* 增强阴影立体感：添加Y轴偏移和模糊度 */
  box-shadow: 0 4px 15px rgba(22, 99, 254, 0.12), 
              0 2px 5px rgba(22, 99, 254, 0.08);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* li.item整体悬停效果 */
#section3 .section3-detail .section3-box2 .box2-list li.item {
  position: absolute;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

/* 鼠标移入li.item时的效果 */
#section3 .section3-detail .section3-box2 .box2-list li.item:hover {
  transform: translateY(-8px);
}

#section3 .section3-detail .section3-box2 .box2-list li.item:hover .item-info {
  border-color: #92b1ee;
}

#section3 .section3-detail .section3-box2 .box2-list li.item .item-info h2 {
  position: absolute;
  top: -20px; /* 调整这个值控制向上偏移 */
  left: 0;
  right: 0;
  margin: 0 auto; /* 水平居中 */
  width: fit-content; /* 或 max-content */
  width: -moz-fit-content;
  padding: 0 24px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  background: linear-gradient(to right, #135ce4, #03bbff) no-repeat;
  border-radius: 30px;
  font-size: 19px;
  color: #ffffff;
}

#section3 .section3-detail .section3-box2 .box2-list li.item .item-info p{
  font-size: 14px;
  line-height: 20px;
  color: #696969;
}



#section4 .advantage-list {
  display: flex;
  justify-content: space-between;
}

#section4 .advantage-list li.item {
  width: 217px;
  height: 280px;
  position: relative;
  overflow: hidden; /* 确保遮罩不溢出 */
  cursor: pointer;
}

#section4 .advantage-list li.item .item-img {
  width: 100%;
  display: block;
}

/* 遮罩层：默认隐藏，hover 时显示 */
#section4 .advantage-list li.item .item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(22, 88, 220, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* 不阻挡鼠标事件 */
}

#section4 .advantage-list li.item.hovered .item-overlay {
  opacity: 1;
  visibility: visible;
}

/* 文字：默认隐藏，hover 时显示 */
#section4 .advantage-list li.item .item-txt {
  text-align: right;
  font-size: 14px;
  line-height: 21px;
  width: 160px;
  color: #ffffff;
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#section4 .advantage-list li.item.hovered .item-txt {
  opacity: 1;
  visibility: visible;
}

/* 底部信息：始终显示，不受影响 */
#section4 .advantage-list li.item .item-info {
  position: absolute;
  bottom: 31px;
  left: 24px;
}

#section4 .advantage-list li.item .item-info label {
  display: block;
  font-size: 18px;
  color: #ffffff;
  margin-top: 15px;
}


#section4 .product-show {
  display: flex;
  margin-top: 78px;
  gap: 13px;
}
#section4 .product-show .show-list {
  position: relative;
}
#section4 .product-show .show-list .list-detail li.item{
  display: flex;
  align-items: center;
  position: absolute;
}
#section4 .product-show .show-list .list-detail li.item::before{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: #1663fe;
  margin-right: 12px;
}
#section4 .product-show .show-list .list-detail li.item span{
  padding: 0 8px;
  height: 25px;
  line-height: 25px;
  background-color: #1663fe;
  display: block;
  font-size: 13px;
  color: #ffffff;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

#section4 .product-show .show-list .list-detail li.item span em{
  font-weight: 600;
  color: #ffb240;
}
#section4 .product-show .show-list .video-img{
  position: absolute;
    right: -17px;
    top: 287px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#section4 .product-show .show-list .video-img::before{
  content: "";
  display: block;
  background: url(../images/start.png) center center no-repeat;
  background-size: 100%;
  width: 50px;
  height: 50px;
  animation: zoomInAndOut 2s ease-in-out infinite;
  position: absolute; /* 关键：让伪元素脱离文档流并可精确定位 */
  margin: 0 auto;
  transform: translate(-50%, -50%); /* 精准居中 */
}
#section4 .product-show .product-detail{
  margin-left: 50px;
  background: linear-gradient(to bottom, #e1e7ff, #ffffff);
  padding: 30px 28px 30px 43px;
  width: 327px;
}

#section4 .product-show .product-detail h2{
  font-size: 18px;
  color: #111111;
  font-weight: 600;
  margin-bottom: 2px;
}

#section4 .product-show .product-detail h2 em{
  color: #fc8800;
  font-size: 21px;
}

#section4 .product-show .product-detail p{
  position: relative;
  font-size: 16px;
  color: #696969;
  line-height: 31px;
  padding-left: 30px;
  margin-top: 14px;
}

#section4 .product-show .product-detail p::before{
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  background: url(../images/right-icon.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 8px;
}

#section5 .section5-first{
  background: linear-gradient(to top right, #3335c3, #1f61d1);
  position: relative;
  z-index: 2;
}
#section5 .section5-first::before{
  content: "";
  display: block;
  background: url(../images/section5-bg-icon1.png) center center no-repeat;
  background-size: 100%;
  width: 541px;
  height: 441px;
  position: absolute;
  right: -94px;
  top: -62px;
}
#section5 .section5-first::after{
  content: "";
  display: block;
  background: url(../images/section5-bg-icon2.png) center center no-repeat;
  background-size: 100%;
  width: 568px;
  height: 438px;
  position: absolute;
  bottom: -177px;
  left: 0;
  z-index: 1;
}
#section5 .content-wrap .mian-title{
  color: #ffffff;
}
#section5 .section5-nav{
  display: flex;
  width: 100%;
}

#section5 .section5-nav .nav-item{
  width: 50%;
  height: 120px;
  padding-left: 26px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 29px;
  padding-right: 21px;
}

#section5 .section5-nav .nav-item:first-child{
  background-color: #0cadfe;
}
#section5 .section5-nav .nav-item:last-child{
  background-color: #212121;
}

#section5 .section5-nav .nav-item:first-child::before{
  content: "核心一";
  color: #2eb9fe;
  font-style: italic;
  font-size: 44px;
  display: block;
  position: absolute;
  bottom: 18px;
  right: 10px;
}

#section5 .section5-nav .nav-item:last-child::before{
  content: "核心二";
  color: #404040;
  font-style: italic;
  font-size: 44px;
  display: block;
  position: absolute;
  bottom: 18px;
  right: 10px;
}

#section5 .section5-nav .nav-item .item-info h2{
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
}

#section5 .section5-nav .nav-item .item-info p{
  font-size: 14px;
  color: #ffffff;
  line-height: 23px;
}
#section5 .section5-detail {
  position: relative;
  margin: 0 18px;
  margin-top: 53px;
}
#section5 .section5-detail .detail-title{
  font-size: 26px;
  color: #ffffff;
  font-style: italic;
  font-weight: 600;
  position: absolute;
  left: 0;
}

#section5 .section5-detail .detail-title em{
  font-size: 31px;
}

#section5 .section5-detail .detail-pic {
  width: 100%;
  text-align: center;
}

#section5 .section5-detail .detail-list{
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 10px;
  top: 81px;
}

#section5 .section5-detail .detail-list li.item{
  width: 292px;
  display: flex;
  gap: 22px;
  margin-right: 570px;
  margin-bottom: 63px;
}
#section5 .section5-detail .detail-list li.item .item-img{
  width: 49px;
}
#section5 .section5-detail .detail-list li.item:nth-child(2n){
  margin-right: 0;
}
#section5 .section5-detail .detail-list li.item .item-info h2{
  font-size: 18px;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 18px;
}

#section5 .section5-detail .detail-list li.item .item-info p{
  font-size: 15px;
  line-height: 23px;
  color: #ffffff;
}



#section5 .section5-detail .detail-list li.item:hover .item-img img {
  transform: translateY(-8px) scale(1.05);
}

/* 默认图片样式 */
#section5 .section5-detail .detail-list li.item .item-img img {
  display: block;
  transform: translateY(0) scale(1);
  filter: brightness(1);
  box-shadow: none;
  transition: 
    transform 0.4s ease-out;
  transform-origin: center;
}


#section5 .section5-last{
  background-color: #f5f7f9;
  position: relative;
  z-index: 1;
}
#section5 .content-wrap{
  z-index: 2;
}
#section5 .section5-last .section5-last-detail {
  display: flex;
}
#section5 .section5-last .section5-last-detail .last-left{
  background: url(../images/section5-pic2.png) center center no-repeat;
  display: block;
  background-size: 100%;
  position: relative;
  width: 551px;
  height: 498px;
  margin-top: 38px;
}
#section5 .section5-last .section5-last-detail .left-info li.item{
  display: flex;
  align-items: center;
  height: 50px;
  padding-left: 10px;
  padding-right: 12px;
  min-width: 147px;
  box-shadow: rgba(22, 99, 254, 0.1) 0px 0px 10px;
  gap: 10px;
  position: absolute;
  background-color: #fff;
  border-radius: 8px;
  font-size: 15px;
  color: #333333;

  /* 初始状态：完全隐藏且缩小 */
  opacity: 0;
  transform: scale(0.5);
}
/* 弹动入场动画 */
@keyframes popInNatural {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.15); /* 放大到 1.15 倍（不要太大）*/
  }
  80% {
    transform: scale(0.95); /* 轻微回缩，制造“缓冲”感 */
  }
  100% {
    transform: scale(1); /* 最终稳住 */
    opacity: 1;
  }
}

#section5 .section5-last .section5-last-detail .left-info li.item.animate {
  animation: popInNatural 1s ease-out forwards;
}
#section5 .section5-last .section5-last-detail .left-info li.item.fadeOut {
  animation: fadeOutSmooth 1.2s ease-out forwards !important;
}

@keyframes fadeOutSmooth {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
#section5 .section5-last .last-right{
  width: 610px;
  margin-left: 56px;
}
#section5 .section5-last .last-right .right-title{
  font-weight: 600;
  font-style: italic;
  color: #1663fe;
  font-size: 24px;
  margin-bottom: 36px;
}

#section5 .section5-last .last-right .right-title em{
  font-size: 33px;
}

#section5 .section5-last .last-right .right-list li.item{
  margin-bottom: 22px;
  padding-left: 30px;
  position: relative;
}
#section5 .section5-last .last-right .right-list li.item:last-child{
  margin-bottom: 0;
}
#section5 .section5-last .last-right .right-list li.item::before{
  content: "";
  display: block;
  background: url(../images/section5-label-icon.png) center center no-repeat;
  background-size: 100%;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 7px;
}
#section5 .section5-last .last-right .right-list li.item h3{
  color: #000000;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}

#section5 .section5-last .last-right .right-list li.item h3 em{
  font-size: 22px;
  color: #fc8800;
}

#section5 .section5-last .last-right .right-list li.item p{
  font-size: 14px;
  line-height: 24px;
  color: #696969;
}
#section6{
  position: relative;
}
#section6::before{
  content: "";
  display: block;
  width: 1002px;
  height: 547px;
  position: absolute;
  background: url(../images/section6-bg-icon-left.png) center center no-repeat;
  left: 0;
  top: 0;z-index: 1;
}
#section6::after{
  content: "";
  display: block;
  width: 681px;
  height: 566px;
  position: absolute;
  background: url(../images/section6-bg-icon-right.png) center center no-repeat;
  right: 0;
  bottom: 0;
  z-index: 1;
}
#section6 .content-wrap{
  position: relative;
  z-index: 2;
}
#section6 .ecology-list{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
}

#section6 .ecology-list .ecology-item{
  width: 190px;
  height: 463px;
  position: relative;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  font-size: 16px;
  color: #fff;
  overflow: hidden;
}

.ecology-item img, .innovation-item img, .news-images img, .news-time input, .realistic-div img {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  object-fit: cover;
}

#section6 .ecology-list .ecology-item .ecology-mask {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%);
}
#section6 .ecology-list .ecology-item.active .ecology-mask {
  background-color: rgba(22, 99, 254, 0.85);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  text-align: left;
  padding-left: 25px;
}
#section6 .ecology-list .ecology-item.active {
  width: 374px !important;
}
#section6 .ecology-list .ecology-item .ecology-mask h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #ffffff;
  text-align: center;
  transition: text-align 0.3s ease;
}
#section6 .ecology-list .ecology-item .ecology-mask p {
  font-size: 12px;
  opacity: 0;
  visibility: hidden; /* 不占交互空间 */
  transform: translateY(10px); /* 从下方滑入 */
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out,
    visibility 0.3s ease-out;
  margin: 0;
}
#section6 .ecology-list .ecology-item.active {
    width: 374px !important;
}
#section6 .ecology-list .ecology-item.active h2 {
  text-align: left;
}
#section6 .ecology-list .ecology-item.active .ecology-mask p {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ecology-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding-top: 23px;
  height: 106px;
  text-align: center;
  transition: all 0.3s ease-out;
}

#section6 .ecology-list .ecology-item  .ecology-mask-info{
    position: absolute;
    bottom: 25px;
    width: 100%;
}
#section7 {
  background-color: #f6f7f9;
}

#section7 .content-detail{
  display: flex;
}

#section7 .content-detail .section7-nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 15px;
}

#section7 .content-detail .section7-nav li.item{
  display: flex;
  align-items: center;
  width: 185px;
  height: 71px;
  padding-left: 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .3s linear;
  gap: 12px;
}
#section7 .content-detail .section7-nav li.item .item-img{
  width: 38px;
  text-align: center;
}
#section7 .content-detail .section7-nav li.item.active,#section7 .content-detail .section7-nav li.item:hover{
  background-color: #fff;
  box-shadow: -6px 14px 22.7px 0 #ebeff9;
}
#section7 .content-detail .section7-nav li.item .item-info h2{
  font-size: 15px;
  color: #393939;
  font-weight: 600;
}
#section7 .content-detail .section7-nav li.item.active .item-info h2,#section7 .content-detail .section7-nav li.item.active .item-info p{
  color: #1663fe;
}
#section7 .content-detail .section7-nav li.item:hover .item-info h2,#section7 .content-detail .section7-nav li.item:hover .item-info p{
  color: #1663fe;
}
#section7 .content-detail .section7-nav li.item .item-info p{
  font-size: 13px;
  margin-top: 8px;
  color: #696969;
}
#section7 .item-img img,
#section7 .section7-detial img {
  transition: opacity 0.3s ease-in-out;
}
#section8 {
  background: url(../images/section8-bg.png) center center no-repeat;
}
#section8 .content-wrap{
padding-bottom: 41px;
}
#section8 .section8-list{
  display: flex;
  justify-content: space-between;
}

#section8 .section8-list li.item .item-top{
  width: 384px;
  height: 233px;
  text-align: center;
  background: url(../images/section8-item-bg.png) center center no-repeat;
  background-size: 100%;
  padding-top: 8px;
  position: relative;
  cursor: pointer;
}
#section8 .section8-list li.item .item-top .top-img{
  position: relative;
  display: flex;
  justify-content: center;
  width: 297px;
  margin: 0 auto;
}
#section8 .section8-list li.item .item-top .item-top-cover{
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 88, 233, 0.5);
  flex-direction: column;
}
#section8 .section8-list li.item .item-top .item-top-cover::before{
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  background: url(../images/section8-search-icon.png) center center no-repeat;
  background-size: 100%;
  margin-bottom: 10px;
}
#section8 .section8-list li.item .item-top .item-top-cover p{
  color: #ffffff;
  font-size: 15px;
}
#section8 .section8-list li.item:hover .item-top .item-top-cover{
  opacity: 1;
}

#section8 .section8-list li.item .item-txt{
  font-size: 16px;
  color: #000000;
  margin-top: 15px;
  text-align: center;
}

#section8 .el-dialog{
  min-width: 500px;
}

#section8 .el-dialog .el-dialog__headerbtn .el-dialog__close{
  color: #d81e06;
  font-size: 24px;
}

#section9{
  height: 213px;
  background: url(../images/section9-bg.jpg) center center no-repeat;
  background-color: #2468f2;
}
#section9 .content-wrap{
  padding-top: 38px;
}
#section9 .section9-detail{
  padding-left: 32px;
  position: relative;
  z-index: 3;
}

#section9 .section9-detail .item-tips{ 
  background:url(../images/section9-tips-icon.png) center center no-repeat;
  background-size: 100%;
  text-align: center;
  padding-top: 5px;
  color: #2468f2;
  font-size: 20px;
  width: 146px;
  height: 35px;
}
#section9 .content-wrap::before{
  content: "";
  display: block;
  background: url(../images/section9-left-bg.png) center center no-repeat;
  background-size: 100%;
  width: 151px;
  height: 57px;
  position: absolute;
  left: 31px;
  bottom: 30px;
}
#section9 .content-wrap::after{
  content: "";
  display: block;
  background: url(../images/section9-right-bg.png) center center no-repeat;
  background-size: 100%;
  width: 626px;
  height: 212px;
  position: absolute;
  right: 85px;
  top: 0;
}
#section9 .section9-detail p{
  color: #ffffff;
  font-weight: 600;
  margin-top: 19px;
}

#section9 .section9-detail p.item-txt{
  font-size: 27px;
}
#section9 .section9-detail p.item-sub-txt {
  display: flex;
  align-items: center;
}
#section9 .section9-detail p.item-sub-txt span{
  font-size: 23px;
  line-height: 29px;
}
#section9 .section9-detail p.item-sub-txt a.go-buy{
  display: block;
  width: 84px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  background-color: #ffb240;
  font-size: 14px;
  cursor: pointer;
}
#section9 .section9-detail p.item-sub-txt a.go-buy:hover{
  background-color: #fabe64;
}
#section9 .section9-detail p.item-sub-txt .arrow-icon{
  display: block;
  background: url(../images/section9-arrow-icon.png) center center no-repeat;
  background-size: 100%;
  width: 44px;
  height: 17px;
  margin: 0 10px;
}
#section9 .section9-detail p.item-txt em{
  font-size: 32px;
  color: #ffb240;
  margin-left: 9px;
  display: inline-block;
  animation: zoomInAndOut 2s ease-in-out infinite;
}

@keyframes zoomInAndOut {
  0% {
    transform: scale(1); /* 初始状态，不放大 */
  }
  50% {
    transform: scale(1.2); /* 中间状态，放大到1.2倍 */
  }
  100% {
    transform: scale(1); /* 结束状态，复原 */
  }
}



/* 公共基类 */
.animate-fade-in,
.animate-slide-left,
.animate-slide-right {
  opacity: 0;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* 动态延迟 */
[data-delay="0"]   { transition-delay: 0s; }
[data-delay="0.2"] { transition-delay: 0.2s; }
[data-delay="0.3"] { transition-delay: 0.3s; }
[data-delay="0.4"] { transition-delay: 0.4s; }
[data-delay="0.6"] { transition-delay: 0.6s; }
[data-delay="0.9"] { transition-delay: 0.9s; }

/* 动画状态 */
.animate-fade-in {
  transform: translateY(80px);
}
.animate-fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

.animate-slide-left {
  transform: translateX(-80px);
}
.animate-slide-left.appear {
  opacity: 1;
  transform: translateX(0);
}

.animate-slide-right {
  transform: translateX(80px);
}
.animate-slide-right.appear {
  opacity: 1;
  transform: translateX(0);
}



/* 视频弹窗遮罩 */
.por-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.por-modal-player {
  /* 默认隐藏，由 v-show 控制 */
}

/* 视频容器 */
.por-player-wrapper {
  position: relative;
  width: min(90vw, 800px); /* 最大宽度 800px，移动端自适应 */
  height: min(80vh, 600px); /* 最大高度 600px */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.por-player-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 👈 关键：保持比例，完整显示 */
  outline: none;
  background: #000;
}

/* 关闭按钮 */
.por-player-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s ease;
  z-index: 10;
}

.por-player-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

.car-nav-placeholder {
  width: 1200px;
  height: 50px; /* 必须与 .car-nav 高度严格一致 */
  margin: 0 auto 66px;
  position: relative;
}

.car-nav {
  width: 1200px;
  height: 50px;
  margin: 0 auto 66px;
  position: absolute; /* 改为 relative，不脱离文档流 */
  left: 0;
  top: 0;
  transform: none;
  transition: all 0.2s ease;
}

.car-nav .nav-item{
  cursor: pointer;
}
.car-nav .nav-item:first-child{
  width: 676px;
  height: 50px;
  background: url(../images/car-nav-left.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-right: 131px;
}
.car-nav .nav-item.active:first-child{
  background: url(../images/car-nav-left-active.png) center center no-repeat !important;
  background-size: 100%;
}
.car-nav .nav-item:first-child:hover{
  background: url(../images/car-nav-left-hover.png) center center no-repeat;
  background-size: 100%;
}
.car-nav .nav-item:last-child{
  width: 676px;
  height: 50px;
  background: url(../images/car-nav-right.png) center center no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-left: 131px;
}
.car-nav .nav-item.active:last-child{
  background: url(../images/car-nav-right-active.png) center center no-repeat !important;
  background-size: 100%;
}
.car-nav .nav-item:last-child:hover{
  background: url(../images/car-nav-right-hover.png) center center no-repeat;
  background-size: 100%;
}
.car-nav .nav-item svg{
  color: #333333;
}
.car-nav .nav-item.active svg{
  color: #fff;
}
.car-nav .nav-item span{
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}

.car-nav .nav-item.active span{
  color: #fff;
}

.car-nav.car-nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 20px;
  width: 1200px;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}