/* pages/completion/completion.wxss */
.content {
  margin-top: 20rpx;
  padding-top: 1rpx;
  padding-bottom: 1rpx;
  width: 750rpx;
  background-color: #ffffff;
  font-size: 28rpx;
}

.content-title {
  margin: 20rpx;
  margin-left: 20rpx;
  font-weight: bold;
  font-size: 30rpx;
}

.content-red {
  margin-right: 10rpx;
  color: red;
}

.content-attention-showText {
  display: flex;
}
.content-attention-showText.f28{font-size: 28rpx; padding: 10rpx 0;}
.content-attention-showText.f24{font-size: 24rpx; padding-bottom: 10rpx;}
.content-attention {
  width: 44rpx;
  height: 44rpx;
  flex-shrink: 0;
  transform: translate(0,-8rpx);
}

.content-attention-text {
  font-size: 24rpx;
  display: flex;
  padding: 10rpx 0rpx 8rpx 0rpx;
  align-items: flex-start;
  line-height: 30rpx;
}


.content-line {
  width: 100%;
  height: 2rpx;
  background-color: #f2f2f2;
}

.content-list {
  display: flex;
  align-items: center;
  margin: 20rpx 20rpx 10rpx;
}

.content-list-title {
  width: 180rpx;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.content-text {
  flex: 1;
}

.content-text-gray {
  color: gray;
}


.content-address {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.content-picker {
  display: flex;
  flex-direction: row;
}

.content-img-right {
  width: 50rpx;
  height: 50rpx;
}
.content-title-item{
  width: 190rpx;
  flex-shrink: 0;
  margin-right: 20rpx;
}

.content-input {
  /* margin-right: 20rpx; */
  flex: 1;
}


.content-inputs {
  display: flex;
  flex-direction: row;
  margin-left: 200rpx;
  margin-top: 15rpx;
}

.content-scan-code-img {
  width: 50rpx;
  height: 50rpx;
}

.content-fontstyle {
  font-weight: bold;
}

.content-img-box {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 20rpx 20rpx;
}

.content-img-box-bw {
  margin-top: 30rpx;
}

.content-img-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* width: calc(33.33% - 20rpx); */
  width: 100%;
  justify-content: space-between;
  /* margin: 0 10rpx; */
}
.content-img-name.w-100{
  width: 100%;
  align-items: flex-start;
}
.content-img {
  width: 150rpx;
  height: 150rpx;
  display: inline-block;
}
.content-img-name.w-100 .van-uploader__preview {
  /* margin: 0 16rpx 16rpx !important; */
  /* margin-right: 88rpx !important; */
  margin-right: 25rpx !important;
}
.img-box{display: flex; width: 650rpx; flex-wrap: wrap;}
.img-box2{display: flex; width: 520rpx;}
.caseImg{width: 150rpx; height: 150rpx; border: 1rpx solid #f0f0f0; margin-right: 20rpx; }
.sl-img{position: relative;}
.sl-img text{position: absolute; top: 102rpx; left: 0; z-index: 9; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; font-size: 20rpx; width: 152rpx; height: 50rpx; line-height: 50rpx;}
.sl-img>view{width: 150rpx; font-size: 24rpx; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden;  -webkit-box-orient: vertical;}
.content-img-name.w-100 .van-uploader__preview:nth-child(3n) {
  margin-right: 0 !important;
}
.content-img-box .content-line + .content-line {
  display: none;
}
.buttom-margin {
  width: 750rpx;
  height: 200rpx;
}


.from-submit-buttom {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  width: 750rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  z-index: 1000;
}


.from-submit-buttom-confirm {
  width: 500rpx;
  height: 80rpx;
  background-color: #0A6597;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.from-submit-buttom-confirm.from-submit-buttom-confirm-gray {
  background-color: #ccc;
}

.from-submit-buttom-confirm-over {
  width: 100%;
  height: 80rpx;
  background-color: #0A6597;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}



.from-submit-buttom-cancle {
  width: 250rpx;
  height: 80rpx;
  background-color: #ffffff;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-all {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  width: 200rpx;
  height: 200rpx;
  color: #ffffff;
  border-radius: 50%;
  font-size: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(-45deg,
      #d8b487, #FFDCB9, #d8b487, #FFDCB9);
  background-size: 600% 600%;
  animation: btButtonAnimation 5s alternate infinite;
}

@keyframes btButtonAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.user-box{
  background-color: #fffdfc;
	border-radius: 20rpx;
  border: solid 2rpx #0a6597;
  padding: 4rpx 30rpx;
  margin: 20rpx;
}
.user-list{
  display: flex;
  align-items: center;
  margin: 26rpx 0;
}
.user-list .bt{
  font-size: 28rpx;
  min-width: 150rpx;
  margin-right: 8rpx;
}
.user-list .bd{
  flex: 1; font-size: 28rpx;
}
.user-list .tag{
  display: inline-block;
	height: 48rpx;
	background-color: #0a6597;
  border-radius: 10rpx;
  font-size: 24rpx;
  color: #fff;
  line-height: 48rpx;
  text-align: center;
  padding: 0 20rpx;
}
.user-list .tel{
  font-size: 26rpx;
  color: #333;
}
.user-list .tel image{
  width: 23rpx;
  height: 30rpx;
  vertical-align: middle;
}

.tips-box{padding: 20rpx;}
.tips-box>view{display: flex; line-height: 50rpx; margin-bottom: 10rpx; font-size: 26rpx;}
.tips-box .left-title{width: 100rpx;}
.tips-box .right{flex: 1;}
.tips-box view image{width: 100rpx; height: 100rpx; border: 1px solid #CCC;}

.detail-tab{position: sticky; top: 0; background: #FFF; z-index: 99; overflow: auto; background-color: #FFF;}
.detail-tab>view{white-space: nowrap; word-break: break-all; margin: 0 20rpx;}