.banner {
  width: 100%;
}
.flex {
  display: flex;
  align-items: center;
}
.wrapper {
  background: #F4F7FF;
}
.content {
  margin: 0 auto;
  padding: 0.4rem;
  width: 9.227rem;
  background: #FFFFFF;
  border-radius: 0.507rem;
  transform: translateY(-5.067rem);
  margin-bottom: -4.067rem;
}
.color-primary {
  color: #1677FB;
}
.record-item {
  position: relative;
  display: flex;
  align-items: stretch;
}
.record-item:not(:last-of-type) {
  padding-bottom: 0.613rem;
}
.record-item:not(:last-of-type)::after {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 14px;
  height: calc(100% - 4px);
  width: 1px;
  background: #DDE3F3;
}
.record-item .item-icon {
  margin-right: 0.187rem;
  margin-top: 0.2rem;
  width: 0.4rem;
  height: 0.4rem;
  z-index: 2;
}
.record-item-info {
  flex: 1;
}
.record-item-info .record-item-img {
  margin-bottom: 0.267rem;
  height: 0.8rem;
}
.record-item-info .record-item-item {
  padding: 0.267rem 0.4rem;
  background: #F5F7FC;
  border-radius: 0.267rem;
  font-size: 0.373rem;
  font-weight: 400;
  color: #333333;
  line-height: 0.507rem;
}
.record-item-info p:not(:last-of-type) {
  margin-bottom: 0.4rem;
}