.xili-story1 {
  padding: var(--length-120) 0 var(--length-100) 0;
  background-color: #f2f2f2;
  overflow: hidden;
}

.xili-story1-header {
  display: flex;
  justify-content: space-between;
  gap: 10%;
  align-items: flex-end;
}

.xili-story1-wrapper {
  margin-top: var(--length-80);
  position: relative;
}

.xili-story1-wrapper .swiper {
  overflow: visible;
}


.xili-story1-item-year {
  color: #333;
  font-size: var(--font-48);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xili-story1-item-dot {
  width: var(--font-24);
  aspect-ratio: 1 / 1;
  margin-top: var(--length-40);
  position: relative;
}

.xili-story1-item-dot svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.xili-story1-item-title {
  color: #333;
  font-size: var(--font-32);
  font-weight: 500;
  line-height: 1.2;
  margin-top: var(--length-40);
}

.xili-story1-item-desc {
  color: #333;
  font-size: var(--font-24);
  font-weight: 400;
  line-height: 1.5;
  margin-top: var(--length-32);
}

.xili-story1-wrapper .swiper-slide.last {
  position: relative;
  z-index: -1;
}

/* .xili-story1-wrapper .swiper-slide .xili-story1-item-year,
.xili-story1-wrapper .swiper-slide .xili-story1-item-dot svg,
.xili-story1-wrapper .swiper-slide .xili-story1-item-title,
.xili-story1-wrapper .swiper-slide .xili-story1-item-desc{
  transition: all 0.3s ease;
  visibility: visible;
  opacity: 1;
}

.xili-story1-wrapper .swiper-slide:not(.last).no-visible .xili-story1-item-year,
.xili-story1-wrapper .swiper-slide:not(.last).no-visible .xili-story1-item-dot svg,
.xili-story1-wrapper .swiper-slide:not(.last).no-visible .xili-story1-item-title,
.xili-story1-wrapper .swiper-slide:not(.last).no-visible .xili-story1-item-desc {
  opacity: 0;
  visibility: hidden;
} */

/* .xili-story1-wrapper .swiper-slide {
  transition: all 0.3s ease;
  opacity: 1;
  visibility: visible;
} */

.xili-story1-wrapper .swiper-slide.no-visible {
  opacity: 0;
  visibility: hidden;
}


.xili-story1-wrapper .swiper-slide.last .xili-story1-item-dot::before,
.xili-story1-wrapper .swiper-slide.last .xili-story1-item-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 9999px;
  height: 2px;
}

.xili-story1-wrapper .swiper-slide.last .xili-story1-item-dot::before {
  right: 100%;
  background-color: #33333350;
}

.xili-story1-wrapper .swiper-slide.last .xili-story1-item-dot::after {
  left: 100%;
  background-image: linear-gradient(to right,
      transparent 0%,
      transparent 50%,
      #33333350 50%,
      #33333350 100%);
  background-size: 16px 2px;
  background-repeat: repeat-x;
}