:root {
  --blue-01: #d3f0fe;
  --blue-02: #e3f5ff;
  --orange-01: #ff561d;
}

[x-cloak] {
  display: none;
}

html body {
  font-family: "Roboto", "Noto Sans HK", sans-serif;
  color: #333333;
}

html {
  scroll-behavior: smooth;
}

.text-heading {
  font-family: "GAMEDAY", "Noto Sans HK", sans-serif;
  letter-spacing: 0.1rem;
}

/**/
.tick-flip-card {
  line-height: 1.6;
}
.tick-label {
  font-size: 0.3em;
}
.tick-flip-panel {
  color: inherit !important;
}
.tick-flip {
  margin-left: 0;
  margin-right: 0;
}
.tick-flip-front {
  background: transparent linear-gradient(180deg, #f3f3f3 0%, #ffffff 100%) 0%
    0% no-repeat padding-box;
  box-shadow: none;
  border-radius: 8px;
  box-shadow: 0px 3px 6px #00000029;
}
.tick-flip-back {
  background: transparent linear-gradient(180deg, #f3f3f3 0%, #ffffff 100%) 0%
    0% no-repeat padding-box;
  box-shadow: none;
  border-radius: 8px;
  box-shadow: 0px 3px 6px #00000029;
}
.tick-flip-panel-back:after {
  display: none;
}
.tick-flip-shadow {
  box-shadow: none;
}

.swiper-slide-thumb-active {
  opacity: 1;
}

.popup-box-heading-shadow {
  /*box-shadow: 0px 3px 20px #0294DD45;*/
  box-shadow: 0px 10px 10px #0294dd45;
}
.popup-box-close-btn {
  box-shadow: 0px 3px 6px #00000029;
}

.list-decimal-brackets {
  list-style: none;
  counter-reset: list-counter;
}
.list-decimal-brackets > li {
  counter-increment: list-counter;
}
.list-decimal-brackets > li::before {
  content: counter(list-counter) ") ";
  margin-left: -1.8rem;
  width: 1.8rem;
  display: inline-block;
  text-align: right;
  padding-right: 0.3rem;
}
.list-decimal-brackets > li::marker {
  display: none;
  content: "";
}

.list-decimal-brackets > li > .list-decimal-brackets {
  list-style: none;
  counter-reset: sublist-counter;
  margin-left: 2rem !important;
}
.list-decimal-brackets > li > .list-decimal-brackets > li {
  counter-increment: sublist-counter;
}
.list-decimal-brackets > li > .list-decimal-brackets > li::before {
  content: counter(list-counter) "." counter(sublist-counter) ") ";
  margin-left: -3rem;
  width: 3rem;
  display: inline-block;
  text-align: right;
  padding-right: 0.3rem;
}
.list-decimal-brackets > li > .list-decimal-brackets > li::marker {
  display: none;
  content: "";
}

.list-lower-roman-brackets {
  list-style: none;
  counter-reset: roman;
}
.list-lower-roman-brackets > li {
  counter-increment: roman;
}
.list-lower-roman-brackets > li::before {
  content: counter(roman, lower-roman) ") ";
  margin-left: -1.8rem;
  width: 1.8rem;
  display: inline-block;
  text-align: right;
  padding-right: 0.3rem;
}
.list-lower-roman-brackets > li::marker {
  display: none;
  content: "";
}

.list-upper-alpha-brackets {
  list-style: none;
  counter-reset: alpha;
}
.list-upper-alpha-brackets > li {
  counter-increment: alpha;
}
.list-upper-alpha-brackets > li::before {
  content: counter(alpha, upper-alpha) ") ";
  margin-left: -1.8rem;
  width: 1.8rem;
  display: inline-block;
  text-align: right;
  padding-right: 0.3rem;
}
.list-upper-alpha-brackets > li::marker {
  display: none;
  content: "";
}

@media (max-width: 1023px) {
  .menu-icon-close {
    display: none;
  }

  .main-menu {
    visibility: hidden;
    transform: translate(-100%, -100%);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  body.main-menu-open {
    overflow: hidden;
    touch-action: none;
  }

  .main-menu-open .main-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .main-menu-open .menu-icon-open {
    display: none;
  }

  .main-menu-open .menu-icon-close {
    display: block;
  }

  .main-menu-closing .main-menu {
    opacity: 0;
  }

  .sub-menu-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
  }

  .sub-menu-toggle-open + .sub-menu-wrap {
    grid-template-rows: 1fr;
  }

  .arrow-mobile {
    transition: 0.2s transform;
  }

  .sub-menu-toggle-open .submenu-icon-opened {
    display: block;
  }

  .sub-menu-toggle-open .submenu-icon-closed {
    display: none;
  }
}