@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: 5vw;}
  header .logo{ height: 2.5rem;}
  header .logo a img{ height: 2.5rem;}
  header .nav{ display: none;}
  header .store{ display: none;}
  header .menu{ display: block;}

  section.row.slide{ height: 160vw;}

  section.row .column{ padding: 0 5vw;}
  section.row .column .caption .en{ font-size: 4rem;}

  section.row.about .column{ grid-gap: 5vw;}
  section.row.about .column .slogan{ display: none;}
  section.row.about .column .infor{ grid-column: span 12;}
  section.row.about .column .infor .number .itm strong{ font-size: 2rem;}
  section.row.about .column .infor .number .itm i{ font-size: 1rem;}
  section.row.about .column .intro{ grid-column: span 12;}
  section.row.about .column .intro .content{ grid-gap: 2.5vw;}

  section.row.recommend .colum{ position: relative;}
  section.row.recommend .column .content .swiper{ height: auto;}
  section.row.recommend .column .content .itm{ grid-template-columns: 1fr 60vw 1fr; grid-gap: 5vw;}
  section.row.recommend .column .content .itm .info{ grid-column: 2/3; grid-row: 2/3;}
  section.row.recommend .column .content .itm .info .ml{ width: auto; height: auto; margin-bottom: 5vw; background: none; font-size: 1.5rem;}
  section.row.recommend .column .content .itm .cover{ grid-column: 2/3; -webkit-box-reflect: below 0 linear-gradient( rgba(0,0,0,0.0) 90%, rgba(0,0,0,.3) 100%)}
  section.row.recommend .column .arrow{ position: absolute; top: 50%; left: 5vw; justify-content: space-between; width: 90vw;}
  section.row.recommend .column .arrow .prev,
  section.row.recommend .column .arrow .next{ width: 10vw; height: 10vw;}

  section.row.advantage{ height: 125vw;}
  section.row.advantage::after{ top: 30vw;}
  section.row.advantage .column .content{ top: 18vw; width: 90vw; z-index: 3;}
  section.row.advantage .column .number{ top: 70vw; width: 50vw; height: 40vw;}
  section.row.advantage .column .number i:nth-of-type(1){ margin-top: 19.5vw; margin-right: 0.5vw;}
  section.row.advantage .column .number i:nth-of-type(2){ margin-top: 16vw; margin-right: 0.5vw;}
  section.row.advantage .column .number i:nth-of-type(3){ margin-top: 14.5vw;}
  section.row.advantage .column .number i:nth-of-type(4){ margin-top: 13.5vw;}
  section.row.advantage .column .bottle{ top: 35vw; height: 95vw;}

  section.row.news .column .content{ grid-template-columns: repeat(1,1fr); grid-gap: 10vw;}
  section.row.news .column .content .itm{ grid-gap: 2.5vw;}
  section.row.news .column .content .itm .date{ margin-top: 0;}

  footer{ grid-gap: 5vw; padding: 10vw 5vw 5vw;}
  footer .link{ position: relative; display: grid;}
  footer .navigation{ display: none;}
  footer .store{ position: absolute; top: 0; right: 0;}
  footer .store::before{ display: none;}
  footer .contact{ margin-top: 5vw;}
  footer .copyright::after{ display: none;}

  /* sub */
  .row.content .column{ padding: 5vw!important; grid-gap: 5vw;}

  .list-news{ grid-template-columns: repeat(1,1fr); grid-gap: 10vw;}
  .list-news .itm{ grid-gap: 2.5vw;}
  .list-news .itm .date{ margin-top: 0;}

  .contact-grid .itm .ico{ width: 6rem; text-align: right;}
  .contact-grid .itm .ico img{ height: 2rem;}

  .resource-bg{background: url('../img/resource-wap.webp') no-repeat center bottom / 100% auto;}
  .resource-grid{ grid-gap: 5vw; padding-bottom: 165vw;}
  .resource-grid .info{ grid-column: span 12;}
  .resource-grid .info h1{ font-size: 2.75rem;}
  .resource-grid .desc{ grid-column: span 12; display: grid; grid-gap: 2.5vw;}
  .resource-grid .desc h1{ line-height: 1.5;}
  
  .product-grid:before{ width: 90vw; height: 90vw;}
  .product-grid .itm .cover{ grid-column: span 12; height: auto;}
  .product-grid .itm .cover .thumb{ grid-column: span 12;}
  .product-grid .itm .info{ grid-column: span 12;}
  .product-grid .itm .info .caption .ml{ width: auto; height: auto; padding-bottom: 0; font-size: 1.5rem; background: none;}
  .product-grid .itm .info .link{ display: none;}
  .product-grid .arrow{ display: none;}

  .about-grid .content .cover{ grid-column: span 12; height: 45vw;}
  .about-grid .content .number{ grid-column: span 12; grid-auto-flow: column; justify-content: normal;}
  .about-grid .content .number .itm strong{ font-size: 2rem;}
  .about-grid .content .number .itm i{ font-size: 1rem;}
  .about-grid .content .infor{ grid-column: span 12;}

  .about-grid .content .other{ display: grid; height: auto;}
  .about-grid .content .other .left{ width: 100%; height: 60vw; background: url('../img/about/left.webp') no-repeat center bottom / cover;}
  .about-grid .content .other .left img{ width: 30%;}
  .about-grid .content .other .right{ width: 100%;}
  .about-grid .content .other .right img{ width: 30%;}

  .about-grid .swiper .swiper-slide{ width: 80vw; height: 60vw;}
  .about-grid .swiper .swiper-slide .itm .info{ height: 3rem; font-size: 1.25rem;}

  .row.banner.banner_oth{ height: 19vw;}
  .article-grid{ grid-gap: 5vw;}
  .article-grid .article-arrow{ justify-content: end;}
  .article-grid .article-arrow .prev{ display: none;}
  .article-grid .article-arrow .next i{ display: none;}
}