@charset "utf-8";

body {
  background-color: #F2F2F2;
}

header {
  position: relative;
  width: 100%;
  background-color: #fff;
  height: .96rem;
  color: #232323;
  font-size: .34rem;
  text-align: center;
  line-height: .96rem;
  font-weight: bold;
}

header img {
  position: absolute;
  left: .32rem;
  top: 50%;
  transform: translateY(-50%);
  width: .2rem;
  height: .36rem;
}

article {
  margin-left: 3%;
  width: 94%;
  margin-top: .32rem;
}

article .content {
  height: 2.1rem;
  background-color: #FFFFFF;
  border-radius: .12rem;
  width: 100%;
  display: flex;
  padding: .3rem .26rem;
  box-sizing: border-box;
  margin-bottom: .2rem;
}

/* article .content:last-child {
  margin-bottom: 0;
} */

.content_title {
  flex: 2;
  font-size: 0;
}

.content_title p {
  font-size: .3rem;
  color: #313131;
  line-height: .42rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: .18rem;
}

.content_title span {
  background:rgba(255,94,100,.15);
  color: #FF5E64;
  font-size: .24rem;
  padding: .06rem .14rem;
  border-radius: .2rem;
}

.content_title .inTheprocessing {
  background:rgba(255,135,0,.15);
  color: #FF8700;
}

.content_title .haveToPay {
  color: #5E9EFF;
  background:rgba(94,158,255,.15);
}

.look {
  flex: 1;
  margin-left: .94rem;
  font-size: .28rem;
  color: #FC9529;
  border:1px solid #FC9529;
  border-radius: .06rem;
  display: block;
  height: .64rem;
  line-height: .64rem;
  text-align: center;
  margin-top: .4rem;
}