/* #scenario_04-color-pick{
    width: 100%;
    max-width: 410px;
  }
   */
  /* #scenario_04-modal_a .color-pick-btn {
    position: absolute;
    width: 3.8%;
    height: 2.5%;
    top: 21.6%;
    left: 19%;
    cursor: pointer;
  } */
  /* #scenario_04-modal_a .color-pick-btn.button_a {
    left: 19%;
  }
  
  #scenario_04-modal_a .color-pick-btn.button_b {
    left: 27.4%;
  }
  
  #scenario_04-modal_a .color-pick-btn.button_c {
    left: 36%;
  }
  
  #scenario_04-modal_a .color-pick-btn.button_d {
    left: 44.5%;
  }
  
  #scenario_04-modal_a .color-pick-btn.button_e {
    left: 53%;
  }
  
  #scenario_04-modal_a .color-pick-btn.button_f {
    left: 61.6%;
  }
  #scenario_04-modal_a .color-pick-btn.button_g {
    width: 24%;
    height: 6%;
    top: 83%;
    left: 38%;
    display: none;
  }
  #scenario_04-modal_a .color-pick-btn.button_g.active{
    display: block;
  }
  
   */
  #scenario_04{
    background-image: url(../images/common/background_01.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #scenario_04-modal_a,
  #scenario_04-modal_b{
    width: 440px;
  }
  /* #scenario_04-modal_a.active,
  #scenario_04-modal_b.active{
    opacity: 1; 
  } */
  #scenario_04-modal_a::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
    width: 95%;
    height: 85%;
    border-radius: 8px;
    z-index: -1;
  }
  #scenario_04-modal_b::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
    width: 95%;
    height: 95%;
    border-radius: 8px;
    z-index: -1;
  }
  #scenario_04-modal_a .button_a{
    position: absolute;
    width: 30%;
    height: 9%;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  #scenario_04-modal_a .pointer {
    width: 80%;
    max-width: 352px;
    aspect-ratio: 1.7 / 1 auto;
    top: 84%;
    left: 57%;
    opacity: 0;
  }
  #scenario_04-modal_b .pointer {
    width: 80%;
    max-width: 259px;
    aspect-ratio: 1.7 / 1 auto;
    top: 82%;
    left: 64%;
  }
  #scenario_04-modal_b .button_a{
    position: absolute;
    width: 44%;
    height: 9%;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  #scenario_04 .air_circle{
    position: absolute;
    top: 0;
    left: 50%;
    width: 95.454%;
    transform: translateX(-50%);
    transition: opacity 1s;
  }
  #scenario_04-modal_a .air_circle{
    opacity: 1;
  }
  #scenario_04-modal_b .air_circle{
    opacity: 0;
  }
/* 
  
  #scenario_04 .modal_bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: 100%;
    z-index: -1;
    width: 440px;

  }


  #scenario_04 .air_circle img
    {
      width: calc(100% / 7 * 5);
      position: absolute;
      top: 8%;
      left: 50%;
      transform: translate(-50%, 0);
  }
   */
  /* #scenario_04-modal_a[data-action="0"] .pointer {
  } */
  
  /* #scenario_04-modal_a[data-action="1"] .pointer {
    top: 79%;
    left: 49%;
  } */
  /* #scenario_04-modal_a .pointer::after {
    content: "";
    position: absolute;
    width: max-content;
    padding: 8px 39px;
    background-color: #154EDE;
    border-radius: 34px;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    display: none;
  } */

  /* #scenario_04-modal_a[data-action="0"] .pointer::after {
      content: "1. 색상 선택";
      display: block;
      top: 90%;
      left: 140%;
      transform: translateX(-50%);
      padding: 8px 30px;
  }
  #scenario_04-modal_a[data-action="1"] .pointer::after {
    content: "2. '적용하기' 버튼 누르기";
    display: block;
    top: 70%;
    left: 210%;
    transform: translateX(-50%);
  } */

  @media (max-height:920px) {
    #scenario_04-modal_a{
      width: 400px;
      top: 45%;
    }
    #scenario_04-modal_b{
      width: 400px;
      top: 45%;
    }
  }
  @media (max-width:768px) {
    #scenario_04-modal_a,
    #scenario_04-modal_b {
      width: 100%;
      top: 45%;
      max-width: 300px;
    }
    #scenario_04-color-pick{
      max-width: none;
    }
    #scenario_04-modal_a .pointer{
      top: 86%;
      left: -7%;
    }
    #scenario_04-modal_a .button_a{
      width: 50%;
    }
    #scenario_04-modal_b .pointer{
      /* max-width: 167px; */
      width: 63%;
      top: 88%;
      left: 53%;
    }
    #scenario_04-modal_b .button_a {
      width: 69%;
    }

    #scenario_04 .modal_bg{
      width: 100%;
      top: 45%;
      max-width: 300px;
    }

  }
  @media (max-width:500px) {
    #scenario_04 .modal_bg,
    #scenario_04-modal_a,
    #scenario_04-modal_b {
      max-width: 77vw;
    }
  }