@charset "utf-8";idth
/* CSS Document */
*{box-sizing: border-box;}
html, body {
    position: relative;
    height: 100%;
}
body {
    background: url(https://png.pookcdn.net/website_img/net/activity/mqj/background.jpg) repeat;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color:#000;
    margin: 0;
    padding: 0;
}

.main{height:100%;margin:0 auto;font-family: Microsoft YaHei;}

.swiper-container {width: 100%;height: 100%;}
.swiper-slide {
    position:relative;
    text-align: center;
    box-sizing: border-box;
    overflow:hidden;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.slideTips{position:absolute;bottom:30px;left:50%;width:.65rem;height:.49rem;margin-left:-.32rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_next.png) no-repeat;background-size:100% 100%;z-index: 2;transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;}
.slideTips{-webkit-animation:tipAnimate 1s infinite;animation:tipAnimate 1s infinite;}
.slideTips.rotate{-webkit-animation:tipAnimateRotate 1s infinite;animation:tipAnimateRotate 1s infinite;}
@keyframes tipAnimate {
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(.15rem);
    }
}
@-webkit-keyframes tipAnimate {
    0%,100%{
        -webkit-transform: translateY(0);
    }
    50%{
        -webkit-transform: translateY(.15rem);
    }
}
@keyframes tipAnimateRotate {
    0%,100%{
        transform: translateY(0) rotate(180deg);
    }
    50%{
        transform: translateY(.15rem) rotate(180deg);
    }
}
@-webkit-keyframes tipAnimateRotate {
    0%,100%{
        -webkit-transform: translateY(0) rotate(180deg);
    }
    50%{
        -webkit-transform: translateY(.15rem) rotate(180deg);
    }
}

.slideMusic{position: fixed;top:.20rem;right:.25rem;width:.68rem;height:.68rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_music.png) no-repeat;background-size:1.36rem .68rem;z-index: 2;cursor: pointer;}
.slideMusic.off{background-position: 100% 0;}
.slideMusic{-webkit-animation:musicAnimate 2s linear infinite;animation:musicAnimate 2s linear infinite;}
@keyframes musicAnimate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
@-webkit-keyframes musicAnimate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.swiper-slide img{display: block;}
.swiper_page{position:relative;width:6.4rem;height:100%;text-align: center;}

.loading{position:relative;width:6.4rem;height:100%;margin:0 auto;}
.loading .loading_img{position: absolute;top:2.10rem;left:0;width:100%;height:5.56rem;text-align: center;}
.loading .loading_img img{width:5.04rem;height:5.56rem;}
.loading .loading_img .icon_beat{position: absolute;bottom:0;right:1.64rem;width:.33rem;height:.45rem;background: url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_beat.png) no-repeat;background-size:100% 100%;}

.letter_box{position: relative;height:10.05rem;margin-top:.05rem;text-align:center;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/page_1_1.png) no-repeat center top;background-size:100% 100%;}
.letter_box .text_img{display:block;height:.36rem;margin:0 auto .24rem;}
.letter_box .text_box{position: absolute;left:0;width:100%;}
.letter_box .text_box_01{top:3.16rem;}
.letter_box .text_box_02{top:1.16rem;}
.letter_box .text_box_03{top:1.96rem;}

.floor_01{display: block;width:.39rem;height:.45rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_floor_01.png) no-repeat;background-size:100% 100%;transform-origin: .19rem .22rem;-webkit-transform-origin: .19rem .22rem;}
.floor_02{display: block;width:.36rem;height:.41rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_floor_01.png) no-repeat;background-size:100% 100%;transform-origin: .17rem .19rem;-webkit-transform-origin: .17rem .19rem;}
.floor_03{display: block;width:.45rem;height:.45rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_floor_02.png) no-repeat;background-size:100% 100%;transform-origin: .22rem .23rem;-webkit-transform-origin: .22rem .23rem;}

.leaf_01,.leaf_03{display: block;width:.25rem;height:.6rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_leaf_02.png) no-repeat;background-size:100% 100%;}
.leaf_02{display: block;width:.2rem;height:.5rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_leaf_01.png) no-repeat;background-size:100% 100%;}
.leaf_03{transform-origin:center center;-webkit-transform-origin:center center;transform: rotate(-90deg);-webkit-transform: rotate(-90deg);}
.leaf_04,.leaf_05{display: block;width:.34rem;height:.42rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/icon_leaf_03.png) no-repeat;background-size:100% 100%;}


.slide_03 .item_01{position:relative;height:7.23rem;margin:.3rem 0 .13rem;overflow: hidden;}
.slide_03 .page_img_01{width:6.4rem;height:7.23rem;}
.slide_03 .page_text_01{width:4.74rem;height:1.57rem;margin:0 auto;}
.slide_03 .floor{position: absolute;top:-.45rem;}
.slide_03 .floor.animate{
	animation-name: floorFloat;
	animation-duration: 6s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	-webkit-animation-name: floorFloat;
	-webkit-animation-duration: 6s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
}
.slide_03 .floor_01{right:.83rem;}
.slide_03 .floor_02{right:1.38rem;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;}
.slide_03 .floor_03{left:1.08rem;animation-delay: 1s;-webkit-animation-delay: 1s;}

@keyframes floorFloat{
	0%{transform: rotate(0);top:-.45rem;}
	50%{opacity:1;}
	100%{transform: rotate(1800deg);top:7.23rem;opacity:0;}
}
@-webkit-keyframes floorFloat{
	0%{-webkit-transform: rotate(0);top:-.45rem;}
	50%{opacity:1;}
	100%{-webkit-transform: rotate(1800deg);top:7.23rem;opacity:0;}
}

.slide_04 .item_01{position:relative;z-index:2;height:6.75rem;margin:0 auto;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/page_4_1.png) no-repeat;background-size:100% 100%;}
.slide_04 .page_img_02{position: absolute;bottom:.81rem;right:.61rem;width:1.91rem;height:2.12rem;}
.slide_04 .page_img_03{position: absolute;z-index:1;top:.94rem;right: 0;width:2.02rem;height:4.62rem;}
.slide_04 .page_text_01{position: relative;z-index:3;width:4.58rem;height:2.16rem;margin:.50rem auto .14rem;}

.slide_05 .item_01{position:relative;width:5.78rem;height:5.8rem;margin:1.2rem auto .23rem;overflow: hidden;}
.slide_05 .page_img_01{width:5.78rem;height:5.8rem;}
.slide_05 .page_img_02{position: absolute;top:0;left:0;width:1.3rem;height:1.36rem;}
.slide_05 .page_img_03{position: absolute;z-index:1;bottom:0;right:0;width:2.69rem;height:2.73rem;}
.slide_05 .page_img_04{position: absolute;top:2.51rem;left:2.57rem;width:.65rem;height:1.06rem;}
.slide_05 .page_img_04.animate{animation: beat 1s linear infinite;-webkit-animation: beat 1s linear infinite;}
.slide_05 .page_text_01{position:relative;z-index:2;width:5.29rem;height:1.58rem;margin:0 auto;}
.slide_05 .leaf{position: absolute;z-index:2;top:-.6rem;transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;}
.slide_05 .leaf.animate{
	animation-name: leafFloat;
	animation-duration: 6s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	-webkit-animation-name: leafFloat;
	-webkit-animation-duration: 6s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
}
.slide_05 .leaf_01{left:.75rem;animation-delay: 3.5s;-webkit-animation-delay: 3.5s;}
.slide_05 .leaf_02{left:3.49rem;animation-delay: 5.5s;-webkit-animation-delay: 5.5s;}
.slide_05 .leaf_03{left:4.25rem;animation-delay: 4.5s;-webkit-animation-delay: 4.5s;}
.slide_05 .leaf_04{right:.24rem;}
.slide_05 .leaf_05{right:.06rem;animation-delay: 3s;-webkit-animation-delay: 3s;}

@keyframes leafFloat{
	0%{transform: rotate(0);top:-.6rem;}
	50%{opacity:1;}
	100%{transform: rotate(1800deg);top:5.8rem;opacity:0;}
}
@-webkit-keyframes leafFloat{
	0%{-webkit-transform: rotate(0);top:-.45rem;}
	50%{opacity:1;}
	100%{-webkit-transform: rotate(1800deg);top:5.8rem;opacity:0;}
}

@keyframes beat{
	0%{transform: scale(1);}
	50%{transform: scale(.8);}
	100%{transform: scale(1);}
}
@-webkit-keyframes beat{
	0%{-webkit-transform: scale(1);}
	50%{-webkit-transform: scale(.8);}
	100%{-webkit-transform: scale(1);}
}

.slide_06 .item_01{position: relative;height:7.66rem;margin-top:2.36rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/page_6_1.png) no-repeat;background-size:100% 100%;}
.slide_06 .item_01 .page_img_03{position:absolute;z-index:1;top:1.97rem;left:1.56rem;width:.97rem;height:1.3rem;}
.slide_06 .item_01 .page_img_04{position:absolute;z-index:2;top:1.88rem;left:2.28rem;width:.33rem;height:.85rem;transform-origin: .15rem .82rem;-webkit-transform-origin: .15rem .82rem;animation: wave 2s linear infinite;-webkit-animation: wave 2s linear infinite;}
.slide_06 .item_01 .page_img_05{position:absolute;z-index:2;bottom:.52rem;left:2.5rem;width:1.51rem;height:3.33rem;}
.slide_06 .item_01 .page_img_06{position:absolute;z-index:1;top:3.5rem;left:3.6rem;width:.33rem;height:1.23rem;transform-origin: .1rem 1.2rem;-webkit-transform-origin: .1rem 1.2rem;animation: wave 2s linear 1s infinite;-webkit-animation: wave 2s linear 1s infinite;}
.slide_06 .page_img_02{position: absolute;top:0;left:0;width:1.83rem;height:1.83rem;}
.slide_06 .page_img_07{position: absolute;bottom:1.26rem;left:0;width:1.55rem;height:1.91rem;}
.slide_06 .page_img_08{position: absolute;bottom:0;right:0;width:2.62rem;height:3.57rem;}
.slide_06 .page_text_01{position: absolute;top:.8rem;left:50%;width:4.3rem;height:2.17rem;margin-left:-2.15rem;}

.slide_07 .item_01{position: relative;height:6.09rem;margin:.6rem 0 .28rem;}
.slide_07 .page_img_01{width:6.4rem;height:5.61rem;margin:.88rem auto .28rem;}
.slide_07 .page_img_02{position: absolute;z-index:2;top:2.13rem;left:1.38rem;width:1.43rem;height:3.52rem;}
.slide_07 .page_img_03{position: absolute;z-index:3;top:1.34rem;right:1.23rem;width:2.68rem;height:4.34rem;}
.slide_07 .page_img_04{position: absolute;z-index:4;bottom:0;left:1.34rem;width:3.6rem;height:.96rem;}
.slide_07 .page_img_05{position: absolute;z-index:z;top:0;left:0;width:6.4rem;height:5.61rem;transform-origin: center bottom;}
.slide_07 .page_text_01{width:5.12rem;height:2.18rem;margin:0 auto;}

.slide_08 .swiper_page{background: url(https://png.pookcdn.net/website_img/net/activity/mqj/page_8_bg.png) no-repeat center top;background-size:100% 100%;}
.slide_08 .scale90{position: relative;z-index: 2;}
.slide_08 .item_02{position: relative;margin:0 auto;}
.slide_08 .item_02::after{content:"";position: absolute;z-index:1;top:-1.62rem;right:-.7rem;width:2.23rem;height:2.34rem;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/page_8_4.png) no-repeat;background-size:100% 100%;}
.slide_08 .page_img_01,
.slide_08 .page_img_02{position:relative;z-index:2;width:6.4rem;margin:0 auto;}
.slide_08 .page_img_03{position: absolute;z-index:1;top:0;left:0;width:1.82rem;height:2.18rem;}
.slide_08 .btn_join{display:block;width:2.99rem;height:1.3rem;margin:-.27rem auto 0;background:url(https://png.pookcdn.net/website_img/net/activity/mqj/btn_join.png) no-repeat;background-size:100% 100%;}
.slide_08 .btn_join.animate{animation: beat 1s linear infinite;-webkit-animation: beat 1s linear infinite;}

.scale90{transform: scale(.92);-webkit-transform: scale(.92);transform-origin: center top;-webkit-transform-origin: center top;}

@keyframes wave{
	0{transform:rotate(0);}
	50%{transform: rotate(-10deg);}
	100%{transform: rotate(0);}
}
@-webkit-keyframes wave{
	0{-webkit-transform:rotate(0);}
	50%{-webkit-transform: rotate(-10deg);}
	100%{-webkit-transform: rotate(0);}
}