@charset "utf-8";

.btn{background: #51C3DC;border-color:#8AE0F2;box-shadow: 0 8px #2D81CF !important}
.icon-home{background-color: #FF8179;box-shadow: 2px 2px #DB5249}
.icon-close{background-color: #FF8179}
.btn-start{background: #FA6377;border-color: #FF98A6;box-shadow: 0px 8px #E1465B !important}
.btn-reset{background: #C063E1;border-color: #E497FF;box-shadow: 0px 8px #9A4FB5 !important}
.btn-finish {background: #FFB11B;border-color: #FFDB5B;box-shadow: 0px 8px #FF8A00 !important}
.result-desc>div{width:806px}
.bx{width:600px;padding:22px;border-color: #FFC7CA;box-shadow: 8px 8px #EA7080}
.bx h3{color: #FA6377}
#intro .intro-title {top:39px;width: 640px}
#intro .intro-subtitle {top:271px;height: 43px}
#round .bx{top: 40px;bottom: auto;z-index:10;transform: translate(-50%, calc(-100% - 50px) ) !important}
#round .bx-inner{padding: 36px 68px;border-color: #FFC7CA;box-shadow: 0 10px #EA7080}
.start #round .bx{transform: translateX(-50%) !important}
#ending .bx{width: 600px;padding: 58px 40px;border-color: #FFC7CA;box-shadow: 8px 8px #EA7080}
#floor {position: absolute;height: 95px;width: 100%;bottom: 0}
.controler{width: 100%;height: 100%;margin-top: 0}
[class^=answer-type-]{position:relative;width:100%;height:100%;margin:0}
[class^=answer-type-] li{position:absolute;left:0;width: 100px;height: 16px;margin:0 !important;transform: translateY(calc( -100% - 56px ))}
.answer-type-choice label{position: absolute;top: 0;left: 50%;margin:0;padding:8px;background-color:#fff;border-radius: 10px;white-space: nowrap;pointer-events: none;transform: translateX(-50%);height:auto;}
.answer-type-choice li:before, .answer-type-choice li:after{content: '';position: absolute;top: 0;left: 50%;width: 88px;height: 124px;background: url(../img/game06/common/aicon.png) no-repeat center / 100% auto;transform: translate(-50%, -111px);transition: .5s}
.answer-type-choice li:before{top: 7px;width: 180px;height: 60px;margin-left: -2px;background-image: url(../img/game06/common/ai-miss.png);transform: translate(-50%);opacity: 0;transition: none}
.answer-type-choice label>b{left:20px}
.answer-type-choice label>div{padding:8px;background-color:#fff !important;box-shadow: none;border: 1px solid #FFAFAF;border-radius: 10px}
.answer-type-choice label>div:after{display: none}
.answer-type-choice label:hover>div{background-color:#fff !important}
.answer-type-ox label:after{transform: translate(-50%, -72px)}
.answer-type-ox label>div{width: 80px !important; height:80px !important; background-size: 65px auto !important}
.answer-type-ox label>div:after{display: none}
.answer-type-ox label>div{width: 56px;height: 56px}
.answer-type-ox li:first-child{top: -96px;left: 428px}
.answer-type-ox li:last-child{left: 751px}
.answer-type-select li:first-child{top: -156px;left: 270px}
.answer-type-select li:nth-child(2){top: 0;left: 601px}
.answer-type-select li:last-child{top: -80px;left: 936px}
.answer-type-select{margin-top:0}
.answer-type-select label>div{padding: 8px 12px}
#round .guide{pointer-events: none}
#round .guide-obj{bottom: 22px;left: 510px;width: 266px;height: 159px;background: url(../img/game06/common/guide-obj.png) no-repeat center / cover}
#round .guide-line{bottom: 100px;left: 50%;transform: translateX(-50%)}
.guide-open #round .guide-line{animation: flash 1s infinite forwards}
#round .guide-line:before, #round .guide-line:after{content: '';position: absolute;left: -210px;width: 105px;height: 37px;background: url(../img/game06/common/guide-line.png) no-repeat center / cover}
#round .guide-line:after{left: 105px;transform: scale(-1, 1)}
#round .guide-balloon{left: 492px;bottom: 201px;padding: 20px 31px;background: rgba(53, 61, 66, .9);border: none;font-size: 26px;text-align: center}
#round .guide-balloon:after{top: 100%;right: auto;left: 50%;width: 28px;height: 9px;background-image: url(../img/game06/common/guide-tail.png);transform: translateX(-50%)}
.basket-container{position: absolute;bottom: 37px;z-index: 10;width:100%;height:117px;padding:0 50px}
#basket{position: absolute;left: 537px;width: 210px;height: 118px}
#basket:after{content:'';position:absolute;bottom:0;left:0;z-index:10;width:100%;height:100%;background: url(../img/game06/common/adrag.png) no-repeat center / cover}
#basket.ui-draggable-disabled{pointer-events: none}
.basket-inner{display: flex;align-items: center;justify-content: center;flex-direction: row-reverse;position: absolute;bottom: 100px;left: 50%;width: 182px;height: 54px;transform: translateX(-50%)}
.basket-inner:after{content: '';position: absolute;top: -37px;left: calc( 100% - 35px );width: 106px;height: 54px;background: url(../img/game06/common/ai-miss2.png) no-repeat center / 100%;transform-origin: bottom left;transform: scale(0);transition: none}
#basket i{display:inline-block;position: relative;width: 84px;height: 86px;margin: 0 -22px;background: url(../img/game06/common/ai.svg) no-repeat bottom / auto 100%}
.ai-miss{position: absolute;top:1px;right: 40px}
.ai-miss:before{content: '';position: absolute;bottom: -1px;left: -74px;width: 180px;height: 60px;background: url(../img/game06/common/ai-miss.png) no-repeat bottom / auto 100%;opacity: 0;transform: rotate(0deg)}
.ai-miss i{position:relative;width: 98px;height: 79px}
.miss .basket-inner:after{transform: scale(1);transition: .25s .3s;animation: fadeOut .5s 1.5s forwards}
.miss .ai-miss{animation: missAni1 1s linear forwards}
.miss .ai-miss:before{animation: fadeIn .15s 1s forwards}
.miss .ai-miss i{animation: missAni2 1s linear forwards}
.miss .basket-inner .catch{animation: fadeOut .5s forwards;width:0px !important}
.miss .answer-type-choice li{animation: fadeOut .5s forwards}
.answer-type-choice li.miss:before{opacity: 1;transition: .15s .3s}
.answer-type-choice li.catch{animation: fadeOut .5s forwards}
.answer-type-choice li.hits:after{transform: scale(0.95) translate(-50%, -51px) rotate(45deg)}
.answer-type-choice li.hits label{opacity: 0;height: 0}
#life{background: #FFC7CA;box-shadow: 8px 8px #EA7080}
#life i{background-image: url(../common/img/icon-star-pink.png)}
#life i.off{background-image: url(../common/img/icon-star-pink-off.png)}
[data-page] .interaction{display:none;opacity: 1}
[data-page="1"] .interaction.page01, [data-page="2"] .interaction.page02, [data-page="3"] .interaction.page03{display: block}

/* social */
.social #round .bx{top:105px;transform: translate(-50%, calc(-100% - 118px) ) !important}
.social .start #round .bx{transform: translateX(-50%) !important}

@keyframes missAni1 {
    0% {transform:translate(0px, 0px) scale(0) translate(-50%, -50%)}
    20% {transform:translate(55px, -40px) scale(1) translate(-50%, -50%)}
    40% {transform:translate(98px, -65px) scale(1) translate(-50%, -50%)}
    60% {transform:translate(141px, -70px) scale(1) translate(-50%, -50%)}
    80% {transform:translate(159px, -56px) scale(1) translate(-50%, -50%)}
    100% {transform:translate(190px, 31px) scale(1) translate(-50%, -50%)}
}
@keyframes missAni2 {
    20% {
        transform: scale(1.1) rotate(83deg)
    }
    40% {
        transform: scale(1.1) rotate(136deg)
    }
    60% {
        transform: scale(1.1) rotate(189deg)
    }
    80% {
        transform: scale(1.1) rotate(242deg)
    }
    100%{
        transform:  scale(1.1) rotate(360deg)
    }
}
@keyframes missAni3 {
    95%{
      opacity: 0
    }
    100%{
        opacity: 1
    }
}

#act .guide{opacity: 1;visibility: visible;transition: .5s}
.game-wrp.page01 #act .guide-obj, [data-page="1"] #act .guide-obj{bottom: 200px;left: 687px;width: 165px;height: 56px;background: url(../img/game06/page01/act-guide-obj.png) no-repeat center / cover}
.game-wrp.page01 #act .guide-line, [data-page="1"] #act .guide-line{top: 310px;left: 581px;width: 154px;height: 130px;background-image: url(../img/game06/page01/act-guide-line.png);background-size: 100% auto}
.game-wrp.page01 #act .guide-move, [data-page="1"] #act .guide-move{top: 482px;left: 753px;transform: translate(11px, 12px) translate(-50%, -50%);}
.game-wrp.page01 #act.show .guide-move, [data-page="1"] #act.show .guide-move{animation: guide-line-move01 2.5s infinite 1s}
.game-wrp.page01 #act .guide-balloon, [data-page="1"] #act .guide-balloon{top: 450px;left: 863px}

.game-wrp.page02 #act .guide-obj, [data-page="2"] #act .guide-obj{bottom: 200px;left: 639px;width: 229px;height: 56px;background: url(../img/game06/page02/act-guide-obj.png) no-repeat center / cover}
.game-wrp.page02 #act .guide-line, [data-page="2"] #act .guide-line{top: 305px;left: 534px;width: 201px;height: 135px;background-image: url(../img/game06/page02/act-guide-line.png);background-size: 100% auto}
.game-wrp.page02 #act .guide-move, [data-page="2"] #act .guide-move{top: 482px;left: 753px;transform: translate(11px, 12px) translate(-50%, -50%)}
.game-wrp.page02 #act.show .guide-move, [data-page="2"] #act.show .guide-move{animation: guide-line-move02 2.5s infinite 1s}
.game-wrp.page02 #act .guide-balloon, [data-page="2"] #act .guide-balloon{top: 450px;left: 870px}

.game-wrp.page03 #act .guide-obj, [data-page="3"] #act .guide-obj{bottom: 200px;left: 666px;width: 294px;height: 56px;background: url(../img/game06/page03/act-guide-obj.png) no-repeat center / cover}
.game-wrp.page03 #act .guide-line, [data-page="3"] #act .guide-line{top: 352px;left: 466px;width: 268px;height: 102px;background-image: url(../img/game06/page03/act-guide-line.png);background-size: 100% auto}
.game-wrp.page03 #act .guide-move, [data-page="3"] #act .guide-move{top: 482px;left: 753px;transform: translate(11px, 12px) translate(-50%, -50%)}
.game-wrp.page03 #act.show .guide-move, [data-page="3"] #act.show .guide-move{animation: guide-line-move03 2.5s infinite 1s}
.game-wrp.page03 #act .guide-balloon, [data-page="3"] #act .guide-balloon{top: 465px;left: 974px}

#act.show .guide-balloon {animation: fadeIn .5s forwards}

@keyframes guide-line-move01 {
    0% {transform:translate(11px, 12px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    10% {transform: translate(11px, -30px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    20% {transform:translate(10px, -65px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    30% {transform:translate(1px, -98px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    40% {transform:translate(-31px, -126px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    50% {transform:translate(-74px, -128px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    60%, 100% {transform:translate(-112px, -106px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
}

@keyframes guide-line-move02 {
    0% {transform:translate(11px, 12px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    10% {transform: translate(11px, -30px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    20% {transform:translate(10px, -65px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    30% {transform:translate(1px, -98px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    40% {transform:translate(-31px, -120px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    50% {transform:translate(-61px, -135px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    60% {transform:translate(-111px, -135px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    70%, 100% {transform:translate(-155px, -116px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
}

@keyframes guide-line-move03 {
    0% {transform:translate(11px, 12px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    10% {transform: translate(1px, -31px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    20% {transform:translate(-37px, -69px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    30% {transform:translate(-76px, -84px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    40% {transform:translate(-131px, -85px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    50% {transform:translate(-187px, -63px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
    60%, 100% {transform:translate(-210px, -42px) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75)}
}

.interaction{top: 0;left: 0;width: 100%;height: 100%;transform: none}
.interaction>*{position: absolute}
.drag-area{top: 519px;left: 683px;width:181px;z-index: 10}
.drag-area>img{position: relative;z-index: 10}
.drag-box{display: flex;align-items: center;justify-content: center;position: absolute;bottom: 63px;left: 50%;width: 100%;transform: translateX(-50%)}
.drag-box>div{position: relative;width: 72px;height: 75px;margin: 0 -5px}
.game-wrp.page01 .drag-box>div, [data-page="1"] .drag-box>div{margin: 0 -4px}
.drag-box>div.dropped{width: 0}
.drag-item{position:absolute;width: 100%;height: 100%;background: url(../img/game06/common/ai.svg) no-repeat center / 100% auto}
.drop-box>*{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)}
.drop-box>*:not(:first-child){opacity: 0;transition: .5s}
.bg-obj01{left: 217px;top: 287px;transform: scale(-1, 1) rotate(-10deg);animation: flying-ani01 3s linear .25s infinite alternate}
.bg-obj02{left: 177px;top: 385px;animation: flying-ani01 5s linear .5s infinite alternate}
.bg-obj03{left: 991px;top: 326px;animation: flying-ani01 3.5s linear .75s infinite alternate}
.bg-obj04{left: 1052px;top: 410px;transform: scale(-1, 1) rotate(-10deg);animation: flying-ani02 2.5s linear .25s infinite alternate}
@keyframes flying-ani01 {
    50% {
        margin-top: -20px
    }
}
@keyframes flying-ani02 {
    50% {
        margin-top:-6px;margin-right: -3px;
    }
}
.ai01{top: 201px;left: 78px;width:140px}
.ai02{top: 45px;left: 41px;width:215px}
.ai03{left: 185px;top: 175px;animation: rolling-ani01 2.5s linear .25s infinite alternate;z-index:1}
.ai04{left: 135px;top: 188px;animation: rolling-ani02 2s linear .5s infinite alternate;z-index:1}
.ai05{left: 41px;top: 68px;display: none}
.ai06{left: 0px;top: 159px}
.ai07{left: 344px;top: 175px;z-index:1}
.intro-ai .ai03{left: 239px;top: 219px}
.intro-ai .ai04{left: 195px;top: 229px}
.intro-ai .ai06{left: 37px;top: 182px}
.intro-ai .ai07{left: 365px;top: 222px}
.end-ai .ai01{display: none}
#ending .bg-obj01{top: 323px;left: 226px}
#ending .bg-obj02{left: 135px;top: 388px}
#ending .bg-obj03{left: 984px;top: 289px}
#ending .bg-obj04{left: 1045px;top: 370px}

/* page01 */
.page01 .intro-ai{top: 277px;width: 476px;height: 292px;margin-left: 11px}
.page01 .intro-ai01{top: 65px;left: 249px}
.page01 .drop-box{top: 304px;left: 468px;width: 208px;height: 305px}
.page01 .end-ai{top: 399px;width: 415px;height: 244px;margin-left: -20px}
.page01 .end-ai01{left: 208px;width:209px}

/* page02 */
.page02 .intro-ai{top: 283px;width: 397px;height: 238px;margin-left: -25px}
.page02 .intro-ai01{top: 58px;left: 251px}
.page02 .drag-area{left: 633px; width: 246px}
.page02 .drop-box{top: 304px;left: 436px;width: 191px;height: 305px}
.page02 .ai-fill05, [data-page="2"] .ai-fill05{top: 380px;left: 437px;width: 191px;height: 229px;opacity: 0;transition: .4s 1s}
.page02 [data-drop="3"]+.ai-fill05,
[data-page="2"] [data-drop="3"]+.ai-fill05{opacity: 1}
.page02 .end-ai{top: 399px;width: 394px;height: 239px;margin-left: -20px}
.page02 .end-ai01{left: 208px; width: 178px}

/* page03 */
.page03 .intro-ai{top: 298px;width: 397px;height: 238px;margin-left: -25px}
.page03 .intro-ai .ai03 {top:196px; left: 180px}
.page03 .intro-ai .ai04 {top:215px; left: 133px}
.page03 .intro-ai01{top: 107px;left: 194px}
.page03 .drag-area{left: 660px; width: 310px}
.page03 .drop-box{top: 382px;left: 329px;width: 310px;height: 266px}
.page03 .end-ai{top: 399px;width: 455px;height: 210px;margin-left: -20px}
.page03 .end-ai .ai07 {top:185px;left:405px}
.page03 .end-ai01{top:61px;left: 195px; width: 250px}

@keyframes rolling-ani01 {
    50% {transform: translate(-2px, 6px) rotate(-11deg);
    }
}
@keyframes rolling-ani02 {
    50% {
        transform: translate(0, -4px) rotate(12deg)
    }
}