.product {
  padding: 40px 10px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.pro-main {
  max-width: 1480px;
  margin: 0 auto;
}
.pro-title  h2{
  font-size: 40px;
  font-weight: 700;
  color: #131108;
  line-height: 48px;
  margin-bottom: 60px;
  margin-top: 80px;
  text-align: center;
  font-weight: bold;
}
.pro-flex {
  display: flex;
  flex-wrap: wrap;
      width: 100%;
    margin-bottom: 40px;
    position: relative;
    gap:1.1%;
}
.pro {
      width: 32.6%;
      margin-bottom: 1.1%;
 
}
.pro-item{width:100%;padding:36px 40px 40px;border-radius:24px;overflow:hidden;background-color:#F4F5F7;}
.pro-item .item-title{width:100%;text-align:left;}
.pro-item .item-title h3{width:100%;font-size:24px;color:#131108;line-height:36px;height:36px;font-weight:bold;overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap;}
.pro-item .item-title p{width:100%;margin-top:8px;font-size:16px;color: #878787;line-height:24px;height:48px;overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}

.pro-item {
  width: 100%;
  padding: 36px 40px 40px;
  border-radius: 24px;
  overflow: hidden;
  background-color: #f4f5f7;
}
.pro a{display:block;width:100%;}
.pro-item .img {
  width: 100%;
    margin-top:16px;
  position: relative;
  overflow: hidden;
}
.pro-item .img .img-cont {
  width: 100%;
  height: 0;
  padding-bottom: 80%;
  overflow: hidden;
  position: relative;
}
.pro-item .img .img-cont .img-flex {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-item .img .img-cont img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
}
.pro-item:hover .img img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
 .pro-item .item-bottom{width:100%;margin-top:16px;display: flex;align-items: center;justify-content:space-between;min-height:40px;}
.pro-item .item-bottom .price{font-size:16px;line-height:24px;color:#131108;font-family:"Arial";
    /* display: flex;align-items: center; */
}
.price-num{
    color: #878787;
    font-size: 16px;
}
 .pro-item .item-bottom .price s{margin-left:16px;color:#6c5c3f;}
 .pro-item .item-bottom .btn{display:block;padding:0;margin:0;border: 1px solid #878787;
;width:124px;height:50px;font-size:16px;color:#878787;background-color:#F4F5F7;border-radius:40px;text-align:center;line-height:48px;transition: all 0.3s;-webkit-transition: all 0.3s;}
 .pro-item .item-bottom .btn:hover{color:#fff;background-color:#CAAE82; border-color: #CAAE82;}
  .pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
 }
 .pagination a{
  display: block;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  margin: 0 10px;
  font-size: 16px;
  color: #333;
 }
 .paging-box{
  display: flex;
  align-items: center;
 }
 .swiper-button-next, .swiper-button-prev{width:36px;height:36px;font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all 0.3s;-webkit-transition: all 0.3s; border: 1px solid #878787; opacity: 1;border-radius:50%;background-size:12px;  line-height: 36px;}
.swiper-button-next{
  /* background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%236c5c3f'%2F%3E%3C%2Fsvg%3E") */
}
 @media (max-width: 768px) {
  .product {
    padding: 20px 10px;
  }
  .pro-title{
    font-size: 32px;
        margin-bottom: 20px;
    margin-top: 30px;
  }
  .pro {
      width: 49.45%;
}
.pagination{
  display: none;
}
.pro-item {
  padding: 20px;
}
.pro-item .item-title h3{font-size:20px;line-height:28px;height:28px;}
.pro-item .item-title p{font-size:14px;line-height:24px;height:48px;}
.pro-item .item-bottom .price{font-size:14px;}
.price-num{
    font-size: 14px;
}
 .pro-item .item-bottom .btn{width:100px;height:38px;font-size:14px;line-height:36px;}
}
 @media (max-width: 480px) {
    .pro-flex {
    gap:0;
}
.pro {
      width: 100%;
      margin-bottom: 1.5%;
 
}
 }