.service1 {
    padding: 141px 0 117px 0
}

.service1 .wrap {
    width: 1480px;
    margin: auto
}

.service1 .wrap .flex {
    display: flex;
    justify-content: space-between
}

.service1 .wrap .flex .item {
    width: 460px;
    height: 421px;
    background: #F6F6F6;
    border-radius: 20px;
    padding: 47px 0 57px 0
}
.service1 .wrap .flex .item:hover .circle {
    background: #00388B;
}
.service1 .wrap .flex .item:hover .circle img{
    filter: invert(1);
}
.service1 .wrap .flex .item .circle {
    width: 134px;
    height: 134px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
    transition: .6s ease;
}

.service1 .wrap .flex .item .circle img {
    transition: 1s
}

.service1 .wrap .flex .item .text {
    text-align: center
}

.service1 .wrap .flex .item .text h1 {
    font-weight: 500;
    font-size: 32px;
    color: #1A1A1A;
    margin: 0 0 13px
}

.service1 .wrap .flex .item .text p {
    font-weight: 400;
    font-size: 16px;
    color: #1A1A1A
}

.service1 .wrap .flex .item .more {
    margin: 64px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.service1 .wrap .flex .item .more p {
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    margin: 0 5px 0 0
}

.service1 .wrap .flex .item .more .iconfont {
    color: #333333;
    font-size: 16px
}

.service1 .wrap .big_flex {
    margin: 48px 0 0 0;
    position: relative;
    z-index: 2;
    height: 430px;
    display: flex;
    align-items: center;
    padding: 0 170px
}

.service1 .wrap .big_flex h1 {
    font-weight: 500;
    font-size: 32px;
    color: #1A1A1A;
    margin: 0 0 26px
}

.service1 .wrap .big_flex .text {
    font-weight: 400;
    font-size: 16px;
    color: #666666
}

.service1 .wrap .big_flex .more {
    display: flex;
    align-items: center;
    margin: 63px 0 0 0
}

.service1 .wrap .big_flex .more p {
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    margin: 0 5px 0 0
}

.service1 .wrap .big_flex .more .iconfont {
    font-size: 16px;
    color: #333
}

@media screen and (max-width: 1919px) {
    .service1 {
        padding: 7.34375vw 0 6.09375vw 0
    }

    .service1 .wrap {
        width: 77.0833333333vw;
        margin: auto
    }

    .service1 .wrap .flex {
        display: flex;
        justify-content: space-between
    }

    .service1 .wrap .flex .item {
        width: 23.9583333333vw;
        height: 21.9270833333vw;
        background: #F6F6F6;
        border-radius: 1.0416666667vw;
        padding: 2.4479166667vw 0 2.96875vw 0
    }

    .service1 .wrap .flex .item:hover .circle img {
        transform: rotateY(180deg)
    }

    .service1 .wrap .flex .item .circle {
        width: 6.9791666667vw;
        height: 6.9791666667vw;
        background: #FFFFFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.3541666667vw
    }

    .service1 .wrap .flex .item .circle img {
        transition: 1s
    }

    .service1 .wrap .flex .item .text {
        text-align: center
    }

    .service1 .wrap .flex .item .text h1 {
        font-weight: 500;
        font-size: 1.6666666667vw;
        color: #1A1A1A;
        margin: 0 0 .6770833333vw
    }

    .service1 .wrap .flex .item .text p {
        font-weight: 400;
        font-size: .8333333333vw;
        color: #1A1A1A
    }

    .service1 .wrap .flex .item .more {
        margin: 3.3333333333vw 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .service1 .wrap .flex .item .more p {
        font-weight: 500;
        font-size: .78125vw;
        color: #333333;
        margin: 0 .2604166667vw 0 0
    }

    .service1 .wrap .flex .item .more .iconfont {
        color: #333333;
        font-size: .8333333333vw
    }

    .service1 .wrap .big_flex {
        margin: 2.5vw 0 0 0;
        position: relative;
        z-index: 2;
        height: 22.3958333333vw;
        display: flex;
        align-items: center;
        padding: 0 8.8541666667vw
    }

    .service1 .wrap .big_flex h1 {
        font-weight: 500;
        font-size: 1.6666666667vw;
        color: #1A1A1A;
        margin: 0 0 1.3541666667vw
    }

    .service1 .wrap .big_flex .text {
        font-weight: 400;
        font-size: .8333333333vw;
        color: #666666
    }

    .service1 .wrap .big_flex .more {
        display: flex;
        align-items: center;
        margin: 3.28125vw 0 0 0
    }

    .service1 .wrap .big_flex .more p {
        font-weight: 500;
        font-size: .78125vw;
        color: #333333;
        margin: 0 .2604166667vw 0 0
    }

    .service1 .wrap .big_flex .more .iconfont {
        font-size: .8333333333vw;
        color: #333
    }
}

@media screen and (max-width: 1024px) {
    .service1{
        padding: 20px 0;
    }
    .service1 .wrap{
        width: 90%;
    }
    .service1 .wrap .flex{
        flex-direction: column;
        gap: 20px 0;
    }

    .service1 .wrap .flex .item {
        width: 100%;
        height: auto;
        border-radius: 15px;
        padding: 25px 0;
    }
    .service1 .wrap .flex .item .circle {
        width: 60px;
        height: 60px;
        margin: 0 auto 15px;
    }
    .service1 .wrap .flex .item .circle img{
        width: 50%;
    }
    .service1 .wrap .flex .item .text h1 {
        font-size: 20px;
        margin: 0 0 15px;
    }
    .service1 .wrap .flex .item .text p{
        font-size: 15px;
    }
    .service1 .wrap .flex .item .more{
        margin: 25px 0 0 0;
    }
    .service1 .wrap .flex .item .more p{
        font-size: 12px;
        margin: 0 5px 0 0;
    }
    .service1 .wrap .flex .item .more .iconfont{
        font-size: 14px;
    }
    .service1 .wrap .big_flex {
        margin: 28px 0 0 0;
        height: 200px;
        padding: 0 5%;
    }


    .service1 .wrap .big_flex h1{
        font-size: 20px;
        margin: 0 0 10px;
    }
    .service1 .wrap .big_flex .text{
        font-size: 13px;
    }
    .service1 .wrap .big_flex .more{

        margin: 20px 0 0 0;
    }
    .service1 .wrap .big_flex .more p{
        font-size: 12px;
    }
    .service1 .wrap .big_flex .more .iconfont{
        font-size: 13px;
        margin: 0 0 0 5px;
    }
    .service1 .wrap .big_flex .wrap{
        width: 100%;
    }
}