.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; } }