/*
* 彩虹模板样式，此处不适用原有的less，直接使用css
* 根据不同内容演示区分，采用公共样式的方式，进行说明
* 不采用根据不同样式单独一套进行处理
*/
/*标准外框，主要确定上下内容间距，内容间分割线等内容*/
.item_style{
    font-size: 1em;
    padding: 0.8em 0;
    border-bottom: 1px solid #ECECEC;
}
/*左右结构（主要针对左图或者右图的情况，使用flex布局）*/
.item_style_lf{
    display: flex;
    flex-flow: row nowrap;
}
/*三分图片布局*/
.item_style_three_picture{
    width: 32%;
    height: 0;
    background-image: url("../../config/images/default_16_9.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #999999;
    overflow: hidden;
    border-radius: 3px;
    padding-top: 18%;
    position: relative;
}
/*小图样式，图片右下角图标位置*/
.item_style_simple_position_common{
    position: absolute;
    bottom: 4px;
    right: 4px;
}
/*四比一图片样式*/
.item_style_picture_four_to_one{
    width:100%;
    height:0;
    background-image: url("../../config/images/default_16_9.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #999999;
    overflow: hidden;
    border-radius: 3px;
    padding-top: 25%;
    position: relative;
}
/*图片部分布局*/
.item_style_picture_common{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 3px;
}
/* 图片在右侧时候 */
.item_style_right_picture_container{
    margin-left: 0.5em;
}
/*图片在左侧说明的相关内容*/
.item_style_info_left{
    flex: 1;
    position: relative;

}
/*标准公共标题样式*/
.item_style_title_common{
    font-size: 1em;
    line-height: 1.4em;
    color: #333333;
}
.item_style_title_side{
    padding-bottom: 20px;
}
/*标准来源等信息公共样式*/
.item_style_source_common{
    font-size: 12px;
    line-height: 14px;
    width: 100%;
}
.item_style_source_common span{
    color: #B8B8B8;
    margin-right: 1em;
}
/*来源等信息定制样式*/
.item_style_source_position{
    position: absolute;
    bottom: 0;
    left: 0;
}
.item_style_source_flow{
    margin-top: 0.5em;
}
/*三图标准容器*/
.item_style_three_picture_container{

}
/*三图标准图片内容样式*/
.item_style_three_picture_between{
    float: left;
    margin-left: 2%;
}
.item_style_three_picture_between:first-of-type{
    margin-left: 0;
}
/*三图定制标题样式*/
.item_style_three_title{
    margin-bottom: 0.5em;
}
/*大图容器标准样式*/
.item_style_big_picture_container{
    position: relative;
}
/*大图渐变黑色背景*/
.item_style_black_background{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/item-style/background-big-item-image.png");
    background-size: auto 100%;
}
/*大图图片样式 标准*/
.item_style_big_picture{
    width: 100%;
    padding-top: 56.25%;
    border-radius: 3px;
    position: relative;
}
/*类型区分样式--如图集，专题等*/
.item_style_type_tip{
    width: 4em;
    height: 16px;
    background-size: auto 14px;
    background-position: right center;
    background-repeat: no-repeat;
}
/*图集类型，背景图*/
.item_style_tip_gallery{
    float: right;
    background-image: url("../images/item-style/icon-content-type-gallery.png");
}
/*活动类型，背景图*/
.item_style_tip_activity{
    float: right;
    background-image: url("../images/item-style/icon-content-type-activity.png");
}
/*专题类型，背景图*/
.item_style_tip_special{
    float: right;
    background-image: url("../images/item-style/icon-content-type-special.png");
}
/*直播类型，背景图*/
.item_style_tip_live{
    float: right;
    background-image: url("../images/item-style/icon-content-type-live.png");
}
/*投票类型，背景图*/
.item_style_tip_vote{
    float: right;
    background-image: url("../images/item-style/icon-content-type-vote.png");
}
/*问卷类型，背景图*/
.item_style_tip_question{
    float: right;
    background-image: url("../images/item-style/icon-content-type-question.png");
}

/*音视频时长*/
.item_style_duration{
    position: absolute;
    bottom: 4px;
    right: 4px;
    background-color: rgba(0,0,0,0.5);
    background-repeat: no-repeat;
    padding: 5px 5px 5px 18px;
    background-position: 5px center;
    color: #fff;
    background-size: 10px 10px;
    font-size: 12px;
    height: 20px;
    line-height: 12px;
    border-radius: 3px;
    min-width: 55px;
    text-align: center;
}
.item_style_video_duration{
    background-image: url(../images/item-style/icon_list_play_video.png);
}
.item_style_audio_duration{
    background-image: url(../images/item-style/icon_list_play_audio.png);
}

/*音视频时长end*/
/*专题部分独有*/

/*专题部分独有 end*/
/*广告内容*/
.item_style_ad{
    width: 4em;
    height: 16px;
    background-image: url("../images/item-style/icon-list-tip-ad.png");
    background-repeat: no-repeat;
    background-size: auto 16px;
    background-position: right center;
}
.item_style_position_common{
    position: absolute;
    bottom: 4px;
    right: 4px;
}
.item_style_float_r{
    float: right;
}
/*广告内容end*/
/*H5内容样式*/
.item_style_h5{
    width: 4em;
    height: 16px;
    background-image: url("../images/item-style/icon-list-tip-h5.png");
    background-repeat: no-repeat;
    background-size: auto 16px;
    background-position: right center;
    right: 10px;
    bottom: 10px;
}
/*H5内容样式end*/
/*直播大图定制样式*/
.item_style_live_status{
    width: 5em;
    height: 15px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
}
.item_style_status_prelive{
    background-image: url("../images/item-style/icon-list-status-pre.png");
}
.item_style_status_living{
    background-image: url("../images/item-style/icon-list-status-ing.png");
}
.item_style_status_lived{
    background-image: url("../images/item-style/icon-list-status-end.png");
}
.item_style_status_review{
    background-image: url("../images/item-style/icon-list-status-next.png");
}
.item_member_number{
    float: right;
    border: 1px solid #B8B8B8;
    font-size: 12px;
    padding: 0 6px;
    border-radius: 10px;
    line-height: 14px;
    box-sizing: border-box;
    margin-right: 0.3em;
}
/*1_4_2*/
.item_style_top_live_status{
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    width: 100%;
    height: 16px;
}
.item_top_live_pre{
    background-image: url("../images/item-style/icon-list-status-p-pre.png");
}
.item_top_live_ing{
    background-image: url("../images/item-style/icon-list-status-p-ing.png");
}
.item_top_live_end{
    background-image: url("../images/item-style/icon-list-status-p-end.png");
}
.item_top_live_next{
    background-image: url("../images/item-style/icon-list-status-p-next.png");
}
.live_4_1_info{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.live_4_1_title{
    font-size: 1em;
    line-height: 1.4em;
    color: #ffffff;
}
.item_style_live_tips{
    padding: 10px 4%;
    position: relative;
}
.item_style_live_tips span{
    color: #ffffff;
    font-size: 0.8em;
}
.item_4_1_number{
    padding-left: 1.2em;
    background-image: url("../images/item-style/icon-members.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 1em;
    float: right;
    position: absolute;
    right: 4%;
    bottom: 10px;
}
/*直播大图定制样式end*/
/*活动大图定制样式*/
.item_style_1_1_info{
    height: 16px;
    position: absolute;
    bottom: 10px;
    left: 0;
    padding: 0 4%;
    width: 100%;
}
.item_style_activity_time{
    font-size: 0.8em;
    line-height: 16px;
    float: left;
    color: #ffffff;
}
.item_style_activity_tip{
    width: 4em;
    height: 16px;
    background-image: url("../images/item-style/icon-list-tip-activity.png");
    background-repeat: no-repeat;
    background-size: auto 16px;
    background-position: right center;
    position: absolute;
    bottom: 0;
    right: 10px;
}
.item_style_activity_status, .item_style_vote_status, .item_style_question_status{
    display: inline-block;
    height: 16px;
    width: 4em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    float: left;
}
.item_style_activity_pre, .item_style_vote_pre, .item_style_question_pre{
    background-image: url("../images/item-style/icon-list-activity-status-pre.png");
}
.item_style_activity_ing, .item_style_vote_ing, .item_style_question_ing{
    background-image: url("../images/item-style/icon-list-activity-status-ing.png");
}
.item_style_activity_end, .item_style_vote_end, .item_style_question_end{
    background-image: url("../images/item-style/icon-list-activity-status-end.png");
}
/*活动大图定制样式end*/
/*投票大图样式*/
.item_title_tip_vote{
    display: inline-block;
    background-image: url("../images/item-style/icon-content-type-vote.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    margin-right: 0.2em;
}
.item_style_vote_members{
    font-size: 0.8em;
    line-height: 16px;
    float: left;
    color: #ffffff;
    padding-left: 1.2em;
    background-image: url("../images/item-style/icon-members.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1em;
}
/*投票问卷大图底部标题*/
.item_style_bottom_title{
    margin-top: 0.5em;
}
/*圆形状态图标*/
.item_vote_3_2_status, .item_question_3_2_status{
    width: 2.4em;
    height: 2.4em;
    position: absolute;
    z-index: 3;
    right: 1em;
    bottom: -0.7em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.item_circle_status_pre{
    background-image: url("../images/item-style/icon-circle-status-pre.png");
}
.item_circle_status_ing{
    background-image: url("../images/item-style/icon-circle-status-ing.png");
}
.item_circle_status_end{
    background-image: url("../images/item-style/icon-circle-status-end.png");
}
/*问卷大图样式定制*/

.item_title_tip_question{
    display: inline-block;
    background-image: url("../images/item-style/icon-content-type-question.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    margin-right: 0.2em;
}
