body,html { margin:0; padding:0; font-size:14px; font-family:"Microsoft YaHei"; color:#5d5649; }
ul, li, p, strong, h3, table, form, tr, td, ol, dl, dd, dt, map, area,h1,h3,h2,h4,h5,h6 { margin:0; padding:0; list-style:none; }
img { border:0; vertical-align:top; }
a { text-decoration:none; outline:none; color:#fff; *hide-focus:expression(this.hideFocus=true);}
.clr{ display:block; height:0; overflow:hidden; clear:both;}
.clr5{ display:block; height:0; overflow:hidden; clear:both; height:4px; }
.head li { float:left; }
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}

.ov99{ overflow:hidden; text-indent:-9999px; }
.cent{ text-align:center; }
.rigt{ text-align:right; }
.p2em{ text-indent:2em; }
.r{ float:right; }
.l{ float:left; }
.c:before , .c:after { content: ""; display: table; }
.c:after { clear: both; }
.hl:hover {
  -weblit-filter: brightness(1.2);
  filter: brightness(1.2);
  -webkit-transition: .3s;
  transition: .3s;
}
h1{ overflow:hidden; display:none; }

html{
  overflow-x: hidden;
}
body {
  width: 100%;
  font-family: "Microsoft YaHei", Helvetica, sans-serif;
  color: #434343;
  line-height: 1.5;
  background: #fff url(../images/bg.jpg) center 94px no-repeat;
  overflow-x: hidden;
}
.main {
  display: block;
  margin: 632px auto 82px;
  text-align: center;
}
.main ul {
  display: inline-block;
}
.main li {
  float: left;
  margin: 0 18.5px;
  width: 56px;
  height: 325px;
  background-image:  url(../images/q-bg.png);
  background-position-x: -18px;
  background-repeat: no-repeat;
  -webkit-transition: .5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition: .5s;
}
.main li:hover {
  -webkit-animation:rotateThree 1s ease-in-out forwards;
  -moz-animation:rotateThree 1s ease-in-out forwards;
  -o-animation:rotateThree 1s ease-in-out forwards;
  animation:rotateThree 1s ease-in-out forwards;
  /* -webkit-transition: .5s;
  transition: .5s; */
}
.main li a {
  display: block;
  width: 100%;
  height: 100%;
}
.main li.l2 {
  background-position-x: -111px;
}
.main li.l3 {
  background-position-x: -204px;
}
.main li.l4 {
  background-position-x: -297px;
}
.main li.l5 {
  background-position-x: -390px;
}
.main li.l6 {
  background-position-x: -483px;
}
.main li.l7 {
  background-position-x: -576px;
}
.main li.l8 {
  background-position-x: -669px;
}
.main li.l9 {
  background-position-x: -762px;
}
.main li.l10 {
  background-position-x: -855px;
}
.top {
  position: relative;
  width: 1920px;
  margin: 0 auto;
}
@keyframes rotateThree
{
  0% {
    transform:  rotateY(0);
  }
  99% {
    transform:  rotateY(360deg);
    background-image: url(../images/q-bg.png);
  } 
  100% {
    transform:  rotateY(360deg);
    background-image: url(../images/q-bg-hover.png);
  }
}
@-moz-keyframes rotateThree
{
  0% {
    -moz-transform:  rotateY(0);
  }
  99% {
    -moz-transform:  rotateY(360deg);
    background-image: url(../images/q-bg.png);
  } 
  100% {
    -moz-transform:  rotateY(360deg);
    background-image: url(../images/q-bg-hover.png);
  }
}
@-webkit-keyframes rotateThree
{
  0% {
    -webkit-transform:  rotateY(0);
  }
  99% {
    -webkit-transform:  rotateY(360deg);
    background-image: url(../images/q-bg.png);
  } 
  100% {
    -webkit-transform:  rotateY(360deg);
    background-image: url(../images/q-bg-hover.png);
  }
}
@-o-keyframes rotateThree
{
  0% {
    -o-transform:  rotateY(0);
  }
  99% {
    -o-transform:  rotateY(360deg);
    background-image: url(../images/q-bg.png);
  } 
  100% {
    -o-transform:  rotateY(360deg);
    background-image: url(../images/q-bg-hover.png);
  }
}