@import url("https://corecms.mqdc.com/assets/2741f9a8-1be9-4c3c-9433-7074ea377f61&display=swap");
@import url("https://corecms.mqdc.com/assets/1c5c2757-9d56-4863-9e08-0c3362691968&display=swap");

:root {
  --softblue: #3ea8b8;
  --lightblue: #ebf4fa;
  --darkgray: #56585d;
  --lightgray: #f0f0f0;
  --gray: #919499;
  --dimgray: #c0c0c0;
  --softwhite: #fafafa;
  --teal: #2c5c5d;
  --lightteal: #e1f6f9;
  --red: #e04c31;
  --mt-shadow-color: rgba(0, 0, 0, 0.102);
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: "Gotham", "db_helvethaica_x", sans-serif;
  font-weight: 400;
  color: var(--darkgray);
  margin: 0;
  height: 100%;
}

a {
  transition: 0.5s;
  outline: none;
  text-decoration: none;
  color: var(--softblue);
  display: inline-block;
  cursor: pointer;
}

a:hover {
  color: var(--teal);
}

a.disable {
  cursor: default;
  pointer-events: none;
}

button {
  border: 0;
  cursor: pointer;
}

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

input {
  border: 0;
  outline: none;
  height: 3.3em;
  transition: 0.3s;
}

::placeholder {
  opacity: 0.63;
}

.swiper {
  --swiper-theme-color: #3ea8b8;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}

.swiper-pagination-bullet {
  transition: 0.5s;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 1rem;
  transition-delay: 0.2s;
  --swiper-pagination-bullet-border-radius: 3rem;
}

/* Common Begin */
.icon-user {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.999 41.999"><path d="M23.5,2.5a21,21,0,1,0,21,21A21.023,21.023,0,0,0,23.5,2.5Zm0,6.927a8.444,8.444,0,1,1-8.444,8.444A8.449,8.449,0,0,1,23.5,9.427Zm0,33A18.882,18.882,0,0,1,9.228,35.908l.51-1.7a8.448,8.448,0,0,1,8.088-6.018H29.173a8.448,8.448,0,0,1,8.088,6.018l.51,1.7A18.882,18.882,0,0,1,23.5,42.425Z" transform="translate(-2.5 -2.5)"/></svg>')
    no-repeat center / contain;
}

.icon-all {
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41.999" height="41.999" viewBox="0 0 41.999 41.999"><g transform="translate(-3 -3)"><path d="M17.538,22.384H7.846A4.846,4.846,0,0,1,3,17.538V7.846A4.846,4.846,0,0,1,7.846,3h9.692a4.846,4.846,0,0,1,4.846,4.846v9.692A4.846,4.846,0,0,1,17.538,22.384ZM7.846,6.231A1.615,1.615,0,0,0,6.231,7.846v9.692a1.615,1.615,0,0,0,1.615,1.615h9.692a1.615,1.615,0,0,0,1.615-1.615V7.846a1.615,1.615,0,0,0-1.615-1.615Z" transform="translate(0 0)"/><path d="M31.538,22.384H21.846A4.846,4.846,0,0,1,17,17.538V7.846A4.846,4.846,0,0,1,21.846,3h9.692a4.846,4.846,0,0,1,4.846,4.846v9.692A4.846,4.846,0,0,1,31.538,22.384ZM21.846,6.231a1.615,1.615,0,0,0-1.615,1.615v9.692a1.615,1.615,0,0,0,1.615,1.615h9.692a1.615,1.615,0,0,0,1.615-1.615V7.846a1.615,1.615,0,0,0-1.615-1.615Z" transform="translate(8.615 0)"/><path d="M17.538,36.384H7.846A4.846,4.846,0,0,1,3,31.538V21.846A4.846,4.846,0,0,1,7.846,17h9.692a4.846,4.846,0,0,1,4.846,4.846v9.692A4.846,4.846,0,0,1,17.538,36.384ZM7.846,20.231a1.615,1.615,0,0,0-1.615,1.615v9.692a1.615,1.615,0,0,0,1.615,1.615h9.692a1.615,1.615,0,0,0,1.615-1.615V21.846a1.615,1.615,0,0,0-1.615-1.615Z" transform="translate(0 8.615)"/><path d="M26.692,36.384a9.692,9.692,0,1,1,9.692-9.692A9.692,9.692,0,0,1,26.692,36.384Zm0-16.153a6.461,6.461,0,1,0,6.461,6.461A6.461,6.461,0,0,0,26.692,20.231Z" transform="translate(8.615 8.615)"/></g></svg>')
    no-repeat center / 60% auto;
  background-color: var(--softblue);
  transition: 0.5s;
}

.btn-tag {
  border-radius: 3rem;
  cursor: pointer;
  background-color: #fff;
  transition: 0.3s;
  color: var(--darkgray);
  font-size: 0.875em;
}

.btn-tag:hover {
  color: var(--softblue);
}

.btn-tag.active {
  background-color: var(--softblue);
  color: #fff;
}

.btn-main {
  text-align: center;
  color: #fff;
  transition: 0.3s;
  background: linear-gradient(180deg, #2b5c5d 20%, #18acc3 50%, #0663a2 100%)
    left bottom / auto 200%;
  border-radius: 3rem;
}

.btn-main:hover {
  background-position: 0 0;
  background-size: auto 400%;
  color: #fff;
}

.btn-main:disabled {
  background: var(--dimgray);
  color: #fff;
}

.btn-default {
  transition: 0.3s;
  width: auto;
  border: 1px solid var(--softblue);
  color: var(--softblue);
  border-radius: 3rem;
  background-color: #fff;
}

.btn-default:hover {
  color: var(--softblue);
  background-color: var(--lightteal);
}

.btn-default:disabled {
  border-color: var(--dimgray);
  color: var(--dimgray);
}

.btn-sm {
  padding: 0.3em 1em;
}

.btn-md {
  padding: 0.44em 1.5em;
  max-width: 8em;
}

.btn-lg {
  padding: 0.8em 1em;
  max-width: 18em;
}

@media screen and (min-width: 992px) {
  .btn-md {
    padding-top: 0.68em;
    padding-bottom: 0.68em;
    max-width: 11em;
  }
}
/* Common End */

/* Common component - Lang Begin */
.mt-lang a:not(.active) {
  color: var(--dimgray);
}

.mt-lang a:hover {
  color: var(--teal);
}

.mt-lang a.active {
  font-weight: 500;
  color: var(--softblue);
}
/* Common component - Lang End */

/* Common component - Nav underline Begin */
.mt-nav-underline {
  position: relative;
}

.mt-nav-underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--softblue);
  border-radius: 3rem;
  height: 0.3em;
  left: var(--mt-nav-underline-left);
  width: var(--mt-nav-underline-width);
  transition: 0.5s;
}

.mt-nav-underline .mt-nav-item {
  color: var(--darkgray);
  padding: 1rem 0;
  cursor: pointer;
  transition: 0.5s;
}

.mt-nav-underline .mt-nav-item:focus,
.mt-nav-underline .mt-nav-item:hover {
  color: var(--softblue);
}

.mt-nav-underline .mt-nav-item.active {
  font-weight: 500;
  color: var(--softblue);
}
/* Common component - Nav underline End */

/* Common component - Card box Begin */
a.card-box {
  color: var(--darkgray);
}

.card-box.disable {
  color: var(--gray) !important;
  cursor: default;
  pointer-events: none;
}

.card-box.disable .image::after {
  content: "";
  position: absolute;
  z-index: 1;
  background-color: var(--gray);
  opacity: 0.8;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.card-box .image {
  font-size: 0.8em;
  color: var(--dimgray);
}

.card-box .info {
  container-type: inline-size;
}

.card-box .info .title {
  font-size: min(10cqw, 1.1rem);
}

.card-box .info .detail {
  font-size: min(8.3cqw, 0.9rem);
}
/* Common component - Card box End */

/* Common component - Circle Begin */
.mt-circle {
  background-color: #fff;
  transition: 0.5s;
  width: 3.25em;
  padding: 0.3rem;
}

.mt-circle-md,
.mt-size-md .mt-circle {
  background-color: #fff;
  transition: 0.5s;
  width: 6.4em;
  padding: 0.5rem;
}

.mt-circle img,
.mt-circle-md img {
  object-fit: contain;
  background-color: #eeeeee;
}

.mt-circle.mt-shadow:hover,
.mt-circle-md.mt-shadow:hover {
  --mt-shadow-color: rgba(62, 168, 184, 0.7);
}

.mt-circle-hover:hover {
  background-color: var(--softblue);
}

.mt-circle-hover .mt-bg-default {
  background: transparent;
}

.mt-circle-hover:hover .icon-all {
  background-color: #fff;
}

@media screen and (min-width: 768px) {
  .mt-circle {
    width: 5em;
    padding: 0.5rem;
  }

  .mt-circle-md,
  .mt-size-md .mt-circle {
    width: 10.3em;
    padding: 1rem;
  }
}
/* Common component - Circle End */

/* Utility Begin */
.mt-text-darkgray {
  color: var(--darkgray);
}

.mt-text-gray {
  color: var(--gray);
}

.mt-text-softblue {
  color: var(--softblue);
}

.mt-text-red {
  color: var(--red);
}

.mt-text-gradient-blue {
  background-image: linear-gradient(#18acc3, #0663a2);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.mt-bg-softwhite {
  background-color: var(--softwhite);
}

.mt-bg-lighgray {
  background-color: var(--lightgray);
}

.mt-bg-softblue {
  background-color: var(--softblue);
}

.mt-bg-lightblue {
  background-color: var(--lightblue);
}

.mt-bg-gradient-lightblue {
  background: linear-gradient(
    180deg,
    #bce0ed 0%,
    #ebf8fb 7%,
    #f5feff 16%,
    #fff 31%,
    #f5feff 66%,
    #bce0ed 100%
  );
}

.mt-bg-gradient-blue {
  background: linear-gradient(180deg, #18acc3 0%, #0663a2 100%) 0 0;
}

.mt-bg-default {
  background-color: var(--dimgray);
}

.mt-bg-default-mqdc {
  background: var(--dimgray) url("https://mqdc.com/images/mqdc-white.webp")
    no-repeat center / min(25%, 10rem) auto;
}

.mt-shadow {
  box-shadow: 0 0 0.4rem var(--mt-shadow-color);
}

.mt-shadow-md {
  box-shadow: 0 0 0.6rem var(--mt-shadow-color);
}

.mt-fw-med {
  font-weight: 500;
}

.mt-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.mt-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
}

.mt-nodata {
  min-height: 10em;
}

.mt-modal-height {
  min-height: 22em;
}

@media screen and (min-width: 576px) {
  .mt-px-sm-2 {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
  }
}

@media screen and (min-width: 992px) {
  .container-fluid.mt-bg-gradient-lightblue {
    background-color: #fff;
    background-image: linear-gradient(
        180deg,
        #bce0ed 0%,
        #ebf8fb 7%,
        #f5feff 16%,
        transparent 31%
      ),
      linear-gradient(180deg, transparent 31%, #f5feff 66%, #bce0ed 100%);
    background-position: left top, left bottom;
  }

  .mt-bg-lg-white-shadow {
    background-color: #fff;
    box-shadow: 0 0 0.4rem var(--mt-shadow-color);
  }
}

@media screen and (min-width: 1400px) {
  .mt-row-cols-xxl-7 > * {
    flex: 0 0 auto;
    width: 14.28%;
  }
}

.action-slide-in-right.active {
  animation: action-slide-in-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes action-slide-in-right {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* Utility End */
/* Only Web Begin */
.mt-top-3 {
  top: 3rem;
}

@media screen and (min-width: 992px) {
  .mt-top-3 {
    top: 7.2rem;
  }
}
/* Only Web End */

/* Header Begin */
header {
  padding-top: 6.5em;
}

header .top-bar {
  height: 3em;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}

header .bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 3em;
  height: 3.5em;
  z-index: 2;
}

header.freeze .top-bar {
  position: fixed;
  height: 3em;
  animation: action-slide-down 0.5s forwards;
  box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.102);
}

header.freeze .bottom-bar {
  position: fixed;
  top: 3em;
  animation: action-slide-down 0.5s forwards;
  box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.102);
}

header .mt-nav-underline .mt-nav-item {
  color: #fff;
  position: relative;
}

header .mt-nav-underline .mt-nav-item:hover,
header .mt-nav-underline .mt-nav-item:focus {
  text-shadow: 0 0 0.2em var(--softblue), 0 0 0.3em #fff;
  color: #fff;
}

header .mt-nav-underline .mt-nav-item.active {
  color: #fff;
  text-shadow: none;
}

header .mt-nav-underline .mt-nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
  border-radius: 3rem;
  height: 0.3em;
  left: 0;
  right: 0;
  transition: 0.5s;
}

header .btn-user {
  background-color: #fff;
  border-radius: 3rem;
  border: 1px solid var(--softblue);
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  max-width: 25em;
  padding: 0.3em 0.6em 0.3em 0.3em;
  transition: 0.5s;
  width: 7.5em;
}

header .btn-user:hover {
  background-color: var(--lightteal);
}

header .btn-user .rounded-circle {
  width: 1.5em;
  flex: 0 0 auto;
}

header .btn-user .text-truncate {
  display: block;
  flex: 1;
}

header .btn-user .icon-user {
  background-color: var(--softblue);
}

@media screen and (min-width: 768px) {
  header .btn-user .rounded-circle {
    width: 2em;
  }

  header .btn-user {
    width: auto;
  }
}

@media screen and (min-width: 992px) {
  header {
    padding-top: 8.5em;
  }

  header .top-bar {
    height: 5em;
  }

  header .bottom-bar {
    top: 5em;
  }

  header .btn-user {
    width: auto;
  }
}

@keyframes action-slide-down {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}
/* Header End */
/* Only Web - Header Begin */
header .btn-user .login-text::before {
  content: "Login";
}

@media screen and (min-width: 768px) {
  header .btn-user .login-text::before {
    content: "Connect with MQDC Membership";
  }
}

/* Only Web - Header End */

/* Search section Begin */
.search-input + .fa-magnifying-glass {
  transition: 0.3s;
}

.search-input:focus {
  background-color: #fff;
  --mt-shadow-color: rgba(62, 168, 184, 0.7);
}

.search-input:focus + .fa-magnifying-glass {
  color: var(--softblue);
}
/* Search section End */

/* Member Special section Begin */
[data-section="member-special"] .swiper {
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.9;
}
/* Member Special section End */

.highlight-brand-wrapper {
  padding-left: 7.3em;
  position: relative;
  overflow: hidden;
  margin-right: -1em;
}

.highlight-brand-wrapper .mt-circle-hover {
  position: absolute;
  left: 0.3em;
  top: 0.3em;
  z-index: 2;
}

@media screen and (min-width: 576px) {
  .highlight-brand-wrapper {
    --container-width: 534px;
    margin-right: calc((100vw - var(--container-width)) / 2 * -1);
  }
}

@media screen and (min-width: 768px) {
  .highlight-brand-wrapper {
    padding-left: 11.3em;
    --container-width: 714px;
  }
}

@media screen and (min-width: 992px) {
  .highlight-brand-wrapper {
    --container-width: 954px;
  }
}

@media screen and (min-width: 1200px) {
  .highlight-brand-wrapper {
    --container-width: 1134px;
  }
}

@media screen and (min-width: 1400px) {
  .highlight-brand-wrapper {
    --container-width: 1314px;
  }
}

/* Member Begin */
@media screen and (min-width: 992px) {
  [data-section="member"] .mt-bg-lg-white-shadow {
    min-height: 70vh;
  }
}
/* Member End */

/* Countdown box Begin */
.countdown-box {
  container-type: inline-size;
  justify-content: end;
  --bs-gutter-x: 1rem;
}

.countdown-box li {
  position: relative;
  max-width: min(33.3333%, 34cqw);
  margin-bottom: 0.2rem;
  min-width: fit-content;
}

.countdown-box li .number {
  font-weight: 500;
  font-size: min(1.2em, 10cqw);
}

.countdown-box li .unit {
  font-size: min(1em, 3cqw);
}

.countdown-box li:not(:last-child)::after {
  content: ":";
  position: absolute;
  right: -0.2rem;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (min-width: 350px) {
  .countdown-box li {
    max-width: min(33.3333%, 24cqw);
  }
}

@media screen and (min-width: 576px) {
  .countdown-box li {
    max-width: min(33.3333%, 26cqw);
  }
}
/* Countdown box End */

/* Coupon Detail Begin */
[data-section="coupon-detail"] .btn-fix-bottom {
  bottom: 1.5rem;
  position: fixed;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
}

[data-section="coupon-detail"] .btn-fix-bottom .btn-main {
  width: 100%;
  max-width: none;
}

@media screen and (min-width: 768px) {
  [data-section="coupon-detail"] .btn-fix-bottom {
    max-width: 23em;
  }
}

@media screen and (min-width: 992px) {
  [data-section="coupon-detail"] .scroll-box {
    position: absolute;
    left: 1rem;
    right: 1rem;
    border-top-right-radius: 1rem;
    overflow: hidden;
  }

  [data-section="coupon-detail"] .scroll-content {
    overflow-y: auto;
  }

  [data-section="coupon-detail"] .btn-fix-bottom {
    position: static;
    transform: none;
    max-width: none;
  }

  [data-section="coupon-detail"] .btn-fix-bottom .btn-main {
    max-width: 18em;
  }
}
/* Coupon Detail End */

/* Only Web - member Begin */
[data-section="member"] .dropdown-toggle {
  max-width: 100%;
  padding-left: 2.8rem;
  display: inline-flex;
  align-items: center;
  position: relative;
}

[data-section="member"] .dropdown-toggle .rounded-circle {
  display: block;
  aspect-ratio: 1/1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

[data-section="member"] .dropdown-toggle .text-truncate {
  max-width: 100%;
  margin-right: 0.5em;
}

[data-section="member"] .dropdown-toggle::after {
  transition: 0.3s;
}

[data-section="member"] .dropdown-toggle.show::after {
  transform: rotate(180deg);
}

[data-section="member"] .dropdown-item {
  --bs-dropdown-link-hover-bg: var(--softblue);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-active-bg: var(--lightteal);
  --bs-dropdown-link-active-color: var(--softblue);
}
/* Only Web - member End */

/* Modal Begin */
.mt-modal .inner {
  max-width: 33rem;
  margin: 0 auto;
  width: 100%;
}

.mt-modal .scroll-content {
  overflow-y: auto;
}

.mt-modal .redeem-step {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.8s;
  width: 0;
}

.mt-modal .redeem-step.active {
  opacity: 1;
  height: auto;
  width: 100%;
}

.mt-modal .mt-nav-underline .mt-nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--softblue);
  border-radius: 3rem;
  height: 0.3em;
  left: 0;
  right: 0;
  transition: 0.5s;
}
/* Modal End */
/* Only Web - Modal Begin */
.mt-modal .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.mt-modal .modal-content {
  border-radius: 1rem;
}
#redeem-step-1 {
  text-align: center;
}
/* Only Web - Modal End */