yz-enamel-exhibition/packages/pc/src/views/Home/components/Chapter4/index.scss

.chapter4 {
  position: relative;
  height: 1970px;
  overflow: hidden;

  &__line {
    margin: 6px auto 0;
    display: block;
    width: 1741px;
    height: 180px;
  }
  .chapter {
    position: absolute;
    top: 225px;
    left: 50%;
    width: 147px;
    height: 167px;
    transform: translateX(-50%);
  }
  &__title {
    position: absolute;
    top: 538px;
    right: 164px;
    width: 301px;
    height: 324px;
  }
  &__bg1 {
    position: absolute;
    top: 501px;
    left: 0;
    width: 606px;
    height: 1144px;
  }
  &__content {
    position: absolute;
    top: 584px;
    left: 548px;
    width: 808px;
  }
  &__content2 {
    position: absolute;
    top: 921px;
    left: 518px;
    width: 1131px;
    font-size: 20px;
    line-height: 44px;
  }
  &__img1 {
    position: absolute;
    top: 1105px;
    left: 534px;
    width: 458px;
    height: 340px;
  }
  &__content3 {
    position: absolute;
    right: 279px;
    bottom: 458px;
    line-height: 42px;
    text-indent: 0;

    img {
      display: block;
      width: 569px;
      height: 332px;
    }
    p {
      font-size: 21px;
      letter-spacing: 2px;

      &.first {
        position: relative;
        padding-left: 50px;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 16px;
          width: 26px;
          height: 22px;
          background: url("./images/icon-min.png") no-repeat center / contain;
          transform: translateY(-50%);
        }
      }
      &.last {
        padding-left: 190px;
      }
    }
    span {
      font-size: 34px;
    }
  }
  &-list {
    position: absolute;
    right: 320px;
    bottom: 104px;
    display: flex;
    align-items: center;
    gap: 65px;

    > div {
      position: relative;
      width: 208px;
      height: 322px;
      background: url("./images/4-min.png") no-repeat center / contain;

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
      }
      &:nth-child(1) img {
        width: 220px;
        height: 220px;
      }
      &:nth-child(2) img {
        width: 279px;
        height: 116px;
      }
      &:nth-child(3) img {
        width: 223px;
        height: 191px;
      }
      &:nth-child(4) img {
        width: 201px;
        height: 175px;
      }
    }
  }
  .more-btn {
    position: absolute;
    right: 320px;
    bottom: 21px;
  }
}