.mb--canvas {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}.mb--air - bubble {
    position:absolute;
    bottom:0;
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
    background-image:url(./mb_icon/bubble.png);
    background-size:100% 100%;
}

@-webkit-keyframes mbBubbleRise {
    0% {
        bottom:0; 
        -webkit-transform:scale(0); 
        transform:scale(0);
    }
    5% {
        bottom:0; 
        -webkit-transform:scale(1); 
        transform:scale(1);
    }
    100% {
        bottom:100%; -webkit-transform:scale(1.2); transform:scale(1.2)
    }
}
@keyframes mbBubbleRise {
    0 % {
        bottom: 0; - webkit - transform: scale(0);transform: scale(0)
    }
    5 % {
        bottom: 0; - webkit - transform: scale(1);transform: scale(1)
    }
    100 % {
        bottom: 100 % ; - webkit - transform: scale(1.2);transform: scale(1.2)
    }
}
@ - webkit - keyframes bubbleExpolre {
    to {
        -webkit - transform: scale(3);
        transform: scale(3);
        opacity: .2
    }
}
@keyframes bubbleExpolre {
    to {
        -webkit - transform: scale(3);
        transform: scale(3);
        opacity: .2
    }
}.mb--blinkStar {
    position: absolute;background - color: #b6cbd4;border - radius: 50 % ; - webkit - transform: rotate(0 deg) scale(0.08); - ms - transform: rotate(0 deg) scale(0.08);transform: rotate(0 deg) scale(0.08); - webkit - animation: mbStarBlink 15 s infinite ease - out;animation: mbStarBlink 15 s infinite ease - out
}.star--child {
    width: 100 % ;height: 100 % ;border - radius: 50 % ; - webkit - transform: rotate(45 deg) scale(0.75); - ms - transform: rotate(45 deg) scale(0.75);transform: rotate(45 deg) scale(0.75)
}.mb--blinkStar.star--child: before, .mb--blinkStar: before {
    -webkit - transform: rotate(90 deg); - ms - transform: rotate(90 deg);
    transform: rotate(90 deg)
}.mb--blinkStar.star--child: after, .mb--blinkStar.star--child: before, .mb--blinkStar: after, .mb--blinkStar: before {
    content: '';position: absolute;top: -350 % ;left: 45 % ;height: 800 % ;width: 1 px;border - radius: 50 % ;background: -webkit - linear - gradient(top, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .7) 50 % , rgba(255, 255, 255, .1) 100 % );background: linear - gradient(top, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, .7) 50 % , rgba(255, 255, 255, .1) 100 % );z - index: 1;box - shadow: 0 0 25 px# fff
}.mb--blinkStar.navy - star: after, .mb--blinkStar.navy - star: before {
    box - shadow: 0 0 25 px navy
}.mb--blinkStar.navy - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(0, 0, 128, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(0, 0, 128, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.blue - star: after, .mb--blinkStar.blue - star: before {
    box - shadow: 0 0 25 px #00f}.mb--blinkStar.blue-star .star--child{box-shadow:0 0 2px 8px rgba(0,0,255,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(0,0,255,.1),0 0 2px 16px rgba(255,255,255,.1)}.mb--blinkStar.aqua-star:after,.mb--blinkStar.aqua-star:before{box-shadow:0 0 25px # 0 ff
}.mb--blinkStar.aqua - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(0, 255, 255, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(0, 255, 255, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.teal - star: after, .mb--blinkStar.teal - star: before {
    box - shadow: 0 0 25 px teal
}.mb--blinkStar.teal - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(0, 128, 128, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(0, 128, 128, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.olive - star: after, .mb--blinkStar.olive - star: before {
    box - shadow: 0 0 25 px olive
}.mb--blinkStar.olive - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(128, 128, 0, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(128, 128, 0, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.green - star: after, .mb--blinkStar.green - star: before {
    box - shadow: 0 0 25 px green
}.mb--blinkStar.green - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(0, 128, 0, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(0, 128, 0, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.lime - star: after, .mb--blinkStar.lime - star: before {
    box - shadow: 0 0 25 px #0f0}.mb--blinkStar.lime-star .star--child{box-shadow:0 0 2px 8px rgba(0,255,0,.4),0 0 2px 9px rgba(255,255,255,.07),0 0 2px 15px rgba(0,255,0,.1),0 0 2px 16px rgba(255,255,255,.1)}.mb--blinkStar.yellow-star:after,.mb--blinkStar.yellow-star:before{box-shadow:0 0 25px # ff0
}.mb--blinkStar.yellow - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(255, 255, 0, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(255, 255, 0, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.orange - star: after, .mb--blinkStar.orange - star: before {
    box - shadow: 0 0 25 px orange
}.mb--blinkStar.orange - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(255, 165, 0, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(255, 165, 0, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.red - star: after, .mb--blinkStar.red - star: before {
    box - shadow: 0 0 25 px red
}.mb--blinkStar.red - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(255, 0, 0, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(255, 0, 0, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.maroon - star: after, .mb--blinkStar.maroon - star: before {
    box - shadow: 0 0 25 px maroon
}.mb--blinkStar.maroon - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(128, 0, 0, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(128, 0, 0, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.fuchsia - star: after, .mb--blinkStar.fuchsia - star: before {
    box - shadow: 0 0 25 px# f0f
}.mb--blinkStar.fuchsia - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(255, 0, 255, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(255, 0, 255, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}.mb--blinkStar.purple - star: after, .mb--blinkStar.purple - star: before {
    box - shadow: 0 0 25 px purple
}.mb--blinkStar.purple - star.star--child {
    box - shadow: 0 0 2 px 8 px rgba(128, 0, 128, .4), 0 0 2 px 9 px rgba(255, 255, 255, .07), 0 0 2 px 15 px rgba(128, 0, 128, .1), 0 0 2 px 16 px rgba(255, 255, 255, .1)
}
@ - webkit - keyframes mbStarBlink {
    0 % {-webkit - transform: rotate(0 deg) scale(0.08);transform: rotate(0 deg) scale(0.08)
    }
    4 % {-webkit - transform: rotate(-20 deg) scale(0.9);transform: rotate(-20 deg) scale(0.9)
    }
    50 % , 8 % {-webkit - transform: rotate(-40 deg) scale(0.08);transform: rotate(-40 deg) scale(0.08)
    }
    52 % {-webkit - transform: rotate(-50 deg) scale(0.3);transform: rotate(-50 deg) scale(0.3)
    }
    54 % {-webkit - transform: rotate(-60 deg) scale(0.08);transform: rotate(-60 deg) scale(0.08)
    }
    100 % {-webkit - transform: rotate(0 deg) scale(0.08);transform: rotate(0 deg) scale(0.08)
    }
}
@keyframes mbStarBlink {
    0 % {-webkit - transform: rotate(0 deg) scale(0.08);transform: rotate(0 deg) scale(0.08)
    }
    4 % {-webkit - transform: rotate(-20 deg) scale(0.9);transform: rotate(-20 deg) scale(0.9)
    }
    50 % , 8 % {-webkit - transform: rotate(-40 deg) scale(0.08);transform: rotate(-40 deg) scale(0.08)
    }
    52 % {-webkit - transform: rotate(-50 deg) scale(0.3);transform: rotate(-50 deg) scale(0.3)
    }
    54 % {-webkit - transform: rotate(-60 deg) scale(0.08);transform: rotate(-60 deg) scale(0.08)
    }
    100 % {-webkit - transform: rotate(0 deg) scale(0.08);transform: rotate(0 deg) scale(0.08)
    }
}.mb--cloud01 - container {
    position: absolute;width: 370 px;height: 230 px
}.mb--cloud01 {
    position: absolute;height: 120 px;width: 350 px;top: 100 px;left: 10 px;background: -webkit - linear - gradient(top, #fff 5 % , #f1f1f1 100 % )# fff;background: linear - gradient(top, #fff 5 % , #f1f1f1 100 % )# fff;border - radius: 100 px;box - shadow: 0 8 px 5 px rgba(0, 0, 0, .1)
}.mb--cloud01: after, .mb--cloud01: before {
    position: absolute;z - index: -1;background: #fff;content: ''
}.mb--cloud01: before {
    border - radius: 200 px;
    width: 180 px;
    height: 180 px;
    right: 50 px;
    top: -90 px
}.mb--cloud01: after {
    border - radius: 100 px;
    height: 100 px;
    left: 50 px;
    top: -50 px;
    width: 100 px
}
@ - webkit - keyframes mbCloudMoveleft {
    from {
        right: -1000 px
    }
    to {
        right: 100 %
    }
}
@keyframes mbCloudMoveleft {
    from {
        right: -1000 px
    }
    to {
        right: 100 %
    }
}
@ - webkit - keyframes mbCloudMoveright {
    from {
        left: -1000 px
    }
    to {
        left: 100 %
    }
}
@keyframes mbCloudMoveright {
    from {
        left: -1000 px
    }
    to {
        left: 100 %
    }
}
@ - webkit - keyframes mbCloudMovetop {
    from {
        bottom: -1000 px
    }
    to {
        bottom: 100 %
    }
}
@keyframes mbCloudMovetop {
    from {
        bottom: -1000 px
    }
    to {
        bottom: 100 %
    }
}
@ - webkit - keyframes mbCloudMovebottom {
    from {
        top: -1000 px
    }
    to {
        top: 100 %
    }
}
@keyframes mbCloudMovebottom {
    from {
        top: -1000 px
    }
    to {
        top: 100 %
    }
}.mb--cloud {
    position: absolute;background - size: 100 % 100 %
}.mb--cloud - 1 {
    width: 300 px;height: 112 px;background - image: url(. / mb_icon / c1.png)
}.mb--cloud - 2 {
    width: 359 px;height: 178 px;background - image: url(. / mb_icon / c2.png)
}.mb--cloud - 3 {
    width: 700 px;height: 300 px;background - image: url(. / mb_icon / c3.png)
}.mb - cloud3 - wrapper {
    position: absolute;left: 0;bottom: 0;width: 100 % ; - webkit - transition: top .5 s ease - out;transition: top .5 s ease - out;z - index: 2
}.air - balloon {
    position: absolute;bottom: 100 px;width: 120 px;height: 120 px;background - image: url(. / mb_icon / air_balloon.png);background - size: 100 % 100 % ; - webkit - animation: balloon - swave 15 s linear infinite;animation: balloon - swave 15 s linear infinite;z - index: 1
}.air - balloon1 {
    -webkit - animation: balloon - swave 15 s linear infinite;
    animation: balloon - swave 15 s linear infinite
}.air - balloon2 {
    -webkit - animation: balloon - swave 10 s linear infinite;
    animation: balloon - swave 10 s linear infinite
}
@ - webkit - keyframes balloon - swave {
    0 % {-webkit - transform: translate(0 px, 0);transform: translate(0 px, 0)
    }
    25 % {-webkit - transform: translate(0 px, 20 px);transform: translate(0 px, 20 px)
    }
    50 % {-webkit - transform: translate(0 px, 0);transform: translate(0 px, 0)
    }
    75 % {-webkit - transform: translate(0 px, -20 px);transform: translate(0 px, -20 px)
    }
    100 % {-webkit - transform: translate(0 px, 0);transform: translate(0 px, 0)
    }
}
@keyframes balloon - swave {
    0 % {-webkit - transform: translate(0 px, 0);transform: translate(0 px, 0)
    }
    25 % {-webkit - transform: translate(0 px, 20 px);transform: translate(0 px, 20 px)
    }
    50 % {-webkit - transform: translate(0 px, 0);transform: translate(0 px, 0)
    }
    75 % {-webkit - transform: translate(0 px, -20 px);transform: translate(0 px, -20 px)
    }
    100 % {-webkit - transform: translate(0 px, 0);transform: translate(0 px, 0)
    }
}.mb--leave {
    position: absolute;bottom: 110 % ;width: 99 px
}.mb--leave > div {
    width: 100 % ;height: 100 % ; - webkit - transform - origin: 50 % -100 % ; - ms - transform - origin: 50 % -100 % ;transform - origin: 50 % -100 %
}.mb--leave - bg - 1 {
    background - position: 0 0
}.mb--leave - bg - 2 {
    background - position: 100 px 0
}.mb--leave - bg - 3 {
    background - position: 200 px 0
}.mb--leave - 1 {
    height: 79 px
}.mb--leave - 1 > div {
    background - image: url(. / mb_icon / leaves_1.png)
}.mb--leave - 2 {
    height: 89 px
}.mb--leave - 2 > div {
    background - image: url(. / mb_icon / leaves_2.png)
}.mb--leave - 3 {
    height: 89 px
}.mb--leave - 3 > div {
    background - image: url(. / mb_icon / leaves_3.png)
}.mb--leave - 4 {
    height: 92 px
}.mb--leave - 4 > div {
    background - image: url(. / mb_icon / leaves_4.png)
}.mb--leave - 5 {
    height: 60 px
}.mb--leave - 5 > div {
    background - image: url(. / mb_icon / leaves_5.png)
}
@ - webkit - keyframes mbFalling {
    to {
        bottom: -100 px
    }
}
@keyframes mbFalling {
    to {
        bottom: -100 px
    }
}
@ - webkit - keyframes mbSway {
    0 % {-webkit - transform: rotate(-20 deg);transform: rotate(-20 deg)
    }
    100 % {-webkit - transform: rotate(20 deg);transform: rotate(20 deg)
    }
}
@keyframes mbSway {
    0 % {-webkit - transform: rotate(-20 deg);transform: rotate(-20 deg)
    }
    100 % {-webkit - transform: rotate(20 deg);transform: rotate(20 deg)
    }
}
@ - webkit - keyframes mbSwayAndFlip {
    0 % {-webkit - transform: scale(1, 1) rotate(-20 deg);transform: scale(1, 1) rotate(-20 deg)
    }
    100 % {-webkit - transform: scale(-1, 1) rotate(20 deg);transform: scale(-1, 1) rotate(20 deg)
    }
}
@keyframes mbSwayAndFlip {
    0 % {-webkit - transform: scale(1, 1) rotate(-20 deg);transform: scale(1, 1) rotate(-20 deg)
    }
    100 % {-webkit - transform: scale(-1, 1) rotate(20 deg);transform: scale(-1, 1) rotate(20 deg)
    }
}.mb--leave - falling1 {
    -webkit - animation: mbFalling 11 s linear infinite;
    animation: mbFalling 11 s linear infinite
}.mb--leave - sway1 {
    -webkit - animation: mbSway 3.5 s ease - in -out infinite alternate;
    animation: mbSway 3.5 s ease - in -out infinite alternate
}.mb--leave - flip1 {
    -webkit - animation: mbSwayAndFlip 3.5 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 3.5 s ease - in -out infinite alternate
}.mb--leave - falling2 {
    -webkit - animation: mbFalling 12 s linear infinite;
    animation: mbFalling 12 s linear infinite
}.mb--leave - sway2 {
    -webkit - animation: mbSway 4 s ease - in -out infinite alternate;
    animation: mbSway 4 s ease - in -out infinite alternate
}.mb--leave - flip2 {
    -webkit - animation: mbSwayAndFlip 4 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 4 s ease - in -out infinite alternate
}.mb--leave - falling3 {
    -webkit - animation: mbFalling 13 s linear infinite;
    animation: mbFalling 13 s linear infinite
}.mb--leave - sway3 {
    -webkit - animation: mbSway 4.5 s ease - in -out infinite alternate;
    animation: mbSway 4.5 s ease - in -out infinite alternate
}.mb--leave - flip3 {
    -webkit - animation: mbSwayAndFlip 4.5 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 4.5 s ease - in -out infinite alternate
}.mb--leave - falling4 {
    -webkit - animation: mbFalling 14 s linear infinite;
    animation: mbFalling 14 s linear infinite
}.mb--leave - sway4 {
    -webkit - animation: mbSway 5 s ease - in -out infinite alternate;
    animation: mbSway 5 s ease - in -out infinite alternate
}.mb--leave - flip4 {
    -webkit - animation: mbSwayAndFlip 5 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 5 s ease - in -out infinite alternate
}.mb--leave - falling5 {
    -webkit - animation: mbFalling 15 s linear infinite;
    animation: mbFalling 15 s linear infinite
}.mb--leave - sway5 {
    -webkit - animation: mbSway 5.5 s ease - in -out infinite alternate;
    animation: mbSway 5.5 s ease - in -out infinite alternate
}.mb--leave - flip5 {
    -webkit - animation: mbSwayAndFlip 5.5 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 5.5 s ease - in -out infinite alternate
}.mb--leave - falling6 {
    -webkit - animation: mbFalling 16 s linear infinite;
    animation: mbFalling 16 s linear infinite
}.mb--leave - sway6 {
    -webkit - animation: mbSway 6 s ease - in -out infinite alternate;
    animation: mbSway 6 s ease - in -out infinite alternate
}.mb--leave - flip6 {
    -webkit - animation: mbSwayAndFlip 6 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 6 s ease - in -out infinite alternate
}.mb--leave - falling7 {
    -webkit - animation: mbFalling 17 s linear infinite;
    animation: mbFalling 17 s linear infinite
}.mb--leave - sway7 {
    -webkit - animation: mbSway 6.5 s ease - in -out infinite alternate;
    animation: mbSway 6.5 s ease - in -out infinite alternate
}.mb--leave - flip7 {
    -webkit - animation: mbSwayAndFlip 6.5 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 6.5 s ease - in -out infinite alternate
}.mb--leave - falling8 {
    -webkit - animation: mbFalling 18 s linear infinite;
    animation: mbFalling 18 s linear infinite
}.mb--leave - sway8 {
    -webkit - animation: mbSway 7 s ease - in -out infinite alternate;
    animation: mbSway 7 s ease - in -out infinite alternate
}.mb--leave - flip8 {
    -webkit - animation: mbSwayAndFlip 7 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 7 s ease - in -out infinite alternate
}.mb--leave - falling9 {
    -webkit - animation: mbFalling 19 s linear infinite;
    animation: mbFalling 19 s linear infinite
}.mb--leave - sway9 {
    -webkit - animation: mbSway 7.5 s ease - in -out infinite alternate;
    animation: mbSway 7.5 s ease - in -out infinite alternate
}.mb--leave - flip9 {
    -webkit - animation: mbSwayAndFlip 7.5 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 7.5 s ease - in -out infinite alternate
}.mb--leave - falling10 {
    -webkit - animation: mbFalling 20 s linear infinite;
    animation: mbFalling 20 s linear infinite
}.mb--leave - sway10 {
    -webkit - animation: mbSway 8 s ease - in -out infinite alternate;
    animation: mbSway 8 s ease - in -out infinite alternate
}.mb--leave - flip10 {
    -webkit - animation: mbSwayAndFlip 8 s ease - in -out infinite alternate;
    animation: mbSwayAndFlip 8 s ease - in -out infinite alternate
}.mb--meteor {
    position: absolute;width: 4 px;
    background - image: -webkit - linear - gradient(top, transparent, rgba(255, 255, 255, .5), #fff);
    background - image: linear - gradient(to bottom, transparent, rgba(255, 255, 255, .5), #fff);
    border - radius: 50 % ; 
    - webkit - transform: rotate(40 deg); 
    - ms - transform: rotate(40 deg);
    transform: rotate(40 deg);box - shadow: 0 20 px 50 px 2 px# fff
}.mb--moon {
    position: absolute;left: 0;top: 0;width: 100 % ;height: 480 px
}.mb--moon.moon--picture {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 346px;
    height: 346px;
    background-image:url(. / mb_icon / moon.png);
    background-size:100% 100%
}.movingbackground {
    position: absolute;left: 0;top: 0;width: 100 % ;height: 100 %
}
@ - webkit - keyframes mbSunshine {
    0 % {-webkit - transform: rotate(0);transform: rotate(0)
    }
    100 % {-webkit - transform: rotate(360 deg);transform: rotate(360 deg)
    }
}
@keyframes mbSunshine {
    0 % {-webkit - transform: rotate(0);transform: rotate(0)
    }
    100 % {-webkit - transform: rotate(360 deg);transform: rotate(360 deg)
    }
}