/* ===============================================================
    * travels
=============================================================== */
.travels {position: relative; padding: 150px 0 130px; background: #223446; z-index: 1;}
.travels:after {content: ''; position: absolute; width: 100%; height: 100%; right: 0; bottom: 0; background: url(/img/bg/bg-travels.jpg) no-repeat right bottom / cover; z-index: -1;}
.travels-list {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.travels-list li {width: calc((100% -  120px) / 7); margin-right: 20px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.1); transition: .3s; opacity: 0.5;}
.travels-list li:nth-of-type(7n) {margin-right: 0;}
.travels-list a {padding: 20px;}
.travels-img {width: 110px; height: 110px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px;}
.travels-tit {text-align: center; font-size: 14px; letter-spacing: 0.02em; transition: .3s;}
.travels-list li:hover, .travels-list li.active {border-color: transparent; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); opacity: 1;}
.travels-list li:hover .travels-tit, .travels-list li.active .travels-tit {color: #fff;}
@media (max-width: 1200px){
    .travels-list li {width: calc((100% -  120px) / 6);}
    .travels-list li:nth-of-type(6n) {margin-right: 0;}
    .travels-list li:nth-of-type(7n) {margin-right: 20px;}
}
@media (max-width: 850px){
    .travels {padding: 60px 15px 50px;}
    .travels:after {width: 100%; height: 300px;}
    .travels-list li {width: calc(50% - 5px); margin-right: 10px !important; margin-bottom: 10px; opacity: 1;}
    .travels-list li:nth-of-type(2n) {margin-right: 0 !important;}
    .travels-list a {padding: 15px;}
    .travels-img {width: 137px; height: 137px; margin-bottom: 15px;}
    .travels-tit {color: #fff;}
    .travels-list li.active {border-color: rgba(255,255,255,.1); box-shadow: none;}

    .trv .travels-list li {opacity: 0.5;}
    .trv .travels-list li.active {opacity: 1; border-color: transparent; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);}
}
/* ===============================================================
    * travel-detail
=============================================================== */
.travel-detail .width-bd {padding: 100px 0 150px;}
.trv-img {width: 100%; height: 610px; margin-bottom: 60px;}
.trv-info {position: relative; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);}
.trv-tit {width: 100%; height: 180px; padding: 50px 60px 0; border-bottom: 1px solid #ccc;}
.trv-tit h2 {font-size: 40px; margin-bottom: 20px; text-transform: capitalize;}
.trv-tit h3 {font-size: 18px;}
.trv-route {position: absolute; right: 60px; top: calc(180px - 23px); height: 46px; line-height: 46px; text-align: center; padding: 0 30px; font-size: 14px;}
.trv-route i {font-size: 20px; padding-right: 10px;}
.trv-text {padding: 60px; font-size: 13px; line-height: 25px; letter-spacing: 0.015em; color: #777;}
@media (max-width: 850px){
    .travel-detail .width-bd {padding: 60px 15px;}
    .trv-img {height: 195px; margin-bottom: 15px;}
    .trv-tit {height: 130px; padding: 40px 15px 0;}
    .trv-tit h2 {font-size: 30px; margin-bottom: 15px;}
    .trv-tit h3 {font-size: 14px;}
    .trv-route {right: 15px; top: calc(130px - 17px); height: 34px; line-height: 34px; padding: 0 15px; font-size: 12px;}
    .trv-route i {font-size: 15px;}
    .trv-text {padding: 40px 15px; font-size: 12px; line-height: 20px; letter-spacing: 0;}

}