@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;
  cursor: pointer;
}
.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;
}

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

.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%;
}
.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: center;
  justify-content: center;
  gap: 25px 220px;
  margin-top: 30px;
}
.textBox {
  width: 350px;
  height: 380px;
  border-radius: 32px;
  border: 3px solid #8DADDB;
  overflow: hidden;
  position: relative;
}
.textBox dl {
  background-color: rgba(218, 229, 245, 0.4);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 84px;
  gap: 10px;
}
.textBox dl dt {
  background-color: #B3CBED;
  height: 64px;
  border-bottom: 3px solid #8DADDB;
  color: #0F2F58;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-family: 'NSNEB';
  width: 100%;
  position: absolute;
  top: 0;
}
.textBox dl dd {
  font-size: 36px;
  font-family: 'NSNEB';
}
.dragBox {
  position: relative;
  margin-right: 220px;
  background: url(../img/dragBox.png)center/100% no-repeat;
  width: 562px;
  height: 439px;
}
.dragObj {
  position: absolute;
  top: 0;
  left: 0;
}
.dragObj[data-num="1"] {
  top: 20px;
  left: 30px;
  width: 127px;
  height: 179px;
}
.dragObj[data-num="2"] {
  top: 32px;
  left: 165px;
  width: 121px;
  height: 154px;
}
.dragObj[data-num="3"] {
  top: 28px;
  left: 280px;
  width: 136px;
  height: 161px;
}
.dragObj[data-num="4"] {
  top: 30px;
  left: 408px;
  width: 145px;
  height: 163px;
}
.dragObj[data-num="5"] {
  top: 210px;
  left: 36px;
  width: 278px;
  height: 201px;
}
.dragObj[data-num="6"] {
  top: 195px;
  left: 320px;
  width: 232px;
  height: 232px;
}
.dragObj[data-num="7"] {
  top: 100px;
  left: unset;
  right: -220px;
  width: 136px;
  height: 246px;
}

.dragObj > img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.dragObj[data-num="1"] > img:nth-of-type(2) {
  top: -6px;
  left: -6px;
}
.dragObj[data-num="2"] > img:nth-of-type(2) {
  top: -7px;
  left: -7px;
}
.dragObj[data-num="3"] > img:nth-of-type(2) {
  top: -6px;
  left: -6px;
}
.dragObj[data-num="4"] > img:nth-of-type(2) {
  top: -7px;
  left: -7px;
}
.dragObj[data-num="5"] > img:nth-of-type(2) {
  top: -7px;
  left: -7px;
}
.dragObj[data-num="6"] > img:nth-of-type(2) {
  top: -5px;
  left: -5px;
}
.dragObj[data-num="7"] > img:nth-of-type(2) {
  top: -4px;
  left: -4px;
}
.dragObj:not(.on) > img:nth-of-type(1),
.dragObj.on > img:nth-of-type(2) {
  opacity: 1;
  position: relative;
}
.dropBox {
  display: flex;
  gap: 3px;
}
.dropBox dl {
  width: 280px;
  height: 276px;
  background-color: #B3CBED;
  border-radius: 30px 30px 20px 20px;
  box-shadow: 3px 3px 0px 0 #8DADDB;
  border: 3px;
  overflow: hidden;
}
.dropBox dl dt {
  background-color: #DAE5F5;
  font-size: 36px;
  font-family: 'NSNEB';
  color: #0F2F58;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}
.dropBox dl dd {
  position: relative;
}
.dropObj {
  width: 254px;
  height: 184px;
  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;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropObj>.quizIcon:not(:last-child) {
  display: none;
}
.dropObj>img:not(.quizIcon) {
  height: 70%;
}

.dropBox dl:nth-of-type(4) .dropObj>img:not(.quizIcon):nth-child(2):nth-last-child(3),
.dropBox dl:nth-of-type(4) .dropObj>img:not(.quizIcon):nth-child(2):nth-last-child(3) ~ img {
  height: 50%;
}

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

.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;
}
.dropObj.answer::before,
.dropObj.wrong::after {
  opacity: 1;
}
.dropObj.answer {
  pointer-events: none;
}

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

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