#scenario_13 {
}

/* 스마트 버튼 */
#scenario_13-modal_a {
}

#scenario_13-video-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

#scenario_13-video-bg-mo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

#scenario_13-modal_a .button_a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 284px;
  aspect-ratio: 244 / 68 auto;
  z-index: 1;
}

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

/* 모바일 화면 */
#scenario_13-modal_b {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  aspect-ratio: 1920 / 1080 auto;
  position: relative;
}

#scenario_13-modal_b .button_a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 5 / 1 auto;
  z-index: 1;
  display: none;
}

#scenario_13-modal_b .button_b {
  position: absolute;
  top: 27%;
  left: 51%;
  width: 42%;
  aspect-ratio: 1 / 0.6 auto;
  z-index: 1;
  display: none;
}

#scenario_13-modal_b .button_c {
  position: absolute;
  top: 27.4%;
  left: 50%;
  width: 42%;
  aspect-ratio: 1 / 0.6 auto;
  z-index: 1;
  display: none;
}

#scenario_13-modal_b .button_d {
  position: absolute;
  top: 81.7%;
  left: 28%;
  width: 43%;
  aspect-ratio: 1 / 0.3 auto;
  z-index: 1;
  display: none;
}

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

#scenario_13-modal_b[data-action="2"] .button_b {
  display: block;
}

#scenario_13-modal_b[data-action="3"] .button_c {
  display: block;
}

#scenario_13-modal_b[data-action="4"] .button_d {
  display: block;
}

#scenario_13-mobile_a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 280px;
  max-width: 100%;
  aspect-ratio: 480 / 815 auto;
  /* transition: transform 1s; */
}

#scenario_13-modal_b[data-action="1"] #scenario_13-mobile_a {
  width: 309px;
  aspect-ratio: 5 / 1 auto;
  left: 50%;
  top: 67%;
}

#scenario_13-modal_b[data-action="2"] #scenario_13-mobile_a {
  transform: translate(-50%, -50%);
  left: unset;
  right: 15%;
}

#scenario_13-modal_b[data-action="3"] #scenario_13-mobile_a {
  transform: translate(-50%, -50%);
  left: unset;
  right: 15%;
}

#scenario_13-modal_b[data-action="4"] #scenario_13-mobile_a {
  transform: translate(-50%, -50%);
  left: unset;
  right: 15%;
}

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

#scenario_13-modal_b[data-action="2"] button:not(.button_b) {
  pointer-events: none;
}

#scenario_13-modal_b[data-action="3"] button:not(.button_c) {
  pointer-events: none;
}

#scenario_13-modal_b[data-action="4"] button:not(.button_d) {
  pointer-events: none;
}

#scenario_13-modal_b .pointer {
  position: absolute;
  width: 100%;
  max-width: 197px;
  transition: 1s all;
  opacity: 0;
}
#scenario_13-modal_b .pointer_a{
  top: 33%;
  left: 78%;
}
#scenario_13-modal_b .pointer_b{
  top: 31%;
  left: 74%;
}
#scenario_13-modal_b .pointer_c{
  top: 31%;
  left: 70%;
  max-width: 63.575%;
}
#scenario_13-modal_b .pointer_d{
  top: 83%;
  left: 57%;
  max-width: 157px;
}
#scenario_13-modal_b[data-action="1"] .pointer_a {
  /* opacity: 1; */
}

#scenario_13-modal_b[data-action="2"] .pointer_b {
  opacity: 1;

}

#scenario_13-modal_b[data-action="3"] .pointer_c {
  opacity: 1;

}

#scenario_13-modal_b[data-action="4"] .pointer_d {
  opacity: 1;
}

/* #scenario_13-modal_b .pointer::after {
  content: "";
  position: absolute;
  width: max-content;
  padding: 8px 40px;
  background-color: #154ede;
  border-radius: 34px;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  display: none;
}

#scenario_13-modal_b[data-action="1"] .pointer::after {
  content: "1. ‘비즈니스 TV 실행’ 클릭!";
  display:block;
  top: 100%;
  left: 100%;
  transform: translateY(-100%);
}

#scenario_13-modal_b[data-action="2"] .pointer::after {
  content: "2. '홍보 메뉴' 클릭";
  display:block;
  top: 100%;
  left: 100%;
  transform: translateY(-100%);
}

#scenario_13-modal_b[data-action="3"] .pointer::after {
  content: "3. 프리셋 선택";
  display:block;
  top: 60%;
  left: 100%;
  transform: translateY(-100%);
}

#scenario_13-modal_b[data-action="4"] .pointer::after {
  content: "4. ‘적용하기’ 버튼 클릭!";
  display:block;
  top: 4%;
  left: 56%;
  transform: translateY(-100%);
} */
button{
  border: 1px solid red;
}
.phone{
  display: none;
}
.phone_b{
  
}
@media (max-width: 768px) {
  
  /* #scenario_13-mobile_a{
    left: 35%;
    width: 364px;
  } */

  #scenario_13-modal_b[data-action="1"] #scenario_13-mobile_a {
    width: 44.73%;
    left: 50%;
    top: 67%;
  }
  #scenario_13-modal_b .pointer{
    width: 70%;
  }
  #scenario_13-modal_b[data-action="2"] #scenario_13-mobile_a,
  #scenario_13-modal_b[data-action="3"] #scenario_13-mobile_a,
  #scenario_13-modal_b[data-action="4"] #scenario_13-mobile_a{
    left: 50%;
  }
  
  #scenario_13-modal_b .button_a {
    top: 0;
    left: 0;
    aspect-ratio: 4 / 1 auto;
    width: 100%;
  }
  #scenario_13-modal_b .button_b {
    top: 26%;
    width: 44%;
  }

  /* #scenario_13-modal_b .button_c {
    top: 46.3%;
    left: 9.3%;
    width: 81.4%;
    aspect-ratio: 1 / 0.65 auto;
  } */

  #scenario_13-modal_b .button_d {
    top: 81.6%;
    left: 28%;
    width: 44%;
  }

  #scenario_13-modal_b .pointer_a {
    top: 19%;
    left: 78%;
    max-width: 326px;
  }

  #scenario_13-modal_b .pointer_b {
      top: 32%;
      left: 70%;
      width: 58.26%;
  }
  #scenario_13-modal_b .pointer_c{
    /* top: 32%;
    left: 73%;
    width: 52.3%; */
  }
  #scenario_13-modal_b .pointer_d{
    top: 83%;
    left: 57%;
    max-width: 233px;
    width: 58.259%;
  }
  /* #scenario_13-modal_b[data-action="4"] .pointer {
    top: 77%;
    left: 46%;
    max-width: 233px;
    aspect-ratio: 254 / 196 auto;
  } */
}
@media (max-width:500px) {
  #scenario_13-modal_b .pointer{
    max-width: 230px;
  }
  #scenario_13-mobile_a {
    width: 284px;
    left: 30%;
  }

}
@media (max-width:425px) {
  #scenario_13-mobile_a {
    width: 218px;
}
}