html,body{width:100%;height:100%;min-width: 320px;min-height: 460px;}
a,img,button,input,textarea,div,p,span,h1,h2,h3,h4,h5,h6,li,ul,dl,dt,dd{-webkit-tap-highlight-color:rgba(255,255,255,0);}
::-webkit-input-placeholder {color: #fff;}

/*背景*/
.bg{width:100%;height:100%;background: url("http://n.sinaimg.cn/97973/20160804/u-MU-fxupmws1767341.jpg") no-repeat top;background-size: cover;overflow:hidden;position:relative;}
/*棒棒糖*/
.sugar{width:0.38rem;height:1.02rem;background: url("http://n.sinaimg.cn/97973/20160804/cv0N-fxutfpf1198084.png") no-repeat center;background-size: 100% 100%;position:absolute;left:1.66rem;top:2.84rem;}
#sugar1{transform:rotate(-30deg);-webkit-transform:rotate(-30deg);}
#sugar2{transform:rotate(40deg);-webkit-transform:rotate(40deg);top:2.62rem;left:auto;right:1.37rem;}
/*中间表单*/
.form{width:4.53rem;height:2.4rem;background: #f7ffdf;border-radius: 0.2rem;-webkit-border-radius: 0.2rem;margin:0 auto;position:relative;}
.form .greenMonster{width:2rem;height:0.94rem;background: url("http://n.sinaimg.cn/97973/20160804/HmpX-fxupmws1767382.png") no-repeat top;background-size: 100% 100%;position:absolute;left:1.35rem;top:-0.94rem;}
.form #game-link{width:2.2rem;height:0.5rem;margin:0 auto;border:none;outline: none;text-align: center;background: #97b180;color:#fff;padding:0 0.2rem;display:block;margin:0 auto;font-size: 0.24rem;border-radius: 4px;-webkit-border-radius: 4px;}
.form .btn{width:2.6rem;height:0.69rem;line-height: 0.69rem;text-align: center;font-size: 0.34rem;border-radius: 4px;-webkit-border-radius: 4px;color:#fff;background: #82cf78;margin:0.23rem auto 0;}
/*规则*/
.rules{margin-left:1.85rem;font-size: 0.2rem;line-height:0.3rem; color:#5d823d;}
/*横屏*/
.landscape{display:none;}

.sugar-rotate-1{
    animation:sugar-rotate-1 2s linear infinite;
    -webkit-animation:sugar-rotate-1 2s linear infinite;
}
@keyframes sugar-rotate-1 {
    0%{transform:rotate(-30deg)}
    25%{transform:rotate(-60deg)}
    50%{transform:rotate(-30deg)}
    75%{transform:rotate(0deg)}
    100%{transform:rotate(-30deg);}
}
@-webkit-keyframes sugar-rotate-1 {
    0%{-webkit-transform:rotate(-30deg)}
    25%{-webkit-transform:rotate(-60deg)}
    50%{-webkit-transform:rotate(-30deg)}
    75%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(-30deg);}
}
.sugar-rotate-2{
    animation:sugar-rotate-2 2s linear infinite;
    -webkit-animation:sugar-rotate-2 2s linear infinite;
}
@keyframes sugar-rotate-2 {
    0%{transform:rotate(40deg)}
    25%{transform:rotate(70deg)}
    50%{transform:rotate(40deg)}
    75%{transform:rotate(10deg)}
    100%{transform:rotate(40deg);}
}
@-webkit-keyframes sugar-rotate-2 {
    0%{-webkit-transform:rotate(40deg)}
    25%{-webkit-transform:rotate(70deg)}
    50%{-webkit-transform:rotate(40deg)}
    75%{-webkit-transform:rotate(10deg)}
    100%{-webkit-transform:rotate(40deg);}
}

.blueMonster{
    width:0.81rem;height:0.85rem;background: url("http://n.sinaimg.cn/97973/20160804/uy-O-fxutfpc4425006.png") no-repeat center;background-size: 100% 100%;position:absolute;right:0.05rem;bottom:-0.36rem;

}

.bounce{
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes bounce {
    from, 20%, 53%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}
@-webkit-keyframes bounce {
    from, 20%, 53%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}