@charset "UTF-8";

/* 공통 CSS */
@keyframes vibe {
  25% {
    transform: rotate(2deg) scale(1.03);
  }

  50% {
    transform: rotate(-2deg) scale(1.03);
  }
}

@font-face {
  font-family: KATURI;
  src: url(../font/KATURI.woff);
}

* {
  outline: none;
  margin: 0;
  user-select: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

html {
	-webkit-text-size-adjust: 100%; /* Chrome, Safari, newer versions of Opera */
	-ms-text-size-adjust: 100%; /* IE */
	text-size-adjust: 100%; /* Modern browsers without prefixes */
  touch-action: none;
  width: 100%;
  height: 100%;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.blind {
  width: 1920px;
  height: 1009px;
}

.hide {
  display: none !important;
}

.hidden {
  opacity: 0;
  pointer-events: none !important;
}

.eNone {
  pointer-events: none;
}

* {
  font-family: KATURI;
  line-height: 1;
  font-size: 0;
}

body {
  /* opacity: 0; */
  user-select: none;
  overflow: hidden;
  /* transition: opacity .3s; */
  width: 100%;
  height: 100%;
}

main {
  position: absolute;
  transform-origin: 0 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
}

.dropObj {
  width: fit-content;
  height: fit-content;
  pointer-events: none;
  position: relative;
}

.dropObj>img {
  position: absolute;
  opacity: 0;
}

.dropObj>span,
.dragObj>span {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  text-align: center;
}

.dragObj>span {
  opacity: 1;
}

.dropObj>span>img,
.dragObj>span>img {
  height: 100%;
  padding: 15px 0;
}

.dropObj:not(.answer)>img:nth-of-type(1),
.dropObj.answer>img:nth-of-type(2) {
  position: relative;
  opacity: 1;
}

.dropObj:not(.answer)>span:nth-of-type(1),
.dropObj.answer>span:nth-of-type(2) {
  opacity: 1;
}

.dropObj.answer>span:nth-of-type(2) {
  transition: opacity 1s;
}

.dropObj:not(.answer)>span {
  color: #989797;
}

.dropObj.answer>span {
  color: #fff;
}

.dragObj {
  width: fit-content;
  height: fit-content;
  transform: translate(calc(var(--x)*1px), calc(var(--y)*1px));
  pointer-events: none;
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
}

.dragObj.hover {
  animation: vibe 0.8s ease-in-out;
}

.dropObj>*,
.dragObj>* {
  pointer-events: none;
}

.contents {
  position: relative;
  width: 1920px;
  height: 1080px;
}

.contents[data-step="1"] [data-step="1"],
.contents[data-step="2"] [data-step="2"],
.contents[data-step="3"] [data-step="3"],
.contents[data-step="4"] [data-step="4"],
.contents[data-step="5"] [data-step="5"],
.contents[data-step="6"] [data-step="6"],
.contents[data-step="7"] [data-step="7"] {
  pointer-events: auto;
}

.point {
  position: absolute;
  pointer-events: none;
}

.line,
.title,
.guideText,
.btnBox {
  position: absolute;
  margin: auto;
}

.guideText {
  font-size: 30px;
  width: fit-content;
  height: fit-content;
  color: #4D3426;
}

.guideText.hidden {
  transition: opacity 1s;
}

.btnBox {
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
}

.btnBox:not(.hidden) {
  transition: opacity 1s;
}

.btnBox button.hover {
  animation: vibe 0.8s ease-in-out;
}

.btnBox button>* {
  pointer-events: none;
}









/* 개별 CSS */
.line {
  inset: 185px 0 auto;
  padding-left: 185px;
}

.title {
  inset: 75px 0 auto 30px;
}

.guideText {
  inset: 770px 0 auto;
}

.btnBox {
  inset: 821px 0 auto;
}

.dropObj[data-step="1"] span {
  font-size: 40px;
  color: #fff;
  line-height: 55px;
  padding-bottom: 10px;
}

.dropObj[data-step="2"] span {
  font-size: 26px;
  line-height: 34px;
}

.dragObj span {
  font-size: 41px;
  color: #fff;
  line-height: 40px;
  line-height: 50px;
}

.dragObj[data-step="2"] span {
  font-size: 19px;
  line-height: 25px;
}

.dragBox .dragObj[data-step="2"]:nth-of-type(4) span {
  font-size: 46px;
}

.dragBox .dragObj[data-step="2"]:nth-of-type(5) span {
  font-size: 24px;
}

.dropBox1 {
  margin: auto;
  position: absolute;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  inset: 275px 0 auto 0;
  padding-right: 15px;
}

.dropBox1 .dropObj:first-child {
  margin-right: 208px;
}

.dropBox1 .dropObj:last-child {
  margin-left: 187px;
}

.dropBox2 {
  margin: auto;
  position: absolute;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  inset: 435px 0 auto 0;
  gap: 64px;
}

.dropBox2 .dropObj>span>img {
  padding: 0;
}

.dropBox2 div:nth-of-type(2),
.dropBox2 div:nth-of-type(3) div {
  display: flex;
}

.dropBox2>div:nth-of-type(1) {
  margin-left: 140px;
}

.dropBox2>div:nth-of-type(2) {
  gap: 24px;
  margin-left: 90px;
}

.dropBox2>div:nth-of-type(3)>div:nth-of-type(1) {
  gap: 125px;
  color: #fff;
  margin-bottom: 41px;
}

.dropBox2>div:nth-of-type(3)>div:nth-of-type(1) .dropObj[data-step="2"] span {
  color: #fff;
}

.dropBox2>div:nth-of-type(3) div:nth-of-type(2) {
  gap: 16px;
  align-items: flex-end;
}


.dragBox {
  margin: auto;
  position: absolute;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 830px 0 auto 0;
  gap: 26px;
}

.mt16 {
  margin-top: 16px;
}

.mr24 {
  margin-right: 24px;
}

.pb10 {
  padding-bottom: 10px;
}
.pb3 {
  padding-bottom: 3px;
}
/* 손가락 움직임 진행속도 경우에 따라 수정 */
[data-step="1"] .point {
  animation-duration: 1.5s;
}

[data-step="2"] .point {
  animation-duration: 1.9s;
}

/* [data-step="3"] .point {
  animation-duration: 1.4s;
} */