.container-works{
    width: 1200px; padding: 160px 0 50px; margin: 0 auto;
}
.container-works .works-head{
    position: relative; padding-bottom: 30px; border-bottom: 1px solid #b3b3b3;
}
.container-works .works-head .change{
    position: absolute; right: 0; bottom: 0; width: 100%;
}
.container-works .works-head .change::after{
    position: absolute; bottom: 0; left: 0; content: ''; width: 100%;
}
.container-works .works-head .change-cont{
    position: absolute; right: 0; bottom: 0;
}
.container-works .works-head .change-cont a{
    display: block; padding: 0 28px; font-size: 16px; line-height: 48px; color: #808080; border: 1px solid transparent; border-bottom: none;
}
.container-works .works-head .change-cont a:hover{
    color: #2fe56f;
}
.container-works .works-head .change-cont a.active{
    font-size: 18px; font-weight: 700; color: #2fe56f; border-color: #b3b3b3;
}
.container-works .works-list{
    padding-top: 30px;
}
.container-works .works-list .item{
    display: block; width: 282px; color: #808080;
}
.container-works .works-list .item:nth-child(4n+2),
.container-works .works-list .item:nth-child(4n+3),
.container-works .works-list .item:nth-child(4n+4){
    margin-left: 24px;
}
.container-works .works-list .item:nth-child(n+5){
    margin-top: 24px;
}
.container-works .works-list .cover{
    position: relative; height: 188px; overflow: hidden;
}
.container-works .works-list .cover::before{
    position: absolute; top: 0; left: 0; z-index: 2; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.2s ease;
}
.container-works .works-list .cover::after{
    position: absolute; top: 50%; left: 50%; z-index: 2; content: ''; width: 28px; height: 29px; margin: -15px 0 0 -14px; background: url('../images/sprites.png') no-repeat -98px -14px; opacity: 0; transition: all 0.2s ease; transform: scale(0.75);
}
.container-works .works-list .cover img{
    display: block; width: 100%; object-fit: cover;
}
.container-works .works-list .name{
    margin-top: 10px; font-weight: 700;
}
.container-works .works-list .intro{
    margin-top: 8px;
}
.container-works .works-list .item:hover .cover::before{
    opacity: 1;
}
.container-works .works-list .item:hover .cover::after{
    opacity: 1; animation: pulse 0.6s ease infinite alternate;  animation-fill-mode: both;
}
.container-works .works-detail{
    margin-top: 40px; background-color: #f7f7f7;
}
.container-works .works-detail .pic{
    width: 960px;
}
.container-works .works-detail .pic img{
    display: block; width: 100%;
}
.container-works .works-detail .pic img:nth-child(n+2) {
    margin-top: 20px;
}
.container-works .works-detail .explain{
    box-sizing: border-box; padding: 70px 50px 20px;
}
.container-works .works-detail .explain .name{
    font-size: 24px; font-weight: 700; line-height: 1.25em; color: #2fe56f;
}
.container-works .works-detail .explain .sub{
    margin-top: 10px; font-size: 18px; line-height: 1.25em; color: #808080;
}
.container-works .works-detail .explain .gap{
    width: 34px; height: 4px; margin-top: 24px; background-color: #808080;
}
.container-works .works-detail .explain .desc{
    margin-top: 40px; font-size: 16px; line-height: 1.8em; color: #808080;
}