@charset "utf-8";

/* font-family: 'Montserrat', 'Noto Sans KR', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500&family=Noto+Sans+KR:wght@400;700&display=swap');

/* 변수선언 */
@import url(./variable.css);

/* h1 글자 이벤트 */
.split-lines {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.split-lines .line-mask {
  overflow: hidden;
  position: relative;
  display: block;
}

.split-lines .line-mask .line {
  transform-origin: top left;
  transform: rotate(0deg);
}

/* 위치에 따른 색상변화 */

body.active {
  color: #000;
  background-color: var(--color-white);
  transition: 0.5s;
}

body.none-active {
  color: #fff;
  background-color: var(--color-black);
  transition: 0.5s;
}

/* 마우스 커서 스타일 */

body,
a {
  cursor: none;
}

.cursor-dot {
  border: 2px solid var(--color-white);
  color: var(--color-white);
  font-size: var(--font-size-10);
  border-radius: 120px;
  width: 6vw;
  height: 7vw;
  text-align: center;
  line-height: 7vw;
  text-transform: uppercase;
  font-weight: 700;
  position: fixed;
  top: 0;
  left: 0;

  mix-blend-mode: difference;

  display: none;
  z-index: 999999;
}

.cursor-dot.show {
  display: block;
}

.w-embed {
  width: 1vw;
  height: 1vw;
  background-color: var(--color-white);
  border-radius: 50%;

  position: fixed;
  top: 0;
  left: 0;

  mix-blend-mode: difference;
}

.w-embed.show {
  display: none;
}

/* 책과 제목 글자 이벤트 */

/* key-wrapper1 영역 글자 이벤트 */
.split-lines-k {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.split-lines-k .line-mask {
  overflow: hidden;
  position: relative;
  display: block;
}

.split-lines-k .line-mask .line {
  transform-origin: top left;
  transform: rotate(0deg);
}

/* footer 영역 글자 이벤트 */
.split-lines-f {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.split-lines-f .line-mask {
  overflow: hidden;
  position: relative;
  display: block;
}

.split-lines-f .line-mask .line {
  transform-origin: top left;
  transform: rotate(0deg);
}