/*湖南艺术资源库*/
@charset "UTF-8";
.header_bg{
    position: relative;
    float: left;
    width: 100%;
    min-width: 1200px;
    min-height: 408px;
    background: url(../images/yspp/bg.jpg) no-repeat center 0;
}
.header_bg.detail_headerbg{ background-position: center -100px;}
.yspp_datalist{
    position: relative;
    height: 720px;
    margin: 202px 0 98px 0;
    padding: 0 164px;
}
.yspp_datalist .swiper-slide{
    position: relative;
    width: 595px;
    height: 700px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(3,0,0,.15);
}
.yspp_datalist .swiper-slide .imgbox{
    position: relative;
    width: 595px;
    height: 360px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: transform 0.2s linear; /* 平滑过渡效果 */
    overflow: hidden;
}
.yspp_datalist .swiper-slide:hover .imgbox img{
    transform: scale(1.15); /* 放大15% */
}
.yspp_datalist .swiper-slide .institution{ position: relative; float: right; width: 100px; height: 100px; border: 5px solid #fff; border-radius: 50%; margin: -58px 34px 0 0; z-index: 5;}
.yspp_datalist .swiper-slide .conbox{ margin: 110px 52px 0 52px;}
.yspp_datalist .swiper-slide .conbox p{ margin: 0; padding: 0;}
.yspp_datalist .swiper-slide .conbox .timeslot{ font-family: "HMSanSC_black"; font-size: 16px; color: rgba(4,4,4,.2); line-height: 18px;}
.yspp_datalist .swiper-slide .conbox .titlename{ font-size: 36px; color: #040404; font-weight: 600; line-height: 45px; margin-bottom: 50px;}
.yspp_datalist .swiper-slide .conbox .intros{ font-size: 14px; color: rgba(4,4,4,.5); line-height: 20px; text-align: justify; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}

/*详情页*/
.yspp_detail_bg{
    position: relative;
    float: left;
    width: 100%;
    min-width: 1200px;
    min-height: 800px;
    background: #ffffff;
    margin: 262px 0 0 0;
}
.yspp_institution{ position: relative; float: left; width: 1200px; margin: -84px 0 30px 0; z-index: 9;}
.yspp_institution .institution_img{ float: left; width: 163px; height: 163px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 50%; margin-right: 10px;}
.yspp_institution .institution_img .imgbox{ width: 139px; height: 139px; border-radius: 50%; margin: 12px;}
.yspp_institution .institution_name{ float: left; width: 400px; font-size: 30px; color: #fff; font-weight: 600; margin-top: 30px;}
.yspp_institution .institution_name span{ font-size: 18px; font-weight: normal; margin-left: 20px;}
.yspp_institution .institution_type{ float: right; width: 320px; margin-top: 22px;}
.yspp_institution .institution_type li{ float: left; width: 98px; height: 38px; border: 1px solid rgba(255,255,255,.39); border-radius: 5px; margin-left: 10px; font-size: 12px; color: #fff; line-height: 38px; text-align: center; cursor: pointer;}
.yspp_institution .institution_type li.on{ border-color: #fff; background: #fff; color: #000; font-weight: 600;}
.yspp_institution .institution_type li:first-child{ margin-left: 0;}

ul.yspp_filterlist{ position: relative; float: left; width: 1136px; padding: 0 32px; margin-bottom: 40px;}
ul.yspp_filterlist::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
ul.yspp_filterlist li{ float: left; min-width: 105px; font-size: 14px; color: #000; text-align: center; margin-right: 20px; padding-bottom: 25px; cursor: pointer;}
ul.yspp_filterlist li.selected{ background: url(../images/yspp/icon_01.png) no-repeat center bottom;}

ul.yspp_d_datalist{ float: left; width: 1200px; margin-bottom: 40px;}
ul.yspp_d_datalist li{ position: relative; float: left; width: 292px; height: 165px; border-radius: 5px; margin: 0 10px 10px 0; cursor: pointer; overflow: hidden;}
ul.yspp_d_datalist li:nth-child(4n){ margin-right: 0;}
ul.yspp_d_datalist li .imgbox{ float: left; width: 292px; height: 165px; border-radius: 5px;}
ul.yspp_d_datalist li .bgbox{ display: none; position: absolute; top: 0; left: 0; width: 242px; height: 125px; padding: 20px 25px; border-radius: 5px; background: rgba(0,0,0,.5);}
ul.yspp_d_datalist li .title{ font-family:'HMSanSC_black'; font-size: 16px; color: #fff; letter-spacing: 1px; line-height: 24px;}
ul.yspp_d_datalist li .desc{ font-size: 12px; color: rgba(255,255,255,.5); line-height: 18px;}
ul.yspp_d_datalist li .video_icon{ position: absolute; right: 20px; bottom: 20px; width: 26px; height: 26px; background: url(../images/yspp/icon_02.png) no-repeat;}

ul.yspp_d_datalist li:hover .imgbox{
    transform: scale(1.12); /* 放大12% */
}
ul.yspp_d_datalist li:hover .bgbox{ 
    display: block;
    -webkit-animation:fadeinB .2s ease-out backwards;
    -moz-animation:fadeinB .2s ease-out backwards;
    -ms-animation:fadeinB .2s ease-out backwards;
    animation:fadeinB .2s ease-out backwards;
}

@-webkit-keyframes fadeinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes fadeinB{
    0%{opacity:0;-moz-transform:translateY(100px);}
    100%{opacity:1;-moz-transform:translateY(0);}
}
@-ms-keyframes fadeinB{
    0%{opacity:0;-ms-transform:translateY(100px);}
    100%{opacity:1;-ms-transform:translateY(0);}
}
@keyframes fadeinB{
    0%{opacity:0;transform:translateY(100px);}
    100%{opacity:1;transform:translateY(0);}
}

.video_play{display: none;}
#yspp_video video{ width: 1200px; height: 800px;}

.filter_jz,.filter_jb{ display: none;}
.filter_databox ul.ysda_datalist li{ background: #f4f5fa;}

ul.jz_datalist{ float: left; width: 1200px; margin-bottom: 30px;}
ul.jz_datalist li{ float: left; width: 392px; height: 310px; background: #f4f5fa; border: 1px solid #e6e6e9; border-radius: 5px; margin: 0 9px 9px 0;}
ul.jz_datalist li:hover{ border: 1px solid #293e97;}
ul.jz_datalist li:nth-child(3n){ margin-right: 0;}
ul.jz_datalist li .imgbox{ float: left; width: 392px; height: 221px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin-bottom: 10px;}
ul.jz_datalist li .conbox{ float: left; width: 372px; font-size: 13px; color: rgba(4,4,4,.8); text-indent: 10px; margin: 0 10px;}
ul.jz_datalist li .conbox .title{ float: left; width: 372px; font-size: 18px; color: #000; font-weight: 600; text-indent: 0; line-height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}

.ysda_detailbox{ float: left; width: 1200px; min-height: 800px;}
.detail_titlebox{ font-size: 36px; color: #000; font-weight: 600; line-height: 50px; letter-spacing: 1px;}
.detail_typebox{ font-size: 12px; color: #fff; line-height: 20px; margin: 20px 0;}
.detail_typebox span{ display: inline-block; padding: 0 6px; background: #293e97; border-radius: 3px; margin-right: 5px;}
.detail_typebox span.city{ background: rgba(0, 0, 0, .2);}
.detail_descbox{ font-size: 12px; color: rgba(4,4,4,.3); margin-bottom: 15px;}
.detail_descbox span{ margin-right: 30px;}
.detail_contentbox{ float: left; width: 1200px; font-size: 16px; line-height: 30px; text-align: justify;}
.detail_contentbox img{ display:inline-block;max-width:100%;height:auto; margin:10px 0;}
.detail_contentbox video{ width: 1200px; height: 700px; background-color: #000;}
.detail_contentbox .audio_title{ font-size: 16px; color: #000; text-indent: 25px; margin-bottom: 5px;}
.detail_contentbox audio{
    width: 100%;
    border: 1px solid rgba(41,62,151,.25);
    border-radius: 50px;
    outline: none;
}

.detail_guide{ float: left; width: 1000px; margin: 50px 100px 70px 100px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,.1); font-size: 12px;}
.detail_guide .next_article,.detail_guide .prev_article{ color: rgba(4,4,4,.5);}
.detail_guide .next_article:hover,.detail_guide .prev_article:hover{ color: #293e97;}
.detail_guide .next_article{ float: right;}

.jz_detail_title{ float: left; width: 1200px; margin-bottom: 45px;}
.jz_detail_title a{ float: left; font-size: 24px; color: #000; font-weight: 600; line-height: 26px; background: url(../images/yspp/icon_03.png) no-repeat 20px center; padding-left: 60px;}
.jz_detail_title span{ float: right; font-size: 16px; color: rgba(0,0,0,.7); line-height: 26px;}

.jb_detail_box{ position: relative; width: 1400px; margin: 0 auto;}
.grey-bg{ float: left; width: 1200px; min-height: 700px; background: #f8f9fc; padding: 120px 100px 50px 100px; margin-top: -111px;}
.jz_introbox{ float: left; width: 1150px; margin: 0 25px; line-height: 28px;}