.rule-item{
    display: inline-block;
    width:100%;
    margin-top:2%;
    background-color: #fbfbfb;
    border-radius: 0.2rem;
    max-height: 220px;
    border-bottom: 1px solid #eee;
}

.rule-item .rule-left{
    display: inline-block;
    width:30%;
    float: left;
}
.rule-item .rule-left img{
    width: 100%;
    height:200px;
    border-radius: 0.2rem;
}

.rule-item .rule-right{
    display: inline-block;
    width:70%;
    float: left;
}

.rule-item .rule-right .rule-title{
    display: inline-block;
    width:100%;
}

.rule-item .rule-right .rule-title span{
    display: block;
    padding: 0.2rem;
    text-align: center;
    font-weight: bold;
}
.rule-item .rule-right .rule-content{
    display: inline-block;
    width:100%;
    height:175px;
    overflow: hidden;
    margin-left: 3%;
}
.rule-item .rule-right .rule-content .text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
}
.rule-item .rule-right .notes{
    display: inline-block;
    position: relative;
    width: 100%;
}
.rule-item .rule-right .notes span{
    display: block;
    padding: 0.4rem;
    font-size: 0.7rem;
    text-align: right;
    color: gray;
}



/**************第二种没有图片***********************/
.rule-item .rule-no-img-title{
    display: inline-block;
    width: 100%;
}
.rule-item .rule-no-img-title span{
    display: block;
    padding: 0.2rem;
    text-align: center;
    font-weight: bold;
}

.rule-item .rule-no-img-content{
    display: inline-block;
    width:100%;
    height:175px;
    overflow: hidden;
}

.rule-item  .notes{
    display: inline-block;
    position: relative;
    width: 100%;
}
.rule-item  .notes span{
    display: block;
    padding: 0.4rem;
    font-size: 0.7rem;
    text-align: right;
    color: gray;
}