@CHARSET "UTF-8";
*{margin:0px; padding:0px;}
body{margin:0px; padding:0px; font:.85em/1.4 "微软雅黑","Microsoft Yahei",'Arial','san-serif'; color:#666;}
img{border:0px; max-width:100%; height:auto; width:auto9; -ms-interpolation-mode:bicubic; vertical-align:middle}
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0)}
input{border:0 none; -webkit-appearance:none}
ul,p{padding:0; margin:0}
h1,h2,h3,h4,h5,h6{margin:0; font-weight:100}
ul,li{list-style:none}
a{color:#666}
a,a:hover{text-decoration:none}
a:focus{outline:none}

.animated{-webkit-animation-duration:1.4s; animation-duration:1.4s; -webkit-animation-fill-mode:both; animation-fill-mode:both }

@-webkit-keyframes bounceIn{
  0%{
  opacity:0;
  -webkit-transform:scale(.3);
  transform:scale(.3)
}
50%{
  opacity:1;
  -webkit-transform:scale(1.05);
  transform:scale(1.05)
}
70%{
  -webkit-transform:scale(.9);
  transform:scale(.9)
}
100%{
  opacity:1;
  -webkit-transform:scale(1);
  transform:scale(1)
}

}
@keyframes bounceIn{
  0%{
  opacity:0;
  -webkit-transform:scale(.3);
  -ms-transform:scale(.3);
  transform:scale(.3)
}
50%{
  opacity:1;
  -webkit-transform:scale(1.05);
  -ms-transform:scale(1.05);
  transform:scale(1.05)
}
70%{
  -webkit-transform:scale(.9);
  -ms-transform:scale(.9);
  transform:scale(.9)
}
100%{
  opacity:1;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1)
}

}
.bounceIn{
  -webkit-animation-name:bounceIn;
  animation-name:bounceIn
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}


@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

/*------------------- 华丽分割线 -----------------------*/
header{width:90%;text-align:center;padding:5%;letter-spacing:2px;color:#333;font-size:1.2em;text-shadow:0 0 2px #999;}
.demo{width:100%;margin:0 auto;text-align:center;}
.demo a{margin:0 5px 20px;background-color:#eee;}
/*------------------- 华丽分割线 -----------------------*/