h2 { color: #2e6dd3; margin-bottom: 10px; }
    section { padding: 60px 20px; }
    .container { max-width: 1200px; margin: 0 auto; }
 

    .fade-in { opacity: 1; transform: translateY(30px); transition: opacity 1s ease-out, transform 1s ease-out; }
    .fade-in.show { opacity: 1; transform: translateY(0); }

.about-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;

  text-align: left;
}

.about-section::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #ccc; /* Divider color */
  transform: translateX(-50%);
  height: 100%;
}

.about-1-left,
.about-1-right {
  width: 48%; /* Adjust based on spacing and divider thickness */
  padding: 0 20px;
}
.about-1-left-title
{
  font-size: 72px;
  font-weight: bold;
  margin-bottom: 90px;
}
.about-1-left-title .title-normal
{
  font-weight: normal;
}
.about-1-left-title2
{
  color: #2e6dd3;
}
.blue-content
{
  color: #2e6dd3;
}
.about-1-left-content
{
  font-size: 12px;
  padding-top: 15px;
}

.about-1-right h2{
  padding-bottom: 20px;
  font-weight: normal;
  color: #000;
}
.about-1-right-title{
  font-size: 16px;
  color: #2e6dd3;
  padding-bottom: 20px;
}
.about-1-right p {
font-size: 12px;
  margin-bottom: 20px; /* Adjust vertical spacing between paragraphs */
}
.snum
{
  font-size: 52px;
  font-weight: bold;
}
.about3
{
  text-align: center;
}
.about3-title
{
  font-size: 16px;
  color: #2e6dd3;
}
.about3 img {
  display: block;
  margin: 0 auto;
  padding-bottom: 30px;
}
.about3-context
{
padding-top: 10px;
font-size: 18px;
}
.about3
{
  background-image: url("{stl.siteurl}/images/bg2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top: 80px;
  padding-bottom: 80px;

}
.about4-title{
  font-size: 12px;
  padding-bottom: 10px;
}
.about4-context
{
  font-size: 18px;
  padding-left: 24px;
  padding-top: 40px;
}
.about4-bg
{
  position: absolute;
  left: 0;
  top: 10px;
  width: 90px;

}
.about4
{
  position: relative;
  padding-top: 40px;
}
.text-left {
  text-align: left;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px;
}
.image-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;

}

.image-wrapper {
  position: relative;
  width: calc(25% - 15px);
  overflow: hidden;
  border: 1px solid rgb(200, 200, 200, 0.6);
  transition: transform 0.3s ease, border-color 0.3s ease;
  text-align: center;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes caption to the bottom */
  padding-bottom: 10px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* Floating caption */
.image-caption {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  font-weight: bold;
  text-align: left;
  font-size: 12px;
  color: #555;
}

.image-caption-en {
  font-size: 12px;
  color: #555;
  text-align: center;
  margin-top: auto;
  position: relative;
  z-index: 1;
}



.image-caption-en span {
  position: relative;
  z-index: 2;
  background-color: white;
  padding: 0 10px;

  text-transform: uppercase;
  color: #2e6dd3;
  font-weight: bold;

}

/* Hover effect */
.image-wrapper:hover {
  transform: scale(1.05);
  border-color: #2e6dd3;
}
/* Responsive tweak for small screens */
@media (max-width: 768px) {
  .image-row img {
    width: calc(50% - 10px); /* 2 per row on tablet/mobile */
  }
}

@media (max-width: 480px) {
  .image-row img {
    width: 100%; /* 1 per row on very small screens */
  }
}
.culture-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
 
}

.culture-left {
  width: 45%;
  text-align: left;
  color: #fff;
  font-size: 40px;
  font-weight:normal;
 
}

.culture-title2
{
  font-weight: bold;
  font-size: 44px;
}

.culture-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.culture-item {
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
  cursor: default;
  color: #333;
}

.culture-item:hover {
  transform: scale(1.05);
  color: rgb(255, 255, 255, 0.9);
  /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
}

.culture-item:hover .culture-item-title,
.culture-item:hover .culture-item-content 
  {
    color: rgb(255, 255, 255, 1);
    /* transform: scale(1.05); */
  }
  .culture-item:hover .culture-item-content{
    transform: scale(1.25);
  }


.culture-item-content {
  color: rgb(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1.5;
}
.culture-item-title
{
  color: rgb(255, 255, 255, 0.6);
  font-size: 14px;
  margin-bottom: 10px;
}

    .stats { display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center; }
    .stats div { flex: 1 1 25%; padding: 10px; }

    .timeline, .certifications, .clients { text-align: center; }

    .certificates, .clients-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }
    

    .certificates img, .clients-logos img {
   
      height: auto;
    }

 
    .timeline
    {
      position: relative;
      min-height: 600px;
    }
 .timeline-text {
    text-align: left;
    position: absolute;
    left: 20px;
    top: 30px;
}
    .timeline-text-left
    {
      padding-top: 50px;
      padding-left: 24px;
      margin-bottom: 10px;
      font-size: 18px;
    } 
    .timeline-text-left p{
      margin-bottom: 6px;
    }
    .timeline-year
    {
      font-size: 160px;
      color: #EDF2F9;
      position: absolute;
      top: 1%;
      right: 15%;
      opacity: 0.7;
      z-index: 1;
      pointer-events: none; /* ⭐ 关键：不阻挡点击事件 */
    }
    .about-timeline-img
    {
      z-index: 10;
      position: absolute;
      top:20%;
      left: 0;
      width: 100%;
    
    }
    .timeline-list {
list-style: none;
/* 移除默认的列表符号 */
padding: 0;
margin: 0;
padding-bottom: 100px;
z-index: 2;
text-align: left;

}

.timeline-list li {
display: flex;
/* 使用 flex 布局 */
align-items: center;
/* 垂直居中对齐 */

font-size: 12px;
/* 列表项之间的间距 */
padding-bottom: 10px;
}

.timeline-icon {
width: 10px;
/* 图标宽度 */
height: 10px;
/* 图标高度 */
margin-right: 10px;
/* 图标与文本之间的间距 */
}
.timeline-card
{
  background-color: #ffff;
  width: 410px;
  height: 180px;
  padding: 24px;
  position: absolute;
  bottom: 10%;
  right: 9%;
}
.timeline-card-title
{
  color: #285BA9;
  font-size: 14px;
  margin-bottom: 15px;
  text-align: left;
  font-weight: bold;
}
.timeline 
{
  background-image: url({stl.siteurl}/images/bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

    @media (max-width: 768px) {
      .stats div { flex: 1 1 50%; }
      .certificates img, .clients-logos img { max-width: 80px; }
    }

    @media (max-width: 480px) {
      .stats div { flex: 1 1 100%; }
    }

      .about1 {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .timeline svg {
    width: 100%;
    height: 100%;

    display: block;
    z-index: 99;
}

.point {
    fill: #285BA9;
    cursor: pointer;
    transition: r 0.2s ease;
}

.point:hover {
    r: 8;
}

.year-img {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: 10;
    display: none;
    transition: display 0.5s ease;
}

.timeline {
    width: 100%;
    height: 400px;

    background-size: cover;
    /* 或 contain，根据需要调整 */
    background-position: center;
    position: relative;
}

  .certifications-container {
            display: flex;
            height: 400px;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 左侧图片区域 - 横向滚动 */
        .certifications-left-panel {
            flex: 3;
            overflow-x: auto;
            white-space: nowrap;
            padding: 20px 20px;
            scroll-behavior: smooth;
        }

        .certifications-left-panel::-webkit-scrollbar {
            display: none;
            /* 隐藏横向滚动条 */
        }

        .certifications-slider-container {
            display: inline-flex;
            gap: 60px;
            padding-left: 20px;
                align-items: flex-end;
           height: 100%;
        }

        .certifications-slide {
            flex-shrink: 0;
             padding: 18px;
    border-radius: 12px;
            transition: transform 0.3s ease;
            display: flex;
           align-items: flex-end;
            justify-content: center;
           background-color: #f5f5f5;
         border: 1px solid #ccc;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                position: relative;
        }




        .certifications-slide::before,
        .certifications-slide::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #eee, #aaa);
            box-shadow:
                inset 2px 2px 4px rgba(255 255 255 / 0.8),
                inset -2px -2px 4px rgba(0 0 0 / 0.3);
            z-index: 10;
        }

        .certifications-slide::before {
            top: 6px;
            left: 6px;
        }

        .certifications-slide::after {
            top: 6px;
            right: 6px;
        }

        .certifications-slide .about-cert-corner-bl,
        .certifications-slide .about-cert-corner-br {
            position: absolute;
            bottom: 6px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #eee, #aaa);
            box-shadow:
                inset 2px 2px 4px rgba(255 255 255 / 0.8),
                inset -2px -2px 4px rgba(0 0 0 / 0.3);
            z-index: 10;
        }

        .about-cert-corner-bl {
            left: 6px;
        }

        .about-cert-corner-br {
            right: 6px;
        }


        .certifications-slide img {
              max-width: 320px;
            max-height: 320px;
            object-fit: contain;
              border-radius: 8px;
        }


        .certifications-slide.certifications-active {
            transform: scale(1.1);
            /* 放大当前图 */
            z-index: 2;
        }

        /* 右侧Tab区域 */
        .certifications-right-panel {
            flex: 2;
            display: flex;
            flex-direction: column;
         
            position: relative;
        }

        .certifications-tabs-header {
            display: flex;

            padding: 0 20px;
        }

        .certifications-tab-title {
            padding: 15px 20px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .certifications-tab-title.certifications-active {
            color: #285BA9;
            font-weight: bold;
        }

        .certifications-tab-title.certifications-active:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #285BA9;
        }

        .certifications-tabs-content {
            flex: 1;
            overflow-y: scroll;
            padding: 60px 20px;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE10+ */
            -webkit-mask-image: linear-gradient(to bottom,
                    transparent 0%,
                    black 50%,
                    transparent 100%);
            mask-image: linear-gradient(to bottom,
                    transparent 0%,
                    black 50%,
                    transparent 100%);
                    text-align: left;
        }

        .certifications-tabs-content::-webkit-scrollbar {
            display: none;
            /* Chrome */
        }

        .certifications-tab-section {
            margin-bottom: 30px;
        }

        .certifications-tab-item {
            padding: 15px;
            padding-bottom: 4px;
            padding-top: 4px;
            cursor: pointer;
            transition: all 0.3s;
            background: #fff;
        }

        .certifications-tab-item:hover {
            color: #285BA9;
        }

        .certifications-tab-item.certifications-active {

            color: #285BA9;
            font-weight: bold;
        }

        .certifications-tab-item-title {
            font-size: 12px;
            padding-left: 15px;
            padding-bottom: 15px;
        }

        /* 控制按钮 */
        .certifications-control-buttons {
            position: absolute;
            right: 20px;
            bottom: 20px;
            display: flex;
            gap: 10px;
            z-index: 999;
        }

        .certifications-control-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #285BA9;
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
        }

        .certifications-control-btn:hover {
            background: #2980b9;
            transform: scale(1.05);
        }

        .certifications-title {
            padding: 10px;
        }