@import url('./iconfont.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
@font-face{
    font-family: 'Metropolis-Medium';
    src: url(../fonts/Metropolis-Medium.otf);
}
@font-face{
    font-family: 'Metropolis-MediumItalic';
    src: url(../fonts/Metropolis-RegularItalic.otf);
}
@font-face{
    font-family: 'Metropolis-Light';
    src: url(../fonts/Metropolis-Light.otf);
}
@font-face{
    font-family: 'Metropolis-Regular';
    src: url(../fonts/Metropolis-Regular.otf);
}
@font-face{
    font-family: 'Metropolis-Bold';
    src: url(../fonts/Metropolis-Bold.otf);
}
@font-face{
    font-family: 'Metropolis-BoldItalic';
    src: url(../fonts/Metropolis-BoldItalic.otf);
}
@font-face{
    font-family: 'Metropolis-SemiBold';
    src: url(../fonts/Metropolis-SemiBold.otf);
}
@font-face{
    font-family: 'Metropolis-Black';
    src: url(../fonts/Metropolis-Black.otf);
}
@font-face{
    font-family: 'Poppins-Bold';
    src: url(../fonts/Poppins-Bold.ttf);
}
@font-face{
    font-family: 'Poppins-Regular';
    src: url(../fonts/Poppins-Regular.ttf);
}
@font-face{
    font-family: 'Poppins-Medium';
    src: url(../fonts/Poppins-Medium.ttf);
}
@font-face{
    font-family: 'Poppins-MediumItalic';
    src: url(../fonts/Poppins-MediumItalic.ttf);
}



body,
html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth
}

:focus {
    outline: 0
}

ul {
    margin: 0;
    padding: 0
}

li {
    list-style: none;
    margin-bottom: 0
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 10px;
}
h1,.h1{
    font-family: 'Metropolis-Black';
    font-size: 5.6rem;
    color: #222;
    line-height: 6.72rem;
}
h2,.h2{
    font-family: 'Metropolis-Bold';
    font-size: 4.2rem;
    color: #222;
    line-height: 5.88rem;
}
h3,.h3{
    font-family: 'Metropolis-Bold';
    font-size: 3.6rem;
    color:#222;
    line-height: 5.04rem;
}
h4,.h4{
    font-family: 'Metropolis-Bold';
    font-size: 2.8rem;
    color: #222;
    line-height: 3.92rem;
}
h5,.h5{
    font-family: 'Metropolis-Medium';
    font-size: 2rem;
    color: #222;
    line-height: 2.8rem;
}
p{
    font-family: 'Metropolis-Regular';
    font-size: 1.8rem;
    color:#666666;
    line-height: 2.7rem;
}
a{
    color: #333333;
    text-decoration: none;
}
a:hover{
    color: var(--cor-conver);
}
img{
    max-width: 100%;
}
:root{
    --hover:#26AD6F;
    --bbtn:#005DAB;
    --bbtnhover:#004D8E;
    --rbtn:#26AD6F;
    --rbtnhover:#259D66;
}
a:hover{
    color: #333333;
}

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    overflow-x: hidden
}
@media screen and (max-width: 1440px) {
    html {
        font-size: 9px
    }
}
@media screen and (max-width: 1024px) {
    h1,.h1{
        font-size: 5rem;
    }
}

@media screen and (max-width: 600px) {
    html {
        font-size: 8.5px
    }
    h1,.h1{
        font-size: 4rem;
    }
}




/*Banner 1*/
    .banner{
        position: relative;
    }
    .banner>img{
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        z-index: -1;
    }
    .banner>div{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 4rem auto;
    }
    .banner div{
        margin: 0 auto;
        color: #fff;
        width: 100%;
    }
    .banner .mbdh{
        background: linear-gradient(269deg, rgba(0,21,39,0) 0%, rgba(0,21,39,0.8) 100%);
    }
    .banner .mbdh div span{
        margin:0 1rem;
    }
    .banner .link,.product-banner .link{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
        margin-top: 2.3rem;
        font-size: 1.6rem;
        font-family: 'Metropolis-Regular';
    }
    .banner .link a,.product-banner .link a{
        color: #fff;
        opacity: 0.6;
    }
    .banner .link a:hover,.product-banner .link a:hover{
        color: var(--hover);
    }
    .banner .mbdh .h1{
        text-align: center;
        align-items: center;
        display: flex;
        justify-content: center;
        text-transform: uppercase;
        font-size: 5.6rem;
    }
    @media screen and (max-width: 1600px) {
        .banner .mbdh .link{
            text-align: center;
        }
    }

    @media screen and (max-width: 1440px) {
        .banner>img{
            height: 40vh;
        }
    }
    @media screen and (max-width: 1024px) {
        .banner>img{
            height: 35vh;
        }
        .banner .mbdh .h1{
            font-size: 5rem;
        }
    }
    @media screen and (max-width: 800px) {
        .banner>img{
            height: 30vh;
        }
    }
    @media screen and (max-width: 600px) {
        .banner .mbdh .h1{
            font-size: 4rem;
        }
    }

/*new-item*//*product-item*/
    .product-item{
        background-color: #fff;
        transition: all .3s ease;
        max-width: 41rem;
        background-color: #F8F8F8;
    }
    .new-item:hover,.product-item:hover{
        box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
        transform: translateY(-0.5rem);
    }
    .item-img{
        overflow: hidden;
    }
    .item-img img{
        transition: all .6s ease;
    }
    .item-img img:hover{
        filter: brightness(1.03);
        transform: scale(1.03);
    }
    .product-item .item-text{
        padding: 4rem;
        font-family: 'Metropolis-Regular';
        font-size: 1.6rem;
        color: #222222;
        line-height: 2.4rem;  
    }
    .item-text>span{
        display: block;
        text-transform: uppercase;
        margin-bottom: 3rem;
    }
    .item-text .details{
        text-align: right;
    }
    .item-text .iconfont{
        font-size: 1.5rem;
        margin-right: 1rem;
        color: #0049BA;
    }
    
    .item-text .details a{
        color: #555555;
    }
    .item-text .details a:hover{
        color: var(--hover);
    }
    .new-item .item-title{
        font-family: 'Metropolis-Medium';
        font-size: 2.4rem;
        margin-bottom: 3rem;
        line-height: 3.6rem;
    }
    .product-item .item-title{
        font-family: 'Metropolis-Medium';
        font-size: 2rem;
        margin-bottom: 2rem;
        line-height: 2.8rem;
        overflow: hidden;
        text-overflow:none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }
    .product-item .item-des{
        overflow: hidden;
        text-overflow:none;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .new-item .item-title a,.product-item .item-title a{
        color: #222;
    }
    .new-item .item-title a:hover,.product-item .item-title a:hover{
        color: var(--hover);
    }
@media screen and (max-width: 1680px) {

}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    
}
@media screen and (max-width: 1280px) {
    
}
@media screen and (max-width: 1024px) {
    
}
@media screen and (max-width: 800px) {
    .new-item .item-text{
        padding: 3rem 3rem 5rem;
    }
    .new-item .item-title{
        margin-bottom: 3rem;
    }
    .new-item .item-text{
        min-height: auto;
    }
}
@media screen and (max-width: 600px) {

}  
    

/*响应式完成new-list*/
    .new-list{
        padding: 8rem 0 10rem;
    }
    .new-list>div{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
        display: flex;
        row-gap: 8rem;
        flex-direction: column;
    }
    .new-list>div .list{
        padding-bottom: 8rem;
    }
    .new-list>div .list .new-item,
    .related-news>div .new-item,
    .search-result .new-item
    {
        display: grid;
        grid-template-columns: 40rem auto;
        column-gap: 5rem;
        transition: all .3s ease;
        margin-bottom: 5rem;
    }
    .new-list .new-item .item-text,
    .related-news .new-item .item-text{
        padding: 0;
    }
    .new-list .new-item .item-text span,
    .related-news .new-item .item-text span,
    .search-result .item-text span
    {
        font-family: 'Metropolis-Regular';
        margin-top: 1rem;
        color: #005DAB;
        font-size: 1.6rem;
        margin-bottom: 3rem;
    }
    .new-list .new-item .item-text p,
    .related-news .new-item .item-text p{
        color: #555555;
        margin-bottom: 3rem;
    }
    .new-item .item-time,
    .new-item .item-time{
        font-family: 'Metropolis-Regular';
        color: #999999;
        font-size: 1.6rem;
    }



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

    }
    @media screen and (max-width: 1600px) {
        
    }
    @media screen and (max-width: 1440px) {
        
    }
    @media screen and (max-width: 1280px) {
        .new-list>div{
            padding-left: 2rem;
            padding-right: 2rem;
            row-gap: 5rem;
        }
    }
    @media screen and (max-width: 1024px) {
        .new-list{
            padding: 6rem 0 8rem;
            row-gap: 4rem;
        }
        .new-list>div{
            row-gap: 3rem;
        }
        .related-news>div .new-item{
            grid-template-columns: auto;
            padding: 3rem;
            justify-items: center;
        }
        .related-news>div .new-item .item-img{
            margin-bottom: 3rem;
        }
    }
    @media screen and (max-width: 800px) {
        .new-list>div{
            row-gap: 2rem;
        }
    }
    @media screen and (max-width: 600px) {
        .new-list>div{
            row-gap: 1rem;
        }
    }

/*响应式完成project-item*/
    .project-item{
        position: relative;
        width: 100%;
        max-width: 63rem;
        transition: all .3s ease;
        max-width: 51rem;
    }
    .project-item:hover{
        box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
        transform: translateY(-0.5rem);
    }
    .project-item .item-text{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: grid;
        align-content: flex-end;
        background: linear-gradient(180deg, rgba(37,37,37,0) 0%, #252525 100%);
    }
    .project-item .item-text div{
        padding: 5rem;
        display: grid;
        column-gap: 4rem;
        grid-template-columns: auto auto auto;
        font-family: 'Metropolis-Regular';
        font-size: 1.6rem;
        color: #fff;
    }
    .project-item .item-title{
        grid-column-start: 1;
        grid-column-end: 4;
        font-family: 'Metropolis-Bold';
        font-size: 2rem;
        margin-bottom: 2rem;
        line-height: 2.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient:vertical;
    }
    .project-item .item-title a{
        color: #fff;
    }
    .project-item .item-title a:hover{
        color: var(--hover);
    }
    .project-item .item-time{
        width: fit-content;
    }
    .project-item .item-time,.project-item .item-area{
        opacity: 0.8;
    }
    .project-item .item-text .iconfont{
        margin-right: 1rem;
        color: #fff;
    }


/*响应式完成project-list*/
    .project-list{
        padding: 8rem 0 10rem;
        background: #F8F8F8;
    }
    .project-list>div{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
    }
    .project-list>div:first-child{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 4rem;
        row-gap: 4rem;
        margin-bottom: 6rem;
        justify-content: center;
    }
    @media screen and (max-width: 1680px) {

    }
    @media screen and (max-width: 1600px) {
        
    }
    @media screen and (max-width: 1440px) {
        
    }
    @media screen and (max-width: 1280px) {
        .project-list>div:first-child{
            column-gap: 3rem;
            row-gap: 3rem;
        }
        .project-list>div{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    @media screen and (max-width: 1024px) {
        
    }
    @media screen and (max-width: 800px) {
        .project-list>div:first-child{
            grid-template-columns: auto;
            column-gap: 0;
            row-gap: 2rem;
            margin-bottom: 5rem;
        }
    }
    @media screen and (max-width: 600px) {
        
    }


/*响应式完成product-line-list*/
    .product-line-list{
        background-color: #F8F8F8;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .product-line-list>div{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
    }
    .product-line-list>div:first-child{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 4rem;
        row-gap: 4rem;
        margin-bottom: 6rem;
        /* justify-content: center; */
    }
    .product-line-list .product-item,
    .related-project .product-item
    {
        background-color: #fff;
        box-shadow: 0px 0px 80px 1px rgba(0,0,0,0.06);
    }
    .product-line-list .product-item img,
    .related-project .product-item img
    {
        display: block;
    }
    .product-line-list .product-item .item-text,
    .related-project .product-item .item-text
    {
        border-top: 4px solid #FFF;
    }

    .product-line-list .product-item:hover .item-text,
    .related-project .product-item:hover .item-text
    {
        border-top: 4px solid #005DAB;
    }
    .product-line-list .product-item .item-title{
        text-align: left;
    }
    .product-line-list .product-item .item-title,
    .related-project .product-item .item-title,
    .search-result .product-item .item-title
    {
        margin-bottom: 6rem;
    }
    .product-line-list .product-item .item-text a.more i,
    .related-project .item-text a.more i,
    .search-result .item-text a.more i
    {
        font-family: 'Metropolis-Medium';
        font-size: 1.8rem;
        color: #555555;
        font-style: normal;
        margin-right: 2rem;
        text-decoration: underline;
    }
    .product-line-list .product-item .item-text a.more:hover i{
        color: var(--hover);
    }
    .product-line-list .product-item .item-text a.more .iconfont,
    .related-project .item-text a.more .iconfont,
    .search-result .item-text a.more .iconfont
    {
        display: inline-block;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        text-align: center;
        line-height: 4rem;
        border: 2px solid #A1A1A1;
        color: #555555;
        font-size: 1.2rem;
    }
    .product-line-list .product-item .item-text a.more:hover .iconfont,
    .related-project .item-text a.more:hover .iconfont,
    .search-result .item-text a.more:hover .iconfont
    {
        background-color: var(--bbtn);
        color: #fff;
        border-color: var(--bbtn);
    }
    @media screen and (max-width: 1600px) {

    }
    @media screen and (max-width: 1440px) {
        .product-line-list{
            padding-top: 6rem;
            padding-bottom: 6rem;
        }
    }
    @media screen and (max-width: 1024px) {
        .product-line-list>div:first-child{
            grid-template-columns: 1fr 1fr;
            column-gap: 3rem;
            row-gap: 3rem;
        }
        .product-line-list>div{
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .product-line-list{
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
    }
    @media screen and (max-width: 800px) {
        .product-line-list{
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
    }
    @media screen and (max-width: 600px) {
        .product-line-list{
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
        .product-line-list>div:first-child{
            grid-template-columns: auto;
            column-gap: 0;
            row-gap: 2rem;
        }
    }



/*related-product-list*/
/* .related-product-list{
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 4rem;
} */


/*响应式完成newsletter*/
    .newsletter{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
        padding: 6rem;
        background:url(../images/newsletter.png) no-repeat #0049BA;
        background-size: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .newsletter .text{
        font-family: 'Metropolis-Black';
        font-size: 3.6rem;
        line-height: 4.2rem;
        color: #FFFFFF;
        text-transform: uppercase;
    }
    .newsletter .text span{
        color: #E05A52;
    }
    .newsletter .form{
        width: 100%;
        max-width: 61.7rem;
        height: 8rem;
        background-color:rgba(255, 255, 255, 0.1);
        border-radius: 10rem;
        transition: all .3s ease;
    }
    .newsletter .form:hover{
        box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
        transform: translateY(-0.5rem);
    }
    .newsletter .form form{
        padding: 1.5rem 1.5rem 1.5rem 3rem;
        display: grid;
        grid-template-columns: auto 16rem;
    }
    .newsletter .form input{
        background: scroll;
        min-height: 5rem;
        border: 0;
        font-family: 'Metropolis-Medium';
        color: #fff;
        font-size: 1.6rem;
    }
    .newsletter .form input::-webkit-input-placeholder{
        color: #fff;
        opacity: 0.6;
    }
    .newsletter .form input[type="submit"]{
        background:var(--rbtn);
        border-radius: 100px 100px 100px 100px;
        cursor: pointer;
        transition: all .6s ease;
    }
    .newsletter .form input[type="submit"]:hover{
        background-color: var(--rbtnhover);
        filter: brightness(1.03);
        transform: scale(1.03);
    }
    @media screen and (max-width: 1024px) {
        .newsletter{
            padding: 4rem;
        }
        .newsletter .text{
            font-size: 3rem;
        }
        .newsletter .form{
            height: 7rem;
        }
        .newsletter .form input{
            min-height: 4rem;
        }
    }
    @media screen and (max-width: 600px) {
        .newsletter{
            grid-template-columns: auto;
            row-gap: 1rem;
            padding: 2rem;
        }
        .newsletter .text{
            font-size: 2.6rem;
        }
    }


/*响应式完成footer-contact*/
    .footer{
        background-color: #252525;
        padding-top: 10rem;
        color: #FFFFFF;
        
    }
    .footer a{
        color: rgba(255, 255, 255, 0.8);
    }
    .footer a:hover{
        color:var(--hover);
    }
    .footer-contact{
        width: 100%;
        max-width: 160rem;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        column-gap: 10rem;
        grid-template-columns: auto auto auto;
        
    }
    .contact-link{
        display: grid;
        column-gap: 8rem;
        font-family: 'Metropolis-Regular';
        font-size: 2rem;
        grid-template-columns: auto auto;
    }

    .contact-link h3{
        font-family: 'Metropolis-Bold';
        font-size: 3.6rem;
        padding-bottom: 4rem;
        text-transform: uppercase;
        color: #fff;
    }
    .contact-link li a{
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
    }
    .contact-link li a img{
        margin-left: 2rem;
    }
    @media screen and (max-width: 1600px) {
        .footer-contact{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    .footer-contact .title{
        font-family: 'Metropolis-Black';
        color: #222222;
    }

    .contact-form h3{
        padding-bottom: 4rem;
        color: #fff;
    }
    .contact-form form{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 2rem;
        row-gap: 2rem;
        font-family: 'Metropolis-Regular';
        font-size: 1.4rem;
    }
    .contact-form .input{
        padding: 0 2rem;
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 100px 100px 100px 100px;
        display: flex;
        column-gap: 0.5rem;
    }
    .contact-form .input span{
        display: flex;
        align-items: center;
        color: #fff;
        opacity: 0.4;
    }
    .contact-form .input b{
        color: #26AD6F;
        margin-left: 0.5rem;
    }
    .contact-form .input input{
        width: 100%;
        border: 0;
        height: 6rem;
        background: scroll;
        color: #FFF;
    }
    .contact-form .area,.contact-form .submit{
        border: 2px solid rgba(255, 255, 255, 0.4);
        grid-column-start: 1;
        grid-column-end: 3;
        display: flex;
        column-gap: 0.5rem;
    }
    .contact-form .area span{
        color: #fff;
        opacity: 0.4;
    }
    .contact-form .submit{
        background-color: var(--bbtn);
        border-radius: 20rem;
        height: 6rem;
        border: none;
    }
    .contact-form .submit:hover{
        background-color: var(--bbtnhover);
        
    }
    .contact-form .area{
        padding: 2rem 2rem 0;
        border-radius: 20px 20px 20px 20px;
        height: 10rem;
    }
    .contact-form .area textarea,.contact-form .submit button{
        width: 100%;
        border: 0;
        background: scroll;
        color: #FFF;
    } 
    .contact-form .submit button{
        cursor: pointer;
        font-size: 1.6rem;
        color: #fff;
    }
    .contact-form .submit .iconfont{
        font-size: 1.5rem;
        margin-left: 1rem;
    }
    .contact-form .submit button:hover{
        color: #fff;
    }
    @media screen and (max-width: 1440px) {
        .footer-contact{
            column-gap:6rem
        }
    }
    @media screen and (max-width: 1024px) {
        .footer-contact{
            grid-template-columns: auto auto;
            column-gap:3rem
        }
        .contact-info .title{
            font-size: 5rem;
            margin-bottom:3rem
        }
        .contact-info p{
            margin-bottom: 1.5rem;
        }
    }
    @media screen and (max-width: 800px) {
        .footer-contact{
            grid-template-columns: auto;
            column-gap:3rem;
            row-gap: 3rem;
        }
        .contact-info .title{
            font-size: 4rem;
            margin-bottom:2.4rem
        }
        .contact-form .title{
            font-size: 3.6rem;
        }
        .contact-link{
            grid-template-columns: auto;
        }
    }
    @media screen and (max-width: 600px) {
        .contact-info .title{
            font-size: 3.6rem;
            margin-bottom:2rem
        }
        .contact-info p{
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
        .contact-info p.map{
            margin-top: 2rem;
        }
        .contact-form form{
            column-gap: 1rem;
            row-gap: 1rem;
        }
        .contact-form .title{
            font-size: 3rem;
        }
        .contact-form .input{
            grid-column-start: 1;
            grid-column-end: 3;
        }
        .contact-form .input input,.contact-form .submit{
            height: 5rem;
        }
    }


/*响应式完成footer-nav*/
    .footer-nav{
        width: 100%;
        max-width: 160rem;
        margin: 4rem auto;
        font-family: 'Metropolis-Medium';
        font-size: 1.8rem;
        text-transform: capitalize;
    }
    @media screen and (max-width: 1600px) {
        .footer-nav{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    .footer-nav ul{
        display: inline-flex;
        column-gap: 5rem;
        flex-wrap: wrap;
    }
    .footer-nav a{
        color: #FFFFFF;
    }
    .footer-nav a:hover{
        color: var(--hover);
    }
    @media screen and (max-width: 1440px) {
        .footer-nav ul{
            display: grid;
            grid-template-columns: auto auto auto auto;
            gap: 4rem;
        }
    }
    @media screen and (max-width: 1024px) {
        .footer-nav ul{
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 3rem;
        }
    }
    @media screen and (max-width: 800px) {
        .footer-nav ul{
            display: grid;
            grid-template-columns: auto auto;
            gap: 2rem;
        }
    }
    @media screen and (max-width: 600px) {
        .footer-nav ul{
            display: grid;
            grid-template-columns: auto;
            gap: 1rem;
        }
    }

/*响应式完成copyright*/
    .copyright {
        background: #38383A;
    }
    .copyright div{
        width: 100%;
        max-width: 160rem;
        padding: 3.5rem 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    @media screen and (max-width: 1600px) {
        .copyright div{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    .copyright p{
        font-family: 'Metropolis-Regular';
        font-size: 1.4rem;
        color: #fff;
        opacity: 0.8;
    }
    .copyright ul{
        display: flex;
        column-gap: 5rem;
    }
    .copyright li a{
        display: block;
        transition: all .3s ease;
        color: #fff;
    }
    .copyright li .iconfont{
        font-size: 2.5rem;
    }
    .copyright li a:hover{
        transform: translateY(-0.5rem);
        color: var(--hover);
    }
    @media screen and (max-width: 600px) {
        .copyright div{
            display: grid;
            grid-template-columns: auto;
        }
        .copyright p{
            margin-bottom: 2rem;
        }
    }


/*header*/
.header{
    width: 100%;
    max-width: 192rem;
    height: 12rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DDDDDD;
    column-gap: 8rem;
}
.header .logo{
    margin-left: 16rem;
    width: 87px;
    height: auto;
}
.header .nav{
    flex: 1;
    font-family: 'Metropolis-Medium';
    font-size: 1.8rem;
    text-transform: uppercase;
}

#menu-main {
    display: flex;
    flex-flow: row nowrap;
    /* justify-content: center; */
    column-gap: 5rem;
    transition: all .3s ease
}

#menu-main>li {
    /* height: 12rem; */
    position: relative
}

#menu-main>li>a {
    color: #222222;
    display: inline-block;
    font-weight: 500;
    line-height: 12rem;
    position: relative;
    transition: color .3s ease
}

#menu-main>li.current-menu-ancestor>a,
#menu-main>li.current-menu-item>a,
#menu-main>li.current-menu-parent>a,
#menu-main>li:hover>a {
    color: var(--hover)
}

#menu-main>li>.sub-menu {
    background: #fff;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1.4rem 4.8rem -.2rem rgba(0,26,55,.15);
    display: none;
    left: -2.88rem;
    padding: 1.2rem 1.6rem 1.6rem;
    position: absolute;
    z-index: 99;
    top: 12rem;
    text-transform: capitalize;
    transition: box-shadow .3s ease
}
#menu-main>li:hover>.sub-menu {
    display: block;
}
#menu-main>li>.sub-menu>li>a {
    border-radius: 2px;
    color: #666;
    display: block;
    font-size: 1.4rem;
    line-height: 2rem;
    padding: .8rem 2.4rem .8rem 1.6rem;
    transition: all .3s ease;
    white-space: nowrap;
}

#menu-main>li>.sub-menu>li>a:hover {
    background: rgba(2,121,249,.1);
    color: #3d3d3d
}

#menu-main>li.has_lv3 {
    position: static
}

#menu-main>li.has_lv3>.sub-menu {
    gap: 2.4rem;
    left: calc(50vw - 130rem/2);
    padding: 3.2rem 4rem 5.6rem;
    width: 130rem;
}
#menu-main>li.has_lv3:hover>.sub-menu{
    display: flex;
    flex-flow: row wrap
}

#menu-main>li.has_lv3>.sub-menu>li {
    flex: auto;
    flex-basis: 20%
}

#menu-main>li.has_lv3>.sub-menu>li>a {
    color: #3d3d3d;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .8rem;
    text-transform: uppercase;
    transition: all .5s ease
}

#menu-main>li.has_lv3>.sub-menu>li>a:hover {
    background: transparent;
    text-decoration: underline
}

#menu-main>li.has_lv3>.sub-menu .sub-menu {
    display: block
}

#menu-main>li.has_lv3>.sub-menu .sub-menu a {
    color: #666;
    display: block;
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding: .8rem 2.4rem .8rem 1.6rem;
    transition: all .1s ease
}

#menu-main>li.has_lv3>.sub-menu .sub-menu a:hover {
    background: rgba(2,121,249,.15);
    color: #3d3d3d
}

#menu-main>li.has_lv3 .current-menu-item>a {
    color: #0279f9!important
}

.header-button{
    display: flex;
    column-gap: 5rem;
    margin-right: 16rem;
    align-items: center;
}
.header-button .last a{
    display: inline-block;
    width: 5rem;
    height: 5rem;
    text-align: center;
    line-height: 5rem;
    background-color: var(--bbtn);
    border-radius: 50%;
}
.header-button .last .iconfont{
    color: #FFF;
    font-size: 2rem;
}
.header-button .last a:hover{
    background-color: var(--bbtnhover);
}
#language,#mobile,#close{
    position: relative;
}
#language ul{
    display: none;
    flex-direction: column;
    row-gap: 1rem;
    padding: 2rem;
    background: #fff;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1.4rem 4.8rem -.2rem rgba(0,26,55,.15);
    position: absolute;
    left: -2rem;
    font-family: 'Metropolis-Medium';
    font-size: 1.6rem;
    z-index: 9;
}
#language ul a{
    color: #555555;
}
#language ul a:hover{
    color: var(--hover);
}
#language:hover ul{
    display: flex;
}

#language::before,
#mobile::before,
#close::before
{
    content: '';
    display: block;
    width: 1px;
    height: 1rem;
    background-color: #DDDDDD;
    position: absolute;
    left: -2.4rem;
    top: 2px;
}
.header-button .iconfont{
    font-size: 1.6rem;
    color: #555555;
    cursor: pointer;
}

#mobile{
    /* display: flex; */
    display: none;
    align-items: center;
    row-gap: 5px;
    flex-direction: column;
    cursor: pointer;
}
#mobile li{
    width: 2rem;
    height: 2px;
    background-color: #555555;
    
}
#close {
    display: none;
    position: relative;
    width: 2rem;
    cursor: pointer;
}
#close li{
    width: 2.8rem;
    height: 2px;
    background-color: #555555;
    position: absolute;
    top: 50%;
    left: 0;
}
#close li:first-child{
    transform: rotate(45deg);
}
#close li:last-child{
    transform: rotate(-45deg);
}


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

}
@media screen and (max-width: 1600px) {
    .header .logo{
        margin-left: 6rem;
    }
    .header-button{
        margin-right: 6rem;
    }
}
@media screen and (max-width: 1440px) {
    #menu-main>li.has_lv3>.sub-menu{
        width: 100%;
        left: 0;
    }
    #menu-main{
        column-gap: 4rem;
    }
}
@media screen and (max-width: 1280px) {
    .header{
        column-gap: 5rem;
    }
    .header .logo{
        margin-left: 4rem;
    }
    .header .logo img{
        width: 85%;
    }
    .header-button{
        margin-right: 4rem;
    }
    #menu-main{
        column-gap: 2rem;
    }
    #menu-main>li>a {
        color: #3d3d3d;
        display: inline-block;
        line-height: 3rem;
        padding-bottom: 0;
        position: static;
        text-transform: uppercase;
    }
}
@media screen and (max-width: 1024px) {
    #menu-main,.mburger {
        display: block
    }

    #menu-main {
        background: #dcdcdc;
        box-sizing: border-box;
        height: 100vh;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 6rem 2rem 4rem 3rem;
        position: fixed;
        top: 0;
        transform: translateX(-100%);
        transition: all .4s;
        width: 30%;
        z-index: 999;
        column-gap: 2rem;
    }

    #menu-main.show {
        transform: translateX(0)
    }

    #menu-main>li {
        height: auto;
        margin-bottom: 1.6rem;
        position: relative;
        width: 100%
    }

    

    #menu-main>li.current-menu-ancestor>a,#menu-main>li.current-menu-item>a,#menu-main>li.current-menu-parent>a {
        color: #0279f9!important
    }

    #menu-main li:not(:first-child) {
        margin-left: 0
    }

    #menu-main>li>.sub-menu {
        background: transparent;
        box-shadow: none;
        display: none;
        padding: 0!important;
        position: static
    }

    #menu-main>li>.sub-menu a {
        font-size: 1.2rem;
        font-weight: 300
    }

    #menu-main .current-menu-ancestor .sub-menu,#menu-main .current-menu-item .sub-menu,#menu-main .current-menu-parent .sub-menu {
        display: block
    }

    #menu-main>li.has_lv3>.sub-menu {
        transform: translateX(0);
        width: auto
    }

    #menu-main>li.has_lv3>.sub-menu>li {
        margin: 1rem 0
    }
    #mobile{
        display: flex;
    }
    .header .logo img{
        width: 80%;
    }
    .home-banner>div .slick-slide img{
        min-height: 50vh;
        -o-object-fit: cover;
        object-fit: cover;
    }
}
@media screen and (max-width: 800px) {
    #menu-main {
        width:50%
    }
    .header .logo{
        margin-left: 3rem;
    }
    .header-button{
        margin-right: 3rem;
    }
    .header-button .last{
        display: none;
    }
    .header .logo img{
        width: 75%;
    }
    .header-button .last a{
        width: 4rem;
        height: 4rem;
        line-height: 4rem;
    }
    .header-button .last .iconfont{
        font-size: 1.6rem;
    }

}
@media screen and (max-width: 600px) {
    #menu-main {
        width:66.66%
    }
    #menu-main>li.has_lv3>.sub-menu>li{
        margin: 0;
        margin-left: 1rem;
    }
    #menu-main>li>.sub-menu>li>a{
        padding:0;
    }
    #menu-main>li.has_lv3:hover>.sub-menu{
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }
    .header .logo img{
        width: 70%;
    }
    .header-button .last a{
        width: 3.2rem;
        height: 3.2rem;
        line-height: 3.2rem;
    }
}









/* .header{
    width: 100%;
    max-width: 192rem;
    height: 12rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #DDDDDD;
}
.header .logo{
    margin-left: 6rem;
}
.header ul.main-nav{
    font-family: 'Metropolis-Medium';
    font-size: 1.8rem;
    text-transform: uppercase;
}
.header ul.main-nav>li{
    display: inline-block;
    position: relative;
}
.header ul.main-nav>li>a{
    padding:0 2.5rem;
    color: #222222;
}
.header ul li a:hover{
    color: var(--hover);
}
.header .main-nav>li>ul {
    display: none;
    padding: 2rem 3rem;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 2px 30px rgb(0 0 0 / 10%);
    background: #fff;
    position: absolute;
    z-index: 5;
    transition: box-shadow .3s ease;
    white-space: nowrap;
}
.header .main-nav>li:hover ul {
    display: flex;
}
.header .main-nav>li>ul>li {
    display: inline-block;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
    line-height: 32px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all .5s ease;
    margin-right: 0;
}
.header .main-nav>li>ul>li a {
    color: #333;
    text-transform: capitalize;
}

.header .main-nav>li>ul>li>ul {
    display: flex;
    flex-direction: column;
}

.header .main-nav>li>ul>li>ul>li {
    float: none;
    display: block;
    padding: 0;
    margin: 0;
}

.header .main-nav>li>ul>li>ul>li>a {
    color: #666;
    display: block;
    font-size: 14px;
    line-height: 18px;
    padding: 8px 0 8px;
    transition: all .1s ease;
} */

/* .header ul li ul{
    display: grid;
    grid-template-columns: auto auto auto;
    row-gap: 2rem;
    justify-content: center;
    background-color: #FFF;
    border-radius: 4px;
    box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
    padding: 3rem;
    position: absolute;
    top: 12rem;
    transition: box-shadow .3s ease;
}
.header>ul>li>ul>li{
    font-family: 'Metropolis-Medium';
    font-size: 1.6rem;
}
.header>ul>li>ul>li>a{
    transition: all .3s ease;
}
.header>ul>li>ul>li>a:hover{
    transform: translateY(-0.5rem);
}
.header>ul>li>ul>li>ul{
    display: flex;
    flex-direction: column;
} */










/*响应式完成product-archive*/
    .product-archive{
        background-color: #F8F8F8;
        padding: 8rem 0 10rem;
    }
    .product-archive>div{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
    }
    .product-archive .title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 4rem;
    }
    .product-archive .title h3{
        font-family: 'Metropolis-Bold';
        font-size: 3.6rem;
        color: #222222;
        position: relative;
        padding-left: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-archive .title h3::before,
    .product-archive .title h3::after
    {
        display: block;
        content: '';
    }
    .product-archive .title h3::before{
        width: 1.4rem;
        height: 1.4rem;
        background-color: #E05A52;
        border-radius: 0.4rem;
        position: absolute;
        bottom: 1rem;
        left: 0;
        z-index: 2;
    }
    .product-archive .title h3::after{
        width: 1.8rem;
        height: 1.8rem;
        background-color: #0049BA;
        border-radius: 0.4rem;
        position: absolute;
        bottom: 0;
        left: 0.7rem;
    }
    .product-archive .title .button{
        width: 16rem;
        height: 4rem;
        border-radius: 10rem;
        border: 1px solid var(--bbtn);
        font-family: 'Metropolis-Medium';
        font-size: 1.8rem;
        color: var(--bbtn);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s ease;
    }
    .product-archive .title .button:hover{
        background-color: var(--bbtn);
        color: #fff;
        box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
        transform: translateY(-0.5rem);
    }
    .product-archive .archive-list{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 4rem;
        margin-bottom: 6rem;
        
    }
    @media screen and (max-width: 1280px) {
        .product-archive{
            padding: 3rem 0 5rem;
        }
        .product-archive .title h3{
            font-size: 3rem;
        }
        .product-archive .archive-list{
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 2rem;
            row-gap: 2rem;
        }
        .product-archive>div{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    @media screen and (max-width: 800px) {
        .product-archive .archive-list{
            grid-template-columns: 1fr 1fr;
            column-gap: 2rem;
            row-gap: 2rem;
        }
    }
    @media screen and (max-width: 600px) {
        .product-archive{
            padding: 3rem 0 4rem;
        }
        .product-archive .title h3{
            font-size: 2.6rem;
            padding-left: 4rem;
        }
        .product-archive .archive-list{
            grid-template-columns: auto;
            column-gap: 0;
            row-gap: 2rem;
            justify-content: center;
        }
    }

/*响应式完成product-list*/ 
    .product-list{
        padding: 7rem 0 10rem;
    } 
    .product-list>div:first-child{
        width: 100%;
        max-width: 130rem;
        margin-left: auto;
        margin-right: auto;
    }
    .product-list>div>ul,
    .new-list>div>ul.pro_nav{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        justify-content: center;
        align-items: center;
        padding-bottom: 4rem;
        font-family: 'Metropolis-Medium';
    }
    .product-list .pro_nav,
    .new-list .pro_nav{
        font-size: 2rem;
        text-align: center;
    }
    .product-list .pro_nav li,
    .new-list .pro_nav li{
        background: #F8F8F8;
        height: 10rem;
        line-height: 10rem;
    }
    .product-list .pro_nav li.active,
    .product-list .pro_nav li:hover,
    .new-list .pro_nav li.active,
    .new-list .pro_nav li:hover
    {
        background-image: url(../images/pro_nav_bg.png);
        background-repeat: no-repeat;
        background-size:cover;
        
    }
    .pro_nav li a{
        color: #222222;
    }
    .pro_nav li:hover a{
        color: #FFFFFF;
    }
    .product-list .pro_nav li.active a,
    .new-list .pro_nav li.active a{
        color: #FFFFFF;
    }
    .product-list .pro_start{
        display: flex;
        gap: 2rem;
        justify-content: space-between;
        padding-top: 4rem;
        padding-bottom: 4rem;
        padding-left: 2rem;
        padding-right: 2rem;
        background-color: #F8F8F8;
        flex-wrap: wrap;
    }
    .product-list .pro_start h4{
        text-transform: uppercase;
    }
    .product-list .pro_start a{
        width: 24rem;
        height: 8rem;
        background-color: #26AD6F;
        border-radius: 0.6rem;
        text-align: center;
        line-height: 8rem;
        font-family: 'Metropolis-Bold';
        border-radius: 0.6rem;
        width: 24rem;
        font-size: 1.8rem;
        color: #FFF;
        text-transform: uppercase;
        
    }
    .product-list .pro_start .iconfont{
        margin-left: 2rem;
    }
    .product-list .pro_start a:hover{
        background-color: var(--rbtnhover);
    }
    .product-list .list{
        padding-top: 8rem;
        padding-bottom: 10rem;
        
    }
    .product-list .list>div:first-child{
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 4rem;
        row-gap: 4rem;
        margin-bottom: 6rem;
    }
    @media screen and (max-width: 1600px) {
        .product-list .list{
            padding-bottom: 8rem;
        }
    }
    @media screen and (max-width: 1440px) {
        .product-list{
            padding-top: 6rem;
            padding-bottom: 6rem;
        } 
        .product-list .pro_nav li, .new-list .pro_nav li{
            height: 9rem;
            line-height: 9rem;
            font-size: 1.8rem;
        }
        .product-list .list{
            padding-top: 6rem;
            padding-bottom: 6rem;
        }
    }
    @media screen and (max-width: 1280px) {
        .product-list>div:first-child{
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 3rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .product-list .list{
            grid-column-end: 4;
        }
        .product-list .list>div:first-child{
            grid-template-columns: 1fr 1fr;
            column-gap: 3rem;
            row-gap: 3rem;
            justify-items: center;
        }
        .product-list{
            padding-top: 5rem;
            padding-bottom: 5rem;
        } 
        .product-list .pro_nav li, .new-list .pro_nav li{
            height: 8rem;
            line-height: 8rem;
        }
        .product-list .list{
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
    }
    @media screen and (max-width: 900px) {
        .product-list>div>ul{
            grid-template-columns: 1fr 1fr;
        }
        .new-list>div>ul.pro_nav{
            grid-template-columns: 1fr;
        }
        .product-list .pro_start a{
            width: 20rem;
            height: 6rem;
            line-height: 6rem;
        }
        .new-list>div .list .new-item{
            grid-template-columns: auto;
            padding: 3rem;
            justify-items: center;
        }
        .new-list>div .list .item-img{
            margin-bottom: 3rem;
        }
    }
    @media screen and (max-width: 800px) {
        .product-list>div:first-child{
            /* display: flex!important;
            flex-flow: column-reverse; */
        }
        .product-list .side{
            margin-bottom: 3rem;
        }
        .product-list{
            padding-top: 4rem;
            padding-bottom: 4rem;
        } 
        .product-list .pro_nav li, .new-list .pro_nav li{
            height: 7rem;
            line-height: 7rem;
            font-size: 1.6rem;
        }
        .product-list .list{
            padding-top: 4rem;
            padding-bottom: 4rem;
        }
    }
    @media screen and (max-width: 600px) {
        .product-list .list>div:first-child{
            grid-template-columns: auto;
            row-gap: 2rem;
        }
        .product-list{
            padding-top: 3rem;
            padding-bottom: 3rem;
        } 
        .product-list>div>ul{
            grid-template-columns: 1fr;
        }
        .product-list .pro_nav li, .new-list .pro_nav li{
            height: 6rem;
            line-height: 6rem;
        }
        .product-list .list{
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
    }


/*响应式完成prev-next*/
    .prev-next{
        font-family: 'Metropolis-Medium';
        font-size: 1.6rem;
        /* display: flex;
        justify-content: center;
        border-top: 1px solid #DDDDDD;
        padding: 6rem 0 8rem;
        text-transform: uppercase; */
    }
    .wp-pagenavi{
        display: flex;
        justify-content: center;
        border-top: 1px solid #DDDDDD;
        padding: 6rem 0 8rem;
        text-transform: uppercase;
    }
    .prev-next ul,.wp-pagenavi{
        display: flex;
    }
    .prev-next ul li,.wp-pagenavi a{
        transition: all .3s ease;  
    }
    .prev-next ul li:hover,.wp-pagenavi a:hover{
        /* box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15); */
        transform: translateY(-0.5rem);
    }
    .prev-next ul li a, .wp-pagenavi a, .wp-pagenavi span{
        color: #999999;  
        padding: 1.5rem;   
    }
    .prev-next ul li:first-child a,
    .prev-next ul li:last-child a,
    .wp-pagenavi span
    {
        color: #222222;
    }
    .prev-next ul li a:hover,
    .wp-pagenavi a:hover{
        color: var(--hover);
    }
    @media screen and (max-width: 600px) {
        .prev-next{
            padding: 4rem 0 5rem;
        }
    }




/*响应式完成new-pre-next*/
    .new-pre-next{
        width: 100%;
        background: #F8F8F8;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12rem;
        padding: 4.7rem 6rem;
    }
    .new-pre-next>div{
        display: grid;
        grid-template-columns: auto;
        font-family: 'Metropolis-Regular';
        text-transform: capitalize;
        position: relative;
        row-gap: 1.4rem;
    }
    .new-pre-next>div:last-child:after{
        content: '';
        display: block;
        height: 4rem;
        width: 1px;
        background-color: #DDDDDD;
        position: absolute;
        top: 0.5rem;
        left: -6rem;
    }
    .new-pre-next>div span{
        color: #999999;
        font-size: 1.6rem;
    }
    .new-pre-next>div a{
        color: #222222;
        font-size: 1.8rem;
    }
    .new-pre-next>div a:hover{
        color: var(--hover);
    }
    @media screen and (max-width: 1680px) {

    }
    @media screen and (max-width: 1600px) {
        
    }
    @media screen and (max-width: 1440px) {
        
    }
    @media screen and (max-width: 1280px) {
        
    }
    @media screen and (max-width: 1024px) {
        
    }
    @media screen and (max-width: 800px) {
        .new-pre-next{
            grid-template-columns: auto;
            row-gap: 6rem;
            padding: 4rem 4rem;
        }
        .new-pre-next>div:last-child:after{
            content: '';
            display: block;
            height: 1px;
            width: 100%;
            background-color: #DDDDDD;
            position: absolute;
            top: -3rem;
            left: 0;
        }
    }
    @media screen and (max-width: 600px) {
        
    }

/*mb-nav*/
.mb-nav{
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
    font-family: 'Metropolis-Regular';
    font-size: 1.6rem;
    color: #DDDDDD;
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: all .3s ease;
}
@media screen and (max-width: 1280px) {
    .mb-nav{
        padding-left: 2rem;
        padding-right: 2rem;
    }    
}
.mb-nav:hover{
    transform: translateY(-0.5rem);
}
.mb-nav a{
    color: #999999;
    opacity: 0.6;
}
.mb-nav a:hover{
    color: var(--hover);
}
.mb-nav span{
    color: #555555;
}



/*响应式完成new-single*/
    .new-single{
        width: 100%;
        max-width: 130rem;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        justify-items: center;
        font-family: 'Metropolis-Regular';
        padding-top: 5rem;
        padding-bottom: 10rem;
    }
    .new-single .title{
        width: 100%;
        max-width: 100rem;
        margin-bottom: 6rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #DDDDDD;
    }
    .new-single .title h1{
        font-family: 'Metropolis-Bold';
        font-size: 4.2rem;
        line-height: 4.4rem;
        margin-bottom: 3rem;
    }
    .new-single .title .info{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        column-gap: 4rem;
        font-size: 1.6rem;
        color: #999999;
        align-items: center;
    }
    .new-single .title .info div{
        display: flex;
        column-gap: 4rem;
        
    }
    .new-single .title .info div p{
        font-size: 1.6rem;
    }
    .new-single .title .info div p i{
        font-style: normal;
    }
    .new-single .title .info div .iconfont{
        color: var(--bbtn);
        margin-right: 1rem;
    }
    .new-single .title .sns{
        display: flex;
        justify-content: flex-end;
        column-gap: 1.5rem;
    }
    .new-single .title .sns .iconfont{
        display: inline-block;
        width: 5rem;
        height: 5rem;
        text-align: center;
        line-height: 5rem;
        color: #999999;
        border-radius: 50%;
        border: 1px solid #EAEAEA;
        font-size: 2rem;
    }
    .new-single .title .sns a:hover .iconfont{
        color: #FFF;
        background: #0049BA;
        box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.16);
    }



    

    .new-single>h2{
        font-family: 'Metropolis-Bold';
        font-size: 2.4rem;
        color: #222222;
        margin-bottom: 3rem;
        display: block;
        width: 100%;
        max-width: 100rem;
    }
    .new-single>p{
        width: 100%;
        max-width: 100rem;
        font-size: 1.8rem;
        color: #555555;
        line-height: 2.8rem;
        margin-bottom: 3rem;
    }
    .new-single>p:last-of-type{
        padding-bottom: 6rem;
        margin-bottom: 8rem;
        border-bottom: 1px solid #DDDDDD;
    }
    .new-single>ul{
        display: grid;
        grid-template-columns: auto auto auto auto;
        column-gap: 3rem;
        margin: 2rem 0;
    }
    .new-single img{
        margin-bottom: 3rem;
    }
    @media screen and (max-width: 1680px) {

    }
    @media screen and (max-width: 1600px) {
        
    }
    @media screen and (max-width: 1440px) {
        
    }
    @media screen and (max-width: 1280px) {
        .new-single{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    @media screen and (max-width: 1024px) {
        .new-single .title{
            margin-bottom: 4rem;
        }
        .new-single .title h1{
            font-size: 3rem;
            line-height: 4rem;
        }
        .new-single>ul{
            grid-template-columns: auto auto;
            column-gap: 3rem;
        }
        .new-single .title .info div{
            column-gap: 3rem;
        }
    }
    @media screen and (max-width: 800px) {
        .new-single .title .info div p i{
            display: none;
        }
        .new-single .title .sns .iconfont{
            width: 4rem;
            height: 4rem;
            line-height: 4rem;
        }
    }
    @media screen and (max-width: 600px) {
        .new-single .title{
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .new-single .title h1{
            font-size: 2.6rem;
            line-height: 3.4rem;
        }
        .new-single>ul{
            grid-template-columns: auto;
        }
        .new-single .title .info{
            flex-direction: column;
            row-gap: 3rem;
            justify-content: center;
        }
    }


/*响应式完成new-sns*/
    .new-sns{
        width: 100%;
        max-width: 100rem;
        display: flex;
        column-gap: 2rem;
        justify-content: center;
        border-bottom: 1px solid #DDDDDD;
        padding-top: 3rem;
        padding-bottom: 6rem;
        margin-bottom: 8rem;
    }
    .new-sns a{
        text-align: center;
        line-height: 6rem;
        display: block;
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
        border: 1px solid #DDDDDD;
        color: #DDDDDD;
        transition: all .3s ease;
    }
    .new-sns a:hover{
        background-color: var(--bbtn);
        border-color: var(--bbtn);
        box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
        transform: translateY(-0.5rem);
    }
    .new-sns .iconfont{
        font-size: 2.4rem;
    }


/*响应式完成consult-online*/
    .consult-online{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
        padding: 7rem 5rem;
        background: #0049BA;
        display: flex;
        justify-content: space-between;
        font-family: 'Metropolis-Medium';
        color: #fff;
        column-gap: 2rem;
        align-items: center;
    }
    .consult-online p{
        font-family: 'Metropolis-Bold';
        font-size: 2.4rem;
        line-height: 3.2rem;
        max-width: 62rem;
    }
    .consult-online .right{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 6rem;
    }
    .consult-online a{
        color: #fff;
    }
    .consult-online a.btn{
        width: 18rem;
        background:var(--rbtn);
        border-radius: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        text-transform: capitalize;
        transition: all .3s ease;
        height: 6rem;
    }
    .consult-online a.btn:hover{
        box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
        transform: translateY(-0.5rem);
        background-color: var(--rbtnhover);
        color: #fff;
    }
    .consult-online span{
        display: grid;
        align-items: center;
        position: relative;
    }
    .consult-online span::before{
        content: '';
        display: block;
        height: 4rem;
        width: 1px;
        border-left: 2px dotted #fff;
        position: absolute;
        top: 1rem;
        left: -3rem;
    }
    .consult-online div span{
        font-family: 'Metropolis-Regular';
        font-size: 1.4rem;
        text-transform: capitalize;
    }
    .consult-online div span b{
        font-weight: normal;
    }
    .consult-online div a{
        text-transform: lowercase;
        font-size: 2rem;
    }
    .consult-online div a:hover{
        color: var(--hover);
    }
    @media screen and (max-width: 1680px) {
    }
    @media screen and (max-width: 1600px) {    
    }
    @media screen and (max-width: 1440px) {    
    }
    @media screen and (max-width: 1280px) {
        
    }
    @media screen and (max-width: 1024px) {
        
    }
    @media screen and (max-width: 800px) {
        .consult-online{
            padding: 3rem 3rem;
            flex-direction: column;
            row-gap: 3rem;
        }
    }
    @media screen and (max-width: 600px) {
        
    }


   

/*project-single*/


/*响应式完成related-product*//*related-project*//*related-news*/
    .related-product,.related-news{
        padding: 10rem 0 0;
        border-top: 1px solid #DDDDDD;
    }
    .related-project{
        padding: 10rem 0 0;
        background-color: #F8F8F8;
    }
    .related-project .product-item .item-title{
        text-align: left;
    }
    .related-product h3,.related-project h3,.related-news h3{
        max-width: 130rem;
        margin: 0 auto 4rem;
        font-family: 'Metropolis-Bold';
        font-size: 3.6rem;
        color: #222222;
        text-transform: uppercase;
    }
    .related-product>div,.related-project>div{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 4rem;
        justify-content: start;
        padding-bottom: 10rem;
    }
    .related-news>div{
        width: 100%;
        max-width: 130rem;
        margin-left: auto;
        margin-right: auto;
    }

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

    }
    @media screen and (max-width: 1600px) {
        .related-news>div{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    @media screen and (max-width: 1440px) {
        .related-product>div,.related-project>div{
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .related-product h3,.related-project h3,.related-news h3{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    @media screen and (max-width: 1280px) {
        
    }
    @media screen and (max-width: 1024px) {
        .related-product>div,.related-news>div,.related-project>div{
            grid-template-columns: 1fr 1fr;
            row-gap: 4rem;
            justify-content: center;
        }
        .related-product h3,.related-project h3,.related-news h3{
            font-size: 3rem;
        }
    }
    @media screen and (max-width: 800px) {
        .related-product,.related-project,.related-news{
            padding: 5rem 0 0;
        }
        .related-project>div{
            grid-template-columns: auto;
            row-gap: 3rem;
            padding-bottom: 5rem;
        }
    }
    @media screen and (max-width: 600px) {
        .related-product h3,.related-project h3,.related-news h3{
            font-size: 2.6rem;
        }
        .related-product>div,.related-news>div{
            grid-template-columns: auto;
            row-gap: 2rem;
            padding-bottom: 5rem;
        }
    }



/*响应式完成search*/
    .search{
        background-color: #F8F8F8;
    }
    .search form{
        max-width: 86rem;
        height: 6.4rem;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 8rem;
        background-color: #FFFFFF;
        border: 1px solid rgba(40,61,121,0.2);
        font-family: 'Metropolis-Regular';
        margin-top: 10rem;
    }
    .search form select{
        font-size: 1.6rem;
        color: #222222;
        border: 0;
        padding: 0 2rem;
    }
    .search form input{
        width: 100%;
        border: 0;
        border-left: 1px solid rgba(40,61,121,0.2);
        padding: 0 2rem;
        margin-left: 2rem;
    }
    .search form input::-webkit-input-placeholder{
        color: #999999;
    }
    .search form button{
        font-size: 1.4rem;
        color: #707070;
        border: 0;
        margin-right: 2rem;
        background: scroll;
        cursor: pointer;
        transition: all .3s ease;
    }
    .search form button:hover{
        transform: translateY(-0.5rem);
    }
    .search-list{
        display: grid;
        grid-template-columns: auto;
        position: relative;
    }
    .search-list ul{
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 130rem;
        height: 6rem;
        margin: 0 auto;
    }
    .search-list::after{
        content: '';
        width: 100%;
        height: 1px;
        background-color: rgba(40,61,121,0.1);
        display: block;
        position: absolute;
        left: 0;
        bottom: 1px;
    }
    .search-list li a{
        font-family: 'Metropolis-Regular';
        font-size: 1.6rem;
        color: #555555;
        padding: 2rem 4rem;
        text-transform: capitalize;
    }
    .search-list li a:hover,
    .search-list li a.active
    {
        color: #FFFFFF;
        background-color: #005DAB;
    }
    .search-result{
        background-color: #FFFFFF;
        
    }
    .search-result>div{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
        padding-top: 2.4rem;
        padding-bottom: 10rem;
    }
    .search-result p{
        font-family: 'Metropolis-Regular';
        font-size: 1.4rem;
        color: #999999;
        margin-bottom: 6rem;
    }
    .search-result p span{
        color: #222222;
    }
    .search-result>div>div{
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 4rem;
        row-gap: 4rem;
        justify-content: start;
    }
    .search-result.news>div>div{
        grid-template-columns: auto;
        row-gap: 0;
    }
    .search-404{
        background-color: #FFFFFF;
    }
    .search-404 .search-result>div>div{
        max-width: 45rem;
        grid-template-columns: auto;
        margin: 0 auto;
        row-gap: 0;
        margin-top: 20rem;
    }
    .search-404 h3{
        font-family: 'Metropolis-Bold';
        font-size: 2.4rem;
        color: #222222;
        margin-bottom: 2rem;
    }
    .search-404 p{
       font-family: 'Metropolis-Regular';
       font-size: 1.4rem;
       color: #666666; 
       line-height: 2.6rem;
       margin-bottom: 3rem;
    }
    .search-404 a{
        width: 20rem;
        height: 6rem;
        text-align: center;
        line-height: 6rem;
        font-family: 'Metropolis-Medium';
        font-size: 1.4rem;
        color: #FFFFFF;
        background-color: var(--bbtn);
        border-radius: 10rem;
        transition: all .3s ease;
    }
    .search-404 a:hover{
        background-color: var(--bbtnhover);
        transform: translateY(-0.5rem);
    }
    .search .related-product{
        padding-top: 2rem;
        border-top: 0;
        background-color: #fff;
    }
    @media screen and (max-width: 1680px) {

    }
    @media screen and (max-width: 1600px) {
        
        .search-list,.search-result{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    @media screen and (max-width: 1440px) {
        
    }
    @media screen and (max-width: 1280px) {
        .search-result>div{
            grid-template-columns: auto auto auto;
            justify-content: center;
        }
        .search-list ul{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    @media screen and (max-width: 1024px) {
        .search-list ul{
            padding-left: 0;
            padding-right: 0;
        }
        .search-result>div>div{
            grid-template-columns: 1fr 1fr;
        }
    }
    @media screen and (max-width: 800px) {
        .search-result>div{
            grid-template-columns: auto auto;
        }
    }
    @media screen and (max-width: 600px) {
        .search form{
            margin-top: 6rem;
            margin-bottom: 6rem;
        }
        .search-result>div{
            grid-template-columns: auto;
        }
        .search-result>div>div{
            grid-template-columns: 1fr;
        }
    }

/*响应式完成page-404*/
    .page-404{
        display: grid;
        grid-template-columns: auto;
        text-align: center;
        max-width: 54.5rem;
        margin: 10rem auto 20rem;
        font-family: 'Metropolis-Regular';
        font-size: 1.6rem;
    }
    .page-404 img{
        display: block;
        margin: 0 auto;
    }
    .page-404 h3{
        font-family: 'Metropolis-Bold';
        font-size: 2.4rem;
        color: #222222;
        margin-bottom: 1.2rem;
        text-transform: capitalize;
    }
    .page-404 p{
        color: #666666;
        margin-bottom: 2.4rem;
    }
    .page-404 span{
        color: #555555;
        margin-bottom: 1.2rem;
    }
    .page-404 a{
        width: 20rem;
        height: 6rem;
        line-height: 6rem;
        color: #FFFFFF;
        background: #0049BA;
        border-radius: 10rem;
        margin: 0 auto;
        text-transform: capitalize;
        transition: all .3s ease;
    }
    .page-404 a:hover{
        background-color: var(--bbtnhover);
        transform: translateY(-0.5rem);
    }

/*culture*/
.culture{
    background: #F8F8F8;
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.culture h2{
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
    font-family: 'Metropolis-Bold';
    font-size: 4.8rem;
    color: #222222;
    margin-bottom: 4rem;
    text-transform: capitalize;
}
.culture>p{
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
    font-family: 'Metropolis-Regular';
    font-size: 1.8rem;
    color: #555555;
    margin-bottom: 6rem;
}
.culture>div>div{
    display: flex;
    column-gap: 3rem;
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
}
.culture .culture-item{
    background-color: #FFFFFF;
    padding: 3rem;
    display: grid;
    grid-template-columns: auto;
    transition: all .3s ease;
    max-width: 23.6rem;
}
.culture .culture-item:hover{
    box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
    transform: translateY(-0.5rem);
}
.culture .culture-item .iconfont{
color: #E05A52;
font-size: 3rem;
margin-bottom: 2rem;
}
.culture .culture-item h3{
    font-family: 'Metropolis-Bold';
    font-size: 1.8rem;
    color: #222222;
    line-height: 2.4rem;
    text-transform: capitalize;
    margin-bottom: 4.7rem;
    position: relative;
}
.culture .culture-item h3::after{
    content: '';
    display: block;
    width: 2rem;
    height: 2px;
    background-color: #E05A52;
    position: absolute;
    left: 0;
    bottom: -1.5rem;
}
.culture .culture-item p{
    font-family: 'Metropolis-Regular';
    font-size: 1.8rem;
    color: #555555;
    line-height: 2.8rem;
}
@media screen and (max-width: 1680px) {

}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    .culture{
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .culture h2{
        font-size: 4.4rem;
    }
}
@media screen and (max-width: 1280px) {
    .culture>div{
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 3rem;
        row-gap: 3rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .culture{
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .culture h2{
        font-size: 4rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .culture>p{
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media screen and (max-width: 1024px) {
    .culture{
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .culture h2{
        font-size: 3.8rem;
    }
}
@media screen and (max-width: 800px) {
    .culture>div{
        grid-template-columns: auto auto;
    }
    .culture h2{
        font-size: 3.6rem;
    }
    .culture>div{
        grid-template-columns: auto;
    }
}
@media screen and (max-width: 600px) {
    
    
}

/*响应式完成video*/
    .video{
        position: relative;
    }
    .video img{
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        z-index: -1;
    }
    .video>div{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .video>div a{
        width: 14rem;
        height: 14rem;
        background-color: rgba(224, 90, 82, 0.3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .video>div a span{
        width: 10rem;
        height: 10rem;
        background-color:var(--rbtn);
        font-size: 3rem;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .3s ease;
    }
    .video>div a:hover span{
        background-color: var(--rbtnhover);
        transform: translateY(-0.5rem);
    }
    @media screen and (max-width: 1680px) {

    }
    @media screen and (max-width: 1600px) {
        
    }
    @media screen and (max-width: 1440px) {
        .video>div a{
            width: 12rem;
            height: 12rem;
        }
        .video>div a span{
            width: 8rem;
            height: 8rem;
        }
    }
    @media screen and (max-width: 1280px) {
        
    }
    @media screen and (max-width: 1024px) {
        .video>div a{
            width: 10rem;
            height: 10rem;
        }
        .video>div a span{
            width: 6rem;
            height: 6rem;
            font-size: 2rem;
        }
    }
    @media screen and (max-width: 800px) {
        
    }
    @media screen and (max-width: 600px) {
        .video>div a{
            width: 8rem;
            height: 8rem;
        }
        .video>div a span{
            width: 5rem;
            height: 5rem;
            font-size: 2rem;
        }
    }

/*响应式profile*/
    .profile{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
        padding-top: 9rem;
        padding-bottom: 9rem;
        display: grid;
        grid-template-columns: auto 44rem;
    }
    .profile h1{
        font-family: 'Metropolis-Bold';
        font-size: 4.8rem;
        color: #222222;
        margin-bottom: 4rem;
    }
    .profile p{
        font-family: 'Metropolis-Regular';
        font-size: 1.8rem;
        color: #555555;
        line-height: 2.8rem;
        margin-bottom: 2rem;
        margin-right: 10rem;
    }
    .profile .right{
        display: flex;
        align-content: flex-end;
        position: relative;
        margin-top: 4rem;
    }
    .profile .right::after,
    .profile .right::before
    {
        content: '';
        display: block;
        position: absolute;
        border-radius: 50%;
    }
    .profile .right::after{
        width: 4.7rem;
        height: 4.7rem;
        background-color: var(--bbtn);
        top: 0;
        right: 0;
    }
    .profile .right::before{
        width: 2.3rem;
        height: 2.3rem;
        background-color: var(--rbtn);
        top: 7.8rem;
        right: 0;
    }
    .profile .red-box{
        margin-top: 0.8rem;
        margin-right: 2.4rem;
        background-color: var(--rbtn);
        width: 42rem;
        height: 42rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
    }
    .profile .img{
        position: relative;
    }
    .profile .img img{
        display: block;
        -o-object-fit: cover;
        object-fit: cover;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        z-index: -1;
        border-radius: 50%;
    }
    .profile .img div{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 2rem;
        color: #FFFFFF;
        line-height: 2.4rem;
    }
    .profile .img span{
        font-family: 'Metropolis-Medium';
        font-size: 2rem;
        line-height: 2.4rem;
        text-align: center;
    }
    .profile .img .title{
        font-family: 'Metropolis-Bold';
        font-size: 12rem;
        margin-bottom: 4rem;
    }
    .profile .red-box .img{
        margin-left: 5rem;
    }
    @media screen and (max-width: 1680px) {
    }
    @media screen and (max-width: 1600px) {
    }
    @media screen and (max-width: 1440px) {
    }
    @media screen and (max-width: 1280px) {
    }
    @media screen and (max-width: 1024px) {
        .profile h1{
            font-size: 4rem;
        }
        .profile p{
            margin-right: 5rem;
        }
        .profile .red-box{
            width: 36rem;
            height: 36rem;
        }
        .profile{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    @media screen and (max-width: 800px) {
        .profile{
            padding-top: 5rem;
            padding-bottom: 5rem;
            grid-template-columns: auto;
            justify-items: center;
        }
        .profile h1{
            font-size: 3.6rem;
        }
        .profile p{
            margin-right: 0;
        }
        .profile .right{
            max-width: 45rem;
        }
        .profile .red-box{
            width: 30rem;
            height: 30rem;
        }
    }
    @media screen and (max-width: 600px) {
        .profile h1{
            font-size: 3rem;
        }
        .profile .red-box{
            width: 28rem;
            height: 28rem;
        }
    }


/*product-banner*/
.product-banner {
}
.product-banner .link{
    color: #555555;
}
.product-banner .link a{
    color: #999999;
}
.product-banner .link span{
    color: #DDDDDD;
}
.product-banner .content{
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 5rem;
    padding-bottom: 5rem;
    column-gap: 8rem;
}
.product-banner .content .text>span{
    width: 20rem;
    height: 2.8rem;
    background-color: var(--rbtn);
    color: #fff;
    display: flex;
    border-radius: 0.5rem;
    justify-content: center;
    align-items: center;
    font-family: 'Metropolis-MediumItalic';
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
}
.product-banner .content .text>h1{
    font-family: 'Metropolis-Bold';
    font-size: 4.2rem;
    color: #222222;
    line-height: 5.8rem;
    margin-bottom: 2rem;
}
.product-banner .content .text li{
    font-size: 1.8rem;
    font-family: 'Metropolis-Regular';
    color: #222222;
    margin-bottom: 3rem;
}
.product-banner .content .text li span{
    display: block;
    color: #999999;
    margin-bottom: 1rem;
}
.product-banner .content .text li>p{
    font-family: 'Metropolis-Medium';
    font-weight: 500;
    color: #222222;
}
.product-banner .content .text>p{
    font-family: 'Metropolis-Regular';
    font-size: 1.8rem;
    color: #555555;
    line-height: 2.8rem;
    margin-bottom: 6rem;
}
.product-banner .text .inquire{
    display: flex;
}
.product-banner .text .inquire a.btn{
    width: 20rem;
    height: 6rem;
    background-color: var(--rbtn);
    color: #fff;
    transition: all .3s ease;
    border-radius: 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Metropolis-Medium';
    font-size: 1.6rem;
    text-transform:uppercase;
    margin-right: 4rem;
}
.product-banner .text .inquire a.btn:hover{
    background-color: var(--rbtnhover);
    transform: translateY(-0.5rem);
}
.product-banner .text .inquire .email a{
    text-decoration: underline;
    color: #222222;
}
.product-banner .text .inquire .email a:hover{
    color: var(--rbtnhover);
    text-decoration: none;
}
.product-banner .text .inquire .email span{
    display: block;
    color: #999999;
}
.product-banner .img{
    text-align: center;
}
.product-banner .img-list{
    width: 100%;
    max-width: 60rem;
    position: relative;
    overflow: hidden;
}
.product-banner .img-list .slick-dots{
    bottom: 2rem;
    column-gap: 0.4rem;
    display: flex;
    justify-content: center;
}
.product-banner .img-list .slick-dots li{
    margin:0;
    width: 0.6rem;
    height: 0.6rem;
    border: 1px solid #0049BA;
    border-radius: 50%;
}
.product-banner .img-list .slick-dots li.slick-active{
    width: 1.2rem;
    background-color: var(--bbtn);
    border-radius: 10rem;
}
.product-banner .img-list .slick-dots li button{
    display: none;
}
.slick-dotted.slick-slider{
    margin-bottom: 0;
}

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

}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    
}
@media screen and (max-width: 1280px) {
    .product-banner .content{
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media screen and (max-width: 1024px) {
    .product-banner .content .text>h1,
    .product-banner .content .text>p{
        margin-bottom: 3rem;
    }
    .product-banner .content .text>h1{
        font-size: 4rem;
    }
    .product-banner .content{
        grid-template-columns: auto;
        row-gap: 5rem;
        padding: 6rem;
        justify-items: center;
    }
}
@media screen and (max-width: 800px) {
    
}
@media screen and (max-width: 600px) {
    .product-banner .content{
        padding: 3rem;
        row-gap: 3rem;
    }
    .product-banner .content .text>h1,
    .product-banner .content .text>p{
        margin-bottom: 2rem;
    }
    .product-banner .content .text>h1{
        font-size: 3rem;
        line-height: 4rem;
    }
    .product-banner .text .inquire{
        flex-direction: column;
        row-gap: 3rem;
    }
}

/*product-single*/
    .product-single{
        width: 100%;
        max-width: 130rem;
        margin: 0 auto;
    }
    #main_content{
        border: 1px solid #DDDDDD;
        border-bottom: none;
    }
    .product-single .pro_nav{
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        align-items: center;
        background-color: #F8F8F8;
        padding-left: 8rem;
        padding-right: 8rem;
        font-family: 'Metropolis-Medium';
        
    }
    .product-single .pro_nav>ul{
        display: flex;
        column-gap: 8rem;

    }
    .product-single .pro_nav>ul a{
        color: #222222;
        display: flex;
        padding-top: 4rem;
        padding-bottom: 4rem;
        border-bottom: 1px solid #FFF;
        font-size: 2rem;
    }
    .product-single .pro_nav>ul a:hover{
        color: var(--bbtn);
        position: relative;
        border-bottom: 1px solid var(--bbtn);
    }
    .product-single .pro_nav .inquire{
        color: var(--bbtn);
        text-transform: uppercase;
        font-size: 1.8rem;
    }
    .product-single .pro_nav .inquire:hover{
        text-decoration: underline;
    }

    .product-single .wp-block-columns{
        margin: 0;
        padding: 0;
    }
    .product-single .item{
        padding-top: 8rem;
        padding-left: 8rem;
        padding-right: 8rem;
    }
    .product-single>h2{
        padding-left: 8rem;
        padding-right: 8rem;
    }
    .product-single .item h2{
        font-family: 'Metropolis-Bold';
        font-size: 3.6rem;
        color: #222222;
        margin-bottom: 4rem;
    }
    .product-single .item .wp-block-table table{
        border: 1px solid #EAEAEA;
        font-size: 1.6rem;
        overflow-x: auto;
        white-space: nowrap;
    }
    .product-single .item .wp-block-table{
        margin-bottom: 6rem;
    }
    .product-single .item .wp-block-table table td{
        font-family: 'Poppins-Regular';
        color: #777777;
        border: 1px solid #EAEAEA;
        padding: 1.6rem 3rem;
    }
    .product-single .item .wp-block-table table th{
        border: 1px solid #EAEAEA;
    }
    .product-single .item .wp-block-table table th,
    .product-single .item .wp-block-table table strong
    {
        font-family: 'Poppins-MediumItalic';
        color: #222222;
    }
    .product-single .item .wp-block-columns.is-layout-flex{
        gap: 8rem;
    }
    .product-single .item .wp-block-gallery{
        gap: 2rem;
        flex-wrap: nowrap;
        margin-bottom: 0;
        margin-top: 6rem;
    }
    .product-single .item .wp-block-gallery img{
        transition: all .6s ease;
    }
    .product-single .item .wp-block-gallery img:hover{
        filter: brightness(1.03);
        transform: scale(1.03);
    }
    .product-single .item p{
        font-family: 'Metropolis-Regular';
        font-size: 1.8rem;
        color: #555555;
        line-height: 2.8rem;
        margin-bottom: 2rem;
    }
    .product-single .item img{
        display: block;
        margin: 0 auto;
    }
    .product-single .parameter table{
        width: 100%;
        text-align: center;
        vertical-align:middle;
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #EAEAEA;
        font-size: 1.6rem;
    }
    .product-single .parameter table th{
        font-family: 'Poppins-MediumItalic','Metropolis-RegularItalic';
        padding: 1.5rem;
        color: #222222;
        border: 1px solid #EAEAEA;
        transition: all .3s ease;
    }
    .product-single .parameter table td{
        font-family: 'Poppins-Regular','Metropolis-Regular';
        color: #777777;
        padding: 1.5rem;
        border: 1px solid #EAEAEA;
        transition: all .3s ease;
    }
    .product-single .parameter table td:hover,.product-single .parameter table th:hover{
        transform: translateY(-0.5rem);
    }
    .product-single .advantages ul{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 4rem;
        row-gap: 4rem;
    }
    .product-single .advantages ul li{
        background-color: #F8F8F8;
        padding:3rem 5rem 5rem;
        font-family: 'Metropolis-Regular';
        font-size: 1.8rem;
        color: #555555;
        line-height: 2.8rem;
        position: relative;
        transition: all .3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .product-single .advantages ul li:hover{
        box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
        transform: translateY(-0.5rem);
    }
    .product-single .advantages ul li span{
        display: block;
        margin-right: 1rem;
        width: 6rem;
        height: 6rem;
        text-align: center;
        line-height: 6rem;
        background-color: #E8F5FF;
        border-radius: 50%;
        position: relative;
        z-index: 2;
        text-indent: 2rem;
        margin-bottom: 2rem;
    }
    .product-single .advantages ul li span::before{
        content: '';
        display: block;
        width: 6rem;
        height: 6rem;
        border: 1px dotted #005DAB;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 1rem;
        z-index: 1;
    }


    .product-single .structure{
        margin-bottom: 6rem;
    }
    .product-single .structure h2{
        margin-bottom: 8rem;
    }
    .product-single .structure ul{
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 2rem;
        row-gap: 6.5rem;
    }
    .product-single .structure li{
        background-color: #F6F6F6;
        padding: 6rem 3rem 4rem;
        transition: all .3s ease;
        border-radius: 0.3rem;
        border: 0.8rem solid #F2F2F2;
        text-align: center;
        position: relative;
    }
    .product-single .structure li:hover{
        box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
        transform: translateY(-0.5rem);
    }
    .product-single .structure li h3{
        font-family: 'Metropolis-Bold';
        font-size: 2rem;
        color: #222222;
        margin-bottom: 2rem;
    }
    .product-single .structure li p{
        font-family: 'Metropolis-Regular';
        font-size: 1.6rem;
        color: #555555;
        line-height: 2.8rem;
    }
    .product-single .structure li .iconfont{
        display: inline-block;
        margin-top: -5rem;
        width: 8rem;
        height: 8rem;
        background-color: #26AD6F;
        text-align: center;
        line-height: 8rem;
        border-radius: 50%;
        position: relative;
        color: #FFF;
        font-size: 2.5rem;
        position: absolute;
        top: 0;
        left: calc((100% - 8rem) / 2);
    }
    .product-single .structure li .iconfont::after{
        width: 6.5rem;
        height: 6.5rem;
        content: '';
        display: block;
        border: 2px dotted #fff;
        border-radius: 50%;
        position: absolute;
        top: 6px;
        left: 6px;
    }
    .product-single .wp-block-image.size-full{
        margin-bottom: 6rem;
    }

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

    }
    @media screen and (max-width: 1600px) {
        
    }
    @media screen and (max-width: 1440px) {
        .product-single .pro_nav{
            padding-left: 6rem;
            padding-right: 6rem;
        }
        .product-single .pro_nav>ul{
            column-gap: 6rem;
        }
        .product-single .item{
            padding-top: 6rem;
            padding-left: 6rem;
            padding-right: 6rem;
        }
        .product-single>h2{
            padding-left: 6rem;
            padding-right: 6rem;
        }
        .product-single .item .wp-block-columns.is-layout-flex{
            gap: 6rem;
        }
    }
    @media screen and (max-width: 1280px) {
        .product-single .parameter table{
            display: block;
            overflow-x: auto;
            white-space: nowrap;
        }
    }
    @media screen and (max-width: 1024px) {
        .product-single .structure ul{
            grid-template-columns: auto auto;
        }
        .product-single .item h2{
            font-size: 3rem;
            margin-bottom: 3rem;
        }
        .product-single .item,.product-single .item p{
            margin-bottom: 4rem;
        }
        .product-single .pro_nav{
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .product-single .pro_nav>ul{
            column-gap: 5rem;
        }
        .product-single .item{
            padding-top: 5rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .product-single>h2{
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .product-single .item .wp-block-columns.is-layout-flex{
            gap: 5rem;
        }
    }
    @media screen and (max-width: 800px) {
        .product-single .parameter table{
            display: block;
            overflow-x: scroll;
        }
        .product-single ul{
            display: none;
        }
        .product-single .pro_nav{
            padding-left: 4rem;
            padding-right: 4rem;
        }
        .product-single .pro_nav>ul{
            column-gap: 4rem;
        }
        .product-single .pro_nav .inquire{
            display: none;
        }
        .product-single .new-item:hover{
            padding-top: 4rem;
            padding-left: 4rem;
            padding-right: 4rem;
        }
        .product-single>h2{
            padding-left: 4rem;
            padding-right: 4rem;
        }
        .product-single .item .wp-block-columns.is-layout-flex{
            gap: 4rem;
        }
        .product-single .item .wp-block-gallery{
            flex-direction: column;
        }
        .product-single .item .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){
            width: 100%;
        }
    }
    @media screen and (max-width: 600px) {
        .product-single .advantages ul,.product-single .structure ul{
            grid-template-columns: auto;
            row-gap: 2rem;
        }
        .product-single .item h2{
            font-size: 2.6rem;
            margin-bottom: 2rem;
        }
        .product-single .item,.product-single .item p{
            margin-bottom: 3rem;
        }
        .product-single .pro_nav{
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .product-single .pro_nav>ul{
            column-gap: 3rem;
        }
        .product-single .item{
            padding-top: 3rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .product-single>h2{
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .product-single .item .wp-block-columns.is-layout-flex{
            gap: 3rem;
        }
    }

/*certif*/
.certif{
    background:url(../images/certif.png) no-repeat #FCFBF9;
    background-size: cover;
    padding: 10rem 0 5.6rem;
}
.certif>div{
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
    background: url(../images/certif-bg.png) no-repeat bottom center;
    padding-bottom: 20rem;
}
.certif h2{
    font-family: 'Metropolis-Bold';
    font-size: 4.8rem;
    color: #222222;
    margin-bottom: 6rem;
}
.certif .list{
    display: flex;
    align-items: center;
    column-gap: 7rem;
    justify-content: center;
}
.certif .list span{
    width: 6.2rem;
    height: 6.2rem;
    background-color: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
    transition: all .3s ease;
}
.certif .list span:hover{
    color: var(--bbtn);
    border-color: var(--bbtn);
    transform: translateY(-0.5rem);
}
.certif .list>div{
    width: 100%;
    display: grid;
    grid-template-columns: 6rem auto 6rem;
    align-items: center;
    column-gap: 7rem;
}
.certif .list .slick-slide{
    border: 2px solid #F2E3B9;
    padding: 2rem;
    margin-right: 4rem;
}

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

}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    
}
@media screen and (max-width: 1280px) {
    .certif>div{
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media screen and (max-width: 1024px) {
    .certif{
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    .certif h2{
        font-size: 4.2rem;
    }
}
@media screen and (max-width: 800px) {
    .certif{
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .certif h2{
        font-size: 4rem;
    }
}
@media screen and (max-width: 600px) {
    .certif{
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .certif h2{
        font-size: 3.6rem;
    }
}


/*service*/
.service{
    padding-top: 8rem;
    padding-bottom: 10rem;
}
.service>div{
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
}
.service>div h1{
    font-size: 4.2rem;
    margin-bottom: 3rem;
    text-transform: uppercase;
}
.service.remote h2{
    font-size: 2.8rem;
    position: relative;
    margin-left: 10rem;
    margin-bottom: 4rem;
    text-transform: uppercase;
}
.service.remote h2{
    max-width: 54rem;
}
.service.remote h2::before{
    content: '';
    display: block;
    width: 6.5rem;
    height: 6.5rem;
    background-color: #005DAB;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -10.2rem;
}
.service.remote h2::after{
    content: '01.';
    display: block;
    font-family: 'Metropolis-Black';
    font-size: 2.4rem;
    color: #005DAB;
    text-align: center;
    width: 6rem;
    height: 6rem;
    line-height: 6rem;
    background-color: #FFF;
    border-radius: 50%;
    border: 2px dotted #005DAB;
    position: absolute;
    top: 0;
    left: -9rem;
}
.remote h2:nth-of-type(2):after{
    content: '02.';
}
.remote h2:nth-of-type(3):after{
    content: '03.';
}
.remote h2:nth-of-type(4):after{
    content: '04.';
}
.remote h2:nth-of-type(5):after{
    content: '05.';
}

.remote>div .first img{
    margin-top: -18rem;
}

.remote>div p{
    padding-left: 10rem;
    margin-bottom: 3rem;
    max-width: 34rem;
}
.remote>div .wp-block-columns{
    display: flex;
    justify-content: space-between;
}
.remote .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column{
    flex-basis: auto;
    flex-grow: unset;
}
.remote>div .hasline{
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    
}
.remote>div .hasline p{
    max-width: 46rem;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 12rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #DDDDDD;
}
.remote>div .hasline p:last-of-type{
    border-bottom: 10px solid #26AD6F;
}

.remote .strength{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 10rem;
}
.remote .strength li{
    background: #FFFFFF;
    border-radius: 40px 0px 40px 0px;
    box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.06);
    padding: 4rem;
    transition: all .3s ease;
}
.remote .strength li:hover{
    transform: translateY(-0.5rem);
}
.remote .strength li .iconfont{
    display: block;
    width: 7rem;
    text-align: center;
    height: 7rem;
    line-height: 7rem;
    background: #FFFFFF;
    box-shadow: 0px 0px 12px 1px rgba(38,173,111,0.2);
    border-radius: 1rem;
    font-size: 2.8rem;
    color: #26AD6F;
    margin-bottom: 3rem;
}
.remote .strength li p{
    max-width: 100%;
    padding: 0;
    margin: 0;
}
@media screen and (max-width: 1600px) {

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

}
@media screen and (max-width: 1024px) {
    .remote>div .wp-block-columns{
        flex-direction: column;
    }
    .remote>div .first img{
        margin-top: 0;
    }
    .remote>div p{
        max-width: 100%;
    }
    .remote>div .hasline p{
        max-width: 100%;
    }
}
@media screen and (max-width: 800px) {

}
@media screen and (max-width: 600px) {
    .remote .strength{
        grid-template-columns: 1fr;
    }
    .service.remote h2{
        line-height: 4rem;
    }
}



.service.quality h1{
    max-width: 62rem;
    margin-bottom: 5rem;
}
.service.quality h1:first-of-type{
    max-width: 60rem;
    position: relative;
    margin-bottom: 10rem;
}

.quality h1:first-of-type::after{
    content: '';
    display: block;
    width: 29rem;
    height: 29rem;
    background-color: #F8F8F8;
    position: absolute;
    border-radius: 50%;
    left: -15rem;
    z-index: -1;
}
.quality h1:first-of-type::before{
    width: 10rem;
    height: 4px;
    background-color: #005DAB;
    display: block;
    content: '';
    position: absolute;
    left: 0;
    bottom: -6rem;
}
.quality .wp-block-columns{
    column-gap: 13rem;
    justify-content: space-between;
}
.quality .wp-block-column p{
    max-width: 50rem;
}
.quality .wp-block-image img{
    margin-top: -17rem;
}
.quality .iso{
    border-radius: 20px 20px 20px 20px;
    border: 1px solid #DDDDDD;
    padding: 3.5rem 7rem;
    margin-top: 10rem;
    margin-bottom: 10rem;
}
.quality .iso ul{
    display: flex;
    justify-content:space-between;
    align-items: center;
    border: 2px dotted #DDDDDD;
}
.quality .iso img{
    width: 7.5rem;
    height: auto;
}

.quality .measures ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3.5rem;
}
.quality .measures li{
    padding: 4rem;
    background: #F8F8F8;
    border-radius: 20px 20px 20px 20px;
    color: #666666;
}
.quality .measures li:hover{
    background: #005DAB;
    color: #FFFFFF;
}
.quality .measures li:hover p{
    color: #FFFFFF;
}
.quality .measures li .iconfont{
    display: block;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    text-align: center;
    line-height: 6rem;
    font-size: 3rem;
    color: #fff;
    background: #005DAB;
    border: 2px dotted #005DAB;
    margin-bottom: 2rem;
}
.quality .measures li:hover .iconfont{
    border: 2px dotted #fff;
}


@media screen and (max-width: 1600px) {
    .service{
        padding-bottom: 8rem;
    }
}
@media screen and (max-width: 1440px) {
    .service>div{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .quality .wp-block-columns{
        column-gap: 7rem;
    }
    .service{
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
@media screen and (max-width: 1024px) {
    .quality .wp-block-columns{
        column-gap: 5rem;
    }
    .quality .wp-block-column p{
        max-width: 100%;
    }
    .service.quality h1:first-of-type,.service.quality h1{
        max-width: 100%;
        font-size: 4rem;
    }
    .service{
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .quality .measures ul{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 800px) {
    .quality .wp-block-columns{
        flex-direction: column;
    }
    .quality .wp-block-image img{
        margin-top: 0;
    }
    .service{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .service.quality h1:first-of-type{
        margin-bottom: 6rem;
    }
    .quality h1:first-of-type::before{
        bottom: -3rem;
    }
}
@media screen and (max-width: 600px) {
    .service{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .quality .measures ul{
        grid-template-columns: 1fr;
    }
}



.service.on-site{

}
.on-site h1{
    max-width: 70rem;
}
.on-site h2{
    font-size: 2.8rem;
    text-transform: uppercase;
    margin-bottom: 7rem;
    position: relative;
    padding-right: 50rem;
}
.on-site h2::after{
    content: '';
    width: 3rem;
    height: 3rem;
    background-color: #92D6B6;
    display: block;
    position: absolute;
    bottom:7rem;
    right: 7rem;
}
.on-site h2::before{
    content: '';
    width: 6rem;
    height: 6rem;
    background-color: #005DAB;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
}
.on-site .tech {
    margin-bottom: 10rem;
    padding-bottom: 10rem;
    border-bottom: 1px solid #DDDDDD;
}
.on-site .tech ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
}
.on-site .tech li{
    padding: 4rem 4rem 6rem;
    border-bottom: 5px solid #26AD6F;
    background-color: #F8F8F8;
    transition: all .3s ease;
}
.on-site .tech li:hover{
    box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
    transform: translateY(-0.5rem);
}
.on-site .tech li span{
    display: block;
    margin-bottom: 2rem;
    font-family: 'Metropolis-Black';
    font-size: 4.2rem;
    color: #222222;
}
.on-site .tech li p{
    color: #666666;
}
.on-site .wp-block-columns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10rem;
    margin-bottom: 8rem;
}
.on-site .wp-block-columns p{
    color: #666666;
    font-size: 2rem;
    line-height: 3.6rem;
}
@media screen and (max-width: 1600px) {
    .on-site .wp-block-columns{
        gap: 8rem;
    }
    .on-site .tech{
        margin-bottom: 8rem;
        padding-bottom: 8rem;
    }
}
@media screen and (max-width: 1440px) {
    .on-site h2{
        padding-right: 10rem;
    }
    .on-site .wp-block-columns{
        gap: 6rem;
    }
    .on-site .tech{
        margin-bottom: 6rem;
        padding-bottom: 6rem;
    }
}
@media screen and (max-width: 1024px) {
    .on-site .tech ul{
        grid-template-columns: 1fr 1fr;
    }
    .on-site .wp-block-columns{
        gap: 5rem;
    }
    .service>div h1{
        font-size: 4rem;
        line-height: 5rem;
    }
    .on-site .tech{
        margin-bottom: 5rem;
        padding-bottom: 5rem;
    }
}
@media screen and (max-width: 800px) {
    .on-site .wp-block-columns{
        gap: 4rem;
        grid-template-columns: 1fr;
    }
    .on-site .tech{
        margin-bottom: 4rem;
        padding-bottom: 4rem;
    }
}
@media screen and (max-width: 600px) {
    .on-site .tech ul{
        grid-template-columns: 1fr;
    }
    .on-site .wp-block-columns{
        gap: 3rem;
    }
    .on-site .tech{
        margin-bottom: 3rem;
        padding-bottom: 3rem;
    }
}

/*响应式完成latest-news*/
    .latest-news{
        background-color: #F8F8F8;
        padding-top: 10rem;
        padding-bottom: 10rem;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .latest-news>span{
        font-family: 'Metropolis-Medium';
        font-size: 1.8rem;
        color: var(--rbtn);
        margin-bottom: 2rem;
    }
    .latest-news>h2{
        font-family: 'Metropolis-Black';
        font-size: 5.6rem;
        color: #222222;
        margin-bottom: 5rem;
        text-transform: uppercase;
    }
    .latest-news>a{
        font-family: 'Metropolis-Medium';
        font-size: 1.8rem;
        color: #555555;
        text-decoration: underline;
    }
    .latest-news>a:hover{
        color: var(--hover);
        text-decoration: none;
    }
    .latest-news>div{
        width: 100%;
        max-width: 160rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: auto auto auto;
        column-gap: 4rem;
        margin-bottom: 6rem;
    }
    @media screen and (max-width: 1600px) {
        .latest-news>div{
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    .latest-news>div .new-item{
        max-width: 100%;
    }
    .latest-news>div .new-item .item-text{
        padding: 6rem;
    }
    .latest-news>div .item-img img{
        width: 100%;
    }
    .latest-news>div .new-item:nth-child(2){
        display: flex;
        flex-direction: column-reverse;
    }
    @media screen and (max-width: 1680px) {

    }
    @media screen and (max-width: 1600px) {
        
    }
    @media screen and (max-width: 1440px) {
        .latest-news>h2{
            font-size: 5rem;
        }
    }
    @media screen and (max-width: 1280px) {
        .latest-news{
            padding-top: 8rem;
            padding-bottom: 8rem;
        }
        .latest-news>div{
            grid-template-columns: auto auto;
            justify-content: center;
            row-gap: 4rem;
        }
        .latest-news>div .new-item{
            max-width: 50.6rem;
        }
        .latest-news>div .new-item:nth-child(2){
            display: block;
        }
        
    }
    @media screen and (max-width: 1024px) {
        .latest-news{
            padding-top: 6rem;
            padding-bottom: 6rem;
        }
        .latest-news>h2{
            font-size: 4rem;
        }
    }
    @media screen and (max-width: 800px) {
        .latest-news>div{
            grid-template-columns: auto;
            justify-content: center;
            row-gap: 3rem;
            column-gap: 3rem;
        }
        .latest-news>div .new-item .item-text{
            padding: 3rem 3rem 5rem;
        }
    }
    @media screen and (max-width: 600px) {
        .latest-news{
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        .latest-news>h2{
            font-size: 3.6rem;
            margin-bottom: 4rem;
        }
    }
/*home-project*/
.home-project{
    background-color: #fff;
}
.home-project>div{
    grid-template-columns: auto auto;
    column-gap: 4rem;
    row-gap: 4rem;
}
.home-project>div .project-item{
    max-width: 78rem;
}
.home-project>div .project-item .item-text div{
    padding: 6rem;
}
@media screen and (max-width: 1680px) {

}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    
}
@media screen and (max-width: 1280px) {
    
}
@media screen and (max-width: 1024px) {
    
}
@media screen and (max-width: 800px) {
    .home-project>div{
        grid-template-columns: auto;
    }
}
@media screen and (max-width: 600px) {
    
}

/*home-about*/

.home-about{
    padding-top: 8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 6rem;
}
.home-about h1{
    text-transform: uppercase;
    font-size: 4.2rem;
    line-height: 5.8rem;
}
.home-about>div:first-of-type h1:nth-of-type(2){
    margin-bottom: var(--rem10);
    position: relative;
    margin-bottom: 10rem;
}
.home-about>div:first-of-type h1:nth-of-type(2)::after{
    content: '';
    width: 11rem;
    height: 0.4rem;
    background-color: #005DAB;
    display: block;
    position: absolute;
    bottom: calc(var(--rem5) * -1);
}
.home-about>div p{
    font-size: 2rem;
    line-height: 3.6rem;
}
.home-about>div:first-child{
    display: flex;
    flex-direction: column;
    margin-left: 16rem;
    margin-bottom: 4rem;
}
.home-about>div:first-child>div:first-child{
    max-width: 52rem;
}
.home-about>div:first-child>div:first-child p{
    margin-bottom: 4rem;
}
.home-about>div:first-child>div:last-child{
    padding-top: 11rem;
    max-width: 112rem;
}
.home-about div a.btn{
    display: block;
    width: 20rem;
    height: 6rem;
    text-align: center;
    line-height: 6rem;
    background-color: #26AD6F;
    border-radius: 6px 6px 6px 6px;
    color: #fff;
    font-family: 'Metropolis-Medium';
    font-size: 1.8rem;
    margin-top: 10rem;
    transition: all .3s ease;
}
.home-about div a.btn:hover{
    background-color: var(--rbtnhover);
    box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
    transform: translateY(-0.5rem);
}


@media screen and (max-width: 1600px) {
    .home-about{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .home-about>div:first-child{
        margin-left: 0;
    }
    .home-about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 8rem;
    }
    .home-about div a.btn{
        margin-top: 8rem;
    }
}
@media screen and (max-width: 1440px) {
    .home-about{
        padding-top: 7rem;
        margin-bottom: 6rem;
    }
    .home-about h1{
        font-size: 4rem;
        line-height: 5rem;
    }
    .home-about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 6rem;
    }
    .home-about div a.btn{
        margin-top: 6rem;
        width: 18rem;
        height: 5rem;
        line-height: 5rem;
    }
}
@media screen and (max-width: 1024px) {
    .home-about{
        padding-top: 5rem;
        margin-bottom: 5rem;
        flex-direction: column;
    }
    .home-about h1{
        font-size: 3.6rem;
        line-height: 4rem;
    }
    .home-about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 5rem;
    }
    .home-about div a.btn{
        margin-top: 5rem;
        width: 16rem;
        font-size: 1.6rem;
    }
}
@media screen and (max-width: 800px) {
    .home-about{
        padding-top: 4rem;
        margin-bottom: 4rem;
    }
    .home-about h1{
        font-size: 3rem;
        line-height: 4rem;
    }
    .home-about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 4rem;
    }
    .home-about div a.btn{
        margin-top: 4rem;
        width: 15rem;
        height: 4.5rem;
        line-height: 4.5rem;
    }
}
@media screen and (max-width: 600px) {
    .home-about{
        padding-top: 3rem;
        margin-bottom: 3rem;
    }
    .home-about h1{
        font-size: 2.6rem;
        line-height: 3rem;
    }
    .home-about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 3rem;
    }
    .home-about div a.btn{
        margin-top: 3rem;
        width: 14rem;
        height: 4rem;
        line-height: 4rem;
        font-size: 1.4rem;
    }
}


/*hot-product*/
.hot-product{
    background: #F8F8F8;
}
.hot-product>div{
    width: 100%;
    max-width: 160rem;
    margin: 0 auto;
    position: relative;
    display: block;
}
@media screen and (max-width: 1600px) {
    .hot-product>div{
        padding-left: 2rem;
        padding-right: 2rem;
    }   
}
.hot-product>div>ul{
    position: absolute;
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
    top: calc((100% - 64rem) / 2);
    left: -6rem;
}
.hot-product>div>ul li{
    writing-mode: vertical-lr;
    padding: 2rem 1.2rem;
    font-family: 'Metropolis-Regular';
    font-size: 1.6rem;
    color: #555555;
    text-transform: uppercase;
    cursor: pointer;
}
.hot-product>div>ul li.now{
    color: #fff;
    background-color: #E05A52;
}
.hot-product>div>div{
    width: 100%;
    margin: 0 auto;
    grid-template-columns: auto auto auto auto;
    gap: 4rem;
}
.hot-product>div>div .product-item{
    max-width: 37rem;
}
@media screen and (max-width: 1760px) {
    .hot-product>div>ul{
        grid-column-start: 1;
        grid-column-end: 5;
        position: inherit;
        justify-content: center;
        flex-direction: inherit;
        top: auto;
        left: auto;
        margin-bottom: 5rem;
    }
    .hot-product>div>ul li{
        writing-mode: inherit;
    }
}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    
}
@media screen and (max-width: 1280px) {
    .hot-product>div>ul{
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .hot-product>div>div{
        grid-template-columns: auto auto;
        justify-content: center;
        row-gap: 3rem;
        column-gap: 3rem;
    }
}
@media screen and (max-width: 1024px) {
    
}
@media screen and (max-width: 800px) {
    .hot-product>div>ul{
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .hot-product>div>div{
        grid-template-columns: auto;
        row-gap: 3rem;
    }
}
@media screen and (max-width: 600px) {
    
}

/*home-banner*/
.home-banner{
    background: linear-gradient(360deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
.home-banner>div .slick-slide{
    position: relative;
}
.home-banner>div .text{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #FFFFFF;
    animation:mymove 3.6s;
    -webkit-animation:mymove 3.6s; /* Safari 和 Chrome */
}
@keyframes mymove{
    from{transform:translateY(-100rem); opacity: 0.1;}
    to{transform: none;opacity: 1;}
}
@-webkit-keyframes mymove{
    from{transform:translateY(-100rem); opacity: 0.1;}
    to{transform: none;opacity: 1;}
}
.home-banner>div .text>div{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 160rem;
    margin: 21rem auto 0;
}
@media screen and (max-width: 1800px) {
    .home-banner>div .text>div{
        padding-left: 10rem;
        padding-right: 10rem;
        margin-top: 16rem;
    }  
}
@media screen and (max-width: 1600px) {
    .home-banner>div .text>div{
        padding-left: 8rem;
        padding-right: 8rem;
        margin-top: 14rem;
    }     
}
.home-banner>div .text>div>span{
    display: inline-block;
    font-family: 'Metropolis-Black';
    font-size: 3.6rem;
    margin-bottom: 3.8rem;
    display: flex;
    align-items: flex-start;
}
.home-banner>div .text>div>span i{
    display: inline-block;
    font-family: 'Metropolis-SemiBold';
    font-size: 1.6rem;
    color: var(--rbtn);
    font-style: normal;
    margin-left: 1.5rem;
}
.home-banner>div .text h1{
    font-family: 'Metropolis-Black';
    font-size: 5.6rem;
    line-height: 6.7rem;
    color: #FFFFFF;
    margin-bottom: 3.7rem;
    width: 100%;
    max-width: 56rem;
    text-transform: uppercase;
}
.home-banner>div .text h1>span{
    display: block;
    color: var(--rbtn);
}
.home-banner>div .text p{
    font-family: 'Metropolis-Medium';
    font-size: 2.8rem;
    line-height: 3.6rem;
    margin-bottom: 3.8rem;
    width: 100%;
    max-width: 70rem;
    color: #fff;
}
.home-banner>div .text a.map{
    display: flex;
    align-items: center;
    font-family: 'Metropolis-Medium';
    font-size: 1.8rem;
    color:#fff;
    transition: all .3s ease;
}
.home-banner>div .text a.map i{
    font-style: normal;
}
.home-banner>div .text a.map:hover{
    transform: translateY(-0.5rem);
    color: var(--hover);
}
.home-banner>div .text a.map span{
    display: inline-block;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    background-color: var(--rbtn);
    border-radius:50%;
    margin-left: 2rem;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
}
.home-banner>div .text a.map:hover span{
    background-color: var(--rbtnhover);
}

.home-banner .slick-dots{
    bottom: 2rem;
    column-gap: 0.4rem;
    display: flex;
    justify-content: center;
}
.home-banner .slick-dots li{
    margin:0;
    width: 0.6rem;
    height: 0.6rem;
    background-color: rgba(255, 255, 255, 0.5);
    /* border: 1px solid #FFF; */
    border-radius: 50%;
    margin-right: 1rem;
}
.home-banner .slick-dots li.slick-active{
    width: 1.4rem;
    background-color: #FFF;
    border-radius: 10rem;
}
.home-banner .slick-dots li button{
    display: none;
}
/* .slick-dotted.slick-slider{
    margin-bottom: 0;
} */




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

}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    .home-banner>div .text>div{
        margin-top: 16rem;
    }
    .home-banner>div .text>div>span{
        margin-bottom: 3rem;
        font-size: 3rem;
    }
    .home-banner>div .text h1{
        font-size: 4rem;
        line-height: 4rem;
        margin-bottom: 3rem;
    }
}
@media screen and (max-width: 1280px) {
    
    /* .home-banner>div .text p{
        display: none;
    } */
}
@media screen and (max-width: 1024px) {
    
}
@media screen and (max-width: 800px) {
    .home-banner>div .text>div{
        margin-top: 12rem;
    }
    .home-banner>div .text>div>span{
        margin-bottom: 2rem;
        font-size: 2rem;
    }
    .home-banner>div .text h1{
        font-size: 3.6rem;
        line-height: 3.6rem;
        margin-bottom: 2rem;
    }
    .home-banner>div .text h1>span{
        display: inline-block;
    }
    .home-banner>div .text p{
        /* display: none; */
    }
}
@media screen and (max-width: 600px) {
    
}






/*banner-link*/
.banner-link{
    background-color: #38383A;
    font-family: 'Metropolis-Medium';
    font-size: 2.4rem;
}
.banner-link ul{
    display: grid;
    width: 100%;
    max-width: 160rem;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}
.banner-link ul li{
    text-align: center;
    width: 100%;
    height: 12rem;
    line-height: 11rem;
}
.banner-link ul li:hover{
    
background: #252525;
color: #FFFFFF;
position: relative;
}
.banner-link ul li:hover::before{
    content: '';
    width: 100%;
    height: 4px;
    background-color: var(--rbtn);
    position: absolute;
    top: 0;
    left: 0;
}
.banner-link ul li .iconfont{
    display: inline-block;
    font-size: 3.6rem;
    margin-right: 2.6rem;
}
.banner-link ul li:last-child .iconfont{
    width: 4rem;
    height: 4rem;
    text-align: center;
    line-height: 4rem;
    border: 1px solid #a1a1a1;
    border-radius: 50%;
    font-size: 1.2rem;
}
.banner-link ul li a{
    color: #A1A1A1;
}
.banner-link ul li a i{
    font-style: normal;
    padding-bottom: 1px;
    border-bottom: 1px solid #A1A1A1;
}
.banner-link ul li:hover a {
    color: #FFFFFF;
}
.banner-link ul li:hover a i{
    border-color: #FFFFFF;
}

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

}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    
}
@media screen and (max-width: 1280px) {
    .banner-link ul{
        font-size: 2rem;
    }
    .banner-link ul li .iconfont{
        font-size: 3.2rem;
        margin-right: 1.6rem;
    }
}
@media screen and (max-width: 1024px) {
    
}
@media screen and (max-width: 800px) {
    .banner-link ul{
        grid-template-columns: auto;
        font-size: 2rem;
    }
    .banner-link ul li .iconfont{
        font-size: 2.8rem;
        margin-right: 1rem;
    }
}
@media screen and (max-width: 600px) {
    
}


/*sidebar*/
.sidebar {
    position: fixed;
    top: 20%;
    right: 0;
    z-index: 9;
}
.sidebar li {
    margin-bottom: 1px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 400;
    font-family: 'Poppins-Regular';
    color: #555555;
    position: relative;
}

.sidebar li>a {
    color: #555555;
    display: block;
    width: 7rem;
    height: 6rem;
    background: #F6F6F6;
    border-radius: 2px 2px 2px 2px;
    overflow: hidden;
}

.sidebar li span {
    display: block;
    margin-top: 14px;
}

.sidebar li .iconfont {
    font-size: 24px;
    color: #0098F8;
}
.sidebar li:last-child .iconfont{
    color: #555555;
}
.sidebar li>a:hover {
    background-color: var(--bbtnhover);
    color: #FFFFFF;
}
.sidebar li div a{
    color: #555555;
}
.sidebar li div a:hover{
    color: var(--hover);
}
.sidebar li a:hover .iconfont {
    color: #FFFFFF;
}
.sidebar li .right_hide{
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 1rem -2px rgb(51 51 51 / 15%);
    color: #333;
    font-size: 14px;
    left: -10px;
    line-height: 16px;
    opacity: 0;
    padding: 12px 16px;
    position: absolute;
    top: 50%;
    transform: translate(-110%,-50%);
    transition: all .5s ease;
    visibility: hidden;
    white-space: nowrap;
}
.sidebar li .right_hide:before {
    border-bottom: 6px solid transparent;
    border-left: 8px solid #fff;
    border-top: 6px solid transparent;
    content: "";
    position: absolute;
    right: -8px;
    top: calc(50% - 4px);
}
.sidebar li:hover .right_hide {
    opacity: 1;
    transform: translate(-100%,-50%);
    visibility: visible;
}
@media screen and (max-width: 1680px) {

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

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

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

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

}
@media screen and (max-width: 800px) {
    .sidebar{
        display: none;
    }
}
@media screen and (max-width: 600px) {
    
}
/*header*/
.home{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.home #menu-main>li>a{
    color: #fff;
}
.home .header-button .iconfont{
color: #FFFFFF;
}

.home #menu-main>li.current-menu-ancestor>a, 
.home #menu-main>li.current-menu-item>a,
.home #menu-main>li.current-menu-parent>a, 
.home #menu-main>li:hover>a{
    color: var(--hover);
}



/*contact*/
.contact{
    width: 100%;
    max-width: 130rem;
    margin: 0 auto;
    padding-top: 10rem;
    padding-bottom: 10rem;
    display: grid;
    grid-template-columns: auto 35rem;
    column-gap: 14rem;
}
.contact .info{
    display: flex;
    align-items: flex-end;
    position: relative;
}
.contact .info::before{
    width: 1px;
    height: 40rem;
    content: '';
    display: block;
    background-color: #DDDDDD;
    position: absolute;
    left: -7rem;
}
.contact .info h5{
    text-transform: uppercase;
}
.contact .info li{
    margin-top: 4rem;
}
.contact .info li p a{
    color: #555555;
}
.contact .info li p a.email{
    text-decoration: underline;
}
.contact .info li p a:hover{
    color: var(--hover);
}
.contact .contact-form h1{
    font-size: 4.2rem;
    margin-bottom: 4.6rem;
    text-transform:uppercase;
    margin-bottom: 5rem;
}
.contact .contact-form .input{
    border: 2px solid #DDDDDD;
}
.contact .contact-form .input span,
.contact .contact-form .area span{
    color: #999999;
}

.contact .contact-form .area{
    border: 2px solid #DDDDDD;
}
.contact .contact-form .submit{
    background-color: var(--bbtn);
    border: 0;
}
.contact .contact-form .submit:hover{
    background-color: var(--bbtnhover);
}
.contact .contact-form .submit button{
    color: #fff;
}
.contact .contact-form .submit .iconfont{
    margin-left: 2rem;
}
@media screen and (max-width: 1680px) {

}
@media screen and (max-width: 1600px) {
    
}
@media screen and (max-width: 1440px) {
    
}
@media screen and (max-width: 1280px) {
    .contact{
        padding-left: 2rem;
        padding-right: 2rem;
        grid-template-columns: auto;
    }
}
@media screen and (max-width: 1024px) {
    .contact{
        padding-top: 6rem;
        padding-bottom: 6rem;
        column-gap: 3rem;
    }
}
@media screen and (max-width: 800px) {
    .contact{
        grid-template-columns:auto;
        column-gap: 0;
        row-gap: 5rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .contact .info ul{
        row-gap: 4rem;
    }
    .contact .info li::after{
        bottom: -2rem;
    }
}
@media screen and (max-width: 600px) {
    
}


.contact-bottom{
    background-color: #005DAB;
}
.contact-bottom>div{
    width: 100%;
    max-width: 130rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10rem;
    padding-bottom: 10rem;
    display: flex;
    justify-content: space-between;
    color: #FFF;
    flex-wrap: wrap;
}
.contact-bottom>div>div:first-child{
    padding-top: 3rem;
    margin-bottom: 5rem;
}
.contact-bottom h1{
    text-transform: uppercase;
}
.contact-bottom h1,.contact-bottom h3{
    color: #FFFFFF;
}
.contact-bottom h3{
    margin-top: 6rem;
    margin-bottom: 10rem;
}
.contact-bottom>div>div:first-child{
    width: 100%;
    max-width: 83rem;
}
.contact-bottom>div>div>div{
    width: fit-content;
    border-radius: 10rem;
    background-color: #FFFFFF;
    align-items: center;
    padding: 0.5rem;
}
.contact-bottom>div>div>div .iconfont{
    display: inline-block;
    text-align: center;
    line-height: 4.6rem;
    width: 4.6rem;
    height: 4.6rem;
    border: 2px solid #26AD6F;
    color: #26AD6F;
    font-size: 2.4rem;
    border-radius: 50%;
    margin-left: 0.7rem;
}
.contact-bottom>div>div>div p{
    padding-left: 1.2rem;
    padding-right: 2.4rem;
}
.contact-bottom>div>div>div .btn:hover{
    color: #FFFFFF;
    background-color: var(--rbtnhover);
}
.contact-bottom>div>div:last-child>span{
    display: block;
    width: 20rem;
    height: 20rem;
    text-align: center;
    line-height: 20rem;
    background: #26AD6F;
    border-radius: 20rem 20rem 20rem 0px;
    font-family: 'Inter';
    font-size: 14rem;
    color: #fff;
    float: right;
    margin-bottom: 7rem;
}
.contact-bottom>div>div:last-child ul{
    clear: both;
    font-weight: 500;
    font-family: 'Metropolis-Regular';
    font-size: 2.8rem;
}
.contact-bottom>div>div:last-child li{
    margin-top: 2rem;
}
.contact-bottom>div>div:last-child ul a{
    color: #fff;
}
.contact-bottom>div>div:last-child ul a:hover{
    color: var(--hover);
}
.contact-bottom .flex{
    display: flex;
}
.contact-bottom .btn{
    font-family: 'Metropolis-Medium';
    width: 20rem;
    height: 6rem;
    text-align: center;
    line-height: 6rem;
    font-size: 1.8rem;
    background: #26AD6F;
    color: #FFF;
    border-radius: 10rem;
}
@media screen and (max-width:1600px) {
    .contact-bottom>div{
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}
@media screen and (max-width:1440px) {
    .contact-bottom>div{
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .contact-bottom h3{
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
}
@media screen and (max-width:1300px) {
    .contact-bottom>div{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .contact-bottom h3{
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
    .contact-bottom>div{
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media screen and (max-width:1024px) {}
@media screen and (max-width:800px) {
    .contact-bottom>div{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .contact-bottom h3{
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}
@media screen and (max-width:600px) {
    .contact-bottom .btn{
        display: none;
    }
}

/*case-single*/
.case-single{
    width: 100%;
    max-width: 130rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: auto 31rem;
    column-gap: 9rem;
    padding-top: 4rem;
    padding-bottom: 10rem;
}
.case-single .title{
    padding-bottom: 2rem;
    border-bottom: 1px solid #EAEAEA;
    margin-bottom: 4rem;
}
.case-single .title h2{
    margin-bottom: 4rem;
}
.case-single .info p{
    color: #666666;
    margin-bottom: 2rem;
}
.case-single .info .iconfont{
    display: inline-block;
    color: var(--bbtn);
    margin-right: 1rem;
}
.case-single p{
    color: #555555;
    line-height: 2.8rem;
    margin-bottom: 2rem;
}
.case-single figure{
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.case-single .wp-block-gallery{
    flex-wrap: nowrap;
    gap: 2rem;
    margin-top: 6rem;
    margin-bottom: 4rem;
}

.case-single .side .sns{
    display: flex;
    justify-content: flex-end;
    column-gap: 1.5rem;
    margin-bottom: 6rem;
}
.case-single .side .sns .iconfont{
    display: inline-block;
    width: 5rem;
    height: 5rem;
    text-align: center;
    line-height: 5rem;
    color: #999999;
    border-radius: 50%;
    border: 1px solid #EAEAEA;
    font-size: 2rem;
}
.case-single .side .sns a:hover .iconfont{
    color: #FFF;
    background: #0049BA;
    box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.16);
}
.case-single .side>div{
    background-color: #F8F8F8;
    margin-bottom: 2rem;
    padding-top: 4rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
}
.case-single .side>div h5{
    text-transform: uppercase;
    margin-bottom: 2rem;
}
.case-single .side .prod ul li{
    font-size: 1.6rem;
    font-family: 'Metropolis-Medium';
    border-bottom: 1px dotted #DDDDDD;
}
.case-single .side .prod ul li:last-child{
    border: none;
}
.case-single .side .prod ul li a{
    display: inline-block;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    color: #666666;
}
.case-single .side .prod ul li a:hover{
    color: var(--bbtn);
}
.case-single .side .cont ul{
    background-color: #fff;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}
.case-single .side .cont ul li{
    border-bottom: 1px dotted #DDDDDD;
    display: block;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: 'Metropolis-Medium';
}
.case-single .side .cont ul li:last-child{
    border-bottom: none
}
.case-single .side .cont ul li span{
    display: block;
    font-size: 1.6rem;
    color: var(--bbtn);
    margin-bottom: 1rem;
}
.case-single .side .cont ul li a{
    font-size: 1.8rem;
    color: #222222;
}
.case-single .side .cont ul li a:hover{
    color:var(--hover);
}
@media screen and (max-width: 1600px) {
    .case-single{
        padding-bottom:8rem;
    }
}
@media screen and (max-width: 1440px) {
    .case-single{
        padding-bottom:6rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media screen and (max-width: 1024px) {
    .case-single{
        padding-bottom:5rem;
        grid-template-columns: auto;
        row-gap: 5rem;
    }
}
@media screen and (max-width: 800px) {
    .case-single{
        padding: 4rem;
        row-gap: 4rem;
    }
}
@media screen and (max-width: 600px) {
    .case-single{
        padding: 3rem;
        row-gap: 3rem;
    }
}




/*about*/
.about{
    padding-top: 8rem;
}
.about h1{
    text-transform: uppercase;
    font-size: 4.2rem;
    line-height: 5.8rem;
}
.about>div:first-of-type h1:nth-of-type(2){
    margin-bottom: var(--rem10);
    position: relative;
    margin-bottom: 10rem;
}
.about>div:first-of-type h1:nth-of-type(2)::after{
    content: '';
    width: 11rem;
    height: 0.4rem;
    background-color: #005DAB;
    display: block;
    position: absolute;
    bottom: calc(var(--rem5) * -1);
}
.about>div{
    width: 100%;
    max-width: 130rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10rem;
    margin-bottom: 6rem;
}
.about>div p{
    font-size: 2rem;
    line-height: 3.6rem;
}
.about>div:first-child{
    width: 100%;
    max-width: 192rem;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4rem;
    column-gap: normal;
}
.about>div:first-child>div:first-child{
    max-width: 52rem;
}
.about>div:first-child>div:first-child p{
    margin-bottom: 4rem;
}
.about>div:first-child>div:last-child{
    padding-top: 11rem;
    max-width: 112rem;
}
@media screen and (max-width: 1800px) {
    .about{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 8rem;
    }
}
@media screen and (max-width: 1440px) {
    .about>div:first-child>div:first-child{
        max-width: 100%;
    }
    .about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 6rem;
    }
}
@media screen and (max-width: 1024px) {
    .about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 5rem;
    }
}
@media screen and (max-width: 900px) {
    .about>div:first-child{
        flex-direction: column;
    }
    .about>div:first-child>div:last-child{
        padding-top: 0;
    }
    .about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 4rem;
    }
    .about h1{
        font-size: 4rem;
    }
}
@media screen and (max-width: 600px) {
    .about>div:first-of-type h1:nth-of-type(2){
        margin-bottom: 3rem;
    }
}





.about .data{
    width: 100%;
    max-width: 192rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 8rem;
    display: block;
}
.about .data>div{
    padding-top: 6rem;
    padding-bottom: 6rem;
    display: flex;
}
.about .data>div>div{
    width: 100%;
    max-width: 130rem;
    margin-left: auto;
    margin-right: auto;
}
.about .data h2,.about .data h5{
    color: #FFFFFF;
}
.about .data h2{
    font-size: 6.4rem;
}
.about .data h5{
    font-family: 'Poppins-Medium';
    font-weight: 500;
}
.about .data>div{
    align-items: flex-end;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 93, 171, 0.52);
}
.about .data>div ul{
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 1600px) {
    .about .data h2{
        font-size: 6rem;
    }
    .about .data>div>div{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .about>div{
        gap: 8rem;
    }
}
@media screen and (max-width: 1440px) {
    .about .data>div{
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
    .about .data h2{
        font-size: 5rem;
    }
    .about>div{
        gap: 6rem;
    }
}
@media screen and (max-width: 1024px) {
    .about .data>div{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .about .data h2{
        font-size: 4rem;
        line-height: 5rem;
    }
    .about .data>div ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: space-between;
        gap: 3rem;
    }
    .about .data img{
        height: 50vh;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .about>div{
        gap: 5rem;
    }
}
@media screen and (max-width: 800px) {
    
    .about .data>div{
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    .about .data h2{
        font-size: 3.6rem;
        line-height: 4rem;
    }
    .about>div{
        grid-template-columns: auto;
        gap: 4rem;
    }
}
@media screen and (max-width: 600px) {
    .about .data>div{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .about>div{
        gap: 3rem;
    }

}



.about hr{
    display: block;
    width: 100%;
    height: 1rem;
    background-color: #F8F8F8;
    margin-bottom: 10rem;
    border: none;
}

.about div a.btn{
    display: block;
    width: 20rem;
    height: 6rem;
    text-align: center;
    line-height: 6rem;
    background-color: #26AD6F;
    border-radius: 6px 6px 6px 6px;
    color: #fff;
    font-family: 'Metropolis-Medium';
    font-size: 1.8rem;
    margin-top: 10rem;
}

.about h3{
    text-transform: uppercase;
    font-size: 3.6rem;
    color: #005DAB;
    margin-bottom: 4.5rem;
}
.about div h1:last-of-type{
    margin-bottom: 10rem;
}
.about .partner h1:last-of-type{
    margin-bottom: 4rem;
}
.about .wp-block-button{
    width: 20rem;
    text-align: center;
    height: 6rem;
    line-height: 6rem;
    background-color: #26AD6F;
    border-radius: 0.6rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-top: 10rem;
}
.about .wp-block-button a{
    color: #FFFFFF;
}





.about .exhibition{
    width: 100%;
    max-width: 192rem;
    display: block;
    background:url(../images/exhibition.png) no-repeat;
    background-size: cover;
    padding-top: 10rem;
    padding-bottom: 10rem;
    margin-bottom: 0;
}
.about div.exhibition h1{
    width: 100%;
    max-width: 130rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 4rem;
    margin-bottom: 0;
}
.about .exhibition>div{
    width: 100%;
    max-width: 130rem;
    margin-left: auto;
    margin-right: auto;
}

.about .exhibition>div ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    flex-wrap: wrap;
    gap: 1rem;
}
@media screen and (max-width: 1600px) {
    .about .exhibition>div{
        padding-left: 3rem;
        padding-right: 3rem;
    }
}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1200px) {
    .about .exhibition>div ul{
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media screen and (max-width: 800px) {
    .about .exhibition>div ul{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 600px) {
    .about .exhibition>div ul{
        grid-template-columns: 1fr;
    }
}



/*home-case*/
.home-case{
    background-color: #F8F8F8;
    padding-top: 10rem;
}
.home-case h1{
    text-transform: capitalize;
    max-width: 160rem;
    margin-left: auto;
    margin-right: auto;
}
.home-case>div{
    width: 100%;
    max-width: 178rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    column-gap: 3rem;
}
.home-case>div .iconfont{
    display: inline-block;
    width: 6rem;
    text-align: center;
    height: 6rem;
    line-height: 6rem;
    background-color: #fff;
    color: #555555;
    font-size: 2.4rem;
    border-radius: 50%;
}
.home-case>div .slick-list{
    max-width: 160rem;
    padding-top: 5rem;
    padding-bottom: 10rem;
}
.slick-track{
    display: flex;
}
.home-case>div .product-item{
    max-width: 37rem;
    margin-right: 4rem;
    background-color: #fff;
    box-shadow: 0px 0px 80px 1px rgba(0,0,0,0.06);
}
.home-case>div .product-item .iconfont{
    width: 4rem;
    height: 4rem;
    text-align: center;
    line-height: 4rem;
    background-color: #fff;
    border: 2px solid #A1A1A1;
    color: #555555;
    font-size: 1.2rem;
    margin-left: 2rem;
}
.home-case>div .product-item a i{
    font-style: normal;
    text-decoration: underline;
}
.home-case>div .product-item a:hover .iconfont{
    background-color: #005DAB;
    border-color: #005DAB;
    color: #fff;
}
.home-case>div .product-item .item-text{
    min-height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media screen and (max-width: 1600px) {
    .home-case{
        padding-top: 8rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .home-case>div .slick-list{
        padding-bottom: 8rem;
    }
}
@media screen and (max-width: 1440px) {
    .home-case{
        padding-top: 6rem;
    }
    .home-case>div .slick-list{
        padding-bottom: 6rem;
    }
}
@media screen and (max-width: 1024px) {
    .home-case{
        padding-top: 5rem;
    }
    .home-case>div .slick-list{
        padding-bottom: 5rem;
    }
}
@media screen and (max-width: 800px) {
    .home-case{
        padding-top: 4rem;
    }
    .home-case h1{
        font-size:3.6rem;
    }
    .home-case>div>span{
        display: none !important;
    }
    .home-case>div .product-item{
        max-width: 30rem;
    }
    .home-case>div .slick-list{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}
@media screen and (max-width: 600px) {
    .home-case{
        padding-top: 3rem;
    }
    .home-case>div .product-item{
        max-width: 25rem;
    }
    .home-case>div .slick-list{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}




/*home-news*/
.home-news{
    background-color: #005DAB;
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.home-news h1{
    color: #fff;
    max-width: 160rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8rem;
}
.home-news>div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: rgba(255,255,255,0.2);
}
.home-news>div{
    width: 100%;
    max-width: 160rem;
    margin-left: auto;
    margin-right: auto;
}
.home-news>div .new-item{
    background-color: #005DAB;
    display: grid;
    grid-template-columns: 30rem auto;
    padding: 6rem;
    gap: 4rem;
}
.home-news>div .new-item:hover{
    transform: translateY(0);
    /* background: linear-gradient(180deg, rgba(0,93,171,0.1) 0%, #005DAB 100%); */
    /* box-shadow: 0px 10px 20px 1px #004E90; */
    box-shadow: 0px 6px 6px 1px #004E90;
    /* border-radius: 0px 0px 0px 0px; */
}
.home-news>div .new-item:nth-of-type(3):hover{
    transform: translateY(0);
    box-shadow: 0px -6px 6px 1px #004E90;
}
.home-news>div .new-item:nth-of-type(4):hover{
    transform: translateY(0);
    box-shadow: 0px -6px 6px 1px #004E90;
}

.home-news>div .item-text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.home-news>div .item-text span{
    font-size: 1.6rem;
    height: 4.6rem;
    color: #FFFFFF;
    font-family: 'Metropolis-Regular';
    margin-bottom: 0;
}
.home-news>div .item-text .item-title{
    height: 100%;
}
.home-news>div .item-text .item-title a{
    font-family: 'Metropolis-SemiBold';
    font-size: 2rem;
    color: #FFFFFF;
    line-height: 2.8rem;
}
.home-news>div .item-text .item-time{
    color: #FFFFFF;
}
.home-news>div>div:nth-of-type(1){
    padding-left: 0;
    padding-top: 0;
}
.home-news>div>div:nth-of-type(2){
    padding-right: 0;
    padding-top: 0;
}
.home-news>div>div:nth-of-type(3){
    padding-bottom: 0;
    padding-left: 0;
}
.home-news>div>div:nth-of-type(4){
    padding-right: 0;
    padding-bottom: 0;
}
@media screen and (max-width: 1600px) {
    .home-news{
        padding-top: 8rem;
        padding-bottom: 8rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .home-news>div .new-item{
        padding: 5rem;
    }
}   
@media screen and (max-width: 1440px) {
    .home-news{
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .home-news>div .new-item{
        padding: 4rem;
        gap: 3rem;
    }
    .home-news h1{
        margin-bottom: 6rem;
    }
}
@media screen and (max-width: 1200px) {
    .home-news{
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .home-news{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .home-news>div .new-item{
        padding: 3rem;
        grid-template-columns: auto;
    }
    .home-news>div>div:nth-of-type(1),
    .home-news>div>div:nth-of-type(2),
    .home-news>div>div:nth-of-type(3),
    .home-news>div>div:nth-of-type(4)
    {
        padding: 3rem;
    }
    .home-news h1{
        margin-bottom: 5rem;
    }
}
@media screen and (max-width: 800px) {
    .home-news{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .home-news>div{
        grid-template-columns: auto;
    }
    .home-news>div .new-item{
        grid-template-columns: auto;
    }
    .home-news>div .item-text{
        padding-left: 0;
        padding-right: 0;
    }
    .home-news h1{
        margin-bottom: 4rem;
    }    
}
@media screen and (max-width: 600px) {
    .home-news h1{
        margin-bottom: 3rem;
    }
}






/*home-cat*/
.home-cat{
    padding-top: 10rem;
    padding-bottom: 8.5rem;
}
.home-cat>div{
    width: 100%;
    max-width: 160rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3.6rem;
}
.home-cat .more{
    color: #FFFFFF;
}
.home-cat .more i{
    font-style: normal;
    text-decoration: underline;
}
.home-cat .more .iconfont{
    display: inline-block;
    width: 4rem;
    text-align: center;
    height: 4rem;
    line-height: 4rem;
    border: 2px solid #A1A1A1;
    color: #FFFFFF;
    font-size: 1.2rem;
    margin-left: 2rem;
    border-radius: 50%;
}
.home-cat .more:hover i{
    color: var(--hover);
    text-decoration: none;
}
.home-cat .more:hover .iconfont{
    border-color: var(--hover);
    color: var(--hover);
}

@media screen and (max-width: 1600px) {
    .home-cat{
        padding-top: 9rem;
        padding-bottom: 8rem;
    }
    .home-cat>div{
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media screen and (max-width: 1440px) {
    .home-cat{
        padding-top: 8rem;
        padding-bottom: 7rem;
    }
}
@media screen and (max-width: 1200px) {
    .home-cat{
        padding-top: 8rem;
        padding-bottom: 7rem;
    }
    .home-cat>div{
        grid-template-columns: auto auto;
    }
}
@media screen and (max-width: 800px) {
    .home-cat{
        padding-top: 7rem;
        padding-bottom: 6rem;
    }
    .home-cat>div{
        grid-template-columns: auto;
        justify-content: center;
    }
}
@media screen and (max-width: 600px) {
    .home-cat{
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}






/*home-data*/
.wp-block-columns.home-data{
    position: relative;
    padding-top: 16.7rem;
    display: block;
    margin-bottom: 0;
}
.home-data .home-cont{
    width: 100%;
    max-width: 160rem;
    margin-left: auto;
    margin-right: auto;
    background: url(../images/home_ban.png) no-repeat;
    background-size: cover;
    padding: 10rem;
    position: absolute;
    top: 0;
    left: calc((100% - 160rem) / 2 );
}
.home-data .home-cont .sns{
    display: flex;
    gap: 4rem;
    margin-bottom: 5rem;
    flex-wrap: wrap;
}
.home-data .home-cont .sns .iconfont{
    font-size: 2rem;
    color: #FFFFFF;
}
.home-data .home-cont .sns .iconfont:hover{
    color: var(--hover);
}
.home-data .home-cont>div{
    gap: 5rem;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}
.home-data .home-cont>div p{
    font-family: 'Metropolis-Bold';
    font-size: 3.6rem;
    color: #FFFFFF;
    line-height: 5rem;
    max-width: 80rem;
}
.home-data .home-cont>div .btn{
    width: 24rem;
    height: 8rem;
    text-align: center;
    line-height: 8rem;
    background-color:#26AD6F;
    border-radius: 0.6rem;
    transition: all .3s ease;
}
.home-data .home-cont>div .btn:hover{
    background-color: var(--rbtnhover);
    box-shadow: 0 1.4rem 4.8rem -0.2rem rgba(0,26,55,.15);
    transform: translateY(-0.5rem);
}
.home-data .home-cont>div a .iconfont{
    display: inline-block;
    margin-left: 2rem;
    color: #FFFFFF;
    font-size: 2rem;
}
.home-data .home-cont>div a{
    font-family: 'Metropolis-Bold';
    font-size: 1.8rem;
    text-transform: uppercase;
    color: #FFFFFF;
}
.home-data .home-cont>div .link:hover{
    color: var(--hover);
}
.home-data .home-cont>div .link{
    text-decoration: underline;
}

.home-data .data>div{
    padding-top: 6rem;
    padding-bottom: 6rem;
    display: flex;
}
.home-data .data>div>div{
    width: 100%;
    max-width: 160rem;
    margin-left: auto;
    margin-right: auto;
}
.home-data .data h2,.home-data .data h5{
    color: #FFFFFF;
}
.home-data .data h2{
    font-size: 6.4rem;
}
.home-data .data h5{
    font-family: 'Poppins-Medium';
    font-weight: 500;
}
.home-data .data>div{
    align-items: flex-end;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 93, 171, 0.52);
}
.home-data .data>div ul{
    display: flex;
    justify-content: space-between;
}
.home-data .data>div li{
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

@media screen and (max-width: 1600px) {
    .home-data .home-cont{
        padding: 8rem;
        left: 0;
    }
    .home-data .home-cont>div{
        gap: 4.5rem;
    }
    .home-data .home-cont .sns{
        margin-bottom: 4.5rem;
    }
    .home-data .home-cont>div .btn{
        width: 22rem;
    }
    .home-data .data h2{
        font-size: 6rem;
    }
    .home-data .data>div>div{
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media screen and (max-width: 1440px) {
    .home-data .home-cont{
        padding: 6rem;
    }
    .home-data .home-cont>div{
        gap: 4rem;
    }
    .home-data .home-cont .sns{
        margin-bottom: 4rem;
    }
    .home-data .home-cont>div p{
        font-size: 3.2rem;
    }
    .home-data .home-cont>div .btn{
        width: 20rem;
        height: 7rem;
        line-height: 7rem;
    }
    .home-data .data img{
        width: 100%;
        height: 50vh;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .home-data .data h2{
        font-size: 5rem;
    }
    .home-data .data>div{
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
}
@media screen and (max-width: 1200px) {
    .home-data .home-cont{
        padding: 5rem;
    }
    .home-data .home-cont>div{
        gap: 3.5rem;
    }
    .home-data .home-cont .sns{
        margin-bottom: 3.5rem;
    }
    .home-data .home-cont>div p{
        font-size: 2.8rem;
        line-height: 4rem;
    }
    .home-data .home-cont>div .btn{
        width: 20rem;
        height: 6rem;
        line-height: 6rem;
    }
    .home-data .home-cont>div a{
        font-size: 1.6rem;
    }
    .home-data .data h2{
        font-size: 4rem;
        line-height: 5rem;
    }
    .home-data .data>div{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}
@media screen and (max-width: 800px) {
    .home-data .home-cont>div{
        gap: 3rem;
    }
    .home-data .home-cont{
        padding: 4rem;
    }
    .home-data .home-cont .sns{
        margin-bottom: 3rem;
    }
    .home-data .home-cont>div p{
        font-size: 2.4rem;
        line-height: 3rem;
    }
    .home-data .home-cont>div .btn{
        width: 18rem;
        height: 6rem;
        line-height: 6rem;
    }
    .home-data .home-cont>div a{
        font-size: 1.4rem;
    }
    .home-data .data h2{
        font-size: 3.6rem;
        line-height: 4rem;
    }
    .home-data .data>div li{
        gap: 2rem;
    }
    .home-data .data>div{
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}
@media screen and (max-width: 600px) {
    .home-data .home-cont{
        padding: 3rem;
    }
    .home-data .data>div{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}






/*弹出表单*/
.white-popup-block{background:#fff;margin:4rem auto;max-width:800px;padding:6rem;position:relative;width:auto}
.xz-form-popup-x .contact-form .input,
.xz-form-popup-x .contact-form .area{
    border: 2px solid #DDDDDD;
}
.xz-form-popup-x .form-des{
    margin-bottom: 3rem;
}
.xz-form-popup-x .contact-form .input span, 
.xz-form-popup-x .contact-form .area span,
.xz-form-popup-x .contact-form .input input,
.xz-form-popup-x .contact-form textarea
{
    color: #999999;
}


/*侧边工具条*/
.sider-contact {
    font-family: 'Poppins-Regular';
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: hsla(0,0%,97%,.5);
    border-radius: .8rem 0 0 .8rem;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all .5s ease;
    z-index: 999
}

.sider-contact.hide {
    transform: translate(100%,-50%)
}

.sider-contact.hide #sider-contact-switcher span {
    transform: rotate(180deg)
}

.right-nav {
    align-items: center;
    display: flex;
    flex-flow: column;
    font-size: 1.2rem;
    line-height: 1.4rem
}

.right-nav .btn-tit {
    transform: scale(.8)
}

.right-nav li {
    width: 7rem;
    height: 6rem;
    position: relative;
}

.right-nav li:first-child {
    background: #0279f9;
    border-radius: .8rem 0 0 0
}

.right-nav li:first-child a {
    border-radius: .8rem 0 0 0;
    color: #fff;
    
}

.right-nav li:last-child {
    border-radius: 0 0 0 .8rem;
    overflow: hidden
}

.right-nav li a {
    align-items: center;
    color: #1f1a17;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: center;
    transition: all .3s ease;
    width: 100%;
}

.right-nav>li>a:hover {
    background: #0279f9;
    color: #fff!important
}

.right-nav li:hover .iconfont {
    filter: brightness(1.1);
    transform: scale(1.1)
}

.right-nav li:hover .right_hide {
    opacity: 1;
    transform: translate(-100%,-50%);
    visibility: visible
}

.right-nav .iconfont {
    display: block;
    font-size: 1.6rem;
    margin-bottom: .2rem;
    transition: all .3s ease
}

.right-nav:hover li:first-child {
    background: transparent
}

.right-nav:hover li:first-child a {
    color: #1f1a17
}

.right_hide {
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 0 1rem -2px rgba(61,61,61,.15);
    color: #3d3d3d;
    font-size: 1.4rem;
    left: -10px;
    line-height: 1.6rem;
    opacity: 0;
    padding: 1rem;
    position: absolute;
    top: 50%;
    transform: translate(-110%,-50%);
    transition: all .5s ease;
    visibility: hidden;
    white-space: nowrap
}

.right_hide:before {
    border-bottom: 6px solid transparent;
    border-left: 8px solid #fff;
    border-top: 6px solid transparent;
    content: "";
    position: absolute;
    right: -8px;
    top: calc(50% - 4px)
}

.right_hide img {
    display: block;
    max-width: 10rem
}

#sider-contact-switcher {
    align-items: center;
    color: #1f1a17;
    cursor: pointer;
    display: flex;
    height: 6rem;
    justify-content: flex-end;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translate(-100%,-50%);
    width: 3rem;
    z-index: -1
}

#sider-contact-switcher span {
    font-size: 1.4rem;
    transition: all .3s ease
}

#sider-contact-switcher:after {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: hsla(0,0%,97%,.5);
    border-radius: .8rem;
    content: "";
    display: block;
    height: 5rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
    width: 5rem;
    z-index: -1
}

@media screen and (max-width: 810px) {
    .sider-contact {
        background-color:hsla(0,0%,100%,.6);
        border-radius: .8rem .8rem 0 0;
        bottom: 0;
        left: 0;
        top: auto;
        transform: translate(0);
        width: 100%
    }

    .right-nav {
        flex-flow: row
    }

    .right-nav li {
        flex: 1
    }

    .right-nav li:last-child {
        border-radius: 0 .8rem 0 0
    }

    #sider-contact-switcher,.right_hide {
        display: none
    }
}

@media screen and (max-width: 600px) {
    .right_li_swt,.right_li_wechat {
        display:none
    }

    .right-nav li {
        height: 4.6rem
    }
    .new-item, .product-item{
        max-width: 100%;
    }
}

@media screen and (max-width: 1600px) {
    .search-result{
        padding-left: 2rem;
        padding-right: 2rem;
    }
}