@charset "utf-8";
@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;
  }
}
@media screen and (max-width:1280px){
  
}
@media screen and (max-width:1024px){
  :root{
    font-size: 14px;
  }
  header .hotline,
  header .quick,
  nav a:not(.logo),
  .slideshow:after,
  .slideshow .mouse,
  .slideshow .swiper-button img{ display: none;}

  header{ padding: 0}
  nav .logo{ padding: .5rem;}
  nav .logo img{ height: 2.5rem;}

  header .toggle{ display: flex;}

  .slideshow,
  .slideshow .itm{ height: 100vw;}

  .slideshow .swiper-number{ left: 0; right: 0; bottom: 0.5rem; text-align: center;}
  .slideshow .swiper-number b,
  .slideshow .swiper-number span{ font-size: 1rem;}

  .hotproduct .hot-thumb,
  .hotproduct .hot-arrow,
  .hotproduct .hot-number{ display: none;}

  .hotproduct{ padding: 15vw 5vw 10vw;}

  .hotproduct:after{ width: 100%; background-color: #fff; background-size: 40vw;}

  .hotproduct .sec-title{ left: 5vw; line-height: 1;}
  .hotproduct .sec-title .cn{ font-size: 1.5rem;}
  .hotproduct .sec-title .en{ font-size: 1rem; text-transform: uppercase;}

  .hotproduct .hot-pro .itm .thumb,
  .hotproduct .hot-pro .itm .info{ grid-column: span 12;}

  .hotproduct .hot-pro .itm .info .caption .cn{ font-size: 1.5rem;}
  .hotproduct .hot-pro .itm .info .slogan{ padding: 1em 0 1em; font-size: 1.25rem;}
  .hotproduct .hot-pro .itm .info .attribute{ font-size: 1rem;}


  .about .slogan .subsection{ display: none;}

  .about{ padding: 10vw 5vw; grid-gap: 5vw;}
  .about .slogan,
  .about .information,
  .about .number{ grid-column: span 12;}

  .about .slogan{ text-align: right;}
  .about .slogan br{ display: none;}
  .about .slogan .cn{ font-size: 1.5rem;}
  .about .slogan .line{ display: none;}

  .about .information{ width: 100%; height: auto; margin: 0; padding: 5vw; padding-bottom: 15vw;}
  .about .information .title{ flex-flow: column nowrap; align-items: flex-start;}
  .about .information .title .cn{ font-size: 1.5rem; line-height: 1;}
  .about .information .title .en{ font-size: 1rem; line-height: 2; text-transform: uppercase; padding: 0;}
  .about .information .more{ margin-top: 5vw;}

  .about .information:after{ width: 15vw; height: 15vw;}

  .about .number{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5vw; width: 100%; height: auto; margin: 0; padding: 0; background: none;}
  .about .number .itm b{ font-size: 2rem;}

  .videos{ display: block; padding: 0;}
  .videos .thumb{ width: 100%; padding-bottom: calc(100% / 16 * 9); margin: 0;}
  .videos .banner{ width: 100%; height: 45vw; padding: 5vw; margin: 0;}
  .videos .banner .cn{ font-size: 1.5rem;}
  .videos .banner .line{ display: none;}
  .videos .banner .en{ font-size: 0.75rem;}
  .videos .banner img{ right: 5vw; bottom: 0; left: auto; width: 45%;}

  .area{ padding: 10vw 5vw 5vw;}
  .area:after{ width: 100vw;}
  .area .area-font{ grid-column: span 12; gap: 5vw;}
  .area .area-font .title .cn{ font-size: 1.5rem; line-height: 1;}
  .area .area-font .title .en{ font-size: 1rem; line-height: 2; text-transform: uppercase;}
  .area .area-font .desc,
  .area .area-font .desc b{ font-size: 1rem; line-height: 1.75; color: var(--desc)}

  .area .area-font .point .itm .title{ font-size: 1.25rem;}
  .area .area-font .point .itm .desc{ font-size: 0.875rem;}

  .area .area-thumb{ grid-column: span 12; width: 100%;}
  .area .area-thumb .itm .info,
  .area .area-thumb .area-contorl{ display: none;}

  .billing{ height: auto; padding: 5vw; text-align: center;}
  .billing .cn{ font-size: 1.5rem;}
  .billing .line{ display: none;}
  .billing .en{ font-size: 0.75rem; line-height: 1.25}

  .product{ padding: 5vw 0;}
  .product .sec-title{ position: relative; gap: 2.5vw; width: 100%; height: auto; padding: 5vw; transform: translateY(0);}
  .product .sec-title .cn{ font-size: 1.5rem; line-height: 1;}
  .product .sec-title .en{ font-size: 1rem; line-height: 1; text-transform: uppercase;}

  .product .sec-content .itm{ grid-column: span 2; width: 100%; height: 60vw;}
  .product .sec-content .itm .info .cn{ font-size: 1.5rem;}
  .product .sec-content .itm .info .slogan{ margin: 1em 0 1.5em; font-size: 1rem;}
  .product .sec-content .itm:first-child{ background-size: 40vw;}

  .news{ grid-gap: 5vw; padding: 5vw 5vw 10vw;}
  .news .sec-title{ align-items: flex-start;}
  .news .sec-title .title .cn{ font-size: 1.5rem; line-height: 1;}
  .news .sec-title .title .en{ font-size: 1rem; line-height: 2; text-transform: uppercase;}
  .news .sec-title .slogan{ display: none;}
  .news .sec-content{ grid-template-columns: 1fr; grid-template-areas: 'a' 'b'; grid-gap: 5vw;}
  .news .sec-content .list{ grid-area: b; grid-gap: 5vw;}
  .news .sec-content .list .itm{ grid-gap: 2.5vw;}
  .news .sec-content .list .itm .desc{ margin-bottom: 0;}
  .news .sec-content .slide{ grid-area: a; padding: 0;}
  .news .sec-content .slide .itm{ grid-gap: 2.5vw;}
  .news .sec-content .slide .itm .info{ grid-gap: 2.5vw; padding: 0;}
  .news .sec-content .slide .itm .info .desc{ margin-bottom: 0;}
  .news .sec-content .slide .arrow{ display: none;}

  .plant .sec-title{ display: none;}
  .plant .plant-cover{ grid-column: span 12; width: 100vw;}
  .plant .plant-thumb{ width: 90vw; padding: 10px;}

  .contact{ grid-template-columns: 1fr; padding: 5vw 5vw 15vw; grid-gap: 5vw;}
  .contact dl.chinese{ grid-gap: 2.5vw;}
  .contact .map{ height: 50vw;}
  .contact dl.english dt{ justify-content: flex-start;}
  .contact dl.english dd{ display: none;}

  footer{ grid-template-columns: 1fr; padding: 10vw 5vw 0;}
  footer .logo-w,
  footer .web-map{ display: none;}
  footer .qrcode{ justify-content: center;}
  footer .qrcode .itm{ width: 6rem;}
  footer .copyright{ grid-column: span 1; font-size: 0.75rem; text-align: center;}
  footer .copyright:after{ display: none;}


  .head{ height: 3.5rem;}

  .column{ padding: 5vw;}

  .main-about .info .title{ margin-bottom: 1rem;}
  .main-about .info .content p{ font-size: 1rem; text-align: justify;}

  .main-about .number .itm b{ font-size: 1.5rem;}
  .main-about .number .itm i{ font-size: 0.75rem;}

  .main-about .video{ width: 90vw; padding-bottom: calc(90vw / 16 * 9);}

  .main-about .culture .itm .caption{ font-size: 1.5rem; margin-bottom: 0.5rem;}
  .main-about .culture .itm .cn{ font-size: 1rem;}

  .col-cover{ height: 50vw; padding: 3.5rem 5vw 0;}
  .col-cover .caption{ flex-shrink: 0;}
  .col-cover .caption .cn{ font-size: 1.5rem;}
  .col-cover .caption .en{ font-size: .75rem; text-transform: uppercase;}
  .col-cover .slogan .cn{ font-size: 1.5rem;}
  .col-cover .slogan .en,
  .col-cover .slogan .line{ display: none;}

  .col-contact .map{ height: 50vw;}
  .col-contact .info{ flex-flow: column; gap: 5vw}
  .col-contact .info>*{ width: 100%;}
  .col-contact .info .caption .cn{ font-size: 1.5rem;}
  .col-contact .info dl{ grid-gap: .5rem;}
  .col-contact .info dl dt{ text-align: left;}

  .col-goods{ grid-template-columns: 1fr;}
  .col-goods .info .details{ padding: 0;}
  .col-goods .info .details .attr{ font-size: 1rem;}
  .col-goods .info .next{ padding: 2rem 0;}

  .col-article{ grid-gap: 5vw;}
  .col-article .article-title{ font-size: 1.5rem; line-height: 1.5;}
  .col-article .article-banner{ height: 20vw;}
  .col-article .article-arrow{ grid-template-columns: 1fr;}

  .col-title .title .cn{ font-size: 1.5rem;}
  .col-title .title .en{ font-size: .75rem; text-transform: uppercase;}
  .col-title .slogan .cn{ font-size: 1.5rem;}
  .col-title .slogan .en,
  .col-cate:before{ display: none;}

  .list-albums{ grid-template-columns: 1fr;}
  .list-albums .itm:first-child{ grid-column: span 1;}
  .list-albums .itm:first-child .thumb{ height: 0; padding-bottom: calc(100% / 16 * 9);}

  .list-news{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .list-news .itm{ padding: 1rem;}

  .col-products{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .col-products .col-title{ margin: auto;}
  .col-products .col-title .slogan .line{ display: none;}

  .cate-products{ display: grid; grid-template-columns: repeat(2,1fr);}
  .cate-products:before{ grid-column: span 2; text-align: center;}
  .cate-products .itm .cn{ display: block; text-align: center; font-size: 1rem;}
  .cate-products .itm .cn:before{ display: none;}
  .cate-products .itm .en{ display: none;}
  .left-products{ grid-template-rows: auto; grid-gap: 5vw;}
  .list-products{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5vw;}
  .left-products .page-products{ display: none;}
  .page-products-phone{ display: block;}

  .list-honor{ grid-template-columns: 1fr;}

}