/* --- Slick 轮播图左右箭头样式 --- */

/* 确保轮播图容器是相对定位，这是箭头绝对定位的参考 */
.banner .slick-slider {
    position: relative;}

/* 左右箭头的通用样式 */
.banner .slick-prev,
.banner .slick-next {
    font-size: 0; /* 隐藏按钮内的文字 "previous" 和 "next" */
    line-height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    display: block;
    width: 40px; /* 按钮宽度 */
    height: 40px; /* 按钮高度 */
    padding: 0;
    cursor: pointer;
    color: transparent; /* 隐藏默认颜色 */
    border: none;
    outline: none;
    background: transparent;
    z-index: 1000;}

/* 使用 CSS 伪元素创建箭头图标 */
.banner .slick-prev:before,
.banner .slick-next:before {
    font-family: 'slick'; /* slick 默认字体图标，如果已加载 */
    font-size: 30px; /* 箭头大小 */
    line-height: 1;
    opacity: 0.75; /* 箭头透明度 */
    color: white; /* 箭头颜色 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}

/* 如果不想用字体图标，可以用边框创建一个简单的三角形箭头 */
/*
.banner .slick-prev:before,
.banner .slick-next:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
}
*/

/* 左箭头定位和样式 */
.banner .slick-prev {
    left: 15px;}

/* 左箭头图标 */
.banner .slick-prev:before {
    content: '←';}


/* 右箭头定位和样式 */
.banner .slick-next {
    right: 15px;}

/* 右箭头图标 */
.banner .slick-next:before {
    content: '→';}


/* 鼠标悬停在箭头上的效果 */
.banner .slick-prev:hover:before,
.banner .slick-next:hover:before {
    opacity: 1; /* 悬停时变为不透明 */
    color: #f0f0f0;}
.flink {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;}

.flink li{  text-align:center;}