@charset "UTF-8";
/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2024 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: MEGGIE $
 * $Date: 2024-11-01 $
*/
/* ==== 宣告 ==== */
:root {
  --line-height-default: 2;
  --gap: max(10px, 2.2vw);
  --padding-spac: 25px;
  --container-900: calc(900px + (var(--padding-spac) * 2));
  --container-1080: calc(1080px + (var(--padding-spac) * 2));
  --container-1280: calc(1280px + (var(--padding-spac) * 2));
  --container-1400: calc(1400px + (var(--padding-spac) * 2));
  --header-w: 90px;
  --banner-h: 22%;
  --about-ban-h: 48.8%;
  --box-space: max(30px, 4.5vw);
}

@media (max-width: 1079px) {
  :root {
    --line-height-default: 1.8;
  }
}
@media (max-width: 991px) {
  :root {
    --header-w: 65px;
    --banner-h: 260px;
  }
}
@media (max-width: 575px) {
  :root {
    --banner-h: 200px;
  }
}
/* ==== 全域 ==== */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

html {
  font-size: 10px;
  line-height: 10px;
}

body {
  margin: 0;
  padding: 0;
  font-family: serif, "Noto Serif TC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Serif", "Liberation Serif", Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-optical-sizing: auto;
  font-size: 1.6rem;
  color: #333333;
  font-weight: 400;
  font-style: normal;
  word-wrap: break-word;
  letter-spacing: 0.15rem;
  line-height: var(--line-height-default);
  background-color: #fff;
  overflow-x: hidden !important;
}

@media (max-width: 1024px) {
  body {
    font-family: "Noto Serif TC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Serif", "Liberation Serif", Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
}
* {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  text-decoration: none;
  vertical-align: top;
  border: 0;
}

a {
  color: #333333;
  outline: none;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

a:hover, a:visited, a:focus, a:active {
  color: #333333;
  text-decoration: none;
}

input, textarea, select, button {
  font-size: 1.6rem;
}

textarea, input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
}

input, textarea, select {
  font-size: 1.6rem;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

input, textarea, select, input[type=radio], input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

textarea {
  resize: vertical;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

p {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

span {
  display: inline-block;
}

label {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  vertical-align: baseline;
  border: 0;
}

input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
}

input::-webkit-input-placeholder {
  font-size: 1.6rem;
  color: #bbb;
  opacity: 1;
}

input::-moz-placeholder {
  font-size: 1.6rem;
  color: #bbb;
  opacity: 1;
}

input:-ms-input-placeholder {
  font-size: 1.6rem;
  color: #bbb;
  opacity: 1;
}

input::-ms-input-placeholder {
  font-size: 1.6rem;
  color: #bbb;
  opacity: 1;
}

input::placeholder {
  font-size: 1.6rem;
  color: #bbb;
  opacity: 1;
}

.reset {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.reset input, .reset label, .reset select {
  vertical-align: middle;
}

input[type=date]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}

:after, :before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.hidden-ele {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(0px 0px 99.9% 99.9%);
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
  overflow: hidden;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

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

.align-center {
  width: 100%;
  text-align: center;
}

/* ==== 架構 ==== */
body::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track {
  margin: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.85);
  -webkit-box-shadow: none;
}

body::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: rgba(33, 31, 31, 0.5);
  -webkit-box-shadow: none;
}

body:hover::-webkit-scrollbar-thumb {
  background: rgba(33, 31, 31, 0.85);
}

/* lenis */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body.page {
  background-color: #fff;
}

.g-wrap {
  padding-top: var(--banner-h);
  width: 100%;
}
.g-main {
  position: relative;
  z-index: 5;
  padding: max(40px, 3.5vw) 0 0 var(--header-w);
  width: 100%;
  background-color: #fff;
}

/* 沒有ban */
.no-ban .g-main {
  background: none;
}
.no-ban .g__headline {
  color: #000;
  text-shadow: none;
}

.container-1400, .container-1280, .container-1080, .container-900 {
  position: relative;
  margin: 0 auto;
  padding: 0 var(--padding-spac);
  width: 100%;
}

.container-900 {
  max-width: var(--container-900);
}

.container-1080 {
  max-width: var(--container-1080);
}

.container-1280 {
  max-width: var(--container-1280);
}

.container-1400 {
  max-width: var(--container-1400);
}

@media (min-width: 992px) {
  body.page {
    background-attachment: fixed;
  }
  #member:not(.join) .wrap {
    position: relative;
    padding-bottom: 43.8%;
    padding-bottom: calc(var(--vh, 1vh) * 100 - max(40px, 3.5vw) - max(40px, 3.5vw));
  }
  #member:not(.join) .wrap .container-900 {
    position: absolute;
    top: 49%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .no-ban .g-wrap {
    padding-top: max(40px, 4.5vw);
  }
  .no-ban .g__headline {
    margin-bottom: max(50px, 4.2vw);
  }
}
@media (max-width: 991px) {
  .g-wrap {
    margin-top: var(--header-w);
  }
  .g-main {
    padding-left: 0;
  }
  .no-ban .g-wrap {
    padding-top: 0;
  }
}
@media (max-width: 639px) {
  .g-wrap {
    overflow: hidden;
  }
}
/* 滿版 ban */
.full-ban {
  position: relative;
  padding-bottom: calc(var(--vh, 1vh) * 100);
  width: 100%;
  background-color: rgb(33, 31, 31);
  overflow: hidden;
}
.full-ban .pic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-animation: ani_banner_in 2.2s forwards;
          animation: ani_banner_in 2.2s forwards;
}
.full-ban .pic::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}
.full-ban .pic img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  opacity: 0.92;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.full-ban .contact {
  position: absolute;
  z-index: 5;
  top: 45%;
  left: var(--header-w);
  width: calc(100% - var(--header-w));
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.full-ban .contact .container-1080 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@-webkit-keyframes ani_banner_in {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  100% {
    opacity: 0.92;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes ani_banner_in {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  100% {
    opacity: 0.92;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@media (max-width: 991px) {
  .full-ban {
    padding-bottom: calc(var(--vh, 1vh) * 100 - var(--header-w));
  }
  .full-ban .contact {
    left: 0;
    width: 100%;
  }
}
.fill-wrap {
  padding: max(20px, 2.5vw) max(20px, 3.5vw);
  border-radius: 6px;
  background-color: #fff;
}

/* ==== component ==== */
/* 社群 */
.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.social li {
  margin-right: max(10px, 0.5vw);
  width: 36px;
}
.social li a {
  display: block;
  position: relative;
  padding-bottom: 100%;
  width: 100%;
  border-radius: 100%;
}
.social li a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}
.social li i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.social li.fb i {
  background-image: url(../images/icon_fb.svg);
}
.social li.ig i {
  background-image: url(../images/icon_ig.svg);
}
.social li.line i {
  background-image: url(../images/icon_line.svg);
}

#room-view .share .social li a {
  background-color: rgba(0, 0, 0, 0.07);
}
#room-view .share .social li a:hover i {
  opacity: 1;
}
#room-view .share .social li i {
  opacity: 0.7;
  background-position: 0 0;
}

/* banner */
.g-banner {
  position: fixed;
  top: 0;
  left: 0;
  padding-bottom: var(--banner-h);
  width: 100%;
  overflow: hidden;
  background-color: rgb(33, 31, 31);
}
.g-banner img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  opacity: 0.98;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-banner__headline {
  position: absolute;
  z-index: 2;
  top: 60%;
  left: 0;
  padding: 0 var(--padding-spac);
  width: 100%;
  font-size: clamp(1.7rem, 1.3vw, 1.8rem);
  color: #fff;
  letter-spacing: 0.25rem;
  text-align: center;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.g-banner__headline span {
  display: block;
  margin-top: max(12px, 0.8vw);
  font-size: clamp(2.2rem, 2.5vw, 3.2rem);
  letter-spacing: 0.4rem;
}

@media (min-width: 992px) {
  .g-banner__headline {
    left: var(--header-w);
    width: calc(100% - var(--header-w));
  }
}
@media (max-width: 991px) {
  .g-banner {
    top: var(--header-w);
  }
}
/* 頁面標題 */
.g__headline {
  margin-bottom: max(40px, 1.3vw);
  width: 100%;
  font-size: clamp(1.7rem, 1.3vw, 1.8rem);
  color: #fff;
  letter-spacing: 0.25rem;
  text-align: center;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}
.g__headline span {
  display: block;
  margin-top: max(8px, 0.8vw);
  font-size: clamp(2.2rem, 2.8vw, 3.2rem);
  letter-spacing: 0.4rem;
}
.g__headline.txt-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff !important;
}
.g__headline.txt-left span {
  margin: 0 10px 0 0;
}

.stay__name {
  margin: 0;
  padding: max(30px, 2vw) 0 10px;
  width: 100%;
  font-size: clamp(1.8rem, 1.3vw, 2rem);
  color: #fff;
  letter-spacing: 0.4rem;
  text-align: center;
  line-height: 1;
}
.stay__name::after {
  display: block;
  content: "";
  margin: 15px auto 0;
  width: 1px;
  height: 25px;
  background-color: #fff;
}
.stay__name.txt-left {
  padding-top: 0;
  text-align: left;
}
.stay__name.txt-left::after {
  display: inline-block;
  margin: -3px 0 0 10px;
  width: 50px;
  height: 1px;
  vertical-align: middle;
}

.js-ani {
  opacity: 0;
}

@media (min-width: 768px) {
  .view .g__headline {
    direction: rtl;
    margin: 3px max(15px, 1.5vw) 0 0;
    width: 30px;
    text-align: left;
    -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: bt-lr;
            writing-mode: vertical-lr;
    text-orientation: mixed;
  }
  .view .g__headline::before {
    display: inline-block;
    content: "";
    margin: 20px 0 0 -6px;
    width: 1px;
    height: 80px;
    vertical-align: middle;
    background-color: rgba(33, 31, 31, 0.75);
  }
  .view .g__headline span {
    display: inline-block;
    margin: 0 0 10px -6px;
    font-size: clamp(1.8rem, 1.3vw, 2rem);
    vertical-align: middle;
  }
}
/* 首頁 - 區塊標題 */
.box-headline {
  margin-bottom: max(30px, 4vw);
  font-size: clamp(1.8rem, 1.3vw, 2rem);
  color: rgb(33, 31, 31);
  font-weight: 500;
  letter-spacing: 0.25rem;
  line-height: 1.6;
}
.box-headline span {
  display: block;
  margin-top: 5px;
  font-size: clamp(2.4rem, 3vw, 4.2rem);
  letter-spacing: 0.4rem;
  line-height: 1.2;
}

/* 內頁 - 區塊標題 */
.box-ti {
  margin-bottom: max(20px, 1.5vw);
  width: 100%;
  font-size: clamp(1.8rem, 1.5vw, 2.2rem);
  color: #000;
  letter-spacing: 0.25rem;
  line-height: 1;
}
.box-ti span {
  display: inline-block;
  position: relative;
  padding: 6px 12px 0 0;
}
.box-ti span::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: rgb(160, 9, 0);
}
.box-ti.line {
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(33, 31, 31);
}

@media (max-width: 767px) {
  .box-ti span {
    padding: 2px 10px 0 0;
  }
  .box-ti span::after {
    width: 6px;
    height: 6px;
  }
}
/* 文案 */
.web-content:not(:last-child) {
  margin-bottom: 15px;
  letter-spacing: 0.25rem;
}

/* scroll */
.scroll-down {
  position: absolute;
  z-index: 5;
  left: var(--header-w);
  bottom: 0;
  width: calc(100% - var(--header-w));
}
.scroll-down .box {
  position: absolute;
  left: 50%;
  bottom: 0;
  padding-bottom: max(40px, 2.2vw);
  width: 16%;
  max-width: 91px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.scroll-down .circle {
  position: relative;
  width: 100%;
  max-width: 91px;
}
.scroll-down .circle::before {
  display: block;
  content: "";
  padding-bottom: 100%;
  width: 100%;
}
.scroll-down .circle span {
  position: absolute;
  border-radius: 100%;
}
.scroll-down .circle span::before {
  display: block;
  content: "";
  padding-bottom: 100%;
  width: 100%;
}
.scroll-down .circle span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-animation: ani_scroll 2.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
          animation: ani_scroll 2.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.scroll-down .circle span:nth-child(2) {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 9px;
  background-color: #fff;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.scroll-down .line {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 85px;
  background-color: rgba(255, 255, 255, 0.25);
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

@-webkit-keyframes ani_scroll {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  75% {
    opacity: 0.15;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  85% {
    opacity: 0.085;
    -webkit-transform: scale(1.085);
            transform: scale(1.085);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
}

@keyframes ani_scroll {
  0% {
    opacity: 1;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  75% {
    opacity: 0.15;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  85% {
    opacity: 0.085;
    -webkit-transform: scale(1.085);
            transform: scale(1.085);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
}
@media (max-width: 991px) {
  .scroll-down {
    left: 0;
    width: 100%;
  }
  .scroll-down .line {
    height: 75px;
  }
}
/* pic */
.web-pic {
  position: relative;
  background-color: rgb(33, 31, 31);
  overflow: hidden;
}
.web-pic::before {
  display: block;
  content: "";
  width: 100%;
}
.web-pic__box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 120%;
  will-change: transform;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.web-pic img {
  width: 100% !important;
  opacity: 0.92;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  max-width: none !important;
}

/* btn */
.btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  width: 100%;
}
.btn-box.control {
  margin-top: max(20px, 2.5vw);
  padding-top: max(20px, 1.6vw);
  border-top: rgba(33, 31, 31, 0.15) solid 3px;
}
.btn-box.align-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.btn-box.align-left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.btn-style {
  display: inline-block;
  width: 100%;
  max-width: 150px;
  font-size: 1.5rem;
  color: #fff !important;
  text-align: center;
  outline: none;
  line-height: 4.2rem;
  border: none;
  background-color: rgba(33, 31, 31, 0.85);
  -webkit-transition: background-color 0.35s, border-color 0.35s;
  transition: background-color 0.35s, border-color 0.35s;
}
.btn-style:hover, .btn-style:focus, .btn-style:active {
  color: #fff !important;
}
.btn-style:hover {
  background-color: #211f1f;
}
.btn-style.gray {
  color: rgb(33, 31, 31) !important;
  border: rgba(33, 31, 31, 0.2) solid 1px;
  background-color: #fff;
}
.btn-style.gray:hover {
  color: rgb(33, 31, 31) !important;
  border-color: transparent;
  background-color: rgba(33, 31, 31, 0.12);
}
.btn-style.red {
  background-color: rgba(160, 9, 0, 0.85);
}
.btn-style.red:hover {
  color: #fff !important;
  background-color: #a00900;
}
.btn-style.white {
  color: #fff;
  border: #fff solid 1px;
  background-color: #5a5a5e;
}
.btn-style.white:hover {
  color: rgb(33, 31, 31) !important;
  background-color: #fff;
}

@media (max-width: 639px) {
  .btn-box.align-right, .btn-box.align-left {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .btn-box .btn-style {
    width: calc(50% - 5px);
    max-width: 100%;
  }
}
.btn-view {
  display: inline-block;
  position: relative;
  margin-top: -8px;
  color: rgb(33, 31, 31);
  line-height: 1.8;
}
.btn-view::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(33, 31, 31);
}
.btn-view i {
  display: inline-block;
  margin: -3px 12px 0 0;
  width: 5px;
  height: 5px;
  vertical-align: middle;
  border-radius: 100%;
  background-color: rgb(33, 31, 31);
  -webkit-transition: width 0.25s, opacity 0.25s;
  transition: width 0.25s, opacity 0.25s;
}
.btn-view i:nth-child(2) {
  margin: 0;
  width: 0;
  opacity: 0;
}
.btn-view:hover i:nth-child(1) {
  margin: 0;
  width: 0;
  opacity: 0;
}
.btn-view:hover i:nth-child(2) {
  margin: -3px 0 0 12px;
  width: 5px;
  opacity: 1;
}

@media (max-width: 639px) {
  .btn-view {
    font-size: 1.5rem;
  }
}
.btn-detail {
  display: inline-block;
  width: 100%;
  max-width: 140px;
  font-size: 1.6rem;
  color: rgb(33, 31, 31);
  text-align: center;
  line-height: 4.2rem;
  border: rgba(33, 31, 31, 0.35) solid 1px;
  background-color: #fff;
  -webkit-transition: background-color 0.35s;
  transition: background-color 0.35s;
}
.btn-detail:hover {
  color: #fff;
  border-color: rgb(33, 31, 31);
  background-color: rgb(33, 31, 31);
}

/* hover-style */
.hover-style .img {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hover-style .img img {
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}
.hover-style .view {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
.hover-style .view span {
  padding: 2px 16px 0;
  font-size: 1.4rem;
  color: #000;
  opacity: 0;
  letter-spacing: 0.35rem;
  line-height: 1.8;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-transition: opacity 0.6s, letter-spacing 0.6s;
  transition: opacity 0.6s, letter-spacing 0.6s;
}
.hover-style:hover .img img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.hover-style:hover .view {
  opacity: 1;
}
.hover-style:hover .view span {
  opacity: 1;
  letter-spacing: 0.25rem;
}

/* 表單 */
label input[type=radio], label input[type=checkbox] {
  position: absolute;
  z-index: -100 !important;
  width: 1px !important;
  height: 1px !important;
  clip: rect(1px, 1px, 1px, 1px);
}

.form-box {
  display: block;
  font-size: 0;
}

.fill-box.flex {
  gap: 15px 20px;
}
.fill-box > .bar {
  position: relative;
  width: 100%;
}
.fill-box > .bar a {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.5rem;
}

form.flex {
  gap: 15px 20px;
}

.form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0;
  width: 100%;
  letter-spacing: 0;
}
.form-group.half {
  width: calc(50% - 10px);
}
.form-group .label-ti {
  margin: 0;
  padding-right: 10px;
  width: 85px;
  font-size: 1.6rem;
  color: #333333;
}
.form-group .label-ti span {
  padding-left: 3px;
  color: rgb(160, 9, 0);
}
.form-group .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: calc(100% - 85px);
}
.form-group .box.flex {
  gap: 0 10px;
}
.form-group .box > span {
  display: inline-block;
  line-height: 27px;
  padding-top: 8px;
  font-size: 1.6rem;
  vertical-align: top;
}
.form-group .box > span strong {
  font-size: clamp(1.8rem, 1.5vw, 2.4rem);
  color: #000;
  letter-spacing: 0.25rem;
}
.form-group .text-box {
  width: 100%;
  height: 42px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 1.6rem;
  padding: 0 10px;
}
.form-group .textarea:focus, .form-group .text-box:focus {
  border: 1px solid #555555;
}
.form-group.name .text-box {
  width: calc(100% - 140px);
}
.form-group.name .gender {
  margin-left: 10px;
  width: 130px;
}
.form-group.name .gender .radio:nth-child(2) {
  margin-right: 0;
}
.form-group.birth .select {
  width: calc(33.333% - 6px);
  display: inline-block;
  vertical-align: top;
  margin-right: 9px;
}
.form-group.birth .select:last-child {
  margin-right: 0;
}
.form-group.pay .gender {
  margin: 7px 0 0 0;
}
.form-group.pay .gender .radio {
  margin-right: 20px;
}
.form-group.pay .gender .radio:last-child {
  margin-right: 0;
}
.form-group.bill {
  display: block;
}
.form-group.bill .info {
  padding-left: 20px;
}
.form-group.bill .info .form-group:nth-child(1) {
  margin-bottom: 10px;
}
.form-group.add .select-box {
  width: 130px;
}
.form-group.add .text-box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.form-group.message {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.form-group.code .text-box {
  width: calc(100% - 120px - 10px);
}
.form-group.code a.img {
  margin-left: 10px;
  width: 120px;
  height: 40px;
  overflow: hidden;
}

.form-group .select {
  width: 100%;
  height: 42px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 1.6rem;
  padding: 0 10px;
  background: url(../images/aw.png) no-repeat right 0 #fff;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.form-group .select::-ms-expand {
  display: none;
}

.form-group .textarea {
  padding: 3px 10px;
  width: 100%;
  height: 120px;
  border: 1px solid #ddd;
  background: #fff;
}

.form-group label.radio {
  display: inline-block;
  position: relative;
  font-size: 1.6rem;
  color: #555;
  padding-left: 24px;
  margin: 0 10px 0 0;
  cursor: pointer;
  vertical-align: top;
}

.form-group label.radio input {
  display: none;
}

.form-group label.radio input + span {
  display: block;
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 100%;
  top: 6px;
  left: 0;
}

.form-group label.radio input:checked + span {
  border-color: #888;
}

.form-group label.radio input:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #555;
  border-radius: 100%;
  top: 3px;
  left: 3px;
}

/* radio + checkbox - 樣式 */
.is-check, .is-radio {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  height: 30px;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
}
.is-check .check-style, .is-check .radio-style, .is-radio .check-style, .is-radio .radio-style {
  position: absolute;
  z-index: 1;
  left: 0;
  cursor: pointer;
}
.is-check label, .is-radio label {
  margin-bottom: 0;
  padding-top: 7px;
  font-size: 1.6rem;
  cursor: pointer;
}

.is-check {
  padding-left: 25px;
  cursor: pointer;
}
.is-check .check-style {
  top: 1px;
  width: 25px;
  height: 25px;
}
.is-check > input + span {
  position: absolute;
  top: 49.5%;
  left: 0;
  width: 18px;
  height: 18px;
  border: rgba(33, 31, 31, 0.85) solid 2px;
  background-color: #fff;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.is-check > input + span::before, .is-check > input + span::after {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
}
.is-check > input:checked + span {
  background-color: rgb(33, 31, 31);
}
.is-check > input:checked + span::before {
  top: 42%;
  left: 28%;
  width: 2px;
  height: 30%;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.is-check > input:checked + span::after {
  top: 20%;
  left: 50%;
  width: 2px;
  height: 58%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.is-radio .radio-style {
  top: 50%;
  width: 25px;
  height: 25px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.is-radio input + span {
  position: relative;
  margin: -2px 4px 0 0;
  width: 25px;
  height: 25px;
  vertical-align: middle;
}
.is-radio input + span::before, .is-radio input + span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.is-radio input + span::before {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: #dacdbf solid 1px;
  background-color: #e6dfd7;
}
.is-radio input + span::after {
  width: 60%;
  height: 60%;
  background-color: #dacdbf;
}
.is-radio input:checked + span::before {
  border-color: rgba(33, 31, 31, 0.3);
}
.is-radio input:checked + span::after {
  background-color: rgb(33, 31, 31);
}

.agree {
  padding-top: max(20px, 1.5vw);
}
.agree__txt {
  font-size: 1.5rem;
  line-height: 1.6;
}
.agree__radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: max(20px, 1.5vw);
  font-size: 1.6rem;
}

@media (max-width: 1079px) {
  .form-group label.radio input + span {
    top: 4px;
  }
}
@media (max-width: 991px) {
  .form-group.half {
    width: 100%;
  }
  .form-group .label-ti {
    width: 100%;
  }
  .form-group .box {
    width: 100%;
  }
}
@media (max-width: 639px) {
  .form-group.add .select-box {
    width: calc(50% - 5px);
  }
  .form-group.add .text-box {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin-top: 10px;
  }
}
@media (max-width: 499px) {
  .fill-box.flex {
    gap: 10px 15px;
  }
}
/* no-data */
.no-data {
  text-align: center;
  font-size: 1rem;
  color: #999;
  text-align: center;
  margin: 100px 0;
}

/* 文字編輯器 */
.text-edit {
  line-height: 30px;
  font-size: 1em;
  color: #333333;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}

.text-edit:before,
.text-edit:after {
  content: "";
  display: table;
}

.text-edit:after {
  clear: both;
}

.text-edit img {
  height: auto !important;
  max-width: 100%;
}

.text-edit .video-box {
  width: calc(50% - 15px);
  position: relative;
  padding-bottom: 28.125%;
  padding-top: 15px;
  height: 0;
  overflow: hidden;
  margin: 0 0 20px;
}

.text-edit .video-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border: none;
}

@media (max-width: 1024px) {
  .text-edit .video-box {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }
}
/* ==== Pagination ==== */
.g-pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.g-pager a {
  display: block;
  margin: 0 6px;
  width: 40px;
  height: 40px;
  font-size: 1.4rem;
  color: #fff;
  text-align: center;
  line-height: 40px;
  border: rgba(255, 255, 255, 0.2) solid 1px;
  background-color: rgba(255, 255, 255, 0);
}
.g-pager__num:hover, .g-pager__num.current {
  color: rgb(33, 31, 31);
  border-color: rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
}
.g-pager__prev, .g-pager__next {
  position: relative;
  font-size: 0 !important;
}
.g-pager__prev i, .g-pager__next i {
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 8px;
  background: url(../images/page_aw.svg) no-repeat 0 100%;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-pager__prev:not(.disabled):hover, .g-pager__next:not(.disabled):hover {
  border-color: #fff;
  background-color: #fff;
}
.g-pager__prev:not(.disabled):hover i, .g-pager__next:not(.disabled):hover i {
  background-position: 0 0;
}
.g-pager__prev i {
  -webkit-transform: translate(-50%, -50%) rotate(-180deg);
      -ms-transform: translate(-50%, -50%) rotate(-180deg);
          transform: translate(-50%, -50%) rotate(-180deg);
}
.g-pager .disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 1079px) {
  .g-pager a {
    width: 36px;
    height: 36px;
    line-height: 36px;
  }
}
@media (max-width: 767px) {
  .g-pager a {
    margin: 0 2.5px;
  }
}
/* ==== header ==== */
.g-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: var(--header-w);
  height: calc(var(--vh, 1vh) * 100);
}
.g-header__bar {
  position: relative;
  z-index: 2;
  padding-top: max(20px, 1.8vw);
  width: var(--header-w);
  height: calc(var(--vh, 1vh) * 100);
  background-color: #fff;
}
.g-header__bar::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.25);
  mix-blend-mode: difference;
}
.g-header__logo {
  position: relative;
  margin: 0 auto;
  max-width: 52px;
}
.g-header__logo a {
  display: block;
  width: 100%;
  background: url(../images/logo.svg) no-repeat 0 0;
  background-size: cover;
  mix-blend-mode: difference;
}
.g-header__logo a::before {
  display: block;
  content: "";
  padding-bottom: 161.539%;
  width: 100%;
}
.g-header__switch {
  display: block;
  position: relative;
  margin: calc(var(--vh, 1vh) * 100 - 58vh - 84px) auto 0;
  width: 26px;
  height: 26px;
}
.g-header__switch span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #fff;
  mix-blend-mode: difference;
  -webkit-transform: translate(-50%, -50%) rotate(0);
      -ms-transform: translate(-50%, -50%) rotate(0);
          transform: translate(-50%, -50%) rotate(0);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transition: margin-top 0.35s 0.15s, -webkit-transform 0.35s;
  transition: margin-top 0.35s 0.15s, -webkit-transform 0.35s;
  transition: margin-top 0.35s 0.15s, transform 0.35s;
  transition: margin-top 0.35s 0.15s, transform 0.35s, -webkit-transform 0.35s;
}
.g-header__switch span:nth-child(1) {
  margin-top: -18%;
}
.g-header__switch span:nth-child(2) {
  margin-top: 18%;
}
.g-header__switch.is-on span {
  background-color: #fff !important;
}
.g-header__switch.is-on span:nth-child(1) {
  margin-top: 0;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transition: margin-top 0.35s 0.15s, -webkit-transform 0.35s 0.15s;
  transition: margin-top 0.35s 0.15s, -webkit-transform 0.35s 0.15s;
  transition: margin-top 0.35s 0.15s, transform 0.35s 0.15s;
  transition: margin-top 0.35s 0.15s, transform 0.35s 0.15s, -webkit-transform 0.35s 0.15s;
}
.g-header__switch.is-on span:nth-child(2) {
  margin-top: 0;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
      -ms-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transition: margin-top 0.35s 0.15s, -webkit-transform 0.35s 0.15s;
  transition: margin-top 0.35s 0.15s, -webkit-transform 0.35s 0.15s;
  transition: margin-top 0.35s 0.15s, transform 0.35s 0.15s;
  transition: margin-top 0.35s 0.15s, transform 0.35s 0.15s, -webkit-transform 0.35s 0.15s;
}
.g-header__menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  pointer-events: none;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  padding: 0 max(60px, 6.2vw) max(40px, 5.5vw) calc(var(--header-w) + max(60px, 4vw));
  width: 60%;
  height: calc(var(--vh, 1vh) * 100);
  color: rgba(255, 255, 255, 0.25);
  opacity: 0;
  background-color: rgba(33, 31, 31, 0.9);
  backdrop-filter: blur(10px);
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
.g-header__nav {
  padding-top: max(40px, 10vw);
  width: 100%;
  counter-reset: section;
}
.g-header__nav li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  letter-spacing: 0.25rem;
  line-height: 1.2;
}
.g-header__nav li::before {
  margin-right: max(20px, 1.5vw);
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.35);
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
}
.g-header__nav li:not(:last-child) {
  margin-bottom: max(20px, 1.8vw);
}
.g-header__nav li a {
  display: block;
  color: #fff;
}
.g-header__nav li a .tw {
  position: relative;
  font-size: clamp(2.2rem, 1.3vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.8rem;
}
.g-header__nav li a .tw::after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #fff;
  -webkit-transition: width 0.35s;
  transition: width 0.35s;
}
.g-header__nav li a .en {
  padding-left: 5px;
  font-size: 1.4rem;
}
.g-header__nav li a:hover .tw::after {
  width: 87%;
}
.g-header__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-left: auto;
}
.g-header__links {
  width: 100%;
}
.g-header__links i {
  display: inline-block;
  width: 18px;
  height: 23px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.g-header__links span {
  margin-left: auto;
}
.g-header__links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 max(15px, 1vw);
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: 0.25rem;
  line-height: 6.5rem;
  border: rgba(255, 255, 255, 0.25) solid 1px;
}
.g-header__links a:hover {
  border-color: transparent;
  background-color: rgba(255, 255, 255, 0.15);
}
.g-header__links a.booking i {
  background-image: url(../images/icon_date.svg);
}
.g-header__links a.order i {
  background-image: url(../images/icon_order.svg);
}
.g-header__data {
  margin-top: max(20px, 2.2vw);
  width: 100%;
}
.g-header__data > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  font-size: 1.4rem;
  color: #fff;
  font-weight: 300;
  line-height: 1.3;
}
.g-header__data > li:not(:last-child) {
  margin-bottom: max(10px, 0.8vw);
}
.g-header__data > li a {
  color: #fff;
}
.g-header__data > li .ti {
  width: 115px;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.5);
}
.g-header__data > li .ti + p, .g-header__data > li .ti + ul {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.g-header__data > li.time p, .g-header__data > li.phone p {
  font-size: clamp(1.5rem, 1.5vw, 1.8rem);
}
.g-header__data > li.community {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.g-header.is-on {
  width: 60%;
}
.g-header.is-on .g-header__bar {
  background-color: transparent;
}
.g-header.is-on .g-header__menu {
  pointer-events: auto;
  opacity: 1;
}

.topnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 10px;
  position: absolute;
  z-index: 1001;
  top: max(20px, 1.8vw);
  right: calc((100% - var(--header-w) - 1400px) / 2);
  padding: 10px 20px 8px;
  line-height: 1;
}
.topnav > li {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: rgba(33, 31, 31, 0.9);
}
.topnav__btn {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  mix-blend-mode: difference;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.topnav .order-btn {
  background-image: url(../images/icon_order.svg);
}
.topnav .member {
  position: relative;
}
.topnav .member-btn {
  cursor: pointer;
  background-image: url(../images/icon_member.svg);
}
.topnav .member-list {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: calc(100% + 30px);
  left: 50%;
  width: 130px;
  font-size: 1.5rem;
  text-align: center;
  opacity: 0;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
          box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: top 0.35s, opacity 0.35s;
  transition: top 0.35s, opacity 0.35s;
}
.topnav .member-list li {
  line-height: 1.4;
}
.topnav .member-list li:not(:last-child) {
  border-bottom: rgba(0, 0, 0, 0.15) solid 1px;
}
.topnav .member-list li a {
  display: block;
  padding: 12px 10px;
}
.topnav .member-list li a:hover {
  color: rgb(33, 31, 31);
  background-color: rgba(33, 31, 31, 0.1);
}
.topnav .member-list li.logout i {
  display: inline-block;
  margin: -5px 8px 0 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background: url(../images/icon_logout.svg) no-repeat 0 0;
  background-size: cover;
}
.topnav .member-list li .state {
  padding: 10px 15px;
  color: #fff;
  font-weight: 300;
  background-color: rgb(33, 31, 31);
}
.topnav .member-list li .state small {
  display: block;
  margin-top: 5px;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.5);
}
.topnav .member.is-on .member-list {
  pointer-events: auto;
  top: calc(100% + 10px);
  opacity: 1;
}

@media (min-width: 992px) {
  .topnav > li {
    width: 46px;
    height: 46px;
  }
}
.float-booking {
  position: fixed;
  z-index: 999;
  right: 0;
  bottom: 0;
  padding: max(25px, 2.2vw) 0;
  width: 74px;
  background-color: rgba(33, 31, 31, 0.9);
}
.float-booking i {
  display: block;
  margin: 0 auto 12px;
  width: 18px;
  height: 22px;
  background: url(../images/icon_date.svg) no-repeat 0 0;
  background-size: cover;
}
.float-booking span {
  display: block;
  margin: 0 auto;
  color: #fff;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  text-orientation: mixed;
}

body:not(.page) .g-header__bar {
  background-color: transparent;
}

@media (min-width: 1080px) {
  .g-header__switch:not(.is-on) span:nth-child(2) {
    left: unset;
    right: 0;
    margin-top: 18%;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    -webkit-transform-origin: right;
        -ms-transform-origin: right;
            transform-origin: right;
    -webkit-transition: width 0.35s;
    transition: width 0.35s;
  }
  .g-header__switch:not(.is-on):hover span:nth-child(2) {
    width: 54%;
    -webkit-transition: width 0.35s;
    transition: width 0.35s;
  }
}
@media (max-width: 1599px) {
  .topnav {
    right: var(--padding-spac);
  }
  .topnav .member-list {
    left: unset;
    right: -15px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}
@media (max-width: 1079px) {
  .g-header.is-on {
    width: 100%;
  }
  .g-header.is-on .g-header__menu {
    width: 100%;
  }
}
@media (max-width: 991px) {
  body:not(.page) .g-header__bar {
    background-color: #fff;
  }
  .g-header {
    width: 100%;
    height: var(--header-w);
  }
  .g-header__bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 var(--padding-spac);
    width: 100%;
    height: var(--header-w);
    background-color: #fff;
    -webkit-box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
            box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
  }
  .g-header__bar::before {
    display: none;
  }
  .g-header__logo {
    margin: 0 15px 0 0;
    width: 100%;
    max-width: 108px;
  }
  .g-header__logo a {
    background-image: url(../images/logo_s.svg);
  }
  .g-header__logo a::before {
    padding-bottom: 41.667%;
  }
  .g-header__switch {
    margin: 0;
  }
  .g-header__menu {
    padding: 0 max(30px, 4vw) 40px;
  }
  .g-header__nav {
    padding-top: calc(var(--header-w) + 60px);
  }
  .g-header__info {
    width: 100%;
  }
  .g-header__links a {
    line-height: 4.6rem;
  }
  .topnav {
    position: fixed;
    top: 3px;
    right: calc(26px + var(--padding-spac));
    background-color: #fff;
  }
  .topnav.is-on {
    background-color: transparent;
  }
  .topnav .member-list {
    left: 50%;
    right: unset;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .float-booking {
    width: 50px;
  }
}
@media (max-width: 639px) {
  .g-header__info {
    margin-left: 0;
  }
}
/* ==== footer ==== */
.g-footer {
  margin-top: max(60px, 6.2vw);
  padding: max(30px, 3.5vw) 0 max(30px, 4vw);
  font-size: 1.5rem;
  color: #fff;
  font-weight: 300;
  line-height: 1.8;
  background: url(../images/footer_bg.jpg) no-repeat center top;
  background-size: cover;
}
.g-footer__logo {
  margin-right: max(60px, 11vw);
  width: 40px;
}
.g-footer__logo a {
  display: block;
  width: 100%;
  background: url(../images/footer_logo.svg) no-repeat 0 0;
  background-size: cover;
}
.g-footer__logo a::before {
  display: block;
  content: "";
  padding-bottom: 462.5%;
  width: 100%;
}
.g-footer__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  gap: 0 3.5vw;
  padding-top: max(15px, 1vw);
}
.g-footer__info {
  margin-bottom: max(30px, 1.8vw);
  padding-top: max(8px, 0.6vw);
  width: calc(33.333% - 2.34vw);
  border-top: rgba(255, 255, 255, 0.2) solid 1px;
}
.g-footer__info .ti {
  margin-bottom: max(10px, 1vw);
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.5);
}
.g-footer__info p {
  letter-spacing: 0.1rem;
}
.g-footer__info p a {
  display: block;
  color: #fff;
}
.g-footer__info p a:hover {
  text-decoration: underline;
}
.g-footer__info p .map {
  font-size: 1.3rem;
  text-decoration: underline;
}
.g-footer__info.contact span {
  padding-left: max(15px, 1vw);
}
.g-footer__copyright {
  width: 100%;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 300;
  line-height: 1.6;
}
.g-footer__copyright a {
  color: rgba(255, 255, 255, 0.35);
}
.g-footer__copyright a:hover {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}
.g-footer__copyright span, .g-footer__copyright .design {
  padding-left: 15px;
}

@media (min-width: 768px) {
  .g-footer .container-1400 {
    padding: 0 max(40px, 5.2vw);
  }
}
@media (max-width: 1365px) {
  .g-footer__info.contact span {
    padding-left: 0;
    display: block;
  }
}
@media (max-width: 1279px) {
  .g-footer__logo {
    margin-right: 80px;
  }
  .g-footer__info {
    width: calc((100% - 180px) / 2 - 3.5vw);
  }
  .g-footer__info.community {
    width: 180px;
  }
}
@media (max-width: 991px) {
  .g-footer__logo {
    margin: 0 auto 20px;
    width: 90px;
  }
  .g-footer__logo a {
    background-image: url(../images/footer_logo_s.svg);
  }
  .g-footer__logo a::before {
    padding-bottom: 100%;
  }
  .g-footer__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
  .g-footer__info {
    width: calc(50% - 1.75vw);
  }
  .g-footer__info.community {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 10px;
    padding-top: 0;
    width: 100%;
    border-top: none;
  }
  .g-footer__info.community .ti {
    margin: 0 10px 0 0;
  }
}
@media (max-width: 575px) {
  .g-footer__info {
    width: 100%;
  }
  .g-footer__copyright span {
    display: block;
    padding-left: 0;
  }
}
/* ==== index ==== */
.index .g-header {
  mix-blend-mode: difference;
}
.index .g-header.is-on {
  mix-blend-mode: normal;
}

#index.g-wrap {
  padding-top: 0;
}
#index .g-main {
  padding: 0;
  background: none;
}
#index .g-footer {
  margin-top: 0;
  padding-left: var(--header-w);
}
#index .section {
  padding-left: var(--header-w);
}

@media (max-width: 991px) {
  .index .g-header {
    mix-blend-mode: normal;
  }
  #index .g-footer {
    padding-left: 0;
  }
  #index .section {
    padding-left: 0;
  }
}
#i-ban {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#i-ban::before, #i-ban::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: calc(var(--vh, 1vh) * 100);
}
#i-ban::before {
  width: 20%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.15)), color-stop(70%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
}
#i-ban::after {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}
#i-ban .slogan {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  padding-bottom: calc(var(--vh, 1vh) * 100);
  width: 100%;
}
#i-ban .slogan i {
  display: block;
  position: absolute;
  top: 46.5%;
  left: 50%;
  width: 28%;
  max-width: 220px;
  background: url(../images/ban_logo.svg) no-repeat 0 0;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#i-ban .slogan i::before {
  display: block;
  content: "";
  padding-bottom: 100%;
  width: 100%;
}
#i-ban .ban-slick .box {
  position: relative;
  padding-bottom: calc(var(--vh, 1vh) * 100);
  width: 100%;
  background-color: #000;
}
#i-ban .ban-slick .box a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: ani_banner_in 2.2s forwards;
          animation: ani_banner_in 2.2s forwards;
}
#i-ban .ban-slick .box a img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#i-ban .slick-dots {
  bottom: max(20px, 1.8vw);
}

@media (max-width: 767px) {
  #i-ban::before {
    display: none;
  }
  #i-ban .slogan {
    padding-bottom: calc(var(--vh, 1vh) * 100 - var(--header-w));
  }
  #i-ban .ban-slick .box {
    padding-bottom: calc(var(--vh, 1vh) * 100 - var(--header-w));
  }
}
.i-about__txt {
  position: relative;
  z-index: 2;
  padding-top: calc(max(40px, 6.5vw) * 1.2);
  padding-bottom: calc(max(40px, 6.5vw) * 1.2);
}
.i-about__logo {
  margin: 0 auto max(30px, 4.2vw);
  width: 35%;
  max-width: 160px;
  background: url(../images/i_about_logo.svg) no-repeat 0 0;
  background-size: cover;
}
.i-about__logo::before {
  display: block;
  content: "";
  padding-bottom: 43.75%;
  width: 100%;
}
.i-about__slogan {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 max(40px, 5.2vw);
  padding-left: max(30px, 2.2vw);
}
.i-about__slogan p.en {
  width: 29%;
}
.i-about__ban {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.i-about__ban::before, .i-about__ban::after {
  display: block;
  content: "";
  width: 100%;
}
.i-about__ban::before {
  padding-bottom: 50%;
}
.i-about__ban::after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}
.i-about__ban img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.i-about__brief {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  padding-left: var(--header-w);
  width: 100%;
  height: 100%;
}
.i-about__brief p {
  padding-right: 65%;
  color: #fff;
}

@media (max-width: 1359px) {
  .i-about__brief p {
    padding-right: 40%;
  }
}
@media (max-width: 1279px) {
  .i-about__slogan {
    margin: 0 auto;
    padding-left: 0;
    max-width: 680px;
  }
  .i-about__slogan p {
    width: 100% !important;
    text-align: center;
  }
}
@media (max-width: 991px) {
  .i-about__ban::before {
    padding-bottom: 62%;
  }
  .i-about__brief {
    padding: 0 max(16px, 3.2vw);
  }
  .i-about__brief p {
    padding-right: 0;
  }
}
@media (max-width: 639px) {
  .i-about__txt {
    padding-top: 60px;
  }
  .i-about__ban::before {
    padding-bottom: 102%;
  }
  .i-about__brief {
    padding: 0 10px;
  }
}
@media (max-width: 575px) {
  .i-about__ban::before {
    padding-bottom: 152%;
  }
}
.i-room {
  padding: calc(max(40px, 6.5vw) * 1.2) 0 calc(max(40px, 6.5vw) * 1.2) var(--header-w);
  width: 100%;
  background-color: #fff;
}
.i-room .box-headline {
  text-align: center;
}
.i-room > .btn-box {
  display: none;
  margin-top: 50px;
  text-align: center;
}

.room-list_box {
  position: relative;
  overflow: hidden;
}

.room-slick {
  margin: 0 -100px !important;
  overflow: hidden;
}
.room-slick .room-list__item {
  padding: 0 100px;
  max-width: 800px;
}
.room-slick .room-list__content {
  margin-top: -30px;
}

.room-style .room-list__content {
  margin-top: max(24px, 2.8vw);
}
.room-style .room-list__txt {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .room-slick .room-list__content {
    pointer-events: none;
    opacity: 0;
  }
  .room-slick .room-list__type {
    margin-bottom: 12px;
  }
  .room-slick .slick-active .room-list__content {
    pointer-events: auto;
    opacity: 1;
  }
}
@media (max-width: 1359px) {
  .room-slick .room-list__item {
    max-width: 700px;
  }
}
@media (max-width: 1279px) {
  .room-slick {
    margin: 0 -80px !important;
  }
  .room-slick .room-list__item {
    padding: 0 80px;
    max-width: 640px;
  }
}
@media (max-width: 991px) {
  .room-slick {
    margin: 0 -60px !important;
  }
  .room-slick .room-list__item {
    padding: 0 60px;
    max-width: 560px;
  }
  .room-slick .room-list__style {
    display: block;
    margin: 16px 0 0 0;
  }
}
@media (max-width: 767px) {
  .i-room {
    padding-left: var(--padding-spac) !important;
    padding-right: var(--padding-spac);
  }
  .i-room > .btn-box {
    display: block;
  }
  .room-slick {
    margin: 0 -10px !important;
  }
  .room-slick .room-list__item {
    padding: 0 10px;
    max-width: 100%;
  }
  .room-slick .room-list__inner {
    margin: 0 auto;
    max-width: 510px;
  }
  .room-slick .room-list__ti {
    margin-top: -12px;
  }
  .room-slick .room-list__txt, .room-slick .btn-box {
    display: none !important;
  }
  .room-style .room-list__ti {
    margin-top: 0;
  }
}
/* 影片 */
.i-video {
  font-size: 0;
  line-height: 0;
}
.i-video .video-play {
  position: relative;
  padding-bottom: 55.5%;
  overflow: hidden;
}
.i-video .video-play iframe {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border: none;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* i-news */
.i-news {
  padding: max(40px, 6.5vw) 0;
  color: #fff;
  background-color: #5a5a5e;
}
.i-news .box-headline {
  color: #fff;
  text-align: center;
}
.i-news .news-slick {
  margin: 0 -36px max(20px, 1.8vw);
}
.i-news .news-slick .news-list__item {
  padding: 0 36px;
  outline: none;
}
.i-news .news-slick .news-list__ti {
  margin-top: 10px;
}
.i-news .btn-view {
  margin-top: 30px;
  color: #fff;
}
.i-news .btn-view::after {
  background-color: #fff;
}
.i-news .btn-view i {
  background-color: #fff;
}

@media (max-width: 1279px) {
  .i-news .news-slick {
    margin: 0 -10px;
  }
  .i-news .news-slick .news-list__item {
    padding: 0 10px;
  }
}
/* ============ 介紹 ============= */
#about.g-wrap {
  padding-top: 0;
}
#about .g-main {
  padding-top: 0;
}
#about .g-footer {
  margin-top: 0;
}
#about .section-wrap {
  position: relative;
  padding-top: calc(max(40px, 6.5vw) * 2.2);
  background: url(../images/about_bg.jpg) no-repeat center top;
  background-size: 100% auto;
}
#about .section {
  position: relative;
  z-index: 5;
}
#about .txt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.about-ban .slogan {
  font-size: clamp(1.8rem, 2.2vw, 2.8rem);
  color: #fff;
  text-align: center;
  line-height: 1.6;
}
.about-content {
  position: relative;
  background: url(../images/about_bg.jpg) no-repeat right center #5a5a5e;
  background-size: auto 100%;
}
.about-content__txt {
  color: #fff;
  letter-spacing: 0.25rem;
}

@media (min-width: 768px) {
  .about-content {
    padding-bottom: 62%;
  }
  .about-content__txt {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .about-content p {
    padding-left: 5%;
  }
}
@media (min-width: 1280px) {
  .about-content {
    padding-bottom: 46.48%;
  }
}
@media (max-width: 767px) {
  .about-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
/* ============ booking  ============= */
.process {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin: 0 auto max(40px, 1.5vw);
  max-width: 920px;
}
.process__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: calc((100% - 155px) / 3);
}
.process__item:nth-child(4) {
  width: 155px;
}
.process__item .icon {
  position: relative;
  width: 60px;
  border-radius: 100%;
  background-color: #fff;
  overflow: hidden;
}
.process__item .icon::before {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.process__item .icon i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.process__item .txt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: max(13px, 1.5vw);
  line-height: 1.6;
}
.process__item .txt span {
  font-size: 1.3rem;
  font-style: italic;
}
.process__item .txt p {
  font-size: 1.5rem;
}
.process__item:nth-child(1) .icon i {
  background-image: url(../images/step_icon1.svg);
}
.process__item:nth-child(2) .icon i {
  background-image: url(../images/step_icon2.svg);
}
.process__item:nth-child(3) .icon i {
  background-image: url(../images/step_icon3.svg);
}
.process__item:nth-child(4) .icon i {
  background-image: url(../images/step_icon4.svg);
}
.process__item.current .icon {
  background-color: rgb(33, 31, 31);
}

#booking.g-main {
  padding-top: max(40px, 2.2vw);
  background-color: #f0f0f0;
}
#booking .g-main {
  background-color: #f0f0f0;
}

@media (max-width: 1079px) {
  .process__item .icon {
    width: 50px;
  }
  .process__item .icon i {
    width: 22px;
    height: 22px;
  }
  .process__item .txt {
    line-height: 1.3;
  }
}
@media (max-width: 991px) {
  .process {
    margin-bottom: 25px;
  }
  .process__item {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100% !important;
  }
  .process__item:not(.current) {
    display: none;
  }
  .process__item .txt {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}
/* step1 */
/* 列表 */
#booking.list .fill-wrap {
  padding: max(20px, 2.5vw) max(20px, 2.5vw);
}

.room-type {
  font-size: 1.6rem;
}
.room-type__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: max(12px, 1.75vw);
}
.room-type__item {
  margin-bottom: max(2px, 0.5vw);
  width: calc(33.333% - max(12px, 1.75vw) / 1.5);
}
.room-type__pic {
  border-radius: 3px;
  overflow: hidden;
}
.room-type__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: max(12px, 0.5vw) 10px 0 0;
  line-height: 1.4;
}
.room-type__name {
  position: relative;
  padding-left: 13px;
  font-size: 1.6rem;
  color: #000;
}
.room-type__name::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: rgb(33, 31, 31);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.room-type__price {
  font-size: 1.4rem;
  color: rgb(160, 9, 0);
  font-weight: bold;
  letter-spacing: 0.25rem;
}
.room-type__price span {
  padding-left: 3px;
  font-size: clamp(1.7rem, 1.3vw, 1.8rem);
}

@media (max-width: 991px) {
  .room-type__item {
    width: calc(50% - max(12px, 1.75vw) / 2);
  }
}
@media (max-width: 639px) {
  .room-type__item {
    width: 100%;
  }
}
.room-single {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
}
.room-single__pic {
  position: relative;
  margin: 0 auto;
  width: 50.568%;
  max-width: 640px;
}
.room-single__pic::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(62%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.35)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.35) 100%);
}
.room-single__pic img {
  width: 100%;
}
.room-single__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: max(5px, 0.6vw) 0 0 max(40px, 3.5vw);
}
.room-single__name {
  margin-bottom: max(10px, 0.8vw);
  font-size: clamp(1.8rem, 1.5vw, 2.4rem);
  color: #000;
  letter-spacing: 0.25rem;
  line-height: 1.4;
}
.room-single__name a {
  color: #000;
}
.room-single__price {
  padding-bottom: max(10px, 0.6vw);
  font-size: 1.4rem;
  color: rgb(160, 9, 0);
  font-weight: bold;
  letter-spacing: 0.25rem;
  line-height: 1.4;
  border-bottom: rgba(33, 31, 31, 0.15) solid 1px;
}
.room-single__price span {
  font-size: clamp(1.8rem, 1.3vw, 2rem);
}
.room-single__text {
  margin: max(10px, 0.6vw) 0 0 0;
  padding: 0;
  list-style: none;
}
.room-single__text li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding-left: 16px;
  line-height: 1.8;
}
.room-single__text li::before {
  display: block;
  content: "";
  position: absolute;
  top: 10px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: rgba(33, 31, 31, 0.5);
}
.room-single__text li:not(:last-child) {
  margin-bottom: 8px;
}
.room-single__text li .ti {
  width: 60px;
}
.room-single__text li p {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: rgba(33, 31, 31, 0.75);
}
.room-single__btn {
  margin-top: max(25px, 2.5vw);
  width: 100%;
}

@media (min-width: 1024px) {
  .room-single__text {
    padding-right: 10px;
    max-height: 17.2vw;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .room-single__text::-webkit-scrollbar {
    width: 6px;
  }
  .room-single__text::-webkit-scrollbar-track {
    margin: 0;
    border-radius: 100px;
    background: rgba(33, 31, 31, 0.15);
    -webkit-box-shadow: none;
  }
  .room-single__text::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: rgba(33, 31, 31, 0.5);
    -webkit-box-shadow: none;
  }
  .room-single__text:hover::-webkit-scrollbar-thumb {
    background: rgba(33, 31, 31, 0.85);
  }
}
@media (min-width: 1280px) {
  .room-single__text {
    max-height: 15.5vw;
  }
  .room-single__btn {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    position: absolute;
    left: calc(50.568% + max(40px, 3.5vw));
    bottom: 0;
    width: calc(49.432% - max(40px, 3.5vw));
  }
}
@media (min-width: 1680px) {
  .room-single__text {
    max-height: 12.5vw;
  }
}
@media (max-width: 1279px) {
  .room-single__btn {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
@media (max-width: 1023px) {
  .room-single__pic {
    width: 100%;
  }
  .room-single__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    padding: 25px 0 0 0;
  }
  .room-single__btn.align-left {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.loading-wrap {
  display: none;
  position: relative;
  margin-top: max(45px, 3.2vw);
  min-height: 100px;
}
.loading-wrap::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 10;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  top: 0;
  left: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0, 0.4, 0.4, 1);
  transition: opacity 0.3s cubic-bezier(0, 0.4, 0.4, 1);
}
.loading-wrap::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 10;
  width: 0;
  height: 0;
  background: url("../images/waiting.gif") no-repeat;
  background-size: 60px 60px;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0, 0.4, 0.4, 1);
  transition: opacity 0.3s cubic-bezier(0, 0.4, 0.4, 1);
}
.loading-wrap.loading::before {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.loading-wrap.loading::after {
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
  opacity: 1;
}
.loading-wrap .alert-date, .loading-wrap .alert-date-2 {
  position: absolute;
  top: 21px;
  left: 50%;
  padding: 6px 15px;
  font-size: 1.3rem;
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.25rem;
  white-space: nowrap;
  line-height: 1.4;
  border-radius: 2px;
  background: rgba(160, 9, 0, 0.75);
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.loading-wrap .alert-date::before, .loading-wrap .alert-date-2::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: -6px;
  margin-left: -4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: rgba(160, 9, 0, 0.75) transparent transparent transparent;
}
.loading-wrap .alert-date i.fa, .loading-wrap .alert-date-2 i.fa {
  margin-right: 6px;
}

#booking.step1 .calendar {
  position: relative;
  margin: 0;
  font-size: 0;
}

#booking.step1 .calendar .head-box {
  position: relative;
  height: 50px;
  border: 1px solid rgba(33, 31, 31, 0.2);
  border-bottom: none;
  background: rgba(33, 31, 31, 0.03);
}
#booking.step1 .calendar .head-box a.prev-month, #booking.step1 .calendar .head-box a.next-month {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  width: 25px;
  height: 100%;
  font-size: 0;
}
#booking.step1 .calendar .head-box a.prev-month {
  left: 15px;
  background: url(../images/date_aw.png) no-repeat 0 center;
}
#booking.step1 .calendar .head-box a.next-month {
  right: 15px;
  background: url(../images/date_aw.png) no-repeat 0 center;
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}
#booking.step1 .calendar .head-box .this-month {
  position: relative;
  padding: 0 50px;
  height: 100%;
  font-size: clamp(1.7rem, 1.3vw, 2rem);
  color: rgba(33, 31, 31, 0.75);
  font-weight: bold;
  text-align: center;
  line-height: 50px;
}

#booking.step1 .calendar table {
  margin-bottom: max(20px, 1vw);
  width: 100%;
}

#booking.step1 .calendar table th,
#booking.step1 .calendar table td {
  width: 14.2857143%;
}

#booking.step1 .calendar table th {
  color: #fff;
  font-size: 1.5rem;
  font-weight: normal;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border: 1px solid rgba(33, 31, 31, 0.15);
  background: rgba(33, 31, 31, 0.5);
}

#booking.step1 .calendar table th.weekend {
  border-right: 1px solid rgba(33, 31, 31, 0.15);
  border-left: 1px solid rgba(33, 31, 31, 0.15);
  background: rgba(33, 31, 31, 0.85);
}

#booking.step1 .calendar table td {
  position: relative;
  cursor: pointer;
  vertical-align: top;
  border: 1px solid rgba(33, 31, 31, 0.2);
}

#booking.step1 .calendar table td.this-past {
  cursor: not-allowed;
  background: #f5f5f5;
}

#booking.step1 .calendar table td .date {
  width: 100%;
  padding: 3px 0;
  text-align: center;
  background: #eee;
  font-size: 1.6rem;
  color: rgb(33, 31, 31);
  position: relative;
}

#booking.step1 .calendar table td.this-past .date {
  color: #999;
  background: none;
}

#booking.step1 .calendar table td .no-data {
  height: 29px;
  margin: 0;
}

#booking.step1 .calendar table td .price {
  padding: 3px 0 0;
  font-size: clamp(1.5rem, 1.3vw, 1.6rem);
  color: rgb(160, 9, 0);
  font-weight: bold;
  text-align: center;
}

#booking.step1 .calendar table td .price span {
  padding-right: 3px;
  font-size: 1.2rem;
}

#booking.step1 .calendar table td .qua {
  padding: 0 0 3px 0;
  color: rgba(33, 31, 31, 0.75);
  font-size: 1.4rem;
  text-align: center;
}

#booking.step1 .calendar table td .qua.full {
  color: rgb(160, 9, 0);
  padding: 3px 0 0;
}

#booking.step1 .calendar table td.start,
#booking.step1 .calendar table td.during,
#booking.step1 .calendar table td.end {
  background: rgba(160, 9, 0, 0.03);
}

#booking.step1 .calendar table td.start .date,
#booking.step1 .calendar table td.during .date,
#booking.step1 .calendar table td.end .date {
  color: #fff;
  background: rgb(160, 9, 0);
}

#booking.step1 .calendar table td.start .date::after {
  display: inline-block;
  content: "入住";
  margin: 0 0 0 5px;
  font-size: 1rem;
  color: #fff;
  vertical-align: top;
}

#booking.step1 .calendar table td.end .date::after {
  display: inline-block;
  content: "退房";
  margin: 0 0 0 5px;
  color: #fff;
  font-size: 1rem;
  vertical-align: top;
}

#booking.step1 .list-info {
  margin-top: max(45px, 3.2vw);
  display: none;
}

#booking.step1 .list-info table {
  width: 100%;
  border-bottom: none;
}

#booking.step1 .list-info table thead th {
  width: 25%;
  height: 45px;
  line-height: 45px;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  background: rgb(33, 31, 31);
  font-weight: normal;
  width: 13%;
}

#booking.step1 .list-info table thead th:first-child {
  width: 25%;
}

#booking.step1 .list-info table thead th:nth-child(2) {
  width: 18%;
}

#booking.step1 .list-info table thead th:nth-child(3) {
  width: 18%;
}

#booking.step1 .list-info table tbody th,
#booking.step1 .list-info table tbody td {
  padding: 15px 5px;
  font-size: 1.6rem;
  border-bottom: 1px solid rgba(33, 31, 31, 0.15);
}

#booking.step1 .list-info table tbody td {
  text-align: center;
}

#booking.step1 .list-info table tbody th.room-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.6rem;
  font-weight: normal;
  text-align: left;
  line-height: 1.4;
}

#booking.step1 .list-info table tbody th .room-pic {
  margin-right: max(15px, 0.6vw);
  max-width: 120px;
  border-radius: 3px;
  overflow: hidden;
}

#booking.step1 .list-info table tbody td select {
  width: 80px;
  height: 30px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 1.6rem;
  padding: 0 10px;
  background: url(../images/aw.png) no-repeat 62px -5px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

#booking.step1 .btn-wrap {
  margin: max(20px, 1vw) 0 0;
  display: none;
}

#booking.step1 .join {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#booking.step1 .count {
  margin: 0 15px 0 0;
  font-size: 1.6rem;
  color: rgba(33, 31, 31, 0.75);
  text-align: right;
  line-height: 1.4;
}

#booking.step1 .count span {
  margin-left: 15px;
  font-size: clamp(2rem, 1.3vw, 2.4rem);
  color: #000;
  font-weight: bold;
  letter-spacing: 0.25rem;
}

@media (max-width: 991px) {
  #booking.step1 .list-info table {
    display: block;
  }
  #booking.step1 .list-info table thead {
    display: none;
  }
  #booking.step1 .list-info table tbody, #booking.step1 .list-info table tr, #booking.step1 .list-info table th, #booking.step1 .list-info table td {
    display: block;
    width: 100%;
  }
  #booking.step1 .list-info table tbody th, #booking.step1 .list-info table tbody td {
    padding: 8px 15px;
    text-align: left;
  }
  #booking.step1 .list-info table tbody th {
    color: #fff;
    background: rgb(33, 31, 31);
  }
  #booking.step1 .list-info table tbody th .room-pic {
    display: none;
  }
  #booking.step1 .list-info table tbody td:nth-child(2):before, #booking.step1 .list-info table tbody td:nth-child(3):before, #booking.step1 .list-info table tbody td:nth-child(4):before, #booking.step1 .list-info table tbody td:nth-child(5):before {
    position: relative;
    display: inline-block;
    margin: 0 15px 0 0;
    font-size: 1.6rem;
  }
  #booking.step1 .list-info table tbody td:nth-child(2):before {
    content: "入住：";
  }
  #booking.step1 .list-info table tbody td:nth-child(3):before {
    content: "退房：";
  }
  #booking.step1 .list-info table tbody td:nth-child(4):before {
    content: "數量：";
  }
  #booking.step1 .list-info table tbody td:nth-child(5):before {
    content: "小計：";
  }
}
@media (max-width: 767px) {
  #booking.step1 .calendar table td.start .date:after,
  #booking.step1 .calendar table td.end .date:after {
    display: none;
  }
  #booking.step1 .calendar table td.start:after {
    content: "入住";
    color: #fff;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    background: rgb(33, 31, 31);
  }
  #booking.step1 .calendar table td.end:after {
    content: "退房";
    color: #fff;
    font-size: 1.2rem;
    display: block;
    text-align: center;
    background: rgb(33, 31, 31);
  }
  #booking.step1 .calendar table td .price {
    display: none;
  }
  #booking.step1 .calendar table td .qua.full {
    padding: 0 0 3px;
  }
}
@media (max-width: 575px) {
  #booking.step1 .join .btn-style {
    margin-top: 10px;
    width: calc(50% - 5px);
    max-width: 100%;
  }
}
/* step2 */
.order .fill-box {
  margin-bottom: max(45px, 3.2vw);
}
.order .room-info {
  width: 100%;
  font-size: 1.6rem;
}
.order .room-info thead th {
  padding: 0 15px;
  width: calc(100% - 300px);
  font-size: 1.4rem;
  color: #fff;
  font-weight: normal;
  line-height: 45px;
  background: rgb(33, 31, 31);
}
.order .room-info thead th:nth-child(2), .order .room-info thead th:nth-child(3) {
  width: 150px;
  text-align: center;
}
.order .room-info tbody tr {
  border-bottom: rgba(33, 31, 31, 0.15) solid 1px;
}
.order .room-info tbody th, .order .room-info tbody td {
  padding: 15px 5px;
  line-height: 1.6;
}
.order .room-info tbody th {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: normal;
}
.order .room-info tbody td {
  text-align: center;
}
.order .room-info__pic {
  width: 100%;
  max-width: 130px;
  border-radius: 3px;
  overflow: hidden;
}
.order .room-info__content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: max(15px, 1vw);
}
.order .room-info__name {
  font-size: 1.7rem;
  color: #000;
}
.order .room-info__date, .order .room-info__price {
  font-size: 1.5rem;
  color: rgba(33, 31, 31, 0.85);
}
.order .room-info__date span, .order .room-info__price span {
  padding-left: 15px;
}
.order .room-info__qu span {
  display: none;
}
.order .room-info__btn button {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  outline: none;
  border: none;
  border-radius: 100%;
  background: transparent;
  -webkit-transition: background-color 0.35s;
  transition: background-color 0.35s;
}
.order .room-info__btn button i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: url(../images/icon_del.svg) no-repeat 0 0;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.order .room-info__btn button:hover {
  background-color: rgba(33, 31, 31, 0.05);
}
.order .amount {
  margin: max(10px, 0.5vw) 0 0 auto;
  width: 42%;
  font-size: 1.6rem;
}
.order .amount .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.order .amount .item p {
  margin-top: 0.25vw;
}
.order .amount .item .box {
  padding-left: 20px;
  color: #000;
  text-align: right;
}
.order .amount .item span {
  font-size: clamp(2rem, 1.3vw, 2.4rem);
}
.order .amount .price-note {
  margin-top: 10px;
}
.order .amount .price-note li {
  position: relative;
  padding-left: 22px;
  font-size: 1.5rem;
  line-height: 1.6;
}
.order .amount .price-note li::before {
  display: block;
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
.order .amount .price-note li:not(:last-child) {
  margin-bottom: 6px;
}
.order .amount .price-note li strong {
  text-decoration: underline;
}
.order .remind {
  padding: 15px;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.06);
}
.order .confirm .box-ti {
  margin-bottom: max(10px, 0.8vw);
}
.order .confirm .room-info thead th {
  width: calc(100% - 150px);
}
.order .confirm .room-info thead th:nth-child(2) {
  width: 150px;
}
.order .confirm .form-group .label-ti {
  width: 90px;
}
.order .confirm .form-group .box {
  width: calc(100% - 90px);
  color: rgba(33, 31, 31, 0.75);
}
.order .confirm .box-item {
  width: calc(50% - 7.5px);
}
.order .payment-info {
  margin: 5px 0 10px;
  padding: 10px 20px;
  max-width: 350px;
  line-height: 1.6;
  border-radius: 6px;
  background-color: rgba(33, 31, 31, 0.05);
}

@media (max-width: 1079px) {
  .order .amount {
    width: 100%;
  }
}
@media (max-width: 1023px) {
  .order .room-info thead {
    display: none;
  }
  .order .room-info tbody, .order .room-info tr, .order .room-info th, .order .room-info td {
    display: block;
    width: 100%;
    text-align: left;
  }
  .order .room-info tbody tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    border: rgba(33, 31, 31, 0.25) solid 1px;
    border-radius: 3px;
    overflow: hidden;
  }
  .order .room-info tbody tr:not(:last-child) {
    margin-bottom: 10px;
  }
  .order .room-info tbody th, .order .room-info tbody td {
    padding: 5px;
  }
  .order .room-info tbody td {
    color: #fff;
    text-align: left;
    line-height: 1;
    background-color: rgb(33, 31, 31);
  }
  .order .room-info tbody td:last-child {
    text-align: right;
  }
  .order .room-info tbody td.del {
    position: absolute;
    bottom: 0;
    right: 5px;
    width: 32px;
    height: 32px;
    background-color: transparent;
  }
  .order .room-info tbody td.qu {
    position: absolute;
    bottom: 2px;
    left: 5px;
    background-color: transparent;
  }
  .order .room-info__qu span {
    display: inline-block;
  }
  .order .room-info__subtotal {
    padding-left: 10px;
    color: #fff;
    line-height: 22px;
  }
  .order .room-info__btn {
    padding-right: 10px;
  }
  .order .room-info__btn button {
    width: 20px;
    height: 20px;
  }
  .order .room-info__btn button i {
    background-position: 0 100%;
  }
  .order .confirm .room-info tbody td {
    padding-right: 10px;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .order .confirm .box-item {
    width: 100%;
  }
}
@media (max-width: 499px) {
  .order .room-info tbody td {
    padding: 10px 5px;
  }
  .order .room-info tbody td.del {
    width: 42px;
    height: 42px;
  }
  .order .room-info__pic {
    max-width: 100%;
  }
  .order .room-info__content {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    padding: 10px;
  }
  .contact-data .box-ti {
    margin-bottom: 10px;
  }
}
#booking.step2 .remark {
  margin-bottom: 0;
}

#booking.step2 .remark .text-box {
  height: 120px;
}

#booking.step2 .agree {
  padding-top: 0;
}

/* step3 */
#booking.step3 .dec {
  margin-bottom: 20px;
  letter-spacing: 0.25rem;
  text-align: center;
  line-height: 1.6;
}
#booking.step3 .dec span {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 1.3vw, 2rem);
  color: #000;
  line-height: 1.4;
}
#booking.step3 .remind {
  display: block;
}
#booking.step3 .remind p.first {
  margin: 20px 0 10px;
}
#booking.step3 .remind p.important {
  margin: 0 0 10px;
  padding: 5px 10px;
  color: #5f4534;
  border-radius: 6px;
  background: #f8f8f8;
}
#booking.step3 .remind p.important strong {
  color: rgb(160, 9, 0);
  font-weight: bold;
}
#booking.step3 .remind ul {
  list-style-type: decimal;
  padding-left: 20px;
  color: #666;
}
#booking.step3 .btn-style {
  color: #fff;
}

.order-info {
  padding-top: 25px;
  border-top: 1px solid rgba(33, 31, 31, 0.15);
}
.order-info .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8px;
}
.order-info .box.pay {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.order-info .box > span {
  position: relative;
  padding-left: 15px;
  width: 105px;
  font-size: 1.6rem;
}
.order-info .box > span::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: rgba(33, 31, 31, 0.5);
}
.order-info .box p {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: rgba(33, 31, 31, 0.75);
}
.order-info .box p.price {
  font-size: 1.4rem;
  color: rgb(160, 9, 0);
  font-weight: bold;
}
.order-info .box p.price span {
  font-size: clamp(1.8rem, 1.3vw, 2rem);
}
.order-info .box .items {
  display: block;
  width: 100%;
  margin: 10px 0 15px;
}
.order-info .box.room {
  display: block;
}

.order-list {
  width: 100%;
  border: 1px solid rgba(33, 31, 31, 0.15);
  border-bottom: none;
}
.order-list th {
  width: 25%;
  height: 40px;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
  font-weight: normal;
  line-height: 40px;
  border-right: 1px solid rgba(33, 31, 31, 0.15);
  background: rgb(33, 31, 31);
}
.order-list th:last-child {
  border-right: none;
}
.order-list td {
  padding: 10px;
  font-size: 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(33, 31, 31, 0.15);
}
.order-list td a:hover {
  text-decoration: underline;
}

.credit-pay-btn {
  display: inline-block;
  margin: -5px 0 0 8px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 1.4rem;
  color: #333333;
  vertical-align: middle;
  border-radius: 3px;
  border: rgba(33, 31, 31, 0.2) solid 1px;
  background: #fff;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.credit-pay-btn:hover {
  border-color: transparent;
  background: rgba(33, 31, 31, 0.12);
}

@media (min-width: 640px) {
  .order-list tr:nth-child(even) {
    background: rgba(33, 31, 31, 0.05);
  }
}
@media (max-width: 1079px) {
  #booking.step3 .order-info .box > span::before {
    top: 11px;
  }
  .order-info .box > span::before {
    top: 11.5px;
  }
}
@media (max-width: 639px) {
  .order-list tr:first-child {
    display: none;
  }
  .order-list,
  .order-list tbody,
  .order-list td,
  .order-list tr {
    display: block;
    width: 100%;
    text-align: left;
  }
  .order-list td {
    padding: 8px 15px;
  }
  .order-list td a {
    color: #fff;
  }
  .order-list td:first-child {
    color: #fff;
    background: rgb(33, 31, 31);
  }
  .order-list td:nth-child(2):before, .order-list td:nth-child(3):before, .order-list td:nth-child(4):before {
    display: inline-block;
    content: attr(data-ti);
    position: relative;
    margin: -5px 5px 0 0;
  }
}
/* ============ news ============= */
.news-list__item {
  display: block;
}
.news-list__date {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
}
.news-list__ti {
  margin-top: 15px;
  font-size: 2rem;
  color: #fff;
  line-height: 1.6;
}
.news-list__content {
  margin: 20px 10px 0;
  padding: 5px 0;
  width: calc(100% - 20px);
  color: #fff;
}
.news-list__desc {
  margin-top: 4px;
  font-size: 1.5rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* list */
#news.list {
  background-color: #5a5a5e;
}
#news.list .g__headline {
  color: #fff;
}
#news.list .btn-detail {
  margin-top: 16px;
  color: #fff;
  border-color: #fff;
  background-color: #5a5a5e;
}
#news.list .btn-detail:hover {
  color: rgb(33, 31, 31);
  background-color: #fff;
}
#news.list .news-list__item {
  margin-bottom: max(60px, 3.6vw);
}

@media (min-width: 640px) {
  .i-news .news-list__ti {
    font-size: 1.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
@media (min-width: 1080px) {
  #news.list .news-list__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #news.list .news-list__pic {
    width: 29.688%;
    max-width: 380px;
  }
  #news.list .news-list__content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 0 0 0 max(40px, 3.6vw);
    width: auto;
    border-left: none;
  }
  #news.list .news-list__ti {
    font-size: 2.4rem;
  }
}
@media (max-width: 1079px) {
  #news.list .news-list__item {
    margin-left: auto;
    margin-right: auto;
    max-width: 610px;
  }
  #news.list .news-list__desc {
    margin-top: 8px;
  }
}
/* view */
body.news-bg {
  background: #5a5a5e;
}
body.news-bg.no-ban .g__headline {
  color: #fff;
}
body.news-bg .view .g__headline::before {
  background-color: #fff;
}

.news-view__box {
  padding: max(30px, 2.8vw) max(25px, 4.5vw);
  background-color: #fff;
}
.news-view__bar {
  margin-bottom: calc(var(--box-space) * 0.5);
  padding-bottom: max(15px, 1.2vw);
  border-bottom: rgba(0, 0, 0, 0.5) solid 1px;
}
.news-view__date {
  margin-bottom: 10px;
  font-size: 1.5rem;
  line-height: 1;
}
.news-view__ti {
  font-size: clamp(2rem, 1.6vw, 2.8rem);
  color: #000;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .news-view__box {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
/* ============ 房型介紹 ============= */
/* list */
.room-list {
  margin: 0 -20px;
}
.room-list__item {
  padding: 0 20px;
}
.room-list__content {
  position: relative;
  z-index: 2;
  margin: max(24px, 2.8rem) 10px 0;
  width: calc(100% - 20px);
}
.room-list__content .btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.room-list__type {
  width: 100%;
  text-align: right;
}
.room-list__type span {
  display: inline-block;
  padding: 14px 7px 10px 0px;
  font-size: clamp(1.8rem, 1.8vw, 2.4rem);
  color: #000;
  font-weight: 600;
  letter-spacing: 0.4rem;
  vertical-align: middle;
  line-height: 1.4;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  text-orientation: mixed;
  border: #000 solid 1px;
  background-color: #fff;
}
.room-list__ti {
  display: inline-block;
  font-size: clamp(2.4rem, 1.5vw, 2.8rem);
  vertical-align: middle;
  letter-spacing: 0;
  line-height: 1;
}
.room-list__ti a {
  color: #000;
}
.room-list__style {
  display: inline-block;
  position: relative;
  margin: 0 0 0 max(12px, 0.8vw);
  padding-left: max(12px, 0.8vw);
  font-size: 1.5rem;
  vertical-align: middle;
  letter-spacing: 0;
  line-height: 1;
  border-left: #ccc solid 1px;
}
.room-list__txt {
  margin: max(16px, 1vw) 0 max(24px, 2vw);
  letter-spacing: 0.25rem;
  line-height: 1.6;
}

@media (max-width: 639px) {
  .room-list__type span {
    padding: 14px 5px 10px 4px;
  }
}
@media (max-width: 639px) {
  .room-list__txt {
    padding-right: 0;
  }
}
#room-list.g-wrap {
  padding-top: 0;
}
#room-list .g-main {
  padding-top: 0;
}
#room-list .g-footer {
  margin-top: 0;
}
#room-list .section-wrap {
  position: relative;
  padding-top: max(40px, 6.5vw);
  background-color: #fff;
}

.room-ban {
  padding-left: var(--header-w);
}

.room-style {
  margin-top: -50px;
  padding-top: 50px;
  padding-bottom: calc(max(40px, 6.5vw) * 1.5);
}
.room-style__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.room-style__link li {
  width: 33.333%;
  overflow: hidden;
}
.room-style__link a {
  display: inline-block;
  position: relative;
  width: 100%;
}
.room-style__link a::before, .room-style__link a::after {
  display: block;
  content: "";
  width: 100%;
}
.room-style__link a::before {
  padding-bottom: 153.8%;
}
.room-style__link a::after {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}
.room-style__link a:hover .out-img {
  opacity: 0;
}
.room-style__link a:hover .hover-img {
  opacity: 1;
}
.room-style__link .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.room-style__link .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none !important;
  height: 100% !important;
  opacity: 1;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.room-style__link .img .hover-img {
  opacity: 0;
}
.room-style__link .ti {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  font-size: clamp(2rem, 2vw, 2.8rem);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.4rem;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.room-style__ti {
  margin-bottom: calc(max(40px, 6.5vw) / 2);
  text-align: center;
}
.room-style__ti h2 {
  font-size: clamp(2.4rem, 2.6vw, 4rem);
  color: #000;
  font-weight: 600;
  letter-spacing: 0.4rem;
  line-height: 1.4;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
}

@media (max-width: 991px) {
  .room-ban {
    padding-left: 0;
  }
  .room-style {
    padding-top: calc(30px + var(--header-w));
    padding-left: var(--padding-spac);
    padding-right: var(--padding-spac);
  }
}
@media (max-width: 639px) {
  .room-style {
    margin-top: -80px;
  }
  .room-style__link a::before {
    padding-bottom: 230%;
  }
}
/* view */
#room-view.g-wrap, #room-view .g-main {
  padding-top: 0;
}
#room-view .room-photo_box {
  position: relative;
}
#room-view .photo-slick {
  margin: 0;
}
#room-view .photo-slick .room-photo__item {
  position: relative;
  padding: 0;
}
#room-view .photo-slick .room-photo__item::before {
  display: block;
  content: "";
  padding-bottom: 47.415%;
  width: 100%;
}
#room-view .photo-slick .room-photo__item img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#room-view .share {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 30px;
}
#room-view .share span {
  padding-right: 20px;
  font-size: 1.3rem;
}
#room-view .btn-box {
  margin-top: calc(max(40px, 6.5vw) / 1.8);
}
#room-view .more_room {
  position: relative;
}
#room-view .more_room .box-headline {
  text-align: center;
}

.room-view__bar {
  margin-bottom: -30px;
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}
.room-view__txt {
  padding-right: max(40px, 4.2vw);
  width: 50%;
}
.room-view__txt .room-view__equipment {
  margin-bottom: 0;
}
.room-view__map {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
}
.room-view__ti {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.room-view__type {
  margin-bottom: max(20px, 5.2vw);
  width: 100%;
  text-align: right;
}
.room-view__type span {
  display: inline-block;
  padding: 14px 7px 10px 0px;
  font-size: clamp(2rem, 2.5vw, 3.4rem);
  color: #000;
  font-weight: 700;
  letter-spacing: 0.4rem;
  vertical-align: middle;
  line-height: 1.4;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  text-orientation: mixed;
  border: #000 solid 1px;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
}
.room-view__name {
  margin-bottom: max(20px, 1.5vw);
  font-size: clamp(2.4rem, 2.8vw, 3.8rem);
  color: #000;
  font-weight: 600;
  line-height: 1.4;
}
.room-view__style {
  font-size: clamp(1.6rem, 1.2vw, 1.8rem);
}
.room-view__price {
  margin-bottom: max(20px, 3.2vw);
  font-size: clamp(1.6rem, 1.5vw, 2.2rem);
  color: #000;
  font-weight: 500;
}
.room-view__price span {
  padding-right: 8px;
}
.room-view__intro {
  margin-top: max(20px, 3.2vw);
  width: 100%;
  font-size: clamp(1.6rem, 1.3vw, 1.8rem);
}
.room-view__equipment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.2vw;
  margin-bottom: calc(max(40px, 6.5vw) / 4);
}
.room-view__equipment li span {
  height: 70px !important;
  overflow: hidden;
}
.room-view__equipment li span img {
  width: auto !important;
  height: 100% !important;
}
.room-view__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 max(40px, 5.8vw);
  margin: max(40px, 6.5vw) 0;
}
.room-view__info > div {
  margin-bottom: max(40px, 6.5vw);
}
.room-view__box {
  width: 100%;
}
.room-view__box .box-ti {
  margin-bottom: max(16px, 1.2vw);
  font-size: clamp(2rem, 2.2vw, 2.8rem);
}
.room-view__box .box-ti span::after {
  display: none;
}
.room-view__box .box-ti span.en {
  padding: 0 0 0 12px;
  font-size: clamp(1.6rem, 1.2vw, 1.7rem);
}
.room-view__content {
  padding-top: 20px;
  border-top: rgba(33, 31, 31, 0.15) solid 1px;
}
.room-view__supply {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}
.room-view__supply li {
  position: relative;
  padding: 0 8px 0 16px;
  width: 25%;
  white-space: normal;
}
.room-view__supply li::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 14px;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: rgba(33, 31, 31, 0.75);
}
.room-view__video {
  position: relative;
  margin-top: max(40px, 6.5vw);
  padding-bottom: 56.297%;
  width: 100%;
  font-size: 0;
  line-height: 0;
}
.room-view__video iframe {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}
.room-view__edit {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 20px;
  border-top: rgba(33, 31, 31, 0.15) solid 1px;
}

@media (min-width: 992px) {
  #room-view .room-photo_box {
    margin-left: var(--header-w);
    width: calc(100% - var(--header-w));
  }
}
@media (max-width: 1279px) {
  .room-view__supply li {
    width: 33.333%;
  }
}
@media (max-width: 1079px) {
  .room-view__supply li::before {
    top: 11px;
  }
}
@media (max-width: 1023px) {
  .room-view__box .box-ti {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .room-view__type span {
    padding: 14px 5px 10px 4px;
  }
  .room-view__intro {
    line-height: 1.8;
  }
  .room-view__info {
    margin: 80px 0;
  }
  .room-view__info > div {
    margin-bottom: 80px;
  }
  .room-view__info > div:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  #room-view .share {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  #room-view .btn-box {
    margin-top: 80px;
  }
  #room-view .more_room {
    padding: 0 var(--padding-spac);
  }
  .room-view__txt {
    padding: 0 0 30px 0;
    width: 100%;
  }
  .room-view__txt .room-view__equipment {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .room-view__map {
    width: 100%;
  }
  .room-view__name, .room-view__style, .room-view__intro, .room-view__price {
    text-align: center;
  }
  .room-view__equipment {
    gap: 2px 12px;
  }
}
@media (max-width: 639px) {
  .room-view__style {
    display: block;
    margin-left: 0;
  }
  .room-view__equipment li span {
    height: 60px !important;
  }
  .room-view__supply li {
    padding-left: 12px;
    padding-right: 2px;
    width: 50%;
    letter-spacing: 0;
  }
  .room-view__supply li::before {
    top: 13px;
  }
  .room-view__price {
    letter-spacing: 0.05rem;
  }
}
@media (max-width: 374px) {
  .room-view__supply li {
    width: 100%;
  }
}
/* ============ contact ============= */
#contact {
  background-color: #5a5a5e;
}
#contact.g-wrap {
  padding-top: 0 !important;
}
#contact .g-main {
  padding-top: 0;
}

.contact-info {
  position: relative;
  padding-bottom: var(--about-ban-h);
  color: #fff;
  background: url(../images/contact_bg.jpg) no-repeat center top;
  background-size: cover;
}
.contact-info .container-1080 {
  position: absolute;
  top: 50%;
  left: calc(var(--header-w) + (100% - var(--header-w) - 1130px) / 2);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.contact-info__txt {
  padding-top: 8%;
  color: #fff;
}
.contact-info__txt .g__headline {
  margin-bottom: 16px;
}
.contact-info__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20%;
}
.contact-info__item .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 max(30px, 3.2vw);
  width: 72%;
}
.contact-info__item .box.code {
  padding-right: max(30px, 3.2vw);
  width: 28%;
}
.contact-info__item h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 1.2vw, 1.6rem);
  line-height: 1.4;
}
.contact-info__item h3 a {
  color: #fff;
}
.contact-info__item h3 a:hover {
  text-decoration: underline;
}
.contact-info__item h3 > i {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.contact-info__item h3.time > i {
  background-image: url(../images/icon_time.svg);
}
.contact-info__item h3.line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contact-info__item h3.line > i {
  display: none;
  background-image: url(../images/icon_line.svg);
  background-position: 0 100%;
}
.contact-info__item h3.line .code {
  width: 120px;
}
.contact-info__item h3.line .data {
  padding-left: 20px;
}
.contact-info__item h3.line .data .ti {
  display: block;
}
.contact-info__item h3.tel > i {
  background-image: url(../images/icon_phone.svg);
}
.contact-info__item h3.add > i {
  background-image: url(../images/icon_add.svg);
}
.contact-info__item .data {
  padding-left: 8px;
}
.contact-info__item .ti {
  padding-right: max(10px, 1vw);
  font-size: 1.5rem;
}
.contact-info__map {
  position: absolute;
  top: -28%;
  right: 14%;
  width: 50%;
  max-width: 880px;
}
.contact-form {
  padding-top: max(60px, 5.5vw) !important;
  color: #fff;
  background: none;
}
.contact-form p {
  margin-bottom: max(25px, 1.8vw);
}
.contact-form .flex {
  gap: 15px;
}
.contact-form .btn-box.control {
  margin-top: max(15px, 1vw);
  border-top-color: rgba(255, 255, 255, 0.2);
}
.contact-form .form-group .text-box, .contact-form .form-group .select, .contact-form .form-group .textarea {
  color: #333333;
}
.contact-form .form-group .label-ti {
  color: #fff;
}
.contact-form .form-group .label-ti span {
  color: #cccccc;
}

@media (min-width: 1920px) {
  .contact-info {
    padding-bottom: calc(var(--vh, 1vh) * 100);
  }
}
@media (max-width: 1679px) {
  .contact-info__map {
    right: 9%;
  }
}
@media (max-width: 1279px) {
  .contact-info .container-1080 {
    left: 0;
    margin-left: var(--header-w);
    width: calc(100% - var(--header-w));
  }
  .contact-info__item h3 > i {
    width: 42px;
    height: 42px;
  }
  .contact-info__item h3.line .code {
    width: 100px;
  }
}
@media (max-width: 1079px) {
  .contact-info__item h3 > i {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 991px) {
  .contact-info .container-1080 {
    margin-left: 0;
    width: 100%;
  }
  .contact-info__map {
    top: -50%;
    right: -8%;
    width: 65%;
  }
  .contact-info__item {
    margin-top: 3.2%;
  }
  .contact-info__item .box {
    width: 100% !important;
  }
  .contact-info__item h3.line i {
    display: block;
  }
  .contact-info__item h3.line .code {
    display: none;
    width: 80px;
  }
  .contact-info__item h3.line .data {
    padding-left: 8px;
  }
  .contact-info__item h3.line .data .ti {
    display: inline-block;
  }
  .contact-form .form-group .label-ti, .contact-form .form-group .box {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .contact-info {
    padding-bottom: 96%;
  }
  .contact-info__txt {
    padding-top: 18%;
  }
  .contact-info__map {
    top: -95%;
    right: -65%;
    width: 140%;
  }
}
@media (max-width: 639px) {
  .contact-info .container-1080 {
    top: unset;
    bottom: 15px;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    margin-left: 0;
  }
  .contact-info__txt {
    padding-top: 0;
  }
  .contact-info__txt .g__headline {
    margin-bottom: 10px;
  }
  .contact-info__item h3 > i {
    width: 28px;
    height: 28px;
  }
  .contact-info__item h3 .data i {
    display: block;
  }
  .contact-info__item h3.time, .contact-info__item h3.add {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
/* ============ inquiry ============= */
#inquiry.field {
  background: url(../images/member_bg.jpg) fixed no-repeat center top;
  background-size: 100% auto;
}
#inquiry.field .form {
  padding-left: 31%;
  border-radius: 6px;
  background: url(../images/inquiry_bg.jpg) no-repeat 0 0 rgb(255, 255, 255);
  background-size: auto 100%;
  overflow: hidden;
}
#inquiry.field .form .wrap {
  padding: max(40px, 2.5vw) max(25px, 3.5vw);
  background-color: #fff;
}
#inquiry.field .dec {
  margin-bottom: max(25px, 1.8vw);
  line-height: 1.6;
}
#inquiry.field .btn-style {
  max-width: 100%;
}
#inquiry .order-info {
  padding-top: 0;
  border-top: none;
}
#inquiry .order-info .box > span {
  width: 120px;
}

@media (min-width: 768px) {
  #inquiry.field .container-900 {
    padding-bottom: max(40px, 3.2vw);
  }
  #inquiry .fill-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
@media (max-width: 767px) {
  #inquiry.field .form {
    padding: 30% 0 0 0;
    background-image: url(../images/inquiry_bg_s.jpg);
    background-position: center 50%;
    background-size: 100% auto;
  }
}
@media (max-width: 575px) {
  #inquiry.field .form {
    background-position: center -50%;
  }
}
/* ============ member ============= */
#member {
  background: url(../images/member_bg.jpg) fixed no-repeat center top;
  background-size: 100% auto;
}

/* 功能選單 */
.g-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 10px;
  margin-bottom: max(15px, 1.2vw);
  width: 100%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}
.g-nav li {
  font-size: 1.5rem;
  text-align: center;
}
.g-nav li a {
  display: inline-block;
  padding: 8px 25px 6px;
  width: 100%;
  color: rgb(33, 31, 31);
  border: rgba(33, 31, 31, 0.15) solid 1px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-transition: color 0.35s, background-color 0.35s;
  transition: color 0.35s, background-color 0.35s;
}
.g-nav li a i {
  display: inline-block;
  margin: -4px 8px 0 0;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.g-nav li.order i {
  width: 16px;
  height: 20px;
  background-image: url(../images/icon_order.svg);
  background-position: 0 100%;
}
.g-nav li.profile i {
  width: 16px;
  height: 20px;
  background-image: url(../images/icon_member.svg);
  background-position: 0 100%;
}
.g-nav li.pw i {
  width: 18px;
  height: 18px;
  background-image: url(../images/icon_pw.svg);
}
.g-nav li.logout i {
  width: 16px;
  height: 16px;
  background-image: url(../images/icon_logout.svg);
}
.g-nav li:hover a, .g-nav li.current a {
  color: #fff;
  border-color: rgb(33, 31, 31);
  background-color: rgb(33, 31, 31);
}
.g-nav li:hover.order i, .g-nav li:hover.profile i, .g-nav li.current.order i, .g-nav li.current.profile i {
  background-position: 0 0;
}
.g-nav li:hover.pw i, .g-nav li:hover.logout i, .g-nav li.current.pw i, .g-nav li.current.logout i {
  background-position: 0 100%;
}

@media (max-width: 639px) {
  .g-nav {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 0 3px;
  }
  .g-nav li {
    font-size: 1.4rem;
  }
  .g-nav li a {
    padding: 8px 15px 6px;
  }
  .g-nav li a i {
    margin-right: 6px;
  }
  .g-nav li.order i {
    width: 14px;
    height: 18px;
  }
  .g-nav li.profile i {
    width: 14px;
    height: 18px;
  }
  .g-nav li.pw i {
    width: 16px;
    height: 16px;
  }
  .g-nav li.logout i {
    width: 14px;
    height: 14px;
  }
}
/* 會員登入 */
.member-field {
  position: relative;
  margin: 0 auto;
  padding: max(20px, 2.5vw);
  max-width: 900px;
  background-color: #fff;
}
.member-field.flex {
  gap: 0 max(30px, 2.5vw);
}
.member-field.flex .member-field__login {
  width: 50%;
}
.member-field.flex .member-field__non-member {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: max(30px, 2vw);
  text-align: center;
  border: rgba(33, 31, 31, 0.15) solid 4px;
  border-radius: 6px;
}
.member-field.flex .member-field__non-member p {
  margin-bottom: max(15px, 1vw);
  width: 100%;
  font-size: 1.6rem;
}
.member-field.flex .member-field__non-member .btn-style {
  margin: 0 auto;
}
.member-field__login {
  padding: 10px 0;
}
.member-field__form .other-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 15px;
  width: 100%;
  font-size: 1.5rem;
}
.member-field__form .other-links a {
  color: rgba(33, 31, 31, 0.75);
}
.member-field__form .other-links a:hover {
  text-decoration: underline;
}
.member-field__form .btn-style {
  max-width: 100%;
}
.member-field__ti {
  margin-bottom: 15px;
  font-size: 1.7rem;
  color: #000;
}
.member-field__remark {
  margin-bottom: max(20px, 1.5vw);
  font-size: 1.5rem;
  color: #555555;
  line-height: 1.6;
}
.member-field__divider {
  position: relative;
  margin: max(20px, 1vw) 0;
  width: 100%;
}
.member-field__divider::before, .member-field__divider::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 25px);
  height: 1px;
  background-color: rgba(33, 31, 31, 0.15);
}
.member-field__divider::before {
  left: 0;
}
.member-field__divider::after {
  right: 0;
}
.member-field__divider span {
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 50px;
  font-size: 1.4rem;
  text-align: center;
}
.member-field__other-login {
  width: 100%;
}
.member-field__other-login.flex {
  gap: 0 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.member-field__other-login a {
  width: calc(50% - 5px);
  max-width: 100%;
}
.member-field__other {
  margin-top: max(20px, 1.5vw);
  text-align: center;
  line-height: 1;
}
.member-field__other a {
  display: inline-block;
  font-size: 1.5rem;
  color: #555555;
}
.member-field__other a span {
  position: relative;
  margin-left: 3px;
  padding-bottom: 3px;
  -webkit-transition: color 0.35s;
  transition: color 0.35s;
}
.member-field__other a span::after {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgb(33, 31, 31);
}
.member-field__other a:hover span {
  color: rgb(33, 31, 31);
}
.member-field .js-close {
  cursor: pointer;
}

@media (min-width: 768px) {
  #member.field .container-900 {
    padding-bottom: max(40px, 3.2vw);
  }
}
@media (max-width: 767px) {
  .member-field.flex .member-field__login {
    width: 100%;
  }
  .member-field.flex .member-field__non-member {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin-top: 20px;
  }
  .member-field .box-ti {
    text-align: center;
  }
}
/* 中心 */
#member.view {
  background: none;
}
#member.view .member-wrap {
  width: 100%;
}
#member.view .order-info {
  padding-top: 0;
  border-top: none;
}
#member.view .member-field {
  padding: 0;
  max-width: 100%;
}
#member.view .member-field .text-box[disabled] {
  color: #999;
  cursor: not-allowed;
}

@media (min-width: 640px) {
  #member.view .member-field .btn-style {
    margin: 0 auto;
    max-width: 150px;
  }
}
@media (min-width: 768px) {
  #member.view .member-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  #member.view.order .fill-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
/* ============ sitemap ============= */
#sitemap .g-header__nav {
  padding: max(40px, 3.5vw) 0;
}
#sitemap .g-header__nav.flex {
  gap: max(40px, 3.2vw) max(30px, 3.5vw);
}
#sitemap .g-header__nav li {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: calc(25% - max(30px, 3.5vw) / 1.3);
}
#sitemap .g-header__nav li::before {
  margin: 4px 16px 0 0;
  color: rgba(0, 0, 0, 0.5);
}
#sitemap .g-header__nav li:not(:last-child) {
  margin-bottom: 0;
}
#sitemap .g-header__nav li h2 {
  font-size: 0;
  line-height: 1;
}
#sitemap .g-header__nav li a {
  color: #000;
}
#sitemap .g-header__nav li a .tw {
  font-size: clamp(2rem, 1.3vw, 2.2rem);
  letter-spacing: 0.25rem;
}
#sitemap .g-header__nav li a .tw::after {
  background-color: rgba(33, 31, 31, 0.7);
}
#sitemap .g-header__nav li a .en {
  padding-left: 12px;
}
#sitemap .g-header__nav li a:hover .tw::after {
  width: 100%;
}

@media (max-width: 1365px) {
  #sitemap .g-header__nav {
    padding: max(60px, 5.3vw) 0;
  }
}
@media (max-width: 1279px) {
  #sitemap .g-header__nav li {
    width: calc(33.333% - max(30px, 3.5vw) / 1.5);
  }
}
@media (max-width: 991px) {
  #sitemap .g-header__nav li {
    width: calc(50% - max(30px, 3.5vw) / 2);
  }
}
@media (max-width: 575px) {
  #sitemap .g-header__nav {
    padding: 0;
  }
  #sitemap .g-header__nav li {
    width: 100%;
  }
}
/*---- 彈出視窗-效果 ----*/
.my-mfp-slide-bottom .zoom-anim-dialog {
  opacity: 0;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);
  -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);
  transform: translateY(-20px) perspective(600px) rotateX(10deg);
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
  opacity: 1;
  -webkit-transform: translateY(0) perspective(600px) rotateX(0);
  -ms-transform: translateY(0) perspective(600px) rotateX(0);
  transform: translateY(0) perspective(600px) rotateX(0);
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
  opacity: 0;
  -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);
  -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);
  transform: translateY(-10px) perspective(600px) rotateX(10deg);
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
  opacity: 0.9;
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
  opacity: 0;
}

/* 彈出視窗 - 內容 */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
  background-color: rgba(33, 31, 31, 0.75);
}

.mfp-close-btn-in .mfp-close {
  top: -5px;
  right: -10px;
  font-size: 3.2rem;
  color: #fff;
  opacity: 1;
}

.popup-wrap {
  position: relative;
  margin: 0 auto;
  padding: 40px 0;
  max-width: 900px;
}
.popup-wrap__box {
  position: relative;
  margin: 0 auto;
  padding: max(20px, 2.5vw);
  max-height: 90vh;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}

#i-popup.popup-wrap {
  max-width: 500px;
}
#i-popup.popup-wrap .edit-box {
  text-align: justify;
}

@media (max-width: 767px) {
  #popup-login .popup-wrap__box {
    max-height: 125vw;
    overflow-x: hidden;
    overflow-y: auto;
  }
}