.box_history .banner dl {
  left: 50%;
  bottom: 3rem;
  margin-left: 0.55rem;
  text-align: right;
}

.history_intro {
  padding: 0.8rem 0;
}

.history_intro p {
  font-size: 0.23rem;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
}

.history_event {
  position: relative;
  height: 6.4rem;
  background-image: url(../img/bg_2.jpg);
  background-size: 100% 100%;
}

/* .he_left {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: 0;
  transform: translateY(-50%);
  margin-left: -3.4rem;
  width: 2rem;
  height: 6.2rem;
  overflow-y: auto;
} */

.he_left {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  margin-left: -3.4rem;
  width: 2rem;
  height: 6.2rem;
  overflow: hidden;
  /* overflow-y: auto; */
}

.he_timeline {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

.he_timeline::before {
  content: "";
  position: absolute;
  left: 1.03rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background-image: url(../img/line_1.png);
  background-size: 100% 100%;
}

.he_timeline {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.he_timeline dl {
  position: relative;
  margin: 0.24rem 0;
  cursor: pointer;
}

.he_timeline dt {
  font-size: 0.21rem;
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  transition: 0.4s;
  transform: scale(0.9);
}

.he_timeline dd {
  position: absolute;
  right: -0.56rem;
  top: 50%;
  width: 0.12rem;
  height: 0.01rem;
  background-color: #5a5a5a;
}

.he_timeline dd i {
  position: absolute;
  right: 0;
  width: 0.06rem;
  height: 0.005rem;
  background-color: #5a5a5a;
}

.he_timeline dd i:nth-child(1) {
  top: 0.17rem;
}

.he_timeline dd i:nth-child(2) {
  top: 0.29rem;
}

.he_timeline dd i:nth-child(3) {
  top: 0.41rem;
}

.he_timeline dd i:nth-child(4) {
  top: 0.53rem;
}

.he_right {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 8.95rem;
  /* background-image: url(../img/details_5.jpg); */
}

.he_timeline dl.on dt {
  transform: scale(1);
  transform-origin: center;
  color: #fff;
  transition: 0.4s;
}

.he_timeline dl.on dd {
  background-color: #fff;
  transition: 0.4s;
}

.he_center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* margin-left: -0.25rem;
  margin-top: -0.25rem; */
  max-width: 2.95rem;
  padding: 0.65rem 0.32rem;
  background-color: #000;
  transition: 0.4s;
  z-index: 1;
}

.he_center::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  width: 0.45rem;
  height: 0.45rem;
  background-image: url(../img/p_i_5.png);
  background-size: contain;
}

.he_center p {
  font-size: 0.18rem;
  color: #fff;
  line-height: 0.38rem;
  padding-top: 0.29rem;
}

.he_center p:first-child {
  padding-top: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.he_center.on {
  animation: fadeIn 1s linear 1.5s;
  animation-fill-mode: backwards;
}

.he_center.on p {
  animation: fadeInRight 1s linear 1s;
  animation-fill-mode: backwards;
}

.he_right {
  font-size: 0;
}

.he_right img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6.4rem;
  opacity: 0;
}

.he_right.on img {
  animation: fadeInRight 1s linear 0.5s;
  animation-fill-mode: backwards;
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .history_intro {
    padding: 0.34rem 0.44rem;
  }

  .history_intro p {
    font-size: 0.1458rem;
    line-height: 0.3rem;
  }

  .history_event {
    height: auto;
    background-image: none;
    display: block;
    padding-bottom: 0.9rem;
  }

  /* .he_left {
    position: static;
    left: 0;
    margin-left: 0;
  } */

  .he_left {
    position: static;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateY(0);
    margin-left: 0;
    width: auto;
    height: auto;
    overflow-y: auto;
  }

  .he_timeline {
    position: static;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .he_timeline::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .he_timeline::before {
    display: none;
  }

  .he_timeline dl {
    margin: 0.18rem 0;
    display: inline-block;
  }

  .he_timeline dt {
    font-size: 0.1458rem;
    padding-left: 0.264rem;
    text-align: center;
  }

  .he_timeline dd {
    display: none;
  }

  .he_right {
    position: static;
    width: auto;
    height: 2.7rem;
    /* background-image: url(../img/details_5.jpg); */
  }

  .he_right img {
    position: static;
    height: auto;
  }

  .he_center {
    left: 0;
    right: 0;
    top: 2.88rem;
    bottom: auto;
    transform: translate(0, 0);
    max-width: none;
    margin: 0 0.18rem;
    background-color: #2d2d2d;
    padding: 0.125rem 0.208rem;
  }

  .he_center::after {
    bottom: -0.3125rem;
    width: 0.3125rem;
    height: 0.3125rem;
    background-image: url(../img/p_i_6.png);
  }

  .he_center p {
    font-size: 0.118rem;
    line-height: 0.26rem;
    padding-top: 0.125rem;
  }
}

.he_timeline_swiper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}