.banner-height {
  height: 60vw;
}

@media screen and (max-width: 576px) {
  .banner-height {
    height: 100vw;
  }
}

.section-height {
  height: 50vw;
}

@media screen and (max-width: 576px) {
  .section-height {
    height: 150vw;
  }
}

.reg-section-space {
  padding: 5rem 1.5rem;
}

.lg-section-space {
  padding: 8rem 1rem;
}

.main-nav {
    transition: background-color .2s;
}

.main-nav.scrolled {
    --tw-bg-opacity: 1;
    background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1));
}

.nav-link {
    margin-left: 1rem;
    margin-right: 1rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    text-decoration-line: none;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .nav-link {
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        padding-left: 0px;
        padding-right: 0px;
    }
}

.nav-link.rooms-link {
    padding-left: 0.25rem;
    padding-right: 0;
}

.nav-link-box > a {
    position: relative;
}

.nav-link-box > a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background-color: white;
    bottom: -4px;
    left: 0;
    transition: .3s;
    transform-origin: center;
    transform: rotateY(-90deg);
}

.bookings-link-box.nav-link-box > a::after {
    background-color: rgba(228, 158, 42, 1);
}

.main-nav a:focus,
.nav-link-box:focus {
    outline: none;
}

.nav-link-box:hover > a::after,
.nav-link-box > a:focus::after,
.nav-link-box:focus > a::after {
    transform: rotateY(0deg);
}

.main-nav:not(:hover) .nav-link-box a.active::after {
    transform: rotateY(0deg);
}

.room-nav-sub {
    top: 3rem;
    left: 0;
    transform-origin: top;
    transform: rotateX(-90deg);
    transition: .4s;
    perspective: 1000px;
}

.rooms-nav:hover .room-nav-sub,
.rooms-nav:focus .room-nav-sub {
    transform: rotateX(0);
}

.main-nav .rooms-panel-arrows {
    display: none;
}

.main-nav .rooms-panel-arrows.expose {
    display: inline;
}

@media screen and (max-width: 767px) {
    .main-nav.expose .nav-trigger-close {
        display: inline-block;
    }

    .main-nav.expose .nav-trigger-open {
        display: none;
    }

    .main-nav .nav-trigger-open {
        display: inline-block;
    }

    .main-nav .nav-trigger-close {
        display: none;
    }

    .main-nav .nav-list {
        position: fixed;
        width: 100vw;
        z-index: 100;
        left: 0;
        top: 3rem;
        bottom: 0;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        transition: .4s;
        transform: translate3d(-100vw, 0, 0);
    }

    .main-nav.expose .nav-list {
        transform: translate3d(0, 0, 0);
    }

    .main-nav .rooms-nav { flex-direction: column; }

    .main-nav .room-nav-sub {
        display: block;
        margin-top: 1rem;
        position: relative;
        top: 0;
        transform: none;
    }

    .main-nav .nav-sub-list {
        position: absolute;
        min-height: 100vh;
        width: 100vw;
        z-index: 200;
        left: 0;
        top: 3rem;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        transition: .4s;
        transform: translate3d(-100vw, 0, 0);
    }

    .main-nav .nav-sub-list.expose {
        transform: translate3d(0, 0, 0);
    }

    .main-nav .mobile-building-list {
        display: none;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
    }

    .main-nav .mobile-building-list.expose {
        display: block;
        max-height: 1000px;
        opacity: 1;
    }
}

@media screen and (max-width: 572px) {
  .loherb-group {
    order: 3;
  }
}
.usher-out {
  visibility: hidden;
}

.usher-in {
  visibility: visible;
}

[data-usher] {
  animation-direction: normal;
  animation-fill-mode: both;
  animation-duration: .75s;
  animation-timing-function: ease-in-out;
  animation-name: none;
}

@keyframes fadeUp {
  from {opacity: 0; transform: translate3d(0,15px,0);}
  to {opacity: 1; transform: translate3d(0,0,0);}
}

@keyframes fadeInFromRight {
    from {opacity: 0; transform: translateX(50px);}
    to {opacity: 1; transform: translateX(0);}
}

@keyframes fadeInFromLeft {
    from {opacity: 0; transform: translateX(-50px);}
    to {opacity: 1; transform: translateX(0);}
}

@keyframes fadeUpSmall {
  from {opacity: 0; transform: translate3d(0,5px,0);}
  to {opacity: 1; transform: translate3d(0,0,0);}
}

.fadeUpOnLoad {
  animation-direction: normal;
  animation-fill-mode: both;
  animation-duration: .75s;
  animation-timing-function: ease-in-out;
  animation-name: fadeUp;
}

.fadeUpAfterLoad {
  animation-direction: normal;
  animation-fill-mode: both;
  animation-duration: .75s;
  animation-timing-function: ease-in-out;
  animation-name: fadeUp;
  animation-delay: .3s;
}

/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

.slide-show .flickity-button {
    background: none;
    background-repeat: no-repeat;
    background-position: center;
}
.slide-show .flickity-button:hover {
    background: none;
    background-repeat: no-repeat;
    background-position: center;
}

.slide-show .flickity-prev-next-button {
    height: 50px;
    width: 50px;
    background-size: contain;
    border-radius: 0;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.slide-show .flickity-prev-next-button .flickity-button-icon {
    display: none;
}

.slide-show .flickity-prev-next-button:hover {
    opacity: 0.8;
}

.slide-show .flickity-prev-next-button.next {
    background-image: url(/images/right_arrow.svg?2865fa0b29d75022138ce64158318433);
    right: -65px;
}

.slide-show .flickity-prev-next-button.previous {
    background-image: url(/images/left_arrow.svg?a6fdb2a6c62ead775f148d9ced1b3982);
    left: -65px;
}

.slide-show.dark .flickity-prev-next-button.next {
    background-image: url(/images/dark_right_arrow.svg?ab5e3f97912e17ff35049d65d4b840c1);
}

.slide-show.dark .flickity-prev-next-button.previous {
    background-image: url(/images/dark_left_arrow.svg?b463ccd59c2829685e6ab67e9e616467);
}

@media screen and (max-width: 576px) {
    .slide-show .flickity-prev-next-button {
        background-size: 25%;
        background-position: center;
    }
    .slide-show .flickity-page-dots .dot {
        margin: 0 4px;
    }
}

.slide-show.dark .flickity-page-dots .dot {
    --tw-bg-opacity: 1;
    background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1));
}

.slide-show .flickity-page-dots .dot {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.slide-show.low-dots .flickity-page-dots {
    bottom: -40px;
}

@media screen and (max-width: 52rem) {
    .slide-show .flickity-prev-next-button {
        top: 95%;
    }
    .slide-show .flickity-prev-next-button.next {
        right: 10px;
        background-size: 25%;
    }
    .slide-show .flickity-prev-next-button.previous {
        left: 10px;
        background-size: 25%;
    }
}

@media screen and (min-width: 80rem) {
    .slide-show.arrows-wide .flickity-prev-next-button.next {
        right: -150px;
        height: 100px;
    }
    .slide-show.arrows-wide .flickity-prev-next-button.previous {
        left: -150px;
        height: 100px;
    }
}

@media screen and (max-width: 767px) {
    .slide-show.no-arrows-medium .flickity-prev-next-button.next,
    .slide-show.no-arrows-medium .flickity-prev-next-button.previous {
        display: none;
    }
}

@media screen and (max-width: 639px) {
    .slide-show.no-arrows-small .flickity-prev-next-button.next,
    .slide-show.no-arrows-small .flickity-prev-next-button.previous {
        display: none;
    }
}

.large-slider .flickity-viewport {
    min-height: calc(100vw * 0.75);
}

@media screen and (min-width: 577px) and (max-width: 991px) {
    .large-slider .flickity-viewport {
        min-height: calc(100vw * 0.57);
    }
}

@media screen and (min-width: 992px) {
    .large-slider .flickity-viewport {
        min-height: calc((100vw - 10rem) * 0.57);
    }
}

.vhd__datepicker{position:absolute;top:3em;z-index:999;transition:all .2s ease-in-out;background-color:#fff;font-size:16px;font-family:Source Sans Pro,sans-serif,verdana,arial;line-height:.875em;overflow:hidden}.vhd__datepicker--right{right:0}.vhd__datepicker .vhd__square{position:relative;width:14.28571%;float:left}.vhd__datepicker .vhd__square:last-child{margin-bottom:1.5em}.vhd__datepicker button.next--mobile{border:1px solid #eaeaea;float:none;height:3.125em;width:100%;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;position:fixed;bottom:0;left:0;outline:none;box-shadow:0 5px 30px 10px rgba(0,0,0,.08);background:#fff}.vhd__datepicker button.next--mobile:after{background:transparent url(/images/vendor/vue-hotel-datepicker/dist/ic-arrow-right-green.regular.83ed3b6c.svg?93e0ea4a53918f0ee9bd9a32fc2e901d) no-repeat 50%/8px;transform:rotate(90deg);content:"";position:absolute;width:200%;height:200%;top:-50%;left:-50%}.vhd__datepicker--closed{box-shadow:none;max-height:0}.vhd__datepicker--open{box-shadow:0 15px 30px 10px rgba(0,0,0,.08);max-height:56.25em}@media screen and (max-width:767px){.vhd__datepicker--open{box-shadow:none;height:100%;left:0;right:0;bottom:0;-webkit-overflow-scrolling:touch!important;position:fixed;top:0;width:100%}}.vhd__datepicker__header{text-align:left;position:absolute;top:0;left:0;right:0;padding:.5em}.vhd__datepicker__header-mobile{text-align:left;position:absolute;width:100%;z-index:1}.vhd__datepicker__wrapper{position:relative;display:inline-block;width:100%;height:3em;background:#fff url(/images/vendor/vue-hotel-datepicker/dist/calendar_icon.regular.98f9a773.svg?c38f4cafa91a97bd452f99c7a8d199e7) no-repeat 1em/1em}.vhd__datepicker__wrapper *,.vhd__datepicker__wrapper :after,.vhd__datepicker__wrapper :before{box-sizing:border-box}.vhd__datepicker__wrapper--grid .vhd__square .vhd__datepicker__month-day{border:1px solid #eaeaea;margin:-1px 0 0 -1px}.vhd__datepicker__wrapper--booking .vhd__datepicker__month-day-wrapper .day{display:inline;text-align:right;padding-top:.75em;padding-right:.75em;right:0;top:0;transform:none}.vhd__datepicker__wrapper--booking .vhd__datepicker__month-day:before{display:none}.vhd__datepicker__fullview{background:none;height:auto}.vhd__datepicker__fullview .vhd__datepicker__clear-button,.vhd__datepicker__fullview .vhd__datepicker__close-button,.vhd__datepicker__fullview .vhd__datepicker__dummy-wrapper,.vhd__datepicker__fullview .vhd__hide-on-desktop{display:none}.vhd__datepicker__fullview .vhd__datepicker{position:relative;top:0}.vhd__datepicker__fullview .vhd__hide-up-to-tablet{display:block}.vhd__datepicker__fullview .vhd__datepicker__month-button{display:inline-block}.vhd__datepicker__fullview .vhd__datepicker__months{position:static;margin:0;width:auto}.vhd__datepicker__fullview .vhd__datepicker__months:before{display:none}.vhd__datepicker__fullview .vhd__datepicker__months.vhd__datepicker__months--full{width:100%!important}.vhd__datepicker__dummy-wrapper{border:1px solid #eaeaea;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;height:100%}.vhd__datepicker__dummy-wrapper--no-border.vhd__datepicker__dummy-wrapper{border:0}.vhd__datepicker__dummy-wrapper--is-active{border:1px solid #0fb8ad}.vhd__datepicker__input{background:transparent;border:0;color:#35343d;font-size:14px;height:3.43em;line-height:3.43em;outline:none;padding:0 1.875em .125em;text-align:center;width:50%;word-spacing:.3125em}.vhd__datepicker__input:focus{outline:none}.vhd__datepicker__input:-moz-placeholder,.vhd__datepicker__input:-ms-input-placeholder,.vhd__datepicker__input::-moz-placeholder,.vhd__datepicker__input::-webkit-input-placeholder{color:#35343d}@media screen and (max-width:479px){.vhd__datepicker__input{text-indent:0;text-align:center}}.vhd__datepicker__input:first-child{background:transparent url(/images/vendor/vue-hotel-datepicker/dist/ic-arrow-right-datepicker.regular.99ab0620.svg?38d376a780635ae10e835c1c1a66cac8) no-repeat 100%/8px;width:50%}.vhd__datepicker__input--is-active{color:#35343d}.vhd__datepicker__input--is-active::-moz-placeholder{color:#35343d}.vhd__datepicker__input--is-active::placeholder{color:#35343d}.vhd__datepicker__input--is-active::-moz-placeholder{color:#35343d}.vhd__datepicker__input--is-active:-ms-input-placeholder{color:#35343d}.vhd__datepicker__input--is-active:-moz-placeholder{color:#35343d}.vhd__datepicker__input--single-date:first-child{width:100%;background:none;text-align:center}.vhd__datepicker__month-day-wrapper{height:0;padding-top:calc(100% - 1px)}.vhd__datepicker__month-day-wrapper span.day{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vhd__datepicker__month-day-wrapper .price{position:absolute;top:0;width:100%;text-align:center;font-weight:700;font-size:.75em}.vhd__datepicker__month-day{visibility:visible;text-align:center;color:#35343d;cursor:pointer}.vhd__datepicker__month-day:focus{outline:none}.vhd__datepicker__month-day--today{border:0}.vhd__datepicker__month-day--today .vhd__datepicker__month-day-wrapper{border:2px solid #0fb8ad;padding-top:calc(100% - 5px)}.vhd__datepicker__month-day--invalid-range{background-color:rgba(15,184,173,.3);color:#f3f5f8;cursor:not-allowed;position:relative}.vhd__datepicker__month-day--invalid{cursor:not-allowed;pointer-events:none}.vhd__datepicker__month-day--allowed-checkout:hover,.vhd__datepicker__month-day--valid:hover{background-color:#0fb8ad;color:#fff}.vhd__datepicker__month-day--disabled{opacity:1;background:#f5f7f8;color:#d8d8d8;cursor:not-allowed;pointer-events:none;font-weight:400}.vhd__datepicker__month-day--disabled span{text-decoration:line-through}.vhd__datepicker__month-day--not-allowed.vhd__currentDay,.vhd__datepicker__month-day--valid.vhd__datepicker__month-day--not-allowed,.vhd__datepicker__month-day--valid.vhd__datepicker__month-day--not-allowed:hover{color:#35343d;font-weight:400;cursor:default;background:transparent}.vhd__datepicker__month-day--not-allowed.vhd__currentDay span,.vhd__datepicker__month-day--valid.vhd__datepicker__month-day--not-allowed:hover span,.vhd__datepicker__month-day--valid.vhd__datepicker__month-day--not-allowed span{text-decoration:none}.vhd__datepicker__month-day--hovering.vhd__datepicker__month-day--not-allowed:hover{cursor:pointer}.vhd__datepicker__month-day--halfCheckIn,.vhd__datepicker__month-day--halfCheckOut{position:relative;overflow:hidden}.vhd__datepicker__month-day--halfCheckIn:before,.vhd__datepicker__month-day--halfCheckOut:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:"";z-index:-1;height:0;width:0;border-bottom:120px solid #f5f7f8;border-left:120px solid transparent}.vhd__datepicker__month-day--halfCheckOut:before{border-top:120px solid #f5f7f8;border-bottom:0;border-left:0;border-right:120px solid transparent}.vhd__datepicker__month-day--selected{background-color:rgba(15,184,173,.7);color:#fff}.vhd__datepicker__month-day--selected span{text-decoration:none}.vhd__datepicker__month-day--selected:hover{font-weight:700;background-color:#0fb8ad;color:#fff;z-index:1}.vhd__datepicker__month-day--hovering{background-color:rgba(15,184,173,.7);color:#fff;font-weight:700;cursor:pointer}.vhd__datepicker__month-day--hovering span{text-decoration:none}.vhd__datepicker__month-day--first-day-selected,.vhd__datepicker__month-day--last-day-selected{background:#0fb8ad;color:#fff;cursor:pointer;font-weight:700;pointer-events:auto}.vhd__datepicker__month-day--first-day-selected span,.vhd__datepicker__month-day--last-day-selected span{text-decoration:none}.vhd__datepicker__month-day--allowed-checkout{color:#424b53}.vhd__datepicker__month-day--out-of-range{color:#f3f5f8;cursor:not-allowed;font-weight:400;position:relative;pointer-events:none}.vhd__datepicker__month-day--out-of-range span{text-decoration:none}.vhd__datepicker__month-day--valid{cursor:pointer;font-weight:700}.vhd__datepicker__month-day--valid.vhd__datepicker__month-day--halfCheckIn.vhd__datepicker__month-day--last-day-selected{color:#fff}.vhd__datepicker__month-day--hidden{opacity:0;pointer-events:none}.vhd__datepicker__month-button{background:transparent url(/images/vendor/vue-hotel-datepicker/dist/ic-arrow-right-green.regular.83ed3b6c.svg?93e0ea4a53918f0ee9bd9a32fc2e901d) no-repeat 50%/8px;width:2.5em;height:2.5em;border:1px solid #00ca9d;outline:none;text-align:center;cursor:pointer;opacity:1;transition:opacity .5s ease}.vhd__datepicker__month-button:hover{opacity:.65}.vhd__datepicker__month-button:focus{outline:none}.vhd__datepicker__month-button--prev{transform:rotateY(180deg)}.vhd__datepicker__month-button--next{float:right}.vhd__datepicker__month-button[disabled]{opacity:.2;cursor:not-allowed;pointer-events:none}.vhd__datepicker__inner{padding:0 2.5rem;position:relative;height:calc(100% - 3em)}@media screen and (max-width:767px){.vhd__datepicker__inner{padding:0}}.vhd__datepicker__months-wrapper{height:100%}.vhd__datepicker__months-wrapper .vhd__datepicker__months{margin-top:0;height:100%}.vhd__datepicker__months-wrapper .vhd__datepicker__months .vhd__datepicker__month .vhd__datepickerweek-name{font-size:1.25em}.vhd__datepicker .vhd__show-tooltip .vhd__datepicker__months{margin-top:10em;height:calc(100% - 10em)}.vhd__datepicker .vhd__show-tooltip .vhd__datepicker__tooltip--mobile{height:auto;opacity:1;padding:1em;visibility:visible}@media screen and (min-width:768px){.vhd__datepicker__months{display:flex;flex-wrap:wrap;width:40.625em;justify-content:space-between}.vhd__datepicker__months.vhd__datepicker__months--full{width:20.3125em!important}}@media screen and (max-width:767px){.vhd__datepicker__months{margin-top:5.625em;height:calc(100% - 5.625em);position:absolute;left:0;top:0;overflow-y:scroll;right:0;bottom:0;transition:all .2s ease}}.vhd__datepicker__months:before{content:"";background:#eaeaea;bottom:0;display:block;left:50%;position:absolute;top:0;width:1px}@media screen and (max-width:767px){.vhd__datepicker__months:before{display:none}}.vhd__datepicker__months--full .vhd__datepicker__month{width:100%!important;padding:0}.vhd__datepicker__months--full:before{display:none}.vhd__datepicker__month{font-size:.75em;width:50%;padding-right:.83334em}@media screen and (max-width:767px){.vhd__datepicker__month{width:100%;padding-right:0;padding-top:5em;height:30em}.vhd__datepicker__month:last-of-type{margin-bottom:5.416667em}}@media screen and (min-width:768px){.vhd__datepicker__month:last-of-type{padding-right:0;padding-left:.83334em}}.vhd__datepicker__month--with-week-numbers{position:relative}.vhd__datepicker__month--with-week-numbers .vhd__datepicker__weeknumbers{position:absolute;top:4.5rem;bottom:.875rem;display:flex;flex-direction:column}.vhd__datepicker__month--with-week-numbers .vhd__datepicker__weeknumbers__number{display:flex;align-items:center;width:2rem;height:16.66667%;margin:-.5px 0 0}.vhd__datepicker__month--with-week-numbers:first-child{padding-left:2rem}.vhd__datepicker__month--with-week-numbers:first-child .vhd__datepicker__weeknumbers{left:0}.vhd__datepicker__month--with-week-numbers:last-child{padding-right:2rem}.vhd__datepicker__month--with-week-numbers:last-child .vhd__datepicker__weeknumbers{right:0}.vhd__datepicker__month--with-week-numbers:last-child .vhd__datepicker__weeknumbers__number{justify-content:flex-end}.vhd__datepicker__month-caption{height:2.5em;vertical-align:middle}.vhd__datepicker__month-name{font-size:16px;font-weight:700;margin:0;padding:0 0 1.625em;pointer-events:none;text-align:center;line-height:2em;height:2.5em;padding-top:.5em}@media screen and (max-width:767px){.vhd__datepicker__month-name{margin-top:-3.125em;margin-bottom:0;position:absolute;width:100%}}.vhd__datepicker__week-days{height:2em;vertical-align:middle}.vhd__datepicker__week-row{height:2.5em;line-height:2.5em}@media screen and (max-width:767px){.vhd__datepicker__week-row{box-shadow:0 8px 12px 0 rgba(0,0,0,.1)}}.vhd__datepicker__week-name{width:14.28571%;float:left;font-size:1em;font-weight:400;color:#424b53;text-align:center}.vhd__datepicker__close-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:#35343d;cursor:pointer;font-size:1.3125em;font-weight:700;margin-top:0;outline:0;z-index:10000;position:fixed;right:.7143em;top:0;height:2.286em;line-height:2.286em}.vhd__datepicker__close-button i{display:block;font-style:inherit;transform:rotate(45deg)}.vhd__datepicker__clear-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;font-size:1.5625em;font-weight:700;height:100%;margin:0;padding:0;position:absolute;right:0;top:0;width:1.6em}.vhd__datepicker__clear-button svg{fill:none;stroke-linecap:round;stroke-width:.32em;stroke:#424b53;width:.56em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vhd__datepicker__clear-button:focus{outline:none}.vhd__datepicker__tooltip{background-color:#2d3047;border-radius:2px;color:#fff;font-size:11px;padding:0,45em 0,91em;position:absolute;z-index:50;left:50%;bottom:100%;white-space:nowrap;transform:translateX(-50%);text-align:center}.vhd__datepicker__tooltip--mobile{height:0;opacity:0;visibility:hidden;padding:0 1.1em;border:1px solid #d7d9e2;font-size:14px;line-height:1.4;transition:all .2s ease}.vhd__datepicker__tooltip:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #2d3047;bottom:-.364em;content:"";left:50%;margin-left:-.364em;position:absolute}.-vhd__is-hidden{display:none}@media screen and (max-width:767px){.vhd__hide-up-to-tablet{display:none}}@media screen and (min-width:768px){.vhd__hide-on-desktop{display:none}}.vhd__parent-bullet{top:50%;height:100%;display:block;z-index:-1}.vhd__parent-bullet,.vhd__parent-bullet .vhd__bullet{position:absolute;left:50%;transform:translate(-50%,-50%);width:100%}.vhd__parent-bullet .vhd__bullet{top:60%;height:4px;transition:opacity .3s ease}@media screen and (min-width:768px){.vhd__parent-bullet .vhd__bullet{top:50%}}.vhd__parent-bullet .vhd__bullet.vhd__checkIn,.vhd__parent-bullet .vhd__bullet.vhd__checkInCheckOut,.vhd__parent-bullet .vhd__bullet.vhd__checkOut{width:.5em;height:1.125em;border-radius:.625em}.vhd__parent-bullet .vhd__bullet.vhd__checkIn.vhd__bullet--small,.vhd__parent-bullet .vhd__bullet.vhd__checkInCheckOut.vhd__bullet--small,.vhd__parent-bullet .vhd__bullet.vhd__checkOut.vhd__bullet--small{height:.375em;width:.875em}.vhd__parent-bullet .vhd__bullet.vhd__checkInCheckOut{left:calc(50% - 1em)}.vhd__parent-bullet .vhd__pipe{display:block;width:100%;height:4px;position:absolute;top:60%;transform:translateY(-50%);transition:opacity .3s ease}@media screen and (min-width:768px){.vhd__parent-bullet .vhd__pipe{top:50%}}.vhd__parent-bullet .vhd__pipe.pipe--small{height:3px}.vhd__parent-bullet .vhd__pipe.vhd__checkIn{left:calc(50% + 4px);width:calc(50% - 4px)}.vhd__parent-bullet .vhd__pipe.vhd__checkOut{left:0;width:calc(50% - 4px)}.vhd__parent-bullet .vhd__pipe.vhd__checkInCheckOut{width:calc(50% - 1.1875em)}
/* 預約旅程區塊 Booking Form, vue-hotel-datepicker */
.vhd__datepicker__wrapper { 
    /* 日期的圖示 */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNi45NSAyNC41Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMiwuY2xzLTN7ZmlsbDpub25lO3N0cm9rZTojMDg0MTM3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uY2xzLTF7c3Ryb2tlLXdpZHRoOjJweDt9LmNscy0ye3N0cm9rZS13aWR0aDowLjc0cHg7fS5jbHMtM3tzdHJva2Utd2lkdGg6Mi4zM3B4O308L3N0eWxlPjwvZGVmcz48dGl0bGU+Y2FsZW5kYXI8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJXZWJwYWdlIj48cmVjdCBjbGFzcz0iY2xzLTEiIHg9IjEiIHk9IjIuMTciIHdpZHRoPSIyNC45NSIgaGVpZ2h0PSIyMS4zMyIvPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjYuMDYiIHgyPSI2LjA2IiB5Mj0iNC4zNCIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjYuMDYiIHgyPSI2LjA2IiB5Mj0iNC4zNCIvPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjIwLjUyIiB5MT0iMC4zNiIgeDI9IjIwLjUyIiB5Mj0iNC43Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMjAuNTIiIHkxPSIwLjM2IiB4Mj0iMjAuNTIiIHkyPSI0LjciLz48bGluZSBjbGFzcz0iY2xzLTMiIHgxPSIzLjc2IiB5MT0iOC43NSIgeDI9IjcuMTEiIHkyPSI4Ljc1Ii8+PGxpbmUgY2xhc3M9ImNscy0zIiB4MT0iMy43NiIgeTE9IjE0LjA1IiB4Mj0iNy4xMSIgeTI9IjE0LjA1Ii8+PGxpbmUgY2xhc3M9ImNscy0zIiB4MT0iMy43NiIgeTE9IjE5LjM2IiB4Mj0iNy4xMSIgeTI9IjE5LjM2Ii8+PGxpbmUgY2xhc3M9ImNscy0zIiB4MT0iOS4xMiIgeTE9IjguNzUiIHgyPSIxMi40NyIgeTI9IjguNzUiLz48bGluZSBjbGFzcz0iY2xzLTMiIHgxPSI5LjEyIiB5MT0iMTQuMDUiIHgyPSIxMi40NyIgeTI9IjE0LjA1Ii8+PGxpbmUgY2xhc3M9ImNscy0zIiB4MT0iOS4xMiIgeTE9IjE5LjM2IiB4Mj0iMTIuNDciIHkyPSIxOS4zNiIvPjxsaW5lIGNsYXNzPSJjbHMtMyIgeDE9IjE0LjQ4IiB5MT0iOC43NSIgeDI9IjE3LjgzIiB5Mj0iOC43NSIvPjxsaW5lIGNsYXNzPSJjbHMtMyIgeDE9IjE0LjQ4IiB5MT0iMTQuMDUiIHgyPSIxNy44MyIgeTI9IjE0LjA1Ii8+PGxpbmUgY2xhc3M9ImNscy0zIiB4MT0iMTQuNDgiIHkxPSIxOS4zNiIgeDI9IjE3LjgzIiB5Mj0iMTkuMzYiLz48bGluZSBjbGFzcz0iY2xzLTMiIHgxPSIxOS44MyIgeTE9IjguNzUiIHgyPSIyMy4xOCIgeTI9IjguNzUiLz48bGluZSBjbGFzcz0iY2xzLTMiIHgxPSIxOS44MyIgeTE9IjE0LjA1IiB4Mj0iMjMuMTgiIHkyPSIxNC4wNSIvPjxsaW5lIGNsYXNzPSJjbHMtMyIgeDE9IjE5LjgzIiB5MT0iMTkuMzYiIHgyPSIyMy4xOCIgeTI9IjE5LjM2Ii8+PC9nPjwvZz48L3N2Zz4=);
    background-position-x: 17px;
    background-position-y: center;
    background-size: 16px;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: #fff;
    height: auto;
}

.vhd__datepicker__tooltip { /* 提示文字 */
    padding: 5px 8px;
}
.vhd__datepicker .vhd__show-tooltip .vhd__datepicker__tooltip--mobile { /* 手機版提示文字 */
    padding: 0 4.1em;
    border: 0;
}
@media (max-width: 767px) { /* 手機版 */
    .vhd__datepicker .vhd__show-tooltip .vhd__datepicker__months,
    .vhd__datepicker__months {
        margin-top: 0;
        height: 100%;
        overflow-y: hidden; /* 不要捲動 滑動會切下一頁 */
    }
    .vhd__datepicker__month {
        padding-top: 4em;
        clear: both;
    }
    .vhd__hide-up-to-tablet { 
        display: block; /*不要隱藏星期幾*/
    }
    .vhd__datepicker .vhd__square:last-child {
        margin-bottom: 0; /* 最後一天不要加底間距 */
    }
    .vhd__datepicker__month-day--valid.vhd__datepicker__month-day--not-allowed {
        background-color: #0fb8ad; /* 只選一天也顯示背景顏色 */
    }
    .vhd__datepicker__month-day--valid:hover { /* 選擇日期框滑過時 */
        background-color: transparent; 
        color: black; 
        box-shadow: 0 0 10px 3px rgba(66,75,83,.2);
    }
}
/* 選擇日期框的大小 */
@media (min-width: 768px) {
    .vhd__datepicker__inner {
        padding: 0 1.25rem;
    }
}
@keyframes fadeOut {
    from { opacity: 1; } 
    to { opacity: 0; }
}
.home-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
    animation: fadeOut 3s forwards;
}

@media screen and (min-width: 576px) {
    .home-page .main-nav:not(.scrolled) {
        background-color: transparent;
    }
}

.home-banner {
    background-image: url(/images/home_banner_2024.jpg?6fe95227c2f273a62ff2cd058bc6975a);
    background-size: cover;
    background-position: center top;
}

@media screen and (max-width: 577px) {
    .home-banner {
        background-image: url(/images/home_banner_2024_m.jpg?08fdb793ac1ed31dd7686be7f42a67f1);
    }
}

/* 感言區塊，環境一流 */
.testimonial-section {
    background-image: url(/images/home_villa_room.jpg?3dd3fc2e0eba9e983e08e7c34185a1c3);
    background-size: cover;
    background-position: center;
}

.nightview-section {
    background-image: url(/images/night_view_2x1.jpg?41a8610a71db623bfe9ccdc31af41bd9);
    background-size: cover;
    background-position: center;
}

.waterrelax-section {
    background-image: url(/images/home_water_relax.jpg?6f3c2e00e27293e5583dabfc25b610b4);
    background-size: cover;
    background-position: center;
}

.celebration-section {
    background-image: url(/images/home_celebration.jpg?441547b33f4ae5238af76758fe6d2756);
    background-size: cover;
    background-position: center;
}

.wedding-section {
    background-image: url(/images/home_wedding.jpg?eb8663f40a0e49dc07f10e731780fbc7);
    background-size: cover;
    background-position: center;
}

.cuisine-section {
    background-image: url(/images/home_cuisine.jpg?5bcbd4c1c60ccb4c593fa27e5c679dbe);
    background-size: cover;
    background-position: center;
}

.teatime-section {
    background-image: url(/images/home_teatime.jpg?0df6c9b178e79983cd2ac1e560b42894);
    background-size: cover;
    background-position: center;
}

.instagram-image-box {
    flex: 1;
}

.instagram-image-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

@media screen and (max-width: 577px) {
    .instagram-image-box {
        flex-basis: 50%;
    }
}




.room-banner {
  background-size: cover;
  background-position: center;
}

.lily-room .room-banner {
  background-image: url(/images/lily_banner.jpg?4afbf587279b2df8e09c711e1990b5ab);
}

.rose-room .room-banner {
  background-image: url(/images/rose_banner.jpg?4418f000dc114bd2247d38ebc7ea588e);
}

.sunflower-room .room-banner {
  background-image: url(/images/sunflower_banner.jpg?4d071a5953447cc3245c19827e6d3bf7);
}

.orchid-room .room-banner {
  background-image: url(/images/orchid_banner.jpg?95b879cbdb17d9425dc7b1c1380b0e20);
}

.frangipani-room .room-banner {
  background-image: url(/images/frangipani_banner.jpg?ade02e64f5fd95d3307769a86eef9104);
}

.plum-room .room-banner {
  background-image: url(/images/plum_banner.jpg?d4a4ea548d1cce0435bd9a9436cb69f4);
}

.villa-room .room-banner {
  background-image: url(/images/villa_banner.jpg?4c101c4d62679e5f8fa33207b8780553);
}

.room-gallery {
  padding: 0;
}

.flickity-page-dots {
  bottom: 20px;
}

.room-preview.left picture {
  order: 2;
}



.about-banner {
  background-image: url(/images/about_banner.jpg?7a2f337114279a5e51798a30e4715a27);
  background-size: cover;
  background-position: center;
}

.about-one {
  background-image: url(/images/building_view_2x1.jpg?1e65fc4fcb8b3ce8799d638a56271652);
  background-size: cover;
  background-position: 80% 50%;
}

.about-two {
  background-image: url(/images/internal_top_down.jpg?287c6a58337770b3cc1dac3ccb0d68fa);
  background-size: cover;
  background-position: center;
}

.about-three {
  background-image: url(/images/about_three.jpg?bb2b3d5aaa422ae5e6abf2b0595ed23b);
  background-size: cover;
  background-position: center;
}

.journal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 576px) {
    .journal-grid {
        grid-template-columns: 1fr;
    }
}

/*
@media screen and (min-width: 577px) and (max-width: 900px) {
    .journal-grid {
        grid-template-columns: 1fr 1fr;
    }
}
*/

.journal-entry { font-size: 1.25rem; }
.journal-entry h1 {
    font-family: Noto Serif TC, bodoni-urw, Constantia, Lucida, Lucida Bright, Lucidabright, Lucida Serif, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
    font-size: 2.125rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1;
}
html:lang(zh) .journal-entry h1 {
    font-weight: 700;
    line-height: 2.5rem;
}
.journal-entry h1 {
    font-size: 2.125rem; line-height: 1.6;
}
.journal-entry h2 {
    font-family: Noto Serif TC, bodoni-urw, Constantia, Lucida, Lucida Bright, Lucidabright, Lucida Serif, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.25rem;
}
html:lang(zh) .journal-entry h2 {
    font-weight: 700;
}
@media (min-width: 768px) {

    .journal-entry h2 {
        line-height: 1.75rem;
    }
}
.journal-entry h2 {
    font-size: 1.75rem; line-height: 1.6;
}
.journal-entry h3 {
    font-weight: 700;
    font-size: 1.5rem; line-height: 1.6;
}
.journal-entry h4 {
    font-weight: 700;
    font-size: 1.25rem; line-height: 1.6;
}

.journal-entry img { display: block; margin: 3rem auto; }
.journal-entry figcaption {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.journal-entry img + figcaption:not(:empty) {
    margin-top: -2rem;
}

.journal-entry .instagram-media {
    margin-left: auto !important;
    margin-right: auto !important;
}

.journal-entry figure {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.journal-entry iframe {
    max-width: 100%;
}

.journal-entry a {
    --tw-text-opacity: 1;
    color: rgb(8 65 55 / var(--tw-text-opacity, 1));
    text-decoration-line: none;
}

.journal-entry a:hover {
    --tw-text-opacity: 1;
    color: rgb(52 108 98 / var(--tw-text-opacity, 1));
    text-decoration-line: underline;
}

.journal-entry .aspect-16-9 {
    position: relative; padding-bottom: 56.25%; height: 0; margin: auto;
}
.journal-entry .aspect-16-9 iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* trix 工具列的段落 Quote 與 Code 樣式 */
.journal-entry blockquote {
  margin: 0 0 0 0.3em; padding: 0 0 0 0.6em;
  border-left: 0.3em solid #ccc;
}
.journal-entry pre {
  display: inline-block; width: 100%; vertical-align: top;
  font-size: 0.9em; font-family: consolas, monospace; 
  margin: 0; padding: 0.5em; white-space: pre;
  background-color: #eee; overflow-x: auto;
}
/* trix 工具列的 List 樣式 */
.journal-entry ul { list-style-type: disc; }
.journal-entry ol { list-style-type: decimal; }

.journal-entry ul, .journal-entry ol, .journal-entry li {
  margin: 0; padding: 0;
}
.journal-entry ul li, .journal-entry ol li, .journal-entry li li {
  margin-left: 1em;
}

/* 在顏色相關的樣式中添加 */
base-color {
    --tw-text-opacity: 1;
    color: rgb(8 65 55 / var(--tw-text-opacity, 1));
}
sub-color1 {
    --tw-text-opacity: 1;
    color: rgb(222 236 231 / var(--tw-text-opacity, 1));
}
sub-color2 {
    --tw-text-opacity: 1;
    color: rgb(249 241 239 / var(--tw-text-opacity, 1));
}
bg-base-color {
    --tw-bg-opacity: 1;
    background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1));
}
bg-sub-color1 {
    --tw-bg-opacity: 1;
    background-color: rgb(222 236 231 / var(--tw-bg-opacity, 1));
}
bg-sub-color2 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 241 239 / var(--tw-bg-opacity, 1));
}

/* 背景色區塊 */
block-base, block-sub1, block-sub2, block-black, block-yellow, block-red, block-green, block-blue, block-gray {
  display: block; padding: .5rem; border-radius: 5px; line-height: normal;
}
block-base {
    --tw-bg-opacity: 1;
    background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1));
}
block-base span {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1)) !important;
}
block-sub1 {
    --tw-bg-opacity: 1;
    background-color: rgb(222 236 231 / var(--tw-bg-opacity, 1));
}
block-sub1 span {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(222 236 231 / var(--tw-bg-opacity, 1)) !important;
}
block-sub2 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 241 239 / var(--tw-bg-opacity, 1));
}
block-sub2 span {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(249 241 239 / var(--tw-bg-opacity, 1)) !important;
}

block-black {
    --tw-bg-opacity: 1;
    background-color: rgb(46 48 45 / var(--tw-bg-opacity, 1));
}
block-yellow {
    --tw-bg-opacity: 1;
    background-color: rgb(255 243 205 / var(--tw-bg-opacity, 1));
}
block-red {
    --tw-bg-opacity: 1;
    background-color: rgb(248 215 218 / var(--tw-bg-opacity, 1));
}
block-green {
    --tw-bg-opacity: 1;
    background-color: rgb(212 237 218 / var(--tw-bg-opacity, 1));
}
block-blue {
    --tw-bg-opacity: 1;
    background-color: rgb(204 229 255 / var(--tw-bg-opacity, 1));
}
block-gray {
    --tw-bg-opacity: 1;
    background-color: rgb(226 227 229 / var(--tw-bg-opacity, 1));
}

block-center { display: block; text-align: center; }

.journal-entry .video-embed {
  height: 414px; max-width: 100%;
}
@media screen and (max-width: 576px) {
  .journal-entry .video-embed { height: 200px; }
}
.youtube-thumbnail {
  display: flex; align-items: center; justify-content: center;
  height: 100%; overflow: hidden; position: relative;
}
.youtube-thumbnail img {
  max-width: 100%; width:100%; -o-object-fit: cover; object-fit: cover; 
}
.youtube-thumbnail::after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="77px" height="77px" viewBox="0 0 260 180"><path d="M220,2H40C19.01,2,2,19.01,2,40v100c0,20.99,17.01,38,38,38h180c20.99,0,38-17.01,38-38V40C258,19.01,240.99,2,220,2z M102,130V50l68,40L102,130z"/></svg>') no-repeat center transparent;
    content: ""; width: 77px; height: 77px; position: absolute; top: 50%; left: 50%; 
    margin-left: -38px; margin-top: -38px; opacity: .6; pointer-events: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Noto Sans TC, transat-bold, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
    sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
    sup { top: -0.3em; vertical-align: super;}
    sub { bottom: -0.25em; vertical-align: sub;}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-16 {
  bottom: 4rem;
}
.left-0 {
  left: 0px;
}
.right-0 {
  right: 0px;
}
.right-12 {
  right: 3rem;
}
.top-0 {
  top: 0px;
}
.top-12 {
  top: 3rem;
}
.top-2 {
  top: 0.5rem;
}
.top-50 {
  top: 50%;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.m-2 {
  margin: 0.5rem;
}
.m-3 {
  margin: 0.75rem;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-20 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.my-28 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-32 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-8 {
  margin-left: 2rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0 {
  margin-right: 0px;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mr-8 {
  margin-right: 2rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-8 {
  height: 2rem;
}
.h-\[60\%\] {
  height: 60%;
}
.h-full {
  height: 100%;
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-120w {
  min-height: 120vw;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-1\/5 {
  width: 20%;
}
.w-12 {
  width: 3rem;
}
.w-20 {
  width: 5rem;
}
.w-3\/4 {
  width: 75%;
}
.w-3\/5 {
  width: 60%;
}
.w-40 {
  width: 10rem;
}
.w-64 {
  width: 16rem;
}
.w-80 {
  width: 20rem;
}
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vw;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
  cursor: pointer;
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(2px * var(--tw-divide-x-reverse));
  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-brown-dark > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(145 118 97 / var(--tw-divide-opacity, 1));
}
.divide-green-main > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(8 65 55 / var(--tw-divide-opacity, 1));
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-brown-dark {
  --tw-border-opacity: 1;
  border-color: rgb(145 118 97 / var(--tw-border-opacity, 1));
}
.border-brown-light {
  --tw-border-opacity: 1;
  border-color: rgb(234 196 159 / var(--tw-border-opacity, 1));
}
.border-green-main {
  --tw-border-opacity: 1;
  border-color: rgb(8 65 55 / var(--tw-border-opacity, 1));
}
.border-green-mid {
  --tw-border-opacity: 1;
  border-color: rgb(171 213 199 / var(--tw-border-opacity, 1));
}
.bg-cream-light {
  --tw-bg-opacity: 1;
  background-color: rgb(254 244 242 / var(--tw-bg-opacity, 1));
}
.bg-green-main {
  --tw-bg-opacity: 1;
  background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1));
}
.bg-green-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(218 237 231 / var(--tw-bg-opacity, 1));
}
.bg-green-softest {
  --tw-bg-opacity: 1;
  background-color: rgb(244 249 247 / var(--tw-bg-opacity, 1));
}
.bg-ivory {
  --tw-bg-opacity: 1;
  background-color: rgb(253 253 250 / var(--tw-bg-opacity, 1));
}
.bg-opaque {
  background-color: rgba(254,244,242,.9);
}
.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(204 31 26 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-trans-ivory {
  --tw-gradient-from: rgba(253,253,253,0) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(253, 253, 253, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-ivory {
  --tw-gradient-to: rgb(253 253 250 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #FDFDFA var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-ivory {
  --tw-gradient-to: #FDFDFA var(--tw-gradient-to-position);
}
.bg-cover {
  background-size: cover;
}
.fill-current {
  fill: currentColor;
}
.stroke-current {
  stroke: currentColor;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-16 {
  padding-left: 4rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-sans {
  font-family: Noto Sans TC, transat-bold, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.font-serif {
  font-family: Noto Serif TC, bodoni-urw, Constantia, Lucida, Lucida Bright, Lucidabright, Lucida Serif, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
}
.text-3xl {
  font-size: 3rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.25rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(34 41 47 / var(--tw-text-opacity, 1));
}
.text-brown-dark {
  --tw-text-opacity: 1;
  color: rgb(145 118 97 / var(--tw-text-opacity, 1));
}
.text-brown-light {
  --tw-text-opacity: 1;
  color: rgb(234 196 159 / var(--tw-text-opacity, 1));
}
.text-chocolate {
  --tw-text-opacity: 1;
  color: rgb(85 69 57 / var(--tw-text-opacity, 1));
}
.text-cream-light {
  --tw-text-opacity: 1;
  color: rgb(254 244 242 / var(--tw-text-opacity, 1));
}
.text-gold {
  --tw-text-opacity: 1;
  color: rgb(228 158 42 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-green-main {
  --tw-text-opacity: 1;
  color: rgb(8 65 55 / var(--tw-text-opacity, 1));
}
.text-green-mid {
  --tw-text-opacity: 1;
  color: rgb(171 213 199 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.no-underline {
  text-decoration-line: none;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
svg {
        fill: currentColor;
    }
.footer {
        background: url(/images/villa_footer_pattern.jpg?f8f0e0f4312fd1bb5166d7d2972dc873);
        background-size: 8px auto;
    }
picture {
        font-size: 0;
    }
#mybookings-frame {
  margin-top: 3rem;
}
@media (min-width: 768px) {

  #mybookings-frame {
    margin-top: 0px;
  }
}
html:lang(zh) #mybookings-frame {
  margin-top: 0px;
}
@media (min-width: 768px) {

  html:lang(zh) #mybookings-frame {
    margin-top: -3rem;
  }
}
/* type */
.type-a1 {
  font-family: Noto Sans TC, atrament-web, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
}
.type-a2 {
  font-family: Noto Sans TC, atrament-web, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}
.type-h0 {
  font-family: Noto Serif TC, bodoni-urw, Constantia, Lucida, Lucida Bright, Lucidabright, Lucida Serif, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1;
}
@media (min-width: 768px) {

  .type-h0 {
    font-size: 4rem;
  }
}
.type-h1 {
  font-family: Noto Serif TC, bodoni-urw, Constantia, Lucida, Lucida Bright, Lucidabright, Lucida Serif, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
  font-size: 2.125rem;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1;
}
html:lang(zh) .type-h1 {
  font-weight: 700;
  line-height: 2.5rem;
}
.type-h2 {
  font-family: Noto Serif TC, bodoni-urw, Constantia, Lucida, Lucida Bright, Lucidabright, Lucida Serif, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.25rem;
}
html:lang(zh) .type-h2 {
  font-weight: 700;
}
@media (min-width: 768px) {

  .type-h2 {
    line-height: 1.75rem;
  }
}
.type-b1 {
  font-family: Noto Sans TC, transat-bold, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1rem;
  line-height: 1.75rem;
}
html:lang(zh) .type-b1 {
  line-height: 2rem;
}
@media (min-width: 768px) {

  .type-b1 {
    font-size: 1.25rem;
  }
}
.type-b2 {
  font-family: Noto Sans TC, transat-bold, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}
.type-b3 {
  font-family: Noto Sans TC, transat-bold, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.type-b5 {
  font-family: Noto Serif TC, bodoni-urw, Constantia, Lucida, Lucida Bright, Lucidabright, Lucida Serif, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
  font-size: 3rem;
  font-style: italic;
}
html:lang(zh) .type-b5 {
  font-size: 2.125rem;
}
@media (min-width: 768px) {

  .type-b5 {
    font-size: 3rem;
  }
}
.type-b7 {
  font-family: Noto Sans TC, transat-bold, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.type-b8 {
  font-family: Noto Sans TC, transat-bold, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.25;
}
/* button-links */
.btn {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  letter-spacing: 0.025em;
  font-family: Noto Sans TC, atrament-web, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
}
.inline-button {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  letter-spacing: 0.025em;
  font-family: Noto Sans TC, atrament-web, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
}
.btn-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(204 31 26 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-green {
  --tw-bg-opacity: 1;
  background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-green:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(52 108 98 / var(--tw-bg-opacity, 1));
}
.btn-green-ghost {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(8 65 55 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(8 65 55 / var(--tw-text-opacity, 1));
}
.btn-green-ghost:hover {
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(8 65 55 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(254 244 242 / var(--tw-text-opacity, 1));
}
.text-link {
  letter-spacing: 0.025em;
  text-decoration-line: none;
  font-family: Noto Sans TC, atrament-web, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
}
.text-link .arrow {
        transition: 0.3s;
        transform: translate3d(0, 0, 0);
    }
.text-link:hover .arrow {
        transform: translate3d(4px, 0, 0);
    }

@font-face {
    font-family: "transat-bold";
    src: url(/fonts/transat_bold-webfont.woff?fddfc1d9adbc2a60b8bbc64046c3dfa9),
        url(/fonts/transat_bold-webfont.woff2?bb0e16b1ebc6022277be932e4f25b855);
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "transat-bold";
    src: url(/fonts/transat_standard-webfont.woff?746f1b18e939979f29af9a0c0347a32a),
        url(/fonts/transat_standard-webfont.woff2?3af995e87bedd33626be102c331dd2b8),
        url(/fonts/transat_standard-webfont.ttf?c50f33a7b602a06ac92d5fb53cc18c81);
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.hover\:bg-green-main:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(8 65 55 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-softest:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 249 247 / var(--tw-bg-opacity, 1));
}

.hover\:text-gold:hover {
  --tw-text-opacity: 1;
  color: rgb(228 158 42 / var(--tw-text-opacity, 1));
}

.hover\:text-green-main:hover {
  --tw-text-opacity: 1;
  color: rgb(8 65 55 / var(--tw-text-opacity, 1));
}

.hover\:text-green-mid:hover {
  --tw-text-opacity: 1;
  color: rgb(171 213 199 / var(--tw-text-opacity, 1));
}

.hover\:text-hover-green:hover {
  --tw-text-opacity: 1;
  color: rgb(52 108 98 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.focus\:text-gold:focus {
  --tw-text-opacity: 1;
  color: rgb(228 158 42 / var(--tw-text-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

html:lang(zh) .zh\:whitespace-nowrap {
  white-space: nowrap;
}

html:lang(zh) .zh\:px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

html:lang(zh) .zh\:font-transat {
  font-family: transat-bold, Noto Sans TC, system-ui, san-serif;
}

html:lang(zh) .zh\:text-4xl {
  font-size: 2.125rem;
}

html:lang(zh) .zh\:leading-snug {
  line-height: 1.375;
}

@media (min-width: 640px) {

  .sm\:hidden {
    display: none;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-2\/3 {
    width: 66.666667%;
  }

  .sm\:w-full {
    width: 100%;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  html:lang(zh) .sm\:zh\:w-1\/2 {
    width: 50%;
  }
}

@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:top-50 {
    top: 50%;
  }

  .md\:my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .md\:my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .md\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-20 {
    margin-bottom: 5rem;
  }

  .md\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .md\:ml-12 {
    margin-left: 3rem;
  }

  .md\:ml-20 {
    margin-left: 5rem;
  }

  .md\:mr-0 {
    margin-right: 0px;
  }

  .md\:mr-12 {
    margin-right: 3rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:h-24 {
    height: 6rem;
  }

  .md\:h-\[50\%\] {
    height: 50%;
  }

  .md\:min-h-50w {
    min-height: 50vw;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-48 {
    width: 12rem;
  }

  .md\:w-5\/6 {
    width: 83.333333%;
  }

  .md\:w-56 {
    width: 14rem;
  }

  .md\:max-w-md {
    max-width: 28rem;
  }

  .md\:max-w-xs {
    max-width: 20rem;
  }

  .md\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:whitespace-pre-line {
    white-space: pre-line;
  }

  .md\:border-t {
    border-top-width: 1px;
  }

  .md\:bg-opaque {
    background-color: rgba(254,244,242,.9);
  }

  .md\:bg-transparent {
    background-color: transparent;
  }

  .md\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pl-0 {
    padding-left: 0px;
  }

  .md\:pl-12 {
    padding-left: 3rem;
  }

  .md\:pr-12 {
    padding-right: 3rem;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:pt-12 {
    padding-top: 3rem;
  }

  .md\:pt-3 {
    padding-top: 0.75rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-right {
    text-align: right;
  }

  .md\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  html:lang(zh) .md\:zh\:text-5xl {
    font-size: 3rem;
  }

  @media (max-width: 900px) {

    .md\:max-\[900px\]\:type-a2 {
      font-family: Noto Sans TC, atrament-web, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: 500;
    }
  }
}

@media (min-width: 1024px) {

  .lg\:w-64 {
    width: 16rem;
  }

  .lg\:max-w-xl {
    max-width: 36rem;
  }

  .lg\:p-20 {
    padding: 5rem;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:pl-28 {
    padding-left: 7rem;
  }

  html:lang(zh) .lg\:zh\:text-6xl {
    font-size: 3.5rem;
  }
}

@media (min-width: 1280px) {

  .xl\:pt-32 {
    padding-top: 8rem;
  }
}