:root {
  --canvas-width: 1845px;
  --canvas-height: 885px;
  --left-offset: 12.5px;

  --canvas-scale: 0.8; /* 스케일 조절용 */
}

@media (max-width: 540px) {
  :root {
    --canvas-scale: 0.1;
  }
}

.canvas-container {
  position: relative;
  width: calc(var(--canvas-width) * var(--canvas-scale));
  height: calc(var(--canvas-height) * var(--canvas-scale));

  background-color: transparent;
}

.canvas-container div {
  position: absolute;
  display: block;
  scale: var(--canvas-scale);
  transform-origin: top left;
  background-repeat: no-repeat;
}

.canvas-container div img {
  opacity: 0;
  -webkit-transition: 500ms opacity;
  -moz-transition: 500ms opacity;
  -ms-transition: 500ms opacity;
  -o-transition: 500ms opacity;
  transition: 500ms opacity;
}

.canvas-container div img:hover {
  opacity: 1;
}

#img2_18 {
  background-image: url("../img/indexlogo/layer_2.webp");
  top: calc(433px * var(--canvas-scale));
  left: calc((0px + var(--left-offset)) * var(--canvas-scale));
}

#img3_19 {
  background-image: url("../img/indexlogo/layer_3.webp");
  top: calc(329px * var(--canvas-scale));
  left: calc((0px + var(--left-offset)) * var(--canvas-scale));
}

#img5_5495 {
  background-image: url("../img/indexlogo/layer_5.webp");
  top: calc(0px * var(--canvas-scale));
  left: calc((241px + var(--left-offset)) * var(--canvas-scale));
}

#img4_9480 {
  background-image: url("../img/indexlogo/layer_4.webp");
  top: calc(579.5px * var(--canvas-scale));
  left: calc((300px + var(--left-offset)) * var(--canvas-scale));
}

#img6_C3 {
  background-image: url("../img/indexlogo/layer_6.webp");
  top: calc(0px * var(--canvas-scale));
  left: calc((637px + var(--left-offset)) * var(--canvas-scale));
}

#img7_15 {
  background-image: url("../img/indexlogo/layer_7.webp");
  top: calc(557px * var(--canvas-scale));
  left: calc((878px + var(--left-offset)) * var(--canvas-scale));
}

#img8_16 {
  background-image: url("../img/indexlogo/layer_8.webp");
  top: calc(0px * var(--canvas-scale));
  left: calc((1108.5px + var(--left-offset)) * var(--canvas-scale));
}

#img10_0086 {
  background-image: url("../img/indexlogo/layer_10.webp");
  top: calc(557px * var(--canvas-scale));
  left: calc((1350px + var(--left-offset)) * var(--canvas-scale));
}

#img11_CB1 {
  background-image: url("../img/indexlogo/layer_11.webp");
  top: calc(0px * var(--canvas-scale));
  left: calc((1580.5px + var(--left-offset)) * var(--canvas-scale));
}