/* ===============================================================
    * travel
=============================================================== */
.travel .imgbox {position: relative; padding-bottom: 120px;}
.travel .imgbox:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 120px; background: var(--color-3); z-index: -1;}
.travel .txtbox {display: flex; justify-content: space-between; align-items: flex-start;}
.travel .tit {width: 50%; padding-left: 60px;}
.travel .tit h2 {font-size: 70px; line-height: 80px; margin-top: -50px; margin-bottom: 50px;}
.travel .tit h3 {font-size: 15px; color: var(--color-2);}
.travel .tit h3 i {font-size: 22px; padding-right: 10px;}
.travel .info {width: 50%; padding-top: 120px; padding-left: 60px;}
.travel .info h4 {font-size: 18px; color: var(--color-2); margin-bottom: 30px;}
.travel .info .txt {font-size: 12px; line-height: 24px; color: #999;}
@media (max-width: 992px){
    .travel .imgbox {padding-bottom: 60px;}
    .travel .imgbox:after {top: 60px;}
    .travel .txtbox {display: block;}
    .travel .tit {width: 100%; padding-left: 0;}
    .travel .tit h2 {font-size: 35px; line-height: 40px; margin-top: -20px; margin-bottom: 20px;}
    .travel .tit h3 {font-size: 13px;}
    .travel .tit h3 i {font-size: 20px;}
    .travel .info {width: 100%; padding: 0; margin-top: 50px;}
    .travel .info h4 {font-size: 14px;}
    .travel .info .txt {font-size: 12px; line-height: 20px;}
}
/* ===============================================================
    * trv-slider
=============================================================== */
.trv-slider {background: var(--color-3);}
.trv-slider .width-max {position: relative;}
.trv-slider h2 {font-size: 24px; letter-spacing: 0.1em; margin-bottom: 80px;}
.trv-slider .imgbox {width: 100%; height: 320px; overflow: hidden;}
.trv-slider .imgbox img {width: 100%; height: 100%; object-fit: cover; transition: .5s;}
.trv-slider .txtbox {padding-top: 40px;}
.trv-slider h3 {width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px;}
.trv-slider h4 {font-size: 16px; color: #777; margin: 20px 0 40px;}
.trv-slider .btn-more {width: 150px; height: 42px; line-height: 42px;}

.trv-slider .swiper-slide:hover .imgbox img {transform: scale(1.1);}
.trv-slider .swiper-slide:hover .btn-more {box-shadow: inset 0 0 0 56px var(--color-1); color: #fff;}

.trv-ctrl {position: absolute; left: 0; right: 0; top: 160px; transform: translateY(-50%);}
.trv-ctrl .nav-btn {position: absolute; top: 0; transform: translateY(-50%); font-size: 60px; color: var(--color-2); cursor: pointer;}
.trv-ctrl .nav-btn.prev {left: -30px;}
.trv-ctrl .nav-btn.next {right: -30px;}

@media (max-width: 992px){
    .trv-slider {padding-bottom: 30px;}
    .trv-slider h2 {font-size: 16px; margin-bottom: 40px;}
    .trv-slider .swiper-wrapper {flex-wrap: wrap;}
    .trv-slider .swiper-slide {width: calc(50% - 5px); margin-right: 10px; margin-bottom: 30px;}
    .trv-slider .swiper-slide:nth-of-type(2n) {margin-right: 0;}
    .trv-slider .imgbox {height: 160px;}
    .trv-slider .txtbox {padding-top: 15px;}
    .trv-slider h3 {font-size: 14px;}
    .trv-slider h4 {font-size: 12px; margin: 10px 0 0;}
    .trv-slider .btn-more {display: none;}
    .trv-ctrl {display: none;}
}