page {
  background: #f8f8f8;
}

.titlemain {
  position: fixed;
  z-index: 99;
  width: 100%;
  top: 0;
  /* box-shadow: 0px 1.5px 6px rgba(0, 0, 0, 0.16) */
}

.titlemain .logoicon {
  width: 223rpx;
}

.titlemain .title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infobox1 {
  /* background: #fff; */
  margin: 20rpx 0rpx;
  box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
  #myVideo {
    display: block;
    margin: 0;
    padding: 0;
  }
}

.infobox1 .img {
  position: relative;
  width: calc(345rpx * 2);
  height: calc(345rpx * 2);
  overflow: hidden;
  border-radius: 30rpx;
  /* padding: 10rpx; */
  /* box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05); */
  margin: auto;
}

.video-cover {
  position: absolute;
  top: 300rpx;
  left: 0;
  width: 100%;
  height: 160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 30rpx;
}

.video-cover-icon {
  width: 90rpx;
  height: 90rpx;
}

.video-cover-time {
  margin-top: 26rpx;
  font-size: 28rpx;
  color: #fff;
  text-align: center;
}

.infobox2 {
  background: #fff;
  overflow: hidden;
  margin: 20rpx 0 0;
  box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
}
.infobox2 .info4 {
  /* margin: 0 30rpx; */
  padding: 41rpx 32rpx 0 32rpx;
}
.infobox2 .info4 .imgbox {
  position: relative;
}
.infobox2 .info4 .upload_header .upload_title {
  font-size: 36rpx;
  font-weight: bold;
  color: #030000;
}
.infobox2 .info4 .upload_header .icon {
  width: 36rpx;
  height: 36rpx;
}

.infobox2 .info4 .imgbox .img {
  width: 180rpx;
  height: 180rpx;
  /* background: #DCB585; */
  border-radius: 20rpx;
  margin: 43rpx 32rpx 0 0;
  position: relative;
  overflow: hidden;
}

.infobox2 .info4 .imgbox .img .close {
  position: absolute;
  background: rgba(27, 7, 7, 0.5);
  width: 46rpx;
  height: 42rpx;
  border-radius: 0 20rpx 0 20rpx;
  right: 0;
  top: 0;
}

.infobox2 .info4 .imgbox .img .close image {
  width: 20rpx;
}

.infobox2 .info4 .imgbox .img2 {
  margin: 43rpx 32rpx 0 0;
  width: 180rpx;
  height: 180rpx;
  background: #fff;
  border-radius: 20rpx;
  border: 2rpx solid #dddddd;
}

.infobox2 .info4 .imgbox .img2 image {
  width: 40rpx;
  height: 40rpx;
}

.infobox2 .info4 .content {
  background: #fff;
  border-radius: 3rpx;
  padding: 28rpx;
  width: calc(100% - 28rpx - 28rpx);
  height: 186rpx;
  margin: 37rpx 0 20rpx;
  /*box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.1);*/
  border: 2rpx solid #dddddd;
  position: relative;
}
.infobox2 .info4 .content .textarea {
  width: 100%;
  height: 100%;
  color: #000;
  font-size: 28rpx;
}
.infobox2 .info4 .content .contenttip {
  color: #e1e1e1;
  font-size: 20rpx;
  position: absolute;
  right: 24rpx;
  bottom: 18rpx;
}

.infobox2 .info4 .content textarea {
  width: 100%;
  height: 100%;
  font-size: 28rpx;
  color: #000;
  border-radius: 3rpx;
}
.placeholder {
  font-size: 28rpx;
}
.confirm_btn {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 153rpx;
  background: #ffffff;
  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
  padding: 0 30rpx 21rpx;
  box-sizing: border-box;
}

.confirm_btn .btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background: #000000;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
}

.infobox3 {
  display: block;
  margin: 20rpx 31rpx;
  height: 162rpx;
  font-family: PingFang SC;
  .info1 {
    display: inline-block;
    white-space: nowrap;
    background: #fff;
    flex-direction: column;
    height: 100%;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
    margin-right: 23rpx;
  }
  .info2 {
    width: calc(100% - 130rpx - 20rpx);
    background: #fff;
    height: 162rpx;
    border-radius: 20rpx;
    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
  }

  .info1,
  .info2 {
    .block1 {
      // width: 300rpx;
      // height: 160rpx;
      flex-direction: column;
      display: inline-block;
      height: 100%;
      text-align: center;
      .block1_1 {
        height: 100%;
        padding: 0 20rpx;
        flex-direction: column;
      }
    }
    .info1_img {
      width: 140rpx;
      height: 140rpx;
      margin-right: 10rpx;
      border-radius: 20rpx;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .tip1 {
      margin-top: 33rpx;
      font-size: 26rpx;
      font-weight: bold;
      color: #000000;
    }
    .tip2 {
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
      margin-top: 15rpx;
    }
    .quan1 {
      border-radius: 50%;
      border: 3rpx solid #f1f1f1;
      width: 30rpx;
      height: 30rpx;
      margin-top: 21rpx;
      &.is-select {
        display: flex;
        background-color: #fff;
        border-color: #fff;
        align-items: center;
        justify-content: center;
      }
      .quan2 {
        border-radius: 50%;
        background: #000000;
        width: 14rpx;
        height: 14rpx;
      }
    }
  }
  .info2 .block1 {
    padding: 0 16rpx;
  }
}

.popbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 30rpx;
  background: #fff;
  position: relative;
  padding-top: 52rpx;
  padding-bottom: 40rpx;
}
.popbox > .closeicon1 {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  width: 24rpx;
  height: 24rpx;
}
.popbox > .closeicon2 {
  width: 130rpx;
  margin: auto;
}
.popbox > .tip {
  font-weight: bold;
  font-size: 30rpx;
  text-align: center;
  margin-top: 27rpx;
  color: #030000;
}
.popbox > .tip2 {
  font-weight: bold;
  font-size: 30rpx;
  text-align: center;
  margin-top: 20rpx;
}

.popbox2 {
}
.popbox2 > .title {
  text-align: center;
  font-weight: bold;
  font-size: 32rpx;
  padding: 20rpx 0;
  color: #212121;
}
.popbox2 > .tipimg {
  margin: 20rpx 28rpx 0;
}
.popbox2 > .tipvideo {
  margin: 20rpx 28rpx 0;
  width: calc(100% - 28rpx - 28rpx);
  height: 630rpx;
}
.popbox2 > .tiptext {
  text-align: center;
  color: #666666;
  margin-top: 30rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}
.popbox2 > .popbox2btn > .nextbtn {
  background: #000;
  width: 270rpx;
  height: 90rpx;
  /*padding: 0 74rpx;*/
  text-align: center;
  color: #fff;
  font-size: 30rpx;
  line-height: 90rpx;
  /*margin: 50rpx auto 30rpx;*/
  border-radius: 45rpx;
  box-sizing: border-box;
}
.popbox2 > .popbox2btn > .prebtn {
  width: 270rpx;
  height: 90rpx;
  /*padding: 0 74rpx;*/
  text-align: center;
  color: #000;
  font-size: 30rpx;
  line-height: 90rpx;
  /*margin: 40rpx auto 30rpx;*/
  border-radius: 45rpx;
  border: 1px solid #000;
  margin-right: 20rpx;
  box-sizing: border-box;
}
.popbox2btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 73rpx 54rpx 44rpx;
}

.finish-tips {
  margin-bottom: 80rpx;
  font-size: 36rpx;
  color: #030000;
  text-align: center;
  font-weight: bold;
}

.finish-icon {
  width: 120rpx;
  height: 120rpx;
}

.finish-btn {
  background: #000;
  width: 270rpx;
  height: 90rpx;
  text-align: center;
  color: #fff;
  font-size: 30rpx;
  line-height: 90rpx;
  margin: 40rpx auto 0;
  border-radius: 45rpx;
}
