@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@font-face {
  font-family: "Garamond Pro";
  src: url("../../fonts/a-garamond-pro-semibold.woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Garamond Pro";
  src: url("../../fonts/a-garamond-pro-semibold-italic.woff2");
  font-weight: normal;
  font-style: italic;
}
html,
body {
  font-family: "Noto Sans", "Noto Sans TC", "Helvetica", "Arial", serif;
  background: #24145F;
  background-image: url("../../images/citi/bg_golden_dots_m.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% auto;
}

h2 {
  font-family: "Garamond Pro", "Noto Sans TC", "Helvetica", "Arial", serif;
  font-weight: normal;
  font-style: normal;
  color: #FADF9A;
  font-size: 7.1246819338vw;
  letter-spacing: -0.01rem;
}

h3 {
  font-size: 5.5979643766vw;
  font-weight: normal;
}

h4 {
  font-size: 4.0712468193vw;
}

p {
  font-size: 3.5623409669vw;
  color: #FFF;
  line-height: 1.4rem;
}

h5 {
  font-size: 3.0534351145vw;
}

h6 {
  font-size: 2.5445292621vw;
}

.mb-small {
  margin-bottom: 3.8167938931vw !important;
}

.mb-normal {
  margin-bottom: 7.6335877863vw !important;
}

.mb-large {
  margin-bottom: 15.2671755725vw !important;
}

.gradient-gold {
  background: linear-gradient(90deg, #F5DA90 3%, #EED178 15%, #F0D37D 18%, #F6D98D 23%, #F9DC94 24%, #FAE09E 28%, #FEE8B3 33%, #FEEEC4 36%, #FEF1CE 40%, #FFF3D2 44%, #F9DB8D 59%, #F2E1A1 71%, #F4E4A4 73%, #FFF0B1 84%, #EACE7B 96%);
}

.font-garamond {
  font-family: "Garamond Pro", "Helvetica", "Arial", serif;
}

header {
  padding: 3.8167938931vw;
  border-bottom: 1px solid #FADF9A;
  background: #24145F;
  color: #FADF9A;
}
header .wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
header .img-logo {
  width: 15.7760814249vw;
  max-width: 110px;
}
header a {
  color: #FADF9A;
  text-decoration: none;
}
header a:hover, header a:focus, header a:active, header a:visited {
  text-decoration: underline;
  color: #FADF9A;
}

main {
  margin-top: 0;
}

section {
  margin-bottom: 15.2671755725vw;
}
section .wrapper {
  margin: 3.8167938931vw;
}
section .ic-divider {
  display: block;
  margin: 0 auto;
  width: 4.5801526718vw;
}
section .ic-pin {
  width: 5.0890585242vw;
}
section .btn-base-citi {
  font-size: 4.0712468193vw;
  color: #FFF;
  border: 1px solid #FFF;
  background: transparent;
  text-align: center;
  padding: 2.5445292621vw;
  width: 100%;
  height: 15.2671755725vw;
}
section .btn-base-citi.gold {
  background: linear-gradient(90deg, #F5DA90 3%, #EED178 15%, #F0D37D 18%, #F6D98D 23%, #F9DC94 24%, #FAE09E 28%, #FEE8B3 33%, #FEEEC4 36%, #FEF1CE 40%, #FFF3D2 44%, #F9DB8D 59%, #F2E1A1 71%, #F4E4A4 73%, #FFF0B1 84%, #EACE7B 96%);
  color: #000;
  border: 0;
}
section .btn-base-citi.disabled {
  color: #666;
  background: #929292;
}
section .footer-image-content {
  position: absolute;
  top: 1rem;
  left: 0;
  width: 100%;
}
section .footer-image-content .buttons {
  width: 50.8905852417vw;
}

.section-hero .img-lockup {
  width: 62.3409669211vw;
  max-width: 666px;
  margin: 0 auto;
  display: block;
}

.section-michelin .img-suntory-michelin {
  width: 48.3460559796vw;
  margin: 0vw auto 15.2671755725vw;
  max-width: 360px;
  display: block;
}
.section-michelin .subtitle {
  font-family: "Garamond Pro", "Noto Sans TC", "Helvetica", "Arial", serif;
}

.section-offer .img-title {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.section-offer .img-cardface {
  width: 59.796437659vw;
  margin-left: auto;
  margin-right: auto;
}

.section-ami .photos,
.section-epure .photos {
  display: flex;
  flex-direction: row;
  gap: 3.5623409669vw;
  flex-wrap: wrap;
}
.section-ami .img-col,
.section-epure .img-col {
  width: calc(50% - 1.7811704835vw);
}

footer section.footer-content {
  margin-bottom: 0;
  background: #120F36;
}

.modal .modal-content {
  background: #FFF;
}
.modal .modal-content .menu-title {
  height: 17.8117048346vw;
  margin: 10.1781170483vw auto;
  text-align: center;
}
.modal .modal-content .menu-title img {
  height: 100%;
  display: inline-block;
}
.modal .modal-content p {
  color: #000;
}
.modal .modal-content h5 {
  color: #666;
  margin-bottom: 0;
}
.modal .modal-content h5.divider {
  margin-bottom: 2.5445292621vw;
  margin-top: 2.5445292621vw;
}
.modal .modal-content .price {
  font-size: 4.5801526718vw;
}

/********************** BOOKING FORM **********************/
section.step {
  display: none;
}
section.step.active {
  display: block;
}

.section-restaurant .icon-address {
  width: 5.0890585242vw;
  display: inline-block;
}
.section-restaurant hr {
  border: 0;
  border-top: 1px solid #FFF;
}

.section-booking {
  margin-bottom: 0;
}
.section-booking .form-select {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #FFF;
  padding: 2.5445292621vw;
}
.section-booking .form-select select {
  border: none;
  background: #24145F;
  color: #FFF;
  font-size: 4.0712468193vw;
  width: 100%;
}
.section-booking .form-select select:focus {
  outline: none;
  box-shadow: none;
}
.section-booking .form-select select {
  appearance: none;
  /* Remove default arrow (cross-browser) */
  -webkit-appearance: none;
  /* Safari/Chrome */
  -moz-appearance: none;
  /* Firefox */
  padding-left: 1.272264631vw;
  /* Add space for custom arrow */
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0vw center;
  background-size: 2.5445292621vw 2.5445292621vw;
}
.section-booking .form-input input {
  border: none;
  border-bottom: 1px solid #FFF;
  padding: 2.5445292621vw;
  width: 100%;
  background: transparent;
  color: #FFF;
  font-size: 4.0712468193vw;
}
.section-booking .form-input input:focus {
  outline: none;
  box-shadow: none;
}
.section-booking .form-input input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #24145F inset;
  -webkit-text-fill-color: #FFF;
}
.section-booking .form-checkbox .checkbox-flex {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.5445292621vw;
}
.section-booking ul li a {
  text-decoration: underline;
  word-wrap: break-word;
}
.section-booking .err-msg,
.section-booking .err-server {
  color: #F00;
  margin-top: 1.272264631vw;
  display: block;
}

.section-thankyou .gap-small {
  gap: 3.8167938931vw;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .modal-dialog {
    max-width: 660px;
  }
}/*# sourceMappingURL=citi.css.map */