.weilan-development-history {
  padding: 2.8125rem 0 2.6875rem;
  position: relative;
  overflow: hidden;
}

.weilan-development-history-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.weilan-development-history-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weilan-development-history-header {
  max-width: 58%;
  position: relative;
  z-index: 10;
}

.weilan-development-history-header-text p {
  color: #666;
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.625;
  margin-top: 1.125rem;
}

.weilan-development-history-header-controls {
  margin-top: 2.75rem;
  display: flex;
  gap: 1.25rem;
  width: fit-content;
}

.weilan-development-history-btn-box {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  cursor: pointer;
}

.weilan-development-history-btn-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
}

.weilan-development-history-btn-box .dh-hover {
  opacity: 0;
  visibility: hidden;
}

.weilan-development-history-btn-box:not(.weilan-dh-btn-disabled):hover .dh-normal {
  opacity: 0;
  visibility: hidden;
}

.weilan-development-history-btn-box:not(.weilan-dh-btn-disabled):hover .dh-hover {
  opacity: 1;
  visibility: visible;
}

.weilan-development-history-btn-box.weilan-dh-btn-disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.weilan-development-history-main {
  position: relative;
  margin-top: -7.5rem;
  margin-bottom: 13rem;
}

.weilan-development-history-wrapper {
  height: auto;
  margin-left: -3.3125rem;
  margin-right: -3.25rem;
  position: relative;
}

.weilan-development-history-wrapper svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weilan-development-history-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.weilan-development-history-item-img {
  width: calc(199.5 / 280 * 100%);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: .5rem;
  transition: all 0.5s ease;
}

/* .weilan-development-history-item.weilan-dh-slot-3 .weilan-development-history-item-img {
  width: calc(250 / 280 * 100%);
} */

.weilan-development-history-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weilan-development-history-item-year {
  color: #0B62C1;
  font-size: var(--font-size-xl);
  font-weight: 500;
  line-height: 1.5;
  margin-top: .75rem;
  transition: color 0.5s ease;
}

.weilan-development-history-item-title {
  color: #333;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.27273;
}

.weilan-development-history-item-content {
  color: #333;
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.5;
  margin-top: .9375rem;
}

.weilan-development-history-item-circle {
  width: 1.125rem;
  height: 1.125rem;
  position: relative;
}

.weilan-development-history-item-circle svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.weilan-development-history-item-circle .circle-normal {
  opacity: 1;
  visibility: visible;
}

.weilan-development-history-item-circle .circle-hover {
  opacity: 0;
  visibility: hidden;
}

.weilan-development-history-item {
  position: absolute;
  width: calc(280 / 1705 * 100%);
  height: auto;
  transition: left 0.45s ease, bottom 0.45s ease, opacity 0.35s ease, visibility 0.35s ease;
}

/* 隐藏不在当前窗口的项 */
.weilan-development-history-item.weilan-dh-slot-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  bottom: calc((297 - 3) / 454 * 100%);
  /* 与 slot5 同高，便于从同一条线滑入 */
}

/* 在“右侧”的隐藏项（如第 6、7 个）：放在视口右侧外，进入时从右滑入 */
.weilan-development-history-item.weilan-dh-slot-hidden.weilan-dh-hidden-right {
  left: 95% !important;
}

/* 在“左侧”的隐藏项（如已滑走的第 1 个）：放在视口左侧外 */
.weilan-development-history-item.weilan-dh-slot-hidden.weilan-dh-hidden-left {
  left: -30% !important;
}

/* 5 个槽位的位置（与原先 index1~5 一致），逐步动画用 transition-delay */
.weilan-development-history-item.weilan-dh-slot-1 {
  bottom: calc((0 - 3) / 454 * 100%);
  left: calc((56 - 3) / 1705 * 100%);
  transition-delay: 0ms;
}

.weilan-development-history-item.weilan-dh-slot-2 {
  bottom: calc((43 - 3) / 454 * 100%);
  left: calc((386 - 3) / 1705 * 100%);
  transition-delay: 70ms;
}

.weilan-development-history-item.weilan-dh-slot-3 {
  bottom: calc((107 - 3) / 454 * 100%);
  left: calc((716 - 3) / 1705 * 100%);
  transition-delay: 140ms;
}

.weilan-development-history-item.weilan-dh-slot-4 {
  bottom: calc((188 - 3) / 454 * 100%);
  left: calc((1046 - 3) / 1705 * 100%);
  transition-delay: 210ms;
}

.weilan-development-history-item.weilan-dh-slot-5 {
  bottom: calc((297 - 3) / 454 * 100%);
  left: calc((1376 - 3) / 1705 * 100%);
  transition-delay: 280ms;
}

.weilan-development-history-item .weilan-development-history-item-header {
  position: absolute;
  left: 0;
  bottom: 1.9375rem;
  width: 100%;
  transition: bottom 0.5s ease;
}

.weilan-development-history-item.weilan-dh-slot-2 .weilan-development-history-item-header,
.weilan-development-history-item.weilan-dh-slot-3 .weilan-development-history-item-header,
.weilan-development-history-item.weilan-dh-slot-4 .weilan-development-history-item-header {
  bottom: 2.5625rem;
}

.weilan-development-history-item.weilan-dh-slot-5 .weilan-development-history-item-header {
  bottom: 3.8125rem;
}

.weilan-development-history-item .weilan-development-history-item-bottom {
  position: absolute;
  left: 0;
  top: 2rem;
  width: 100%;
}

.weilan-development-history-item:hover .weilan-development-history-item-circle .circle-normal {
  opacity: 0;
  visibility: hidden;
}

.weilan-development-history-item:hover .weilan-development-history-item-circle .circle-hover {
  opacity: 1;
  visibility: visible;
}

.weilan-development-history-item:hover .weilan-development-history-item-year {
  color: #00CCB8;
}

.weilan-development-history-item:hover .weilan-development-history-item-img{
  width: calc(250 / 280 * 100%);
}

.weilan-development-history-mobile {
  display: none;
}

@media screen and (max-width: 1024px) {
  
  .weilan-development-history-header {
    position: static;
    max-width: 100%;
  }

  .weilan-development-history-main {
    display: none;
  }

  .weilan-development-history-mobile {
    display: block;
    margin-top: 2.5rem;
  }

  .weilan-development-history-mobile-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .weilan-development-history-mobile-item-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: .5rem;
  }

  .weilan-development-history-mobile-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .weilan-development-history-mobile-item-year {
    color: #0B62C1;
    font-size: var(--font-size-xl);
    font-weight: 500;
    line-height: 1.5;
  }

  .weilan-development-history-mobile-item-title {
    color: #333;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.27273;
  }

  .weilan-development-history-mobile-item-content {
    color: #333;
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
  }
}