@charset "utf-8";
body{ background:#410c6a; opacity:0; -webkit-animation:show .1s forwards .5s;webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
@-webkit-keyframes show{ 100%{ opacity:1;}}

.festival{ margin:0 auto; width:7.2rem; font-size:.24rem; color:#effcde;}

.festival_01{ height:1.71rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_festival_01.jpg) no-repeat; background-size:100% 100%;}
.festival_02{ height:1.71rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_festival_02.jpg) no-repeat; background-size:100% 100%;}
.festival_03{ height:1.71rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_festival_03.jpg) no-repeat; background-size:100% 100%;}
.festival_04{ height:1.71rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_festival_04.jpg) no-repeat; background-size:100% 100%;}
.festival_05{ height:1.71rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_festival_05.jpg) no-repeat; background-size:100% 100%;}
.festival_06{ height:1.71rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_festival_06.jpg) no-repeat; background-size:100% 100%;}
.festival_07{ height:1.71rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_festival_07.jpg) no-repeat; background-size:100% 100%;}

.title{ top:.17rem; left:.68rem; width:5.68rem; height:2.46rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/title.png) no-repeat; background-size:100% 100%; z-index:3;}
.twist_machine{ top:0; left:.68rem; width:5.83rem; height:8.57rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/twist_machine.png) no-repeat; background-size:100% 100%; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
.decoration{ top:3.99rem; left:0; width:5.84rem; height:.51rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/decoration.png) no-repeat; background-size:100% 100%; z-index:2;  }
.btn_download{ display:block; margin:5.6rem 0 0 1.9rem; width:2.1rem; height:2.1rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/btn_download.png) no-repeat; text-indent:-99rem; background-size:100% 100%;}

.tips{ left:1.06rem; bottom:2.48rem; width:4.99rem; height:1.1rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_tips.png) no-repeat; background-size:100% 100%;}
.tips img{ width:4.99rem; height:1.1rem;}

.rule{ bottom:.19rem; left:.25rem; width:6.71rem; height:2.29rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/bg_rule.jpg) no-repeat; background-size:100% 100%;}
.rule ul{ margin:.6rem 0 0 .64rem;}
.rule li{ position:relative; width:5.85rem; line-height:.4rem;}
.rule img{ position:absolute; top:.05rem; left:-.38rem; width:.3rem; height:.3rem;}
.rule span{ color:#ffe400;}

.fireworks_01{ bottom:3.58rem; left:.13rem; width:.93rem; height:.52rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/fireworks_01.png) no-repeat; background-size:100% 100%;}
.fireworks_02{ bottom:4.94rem; left:.88rem; width:.21rem; height:.14rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/fireworks_02.png) no-repeat; background-size:100% 100%;}
.fireworks_03{ bottom:3.97rem; left:1.39rem; width:.2rem; height:.19rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/fireworks_03.png) no-repeat; background-size:100% 100%;}
.fireworks_04{ bottom:3.8rem; left:3.58rem; width:.15rem; height:.24rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/fireworks_04.png) no-repeat; background-size:100% 100%;}
.fireworks_05{ bottom:4.27rem; left:4.45rem; width:.08rem; height:.07rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/fireworks_05.png) no-repeat; background-size:100% 100%;}
.fireworks_06{ bottom:4.23rem; left:6.05rem; width:.72rem; height:.4rem;}
.fireworks_07{ bottom:3.69rem; left:6.36rem;}
.fireworks_08{ bottom:4.48rem; left:.13rem;}
.fireworks_09{ bottom:3.55rem; left:6.8rem;}

.egg_01{ top:3.2rem; left:.92rem; width:.94rem; height:.9rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/egg_01.png) no-repeat; background-size:100% 100%;}
.egg_02{ top:3.24rem; left:1.71rem; width:.9rem; height:.94rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/egg_02.png) no-repeat; background-size:100% 100%;}
.egg_03{ top:2.47rem; left:1.5rem; width:.88rem; height:.94rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/egg_03.png) no-repeat; background-size:100% 100%;}
.egg_04{ top:2.72rem; left:2.35rem; width:.86rem; height:.93rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/egg_04.png) no-repeat; background-size:100% 100%; transform:rotate(30deg)}
.egg_05{ top:3.28rem; left:2.4rem; width:.85rem; height:.92rem; background:url(https://png.pookcdn.net/pook_mobile/activity/festival_dw/egg_05.png) no-repeat; background-size:100% 100%;}
.egg_06{ top:2.7rem; left:3.3rem;transform:rotate(90deg);}
.egg_07{ top:3.28rem; left:3rem;transform:rotate(90deg);}
.egg_08{ top:3.28rem; left:3.8rem;transform:rotate(220deg);}

.title{ -webkit-transform:translateY(-3rem); transform:translateY(-3rem); -webkit-animation:title .3s 1s forwards;animation:title .3s 1s forwards;}
.twist_machine{ opacity:1; -webkit-transform:translateY(-8.57rem); transform:translateY(-8.57rem); -webkit-animation:twist_machine .5s .5s forwards; animation:twist_machine .5s .5s forwards; webkit-transform-origin:50% 100%; transform-origin:50% 100%; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.btn_download_02{ -webkit-animation:btn_download 2s ease; animation:btn_download 2s ease;}
.rule{ -webkit-transform:translateY(7rem); transform:translateY(7rem);  -webkit-animation:rule .5s 1.3s forwards; animation:rule .5s 1.3s forwards;}
.tips{ opacity:0; -webkit-animation:tips .5s 1.8s forwards; animation:tips .5s 1.8s forwards;}

.fireworks span{ opacity:0; -webkit-animation: fireworks_translate 6s linear forwards; animation: fireworks_translate 6s linear forwards;}
.fireworks span.fireworks_01,.fireworks span.fireworks_02{ -webkit-animation-delay:1s; animation-delay:1s;}
.fireworks span.fireworks_03{ -webkit-animation-delay:2.4s; animation-delay:2.4s;}
.fireworks span.fireworks_04,.fireworks span.fireworks_09{ -webkit-animation-delay:3.5s; animation-delay:3.5s;}
.fireworks span.fireworks_06,.fireworks span.fireworks_07{ -webkit-animation-delay:1.5s; animation-delay:1.5s;}



.egg span.egg_animation_01{ -webkit-animation:egg 2s linear; animation:egg 2s linear;}
.egg span.egg_animation_02{ -webkit-animation:egg_02 2s linear; animation:egg_02 2s linear;}
.egg span.egg_animation_03{ -webkit-animation:egg_03 2s linear; animation:egg_03 2s linear;}
.egg span.egg_animation_04{ -webkit-animation:egg_04 2s linear; animation:egg_04 2s linear;}
.egg span.egg_animation_05{ -webkit-animation:egg_05 2s linear; animation:egg_05 2s linear;}
.egg span.egg_animation_06{ -webkit-animation:egg_06 2s linear; animation:egg_06 2s linear;}
.egg span.egg_animation_07{ -webkit-animation:egg_07 2s linear; animation:egg_07 2s linear;}


@-webkit-keyframes title{
0% {
opacity:0;
-webkit-transform:translateY(-3rem);
transform:translateY(-3rem);
}

100% {
-webkit-transform:translateY(0);
transform:translateY(0);
}
}
@keyframes title{
0% {
opacity:0;
-webkit-transform:translateY(-3rem);
transform:translateY(-3rem);
}

100% {
-webkit-transform:translateY(0);
transform:translateY(0);
}
}

@-webkit-keyframes twist_machine{
0% {

-webkit-transform:translateY(-8.57rem) scale(.76);
transform:translateY(-8.57rem) scale(.76);
}
50% {

-webkit-transform:translateY(0) scaleX(0.9) scaleY(1.1);
transform:translateY(0) scaleX(0.9) scaleY(1.1);
}
80% {

-webkit-transform:translateY(0) scaleX(1.08) scaleY(1.3);
transform:translateY(0) scaleX(1.08) scaleY(1.3);
}
100% {
-webkit-transform:translateY(0) scale(1);
transform:translateY(0) scale(1);
}
}
@keyframes twist_machine{
0% {

-webkit-transform:translateY(-8.57rem) scale(.76);
transform:translateY(-8.57rem) scale(.76);
}
50% {

-webkit-transform:translateY(0) scaleX(0.9) scaleY(1.05);
transform:translateY(0) scaleX(0.9) scaleY(1.05);
}
80% {

-webkit-transform:translateY(0) scaleX(1.05) scaleY(0.97);
transform:translateY(0) scaleX(1.05) scaleY(0.97);
}
100% {

-webkit-transform:translateY(0) scale(1);
transform:translateY(0) scale(1);
}
}

@-webkit-keyframes btn_download{
0% {
-webkit-transform:rotate(0);
transform:rotate(0);
}
10% {
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
20% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(0);
transform:rotate(0);
}
}
@keyframes btn_download{
0% {
-webkit-transform:rotate(0);
transform:rotate(0);
}
10% {
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
20% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(0);
transform:rotate(0);
}
}

@-webkit-keyframes rule{
0% {
opacity:0;
-webkit-transform:translateY(7rem);
transform:translateY(7rem);
}
100% {
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0);
}
}
@keyframes rule{
0% {
opacity:0;
-webkit-transform:translateY(7rem);
transform:translateY(7rem);
}
100% {
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0);
}

}

@-webkit-keyframes tips { 0% {
opacity:0;
-webkit-transform-origin:50% 0%;
-webkit-transform:perspective(800px) rotateX(-90deg);
}
50% {
opacity:1;
-webkit-transform-origin:50% 0%;
-webkit-transform:perspective(800px) rotateX(50deg);
}
100% {
opacity:1;
-webkit-transform-origin:50% 0%;
-webkit-transform:perspective(800px) rotateX(0deg);
}
}
@keyframes tips { 0% {
opacity:0;
transform-origin:50% 0%;
transform:perspective(800px) rotateX(-90deg);
}
50% {
opacity:1;
transform-origin:50% 0%;
transform:perspective(800px) rotateX(50deg);
}
100% {
opacity:1;
transform-origin:50% 0%;
transform:perspective(800px) rotateX(0deg);
}
}



@-webkit-keyframes fireworks_rotate{
0% {
-webkit-transform:rotate(0);
transform:rotate(0);
}

100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes fireworks_rotate{
0% {
-webkit-transform:rotate(0);
transform:rotate(0);
}

100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}

@-webkit-keyframes fireworks_translate{
0%{transform: translateY(-7rem) rotate(0); opacity:0;}
50%{opacity:1;}
100%{transform: translateY(0) rotate(3600deg);opacity:1;}
}
@keyframes fireworks_translate{
0%{transform: translateY(-7rem) rotate(0);opacity:0;}
50%{opacity:1;}
100%{transform: translateY(0) rotate(3600deg);opacity:1;}
}

@-webkit-keyframes egg{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.2rem) translateX(-.2rem) rotate(180deg);}
40%{ transform: translateY(-.9rem) translateX(.3rem) rotate(360deg);}
60%{ transform: translateY(-.4rem) translateX(.6rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@keyframes egg{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.2rem) translateX(-.2rem) rotate(180deg);}
40%{ transform: translateY(-.9rem) translateX(.3rem) rotate(360deg);}
60%{ transform: translateY(-.4rem) translateX(.6rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}

@-webkit-keyframes egg_02{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(-.6rem) rotate(180deg);}
40%{ transform: translateY(-2rem) translateX(.6rem) rotate(360deg);}
50%{ transform: translateY(-1.4rem) translateX(1rem) rotate(720deg);}
60%{ transform: translateY(-.6rem) translateX(1.8rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@keyframes egg_02{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(-.6rem) rotate(180deg);}
40%{ transform: translateY(-2rem) translateX(.6rem) rotate(360deg);}
50%{ transform: translateY(-1.4rem) translateX(1rem) rotate(720deg);}
60%{ transform: translateY(-.6rem) translateX(1.8rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@-webkit-keyframes egg_03{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.8rem) translateX(.4rem) rotate(180deg);}
40%{ transform: translateY(-.2rem) translateX(-.4rem) rotate(360deg);}
60%{ transform: translateY(.7rem) translateX(.6rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@keyframes egg_03{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.8rem) translateX(.4rem) rotate(180deg);}
40%{ transform: translateY(-.2rem) translateX(-.4rem) rotate(360deg);}
60%{ transform: translateY(.7rem) translateX(.6rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@-webkit-keyframes egg_04{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(.8rem) rotate(180deg);}
40%{ transform: translateY(-.2rem) translateX(-.4rem) rotate(360deg);}
60%{ transform: translateY(.7rem) translateX(.6rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@keyframes egg_04{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(.8rem) rotate(180deg);}
40%{ transform: translateY(-.2rem) translateX(-.4rem) rotate(360deg);}
60%{ transform: translateY(.7rem) translateX(.6rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@-webkit-keyframes egg_05{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(.6rem) rotate(180deg);}
30%{ transform: translateY(-1.4rem) translateX(-.2rem) rotate(360deg);}
40%{ transform: translateY(.2rem) translateX(-1rem) rotate(720deg);}
50%{ transform: translateY(-.2rem) translateX(-1rem) rotate(960deg);}
60%{ transform: translateY(-.4rem) translateX(-.6rem) rotate(960deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@keyframes egg_05{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(.6rem) rotate(180deg);}
30%{ transform: translateY(-1.4rem) translateX(-.2rem) rotate(360deg);}
40%{ transform: translateY(.2rem) translateX(-1rem) rotate(720deg);}
50%{ transform: translateY(-.2rem) translateX(-1rem) rotate(960deg);}
60%{ transform: translateY(-.4rem) translateX(-.6rem) rotate(960deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}

@-webkit-keyframes egg_06{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(.4rem) rotate(180deg);}
40%{ transform: translateY(-.2rem) translateX(-.5rem) rotate(360deg);}
60%{ transform: translateY(.7rem) translateX(.2rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@keyframes egg_06{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(.4rem) rotate(180deg);}
40%{ transform: translateY(-.2rem) translateX(-.5rem) rotate(360deg);}
60%{ transform: translateY(.7rem) translateX(.2rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@-webkit-keyframes egg_07{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.7rem) translateX(.4rem) rotate(180deg);}
40%{ transform: translateY(-.2rem) translateX(-.5rem) rotate(360deg);}
60%{ transform: translateY(.7rem) translateX(.2rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}
@keyframes egg_07{
0%{transform: translateY(0) rotate(0);}
20%{transform: translateY(-.8rem) translateX(.4rem) rotate(180deg);}
40%{ transform: translateY(-.2rem) translateX(-.4rem) rotate(360deg);}
60%{ transform: translateY(.1rem) translateX(.3rem) rotate(720deg);}
80%{transform: translateY(0) translateX(0) }
100%{transform: translateY(0)}
}