@charset "utf-8";
/* CSS Document */

:root {
    --header-top-height: 0.32rem;
    --header-menu-height: 0.72rem;
    --header-bottom-height: 0.32rem;
    --header-logo-width: 1.32rem;
    --header-gap-width: 0.4rem;
    --padding-outer: 0.8rem;
    --pages-top-height: 0.8rem;
    --pages-bottom-height: 2rem;
    --menu-max-width: calc(100% - calc((var(--padding-outer) + var(--header-logo-width) + var(--header-gap-width)) * 2));
    --outer-max-width: calc(100% - calc((var(--padding-outer)) * 2));
    --fixed-menu-width: 3.6rem;
}



/*头部-占位*/
.header-top-divider {background: #fff; height: var(--header-top-height);}
.header-menu-divider {background: #fff; height: var(--header-menu-height);}
.header-bottom-divider {background: #fff; height: var(--header-bottom-height);}




/*头部*/
.header {width: 100%; height: var(--header-menu-height); box-sizing: border-box; padding: 0 var(--padding-outer); background: #f2f2f2; display: flex; align-items: center; gap: var(--header-gap-width); position: absolute; left: 0; top: var(--header-top-height); z-index: 999;}
.header.fixed {position: fixed; top: 0;}
.header-logo {font-size: 0;}
.header-logo a {display: block;}
.header-logo img {width: var(--header-logo-width);}
.header-menu {display: flex; align-items: center; flex: 1; min-width: 0;}
.header-menu .item {min-width: 1.5rem; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 0.25rem; height: var(--header-menu-height); font-size: 0.18rem; font-weight: 550; transition: opacity 0.3s;}
.header-menu .group .name .item {color: #333333;}
.header-menu .group .name .item:hover {opacity: 0.7;}
.header-menu .group .name .item.on {background: #e6e6e6; opacity: 1;}
.header-menu .group .subs {position: absolute; left: 0; top: 100%; width: 100%; height: 0; opacity: 0; background: rgba(242, 242, 242, 0.5); display: flex; align-items: center; box-sizing: border-box; padding: 0 var(--padding-outer) 0 calc(var(--padding-outer) + var(--header-logo-width) + var(--header-gap-width)); overflow: hidden; transition: opacity 0.3s, height 0.3s;}
.header-menu .group .subs .item {color: #888888;}
.header-menu .group .subs .item:hover {color: #333333;}
.header-menu .group .subs .item.on {background: rgba(230, 230, 230, 0.5); color: #333333;}
.header-menu .group:hover .subs {height: var(--header-menu-height); opacity: 1; overflow: visible;}

.header-menu .group .subs .txt {position: absolute; top: 100%; left: 0; width: 100%; box-sizing: border-box; display: none; background: rgba(244, 244, 244, 0.9);}
.header-menu .group .subs .txt .li {width: 3rem; text-align: center; font-size: 0.16rem; line-height: 0.4rem;}
.header-menu .group .subs .txt .li:first-child {padding-top: 0.1rem;}
.header-menu .group .subs .txt .li:last-child {padding-bottom: 0.1rem;}
.header-menu .group .subs .txt .li {display: flex; justify-content: center;}
.header-menu .group .subs .txt a {color: #999; display: block;}
.header-menu .group .subs .txt a:hover {color: #333;}
.header-menu .group .subs .txt a.on {color: #333;}
.header-menu .group .subs .box:hover .txt {
    display: block;
    animation-name: headerMenuTree;
    animation-duration: 0.3s;
}
@keyframes headerMenuTree {
    from { transform: translateY(-0.1rem); opacity: 0;}
    to { transform: translateY(0); opacity: 1;}
}



.header-button {display: none; width: 0.2rem; font-size: 0; cursor: pointer;}
.header-button img {width: 100%;}


/*小屏菜单*/
.header-menu-fixed {width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 9999;}
.header-menu-fixed .mask {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute;}
.header-menu-fixed .wrap {width: 100%; height: 100%; display: flex; justify-content: flex-end;}
.header-menu-fixed .main {width: var(--fixed-menu-width); height: 100%; position: relative; z-index: 20; background: #ffffff;}
.header-menu-fixed .close {display: flex; height: var(--header-menu-height); justify-content: flex-end; align-items: center; padding: 0 var(--padding-outer);}
.header-menu-fixed .close a {display: flex; width: 0.2rem; height: 0.2rem; justify-content: center; align-items: center;}
.header-menu-fixed .close a img {width: 0.16rem;}
.header-menu-fixed .scroll {height: calc(100vh - var(--header-top-height) - var(--header-menu-height) - var(--header-bottom-height)); overflow: auto;}
.header-menu-fixed .menu .item {display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 var(--padding-outer); height: var(--header-menu-height); font-size: 0.16rem; font-weight: 550; transition: background 0.3s, opacity 0.3s;}
.header-menu-fixed .menu .item span {display: block;}
.header-menu-fixed .menu .item span.icon {display: flex; width: 0.2rem; height: 0.2rem; justify-content: center; align-items: center; transition: transform 0.3s;}
.header-menu-fixed .menu .item span.icon img {width: 0.12rem;}
.header-menu-fixed .menu .group .name .item {color: #333333;}
.header-menu-fixed .menu .group .name .item:hover {opacity: 0.7;}
.header-menu-fixed .menu .group .name .item.on {background: #e6e6e6; opacity: 1;}
.header-menu-fixed .menu .group .subs {max-height: 0; overflow: hidden; transition: max-height 0.3s;}
.header-menu-fixed .menu .group .subs .list {opacity: 0; transform: translateY(-0.1rem); transition: opacity 0.3s, transform 0.3s;}
.header-menu-fixed .menu .group .subs .list .box .txt {padding: 0.1rem var(--padding-outer); font-size: 0.14rem; display: none; background: rgba(244, 244, 244, 0.5);}
.header-menu-fixed .menu .group .subs .list .box .txt .li {line-height: 0.4rem;}
.header-menu-fixed .menu .group .subs .list .box .txt .li a {display: block; color: #999;}
.header-menu-fixed .menu .group .subs .list .box .txt .li a:hover {color: #333;}
.header-menu-fixed .menu .group .subs .list .box .txt .li a.on {color: #333;}
.header-menu-fixed .menu .group .subs .list .box.show .txt {display: block;}

.header-menu-fixed .menu .group .subs .item {color: #888888;}
.header-menu-fixed .menu .group .subs .item:hover {color: #333333;}
.header-menu-fixed .menu .group .subs .item.on {background: rgba(230, 230, 230, 0.5); color: #333333;}
.header-menu-fixed .menu .group.show .name .item {background: #e6e6e6; opacity: 1;}
.header-menu-fixed .menu .group.show .name .item .icon {transform: rotate(90deg);}
.header-menu-fixed .menu .group.show .subs {max-height: max-content;}
.header-menu-fixed .menu .group.show .subs .list {opacity: 1; transform: translateY(0);}


/*小屏菜单-状态变换*/
.header-menu-fixed {display: none;}
.header-menu-fixed .mask {opacity: 0; transition: opacity 0.4s;}
.header-menu-fixed .main {opacity: 0; transform: translateX(var(--fixed-menu-width)); transition: opacity 0.4s, transform 0.4s;}
.header-menu-fixed.show {display: block;}
.header-menu-fixed.show.anim .mask {opacity: 1;}
.header-menu-fixed.show.anim .main {opacity: 1; transform: translateX(0);}







/*首页轮播图*/
.banner {width: 100%; height: calc(100vh - var(--header-top-height) - var(--header-menu-height) - var(--header-bottom-height));}
.banner .swiper {width: 100%; height: 100%;
    background: #ffffff;
    --swiper-theme-color: #ffffff;
    --swiper-navigation-color: #ffffff;
    --swiper-navigation-size: 0.3rem;
    --swiper-navigation-sides-offset: 0.4rem;
}
.banner .swiper-slide .box {display: block; width: 100%; height: 100%; overflow: hidden;}
.banner-image {width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: center; background-size: cover;}
.banner-content {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; color: #222222; font-size: 0.24rem; font-weight: bold; box-sizing: border-box; padding: 0.5rem; position: relative; z-index: 20;}
.banner-content.white {color: #ffffff;}
.banner .swiper-slide.swiper-slide-active .banner-image {
    animation-name: bannerZoom;
    animation-duration: 10s;
    animation-timing-function: linear;
}
@keyframes bannerZoom {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}



/*版权信息*/
.footer {background: #ffffff; padding: 0 var(--padding-outer); text-align: center;}
.footer-content {box-shadow: 0 -1px #f2f2f2; padding: 0.4rem 0 0.5rem 0; font-size: 0.13rem; color: #333333;}



/*内页公用*/
.pages-top-divider {height: var(--pages-top-height);}
.pages-bottom-divider {height: var(--pages-bottom-height);}


/*内页外层-间距*/
.pages-wrap {display: grid; grid-gap: 0.8rem;}
.pages-main {display: grid; grid-gap: 1.2rem;}



/*面包屑*/
.pages-breadcrumb {width: 100%; max-width: var(--menu-max-width); box-sizing: border-box; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.1rem; font-size: 0.16rem;}
.pages-breadcrumb .iconfont {font-size: 0.16rem;}
.pages-breadcrumb a,
.pages-breadcrumb span {color: #888888;}
.pages-breadcrumb a:hover {color: #333333;}





/*标题、介绍*/
.pages-intro {width: var(--menu-max-width); max-width: 10rem; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.8rem;}
.pages-title {font-size: 0.3rem; color: #222222; font-weight: bold; text-transform: uppercase;}
.pages-tit {font-size: 0.24rem; color: #222222; font-weight: bold; text-transform: uppercase;}
.pages-content {font-size: 0.16rem; color: #888888; line-height: 2;}



/*视差*/
.parallax-container {position: relative;}
.parallax-img {font-size: 0;}
.parallax-image {width: 100%; object-fit: cover;}
.parallax-con {width: 100%; height: 100%; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 99;}

/*视差-内容*/
.parallax-con-intro {max-width: 9.8rem; height: 100%; margin: 0 auto; text-align: center; display: flex; flex-direction: column; justify-content: flex-end;}
.parallax-con-intro .parallax-get {width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 2.4rem 0 1.2rem 0;}
.parallax-con-intro.white,
.parallax-con-intro.white .pages-title,
.parallax-con-intro.white .pages-tit,
.parallax-con-intro.white .pages-content {color: #ffffff;}

/*视差-联系*/
.parallax-con-contact {width: 100%; height: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.parallax-con-contact .parallax-get {padding: var(--padding-outer);}
.parallax-con-contact .block {width: 4.7rem; min-height: 4.8rem; background: rgba(242, 242, 242, 0.9); box-sizing: border-box; padding: 0.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 0.16rem; line-height: 1.875; gap: 0.4rem;}
.parallax-con-contact .item .name {font-weight: bold; color: #222222; text-transform: uppercase;}
.parallax-con-contact .item .text {color: #888888;}
.parallax-con-contact .item .text a {color: #888888;}
.parallax-con-contact .item .text a:hover {color: #222222;}



/*内页外层*/
.wrapper {background: #ffffff; min-height: calc(100vh - var(--header-top-height) - var(--header-menu-height) - var(--header-bottom-height)); transform-origin: center bottom; transition: transform 0.5s;}
@media all and (min-width: 1024px) {
    body.isBottom .wrapper {transform: scale(0.97) translateY(-0.3rem); border-radius: 0.1rem;}
}






/*产品列表*/
.page-products {width: 100%; max-width: var(--menu-max-width); box-sizing: border-box; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.4rem;}
.page-products .item .img {font-size: 0;}
.page-products .item .img a {display: block; overflow: hidden; background: #000;}
.page-products .item .img img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.5s, opacity 0.5s;}
.page-products .item .img a:hover img {transform: scale(1.1); opacity: 0.8;}
.page-products .item .txt {padding-top: 0.1rem;}
.page-products .item .txt a {display: flex; justify-content: center; align-items: center; text-align: center; min-height: 0.5rem; box-sizing: border-box; border: 1px solid #f8f8f8; background: #f8f8f8; font-size: 0.16rem; color: #888888; transition: background-color 0.3s, border-color 0.3s;}
.page-products .item .txt a:hover {border-color: #dddddd; background: #ffffff;}




/*产品展示详情公用列表元素*/
.detail-show-item {display: block; position: relative; overflow: hidden;}
.detail-show-item span {display: block;}
.detail-show-item .img {font-size: 0; background: #f2f2f2; cursor: pointer;}
.detail-show-item .img img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.5s;}
.detail-show-item .txt {position: absolute; left: 0; top: 0; z-index: 20; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; text-align: center; font-size: 0.16rem; color: #fff; opacity: 0; transition: opacity 0.5s;}
.detail-show-item:hover .img img {transform: scale(1.1);}
.detail-show-item:hover .txt {opacity: 1;}




/*产品展示*/
.page-shows {width: 100%; max-width: var(--menu-max-width); box-sizing: border-box; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 0.4rem;}





/*产品详情*/
.page-detail-head {width: 100%; max-width: var(--menu-max-width); box-sizing: border-box; margin: 0 auto; display: grid; grid-gap: 0.6rem;}



/*产品详情-轮播图*/
.page-detail-slide {flex: 1; min-width: 0; width: 100%; font-size: 0;}
.page-detail-slide .swiper-slide img {width: 100%;}




/*产品详情-轮播图-切换*/
.page-detail-switch {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.1rem;}
.page-detail-switch .item {width: 0.8rem; height: 0.3rem; box-sizing: border-box; cursor: pointer; transition: box-shadow 0.3s;}
.page-detail-switch .item.on {box-shadow: 0 0 0.05rem rgba(0, 0, 0, 0.2);}



/*产品详情-介绍*/
.page-detail-intro {display: grid; grid-gap: 1rem;}
.page-detail-intro .head {display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem;}
.page-detail-intro .head .pages-title {flex: 1; min-width: 0; max-width: 8.6rem;}
.page-detail-intro .foot {max-width: 8.6rem;}


/*产品详情-参数及下载*/
.page-detail-option {display: grid; grid-template-columns: 1fr 1fr; align-items: flex-start; grid-gap: 0.6rem;}
.page-detail-option .group {border: 1px solid #dddddd;}
.page-detail-option .group .head {display: flex; justify-content: center; align-items: center; text-align: center; position: relative; background: #f8f8f8; box-sizing: border-box; min-height: 0.56rem; cursor: pointer;}
.page-detail-option .group .head .text {font-size: 0.16rem; color: #888888; padding: 0.1rem 0.6rem;}
.page-detail-option .group .head .icon {width: 0.56rem; height: 0.56rem; position: absolute; right: 0; top: 0;}
.page-detail-option .group .head .icon:before,
.page-detail-option .group .head .icon:after {
    content: "";
    background-color: #cccccc;
    transition: transform 0.3s, opacity 0.3s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.page-detail-option .group .head .icon:before {width: 0.14rem; height: 1px;}
.page-detail-option .group .head .icon:after {width: 1px; height: 0.14rem;}
.page-detail-option .group .box {max-height: 0; overflow: hidden; transition: max-height 0.3s;}
.page-detail-option .group .content {opacity: 0; transform: translateY(0.1rem); transition: opacity 0.3s, transform 0.3s; font-size: 0.16rem; color: #888888;}
.page-detail-option .group .content a {color: #888888;}
.page-detail-option .group .content a:hover {color: #333333;}
.page-detail-option .group .content .item {display: flex; justify-content: center; align-items: center; text-align: center; min-height: 0.56rem; box-sizing: border-box; padding: 0.1rem 0;}
.page-detail-option .group .content .item:hover {background: #f8f8f8;}

.page-detail-option .group.show .head .icon:before {opacity: 0;}
.page-detail-option .group.show .head .icon:before,
.page-detail-option .group.show .head .icon:after {transform: translate(-50%, -50%) rotate(90deg);}
.page-detail-option .group.show .content {opacity: 1; transform: translateY(0);}



/*产品详情-列表*/
.page-detail-list {width: 100%; max-width: var(--menu-max-width); box-sizing: border-box; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.4rem;}





/*定制*/
.page-bespoke {width: 100%; max-width: 8.4rem; box-sizing: border-box; margin: 0 auto;}
.page-bespoke .group {padding: 0.3rem 0; border-bottom: 1px solid #cccccc; font-size: 0.16rem; line-height: 1.875;}
.page-bespoke .group:last-child {border-bottom: 0 none;}
.page-bespoke .group .title {color: #222222; padding-left: 2em; text-transform: uppercase; font-weight: bold;}
.page-bespoke .group .title span {color: #888888; display: block;}
.page-bespoke .group .content {color: #888888; padding-top: 0.3rem;}





/*关于*/
.page-about-main {width: 100%; max-width: 8.4rem; box-sizing: border-box; margin: 0 auto;}