@charset "utf-8";
@media screen and (min-width:1921px){
  :root{
    font-size: 20px;
  }
}
@media screen and (max-width:1680px){
  :root{
    font-size: 14px;
  }
  .row{ padding: 5vw;}
}
@media screen and (max-width:1440px){
  :root{
    font-size: 12px;
  }
}
@media screen and (max-width:1280px){
  .navigation .list-nav a .cn{ line-height: 4;}
  .wrapper .slogan .cn,
  .about-row .slogan .grid .cn{ font-size: 2.5rem; }
}
@media screen and (max-width:1024px){
  .header{ width: 100vw; height: 50px; flex-flow: row-reverse nowrap;}
  .header:before{ top: auto; bottom: 0; width: 100%; height: 1px; opacity: 0.2;}
  .header .quick{ display: none;}
  .header .logo{ width: 130px; height: 30px; -webkit-mask: url('../img/logo.svg') center center no-repeat; -webkit-mask-size: auto 100%}
  .header .menu{ width: 50px; height: 50px;}
  .header .menu i{ width: 30px;}
  .header .menu i:after{ display: none;}

  .header.hover:after{ width: 0;}
  .header.hover .menu i{ background: var(--priamry);}
  .header.hover .logo{ background: var(--priamry);}

  .header.active .menu i{ background: #fff;}
  .header.active .logo{ background: #fff;}

  .navigation{ transform: translateY(-150vh);}
  .navigation .list-nav{ flex-flow: row nowrap; padding: 15vw 0; justify-content: space-around;}
  .navigation .list-nav a{ display: flex; flex-flow: row nowrap; padding: 0;}
  .navigation .list-nav a .cn{ padding: 0; font-size: 1.5rem;  line-height: 1.5; writing-mode: horizontal-tb; letter-spacing: 0;}
  .navigation .list-nav a .en{ top: 0; position: relative; font-size: 1.25rem; line-height: 1.5; writing-mode: horizontal-tb;}

  .container-about{ width: 100vw; height: 100vh;}
  .watermark{ top: auto; bottom: 0; right: 0; width: 50vw; height: 50vw;}

  .wrapper{ grid-template-rows: auto 100%; width: 100vw; height: calc( 100vh - 50px); margin-top: 50px; padding: 0; }
  .wrapper .slogan{ display: none;}
  .wrapper .title .cn span{ font-size: 4rem;}
  .wrapper .title .cn span:nth-child(1){ top: 5vw; left: 5vw;}
  .wrapper .title .cn span:nth-child(2){ top: 5vw; right: 5vw;}
  .wrapper .title .cn span:nth-child(3){ bottom: 5vw; left: 5vw;}
  .wrapper .title .cn span:nth-child(4){ bottom: 5vw; right: 5vw;}
  .wrapper .title .en{ padding-left: 5vw; font-size: 3rem;}

  .wrapper .content{ grid-column: span 12; align-self: start;}

  .wrapper-article{ width: 100vw; height: calc( 100vh - 50px); margin-top: 50px;}
  
  .wrapper-article .article{ padding: 5vw 0; grid-gap: 1rem; grid-template-rows: 4rem auto auto 2.25rem}
  .wrapper-article .article .article-banner{ display: none;}
  .wrapper-article .article .article-arrows{ grid-row: 1 / 5;}

  .list-news{ height: calc(100vh - 50px);}
  .list-news:after{ content: 'slide'; font-size: 3rem;}
  .list-news .itm .box{ grid-gap: .5rem;}
  .list-news .itm .box .date{ display: flex;}
  .list-news .itm .box .date .y:before{ content: ',';}
  .list-news .itm .box .tit{ font-size: 1.5rem;}
  .list-news .itm .box .desc{ font-size: 1.125rem; line-height: 1.5;}

  .list-news .itm .box .date{ opacity: 1; transform: translateY(0);}
  .list-news .itm .box .tit{ opacity: 1; transform: translateY(0);}
  .list-news .itm .box .desc{ opacity: 1; transform: translateY(0);}
  .list-news .itm .box .thumb{ opacity: 1; transform: translateY(0);}

  .list-news .arrows{ display: none;}

  .list-contact{ height: calc( 70vh - 50px - 5vw); grid-column: 1 / 9; grid-row: 2 / 3; display: grid; grid-template-columns: 1fr; justify-items: center;}
  .list-contact a{ display: grid; grid-template-columns: 20% 80%; width: 100%; padding: 2.5vw 0; width: 100%;}
  .list-contact a i{ grid-row: 1 / 3; font-size: 3rem; justify-self: center; align-self: center;}
  .list-contact a .en{ grid-column: 2 / 3; align-self: end; font-size: 1.25rem; color: var(--tertiary)}
  .list-contact a .cn{ grid-column: 2 / 3; align-self: start; font-size: 1.25rem; font-weight: 700; word-break:break-all;}
  .contact-map{ grid-column: 1 / 9; grid-row: 1 / 2; width: 100%; height: 30vh; margin: 0;}

  .product-title{ position: relative; bottom: auto; left: auto; grid-column: 1 / 13; width: 100%; margin-top: 2.5vw;}
  .product-title .ico{ justify-content: flex-end;}
  .product-title .cn{ font-size: 2rem;}

  .product-cate{ grid-column: 1 / 9; display: block; text-align: left; overflow-x: auto; white-space: nowrap; font-size: 0;}
  .product-cate a{ display: inline-block; margin: 0 1em}

  .product-arrows{ grid-column: 1 / 9; flex-flow: row nowrap; padding: 5vw 0;}
  .product-arrows .prev,
  .product-arrows .next{ writing-mode: horizontal-tb;}
  
  .list-product{ grid-column: 1 / 9; height: auto;}
  .list-product .itm{ padding: 0 2.5vw 2.5vw;}

  .list-album{ grid-column: 3 / 9; width: 100%; height: calc( 100vh - 50px); padding-right: 5vw;}
  .list-album .itm{ width: 100%; padding: 2.5vw 0}
  .list-album .itm .box{ position: relative;}
  .list-album .itm .box .thumb{ position: relative; z-index: 1;}
  .list-album .itm .box .info{ position: absolute; z-index: 2; left: 0; bottom: 0; grid-gap: 0; padding: 1.25vw 0 2.5vw; background: rgba(9,59,57,.8); opacity: 0;}
  .list-album .itm .box .info .tit{ color: #fff;}
  .list-album .itm .box .info .cate{ font-size: .75rem;}
  .list-album .itm.swiper-slide-active .box .info{ opacity: 1;}

  .list-album .itm.swiper-slide-next .box{ align-items: center;}
  .list-album .itm.swiper-slide-next .box{ padding-left: 0;}
  .list-album .itm.swiper-slide-next .box .thumb{ width: 100%; padding-bottom: 75%;}
  .list-album .itm.swiper-slide-next .box .thumb:after{ filter: blur(0); opacity: 0; }
  .list-album .itm.swiper-slide-next .box .thumb .mask{ background: rgba(0,0,0,.8); opacity: 0;}
  .list-album .itm.swiper-slide-next .box .thumb .mask:before,
  .list-album .itm.swiper-slide-next .box .thumb .mask:after{ display: block;}
  .list-album .itm.swiper-slide-next .box .info{ opacity: 0;}

  .ablum-cate{ position: relative; top: auto; left: auto; display: flex; justify-content: center; align-items: center; grid-column: 1 / 3;}

  .album-arrows{ display: none;}
  .album-pagination{ display: none;}

  .container-commodity{ width: 100vw; height: calc(100vh - 50px); margin-top: 50px; padding: 0;}
  .commodity-row{ padding: 0 5vw; grid-gap: 0; grid-template-rows: auto auto auto 10vw;}
  .commodity-row .cover{ position: relative; grid-column: span 12; grid-row: 1 / 2;}
  .commodity-row .cover .list-cover{ grid-column: 2 / 11;}
  .commodity-row .cover .list-cover .arrow.prev{ opacity: 1;}

  .commodity-row .info{ grid-column: span 12; grid-gap: 0.5rem; font-size: 1.125em; align-self: start;}
  .commodity-row .info .cate{ grid-column: span 2;}
  .commodity-row .info .tit{ grid-column: span 2; font-size: 2.25rem;}
  .commodity-row .info .slo,
  .commodity-row .info .spec{ grid-column: 1 / 2;}
  .commodity-row .info .price{ grid-column: 2 / 3; grid-row: 3 / 5; font-size: 2rem; justify-self: end; align-self: end;}

  .commodity-row .buy{ grid-column: span 12; background: var(--secondary); align-self: start;}
  .commodity-row .buy:before{ color: #fff;}

  .commodity-row .copyright{ display: none;}
  
  .commodity-row .view{ bottom: 0;}
  .commodity-row .view span{ opacity: 1; font-size: 1.125rem;}
  .commodity-row .view span:before{ content: '点击';}
  .commodity-row .back{ top: 0;}
  .commodity-row .back span{ opacity: 1; font-size: 1.125rem;}
  .commodity-row .back span:before{ content: '点击';}
  
  .commodity-row .commodity{ grid-column: span 12;}
  .commodity-row .commodity .commodity-info{ display: none;}
  .commodity-row .commodity .commodity-content{ grid-column: span 10; height: calc( 100vh - 40vw); margin-top: 20vw; padding: 0}
  .commodity-row .commodity .commodity-content .title{ font-size: 1.5rem; padding: 5vw;}
  .commodity-row .commodity .commodity-content .content{ top: auto; width: 100%; height: calc( 100% - 3rem - 15vw); padding: 0 5vw;}

  .container-about{ height: calc( 100vh - 50px); margin-top: 50px; padding: 0;}
  .container-about .slogan{ display: none;}
  .container-about .title .cn span{ font-size: 4rem;}
  .container-about .title .cn span:nth-child(1){ top: 5vw; left: 5vw;}
  .container-about .title .cn span:nth-child(2){ top: 5vw; right: 5vw;}
  .container-about .title .cn span:nth-child(3){ bottom: 5vw; left: 5vw;}
  .container-about .title .cn span:nth-child(4){ bottom: 5vw; right: 5vw;}
  .container-about .title .en{ padding-left: 5vw; font-size: 3rem;}

  .about-row{ padding: 0; opacity: 0; transition: all .8s;}
  .about-row.swiper-slide-active{ opacity: 1;}

  .about-row .caption{ align-self: end; grid-column: 2 / 12; flex-flow: column nowrap; align-items: start; writing-mode: horizontal-tb; padding: 2.5vw 0;}
  .about-row .caption .cn{ writing-mode: horizontal-tb; font-size: 1.75rem;}
  .about-row .caption .en{ writing-mode: horizontal-tb; padding-top: 1.25vw; font-size: 1rem;}
  .about-row .content{ align-self: start; grid-column: 2 / 12;}

  .profile .content{ grid-gap: 1rem; padding: 0;}
  .profile .content h1{ font-size: 1.75rem;}

  .profile .cover{ position: relative; top: auto; bottom: auto; right: auto; grid-column: 2 / 12; width: 100%}
  .profile .cover:after{ display: none;}
  
  .list-culture{ grid-template-columns: 1fr;}
  .list-culture .itm{ grid-column: span 1!important; grid-row: span 1!important; grid-gap: 1rem; padding: 5vw!important}
  .list-culture .itm .mask{ left: 1rem; right: auto; writing-mode: horizontal-tb;}
  .list-culture .itm .tit b{ font-size: 1.75rem}
  .list-culture .itm .slo .cn{ font-size: 1.25rem;}

  .list-quali{ height: 70vh;}
  .list-quali .itm .box{ grid-gap: 0;}
  .list-quali .itm .box .thumb{ grid-column: span 6; background-color: var(--light);}
  .list-quali .itm .box .info{ grid-column: span 6; width: 100%; padding: 2.5vw 5vw; margin: 0; display: block; text-align: center;}
  .list-quali .itm .box .info span{ font-size: 1.25rem;}
  .list-quali .itm .box .info i{ display: none;}

  .join .content .info{ padding: 2.5vw; font-size: 1rem;}
}