@charset "UTF-8";
/* display */
/* breakpoint */
/* breakpoint : content */
@keyframes fadeup-motion {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes letter-motion {
  0% {
    letter-spacing: 0.07em;
    opacity: 0;
  }
  100% {
    letter-spacing: -0.04em;
    opacity: 1;
  }
}
@keyframes fadedown-motion {
  0% {
    height: 0%;
    opacity: 0;
  }
  100% {
    height: 100%;
    opacity: 1;
  }
}
@keyframes fadedown-motion2 {
  0% {
    width: 0%;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}
/* down 애니메이션 공통 */
[data-ob] {
  position: relative;
  overflow: hidden;
  opacity: 0;
}

[data-ob].show {
  opacity: 1;
}

[data-ob] > .ob-box {
  content: "";
  display: block;
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-color: #fff;
  transition: transform 2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 배경색 등의 수정은 따로 css 줘야함 */
[data-ob].show > .ob-box {
  transform: translateY(100%);
}

/* 기본값 */
[data-ob=down].show > .ob-box {
  transform: translateY(100%);
}

[data-ob=up].show > .ob-box {
  transform: translateY(-100%);
}

[data-ob=left].show > .ob-box {
  transform: translateX(-100%);
}

[data-ob=right].show > .ob-box {
  transform: translateX(100%);
}/*# sourceMappingURL=style_b01.css.map */