.app-list {padding:40px 0 0;}
.app-list h1 {font-size:40px;color:#212121;font-weight:700;line-height:1;position:relative;z-index:20;}
.app-list h1::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 h1::after {display:block;content:'';width:80px;height:2px;background:#3395C7;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;box-shadow:0 0 10px rgba(63,62,62,0.1);}
.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:rgba(51,149,199,0.8);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 h5{margin:15px 0 0;font-size:17px;color:#333;text-align:center;display:none;}

@media screen and (min-width:768px) {
.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 (min-width:1441px) {
.app-list h1 {font-size:38px;}
}

@media screen and (min-width:1367px) {
.app-list h1 {font-size:36px;}
}

@media screen and (min-width:1280px) {
.app-list h1 {font-size:34px;}
}

@media screen and (max-width:992px) {
.app-list h1 {font-size:32px;}
.app-list ul li .txt .more {display:none;}

}

@media screen and (max-width:768px) {

.app-list {padding:30px 0 0;}
.app-list h1 {font-size:30px;text-align:center;}
.app-list h1::before {font-size:40px;left:0;right:0;top:-15px;}
.app-list h1::after {margin:15px auto 0;}
.app-list > p {margin:20px 0 0;line-height:24px;font-size:16px;}
.app-list ul {margin:20px -10px 0;}
.app-list ul li {width:50%;padding:10px;}
.app-list ul li .txt {padding:0 10px 5px;}
.app-list ul li .txt h6 {font-size:17px;}

.app-list ul li h5{display:block;}
}

@media screen and (max-width:480px) {
.app-list h1 {font-size:24px;}
.app-list ul {margin:14px 0 0;}
.app-list ul li {padding:6px 0;width:100%;}
}