@charset "utf-8";
@media screen and (min-width:1921px){
    :root{
        font-size: 20px;
    }
}
@media screen and (max-width:1680px){
    :root{
        font-size: 14px;
    }
    .row{ padding: 5vw;}

    .advantage .thumblist .itm .info .title{
        font-size: 1.9rem !important;
    }

    .advantage .thumblist .itm .info .caption{
        font-size: 1.5rem !important;
    }
}
@media screen and (max-width:1440px){
    :root{
        font-size: 12px;
    }

    .advantage .thumblist .itm .info .title{
        /*display: none;*/
        transition: 1s;
    }

    .advantage .thumblist .itm .info .caption{
        font-size: 1.75rem !important;
    }

    .advantage .thumblist .itm .info .content{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}
@media screen and (max-width:1366px){
    .products .category .itm{
        height: 80% !important;
        padding: 0 0.2rem !important;
    }

    .products .category .itm:hover{ padding: 0.6rem !important; background: #0f6f00;}


}
@media screen and (max-width:1280px){
    /*.advantage .taglist .itm{ height: auto; }*/
    .news .itm .info{
        padding: 1.75rem 0.9rem !important;
        width: 100%;
    }

    .news .itm .info .font {
        /* grid-area: b; */
        line-height: 2;
        width: 50%;
    }

    .news >.itm:nth-child(even)>.info{

        display: flex !important;
        flex-direction: row;
        justify-content: flex-end;
    }

    .news >.itm:nth-child(odd)>.info{

        display: flex !important;
        flex-direction: row;
        justify-content: flex-start;
    }

    .index .slide .itm .info{top:35vw}

    .cssTitle{

    }

}
@media screen and (max-width:1024px){
    header{ padding: 4vw;}
    header .logo{ width: 32vw; height: 8vw;}
    header .menu{ width: 8vw; height: 2vw;}
    header .menu .ico{ height: calc(4vw - 0.75rem * 1.5);}
    header .menu span{ letter-spacing: 0;}
    header .menu.close::after{ letter-spacing: 0;}
    header.color{ padding: 4vw;}
    header.color .menu.close::after{ color: var(--secondary);}
    /* common */
    .row{ padding: 5vw 5vw}
    /* index */
    .index .slide .itm .info img{ height: 40vw;}
    /*.index .slide .itm .media{ background: url('../img/media.webp') center center no-repeat; background-size: cover;}*/
    /*.index .slide .itm .media video{}*/
    /* about */
    .about .about-sub{ display: none;}
    .about .about-info{ grid-column: span 12;}
    .about .about-info .logo svg{ height: 6rem;}
    .about .about-cate{ grid-column: span 6;}
    .about .about-cate i{ font-size: 4rem;  }
    .about .about-cate .cn{ font-size: 1.25rem;}
    .about .about-cate .en{ font-size: .8rem;}
    .indexIcon .ccsIndex {width: 12%;}
    .ccsIndex .aboutColor{width: 12vw;height: 12vw;line-height: 12vw;}
    .aboutColor>img{width: 75%;}
    .indexIcon .about-cate:hover .aboutColor{ background: #0f6f00;border-radius: 50%;}
    .indexIcon .about-cate:hover .cn{ color: #0f6f00}
    .indexIcon .about-cate:hover .en{ color: var(--secondary)}
    .indexIcon .about-cate:hover .imgShow{ display: none;}
    .indexIcon .about-cate:hover .imgNone{ display: inline-block;}
    .indexCon {
        -webkit-line-clamp: 1;
    }

    #content{top: -10px;left: 15vw;width: 60vw}
    .advantage .taglist .itm .cn{color: #ffffff;line-height: 1.5}

    /* number */
    .row.number{ grid-template-columns: repeat(2,1fr);}
    /* advantage */
    .advantage .thumblist .itm{ grid-gap: 5vw}
    .advantage .thumblist .itm .cover{ grid-column: span 12; height: 100vw;}

    .advantage .thumblist .itm .info{ position: relative; grid-column: span 12; width: 100%;}
    .advantage .thumblist .itm .info .logo{ display: none;}
    .advantage .thumblist .itm .info .title{ font-size: 2.25rem; text-align: left;}
    .advantage .thumblist .itm .info .caption{ font-size: 1.75rem;}
    .advantage .thumblist .itm .info .content{ font-size: 1.25rem;  }
    .advantage .thumblist .itm .info-en{ display: none;}

    .advantage .taglist{ position: relative; right: auto; bottom: auto; width: 100%; margin-top: 5vw;top: 0}
    .advantage .taglist .itm .ico i{ font-size: 3rem;}
    .advantage .taglist .itm .ico span{ display: none;}
    .advantage .taglist .itm .ico::after{ font-size: 1rem; line-height: 1.5; color: var(--light); white-space: nowrap; transition: all cubic-bezier(0.45, 0.2, 0.1, 1) .5s;}
    /*.advantage .taglist .itm .cn{ display: none;}*/
    .advantage .taglist .itm.active::after{}
    .advantage .taglist .itm.active .ico i{ color: var(--secondary)}
    .advantage .taglist .itm.active .ico::after{ color: var(--primary)}

    .advantage .thumblist .itm .cover{width: 100%;}
    .advantage .taglist .cssJd:hover:after{ background: var(--primary);}
    .advantage .taglist .cssJd:hover .cn{ color: var(--light)}
    .advantage .taglist .cssJd:hover .ico span{ color: var(--light)}

    /* video */
    .row.video{ padding-top: 3vw;}
    .video .slogan,
    .video .slogan-en{ display: none;}

    /* products */
    .products .category{ display: none;}

    .products .content .itms .logo{ top: 5vw; left: 5vw; width: 24vw; height: 8vw;}

    .products .content .itms .product{ padding: 5vw}
    .products .content .itms .product .itm{ grid-template-columns: 100%; grid-template-areas: 'a''b''c';}
    .products .content .itms .product .itm .info{ grid-area: b; grid-gap: 2vw;}
    .products .content .itms .product .itm .info h2{ margin-bottom: 0;}
    .products .content .itms .product .itm .info h5{ font-size: 1.25rem;}
    .products .content .itms .product .itm .info h5 br{ display: none;}
    .products .content .itms .product .itm .thumb{ grid-area: a;left: 10%;}
    .products .content .itms .product .itm .buy{grid-area: c; margin-top: 4vw;margin-left: 0vw;}
    .products .content .itms .product .itm .buy a{ font-size: 1.25rem;}
    .ccsTitle{font-size: 3.5rem}
    .products .content .itms .current{ top: 95vw; right: 5vw; left: auto; transform: translateY(0) }
    .products .content .itms .current .cn,
    .products .content .itms .current .en{ display: none;}
    .products .content .itms .current i{ font-size: 2rem;}

    .products .content .itms .arrow span{ display: none;}

    .products .content .itms .list{ display: none;}
    /* billing */
    .billing .logo{ height: 2rem;}
    .billing .cn{ font-size: 1.5rem; letter-spacing: 0;}
    .billing .en{ font-size: 0.8rem;}

    /* news */
    .row.news{ grid-gap: 0;}
    .news .itm .info .font{width: 100%;}
    .news .itm{ margin-top: 5vw;}
    .news .itm .thumb{ grid-column: span 12!important;}
    .news .itm .info{ grid-column: span 12!important; margin: 0; display: block; padding: 5vw;}
    .news .itm .info .date{ float: right;}
    .news .itm .info .date .box{ padding: 1vw 2vw}
    .news .itm .info .date .box b{ font-size: 1rem;}
    .news .itm .info .date .box span{ font-size: .8rem;}

    .news .banner .logo{ display: none;}
    .news .banner .cn{ font-size: 1.5rem; letter-spacing: 0; text-align: center;}
    .news .banner .en{ font-size: 0.75rem; letter-spacing: 0;}

    /* commercial */
    .commercial{ height: 36vw;}

    /* environment */
    .environment{grid-gap: 5vw;}
    .environment .title{ grid-column: span 12; padding: 10vw 5vw; flex-flow: column nowrap; writing-mode: horizontal-tb;}
    .environment .title .en{ writing-mode: horizontal-tb;}
    .environment .title .en::after{ display: none;}
    .environment .title .cn{ writing-mode: horizontal-tb;}
    .environment .title .logo{ display: none;}
    .environment .itm{ grid-column: span 6 !important;}
    .environment .itm .thumb{ width: 100% !important; height: 0 !important; padding-bottom: 75% !important;}
    .environment .itm:last-child{ grid-column: span 12 !important;}
    .environment .itm:last-child .thumb{ padding-bottom: 37.5% !important}

    /* map */
    .map a{ width: 100%; padding: 2vw 5vw 5vw;}

    /* footer */
    footer{ background-size: 100%;}
    footer .foot .logo a{ width: 32vw; height: 8vw;}
    footer .foot .contact{ grid-column: span 6;}
    /*footer .foot .contact-en{ display: none;}*/
    footer .foot .qrcode{ display: none;}
    footer .foot .social{ grid-column: span 12; grid-template-columns: repeat(4,1fr);}
    footer .copyright{ flex-flow: row wrap; padding: .5rem 0; line-height: 1.5rem;}

    /* navigation */
    .navigation .content{ flex-flow: column nowrap; align-items: center;}
    .navigation .content ul{ padding: 0;}
    .navigation .content ul::before{ display: none;}
    .navigation .content ul li a{ text-align: center;}
    .navigation .content dl,
    .navigation .content .qrcode{ display: none;}

    .index .slide .itm .info{top: 55vw}
}
@media screen and (max-width: 640px){
    .advantage .taglist .itm .cn{width: 7vw;overflow: hidden;font-size: 1rem;}
    .jdShow,.jdNone{width: 100%}
    .ccsTitle {font-size: 2.5rem}
    .indexAbout {font-size: 0.8rem !important;}
    .indexCon {-webkit-line-clamp: 1 !important;font-size: 0.7rem !important;margin-top: 0 !important;}
    .ccsIndex .cn{font-size: 1rem;}
    footer .foot .contact {grid-column: span 12;margin-top: 1vw;}
    footer .foot .contact-en{ display: none;}
    header .menu .ico {
        height: calc(6vw - 0.75rem * 1.5);
    }
}