.myattention {
  width: 750rpx;
  height: 170rpx;
  font-size: 0;
}

image {
  width: 100%;
  height: 100%;
}

.noke {
  color: #ce6198;
  font-size: 42rpx;
  font-weight: bold;
  margin-top: 12rpx;
  text-align: center;
}

.noketext {
  color: #ce6198;
  font-size: 39rpx;
  font-weight: bold;
  text-align: center;
  margin-top: 15rpx;
}

.up {
  margin-top: 10rpx;
}

.roleone {
  width: 260rxp;
  height: 740rpx;
  font-size: 0;
  margin: 50rpx auto 0;

}
.roleone image{
  width:100%;
  height:100%;
}

.redname {
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  width: 156rpx;
  top: 100rpx;
  left: 154rpx;
  line-height: 1.8;
}

.redkuang {
  color: #ea575d;
  font-size: 26rpx;
  font-weight: bold;
  width: 130rpx;
  position: absolute;
  top: -25rpx;
  left: 117rpx;
  background: #fff;
  text-align: center;
  padding: 10rpx;
  border: 1rpx solid #ea575d;
}

.pink {
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  width: 135rpx;
  top: 100rpx;
  left: 338rpx;
  line-height: 1.8;
}

.pinkkuang {
  color: #ce6198;
  font-size: 26rpx;
  font-weight: bold;
  width: 130rpx;
  position: absolute;
  top: -25rpx;
  left: 353rpx;
  background: #fff;
  text-align: center;
  padding: 10rpx;
  border: 1rpx solid #ce6198;
}

.yellowname {
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  width: 185rpx;
  top: 252rpx;
  left: 35rpx;
  line-height: 1.8;
  text-align: center;
}

.yellowkuang {
  color: #f49f19;
  font-size: 26rpx;
  font-weight: bold;
  width: 130rpx;
  position: absolute;
  top: 146rpx;
  left: -26rpx;
  background: #fff;
  text-align: center;
  padding: 10rpx;
  border: 1rpx solid #f49f19;
}

.purplename {
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  width: 185rpx;
  top: 250rpx;
  right: 35rpx;
  line-height: 1.8;
  text-align: center;
}

.purplekuang {
  color: #a5639e;
  font-size: 26rpx;
  font-weight: bold;
  width: 130rpx;
  position: absolute;
  top: 146rpx;
  right: -23rpx;
  background: #fff;
  text-align: center;
  padding: 10rpx;
  border: 1rpx solid #a5639e;
}

.grayname {
  color: #fff;
  font-size:24rpx;
  position: absolute;
  width: 185rpx;
  bottom: 168rpx;
  left: 67rpx;
  line-height: 1.8;
  text-align: center;
}

.graykuang {
  color: #898989;
  font-size: 26rpx;
  font-weight: bold;
  width: 130rpx;
  position: absolute;
  bottom: 24rpx;
  left: 18rpx;
  background: #fff;
  text-align: center;
  padding: 10rpx;
  border: 1rpx solid #898989;
}

.greenname {
  color: #fff;
  font-size: 22rpx;
  position: absolute;
  width: 109rpx;
  bottom: 95rpx;
  left: 254rpx;
  line-height: 1.8;
  text-align: center;
}

.greenkuang {
  color: #14b4a6;
  font-size: 26rpx;
  font-weight: bold;
  width: 130rpx;
  position: absolute;
  bottom: -20rpx;
  left: 227rpx;
  background: #fff;
  text-align: center;
  padding: 10rpx;
  border: 1rpx solid #14b4a6;
}

.bluename {
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  width: 217rpx;
  bottom: 166rpx;
  right: 35rpx;
  line-height: 1.8;
  text-align: center;
}
.bluekuang{
  color: #1C96D0;
  font-size: 26rpx;
  font-weight: bold;
  width: 130rpx;
  position: absolute;
  bottom: 63rpx;
  right:17rpx;
  background: #fff;
  text-align: center;
  padding: 10rpx;
  border: 1rpx solid #1C96D0;
}
.tupic{
  width:613rpx;
  height:613rpx;
  font-size: 0;
  position: relative;
  margin:31rpx auto 0;
}

.code {
  display: flex;
  align-items: center;
  width: 613rpx;
  height: 128rpx;
  margin:10rpx auto 0;
 
  /* position: absolute;
  left: 28rpx;
  bottom: 122rpx;
   */
  padding: 0 16rpx;
  box-sizing: border-box;
}

.codeleft {
  width: 105rpx;
  height: 105rpx;
  font-size: 0;
}

.coderight {
  margin-left: 17rpx;
}

.coderighttop {
  color: #000;
  font-size: 28rpx;
}

.coderighttopk {
  color: #000;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.share {
  display: flex;
  align-items: center;
  position: absolute;
  top:1138rpx;
  z-index:999;
  left: 58rpx;
}

.shareleft {
  width: 289rpx;
  height: 68rpx;
  color: #ce6198;
  font-size: 28rpx;
  text-align: center;
  line-height: 68rpx;
  background: #f9f9f9;
  border-radius: 44rpx;
}

.shareright {
  width: 289rpx;
  height: 68rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  line-height:68rpx;
  background: #ce6198;
  border-radius: 44rpx;
  margin-left: 57rpx;
}
.imagePathBox{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.shengcheng{
  width:665rpx;
  height:1100rpx;
  
  position: fixed;
  
  left: 50%;
  top:30rpx;
  transform: translateX(-50%);

  /* margin-left: -40%; */
  z-index: 10;
}
.baocun{
  display: block;
  width: 80%;
  height: 92rpx;
  padding: 0;
  line-height: 92rpx;
  text-align: center;
  position: fixed;
  bottom: 12rpx;
  left: 10%;
  background:linear-gradient(180deg,rgba(252,169,162,1) 0%,rgba(255,119,117,1) 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  z-index:999999
  
}
button[class="baocun"]::after{
  border: 0;
}
.canvas-box{
  word-break: break-word;
  word-wrap: break-word;
}
.pp{
  position: relative
}
.sharehai{
  width:750rpx;
  display:flex;
  justify-content: center;
  align-items: center;
  /* margin-top:8rpx; */
  /* position: absolute;
  bottom:5rpx; */
}