@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;}
}
@media screen and (max-width:1440px){
  :root{
    font-size: 12px;
  }
}
@media screen and (max-width:1280px){
  .advantage .taglist .itm{ height: auto; } 
}
@media screen and (max-width:1024px){
  header{ padding: 4vw;}
  header .logo{ width: 32vw; height: 8vw;}
  header .menu{ width: 8vw; height: 8vw;}
  header .menu .ico{ height: calc(8vw - 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{ display: none;}
  /* 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;}
  /* 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;}
  .advantage .taglist .itm .ico i{ font-size: 3rem;}
  .advantage .taglist .itm .ico span{ display: none;}
  .advantage .taglist .itm .ico::after{ content: attr(data-cn); 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)}

  /* 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;}
  .products .content .itms .product .itm .buy{grid-area: c; margin-top: 4vw;}
  .products .content .itms .product .itm .buy a{ font-size: 1.25rem;}

  .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{ 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 12;}
  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;}
}