@charset "utf-8";

#wrap {
  width: 1920px;
  height: 1080px;
}

#container {
  width: 100%;
  height: 100%;
}

.guide_dim,
.lab_page {
  position: relative;
  width: 100%;
  height: 100%;
  background: center / cover no-repeat url('../img/bg_base.png');
}

.guide_dim {
  pointer-events: none;
  user-select: none;
  touch-action: none;
}

.guide_cat {
  position: absolute;
  display: block;
  top: 490px;
  left: 880px;
}

.guide_cat .eyes {
  position: absolute;
  top: 40px;
  left: 44px;
  transition: transform 1s linear;
}

.txt_box {
  position: absolute;
  top: 470px;
  left: 395px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 456px;
  height: 174px;
  padding-left: 15px;
  opacity: 0;
  background: center / cover no-repeat url(../img/guide_txt.png);
  animation: pop 1s linear 1 0.5s forwards;
}

.txt_box::before {
  display: block;
  width: fit-content;
  height: fit-content;
  content: '저항체를 움직여';
  font-family: 'MaplestoryBold', sans-serif;
  font-size: 40px;
  color: #444;
}

@keyframes pop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.pin {
  position: absolute;
  left: 567px;
  width: 120px;
  height: 60px;
  display: block;
  pointer-events: none;
  user-select: none;
  touch-action: none;
}

.pin img {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 66px;
  transform-origin: bottom center;
  transform: rotate(-71deg);
}
.pin.volt img {
  transform: rotate(-3deg) rotateX(30deg);
}
.pin::after {
  content: '';
  position: absolute;
  left: 35%;
  bottom: -3px;
  width: 39px;
  height: 11px;
  background: center / cover no-repeat url('../img/pin_cover.png');
}

.pin.volt {
  top: 78px;
}

.pin.current {
  top: 174px;
}

.ampere {
  position: absolute;
  right: 1229px;
  top: 751px;
  font-family: 'Pretendard-SemiBold', sans-serif;
  font-size: 40px;
}

.resisters {
  position: absolute;
  bottom: 90px;
  left: 627px;
  z-index: 2;
}

.guide_dim .resisters li {
  transition: transform 1s linear;
}
.guide_dim .resisters li:first-of-type {
  animation: resAni 4s linear 1 0.5s forwards;
}

.resisters li {
  position: absolute;
  cursor: pointer;
}

.resisters li.active {
  cursor: auto;
  pointer-events: none;
  touch-action: none;
}

.resisters li:nth-of-type(1) {
  top: -50px;
  left: 0px;
}

.resisters li:nth-of-type(1).active {
  transform: translate(672px, -169px) rotateX(25deg);
}

.resisters li:nth-of-type(2) {
  top: -40px;
  left: 432px;
}

.resisters li:nth-of-type(2).active {
  transform: translate(246px, -171px);
}

.resisters li:nth-of-type(3) {
  top: -54px;
  left: 893px;
}

.resisters li:nth-of-type(3).active {
  transform: translate(-214px, -168px) rotateX(25deg) skewX(-10deg);
  perspective-origin: top right;
  perspective: 160px;
}

.resisters li:nth-of-type(3).active figure {
  position: absolute;
  transform: rotateX(20deg);
}

.cursor {
  position: absolute;
  left: 760px;
  top: 970px;
  display: none;
  transition: transform 1s linear;
  transform: translate(585px, -570px);
  z-index: 5;
}

.move .eyes {
  transform: translate(8px, -4px);
}

@keyframes resAni {
  0% {
    transform: translate(0, 0) scale(1);
  }
  15% {
    transform: translate(0, 0) scale(1.2);
  }
  25% {
    transform: translate(0, 0) scale(1);
  }
  35% {
    transform: translate(0, 0) scale(1.2);
  }
  45% {
    transform: translate(0, 0) scale(1);
  }
  55% {
    transform: translate(0, 0) scale(1.2);
  }
  65% {
    transform: translate(0, 0) scale(1);
  }

  95% {
    transform: translate(676px, -171px);
  }
  100% {
    transform: translate(676px, -171px) rotateX(22deg);
  }
}

.txt_box.chain::before {
  content: '회로에 연결한 뒤';
}

.txt_box.switch::before {
  content: '스위치를 닫아 보자.';
}

.click .eyes {
  transform: translate(7px, -13px);
}

.click .resisters li:first-of-type {
  transition: transform 0.1s linear;
  transform: translate(676px, -171px) rotateX(22deg);
}

.click .cursor {
  display: block;
  animation: pop 0.5s linear infinite alternate;
}

.guide_dim.done {
  display: none;
}

.lab_page {
  display: none;
}

.lab_page::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
  opacity: 0;
  background-image: url('../img/bg_active_1.png');
}

.lab_page .pin img {
  transition: transform 0.5s linear;
}

.frame {
  position: absolute;
  right: 421px;
  bottom: 230px;
  width: 240px;
  height: 140px;
}

.lab_page .cursor {
  display: none;
  left: 1331px;
  top: 392px;
  transform: none;
}

.cursor.active {
  display: block;
}

.lab_page.active_0 .cursor,
.lab_page.active_1 .cursor,
.lab_page.active_2 .cursor {
  top: 405px;
  left: 1331px;
}

.lab_page.active_0::before {
  opacity: 1;
  background-image: url('../img/bg_active_2.png');
}
.lab_page.active_0 .volt img {
  transform: rotate(-3deg) rotateX(30deg);
}
.lab_page.active_0 .current img {
  transform: rotate(-60deg) rotateX(10deg);
}

.lab_page.active_1::before {
  opacity: 1;
}
.lab_page.active_1 .volt img {
  transform: rotate(-3deg) rotateX(30deg);
}
.lab_page.active_1 .current img {
  animation: shake 0.2s linear infinite;
}

.lab_page.active_2::before {
  opacity: 1;
  background-image: url('../img/bg_active_3.png');
}

@keyframes shake {
  from {
    transform: rotate(-69.5deg) rotateX(7deg);
  }
  to {
    transform: rotate(-69deg) rotateX(2deg);
  }
}

.reset {
  position: absolute;
  right: 60px;
  top: 30px;
  display: none;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.reset.active {
  display: block;
}

.reset img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}