@font-face {
    font-family: 'en';
    src: url('../source/font/en.woff') format('woff');
}

* {
    box-sizing: border-box; /* 确保 padding 不影响宽度计算 */
}

.show {
    font-family: 'en', sans-serif; /* 添加备用字体 */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: center;
    max-width: 1400px; /* 添加最大宽度限制 */
    margin: 0 auto; /* 居中显示 */
}

.con {
    padding: 20px;
    text-align: center;
    border-radius: 55px;
    line-height: 2;
    transition: transform 0.1s ease;
}

.show > a {
    text-decoration: none; /* 移除下划线 */
    color: #333; /* 默认文字颜色 */
    display: block; /* 确保链接填满容器 */
}

.show > a:hover .con {
    filter: brightness(90%); /* 悬停时稍微变暗 */
    transform: scale(1.1);
}

/* 媒体查询：保持原有参数 */
@media (max-width: 499px) {
    .con {
        flex: 1 1 calc(33.333% - 20px); /* 每行 3 个 */
    }
}

@media (min-width: 500px) and (max-width: 799px) {
    .con {
        flex: 1 1 calc(25% - 20px); /* 每行 4 个 */
    }
}

@media (min-width: 800px) and (max-width: 1199px) {
    .con {
        flex: 1 1 calc(25% - 20px); /* 每行 4 个 */
    }
}

@media (min-width: 1200px) {
    .con {
        flex: 1 1 calc(16.666% - 20px); /* 每行 6 个 */
    }
}

/* 为 38 个 div 设置不同的美丽颜色（根据你的新 HTML 有 38 个） */
.show > a:nth-child(1) .con { background-color: #FF6F61; } /* 珊瑚红 */
.show > a:nth-child(2) .con { background-color: #6B5B95; } /* 紫罗兰 */
.show > a:nth-child(3) .con { background-color: #88B04B; } /* 橄榄绿 */
.show > a:nth-child(4) .con { background-color: #F7CAC9; } /* 粉玫红 */
.show > a:nth-child(5) .con { background-color: #92A8D1; } /* 天蓝 */
.show > a:nth-child(6) .con { background-color: #955251; } /* 砖红 */
.show > a:nth-child(7) .con { background-color: #B565A7; } /* 紫红 */
.show > a:nth-child(8) .con { background-color: #009B77; } /* 海绿 */
.show > a:nth-child(9) .con { background-color: #DD4124; } /* 番茄红 */
.show > a:nth-child(10) .con { background-color: #D65076; } /* 玫瑰红 */
.show > a:nth-child(11) .con { background-color: #45B7D1; } /* 水蓝 */
.show > a:nth-child(12) .con { background-color: #96CEB4; } /* 薄荷绿 */
.show > a:nth-child(13) .con { background-color: #FFEEAD; } /* 浅黄 */
.show > a:nth-child(14) .con { background-color: #D4A5A5; } /* 淡桃 */
.show > a:nth-child(15) .con { background-color: #9B59B6; } /* 紫色 */
.show > a:nth-child(16) .con { background-color: #3498DB; } /* 亮蓝 */
.show > a:nth-child(17) .con { background-color: #E74C3C; } /* 鲜红 */
.show > a:nth-child(18) .con { background-color: #2ECC71; } /* 翡翠绿 */
.show > a:nth-child(19) .con { background-color: #F1C40F; } /* 明黄 */
.show > a:nth-child(20) .con { background-color: #E67E22; } /* 南瓜橙 */
.show > a:nth-child(21) .con { background-color: #1ABC9C; } /* 碧绿 */
.show > a:nth-child(22) .con { background-color: #8E44AD; } /* 深紫 */
.show > a:nth-child(23) .con { background-color: #ECF0F1; } /* 云白 */
.show > a:nth-child(24) .con { background-color: #34495E; } /* 午夜蓝 */
.show > a:nth-child(25) .con { background-color: #D35400; } /* 胡萝卜橙 */
.show > a:nth-child(26) .con { background-color: #7F8C8D; } /* 灰绿 */
.show > a:nth-child(27) .con { background-color: #16A085; } /* 青绿 */
.show > a:nth-child(28) .con { background-color: #F39C12; } /* 柑橘黄 */
.show > a:nth-child(29) .con { background-color: #C0392B; } /* 深红 */
.show > a:nth-child(30) .con { background-color: #2980B9; } /* 海洋蓝 */
.show > a:nth-child(31) .con { background-color: #27AE60; } /* 森林绿 */
.show > a:nth-child(32) .con { background-color: #8FBC8F; } /* 海藻绿 */
.show > a:nth-child(33) .con { background-color: #D2B48C; } /* 棕褐 */
.show > a:nth-child(34) .con { background-color: #FFA07A; } /* 鲑鱼红 */
.show > a:nth-child(35) .con { background-color: #20B2AA; } /* 青玉 */
.show > a:nth-child(36) .con { background-color: #9932CC; } /* 暗紫 */
.show > a:nth-child(37) .con { background-color: #FF69B4; } /* 热粉 */
.show > a:nth-child(38) .con { background-color: #4682B4; } /* 钢蓝 */