@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: 554px;
  height: 170px;
  top: 532px;
  left: 682px;
  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: 562px;
  height: 170px;
  top: 702px;
  left: 682px;
  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: 1780px;
  height: 909px;
  position: absolute;
  margin: 2%;
  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: 1602px;
  top: 71px;
}

#root>.container>.dice-game {
  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>.dice-game>.piece {
  position: absolute;
  width: 100px;
  height: 155px;
  top: 692px;
  left: 479px;
  background: url(../assets/game/common/piece.png) no-repeat;
}

#root>.container>.dice-game>.roll-button {
  position: absolute;
  width: 255px;
  height: 150px;
  border: none;
  outline: none;
  cursor: pointer;
  top: 482px;
  left: 835px;
  z-index: 50;
  background: url(../assets/game/common/roll_btn.png) no-repeat center;
}

#root>.container>.dice-game>.roll-button:active {
  background: url(../assets/game/common/roll_btn_active.png) no-repeat;
}

#root>.container>.dice-game>.landmark {
  position: absolute;
  width: 167px;
  height: 236px;
  top: 202px;
  left: 879px;
  padding-top: 20px;
  transition: background 0.5s ease-in-out;
}

#root>.container>.dice-game>.landmark[data-level="0"] {
  background: url(../assets/game/common/ground.png) no-repeat;
}

#root>.container>.dice-game>.landmark[data-level="1"] {
  background: url(../assets/game/common/sprout.png) no-repeat;
}

#root>.container>.dice-game>.landmark[data-level="2"] {
  background: url(../assets/game/common/plant.png) no-repeat;
}

#root>.container>.dice-game>.landmark[data-level="3"] {
  background: url(../assets/game/common/tree.png) no-repeat;
}

#root>.container>.dice-game>.dice-container {
  width: 100px;
  height: 100px;
  position: absolute;
  transform-style: preserve-3d;
  opacity: 0;
  z-index: 99;
  transition: transform 1.2s ease-in-out, opacity 0.6s ease-in-out;
  transform: translate(2220px, 980px) rotateX(0deg) rotateY(0deg);
}

#root>.container>.dice-game>.dice-container>.dice-side {
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  outline: none;
  background-size: cover;
}

#root>.container>.dice-game>.dice-container>.dice1 {
  transform: rotateY(0deg) translateZ(50px);
  background: url(../assets/game/common/dice1.png) no-repeat;
}

#root>.container>.dice-game>.dice-container>.dice2 {
  transform: rotateY(90deg) translateZ(50px);
  background: url(../assets/game/common/dice2.png) no-repeat;
}

#root>.container>.dice-game>.dice-container>.dice3 {
  transform: rotateY(180deg) translateZ(50px);
  background: url(../assets/game/common/dice3.png) no-repeat;
}

#root>.container>.dice-game>.dice-container>.dice4 {
  transform: rotateY(-90deg) translateZ(50px);
  background: url(../assets/game/common/dice4.png) no-repeat;
}

#root>.container>.dice-game>.dice-container>.dice5 {
  transform: rotateX(90deg) translateZ(50px);
  background: url(../assets/game/common/dice5.png) no-repeat;
}

#root>.container>.dice-game>.dice-container>.dice6 {
  transform: rotateX(-90deg) translateZ(50px);
  background: url(../assets/game/common/dice6.png) no-repeat;
}

#root>.container>.dice-game>.module {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none;
}

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

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

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

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

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

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

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

#root>.container>.dice-game>.module#ox-module>.video-pop>.next-button {
  top: 582px;
  left: 1179px;
  background: url(../assets/game/common/next_btn.png) no-repeat;
}

#root>.container>.dice-game>.module#hidden-word-module>.video-pop>.retry-button {
  top: 452px;
  left: 719px;
  background: url(../assets/game/common/next_game_btn.png) no-repeat;
}

#root>.container>.dice-game>.module#hidden-word-module>.video-pop>.next-button {
  top: 222px;
  left: 849px;
  display: none !important;
}

#root>.container>.dice-game>.module#drag-module>.video-pop>.retry-button {
  top: 222px;
  left: 919px;
  background: url(../assets/game/common/next_game_btn.png) no-repeat;
}

#root>.container>.dice-game>.module#drag-module>.video-pop>.next-button {
  top: 222px;
  left: 989px;
  display: none !important;
}

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

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

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

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

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

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

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

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

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

#root>.container>.dice-game>.module#ox-module>.video-pop>.next-button {
  top: 512px;
  left: 289px;
}

/* 단어 클릭 */
#root>.container>.dice-game>.module>.quiz>.word-quiz {
  background: url(../assets/game/02/background.png) no-repeat;
}

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

#root>.container>.dice-game>.module>.quiz>.word-quiz>.alert.none {
  background: url(../assets/game/02/none_check.png) no-repeat;
}

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

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

#root>.container>.dice-game>.module>.quiz>.word-quiz>.word-container {
  position: absolute;
  width: 780px;
  height: 100px;
  left: 462px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

#root>.container>.dice-game>.module>.quiz>.word-quiz>.word-container>.word {
  border: 5px #e4feac solid;
  width: 130px;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 62px;
  background: #fff;
  border-radius: 19px;
  font-family: 'SBAggro', sans-serif;
  color: #527801;
}

#root>.container>.dice-game>.module>.quiz>.word-quiz>.word-container>.word.selected {
  background: yellow;
  color: #000;
  border: 5px yellow solid;
}

#root>.container>.dice-game>.module>.quiz>.word-quiz>.word-container>.word.bg-color1 {
  background: #654b3d;
  color: #fff;
  border: 5px #654b3d solid;
}

#root>.container>.dice-game>.module>.quiz>.word-quiz>.word-container>.word.bg-color2 {
  background: #4e4b76;
  color: #fff;
  border: 5px #4e4b76 solid;
}

#root>.container>.dice-game>.module>.quiz>.word-quiz>.word-container>.word.bg-color3 {
  background: #356b65;
  color: #fff;
  border: 5px #356b65 solid;
}

#root>.container>.dice-game>.module>.quiz>.word-quiz>.confirm-button {
  position: absolute;
  width: 315px;
  height: 80px;
  border: none;
  outline: none;
  top: 552px;
  left: 42px;
  background: url(../assets/game/02/confirm_btn.png) no-repeat;
  cursor: pointer;
}

#word-container1 {
  top: 92px;
}

#word-container2 {
  top: 222px;
}

#word-container3 {
  top: 352px;
}

#word-container4 {
  top: 482px;
}

/* 드래그앤 드롭 */
#root>.container>.dice-game>.module>.quiz>.drag-and-drop {
  background: url(../assets/game/03/background.png) no-repeat;
}

#root>.container>.dice-game>.module>.quiz>.drag-and-drop>.drop-item-area {
  position: absolute;
  width: 270px;
  height: 230px;
  top: 115px;
}

#root>.container>.dice-game>.module>.quiz>.drag-and-drop>.drag-item {
  position: absolute;
  cursor: pointer;
  touch-action: none;
}

#drag-item01 {
  width: 137px;
  height: 192px;
  left: 172px;
  top: 456px;
  background: url(../assets/game/03/item01.png) no-repeat;
}

#drag-item02 {
  width: 196px;
  height: 174px;
  left: 902px;
  top: 456px;
  background: url(../assets/game/03/item02.png) no-repeat;
}

#drag-item03 {
  width: 180px;
  height: 181px;
  left: 462px;
  top: 456px;
  background: url(../assets/game/03/item03.png) no-repeat;
}

#drop-item-area01 {
  left: 229px;
}

#drop-item-area02 {
  left: 515px;
}

#drop-item-area03 {
  left: 801px;
}

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

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

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

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

#root>.container>.dice-game>.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: 999;
}