
@media screen and (min-width:1921px){
  :root{
    font-size: 20px;
  }
}
@media screen and (max-width:1680px){
  :root{
    font-size: 14px;
  }
}
@media screen and (max-width:1440px){
  :root{
    font-size: 12px;
  }
  .container:before,
  .container:after,
  .container>.bg{ display: none;}
  
  header{ width: 90vw;}
  .slideshow .itm .font{ left: 5vw;}
  .colorcate{ padding: 0 5vw 9.375vw;}

  .about{ padding: 6.25vw 5vw;}
  .about .details{ grid-column: 7 / 8;}
  .about .info{ grid-column: 1 / 8;}
  .about .video{ grid-column: 8 / 13;}

  .product{ padding: 6.25vw 5vw;}

  .news{ padding: 0 5vw;}
  .news .title-cn{ left: calc( 5vw + 1.875rem);}

  footer{ padding: 6.25vw 5vw 0;}

  .about-grid .row{ padding: 5rem 5vw;}

  .about-grid .row-1 .cover{ margin-left: -5vw;}

  .column-page{ max-width: 90vw;}

  .footer{ padding: 0 5vw;}

  .column-main{ max-width: 90vw;}

  .column{ max-width: 90vw;}

  .pro-loc{ max-width: 90vw;}
}
@media screen and (max-width:1280px){
  
}
@media screen and (max-width:1024px){
  :root{
    font-size: 14px;
  }

  header{ top: 5vw; width: 90vw; height: 3.5rem;}
  header .logo{ width: auto; padding: 0 .5rem;}
  header .logo img{ height: 2.5rem;}
  nav{ display: none;}
  header .menu{ display: block;}

  .slideshow,
  .slideshow .itm{ width: 100vw; height: 56.25vw;}
  .slideshow .itm .font .en{ font-size: 0.75rem;}
  .slideshow .itm .font .cn{ font-size: 1.5rem;}
  .slideshow .swiper-number{ display: none;}

  .colorcate{ padding: 0; margin: 0;}
  .colorcate .link{ gap: 1em}
  .colorcate .link a{ padding: 0 1em}
  .colorcate .w-block{ width: 100%; height: auto; padding: 5vw;}
  .colorcate .y-block{ width: 100%; height: auto; padding: 5vw; background: var(--secondary);}
  .colorcate .g-block{ float: none; width: 100%; height: auto; padding: 5vw; margin: 0;}
  .colorcate .details{ display: none;}
  .colorcate .swiper-button{ display: none;}

  .about{ position: relative; grid-gap: 5vw; padding: 5vw;}
  .about .title{ position: relative; grid-column: span 12; top: auto; left: auto; font-size: 2rem; background-image:-webkit-linear-gradient(var(--secondary) 50%,var(--white) 50%)}
  .about .details{ position: absolute; grid-column: auto; top: 5vw; right: 5vw; width: 4rem; height: 4rem; padding-bottom: 0;}
  .about .info{ grid-column: span 12; width: 100%; padding: 5vw;}
  .about .info .caption .en{ display: none;}
  .about .video{ position: relative; grid-row: auto; grid-column: span 12; padding-bottom: calc(100% / 16 * 9);}
  .about .number{ display: none;}

  .product .title .cn{ float: left; font-size: 1.5rem;}
  .product .title .en{ display: none;}
  .product .content{ width: 100%;}
  .product .content .swiper-container .itm{ width: 100%; padding-bottom: 100%;}
  .product .content .control{ flex-flow: column wrap; gap: 2.5vw}
  .product .content .control .category{ flex-flow: row wrap; justify-content: space-between; gap: .5rem; padding-top: 2.5vw;}
  .product .content .control .category a{ margin: 0;}

  .news{ padding: 5vw;}
  .news .title-cn{ position: relative; top: auto; left: auto; text-align: left; margin-bottom: 5vw; font-size: 1.5rem;}
  .news .title-en{ display: none;}
  .news .content{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .news .content .itm{ padding: 0;}
  .news .content .itm .day{ position: absolute; top: 0; right: 0;}
  .news .content .itm .details{ margin-top: 1rem; margin-bottom: 2rem;}
  .news .content .itm .cover{ padding-bottom: calc(100% / 16 * 9)!important;}

  footer{ grid-template-columns: 1fr; padding: 5vw; padding-bottom: 0;}
  .l-block .logo-w{ justify-content: space-between;}
  .l-block .logo-w img{ height: 2.2rem;}
  .l-block .web-map{ display: none;}

  .m-block{ grid-gap: 2.5vw;}
  .m-block .qrcode{ display: none;}

  .r-block{ padding: 0;}
  .r-block:after{ display: none;}
  .r-block .content{ grid-gap: 2.5vw; padding-top: 2.5vw;}

  .copyright{ grid-column: span 1; display: flex; flex-flow: column wrap;}

  .column-banner{ height: 60vw;}
  .column-banner .en{ font-size: 2rem;}
  .column-banner .cn{ font-size: 1.5rem;}
  .column-banner .line{ height: 3rem;}

  .column-category{ flex-flow: row wrap;}
  .column-category a{ padding: .5rem 1.5rem;}

  .contact-grid{ grid-template-columns: repeat(4,1fr);}
  .contact-grid .map{ grid-column: span 4; grid-row: auto; height: 100vw;}
  .contact-grid .itm{ grid-column: span 2!important;}
  .contact-grid .itm.phone{ margin-top: 0;}
  .contact-grid .itm em{ font-size: 2rem;}
  .contact-grid .gbook{ display: none;}
  .contact-grid .qrcode{ display: none;}
  .contact-grid .cover{ display: none;}

  .news-grid{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .news-grid .col{ grid-gap: 5vw;}
  .news-grid .col .title{ width: 100% !important; height: auto; margin: 0!important; padding: 1.875rem;}
  .news-grid .col .title .cn:after{ margin-top: 0.5em;}
  .news-grid .col .title .en{ text-align: right; font-size: 1rem;}
  .news-grid .col:last-child .title .en{ text-align: left;}

  .project-grid{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .project-grid .slide{ grid-column: span 1;}
  .project-grid .slide .swiper-slide{ grid-template-columns: 1fr;}
  .project-grid .slide .swiper-slide .info{ padding: 5vw;}
  .project-grid .slide .swiper-slide .info .tit{ margin: 1em 0 0;}
  .project-grid .slide .swiper-slide .info .details{ display: none;}
  .project-grid .slide .button{ top: calc( 50% + 5vw + 3rem); right: 5vw; bottom: auto;}

  .detect-grid{ grid-gap: 5vw;}
  .detect-grid .row{ grid-template-columns: 1fr!important; grid-template-areas: 'a''b';}
  .detect-grid .row .title{ grid-area: b!important; align-items: center!important;; padding: 0; padding-bottom: 3rem; margin: 0; background: none!important;}
  .detect-grid .row .title .cn{ padding: 2.5vw 0; margin: 0; font-size: 1.25rem;}
  .detect-grid .row .title .en{ display: none;}
  .detect-grid .row .title .prev,
  .detect-grid .row .title .next{ display: none;}
  .detect-grid .row .title .more{ height: 3rem;}
  .detect-grid .row .number{ width: 6rem; height: 3rem;}
  .detect-grid .row .swiper-container{ grid-area: a!important;}
  .detect-grid .row .swiper-container .itm .cover{ padding-bottom: calc(100% / 3 * 2);}
  .detect-grid .row .swiper-container .itm .info{ display: none;}

  .product-grid{ grid-gap: 5vw;}
  .product-grid .slide{ padding: 5vw 0;}
  .product-grid .slide .itm{ grid-template-columns: 1fr 4fr 1fr;}
  .product-grid .slide .itm .cate{ display: none;}
  .product-grid .slide .itm .tit{ font-size: 1rem;}
  .product-grid .slide .itm .cover{ padding-bottom: calc( 100% / 3 * 2);}
  .product-grid .slide .button .prev{ left: 5vw;}
  .product-grid .slide .button .next{ right: 5vw;}
  .product-grid .slide .pagination{ padding-top: 5vw;}
  .product-grid .row-1{ grid-template-columns: 1fr; grid-template-rows: repeat(3,1fr); grid-gap: 5vw;}
  .product-grid .row-1 .itm:first-child{ grid-row: auto;}
  .product-grid .row-1 .itm:first-child .box .info .cn{ margin: .5rem 0 2rem;}
  .product-grid .row-1 .itm:first-child .box .info .more{ display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; padding: 0; background: var(--secondary);}
  .product-grid .row-1 .itm:first-child .box .info .more:after{ content: '\e65e'; font-family: neko; font-size: 1rem; line-height: 1; color: var(--white)}
  .product-grid .row-1 .itm:first-child .box .info .more span{ display: none;}
  .product-grid .row-1 .itm:first-child .box .info .more i{ display: none;}
  .product-grid .row-1 .itm .box .info .en{ display: none;}
  .product-grid .row-2{ grid-template-columns: 1fr; grid-template-rows: repeat(3,1fr); grid-gap: 5vw;}
  .product-grid .row-2 .itm .box .info .en{ display: none;}

  .about-grid{ grid-gap: 5vw;}
  .about-grid .row{ padding: 0 5vw;}
  .about-grid .row-1{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .about-grid .row-1 .info{ grid-column: span 1; width: 100%; margin: 0; padding: 5vw;}
  .about-grid .row-1 .logo{ display: none;}
  .about-grid .row-1 .cover{ grid-column: span 1; width: 100%; height: 45vw; margin: 0;}
  .about-grid .row-1 .info .content{ margin: 2.5vw 0 5vw;}
  .about-grid .row-1 .info .number .itm{ flex-flow: column nowrap;}
  .about-grid .row-1 .info .number .itm .ico{ display: none;}
  .about-grid .row-1 .info .number .itm .num{ font-size: 2rem;}
  .about-grid .row-1 .info .number .itm .ins{ display: flex; line-height: 1;}
  .about-grid .row-1 .info .number .itm .ins span{ font-size: 0.875rem;}

  .about-grid .row-2{ grid-gap: 2.5vw;}
  .about-grid .row>.title>.en{ display: none;}
  .about-grid .row-2 .content{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .about-grid .row-2 .content .itm{ grid-column: span 1!important; padding: 0 5vw;}
  .about-grid .row-2 .content .itm .ico{ left: auto; right: 0;}
  .about-grid .row-2 .content .itm .info .cn{ font-weight: bold;}
  .about-grid .row-2 .content .itm .en{ display: none;}
  .about-grid .row-2 .content .itm .info .font br{display: none;}

  .about-grid .row-3 .grid{ grid-template-columns: 1fr; grid-gap: 2.5vw; width: 100%; padding: 0; margin: 0; background: none;}
  .about-grid .row-3 .grid .title{ grid-column: span 1; align-items: flex-start; width: 100%; height: auto; padding: 0; margin: 0; background: none;}
  .about-grid .row-3 .grid .title .cn{ margin: 0;}
  .about-grid .row-3 .grid .title .en{ display: none;}
  .about-grid .row-3 .grid .title .button{ display: none;}
  .about-grid .row-3 .grid .content{ grid-column: span 1; width: 100%;}
  .about-grid .row-3 .grid .content .itm{ width: 100%; padding-bottom: calc(100% / 3 * 2);}

  .about-grid .row-4 .content{ padding: 0 0 5vw;}

  .about-grid .row-5{ padding-bottom: 5vw;}
  .about-grid .row-5 .content{ grid-template-columns: repeat(2,1fr); grid-gap: 5vw; padding-top: 2.5vw;}
  .about-grid .row-5 .content .itm:nth-child(3){ grid-column: 2 / 3; margin-top: calc( -100% / 3 * 4 + 100% / 4 * 3);}
  .about-grid .row-5 .content .itm:nth-child(4){ grid-column: 1 / 2; margin-top: calc( -100% + 5vw);}
  .about-grid .row-5 .content .itm:nth-child(6){ margin-top: calc( -100% + 5vw);}
  .about-grid .row-5 .content .itm:nth-child(7){ grid-column: 1 / 2;}
  .about-grid .row-5 .content .itm:nth-child(8){ grid-column: 2 / 3;}

  .list-news,
  .list-album,
  .list-honor,
  .list-product{ grid-template-columns: 1fr; grid-gap: 5vw; padding-top: 5vw;}
  
  .list-album .itm .info{ background: var(--white);}
  .list-album .itm .more{ display: none;}

  .list-product .itm .info{ background: var(--white); justify-content: center;}
  .list-product .itm .info i{ display: none;}
  .list-product .itm .more{ display: none;}

  .list-honor .itm{ background: var(--white);}
  .list-honor .itm .cover img{ bottom: 0; left: 0; width: 90%; height: 90%; margin: auto;}
  .list-honor .itm .more{ display: none;}

  .column-page{ grid-gap: 5vw; padding-bottom: 0;}

  .location{ justify-content: flex-start; padding: 2.5vw 5vw;}

  .article{ padding: 5vw;}

  .footer .copyright{ padding: 5vw 0;}
  
  .pro-btn{ width: 10vw; height: 10vw;}
  .pro-btn span{ display: none;}
}
