*{margin:0; padding:0; box-sizing:border-box;}
html,body{width:100%; height:100%;}
body{font-size:12px; line-height:1.5; font-family:Arial,sans-serif; min-width:300px; color:#303030; background-color:#FFF;}

a{color:#303030; text-decoration:none;}
a:hover{color:#66CC00;}
li{list-style-type:none;}
img {
  border: 0;
  vertical-align: top;
  height: auto;
  max-width: 100%;
  transform: translateZ(0);
}
em{color:#00CC00;}
b{color:#cc0000;}
hr{border-top:1px dashed #303030; margin:5px 0;}

textarea{resize:vertical;}
input,select,button{vertical-align:middle; height:30px; padding:5px; border:1px solid #303030; outline:none;}
input:focus{border:1px solid #0099FF;}

textarea{border:1px solid #303030; padding:5px;}
.lazyload,.lazyloading{opacity:0;}
.lazyloaded{opacity:1; transition:opacity 300ms;}

.clear{clear:both; font-size:1px; visibility:hidden;}

.top{display:flex; flex-flow:row wrap; margin:0 auto; color:#999; max-width:1280px;}
.top span{flex:1 1 100%; margin:30px;}
.top span img{width:227px; height:80px;}
.top div{flex:1 1 100%; padding:5px; text-align:right;}
.top>ul{display:flex; align-items:flex-start; white-space:nowrap; margin:0 auto -5px; overflow:auto; min-width:0;}
.top>ul>li{padding:10px 10px 5px; margin:0 3px; width:115px; line-height:1; background:#bfdb36; border-radius:10px 10px 0 0; cursor:pointer;}
.top>ul>li a{color:#475161;}
.top>ul>li.active{background:#475161; padding-bottom:10px;}
.top>ul>li.active a{color:#fff;}
.top>ul>li.active a:hover{color:#ccc;}

#topauto{border-bottom:2px solid #303030; border-top:4px solid #303030; background-color:#475161;}
.topnav{display:flex; justify-content:center; align-items:center; max-width:1280px;margin:0 auto;}
.topnav>ul{min-width:0; margin:0 auto;}
.topnav>ul>li{color:#fff; overflow:auto; white-space:nowrap; display:none;}
.topnav>ul>li a{color:#bfdb36;}
.topnav>ul>li a:hover{color:#CCC;}

.topnav>form{flex:none; margin:5px 0; border:2px solid #303030; border-radius:8px; background-color:#fff; white-space:nowrap; overflow:hidden;}
.topnav>form>input{width:0; padding:0; border:0; background-color:rgba(0,0,0,0); transition:width 0.3s ease, padding 0.3s ease;}
.topnav>form:hover>input, .topnav>form>input:focus{width:auto; border:0;}
.topnav>form>select{background-color:rgba(0,0,0,0); border:0;}
.topnav>form>button{background-color:#ff7802; color:#303030; border:0; padding:0 10px 2px;}

.jsddm>li{display:inline-block; padding:8px 10px;}
.jsddm>li>ul{position:absolute; display:none; z-index:2; background:#475161; padding:10px; border-radius:0 0 10px 10px;}
.jsddm>li>ul li{padding:5px 0;}

.H_12{
	font-family:Georgia,"Times New Roman",Times, serif;
	font-weight:bold; font-size:16px; color:#FF6600;
}
.Bt{
	font-size:14px;
	color:#FF6600;
	font-family:Arial,Helvetica,sans-serif;
	font-weight:bolder;
}
.Rt{
	color:#FF0000;
	font-family:Arial, Helvetica, sans-serif;
}
.Bt1{font-size:28px; color:#FF6600;}
.Tel{font-weight:bold;
	font-family:Georgia, Times New Roman, Times, serif;
	font-size:24px;
}

#table_main{display:flex; flex-flow:row wrap; column-gap:30px; position:relative; max-width:1280px; min-width:0; margin:0 auto; border-left:2px solid #303030; border-right:2px solid #303030;}
.table_bg{flex-basis:100%; position:relative; overflow:hidden; background-repeat:no-repeat; background-size:100%; container-type:inline-size;}
.table_bg:after{position:absolute; width:140%; height:160%; left:-10%; top:44%; content:''; border-top-left-radius:80% 105%; border-top-right-radius:70% 120%; background-color:#fff;}
.table_bg:before{position:relative; content:""; padding-bottom:28.46%; display:block;}
.table_bg h1{display:flex; position:absolute; top:0; left:5%; right:10%; height:44%; text-align:right; white-space:nowrap;}
.table_bg h1 b{flex:1; margin:auto 0; font-size:3cqw; color:#fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

#Sp_show{display:grid; grid-template-columns: repeat(2, 1fr); margin:20px 0 100px; width:100%;}
#Sp_show>ol{display:flex; position:fixed; top:0; left:0; border:1px solid #303030; width:100%; height:100%; z-index:10; background:rgba(0,0,0,0.6); overflow:auto;}
#Sp_show>ol>li{margin:auto;}
#Sp_show>ol>li>img{cursor:zoom-out;}

#Sp_showR{padding:25px; align-self:center; border-left:2px dashed #ccc; container-type:inline-size; min-width:0;}
#Sp_showR h1{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:5cqw;}
#Sp_showR ul{display:grid; grid-template-columns: repeat(6, 1fr); gap:10px;}
#Sp_showR ul li{position:relative; padding:5px; border:1px dashed #CCC;}
#Sp_showR ul li img{width:100%; height:auto; aspect-ratio: 1/1;}
#Sp_showR ul li::before{display:block; content:attr(data-cou); position:absolute; bottom:0; right:5px; z-index:1;}

/* 两个按钮的容器 —— 水平排列，间距适中 */
.action-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
	margin:15px 0 10px;
}

/* 按钮 + 徽章的包裹层，用于相对定位 */
.button-wrapper {
    position: relative;
    display: inline-block;
}

/* 公用按钮样式 */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1rem 1.1rem;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    letter-spacing: 0.3px;
}

/* 购物车按钮特有颜色 */
.btn-cart {
    background: linear-gradient(135deg, #2b7e3a, #1e5a2c);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-cart:hover {
    background: linear-gradient(135deg, #1e5a2c, #0f3d1a);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(30, 90, 44, 0.3);
}

.btn-cart:active {
    transform: translateY(1px);
}

/* 报修按钮 */
.btn-repair {
    background: white;
    color: #d97706;
    border: 1px solid #fed7aa;
}

.btn-repair:hover {
    background: #fffbeb;
    border-color: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(217, 119, 6, 0.1);
}

.btn-repair:active {
    transform: translateY(1px);
}

/* 购物车数量角标 — 悬浮在按钮右上角 */
.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #e53e3e;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1.5px solid white;
    font-family: monospace;
    line-height: 1;
    backdrop-filter: blur(2px);
}

#Sp_showL{width:100%; padding:25px;}
#Sp_showL ul{}
#Sp_showL ul li{}
#Sp_showL ul li img{width:100%; height:auto; aspect-ratio: 1/1; cursor:zoom-in;}
#Sp_showL ul li span{position:absolute;bottom:80px; right:30px; padding:0 5px; font-weight:bold; font-size:36px; color:#FFF; background:rgba(255,0,0,0.7);}
#Sp_showL ul li p{position:absolute; bottom:40px; right:30px; text-align:right; font-size:24px; font-weight:bold; color:#303030; text-shadow:1px 1px 1px #fff;}

#Sp_showL .swiper-button-prev, #Sp_showL .swiper-button-next{color:#444;}
#Sp_showL .swiper-pagination{width:auto; left:25px; right:25px; bottom:0; text-align:right;}
#Sp_showL .swiper-pagination-bullet{width:25px; height:25px; text-align:center; line-height:25px; margin:0 0 0 2px; border-radius:0; color:#FFF; opacity:0.3;}
#Sp_showL .swiper-pagination-bullet-active{background-color:#303030; opacity:1;}

/*产品参数+品牌简介+相关产品*/
.nav{border-bottom:2px solid #303030; width:100%; min-width:0;}
.nav>ul{display:flex; align-items:flex-start; margin:0 auto -2px; white-space:nowrap; overflow:auto; max-width:800px; font-size:16px; font-weight:bold; color:#FFF;}
.nav>ul>li{border:2px solid #303030; border-bottom:none; border-radius:20px 20px 0 0; margin:0 5px; padding:10px 20px 10px; background-color:#475161;}
.nav>ul>li:hover{color:#303030; background:#fff; cursor:pointer;}
.navClicked{background-color:#fff !important; color:#303030 !important;}

#Sp_showN{padding:30px 10px 10px; font-size:16px; flex-basis:100%; min-width:0;}
#Sp_showN>div>img{vertical-align:top; width:100%; height:auto;}
#Sp_showN div video{display:block; width:80%; height:auto; margin:20px auto;}
#Sp_showN table{display:block; border-collapse:collapse; overflow:auto;}
#Sp_showN table tbody{display:table; width:100%;}
#Sp_showN table td,#Sp_showN table th{padding:10px; border:1px solid #CCC;}
#Sp_showN table td:nth-of-type(odd){text-align:right; white-space:nowrap;}
#Sp_showN table th{background-color:#efefef; font-size:20px;}

/*相关产品推荐样式*/
.Sp_xguan{display:none;}
.Sp_xguan>ul{display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}
.Sp_xguan>ul>li{text-align:center; font-size:14px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.Sp_xguan>ul>li>a{display:block; position:relative; width:80%; height:auto; padding:5px; margin:10px auto; border:1px dashed #CCC; container-type:inline-size; overflow:hidden;}
.Sp_xguan>ul>li>a>img{width:100%; height:auto; aspect-ratio: 1/1;}
.Sp_xguan>ul>li>a>em{position:absolute; font-size:10cqw; color:#FFF; background:rgba(255,0,0,0.8); padding:5px; top:60%; right:-1%; transform:translateX(100%); transition:transform 0.2s ease;}
.Sp_xguan>ul>li>a:hover>em{transform:translateX(0); right:0;}
.News{border-top:1px dashed #CCC; clear:both; padding:15px 10px;}
.News p{text-indent:2em;}

/*热销产品推荐*/
#Hot{margin:50px auto; width:100%;}
#Hot .H-nav{display:flex; border:2px solid #444; background:linear-gradient(to bottom, #fff, #ddd); border-radius:0 12px 0 0; white-space:nowrap; font-weight:bold;}
#Hot .H-nav .H-Left{padding:8px 20px 0; margin:-12px auto 0 -2px; border-radius:12px 12px 0 0; font-size:20px; color:#FFF; background:#444;}
#Hot .H-nav .H-Right{display:flex; overflow:auto; border-radius:0 10px 0 0; margin:0 0 0 5px;}
#Hot .H-nav .H-Right a{padding:6px 10px; cursor:pointer; font-size:14px; border-left:2px solid #444;}
#Hot .H-nav .H-Right a.H-hover{background:#FFF;}

#Sale{border:2px solid #444;}
#Sale ul li{display:grid; grid-template-columns: repeat(4, auto); gap:10px; padding:10px;}
#Sale ul li a{position:relative; border:1px dashed #CCC; container-type:inline-size;}
#Sale ul li a>img{width:100%; height:auto; aspect-ratio: 1/1; margin:20% 0;}
#Sale ul li span{position:absolute; top:8px; left:8px;}
#Sale ul li span img{width:105px; height:30px; opacity:0.6;}
#Sale ul li b{position:absolute; font-size:10cqw; bottom:3%; right:5%; color:#FF0000;}
#Sale ul li p{position:absolute; bottom:15%; padding:10px 5px; width:100%; background:rgba(0,0,0,0.7); color:#FFF; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

.table_left{flex:0 0 auto;}
.LeftNav{display:flex; flex-flow:row wrap; position:sticky; top:30px; border-right:2px solid #303030; z-index:1;}
.LeftNav dl{width:230px; max-height:500px; padding:10px; text-align:right; overflow:hidden; background-color:#FFF;}
.LeftNav dl:hover{overflow:auto}
.LeftNav dl dt{font-size:16px; color:#66CC00;}
.LeftNav dl dd{margin-bottom:10px; font-size:10pt; color:#888;}
.LeftNav>span{position:absolute; top:30px; right:0;}
.LeftNav>span::before{position:absolute; content:""; border:16px solid transparent; border-left-color:#303030;}
.LeftNav>span:hover{cursor:pointer;}
.LeftNav>span:hover i{border-left-color:red;}
.LeftNav>span>i{position:absolute; top:10px; border:6px solid transparent; border-left-color:#FFF;}
.toggle_i{transform:translate(-6px) rotate(-180deg);}

.slider-container {
	margin: 20px 10px;
}
.slider-track { 
	width: 100%;
	height: 5px;
	background: #ddd;
	border-radius: 5px;
	position: relative;
	margin:20px 0;
}
.slider-range {
	position: absolute;
	height: 100%;
	background: #303030;
	border-radius: 3px;
}
.slider-thumb {
	position: absolute;
	width: 15px;
	height: 15px;
	background: #ccc;
	border: 2px solid #303030;
	border-radius: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	z-index: 2;
}

.table_right{flex:1 1 320px; margin:0 10px; min-width:0;}
.table_right>h2{overflow:auto; white-space:nowrap;}
.table_right h3{background-color:#F0F0F0; padding:5px;}
.table_right>ul{display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows:min-content; gap:5px; border-top:2px solid #CCC; margin:5px 0 30px; padding-top:10px; align-items: start;}
.table_right>ul>li{padding:5px; border:1px dashed #CCC; background-color:#eee; white-space:nowrap; text-align:center;}
.table_right>ul>li img{width:100%; height:auto; aspect-ratio: 7/2}

.table_right>dl{display:flex; flex-flow:row wrap;}
.table_right>dl dt{margin:50px 0 20px; padding:10px 0 8px; font-size:18px; font-weight:bold; color:#303030; width:100%;
	background-image:linear-gradient(to right,#fff 1%, #444 10%, #ccc);
	background-repeat:no-repeat;
	background-size:0 2px;
	background-position:right bottom;
	transition:background-size 1300ms;}
.table_right>dl:hover dt{background-position-x:left; background-size:100% 2px;}
.table_right>dl dt span{float:right; font-size:14px; color:#303030;}
.table_right>dl dt span sup{color:#FF0000;}
.table_right>dl dt b{color:#303030;}
.table_right>dl dd{width:calc(50% - 20px); text-align:center; font-size:14px; margin:10px; padding:15px 0; border-radius:25px; container-type:inline-size;}
.table_right>dl dd:hover{box-shadow:0 0 10px 5px #ccc;}
.table_right>dl dd:hover i{transform:translateX(0); right:0;}
.table_right>dl dd span{display:block; position:relative; border-bottom:2px dashed #444; width:60%; margin:0 auto 10px; padding-bottom:10px; overflow:hidden;}
.table_right>dl dd span i{position:absolute; padding:5px; right:-1%; bottom:25%; transform:translateX(100%); transition:transform 0.2s ease; font-size:5cqw; color:#FFF; background:rgba(255,0,0,0.7);}
.table_right>dl dd span img{width:100%; height:auto; aspect-ratio: 1/1;}
.table_right>dl dd p{text-overflow:ellipsis; white-space:nowrap; overflow:hidden; margin:0 5px;}
	/*排序样式*/
.Splist{display:flex; flex-flow:row wrap; margin:20px 0 0; width:100%;}
.Splist>h2{margin-right:auto;}
.Splist>ul{font-size:14px; margin-left:auto; align-self:flex-end;}
.Splist>ul>li{display:inline-block; padding:5px 10px; background-color:#ccc; border-radius:6px;}
.Splist>ul>li>a{position:relative; display:inline-block; padding:1px 14px 2px 5px;}
.Splist>ul>li>a:before{position:absolute; display:inline-block; content:""; top:-1px;   right:0px; border:4px solid transparent; border-bottom:7px solid #444;}
.Splist>ul>li>a.up:before{border-bottom-color:#FF0000;}
.Splist>ul>li>a:after{position:absolute; display:inline-block; content:""; bottom:-1px; right:0px; border:4px solid transparent; border-top:7px solid #444;}
.Splist>ul>li>a.down:after{border-top-color:#FF0000;}
.Splist>ul>li:last-child{background:none; border:1px solid #999; width:33px; height:33px; padding:5px;}
.Splist>ul>li:last-child img{width:100%; height:100%; aspect-ratio: 1/1;}
.Splist>ul>li:last-child:hover{cursor:pointer;}
.Splistx{background-color:#999!important;}

#sp_list{display:flex; flex-flow:row wrap; align-items:flex-start;}
#sp_list>dl>dd>span sub{color:#CCC;}
	/*竖式排列样式*/
.sp_list1>dl{width:50%; padding:10px 0 0; margin:20px 0; container-type:inline-size; text-align:center;}
.sp_list1>dl:hover{box-shadow:0 0 10px 5px #ccc; border-radius:25px;}
.sp_list1>dl>dt{position:relative; width:60%; margin:0 auto; overflow:hidden;}
.sp_list1>dl>dt>i{position:absolute; padding:5px; transform:translateX(100%); transition:transform 0.2s ease; top:60%; right:-1%; font-size:5cqw; color:#FFF; background:rgba(255,0,0,0.7);}
.sp_list1>dl:hover>dt>i{transform:translateX(0); right:0;}
.sp_list1>dl>dt img{width:100%; height:auto; aspect-ratio:1/1;}
.sp_list1>dl>dd{width:75%; margin:20px auto 0; padding:10px 5px; font-size:14px; border-top:2px dashed #444; position:relative;}
.sp_list1>dl>dd>h2{font-size:14px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-weight:normal;}
.sp_list1>dl>dd>span{position:absolute; top:-30px; right:0; white-space:nowrap;}
.sp_list1>dl>dd>p{display:none;}
.sp_list1>dl>dd>h2>i{display:none;}

	/*横式排列样式*/
.sp_list2>dl{width:100%; display:flex; flex-flow:row wrap; padding:50px 0; border-top:1px dashed #ccc;}
.sp_list2>dl>dt{flex:1 1 127px; margin:0 20px; padding:0 20px 0 0; border-right:1px dashed #444;}
.sp_list2>dl>dt img{width:100%; height:auto; aspect-ratio: 1/1;}
.sp_list2>dl>dt>i{display:none;}
.sp_list2>dl>dd{flex:3 1 180px; font-size:14px; display:flex; flex-flow:column nowrap; container-type:inline-size; position:relative;}
.sp_list2>dl>dd>h2{font-size:5cqw; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.sp_list2>dl>dd>h2>i{display:block; font-style:normal; color:#FF0000;}
.sp_list2>dl>dd>span{position:absolute; bottom:-35px; right:0;}
.sp_list2>dl>dd>p{text-indent:2em; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; word-break:break-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.sp_list2>dl:first-of-type{border:none;}

.Pjshao{overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; text-overflow:ellipsis; white-space:normal;}
.Pjshao img{width:100%; height:auto;}
.Pjshao:hover{display:block;}

.ListP{flex:1 1 100%; min-width:0; margin:30px auto;}
.ListP>li{padding:10px; display:flex; white-space:nowrap;}
.ListP>li:nth-child(5n){background:#eee;}
.ListP>li>a{text-overflow:ellipsis; overflow:hidden; font-size:14px;}
.ListP>li>span{margin-left:auto;}

footer{max-width:1280px; margin:0 auto; border:2px solid #303030; border-top:none; background:#475161;}
footer::before{display:block; content:""; padding-bottom:5%; border-bottom-right-radius:25% 100%; background-color:#FFF; border-bottom:2px solid #303030;}
footer>nav{border-bottom:2px solid #303030;}
footer>nav>ul{display:flex; padding:10px; white-space:nowrap; overflow:auto;}
footer>nav>ul>li{margin:0 5px; color:#FFF;}
footer>nav>ul>li:last-child{margin-left:auto;}
footer>nav>ul>li>a{color:#bfdb36;}
footer>nav>ul>li>a:hover{color:#fff;}
footer .info{padding:10px; color:#666; text-align:center; background-color:#FFF;}

.So_page{flex:1 1 100%; margin:20px auto; text-align:center; order:99; align-self:flex-end;}
.So_page>ul{display:flex; justify-content:center; margin:20px auto;}
.So_page>ul>li{background-color:#F3F3F3; border-radius:5px; padding:5px 10px; margin:0 5px;}

.TableB{display:block; border-collapse:collapse; overflow:auto;}
.TableB tbody{display:table; width:100%; white-space:nowrap;}
.TableB tr:first-child td{background-color:#eee; font-weight:bold; font-size:16px;}
.TableB tr:last-child td{background-color:#eee; font-weight:bold; text-align:right; font-size:16px;}
.TableB td{border:1px solid #303030; text-align:center; padding:10px;}
.TableB th{border:1px solid #303030; text-align:left; padding:10px;}
.TableB img{width:100%; height:auto; aspect-ratio: 1/1; min-width:60px;}

.error{color:#F00;}
.success{color:#096;}

@media only screen and (max-width:410px){
.sp_list2 dl dt{border:none; padding:0;}
.sp_list2>dl>dd>p{flex:1 0 60px;}
.sp_baohan p span sub{display:none;}
.sp_list1>dl>dd>span sub{display:none;}
.table_right>dl dt b{display:none;}
}
@media only screen and (max-width:720px){
.LeftNav{position:fixed;}
.LeftNav dl{display:none;}
.So_page>span{display:none;}
#Sp_showR{border:none;}
.Sp_xguan>ul{grid-template-columns: repeat(2, 1fr);}
#Sp_showR ul{grid-template-columns: repeat(3, 1fr);}
#Sp_show{grid-template-columns: repeat(1, 1fr);}
}