.top {

    width: 100%;

    background-color: var(--light);

}



.top-wrap {

    width: 1200px;

    margin: 0 auto;

}



.top-left {

    flex: 1;

}



.top-title {

    margin-top: 125px;

}



.top-desc {

    width: 94%;

    margin-top: 40px;

    font-size: 24px;

    line-height: 36px;

}



.top-image {

    margin: 100px 17px 0 0;

}



.job {

    width: 100%;

    height: 660px;

    background-color: rgb(47,84,202);

}



.job-wrap {

    width: 100%;

    height: 100%;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 88px 0;

    background: center 100% no-repeat url("../images/contact_bg.png");

}



.job-title {

    margin-bottom: 72px;

}



.job-list {

    width: 100%;

    height: 76px;

    /* display: flex;

    flex-direction: row;

    flex-wrap: nowrap; */

    overflow: hidden;

    /* overflow-x: scroll; */

    white-space: nowrap;

    margin: 36px 0;

    /* 滚动平滑动画 */

    /* scroll-behavior: smooth; */

}



.job-item {

    height: 100%;

    /* display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: flex-end; */

    display: inline-block;

    margin-right: 76px;

}



.job-item-title {

    display: inline-block;

    vertical-align: bottom;

    margin-right: 16px;

}



.job-item-desc {

    display: inline-block;

    background-color: var(--white);

    border-radius: 16px 16px 16px 0px;

    padding: 8px 16px;

    box-sizing: border-box;

    line-height: 30px;

}



.job-btn {

    display: block;

    width: 188px;

    height: 57px;

    line-height: 57px;

    text-align: center;

    border-radius: 40px 40px 40px 40px;

    border: 1px solid var(--white);

    pointer-events: auto;

    margin: 72px auto 0;

}



.job-btn:hover {

    cursor: pointer;

    /* color: var(--main); */

}



.contact {

    width: 100%;

}



.contact-wrap {

    width: 1200px;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 88px 0;

}



.contacts {

    margin-top: 72px;

}



.contact-item {

    width: 380px;

    height: 200px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

}



.contact-item-title {

    margin: 16px 0 8px 0;

}



.contact-item-desc {

    height: 42px;

}



.contact-map {

    width: 100%;

    margin-top: 37px;

}



@media all and (max-width: 750px) {

    .top-wrap {

        width: 96%;

        flex-direction: column;

    }



    .top-image {

        width: 100%;

    }



    .top-desc {

        width: 100%;

    }



    .job-wrap {

        width: 96%;

    }



    .contact-wrap {

        width: 96%;

        padding: 88px 0;

    }

}