body{ background-color:#888888; }
.palr{ padding:15px; }
.product-banner{ width:100%; height:350px; padding-top: 100px; display:flex; justify-content: center; align-items: center; flex-direction:column; background-position:center; background-size:cover; background-repeat: no-repeat;}
.product-search{ display:flex; flex-direction:column; justify-content:center; align-items:center; }
.header-t{  text-align:center; }
.header-t h1{ color:#ffffff; font-size:var(--font-h2); position:relative; padding:20px 30px; }
.header-t h1:before{ content:''; position:absolute; left:-45px; top:50%; width:45px; height:1px; background-color:#FFF; }
.header-t h1:after{ content:''; position:absolute; right:-45px; top:50%; width:45px; height:1px; background-color:#FFF; }
.productbox{ width:100%; display:flex; flex-direction:column; }

/* 外层容器 */
.product-sort-wrap {
  width: 100%;
  min-height: 620px;
  display: flex;
}
/* 左侧区域 */
.product-sort-left {
  width: 50%;
  background-color: #cacaca;
  padding: 50px 1% 50px 14%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.product-sort-left-mian {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/* 文字内容 */
.product-sort-text {
  transition: all 0.3s ease;
}
.product-sort-title {
  font-size: var(--font-t);
  margin-bottom: 16px;
  color: #000;
}
.product-sort-subtitle {
  font-size: var(--font-h4);
  color: #000;
  margin-bottom: 48px;
}
.product-sort-desc {
  font-size: var(--font-normal);
  line-height: 2;
  color: #000;
  max-width: 400px;
}
/* 切换按钮组 */
.product-sort-tabs {
  display: inline-flex;
  gap:25px 8px;
  border-radius: 999px;
  padding: 4px;
  flex-wrap: wrap;
}
.product-sort-tab {

}
.product-sort-tab a{ 
  padding: 10px 24px;
  border-radius: 999px;
  color: #000;
  font-size: var(--font-smallx);
  background-color: #efeeea;
  transition: all 0.3s ease;
 }
.product-sort-tab.active a{
  background-color: #000;
  color: #fff;
}
/* 右侧图片区域 */
.product-sort-right {
  width: 50%;
  position: relative;
  overflow: hidden;
}
.product-sort-img-wrap {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.product-sort-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-sort-dots {
  position: absolute;
  bottom: 30px;
  left: 60px;
  display: flex;
  gap: 8px;
}
.product-sort-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}
.product-sort-dot.active {
  background-color: #fff;
}
.product-sort-fade {
  opacity: 0;
}

/* 产品 */
.img-thumbnail{ border-radius:0!important; }
.products-sort{ width:100%; display:flex; padding:25px 0px; }
.promain{ width:100%; display:flex; flex-direction:column; padding: 40px 0px;}
.proone-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.proone-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
/* 卡片基础样式 */
.proone-card {
  width:100%;
  overflow: hidden;
  background-color: #dbdbdb;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.proone-card.active,
.proone-card:hover {
  background-color: #4b4b4b; 
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}
.proone-img-wrap {
  margin: 16px;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}
.proone-img {
  width: 100%;
  object-fit: contain;
  display: block;
}
.proone-info {
  padding: 12px 24px 24px;
  text-align: center;
}
/* 产品编号 */
.proone-sku {
  font-size: var(--font-normal);
  color: #222;
  margin-bottom: 16px;
  transition: color 0.3s ease;
}
/* hover/选中时编号变白 */
.proone-card:hover .proone-sku,
.proone-card.active .proone-sku {
  color: #fff;
}
/* 按钮基础样式 */
.proone-btn {
  width: 140px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #4b4b4b;
  color: #fff;
  font-size: var(--font-smallx);
  cursor: pointer;
  transition: all 0.3s ease;
}
.proone-card:hover .proone-btn,
.proone-card.active .proone-btn {
  background-color: #fff;
  color: #000;
}
.proone-btn:hover {
  opacity: 0.9;
}

/*分页*/
.pagination-box { width:100%; display:flex; justify-content:center; align-items:center; padding:60px 0px 10px;}
.pagination { width:100%; display:flex; justify-content:center; align-items:center; gap:2px; }
.pagination li { display:flex; justify-content:center; align-items:center;}
.pagination li svg{ width:20px; height: 20px; }
.pagination li a, 
.pagination li span {display:block;border-radius:360%;cursor: pointer; color:#c9c9c9!important; width:40px; height:40px; display: flex; justify-content: center; align-items: center; background-color:#FFF; }
.pagination li a{width:40px;height:40px;display:flex;justify-content:center;align-items:center; border-radius: 360px; border: 2px solid #c9c9c9;}
.pagination li.active a{border: 2px solid #000000; background: #000000!important; color:#FFF!important;}
.pagination li.disabled a {color: #000!important; cursor: not-allowed;}
.pagination li.disabled a:hover {color: #000!important;}
.pagination li a:hover:not(.disabled) {opacity: 0.7}
.pagination li a.cw:hover:not(.disabled) {background: #333;color:#FFF!important;}
#cco{ fill:#949494; }
#prevstart #cco{ fill:#949494; }
#nextend #cco{ fill:#949494; }


/* 查找 */
.prosearch { position: relative; width:400px; margin-top:5px; }
.prosearch form { width:100%; position: relative; display: flex; align-items: center;  }
.prosearch input[type="text"] {width: 100%;height: auto; color:#FFF; padding: 15px 40px 15px 15px;font-size:0.85rem;transition: all 0.3s; border:1px solid #999999; background-color:transparent;}
.prosearch input[type="text"]:focus {border-color: #FFF;box-shadow: 0 0 8px rgba(0,0,0,.25);outline: none; background-color:transparent;}
.prosearch i { position: absolute; right:0px; top:0%; cursor: pointer;}
.prosearch img {width:30px;height:30px;}
.prosearch button{ width:30px;height:30px; background-color:transparent;border:0; outline:none; position:absolute; right:15px; top:10px; }


/* 内页 */
.product-info-box{ width:100%; display:flex; padding:70px 0px; }
.proinfobox{ width:100%;display:flex; flex-direction:row; }
.pfa-l{ width:50%; float: left; display:flex; flex-direction:column-reverse; align-items:flex-start; gap:15px; }
.pfa-l .swiper-slide img{ width:100%;}
.swipera{ width:100%; position: relative; overflow: hidden; border: 1px solid #eeeeee; background-color: #FFF;}
.swipera .zoom-hand{ position: absolute; right:15px; bottom:15px; z-index: 1;}
.swiperb{ width:100%; height:auto; position: relative; overflow: hidden;}
.swiperb .swiper-slide{ width:80px; border:2px solid #e4e4e4; }
.swiperb .img-thumbnail{ border:0!important; }
.swiperb .swiper-wrapper{ }
.swiperb .swiper-wrapper .swiper-slide{ display: flex; justify-content: center; align-items: center; cursor: pointer;}
.swiperb .swiper-wrapper .swiper-slide img{ width:100%; }
.swiperb .swiper-slide-thumb-active { border:2px solid #000!important;}
#prev{ position: absolute; left:0px; top:45%; transform: translateY(-50%); background: url(../../uploads/svg-loaders/back-big-left.svg) center center no-repeat; background-size:100%; width:50px; height:50px; z-index: 99; }
#next{ position: absolute; right: 0; top:45%; transform: translateY(-50%); background: url(../../uploads/svg-loaders/back-big-right.svg) center center no-repeat; background-size:100%;width:50px; height:50px; z-index: 99; }

.pfa-r{ width:50%; height:auto; float: left; padding-left:11%; display:flex; flex-direction:column-reverse; justify-content: space-between; align-items:flex-start; position:relative; }
.r-content{ width:100%; display:flex; flex-direction:column; }
.top-one{ width:100%; display:flex; flex-direction:row; justify-content: space-between; position:relative;border-bottom:1px solid #c0c0c0; padding-top: 30px;}
.top-one-l{ display:flex;flex-direction:column; padding-bottom:15px; }
.top-one-l h1{ font-size:var(--font-h2); font-weight:600; line-height:1.8; color:#FFF; }
.top-one-r{ display:flex; }
.top-one-r a{ width:30px; display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
.top-one-r a img{ width:100%;}
.top-two{ width:100%; display:flex; flex-direction:column; padding:25px 0px; }
.top-two p{ font-size:var(--font-tp); color:#ffffff; line-height:1.5; padding-top:10px; }
.top-contact{ width:100%; display:flex; flex-direction:column; gap:10px; padding:15px 0px; border-top:1px solid #c0c0c0; }
.top-contact div{ display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; flex-direction:row; gap:15px; color: #FFF; font-size: var(--font-normal);}
.top-contact div i{ width:28px; height:28px; }
.top-contact div i svg{ width:100%; }

/* 弹出层样式 */
.swiper-modal { position: fixed;top: 0;left: 0;width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999;display: none;}
.close-btn {position: absolute;top: 20px;right: 20px;color: #fff;font-size: 3rem; cursor: pointer;z-index: 10000;}
.swiper-modal .swiper {width: 80%;height: 80%;margin: 5% auto;}

/*更多*/
.morebox{ width:100%; display:flex; flex-direction:column; padding:30px 0px 0px;}
.more-title{ width:100%; display:flex; justify-content:center; align-items:center; }
.more-title h1{ font-size:var(--font-h2); line-height:1.5; font-weight:normal; color:#FFF; padding:15px; position: relative;}
.more-title h1::before{ content:''; position:absolute; left:-60px; top:50%; width:45px; height:1px; background-color:#FFF; }
.more-title h1::after{ content:''; position:absolute; right:-60px; top:50%; width:45px; height:1px; background-color:#FFF;}
.more-inbox{ padding:20px 0px 100px; }
.more-cpbox{ width:100%; padding:25px 15px 70px; position:relative; }
.proone-swiper-button-prev { position:absolute; left:-70px; top:calc(50% - 5px); transform: translateY(-50%); background: url(../../uploads/svg-loaders/rl.png) center center no-repeat; border-radius: 360px; cursor:pointer; background-size:90%; width:45px; height:45px; z-index: 99; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.proone-swiper-button-prev:hover { width:45px; height:45px; background: url(../../uploads/svg-loaders/rlh.png) center center no-repeat; background-size:90%; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.proone-swiper-button-next { position:absolute; cursor:pointer; right:-70px; top:calc(50% - 5px); transform: translateY(-50%); background: url(../../uploads/svg-loaders/rr.png) center center no-repeat;  border-radius: 360px; background-size:90%; width:45px; height:45px; z-index: 99; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}
.proone-swiper-button-next:hover {width:45px; height:45px; background: url(../../uploads/svg-loaders/rrh.png) center center no-repeat; background-size:90%; transition: 0.6s;-webkit-transition: 0.6s;-moz-transition: 0.6s;}

/*空*/
.searchtop{ margin-top:150px; }
.searchbox{ width:100%;display:flex; flex-direction:column; padding:30px 0px 100px; }
.words{width:100%;display: flex; justify-content:flex-start; align-items: center; flex-direction: row; padding:30px 0px 0px;}
.words h1{ font-size:1.6rem; line-height:1.5; font-weight:600; }
.words p{font-size:1rem; line-height:1.5; font-weight:600; }
.empty-product { text-align: center; padding: 50px 20px; background:#f8f9fa; border-radius: 8px; margin: 30px 0;}
.empty-product img { width: 90px;opacity: 0.8;}
.empty-product p {font-size:1rem;color: #6c757d;}
.btn-back { font-size:1rem; margin-top: 20px; padding: 8px 25px; border-radius: 20px; background: #333; color: white !important; transition: all 0.3s;}
.btn-back:hover { background: #000; transform: translateY(-2px);}

.s-words{width:100%;display: flex; justify-content:flex-start; align-items: center; flex-direction: row;}
.s-wwd{ display:flex; flex-direction:row; justify-content:flex-start; align-items:center; padding-right:15px; color:#FFF; }
.s-words .s-wwd h1{ font-size:1.6rem; line-height:1.5; font-weight:600; }
.s-words .s-wwd p{font-size:1rem; line-height:1.5; font-weight:600; }
.s-words .prosearch{ padding:0; }
.s-words .prosearch input[type="text"]{ background-color:#333; }

/*分页*/


@media (max-width: 1430px) {
.product-sort-wrap{ min-height:550px; }
.product-sort-left{ padding: 50px 1% 50px 8%; }
}

@media (max-width: 1230px) {
.product-banner{ height:300px; }
.product-sort-wrap {
  min-height: 500px;
}
.product-sort-left { padding: 50px; }
.pfa-r{ padding-left:5%; }

}
/*ipad*/
@media (min-width: 768px) and (max-width: 991px) {
.product-sort-left { padding:20px; }
}
/* xs */
@media (max-width: 767px) {
.searchtop{ margin-top:70px; }
.plrx{ padding:0; }
.product-banner{ width:100%; height:auto; padding:70px 0px 20px;}
.header-t h1{ padding:10px 20px; }
.header-t h1:before{ left:-35px; width:25px; }
.header-t h1:after{ right:-35px; width:25px; }
.product-search{ width:90%; }
/* 外层容器 */
.product-sort-wrap { min-height:auto; flex-direction: column-reverse;}
.product-sort-right { width: 100%;}
.product-sort-img-wrap { height: auto; }
.product-sort-img-wrap img { height: auto;}

/* 产品 */
.products-sort{ width:100%; display:flex; padding:0px; }
.promain{ flex-direction:row; padding:0px; min-height:400px;}
.d-block-hidden{ display:flex; flex-direction:column; }
.xpro-sort{ width:100px; height:auto; background:#cacaca; flex-shrink:0; padding:12px 0px;}
.product-sort-xtab {
  width: 100%;
  gap:10px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  padding: 5px;
  border-bottom: 1px solid #b6b5b5;
}
.product-sort-xtab a{ 
  padding: 5px;
  border-radius:5px;
  color: #000;
  font-size: 0.9rem;
  min-height: 50px;
  display: flex;
  align-items: center;
 }
 .product-sort-xtab:last-child{ 
  border-bottom: none;
 }
.product-sort-xtab.active a{
  background-color: #000;
  color: #fff;
}

.proone-list {
  padding: 20px 10px;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.proone-card.active,
.proone-card:hover {
  transform: translateY(0px);
}
.proone-img-wrap {
  margin:5px;
  border-radius:5px;
}
.proone-info {
  padding:10px;
}
.proone-sku {
  margin-bottom: 10px;
}
.proone-btn {
  width: 100%;
  height: 30px;
}

.product-sort-left {
  width: 100%;
  padding:20px 15px;
}

.product-sort-tab a{ padding: 10px; }

/*分页*/
.pagination-box { padding:40px 0px 10px;}
.pagination li a, 
.pagination li span { width:30px; height:30px; }
.pagination li a{width:30px;height:30px;}

/* 查找 */
.prosearch { position: relative; width:100%; margin-top:5px; }

/* 内页 */
.product-info-box{ padding:20px 0px; }
.proinfobox{  flex-direction:column; }
.pfa-l{ width:100%; flex-direction:column; }
.pfa-r{ width:100%; padding-left:0; flex-direction:column; padding-top:10px; }
.top-one{ padding-top: 20px;}
.top-two{ padding:15px 0px; }

/*更多*/
.morebox{ padding:20px 0px 0px;}
.more-title{ min-height:70px; }
.more-title h1{ font-size:1.4rem; }
.more-cpbox{ padding:15px 0px 30px; }
.more-inbox{ padding:0px 0px 50px; }
.proone-swiper-button-prev { left:0px; width:35px; height:35px;}
.proone-swiper-button-prev:hover { width:35px; height:35px;}
.proone-swiper-button-next { right:0px; width:35px; height:35px;}
.proone-swiper-button-next:hover {width:35px; height:35px;}

/*空*/
.searchbox{ padding:20px 10px 50px; }
.words{ padding:20px 0px 0px;}
.words h1{ font-size:1.4rem; }
.words p{font-size:1.2rem; }
.empty-product {  margin:0px 0;}
.s-words{ align-items:flex-start; flex-direction:column; padding:20px 0px 0px;}
.s-wwd{  padding-right:0; }
.s-words .s-wwd h1{ font-size:1.4rem; }
.s-words .prosearch{ padding:10px 0px; }

}

@media (max-width: 480px) {
 
}