.public_banner .position {
    font-weight: 400;
}

.quality .wrap {
    max-width: 90%;
    margin: 5.6770833333vw auto 6.8229166667vw;
}

.quality .wrap .title {
    font-size: 1.875vw;
    font-weight: 500;
    color: #222222;
    text-align: center;
    margin: 0 0 5.46875vw;
}

.quality .wrap .content {
    display: flex;
    justify-content: center;
}

.quality .wrap .content .list {
    text-align: center;
    cursor: pointer;
}

.quality .wrap .content .list:not(:last-child) {
    margin: 0 7.7083333333vw 0 0;
}

.quality .wrap .content .list .iconfont {
    font-size: 2.6041666667vw;
    color: #009944;
    margin: 0 0 1.8229166667vw;
    transition: 1s;
}

.quality .wrap .content .list .iconfont img{
    width: 3.125vw;
}

.quality .wrap .content .list h5 {
    font-size: 0.9375vw;
    font-weight: 500;
    color: #222222;
    margin: 0 0 1.25vw;
}

.quality .wrap .content .list p {
    font-size: 0.7291666667vw;
    font-weight: 400;
    color: #666666;
    line-height: 1.0416666667vw;
}

.quality .wrap .content .list:nth-child(5) .iconfont {
    transform: scale(1.1);
}

.quality .wrap .content .list:hover .iconfont {
    transform: rotateY(180deg);
}

.quality2 {
    background: #F7F8FA;
}

.quality2 .wrap {
    margin: 7.2395833333vw auto 11.1979166667vw;
    max-width: 90%;
}

.quality2 .wrap .title {
    text-align: center;
    margin: 0 0 5.7291666667vw;
}

.quality2 .wrap .title h1 {
    font-size: 1.875vw;
    font-weight: 500;
    color: #222222;
    line-height: 1.7708333333vw;
    margin: 0 0 1.40625vw;
}

.quality2 .wrap .title p {
    font-size: 1.0416666667vw;
    font-weight: 400;
    color: #222222;
}

.quality2 .wrap .content {
    width: 41.0416666667vw;
    height: 41.0416666667vw;
    border-radius: 50%;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quality2 .wrap .content:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-image: radial-gradient(circle, transparent, transparent, rgba(0, 153, 68, 0.25));
    transform: scale(0);
    transition: 1s;
    transition-delay: 0.8s;
}

.quality2 .wrap .content .position {
    opacity: 0;
    transition: 1s;
    transition-delay: 1.3s;
    z-index: 55;
}

.quality2 .wrap .content .position_1 .point_1 {
    left: -2.0833333333vw;
    top: 50%;
    transform: translateY(-50%);
}

.quality2 .wrap .content .position_1 .point_2 {
    top: -1.5625vw;
    left: 50%;
    transform: translateX(-50%);
}

.quality2 .wrap .content .position_1 .point_3 {
    right: -1.5625vw;
    top: 50%;
    transform: translateY(-50%);
}

.quality2 .wrap .content .position_1 .point_4 {
    bottom: -3.125vw;
    left: 50%;
    transform: translateX(-50%);
}

.quality2 .wrap .content .position_2 .point .color {
    background: #30BF70 !important;
}

.quality2 .wrap .content .position_2 .point_1 {
    bottom: 3.4895833333vw;
    left: 0;
}

.quality2 .wrap .content .position_2 .point_2 {
    top: -1.5625vw;
    left: 50%;
    transform: translateX(-50%);
}

.quality2 .wrap .content .position_2 .point_3 {
    bottom: 3.4895833333vw;
    right: 0;
}

.quality2 .wrap .content .circle {
    width: 25.5208333333vw;
    height: 25.5208333333vw;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quality2 .wrap .content .circle:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-image: radial-gradient(circle, transparent, transparent, rgba(0, 153, 68, 0.25));
    transform: scale(0);
    transition: 1s;
    transition-delay: 0.6s;
}

.quality2 .wrap .content .circle .circle2 {
    width: 12.5vw;
    height: 12.5vw;
    border-radius: 50%;
    background: #009944;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 23;
    transform: scale(0);
    transition: 1s;
    transition-delay: 0.4s;
}

.quality2 .wrap .content .circle .circle2 .iconfont {
    font-size: 4.1666666667vw;
    color: #fff;
    margin: 0 auto 0.7291666667vw;
}

.quality2 .wrap .content .circle .circle2 p {
    font-size: 0.9375vw;
    font-weight: 500;
    color: #FFFFFF;
}

.quality2 .wrap .content .position {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.quality2 .wrap .content .position .point {
    width: fit-content;
    text-align: center;
    position: absolute;
    cursor: pointer;
}

.quality2 .wrap .content .position .point .color {
    width: 3.4375vw;
    height: 3.4375vw;
    background: #54D58E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.quality2 .wrap .content .position .point .color .iconfont {
    font-size: 1.5625vw;
    color: #fff;
    transition: 1s;
}

.quality2 .wrap .content .position .point p {
    font-size: 0.8333333333vw;
    font-weight: 500;
    color: #30BF70;
    margin: 0.46875vw 0 0 0;
}

.quality2 .wrap .content .position .point:hover .iconfont {
    transform: rotateY(180deg);
}

.quality2 .wrap .content.active .position {
    opacity: 1;
}

.quality2 .wrap .content.active:after {
    transform: scale(1);
}

.quality2 .wrap .content.active .circle:after {
    transform: scale(1);
}

.quality2 .wrap .content.active .circle .circle2 {
    transform: scale(1);
}

.quality3 {
    position: relative;
    z-index: 1;
}

.quality3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25vw;
    background: #F7F8FA;
    z-index: -1;
}

.quality3 .wrap {
    width: 72.9166666667vw;
    margin: 8.4375vw auto 4.53125vw;
}

.quality3 .wrap .title {
    margin: 0 0 5.15625vw;
    text-align: center;
}

.quality3 .wrap .title h1 {
    font-size: 2.5vw;
    font-weight: bold;
    color: #009944;
    line-height: 1.875vw;
    margin: 0 0 1.4583333333vw;
}

.quality3 .wrap .title p {
    font-size: 1.25vw;
    font-weight: 500;
    color: #222222;
    opacity: 0.8;
}

.quality3 .wrap .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5625vw 1.3020833333vw;
}

.quality3 .wrap .content .item {
    width: 100%;
    height: 10.4166666667vw;
    cursor: pointer;
}

.quality3 .wrap .content .item .joke {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    padding: 3.125vw 4.1666666667vw 3.125vw 4.1666666667vw;
    box-shadow: 0px 15px 40px 10px rgba(7, 10, 21, 0.05);
    transition: 0.7s;
    display: flex;
    align-items: center;
}

.quality3 .wrap .content .item .joke .circle {
    position: relative;
    z-index: 1;
    margin: 0 3.90625vw 0 0;
    width: 2.6041666667vw;
    height: 2.6041666667vw;
}

.quality3 .wrap .content .item .joke .circle img{
    object-fit: contain;
    transition: .6s;
}
.quality3 .wrap .content .item:hover .joke .circle img{
    filter: invert();
}

.quality3 .wrap .content .item .joke .circle:after {
    content: '';
    position: absolute;
    width: 2.5vw;
    height: 2.5vw;
    background: #009944;
    opacity: 0.05;
    border-radius: 50%;
    left: 0.8333333333vw;
    top: -0.1041666667vw;
    z-index: -1;
    transition: 0.7s;
}

.quality3 .wrap .content .item .joke .circle svg {
    width: 2.6041666667vw;
    height: 2.6041666667vw;
    margin: 0.8854166667vw 0 0 0;
}

.quality3 .wrap .content .item .joke .circle svg path {
    fill: #000;
    transition: 0.7s;
}

.quality3 .wrap .content .item .joke .text {
    font-size: 0.9375vw;
    font-weight: 400;
    color: #666666;
    line-height: 1.3541666667vw;
    transition: 0.7s;
    flex: 1;
}

.quality3 .wrap .content .item:hover .joke {
    background: #009944;
}

.quality3 .wrap .content .item:hover .joke .circle:after {
    background: #FBFBFB;
}

.quality3 .wrap .content .item:hover .joke .circle svg path {
    fill: #fff;
}

.quality3 .wrap .content .item:hover .joke .text {
    color: #fff;
}

.quality3 .wrap .headline {
    font-size: 1.5625vw;
    font-weight: 400;
    color: #222222;
    margin: 4.4791666667vw auto 0;
    text-align: center;
}

.quality3 .wrap .headline strong {
    color: #009944;
}

.quality4 .wrap {
    width: 72.9166666667vw;
    margin: 13.75vw auto 12.9166666667vw;
    display: flex;
    justify-content: space-between;
    padding: 0 1.875vw 0 0;
}

.quality4 .wrap .l .text {
    margin: 0 0 1.6666666667vw;
}

.quality4 .wrap .l .text h5 {
    font-size: 1.875vw;
    font-weight: 500;
    color: #222222;
    margin: 0 0 2.03125vw;
}

.quality4 .wrap .l .text p {
    font-size: 1.25vw;
    font-weight: 400;
    color: #222222;
}

.quality4 .wrap .l .icon {
    display: flex;
    margin: 0 0 4.1145833333vw;
}

.quality4 .wrap .l .icon .list {
    text-align: center;
}

.quality4 .wrap .l .icon .list .green {
    width: 2.7604166667vw;
    height: 2.7604166667vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.4166666667vw;
    background: #009944;
}

.quality4 .wrap .l .icon .list .green .iconfont {
    color: #fff;
    font-size: 1.3020833333vw;
}

.quality4 .wrap .l .icon .list p {
    font-size: 0.9375vw;
    font-weight: 400;
    color: #009944;
}

.quality4 .wrap .l .icon .list:not(:last-child) {
    margin: 0 3.3854166667vw 0 0;
}

.quality4 .wrap .l .load_more {
    width: fit-content;
    margin: 0;
}

.quality4 .wrap .img {
    width: 33.5416666667vw;
}

.quality4 .wrap .img img {
    width: 100%;
}

.quality5 {
    background: #F7F8FA;
}

.quality5 .wrap {
    width: 72.9166666667vw;
    margin: 10.2604166667vw auto 10.6770833333vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quality5 .wrap .l .title {
    font-size: 1.875vw;
    font-weight: 500;
    color: #222222;
    line-height: 1.7708333333vw;
    margin: 0 0 1.6666666667vw;
}

.quality5 .wrap .l .text {
    font-size: 1.0416666667vw;
    font-weight: 400;
    color: #222222;
    line-height: 1.875vw;
    margin: 0 0 4.1666666667vw;
}

.quality5 .wrap .l .load_more {
    width: fit-content;
    margin: 0;
}

.quality5 .wrap .r {
    width: 36.6666666667vw;
    position: relative;
    left: 2.6041666667vw;
}

.quality5 .wrap .r img {
    width: 100%;
}

.quality6 {
    position: relative;
    z-index: 1;
}

.quality6:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 31.09375vw;
    background: #F7F8FA;
    border-radius: 1.5625vw 1.5625vw 0px 0px;
    z-index: -1;
}

.quality6 .wrap {
    width: 72.9166666667vw;
    margin: 8.28125vw auto 11.3020833333vw;
}

.quality6 .wrap .top {
    text-align: center;
    width: 58.5416666667vw;
    margin: 0 auto 5.8333333333vw;
}

.quality6 .wrap .top .title {
    font-size: 1.875vw;
    font-weight: 500;
    color: #222222;
    line-height: 1.7708333333vw;
    margin: 0 0 1.25vw;
}

.quality6 .wrap .top .headline {
    font-size: 1.25vw;
    font-weight: 500;
    color: #222222;
    margin: 0 0 2.6041666667vw;
}

.quality6 .wrap .top .text {
    font-size: 0.9375vw;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.8);
    line-height: 1.875vw;
}

.quality6 .wrap .top .flex {
    display: flex;
    justify-content: space-between;
    margin: 4.6875vw 0 0 0;
}

.quality6 .wrap .top .flex .list {
    cursor: pointer;
}

.quality6 .wrap .top .flex .list .iconfont {
    color: #009944;
    font-size: 2.34375vw;
    margin: 0 auto 1.5625vw;
    transition: 1s;
}

.quality6 .wrap .top .flex .list p {
    font-size: 0.9375vw;
    font-weight: 500;
    color: #222222;
}

.quality6 .wrap .top .flex .list:hover .iconfont {
    transform: rotateY(180deg);
}

.quality6 .wrap .bottom {
    width: 100%;
}

.quality6 .wrap .bottom img {
    width: 100%;
}

.quality7 .wrap {
    margin: 8.1770833333vw auto 0;
}

.quality7 .wrap .top {
    text-align: center;
    margin: 0 0 4.4270833333vw;
}

.quality7 .wrap .top h2 {
    font-size: 1.875vw;
    font-weight: 500;
    color: #222222;
    margin: 0 0 2.3958333333vw;
}

.quality7 .wrap .top h5 {
    font-size: 1.25vw;
    font-weight: 500;
    color: #222222;
    margin: 0 0 2.1875vw;
}

.quality7 .wrap .top h1 {
    font-size: 2.0833333333vw;
    font-weight: bold;
    color: #222222;
    line-height: 1.6666666667vw;
}

.quality7 .wrap .top h1 strong {
    color: #009944;
}

.quality7 .wrap .top .pick {
    font-size: 0.9375vw;
    font-weight: 400;
    color: #333333;
    margin: 2.7604166667vw 0 0 0;
}

.quality7 .wrap .content .item {
    position: relative;
}

.quality7 .wrap .content .item:not(:last-child) {
    margin: 0 0 2.03125vw;
}

.quality7 .wrap .content .item .bg {
    width: 100%;
}

.quality7 .wrap .content .item .position {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 14.84375vw;
    z-index: 2;
}

.quality7 .wrap .content .item .position h1 {
    font-size: 1.25vw;
    font-weight: 500;
    color: #222222;
    margin: 0 0 1.5104166667vw;
}

.quality7 .wrap .content .item .position .text {
    width: 27.96875vw;
    font-size: 0.8333333333vw;
    font-weight: 400;
    color: #222222;
    line-height: 1.6666666667vw;
    margin: 0 0 4.21875vw;
}

.quality7 .wrap .content .item .position .load_more {
    width: fit-content;
    margin: 0;
}

.quality7 .wrap .content .item:nth-child(2n) .position {
    right: unset;
    left: 13.6458333333vw;
}

/*# sourceMappingURL=quality.css.map */

@media screen and (max-width: 1024px) {
    .public_banner .position{
        font-size: 16px;
        padding: 0 5% 0 0;
    }

    .quality .wrap{
        margin: 35px auto;
    }
    .quality .wrap .title{
        font-size: 24px;
        margin: 0 0 25px;
    }
    .quality .wrap .content{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }
    .quality .wrap .content .list{
        margin: 0!important;
    }
    .quality .wrap .content .list .iconfont{
        font-size: 30px;
        margin: 0 0 15px;
    }
    .quality .wrap .content .list .iconfont img{
        width: 30px;
    }

    .quality .wrap .content .list h5{
        font-size: 18px;
        margin: 0 0 10px;
    }
    .quality .wrap .content .list p{
        font-size: 13px;
        line-height: 1.6;
    }
    .quality2{
        overflow: hidden;
    }
    .quality2 .wrap{
        margin: 40px auto;
    }
    .quality2 .wrap .title h1{
        font-size: 24px;
        line-height: 1.3;
        margin: 0 0 18px;
    }
    .quality2 .wrap .title p{
        font-size: 14px;
        line-height: 1.8;
    }

    .quality2 .wrap .content{
        display: none;
    }

    .quality2 .wrap .content_sj{
        display: block!important;
        width: 100%;
        margin: 20px auto 0;
    }

    .quality3 .wrap{
        width: 90%;
        margin: 35px auto;
    }

    .quality3 .wrap .title h1{
        font-size: 24px;
        line-height: unset;
    }
    .quality3 .wrap .title p{
        font-size: 13px;
    }
    .quality3:after{
        display: none;
    }
    .quality3 .wrap .content{
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px 0;
    }
    .quality3 .wrap .content .item{
        height: auto;
    }
    .quality3 .wrap .content .item .joke{
        flex-direction: column;
        align-items: unset;
        padding: 7%;
    }
    .quality3 .wrap .title{
        margin: 0 0 20px;
    }
    .quality3 .wrap .content .item .joke .circle{
        width: 30px;
        height: 30px;
        margin: 0 0 20px;
    }
    .quality3 .wrap .content .item .joke .text{
        font-size: 14px;
        line-height: 1.5;
    }
    .quality3 .wrap .headline{
        font-size: 18px;
        margin: 26px auto 0;
    }
    .quality4 .wrap{
        width: 90%;
        margin: 50px auto;
        flex-direction: column-reverse;
    }
    .quality4 .wrap .img{
        width: 100%;
    }
    .quality4 .wrap .l{
        text-align: center;
    }
    .quality4 .wrap .l .text{
        margin: 0 0 20px;
    }
    .quality4 .wrap .l .text h5{
        font-size: 24px;
        margin: 0 0 10px;
    }
    .quality4 .wrap .l .text p{
        font-size: 13px;
    }
    .quality4 .wrap .l .icon{
        margin: 0 0 35px;
        justify-content: center;
    }
    .quality4 .wrap .l .icon .list:not(:last-child) {
        margin: 0 40px 0 0;
    }
    .quality4 .wrap .l .load_more{
        margin: auto;
    }
    .quality4 .wrap .l .icon .list .green{
        width: 35px;
        height: 35px;
        margin: 0 auto 10px;
    }
    .quality4 .wrap .l .icon .list .green .iconfont{
        font-size: 14px;
    }
    .quality4 .wrap .l .icon .list p{
        font-size: 16px;
    }
    .quality4 .wrap .l{
        margin: 25px 0 0 0;
    }
    .quality5 .wrap{
        width: 90%;
        flex-direction: column-reverse;
    }
    .quality5 .wrap .r{
        width: 100%;
        left: 0;
    }
    .quality5{
        overflow: hidden;
    }
    .quality5 .wrap .l{
        width: 100%;
        text-align: center;
        margin: 25px 0 0 0;
    }
    .quality5 .wrap .l .title{
        font-size: 24px;
        margin: 0 0 10px;
        line-height: unset;
    }
    .quality5 .wrap .l .text{
        font-size: 13px;
        line-height: 1.8;
    }
    .quality5 .wrap .l .load_more{
        margin: auto;
    }
    .quality6 .wrap{
        width: 90%;
        margin: 35px auto 0;
    }
    .quality6 .wrap .top .title{
        font-size: 24px;
        line-height: 25px;
        margin: 0 0 20px;
    }
    .quality6 .wrap .top .headline{
        font-size: 16px;
        margin: 0 0 15px;
    }
    .quality6 .wrap .top{
        width: 100%;
    }
    .quality6 .wrap .top .text{
        font-size: 13px;
        line-height: 2;
    }
    .quality6 .wrap .top .flex{
        margin: 25px 0 0 0;
    }
    .quality6 .wrap .top .flex .list .iconfont{
        font-size: 24px;
    }
    .quality6 .wrap .top .flex .list p{
        font-size: 11px;
        margin: 10px 0 0 0;
    }

    .quality7 .wrap .top h2{
        font-size: 18px;
        margin: 0 0 10px;
    }
    .quality7 .wrap .top h5{
        font-size: 14px;
        margin: 0 0 10px;
    }
    .quality7 .wrap .top h1{
        font-size: 24px;
        line-height: 1.5;
    }

    .quality7 .wrap .top .pick{
        margin: 15px 0 0 0;
        font-size: 14px;
    }

    .quality7 .wrap{
        margin: 45px auto 0;
    }
    .quality7 .wrap .top{
        margin: 0 0 25px;
        padding: 0 5%;
    }

    .quality7 .wrap .content .item .position{
        position: static;
        width: 90%;
        margin: 30px auto;
        transform: none;
    }
    .quality7 .wrap .content .item .bg{
        height: 150px;
    }
    .quality7 .wrap .content .item .position h1{
        font-size: 24px;
        margin: 0 0 10px;
    }
    .quality7 .wrap .content .item .position .text{
        width: 100%;
        font-size: 13px;
        line-height: 25px;
        margin: 0 0 25px;
    }
    .quality7 .wrap .content .item:not(:last-child) {
        margin: 0 0 30px;
    }

}<!--0.00014591217041016-->