.travel-list{
    margin: 0 -9px;
}
.travel-list:after{
    content: '';
    display: block;
    clear: both;
}
.travel-list .item {
    width: 25%;
    float: left;
    padding: 0 9px;
	cursor:  pointer;
    margin-bottom: 50px;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}
.travel-list .item a {
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    display: block;
}
.travel-list .pic {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}
.travel-list .item .title {
    position: absolute;
    bottom: 0;
    width: 100%;
   background: rgba(38, 56, 44, 0.65);
    color: #FFF;
    padding: 5px 10px;
    height: 62px;
    overflow: hidden;
    text-align: left;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.travel-list a .pic:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: url(../../images/common/travel/cover.png) 300px 300px no-repeat,rgba(0,0,0,0);
}
.travel-list a:hover .pic:before {
    background: url(../../images/common/travel/cover.png)center no-repeat,rgba(197, 222, 131, 0.5);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
     -o-transition: all 300ms linear;
	transition: all 300ms linear;
}
.travel-list .description{
    width: 100%;
    height: 125px;
    overflow: hidden;
}

@media screen and (max-width: 1300px) {
    .travel-list .item {
        width: 50%;
    }
}
@media screen and (max-width: 500px) {
    .travel-list .item {
        width: 100%;
    }
}