/* 全局样式 */
* {
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除默认内边距 */
    box-sizing: border-box; /* 盒模型设置为border-box，确保padding和border不增加元素总宽度 */
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 设置默认字体 */
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e6e9f0 100%); /* 背景使用渐变色 */
    color: #333; /* 默认文字颜色 */
    line-height: 1.6; /* 设置行高，提高可读性 */
    min-height: 100vh; /* 确保页面至少占满整个视口高度 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
}

a {
    text-decoration: none; /* 去除链接下划线 */
    color: #333; /* 链接默认颜色 */
    transition: all 0.3s ease; /* 所有属性变化添加过渡效果 */
}

/* 色块装饰元素 */
.decor-block {
    position: absolute; /* 绝对定位 */
    z-index: -1; /* 置于底层，不遮挡内容 */
    border-radius: 15px; /* 圆角 */
    filter: blur(50px); /* 模糊效果，创建柔和背景 */
    opacity: 0.2; /* 透明度 */
    animation: float 15s ease-in-out infinite; /* 浮动动画 */
}

.decor-block.blue {
    background: #4a90e2; /* 蓝色 */
    width: 500px; /* 宽度 */
    height: 500px; /* 高度 */
    top: -200px; /* 顶部位置 */
    right: -100px; /* 右侧位置 */
}

.decor-block.lightblue {
    background: #50e3c2; /* 浅蓝色 */
    width: 400px; /* 宽度 */
    height: 400px; /* 高度 */
    bottom: -150px; /* 底部位置 */
    left: -100px; /* 左侧位置 */
    animation-delay: -5s; /* 动画延迟 */
}

.decor-block.purple {
    background: #9013fe; /* 紫色 */
    width: 300px; /* 宽度 */
    height: 300px; /* 高度 */
    top: 40%; /* 顶部位置 */
    left: 10%; /* 左侧位置 */
    animation-delay: -8s; /* 动画延迟 */
}

/* 浮动动画 */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); } /* 初始状态 */
    50% { transform: translateY(-30px) rotate(5deg); } /* 中间状态 */
    100% { transform: translateY(0px) rotate(0deg); } /* 结束状态 */
}

/* 头部样式 - 蓝色到淡蓝色渐变 */
header {
    background: linear-gradient(90deg, #2c7ad6 0%, #50e3c2 100%); /* 渐变背景 */
    box-shadow: 0 4px 20px rgba(44, 122, 214, 0.3); /* 阴影效果 */
    padding: 15px 20px; /* 内边距 */
    position: sticky; /* 粘性定位，滚动时固定在顶部 */
    top: 0; /* 顶部位置 */
    z-index: 100; /* 层级，确保在其他元素上方 */
    color: white; /* 文字颜色 */
    border-bottom-left-radius: 20px; /* 左下角圆角 */
    border-bottom-right-radius: 20px; /* 右下角圆角 */
}

.header-container {
    max-width: 1400px; /* 最大宽度 */
    margin: 0 auto; /* 居中显示 */
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 元素之间均匀分布 */
    align-items: center; /* 垂直居中对齐 */
}

.logo {
    font-size: 28px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    color: #fff; /* 文字颜色 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* 文字阴影 */
    letter-spacing: 1px; /* 字母间距 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 元素间距 */
}

.logo i {
    animation: spin 10s linear infinite; /* 旋转动画 */
}

/* 旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); } /* 开始角度 */
    to { transform: rotate(360deg); } /* 结束角度 */
}

.search-box {
    flex-grow: 1; /* 自动扩展，占据可用空间 */
    margin: 0 30px; /* 左右外边距 */
    position: relative; /* 相对定位 */
}

.search-box input {
    width: 100%; /* 宽度100% */
    padding: 12px 20px; /* 内边距 */
    border-radius: 30px; /* 圆角 */
    border: 2px solid rgba(255,255,255,0.3); /* 边框 */
    outline: none; /* 去除焦点轮廓 */
    font-size: 16px; /* 字体大小 */
    background: rgba(255,255,255,0.25); /* 背景色，半透明 */
    backdrop-filter: blur(5px); /* 背景模糊效果 */
    color: white; /* 文字颜色 */
    font-weight: 500; /* 字体粗细 */
    transition: all 0.3s ease; /* 过渡效果 */
}

.search-box input::placeholder {
    color: rgba(255,255,255,0.8); /* 占位符颜色 */
}

.search-box input:focus {
    background: rgba(255,255,255,0.35); /* 聚焦时背景色 */
    border-color: rgba(255,255,255,0.6); /* 聚焦时边框颜色 */
    box-shadow: 0 0 15px rgba(255,255,255,0.3); /* 聚焦时阴影 */
}

nav ul {
    display: flex; /* 使用flex布局 */
    list-style: none; /* 去除列表默认样式 */
}

nav ul li {
    margin-left: 20px; /* 左外边距 */
}

nav ul li a {
    font-weight: 600; /* 字体粗细 */
    color: rgba(255,255,255,0.9); /* 文字颜色 */
    padding: 8px 15px; /* 内边距 */
    border-radius: 20px; /* 圆角 */
    background: rgba(255,255,255,0.15); /* 背景色 */
    transition: all 0.3s ease; /* 过渡效果 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 5px; /* 元素间距 */
}

nav ul li a:hover {
    color: white; /* 悬停时文字颜色 */
    background: rgba(255,255,255,0.25); /* 悬停时背景色 */
    transform: translateY(-2px); /* 悬停时向上移动 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 悬停时阴影 */
}

/* 轮播图样式 */
.carousel-container {
    max-width: 1400px; /* 最大宽度 */
    margin: 0 auto 40px; /* 居中，底部外边距 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏超出部分 */
    border-radius: 20px; /* 圆角 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* 阴影 */
    transform: translateY(10px); /* 初始位置下移 */
    transition: transform 0.5s ease; /* 过渡效果 */
}

.carousel-container:hover {
    transform: translateY(5px); /* 悬停时上移 */
}

.carousel {
    display: flex; /* 使用flex布局 */
    transition: transform 0.5s ease-in-out; /* 过渡效果，用于滑动 */
}

.carousel-item {
    min-width: 100%; /* 每个轮播项宽度100% */
    position: relative; /* 相对定位 */
}

.carousel-item img {
    width: 100%; /* 图片宽度100% */
    height: 350px; /* 图片高度 */
    object-fit: cover; /* 图片裁剪方式 */
    display: block; /* 块级显示 */
}

.carousel-caption {
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 底部对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    background: linear-gradient(transparent, rgba(0,0,0,0.7)); /* 渐变背景 */
    color: white; /* 文字颜色 */
    padding: 20px; /* 内边距 */
}

.carousel-control {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 顶部位置 */
    transform: translateY(-50%); /* 垂直居中 */
    background: rgba(255,255,255,0.3); /* 背景色 */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    padding: 15px 10px; /* 内边距 */
    cursor: pointer; /* 鼠标指针样式 */
    font-size: 24px; /* 字体大小 */
    z-index: 10; /* 层级 */
    transition: all 0.3s ease; /* 过渡效果 */
    border-radius: 50%; /* 圆形按钮 */
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    backdrop-filter: blur(5px); /* 背景模糊 */
}

.carousel-control.prev {
    left: 20px; /* 左侧位置 */
}

.carousel-control.next {
    right: 20px; /* 右侧位置 */
}

.carousel-control:hover {
    background: rgba(255,255,255,0.5); /* 悬停时背景色 */
    transform: translateY(-50%) scale(1.1); /* 悬停时放大 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 悬停时阴影 */
}

.carousel-indicators {
    position: absolute; /* 绝对定位 */
    bottom: 15px; /* 底部位置 */
    left: 50%; /* 左侧位置 */
    transform: translateX(-50%); /* 水平居中 */
    display: flex; /* 使用flex布局 */
    gap: 10px; /* 元素间距 */
    z-index: 10; /* 层级 */
}

.indicator {
    width: 12px; /* 宽度 */
    height: 12px; /* 高度 */
    border-radius: 50%; /* 圆形 */
    background: rgba(255,255,255,0.5); /* 背景色 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: all 0.3s ease; /* 过渡效果 */
}

.indicator.active {
    background: white; /* 激活状态背景色 */
    transform: scale(1.3); /* 激活状态放大 */
    box-shadow: 0 0 10px rgba(255,255,255,0.8); /* 激活状态阴影 */
}

/* 广告位样式 */
.ad-banner {
    margin: 40px auto; /* 上下外边距，居中 */
    border-radius: 20px; /* 圆角 */
    overflow: hidden; /* 隐藏超出部分 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* 阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
    position: relative; /* 相对定位 */
}

.ad-banner::before {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    bottom: 0; /* 底部对齐 */
    background: linear-gradient(45deg, rgba(44, 122, 214, 0.1), rgba(80, 227, 194, 0.1)); /* 渐变背景 */
    z-index: 1; /* 层级 */
    opacity: 0; /* 初始透明度 */
    transition: opacity 0.3s ease; /* 过渡效果 */
}

.ad-banner:hover {
    transform: translateY(-5px) scale(1.01); /* 悬停时上移并轻微放大 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* 悬停时阴影 */
}

.ad-banner:hover::before {
    opacity: 1; /* 悬停时显示渐变层 */
}

.ad-banner img {
    width: 100%; /* 图片宽度100% */
    height: 150px; /* 图片高度 */
    object-fit: cover; /* 图片裁剪方式 */
    display: block; /* 块级显示 */
    transition: transform 0.7s ease; /* 过渡效果 */
}

.ad-banner:hover img {
    transform: scale(1.05); /* 悬停时图片放大 */
}

/* 主要内容区域 */
main {
    max-width: 1400px; /* 最大宽度 */
    margin: 40px auto; /* 上下外边距，居中 */
    padding: 0 25px; /* 左右内边距 */
    position: relative; /* 相对定位 */
}

.category-section {
    margin-bottom: 50px; /* 底部外边距 */
    position: relative; /* 相对定位 */
    padding: 20px; /* 内边距 */
    border-radius: 20px; /* 圆角 */
    background: rgba(255, 255, 255, 0.7); /* 背景色，半透明 */
    backdrop-filter: blur(10px); /* 背景模糊 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 阴影 */
    transition: all 0.3s ease; /* 过渡效果 */
}

.category-section:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* 悬停时阴影 */
}

.category-header {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 元素之间均匀分布 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 25px; /* 底部外边距 */
    padding-bottom: 10px; /* 底部内边距 */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* 底部边框 */
}

.category-title {
    font-size: 22px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    position: relative; /* 相对定位 */
    padding: 0 0 10px 0; /* 底部内边距 */
    color: #2c7ad6; /* 文字颜色 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 元素间距 */
}

.category-title::after {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 底部对齐 */
    left: 0; /* 左侧对齐 */
    width: 60px; /* 宽度 */
    height: 4px; /* 高度 */
    background: linear-gradient(90deg, #2c7ad6, #50e3c2); /* 渐变背景 */
    border-radius: 2px; /* 圆角 */
    animation: underline 3s ease-in-out infinite; /* 下划线动画 */
}

/* 下划线动画 */
@keyframes underline {
    0% { width: 60px; } /* 开始宽度 */
    50% { width: 100px; } /* 中间宽度 */
    100% { width: 60px; } /* 结束宽度 */
}

.view-all {
    font-size: 14px; /* 字体大小 */
    font-weight: 600; /* 字体粗细 */
    color: #2c7ad6; /* 文字颜色 */
    transition: all 0.3s ease; /* 过渡效果 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    gap: 5px; /* 元素间距 */
}

.view-all:hover {
    color: #1a5cb8; /* 悬停时文字颜色 */
    transform: translateX(5px); /* 悬停时右移 */
}

.sites-grid {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); /* 自动填充列，最小宽度170px */
    gap: 20px; /* 网格间距 */
}

.site-item {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 文字居中 */
    padding: 20px 15px; /* 内边距 */
    border-radius: 15px; /* 圆角 */
    background: linear-gradient(145deg, #ffffff, #f5f5f5); /* 渐变背景 */
    box-shadow: 0 8px 15px rgba(0,0,0,0.08); /* 阴影 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 过渡效果，使用贝塞尔曲线 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏超出部分 */
    z-index: 1; /* 层级 */
}

.site-item::before {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度100% */
    height: 6px; /* 高度 */
    background: linear-gradient(90deg, #2c7ad6, #50e3c2); /* 渐变背景 */
    transform: scaleX(0); /* 初始缩放为0 */
    transform-origin: left; /* 缩放原点在左侧 */
    transition: transform 0.5s ease; /* 过渡效果 */
    z-index: -1; /* 层级 */
}

.site-item:hover {
    transform: translateY(-10px) scale(1.03); /* 悬停时上移并放大 */
    box-shadow: 0 15px 25px rgba(0,0,0,0.15); /* 悬停时阴影 */
}

.site-item:hover::before {
    transform: scaleX(1); /* 悬停时显示顶部渐变条 */
}

.site-icon {
    width: 60px; /* 宽度 */
    height: 60px; /* 高度 */
    margin-bottom: 15px; /* 底部外边距 */
    font-size: 28px; /* 字体大小 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border-radius: 50%; /* 圆形 */
    color: #fff; /* 图标颜色 */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* 阴影 */
    transition: all 0.4s ease; /* 过渡效果 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏超出部分 */
}

.site-icon::after {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: -100%; /* 左侧位置 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    background: rgba(255,255,255,0.2); /* 半透明白色 */
    transform: skewX(-20deg); /* 倾斜变形 */
    transition: all 0.5s ease; /* 过渡效果 */
}

.site-item:hover .site-icon {
    transform: scale(1.1) rotate(5deg); /* 悬停时放大并旋转 */
    box-shadow: 0 12px 20px rgba(0,0,0,0.2); /* 悬停时阴影 */
}

.site-item:hover .site-icon::after {
    left: 120%; /* 悬停时显示高光效果 */
}

.site-name {
    font-size: 16px; /* 字体大小 */
    font-weight: 600; /* 字体粗细 */
}

/* 特色分类样式 - 不同分类使用不同的图标背景色 */
.tech .site-icon { background: linear-gradient(135deg, #3498db, #2980b9); }
.social .site-icon { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.tools .site-icon { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.shopping .site-icon { background: linear-gradient(135deg, #f39c12, #d35400); }
.education .site-icon { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.entertainment .site-icon { background: linear-gradient(135deg, #1abc9c, #16a085); }
.news .site-icon { background: linear-gradient(135deg, #e67e22, #d35400); }
.finance .site-icon { background: linear-gradient(135deg, #16a085, #1abc9c); }
.video .site-icon { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.music .site-icon { background: linear-gradient(135deg, #3498db, #2980b9); }
.travel .site-icon { background: linear-gradient(135deg, #f1c40f, #f39c12); }
.health .site-icon { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.ai .site-icon { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.cloud .site-icon { background: linear-gradient(135deg, #3498db, #2980b9); }
.game .site-icon { background: linear-gradient(135deg, #f39c12, #d35400); }
.ebook .site-icon { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.design .site-icon { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.ai-tool .site-icon { background: linear-gradient(135deg, #3498db, #2980b9); }
.dev-tool .site-icon { background: linear-gradient(135deg, #e67e22, #d35400); }

/* 背景浮动图标 */
.floating-icon {
    position: absolute; /* 绝对定位 */
    z-index: -1; /* 层级 */
    animation: float 8s ease-in-out infinite; /* 浮动动画 */
    opacity: 0.1; /* 透明度 */
}

.floating-icon:nth-child(1) {
    top: 10%; /* 顶部位置 */
    left: 5%; /* 左侧位置 */
    font-size: 60px; /* 字体大小 */
    color: #2c7ad6; /* 颜色 */
}

.floating-icon:nth-child(2) {
    top: 80%; /* 顶部位置 */
    left: 85%; /* 左侧位置 */
    font-size: 50px; /* 字体大小 */
    color: #50e3c2; /* 颜色 */
    animation-delay: -2s; /* 动画延迟 */
}

.floating-icon:nth-child(3) {
    top: 40%; /* 顶部位置 */
    left: 90%; /* 左侧位置 */
    font-size: 70px; /* 字体大小 */
    color: #2c7ad6; /* 颜色 */
    animation-delay: -4s; /* 动画延迟 */
}

.floating-icon:nth-child(4) {
    top: 65%; /* 顶部位置 */
    left: 10%; /* 左侧位置 */
    font-size: 45px; /* 字体大小 */
    color: #50e3c2; /* 颜色 */
    animation-delay: -1s; /* 动画延迟 */
}

/* 页脚样式 */
footer {
    background: linear-gradient(90deg, #2c7ad6 0%, #50e3c2 100%); /* 渐变背景 */
    padding: 30px 20px; /* 内边距 */
    text-align: center; /* 文字居中 */
    color: white; /* 文字颜色 */
    margin-top: 60px; /* 顶部外边距 */
    border-top-left-radius: 20px; /* 左上角圆角 */
    border-top-right-radius: 20px; /* 右上角圆角 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏超出部分 */
}

footer::before {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    right: 0; /* 右侧对齐 */
    height: 5px; /* 高度 */
    background: linear-gradient(90deg, #ffffff, #ffffff00); /* 渐变背景 */
}

.footer-content {
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 居中 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    position: relative; /* 相对定位 */
    z-index: 2; /* 层级 */
}

.footer-logo {
    font-size: 24px; /* 字体大小 */
    font-weight: bold; /* 加粗 */
    margin-bottom: 15px; /* 底部外边距 */
    color: white; /* 文字颜色 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* 文字阴影 */
}

.footer-links {
    display: flex; /* 使用flex布局 */
    gap: 25px; /* 元素间距 */
    margin: 20px 0; /* 上下外边距 */
    flex-wrap: wrap; /* 自动换行 */
    justify-content: center; /* 水平居中 */
}

.footer-links a {
    color: rgba(255,255,255,0.8); /* 文字颜色 */
    transition: all 0.3s ease; /* 过渡效果 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 20px; /* 圆角 */
}

.footer-links a:hover {
    color: white; /* 悬停时文字颜色 */
    background: rgba(255,255,255,0.15); /* 悬停时背景色 */
    transform: translateY(-2px); /* 悬停时上移 */
}

.footer-text {
    font-size: 14px; /* 字体大小 */
    color: rgba(255,255,255,0.7); /* 文字颜色 */
    margin-top: 10px; /* 顶部外边距 */
}

/* 响应式设计 - 适配不同屏幕尺寸 */
@media (max-width: 992px) {
    .sites-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 调整网格列宽 */
    }
    
    .carousel-item img {
        height: 300px; /* 调整轮播图高度 */
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* 垂直排列 */
    }
    
    .search-box {
        margin: 20px 0; /* 调整上下外边距 */
        width: 100%; /* 宽度100% */
    }
    
    nav ul {
        margin-top: 15px; /* 顶部外边距 */
        flex-wrap: wrap; /* 自动换行 */
        justify-content: center; /* 水平居中 */
        gap: 10px; /* 元素间距 */
    }
    
    nav ul li {
        margin: 5px; /* 外边距 */
    }
    
    .sites-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* 调整网格列宽 */
        gap: 15px; /* 调整网格间距 */
    }
    
    .category-title {
        font-size: 20px; /* 调整字体大小 */
    }
    
    .carousel-item img {
        height: 250px; /* 调整轮播图高度 */
    }
    
    .ad-banner img {
        height: 120px; /* 调整广告图高度 */
    }
    
    .decor-block {
        width: 300px; /* 调整装饰块大小 */
        height: 300px;
    }
}

@media (max-width: 480px) {
    .sites-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* 调整网格列宽 */
    }
    
    .site-item {
        padding: 15px 10px; /* 调整内边距 */
    }
    
    .site-icon {
        width: 50px; /* 调整图标大小 */
        height: 50px;
        font-size: 24px; /* 调整图标字体大小 */
    }
    
    .carousel-item img {
        height: 200px; /* 调整轮播图高度 */
    }
    
    .carousel-control {
        width: 40px; /* 调整控制按钮大小 */
        height: 40px;
        font-size: 18px; /* 调整按钮图标大小 */
    }
    
    .ad-banner img {
        height: 100px; /* 调整广告图高度 */
    }
    
    .footer-links {
        gap: 15px; /* 调整链接间距 */
    }
}