@charset "utf-8";

.game-wrp{background: linear-gradient(to bottom, #3d1c97,#6f1977)}
.icon-close{background-color: #FFC700}
.icon-home{background-color: #FFC700;box-shadow: 2px 2px #E48C25}
#life{background: #E6DBFF;box-shadow: 8px 8px #341490}
#life i{background-image: url(../img/game01/icon-star.png)}
#life i.off{background-image: url(../img/game01/icon-star-off.png)}

/* 버튼 */
.btn{background: #858AFF;border-color: #AFB2FF; box-shadow: 0px 8px #6267DB !important}
.btn-start, .step-wrp .btn{background: #42C6FF;border-color: #79D7FF;box-shadow: 0px 8px #1E9FD7 !important}
.btn-reset{background: #6BE2B7;border-color: #A4F0D5; box-shadow: 0px 8px #3FC092 !important}
#modal-guide .btn-text{display: inline-flex;justify-content: center;align-items: center;width: 40px;height: 40px;background: #AA8CFF;border: none;box-shadow: none!important;font-size: 22px;line-height: 1.3;color: #E1D7FF;cursor:default;}

/* 팝업 */
.modal-title{color: #5E33D9}
.guide-item .num{background: #42C6FF}
#modal-guide .modal-dialog{max-width: 967px}
#modal-guide .icon-close{background-color: #5E33D9}

/* 별 */
.constelacao {position: absolute;left: 0;top: 0;width: 100%;height: 100%}
.estrela {background-color: white;border-radius: 50%;position: absolute;animation-name: estrela;animation-timing-function: linear;animation-iteration-count: infinite}
.estrela.style1{animation-duration: 0.5s; animation-name: estrela}
.estrela.style2{animation-duration: 1s; animation-name: estrela}
.estrela.style3{animation-duration: 1.5s; animation-name: estrela}
.estrela.style4{animation-duration: 2s; animation-name: estrelaDestacada}

.estrela.tam1{width: 1px; height: 1px}
.estrela.tam2{width: 2px; height: 2px}
.estrela.tam3{width: 3px; height: 3px}

.estrela.opacity1{opacity: 1}
.estrela.opacity2{opacity: .5}
.estrela.opacity3{opacity: .1}

/* home */
#home .home-title {width: 879px;margin: -3px 2px}

/* intro */
#intro .step-wrp {top: 128px;left: 418px}
#intro .step-wrp::before{top: 103%;width: 83.82%;height: 25px;background-color: #9051AE;opacity: 1}
#intro .step-index li{background-color: #7146EB;color: #A080FF}
#intro .step-index li.active{background-color: #A485FF}
#intro .step-bubble{left: 52px;background-image: url(../img/game01/step-bubble.png)}
#intro .pages{z-index: 10;transform: none;left: 0;display: inline-block;width: 579px}
#intro .pages .base{position: absolute;transform: none;top: 0;left: 0;padding-left: 47px;width: 579px;animation: fadeIn 1s .5s both}
#intro .pages .base *:not(.intro-light){position: absolute}
#intro .intro-light{opacity: .5}
/* #intro .intro-char{left: 170px;bottom: 71px;max-width: none} */
[class*=page0]{width: 286px;position: absolute;top: 187px;left: 171px}
#intro .intro-obj{left: 158px;bottom: 0}
#intro .star01{left: 136px;top: 262px;animation: twinkle .5s ease-in-out infinite alternate}
#intro .star02{left: 142px;top: 302px;animation: twinkle .5s .3s ease-in-out infinite alternate}
#intro .pages .base::before{content: '';position: absolute;top: 91%;left: 24%;display: block;width: 60%;height: 11%;border-radius: 50%;background-color: #9051AE}
#intro .char-sub-wrap{position: absolute;left: 185%;bottom: 13%;transform: none;animation: fadeIn 1s .5s both}
#intro .char-sub-wrap *:not(.char-sub){position: absolute}
#intro .char-sub-wrap *{max-width: none}
#intro .char-sub{animation: flying-ani01 3s linear 0s infinite alternate}
#intro .char-sub-wrap .star02{left: 4px;top: -13px}
#intro .star03{left: 23px;top: -36px;animation: twinkle .5s ease-in-out infinite alternate}

/* round */
#round .bx-inner{padding: 36px 68px;border-color: #E6DBFF;box-shadow: 0 10px #341490}
#round .round-chr{transform: none;position: absolute;left: auto;right: 13px;bottom: 15px;width: 115px;height: 166px;background: url(../img/game01/char-mini.svg) no-repeat center / 100%;z-index: 10}
[data-page="2"] #round .round-chr{background-image: url(../img/game01/char-mini2.svg)}
[data-page="3"] #round .round-chr{background-image: url(../img/game01/char-mini3.svg)}
#round .round-chr *{display: block;position: absolute}
#round .round-chr .eyes{width: 34px;height: 19px;background: #000;top: 34px;left: 21px}
#round .round-chr .eyes:last-child{left: auto;right: 21px}
.retry+.round-chr .eyes{animation: sad01 1s forwards}
.retry+.round-chr .eyes:last-child{animation: sad02 1s forwards}
.round-chr .tear{top: 47%;right: 31%;width: 10px;height: 14px;background: url(../img/game01/tear.svg) no-repeat center / 100%;opacity: 0}
.retry+.round-chr .tear{animation: tear 1s 2 forwards}

/* ending */
#ending .bx{width: 600px;padding: 58px 40px;border-color: #FFC7CA;box-shadow: 8px 8px #EA7080}

/* act */
.guide-open .guide{transition: opacity .75s 1.25s}
.guide-obj{left: 590px;top: 211px;width: 209px;height: 282px;background-image: url(../img/game01/body-on.png);background-size: 100% auto;background-repeat: no-repeat}
.guide-line{top: 332px;left: 384px;width: 230px;height: 176px;background-image: url(../img/game01/guide-line01.png);background-size: 100% auto;background-repeat: no-repeat}
.guide-move{top: 329px;left: 597px;transition: transform 1.5s 2.25s}
.guide-open .guide-move{transform: translate(-219px, 136px)}
.guide-balloon{top: 178px;left: 420px}
.guide-balloon:after{background-image: url(../img/game01/guide-tail.svg);top: 103%;left: calc( 100% - 60px );right: auto;width: 19px;height: 13px}
.interaction{position: relative;left: auto;transform: none;height: 100%}
.interaction::before{content: "";position: absolute;top: 89%;left: 41%;width: 51.82%;height: 30px;border-radius: 50%;background-color: #9152AF;opacity: .6}
#act .bx{top: 88px;bottom: 74px;width:712px;margin-left: 229px;padding: 14px 0 0 8px;border: 16px solid #B18CFF;border-radius: 60px;box-shadow: 4px 0 0 2px #D4C0FF, -4px 0 0 2px #D4C0FF, inset 8px 8px 0 0 #EBE8F6;transform: translateY(calc( -100% - 100px )) translateX(-50%)}
#act .base{position: absolute;display: inline-block;margin-left: 47px;top: 0;left: 0}
#act .base::before{content: "";position: absolute;bottom: -12px;left: 89px;width: 360px;height: 64px;border-radius: 50%;background-color: #9051AE}
.act-obj{position: absolute;left: 111px;bottom: 0}
.act-char {position: absolute;left: 171px;bottom: 120px;width: 286px;height: 413px;background: url(../img/game01/char-base.png) no-repeat center / 100%}
.drop-box{position: absolute;top: 436px;left: 197px;width: 238px;height: 169px}
.drag-area{position: absolute;top: 0;left: 0;width: 100%;height: 100%}
.drag-item{position: absolute;z-index: 10}
.drag-item.on{pointer-events: none;z-index: 2}
.drag-item.dropped{opacity: 0;pointer-events: none}
.drag-item i{display: inline-block;background-size: 100% auto;background-repeat: no-repeat}
.body{top: 114px;left: 68px}
.body i{width: 196px;height: 266px;background-image: url(../img/game01/body-drag.png)}
.arm{top: 84px;left: 357px}
.arm i{width: 257px;height: 106px;background-image: url(../img/game01/arm-off.png)}
.face{top: 253px;left: 355px}
.face i{width: 260px;height: 233px;background-image: url(../img/game01/face-off.png)}

/* help */
.guide-open #act .char-help{opacity: 0;transition: none}
.game-wrp:not(.guide-open) .char-help{transition: .5s}
#act .char-help{left: 26px;bottom: 10px;z-index: 10;opacity: 1;transform: none;transition: .5s .5s}
#act .char-help .char-sub{transform: rotate(-45deg);animation: flying-ani02 3s linear 0s infinite alternate}
.help-balloon{position: absolute;transform: translateX(-50%);left: 50%;bottom: 135%;display: inline-block;padding: 11px 21px;background: #2F2255;border-radius: 30px;font-size: 18px;line-height: 1.3;white-space: nowrap;color: #E1D7FF;transition: .5s}
.help-balloon.off{opacity: 0}
.help-balloon::after{content: '';transform: translateX(-50%);display: block;position: absolute;top: 90%;left: 50%;width: 28px;height: 20px;
background: url(../img/game01/help-tail.svg)no-repeat center / 100%}
.help-balloon i{position: absolute;left: 8px;bottom: 77%;display: flex;justify-content: center;align-items: center;width: 30px;height: 30px;background: #AA8CFF;border-radius: 50%}
.help img{position: absolute;bottom: 120px;left: 171px}
.help-open .help img{animation: twinkle .75s ease-in-out forwards;animation-iteration-count:3}
[data-page] .drop-area{display: none;opacity: 1}
[data-page="1"] .drop-area.page01, [data-page="2"] .drop-area.page02, [data-page="3"] .drop-area.page03{display: block}

[data-page] .help img{display:none;width:286px;opacity: 1}
[data-page="1"] .help .page01, [data-page="2"] .help .page02, [data-page="3"] .help .page03{display: block}

/* page 2 */
[data-page="2"] .guide-obj{left: 880px;top: 182px;width: 268px;height: 117px;background-image: url(../img/game01/arm-on.png)}
[data-page="2"] .guide-line{top: 292px;left: 386px;width: 511px;height: 209px;background-image: url(../img/game01/guide-line02.png)}
[data-page="2"] .guide-move{top: 271px;left: 881px}
.guide-open [data-page="2"] .guide-move{transform: translate(-500px, 195px)}
[data-page="2"] .guide-balloon{top: 121px;left: 720px}
[data-page="2"] .arm i{background-image: url(../img/game01/arm-drag.png)}
[data-page="2"] .act-char{background-image: url(../img/game01/char-01.png)}

/* page 3 */
[data-page="3"] .guide-obj{left: 877px;top: 351px;width: 275px;height: 248px;background-image: url(../img/game01/face-on.png)}
[data-page="3"] .guide-line{top: 370px;left: 427px;width: 458px;height: 130px;background-image: url(../img/game01/guide-line03.png)}
[data-page="3"] .guide-move{top: 485px;left: 860px}
.guide-open [data-page="3"] .guide-move{transform: translate(-450px, -115px)}
[data-page="3"] .guide-balloon{top: 313px;left: 664px}
[data-page="3"] .face i{background-image: url(../img/game01/face-drag.png)}
[data-page="3"] .act-char{background-image: url(../img/game01/char-02.png)}
[data-page="3"] .drop-box{top: 185px;left: 164px;width: 307px;height: 257px}

/* drop */
[data-drop="1"]+.act-char{background-image: url(../img/game01/char-drop01.png)}
[data-drop="2"]+.act-char{background-image: url(../img/game01/char-drop02.png)}
[data-drop="3"]+.act-char{background-image: url(../img/game01/char-drop03.png)}

/* 배경오브제 */
.bg-obj01{left: 123px;top: 87px;width: 142px;transition: .5s;opacity: .4;}
.bg-obj02{right: 105px;top: 312px;width: 130px;transition: .5s;opacity: 0}
.bg-obj03{left: 0;top: -46px;width: 1280px;max-width: none;transition: .5s;}
.bg-obj04{bottom: 0px;margin-left: 74px;width: 1131px}
.bg-obj05{bottom: 0;left: 0;right: 0}
.begin-bg .bg-obj01{top: 50px;width: 265px}
.begin-bg .bg-obj02{opacity:.4}
.begin-bg .bg-obj03{top: 156px}
/* ending */
.ending-bg .bg-obj01{width: 265px;top: -44px}
.ending-bg .bg-obj02{opacity: 1;top: 183px;right: 158px}
.ending-bg .bg-obj03{opacity: 0}
.bg-ending{bottom: 0}
.ending-obj01{bottom: 136px;z-index: 2;}
.ped-shadow{display: block;position: absolute;bottom: 123px;left: 50%;transform: translateX(-50%);width: 360px;height: 64px;border-radius: 50%;background: #000;opacity: .5;z-index: 1;}
#ending [class^=spotlight-wrap]{transform: none}
#ending [class^=spotlight-wrap] .light{position: absolute;max-width: none;width: 409px;height: 370px;top: 21px;left: 31px}
#ending .spotlight-wrap-1{left: 135px;animation: ani-light01 2.5s linear .25s infinite alternate}
#ending .spotlight-wrap-2{left: 404px;animation: ani-light01 2.5s linear .25s infinite alternate}
#ending .spotlight-wrap-2 .light{width: 223px;height: 427px;left: 17px;top: 35px}
#ending .spotlight-wrap-3{left: 50%;transform: translateX(-50%)}
#ending .spotlight-wrap-4{right: 404px;left: auto;transform: scale(-1,1);animation: ani-light02 2.5s linear .25s infinite alternate}
#ending .spotlight-wrap-4 .light{width: 223px;height: 427px;left: 17px;top: 35px}
#ending .spotlight-wrap-5{right: 135px;left: auto;transform: scale(-1,1);animation: ani-light02 2.5s linear .25s infinite alternate}
#ending [class*=star0]{animation: twinkle .5s ease-in-out infinite alternate}
#ending .star01{top: 119px;left: 464px;transform: none}
#ending .star02{top: 222px;left: 462px;transform: none;animation-delay: .3s}
#ending .star03{top: 190px;left: 400px;transform: none;animation-delay: .5s}
#ending .star04{top: 220px;left: 801px;transform: none;animation-delay: .5s}
#ending .star05{top: 186px;left: 800px;transform: none;animation-delay: .5s}
.dance-char{top: 72px;width: 402px;height: 473px;margin-left:-20px;z-index: 3;}
.dance-char i{display: block;width: 100%;height: 100%;background: url(../img/game01/char-dance01.png) no-repeat center / auto 100%}
.dance-char.act1 i{background-image: url(../img/game01/char-dance02.png)}
.dance-char.act2 i{background-image: url(../img/game01/char-dance03.png)}
.dance-char.act3 i{background-image: url(../img/game01/char-dance04.png)}
.dance-char-2{top: 365px;left: 312px!important;transform: none!important;width: 131px;height: 210px}
.dance-char-2 i{display: block;width: 100%;height: 100%;background: url(../img/game01/char-sub-2.svg) no-repeat center bottom / auto}
.dance-char-2.on i{background-image: url(../img/game01/char-sub-3.svg)}
.dance-char-2::before,
.dance-char-3::before{content: '';display: block;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 105px;height: 12px;border-radius: 50%;background: #000;opacity: .5;}
.dance-char-3::before{width: 58px;}
.dance-char-2.on::before{left: 60%;}
.dance-char-3.on::before{left: 40%;}
.dance-char-3{top: 361px;right: 288px;left: auto!important;transform: none!important;width: 193px;height: 202px}
.dance-char-3 i{display: block;width: 100%;height: 100%;background: url(../img/game01/char-sub02.svg) no-repeat center / auto 100%}
.dance-char-3.on i{background-image: url(../img/game01/char-sub02-2.svg)}

@keyframes flying-ani01 {
    50% {
        transform: translateY(-20px)
    }
}
@keyframes flying-ani02 {
    50% {
      transform: translateY(-20px) rotate(-45deg);
    }
}
.ai01, .ai03{animation: rolling-ani01 2.5s linear .25s infinite alternate}
.ai02, .ai04{animation: rolling-ani02 2s linear .5s infinite alternate}
.ai03, .ai04, .ai07{z-index:2}
.ai03{animation-delay: .5s}
.ai04{animation-delay: .75s}
.ai01{top: 44px;left: 132px}
.ai02{top: 53px;left: 89px}
.ai03{left: 185px;top: 175px}
.ai04{left: 135px;top: 188px}
.ai05{left: 41px;top: 68px}
.ai06{left: 0px;top: 159px}
.ai07{left: 344px;top: 175px}
.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}

#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}


.guide-list .guide-item:nth-child(5){padding-right:50px;}

@keyframes estrela {
  0% {
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.05);
  }
}

@keyframes estrelaDestacada {
  0% {
    background-color: #FFFFFF;
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 1);
  }
  20% {
    background-color: #FFC4C4;
    box-shadow: 0 0 10px 0px rgb(255, 196, 196, 1);
  }
  80% {
    background-color: #C4CFFF;
    box-shadow: 0 0 10px 0px rgb(196, 207, 255, 1);
  }
  100% {
    background-color: #FFFFFF;
    box-shadow: 0 0 10px 0px rgba(255, 255, 255, 0.2);
  }
}
@keyframes twinkle{
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes sad01{
  0% {transform: rotate(0) translate(0,0)}
  100% {transform: rotate(-31deg) translate(-4px,5px)}
}
@keyframes sad02{
  0% {transform: rotate(0) translate(0,0)}
  100% {transform: rotate(31deg) translate(4px,5px)}
}
@keyframes tear{
  0% {opacity: 0;transform: translateY(0)}
  100% {opacity: 1;transform: translateY(25%)}
}

@keyframes rolling-ani01 {
    50% {transform: translate(-2px, 6px) rotate(-11deg);
    }
}
@keyframes rolling-ani02 {
    50% {
        transform: translate(0, -4px) rotate(12deg)
    }
}
@keyframes ani-light01 {
  0% {transform: rotate(0)}
  100% {transform: rotate(-10deg) }
}
@keyframes ani-light02 {
  0% {transform: rotate(0) scale(-1,1)}
  100% {transform: rotate(-10deg) scale(-1,1)}
}