@charset "utf-8";
/* common */
.ell{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-word; overflow: hidden;}

.cursor,
.cursor::after { user-select: none; pointer-events: none; mix-blend-mode: difference;}
.cursor { position: fixed; z-index: 99999; display: none; width: 40px; height: 40px; transition-timing-function: ease-out;}
.cursor:after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: var(--color-primary); border-radius: var(--radius-rounded); color: black; transform: translate(-50%,-50%); transition: all .3s; }
.incursor:after { width: 80px; height: 80px; background: white;}
.indetails:after { content: 'Details'; display: flex; justify-content: center; align-items: center; width: 128px; height: 128px; background: white; font-size: 1.25rem;}
.inplay:after { content: 'Play'; display: flex; justify-content: center; align-items: center; width: 128px; height: 128px; background: white; font-size: 1.25rem;}
.inprev,
.innext{ mix-blend-mode: normal;}
.inprev:after { content: 'PREV'; display: flex; justify-content: center; align-items: center; width: 128px; height: 128px; color: white; background: rgba(0,0,0,.8); font-size: 1.25rem;}
.innext:after { content: 'NEXT'; display: flex; justify-content: center; align-items: center; width: 128px; height: 128px; color: white; background: rgba(0,0,0,.8); font-size: 1.25rem;}

.row{ position: relative; z-index: 0; width: 100%; height: auto; padding: 3.75vw 0;}
.row .row-title{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw; width: 100%; max-width: 1416px; margin: auto; line-height: 1.5;}

.row .row-title .caption{ text-transform: uppercase;}
.row .row-title .caption .en{ font-size: 1.25rem; color: var(--color-primary);}
.row .row-title .caption .cn{ font-size: 2.5rem; font-weight: var(--weight-bold);}

.row .row-title .slogan{ display: flex; flex-flow: column; justify-content: center; text-align: right;}
.row .row-title .slogan .cn{ font-size: 3rem; font-family: ZKTK;}
.row .row-title .slogan .en{ font-size: 1rem;}

.row .row-content{ display: grid; grid-gap: 1.25vw; width: 100%; max-width: 1416px; margin: auto;}

.superiority .row-title,
.advertising .row-title,
.store .row-title{ display: block;}

.superiority .row-title .slogan,
.advertising .row-title .slogan,
.store .row-title .slogan{ text-align: center;}

.menu{ position: fixed; top: 3rem; right: 3rem; z-index: 99; display: flex; flex-flow: column; align-items: center; justify-content: space-between; width: 3rem; overflow: hidden;}
.menu i{ display: block; width: 3rem; height: 1px; background: var(--color-primary);}
.menu span{ display: block; width: 3rem; font-size: 0; line-height: 2.5; white-space: nowrap; color: var(--color-primary);}
.menu span:before{ content:''; display: inline-block; width: 2.2rem; height: 1px; margin-right: 3px; vertical-align: middle; background: var(--color-primary);}
.menu span:after{ content: 'Menu'; display: inline-block; font-size: 0.75rem; vertical-align: middle;}
.menu:hover span:before{ width: 1rem;}

.navigation{ position: fixed; z-index: 999; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: url('../cssimg/navigation.webp') center center no-repeat; background-size: cover; overflow: hidden; transform: translateX(100vw); filter: blur(10px); opacity: 0; transition: all .3s;}
.navigation:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,.9);}
.navigation .close{ position: absolute; z-index: 2; top: 3rem; left: 3rem; width: 4.25rem; height: 4.25rem}
.navigation .close:before,
.navigation .close:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 1px; margin: auto; background: white;}
.navigation .close:before{ transform: rotate(45deg);}
.navigation .close:after{ transform: rotate(135deg);}
.navigation .copyright{ position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; width: 100%; max-width: 1416px; margin: auto; font-size: 0.875rem; line-height: 3rem; color: white;}
.navigation .copyright:after{ content: '技术支持：青骄网络'; position: absolute; top: 0; right: 0; bottom: 0; margin: auto;}
.navigation .content{ position: relative; z-index: 2; display: flex; justify-content: space-between; width: 73.75vw;}  
.navigation .content .navlist{ display: flex; align-items: start; transform: translateY(100vh); opacity: 0; transition: all .5s cubic-bezier(0.02, 0.95, 0.4, 1) .3s; flex-shrink: 0;}
.navigation .content .navlist span{ font-size: 1rem; line-height: 1.5; color: white; text-transform: uppercase; writing-mode: vertical-lr; }
.navigation .content .navlist ul{ margin-left: 2rem; list-style: none;}
.navigation .content .navlist ul li{ margin-bottom: 1.5rem; transition: all .3s cubic-bezier(0.02, 0.95, 0.4, 1);}
.navigation .content .navlist ul li a{ display: block; font-size: 1.125rem; line-height: 2; color: white;}
.navigation .content .contact{ display: flex; align-items: start; transform: translateY(100vh); opacity: 0; transition: all .5s cubic-bezier(0.02, 0.95, 0.4, 1) .4s; flex-shrink: 0;}
.navigation .content .contact span{ font-size: 1rem; line-height: 1.5; color: white; text-transform: uppercase; writing-mode: vertical-lr; }
.navigation .content .contact dl{ margin-left: 2rem; color: white;}
.navigation .content .contact dl dt{ font-size: 2rem; line-height: 1.5; margin-bottom: 2.5rem;}
.navigation .content .contact dl dd{ font-size: 1rem; line-height: 2.5rem;}
.navigation .content .contact dl dd i{ font-size: 1.5rem; vertical-align: middle; margin-right: 0.25em;}
.navigation .content .qrcode{ display: flex; align-items: start; transform: translateY(100vh); opacity: 0; transition: all .5s cubic-bezier(0.02, 0.95, 0.4, 1) .5s; flex-shrink: 0;}
.navigation .content .qrcode span{ font-size: 1rem; line-height: 1.5; color: white; text-transform: uppercase; writing-mode: vertical-lr; }
.navigation .content .qrcode img{ margin-left: 2rem; display: block; width: 7.5rem; height: 7.5rem;}

.navigation.act{ transform: translateX(0); filter: blur(0); opacity: 1;}
.navigation.act .content .navlist{ transform: translateY(0); opacity: 1;}
.navigation.act .content .contact{ transform: translateY(0); opacity: 1;}
.navigation.act .content .qrcode{ transform: translateY(0); opacity: 1;}

.navigation.act .content .navlist:hover ul li{ }
.navigation.act .content .navlist:hover ul li:hover{ opacity: 1;}
/* container */
.container{ position: relative; width: 100%; height: auto;}
  /* index-slide */
  .index{ position: relative; z-index: 1; width: 100%; height: 100vh;}
  .index .slide{ width: 100%; background: #000;}
  .index .slide .itm{ position: relative; width: 100%; height: 100vh;}
  .index .slide .itm .en{ position: absolute; z-index: 1; top: 3rem; left: 3rem; font-size: 1.25rem; line-height: 1.5; letter-spacing: 1em; text-transform: uppercase; color: white; opacity: 0; transition: all 3s;}
  .index .slide .itm .en:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 2em; height: 1px; background: white;}
  .index .slide .itm .logo{ position: absolute; z-index: 1; top: 50%; right: 50%; transform: translate(50%,-125%); opacity: 0; transition: all 3s;}
  .index .slide .itm .cn{ position: absolute; z-index: 1; top: 50%; right: 50%; transform: translate(50%,-50%); font-size: 3.75rem; line-height: 1.5; font-family: ZKTK; color: white; text-shadow: 5px 5px 5px rgba(0,0,0,.3); opacity: 0; transition: all 3s;}
  .index .slide .itm .thumb{ width: 100%; height: 100%; overflow: hidden;}
  .index .slide .itm .thumb .img{ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all 8s; transform:scale(1.2)}
  .index .slide .itm .video{ position: relative; width: 100%; height: 100%; overflow: hidden;}
  .index .slide .itm .video video{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); min-width: 100%; min-height: 100%; }

  .index .slide .slick-ani.itm .thumb .img{transform:scale(1)}
  .index .slide .slick-ani.itm .en{ opacity: 1;}
  .index .slide .slick-ani.itm .logo{ opacity: 1;}
  .index .slide .slick-ani.itm .cn{ opacity: 1;}

  .index .slide .slick-arrow{ position: absolute; top: 0; bottom: 0; z-index: 3; display: flex; align-items: center; width: 10%; height: 50%; margin: auto;}
  .index .slide .slick-prev{ left: 3rem;}
  .index .slide .slick-next{ right: 3rem;}
  .index .scroll{ position: absolute; bottom: 3rem; left: 3rem; z-index: 2; display: flex; flex-flow: column; align-items: center;}
  .index .scroll i{position: relative; z-index: 1; display: block; width: 1px; height: 6rem; margin-bottom: 1rem; background: white; overflow: hidden;}
  .index .scroll i:before{ content: ''; position: absolute; top: -100%; right: 0; left: 0; z-index: 2; width: 1px; height: 6rem; background: var(--color-primary); animation: up 2s infinite; }
  .index .scroll span{ font-size: 0.875rem; text-transform: uppercase; writing-mode: vertical-lr; transform: rotate(180deg); color: white;}
  .index .hotline{ position: absolute; right: 3rem; bottom: 3rem; z-index: 2; display: flex; align-items: center; border-bottom: 1px solid white;}
  .index .hotline i{ padding-right: 0.5em; font-size: 0.875rem; line-height: 1.5; color: white;}
  .index .hotline span{ font-size: 1.5rem; line-height: 1.5; color: white;}
  @keyframes up{ from { top: -100%; } to { top: 100%; } }
  /* about */
  .about .row-title .slogan .cn{ line-height: 1.25;}
  .about .row-content{ grid-template-columns: repeat(12,1fr); margin: 2.5vw auto;}
  .about .row-content .slogan{ grid-gap: 1/2; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--color-primary)}
  .about .row-content .banner{ position: relative; grid-column: 3/8; display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 1.25vw;}
  .about .row-content .banner .circle{ grid-column: 1/5; position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 100%; border: 3px solid var(--color-primary); border-radius: 50%; background: white;}
  .about .row-content .banner .circle .grains{ position: absolute; top: 18%; right: 0; left: 0; z-index: 1; width: 25%; height: 50%; margin: auto; background: url('../cssimg/grains.svg') center center no-repeat; background-size: 100%;}
  .about .row-content .banner .circle .logo{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; background: url('../cssimg/logo-c.jpg') center center no-repeat; background-size: 60%;}
  .about .row-content .banner .rice{ position: absolute; top: 0; right: 0; z-index: 0; width: 60%; height: 60%; background: url('../cssimg/rice.svg') no-repeat; background-size: 100%;}
  .about .row-content .adv{ grid-column: 9/13; margin-bottom: 4rem; display: flex; align-items: center; justify-content: flex-end; font-size: 1.125rem; line-height: 2; text-align: right;}
  .about .row-content .desc{ grid-column: 6/13; margin-top: -4rem; font-size: 1rem; line-height: 2; text-align: right; }
  .about .row-number{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw; width: 100%; max-width: 1416px; margin: auto;}
  .about .row-number .itm{ display: flex; flex-flow: column; justify-content: center; align-items: center;}
  .about .row-number .itm .num{ font-size: 0; line-height: 1.5;}
  .about .row-number .itm .num strong{ display: inline-block; font-size: 3rem; color: var(--color-primary)}
  .about .row-number .itm .num i{ display: inline-block; font-size: 0.875rem; font-style: normal;}
  .about .row-number .itm .cap{ font-size: 1rem; line-height: 1.5; color: var(--color-tag)}

  /* superiority */
  .superiority .row-title .slogan .en{ color: white}
  .superiority .row-title .slogan .cn{ color: white}
  .superiority .row-content{ grid-template-columns: repeat(4,1fr); padding-top: 3.125vw;}
  .superiority .row-content .itm{ display: flex; flex-flow: column; align-items: center; justify-content: center; line-height: 1.5; text-transform: uppercase;}
  .superiority .row-content .itm .ico{ line-height: 1;}
  .superiority .row-content .itm .ico i{ font-size: 4rem; color: white}
  .superiority .row-content .itm .cn{ padding: 10px 0; font-size: 1.25rem; color: white}
  .superiority .row-content .itm .en{ font-size: 0.875rem; color: white}

  /* video */
  .video .row-title .slogan{ grid-column: 2/3;}
  .video .row-title .slogan .en{ color: white}
  .video .row-title .slogan .cn{ color: white}
  .video .row-content .button-play{ width: 100%; padding: 6vw 0; }
  .video .row-content .button-play i{ display: flex; justify-content: center; align-items: center; width: 6rem; height: 6rem; border: 5px solid white; border-radius: 50%; margin: auto; font-size: 4rem; color: white; opacity: 0.5;}
  .video .row-content .desc{ font-size: 1.25rem; line-height: 1.75; color: white;}
  .video .row-content .mp4{ display: none;}


  /* recommended */
  .recommended{ background: url('../cssimg/recommended.png') center bottom no-repeat; background-size: 100% auto;}
  .recommended .row-content{ grid-template-columns: repeat(2,1fr); grid-row-gap: 0;}
  .recommended .row-content .itm{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw; padding-top: 2.5vw;}
  .recommended .row-content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
  .recommended .row-content .itm .thumb:before,
  .recommended .row-content .itm .thumb:after{ content: ''; position: absolute; top: 0; right: 0; display: block; width: 100%; height: 100%; border-radius: 50%; }
  .recommended .row-content .itm .thumb:before{ z-index: 1; background: url('../cssimg/logo-c.svg') center center no-repeat; background-size: 55%; opacity: .1;}
  .recommended .row-content .itm .thumb:after{ z-index: 0; background: var(--color-secondary);}
  .recommended .row-content .itm .thumb img{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; display: block; max-width: 70%; max-height: 70%; margin: auto; transition: all .2s; }
  .recommended .row-content .itm:hover .thumb img{ transform: scale(1.1);}
  .recommended .row-content .itm .info{ position: relative; display: flex; flex-flow: column; justify-content:space-between; line-height: 1.5; width: 100%; overflow: hidden;}
  .recommended .row-content .itm .info .num{ font-size: 0.75rem; color: var(--color-desc)}
  .recommended .row-content .itm .info .num:before{ content: 'PRODUCTS-'}
  .recommended .row-content .itm .info .tit .cap{ font-size: 1.25rem}
  .recommended .row-content .itm .info .tit .tag{ padding-top: 1em; font-size: 0.875rem; color: var(--color-tag)}
  .recommended .row-content .itm .info .line{ height: 1px; background: var(--color-primary);}
  .recommended .row-content .itm .info .price{ font-size: 1.5rem; color: var(--color-info)}
  .recommended .row-content .itm .info .price:after{ content: '元'; font-size: 0.75rem;}
  .recommended .row-content .itm .info .buy{ position: relative; display: block; width: 65%; font-size: 1rem; line-height: 3; text-align: center; background: var(--color-primary); color: white; transition: all .2s;}
  .recommended .row-content .itm .info .buy:before,
  .recommended .row-content .itm .info .buy:after{ content: ''; position: absolute; display: block; width: 0; height: 1px; background: var(--color-primary); transition: all .2s;}
  .recommended .row-content .itm .info .buy:before{ top: 0; left: 0;}
  .recommended .row-content .itm .info .buy:after{ bottom: 0; right: 0;}
  .recommended .row-content .itm .info .buy:hover{ background: none; color: var(--color-primary);}
  .recommended .row-content .itm .info .buy:hover:before{ width: 100%; transition-delay: .1s;}
  .recommended .row-content .itm .info .buy:hover:after{ width: 100%; transition-delay: .3s;}
  .recommended .row-content .itm .info .buy span{ position: relative; display: block; width: 100%; height: 100%;}
  .recommended .row-content .itm .info .buy span:before,
  .recommended .row-content .itm .info .buy span:after{ content: ''; position: absolute; display: block; width: 1px; height: 0; background: var(--color-primary); transition: all .2s;}
  .recommended .row-content .itm .info .buy span:before{ bottom: 0; left: 0;}
  .recommended .row-content .itm .info .buy span:after{ top: 0; right: 0;}
  .recommended .row-content .itm .info .buy:hover span:before{ height: 100%; transition-delay: .4s;}
  .recommended .row-content .itm .info .buy:hover span:after{ height: 100%; transition-delay: .2s;}
  .recommended .row-content .itm .info .detail{ display: block; font-size: 0.875rem; text-decoration: underline;}
  .recommended .row-content .itm .link{ display: none;}
    /* recommended-light-box */
    .buy-link{ display: flex; justify-content: space-between; align-items: center; width: 8rem; height: 2rem;}
    .buy-link a i{ font-size: 2rem; color: white}

  /* news */
  .news{ background: url('../cssimg/news.png') right center no-repeat; background-size: auto 100%; overflow: hidden;}
  .news:before{ content: ''; position: absolute; top: 50%; left: 0; display: block; width: 4.875rem; height: 9.75rem; background: url('../cssimg/circle-1.png') no-repeat; background-size: 100%; transform: translateY(-50%); }
  .news:after{ content: ''; position: absolute; top: 0; right: 0; display: block; width: 11.375rem; height: 22.75rem; background: url('../cssimg/circle-2.png') no-repeat; background-size: 100%; }
  .news .row-title .slogan .cn{ font-size: 2rem;}
  .news .row-content{ grid-template-columns: repeat(2,1fr);}
  .news .row-content .news-list{ width: 100%; height: 100%;}
  .news .row-content .news-list .group{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw; padding-top: 2.5vw;}
  .news .row-content .news-list .group .itm{ width: 100%; overflow: hidden;}
  .news .row-content .news-list .group .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3); overflow: hidden;}
  .news .row-content .news-list .group .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; min-width: 100%; min-height: 100%; margin: auto; transition: all .2s;}
  .news .row-content .news-list .group .itm .info{ line-height: 1.5;}
  .news .row-content .news-list .group .itm .info .date{ padding: .5em 0; font-size: 0.875rem; color: var(--color-desc)}
  .news .row-content .news-list .group .itm .info .tit{ font-size: 1.125rem;}
  .news .row-content .news-list .group .itm .info .desc{ padding-top: 1em; font-size: 0.875rem; color: var(--color-desc)}
  .news .row-content .news-list .group .itm .info .detail{ position: relative; display: block; padding: 0 1em; margin-top: 2em; font-size: 1rem; line-height: 2; color: var(--color-tag)}
  .news .row-content .news-list .group .itm .info .detail:after{ content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 7em; height: 1px; background: var(--color-desc); transition: all .2s;}
  .news .row-content .news-list .group .itm:hover .thumb img{ transform: scale(1.1);}
  .news .row-content .news-list .group .itm .detail:hover{ color: var(--color-primary)}
  .news .row-content .news-list .group .itm .detail:hover:after{ width: 100%; background:  var(--color-primary);}

  .news .row-content  .news-list .slick-arrow{ position: absolute; right: -2.5vw; z-index: 3; display: flex; align-items: center; font-size: 0.75rem; font-family: "jfsy" !important; text-transform: uppercase; writing-mode: vertical-lr; color: var(--color-desc);}
  .news .row-content  .news-list .slick-prev{ top: 2.5vw;}
  .news .row-content  .news-list .slick-prev:before{ content: '\e625  prev';}
  .news .row-content  .news-list .slick-next{ top: 10vw;}
  .news .row-content  .news-list .slick-next:before{ content: 'next  \e626';}
  

  /* products */
  .products{ padding-bottom: 0;}
  .products .row-content{ grid-template-columns: repeat(3,1fr); grid-gap: 0; min-width: 100%; padding-top: 2.5vw;}
  .products .row-content .itm{ position: relative; display: flex; flex-flow: column; align-items: center; padding-bottom: 2.5rem; overflow: hidden; background: var(--color-secondary)}
  .products .row-content .itm .bg{ position: absolute; top: 0; right: 0; z-index: 0; display: flex; flex-flow: column; justify-content: space-between; width: 100%; height: 100%; padding: 2.5rem; background: url('../cssimg/p-bg-c.svg') 30% 45% no-repeat; background-size: 33%; line-height: 1.5; transition: all .5s;}
  .products .row-content .itm .bg .slogan{ font-size: 1rem; text-transform: uppercase; color: var(--color-primary)}
  .products .row-content .itm .bg .num{ font-size: 0.75rem; text-transform: uppercase; color: var(--color-text)}
  .products .row-content .itm .bg .num:before{ content: 'product-';}
  .products .row-content .itm .info{ position: relative; width: 100%; padding: 2.5rem; padding-bottom: 0; text-align: right; line-height: 1.5; font-weight: bold; transition: all .5s;}
  .products .row-content .itm .info .en{ font-size: 2rem; text-transform: uppercase; color: var(--color-info)}
  .products .row-content .itm .info .cn{ padding-top: 0.75rem; font-size: 1.5rem; color: var(--color-text)}
  .products .row-content .itm .thumb{ position: relative; z-index: 1; width: 50%; height: 0; padding-bottom: 50%; margin-top: 2.25rem; background-size: 100%; -webkit-box-reflect: below 0 -webkit-linear-gradient( transparent,transparent 85%,rgba(255,255,255,.2)); overflow: hidden;transition: all .5s;}
  .products .row-content .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; max-width: 100%; max-height: 100%; margin: auto; }
  .products .row-content .itm:nth-child(even){ background: var(--color-light);}
  .products .row-content .itm:nth-child(even) .bg{ background: url('../cssimg/p-bg-c.svg') 30% 45% no-repeat; background-size: 33%; }
  .products .row-content .itm:nth-child(even) .bg .slogan{ color: white}
  .products .row-content .itm:nth-child(even) .bg .num{ color: white}
  .products .row-content .itm:nth-child(even) .info .en{ color: white;}
  .products .row-content .itm:nth-child(even) .info .cn{ color: white;}

  .products .row-content .itm:hover .bg{ transform: scale(.95);}
  .products .row-content .itm:hover .thumb{ transform: scale(1.15);}
  .products .row-content .itm:hover .info{ text-shadow: 2px 2px 5px rgba(0,0,0,.15);}

  /* advertising */
  .advertising .row-title .slogan .ico{ width: 8.125rem; height: 7.8125rem; margin: 0 auto 1.5rem; background: white; -webkit-mask: url('../cssimg/logo-c.svg'); -webkit-mask-size: 100%}
  .advertising .row-title .slogan .lang{ width: 3rem; height: 0.75rem; margin: auto; background: url('../cssimg/lang.svg') center center no-repeat;}
  .advertising .row-title .slogan .cn{ color: white;}
  .advertising .row-title .slogan .en{ color: white;}

  /* store */
  .store{ background: url('../cssimg/store.png') center bottom no-repeat white; background-size: 100%;}
  .store .row-content{ grid-template-columns: repeat(3,1fr); padding-top: 5rem;}
  .store .row-content .itm{ display: flex; flex-flow: column; align-items: center; justify-content: center;}
  .store .row-content .itm svg{ width: 3rem; height: 4.5rem;}
  .store .row-content .itm span{ font-size: 1rem; line-height: 1.5;}

  /* map */
  .map{ background: url('../cssimg/map.png') center center no-repeat white; background-size: cover;}
  .map .row-content{ max-width: 100%;}
  .map .row-content .map-button{ display: flex; flex-flow: column; align-items: center; justify-content: center; line-height: 1.5; color: white;}
  .map .row-content .map-button i{ font-size: 3rem;}
  .map .row-content .map-button .cn{ font-size: 1.5rem;}
  .map .row-content .map-button .en{ font-size: 1rem;}

  footer{ background: var(--color-text);}
  footer .row{ position: relative; display: grid; grid-template-columns: repeat(2,1fr); max-width: 1416px; margin: auto;}
  footer .row:after{ content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block; width: 130px; height: 125px; margin: auto; background: white; -webkit-mask: url('../cssimg/logo-c.svg'); -webkit-mask-size: 100% }
  footer .row .site-map{ display: flex;}
  footer .row .site-map dl{ margin-right: 4rem;}
  footer .row .site-map dl dt{ font-size: 1.125rem; line-height: 1.5; padding-bottom: 1.25rem;}
  footer .row .site-map dl dt a{ color: white;}
  footer .row .site-map dl dd{ font-size: 0.875rem; line-height: 2;}
  footer .row .site-map dl dd a{ color: white;}
  footer .row .contact{ text-align: right; color: #fff}
  footer .row .contact strong{ display: block; font-size: 1.125rem; line-height: 1.5; padding-bottom: 1.25rem;}
  footer .row .contact p{ font-size: 0.875rem; line-height: 2;}
  footer .row .quick{ display: flex; align-self: end;}
  footer .row .quick a{ margin-right: 1em; font-size: 24px;}
  footer .row .quick a i{ font-size: 24px; color: white;}
  footer .row .store-btn{ justify-self: end; display: flex; margin-top: 3rem;}
  footer .row .store-btn a{ margin-left: 1em; font-size: 24px;}
  footer .row .store-btn a i{ font-size: 24px; color: white;}

  footer .copyright{ background: var(--color-dark);}
  footer .copyright .content{ position: relative; width: 100%; max-width: 1416px; margin: auto; font-size: .875rem; line-height: 3rem; color: #fff}
  footer .copyright .content:after{ content: '技术支持:青骄网络'; position: absolute; top: 0; right: 0; bottom: 0; margin: auto;}

  /* sub */
  .header{ position: fixed; top: 0; right: 0; width: 100%; height: 9rem;}

  .page-title{ position: relative; width: 100%; height: 30vw; color: white; background-size: 6rem;}
  .page-title .facia{ position: absolute; bottom: 0; right: 13.125vw; z-index: 3; width: 10rem; height: 70%; padding: 2.5rem; color: var(--color-dark); line-height: 1.25; text-transform: uppercase; background: url('../cssimg/logo-c.svg') center bottom 2.5rem no-repeat white; background-size: 5rem;}
  .page-title .facia .cn{ float: left; font-size: 2.5rem; writing-mode: vertical-lr;}
  .page-title .facia .en{ float: left; font-size: 1.5rem; writing-mode: vertical-lr;}
  .page-title .slogan{ position: absolute; top: 3rem; left: 3rem; z-index: 3; font-size: 1rem; line-height: 2; text-transform: uppercase; letter-spacing: 1em; font-family: 'JetBrains Mono';}

  .page-bread{ position: relative; width: 100%; height: auto; background: white;}
  .page-bread:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 1416px; height: 1px; background: var(--color-primary);}
  .page-bread .bread-list{ width: 100%; max-width: 1416px; margin: auto; font-size: 0; line-height: 1.5; padding: 1.5rem 0;}
  .page-bread .bread-list:before{ content: '当前位置：'; display: inline-block; font-size: 1rem; }
  .page-bread .bread-list a{ display: inline-block; font-size: 1rem;}
  .page-bread .bread-list a:not(:last-child):after{ content: '>'; display: inline-block; padding: 0 .25em}

  .page-content{ width: 100%; height: auto; padding: 3.75vw 0; background: white;}
  .page-content .about-page{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw; width: 100%; max-width: 1416px; margin: auto; background: url('../cssimg/logo-c.svg') left bottom no-repeat; background-size: 7.5rem;}
  .page-content .about-page .cover{ position: relative; grid-column: 1/10; height: 18.75vw;}
  .page-content .about-page .cover:after{ content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: var(--color-secondary); transform: translateX(-100%);}
  .page-content .about-page .cover .img{ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;}
  .page-content .about-page .number{ grid-column: 10/13; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.25vw;}
  .page-content .about-page .number .itm{ display: flex; flex-flow: column; justify-content: center; align-items: flex-start; padding-left: 1.25vw;}
  .page-content .about-page .number .itm .num{ font-size: 0; line-height: 1.5;}
  .page-content .about-page .number .itm .num strong{ display: inline-block; font-size: 3rem; font-weight: normal; color: var(--color-info)}
  .page-content .about-page .number .itm .num i{ display: inline-block; font-size: 0.875rem; font-style: normal; color: var(--color-primary)}
  .page-content .about-page .number .itm .cap{ font-size: 1rem; line-height: 1.5; color: var(--color-tag); text-decoration: underline;}
  .page-content .about-page .content{ grid-column: 3/13; display: grid; grid-template-columns: repeat(10,1fr); grid-gap: 1.25vw;}
  .page-content .about-page .content .caption{ grid-column: 1/3; text-align: right; font-size: 2rem; line-height: 1.5; text-transform: uppercase;}
  .page-content .about-page .content .caption:first-letter{ color: var(--color-primary)}
  .page-content .about-page .content .chinese{ grid-column: 3/11; font-size: 1.125rem; line-height: 2; color: var(--color-dark);}
  .page-content .about-page .content .english{ grid-column: 3/11; font-size: 0.75rem; line-height: 1.5; color: var(--color-desc)}

  .page-content .about-adv{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 86.875vw; height: 20vw; padding-left: 13.125vw; margin-top: 7.5vw;}
  .page-content .about-adv:after{ content: ''; position: absolute; top: -3.75vw; right: -13.125vw; z-index: 0; display: block; width: 73.75%; height: 27.5vw; background: var(--color-secondary);}
  .page-content .about-adv .cn{ position: relative; z-index: 2; font: 3rem/1.75 ZKTK; color: white;}
  .page-content .about-adv .bg{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: url('../cssimg/about-banner.jpg') center center no-repeat; background-size: cover;}

  .page-content .about-box{ width: 100%; max-width: 1416px; margin: 1.875vw auto 0;}
  .page-content .about-box .title{ width: 100%;}
  .page-content .about-box .title .en{ font-size: 2rem; text-transform: uppercase;}
  .page-content .about-box .title .en:first-letter{ color: var(--color-primary)}
  .page-content .about-box .title .cn{ font-size: 1.5rem;}
  .page-content .about-box .title .cn:first-letter{ color: var(--color-primary)}
  .page-content .about-box .content{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.25vw; padding-top: 1.25vw}
  .page-content .about-box .content .itm{ display: block; width: 100%;}
  .page-content .about-box .content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 75%; overflow: hidden; background: var(--color-secondary);}
  .page-content .about-box .content .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 90%; max-height: 90%; margin: auto;}

  .page-content .category-page{ width: 100%; max-width: 1416px; margin: auto; }
  .page-content .category-page .list-category{ display: grid; grid-gap: 5vw; width: 100%;}
  .page-content .category-page .list-category .itm{ position: relative; top: 0; display: grid; grid-template-columns: 60% 40%; grid-template-areas: 'a b'; transition: all .3s;}
  .page-content .category-page .list-category .itm .cover{ position: relative; display: grid; grid-template-columns: 60% 40%; grid-template-areas: 'a b'; width: 100%; height: 0; padding-bottom: 50%; transition: all .5s; overflow: hidden; }
  .page-content .category-page .list-category .itm .cover:after{ content: ''; position: absolute; top: 0; right: 0; z-index: 0; display: block; width: 100%; height: 100%; background: url('../cssimg/p-l-bg.svg') right bottom no-repeat, url('../img/p-l-n.svg') left bottom no-repeat, url('../img/p-l-s.svg') left top no-repeat; background-size: auto 95%, auto ,auto; transition: all .5s;}
  .page-content .category-page .list-category .itm .cover .thumb{ position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: calc( 100% / 6 * 5); overflow: hidden;}
  .page-content .category-page .list-category .itm .cover .thumb:after{ content: ''; position: absolute; top: 0; right: 0; z-index: 0; display: block; width: 100%; height: 100%; background: url('../cssimg/p-bg.svg') 25% center no-repeat;}
  .page-content .category-page .list-category .itm .cover .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; max-width: 70%; max-height: 80%; margin: auto; -webkit-box-reflect: below 0 -webkit-linear-gradient( transparent,transparent 85%,rgba(255,255,255,.2)); transition: all .3s;}
  .page-content .category-page .list-category .itm .cover .tag{ position: relative; z-index: 2; display: flex; justify-content: center; height: 100%;}
  .page-content .category-page .list-category .itm .cover .tag .content{ position: relative; width: 50%; height: 100%; padding: 2rem; background: url('../cssimg/p-l-f.svg') center center no-repeat white; box-shadow: 5px 0 10px -5px rgba(0,0,0,.15);}
  .page-content .category-page .list-category .itm .cover .tag .content span{ font-size: 1.5rem; line-height: 1.5; text-transform: uppercase; writing-mode: vertical-rl; color: var(--color-info)}
  .page-content .category-page .list-category .itm .cover .tag .content:before{ content: ''; position: absolute; top: 1rem; right: 1rem; display: block; width: calc( 100% - 2rem); height: calc( 100% - 2rem); border: 2px solid var(--color-primary);}
  .page-content .category-page .list-category .itm .cover .tag .content:after{ content: ''; position: absolute; right: 0; bottom: 15%; left: 0; display: block; width: 4rem; height: 1rem; margin: auto; background: url('../cssimg/p-lang.svg') center center no-repeat; background-size: 100%;}
  .page-content .category-page .list-category .itm .info{ position: relative; display: flex; flex-flow: column; padding: 1.25vw 2.5vw; overflow: hidden;}
  .page-content .category-page .list-category .itm .info .title{ line-height: 2;}
  .page-content .category-page .list-category .itm .info .title:after{ content: ''; display: block; width: 3rem; height: 3px; margin: .5rem 0 1rem; background: var(--color-primary); }
  .page-content .category-page .list-category .itm .info .title .cn{ font-size: 2rem; font-weight: bold; color: var(--color-dark)}
  .page-content .category-page .list-category .itm .info .title .en{ font-size: 2rem; color: var(--color-info); text-transform: uppercase;}
  .page-content .category-page .list-category .itm .info .desc{ align-items: start; font-size: 1.25rem; color: var(--color-desc)}
  .page-content .category-page .list-category .itm .info .details{ position: absolute; bottom: 1.25vw; left: 2.5vw; font-size: 1.25rem; text-transform: uppercase;}
  .page-content .category-page .list-category .itm .info .details i{ font-size: 1.25rem; transition: all .3s;}

  .page-content .category-page .list-category .itm:nth-child(even){ grid-template-columns: 40% 60%;}
  .page-content .category-page .list-category .itm:nth-child(even) .cover{ grid-area: b;}

  .page-content .category-page .list-category .itm:nth-child(odd) .cover{ grid-template-columns: 40% 60%;}
  .page-content .category-page .list-category .itm:nth-child(odd) .cover:before,
  .page-content .category-page .list-category .itm:nth-child(odd) .cover:after{ transform: rotateY(180deg);}
  .page-content .category-page .list-category .itm:nth-child(odd) .cover .thumb{ grid-area: b;}
  .page-content .category-page .list-category .itm:nth-child(odd) .cover .thumb:after{ transform: rotateY(180deg);}

  .page-content .category-page .list-category .itm:hover{ top: -1rem;}
  .page-content .category-page .list-category .itm:hover .info .details i{ margin-left: 2em;}
  .page-content .category-page .list-category .itm:hover .cover{ box-shadow: inset 0 -0 2rem rgba(0,0,0,.15);}
  .page-content .category-page .list-category .itm:hover .cover:after{ filter: drop-shadow( -3px -3px 3px rgba(0,0,0,.15)); }
  .page-content .category-page .list-category .itm:hover .cover .thumb img{ transform: scale(1.05);}

  .page-content .product-page{ display: grid; grid-template-columns: 1fr 4fr; grid-gap: 2.5vw; width: 100%; max-width: 1416px; margin: auto; }
  .page-content .product-page .category{ display: flex; flex-flow: column; padding: 1.25vw; background: white;}
  .page-content .product-page .category .tit{ padding: .75em 0; font-size: 1.25rem; line-height: 1.5;}
  .page-content .product-page .category label{ display: flex; align-items: center; padding: 1em 0; font-size: .875rem; }
  .page-content .product-page .category label input[type='checkbox']{ position: relative; box-sizing: border-box; width: 1rem; height: 1rem; margin-right: .75em; overflow: hidden;}
  .page-content .product-page .category label input[type='checkbox']:checked:before{ content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: var(--color-primary); }
  
  .page-content .product-page .list-product{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
  .page-content .product-page .list-product .itm{ position: relative; top: 0; display: grid; background: white; transition: all .3s;}
  .page-content .product-page .list-product .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
  .page-content .product-page .list-product .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; max-width: 90%; max-height: 90%; margin: auto; -webkit-box-reflect: below 0 -webkit-linear-gradient( transparent,transparent 85%,rgba(255,255,255,.2)); transition: all .3s; }
  .page-content .product-page .list-product .itm .info{ display: grid; grid-template-columns: repeat(2,1fr); padding: 1rem 0; line-height: 1.5; text-align: center;}
  .page-content .product-page .list-product .itm .info .title{ grid-column: span 2; font-size: 1.25rem; color: var(--color-text) }
  .page-content .product-page .list-product .itm .info .price{ grid-column: span 2; padding: 1rem 0; font-size: 1rem;}
  .page-content .product-page .list-product .itm .info .price:before{ content: '¥'; font-size: 0.75rem;}

  .page-content .product-page .list-product .itm:hover{ top: -1rem; box-shadow: 0   1rem 2rem -.5rem rgba(224,208,184,.5);}

  .page-content .product-page .list-product .loadmore{ grid-column: span 3; display: flex; justify-content: center; align-items: center; }
  .page-content .product-page .list-product .loadmore a{ position: relative; padding: 0 5em; font-size: 1rem; line-height: 3; color: var(--color-info); background: var(--color-secondary); transition: all .3s;}
  .page-content .product-page .list-product .loadmore a:hover{ color: white; background: var(--color-primary)}

  .page-content .news-page{ width: 100%; max-width: 1416px; margin: auto; }
  .page-content .news-page .list-news{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 5vw; width: 100%;}
  .page-content .news-page .list-news .itm{ position: relative; top: 0; display: grid; grid-template-areas: 'a''b''c'; width: 100%; transition: all .3s;}
 
  .page-content .news-page .list-news .itm .date{ width: 100%; line-height: 1.25;}
  .page-content .news-page .list-news .itm .date .md{ font-size: 2rem;}
  .page-content .news-page .list-news .itm .date .yy{ font-size: 1rem;}

  .page-content .news-page .list-news .itm .info{ position: relative; width: 100%; padding: 2.5rem 0; overflow: hidden;}
  .page-content .news-page .list-news .itm .info .title{ position: relative; font-size: 1.25rem; line-height: 1.5; color: var(--color-text)}
  .page-content .news-page .list-news .itm .info .line{ width: 2em; height: 2px; margin: 1rem 0; background: var(--color-primary); }
  .page-content .news-page .list-news .itm .info .desc{ font-size: 1rem; line-height: 1.5; color: var(--color-desc)}
  .page-content .news-page .list-news .itm .info .details{ font-size: 1rem; color: var(--color-info); transition: all .3s;}
  .page-content .news-page .list-news .itm .info .details i{ font-size: 1rem; transition: all .3s;}

  .page-content .news-page .list-news .itm .thumb{ position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: 33.33333%; overflow: hidden;}
  .page-content .news-page .list-news .itm .thumb img{ position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; margin: auto; transform: translate(-50%,-50%);  transition: all .3s;}

  .page-content .news-page .list-news .itm:nth-child(3n-1):before,
  .page-content .news-page .list-news .itm:nth-child(3n-1):after{ content: ''; position: absolute; bottom: 0; width: 1px; height: calc( 100% - 6.25rem); background: var(--color-line); transition: all .3s;}
  .page-content .news-page .list-news .itm:nth-child(3n-1):before{ left: -1.25vw;}
  .page-content .news-page .list-news .itm:nth-child(3n-1):after{ right: -1.25vw;}
  
  .page-content .news-page .list-news .itm:hover{ top: -1rem;}
  .page-content .news-page .list-news .itm:hover:nth-child(3n-1):before,
  .page-content .news-page .list-news .itm:hover:nth-child(3n-1):after{ bottom: -1rem;}
  .page-content .news-page .list-news .itm:hover .info .details{color: var(--color-primary);}
  .page-content .news-page .list-news .itm:hover .info .details i{ margin-left: 2rem; color: var(--color-primary);}
  .page-content .news-page .list-news .itm:hover .thumb img{ filter: saturate(3);}

  .pagination{ display: flex; justify-content: center; width: 100%; margin-top: 2.5vw;}
  .pagination a,
  .pagination span{ position: relative; font-size: 1.25rem; line-height: 3; padding: 0 .75em; margin: 0 .25em;}
  .pagination a:after{ content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 0; height: 2px; background: var(--color-primary);}
  .pagination a.on{ color: var(--color-primary)}
  .pagination a.on:after{ width: 100%;}
  .pagination a.dis{ color: var(--color-line)}

  .article-page{ display: grid; grid-template-columns: 3fr 1fr; width: 100%;background: var(--color-secondary); }
  .article-page .article-information{ padding: 3rem 6rem; background: url('../cssimg/logo-c.svg') right 3rem top 3rem no-repeat white; background-size: 6rem;}
  .article-page .article-information .info{ margin-bottom: 3rem; font-size: 1rem; line-height: 1.5; color: var(--color-desc)}
  .article-page .article-information .title h1{ font-size: 2rem; line-height: 1.5;}
  .article-page .article-information .content{ padding: 3rem 0; font-size: 1.125rem; line-height: 1.75;}
  .article-page .article-information .content img{ display: inline-block; vertical-align: middle; max-width: 100%;}

  .article-page .article-parameter{ position: relative; min-height: calc( 100vh - 10.5rem); padding: 9rem 3rem; background: var(--color-secondary);}
  .article-page .article-parameter .description{ width: 100%; margin-bottom: 2rem;}
  .article-page .article-parameter .keywords{ width: 100%;}
  .article-page .article-parameter .description strong,
  .article-page .article-parameter .keywords strong{ display: block; margin-bottom: .5rem; font-size: 1.25rem; text-transform: uppercase; color: var(--color-primary);}
  .article-page .article-parameter .description span,
  .article-page .article-parameter .keywords span{ display: block; font-size: .875rem; line-height: 2; color: var(--color-tag)}
  .article-page .article-parameter .operating{ position: absolute; bottom: 9rem; left: 3rem; display: flex; width: calc( 100% - 6rem);}
  .article-page .article-parameter .operating a{ width: 50%; padding: .75em 0; font-size: 1rem; line-height: 1.5; text-transform: uppercase; transition: all .3s;}
  .article-page .article-parameter .operating a:hover{ padding-left: 3rem;}

  .article-page .article-arrow{ position: relative; display: grid; grid-template-columns: repeat(2,1fr); padding: 3rem;}
  .article-page .article-arrow:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 1px; height: 1.5rem; margin: auto; background: var(--color-primary);}
  .article-page .article-arrow a{ padding: 0 3rem; font-size: 1rem; line-height: 1.5;}
  .article-page .article-arrow a.prev:before{ content: '上一篇：'; color: var(--color-dark)}
  .article-page .article-arrow a.next:before{ content: '下一篇：'; color: var(--color-dark)}


  .details-banner{ width: 100%; height: 9rem;}

  .details-bread{ position: relative; width: 100%; height: auto;}
  .details-bread:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--color-primary);}
  .details-bread .bread-list{ width: 100%; max-width: 1416px; margin: auto; font-size: 0; line-height: 1.5; padding: 1.5rem 0;}
  .details-bread .bread-list:before{ content: '当前位置：'; display: inline-block; font-size: 1rem; }
  .details-bread .bread-list a{ display: inline-block; font-size: 1rem;}
  .details-bread .bread-list a:not(:last-child):after{ content: '>'; display: inline-block; padding: 0 .25em}

  .details-page{ display: grid; grid-gap: 2.5vw; width: 100%; max-width: 1416px; padding: 2.5vw 0; margin: auto;}
  .details-page .details-cover{ display: grid; grid-template-columns: 3fr 2fr;}
  .details-page .details-cover .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 50%; overflow: hidden; background: var(--color-secondary);}
  .details-page .details-cover .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 90%; max-height: 90%; margin: auto;}
  .details-page .details-cover .info{ position: relative; padding: 3rem;}
  .details-page .details-cover .info .title{ font-size: 1.75rem; color: var(--color-dark)}
  .details-page .details-cover .info .caption{ margin: .5em 0; font-size: 1rem; color: var(--color-desc)}
  .details-page .details-cover .info .desc{ font-size: 1.125rem; color: var(--color-tag)}
  .details-page .details-cover .info .price{ margin-top: 1em; font-size: 2.5rem; color: var(--color-primary)}
  .details-page .details-cover .info .buy{ display: inline-block; margin-top: 2em; padding: 0 5rem; font-size: 1.25rem; line-height: 2.5; color: white; background: var(--color-primary);}

  .details-page .link{ display: none;}

  .details-page .details-line{ height: 1px; background: var(--color-line);}

  .details-page .details-content{ width: 100%;}
  .details-page .details-content .caption{ font-size: 1.5rem; font-weight: bold; color: var(--color-dark)}
  .details-page .details-content .content{ padding-top: 1rem; font-size: 1.125rem; line-height: 1.75; color: var(--color-info)}
  .details-page .details-content .content img{ display: inline-block; vertical-align: middle; max-width: 100%;}
  .details-page .details-related{ width: 100%;}
  .details-page .details-related .caption{ font-size: 1.5rem; font-weight: bold; color: var(--color-dark)}
  .details-page .details-related .related-list{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw; padding-top: 1rem;}
  .details-page .details-related .related-list .itm{ position: relative; top: 0; display: grid; background: var(--color-secondary); transition: all .3s;}
  .details-page .details-related .related-list .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
  .details-page .details-related .related-list .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; max-width: 80%; max-height: 80%; margin: auto; -webkit-box-reflect: below 0 -webkit-linear-gradient( transparent,transparent 85%,rgba(255,255,255,.2)); transition: all .3s; }
  .details-page .details-related .related-list .itm .info{ display: grid; grid-template-columns: repeat(2,1fr); padding: 1rem 0; line-height: 1.5; text-align: center;}
  .details-page .details-related .related-list .itm .info .title{ grid-column: span 2; font-size: 1.25rem; color: var(--color-text) }
  .details-page .details-related .related-list .itm .info .price{ grid-column: span 2; padding: 1rem 0; font-size: 1rem;}
  .details-page .details-related .related-list .itm .info .price:before{ content: '¥'; font-size: 0.75rem;}

  .page-content .contact-page{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw; align-items: center; width: 100%; max-width: 1416px; margin: auto;}
  .page-content .contact-page #map{ grid-column: span 2; height: 30vw; background: #000; }
  .page-content .contact-page .english{ font-size: .875rem; line-height: 2; color: var(--color-tag)}
  .page-content .contact-page .chinese{ font-size: 1rem; line-height: 2; color: var(--color-dark)}

  .page-content .channel-page{ display: grid; grid-gap: 2.5vw; width: 100%; max-width: 1416px; margin: auto;}
  .page-content .channel-page .content{ font-size: 1.125em; line-height: 2; color: var(--color-info)}
  .page-content .channel-page .content img{ display: inline-block; max-width: 100%; }