@import url(./font.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

#root>.container {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  left: 0;
  top: 0;
  display: block;
}

#root>.container>.intro {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../assets/intro/background.png) no-repeat;
  border: none;
  outline: none;
}

#root>.container>.intro>.start-button {
  position: absolute;
  width: 423px;
  height: 124px;
  top: 532px;
  left: 772px;
  background: url(../assets/intro/start_button.png) no-repeat;
  border: none;
  outline: none;
  z-index: 1;
  cursor: pointer;
}

#root>.container>.intro>.explain-game-button {
  position: absolute;
  width: 423px;
  height: 124px;
  top: 702px;
  left: 772px;
  background: url(../assets/intro/explain_button.png) no-repeat;
  border: none;
  outline: none;
  z-index: 1;
  cursor: pointer;
}

#root>.container>.intro>.explain-game-pop-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  display: none;
  z-index: 3;
}

#root>.container>.intro>.explain-game-pop-wrapper>.pop {
  width: 1071px;
  height: 474px;
  position: absolute;
  margin: 13%;
  margin-left: 22%;
  background: url(../assets/intro/popup.png) no-repeat;
}

#root>.container>.intro>.explain-game-pop-wrapper>.pop>.close-button {
  width: 69px;
  height: 69px;
  position: absolute;
  background: url(../assets/intro/popup_close.png) no-repeat;
  cursor: pointer;
  border: none;
  outline: none;
  left: 982px;
  top: 21px;
}

#root>.container>.metaverse {
  position: relative;
  background: url(../assets/game/common/background.png) no-repeat;
  margin-top: -42px;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

#root>.container>.metaverse>.character {
  position: absolute;
  width: 78px;
  height: 123px;
  top: 382px;
  left: 912px;
  z-index: 13;
  background: url(../assets/game/common/character.png) no-repeat;
}

#root>.container>.metaverse>.obstacle {
  position: absolute;
  z-index: 10;
}

#root>.container>.metaverse>.quest {
  position: absolute;
  z-index: 12;
}

#quest01 {
  background: url(../assets/game/common/flag1.png) no-repeat;
}

#quest02 {
  background: url(../assets/game/common/flag2.png) no-repeat;
}

#quest03 {
  background: url(../assets/game/common/flag3.png) no-repeat;
}

/* 공통 모듈 */
#root>.container>.metaverse>.module {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none;
}

#root>.container>.metaverse>.module>.quiz {
  width: 1280px;
  height: 720px;
  position: absolute;
  background: #fff;
  top: 152px;
  left: 332px;
  border-radius: 32px;
}

#root>.container>.metaverse>.module>.quiz>.page {
  width: 100%;
  height: 100%;
  border-radius: 32px;
}

#root>.container>.metaverse>.module>.video-pop>video {
  position: absolute;
  width: 1280px;
  height: 720px;
  top: 182px;
  left: 242px;
  border-radius: 30px;
  display: none;
}

#root>.container>.metaverse>.module>.video-pop>button {
  position: absolute;
  border: none;
  display: none;
  cursor: pointer;
  width: 227px;
  height: 87px;
}

#root>.container>.metaverse>.module>.video-pop>.retry-button {
  background: url(../assets/game/common/retry_btn.png) no-repeat;
}

#root>.container>.metaverse>.module>.video-pop>.next-button {
  background: url(../assets/game/common/next_btn.png) no-repeat;
}

/* 공통 모듈 end */

/* 가상 키보드 start */
#root>.container>.metaverse>.virtual-keyboard-container {
  position: absolute;
  width: 100%;
  height: 360px;
  bottom: 0;
}

#root>.container>.metaverse>.virtual-keyboard-container>.keyboard-button {
  position: absolute;
  width: 154px;
  height: 170px;
  border: none;
  outline: none;
}

#root>.container>.metaverse>.virtual-keyboard-container>.keyboard-button#space-button {
  width: 427px;
  height: 170px;
  top: 102px;
  left: 72px;
}

#up-button {
  left: 1492px;
  top: -58px;
  background: url(../assets/game/common/up.png) no-repeat;
}

#down-button {
  left: 1492px;
  top: 132px;
  background: url(../assets/game/common/down.png) no-repeat;
}

#left-button {
  left: 1292px;
  top: 132px;
  background: url(../assets/game/common/left.png) no-repeat;
}

#right-button {
  left: 1692px;
  top: 132px;
  background: url(../assets/game/common/right.png) no-repeat;
}

#space-button {
  background: url(../assets/game/common/space.png) no-repeat;
}

#root>.container>.metaverse>.virtual-keyboard-container>.keyboard-button:active {
  transform: translateY(10px);
}

/* 가상 키보드 end */

/* 오지선다형 */
#root>.container>.metaverse>.module>.quiz>.multiple-choice-quiz {
  background: url(../assets/game/01/background.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.multiple-choice-quiz>.selection {
  position: absolute;
  width: 210px;
  height: 49px;
  top: 506px;
  cursor: pointer;
}

#selection01 {
  left: 150px;
  background: url(../assets/game/01/exam01.png) no-repeat;
}

#selection01:active {
  background: url(../assets/game/01/exam01_hit.png) no-repeat;
}

#selection02 {
  left: 540px;
  background: url(../assets/game/01/exam02.png) no-repeat;
}

#selection02:active {
  background: url(../assets/game/01/exam02_hit.png) no-repeat;
}

#selection03 {
  left: 910px;
  background: url(../assets/game/01/exam03.png) no-repeat;
}

#selection03:active {
  background: url(../assets/game/01/exam03_hit.png) no-repeat;
}

#selection04 {
  left: 310px;
  top: 592px !important;
  background: url(../assets/game/01/exam04.png) no-repeat;
}

#selection04:active {
  background: url(../assets/game/01/exam04_hit.png) no-repeat;
}

#selection05 {
  left: 782px;
  top: 592px !important;
  background: url(../assets/game/01/exam05.png) no-repeat;
}

#selection05:active {
  background: url(../assets/game/01/exam05_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.multiple-choice-quiz>.alert {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}

#root>.container>.metaverse>.module>.quiz>.multiple-choice-quiz>.alert.wrong {
  background: url(../assets/game/01/wrong.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.multiple-choice-quiz>.alert.correct {
  background: url(../assets/game/01/correct.png) no-repeat;
}

#root>.container>.metaverse>.module#multiple-choice-module>.video-pop>.retry-button {
  top: 392px;
  left: 1179px;
  background: url(../assets/game/common/retry_btn.png) no-repeat;
}

#root>.container>.metaverse>.module#multiple-choice-module>.video-pop>.next-button {
  top: 502px;
  left: 1179px;
}

/* 단순 선택형 */
#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz {
  background: url(../assets/game/02/background.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection {
  position: absolute;
  width: 210px;
  height: 49px;
  top: 206px;
  cursor: pointer;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection01 {
  left: 110px;
  width: 612px;
  height: 85px;
  background: url(../assets/game/02/exam01.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection01:active {
  background: url(../assets/game/02/exam01_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection01.active {
  background: url(../assets/game/02/exam01_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection02 {
  left: 110px;
  top: 295px;
  width: 532px;
  height: 85px;
  background: url(../assets/game/02/exam02.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection02:active {
  background: url(../assets/game/02/exam02_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection02.active {
  background: url(../assets/game/02/exam02_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection03 {
  left: 110px;
  top: 384px;
  width: 912px;
  height: 85px;
  background: url(../assets/game/02/exam03.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection03:active {
  background: url(../assets/game/02/exam03_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection03.active {
  background: url(../assets/game/02/exam03_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection04 {
  width: 846px;
  height: 85px;
  left: 110px;
  top: 472px !important;
  background: url(../assets/game/02/exam04.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection04:active {
  background: url(../assets/game/02/exam04_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.selection#selection04.active {
  background: url(../assets/game/02/exam04_hit.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.alert {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.alert.wrong {
  background: url(../assets/game/02/wrong.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.simple-selection-quiz>.alert.correct {
  background: url(../assets/game/02/correct.png) no-repeat;
}

#root>.container>.metaverse>.module#simple-selection-module>.video-pop>.retry-button {
  top: 612px;
  left: 339px;
  background: url(../assets/game/common/retry_btn.png) no-repeat;
}

#root>.container>.metaverse>.module#simple-selection-module>.video-pop>.next-button {
  top: 722px;
  left: 339px;
}

/*ox */
#root>.container>.metaverse>.module>.quiz>.ox-quiz {
  background: url(../assets/game/03/background.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.ox-quiz>.selection {
  position: absolute;
  width: 342px;
  height: 342px;
  cursor: pointer;
}

#o {
  top: 242px;
  left: 192px;
  background: url(../assets/game/03/o.png) no-repeat;
}

#o:active {
  background: url(../assets/game/03/o_active.png) no-repeat;
}

#x {
  top: 242px;
  left: 792px;
  background: url(../assets/game/03/x.png) no-repeat;
}

#x:active {
  background: url(../assets/game/03/x_active.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.ox-quiz>.alert {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}

#root>.container>.metaverse>.module>.quiz>.ox-quiz>.alert.wrong {
  background: url(../assets/game/03/wrong.png) no-repeat;
}

#root>.container>.metaverse>.module>.quiz>.ox-quiz>.alert.correct {
  background: url(../assets/game/03/correct.png) no-repeat;
}

#root>.container>.metaverse>.module#ox-module>.video-pop>.retry-button {
  top: 622px;
  left: 1179px;
  background: url(../assets/game/common/retry_btn.png) no-repeat;
}

#root>.container>.metaverse>.module#ox-module>.video-pop>.next-button {
  top: 722px;
  left: 1179px;
}

/* end */
#root>.container>.metaverse>.explain-game-pop-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  z-index: 999;
}

#root>.container>.metaverse>.explain-game-pop-wrapper>.pop {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../assets/game/common/end.png) no-repeat;
}

#root>.container>.metaverse>.explain-game-pop-wrapper>.pop>.close-button {
  display: none;
}

#root>.container>.metaverse>.explain-game-pop-wrapper>.pop>.retry-button {
  position: absolute;
  width: 336px;
  height: 60px;
  background: url(../assets/game/common/retry_button.png) no-repeat;
  top: 472px;
  left: 792px;
  cursor: pointer;
  border: none;
  z-index: 999;
}

#root>.container>.metaverse>.end_btn {
  position: absolute;
  width: 200px;
  height: 65px;
  background: url(../assets/game/common/end_btn.png) no-repeat;
  top: 702px;
  left: 862px;
  cursor: pointer;
  border: none;
  display: none;
  z-index: 1000;
}