.lists1 {
    --pd: 35px;
    --mt: 30px;
    margin-top: calc((50 / 16) * 1%)
}

.lists1 .item {
    border-radius: 20px;
    border: 1px solid var(--color-main);
    padding: 56px 45px 50px;
    transition: all .3s ease
}

.lists1 .item:hover {
    background: var(--color-main)
}

.lists1 .item:hover .t1,
.lists1 .item:hover .t2 {
    color: #fff
}

.lists1 .item .t1 {
    font-family: Poppins;
    font-size: 22px
}

.lists1 .item .t2 {
    font-size: 18px;
    color: #666666;
    line-height: 30px;
    margin-top: 10px
}

.lists2 {
    margin: calc((140 / 16) * 1%) 0
}

.lists2 .items {
    --l-w: calc((721 / 16) * 1%);
    --pd: calc((70 / 16) * 1%);
    align-items: center;
}

.lists2 .items:nth-child(even) {
    flex-direction: row-reverse
}

.lists2 .items:not(:first-child) {
    margin-top: calc((120 / 16) * 1%)
}

.lists2 .img {
    padding-bottom: calc((751 / 16) * 1%);
    border-radius: 15px
}

.lists2 .num {
    font-family: Poppins;
    font-size: 186px;
    color: #e8f6fd;
    line-height: 1
}

.lists2 .t1 {
    font-family: Poppins;
    font-size: 60px;
    color: var(--color-main);
    line-height: 1.3
}

.lists2 .t2,
.lists2 .t2 p {
    font-size: 18px;
    color: #666666;
    line-height: 30px
}

.lists2 .t2 {
    margin-top: 30px
}

@media screen and (max-width:1660px) {
    .lists2 .num {
        font-size: 130px
    }

    .lists2 .t1 {
        font-size: 40px
    }

    .lists2 .t2,
    .lists2 .t2 p {
        font-size: 16px
    }
}

@media screen and (max-width:1366px) {
    .lists2 .num {
        font-size: 90px
    }

    .lists2 .t1 {
        font-size: 36px
    }
}

@media screen and (max-width:950px) {
    .lists2 .items {
        margin-top: 50px !important
    }

    .lists2 .img {
        position: relative;
        padding-bottom: 100%
    }

    .lists2 .num {
        font-size: 54px
    }

    .lists2 .t1 {
        font-size: 22px
    }
}