@charset "utf-8";
html,
body{ overflow-x: hidden;}

html.fix{ height: 100%; overflow: hidden;}
html.fix .container,
html.fix footer{ filter: blur(5px)}

.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 section:not(.slideshow):not(.copyright):not(.navigation){ position: relative; width: 100%; padding: 6.25vw; overflow: hidden;}

.inner{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
.inner .inner-title{ display: flex; flex-flow: column nowrap; line-height: 1.5;}
.inner .inner-title:after{ content: ''; position: absolute; top: calc(1.875rem - 1px); left: -6.25vw; width: 5vw; height: 2px; background: var(--primary);}
.inner .inner-title .en{ font-size: 2.5rem; font-weight: bold; color: var(--primary); white-space: nowrap;}
.inner .inner-title .cn{ font-size: 1.5rem; font-weight: 900; white-space: nowrap;}

.inner a.details{ display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 3rem; padding: 0 1.5rem; color: white; background: var(--primary);}
.inner a.details span{ font-size: 1rem; line-height: 1; font-weight: bold;}
.inner a.details i{ font-size: 1rem; line-height: 1;}

header{ position: fixed; z-index: 9; top: 0; right: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 2rem 5vw; border-bottom: 1px solid rgba(255,255,255,.1); transition: .35s;}
header .logo{ width: 20rem; height: 3rem;}
header .logo a{ display: block; width: 100%; height: 100%; -webkit-mask-position: left center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: auto 100%; background: white;}

header .menu{ display: grid; grid-auto-flow: column; align-items: center; cursor: pointer;}
header .menu span{ position: relative; font-size: 1rem; line-height: 2; font-weight: bold; color: white; transition: .3s;}
header .menu span:before{ content: 'Close'; position: absolute; z-index: -1; color: white; opacity: 0; transition: .3s;}
header .menu .ico{ position: relative; width: 3rem; height: 3rem;}
header .menu .ico i{ position: absolute; width: 1.5rem; height: 2px; background: white;}
header .menu .ico i:first-child{ top: 1rem; left: .75rem; transform: rotate(0); transition: top .1s, width .1s .1s, transform .3s .2s;}
header .menu .ico i:last-child{ bottom: 1rem; left: .75rem; transform: rotate(0); transition: bottom .1s, width .1s .1s, transform .3s .2s;}
header .menu .ico i:nth-child(2){ top: 0; bottom: 0; left: .75rem; width: 1rem; margin: auto; transition: .3s;}

header.mini{ padding: 1.25vw 2.5vw; background: white; box-shadow: 0 0 1rem rgba(0, 0, 0, .05);}
header.mini .logo a{ background: var(--primary);}
header.mini .menu span{ color: var(--primary);}
header.mini .menu .ico i{ background: var(--primary);}

header.open{ box-shadow: none; background: none;}
header.open .logo a{background: var(--primary);}
header.open .menu span{ color: rgba(255, 255, 255, 0)!important;}
header.open .menu span:before{ color: var(--primary); opacity: 1;}
header.open .menu i{ background: var(--primary)!important;}
header.open .menu i:first-child{ top: calc(50% - 1px); transform: rotate(40deg);}
header.open .menu i:last-child{ bottom: calc(50% - 1px); transform: rotate(-40deg);}
header.open .menu i:nth-child(2){ width: 0;}

header.close .menu i:first-child{ top: 1rem; width: 1.5rem; transform: rotate(0); transition: transform .3s, width .1s .3s, top .1s .4s;}
header.close .menu i:last-child{ bottom: 1rem; width: 1.5rem; transform: rotate(0); transition: transform .3s, width .1s .3s, bottom .1s .4s;}
header.close .menu i:nth-child(2){ width: 1rem; transition: .3s;}

.container{ transition: .35s;}

section.slideshow{ position: relative; width: 100vw; height: 100vh;}
section.slideshow .cover{ position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
section.slideshow .cover img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: 3s;}
section.slideshow .font{ position: absolute; top: 50%; left: 6.25vw; z-index: 1; transform: translateY(-50%); display: flex; flex-flow: column wrap; width: 42.5vw; font-weight: bold; line-height: 1.5; text-transform: uppercase; text-shadow: 0.5rem 0.5rem 0.5rem rgb(0 0 0 / 30%);}
section.slideshow .font .cn{ font-size: 3rem; color: white;}
section.slideshow .font .en{ font-size: 1rem; color: rgba(255, 255, 255, .5); letter-spacing: .125rem;}
section.slideshow .font .strip{ width: 3rem; height: 2px; margin: 2rem 0; background: white;}
section.slideshow .font .desc{ font-size: 1.25rem; line-height: 2; text-align: justify; color: white;}
section.slideshow .font .learn{ display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 3rem; border: 1px solid white; padding: 0 1.5rem; margin-top: 6rem; font-size: 1rem; line-height: 1; color: white; text-transform: none;}
section.slideshow .font .learn span{ font-weight: bold;}
section.slideshow .number{ position: absolute; top: calc(50% - 6rem); right: 0; z-index: 1; font-size: 12rem; line-height: 1; font-weight: bold; color: white; opacity: .1;}

section.slideshow .font .cn,
section.slideshow .font .en,
section.slideshow .font .strip,
section.slideshow .font .desc,
section.slideshow .font .learn{ transform: translateY(10rem); opacity: 0; transition: 2s 1s;}
section.slideshow .number{ transform: translateX(-10rem); opacity: 0; transition: .5s .3s;}

section.slideshow .swiper-slide-active .cover img{ transform: scale(1);}
section.slideshow .swiper-slide-active .font .cn,
section.slideshow .swiper-slide-active .font .en,
section.slideshow .swiper-slide-active .font .strip,
section.slideshow .swiper-slide-active .font .desc,
section.slideshow .swiper-slide-active .font .learn{ transform: translateY(0); opacity: 1;}
section.slideshow .swiper-slide-active .number{ transform: translateX(0); opacity:.1;}

section.slideshow .swiper-control{ position: absolute; top: 50%; right: 5vw; z-index: 1;}
section.slideshow .swiper-control .next{ position: relative; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 1rem; font-size: 1rem; line-height: 2; font-weight: bold; color: white; cursor: pointer;}
section.slideshow .swiper-control .next:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: white;}

section.slideshow .quick{ position: absolute; bottom: 5vw; left: 5vw; z-index: 1; display: grid; grid-auto-flow: column; align-items: center; grid-gap: 2rem;}
section.slideshow .quick a{ display: flex; justify-content: center; align-items: center;}
section.slideshow .quick a i{ font-size: 2rem; line-height: 1; color: white;}

section.slideshow .phone{ position: absolute; right: 5vw; bottom: 5vw; z-index: 1; display: grid; grid-auto-flow: column; align-items: center; grid-gap: .5rem; font-size: 1.125rem; color: white;}
section.slideshow .phone i{ font-size: 2rem; line-height: 1;}
section.slideshow .phone a{ line-height: 1.5; font-weight: bold; color: white;}

section.slideshow .scroll{ position: absolute; right: 50%; bottom: 0; z-index: 1; display: grid; justify-items: center; grid-gap: 2rem; transform: translateX(50%)!important;}
section.slideshow .scroll span{ font-size: 1rem; line-height: 1.5; font-weight: bold; color: white;}
section.slideshow .scroll i{ width: 1px; height: 4rem; background: white;}

section.about{ background: var(--gray);}
section.about .inner:after{ content: 'About Us'; position: absolute; top: 0; right: -6.25vw; z-index: 0; font-size: 10rem; line-height: 1; font-weight: 700; color: var(--primary); writing-mode:vertical-rl; opacity: 0.05;}
section.about .inner-title{ grid-column: span 8;}
section.about .inner-cover{ position: relative; z-index: 2; grid-column: 9/13; grid-row: span 4; width: 100%; overflow: hidden;}
section.about .inner-cover .cover{ position: relative; width: 100%; height: calc(100% - 5vw);}
section.about .inner-cover .cover img{ width: 100%; height: 100%; object-fit: cover;}
section.about .inner-content{ grid-column: span 8;}
section.about .inner-content .content{ font-size: 1rem; line-height: 2; font-weight: bold; color: var(--text); text-align: justify;}
section.about .inner-content .content p:not(:last-child){ padding-bottom: 2rem;}
section.about a.details{ grid-column: span 2;}
section.about .inner-number{ position: relative; grid-column: span 8; display: flex; justify-content: space-between; align-items: center; padding: 2.5vw 0;}
section.about .inner-number:after{ content: ''; position: absolute; top: 0; left: -6.25vw; z-index: 0; width: 100vw; height: 100%; background: white;}
section.about .inner-number .itm{ position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; grid-gap: 0 1rem; align-items: center; line-height: 1.25;}
section.about .inner-number .itm b{ font-size: 2.5rem; line-height: 1.5;}
section.about .inner-number .itm i{ font-size: 0.875rem; line-height: 1.5; font-style: normal;}
section.about .inner-number .itm span{ grid-column: span 2; font-size: 1.125rem; line-height: 2;}
section.about .inner-number .strip{ position: relative; z-index: 1; width: 1px; height: 3rem; background: var(--border);}

section.product:after{ content: ''; position: absolute; top: 0; left: 0; z-index: -2; width: 36.25vw; height: 100%; background: url('../img/bg.webp') var(--primary);}
section.product .inner:before{ content: 'Product'; position: absolute; bottom: 0; left: -6.25vw; z-index: -1; font-size: 10rem; line-height: 1; font-weight: 700; color: white; writing-mode:vertical-rl; opacity: 0.05;}
section.product .inner:after{ content: 'Center'; position: absolute; bottom: 0; right: -6.25vw; z-index: -1; font-size: 10rem; line-height: 1; font-weight: 700; color: var(--primary); opacity: 0.05;}
section.product .inner .inner-title{ grid-column: span 4;}
section.product .inner .inner-title:after{ background: white;}
section.product .inner .inner-title .en,
section.product .inner .inner-title .cn{ color: white;}
section.product .inner .details{ align-self: center; grid-column: 11/13; justify-self: end;}
section.product .inner .inner-cate{ align-self: center; grid-column: 6/11; grid-row: 1/2; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; gap: 1rem;}
section.product .inner .inner-cate a{ position: relative; font-size: 1rem; font-weight: bold; line-height: 3; color: var(--text)}
section.product .inner .inner-cate a:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary);}
section.product .inner .inner-cate a.on{ color: var(--primary);}
section.product .inner .inner-cate a.on:after{ width: 100%;}
section.product .inner .inner-content{ grid-column: span 12; width: calc(100% + 6.25vw); overflow: hidden;}
section.product .inner .inner-content .swiper-slide{ width: 37.5vw; padding-right: 2.5vw;}
section.product .inner .inner-content .itm{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 1rem 2.5vw; width: 100%;}
section.product .inner .inner-content .itm .cover{ position: relative; grid-column: span 5; width: 100%; height: 0; padding-bottom: calc(100%/16*9); overflow: hidden; background: var(--gray);}
section.product .inner .inner-content .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
section.product .inner .inner-content .itm .info{ grid-column: 1/5; line-height: 2;}
section.product .inner .inner-content .itm .info .cate{ font-size: 0.875rem;}
section.product .inner .inner-content .itm .info .tit{ font-size: 1.25rem; font-weight: 700;}
section.product .inner .inner-content .itm .desc{ grid-column: span 4; height: 3.5rem; font-size: 0.875rem; line-height: 2; color: var(--desc);}
section.product .inner .inner-content .itm .more{ grid-column: 5/6; grid-row: 2/3; display: grid; grid-auto-flow: column; justify-items: end; align-items: center;}
section.product .inner .inner-content .itm .more:before{ content: ''; width: 2px; height: 1rem; background: var(--border);}
section.product .inner .inner-content .itm .more i{ font-size: 1rem; line-height: 1; color: var(--primary);}

section.product .inner .inner-content .swiper-slide-active .itm .info .cate{ color: white; opacity: 0.5;}
section.product .inner .inner-content .swiper-slide-active .itm .info .tit{ color: white;}
section.product .inner .inner-content .swiper-slide-active .itm .desc{ color: white; opacity: 0.8;}

section.product .inner .inner-control{ grid-column: 1/3;  display: flex; height: 3rem;}
section.product .inner .inner-control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; line-height: 1; cursor: pointer;}
section.product .inner .inner-control .prev{ background: var(--gray);}
section.product .inner .inner-control .next{ background: white;}

section.product .inner .inner-pagination{ grid-column: 6/8; display: grid; grid-auto-flow: column; justify-content: start; align-content: center; grid-gap: 0.5rem; }
section.product .inner .inner-pagination span{ width: .5rem; height: .5rem; border-radius: 0; margin: 0; background: var(--border); opacity: 1;}
section.product .inner .inner-pagination span.swiper-pagination-bullet-active{ background: var(--primary);}

section.billing{ height: 30vw; background: url('../img/billing.webp') center center no-repeat; background-size: cover;}
section.billing .inner{ align-items: center; height: 100%;}
section.billing .inner .font{ grid-column: span 10; align-self: center; display: grid; grid-gap: 2rem;}
section.billing .inner .font .caption{ display: flex; flex-flow: column nowrap; line-height: 1.5; color: white;}
section.billing .inner .font .caption .cn{ font-size: 2.5rem; font-weight: 900;}
section.billing .inner .font .caption .en{ font-size: 1.25rem; font-weight: 700;}
section.billing .inner .font .strip{ width: 2.5rem; height: 2px; background: white;}
section.billing .inner .font .slogan{ display: flex; flex-flow: column nowrap; line-height: 1.5; color: white;}
section.billing .inner .font .slogan .cn{ font-size: 1rem; line-height: 2;}
section.billing .inner .font .slogan .en{ font-size: .75rem;}
section.billing .inner .details{ grid-column: 11/13; border: 1px solid white; color: white; background: none;}

section.news .inner:after{ content: 'News Center'; position: absolute; top: 0; left: -6.25vw; z-index: -1; font-size: 10rem; line-height: 1; color: var(--primary); font-weight: 700; opacity: 0.05;}
section.news .inner .inner-title{ grid-column: span 4;}
section.news .inner .details{ grid-column: 11/13; justify-self: end; align-self: center;}
section.news .inner .inner-content{ position: relative; grid-column: span 12; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: calc(5vw + 1px);}
section.news .inner .inner-content:before{ content: ''; position: absolute; top: calc(50% - .5px); left: 0; z-index: -1; width: 100%; height: 1px; background: var(--border);}
section.news .inner .inner-content:after{ content: ''; position: absolute; top: 0; right: 0; left: 0; z-index: -1; width: calc((100% + 5vw) / 3); height: 100%; border-left: 1px solid var(--border); border-right: 1px solid var(--border); margin: auto;}
section.news .inner .inner-content .itm{ display: grid; grid-auto-flow: column; grid-template-columns: auto 1fr; grid-gap: 2rem;}
section.news .inner .inner-content .itm .date{ display: flex; flex-flow: column nowrap; line-height: 1.25; font-weight: bold;}
section.news .inner .inner-content .itm .date .md{ font-size: 1.5rem; color: var(--primary);}
section.news .inner .inner-content .itm .date .y{ font-size: 1rem; color: var(--info)}
section.news .inner .inner-content .itm .info{ display: grid; grid-gap: 1.5rem; align-content: start; line-height: 2;}
section.news .inner .inner-content .itm .info .tit{ font-size: 1.125rem; font-weight: bold;}
section.news .inner .inner-content .itm .info .strip{ width: 2rem; height: 2px; background: var(--primary);}
section.news .inner .inner-content .itm .info .desc{ font-size: 0.875rem; line-height: 2; height: 3.5rem; color: var(--desc);}
section.news .inner .inner-content .itm .info .more{ position: relative; justify-self: start; display: grid; grid-auto-flow: column; grid-gap: 2rem; align-items: center; color: var(--primary);}
section.news .inner .inner-content .itm .info .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary);}
section.news .inner .inner-content .itm .info .more span{ font-size: 1rem; line-height: 3; font-weight: 700;}
section.news .inner .inner-content .itm .info .more i{ font-size: 1rem;}

section.case:after{ content: ''; position: absolute; top: 0; right: 0; z-index: -1; width: 100%; height: 50%; background: url('../img/bg.webp') var(--primary);}
section.case .inner:after{ content: 'Success Case'; position: absolute; bottom: 0; right: -6.25vw; z-index: -1; font-size: 10rem; line-height: 1; color: var(--primary); font-weight: 700; opacity: 0.05;}
section.case .inner .inner-title{ grid-column: span 4;}
section.case .inner .inner-title:after{ background: white;}
section.case .inner .inner-title .en,
section.case .inner .inner-title .cn{ color: white;}
section.case .inner .details{ grid-column: 11/13; justify-self: end; align-self: center; color: var(--primary); background: white;}
section.case .inner .inner-content{ grid-column: span 12; position: relative; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw;}
section.case .inner .inner-content .swiper-cover .swiper-slide{ width: calc(100% + 2.5vw); padding-right: 2.5vw;}
section.case .inner .inner-content .swiper-cover{ grid-column: span 6; position: relative; z-index: 0; overflow: hidden;}
section.case .inner .inner-content .swiper-cover .itm{ display: grid; grid-gap: 1rem;}
section.case .inner .inner-content .swiper-cover .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
section.case .inner .inner-content .swiper-cover .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
section.case .inner .inner-content .swiper-cover .itm .info{ display: grid; grid-template-columns: repeat(6,1fr); grid-gap: 2.5vw;}
section.case .inner .inner-content .swiper-cover .itm .info .desc{ grid-column: span 4; font-size: 0.75rem; line-height: 2; text-decoration: underline; color: var(--desc);}
section.case .inner .inner-content .swiper-cover .itm .info .caption{ grid-column: span 2; display: grid; justify-items: end; line-height: 2; font-weight: bold;}
section.case .inner .inner-content .swiper-cover .itm .info .caption .date{ font-size: 0.875rem; color: var(--info);}
section.case .inner .inner-content .swiper-cover .itm .info .caption .tit{ font-size: 1.25rem; color: var(--text);}
section.case .inner .inner-content .swiper-cover .itm .info .more{ grid-column: span 6; justify-self: end; position: relative; display: grid; grid-auto-flow: column; grid-gap: 2rem; align-items: center; color: var(--primary);}
section.case .inner .inner-content .swiper-cover .itm .info .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary);}
section.case .inner .inner-content .swiper-cover .itm .info .more span{ font-size: 1rem; line-height: 3; font-weight: 700;}

section.case .inner .inner-content .swiper-thumb{ grid-column: 6/13; position: absolute; top: 4rem; z-index: 1; width: calc(100% + 6.25vw); overflow: hidden;}
section.case .inner .inner-content .swiper-thumb .swiper-slide{ width: 22.5vw; padding-right: 2.5vw;}
section.case .inner .inner-content .swiper-thumb .itm{ display: grid; grid-gap: 1rem;}
section.case .inner .inner-content .swiper-thumb .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
section.case .inner .inner-content .swiper-thumb .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
section.case .inner .inner-content .swiper-thumb .itm .info{ display: grid; grid-gap: 2.5vw;}
section.case .inner .inner-content .swiper-thumb .itm .info .caption{ display: grid; justify-items: end; line-height: 2; font-weight: bold;}
section.case .inner .inner-content .swiper-thumb .itm .info .caption .date{ font-size: 0.875rem; color: var(--info);}
section.case .inner .inner-content .swiper-thumb .itm .info .caption .tit{ font-size: 1.25rem; color: var(--text);}

section.case .inner .inner-content .control{ grid-column: span 3; position: relative; top: calc(42.5vw / 16 * 9 - 3rem); display: flex; height: 3rem;}
section.case .inner .inner-content .control div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; line-height: 1; cursor: pointer;}
section.case .inner .inner-content .control .prev{ color: white; background: var(--primary);}
section.case .inner .inner-content .control .next{ background: var(--gray);}

section.case .inner .inner-content .pagination{ grid-column: span 3; position: relative; top: calc(42.5vw / 16 * 9 - 3rem); display: grid; grid-auto-flow: column; justify-content: end; align-content: center;; grid-gap: 0.5rem; height: 3rem;}
section.case .inner .inner-content .pagination span{ width: .5rem; height: .5rem; border-radius: 0; margin: 0; background: var(--border); opacity: 1;}
section.case .inner .inner-content .pagination span.swiper-pagination-bullet-active{ background: var(--primary);}

section.navigation{ padding: 0 6.25vw; background: var(--gray);}
section.navigation .inner{ padding: 2.5vw 0;}
section.navigation .inner:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--border);}
section.navigation .inner .nav{ grid-column: span 10; display: grid; grid-auto-flow: column; grid-gap: 4rem; justify-content: start;}
section.navigation .inner .nav a{ font-size: 1rem; line-height: 2; font-weight: 900;}
section.navigation .inner .quick{ grid-column: span 2; display: grid; grid-auto-flow: column; grid-gap: 2rem; justify-content: end;}
section.navigation .inner .quick a{ display: flex; justify-content: center; align-items: center;}
section.navigation .inner .quick a i{ font-size: 2rem; line-height: 1; color: var(--primary);}

section.contact{ background: var(--gray);}
section.contact .inner .inner-title{ grid-column: span 2;}
section.contact .inner .details{ grid-column: span 2;}
section.contact .inner .inner-content{ grid-column: 3/13; grid-row: 1/3; display: grid; grid-template-columns: repeat(10,1fr); grid-auto-flow: column; grid-gap: 2rem 2.5vw;}
section.contact .inner .inner-content .map{ grid-column: 5/8; grid-row: 1/4; position: relative; display: flex; width: 100%; height: 100%;}
section.contact .inner .inner-content .map img{ position: absolute; top: 0; left: 0; z-index: 0; width: calc(100% - 3rem); height: 100%; object-fit: cover;}
section.contact .inner .inner-content .map a{ position: absolute; top: 0; right: 0; z-index: 1; display: flex; justify-content: center; align-items: center; width: 3rem; height: 100%; background: var(--primary);}
section.contact .inner .inner-content .map a b{ font-size: 1rem; line-height: 2; writing-mode: vertical-rl; color: white;}

section.contact .inner .inner-content .itm{ grid-column: span 2; display: grid; font-weight: bold;}
section.contact .inner .inner-content .itm.address{ grid-column: 1/5;}
section.contact .inner .inner-content .itm.qrcode{ grid-column: span 1; grid-row: 2/4; grid-template-rows: 1fr auto; justify-items: center; align-items: end;}
section.contact .inner .inner-content .itm.qrcode:first-of-type{ grid-column: 10/11;}
section.contact .inner .inner-content .itm b{ font-size: .875rem; line-height: 2; color: var(--desc);}
section.contact .inner .inner-content .itm span{ font-size: 1rem; line-height: 2; color: var(--primary); font-weight: 700;}
section.contact .inner .inner-content .itm .cover{ position: relative; align-self: end; width: 100%; height: 0; padding-bottom: 100%;}
section.contact .inner .inner-content .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

section.contact .inner .inner-content .name{ position: absolute; top: 0; right: 0; line-height: 1.5; font-weight: bold; text-align: right;}
section.contact .inner .inner-content .name .cn{ font-size: 1.5rem; color: var(--primary); font-weight: 900;}
section.contact .inner .inner-content .name .en{ font-size: 0.875rem; color: var(--desc);}

section.copyright{ width: 100%; padding: 2.5vw 6.25vw; font-size: 0.875rem; line-height: 1.5; color: white; background: var(--primary);}
section.copyright:after{ content: '百航科技 - 专业网络品牌设计'; float: right;}
section.copyright a{ color: white;}

footer{ transition: .35s;}

.menubox{ position: fixed; top: 0; right: 0; z-index: 8; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: rgba(255,255,255,.9); transform: scale(1.1); opacity: 0; visibility: hidden; transition: .5s;}
.menubox .grid{ display: grid; grid-auto-flow: column; grid-gap: 5vw; width: 80vw;}
.menubox .grid .navigation{ position: relative; display: grid; grid-gap: 2rem;}
.menubox .grid .navigation:before{ content: 'Navigation'; font-size: 2rem; line-height: 1; text-transform: uppercase; font-weight: bold; color: var(--primary);}
.menubox .grid .navigation ul{ display: grid; grid-gap: 1rem; justify-items: start;}
.menubox .grid .navigation ul li{ position: relative; display: flex; flex-flow: column nowrap; line-height: 1.5;}
.menubox .grid .navigation ul li:before{ content: attr(data-num); font-size: 1rem; font-weight: bold; color: var(--primary); opacity: 0.5;}
.menubox .grid .navigation ul li>a{ font-size: 1.25rem; color: var(--text); font-weight: 900; white-space: nowrap;}
.menubox .grid .navigation ul li .sub{ display: grid; grid-auto-flow: column; grid-gap: 2rem; padding-top: 0.5rem;}
.menubox .grid .navigation ul li .sub a{ font-size: 1rem; line-height: 1.5; color: var(--desc); font-weight: 700; white-space: nowrap;}
.menubox .grid .contact{ align-self: start; display: grid; grid-gap: 2vw;}
.menubox .grid .contact:before{ content: 'Contact Us'; font-size: 2rem; line-height: 1; text-transform: uppercase; font-weight: bold; color: var(--primary);}
.menubox .grid .contact .itm{ display: grid; grid-gap: 0.5rem; line-height: 1.5;}
.menubox .grid .contact .itm b{ font-size: 1rem; color: var(--primary);}
.menubox .grid .contact .itm span{ display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; color: var(--text); font-weight: 700; white-space: nowrap;}
.menubox .grid .contact .itm span i{ font-size: 1.5rem;}
.menubox .grid .copyright{ align-self: end; text-align: right; font-size: .75rem; line-height: 1.5; color: var(--text);}

.menubox.open{ transform: scale(1); opacity: 1; visibility: visible;}

/* subpage */
.banner{ position: relative; width: 100%; height: 25vw;}
.banner.mini{ height: calc(7rem + 1px); background: var(--dark);}
.banner .inner{ position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: calc(4rem + 7.5vw) 6.25vw 0;}
.banner .inner .slogan{ font-size: 2rem; line-height: 1.5; font-weight: bold; color: white;}
.banner .inner .catename{ display: flex; flex-flow: column nowrap; align-items: flex-end; font-weight: bold; color: white;}
.banner .inner .catename .en{ font-size: 2rem; line-height: 1.25;}
.banner .inner .catename .cn{ font-size: 1.5rem; line-height: 2;}
.banner .inner .catename .strip{ width: 1.5rem; height: 2px; margin-top: 1rem; background: white;}
.banner img{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover;}

.column{ display: grid; grid-gap: 2.5vw; width: 100%; padding: 2.5vw 6.25vw 6.25vw;}
.column .line{ width: 100%; height: 1px; background: var(--border);}

.location{ position: relative; display: flex; justify-content: space-between; align-items: center;}
.location .bread{ display: flex; align-items: center; font-size: 0.875rem; line-height: 2;}
.location .bread i{ font-size: 1rem; line-height: 1; color: var(--primary);}
.location .bread span{ padding: 0 .5rem;}
.location .bread span:after{ content: ':';}
.location .bread a{ color: var(--text);}
.location .bread a:after{ content: '>'; padding: 0 .5rem;}
.location .bread b{ font-weight: normal;}

.location .category{ position: absolute; right: 0; display: grid; grid-auto-flow: column; grid-gap: 4rem;}
.location .category a{ position: relative; font-size: 1rem; line-height: 3; font-weight: bold;}
.location .category a.on{ color: var(--primary);}
.location .category a.on:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary);}

.article{ display: grid; grid-gap: 2.5vw;}
.article .article-title{ display: grid; grid-gap: 1rem; line-height: 1.5;}
.article .article-title .title{ font-size: 1.5rem; font-weight: bold; color: var(--text);}
.article .article-title .info{ justify-self: start; display: grid; grid-auto-flow: column; grid-gap: 2rem; font-size: 0.875rem; color: var(--info); text-transform: uppercase;}
.article .article-title .desc{ position: relative; padding: 1.5rem; margin-top: 1rem; font-size: 0.875rem; color: var(--desc); background: var(--gray);}
.article .article-title .desc:after{ content: 'description'; position: absolute; top: 0; bottom: 0; right: 0; height: 3rem; margin: auto; font-size: 3rem; line-height: 1; font-weight: bold; text-transform: uppercase; color: var(--border);}

.article .article-content p{ font-size: 1rem; line-height: 2; text-align: justify;}
.article .article-content p:not(:last-child){ margin-bottom: 2rem;}
.article .article-content img{ max-width: 100%;}

.goods{ display: grid; grid-template-columns: repeat(12,1fr); align-items: start; grid-gap: 2.5vw;}
.goods .goods-cover{ grid-column: span 4; position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
.goods .goods-cover .thumbnail{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden;}
.goods .goods-cover .thumbnail .swiper-slide{ background: var(--gray);}
.goods .goods-cover .thumbnail .swiper-slide img{ width: 100%; height: 100%; object-fit: contain;}
.goods .goods-info{ grid-column: span 8; display: grid; grid-gap: 2.5vw;}
.goods .goods-info .title{ display: grid; grid-gap: 1rem; line-height: 1.5;}
.goods .goods-info .title .caption{ font-size: 1.5rem;}
.goods .goods-info .title .cate{ font-size: .875rem; text-transform: uppercase;}
.goods .goods-info .content p{ font-size: 1rem; line-height: 2; text-align: justify;}
.goods .goods-info .content p:not(:last-child){ margin-bottom: 2rem;}
.goods .goods-info .content img{ max-width: 100%;}

.goods .goods-info .arrow{ display: flex; justify-content: flex-end; align-items: center; width: 100%;}
.goods .goods-info .arrow a{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: 1rem; font-size: 1rem; line-height: 2; color: var(--text);}
.goods .goods-info .arrow a:after{ content: '\e62d'; font-family: 'neko'; color: var(--desc);}
.goods .goods-info .arrow a i{ width: 1px; height: 1rem; background: var(--border);}

.column .artarrow{ display: flex; justify-content: space-between; align-items: center; width: 100%;}
.column .artarrow a{ display: grid; grid-auto-flow: column; align-items: center; grid-gap: 1rem; font-size: 1rem; line-height: 2; color: var(--text);}
.column .artarrow a.prev:before{ content: '\e62c'; font-family: 'neko'; color: var(--desc);}
.column .artarrow a.next:after{ content: '\e62d'; font-family: 'neko'; color: var(--desc);}
.column .artarrow a i{ width: 1px; height: 1rem; background: var(--border);}

.list-news{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 5vw;}
.list-news .itm{ position: relative; display: grid; grid-auto-flow: column; grid-template-columns: auto 1fr; grid-gap: 2rem;}
.list-news .itm:not(:nth-child(3n)):after{ content: ''; position: absolute; top: -2.5vw; right: -2.5vw; z-index: -1; width: 1px; height: calc(100% + 5vw); background: var(--border);}
.list-news .itm:nth-child(3n-1):not(:nth-child(8)):before{ content: ''; position: absolute; bottom: -2.5vw; left: 50%; z-index: -1; width: 87.5vw; height: 1px; transform: translateX(-50%); background: var(--border);}
.list-news .itm .date{ display: flex; flex-flow: column nowrap; line-height: 1.25; font-weight: bold;}
.list-news .itm .date .md{ font-size: 1.5rem; color: var(--primary);}
.list-news .itm .date .y{ font-size: 1rem; color: var(--info)}
.list-news .itm .info{ display: grid; grid-gap: 1.5rem; align-content: start; line-height: 2;}
.list-news .itm .info .tit{ font-size: 1.125rem; font-weight: bold;}
.list-news .itm .info .strip{ width: 2rem; height: 2px; background: var(--primary);}
.list-news .itm .info .desc{ font-size: 0.875rem; line-height: 2; height: 3.5rem; color: var(--desc);}
.list-news .itm .info .more{ position: relative; justify-self: start; display: grid; grid-auto-flow: column; grid-gap: 2rem; align-items: center; color: var(--primary);}
.list-news .itm .info .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary);}
.list-news .itm .info .more span{ font-size: 1rem; line-height: 3; font-weight: 700;}
.list-news .itm .info .more i{ font-size: 1rem;}

.list-product{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.list-product .itm{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 1rem 2.5vw; width: 100%;}
.list-product .itm .cover{ position: relative; grid-column: span 5; width: 100%; height: 0; padding-bottom: calc(100%/16*9); overflow: hidden; background: var(--gray);}
.list-product .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
.list-product .itm .info{ grid-column: 1/5; line-height: 2;}
.list-product .itm .info .cate{ font-size: 0.875rem;}
.list-product .itm .info .tit{ font-size: 1.25rem; font-weight: 700;}
.list-product .itm .desc{ grid-column: span 4; height: 3.5rem; font-size: 0.875rem; line-height: 2; color: var(--desc);}
.list-product .itm .more{ grid-column: 5/6; grid-row: 2/3; display: grid; grid-auto-flow: column; justify-items: end; align-items: center;}
.list-product .itm .more:before{ content: ''; width: 2px; height: 1rem; background: var(--border);}
.list-product .itm .more i{ font-size: 1rem; line-height: 1; color: var(--primary);}

.list-case{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.list-case .itm{ display: grid; grid-gap: 1rem;}
.list-case .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.list-case .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.list-case .itm .info{ display: grid; grid-gap: 1rem;}
.list-case .itm .info .desc{ font-size: 0.875rem; line-height: 2; color: var(--desc);}
.list-case .itm .info .caption{display: grid; line-height: 2; font-weight: bold;}
.list-case .itm .info .caption .date{ font-size: 0.875rem; color: var(--info);}
.list-case .itm .info .caption .tit{ font-size: 1.25rem; color: var(--text);}
.list-case .itm .info .more{ justify-self: start; position: relative; display: grid; grid-auto-flow: column; grid-gap: 2rem; align-items: center; color: var(--primary);}
.list-case .itm .info .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary);}
.list-case .itm .info .more span{ font-size: 1rem; line-height: 3; font-weight: 700;}

.pagenumber{ position: relative; display: grid; grid-auto-flow: column; justify-content: center; grid-gap: 1.5rem; width: 100%;}
.pagenumber span,
.pagenumber a{ justify-self: center; display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-size: 1rem; line-height: 1; font-weight: bold; color: var(--text); background: var(--gray); cursor: pointer;}
.pagenumber span:not(.prev):not(.next){ color: white; background: var(--primary);}
.pagenumber .prev,
.pagenumber .next{ position: absolute; width: 6rem;}
.pagenumber .prev{ left: 0;}
.pagenumber .next{ right: 0;}
.pagenumber span.prev,
.pagenumber span.next{ color: var(--desc);}

.column-contact{ position: relative; z-index: 2; display: grid; grid-gap: 2.5vw; width: 100%; padding: 0 6.25vw 6.25vw; margin-top: -6.25vw;}

#map{ width: 100%; height: 25vw; background: var(--gray);}

.list-contact{ display: grid; grid-auto-flow: column; grid-template-rows: repeat(2,1fr); grid-gap: 2rem;}
.list-contact .name{ display: grid; line-height: 1.5; font-weight: bold;}
.list-contact .name .cn{ font-size: 1.5rem; color: var(--primary);}
.list-contact .name .en{ font-size: 0.875rem; color: var(--desc);}
.list-contact .itm{ display: grid; grid-gap: .5rem; font-size: 1rem; font-weight: bold;}
.list-contact .itm b{ line-height: 2; color: var(--primary);}
.list-contact .itm span{ line-height: 1.25; color: var(--desc);}
.list-contact .quick{ display: grid; grid-auto-flow: column; justify-self: start; align-self: end; grid-gap: 2rem;}
.list-contact .quick a{ display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem;}
.list-contact .quick a i{ font-size: 2rem; line-height: 2;}
.list-contact .qrcode{ justify-self: end; grid-row: span 2; grid-gap: 1.5rem; display: grid;}
.list-contact .qrcode b{ font-size: 1rem; line-height: 2; color: var(--primary);}
.list-contact .qrcode img{ width: 6rem; height: 6rem;}

.aboutbox{ position: relative; display: grid; grid-gap: 6.25vw;}
.aboutbox:before{ content: '2022'; position: absolute; top: -6.25vw; left: -6.25vw; z-index: -1; font-size: 16rem; line-height: 1; font-weight: bold;  writing-mode: vertical-rl; color: var(--gray);}
.aboutbox .info{ display: grid; grid-gap: 2rem;}
.aboutbox .info .title{ line-height: 1.5; font-weight: bold;}
.aboutbox .info .title .cn{ font-size: 1.5rem; color: var(--primary);}
.aboutbox .info .title .en{ font-size: 0.875rem; color: var(--desc)}
.aboutbox .info .skrip{ width: 1.5rem; height: 2px; background: var(--primary);}
.aboutbox .info .content p{ font-size: 1rem; line-height: 2; text-align: justify;}
.aboutbox .info .content p:not(:last-child){ margin-bottom: 2rem;}
.aboutbox .number{ display: flex; justify-content: space-between; align-items: center;}
.aboutbox .number .itm{ display: grid; grid-template-columns: 1fr auto; grid-gap: .5rem 1rem; align-items: center; line-height: 1.25;}
.aboutbox .number .itm b{ font-size: 2.5rem; color: var(--primary);}
.aboutbox .number .itm i{ font-size: 0.875rem; font-style: normal;}
.aboutbox .number .itm span{ grid-column: span 2; font-size: 1.125rem; font-weight: bold;}
.aboutbox .cover{ width: 100%; height: 25vw;}
.aboutbox .cover img{ width: 100%; height: 100%; object-fit: cover;}