@media screen and (max-width: 1670px) {

    body .product-swiper-left {

        left: 1rem;

    }



    body .product-swiper-right {

        right: 1rem;

    }

}



@media screen and (max-width: 1360px) {

    body .content {

        display: flex;

        flex-direction: column;

        min-width: unset;

        width: 100%;

        background-color: #f1f9fc;

    }



    body .content .product-compontent {

        display: flex;

        flex-direction: column;

        width: 100%;

    }



    body .content .product-compontent .product-compontent-banner {

        width: 100%;

        height: 8rem;

        background-image: url('../../images/recruitBg.png');

        background-position: center;

        background-repeat: no-repeat;

        background-size: cover;

    }



    body .content .product-compontent .product-compontent-nav {

        width: 100%;

        height: 4rem;

        background-color: #fff;

        display: flex;

        justify-content: center;

    }



    body .content .product-compontent .product-compontent-nav-content {

        width: 100%;

        margin: 0 auto;

        display: flex;

        padding: 0 1rem;

        box-sizing: border-box;

        justify-content: space-between;

    }



    body .content .product-compontent .product-compontent-nav-content-left {

        display: flex;

        justify-content: center;

        width: 100%;

    }



    body .content .product-compontent .product-compontent-nav-content-left a {

        min-width: unset;

        text-align: center;

        height: 100%;

        line-height: 4rem;

        color: #000000;

        font-size: 1rem;

        position: relative;

        margin-right: 1rem;

        cursor: pointer;

        transition: all .3s;

    }



    body .content .product-compontent .product-compontent-nav-content-left a:hover {

        color: #0084ce;

        position: relative;

    }



    body .content .product-compontent .product-compontent-nav-content-left a:hover::after {

        content: unset;

        width: unset;

        position: unset;

        bottom: unset;

        left: unset;

        height: unset;

        background-color: unset;

        color: unset;

        line-height: unset;

    }



    body .content .product-compontent .product-compontent-nav-content-left a:last-child {

        margin: 0;

    }



    body .content .product-compontent .product-compontent-nav-content-left .select-nav {

        color: #0084ce;

        position: relative;

    }



    body .content .product-compontent .select-nav::after {

        content: unset;

        width: unset;

        position: unset;

        bottom: unset;

        left: unset;

        height: unset;

        background-color: unset;

        color: unset;

        line-height: unset;

    }



    body .content .product-compontent .product-compontent-nav-content-right {

        display: none;

        align-items: center;

    }



    body .personnel {

        width: 100%;

        padding: 0;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

    }



    body .personnel .personnel-a {

        width: 100%;

        height: unset;

        background-color: #ffffff;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

    }



    body .personnel .personnel-a .container {

        width: 100%;

        margin: 0 auto;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        padding: 0 1rem;

        box-sizing: border-box;

    }



    body .personnel .personnel-a .container .left {

        width: 100%;

        display: flex;

        flex-direction: column;

        margin: 2rem 0;

    }



    body .personnel .personnel-a .container .left h2 {

        color: #000000;

        font-size: 1.2rem;

        font-weight: 500;

        margin-bottom: 2rem;

    }



    body .personnel .personnel-a .container .left p {

        color: #444444;

        font-size: 1rem;

        line-height: 1.5rem;

    }



    body .personnel .personnel-a .container img {

        width: 100%;

        border-radius: 4px;

        margin-bottom: 2rem;

    }



    body .personnel .personnel-b {

        height: unset;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    body .personnel .personnel-b .title {

        margin-top: 2rem;

        margin-bottom: 2rem;

        text-align: center;

        color: #000000;

        font-size: 1.2rem;

    }



    body .personnel .personnel-b .container {

        width: 100%;

        padding: 0 1rem;

        box-sizing: border-box;

        display: grid;

        grid-template-columns: 1fr 1fr;

        grid-row-gap: 1rem;

        grid-column-gap: 1rem;

        margin-bottom: 2rem;

    }



    body .personnel .personnel-b .container .container-li {

        width: 100%;

        height: unset;

        padding: 1rem;

        box-sizing: border-box;

        background-color: #ffffff;

        box-shadow: 0px 8px 30px 0px rgba(17, 78, 112, 0.1);

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }



    body .personnel .personnel-b .container .container-li .icon {

        width: 8rem;

        height: 8rem;

        background-color: #f1f9fc;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    body .personnel .personnel-b .container .container-li .icon img {

        width: 3rem;

    }



    body .personnel .personnel-b .container .container-li .name {

        color: #000000;

        font-size: 1.2rem;

        margin: 1rem 0;

    }



    body .personnel .personnel-b .container .container-li p {

        color: #666666;

        font-size: 1rem;

        margin-bottom: 1rem;

    }



    body .personnel .personnel-b .container .container-li p:last-child {

        margin: 0;

    }



    body .personnel .personnel-c {

        width: 100%;

        height: unset;

        background-color: #fff;

        display: flex;

        flex-direction: column;

        align-items: center;

        padding: 2rem 0;

        box-sizing: border-box;

    }



    body .personnel .personnel-c .title {

        color: #000000;

        font-size: 1.2rem;

        font-weight: 500;

        text-align: center;

        margin-top: 0;

        margin-bottom: 2rem;

    }



    body .personnel .personnel-c .container {

        width: 100%;

        padding: 0 1rem;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

    }



    body .personnel .personnel-c .container .left {

        padding: 2rem;

        box-sizing: border-box;

        width: 100%;

        margin-right: 0;

        height: unset;

        background-color: #f8f4ea;

        display: flex;

        justify-content: center;

        align-items: center;

        margin-bottom: 2rem;

    }



    body .personnel .personnel-c .container .left .circular {

        width: 20rem;

        height: 20rem;

        border: dashed 1px #886da2;

        border-radius: 50%;

        position: relative;

        display: flex;

        justify-content: center;

        align-items: center;

        margin: 5rem 0;

    }



    body .personnel .personnel-c .container .left .circular .post {

        width: 5rem;

        height: 5rem;

        /* background-color: #37b6a7; */

        position: absolute;

        border-radius: 50%;

        left: 0;

        right: 0;

        margin: 0 auto;

        display: flex;

        justify-content: center;

        align-items: center;

        top: -2.5rem;

    }



    body .personnel .personnel-c .container .left .circular .post img {

        width: 2rem;

    }



    body .personnel .personnel-c .container .left .circular .post div {

        position: absolute;

        top: -28px;

        word-break: keep-all;

        white-space: nowrap;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

    }



    body .personnel .personnel-c .container .left .circular .post div p {

        font-size: 1rem;

    }



    body .personnel .personnel-c .container .left .circular .subsidy {

        width: 5rem;

        height: 5rem;

        background-color: #4ab464;

        position: absolute;

        border-radius: 50%;

        left: -1rem;

        margin: 0;

        display: flex;

        justify-content: center;

        align-items: center;

        top: 14rem;

    }



    body .personnel .personnel-c .container .left .circular .subsidy div {

        position: absolute;

        top: 5.5rem;

        word-break: keep-all;

        white-space: nowrap;

    }



    body .personnel .personnel-c .container .left .circular .subsidy div p {

        font-size: 1rem;

    }



    body .personnel .personnel-c .container .left .circular .bonus {

        width: 5rem;

        height: 5rem;

        /* background-color: #edae23; */

        position: absolute;

        border-radius: 50%;

        left: 14rem;

        margin: 0;

        display: flex;

        justify-content: center;

        align-items: center;

        top: 14rem;

    }



    body .personnel .personnel-c .container .left .circular .bonus div {

        position: absolute;

        top: 5.5rem;

        word-break: keep-all;

        white-space: nowrap;

    }



    body .personnel .personnel-c .container .left .circular .text {

        /* color: #886da2; */

        font-size: 2rem;

    }



    body .personnel .personnel-c .container .right {

        width: 100%;

        flex: unset;

        background-color: #f8f4ea;

        display: flex;

        justify-content: center;

        align-items: center;

        position: relative;

        padding: 2rem 1rem;

        box-sizing: border-box;

    }



    body .personnel .personnel-c .container .right .circular {

        position: absolute;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

        margin: auto;

        width: 10rem;

        height: 10rem;

        /* background-color: #886da2; */

        border-radius: 50%;

        z-index: 2;

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 0 1rem;

        box-sizing: border-box;

        color: #ffffff;

        font-size: 1rem;

        text-align: center;

    }



    body .personnel .personnel-c .container .right .wai {

        position: absolute;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

        margin: auto;

        width: 12rem;

        height: 12rem;

        /* background-color: #886da2; */

        opacity: 0.3;

        border-radius: 50%;

        z-index: 1;

    }





    body .personnel .personnel-c .container .right .right-content {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        grid-template-rows: 1fr 1fr;

        grid-row-gap: 1rem;

        grid-column-gap: 1rem;

    }



    body .personnel .personnel-c .container .right .right-content .li {

        background-color: #ffffff;

        padding: 1rem;

        box-sizing: border-box;

        display: flex;

        flex-direction: column;

    }



    body .personnel .personnel-c .container .right .right-content .li-a {

        align-items: flex-end;

    }



    html body .personnel .personnel-c .container .right .right-content .li-a span {

        /* color: #55a0da; */

    }



    html body .personnel .personnel-c .container .right .right-content .li-a div {

        /* color: #55a0da; */

    }



    body .personnel .personnel-c .container .right .right-content .li-b {

        padding-top: 2rem;

    }



    html body .personnel .personnel-c .container .right .right-content .li-b span {

        /* color: #886da2; */

    }



    html body .personnel .personnel-c .container .right .right-content .li-b div {

        /* color: #886da2; */

    }



    body .personnel .personnel-c .container .right .right-content .li-c {

        align-items: flex-end;

        padding-top: 2rem;

    }



    html body .personnel .personnel-c .container .right .right-content .li-c span {

        /* color: #edae23; */

    }



    html body .personnel .personnel-c .container .right .right-content .li-c div {

        /* color: #edae23; */

    }





    body .personnel .personnel-c .container .right .right-content .li img {

        width: 2rem;

        margin-bottom: .5rem;

    }



    body .personnel .personnel-c .container .right .right-content .li div {

        /* color: #ed7539; */

        font-size: 1rem;

        margin-bottom: 1rem;

    }



    body .personnel .personnel-c .container .right .right-content .li p {

        color: #777777;

        font-size: 1rem;

    }



    body .personnel .personnel-d {

        width: 100%;

        height: unset;

        background-image: url('../../images/recruit-2.png');

        background-position: center;

        background-repeat: no-repeat;

        background-size: cover;

        display: flex;

        flex-direction: column;

        align-items: center;

        padding: 2rem 0;

        box-sizing: border-box;

    }



    body .personnel .personnel-d .title {

        text-align: center;

        color: #ffffff;

        font-size: 1.2rem;

        margin-bottom: 2rem;

    }



    body .personnel .personnel-d .container {

        flex: 1;

        width: 100%;

        padding: 0 1rem;

        box-sizing: border-box;

        position: relative;

    }



    body .product-direction {

        position: absolute;

        width: 3rem;

        height: 3rem;

        background-color: #ffffff;

        border: solid 1px #cccccc;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        z-index: 3;

        top: -5rem;

        bottom: 0;

        margin: auto 0;

        cursor: pointer;

    }



    body .product-direction span {

        font-weight: bold;

        font-size: 1.2rem;

        color: #0178c8;

    }



    body .product-swiper-left {

        left: 2rem;

    }



    body .product-swiper-right {

        right: 2rem;

        transform: rotate(180deg);

    }



    body .personnel .personnel-d .swiper-container .swiper-science-pagination span {

        width: .5rem;

        height: .5rem;

        opacity: 1;

        margin: 0 .5rem !important;

        background-color: #ffffff;

        border: solid 2px #0084ce;

    }



    html body .personnel .personnel-d .swiper-container .swiper-science-pagination .swiper-pagination-bullet-active {

        width: .5rem;

        height: .5rem;

        background-color: #0084ce;

        border: solid 2px #fff;

        border-radius: 80% 0px 55% 50% / 55% 0px 80% 50%;

        transform: rotate(-45deg);

    }



    body .personnel .personnel-d .about-rotation-swiper {

        width: 100%;

        margin-bottom: 3.5rem;

        position: relative;

    }



    body .personnel .personnel-d .about-rotation-swiper div {

        position: absolute;

        width: 100%;

        bottom: 0;

        left: 0;

        height: 3rem;

        background-color: rgba(0, 0, 0, .5);

        text-align: center;

        line-height: 3rem;

        color: #ffffff;

        font-size: 1rem;

    }



    body .personnel .personnel-d .about-rotation-swiper img {

        width: 100%;

        display: block;

    }



    body .personnel .personnel-e {

        width: 100%;

        height: unset;

        background-color: #fff;

        display: flex;

        flex-direction: column;

        padding: 2rem 0;

        box-sizing: border-box;

        align-items: center;

    }



    body .personnel .personnel-e .title {

        text-align: center;

        color: #000000;

        font-size: 1.2rem;

        font-weight: 500;

        margin-bottom: 2rem;

    }



    body .personnel .personnel-e .container {

        flex: unset;

        width: 100%;

        padding: 0 1rem;

        box-sizing: border-box;

        position: relative;

    }



    body .personnel .personnel-e .container .swiper-container {

        width: 100%;

        height: 100%;

    }



    body .personnel .personnel-e .container .swiper-slide .images {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr .5147fr .5147fr;

        grid-row-gap: .5rem;

        grid-column-gap: .5rem;

        margin-bottom: 5rem;

    }



    body .personnel .personnel-e .container .swiper-slide .images div img {

        width: 100%;

        display: block;

    }



    body .personnel .personnel-e .staff-swiper-pagination span {

        width: .5rem;

        height: .5rem;

        opacity: 1;

        margin: 0 .5rem !important;

        background-color: #ffffff;

        border: solid 2px #0084ce;

    }



    html body .personnel .personnel-e .staff-swiper-pagination .swiper-pagination-bullet-active {

        width: .5rem;

        height: .5rem;

        background-color: #0084ce;

        border: solid 2px #0084ce;

        border-radius: 80% 0px 55% 50% / 55% 0px 80% 50%;

        transform: rotate(-45deg);

    }



    html body .personnel .personnel-f {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    html body .personnel .personnel-f .title {

        margin-top: 2rem;

        margin-bottom: 2rem;

        text-align: center;

        color: #000000;

        font-size: 1.2rem;

        font-weight: 500;

    }



    html body .personnel .personnel-f .container {

        width: 100%;

        display: flex;

        padding: 0 1rem;

        box-sizing: border-box;

        flex-direction: column;

    }



    html body .personnel .personnel-f .container .container-li {

        width: 100%;

        background-color: #ffffff;

        border-radius: 4px;

        padding: 1rem;

        box-sizing: border-box;

        margin-bottom: 1rem;

        display: flex;

        flex-direction: column;

        cursor: pointer;

    }



    html body .personnel .personnel-f .container .container-li .container-li-title {

        width: 100%;

        display: flex;

        justify-content: space-between;

        align-items: center;

        height: unset;

    }



    html body .personnel .personnel-f .container .container-li .container-li-title div:first-child {

        width: 1.5rem;

    }



    html body .personnel .personnel-f .container .container-li .container-li-title div:first-child img {

        width: 100%;

    }



    html body .personnel .personnel-f .container .container-li .container-li-title p {

        margin: 0 1rem;

        flex: 1;

        color: #000000;

        font-size: 1rem;

        transition: all .3s;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }



    html body .personnel .personnel-f .container .container-li:hover .container-li-title p {

        color: #0084ce !important;

        transition: all .3s;

    }



    html body .personnel .personnel-f .container .container-li .container-li-title div:last-child {

        display: flex;

        align-items: center;

    }



    html body .personnel .personnel-f .container .container-li .container-li-title div:last-child span:first-child {

        color: #666666;

        font-size: 1rem;

        transition: all .5s;

    }



    html body .personnel .personnel-f .container .container-li .container-li-title div:last-child span:last-child {

        margin: 0 .5rem;

        font-size: 1rem;

        color: #0084ce;

        transition: all .5s;

    }



    html body .personnel .personnel-f .container .container-li .container-li-content {

        padding: 1rem 0;

        width: 100%;

        box-sizing: border-box;

        border-top: 1px solid #dddddd;

        display: none;

    }



    html body .personnel .personnel-f .container .container-li .container-li-content p {

        color: #444444;

        font-size: 1rem;

        line-height: 1.5rem;

    }



    html body .personnel .personnel-f .container .container-li .container-li-content p span {

        color: #0084ce;

    }



    html body .personnel-f-page {

        padding: 0 1rem;

        box-sizing: border-box;

        width: 100%;

        height: 3rem;

        margin: 3rem 0;

    }

}





.content {

    display: flex;

    flex-direction: column;

    background-color: #f1f9fc;

}



.content .product-compontent {

    display: flex;

    flex-direction: column;

    width: 100%;

}



.content .product-compontent .product-compontent-banner {

    width: 100%;

    height: 320px;

    background-image: url('../../images/recruitBg.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;



}



.content .product-compontent .product-compontent-nav {

    width: 100%;

    height: 70px;

    background-color: #fff;

    display: flex;

    justify-content: center;

}



.content .product-compontent .product-compontent-nav-content {

    width: 1360px;

    margin: 0 auto;

    display: flex;

    padding: 0 20px;

    box-sizing: border-box;

    justify-content: space-between;

}



.content .product-compontent .product-compontent-nav-content-left {

    display: flex;

}



.content .product-compontent .product-compontent-nav-content-left a {

    min-width: 100px;

    text-align: center;

    height: 100%;

    line-height: 70px;

    color: #000000;

    font-size: 16px;

    position: relative;

    margin-right: 40px;

    cursor: pointer;

    transition: all .3s;

}



.content .product-compontent .product-compontent-nav-content-left a:hover {

    color: #0084ce;

    position: relative;

}



.content .product-compontent .product-compontent-nav-content-left a:hover::after {

    content: '';

    width: 100%;

    position: absolute;

    bottom: 0;

    left: 0;

    height: 3px;

    background-color: #0084ce;

    color: #0084ce;

    line-height: 3px;

}



.content .product-compontent .product-compontent-nav-content-left a:last-child {

    margin: 0;

}



.content .product-compontent .product-compontent-nav-content-left .select-nav {

    color: #0084ce;

    position: relative;

}



.content .product-compontent .select-nav::after {

    content: '';

    width: 100%;

    position: absolute;

    bottom: 0;

    left: 0;

    height: 3px;

    background-color: #0084ce;

    color: #0084ce;

    line-height: 3px;

    transition: all .3s;

}



.content .product-compontent .product-compontent-nav-content-right {

    display: flex;

    align-items: center;

}



.content .product-compontent .product-compontent-nav-content-right span:first-child {

    font-size: 16px;

    color: #0084ce;

    margin-right: 7px;

}



.content .product-compontent .product-compontent-nav-content-right a {

    color: #888888;

    font-size: 14px;

    cursor: pointer;

    transition: all .3s;

}



.content .product-compontent .product-compontent-nav-content-right a:hover {

    color: #0084ce;

}



.content .product-compontent .product-compontent-nav-content-right span {

    margin: 0 14px;

    font-size: 14px;

    color: #888888;

}



.personnel {

    width: 100%;

    display: flex;

    flex-direction: column;

}



.personnel .personnel-a {

    width: 100%;

    height: 510px;

    background-color: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.personnel .personnel-a .container {

    width: 1360px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    padding: 0 20px;

    box-sizing: border-box;

}



.personnel .personnel-a .container .left {

    width: 594px;

    display: flex;

    flex-direction: column;

}



.personnel .personnel-a .container .left h2 {

    color: #000000;

    font-size: 36px;

    font-weight: 500;

    margin-bottom: 44px;

}



.personnel .personnel-a .container .left p {

    color: #444444;

    font-size: 16px;

}



.personnel .personnel-a .container img {

    width: 700px;

    border-radius: 4px;

}



.personnel .personnel-b {

    height: 706px;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.personnel .personnel-b .title {

    margin-top: 87px;

    margin-bottom: 60px;

    text-align: center;

    color: #000000;

    font-size: 36px;

}



.personnel .personnel-b .container {

    width: 1360px;

    padding: 0 20px;

    box-sizing: border-box;

    display: flex;

    justify-content: space-between;

}



.personnel .personnel-b .container .container-li {

    width: 323px;

    height: 400px;

    background-color: #ffffff;

    box-shadow: 0px 8px 30px 0px rgba(17, 78, 112, 0.1);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.personnel .personnel-b .container .container-li .icon {

    width: 120px;

    height: 120px;

    background-color: #f1f9fc;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.personnel .personnel-b .container .container-li .icon img {

    width: 50px;

}



.personnel .personnel-b .container .container-li .name {

    color: #000000;

    font-size: 22px;

    margin: 20px 0;

}



.personnel .personnel-b .container .container-li p {

    color: #666666;

    font-size: 16px;

    margin-bottom: 14px;

}



.personnel .personnel-c {

    width: 100%;

    height: 894px;

    background-color: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.personnel .personnel-c .title {

    color: #000000;

    font-size: 36px;

    font-weight: 500;

    text-align: center;

    margin-top: 80px;

    margin-bottom: 30px;

}



.personnel .personnel-c .container {

    width: 1360px;

    padding: 0 20px;

    box-sizing: border-box;

    display: flex;

    justify-content: space-between;

}



.personnel .personnel-c .container .left {

    flex: 1;

    margin-right: 20px;

    height: 600px;

    background-color: #f8f4ea;

    display: flex;

    justify-content: center;

    align-items: center;

}



.personnel .personnel-c .container .left .circular {

    width: 340px;

    height: 340px;

    border: dashed 1px #886da2;

    border-radius: 50%;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}



.personnel .personnel-c .container .left .circular .post {

    width: 120px;

    height: 120px;

    background-color: #37b6a7;

    position: absolute;

    border-radius: 50%;

    left: 0;

    right: 0;

    margin: 0 auto;

    display: flex;

    justify-content: center;

    align-items: center;

    top: -60px;

}



.personnel .personnel-c .container .left .circular .post img {

    width: 40px;

}



.personnel .personnel-c .container .left .circular .post div {

    position: absolute;

    top: -35px;

    word-break: keep-all;

    white-space: nowrap;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.personnel .personnel-c .container .left .circular .subsidy {

    width: 120px;

    height: 120px;

    background-color: #4ab464;

    position: absolute;

    border-radius: 50%;

    left: -30px;

    margin: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    top: 240px;

}



.personnel .personnel-c .container .left .circular .subsidy div {

    position: absolute;

    top: 127px;

    word-break: keep-all;

    white-space: nowrap;

}



.personnel .personnel-c .container .left .circular .bonus {

    width: 120px;

    height: 120px;

    background-color: #f19412;

    position: absolute;

    border-radius: 50%;

    left: 250px;

    margin: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    top: 240px;

}



.personnel .personnel-c .container .left .circular .bonus div {

    position: absolute;

    top: 127px;

    word-break: keep-all;

    white-space: nowrap;

}



.personnel .personnel-c .container .left .circular .text {

    color: #886da2;

    font-size: 36px;

}



.personnel .personnel-c .container .right {

    flex: 1;

    background-color: #f8f4ea;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}



.personnel .personnel-c .container .right .circular {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    width: 140px;

    height: 140px;

    background-color: #008bd0;

    border-radius: 50%;

    z-index: 2;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 0 30px;

    box-sizing: border-box;

    color: #ffffff;

    font-size: 16px;

}



.personnel .personnel-c .container .right .wai {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    width: 160px;

    height: 160px;

    background-color: #008bd0;

    opacity: 0.3;

    border-radius: 50%;

    z-index: 1;

}





.personnel .personnel-c .container .right .right-content {

    display: grid;

    grid-template-columns: 280px 280px;

    grid-template-rows: 230px 230px;

    grid-row-gap: 20px;

    grid-column-gap: 20px;

}



.personnel .personnel-c .container .right .right-content .li {

    background-color: #ffffff;

    padding: 30px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

}



.personnel .personnel-c .container .right .right-content .li-a {

    align-items: flex-end;

}



body .personnel .personnel-c .container .right .right-content .li-a span {

    color: #55a0da;

}



body .personnel .personnel-c .container .right .right-content .li-a div {

    color: #4ab464;

}



.personnel .personnel-c .container .right .right-content .li-b {

    padding-top: 44px;

}



body .personnel .personnel-c .container .right .right-content .li-b span {

    color: #886da2;

}



body .personnel .personnel-c .container .right .right-content .li-b div {

    color: #f19412;

}



.personnel .personnel-c .container .right .right-content .li-c {

    align-items: flex-end;

    padding-top: 44px;

}



body .personnel .personnel-c .container .right .right-content .li-c span {

    color: #edae23;

}



body .personnel .personnel-c .container .right .right-content .li-c div {

    color: #008bd0;

}





.personnel .personnel-c .container .right .right-content .li img {

    width: 50px;

    margin-bottom: 10px;

}



.personnel .personnel-c .container .right .right-content .li div {

    color: #37b6a7;

    font-size: 18px;

    margin-bottom: 22px;

}



.personnel .personnel-c .container .right .right-content .li p {

    color: #777777;

    font-size: 14px;

}



.personnel .personnel-d {

    width: 100%;

    height: 660px;

    background-image: url('../../images/recruit-2.png');

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 86px 0;

    box-sizing: border-box;

    background-attachment: fixed;

}



.personnel .personnel-d .title {

    text-align: center;

    color: #ffffff;

    font-size: 36px;

    margin-bottom: 56px;

}



.personnel .personnel-d .container {

    flex: 1;

    width: 1360px;

    padding: 0 20px;

    box-sizing: border-box;

    position: relative;

}



.product-direction {

    position: absolute;

    width: 60px;

    height: 60px;

    background-color: #ffffff;

    border: solid 1px #cccccc;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 5;

    top: -70px;

    bottom: 0;

    margin: auto 0;

    cursor: pointer;

}



.product-direction span {

    font-weight: bold;

    font-size: 22px;

    color: #0178c8;

}



.product-swiper-left {

    left: -90px;

}



.product-swiper-right {

    right: -90px;

    transform: rotate(180deg);

}



.personnel .personnel-d .swiper-container .swiper-science-pagination span {

    width: 10px;

    height: 10px;

    opacity: 1;

    margin: 0 10px !important;

    width: 10px;

    height: 10px;

    background-color: #ffffff;

    border: solid 2px #0084ce;

}



body .personnel .personnel-d .swiper-container .swiper-science-pagination .swiper-pagination-bullet-active {

    width: 10px;

    height: 10px;

    background-color: #0084ce;

    border: solid 2px #fff;

    border-radius: 80% 0px 55% 50% / 55% 0px 80% 50%;

    transform: rotate(-45deg);

}



.personnel .personnel-d .swiper-slide {

    text-align: center;

    /* Center slide text vertically */

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    transition: 300ms;

}



.personnel .personnel-d .about-rotation-swiper {

    width: 450px;

    margin-bottom: 70px;

    position: relative;

    overflow: hidden;

    cursor: pointer;

}



.personnel .personnel-d .about-rotation-swiper div {

    position: absolute;

    width: 100%;

    bottom: 0;

    left: 0;

    height: 50px;

    background-color: rgba(0, 0, 0, .5);

    text-align: center;

    line-height: 50px;

    color: #ffffff;

    font-size: 15px;

}



.personnel .personnel-d .about-rotation-swiper img {

    width: 100%;

    display: block;

    transition: all .3s;

}



.personnel .personnel-d .about-rotation-swiper:hover img {

    transform: scale(1.1);

}



.personnel .personnel-d .about-rotation-swiper:hover div {

    color: #0084ce;

}



.personnel .personnel-e {

    width: 100%;

    height: 1110px;

    background-color: #fff;

    display: flex;

    flex-direction: column;

    padding: 90px 0;

    box-sizing: border-box;

    align-items: center;

}



.personnel .personnel-e .title {

    text-align: center;

    color: #000000;

    font-size: 36px;

    font-weight: 500;

    margin-bottom: 62px;

}



.personnel .personnel-e .container {

    flex: 1;

    width: 1360px;

    padding: 0 20px;

    box-sizing: border-box;

    position: relative;

}



.personnel .personnel-e .container .swiper-container {

    width: 100%;

    height: 100%;

}



.personnel .personnel-e .container .swiper-slide .images {

    display: grid;

    grid-template-columns: 1fr .5147fr .5147fr;

    grid-row-gap: 20px;

    grid-column-gap: 20px;

}



.personnel .personnel-e .container .swiper-slide .images div {

    overflow: hidden;

    cursor: pointer;

}



.personnel .personnel-e .container .swiper-slide .images div img {

    width: 100%;

    display: block;

    transition: all .3s;

}



.personnel .personnel-e .container .swiper-slide .images div:hover img {

    transform: scale(1.1);

}



.personnel .personnel-e .staff-swiper-pagination span {

    width: 10px;

    height: 10px;

    opacity: 1;

    margin: 0 10px !important;

    background-color: #ffffff;

    border: solid 2px #0084ce;

}



body .personnel .personnel-e .staff-swiper-pagination .swiper-pagination-bullet-active {

    width: 10px;

    height: 10px;

    background-color: #0084ce;

    border: solid 2px #0084ce;

    border-radius: 80% 0px 55% 50% / 55% 0px 80% 50%;

    transform: rotate(-45deg);

}



.personnel .personnel-f {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.personnel .personnel-f .title {

    margin-top: 100px;

    margin-bottom: 35px;

    text-align: center;

    color: #000000;

    font-size: 36px;

    font-weight: 500;

}



.personnel .personnel-f .container {

    width: 1200px;

    display: flex;

    flex-direction: column;

}



.personnel .personnel-f .container .container-li {

    width: 100%;

    background-color: #ffffff;

    border-radius: 4px;

    padding: 0 30px;

    box-sizing: border-box;

    margin-bottom: 20px;

    display: flex;

    flex-direction: column;

    cursor: pointer;

}



.personnel .personnel-f .container .container-li .container-li-title {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 100px;

}



.personnel .personnel-f .container .container-li .container-li-title div:first-child {

    width: 43px;

}



.personnel .personnel-f .container .container-li .container-li-title div:first-child img {

    width: 100%;

}



.personnel .personnel-f .container .container-li .container-li-title p {

    margin: 0 20px;

    flex: 1;

    color: #000000;

    font-size: 16px;

    transition: all .3s;

}



body .personnel .personnel-f .container .container-li:hover .container-li-title p {

    color: #0084ce !important;

    transition: all .3s;

}



.personnel .personnel-f .container .container-li .container-li-title div:last-child {

    display: flex;

    align-items: center;

}



.personnel .personnel-f .container .container-li .container-li-title div:last-child span:first-child {

    color: #666666;

    font-size: 14px;

    transition: all .5s;

}



.personnel .personnel-f .container .container-li .container-li-title div:last-child span:last-child {

    margin: 0 10px;

    font-size: 12px;

    color: #0084ce;

    transition: all .5s;

}



.personnel .personnel-f .container .container-li .container-li-content {

    padding: 30px 0;

    width: 100%;

    box-sizing: border-box;

    border-top: 1px solid #dddddd;

    display: none;

}



.personnel .personnel-f .container .container-li .container-li-content p {

    color: #444444;

    font-size: 16px;

    line-height: 32px;

}



.personnel .personnel-f .container .container-li .container-li-content p span {

    color: #0084ce;

}



.personnel-f-page {

    width: 100%;

    height: 34px;

    margin: 50px 0;

}

.personnel .personnel-d .container{
    margin: auto\9;
}
.personnel .personnel-d .about-rotation-swiper{
    width: 420px\9;
}
.personnel .personnel-e .container .swiper-slide .images div{
    float: left\9;
    width: 324px\9;
    margin-right:5px\9;
    margin-bottom: 5px\9;
}
.personnel .personnel-e .container .swiper-slide .images div:first-child{
    width: 630px\9;
}
.personnel .personnel-e .container .swiper-slide .images div:nth-child(4){
    width: 630px\9;
}
.personnel .personnel-e .container{
    margin: auto\9;
}
.personnel .personnel-f .container{
    margin: auto\9;
}
.personnel .personnel-d .container{
    height: 100%\9;
}
.personnel .personnel-d .container .swiper-container{
    height: 100%\9;
}
.personnel .personnel-d .about-rotation-swiper{
    height:320px\9;
}
.product-direction span{
    position: absolute\9;
    top: 0\9;
    right: 0\9;
    left: 0\9;
    bottom: 0\9;
    margin: auto\9;
    width: 22px\9;
    height: 22px\9;
}
.personnel .personnel-f .container .container-li .container-li-title{
    /* overflow: auto\9; */
}
.personnel .personnel-f .container .container-li .container-li-title div:first-child{
    float: left\9;
    height: 43px\9;
    margin-top: 27px\9;
}
.personnel .personnel-f .container .container-li .container-li-title p{
    float: left\9;
    margin-top: 40px\9;
}
.personnel .personnel-f .container .container-li .container-li-title div:last-child{
    float: right\9;
    margin-top: 40px\9;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .personnel .personnel-e .container .swiper-slide .images div{
        float: left;
        width: 324px;
        margin-right:5px;
        margin-bottom: 5px;
    }
    .personnel .personnel-e .container .swiper-slide .images div:first-child{
        width: 630px;
    }
    .personnel .personnel-e .container .swiper-slide .images div:nth-child(4){
        width: 630px;
    }
    .personnel .personnel-e .container{
        margin: auto;
    }
}