* {
    margin: 0;
    padding: 0;
    touch-action: none;
    -webkit-touch-callout: none !important;
    -webkit-overflow-scrolling: touch;
}

html, body {
    -webkit-touch-callout: none !important;
    -webkit-touch-callout: none;
    -ms-touch-callout: none;
    -moz-touch-callout: none;
}

button {
    -webkit-touch-callout: none !important;
    -webkit-touch-callout: none;
    -ms-touch-callout: none;
    -moz-touch-callout: none;
}

#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 背景 */

.bg {
    background: url("../images/bg1.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: -10;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 雾 */

.fog {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fog img {
    position: absolute;
    top: 0%;
    right: -22%;
    width: 190%;
    height: 100%;
    transform: rotateZ(90deg);
}

/* 月亮 */

.moon {
    position: absolute;
    top: 6%;
    left: 66%;
    width: 280px;
    height: 100px;
}

.moon img {
    width: 100%;
    height: 100%;
    opacity: .8;
}

.ground img {
    transform: rotateZ(96deg);
    width: 100px;
    height: 80px;
}

#rabbit {
    position: absolute;
    top: 2%;
    left: 14%;
    width: 50px;
    transform: rotateZ(96deg);
    z-index: 10;
}

.cloud2 {
    position: absolute;
    top: 27%;
    left: 11%;
}

.cloud3 {
    position: absolute;
    top: 54%;
    left: 11%;
}

.cloud4 {
    position: absolute;
    top: 76%;
    left: 11%;
}

.score {
    position: absolute;
    bottom: 21%;
    right: 2%;
    color: blanchedalmond;
    font-size: 22px;
    transform: rotateZ(90deg);
}

/* 花朵 */

.flower {
    width: 465px;
    position: absolute;
    top: 22%;
    left: 1%;
    transform: rotateZ(92deg);
    z-index: 51;
}

/* 数 */

.tree {
    width: 228px;
    position: absolute;
    bottom: 3%;
    left: 47%;
    transform: rotateZ(54deg);
}

/* 建筑 */

.architecture {
    width: 533px;
    position: absolute;
    top: 23%;
    left: -25%;
    transform: rotateZ(90deg);
}

.jumpBtn {
    position: absolute;
    bottom: 10%;
    right: 33%;
    width: 68px;
    height: 12px;
    line-height: 42px;
    text-align: center;
    border-radius: 15px;
    transform: rotateZ(90deg);
    z-index: 9999999;
    font-size: 100%;
    background-color: #DDAD47;
}

.jumpBtn span {
    position: absolute;
    top: 16%;
    left: 32%;
    z-index: 99;
    color: blue;
    font-weight: bolder;
}

.jumpBtn img {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
}

/* 音乐 */

#audioBg {
    position: absolute;
    top: 0%;
    left: 0%;
    opacity: 0;
}

/* 星星 */

.start {
    position: absolute;
    top: -3%;
    left: 41%;
    width: 386px;
    transform: rotateZ(90deg);
}

#rabbitDay {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 200%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.363);
    z-index: -10;
    transition: all ease .4s;
    opacity: 0;
}

#rabbitDay .context {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 43%;
    height: 95px;
    border-radius: 15px;
    background-color: rgb(9, 168, 231);
    transform: translate(-50%, -50%) rotateZ(90deg);
    opacity: 0.8;
    padding: 15px;
}

#rabbitDay .context h2 {
    line-height: 1;
    color: #303133;
    font-size: 18px;
}

#rabbitDay .msgText {
    color: #606266;
    font-size: 14px;
    padding: 20px 10px;
}

#rabbitDay .footer {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
}

#rabbitDay .footer button {
    color: #fff;
    background-color: #e9ec25;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    border-radius: 5px;
    box-sizing: border-box;
    border: none;
    width: 90px;
    height: 25px;
    color: black;
}

#increaeJump {
    width: 400px;
    height: 300px;
    position: absolute;
    bottom: 0%;
    left: 0%;
}