neirong@charset "utf-8";
@font-face{
   font-family:'shuL'; 
   src: url('../fonts/ProximaNovaA-Light.ttf') format("truetype");
   font-style: normal;
   font-display: swap;
}
@font-face{
   font-family:'shuR'; 
   src: url('../fonts/ProximaNovaA-Regular.ttf') format("truetype");
   font-style: normal;
   font-display: swap;
}
@font-face{
   font-family:'shuB'; 
   src: url('../fonts/ProximaNovaA-Bold.ttf') format("truetype");
   font-style: normal;
   font-display: swap;
}
body{ position: relative; _overflow:hidden; overflow-x:hidden; width: 100%; *cursor: default; color: #000; line-height: 1.4; font-size: 0.16rem;opacity: 1 !important;transition: none;}
a{color: #000; transition:0.6s ease;}
img{transition:0.6s ease;}
a:hover{ color: #782234;}
.cptu{background-color: #fff;object-fit: contain!important;}
.tu{ position: relative; width: 100%; overflow: hidden; display: block;}
.tu::before{ content: ""; display: block; padding-top: 75%;}
.tu img{position: absolute; width: 100%; height: 100%; left: 0; top: 0;; display: block;object-fit: cover;}
.tuk{aspect-ratio: 100/75; height: auto; width: 100%; overflow: hidden;transform: translateZ(0); display: block;}
.tuk img{ width: 100%; height: 100%;object-fit: cover; display: block;
	transform: translateZ(0) scale(1);
    backface-visibility: hidden; 
    will-change: transform;
    transition: transform 0.35s ease-out;
    outline: 1px solid transparent; 
    image-rendering: -webkit-optimize-contrast;}
.jgda:hover .tuk img{transform: translateZ(0) scale(1.08);}
header{ position: sticky; left: 0; width: 100%; top: 0; z-index: 992; transition: 0.5s; background-color: #782234;}
/* header.on{ background-color: rgba(120,34,52,0.5);} */
.con,.box,main{ width: 14.4rem; margin: 0 auto; max-width: 94%;}
.nav-item{ position: relative; margin: 0 0.25rem; display: flex; align-items: center;}
.first-nav a{ color: #fff; font-size: 0.18rem;font-family:'siyuanN'; }
.second-nav{position: absolute; min-width: 100%; background-color: #fff; top: 0; left: 50%; transform: translateX(-50%);visibility: hidden; border-radius:0 0 0.1rem 0.1rem; opacity: 0; transition: 0.5s; display: block; padding:0.2rem; text-align: center;}
.second-nav a{white-space: nowrap; width: 100%; text-align: center; font-size: 0.18rem; line-height: 2;}
.nav-item:hover .second-nav{visibility: visible; opacity: 1; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);}
.nav-item::after{position: absolute; left: 50%; top: 0; height: 2px; transform: translateX(-50%); width: 0; transition: 0.5s; content: ""; display: block; background-color: #fff;}
.nav-item:hover::after,.nav-item.on::after{ width: 100%;}
.logo{ padding: 0.1rem 0;}
.logo img{ height: 0.8rem;}
.head{ width: 100%;}
.a{ display: block;}
.b,.sj{ display: none;}
.tops img{ width: 0.22rem;}
.nav-box,.nav-item{height: 100%; position: relative;}
.first-nav{ position: relative;}
.tops{ margin-left: 0.25rem; color: #fff; gap: 0.1rem; font-size: 0.18rem;}
.tanss{position: fixed; z-index: 995; width: 100%; height: 100vh;left: 0; top: -100%; background-image: linear-gradient(to bottom, rgba(120,34,52,1) 40%, rgba(0,0,0,0)); color: #fff; transition: 0.5s;}
.tanss.active{ top: 0;}
.ssbg{ position: absolute; z-index: 996; width: 0.6rem;aspect-ratio:1; border-radius: 100%; background-color: rgba(255, 255, 255, 0.1); transition: 0.6s; display: flex; align-items: center; justify-content: center; top: 0.3rem; right: 0.3rem;}
.ssbg img{ width:50%;}
.ssbg:hover img{ transform: rotate(180deg);}
.ssbg:hover{background-color: rgba(255, 255, 255, 0.2);}
.yylist{ max-width: 80%; margin: 0 auto; width: 500px; margin-top: 20vh;}
.yylist a{ border: 1px solid #fff; display: block; width: 100%; text-align: center; padding: 0.15rem 0.2rem; font-size: 0.3rem; margin: 0.2rem; color:#fff; box-sizing: border-box;}
.yylist a:hover{ background-color: rgba(255, 255, 255, 0.4);}


.mBtn{ width: 0.3rem; aspect-ratio:1;cursor: pointer; box-sizing: border-box;display: none; position: sticky; right: 0; z-index: 994;transform: scale(1.2);}
.mBtn span{ width: 100%;height: 100%;display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.06rem; /* 5px间距统一rem */}
.mBtn span i{ width: 100%;height: 0.02rem;background: #fff;display: block;transition: all 0.5s ease;transform-origin: center; /* 旋转中心设为线条中间 */}
.mBtn.active span i{background: #fff; width: 80%;}
.mBtn.active span i:nth-child(1){transform: rotate(45deg) translate(0.03rem, 0.03rem);}
.mBtn.active span i:nth-child(2){ transform: rotate(-45deg) translate(0.03rem, -0.03rem);}
.mBtn.active span i:nth-child(3){width: 0;opacity: 0;}

.banner,.swiper,.bannerbox,.swiper-slide{ width: 100%; overflow: hidden; height: auto;}
.swiper-pagination-bullet{ opacity: 0.25; width: 0.18rem; height: 0.18rem;background-color: #fff; border-radius: 100%; margin: 0 0.06rem!important;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom: 0.4rem;}
.swiper-button-prev,.swiper-button-next{ width: 0.34rem;aspect-ratio:1;height: auto!important; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: 0.6s;}
.swiper-button-next:after, .swiper-button-prev:after{ color: #fff; font-size: 0;}
.swiper-button-next{ background: url(../img/ri.png) center center no-repeat transparent; background-size: 100%;}
.swiper-button-prev{ background: url(../img/le.png) center center no-repeat transparent; background-size: 100%;}
.swiper-button-prev:hover,.swiper-button-next:hover{ opacity: 1;}
.banner{ position: relative; }
.ban_bg img{aspect-ratio: 1920/800; height: auto; width: 100%; display: block; object-fit: cover;}

footer{ background: url(../img/bj2.jpg) center center no-repeat #782234; background-size: cover; color: #dcced1;}
footer img{ display: block;}
footer a{ color: #fff; opacity: 0.7;}
footer a:hover{ opacity: 1; color: #fff; }
.ft2 img{ width: 1.26rem; aspect-ratio:1; height: auto; border: 1px solid #934e5d; box-sizing: border-box; padding: 0.1rem;}
.ft2 p{ text-align: center; margin-top: 0.12rem;}
.ft2{ font-size: 0.18rem;}
.foot{ padding: 0.5rem 0; width: 100%;}
.ft_logo{ width: 2rem; opacity: 0.4;}
.ft1{gap:0.7rem; font-size: 0.18rem;}
.ft1 a{flex: 1;}
.ft1 p{ margin-top: 0.1rem;}
footer .xian{ width: 100%; height: 1px; background-color: #934e5d;}
.ft_di{ padding: 0.25rem 0;}
.ft_nav{ margin-bottom: 0.4rem;}
.ft_nav span{ padding-right: 0.25rem; position: relative; margin-right: 0.25rem;}
.ft_nav span::after{ content: ""; position: absolute; right: 0; width: 1px; height: 60%; display: block; background-color: #dcced1; display: block; top: 20%;}
.ft_nav span:last-child::after{ display: none;}
.ft_nav span:last-child{ padding-right: 0; margin-right: 0;}

.con1bj{ background: url(../img/bj.png) center bottom no-repeat #fff; background-size: cover;}
.con1{ gap:1rem}
.con1 img{ width: 5.35rem; display: block; max-width: 100%;}
.con1le .tex{ font-size: 0.18rem; line-height: 2; color: #666;}
.con1le{ flex: 1;}
.con2bj{background: url(../img/bj1.png) center bottom no-repeat #782234; background-size: cover; color: #fff;}
.con2con{ min-height: 2.6rem;}
.con2con .ti{ font-size: 0.34rem;}
.con2con .tex{ font-size: 0.2rem; line-height: 2.4;padding-left: 1rem;padding-right: 1rem;}
.con3bj{background: url(../img/bj3.jpg) center bottom no-repeat #fff; background-size: cover;}
.con3 .kuai4{ gap:0.16rem;}
.con3 .tulist:nth-child(1){grid-column: span 2;grid-row: span 2;}
.con3 .tulist:nth-child(1) .tuk{aspect-ratio: 100/75.6;}
.con3 .title h3,.con3  .title h2::after{ left: 50%; transform: translateX(-50%);}
.tulist{ position: relative; color: #fff; overflow: hidden;}
.tulist .fu{ position: absolute; left: 0; bottom: 0; height: 0.6rem; background: rgba(0, 0, 0, 0.5); box-sizing: border-box; padding: 0 0.26rem; font-size: 0.2rem; color: #fff; width: 100%;}
.con4 .swiper-pagination-bullet{ background-color: #782234;}
.con4 .swiper-pagination{ position: static;inset: auto;}
.xk_con.kuai4{ display: none;}
.xk_con.kuai4.active{ display: grid;}
.con4con .xk_nav{ margin-bottom: 0.6rem;}
.con4con .xk_nav{ justify-content: center; width: 100%; line-height: 1.1;gap: 1.2rem;}
.con4con .xk_nav span{ padding-top: 0.6rem; cursor: pointer;}
.con4con .xk_nav span:nth-child(1){ background:url(../img/nav1.png) center top no-repeat;background-size: 0.48rem;}
.con4con .xk_nav span:nth-child(2){ background:url(../img/nav2.png) center top no-repeat;background-size: 0.48rem;}
.con4con .xk_nav span:nth-child(1).on{background:url(../img/nav1h.png) center top no-repeat; color: #782234;background-size: 0.48rem;}
.con4con .xk_nav span:nth-child(2).on{background:url(../img/nav2h.png) center top no-repeat; color: #782234;background-size: 0.48rem;}

section{ padding: 1.1rem 0;}
.title{ font-size: 0.2rem; position: relative; z-index: 4;}
.title h2{ font-size: 0.36rem;font-family:'siyuanN'; padding-bottom: 0.3rem; line-height: 1; position: relative;}
.title h2::after{ content: ""; position: absolute; left: 0; width: 0.5rem; height: 0.04rem; background-color: #782234; display: block; bottom: 0;}
.title p{  color: #666; margin-top: 0.2rem;}
.title h3{ font-size: 1rem; color: #f2f2f2;text-transform: uppercase; position: absolute; z-index:-1; left: 0.76rem; line-height: 1; top: -0.1rem;}
.more{ line-height: 2.5; display: flex; padding: 0 2.5em; background-color: #782234;font-size: 0.2rem; align-items: center; justify-content: center; color: #fff; border-radius: 999px;}
.more:hover{ color: #fff; box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.5); transform: translateY(-0.05rem);}

#toTop{position: fixed;bottom: 0.3rem;right:0.1rem;background:url(../img/top.png) center center no-repeat rgba(0,0,0,0.5);
background-size: 40%;color: #fff;z-index: 990;opacity: 0;visibility: hidden;transition: all 0.6s; width: 0.4rem; height: 0.4rem; display: flex; justify-content: center; align-items: baseline;}
#toTop.on{opacity: 1;visibility: visible; cursor: pointer;}
#toTop:hover{ background:url(../img/top.png) center center no-repeat rgba(0,0,0,0.8);background-size: 40%;}


.erbanner{ width: 100%; aspect-ratio: 1920/540; position: relative;}
.ertitle{ position:absolute;color: #fff; z-index: 2; top: 50%; transform: translateY(-50%);}
.erbanner .title h2::after{ background-color: #fff;}
.erbox{ padding: 0.5rem 0;}
.fenye{ justify-content: center; gap: 0.2rem;}
.fenye a{ display: flex; width: 0.5rem; aspect-ratio: 1; border-radius: 0.05rem; border: 1px solid #eee; align-items: center; justify-content: center;}
.fenye a.on{ background-color: #782234; color: #fff; border: 1px solid #782234;}
.fenye a:hover{ border: 1px solid #782234;}
.ernav{ max-width: 100%; overflow: auto;}
.ernav a{ padding: 0 0.5rem; height: 100%;height: 0.96rem; align-items: center; display: flex;white-space: nowrap;}
.ernav a.on{ background-color: #782234; color: #fff;}
.neirong{line-height: 2; color: #444; text-align: justify;text-align-last: left;}
.neirong div,.neirong img,.neirong table{ max-width: 100%!important; }
.neirong img{ display:block; width:7.2rem; margin:0 auto;}
.biaoti{ padding-bottom: 0.3rem; border-bottom: 1px solid #eee;}
.biaoti h2{ font-size: 0.48rem;}
.biaoti p{ margin-top: 0.4rem; color: #a5a5a5;}
.biaoti p i{ padding: 0 0.22rem;}
.tubox{ gap: 0.3rem; text-align: center;}
.tubox .tuk{ width: 100%; border: 0.1rem solid #ccc; box-sizing: border-box; margin-bottom: 0.3rem; transition: 0.3s ease;}
.ertu:hover .tuk{ border: 0.1rem solid #782234;}
.cp_tu img{ width: 7.2rem; max-width: 100%; display: block; margin: 0 auto;  height: auto;}
.ertop{ max-width: 100%; overflow-x: auto;}
.weizhi{ line-height: 0.96rem;color: #000;}
.weizhi a{ color: #666;}
.weizhi span{ color: #782234;}
.weizhi i{ padding: 0 0.1rem;}
.xlcon{ gap: 0.3rem;}
.lxlist{ background-color: #f9f9f9; box-sizing: border-box; padding: 0.3rem 0.4rem; line-height: 1.6;}
.lxlist img{ width: 0.2rem; display: block; margin-bottom: 0.2rem;}
.lxmap{ width: 100%; height: 5rem; background-color: #eee;}

.siyuanN{font-family:'siyuanN'; }
.siyuanR{font-family:'siyuanR'; }
.siyuanM{font-family:'siyuanM'; }
.siyuanB{font-family:'siyuanB'; }
.shuL{font-family:'shuL'; }
.shuR{font-family:'shuR'; }
.shuB{font-family:'shuB'; }
.hg1{ line-height: 1!important;}
.cor6{ color: #666;}
.cor9{ color: #999;}
.cor0{ color: #000;}
.cor1{ color: #782234!important;}
.bjf8{ background-color: #f8f8f8!important;}
.bj1{ background-color: #782234!important;}
.ft16{ font-size: 0.16rem;}
.ft18{ font-size: 0.18rem;}
.ft20{ font-size: 0.2rem;}
.ft22{ font-size: 0.22rem;}
.ft24{ font-size: 0.24rem;}
.ft26{ font-size: 0.26rem;}
.ft28{ font-size: 0.28rem;}
.ft38{ font-size: 0.38rem;}
.gap6{ gap: 6px;}
.gap30{ gap: 0.3rem;}
.gap60{ gap: 0.6rem;}
.mtop65{ margin-top: 0.65rem;}
.mtop30{ margin-top: 0.3rem;}

.erbox ::-webkit-scrollbar{height:4px; width: 5px; }
.erbox ::-webkit-scrollbar-track{background-color:transparent;}
.erbox ::-webkit-scrollbar-thumb{background-color:#ccc;}
.erbox ::-webkit-scrollbar-thumb:hover {background-color:#bbb;}
.erbox ::-webkit-scrollbar-thumb:active {background-color:#999;}
html{scroll-padding-top: 50px}
/* ===== 产品中心：4列x2行 滚动轮播（2026-11-12） ===== */
.con3 .pro_box{ display: none;}
.con3 .pro_box.active{ display: block;}
/* 覆盖原“1大4小”的跨行跨列规则，所有产品统一尺寸 */
.con3 .pro_swiper .tulist:nth-child(1){ grid-column: auto; grid-row: auto;}
.con3 .pro_swiper .tuk{ aspect-ratio: 100/75.6;}
/* 行间距（Swiper grid 模式的纵向间隔） */
.con3 .pro_swiper .swiper-wrapper{ row-gap: 0.16rem;}
/* 底部 箭头+分页条 */
.con3 .pro_bar{ display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.45rem;}
.con3 .pro_bar .swiper-button-prev,
.con3 .pro_bar .swiper-button-next{ position: static; inset: auto; margin-top: 0; width: 0.4rem; aspect-ratio: 1; background-color: #782234; border-radius: 50%; background-size: 55%;}
.con3 .pro_bar .swiper-button-prev::after,
.con3 .pro_bar .swiper-button-next::after{ font-size: 0;}
.con3 .pro_bar .swiper-pagination{ position: static; inset: auto; width: auto; bottom: auto; line-height: 1;}
.con3 .pro_bar .swiper-pagination-bullet{ background-color: #782234;}