.main{padding-top:50px;padding-bottom:60px;    font-family: var(--font-family);}

.app-list h1{font-size: 38px;color:#212121;font-weight:700;line-height:1;position:relative;z-index:20;}
.app-list h1::before{display:block;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;    content: "Solutions";}
.app-list h1::after{display:block;content:'';width:80px;height:2px;background:#06304F;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: flex-start;
    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: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 only screen and (max-width: 992px) {
.app-list ul li .txt .more {
    margin: 0;
}
.app-list ul li .txt p {
    margin: 0;
}

.app-list ul li .txt {
    padding: 10px 29px;}
  .app-list ul li .txt h6 {
    font-size: 15px;}
  
  }


@media screen and (max-width:768px) {
  .main{padding-top:25px;padding-bottom:30px;}
  
  .app-list h1::before {
    font-size: 56px;
  }
}
                              
                              @media only screen and (max-width: 768px) {
.app-list h1::before {
    top: -20px;
  display:none !important;
}
  }
                             
                             
                             @media only screen and (max-width: 668px) {
.app-list ul li .txt .more {
   display: none;
}
                               .app-list ul li .txt {display:none}
  }