@media screen and (min-width:1921px){
  :root{
    font-size: 20px;
  }
}
@media screen and (max-width:1680px){
  :root{
    font-size: 14px;
  }
  .row{ padding: 5vw;}
}
@media screen and (max-width:1440px){
  :root{
    font-size: 12px;
  }
}
@media screen and (max-width:1280px){
  header .other,
  footer .foot .logo{ display: none;}
  footer .foot{ grid-template-columns: 1fr;}
  
}
@media screen and (max-width:1024px){
  .menu{ display: block;}

  .row{ padding: 4vw;}
  .row .row-title .cap .cn{ font-size: 2rem;}
  .row .row-title .cap .en{ display: none;}

  header{height: 50px;}
  header .logo{ width: 100px; background-size: auto 60%; background-position: center center;}
  header .nav{ display: none;}
  .index,
  .index .slide .itm .thumb{ height: 120vw;}
  
  .number{ padding: 0;}
  .number .itm{ flex-flow: column nowrap; padding: 1.5rem 0;}
  .number .itm .ico{ margin-right: 0; margin-bottom: .5rem;}
  .number .itm .ico i{ font-size: 3rem;}
  .number .itm .num{ text-align: center;}
  .number .itm .num .counter{ font-size: 1.5rem; line-height: 2;}
  .number .itm .num .cap{ font-size: 0.8rem;}

  .product .row-title{ flex-flow: column nowrap; align-items: start;}
  .product .row-title .cate{ display: block; width: 92vw; overflow-x: scroll; white-space: nowrap;}
  .product .row-title .cate a{ display: inline-block; font-size: 1.25rem; margin: .5em .75em;}
  .product .row-title .more{ display: none;}
  .product .row-content{ grid-template-columns: repeat(2,1fr); grid-gap: 5vw;}

  .workshop{ grid-template-columns: 1fr; grid-gap: 2.5vw;}
  .workshop .row-title .cap .cn{ padding-bottom: 0;}
  .workshop .row-title .more{ display: none;}
  
  .laboratory .row-title{ justify-content: flex-start;}
  .laboratory .row-content .itm{ padding: 0;}

  .about{ grid-template-columns: 1fr;}
  .about .row-content{ font-size: 1.25rem; color: var(--light)}
  .about .partner .title{ font-size: 1.75rem;}

  .news .row-title .cate a{ padding: 0.25em .5em}
  .news .row-content .list .itm{ grid-template-columns: 1fr; padding: 4vw;}
  .news .row-content .list .itm .thumb:after{ display: none;}
  .news .row-content .list .itm .info{ padding: 2.5vw 0;}
  .news .row-content .list .itm .info .desc{ font-size: 1.25rem;}
  .news .row-content .list .itm .info .line{ margin: 2em 0;}
  .news .row-content .list .itm .info .more{ left: 4vw; bottom: 4vw;}
  
  footer .foot{ padding: 4vw;}
  footer .foot .logo{ display: grid; grid-template-columns: 2fr 5fr;}
  footer .foot .logo .ico{ grid-column: 1 / 2; grid-row: 1 / 3; -webkit-mask-size: auto 60%;}
  footer .foot .logo .cn{ grid-column: 2 / 3; align-self: end; font-size: 1.5em;}
  footer .foot .logo .en{ grid-column: 2 / 3; align-self: start;   font-size: .75rem; letter-spacing: .25em;}
  footer .foot .nav-bottom{ display: none;}
  footer .foot .contact{ flex-flow: column; align-items: start; }
  footer .foot .contact .itm{ margin: 0;}
  footer .foot .contact .itm i{ font-size: 1.5rem;}
  footer .foot .contact .itm span{ font-size: 1.2rem; line-height: 2;}

  footer .copyright{ padding: 4vw; flex-flow: column wrap; font-size: 1.125rem;}

  /* sub */
  .head{ height: 50vw; padding-top: 50px;}
  .head .title{ padding: 0 4vw; height: calc( 100% - 50px );}
  .head .title .cn{ font-size: 2rem;}
  .head .title .en{ font-size: 1rem;}
  .location{ padding: 0 4vw; font-size: 1rem;}
  .wrapper{ padding: 4vw; grid-gap: 4vw;}
  .category-product{ width: 100%; flex-flow: column nowrap; align-items: start;}
  .category-product .list{ display: block; width: 92vw; overflow-x: scroll; white-space: nowrap;}
  .category-product .list a{ display: inline-block; font-size: 1.25rem; margin: .5em .75em;}

  .pagination{ width: 100%; overflow: hidden;}

  .list-product{ grid-template-columns: repeat(2,1fr); grid-gap: 4vw;}

  .list-album{ grid-template-columns: repeat(2,1fr); grid-gap: 4vw;}

  .list-news{ grid-gap: 4vw;}
  .list-news a{ padding: 4vw;}
  .list-news .topic{ grid-template-columns: 1fr; grid-gap: 2.5vw;}
  .list-news .topic .info{ width: 100%; padding: 0;}
  .list-news .topic .info .title{ margin-bottom: 2.5vw;}
  .list-news .topic .info .desc{ font-size: 1.125rem;}
  .list-news .topic .info .more,
  .list-news .topic .info .date{ position: relative; top: auto; right: auto; bottom: auto; left: auto; font-size: 1.125rem; margin-top: 2.5vw;}

  .list-news .itm{ grid-gap: 2.5vw;}
  .list-news .itm:before{ left: 3vw; top: 2.45rem;}
  .list-news .itm .date .md{ font-size: 1.25rem; padding: 0 .5em;}

  .list-contact{ grid-template-columns: 1fr;}
  .list-contact .itm{ padding: 4vw 0;}
  .list-contact .itm i{ font-size: 3rem;}
  
  #map{ height: 50vw;}

  .about-profile{ grid-template-columns: 1fr; grid-gap: 2.5vw;}
  .about-profile .title{ padding: 4vw;}
  .about-profile .title:after{ display: none;}
  .about-profile .title .cn{ font-size: 2rem;}
  .about-profile .title .en br{ display: none;}
  .about-profile .content{ display: none;}

  .about-number{ grid-template-columns: 1fr; overflow: hidden;}
  .about-number .itm{ justify-content: center!important; flex-flow: column nowrap; padding: 4vw 0;}
  .about-number .itm .ico{ margin-right: 0;}
  .about-number .itm .ico i{ font-size: 6rem; }
  .about-number .itm .num{ text-align: center; line-height: 1.5;}
  .about-number .itm .num .counter{ font-size: 2rem;}
  .about-number .itm .num .cap{ font-size: 2rem;}
  
  .about-information .title{ font-size: 2rem;}
  .about-information .content{ font-size: 1.25rem;}

  .about-partner{ grid-gap: 2.5vw; }
  .about-partner .title{ font-size: 2rem; }

  .about-culture{ grid-gap: 2.5vw;}
  .about-culture .title{ font-size: 2rem;}
  .about-culture .content{ grid-template-columns: 1fr;}
  .about-culture .content .itm{ padding: 2.5vw;}
  .about-culture .content .itm .caption{ margin-bottom: 4vw;}
  .about-culture .content .itm .cn{ font-size: 1.25rem;}

  .commodity-wrap{ grid-template-columns: 1fr;}
  .commodity-cover, .commodity-content{ grid-column: span 1;}
  .commodity-cover{ grid-template-columns: 1fr}
  .commodity-cover .cover{ grid-column: span 1;}
  .commodity-cover .info{ grid-column: span 1; padding: 5vw; display: grid; grid-gap: 1rem; justify-content: stretch;}
  .commodity-cover .info .phone:after{ display: none;}
  .commodity-cover .info .phone span{ width: 100%;}
  .commodity-cate{ display: none;}
}