/* 简化的响应式样式 */
@media screen and (max-width: 768px) {
    a, p, span, li, .cmn-btn, thead tr th, tbody tr th, tbody tr td, input, label, textarea, h6, h6 > a{
        font-size: 10px !important;
    }
    .menu-container-bg{
        background-image: url('../images/mobile/battle-bg.png');
        background-repeat: no-repeat;
        background-position: center;
        padding: 100px 0 130px 0;
    }

    .menu-container {
        margin: auto;     /* 调整上边距 */
        width: 100%;            /* 控制整体宽度 */
        max-width:100%;
    }

    .main-menu {
        display: flex;
        flex-wrap: wrap;  /* 允许换行 */
        justify-content: flex-end;  /* 水平居中 */
        gap: 0;  /* 移除间距 */
        padding-bottom: 30px;
    }

    .main-item {
        width: 84px;
        height: 35px;
        margin: 0;  /* 移除所有margin */
        font-size: 10px !important;
        margin-right: -1px;  /* 添加负margin使边框重叠 */
    }

    /* 第二行的项目（最后三个） */
    .main-item:nth-last-child(-n+3) {
        margin-top: 30px;  /* 添加与第一行的间距 */
        margin-right: -1px;  /* 保持水平边框重叠 */
    }

    /* 添加新的样式使最后三个项目靠右 */
    .main-item:nth-last-child(-n+3) {
        /* margin-left: auto;   */
        /* 将最后三个项目推到右侧 */
    }
    
    .main-item:nth-last-child(1) {
    }

    .sub-item {
        width: auto;  
        padding: 0 10px;        
    }

    .content-wrapper {
        padding: 15px 15px 15px 0;
        gap: 10px;
    }

    .third-menu {
        width: auto;          
    }
    .third-item{
        font-size: 10px;
    }

    .content-area {
        max-width: 600px;      /* 限制最大宽度 */
    }

    .content-area img {
        max-width: 100%;       /* 确保图片不会溢出 */
        height: auto;
    }
}