.how-to-enter-section {
    width: 100vw;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    position: absolute;
    z-index: -1;
}

.how-to-enter-section-bg {
    position: absolute;
    width: 100%;
    height: calc(100% + 300px);
    top: 0;
    left: 0;
    /* border: 1px solid blue; */
}

.how-to-enter-section[data-type="0"] .how-to-enter-section-bg {
    background: #fff;
}

.how-to-enter-section[data-type="0"] .how-to-enter-section-bg .img-cont {
    width: 100%;
    height: calc(100% + 150px);
    position: absolute;
    top: -150px;
    /* border: 1px solid red; */
    left: 0;
    z-index: 2;
    overflow: hidden;
}

.how-to-enter-section[data-type="0"] .how-to-enter-section-bg .img-cont img {
    max-width: unset !important;
    opacity: 0.15;
    object-fit: cover;
}

.how-to-enter-section[data-type="1"] .how-to-enter-section-bg {
    background: #f1efe7;
}

.how-to-enter-section[data-num="1"] {
    z-index: 2;
    padding-top: 160px;
    margin-top: -110px;
}

.how-to-enter-section[data-num="1"] .how-to-enter-section-bg {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
}
.how-to-enter-section[data-num="2"] {
    z-index: 0;
    margin-top: -10px;
}

.how-to-enter-section[data-num="2"] .how-to-enter-section-bg {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 93%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 93%);
    top: -100px;
    bottom: -100px;
}

.how-to-enter-section[data-num="3"] {
    z-index: 1;
    padding-top: 160px;
    margin-top: -140px;
}

.how-to-enter-section[data-num="3"] .how-to-enter-section-bg {
    -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

.how-to-enter-section[data-num="4"] {
    z-index: 2;
    margin-top: -100px;
    padding: 0px 0;
}

.how-to-enter-section[data-num="4"] .how-to-enter-section-bg {
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}

.how-to-enter-section[data-num="5"] {
    z-index: 3;
    margin-top: -100px;
    padding: 250px 0 230px;
}

.how-to-enter-section[data-num="5"] .how-to-enter-section-bg {
    -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
}

.how-to-enter-section[data-num="6"] {
    z-index: 3;
    margin-top: -70px;
    padding: 210px 0 234px;
}

.how-to-enter-section[data-num="6"] .how-to-enter-section-bg {
    -webkit-clip-path: polygon(0 0, 100% 21%, 100% 92%, 0% 100%);
    clip-path: polygon(0 0, 100% 21%, 100% 92%, 0% 100%);
}

.how-to-enter-section[data-num="7"] {
    z-index: 3;
    margin-top: -80px;
    padding: 0;
}

.how-to-enter-section[data-num="7"] .how-to-enter-section-bg {
    -webkit-clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 76%);
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 76%);
}

@media (max-width: 880px) {
    .how-to-enter-section[data-num="5"] .how-to-enter-section-bg {
        -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    }
}