body{
    width: 100%;
    /* overflow-y: hidden; */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    font-family: 'Source Han Sans';
    transition-duration: 1s;
 }

 * {
    max-width: 100%;
    box-sizing: border-box;
  }

html {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 图标容器 */
#icons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* 每个图标容器 */
.icon_container {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(16.667% - 10px); /* 每行最多显示六个，减去间距 */
    margin-bottom: 10px;
    margin-top: 30px;
}

/* 标题样式 */
.icon_titles {
    color: var(--onPrimaryContainer);
       font-family: 'Source Han Sans';
       font-weight: 500;
       font-size: 110%;
       margin-top: 0.3em;
       letter-spacing: 1px;
    }

.news-section {
    margin-bottom: 25vh;
}

/* 图标链接容器：正方形撑开，绝对定位叠层 */
.icon_container a {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; /* 保持正方形，替代 padding-top hack */
}

/* ::before 放描边层（不受 mask 影响） */
.icon_container a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 230.5 230.5'%3E%3Cpath fill='none' stroke='rgba(128%2C128%2C128%2C0.35)' stroke-linejoin='round' stroke-miterlimit='1.41' stroke-width='1' d='M158.22 230H72.28l-8.22-.01a320 320 0 0 1-6.93-.11c-5.05-.06-10.09-.5-15.07-1.32a50.83 50.83 0 0 1-14.33-4.73 48.2 48.2 0 0 1-21.07-21.06 50.85 50.85 0 0 1-4.72-14.34 100.68 100.68 0 0 1-1.33-15.07c-.06-2.31-.1-4.62-.1-6.93-.02-2.74-.02-5.48-.02-8.22V72.29c0-2.75 0-5.48.02-8.23a320 320 0 0 1 .1-6.93c.06-5.05.5-10.08 1.33-15.06a50.74 50.74 0 0 1 4.72-14.34A48.2 48.2 0 0 1 27.74 6.66a51.02 51.02 0 0 1 14.33-4.73C47.05 1.12 52.09.67 57.14.61a320 320 0 0 1 6.93-.1L72.3.5h85.92l8.23.01a320 320 0 0 1 6.92.1c5.06.07 10.1.5 15.08 1.33 4.98.85 9.81 2.45 14.33 4.72a48.19 48.19 0 0 1 21.07 21.07 50.9 50.9 0 0 1 4.72 14.34c.82 4.98 1.27 10.02 1.33 15.07a320 320 0 0 1 .1 6.92l.01 3.48v94.09l-.01 4.8c-.01 2.3-.05 4.62-.1 6.93-.07 5.05-.5 10.08-1.33 15.07a50.68 50.68 0 0 1-4.72 14.33 48.2 48.2 0 0 1-21.07 21.07 50.8 50.8 0 0 1-14.33 4.73c-4.98.82-10.02 1.26-15.08 1.32a320 320 0 0 1-6.92.1l-8.23.02z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* 图标样式：绝对定位填满容器，mask 裁剪 */
.icon_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 230.5 230.5'%3E%3Cpath fill='%23FFF' d='M158.22 230H72.28l-8.22-.01a320 320 0 0 1-6.93-.11c-5.05-.06-10.09-.5-15.07-1.32a50.83 50.83 0 0 1-14.33-4.73 48.2 48.2 0 0 1-21.07-21.06 50.85 50.85 0 0 1-4.72-14.34 100.68 100.68 0 0 1-1.33-15.07c-.06-2.31-.1-4.62-.1-6.93-.02-2.74-.02-5.48-.02-8.22V72.29c0-2.75 0-5.48.02-8.23a320 320 0 0 1 .1-6.93c.06-5.05.5-10.08 1.33-15.06a50.74 50.74 0 0 1 4.72-14.34A48.2 48.2 0 0 1 27.74 6.66a51.02 51.02 0 0 1 14.33-4.73C47.05 1.12 52.09.67 57.14.61a320 320 0 0 1 6.93-.1L72.3.5h85.92l8.23.01a320 320 0 0 1 6.92.1c5.06.07 10.1.5 15.08 1.33 4.98.85 9.81 2.45 14.33 4.72a48.19 48.19 0 0 1 21.07 21.07 50.9 50.9 0 0 1 4.72 14.34c.82 4.98 1.27 10.02 1.33 15.07a320 320 0 0 1 .1 6.92l.01 3.48v94.09l-.01 4.8c-.01 2.3-.05 4.62-.1 6.93-.07 5.05-.5 10.08-1.33 15.07a50.68 50.68 0 0 1-4.72 14.33 48.2 48.2 0 0 1-21.07 21.07 50.8 50.8 0 0 1-14.33 4.73c-4.98.82-10.02 1.26-15.08 1.32a320 320 0 0 1-6.92.1l-8.23.02z' clip-rule='evenodd'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 230.5 230.5'%3E%3Cpath fill='%23FFF' d='M158.22 230H72.28l-8.22-.01a320 320 0 0 1-6.93-.11c-5.05-.06-10.09-.5-15.07-1.32a50.83 50.83 0 0 1-14.33-4.73 48.2 48.2 0 0 1-21.07-21.06 50.85 50.85 0 0 1-4.72-14.34 100.68 100.68 0 0 1-1.33-15.07c-.06-2.31-.1-4.62-.1-6.93-.02-2.74-.02-5.48-.02-8.22V72.29c0-2.75 0-5.48.02-8.23a320 320 0 0 1 .1-6.93c.06-5.05.5-10.08 1.33-15.06a50.74 50.74 0 0 1 4.72-14.34A48.2 48.2 0 0 1 27.74 6.66a51.02 51.02 0 0 1 14.33-4.73C47.05 1.12 52.09.67 57.14.61a320 320 0 0 1 6.93-.1L72.3.5h85.92l8.23.01a320 320 0 0 1 6.92.1c5.06.07 10.1.5 15.08 1.33 4.98.85 9.81 2.45 14.33 4.72a48.19 48.19 0 0 1 21.07 21.07 50.9 50.9 0 0 1 4.72 14.34c.82 4.98 1.27 10.02 1.33 15.07a320 320 0 0 1 .1 6.92l.01 3.48v94.09l-.01 4.8c-.01 2.3-.05 4.62-.1 6.93-.07 5.05-.5 10.08-1.33 15.07a50.68 50.68 0 0 1-4.72 14.33 48.2 48.2 0 0 1-21.07 21.07 50.8 50.8 0 0 1-14.33 4.73c-4.98.82-10.02 1.26-15.08 1.32a320 320 0 0 1-6.92.1l-8.23.02z' clip-rule='evenodd'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    margin-bottom: 0;
}

/* 小于 1260px 且大于 960px，每行四个图标 */
@media (max-width: 1260px) and (min-width: 961px) {
    .icon_container {
        flex: 1 1 calc(25% - 16px); /* 每行四个图标 */
    }
}

/* 小于 960px 且大于 768px，每行三个图标 */
@media (max-width: 960px) and (min-width: 769px) {
    .icon_container {
        flex: 1 1 calc(33.33% - 16px); /* 每行三个图标 */
    }
}

/* 小于 768px，每行一个图标，左右排列 */
@media (max-width: 768px) {
    .news-section h2 {
        text-align: left;
        padding: 0 2.5rem;
        font-size: 4rem;
        font-weight: 400;
    }

    .icon_container {
        display: flex; /* 确保使用 Flex 布局 */
        flex: 1 1 100%; /* 每行一个图标 */
        flex-direction: row; /* 图标和文字左右排列 */
        align-items: center; /* 垂直居中对齐 */
        gap: 2rem; /* 图标和文字之间的间距 */
        padding: 0 2.5rem;
    }

    .icon_container a {
        width: 6rem;
        flex-shrink: 0; /* 防止被压缩 */
    }

    .icon_img {
        margin-bottom: 0; /* 去掉默认的底部间距 */
    }

    .icon_titles {
        font-size: 2rem; /* 调整字体大小 */
        margin: 0; /* 清除顶部和底部间距 */
        font-weight: 400;
        text-align: left; /* 文字左对齐 */
    }
}

@media (min-width: 768px) {
    body { min-width: 768px; }
  }