/* ===============================================================
    * room-detail
=============================================================== */
.room-detail {position: relative; padding: 150px 0 0; z-index: 1;}
.room-detail > .width-bd {position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.room-img {position: absolute; left: 0; top: 150px; height: 650px; }
.room-box {position: relative; display: flex; justify-content: flex-end; align-items: flex-start; min-height: 650px;}
.room-wrap {width: calc(100% / 3 * 2); padding-left: 80px;} 
.room-tit {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px;}
.room-name {display: flex; justify-content: flex-start; align-items: flex-end;}
.room-name h2 {font-size: 50px; margin-right: 15px;}
.room-name h3 {font-size: 22px;}
.room-time {font-size: 14px; letter-spacing: 0.02em;}
.room-info h4 {font-size: 16px; color: #222; margin-bottom: 30px;}
.room-info ul {margin-bottom: 40px;}
.room-info li {display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 15px;}
.room-info h5 {width: 98px; font-size: 14px; color: #222; flex: none;}
.room-info .cont {width: calc(100% - 100px); font-size: 14px; line-height: 20px; color: #777;}
.room-info .cont .color4 {font-size: 12px; line-height: 19px;}
.btn-book {margin-top: 60px; width: 100%; height: 58px; display: flex; justify-content: space-between; align-items: center; padding: 0 40px;}
.btn-book span {font-size: 16px; letter-spacing: 0.1em;}
.btn-book span i {font-size: 20px; margin-right: 10px;}
.btn-book > i {font-size: 20px;}
.room-imgs {position: relative; margin-top: 60px; z-index: 10;}
.room-imgs .width-max {display: flex; justify-content: space-between; align-items: center;}
.room-imgs img {width: calc(50% - 10px); height: 350px;}
.calendar {position: relative; padding: 150px 0; z-index: 1;}
.calendar:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: -80px; background: #f6f6f6; z-index: -1;}
.banner-img {width: 100%; height: 650px;}
@media (max-width: 850px){
    .room-detail {margin-top: 60px; padding: 40px 15px 0;}
    .room-box {display: block; min-height: initial;}
    .room-img {position: static; width: 100%; height: 250px; margin-bottom: 40px;}
    .room-wrap {width: 100%; padding-left: 0;}
    .room-tit {display: block; margin-bottom: 25px;}
    .room-name h2 {font-size: 30px; margin-right: 10px;}
    .room-name h3 {font-size: 14px;}
    .room-time {font-size: 14px; margin-top: 20px;}
    .room-info h4 {font-size: 14px; margin-bottom: 20px;}
    .room-info ul {margin-bottom: 30px;}
    .room-info li {margin-bottom: 10px;}
    .room-info h5 {width: 70px; font-size: 12px;}
    .room-info .cont {width: calc(100% - 75px); font-size: 12px; line-height: 16px;}
    .btn-book {margin-top: 40px; height: 40px; padding: 0 15px;}
    .btn-book span {font-size: 14px;}
    .btn-book span i {font-size: 15px;}
    .btn-book > i {font-size: 15px;}
    .room-imgs {margin-top: 40px;}
    .room-imgs .width-max {display: block;}
    .room-imgs img {width: 100%; height: 210px; margin-bottom: 15px;}
    .calendar {padding: 60px 0;}
    .calendar:after {left: -15px; right: -15px; top: -105px;}
    .banner-img {height: 212px;}
}


/* ===============================================================
    * room-slider
=============================================================== */
.room-slider {position: relative; padding: 150px 0;}
.room-slider .width-bd {position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);}
.room-slider__top {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 80px;}
.room-slider__tit {display: flex; justify-content: flex-start; align-items: flex-end;}
.room-slider__tit h2 {font-size: 50px; margin-right: 10px;}
.room-slider__tit p {font-size: 18px;}
.room-btns a {position: relative; font-size: 17px;}
.room-btns a:after {content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: #a3cc01;}
.room-container .swiper-slide {position: relative; height: 580px; overflow: hidden;}
.room-container .swiper-slide:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(72,86,101,.7); pointer-events: none; opacity: 0; transition: .3s;}
.rooms-thumb {width: 100%; height: 100%; transition: .3s;}
.rooms-info {position: absolute; left: 30px; bottom: 30px; color: #fff; z-index: 1;} 
.rooms-info p {font-size: 15px; letter-spacing: 0.015em;}
.rooms-info h2 {font-size: 36px; margin-top: 15px;}
.room-container .swiper-slide span {position: absolute; right: 30px; top: 30px; font-size: 48px; color: #fff; display: none; z-index: 1;}
.room-container .swiper-slide:hover:after {opacity: 1;}
.room-container .swiper-slide:hover .rooms-thumb {transform: scale(1.1);}
.room-container .swiper-slide:hover span {display: block;}
.room-slider__wrap {position: relative;}
.room-nav {position: absolute; padding: 0 40px; color: #fff; font-size: 70px; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer;}
.room-nav .swiper-button-disabled {opacity: 0;}
@media (max-width: 850px){
    .room-slider {padding: 60px 15px;}
    .room-slider__top {display: block; margin-bottom: 40px;}
    .room-slider__tit {display: block;}
    .room-slider__tit h2 {font-size: 33px; margin-right: 0;}
    .room-slider__tit p {font-size: 14px; margin: 15px 0 30px;}
    .room-btns a {font-size: 14px;}
    .room-container .swiper-slide {height: 290px;}
    .room-container .swiper-slide:after {opacity: 1; background: rgba(34,34,34,.2);}
    .rooms-info {left: 20px; bottom: 15px;}
    .rooms-info p {font-size: 12px;}
    .rooms-info h2 {font-size: 27px; margin-top: 10px;}
    .room-container .swiper-slide span {right: 15px; top: 15px; font-size: 25px; display: block;} 
    .room-nav {padding: 0; left: initial; right: 0; width: auto; top: -50px; justify-content: flex-end; font-size: 19px; color: #222;}
    .room-nav i {margin-left: 20px;}
    .room-nav .swiper-button-disabled {opacity: 1; color: #999;}
    .room-pager {position: absolute; top: 15px; left: 15px; width: auto; z-index: 1; color: #fff; font-size: 20px; letter-spacing: -0.1em;}
}