html, body {
    padding: 0;
    margin: 0;
    --px-5: 0.13rem;
    --px-10: 0.27rem;
    --px-16: 0.43rem;
    --px-18: 0.48rem;
    --px-20: 0.53rem;
    --px-25: 0.67rem;
    --px-30: 0.8rem;
    --px-35: 0.93rem;
    --px-60: 1.6rem;
    --px-80: 2.13rem;
    --px-100: 2.67rem;
    font-family: ZHKXXXLT_T, Arial, sans-serif; /* 添加字体族 */
}

body {
    font-size: var(--px-16);
}

.text-ellipsis {
    white-space: nowrap;      /* 禁止换行 */
    overflow: hidden;         /* 隐藏溢出内容 */
    text-overflow: ellipsis;  /* 溢出部分用省略号表示 */
}
.text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制为2行 */
    -webkit-box-orient: vertical; /* 设置排列方向为垂直 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出部分用省略号表示 */
}

.flex {
    display: flex;
}
.justify-center {
    justify-content: center;
}
.items-center {
    align-items: center;
}

.x7-app {
    background: #ffffff;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
}

.x7-app > div {
    width: 100%;
    max-width: 640px;
    position: relative;
}

.x7-app .header-bg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.x7-body-wrapper {
    width: 100%;
    position: absolute;
    top: var(--px-100);
    left: 0;
    padding: var(--px-10) var(--px-5);
    box-sizing: border-box;
}

.x7-body-wrapper .body-bg {
    width: 100%;
    height: auto;
}

.x7-body {
    width: calc(100% - var(--px-25) - var(--px-25));
    position: absolute;
    top: 0.5rem;
    left: 0.67rem;
    padding: var(--px-10) 0;
    box-sizing: border-box;
}

.x7-body-wrapper .x7-body-top {
    width: 100%;
    height: 4.27rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.x7-body-question {
    margin-top: 0.53rem;
    display: flex;
    justify-content: space-around;
}

.x7-body-question img {
    width: 3.2rem;
    height: auto;
}

.x7-body-type-more {
    margin-top: var(--px-35);
    display: flex;
    justify-content: center;
    color: #ffffff;
    text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.8);
    font-size: var(--px-20);
}

.x7-body-type {
    margin-top: var(--px-10);
    display: flex;
    gap: var(--px-10);
    overflow-x: scroll;
    user-select: none;
    padding-bottom: 10px;
}

.x7-body-type::-webkit-scrollbar {
    height: 6px;  /* 设置滚动条高度 */
}

.x7-body-type::-webkit-scrollbar-track {
    background: transparent;  /* 隐藏轨道背景 */
}

.x7-body-type::-webkit-scrollbar-thumb {
    background: #8b8b8b;  /* 隐藏滑块 */
    border-radius: 6px;
    height: 6px;  /* 设置滚动条宽度 */
}

.x7-body-type-box {
    width: var(--px-100);
    height: var(--px-60);
    position: relative;
    cursor: pointer;
}
.x7-body-type-box > div {
    position: relative;
    width: var(--px-100);
    height: var(--px-60);
    display: flex;
    align-items: center;
    padding: var(--px-5);
    box-sizing: border-box;
}

.x7-body-type-title {
    z-index: 10;
    width: var(--px-100);
    color: #329bfd;
}

.x7-body-type-box img {
    width: var(--px-100);
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.x7-body-article {
    margin-top: var(--px-35);
    display: flex;
    justify-content: center;
    color: #ffffff;
    text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.8);
    font-size: var(--px-20);
}
.x7-body-article {
    margin-top: var(--px-30);
}
.x7-body-article-box {
    padding:  0 var(--px-30);
    margin-top: var(--px-20);
    max-height: 5.5rem;
    overflow-y: scroll;
}
.x7-body-article-box::-webkit-scrollbar {
    width: 6px;  /* 设置滚动条宽度 */
}

.x7-body-article-box::-webkit-scrollbar-track {
    background: transparent;  /* 隐藏轨道背景 */
}

.x7-body-article-box::-webkit-scrollbar-thumb {
    background: #8b8b8b;  /* 隐藏滑块 */
    border-radius: 6px;
}

@media screen and (max-width: 800px) {
    .x7-body-type::-webkit-scrollbar-thumb {
        background: transparent;  /* 隐藏滑块 */
    }
    .x7-body-article-box::-webkit-scrollbar-thumb {
        background: transparent;  /* 隐藏滑块 */
    }
}


.x7-body-article-box > div {
    color: #ffffff;
    padding: var(--px-5) 0;
    margin-bottom: var(--px-20);
    border-bottom: 1px dashed #ffffff;
    width: 100%;
    position: relative;
    cursor: pointer;
}
.x7-body-article-box > div::before {
    content: '';
    position: absolute;
    top: var(--px-10);
    left: -0.27rem;
    width: var(--px-5);
    height: var(--px-5);
    border-radius: 100%;
    background: #ef5357;
}