@media screen and (min-width:1921px){
  :root{
    font-size: 20px;
  }
  .row .row-title,
  .row .row-content,
  .about .row-number,
  footer .row,
  footer .copyright .content,
  .page-bread .bread-list,
  .page-content .about-page,
  .page-content .about-box,
  .page-content .category-page,
  .page-content .product-page,
  .page-content .news-page,
  .page-content .contact-page,
  .details-page{ max-width: 73.75vw;}
}
@media screen and (max-width:1680px){
  :root{
    font-size: 14px;
  }
  .news{ background-size: auto 80%;}
}
@media screen and (max-width:1440px){
  :root{
    font-size: 12px;
  }
  .row .row-title,
  .row .row-content,
  footer .row,
  footer .copyright .content,
  .page-bread .bread-list,
  .page-content .about-page,
  .page-content .about-box,
  .page-content .category-page,
  .page-content .product-page,
  .page-content .news-page,
  .details-page{ width: 90vw;}
}
@media screen and (max-width:1024px){
  :root{
    font-size: 14px;
  }
  .cursor,
  .cursor::after { display: none;}
  .menu{ top: 5vw; right: 5vw;}
  
  .navigation .close{ top: 5vw; left: 5vw;}
  .navigation .content{ flex-flow: column;}
  .navigation .copyright{ width: 90vw; padding-bottom: 5vw; line-height: 2; text-align: right;}
  .navigation .copyright:after{ position: relative; }
  .navigation.act .content .contact{ display: none;}
  .navigation.act .content .qrcode{ display: none;}

  .index .slide .itm .en{ top: 5vw; left: 5vw; font-size: .875rem;}
  .index .slide .itm .cn{ font-size: 2rem;}

  .index .scroll{ bottom: 5vw; left: 5vw;}
  .index .hotline{ right: 5vw; bottom: 5vw;}

  .row{ padding: 5vw 0;}
  .row .row-title{ grid-template-columns: 22% 78%; }
  .row .row-title .caption .en{ font-size: .7rem;}
  .row .row-title .caption .cn{ font-size: 1.25rem;}
  .row .row-title .slogan .cn{ font-size: 1.25rem;}
  .row .row-title .slogan .en{ font-size: .7rem;}

  .row .row-content{ width: 90vw;}

  .about .row-content{ grid-template-columns: repeat(2,1fr); grid-gap: 5vw; padding: 5vw 0; margin: 0 auto;}
  .about .row-content .slogan{ display: none;}
  .about .row-content .banner{ grid-column: auto; margin-top: 0;}
  .about .row-content .adv{ grid-column: auto; margin-bottom: 0; justify-content: start; font-size: .85rem; text-align: left;}
  .about .row-content .desc{ grid-column: span 2; margin: 0; font-size: 1.15rem; text-align: left;}
  .about .row-content .desc br{ display: none;}
  
  .about .row-number{ width: 90vw;}
  .about .row-number .itm .num strong{ font-size: 1.5rem;}

  .superiority .row-content .itm{ justify-content: start;}
  .superiority .row-content .itm .ico i{ font-size: 3rem;}
  .superiority .row-content .itm .cn{ font-size: 1rem;}
  .superiority .row-content .itm .en{ font-size: .7rem; text-align: center;}

  .recommended .row-content{ grid-template-columns: 100%; grid-row-gap: 5vw; padding: 5vw 0;}
  .recommended .row-content .itm{ padding: 0;}
  .recommended .row-content .itm .info .buy{ width: 100%; line-height: 2;}

  .video .row-content .button-play i{ width: 4rem; height: 4rem; font-size: 3rem;}
  .video .row-content .desc{ font-size: .85rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}
  .video .row-content .desc br{ display: none; }

  .advertising .row-title .slogan .ico{ width: 4.0625rem; height: 3.90625rem;}

  .news{ background: none;}
  .news:before,
  .news:after{ display: none;}
  .news .row-content{ grid-template-columns: 100%;}
  .news .row-content .news-list .group{ grid-template-columns: 100%; grid-gap: 5vw; padding: 2.5vw 0;}

  .products .row-content{ grid-template-columns: 100%;}
  .products .row-content .itm .bg{ padding: 5vw;  }
  .products .row-content .itm .info{ padding: 5vw; padding-bottom: 0;}

  /* hover */
  .menu:hover span:before{ width: 2.2rem;}
  .recommended .row-content .itm:hover .thumb img{ transform: scale(1);}
  .recommended .row-content .itm .info .buy:hover{ background: var(--color-primary); color: white;}
  .recommended .row-content .itm .info .buy:hover:before{ width: 0;}
  .recommended .row-content .itm .info .buy:hover:after{ width: 0; }
  .recommended .row-content .itm .info .buy:hover span:before{ height: 0;}
  .recommended .row-content .itm .info .buy:hover span:after{ height: 0;}
  .news .row-content .news-list .group .itm:hover .thumb img{ transform: scale(1);}
  .news .row-content .news-list .group .itm .detail:hover{ color: var(--color-tag)}
  .news .row-content .news-list .group .itm .detail:hover:after{ width: 0;}
  .products .row-content .itm:hover .bg{ transform: scale(1);}
  .products .row-content .itm:hover .thumb{ transform: scale(1);}
  .products .row-content .itm:hover .info{ text-shadow: none;}

  .store .row-content{ padding-top: 2rem;}
  .store .row-content .itm svg{ width: 2rem; height: 3rem;}

  footer .row{ grid-template-columns: 100%; width: 90vw;}
  footer .row:after,
  footer .row .quick,
  footer .row .store-btn,
  footer .row .site-map{ display: none;}
  footer .row .contact{ text-align: left;}
  footer .copyright .content{ width: 90vw; padding: 1em 0; line-height: 2;}
  footer .copyright .content:after{ position: relative;}

  /* sub */
  .page-title{ height: 17vw;}
  .page-title .facia,
  .page-title .slogan{ display: none;}

  .page-content .about-page{ display: block; background: none;}
  .page-content .about-page .cover{ height: 30vw;}
  .page-content .about-page .number{ display: none;}
  .page-content .about-page .content{ grid-template-columns: 100%; grid-gap: 2.5vw; padding-top: 5vw;}
  .page-content .about-page .content .caption{ grid-column: auto; text-align: left;}
  .page-content .about-page .content .chinese{ grid-column: auto;}
  .page-content .about-page .content .english{ grid-column: auto;}
  .page-content .about-adv{ max-width: 100%; height: 40vw; padding-left: 0; padding: 0 22vw;}
  .page-content .about-adv:after{ display: none;}
  .page-content .about-adv .cn{ text-align: center; font-size: 2rem;}
  .page-content .about-box .content{ grid-template-columns: 100%; grid-gap: 5vw; padding-top: 5vw;}

  .page-content .category-page .list-category .itm{ display: block;}
  .page-content .category-page .list-category .itm .info{ display: none;}

  .page-content .category-page .list-category .itm .cover{ display: block; padding-bottom: 120%;}
  .page-content .category-page .list-category .itm .cover:after{background-size: 100% auto, 25% , 40%}
  .page-content .category-page .list-category .itm .cover .thumb{ padding-bottom: 120%;}
  .page-content .category-page .list-category .itm .cover .thumb:after{ background-size: 50%;}
  .page-content .category-page .list-category .itm .cover .tag{ position: absolute; top: 0; left: 5vw; height: 35%;}
  .page-content .category-page .list-category .itm .cover .tag .content{ width: 15vw; padding: 10px; background-size: 50%;}
  .page-content .category-page .list-category .itm .cover .tag .content:before{ top: 5px; right: 5px; width: calc( 100% - 10px); height: calc( 100% - 10px);}
  .page-content .category-page .list-category .itm .cover .tag .content:after{ background-size: 50%;}
  .page-content .category-page .list-category .itm .cover .tag .content span{ font-size: 0.5rem;}
  .page-content .category-page .list-category .itm .cover .thumb img{ max-width: 50%;}
  .page-content .category-page .list-category .itm:nth-child(even) .cover .tag{ left: auto; right: 5vw;}

  .page-content .product-page{ display: block;}
  .page-content .product-page .category{ flex-flow: row wrap;}
  .page-content .product-page .category .tit{ width: 100%;}
  .page-content .product-page .category label{ margin-right: 1rem;}

  .page-content .product-page .list-product{ grid-template-columns: repeat(2,1fr);}
  .page-content .product-page .list-product .loadmore{ grid-column: span 2;}

  .page-content .news-page .list-news{ grid-template-columns: 100%;}
  .page-content .news-page .list-news .itm:nth-child(3n-1):before, .page-content .news-page .list-news .itm:nth-child(3n-1):after{ display: none;}
  .page-content .news-page .list-news .itm .info{ padding: 1rem 0; grid-area: b;}
  .page-content .news-page .list-news .itm .date{ display: none;}

  .article-page{ display: block;}
  .article-page .article-information{ padding: 5vw; background: none;}
  .article-page .article-information .info{ margin-bottom: 5vw;}
  .article-page .article-parameter{ display: none;}
  .article-page .article-arrow{ display: block; padding: 2.5vw 5vw;}
  .article-page .article-arrow:after{ display: none;}
  .article-page .article-arrow a{ display: block; padding: 2.5vw 0;}

  .details-banner{ height: 17vw;}
  .details-page .details-cover{ grid-template-columns: 100%;}
  .details-page .details-cover .info{ padding: 5vw 0;}
  .details-page .details-related .related-list{ grid-template-columns: repeat(2,1fr)}

  .page-content .contact-page{ grid-template-columns: 100%; width: 90vw;}
  .page-content .contact-page #map{ grid-column: auto; height: 80vw;}
  .page-content .contact-page .english{ display: none;}

  .page-content .channel-page{ width: 90vw;}
  
}