@charset "utf-8";

.choice-top{display: flex;justify-content: center;padding-top: 70px;text-align: center;gap: 100px}
.choice-btn{position: relative;width: 183px;height: 183px;display: flex;align-items: center;justify-content: center;}
.guide-hand{top: 50%;left: 50%}
.label{width: 90px;line-height: 40px;padding-top: 3px;display: inline-block;background: #3f8a56;border-radius: 15px;font-size: 16px;margin-top: 10px;text-align: center;}
.choice{border-radius: 25px;background: #29333e;border: 4px solid #3c4958;margin: 40px 30px;height: 264px;position: relative;box-shadow: inset 0px 0px 23px 0px rgba(0, 0, 0, 0.21);}
.choice .area{width: 100%;height: 100%;display: flex;align-items: center;padding: 0 70px;gap: 50px}
.choice .title{width: 255px;line-height: 39px;padding-top: 3px;font-size: 21px;background: linear-gradient( 360deg, rgb(47,69,96) 0%, rgb(79,133,192) 100%);border-radius: 7px 7px 20px 20px;box-shadow: 1.314px 11.314px 46px 0px rgba(29, 36, 45, 0.64);text-align: center;position: absolute;top: -14px;left: 25px}


.btn-cont{position: absolute;width: 132px;height: 85px;display: flex;align-items: center;justify-content: center;font-size: 20px;background: linear-gradient( 360deg, rgb(45,74,109) 0%, rgb(103,137,177) 100%);border-radius: 18px;right: 18px;bottom: 18px;color: #fff;line-height: 1.2;padding-top: 5px;box-shadow: 1px 1px 1px rgba(255,255,255,.7) inset, -1px -1px 3px rgba(255,255,255,.1) inset, 8px 8px 30px 0px rgba(29, 36, 45, 0.64);font-weight: 500;letter-spacing: 0;}
.btn-cont.disabled{background: linear-gradient( 360deg, rgb(41,51,62) 0%, rgb(60,73,86) 100%);box-shadow: 1px 1px 1px rgba(255,255,255,.1) inset, -1px -1px 3px rgba(255,255,255,.1) inset, 8px 8px 30px 0px rgba(29, 36, 45, 0.64);color: rgba(255,255,255,.4);}
.btn-cont:not(.disabled) .guide-hand{display: block;}
.btn-cont .guide-hand{top: 50%;left: 80%}

#showMsg{position: absolute;top: 0;left: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;}
#showMsg>p{width: 260px;line-height: 90px;padding-top: 8px;color: #fff;background: linear-gradient( 360deg, rgb(73,83,99) 1%, rgba(131,158,167,.8) 100%);box-shadow: 8px 8px 35px 0px rgba(29, 36, 45, 0.64);border-radius: 20px;text-align: center;}

.virtual-cont{display: flex;align-items: center;justify-content: center;}
.cont{width: 450px;height: 248px;position: relative;}
.result{position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;display: flex;align-items: center;justify-content: center;flex-direction: column;animation: fadeIn 1s 1.5s both;}
.result .label{width: auto;padding: 3px 15px 0;min-width: 160px;margin-top: 30px;}
.virtual-cont:not(.show) .result{display: none;}
.virtual-cont.show .cont{animation: fadeOut 1s .5s both;pointer-events: none;}

.ele{position: relative;display: inline-block;vertical-align: top;font-weight: 500}
.ele .num{font-size: 21px;position: absolute;top: 50%;left: 50%;transform: translate(-45%,-45%);}

.drag{position: absolute;cursor: move;top: 135px;left: 329px}
.drag:not(.show){pointer-events: none;}

#virtual2 .cont, #virtual3 .cont{width: 512px;height: 318px}
#virtual3 .drag{top: 135px;left: 329px;}

#virtual4 .cont, #virtual5 .cont{width: 505px;height: 389px;display: flex;align-items: center;justify-content: center;}

#virtual4 .drag1{top: 0;left: 384px}
#virtual4 .drag2{top: 276px;left: 0}
#virtual4 .drag3{top: 276px;left: 384px}

.drag .hand{animation: move 2s 1s both}
#virtual3 .drag .hand{animation-name: move2;}
.drag1 .hand{animation-name: move3;}
.drag2 .hand{animation-name: move4;}
.drag3 .hand{animation-name: move5;}

#virtual5 .drag4{top: 0;left: 0}
#virtual5 .drag1{top: 0;left: 384px}
#virtual5 .drag2{top: 276px;left: 0}
#virtual5 .drag3{top: 276px;left: 384px}

.drag4 .hand{animation-name: move6;}


@keyframes move {
    100% {
        transform: translate(-350%, -160%);
    }
}

@keyframes move2 {
    100% {
        transform: translate(-380%, -200%);
    }
}

@keyframes move3 {
    100% {
        transform: translate(-165%, 100%);
    }
}

@keyframes move4 {
    100% {
        transform: translate(140%, -130%);
    }
}

@keyframes move5 {
    100% {
        transform: translate(-165%, -130%);
    }
}

@keyframes move6 {
    100% {
        transform: translate(138%, 102%);
    }
}




.guide-result{width: 480px;min-width: 0;word-break: keep-all;text-align: left;}