.bobo_goods_type {padding: clamp(30px, 2.604167vw, 50px) 0; background: #efece9; box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.1);}
.bobo_goods_type .tit {text-align: center;}
.bobo_goods_type .tit h3 {margin-bottom: 20px; font-size: clamp(24px, 1.88vw, 36px); position: relative; padding-bottom: 10px;}
.bobo_goods_type .tit h3::after {content: ""; width: 35px; height: 2px; background: var(--color-primary); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.bobo_goods_type ul {grid-template-columns: repeat(4, 1fr); display: grid; gap: 15px;}
.bobo_goods_type ul li {margin: 25px 0 0; box-sizing: border-box; text-align: center;}
.bobo_goods_type ul li .box {cursor: pointer; background: #f6f4f2; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border-top: 2px solid var(--color-primary); transition: all 0.4s ease;}
.bobo_goods_type ul li .box:hover {transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);}
.bobo_goods_type ul li .pic {display: block; width: 100%; overflow: hidden; position: relative; box-sizing: border-box;}
.bobo_goods_type ul li .pic img {width: 100%; display: block; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; aspect-ratio: 1 / 1; object-fit: cover;}
.bobo_goods_type ul li h5 {margin: 13px 0 0; line-height: 30px; height: 60px; overflow: hidden; color: #333; font-size: 18px;}
.bobo_goods_type ul li h5 a:hover {color: var(--color-primary); text-decoration: underline;}
.bobo_goods_type ul li:hover img {transform: scale(1.05); -webkit-transform: scale(1.05);}

@media screen and (max-width: 768px) {
  .bobo_goods_type ul {grid-template-columns: repeat(2, 1fr); gap: 10px;}
  .bobo_goods_type ul li {margin: 15px 0 0;}
  .bobo_goods_type ul li h5 {margin: 10px 0 0; line-height: 24px; height: 48px; font-size: 16px;}
}