/* ===============================================================
    * full-slide-section
=============================================================== */
.full-slide {width: 100%; height: auto; position: relative;}
.full-slide__wrapper {position: relative;}
.full-slide__tit {position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff;}
.full-slide__tit h2 {font-size: 40px; font-weight: 600; margin-bottom: 20px;}
.full-slide__tit p {font-size: 20px; line-height: 26px;}
.full-container {width: 100%; height: 100vh; overflow: hidden; position: relative;}
.full-container .swiper-slide {width: 100%; height: 100%; overflow: hidden; position: relative;}
.full-container .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.full-ctrl {position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.full-ctrl .full-pagination {position: absolute; width: 100%; left: 50%; bottom: 140px; transform: translateX(-50%); line-height: 11px;}
.full-ctrl .swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 10px; background: #aca5a0; opacity: 1;}
.full-ctrl .swiper-pagination-bullet-active {background: #fff; transform: scale(1.8); transform-origin: center;}
.full-ctrl .nav-btn {font-size: 60px; color: #fff; outline: none;}
.full-ctrl .swiper-button-prev {left: 3%;}
.full-ctrl .swiper-button-next {right: 3%;}
.full-slide-section .scroll-icon {position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 1;}
@media (max-width: 820px){
    .full-slide__tit h2 {display: none;}
    .full-slide__tit p {display: none;}
    .full-slide-section .scroll-icon {display: none;}
    .full-container {height: auto; padding-bottom: 50px;}
    .full-ctrl .full-pagination {bottom: 22px;}
    .full-ctrl .swiper-pagination-bullet {width: 4px; height: 4px; margin: 0 5px; background: #a7a7a7;}
    .full-ctrl .nav-btn {font-size: 30px; top: calc(50% - 25px);}
    .play-ctrl-mo {position: absolute; right: 15px; bottom: 20px; cursor: pointer; z-index: 100;}
    .play-ctrl-mo .swiper-button-play,
    .play-ctrl-mo .swiper-button-pause {display: inline-block; font-size: 12px; padding: 0 5px; color: #ccc;}
    .play-ctrl-mo .swiper-button-play.js-active,
    .play-ctrl-mo .swiper-button-pause.js-active {color: #222;}
}


/* ===============================================================
    * room-info-section
=============================================================== */
.room-info-section {padding: 150px 0; background: #f6f6f6;}
.room-title {text-align: center; margin-bottom: 70px;}
.room-title h2 {font-size: 44px; font-weight: 600; color: #222; margin-bottom: 10px;}
.room-title p {font-size: 22px; letter-spacing: 0.02em;}
.room-detail {display: flex; justify-content: space-between;}
.room-img {width: 50%; height: 784px; margin-right: 40px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);}
.room-img img {width: 100%; height: 100%; object-fit: cover;}
.room-info {position: relative; width: 50%; margin-left: 40px; padding-top: 60px; border-top: 1px solid #222;}
.room-info:after {content: ''; position: absolute; width: 52px; height: 3px; top: -2px; left: 0; background: #222;}
.room-info h3 {font-size: 34px; font-weight: 600; letter-spacing: 0.04em; color: #222; margin-bottom: 40px;}
.room-info__tab {margin-bottom: 20px;}
.room-info__head {display: flex; justify-content: space-between; width: 100%; height: 36px; line-height: 36px; padding: 0 10px;}
.room-info__head h4 {font-size: 16px; letter-spacing: 0.04em;}
.icon-arrow {position: relative;}
.icon-arrow span {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.room-info__table {width: 100%;}
.room-info__table tr {width: 100%;}
.room-info__table th {width: 18%; text-align: left; font-size: 14px; color: #222; padding: 5px 0;}
.room-info__table td {width: 82%; font-size: 14px; line-height: 22px; color: #777; padding: 5px 0;}
.room-info__table td span {font-size: 12px;}
.room-info__txt {padding: 10px; display: none;}
.room-info__tab:first-of-type .room-info__txt {display: block;}
.table-open {display: none;}
.js-table .table-open {display: block;}
.js-table .table-close {display: none;}
@media (max-width: 820px){
    .room-info-section {padding: 60px 0; background: none;}
    .room-title {margin-bottom: 30px;}
    .room-title h2 {font-size: 30px;}
    .room-title p {font-size: 15px;}
    .room-detail {flex-wrap: wrap;}
    .room-img {display: none;}
    .room-info {width: 100%; margin-left: 0; padding-top: 30px;}
    .room-info:after {width: 40px;}
    .room-info h3 {font-size: 24px; margin-bottom: 20px;}
    .room-info__tab {margin-bottom: 10px;}
    .room-info__head {height: 32px; line-height: 32px;}
    .room-info__head h4 {font-size: 15px;}
    .icon-arrow {font-size: 15px;}
    .room-info__table th {width: 24%;}
    .room-info__table td {width: 76%; line-height: 19px;}
}


/* ===============================================================
    Room Calendar Section
=============================================================== */
.room-calendar-section {padding: 150px 0;}
.calendar {width: 100%; margin: 0 auto;}
.page-move-btn {position: relative; margin-top: -100px; display: flex; justify-content: center; align-items: center;}
.page-move-btn a {display: inline-block; margin: 0 10px; width: 220px; height: 58px; line-height: 58px; font-size: 15px; letter-spacing: 0.01em; color: #222; font-weight: 300; border: 1px solid #777; text-align: center; transition: .3s;}
.room-fullimg-section {width: 100%; height: auto;}
.room-fullimg-section img {width: 100%; height: auto;}
@media (max-width: 820px){
    .room-calendar-section {padding: 0 0 60px;}
    .page-move-btn {margin-top: -85px;}
    .page-move-btn a {width: calc(50% - 10px); height:40px; line-height: 40px; font-size: 12px;}
}


/* ===============================================================
    * preview-slide .preview-room
=============================================================== */
.preview-slide {padding: 150px 0; background: #f6f6f6;}
.preview-slide > h2 {font-size: 40px; font-weight: 600; letter-spacing: 0.02em; color: #222; margin-bottom: 60px;}
.preview-slide__wrapper {position: relative;}
.preview-container {padding-bottom: 100px;}
.preview-container .swiper-slide > a {display: block;}
.preview-img {position: relative; width: 100%; height: 250px;}
.preview-img:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,.5); opacity: 0; transition: .3s;}
.preview-img img {width: 100%; height: 100%; object-fit:  cover;}
.overlay-icon {z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 24px; color: #fff; opacity: 0; transition: .3s;}
.preview-tit {text-align: center; padding-top: 40px;}
.preview-tit h2 {font-size: 20px; color: #222;}
.preview-tit h3 {font-size: 14px; font-weight: 200; color: #222; margin: 20px 0 30px;}
.preview-tit p {font-size: 14px; font-weight: 200; color: #222;}
.rooms-line {display: inline-block; width: 150px; height: 1px; background: #666; margin: 0 20px;}
.preview-tit .preview-btn {display: block; margin: 40px auto 0; width: 150px; height: 40px; line-height: 38px; font-size: 14px; font-weight: 300; letter-spacing: 0.1em; color: #222; border: 1px solid #777; transition: .3s;}
.preview-ctrl {position: absolute; left: 0;right: 0;top: 0;bottom: 0;}
.preview-ctrl .preview-pagination {z-index: 500; left: 50%; bottom: 10px; transform: translateX(-50%);}
.preview-ctrl .swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 10px; background: #c8c8c8; opacity: 1;}
.preview-ctrl .swiper-pagination-bullet-active {background: #e3a259; transform: scale(1.8); transform-origin: center;}
.preview-ctrl .nav-btn {z-index: 100; font-size: 60px; color: #222; outline: none; top: 125px;}
.preview-ctrl .swiper-button-prev {left: -5%;}
.preview-ctrl .swiper-button-next {right: -5%;}
.preview-img:hover:after {opacity: 1;}
.preview-img:hover .overlay-icon {opacity: 1;}
.preview-container .swiper-slide:hover .preview-tit .preview-btn {background: #e3a259; border-color: #e3a259; color: #fff;}
@media (max-width: 820px){
    .preview-slide {padding: 60px 0;}
    .preview-slide > h2 {font-size: 28px; margin-bottom: 30px;}
    .preview-container {padding-bottom: 50px;}
    .preview-img {height: 194px;}
    .preview-tit {padding-top: 30px;}
    .preview-tit h2 {font-size: 18px;}
    .preview-tit h3 {margin: 10px 0 15px;}
    .rooms-line {width: 120px; margin: 0 10px 4px;}
    .preview-tit .preview-btn {width: 100px; height: 25px; line-height: 22px; font-size: 12px; margin: 30px auto 0;}
    .preview-ctrl .swiper-pagination-bullet {width: 4px; height: 4px; margin: 0 5px;}
    .preview-ctrl .nav-btn {font-size: 30px; color: #fff; top: 97px;}
    .preview-ctrl .swiper-button-prev {left: 2%;}
    .preview-ctrl .swiper-button-next {right: 2%;}
}