/* --- 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;}

/* PC端样式（可选：保持原有横向排列，或按需调整） */
@media (min-width: 769px) {
    .flink {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;}
    .flink li {
        flex: 1;
        min-width: 150px;
        text-align: center;}
    .flink li a {
        display: block;
        text-decoration: none;
        color: #333;}
    .flink li img {
        max-width: 60px;
        height: auto;
        margin-bottom: 5px;}
}

/* 手机端核心样式（匹配图片效果） */
@media (max-width: 768px) {
    .flink {
        /* 整体列表纵向排列 */
        display: flex;
        flex-direction: column;
        gap: 12px; /* 每个链接项之间的纵向间距 */
        padding: 0 15px;}

    .flink li {
        /* 单个链接项占满宽度 */
        width: 100%;}

    .flink li a {
        /* 图标+文字横向排列 */
        display: flex;
        align-items: center; /* 图标和文字垂直居中对齐 */
        text-decoration: none; /* 去掉链接下划线 */
        color: #333; /* 文字颜色，可根据页面调整 */
        font-size: 16px; /* 手机端文字大小，匹配示例 */
        line-height: 1.5;}

    .flink li img {
        /* 图标样式：匹配示例大小和间距 */
        width: 24px; /* 图标宽度，适配手机端 */
        height: 24px;
        margin-right: 10px; /* 图标和文字之间的间距 */
        flex-shrink: 0;}

    .flink li span {
        /* 文字自适应宽度 */
        flex: 1;}
}