.ti { text-indent: -999em }
.clearfix { zoom: 1 }
.clearfix:after { content: ""; display: block; clear: both }
.fl { float: left }
.fr { float: right }
.pr { position: relative }
.pa { position: absolute }
.pf { position: fixed }
.hid { display: none !important }
.hide { display: none }
@media only screen and (max-width:1080px) {
    .topbar-wrapper { display: none }
}

.footer-wrapper { overflow: auto }

.index-layout .lqs-media{
    position: absolute;
    top: .3rem;
    right: .3rem;
    z-index: 9;
    text-align: left;
}

.nav-layout .nav-item span {
    background: url('/skin/default/images/nav.png') no-repeat;
    background-size: 2.4rem 11.8rem;
}
.nav-layout .nav-works span {
    height: 0.5rem !important;
    /* width: 0.5rem; */
    background: url('/skin/default/images/works_nav_btn2.png') 0 0 /100% 100% no-repeat;
    position: absolute;
    top: 0.1rem;
}

.nav-layout {
    position: fixed;
    top: 50%;
    left: 0;
    margin-top: -2rem;
    z-index: 8;
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
    font-size: 0;
    pointer-events: none;
    z-index: 9;
}
.nav-layout.active{
    opacity: 1;
    pointer-events: auto;
}
.nav-layout .nav-item{
    display: block;
    height: .6rem;
    position: relative;
    z-index: 1;
    margin: .02rem 0;
    width: .7rem;
}
.nav-layout .nav-item span{
    width: 100%;
    height: .88rem;
    margin-top: -.14rem;
    display: inline-block;
    pointer-events: none;
}
.nav-layout .nav-index span{
    background-position: 0 0;
}
.nav-layout .nav-news span{
    background-position: 0 -1.96rem;
}
.nav-layout .nav-npc span{
    background-position: 0 -3.92rem;
}
.nav-layout .nav-info span{
    background-position: 0 -5.88rem;
}
.nav-layout .nav-media span{
    background-position: 0 -7.84rem;
}
.nav-layout .nav-feature span{
    background-position: 0 -9.8rem;
}
.nav-layout .nav-item.active,
.nav-layout .nav-item:hover{
    width: 2.26rem;
    z-index: 3;
}
.nav-layout .nav-npc.active,
.nav-layout .nav-npc:hover,
.nav-layout .nav-feature.active,
.nav-layout .nav-feature:hover{
    width: 2rem;
}
.nav-layout .nav-index.active,
.nav-layout .nav-index:hover{
    width: 1.64rem;
}

.nav-layout .nav-works:hover span,
.nav-layout .nav-works.active span{
    height: 0.68rem !important;
    background: url('/skin/default/images/works_nav_btn.png') 0 0 /100% 100% no-repeat;
    position: absolute;
    top: 0rem;
}
.nav-layout .nav-index:hover span,
.nav-layout .nav-index.active span{
    background-position: 0 -.98rem;
}
.nav-layout .nav-news:hover span,
.nav-layout .nav-news.active span{
    background-position: 0 -2.94rem;
}
.nav-layout .nav-npc:hover span,
.nav-layout .nav-npc.active span{
    background-position: 0 -4.9rem;
}
.nav-layout .nav-info:hover span,
.nav-layout .nav-info.active span{
    background-position: 0 -6.86rem;
}
.nav-layout .nav-media:hover span,
.nav-layout .nav-media.active span{
    background-position: 0 -8.82rem;
}
.nav-layout .nav-feature:hover span,
.nav-layout .nav-feature.active span{
    background-position: 0 -10.78rem;
}


.index-layout .download-part,
.index-layout .download-part .btn,
.index-layout .download-part .btn-gzh .gzh-qr{
    background: url('/skin/default/images/index.png') no-repeat;
    background-size:5.7rem 6rem;
}
.index-layout{
    position: relative;
    height: 8.4rem;
}
.index-layout .bg-part{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;

}
.index-layout .bg-part .img{
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.index-layout .bg-part .video{
    position: absolute;
    width: 100%;
    left: 50%;
    top: 0;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}
.index-layout .slogan{
    position: absolute;
    display: block;
}
.index-layout .btn-video{
    position: absolute;
    display: block;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
.index-layout .btn-video:hover{
    -webkit-transform: scale(1.1);
            transform: scale(1.1)
}
.index-layout .btn-video img{
    display: block;
    width: 100%;
    height: 100%;
}
.index-layout .download-part{
    position: absolute;
    width: 3.96rem;
    height: 2.04rem;
    background-position: 0 -3.92rem;
    top: 4.64rem;
    left: 6.7rem;
    z-index: 2;
}
.index-layout .download-part .download-img{
    display: inline-block;
    width: .84rem;
    height: .84rem;
    margin-left: .64rem;
    margin-top: .4rem;
    vertical-align: top;
}
.index-layout .download-part .btns{
    display: inline-block;
    vertical-align: top;
    /* width: 3.2rem; */
    width: 1.6rem;
    margin-left: .34rem;
    margin-top: .4rem;
}
.index-layout .download-part .btns .btn{
    display: inline-block;
    width: 1.4rem;
    height: .5rem;
    margin-right: .1rem;
    margin-bottom: .04rem;
    position: relative;
    transition: transform .2s;
}
.index-layout .download-part .btns .btn:hover{
    transform: scale(1.04);
}
.index-layout .download-part .btn-ios{
    background-position: 0 -1.2rem;
} 
.index-layout .download-part .btn-tap{
    background-position: 0 -1.8rem;
} 
.index-layout .download-part .btn-android{
    background-position: 0 0;
} 
.index-layout .download-part .btn-gzh{
    background-position: 0 -.6rem;
} 

.index-layout .download-part .btn-gzh .gzh-qr{
    position: absolute;
    width: 1.2rem;
    height: 1.42rem;
    background-position: 0 -2.4rem;
    right: -1.24rem;
    bottom: -.28rem;
    display: none;
}
.index-layout .download-part .btn-gzh .gzh-qr img{
    display: block;
    width: .8rem;
    height: .8rem;
    margin: .2rem auto 0;
}
.index-layout .download-part .btn-gzh:hover .gzh-qr{
    display: block;
}

.news-layout .icon1,
.news-pagination .swiper-pagination-bullet,
.works-draw-pagination .swiper-pagination-bullet,
.works-video-pagination .swiper-pagination-bullet,
.works-strategy-pagination .swiper-pagination-bullet,
.news-layout .news-type .btn-type,
.news-layout .type-list a i{
    background: url('/skin/default/images/news2.png') no-repeat;
    background-size: 2.6rem 10rem;
}
.news-layout{
    position: relative;
    z-index: 2;
    height: 8.1rem;
}
.news-layout .news-bg{
    height: 9.86rem;
    background: url('/skin/default/images/news_bg.png') 0 0 /100% 100%;
    position: absolute;
    left: 0;
    width: 100%;
    top: -1.1rem;
    overflow: hidden;
}
.news-layout .news-bg .move-box{
    position: absolute;
    height: 10rem;
    width: 20rem;
    top: .58rem;
    left: -.2rem;
    overflow: hidden;
    -webkit-transform: rotateZ(-1.4deg);
            transform: rotateZ(-1.4deg);
}
.news-layout .news-bg .move-icons{
    position: absolute;
    height: 11rem;
    width: 20rem;
    top: -1rem;
    left: -.2rem;
    -webkit-transform: rotateZ(6deg);
            transform: rotateZ(6deg);
    background: url('/skin/default/images/move1.png');
    background-size: 3.8rem 3.52rem;
    opacity: .2;
    -webkit-animation: move1 5s linear infinite;
            animation: move1 5s linear infinite;
}
@-webkit-keyframes move1 {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 3.8rem -3.52rem;
    }
}
@keyframes move1 {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 3.8rem -3.52rem;
    }
}
.news-layout .icon1{
    position: absolute;
    width: 2.54rem;
    height: .56rem;
    background-position: 0 -2.36rem;
    right: 0;
    top: 7.64rem;
}

.news-layout .news-content{
    position: relative;
    z-index: 3;
}
.news-layout .news-title{
    width: 3.96rem;
    height: 1.34rem;
    margin: 0 auto;
    background: url('/skin/default/images/news_title.png') 0 0 /100% 100%;  
}
.news-layout  .news-part{
    position: relative;
    width: 12.04rem;
    height: 3.8rem;
    background: url('/skin/default/images/news_bg2.png') 0 0 /100% 100%; 
    margin: 1.1rem auto 0;
}
.news-layout .icon2{
    width: 1.62rem;
    height: 2.26rem;
    position: absolute;
    z-index: 4;
    top: -1.3rem;
    left: 11.5rem;
    background: url('/skin/default/images/icon2.png') 0 0 /100% 100%;  
}
.news-layout .news-left {
    width: 6.1rem;
    position: relative;
    margin-left: .1rem;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}
.news-layout .news-swiper {
    width: 100%;
    height: 100%;
    width: 6.1rem;
    height: 3.54rem;
    margin-top: .1rem;
}

.news-layout .news-swiper a {
    width: 100%;
    height: 100%;
    display: block;
}

.news-layout .news-swiper a img {
    width: 100%;
    height: 100%;
    display: block;
}

.news-layout .news-pagination {
    position: absolute;
    bottom: .28rem;
    z-index: 2;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.news-pagination .swiper-pagination-bullet {
    display: inline-block;
    width: .24rem;
    height: .24rem;
    opacity: 1;
    margin: 0 .06rem;
    background-position: 0 0;
}

.news-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-position: 0 -.34rem;
}

.news-layout .news-type {
    font-size: 0;
    text-align: left;
    overflow: hidden;
    position: absolute;
    top: -.14rem;
    left: 6.34rem;
}

.news-layout .news-type .pre{
    position: absolute;
    left: 0;
    width: 5.3rem;
    bottom: 0;
    height: .14rem;
    border-top-right-radius: .3rem;
    background: #fff;

}
.news-layout .news-type .btn-type {
    display: inline-block;
    width:1.06rem;
    height:.62rem;
    vertical-align: top;
    text-align: center;
}
.news-layout .news-type .btn-all{
    background-position: 0 -4.42rem;
}
.news-layout .news-type .btn-news{
    background-position: 0 -5.82rem;
}
.news-layout .news-type .btn-notice{
    background-position: 0 -7.22rem;
}
.news-layout .news-type .btn-activity{
    background-position: 0 -3.02rem;
}
.news-layout .news-type .btn-strategy{
    background-position: 0 -8.62rem;
}

.news-layout .news-type .btn-all.active{
    background-position: 0 -5.12rem;
}
.news-layout .news-type .btn-news.active{
    background-position: 0 -6.52rem;
}
.news-layout .news-type .btn-notice.active{
    background-position: 0 -7.92rem;
}
.news-layout .news-type .btn-activity.active{
    background-position: 0 -3.72rem;
}
.news-layout .news-type .btn-strategy.active{
    background-position: 0 -9.32rem;
}
.news-layout .news-more {
    width: 1.2rem;
    height: .5rem;
    /* display: block; */
    display: none;
    z-index: 1;
    position: absolute;
    top: 3.24rem;
    left: 10.76rem;
}
.news-layout .news-more.active{
    display: block;
}
.news-layout .news-list{
    margin-left: .2rem;
    width: 4.8rem;
    display: inline-block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    vertical-align: top;
    margin-top: .46rem;

}
.news-layout .news-list-swiper {
    width: 4.8rem;
    height: 3rem;

}

.news-layout .type-list {
    height: 3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.news-layout .type-list .none{
    height: .3rem;
}
.news-layout .type-list .top{
    color: #000000;
    font-size: .24rem;
    font-weight: bold;
    /* border-bottom: 1px solid #BDBDBD; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: .6rem;
    height: .6rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-right: .1rem;
    display: block;
    width: 100%;
}
.news-layout .type-list a {
    line-height: 0.56rem;
    height: .56rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    font-size: .18rem;
}
.news-layout .type-list a+a{
    border-top: 1px solid #BDBDBD;
}
.news-layout .type-list a i{
    width: .66rem;
    height: .32rem;
    line-height: .32rem;
    display: inline-block;
    text-align: center;
    color: #fff;
    margin-right: .16rem;
    font-size: .18rem;

}
.news-layout .type-list a .type1{
    background-position: 0 -.68rem;
    color: #000;
}
.news-layout .type-list a .type2{
    background-position: 0 -1.1rem;
}
.news-layout .type-list a .type3{
    background-position: 0 -1.52rem;
}
.news-layout .type-list a .type4{
    background-position: 0 -1.94rem;
}


.news-layout .type-list a p {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.news-layout .type-list a span {
    width: .9rem;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #898989;
}

.npc-layout .npc-about .back,
.npc-layout .attribute1-prev,
.npc-layout .attribute1-next,
.npc-layout .attribute2-prev,
.npc-layout .attribute2-next,
.npc-layout .attribute3-prev,
.npc-layout .attribute3-next,
.npc-layout .attribute4-prev,
.npc-layout .attribute4-next,
.npc-layout .attribute5-prev,
.npc-layout .attribute5-next{
    background: url('/skin/default/images/npc3.png') no-repeat;
    background-size: 0.7rem 10rem;
}
.npc-layout{
    position: relative;
    z-index: 3;
    height: 9.97rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: url('../images/npc3/npc_bg.png') 0 0 /100% 100%; 
    padding-top: .5rem;
}
.npc-layout .npc-title{
    width: 3.36rem;
    height: 1.18rem;
    background: url('../images/npc3/npc_title.png') 0 0 /100% 100%; 
    margin: 0 auto .3rem;
    position: relative;
    z-index: 4;
}
.npc-layout .npc-list{
    margin-top: -.8rem;
    position: relative;
    z-index: 3;
    font-size: 0;
    overflow: hidden;
}
.npc-layout .list-con{
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    position: relative;
}
.npc-layout .item-npc{
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 8.56rem;
    cursor: pointer;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0
}
.npc-layout .item-npc.close{
    width: 0;
}
.npc-layout .item-npc .img{
    position: absolute;
    top: 0;
    display: block;
    width: 7rem;
    left: 50%;
    margin-left: -3.5rem;
    pointer-events: none;
}
.npc-layout .item-npc:hover{
    z-index: 2;
}
.npc-layout .item-npc .img2{
    display: none;
}
.npc-layout .item-npc:hover .img2{
    display: block;
}
.npc-layout .item-npc .name{
    position: absolute;
    height: 1rem;
}
.npc-layout .item-npc .cont{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.npc-layout .item-npc1 .name{
    bottom: .4rem;
    right: 0.3rem;
}
.npc-layout .item-npc2 .name{
    bottom: .5rem;
    right: -.4rem;
}
.npc-layout .item-npc3 .name{
    bottom: .6rem;
    right: -.1rem;
}
.npc-layout .item-npc4 .name{
    bottom: .7rem;
    right: -.42rem;
}
.npc-layout .item-npc5 .name{
    bottom: .8rem;
    right: .1rem;
}


.npc-layout .npc-about{
    position: absolute;
    top: 0;
    width: 14rem;
    z-index: 2;
    padding-top: 1.4rem;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
}
.npc-layout .npc-about.show{
    opacity: 1;
    pointer-events: auto;
}

.npc-layout .npc-about .npc-left{
    width: 3.84rem;
    height: 8.56rem;
    position: relative;
    z-index: 2;
}

.npc-layout .npc-left .attribute1,
.npc-layout .npc-left .attribute2,
.npc-layout .npc-left .attribute3,
.npc-layout .npc-left .attribute4,
.npc-layout .npc-left .attribute5{
    display: none;
}
.npc-layout .npc-left .attribute1.active,
.npc-layout .npc-left .attribute2.active,
.npc-layout .npc-left .attribute3.active,
.npc-layout .npc-left .attribute4.active,
.npc-layout .npc-left .attribute5.active{
    display: block;
}
.npc-layout .npc-left .attribute1 .tab,
.npc-layout .npc-left .attribute2 .tab,
.npc-layout .npc-left .attribute3 .tab,
.npc-layout .npc-left .attribute4 .tab,
.npc-layout .npc-left .attribute5 .tab{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transform: translateX(-3.84rem);
            transform: translateX(-3.84rem);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
.npc-layout .npc-about .attribute1 .tab img,
.npc-layout .npc-about .attribute2 .tab img,
.npc-layout .npc-about .attribute3 .tab img,
.npc-layout .npc-about .attribute4 .tab img,
.npc-layout .npc-about .attribute5 .tab img{
    position: absolute;
    top: 0;
    display: block;
    width: 7rem;
    left: 50%;
    margin-left: -4rem;
    pointer-events: none;
    
}
.npc-layout .npc-about .attribute1 .tab.active,
.npc-layout .npc-about .attribute2 .tab.active,
.npc-layout .npc-about .attribute3 .tab.active,
.npc-layout .npc-about .attribute4 .tab.active,
.npc-layout .npc-about .attribute5 .tab.active{
    -webkit-transform: translateX(0);
            transform: translateX(0);
    z-index: 2;
}

.npc-layout .npc-about .back{
    z-index: 3;
}
.npc-layout .npc-about.active .back{
    display: block;
}
.npc-layout .npc-about .back1{
    position: absolute;
    width: .47rem;
    height: 1.14rem;
    right: .64rem;
    top: 50%;
    margin-top: -.57rem;
    z-index: 2;
    display: block;
    background-position: 0 -2.48rem;
}
.npc-layout .npc-about .back1:hover{
    background-position: 0 -3.72rem;
}
.npc-layout .npc-about .back2,
.npc-layout .npc-about .back4{
    position: absolute;
    width: .47rem;
    height: 1.14rem;
    top: 50%;
    margin-top: -.57rem;
    background-position: 0 -4.96rem;
}
.npc-layout .npc-about .back2{
    right: .53rem;
}
.npc-layout .npc-about .back4{
    right: .38rem;
}
.npc-layout .npc-about .back2:hover,
.npc-layout .npc-about .back4:hover{
    background-position: 0 -6.2rem;
}
.npc-layout .npc-about .back3,
.npc-layout .npc-about .back5{
    position: absolute;
    width: .42rem;
    height: 1.14rem;
    top: 50%;
    margin-top: -.57rem;
    background-position: 0 -7.44rem;
}
.npc-layout .npc-about .back3{
    right: 0.38rem;
}
.npc-layout .npc-about .back5{
    right: 0.06rem;
}
.npc-layout .npc-about .back3:hover,
.npc-layout .npc-about .back5:hover{
    background-position: 0 -8.68rem;
}

.npc-layout .npc-about .attribute1 .tab1 .back,
.npc-layout .npc-about .attribute2 .tab1 .back,
.npc-layout .npc-about .attribute3 .tab1 .back,
.npc-layout .npc-about .attribute4 .tab1 .back,
.npc-layout .npc-about .attribute5 .tab1 .back{
    right: .6rem;
}
.npc-layout .npc-about .attribute1 .tab2 .back,
.npc-layout .npc-about .attribute2 .tab2 .back,
.npc-layout .npc-about .attribute3 .tab2 .back,
.npc-layout .npc-about .attribute4 .tab2 .back,
.npc-layout .npc-about .attribute5 .tab2 .back{
    right: .54rem;
}
.npc-layout .npc-about .attribute1 .tab3 .back,
.npc-layout .npc-about .attribute2 .tab3 .back,
.npc-layout .npc-about .attribute3 .tab3 .back,
.npc-layout .npc-about .attribute4 .tab3 .back,
.npc-layout .npc-about .attribute5 .tab3 .back{
    right: .46rem;
}
.npc-layout .npc-about .attribute1 .tab4 .back,
.npc-layout .npc-about .attribute2 .tab4 .back,
.npc-layout .npc-about .attribute3 .tab4 .back,
.npc-layout .npc-about .attribute4 .tab4 .back,
.npc-layout .npc-about .attribute5 .tab4 .back{
    right: .4rem;
}
.npc-layout .npc-about .attribute1 .tab5 .back,
.npc-layout .npc-about .attribute2 .tab5 .back,
.npc-layout .npc-about .attribute3 .tab5 .back,
.npc-layout .npc-about .attribute4 .tab5 .back,
.npc-layout .npc-about .attribute5 .tab5 .back{
    right: .44rem;
}

.npc-layout .npc-about .npc-right{
    width: 14rem;
    height: 10rem;
    margin-top: -1.2rem;
    position: absolute;
    left: 3rem;
    top: 3rem;
}
.npc-layout .npc-about .npc-right .npc-attr{
    display: none;
}
.npc-layout .npc-about .npc-right .npc-attr.active{
    display: block;
}

.npc-layout .npc-swiper,
.npc-layout .attribute1-swiper,
.npc-layout .attribute2-swiper,
.npc-layout .attribute3-swiper,
.npc-layout .attribute4-swiper,
.npc-layout .attribute5-swiper{
    width: 14rem;
    height: 11rem;
    margin-top: -1.2rem;
}
.npc-layout .npc-swiper .npc-box,
.npc-layout .attribute1-swiper .npc-box,
.npc-layout .attribute2-swiper .npc-box,
.npc-layout .attribute3-swiper .npc-box,
.npc-layout .attribute4-swiper .npc-box,
.npc-layout .attribute5-swiper .npc-box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.npc-layout .npc-swiper .swiper-slide .npc-box,
.npc-layout .attribute1-swiper .swiper-slide .npc-box,
.npc-layout .attribute2-swiper .swiper-slide .npc-box,
.npc-layout .attribute3-swiper .swiper-slide .npc-box,
.npc-layout .attribute4-swiper .swiper-slide .npc-box,
.npc-layout .attribute5-swiper .swiper-slide .npc-box {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.npc-layout .npc-swiper .swiper-slide-active .npc-box,
.npc-layout .attribute1-swiper .swiper-slide-active .npc-box,
.npc-layout .attribute2-swiper .swiper-slide-active .npc-box,
.npc-layout .attribute3-swiper .swiper-slide-active .npc-box,
.npc-layout .attribute4-swiper .swiper-slide-active .npc-box,
.npc-layout .attribute5-swiper .swiper-slide-active .npc-box {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.npc-layout .npc-swiper .swiper-slide-active .npc-box .left,
.npc-layout .attribute1-swiper .swiper-slide-active .npc-box .left,
.npc-layout .attribute2-swiper .swiper-slide-active .npc-box .left,
.npc-layout .attribute3-swiper .swiper-slide-active .npc-box .left,
.npc-layout .attribute4-swiper .swiper-slide-active .npc-box .left,
.npc-layout .attribute5-swiper .swiper-slide-active .npc-box .left {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.npc-layout .npc-swiper .swiper-slide-active .npc-box .left.active,
.npc-layout .attribute1-swiper .swiper-slide-active .npc-box .left.active,
.npc-layout .attribute2-swiper .swiper-slide-active .npc-box .left.active,
.npc-layout .attribute3-swiper .swiper-slide-active .npc-box .left.active,
.npc-layout .attribute4-swiper .swiper-slide-active .npc-box .left.active,
.npc-layout .attribute5-swiper .swiper-slide-active .npc-box .left.active {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.npc-layout .npc-swiper .left,
.npc-layout .attribute1-swiper .left,
.npc-layout .attribute2-swiper .left,
.npc-layout .attribute3-swiper .left,
.npc-layout .attribute4-swiper .left,
.npc-layout .attribute5-swiper .left{
    position: absolute;
    display: block;
    width: 8.5rem;
    left: .4rem;
    top: .6rem;
    z-index: 2;
}
.npc-layout .attribute1-swiper .pattern-box,
.npc-layout .attribute2-swiper .pattern-box,
.npc-layout .attribute3-swiper .pattern-box,
.npc-layout .attribute4-swiper .pattern-box,
.npc-layout .attribute5-swiper .pattern-box{
    position: absolute;
    display: block;
    width: 3.68rem;
    left: 2.1rem;
    top: 8.3rem;
    z-index: 2;
    display: flex;
    justify-content: center;
}
.npc-layout .attribute1-swiper .pattern,
.npc-layout .attribute2-swiper .pattern,
.npc-layout .attribute3-swiper .pattern,
.npc-layout .attribute4-swiper .pattern,
.npc-layout .attribute5-swiper .pattern{
    position: relative;
    -webkit-transition: all .3s;
    transition: all .3s;
    cursor: pointer;
    margin-right: 0.12rem;
}
.npc-layout .attribute1-swiper .pattern:hover,
.npc-layout .attribute2-swiper .pattern:hover,
.npc-layout .attribute3-swiper .pattern:hover,
.npc-layout .attribute4-swiper .pattern:hover,
.npc-layout .attribute5-swiper .pattern:hover,
.npc-layout .attribute1-swiper .pattern.active,
.npc-layout .attribute2-swiper .pattern.active,
.npc-layout .attribute3-swiper .pattern.active,
.npc-layout .attribute4-swiper .pattern.active,
.npc-layout .attribute5-swiper .pattern.active{
    transform: translateY(-0.1rem);
}
.npc-layout .attribute1-swiper .pattern:hover img,
.npc-layout .attribute2-swiper .pattern:hover img,
.npc-layout .attribute3-swiper .pattern:hover img,
.npc-layout .attribute4-swiper .pattern:hover img,
.npc-layout .attribute5-swiper .pattern:hover img,
.npc-layout .attribute1-swiper .pattern.active img,
.npc-layout .attribute2-swiper .pattern.active img,
.npc-layout .attribute3-swiper .pattern.active img,
.npc-layout .attribute4-swiper .pattern.active img,
.npc-layout .attribute5-swiper .pattern.active img{
    transition: all .3s;
    filter: brightness(1);
}
.npc-layout .attribute1-swiper .pattern img,
.npc-layout .attribute2-swiper .pattern img,
.npc-layout .attribute3-swiper .pattern img,
.npc-layout .attribute4-swiper .pattern img,
.npc-layout .attribute5-swiper .pattern img{
    display: block;
    width: 1.11rem;
    height: 1.04rem;
    filter: brightness(0.5);
}
.npc-layout .npc-swiper .right,
.npc-layout .attribute1-swiper .right,
.npc-layout .attribute2-swiper .right,
.npc-layout .attribute3-swiper .right,
.npc-layout .attribute4-swiper .right,
.npc-layout .attribute5-swiper .right{
    position: absolute;
    left: 7.8rem;
    padding-top: 1.6rem;
    z-index: 3;
}
.npc-layout .npc-swiper .right .des,
.npc-layout .attribute1-swiper .right .des,
.npc-layout .attribute2-swiper .right .des,
.npc-layout .attribute3-swiper .right .des,
.npc-layout .attribute4-swiper .right .des,
.npc-layout .attribute5-swiper .right .des{
    display: block;
    height: 3.2rem;
}
.npc-layout .npc-swiper .right .text,
.npc-layout .attribute1-swiper .right .text,
.npc-layout .attribute2-swiper .right .text,
.npc-layout .attribute3-swiper .right .text,
.npc-layout .attribute4-swiper .right .text,
.npc-layout .attribute5-swiper .right .text{
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    font-size: .32rem;
    line-height: 2;
    -webkit-transform: scale(.5);
            transform: scale(.5);
    width: 10rem;
    margin-top: .2rem;
}
.npc-layout .attribute1-prev,
.npc-layout .attribute1-next,
.npc-layout .attribute2-prev,
.npc-layout .attribute2-next,
.npc-layout .attribute3-prev,
.npc-layout .attribute3-next,
.npc-layout .attribute4-prev,
.npc-layout .attribute4-next,
.npc-layout .attribute5-prev,
.npc-layout .attribute5-next {
    width: .56rem;
    height: .52rem;
    position: absolute;
    top: 3.8rem;
    z-index: 3;
    cursor: pointer;
}
.npc-layout .attribute1-prev,
.npc-layout .attribute2-prev,
.npc-layout .attribute3-prev,
.npc-layout .attribute4-prev,
.npc-layout .attribute5-prev {
    left: 1.3rem;
    background-position: 0 -1.24rem;
}
.npc-layout .attribute1-next,
.npc-layout .attribute2-next,
.npc-layout .attribute3-next,
.npc-layout .attribute4-next,
.npc-layout .attribute5-next {
    right: 0;
    background-position: 0 0;
}
.npc-layout .attribute1-prev:hover,
.npc-layout .attribute2-prev:hover,
.npc-layout .attribute3-prev:hover,
.npc-layout .attribute4-prev:hover,
.npc-layout .attribute5-prev:hover{
    background-position: 0 -1.86rem;
}

.npc-layout .attribute1-next:hover,
.npc-layout .attribute2-next:hover,
.npc-layout .attribute3-next:hover,
.npc-layout .attribute4-next:hover,
.npc-layout .attribute5-next:hover{
    background-position: 0 -.62rem; 
}


.info-layout{
    position: relative;
    z-index: 2;
    height: 12.44rem;
    overflow: hidden;
}
.info-layout .info-bg{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 12.44rem;
    z-index: 2;
    background: url('../images/info4/info_bg.png') 0 0 /100% 100%;
}
.works-layout{
    position: relative;
    z-index: 2;
    height: 9.1rem;
    overflow: hidden;
}
.works-layout .works-bg{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 9.1rem;
    z-index: 2;
    background: url('../images/info4/works_bg.png') 0 0 /100% 100%;
}
.works-layout .move-box1{
    position: absolute;
    height: 4.2rem;
    width: 11.2rem;
    top: -.2rem;
    right: -.1rem;
    overflow: hidden;
    -webkit-transform: rotateZ(-1.4deg);
            transform: rotateZ(-1.4deg);
    background: #569dff;
}
.works-layout .move-box1 .move-icons{
    position: absolute;
    height: 4.1rem;
    width: 11.2rem;
    top: -.4rem;
    right: -.1rem;
    -webkit-transform: rotateZ(6deg);
            transform: rotateZ(6deg);
    background: url('/skin/default/images/move1.png');
    background-size: 3.8rem 3.52rem;
    opacity: .1;
    -webkit-animation: move1 5s linear infinite;
            animation: move1 5s linear infinite;
}
.info-layout .move-box2{
    position: absolute;
    height: 8rem;
    width: 20rem;
    top: 5rem;
    left: -.1rem;
    overflow: hidden;
    -webkit-transform: rotateZ(-1.4deg);
            transform: rotateZ(-1.4deg);
    background: #569dff;
}
.info-layout .move-box2 .move-icons{
    position: absolute;
    height: 7.4rem;
    width: 20rem;
    top: .8rem;
    left: -.3rem;
    -webkit-transform: rotateZ(6deg);
            transform: rotateZ(6deg);
    background: url('/skin/default/images/move1.png');
    background-size: 3.8rem 3.52rem;
    opacity: .1;
    -webkit-animation: move1 5s linear infinite;
            animation: move1 5s linear infinite;
}
.works-layout .works-con{
    z-index: 2;
    width: 13.86rem;
    margin: 0 auto;
    position: absolute;
    top: 1.16rem;
    left: 50%;
    transform: translateX(-50%);
}
.works-layout .works-con .works-title{
    width: 4.05rem;
    height: 1.16rem;
    background: url('../images/info4/works_title.png') 0 0 /100% 100%;
    margin: 0 auto;
}
.works-layout .works-con .works-main{
    width: 13.86rem;
    height: 4.82rem;
    margin: 0 auto;
    margin-top: 0.76rem;
}
.works-layout .works-con .works-main .works-switch{
    width: 5.35rem;
    height: 0.79rem;
    display: flex;
    justify-content: space-between;
}
.works-layout .works-con .works-main .works-switch .works-strategy,
.works-layout .works-con .works-main .works-switch .works-video,
.works-layout .works-con .works-main .works-switch .works-draw
{
    width: 1.73rem;
    height: 0.79rem;
    background: url('../images/info4/works_label_bg1.png') 0 0 /100% 100%;
    cursor: pointer;
}
.works-layout .works-con .works-main .works-switch .works-strategy p,
.works-layout .works-con .works-main .works-switch .works-video p,
.works-layout .works-con .works-main .works-switch .works-draw p
{
    font-size: 0.26rem;
    font-style: italic;
    font-weight: bold;
    margin: 0.18rem;
    text-align: center;
    pointer-events: none;
}
.works-layout .works-con .works-main .works-switch .works-strategy.active,
.works-layout .works-con .works-main .works-switch .works-video.active,
.works-layout .works-con .works-main .works-switch .works-draw.active
{
    width: 1.73rem;
    height: 0.79rem;
    background: url('../images/info4/works_label_bg2.png') 0 0 /100% 100%;
}
.works-layout .works-con .works-main .works-more{
    width: 1.23rem;
    height: 0.73rem;
    background: url('../images/info4/works_label_more.png') 0 0 /100% 100%;
    position: absolute;
    top: 1.94rem;
    right: 0;
    cursor: pointer;
}
.works-layout .works-con .works-main .works-switch-con{
    width: 13.86rem;
    height: 4.30rem;
    background: url('../images/info4/works_con_bg.png') 0 0 /100% 100%;
    margin: 0 auto;
    margin-top: -0.27rem;
    position: absolute;
    z-index: 1;
}
.works-layout .works-con .works-main .works-switch-con .works-box{
    display: none;
}
.works-layout .works-con .works-main .works-switch-con .works-box.active{
    display: block;
}
.works-layout .works-con .works-main .works-switch-con .draw-box,
.works-layout .works-con .works-main .works-switch-con .video-box{
    width: 13.48rem;
    height: 3.85rem;
    margin: 0 auto;
    margin-top: 0.22rem;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box{
    width: 13.37rem;
    height: 3.60rem;
    margin: 0 auto;
    margin-top: 0.35rem;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide,
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper,
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper,
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide ul{
    width: 13.37rem;
    height: 3.60rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide ul li{
    width: 6.56rem;
    height: 1.69rem;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border{
    width: 6.56rem;
    height: 1.69rem;
    background: url('../images/info4/works_centent_border.png') 0 0 /100% 100%;
    position: relative;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img{
    width: 6.75rem;
    height: 3.85rem;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img img,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li img{
    transition: all 0.3s ease;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img:hover img{
    transform: scale(1.2);
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li:hover img{
    transform: scale(1.2);
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul{
    width: 6.57rem;
    height: 3.85rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li{
    width: 3.21rem;
    height: 1.87rem;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li a,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li img,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img a,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img img,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li a,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li img,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img a,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img img,
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide ul li a{
    width: 100%;
    height: 100%;
    display: block;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border .img-box{
    width: 2.7rem;
    height: 1.52rem;
    position: absolute;
    top: 0.08rem;
    left: 0.08rem;
    border-radius: 0.13rem;
    overflow: hidden;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border .img-box img{
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 0.13rem;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border img{
    transition: all 0.3s ease;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border:hover img{
    transform: scale(1.2);
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border .intro-text{
    width: 3.65rem;
    height: 1.57rem;
    display: block;
    position: absolute;
    top: 0.06rem;
    right: 0.06rem;
    padding: 0.14rem 0.14rem 0 0.26rem;
    box-sizing: border-box;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border .intro-text .icon{
    width: 0.1rem;
    height: 0.1rem;
    background: url('../images/info4/works_centent_icon.png') 0 0 /100% 100%;
    position: absolute;
    top: 0.28rem;
    left: 0.11rem;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border .intro-text .text .title{
    font-size: 0.26rem;
    font-weight: bold;
    line-height: 1.4;
}
.works-layout .works-con .works-main .works-switch-con .strategy-box .works-strategy-swiper .swiper-wrapper .swiper-slide .bg-border .intro-text .text p{
    font-size: 0.18rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li .cont,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img .cont,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont{
    position: relative;
    overflow: hidden;
    border-radius: 0.2rem;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show{
    width: 100%;
    height: 100%;
    border-radius: 0.18rem;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show{
    width: 100%;
    height: 100%;
    border-radius: 0.18rem;
    position: absolute;
    top: 0;
    left: 0;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show .bg,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show .bg{
    width: 100%;
    height: 0.4rem;
    background-color: rgba(0,0,0, 0.5);
    border-radius: 0 0 0.18rem 0.18rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show .bg,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show .bg{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.5);
    border-radius: 0.18rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show .bg .play-icon,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show .bg .play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
}
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show .bg .text,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show .bg .text{
    display: none;
}
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show .text,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show .text{
    width: 100%;
    height: 0.4rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show .bg .des,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show .bg .des,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont .intro-show .bg .des,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont .intro-show .bg .des{
    color: #fff;
    vertical-align: middle;
    line-height: 0.4rem;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .16rem;
    margin-left: 0.1rem;
}
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide ul li .cont:hover .intro-show,
.works-layout .works-con .works-main .works-switch-con .draw-box .works-draw-swiper .swiper-wrapper .swiper-slide .big-img .cont:hover .intro-show{
    display: block;
}
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont:hover .intro-show .text,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont:hover .intro-show .text{
    display: block;
}
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont:hover .intro-show .bg,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont:hover .intro-show .bg{
    display: block;
    height: 0.4rem;
    border-radius: 0 0 0.18rem 0.18rem;
}
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide ul li .cont:hover .intro-show .play-icon,
.works-layout .works-con .works-main .works-switch-con .video-box .works-video-swiper .swiper-wrapper .swiper-slide .big-img .cont:hover .intro-show .play-icon{
    display: none;
}
.works-con .works-draw-pagination,
.works-con .works-video-pagination,
.works-con .works-strategy-pagination {
    position: absolute;
    bottom: -.59rem;
    z-index: 2;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}

.works-draw-pagination .swiper-pagination-bullet,
.works-video-pagination .swiper-pagination-bullet,
.works-strategy-pagination .swiper-pagination-bullet {
    display: inline-block;
    width: .24rem;
    height: .24rem;
    opacity: 1;
    margin: 0 .06rem;
    background-position: 0 0;
}

.works-draw-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.works-video-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.works-strategy-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-position: 0 -.34rem;
}


.info-layout .info-con{
    /* position: relative; */
    z-index: 2;
    padding-top: 1rem;
    width: 14rem;
    margin: 0 auto;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}
.info-layout .info-title{
    width: 4.08rem;
    height: 1.2rem;
    background: url('../images/info4/info_title.png') 0 0 /100% 100%;
    margin: 0 auto;
}
.info-layout .info-swiper{
    width: 13rem;
    height: 10rem;
    margin-top: -1rem;
}
.info-layout .info-swiper .title{
    display: block;
    height: 1.2rem;
    margin: 0 auto;
}
.info-layout .info-swiper .left{
    width: 4.48rem;
    height: 7.56rem;
    position: absolute;
    background: url('../images/info4/left_bg.png') 0 0 /100% 100%;
    top: 1.3rem;
    left: .5rem;
    cursor: pointer;
}
.info-layout .info-swiper .left img{
    width: 4.04rem;
    height: 7.16rem;
    position: absolute;
    top: .22rem;
    left: .18rem;
    border-radius: .2rem;
}
.info-layout .info-swiper .left .play{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.6rem;
    margin-top: -.5rem;
}
.info-layout .info-swiper .right{
    position: absolute;
    left: 5.24rem;
    top: 0;
}
.info-layout .info-swiper .right img{
    display: block;
    height: 4rem;
    margin-left: -.7rem;
}
.info-layout .info-swiper .right .text{
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    font-size: .32rem;
    line-height: 2;
    -webkit-transform: scale(.5);
            transform: scale(.5);
    margin-top: -.4rem;
    width: 14rem;
}
.info-layout .info-prev,
.info-layout .info-next {
    position: absolute;
    top: 8.4rem;
    z-index: 3;
    
}
.info-layout .info-prev {
    left: 0;
}

.info-layout .info-next {
    right: 0;
}

.info-layout .info-control{
    width: 7.54rem;
    height: 2.02rem;
    background: #fff;
    border-radius: .2rem;
    position: absolute;
    top: 7.7rem;
    left: 5.7rem;
    overflow: hidden;
    z-index: 5;
}
.info-layout .info-control .info-pagination{
    width: 7.32rem;
    height: 1.8rem;
    position: absolute;
    border-radius: .2rem;
    top: .1rem;
    left: .1rem;
}
.info-layout .info-pagination .swiper-slide {
    width: 2.44rem;
    height: 100%;
    position: relative;
}
.info-layout .info-pagination .swiper-slide .item{
    /* position: absolute; */
    /* height: 100%; */
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    z-index: 2;
    /* top: 0; */
}
.info-layout .info-pagination .swiper-slide .item img{
    height: 100%;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
.info-layout .info-pagination .swiper-slide .item .cont{
    position: absolute;
    height: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 2.42rem;
    opacity: .6;
}
.info-layout .info-pagination .swiper-slide .cont{
    background: url('/skin/default/images/info4/mask1.png?v=qwe') 0 0 /100% 100%;
}
/* .info-layout .info-pagination .swiper-slide.type2 .cont{
    background: url('/skin/default/images/info4/mask2.png') 0 0 /100% 100%;
}
.info-layout .info-pagination .swiper-slide.type3 .cont{
    background: url('/skin/default/images/info4/mask3.png') 0 0 /100% 100%;
}
.info-layout .info-pagination .swiper-slide.type4 .cont{
    background: url('/skin/default/images/info4/mask4.png') 0 0 /100% 100%;
}
.info-layout .info-pagination .swiper-slide.type5 .cont{
    background: url('/skin/default/images/info4/mask5.png') 0 0 /100% 100%;
}
.info-layout .info-pagination .swiper-slide.type6 .cont{
    background: url('/skin/default/images/info4/mask6.png') 0 0 /100% 100%;
}
.info-layout .info-pagination .swiper-slide.type7 .cont{
    background: url('/skin/default/images/info4/mask7.png') 0 0 /100% 100%;
}
.info-layout .info-pagination .swiper-slide.type8 .cont{
    background: url('/skin/default/images/info4/mask8.png') 0 0 /100% 100%;
} */

.info-layout .info-pagination .swiper-slide.swiper-slide-thumb-active .cont{
    opacity: 0;
}


.media-lists .type2-list .item .icon,
.media-layout .media-more,
.media-layout .video-swiper .swiper-slide .play,
.media-lists .type2-list .item .text{
    background: url('/skin/default/images/media5.png') no-repeat;
    background-size: 4.8rem 5.6rem;
}


.media-layout{
    position: relative;
    z-index: 3;
    height: 9.3rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-top: .36rem;
}
.media-layout .media-bg{
    position: absolute;
    width: 100%;
    top: -1.7rem;
    height: 11.8rem;
    background: url('../images/media5/media_bg.png') 0 0 /100% 100%; 
}
.media-layout .media-title{
    width: 3.98rem;
    height: 1.06rem;
    background: url('../images/media5/media_title.png') 0 0 /100% 100%; 
    margin: 0 auto .3rem;
    position: relative;
    z-index: 2;
}
.media-layout .media-lists{
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;

    font-size: 0;
}
.media-layout .media-item{
    position: relative;
    z-index: 1;
}
.media-layout .media-item.active{
    z-index: 2;
}
.media-layout .media-item .btn-tab{
    position: relative;
    display: inline-block;
    width: 1.8rem;
    height: 5.5rem;
    vertical-align: top;
    z-index: 2;
}
.media-layout .media-item .btn-tab span{
    width: 4.1rem;
    height: 5.9rem;
    display: block;
    left: -1.2rem;
    position: absolute;
    pointer-events: none;
}
.media-layout .video-item{
    margin-right: .1rem;
}
.media-layout .video-item .btn-tab span{
    background: url('../images/media5/video1.png') 0 0 /100% 100%; 
}
.media-layout .video-item.active .btn-tab span{
    background: url('../images/media5/video2.png') 0 0 /100% 100%; 
}
.media-layout .show-right{
    width: 0;
    height: 100%;
    display: inline-block;
    -webkit-transition: all .3s;
    transition: all .3s;
    vertical-align: top;
}
.media-layout .video-list{
    position: absolute;
    top: .06rem;
    left: 1.4rem;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 0;
    height: 100%;
    z-index: 1;
}
.media-layout .video-show{
    width: 9.08rem;
    height: 5.32rem;
    background: url('../images/media5/video_bg.png') 0 0 /100% 100%; 
    font-size: 0;
    position: absolute;
    top: 0;
    right: 0; 
}
.media-layout .video-swiper {
    position: absolute;
    top: .16rem;
    left: .1rem;
    width: 8.8rem;
    height: 5rem;
    border-radius: .1rem;
}
.media-layout .video-swiper .swiper-slide{
    border-radius: .1rem;
    overflow: hidden;
    cursor: pointer;
}
.media-layout .video-swiper .swiper-slide .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
}
.media-layout .video-swiper .swiper-slide:hover .mask,
.media-layout .video-swiper .swiper-slide:hover .play{
    display: none;
}
.media-layout .video-swiper .swiper-slide:hover .text{
    display: block;
}
.media-layout .video-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
}
.media-layout .video-swiper .swiper-slide .play {
    width: .98rem;
    height: .98rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.5rem;
    margin-top: -.5rem;
    background-position: 0 -4.48rem;
}
.media-layout .video-swiper .swiper-slide .text{
    position: absolute;
    overflow: hidden;
    width: 100%;
    display: none;
    height: .64rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.66);
}
.media-layout .video-swiper .swiper-slide .text .status{
    width: .12rem;
    height: .12rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: .6rem;
    margin-right: .1rem;
    background-position: 0 0;
}
.media-layout .video-swiper .swiper-slide .text .des{
    display: inline-block;
    vertical-align: middle;
    line-height: .64rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .16rem;
    width: 7.6rem;
}

.media-layout .video-pagination {
    position: absolute;
    height: .44rem;
    border-radius: .2rem .2rem 0 0 ;
    background: #333333;
    bottom: 0rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: .08rem .16rem 0;
    width: auto;
    border: 0.08rem solid #000;
    border-bottom: none;
}
.media-layout .swiper-pagination-bullet {
    display: inline-block;
    width: .16rem;
    height: .16rem;
    border-radius: 50%;
    border: .02 solid #333333;
    margin: 0 .1rem !important;
    opacity: 1;
    background: #BABABA;
    vertical-align: middle;
}
.media-layout .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: .2rem;
    height: .2rem;
    background: #c9f65f;
}

.media-layout .music-item .btn-tab span{
    background: url('../images/media5/music1.png') 0 0 /100% 100%; 
}
.media-layout .music-item.active .btn-tab span{
    background: url('../images/media5/music2.png') 0 0 /100% 100%; 
}

.media-layout .type2-list{
    position: absolute;
    top: .06rem;
    right: 1.36rem;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
    width: 0;
    height: 100%;
    z-index: 1;
}
.media-layout .type2-show{
    width: 9.08rem;
    height: 5.32rem;
    background: url('../images/media5/video_bg2.png') 0 0 /100% 100%; 
    font-size: 0;
    position: absolute;
    top: 0;
    right: 0; 
    z-index: 1;
}
.media-layout .type2-show .gramo .platter{
    width: 3.12rem;
    height: 3.12rem;
    background: url('../images/media5/music_film_bg.png') 0 0 /100% 100%; 
    position: absolute;
    top: 0.5rem;
    left: 0.45rem; 
    z-index: 1;
}
.media-layout .type2-show .gramo .platter .icon{
    width: 0.31rem;
    height: 0.31rem;
    background: url('../images/media5/music_film_icon.png') 0 0 /100% 100%; 
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 2;
}
.media-layout .type2-show .gramo .platter img{
    width: 1.92rem;
    height: 1.92rem;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 50%;
}
.media-layout .type2-show .gramo .control{
    width: 3.47rem;
    height: 1.22rem;
    position: absolute;
    bottom: 0.27rem;
    left: 0.27rem; 
    z-index: 1;
}
.media-layout .type2-show .gramo .currentTime,
.media-layout .type2-show .gramo .totalTime{
    font-size: 0.16rem;
    color: #fff;
    position: absolute;
    top: 0.03rem;
    z-index: 1;
}
.media-layout .type2-show .gramo .currentTime{
    left: 0.04rem; 
}
.media-layout .type2-show .gramo .totalTime{
    right: 0.04rem; 
}
.media-layout .type2-show .gramo .control .progress{
    width: 2.34rem;
    height: 0.18rem;
    background: url('../images/media5/music_bar.png') 0 0 /100% 100%; 
    position: absolute;
    top: 0.04rem;
    left: 50%; 
    transform: translateX(-50%);
    z-index: 1;
}
.media-layout .type2-show .gramo .control .progress .progress-bar{
    height: 0.1rem;
    position: absolute;
    top: 0.04rem;
    left: 0.04rem;
    background-color: #ffee4f;
    width: 0;
    border-radius: 0.05rem 0.05rem 0.05rem 0.05rem;
}
.media-layout .type2-show .gramo .control .progress .progress-bar i{
    display: block;
    width: 0.26rem;
    height: 0.26rem;
    background: url('../images/media5/music_bar_icon.png') 0 0 /100% 100%; 
    position: absolute;
    top: 50%;
    right: -0.13rem;
    transform: translateY(-50%);
}
.media-layout .type2-show .gramo .control .prevBtn,
.media-layout .type2-show .gramo .control .nextBtn{
    width: 0.35rem;
    height: 0.45rem;
    position: absolute;
    top: 0.61rem;
    cursor: pointer;
}
.media-layout .type2-show .gramo .control .prevBtn{
    background: url('../images/media5/music_prev_icon.png') 0 0 /100% 100%; 
    left: 0.61rem;
}
.media-layout .type2-show .gramo .control .nextBtn{
    background: url('../images/media5/music_next_icon.png') 0 0 /100% 100%; 
    right: 0.61rem;
}
.media-layout .type2-show .gramo .control .playBtn{
    width: 0.76rem;
    height: 0.78rem;
    background: url('../images/media5/music_play_bg.png') 0 0 /100% 100%; 
    position: absolute;
    top: 0.44rem;
    left: 1.37rem;
    cursor: pointer;
}
.media-layout .type2-show .gramo .control .playBtn .start-icon{
    width: 0.19rem;
    height: 0.28rem;
    background: url('../images/media5/music_start_icon.png') 0 0 /100% 100%; 
    position: absolute;
    top: 0.24rem;
    left: 0.32rem;
    cursor: pointer;
    display: none;
}
.media-layout .type2-show .gramo .control .playBtn .pause-icon{
    width: 0.24rem;
    height: 0.26rem;
    background: url('../images/media5/music_pause_icon.png') 0 0 /100% 100%; 
    position: absolute;
    top: 0.25rem;
    left: 0.26rem;
    cursor: pointer;
    display: none;
}
.media-layout .type2-show .gramo .control .playBtn .start-icon.active{
    display: block;
}
.media-layout .type2-show .gramo .control .playBtn .pause-icon.active{
    display: block;
}
.media-layout .type2-show .gramo-list{
    width: 3.78rem;
    height: 4.20rem;
    position: absolute;
    top: 0.55rem;
    right: 0.83rem;
    z-index: 1;
}
.media-layout .type2-show .gramo-list ul{
    width: 100%;
    height: 100%;
    overflow: auto;
}
/* 滚动条 */
/* scrollbar-width: thin
scrollbar-color: #000 #b3b3b3 */
.media-layout .type2-show .gramo-list ::-webkit-scrollbar{
    width: 0.06rem;
    height: 0rem;
    border-radius: 0.06rem;
}
.media-layout .type2-show .gramo-list ::-webkit-scrollbar-thumb{
    /* 滑块部分 */
    border-radius: 0.06rem;
    background-color: #ffffff;
}
.media-layout .type2-show .gramo-list ::-webkit-scrollbar-track-piece{
    /* ---轨道部分-- */
    border-radius: 0.02rem;
    background-color: #000000;
    background-repeat: no-repeat;
}


    
.media-layout .type2-show .gramo-list ul li{
    width: 3.78rem;
    height: 0.7rem;
    cursor: pointer;
}
.media-layout .type2-show .gramo-list ul li.active{
    width: 3.78rem;
    height: 0.7rem;
    background: url('../images/media5/music_selected.png') 0 0 /100% 100%; 
}
.media-layout .type2-show .gramo-list ul li .music-info{
    width: 100%;
    height: 95%;
    display: flex;
    align-items: center;
}
.media-layout .type2-show .gramo-list ul li .music-info .music-ref{
    width: 0.5rem;
    font-weight: bold;
    color: #fff;
    font-size: 0.26rem;
    text-align: center;
    margin-left: 0.2rem;
    margin-right: 0.13rem;
}
.media-layout .type2-show .gramo-list ul li .music-info .music-icon{
    width: 0.5rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-left: 0.2rem;
    margin-right: 0.13rem;
    display: none;
}
.media-layout .type2-show .gramo-list ul li .music-info .music-icon i{
    width: 0.04rem;
    height: 0.16rem;
    background-color: #fff;
    overflow: hidden;
    text-indent: -9999rem;
    margin: 0 0.01rem;
    border-radius: 0.1rem;
}
.media-layout .type2-show .gramo-list ul li .music-info .cur i{
    display: inline-block;
}
.media-layout .type2-show .gramo-list ul li .music-info .music-icon .i_1{
    animation: audio 1s  linear infinite;
}
.media-layout .type2-show .gramo-list ul li .music-info .music-icon .i_2{
    animation: audio 1s .3s linear infinite;
}
.media-layout .type2-show .gramo-list ul li .music-info .music-icon .i_3{
    animation: audio 1s .6s linear infinite;
}
@keyframes audio {
    0% {height: .08rem;}
    50% {height: .16rem;}
    100% {height: .08rem}
}
@-webkit-keyframes audio {
    0% {height: .08rem;}
    50% {height: .16rem;}
    100% {height: .08rem}
  }
.media-layout .type2-show .gramo-list ul li .music-info .portrait{
    width: 0.48rem;
    height: 0.48rem;
    background: url('../images/media5/music_list_tou_bg.png') 0 0 /100% 100%; 
    position: relative;
    margin-right: 0.24rem;
}
.media-layout .type2-show .gramo-list ul li .music-info .portrait img{
    width: 0.4rem;
    position: absolute;
    top: 0.04rem;
    left: 0.04rem;
    border-radius: 50%;
}
.media-layout .type2-show .gramo-list ul li .music-info .music-name{
    width: 2.18rem;
    font-weight: bold;
    color: #fff;
    font-size: 0.20rem;
}
.media-layout .media-more{
    z-index: 0;
    position: absolute;
    display: none;
    width: .58rem;
    height: .7rem;
    background-position: 0 -2.82rem;
}
.media-layout .video-item .media-more,
.media-layout .video-item .go-more{
    right: .24rem;
    bottom: -.2rem;
}
.media-layout .music-item .go-more,
.media-layout .picture-item .go-more,
.media-layout .picture-item .media-more,
.media-layout .music-item .media-more{
    left: .14rem;
    bottom: -.3rem;
}
.media-layout .go-more{
    z-index: 3;
    position: absolute;
    width: .58rem;
    height: .5rem;
    display: none;

}
.media-lists .type2-list .item{
    position: absolute;
}
.media-lists .type2-list .item img{
    display: block;
    width: 100%;
    height: 100%;
}
.media-lists .type2-list .item .mask{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .3;
}
.media-lists .type2-list .item .icon{
    position: absolute;
    z-index: 2;
    width: .76rem;
    height: .76rem;
    top: 50%;
    left: 50%;
    margin-top: -.38rem;
    margin-left: -.38rem;
    background-position: 0 -3.62rem;
}
.media-lists .type2-list .item .text{
    position: absolute;
    overflow: hidden;
    left: 0;
    width: 100%;
    display: none;
}
.media-lists .type2-list .item .text .status{
    width: .12rem;
    height: .12rem;
    display: inline-block;
    vertical-align: middle;
    margin-left: .24rem;
    margin-right: .1rem;
    background-position: 0 0;
}
.media-lists .type2-list .item .text .des{
    display: inline-block;
    vertical-align: middle;
    line-height: .46rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .16rem;
}
.media-lists .type2-list .item1{
    width: 4.36rem;
    height: 2.74rem;
    top: .2rem;
    left: .12rem;
    z-index: 1;
}
.media-lists .type2-list .item1 .text{
    top: 0;
    background-position: 0 -.44rem;
    width: 4.36rem;
    height: .46rem;
}
.media-lists .type2-list .item1 .text .des{
    width: 3.6rem;
}
.media-lists .type2-list .item1 .mask{
    background: url('/skin/default/images/media5/mask1.png') 0 0 /100% 100%; 
}
.media-lists .type2-list .item2{
    width: 4.26rem;
    height: 2.46rem;
    top: .14rem;
    left: 4.38rem;
    z-index: 2;
}
.media-lists .type2-list .item2 .mask{
    background: url('/skin/default/images/media5/mask2.png') 0 0 /100% 100%; 
}
.media-lists .type2-list .item2 .text{
    top: 0;
    background-position: 0 -1.56rem;
    width: 4.26rem;
    height: .52rem;
}
.media-lists .type2-list .item2 .text .des{
    line-height: .54rem;
    width: 3.7rem;
}
.media-lists .type2-list .item3{
    width:4.62rem;
    height: 2.42rem;
    top: 2.76rem;
    left: .12rem;
    z-index: 3;
}
.media-lists .type2-list .item3 .mask{
    background: url('/skin/default/images/media5/mask3.png') 0 0 /100% 100%; 
}
.media-lists .type2-list .item3 .text{
    bottom: 0;
    background-position: 0 -2.18rem;
    width: 4.62rem;
    height: .54rem;
}
.media-lists .type2-list .item3 .text .des{
    line-height: .54rem;
    width: 3.9rem;
}
.media-lists .type2-list .item4{
    width: 3.98rem;
    height: 2.72rem;
    top: 2.42rem;
    left: 4.66rem;
    z-index: 4;
}
.media-lists .type2-list .item4 .mask{
    background: url('/skin/default/images/media5/mask4.png') 0 0 /100% 100%; 
}
.media-lists .type2-list .item4 .text{
    bottom: 0;
    background-position: 0 -1rem;
    width: 3.98rem;
    height: .46rem; 
}
.media-lists .type2-list .item4 .text .status{
    margin-left: .4rem;
}
.media-lists .type2-list .item4 .text .des{
    line-height: .46rem;
    width: 3rem;
}

.media-layout .type2-cont{
    width: 9.08rem;
    height: 5.32rem;
    font-size: 0;
    position: absolute;
    top: 0;
    right: 0; 
    z-index: 2;
}
.media-lists .type2-list .item .cont{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .3rem;
}
.media-lists .type2-list .item .none1,
.media-lists .type2-list .item .none2{
    position: absolute;
    display: block;
    z-index: 2;
}
.media-lists .type2-list .item1 .cont{
    top: 0;
    left: 0;
    /* background: rgba(0,255,0,.8); */
}
.media-lists .type2-list .item1 .none1{
    width: .2rem;
    height: 2rem;
    top: 0;
    right: -.06rem;
    -webkit-transform: rotateZ(-6deg);
            transform: rotateZ(-6deg);
}
.media-lists .type2-list .item1 .none2{
    width: 4.5rem;
    height: .2rem;
    bottom: -.04rem;
    left: 0;
    -webkit-transform: rotateZ(-4deg);
            transform: rotateZ(-4deg);
}

.media-lists .type2-list .item2 .cont{
    right: 0;
    top: 0;
    width: 4.2rem;
    height: 2.4rem;
    -webkit-transform: rotateZ(-1deg);
            transform: rotateZ(-1deg);
    border-bottom-left-radius: .4rem;
}
.media-lists .type2-list .item2 .none1{
    width: .1rem;
    height: 2rem;
    bottom: 0;
    left: .02rem;
    -webkit-transform: rotateZ(-6deg);
            transform: rotateZ(-6deg);
}
.media-lists .type2-list .item2 .none2{
    width: 3rem;
    height: .1rem;
    bottom: .08rem;
    right: 0;
    -webkit-transform: rotateZ(-5deg);
            transform: rotateZ(-5deg);
}

.media-lists .type2-list .item3 .cont{
    right: .1rem;
    top: .14rem;
    height: 2.4rem;
    -webkit-transform: rotateZ(-4deg);
            transform: rotateZ(-4deg);
}
.media-lists .type2-list .item3 .none1{
    width: .3rem;
    height: 2.2rem;
    top: .2rem;
    left: -.3rem;
    -webkit-transform: rotateZ(2deg);
            transform: rotateZ(2deg);
}
.media-lists .type2-list .item3 .none2{
    width: 4rem;
    height: .3rem;
    top: 2.4rem;
    left: 0;
    z-index: 2;
}
.media-lists .type2-list .item3 .cont{
    right: .1rem;
    top: .14rem;
    height: 2.4rem;
    -webkit-transform: rotateZ(-4deg);
            transform: rotateZ(-4deg);
}
.media-lists .type2-list .item3 .none1{
    width: .3rem;
    height: 2.2rem;
    top: .2rem;
    left: -.3rem;
    -webkit-transform: rotateZ(2deg);
            transform: rotateZ(2deg);
}
.media-lists .type2-list .item3 .none2{
    width: 4rem;
    height: .3rem;
    top: 2.4rem;
    left: 0;
}
.media-lists .type2-list .item4 .cont{
    top: .1rem;
    left: .1rem;
    -webkit-transform: rotateZ(-5deg);
            transform: rotateZ(-5deg);
}
.media-lists .type2-list .item4 .none2{
    width: 3.2rem;
    height: .3rem;
    top: 2.7rem;
    left: .2rem;
}
.media-lists .type2-show .item.active .mask,
.media-lists .type2-show .item.active .icon,
.media-lists .type2-show .item.playing .mask,
.media-lists .type2-show .item.playing .icon{
    display: none;
}

.media-lists .type2-show .item.active .text,
.media-lists .type2-show .item.playing .text{
    display: block;
}

.media-lists .type2-list .item.playing .text .status{
    background-position: 0 -.22rem;
}

.media-layout .picture-item .btn-tab span{
    background: url('../images/media5/picture1.png') 0 0 /100% 100%; 
}
.media-layout .picture-item.active .btn-tab span{
    background: url('../images/media5/picture2.png') 0 0 /100% 100%; 
}

.media-layout .media-item.active .show-right{
    width: 8.8rem;
}
.media-layout .media-item.active .video-list,
.media-layout .media-item.active .type2-list{
    width: 9.08rem;
}

.media-layout .media-item.active .go-more,
.media-layout .media-item.active .media-more{
    display: block;
}




.feature-layout{
    position: relative;
    z-index: 2;
    height: 10rem;
}
.feature-layout .feature-bg{
    position: absolute;
    top: -1.8rem;
    left: 0;
    width: 100%;
    height: 11.8rem;
    overflow: hidden;
    background: #ff6d6d; 
}
.feature-layout .move-box{
    position: absolute;
    height: 12rem;
    width: 20rem;
    top: .2rem;
    left: -.2rem;
    overflow: hidden;
    -webkit-transform: rotateZ(-1.4deg);
            transform: rotateZ(-1.4deg);
}
.feature-layout .move-icons{
    position: absolute;
    height: 17rem;
    width: 20rem;
    top: -1rem;
    left: -.2rem;
    -webkit-transform: rotateZ(6deg);
            transform: rotateZ(6deg);
    background: url('/skin/default/images/move1.png');
    background-size: 3.8rem 3.52rem;
    opacity: .1;
    -webkit-animation: move1 5s linear infinite;
            animation: move1 5s linear infinite;
}
.feature-layout .feature-con{
    position: relative;
    z-index: 2;
    padding-top: .56rem;
}
.feature-layout .feature-title{
    width: 2.92rem;
    height: 1.24rem;
    margin: 0 auto .34rem;
    background: url('/skin/default/images/feature_title.png') 0 0 /100% 100%;  
}
.feature-layout .feature-part{
    position: relative;
    width: 10.6rem;
    margin: 0 auto;
}


.feature-layout .feature-swiper {
    width: 9rem;
    height: 6.4rem
}

.feature-layout .feature-swiper .swiper-slide {
    width: 3.74rem;
    height: 6.3rem;
    opacity: 0;
    background: url('/skin/default/images/slide_bg.png') 0 0 /100% 100%;  
}

.feature-layout .feature-swiper .swiper-slide-prev,
.feature-layout .feature-swiper .swiper-slide-active,
.feature-layout .feature-swiper .swiper-slide-next {
    opacity: 1;
}


.feature-layout .feature-swiper .swiper-slide>img {
    display: block;
    width: 3.3rem;
    height: 5.9rem;
    margin-top: .16rem;
    margin-left: .24rem;
    border-radius: .14rem;
}

.feature-layout .feature-next,
.feature-layout .feature-prev {
    position: absolute;
    top: 2.7rem;
    z-index: 3;
    
}
.feature-layout .feature-prev {
    left: 0;
}

.feature-layout .feature-next {
    right: 0;
}

.feature-layout .feature-pagination {
    position: static;
    margin-top: .3rem;
    
}

.feature-layout .feature-pagination .swiper-pagination-bullet {
    position: relative;
    width: .24rem;
    height: .24rem;
    background-position: 0 -.74rem;
    margin: 0 .1rem;
    opacity: 1;
}
.feature-layout .feature-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    background-position: 0 -1.08rem;
}

.feature-layout .feature-swiper .swiper-slide-prev,
.feature-layout .feature-swiper .swiper-slide-active,
.feature-layout .feature-swiper .swiper-slide-next {
    opacity: 1;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right{
    background-image: none
}
.feature-layout .swiper-container-3d .swiper-slide-prev .swiper-slide-shadow-left,
.feature-layout .swiper-container-3d .swiper-slide-prev .swiper-slide-shadow-right,
.feature-layout .swiper-container-3d .swiper-slide-next .swiper-slide-shadow-left,
.feature-layout .swiper-container-3d .swiper-slide-next .swiper-slide-shadow-right{
    background: url('/skin/default/images/slide_bg2.png') 0 0 /100% 100%;
    opacity: .4 !important;
}