body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    overflow-x: hidden;
    user-select: none;

}

a {
    text-decoration: none;
    color: black;
    cursor: pointer;
    user-select: none;
}

.class-group {
    width:100%;
    max-width: 800px;
    perspective: 1000px;
    display: flex;
    margin: 0 auto; /* 显示在body的中间 */
    transform-style: preserve-3d;
    align-items: center;
}



.classTitle {
    display:flex;
    font-family: Source Han Sans;
    font-size: 21px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    color: #4777A2;
    opacity: 1;
    text-shadow: 0 2px #E6F3FF, 2px 0 #E6F3FF, -2px 0 #E6F3FF, 0 -2px #E6F3FF, 5px 5px #558ABB;
    padding: 0px 70px 0px 70px;
    max-width: 800px;
    margin: 0 auto; /* 显示在body的中间 */
}

@media (min-width: 768px) and (max-width: 991px) {
    .classTitle {
        padding-right:105px;
    }
}

@media (max-width: 767px)and (min-width: 560px) {
    .classTitle {
        padding-right: 65px;
    }
}



.quick-link {
    width: 116px;
    min-width:116px;
    height: 49.78px;
    line-height: 49.78px;
    border-radius: 10px;
    opacity: 1;
    background: #FFFFFF;
    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.2);
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0em;
    color: #74A4D9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    margin: 10px;

}

.quick-link-container {
    padding: 10px 0px 10px 60px;
    overflow: initial;
    flex-wrap: wrap
}





.arrow {
    width: 40px;
    height: 40px;
    opacity: 0.5;
    transition: opacity 0.3s ease; /* 添加过渡效果 */
}



    .arrow:hover {
        opacity: 1;
    }

    .arrow.hidden {
        opacity: 0; /* 隐藏时设置透明度为0 */
        pointer-events: none; /* 禁用点击事件 */
    }


.card-container {
    display: flex;
    flex: auto;
    /*gap: 20px;*/
    overflow-x: auto;
    padding: 20px;
    align-items: center;
    margin: 0 auto; /* 显示在body的中间 */

    -webkit-mask-image: linear-gradient(to right, rgba(173, 211, 246, 0), rgba(173, 211, 246, 1) 10%, rgba(173, 211, 246, 1) 90%, rgba(173, 211, 246, 0));
    mask-image: linear-gradient(to right, rgba(173, 211, 246, 0), rgba(173, 211, 246, 1) 10%, rgba(173, 211, 246, 1) 90%, rgba(173, 211, 246, 0));
}


    .card-container::-webkit-scrollbar {
        /* height: 8px;*/
        display: none; /* 隐藏滚动条 */
    }

    .card-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }


.card-box {
    width: 116px;
    min-width: 116px;
    height: 157px;
    margin-left: 10px;
    margin-right: 10px;
    background: #fff;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    user-select: none;
    cursor: pointer;
    border-radius: 10px;
    opacity: 1;
    background: #E4E3E3;
    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    border-width: 1px;
}

    .card-box .image-container {
        display: initial;
        width: 116px;
        height: 81px;
        overflow: hidden;
        transition: 1s;
    }

    .card-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease-in-out; /* 平滑过渡 */
    }

    .card-box h2 {
        font-size: 14px;
        padding: 8px 6px 8px 6px;
        margin: 0px;
        line-height: 14px;
        text-align: center;
        background: rgba(255, 255, 255, 0.7);
    }

    .card-box p {
        font-size: 12px;
        margin: 9px 6px 9px 6px;
        color: #424242;
        height: 36px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        transition: 1s;
    }

    .card-box:hover {
        /*box-shadow: 8px 10px 0px 0px rgba(0, 0, 0, 0.47);
    transform: scale(1.05) translate(-5px, -5px); /* 向左上方位移 */
    }

        .card-box:hover .card-cover {
            transform: scale(1.1); /* 图片放大 1.2 倍 */
        }




.pinned-badge {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    padding: 5px;
    font-size: 12px;
    font-weight: bold;
    border-bottom-right-radius: 5px;
    z-index: 1000;
    opacity: 0.8;
    max-width: 30px;
    max-height: 30px;
    width: 30px;
    height: 30px;
    object-fit: fill;
}

.calling-card-container {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding: 0px 5px;
    display: flex;
    justify-content: center;
}

.calling-card {
    display: flex;
    flex: 1;
    align-items: center;
    max-width: 660px;
    min-width: 252px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* 添加相对定位 */
    overflow: hidden; /* 隐藏超出部分 */
}

    .calling-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 50%; /* 从卡片的中间开始 */
        background: url('/img/placeholder.png') no-repeat right;
        background-size: cover;
        opacity: 0.5; /* 设置初始透明度 */
        transition: opacity 0.3s ease;
        pointer-events: none; /* 禁用鼠标事件 */
        -webkit-mask-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 80%);
        mask-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 80%);
    }

    .calling-card .profile-picture {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 5px;
        margin-right: 20px;
        object-fit: cover;
    }

    .calling-card .calling-card-content {
        display: flex;
        flex-direction: column;
    }

        .calling-card .calling-card-content h1 {
            font-size: 24px;
            margin: 0;
            color: #4777A2;
        }

        .calling-card .calling-card-content p {
            font-size: 16px;
            color: #424242;
            margin: 5px 0 0 0;
        }


@media (max-width: 575px) {
    .calling-card-container {
        padding: 0px 10px;
        min-width: 289px;
    }
}


.button {
    border-radius: 5px;
    font-size: 14px;
    background-color: #74A4D9;
    border: none;
    color: #fff;
    outline: none;
    margin-left: 10px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .button:hover {
        background-color: #4777A2;
        box-shadow: 7px 11px 10px rgba(0, 0, 0, 0.2);
        transform: translate(-2px, -3px);
    }

.show-all-button {
    margin-left: auto;
}

@media (max-width: 575px) {
    .show-all-button {
        margin-left: initial;
        position: absolute;
        left: 390px;
    }
}

@media (max-width: 488px) {
    .show-all-button {
        margin-left: initial;
        position: absolute;
        left: 255px;
    }
}

.card-hidden {
    opacity: 0.3;
    position: relative;
}

    .card-hidden::after {
        content: "已隐藏";
        position: absolute;
        top: 8px;
        right: 8px;
        background: #6d6d6d;
        color: #fff;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 8px;
        pointer-events: none;
    }