.hidden {
  display: none !important;
}

#background {
  background-image: url('img/tutorial.jpeg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  opacity: 100%;
}

#logo {
  width: 270px;
  display: block;
  margin: 0px auto;
}

.logIn-form {
  text-align: center;
  margin-top: 20px;
}

#input {
  width: 125px;
  height: 20px;
}

#login {
  height: 28px;
}

li {
  text-align: center;
}

#quote {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

#clock {
  font-size: 30px;
  text-align: end;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

body {
  cursor: url('img/Cursor.0.0.png'), auto;
}


#clickCursor {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 5;
}


#townIcon-Wrapper {
  position: relative;
  width: 180px;
  margin: auto;
  top: 45%;
}

.scene1 {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 30px;
  right: 0px;
  bottom: 0px;
}

.option-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

@media (max-width: 1128px) {
  .option-container {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .positionChange {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
}

@media (min-width: 1129px) {
  .positionChange {
    position: relative;
  }

  .taxi_div {
    margin-left: 10%;
  }

  #TIMER {
    margin-right: 10%;
  }
}

.taxi_div {
  background-image: url('img/SysOpt.backgrnd.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  width: 240px;
  height: 300px;
}

#quest {
  background-image: url('img/Quest.list.backgrnd.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  width: 220px;
  height: 300px;
}

#TIMER {
  background-image: url('img/OptionMenu5.backgrnd.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  width: 430px;
  height: 300px
}


.scene2 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
}

.npc-absolute {
  position: absolute;
  bottom: 40px;
  width: 100%;
}

.npc-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly

}

/* 패딩으로 조절하니까 커서영역 그애 따라 커짐 왜 플렉스 조금 풀리는 지 알아내야해!!
npc조절하는거 결국 상위div를 백그라운드처럼 전체 영역으러 해두고 absolute로 npc 고정시켜두면 되는거였다!!
그 상위div의 width100%로 해야 flex먹지!! */


.todo-text {
  position: relative;
  left: 30px;
  top: 22px;
}

.todo-list {
  position: relative;
  width: 80%;
  margin: auto;
  top: 23px;
  height: 230px;
  overflow: auto;
}


.ActivationStart {
  background-image: url('img/SysOpt.BtOK.normal.0.png');
}

.DeactivationStart {
  background-image: url('img/SysOpt.BtOK.disabled.0.png');
  cursor: url('img/Cursor.0.0.png'), auto;
}


.ActivationCancel {
  background-image: url('img/SysOpt.BtCancel.normal.0.png');
}

.DeactivationCancel {
  background-image: url('img/SysOpt.BtCancel.disabled.0.png');
  cursor: url('img/Cursor.0.0.png'), auto;
}

#timer-option {
  position: relative;
  width: 200px;
  margin: auto;
  height: 250px;
  top: 15%;
  line-height: 2;
  text-align: center;
}


#character {
  width: auto;
  height: auto;
}


body {
  font-family: 'Gowun Dodum', sans-serif;
  color: white;
}

#tictac-area {
  position: relative;
  top: 25px;
  height: 200px;
}

#totalTime {
  position: relative;
  text-align: center;
}

#progress-area {
  position: relative;
  width: 270px;
  height: 25px;
  background: #6478FF;
  border: 3px solid #3232FF;
  margin: auto;
  text-align: center;
  border-radius: 7px;
  top: 8px;
}

#progress-area2 {
  position: relative;
  width: 270px;
  height: 25px;
  background: #6478FF;
  border: 3px solid #3232FF;
  margin: auto;
  text-align: center;
  border-radius: 7px;
  margin-top: 20px;
}

#progressBar, #progressBar2 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

#remainingTime {
  position: relative;
  z-index: 2;
  top: 7%;
}

#remainingTime2 {
  position: relative;
  z-index: 2;
  top: 7%;
}

#result-area {
  position: relative;
  height: 150px;
  text-align: center;
  display: flex;
  top: 15%;
}

.resultInfo {
  margin-bottom: 10px;
  font-size: large;
}

#result-expcoupon, #result-item {
  font-size: 23px;
}

.on100s {
  background: #3232FF;
  animation: progressBar 100s linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 12;
}

.on600s {
  background: #3232FF;
  animation: progressBar 600s linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 12;
}

.on900s {
  background: #3232FF;
  animation: progressBar 900s linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 8;
}

.on1200s {
  background: #3232FF;
  animation: progressBar 1200s linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 6;
}

.on1800s {
  background: #3232FF;
  animation: progressBar 1800s linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 4;
}

.on3600s {
  background: #3232FF;
  animation: progressBar 3600s linear;
  animation-fill-mode: forwards;
  animation-iteration-count: 2;
}

@keyframes progressBar {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

#todoNpc {
  transform: scaleX(-1);
}

.strikeThrough {
  color: #999;
  text-decoration: line-through;
  text-decoration-color: #999;
  text-decoration-thickness: 0.7px;
}


.btn-wrapper {
  position: absolute;
  bottom: 8%;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1.8;
  flex-direction: row;
  flex-wrap: nowrap;
}

#timerStartBtn {
  background-color: transparent; /* make the button transparent */
  background-repeat: no-repeat; /* make the background image appear only once */
  background-position: 0px 0px; /* equivalent to 'top left' */
  border: none; /* assuming we don't want any borders */
  height: 18px; /* make this the size of your image */
  width: 40px;
  margin-right: 3px;
  margin-left: 38px;
  margin-top: 20px;
}

#timerCancelBtn {
  background-color: transparent; /* make the button transparent */
  background-repeat: no-repeat; /* make the background image appear only once */
  background-position: 0px 0px; /* equivalent to 'top left' */
  border: none; /* assuming we don't want any borders */
  height: 18px; /* make this the size of your image */
  width: 40px;
  margin-top: 20px;
  margin-right: 3px;
}


/* #tooltip{
  position: absolute;
  cursor: url('img/Cursor.0.0.png'), auto;
  bottom: 7%;
  right: 1%;
  width: 160px;
  height: 56px;
} */

.tooltip-button {
  background-image: url('img/tooltip.png');
  background-color: transparent; /* make the button transparent */
  background-repeat: no-repeat; /* make the background image appear only once */
  background-position: 0px 0px; /* equivalent to 'top left' */
  border: none; /* assuming we don't want any borders */
  height: 28px; /* make this the size of your image */
  width: 28px;
  margin-top: 15px;
}


.tooltip-text {
  position: absolute;
  right: 5%;
  bottom: 10%;
  border-radius: 5%;
  width: 105px;
  padding: 5px;
  background-color: #000;
  color: #fff;
  font-size: 14px;
}


.tooltip-button:hover .tooltip-text {
  display: block;
}

footer {
  position: absolute;
  bottom: 0.3%;
  font-size: 14px;
  background-color: #000;
  border-radius: 10%;
  color: #fff;
}