@charset "utf-8";
.icon-plus{position: absolute;bottom: -40px;left: 50%;transform: translateX(-50%)}
#virtual1.guide-open .icon-plus{animation: icon-plus-ani 1.5s 3s forwards}
#virtual1 .guide-ai{position: absolute;top: 333px;left: 1000px;width: 268px;height: 106px; transition: all 0.3s;}
#virtual1 .guide-ai .bubble {padding: 29px 8px; height: 180px;}
#virtual1 .char-ani {top: 203px;left: 50%; transform: translateX(-50%); width: 249px; height:auto}
#virtual1 .guide-wrp {z-index: 10;}
#virtual1 .guide-line{position: absolute;top: 319px;left: 200px;width: 130px;height: 218px;opacity: 0;animation: fadeIn .5s 1s forwards; background: url(../img/312_e_sc_01/guide-line.png) no-repeat 0 0 / auto 100%}
#virtual1 .guide-hand{top: 291px;left: 184px;animation: guideHandAni1 2.5s forwards 2s;transform: translateY(0);opacity: 0}

div[class^=label-box]{padding: 47px 22px 22px; border-radius: 16px; background: linear-gradient(180deg, #CAEBE5 -27.63%, #B5E5DD 42.17%), #FFF; box-shadow: 0px 6px 0px 0px #95CDC2;z-index: 0;}
.label-box2 {background: linear-gradient(180deg, #FFE2AB -27.63%, #FFDD9E 100%) !important; box-shadow: 0px 6px 0px 0px #FCBE85 !important;}
[class^=label-tit]{position: absolute; left: 179px; top: 80px; pointer-events: none; padding: 10px 27px; border-radius: 30px;background: linear-gradient(to top, #00D388, #44E3BB);box-shadow: 0 6px #0BA678;font-size: 28px;color: #fff;transition: none; z-index: 1; line-height: 1.4;}
.label-tit2, .label-tit4 {left: 647px; background: linear-gradient(180deg, #FFAE11 0%, #F90 100%), linear-gradient(180deg, #FFF 0%, #F0F0F0 100%);
  box-shadow: 0px 6px 0px 0px #F67600;}
[class^=label-tit]::before {content: '';position: absolute;top: 9%;left: 6%;width: 12px;height: 7px;;background: url(../common/img/btn-light.svg) no-repeat center / auto 100%}

.card-list {display: flex; flex-wrap: wrap; min-width: 350px; margin: 0 -10px;}
.card-list .card {position: relative; flex: 0 0 33.333%; padding: 10px; background: transparent; border: 0;}
.card-list .card::before {content: '';position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 21px); height: calc(100% - 21px); border-radius: 8px; border: 2px dashed #2AD2B4; z-index: 0;}
.label-box2 .card-list .card::before {border-color: #ff9c03 !important;}
.card-list .card .drag-obj {z-index: 1;}
.card-list .card .inner {display: inline-block; width: 100%; height: auto; border-radius: 8px; border: 2px dashed #2AD2B4;}
.card-list .btn-plus {position: absolute; right: 14px; top: -6px;z-index: 1;}

.drag-drop {position: absolute; width: 816px; left: 136px; top: 103px;}
.drag-area>div.drag-obj {position: relative; margin:0 16px}
.drag-obj img{max-width:103px;}
.drag-obj.dropped {display:none}
.drag-obj.ui-draggable-dragging{transform: scale(1.5)}
.drag-obj.ui-draggable-dragging .icon-plus{display: none}
.drop-area {justify-content: center; top:279px; left:62px; width: 100%; height: 228px; margin-top: 24px; transition: all 1s 1s}
.drop-area .box{margin: 0 8px;}
.drop-tit{display: block;position: absolute;top: 0;width: 100%;height: 54px;background: #3190C7;border-radius: 16px 16px 0 0;font-size: 20px;text-align: center;line-height: 54px;color: #fff;margin:0 !important}
.drop-obj {justify-content: center; padding:14px 36px; height: 100%;}
.drop-obj img{width: 165px; max-width: 250px; margin-left: 35px;}
.drop-obj .icon-plus {display: none}
.drop-control {right: 236px;}

.icon-modal-close {top: -20px; right: -23px;}
.modal .img-box {position: relative; height: 575px; padding: 30px 25px 0;background: #e9f5f6; border-radius: 40px}
.modal .img-box.bg-org {background-color: #fffcdb;}
.modal .img-box [class^=label-tit]{position: absolute; left: 50%; top: -49px; transform: translateX(-50%); width: max-content;}
.modal .txt-wrap {width: 100%; margin-top: 36px; font-weight: 400; line-height: 54px;}
.modal .blank {display: inline-block; min-width: 268px; height: 54px; background: #fff; border-radius: 15px; border: 2px solid #b0c5dc;vertical-align: middle; background: #fff;}

/* matching 성공시 카드색상 */
.card.matching .drag-obj {position: relative;}
.card.matching .drag-obj::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background:url(../img/312_e_sc_01/star-red.png)no-repeat center / cover;}
.card.matching[data-match=ylw] .drag-obj::after {background-image: url(../img/312_e_sc_01/star-ylw.png);}
.card.matching[data-match=blue] .drag-obj::after {background-image: url(../img/312_e_sc_01/star-blue.png);}
.card.matching[data-match=purple] .drag-obj::after {background-image: url(../img/312_e_sc_01/star-purple.png);}
.card.matching[data-match=grn] .drag-obj::after {background-image: url(../img/312_e_sc_01/star-grn.png);}
.card.matching[data-match=org] .drag-obj::after {background-image: url(../img/312_e_sc_01/star-org.png);}

/* modal-match */
.modal-match .modal-content {border-radius: 0; box-shadow: none; background: transparent;}
.modal-match .modal-body{padding-top: 96px;}
.modal-match .modal-dialog{max-width: 100%; margin: 14px 24px 0; height: 700px;}
.modal-match .img-box {padding: 15px 10px;border-radius: 20px;height: 415px;}
.modal-match .txt-wrap {margin-top: 20px; font-size: 20px; line-height: 40px;}
.modal-match .icon-modal-close {right: 0; top: 0;}
.modal-match [class^=label-tit] {top: -53px;}
.modal-match .guide-ai {position: relative; width: 356px; height: 81px; top: 0; left: 0; margin-top: 20px;}
.modal-match .bubble {padding: 12px 10px;}
.modal-match .bubble.right .before {top: 36%; left: 99%; width: 25px; height: 25px;}
.modal-match .bubble-cont {opacity: 1;}
.modal-match .bubble-cont span {display: inline-block; width: 88px; height: 28px; border-radius: 8px; background: #d9d9d9; vertical-align: middle;}

.modal-match .char-ani {width: 282px; height: 210px; bottom: -103px; left: 321px;}
.modal-match .blank {position: relative; min-width: 160px; height: 40px; z-index: 0;}
.modal-match .blank canvas{
	position: absolute;
	top: 0px;
	left: -3px;
	top: -2px;
	/* width: 142px; */
	border-radius: 10px;
}
.modal-match .guide {animation: guide .5s 5s forwards;position: relative; z-index: 10;}
.modal-match .guide-line{position: absolute;top: 50%;left: 0; transform: translateY(-50%); width: 100%;height: 36px;opacity: 1;animation: fadeIn .5s 1s; background: url(../img/312_e_sc_01/guide-line2.png) no-repeat center/ 86% auto}
.modal-match .guide-hand{top: -40px;left: -80px;animation: guideHandAni2 1.0s forwards 2s;transform: translateY(0);opacity: 0;}
@keyframes guide{
  0%{
	opacity: 1;
  }
  100% {
	opacity: 0;
  }
}
@keyframes guideHandAni1{ 
  30%{
	opacity: 1;
  }
  100% {
	opacity: 1;
	transform: translate(110px, 210px)
  }
}
@keyframes guideHandAni2{ 
  0%{
	opacity: 1;
  }
  20%{
	opacity: 1;
	transform: translate(30px, 5px)
  }
  40% {
	opacity: 1;
	transform: translate(60px, -5px)
  }
  60%{
	opacity: 1;
	transform: translate(90px, 5px)
  }
  80% {
	opacity: 1;
	transform: translate(120px, -5px)
  }
  100%{
	opacity: 1;
	transform: translate(130px, 5px)
  }
}