.app-list{}
.app-list ul{}
.app-list ul li{overflow:hidden;margin:0 0 30px;background:#fff;box-shadow:0 0 10px rgba(50,50,50,0.14);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
.app-list ul li .pic{display:block;overflow:hidden;width:40%;}
.app-list ul li .pic img{display:block;width:100%;transition:all 0.3s ease 0s;}
.app-list ul li .txt{-webkit-flex:1;flex:1;padding:0 50px;overflow:hidden;}
.app-list ul li .txt h5{font-size:30px;color:#111;font-family:var(--font-family1);text-transform:capitalize;margin:0;}
.app-list ul li .txt h5 a:hover{color:var(--active-color);}
.app-list ul li .txt p{font-size:17px;color:#666;line-height:28px;margin:20px 0 0;}
.app-list ul li .txt .more{margin:30px 0 0;width:220px;height:45px;line-height:45px;display:block;background:var(--btn-bg);border-radius:40px;font-size:18px;color:#fff;text-align:center;}
.app-list ul li .txt .more:hover{background:var(--btn-bg-hover);}


.app-list ul li:nth-child(2n){-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}
.app-list ul li:nth-child(2n) .pic{}
.app-list ul li:nth-child(2n) .nr{}

.app-list ul li .pic:hover img{transform:scale(1.05);-webkit-transform:scale(1.05);}


@media screen and (max-width: 1300px) {
  .app-list ul li .txt {
    padding: 0 40px;
  }
  .app-list ul li .txt h5 {
    font-size: 26px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .app-list ul li .txt p {
    font-size: 16px;
    margin-top: 15px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
  }
  .app-list ul li .txt .more {
    margin: 20px 0 0;
  }
}

@media screen and (max-width: 1200px) {
  .app-list ul li .txt h5 {
    font-size: 24px;
    -webkit-line-clamp:1;
  }
  .app-list ul li .txt p {
    -webkit-line-clamp:3;
    line-height: 26px;
  }
  .app-list ul li .txt .more {
    width: 200px;
    height: 40px;
    line-height: 40px;
  }
}

@media screen and (max-width: 980px) {
  .app-list ul li .txt {
    padding: 0 30px;
  }
  .app-list ul li .txt h5 {
    font-size: 22px;
  }
  .app-list ul li .txt p {
    font-size: 15px;
    margin-top: 10px;
    line-height: 24px;
    -webkit-line-clamp:2;
  }
}

@media screen and (max-width: 768px) {
  .app-list ul li .txt h5 {
    font-size: 20px;
  }
  .app-list ul li .txt p {
    line-height: 22px;
  }
  .app-list ul li .txt .more {
    width: 180px;
    height: 35px;
    line-height: 35px;
    margin-top: 15px;
  }
}

@media screen and (max-width: 600px) {
  .app-list > ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .app-list > ul > li {
    display: inline-block;
    width: 48.5%;
    margin-bottom: 15px;
  }
  .app-list ul li .pic {
    width: 100%;
  }
  .app-list ul li .txt {
    padding: 15px 20px;
  }
  .app-list ul li .txt h5 {
    font-size: 18px;
  }
  .app-list ul li .txt p {
    font-size: 14px;
    line-height: 20px;
  }
  .app-list ul li .txt .more {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .app-list > ul > li {
    width: 100%;
  }
}