html{font-size: calc(16vw / 1920 * 100);}




.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;}
::-webkit-scrollbar{ display: none;}


.logo{position: fixed;z-index: 9;top: 1vw;left: 2.5vw;}
.logo img{ display: block; width: auto; height: 7rem;}

.menu{position: fixed;z-index: 9;top: 1vw;right: 61.25vw;width: 4rem;height: 4rem;margin: auto;cursor: pointer;}
.menu i{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 1.5rem; height: 2px; margin: auto; background: white; transition: .3s;}
.menu i:first-child{ transform: translateY(-.5rem);}
.menu i:last-child{ transform: translateY(.5rem);}
.menu i:nth-child(2){ width: 1rem; transform: translateX(-.25rem);}
.menu:after{ content: '导航'; position: absolute; bottom: -1.5rem; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.125rem; line-height: 1.5; color: white;}

.menu.sub{ right: 2.5vw;}

.menu.close i:first-child{ transform: rotate(45deg);}
.menu.close i:nth-child(2){ width: 0; transform: translateX(-1.5rem);}
.menu.close i:last-child{ transform: rotate(-45deg);}

.telephone{ position: fixed; z-index: 9; bottom: 2.5vw; left: 2.5vw; display: flex; gap: 1rem; line-height: 1;}
.telephone i{ font-size: 1.5rem; color: white}
.telephone a{ font-size: 1.25rem; color: white}

.sociality{ position: fixed; z-index: 9; top: 2.5vw; right: 35vw; display: flex; gap: 1rem}
.sociality a{ display: block;}
.sociality a i{font-size: 2.5rem;line-height: 1;color: white;transition: .3s;font-weight: bold;font-style: normal;text-shadow: 2px 2px 4px #000000;}

.sociality.sub{ top: auto; right: 2.5vw; bottom: 2.5vw;}
.sociality.sub:after{ padding-left: 1rem; font-size: 0.75rem; line-height: 2; color: white;}

.cpy{ position: fixed; z-index: 9; bottom: 2.5vw; left: 2.5vw; font-size: 0.875rem; line-height: 1.5; color: white;}
.cpy br{ display: none;}

.scroll{ position: fixed; z-index: 9; right: 2.5vw; bottom: 2.5vw; font-size: 0.75em; line-height: 1.5; font-weight: bold; text-transform: uppercase;}
.scroll.cpr:after{ color: var(--primary);}

nav{ position: fixed; z-index: 8; top: 0; right: 0; display: grid; grid-template-columns: 41.25vw 58.75vw; width: 100vw; height: 100vh; transform: translateX(100vw); opacity: 0; transition: .5s;}
nav .content{grid-column: 2 / 3;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;padding: 2.5vw;background-size: auto, auto, 18.75vw;/* background: #073c97; */background: url(../images/bg.jpg) no-repeat center #073c97;}
nav .content .list{ display: grid; grid-template-columns: repeat(7,1fr); grid-gap: 2.5vw; width: 100%;}
nav .content .list dl{ position: relative; top: 10rem; width: 100%; opacity: 0; transition: all 1s .5s}
nav .content .list dl dt{ margin-bottom: 0.5rem;}
nav .content .list dl dt a{ line-height: 1.5; font-weight: 500; color: white; transition: .3s;}
nav .content .list dl dt a .num{font-size: 1.125rem;margin-bottom: 0.5rem;color: white;}
nav .content .list dl dt a .cn{font-size: 1.25rem;color: #fff;}
nav .content .list dl dt a .en{font-size: 0.75rem;text-transform: uppercase;color: white;}
nav .content .list dl dd{ display: flex; flex-flow: column nowrap;}
nav .content .list dl dd a{font-size: 1rem;line-height: 3;color: white;/* opacity: .5; */transition: .3s;}

nav.close{ transform: translateX(0); opacity: 1;}
nav.close .content .list dl{ top: 0; opacity: 1;}

.index,
.container-grid{ position: relative; width: 100vw; height: 100vh; overflow: hidden;}
.container-grid{ display: grid; grid-template-columns: 41.25% 58.75%;}

.swiper-container-vertical>.swiper-pagination-bullets{ right: auto; left: calc((2.5vw - 8px) / 2);}
.swiper-pagination-bullet{ background: var(--secondary); transition: .3s;}
.swiper-pagination-bullet.green{ background: var(--primary);}

.home{ position: relative;}
.home .slide .itm{ position: relative; width: 100%; height: 100vh; overflow:hidden;}
.home .slide .itm .slide-inner{ display: grid; grid-template-columns: 41.25% 58.75%; width: 100%; height: 100%;}
.home .slide .itm .slide-inner .font{position: relative;z-index: 2;display: flex;flex-flow: column nowrap;justify-content: center;padding: 0 10%;}
.home .slide .itm .slide-inner .font .cn{font-size: 2.7rem;line-height: 1.8;font-weight: bold;color: var(--secondary);}
.home .slide .itm .slide-inner .font .en{ font-size: 1rem; line-height: 1.5; font-weight: 500; color: white; text-transform: uppercase; margin-top: 0.5rem;}
.home .slide .itm .slide-inner .font a{ align-self: flex-start; padding: 0 2rem; margin: 4rem 0; background: var(--secondary); transition: .3s;}
.home .slide .itm .slide-inner .font a span{ font-size: 1rem; line-height: 3; color: white; text-transform: uppercase;}
.home .slide .itm .slide-inner .font a i{ font-size: 1rem; line-height: 3; font-weight: bold; color: white;}
.home .slide .itm .slide-inner .goods{ position: absolute; z-index: 1; top: 0; bottom: 0; left: calc( 41.25vw - 12.5vw ); width: 25vw; height: 25vw; margin: auto;}
.home .slide .itm .slide-inner .goods img{ position: relative; z-index: 1; width: 100%; height: 100%; margin: auto; object-fit: contain;}
.home .slide .itm .slide-inner .goods img:last-child{ position: absolute; z-index: 0; top: 0; left: 0; opacity: 0.5; filter: blur(1rem); transform: translate(1rem,1rem)}
.home .slide .itm .slide-inner .cover{ position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
.home .slide .itm .slide-inner .cover:after{ content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; width: 100%; height: 100%;  background-size: auto 4rem;}
.home .slide .itm .slide-inner .cover img{ position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: 3s;}
.home .slide .itm.swiper-slide-active .slide-inner .cover img{ transform: scale(1);}

.home .swiper-number{ position: absolute; z-index: 2; bottom: 2.5vw; left: calc( 41.25vw + 2.5vw); font-weight: 500; color: white}
.home .swiper-number b{ font-size: 1.5rem; line-height: 1;}
.home .swiper-number span{ font-size: 3rem; line-height: 1;}

.home .swiper-arrow{ position: absolute; z-index: 2; top: 0; bottom: 0; right: 2.5vw; display: flex; justify-content: center; align-items: center; width: auto; height: 1.5rem; margin: auto;}
.home .swiper-arrow .prev,
.home .swiper-arrow .next{ cursor: pointer;}
.home .swiper-arrow i{ font-size: 1.5rem; line-height: 1; color: white; transition: .3s;}
.home .swiper-arrow .line{ position: relative; width: 1.5rem; height: 1.5rem; margin: 0 .5rem;}
.home .swiper-arrow .line:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 1px; height: 1rem; margin: auto; background: white;}


.font-bg{ position: absolute; z-index: -1; top: 0; left: 0; width: 41.25vw; height: 100vh; background: url('../img/lt.svg') left top no-repeat; transition: .5s;}
.font-bg.dark{ position: absolute; z-index: -1; top: 0; left: 0; width: 41.25vw; height: 100vh; background: url('../img/lt.svg') left top no-repeat,}

.column-font{position: relative;display: flex;flex-flow: column wrap;justify-content: center;width: 100%;height: 100%;padding-left: 10%;}

.column-font .title{ line-height: 1.25; margin-bottom: 4rem; transition: .3s;}
.column-font .title .en{font-size: 3rem;font-weight: 500;color: #e3b867;}
.column-font .title .cn{ font-size: 2rem; font-weight: 900; color: white}


.column-font a.title .en{color: var(--secondary);text-transform: uppercase;}

.column-font .slogan{ line-height: 1.5;}
.column-font .slogan .cn{ font-size: 2rem; font-weight: 900; color: var(--secondary)}
.column-font .slogan .en{font-size: 1rem;color: white;text-transform: uppercase;}

.about .column-font{ padding-right: 6.25vw;}
.about .column-font .content{ display: grid; grid-gap: 2rem;}
.about .column-font .content .cn{font-size: 1rem;line-height: 2.5;color: white;}
.about .column-font .content .details{ font-size: 1rem; line-height: 1.5; font-weight: 500; text-transform: uppercase; color: var(--secondary); transition: .3s;}
.about .column-font .content .en{ font-size: 0.75rem; line-height: 1.5; color: white; opacity: 0.5;}
.about .column-font .number{ display: flex; justify-content: space-between; align-items: center; margin-top: 3rem;}
.about .column-font .number .itm .ins{ font-size: 0.875rem; line-height: 1; color: white}
.about .column-font .number .itm .num{ line-height: 1.25;}
.about .column-font .number .itm .num b{ font-size: 2rem; color: var(--secondary)}
.about .column-font .number .itm .num span{ font-size: 1rem; font-weight: bold; color: white}

.product .column-font .pic{width: 20vw;margin-top: 3rem;margin-left: -6.25vw;}
.product .column-font .pic img{ width: 100%; height: auto;}
.product .column-font .after{position: absolute;z-index: 0;right: 2.5vw;bottom: 2.5vw;width: 25vw;}
.product .column-font .after img{ width: 100%; height: auto;}

.product-cate{position: absolute;top: 0;right: 0;bottom: 0;display: flex;flex-flow: column nowrap;justify-content: center;width: 100%;height: 30vw;margin: auto;padding-left: 10%;}
.product-cate .itm{display: flex;align-items: center;padding: 2rem 0;transition: .3s;cursor: pointer;}
.product-cate .itm .ico{width: 0;height: 2rem;overflow: hidden;transition: .3s;}
.product-cate .itm .ico img{width: 100%;height: 100%;object-fit: contain;background: #fff;}
.product-cate .itm .font{ line-height: 1.5;}
.product-cate .itm .font .cn{font-size: 1.5rem;color: var(--secondary);transition: .3s;}
.product-cate .itm .font .en{font-size: 1.2rem;color: white;transition: .3s;}
.product-cate .itm.swiper-slide-thumb-active{ background: var(--secondary);}
.product-cate .itm.swiper-slide-thumb-active .ico{ width: 4rem; padding: 0 1rem;}
.product-cate .itm.swiper-slide-thumb-active .font .cn{color: white;}

.area .column-font{ background-size: auto, auto, cover;}
.area .column-font .slogan .cn{color: #e2b768;}
.news .column-font{ background: url('../img/news.webp') center bottom no-repeat; background-size: 30vw;}

.contact .column-font .copyright{ position: absolute; top: 0; right: 2.5vw; bottom: 0; display: flex; justify-content: center; align-items: center; width: 1.3125rem; height: 1.3125rem; margin: auto;}
.contact .column-font .copyright .con{ white-space:nowrap; transform: rotate(90deg); font-size: 0.875rem; line-height: 1.5; color: white}
.contact .column-font .copyright .con br{ display: none;}

.contact .content dl{ display: grid; grid-gap: 1.5rem;}
.contact .content dl dt{ color: white}
.contact .content dl dt .cn{ font-size: 1.5rem; line-height: 1.25;}
.contact .content dl dt .en{ font-size: 0.75rem; line-height: 1.5;}
.contact .content dl dd{ display: flex; color: white}
.contact .content dl dd i{ font-size: 1.5rem; line-height: 1; color: white; margin-right: 0.5rem;}
.contact .content dl dd .font{ line-height: 1.5;}
.contact .content dl dd .font b{ font-size: 1.3rem;}
.contact .content dl dd .font .cn{ font-size: 1rem; font-weight: bold; color: var(--secondary)}
.contact .content dl dd .font .en{ font-size: 0.75rem;}
.contact .content dl dd .itm{ display: flex; flex-flow: column nowrap; align-items: center; margin-right: 1.5rem;}
.contact .content dl dd .itm img{ width: 7.5rem; height: 7.5rem;}
.contact .content dl dd .itm span{ font-size: 1rem; line-height: 1.5;}


.column-main{ position: relative; width: 100%; height: 100%; overflow: hidden;}
.column-main .background{ position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 100%;}
.column-main .background img{ display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); transition: 10s;}

.index section.swiper-slide-active .column-main .background img{ transform: scale(1);}

.about .column-main .video{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 12.5vw; height: calc(12.5vw / 16 * 9); margin: auto; background: var(--primary); cursor: pointer;}
.about .column-main .video i{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; width: 3rem; height: 3rem; margin: auto; background-size: cover; transition: .3s;}
.about .column-main .video:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: var(--primary); opacity: 0.7; transition: .3s;}
.about .column-main .video img{ position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover;}

.product .column-main .content{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.product .column-main .content .itm{ display: flex; justify-content: center; align-items: center;}
.product .column-main .content .itm .thumb{position: relative;width: 35vw;height: 35vw;padding: 2rem;}
.product .column-main .content .itm .thumb img{ position: relative; z-index: 1; width: 100%; height: 100%; margin: auto; object-fit: contain;}
.product .column-main .content .itm .thumb img:last-child{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: calc( 100% - 4rem); height: calc( 100% - 4rem); margin: auto; opacity: .5; filter: blur(.5rem); transform: translate(.5rem,.5rem);}
.product .column-main .content .itm .font{display: grid;width: 20vw;margin-right: 6.25vw;margin-left: 0vw;}
.product .column-main .content .itm .font .lo{ width: auto; height: 4rem; margin-bottom: 2rem; justify-self: end;}
.product .column-main .content .itm .font .lo img{ width: auto; height: 100%;}
.product .column-main .content .itm .font .cap{ padding-bottom: 0.5rem; line-height: 1.5; color: white}
.product .column-main .content .itm .font .cap .cn{font-size: 2rem;}
.product .column-main .content .itm .font .cap .en{ font-size: 0.875rem;}
.product .column-main .content .itm .font .attr{display: flex;flex-flow: column nowrap;padding: 2rem 0;border-top: 1px solid rgba(255,255,255,.2);border-bottom: 1px solid rgba(255,255,255,.2);font-size: 1.2rem;line-height: 1.5;color: white;}
.product .column-main .content .itm .font .price{ margin-top: 2rem; font-size: 1.125rem; line-height: 1.5; font-weight: 500; color: var(--secondary)}
.product .column-main .content .itm .font .price:before{ content: '点击查看此系列产品 >> ';}

.area-list{ display: grid; grid-template-rows: repeat(3,1fr); width: 100%; height: 100%;}
.area-list .itm{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0 2.5vw;}
.area-list .itm .content{ display: grid; grid-template-columns: 4rem auto 12.5vw; grid-gap: 2rem; width: 100%;}
.area-list .itm .content .ico{ width: 4rem; height: 4rem;}
.area-list .itm .content .ico img{ display: block; width: 100%; height: 100%; object-fit: contain;}
.area-list .itm .content .font{ line-height: 1.5; color: white; text-shadow: .25rem .25rem .25rem rgba(0,0,0,.3);}
.area-list .itm .content .font .cn{ font-size: 1.125rem;}
.area-list .itm .content .font .en{ font-size: .625rem;}
.area-list .itm .content .video{ position: relative; width: 12.5vw; height: calc(12.5vw / 16 * 9); cursor: pointer; transition: .3s;}
.area-list .itm .content .video i{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; width: 3rem; height: 3rem; margin: auto;  background-size: cover;}
.area-list .itm .content .video:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; transition: .3s;}
.area-list .itm .content .video img{ position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover;}
.area-list .itm .cover{ position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 100%;}
/* .area-list .itm .cover:before{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: var(--primary); opacity: 0.8; transition: .3s;} */
.area-list .itm .cover img{ display: block; width: 100%; height: 100%; object-fit: cover;}

.news .column-main{ display: grid; grid-template-columns: repeat(2,1fr);}
.news .column-main .news-cover{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0 1.25vw 0 2.5vw;}
.news .column-main .news-cover:after{ content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: white; opacity: 0.1;}
.news .column-main .news-cover .itm{ position: relative; top: 0; display: grid; grid-gap: .5rem; line-height: 1.5; transition: .3s;}
.news .column-main .news-cover .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.news .column-main .news-cover .itm .thumb img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transition: .3s;}
.news .column-main .news-cover .itm .date{ font-size: 1.5rem; font-weight: 500; color: var(--secondary); transition: .3s;}
.news .column-main .news-cover .itm .tit{ font-size: 1.125rem; color: white; transition: .3s;}
.news .column-main .news-cover .itm .desc{ font-size: .875rem; color: white; opacity: 0.5; transition: .3s;}
.news .column-main .news-cover .itm .details{ font-size: 1rem; line-height: 2; color: var(--secondary); text-transform: uppercase; transition: .3s;}
.news .column-main .news-list{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 100%;}
.news .column-main .news-list .itm{ position: relative; top: 0; display: grid; grid-gap: .5rem; padding: 1.25vw 2.5vw 1.25vw 1.25vw; line-height: 1.5; transition: .3s;}
.news .column-main .news-list .itm:not(:last-child):after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: white; opacity: 0.1;}
.news .column-main .news-list .itm .date{ font-size: 1.5rem; font-weight: 500; color: var(--secondary); transition: .3s;}
.news .column-main .news-list .itm .tit{ font-size: 1.125rem; color: white; transition: .3s;}
.news .column-main .news-list .itm .desc{ font-size: .875rem; color: white; opacity: 0.5; transition: .3s;}



#map{ width: 100%; height: 100%;}

/* sub */
.container-list{ display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: url('../img/lt.svg') left top no-repeat,;}
.container-list .column{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 2.5vw; width: 100%; height: 100%; padding: 0 6.25vw;}
.container-list .column .column-l{ grid-column: span 4; display: flex; flex-flow: column nowrap; justify-content: space-between; width: 100%; height: 100%; padding: 10vw 0;}
.container-list .column .column-m{ grid-column: span 8; display: grid; align-items: center; width: 100%; height: 100%; overflow-y: auto; }

.container-list .column .col-news{ position: relative; overflow: visible;}
.container-list .column .col-news:before,
.container-list .column .col-news:after{ content: ''; position: absolute; z-index: 0; top: 0; width: 1px; height: 100%; background: white; opacity: .1;}
.container-list .column .col-news:before{ left: -1.25vw;}
.container-list .column .col-news:after{ left: 50%;}

.col-title{ line-height: 1.25;}
.col-title .en{ font-size: 3rem; font-weight: 500; color: var(--secondary);}
.col-title .cn{ font-size: 2rem; font-weight: 900; color: white;}
.col-slogan{ display: grid; grid-gap: .5rem; line-height: 1.5;}
.col-slogan .cn{ font-size: 1.5rem; color: var(--secondary);}
.col-slogan .en{ font-size: 1rem; color: white}
.col-page{ display: flex; flex-flow: row nowrap; align-items: center;}
.col-page span,
.col-page a{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; margin: 0 .5rem; background: white; font-size: 1rem; line-height: 1.5; color: var(--primary); font-family: 'neko';}
.col-page span{background: var(--primary);}
.col-page span.prev,
.col-page span.next{ background: var(--desc);}
.col-page a.active{ background: var(--secondary); color: white;}

.list-news{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw;}
.list-news .itm{ display: grid; grid-gap: 0.5rem;}
.list-news .itm .date{ display: grid; color: var(--secondary);}
.list-news .itm .date b{ font-size: 1.5rem;}
.list-news .itm .date i{ font-size: 0.75rem; font-weight: bold; font-style: normal;}
.list-news .itm .tit{ font-size: 1.25rem; color: white;}
.list-news .itm .desc{ font-size: 0.875rem; color: var(--gray);}
.list-news .itm .details{ margin-top: 0.5rem; font-size: 1rem; color: var(--secondary);}

.list-album{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw; width: 100%; padding: 5vw 0;}
.list-album .itm{ position: relative; width: 100%; height: 0; padding-bottom: 75%; border: .25rem solid white; background: #f7f8fa;}
.list-album .itm img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: contain;}

.magnify-stage { top: 0; right: 0; bottom: 0; left: 0; border-width: 0;}

.container-col{ display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: url('../img/lt.svg') left top no-repeat,;}

.contact-col{ position: relative; display: grid; grid-template-columns: repeat(12,1fr); align-items: center; grid-gap: 2.5vw; width: 100%; height: 30vw; padding: 0 6.25vw;}
.contact-col .title{ position: relative; z-index: 1; grid-column: span 3; line-height: 1.25; color: white;}
.contact-col .title .en{ font-size: 3rem; font-weight: 500;}
.contact-col .title .cn{ font-size: 2rem; font-weight: 900;}
.contact-col .content{ position: relative; z-index: 1; grid-column: 9 / 13; display: flex; justify-content: space-between;}

.list-contact{ display: grid; grid-gap: 1.5rem;}
.list-contact dt{ color: white}
.list-contact dt .cn{ font-size: 2rem; line-height: 1.25; color: var(--secondary);}
.list-contact dt .en{ font-size: 0.875rem; line-height: 1.5;}
.list-contact dd{ display: flex; color: white}
.list-contact dd i{ font-size: 1.5rem; line-height: 1; color: white; margin-right: 0.5rem;}
.list-contact dd .font{ line-height: 1.5;}
.list-contact dd .font b{ font-size: 1.5rem;}
.list-contact dd .font .cn{ font-size: 1.25rem; font-weight: bold; color: var(--secondary)}
.list-contact dd .font .en{ font-size: 1rem;}
.list-contact dd .itm{ display: flex; flex-flow: column nowrap; align-items: center; margin-right: 1.5rem;}
.list-contact dd .itm img{ width: 7.5rem; height: 7.5rem;}
.list-contact dd .itm span{ font-size: 1rem; line-height: 1.5;}

.list-qrcode{ display: flex; flex-flow: column nowrap; justify-content: space-between;}
.list-qrcode .itm{ display: flex; flex-flow: column nowrap; align-items: center; gap: .5rem;}
.list-qrcode .itm img{ width: 6.25rem; height: 6.25rem;}
.list-qrcode .itm span{ font-size: .875rem; line-height: 1.5; color: white;}

.openmap{ position: absolute; top: 0; right: -6.25vw; bottom: 0; display: flex; justify-content: center; align-items: center; width: 6.25vw; cursor: pointer;}
.openmap .font{ display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem;}
.openmap .font span{ display: block; font-size: 1.25rem; line-height: 1.5; color: white; white-space: nowrap; transform: rotate(90deg);}
.openmap i{ font-size: 2rem; line-height: 1; color: white;}

.contact-col .cover{ position: absolute; z-index: 0; top: 0; left: -6.25vw; grid-column: 1 / 10; width: calc( 100% + 6.25vw ); height: 30vw; background: #000;}
.contact-col .cover:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: black; opacity: 0.5;}
.contact-col .cover img{ position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover;}

.factory-col{ position: absolute; z-index: 1; bottom: 6.25vw; display: grid; grid-template-columns: repeat(12,1fr); align-items: center; grid-gap: 2.5vw; width: 100%; padding: 0 6.25vw;}
.factory-col~.background{ position: absolute; z-index: 0; top: 0; right: 0; width: 100vw; height: 40vw;}
.factory-col~.background img{ width: 100%; height: 100%; object-fit: cover;}

.factory-col .slogan{ position: absolute; top: 0; left: 6.25vw; grid-column: span 4; line-height: 1.5; color: white}
.factory-col .slogan .cn{ font-size: 1.5rem;}
.factory-col .slogan .en{ font-size: 1rem;}
.factory-col .title{ grid-column: 9 / 13; display: flex; flex-flow: column nowrap; align-items: flex-end; line-height: 1.25;}
.factory-col .title .en{ font-size: 3rem; font-weight: 500; color: var(--secondary);}
.factory-col .title .cn{ font-size: 2rem; font-weight: 900; color: white;}
.factory-col .list-factory-s{ grid-column: 1 / 9; align-self: end; width: 100%;}
.factory-col .list-factory-s .itm{ display: flex; justify-content: center; align-items: center;}
.factory-col .list-factory-s .itm a{ position: relative; width: 100%; height: 0; padding-bottom: 75%; border: 4px solid white;}
.factory-col .list-factory-s .itm a img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.factory-col .list-factory-b{ grid-column: 9 / 13; width: 100%;}
.factory-col .list-factory-b .itm{ position: relative; width: 100%; height: 0; padding-bottom: 75%; border: 4px solid white;}
.factory-col .list-factory-b .itm img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.factory-col .swiper-button{ position: absolute; z-index: 2; top: 0; bottom: 0; left: 6.25vw; display: flex; gap: 1.5rem; height: 2rem; margin: auto;}
.factory-col .swiper-button .prev,
.factory-col .swiper-button .next{ display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border: 1px solid white;}
.factory-col .swiper-button .prev i,
.factory-col .swiper-button .next i{ font-size: 1rem; line-height: 1; color: white;}

.equip-col{ position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12,1fr); align-items: center; grid-gap: 2.5vw; width: 100%; padding: 0 6.25vw;}
.equip-col~.background{ position: absolute; z-index: 0; top: 0; left: 0; width: 48.75vw; height: 100%;}
.equip-col~.background img{ width: 100%; height: 100%; object-fit: cover;}

.equip-col .slogan{ align-self: start; grid-column: span 6;  line-height: 1.5; color: white}
.equip-col .slogan .cn{ font-size: 1.5rem;}
.equip-col .slogan .en{ font-size: 1rem;}

.equip-col .title{ grid-column: span 6; display: flex; flex-flow: column nowrap; line-height: 1.25; color: white;}
.equip-col .title .en{ font-size: 3rem; font-weight: 500;}
.equip-col .title .cn{ font-size: 2rem; font-weight: 900;}

.equip-col .content{ grid-column: 7 / 13; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.equip-col .content .itm{ position: relative; width: 100%; height: 0; padding-bottom: 75%; border: 4px solid white;}
.equip-col .content .itm img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.equip-col .content .itm:nth-child(2){ grid-column: span 2; grid-row: span 2; height: 100%; padding-bottom: 0;}

.base-col{ position: relative; z-index: 1; display: grid; align-items: center; grid-gap: 2.5vw; width: 100%; padding: 0 6.25vw;}
.base-col~.background{ position: absolute; z-index: 0; top: 0; left: 0; width: 100vw; height: 100%;}
.base-col~.background::before{ content: ''; z-index: 2; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: url('../img/lt.svg') left top no-repeat;}
.base-col~.background::after{ content: ''; z-index: 1; position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
.base-col~.background img{ position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover;}

.base-col .title{ display: flex; flex-flow: column nowrap; line-height: 1.25; color: white;}
.base-col .title .en{ font-size: 3rem; font-weight: 500; color: var(--secondary);}
.base-col .title .cn{ font-size: 2rem; font-weight: 900;}

.base-col .list-base{ left: -6.25vw; width: calc(100% + 12.5vw);}
.base-col .list-base .itm{ display: flex; justify-content: center; align-items: center;}
.base-col .list-base .itm a{ position: relative; width: 100%; height: 0; padding-bottom: 75%; border: 4px solid white;}
.base-col .list-base .itm a img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.base-col .swiper-scrollbar{ position: absolute; z-index: 2; bottom: 1.5rem; left: 6.25vw; width: 50%; height: 1px; background: white;}
.base-col .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;}

.base-col .slogan{ line-height: 1.5; text-align: right; color: white}
.base-col .slogan .cn{ font-size: 1.5rem;}
.base-col .slogan .en{ font-size: 1rem;}

.lbg{ content: ''; position: absolute; z-index: 4; top: 0; left: 0; display: block; width: 33.75vw; height: 20vw; background: url('../img/lt.svg') left top no-repeat; background-size: cover;}

header{ position: fixed; z-index: 9; top: 0; right: 0; width: 100vw; height: calc( 4rem + 5vw );}
header .logo{ -webkit-mask: url('../img/logo.svg') center center no-repeat; -webkit-mask-size: auto 100%; background: var(--primary);}
header .logo img{ opacity: 0;}
header .menu i{ background: var(--primary);}

.container-product{ width: 100%;}

.pro-tit{ position: fixed; z-index: 2; top: 0; right: 0; width: 100vw; height: calc( 4rem + 5vw ); display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; line-height: 1.25; background: white; box-shadow: 0 0 2rem rgba(0, 0, 0, .2);}
.pro-tit .en{ font-size: 3rem; font-weight: 500; color: var(--secondary);}
.pro-tit .cn{ font-size: 2rem; font-weight: 900; color: var(--primary);}
.pro-cate{ display: flex; justify-content: center; align-items: flex-start; gap: 2.5vw; padding-top: calc( 4rem + 7.5vw ); padding-bottom: 2.5vw; }
.pro-cate .itm{ display: grid; grid-template-columns: 1fr auto; grid-gap: 1rem 0.25rem;}
.pro-cate .itm .ico{ grid-column: span 2; width: 100%; height: 0; padding-bottom: 0; -webkit-mask: url('../img/pc-i.svg') center center no-repeat; background: var(--secondary);}
.pro-cate .itm .cn{ width: 1.25rem; height: 10rem;}
.pro-cate .itm .cn .font{ font-size: 1rem; line-height: 1.25; color: white;}
.pro-cate .itm .en{ width: 1.125rem; height: 1.125rem;}
.pro-cate .itm .en .font{ font-size: 0.75rem; line-height: 1.5; white-space: nowrap; color: var(--secondary); transform: rotate(90deg);}
.pro-cate .itm.on .ico{ padding-bottom: 100%;}

.list-product{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2.5vw; width: 100%; padding: 5vw 6.25vw;}
.list-product .itm{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1rem;}
.list-product .itm .thumb{ position: relative; grid-column: span 2; width: 100%; height: 0; padding-bottom: 100%; background: #f7f8fa;}
.list-product .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 90%; height: 90%; margin: auto; object-fit: contain;}
.list-product .itm .cap{ font-size: 1rem; line-height: 1.5;}
.list-product .itm .price{ justify-self: end; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--secondary);}
.list-product .itm .line{ grid-column: span 2; width: 100%; height: 1px; background: var(--line);}
.list-product .itm .attr{ grid-column: span 2; display: flex; justify-content: space-between; align-items: center;}
.list-product .itm .attr span{ font-size: 0.875rem; line-height: 1.5; color: var(--desc)}

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

footer{ display: flex; justify-content: space-between; align-items: center; padding: 1.25vw 6.25vw; background: var(--primary);}
footer .cpy{ position: relative; bottom: auto; left: auto;}
footer .sociality.sub{ position: relative; right: auto; bottom: auto;}

.container-about{ width: 100%; min-height: 100vh; background: url('../img/lt.svg') left top no-repeat, url('../img/about.webp') center top no-repeat; background-size: auto, auto, cover; background-attachment: fixed;}

.about-col{ display: grid; grid-gap: 5vw; width: 100%; padding: calc(4rem + 5vw) 6.25vw calc(1.5rem + 5vw);}

.about-col .profiles{ display: grid; grid-gap: 2.5vw;}
.about-col .title{ display: flex; justify-content: space-between; align-items: flex-start; }
.about-col .title .cap{ display: flex; flex-flow: column nowrap; line-height: 1.25; color: white;}
.about-col .title .cap .en{ font-size: 3rem; font-weight: 500; color: var(--secondary);}
.about-col .title .cap .cn{ font-size: 2rem; font-weight: 900;}
.about-col .title .slogan{ line-height: 1.5; text-align: right; color: white}
.about-col .title .slogan .cn{ font-size: 1.5rem;}
.about-col .title .slogan .en{ font-size: 1rem;}
.about-col .profiles .profiles-con{ display: grid; grid-template-columns: 7fr 5fr; grid-gap: 2.5vw;}
.about-col .profiles .profiles-con .info{ color: white;}
.about-col .profiles .profiles-con .info h1{ margin-bottom: 2rem; font-size: 2rem;}
.about-col .profiles .profiles-con .info p{ font-size: 1.25rem; line-height: 2; text-align: justify;}
.about-col .profiles .profiles-con .info p:not(:last-child){ margin-bottom: .5rem;}
.about-col .profiles .profiles-con .other{/* display: grid; *//* grid-gap: 2.5vw; */width: 100%;/* align-self: start; */}
.about-col .profiles .profiles-con .other .video{position: relative;width: 100%;height: 100%;/* padding-bottom: calc(100% / 16 * 9); */}
.about-col .profiles .profiles-con .other .video i{position: absolute;z-index: 2;top: 0;right: 0;bottom: 0;left: 0;width: 4rem;height: 4rem;margin: auto;/* background: url('../img/play.svg') center center no-repeat; */background-size: cover;transition: .3s;}
.about-col .profiles .profiles-con .other .video:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: var(--primary); opacity: 0.7; transition: .3s;}
.about-col .profiles .profiles-con .other .video img{position: absolute;z-index: 0;top: 0;right: 0;width: 100%;/* height: 100%; */object-fit: cover;}

.about-col .profiles .profiles-con .other .number{ display: flex; justify-content: space-between; align-items: center;}
.about-col .profiles .profiles-con .other .number .itm .ins{ font-size: 0.875rem; line-height: 1; color: white}
.about-col .profiles .profiles-con .other .number .itm .num{ line-height: 1.25;}
.about-col .profiles .profiles-con .other .number .itm .num b{ font-size: 2rem; color: var(--secondary)}
.about-col .profiles .profiles-con .other .number .itm .num span{ font-size: 1rem; font-weight: bold; color: white}

.about-col .area{ position: relative; left: -6.25vw; display: grid; grid-template-columns: repeat(3,1fr); width: calc(100% + 12.5vw);}
.about-col .area .itm{ position: relative; width: 100%;}
.about-col .area .itm .info{ position: absolute; z-index: 1; top: 0; right: 0; display: grid; grid-template-columns: 1fr 5fr; grid-gap: 1.25vw; align-content: center; width: 100%; height: 100%; padding: 2.5vw;}
.about-col .area .itm .info .ico{ display: flex; justify-content: center; align-items: center;}
.about-col .area .itm .info .font{ display: grid; grid-gap: .5rem; color: white;}
.about-col .area .itm .info .font .cap{ font-size: 1.5rem; font-weight: bold;}
.about-col .area .itm .info .font .desc{ font-size: 1rem; line-height: 1.75;}
/* .about-col .area .itm:after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; transition: .3s;} */
.about-col .area .itm .cover{ position: relative; z-index: 0; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9);}
.about-col .area .itm .cover img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}

.culture{ display: grid; grid-gap: 2.5vw;}
.culture .content{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.culture .content .itm{ display: grid; grid-gap: .25rem; align-self: start;}
.culture .content .itm .cap{ margin-bottom: 0.5rem; font-size: 1.5rem; line-height: 1.5; color: var(--secondary);}
.culture .content .itm .cn{ font-size: 1.25rem; line-height: 1.5; color: white;}
.culture .content .itm .en{ font-size: 1rem; line-height: 1.5; color: white;}

.container-goods{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: url('../img/lt.svg') left top no-repeat;}

.goods{ display: flex; gap: 2.5vw; align-items: center; width: 100%; padding: 0 6.25vw;}

.goods .cover{ position: relative; flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 30vw; height: 30vw; background: white;}
.goods .cover .swiper-slide{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.goods .cover .swiper-slide img{ width: 90%; height: 90%; margin: auto; object-fit: contain;}
.goods .cover .button{ position: absolute; z-index: 1; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; margin: auto; cursor: pointer;}
.goods .cover .button i{ font-size: 4rem; line-height: 1; color: var(--primary);}
.goods .cover .prev{ left: 0; }
.goods .cover .next{ right: 0; }

.goods .content{ display: grid; align-content: start; grid-gap: 2.5vw; width: 100%; height: 30vw; overflow-y: scroll;}
.goods .content .info{ position: relative; display: grid; grid-gap: 1.5rem; width: 100%; padding-top: 1.5rem; color: white;}
.goods .content .info .brand{ position: absolute; top: 0; right: 0; display: flex; height: 4rem;}
.goods .content .info .brand img{ width: auto; height: 4rem;}
.goods .content .info .cap{ line-height: 1.25;}
.goods .content .info .cap .cn{ font-size: 1.5rem; font-weight: bold;}
.goods .content .info .cap .en{ font-size: 1rem;}
.goods .content .info .attr{ display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2);}
.goods .content .info .attr span{ font-size: 1rem; line-height: 2;}
.goods .content .info .price{ font-size: 1.75rem; line-height: 1.5; font-weight: 500; color: var(--secondary)}
.goods .content .info .price:before{ content: 'Â¥ ';}
.goods .content .details{ display: grid; align-content: start; grid-gap: 1rem; width: 100%;}
.goods .content .details .cap{ border-bottom: 1px solid rgba(255,255,255,.2); font-size: 1.5rem; line-height: 2; font-weight: bold; color: white;}
.goods .content .details .con img{ display: inline-block; max-width: 100%;}

.goods .related{ flex-shrink: 0; width: 20vw; height: 30vw; overflow-y: scroll;}
.goods .related .tit{ font-size: 1.5rem; font-weight: bold; line-height: 2; color: var(--secondary);}
.goods .related .con{ display: grid; grid-gap: 1.25vw; padding-top: 0.6125vw;}
.goods .related .con .itm{ display: grid; grid-template-columns: 1fr 1.5fr; grid-gap: 1rem; color: white;}
.goods .related .con .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%; background: #f7f8fa;}
.goods .related .con .itm .thumb img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 90%; height: 90%; margin: auto; object-fit: contain;}
.goods .related .con .itm .cap{ padding: 0.5rem 0; font-size: 1rem; font-weight: bold; line-height: 1.5;}
.goods .related .con .itm .attr{ grid-column: span 2; display: flex; flex-flow: column nowrap; padding: .25rem 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2);}
.goods .related .con .itm .attr span{ font-size: 0.75rem; line-height: 1.5;}
.goods .related .con .itm .price{ justify-self: end; padding: 0.5rem 0; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--secondary);}

.container-article{ width: 100%; min-height: 100vh; padding: calc(4rem + 5vw) 6.25vw calc(1.5rem + 5vw); background: url('../img/lt.svg') left top no-repeat,;}

.article{ width: 100%; height: auto; padding: 2.5vw; box-shadow: 0 0 1rem rgba(0,0,0,.02); background: white;}

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


.phone-btn{ position: fixed; z-index: 6; bottom: 10%; right: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: .5rem; display: none;}
.phone-btn a{ display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: 4px 0 0 4px; background: var(--secondary);}
.phone-btn a i{ font-size: 2rem; line-height: 1; color: white;}