.clearfix:after {
  height: 0px;
  clear: both;
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden; }

.app-case .app-case-container {
  width: 1200px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  -wekbit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  -ms-transform: translate3d(0, -50%, 0);
  -o-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0); }
  .app-case .app-case-container .app-case-title {
    font-size: 46px;
    color: #fff; }
  .app-case .app-case-container .app-case-list {
    width: 100%;
    height: 400px;
    margin-top: 60px; }
    .app-case .app-case-container .app-case-list .app-case-item {
      width: 200px;
      height: 400px;
      background: rgba(3, 81, 146, 0.7);
      float: left;
      text-align: center;
      padding: 120PX 0;
      -wekbit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      -wekbit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box; }
      .app-case .app-case-container .app-case-list .app-case-item .app-case-product {
        display: inline-block;
        -wekbit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s; }
        .app-case .app-case-container .app-case-list .app-case-item .app-case-product .app-case-text {
          color: #fff;
          font-size: 16px;
          display: block;
          margin-top: 15px; }
      .app-case .app-case-container .app-case-list .app-case-item .app-case-detail {
        color: #fff;
        font-size: 14px;
        display: block;
        margin-top: 15px;
        opacity: 0;
        -wekbit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s; }
        .app-case .app-case-container .app-case-list .app-case-item .app-case-detail span {
          display: inline-block;
          margin-left: 5px;
          -wekbit-transform: scale3d(0.5, 1, 1);
          -moz-transform: scale3d(0.5, 1, 1);
          -ms-transform: scale3d(0.5, 1, 1);
          -o-transform: scale3d(0.5, 1, 1);
          transform: scale3d(0.5, 1, 1); }
      .app-case .app-case-container .app-case-list .app-case-item:nth-child(1), .app-case .app-case-container .app-case-list .app-case-item:nth-child(3), .app-case .app-case-container .app-case-list .app-case-item:nth-child(5) {
        background: rgba(0, 0, 0, 0.7); }
      .app-case .app-case-container .app-case-list .app-case-item:hover .app-case-product {
        -wekbit-transform: translate3d(0, -40px, 0);
        -moz-transform: translate3d(0, -40px, 0);
        -ms-transform: translate3d(0, -40px, 0);
        -o-transform: translate3d(0, -40px, 0);
        transform: translate3d(0, -40px, 0); }
      .app-case .app-case-container .app-case-list .app-case-item:hover .app-case-detail {
        opacity: 1; }

@media screen and (max-width: 1550px) {
  .app-case .app-case-container {
    top: 150px;
    -wekbit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
    .app-case .app-case-container .app-case-title {
      font-size: 28px; }
    .app-case .app-case-container .app-case-list .app-case-item {
      height: 350px;
      padding: 95px 0; } }
@media screen and (max-width: 1250px) {
  .app-case .inner-bg {
    min-width: 1200px; }
  .app-case .app-case-container {
    top: 40px;
    width: 90%; }
    .app-case .app-case-container .app-case-list .app-case-item {
      width: 16%;
      height: 200px;
      padding: 30px 0; }
      .app-case .app-case-container .app-case-list .app-case-item:Hover .app-case-product {
        -wekbit-transform: translate3d(0, -20px, 0);
        -moz-transform: translate3d(0, -20px, 0);
        -ms-transform: translate3d(0, -20px, 0);
        -o-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0); } }
@media screen and (max-width: 1020px) {
  .app-case .app-case-container .app-case-list .app-case-item {
    width: 33.3%; } }
@media screen and (max-width: 450px) {
  .app-case .inner-bg {
    min-width: 1600px; }
  .app-case .app-case-container .app-case-list {
    margin-top: 40px; }
    .app-case .app-case-container .app-case-list .app-case-item {
      width: 50%; } }