/* ===============================================================
    * room
=============================================================== */
.fullpage {position: relative; width: 100%; height: 100vh;}
.fullpage.infoOpen .room-slide {width: 65%; margin-left: auto; }
.fullpage.infoOpen .room-info {left: 0; right: initial;}
.fullpage.infoOpen .room-info .arrow .close {display: block;}
.fullpage.infoOpen .room-info .arrow .open {display: none;}
.room-slide {width: 100%; height: 100vh; margin-left: auto;}
.room-info {position: absolute; top: 0; right: 100%; left: initial; width: 35%; padding: 0 3.13vw; height: 100vh; transition:  .5s;}

.back-btn {z-index: 10; position: absolute; right: 45px; top: 45px; font-size: 40px; color: #fff; cursor: pointer;}
.room-slide .swiper-slide {height: 100vh;}
.room-pager {position: absolute; z-index: 100; left: 0; right: 0; bottom: 40px !important; text-align: center;}
.room-pager .swiper-pagination-bullet {width: 7px; height: 7px; vertical-align: middle; background: #fff; opacity: 0.3; margin: 0 7px !important;}
.room-pager .swiper-pagination-bullet-active {width: 14px; height: 14px; opacity: 1;}
.room-ctrl {position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 100;}
.room-slide .nav-btn {position: absolute; top: 50%; transform: translateY(-50%); color: #fff; cursor: pointer;}
.room-slide .nav-btn i {font-size: 30px; padding: 0 10px; vertical-align: middle;}
.room-slide .nav-btn span {font-size: 15px; letter-spacing: 0.2em; vertical-align: middle;}
.room-slide .nav-btn.prev {left: 30px;}
.room-slide .nav-btn.next {right: 30px;}

.room-info .arrow {position: absolute; left: 100%; top: 0; background: #fff; padding: 10px; text-align: center; z-index: 10; cursor: pointer;}
.room-info .arrow .close {display: none;}

.room-info__wrap {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.room-info h2 {font-size: 3.13vw; letter-spacing: 0.04em; color: #222;}
.room-info h3 {font-size: 0.94vw; color: #194052; margin: 2.08vw 0;}
.room-info__txt {font-family: 'Noto Sans KR', sans-serif !important; font-size: 0.73vw; line-height: 1.25vw; color: #777;}
.room-info__txt p, .room-info__txt span {font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important;}

.room-info__table {margin: 3.13vw 0;}
.room-info__table p {font-size: 0.83vw; color: #222; margin-bottom: 1.04vw;}
.room-info__table table {font-size: 0.73vw; font-weight: 300;}
.room-info__table th {width: 5.21vw; color: #777; text-align: left;}
.room-info__table td {width: calc(100% - 5.21vw); color: #222; padding: 10px 0;}
.room-btns {display: flex; justify-content: flex-start; align-items: center;}
.room-btns p {width: 11.46vw; height: 2.08vw; line-height: 2.08vw; margin-right: 1.04vw; background: #222; font-size: 0.73vw; color: #fff; cursor: pointer;}
.room-btns p:last-of-type {margin-right: 0;} 

.viewbtn {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 200px; height: 50px; line-height: 50px; background: #fff; text-align: center; font-size: 16px; color: #222; text-transform: uppercase; z-index: 100; cursor: pointer;}
.roomclose {position: absolute; right: 30px; top: 30px; font-size: 30px; color: #222; cursor: pointer;}
@media (max-width: 820px){
    .viewbtn, .roomclose {display: none;}
    .fl, .fr {float: none;}
    .fullpage {height: auto;}
    .back-btn {right: 5.33vw; top: 5.33vw; font-size: 6.67vw;}
    .room-slide {width: 100%; height: auto;}
    .fullpage.infoOpen .room-slide {width: 100%; margin-left: auto; }
    .room-slide .swiper-wrapper {padding-bottom: 9.33vw;}
    .room-slide .swiper-slide {height: 56.27vw;}
    .room-pager {bottom: 4.00vw !important;}
    .room-pager .swiper-pagination-bullet {width: 0.93vw; height: 0.93vw; margin: 0 0.93vw !important; background: rgba(153,153,153,.6);}
    .room-pager .swiper-pagination-bullet-active {width: 1.87vw; height: 1.87vw; background: #006566;} 
    .room-slide .nav-btn {top: calc(50% - 4.67vw);}
    .room-slide .nav-btn i {font-size: 6.67vw;}
    .room-slide .nav-btn span {display: none;}
    .room-slide .nav-btn.prev {left: 2.67vw;}
    .room-slide .nav-btn.next {right: 2.67vw;}

    .room-info {position: static; width: 100%; height: auto; padding: 10.67vw 3.20vw 16.00vw;}
    .room-info__wrap {display: block;}
    .room-info h2 {font-size: 9.33vw;}
    .room-info h3 {font-size: 3.73vw; margin: 6.67vw 0;}
    .room-info__txt {font-size: 3.20vw; line-height: 4.53vw; letter-spacing: -0.01em;}
    .room-info__table {margin: 8.00vw 0;}
    .room-info__table p {font-size: 4.27vw; margin-bottom: 2.67vw;}
    .room-info__table table {font-size: 3.73vw;}
    .room-info__table tr {height: auto;}
    .room-info__table th {width: 22.67vw;}
    .room-info__table td {width: calc(100% - 22.67vw); padding: 2vw 0;}
    .room-btns {justify-content: space-between;}
    .room-btns p {width: calc(50% - 1.33vw); height: 8.53vw; line-height: 8.53vw; margin-right: 1.33vw; font-size: 3.20vw; background: #194052;}
}

/* ===============================================================
    * amenity
=============================================================== */
.room-amenity, .room-refund {display: none;}
.room-amenity.active, .room-refund.active {display: block; position: fixed; z-index: 500; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.7);}
.popup-container {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 60%; background: #fff; padding: 70px;}
.popup-close {position: absolute; right: 35px; top: 35px; font-size: 30px; color: #222; cursor: pointer;}
.popup-tit {text-align: center; font-size: 38px; letter-spacing: 0.04em; color: #222; margin-bottom: 50px;}

/* amenity */
.amenity-wrap {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.amenity-box {border-left: 1px solid #d6d6d6; width: 33.33%; padding-left: 40px;}
.amenity-box h3 {font-size: 28px; letter-spacing: 0.04em; color: #222; margin-bottom: 40px;}
.amenity-box h4 {font-size: 16px; line-height: 28px; color: #222; margin-bottom: 40px;}
.ameni-item {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 15px;}
.ameni-item:last-of-type {margin-bottom: 0;}
.ameni-item span {width: 35px; text-align: center;}
.ameni-item span img {width: 24px; height: auto; object-fit: cover;}
.ameni-item i {font-size: 22px; color: #222;}
.ameni-item p {width: calc(100% - 35px); font-size: 14px; color: #222;}

/* refund */
.refund-wrap {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.refund-box {border-left: 1px solid #d6d6d6; width: 50%; padding-left: 40px;}
.refund-box h3 {font-size: 18px; letter-spacing: 0.04em; color: #222; margin-bottom: 20px;}
.refund-box p {font-size: 15px; line-height: 26px; color: #777;}
.refund-box div.light {font-size: 15px; line-height: 26px; color: #777;}
.refund-box .refund-table {margin-top: 20px;}
.refund-box .refund-table p {font-size: 15px; line-height: 26px; color: #222;}
.refund-box .refund-table .refund-item {font-size: 15px; line-height: 26px; font-weight: 300; color: #222;}
.refund-box .refund-table .refund-item em {color: #ee3d3d;}
@media (max-width: 820px){
    .popup-container {width: calc(100% - 8.00vw); max-height: initial; height: calc(100vh - 8.00vw); top: 4.00vw; transform: translateX(-50%); padding: 16.00vw 4.00vw;}
    .popup-close {font-size: 6.67vw; right: 5.33vw; top: 5.33vw;}
    .popup-tit {font-size: 7.20vw; margin-bottom: 8.00vw;}

    /* amenity */
    .amenity-wrap {height: 95%; overflow-y: auto;}
    .amenity-wrap::-webkit-scrollbar {width: 0.93vw;}
    .amenity-wrap::-webkit-scrollbar-thumb {background-color: rgba(34,34,34,.8); background-clip: padding-box; border-radius: 1.33vw; border: 0.27vw solid transparent;}
    .amenity-wrap::-webkit-scrollbar-track {background-color: rgba(255,255,255,.2); border-radius: 1.33vw;}
    .amenity-box {width: 50%; padding-left: 4.00vw;}
    .amenity-box:last-of-type {position: relative; width: 100%; margin-top: 18.67vw;}
    .amenity-box:last-of-type:after {content: ''; position: absolute; width: 100%; left: 0; right: 0; top: -9.33vw; height: 0.13vw; background: #d6d6d6;}
    .amenity-box h3 {font-size: 5.87vw; margin-bottom: 2.67vw;}
    .amenity-box h4 {font-size: 4.27vw; line-height: 1; margin-bottom: 2.67vw;}
    .ameni-item {margin-bottom: 2.00vw;}
    .ameni-item span {width: 6.67vw;}
    .ameni-item i {font-size: 4.53vw;}
    .ameni-item p {width: calc(100% - 6.67vw); font-size: 3.73vw;}

    /* refund */
    .refund-wrap {height: 90%; overflow-y: auto;}
    .refund-box {width: 100%; padding-left: 4.00vw;}
    .refund-box:last-of-type {position: relative; margin-top: 18.67vw;}
    .refund-box:last-of-type:after {content: ''; position: absolute; width: 100%; left: 0; right: 0; top: -9.33vw; height: 0.13vw; background: #d6d6d6;}
    .refund-box h3 {font-size: 4.27vw; margin-bottom: 2.67vw;}
    .refund-box p {font-size: 3.73vw; line-height: 5.07vw;}
    .refund-box div.light {line-height: 28; line-height: 5.07vw;}
    .refund-box .refund-table {margin-top: 2.67vw;}
    .refund-box .refund-table p {font-size: 3.73vw; line-height: 5.07vw;}
    .refund-box .refund-table .refund-item {font-size: 3.73vw; line-height: 5.87vw;}
}