@charset "utf-8";
/* 问答列表页（移动端） 设计稿 750px，1rem=100px 主色 #0054b2 */

.fap-page {
    width: 100%;
    padding: .2rem 0 .3rem;
    box-sizing: border-box;
}

/* 面包屑 */
.fap-page .fap-crumbs {
    padding: 0rem .24rem;
    margin-bottom: 0.2rem;
    /* background: #fff; */
    font-size: .26rem;
    color: #999;
    line-height: .36rem;
}

.fap-page .fap-crumbs a {
    color: #999;
    text-decoration: none;
}

.fap-page .fap-crumbs span {
    color: #666;
}

/* 标题 */
.fap-page .fap-header {
    padding: .28rem .24rem;
    margin-bottom: .2rem;
    background: #fff;
}

.fap-page .fap-header h1 {
    font-size: .36rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: .4rem;
    padding-left: .16rem;
    border-left: .06rem solid #0054b2;
}

/* 分类筛选 */
.fap-page .fap-select {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: #fff;
    padding: .24rem .2rem;
    box-shadow: 0 .05rem .2rem #efefef;
    margin-bottom: .24rem;
}

.fap-page .fap-select .fap-select-title {
    flex-shrink: 0;
    font-size: .3rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: .56rem;
    margin-right: .12rem;
}

.fap-page .fap-select>ul {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: .2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fap-page .fap-select>ul::-webkit-scrollbar {
    display: none;
}

.fap-page .fap-select>ul>li {
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: .3rem;
    border: .02rem solid #e8ecf1;
    background: #fbfcfd;
    transition: all .2s ease;
}

.fap-page .fap-select>ul>li>a {
    display: block;
    padding: .1rem .28rem;
    font-size: .26rem;
    line-height: 1.2;
    color: #666;
    text-decoration: none;
}

.fap-page .fap-select>ul>li.active {
    border-color: #0054b2;
    background: #fff;
}

.fap-page .fap-select>ul>li.active>a {
    color: #0054b2;
    font-weight: 600;
}

/* 列表 */
.fap-page .fap-list {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.fap-page .fap-item {
    background: #fff;
    box-shadow: 0 .02rem .12rem rgba(0, 0, 0, .06);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}

.fap-page .fap-item:active {
    box-shadow: 0 .08rem .24rem rgba(0, 84, 178, .16);
    transform: translateY(-.03rem);
}

.fap-page .fap-item-link {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.fap-page .fap-item-img {
    width: 2.7rem;
    /* height: 1.9rem; */
    flex-shrink: 0;
    overflow: hidden;
    background: #f2f3f5 url('/images/default_faq.webp') center center no-repeat;
    background-size: 113% auto;
}

.fap-page .fap-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fap-page .fap-item-body {
    flex: 1;
    min-width: 0;
    padding: .18rem .2rem;
    display: flex;
    flex-direction: column;
}

.fap-page .fap-item-title {
    font-size: .3rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fap-page .fap-item-desc {
    flex: 1;
    margin-top: .08rem;
    font-size: .24rem;
    color: #888;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fap-page .fap-item-desc:empty {
    display: none;
}

.fap-page .fap-item-meta {
    margin-top: .12rem;
    font-size: .22rem;
    color: #999;
}

.fap-page .fap-item-meta span {
    margin-right: .2rem;
}

/* 加载更多 */
.fap-page .fap-more {
    margin-top: .36rem;
    padding: 0 .24rem;
    text-align: center;
}

.fap-page .fap-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .16rem;
    width: 100%;
    height: .88rem;
    box-sizing: border-box;
    font-size: .28rem;
    font-weight: 500;
    color: #0054b2;
    background: #fff;
    border: .02rem solid #0054b2;
    border-radius: .44rem;
    text-decoration: none;
    transition: all .2s ease;
}

/* 下拉箭头 */
.fap-page .fap-more a .fap-more-arrow {
    width: .16rem;
    height: .16rem;
    border-right: .03rem solid #0054b2;
    border-bottom: .03rem solid #0054b2;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.fap-page .fap-more a:active {
    background: #eaf3ff;
    transform: scale(.98);
}

.fap-page .fap-more a:active .fap-more-arrow {
    transform: rotate(45deg) translate(.03rem, .03rem);
}

.fap-page .fap-more a.fap-disabled {
    color: #bbb;
    border-color: #e5e5e5;
    background: #fafafa;
}

.fap-page .fap-more a.fap-disabled .fap-more-arrow {
    display: none;
}

/* 近期文章侧栏 ---------------------------------------------------- */
.fap-page .list-sidebar {
    margin-top: .36rem;
    /* padding: 0 .24rem; */
}

.fap-page .sidebar-item {
    background: #fff;
    /* border-radius: .12rem; */
    box-shadow: 0 .02rem .12rem rgba(0, 0, 0, .06);
    overflow: hidden;
}

.fap-page .sidebar-item .list-title {
    display: flex;
    align-items: center;
    padding: .26rem .2rem .1rem;
}

.fap-page .sidebar-item .list-title h2 {
    font-size: .34rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: .4rem;
    padding-left: .16rem;
    border-left: .06rem solid #0054b2;
}

.fap-page .recent-article-list {
    list-style: none;
    margin: 0;
    padding: .08rem .2rem .2rem;
}

.fap-page .recent-article-list li {
    position: relative;
    padding: .16rem 0;
    border-bottom: 1px solid #f4f4f4;
}

.fap-page .recent-article-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 序号：前三名红色，第 4 名起灰色 */
.fap-page .recent-article-list li > em {
    position: absolute;
    left: 0;
    top: .16rem;
    width: .36rem;
    height: .36rem;
    background: #ff0000;
    color: #fff;
    font-style: normal;
    font-size: .24rem;
    line-height: .36rem;
    text-align: center;
    border-radius: .08rem;
}

.fap-page .recent-article-list li:nth-child(n+4) > em {
    background: #eaeaea;
    color: #666;
}

.fap-page .recent-article-list li > a {
    display: block;
    padding-left: .5rem;
    padding-right: .95rem;
    font-size: .28rem;
    color: #333;
    line-height: .36rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.fap-page .recent-article-list li > a:hover {
    color: #ff0000;
}

.fap-page .recent-article-list li > a:active {
    color: #0054b2;
}

/* 日期：右侧灰色 */
.fap-page .recent-article-list li > span {
    position: absolute;
    right: 0;
    top: .16rem;
    font-size: .22rem;
    color: #999;
    line-height: .36rem;
}