.container-works{
    padding: 2.4rem .4rem 0;
}
.container-works .change{
    margin-top: .4rem;
}
.container-works .change .item{
    box-sizing: border-box; height: .8rem; font-size: .4rem; line-height: .8rem; color: #808080; text-align: center; border: 1px solid #7f7f7f;
}
.container-works .change .item:nth-child(n+2){
    border-left: none;
}
.container-works .change .item:first-of-type{
    border-top-left-radius: .066667rem; border-bottom-left-radius: .066667rem;
}
.container-works .change .item:last-of-type{
    border-top-right-radius: .066667rem; border-bottom-right-radius: .066667rem;
}
.container-works .change .active{
    font-weight: 700; color: #fff; background-color: #18d8b6; border-color: #18d8b6;
}
.container-works .data-cont{
    display: none;
}
.container-works .data-list{
    position: relative;
    margin-top: .4rem;
}
.container-works .data-list .item{
    position: absolute;
    width: 4.48rem;
}
.container-works .data-list .cover{
    width: 100%; overflow: hidden;
}
.container-works .data-list .cover img{
    display: block; width: 100%; height: auto; object-fit: cover;
}
.container-works .data-list .name{
    margin-top: .266667rem; font-size: .32rem; font-weight: 700; color: #808080;
}
.container-works .data-list .intro{
    margin-top: .08rem; font-size: .32rem; color: #808080;
}
.container-works .load-state{
    height: 48px; font-size: .32rem; font-weight: 700; color: #18d8b6;
}
.container-works .load-state i{
    width: .28rem; height: .173333rem; margin-left: .04rem; background-position: -0.32rem -0.24rem;
}
.container-works .load-state-nomore,
.container-works .load-state-loading{
    color: #b2b2b2;
}
.container-works .load-state-nomore i,
.container-works .load-state-loading i{
    display: none;
}