:root {
  --color-main: #586ad9;
  --font-playfair: "Playfair Display", serif;
  --font-noto-serif-kr: "Noto Serif KR", serif;
}

html {
  /* font-size: 62.5%; */ /* 10px = 62.5% = 0.52084vw */
  font-size: 0.52084vw;
}

body {
  font-size: 1.6rem;
  font-size: calc(14px + 0.2rem);
  line-height: 1.5;
  color: #222;
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.color-point {
  color: var(--color-main);
}

.mark {
  line-height: 1;
  background: linear-gradient(
    to top,
    rgba(88, 106, 217, 0.2) 30%,
    transparent 30%
  );
}

/* bg container */
.bg-container {
  position: fixed;
  top: 0;
  left: 0;

  width: 100svw;
  height: calc(var(--vh, 1vh) * 100);

  z-index: -1;
  overflow: hidden;
}

.bg__video {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  z-index: -1;

  transform: scale(0.5);
  transform-origin: center center;

  opacity: 0;

  transition: opacity 0.5s ease-out;
}

.bg__video.loaded {
  opacity: 1;
}

.bg__video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: auto;
  height: calc(var(--vh, 1vh) * 100);
  object-fit: contain;
}

.bg__text {
  --stop: 100%;

  opacity: 0;

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

.bg__text.core-value-text .text {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;
  background: url("/img/vision/stack_section_bg.png") no-repeat 50% 50% / cover;

  mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0.8) var(--stop),
    rgba(0, 0, 0, 0.03) 100%
  );
}

.block-500 {
  display: none;
}

.none-500 {
  display: block;
}

#wacusVision {
  width: 100vw;
  overflow-x: hidden;
}

/* 반응형 */

@media (max-width: 500px) {
  .block-500 {
    display: block;
  }

  .none-500 {
    display: none;
  }
}