body {
    background: #F5F5F5;
}

.root {
    width: 100%;
    padding-top: 173rem;
    padding-bottom: 30rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==.==.== 顶部广告 ==.==.== */
.root .top-logo {
    width: 1170rem;
    margin-top: 16rem;
    padding: 0 15rem;
    height: 195rem;
}

.top-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ==.==.== 顶部标题 ==.==.== */
.root .top-title-bar {
    width: 1170rem;
    padding: 0 15rem;
    height: 66rem;
    font-size: 18rem;
    color: #666666;
    line-height: 66rem;
}

.root .top-title-bar a {
    color: #666666;
}

.root .top-title-bar a:hover, .root .top-title-bar .__a {
    color: #282828;
}

/* ==.==.== 主内容区 ==.==.== */
.root .zones {
    width: 1170rem;
    padding: 0 15rem;
    margin: 0 auto 0 auto;
    display: grid;
    grid-template-columns: auto 300rem;
}

/* == 文章列表 == */
.zones .article-list {
    background: #FFFFFF;
    width: 850rem;
    padding-top: 50rem;
}

.article-list .bcell {
    position: relative;
    width: 100%;
    height: 480rem;
    vertical-align: bottom;
}

.article-list .bcell .txt {
    position: absolute;
    top: 384rem;
    left: 30rem;
    height: 25rem;
    font-size: 23rem;
    color: #282828;
    line-height: 25rem;
    right: 0rem;
}

.article-list .bcell .txt span:first-child {
    font-weight: 600;
    font-size: 23rem;
}

.article-list .bcell .msg {
    position: absolute;
    top: 419rem;
    left: 30rem;
    height: 17rem;
    font-size: 16rem;
    font-weight: 300;
    color: #A2A2A2;
    line-height: 17rem;
    right: 0rem;
}

.article-list .bcell .cover {
    position: absolute;
    top: 30rem;
    left: 30rem;
    width: 790rem;
    height: 339rem;
}

.article-list .bcell .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-list .bcell .hline {
    position: absolute;
    bottom: 4rem;
    left: 30rem;
    right: 30rem;
    height: 1rem;
    background: #E8E8E8;
}

.article-list .acell {
    position: relative;
    width: 100%;
    height: 240rem;
}

.article-list .acell .ibox {
    position: absolute;
    top: 24rem;
    left: 30rem;
    right: 240rem;
    max-height:160rem;
    color: #000000;
}

.article-list .acell .txt {
    position: relative;
    width: 100%;
    font-size: 23rem;
    font-weight: 500;
    max-height: 64rem;
    line-height: 32rem;
    color: #000000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.article-list .acell .msg {
    position: relative;
    margin-top:22rem;
    width: 100%;
    font-size: 16rem;
    max-height: 44rem;
    line-height: 22rem;
    color: #666666;
    overflow: hidden;
}

.article-list .acell .time {
    position: absolute;
    bottom: 24rem;
    left: 30rem;
    right: 240rem;
    font-size: 14rem;
    height: 20rem;
    line-height: 20rem;
    color: #666666;
}

.article-list .acell .cover {
    position: absolute;
    top: 30rem;
    right: 30rem;
    width: 180rem;
    height: 180rem;
    overflow: hidden;

}

.article-list .acell .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-list .acell .hline {
    position: absolute;
    bottom: 0;
    left: 30rem;
    right: 30rem;
    height: 1rem;
    background: #E8E8E8;
}

/* == 页码 == */
.zones .pagination {
    width: 100%;
    height: 140rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination .L_, .pagination .R_ {
    width: 40rem;
    height: 40rem;
}

.pagination .N_ {
    width: 40rem;
    height: 40rem;
    font-size: 16rem;
    background: #FFFFFF;
    color: black;
    text-align: center;
    line-height: 40rem;
}

.pagination .N_.active {
    background: #000000;
    color: #FFFFFF;
}

.pagination .D_ {
    width: 40rem;
    height: 40rem;
    text-align: center;
    line-height: 40rem;
    cursor: pointer;
}

.pagination .L_, .pagination .N_, .pagination .D_ {
    margin-right: 10rem;
}

/* == 推荐文章 == */
.zones .rec-list {
    background: #FFFFFF;
    width: 100%;
}

.rec-list .section-header {
    position: relative;
    width: 100%;
    height: 88rem;
}

.rec-list .section-header .txt {
    position: absolute;
    top: 26rem;
    left: 20rem;
    font-size: 23rem;
    font-weight: 500;
    height: 32rem;
    line-height: 32rem;
    color: #000000;
}

.rec-list .section-header .hline {
    position: absolute;
    bottom: 14rem;
    left: 20rem;
    right: 20rem;
    height: 2rem;
    background: #E8E8E8;
}

.rec-list .rcell {
    position: relative;
    width: 100%;
    height: 120rem;
}

.rec-list .rcell .txt {
    position: absolute;
    top: 15rem;
    left: 20rem;
    right: 120rem;
    font-size: 14rem;
    font-weight: 500;
    max-height: 84rem;
    line-height: 21rem;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.rec-list .rcell .msg {
    position: absolute;
    top: 38rem;
    left: 20rem;
    right: 120rem;
    font-size: 14rem;
    line-height: 24rem;
    color: gray;
}

.rec-list .rcell .cover {
    position: absolute;
    top: 20rem;
    right: 20rem;
    width: 80rem;
    height: 80rem;
    overflow: hidden;
}

.rec-list .rcell .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rec-list .rcell .hline {
    position: absolute;
    bottom: 0;
    left: 20rem;
    right: 20rem;
    height: 1rem;
    background: #E8E8E8;
}

/* == 右下广告 == */
.zones .tail-gg {
    margin-top: 20rem;
    width: 300rem;
    height: 600rem;
}

.tail-gg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**********图片放大动画***********/
.article-list img {
    cursor: pointer;
    transition: all 0.6s;
}

.article-list img:hover {
    transform: scale(1.1);
}

.rec-list img {
    cursor: pointer;
    transition: all 0.6s;
}

.rec-list img:hover {
    transform: scale(1.1);
}

.article-list .acell .txt:hover {
    color: #F39500;
}
.article-list .one-line:hover {
    color: #F39500;
}

.article-list .two-line:hover {
    color: #F39500;
}

.rec-list .rcell .txt:hover {
    color: #F39500;
}

.rec-list .rcell .msg:hover {
    color: #F39500;
}


.list_ .bcell .txt:hover {
    color: #282828;
}

.list_ .bcell .msg:hover {
    color: #F39500;
}

.article-list .bcell .cover {
    overflow: hidden;
}

.list_ img {
    cursor: pointer;
    transition: all 0.6s;
}

.list_ img:hover {
    transform: scale(1.1);
}
.root .top-title-bar a:hover {
    color: #F39500;
}