.main-sect { /* main的section */
    /* padding: 40px; */
}
.bread-crumbs {
    display: none;
}
.main {
    /* 2018-10-07 蓋掉 banner的動畫 */
    position: relative;
    z-index: 6;
    background-color: #fff;
}
.main::after {
    content: '';
    display: block;
    clear: both;
}
.room-info-sect-1 {
    margin-bottom: 40px;
}
.room-info-sect-title-1 { /* 客房介紹的標題 */
    position: relative;
    margin-bottom: 40px;
    padding: 20px 0;
    font-size: 1.5rem;
    font-weight: bold;
}
.room-info-sect-title-1::after {
    content: '';
    position: absolute;
    display: block;
    width: 70px;
    height: 2px;
    left: 0;
    bottom: 0;
}
.room-info-sect-title-1::before {
    content: '';
    position: absolute;
    display: block;
    width: 230px;
    height: 2px;
    left: 0;
    bottom: 0;
    background-color: #f0f0f0;
}
.room-list { /* 客房介紹(清單)的房間清單(ul容器) */
    width: 100%;
}
.masonry-sizer { /* 適應性sizer */
    width: 32%;
}
.room-list-item { /* 客房介紹(清單)的房間清單(li) */
    position: relative;
    width: 32%;
    margin-bottom: 2%;
    cursor: pointer;
}
.gutter-sizer { /* 間隔sizer */
    width: 2%;
}
.room-list::after { /* clear */
    content: '';
    display: block;
    clear: both;
}
.room-list-img { /* 客房介紹(清單)的房間清單(房間照片容器) */
    position: relative;
    overflow: hidden;
}
.room-list-img img { /* 客房介紹(清單)的房間清單(房間照片) */
    width: 100%;
    margin: auto;
    z-index: 4;
}
.room-list-txt { /* 客房介紹(清單)的房間清單(房間文字主容器) */
    display: none;
}

/* tab box */
.tab-box {
    width: 100%;
    background-color: #f9f9f9;
    line-height: 2;
}
.tab-cloud-div {
    width: 100%;
    float: left;
}
.tab-box::after,
.tab-cloud-div::after {
    content: '';
    display: block;
    clear: both;
}
.tab-cont-div {
    width: 100%;
    float: left;
}
.room-info-sect-title-3,
.room-info-sect-title-4 {
    float: left;
    position: relative;
    background: url('../images/tab-bgw.png') 0 0 no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
    cursor: pointer;
}
.room-info-sect-3,
.room-info-sect-4 {
    display: none;
}
.room-info-sect-3.active,
.room-info-sect-4.active {
    display: block;
}
.room-info-sect-title-3 { /* 客房介紹(清單)的預付訂金標題 */
    font-size: 1.25rem;
    font-weight: bold;
}
.room-info-sect-cont-3 { /* 客房介紹(清單)的預付訂金內容 */
    margin-top: 10px;
}
.room-info-sect-title-4 { /* 客房介紹(清單)的注意事項標題 */
    font-size: 1.25rem;
    font-weight: bold;
}
.room-info-sect-cont-4 { /* 客房介紹(清單)的注意事項內容 */
    margin-top: 10px;
}
.room-info-cont-head { /* 客房介紹(清單)的注意事項內容子標題(平假日定義、入退時間、入住須知) */
    font-size: 1.1rem;
    font-weight: bold;
}
.room-info-cont-div { /* 客房介紹(清單)的注意事項內容子內容(平假日定義、入退時間、入住須知) */
    padding-bottom: 30px;
}
.room-info-cont-div:last-of-type {
    padding-bottom: 0;
}
.room-info-sect-2 { /* 客房介紹(清單)的第二個區塊 - 房價表按鈕區 */
    position: relative;
    width: 100%;
    padding-bottom: 40px;
    /* float: left; */
    text-align: center;
}
.room-info-sect-2 a { /* 客房介紹(清單)的第二個區塊 - 房價表按鈕 */
    display: inline-block;
    width: 256px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 1.1rem;
}

/* online-payment(bookingcom, agoda) */
.online-payment-btn { /* 客房介紹(清單)的第三個區塊的連結區塊 - 預付訂金 */
    display: block;
    margin: auto;
    color: #000;
    margin-bottom: 20px;
}
.online-payment-btn:last-of-type {
    margin-bottom: 0;
}
.online-payment-btn img { /* 客房介紹(清單)的第三個區塊的按鈕圖片 - 預付訂金 */
    width: 100%;
}
.room-list-detail,
.room-list-link,
.room-list-mask-link {
    cursor: pointer;
}
.room-list-mask-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 6;
}

/* 3a 動態產生的popup視窗 */
.popup-div { /* 彈出視窗 - 預設隱藏 */
    position: fixed;
    display: none;
    max-width: 600px;
    width: 80%;
    /* min-height: 400px; */
    max-height: 80%;
    padding: 36px;
    top: 10%;
    left: 50%;
    transform:         translate(-50%, 0);
    transform:     -ms-translate(-50%, 0);
    transform: -webkit-translate(-50%, 0);
    z-index: 5000;
    color: #fff;
    background-color: rgba(0,0,0,0.75);
    text-shadow: 1px 1px 2px #000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.popup-inner-div { /* 彈出視窗的文字容器 */
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.popup-inner-div .room-list-name { /* 彈出視窗的文字容器 - 房間名稱 */
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 10px;
}
.popup-inner-div .room-list-head { /* 彈出視窗的文字容器 - 子標題 */
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}
.popup-inner-div .room-list-cont { /* 彈出視窗的文字容器 - 子項目 */
    margin-bottom: 20px;
}
.price::after { /* 客房介紹(清單)的房間清單(價格單位) */
    content: '元';
    display: inline;
}
.popup-btn { /* 彈出視窗右上角的關閉按鈕 */
  position: absolute;
  width: 24px;
  height: 24px;
  top: 12px;
  right: 12px;
  z-index: 11;
  opacity: .66;
  cursor: pointer;
  background: url('../../../images/lb-sld.png') no-repeat;
  background-size: 48px 48px;
  background-position: -24px 0;
}
.popup-btn:hover {
  opacity: 1;
  background-position: -24px -24px;
}

/* 瀑布流設定 */
@media screen and (min-width: 1440px) {
    .masonry-sizer {
        width: 23.5%;
    }
    .room-list-item {
        width: 23.5%;
        margin-bottom: 2%;
    }
    .gutter-sizer { /* 間隔sizer */
        width: 2%;
    }  
}
@media screen and (max-width: 1439px) and (min-width: 768px) {
    .masonry-sizer {
        width: 32%;
    }
    .room-list-item {
        width: 32%;
        margin-bottom: 2%;
    }
    .gutter-sizer { /* 間隔sizer */
        width: 2%;
    }
}
@media screen and (max-width: 767px) and (min-width: 641px) {
    .masonry-sizer {
        width: 49%;
    }
    .room-list-item {
        width: 49%;
        margin-bottom: 2%;
    }
    .gutter-sizer { /* 間隔sizer */
        width: 2%;
    }
}
@media screen and (max-width: 640px) {
    .masonry-sizer {
        width: 100%;
    }
    .room-list-item {
        width: 100%;
        margin-bottom: 4%;
    }
    .gutter-sizer { /* 間隔sizer */
        width: 0%;
    }
}

@media screen and (min-width: 1000px) {
    .main { /* main */
        /* padding: 0 12% 40px; */
    }
    .main-sect { /* main的section */
        
    }
    .room-info-sect-1,
    .room-info-sect-2 {
        padding: 5px 12% 40px;
    }
    .tab-box {
        padding: 40px 12%;
    }

    /* online-payment(bookingcom, agoda) */
    .online-payment-btn { /* 客房介紹(清單)的第三個區塊的連結區塊 - 預付訂金 */
        width: 318px;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 999px) {
    .main { /* main */
        /* padding: 0 5% 40px; */
    }
    .main-sect { /* main的section */

    }
    .room-info-sect-1,
    .room-info-sect-2 {
        padding: 5px 5% 40px;
    }
    .tab-box {
        padding: 40px 5%;
    }
    /* online-payment(bookingcom, agoda) */
    .online-payment-btn { /* 客房介紹(清單)的第三個區塊的連結區塊 - 預付訂金 */
        width: 175px; /* 3a 提早縮小 */
    }
    .online-payment-btn span { /* 客房介紹(清單)的第三個區塊的文字 - 預付訂金 */
        font-size: 0.9rem;
    }
}
@media screen and (min-width: 768px) {
    .room-list-box-3a { /* 客房介紹(清單)的房間清單(房間文字容器[3a 動態產生]) */
        /* 數值微調 2018-09-07-from Jackie request */
        position: absolute;
        width: 52%;
        height: 66%;
        top: 17%;
        right: 0;
        left: 0;
        margin: auto;
        padding: 15px 4px 0;
        opacity: 0;
        overflow: hidden;
        font-size: 1rem;
        text-align: center;
        z-index: 5;
    }
    li:hover .room-list-box-3a { /* 客房介紹(清單)的房間清單(房間文字容器[3a 動態產生]) */
        opacity: 1;
    }
    .room-list-detail { /* 客房介紹(清單)的房間清單(房間連結[3a 動態產生]) */
        position: absolute;
        display: block;
        width: 24px;
        height: 24px;
        right: 0;
        bottom: 10px;
        left: 0;
        margin: 10px auto;
        background: url('../images/i4.png') no-repeat center center;
        background-size: 100% 100%;
        z-index: 7;
        -webkit-transform: translate(-16px, 0);
            -ms-transform: translate(-16px, 0);
                transform: translate(-16px, 0);
    }

    .room-list-link { /* 客房介紹(清單)的房間清單(房間連結) */
        position: absolute;
        display: block;
        width: 24px;
        height: 24px;
        right: 0;
        bottom: 10px;
        left: 0;
        margin: 10px auto;
        background: url('../images/i5.png') no-repeat center center;
        background-size: 100% 100%;
        z-index: 7;
        -webkit-transform: translate(16px, 0);
            -ms-transform: translate(16px, 0);
                transform: translate(16px, 0);
    }


    /* 網頁下方的其他資訊 */
    /* tab box */
    .room-info-sect-title-3, /* 客房介紹(清單)的預付訂金標題 */
    .room-info-sect-title-4 { /* 客房介紹(清單)的注意事項標題 */
        width: 180px;
        height: 55px;
        line-height: 45px;
        text-align: center;
        font-size: 1.25rem;
        margin-right: 16px;
    }
}
@media screen and (max-width: 767px) {
    #bnbRoomsLinks3a {
        display: none;
    }
    .main { /* main */
        /* padding: 0 5% 40px; */
    }
    .main-sect { /* main的section */

    }
    .room-info-sect-1,
    .room-info-sect-2 {
        padding: 0 5% 40px;
    }
    .tab-box {
        padding: 40px 5%;
    }
    .room-list-box-3a { /* 客房介紹(清單)的房間清單(房間文字容器[3a 動態產生]) */
        /* 數值微調 2018-09-07-from Jackie request */
        position: absolute;
        width: 52%;
        height: 60%;
        top: 20%;
        left: 0;
        right: 0;
        margin: auto;
        padding: 10px 20px 0;
        overflow: hidden;
        font-size: 1rem;
        text-align: center;
        z-index: 5;
    }
    .room-list-detail { /* 客房介紹(清單)的房間清單(房間連結[3a 動態產生]) */
        position: absolute;
        display: block;
        width: 24px;
        height: 24px;
        right: 0;
        bottom: 12px;
        left: 0;
        margin: auto;
        background: url('../images/i4.png') no-repeat center center;
        background-size: 100% 100%;
        z-index: 7;
        -webkit-transform: translate(-24px, 0);
            -ms-transform: translate(-24px, 0);
                transform: translate(-24px, 0);
    }
    .room-list-link { /* 客房介紹(清單)的房間清單(房間連結) */
        position: absolute;
        display: block;
        width: 24px;
        height: 24px;
        right: 0;
        bottom: 12px;
        left: 0;
        margin: auto;
        background: url('../images/i5.png') no-repeat center center;
        background-size: 100% 100%;
        z-index: 7;
        -webkit-transform: translate(24px, 0);
            -ms-transform: translate(24px, 0);
                transform: translate(24px, 0);
    }

    /* 網頁下方的其他資訊 */
    .tab-box {
        padding: 40px 5%;
    }

    /* online-payment(bookingcom, agoda) */
    .online-payment-btn { /* 客房介紹(清單)的第三個區塊的連結區塊 - 預付訂金 */
        width: 175px;
    }
    .online-payment-btn span { /* 客房介紹(清單)的第三個區塊的文字 - 預付訂金 */
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 767px) and (min-width: 481px) {
    /* tab box */
    .room-info-sect-title-3,
    .room-info-sect-title-4 {
        width: 20%;
        max-width: 140px;
        height: 40px;
        line-height: 35px;
        text-align: center;
        font-size: 1rem;
        margin-right: 5%;
    }
}
@media screen and (max-width: 480px) {
    /* tab box */
    .room-info-sect-title-3,
    .room-info-sect-title-4 {
        width: 40%;
        height: 30px;
        line-height: 25px;
        text-align: center;
        font-size: 0.8rem;
        margin-right: 1%;
    }
}

.room-info-sect-3.active,
.room-info-sect-4.active {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1%, 0);
    transform: translate3d(0, 1%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1%, 0);
    transform: translate3d(0, 1%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}