body {
          background: rgba(255, 255, 255, 1);
          color: rgba(0, 0, 0, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          line-height: 1.5;}
          
            @font-face {
          font-family: 'kugaoduanhei';
          src: url('%7bHOME_THEME_PATH%7dfont/%c3%a7%c2%ab%c2%99%c3%a9%c2%85%c2%b7%c3%a9%c2%ab%c2%98%c3%a7%c2%ab%c2%af%c3%a9%c2%bb%c2%91%c3%a4%c2%bf%c2%ae%c3%a8%c2%ae%c2%a2151105.html')
        }
    
        @font-face {
          font-family: 'kaiti';
          src: url('%7bHOME_THEME_PATH%7dfont/%c3%a6%c2%96%c2%b9%c3%a6%c2%ad%c2%a3%c3%a6%c2%a5%c2%b7%c3%a4%c2%bd%c2%93%c3%a7%c2%ae%c2%80%c3%a4%c2%bd%c2%93.html')
        }
    
        @font-face {
          font-family: 'fangsong';
          src: url('%7bHOME_THEME_PATH%7dfont/%c3%a4%c2%bb%c2%bf%c3%a5%c2%ae%c2%8b.html')
        }
    
      
    
        @font-face {
          font-family: 'kuaileti';
          src: url('%7bHOME_THEME_PATH%7dfont/%c3%a7%c2%ab%c2%99%c3%a9%c2%85%c2%b7%c3%a5%c2%bf%c2%ab%c3%a4%c2%b9%c2%90%c3%a4%c2%bd%c2%932016%c3%a4%c2%bf%c2%ae%c3%a8%c2%ae%c2%a2%c3%a7%c2%89%c2%88.html')
        }
    
        @font-face {
          font-family: 'yiwenti';
          src: url('%7bHOME_THEME_PATH%7dfont/%c3%a7%c2%ab%c2%99%c3%a9%c2%85%c2%b7%c3%a6%c2%96%c2%87%c3%a8%c2%89%c2%ba%c3%a4%c2%bd%c2%93.html')
        }
    
        @font-face {
          font-family: 'Georgia';
          src: url('%7bHOME_THEME_PATH%7dfont/Georgia.html')
        }
    
     
    
        @font-face {
          font-family: 'tahoma';
          src: url('%7bHOME_THEME_PATH%7dfont/tahoma.html')
        }
    
      
        .ff-sf .zz-comp-list__item {
          transition: all .5s linear;
        }
    
        .ff-sf .zz-comp-list__item:hover {
          transform: translateY(-10px)
        }
             @media (min-width:780px){
     .banner{
        position: absolute;
        top: 5%;
        left: 20%;
     }
     .active{
        position: absolute;
        background: #093CB3;
        width: 5px;
        height: 5px;
        border-radius: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 35px;
     
             }
             .hactive{
              color:#093CB3 ;   
              font-weight: 800;
             }
             }
     @media (max-width:780px){
          .banner{
        left: 0;
     }
     .description{
         width: auto !important;
     }
     }
     
.containertop{
            display: flex;
        max-width: 1440px;
        margin: auto;
        margin-top: 40px;
}
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    max-width: 1200px;
    margin: auto;
padding: 40px 20px 0 100px;
}

.title {
    grid-column: 1 / 4;
    font-size: 24px;
    font-weight: bold;
}

.description {
        width: 50%;
        /* text-align: center; */
        padding: 40px 0 0 40px;
}

.description h2 {
  font-size: 28px;
        margin-bottom: 10px;
        font-weight: 800;
}

.description p {
    font-size: 14px;
    color: #c7c7c7;
    margin-bottom: 20px;
    margin: 20px 0 200px 0;
}

.description button {
    padding: 10px 20px;
    background: #007bff00;
    color: #ababab;
    cursor: pointer;
    transition: background 0.3s;
    border: 1px solid #a5a5a5;
    border-radius: 50px;
    margin-bottom: 20px;
}

.description button:hover {
    font-size: 14px;
}

.service-box {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s;
}

.service-box:hover {
    transform: translateY(-10px);
}

.service-box img {
    max-width: 60px;
    margin-bottom: 15px;
}

.service-box h3 {
    font-size: 18px;
    margin: 15px 0;
}

.service-box p {
    font-size: 14px;
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .containertop{
        display: grid;
    }
    .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 20px 20px;
    }

    .title, .description {
        grid-column: 1 / -1;
        text-align: center;
        padding: 0;
    }
    .description p {
        margin: 20px;
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

  .page-wrapper {
   
     width: 100%;
    background-color: #f2f2f2;
    max-height: 500px;
        background-color: #f2f2f2;
    }

    /* Header Section */
    .intro-section {
        max-width: 1440px;
        color: #fff;
        padding: 40px;
        text-align: left;
        margin: auto;
    }
    
    .intro-section p{
          color:#c7c7c7;
          margin: 20px 0;
    }
    .intro-section h2{
            font-size: 28px;
   
    font-weight: bold;
    }
    .intro-title {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .intro-description {
        font-size: 16px;
        max-width: 800px;
        margin: 0 auto;
    }

    /* Grid Layout for Solution Cards */
    .solutions-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding: 30px 10%;
        max-width: 1440px;
    margin: auto;
    }

    /* Solution Card Styling */
    .solution-card {
        width: 100%;
        padding: 20px;
        text-align: center;
        color: #333;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 380px; /* Set a fixed height for consistent aspect ratio */
    }

    .solution-card .solution-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
        padding: 5px;
        border-radius: 4px;
    }

    .solution-card .solution-description {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
        text-align: center;
        padding: 5px;
        border-radius: 4px;
    }

  

    /* Responsive Adjustments */
    @media (max-width: 1024px) {
        .solutions-grid {
            grid-template-columns: repeat(2, 1fr);
            padding: 30px 5%;
        }

        .solution-card {
            height: auto;
        }
    }

    @media (max-width: 768px) {
        .page-wrapper {
        max-height: 100%;
            
        }
        .solutions-grid {
            grid-template-columns: 1fr;
            gap: 15px;
            padding: 30px 5%;
        }

        .solution-card {
            height: auto;
        }

        .intro-title {
            font-size: 22px;
        }

        .intro-description {
            font-size: 14px;
            padding: 0 5%;
        }

        .solution-title {
            font-size: 15px;
        }

        .solution-description {
            font-size: 13px;
        }
    }
    
     .main-container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 40px;
        }

        .section-header {
            text-align: left;
            margin-bottom: 30px;
        }

        .section-header h2 {
            font-size: 28px;
            color: #333;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .section-header p {
            color: #c7c7c7;
            font-size: 16px;
            margin-top: 30px;
        }

        .products-container {
            display: flex;
            flex-direction: column;
            /*gap: 40px;*/
            margin-top: 100px;
        }

        .product-card {
            display: flex;
            /*gap: 20px;*/
            align-items: center;
            position: relative;
            /*padding: 20px;*/
            /*border: 1px dashed #ddd;*/
            /*border-radius: 15px;*/
            background-color: #ffffff;
        }

        .product-card:nth-child(odd) {
            flex-direction: row;
        }

     

        .card-image-container {
            /*flex: 1;*/
            max-width: 50%;
            /*position: relative;*/
            overflow: hidden;
            
        }

        .card-image-container img {
            width: 100%;
            height: auto;
            /*border-radius: 15px;*/
        }

        .card-index-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            background-color: #2a52be;
            padding: 5px 10px;
            /*border-radius: 15px;*/
        }
        

        .card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
        }
       .card-content {
    text-align: left; /* 所有项文字均左对齐 */
}
.card-content .wid{
width: 20px;
    height: 4px;
    background: #093CB3;
    margin-bottom: 10px;
}

.card-content:nth-child(2),
.card-content:nth-child(4) {
    margin-left:70px; /* 第 1 和 3 项左侧间隔 50px */
}
        .card-content h3 {
            font-size: 18px;
            color: #333;
            font-weight: bold;
            margin-bottom: 10px;
        }
.card-content span{
    font-size: 12px;
    color: #c9c9c9;
}  
        .card-content p {
            font-size: 13px;
            color: black;
            line-height: 1.6;
            margin-bottom: 10px;
            max-width: 500px;
        }

        .card-content .link-more {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
            font-size: 14px;
        }

        .card-content .link-more:hover {
            text-decoration: underline;
        }

        /* Responsive Styles */
        @media (max-width: 768px) {
            .product-card {
                flex-direction: column !important;
                text-align: center;
                display: flex;
    gap: 20px;
    
            }
.products-container{
    gap: 40px;
    margin-top: 0px;
}

            .card-image-container {
                max-width: 100%;
                display: none;
            }

            .card-content {
                align-items: center;
                margin-left: 0 !important;
            }

            .card-content h3 {
                font-size: 20px;
            }

            .card-content p {
                font-size: 16px;
            }

            .card-index-badge {
                font-size: 20px;
                padding: 8px 16px;
                display: none;
            }
        }
/* Industry Section */
.industry-carousel-section {
    text-align: center;
    /*margin-bottom: 50px;*/
}

.industry-carousel-section h2 {
    font-size: 28px;
    color: #333;
    font-weight: bold;
}

.industry-carousel-section p {
    font-size: 16px;
    color: #c7c7c7;
    margin-bottom: 20px;
}

.image-slider {
    position: relative;
    margin: auto;
        margin-top: 40px;
}

.slider-container {
  width: 100%; /* 容器宽度自适应父容器 */
  overflow: hidden; /* 隐藏超出部分 */
  position: relative;
}

.slider-track {
  display: flex; /* 横向排列项目 */
  transition: transform 0.5s ease; /* 平滑过渡效果 */
  background: white;
}

.slider-item {
  flex: 0 0 20%; /* 每个图片占容器的20% */
  box-sizing: border-box;
  margin: 0 10px;
  text-align: center;
  position: relative;
   overflow: hidden;
}
  .slider-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.6s ease;
    }
    .slider-item::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background-color: #2a52be; /* 初始透明背景色 */
      opacity: 0.7;
   
      transform: translate(-50%, -50%);
      transition: width 0.7s ease, height 0.7s ease;
    }
    .slider-item:hover::before {
      width: 100%;
      height: 100%; /* 扩展到图片大小 */
    }
    .slider-item:hover span {
      background-color: rgb(255 255 255 / 0%);
    }
.slider-item span {
position: absolute;
    /* bottom: 10px; */
    left: 10px;
    color: #ffffff;
    font-size: 18px;
    background-color: rgb(0 0 0 / 50%);
    /* padding: 5px 10px; */
    /* border-radius: 5px; */
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
}

/* Updated Slider Button Positioning */
.slider-navigation {
position: absolute;
    top: -100px;
    right: 70px;
    display: flex;

}

.slider-button {
    background-color: white;
    color: black;
    font-size: 21px;
    border: none;
    cursor: pointer;
    line-height: 12px;
    padding: 12px;
}
.button-next{
    background: #2a52be;
}
/* Clients Section */
.clients-logos-section {
    text-align: center;
    margin-top: 50px;
}

.clients-logos-section h2 {
    font-size: 28px;
    color: #333;
    font-weight: bold;
}

.clients-logos-section p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.logo-grid img {
    max-width: 150px;
    height: auto;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
@keyframes scroll {
     0% {
        transform: translateX(0); /* 从起始位置开始 */
    }
    100% {
        transform: translateX(-50%); /* 滚动一半的宽度以实现补位 */
    }
}
/* 主容器 */
.hst-pro-features {
  height: 400px;
  position: relative;
  text-align: center;
  padding: 40px 0 0;
  font-family: Arial, sans-serif;
}

/* 蓝色背景条 */
.hst-pro-background {
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #093CB3;
  z-index: 1;
}

/* 卡片容器 */
.hst-pro-cards {
    width: 1440px;
    margin: 50px auto;
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  gap: 20px;
}

/* 单个卡片 */
.hst-pro-card {
  background: white;
  width: 250px;
  height: 200px;
  padding: 20px;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}
.hst-pro-card:hover {
    transform: translateY(-10px);
}

/* 图标样式 */
.hst-pro-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* 文本样式 */
.hst-pro-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
/* 主容器 */
.hst-platforms {
  text-align: center;
  font-family: Arial, sans-serif;
}

/* 标题样式 */
.hst-platforms-title {
  font-size: 26px;
  font-weight: 800;
  color: #333;
  margin-bottom: 80px;
}

/* 网格容器 */
.hst-platforms-grid {
    max-width: 1440px;
    margin: 50px auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  justify-items: center;
}

/* 单个卡片 */
.hst-platform-card {
  background-color: #f7f7f7;
  width: 248px;
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 图标样式 */
.hst-platform-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  transition: transform 0.3s ease; 
}
.hst-platform-icon:hover{
    transform: scale(1.2);
}
/* 文字样式 */
.hst-platform-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.hst-pro-background-bottom{
    position: absolute;
    top: 42%;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #093CB3;
    z-index: 1;
}
.hst-platforms-title2{
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: #333;
    margin:80px 0 0;
}
.hst-pro-card2{
    background: white;
    width: 250px;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}
.hst-pro-card2:hover {
    transform: translateY(-10px);
}
.hst-pro-content{
    color: #888;
}
/* 主容器 */
.hst-advantages {
  text-align: center;
  padding: 40px 0;
  font-family: Arial, sans-serif;
}

/* 标题样式 */
.hst-advantages-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

/* 网格容器 */
.hst-advantages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1440px;
  margin: 0 auto;
}

/* 卡片样式 */
.hst-advantage-card {
  background-color: #F5F5F5;
  padding: 30px;
  border-radius: 8px;
}

/* 卡片内容 */
.hst-advantage-content {
    gap: 20px;
    display: flex;
    align-items: center;
}

/* 图标样式 */
.hst-advantage-icon {
  font-size: 18px;
  color: #2a62ff;
  margin-right: 10px;
  line-height: 1;
}

/* 标题样式 */
.hst-advantage-heading {
    text-align: left;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 36px;
  margin: 0 0 5px;
}

/* 描述文字 */
.hst-advantage-text {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .service-section-block{
        width: 100%!important;
    }
    .hst-pro-features {
        padding:0 5%;
        height: 700px;
    }
    .hst-pro-cards{
        width: 100%;
        flex-wrap: wrap;
    }
    .hst-pro-card {
        width: 46%;
    }
    .hst-pro-background{
        display: none;
    }
    .hst-platforms-grid {
        padding: 0 5%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .hst-platform-card {
        width: 46%;
    }
    .hst-pro-background-bottom{
        display: none;
    }
    .hst-pro-card2 {
        width: 46%;
    }
    .hst-platforms-title{
        margin-bottom: 20px;
    }
    .hst-advantages-grid{
        padding: 0 5%;
        grid-template-columns: repeat(1, 1fr);
    }
    .service-section-block{
        width: 100%;
    }
    .slider-item {
        min-width: 200px;
    }

    .logo-grid img {
        max-width: 100px;
    }
    .slider-navigation{
            top: -50px;
    right:20px;
    }
    .intro-section{
        padding: 20px;
    }
    .clients-section{
        padding: 20px 0;
    }
}
.buttons .btn{
    padding: 6px 20px;
    border: none;
    background-color: #093CB3;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1rem;
}
.buttons .btn-secondary {
    background-color: #28a74500;
    border: 1px solid;
}
.advantages h2{
      text-align: center;
    font-weight: 800;
    padding: 30px;
    font-size: 26px;
}