.hero--history {
  padding-bottom: 64px;
}

.hero--history .hero__badge {
  margin-bottom: 20px;
}

.hero--history .hero__desc {
  margin-top: 33px;
  font-size: 20px;
  letter-spacing: -0.4px;
}

.history-section__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--gutter-pc) 164px;
}

.history-filter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.history-tabs {
  display: flex;
  gap: 17px;
}

.history-tab {
  width: 126px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.25px;
  color: var(--color-text-sub);
  white-space: nowrap;
}

.history-tab--active {
  background: var(--color-tag-bg);
  font-weight: 700;
  color: var(--color-primary);
}

.year-select {
  position: relative;
  width: 280px;
  flex: none;
}

.year-select__btn {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 16px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  background: var(--color-bg);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-muted);
}

.year-select__btn--picked {
  color: var(--color-text);
}

.year-select__arrow {
  transition: transform .2s ease;
}

.year-select[data-open="true"] .year-select__arrow {
  transform: rotate(180deg);
}

.year-select__panel {
  position: absolute;
  top: 60px;
  left: 0;
  width: 280px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  border: 1px solid var(--color-card-line);
  border-radius: 8px;
  background: var(--color-bg);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.04);
  z-index: 20;
  display: none;
}

.year-select[data-open="true"] .year-select__panel {
  display: block;
}

.year-select__option {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1;
  text-align: left;
  color: var(--color-text-sub);
}

.year-select__option:hover {
  background: #f7f8fd;
}

.year-select__option--active {
  background: #f2f3fc;
  color: var(--color-primary);
}

.history-timeline {
  margin-top: 47px;
}

.history-year {
  position: relative;
  display: flex;
  padding-left: 40px;
  animation: history-year-in .45s ease;
}

@keyframes history-year-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.history-year + .history-year {
  margin-top: 74px;
}

.history-year[hidden] + .history-year {
  margin-top: 0;
}

.history-year:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 17px;
  width: 2px;
  height: calc(100% + 74px);
  background: var(--color-card-line);
}

.history-year--last::after {
  display: none;
}

.history-year__dot {
  position: absolute;
  left: 0;
  top: 9px;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-bg);
  border-radius: 50%;
  background: var(--color-text);
}

.history-year__label {
  flex: none;
  width: 177px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.history-list {
  flex: 1;
  margin-top: 4px;
}

.history-item {
  display: flow-root;
}

.history-item + .history-item {
  margin-top: 18px;
}

.history-item__row {
  display: flex;
  margin: -3px 0;
  line-height: 26px;
}

.history-item__month {
  flex: none;
  width: 47px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--color-primary);
}

.history-item__desc {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text);
}

.history-item__org {
  margin-top: 12px;
  margin-left: 47px;
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-sub);
}

.history-year[hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .hero--history {
    padding-bottom: 40px;
  }

  .history-section__inner {
    padding: 64px var(--gutter-mo);
  }

  .history-timeline {
    margin-top: 40px;
  }

  .history-year + .history-year {
    margin-top: 56px;
  }

  .history-year:not(:last-child)::after {
    height: calc(100% + 56px);
  }

  .history-year__label {
    width: 128px;
  }

  .history-item__row {
    margin: 0;
    line-height: 30px;
  }

  .history-list {
    margin-top: 0;
  }

  .history-item + .history-item {
    margin-top: 14px;
  }

  .history-item__org {
    margin-top: 4px;
    line-height: 24px;
  }
}

@media (max-width: 767px) {
  .history-section__inner {
    padding: 48px var(--gutter-mo);
  }

  .history-filter {
    display: block;
  }

  .history-tabs {
    gap: 6px;
  }

  .history-tab {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
  }

  .year-select {
    width: 100%;
    margin-top: 16px;
  }

  .year-select__panel {
    width: 100%;
  }

  .history-year {
    display: block;
    padding-left: 28px;
  }

  .history-year + .history-year {
    margin-top: 40px;
  }

  .history-year:not(:last-child)::after {
    left: 5px;
    height: calc(100% + 40px);
  }

  .history-year__dot {
    top: 6px;
    width: 12px;
    height: 12px;
  }

  .history-year__label {
    display: block;
    width: auto;
    font-size: 26px;
  }

  .history-list {
    margin-top: 14px;
  }

  .history-item__row {
    margin: 0;
    line-height: 26px;
  }

  .history-item__month {
    width: 36px;
    font-size: 16px;
  }

  .history-item__desc {
    font-size: 15px;
  }

  .history-item__org {
    margin-left: 36px;
    font-size: 14px;
    line-height: 20px;
  }
}