.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;}


#layer-nav{ display: none;}
.layer-nav{ position: relative; top: 50%; display: grid; grid-gap: 2.5vw; width: 80%; margin: auto; transform: translateY(-50%); counter-reset:num; }
.layer-nav .itm{ counter-increment:num;}
.layer-nav .itm>a{ display: flex; align-items: center;}
.layer-nav .itm>a:before{content: "0" counter(num); font-size: 1.5rem; font-weight: bold; font-style: italic; color: var(--primary); padding-right: 1rem;}
.layer-nav .itm>a .cn{ font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--text)}
.layer-nav .itm .sub{ background: none;}
.layer-nav .itm .sub .link{ display: flex; flex-flow: row wrap; padding: 0 0 0 2.5rem;}
.layer-nav .itm .sub .link a{ margin: .25rem .5rem; font-size: 1rem; line-height: 1.5; color: var(--info)}
.layer-nav+.close{ position: absolute; top: 5vw; right: 5vw; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem;}
.layer-nav+.close i{ font-size: 2rem; line-height: 1; color: var(--primary)}

.container-1{ position: relative; width: 100%;}
.container-1:before,
.container-1:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; left: 0; height: 100%; margin: auto; border-right: 2px solid rgba(20,104,90,.05); border-left: 2px solid rgba(20,104,90,.05);}
.container-1:before{ width: calc(73.4375vw / 2);}
.container-1:after{ width: 73.4375vw;}
.container-1 .bg{ position: absolute; z-index: 0; top: 0; right: 0; left: 0; width: 2px; height: 100%; margin: auto; background: rgba(20,104,90,.05);}

.slideshow{ position: relative; z-index: 1; width: 100vw; height: 100vh;}

.slideshow .itm{ position: relative; width: 100%; height: 100vh; overflow:hidden;}
.slideshow .itm .slide-inner{ width: 100%; height: 100%;}
.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: 50%; left: 13.2813vw; display: flex; flex-flow: column nowrap; justify-content: flex-start; margin: auto; color: var(--white); transform: translateY(-50%);}
.slideshow .itm .font .en{ position: relative; font-size: 0.9375rem; line-height: 2; text-transform: uppercase; text-shadow: 3px 3px 5px rgba(0,0,0,.2); white-space:nowrap; width: 0; overflow: hidden; transition: 1s 1s linear;}
.slideshow .itm .font .cn{ position: relative; font-size: 3rem; line-height: 1.5; text-shadow: 3px 3px 5px rgba(0,0,0,.2); white-space:nowrap; width: 0; overflow: hidden; transition: 1s 1s linear;}
.slideshow .itm .font .details{ width: 11.25rem; margin-top: 5rem; font-size: .75rem; line-height: 2.5rem; text-align: center; text-transform: uppercase; background: var(--secondary);transform: translateY(1rem); opacity: 0; transition: 1s 1s;}

.slideshow .itm.swiper-slide-active .font .en{ width: 100%}
.slideshow .itm.swiper-slide-active .font .cn{ width: 100%}
.slideshow .itm.swiper-slide-active .font .details{ transform: translateY(0); opacity: 1;}

.slideshow .swiper-number{ position: absolute; z-index: 3; top: 50%; right: 2.5vw; display: flex; align-items: center; line-height: 1; color: var(--white); font-weight: bold; transform: translateY(-50%);}
.slideshow .swiper-number span{ font-size: 1.5rem;}
.slideshow .swiper-number b{ font-size: 3rem;}
.slideshow .swiper-number .line{ width: 7.5rem; height: 1px; margin: 0 1.875rem; background: var(--white);}

.colorcate{ position: relative; z-index: 1; width: 100%; margin-top: -6.25vw; padding: 0 13.28125vw 9.375vw}
.colorcate .w-block{ width: 50%; height: 15rem; background: var(--white);}
.colorcate .y-block{ width: 50%; height: 18.75rem; background: url('../image/y-block.webp') left bottom no-repeat var(--secondary); background-size: 40% auto;}
.colorcate .g-block{ float: right; width: 50%; height: 26.25rem; margin-top: 6.25vw; background: url('../image/g-block.svg') right 1.875rem center no-repeat var(--primary); background-size: auto calc(100% - 3.75rem);}

.colorcate .title .cn{ font-size: 1.5rem; line-height: 1.5; font-weight: bold;}
.colorcate .title .en{ font-size: .75rem; line-height: 1.5; text-transform: uppercase;}
.colorcate .title .line{ width: 1.5rem; height: 2px; margin: 1rem 0;}
.colorcate .title .ico{ width: 3rem; height: 3rem;}
.colorcate .title .ico img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.colorcate .desc{ font-size: 0.9375rem; line-height: 2;}
.colorcate .details{ margin-top: 2rem; text-align: right;}
.colorcate .details i{ font-size: 1.5rem; color: var(--white)}
.colorcate .link{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; padding-top: 2rem;}
.colorcate .link a{ font-size: 0.9375rem; line-height: 2; color: var(--primary); padding: 0 1.75em; border-radius: var(--rounded); background: var(--white); transition: .35s;}


.colorcate .w-block{ padding: 1.875rem;}
.colorcate .w-block .title{ position: relative;}
.colorcate .w-block .title .cn{ color: var(--primary)}
.colorcate .w-block .title .en{ color: var(--secondary)}
.colorcate .w-block .title .line{ background: var(--primary)}
.colorcate .w-block .title .ico{ position: absolute; top: 0; right: 0;}
.colorcate .w-block .desc{ color: var(--info)}

.colorcate .y-block{ padding: 1.875rem; padding-left: 20%;}
.colorcate .y-block .title{ position: relative;}
.colorcate .y-block .title .cn{ color: var(--white)}
.colorcate .y-block .title .en{ color: var(--white)}
.colorcate .y-block .title .line{ background: var(--white)}
.colorcate .y-block .title .ico{ position: absolute; top: 0; right: 0;}
.colorcate .y-block .desc{ color: var(--white)}

.colorcate .g-block{ padding: 3.75rem;}
.colorcate .g-block .title{ position: relative;}
.colorcate .g-block .title .cn{ color: var(--white)}
.colorcate .g-block .title .en{ color: var(--white)}
.colorcate .g-block .title .line{ background: var(--white)}
.colorcate .g-block .title .ico{ position: absolute; top: 0; right: 0;}
.colorcate .g-block .desc{ color: var(--white)}

.colorcate  .swiper-button{ position: absolute; top: 0; left: 50%; display: flex; justify-content: center; align-items: center; height: 6.25vw; padding: 0 1rem;}
.colorcate  .swiper-button .prev,
.colorcate  .swiper-button .next{ width: 1.25rem; height: 1.25rem; cursor: pointer;}
.colorcate  .swiper-button i{ font-size: 1.25rem; line-height: 1; color: var(--white)}
.colorcate  .swiper-button .line{ width: 1px; height: 1rem; margin: 0 1rem; background: var(--white);}

.about{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 0 1.5625vw; align-content: stretch; padding: 6.25vw 13.28125vw;}
.about:after{ content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: calc(100% / 3 *2); background: url('../image/about.webp') center bottom no-repeat; background-size: cover;}
.about .title{ position: absolute; z-index: 0; top: -3.75rem; left: 6.25vw; font-size: 7.5rem; line-height: 1; font-weight: bold; text-transform: uppercase; background-image:-webkit-linear-gradient(var(--secondary) 25%,var(--white) 25%);  -webkit-background-clip:text;  -webkit-text-fill-color:transparent;}
.about .details{ position: relative; z-index: 1; grid-column: 6/7; width: calc(100% + 1.5625vw); height: 0; padding-bottom: calc(100% + 1.5625vw); background: var(--secondary); transition: .35s!important;}
.about .details i{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 2rem; height: 2rem; margin: auto; font-size: 2rem; line-height: 1; color: var(--white)}


.about .info{ position: relative; z-index: 1; grid-column: 1/7; align-self: start; width: calc(100% + 1.5625vw); padding: 1.875rem 1.875rem 3.75rem; background: var(--white);}
.about .info .caption{ display: flex; justify-content: space-between; align-items: center;}
.about .info .caption .cn{ font-size: 1.5625rem; line-height: 2; font-weight: bold; color: var(--primary)}
.about .info .caption .en{ font-size: 0.625rem; line-height: 1.5; text-align: right; color: var(--desc)}
.about .info .line{ width: 1.5625rem; height: 2px; margin: 1rem 0; background: var(--primary);}
.about .info .content{ font-size: 0.9375rem; line-height: 2; color: var(--info)}
.about .video{ position: absolute; z-index: 0; grid-column: 7/13; grid-row: 1/3; width: 100%; height: 0; padding-bottom: 100%;}
.about .video>img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.about .video:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: #000; opacity: .7;}
.about .video .button{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; width: 4rem; height: 4rem; margin: auto; cursor: pointer;}
.about .number{ position: relative; z-index: 1; grid-column: 1/11; display: flex; justify-content: space-around; align-items: center; background: var(--white); box-shadow: 0 0 1.25rem rgba(33,93,86,.1);}
.about .number .itm{ display: flex; justify-content: center; align-items: center; padding: 3rem 0;}
.about .number .itm .ico{ width: 4rem; height: 4rem;}
.about .number .itm .ico img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.about .number .itm .num{ margin: 0 .5rem;font-size: 3rem; line-height: 1; font-weight: bold; color: var(--secondary);}
.about .number .itm .ins{ line-height: 1.5; color: var(--primary); font-weight: bold;}
.about .number .itm .ins i{ display: block; font-size: 0.875rem; font-style: normal;}
.about .number .itm .ins span{ display: block; font-size: 1.125rem;}

.product{ position: relative; padding: 6.25vw 13.28125vw; background: url('../image/product.webp') center center no-repeat; background-size: cover;}
.product .title{ overflow: hidden;}
.product .title .en{ position: absolute; z-index: 0; top: 6.25vw; left: 6.25vw; font-size: 7.5rem; line-height: 1; font-weight: bold; text-transform: uppercase; background-image:-webkit-linear-gradient(var(--secondary) 50%,var(--primary) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.product .title .cn{ float: right; font-size: 2rem; line-height: 1.5; font-weight: bold; text-align: right; background-image:-webkit-linear-gradient(right, var(--secondary) 50%, var(--primary) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.product .content{ position: relative; z-index: 1; width: calc( 100% + 13.2815vw);}
.product .content .swiper-container .itm{ position: relative; width: calc((100% - 13.2815vw - 1.5625vw) / 2); height: 0; padding-bottom: calc((100% - 13.2815vw - 1.5625vw) / 3); cursor: pointer;}
.product .content .swiper-container .itm .cover{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 80%; height: 80%; margin: auto;}
.product .content .swiper-container .itm .cover img{ z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain;}
.product .content .swiper-container .itm .cover img:last-child{ position: absolute; z-index: 0; filter: blur(20px); opacity: 0.8; transform: translate(10px,10px);}
.product .content .swiper-container .itm .info{ position: absolute; z-index: 1; bottom: 0; right: 0; width: 100%; height: 50%; background: url('../image/ico.svg') right 1.25rem bottom 1.25rem no-repeat var(--white); transition: .35s;}
.product .content .swiper-container .itm .info .title{ position: absolute; bottom: 1.25rem; left: 1.25rem; font-size: 0.9375rem; line-height: 2; transition: .35s;}
.product .content .swiper-container .itm .info .cate{ position: absolute; top: 1.25rem; right: 1.25rem; font-size: 0.75rem; line-height: 1.5; text-transform: uppercase; color: var(--secondary); transition: .35s;}

.product .content .control{ display: flex; align-items: center; margin-top: 3.125vw; gap: 3.75rem;}
.product .content .control .swiper-button{ flex-shrink: 0; display: flex; gap: 3.75rem;}
.product .content .control .swiper-button div{ width: 1.5rem; height: 1.5rem; cursor: pointer;}
.product .content .control .swiper-button div i{ font-size: 1.5rem; line-height: 1; color: var(--primary)}

.product .content .control .category{ flex-shrink: 0; display: flex;}
.product .content .control .category a{ font-size: .9375rem; line-height: 2; padding: 0 1em; margin: 0 1em;}
.product .content .control .swiper-scrollbar{ width: 100%; height: 1px; background: var(--primary);}
.product .content .control .swiper-scrollbar .swiper-scrollbar-drag{ top: -2px; height: 5px; background-image: -webkit-linear-gradient(right, transparent 20%, var(--secondary) 20%,var(--secondary) 80%, transparent 80%); background-color: transparent; cursor: pointer;}

.news{ position: relative; z-index: 1; padding: 0 13.28125vw; background: url('../image/news.webp') center bottom no-repeat; background-size: 100% auto;}
.news .title-cn{ position: absolute; top: 6.25vw; left: calc( 13.2813vw + 1.875rem); font-size: 2rem; line-height: 1.5; font-weight: bold; text-align: right; background-image:-webkit-linear-gradient(right, var(--secondary) 50%, var(--primary) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.news .title-en{ position: absolute; bottom: 6.25vw; left: 6.25vw; font-size: 7.5rem; line-height: 1; font-weight: bold; text-transform: uppercase; color: var(--primary)}
.news .content{ display: grid; grid-template-columns: 2fr 1fr 1fr;}
.news .content .itm{ position: relative; padding: 6.25vw 1.875rem; line-height: 2; transition: .35s!important;}
.news .content .itm .day{ margin-bottom: 3.75rem; font-size: 3rem; line-height: 1; font-weight: bold; text-align: right; color: #F3F5F2; transition: .35s}
.news .content .itm .my{ margin-bottom: 1rem; font-size: 0.8125rem; color: var(--info); transition: .35s}
.news .content .itm .tit{ font-size: 0.9375em; color: var(--text); transition: .35s}
.news .content .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); margin: 1rem 0; overflow: hidden;}
.news .content .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s}
.news .content .itm .desc{ font-size: .8125rem; height: 6.5rem; color: var(--desc); -webkit-line-clamp: 4; transition: .35s}
.news .content .itm .details{ margin-top: 3rem; font-size: .75rem; text-transform: uppercase; color: var(--info); transition: .35s}
.news .content .itm:first-child .day{ color: var(--secondary)}
.news .content .itm:first-child .cover{ padding-bottom: calc((100% - 3.75rem) / 32 * 9)}
.news .content .itm:first-child .details{ text-align: right; color: var(--primary)}


footer{ display: grid; grid-template-columns: 6fr 3fr 4fr; grid-gap: 3.75vw 1.5625vw; padding: 3.75vw 13.28125vw 0; background: var(--primary);}
footer p{ display: inline-block;}

.l-block .logo-w{ position: relative; display: flex; align-items: center; gap: 1.25rem; padding-bottom: 1.25rem;}
.l-block .logo-w:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,.2);}
.l-block .logo-w span{ font-size: 0.9375rem; line-height: 2; color: var(--white)}
.l-block .web-map{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 1.875rem; padding-top: 1.25rem; line-height: 2;}
.l-block .web-map dt{ position: relative;}
.l-block .web-map dt a{ font-size: 0.9375rem; font-weight: bold; color: var(--white)}
.l-block .web-map dt:after{ content: ''; display: block; width: .5rem; height: 2px; margin: .5rem 0; background: var(--white);}
.l-block .web-map dd{ display: grid;}
.l-block .web-map dd a{ font-size: 0.8125rem; color: rgba(255,255,255,.5)}

.m-block{ display: grid; grid-gap: 2.5rem;}
.m-block .phone,
.m-block .address{ position: relative; overflow: hidden; color: var(--white)}
.m-block .phone span,
.m-block .address span{ display: block; font-size: 0.8125rem; line-height: 2;}
.m-block .phone b{ display: block; font-size: 1.25rem; line-height: 1.5;}
.m-block .address b{ display: block; font-size: .9375rem; line-height: 2;}
.m-block .address i,
.m-block .phone i{ position: absolute; top: 0; right: 0; bottom: 0; width: 2rem; height: 2rem; margin: auto; font-size: 2rem; line-height: 1;}

.m-block .qrcode{ display: flex; gap: 2.5rem;}
.m-block .qrcode .itm{ display: grid; justify-items: center;}
.m-block .qrcode .itm img{ width: 5.625rem; height: 5.625rem; background: var(--white);}
.m-block .qrcode .itm span{ font-size: 0.8125rem; line-height: 2; color: var(--white)}

.r-block{ position: relative; padding: 0 1.875rem}
.r-block:after{ content: 'Leave \A message'; position: absolute; z-index: 0; right: 1.875rem; bottom: 0; font-size: 3.75rem; line-height: 1; font-weight: bold; text-align: right; color: var(--white); text-transform: uppercase; opacity: .05; white-space: pre-line;}
.r-block .title{ font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--white)}
.r-block .content{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.875rem; padding-top: 1.875rem;}
.r-block input,
.r-block textarea{ display: block; width: 100%; border: none; border-radius: 0; border-bottom: 1px solid var(--white); font-size: 0.9375rem; line-height: 2; color: var(--white);}
.r-block input[type=button]{ width: 5.625rem;  border: none; background: var(--secondary); color: var(--white); text-align: center;}
.r-block ::-webkit-input-placeholder{ color: var(--white)}

.r-block .content .con{ grid-column: span 2;}
.r-block .content .con textarea{ height: 7.5rem;}


.copyright{ position: relative; grid-column: span 3; padding: 1.25rem 0; font-size: 0.8125rem; line-height: 2; color: var(--white)}
.copyright a{ color: var(--white)}
.copyright:before{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 1px; background: var(--white); opacity: 0.2;}
.copyright:after{ content: '百航科技 - 专业网络品牌设计'; float: right;}

/* sub */
.sub-1{ background: #F8F9FC;}
.sub-1:after,
.sub-1:before{ display: none;}

.column-banner{ position: relative; z-index: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 20vw; background: var(--primary);}
.column-banner .en{ position: absolute; z-index: 1; font-size: 7.5rem; font-weight: bold; line-height: 1; text-transform: uppercase; color: var(--white); opacity: 0.1; transform: translateY(-50%);}
.column-banner .cn{ position: relative; z-index: 1; /*width: 3rem;*/ font-size: 3rem; font-weight: bold; line-height: 1; color: var(--white)}
.column-banner .line{ position: absolute; z-index: 1;  width: 1px; height: 6rem; bottom: 6.25vw; background: var(--white);}
.column-banner .bg{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%;}
.column-banner .bg img{ display: block; width: 100%; height: 100%; object-fit: cover;}

.column{ position: relative; z-index: 1; width: 100%; max-width: 73.4375vw; margin: -6.25vw auto 0; padding-bottom: 6.25vw;}

.product-grid{ display: grid; grid-gap: 1.5625vw;}
.product-grid .slide{ position: relative; width: 100%; padding: 3rem 0; background: var(--white); overflow: hidden;}
.product-grid .slide .itm{ position: relative; z-index: 0; display: grid; grid-template-columns: 1fr 2fr 1fr; text-align: center; cursor: pointer;}
.product-grid .slide .itm .cate{ grid-column: 2 / 3; font-size: 0.75rem; line-height: 1.5; text-transform: uppercase; color: var(--secondary)}
.product-grid .slide .itm .tit{ grid-column: 2 / 3; margin: .5rem 0 2rem; font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: var(--text); transition: .35s;}
.product-grid .slide .itm .cover{ grid-column: 2 / 3; position: relative; width: 100%; height: 0; padding-bottom: 50%;}
.product-grid .slide .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain; transition: .35s;}
.product-grid .slide .button .prev,
.product-grid .slide .button .next{ position: absolute; z-index: 1; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; margin: auto; cursor: pointer;}
.product-grid .slide .button .prev i,
.product-grid .slide .button .next i{ font-size: 2rem; line-height: 1; color: var(--primary)}
.product-grid .slide .button .prev{ left: 3rem;}
.product-grid .slide .button .next{ right: 3rem;}
.product-grid .slide .pagination{ display: flex; justify-content: center; align-items: center; padding-top: 2rem;}
.product-grid .slide .pagination span{ width: 0.5rem; height: 0.5rem; margin: 0 .25rem; border-radius: .25rem; background: var(--secondary); opacity: 1; transition: .35s;}
.product-grid .slide .pagination span.swiper-pagination-bullet-active{ width: 1rem; background: var(--primary);}

.product-grid .row .itm{ position: relative; top: 0; width: 100%; height: 100%; background: var(--white); transition: .35s!important;}
.product-grid .row .itm .box{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: flex; align-items: flex-start; padding: 2.5rem;}
.product-grid .row .itm .box .info{ position: relative; z-index: 1; display: flex; flex-flow: column nowrap; justify-content: center;}
.product-grid .row .itm .box .info .en{ font-size: 2rem; line-height: 1; font-weight: bold; text-transform: uppercase; transition: .35s;}
.product-grid .row .itm .box .info .cn{ font-size: 1.25rem; line-height: 2; font-weight: bold; margin: .5rem 0 2rem; color: var(--text); transition: .35s;}
.product-grid .row .itm .box .info .more{ display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; transition: .35s;}
.product-grid .row .itm .box .info .more i{ font-size: 1rem; line-height: 1; color: var(--white); transition: .35s;}
.product-grid .row .itm .box .cover{ position: absolute; z-index: 0; width: 50%; height: 100%;}
.product-grid .row .itm .box .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain; transition: .35s;}

.product-grid .row-1{ display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2,1fr); grid-gap: 1.5625vw;}
.product-grid .row-1 .itm .box .info .en{ color: var(--primary)}
.product-grid .row-1 .itm .box .info .more{ background: var(--secondary);}
.product-grid .row-1 .itm .box .cover{ top: 0; right: 0;}
.product-grid .row-1 .itm:first-child{ grid-row: span 2;}
.product-grid .row-1 .itm:first-child .box{ align-items: center;}
.product-grid .row-1 .itm:first-child .box .info .en{ font-size: 4rem; background-image:-webkit-linear-gradient(var(--primary) 50%, var(--secondary) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.product-grid .row-1 .itm:first-child .box .info .cn{ margin: 1.25rem 0 4.5rem;}
.product-grid .row-1 .itm:first-child .box .info .more{ display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 2.5rem; padding: 0 2em; background: var(--primary); font-size: 0.8125rem;}
.product-grid .row-1 .itm:first-child .box .info .more span{ text-transform: uppercase; color: var(--white)}
.product-grid .row-1 .itm:last-child{ width: 100%; height: 0; padding-bottom: 50%;}

.product-grid .row-2{ display: grid; grid-template-columns: 13fr 13fr 19fr; grid-gap: 1.5625vw;}
.product-grid .row-2 .itm .box{ justify-content: flex-end;}
.product-grid .row-2 .itm .box .info{ text-align: right;}
.product-grid .row-2 .itm .box .info .en{ background-image:-webkit-linear-gradient(var(--primary) 50%, var(--secondary) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.product-grid .row-2 .itm .box .info .more{ align-self: flex-end; background: var(--primary);}
.product-grid .row-2 .itm .box .cover{ top: 0; left: 0;}
.product-grid .row-2 .itm:last-child{ width: 100%; height: 0; padding-bottom: 50%;}
.product-grid .row-2 .itm:last-child .box .info .en{ background-image:-webkit-linear-gradient(var(--primary) 33%, var(--secondary) 33%, var(--secondary) 66%, var(--primary) 66%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}


.detect-grid{ display: grid; grid-gap: 3.125vw;}
.detect-grid .row{ position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-areas: 'a b';}
.detect-grid .row .title{ position: relative; display: flex; flex-flow: column nowrap; padding: 3rem; margin-top: 6.25vw; background: url('../image/bico.svg') right 1.875rem top 1.875rem no-repeat var(--white); background-size: 60%;}
.detect-grid .row .title .en{ font-size: 2rem; line-height: 1; font-weight: bold; text-transform: uppercase; background-image:-webkit-linear-gradient(var(--primary) 50%, var(--secondary) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.detect-grid .row .title .cn{ font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--text); margin-top: 3rem;}
.detect-grid .row .title .more{ position: absolute; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; width: calc(100% - 5rem); height: 5rem; padding: 0 5rem; background: var(--primary); transition: .35s;}
.detect-grid .row .title .more span{ font-size: 0.8125rem; line-height: 2; text-transform: uppercase; color: var(--white)}
.detect-grid .row .title .more i{ font-size: 2rem; line-height: 1; color: var(--white)}
.detect-grid .row .title .prev,
.detect-grid .row .title .next{ position: absolute; z-index: 1; display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; cursor: pointer; transition: .35s;}
.detect-grid .row .title .prev i,
.detect-grid .row .title .next i{ font-size: 1.5rem; line-height: 1; color: var(--white)}
.detect-grid .row .title .prev{ bottom: 5rem; left: -5rem; background: var(--primary);}
.detect-grid .row .title .next{ bottom: 0; left: 0; background: var(--secondary);}
.detect-grid .row .swiper-container{ position: relative; z-index: 0; width: 100%; overflow: hidden;}
.detect-grid .row .swiper-container .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: 50%; overflow: hidden;}
.detect-grid .row .swiper-container .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
.detect-grid .row .swiper-container .itm .info{ display: flex; align-items: center; width: 100%; height: 5rem; padding: 0 2em; padding-left: calc(10rem + 2em); font-size: 0.9375rem; line-height: 2; background: var(--white); transition: .35s;}
.detect-grid .row .number{ position: absolute; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(2,1fr); justify-items: center; align-items: center; width: 10rem; height: 5rem; background: #f3f5f2;}
.detect-grid .row .number:after{ content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 1px; height: .9375rem; margin: auto; background: #ddd;}
.detect-grid .row .number b{ font-size: 1.25rem; line-height: 1.5;}
.detect-grid .row .number span{ font-size: 0.9375rem; line-height: 2;}

.detect-grid .row:nth-child(even){ grid-template-columns: 1fr 2fr;}
.detect-grid .row:nth-child(even) .title{ grid-area: a; align-items: flex-end; text-align: right; background: url('../image/bico.svg') left 1.875rem top 1.875rem no-repeat var(--white); background-size: 60%;}
.detect-grid .row:nth-child(even) .title .more{ left: 0; right: auto;}
.detect-grid .row:nth-child(even) .title .prev{ right: 0; bottom: 0; left: auto; background: var(--secondary);}
.detect-grid .row:nth-child(even) .title .next{ right: -5rem; bottom: 5rem; left: auto; background: var(--primary);}
.detect-grid .row:nth-child(even) .swiper-container{ grid-area: b;}
.detect-grid .row:nth-child(even) .number{ right: 0; bottom: 0; left: auto;}
.detect-grid .row:nth-child(even) .swiper-container .itm .info{ padding-right: calc(10rem + 2em); padding-left: 2em; text-align: right;}

.news-grid{ display: grid; grid-template-columns: repeat(2,1fr); /*grid-gap: 1.5625vw;*/}
.news-grid .col{ display: grid; grid-gap: 3.75rem;}
.news-grid .col .title{ display: flex; justify-content: space-between; align-items: center; width: calc(100% + .9375rem); height: 6.25vw; padding: 0 1.875rem; color: var(--white); background: var(--primary);}
.news-grid .col .title .cn{ position: relative; display: flex; flex-flow: column nowrap; font-size: 1.45rem; line-height: 1.5; font-weight: bold;}
.news-grid .col .title .cn:after{ content: ''; width: 1em; height: 2px; margin-top: 1em; background: var(--white);}
.news-grid .col .title .en{ font-size: 1.875rem; line-height: 1; font-weight: bold; text-transform: uppercase;}
.news-grid .col:last-child .title{ margin-left: -0.9375rem; background: var(--secondary);}
.news-grid .col:last-child .title .cn{ align-items: flex-end; }

.news-grid .col .content{ display: grid; grid-gap: 1.875rem;}
.news-grid .col .content .itm{ position: relative; display: grid; grid-gap: 1rem; padding: 1.875rem; background: var(--white); font-size: 0.9375rem; line-height: 2; transition: .35s;}
.news-grid .col .content .itm .day{ position: absolute; z-index: 1; top: 1.875rem; right: 1.875rem; font-size: 3rem; line-height: 1; font-weight: bold; color: var(--primary); transition: .35s;}
.news-grid .col .content .itm .my{ position: relative; z-index: 1; font-size: 0.8125rem; color: var(--info); transition: .35s;}
.news-grid .col .content .itm .tit{ position: relative; z-index: 1; font-size: 0.9375rem; font-weight: bold; color: var(--text); transition: .35s;}
.news-grid .col .content .itm .line{ position: relative; z-index: 1; width: 1em; height: 2px; background: var(--primary); transition: .35s;}
.news-grid .col .content .itm .desc{ position: relative; z-index: 1; font-size: 0.8125rem; line-height: 2; color: var(--desc); -webkit-line-clamp: 3; transition: .35s;}
.news-grid .col .content .itm .cover{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: multiply; transition: .35s;}
.news-grid .col:last-child .content .itm .day{ color: var(--secondary)}
.news-grid .col:last-child .content .itm .line{ background: var(--secondary);}

.news-grid .col .more{ justify-self: center; display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 2.5rem; padding: 0 2em; font-size: 0.8125rem; background: var(--primary); transition: .35s!important;}
.news-grid .col .more span{ font-size: 0.8125rem; line-height: 2; text-transform: uppercase; color: var(--white)}
.news-grid .col .more i{ font-size: 1rem; line-height: 1; color: var(--white)}
.news-grid .col:last-child  .more{ background: var(--secondary);}


.contact-grid{ display: grid; grid-template-columns: repeat(12,1fr);}
.contact-grid .map{ grid-column: span 10; grid-row: span 2;}
.contact-grid .itm{ position: relative; grid-column: span 2; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 0; padding-bottom: 100%; color: var(--white); background: var(--primary); cursor: pointer;}
.contact-grid .itm .info{ position: absolute; z-index: 1; top: 0; right: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; transition: .35s;}
.contact-grid .itm .info i{ font-size: 2.5rem; line-height: 1;}
.contact-grid .itm .info span{ font-size: .8125rem; line-height: 2;}
.contact-grid .itm .info b{ font-size: 1.25rem; line-height: 2; font-style: italic;}
.contact-grid .itm em{ position: absolute; z-index: 0; bottom: 50%; font-size: 3rem; line-height: 1; font-style: normal; font-weight: bold; text-transform: uppercase; opacity: .1;}
.contact-grid .itm.phone{ margin-top: 6.25vw; background: var(--secondary);}
.contact-grid .itm.service{ background: var(--secondary);}
.contact-grid .itm.address .info b{ font-size: 0.9375rem; line-height: 1.5; text-align: center; font-style: normal; font-weight: normal;}
.contact-grid .gbook{ position: relative; grid-column: span 6; grid-row: span 2; padding: 5rem; background: var(--text);}
.contact-grid .gbook:after{ content: 'Leave \A message'; position: absolute; z-index: 0; right: 5rem; bottom: 5rem; font-size: 3.75rem; line-height: 1; font-weight: bold; text-align: right; color: var(--white); text-transform: uppercase; opacity: .05; white-space: pre-line;}
.contact-grid .gbook .title{ font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--white)}
.contact-grid .gbook .content{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1.875rem; padding-top: 1.875rem;}
.contact-grid .gbook input,
.contact-grid .gbook textarea{ display: block; width: 100%; border: none; border-radius: 0; border-bottom: 1px solid var(--white); font-size: 0.9375rem; line-height: 2; color: var(--white);}
.contact-grid .gbook input[type=button]{ width: 5.625rem;  border: none; background: var(--secondary); color: var(--white); text-align: center;}
.contact-grid .gbook ::-webkit-input-placeholder{ color: var(--white)}
.contact-grid .gbook .content .con{ grid-column: span 2;}
.contact-grid .gbook .content .con textarea{ height: 7.5rem;}

.contact-grid .qrcode{ grid-column: span 2; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: calc(100% + 13.28125vw); padding-right: 13.2813vw; background: var(--white);}
.contact-grid .qrcode img{ width: 6rem; height: 6rem;}
.contact-grid .qrcode span{ font-size: 0.9375rem; line-height: 2; font-weight: bold;}

.contact-grid .cover{ position: relative; grid-column: 7 / 13; height: 0; padding-bottom: calc(100% / 3);}
.contact-grid .cover .box{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: flex; flex-flow: column nowrap; align-items: flex-end; justify-content: center; text-align: right;}
.contact-grid .cover .box img{ width: auto; height: 4rem;}
.contact-grid .cover .box .cn{ margin: 1em 0;font-size: 0.9375rem; line-height: 2; font-weight: bold; color: var(--primary)}
.contact-grid .cover .box .en{ font-size: 0.75rem; line-height: 1.5; color: var(--desc)}


.column-about{ position: relative; z-index: 1; width: 100%; margin-top: -6.25vw;}

.about-grid{ display: grid;}
.about-grid .row{ width: 100%; padding: 5rem 13.28125vw; overflow: hidden;}
.about-grid .row>.title{ display: flex; justify-content: space-between; align-items: center; font-weight: bold;}
.about-grid .row>.title>.cn{ font-size: 1.25rem; line-height: 2;}
.about-grid .row>.title>.en{ font-size: 1.25rem; line-height: 1; text-align: right; text-transform: uppercase; background-image:-webkit-linear-gradient(var(--primary) 50%, var(--secondary) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

.about-grid .row-1{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.5625vw; padding-top: 0; padding-bottom: 0;}
.about-grid .row-1 .info{ grid-column: span 10; width: calc(100% + 13.28125vw); margin-left: -13.2813vw; padding: 5rem 5rem calc(5rem + 12.5vw) 13.28125vw; background: var(--white);}
.about-grid .row-1 .info .title{ font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: var(--text)}
.about-grid .row-1 .info .content{ margin: 2em 0 4em; font-size: 0.9375rem; line-height: 2; color: var(--info)}
.about-grid .row-1 .info .content p:not(:last-child){ margin-bottom: 2em;}
.about-grid .row-1 .info .number{ position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center;}
.about-grid .row-1 .info .number .itm{ display: flex; justify-content: center; align-items: center;}
.about-grid .row-1 .info .number .itm .ico{ width: 4rem; height: 4rem;}
.about-grid .row-1 .info .number .itm .ico img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.about-grid .row-1 .info .number .itm .num{ margin: 0 .5rem;font-size: 3rem; line-height: 1; font-weight: bold; color: var(--secondary);}
.about-grid .row-1 .info .number .itm .ins{ line-height: 1.5; color: var(--primary); font-weight: bold;}
.about-grid .row-1 .info .number .itm .ins i{ display: block; font-size: 0.875rem; font-style: normal;}
.about-grid .row-1 .info .number .itm .ins span{ display: block; font-size: 1.125rem;}
.about-grid .row-1 .logo{ grid-column: span 2; margin-top: 6.25vw; padding-bottom: calc(5rem + 12.5vw); display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-end; font-size: 0.9375rem; line-height: 2;}
.about-grid .row-1 .logo img{ margin-bottom: 4em;}
.about-grid .row-1 .logo b{ margin-bottom: 1em;}
.about-grid .row-1 .cover{ grid-column: span 12; width: 100vw; height: 30vw; margin-left: -13.28125vw; margin-right: -13.28125vw; margin-top: -12.5vw; background: var(--primary);}
.about-grid .row-1 .cover img{ display: block; width: 100%; height: 100%; object-fit: cover;}

.about-grid .row-2{ position: relative; display: grid; grid-gap: 2.5rem; background: url('../image/1-about-r-2.webp') left bottom no-repeat; background-size: 75% auto}
.about-grid .row-2 .content{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.875rem;}
.about-grid .row-2 .content .itm{ position: relative; top: 0; display: flex; align-items: center; gap: 1.875rem; min-height: 9.375rem; padding: 0 1.875rem; background: var(--white); cursor: pointer; transition: .35s;}
.about-grid .row-2 .content .itm .ico{ position: absolute; z-index: 0; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 9.375rem; height: 9.375rem;}
.about-grid .row-2 .content .itm .ico img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 80%; margin: auto; object-fit: cover;}
.about-grid .row-2 .content .itm .en{ font-size: 1.25rem; line-height: 1; font-weight: bold; text-transform: uppercase; color: var(--primary); transition: .35s;}
.about-grid .row-2 .content .itm .info{ display: flex; flex-flow: column nowrap; justify-content: flex-start; align-self: center;}
.about-grid .row-2 .content .itm .info .cn{ font-size: 0.9375rem; line-height: 2; color: var(--text); transition: .35s;}
.about-grid .row-2 .content .itm .info .line{ width: 0.9375rem; height: 2px; margin: .5rem 0; background: var(--secondary); transition: .35s;}
.about-grid .row-2 .content .itm .info .font{ font-size: 0.8125rem; line-height: 2; color: var(--info); transition: .35s;}
.about-grid .row-2 .content .itm:nth-child(1),
.about-grid .row-2 .content .itm:nth-child(7){ grid-column: span 5;}
.about-grid .row-2 .content .itm:nth-child(2),
.about-grid .row-2 .content .itm:nth-child(6){ grid-column: span 4;}
.about-grid .row-2 .content .itm:nth-child(3),
.about-grid .row-2 .content .itm:nth-child(4){ grid-column: span 3; grid-row: span 2;}
.about-grid .row-2 .content .itm:nth-child(5){ grid-column: span 6;}
.about-grid .row-2 .content .itm:nth-child(3) .ico,
.about-grid .row-2 .content .itm:nth-child(4) .ico{ bottom: 0; margin: auto;}

.about-grid .row-3{ padding-top: 0; padding-bottom: 0;}
.about-grid .row-3 .grid{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.875rem; width: calc(100% + 13.28125vw); padding: 5rem 0; padding-left: 13.28125vw; margin-left: -13.28125vw; background: var(--white);}
.about-grid .row-3 .grid .title{ grid-column: span 2; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-end; width: calc(100% + 13.28125vw); margin-left: -13.28125vw; font-weight: bold; background: url('../image/bico.svg') center center no-repeat; background-size: 80% auto;}
.about-grid .row-3 .grid .title .cn{ margin: 2em 0 8em; font-size: 1.25rem; line-height: 2;}
.about-grid .row-3 .grid .title .en{ font-size: 1.25rem; line-height: 1; text-align: right; text-transform: uppercase; background-image:-webkit-linear-gradient(var(--primary) 50%, var(--secondary) 50%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.about-grid .row-3 .grid .title .button{ display: flex;}
.about-grid .row-3 .grid .title .button div{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; background: var(--primary); cursor: pointer; transition: .35s;}
.about-grid .row-3 .grid .title .button div i{ font-size: 1rem; line-height: 1; color: var(--white)}
.about-grid .row-3 .grid .title .button div.next{ background:  var(--secondary);}

.about-grid .row-3 .grid .content{ grid-column: span 10; width: calc(100% + 13.28125vw); overflow: hidden;}
.about-grid .row-3 .grid .content .itm{ position: relative; width: calc((100% - 13.28125vw - 9 * 1.875rem) * .6 + 1.875rem * 5); height: 0; padding-bottom: calc(((100% - 13.28125vw - 9 * 1.875rem) * .6 + 1.875rem * 5) / 3 * 2); cursor: pointer;}
.about-grid .row-3 .grid .content .itm a{ position: absolute; top: 0; right: 0;   width: 100%; height: 100%; overflow: hidden;}
.about-grid .row-3 .grid .content .itm a:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); transition: .35s;}
.about-grid .row-3 .grid .content .itm a img{ position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
.about-grid .row-3 .grid .content .itm a .info{ position: absolute; z-index: 1; bottom: 0; right: 0; padding: .65em 2em; background: var(--white); font-size: 0.9375rem; line-height: 2; font-weight: bold; color: var(--text); opacity: 0; transition: .35s;}
.about-grid .row-3 .grid .content .itm.swiper-slide-active a:after{ opacity: 0;}
.about-grid .row-3 .grid .content .itm.swiper-slide-active a .info{ opacity: 1;}

.about-grid .row-4{  background: url('../image/1-about-r-4.webp') center top no-repeat; background-size: 100% auto;}
.about-grid .row-4 .content{ padding: 1.5rem 0;}
.about-grid .row-4 .content .itm{ padding: 1rem 0;}
.about-grid .row-4 .content .itm a{ position: relative; top: 0; display: block; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 4); transition: .35s;}
.about-grid .row-4 .content .itm a img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.about-grid .row-4 .pagination{ display: flex; justify-content: center; align-items: center;}
.about-grid .row-4 .pagination span{ width: 0.5rem; height: 0.5rem; margin: 0 .25rem; border-radius: .25rem; background: var(--secondary); opacity: 1; transition: .35s;}
.about-grid .row-4 .pagination span.swiper-pagination-bullet-active{ width: 1rem; background: var(--primary);}

.about-grid .row-5{  background: url('../image/1-about-r-5.webp') center bottom no-repeat var(--white); background-size: 100% auto;}
.about-grid .row-5 .content{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1.875rem; padding-top: 2.5rem;}
.about-grid .row-5 .content .itm{ position: relative; top: 0; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 4); overflow: hidden; transition: .35s;}
.about-grid .row-5 .content .itm img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: fill; transition: .35s;}

.about-grid .row-5 .content .itm:nth-child(2),
.about-grid .row-5 .content .itm:nth-child(4),
.about-grid .row-5 .content .itm:nth-child(5),
.about-grid .row-5 .content .itm:nth-child(7){ height: 0; padding-bottom: calc(100% / 4 * 3);}
.about-grid .row-5 .content .itm:nth-child(6),
.about-grid .row-5 .content .itm:nth-child(8){ margin-top: calc( -100% / 3 * 4 + 100% / 4 * 3);}

.project-grid{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 3.125vw 1.5625vw;}
.project-grid .slide{ position: relative; grid-column: span 3; width: 100%; overflow: hidden; background: var(--white);}
.project-grid .slide .swiper-slide{ display: grid; grid-template-columns: repeat(2,1fr);}
.project-grid .slide .swiper-slide .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2);}
.project-grid .slide .swiper-slide .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.project-grid .slide .swiper-slide .info{ display: flex; flex-flow: column nowrap; justify-content: center; padding: 1.875rem; background: url('../image/bico.svg') right 1.875rem top 1.875rem no-repeat var(--white); background-size: auto calc(100% - 3.75rem);}
.project-grid .slide .swiper-slide .info .day{ font-size: 3rem; line-height: 1; font-weight: bold; color: var(--secondary)}
.project-grid .slide .swiper-slide .info .my{ font-size: 0.8125em; line-height: 2; color: var(--desc)}
.project-grid .slide .swiper-slide .info .tit{ margin: 1em 0 3em; font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--text)}
.project-grid .slide .swiper-slide .info .details{ position: relative; font-size: 0.75rem; line-height: 2; text-transform: uppercase; align-self: flex-start; color: var(--primary); cursor: pointer;}
.project-grid .slide .swiper-slide .info .details:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary);}

.project-grid .slide .button{ position: absolute; z-index: 1; right: 1.875rem; bottom: 1.875rem; display: flex; gap: 1rem;}
.project-grid .slide .button div{ display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; background: var(--primary); cursor: pointer; transition: .35s;}
.project-grid .slide .button div i{ font-size: 1rem; line-height: 1; color: var(--white)}
.project-grid .slide .button div.next{ background:  var(--secondary);}

.project-grid .itm{ display: grid; cursor: pointer;}
.project-grid .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); overflow: hidden;}
.project-grid .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
.project-grid .itm .info{ position: relative; padding: 1em; font-size: 0.9375rem; background: var(--white); transition: .35s;}
.project-grid .itm .info .tit{ font-size: 0.9375rem; line-height: 2; color: var(--text); transition: .35s;}
.project-grid .itm .info .date{ font-size: 0.75rem; line-height: 2; color: var(--desc); transition: .35s;}
.project-grid .itm .info .more{ position: absolute; top: 0; bottom: 0; right: 0.9375rem; display: flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; margin: auto; background: var(--primary); transition: .35s;}
.project-grid .itm .info .more i{ font-size: 1rem; line-height: 1; color: var(--white)}


/* sub */
/*.pagination{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 1rem;}
.pagination span,
.pagination a{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; 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:hover{ background: var(--secondary);}*/

.column-color{ width: 100%; height: calc(5vw + 5rem); background: var(--secondary);}

.column-none{ width: 100%; height: calc(5vw + 5rem);}

.column-none-news{ width: 100%; height: calc(0.1vw + 3rem);}

.column-category{ display: flex; justify-content: center; align-items: center; width: 100%; height: auto; background: var(--white);}
.column-category a{ font-size: 0.9375rem; line-height: 2; padding: 1.5rem 2em; transition: .35s;}
.column-category a.on{ background: var(--primary); color: var(--white)}
.column-category a:hover{ background: var(--secondary); color: var(--white)}

.column-main{ display: grid; grid-gap: 6.25vw; width: 100%; max-width: 73.4375vw; padding-bottom: 6.25vw; margin: auto;}

.column-main_envi{ display: grid; grid-gap: 2.25vw; width: 100%; max-width: 73.4375vw; padding-bottom: 6.25vw; margin: auto;}

.column-page{ display: grid; grid-gap: 2.5vw; width: 100%; max-width: 73.4375vw; padding-bottom: 2.5vw; margin: auto;}

.list{ display: grid; grid-gap: 1.5625vw; padding-top: 3.125vw;}

.pro-btn{ position: fixed; z-index: 6; top: 0; bottom: 0; left: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 5vw; height: 5vw; margin: auto; background: var(--primary); cursor: pointer;}
.pro-btn i{ font-size: 2rem; line-height: 1; color: var(--white)}
.pro-btn span{ font-size: 1.125rem; line-height: 1.5; color: var(--white)}

.pro-loc{width:100%; max-width:73.4375vw; margin: 2.5vw auto; justify-content: flex-start}

#pro-catalog{ display: none;}

.pro-catalog .layui-layer-content h1{ text-align: center; color: var(--secondary)}
.pro-catalog .layui-layer-content{ display: flex; flex-flow: column nowrap; gap: 1rem; padding: 1.25vw 2.5vw;}
.pro-catalog .layui-layer-content a{ position: relative; display: flex; justify-content: space-between; align-items: center;}
.pro-catalog .layui-layer-content a span{ position: relative; z-index: 1; background: var(--white); }
.pro-catalog .layui-layer-content a:before{ content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 100%; height: 1px; margin: auto; border-bottom: 1px dashed #ccc;}
.pro-catalog .layui-layer-content a:after{ content: '点击查看'; position: relative; z-index: 1; font-size: .875rem; font-weight: normal; line-height: 1; color: var(--desc); background: var(--white); flex-shrink: 0;}

.pro-catalog .layui-layer-content .itm .anc{ position: relative; display: flex; justify-content: space-between; align-items: center;}
.pro-catalog .layui-layer-content .itm .anc:before{ content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 100%; height: 1px; margin: auto; border-bottom: 1px dashed #ccc;}
.pro-catalog .layui-layer-content .itm .anc a{ position: relative; z-index: 1; font-size: 1.5rem; font-weight: bold; color: var(--primary); background: var(--white);}
.pro-catalog .layui-layer-content .itm .anc a:before{ display: none;}
.pro-catalog .layui-layer-content .itm .anc a:after{ display: none;}
.pro-catalog .layui-layer-content .itm .anc b{ position: relative; z-index: 1; cursor: pointer;}
.pro-catalog .layui-layer-content .itm .anc b:after{ content: '展开'; position: relative; z-index: 1; font-size: .875rem; font-weight: normal; line-height: 1; color: var(--desc); background: var(--white);}
.pro-catalog .layui-layer-content .itm .anc.act~dl{ height: auto;}
.pro-catalog .layui-layer-content .itm .anc.act b:after{ content: '折叠';}

.pro-catalog .layui-layer-content .itm dl{ height: 0; overflow: hidden;}
.pro-catalog .layui-layer-content .itm dl dt{ padding: .5rem 0;}
.pro-catalog .layui-layer-content .itm dl dt a{ font-size: 1.25rem; font-weight: bold; color: var(--secondary)}
.pro-catalog .layui-layer-content .itm dl dd{ display: flex; flex-flow: column nowrap; gap: .5rem;}
.pro-catalog .layui-layer-content .itm dl dd a{ font-size: 1rem; line-height: 1.5; color: var(--text)}
.pro-catalog .layui-layer-content .itm dl dd a.on,
.pro-catalog .layui-layer-content .itm dl dd a:hover{ color: var(--primary)}
.pro-catalog .layui-layer-content .itm dl dd a.on:after,
.pro-catalog .layui-layer-content .itm dl dd a:hover:after{ color: var(--primary) }

.list-product{ grid-template-columns: repeat(3,1fr); grid-gap: 3.125vw 1.5625vw;}
.list-product .itm{ position: relative; top: 0; display: flex; flex-flow: column nowrap; cursor: pointer; transition: .35s;}
.list-product .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); overflow: hidden;  transition: .35s .15s;}
.list-product .itm .cover:before{ content: ''; position: absolute; z-index: 1; bottom: 1.5625vw; left: 1.5625vw; width: 4rem; height: 4rem; background: url('../image/ico.svg') center center no-repeat; background-size: auto 100%;}
.list-product .itm .cover:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 50%; background: var(--white); transition: .35s;}
.list-product .itm .cover img{ position: absolute; z-index: 3; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
.list-product .itm .cover img:last-child{ position: absolute; z-index: 2; filter: blur(20px); opacity: 0.8; transform: translate(10px,10px);}
.list-product .itm .info{ position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1em 0; font-size: 0.9375rem; transition: .35s;}
.list-product .itm .info b{ font-size: 0.9375rem; line-height: 2; font-weight: normal;}
.list-product .itm .info i{ font-size: 0.75rem; line-height: 1; font-style: normal; text-transform: uppercase; color: var(--secondary);}
.list-product .itm .more{ align-self: flex-start; position: relative; font-size: 0.75rem; line-height: 2; text-transform: uppercase; color: var(--primary); transition: .35s;}
.list-product .itm .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary);}

.list-album{ grid-template-columns: repeat(3,1fr); grid-gap: 3.125vw 1.5625vw;}
.list-album .itm{ position: relative; top: 0; display: flex; flex-flow: column nowrap; cursor: pointer; transition: .35s;}
.list-album .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); overflow: hidden;}
.list-album .itm .cover img{ position: absolute; z-index: 3; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
.list-album .itm .info{ padding: 1em 0; font-size: 0.9375rem; line-height: 2; text-align: center; transition: .35s;}
.list-album .itm .more{ align-self: center; position: relative; font-size: 0.75rem; line-height: 2; text-transform: uppercase; color: var(--primary); transition: .35s;}
.list-album .itm .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary); transition: .35s;}

.list-album .itms{ position: relative; top: 0; display: flex; flex-flow: column nowrap; cursor: pointer; transition: .35s;}
.list-album .itms .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); overflow: hidden;}
.list-album .itms .cover img{ position: absolute; z-index: 3; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .35s;}
.list-album .itms .info{ padding: 1em 0; font-size: 0.9375rem; line-height: 2; text-align: center; transition: .35s;}
.list-album .itms .more{ align-self: center; position: relative; font-size: 0.75rem; line-height: 2; text-transform: uppercase; color: var(--primary); transition: .35s;}
.list-album .itms .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary); transition: .35s;}

.list-honor{ grid-template-columns: repeat(4,1fr); grid-gap: 3.125vw 1.5625vw;}
.list-honor .itm{ position: relative; top: 0; display: flex; flex-flow: column nowrap; cursor: pointer; transition: .35s;}
.list-honor .itm .cover{ position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden;}
.list-honor .itm .cover img{ position: absolute; z-index: 3; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
.list-honor .itm .info{ padding: 1em 0; font-size: 0.9375rem; line-height: 2; text-align: center; transition: .35s;}
.list-honor .itm .more{ align-self: center; position: relative; font-size: 0.75rem; line-height: 2; text-transform: uppercase; color: var(--primary); text-align: center; transition: .35s;}
.list-honor .itm .more:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--primary); transition: .35s;}




.list_envi{ /*display: grid;grid-gap: 1.5625vw;*/  padding-top: 3.125vw;}

.list-envi-1{ grid-template-columns: repeat(2,1fr); grid-gap: 1.5625vw;}
.list-envi-1 .itm{ position: relative; top: 0; display: grid; grid-gap: 1rem; padding: 1.875rem; background: var(--white); font-size: 0.9375rem; line-height: 2; transition: .35s; margin-bottom: 30px;}
.list-envi-1 .itm .day{ position: absolute; z-index: 1; top: 1.875rem; right: 1.875rem; font-size: 3rem; line-height: 1; font-weight: bold; color: var(--primary); transition: .35s;}
.list-envi-1 .itm .my{ position: relative; z-index: 1; font-size: 0.8125rem; color: var(--info); transition: .35s;}
.list-envi-1 .itm .tit{ position: relative; z-index: 1; font-size: 0.9375rem; font-weight: bold; color: var(--text); transition: .35s;}
.list-envi-1 .itm .line{ position: relative; z-index: 1; width: 1em; height: 2px; background: var(--primary); transition: .35s;}
.list-envi-1 .itm .desc{ position: relative; z-index: 1; font-size: 0.8125rem; line-height: 2; color: var(--desc); -webkit-line-clamp: 3; transition: .35s;}
.list-envi-1 .itm .cover{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: multiply; transition: .35s;}




.list-news{ grid-template-columns: repeat(2,1fr); grid-gap: 1.5625vw;}
.list-news .itm{ position: relative; top: 0; display: grid; grid-gap: 1rem; padding: 1.875rem; background: var(--white); font-size: 0.9375rem; line-height: 2; transition: .35s;}
.list-news .itm .day{ position: absolute; z-index: 1; top: 1.875rem; right: 1.875rem; font-size: 3rem; line-height: 1; font-weight: bold; color: var(--primary); transition: .35s;}
.list-news .itm .my{ position: relative; z-index: 1; font-size: 0.8125rem; color: var(--info); transition: .35s;}
.list-news .itm .tit{ position: relative; z-index: 1; font-size: 0.9375rem; font-weight: bold; color: var(--text); transition: .35s;}
.list-news .itm .line{ position: relative; z-index: 1; width: 1em; height: 2px; background: var(--primary); transition: .35s;}
.list-news .itm .desc{ position: relative; z-index: 1; font-size: 0.8125rem; line-height: 2; color: var(--desc); -webkit-line-clamp: 3; transition: .35s;}
.list-news .itm .cover{ position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: multiply; transition: .35s;}

.list-join{ grid-template-columns: repeat(1,1fr); grid-gap: 1.5625vw;}
.list-join .itm{ position: relative; top: 0; display: grid; grid-gap: .5rem; padding: 1.875rem; background: var(--white); font-size: 0.9375rem; line-height: 2; transition: .35s;}
.list-join .itm .tit{ font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: var(--text);}
.list-join .itm .info{ font-size: 0.8125rem; line-height: 2; color: var(--desc);}
.list-join .itm .line{ width: 100%; height: 1px; background: #eee;}
.list-join .itm .join{ position: absolute; top: 1.875rem; right: 1.875rem; font-size: 0.9375rem; line-height: 2; color: var(--primary); cursor: pointer;}
.list-join .itm .content{ font-size: 0.8125rem; line-height: 2; color: var(--info); overflow: hidden; height: 6em;}
.list-join .itm .content.act{ height: 100%;}
.list-join .itm .toggle{ justify-self: center; display: flex; align-items: center; text-align: center; font-size: 0.9375rem; color: var(--primary); cursor: pointer;}
.list-join .itm .toggle:before{ content: '查看详细';}
.list-join .itm .toggle i{ display: inline-block;}
.list-join .itm .content.act~.toggle{ color: var(--secondary)}
.list-join .itm .content.act~.toggle:before{ content: '关闭详细';}
.list-join .itm .content.act~.toggle i{ transform: rotate(180deg);}

.join-box{ width: 100%; padding: 1rem; display: grid; background: url('../image/bico.svg') center center no-repeat var(--white); background-size: auto 80%;}
.join-box label{ position: relative; display: flex; align-items: center;}
.join-box label:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #ddd;}
.join-box label span{ padding: 0.5em 0; font-size: 0.8125rem; line-height: 2; color: var(--desc); text-align: right;}
.join-box label input,
.join-box label select{ flex-grow:1; padding: 0.5em; font-size: 0.9375rem; line-height: 2; border: none; border-radius: 0; color: var(--text)}
.join-box button{ justify-self: center; padding: 0 2em; margin-top: 1rem; background: var(--secondary); border-radius: 0; font-size: 0.8125rem; line-height: 2.5; color: var(--white)}




.location_envi{ display: flex;/* justify-content: flex-end;*/ align-items: center; width: 100%; padding:.75rem 1.875rem; background: #007ec5; font-size: 0.8125rem; line-height: 2; color:#fff}
.location_envi:before{ content: '当前位置：';}
.location_envi a:not(:last-child){ font-size: 0.8125rem; line-height: 2; color: #fff;}
.location_envi a:not(:last-child):after{ content: '>'; padding: 0 .5em;}
.location_envi a:last-child{ color: #fff}



.location{ display: flex;/* justify-content: flex-end;*/ align-items: center; width: 100%; padding:.75rem 1.875rem; background: var(--white); font-size: 0.8125rem; line-height: 2; color: var(--info)}
.location:before{ content: '当前位置：';}
.location a:not(:last-child){ font-size: 0.8125rem; line-height: 2; color: var(--info)}
.location a:not(:last-child):after{ content: '>'; padding: 0 .5em;}
.location a:last-child{ color: var(--secondary)}



.article{ display: grid; grid-gap: 1.875rem; padding: 1.875rem; background: var(--white);}
.article .info{ display: flex; font-size: 0.8125rem; line-height: 2; color: var(--info);}
.article .info-1{ font-size: 0.8125rem; line-height: 2; color: var(--info);}

.article .info span:not(:last-child){ margin-right: 4em;}
.article .title{ font-size: 1.25rem; line-height: 1.5; font-weight: bold; color: var(--text);}
.article .desc{ padding: 1.25rem; font-size: 0.8125rem; line-height: 2; color: var(--desc); background: #F8F9FC;}
.article .content{ font-size: 1.125rem; line-height: 2; color: var(--text); text-align: justify;}
.article .content p:not(:last-child){ margin-bottom: 1em;}
.article .content img{ max-width: 100%;}
.article .line{ width: 100%; height: 1px; background: #eee;}
.article .arrow{ display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; line-height: 2; color: var(--info);}
.article .arrow a{ color: var(--info)}
.article .arrow a:last-child{ text-align: right;}
.article .arrow a:first-child:before{ content: '上一篇: \A'; white-space: pre-line;}
.article .arrow a:last-child:before{ content: '下一篇: \A'; white-space: pre-line;}

.picture{ display: flex; flex-flow: column nowrap; width: 100%;}
.picture::-webkit-scrollbar{ display: none;}
.picture img{ width: 100%; height: auto;}
.picture span{ padding: 1em 0; font-size: 0.9375rem; line-height: 2; font-weight: bold; text-align: center; color: var(--text);}

.goods{ display: grid; grid-template-columns: repeat(2,1fr);}
.goods .cover{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2); overflow: hidden;}
.goods .cover img{ position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}
.goods .cover img:last-child{ position: absolute; z-index: 0; filter: blur(20px); opacity: 0.8; transform: translate(10px,10px);}
.goods .info{ display: flex; flex-flow: column nowrap; justify-content: center; gap: 2rem; padding: 2.5vw; background: url('../image/g-block.svg') right 2.5vw center no-repeat var(--primary); background-size: auto 90%;}
.goods .info .itm{ display: flex; flex-flow: column nowrap;}
.goods .info .itm em{ font-size: 0.8125rem; line-height: 2; font-style: normal; color: var(--white); opacity: 0.3;}
.goods .info .itm b{ font-size: 0.9375rem; line-height: 2; color: var(--white)}
.goods .info .itm:nth-child(1) b{ color: var(--secondary)}
.goods .info .itm:nth-child(2) b{ font-size: 1.25rem;}
.goods .info .itm .details{ display: flex; justify-content: space-between; align-items: center; width: 12rem; height: 2.5rem; padding: 0 2em; margin-top: 1em; background: var(--secondary); font-size: 0.8125rem; color: var(--white); cursor: pointer;}
.goods .info .itm .details span{ text-transform: uppercase;}
.goods .info .itm .details i{ font-size: 1rem; line-height: 1;}

.goods .content{ grid-column: span 2; overflow: hidden; display: none;}
.goods .content .caption{ padding: 1rem 2rem; font-size: 1.25rem; line-height: 2; font-weight: bold; color: var(--text); background: var(--gray);}
.goods .content .information{ padding: 1rem 2rem 2rem; font-size: 0.9375rem; line-height: 2; text-align: justify; color: var(--text);}
.goods .content .information p:not(:last-child){ margin-bottom: 1em;}
.goods .content .information img{ display: block; max-width: 100%;}


.news_link_items .news_right{
/*    margin-left: 24px;*/
    padding-top: 8px;
}
.news_right.user_case_hy{
  margin-left:0;
  padding-top: 0;
}
.news_link_items .news_right>ul>li{
/*    margin-top: 24px;*/
    width: 100%;
}
.news_link_items .news_right_r{
    width: 100%;
}
.news_link_items .news_page>ul{
    margin: 40px auto;
}

/* 招聘列表 */
.job_link_right{
    width: 100%;
    margin-top: 24px;
}
.job_link_right table{
    width: 100%;
    border-radius: 4px;
    font-size: 14px;
    color: #000;
}
.job_link_right tr{
    height: 54px;
}
.job_link_right th{
    background-color: #007ec5;
    color: #fff;
}
.job_link_right th{
    padding: 0 16px;
    text-align: center;
    border-bottom: 1px solid #E8E8E8;
    border-right:none;
}

.job_link_right td{
    padding: 0 16px;
    text-align: center;
    border: 1px solid #E8E8E8;
/*    border-right:none;*/
}

.tb_content{background-color: #fff;}
.tb_content:hover{
    background-color: #F2F7FF;
}
.tb_content:hover>.job_name>a{
    color: #dd222a;
}