@charset "UTF-8";

/* 공통 CSS */
* {
  outline: none;
  margin: 0;
  -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;
}

.hide {
  display: none !important;
}

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

.eNone {
  pointer-events: none;
}

.blind {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

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

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

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;
}

.topArea {
  width: 100%;
  height: 80px;
  background-color: #488AE1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

.topArea>p {
  font-size: 34px;
  font-family: NSNEB;
  color: #fff;
}

.tabList {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.tabList>li {
  width: 48px;
  height: 48px;
  color: #888;
  font-family: 'KATURI';
  font-size: 32px;
  background-color: #E1E1E1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tabList>li.clear {
  background-color: #fff;
  color: #FFBD65;
  box-shadow: inset 0 0 0 4px #FFBD65;
}

[data-step="1"] .tabList>li:nth-of-type(1),
[data-step="2"] .tabList>li:nth-of-type(2),
[data-step="3"] .tabList>li:nth-of-type(3),
[data-step="4"] .tabList>li:nth-of-type(4),
[data-step="5"] .tabList>li:nth-of-type(5) {
  color: #fff;
  background-color: #F4AD4D;
  pointer-events: none;
}

.bottomArea {
  width: 1840px;
  height: 920px;
  /* border: 1px solid #ADCDE7; */
  box-shadow: -8px 0 12px 0 rgba(0, 0, 0, 0.2), 8px 8px 12px 0 rgba(0, 0, 0, 0.2);
  border-radius: 40px;
  background-color: #fff;
  margin: 33px auto 0;
  overflow: hidden;
}

.bottomArea .step {}


.returnPopup {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  background-color: rgba(0, 0, 0, 0.6);
}

.returnPopup .retryBtn {
  width: 420px;
  height: 160px;
  border: 14px solid #5099D2;
  border-radius: 100px;
  background-color: #fff;
  color: #488AE1;
  font-size: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: absolute;
  inset: 0;
}

.returnPopup .closeBtn {
  position: absolute;
  top: 40px;
  right: 40px;
}

.step {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}
.step.clear {
  pointer-events: none !important;
}

[data-step="1"] .step:nth-of-type(1),
[data-step="2"] .step:nth-of-type(2),
[data-step="3"] .step:nth-of-type(3),
[data-step="4"] .step:nth-of-type(4),
[data-step="5"] .step:nth-of-type(5) {
  position: relative;
  opacity: 1;
  pointer-events: visible;
}

.step .quizBox {
  width: 100%;
  height: 120px;
  background-color: #BBDBF6;
  display: flex;
  align-items: center;
  padding: 0 45px;
}

.step .quizBox p {
  font-size: 48px;
  color: #12202C;
  align-items: center;
}

.step .quizBox p em {
  width: 100px;
  height: 60px;
  display: inline-flex;
  background-color: #fff;
  /* border: 4px solid #144A9E; */
  border-radius: 16px;
  color: #82A7E1;
  font-size: 23px;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%231657ACFF' stroke-width='8' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}


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



/* 개별 CSS */
.contentsBox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 30px;
}

.step:nth-of-type(1) .contentsBox {
  gap: 125px;
}

.step:nth-of-type(2) .contentsBox {gap: 90px;}

.step:nth-of-type(3) .contentsBox {gap: 90px;}

.step:nth-of-type(4) .contentsBox {
  margin-top: 50px;
}

.step:nth-of-type(5) .contentsBox {
  margin-top: 50px;
}

.step:nth-of-type(1) .imgBox {}
.step:nth-of-type(1) .imgBox > img {}
.step:nth-of-type(1) .imgBox > .bubble {}
.step:nth-of-type(1) .imgBox > .bubble img {}
.step:nth-of-type(1) .imgBox > .bubble p {}
.step:nth-of-type(2) .imgBox {
  width: 1130px;
  height: 740px;
  position: relative;
}
.step:nth-of-type(2) .imgBox > img {
  position: absolute;
  top: 270px;
  left: 130px;
}
.step:nth-of-type(2) .imgBox > .bubble {
  position: absolute;
  top: 60px;
  left: 620px;
}
.step:nth-of-type(2) .imgBox > .bubble img {}
.step:nth-of-type(2) .imgBox > .bubble p {
  position: absolute;
  top: 0;
  left: 0;
  font-family: PSB;
  font-size: 40px;
  color: #000;
  text-align: center;
  line-height: 50px;
  width: 100%;
  height: 100%;
  padding: 0 0 70px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step:nth-of-type(3) .imgBox {
  width: 1130px;
  height: 740px;
  position: relative;
}
.step:nth-of-type(3) .imgBox > img {
  position: absolute;
  top: 270px;
  left: 270px;
}
.step:nth-of-type(3) .imgBox > .bubble {
  position: absolute;
  top: 60px;
  left: 520px;
}
.step:nth-of-type(3) .imgBox > .bubble img {}
.step:nth-of-type(3) .imgBox > .bubble p {
  position: absolute;
  top: 0;
  left: 0;
  font-family: PSB;
  font-size: 40px;
  color: #000;
  text-align: center;
  line-height: 50px;
  width: 100%;
  height: 100%;
  padding: 0 0 70px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dragBox {
  position: relative;
  /* width: 1750px; */
  /* height: 320px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 30px 24px;
}

.step:nth-of-type(1) .dragBox {
  width: 340px;
  margin-top: 60px;
}

.step:nth-of-type(2) .dragBox {
  gap: 60px;
  margin-top: 120px;
}

.step:nth-of-type(3) .dragBox {
  gap: 60px;
  margin-top: 120px;
}

.step:nth-of-type(4) .dragBox {
  height: 290px;
}

.step:nth-of-type(5) .dragBox {
  height: 290px;
}

.dragObj {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.step:nth-of-type(1) .dragObj {}

.step:nth-of-type(2) .dragObj {}

.step:nth-of-type(3) .dragObj {}

.step:nth-of-type(4) .dragObj {}

.step:nth-of-type(5) .dragObj {}

.dragObj>span {
  width: 340px;
  height: 120px;
  background-color: #FFAE00;
  border-radius: 16px;
  box-shadow: inset 0 -7px 0 #C98300;
  color: #FFF;
  font-size: 48px;
  font-family: PB;
  display: flex;
  justify-content: center;
  align-items: center;
}
.step.clear .dragObj[data-answer="false"] {
  filter: grayscale(1);
}
.dragObj::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: -8px;
  left: -8px;
  border: 8px solid #00EEFF;
  border-radius: 24px;
  opacity: 0;
  pointer-events: none;
}
.step:nth-of-type(2) .dragObj::before,
.step:nth-of-type(3) .dragObj::before {
  border-radius: 50%;
} 
.dragObj.on::before {
  opacity: 1;
}

.dragObj>img {}

.dropBox {
  /* display: flex; */
  /* width: 1620px; */
  /* height: 280px; */
  /* background-color: #EBF3F9; */
  /* flex-wrap: wrap; */
  /* justify-content: center; */
  /* align-content: center; */
  /* gap: 36px 46px; */
  border-radius: 40px;
  position: absolute;
}

.step:nth-of-type(1) .dropBox {
  /* padding: 0 130px; */
  top: 710px;
  right: 117px;
}

.step:nth-of-type(2) .dropBox {
  right: 255px;
  top: 570px;
}

.step:nth-of-type(3) .dropBox {
  right: 255px;
  top: 570px;
}

.step:nth-of-type(4) .dropBox {
  padding: 0 130px;
  background-color: unset;
}

.step:nth-of-type(5) .dropBox {
  padding: 0 130px;
  background-color: unset;
}

.dropObj {
  width: 340px;
  height: 120px;
  border-radius: 16px;
  font-size: 23px;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%231657ACFF' stroke-width='8' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.step:nth-of-type(1) .dropObj {}

.step:nth-of-type(2) .dropObj,
.step:nth-of-type(3) .dropObj {
  width: 205px;
  height: 214px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='50%' ry='50%' stroke='%231657ACFF' stroke-width='8' stroke-dasharray='6%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.step .dropObj.answer {
  background-image: none;
}

.step:nth-of-type(3) .dropObj {}

.step:nth-of-type(4) .dropObj {
  width: 316px;
  height: 211px;
  box-shadow: 0 0 0 20px #B3CBED;
}

.step:nth-of-type(5) .dropObj {
  width: 316px;
  height: 211px;
  box-shadow: 0 0 0 20px #B3CBED;
}

.dropObj>.quizIcon:not(:last-child) {
  display: none;
}

.dropObj>span {
  width: 100%;
  height: 100%;
  background-color: #FFC900;
  border-radius: 16px;
  box-shadow: inset 0 -7px 0 #CEA816;
  color: #54450C;
  font-size: 40px;
  font-family: 'NSNEB';
  display: flex;
  justify-content: center;
  align-items: center;
}

.step:nth-of-type(1) .dropObj::before {
  content: '';
  background: url(../img/O.png)center/100% no-repeat;
  width: 123px;
  height: 128px;
  position: absolute;
  margin: auto;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.step:nth-of-type(1) .dropObj::after {
  content: '';
  background: url(../img/X.png)center/100% no-repeat;
  width: 116px;
  height: 120px;
  position: absolute;
  margin: auto;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.step:nth-of-type(1) .dropObj.answer::before,
.step:nth-of-type(1) .dropObj.wrong::after {
  opacity: 1;
}

.step:nth-of-type(1) .dropObj.answer {
  pointer-events: none;
}

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

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