.body{
    max-width:640px;
    margin:auto;
    min-height:100%;
    background-color:#ffffff;
    overflow-x:hidden;
    position:relative;
}


.nav{
    text-align:center;
    line-height:43px;
    border-top:1px solid #707070;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#707070), to(#393939));
    background: -moz-linear-gradient(center top , #707070, #393939);
}
.nav a{
    display:inline-block;
    width:100%;
    height:100%;
    color:#fff;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
.nav li{
    background:url("../imgs/4.png") no-repeat right center transparent;
    -webkit-background-size:auto 80%;
    background-size:auto 100%;
}
.nav li:last-of-type{background:none;}


.card_lol label{
    background:rgba(255,255,255,0.4);
    display:block;
    width:100%;
    color:#444;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:0 5px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.card_lol a{
    display: block;
    position:relative;
    margin-right:5px;
    margin-bottom:5px;
}

..card_lol li:hover{ cursor:pointer;}


.card_lol{
    position:absolute;
    text-align:center;
    /*overflow: hidden;*/
    top:5%;
    left:20px;
    width:40%;
    margin:auto;
}
.card_lol li{
    line-height:45px;
    width:100%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-transition:-webkit-transform .5s ease;
}



.card_lol li:nth-child(1) {
    -webkit-animation:animate1 .5s ease-in
}
.card_lol li:nth-child(2) {
    -webkit-animation:animate2 .5s ease-in
}
.card_lol li:nth-child(3) {
    -webkit-animation:animate3 .5s ease-in
}
.card_lol li:nth-child(4) {
    -webkit-animation:animate4 .5s ease-in
}
.card_lol li:nth-child(5) {
    -webkit-animation:animate1 .5s ease-in
}
.card_lol li:nth-child(6) {
    -webkit-animation:animate2 .5s ease-in
}
.card_lol li:nth-child(7) {
    -webkit-animation:animate3 .5s ease-in
}
.card_lol li:nth-child(8) {
    -webkit-animation:animate4 .5s ease-in
}



@-webkit-keyframes animate1 {
    0% {
        -webkit-transform:translate(-300px,-100px)
    }
    100% {
        -webkit-transform:translate(0,0)
    }
}@-webkit-keyframes animate2 {
     0% {
         -webkit-transform:translate(300px,-100px)
     }
     100% {
         -webkit-transform:translate(0,0)
     }
 }@-webkit-keyframes animate3 {
      0% {
          -webkit-transform:translate(-300px,100px)
      }
      100% {
          -webkit-transform:translate(0,0)
      }
  }@-webkit-keyframes animate4 {
       0% {
           -webkit-transform:translate(300px,100px)
       }
       100% {
           -webkit-transform:translate(0,0)
       }
      }