@charset "utf-8";
@media screen and (min-width:1921px){
  :root{
    font-size: 16px;
  }
}
@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){
  section{ padding: 5vw;}
  header{ padding: 2rem 5vw;}
  header.color{ padding: 1rem 5vw;}
  header .nav a{ font-size: 1.125rem;}
  .slideshow .itm .info{ padding: 5vw;}
  .about{ padding: 5vw;}
}
@media screen and (max-width:1024px){
  header{ padding: 2.5vw;}
  header .logo,
  header .logo a img.w,
  header .logo a img.d{ height: 2.5rem;}
  header .nav,
  header .hotline{ display: none;}
  header .toggle{ display: flex;}

  header.color{ padding: 2.5vw;}
  header.color .toggle .ico i{ background: var(--primary);}

  .slideshow,
  .slideshow .itm img{ height: 100vh;}
  .slideshow .itm .info .slogan .cn{ font-size: 2.25rem; letter-spacing: 0;}
  .slideshow .itm .info .more{ width: 35vw;}
  .slideshow .swiper-control{ width: 70vw;}
  .slideshow .swiper-control .swiper-number b{ font-size: 2rem;}
  .slideshow .swiper-control .swiper-number i,
  .slideshow .swiper-control .swiper-number span{ font-size: 1.5rem;}
  .slideshow .swiper-control .swiper-button{ gap: 2rem;}
  

  .inner .inner-title .slogan{ display: none;}
  .inner .inner-title .more{ width: 2.5rem;}
  .inner .inner-title .more span{ display: none;}

  .business .inner{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .business .inner-unit{ grid-row: auto;}
  .business .inner-unit .info{ padding: 0;}
  .business .inner-unit .info a.more{ margin-top: 5vw;}
  .business .inner-cover{ grid-column: span 1; grid-row: auto;}
  .business .inner-cover img{ position: relative;}
  .business .inner-list{ grid-column: span 1; grid-template-columns: repeat(2,1fr); margin: 0;}
  .business .inner-list .itm{ padding: 2.5vw;}
  .business .inner-list .itm .font em{ display: none;}
  .business .inner-list .itm b{ top: 2.5vw; left: 2.5vw; font-size: 3rem;}
  .business .inner-list .itm .ico{ font-size: 3rem;}
  .business .inner-list .itm:nth-child(2n){ background: white;}

  .about{ background-size: cover;}
  .about .inner{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .about .inner-unit{ grid-row: auto;}
  .about .inner-unit .info{ padding-top: 0;}
  .about .inner-unit .info a.more{ margin-top: 5vw;}
  .about .inner-unit .number{ flex-flow: row wrap; gap: 5vw;}
  .about .inner-unit .number .itm{ width: 45%;}
  .about .inner-cover{ grid-column: span 1; grid-row: auto;}
  .about .inner-cover img{ position: relative;}
  .about .inner-list{ grid-column: span 1; margin-top: 0; grid-template-columns: repeat(2,1fr);}
  .about .inner-list .itm{ padding: 5vw;}

  .workshop{ background-size: cover;}
  .workshop .inner{ display: grid; grid-template-columns: 1fr; grid-gap: 5vw;}
  .workshop .inner-title{ position: relative; text-align: left;}
  .workshop .inner-list{ grid-template-columns: 1fr;}
  .workshop .inner-list .cover-swiper{ grid-column: span 1;}
  .workshop .inner-list .cover-swiper .itm{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .workshop .inner-list .cover-swiper .itm .cover{ grid-column: span 1;}
  .workshop .inner-list .cover-swiper .itm .info{ grid-column: span 1; padding: 0;}
  .workshop .inner-list .control,
  .workshop .inner-list .number,
  .workshop .inner-list .thumb-swiper{ display: none;}

  .case .inner-title .control{ right: 5vw;}
  .case .inner-list{ width: 95vw;}
  .case .inner-list .swiper-slide{ width: 95vw; padding-right: 5vw;}

  .news .inner{ grid-gap: 5vw;}
  .news .inner-list{ grid-template-columns: 1fr;}
  .news .inner-list .big-list .itm .info{ padding: 5vw 0;}
  .news .inner-list .big-list .itm .info .title, 
  .news .inner-list .small-list .itm .info .title{ margin: 0.5rem 0;}
  .news .inner-list .small-list .itm .info .date{ display: none;}
  .news .inner-list .small-list .itm .info:after{ display: none;}
  .news .inner-control{ display: none;}

  .contact .inner-unit{ grid-template-columns: 1fr;}
  .contact .inner-unit .map{ grid-column: span 1; height: 60vw;}
  .contact .inner-unit .list,
  .contact .inner-unit .code{ width: 100%; margin: 0;}
  .contact .inner-unit .list .itm{ padding: 5vw;}
  .contact .inner-unit .code{ flex-flow: row nowrap; align-items: start; padding: 5vw 0;}

  footer .inner .unit{ flex-flow: column nowrap; padding: 15vw 0 5vw; }
  footer .inner .unit .logo{ width: 15rem; height:auto;}
  footer .inner .unit .logo a img{ width:15rem; height:auto }
  footer .inner .unit .slogan{ display: none;}
  footer .inner .cpy{ flex-flow: column nowrap; align-items: start; gap: 2.5vw;}
  /* sub */
  .head{ height: 4.5rem;}

  .col-cover{ height: 50vw; justify-content: center;}
  .col-cover .slogan{ display: none;}
  .col-cover .caption{ text-align: center;}
  .col-cover .caption .cn{ font-size: 2rem; font-weight: bold;}
  .col-cover .caption .en{ font-size: 1.5rem;}

  section.column{ padding: 5vw; grid-gap: 5vw;}

  .column .category{ padding: 1rem;}

  .list-workshop,
  .list-equipment,
  .list-news,
  .list-case{ grid-template-columns: 1fr; grid-gap: 5vw;}

  .list-case .itm{ grid-template-columns: 1fr;}
  .list-case .itm .info{ padding: 1rem;}

  .col-contact{ grid-template-columns: 1fr;}
  .col-contact .map{ grid-column: span 1; height: 60vw;}
  .col-contact .list,
  .col-contact .code{ width: 100%; margin: 0;}
  .col-contact .list .itm{ padding: 5vw;}
  .col-contact .code{ flex-flow: row nowrap; align-items: start; padding: 5vw 0;}

  .column-page{ padding: 5vw; grid-gap: 5vw;}

  .profile .row{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .profile .row .title,
  .profile .row .content,
  .profile .row .number{ grid-column: span 1;}
  .profile .row .cover{ grid-column: span 1; grid-row: span 1;}

  .profile .row .content p{ font-size: 1.25rem;}
  .profile .row .number{ flex-flow: row wrap; gap: 5vw; padding-top: 0;}
  .profile .row .number .itm{ width: 45%;}

  .culture .row{ grid-gap: 5vw;}
  .culture .row .content{ grid-template-columns: 1fr; grid-gap: 5vw;}
  .culture .row .content .itm b{ font-size: 1.5rem;}
  .culture .row .content .itm span{ font-size: 1.25rem;}

  .proshow-content{ display: grid; grid-template-columns: repeat(1,100%);}

  .article .content video{ width: 100% !important; height: auto !important;}
  .article .content img{ height: auto !important;}

  .col-about .row .title a.more{ display: none;}
  
  .messagebox{ padding:0 30px 30px;}
  .message-con .form-group{ width:100%;}
  .message-con .form-group1{ width:100%}
  .message-con .form-group input{ width:100% !important;}
  
}