@import 'reset.css';
@import 'font-awesome.css';
@import 'fonts.css';
@import 'animate.min.css';


html,
body {
    font-family: SourceHanSansCN-Light;
}

img {
    max-width: 100%;
    display: block;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;

}

.w735 {
    width: 735px;
    margin: 0 auto;
}

.w985 {
    width: 985px;
}

.w1080 {
    width: 1080px;
    margin: 0 auto;
}

.w1200 {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}

.w1280 {
    width: 1280px;
    margin: 0 auto;
}

.w1300 {
    width: 1300px;
    margin: 0 auto;
}

.w1320 {
    width: 1320px;
    margin: 0 auto;
}

.w1400 {
    width: 1440px;
    margin: 0 auto;
}

.w1600 {
    width: 1600px;
    margin: 0 auto;
}

.w1800 {
    width: 1800px;
    margin: 0 auto;
}

html,
body {
    font-family: "SourceHanSerifCN-Light", Helvetica, sans-serif
}

.flex {
    display: flex;
}

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

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

.flex-arround {
    display: flex;
    justify-content: space-around;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.row(@number) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal !important;
    -webkit-line-clamp: @number;
    -webkit-box-orient: vertical;
}

.cartoon(@time) {
    transition: all @time ease-in-out;
}

.font(@fontsize, @linehight, @color) {
    font-size: @fontsize;
    line-height: @linehight;
    color: @color;
}

.pos-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes ad_width {

    from {

        width: 0
    }

    to {

        width: 100%
    }

}

@keyframes width2 {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@blue: #2e388d;

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    align-items: center;
    justify-content: flex-end;
    padding-top: 60px;

    .logo {
        display: block;
        width: 160px;
        height: 160px;
        position: fixed;
        top: 0;
        left: 0;
        background: @blue;
    }

    .right {
        margin-right: 4.95%;
        background: transparent;

        .lang {
            width: 40px;
            height: 40px;
            display: block;
            background: @blue;
            border-radius: 50%;
            text-align: center;
            .font(18px, 40px, #fff);
        }

        .pcNav {
            align-items: center;

            li {
                margin-right: 50px;
                position: relative;

                a {
                    .font(18px, 18px, #FFF);
                }

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -17px;
                    width: 0;
                    height: 1px;
                    left: 0;
                    background: @blue;
                    .cartoon(.5s);
                }

                &:hover {
                    a {
                        color: @blue;
                    }

                    &::after {
                        width: 100%;
                    }
                }

                &.on {
                    a {
                        color: @blue;
                    }

                    &::after {
                        width: 100%;
                    }
                }
            }
        }
    }
}

header.fixed {
    background: #fff;

    .right {
        .pcNav {
            li a {
                color: #a4a4a4;

                &:hover {
                    color: @blue;
                }
            }
        }
    }
}
header.header-fixed {
    background: #fff;
    height: 160px;
    padding-top: 0;
    .right {
        .pcNav {
            li a {
                color: #a4a4a4 !important;

                &:hover {
                    color: @blue !important;
                    &::after {
                        background: @blue !important;
                    }
                }
            }
            li.on {
                a {
                    color: @blue !important;
                }
                &::after {
                    background: @blue !important;
                }
            }
        }
    }
}


header.innerStyle {
    .right .pcNav li {
        a {
            color: @blue;
        }
    }
}

header.innerStyle2 {
    .right .pcNav li {
        &::after {
            background: #fff;
        }
        &:hover {
            a {
                color: #fff;
            }
        }
        &.on {
            a {
                color: #fff;
            }
        }
    }
}

footer {
    height: 165px;
    background: @blue;
    width: 100%;

    .item {
        margin-top: 32px;

        .title {
            font-family: SourceHanSansCN-Bold;
            border-bottom: 1px solid rgba(255, 255, 255, .65);
            .font(13px, 20px, rgba(255, 255, 255, .65));
            margin-bottom: 20px;
        }

        .content {
            letter-spacing: 1px;
            .font(14px, 16px, rgba(255, 255, 255, .65));

            p:first-child {
                font-family: SourceHanSansCN-Regular;
                .font(20px, 23px, rgba(255, 255, 255, .65));
            }
        }
    
        .content2 {
            align-items: flex-end;

            .tip {
                margin-left: 15px;
                font-family: SourceHanSansCN-Normal;
                .font(14px, 25px, rgba(255, 255, 255, .65));
            }
        }
        .content3 {
            .share a {
                display: block;
                opacity: .65;
                .cartoon(.5s);
                &:not(:last-child) {
                    margin-right: 8px;
                }
                &:hover {
                    opacity: 1;
                }
            }
            .link {
                display: flex;
                margin-top: 12px;
                position: relative;

                .link-box {
                    width: 110px;
                    height: 35px;
                    background-color: rgba(255, 255, 255, .14);
                    font-size: 12px;
                    line-height: 35px;
                    letter-spacing: 1px;
                    color: rgba(255, 255, 255, .65);
                    text-align: center;
                }

                .img-box {
                    width: 35px;
                    height: 35px;
                    background-color: rgba(255, 255, 255, .14);
                    position: relative;
                    margin-left: 1px;
                    .tri {
                        width: 10px;
                        height: 6px;
                        background: rgba(255, 255, 255, .65);
                        clip-path: polygon(50% 0,0 100%,100% 100%);
                    }
                }

                .link-hide {
                    position: absolute;
                    bottom: 48px;
                    left: 0;
                    width: 163px;
                    background: #FFF;
                    z-index: 999;
                    display: none;

                    a {
                        display: block;
                        color: #7c7c7c;
                        font-size: 12px;
                        padding: 0 10px;
                        line-height: 34px;
                    }
                }
            }
        }
        .content4 {
            letter-spacing: 1px;
            .font(14px, 16px, rgba(255, 255, 255, .65));
        }

        &:nth-child(1) {
            width: 21.875%;
        }

        &:nth-child(2) {
            width: 12.5%;
        }

        &:nth-child(3) {
            width: 11.56%;
        }

        &:nth-child(4) {
            width: 19.875%;
        }
    }
}


.font14 {
    letter-spacing: 1px;
    .font(14px, 30px, #000);
}

.inner-banner {
    position: relative;
    left: 0;

    img {
        display: block;
        width: 100%;
    }

    .textBox {
        position: absolute;
        width: 100%;

        .cn-title {
            .font(48px, 48px, @blue);
            letter-spacing: 2px;
        }

        .en-title {
            margin-top: 25px;
            letter-spacing: 1px;
            animation-delay: .5s;
            .font(24px, 24px, @blue);
        }
    }
}

.inner-title {
    .cn-title {
        font-family: SourceHanSansCN-Bold;
        letter-spacing: 1px;
        .font(30px, 30px, @blue);
        margin-bottom: 20px;
    }

    .en-title {
        letter-spacing: 0;
        .font(49px, 40px, rgba(0, 0, 0, .1));
    }

    .line {
        margin-top: 20px;
        width: 30px;
        height: 3px;
        background: @blue;
    }
}

.titleCenter {
    text-align: center;

    .line {
        margin: 20px auto 0;
    }
}

.subNavBox {
    height: 80px;
    background: #fff;

    .w1600 {
        align-items: center;
    }

    .subNav {
        li {
            position: relative;

            a {
                letter-spacing: 1px;
                text-align: center;
                .font(18px, 80px, #464646);
                .cartoon(.5s);
            }

            &:not(:last-child) {
                margin-right: 55px;
            }

            &::after {
                content: '';
                width: 0;
                height: 2px;
                background: @blue;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                .cartoon(.5s);
            }

            &:hover,
            &.on {
                a {
                    color: @blue;
                }

                &::after {
                    width: 100%;
                }
            }
        }
    }

    .crumbs {
        a {
            .font(18px, 18px, #464646);
            letter-spacing: 1px;
        }
    }
}

.index {

    .w1680 {
        width: 87.5%;
        box-sizing: border-box;
        height: 100%;
        margin-left: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .indexTitle {
        text-align: left;

        .en-title {
            font-family: SourceHanSansCN-Bold;
            letter-spacing: 3px;
            .font(68px, 68px, #000);
        }

        .cn-title {
            letter-spacing: 1px;
            margin-top: 10px;
            .font(24px, 24px, #000);
        }
    }

    .more {
        width: 120px;
        height: 45px;
        text-align: center;
        background: @blue;
        .font(14px, 45px, #fff);
    }

    .section1 {
        .index-swiper {
            width: 100%;
            height: 100%;

            img {
                display: block;
                width: 100%;
            }
        }
    }

    .section2 {
        .indexTitle {
            text-align: left;
        }

        .top {
            box-sizing: border-box;
            padding-left: 7.44%;

            .box {
                align-items: flex-end;

                .more {
                    margin-right: 19.94%;
                }
            }

            .textBox {
                margin-top: 2.67%;
                width: 50%;
            }

            .link-box {
                justify-content: right;
                box-sizing: border-box;
                padding-right: 11.01%;

                a {
                    width: 35px;
                    height: 35px;
                    position: relative;

                    img {
                        .cartoon(.5s);
                    }

                    .select {
                        opacity: 0;
                    }

                }

                a:not(:last-child) {
                    margin-right: 60px;
                }

                a:hover {
                    img {
                        opacity: 0;
                    }

                    .select {
                        opacity: 1;
                    }
                }
            }
        }

        .bot {
            margin-top: 2.985%;

            .blockBox {
                width: 10.89%;
                align-self: stretch;
                background: @blue;
            }
        }
    }

    .section3 {
        .box {
            width: 100%;
            height: 81vh;
            background: #f7f7f7;
            position: relative;

            .left {
                width: 29.46%;
                height: 100%;
                background: @blue;
                box-sizing: border-box;
                padding: 4.76% 0 0 4.167%;
                position: relative;

                .indexTitle {

                    .en-title,
                    .cn-title {
                        color: #fff;
                    }
                }

                .leftSwiper {
                    position: absolute;
                    width: 165%;

                    .textBox {
                        margin-top: -50px;

                        a {
                            letter-spacing: 1px;
                            .font(14px, 14px, #fff);
                        }

                        .line {
                            width: 40px;
                            height: 2px;
                            background: #fff;
                            opacity: .67;
                            margin: 20px 0 15px;
                        }

                        .product-title {
                            letter-spacing: 1px;
                            .font(25px, 25px, #fff);
                        }
                    }
                }
            }

            .right {
                width: 70.54%;
                flex-grow: 1;

                .layout {
                    width: 60%;
                    margin-left: auto;
                    position: relative;
                }

                .productTitle {
                    margin: 11% 20% 0 0;

                    .title {
                        letter-spacing: 2px;
                        .font(48px, 48px, #000);
                    }

                    .font14 {
                        margin-top: 30px;
                    }
                }

                .swiperBtn {
                    position: relative;
                    display: flex;
                    margin: 30px 20% 50px 0;
                    justify-content: right;

                    div {
                        width: 70px;
                        height: 60px;
                        background: @blue;
                        text-align: center;
                        cursor: pointer;
                        .font(39px, 60px, #fff);

                        &:not(:last-child) {
                            margin-right: 1px;
                        }
                    }
                }

                .rightSwiper {
                    width: 100%;

                    .img-box {
                        height: 245px;
                        background: #fff;
                        position: relative;

                        img {
                            display: block;
                            max-width: 90%;
                            max-height: 80%;
                        }
                    }
                }

                .swiper-pagination {
                    color: #828282;
                    width: auto;
                    letter-spacing: 1px;
                    left: -12%;
                    bottom: 0;
                    .font(14px, 14px, #828282);

                    .active {
                        .font(30px, 30px, @blue);
                    }

                }
            }

        }
    }

    .section4 {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .w1300 {
            margin-bottom: 11vh;
            position: relative;
        }

        .left {
            width: 48.84%;

            img {
                margin-top: 7.87%;
                display: block;
                width: 100%;
            }
        }

        .right {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 53.46%;
            align-items: stretch;
            flex-direction: column;
            z-index: 20;

            li {
                padding-top: 40px;
                .cartoon(.5s);

                a {
                    height: 100%;
                    align-items: center;
                }

                .newsLeft {
                    width: 45px;
                    font-family: SourceHanSansCN-Regular;
                    letter-spacing: 1px;
                    margin-right: 30px;
                    visibility: hidden;
                    .cartoon(.5s);
                    .font(12px, 12px, @blue);

                    .line {
                        width: 20px;
                        height: 11px;
                        margin: 10px 0 10px 6px;
                        background: linear-gradient(to bottom right, transparent 0, transparent calc(50% - 1px), #2e388d 50%, transparent calc(50% + 1px), transparent 100%);
                    }

                    h6 span {
                        .font(27px, 27px, @blue);
                    }

                }

                .newsRight {
                    width: 465px;

                    .titleBox {
                        .title {
                            font-family: SourceHanSansCN-Regular;
                            .font(20px, 20px, #878787);
                            .row(1);
                            .cartoon(.5s);
                        }

                        .newsmore {
                            display: none;
                            letter-spacing: 1px;
                            .font(14px, 14px, @blue);
                        }

                        .time {
                            font-family: SourceHanSansCN-Regular;
                            letter-spacing: 1px;
                            .font(16px, 16px, #878787);
                        }
                    }

                    .con {
                        letter-spacing: 1px;
                        margin-top: 20px;
                        text-align: justify;
                        padding-bottom: 25px;
                        border-bottom: 1px solid #878787;
                        .row(2);
                        .font(14px, 20px, #878787);
                    }
                }

                &:hover {
                    box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.05);
                    background: #fff;
                    height: 165px;
                    padding-top: 0;

                    .newsLeft {
                        visibility: visible;
                    }

                    .newsRight {
                        .title {
                            color: @blue;
                        }

                        .time {
                            display: none;
                        }

                        .newsmore {
                            display: block;
                        }

                        .con {
                            border-bottom: 1px solid #fff;
                        }
                    }
                }

            }
        }
    }
}

.about {
    .inner-banner {
        text-align: right;

        .textBox {
            top: 28.41%;
        }
    }
}

.aboutUs {
    .aboutUs-box {
        background: url(../images/aboutus-bg.jpg) no-repeat 100% 100%;
        padding: 5.833% 0 7.03125%;

        .top {

            .inner-title {
                text-align: right;

                .line {
                    margin-left: auto;
                }
            }

            .content {
                margin-top: 45px;
                margin-left: 4.6875%;
                width: 62.5%;
                letter-spacing: 1px;
                .font(18px, 30px, #464646);
            }
        }

        .swiperBox {
            margin-top: 6.75%;

            .swiper {
                width: 84.0625%;
                margin: 0;

                img {
                    display: block;
                    width: 100%;
                }
            }

            .right {
                width: auto;
                flex-grow: 1;
                align-self: stretch;
                background: @blue;

                h6 {
                    margin-top: 31%;
                    text-align: center;
                    font-family: SourceHanSansCN-Regular;
                    letter-spacing: 1px;
                    .font(18px, 18px, #f4f4f4);
                }

                .cir {
                    width: 50px;
                    height: 50px;
                    background: #fff;
                    border-radius: 50%;
                    position: relative;
                    align-items: center;
                    margin: 39% auto 0;

                    .leftBtn {
                        width: 8px;
                        height: 14px;
                        clip-path: polygon(0 50%, 100% 100%, 100% 0);
                        background: @blue;
                        margin-right: 7px;
                    }

                    .rightBtn {
                        width: 8px;
                        height: 14px;
                        clip-path: polygon(0 0, 100% 50%, 0 100%);
                        background: @blue;
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
}

.culture {
    .inner-banner {
        .textBox {
            .en-title,.cn-title {
                color: #fff;
            }
        }
    }
    .cultureBox {
        background: url(../images/culture-bg.jpg) no-repeat top center;
        padding: 3.90625% 0 10.41667%;

        ul {
            margin-top: 4.6875%;

            li {
                position: relative;

                img {
                    display: block;
                    width: 100%;
                }

                .text {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    box-sizing: border-box;
                    padding: 0 26% 0 13%;
                    flex-direction: column;
                    justify-content: center;
                    overflow: hidden;
                    .cartoon(.1s);

                    .title {
                        letter-spacing: 1px;
                        .font(30px, 30px, #fff);
                    }

                    .line {
                        width: 30px;
                        height: 3px;
                        background: #fff;
                        margin: 25px 0;
                        opacity: 0;
                        .cartoon(.5s);
                    }

                    .content {
                        letter-spacing: 1px;
                        .font(16px, 30px, #fff);
                    }

                    .anim {
                        position: relative;
                        z-index: 3;
                        top: 50%;
                        .cartoon(.5s);
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 0;
                        width: 100%;
                        background: rgba(46, 56, 141, .4);
                        .cartoon(.5s);
                        z-index: 2;
                    }

                    &:hover {
                        &::after {
                            height: 100%;
                        }

                        .anim {
                            top: 0;
                        }

                        .line {
                            opacity: 1;
                        }
                    }
                }
            }
        }

    }
}

.honor {
    .honorBox {
        background: url(../images/honor-bg.jpg) no-repeat top center;
        padding: 4.167% 0 5.729%;

        .swiperBox {
            align-items: center;
            margin-top: 40px;

            .swiper {
                margin: 0;
                background: #fff;
            }

            .leftSwiper,
            .rightSwiper {
                width: 345px;
                height: 495px;

                img {
                    position: absolute;
                    top: 50%;
                }
            }

            .leftSwiper img {
                left: 0;
                transform: translate(-50%, -50%);
            }

            .rightSwiper img {
                right: 0;
                transform: translate(50%, -50%);
            }

            .centerSwiper {
                width: 900px;
                height: 600px;
            }
        }
    }
}

.network {
    .networkBox {
        padding: 5.729% 0 4.427%;
        background: url(../images/network-bg.jpg) no-repeat top center;
        .inner-title {
            .line {
                margin-top: 4.0625%;
            }
        }

        img {
            display: block;
            max-width: 100%;
            margin: -2% auto;
        }


    }
}

.product {
    .inner-banner {
        .textBox {
            top: 50%;

            .cn-title,
            .en-title {
                color: #fff;
            }
        }
    }

    .productBox {
        padding: 3.90625% 0 4.427%;
        background: url(../images/product-bg.jpg) no-repeat top center;
        .productClass {
            li {
                width: 120px;
                height: 35px;
                background: #fff;
                letter-spacing: 1px;
                text-align: center;
                cursor: pointer;
                .font(18px, 35px, #464646);
                .cartoon(.5s);

                &:hover {
                    background: @blue;
                    color: #fff;
                }

                &:not(:last-child) {
                    margin-right: 15px;
                }
            }
        }

        .productList {
            flex-wrap: wrap;
            margin-top: 5.625%;

            li {
                width: 23.75%;
                margin-bottom: 6.875%;

                .img-box {
                    height: 265px;
                    background: #fff;
                    position: relative;
                    overflow: hidden;
                    justify-content: center;
                    align-items: center;

                    img {
                        display: block;
                        max-width: 90%;
                        max-height: 80%;
                        .cartoon(.5s);
                    }
                }

                .text-box {
                    width: 100%;
                    height: 95px;
                    background: #e5e5e5;
                    box-sizing: border-box;
                    padding: 0 10%;
                    align-items: center;
                    .cartoon(.5s);

                    .productName {
                        font-family: SourceHanSansCN-Regular;
                        letter-spacing: 1px;
                        .font(17px, 25px, #464646);
                        .cartoon(.5s);
                    }
                }

                &:hover {
                    .img-box {
                        img {
                            transform: scale(1.1);
                        }
                    }

                    .text-box {
                        background: @blue;

                        .productName {
                            color: #fff;
                        }

                        .icon-box {
                            img {
                                display: none;
                            }

                            .hide {
                                display: block;
                            }
                        }
                    }

                }

                /* 如果最后一行是3个元素 */
                &:last-child:nth-child(4n - 1) {
                    margin-right: calc(24% + 4% / 3);
                }

                /* 如果最后一行是2个元素 */
                &:last-child:nth-child(4n - 2) {
                    margin-right: calc(48% + 8% / 3);
                }
            }

        }

        .more {
            display: block;
            width: 140px;
            height: 35px;
            background: @blue;
            letter-spacing: 1px;
            text-align: center;
            .font(14px, 35px, #fff);
            margin: -2.1% auto 0;

        }
    }
}

.news {
    .inner-banner {
        text-align: right;

        .textBox {
            top: 28.41%;
        }
    }

    .newsBox {
        background: #f4f4f4;
        padding: 5.989% 0 5.208%;

        .newsList {
            margin: 0 2.1875%;

            li {
                .cartoon(.5s);

                a {
                    display: flex;

                }

                .leftImg {
                    flex-shrink: 0;
                    width: 30.72%;
                }

                .rightContent {
                    width: auto;
                    flex-grow: 1;
                    align-self: stretch;
                    background: #fff;
                    flex-direction: column;
                    justify-content: center;
                    box-sizing: border-box;
                    padding: 0 5.4% 0 2.7%;

                    .mtop25 {
                        margin-top: 25px;
                    }

                    .newsTime {
                        color: #464646;
                        .cartoon(.5s);

                        .day {
                            font-size: 46px;
                            line-height: 46px;
                            letter-spacing: 3px;
                            .cartoon(.5s);
                        }

                        .timebox {
                            flex-direction: column;
                            font-family: SourceHanSansCN-Regular;
                            letter-spacing: 1px;
                            font-size: 16px;
                            margin-left: 15px;
                            .cartoon(.5s);
                        }
                    }

                    .newsTitle {
                        font-family: SourceHanSansCN-Regular;
                        letter-spacing: 2px;
                        .font(26px, 26px, #464646);
                        .row(1);
                        .cartoon(.5s);
                    }

                    .newsCon {
                        letter-spacing: 1px;
                        min-height: 60px;
                        .row(2);
                        .font(16px, 30px, #464646);
                    }

                    .more {
                        width: 110px;
                        height: 30px;
                        border: 1px solid #b5b5b5;
                        text-align: center;
                        letter-spacing: 1px;
                        position: relative;
                        .font(14px, 30px, #464646);
                        .cartoon(.5s);

                        span {
                            position: relative;
                            z-index: 2;
                        }

                        &::after {
                            content: "";
                            width: 0;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            background: @blue;
                            z-index: 1;
                            .cartoon(.5s);
                        }
                    }
                }

                &:not(:last-child) {
                    margin-bottom: 5%;
                }

                &:hover {
                    box-shadow: 1px 4px 29px 0px rgba(8, 1, 3, 0.16);

                    .newsTime,
                    .newsTitle {
                        color: @blue;
                    }

                    .more {
                        color: #fff;

                        &::after {
                            width: 100%;

                        }
                    }
                }
            }
        }

        .pageList {
            margin-top: 5%;

            li {
                width: 35px;
                text-align: center;
                height: 35px;
                background: #fff;
                .cartoon(.5s);

                a {
                    display: block;
                    .font(14px, 35px, #474747);
                    .cartoon(.5s);
                }

                &:not(:last-child) {
                    margin-right: 8px;
                }

                &:hover {
                    background: @blue;

                    a {
                        color: #fff;
                    }
                }

                &.prevBtn,
                &.nextBtn {
                    width: 70px;
                }

                .page.on {
                    background: @blue;

                    a {
                        color: #fff;
                    }
                }
            }
        }
    }

    .newsViewBox {
        .layout {
            width: 995px;
            margin: 0 auto;

            .title {
                font-family: SourceHanSansCN-Regular;
                letter-spacing: -1px;
                padding-bottom: 44px;
                border-bottom: 1px solid #e5e5e5;
                text-align: center;
                .font(30px, 30px, #474747);
            }

            .newsData {
                margin-top: 40px;
                text-align: center;
                .font(14px, 28px, #474747);

                &:not(:last-child) {
                    margin-right: 30px;
                }
            }

            .content {
                margin-top: 75px;
                letter-spacing: 1px;
                .font(16px, 30px, #464646);
            }
        }
    }
}

.join {
    .inner-banner {
        text-align: left;

        .textBox {
            top: 28.41%;

            .cn-title,
            .en-title {
                color: #fff;
            }
        }
    }

    .joinBox {
        padding: 6.51% 0 5.729%;
        background: #f4f4f4;

        .cir {
            width: 35px;
            height: 35px;
            background: #bfbfbf;
            border-radius: 50%;
        }

        .joinList {
            width: 100%;

        }

        .joinHead {
            height: 100px;
            background: @blue;
            letter-spacing: 1px;
            box-sizing: border-box;
            padding: 0 3.125% 0 6.25%;
            .font(18px, 100px, #fff);

            li {
                width: 25%;
            }

            li:nth-child(5) {
                width: 35px;
                opacity: 0;
            }
        }

        .joinBody {

            background: #eeeeee;
            align-items: center;

            li {
                position: relative;
                border-bottom: 1px solid #d2d2d2;
                .font(18px, 105px, #464646);

                .top {
                    padding: 0 3.125% 0 6.25%;
                    height: 105px;

                    .iconBox {
                        position: relative;
                        width: 35px;
                    }

                    .item {
                        width: 25%;
                    }

                    .item:nth-child(5) {
                        width: 35px;
                        opacity: 0;
                    }
                }

                .bot {
                    width: 100%;
                    display: none;
                    background: #fff;
                    padding: 4.0625% 3.125% 5.3125% 6.25%;

                    .content {
                        width: 47.5%;
                        letter-spacing: 1px;
                        .font(18px, 30px, #464646);

                        h6 {
                            font-family: SourceHanSansCN-Bold;
                        }
                    }
                }
            }
        }
    }
}

.case {
    .inner-banner {
        .textBox {
            top: 45%;

            .cn-title,
            .en-title {
                color: #fff;
            }
        }

    }

    .caseBox {
        background: url(../images/case-bg.jpg) no-repeat top center;
        padding: 6.77% 0 10.15625%;
        position: relative;

        .left {
            .inner-title {
                box-sizing: border-box;
                padding-left: 3.90625%;
            }

            .box {
                margin-top: 60px;
                width: 50%;
                background: #fff;
                box-sizing: border-box;
                padding: 3.75% 8.125% 3.75% 5%;
                position: relative;
                z-index: 20;

                .caseList {
                    flex-wrap: wrap;

                    li {
                        width: 110px;
                        height: 35px;
                        background: #f4f4f4;
                        letter-spacing: 1px;
                        text-align: center;
                        cursor: pointer;
                        .font(18px, 35px, #464646);
                        .cartoon(.5s);

                        &:hover {
                            background: @blue;
                            color: #fff;
                        }

                        &.on {
                            background: @blue;
                            color: #fff;
                        }

                        &:not(:last-child) {
                            margin-right: 8px;
                        }
                    }
                }

                .contentBox {
                    margin-top: 60px;

                    .content {
                        display: none;
                        letter-spacing: 1px;
                        .font(16px, 30px, #464646);

                        &.on {
                            display: block;
                        }
                    }
                }
            }
        }

        .right {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 53.9%;
        }
    }

    .attention {
        background: url(../images/case-bg.jpg) no-repeat top center;
        position: relative;
        padding: 6.51% 0 8.854%;

        .layout {
            justify-content: flex-end;
            align-items: flex-end;
        }

        .left {
            width: 350px;

            .attention-ul {
                margin-top: 55px;

                li {
                    width: 100%;
                    height: 85px;
                    background: #fff;
                    align-items: center;
                    box-sizing: border-box;
                    padding: 0 14.28%;
                    cursor: pointer;

                    .icon-box {
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        background: #bfbfbf;
                        text-align: center;
                        margin-right: 7.14%;
                        .font(18px, 35px, #fff);
                    }

                    p {
                        letter-spacing: 1px;
                        .row(1);
                        .font(18px, 18px, #464646);
                    }

                    &:not(:last-child) {
                        margin-bottom: 15px;
                    }

                    &.on {
                        .icon-box {
                            background: @blue;
                        }

                        p {
                            color: @blue;
                        }
                    }

                    &:hover {
                        .icon-box {
                            background: @blue;
                        }

                        p {
                            color: @blue;
                        }
                    }
                }
            }
        }

        .right {
            width: 71%;
            margin-left: 4%;
            height: 430px;

            .content {
                width: auto;
                flex-grow: 1;
                align-self: stretch;
                background: #fff;
                box-sizing: border-box;
                align-items: center;

                .con {
                    width: 80.5%;
                    letter-spacing: 1px;
                    .font(16px, 30px, #464646);
                }
            }

            .imgbox {
                width: 23.42%;
                overflow: hidden;

                img {
                    display: block;
                    width: auto;
                    height: 100%;
                }
            }
        }
    }
}

.productXq {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .9);
    z-index: 99999;
    display: none;
    .content {
        width: 79%;
        height: 73vh;
        background-color: #fff;
        background-image: url(../images/productxq-left.jpg);
        background-repeat: no-repeat;
        flex-direction: column;
        .close {
            width: 30px;
            margin-left: auto;
            margin-bottom: 30px;
            margin-right: 4%;
            img {
                display: block;
                width: 100%;
            }
        }

        .xqBox {
            align-items: center;

            .left {
                width: 50%;

                img {
                    display: block;
                    width: 100%;
                }
            }

            .right {
                margin-left: 3.98%;
                width: 37.2%;
                height: 520px;
                overflow: hidden;

                .layout {
                    width: 87%;

                    .title {
                        font-family: SourceHanSansCN-Regular;
                        letter-spacing: 1px;
                        padding-bottom: 25px;
                        border-bottom: 1px solid #d2d2d2;
                        .font(24px, 24px, @blue);
                    }

                    .item {
                        margin-top: 35px;
                        border-bottom: 1px solid #d2d2d2;

                        .pro-title {
                            letter-spacing: 1px;
                            .font(24px, 24px, @blue);
                        }

                        .con {
                            margin-top: 20px;
                            padding-bottom: 50px;
                            letter-spacing: 1px;
                            .font(14px, 28px, #000);
                        }
                    }
                }
            }
        }

       
    }

    .btn {
        position: absolute;
        top: 50%;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0px 1px 10px 0px rgba(8, 1, 3, 0.09);
        background: #fff;
        transform: translateY(-50%);
        cursor: pointer;
        .cartoon(.5s);
        &::after {
            content: "";
            width: 8px;
            height: 14px;
            background: #adadad;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            .cartoon(.5s);
        }
        &:hover {
            background: @blue;
            &::after {
                background: #fff;
            }
        }
    }
    .nextBtn {
        right: 3%;
        &::after {
            clip-path: polygon(0 0,100% 50%,0 100%);
        }
    }
    .prevBtn {
        left: 3%;
        &::after {
            clip-path: polygon(0 50%,100% 0,100% 100%);
        }
    }
}

.contact {
    .inner-banner {
        text-align: right;
        .textBox {
            top: 28.41%;
        }
    }
    .contactBox {
        padding: 5.729% 0 7.552%;
        background: #f4f4f4;
        .w1600 {
            background: #fff;
            padding : 50px 0;
        }
        #container {
            width: 94%;
            margin: 0 auto;
            height: 520px;

        }
        ul {
            margin-top: 60px;
            li {
                letter-spacing: 1px;
                .font(18px,30px,@blue);
                &:not(:last-child) {
                    border-right: 1px solid @blue;
                }
                &:nth-child(1) {
                    padding: 0 5.3125% 0 0;
                }
                &:nth-child(2) {
                    padding: 0 9.6875% 0 8.125%;
                }
                &:nth-child(3) {
                    padding: 0 0 0 4.6875%;
                }
            }
            
        }
    }
}