body,
html {
  width: 100%;
  height: 100%;
  background-color: #0e1d3a;
}
.honor {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url(../images/5.2bj.jpg) no-repeat top left;
  background-size: 100%;
}
.honor__img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: auto;
  /* background: url(../images/honor1.png) no-repeat top center; */
  opacity: 0;
  transform: translateX(100%); /* 初始位置：右侧屏幕外 */
  animation: imgSlide 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.honor__left {
  position: absolute;
  top: 140px;
  left: 100px;
  width: 700px;
  height: auto;

  opacity: 0;
  transform: translateX(-100%); /* 初始位置：左侧屏幕外 */
  animation: leftSlide 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: 0.3s; /* 延迟5秒触发 */
}
@keyframes imgSlide {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes leftSlide {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.honor__left__li .titlebox {
  display: flex;
  justify-content: center;
  width: 321px;
  height: 70px;
  margin: 0 auto;
}

.honor_name {
  font-size: 18px;
  font-weight: bold;
  line-height: 35px;
  color: #fff;
  text-align: center;
}

/* 性能优化 */
.honor__img,
.honor__left {
  will-change: transform, opacity;
}