@layer reset, base, page, custom;
:root {
  --l-H-hero: 580px;
  --l-header: 80px;
  --l-header-: -80px;
  --l-header--mobile: 56px;
  --l-header--mobile-: -56px;
  --l-services-logo: 44px;
  --l-btnH: 36px;
  --l-h-sec-footer: 150px;
  --c-text: #535173;
  --c-heading: #1e1e1e;
  --c-nav: #494949;
  --c-brand-text: #8b8bac;
  --c-primary: #3b1376;
  --c-secondary: #1e3659;
  --c-hightlight: #ec4e00;
  --c-primary-start: #f0da98;
  --c-primary-stop: #cfab3b;
  --c-secondary-start: #ffdc23;
  --c-secondary-stop: #ffe972;
  --f-services-title: 18px;
  --f-services-title-lh: 20px;
  --f-services-title--ch: 13px;
  --f-services-title--ch-lh: 16px;
  --z-nav: 10;
  --z-hero: 8;
  --z-main: 9;
  --c-sdg1: #c74140;
  --c-sdg2: #cfa94d;
  --c-sdg3: #6b9e47;
  --c-sdg4: #aa3433;
  --c-sdg5: #df5330;
  --c-sdg6: #71b8e0;
  --c-sdg7: #edc843;
  --c-sdg8: #8d2c44;
  --c-sdg9: #df7538;
  --c-sdg10: #bf3767;
  --c-sdg11: #e6a441;
  --c-sdg12: #b28f40;
  --c-sdg13: #567c4b;
  --c-sdg14: #5794d5;
  --c-sdg15: #7fbc45;
  --c-sdg16: #3d669a;
  --c-sdg17: #2f4768;
  --c-zdg1: #a47903;
  --c-zdg2: #be9115;
  --c-zdg3: #d7aa2d;
}

:root {
  --l-inner: 1024px;
}

@keyframes slide-f-right {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-f-left {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slide-f-top {
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes reveal-up-20 {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@scope (.landing-page) {
  :scope {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--l-header));
  }
  .container {
    padding: 0;
    display: grid;
    grid-template-columns: 250px 1fr;
    z-index: var(--z-main);
  }
  @media only screen and (max-width: 860px) {
    .container {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }
  }
  .container-left {
    grid-column: 1/span 1;
  }
  @media only screen and (max-width: 860px) {
    .container-left {
      grid-column: 1/span 1;
    }
  }
  .container-right {
    grid-column: 2/span 1;
    margin: 20px 10px 0 50px;
  }
  @media only screen and (max-width: 860px) {
    .container-right {
      grid-column: 1/span 1;
      margin: 10px;
    }
  }
  .header {
    position: relative;
    margin-top: calc(44px + var(--l-header) - var(--l-H-hero));
    z-index: var(--z-main);
    pointer-events: none;
  }
  @media only screen and (max-width: 860px) {
    .header {
      margin-top: 0;
    }
  }
  .header .container-right {
    background: #fff;
    pointer-events: auto;
  }
  @media only screen and (max-width: 860px) {
    .header .container-right {
      margin-bottom: 0;
    }
  }
  .header:has(.image-block) + .content .content-aside {
    padding-top: 20px;
  }
  .content {
    flex: 1 0 auto;
    position: relative;
    height: 100%;
  }
  @media only screen and (max-width: 860px) {
    .content .container {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr auto;
    }
    .content .container-right {
      grid-row: 1/span 1;
    }
    .content .container-left {
      grid-row: 2/span 1;
    }
    .content .container-left .title,
    .content .container-left .menu {
      display: none;
    }
  }
  .content .content-aside {
    padding-top: calc(var(--l-H-hero) - var(--l-header) - 200px + 120px);
    position: relative;
    z-index: 99;
    height: 100%;
  }
  @media only screen and (max-width: 860px) {
    .content .content-aside {
      padding-top: 30px;
    }
  }
  @supports (animation-timeline: view(block)) {
    .content .content-aside {
      opacity: 0;
      animation: slide-f-top ease forwards;
      animation-timeline: view(block);
      animation-range: exit 19% contain 60%;
    }
  }
  .content .content-aside_inner {
    pointer-events: auto;
    position: sticky;
    padding: 0 0 0 10px;
    top: calc(var(--l-header) + 20px);
  }
  .content .content-aside_inner:before {
    content: "";
    position: absolute;
    inset: -30px 0 10px -40px;
    background: rgba(255, 255, 255, 0.8);
    filter: blur(40px);
    transform: scale(1.2);
    z-index: 1;
    pointer-events: none;
  }
  .content .content-aside .title {
    z-index: 3;
    position: relative;
  }
  .content .content-aside .nav {
    margin-block-start: 20px;
    padding-left: 0px;
    list-style: none;
    position: relative;
    z-index: 3;
  }
  .content .content-aside .nav-item.current a {
    padding-inline-start: 5px;
  }
  .content .content-aside .nav-item.current a:before {
    content: "";
    position: absolute;
    inset: 8px auto 8px 0;
    width: 2px;
    background: #3b1376;
  }
  .content .content-aside .nav-item.current a:hover:after {
    display: none;
  }
  .content .content-aside .nav-item__url {
    display: inline-block;
    padding: 8px 0;
    color: #1e3659;
    transition: 0.3s;
    border-radius: 3px;
    position: relative;
  }
  .content .content-aside .nav-item__url:after {
    content: "";
    position: absolute;
    inset: auto 100% 2px 0;
    height: 2px;
    background: #1e3659;
    opacity: 0;
    transition: 0.3s;
  }
  .content .content-aside .nav-item__url:hover:after {
    inset: auto 0 2px 0;
    opacity: 1;
  }
  .content:before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 300px;
    background: url(../images/page-bg-r.webp) repeat-y center/100% auto;
    mask: linear-gradient(to bottom, black 0, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
  }
  .content-body {
    padding: 20px;
    height: 100%;
  }
}
.aside-hot {
  position: relative;
  z-index: 3;
  counter-reset: hot;
}
.aside-hot .heading-left {
  color: #535173;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}
.aside-hot .heading-left:after {
  content: "";
  width: 60px;
  height: 1px;
  background: #3b1376;
  margin-inline-start: 6px;
}
.aside-hot .item {
  counter-increment: hot;
  padding-block: 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}
@media only screen and (max-width: 860px) {
  .aside-hot .item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
  }
}
.aside-hot .item:before {
  content: counter(hot);
  color: rgba(83, 81, 115, 0.3);
  font-size: 2.5rem;
  display: block;
  font-weight: 100;
}
@media only screen and (max-width: 860px) {
  .aside-hot .item:before {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
    padding: 0 20px;
  }
}
.aside-hot .item .url {
  display: block;
  color: #1e3659;
  font-size: 1rem;
  line-height: 180%;
}
@media only screen and (max-width: 860px) {
  .aside-hot .item .url {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
}
.aside-hot .item .url:hover {
  color: #333;
}
.aside-hot .item .date {
  font-size: 0.875rem;
  color: #1e3659;
  margin-block-end: 6px;
  opacity: 0.6;
}
@media only screen and (max-width: 860px) {
  .aside-hot .item .date {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
}

@scope (.landing-page .breadcrumbs) {
  :scope {
    padding: 20px 20px 5px;
  }
  @media only screen and (max-width: 678px) {
    :scope {
      display: none;
    }
  }
  .breadcrumb {
    display: flex;
    list-style: none;
  }
  .breadcrumb-item {
    padding-inline-start: 5px;
    font-size: 0.875rem;
    color: rgba(30, 54, 89, 0.7);
  }
  .breadcrumb-item:after {
    content: "/";
    padding-inline-start: 5px;
  }
  .breadcrumb-item .pathway {
    color: #3b1376;
  }
}
@scope (.landing-page .hero) {
  :scope {
    background-size: cover;
    background-position: center;
    z-index: var(--z-hero);
  }
  @media only screen and (max-width: 860px) {
    :scope {
      height: auto;
      padding-top: 0 !important;
    }
  }
  :scope:before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(15px);
  }
  .l-inner {
    position: relative;
    z-index: var(--z-hero);
    height: 100%;
  }
  .aside {
    grid-column: 1/span 1;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 0 60px 20px;
    padding-top: calc(var(--l-header) + 50px);
  }
  @media only screen and (max-width: 860px) {
    .aside {
      padding-top: calc(var(--l-header) + 15px);
      padding-bottom: 30px;
    }
  }
  @media only screen and (max-width: 768px) {
    .aside {
      display: block;
      padding: 70px 20px 30px;
    }
  }
  @media only screen and (max-width: 431px) {
    .aside {
      padding: 30px 20px;
    }
  }
  .aside > * {
    position: relative;
    z-index: 2;
  }
  .aside::before {
    content: "";
    position: absolute;
    inset: 0 0 0 calc((1024px - 100vw) / 2);
    background-color: #9593b2;
  }
  @media only screen and (max-width: 1024px) {
    .aside::before {
      inset: 0;
    }
  }
  .aside.indoor-play::before {
    background-color: #5fbc9a;
  }
  .aside.special-meal::before {
    background-color: #e06d3f;
  }
  .aside.old-clothes::before {
    background-color: #9c3f17;
  }
  .aside.guide-trip::before {
    background-color: #53b85b;
  }
  .aside.water-play::before {
    background-color: #53b6ca;
  }
  .aside.sea-play::before {
    background-color: #2589ab;
  }
  .aside.hand-made::before {
    background-color: #a88f3f;
  }
  .aside.extreme-play::before {
    background-color: #5030af;
  }
  .aside .page__content {
    color: #fff;
  }
  .aside .page__cate {
    font-size: 25px;
    font-weight: 500;
    padding-right: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  .aside .page__tags .tags {
    list-style-type: none;
    padding-top: 15px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
  }
  .aside .page__tags .tags .list-inline-item .btn-info {
    display: inline-flex;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.15);
  }
  .aside .page__type {
    font-size: 15px;
    font-weight: 500;
    padding-top: 15px;
  }
  @media only screen and (max-width: 431px) {
    .aside .page__type {
      display: none;
    }
  }
  .aside .page__location {
    font-size: 18px;
  }
  .aside .page__sidelists {
    padding: 20px 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 27px;
  }
  @media only screen and (max-width: 860px) {
    .aside .page__sidelists {
      flex-direction: row;
    }
  }
  @media only screen and (max-width: 431px) {
    .aside .page__sidelists {
      padding: 10px 0 0;
    }
  }
  .aside .journey__township, .aside .journey__location, .aside .journey__duration {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 43px;
    font-size: 17px;
  }
  .aside .journey__township::before, .aside .journey__location::before, .aside .journey__duration::before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 0;
  }
  .aside .journey__township::before {
    background: url(../images/ic_map_l_w.png) no-repeat center center/contain;
  }
  .aside .journey__location::before {
    background: url(../images/ic_store_l_w.png) no-repeat center center/contain;
  }
  .aside .journey__duration::before {
    background: url(../images/ic_clock_l_w.png) no-repeat center center/contain;
  }
}
@scope (.landing-page .content) {
  :scope {
    pointer-events: none;
    position: relative;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
  }
  :scope .container {
    flex: 1 1 100%;
  }
  :scope .container-right {
    background: #fff;
    pointer-events: auto;
    position: relative;
    z-index: 2;
    padding: 0 40px 40px;
    border-radius: 5px;
    box-shadow: 0 10px 25px rgba(83, 81, 115, 0.25);
    min-width: 250px;
  }
  @media only screen and (max-width: 860px) {
    :scope .container-right {
      margin-top: 10px;
      padding: 0 20px 30px;
    }
  }
  :scope .container-right .page__cover {
    background: url(../images/default_cover.png) no-repeat center/cover;
    border-radius: 5px;
    aspect-ratio: 2.5/1;
    overflow: hidden;
    transform: translateY(-25px);
  }
  :scope .container-right .page__cover img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }
  @media only screen and (max-width: 860px) {
    :scope .container-right .page__cover {
      transform: translateY(0);
      margin: 0 -20px;
      border-radius: 5px 5px 0 0;
    }
  }
  :scope .container-right .page__content {
    color: #535173;
    padding-top: 15px;
  }
  :scope .container-right .page__content p {
    margin: 0;
  }
  :scope .container-right .page__title {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.3;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(83, 81, 115, 0.1);
    margin-bottom: 20px;
  }
  :scope .container-right .page__inner {
    display: flex;
    flex-direction: column;
  }
  :scope .container-right .page__img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  :scope .container-right .page__img img {
    object-fit: cover;
    aspect-ratio: 3/2;
  }
  @media only screen and (max-width: 551px) {
    :scope .container-right .page__img {
      grid-template-columns: 1fr;
    }
  }
  :scope .container-right .page__intro {
    padding-top: 20px;
  }
  :scope .container-right .page__desc {
    padding: 25px 0;
  }
  :scope .container-right .page__desc .item {
    padding: 15px 0;
  }
  :scope .container-right .page__desc .item .sec-title {
    color: rgba(83, 81, 115, 0.7);
    font-weight: 400;
    font-size: 15px;
    line-height: 1;
    padding-bottom: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(83, 81, 115, 0.15);
  }
  :scope .container-right .page__desc.indoor-play .sec-title {
    color: #5fbc9a;
  }
  :scope .container-right .page__desc.special-meal .sec-title {
    color: #e06d3f;
  }
  :scope .container-right .page__desc.old-clothes .sec-title {
    color: #9c3f17;
  }
  :scope .container-right .page__desc.guide-trip .sec-title {
    color: #53b85b;
  }
  :scope .container-right .page__desc.water-play .sec-title {
    color: #53b6ca;
  }
  :scope .container-right .page__desc.sea-play .sec-title {
    color: #2589ab;
  }
  :scope .container-right .page__desc.hand-made .sec-title {
    color: #a88f3f;
  }
  :scope .container-right .page__desc.extreme-play .sec-title {
    color: #5030af;
  }
  :scope .container-right .page__register {
    margin-top: 15px;
    display: block;
    text-decoration: none;
    width: 100%;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    transition: transform 300ms, box-shadow 300ms;
  }
  :scope .container-right .page__register:hover {
    transform: translate(0, -1px);
  }
  :scope .container-right .page__register.indoor-play {
    background-color: #5fbc9a;
  }
  :scope .container-right .page__register.indoor-play:hover {
    box-shadow: 0 5px 10px rgba(95, 188, 154, 0.3);
  }
  :scope .container-right .page__register.special-meal {
    background-color: #e06d3f;
  }
  :scope .container-right .page__register.special-meal:hover {
    box-shadow: 0 5px 10px rgba(224, 109, 63, 0.3);
  }
  :scope .container-right .page__register.old-clothes {
    background-color: #9c3f17;
  }
  :scope .container-right .page__register.old-clothes:hover {
    box-shadow: 0 5px 10px rgba(156, 63, 23, 0.3);
  }
  :scope .container-right .page__register.guide-trip {
    background-color: #53b85b;
  }
  :scope .container-right .page__register.guide-trip:hover {
    box-shadow: 0 5px 10px rgba(83, 184, 91, 0.3);
  }
  :scope .container-right .page__register.water-play {
    background-color: #53b6ca;
  }
  :scope .container-right .page__register.water-play:hover {
    box-shadow: 0 5px 10px rgba(83, 182, 202, 0.3);
  }
  :scope .container-right .page__register.sea-play {
    background-color: #2589ab;
  }
  :scope .container-right .page__register.sea-play:hover {
    box-shadow: 0 5px 10px rgba(37, 137, 171, 0.3);
  }
  :scope .container-right .page__register.hand-made {
    background-color: #a88f3f;
  }
  :scope .container-right .page__register.hand-made:hover {
    box-shadow: 0 5px 10px rgba(168, 143, 63, 0.3);
  }
  :scope .container-right .page__register.extreme-play {
    background-color: #5030af;
  }
  :scope .container-right .page__register.extreme-play:hover {
    box-shadow: 0 5px 10px rgba(80, 48, 175, 0.3);
  }
  :scope .container-right .page__contact-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 20px;
    gap: 10px;
  }
  :scope .container-right .page__tele {
    font-size: 18px;
    padding-top: 15px;
  }
  :scope .container-right .page__tele a {
    text-decoration: none;
    color: #335fe5;
  }
  :scope .container-right .page__contact-item {
    display: inline-block;
    width: 50px;
    height: 50px;
    transition: transform 300ms, box-shadow 300ms;
    border-radius: 50%;
  }
  :scope .container-right .page__contact-item:hover {
    transform: translateY(-2px);
  }
  :scope .container-right .page__contact-item.line {
    background: url(../images/ic_line.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.line:hover {
    box-shadow: 0 5px 10px rgba(82, 198, 56, 0.3);
  }
  :scope .container-right .page__contact-item.wechat {
    background: url(../images/ic_wechat.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.wechat:hover {
    box-shadow: 0 5px 10px rgba(47, 193, 28, 0.3);
  }
  :scope .container-right .page__contact-item.fb {
    background: url(../images/ic_fb.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.fb:hover {
    box-shadow: 0 5px 10px rgba(51, 80, 209, 0.3);
  }
  :scope .container-right .page__contact-item.ig {
    background: url(../images/ic_ig.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.ig:hover {
    box-shadow: 0 5px 10px rgba(213, 61, 89, 0.3);
  }
  :scope .container-right .page__contact-item.tele {
    background: url(../images/ic_phone.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.tele:hover {
    box-shadow: 0 5px 10px rgba(82, 198, 56, 0.3);
  }
  :scope .container-right .page__contact-item.mail {
    background: url(../images/ic_email.png) no-repeat center/contain;
  }
  :scope .container-right .page__contact-item.mail:hover {
    box-shadow: 0 5px 10px rgba(89, 91, 101, 0.3);
  }
}

/*# sourceMappingURL=page.css.map */