.history-text, .info-banner .container-index {
    z-index: 2;
    left: 50%;
/*     top: 50%;
    transform: translate(-50%, -50%) */
    top: .8rem;
    transform: translateX(-50%);
}

.loading .dot::before, .loading .l-line::after, .qualifications .public-img::after {
    content: ''
}

.info-banner {
    width: 100%;
    height: 4.6rem;
    position: relative
}

.info-banner .img {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.info-banner .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.info-banner .img img.mb {
    display: none
}

.flex, .line, .loading, .product-tab, .tab {
    display: flex
}

.container-index .public-btn {
    margin-top: .5rem;
    background: linear-gradient(90deg, #347df8 0, #599ffd 100%);
    border-radius: 8px;
    color: #fff;
}

.info-banner .container-index {
    position: absolute;
    height: 2.76rem;
}

.info-banner .container-index .txt {
    width: 620px;
    max-width: 100%;
    font-size: 20px !important
}

@media (max-width: 767px) {
    .public-btn {
        min-width: 2.4rem;
        height: .8rem;
        border-radius: .4rem
    }
}

.flex {
    justify-content: space-between
}

.about-text-title {
    font-weight: 400;
    font-size: .36rem;
    color: #333;
    line-height: 48px
}

.about-text-content {
    font-size: 16px;
    color: #333;
    line-height: 36px;
    /* line-height: 42px; */
    margin-top: .5rem
}

.about-text-number {
    margin-top: .5rem
}

.aboutBg {
    width: 5.92rem;
    object-fit: cover;
}

.number {
    font-weight: 700;
    font-size: .32rem;
    color: #333
}

.number-text {
    font-size: 16px;
    color: #333;
    margin-top: .1rem
}

.history {
    /* margin-top: 1rem; */
    height: 7rem;
    width: 100%;
    position: relative
}

    
.history .title{
    position: absolute;
    top: 0.56rem;
    text-align: center;
    width: 100%;
    font-size: 0.36rem;
    color: #333840;
}
.history-text {
    position: absolute;
    top: 3.4rem;
    width: 100%
}

@media (max-width: 1580px) {
    .history {
        /* margin-top: 1rem; */
        margin-top: 0;
        height: 9rem;
    }
    .history-text {
        top: 4rem;

    }
}
    

.info-banner .img, .loading, .loading .dot {
    position: relative
}

.line {
    width: 100%;
    height: 2px;
    background-color: #cbdcf9;
    justify-content: center
}

.loading {
    animation-delay: 1s;
    width: 290px;
    margin-top: -17px;
    margin-left: 40px
}

.loading .dot {
    width: 14px;
    height: 14px;
    margin: .8em;
    border-radius: 50%
}

.loading .dot::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: wave 2s ease-out infinite
}

.loading .dot:nth-child(1) {
    background: #377dff
}

.loading .dot:nth-child(1)::before {
    animation-delay: .2s
}

.loading .l-line {
    position: absolute;
    top: 14px;
    left: 19px;
    width: 2px;
    height: 73px;
    z-index: 11;
    background-color: #377dff
}

.loading .l-line::after {
    width: 14px;
    height: 14px;
    background: #f8fbff;
    border-radius: 50%;
    border: 2px solid #377dff;
    display: inline-block;
    position: absolute;
    bottom: -16px;
    left: -8px
}

.loading .l-content {
    min-width: 288px;
    padding: 40px;
    background: #f8fbff;
    box-shadow: 0 2px 5px 1px rgba(210, 225, 248, .6);
    border-radius: 12px;
    position: absolute;
    top: 80px;
    left: -14px
}

.year {
    font-size: .36rem;
    color: #377dff;
    position: absolute;
    top: -65px;
    left: 8px;
    font-weight: 700
}

.loading:nth-child(even) .year {
    top: 56px
}

.loading:nth-child(even) .l-line {
    top: -61px
}

.loading:nth-child(even) .l-line::after {
    bottom: 64px
}

.loading:nth-child(even) .l-content {
    top: -148px
}

@keyframes wave {
    50%, 75% {
        transform: scale(2.5)
    }
    100%, 80% {
        opacity: 0
    }
}

@media (max-width: 1260px) {
   

    .line {
        height: 100%;
        width: 2px;
        flex-direction: column
    }

    .history-text {
        width: auto;
        /* height: 100% */
    }

    .loading {
        margin-left: -16px !important;
        width: 100px;
        min-height: 145px
    }

    .loading .l-line {
        width: 73px;
        height: 2px;
        top: 17px;
        left: -56px
    }

    .loading .l-line::after {
        bottom: -8px
    }

    .year {
        top: 0;
        left: 45px
    }

    .loading .l-content {
        top: -34px;
        left: auto;
        right: 138px
    }

    .loading:nth-child(even) .year {
        top: 0;
        left: -68px
    }

    .loading:nth-child(even) .l-line {
        top: 17px;
        left: 20px
    }

    .loading:nth-child(even) .l-line::after {
        bottom: -8px;
        left: 64px
    }

    .loading:nth-child(even) .l-content {
        top: -34px;
        left: 75px
    }
}
.loading:last-child{
    position: relative;
    top: 0;

}

@media (max-width: 1260px) {
    .history {
        /* margin-top: 1rem; */        top: 2rem;

        height: 13.4rem;
    }
    .history-text {
        top: 2rem;

    }
    .loading:last-child {
        position: relative;
        top: 24px;
    }

}
@media (max-width: 991px) {
    .loading:last-child{
        top: 94px;
       }
    }
.about-text {
    min-width: 5.4rem;
    padding: .47rem;
    background: #f1f5fc;
    border-radius: 0 12px 12px 0
}

.container-index .xctitle {
    font-weight: 700;
    font-size: .48rem;
    color: #227af3;
    text-align: unset
}

.product {
    background: #fbfcfd;
    padding: .84rem 0 .98rem
}

.info-banner .container-index .txt {
    color: #333;
    margin-top: .48rem;
    line-height: 30px;
    margin-left: 0;
    text-align: unset
}

.product-tab-menu, .tab-menu {
    font-weight: 400;
    line-height: 60px;
    cursor: pointer
}

.pcright {
    position: absolute;
    top: .3rem;
    right: 3.5rem;
    width: 6.76rem !important;
    height: 3.57rem !important
}

.info-banner.product-banner .img::before {
    height: 0% !important
}

.tab {
    height: 60px;
    background: #f1f5fc;
    justify-content: center
}

.tab-menu {
    font-size: 18px;
    color: #333;
    width: 1.65rem;
    text-align: center
}

.tab-menu:not(:last-child) {
    margin-right: 1.48rem
}

.tab-menu.active {
    background: #fff;
    border-radius: 8px 8px 0 0;
    color: #227af3;
    width: 1.65rem;
    height: 60px
}

.product-gnlb {
    padding-top: .56rem !important
}

.product-tab {
    margin: 0 auto .56rem;
    width: 3.62rem;
    height: 60px;
    background: #fff;
    border: 1px solid #dce7f3;
    justify-content: center
}

.product-tab-menu {
    font-size: 18px;
    color: #666;
    width: 1.8rem;
    text-align: center
}

.product-tab-menu.active {
    background: #227af3;
    color: #fff;
    border: 1px solid #227af3
}

.none {
    display: none
}

.container-index .thead .thead-flex {
    display: flex;
    justify-content: space-between
}

.container-index .thead .thead-flex span {
    text-align: center;
    line-height: 52px;
    color: #fff;
    font-size: 16px
}

.container-index .thead .thead-flex span:nth-child(1) {
    display: inline-block;
    width: 2rem;
    height: 52px;
    background: #539df3;
    margin-right: 5px
}

.container-index .thead .thead-flex span:nth-child(2) {
    display: inline-block;
    width: 2.4rem;
    height: 52px;
    background: #4fb4f9;
    margin-right: 3px
}

.container-index .thead .thead-flex span:nth-child(3) {
    display: inline-block;
    flex: 1;
    height: 52px;
    background: #8fb7e5
}

.qualifications-img, .tbody-flex {
    display: flex;
    justify-content: space-between
}

.tbody .tbody-flex:nth-child(odd) .tbody-model {
    background: #e7f0ff
}

.tbody .tbody-flex:nth-child(odd) .tbody-name {
    background: #e1eefb
}

.tbody .tbody-flex:nth-child(odd) .tbody-recommendation {
    background: #ecf5ff
}

.tbody .tbody-flex:nth-child(even) .tbody-model {
    background: #f5f9ff
}

.tbody .tbody-flex:nth-child(even) .tbody-name {
    background: #f3f8fd
}

.tbody .tbody-flex:nth-child(even) .tbody-recommendation {
    background: #f7fbff
}

.container-index .tbody-model {
    width: 2rem;
    margin-right: 5px
}

.container-index .tbody-name {
    width: 2.4rem;
    margin-right: 3px
}

.container-index .tbody-recommendation {
    flex: 1
}

.tbody-model, .tbody-name, .tbody-recommendation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

.tbody-model span, .tbody-name span, .tbody-recommendation span {
    display: inline-block;
    padding: 15px 10px;
    font-size: 14px;
    color: #333;
    line-height: 22px
}

.about-title {
    font-size: .36rem;
    color: #333840;
    margin-bottom: .86rem;
    text-align: center
}

.qualifications {
    display: flex;
    justify-content: start;
    margin-bottom: 1.85rem;
    flex-wrap: wrap
}

.qualifications .public-img {
    cursor: pointer;
    width: 2.05rem;
    height: 2.84rem;
    margin: .18rem .2rem 0
}

.qualifications .public-img span {
    width: .46rem;
    height: .46rem;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    /* background: linear-gradient(to right, #0f59ee, #007fff); */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .3rem;
    font-family: system-ui;
    opacity: 0;
    transition: all ease-out .3s
}

.qualifications .public-img::after {
    width: 100%;
    height: 100%;
    background: rgba(2, 30, 75, .49);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    opacity: 0;
    transition: all ease-out .3s
}

.qualifications .public-img:hover span, .qualifications .public-img:hover::after {
    opacity: 1
}

.qualifications .public-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.qualifications .txt {
    margin: .16rem 0 .2rem;
    font-size: 14px;
    color: #333
}

.qualifications-img {
    width: 2.43rem;
    height: 3.47rem;
    flex-direction: column;
    margin: 0 auto .75rem;
    background: #fff;
    box-shadow: 0 4px 6px 0 rgba(173, 176, 179, .28);
    border-radius: 8px;}

.qualifications-flex {
    width: 25%
}

.qualifications-img:nth-child(4n) {
    margin-right: 0
}

.qualifications-img:hover {
    box-shadow: 0 6px 6px 6px #dfe8f2;
    transition: all ease-out .3s
}

.about-content {
    margin-bottom: 1.85rem
}

#mapContainer {
    margin: .31rem auto 0;
    width: 100%;
    height: 7.52rem
}

.contact #mapContainer {
    margin: .31rem auto 0;
    width: 5.33rem;
    height: 3.05rem
}

#mapContainer .content-window-card {
    width: 3rem !important;
    position: relative;
    box-shadow: none;
    bottom: 0;
    left: 0;
    padding: 0
}

#mapContainer .amap-info-contentContainer {
    border: 1px solid silver;
    width: 3rem;
    background: #fff
}

#mapContainer .custom-info {
    width: 3rem
}

#mapContainer div.info-top {
    width: 100%;
    position: relative;
    height: 10px
}

#mapContainer div.info-top div {
    display: inline-block;
    color: #333;
    font-size: .14rem;
    font-weight: 700;
    line-height: .16rem;
    padding: 0 .05rem
}

#mapContainer div.info-top img {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    transition-duration: .25s
}

#mapContainer div.info-top img:hover {
    box-shadow: 0 0 5px #000
}

#mapContainer div.info-middle {
    width: 2.86rem;
    font-size: .14rem;
    padding: .1rem;
    line-height: .22rem
}

#mapContainer div.info-middle div {
    padding-left: .333rem;
    padding-bottom: 7px;
}

#mapContainer div.info-middle div span {
    margin-left: 0;
    display: inline-block;
    width: .7rem;
    font-size: .14rem
}

#mapContainer div.info-middle div p {
    margin-left: .7rem;
    height: auto
}

#mapContainer div.info-middle div:nth-child(1) {
    background: url(../../resources/images/about/location.png) 0 6px no-repeat;
    background-size: .22rem .2rem
}

#mapContainer div.info-middle div.phone {
    background: url(../../resources/images/about/phone.png) 0 6px no-repeat;
    background-size: .21rem .24rem
}

#mapContainer div.info-middle div:last-child {
    background: url(../../resources/images/about/email.png) 0 4px no-repeat;
    background-size: .2rem .14rem
}

#mapContainer div.info-bottom {
    height: 0;
    width: 100%;
    clear: both;
    text-align: center
}

#mapContainer div.info-bottom img {
    position: relative;
    z-index: 104
}

#mapContainer span {
    margin-left: .03rem;
    font-size: .06rem
}

#mapContainer .info-middle img {
    float: left;
    margin-right: .03rem
}

.joinUs {
    margin-left: .26rem;
    display: flex;
    justify-content: space-around;
    margin-bottom: 1.85rem
}

.joinUs .joinUs-left {
    min-width: 2.1rem;
    width: 2.1rem;
    height: 4.92rem;
    background: #fff;
    box-shadow: 0 4px 6px 0 rgba(173, 176, 179, .28)
}

.joinUs .joinUs-right {
    flex: 1;
    background: #fff;
    box-shadow: 0 4px 6px 0 rgba(173, 176, 179, .28);
    display: flex;
    margin-left: .3rem;
    margin-bottom: .4rem;
    padding: .53rem .44rem .58rem .42rem
}

.joinUs .joinUs-left ul {
    padding: .51rem 0 0 .31rem
}

.joinUs .joinUs-left ul li {
    cursor: pointer;
    line-height: .6rem
}

.joinUs .joinUs-left ul li.active a {
    color: #227af3 !important;
}

.job-name {
    font-weight: 700;
    font-size: 20px;
    color: #333
}

.job-duty div p, .job-time {
    font-weight: 400;
    color: #333
}

.job-time {
    font-size: 14px;
    margin-top: .24rem
}

.job-tag {
    margin: .23rem .23rem 0 0
}

.job-tag span {
    display: inline-block;
    width: 86px;
    height: 32px;
    background: #fff;
    border-radius: 2px;
    border: 1px solid #b5b5b5;
    font-size: 14px;
    text-align: center;
    line-height: 32px;
    margin-bottom: .14rem;
    margin-right: .14rem
}

.joinUs-right-left {
    width: 7rem
}

.job-duty {
    margin-left: .6rem
}

.job-duty span {
    font-size: 18px;
    color: #333
}

.job-duty div p {
    font-size: 14px;
    line-height: 36px
}

.job-duty div {
    margin-top: .27rem
}

@media (max-width: 1580px) {
    .qualifications-img:nth-child(4n) {
        margin-right: .68rem
    }

    .container-index {
        width: 90%
    }

    .loading {
        margin-left: 0
    }
}

@media (max-width: 767px) {
    .joinUs .joinUs-left, .joinUs-right-left {
        width: 100%;
        height: auto
    }

    .about-text-content, .info-banner .container-index .txt, .number-text, .product .container-index .list ul li .tbox .t2, .product-tab-menu, .public-btn, .tab-menu {
        font-size: 14px
    }

    .joinUs-left {
        width: 100%;
        display: flex;
        margin-bottom: 20px
    }

    .joinUs .joinUs-left ul {
        display: flex;
        padding: .05rem .3rem;
        flex-wrap: wrap
    }

    .joinUs .joinUs-left ul li {
        margin-right: .3rem
    }

    .joinUs-right {
        flex-direction: column
    }

    .job-duty, .joinUs .joinUs-right {
        margin-left: 0
    }

    .joinUs {
        display: unset
    }

    .qualifications-flex {
        width: 50%
    }

    .loading:nth-child(even) .year, .year {
        top: 6px
    }

    .history {
        /* height: 1200px */
       height: 1377px;
    }

    .loading .l-content {
        min-width: auto
    }

    .loading {
        min-height: 245px
    }

    .aboutBg {
        display: none
    }

    .product-tab {
        width: 80%
    }

    .product .container-index .list ul li .public-img {
        width: 100% !important
    }

    .info-banner .img img.pc {
        display: block
    }

    .container-index {
        width: 90%;
        line-height: .3rem !important
    }

    .tab-menu:not(:last-child) {
        margin-right: 0 !important
    }

    .product .container-index .list ul li .tbox {
        width: 100%;
        margin-left: 0;
        margin-top: .5rem
    }

    .info-banner .container-index .txt {
        line-height: 25px
    }
}

@media (max-width: 1580px) {
    .info-banner .container-index .txt {
        font-size: 18px !important
    }
}

@media (max-width: 1260px) {
    .info-banner .container-index .txt {
        font-size: 16px !important
    }
}

@media (max-width: 991px) {
    .info-banner .container-index .txt {
        font-size: 14px !important
    }
}