:root {
  --home-header-height: 44rem;
  --footer-height: 56rem;
  --footer-bottom-offset: 30rem;
  --footer-safe-gap: 22rem;
  --footer-safe-bottom: calc(
    var(--footer-bottom-offset) + var(--footer-height) + var(--footer-safe-gap)
  );
  --main-bg: rgb(21, 23, 36);
  --second-btn-color: rgb(58, 58, 70);
  --footer-color: black;
  --mask-dark: #000000bb;
  --mask-light: rgba(0, 0, 0, 0.45);
  --second-text-color: #999;
  --mask-white: rgba(0, 0, 0, 0.4);
  --second-btn-color-tran: rgba(58, 58, 70, 0.4);
  --primary-btn-color: #fe2c55;
}

* {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  background: var(--main-bg);
  font-size: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#app {
  height: 100%;
  width: 100%;
  position: relative;
  font-size: 14rem;
}

.slide {
  touch-action: none;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;

  .slide-list {
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
  }

  &.vertical {
    height: 100%;
  }
}

.flex-direction-column {
  flex-direction: column;
}

.global-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 12rem 20rem;
  border-radius: 8rem;
  font-size: 14rem;
  z-index: 9999;
}
