.banner {
    width: 100%;
    height: 600px;
    background-size: cover;
}


.banner .info {
    padding-top: 75px;
    padding-left: 63px;
}

.banner .info .title {
    height: 51px;
    line-height: 51px;
    font-size: 52px;
    font-weight: bold;
    color: #333333;
}

.banner .info .child {
    margin-top: 81px;
}

.banner .info .child ul li {
    font-size: 20px;
    color: #333333;
    line-height: 60px;
}

@media (min-width: 768px) {
    .about-box {
        position: relative;
        display: flex;
        flex-direction: row;
        width: calc(100% - 180px);
        height: 100%;
        padding-top: 113px;
        padding-left: 180px;
        padding-bottom: 80px;
    }

    .about-box .left {
        position: sticky;
        top: 237px;
        display: flex;
        flex-direction: column;
        width: 425px;
        height: 400px;
        border-radius: 2px;
        transition: all 0.3s linear;
    }

    .about-box .left ul {
        width: 423px;
        background-color: #F6F8FC;
        border-radius: 2px;
    }

    .about-box .left ul > li {
        position: relative;
        height: 132px;
        list-style-type: none;
        display: flex;
        flex-direction: row;
        padding: 40px 25px 41px 22px;
    }

    .about-box .left .num {
        height: 38px;
        line-height: 38px;
        font-size: 51px;
        font-family: Geometr706 BlkCn BT;
        font-weight: 900;
        color: #333333;
    }

    .about-box .left .title-box {
        margin-left: 29px;
    }

    .about-box .left .title-box .title {
        height: 24px;
        line-height: 24px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .left .title-box .sub_title {
        margin-top: 12px;
        height: 15px;
        line-height: 15px;
        font-size: 14px;
        color: #666666;
    }

    .about-box .left .icon {
        position: absolute;
        top: 65px;
        right: 37px;
    }

    .about-box .left .active {
        background: linear-gradient(90deg, #3C71EF 0%, rgba(60, 113, 239, 0) 100%);
    }

    .about-box .left .active .num, .about-box .left .active .title, .about-box .left .active .sub_title {
        color: #FFFFFF;
    }

    .about-box .left .active .icon {
        top: 52px;
        right: 25px;
        width: 37px;
        height: 37px;
        background: #FFFFFF;
        border-radius: 50%;
        text-align: center;
        line-height: 37px;
    }

    .about-box .right {
        width: calc(100% - 53px);
        padding-left: 53px;
        display: flex;
        flex-direction: column;
    }


    .about-box .right .part1 {
        width: calc(100% - 57px);
        display: flex;
        flex-direction: column;
        padding-top: 7px;
        padding-left: 57px;
        padding-right: 180px;
    }

    .about-box .right .part1 .part-header {
        display: flex;
        flex-direction: column;
    }

    .about-box .right .part1 .part-header .title {
        height: 27px;
        line-height: 27px;
        font-size: 28px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .right .part1 .part-header .point-box {
        display: flex;
        flex-direction: row;
        margin-top: 22px;
    }

    .about-box .right .part1 .part-header .point-box .point {
        width: 4px;
        height: 4px;
        background: #6B3F87;
        border-radius: 50%;
        margin-left: 5px;
    }

    .about-box .right .part1 .part-content {
        display: flex;
        flex-direction: row;
    }


    .about-box .right .part1 .part-content .left-content {
        display: flex;
        flex-direction: column;
        margin-top: 26px;
    }

    .about-box .right .part1 .part-content .left-content p {
        font-size: 20px;
        color: #666666;
        line-height: 36px;
        text-align: justify;
        text-justify: inter-ideograph;
    }

    .about-box .right .part1 .part-content .right-img {
        margin-left: 36px;
        padding-top: 9px;
    }

    .about-box .right .part1 .part-content .right-img img {
        max-width: 395px;
        max-height: 556px;
        object-fit: fill;
    }

    .about-box .right .part2 {
        width: 1263px;
        background: #F6F8FC;
        margin-top: 84px;
        padding-left: 57px;
        padding-top: 42px;
        padding-bottom: 60px;
    }


    .about-box .right .part2 .part-header {
        display: flex;
        flex-direction: column;

    }

    .about-box .right .part2 .part-header .title {
        height: 27px;
        line-height: 27px;
        font-size: 28px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .right .part2 .part-header .point-box {
        display: flex;
        flex-direction: row;
        margin-top: 22px;
    }

    .about-box .right .part2 .part-header .point-box .point {
        width: 4px;
        height: 4px;
        background: #6B3F87;
        border-radius: 50%;
        margin-left: 5px;
    }

    .about-box .right .part2 .part-content {
        margin-top: 75px;
        width: 1029px;
        height: 652px;
        background: #FFFFFF;
        box-shadow: 0px 0px 49px 0px rgba(67, 118, 240, 0.08);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .about-box .right .part2 .part-content .item {
        width: 35%;
        display: flex;
        flex-direction: column;
        margin-top: 40px;
    }

    .about-box .right .part2 .part-content .item .icon {
        width: 88px;
        height: 88px;
        display: block;
    }

    .about-box .right .part2 .part-content .item .icon img {
        width: 88px;
        height: 88px;
        vertical-align: middle;
    }

    .about-box .right .part2 .part-content .item .title {
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        font-weight: bold;
        color: #4B4C52;
        margin-top: 19px;
    }

    .about-box .right .part2 .part-content .item .sub_title {
        width: 120px;
        height: 14px;
        font-size: 14px;
        color: #666666;
        margin-top: 13px;
    }

    .about-box .right .part2 .part-content .item .desc {
        width: 290px;
        height: 39px;
        font-size: 14px;
        color: #888888;
        line-height: 24px;
        margin-top: 32px;
    }

    .about-box .right .part3 {
        width: calc(100% - 56px);
        height: 627px;
        margin-top: 92px;
        padding-left: 56px;
        display: flex;
        flex-direction: column;
    }


    .about-box .right .part3 .part-header {
        display: flex;
        flex-direction: column;
    }

    .about-box .right .part3 .part-header .title {
        height: 27px;
        line-height: 27px;
        font-size: 28px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .right .part3 .part-header .point-box {
        display: flex;
        flex-direction: row;
        margin-top: 22px;
    }

    .about-box .right .part3 .part-header .point-box .point {
        width: 4px;
        height: 4px;
        background: #6B3F87;
        border-radius: 50%;
        margin-left: 5px;
    }

    .about-box .right .part3 .part-content {
        width: 45vw;
        display: flex;
        flex-direction: row;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 68px;
    }

    .about-box .right .part3 .cx-time-main .cx-time-box ul {
        padding-left: 40px;
    }

    .about-box .right .part3 .desc-wrap {
        width: 766px;
        height: 195px;
        background: #F8F8F8;
        margin-left: auto;
        margin-right: auto;
        margin-top: 80px;
        position: relative;
    }

    .about-box .right .part3 .desc-wrap .top_icon {
        position: absolute;
        left: 20px;
        top: -15px;
        z-index: 2;
    }

    .about-box .right .part3 .desc-wrap .bottom_icon {
        position: absolute;
        bottom: -32px;
        right: 23px;
        z-index: 2;
    }

    .about-box .right .part3 .desc-wrap .desc {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #F8F8F8;
        border-radius: 2px;
        font-size: 16px;
        color: #333333;
        line-height: 30px;
    }


}


@media (max-width: 768px) {
    .banner {
        width: 100%;
    }


    .about-box {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: 100%;
        padding: 0 15px;
    }

    .about-box .left {
        width: 100%;
        display: flex;
        flex-direction: column;

        border-radius: 2px;
        transition: all 0.3s linear;
    }

    .about-box .left ul {
        width: 100%;
        background-color: #F6F8FC;
        border-radius: 2px;
    }

    .about-box .left ul > li {
        position: relative;
        list-style-type: none;
        display: flex;
        flex-direction: row;
        padding: 35px 22px;
    }

    .about-box .left .num {
        height: 38px;
        line-height: 38px;
        font-size: 35px;
        font-family: Geometr706 BlkCn BT;
        font-weight: 900;
        color: #333333;
    }

    .about-box .left .title-box {
        margin-left: 29px;
    }

    .about-box .left .title-box .title {
        height: 24px;
        line-height: 24px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .left .title-box .sub_title {
        margin-top: 12px;
        height: 15px;
        line-height: 15px;
        font-size: 14px;
        color: #666666;
    }

    .about-box .left .icon {
        position: absolute;
        top: 65px;
        right: 37px;
    }

    .about-box .left .active {
        background: linear-gradient(90deg, #3C71EF 0%, rgba(60, 113, 239, 0) 100%);
    }

    .about-box .left .active .num, .about-box .left .active .title, .about-box .left .active .sub_title {
        color: #FFFFFF;
    }

    .about-box .left .active .icon {
        top: 52px;
        right: 25px;
        width: 37px;
        height: 37px;
        background: #FFFFFF;
        border-radius: 50%;
        text-align: center;
        line-height: 37px;
    }

    .about-box .right {
        display: flex;
        flex-direction: column;
    }


    .about-box .right .part1 {

        display: flex;
        flex-direction: column;
        padding-top: 7px;

    }

    .about-box .right .part1 .part-header {
        display: flex;
        flex-direction: column;
    }

    .about-box .right .part1 .part-header .title {
        height: 27px;
        line-height: 27px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .right .part1 .part-header .point-box {
        display: flex;
        flex-direction: row;
        margin-top: 22px;
    }

    .about-box .right .part1 .part-header .point-box .point {
        width: 4px;
        height: 4px;
        background: #6B3F87;
        border-radius: 50%;
        margin-left: 5px;
    }

    .about-box .right .part1 .part-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }


    .about-box .right .part1 .part-content .left-content {
        display: flex;
        flex-direction: column;
        margin-top: 26px;
    }

    .about-box .right .part1 .part-content .left-content p {
        font-size: 16px;
        color: #666666;
        line-height: 25px;
        text-align: justify;
        text-justify: inter-ideograph;
    }

    .about-box .right {
        padding-bottom: 40px
    }

    .about-box .right .part1 .part-content .right-img {

        padding-top: 9px;
    }

    .about-box .right .part1 .part-content .right-img img {
        width: 100%;
    }

    .about-box .right .part2 {

        background: #F6F8FC;
        margin-top: 15px;

    }


    .about-box .right .part2 .part-header {
        display: flex;
        flex-direction: column;
        padding: 15px;
    }

    .about-box .right .part2 .part-header .title {
        height: 27px;
        line-height: 27px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .right .part2 .part-header .point-box {
        display: flex;
        flex-direction: row;
        margin-top: 22px;
    }

    .about-box .right .part2 .part-header .point-box .point {
        width: 4px;
        height: 4px;
        background: #6B3F87;
        border-radius: 50%;
        margin-left: 5px;
    }

    .about-box .right .part2 .part-content {
        margin-top: 25px;

        background: #FFFFFF;
        box-shadow: 0px 0px 49px 0px rgba(67, 118, 240, 0.08);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .about-box .right .part2 .part-content .item {
        width: 45%;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        margin-top: 40px;
    }

    .about-box .right .part2 .part-content .item .icon {
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }

    .about-box .right .part2 .part-content .item .icon img {
        width: 60px;
        height: 60px;
        vertical-align: middle;
    }

    .about-box .right .part2 .part-content .item .title {
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        font-weight: bold;
        color: #4B4C52;
        margin-top: 19px;
    }

    .about-box .right .part2 .part-content .item .sub_title {

        font-size: 14px;
        color: #666666;
        margin-top: 13px;
    }

    .about-box .right .part2 .part-content .item .desc {

        font-size: 14px;
        color: #888888;
        line-height: 24px;
        margin-top: 15px;
    }

    .about-box .right .part3 {
        padding: 35px 0;
        display: flex;
        flex-direction: column;
    }


    .about-box .right .part3 .part-header {
        display: flex;
        flex-direction: column;
        padding: 15px;
    }

    .about-box .right .part3 .part-header .title {
        height: 27px;
        line-height: 27px;
        font-size: 24px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .right .part3 .part-header .point-box {
        display: flex;
        flex-direction: row;
        margin-top: 15px;
    }

    .about-box .right .part3 .part-header .point-box .point {
        width: 4px;
        height: 4px;
        background: #6B3F87;
        border-radius: 50%;
        margin-left: 5px;
    }

    .about-box .right .part3 .part-content {
        width: 80vw;
        display: flex;
        flex-direction: row;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 18px;

    }

    .about-box .right .part3 .cx-time-main .cx-time-box ul {
        padding-left: 40px;
    }

    .about-box .right .part3 .desc-wrap {
        width: 96%;
        background: #F8F8F8;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        position: relative;
    }

    .about-box .right .part3 .desc-wrap .top_icon {
        position: absolute;
        left: 20px;
        top: -15px;
        z-index: 2;
    }

    .about-box .right .part3 .desc-wrap .bottom_icon {
        position: absolute;
        bottom: -15px;
        right: 23px;
        z-index: 2;
    }

    .about-box .right .part3 .desc-wrap .desc {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin: 15px auto;
        height: 100%;
        min-height:100px;
        border-radius: 2px;
        font-size: 16px;
        color: #333333;
        line-height: 30px;
    }


}

@media (min-width: 768px) and (max-width: 1800px) {
    .about-box {
        padding-left: 100px
    }

    .about-box .right .part2 .part-content, .about-box .right .part3 {
        /*max-width: 1000px*/
    }
}

@media (min-width: 1200px) {
    .banner {
        width: 100%;
        height: 0;
        padding-bottom: 31.25%;
    }

    .menu {
        width: 85%;
        margin: -66px auto 0;
    }

    .menu a {
        width: 14.28%;
    }

    .about-box {
        width: 100%;
    }

    .about-box .left {
        position: sticky;
        top: 237px;
        display: flex;
        flex-direction: column;
        width: 282px;
        height: 264px;
        border-radius: 2px;
        transition: all 0.3s linear;
    }


    .about-box .left ul {
        width: 100%;
        background-color: #F6F8FC;
        border-radius: 2px;
    }

    .about-box .left ul > li {
        position: relative;
        height: 88px;
        list-style-type: none;
        display: flex;
        flex-direction: row;
        padding: 27px 15px;
    }

    .about-box .left .num {
        height: 25px;
        line-height: 25px;
        font-size: 34px;
        font-family: Geometr706 BlkCn BT;
        font-weight: 900;
        color: #333333;
    }

    .about-box .left .title-box {
        margin-left: 19px;
    }

    .about-box .left .title-box .title {
        height: 15px;
        line-height: 15px;
        font-size: 16px;
        font-weight: 500;
        color: #333333;
    }

    .about-box .left .title-box .sub_title {
        margin-top: 9px;
        height: 10px;
        line-height: 10px;
        font-size: 9px;
        color: #666666;
    }

    .about-box .left .icon {
        position: absolute;
        top: 43px;
        right: 25px;
    }


    .about-box .left .active .icon {
        top: 35px;
        right: 17px;
        width: 25px;
        height: 25px;
        background: #FFFFFF;
        border-radius: 50%;
        text-align: center;
        line-height: 25px;
    }

    .about-box .right {
        padding-left: 1%;
        width: calc(100% - 282px);
    }

    .about-box .right .part1 {
        width: 100%;
        box-sizing: border-box;
        padding-left: 3%;
        padding-right: 0%;
    }

    .about-box .right .part1 .part-content {
        margin-top: 26px;
        justify-content: space-between;
        width: 100%;
        padding-right: 12%;
    }

    .about-box .right .part1 .part-content .left-content {
        margin-top: 0;
        flex: 1;
    }

    .about-box .right .part1 .part-content .right-img {
        width: 38%;
        margin-left: 0;
        padding-left: 5%;
        max-width: 395px;
    }

    .about-box .right .part1 .part-content .right-img img {
        width: 100%;
    }

    .about-box .right .part2, .about-box .right .part3 {
        width: 100%;
        box-sizing: border-box;
        padding-left: 3%;
        padding-right: 12%;
    }

    .about-box .right .part2 .part-content {
        width: 100%;
    }

    .about-box .right .part3 .desc-wrap {
        width: 100%;
    }

    .about-box .right .part2 .part-content .item .desc {
        width: 100%;
    }

    .banner .info .title, .about-box .left .num {
        font-size: 35px;
    }

    .banner .info .child {
        margin-top: 50px;
    }

    .banner .info .child ul li {
        font-size: 14px;
    }

    .about-box .right .part1 .part-header .title, .about-box .right .part2 .part-header .title, .about-box .right .part3 .part-header .title {
        font-size: 20px;
    }

    .about-box .right .part1 .part-content .left-content p {
        font-size: 14px;
        line-height: 24px;
    }

    .about-box .left .title-box .title {
        font-size: 16px;
    }
}

@media (min-width: 1600px) {
    .banner .info .title, .about-box .left .num {
        font-size: 43px;
    }

    .banner .info .child {
        margin-top: 70px;
    }

    .banner .info .child ul li {
        font-size: 17px;
    }

    .about-box .right .part1 .part-header .title, .about-box .right .part2 .part-header .title, .about-box .right .part3 .part-header .title {
        font-size: 23px;
    }

    .about-box .right .part1 .part-content .left-content p {
        font-size: 17px;
        line-height: 30px;
    }

    .about-box .left .title-box .title {
        font-size: 20px;
    }
}

@media (min-width: 1900px) {
    .banner .info .title {
        font-size: 52px;
    }

    .banner .info .child {
        margin-top: 81px;
    }

    .banner .info .child ul li {
        font-size: 20px;
    }

    .about-box .right .part1 .part-header .title, .about-box .right .part2 .part-header .title, .about-box .right .part3 .part-header .title {
        font-size: 28px;
    }

    .about-box .right .part1 .part-content .left-content p {
        font-size: 20px;
        line-height: 36px;
    }

    .about-box .left .title-box .title {
        font-size: 24px;
    }

    .about-box .left .num {
        font-size: 51px;
    }
}