/* CSS Document */
/* # Set SASS Function
================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
html, body, div, span, applet, object, iframe,
h1,
.sty__intro .subtitle h2, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  height: 100%;
}

body {
  line-height: 1;
  color: black;
  background: white;
  overflow-x: hidden;
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body ::-moz-selection {
  background: #111111;
  color: #fff;
}

body ::selection {
  background: #111111;
  color: #fff;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  vertical-align: middle;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: " ";
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
}

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

a img {
  border: none;
}

input, textarea, select, div, ul, li, a {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

:root {
  /* 
  # Color set
  # ================================================================= */
  --cl-tx-body:	#555555;
  --cl-tx-header:	#3A5F77;
  --cl-tx-subheader:	#89ABB9;
  --cl-primary:	#0C9AA4;
  --cl-secondary:	#13294B;
  --cl-tx-option1:	#F5EFE2;
  --cl-tx-option2:	#1F4D6B;
  --cl-tx-option3:	#0C9AA4;
  --cl-tx-option4:	#e3d2ac;
  --cl-tx-alink:	#3A5F77;
  --cl-tx-ahover:	#0C9AA4;
  --cl-bg-body:	#ffffff;
  --cl-bg-section1:	#f7f3ea;
  --cl-bg-section2:	#1F4D6B;
  --cl-bg-section3:	#0C9AA4;
  --cl-bg-section4:	#84CACD;
  --cl-bg-section5:	#ABCECA;
  --cl-bg-section6:	#d1e5e3;
  /* 
  --cl-bg-section3:	 	#c5b680;
  --cl-bg-section4:	  	#857447; */
  --cl-gray-333: #333333;
  --cl-gray-666:	#666666;
  --cl-gray-999:	#999999;
  --cl-gray-ccc:	#cccccc;
  --cl-gray-ddd:	#dddddd;
  --cl-gray-200:	#e5e7eb;
  --cl-gray-300:	#d1d5db;
  --cl-gray-500:	#6b7280;
  --cl-gray-600:	#4b5563;
  --cl-gray-900:	#111827;
  --cl-white:	#ffffff;
  --cl-black:	#000000;
  --cl-tx-error:	#ff5b5b;
  --cl-error:	#df4811;
  --cl-error-bor:	#b33e0b;
  --cl-warning:	#c0a55d;
  --cl-warning-bor:	#98803f;
  --cl-success:	#00482f;
  --cl-success-bor:	#013120;
}

:root {
  --ff-body:	"Inter", sans-serif;
  --ff-header:	"Playfair Display", serif;
  --ff-option:	"Playfair Display", serif;
}

.sty__2col-form-contact .row input, .sty__2col-form-contact .row textarea, body {
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.5px;
}
.sty__2col-form-contact .row input, .sty__2col-form-contact .row textarea, body {
  font-size: 13px;
}
@media screen and (min-width: 480px) {
  .sty__2col-form-contact .row input, .sty__2col-form-contact .row textarea, body {
    font-size: calc(13px + 2 * (100vw - 480px) / 720);
  }
}
@media screen and (min-width: 1200px) {
  .sty__2col-form-contact .row input, .sty__2col-form-contact .row textarea, body {
    font-size: 15px;
  }
}
.sty__4box-listbox .item .text h4, h1, .sty__intro .subtitle h2 {
  line-height: 1.6;
  font-weight: 400;
}
.sty__4box-listbox .item .text h4, h1, .sty__intro .subtitle h2 {
  font-size: 14px;
}
@media screen and (min-width: 480px) {
  .sty__4box-listbox .item .text h4, h1, .sty__intro .subtitle h2 {
    font-size: calc(14px + 2 * (100vw - 480px) / 720);
  }
}
@media screen and (min-width: 1200px) {
  .sty__4box-listbox .item .text h4, h1, .sty__intro .subtitle h2 {
    font-size: 16px;
  }
}
.sty__mainslide .sty__txmainslide .title, h2, h3 {
  line-height: 1.2;
}
.sty__mainslide .sty__txmainslide .title, h2, h3 {
  font-size: 38px;
}
@media screen and (min-width: 1024px) {
  .sty__mainslide .sty__txmainslide .title, h2, h3 {
    font-size: calc(38px + 10 * (100vw - 1024px) / 176);
  }
}
@media screen and (min-width: 1200px) {
  .sty__mainslide .sty__txmainslide .title, h2, h3 {
    font-size: 48px;
  }
}
@media screen and (max-width: 768px) {
  .sty__mainslide .sty__txmainslide .title, h2, h3 {
    font-size: 3.4rem;
  }
}
@media screen and (max-width: 560px) {
  .sty__mainslide .sty__txmainslide .title, h2, h3 {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 480px) {
  .sty__mainslide .sty__txmainslide .title, h2, h3 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 375px) {
  .sty__mainslide .sty__txmainslide .title, h2, h3 {
    font-size: 2.8rem;
  }
}
.sty__blog .item h3, .sty__4icon-listbox .item .text h4, .sty__intro .detail h5, footer h5, h4 {
  line-height: 1.4;
  font-weight: 400;
}
.sty__blog .item h3, .sty__4icon-listbox .item .text h4, .sty__intro .detail h5, footer h5, h4 {
  font-size: 23px;
}
@media screen and (min-width: 480px) {
  .sty__blog .item h3, .sty__4icon-listbox .item .text h4, .sty__intro .detail h5, footer h5, h4 {
    font-size: calc(23px + 5 * (100vw - 480px) / 720);
  }
}
@media screen and (min-width: 1200px) {
  .sty__blog .item h3, .sty__4icon-listbox .item .text h4, .sty__intro .detail h5, footer h5, h4 {
    font-size: 28px;
  }
}
h5 {
  line-height: 1.4;
  font-weight: 400;
}
h5 {
  font-size: 16px;
}
@media screen and (min-width: 480px) {
  h5 {
    font-size: calc(16px + 2 * (100vw - 480px) / 720);
  }
}
@media screen and (min-width: 1200px) {
  h5 {
    font-size: 18px;
  }
}
.sdty__default .sdbox .text .detail, .sty__mainslide .sty__txmainslide .detail {
  font-size: 12px;
}
@media screen and (min-width: 480px) {
  .sdty__default .sdbox .text .detail, .sty__mainslide .sty__txmainslide .detail {
    font-size: calc(12px + 2 * (100vw - 480px) / 720);
  }
}
@media screen and (min-width: 1200px) {
  .sdty__default .sdbox .text .detail, .sty__mainslide .sty__txmainslide .detail {
    font-size: 14px;
  }
}
.fw--300 {
  font-weight: 300;
}
.fw--400 {
  font-weight: 400;
}
.fw--600 {
  font-weight: 600;
}
.fw--700 {
  font-weight: 700;
}

/* # Root Setting
================================================== */
:root {
  /* 
  # width
  # ================================================================= */
  --width-intro:	880px;
  /* 
  # radius
  # ================================================================= */
  --b-radius:	0px;
  --input-radius:	0px;
  /* 
  # Set Padding Top bottom
  # ================================================================= */
  --pd-tb-120:	120px;
  --pd-tb-100:	100px;
  --pd-tb-80:	80px;
  --pd-tb-60:	60px;
  --pd-tb-50:	50px;
  --pd-tb-30:	30px;
  /* 
  # Set Gap
  # ================================================================= */
  --gap:	20px;
  --gap-column:	30px;
  --gap-row:	30px;
  --gap-slide:	30px;
  --h-logo-width:	200px;
  --h-btn-booknow-width:	120px;
  --h-bg-fixedtop: #ffffff;
  --htop-bg: #000000;
  --htop-tx-color: #ffffff;
  --htop-line-color: rgba(255, 255, 255, 0.2);
  --ppmenu-bg: rgb(255, 255, 255);
  --f-copyright-bg:	#000000;
  --f-copyright-tx:	#ffffff;
}
@media screen and (max-width: 1024px) {
  :root {
    --pd-tb-120:	100px;
    --pd-tb-100: 80px;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --pd-tb-120:	80px;
    --pd-tb-100:	70px;
    --pd-tb-80:	60px;
  }
}
@media screen and (max-width: 480px) {
  :root {
    --pd-tb-120: 60px;
    --pd-tb-100: 45px;
    --pd-tb-80: 40px;
    --gap-column: 15px;
  }
}
@media screen and (max-width: 375px) {
  :root {
    --pd-tb-120: 50px;
  }
}
/* 
# Icon
# ================================================================= */
.sty__blog-detail .blog-detail .tag span, .sty__blog .item .tag span {
  background-color: #e6f3f9;
  color: #3399cc;
  display: inline-block;
  padding: 3px 7.5px;
  font-size: 0.8em;
  border-radius: 5px;
}
.sty__blog-detail .blog-detail .tag span.news, .sty__blog .item .tag span.news {
  background-color: #ffe9d6;
  color: #e88e36;
}

/* 
# Basic Set 
# ================================================== */
body {
  color: var(--cl-tx-body);
  font-optical-sizing: auto;
  text-align: center;
  background-color: var(--cl-bg-body);
}

strong {
  font-weight: 700;
}

hr {
  position: relative;
  clear: both;
  margin: 0 10px;
  height: 0;
  border-top: 1px solid var(--cl-gray-999);
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

em {
  font-style: italic;
}

ol {
  list-style: decimal;
  margin-left: 30px;
}

ul {
  list-style: none;
  margin-left: 0;
}
ul.square {
  list-style: square;
}
ul.circle {
  list-style: circle;
}
ul.disc {
  list-style: disc;
}

img {
  display: block;
  position: relative;
}

a {
  position: relative;
  cursor: pointer;
  color: var(--cl-tx-alink);
  display: inline-block;
  text-decoration: none;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
a:hover, a:active {
  color: var(--cl-tx-ahover);
}
a:has(img) {
  display: block;
}
a img {
  display: block;
}

.detail p, .detail-cms p {
  margin-bottom: 15px;
}
.detail p:last-child, .detail-cms p:last-child {
  margin-bottom: 0;
}
.detail ul, .detail-cms ul {
  list-style-type: disc;
  margin-left: 30px;
  margin-bottom: 15px;
}
.detail ul ul, .detail ul ol, .detail-cms ul ul, .detail-cms ul ol {
  font-size: 90%;
}
.detail ul:last-child, .detail-cms ul:last-child {
  margin-bottom: 0;
}
.photo img {
  width: 100%;
  max-width: auto;
  display: block;
}

/* 
# Set Font
# ================================================================= */
h1, .sty__intro .subtitle h2, h2, h3, h4, h5, h6 {
  font-family: var(--ff-header);
}

body, input, textarea, select, button, p {
  font-family: var(--ff-body);
}

.ttup {
  text-transform: uppercase !important;
}

.ttnoe {
  text-transform: none !important;
}

/* #Textbox style
================================================== */
input,
textarea,
select {
  border: 1px solid var(--cl-gray-ccc);
  background-color: var(--cl-white);
  color: var(--cl-tx-body);
  outline: none;
  width: 100%;
  padding: 15px;
  margin: 0;
  border-radius: 0;
  border-radius: var(--input-radius);
  -webkit-border-radius: var(--input-radius);
  -moz-border-radius: var(--input-radius);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
input,
textarea,
select {
  font-size: 13px;
}
@media screen and (min-width: 480px) {
  input,
  textarea,
  select {
    font-size: calc(13px + 1 * (100vw - 480px) / 544);
  }
}
@media screen and (min-width: 1024px) {
  input,
  textarea,
  select {
    font-size: 14px;
  }
}

button, input[type=submit] {
  border: 1px solid var(--cl-primary);
  background-color: var(--cl-primary);
  color: var(--cl-white);
  outline: inherit;
  width: 100%;
  padding: 15px;
  margin: 0;
  cursor: pointer;
  border-radius: var(--input-radius);
  -webkit-border-radius: var(--input-radius);
  -moz-border-radius: var(--input-radius);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
button, input[type=submit] {
  font-size: 13px;
}
@media screen and (min-width: 480px) {
  button, input[type=submit] {
    font-size: calc(13px + 1 * (100vw - 480px) / 544);
  }
}
@media screen and (min-width: 1024px) {
  button, input[type=submit] {
    font-size: 14px;
  }
}
button:hover, input[type=submit]:hover {
  border: 1px solid var(--cl-gray-999);
  background-color: var(--cl-gray-999);
  color: var(--cl-white);
}

select {
  background: url(../images/icon--select.svg) calc(100% - 10px) center no-repeat var(--cl-white);
  background-size: 22px auto;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  outline: 0px;
  padding: 13px 10px 12px;
}

button::-moz-focus-inner {
  border: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px var(--cl-white) inset; /* Change bg */
  -webkit-text-fill-color: var(--cl-tx-body) !important; /*Change text */
}

input.search-box {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: url(../images/icon--search.svg) no-repeat 20px center;
  background-size: 12px auto;
  color: var(--cl-white);
  padding: 8px 10px 8px 40px;
  border-radius: var(--input-radius);
  -webkit-border-radius: var(--input-radius);
  -moz-border-radius: var(--input-radius);
}
input.search-box {
  font-size: 17px;
}
@media screen and (min-width: 480px) {
  input.search-box {
    font-size: calc(17px + 3 * (100vw - 480px) / 544);
  }
}
@media screen and (min-width: 1024px) {
  input.search-box {
    font-size: 20px;
  }
}
input.search-box::placeholder {
  opacity: 1;
  color: rgba(255, 255, 255, 0.4);
}

button.search-reset {
  background-color: inherit;
  position: absolute;
  border: 0;
  width: 22px;
  height: 22px;
  right: 10px;
  top: 7px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
button.search-reset:after {
  content: "X";
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--cl-error);
  z-index: 1;
  right: 0;
  top: 0;
  border-radius: 50%;
  text-align: center;
  color: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  justify-content: center;
  flex-direction: column;
}

.custom-select {
  position: relative;
}
.custom-select select {
  display: none;
}
.custom-select .select-hide {
  display: none;
}
.custom-select .select-selected {
  background-color: var(--cl-white);
  border: 1px solid var(--cl-gray-999);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 10px 10px;
  text-align: left;
  color: var(--cl-tx-body);
}
.custom-select .select-selected:after {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  right: 5px;
  top: 8px;
  background: url(../images/icon--select.svg) center center no-repeat;
  background-size: 40px auto;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.custom-select .select-selected.select-arrow-active:after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.custom-select .select-items {
  position: absolute;
  border: 1px solid #ccc;
  background-color: #fdfdfd;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 2px 2px 4px 0px #f1f1f1;
  padding: 5px;
}
.custom-select .select-items div {
  color: var(--cl-tx-body);
  padding: 8px 16px;
  cursor: pointer;
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.custom-select .select-items div:hover {
  font-weight: bold;
  background-color: #f1f1f1;
}
.custom-select .same-as-selected {
  font-weight: bold;
}

/* #Helper Class
================================================== */
.__sm {
  font-size: 0.6em;
}

.__txl {
  text-align: left;
}

.__txr {
  text-align: right;
}

.__txc {
  text-align: center;
}

.__danger, .__red {
  color: var(--cl-error);
}

.__warning {
  color: var(--cl-warning);
}

.__success {
  color: var(--cl-success);
}

/* #Grid
================================================== */
section {
  position: relative;
  z-index: 0;
}

.box {
  position: relative;
}

.container {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 1440px;
  width: 100%;
}
@media screen and (max-width: 1560px) {
  .container {
    padding-left: 60px;
    padding-right: 60px;
    max-width: inherit;
  }
}
@media screen and (max-width: 1024px) {
  .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (max-width: 768px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 560px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 430px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.container_full {
  position: relative;
  margin: 0 auto;
  padding: 0;
}

/* # Preload
================================================== */
.fixed_scroll {
  height: 100vh !important;
  overflow: hidden;
}

.bodypreload {
  width: 100vw;
  height: 100vh;
}

.clear {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  width: 0;
  height: 0;
}

/* # CMS Button
================================================== */
.edit-link {
  position: fixed;
  z-index: 999;
  left: 0;
  bottom: 30px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.edit-link .post-edit-link {
  color: #000;
  background-color: #fff;
  padding: 10px 20px 7px;
  border-right: 4px solid var(--cl-secondary);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  column-gap: 5px;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
}
.edit-link .post-edit-link:before {
  position: relative;
  content: "";
  background: url(../images/icon--edit.svg) no-repeat center center;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  top: -2px;
}

/* # effect
================================================== */
.tx__letter {
  display: inline-block;
}

.tx__word {
  display: inline-block;
}

.tx__br {
  flex-basis: 100%;
  height: 0;
  overflow: hidden;
}

.eft__wrapimg {
  display: inline-block;
  background-color: var(--cl-bg-section1);
  overflow: hidden;
  transform-origin: top;
}
.eft__wrapfullimg {
  display: block;
  overflow: hidden;
  position: relative;
}
.eft__intro-cms h1, .eft__intro-cms .sty__intro .subtitle h2, .sty__intro .subtitle .eft__intro-cms h2, .eft__intro-cms h2, .eft__intro-cms h3, .eft__intro-cms h4, .eft__intro-cms p, .eft__intro-cms ul, .eft__intro-cms figure {
  opacity: 0;
}

/* # google recaptcha
================================================== */
.grecaptcha-badge {
  visibility: hidden;
}

/* # cursor Setting
================================================== */
.cursor {
  display: none;
  -webkit-transition: all 0.2s ease 0s;
  -moz-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  -ms-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
  position: fixed;
  width: 80px;
  height: 100px;
  z-index: 999999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
.cursor.active {
  display: block;
}
@media screen and (max-width: 768px) {
  .cursor.active {
    display: none;
  }
}
.cursor > div {
  display: none;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  left: -40px;
  top: -50px;
  position: relative;
}
.cursor .cu__arrowleft {
  width: 100px;
  height: 100px;
}
.cursor .cu__arrowleft img {
  width: 55px;
}
.cursor .cu__arrowright {
  width: 100px;
  height: 100px;
}
.cursor .cu__arrowright img {
  width: 55px;
}
.cursor > div.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
}

/* 
# Back to top
# ================================================================= */
#back-to-top {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 35px;
  height: 33px;
  cursor: pointer;
  background-color: rgba(102, 102, 102, 0.7);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  top: auto;
  right: 20px;
  bottom: 20px;
  left: auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)";
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
#back-to-top:before {
  height: 0;
}

#back-to-top.show {
  display: block;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)";
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

#back-to-top:hover {
  background-color: #202020;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)";
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}

#back-to-top i.icon--backtotop {
  background: url(../images/icon--arrow-backtotop.svg) no-repeat center center;
  display: block;
  width: 100%;
  height: 100%;
  background-size: 15px;
}

/* 
# Style settings
# ================================================================= */
.sty {
  /* 
  # icon and text / row list
  # Note Layout: .sty__ictxlist>.row*3>.icon+.text
  # ================================================================= */
}
.sty__video-display {
  position: relative;
  z-index: 5;
}
.sty__video-display #video-container, .sty__video-display video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.sty__video-display.hide {
  opacity: 0;
  z-index: -1;
}
.sty__video-controls {
  position: absolute;
  z-index: 10;
  bottom: 60px;
  right: 120px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  column-gap: 15px;
}
@media screen and (max-width: 1440px) {
  .sty__video-controls {
    right: 60px;
  }
}
@media screen and (max-width: 768px) {
  .sty__video-controls {
    right: 30px;
    bottom: 30px;
  }
}
.sty__video-controls:has(.btn__video-mute.hide) {
  position: absolute;
}
.sty__video-controls i {
  width: 45px;
  height: 45px;
  display: block;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.sty__video-controls .hide {
  display: none;
}
.sty__video-controls .icon--pause {
  background-image: url(../images/icon--pause.svg);
  background-size: 21px auto;
}
.sty__video-controls .icon--sound {
  background-image: url(../images/icon--volume.svg);
  background-size: 25px auto;
}
.sty__video-controls .icon--gallery {
  background-image: url(../images/icon--photo.svg);
  background-size: 24px auto;
}
.sty__video-controls .icon--video {
  background-image: url(../images/icon--play.svg);
  background-size: 20px auto;
  position: relative;
  left: 0;
}
.sty__video-controls .btn__video-mute {
  position: relative;
}
.sty__video-controls .btn__video-mute:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 120%;
  left: -10%;
  top: 50%;
  background-color: #fff;
  transform: rotate(45deg);
}
.sty__video-controls .btn__video-mute.sound-on:before {
  background-color: inherit;
}
.sty__video-controls .btn__video-play.play .icon--pause {
  background-image: url(../images/icon--play.svg);
  background-size: 20px auto;
}
.sty__video-controls .btn__video-switch {
  text-align: center;
  color: var(--cl-white);
  font-family: var(--ff-header);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sty__video-controls .btn__video-switch span {
  font-size: 11px;
}
.sty__video-controls .btn__video-switch.hide {
  display: none;
}
.sty__video-controls .btn__video-switch .wrap {
  display: flex;
  height: 50px;
  width: 50px;
  background-color: inherit;
  border-radius: 50%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.sty__mainslide-with-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 0;
  opacity: 0;
}
.sty__mainslide-with-video.show {
  opacity: 1;
  z-index: 5;
}
.sty__fullmap iframe {
  width: 100%;
  height: 400px;
}
@media screen and (max-width: 480px) {
  .sty__fullmap iframe {
    height: 300px;
  }
}
.sty__fullvideo {
  position: relative;
}
.sty__fullvideo .video-cover {
  position: relative;
  z-index: 1;
}
.sty__fullvideo .video-cover img {
  width: 100%;
}
.sty__fullvideo .video-youtube {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.sty__fullvideo .video-youtube a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  background-color: rgba(0, 0, 0, 0);
}
.sty__fullvideo .video-youtube a img {
  max-width: 120px;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.sty__fullvideo .video-youtube a:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.4);
}
.sty__fullvideo .video-youtube a:hover img {
  max-width: 140px;
}
.sty__accordion {
  text-align: left;
  row-gap: 0;
  margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
  .sty__accordion {
    margin-bottom: 20px;
  }
}
.sty__accordion .box {
  border-bottom: 2px solid #fff;
  padding: 30px 0 32px;
}
.sty__accordion .box.active span.arrow:after {
  transform: rotate(0deg);
}
.sty__accordion .box:not(.active) .acc__title:hover h5 {
  color: var(--cl-tx-option2);
}
.sty__accordion .acco__title {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.sty__accordion .acco__title h5 {
  text-align: left;
  font-weight: 500;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.sty__accordion .acco__title h5 {
  font-size: 18px;
}
@media screen and (min-width: 480px) {
  .sty__accordion .acco__title h5 {
    font-size: calc(18px + 4 * (100vw - 480px) / 544);
  }
}
@media screen and (min-width: 1024px) {
  .sty__accordion .acco__title h5 {
    font-size: 22px;
  }
}
.sty__accordion .acco__title span.arrow {
  position: absolute;
  right: 0;
  top: calc(50% - 12px);
  width: 25px;
  height: 25px;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.sty__accordion .acco__title span.arrow:before, .sty__accordion .acco__title span.arrow:after {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  left: 0;
  top: 50%;
  background-color: #fff;
}
.sty__accordion .acco__title span.arrow:after {
  transform: rotate(90deg);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.sty__accordion .acco__detail {
  overflow: hidden;
  height: 0;
}
.sty__accordion .acco__detail .sub {
  padding-top: 10px;
  padding-bottom: 30px;
}
.sty__accordion .acco__detail p {
  margin-bottom: 20px;
}
.sty__breadcrumb {
  color: var(--cl-white);
  text-align: left;
}
.sty__breadcrumb-page {
  text-align: center;
}
.sty__breadcrumb-page #breadcrumbs > span {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 9px;
}
.sty__pagenavi {
  padding-top: var(--pd-tb-60);
}
@media screen and (max-width: 480px) {
  .sty__pagenavi {
    padding-top: 30px;
  }
}
.sty__pagenavi .wp-pagenavi {
  display: flex;
  justify-content: center;
}
.sty__pagenavi .wp-pagenavi a, .sty__pagenavi .wp-pagenavi span {
  border: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sty__pagenavi .wp-pagenavi .pages, .sty__pagenavi .wp-pagenavi .last, .sty__pagenavi .wp-pagenavi .first {
  width: auto;
}
.sty__pagenavi .wp-pagenavi .first {
  margin-right: 20px;
}
.sty__pagenavi .wp-pagenavi .last {
  margin-left: 20px;
}
.sty__pagenavi .wp-pagenavi .pages + .current {
  margin-left: 20px;
}
.sty__pagenavi .wp-pagenavi span.current {
  background-color: rgba(175, 182, 190, 0.2);
}
.sty__ictxlist {
  display: flex;
  row-gap: 10px;
  flex-direction: column;
}
.sty__ictxlist .row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px 10px;
  align-items: center;
}
/* #Icon
================================================== */
i.ic {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-position: center center;
  background-repeat: no-repeat;
}

.icon--dropdown {
  background: url(../images/icon--arrow-readmore.svg) no-repeat center center;
  display: inline-block;
  width: 12px;
  height: 12px;
  transform: rotate(90deg);
  margin-left: 10px;
}

.icon--hammenu {
  display: flex;
  height: 25px;
  width: 50px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.icon--hammenu > div {
  height: 1px;
  width: 100%;
  background-color: var(--cl-white);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.icon--hammenu:hover > div {
  background-color: var(--cl-tx-option);
}

/* 
# Animate
# ================================================================= */
/* #box layout
================================================== */
.box-flex__2 {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 880px) {
  .box-flex__2 {
    flex-direction: column;
  }
}
.box-flex__2 > * {
  width: 50%;
  flex-grow: 1;
}
@media screen and (max-width: 880px) {
  .box-flex__2 > * {
    width: 100%;
  }
}
.box-flex__3 {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .box-flex__3 {
    flex-direction: column;
  }
}
.box-flex__3 > * {
  width: 33.3333333333%;
  flex-grow: 1;
}
@media screen and (max-width: 768px) {
  .box-flex__3 > * {
    width: 100%;
  }
}

.box-grid__2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
}
@media screen and (max-width: 650px) {
  .box-grid__2 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.box-grid__3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
}
@media screen and (max-width: 650px) {
  .box-grid__3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.box-grid__3-last-op {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
}
.box-grid__3-last-op .box {
  width: auto;
  grid-column: 2 span;
}
.box-grid__3-last-op .box:nth-child(1), .box-grid__3-last-op .box:nth-child(2) {
  width: auto;
}
.box-grid__3-last-op .box:nth-child(3n+1):nth-last-child(-n+2), .box-grid__3-last-op .box:nth-child(3n+1):nth-last-child(-n+2) ~ .box {
  grid-column: span 3;
}
.box-grid__3-last-op .box:nth-child(3n+1):nth-last-of-type(1) {
  grid-column: span 6;
}
.box-grid__4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
}
@media screen and (max-width: 880px) {
  .box-grid__4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 430px) {
  .box-grid__4 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* 
# Set dot style
# ================================================================= */
/* 
# Slide slide settings
# ================================================== */
.slick-slider:not(.ppup--slidepopup) .slick-list {
  height: auto !important;
}
.slick-slider:not(.ppup--slidepopup) .slick-track {
  height: auto;
}
.slick-slider:not(.ppup--slidepopup) .slick-slide {
  height: auto;
}

.slick-slide > div {
  display: flex;
}
.slick-slide img {
  width: 100%;
}

.slick-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  background: none;
  border: 0;
  width: 200px;
  z-index: 400;
  font-size: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .slick-arrow {
    cursor: pointer;
  }
}
.slick-arrow:hover {
  background-color: inherit;
  border: 0;
}

.slick-prev {
  left: 0;
  background: none;
  background-size: 30px auto;
}
.slick-prev:before {
  left: 10px;
}

.slick-next {
  right: 0;
  background: none;
  background-size: 30px auto;
}
.slick-next:before {
  right: 10px;
}

.slick-dots {
  position: absolute;
  width: auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 10px;
  bottom: -70px;
  left: 0;
  right: auto;
}
@media screen and (max-width: 880px) {
  .slick-dots {
    bottom: 20px;
  }
}
@media screen and (max-width: 480px) {
  .slick-dots {
    bottom: 20px;
    left: 0;
    right: 0;
  }
}
.slick-dots li {
  display: inline-block;
}
.slick-dots li button {
  background-color: var(--cl-white);
  font-size: 0;
  height: 4px;
  width: 4px;
  padding: 0;
  display: block;
  border: 0;
}
@media screen and (max-width: 480px) {
  .slick-dots li button {
    height: 5px;
    width: 5px;
  }
}
.slick-dots li button:focus-visible {
  outline: none;
}
.slick-dots li.slick-active button {
  width: 50px;
}

/* 
# Style Slider
# ================================================================= */
.sdty__mainslide .sd-photo {
  position: relative;
}
.sdty__mainslide .sd-photo.mob {
  display: none;
}
.sdty__mainslide .sd-photo.dsk {
  display: block;
}
@media screen and (max-width: 560px) {
  .sdty__mainslide .sd-photo.mob {
    display: block;
  }
  .sdty__mainslide .sd-photo.dsk {
    display: none;
  }
}
@media screen and (max-width: 560px) {
  .sdty__mainslide:not(:has(.mob)) .dsk {
    display: block;
  }
}
.sdty__mainslide .sd-text {
  --w-tx-slide: 650px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10;
  color: var(--cl-white);
  width: 100%;
  max-width: var(--w-tx-slide);
  left: calc(50% - var(--w-tx-slide) / 2);
  bottom: var(--pd-tb-120);
}
@media screen and (max-width: 768px) {
  .sdty__mainslide .sd-text {
    max-width: inherit;
    width: auto;
    left: 30px;
    right: 30px;
  }
}
@media screen and (max-width: 480px) {
  .sdty__mainslide .sd-text {
    left: 15px;
    right: 15px;
  }
}
.sdty__mainslide .sdbox {
  position: relative;
  z-index: 0;
  background: #000;
}
.sdty__mainslide .sdbox img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
}
.sdty__mainslide .slick-dots {
  bottom: 60px;
}
@media screen and (max-width: 767px) {
  .sdty__mainslide .slick-dots {
    bottom: 70px;
    left: 30px;
    right: 30px;
    justify-content: center;
  }
}
@media screen and (max-width: 480px) {
  .sdty__mainslide .slick-dots {
    bottom: 50px;
    left: 15px;
    right: 15px;
  }
}
.sdty__mainslide.hlf .sdbox img {
  height: 580px;
}
@media screen and (max-width: 880px) {
  .sdty__mainslide.hlf .sdbox img {
    height: 40vw;
  }
}
@media screen and (max-width: 768px) {
  .sdty__mainslide.hlf .sdbox img {
    height: 400px;
  }
}
@media screen and (max-width: 480px) {
  .sdty__mainslide.hlf .sdbox img {
    height: 320px;
  }
}
.sdty__mainslide.hlf .sd-text {
  bottom: 100px;
}
.sdty__fullslide img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  -webkit-transition: all 0s ease 0s;
  -moz-transition: all 0s ease 0s;
  -o-transition: all 0s ease 0s;
  -ms-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
}
@media screen and (max-width: 880px) {
  .sdty__fullslide img {
    height: 60vw;
  }
}
@media screen and (max-width: 560px) {
  .sdty__fullslide img {
    height: 70vw;
  }
}
.sdty__fullslide img.zoom {
  transform: scale(1.08);
  -webkit-transition: all 10s ease 0s;
  -moz-transition: all 10s ease 0s;
  -o-transition: all 10s ease 0s;
  -ms-transition: all 10s ease 0s;
  transition: all 10s ease 0s;
}
.sdty__fullslide .sd-text {
  position: absolute;
  z-index: 10;
  bottom: 30%;
  left: 25%;
  right: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--cl-white);
}
@media screen and (max-width: 1024px) {
  .sdty__fullslide .sd-text {
    left: 10%;
    right: 10%;
  }
}
.sdty__col {
  margin: 0 calc(var(--gap-slide) / 2 * -1);
  width: auto;
}
.sdty__col .slick-slide > div {
  padding: 0 calc(var(--gap-slide) / 2);
}
.sdty__col .slick-slide a {
  display: block;
}
.sdty__col .slick-slide a img {
  display: block;
}

/* #Main slide -- fullpage
================================================== */
#sec__mainslide.noslide {
  height: 130px;
}

.arrow1 .slick-arrow {
  width: 35px;
  height: 35px;
  display: block;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  top: calc(100% + 35px);
}
@media screen and (max-width: 1024px) {
  .arrow1 .slick-arrow {
    top: calc(100% + 20px);
  }
}
@media screen and (max-width: 768px) {
  .arrow1 .slick-arrow {
    top: calc(100% + 10px);
  }
}
.arrow1 .slick-arrow:hover {
  opacity: 0.8;
}
.arrow1 .slick-prev {
  background-image: url("../images/icon-arrow-prev.svg");
  left: auto;
  right: 45px;
}
.arrow1 .slick-next {
  background-image: url("../images/icon-arrow-next.svg");
  right: 0;
}
.arrow1 .slick-dots {
  bottom: 0;
  left: 20px;
  right: 20px;
  justify-content: flex-end;
}
.arrow1 .slick-dots li button {
  background-color: var(--cl-primary);
}

.arrow2 .slick-arrow {
  width: 35px;
  height: 35px;
  display: block;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  bottom: 35px;
  top: auto;
}
@media screen and (max-width: 560px) {
  .arrow2 .slick-arrow {
    bottom: 20px;
  }
}
.arrow2 .slick-prev {
  background-image: url("../images/icon-arrow-prev-w.svg");
  left: auto;
  right: 95px;
}
@media screen and (max-width: 560px) {
  .arrow2 .slick-prev {
    right: 70px;
  }
}
.arrow2 .slick-next {
  background-image: url("../images/icon-arrow-next-w.svg");
  right: 45px;
  left: auto;
}
@media screen and (max-width: 560px) {
  .arrow2 .slick-next {
    right: 20px;
  }
}

.dots-center .slick-dots {
  bottom: 60px;
  max-width: 800px;
  width: 100%;
  left: calc(50% - 400px);
  justify-content: center;
}

.wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output {
  margin: 10px 0 0;
  padding: 8px 10px 8px;
  border-width: 1px;
  font-size: 1.4rem;
  text-align: center;
}

/* 
# Contact form 7
# ================================================================= */
.wpcf7 form.invalid .wpcf7-response-output {
  background-color: var(--cl-warning);
  border-color: var(--cl-warning-bor);
  color: var(--cl-white);
}
.wpcf7 form.sent .wpcf7-response-output {
  background-color: var(--cl-success);
  border-color: var(--cl-success-bor);
  color: var(--cl-white);
}
.wpcf7 form .wpcf7-not-valid-tip {
  position: relative; /* top: calc(100% + 20px); left: 0;  */
  text-align: left;
  font-size: 0.7em;
  padding-top: 5px;
  color: var(--cl-tx-error);
}
.wpcf7 form .wpcf7-spinner {
  background: none;
  border-radius: 50%;
  opacity: 1;
  display: none;
  position: absolute;
  top: 10px;
  right: 0;
  width: 18px;
  height: 18px;
  border: 0.25rem solid #ddd;
  border-top-color: #333;
  display: inline-block;
  margin: 0 8px;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);
  animation-timing-function: cubic-bezier(0.55, 0.15, 0.45, 0.85);
}
.wpcf7 form .wpcf7-spinner::before {
  opacity: 0;
}
.wpcf7 form.submitting .wpcf7-spinner {
  display: block;
}

/* 
# Datepicker
# ================================================================= */
div#ui-datepicker-div {
  padding: 10px;
}
div#ui-datepicker-div .ui-datepicker-prev:before {
  background: url(../images/icon--select.svg) no-repeat center center;
  border: 0;
  content: "";
  background-size: 36px auto;
  transform: rotate(-270deg);
}
div#ui-datepicker-div .ui-datepicker-next:before {
  background: url(../images/icon--select.svg) no-repeat center center;
  border: 0;
  content: "";
  background-size: 36px auto;
  transform: rotate(270deg);
}
div#ui-datepicker-div .ui-datepicker-month, div#ui-datepicker-div .ui-datepicker-year {
  padding: 0;
}
div#ui-datepicker-div .ui-datepicker-title {
  width: 70%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* 
# Alerts
# ================================================================= */
.alert--message .sty__formalert.success {
  background-color: var(--cl-tx-ahover);
  padding: 20px;
  text-align: center;
}

/* 
# Form Contacts us
# ================================================================= */
.sty-form__contact_2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--column-gap);
  row-gap: var(--row-gap);
  text-align: left;
}
@media screen and (max-width: 480px) {
  .sty-form__contact_2col {
    grid-template-columns: 1fr;
  }
}
.sty-form__contact_2col .-subject, .sty-form__contact_2col .-message, .sty-form__contact_2col .-submit {
  grid-column: 2 span;
}
@media screen and (max-width: 480px) {
  .sty-form__contact_2col .-subject, .sty-form__contact_2col .-message, .sty-form__contact_2col .-submit {
    grid-column: auto;
  }
}
.sty-form__contact_2col .-submit {
  text-align: center;
  position: relative;
}
.sty-form__contact_2col .wpcf7-response-output {
  margin-top: 20px;
}
.sty-form__contact_2col label {
  padding-bottom: 5px;
  display: block;
  font-size: 1.4rem;
}
.sty-form__contact_2col input, .sty-form__contact_2col select {
  height: 50px;
}
.sty-form__contact_2col select {
  padding: 12px 10px 13px;
}
.sty-form__newsletter {
  display: flex;
  width: 100%;
}
.sty-form__newsletter .-email {
  flex: 1;
}
.sty-form__newsletter .-submit {
  position: relative;
}
.sty-form__newsletter .-submit .wpcf7-spinner {
  top: 15px;
  right: -30px;
}

/* 
# Loading Icon
# ================================================================= */
.wrap--loading {
  position: absolute;
  width: 320px;
  font-size: 1.2rem;
  display: none;
}
.wrap--loading.active {
  display: block;
}
.wrap--loading .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.wrap--loading svg {
  width: 40px;
}

/* 
# Popup on Homepage
# ================================================== */
.ppup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ppup a.nolink {
  cursor: default;
}
.ppup .ppup-bg {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  backdrop-filter: blur(5px);
}
.ppup .ppup-wrappper {
  position: relative;
  z-index: 10;
  max-width: 680px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .ppup .ppup-wrappper {
    max-width: 90vw;
  }
}
.ppup .ppup-wrappper img {
  width: 100%;
  object-fit: cover;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  aspect-ratio: 8/6;
}
.ppup .ppup--slidepopup .slick-dots {
  bottom: -30px;
}
.ppup .ppup--slidepopup .slick-dots li button {
  border: 1px solid #ccc;
  background-color: inherit;
}
.ppup .ppup--slidepopup .slick-dots li.slick-active button {
  background-color: #ccc;
}
.ppup .ppup--slidepopup .sdbox a {
  display: block;
}

/* 
# Close button
# ================================================================= */
.btn__closepopup {
  position: absolute;
  content: "";
  z-index: 1;
  top: -25px;
  right: 0px;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 3px;
  color: var(--cl-white);
}
@media screen and (max-width: 560px) {
  .btn__closepopup {
    right: 10px;
    top: 10px;
  }
}
@media screen and (max-width: 430px) {
  .btn__closepopup {
    right: 5px;
    top: 5px;
  }
}
.btn__closepopup span {
  width: 100%;
  height: 1px;
  display: block;
  background-color: var(--cl-white);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  transform-origin: center center;
}
.btn__closepopup span:nth-child(1) {
  top: 1px;
  position: relative;
  transform: rotate(45deg);
}
.btn__closepopup span:nth-child(2) {
  transform: rotate(-45deg);
}
.btn__closepopup:hover span:nth-child(1), .btn__closepopup:hover span:nth-child(2) {
  transform: rotate(0);
}
.btn__closepopup .text {
  font-size: 1.2rem;
}
.btn__closepopup .icon {
  width: 10px;
  height: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 5px;
}

/* 
# Gallery
# ================================================================= */
.filter-button-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  padding: 0 0 30px;
}
.filter-button-group button {
  background: none;
  border: 0;
  border-top: 1px solid var(--cl-tx-body);
  border-bottom: 1px solid var(--cl-tx-body);
  color: var(--cl-tx-body);
  display: inline-block;
  width: auto;
  font-size: 1.6rem;
  height: 30px;
  margin: 0 7px;
  padding: 5px 10px;
  position: relative;
  margin-bottom: 15px;
}
.filter-button-group button:hover {
  color: var(--cl-white);
  border-top: 1px solid var(--cl-tx-body);
  border-bottom: 1px solid var(--cl-tx-body);
}
.filter-button-group button.active {
  color: var(--cl-white);
}
.filter-button-group button:before {
  content: "";
  z-index: -1;
  width: 100%;
  height: 0%;
  background: var(--cl-tx-body);
  bottom: 0;
  left: 0;
  position: absolute;
  -webkit-transition: height 250ms;
  transition: height 250ms;
}
.filter-button-group button:hover:before, .filter-button-group button.active:before {
  height: 100%;
}

.box_gallery-list .box {
  width: 20%;
  padding: 5px;
  position: relative;
}
.box_gallery-list .box img {
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)";
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.box_gallery-list .box ._detail {
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--cl-white);
  z-index: 110;
  font-size: 1.6rem;
  line-height: 1.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)";
  filter: alpha(opacity=0);
  -webkit-opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.box_gallery-list .box a {
  display: block;
  border: 0;
  background-color: var(--cl-black);
  padding: 0;
}
.box_gallery-list .box a:before {
  border: 1px solid rgba(255, 255, 255, 0);
  z-index: 99;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  top: 0;
  left: 0;
  background: none;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.box_gallery-list .box a:hover:before {
  border: 1px solid rgb(255, 255, 255);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.box_gallery-list .box a:hover img {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)";
  filter: alpha(opacity=30);
  -webkit-opacity: 0.3;
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}
.box_gallery-list .box a:hover ._detail {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)";
  filter: alpha(opacity=100);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}

/* # Gallery
================================================== */
.wrap__linkmoregallery {
  display: none;
}

.loadac + .wrap__linkmoregallery {
  display: block;
  padding-bottom: 120px;
  text-align: right;
}
@media screen and (max-width: 480px) {
  .loadac + .wrap__linkmoregallery {
    padding-bottom: 40px;
  }
}

.loadac.r2 + .wrap__linkmoregallery {
  text-align: left;
}
@media screen and (max-width: 480px) {
  .loadac.r2 + .wrap__linkmoregallery {
    text-align: right;
  }
}

.fancybox-container ._title {
  text-transform: uppercase;
  color: var(--cl-white);
}
.fancybox-container ._title {
  font-size: 17px;
}
@media screen and (min-width: 480px) {
  .fancybox-container ._title {
    font-size: calc(17px + 3 * (100vw - 480px) / 544);
  }
}
@media screen and (min-width: 1024px) {
  .fancybox-container ._title {
    font-size: 20px;
  }
}
.fancybox-container .fancybox-slide--image {
  padding: 40px 20px 80px;
}
.fancybox-container .fancybox-navigation .fancybox-button {
  border: 0;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  outline: none;
}

.fancybox-button:hover {
  background-color: var(--cl-bg-section2);
}

.fancybox-thumbs__list a {
  position: relative;
}

.fancybox-thumbs__list a::before {
  border: 0;
}

.fancybox-thumbs__list a::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-color: #000;
  z-index: 10;
  opacity: 0.65;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}

.fancybox-thumbs__list a.fancybox-thumbs-active::after, .fancybox-thumbs__list a:hover::after {
  opacity: 0;
}

.btn__h-booknow {
  position: relative;
  color: var(--cl-tx-alink);
}
.btn__h-booknow:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  left: 0;
  bottom: 0px;
  background: var(--cl-tx-alink);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.btn__h-booknow:hover::before {
  transform: scaleX(0);
}
.btn__h-booknow:hover {
  color: var(--cl-tx-ahover);
}
.a__link, .detail a, .detail-cms a {
  position: relative;
  color: var(--cl-tx-alink);
}
.a__link:before, .detail a:before, .detail-cms a:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  left: 0;
  bottom: 0px;
  background: var(--cl-tx-alink);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  transform: scaleX(0);
}
.a__link:hover::before, .detail a:hover::before, .detail-cms a:hover::before {
  transform: scaleX(1);
}
.a__link:hover, .detail a:hover, .detail-cms a:hover {
  color: var(--cl-tx-ahover);
}
@property --gradient-start {
  syntax: "<color>";
  inherits: false;
  initial-value: #000;
}
@property --gradient-end {
  syntax: "<color>";
  inherits: false;
  initial-value: #999;
}
@property --gradient-center {
  syntax: "<color>";
  inherits: false;
  initial-value: #555;
}
/* 
# Link style
# ================================================================= */
/* 
# Help link
# ================================================================= */
a[disb] {
  display: block;
}
a[nolink] {
  cursor: default;
}
a.noeft:before {
  display: none;
}
a.noeft:after {
  display: none;
}

/* 
# Button style
# ================================================================= */
.btn__readmore {
  border: 1px solid var(--cl-primary);
  color: var(--cl-primary);
  border-radius: var(--b-radius);
  padding: 10px 30px;
  font-family: var(--ff-header);
  letter-spacing: 2px;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
}
.btn__readmore {
  font-size: 16px;
}
@media screen and (min-width: 480px) {
  .btn__readmore {
    font-size: calc(16px + 2 * (100vw - 480px) / 720);
  }
}
@media screen and (min-width: 1200px) {
  .btn__readmore {
    font-size: 18px;
  }
}
@media screen and (max-width: 480px) {
  .btn__readmore {
    padding: 8px 24px;
  }
}
@media screen and (max-width: 375px) {
  .btn__readmore {
    padding: 6px 20px 7px;
  }
}
.btn__readmore::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  left: 0;
  top: 0;
  opacity: 0.7;
  background-color: var(--cl-primary);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  z-index: -1;
  border-radius: 50%;
  transform: scale(1.5);
}
.btn__readmore:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 0;
  right: 0;
  top: 0;
  opacity: 0.7;
  background-color: var(--cl-primary);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  z-index: -1;
  border-radius: 50%;
  transform: scale(1.5);
}
.btn__readmore:hover {
  color: var(--cl-white);
}
.btn__readmore:hover::before, .btn__readmore:hover::after {
  width: 100%;
}
.btn__readmore.active {
  color: var(--cl-white);
}
.btn__readmore.active::before, .btn__readmore.active::after {
  width: 100%;
}
.btn__readmore.active:hover {
  color: var(--cl-primary);
}
.btn__readmore.active:hover::before, .btn__readmore.active:hover::after {
  width: 0;
}
.btn__readmore.w {
  border-color: var(--cl-white);
  color: var(--cl-white);
}
.btn__readmore.w:hover {
  color: var(--cl-tx-body);
}
.btn__readmore.w::before, .btn__readmore.w::after {
  background-color: var(--cl-white);
}
.btn__readmore.w.active {
  color: var(--cl-tx-body);
}
.btn__readmore.w.active::before, .btn__readmore.w.active::after {
  width: 100%;
}
.btn__readmore.w.active:hover {
  color: var(--cl-white);
}
.btn__readmore.w.active:hover::before, .btn__readmore.w.active:hover::after {
  width: 0;
}
.btn__h-booknow {
  color: var(--cl-white);
  font-family: var(--ff-header);
}
.btn__h-booknow {
  font-size: 17px;
}
@media screen and (min-width: 480px) {
  .btn__h-booknow {
    font-size: calc(17px + 3 * (100vw - 480px) / 720);
  }
}
@media screen and (min-width: 1200px) {
  .btn__h-booknow {
    font-size: 20px;
  }
}
.btn__h-booknow:before {
  background-color: var(--cl-white);
}
.btn__h-booknow:hover {
  color: var(--cl-tx-option2);
}
.btn__h-booknow:hover:before {
  background-color: var(--cl-tx-option2);
}
.btn__explore {
  color: var(--cl-primary);
  padding: 0 10px 7.5px;
  text-align: center;
  display: inline-block;
}
.btn__explore:hover ._wavelinkb {
  bottom: -5px;
}
.btn__explore ._wavelinkb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  overflow: hidden;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.btn__explore ._wavelinkb div {
  display: flex;
  width: 249px;
  overflow: hidden;
  position: relative;
  -webkit-animation: moveWater 10s linear infinite;
  animation: moveWater 10s linear infinite;
}
.btn__explore ._wavelinkb img {
  height: 5px;
  width: 83px;
}
.btn__close-sty1 {
  position: absolute;
  content: "";
  z-index: 1;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  column-gap: 10px;
  cursor: pointer;
}
@media screen and (max-width: 560px) {
  .btn__close-sty1 {
    left: 10px;
  }
}
@media screen and (max-width: 430px) {
  .btn__close-sty1 {
    left: 5px;
    top: 10px;
  }
}
.btn__close-sty1.w {
  --col-btnclose: #fff;
}
.btn__close-sty1.b {
  --col-btnclose: #000;
}
.btn__close-sty1 .ic-close {
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.btn__close-sty1 .ic-close span {
  width: 100%;
  height: 2px;
  display: block;
  position: relative;
  background-color: var(--col-btnclose);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.btn__close-sty1 .ic-close span:nth-child(1) {
  transform: rotate(45deg);
  top: 1px;
}
.btn__close-sty1 .ic-close span:nth-child(2) {
  transform: rotate(-45deg);
  top: -1px;
}
.btn__close-sty1:hover .ic-close span {
  transform: rotate(0);
}
.btn__act-mainmenu {
  display: flex;
  align-items: center;
  column-gap: 20px;
}
.btn__act-mainmenu .icon-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 10px;
  height: 40px;
  width: 40px;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.btn__act-mainmenu .icon-menu span {
  width: 100%;
  height: 2px;
  display: block;
  background-color: var(--cl-black);
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.btn__act-mainmenu:hover .icon-menu {
  row-gap: 5px;
}

@keyframes moveWater {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-33.3333333333%);
    transform: translateX(-33.3333333333%);
  }
}
/* #Header
================================================== */
header {
  position: fixed;
  z-index: 500;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 15px 0;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
header .container {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo img {
  width: 80px;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
@media screen and (max-width: 430px) {
  header .logo img {
    width: 60px;
  }
}
header .mainmenu {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
header .mainmenu .row1 {
  display: flex;
  justify-content: flex-end;
}
header .mainmenu a:hover {
  color: var(--cl-tx-option4);
}
header .top_menu {
  position: relative;
  padding-right: 30px;
}
@media screen and (max-width: 650px) {
  header .top_menu {
    padding-right: 15px;
  }
}
@media screen and (max-width: 490px) {
  header .top_menu {
    position: absolute;
    top: 62px;
    right: 110px;
  }
}
@media screen and (max-width: 430px) {
  header .top_menu {
    top: 49px;
  }
}
@media screen and (max-width: 320px) {
  header .top_menu {
    top: 42px;
  }
}
header .top_menu:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #fff;
}
header .top_menu ul {
  display: flex;
  justify-content: flex-end;
  column-gap: 20px;
}
@media screen and (max-width: 480px) {
  header .top_menu ul {
    column-gap: 10px;
  }
}
header .top_menu a {
  color: var(--cl-white);
  font-size: 0.9em;
}
header .top_social {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
}
@media screen and (max-width: 650px) {
  header .top_social {
    padding-left: 15px;
    padding-right: 15px;
  }
}
header .top_social ul {
  display: flex;
  justify-content: flex-end;
  column-gap: 12px;
}
@media screen and (max-width: 650px) {
  header .top_social ul {
    column-gap: 7px;
  }
}
header .top_social i {
  font-size: 1.5em;
}
@media screen and (max-width: 650px) {
  header .top_social i {
    width: 20px;
    display: flex;
    height: 20px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
}
header .top_social a {
  color: var(--cl-white);
}
header .top_social a:hover {
  color: var(--cl-tx-option4);
}
header .lang {
  position: relative;
  padding-left: 30px;
}
@media screen and (max-width: 650px) {
  header .lang {
    padding-left: 15px;
  }
}
header .lang::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #fff;
}
header .lang .lang__active {
  position: relative;
  cursor: pointer;
  color: var(--cl-white);
  display: flex;
  column-gap: 10px;
  align-items: center;
}
header .lang .lang__active::after {
  content: "";
  position: relative;
  background: url(../images/icon--select-list.svg) no-repeat center center;
  background-size: 10px auto;
  display: block;
  width: 15px;
  height: 15px;
}
header .lang .lang__active:hover .lang__list {
  display: block;
}
header .lang .lang__active .wrap {
  display: flex;
  align-items: center;
  column-gap: 5px;
}
header .lang .lang__list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  background-color: var(--cl-white);
  width: 100%;
  padding: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  padding: 5px 0;
}
header .lang .lang__list li.active {
  display: none;
}
header .lang .lang__list a {
  color: var(--cl-tx-body);
  padding: 2px 10px;
  display: flex;
  align-items: center;
  font-size: 0.8em;
}
header .lang .lang__list a:hover {
  color: var(--cl-primary);
}
header .lang img {
  width: 20px;
}
header .lang a {
  display: flex;
  column-gap: 5px;
  color: var(--cl-white);
}
@media screen and (max-width: 1023px) {
  header .main_menu {
    display: flex;
    justify-content: flex-end;
  }
}
header .main_menu ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 22.5px;
}
header .main_menu a {
  color: var(--cl-white);
}
@media screen and (max-width: 1023px) {
  header .main_menu .ul__mainmenu {
    display: none;
  }
}
header .main_menu .mobile_menu_btn {
  display: none;
}
header .main_menu .mobile_menu_btn a {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
header .main_menu .mobile_menu_btn a:hover > div {
  row-gap: 3px;
}
header .main_menu .mobile_menu_btn a:hover > div span {
  background-color: var(--cl-tx-option4);
}
header .main_menu .mobile_menu_btn a > div {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  width: 30px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
header .main_menu .mobile_menu_btn a > div span {
  width: 100%;
  height: 2px;
  background-color: var(--cl-white);
  display: block;
  position: relative;
}
@media screen and (max-width: 1023px) {
  header .main_menu .mobile_menu_btn {
    display: block;
  }
}
header.fixedtop {
  background-color: #fff;
  padding: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
header.fixedtop a {
  color: var(--cl-tx-body);
}
header.fixedtop .logo {
  position: relative;
}
header.fixedtop .logo img {
  width: 40px;
  opacity: 0;
}
header.fixedtop .logo a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: url(../images/logo-b.svg) no-repeat center center;
}
header.fixedtop .mainmenu {
  row-gap: 0;
}
header.fixedtop .mainmenu .row1 {
  height: 0;
  overflow: hidden;
}
header.fixedtop .main_menu .mobile_menu_btn a:hover {
  color: var(--cl-tx-body);
}
header.fixedtop .main_menu .mobile_menu_btn a > div {
  margin-top: 1px;
}
header.fixedtop .main_menu .mobile_menu_btn a > div span {
  background-color: var(--cl-tx-body);
}
@media screen and (max-width: 490px) {
  header.fixedtop .top_menu {
    display: none;
    top: 0;
  }
}
header.noslide {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  background-color: #fff;
}
header.noslide .main_menu a, header.noslide .top_menu a, header.noslide .top_social a {
  color: var(--cl-tx-body);
}
header.noslide .main_menu a:hover, header.noslide .top_menu a:hover, header.noslide .top_social a:hover {
  color: var(--cl-primary);
}
header.noslide .top_menu:after {
  background-color: var(--cl-tx-body);
}
header.noslide .main_menu .mobile_menu_btn a > div span {
  background-color: var(--cl-tx-body);
}

#sec__mobilemenu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: rgb(255, 255, 255);
  display: none;
}
#sec__mobilemenu.active {
  display: block;
}
#sec__mobilemenu .btn__close_mainmemu {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}
#sec__mobilemenu .btn__close_mainmemu span {
  display: block;
  width: 30px;
  height: 2px;
  background-color: var(--cl-tx-body);
  position: relative;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
#sec__mobilemenu .btn__close_mainmemu span:nth-child(1) {
  transform: rotate(45deg);
}
#sec__mobilemenu .btn__close_mainmemu span:nth-child(2) {
  transform: rotate(-45deg);
  top: -2px;
}
#sec__mobilemenu .btn__close_mainmemu:hover span:nth-child(1), #sec__mobilemenu .btn__close_mainmemu:hover span:nth-child(2) {
  transform: rotate(0deg);
}
#sec__mobilemenu .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 30px;
}
#sec__mobilemenu .mainmenu__wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#sec__mobilemenu .logo img {
  width: 100px;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
#sec__mobilemenu .mainmenu .ul__mainmenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 7.5px;
}
@media screen and (max-width: 560px) {
  #sec__mobilemenu .mainmenu .ul__mainmenu {
    row-gap: 0px;
  }
}
#sec__mobilemenu .mainmenu a {
  font-size: 2em;
  font-family: var(--ff-header);
}

/* 
# Popup Main Menu
# ================================================================= */
#popup__mainmenu {
  position: fixed;
  z-index: 999;
  background-color: var(--ppmenu-bg);
  overflow: hidden;
  display: none;
}
#popup__mainmenu.active {
  display: block;
}
#popup__mainmenu .container {
  height: 100%;
}
#popup__mainmenu.sty1 {
  width: 100vw;
  top: 0;
  bottom: 0;
}
#popup__mainmenu.sty1 .mainmenu__wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#popup__mainmenu.sty1 .mainmenu__wrap a {
  color: var(--cl-tx-body);
  font-size: 1.2em;
}
#popup__mainmenu.sty2 {
  box-shadow: 0 0 10px rgba(187, 187, 187, 0.4);
}

/* # Menu Mobile
================================================== */
#sec__mobilemenu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #fff;
  overflow: hidden;
  display: none;
}
#sec__mobilemenu.active {
  display: flex;
}
#sec__mobilemenu .container {
  width: 100%;
  padding: 0;
}
#sec__mobilemenu .sty__mobilemenu {
  display: grid;
  grid-template-columns: 80px 1fr;
  height: 100%;
}
@media screen and (max-width: 560px) {
  #sec__mobilemenu .sty__mobilemenu {
    grid-template-columns: 60px 1fr;
  }
}
@media screen and (max-width: 430px) {
  #sec__mobilemenu .sty__mobilemenu {
    grid-template-columns: 50px 1fr;
  }
}
#sec__mobilemenu .sty__mobilemenu .mobme-social {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--cl-tx-alink);
  padding-bottom: 20px;
}
#sec__mobilemenu .sty__mobilemenu .mobme-social a {
  color: var(--cl-white);
  font-size: 2.2rem;
}
#sec__mobilemenu .sty__mobilemenu .mobme-social ul {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
#sec__mobilemenu .mobme-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#sec__mobilemenu .mobme-list a {
  font-size: 3rem;
  line-height: 1.4;
  color: var(--cl-tx-body);
  padding: 0 20px;
}
#sec__mobilemenu .mobme-list ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  row-gap: 5px;
  max-width: 600px;
  margin: auto;
}
#sec__mobilemenu .mobme-list ul li {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
}
#sec__mobilemenu .mobme-list ul li:last-child:after {
  content: "";
}
#sec__mobilemenu .mobme-list ul .sub-menu {
  padding: 5px 0px 10px 20px;
}
#sec__mobilemenu .mobme-list ul .sub-menu li:before {
  position: absolute;
  content: "";
  height: 1px;
  width: 10px;
  left: 0;
  top: 50%;
  background-color: #000;
}
#sec__mobilemenu .mobme-list ul .sub-menu a {
  font-size: 1.8rem;
}

/* 
# etc
# ================================================================= */
.sty__roi-smartbooking-pro {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

#roi-loyalty-icon {
  background: url(../images/icon-roi-member.svg) no-repeat center center;
  width: 30px;
  height: 30px;
}

/* #footer
================================================== */
footer {
  color: var(--cl-white);
}
footer .r-f-menu {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5019607843);
  padding: 30px 0;
}
footer .f-menu ul {
  display: flex;
  justify-content: center;
  column-gap: 30px;
  flex-flow: wrap;
  row-gap: 7.5px;
}
@media screen and (max-width: 480px) {
  footer .f-menu ul {
    column-gap: 22.5px;
  }
}
footer h5 {
  letter-spacing: 1px;
}
footer a {
  color: var(--cl-white);
}
footer a:hover {
  color: var(--cl-tx-option4);
}
footer .r-f-info {
  padding-top: 60px;
}
footer .f-info {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
@media screen and (max-width: 480px) {
  footer .f-info {
    row-gap: 7.5px;
  }
}
footer .f-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 480px) {
  footer .f-logo {
    padding-bottom: 15px;
  }
}
footer .f-logo img {
  width: 100px;
  height: auto;
  margin: auto;
}
@media screen and (max-width: 480px) {
  footer .f-logo img {
    width: 80px;
  }
}
@media screen and (max-width: 375px) {
  footer .f-txt h5 {
    font-size: 18px;
    padding-bottom: 20px;
  }
}
footer .f-social {
  padding-bottom: 40px;
  padding-top: 10px;
}
footer .f-social ul {
  display: flex;
  justify-content: center;
  column-gap: 15px;
}
footer .f-social i {
  font-size: 2.4rem;
}
footer .f-social a:hover {
  opacity: 0.8;
}

.f-copyright .wrap {
  display: flex;
  justify-content: center;
  column-gap: 5px;
}
@media screen and (max-width: 1024px) {
  .f-copyright .wrap {
    flex-flow: wrap;
  }
}

/* 
# padding section settings
# ================================================================= */
.pd__intro-m {
  padding-top: var(--pd-tb-120);
  padding-bottom: var(--pd-tb-120);
}
.pd__intro-s {
  padding-top: var(--pd-tb-80);
  padding-bottom: var(--pd-tb-80);
}
.pd__content-fst {
  padding-top: var(--pd-tb-120);
}
.pd__content-btm {
  padding-bottom: var(--pd-tb-120);
}
.pd__content-fst-s {
  margin-top: var(--pd-tb-80);
}
.pd__footer-main {
  padding-bottom: 45px;
}
@media screen and (max-width: 560px) {
  .pd__footer-main {
    padding-bottom: 45px;
  }
}
.pd__footer-copyright {
  padding-top: 15px;
  padding-bottom: 30px;
}

/* 
# background section
# ================================================================= */
.bg1 {
  background-color: var(--cl-bg-section1);
}
.bg2 {
  background-color: var(--cl-bg-section2);
}
.bg3 {
  background-color: var(--cl-bg-section3);
  color: var(--cl-white);
}
.bg3 h2, .bg3 h3 {
  color: var(--cl-white);
}
.bg-footer {
  background-color: var(--cl-tx-option3);
}
.bg-location {
  background: url(../images/bg-location.png) no-repeat calc(100% - 60px) calc(100% - 60px);
  background-size: 160px auto;
}
.bg-img {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.2;
  mix-blend-mode: luminosity;
}
.bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 
# Ext
# ================================================================= */
/* 
# Form
# ================================================================= */
/* 
# Header
# ================================================================= */
h1, .sty__intro .subtitle h2 {
  font-family: var(--ff-body);
  color: var(--cl-tx-subheader);
}

h2, h3 {
  font-family: var(--ff-header);
  color: var(--cl-tx-header);
}

/* 
# Footer
# ================================================================= */
/* 
# Slide fix
# ================================================================= */
.sdty__mainslide .sd-text {
  --w-tx-slide: 700px;
  top: calc(var(--pd-tb-120) + 100px);
}
@media screen and (max-width: 480px) {
  .sdty__mainslide .sd-text {
    left: 30px;
    right: 30px;
  }
}
.sdty__mainslide .sd-text .title {
  position: relative;
  max-width: 500px;
  text-transform: uppercase;
}
.sdty__mainslide .sd-text .title::after {
  position: relative;
  content: "";
  height: 1px;
  width: 200px;
  max-width: 100%;
  display: block;
  margin: 45px auto 52.5px;
  background-color: var(--cl-white);
}
@media screen and (max-width: 480px) {
  .sdty__mainslide .sd-text .title::after {
    margin: 30px auto 30px;
    opacity: 0.5;
  }
}

/* # Style Layout
================================================== */
.sty__intro {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}
@media screen and (max-width: 480px) {
  .sty__intro {
    row-gap: 22.5px;
  }
}
.sty__intro .subtitle + .title {
  margin-top: -22.5px;
}
@media screen and (max-width: 430px) {
  .sty__intro .subtitle + .title {
    margin-top: -15px;
  }
}
.sty__intro .link {
  padding-top: 15px;
}
.sty__intro + .sty__2col-listbox, .sty__intro + .sty__4box-listbox {
  margin-top: 90px;
}
@media screen and (max-width: 1024px) {
  .sty__intro + .sty__2col-listbox, .sty__intro + .sty__4box-listbox {
    margin-top: 60px;
  }
}
@media screen and (max-width: 480px) {
  .sty__intro + .sty__2col-listbox, .sty__intro + .sty__4box-listbox {
    margin-top: 40px;
  }
}
.sty__intro.maxw {
  max-width: 800px;
  margin: 0 auto;
}
.sty__intro.sm .detail {
  margin-top: -15px;
}
.sty__2col-tx-slide {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 880px) {
  .sty__2col-tx-slide {
    flex-direction: column;
    row-gap: 60px;
  }
}
@media screen and (max-width: 480px) {
  .sty__2col-tx-slide {
    row-gap: 45px;
  }
}
.sty__2col-tx-slide .col {
  width: 50%;
}
@media screen and (max-width: 880px) {
  .sty__2col-tx-slide .col {
    width: 100%;
  }
}
.sty__2col-tx-slide .tx {
  padding-right: 90px;
  text-align: left;
}
@media screen and (max-width: 880px) {
  .sty__2col-tx-slide .tx {
    padding-right: 0;
    text-align: center;
  }
}
.sty__2col-tx-slide.review {
  text-align: left;
  min-height: 60vh;
}
@media screen and (max-width: 880px) {
  .sty__2col-tx-slide.review {
    max-width: 80%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 430px) {
  .sty__2col-tx-slide.review {
    max-width: 100%;
  }
}
.sty__2col-tx-slide.review .tx {
  padding-right: 150px;
}
@media screen and (max-width: 1024px) {
  .sty__2col-tx-slide.review .tx {
    padding-right: 90px;
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-tx-slide.review .tx {
    padding-right: 0;
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-tx-slide.review .slick-dots {
    bottom: -80px;
  }
}
@media screen and (max-width: 768px) {
  .sty__2col-tx-slide.review .slick-dots {
    bottom: -45px;
  }
}
@media screen and (max-width: 480px) {
  .sty__2col-tx-slide.review .slick-dots {
    justify-content: center;
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-tx-slide.review .slick-next {
    right: 0;
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-tx-slide.review .slick-prev {
    right: 55px;
  }
}
.sty__2col-txtx {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 880px) {
  .sty__2col-txtx {
    flex-direction: column;
    row-gap: 60px;
  }
}
@media screen and (max-width: 480px) {
  .sty__2col-txtx {
    row-gap: 45px;
  }
}
.sty__2col-txtx .col {
  width: 50%;
}
@media screen and (max-width: 880px) {
  .sty__2col-txtx .col {
    width: 100%;
  }
}
.sty__2col-txtx .map, .sty__2col-txtx .intro {
  padding-right: 120px;
  text-align: left;
}
@media screen and (max-width: 1320px) {
  .sty__2col-txtx .map, .sty__2col-txtx .intro {
    padding-right: 90px;
  }
}
@media screen and (max-width: 1024px) {
  .sty__2col-txtx .map, .sty__2col-txtx .intro {
    padding-right: 60px;
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-txtx .map {
    aspect-ratio: 16/9;
    padding-right: 0;
  }
}
@media screen and (max-width: 560px) {
  .sty__2col-txtx .map {
    height: 300px;
  }
}
.sty__2col-txtx .map iframe {
  width: 100%;
  height: 100%;
}
.sty__2col-txtx .tx {
  text-align: left;
}
.sty__2col-txtx.map {
  align-items: stretch;
}
.sty__2col-txtx.map .tx {
  padding-top: 60px;
  padding-bottom: 60px;
}
@media screen and (max-width: 880px) {
  .sty__2col-txtx.map .tx {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.sty__2col-form-contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 90px;
}
@media screen and (max-width: 1024px) {
  .sty__2col-form-contact {
    column-gap: 60px;
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-form-contact {
    flex-direction: column;
    row-gap: 60px;
    flex-flow: column-reverse;
  }
}
.sty__2col-form-contact .col {
  flex: 0 0 calc(50% - 45px);
}
@media screen and (max-width: 1024px) {
  .sty__2col-form-contact .col {
    flex: 0 0 calc(50% - 30px);
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-form-contact .col {
    flex: 0 0 100%;
    width: 100%;
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-form-contact .photo img {
    width: 100%;
    aspect-ratio: 4/2.5;
    object-fit: cover;
  }
}
.sty__2col-form-contact .tx.form {
  text-align: left;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
@media screen and (max-width: 560px) {
  .sty__2col-form-contact .tx.form {
    padding-top: 0;
  }
}
.sty__2col-form-contact h5 {
  font-family: var(--ff-body);
  padding-bottom: 15px;
  font-size: 1.2em;
  font-weight: bold;
}
.sty__2col-form-contact .form {
  padding-top: 30px;
}
.sty__2col-form-contact form {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.sty__2col-form-contact .row {
  position: relative;
}
.sty__2col-form-contact .row.-name {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
}
.sty__2col-form-contact .row.-name .col {
  flex: 1;
}
.sty__2col-form-contact .row .col {
  position: relative;
}
.sty__2col-form-contact .row input, .sty__2col-form-contact .row textarea, .sty__2col-form-contact .row select {
  z-index: 0;
  padding: 15px 20px 0;
}
.sty__2col-form-contact .row input {
  height: 55px;
  padding-top: 15px;
}
.sty__2col-form-contact .row textarea {
  height: 150px;
  resize: none;
  padding-top: 22px;
}
.sty__2col-form-contact .row label {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 1;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.sty__2col-form-contact .row input, .sty__2col-form-contact .row textarea {
  position: relative;
}
.sty__2col-form-contact .row input:focus, .sty__2col-form-contact .row textarea:focus {
  border: 1px solid var(--cl-primary);
  box-shadow: 0 0 2px var(--cl-primary);
}
.sty__2col-form-contact .row input:focus + label, .sty__2col-form-contact .row textarea:focus + label {
  color: var(--cl-primary);
  font-size: 0.6em;
  top: 7px;
  left: 10px;
}
.sty__2col-form-contact .row input:valid + label, .sty__2col-form-contact .row input:not(:placeholder-shown) + label, .sty__2col-form-contact .row textarea:valid + label, .sty__2col-form-contact .row textarea:not(:placeholder-shown) + label {
  color: var(--cl-primary);
  font-size: 0.6em;
  top: 7px;
  left: 10px;
}
.sty__2col-listbox {
  display: flex;
  flex-direction: column;
  row-gap: 90px;
}
@media screen and (max-width: 1024px) {
  .sty__2col-listbox {
    row-gap: 60px;
  }
}
.sty__2col-listbox .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 90px;
}
@media screen and (max-width: 1024px) {
  .sty__2col-listbox .item {
    column-gap: 60px;
  }
}
@media screen and (max-width: 880px) {
  .sty__2col-listbox .item {
    flex-direction: column;
    row-gap: 30px;
  }
}
@media screen and (max-width: 480px) {
  .sty__2col-listbox .item {
    row-gap: 20px;
  }
}
.sty__2col-listbox .item .photo {
  width: 50%;
}
@media screen and (max-width: 880px) {
  .sty__2col-listbox .item .photo {
    width: 100%;
  }
}
.sty__2col-listbox .item .photo img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}
.sty__2col-listbox .item .text {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  text-align: left;
}
@media screen and (max-width: 880px) {
  .sty__2col-listbox .item .text {
    width: 100%;
  }
}
.sty__2col-listbox .item .icon img {
  width: 120px;
  height: auto;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 480px) {
  .sty__2col-listbox .item .icon img {
    width: 100px;
  }
}
.sty__2col-listbox .item:nth-child(even) .photo {
  order: 2;
}
@media screen and (max-width: 880px) {
  .sty__2col-listbox .item:nth-child(even) .photo {
    order: 1;
  }
}
.sty__2col-listbox .item:nth-child(even) .text {
  order: 1;
}
@media screen and (max-width: 880px) {
  .sty__2col-listbox .item:nth-child(even) .text {
    order: 2;
  }
}
.sty__2col-listbox.reverse .item .photo {
  order: 2;
}
@media screen and (max-width: 880px) {
  .sty__2col-listbox.reverse .item .photo {
    order: 1;
  }
}
.sty__2col-listbox.reverse .item .text {
  order: 1;
}
@media screen and (max-width: 880px) {
  .sty__2col-listbox.reverse .item .text {
    order: 2;
  }
}
.sty__2col-listbox.reverse .item:nth-child(even) .photo {
  order: 1;
}
.sty__2col-listbox.reverse .item:nth-child(even) .text {
  order: 2;
}
.sty__4icon-listbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 30px;
}
.sty__4icon-listbox .item {
  flex: 0 0 calc(25% - 30px);
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
@media screen and (max-width: 880px) {
  .sty__4icon-listbox .item {
    flex: 0 0 calc(50% - 20px);
  }
}
@media screen and (max-width: 375px) {
  .sty__4icon-listbox .item {
    flex: 0 0 100%;
  }
}
.sty__4icon-listbox .item .icon img {
  width: 150px;
  height: auto;
  mix-blend-mode: multiply;
  margin: auto;
}
@media screen and (max-width: 1100px) {
  .sty__4icon-listbox .item .icon img {
    width: 120px;
  }
}
@media screen and (max-width: 480px) {
  .sty__4icon-listbox .item .icon img {
    width: 100px;
  }
}
.sty__4icon-listbox .item .text {
  display: flex;
  flex-direction: column;
  row-gap: 7.5px;
}
.sty__4icon-listbox .item .text h4 {
  color: var(--cl-tx-header);
}
.sty__4box-listbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 30px;
}
@media screen and (max-width: 1024px) {
  .sty__4box-listbox {
    column-gap: 15px;
  }
}
@media screen and (max-width: 768px) {
  .sty__4box-listbox {
    column-gap: 30px;
  }
}
@media screen and (max-width: 560px) {
  .sty__4box-listbox {
    column-gap: 15px;
    row-gap: 15px;
  }
}
@media screen and (max-width: 430px) {
  .sty__4box-listbox {
    column-gap: 0px;
  }
}
.sty__4box-listbox .item {
  flex: 0 0 calc(25% - 30px);
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
@media screen and (max-width: 1024px) {
  .sty__4box-listbox .item {
    flex: 0 0 calc(25% - 11.25px);
  }
}
@media screen and (max-width: 768px) {
  .sty__4box-listbox .item {
    flex: 0 0 calc(50% - 15px);
  }
}
@media screen and (max-width: 560px) {
  .sty__4box-listbox .item {
    flex: 0 0 calc(50% - 7.5px);
  }
}
@media screen and (max-width: 430px) {
  .sty__4box-listbox .item {
    flex: 0 0 100%;
  }
}
.sty__4box-listbox .item .photo {
  background: #000;
  position: relative;
}
.sty__4box-listbox .item .photo img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.sty__4box-listbox .item .photo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
.sty__4box-listbox .item .text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
}
.sty__4box-listbox .item .text .title {
  border-left: 2px solid var(--cl-white);
  padding-left: 15px;
  opacity: 0;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
@media screen and (max-width: 480px) {
  .sty__4box-listbox .item .text .title {
    opacity: 1;
  }
}
.sty__4box-listbox .item .text h4 {
  text-align: left;
  color: var(--cl-white);
  opacity: 0;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
  transform: translateX(20px);
}
@media screen and (max-width: 480px) {
  .sty__4box-listbox .item .text h4 {
    opacity: 1;
    transform: translateX(0);
  }
}
.sty__4box-listbox .item:hover .photo img {
  opacity: 0.8;
}
.sty__4box-listbox .item:hover .photo::after {
  opacity: 1;
  backdrop-filter: blur(5px);
}
.sty__4box-listbox .item:hover .text .title {
  opacity: 1;
}
.sty__4box-listbox .item:hover .text h4 {
  opacity: 1;
  transform: translateX(0);
}
.sty__fullslide-tx .tx {
  position: absolute;
  z-index: 10;
  max-width: 800px;
  left: calc(50% - 400px);
  top: 20%;
  bottom: 20%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 30px;
  color: var(--cl-white);
}
@media screen and (max-width: 880px) {
  .sty__fullslide-tx .tx {
    width: auto;
    left: 10%;
    right: 10%;
  }
}
.sty__fullslide-tx .tx h2, .sty__fullslide-tx .tx h3 {
  color: var(--cl-white);
}
.sty__fullslide-tx .slide .slick-dots {
  bottom: 60px;
  max-width: 800px;
  width: 100%;
  left: calc(50% - 400px);
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  .sty__fullslide-tx .slide .slick-dots {
    width: auto;
    left: 10%;
    right: 10%;
  }
}
.sty__fullslide-tx .slide .sdbox {
  background-color: #000;
}
.sty__fullslide-tx .slide .sdbox img {
  opacity: 0.65;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.sty__step-list {
  display: inline-flex;
  flex-direction: column;
  row-gap: 45px;
}
.sty__step-list .step {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 15px;
  align-items: center;
}
@media screen and (max-width: 880px) {
  .sty__step-list .step {
    grid-template-columns: 150px 1fr;
  }
}
@media screen and (max-width: 560px) {
  .sty__step-list .step {
    grid-template-columns: 120px 1fr;
    align-items: start;
  }
}
@media screen and (max-width: 480px) {
  .sty__step-list .step {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 80%;
    align-items: center;
    row-gap: 30px;
  }
}
@media screen and (max-width: 430px) {
  .sty__step-list .step {
    max-width: 100%;
    align-items: flex-start;
    row-gap: 20px;
  }
}
.sty__step-list .step:last-child .number::after {
  display: none;
}
.sty__step-list .number {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cl-bg-section5);
  color: var(--cl-white);
  border-radius: 50%;
  font-family: var(--ff-header);
  font-weight: 700;
  position: relative;
  font-size: 8rem;
  line-height: 1;
  padding-bottom: 26px;
  z-index: 1;
  position: relative;
}
@media screen and (max-width: 880px) {
  .sty__step-list .number {
    width: 120px;
    height: 120px;
    font-size: 6rem;
  }
}
@media screen and (max-width: 560px) {
  .sty__step-list .number {
    width: 100px;
    height: 100px;
    font-size: 5rem;
    padding-bottom: 15px;
  }
}
@media screen and (max-width: 430px) {
  .sty__step-list .number {
    margin-left: 30px;
  }
}
.sty__step-list .number::after {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 100%;
  height: 100%;
  width: 2px;
  background-color: var(--cl-bg-section5);
  z-index: 0;
}
@media screen and (max-width: 560px) {
  .sty__step-list .number::after {
    height: 120%;
  }
}
@media screen and (max-width: 480px) {
  .sty__step-list .number::after {
    display: none;
  }
}
.sty__step-list .text {
  text-align: left;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.sty__mainslide .bg-slide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.sty__mainslide .bg-slide img {
  width: 100%;
}
.sty__mainslide .sty__txmainslide {
  position: absolute;
  left: 90px;
  bottom: 150px;
  z-index: 10;
  text-align: left;
  display: flex;
  flex-direction: row;
  column-gap: 60px;
  align-items: flex-end;
}
@media screen and (max-width: 1027px) {
  .sty__mainslide .sty__txmainslide {
    left: 60px;
    bottom: 120px;
  }
}
@media screen and (max-width: 800px) {
  .sty__mainslide .sty__txmainslide {
    column-gap: 30px;
  }
}
@media screen and (max-width: 560px) {
  .sty__mainslide .sty__txmainslide {
    left: 30px;
    bottom: 100px;
  }
}
.sty__mainslide .sty__txmainslide .scroll img {
  width: 18px;
}
.sty__mainslide .sty__txmainslide .text {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  max-width: 500px;
  width: 100%;
}
@media screen and (max-width: 800px) {
  .sty__mainslide .sty__txmainslide .text {
    max-width: 400px;
  }
}
@media screen and (max-width: 560px) {
  .sty__mainslide .sty__txmainslide .text {
    max-width: calc(100% - 100px);
  }
}
@media screen and (max-width: 375px) {
  .sty__mainslide .sty__txmainslide .text {
    max-width: calc(100% - 80px);
  }
}
.sty__mainslide .sty__txmainslide .title {
  font-family: var(--ff-header);
  color: var(--cl-white);
}
.sty__mainslide .sty__txmainslide .detail {
  color: var(--cl-white);
}
.sty__mainslide .sdty__mainslide .slick-arrow {
  bottom: 120px;
}
.sty__mainslide .sdty__mainslide .sdbox {
  background: #000;
}
.sty__mainslide .sdty__mainslide img {
  opacity: 0.7;
}
.sty__location-map {
  height: 500px;
  position: relative;
}
.sty__location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.sty__hotel-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  column-gap: 90px;
}
@media screen and (max-width: 1024px) {
  .sty__hotel-content {
    column-gap: 60px;
  }
}
@media screen and (max-width: 880px) {
  .sty__hotel-content {
    flex-direction: column;
    row-gap: 45px;
  }
}
.sty__hotel-content .col {
  flex: 0 0 calc(50% - 45px);
}
.sty__hotel-content .text {
  text-align: left;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.sty__hotel-content h5 {
  font-family: var(--ff-body);
  padding-bottom: 15px;
  font-size: 1.2em;
  font-weight: bold;
}
.sty__hotel-content .price span {
  font-size: 1.6em;
}
.sty__hotel-content .link {
  padding-top: 15px;
}
.sty__hotel-content .photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.sty__3col-hotel {
  display: flex;
  flex-direction: row;
  column-gap: 60px;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 880px) {
  .sty__3col-hotel {
    column-gap: 30px;
    flex-flow: wrap;
  }
}
@media screen and (max-width: 480px) {
  .sty__3col-hotel {
    column-gap: 15px;
  }
}
.sty__3col-hotel .col {
  flex: 0 0 calc(33.333% - 40px);
}
@media screen and (max-width: 880px) {
  .sty__3col-hotel .col {
    flex: 0 0 calc(33.33% - 20px);
  }
}
@media screen and (max-width: 650px) {
  .sty__3col-hotel .col {
    flex: 0 0 calc(50% - 15px);
  }
}
@media screen and (max-width: 480px) {
  .sty__3col-hotel .col {
    flex: 0 0 calc(50% - 7.5px);
  }
}
.sty__3col-hotel .photo {
  position: relative;
  width: 100%;
}
.sty__3col-hotel .photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.sty__3col-hotel .text {
  text-align: left;
}
@media screen and (max-width: 650px) {
  .sty__3col-hotel .text {
    width: 100%;
    flex: 0 0 100%;
    padding-top: 30px;
  }
}
.sty__blog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 90px;
  column-gap: 60px;
}
@media screen and (max-width: 1200px) {
  .sty__blog {
    row-gap: 60px;
    column-gap: 30px;
  }
}
@media screen and (max-width: 650px) {
  .sty__blog {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .sty__blog {
    row-gap: 45px;
    column-gap: 15px;
  }
}
@media screen and (max-width: 430px) {
  .sty__blog {
    grid-template-columns: 1fr;
  }
}
.sty__blog .item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sty__blog .item .photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.sty__blog .item .text {
  text-align: left;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding-top: 30px;
  flex-grow: 1;
}
.sty__blog .item .title {
  margin-top: -7.5px;
}
.sty__blog .item .link {
  padding-top: 15px;
}
.sty__blog .item .detail {
  flex-grow: 1;
}
.sty__blog .item h3 {
  color: var(--cl-tx-header);
}
@media screen and (max-width: 1024px) {
  .sty__blog .item h3 {
    font-size: 2.4rem;
    line-height: 1.2;
  }
}
@media screen and (max-width: 768px) {
  .sty__blog .item h3 {
    font-size: 2.1rem;
  }
}
.sty__blog-pageindex {
  display: flex;
  flex-direction: row;
  column-gap: 15px;
  padding-top: 90px;
  justify-content: center;
}
.sty__blog-pageindex ul {
  display: flex;
  flex-direction: row;
  column-gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sty__blog-pageindex li a {
  color: var(--cl-primary);
}
.sty__blog-detail {
  display: grid;
  grid-template-columns: 1fr 360px;
  column-gap: 90px;
  row-gap: 15px;
}
@media screen and (max-width: 1024px) {
  .sty__blog-detail {
    grid-template-columns: 1fr 250px;
    column-gap: 45px;
  }
}
@media screen and (max-width: 768px) {
  .sty__blog-detail {
    grid-template-columns: 1fr 180px;
    row-gap: 30px;
  }
}
@media screen and (max-width: 767px) {
  .sty__blog-detail {
    display: flex;
    flex-direction: column;
    row-gap: 45px;
  }
}
.sty__blog-detail .blog-detail {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  text-align: left;
}
.sty__blog-detail .blog-detail .wrap {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.sty__blog-detail .blog-detail .date-and-postby {
  display: flex;
  flex-direction: row;
  column-gap: 30px;
  color: var(--cl-gray-999);
  margin-top: -7.5px;
  flex-flow: wrap;
}
.sty__blog-detail .blog-detail .detail {
  padding-top: 15px;
}
.sty__blog-detail .blog-detail .detail img {
  width: 100%;
  aspect-ratio: 4/2;
  object-fit: cover;
  margin: 30px 0;
}
.sty__blog-detail .blog-detail .link {
  padding-top: 30px;
}
@media screen and (max-width: 767px) {
  .sty__blog-detail .more-blog {
    padding-top: 45px;
    border-top: 2px solid var(--cl-primary);
  }
}
.sty__blog-detail .box-more-blog {
  display: flex;
  row-gap: 30px;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .sty__blog-detail .box-more-blog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 15px;
  }
}
@media screen and (max-width: 560px) {
  .sty__blog-detail .box-more-blog {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 375px) {
  .sty__blog-detail .box-more-blog {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
  }
}
.sty__blog-detail .box-more-blog .item a {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  column-gap: 20px;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .sty__blog-detail .box-more-blog .item a {
    grid-template-columns: 80px 1fr;
  }
}
@media screen and (max-width: 768px) {
  .sty__blog-detail .box-more-blog .item a {
    column-gap: 15px;
    grid-template-columns: 70px 1fr;
  }
}
@media screen and (max-width: 375px) {
  .sty__blog-detail .box-more-blog .item a {
    grid-template-columns: 80px 1fr;
  }
}
.sty__blog-detail .box-more-blog .item .photo {
  position: relative;
}
.sty__blog-detail .box-more-blog .item .photo img {
  aspect-ratio: 1/1;
  object-fit: cover;
}
.sty__blog-detail .box-more-blog .item .detail {
  font-size: 0.8em;
  line-height: 1.4;
  color: var(--cl-tx-body);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-top: 4.5px;
}
@media screen and (max-width: 768px) {
  .sty__blog-detail .box-more-blog .item .detail {
    display: none;
  }
}
.sty__blog-detail .box-more-blog .item h5 {
  line-height: 1.3;
}
@media screen and (max-width: 1024px) {
  .sty__blog-detail .box-more-blog .item h5 {
    font-size: 1em;
  }
}
@media screen and (max-width: 768px) {
  .sty__blog-detail .box-more-blog .item h5 {
    font-size: 0.9em;
  }
}

.sdty__3col {
  margin-left: -30px;
  margin-right: -30px;
}
@media screen and (max-width: 1320px) {
  .sdty__3col {
    margin-left: -15px;
    margin-right: -15px;
  }
}
.sdty__3col .sdbox {
  padding: 0 30px;
  text-align: left;
}
@media screen and (max-width: 1320px) {
  .sdty__3col .sdbox {
    padding: 0 15px;
  }
}
.sdty__3col .sdbox .text {
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  padding: 30px 0;
}
.sdty__3col .sdbox .wrap-tx {
  padding-left: 30px;
  border-left: 2px solid var(--cl-bg-section4);
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding-bottom: 5px;
}
@media screen and (max-width: 430px) {
  .sdty__3col .sdbox .wrap-tx {
    padding-left: 22.5px;
  }
}
.sdty__3col .slick-track::before {
  display: none;
}
.sdty__3col .slick-track:after {
  display: none;
}
.sdty__3col .slick-slide {
  height: auto;
}
.sdty__3col .slick-prev {
  right: 75px;
}
.sdty__3col .slick-next {
  right: 30px;
}
.sdty__3col.show2 img {
  aspect-ratio: 4/2.5;
  object-fit: cover;
}
@media screen and (max-width: 880px) {
  .sdty__3col.show2 img {
    aspect-ratio: 6/4.4;
  }
}
.sdty__default .sdbox {
  position: relative;
}
.sdty__default .sdbox .photo {
  background-color: #000;
}
.sdty__default .sdbox img {
  aspect-ratio: 4/3;
  object-fit: cover;
  opacity: 0.8;
}
@media screen and (max-width: 480px) {
  .sdty__default .sdbox img {
    aspect-ratio: 1/1;
  }
}
.sdty__default .sdbox .text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 30%;
  padding: 45px;
  color: var(--cl-white);
  z-index: 1;
  text-align: left;
}
@media screen and (max-width: 560px) {
  .sdty__default .sdbox .text {
    padding: 0 0 30px 30px;
  }
}
@media screen and (max-width: 480px) {
  .sdty__default .sdbox .text {
    padding: 22.5px;
    right: 0;
  }
}
.sdty__default .sdbox .text .wrap-tx {
  display: flex;
  flex-direction: column;
  row-gap: 7.5px;
}
.sdty__default.op1 .sdbox img {
  opacity: 1;
}
@media screen and (max-width: 480px) {
  .sdty__default.arrow2 {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 480px) {
  .sdty__default.arrow2 .slick-dots {
    bottom: -30px;
    left: 20px;
    right: 20px;
    justify-content: center;
  }
}
@media screen and (max-width: 480px) {
  .sdty__default.arrow2 .slick-dots li button {
    background-color: var(--cl-primary);
  }
}
@media screen and (max-width: 768px) {
  .sdty__review {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 480px) {
  .sdty__review {
    text-align: center;
  }
}
.sdty__review .slick-arrow {
  top: calc(100% + 60px);
}
@media screen and (max-width: 768px) {
  .sdty__review .slick-arrow {
    top: calc(100% + 30px);
  }
}
.sdty__review .sdbox .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding-right: 150px;
}
@media screen and (max-width: 1320px) {
  .sdty__review .sdbox .wrap {
    padding-right: 0;
  }
}
.sdty__fullslide-hotel .sdbox img {
  width: 100%;
  min-height: 500px;
  height: 80vh;
  object-fit: cover;
}
@media screen and (max-width: 1024px) {
  .sdty__fullslide-hotel .sdbox img {
    height: auto;
    min-height: inherit;
    aspect-ratio: 16/9;
  }
}

.sty-form__newsletter input, .sty-form__newsletter textarea, .sty-form__newsletter select {
  background-color: inherit;
  border: 0;
  border-bottom: 1px solid var(--cl-white);
}
.sty-form__newsletter input::placeholder, .sty-form__newsletter textarea::placeholder, .sty-form__newsletter select::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.sty-form__newsletter input[type=submit] {
  z-index: 1;
  position: relative;
}
.sty-form__newsletter input[type=submit]:hover {
  background-color: inherit;
  border: 0;
  border-bottom: 1px solid var(--cl-white);
  color: var(--cl-tx-header);
}
.sty-form__newsletter .-submit p {
  position: relative;
}
.sty-form__newsletter .-submit p::after {
  background-color: var(--cl-primary);
  position: absolute;
  content: "";
  left: 5px;
  top: 10px;
  bottom: 10px;
  right: 5px;
  z-index: 0;
  border-radius: 10px;
  opacity: 0;
  -webkit-transition: all 0.6s ease 0s;
  -moz-transition: all 0.6s ease 0s;
  -o-transition: all 0.6s ease 0s;
  -ms-transition: all 0.6s ease 0s;
  transition: all 0.6s ease 0s;
}
.sty-form__newsletter .-submit p:hover::after {
  opacity: 1;
}
.sty-form__contactus input[type=submit] {
  border-color: var(--cl-tx-body);
  background-color: var(--cl-tx-body);
  color: var(--cl-white);
}
.sty-form__contactus input[type=reset] {
  cursor: pointer;
}
.sty-form__contactus input[type=submit]:hover, .sty-form__contactus input[type=reset]:hover {
  background-color: var(--cl-primary);
  color: var(--cl-tx-header);
  border-color: var(--cl-primary);
  border-radius: 10px;
}
.sty-form__contactus input:focus, .sty-form__contactus textarea:focus, .sty-form__contactus select:focus {
  border-color: var(--cl-tx-header);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.sty-form__contactus .fm__fillbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.sty-form__contactus .-subject, .sty-form__contactus .-message, .sty-form__contactus .-note, .sty-form__contactus .-submit {
  grid-column: 2 span;
}
.sty-form__contactus .fm_tx {
  padding-bottom: 4.5px;
}
.sty-form__contactus .fm_input {
  position: relative;
}
.sty-form__contactus .-submit .fm_input {
  display: flex;
  column-gap: 15px;
}
.sty-form__contactus .wpcf7-spinner {
  left: 0;
  right: auto;
  top: 15px;
}

/* 
#  
# ================================================================= */
.step_location {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.step_location .row {
  display: flex;
  column-gap: 15px;
  align-items: center;
  color: #000;
  position: relative;
}
.step_location .row:not(:last-child):after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: var(--cl-bg-section5);
  top: 50%;
  left: 21.5px;
}
.step_location .number {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--cl-bg-section5);
  color: var(--cl-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: var(--ff-header);
  font-size: 32px;
  line-height: 1.3;
  padding-bottom: 13px;
  z-index: 1;
}

@media screen and (max-width: 880px) {
  .hotel__item .row2 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media screen and (max-width: 650px) {
  .hotel__item .row2 {
    padding-bottom: 30px;
  }
}
@media screen and (max-width: 480px) {
  .hotel__item .row2 {
    padding-top: 30px;
    padding-bottom: 15px;
  }
}/*# sourceMappingURL=coconutisland.css.map */