/* 湘西非遗 */
@charset "UTF-8";
html,body{
    overflow-x: hidden;
}
.bg1{
    position: relative;
    float: left;
    width: 100%;
    min-width: 1855px;
    height: 1080px;
    background: url(../../images/xxfy/index/bg-1.jpg) no-repeat center 0;
    z-index: 9;
}
.bg2{
    position: relative;
    float: left;
    width: 100%;
    min-width: 1828px;
    height: 1080px;
    background: url(../../images/xxfy/index/bg-2.jpg) no-repeat center 0;
}
.bg3{
    position: relative;
    float: left;
    width: 100%;
    min-width: 1670px;
    height: 1080px;
    background: url(../../images/xxfy/index/bg-3.jpg) no-repeat center 0;
}
.bg4{
    position: relative;
    float: left;
    width: 100%;
    min-width: 1540px;
    height: 1080px;
    background: url(../../images/xxfy/index/bg-4.jpg) no-repeat center 0;
}
.bg1 .header-bg1{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 794px;
    height: 949px;
    background: url(../../images/xxfy/index/banner/1.jpg) no-repeat;
}
.bg1 .header-bg2{
    position: absolute;
    top: 203px;
    right: 68px;
    width: 504px;
    height: 561px;
    background: url(../../images/xxfy/index/banner/simple-intro.png) no-repeat;
}
.bg1 .header-title{
    position: absolute;
    top: 206px;
    left: 869px;
    width: 68px;
    height: 258px;
    background: url(../../images/xxfy/index/title-xxfy.png) no-repeat;
}
.bg1 .header-img1{
    position: absolute;
    right: 390px;
    bottom: 288px;
    width: 674px;
    height: 259px;
    background: url(../../images/xxfy/index/banner/2.jpg) no-repeat;
    border-radius: 10px;
}
.bg1 .header-img2{
    position: absolute;
    right: 580px;
    bottom: 62px;
    width: 485px;
    height: 199px;
    background: url(../../images/xxfy/index/banner/3.jpg) no-repeat;
    border-radius: 10px;
}
.bg1 .header-img3{
    position: absolute;
    right: 65px;
    bottom: 62px;
    width: 485px;
    height: 199px;
    background: url(../../images/xxfy/index/banner/4.jpg) no-repeat;
    border-radius: 10px;
}
.progress-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(to right, #6e8efb, #a777e3);
    z-index: 100;
}

.bg2 .ICH-item-left{
    position: absolute;
    top: 218px;
    left: 90px;
    width: 278px;
}
.bg2 .ICH-item-left .item-title{
    float: left;
    width: 278px;
    height: 66px;
    background: url(../../images/xxfy/index/title-item.png) no-repeat;
}
.bg2 .ICH-item-left ul.item-data{
    float: left;
    width: 204px;
    margin: 59px 37px 0 37px;
}
.bg2 .ICH-item-left ul.item-data li{
    float: left;
    width: 204px;
    height: 115px;
    background: url(../../images/xxfy/index/icon_03.png) no-repeat;
    margin-bottom: 26px;
    font-size: 21px;
    color: #151822;
    padding: 45px 0;
    text-align: center;
}
.bg2 .ICH-item-left ul.item-data li:last-child{ margin-bottom: 0;}
.bg2 .ICH-item-left ul.item-data li .num{
    font-family: "NSimSun_Fnt";
    font-size: 69px;
    color: #151822;
}

.bg2 .ICH-item-right{
    position: absolute;
    top: 100px;
    right: 45px;
    width: 1370px;
}
.bg2 .ICH-item-right ul.item-datalist{
    float: left;
    width: 1370px;
}
.bg2 .ICH-item-right ul.item-datalist li{
    position: relative;
    float: left;
    width: 395px;
    height: 910px;
    border-radius: 10px;
    background-color: #f6eddb;
    margin-right: 27px;
}
.bg2 .ICH-item-right ul.item-datalist li:last-child{ margin-right: 0;}
.bg2 .ICH-item-right ul.item-datalist li .con-bg{
    float: left;
    width: 395px;
    height: 910px;
    border-radius: 10px;
}
.bg2 .ICH-item-right ul.item-datalist li .cover-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 395px;
    height: 910px;
    background: linear-gradient(to bottom, #f6eddb, #f6eddb, rgba(246,237,219,.2), rgba(246,237,219,.2));
    border-radius: 10px;
}
.bg2 .ICH-item-right ul.item-datalist li:hover .cover-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 395px;
    height: 910px;
    background: linear-gradient(to bottom, #9eacc5, #9eacc5, rgba(158,172,197,.2), rgba(158,172,197,.2));
    border-radius: 10px;
}
.bg2 .ICH-item-right ul.item-datalist li .level-box{
    position: absolute;
    top: 0;
    right: 20px;
    width: 17px;
    height: 90px;
    background: url(../../images/xxfy/index/icon_04.png) no-repeat;
    font-family: "HMOS_S_S_Bold";
    font-size: 16px;
    color: #f6eddb;
    line-height: 17px;
    padding: 0 21px 17px 21px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}
.bg2 .ICH-item-right ul.item-datalist li:hover .level-box{
    background: url(../../images/xxfy/index/icon_05.png) no-repeat;
    color: #375681;
}
.bg2 .ICH-item-right ul.item-datalist li .type-box{
    position: absolute;
    top: 54px;
    left: 0;
    width: 395px;
    font-family: "HMOS_S_S_Thin";
    font-size: 20px;
    color: #151822;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1px;
    text-align: center;
}
.bg2 .ICH-item-right ul.item-datalist li .title-box{
    position: absolute;
    top: 110px;
    left: 92px;
    width: 211px;
    font-family: "NSimSun_Fnt";
    font-size: 40px;
    color: #151822;
    font-weight: 600;
    line-height: 48px;
    text-align: center;
}
.bg2 .ICH-item-right ul.item-datalist li .batch-box{
    position: absolute;
    top: 220px;
    left: 92px;
    width: 211px;
    font-family: "HMOS_S_S_Thin";
    font-size: 18px;
    color: #151821;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 1px;
    text-align: center;
}
.bg2 .ICH-item-right ul.item-datalist li.more{
    float: left;
    width: 104px;
    height: 910px;
    background: #f6eddb;
    text-align: center;
}
.bg2 .ICH-item-right ul.item-datalist li.more span{ 
    display: inline-block; 
    width: 16px; 
    height: 138px; 
    background: url(../../images/xxfy/index/more-fnt.png) no-repeat center center; 
    margin: 386px 0;
    -webkit-animation: 900ms linear 0s infinite btn_animation alternate;
    -moz-animation: 900ms linear 0s infinite btn_animation alternate;
    -o-animation: 900ms linear 0s infinite btn_animation alternate;
    animation: 900ms linear 0s infinite btn_animation alternate;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running
}
.bg2 .ICH-item-right ul.item-datalist li.more:hover span{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused
}
.bg2 .ICH-item-right ul.item-datalist li.more a{ display: inline-block; width: 104px; height: 910px;}
.bg2 .ICH-item-right ul.item-datalist li.more:hover{ background: #9eacc5}
.bg2 .ICH-item-right ul.item-datalist li.more:hover span{ background: url(../../images/xxfy/index/more-fnt-hover.png) no-repeat center center;}

.bg3 .swiper01{ float:left; width:100%; min-width: 1670px; height: 280px; margin-bottom: 70px;}

.bg3 .swiper-wrapper {
  transition-timing-function: linear !important;
}
.bg3 .swiper-container-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: linear;    /*之前是ease-out*/
	-moz-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	transition-timing-function: linear;
	/* 这里是改变其动画效果为匀速形式，不加此样式的话会造成滚动卡顿，看起来效果不平滑 */
    /* 样式做了各种浏览器的兼容 */
    transition-timing-function:linear !important;
    -webkit-transition-timing-function: linear !important;   
	  -moz-transition-timing-function: linear !important;
	  -ms-transition-timing-function: linear !important;
	  -o-transition-timing-function: linear !important;
	  transition-timing-function: linear !important;
	margin: 0 auto;
}
.bg3 .swiper01 .swiper-slide{ position: relative; width: 480px; height: 280px;}
.bg3 .swiper01 .swiper-slide .imgbox{ float: left; width: 480px; height: 280px;}
.bg3 .swiper01 .swiper-slide .cczd-cover{display:none; position: absolute; top: 0; left: 0; width: 480px; height: 280px; background: rgba(21,23,32,.9);}
.bg3 .swiper01 .swiper-slide .cczd-title{position: absolute; top: 90px; left: 150px; width: 180px; font-family: "NSimSun_Fnt"; font-size: 20px; color: #f6eddb; font-weight: 500; line-height: 28px; text-align: center;}
.bg3 .swiper01 .swiper-slide .cczd-type{ position: absolute; bottom: 64px; left: 190px; width: 100px;}
.bg3 .swiper01 .swiper-slide .cczd-type span{ display: inline-block; width: 100px; height: 40px; background: #375681; border-radius: 50px; font-family: "NSimSun_Fnt"; font-size: 16px; color: #f6eddb; font-weight: 500; letter-spacing: 1px; line-height: 40px; text-align: center;}

.bg3 .swiper01 .swiper-slide:hover .cczd-cover{ display: block;
    -webkit-animation: 900ms linear 0s fadein alternate;
    -moz-animation: 900ms linear 0s fadein alternate;
    -o-animation: 900ms linear 0s fadein alternate;
    animation: 900ms linear 0s fadein alternate;
}
.bg3 .ccr-titlebox{
    position: relative;
    float: left;
    width: 1670px;
    margin: 0 125px 35px 125px;
}
.bg3 .ccr-titlebox .titlebox-img{
    float: left;
    width: 1670px;
    height: 41px;
    background: url(../../images/xxfy/index/title-ccr.png) no-repeat center center;
    text-align: center;
    margin-bottom: 10px;
}
.bg3 .ccr-titlebox .titlebox-desc{
    float: left;
    width: 1670px;
    font-family: "NSimSun_Fnt";
    font-size: 24px;
    color: #375681;
    line-height: 50px;
    text-align: center;
}
.bg3 .ccr-titlebox a{
    position: absolute;
    top: 0;
    right: 10px;
    width: 164px;
    height: 46px;
    background: url(../../images/xxfy/index/more.png) no-repeat;
    font-family: "NSimSun_Fnt";
    font-size: 16px;
    color: #f6eddb;
    font-weight: 600;
    line-height: 46px;
    text-align: center;
}
.bg3 ul.ccr-datalist{
    float: left;
    width: 1670px;
    margin: 0 125px;
}
.bg3 ul.ccr-datalist li{
    float: left;
    width: 278px;
    height: 460px;
    background: #f6eddb;
    border-radius: 10px;
    margin-right: 20px;
    padding: 20px;
}
.bg3 ul.ccr-datalist li:last-child{ margin-right: 0;}
.bg3 ul.ccr-datalist li:hover{
    border: 5px solid #9faebf;
    background: #ffffff;
    padding: 15px;
}
.bg3 ul.ccr-datalist li .imgbox{
    float: left;
    width: 278px;
    height: 352px;
    border-radius: 5px;
    margin-bottom: 15px;
}
.bg3 ul.ccr-datalist li .namebox{
    float: left;
    width: 278px;
    font-family: "NSimSun_Fnt";
    font-size: 30px;
    color: #151820;
    font-weight: 600;
    line-height: 45px;
    border-bottom: 1px solid #d3b882;
    padding-bottom: 5px;
    margin-bottom: 12px;
}
.bg3 ul.ccr-datalist li .descbox{
    float: left;
    width: 278px;
    font-family: "NSimSun_Fnt";
    font-size: 18px;
    color: #151820;
    font-weight: 500;
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.bg3 ul.ccr-datalist li .descbox span{ margin: 0 10px;}

.bg4 .fyzp-titlebox{
    position: relative;
    float: left;
    width: 1540px;
    margin: 0 190px;
    padding: 92px 0 45px 0;
}
.bg4 .fyzp-titlebox .titlebox-img{
    float: left;
    width: 1540px;
    height: 41px;
    background: url(../../images/xxfy/index/title-fyzp.png) no-repeat center center;
    margin-bottom: 15px;
}
.bg4 .fyzp-titlebox .titlebox-desc{
    float: left;
    width: 1540px;
    font-family: "NSimSun_Fnt";
    font-size: 24px;
    color: #fefeff;
    line-height: 35px;
    text-align: center;
}
ul.fyzp-datalist{
    float: left;
    width: 1540px;
    margin: 0 190px;
}
ul.fyzp-datalist li{
    position: relative;
    float: left;
    width: 770px;
    height: 395px;
}
ul.fyzp-datalist li .imgbox{
    float: left;
    width: 770px;
    height: 395px;
}
ul.fyzp-datalist li .fyzp-cover{display:none; position: absolute; top: 0; left: 0; width: 770px; height: 395px; background: rgba(21,23,32,.9);} 
ul.fyzp-datalist li:hover .fyzp-cover{
     display: block;
    -webkit-animation: 900ms linear 0s fadein alternate;
    -moz-animation: 900ms linear 0s fadein alternate;
    -o-animation: 900ms linear 0s fadein alternate;
    animation: 900ms linear 0s fadein alternate;
}
ul.fyzp-datalist li .fyzp-title{ position: absolute; top: 0; left: 0; width: 770px; height: 395px; font-family: "NSimSun_Fnt"; font-size: 40px; color: #fff; font-weight: 600; line-height: 395px; text-align: center; }

/* 淡入 */
@-webkit-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-moz-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-ms-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}