/* 站内搜索结果页样式（重庆中国三峡博物馆，模板 2009100）
   头部/底部的样式来自头部模板引入的 app.css，这里只补搜索页自身内容区，
   类名统一 sx-sr- 前缀，单位用 px（站点外层是 rem 适配，内容区用 px 更稳）。 */

.sx-sr-page {
    width: 1200px;
    max-width: 92%;
    margin: 0 auto 60px;
    /* 站点头部 .header 是 position:fixed（高度 0.529rem，1rem = 视口宽/10），
       这里给它让出空间，否则搜索框会被压在头部下面 */
    padding-top: 0.62rem;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    color: #333333;
    box-sizing: border-box;
}
.sx-sr-page *,
.sx-sr-page *::before,
.sx-sr-page *::after {
    box-sizing: border-box;
}

.sx-sr-title {
    position: relative;
    padding-left: 14px;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 700;
    color: #4373af;
    line-height: 1.4;
}
.sx-sr-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 22px;
    background: #4373af;
}

/* ---------- 搜索条 ---------- */
.sx-sr-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px;
    background: #f5f8fc;
    border: 1px solid #e3ebf5;
}
.sx-sr-input {
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    height: 42px;
    padding: 0 16px;
    border: 1px solid #cfd9e8;
    border-right: 0;
    background: #ffffff;
    font-size: 15px;
    color: #333333;
    line-height: 42px;
}
.sx-sr-input:focus {
    border-color: #4373af;
    outline: none;
}
.sx-sr-btn {
    height: 42px;
    padding: 0 32px;
    border: 1px solid #4373af;
    background: #4373af;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
}
.sx-sr-btn:hover {
    background: #37619a;
    border-color: #37619a;
}

/* ---------- 概要 ---------- */
.sx-sr-sum {
    padding: 16px 2px 8px;
    font-size: 13px;
    color: #888888;
}
.sx-sr-sum b {
    color: #4373af;
}

/* ---------- 结果列表 ---------- */
.sx-sr-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sx-sr-item {
    padding: 18px 2px;
    border-bottom: 1px dashed #e2e2e2;
}
.sx-sr-item > a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
}
.sx-sr-item > a:hover .sx-sr-tit {
    color: #4373af;
}
.sx-sr-img {
    width: 180px;
    height: 112px;
    object-fit: cover;
    margin-right: 16px;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.sx-sr-info {
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    min-width: 0;
}
.sx-sr-tit {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
    color: #1a1a1a;
}
.sx-sr-tit .sx-sr-hl {
    color: #d0021b;
    font-style: normal;
}
.sx-sr-abs {
    font-size: 14px;
    line-height: 1.8;
    color: #666666;
    max-height: 3.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sx-sr-date {
    margin: 8px 0 0;
    font-size: 13px;
    color: #999999;
}
.sx-sr-loading {
    padding: 18px 2px;
    font-size: 14px;
    color: #999999;
    list-style: none;
}
.sx-sr-empty {
    padding: 60px 0;
    text-align: center;
    font-size: 15px;
    color: #999999;
}

/* ---------- 分页 ---------- */
.sx-sr-pager {
    padding: 26px 0 0;
    text-align: center;
    font-size: 14px;
}
.sx-sr-pager:empty {
    display: none;
}
.sx-sr-pg {
    display: inline-block;
    min-width: 34px;
    height: 34px;
    margin: 0 4px;
    padding: 0 12px;
    line-height: 32px;
    border: 1px solid #dcdcdc;
    color: #333333;
    text-align: center;
    text-decoration: none;
    background: #ffffff;
}
.sx-sr-pg:hover {
    border-color: #4373af;
    color: #4373af;
}
.sx-sr-pg.active {
    background: #4373af;
    border-color: #4373af;
    color: #ffffff;
}
.sx-sr-pg.disabled {
    color: #c0c0c0;
    border-color: #ebebeb;
    cursor: not-allowed;
}
.sx-sr-pg-info {
    margin-left: 10px;
    color: #999999;
}

@media screen and (max-width: 768px) {
    .sx-sr-page {
        width: auto;
        max-width: none;
        margin: 0 12px 40px;
        padding-top: 0.9rem;
    }
    .sx-sr-bar {
        padding: 10px;
    }
    .sx-sr-item > a {
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .sx-sr-img {
        width: 100%;
        height: auto;
        margin: 0 0 10px;
    }
    .sx-sr-tit {
        font-size: 15px;
    }
}