section.main{
    background: linear-gradient(to bottom, #dce0e8 0%, #ffffff 640px, #ffffff 100%);
}

section.main .wrapper{
    padding-top: calc(140 * var(--rpx));
    padding-bottom: calc(300 * var(--rpx));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.polygon-ctn{
    width: 30%;
    height: auto;
    position: relative;
}

.polygon-img{
    width: 100%;
    height: auto;
}

.csr-list{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 220;
}

.csr{
    position: absolute;
    z-index: 230;
    width: 100%;

    display: flex;
    flex-direction: column;
    font-size: calc(20rem / 16);
}

@media (min-width: 751px) {

    .csr:nth-of-type(1){
        right: 100%;
        width: 108%;
        top: 25%;
        padding-right: calc(80 * var(--rpx));
        text-align: right;
    }
    .csr:nth-of-type(2){
        width: 108%;
        left: 100%;
        top: 25%;
        padding-left: calc(80 * var(--rpx));
        text-align: left;
    }
    .csr:nth-of-type(3){
        left: -30%;
        top: 100%;
        width: 160%;
        padding-top: calc(65 * var(--rpx));
        text-align: center;
    }
}

.csr .icon{
    position: absolute;
    width: calc(60 * var(--rpx));
    height: calc(60 * var(--rpx));
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    top: calc(-30 * var(--rpx));
}

.csr:nth-of-type(1) .icon{
    background: linear-gradient(120deg, #84bffa, #ccb7d3);
}
.csr:nth-of-type(2) .icon{
    background: linear-gradient(240deg, #7ecef1, #c7bed0);
}
.csr:nth-of-type(3) .icon{
    background: linear-gradient(0deg, #7ad9ea, #c7c1cd);
}

.csr .icon img{
    display: block;
    flex: 0 0 auto;
    width: calc(35 * var(--rpx));
    height: calc(35 * var(--rpx));
    object-fit: contain;
    filter: url(#white-overlay);
}

@media (min-width: 751px) {

    .csr:nth-of-type(1) .icon{
        right: calc(-30 * var(--rpx));
    }

    .csr:nth-of-type(2) .icon{
        left: calc(-30 * var(--rpx));
    }

    .csr:nth-of-type(3) .icon{
        top: calc(-30 * var(--rpx));
        left: 0;
        right: 0;
        margin: auto;
    }
}


.csr .title{
    line-height: calc(40em / 20);
    margin-bottom: calc(8 * var(--rpx));
    position: relative;
}

.csr .title::before{
    content: "";
    position: absolute;
    width: 2px;
    height: calc(40 * var(--rpx));
    background: linear-gradient(to bottom, rgb(221,187,193) 0%, rgb(72,192,206) 50%, rgb(80,155,223) 100%);
    top: 0;
}

@media (min-width: 751px) {
    .csr:nth-of-type(1) .title::before{
        right: calc(-20 * var(--rpx))
    }

    .csr:nth-of-type(2) .title::before{
        left: calc(-20 * var(--rpx))
    }

    .csr:nth-of-type(3) .title::before{
        left: 0;
        right: 0;
        top: calc(-8 * var(--rpx));
        width: calc(40 * var(--rpx));
        height: 2px;
        margin: auto;
    }


    .csr:nth-of-type(1) .title{
        margin-top: calc(-20em / 20);
    }

    .csr:nth-of-type(2) .title{
        margin-top: calc(-20em / 20);
    }
}

.csr .desc{
    font-size: 1rem;
    line-height: 1.75em;
}

.car-ring{background: radial-gradient(67vw at 67% 50%, rgba(255, 255, 255, 0) 0.00%, rgba(255, 255, 255, 1) 0.00%, rgba(255, 255, 255, 1) 40.90%, rgba(255, 255, 255, 0) 40.90%, rgba(255, 255, 255, 0) 249.85%, rgba(255, 255, 255, 1) 249.85%, rgba(255, 255, 255, 1) 1447.34%, rgba(255, 255, 255, 0) 1447.34%, rgba(255, 255, 255, 0) 3806.19%, rgba(255, 255, 255, 1) 3806.19%, rgba(255, 255, 255, 1) 24193.61%, rgba(255, 255, 255, 0) 24193.61%, rgba(255, 255, 255, 0) 37195.84%, rgba(255, 255, 255, 1) 37195.84%, rgba(255, 255, 255, 1) 102253.57%, rgba(255, 255, 255, 0) 102253.57%, rgba(255, 255, 255, 0) 134392.64%, rgba(255, 255, 255, 1) 134392.64%, rgba(255, 255, 255, 1) 269601.09%, rgba(255, 255, 255, 0) 269601.09%, rgba(255, 255, 255, 0) 100%);}

@media (max-width: 750px) {

    .header-back{
        width: 100vh;
        left: calc((100vw - 100vh) / 2);

        height: 100vw;
        top: calc((100vh - 100vw) / 2);

        margin: auto;
        transform: rotate(90deg);
    }

    .polygon-ctn{
        width: 100%;
    }

    .csr-list{
        position: relative;
        margin-top: calc(30 * var(--rpx));
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .csr-list .csr{
        display: flex;
        width: 100%;
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        right: auto;
        margin-bottom: calc(30 * var(--rpx));
        padding-left: calc(80 * var(--rpx));
    }

    .csr .icon{
        position: absolute;
        left: 0;
        top: 0;
    }

    .csr .title{
        padding-left: .75em;
    }

    .csr .title::before{
        left: 0;
        top: 0;
    }

    section.main .wrapper{
        padding-top: calc(80 * var(--rpx));
        padding-bottom: calc(120 * var(--rpx));
    }
}