@keyframes mcsog-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mcsog-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mcsog-slide-up {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--mcsog-sp-16), 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mcsog-slide-down {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(-1 * var(--mcsog-sp-16)), 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mcsog-slide-in-left {
  0% {
    opacity: 0;
    transform: translate3d(calc(-1 * var(--mcsog-sp-16)), 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mcsog-slide-in-right {
  0% {
    opacity: 0;
    transform: translate3d(var(--mcsog-sp-16), 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mcsog-scale-in {
  0% {
    opacity: 0;
    transform: scale(.96);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mcsog-wipe-up {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes mcsog-wipe-out {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes mcsog-reveal-x {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes mcsog-scanline {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes mcsog-stagger-in {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--mcsog-sp-12), 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mcsog-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@keyframes mcsog-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes mcsog-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .55;
  }
}

@keyframes mcsog-toast-in {
  0% {
    opacity: 0;
    transform: translate3d(var(--mcsog-sp-16), 0, 0) scale(.98);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mcsog-modal-in {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--mcsog-sp-12), 0) scale(.97);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mcsog-scrim-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes mcsog-fill-bar {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

.mcsog-modal {
  animation: mcsog-modal-in var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-modal__scrim {
  animation: mcsog-scrim-in var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-skeleton {
  animation: mcsog-shimmer 1400ms linear infinite;
}


.mcsog-is-loading .mcsog-icon {
  animation: mcsog-spin 900ms linear infinite;
}

.mcsog-view.mcsog-is-entering {
  animation: mcsog-slide-up var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-view.mcsog-is-leaving {
  animation: mcsog-fade-out var(--mcsog-dur-fast) var(--mcsog-ease-out) both;
}

.mcsog-view.mcsog-is-forward {
  animation-name: mcsog-slide-in-right;
}

.mcsog-view.mcsog-is-back {
  animation-name: mcsog-slide-in-left;
}

.mcsog-stagger > * {
  animation: mcsog-stagger-in var(--mcsog-dur-slow) var(--mcsog-ease-out) both;
  animation-delay: var(--mcsog-stagger, 0ms);
}

.mcsog-deco-grid {
  animation: mcsog-fade-in var(--mcsog-dur-slow) var(--mcsog-ease-out) both;
}

.mcsog-stat__num {
  transition: transform var(--mcsog-dur-base) var(--mcsog-ease-out);
}

.mcsog-stat:hover .mcsog-stat__num {
  transform: translate3d(0, calc(-1 * var(--mcsog-sp-2)), 0);
}

.mcsog-badge,
.mcsog-tag {
  transition: background-color var(--mcsog-dur-fast) var(--mcsog-ease-out), border-color var(--mcsog-dur-fast) var(--mcsog-ease-out), color var(--mcsog-dur-fast) var(--mcsog-ease-out);
}

.mcsog-view.mcsog-is-enter {
  animation: mcsog-slide-up var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-view.mcsog-is-leave {
  animation: mcsog-fade-out var(--mcsog-dur-fast) var(--mcsog-ease-out) both;
}

.mcsog-view.mcsog-is-forward {
  animation: mcsog-slide-in-right var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-view.mcsog-is-back {
  animation: mcsog-slide-in-left var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-is-reduced-motion *,
.mcsog-is-reduced-motion *::before,
.mcsog-is-reduced-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

.mcsog-is-reduced-motion .mcsog-timeline__item:hover {
  transform: none !important;
}

.mcsog-is-reduced-motion .mcsog-timeline__item:hover .mcsog-timeline__dot {
  transform: translate(-50%, -50%) !important;
}

@media (prefers-reduced-motion: reduce) {

  

  

  .mcsog-card--hover:hover,
  .mcsog-quick-nav__item:hover,
  .mcsog-timeline__item:hover,
  .mcsog-btn:active,
  .mcsog-icon-btn:active,
  .mcsog-download-btn:active {
    transform: none !important;
  }

  .mcsog-timeline__item:hover .mcsog-timeline__dot {
    transform: translate(-50%, -50%) !important;
  }

  .mcsog-skeleton {
    animation: none !important;
    background-image: none;
  }

  .mcsog-nav-group__toggle-icon {
    transition: none !important;
  }

  .mcsog-nav-group__body,
  .mcsog-nav-group__body > .mcsog-nav-group__list {
    transition: none !important;
  }
}

.mcsog-toast.mcsog-is-show {
  animation: mcsog-toast-in var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-toast.mcsog-is-leaving {
  animation: mcsog-toast-out var(--mcsog-dur-fast) ease-in both;
}

.mcsog-announce.mcsog-is-show .mcsog-announce__card {
  animation: mcsog-announce-in var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-announce.mcsog-is-show .mcsog-announce__scrim {
  animation: mcsog-scrim-in var(--mcsog-dur-base) var(--mcsog-ease-out) both;
}

.mcsog-announce.mcsog-is-leaving .mcsog-announce__card {
  animation: mcsog-announce-out var(--mcsog-dur-fast) ease-in both;
}

@keyframes mcsog-toast-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--mcsog-sp-16), 0, 0) scale(.98);
  }
}

@keyframes mcsog-announce-in {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--mcsog-sp-16), 0) scale(.96);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes mcsog-announce-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, var(--mcsog-sp-8), 0) scale(.98);
  }
}

.mcsog-route-progress {
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.mcsog-route-progress.mcsog-is-active {
  opacity: 1;
}

.mcsog-route-progress__fill {
  width: 40%;
  animation: mcsog-route-sweep 900ms var(--mcsog-ease-inout) infinite;
}

.mcsog-route-progress.mcsog-is-active .mcsog-route-progress__fill {
  animation-duration: 620ms;
}

.mcsog-route-progress.mcsog-is-done .mcsog-route-progress__fill {
  width: 100%;
  animation: none;
  transform: none;
  transition: width 180ms ease-out;
}

@keyframes mcsog-route-sweep {
  0% {
    transform: translate3d(-120%, 0, 0);
  }

  100% {
    transform: translate3d(260%, 0, 0);
  }
}

.mcsog-route-steady .mcsog-view,
.mcsog-view.mcsog-is-entering,
.mcsog-view.mcsog-is-leaving,
.mcsog-view.mcsog-is-forward,
.mcsog-view.mcsog-is-back,
.mcsog-view.mcsog-is-enter,
.mcsog-view.mcsog-is-leave {
  animation: none;
  transform: none;
  opacity: 1;
}