#bg {
    position: absolute;
    width: 100%;
    height: 100px;
    background-image: linear-gradient(#FFF7F4, white);
}

/* bootstrap布局间分隔 */
.row > [class*="col-"] {
    padding: 1rem;
}

/* 九宫格顶部前景 */
.box-top-light {
    position: absolute;
    width: 5rem;
    height: 1rem;
    background: linear-gradient(225deg, transparent 1rem, #333333 0) bottom right;
    color: #F2F2F2;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* 九宫格顶部后景 */
.box-top-dark {
    width: 6rem;
    height: 1rem;
    background: linear-gradient(225deg, transparent 1rem, #000000 0) bottom right;
    color: #F2F2F2;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* 文件夹图标 */
.box-folder-img {
    float: left;
    width: 1rem;
    height: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0.75rem;
    mix-blend-mode: screen;
}

/* 标题 */
.box-title {
    padding: 0.5rem;
    width: 100%;
    background: #333333;
    color: #F2F2F2;
    border-radius: 0 0.5rem 0 0;
}

/* 内容背景 */
.box-bg {
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
}

/* 内容标题 */
.box-detail-title {
    padding: 1rem 1rem 0 1rem;
    text-align: center;
    overflow: hidden; /* 溢出部分进行隐藏 */
    display: -webkit-box;
    -webkit-box-orient: vertical; /* 盒模型元素从顶部向底部垂直排列子元素 */
    -webkit-line-clamp: 1; /* 显示几行 */
}

/* 内容 */
.box-detail {
    padding: 1rem 2rem 0 2rem;
    color: #828282;
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden; /* 溢出部分进行隐藏 */
    display: -webkit-box;
    -webkit-box-orient: vertical; /* 盒模型元素从顶部向底部垂直排列子元素 */
    -webkit-line-clamp: 8; /* 显示几行 */
    text-overflow: ellipsis;
}

/* 查看详情外层 */
.show-detail-box {
    height: 2rem;
    margin-top: 1rem;
    padding-bottom: 3rem;
}

/* 查看详情 */
.show-detail {
    cursor: pointer;
    float: right;
    margin-right: 2rem;
}

/* 分页部分 */
.page-btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 上一页按钮 */
#last-page-btn {
    border: 1px solid #F75A23;
    color: #F75A23;
    background-color: white;
    padding: 1rem 2rem 1rem 2rem;
    margin: 1rem;
}

/* 下一页按钮 */
#next-page-btn {
    color: white;
    background-color: #F75A23;
    padding: 1rem 2rem 1rem 2rem;
    margin: 1rem;
}

/* 页数的父元素 */
#page-numb-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 页数 */
#page-numb {
    text-align: center;
}

/* 右侧部分 */
#search-input {
    color: #828282;
    border-radius: 5px;
    border: 1px solid #F75A23;
    background-color: #F4E2DB;
}

/* 搜索按钮 */
#search-btn {
    position: relative;
}

/* 搜索按钮图标 */
#search-img {
    position: relative;
    top: 0.2rem;
}

/* 热门 */
#hot {
    padding: 1rem;
    background-color: #FFF7F4;
}

/* 热门文章文字 */
#hot-rmwz {
    font-weight: 600;
    font-size: 24px;
    line-height: 34px;
}

/* 热门题库内容 */
.hot-detail {
    color: #828282;
}

/* 热门题库内容鼠标悬停样式 */
/* 去下载APP的鼠标悬停样式 */
.hot-detail:hover {
    cursor: pointer;
    text-decoration: underline;
}