.main{padding-top:50px;padding-bottom:60px;}

.app-list h3{font-size:40px;color:#212121;font-weight:700;line-height:1;position:relative;z-index:20;}
.app-list h3::before{display:block;content:attr(data-tit);white-space:nowrap;color:#fff;position:absolute;left:0;top:-38px;font-size:98px;line-height:1;z-index:-1;text-shadow:rgba(210,217,221,0.75) 1px 0 0, rgba(210,217,221,0.75) 0 1px 0, rgba(210,217,221,0.75) -1px 0 0, rgba(210,217,221,0.75) 0 -1px 0;}
.app-list h3::after{display:block;content:'';width:80px;height:2px;background:#67A7B3;margin:10px auto 0 0;}

.app-list > p{margin:40px 0 0;line-height:36px;font-size:17px;color:#666;}
.app-list ul{margin:37px -20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;}
.app-list ul li{width:33.3333%;padding:15px 20px;}
.app-list ul li >a{position:relative;overflow:hidden;display:block;}
.app-list ul li img{display:block;width:100%;}
.app-list ul li .txt{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;z-index:105;padding:0 34px 29px;transition:opacity 0.2s, transform 0.35s;display:flex;justify-content:flex-end;-webkit-flex-direction:column;flex-direction:column;}
.app-list ul li .txt::after{content:"";background:var(--bg-color);opacity: 0.85;height:0;position:absolute;left:0;right:0;bottom:0;transition:all 0.3s ease 0s;}
.app-list ul li .txt > *{position:relative;z-index:10;}
.app-list ul li .txt h6{font-size:20px;font-weight:700;color:#fff;line-height:1;}
.app-list ul li .txt p{font-size:15px;color:#fff;line-height:28px;height:0;overflow:hidden;transition:all 0.5s ease 0s;margin:15px 0 0;}
.app-list ul li .txt .more{display:inline-block;font-size:14px;font-weight:500;color:#fff;margin:25px 0 0;}
.app-list ul li .txt .more i{color:#fff;font-size:12px;border-radius:50%;width:26px;height:26px;border:1px solid #fff;line-height:24px;display:inline-block;text-align:center;margin-right:20px;}

.app-list ul li:hover .txt::after{height:100%;}
.app-list ul li:hover .txt p{height:112px;}
.app-list ul li:hover .more i{background:#FAFBFB;color:#4FA8B4;border-color:#FAFBFB;}

@media screen and (max-width: 992px) {
    .app-list ul li .txt .more {
      display: none;
    }
  }
  
  @media screen and (max-width:768px) {
    .main {
      padding-top: 25px;
      padding-bottom: 30px;
    }
  
    .app-list h1 {
      text-align: center;
    }
  
    .app-list h1::before {
      font-size: 40px;
      left: 0;
      right: 0;
      top: -25px;
    }
  
    .app-list h1::after {
      margin: 15px auto 0;
    }
  
    .app-list ul {
      margin: 20px -10px 0;
    }
  
    .app-list ul li {
      padding: 10px;
    }
  
    .app-list ul li .txt {
      padding: 0 10px 5px;
    }
  
    .app-list ul li .txt h6 {
      font-size: 17px;
    }
    
    .app-list h3::before {
      font-size: 58px;
    }
  }
  
  @media screen and (max-width:480px) {
    .app-list ul {
      margin: 14px 0 0;
    }
  
    .app-list ul li {
      padding: 6px 0;
      width: 100%;
    }
  }