body {
  background: #f6f6f6; }

.wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background: #f9f9f9; }

.main {
  width: 1040px;
  margin: 0 auto;
  padding-top: 16px; }
  .main > h2 {
    font-size: 24px;
    color: #444 px;
    padding-top: 44px;
    padding-bottom: 26px; }

.zhiyeke:after {
  content: "";
  clear: both;
  display: block; }
.zhiyeke li {
  width: 244px;
  height: 300px;
  margin-right: 15px;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 17px;
  overflow: hidden;
  -webkit-transition: box-shadow .3s; }
  .zhiyeke li:hover {
    box-shadow: 0 0 15px 3px #ccc; }
    .zhiyeke li:hover .zy-h {
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0); }
.zhiyeke li:nth-child(1) > .zy-item {
  background: url(../images/sy_qianru.png) no-repeat center 40px; }
.zhiyeke li:nth-child(2) > .zy-item {
  background: url(../images/sy_wulianwang.png) no-repeat center 40px; }
.zhiyeke li:nth-child(3) > .zy-item {
  background: url(../images/sy_android.png) no-repeat center 40px; }
.zhiyeke li:nth-child(4) > .zy-item {
  background: url(../images/sy_web.png) no-repeat center 40px; }
.zhiyeke li:nth-child(5) > .zy-item {
  background: url(../images/sy_ios.png) no-repeat center 40px; }
.zhiyeke li:nth-child(6) > .zy-item {
  background: url(../images/sy_vr.png) no-repeat center 40px; }
.zhiyeke li:nth-child(7) > .zy-item {
  background: url(../images/sy_ui.png) no-repeat center 40px; }
.zhiyeke li:nth-child(8) > .zy-item {
  background: url(../images/sy_javaee.png) no-repeat center 40px; }

.zy-item {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #f3f3f3; }
  .zy-item h3 {
    font-size: 18px;
    color: #444;
    text-align: center;
    padding-top: 178px; }
  .zy-item p {
    font-size: 14px;
    color: #8795df;
    width: 202px;
    margin: 0 auto;
    line-height: 60px;
    border-top: 1px solid #f2f2f2;
    text-align: center;
    margin-top: 36px; }

.zy-h {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #6f7bb7;
  background: #808cc7;
  transform: translate(0, -100%);
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  transition: all .2s;
  -ms-transition: all .2s;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
  -o-transition: all .2s; }
  .zy-h p:nth-child(1) {
    font-size: 18px;
    color: #fff;
    text-align: center;
    padding-top: 90px; }
  .zy-h p:nth-child(2) {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding-top: 18px; }
  .zy-h a {
    display: block;
    width: 141px;
    height: 37px;
    border: 1px solid #fff;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 37px;
    border-radius: 3px; }

.chengzhangke:after {
  content: "";
  clear: both;
  display: block; }
.chengzhangke li {
  width: 244px;
  height: 234px;
  margin-right: 15px;
  background: #fff;
  float: left;
  position: relative;
  margin-bottom: 17px;
  overflow: hidden;
  -webkit-transition: box-shadow .3s; }
  .chengzhangke li:hover {
    box-shadow: 0 0 15px 3px #ccc; }
    .chengzhangke li:hover .cz-h {
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0); }
.chengzhangke li:nth-child(1) > .cz-item {
  background: url(../images/cyuyan_zhong.png) no-repeat center 60px; }
.chengzhangke li:nth-child(2) > .cz-item {
  background: url(../images/linux_zhong.png) no-repeat center 56px; }
.chengzhangke li:nth-child(3) > .cz-item {
  background: url(../images/java_zhong.png) no-repeat center 54px; }
.chengzhangke li:nth-child(4) > .cz-item {
  background: url(../images/android_zhong.png) no-repeat center 60px; }
.chengzhangke li:nth-child(5) > .cz-item {
  background: url(../images/objective_c_zhong.png) no-repeat center 58px; }
.chengzhangke li:nth-child(6) > .cz-item {
  background: url(../images/swift_zhong.png) no-repeat center 58px; }
.chengzhangke li:nth-child(7) > .cz-item {
  background: url(../images/html5_zhong.png) no-repeat center 60px; }
.chengzhangke li:nth-child(8) > .cz-item {
  background: url(../images/javascript_zhong.png) no-repeat center 56px; }
.chengzhangke li:nth-child(9) > .cz-item {
  background: url(../images/php_zhong.png) no-repeat center 58px; }
.chengzhangke li:nth-child(10) > .cz-item {
  background: url(../images/potoshop_zhong.png) no-repeat center 60px; }
.chengzhangke li:nth-child(11) > .cz-item {
  background: url(../images/zitisheji_zhong.png) no-repeat center 60px; }
.chengzhangke li:nth-child(12) > .cz-item {
  background: url(../images/unity_3d_zhong.png) no-repeat center 56px; }

.cz-item {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #f3f3f3; }
  .cz-item h3 {
    font-size: 18px;
    color: #444;
    text-align: center;
    padding-top: 119px; }
  .cz-item p {
    font-size: 14px;
    color: #455eba;
    text-align: center;
    margin-top: 14px; }

.cz-h {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #6f7bb7;
  background: #808cc7;
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  -webkit-transition: transform .3s; }
  .cz-h a {
    display: block;
    width: 141px;
    height: 37px;
    border: 1px solid #fff;
    margin: 0 auto;
    margin-top: 96px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 37px;
    border-radius: 3px; }

/*# sourceMappingURL=suoyoukecheng.css.map */