.card-view .card-item {
  width: 100%;
}
.card-view .card-item .card-title {
  display: flex;
  align-items: center;
  padding: 40rpx;
  height: 40rpx;
}
.card-view .card-item .card-title .t-icon {
  height: 40rpx;
  width: 40rpx;
  margin-right: 10rpx;
}
.card-view .card-item .card-title .state-seal {
  width: 55px;
  height: 55px;
  margin-left: auto;
  margin-right: -20rpx;
}
.card-view .card-item .card-info {
  display: flex;
  flex-direction: column;
  margin: 0	40rpx 40rpx 40rpx;
}
.card-view .card-item .card-info .info-type {
  font-size: 26rpx;
  line-height: 30rpx;
  color: #909399;
}
.card-view .card-item .content-box {
  margin: 20rpx;
  padding: 0 20rpx;
  background-color: #f6f6f6;
  border-radius: 10rpx;
}
.card-view .card-item .content-box .title-box {
  position: relative;
  top: -20rpx;
  width: -webkit-fit-content;
  width: fit-content;
  height: 36rpx;
  border-radius: 6rpx;
  padding: 5rpx 20rpx;
}
.card-view .card-item .content-box .title-box .title-text {
  font-size: 25rpx;
  font-weight: bold;
  color: #FFF;
}
.card-view .card-item .content-box .content-detail {
  font-size: 30rpx;
  font-weight: bold;
  color: #303133;
  word-break: break-all;
}
.card-view .card-item .content-box .content-subtitle {
  font-size: 25rpx;
  font-weight: bold;
  color: #909399;
}
.report-title {
  font-size: 75rpx;
  line-height: 75rpx;
  font-family: YSfont;
  color: #FFF;
  z-index: 99;
}
.report-subtitle {
  font-size: 40rpx;
  font-family: YSfont;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
  color: #FFF;
  z-index: 99;
}
.top-box {
  display: flex;
  flex-direction: column;
  margin: 140rpx 0 0 50rpx;
  height: 170rpx;
  justify-content: space-around;
}
.top-box .info-title {
  margin-left: 10rpx;
  font-size: 70rpx;
  font-family: YSfont;
  color: #FFF;
  z-index: 2;
  text-shadow: 1px -1px 0px #c0c0c0, 2px -2px 0px #b0b0b0, 1px -1px 0px #a0a0a0, 2px -2px 0px #909090;
}
.top-box .info-subtitle {
  margin-left: 10rpx;
  font-size: 40rpx;
  font-family: YSfont;
  color: #FFF;
  z-index: 2;
  text-shadow: 1px -1px 0px #c0c0c0, 2px -2px 0px #b0b0b0, 1px -1px 0px #a0a0a0, 2px -2px 0px #909090;
}
.top-box .data-title {
  font-size: 60rpx;
  font-family: YSfont;
  color: #FFF;
  z-index: 2;
  margin-left: 20rpx;
}
.top-box .data-subtitle {
  font-size: 40rpx;
  font-family: YSfont;
  color: #FFF;
  z-index: 2;
  opacity: 0.8;
  margin-left: 20rpx;
}
.bg1 {
  position: fixed;
  width: 100%;
  height: 1200rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(to top, #f3f4f9, #ff8caf);
}
.detail-image1 {
  position: absolute;
  top: 150rpx;
  left: 560rpx;
  width: 300rpx;
  height: 350rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 51;
}
.detail-image2 {
  position: absolute;
  top: 200rpx;
  left: 380rpx;
  width: 300rpx;
  height: 350rpx;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 50;
}
.card-item {
  width: 100%;
}
.card-item .card-box {
  display: flex;
  padding: 20rpx 30rpx;
  justify-content: space-around;
  height: 180rpx;
  border-radius: 12rpx;
  background-color: #ff8caf;
  opacity: 0.8;
}
.card-item .card-box .flex-column {
  height: 100%;
  justify-content: space-around;
}
.card-item .card-box .flex-column .total-card-title {
  line-height: 45rpx;
  font-size: 45rpx;
  color: #FFF;
  font-family: YSfont;
}
.card-item .card-box .flex-column .total-card-data {
  color: #FFF;
  font-size: 85rpx;
  line-height: 45rpx;
  font-family: YSfont;
}
.card-item .card-box .card-image {
  position: relative;
  top: -20rpx;
  height: 220rpx;
  width: 220rpx;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}
.card-item .card-data {
  padding: 20rpx;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.card-item .card-data .flex-column {
  justify-content: space-around;
  height: 120rpx;
  margin: 20rpx 40rpx;
}
.card-item .card-data .flex-column .title {
  font-size: 40rpx;
}
.card-item .card-data .flex-column .subtitle {
  font-weight: 400;
}
.card-item .card-data .flex-column .YS-title {
  font-size: 40rpx;
}
.card-item .title-box {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}
.card-item .title-box .title-tag {
  margin-left: -10rpx;
  margin-right: 20rpx;
  height: 100%;
  width: 20rpx;
  border-radius: 100rpx;
  background-color: #ff8caf;
  z-index: 99;
}
.card-item .title-box .title {
  font-size: 35rpx;
  line-height: 50rpx;
}
.card-item .title-box .subsection {
  width: 300rpx;
  height: 100%;
  margin: 0 30rpx 0 auto;
}
.card-item .title-box .subsection .u-subsection--button__bar {
  background-color: #ff8caf !important;
}
.card-item .table-container {
  margin-bottom: 20rpx;
}
.card-item .table-container .title {
  line-height: 30rpx;
  font-size: 30rpx;
  color: #303133;
}
.card-item .table-container .data {
  line-height: 32rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #303133;
}
.card-item .msg-box {
  margin: 0 20rpx 40rpx 20rpx;
  padding: 20rpx;
  display: flex;
  border-radius: 12rpx;
  justify-content: space-around;
  background-color: #f3f4f9;
}
.card-item .msg-box .title {
  height: 32rpx;
  line-height: 32rpx;
  color: #ff8caf;
  margin: 0 6rpx;
}
.card-item .chart-box {
  height: 650rpx;
}
.card-item .distribution-box {
  margin: 0 20rpx 40rpx 20rpx;
  height: 150rpx;
  display: flex;
  border-radius: 12rpx;
  background-color: #f3f4f9;
  overflow: hidden;
}
.card-item .distribution-box .segment-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ff8caf;
  justify-content: space-around;
  padding: 16rpx 0;
  width: 30%;
}
.card-item .distribution-box .segment-data .text {
  font-size: 30rpx;
  line-height: 30rpx;
  color: #FFF;
}
.card-item .distribution-box .sutdent-data {
  display: flex;
  justify-content: space-around;
  width: 70%;
}
.card-item .distribution-box .sutdent-data .data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%;
  height: 100%;
}
.card-item .distribution-box .sutdent-data .data-item .title-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffe6ed;
  height: 40rpx;
  width: 101%;
}
.card-item .distribution-box .sutdent-data .data-item .title-box .title {
  line-height: 28rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #303133;
}
.card-item .distribution-box .sutdent-data .data-item .data {
  line-height: 70rpx;
  font-size: 35rpx;
  font-weight: bold;
  color: #ff8caf;
}
.card-item .distribution-box .sutdent-data .data-item .unit {
  margin-left: 4rpx;
  line-height: 26rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: #909399;
}
.card-item .cutting-line {
  margin: 0 50rpx 20rpx 50rpx;
  height: 1px;
  background-color: #e6e7eb;
}
.card-item .analysis-box {
  display: flex;
  flex-direction: column;
  margin: 10rpx 30rpx;
}
.card-item .analysis-box .title {
  margin: 0 10rpx;
  line-height: 35rpx;
  font-size: 35rpx;
  color: #ff8caf;
}
.card-item .analysis-box .subtitle {
  line-height: 30rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: #303133;
}
.card-item .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  margin: 0 30rpx 30rpx 30rpx;
  background-color: #ff8caf;
  border-radius: 12rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}
.card-item .btn .btn-text {
  line-height: 38rpx;
  font-size: 38rpx;
  color: #FFF;
  font-family: YSfont;
}
.card-item .btn-box {
  display: flex;
  justify-content: space-between;
  margin: 10rpx 30rpx 30rpx 30rpx;
}
.card-item .btn-box .subbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  width: 46%;
  border: 4rpx solid #ff8caf;
  border-radius: 12rpx;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}
.card-item .btn-box .subbtn .subbtn-text {
  line-height: 38rpx;
  font-size: 38rpx;
  color: #ff8caf;
  font-family: YSfont;
}