.moralNew-container {
    padding: 20px 0;
    height: 470px;
    margin-top: 20px;
    position: relative;
    border-bottom: 1px solid #EBEBEB;
}

.moralNew-container .moral-left {
    position: absolute;
    left: 0;
    z-index: 1;
}


.moralNew-container .moral-left .cover {
    position: relative;
    width: 500px;
    height: 356px;
    font-family: PingFang SC;
}

.moral-left .cover img {
    width: 100%;
    height: 100%;
}

.moral-left .cover .time {
    position: absolute;
    left: 0;
    bottom: 0;
}

.moral-left .cover .time .date {
    position: relative;
    width: 76px;
    height: 70px;
    font-family: MiSans;
    background: #B99E1F;
    color: #fff;
}

.moral-left .cover .time .date .item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.moral-left .cover .time .date .year {
    font-size: 30px;
    top: 26px;
    font-weight: 400;
}

.moral-left .cover .time .date .day {
    font-size: 14px;
    top: 52px;
}

.moral-left .cover .time .text {
    width: 390px;
    height: 70px;
    line-height: 70px;
    font-size: 24px;
    font-weight: bold;
    color: #111111;
    padding-left: 20px;
    padding-right: 20px;
    background: url('../hs/static/strip_background.png') no-repeat;
}
.moral-left .cover .time .text .alink {
    color: #111111;
    text-decoration: none;
}
.moral-left .cover .time .text .alink:hover {
    color: #B90316;
}


.coverInfo {
    width: 500px;
    padding: 21px 0;
}

.coverInfo .count-wrapper {
    flex: 0 0 107px;
    text-align: center;
}

.coverInfo .count-wrapper .icon {
    display: inline-block;
    width: 17px;
    height: 11px;
    background: url('../hs/static/scan.png') no-repeat;
}

.coverInfo .count-wrapper .count {
    display: inline-block;
    font-size: 16px;
    color: #999999;
}

.coverInfo .text {
    font-size: 16px;
    color: #666666;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}


.moral-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 500px;
    height: 377px;
    z-index: 0;
    background: #F7F8FC;
}


.moral-right .item {
    position: relative;
    margin-left: 64px;
    height: 94px;
    cursor: pointer;
    border-bottom: 1px solid #EBEBEB;
}
.moral-right .item::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -19px;
    width: 2px;
    height: 70%;
    background: transparent;
}

.moral-right .item:hover::before {
    background: #B90316;
}

.moral-right .item.active::before {
    background: #B90316;
}
.moral-right .item.active .title {
    color: #B90316;
}


.moral-right .item:hover .title {
    color: #B90316;
}


.moral-right .item:last-child {
    border-bottom: none;
}

.moral-right .item .date {
    /* padding-left: 17px; */
    padding-top: 18px;
    padding-bottom: 6px;
}

.moral-right .item .date .icon {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    background: url('../hs/static/iocn_time.png') no-repeat;
}

.moral-right .item .date .time {
    font-size: 14px;
    color: #999999;
}

.moral-right .item .title {
    font-size: 18px;
    width: 410px;
    line-height: 24px;
    padding-top: 5px;
    word-wrap: break-word;
    font-family: PingFang SC;
    font-weight: bold;
    color: #111111;
    /* padding-left: 17px; */
    padding-bottom: 10px;
}