#scenario_07 {
}

/* 바코드 스캔 시나리오 */
#scenario_07-modal_a {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
}

#scenario_07-modal_a .button_a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.draggable-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1544px;
    aspect-ratio: 1544 / 910 auto;
    overflow: hidden;
    background-image: url(../images/scenario_07/scan_bg.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.draggable-image {
    position: absolute;
    cursor: grab;
    transform: translate(238%, 0);
    transition: transform 0.2s ease-out;
    width: 28%;
}

.target-area {
    position: absolute;
    width: 25%;
    height: 90%;
    /* background-color: rgba(255, 0, 0, 0.5); */
    top: 50%;
    left: 33%;
    transform: translate(-50%, -50%);
    z-index: 9;
    /* border: 10px dashed darkcyan; */
}

#scan_pad {
    position: absolute;
    top: 50%;
    left: 33%;
    transform: translate(-50%, -50%);
    width: 44%;
}
#draggable-container1 .nfc {
    position: absolute;
    top: 60%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 5.247%;
}

#draggable-container1 .follow {
    width: 12.4%;
    height: 21%;
    position: absolute;
    top: 70%;
    left: 72%;
    z-index: 9;
    animation: followHand 3s ease-in-out infinite;
}
@keyframes followHand {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-300%);
    }
}
@keyframes followHand_mo {
    0% {
        transform: rotate(90deg) translateX(-300%);
    }
    100% {
        transform: rotate(90deg) translateX(0%);
    }
}

#scenario_07-modal_b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 962px;
    aspect-ratio: 1/ 0.9 auto;
}
#scenario_07-modal_b .ing_txt {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    animation: ing_ani 1s linear infinite;
}
#scenario_07-modal_c {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1097px;
}
#scenario_07-modal_c .button_a {
    position: absolute;
    top: 78%;
    left: 70%;
    width: 22%;
    height: 10%;
}

#scenario_07-modal_c .pointer {
    position: absolute;
    top: 76%;
    left: 84%;
    width: 17.16%;
    height: 35%;
    aspect-ratio: 188 / 237 auto;
}

@keyframes ing_ani {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .draggable-container {
        max-width: 510px;
        aspect-ratio: 510 / 820 auto;
        background-image: url(../images/scenario_07/scan_bg_mo.png);
    }
    .target-area {
        width: 46%;
        height: 44%;
        top: 70%;
        left: 50%;
    }
    #scan_pad {
        top: 69%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 77%;
    }
    #draggable-container1 .nfc {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 27.06%;
    }
    #draggable-container1 .follow {
        width: 24.4%;
        height: 21%;
        top: 55%;
        left: 13%;
        transform: rotate(90deg);
        animation: followHand_mo 3s ease-in-out infinite;
    }
    .draggable-image {
        transform: translate(125%, 9%);
    }
}