/* ===============================================================
    * rooms
=============================================================== */
.rooms {position: relative;}
.tit-wrap {margin-bottom: 60px;}
.tit-wrap .tit {display: flex; justify-content: flex-start; align-items: flex-end; margin-bottom: 40px;}
.tit-wrap .tit h2 {font-size: 110px; margin-right: 30px;}
.tit-wrap .tit h3 {font-size: 24px; opacity: 0.7;}
.tit-wrap p {font-size: 12px; line-height: 32px; color: #222; opacity: 0.6;}

.pager-container {position: relative; z-index: 100; margin-left: 0; width: 55%; height: 30px; display: flex; justify-content: space-between; align-items: center; background: #fff;}
.pager-container .swiper-slide {width: auto; cursor: pointer; margin-right: 80px; font-size: 14px; color: #999; transition: .4s;}
.pager-container .swiper-slide-thumb-active, .pager-container .swiper-slide:hover {color: var(--color-1);}
.rooms-ctrl {display: flex; justify-content: flex-end; align-items: center;}
.rooms-ctrl .nav-btn {position: relative; z-index: 100; font-size: 28px; color: #777; transition: .4s; margin-left: 40px; cursor: pointer;}
.rooms-ctrl .nav-btn:hover {color: var(--color-1);}

.rooms-container {margin-top: -30px;}
.rooms-container .swiper-slide a {display: flex; justify-content: space-between; align-items: flex-start; background: #fff;}
.rooms-container .img-wrap {position: relative; width: 55%; height: 830px; margin-top: 90px;}
.rooms-container .img-wrap .img1 {position: relative; width: 100%; height: 100%; overflow: hidden;}
.rooms-container .img-wrap .img1 img {transition: .4s;}
.rooms-container .img-wrap .img1 h2 {position: absolute; top: 60px; right: 60px; font-size: 50px; font-weight: 500; color: #fff; text-shadow: 1px 2px 6px rgba(52, 43, 37, 0.2);}
.rooms-container .img-wrap .imgbox {position: absolute; z-index: 10; bottom: 80px; left: calc(100% - 80px); display: flex; justify-content: flex-start; align-items: center;}
.rooms-container .img-wrap .imgbox img {width: 367px; height: 338px; margin-right: 26px;}
.rooms-container .info-wrap {width: 45%; padding-left: 80px;}
.rooms-container .info-wrap .roomname {height: 90px; font-size: 15px;}
.rooms-container .info-wrap .infobox {position: relative; height: 830px; padding-top: 80px; border: 1px solid rgba(153,153,153,.4); border-left: none; border-right: none;}
.rooms-container .infobox li {margin-bottom: 15px; display: flex; justify-content: flex-start; align-items: center;}
.rooms-container .infobox .icon {display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; border: 1px solid rgba(52,43,37,.4); font-size: 18px;}
.rooms-container .infobox div {font-size: 14px; letter-spacing: -0.02em; opacity: 0.8; padding-left: 10px;}
.rooms-container .infobox .view {margin-top: 45px; text-transform: uppercase; font-size: 14px; letter-spacing: 0.1em; opacity: 1;}

.rooms-slider .swiper-slide:hover .img1 img {transform: scale(1.1);}


@media (max-width: 1200px){
    .pager-container .swiper-slide {margin-right: 30px;}
}
@media (max-width: 992px){
    .tit-wrap {margin-bottom: 30px;}
    .tit-wrap .tit {justify-content: space-between; margin-bottom: 20px;}
    .tit-wrap .tit h2 {font-size: 55px; margin-right: 0;}
    .tit-wrap .tit h3 {font-size: 15px;}
    .tit-wrap p {font-size: 10px; line-height: 20px; opacity: 0.38;}

    .pager-container {width: 100%; height: auto; display: block;}
    .pager-container .swiper-wrapper {flex-wrap: wrap;}
    .pager-container .swiper-slide {margin-right: 30px; margin-bottom: 25px;}
    .rooms-ctrl .nav-btn {font-size: 30px; margin-left: 30px;}

    .rooms-slider {padding: 0 15px !important;}
    .rooms-container {margin-top: 30px;}
    .rooms-container .swiper-slide a {display: block;}
    .rooms-container .img-wrap {width: 100%; height: auto; margin-top: 0;}
    .rooms-container .img-wrap .img1 {height: 286px;}
    .rooms-container .img-wrap .img1 h2 {font-size: 25px; top: 20px; right: 15px;}
    .rooms-container .img-wrap .imgbox {position: static; justify-content: space-between; margin-top: 10px;}
    .rooms-container .img-wrap .imgbox img {width: calc(50% - 5px); height: 154px; margin-right: 0;}
    .rooms-container .info-wrap {width: 100%; padding-left: 0;}
    .rooms-container .info-wrap .roomname {height: auto; font-size: 14px; padding: 30px 0;}
    .rooms-container .info-wrap .infobox {height: auto; padding: 30px 0;}
    .rooms-container .infobox li {margin-bottom: 10px;}
    .rooms-container .infobox .icon {width: 40px; height: 40px; line-height: 40px; font-size: 14px;}
    .rooms-container .infobox div {font-size: 12px;}
    .rooms-container .infobox .view {margin-top: 30px;}
}