@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 .logo{ height: 3rem;}

  .inner .inner-title .en{ font-size: 1.75rem;}
  .inner .inner-title .cn{ font-size: 1.25rem;}
  
  nav a{ display: none;}
  section.slideshow{ height: 200vw;}
  section.slideshow:after{ display: none;}
  section.slideshow .font{ width: 87.5vw;}
  section.slideshow .font .cn{ font-size: 1.5rem;}
  section.slideshow .font .cn br{ display: none;}
  section.slideshow .font .en{ font-size: 0.75rem;}
  section.slideshow .swiper-control{ display: none;}
  section.slideshow .swiper-pagination{ font-size: 1rem;}
  section.slideshow .swiper-pagination i{ width: 1rem;}
  section.slideshow .swiper-pagination b{ font-size: 1.5rem;}

  section.service{ padding: 6.25vw!important;}
  section.service .inner{ grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}
  section.service .inner .inner-title{ grid-column: span 1;}
  section.service .inner .inner-content{ grid-column: span 1; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw;}
  section.service .inner .inner-content .itm{ display: flex; gap: 1rem; width: 100%;}
  section.service .inner .inner-content .itm b{ width: 2rem; font-size: 1.5rem;}
  section.service .inner .inner-content .itm i{ display: none;}

  section.about:after{ display: none;}
  section.about .inner{ grid-template-columns: repeat(1,1fr); grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}
  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 .slogan{ display: none;}
  section.about .inner-cover .cover{ padding-bottom: calc(100%/16*9);}
  section.about .inner-content{ grid-column: span 1; padding: 0;}
  section.about .inner-content .content p{ padding-top: 1rem;}
  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%; padding: 5vw; margin: 0;}
  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.case:after{ width: 100vw;}
  section.case .inner{ grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}
  section.case .inner .inner-title{ grid-column: span 1; grid-row: 1/2;}
  section.case .inner .details{ grid-column: span 1; grid-row: 1/2;}
  section.case .inner .inner-content{ grid-column: span 2; width: 100%; overflow: hidden;}
  section.case .inner .inner-content .swiper-slide{ width: 100%; padding: 0;}
  section.case .inner .inner-content .itm .info{ padding: 1.5rem;}
  section.case .inner .inner-control,
  section.case .inner .inner-pagination{ display: none;}

  section.news:after{ display: none;}
  section.news .inner{ grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}
  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-slide{ grid-column: span 2; grid-row: span 1;}
  section.news .inner .inner-slide .itm .content{ grid-template-columns: auto 1fr; grid-gap: 1.5rem; padding: 1rem 0;}
  section.news .inner .inner-slide .itm .content .date{ grid-column: span 1;}
  section.news .inner .inner-slide .itm .content .info{ grid-column: span 1; width: 100%; overflow: hidden;}
  section.news .inner .inner-control{ display: none;}
  section.news .inner .inner-pagination{ position: relative; top: auto; right: auto; grid-column: span 2; width: 100%; justify-content: center;}
  section.news .inner .inner-content{ grid-column: span 2;}
  section.news .inner .inner-content .itm{ grid-template-columns: auto 1fr; grid-gap: 1.5rem;}
  section.news .inner .inner-content .itm .date{ grid-column: span 1;}
  section.news .inner .inner-content .itm .info{ grid-column: span 1; width: 100%; overflow: hidden;}
  

  section.billing .inner{ grid-template-columns: repeat(1,1fr);}
  section.billing .inner .font{ grid-column: span 1; padding: 1rem;}
  section.billing .inner .font .cn b{ font-size: 1.25rem;}
  section.billing .inner .font .cn span{ font-size: 1.5rem;}
  section.billing .inner .font .line{ width: 1.5rem; margin-bottom: 0;}
  section.billing .inner .font .learn{ right: 1rem; width: auto;}

  section.product:before{ width: 100%; height: 100%;}
  section.product .inner{ grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}
  section.product .inner .inner-title{ grid-column: span 1; grid-row: 1/2;}
  section.product .inner .details{ grid-column: span 1; grid-row: 1/2;}
  section.product .inner .inner-cate{ grid-column: span 2; flex-flow: row wrap;}
  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 .itm .cover{ padding-bottom: calc(100%/4*3);}
  section.product .inner .inner-control{ display: none;}
  section.product .inner .inner-pagination{ position: relative; left: auto; bottom: auto;}

  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; grid-row: 1/2;}
  section.contact .inner .details{ grid-column: span 1; grid-row: 1/2; align-items: center;}
  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{ grid-column: span 1; grid-row: span 1;}
  section.contact .inner .inner-content .itm.qrcode{ display: none;}
  section.contact .inner .inner-content .itm .cover{ width: 8rem; padding-bottom: 8rem;}

  section.link .inner{ grid-gap: 5vw;}
  section.link .inner .inner-content{ grid-template-columns: repeat(3,1fr);}

  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: 65vw;}
  .banner .inner .slogan{ font-size: 0;}

  .column{ grid-gap: 5vw; padding: 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,
  .list-recruit{ 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{ display: none;}

  .article{ grid-gap: 5vw;}
  .article .article-title .desc:after{ display: none;}
  .article .article-title .info{ grid-auto-flow: row; grid-gap: 0.5rem;}

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

  .login-form{ grid-column: span 12;}

  .user-info{ grid-gap: 2.5vw;}
  .user-info .content{ display: grid; grid-gap: 2.5vw; }

  .download-list{ grid-gap: 2.5vw;}
  .download-list .content{ grid-template-columns: repeat(1,1fr); grid-gap: 5vw;}

  .modify-box{ grid-gap: 2.5vw;}
  .modify-box .content{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5vw;}
  .modify-box .content input{ grid-column: span 2; width: auto;}
  .modify-box .content button, .modify-box .content a{ text-align: center;}

  .about-grid{ grid-template-columns: 1fr}
  .about-grid .grid.honor,
  .about-grid .grid.advan{ grid-column: span 1;}
  .about-grid .grid{ grid-gap: 6.25vw;}
  .about-grid .grid.speech{ background-size: 60vw auto;}
  .about-grid .grid.culture .content{ grid-template-columns: 1fr; grid-gap: 5vw; display: flex; flex-flow: column nowrap;}
  .about-grid .grid.culture .content .col{ grid-gap: 5vw;}
  .about-grid .grid.culture .content .col:last-child{ grid-column: sapn 1;}

  .about-grid .grid.honor{ grid-template-columns: repeat(8,1fr); grid-gap: 5vw;}
  .about-grid .grid.honor .content{ grid-column: span 8;}
  .about-grid .grid.honor .content.honor{ grid-template-columns: 1fr; grid-gap: 5vw;}
  
  .about-grid .grid.advan .content{ grid-gap: 5vw;}
  .about-grid .grid.advan .content .itm .info{ grid-column: span 12; grid-row: 2 / 3;}
  .about-grid .grid.advan .content .itm .cover{ grid-column: span 12; grid-row: 1 / 2;}

}