body {
        background: #f7f8f9;
        line-height: 1.6;
        font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
        color: #222222;
        font-size: 16px;
    }

    a {
        text-decoration: none;
        color: #222222;
    }

    /* 重置ul和li的默认样式 */
    ul {
        list-style: none; /* 移除默认的列表项符号 */
        padding: 0;       /* 移除默认的内边距 */
        margin: 0;        /* 移除默认的外边距 */
    }

    li {
        margin: 0;        /* 移除默认的外边距 */
        padding: 0;       /* 移除默认的内边距 */
    }

    .ml-50 {
        margin-left: 50px;
    }

    .max-lines-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .header {
        padding: 10px;
        color: #111925;
        background-color: rgba(255, 255, 255, .8);
        backdrop-filter:blur(5px);
    }

    .blackboard {
        padding: 45px 0;
    }

    .d-line {
        height: 4px;
        border-radius: 2px;
        width: 0;
        background-color: #feb4ad;
        transition: width 0.2s;
    }

    .menu > div {
        margin: 15px;
    }

    .menu > div:hover {
        .d-line {
            width: 25px;
        }
    }

    .active-menu > .d-line {
        width: 25px;
    }

    .top-bg > .img-l {
        top: 0;
        left: 0;
        width: 20%;
    }
    .top-bg > .img-r {
        top: 0;
        right: 0;
        width: 10%;
    }

    .qrcode-icon {
        font-size: 22px;
        width: 800px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .qrcode-1 {
        cursor: pointer;
    }

    .qrcode-1 > img {
        width: 20px;
        transform: translateY(1px);
        margin-right: 5px;
    }

    .qrcode-1:hover +.qrcode-2 {
        display: block;
    }

    .qrcode-2 {
        display: none;
        width: 100%;
        border-radius: 10px;
    }

    .qrcode-2 > img {
        width: 150px;
        padding: 10px;
        border-radius: 10px;
        background-color: #ffffff;
    }

    .news {
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
        height: 100%;
        cursor: pointer;
    }

    .news-cover {
        width: 100%;
        height: 260rpx;
        overflow: hidden;
    }

    .news-cover > img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        transition: all .2s;
    }

    .news:hover {
        .news-cover > img {
            transform: scale(1.2);
        }
    }

    .news-content {
        padding: 10px;
    }

    .news-subtitle {
        color: #666666;
    }

    .news-time {
        color: #999999;
    }