.cp_bg {
background: #fff;}
</style>
<style>
.pronav{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 30px;
}
.pronav li{
  min-width: 100px;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
}
.pronav li:hover a{
  background-color: #fed700;
  border-radius: 20px;
}
.pronav li a{
  height: 35px;
  line-height: 35px;
  padding-left: 10px;
  padding-right: 10px;
  color: #000;
  display: block;
}
.index_product_list{
  position: relative;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 45px;
}
.picScroll{ 
  overflow: hidden;
  position:relative;
}
.picScroll li{
  width:25%;/* 控制图片的数量 */
  float:left;
}
.picScroll li a{
  display: block;
  background-color: #f8f9fc;
  border: 1px solid transparent;
  margin-bottom: 45px;
  border-radius: 10px;
}
.picScroll li a:hover .pic{
  -webkit-filter: grayscale(70%); /* Chrome, Safari, Opera */
  filter: grayscale(70%);
}
.picScroll li a:hover .title{
  color: #FFF;
}
.picScroll .pic{ 
  width:100%;
  height: 0;/*将元素的 height 设成 0，使得元素的高度等于 padding-bottom*/
  padding-bottom: 75.86%;/* 高同宽的默认比例 */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  box-sizing: border-box;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  }
.picScroll .pic img{
  width: 100%;/* 兼容IE8 */
  height: 100%;
  position: absolute;
  filter:alpha(opacity=0);
  -moz-opacity:0;
  -khtml-opacity: 0;
  opacity: 0;
}
.picScroll .title{ 
  width:100%; 
  text-align:center;
  color: #000;
  position: relative;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}
.picScroll .title span{
  display: block;
  width: 100%;
  height: 75px;
  line-height: 75px;
  white-space: nowrap;/*设置不折行*/
  overflow: hidden;/*超出部分自动隐藏*/
  text-overflow: ellipsis;/*省略号*/
  position: relative;
  z-index: 2;
}
.index_product_list .hide{
  opacity:0;/* 隐藏箭头图标 */
}
.c1,.c5{
  background-color: #9ee4ff;
}
.c2,.c6{
  background-color: #fbbb19;
}
.c3,.c7{
  background-color: #fed700;
}
.c4,.c8{
  background-color: #ff7d95;
}
.c1::before,
.c2::before,
.c3::before,
.c4::before,
.c5::before,
.c6::before,
.c7::before,
.c8::before{
  content: "+";
  position: absolute;
  bottom: -35px;
  left: 50%;
  margin-left: -35px;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background-color: #9ee4ff;
  z-index: 1;
  border-radius: 50%;
  color: #FFF;
  font-size: 30px;
}

.picScroll li:hover .c1::before,
.picScroll li:hover .c2::before,
.picScroll li:hover .c3::before,
.picScroll li:hover .c4::before,
.picScroll li:hover .c5::before,
.picScroll li:hover .c6::before,
.picScroll li:hover .c7::before,
.picScroll li:hover .c8::before{
  box-shadow: 0px 14px 15px -15px rgba(0, 0, 0, 0.75);
}
.c2::before,.c6::before{
  background-color: #fbbb19;
}
.c3::before,.c7::before{
  background-color: #fed700;
}
.c4::before,.c8::before{
  background-color: #ff7d95;
}
.index_product_list .swiper-button-next,
.index_product_list .swiper-button-prev{
  top: 40%
}
.product_more{
  width: 55px;
  margin: 0 auto;
  padding-right: 11px;
  font-size: 12px;
  background-image: url(../images/more.png);
  background-repeat: no-repeat;
  background-position: right center;
}
.index_product_list {
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 45px;
}
.picScroll{ 
  overflow: hidden;
  position:relative;
}
.picScroll li{
  width:25%;/* 控制图片的数量 */
  float:left;
}
.picScroll li a{
  display: block;
  background-color: #f8f9fc;
  border: 1px solid transparent;
  margin-bottom: 45px;
  border-radius: 10px;
}
.picScroll li a:hover .pic{
  -webkit-filter: grayscale(70%); /* Chrome, Safari, Opera */
  filter: grayscale(70%);
}
.picScroll li a:hover .title{
  color: #FFF;
}
.picScroll .pic{ 
  width:100%;
  height: 0;/*将元素的 height 设成 0，使得元素的高度等于 padding-bottom*/
  padding-bottom: 75.86%;/* 高同宽的默认比例 */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  box-sizing: border-box;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  }
.picScroll .pic img{
  width: 100%;/* 兼容IE8 */
  height: 100%;
  position: absolute;
  filter:alpha(opacity=0);
  -moz-opacity:0;
  -khtml-opacity: 0;
  opacity: 0;
}
.picScroll .title{ 
  width:100%; 
  text-align:center;
  color: #000;
  position: relative;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}
.picScroll .title span{
  display: block;
  width: 100%;
  height: 75px;
  line-height: 75px;
  white-space: nowrap;/*设置不折行*/
  overflow: hidden;/*超出部分自动隐藏*/
  text-overflow: ellipsis;/*省略号*/
  position: relative;
  z-index: 2;
}
.picScroll li:hover .c1::before,
.picScroll li:hover .c2::before,
.picScroll li:hover .c3::before,
.picScroll li:hover .c4::before,
.picScroll li:hover .c5::before,
.picScroll li:hover .c6::before,
.picScroll li:hover .c7::before,
.picScroll li:hover .c8::before{
  box-shadow: 0px 14px 15px -15px rgba(0, 0, 0, 0.75);
}
.more03a{width:200px;display:block; line-height:40px; color:#fff; text-align:center; font-size:15px;background:#838383;  margin:20px auto;}
.more03a:hover{background:#f7793f; color:#fff;}

.chanp01 {
  position: relative;
  overflow: hidden;
  margin: 5px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  background: #fff;
  width: calc(25% - 16px);
  aspect-ratio: 1 / 1; 
  float: left; 
}
.chanp01 .cp_tit {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.chanp01 .cp_pic {
  position: relative;
  overflow: hidden;
  border-radius: 12px; 
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chanp01 .cp_pic img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.chanp01:hover {
  border-color: #1a1a1a;
  box-shadow: 0 6px 16px rgba(247, 121, 63, 0.15),
              0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

.chanp01 .cp_pic::after {
  display: none; 
}

.chanp01::before {
  display: none;
}
.chanp01:hover .cp_pic img {
  filter: none;
  transform: translate(-50%, -50%);
}

.interro-see-more {
    display: block;
    width: 260px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #333;
    border-radius: 8px;
    margin: 40px auto 20px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}
.interro-see-more:hover {
    background: #1a1a1a;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
    transform: translateY(-2px); 
    color: #fff;
    text-decoration: none;
}
@media (max-width: 1200px) {
    .interro-see-more {
        width: 220px;
        font-size: 15px;
    }

/* 悬浮联系方式专属样式 - 不影响原有页面样式 */
.contact-hover { transition: all 0.3s ease; background: #165DFF; /* 企业主色，可自定义 */ }
.contact-hover:hover { background: linear-gradient(135deg, #165DFF, #4080FF); transform: scale(1.05); }
.mobile-shadow { box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
.fixed-contact { z-index: 99999; /* 确保悬浮层在最上层，不被原有内容遮挡 */ }