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

.app-list h3{font-size:36px;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:-16px;font-size:60px;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:var(--bg-color);margin:10px auto 0 0;}

.app-list .brief-description{margin:40px 0 0;line-height:26px;font-size:17px;color:#666;}
.app-list ul{margin:37px -20px 0;display:flex;flex-wrap:wrap;}
.app-list ul li{width:33.3333%;padding:15px 20px;}
.app-list ul li >a{position:relative;overflow:hidden;display:block;background-color: #000;}
.app-list ul li img{display:block;width:100%;    opacity: 0.8;}
/*.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:center;-webkit-flex-direction:column;flex-direction:column;}*/
.app-list ul li .txt{position: relative;width: 100%;padding: 22px;transition: opacity 0.2s, transform 0.35s;}
.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:28px;height:56px;;overflow:hidden;display:-webkit-box !important;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.app-list ul li .txt p{font-size:15px;color:#fff;line-height:24px;height:48px;transition:all 0.5s ease 0s;margin:15px 0 0;overflow:hidden;display:-webkit-box !important;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.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:48px;}*/
.app-list ul li:hover .more i{background:#FAFBFB;color:var(--bg-color);border-color:#FAFBFB;}

@media screen and (max-width: 1299px) {
	.app-list h3{
		font-size: 32px;
	}
	.app-list ul li .txt{
		padding: 0 12px 12px;
	}
	.app-list ul li .txt h6 {
	    font-size: 18px;
	}
	.app-list ul li .txt p{
		margin: 10px 0 0;
	}
	.app-list ul li .txt .more {
	    margin: 10px 0 0;
	}
}
@media screen and (max-width:1199px){
	.app-list h3{
		font-size: 30px;
	}
	.app-list ul{
		margin: 20px 0px 0;
	}
	.app-list ul li{
		padding: 10px 0px;
	}
	.app-list ul li .txt .more {
	  display: none;
	}
}

@media screen and (max-width:991px) {
	.main {
	  padding-top: 25px;
	  padding-bottom: 30px;
	}
	.app-list h3{
		font-size: 28px;
	}
	.app-list .brief-description{
		margin: 24px 0 0;
	}
	.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;
	  width: 50%;
	}

	.app-list ul li .txt {
	  padding: 0 10px 5px;
	}

	.app-list ul li .txt h6 {
	  font-size: 17px;
	}

	.app-list h3::before {
		display: none;
	}
}

@media screen and (max-width:767px) {
	.app-list h3{
		font-size: 24px;
	}
	.app-list ul {
	  margin: 14px 0 0;
	}

	.app-list ul li {
	  padding: 6px;
	  width: 100%;
	}
}