@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){
  .slide .slide-contrl{ right: 5vw;}
  .slide .swiper-container .itm .font{ padding: 2.5vw 2.5vw 2.5vw 5vw;}
  .row{ padding: 3.75vw 5vw;}
  .contact{ padding: 3.75vw 5vw;}
  footer .copyright{ padding: 1rem 5vw}

  /* sub */
  .banner-sub .title{ padding: 0 5vw;}
  .location{ padding: 1.25vw 5vw;}
  
  /* product */
  .product-category{ padding: 0 5vw}
  /* about */
  .aboutpage .about-banner{ padding: 0 5vw}
  .aboutpage .about-number{ padding: 2.5vw 5vw}
  .aboutpage .about-number:after{ left: 5vw; width: calc(100% - 10vw);}
  .aboutpage .about-row{ padding: 2.5vw 5vw}
  /* contact */
  .mapbox .title{ left: 5vw;}
  /* article */
  .article-page{ padding: 3.75vw 5vw}
  /* detail */
  .details-page .info,
  .details-page .title,
  .details-page .content{ padding: 0 5vw}
}
@media screen and (max-width:1024px){
  html.active{ overflow: hidden;}
  .menu{ position: fixed; top: 0; right: 0; z-index: 9; display: block; width: 4rem; height: 4rem;}
  .menu i{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: 2rem; height: 1px; margin: auto; background: var(--w); overflow: hidden; transition: transform .5s;}
  .menu i:first-of-type{ transform: translateY(-.5rem);}
  .menu i:last-of-type{ transform: translateY(.5rem);}
  
  .menu.full i{ background: var(--primary)}

  .menu.close i{ background: var(--w);}
  .menu.close i:first-of-type{ transform: translateY(0) rotate(45deg);}
  .menu.close i:last-of-type{ transform: translateY(0) rotate(-45deg);}
  .menu.close i:nth-of-type(2){ width: 0;}

  header{ height: 4rem;}
  header .logo{ grid-column: span 10; grid-template-columns: 4rem auto;}
  header .logo .cn{ font-size: 1.5rem;}
  header .logo .en{ font-size: .65rem;}
  header nav{ position: fixed; top: 0; right: 0; z-index: 8; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 100%; background: var(--primary); opacity: 0; transform: translateX(100vw); transition: .5s;}
  header nav .itm{ width: 100%; padding: 2vw;}
  header nav .itm .cn{ font-size: 1.5rem; color: var(--w)!important}
  header nav .itm .en{ font-size: 1.25rem; color: var(--w5)!important}
  header nav .search{ display: none;}
  header nav.active{transform: translateX(0); opacity: 1;}
  
  .row{ padding: 4vw;}
  .banner{ display: none;}

  /* slide */
  .slide .swiper-container .itm .font{ left: 5%; width: 90%;}
  .slide .swiper-container .itm .font .caption{ font-size: 1.5rem;}
  .slide .swiper-container .itm .font .cn{ font-size: 1.5rem; margin-bottom: 1rem;}
  .slide .swiper-container .itm .font .en{ font-size: 1.2rem; font-weight: normal;}

  /* solution */
  .solution .row-content{ grid-template-columns: 1fr; grid-gap: 4vw;}
  .solution .row-content .itm .box .info{ padding: 4vw}
  .solution .row-content .itm .box .info .pos{ display: none;}

  /* about */
  .about .row-content{ grid-template-columns: 1fr; grid-template-areas: 'a' 'b' 'c'; grid-gap: 4vw;}
  .about .row-content .cover{ grid-area: a; grid-column: span 1; height: 50vw;}
  .about .row-content .info{ grid-area: b;}
  .about .row-content .number{ height: 20vw;}
  .about .row-content .number .itm .num span{ font-size: 2.25rem;}

  /* achieve */
  .achieve .row-content{ grid-template-columns: 1fr; grid-gap: 4vw;}
  .achieve .row-content .itm .info{ top: auto; bottom: 0; transform: translate(0); height: 20%;}

  /* culture */
  .culture .mask{ height: 100%;}
  .culture .row-title{ display: none;}
  .culture .row-content{ grid-template-columns: 1fr; grid-gap: 4vw;}
  .culture .row-content .itm{ grid-template-rows: 1fr;}
  .culture .row-content .itm .info{ padding: 4vw 0}
  .culture .row-content .itm:nth-child(2) .info{ grid-area: a;}
  .culture .row-content .itm:nth-child(2) .info .cap .cn,
  .culture .row-content .itm:nth-child(2) .info .cap .en,
  .culture .row-content .itm:nth-child(2) .info .slo,
  .culture .row-content .itm:nth-child(2) .info .font{ color: var(--w)}
  .culture .row-content .itm .thumb{ display: none;}

  /* news */
  .news .row-content{ grid-template-columns: 1fr; grid-gap: 4vw;}
  .news .row-content .itm{ padding: 6vw 4vw;}

  /* map */
  .map{ height: 40vw;}

  /* footer */
  .contact .content .nav{ display: none;}
  .contact .content .info{ grid-column: span 12; text-align: left;}
  .contact .content .info .itm{ justify-content: flex-start;}
  .contact .content .info .itm i{ display: none;}
  footer .copyright:after{ content: '\D\A百航科技 - 网络品牌设计';white-space: pre;}

  /* sub */
  .sub{ padding-top: 4rem;}
  .row-page{ margin-top: 4vw;}
  .banner-sub{ height: 40vw;}
  .banner-sub .title{ padding: 0 4vw}
  .banner-sub .title .en{ font-size: 2rem;}
  .banner-sub .title .desc{ font-size: 1rem;}
  .location{ padding: 4vw; justify-content: center;}
  .location .bread{ display: none;}
  .location .category a{ font-size: 1.25rem;}

  /* product */
  .product-category{ display: none;}
  .productpage .row-cate{ grid-template-columns: 1fr; margin-bottom: 4vw;}
  .productpage .row-content{ grid-template-columns: 1fr; grid-gap: 4vw;}
  .productpage .row-content .itm .info{ grid-gap: 2vw;}

  /* about */
  .aboutpage .about-banner{ padding: 0 4vw}
  .aboutpage .about-banner .en{ font-size: 2rem;  }
  .aboutpage .about-banner .desc{ display: none;}

  .aboutpage .about-number{ padding: 4vw;}
  .aboutpage .about-number .itm .num span{ font-size: 1.5rem;}

  .aboutpage .about-number:after{ left: 4vw; width: 92vw;}

  .aboutpage .about-row{ padding: 4vw;}

  .aboutpage .about-row.a_culture .row-content .content{ grid-template-columns: 1fr; grid-template: 4vw;}
  .aboutpage .about-row.a_culture .row-content .content .itm{ padding: 4vw;}
  .aboutpage .about-row.a_culture .row-content .content .itm .ico{ height: auto;}
  .aboutpage .about-row.a_culture .row-content .content .itm .font{ font-size: 1rem;  }

  /* case */
  .casepage .row-content{ grid-template-columns: 1fr;}

  /* news */
  .newspage .row-content{ grid-template-columns: 1fr;}
  .newspage .row-content .itm{ padding: 4vw;}
  
  /* jobs */
  .joblist dt{ grid-template-columns: repeat(3,1fr);}
  .joblist dt span:nth-child(3),
  .joblist dt span:last-child{ display: none;}
  
  .joblist dd .tit{ grid-template-columns: repeat(3,1fr);}
  .joblist dd .tit span:nth-child(3),
  .joblist dd .tit span:last-child{ display: none;}
  
  .joblist dd .info .col{ width: 100%;}

  /* contact */
  .mapbox{ height: 100vw;}
  .mapbox .title{ left: 4vw; width: 40%;}
  .mapbox .title .cn{ font-size: 2.5rem;}
  .mapbox .title .en{ font-size: 2rem;}
  .mapbox .title .desc{ display: none;}

  .contactpage{ margin: 0;}
  .contactpage .row-content{ grid-template-columns: 1fr;}

  /* detail */
  .details-page{ padding: 0; grid-gap: 4vw;}

  .details-page .info .cover .itm .thumb{ padding-bottom: 80%;}
  .details-page .title .name{ font-size: 1.5rem;}
  
  .details-page .info, .details-page .title, .details-page .content{ padding: 0 4vw;}

  /* article */
  .article-page{ padding: 4vw;}
  .article-page .article-title{ font-size: 1.5rem;}

  .article-page .article-arrows{ grid-template-columns: 1fr;}
  .article-page .article-arrows a{ display: block; padding: 4vw;}
  .article-page .article-arrows:after,
  .article-page .article-arrows a.prev{ display: none;}

  /* search */
  .searchpage .row-content .itm i{ display: none;}

  /* apply */
  .apply-list{ grid-template-columns: 1fr;}
  .apply-list dt{ grid-column: span 1;}
  .apply-list dd{ grid-template-columns:  30% 70%;}
  .apply-list input, .apply-list select{ width: 80%;}
  .apply-list dd button{ margin: auto;}
}