@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{ padding: .5rem 1rem;}
  header .logo{ height: 2.5rem;}

  .inner .inner-title .en{ font-size: 1.75rem;}
  .inner .inner-title .cn{ font-size: 1.25rem;}
  .inner .inner-title:after{ top: calc(1.3125rem - 1px);}
  .inner a.details{ width: 7.5rem; padding: 0; border-bottom: 1px solid var(--primary); color: var(--primary); background: none;}
  
  nav a{ display: none;}
  section.slideshow{ height: 200vw;}
  section.slideshow .font{ width: 87.5%;}
  section.slideshow .font .cn{ font-size: 1.5rem;}
  section.slideshow .font .en{ font-size: .75rem;}
  section.slideshow .font .desc{ font-size: 0.75rem;}
  section.slideshow .font .strip{ margin: 1rem 0;}
  section.slideshow .font .learn{ width: 8rem; padding: 0; margin-top: 2rem; border: none; border-bottom: 1px solid var(--border);}

  section.slideshow .quick,
  section.slideshow .scroll,
  section.slideshow .swiper-control{ display: none;}

  section.about .inner{ grid-template-columns: repeat(1,1fr); grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}
  section.about .inner:after{ display: none;}
  section.about .inner-title{ position: relative; grid-column: span 1; align-items: start;}
  section.about .inner-cover{ grid-column: span 1; grid-row: span 1;}
  section.about .inner-cover .cover{ height: 0; padding-bottom: 100%;}
  section.about .inner-cover .cover img{ position: absolute; top: 0; right: 0;}
  section.about .inner-content{ grid-column: span 1; padding: 0;}
  section.about .inner-content .content p{ padding: 0!important;}
  section.about a.details{ grid-column: span 1;}
  section.about .inner-number{ grid-column: span 1; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5vw; width: 100%; margin: 0;}
  section.about .inner-number:after{ display: none;}
  section.about .inner-number .strip{ display: none;}
  section.about .inner-number .itm{ grid-template-columns: auto 1fr;}
  section.about .inner-number .itm b{ font-size: 2rem;}
  section.about .inner-control{ display: none;}

  section.product:after{ display: none;}
  section.product .inner{ grid-template-columns: repeat(2,1fr); grid-gap: 5vw;}
  section.product .inner:before,
  section.product .inner:after{ display: none;}
  section.product .inner .inner-title{ grid-column: span 1;}
  section.product .inner .inner-title:after{ background: var(--primary);}
  section.product .inner .inner-title .en{ color: var(--primary);}
  section.product .inner .inner-title .cn{ color: var(--text);}
  section.product .inner .details{ grid-column: span 1;}
  section.product .inner .inner-cate{ grid-column: span 2; grid-row: span 1; justify-content: flex-start; flex-flow: row wrap; gap: 1rem 2rem;}
  section.product .inner .inner-cate a{ line-height: 2.5;}
  section.product .inner .inner-content{ grid-column: span 2; width: 100%;}
  section.product .inner .inner-content .swiper-slide{ width: 100%; padding: 0;}
  section.product .inner .inner-content .swiper-slide-active .itm .info .cate{ color: var(--info);}
  section.product .inner .inner-content .swiper-slide-active .itm .info .tit{ color: var(--text);}
  section.product .inner .inner-content .swiper-slide-active .itm .desc{ color: var(--desc);}
  section.product .inner .inner-control{ display: none;}
  section.product .inner .inner-pagination{ grid-column: span 2; justify-content: center;}

  section.billing{ height: auto;}
  section.billing .inner{ grid-template-columns: repeat(1,1fr);}
  section.billing .inner .font{ grid-column: span 1; grid-gap: 1rem;}
  section.billing .inner .font .caption .cn{ font-size: 1.5rem;}
  section.billing .inner .font .caption .en{ font-size: .875rem;}
  section.billing .inner .font .slogan .cn{ font-size: 0.75rem;}
  section.billing .inner .font .slogan .en{ display: none;}
  section.billing .inner .details{ grid-column: span 1; border: none;}

  section.news{ background: var(--gray);}
  section.news:after{ display: none;}
  section.news .inner{ grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}
  section.news .inner:after{ display: none;}
  section.news .inner .inner-title{ grid-column: span 1; grid-row: 1/2;}
  section.news .inner .details{ grid-column: span 1; grid-row: 1/2;}
  section.news .inner .inner-content{ grid-column: span 2; grid-template-columns: repeat(1,1fr);}
  section.news .inner .inner-content:before,
  section.news .inner .inner-content:after{ display: none;}
  section.news .inner .inner-content .itm{ grid-template-columns: auto 1fr; grid-gap: 1rem;}
  section.news .inner .inner-content .itm .date{ grid-column: span 1;}
  section.news .inner .inner-content .itm .info{ grid-column: span 1; grid-gap: 0.5rem; width: 100%; overflow: hidden;}
  
  section.case:after{ display: none;}
  section.case .inner{ grid-template-columns: repeat(2,1fr); grid-gap: 5vw;}
  section.case .inner:after{ display: none;}
  section.case .inner .inner-title{ grid-column: span 1;}
  section.case .inner .inner-title:after{ background: var(--primary);}
  section.case .inner .inner-title .en{ color: var(--primary);}
  section.case .inner .inner-title .cn{ color: var(--text);}
  section.case .inner .details{ grid-column: span 1;}
  section.case .inner .inner-content{ grid-column: span 2; grid-template-columns: repeat(1,1fr);}
  section.case .inner .inner-content .swiper-thumb{ display: none;}
  section.case .inner .inner-content .swiper-cover{ grid-column: span 1;}
  section.case .inner .inner-content .swiper-cover .itm .info{ grid-template-columns: repeat(1,1fr);}
  section.case .inner .inner-content .swiper-cover .itm .info .desc{ display: none;}
  section.case .inner .inner-content .swiper-cover .itm .info .caption{ grid-column: span 1;}
  section.case .inner .inner-content .swiper-cover .itm .info .more{ grid-column: span 1;}
  section.case .inner .inner-content .control{ display: none;}
  section.case .inner .inner-content .pagination{ grid-column: span 1; top: auto; justify-content: start;}

  section.navigation .inner{ grid-template-columns: repeat(1,1fr); padding: 5vw 0;}
  section.navigation .inner .nav{ display: none;}
  section.navigation .inner .quick{ grid-column: span 1; justify-content: start;}
  
  section.contact .inner{ grid-template-columns: repeat(1,1fr); grid-template-rows: repeat(1,1fr); grid-gap: 5vw;}
  section.contact .inner .inner-title{ grid-column: span 1;}
  section.contact .inner .details{ grid-column: span 1;}
  section.contact .inner .inner-content{ grid-column: span 2; grid-row: span 1; grid-template-columns: repeat(2,1fr); grid-auto-flow: row; grid-gap: 5vw;}
  section.contact .inner .inner-content .map{ display: none;}
  section.contact .inner .inner-content .name{ position: relative; top: auto; right: auto; grid-column: span 2; text-align: left;}
  section.contact .inner .inner-content .itm.address{ grid-column: span 2;}
  section.contact .inner .inner-content .itm.tel{ grid-column: span 2;}
  section.contact .inner .inner-content .itm{ grid-column: span 1;}
  section.contact .inner .inner-content .itm.qrcode{ display: none;}

  section.copyright:after{ float: none; display: block; margin-top: 1rem; text-align: right; opacity: 0.5;;}

  .menubox .grid{ width: 87.5vw;}
  .menubox .grid .contact,
  .menubox .grid .copyright{ display: none;}

  .menubox .grid .navigation:before{ display: none;}
  .menubox .grid .navigation ul li .sub{ display: flex; flex-flow: row wrap; gap: 1rem;}

  .banner{ height: 60vw;}
  .banner .inner{ justify-content: center;}
  .banner .inner .slogan{ font-size: 0;}
  .banner .inner .catename{ align-items: center;}
  .banner .inner .catename .strip{ display: none;}

  .column{ grid-gap: 5vw;}
  .column .artarrow{ justify-content: flex-end;}
  .column .artarrow a.prev{ display: none;}

  .location{ flex-flow: column; align-items: flex-start;}
  .location .bread{ display: none;}
  .location .category{ position: relative; display: flex; flex-flow: row wrap; gap: .5rem 2rem;}
  .location .category a{ line-height: 2.5;}

  .aboutbox .number{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5vw;}
  .aboutbox .number .itm{ grid-template-columns: auto 1fr;}
  .aboutbox .number .itm b{ font-size: 2rem;}
  .aboutbox .info{ grid-gap: 5vw;}
  .aboutbox .cover{ height: 75vw;}

  .list-product,
  .list-news,
  .list-case{ grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}

  .list-product .itm .cover{ padding-bottom: calc(100%/4*3);}

  .list-news .itm .info{ grid-gap: 1rem;}

  .pagenumber .prev,
  .pagenumber .next{ display: none;}

  .column-contact{ grid-gap: 5vw;}
  #map{ height: 50vw;}
  .list-contact{ grid-template-columns: repeat(2,1fr); grid-auto-flow: row; grid-gap: 5vw;}
  .list-contact .name{ grid-column: span 2;}
  .list-contact .address{ grid-column: span 2;}
  .list-contact .tel{ grid-column: span 2;}
  .list-contact .quick{ display: none;}
  .list-contact .qrcode{ justify-self:start; grid-gap: 0.5rem;}
  .list-contact .qrcode:last-child{ display: none;}

  .article{ grid-gap: 5vw;}
  .article .article-title .desc:after{ display: none;}

  .goods{ grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}
  .goods .goods-cover{ grid-column: span 1;}
  .goods .goods-info{ grid-column: span 1; grid-gap: 5vw;}

}