#scenario_16 {
  background: url(../images/scenario_16/bg.png) no-repeat center center/cover;
}

/* 스마트 싱스 (출근하기) */
#scenario_16-modal_a {
  width: 480px;
  max-width: 100%;
  aspect-ratio: 480 / 910 auto !important;
}
#scenario_16-modal_a .button_a {
  position: absolute;
  top: 70%;
  left: 7%;
  width: 42.5%;
  aspect-ratio: 2 / 1.15 auto;
  z-index: 1;
  display: none;
}

#scenario_16-modal_a[data-action="1"]{

}
#scenario_16-modal_a[data-action="1"] .button_a {
  display: block;
}

#scenario_16-video_a {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

#scenario_16-mobile_a {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 480px;
  max-width: 100%;
  aspect-ratio: 480 / 865 auto;
  transition: transform 0.5s;
}

#scenario_16-modal_a[data-action="1"] #scenario_16-mobile_a {
  transform: translate(-50%, 0%);
}

#scenario_16-modal_a[data-action="0"] button:not(.button_a) {
  pointer-events: none;
}

#scenario_16-modal_a .pointer {
  position: absolute;
  width: 31.8%;
  aspect-ratio: 188 / 237 auto;
  opacity: 0;
  visibility: hidden;
  transition: 2s;
}

#scenario_16-modal_a[data-action="1"] .pointer {
  top: 70%;
  left: 28%;
  opacity: 1;
  visibility: visible;
}

/* #scenario_16-modal_a .pointer::after {
  content: "";
  position: absolute;
  width: max-content;
  padding: 6px 32px;
  background-color: #154EDE;
  border-radius: 34px;
  font-family: 'SamsungOneKorean', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  display: none;
} */

/* #scenario_16-modal_a[data-action="1"] .pointer::after {
  content: "출근하기 클릭";
  display: block;
  top: 100%;
  left: 100%;
  transform: translateY(-100%);
} */

/* 스마트 싱스 (업무 시작) */
#scenario_16-modal_b {
  width: 1920px;
  max-width: 100%;
  aspect-ratio: 1920 / 1080 auto;
}

#scenario_16-modal_b .button_a {
  position: absolute;
  top: 58%;
  left: 41%;
  width: 18%;
  aspect-ratio: 1 / 1 auto;
  z-index: 1;
  display: none;
}

#scenario_16-modal_b[data-action="1"] .button_a {
  display: block;
}

#scenario_16-video_b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#scenario_16-mobile_b {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  width: 1042px;
  max-width: 100%;
  /* aspect-ratio: 480 / 865 auto; */
  transition: transform 0.5s;
}

#scenario_16-modal_b[data-action="1"] #scenario_16-mobile_b {
  transform: translate(-50%, -20%) scale(1);
}

#scenario_16-modal_b[data-action="0"] button:not(.button_a) {
  pointer-events: none;
}

/* #scenario_16 #sin_tour{
  position: absolute;
  top: 28.6%;
  left: 49.89%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 953px;
  aspect-ratio: 950 / 537 auto;
  z-index: 930;
} */
#scenario_16 #sin_tour{
  position: absolute;
  top: 28.6%;
  left: 49.89%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 91.4%;
  aspect-ratio: 950 / 537 auto; 
  z-index: 930;
}
#scenario_16 #sin_tour .sin_tour{
  position: relative;
  display: block;
  width: 100% !important;
  height: 100% !important ;
  z-index: 5;
}
#scenario_16 .txt_sin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  transition: 2s all;
  /* display: none; */
  opacity: 0;
  visibility: hidden;
}
#scenario_16 #txt_1 {
  width: 44%;
  top: 83%;
  left: 26%;
}
#scenario_16 #txt_2 {
  width: 48%;
  top: 80%;
  left: 74%;
}
@media (max-width: 1590px) {
  #scenario_16-modal_b[data-action="1"] #scenario_16-mobile_b {
      transform: translate(-50%, -24%) scale(1);
      max-width: 70%;
  }
}
@media (max-width: 900px) {
  #scenario_16-modal_b[data-action="1"] #scenario_16-mobile_b {
      transform: translate(-50%, -35%) scale(1);
      max-width: 85%;
  }
}
@media (max-width: 768px) {
  /* #scenario_16-modal_b[data-action="1"] #scenario_16-mobile_b {
      transform: translate(-50%, -35%) scale(1);
      max-width: 85%;
  } */
  #scenario_16-modal_b[data-action="1"] #scenario_16-mobile_b {
      transform: translate(-50%, -13%) scale(1);
      max-width: 100%;
  }
  #scenario_16 #txt_1 {
      width: 75%;
      top: 83%;
      left: 17%;
  }
  #scenario_16 #txt_2 {
      width: 70%;
      top: 92%;
      left: 84%;
  }
}
@media (max-width: 500px) {
  #scenario_16 #txt_1 {
      width: 82%;
      top: 83%;
      left: 20%;
  }
  #scenario_16 #txt_2 {
      width: 82%;
      top: 92%;
      left: 81%;
  }
}
@media (max-height: 930px) {
  #scenario_16-mobile_b{
      max-width: 40%;
  }
}
@media (max-height: 855px) {
  #scenario_16-modal_b[data-action="1"] #scenario_16-mobile_b {
      transform: translate(-50%, -24%) scale(1);
      max-width: 100%;
  }
}