/* ===============================================================
    * travels
=============================================================== */
.travels {padding-bottom: 80px;}
.travels .list {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.travels .item {width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 40px;}
.travels .item:nth-of-type(3n) {margin-right: 0;}
.travels .img {width: 100%; height: 250px; overflow: hidden;}
.travels .img img {transition: .4s;}
.travels .tit {height: 77px; display: flex; justify-content: flex-start; align-items: center; padding: 0 30px; font-size: 15px; border: 1px solid #ccc; border-top: none;}
.travels .tit h3 {position: relative; color: #222; padding-left: 40px;}
.travels .tit h3:after {content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: #ccc;}
.travels .item:hover .img img {transform: scale(1.1);}
@media (max-width: 992px){
    .travels {padding: 60px 0;}
    .travels .list {display: block;}
    .travels .item {width: 100%; margin-right: 0; margin-bottom: 20px;}
    .travels .item:last-of-type {margin-bottom: 0;}
    .travels .img {height: 190px;}
    .travels .tit {height: 60px; padding: 0 15px; font-size: 14px;}
    .travels .tit h3 {padding-left: 30px;}
    .travels .tit h3:after {left: 15px;}
}