@media screen and (min-width: 768px) {
    .box {
        .f2 {
            padding: 80px 0;

            .f2-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f2-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f2-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
                justify-content: center;
            }

            .f2-d {
                font-family: '微软雅黑';

                .f2-border {
                    width: 250px;
                    height: 2px;
                    background-color: #DDDDDD;
                }


            }
        }

        .f3 {
            padding: 80px 0;

            .f3-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f3-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f3-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
                justify-content: center;
            }

            .f3-d {
                width: 100%;
                height: 520px;
                background: url(./img/service/img3.png) no-repeat;
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 100px;

                .f3-d-img {
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;

                    /* img {
                        width: 200px;
                        height: 200px;
                    } */
                }

                .f3-hover {
                    cursor: pointer;
                    transition: all 0.4s ease;

                    &:hover {
                        transform: scale(105%);
                    }

                    &:hover .inner-circle {
                        width: 15px;
                        height: 15px;


                    }

                    .outer-circle {
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                        border: 3px solid #7545E8;
                        margin: 0 auto;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .inner-circle {
                        width: 0px;
                        height: 0px;
                        border-radius: 50%;
                        background-color: #7545E8;

                    }
                }



            }
        }

        .f3-d-l {
            display: flex;
            flex-direction: column;
            gap: 120px;
        }
    }
}

@media screen and (max-width: 768px) {
    .box {
        .f2 {
            padding: 80px 0;

            .f2-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f2-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f2-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
                justify-content: center;
            }

            .f2-d {
                font-family: '微软雅黑';
                padding: 0 16px;

                .f2-border {
                    width: 250px;
                    height: 2px;
                    background-color: #DDDDDD;
                }
            }
        }

        .f3 {
            padding: 80px 0;

            .f3-a {
                font-family: Arial, Arial;
                font-weight: 900;
                font-size: 31px;
                color: #000000;
                line-height: 31px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .f3-b {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 21px;
                color: #000000;
                line-height: 21px;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: 2px 0 15px 0;
            }

            .f3-c {
                width: 40px;
                height: 4px;
                border-radius: 0px 0px 0px 0px;
                border: 3px solid #000000;
                margin: 0 auto;
                margin-bottom: 60px;
                justify-content: center;
            }

            .f3-d {
                width: 100%;

                background: url(./img/service/img3.png) no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 20px;

                .f3-d-img {
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;

                    img {
                        width: 100%;
                        height: 100%;

                    }
                }

                .f3-hover {
                    cursor: pointer;



                    .outer-circle {
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        border: 3px solid #7545E8;
                        margin: 0 auto;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }

                    .inner-circle {
                        width: 15px;
                        height: 15px;
                        border-radius: 50%;
                        background-color: #7545E8;

                    }
                }

            }
        }

        .f3-d-l {
            display: flex;
            flex-direction: column;
            gap: 50px;
        }
    }
}