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

.wrapper{ overflow: hidden;}

header{ position: fixed; z-index: 9; top: 0; right: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; padding: 0 2rem; background: var(--white); box-shadow: 0 1rem 1rem -.5rem rgba(0,0,0,0.02);}
header .hotline{ display: flex; align-items: center; font-size: 1.25rem; color: var(--primary)}
header .hotline i{ font-size: 1.5rem;}
header .hotline span{ padding-left: 0.5em;}

nav{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
nav a{ font-size: 1.125rem; line-height: 2.5; font-weight: bold; padding: 0 1.5em}
nav .logo{ padding: 1rem;}
nav .logo img{ display: block; height: 4rem; }

header .quick{ display: flex; align-items: center; grid-gap: 1.25rem;}
header .quick a{ display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border-radius: var(--rounded); background: var(--primary);}
header .quick a i{ font-size: 1.5rem; line-height: 1; color: var(--white);}
header .quick a:last-child{ background: var(--secondary);}

header .toggle{ position: fixed; z-index: 10; top: 0; right: 0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; cursor: pointer; transition: .3s; display: none;}
header .toggle .ico{ position: relative; width: 2.25rem; height: 1.125rem;}
header .toggle .ico i{ position: absolute; width: 1.5rem; height: .125rem; border-radius: var(--rounded); background: var(--primary);}
header .toggle .ico i:first-child{ top: 0; left: 0; transition: top .1s, transform .3s .1s;}
header .toggle .ico i:last-child{ bottom: 0; left: 0;  transition: bottom .1s, transform .3s .1s;}
header .toggle .ico i:nth-child(2){ top: 0; bottom: 0; right: 0; margin: auto; background: var(--primary); transition: .3s;}

header .toggle.active .ico i{ left: 0.375rem;}
header .toggle.active .ico i:first-child{ top: .5rem; transform: rotate(45deg);}
header .toggle.active .ico i:last-child{ bottom: .5rem; transform: rotate(-45deg);}
header .toggle.active .ico i:nth-child(2){ width: 0;}

header .toggle.close .ico i:first-child{ top: 0; transform: rotate(0); transition: transform .3s, top .1s .3s;}
header .toggle.close .ico i:last-child{ bottom: 0; transform: rotate(0); transition: transform .3s, bottom .1s .3s;}

header .menu{ position: fixed; z-index: 9; top: 0; right: 0; display: block; width: 100%; height: 100vh; background: var(--white); overflow: hidden; display: none;}

header .menu .nav{ position: relative; display: flex; flex-flow: column nowrap; justify-content: center; width: 100%; height: 100%; padding: 0 10vw;}
header .menu .nav dl dt{ position: relative; padding: .75rem 0 .75rem 1.5em; border-bottom: 1px solid #ddd;}
header .menu .nav dl dt:before{ content: attr(data-num); position: absolute; top: 0; left:0; display: flex; align-items: center; height: 100%; font-size: 1rem; line-height: 1.5; font-weight: bold; color: var(--primary)}
header .menu .nav dl dt a{ position: relative; display: inline-block; font-size: 1.25rem; line-height: 2; font-weight: 900; color: var(--text); transition: .3s;}
header .menu .nav dl dt a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary); transition: .3s;}
header .menu .nav dl dd{ display: flex; flex-flow: row wrap; grid-gap: 1rem; padding: 1rem;}
header .menu .nav dl dd a{ font-size: 1rem; line-height: 1.5; color: var(--info); transition: .3s;}


.container{ width: 100%;}
.container section{ width: 100%;}

.slideshow{ position: relative; width: 100%; height: 50.625vw;}
.slideshow:after{ content: 'Baihang Technology-Online Brand Design'; position: absolute; z-index: 3;right: 3rem; bottom: 3rem; font-size: 0.75rem; line-height: 1.5; color: var(--white); text-transform: uppercase;}
.slideshow .itm{ position: relative; width: 100%; height: 50.625vw;}
.slideshow .itm .thumb{ position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;}
.slideshow .itm .thumb img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: 4s;}
.slideshow .itm.swiper-slide-active .thumb img{ transform: scale(1.1);}

.slideshow .itm .font{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 50%; height: 50%; margin: auto;}
.slideshow .itm .font img{ max-width: 100%; max-height: 100%;}

.slideshow .swiper-button{ position: absolute; z-index: 3; top: 0; bottom: 0; width: auto; height: 3rem; margin: auto; cursor: pointer;}
.slideshow .swiper-button img{ display: block; width: auto; height: 100%;}
.slideshow .swiper-button.prev{ left: 3rem;}
.slideshow .swiper-button.next{ right: 3rem;}

.slideshow .swiper-number{ position: absolute; z-index: 3; bottom: 3rem; left: 3rem; color: var(--white); font-weight: bold;}
.slideshow .swiper-number span{ font-size: 1.5rem;}
.slideshow .swiper-number b{ font-size: 3rem;}
.slideshow .swiper-number b:after{ content: '/';}

.slideshow .mouse{ position: absolute; z-index: 3; right: 0; bottom: 3rem; left: 0; width: 15px; height: 24px; margin: auto; border: 1px solid var(--white); border-radius: 8px; }
.slideshow .mouse i{ position: relative; top: 4px; width: 1px; height: 4px; margin: auto; background: #fff; }
.slideshow .mouse i{ display: block; animation-name: drop; animation-duration: 1s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-play-state: running; }
@keyframes drop {
  0% {
    top: 4px;
    opacity: 0;
  }
  25% {
    top: 5px;
    opacity: .25;
  }
  50% {
    top: 6px;
    opacity: .5;
  }
  75% {
    top: 7px;
    opacity: .75;
  }
  100% {
    top: 8px;
    opacity: 1;
  }
}

.hotproduct{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 0 2.5vw; padding: 5vw 6.25vw;}
.hotproduct:after{ content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 56.25%; height: 100%; background: url('../img/hot.webp') left bottom no-repeat var(--gray);}
.hotproduct .sec-title{ position: absolute; z-index: 1; top: 5vw; left: 6.25vw;}
.hotproduct .sec-title .cn{ font-size: 2rem; font-weight: 900;}
.hotproduct .sec-title .en{ font-size: 1.5rem; line-height: 2;}
.hotproduct .sec-title span{ color: #900}
.hotproduct .hot-pro{ grid-column: span 12; position: relative; z-index: 0; width: 100%; overflow: hidden;}
.hotproduct .hot-pro .itm{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; }
.hotproduct .hot-pro .itm .thumb{ grid-column: span 7; display: flex; justify-content: center; align-items: center;}
.hotproduct .hot-pro .itm .thumb .cover{ position: relative; width: 70%; height: 0; padding-bottom:70%;}
.hotproduct .hot-pro .itm .thumb .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
.hotproduct .hot-pro .itm .info{ grid-column: span 5;}
.hotproduct .hot-pro .itm .info .caption{ line-height: 1.5;}
.hotproduct .hot-pro .itm .info .caption .cn{ font-size: 2rem; font-weight: 900;}
.hotproduct .hot-pro .itm .info .caption .en{ font-size: 0.75rem; text-transform: uppercase;}
.hotproduct .hot-pro .itm .info .slogan{ padding: 1em 0 2em; font-size: 1.5rem; font-weight: 600; line-height: 1.5;}
.hotproduct .hot-pro .itm .info .attribute{ display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 1.125rem; padding: 1em 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}

.hotproduct .hot-thumb{ grid-column: 8 / 13; position: absolute; z-index: 1; bottom: 5vw; width: 100%; overflow: hidden;}
.hotproduct .hot-thumb .itm{ position: relative; padding-bottom: 1.5rem; cursor: pointer;}
.hotproduct .hot-thumb .itm:after{ content: ''; position: absolute; right: 0; bottom: 0; left: 0; display: block; width: .75rem; height: .75rem; margin: auto; border: 2px solid var(--primary); border-radius: var(--rounded); opacity: 0;}
.hotproduct .hot-thumb .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%;}
.hotproduct .hot-thumb .itm .thumb img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
.hotproduct .hot-thumb .itm.swiper-slide-thumb-active:after{ opacity: 1;}

.hotproduct .hot-arrow{ position: absolute; z-index: 2; top: 0; bottom: 0; left: 58.75%; display: flex; gap: 1.5rem; height: 3rem; margin: auto;}
.hotproduct .hot-arrow i{ font-size: 1.5rem; line-height: 1;}
.hotproduct .hot-arrow .prev{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: var(--rounded); background: var(--primary); cursor: pointer;}
.hotproduct .hot-arrow .prev i{ color: var(--white);}
.hotproduct .hot-arrow .next{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: var(--rounded); border: 1px solid var(--desc); cursor: pointer;}
.hotproduct .hot-arrow .next i{ color: var(--desc)}

.hotproduct .hot-number{ position: absolute; z-index: 2; bottom: 5vw; left: 6.25vw; display: flex; align-items: center; grid-gap: 1rem;}
.hotproduct .hot-number b{ font-size: 3rem; line-height: 1; color: var(--primary)}
.hotproduct .hot-number i{ width: 4rem; height: 1px; background: var(--desc);}
.hotproduct .hot-number span{ font-size: 2rem; line-height: 1.5;}

.about{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 5vw 6.25vw 6.25vw; background: url('../img/about-bg.webp') no-repeat; background-size: cover;}
.about .slogan{ grid-column: span 4;}
.about .slogan .cn{ font-size: 2rem; font-weight: 900; line-height: 1.5; color: var(--white)}
.about .slogan .line{ width: 1px; height: 3rem; margin: .5em 0; font-size: 1rem; background: var(--white);}
.about .slogan .en{ font-size: 1rem; line-height: 2; color: var(--white); text-transform: uppercase;}
.about .slogan .subsection{ display: flex; flex-flow: column nowrap; margin-top: 5rem;}
.about .slogan .subsection a{ position: relative; font-size: 1.125rem; line-height: 3; color: var(--white)}
.about .slogan .subsection a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--white);}

.about .information{ position: relative; grid-column: span 7; display: grid; grid-gap: 2.5vw; width: calc(100% + 5vw); padding: 2.5vw; padding-bottom: 7.5vw; margin-top: 5vw; margin-left: -2.5vw; background: rgba(0,101,74,.9);}
.about .information:after{ content: ''; position: absolute; bottom: 2.5vw; right: 2.5vw; display: block; width: 8rem; height: 8rem; background: url('../img/logo-i-w.svg') no-repeat; background-size: cover;}
.about .information .title{ display: flex; align-items: center; color: var(--white); line-height: 1;}
.about .information .title .cn{ font-size: 2rem; font-weight: 900;}
.about .information .title .en{ font-size: 1.5rem; padding-left: 1rem;}
.about .information .content{ font-size: 1.125rem; line-height: 2; color: var(--white); text-align: justify;}
.about .information .more{ position: relative; width: 10rem; font-size: 1.125rem; line-height: 2; color: var(--white)}
.about .information .more:before{ content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background: var(--white);}
.about .information .more:after{ content: '\e630'; position: absolute; top: 0; bottom: 0; right: 0; font-family: 'neko';}

.about .number{ grid-column: span 1; display: flex; flex-flow: column nowrap; justify-content: space-between; width: calc(100% + 6.25vw); margin-top: -5vw; padding: 4rem 2rem; background: rgba(200,160,98,.9); overflow: hidden;}
.about .number .itm{ display: grid; grid-template-columns: auto 1fr; align-items: end; width: 100%; color: var(--white);}
.about .number .itm b{ font-size: 3rem; line-height: 1; font-weight: 900; font-style: italic;}
.about .number .itm i{ font-size: 1rem; line-height: 1; font-style: normal; padding-left: 0.625em;}
.about .number .itm span{ grid-column: span 2; font-size: 1rem; line-height: 1.5;}

.videos{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 0 6.25vw;}
.videos .thumb{ grid-column: span 7; position: relative; width: calc(100% + 6.25vw); height: 0; padding-bottom: calc((100% + 6.25vw) / 16 * 9); margin-left: -6.25vw;}
.videos .thumb:before{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); opacity: 0;}
.videos .thumb .button{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; width: 6rem; height: 6rem; margin: auto; cursor: pointer; background: url('../img/play.svg') no-repeat; background-size: cover;}
.videos .thumb img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.videos .banner{ position: relative; grid-column: span 5; width: calc(100% + 8.75vw); height: calc(100% + 10.1vw); padding: 6.25vw 2.5vw; margin-left: -2.5vw; background: url('../img/banner.webp') no-repeat; background-size: cover;}
.videos .banner .cn{ font-size: 2rem; font-weight: 900; line-height: 1.5; color: var(--white)}
.videos .banner .line{ width: 1px; height: 3rem; margin: .5em 0; font-size: 1rem; background: var(--white);}
.videos .banner .en{ font-size: 1rem; line-height: 2; color: var(--white); text-transform: uppercase;}
.videos .banner img{ position: absolute; right: 0; left: 0; bottom: 6.25vw; width: 56%; height: auto; margin: auto;}

.area{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; padding: 6.25vw; padding-bottom: 0;}
.area:after{ content: ''; position: absolute; z-index: -1; top: 0; left: 0; display: block; width: 56.25vw; height: 100%; background: url('../img/area.webp') no-repeat; background-size: cover;}
.area .area-font{ grid-column: span 4; display: flex; flex-flow: column nowrap; justify-content: space-between;}
.area .area-font .title .cn{ font-size: 2rem; font-weight: 900;}
.area .area-font .title .en{ font-size: 1.5rem; line-height: 2;}
.area .area-font .desc{ font-size: 1rem; line-height: 2; text-align: justify; color: var(--secondary)}
.area .area-font .desc b{ font-size: 1.5rem; color: var(--text)}

.area .area-font .point{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw;}
.area .area-font .point .itm{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 1rem;}
.area .area-font .point .itm .ico{ width: 4rem; height: 4rem; background: var(--secondary);}
.area .area-font .point .itm .title{ font-size: 1.5rem; line-height: 1.5; font-weight: bold;}
.area .area-font .point .itm .desc{ font-size: 1.125rem; line-height: 1.5; color: var(--desc); text-align: center;}

.area .area-thumb{ grid-column: span 8; position: relative; width: calc(100% + 6.25vw); margin-top: 3.75vw;}
.area .area-thumb .itm{ position: relative;}
.area .area-thumb .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9);}
.area .area-thumb .itm .thumb img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.area .area-thumb .itm .info{ position: absolute; z-index: 1; right: 0; bottom: 0; width: calc(50% + 6.25vw); padding: 1.875vw; padding-right: 11.25vw; background: url('../img/logo-i.svg') right 6.25vw center no-repeat #fff; background-size: 4rem 4rem;}
.area .area-thumb .itm .info .caption{ display: flex; align-items: center; line-height: 1.5;}
.area .area-thumb .itm .info .caption .cn{ font-size: 1.5rem; font-weight: bold;}
.area .area-thumb .itm .info .caption .en{ padding-left: 1em; font-size: 1.125rem; color: var(--desc);}
.area .area-thumb .itm .info .content{ line-height: 1.5;}
.area .area-thumb .itm .info .content .cn{ padding: .5rem 0; font-size: 1.125rem;}
.area .area-thumb .itm .info .content .en{ font-size: 0.875rem; color: var(--desc);}

.area .area-thumb .area-contorl{ position: absolute; z-index: 2; bottom: 0; right: calc(50% + 6.25vw); display: flex; justify-content: space-around; align-items: center; width: 10vw; height: 5vw; background: var(--primary);}
.area .area-thumb .area-contorl .prev,
.area .area-thumb .area-contorl .next{ display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; cursor: pointer;}
.area .area-thumb .area-contorl .prev i,
.area .area-thumb .area-contorl .next i{ font-size: 1.125rem; line-height: 1; color: var(--white)}
.area .area-thumb .area-contorl .number{ display: flex; justify-content: center; align-items: flex-end; font-size: 1.125rem; font-weight: bold; line-height: 1; color: var(--white);}
.area .area-thumb .area-contorl .number b{ font-size: 1.5rem;}
.area .area-thumb .area-contorl .number b:after{ content: '/';}

.billing{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-end; width: 100%; height: 20vw; padding: 0 6.25vw; text-align: right; background: url('../img/banner-l.webp') top left no-repeat, url('../img/banner-r.webp') right bottom no-repeat #fff;}
.billing .cn{ font-size: 2rem; font-weight: 900; line-height: 1.5; color: var(--text)}
.billing .line{ width: 1px; height: 3rem; margin: .5em 0; font-size: 1rem; background: var(--text);}
.billing .en{ font-size: 1rem; line-height: 2; color: var(--text); text-transform: uppercase;}

.product{ position: relative;}
.product .sec-title{ position: absolute; top: 0; left: 0; transform: translateY(-100%); display: flex; flex-flow: column nowrap; justify-content: center; width: 56.25vw; height: 10vw; padding: 0 6.25vw; line-height: 1.5; color: var(--white); background: url('../img/pro-t.webp') no-repeat; background-size: cover;}
.product .sec-title .cn{ font-size: 2rem; font-weight: 900;}
.product .sec-title .en{ font-size: 1.5rem;}
.product .sec-content{ display: grid; grid-template-columns: 51.25% 48.75%;}
.product .sec-content .itm{ position: relative;}
.product .sec-content .itm:first-child{ grid-row: span 2; position: relative; width: 100%; height: 0; padding-bottom: 100%; background: url('../img/p-1-bg.webp') left 25% no-repeat var(--text); background-size: 70% auto;}
.product .sec-content .itm:nth-child(2){ background: url('../img/p-2-bg.webp') right bottom no-repeat var(--white); background-size: 35%;}
.product .sec-content .itm:last-child{ background: var(--primary);}

.product .sec-content .itm .info{ display: flex; flex-flow: column nowrap; justify-content: center; position: absolute; z-index: 1; line-height: 1.5; color: var(--white)}
.product .sec-content .itm .info .cn{ font-size: 2rem; font-weight: 900;}
.product .sec-content .itm .info .en{ font-size: 0.75rem; text-transform: uppercase;}
.product .sec-content .itm .info .slogan{ margin-top: 1.5rem; margin-bottom: 4rem; font-size: 1.5rem; font-weight: bold;}
.product .sec-content .itm .info .more{ position: relative; width: 8rem; font-size: 1rem; line-height: 3; color: var(--white); font-weight: 900;}
.product .sec-content .itm .info .more:before{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--white);}
.product .sec-content .itm .info .more:after{ content: '+'; position: absolute; top: 0; right: 0; bottom: 0; }

.product .sec-content .itm .thumb{ position: absolute; z-index: 1;}
.product .sec-content .itm .thumb img{ display: block; width: 100%; height: 100%; object-fit: contain;}

.product .sec-content .itm:first-child .info{ top: 6.25vw; right: 6.25vw; align-items: flex-end;}
.product .sec-content .itm:nth-child(2) .info{ top: 6.25vw; left: 50%; color: var(--text)}
.product .sec-content .itm:last-child .info{ top: 6.25vw; left: 6.25vw;}

.product .sec-content .itm:nth-child(2) .info .more{ color: var(--primary)}
.product .sec-content .itm:nth-child(2) .info .more:before{ background: var(--primary);}

.product .sec-content .itm:first-child .thumb{ right: 0; bottom: 0; width: 100%; height: 50%;}
.product .sec-content .itm:nth-child(2) .thumb{ top: 0; left: 0; bottom: 0; width: 46%; height: 80%; margin: auto;}
.product .sec-content .itm:last-child .thumb{ right: 0; bottom: 0; width: 50%; height: 90%;}

.news{ display: grid; grid-gap: 4rem; width: 100%; padding: 5vw 6.25vw; background: url('../img/news-l.webp') left top no-repeat, url('../img/news-r.webp') right bottom no-repeat; background-size: 13.75vw auto, 11.25vw auto;}
.news .sec-title{ display: flex; justify-content: space-between; align-items: center;}
.news .sec-title .title{ line-height: 1.5;}
.news .sec-title .title .cn{ font-size: 2rem; font-weight: 900;}
.news .sec-title .title .en{ font-size: 1.5rem; line-height: 2;}
.news .sec-title .title span{ color: var(--primary)}
.news .sec-title .slogan{ line-height: 1.5; text-align: right;}
.news .sec-title .slogan .cn{ font-size: 2rem; font-weight: 900;}
.news .sec-title .slogan .en{ font-size: 1rem; text-transform: uppercase;}
.news .sec-content{display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw; }
.news .sec-content .list{ display: grid; grid-gap: 3rem; width: 100%; overflow: hidden;}
.news .sec-content .list .itm{ display: grid; grid-gap: 1rem;}
.news .sec-content .list .itm .tit{ grid-column: span 2; font-size: 1.25rem; line-height: 1.5; font-weight: 900;}
.news .sec-content .list .itm .desc{ grid-column: span 2; margin-bottom: 1rem; font-size: 1rem; line-height: 2; color: var(--desc)}
.news .sec-content .list .itm .date{ color: var(--text)}
.news .sec-content .list .itm .more{ justify-self: end;}
.news .sec-content .list .itm .more:after{ content: '\e630'; font-family: 'neko'; padding-left: 0.5em;}
.news .sec-content .slide{ position: relative; width: 100%; padding-right: 5vw; overflow: hidden;}
.news .sec-content .slide .itm{ display: grid; grid-gap: 1.5rem;}
.news .sec-content .slide .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9);}
.news .sec-content .slide .itm .thumb img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.news .sec-content .slide .itm .info{ display: grid; grid-gap: 1rem; padding-right: 10vw; }
.news .sec-content .slide .itm .info .tit{ grid-column: span 2; font-size: 1.25rem; line-height: 1.5; font-weight: 900;}
.news .sec-content .slide .itm .info .desc{ grid-column: span 2; margin-bottom: 1rem; font-size: 1rem; line-height: 2; color: var(--desc)}
.news .sec-content .slide .itm .info .date{ line-height: 1.5; color: var(--text)}
.news .sec-content .slide .itm .info .more{ line-height: 1.5; justify-self: end;}
.news .sec-content .slide .itm .info .more:after{ content: '\e630'; font-family: 'neko'; padding-left: 0.5em;}
.news .sec-content .slide .arrow{ position: absolute; z-index: 2; bottom: 7.375rem; left: 30vw;}
.news .sec-content .slide .arrow .prev,
.news .sec-content .slide .arrow .next{ display: flex; justify-content: center; align-items: center; width: 2.25rem; height: 2.25rem; background: var(--primary); cursor: pointer;}
.news .sec-content .slide .arrow .next{ background: var(--secondary);}
.news .sec-content .slide .arrow .prev i,
.news .sec-content .slide .arrow .next i{ font-size: 1.125rem; line-height: 1; color: var(--white)}

.plant{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 0 2.5vw; position: relative; width: 100%; padding: 0 6.25vw; background: url('../img/palnt-bg.webp') right bottom no-repeat; background-size: 33.75vw auto;}
.plant .sec-title{ position: absolute; z-index: 2; grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); grid-gap: 0 2.5vw; width: 100%; margin-top: 9.375vw; background: var(--white);}
.plant .sec-title .title{ padding: 3rem; padding-bottom: 0; line-height: 1.5;}
.plant .sec-title .title .cn{ font-size: 2rem; font-weight: 900;}
.plant .sec-title .title .en{ font-size: 1.5rem; line-height: 2;}
.plant .sec-title .slogan{ grid-row: span 2; display: flex; flex-flow: column nowrap; align-items: flex-end; padding: 3rem 3rem 3rem 0; color: var(--white); text-align: right; background: var(--primary);}
.plant .sec-title .slogan .cn{ font-size: 2rem; font-weight: 900;}
.plant .sec-title .slogan .en{ font-size: 1rem; line-height: 2; text-transform: uppercase;}
.plant .sec-title .slogan .line{ width: 1px; height: 3rem; margin: .5em 0; font-size: 1rem; background: var(--white);}
.plant .sec-title .slogan .desc{ font-size: 1.125rem; line-height: 2;}
.plant .sec-title .arrow{ display: flex; justify-content: space-between; width: 100%; margin-left: 1.25vw; overflow: hidden;}
.plant .sec-title .arrow i{ font-size: 1.5rem; line-height: 1;}
.plant .sec-title .arrow .prev{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: var(--rounded); background: var(--primary); cursor: pointer;}
.plant .sec-title .arrow .prev i{ color: var(--white);}
.plant .sec-title .arrow .next{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: var(--rounded); border: 1px solid var(--desc); cursor: pointer;}
.plant .sec-title .arrow .next i{ color: var(--desc)}

.plant .plant-cover{ grid-column: span 8; position: relative; z-index: 1; width: calc(100% + 8.75vw); margin-left: -6.25vw; overflow: hidden;}
.plant .plant-cover .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9);}
.plant .plant-cover .itm .thumb img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.plant .plant-thumb{ grid-column: span 8; position: relative; z-index: 2; top: -50%; width: calc(100% + 2.5vw); padding: 1.25rem 0 1.25rem 1.25rem; background: var(--white);}
.plant .plant-thumb .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9);}
.plant .plant-thumb .itm .thumb img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5;}
.plant .plant-thumb .itm.swiper-slide-thumb-active .thumb img{ opacity: 1;}

.plant .plant-info{  width: 37.5%; height: 100%; overflow: hidden;}
.plant .plant-info .itm{ display: flex; flex-flow: column nowrap; gap: 2rem;}
.plant .plant-info .itm .caption{ font-size: 1.125rem; line-height: 1.5; font-weight: 900;}
.plant .plant-info .itm .more{ position: relative; width: 8rem; font-size: 1rem; line-height: 3;}
.plant .plant-info .itm .more:before{ content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background: var(--text);}
.plant .plant-info .itm .more:after{ content: '\e630'; position: absolute; top: 0; bottom: 0; right: 0; font-family: 'neko';}

.contact{ display: grid; grid-template-columns: 1fr 2fr 1fr; grid-gap: 2.5vw; padding: 5vw 6.25vw; background: url('../img/contact-l.webp') left bottom no-repeat, url('../img/contact-r.webp') right top no-repeat var(--text); color: var(--white)}
.contact dl.chinese{ display: grid; grid-gap: 3rem;}
.contact dl.chinese dt .cn{ font-size: 1.875rem; font-weight: 900; color: var(--secondary)}
.contact dl.chinese dt .en{ font-size: 0.75rem; text-transform: uppercase;}
.contact dl.chinese dd{ font-size: 1.125rem; line-height: 2;}
.contact .map{ width: 100%; height: 100%; background: var(--white);}
.contact dl.english{ display: grid; grid-gap: 3rem;}
.contact dl.english dt{ display: flex; justify-content: flex-end; align-items: center; grid-gap: 2rem;}
.contact dl.english dt a{ display: flex; align-items: center;}
.contact dl.english dt a i{ display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; margin-right: 0.5em; border-radius: var(--rounded); background: var(--primary); font-size: 1.25rem; line-height: 1; color: var(--white)}
.contact dl.english dt a:first-child i{ background: var(--secondary);}
.contact dl.english dt a span{ font-size: 1.125rem; font-weight: 900; color: var(--white)}
.contact dl.english dd{ font-size: .875rem; line-height: 2; text-align: right;}

footer{ display: grid; grid-template-columns: 2fr 7fr 3fr; grid-gap: 2.5vw; padding: 5vw 6.25vw 0; background: url('../img/footer.webp') no-repeat; background-size: cover;}
footer .logo-w img{ display: block; width: auto; height: 4rem;}
footer .web-map{ display: flex; justify-content: space-between;}
footer .web-map dl{ display: grid; grid-gap: 1rem; align-self: start;}
footer .web-map dl dt a{ font-size: 1.25rem; font-weight: 900; line-height: 1.5; color: var(--white)}
footer .web-map dl dd{ display: grid;}
footer .web-map dl dd a{ font-size: 1rem; line-height: 2.5; color: var(--desc)}
footer .qrcode{ display: flex; justify-content: flex-end; grid-gap: 3rem;}
footer .qrcode .itm{ display: flex; flex-flow: column nowrap; grid-gap: 0.5rem; width: 7.5rem;}
footer .qrcode .itm img{ width: 100%; height: auto;}
footer .qrcode .itm span{ font-size: 1rem; font-weight: 900; line-height: 2; color: var(--white); text-align: center;}
footer .copyright{ grid-column: span 3; position: relative; padding: 1.25rem 0; font-size: 1rem; line-height: 2; color: var(--white)}
footer .copyright:before{ content: ''; position: absolute; top: 0; right: 0; display: block; width: 100%; height: 1px; background: rgba(255,255,255,.1);}
footer .copyright2:after{ content: '百航科技 - 网络品牌设计'; position: absolute; right: 0;}
footer .copyright *{ color: var(--white)}

/* sub */
.col-cover{ display: flex; justify-content: space-between; align-items: center; position: relative; width: 100%; height: 25vw; padding: 5vw 6.25vw 0;}
.col-cover .slogan{ color: var(--white)}
.col-cover .slogan .cn{ font-size: 2rem; font-weight: 900;}
.col-cover .slogan .en{ font-size: 1rem; text-transform: uppercase;}
.col-cover .slogan .line{ width: 1px; height: 3rem; margin: 0.5rem 0; background: var(--white);}
.col-cover .caption{ text-align: right; color: var(--white)}
.col-cover .caption .cn{ font-size: 2rem; font-weight: 900;}
.col-cover .caption .en{ font-size: 1.5rem;}
.col-cover img{ position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.head{ height: 5vw;}

.column{ width: 100%; padding: 5vw 6.25vw;}

.col-title{ justify-self: start; line-height: 1.5;}
.col-title .slogan .cn{ font-size: 1.75rem; font-weight: 900;}
.col-title .slogan .line{ width: 1px; height: 3rem; margin: .5em 0; font-size: 1rem; background: var(--text);}
.col-title .slogan .en{ font-size: .75rem; text-transform: uppercase; }

.col-title .title .cn{ font-size: 2rem; font-weight: 900;}
.col-title .title .en{ font-size: 1.5rem; line-height: 2;}

.col-cate{ display: flex; align-items: center; width: 100%; padding: 1.25vw 2.5vw; grid-gap: 2.5vw; background: var(--white);}
.col-cate:before{ content: 'Category'; font-size: 1.25rem; font-weight: 900; text-transform: uppercase;}
.col-cate a{ position: relative; font-size: 1.25rem; line-height: 2; font-weight: 900;}
.col-cate a:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; height: 1px; background: var(--primary);}
.col-cate a.on{ color: var(--primary)}
.col-cate a.on:after{ width: 100%;}

.pagination{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center;}
.pagination span,
.pagination a{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; margin: 0 .5rem; background: var(--text); font-size: 1rem; line-height: 1.5; color: var(--white); font-family: 'neko','Oswald';}
.pagination span{background: var(--primary);}
.pagination span.prev,
.pagination span.next{ background: var(--desc);}
.pagination a.active{ background: var(--primary);}

/* news */
.col-news{ display: grid; grid-gap: 2.5vw; background: url('../img/news-l.webp') left top no-repeat, url('../img/news-r.webp') right bottom no-repeat; background-size: 13.75vw auto, 11.25vw auto;}

.list-news{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw;}
.list-news .itm{ display: grid; grid-gap: 1rem; padding: 2rem; background: var(--white);}
.list-news .itm .tit{ grid-column: span 2; font-size: 1.25rem; line-height: 1.5; font-weight: 900;}
.list-news .itm .desc{ grid-column: span 2; margin-bottom: 1rem; font-size: 1rem; line-height: 2; color: var(--desc)}
.list-news .itm .date{ color: var(--text)}
.list-news .itm .more{ justify-self: end;}
.list-news .itm .more:after{ content: '\e630'; font-family: 'neko'; padding-left: 0.5em;}

/* products */
.col-products{ position: relative; display: grid; grid-template-columns: 1fr 3fr; grid-gap: 2.5vw;}

.left-products{ display: grid; grid-template-rows: auto 1fr 3rem; grid-gap: 2.5vw;}

.cate-products{ display: flex; flex-flow: column nowrap; gap: 2.5vw; line-height: 1.5; text-transform: uppercase;}
.cate-products .itm{ display: flex; flex-flow: column nowrap; gap: .5rem;}
.cate-products .itm .cn{ display: flex; flex-flow: row nowrap; align-items: center; font-size: 1.25rem; font-weight: 900; color: var(--text);}
.cate-products .itm .cn span{flex-shrink:0}
.cate-products .itm .cn:before{ flex-shrink: 1; content: ''; display: inline-block; width: 0; height: 1px; background: var(--primary);}
.cate-products .itm .en{ font-size: 0.75rem; color: var(--desc); font-weight: normal;}

.cate-products .itm.on{ text-align: right;}
.cate-products .itm.on .cn{ color: var(--primary)}
.cate-products .itm.on .cn:before{ width:100%; margin-right: .5rem;}
.cate-products .itm.on .en{ color: var(--primary)}

.list-products{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.list-products .itm{ position: relative; top: 0; }
.list-products .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; background: var(--gray); overflow: hidden;}
.list-products .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 80%; max-height: 80%; margin: auto; object-fit: contain; -webkit-box-reflect: below 0 -webkit-linear-gradient( transparent,transparent 85%,rgba(255,255,255,.2))}
.list-products .itm .info{ display: grid; grid-gap: 1rem; padding-top: 1rem; width: 100%; }
.list-products .itm .info .tit{ font-size: 1.25rem; line-height: 1.5; font-weight: bold; line-height: 1.5;}
.list-products .itm .info .attr{ display: flex; justify-content: space-between; align-items: center; padding: .5em 0; border-top: 1px solid #ddd; font-size: 1rem; line-height: 2;}

.page-products-phone{ display: none;}

/* album */
.col-albums{ display: grid; grid-gap: 2.5vw; background: url('../img/area.webp') no-repeat; background-size: 100%;}
.col-albums .col-title{ display: flex; justify-content: space-between; align-items: center; width: 100%;}


.list-albums{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw; width: 100%; overflow: hidden;}
.list-albums .itm{ position: relative; width: 100%;}
.list-albums .itm:first-child{ grid-column: span 2; grid-row: span 2;}
.list-albums .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc( 100% / 16 * 9 ); border: 10px solid var(--white); border-bottom: 0;}
.list-albums .itm .thumb img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.list-albums .itm:first-child .thumb{ height: calc( 100% - 4.25rem); padding-bottom: 0;}
.list-albums .itm .info{ display: flex; justify-content: space-between; align-items: center; padding: 1rem; font-weight: bold; background: var(--white);}
.list-albums .itm .info span{ font-size: 1.125rem; line-height: 2;}
.list-albums .itm .info i{ font-size: 1rem; line-height: 1; color: var(--desc)}

.list-honor{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw; width: 100%; overflow: hidden;}
.list-honor .itm{ position: relative; width: 100%; overflow: hidden;}
.list-honor .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; border-bottom: 0; background: var(--gray); overflow: hidden;}
.list-honor .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; -webkit-box-reflect: below 0 -webkit-linear-gradient( transparent,transparent 85%,rgba(255,255,255,.2))}
.list-honor .itm .info{ display: flex; justify-content: space-between; align-items: center; padding: 1rem; font-weight: bold; background: var(--white);}
.list-honor .itm .info span{ font-size: 1.125rem; line-height: 2; width: 70%;}
.list-honor .itm .info i{ font-size: 1rem; line-height: 1; color: var(--desc)}

/* contact */
.col-contact{ display: grid; grid-gap: 2.5vw;}
.col-contact .map{ width: 100%; height: 25vw; background: #000;}
.col-contact .info{ display: flex; justify-content: space-between; align-items: center;}
.col-contact .info .caption .cn{ font-size: 2rem; font-weight: 900; color: var(--primary)}
.col-contact .info .caption .en{ font-size: .875rem; text-transform: uppercase; color: var(--secondary)}
.col-contact .info dl{ display: grid; grid-gap: .75rem;}
.col-contact .info dl dt{ line-height: 1.25; text-align: right;}
.col-contact .info dl dt .cn{ font-size: 1rem; font-weight: 900;}
.col-contact .info dl dt .en{ font-size: 0.75rem; text-transform: uppercase; color: var(--desc)}
.col-contact .info dl dd .cn{ font-size: 1.25rem; font-weight: 900; font-style: italic;}
.col-contact .info dl dd .en{ font-size: 0.75rem; color: var(--desc)}

/* about */
.col-about{ background: url('../img/about2.webp') no-repeat var(--text); background-size: cover; background-attachment: fixed;}
.col-about .col-title{ margin-bottom: 5vw; color: var(--secondary); text-align: center;}

.main-about{ display: grid; grid-gap: 5vw; justify-items: center; color: var(--white); text-align: center;}
.main-about .info .title{ margin-bottom: 3rem; line-height: 1.5;}
.main-about .info .title .cn{ font-size: 2rem; font-weight: 900;}
.main-about .info .title .en{ font-size: 0.875em; text-transform: uppercase;}
.main-about .info .content p{ font-size: 1.125rem; line-height: 2; font-weight: bold;}
.main-about .info .content p:not(:last-child){ padding-bottom: 2em;}

.main-about .number{ display: flex; flex-flow: row nowrap; justify-content:center; grid-gap: 6.75vw; overflow: hidden;}
.main-about .number .itm{ display: grid; grid-template-columns: auto 1fr; align-items: end; color: var(--white);}
.main-about .number .itm b{ font-size: 3rem; line-height: 1; font-weight: 900; font-style: italic;}
.main-about .number .itm i{ font-size: 1rem; line-height: 1; font-style: normal; padding-left: 0.625em;}
.main-about .number .itm span{ grid-column: span 2; font-size: 1rem; line-height: 1.5; text-align: left;}

.main-about .video{ position: relative; width: 57.5vw; height: 0; padding-bottom: calc( 57.5vw / 16 * 9);}
.main-about .video:before{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); opacity: 0;}
.main-about .video .button{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; width: 6rem; height: 6rem; margin: auto; cursor: pointer; background: url('../img/play.svg') no-repeat; background-size: cover;}
.main-about .video img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.main-about .culture{ display: grid; grid-gap: 4.5rem;}
.main-about .culture .itm{ line-height: 1.5;}
.main-about .culture .itm .caption{ margin-bottom: 1rem; font-size: 1.75rem; font-weight: 900;}
.main-about .culture .itm .cn{ font-size: 1.25rem;}
.main-about .culture .itm .en{ font-size: 0.75rem;}

/* newsshow */
.col-article{ display: grid; grid-gap: 2rem}
.col-article .article-info{ display: flex; align-items: center; gap: 1.25vw; font-size: 1.125rem; line-height: 1; font-weight: bold; color: var(--secondary)}
.col-article .article-title{ font-size: 2rem; line-height: 2; font-weight: 900;}
.col-article .article-content{ font-size: 1.125rem; line-height: 2; font-weight: bold; color: #666}
.col-article .article-content p{ text-align: justify;}
.col-article .article-content strong{ font-weight: 900;}
.col-article .article-content img{ display: inline-block; max-width: 100%;}
.col-article .article-banner{ width: 100%; height: 6.25vw; background: #000;}
.col-article .article-banner img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.col-article .article-arrow{ display: grid; grid-template-columns: repeat(2,1fr);}
.col-article .article-arrow a{ display: flex; flex-flow: column nowrap; font-size: 1.125rem; line-height: 2; font-weight: bold; color: var(--text)}
.col-article .article-arrow .prev:before{ content: '上一篇:'; color: var(--desc)}
.col-article .article-arrow .next:before{ content: '下一篇:'; color: var(--desc)}

/* productshow */
.col-goods{ display: grid; grid-template-columns: 5fr 7fr; grid-gap: 1.25vw;}

.col-goods .cover{ width: 100%; overflow: hidden;}
.col-goods .itm{ position: relative; width: 100%; height: 0; padding-bottom: 75%; background: var(--text);}
.col-goods .itm img{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; max-width: 80%; max-height: 80%; margin: auto; object-fit: cover; }

.col-goods .swiper-container{ position: relative;}
.col-goods .swiper-page{ display: flex; justify-content: center; align-items: center; height: 4rem;}
.col-goods .swiper-prev,
.col-goods .swiper-next{ position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; cursor: pointer;}
.col-goods .swiper-prev i,
.col-goods .swiper-next i{ font-size: 2rem; color: var(--white);}
.col-goods .swiper-prev{ left: 0;}
.col-goods .swiper-next{ right: 0;}

.col-goods .info{ display: grid; align-self: start;}
.col-goods .info .details{ display: grid; grid-gap: 2rem; padding: 2rem;}
.col-goods .info .details .title{ line-height: 1.5;}
.col-goods .info .details .title .cn{ font-size: 2rem; font-weight: 900;}
.col-goods .info .details .title .en{ font-size: 0.75rem; text-transform: uppercase;}
.col-goods .info .details .slogan{ font-size: 1.5rem; font-weight: 600; line-height: 1.5;}
.col-goods .info .details .attr{ display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 1.125rem; padding: 1em 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.col-goods .info .details .content{ font-size: 1.125rem; line-height: 2; font-weight: bold; color: #666;}
.col-goods .info .details .content p{ text-align: justify;}
.col-goods .info .details .content strong{ font-weight: 900;}
.col-goods .info .details .content img{ display: inline-block; max-width: 100%;}
.col-goods .info .next{ display: flex; flex-flow: row nowrap; padding: 2rem; font-size: 1.25rem; line-height: 1.5;}
.col-goods .info .next:before{ content: '下一篇：';}

/* channel */
.col-channel{ display: grid; grid-gap: 2.5vw;}
  
.col-channel .title h1{ font-size: 2rem; line-height: 2; font-weight: 900;}
.col-channel .content{ font-size: 1.125rem; line-height: 2; font-weight: bold; color: #666}
.col-channel .content p{ text-align: justify;}
.col-channel .content p:not(:last-child){ margin-bottom: 1em;}
.col-channel .content img{ display: inline-block; max-width: 100%;}