a {transition: all 0.2s linear 0s !important;}
a:hover {transition: all 0.2s linear 0s !important;}
header.mb, .menu-item, .navmb {display:none}
.mobile_tccd {display:none}
header {width:100%; position:fixed; top:0px; left:0px; border-bottom:1px solid #ddd; z-index:99999}
header div.top {width:100%; height:40px; background:#f1f3f5}
header div.top div.m {width:1300px; height:40px;}
header div.top div.m div.l {width:auto; height:40px; position:relative}
header div.top div.m div.l a {width:auto; overflow:hidden; line-height:40px; color:var(--color-text); font-size:var(--font-size-sm)}
header div.top div.m div.l a i {width:24px; overflow:hidden; height:40px; line-height:40px; text-align:left; font-size:18px; display:block; color:var(--color-text-secondary)}
header div.top div.m div.l a i::before {line-height:41px;}
header div.top div.m div.l a span {width:auto; overflow:hidden; display:block; line-height:34px;}
header div.top div.m div.l a em {width:18px; overflow:hidden; height:40px; line-height:40px; text-align:right; font-size:13px; display:block; color:var(--color-text-secondary)}
header div.top div.m div.l a em::before {line-height:41px;}
header div.top div.m div.l p {width:100%; overflow:hidden; padding:3%; display:none; border:1px solid #ddd; border-top:0px; background:#f1f1f1; position:absolute; left:0px; top:40px; z-index:10}
header div.top div.m div.l p a.z {width:100%; overflow:hidden; text-align:center; line-height:30px; font-size:var(--font-size-sm); padding-left:5%; padding-right:5%}
header div.top div.m div.l p a.z img {width:16px; margin-right:4px;}
header div.top div.m div.l:hover p {width:100%; overflow:hidden; padding:3%; display:block; border:1px solid #ddd; border-top:0px; background:#f1f1f1; position:absolute; left:0px; top:40px; z-index:10}
header div.top div.m div.l:hover p a.z {width:100%; overflow:hidden; text-align:center; line-height:30px; font-size:var(--font-size-sm); padding-left:5%; padding-right:5%; color:var(--color-text)}
header div.top div.m div.l:hover p a.z:hover {width:100%; overflow:hidden; text-align:center; line-height:30px; font-size:var(--font-size-sm); padding-left:5%; padding-right:5%; color:var(--color-primary)}
header div.top div.m div.l:hover p a.z img {width:16px; margin-right:4px;}

header div.top div.m div.r {width:80%; max-width:1100px; height:40px; position:relative}
header div.top div.m div.r p {width:auto; overflow:hidden; height:40px; text-align:center; line-height:40px; font-size:var(--font-size-sm)}
header div.top div.m div.r p span {width:1px; overflow:hidden; height:13px; background:#666; margin-left:16px; margin-right:16px; margin-top:1px;}
header div.top div.m div.r a {width:auto; height:40px; text-align:left; margin-left:3%; line-height:40px; font-size:var(--font-size-sm); color:var(--color-text); position:relative}
header div.top div.m div.r a i {width:24px; overflow:hidden; height:40px; line-height:40px; text-align:left; font-size:19px; display:block; color:var(--color-text-secondary)}
header div.top div.m div.r a i::before {line-height:41px;}
header div.top div.m div.r a span {width:auto; overflow:hidden; display:block; line-height:34px;}
header div.top div.m div.r a div.ewm {width:110px; overflow:hidden; height:110px; border:1px solid var(--color-bg-tint); position:absolute; top:39px; left:50%; margin-left:-55px; z-index:99; display:none}
header div.top div.m div.r a div.ewm img {width:100%; overflow:hidden; height:auto; display:block}

header div.top div.m div.r a:hover {width:auto; height:40px; text-align:left; margin-left:3%; line-height:40px; font-size:var(--font-size-sm); color:var(--color-primary)}
header div.top div.m div.r a:hover i {width:24px; overflow:hidden; height:40px; line-height:40px; text-align:left; font-size:19px; display:block; color:var(--color-text-secondary); color:var(--color-primary)}
header div.top div.m div.r a:hover i::before {line-height:41px;}
header div.top div.m div.r a:hover span {width:auto; overflow:hidden; display:block; line-height:34px;}
header div.top div.m div.r a:hover div.ewm {width:110px; overflow:hidden; height:110px; border:1px solid var(--color-bg-tint); position:absolute; top:39px; left:50%; margin-left:-55px; z-index:99; display:block}
header div.top div.m div.r a:hover div.ewm img {width:100%; overflow:hidden; height:auto; display:block}

header div.Navigation {width:100%; height:80px; background:#fff}
header div.Navigation div.m {width:1300px; height:80px; margin:0px auto}
header div.Navigation div.m a {width:20%; overflow:hidden; height:80px;}
header div.Navigation div.m a img {width:100%; overflow:hidden; height:auto; display:block}
header div.Navigation div.m nav {width:76%; height:80px;}
header div.Navigation div.m nav ul {width:90%; height:80px;}
header div.Navigation div.m nav ul li {width:13%; height:80px; line-height:80px; font-size:var(--font-size-base); color:var(--color-text); position:relative}
header div.Navigation div.m nav ul li a {width:100%; overflow:hidden; line-height:80px; font-size:var(--font-size-base); color:var(--color-text); padding-left:2%; padding-right:2%}
header div.Navigation div.m nav ul li a span {width:auto; overflow:hidden; display:block; line-height:80px;}
header div.Navigation div.m nav ul li a i {width:18px; overflow:hidden; height:80px; line-height:80px; text-align:right; font-size:12px; display:block; color:var(--color-text-secondary)}
header div.Navigation div.m nav ul li a i::before {line-height:82px;}
header div.Navigation div.m nav ul li p {width:100%; overflow:hidden; padding:3%; display:none; border:1px solid #ddd; background:#f1f1f1; position:absolute; left:0px; top:60px; z-index:10}
header div.Navigation div.m nav ul li p a {width:100%; overflow:hidden; height:auto; line-height:20px; font-size:var(--font-size-sm); display:block; text-align:center; padding:0px; color:var(--color-text); padding-top:6px; padding-bottom:6px;}
header div.Navigation div.m nav ul li p a:hover {width:100%; overflow:hidden; height:auto; line-height:20px; font-size:var(--font-size-sm); display:block; text-align:center; padding:0px; color:var(--color-primary); padding-top:6px; padding-bottom:6px; text-decoration:underline}

header div.Navigation div.m nav ul li:hover {width:13%; height:80px; line-height:80px; font-size:var(--font-size-base); color:var(--color-text); position:relative}
header div.Navigation div.m nav ul li:hover a {width:100%; overflow:hidden; line-height:80px; font-size:var(--font-size-base); color:var(--color-primary); padding-left:2%; padding-right:2%}
header div.Navigation div.m nav ul li:hover a span {width:auto; overflow:hidden; display:block; line-height:80px;}
header div.Navigation div.m nav ul li:hover a i {width:18px; overflow:hidden; height:80px; line-height:80px; text-align:right; font-size:12px; display:block; color:var(--color-primary)}
header div.Navigation div.m nav ul li:hover a i::before {line-height:82px;}
header div.Navigation div.m nav ul li:hover p {width:100%; overflow:hidden; padding:3%; display:block; border:1px solid #ddd; background:#f1f1f1; position:absolute; left:0px; top:60px; z-index:10}
header div.Navigation div.m nav ul li:hover p a {width:100%; overflow:hidden; height:auto; line-height:20px; font-size:var(--font-size-sm); display:block; text-align:center; padding:0px; color:var(--color-text); padding-top:6px; padding-bottom:6px;}
header div.Navigation div.m nav ul li:hover p a:hover {width:100%; overflow:hidden; height:auto; line-height:20px; font-size:var(--font-size-sm); display:block; text-align:center; padding:0px; color:var(--color-primary); padding-top:6px; padding-bottom:6px; text-decoration:underline}

header div.Navigation div.m nav ul li.ahover {width:13%; height:80px; line-height:80px; font-size:var(--font-size-base); color:var(--color-text); position:relative}
header div.Navigation div.m nav ul li.ahover a {width:100%; overflow:hidden; line-height:80px; font-size:var(--font-size-base); color:var(--color-primary); padding-left:2%; padding-right:2%; font-weight:bold}
header div.Navigation div.m nav ul li.ahover a span {width:auto; overflow:hidden; display:block; line-height:80px;}
header div.Navigation div.m nav ul li.ahover a i {width:18px; overflow:hidden; height:80px; line-height:80px; text-align:right; font-size:12px; display:block; color:var(--color-primary)}
header div.Navigation div.m nav ul li.ahover a i::before {line-height:82px;}
header div.Navigation div.m nav ul li.ahover p {width:100%; overflow:hidden; padding:3%; display:none; border:1px solid #ddd; background:#f1f1f1; position:absolute; left:0px; top:60px; z-index:10}
header div.Navigation div.m nav ul li.ahover p a {width:100%; overflow:hidden; height:auto; line-height:20px; font-size:var(--font-size-sm); display:block; text-align:center; padding:0px; color:var(--color-text); padding-top:6px; padding-bottom:6px; font-weight:normal}
header div.Navigation div.m nav ul li.ahover p a:hover {width:100%; overflow:hidden; height:auto; line-height:20px; font-size:var(--font-size-sm); display:block; text-align:center; padding:0px; color:var(--color-primary); padding-top:6px; padding-bottom:6px; text-decoration:underline; font-weight:normal}

header div.Navigation div.m nav ul li.ahover:hover {width:13%; height:80px; line-height:80px; font-size:var(--font-size-base); color:var(--color-text); position:relative}
header div.Navigation div.m nav ul li.ahover:hover a {width:100%; overflow:hidden; line-height:80px; font-size:var(--font-size-base); color:var(--color-primary); padding-left:2%; padding-right:2%}
header div.Navigation div.m nav ul li.ahover:hover a span {width:auto; overflow:hidden; display:block; line-height:80px;}
header div.Navigation div.m nav ul li.ahover:hover a i {width:18px; overflow:hidden; height:80px; line-height:80px; text-align:right; font-size:12px; display:block; color:var(--color-primary)}
header div.Navigation div.m nav ul li.ahover:hover a i::before {line-height:82px;}
header div.Navigation div.m nav ul li.ahover:hover p {width:100%; overflow:hidden; padding:3%; display:block; border:1px solid #ddd; background:#f1f1f1; position:absolute; left:0px; top:60px; z-index:10}
header div.Navigation div.m nav ul li.ahover:hover p a {width:100%; overflow:hidden; height:auto; line-height:20px; font-size:var(--font-size-sm); display:block; text-align:center; padding:0px; color:var(--color-text); padding-top:6px; padding-bottom:6px; font-weight:normal}
header div.Navigation div.m nav ul li.ahover:hover p a:hover {width:100%; overflow:hidden; height:auto; line-height:20px; font-size:var(--font-size-sm); display:block; text-align:center; padding:0px; color:var(--color-primary); padding-top:6px; padding-bottom:6px; text-decoration:underline; font-weight:normal}

header div.Navigation div.m nav em {width:6%; overflow:hidden; height:80px; text-align:right; line-height:84px; font-size:var(--font-size-xl); color:var(--color-text); cursor:pointer}

/*搜索弹框*/
.searchtk {width:100%; overflow:hidden; height:100%; position:fixed; top:-100%; left:0px; z-index:999999; background:rgba(0,0,0,0.8); transition: all 0.1s linear 0s !important;}
.searchtk div.m {width:600px; overflow:hidden; padding:30px; background:#fff; border-radius:10px; position:relative}
.searchtk div.m i {width:40px; overflow:hidden; height:40px; position:absolute; top:10px; right:0px; z-index:999; color:#333; line-height:40px; font-size:clamp(20px, calc(22 / 2560 * 100vw), 22px); display:block; cursor:pointer}
.searchtk div.m h3 {width:100%; text-align:left; font-size:var(--font-size-base); color:#333}
.searchtk div.m form {width:100%; overflow:hidden; margin-top:2%;}
.searchtk div.m form input {width:70%; overflow:hidden; height:40px; border:1px solid #ddd; background:#fcfcfc; padding-left:15px; padding-right:15px; border-radius:5px;}
.searchtk div.m form button {width:28%; overflow:hidden; height:40px; border:0px; background:var(--gradient-primary); border-radius:5px; color:#fff; font-size:var(--font-size-base); cursor:pointer}
.searchtk div.m form button em {font-size:var(--font-size-lg); display:block; line-height:var(--font-size-lg); margin-right:5px; margin-top:2px;}
.searchtk div.m form button:hover {width:28%; overflow:hidden; height:40px; border:0px; background:var(--gradient-primary-hover); border-radius:5px; color:#fff; font-size:var(--font-size-base); cursor:pointer}
.searchtk div.m form button:hover em {font-size:var(--font-size-lg); display:block; line-height:var(--font-size-lg); margin-right:5px; margin-top:2px;}

/*topbanner*/
.topbannermain {width:100%; height:auto; position:relative;}
.topbannermain div.topbanner {width:100%; overflow:hidden; height:auto;}
.topbannermain div.topbanner div.swiper-wrapper {width:100%}
.topbannermain div.topbanner div.swiper-wrapper div.swiper-slide {width:100%}
.topbannermain div.topbanner div.swiper-wrapper div.swiper-slide a {width:100%; height:auto; display:block; position:relative}
.topbannermain div.topbanner div.swiper-wrapper div.swiper-slide a img {width:100%; overflow:hidden; height:auto; display:block;}
.topbannermain div.topbanner div.topbanner-pagination {width:100%; overflow:hidden; height:1vw; position:absolute; left:0px; bottom:1vw; z-index:99}
.topbannermain div.topbanner div.topbanner-pagination span.swiper-pagination-bullet {width:20px; overflow:hidden; height:3px; display:block; border-radius:100px; background:var(--color-bg-muted); opacity:1}
.topbannermain div.topbanner div.topbanner-pagination span.swiper-pagination-bullet-active {background:var(--color-primary); opacity:1}

.recommendedproducts {width:100%; overflow:hidden; padding-top:3%; padding-bottom:3%; background:url(../images/tjcp_bg.jpg) center; background-size:cover}
.recommendedproducts div.m {width:1300px; height:auto; margin:0px auto}
.recommendedproducts div.m dl {width:49%; position:relative; transition: all 0.2s linear 0s !important; margin-top:2%; margin-bottom:2%}
.recommendedproducts div.m dl:hover {width:49%; position:relative; transform: translateY(-8px) scale(1.01); transition: all 0.2s linear 0s !important;}
.recommendedproducts div.m dl dt {width:36%; overflow:hidden; position:relative; z-index:2}
.recommendedproducts div.m dl dt img {width:100%; overflow:hidden; height:auto; display:block}
.recommendedproducts div.m dl dd {width:60%; overflow:hidden; position:relative; z-index:2; padding-right:5%}
.recommendedproducts div.m dl dd h3 {width:100%; overflow:hidden; text-align:left; font-size:var(--font-size-xl); line-height:30px;}
.recommendedproducts div.m dl dd a {width:auto; overflow:hidden; float:left; padding:5%; padding-top:3%; padding-bottom:3%; background:linear-gradient(180deg, #8c15aa 0%, #7f149b 100%); color:#fff; border-radius:8px; margin-top:5%;}
.recommendedproducts div.m dl dd a span {font-size:var(--font-size-sm); line-height:20px; display:block}
.recommendedproducts div.m dl dd a i {font-size:var(--font-size-3xl); line-height:20px; display:block; margin-left:0.5vw}
.recommendedproducts div.m dl dd a i::before {line-height:25px; height:20px; display:block}
.recommendedproducts div.m dl dd a:hover {background:var(--gradient-primary-hover)}
.recommendedproducts div.m dl em {width:100%; overflow:hidden; height:60%; border-radius:15px; background:linear-gradient(180deg, #fff 0%, #e7e7e7 100%); border:1px solid #e8e8e8; position:absolute; left:0px; top:20%; z-index:1; display:block}


/*新闻*/
.blogmian {width:1300px; margin: 0px auto; padding-top: 3%; padding-bottom: 3%;}
.blogmian h2 {width:100%;}
.blogmian h2 p {width:auto; overflow: hidden; text-align: left; color: var(--color-primary); display: block; font-size: clamp(1rem, 2.4vw, 34px)}
.blogmian h2 a {width:auto; font-weight: normal}
.blogmian h2 a span {width:auto; font-size: clamp(0.8rem, 1vw, 16px); color: var(--color-text-tertiary)}
.blogmian h2 a i {font-size:var(--font-size-3xl); line-height:20px; display:block; margin-left:0.5vw; color: var(--color-text-tertiary)}
.blogmian h2 a ::before {line-height:25px; height:20px; display:block}
.blogmian h2 a:hover {width:auto; font-weight: normal}
.blogmian h2 a:hover span {width:auto; font-size: clamp(0.8rem, 1vw, 16px); color: var(--color-primary)}
.blogmian h2 a:hover i {font-size:var(--font-size-3xl); line-height:20px; display:block; margin-left:0.5vw; color: var(--color-primary)}
.blogmian h2 a:hover ::before {line-height:25px; height:20px; display:block}
.blogmian ul {width:100%; margin-top: 3%}
.blogmian ul li {width:32%; margin-right: 2%; overflow: hidden; background: #fff; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; margin-bottom: 2%}
.blogmian ul li:nth-child(3n) {margin-right: 0%;}
.blogmian ul li a {width:100%; overflow: hidden; display: block; padding-bottom: 12%; position: relative}
.blogmian ul li a figure {width:100%; overflow: hidden; display: flex; flex-direction: column; align-items: center;}
.blogmian ul li a figure img {width:100%; overflow: hidden; height: auto; display: block}
.blogmian ul li a figure figcaption {width:auto; padding: 4%; font-size: clamp(1.2rem, 1.4vw, 20px); color: #1b1e4c; line-height: clamp(1.4rem, 2vw, 26px)}
.blogmian ul li a em {font-size: clamp(1.6rem, 1.8vw, 36px); display: block; position: absolute; bottom: 2%; right: 5%; color: #1b1e4c; transition: all 0.3s linear 0s !important;}
.blogmian ul li a p {width:100%; overflow: hidden; text-align: left; font-size: clamp(1rem, 1.2vw, 16px); line-height: clamp(1.3rem, 1.5vw, 24px); color: #666; display: block; padding-left: 4%; padding-right: 4%}

.blogmian ul li:hover {width:32%; margin-right: 2%; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.06), 0 48px 96px rgba(0, 0, 0, 0.04);
 transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; transform: translateY(-8px) scale(1.01); margin-bottom: 2%}
.blogmian ul li:nth-child(3n):hover {margin-right: 0%;}
.blogmian ul li:hover a {width:100%; overflow: hidden; display: block; padding-bottom: 12%; position: relative}
.blogmian ul li:hover a figure {width:100%; overflow: hidden; display: flex; flex-direction: column; align-items: center;}
.blogmian ul li:hover a figure img {width:100%; overflow: hidden; height: auto; display: block}
.blogmian ul li:hover a figure figcaption {width:auto; padding: 4%; font-size: clamp(1.2rem, 1.4vw, 20px); color: var(--color-primary); line-height: clamp(1.4rem, 2vw, 26px)}
.blogmian ul li:hover a em {font-size: clamp(1.6rem, 1.8vw, 36px); display: block; position: absolute; bottom: 2%; right: 3%; color: var(--color-primary); transition: all 0.3s linear 0s !important;}
.blogmian ul li:hover a p {width:100%; overflow: hidden; text-align: left; font-size: clamp(1rem, 1.2vw, 16px); line-height: clamp(1.3rem, 1.5vw, 24px); color: #666; display: block; padding-left: 4%; padding-right: 4%}


/*首页产品*/
.indexProductmb {display:none}
.indexProduct {width:100%; margin: 0px auto; padding-top: 4%; padding-bottom: 2%; background: #f8f8f8}
.indexProduct h2 {width:100%; text-align: center; color: var(--color-primary); display: block; font-size: clamp(1rem, 2.4vw, 34px)}

.productlist {width:1340px; margin: 0px auto; margin-top: 2.4%}
/* ---------- 标签栏 ---------- */
.tab-header {width: 1300px; margin: 0px auto;align-items: stretch;}
/* 每个标签项 */
.tab-item {width:20%; overflow: hidden; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; padding:1%; background: #fff; border: 1px solid #e9e9e9; cursor: pointer; transition: all 0.2s ease; color: #6c757d; user-select: none; margin-right: 1%}
.tab-item:nth-child(5) {margin-right:0px;}
.tab-item i {width:44%; overflow: hidden; height: 80px; display: block}
.tab-item span {width:100%; overflow: hidden; text-align: center; display: block; font-weight: bold; font-size: clamp(1rem, 1.5vw, 18px); line-height: clamp(1.4rem, 1.8vw, 26px)}
.tab-item a {width:100%; overflow:hidden; height:auto;}
.tab-item a span {width:100%; overflow: hidden; text-align: center; display: block; font-weight: bold; font-size: clamp(1rem, 1.5vw, 18px); line-height: clamp(1.4rem, 1.8vw, 26px)}

.tb1 {background: url("../images/yd.png") center no-repeat; background-size: 100%}
.tb2 {background: url("../images/pd.png") center no-repeat; background-size: 100%}
.tb3 {background: url("../images/gl.png") center no-repeat; background-size: 100%}
.tb4 {background: url("../images/sf.png") center no-repeat; background-size: 100%}
.tb5 {background: url("../images/yb.png") center no-repeat; background-size: 100%}
.tb6 {background: url("../images/mr.png") center no-repeat; background-size: 100%}

.tab-item:hover:not(.active) {background: #7B2CBF; border: 1px solid #7B2CBF; color: #ffffff; box-shadow: 0 -2px 8px rgba(123, 44, 191, 0.15);}
.tab-item:hover:not(.active) .tb1 {background: url("../images/yd_k.png") center no-repeat; background-size: 100%}
.tab-item:hover:not(.active) .tb2 {background: url("../images/pd_k.png") center no-repeat; background-size: 100%}
.tab-item:hover:not(.active) .tb3 {background: url("../images/gl_k.png") center no-repeat; background-size: 100%}
.tab-item:hover:not(.active) .tb4 {background: url("../images/sf_k.png") center no-repeat; background-size: 100%}
.tab-item:hover:not(.active) .tb5 {background: url("../images/yb_k.png") center no-repeat; background-size: 100%}
.tab-item:hover:not(.active) .tb6 {background: url("../images/mr_k.png") center no-repeat; background-size: 100%}
.tab-item:hover a {color:#fff}
.tab-item:hover a span {color:#fff}
.tab-item.active {background: #7B2CBF; border: 1px solid #7B2CBF; color: #ffffff; box-shadow: 0 -2px 8px rgba(123, 44, 191, 0.15);}
.tab-item.active a {color:#fff}
.tab-item.active a span {color:#fff}
.tab-item.active .tb1 {background: url("../images/yd_k.png") center no-repeat; background-size: 100%}
.tab-item.active .tb2 {background: url("../images/pd_k.png") center no-repeat; background-size: 100%}
.tab-item.active .tb3 {background: url("../images/gl_k.png") center no-repeat; background-size: 100%}
.tab-item.active .tb4 {background: url("../images/sf_k.png") center no-repeat; background-size: 100%}
.tab-item.active .tb5 {background: url("../images/yb_k.png") center no-repeat; background-size: 100%}
.tab-item.active .tb6 {background: url("../images/mr_k.png") center no-repeat; background-size: 100%}

.tab-content {width:100%;}
.tab-pane {display: none; animation: fadeIn 0.25s ease; position: relative}
.tab-pane.active {display: block;}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}

.indexcp {width:1340px; overflow: hidden; padding: 20px; margin-top: 3%}
.indexcp div.swiper-wrapper {width:100%; margin: 0px auto}
.indexcp div.swiper-wrapper div.swiper-slide {width:auto}
.indexcp div.swiper-wrapper div.swiper-slide a {width:100%; overflow: hidden; display: block; background: #fff; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow;}
.indexcp div.swiper-wrapper div.swiper-slide a figure {width:100%; overflow: hidden; display: flex; flex-direction: column; align-items: center;}

/* 👇 修改这里：增加了 box-sizing 和 padding，让图片上下左右产生距离感 */
.indexcp div.swiper-wrapper div.swiper-slide a figure img {
    width:100%; 
    aspect-ratio: 4 / 3; 
    object-fit: contain; 
    background-color: #fff;    /* 用卡片本身的白色做底色 */
    box-sizing: border-box;    /* 关键：防止padding撑破4:3的框 */
    padding: 20px 16px;        /* 关键：上下给20px，左右给16px的空间 */
    overflow: hidden; 
    display: block
}
.indexcp div.swiper-wrapper div.swiper-slide a figure figcaption {width:auto; padding: 4%; font-size: clamp(1.2rem, 1.4vw, 20px); color: #1b1e4c; line-height: clamp(1.4rem, 2vw, 26px); padding-bottom: 8%; display: block}

.indexcp div.swiper-wrapper div.swiper-slide a:hover {width:100%; overflow: hidden; display: block; background: #fff; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; transform: translateY(-8px) scale(1.01);}
.indexcp div.swiper-wrapper div.swiper-slide a:hover figure {width:100%; overflow: hidden; display: flex; flex-direction: column; align-items: center;}

/* 👇 同步修改 hover 状态 */
.indexcp div.swiper-wrapper div.swiper-slide a:hover figure img {
    width:100%; 
    aspect-ratio: 4 / 3; 
    object-fit: contain; 
    background-color: #fff; 
    box-sizing: border-box; 
    padding: 20px 16px; 
    overflow: hidden; 
    display: block
}
.indexcp div.swiper-wrapper div.swiper-slide a:hover figure figcaption {width:auto; padding: 4%; font-size: clamp(1.2rem, 1.4vw, 20px); color: var(--color-primary); line-height: clamp(1.4rem, 2vw, 26px); padding-bottom: 12%; display: block}
.tab-pane  div.swiper-button-next {width:80px; overflow: hidden; height: 80px; position: absolute; top: 50%; right: -120px; margin-top: -40px; color: #353535}
.tab-pane  div.swiper-button-prev {width:80px; overflow: hidden; height: 80px; position: absolute; top: 50%; left: -120px; margin-top: -40px; color: #353535}

/*about*/
.indexaboutmain {width:100%; background:url(../images/indexaboutbg.jpg) center bottom no-repeat; background-size:100%}
.indexabout {width:1300px; margin: 0px auto; padding-top: 6%; padding-bottom: 12%;}
.indexabout div.l {width:50%; overflow: hidden; border-radius: 18px;}
.indexabout div.l a {width:100%; overflow: hidden; height: auto; display: block; position: relative; transition: all 0.2s ease;}
.indexabout div.l a figure {width:100%; overflow: hidden; height: auto; display: block;}
.indexabout div.l a figure img {width:100%; overflow: hidden; height: auto; display: block}
.indexabout div.l a em {width:100%; overflow: hidden; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 99; background: rgb(0,0,0,0.4); transition: all 0.2s ease;}
.indexabout div.l a i {width:100px; overflow: hidden; height: 100px; text-align: center; line-height: 100px; font-size: 100px; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; z-index: 999}

.indexabout div.l a:hover {width:100%; overflow: hidden; height: auto; display: block; position: relative; transition: all 0.2s ease;}
.indexabout div.l a:hover figure {width:100%; overflow: hidden; height: auto; display: block;}
.indexabout div.l a:hover figure img {width:100%; overflow: hidden; height: auto; display: block}
.indexabout div.l a:hover em {width:100%; overflow: hidden; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 99; background: rgb(0,0,0,0.6); transition: all 0.2s ease;}
.indexabout div.l a:hover i {width:100px; overflow: hidden; height: 100px; text-align: center; line-height: 100px; font-size: 100px; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; z-index: 999}

.indexabout div.r {width:44%; overflow: hidden; border-radius: 5px;}
.indexabout div.r h2 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.8rem, 2vw, 30px); color: #071972; margin-bottom: 4%}
.indexabout div.r em {width:60px;overflow:hidden; height:5px; border-radius:100px; background:var(--gradient-primary); display:block; margin-top:1%; margin-bottom:5%;}
.indexabout div.r h3 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.2rem, 1.4vw, 18px); color: #666; margin-bottom: 2%; font-weight:normal}
.indexabout div.r p {width:100%; overflow: hidden; display: block; font-size: clamp(1rem, 1.2vw, 18px); padding-bottom: 3%}
.indexabout div.r a {width:auto; overflow:hidden; float:left; padding:5%; padding-top:2.4%; padding-bottom:2.4%; background:linear-gradient(180deg, #8c15aa 0%, #7f149b 100%); color:#fff; border-radius:8px; margin-top:5%;}
.indexabout div.r a span {font-size:var(--font-size-sm); line-height:20px; display:block}
.indexabout div.r a i {font-size:var(--font-size-3xl); line-height:20px; display:block; margin-left:0.5vw}
.indexabout div.r a i::before {line-height:25px; height:20px; display:block}
.indexabout div.r a:hover {background:var(--gradient-primary-hover)}



/*contact*/
.indexcontact {width:100%; overflow: hidden; padding-top: 3%; padding-bottom: 3%; background: linear-gradient(180deg, #fbfbfb 0%, #ede1ef 100%);}
.indexcontact h2 {width:1300px; overflow: hidden; margin: 0px auto; text-align: left; font-size: clamp(2rem, 2.4vw, 40px); font-weight: normal}
.indexcontact p {width:1300px; overflow: hidden; display: block; margin: 0px auto; margin-top: 2%}
.indexcontact p a {width:auto; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1%; padding-top: 1%; border-radius: 6px; background: linear-gradient(90deg, #13246a 0%, #721c89 100%); color: #fff; font-size: clamp(1rem, 1.2vw, 18px);}
.indexcontact p a:hover {width:auto; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1%; padding-top: 1%; border-radius: 6px; background: linear-gradient(90deg, #061453 0%, #5d0b73 100%); color: #fff; font-size: clamp(1rem, 1.2vw, 18px);}




/*footer*/
footer {width:100%; overflow: hidden; padding-top: 3%; padding-bottom: 2%; background: linear-gradient(90deg, #13246a 0%, #721c89 100%);}
footer div.top {width:1300px; margin: 0px auto}
footer div.top div.logo_fot {width:30%;}
footer div.top div.logo_fot a {width:70%; overflow: hidden; height: auto; display: block}
footer div.top div.logo_fot a img {width:100%; overflow: hidden; height: auto; display: block}
footer div.top div.fotnav {width:16%}
footer div.top div.fotnav h3 {width:100%; overflow: hidden; text-align: left; padding-bottom: 3%}
footer div.top div.fotnav h3 a.t {color:#fff; font-size: clamp(1.2rem, 1.4vw, 18px);}
footer div.top div.fotnav a {width:100%; overflow: hidden; display: block; text-align: left; color: #fff; font-size: clamp(1rem, 1.1vw, 16px); line-height: clamp(1.4rem, 1.6vw, 22px); padding-bottom: 5px; padding-top: 5px;}
footer div.top div.fotnav a:hover {text-decoration: underline}
footer div.top div.share {width:28%}
footer div.top div.share a {width:40px; height: 40px; text-align: left; color: #fff; font-size: clamp(1.8rem, 2vw, 30px); line-height: 40px; display: block; position: relative}
footer div.top div.share a:hover {transform:scale(1.1); color: #d697e8}
footer div.top div.share a em {width:100px; overflow: hidden; height: 100px; background: #fff; display: none; position: absolute; left: 50%; margin-left: -50px; top: 42px;}
footer div.top div.share a em img {width:100%; overflow: hidden; height: auto; display: block}
footer div.top div.share a:hover em {width:100px; overflow: hidden; height: 100px; background: #fff; display: block; position: absolute; left: 50%; margin-left: -50px; top: 42px;}
footer div.top div.share a:hover em img {width:100%; overflow: hidden; height: auto; display: block}
footer div.top div.share p {width:100%; overflow:hidden; color:#fff; margin-top:1%;}
footer div.top div.share p i {width:30px; overflow:hidden; height:30px; text-align:left; line-height:30px; font-size:22px; display:block; margin-top:1.5px}
footer div.top div.share p span {width:90%; overflow:hidden; display:block}

footer div.hx {width:100%; overflow: hidden; height: 1px; background: linear-gradient(90deg, #1c3185 0%, #81229a 100%); margin-top: 2%; margin-bottom: 2%}
footer div.bot {width:100%; overflow: hidden; color: #fff; text-align: center; font-size: clamp(1rem, 1.2vw, 16px); line-height: clamp(1.8rem, 2vw, 34px)}
footer div.bot a {color:#fff; display: inline-block; padding-left: 3px; padding-right: 3px;}
footer div.bot a:hover {color:#fff; text-decoration: underline}






.video-modal {position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); display: none; align-items: center; justify-content: center; z-index: 999999; padding: 20px; opacity: 0; transition: opacity 0.3s ease;}
.video-modal.active {display: flex; opacity: 1;}
.video-modal-content {position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; transform: scale(0.9); transition: transform 0.3s ease;}
.video-modal.active .video-modal-content {transform: scale(1); z-index: 999999}
.video-modal video {width: 100%; height: 100%; object-fit: contain; background: #000;}
.video-modal-close {position: absolute; top: -44px; right: 0; width: 36px; height: 36px; line-height: 26px; background: rgba(255, 255, 255, 0.15); border: none; border-radius: 50%; color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease;}
.video-modal-close:hover {background: rgba(255, 255, 255, 0.3);}


.inquiry {width:100%; overflow: hidden; height: 100%; position: fixed; top: -100%; left: 0px; z-index: 9999999; background: rgb(0,0,0,0.7); transition: all 0.1s linear 0s}
.inquiry div.m {width:800px; overflow: hidden; padding: 30px; background: #fff; border-radius: 10px; position: relative}
.inquiry div.m i {width:40px; overflow: hidden; height: 40px; text-align: center; line-height: 40px;  position: absolute; top: 0px; right: 0px; cursor: pointer}
.inquiry div.m h3 {width:60%; overflow: hidden; text-align: left; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.2rem, 1.4vw, 24px); color: #333; font-weight: normal}
.inquiry div.m form {width:100%;}
.inquiry div.m form input {width:49%; overflow: hidden; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px;}
.inquiry div.m form input::placeholder {color:#666}
.inquiry div.m form select {width:49%; overflow: hidden; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px; color:#666; background: url("../images/xjt.png") right no-repeat}
.inquiry div.m form textarea {width:100%; overflow: hidden; min-height: 120px; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px; margin-bottom: 2%}
.inquiry div.m form button {width:100%; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1.5%; padding-top: 1.5%; border-radius: 6px; background: linear-gradient(90deg, #13246a 0%, #721c89 100%); color: #fff; font-size: clamp(1rem, 1.2vw, 18px);}
.inquiry div.m form button:hover {width:100%; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1.5%; padding-top: 1.5%; border-radius: 6px; background: linear-gradient(90deg, #061453 0%, #5d0b73 100%); color: #fff; font-size: clamp(1rem, 1.2vw, 18px);}


/*about*/
.aboutbanner {width:100%; overflow: hidden; height: 500px; margin-top: 96px;}
.aboutbanner div.l {width:50%; max-width:650px;  overflow: hidden; height: 500px; background-size: cover; position: relative}
.aboutbanner div.l i {width:100%; overflow: hidden; height: 100%; display: block; position: absolute; top: 0px; left: 0px; z-index: 999; background: rgb(0,0,0,0.5); cursor: pointer}
.aboutbanner div.l a {width:100px; overflow: hidden; height: 100px; text-align: center; line-height: 100px; font-size: 100px; color: #fff; position: absolute; right: 10%; top: 50%; margin-top: -50px; z-index: 999; cursor: pointer}
.aboutbanner div.l:hover {width:56%; overflow: hidden; height: 500px; background-size: cover; position: relative}
.aboutbanner div.l:hover i {width:100%; overflow: hidden; height: 100%; display: block; position: absolute; top: 0px; left: 0px; z-index: 999; background: rgb(0,0,0,0.6); cursor: pointer}
.aboutbanner div.l:hover a {width:100px; overflow: hidden; height: 100px; text-align: center; line-height: 100px; font-size: 100px; color: #fff; position: absolute; right: 10%; top: 50%; margin-top: -50px; z-index: 999; cursor: pointer}
.aboutbanner div.r {width:50%; max-width:650px; overflow: hidden; height: 500px;}
.aboutbanner div.r h2 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.8rem, 2vw, 40px); color: #fff; text-transform:uppercase; margin-left: 0%}
.aboutbanner div.r h3 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.2rem, 1.4vw, 18px); color: #fff; text-transform:uppercase; margin-left: 0%; font-weight:normal}
.aboutbanner div.r nav {width:100%; overflow: hidden; text-align: left; margin-left: 0%; margin-top: 2%; color: #fff}
.aboutbanner div.r nav em {width:auto; display: block; font-size: clamp(1.1rem, 1.3vw, 20px); color: #fff; margin-right: 2px;}
.aboutbanner div.r nav a {width:auto; overflow: hidden; display: block; color: #fff; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}
.aboutbanner div.r nav a:hover {width:auto; overflow: hidden; display: block; color: #BCBCBC; text-decoration: underline; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}



.page_about {width:1300px; overflow: hidden; height: auto; margin: 0px auto; padding-top: 5%; padding-bottom: 5%; font-size: clamp(1rem, 1.2vw, 18px); color: var(--color-text); line-height: clamp(1.4rem, 1.6vw, 30px)}
.page_about p {width:100%; overflow: hidden; display: block; margin-top: 1%; margin-bottom: 1%; text-indent: 40px;}
.page_about h2 {font-size: clamp(1.6rem, 1.8vw, 40px)}
.page_about h3 {font-size: clamp(1.3rem, 1.5vw, 30px); margin-bottom: 3%}
.page_about p img {width:auto !important; overflow: hidden !important; height: auto !important; display: block !important; margin: 0px auto !important; max-width: 100% !important; margin-top: 1% !important; margin-bottom: 1% !important; border-radius:12px;}

.page_about_zizhi {width:100%; overflow: hidden; padding-top: 3%; padding-bottom: 3%; background: #fbfbfb}
.page_about_zizhi h2 {width:1300px; margin: 0px auto; text-align: left; font-size: clamp(1.4rem, 1.6vw, 30px); color: #721c89}
.page_about_zizhi ul {width:1300px; height: auto; margin: 0px auto;margin-top: 2%;}
.page_about_zizhi ul li {width:13%; overflow: hidden; border: 1px solid #ddd; background: #fff; padding: 2%; margin-bottom: 2%; margin-right: 1%; border-radius: 6px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow;}
.page_about_zizhi ul li:hover {box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; transform: translateY(-8px) scale(1.01);}
.page_about_zizhi ul li:nth-child(7n) {margin-right: 0%}
.page_about_zizhi ul li img {width:100%; overflow: hidden; height: auto; display: block}
.page_about_zizhi p {width:1300px; margin: 0px auto; text-align: left; font-size: clamp(1rem, 1.3vw, 18px); color: #721c89;}


/*product*/
.productbannermb {display:none}
.productbanner {width:100%; overflow: hidden; margin-top: 96px; position: relative}
.productbanner img {width:100%; overflow: hidden; height: auto; display: block}
.productbanner div.m {width:1300px; overflow: hidden; height: 100%; position: absolute; top: 0px; left: 50%; margin-left: -650px; z-index: 99}
.productbanner div.m h2 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.8rem, 2vw, 40px); color: #fff; text-transform:uppercase; margin-left: 0%}
.productbanner div.m p {width:100%; overflow: hidden; text-align: left; font-size: clamp(1rem, 1.2vw, 16px); color: #fff; margin-left: 0%; margin-top:2%}
.productbanner div.m nav {width:100%; overflow: hidden; text-align: left; margin-left: 0%; margin-top: 2%; color: #fff}
.productbanner div.m nav em {width:auto; display: block; font-size: clamp(1.1rem, 1.3vw, 20px); color: #fff; margin-right: 2px;}
.productbanner div.m nav a {width:auto; overflow: hidden; display: block; color: #fff; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}
.productbanner div.m nav a:hover {width:auto; overflow: hidden; display: block; color: #721c89; text-decoration: underline; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}

.productflmb {display:none}
.productfl {width:100%; overflow: hidden; height: 70px; background: url("../images/hx.jpg") bottom repeat-x}
.productfl nav {width:1300px; overflow: hidden; margin: 0px auto; height: 70px;}
.productfl nav a {width:auto; overflow: hidden; text-align: center; line-height: 70px; font-size: clamp(1rem, 1.2vw, 20px); color: #333; margin-left: 1%; margin-right: 1%; position: relative}
.productfl nav a i {width:0%; overflow: hidden; height: 3px; border-radius: 100px; background: #721c89; position: absolute; left: 50%; margin-left: 0px; bottom: 0px; transition: all 0.2s linear 0s}
.productfl nav a:hover {width:auto; overflow: hidden; text-align: center; line-height: 70px; font-size: clamp(1rem, 1.2vw, 20px); color: #721c89; margin-left: 1%; margin-right: 1%; position: relative}
.productfl nav a:hover i {width:100%; overflow: hidden; height: 3px; border-radius: 100px; background: #721c89; position: absolute; left: 50%; margin-left: -50%; bottom: 0px; transition: all 0.2s linear 0s}
.productfl nav a.ahover {width:auto; overflow: hidden; text-align: center; line-height: 70px; font-size: clamp(1rem, 1.2vw, 20px); color: #721c89; margin-left: 1%; margin-right: 1%; position: relative}
.productfl nav a.ahover i {width:100%; overflow: hidden; height: 3px; border-radius: 100px; background: #721c89; position: absolute; left: 50%; margin-left: -50%; bottom: 0px; transition: all 0.2s linear 0s}


.product_sx {width:100%; overflow: hidden; padding-bottom: 3%; padding-top: 3%;}
.product_sx a {width:auto; overflow: hidden; text-align: center; padding: 1%; padding-top: 0.5%; padding-bottom: 0.5%; font-size: clamp(1rem, 1.2vw, 18px); color: #333; margin-left: 0.5%; margin-right: 0.5%; border: 1px solid #ddd; border-radius: 5px; background: #f1f1f1;}
.product_sx a:hover {width:auto; overflow: hidden; text-align: center; padding: 1%; padding-top: 0.5%; padding-bottom: 0.5%; font-size: clamp(1rem, 1.2vw, 18px); color: #fff; margin-left: 0.5%; margin-right: 0.5%; border: 1px solid #721c89; border-radius: 5px; background: #721c89;}
.product_sx a.ahover {width:auto; overflow: hidden; text-align: center; padding: 1%; padding-top: 0.5%; padding-bottom: 0.5%; font-size: clamp(1rem, 1.2vw, 18px); color: #fff; margin-left: 0.5%; margin-right: 0.5%; border: 1px solid #721c89; border-radius: 5px; background: #721c89;}


.product_list {width:100%;}
.product_list ul {width:1300px; margin: 0px auto}
.product_list ul li {width:49%; overflow: hidden; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; margin-bottom: 3%}
.product_list ul li:hover {box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; transform: translateY(-8px) scale(1.01);}
.product_list ul li a {width:100%; overflow: hidden; height: auto; background: linear-gradient(180deg, #fbfbfb 0%, #f4edf5 100%); border: 1px solid #e6dde7; border-radius: 4px;}
.product_list ul li a figure {width:40%; overflow: hidden; height: auto; display: block}
.product_list ul li a figure img {width:100%; overflow: hidden; height: auto; display: block}
.product_list ul li a div.sub {width:55%; padding-right:5%}
.product_list ul li a div.sub h3 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.2rem, 1.4vw, 24px); line-height: clamp(1.5rem, 1.7vw, 34px); color: #1b1e4c; margin-bottom: 5%}
.product_list ul li a:hover div.sub h3 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.2rem, 1.4vw, 24px); line-height: clamp(1.5rem, 1.7vw, 34px); color: #721c89; margin-bottom: 5%}
.product_list ul li a div.sub p {width:100%; overflow: hidden; text-align: left; font-size: clamp(1rem, 1.2vw, 16px); line-height: clamp(1.2rem, 1.3vw, 22px); color: #666; margin-top: 2%}
.product_list ul li a div.sub em {font-size: clamp(1.5rem, 1.6vw, 34px); transition: all 0.2s linear 0s}
.product_list ul li a:hover div.sub em {font-size: clamp(1.5rem, 1.6vw, 34px); margin-left: 10px; transition: all 0.2s linear 0s}

/*contact*/
.contact_banner {width:100%; overflow: hidden; margin-top: 96px; height: 240px; background: linear-gradient(180deg, #fbfbfb 0%, #f4edf5 100%); border-bottom: 1px solid #ddd}
.contact_banner div.m {width:1300px; overflow: hidden; height: 240px;}
.contact_banner div.m h2 {width:100%; overflow: hidden; text-align: center; font-size: clamp(1.8rem, 2vw, 40px); color: #1b1e4c; text-transform:uppercase; margin-left: 6%}
.contact_banner div.m nav {width:100%; overflow: hidden; text-align: center; margin-left: 6%; margin-top: 2%; color: #1b1e4c}
.contact_banner div.m nav em {width:auto; display: block; font-size: clamp(1.1rem, 1.3vw, 20px); color: #1b1e4c; margin-right: 2px;}
.contact_banner div.m nav a {width:auto; overflow: hidden; display: block; color: #1b1e4c; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}
.contact_banner div.m nav a:hover {width:auto; overflow: hidden; display: block; color: #721c89; text-decoration: underline; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}


.contactmain {width:1300px; margin: 0px auto; margin-top: 5%; margin-bottom: 5%}
.contactmain div.l {width:40%; overflow: hidden}
.contactmain div.l h2 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.3rem, 1.6vw, 30px); line-height: clamp(1.7rem, 1.9vw, 42px); color: #333; margin-bottom: 4%}
.contactmain div.l dl {width:100%; margin-bottom: 1%;}
.contactmain div.l dl dt {width:40px; overflow: hidden; height: 50px; text-align: left; line-height: 50px; font-size: clamp(1.3rem, 1.6vw, 30px); color: #333}
.contactmain div.l dl dd {width:90%; overflow: hidden; text-align: left; font-size: clamp(1.1rem, 1.4vw, 20px); padding-top: 6px;}


.contactmain div.r {width:56%; overflow: hidden; padding: 3%; border-radius: 8px; border: 1px solid #ddd; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow;}
.contactmain div.r h3 {width:60%; overflow: hidden; text-align: left; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.2rem, 1.4vw, 24px); color: #333; margin-bottom: 2%}
.contactmain div.r form {width:100%;}
.contactmain div.r form input {width:49%; overflow: hidden; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px;}
.contactmain div.r form input::placeholder {color:#666}
.contactmain div.r form select {width:49%; overflow: hidden; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px; color:#666; background: url("../images/xjt.png") right no-repeat}
.contactmain div.r form textarea {width:100%; overflow: hidden; min-height: 120px; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px; margin-bottom: 2%}
.contactmain div.r form button {width:100%; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1.5%; padding-top: 1.5%; border-radius: 6px; background: linear-gradient(90deg, #13246a 0%, #721c89 100%); color: #fff; font-size: clamp(1rem, 1.2vw, 18px);}
.contactmain div.r form button:hover {width:100%; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1.5%; padding-top: 1.5%; border-radius: 6px; background: linear-gradient(90deg, #061453 0%, #5d0b73 100%); color: #fff; font-size: clamp(1rem, 1.2vw, 18px);}












/*fenye*/
.pagination {width:100%; overflow:hidden; margin-top:1%; margin-bottom: 4%}
.pagination li {display:inline-block!important;border:solid 1px #EBEBEB;border-radius:4px; background:#efefef; margin-left:0.2%; margin-right:0.2%; transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s; cursor:pointer}
.pagination li a {color:var(--color-text-regular);padding:12px 16px;line-height:18px;display:block;transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s}
.pagination li:hover {display:inline-block!important;border:solid 1px #721c89;border-radius:4px; background:#721c89; color: #fff; margin-left:0.2%; margin-right:0.2%; transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s; cursor:pointer}
.pagination li:hover a {color:var(--color-text-on-highlight);padding:12px 16px;line-height:18px;display:block;transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s}
.pagination li.active {display:inline-block!important;border:solid 1px #721c89;border-radius:4px; background:#721c89; color: #fff; margin-left:0.2%; margin-right:0.2%; transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s; cursor:pointer}
.pagination li.active a {color:var(--color-text-on-highlight);padding:12px 16px;line-height:18px;display:block;transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s}


/*blog show*/
.blogshow_nav {width:100%; overflow: hidden; height: 70px; border-bottom: 1px solid #ddd; margin-top: 96px; text-align: left; color: #333}
.blogshow_nav nav {width:1300px; overflow: hidden; height: 70px; margin: 0px auto}
.blogshow_nav nav em {width:auto; display: block; font-size: clamp(1.1rem, 1.3vw, 20px); color: #333; margin-right: 2px;}
.blogshow_nav nav a {width:auto; overflow: hidden; display: block; color: #333; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}
.blogshow_nav nav a:hover {width:auto; overflow: hidden; display: block; color: #721c89; text-decoration: underline; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}

.blogshowmain {width:1300px; margin: 0px auto; margin-top: 3%; margin-bottom: 5%}
.blogshowmain h1 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.6rem, 2vw, 34px); color: #1b1e4c; line-height:  clamp(1.9rem, 2.3vw, 42px)}
.blogshowmain div.data {width:100%; overflow: hidden; text-align: left; height: 46px; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-top: 7px;}
.blogshowmain div.data i {font-size: clamp(1.1rem, 1.2vw, 20px); color: #666}
.blogshowmain div.data span {width:auto; overflow: hidden; padding-left: 3px; padding-right: 25px; display: block; color: #666; font-size: clamp(1rem, 1.2vw, 16px)}
.blogshowmain figure {width:100%; overflow: hidden; height: auto; margin-top: 3%; display: block}
.blogshowmain figure img {width:100%; overflow: hidden; height: auto; display: block}
.blogshowmain figure figcaption {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.1rem, 1.3vw, 18px); margin-top: 1.2%; display: block; color: #333; line-height: clamp(1.4rem, 1.6vw, 30px); font-style: italic;}
.blogshowmain div.showsmian {width:100%; margin-top: 3%;}
.blogshowmain div.showsmian div.share {width:70px; position: sticky !important; top: 130px; padding-top: 1%; z-index: 99999}
.blogshowmain div.showsmian div.share em {width:60px; overflow: hidden; height: 60px; display: block; text-align: left; line-height: 60px; font-size: clamp(1.6rem, 2vw, 50px); color: #721c89}
.blogshowmain div.showsmian div.share a {width:60px; height: 60px; display: block; text-align: left; line-height: 60px; font-size: clamp(1.6rem, 2vw, 50px); color: #888; margin-top: 1%; position: relative}
.blogshowmain div.showsmian div.share a span {width:120px; overflow: hidden; height: 120px; display: block; border: 1px solid #ddd; background: #fff; position: absolute; left: 60px; top: 50%; margin-top: -60px; z-index: 999999; transition: all 0.2s linear 0s !important; opacity: 0; transform-origin: left center; transform: scale(0);}
.blogshowmain div.showsmian div.share a span img {width:100%; overflow: hidden; height: auto; display: block}
.blogshowmain div.showsmian div.share a:hover {width:60px; height: 60px; display: block; text-align: left; line-height: 60px; font-size: clamp(1.6rem, 2vw, 50px); color: #721c89; margin-top: 1%; position: relative}
.blogshowmain div.showsmian div.share a:hover span {width:120px; overflow: hidden; height: 120px; display: block; border: 1px solid #ddd; background: #fff; position: absolute; left: 70px; top: 50%; margin-top: -60px; z-index: 999999; transition: all 0.2s linear 0s !important; opacity: 1; transform-origin: left center; transform: scale(1);}
.blogshowmain div.showsmian div.share a:hover span img {width:100%; overflow: hidden; height: auto; display: block}

.blogshowmain div.showsmian div.sub {width:90%; text-align: left; font-size: clamp(1.1rem, 1.3vw, 18px); line-height: clamp(1.4rem, 1.6vw, 30px); color: #333; position: relative; z-index: 99}
.blogshowmain div.showsmian div.sub p {width:100%; overflow: hidden; display: block; margin-top: 1.5%; margin-bottom: 1.5%}
.blogshowmain div.showsmian div.sub h2 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: clamp(1.4rem, 1.7vw, 30px); line-height: clamp(1.7rem, 2vw, 42px); color: #1b1e4c}
.blogshowmain div.showsmian div.sub h3 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: clamp(1.2rem, 1.5vw, 24px); line-height: clamp(1.5rem, 1.8vw, 34px); color: #1b1e4c}
.blogshowmain div.showsmian div.sub h4 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: clamp(1.2rem, 1.3vw, 20px); line-height: clamp(1.3rem, 1.5vw, 26px); color: #1b1e4c}
.blogshowmain div.showsmian div.sub h5 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: clamp(1.2rem, 1.3vw, 20px); line-height: clamp(1.3rem, 1.5vw, 26px); color: #1b1e4c}
.blogshowmain div.showsmian div.sub h6 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: clamp(1.2rem, 1.3vw, 20px); line-height: clamp(1.3rem, 1.5vw, 26px); color: #1b1e4c}
.blogshowmain div.showsmian div.sub img {width:auto; overflow: hidden; height: auto; max-width: 100%; margin: 0px auto;margin-top: 1.2%; margin-bottom: 1.2%}

.blogshowmain div.showsmian div.sub div.faq {width:100%; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; padding: 2%; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; margin-top: 3%}
.blogshowmain div.showsmian div.sub div.faq div.tit {width:100%; overflow: hidden; padding-bottom: 2%; text-align: left; font-size: clamp(1.4rem, 1.7vw, 30px); line-height: clamp(1.7rem, 2vw, 42px); color: #1b1e4c; font-weight: bold; border-bottom: 1px solid #ddd}
.blogshowmain div.showsmian div.sub div.faq div.nr {width:100%; overflow: hidden; display: block; margin-top: 3%;}
.blogshowmain div.showsmian div.sub div.faq div.nr p strong {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.1rem, 1.3vw, 20px); line-height: clamp(1.4rem, 1.6vw, 32px); color: #1b1e4c}
.blogshowmain div.showsmian div.sub div.faq div.nr p {width:100%; overflow: hidden; text-align: left; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.3rem, 1.5vw, 24px); color: #666; margin-top: 1%}

.blogshowmain div.showsmian div.sub div.nextprv {width:100%; margin-top: 2%; padding-top: 3%; border-top: 1px solid #ddd}
.blogshowmain div.showsmian div.sub div.nextprv a {width:100%; overflow: hidden; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.3rem, 1.5vw, 24px); color: #1b1e4c; display: block; padding-bottom:0.5%; padding-top:0.5%}
.blogshowmain div.showsmian div.sub div.nextprv a:hover {width:100%; overflow: hidden; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.3rem, 1.5vw, 24px); color: #721c89; display: block; padding-bottom:0.5%; padding-top:0.5%}
.blogshowmain div.showsmian div.sub div.tags {width:100%; overflow:hidden; margin-top:2%; margin-bottom:2%; text-align:left; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.3rem, 1.5vw, 24px); color:#1b1e4c}
.blogshowmain div.showsmian div.sub div.tags a {color:#1b1e4c; margin-right:10px;}
.blogshowmain div.showsmian div.sub div.tags a:hover {color:#721c89; margin-right:10px;}



/*poduct show*/
.poductshow_nav {width:100%; overflow: hidden; height: 70px; border-bottom: 1px solid #ddd; margin-top: 96px; text-align: left; color: #333}
.poductshow_nav nav {width:1300px; overflow: hidden; height: 70px; margin: 0px auto}
.poductshow_nav nav em {width:auto; display: block; font-size: clamp(1.1rem, 1.3vw, 20px); color: #333; margin-right: 2px;}
.poductshow_nav nav a {width:auto; overflow: hidden; display: block; color: #333; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}
.poductshow_nav nav a:hover {width:auto; overflow: hidden; display: block; color: #721c89; text-decoration: underline; font-size: clamp(0.8rem, 1.2vw, 16px); margin-right: 10px; margin-left: 10px;}


.poductshowmian {width:1300px; overflow: hidden; margin: 0px auto; margin-top: 4%; margin-bottom: 2%}
.poductshowmian div.top {width:100%; overflow: hidden}
.poductshowmian div.top div.l {width:660px; position:relative}
.poductshowmian div.top div.r {width:600px; overflow: hidden}
.poductshowmian div.top div.r h1 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.6rem, 2vw, 42px); color: #1b1e4c; line-height:  clamp(1.9rem, 2.3vw, 56px)}
.poductshowmian div.top div.r h2 {width:100%; overflow: hidden; text-align: left; font-size: clamp(1.1rem, 1.3vw, 24px); color: #555; line-height:  clamp(1.3rem, 1.6vw, 32px); margin-top: 2%; font-weight: normal}
.poductshowmian div.top div.r div.massage {width:100%; overflow: hidden; margin-top: 3%; text-align: left; font-size: clamp(1rem, 1.2vw, 16px); line-height: clamp(1.3rem, 1.5vw, 26px)}
.poductshowmian div.top div.r div.massage strong {display:block; font-size: clamp(1.3rem, 1.6vw, 20px); padding-bottom: 1%; padding-top: 1%}
.poductshowmian div.top div.r div.massage p {width:100%; overflow: hidden; margin-top: 1%; text-align: left; font-size: clamp(1rem, 1.2vw, 16px); line-height: clamp(1.3rem, 1.5vw, 26px)}
.poductshowmian div.top div.r div.an {width:100%; overflow: hidden; margin-top: 4%}
.poductshowmian div.top div.r div.an a.dzfa {width:auto; overflow: hidden; padding: 5%; padding-top: 3%; padding-bottom: 3.3%; text-align: center; font-size: clamp(1.3rem, 1.6vw, 22px); color: #fff; background: linear-gradient(90deg, #13246a 0%, #721c89 100%); box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; border-radius: 8px;}
.poductshowmian div.top div.r div.an a.dzfa i {font-size: clamp(1.6rem, 1.8vw, 24px); line-height: clamp(1.6rem, 1.8vw, 24px)}
.poductshowmian div.top div.r div.an a.dzfa span {width:auto; display: block; padding-left: 8px; line-height: clamp(1.6rem, 1.8vw, 24px); margin-top: -4px;}
.poductshowmian div.top div.r div.an a.dzfa:hover {width:auto; overflow: hidden; padding: 5%; padding-top: 3%; padding-bottom: 3.3%; text-align: center; font-size: clamp(1.3rem, 1.6vw, 22px); color: #fff; background: linear-gradient(90deg, #091860 0%, #630e7b 100%); box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; border-radius: 8px;}
.poductshowmian div.top div.r div.an a.dzfa:hover i {font-size: clamp(1.6rem, 1.8vw, 24px); line-height: clamp(1.6rem, 1.8vw, 24px)}
.poductshowmian div.top div.r div.an a.dzfa:hover span {width:auto; display: block; padding-left: 8px; line-height: clamp(1.6rem, 1.8vw, 24px); margin-top: -4px;}

.poductshowmian div.top div.r div.an a.lxwm {width:auto; overflow: hidden; padding: 5%; padding-top: 3%; padding-bottom: 3.3%; text-align: center; font-size: clamp(1.3rem, 1.6vw, 22px); color: #fff; background: linear-gradient(0deg, #8c15aa 0%, #720f8c 100%); box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; border-radius: 8px; margin-left: 3%}
.poductshowmian div.top div.r div.an a.lxwm i {font-size: clamp(1.6rem, 1.8vw, 24px); line-height: clamp(1.6rem, 1.8vw, 24px)}
.poductshowmian div.top div.r div.an a.lxwm span {width:auto; display: block; padding-left: 8px; line-height: clamp(1.6rem, 1.8vw, 24px); margin-top: -4px;}
.poductshowmian div.top div.r div.an a.lxwm:hover {width:auto; overflow: hidden; padding: 5%; padding-top: 3%; padding-bottom: 3.3%; text-align: center; font-size: clamp(1.3rem, 1.6vw, 22px); color: #fff; background: linear-gradient(0deg, #620a79 0%, #4e0262 100%); box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; border-radius: 8px; margin-left: 3%}
.poductshowmian div.top div.r div.an a.lxwm:hover i {font-size: clamp(1.6rem, 1.8vw, 24px); line-height: clamp(1.6rem, 1.8vw, 24px)}
.poductshowmian div.top div.r div.an a.lxwm:hover span {width:auto; display: block; padding-left: 8px; line-height: clamp(1.6rem, 1.8vw, 24px); margin-top: -4px;}

.poductshowmian div.productdetails {width:100%; margin-top: 4%}


.poductshowmian div.nextprv {width:100%; margin-top: 2%; padding-top: 3%; border-top: 1px solid #ddd}
.poductshowmian div.nextprv a {width:100%; overflow: hidden; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.3rem, 1.5vw, 24px); color: #1b1e4c; display: block; padding-bottom:0.5%; padding-top:0.5%}
.poductshowmian div.nextprv a:hover {width:100%; overflow: hidden; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.3rem, 1.5vw, 24px); color: #721c89; display: block; padding-bottom:0.5%; padding-top:0.5%}
.poductshowmian div.tags {width:100%; overflow:hidden; margin-top:2%; margin-bottom:2%; text-align:left; font-size: clamp(1rem, 1.2vw, 18px); line-height: clamp(1.3rem, 1.5vw, 24px); color:#1b1e4c}
.poductshowmian div.tags a {color:#1b1e4c; margin-right:10px;}
.poductshowmian div.tags a:hover {color:#721c89; margin-right:10px;}



.pdt-tabs{
  width:100%;
  --f-tab:clamp(14px,12.9px + .29vw,17px);
  --f-h2:clamp(20px,17px + .76vw,28px); 
  --f-h3:clamp(17px,14.8px + .57vw,23px); 
  --f-h4:clamp(17px,15.9px + .29vw,20px); 
  --f-h5:clamp(15px,13.9px + .29vw,18px);
  --f-h6:clamp(13px,11.9px + .29vw,16px); 
  --f-p:clamp(14px,13.3px + .19vw,16px); 
}

.pdt-nav{position:relative;display:flex;background:rgba(120,120,128,.12);border-radius:10px;padding:2px}
.pdt-tab{flex:1;padding:10px 4px;border:none;background:none;border-radius:8px;font-size:var(--f-tab);font-weight:600;color:#6e6e73;cursor:pointer;transition:color .3s;z-index:1;white-space:nowrap}
.pdt-tab:hover{color:#1d1d1f}
.pdt-tab.pdt-on{color:#fff}
.pdt-bar{position:absolute;top:2px;left:0;width:calc((100% - 4px)/3);height:calc(100% - 4px);border-radius:8px;background:#721c89;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform .35s cubic-bezier(.25,.46,.45,.94),width .35s cubic-bezier(.25,.46,.45,.94)}

.pdt-body{margin-top:18px}
.pdt-panel{display:none}
.pdt-panel.pdt-on{display:block;animation:pdtFadeUp .45s cubic-bezier(.25,.46,.45,.94)}
.pdt-panel.pdt-on h3 {font-size:18px; margin-top:20px; margin-bottom:6px;}
@keyframes pdtFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pdt-rich table{
  width:100%!important;max-width:100%!important;margin:10px 0 20px!important;
  border-collapse:collapse!important;border-spacing:0!important; /* 压 cellspacing/separate */
  background:transparent!important;border:none!important;         /* 去底色、去整表外框 */
  font-family:inherit!important;font-size:var(--f-p)!important;line-height:1.6;color:#1d1d1f;
  table-layout:auto}
.pdt-rich tbody,.pdt-rich tr{background:transparent!important} /* 去编辑器行/斑马底色 */
.pdt-rich th,.pdt-rich td{
  padding:10px 14px!important;          /* 压 cellpadding / 内联 padding */
  border:none!important;                /* 压 border 属性与内联单元格边框 */
  border-bottom:1px solid rgba(0,0,0,.08)!important; /* 只保留本站下分隔线 */
  background:transparent!important;color:inherit!important;
  font-family:inherit!important;font-size:var(--f-p)!important;
  text-align:left!important;            /* 压编辑器常用 center */
  vertical-align:middle;word-break:break-word}
/* 语义表头行（编辑器表格若带 thead，表头更醒目） */
.pdt-rich thead th{border-bottom:1px solid rgba(0,0,0,.16)!important;color:#1d1d1f!important}
/* 表标题（<caption>）统一为灰色小标题 */
.pdt-rich caption{caption-side:top;text-align:left!important;padding:0 2px 8px!important;
  font-size:.9em!important;font-weight:600!important;color:#6e6e73!important;
  background:transparent!important;border:none!important}
/* 表格内嵌图片/链接不撑破单元格 */
.pdt-rich table img{max-width:100%;height:auto}
/* 文章详情排版（Product Details） */
.pdt-article h2{font-size:var(--f-h2);font-weight:700;margin:26px 0 10px;letter-spacing:-.01em}
.pdt-article h3{font-size:var(--f-h3);font-weight:600;margin:22px 0 8px}
.pdt-article h4{font-size:var(--f-h4);font-weight:600;margin:18px 0 6px;color:#1d1d1f}
.pdt-article h5{font-size:var(--f-h5);font-weight:600;margin:16px 0 6px;color:#424245}
.pdt-article h6{font-size:var(--f-h6);font-weight:600;margin:14px 0 6px;color:#6e6e73;text-transform:uppercase;letter-spacing:.03em}
.pdt-article h2:first-child,.pdt-article h3:first-child{margin-top:0}
.pdt-article p{font-size:var(--f-p);line-height:1.75;color:#424245;margin:0 0 12px}
.pdt-article img{display:block;width:auto; max-width:100%; margin:0px auto; border-radius:14px; margin-top:20px;}
.pdt-article1 img{display:block;width:auto; max-width:100%; margin:0px auto; border-radius:0px; margin-top:0px;}
/* FAQ 手风琴（JS 高度动画，开合双向丝滑） */
.pdt-faq{border-bottom:1px solid rgba(0,0,0,.08)}
.pdt-q{width:100%;padding:14px 2px;font:600 var(--f-p)/1.4 -apple-system,"Helvetica Neue",sans-serif;color:#1d1d1f;text-align:left;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none;-webkit-tap-highlight-color:transparent}
.pdt-q::after{content:'+';flex:none;font-size:1.2em;font-weight:400;color:#721c89;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.pdt-faq.pdt-open .pdt-q::after{transform:rotate(45deg)}
.pdt-a{height:0;overflow:hidden;transition:height .45s cubic-bezier(.25,.46,.45,.94)}
.pdt-faq .pdt-in p{padding:0 2px 14px;margin:0;font-size:var(--f-p);transform:translateY(-6px);opacity:0;transition:transform .4s cubic-bezier(.25,.46,.45,.94),opacity .4s}
.pdt-faq.pdt-open .pdt-in p{transform:none;opacity:1;transition-delay:.1s}
@media(max-width:480px){.pdt-tab{font-size:13px;padding:9px 2px}.pdt-rich th,.pdt-rich td{padding:8px 10px!important}}





/* 主图 */
.main{position:relative;width:660px;max-width:100%;aspect-ratio:1;overflow:hidden;border-radius:12px;background:#fff;cursor:crosshair;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.main img.show{opacity:1;animation:pop .5s cubic-bezier(.25,.46,.45,.94)}
@keyframes pop{from{transform:scale(1.05)}to{transform:scale(1)}}
.main.z img.show{transform:scale(2)}
.lens{position:absolute;top:0;left:0;width:140px;height:140px;border:2px solid #0071e3;background:rgba(0,113,227,.12);opacity:0;pointer-events:none;z-index:2}
/* 浮动放大层 */
.zoom{position:absolute;top:0;left:calc(100% + 20px);width:420px;height:420px;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 8px 32px rgba(0,0,0,.12);opacity:0;pointer-events:none;z-index:10}
.zoom div{width:100%;height:100%;background-repeat:no-repeat}
.lens.show,.zoom.show{opacity:1}
/* 缩略图（尺寸由 JS 按轨道宽度动态计算，保证整数张正好铺满） */
.thumbs{position:relative;margin-top:14px;height:120px}
.track{height:100%;overflow:hidden;margin:0 30px;padding:4px 0 0 4px}
.track ul{display:flex;gap:4px;height:100%;list-style:none;transition:transform .45s cubic-bezier(.25,.46,.45,.94)}
.thumb{flex:0 0 116px;height:116px;overflow:hidden;border:2px solid transparent;border-radius:6px;cursor:pointer;background:#fff;transition:all .25s}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{transform:translateY(-2px)}
.thumb.on{border-color:#0071e3;box-shadow:0 4px 12px rgba(0,113,227,.25);transform:translateY(-2px)}
/* 左右按钮 */
.btn{position:absolute;top:4px;width:26px;height:116px;border:none;border-radius:6px;background:rgba(232,232,237,.95);font-size:18px;color:#6e6e73;cursor:pointer;z-index:2}
.btn:hover:not(:disabled){background:#d2d2d7;color:#1d1d1f}
.btn:disabled{opacity:.35;cursor:not-allowed}
.prev{left:0}.next{right:0}
/* 响应式 */
@media(max-width:1119px){.zoom{display:none}}
@media(max-width:768px){.gallery,.main{width:100%}.btn{width:24px}.track{margin:0 28px}}
@media(max-width:480px){.btn{width:22px}.track{margin:0 24px}}




/*xg prdouct*/
.xgproduct {width:100%; margin: 0px auto; padding-top: 4%; padding-bottom: 4%; background: #f8f8f8}
.xgproduct h2 {width:100%; text-align: center; color: var(--color-primary); display: block; font-size: clamp(1rem, 2.4vw, 34px)}
.xgproductlist {width:1340px; margin: 0px auto; margin-top: 2.4%; position: relative}
.xgproductlist  div.swiper-button-next {width:80px; overflow: hidden; height: 80px; position: absolute; top: 50%; right: -120px; margin-top: -40px; color: #353535}
.xgproductlist  div.swiper-button-prev {width:80px; overflow: hidden; height: 80px; position: absolute; top: 50%; left: -120px; margin-top: -40px; color: #353535}





.fql-wrap{
  --f-t:clamp(20px,1rem + .5vw,26px);
  --f-c:clamp(13px,.65rem + .35vw,15px);
  --f-q:clamp(14px,.75rem + .4vw,17px);
  --f-a:clamp(13px,.7rem + .35vw,16px);
  width:100%;max-width:1300px;margin:0 auto;padding:0 clamp(16px,3vw,48px);
  display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px); margin-top: 3%; margin-bottom: 2%
}
.fql-title{font-size:var(--f-t);font-weight:700;letter-spacing:-.01em}
.fql-sub{margin-top:4px;font-size:var(--f-a);color:#6e6e73;line-height:1.6}
.fql-cats{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
.fql-cat{
  padding:7px 16px;border:none;border-radius:999px;background:rgba(120,120,128,.12);
  font:600 var(--f-c)/1.2 -apple-system,"Helvetica Neue",sans-serif;color:#6e6e73;
  cursor:pointer;transition:background .3s,color .3s,transform .25s cubic-bezier(.25,.46,.45,.94);
  -webkit-tap-highlight-color:transparent
}
.fql-cat:hover{background:rgba(120,120,128,.2)}
.fql-cat.fql-cur{background:#721c89;color:#fff}
.fql-group{display:none;flex-direction:column;gap:clamp(20px,2.5vw,36px)}
.fql-group.fql-cur{display:flex;animation:fqlIn .45s cubic-bezier(.25,.46,.45,.94)}
@keyframes fqlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fql-h2{font-size:var(--f-q);font-weight:700;color:#6e6e73;text-transform:uppercase;letter-spacing:.05em;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
.fql-list{background:#fff;border-radius:clamp(12px,1.2vw,18px);box-shadow:0 2px 12px rgba(0,0,0,.05);overflow:hidden}
.fql-item{border-bottom:1px solid rgba(0,0,0,.06)}
.fql-item:last-child{border-bottom:none}
.fql-q{
  width:100%;padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,26px);
  font:600 var(--f-q)/1.45 -apple-system,"Helvetica Neue",sans-serif;color:#1d1d1f;
  text-align:left;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background .25s
}
.fql-q:hover{background:rgba(120,120,128,.05)}
.fql-q::after{
  content:'+';flex:none;font-size:calc(var(--f-q) + 4px);font-weight:400;color:#721c89;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94)
}
.fql-item.fql-open .fql-q::after{transform:rotate(45deg)}
.fql-a{height:0;overflow:hidden;transition:height .45s cubic-bezier(.25,.46,.45,.94)}
.fql-a-in{padding:0 clamp(16px,2vw,26px) clamp(14px,1.6vw,20px)}
.fql-a-in p{font-size:var(--f-a);line-height:1.75;color:#424245;transform:translateY(-6px);opacity:0;transition:transform .4s cubic-bezier(.25,.46,.45,.94),opacity .4s}
.fql-item.fql-open .fql-a-in p{transform:none;opacity:1;transition-delay:.1s}









.spc{
  --spc-ac:#721c89;
  --spc-ink:#1d1d1f;
  --spc-mut:#6e6e73;
  --spc-line:rgba(20,20,24,.09);
  --spc-bg:#ffffff;
  --f-h1:clamp(28px,1.5rem + 1.3vw,40px);
  --f-sub:clamp(15px,.78rem + .5vw,17px);
  --f-tab:clamp(14px,.72rem + .45vw,16px);
  --f-h2:clamp(20px,1.1rem + .6vw,26px);
  --f-h3:clamp(17px,.92rem + .45vw,21px);
  --f-p:clamp(14px,.7rem + .5vw,16px);
  --spc-ease:cubic-bezier(.25,.46,.45,.94);
  --spc-pad:clamp(16px,.6rem + 1.6vw,32px);
  margin:0;padding:0;
  background:var(--spc-bg);color:var(--spc-ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.spc *{box-sizing:border-box;margin:0;padding:0}
.spc-in{width:100%;max-width:1300px;margin:0 auto;padding: clamp(32px, 1.6rem + 2vw, 64px) 0 clamp(56px, 3rem + 2vw, 96px);}

/* ---- head ---- */
.spc-title{font-size:var(--f-h1);line-height:1.18;font-weight:700;letter-spacing:-.01em}
.spc-sub{margin-top:clamp(8px,.4rem + .35vw,12px);font-size:var(--f-sub);line-height:1.7;color:var(--spc-mut);max-width:56ch}
.spc-date{margin-top:14px;font-size:clamp(12px,.62rem + .3vw,13px);line-height:1;color:var(--spc-mut);opacity:.8;letter-spacing:.01em}

/* ---- category nav : sticky frosted bar, bleeds to container edges ---- */
.spc-nav{
position: sticky;
top: 0;
z-index: 30;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;                       /* 去掉负外边距，左右边距为0，不超出父级 */
padding: 14px 0 clamp(20px, 1rem + 0.8vw, 26px);
background: rgba(255,255,255,.86);
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--spc-line);
}
.spc-tab{
  appearance:none;border:1px solid transparent;cursor:pointer;
  padding:9px 20px;border-radius:999px;
  font:inherit;font-size:var(--f-tab);font-weight:600;color:var(--spc-mut);background:rgba(20,20,24,.05);
  transition:background .3s var(--spc-ease),color .3s var(--spc-ease),box-shadow .3s var(--spc-ease),transform .3s var(--spc-ease);
}
.spc-tab:hover{background:rgba(20,20,24,.09);color:var(--spc-ink)}
.spc-tab:active{transform:scale(.97)}
.spc-tab.spc-on{background:var(--spc-ac);color:#fff;box-shadow:0 3px 12px rgba(114,28,137,.28)}
.spc-tab:focus-visible{outline:2px solid var(--spc-ac);outline-offset:2px}

/* ---- section : article flow ---- */
.spc-sec{display:none;padding-top:clamp(28px,1.4rem + 1.2vw,44px)}
.spc-sec.spc-on{display:block;animation:spcIn .55s var(--spc-ease) both}
@keyframes spcIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.spc-sec-t{font-size:var(--f-h2);line-height:1.3;font-weight:700;letter-spacing:-.01em;margin-bottom:clamp(24px,1.2rem + 1vw,36px)}
.spc-art{padding-top:clamp(26px,1.3rem + 1vw,40px);margin-top:clamp(26px,1.3rem + 1vw,40px);border-top:1px solid var(--spc-line)}
.spc-art:first-of-type{border-top:0;padding-top:0;margin-top:0}
.spc-art-t{font-size:var(--f-h3);line-height:1.35;font-weight:600}
.spc-art p{font-size:var(--f-p);line-height:1.75;color:var(--spc-ink);margin-top:10px}
.spc-art ul{font-size:var(--f-p);line-height:1.75;color:var(--spc-ink);margin:10px 0 0;padding-left:1.2em;list-style:disc}
.spc-art li{margin-top:4px}
.spc-art li::marker{color:var(--spc-ac)}
.spc-art b,.spc-art strong{font-weight:600;color:var(--spc-ink)}

/* ---- reduced motion : must stay after section rules to win the cascade ---- */
@media (prefers-reduced-motion:reduce){
  .spc-sec.spc-on{animation:none}
  .spc-tab{transition:none}
}






/*侧边栏开始*/
.side-service{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:9999;display:flex;flex-direction:column;background:#fff;border-radius:14px 0 0 14px;box-shadow:-3px 4px 20px rgba(0,0,0,.08),-1px 2px 6px rgba(0,0,0,.04)}
.side-service .svc-item{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;transition:background .3s ease,color .3s ease;text-decoration:none;color:#7B2CBF;border:none}
.side-service .svc-item:first-child{border-radius:14px 0 0 0}
.side-service .svc-item:nth-last-child(2){border-radius:0px 14px 0 0}
.side-service .svc-item + .svc-item{border-top:1px solid #f0f0f3}
.side-service .svc-item:hover{background:linear-gradient(135deg,#13246a,#721c88);color:#fff}
.svc-wechat .qr-pop{position:absolute;right:66px;top:50%;transform:translateY(-50%) scale(.9);transform-origin:right center;background:#fff;border-radius:14px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,.14);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .35s cubic-bezier(.22,.61,.36,1),visibility .3s;white-space:nowrap;z-index:10}
.svc-wechat .qr-pop::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%) rotate(45deg);width:12px;height:12px;background:#fff}
.svc-wechat .qr-pop img{display:block;width:120px;height:120px;object-fit:contain;border-radius:6px}
.svc-wechat .qr-pop p{font-size:12px;color:#6e6e73;text-align:center;margin-top:8px;line-height:1}
.svc-wechat:hover .qr-pop{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
.svc-top{max-height:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-height .35s cubic-bezier(.22,.61,.36,1),opacity .3s ease,visibility .3s}
.svc-top.show{max-height:52px;opacity:1;visibility:visible}

@media(max-width:1024px){
.side-service{top:auto;right:auto;left:50%;bottom:0;transform:translateX(-50%);flex-direction:row;border-radius:14px 14px 0 0;box-shadow:0 -3px 20px rgba(0,0,0,.08),0 -1px 6px rgba(0,0,0,.04)}
.side-service .svc-item{width:52px;height:52px}
.side-service .svc-item:first-child{border-radius:14px 0 0 0}
.side-service .svc-item + .svc-item{border-top:none;border-left:1px solid #f0f0f3}
.svc-top{display:none!important}
.svc-wechat .qr-pop{right:auto;left:50%;bottom:66px;top:auto;transform:translateX(-50%) scale(.9);transform-origin:center bottom}
.svc-wechat .qr-pop::after{right:auto;left:50%;top:auto;bottom:-6px;transform:translateX(-50%) rotate(45deg)}
.svc-wechat:hover .qr-pop{transform:translateX(-50%) scale(1)}
}
@media(max-width:768px){
.side-service .svc-item{width:44px;height:44px}
.svc-wechat .qr-pop{bottom:56px;padding:10px}
.svc-wechat .qr-pop img{width:96px;height:96px}
}
/*侧边栏开始结束*/




/*product news*/
.top-bar{display:flex;justify-content:center;padding:72px 20px 52px}
.search-wrap{width:100%;max-width:700px;position:relative}
.search-wrap svg.search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:#86868b;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.search-wrap input{width:100%;padding:18px 50px 18px 52px;border-radius:100px;border:1px solid var(--line);background:#fff;font-size:16px;color:var(--ink);outline:none;box-shadow:0 4px 16px rgba(0,0,0,.03);transition:all .3s cubic-bezier(.25,.46,.45,.94);font-family:inherit}
.search-wrap input:focus{border-color:var(--p);box-shadow:0 0 0 4px rgba(123,44,191,.12),0 8px 24px rgba(123,44,191,.08)}
.search-wrap input:focus + svg.search-icon{stroke:var(--p)}
.search-wrap .clear-btn{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:none;background:rgba(0,0,0,.06);border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .2s}
.search-wrap .clear-btn:hover{background:rgba(0,0,0,.12)}
.search-wrap .clear-btn svg{width:12px;height:12px;stroke:#86868b;stroke-width:2.5}
.search-wrap .clear-btn.show{display:flex}
.container{max-width:1300px;margin:0 auto;padding:0 24px 60px;display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
.sidebar{background:#fff;border-radius:20px;padding:26px 22px;box-shadow:0 4px 20px rgba(0,0,0,.03);position:sticky;top:150px;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:#d1d1d6;border-radius:4px}
.cat-all{display:flex;align-items:center;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px;color:#424245;transition:color .25s,background .25s;margin-bottom:16px;background:rgba(123,44,191,.05);font-weight:600}
.cat-all:hover{color:var(--p);background:rgba(123,44,191,.1)}
.cat-all input{appearance:none;width:18px;height:18px;border:2px solid #d1d1d6;border-radius:4px;margin-right:12px;position:relative;flex-shrink:0;transition:all .2s;pointer-events:none}
.cat-all input:checked{background:var(--p);border-color:var(--p)}
.cat-all input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cat-item{display:flex;align-items:center;padding:2px 12px;border-radius:10px;cursor:pointer;font-size:14px;color:#424245;transition:color .25s,background .25s;margin-bottom:6px;font-weight:500;user-select:none;-webkit-tap-highlight-color:transparent}
.cat-item:hover{color:var(--p);background:rgba(123,44,191,.1)}
.cat-item input,.cat-all input{appearance:none;width:18px;height:18px;border:2px solid #d1d1d6;border-radius:4px;margin-right:12px;position:relative;flex-shrink:0;transition:all .2s;pointer-events:none}
.cat-item input:checked,.cat-all input:checked{background:var(--p);border-color:var(--p)}
.cat-item input:checked::after,.cat-all input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cat-item input:checked + span,.cat-all input:checked + span{color:var(--p);font-weight:600}
.group-block{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.group-block:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.group-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:6px 8px;border-radius:8px;transition:background .25s;margin-bottom:6px}
.group-head:hover{background:rgba(123,44,191,.06)}
.group-head .title{display:flex;align-items:center;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.group-head .title::before{content:"";width:3px;height:14px;border-radius:3px;background:var(--g);margin-right:9px}
.group-head .count{font-size:11px;color:var(--muted);background:#f5f5f7;padding:2px 8px;border-radius:100px;font-weight:500}
.group-head:hover .title{color:var(--p)}
.subs{list-style:none;display:flex;flex-direction:column;gap:2px}
.sub-item{display:flex;align-items:center;padding:2px 12px;border-radius:8px;cursor:pointer;font-size:13.5px;color:#515154;transition:color .25s,background .25s;user-select:none;-webkit-tap-highlight-color:transparent}
.sub-item:hover{color:var(--p);background:rgba(123,44,191,.06)}
.sub-item input{appearance:none;width:16px;height:16px;border:2px solid #d1d1d6;border-radius:4px;margin-right:10px;position:relative;flex-shrink:0;transition:all .2s;pointer-events:none}
.sub-item input:checked{background:var(--p);border-color:var(--p)}
.sub-item input:checked::after{content:"";position:absolute;left:3px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sub-item input:checked + span{color:var(--p);font-weight:600}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;align-items:start}
/* 卡片改为 <a> 链接：去掉默认下划线、继承颜色 */
.card{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.04);transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1);cursor:pointer;animation:cardIn .5s both}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 48px -12px rgba(123,44,191,.28),0 6px 18px rgba(0,0,0,.04)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card-img-wrap{position:relative;background:#f8f9fb;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:20px;min-height:120px}
.card-img-wrap img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-img-wrap img{transform:scale(1.04)}
.featured-tag{position:absolute;top:16px;left:16px;background:var(--g);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.04em;text-transform:uppercase;z-index:2}
.card-body{padding:20px}
.card-body h4{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink);transition:color .3s}
.card:hover .card-body h4{color:var(--p)}
.card-body p{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty-state{display:none;grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--muted)}
.empty-state.show{display:block}
.empty-state span{display:block;font-size:48px;margin-bottom:16px;opacity:.4}

/* ===== 分页 ===== */
.pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin:48px 0 20px;flex-wrap:wrap;grid-column:1/-1}
.pagination ul{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap;justify-content:center}
.pagination li{list-style:none}
.pagination li a,.pagination li span{display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:10px;background:#fff;border:1px solid var(--line);color:#424245;font-size:14px;text-decoration:none;cursor:pointer;transition:all .25s ease;font-family:inherit;line-height:1}
.pagination li a:hover{background:rgba(123,44,191,.06);border-color:var(--p);color:var(--p)}
.pagination li.active a,.pagination li.active span,.pagination li.cur a,.pagination li.cur span{background:var(--g);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 6px 16px -6px rgba(123,44,191,.5)}
.pagination li.disabled a,.pagination li.disabled span{color:#c7c7cc;cursor:not-allowed;background:#f5f5f7;border-color:#f0f0f3}
.pagination .page-info{font-size:14px;color:var(--muted);margin-left:8px}

@media(max-width:960px){
.top-bar{padding:44px 16px 32px}
.container{grid-template-columns:1fr;gap:24px;padding:0 16px 40px}
.sidebar{position:static;max-height:none;padding:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.cat-all{margin:0;flex:0 0 auto;background:#f5f5f7}
.cat-item{margin:0;flex:0 0 auto;background:#f5f5f7;padding:2px 14px;border-radius:100px;font-size:13px}
.cat-item input,.cat-all input{display:none}
.group-block{margin:0;padding:0;border:none;flex:0 0 auto}
.group-head{background:#f5f5f7;margin-bottom:0;padding:8px 14px;border-radius:100px}
.group-head .count{display:none}
.subs{display:none}
.pagination li a,.pagination li span{min-width:38px;height:38px;font-size:13px;padding:0 12px}
}
@media(max-width:600px){
.top-bar{padding:18vw 16px 24px}
.search-wrap input{padding:15px 44px 15px 44px;font-size:15px}
.search-wrap svg.search-icon{left:16px;width:18px;height:18px}
.search-wrap .clear-btn{right:16px}
.product-grid{grid-template-columns:1fr;gap:16px}
.card-img-wrap{padding:16px}
.card-body{padding:18px}
.pagination li a,.pagination li span{min-width:34px;height:34px;font-size:12.5px;padding:0 10px;border-radius:8px}
.pagination .page-info{width:100%;text-align:center;margin:6px 0 0}
}


/*product banner*/
.kmd-hero-banner-module{display:flex;width:100%;overflow:hidden; margin-top:96px}
.kmd-hero-banner-module__content{flex:1 1 50%;color:#fff;display:flex;align-items:center;justify-content:flex-end}
.kmd-hero-banner-module__inner{width:100%;max-width:650px;padding:0px}
.kmd-hero-banner-module__crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.65);margin-bottom:22px;line-height:1.6}
.kmd-hero-banner-module__crumbs em{font-size:15px;color:rgba(255,255,255,.75);margin-right:2px;font-style:normal}
.kmd-hero-banner-module__crumbs a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .3s ease}
.kmd-hero-banner-module__crumbs a:hover{color:#fff}
.kmd-hero-banner-module__title{font-size:clamp(28px,4vw,52px);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-bottom:18px; color:#fff}
.kmd-hero-banner-module__subtitle{font-size:clamp(14px,1.2vw,17px);line-height:1.7;color:rgba(255,255,255,.82);max-width:560px}
.kmd-hero-banner-module__media{flex:1 1 50%;position:relative;min-height:620px; overflow:hidden}
.kmd-hero-banner-module__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.kmd-hero-banner-module:hover .kmd-hero-banner-module__media img{transform:scale(1.04)}
@media(max-width:900px){
.kmd-hero-banner-module{flex-direction:column}
.kmd-hero-banner-module__content{flex:none;justify-content:flex-start}
.kmd-hero-banner-module__inner{max-width:100%;padding:48px 28px 52px}
.kmd-hero-banner-module__media{flex:none;width:100%;height:260px;min-height:260px}
.kmd-hero-banner-module__crumbs{font-size:12px;margin-bottom:16px}
.kmd-hero-banner-module__subtitle{max-width:100%}
}
@media(max-width:480px){
.kmd-hero-banner-module__inner{padding:36px 20px 40px}
.kmd-hero-banner-module__media{height:200px;min-height:200px}
}


/*首页产品列表修改*/
.xcp-product-quad-module{width:100%;background:#f8f8f8;padding:0px 24px; padding-bottom:4%;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif}
.xcp-product-quad-module__inner{max-width:1300px;margin:0 auto}
.xcp-product-quad-module__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.xcp-product-quad-module__card{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.04);transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1);cursor:pointer}
.xcp-product-quad-module__card:hover{transform:translateY(-8px);box-shadow:0 24px 48px -12px rgba(123,44,191,.28),0 6px 18px rgba(0,0,0,.04)}
.xcp-product-quad-module__media{position:relative;background:#f8f9fb;overflow:hidden;padding:20px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.xcp-product-quad-module__media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.xcp-product-quad-module__card:hover .xcp-product-quad-module__media img{transform:scale(1.06)}
.xcp-product-quad-module__model{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#13246a,#721c88);padding:4px 10px;border-radius:6px}
.xcp-product-quad-module__title{padding:18px 20px 22px;font-size:clamp(1rem, 1.4vw, 18px);font-weight:600;line-height:1.45;color:#1d1d1f;transition:color .3s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; text-align:center}
.xcp-product-quad-module__card:hover .xcp-product-quad-module__title{color:#7B2CBF}
.xcp-product-quad-module__more{display:flex;justify-content:center;margin-top:52px}
.xcp-product-quad-module__more a{display:inline-flex;align-items:center;gap:10px;padding:15px 38px;border-radius:100px;background:linear-gradient(135deg,#13246a,#721c88);color:#fff;font-size:15px;font-weight:600;text-decoration:none;letter-spacing:.02em;box-shadow:0 8px 24px -8px rgba(123,44,191,.5);transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease}
.xcp-product-quad-module__more a:hover{transform:translateY(-3px);box-shadow:0 14px 32px -10px rgba(123,44,191,.6)}
.xcp-product-quad-module__more a svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.xcp-product-quad-module__more a:hover svg{transform:translateX(4px)}
@media(max-width:1100px){
.xcp-product-quad-module{padding:64px 20px}
.xcp-product-quad-module__grid{grid-template-columns:repeat(3,1fr);gap:20px}
}
@media(max-width:900px){
.xcp-product-quad-module__grid{grid-template-columns:repeat(2,1fr);gap:18px}
.xcp-product-quad-module__media{padding:16px}
.xcp-product-quad-module__title{padding:15px 16px 18px;font-size:15px}
}
@media(max-width:768px){
.xcp-product-quad-module{padding:48px 16px}
.xcp-product-quad-module__grid{grid-template-columns:1fr;gap:16px}
.xcp-product-quad-module__media{padding:20px}
.xcp-product-quad-module__title{padding:16px 18px 20px;font-size:15.5px}
.xcp-product-quad-module__more{margin-top:36px}
.xcp-product-quad-module__more a{padding:13px 30px;font-size:14px}
}
@media(max-width:480px){
.xcp-product-quad-module{padding:40px 12px}
.xcp-product-quad-module__grid{gap:14px}
.xcp-product-quad-module__media{padding:16px}
.xcp-product-quad-module__card{border-radius:16px}
.xcp-product-quad-module__model{top:12px;left:12px;font-size:10px;padding:3px 8px}



.aboutzjd {width:100%; overflow:hidden; height:auto;}
.aboutzjd img {width:100%; overflow:hidden; height:auto; display:block}




/* ==========大屏手机 / 小平板（≤767px） ========== */
@media (max-width: 767px) {
.xcpnav-bar {display:none !important}
header {display:none}
header.mb {width:100%; height: 12.8vw; background: var(--gradient-primary-mbtop); position:fixed; top:0px; left:0px; z-index:99999; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(20px); padding-left:3%; padding-right:3%; display:flex}
header.mb div.logo {width:40%}
header.mb div.logo a {width:100%;}
header.mb div.logo a img {width:100%; overflow:hidden; height:auto; display:block}
header.mb div.ico {width:60%;}
header.mb div.ico a {width:5vw; height:5vw; text-align:right; line-height:5vw; font-size:5.6vw; color: var(--color-primary); display:block; margin-left:4%; position:relative}
header.mb div.ico a em {width:6rem; overflow:hidden; height:6rem; border:1px solid var(--color-bg-tint); position:absolute; top:8.3vw; left:50%; margin-left:-3rem; z-index:99; display:none}
header.mb div.ico a em img {width:100%; overflow:hidden; height:auto; display:block;}
header.mb div.ico a:hover {width:5vw; height:5vw; text-align:right; line-height:5vw; font-size:5.6vw; color: var(--color-primary-dark); display:block; margin-left:4%; position:relative}
header.mb div.ico a:hover em {width:6rem; overflow:hidden; height:6rem; border:1px solid var(--color-bg-tint); position:absolute; top:8.3vw; left:50%; margin-left:-3rem; z-index:99; display:block}
header.mb div.ico a:hover em img {width:100%; overflow:hidden; height:auto; display:block;}

.navmb {width:100%; height:100%; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(20px); position:fixed; top:0px; z-index:999999; transition: all 0.1s linear 0s !important; right:-100%; display:block}
.navmb div.tktop {width:100%; height: 12.8vw; background: #fff; padding-left:3%; padding-right:3%; display:flex}
.navmb div.tktop div.logo {width:40%}
.navmb div.tktop div.logo a {width:100%;}
.navmb div.tktop div.logo a img {width:100%; overflow:hidden; height:auto; display:block}
.navmb div.tktop div.ico {width:60%;}
.navmb div.tktop div.ico a {width:5vw; height:5vw; text-align:right; line-height:5vw; font-size:5.6vw; color: var(--color-primary); display:block; margin-left:4%;}
.navmb div.tktop div.ico a:hover {width:5vw; height:5vw; text-align:right; line-height:5vw; font-size:5.6vw; color: var(--color-primary-dark); display:block; margin-left:4%;}

.menu-item {border-bottom: 1px solid #eee;background: #fff; display:block}
.menu-item a.n {display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; font-size: 1rem; color: #333; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;}
.menu-item input {display: none;}
.menu-item label {display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; font-size: 1rem; color: #333; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;}
.menu-item label::after {content: "+"; font-size: 20px; color: #999; transition: transform 0.3s ease;}
.menu-item input:checked + label::after {transform: rotate(45deg);}
.sub-menu {max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #fafafa;}
.menu-item input:checked ~ .sub-menu {max-height: 600px;}
.sub-menu a {display: block; padding: 10px 40px; font-size: 1rem; color: #666; text-decoration: none; border-bottom: 1px solid #f0f0f0;}
.sub-menu a:last-child {border-bottom: none;}
.sub-menu a:active {background: #f0f0f0; color: #007aff;}
.mbahover {color:var(--color-primary) !important}

/*搜索弹框*/
.searchtk {width:100%; overflow:hidden; height:100%; position:fixed; top:-100%; left:0px; z-index:9999999; background:rgba(0,0,0,0.8); transition: all 0.1s linear 0s !important;}
.searchtk div.m {width:80%; overflow:hidden; padding:5%; margin:0px auto; background:#fff; border-radius:10px; position:relative}
.searchtk div.m i {width:40px; overflow:hidden; height:40px; position:absolute; top:10px; right:0px; z-index:999; color:#333; line-height:40px; font-size:clamp(20px, calc(22 / 2560 * 100vw), 22px); display:block; cursor:pointer}
.searchtk div.m h3 {width:100%; text-align:left; font-size:1.1rem; color:#333}
.searchtk div.m form {width:100%; overflow:hidden; margin-top:2%; flex-wrap:wrap;}
.searchtk div.m form input {width:100%; overflow:hidden; height:40px; border:1px solid #ddd; background:#fcfcfc; padding-left:15px; padding-right:15px; border-radius:5px; font-size:1rem;}
.searchtk div.m form button {width:100%; overflow:hidden; height:40px; border:0px; background:var(--gradient-primary); border-radius:5px; color:#fff; font-size:1rem; cursor:pointer; margin-top:2%}
.searchtk div.m form button em {font-size:1.2rem; display:block; line-height:1.2rem; margin-right:5px; margin-top:2px;}
.searchtk div.m form button:hover {width:100%; overflow:hidden; height:40px; border:0px; background:var(--gradient-primary-hover); border-radius:5px; color:#fff; font-size:1rem; cursor:pointer; margin-top:2%}
.searchtk div.m form button:hover em {font-size:1.2rem; display:block; line-height:1.2rem; margin-right:5px; margin-top:2px;}

/*topbanner*/
.topbannermain {width:100%; height:auto; position:relative; margin-top:12.8vw}
.topbannermain div.topbanner {width:100%; overflow:hidden; height:auto;}
.topbannermain div.topbanner div.swiper-wrapper {width:100%}
.topbannermain div.topbanner div.swiper-wrapper div.swiper-slide {width:100%}
.topbannermain div.topbanner div.swiper-wrapper div.swiper-slide a {width:100%; height:auto; display:block; position:relative}
.topbannermain div.topbanner div.swiper-wrapper div.swiper-slide a img {width:100%; overflow:hidden; height:auto;}

.topbannermain div.topbanner div.topbanner-pagination {width:100%; overflow:hidden; height:0.8rem; position:absolute; left:0px; bottom:0.6rem; z-index:99;}
.topbannermain div.topbanner div.topbanner-pagination span.swiper-pagination-bullet {width:20px; overflow:hidden; height:3px; display:block; border-radius:100px; background:var(--color-bg-muted); opacity:1}
.topbannermain div.topbanner div.topbanner-pagination span.swiper-pagination-bullet-active {background:var(--color-primary); opacity:1}


.recommendedproducts {width:100%; overflow:hidden; padding-top:6%; padding-bottom:6%; background:url(../images/tjcp_bg.jpg) center; background-size:cover}
.recommendedproducts div.m {width:90%; height:auto; margin:0px auto; flex-wrap:wrap;}
.recommendedproducts div.m dl {width:100%; position:relative;}
.recommendedproducts div.m dl dt {width:50%; overflow:hidden; position:relative; z-index:2}
.recommendedproducts div.m dl dt img {width:100%; overflow:hidden; height:auto; display:block}
.recommendedproducts div.m dl dd {width:49%; overflow:hidden; position:relative; z-index:2; padding-right:5%}
.recommendedproducts div.m dl dd h3 {width:100%; overflow:hidden; text-align:left; font-size:1.2rem; line-height:1.6rem;}
.recommendedproducts div.m dl dd a {width:auto; overflow:hidden; float:left; padding:5%; padding-top:3%; padding-bottom:3%; background:linear-gradient(180deg, #8c15aa 0%, #7f149b 100%); color:#fff; border-radius:8px; margin-top:5%;}
.recommendedproducts div.m dl dd a span {font-size:0.8rem; line-height:1.2rem; display:block}
.recommendedproducts div.m dl dd a i {font-size:1.2rem; line-height:1.2rem; display:block; margin-left:0.3rem}
.recommendedproducts div.m dl dd a i::before {line-height:1.4rem; height:1.2rem; display:block}
.recommendedproducts div.m dl dd a:hover {background:var(--gradient-primary-hover)}
.recommendedproducts div.m dl em {width:100%; overflow:hidden; height:60%; border-radius:15px; background:linear-gradient(180deg, #fff 0%, #e7e7e7 100%); border:1px solid #e8e8e8; position:absolute; left:0px; top:20%; z-index:1; display:block}

/*新闻*/
.blogmian {width:100%; margin: 0px auto; padding-top: 5%; padding-bottom: 8%;}
.blogmian h2 {width:100%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;}
.blogmian h2 p {width:100%; overflow: hidden; text-align: center; color: var(--color-primary); display: block; font-size: 1.6rem}
.blogmian h2 a {width:auto; font-weight: normal; margin-top:1%}
.blogmian h2 a span {width:auto; font-size: 1rem; color: var(--color-text-tertiary)}
.blogmian h2 a i {font-size:var(--font-size-3xl); line-height:20px; display:block; margin-left:0.5rem; color: var(--color-text-tertiary)}
.blogmian h2 a ::before {line-height:22px; height:20px; display:block}
.blogmian h2 a:hover {width:auto; font-weight: normal}
.blogmian h2 a:hover span {width:auto; font-size: 1rem; color: var(--color-primary)}
.blogmian h2 a:hover i {font-size:var(--font-size-3xl); line-height:20px; display:block; margin-left:0.5rem; color: var(--color-primary)}
.blogmian h2 a:hover ::before {line-height:22px; height:20px; display:block}

.blogmian ul {width:92%; margin:0px auto; margin-top: 5%}
.blogmian ul li {width:100%; margin-right: 0%; overflow: hidden; background: #fff; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; margin-bottom:6%}
.blogmian ul li:nth-child(3n) {margin-right: 0%;}
.blogmian ul li a {width:100%; overflow: hidden; display: block; padding-bottom: 12%; position: relative}
.blogmian ul li a figure {width:100%; overflow: hidden; display: flex; flex-direction: column; align-items: center;}
.blogmian ul li a figure img {width:100%; overflow: hidden; height: auto; display: block}
.blogmian ul li a figure figcaption {width:auto; padding: 4%; font-size: 1.2rem; color: #1b1e4c; line-height: 1.6rem}
.blogmian ul li a em {font-size: 2.6rem; display: block; position: absolute; bottom: 2%; right: 5%; color: #1b1e4c; transition: all 0.3s linear 0s !important;}
.blogmian ul li a p {width:100%; overflow: hidden; text-align: left; font-size: 1rem; line-height: 1.3rem; color: #666; display: block; padding-left: 4%; padding-right: 4%}

.blogmian ul li:hover {width:100%; margin-right: 0%; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.06), 0 48px 96px rgba(0, 0, 0, 0.04);
 transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; transform: translateY(-8px) scale(1.01); margin-bottom:6%}
.blogmian ul li:nth-child(3n):hover {margin-right: 0%;}
.blogmian ul li:hover a {width:100%; overflow: hidden; display: block; padding-bottom: 12%; position: relative}
.blogmian ul li:hover a figure {width:100%; overflow: hidden; display: flex; flex-direction: column; align-items: center;}
.blogmian ul li:hover a figure img {width:100%; overflow: hidden; height: auto; display: block}
.blogmian ul li:hover a figure figcaption {width:auto; padding: 4%; font-size: 1.2rem; color: var(--color-primary); line-height: 1.6rem}
.blogmian ul li:hover a em {font-size: 2.6rem; display: block; position: absolute; bottom: 2%; right: 3%; color: var(--color-primary); transition: all 0.3s linear 0s !important;}
.blogmian ul li:hover a p {width:100%; overflow: hidden; text-align: left; font-size: 1rem; line-height: 1.3rem; color: #666; display: block; padding-left: 4%; padding-right: 4%}

/*Product*/
.indexProduct {display:none}
.indexProductmb {width:100%; margin: 0px auto; padding-top: 8%; padding-bottom: 8%; background: #f8f8f8; display:block}
.indexProductmb h2 {width:100%; overflow: hidden; text-align: center; color: var(--color-primary); display: block; font-size: 1.6rem}
.indexProductmb nav {width:92%; overflow:hidden; margin:0px auto; margin-top:3%;}
.indexProductmb nav a {width:auto; overflow:hidden; padding:2%; border:1px solid #ddd; background:#fff; margin-right:0.5%; margin-left:0.5%; display:block; font-size:0.8rem; line-height:1.1rem; margin-bottom:1%; color:#333}
.indexProductmb nav a:hover {width:auto; overflow:hidden; padding:2%; border:1px solid var(--color-primary); background:var(--color-primary); margin-right:0.5%; margin-left:0.5%; display:block; font-size:0.8rem; line-height:1.1rem; margin-bottom:1%; color:#fff}

.indexProductmb a.cp {width:92%; overflow:hidden; margin:0px auto; margin-top:4%; display:block; background:#fff; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow;}
.indexProductmb a.cp figure {width:100%; overflow:hidden; height:auto; display:block}
.indexProductmb a.cp figure img {width:100%; overflow:hidden; height:auto; display:block}
.indexProductmb a.cp figure figcaption {width:auto; overflow:hidden; padding:5%; padding-bottom:8%; text-align:center; font-size:1.2rem; color:#1b1e4c}

/*about*/
.indexabout {width:100%; margin: 0px auto; padding-top: 0%; padding-bottom: 4%; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;}
.indexabout div.l {width:100%; overflow: hidden; border-radius: 0px;}
.indexabout div.l a {width:100%; overflow: hidden; height: auto; display: block; position: relative; transition: all 0.2s ease;}
.indexabout div.l a figure {width:100%; overflow: hidden; height: auto; display: block;}
.indexabout div.l a figure img {width:100%; overflow: hidden; height: auto; display: block}
.indexabout div.l a em {width:100%; overflow: hidden; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 99; background: rgb(0,0,0,0.4); transition: all 0.2s ease;}
.indexabout div.l a i {width:100px; overflow: hidden; height: 100px; text-align: center; line-height: 100px; font-size: 100px; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; z-index: 999}

.indexabout div.l a:hover {width:100%; overflow: hidden; height: auto; display: block; position: relative; transition: all 0.2s ease;}
.indexabout div.l a:hover figure {width:100%; overflow: hidden; height: auto; display: block;}
.indexabout div.l a:hover figure img {width:100%; overflow: hidden; height: auto; display: block}
.indexabout div.l a:hover em {width:100%; overflow: hidden; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 99; background: rgb(0,0,0,0.6); transition: all 0.2s ease;}
.indexabout div.l a:hover i {width:100px; overflow: hidden; height: 100px; text-align: center; line-height: 100px; font-size: 100px; color: #fff; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; z-index: 999}

.indexabout div.r {width:92%; overflow: hidden; margin:0px auto; padding:3%; padding-top:5%}
.indexabout div.r h2 {width:100%; overflow: hidden; text-align: left; font-size: 1.8rem; color: #071972; margin-bottom: 2%}
.indexabout div.r p {width:100%; overflow: hidden; display: block; font-size: 1rem; padding-bottom: 3%}
.indexabout div.r a {width:auto; overflow:hidden; float:left; padding:5%; padding-top:2.4%; padding-bottom:2.4%; background:linear-gradient(180deg, #8c15aa 0%, #7f149b 100%); color:#fff; border-radius:8px; margin-top:5%;}
.indexabout div.r a span {font-size:var(--font-size-sm); line-height:20px; display:block}
.indexabout div.r a i {font-size:var(--font-size-3xl); line-height:20px; display:block; margin-left:0.5rem}
.indexabout div.r a i::before {line-height:23px; height:20px; display:block}
.indexabout div.r a:hover {background:var(--gradient-primary-hover)}
.indexabout div.r em {width:100%; overflow:hidden; height:60%; border-radius:15px; background:linear-gradient(180deg, #fff 0%, #e7e7e7 100%); border:1px solid #e8e8e8; position:absolute; left:0px; top:20%; z-index:1; display:block}


/*contact*/
.indexcontact {width:100%; overflow: hidden; padding-top: 8%; padding-bottom: 8%; background: linear-gradient(180deg, #fbfbfb 0%, #ede1ef 100%);}
.indexcontact h2 {width:90%; overflow: hidden; margin: 0px auto; text-align: left; font-size: 2rem; font-weight: normal}
.indexcontact p {width:90%; overflow: hidden; display: block; margin: 0px auto; margin-top: 5%}
.indexcontact p a {width:auto; overflow: hidden; display: inline-block; padding: 6%; padding-bottom: 3%; padding-top: 3%; border-radius: 6px; background: linear-gradient(90deg, #13246a 0%, #721c89 100%); color: #fff; font-size: 1.2rem;}
.indexcontact p a:hover {width:auto; overflow: hidden; display: inline-block; padding: 6%; padding-bottom: 3%; padding-top: 3%; border-radius: 6px; background: linear-gradient(90deg, #061453 0%, #5d0b73 100%); color: #fff; font-size: 1.2rem;}




/*footer*/
footer {width:100%; overflow: hidden; padding-top: 10%; padding-bottom: 6%; background: linear-gradient(90deg, #13246a 0%, #721c89 100%);}
footer div.top {width:90%; margin: 0px auto; flex-wrap:wrap; }
footer div.top div.logo_fot {width:100%;}
footer div.top div.logo_fot a {width:80%; overflow: hidden; height: auto; display: block}
footer div.top div.logo_fot a img {width:100%; overflow: hidden; height: auto; display: block}
footer div.top div.fotnav {width:50%; margin-top:6%}
footer div.top div.fotnav h3 {width:100%; overflow: hidden; text-align: left; padding-bottom: 2%}
footer div.top div.fotnav h3 a.t {color:#fff; font-size: 1.2rem;}
footer div.top div.fotnav a {width:100%; overflow: hidden; display: block; text-align: left; color: #fff; font-size: 1rem; line-height: 1.4rem; padding-bottom: 5px; padding-top: 5px;}
footer div.top div.fotnav a:hover {text-decoration: underline}
footer div.top div.share {width:100%; margin-top:5%; justify-content:flex-start;}
footer div.top div.share a {width:40px; height: 40px; text-align: left; color: #fff; font-size: clamp(1.8rem, 2vw, 30px); line-height: 40px; display: block; position: relative}
footer div.top div.share a:hover {transform:scale(1); color: #d697e8}
footer div.top div.share a em {width:100px; overflow: hidden; height: 100px; background: #fff; display: none; position: absolute; left: 50%; margin-left: -25px; top: 42px;}
footer div.top div.share a em img {width:100%; overflow: hidden; height: auto; display: block}
footer div.top div.share a:hover em {width:100px; overflow: hidden; height: 100px; background: #fff; display: block; position: absolute; left: 50%; margin-left: -25px; top: 42px;}
footer div.top div.share a:hover em img {width:100%; overflow: hidden; height: auto; display: block}

footer div.hx {width:100%; overflow: hidden; height: 1px; background: linear-gradient(90deg, #1c3185 0%, #81229a 100%); margin-top: 5%; margin-bottom: 4%}
footer div.bot {width:90%; overflow: hidden; margin: 0px auto; color: #fff; text-align: center; font-size: 1rem; line-height: 1.5rem}
footer div.bot a {color:#fff; display: inline-block; padding-left: 3px; padding-right: 3px;}
footer div.bot a:hover {color:#fff; text-decoration: underline}


.inquiry {width:100%; overflow: hidden; height: 100%; position: fixed; top: -100%; left: 0px; z-index: 9999999; background: rgb(0,0,0,0.7); transition: all 0.1s linear 0s}
.inquiry div.m {width:90%; overflow: hidden; padding: 5%; background: #fff; border-radius: 10px; position: relative}
.inquiry div.m i {width:40px; overflow: hidden; height: 40px; text-align: center; line-height: 40px;  position: absolute; top: 0px; right: 0px; cursor: pointer}
.inquiry div.m h3 {width:100%; overflow: hidden; text-align: left; font-size: 1rem; line-height: 1.2rem; color: #333; font-weight: normal; margin-bottom: 3%}
.inquiry div.m form {width:100%;}
.inquiry div.m form input {width:100%; overflow: hidden; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px;}
.inquiry div.m form input::placeholder {color:#666}
.inquiry div.m form select {width:100%; overflow: hidden; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px; color:#666; background: url("../images/xjt.png") right no-repeat}
.inquiry div.m form textarea {width:100%; overflow: hidden; min-height: 120px; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px; margin-bottom: 2%}
.inquiry div.m form button {width:100%; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1.5%; padding-top: 1.5%; border-radius: 6px; background: linear-gradient(90deg, #13246a 0%, #721c89 100%); color: #fff; font-size: 1.2rem;}
.inquiry div.m form button:hover {width:100%; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1.5%; padding-top: 1.5%; border-radius: 6px; background: linear-gradient(90deg, #061453 0%, #5d0b73 100%); color: #fff; font-size: 1.2rem;}


/*about*/
.aboutbanner {width:100%; overflow: hidden; height:auto; margin-top: 12.8vw; display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; align-content:flex-start;}
.aboutbanner div.l {width:100%; overflow: hidden; height: 300px; background-size: 200% !important; position: relative}
.aboutbanner div.l i {width:100%; overflow: hidden; height: 100%; display: block; position: absolute; top: 0px; left: 0px; z-index: 999; background: rgb(0,0,0,0.5); cursor: pointer}
.aboutbanner div.l a {width:100px; overflow: hidden; height: 100px; text-align: center; line-height: 100px; font-size: 100px; color: #fff; position: absolute; right: 50%; top: 50%; margin-right: -50px; margin-top: -50px; z-index: 999; cursor: pointer}
.aboutbanner div.l:hover {width:100%; overflow: hidden; height: 300px; background-size: 200% !important; position: relative}
.aboutbanner div.l:hover i {width:100%; overflow: hidden; height: 100%; display: block; position: absolute; top: 0px; left: 0px; z-index: 999; background: rgb(0,0,0,0.6); cursor: pointer}
.aboutbanner div.l:hover a {width:100px; overflow: hidden; height: 100px; text-align: center; line-height: 100px; font-size: 100px; color: #fff; position: absolute; right: 50%; top: 50%; margin-right: -50px; margin-top: -50px; z-index: 999; cursor: pointer}
.aboutbanner div.r {width:100%; overflow: hidden; height: auto; padding-top: 5%; padding-bottom: 5%; background: linear-gradient(90deg, #13246a 0%, #721c89 100%)}
.aboutbanner div.r h2 {width:100%; overflow: hidden; text-align: left; font-size: 1.8rem; color: #fff; text-transform:uppercase; margin-left: 6%}
.aboutbanner div.r nav {width:100%; overflow: hidden; text-align: left; margin-left: 6%; margin-top: 2%; color: #fff}
.aboutbanner div.r nav em {width:auto; display: block; font-size: 1.1rem; color: #fff; margin-right: 2px;}
.aboutbanner div.r nav a {width:auto; overflow: hidden; display: block; color: #fff; font-size: 0.8rem; margin-right: 10px; margin-left: 10px;}
.aboutbanner div.r nav a:hover {width:auto; overflow: hidden; display: block; color: #BCBCBC; text-decoration: underline; font-size: 0.8rem; margin-right: 10px; margin-left: 10px;}



.page_about {width:90%; overflow: hidden; height: auto; margin: 0px auto; padding-top: 5%; padding-bottom: 5%; font-size: 1rem; color: var(--color-text); line-height: 1.6rem}
.page_about p {width:100%; overflow: hidden; display: block; margin-top: 1%; margin-bottom: 1%; text-indent: 1rem; line-height: 2rem}
.page_about h2 {font-size: 1.6rem}
.page_about h3 {font-size: 1.3rem; margin-bottom: 3%}
.page_about p img {width:auto !important; overflow: hidden !important; height: auto !important; display: block !important; margin: 0px auto !important; max-width: 100% !important; margin-top: 1% !important; margin-bottom: 1% !important; border-radius:12px;}

.page_about_zizhi {width:100%; overflow: hidden; padding-top: 8%; padding-bottom: 8%; background: #fbfbfb;}
.page_about_zizhi h2 {width:90%; margin: 0px auto; text-align: left; font-size: 1.4rem; color: #721c89}
.page_about_zizhi ul {width:90%; height: auto; margin: 0px auto;margin-top: 5%;}
.page_about_zizhi ul li {width:46%; overflow: hidden; border: 1px solid #ddd; background: #fff; padding: 2%; margin-bottom: 2%; margin-right: 4%; border-radius: 6px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow;}
.page_about_zizhi ul li:hover {box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; transform: translateY(-8px) scale(1.01);}
.page_about_zizhi ul li:nth-child(2n) {margin-right: 0%}
.page_about_zizhi ul li:nth-child(5n) {margin-right: 4%}
.page_about_zizhi ul li img {width:100%; overflow: hidden; height: auto; display: block}
.page_about_zizhi p {width:90%; margin: 0px auto; text-align: left; font-size: 1rem; color: #721c89; margin-top: 3%}



/*product*/
.productbanner {display:none}
.productbannermb {width:100%; overflow: hidden; margin-top: 12.8vw; display: block; position: relative}
.productbannermb img {width:100%; overflow: hidden; height: auto; display: block}
.productbannermb div.m {width:100%; overflow: hidden; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 9999; background: rgb(0,0,0,0.5)}
.productbannermb div.m h2 {width:100%; overflow: hidden; text-align: center; font-size: 1.8rem; color: #fff; text-transform:uppercase; margin-left: 6%}
.productbannermb div.m nav {width:100%; overflow: hidden; text-align: center; margin-left: 6%; margin-top: 1%; color: #fff}
.productbannermb div.m nav em {width:auto; display: block; font-size: 1.1rem; color: #fff; margin-right: 2px;}
.productbannermb div.m nav a {width:auto; overflow: hidden; display: block; color: #fff; font-size: 0.8rem; margin-right: 10px; margin-left: 10px;}
.productbannermb div.m nav a:hover {width:auto; overflow: hidden; display: block; color: #721c89; text-decoration: underline; font-size: 0.8rem; margin-right: 10px; margin-left: 10px;}

.productfl {display: none}
.productflmb {width:100%; overflow: hidden; display: block; height: 56px; border-bottom: 1px solid #ddd; position: relative}
.productflmb em {width:3%; overflow: hidden; height: 56px; text-align: left; line-height: 56px; font-size: 1.4rem; color: #721c89;}
.productflmb select {width:90%; overflow: hidden; height: 56px; text-align: left; padding-left: 5%; font-size: 1.1rem; color: #333}


.product_sx {width:100%; overflow: hidden; padding-bottom: 5%; padding-top: 5%;}
.product_sx a {width:auto; overflow: hidden; text-align: center; padding: 3%; padding-top: 1%; padding-bottom: 1%; font-size: 1rem; color: #333; margin-left: 0.5%; margin-right: 0.5%; border: 1px solid #ddd; border-radius: 5px; background: #f1f1f1;}
.product_sx a:hover {width:auto; overflow: hidden; text-align: center; padding: 3%; padding-top: 1%; padding-bottom: 1%; font-size: 1rem; color: #fff; margin-left: 0.5%; margin-right: 0.5%; border: 1px solid #721c89; border-radius: 5px; background: #721c89;}
.product_sx a.ahover {width:auto; overflow: hidden; text-align: center; padding: 3%; padding-top: 1%; padding-bottom: 1%; font-size: 1rem; color: #fff; margin-left: 0.5%; margin-right: 0.5%; border: 1px solid #721c89; border-radius: 5px; background: #721c89;}


.product_list {width:100%;}
.product_list ul {width:90%; margin: 0px auto}
.product_list ul li {width:100%; overflow: hidden; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; margin-bottom: 5%}
.product_list ul li:hover {box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; transform: translateY(-8px) scale(1.01);}
.product_list ul li a {width:100%; overflow: hidden; height: auto; background: linear-gradient(180deg, #fbfbfb 0%, #f4edf5 100%); border: 1px solid #e6dde7; border-radius: 4px; flex-wrap:wrap;}
.product_list ul li a figure {width:100%; overflow: hidden; height: auto; display: block}
.product_list ul li a figure img {width:100%; overflow: hidden; height: auto; display: block}
.product_list ul li a div.sub {width:90%; margin: 0px auto; padding-bottom: 2%; padding-top: 2%}
.product_list ul li a div.sub h3 {width:100%; overflow: hidden; text-align: left; font-size: 1.4rem; line-height: 1.7rem; color: #1b1e4c; margin-bottom: 5%}
.product_list ul li a:hover div.sub h3 {width:100%; overflow: hidden; text-align: left; font-size: 1.4rem; line-height: 1.7rem; color: #721c89; margin-bottom: 5%}
.product_list ul li a div.sub p {width:100%; overflow: hidden; text-align: left; font-size: 1rem; line-height: 1.2rem; color: #666; margin-top: 2%}
.product_list ul li a div.sub em {font-size: clamp(1.5rem, 1.6vw, 34px); transition: all 0.2s linear 0s}
.product_list ul li a:hover div.sub em {font-size: clamp(1.5rem, 1.6vw, 34px); margin-left: 10px; transition: all 0.2s linear 0s}





/*contact*/
.contact_banner {width:100%; overflow: hidden; margin-top: 12.8vw; height: 200px; background: linear-gradient(180deg, #fbfbfb 0%, #f4edf5 100%); border-bottom: 1px solid #ddd}
.contact_banner div.m {width:100%; overflow: hidden; height: 200px;}
.contact_banner div.m h2 {width:100%; overflow: hidden; text-align: center; font-size: 1.8rem; color: #1b1e4c; text-transform:uppercase; margin-left: 6%}
.contact_banner div.m nav {width:100%; overflow: hidden; text-align: center; margin-left: 6%; margin-top: 2%; color: #1b1e4c}
.contact_banner div.m nav em {width:auto; display: block; font-size: 1.1rem; color: #1b1e4c; margin-right: 2px;}
.contact_banner div.m nav a {width:auto; overflow: hidden; display: block; color: #1b1e4c; font-size: 0.8rem; margin-right: 10px; margin-left: 10px;}
.contact_banner div.m nav a:hover {width:auto; overflow: hidden; display: block; color: #721c89; text-decoration: underline; font-size: 0.8rem; margin-right: 10px; margin-left: 10px;}


.contactmain {width:90%;; margin: 0px auto; margin-top: 5%; margin-bottom: 5%; flex-wrap:wrap;}
.contactmain div.l {width:100%; overflow: hidden; margin-bottom: 5%; padding-bottom: 3%; border-bottom: 1px solid #ddd}
.contactmain div.l h2 {width:100%; overflow: hidden; text-align: left; font-size: 1.3rem; line-height: 1.7rem; color: #333; margin-bottom: 4%}
.contactmain div.l dl {width:100%; margin-bottom: 1%;}
.contactmain div.l dl dt {width:40px; overflow: hidden; height: 50px; text-align: left; line-height: 50px; font-size: 2rem; color: #333}
.contactmain div.l dl dd {width:90%; overflow: hidden; text-align: left; font-size: 1.1rem; padding-top: 10px;}


.contactmain div.r {width:100%; overflow: hidden; padding: 5%; border-radius: 8px; border: 1px solid #ddd; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow;}
.contactmain div.r h3 {width:100%; overflow: hidden; text-align: left; font-size: 1rem; line-height: 1.2rem; color: #333; margin-bottom: 2%}
.contactmain div.r form {width:100%;}
.contactmain div.r form input {width:100%; overflow: hidden; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px;}
.contactmain div.r form input::placeholder {color:#666}
.contactmain div.r form select {width:100%; overflow: hidden; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px; color:#666; background: url("../images/xjt.png") right no-repeat}
.contactmain div.r form textarea {width:100%; overflow: hidden; min-height: 120px; border: 1px solid #ddd; padding: 2%; padding-top: 1%; padding-bottom: 1%; margin-top: 2%; border-radius: 6px; margin-bottom: 2%}
.contactmain div.r form button {width:100%; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1.5%; padding-top: 1.5%; border-radius: 6px; background: linear-gradient(90deg, #13246a 0%, #721c89 100%); color: #fff; font-size: 1rem;}
.contactmain div.r form button:hover {width:100%; overflow: hidden; display: inline-block; padding: 4%; padding-bottom: 1.5%; padding-top: 1.5%; border-radius: 6px; background: linear-gradient(90deg, #061453 0%, #5d0b73 100%); color: #fff; font-size: 1rem;}




/*blog show*/
.blogshow_nav {display:none}

.blogshowmain {width:90%; margin: 0px auto; margin-top: 20vw; margin-bottom: 5%}
.blogshowmain h1 {width:100%; overflow: hidden; text-align: left; font-size: 1.6rem; color: #1b1e4c; line-height: 2rem; display: block}
.blogshowmain div.data {width:100%; overflow: hidden; text-align: left; height: 46px; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-top: 7px;}
.blogshowmain div.data i {font-size: 1rem; color: #666; display: none}
.blogshowmain div.data span {width:auto; overflow: hidden; padding-left: 3px; padding-right: 2%; display: block; color: #666; font-size: 0.9rem}
.blogshowmain figure {width:100%; overflow: hidden; height: auto; margin-top: 6%; display: block}
.blogshowmain figure img {width:100%; overflow: hidden; height: auto; display: block}
.blogshowmain figure figcaption {width:100%; overflow: hidden; text-align: left; font-size: 1.1rem; margin-top: 2%; display: block; color: #333; line-height: 1.6rem; font-style: italic;}
.blogshowmain div.showsmian {width:100%; margin-top: 3%;}
.blogshowmain div.showsmian div.share {display: none}

.blogshowmain div.showsmian div.sub {width:100%; text-align: left; font-size: 1.2rem; line-height: 1.68rem; color: #333; position: relative; z-index: 99}
.blogshowmain div.showsmian div.sub p {width:100%; overflow: hidden; display: block; margin-top: 2%; margin-bottom: 2%; font-size: 1.2rem; line-height: 1.8rem;}
.blogshowmain div.showsmian div.sub h2 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: 1.4rem; line-height: 1.7rem; color: #1b1e4c}
.blogshowmain div.showsmian div.sub h3 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: 1.2rem; line-height: 1.5rem; color: #1b1e4c}
.blogshowmain div.showsmian div.sub h4 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: 1.2rem; line-height: 1.5rem; color: #1b1e4c}
.blogshowmain div.showsmian div.sub h5 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: 1.2rem; line-height: 1.5rem; color: #1b1e4c}
.blogshowmain div.showsmian div.sub h6 {width:100%; overflow: hidden; display: block; margin-top: 2%; font-size: 1.2rem; line-height: 1.5rem; color: #1b1e4c}
.blogshowmain div.showsmian div.sub img {width:auto; overflow: hidden; height: auto; max-width: 100%; margin: 0px auto;margin-top: 5%; margin-bottom: 5%}

.blogshowmain div.showsmian div.sub div.faq {width:100%; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; padding: 5%; box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; margin-top: 3%}
.blogshowmain div.showsmian div.sub div.faq div.tit {width:100%; overflow: hidden; padding-bottom: 2%; text-align: left; font-size: 1.5rem; line-height: 1.8rem; color: #1b1e4c; font-weight: bold; border-bottom: 1px solid #ddd}
.blogshowmain div.showsmian div.sub div.faq div.nr {width:100%; overflow: hidden; display: block; margin-top: 5%;}
.blogshowmain div.showsmian div.sub div.faq div.nr p strong {width:100%; overflow: hidden; text-align: left; font-size: 1.1rem; line-height: 1.4rem; color: #1b1e4c}
.blogshowmain div.showsmian div.sub div.faq div.nr p {width:100%; overflow: hidden; text-align: left; font-size: 1rem; line-height: 1.4rem; color: #666; margin-top: 3%}

.blogshowmain div.showsmian div.sub div.nextprv {width:100%; margin-top: 2%; padding-top: 3%; border-top: 1px solid #ddd}
.blogshowmain div.showsmian div.sub div.nextprv a {width:100%; overflow: hidden; font-size: 1rem; line-height: 1.4rem; color: #1b1e4c; display: block; padding-bottom:0.5%; padding-top:0.5%}
.blogshowmain div.showsmian div.sub div.nextprv a:hover {width:100%; overflow: hidden; font-size: 1rem; line-height: 1.4rem; color: #721c89; display: block; padding-bottom:0.5%; padding-top:0.5%}
.blogshowmain div.showsmian div.sub div.tags {width:100%; overflow:hidden; margin-top:2%; margin-bottom:2%; text-align:left; font-size: 1rem; line-height: 1.4rem; color:#1b1e4c}
.blogshowmain div.showsmian div.sub div.tags a {color:#1b1e4c; margin-right:10px;}
.blogshowmain div.showsmian div.sub div.tags a:hover {color:#721c89; margin-right:10px;}



/*poduct show*/
.poductshow_nav {display: none}


.poductshowmian {width:92%; overflow: hidden; margin: 0px auto; margin-top: 16.4vw; margin-bottom: 5%}
.poductshowmian div.top {width:100%; overflow: hidden; flex-wrap:wrap; margin-bottom: 10%}
.poductshowmian div.top div.l {width:100%; position:relative}
.poductshowmian div.top div.r {width:100%; overflow: hidden; margin-top: 6%}
.poductshowmian div.top div.r h1 {width:100%; overflow: hidden; text-align: left; font-size: 1.6rem; color: #1b1e4c; line-height:  1.9rem}
.poductshowmian div.top div.r h2 {width:100%; overflow: hidden; text-align: left; font-size: 1.1rem; color: #555; line-height:  1.3rem; margin-top: 2%; font-weight: normal}
.poductshowmian div.top div.r div.massage {width:100%; overflow: hidden; margin-top: 3%; text-align: left; font-size: 1rem; line-height: 1.3rem}
.poductshowmian div.top div.r div.massage strong {display:block; font-size: 1.3rem; padding-bottom: 1%; padding-top: 2%}
.poductshowmian div.top div.r div.massage p {width:100%; overflow: hidden; margin-top: 2%; text-align: left; font-size: 1rem; line-height: 1.6rem}
.poductshowmian div.top div.r div.an {width:100%; overflow: hidden; margin-top: 4%; flex-wrap:wrap;}
.poductshowmian div.top div.r div.an a.dzfa {width:100%; overflow: hidden; padding: 5%; padding-top: 5%; padding-bottom: 5.3%; text-align: center; font-size: clamp(1.3rem, 1.6vw, 22px); color: #fff; background: linear-gradient(90deg, #13246a 0%, #721c89 100%); box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; border-radius: 8px;}
.poductshowmian div.top div.r div.an a.dzfa i {font-size: clamp(1.6rem, 1.8vw, 24px); line-height: clamp(1.6rem, 1.8vw, 24px)}
.poductshowmian div.top div.r div.an a.dzfa span {width:auto; display: block; padding-left: 8px; line-height: clamp(1.6rem, 1.8vw, 24px); margin-top: 0px;}
.poductshowmian div.top div.r div.an a.dzfa:hover {width:100%; overflow: hidden; padding: 5%; padding-top: 5%; padding-bottom: 5.3%; text-align: center; font-size: clamp(1.3rem, 1.6vw, 22px); color: #fff; background: linear-gradient(90deg, #091860 0%, #630e7b 100%); box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; border-radius: 8px;}
.poductshowmian div.top div.r div.an a.dzfa:hover i {font-size: clamp(1.6rem, 1.8vw, 24px); line-height: clamp(1.6rem, 1.8vw, 24px)}
.poductshowmian div.top div.r div.an a.dzfa:hover span {width:auto; display: block; padding-left: 8px; line-height: clamp(1.6rem, 1.8vw, 24px); margin-top: 0px;}

.poductshowmian div.top div.r div.an a.lxwm {width:100%; overflow: hidden; padding: 5%; padding-top: 5%; padding-bottom: 5.3%; text-align: center; font-size: clamp(1.3rem, 1.6vw, 22px); color: #fff; background: linear-gradient(0deg, #8c15aa 0%, #720f8c 100%); box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; border-radius: 8px; margin-left: 0%; margin-top: 4%}
.poductshowmian div.top div.r div.an a.lxwm i {font-size: clamp(1.6rem, 1.8vw, 24px); line-height: clamp(1.6rem, 1.8vw, 24px)}
.poductshowmian div.top div.r div.an a.lxwm span {width:auto; display: block; padding-left: 8px; line-height: clamp(1.6rem, 1.8vw, 24px); margin-top: 0px;}
.poductshowmian div.top div.r div.an a.lxwm:hover {width:100%; overflow: hidden; padding: 5%; padding-top: 5%; padding-bottom: 5.3%; text-align: center; font-size: clamp(1.3rem, 1.6vw, 22px); color: #fff; background: linear-gradient(0deg, #620a79 0%, #4e0262 100%); box-shadow:0 2px 8px rgba(0, 0, 0, 0.04),0 8px 24px rgba(0, 0, 0, 0.02); transition: box-shadow 0.55s cubic-bezier(0.25, 0.1, 0.15, 1), transform 0.55s cubic-bezier(0.25, 0.1, 0.15, 1); will-change: transform, box-shadow; border-radius: 8px; margin-left: 0%; margin-top: 4%}
.poductshowmian div.top div.r div.an a.lxwm:hover i {font-size: clamp(1.6rem, 1.8vw, 24px); line-height: clamp(1.6rem, 1.8vw, 24px)}
.poductshowmian div.top div.r div.an a.lxwm:hover span {width:auto; display: block; padding-left: 8px; line-height: clamp(1.6rem, 1.8vw, 24px); margin-top: 0px;}

.poductshowmian div.productdetails {width:100%; margin-top: 4%}

.poductshowmian div.nextprv {width:100%; margin-top: 2%; padding-top: 3%; border-top: 1px solid #ddd}
.poductshowmian div.nextprv a {width:100%; overflow: hidden; font-size: 1rem; line-height: 1.4rem; color: #1b1e4c; display: block; padding-bottom:0.5%; padding-top:0.5%}
.poductshowmian div.nextprv a:hover {width:100%; overflow: hidden; font-size: 1rem; line-height: 1.4rem; color: #721c89; display: block; padding-bottom:0.5%; padding-top:0.5%}
.poductshowmian div.tags {width:100%; overflow:hidden; margin-top:2%; margin-bottom:2%; text-align:left; font-size: 1rem; line-height: 1.4rem; color:#1b1e4c}
.poductshowmian div.tags a {color:#1b1e4c; margin-right:10px;}
.poductshowmian div.tags a:hover {color:#721c89; margin-right:10px;}


/*xg prdouct*/
.xgproduct {width:100%; margin: 0px auto; padding-top: 4%; padding-bottom: 4%; background: #f8f8f8}
.xgproduct h2 {width:100%; text-align: center; color: var(--color-primary); display: block; font-size: 1.6rem}
.xgproductlist {width:100%; margin: 0px auto; margin-top: 2.4%; position: relative}
.xgproductlist  div.swiper-button-next {width:80px; overflow: hidden; height: 80px; position: absolute; top: 50%; right: 3%; margin-top: -40px; color: #353535}
.xgproductlist  div.swiper-button-prev {width:80px; overflow: hidden; height: 80px; position: absolute; top: 50%; left: 3%; margin-top: -40px; color: #353535}
.xgproductlist .indexcp {width:100%}


/*fenye*/
.pagination {width:100%; overflow:hidden; margin-top:2%; margin-bottom:5%}
.pagination li {display:inline-block!important;border:solid 1px #EBEBEB;border-radius:4px; background:#efefef; margin-left:0.5%; margin-right:0.5%; transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s; cursor:pointer}
.pagination li a {color:var(--color-text-regular);padding:12px 16px;line-height:18px;display:block;transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s}
.pagination li:hover {display:inline-block!important;border:solid 1px #721c89;border-radius:4px; background:#721c89; color: #fff; margin-left:0.5%; margin-right:0.5%; transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s; cursor:pointer}
.pagination li:hover a {color:var(--color-text-on-highlight);padding:12px 16px;line-height:18px;display:block;transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s}
.pagination li.active {display:inline-block!important;border:solid 1px #721c89;border-radius:4px; background:#721c89; color: #fff; margin-left:0.5%; margin-right:0.5%; transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s; cursor:pointer}
.pagination li.active a {color:var(--color-text-on-highlight);padding:12px 16px;line-height:18px;display:block;transition:all 1s cubic-bezier(0.175,0.885,0.32,1) 0s}

.fql-wrap {margin-top: 15vw; margin-bottom: 8%}

}

/*mb tccd*/
.mobile_tccd {width:100%; height:auto; background:linear-gradient(135deg,#13246a,#721c88); position:fixed; top:12.8vw; left:0px; padding-bottom:5%; z-index:99999; display:none}
.mobile_tccd div.m {width:90%; overflow:hidden; margin:0px auto; margin-top:5%;}
.mobile_tccd div.m a {width:auto; padding:4%; padding-top:1.5%; padding-bottom:1.5%; border-radius:5px; background:#fff}
.mobile_tccd div.m a em {margin-right:4px; margin-top:2px;}
.mobile_tccd div.m a span {font-size:1rem; font-weight:bold}