.links .container{
    max-width: 1400px;
}
.link-list {
    margin: 0 -15px;
    margin-top: 46px;
}
.link-list .item {
    width: 20%;
    padding: 0 15px;
}
.link-list .item a {
    margin: 0 auto 60px;
    max-width: 250px;
}
.link-list .item a .pic{
    position: relative;
}
.link-list .item a .pic:before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/links/links-cover.png) center center no-repeat,url(../images/links/cover_bg.png) center center;
    z-index: 2;
    opacity: 0;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-webkit-transition: all 0.3s ease;
}
.link-list .item a:hover .pic:before{
    opacity: 1;        
}
.link-list .item a .links-name{
	color: #333;
    font-size: 16px;
    margin-top: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.link-list .item a .links-href{
    font-size: 12px;
    color: #BABABA;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.link-list .item a:hover .links-name{
    color: #02219E;
    text-decoration: underline;
    
}
.link-list .pic {
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width: 1200px) {
    .link-list .item {
        width: 25%;
    }              
}
@media screen and (max-width: 767px) {
    .link-list .item {
        width: 33.33%;
    }
}
@media screen and (max-width: 540px) {
    .link-list .item {
        width: 50%;
    }
}
@media screen and (max-width: 400px) {
    .link-list .item {
        float: none;
        width: auto;
    }
    .link-list .pic {
        height: auto;
    }
}