/* public */
html,body,form,ol,ul,li,div,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,th,td,font,em,ins,span,a{margin:0; padding:0; outline: none;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;font-weight:normal}
html{_filter:expression(document.execCommand("BackgroundImageCache",false,true));}
ul,li,div,dl,dt,dd{list-style:none;}
h1.wm-public{height:0px; line-height:0px; font-size:0px;}
span,a,strong,div{-webkit-appearance:none;-webkit-tap-highlight-color:transparent;}
a{text-decoration:none;}
a{blr:expression(this.onFocus=this.blur());outline:none;}
img{border:0;}
font,em{font-style:normal; font-family:\5b8b\4f53;}
label{vertical-align:middle; font-family:tahoma;}
textarea,input{resize:none; outline:none;}
ins{float:right; text-decoration:none; font-weight:normal;}
.pub_wsp{word-wrap:break-word; word-break:break-all;}
.pub_abso{vertical-align:middle;}
.pub_clr{clear:both;font-size:0;height:0;line-height:0;overflow:hidden;}
.pub_ani{-webkit-transition:0.4s;-moz-transition:0.4s;-ms-transition:0.4s;-o-transition:0.4s;transition:0.4s;}
.pub_yh{font-family:"Microsoft YaHei";}
.pub_btn{display: block; overflow: hidden; text-indent: -999px; cursor: pointer; margin: 0 auto;}
.pub_btn:hover{background-position: 0 bottom;}
.pub_le{float: left}
.pub_lr{float: right;}
.pub_ib{text-align: center; display: table; word-spacing:-1em;}
.pub_text1{display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.pub_text2{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.pub_table{border-collapse: collapse; width: 100%;}
.none{display:none;}
*:not(input):not(textarea){user-select:none;}
body{background:#282a2c; font-size:12px; font-family:"Microsoft YaHei",Verdana,Geneva,sans-serif,\5b8b\4f53;  -webkit-text-size-adjust: 100%;}
#content{position: relative; display: none; height: 68.55rem;}
.section{position: relative;}
.publicMain{width: 13rem; margin: 0 auto; position: relative; height: 100%;}
.section1{height: 12.93rem; background: url(../images/bg1.jpg) no-repeat 0 0; background-size: auto 100%;}
.section2{height: 12.49rem; background: url(../images/bg2.jpg) no-repeat 0 0; background-size: auto 100%;}
.section3{height: 11.29rem; background: url(../images/bg3.jpg) no-repeat 0 0; background-size: auto 100%;}
.section4{height: 13.98rem; background: url(../images/bg4.jpg) no-repeat 0 0; background-size: 100% auto;}
.section5{height: 15.86rem; background: url(../images/bg5.jpg) no-repeat 0 0; background-size: auto 100%;}



.logo{left: .2rem; top: 1.2rem; width: 2.56rem; z-index: 10; position: absolute;}
.btnHome{width: 1.31rem; height: .62rem; background: url(../images/btnHome.png) no-repeat 0 0; background-size: 100% auto; position: absolute; right: .38rem; top: 1.6rem; z-index: 10;}
.loginBox{height: .62rem; line-height: .62rem; position: absolute; right: 2rem; top: 1.6rem; font-size: .24rem; color: #FFF; text-align: right; z-index: 10;}
.loginBox a{color: #dcba81; cursor: pointer;}
.loginBox span{color: #dcba81;}
.loginBox div{display: none;}

.serverInfo{width: 5.58rem; height: .31rem; line-height: .31rem; text-align: center; position: absolute; left: 4.28rem; top: 11.94rem; font-size: .18rem; color: #f3da95; font-weight: bold;}
.serverInfo2{top: 4.73rem;}
.serverInfo span.a1{float: left; width: 1.59rem; height: .31rem;}
.serverInfo span.a2{float: right; width: 2.47rem; height: .31rem;}

.nav{width:13rem; height: 1.5rem; position: absolute; left: 0; top: 0; display: flex; justify-content: center;}
.nav a{display: block; width: 4.32rem; height: 1.5rem; cursor: pointer; background-position: 0 0; background-size: 100% auto; background-repeat: no-repeat;}
.nav a.n1{background-image: url(../images/n1.png);}
.nav a.n2{background-image: url(../images/n2.png);}
.nav a.n3{background-image: url(../images/n3.png);}
.nav a:hover,.nav a.on{background-position: 0 bottom;}

.btns{width: 13rem; position: absolute; left: 0; top: 8.75rem;}
.btns div.li{width: 6.4rem;}
.btns a{display: block; width: 4.12rem; height: 1.2rem; background-repeat: no-repeat; background-position: center 0; background-size: auto 100%; cursor: pointer; margin: 0 auto; margin-bottom: .1rem;}
.btns a.a1{background-image: url(../images/btnyy.png);}
.btns a.a2{background-image: url(../images/btnlc.png);}
.btns span.time{display: block; width: 3.84rem; height: .42rem; line-height: .42rem; text-align: center; background: url(../images/timebg.png) no-repeat 0 0; background-size: 100% auto; font-size: .2rem; color: #fff7b5; font-weight: bold; margin: 0 auto;}

.btnsPriv{display: block; width: 3.09rem; height: .51rem; position: absolute; left: 5.4rem; top: 2.94rem; cursor: pointer; background: url(../images/btnsPriv.png) no-repeat 0 0; background-size: 100% auto;}

.boxRule2{padding: 2.9rem 0 0 5.4rem; height: 1rem;}
.btnsRule2{display: block; width: 3.09rem; height: .51rem; cursor: pointer; background: url(../images/btnRule.png) no-repeat 0 0; background-size: 100% auto;}
.buttonCont{height: 2rem; display: flex; justify-content: space-around;}
.buttonCont div{display: block; width: 4.1rem; height: 1.2rem;}
.buttonCont a{display: block; width: 4.1rem; height: 1.2rem; cursor: pointer; background-position: 0 0; background-size: 100% auto; background-repeat: no-repeat;}
.buttonCont a.v1{background-image: url(../images/btnCreate.png);}
.buttonCont a.v2{background-image: url(../images/btnJoin.png);}
.buttonCont a.v3{background-image: url(../images/btnYao.png);}

.prizelist{width: 12.97rem; height: 3.06rem; background: url(../images/prizelist.png) no-repeat 0 0; background-size: 100% auto; position: relative; margin: 0 auto; margin-bottom: .54rem;}
.listScroll{width: 11rem; height: 2.6rem; position: absolute; left: 1.6rem; top: 0; overflow: hidden;}
.listScroll ul{width: 20rem; position: absolute; left: 0; top: 0; transition: .6s;}
.listScroll li{float: left; width: 3.7rem; height: 2.6rem;}
.listScroll img{display: block; width: 3.7rem; height: 2.6rem;}
.btnPrev,.btnNext{display: block; width: .7rem; height: 1rem; cursor: pointer; position: absolute; z-index: 10;}
.btnPrev{left: 1.37rem; top: .89rem;}
.btnNext{right: 0; top: .89rem;}

.teamBox{width: 13rem; height: 2.14rem; position: relative;}
.teamInfo{background: url(../images/teamInfo.png) no-repeat 0 0; background-size: 100% auto; position: absolute; left: 0; top: 0; width: 11.66rem; height: 2.14rem;}
.teamNum{position: absolute; left: 1.26rem; top: .02rem; height: .27rem; line-height: .27rem; font-size: .16rem; color: #3f3830;}
.teamHead{width: 10rem; height: 1.8rem; position: absolute; left: 1.4rem; top: .32rem;}
.headli{width: 2rem; height: 1.8rem; float: left;}
.headli a{display: block; width: 2rem; height: 1.56rem; background-image: url(../images/add.png); background-repeat: no-repeat; background-position: center .23rem; background-size: 1.3rem auto; cursor: pointer;}
.headli a.a1{background-image: url(../images/head/h1.png); cursor: default;}
.headli a.a2{background-image: url(../images/head/h2.png); cursor: default;}
.headli a.a3{background-image: url(../images/head/h3.png); cursor: default;}
.headli a.a4{background-image: url(../images/head/h4.png); cursor: default;}
.headli a.a5{background-image: url(../images/head/h5.png); cursor: default;}
.headli a.a6{background-image: url(../images/head/h6.png); cursor: default;}
.headli a.a7{background-image: url(../images/head/h7.png); cursor: default;}
.headli a.a8{background-image: url(../images/head/h8.png); cursor: default;}
.headli:first-child a{background-position: center; background-size: 1.5rem auto;}

.headli span{display: block; text-align: center; font-size: .14rem; color: #f3da95;}

.btnList{background: url(../images/btnList.png) no-repeat 0 0; background-size: 100% auto; position: absolute; right: 0; top: 0; width: 1.32rem; height: 2.14rem; cursor: pointer;}


.boxPay{padding: 5.5rem 0 0 0; height: 1.26rem;}
.btnPay{display: block; width: 4.12rem; height: 1.2rem; cursor: pointer; background: url(../images/btnPay.png) no-repeat 0 0; background-size: 100% auto; margin: 0 auto;}

.boxRule3{padding: 0 0 0 5.4rem; height: 4.7rem;}
.btnsRule3{display: block; width: 3.09rem; height: .51rem; cursor: pointer; background: url(../images/btnRule.png) no-repeat 0 0; background-size: 100% auto;}
.qrcode{width: 3.04rem; height: 3.39rem; background: url(../images/qrcode.png) no-repeat 0 0; background-size: 100% auto; margin: 0 auto;}


.popFiex{width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0,0,0,0.8); z-index: 100; display: none;}
.popCont{position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.pop1{width: 6.86rem; height: 10.44rem; background: url(../images/pop1.png) no-repeat 0 0; background-size: 100% auto;}
.pop2{width: 6.86rem; height: 9.14rem; background: url(../images/pop2.png) no-repeat 0 0; background-size: 100% auto;}
.pop3{width: 6.86rem; height: 5.46rem; background: url(../images/pop3.png) no-repeat 0 0; background-size: 100% auto;}
.closeBtn{display: block; width: .4rem; height: .4rem; background: url(../images/close.png) no-repeat 0 0; background-size: 100% auto; cursor: pointer; overflow: hidden; text-indent: -9999rem; position: absolute; right: .42rem; top: .46rem; z-index: 10}
.closeBtn2{display: block; width: .46rem; height: .46rem; cursor: pointer; overflow: hidden; text-indent: -9999rem; position: absolute; right: .42rem; top: .46rem; z-index: 10}

.selectSystem{display: flex; justify-content: center; padding-top: .2rem;}
.selectSystem a{display: block; width: 1.6rem; height: .3rem; line-height: .3rem; color: #ffe5b1; font-size: .2rem; text-indent: .32rem; background: url(../images/on.png) no-repeat 0 bottom; background-size: .3rem auto; cursor: pointer;}
.selectSystem a.on{background-position: 0 0;}

.pt1{height: .2rem;}
.pt2{height: 2rem; background: url(../images/pt2.png) no-repeat center .98rem; background-size: 5.79rem auto;}
.pt3{height: 2rem; background: url(../images/pt3.png) no-repeat center .98rem; background-size: 5.79rem auto;}
.pt4{height: 4rem; background: url(../images/pt4.png) no-repeat center .98rem; background-size: 6.63rem auto;}
.pt5{height: 2.2rem; background: url(../images/pt5.png) no-repeat center .98rem; background-size: 5.79rem auto;}
.pt6{height: 2rem; background: url(../images/pt6.png) no-repeat center .98rem; background-size: 5.79rem auto;}

.roleCont{width: 6.49rem; height: 6.69rem; margin: 0 auto; position: relative;}
.roleDiv{width: 6.49rem; height: 6.69rem; overflow: hidden; position: relative;}
.roleDiv div{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: 0 0; background-size: 100% auto; background-repeat: no-repeat; display: none;}
.roleDiv div.r1{background-image: url(../images/head/r1.png); display: block;}
.roleDiv div.r2{background-image: url(../images/head/r2.png);}
.roleDiv div.r3{background-image: url(../images/head/r3.png);}
.roleDiv div.r4{background-image: url(../images/head/r4.png);}
.roleDiv div.r5{background-image: url(../images/head/r5.png);}
.roleDiv div.r6{background-image: url(../images/head/r6.png);}
.roleDiv div.r7{background-image: url(../images/head/r7.png);}
.roleDiv div.r8{background-image: url(../images/head/r8.png);}
.roleTab{width: 100%; height: .86rem; position: absolute; left: 0; bottom: 0; background: url(../images/head/tabbg.png) no-repeat center 0; background-size: 6.31rem auto; display: flex; align-items: center;}
.roleClick{width: 100%; height: .59rem; display: flex; justify-content: center;}
.roleClick a{display: block; width: .6rem; height: .59rem; background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; cursor: pointer; -webkit-filter: grayscale(100%);filter: grayscale(100%); margin: 0 .05rem;}
.roleClick a.icon1{background-image: url(../images/head/z1.png);}
.roleClick a.icon2{background-image: url(../images/head/z2.png);}
.roleClick a.icon3{background-image: url(../images/head/z3.png);}
.roleClick a.icon4{background-image: url(../images/head/z4.png);}
.roleClick a.icon5{background-image: url(../images/head/z5.png);}
.roleClick a.icon6{background-image: url(../images/head/z6.png);}
.roleClick a.icon7{background-image: url(../images/head/z7.png);}
.roleClick a.icon8{background-image: url(../images/head/z8.png);}
.roleClick a.on{-webkit-filter: grayscale(0);filter: grayscale(0);}
.selectCont{padding: .2rem 0 0 0; height: 1.6rem;}
.selectServerName{width: 3.3rem; height: .54rem; line-height: .54rem; padding: 0 .1rem; background: #fffcf4; border: .01rem solid #e3c68c; font-size: .2rem; color: #78391b; outline: none; margin: 0 auto; margin-bottom: .2rem;}
.selectInput{width: 3.3rem; height: .54rem; line-height: .54rem; padding: 0 .1rem; background: #fffcf4; border: .01rem solid #e3c68c; font-size: .2rem; color: #78391b; outline: none; margin: 0 auto; display: block;}

.enterRoleName{height: 2.5rem;}
.enterRoleName p{height: .7rem; line-height: .7rem; font-size: .26rem; color: #fbe6ad;}
.enterRoleName a{float: left; width: 3rem; height: .7rem; text-align: right;}
.enterRoleName span{float: left; height: .7rem;}

.yaoCont{width: 5.7rem; margin: 0 auto; margin-bottom: .4rem;}
.yaoTitle{font-size: .22rem; color: #fbe6ad; height: .5rem; line-height: .5rem;}
.yaolink{height: 1.15rem; position: relative;}
.yaolink input.inp{float: left; width: 4.2rem; height: .5rem; border: .02rem solid #4d402f; background: #FFF; font-size: .2rem; color: #1b1613; padding: 0 .1rem;}
.yaolink input.btn{width: 1.26rem; height: .54rem; background: url(../images/btnCopy.png) no-repeat center; background-size: 1.26rem auto; cursor: pointer; outline: none; border: 0 none; display: block; position: absolute; right: 0; top: 0; z-index: 12;}
.yaoImg{width: 5.7rem; height: 3.16rem; position: relative; overflow: hidden;}
.yaoBorder{border: .01rem solid #72552c; width: 5.68rem; height: 3.03rem; position: absolute; left: 0; top: .05rem;}
.create_box{width: 5.6rem; height: 3.15rem; position: absolute; left: .05rem; top: 0; z-index: 1;}
.yaoImg img.img{display: block; width: 5.6rem; height: 3.15rem;}
.yaoImg .qrcodeImg{width: 1rem; height: 1rem; position: absolute; left: .13rem; top: 2.03rem; z-index: 2;}
.yaoImg .qrcodeImg img{width: 1rem; height: 1rem; display: block;}
.yaoImg div.name{position: absolute; left: 1.78rem; bottom: .23rem; font-size: .18rem; color: #fbe6ad;}
.pop_share_down{display: block; width: 5.6rem; height: 3.15rem; position: absolute; left: .05rem; top: 0; z-index: 2;}
.pop_share_down img{display: block; width: 5.6rem; height: 3.15rem;}

.popBtns{display: flex; justify-content: center;}
.popBtns a{display: block; width: 2.46rem; height: .72rem; margin: 0 .1rem; cursor: pointer; background-position: 0 0; background-size: 100% auto; background-repeat: no-repeat;}
.popBtns a.btn_submit{background-image: url(../images/btn_submit.png); width: 3.04rem; height: .88rem;}
.popBtns a.btn_yao{background-image: url(../images/btn_yao.png); width: 2.46rem; height: .72rem;}
.popBtns a.btn_cancel{background-image: url(../images/btn_cancel.png);}
.popBtns a.btn_enter{background-image: url(../images/btn_enter.png);}

.listCont{width: 5.7rem; margin: 0 auto; margin-bottom: .4rem;}
.listlink{height: 1.15rem; position: relative;}
.listlink input.inp{float: left; width: 4.2rem; height: .5rem; border: .02rem solid #4d402f; background: #FFF; font-size: .2rem; color: #1b1613; padding: 0 .1rem;}
.listlink input.btn{width: 1.26rem; height: .54rem; background: url(../images/btnSearch.png) no-repeat center; background-size: 1.26rem auto; cursor: pointer; outline: none; border: 0 none; display: block; position: absolute; right: 0; top: 0; z-index: 12;}
.listThead{height:.44rem; font-size: .2rem; color: #fbe6ad; text-align: center; margin-bottom: .2rem;}
.listThead span{float: left; height: .44rem;}
.listThead span.a1{width: 1.3rem;}
.listThead span.a2{width: 1.9rem;}
.listThead span.a3{width: 1.2rem;}

#list{height: 3.8rem;}
.listTbody{height: .48rem; line-height: .48rem; font-size: .2rem; color: #fbe6ad; text-align: center; margin-bottom: .28rem;}
.listTbody span{float: left; height: .48rem;}
.listTbody span.a1{width: 1.3rem;}
.listTbody span.a2{width: 1.9rem;}
.listTbody span.a3{width: 1.2rem;}
.listTbody a.join{float: right; width: 1.26rem; height: .48rem; cursor: pointer; background: url(../images/btnJoin2.png) no-repeat 0 0; background-size: 100% auto;}
.listTbody:nth-child(odd){background: rgba(85,62,35,0.8);}
.listTbody:nth-child(even){background: rgba(237,185,82,0.3);}

.page{display: flex; justify-content: center;}
.page a{margin: 0 .08rem; cursor: pointer;}
.page a.prev,.page a.next{display: block; width: .29rem; height: .31rem;}
.page a.prev{background: url(../images/prev.png) no-repeat 0 0; background-size: 100% auto;}
.page a.next{background: url(../images/next.png) no-repeat 0 0; background-size: 100% auto;}
.page a.num{display: block; width: .29rem; height: .31rem; background: #fff7b5; font-size: .14rem; color: #c2934c; text-align: center; line-height: .31rem;}
.page a.active{background: #cc934c; color: #fff7b5;}

.msg{padding: .86rem .6rem 0 .6rem; height: 2.4rem; display: flex; justify-content: center; align-items: center; font-size: .26rem; color: #fbe6ad; line-height: .68rem; text-align: center;}

.share_ewm_box{display: none; width: 1.2rem; height: 1.2rem;}

.ruleCont{width: 6rem; height: 6.12rem; margin: 0 auto; overflow: hidden; overflow-y: auto; font-size: .2rem; line-height: .34rem; color: #fbe6ad;}
#ruleShow3 .ruleCont p{margin-bottom: .16rem; line-height: .42rem;}
.ruleCont::-webkit-scrollbar{width:.05rem;height:.05rem;background-color:rgba(0,0,0,0);}
.ruleCont::-webkit-scrollbar-track{border-radius:0;background-color:#1e1813;}/*底*/
.ruleCont::-webkit-scrollbar-thumb{border-radius:0;background-color:#b19c85;}/*面*/
.ruleCont::-webkit-scrollbar-thumb:hover{background-color:rgba(143,143,148,1);}
.ruleCont::-webkit-scrollbar-thumb:active{background-color:rgba(106,106,112,1);}
.ruleCont::-webkit-scrollbar-track-piece{margin:0;}

.hoverTop{-webkit-transition:0.4s;-moz-transition:0.4s;-ms-transition:0.4s;-o-transition:0.4s;transition:0.4s;}
.hoverTop:hover{
  -webkit-transform: translate(0,-10px);
  -moz-transform: translate(0,-10px);
  -ms-transform: translate(0,-10px);
  -o-transform: translate(0,-10px);
  transform: translate(0,-10px);
}
.hoverYuan{-webkit-transition:0.4s;-moz-transition:0.4s;-ms-transition:0.4s;-o-transition:0.4s;transition:0.4s;}
.hoverYuan:hover{
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.moveleft{-webkit-transform: translate3d(-100%,0,0);-moz-transform: translate3d(-100%,0,0);-ms-transform: translate3d(-100%,0,0);-o-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0); filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
.moveright{-webkit-transform: translate3d(100%,0,0);-moz-transform: translate3d(100%,0,0);-ms-transform: translate3d(100%,0,0);-o-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0); filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
.moveup{-webkit-transform: translate3d(0,-100%,0);-moz-transform: translate3d(0,-100%,0);-ms-transform: translate3d(0,-100%,0);-o-transform: translate3d(0,-100%,0);transform: translate3d(0,-100%,0); filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}
.movedown{-webkit-transform: translate3d(0,100%,0);-moz-transform: translate3d(0,100%,0);-ms-transform: translate3d(0,100%,0);-o-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0); filter:alpha(opacity=0);-moz-opacity:0; opacity:0;}

.moveyuan{
  -webkit-animation: moveyuan 40s linear infinite;
  -moz-animation: moveyuan 40s linear infinite;
  -o-animation: moveyuan 40s linear infinite;
  -ms-animation: moveyuan 40s linear infinite;
  animation: moveyuan 40s linear infinite;
}
.moveyuan2{
  -webkit-animation: moveyuan2 5s linear infinite;
  -moz-animation: moveyuan2 5s linear infinite;
  -o-animation: moveyuan2 5s linear infinite;
  -ms-animation: moveyuan2 5s linear infinite;
  animation: moveyuan2 5s linear infinite;
}
@-webkit-keyframes moveyuan{
  0%{-webkit-transform: rotate(0deg);}
  100%{-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes moveyuan{
  0%{-moz-transform: rotate(0deg);}
  100%{-moz-transform: rotate(-360deg);}
}
@-ms-keyframes moveyuan{
  0%{-ms-transform: rotate(0deg);}
  100%{-ms-transform: rotate(-360deg);}
}
@-o-keyframes moveyuan{
  0%{-o-transform: rotate(0deg);}
  100%{-o-transform: rotate(-360deg);}
}
@keyframes moveyuan{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(-360deg);}
}

@-webkit-keyframes moveyuan2{
  0%{-webkit-transform: rotate(0deg);}
  100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes moveyuan2{
  0%{-moz-transform: rotate(0deg);}
  100%{-moz-transform: rotate(360deg);}
}
@-ms-keyframes moveyuan2{
  0%{-ms-transform: rotate(0deg);}
  100%{-ms-transform: rotate(360deg);}
}
@-o-keyframes moveyuan2{
  0%{-o-transform: rotate(0deg);}
  100%{-o-transform: rotate(360deg);}
}
@keyframes moveyuan2{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}

.moveTop{
  -webkit-animation: moveTop 1s ease-in alternate;
  -moz-animation: moveTop 1s ease-in alternate;
  -o-animation: moveTop 1s ease-in alternate;
  -ms-animation: moveTop 1s ease-in alternate;
  animation: moveTop 1s ease-in alternate;
}
@-webkit-keyframes moveTop{
  0%{-webkit-transform:translate(0,-10px);}
  100%{-webkit-transform:translate(0,10px);}
}
@-moz-keyframes moveTop{
  0%{-moz-transform:translate(0,-10px);}
  100%{-moz-transform:translate(0,10px);}
}
@-ms-keyframes moveTop{
  0%{-ms-transform:translate(0,-10px);}
  100%{-ms-transform:translate(0,10px);}
}
@-o-keyframes moveTop{
  0%{-o-transform:translate(0,-10px);}
  100%{-o-transform:translate(0,10px);}
}
@keyframes moveTop{
  0%{transform:translate(0,-10px);}
  100%{transform:translate(0,10px);}
}