* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.banner {
  width: 100%;
  height: 530px;
  margin-top: 70px;
}

.banner img {
	height: 100%;
  width: 100%;
  object-fit: cover;
}

.content {
  width: 82%;
  margin: 0 auto;
  padding: 30px 0;
}

.content-title {
  padding-bottom: 30px;
  text-align: center;
}

.content-title p {
  font-size: 34px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #0f0f0f;
}

.content-title span {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
}

.cards{width: 100%;}
.cards .card{position: relative;margin-bottom: 20px;background-color: #F6F6F6;}
.cards .card .img{float: left;width: 50%;}
.cards .card .img img{display: block;width: 100%;height: 100%;object-fit: cover;}
.cards .card .text{position: absolute; top: 25%;right: 2%;width: 45%;}
.cards .card .text span{font-size: 34px;color: #222;position: relative;padding-left: 20px;}
.cards .card .text span::after{content: "";display: block;width: 4px;height: 16px;background: #154996;position: absolute;left: 0px;top: 16px;}
.cards .card .text p{font-size: 16px;color: #666;line-height: 32px;margin-top: 40px;}

.cards .card:nth-of-type(2n) .img{float: right;}
.cards .card:nth-of-type(2n) .text{left: 2%;}







@media screen and (max-width: 1120px) {
  .banner{height: 360px;margin-top: 50px;}
  .card {
    width: 100%;
  }
  .card .text span {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .card .text p {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    margin-top: 30px;
  }
  .cards .card .text{top: 15%;}
  .cards .card .text span{font-size: 30px;}
  .cards .card .text span::after{top: 12px;}
  .cards .card .text p{font-size: 14px;margin-top: 15px;line-height: 24px;}
  
}

@media screen and (max-width: 900px) {
	.cards .card .text{top: 8%;}
}

@media screen and (max-width: 800px) {
	.banner{height: 260px;}
  .content{width: 95%;}
  .card .text {
    height: auto;
	padding: 20px;
	box-sizing: border-box;
  }
  .cards .card .img{width: 100%;float: none;}
  .cards .card:nth-of-type(2n) .img{float: none;}
  .cards .card .text{position: unset;width: 100%;float: none;}
  .card .text span {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .card .text p {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    margin-top: 30px;
  }
}
@media screen and (max-width: 600px) {
	.banner{height: 160px;}
	}