@charset "utf-8";

.plus-img{top: 138px;left: 48px;width: 1172px}
.plus-btns{display: flex;align-items: center;top: 138px;left: 48px}
.plus-btns .btn-plus {position: relative;width: 172px;height: 140px}
.virtual .label{top: -56px;padding: 0.6em 1em 0.3em;min-width:0;height:auto;border-radius: 22px;white-space: nowrap;font-size: 20px;opacity: 0;transition: opacity .5s}
.virtual .label:after{content: '';position: absolute;top: calc( 100% - 1px );left: 50%;width: 20px;height: 15px;background: url(../img/313_e_sc_01/label-tail.png) no-repeat center / 100% auto;transform: translateX(-50%)}
.virtual .btn-plus:hover .label, 
.virtual .drag-fix:hover .label{opacity: 1}
.plus-btns .btn-plus:nth-child(2){width: 226px}
.plus-btns .btn-plus:nth-child(3){width: 160px}
.plus-btns .btn-plus:nth-child(4){width: 200px}
.plus-btns .btn-plus:nth-child(5){width: 246px}
.plus-btns .btn-plus:nth-child(6){width: 164px}
.icon-plus{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)}
#virtual1.active .icon-plus{animation: icon-plus-ani 1.5s 4s forwards}

#virtual1 .guide-ai{position: absolute;top: 327px;left: 932px;width: 316px;height: 169px}
#virtual1 .char-ani {bottom: -287px;left: -75px;width: 249px}
#virtual1 .tb{position: absolute;top: 325px;left: 125px;width: 740px}
#virtual1 .tb tr>* {height: 66px}
#virtual2 .plus-wrp{top:61px}
#virtual2 .icon-plus{display: none}
#virtual2 .plus-btns .btn-plus .label {top: -42px}
#virtual2 .guide-ai{top: 328px;left: 25px;width: 316px;height: 128px}
#virtual2 .guide-ai .char-ani{bottom: -309px;left: 147px;width: 254px}
#virtual2 .guide-ai .bubble{padding:0}
#virtual1 .guide-wrp .guide-hand{top: 442px;left: 818px;animation: fadeIn 1s forwards 2.5s;transform: translateY(0);opacity: 0;}
#virtual1 .enlarge:after{top:92px;left:-36px}

.drag-fix{position: relative}
.drag-fix img{height:110px}
.drag-fix.ui-draggable-dragging{transform: scale(4)}
.drag-fix.ui-draggable-dragging .label{display: none}
.drag-area{display: flex;position: absolute;top: 200px;left: 179px}
.dragdrop .tit{position: absolute;top: 349px;left: 396px;width: 640px;height: 54px;line-height: 58px;background: #3190C7;box-shadow: 0 6px 0 #127AB7;border-radius: 16px;font-size: 20px;color: #fff;text-align: center}
.dragdrop .tit:after{content: '';position: absolute;top: 100%;left: 50%;transform: translateX(-50%);width: 326px;height: 40px;background: url(../img/313_e_sc_01/d-line.png) no-repeat center / 100% auto}
.drop-area{justify-content: space-between;position: absolute;top: 441px;left: 396px;height: 227px;width: 640px}
.drop-fix, .drop-area [data-invisible]{justify-content:center}
.drop-fix img{height: 72px}
.drop-fix span{display: none}
.drop-tit{display: block;position: absolute;top: 0;width: 100%;height: 54px;background: #7DC2EA;border-radius: 16px 16px 0 0;font-size: 20px;text-align: center;line-height: 54px;color: #fff;margin:0 !important}

#virtual2 .guide-wrp .guide-hand{top: 239px;left: 1126px;animation: guideHandAni2 2.5s forwards 2s;transform: translateY(0);opacity: 0;}
#virtual2 .guide-line{position: absolute;top: 495px;left: 722px;width: 315px;height: 174px;border-radius: 16px;border: 3px dashed #0075FF;opacity: 0;animation: fadeIn .5s 1s forwards;}
#virtual2 .guide-line:after{content: '';position: absolute;top: -239px;left: 137px;width: 279px;height: 324px;background: url(../img/313_e_sc_01/guide-line.png) no-repeat 0 0 / cover;}

@keyframes guideHandAni2{ 
  30%{
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-271px, 320px)
  }
}