:root{
    --sm:12px;
    --xs:14px;
    --xm:16px;
    --xl:18px;
    --xll:20px;
    --rc:#FF4866;
    --bc:#1677FF;
    --bgc:#E7F1FF;
    --bgcs:#f6f6f6;
    --fc:#434343;
    --flc:#9F9F9F;
}
.flex_cen{
    display: flex;
    justify-content: center;
    align-items: center;
}
.base_bc{
    background-color: #fff;
    border-radius: 18px;
    box-sizing: content-box;
}

.container{
    background-color: #F6F6F6;
    padding-bottom: 20px;
}
.s_title{
    font-size: var(--xs);
    padding: 20px 0;
}
.s_content{
    padding: 20px;
    display: flex;
    max-height: 396px;
    background-color: #fff;
    border-radius: 18px;
    box-sizing: border-box;
}
.l_img{
    width: 554px;
    height: 336px;
    border-radius: 18px;
    overflow: hidden;
    margin-right: 20px;
}
.r_box .r_t3 span{
    color: var(--rc);
    font-size: 22px;
    font-weight: bold;
}
.r_tag .r_tag_item:hover{
    font-size: 14px;
    color: var(--bc);
    background-color: var(--bgc);
}

.active{
    font-size: 14px !important;
    color: var(--bc)!important;
    background-color: var(--bgc)!important;
}

.r_tag .r_tag_item{
    font-size: 14px;
    color: var(--fc);
    padding: 10px 14px;
    background-color: var(--bgcs);
    cursor: pointer;
    line-height: 12px;
}
 .r_tag{
    display: flex;
   flex-wrap: wrap;
    gap: 4px;
}
.r_box .r_t4{
    margin: 11px 0 11px 0;
    font-size: var(--xs);
    color: var(--flc);
}
.r_box .r_t3{
    background: var(--bgcs);
    padding: 22px 0 27px 20px;
    color: var(--flc);
    height: 72px;
    box-sizing: border-box;
}
.r_box .r_t2{
    font-size: var(--xs);
    color: var(--fc);
    margin: 11px 0 15px 0;
}
.r_box .r_t1{
    font-size: 22px;
    line-height: 22px;
    color: var(--fc);
}
.r_box{
    /* max-width: 586px; */
    width: 586px;
}


.z_content{
    display: flex;
    justify-content: space-between;
}
.table_header{
    font-size: var(--xs);
    color: var(--flc);
    font-weight: normal;
    line-height: 52px;
    padding: 14px 0;
    border-bottom: 1px solid #E7E7E7;
}
.z_content_table table{
    width: 100%;
}
.z_content_table{
    width: 850px;
}
.table_h{
    font-size: var(--xs);
    color: var(--fc);
    text-align: center;
    line-height: 68px;
}
.t_much{
    color: var(--rc);
}
.t_play{
    width: 88px;
    height: 28px;
    margin: 0 auto;
    background: #FF4866;
    border-radius: 14px;
    line-height: 28px;
    cursor: pointer;
    color: #fff;
}
.zc_tag_img{
   margin-bottom: 8px;
    overflow: hidden;
    border-radius: 10px;
}
.z_content_tag{
    width: 340px;
    padding: 16px 16px 18px 16px;
    display: grid;
    box-sizing: border-box;
    grid-template-rows: repeat(2,1fr);
    grid-template-columns: repeat(2,1fr);
    grid-gap: 12px;
}
.base_tit .iconfont{
    display: inline-block;
    color: var(--rc);
    transform: rotate(-90deg);
}
.base_tit{
    font-size: var(--xll);
    color: var(--fc);
    font-weight: bold;
    margin-bottom: 15px;
}
.fc_container img{
    width: 100%;
    margin: 15px 0;
}

.fc_container .p_mt{
    margin-top: 15px;
}
.fc_container p a{
    color: var(--rc);
}
.fc_container p{
    font-size: var(--xs);
    color: var(--fc);
    line-height: 20px;
}
.fc_container{
    width: 850px;
    padding: 24px;
    box-sizing: border-box;
}
.p_c{
    color: var(--rc);
}
.p_s{
    font-size: var(--xll);
    color: #434343;
}
.p_t{
    color: var(--bc) !important;
}
.p_h{
    margin-top: 4px;
    color: var(--flc) !important;
}

.f_content{
    display: flex;
    justify-content: space-between;
}
.f_tag{
    width: 340px;
    box-sizing: border-box;
    padding: 24px 16px;
    border-radius: 18px;
}
.f_tagi_m{
    color: var(--rc);
    font-size: var(--xl);
}
.f_tagi_x:hover{
    color: var(--bc);
}
.f_tagi_x{
    color: var(--flc);
    font-size: var(--sm);
    cursor: pointer;
}
.f_tag_item .f_tagi_r .f_tagi_f{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.f_tag_item .f_tagi_r{
    flex: 1;
    padding: 12px;
    background-color: var(--bgcs);
    font-size: var(--xs);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.f_tag_item .f_tagi_img{
    width: 132px;
    height: 80px;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
.f_tag_item:not(:last-child){
    margin-bottom: 16px;
}
.f_tag_item{
    display: flex;
}
.f_tag_bc{
    width: 340px;
    height: 540px;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.ftag_item:hover{
    background-color: var(--bgc);
    color: var(--bc);
}
.ftag_items:hover{
    background-color: #FFECEF;
    color: var(--rc);
}
.ftag_item{
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    background: #F6F6F6;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}