@media (min-width: 768px) {
  .lottery-container{
    width: 480px;
    height: 662px;
    position: relative;
    margin-top: 120.5px;
  }
  .lottery-header-img{
    width: 480px;
    height: 241px;
    top: -120.5px;
  }
  .lottery-img-close{
    top: -120.5px;
  }
  .lottery-body{
    width: 480px;
    height: 540px;
  }
  .lottery-body .lottery-body-header{
    padding: 20px 0;
    font-size: 20px;
    line-height: 30px;
  }
  .lottery-body .lottery-body-content{
    width: 436px;
    height: 436px;
    border-radius: 8px;
  }
  .lottery-wrapper .lottery-item{
    width: 128px;
    height: 128px;
    border-radius: 8px;
    margin: 6px;
    box-shadow: 2px 6px 10px 0px #B22200;
  }
  .lottery-item .lottery-item-header{
    height: 120px;
    border-radius: 8px;
  }
  .lottery-item .lottery-item-header .lottery-item-header-title-img{
    width: 80px;
    height: 80px;
  }
  .lottery-item-header-title-img img{
    width: 80px;
    height: 80px;
  }
  .lottery-item .lottery-item-header .lottery-item-header-title{
    font-size: 14px;
    line-height: 21px;
  }
  .lottery-item .lottery-item-btn{
    height: 120px;
    border-radius: 8px;
  }
  .btn-img-pc{
    display: block;
  }
  .btn-img-h5{
    display: none;
  }
  .lottery-item .lottery-item-bottom{
    height: 16px;
  }
  .lottery-item-inactive .lottery-item-header-mask{
    height: 120px;
    border-radius: 8px;
  }
  .lottery-item-inactive .lottery-item-mask{
    height: 16px;
    border-radius: 8px;
  }
  .winning-body .winning-body-header{
    padding: 20px 0;
  }
  .winning-body-header-title{
    font-size: 20px;
    line-height: 30px;
  }
  .winning-body-header-time{
    font-size: 14px;
    line-height: 21px;
  }
  .winning-body .winning-body-content{
    width: 436px;
    height: 414px;
  }
  .winning-form{
    width: 392px;
    height: 346px;
    margin-top: 22px;
  }
  .winning-form .form-item label, .winning-form .checkbox-row label{
    margin-bottom: 10px;
  }
  .winning-form .form-item input, .winning-form .checkbox-row textarea{
    margin-bottom: 20px;
    font-size: 16px;
  }
  .message-footer{
    display: flex;
    justify-content: flex-end;
  }
  .message-cancel-btn, .message-submit-btn{
    width: 96px;
  }
  .success-dialog .el-dialog{
    background: none !important;
  }
  .success-body{
    height: 298px;
  }
  .success-body-content{
    width: 436px;
    height: 194px;
  }
  .success-btn{
    width: 392px;
  }
}

@media (max-width: 768px) {
  .lottery-container{
    width: 355px;
    height: 506px;
    position: relative;
    margin-top: 94.5px;
  }
  .lottery-header-img{
    width: 375px;
    height: 189px;
    top: -94.5px;
    left: -10px;
  }
  .lottery-img-close{
    top: -120.5px;
    top: -94.5px;
  }
  .lottery-body{
    width: 355px;
    height: 410px;
  }
  .lottery-body .lottery-body-header{
    padding: 15px 0;
    font-size: 16px;
    line-height: 24px;
  }
  .lottery-body .lottery-body-content{
    width: 335px;
    height: 335px;
    border-radius: 8px;
  }
  .lottery-wrapper .lottery-item{
    width: 90px;
    height: 90px;
    border-radius: 5.36px;
    margin: 5px;
    box-shadow: 1.41px 4.22px 7.03px 0px #B22200;
  }
  .lottery-item .lottery-item-header{
    height: 84.38px;
    border-radius: 5.63px;
  }
  .lottery-item .lottery-item-header .lottery-item-header-title-img{
    width: 56px;
    height: 56px;
  }
  .lottery-item-header-title-img img{
    width: 56px;
    height: 56px;
  }
  .lottery-item .lottery-item-header .lottery-item-header-title{
    font-size: 10px;
    line-height: 15px;
  }
  .lottery-item .lottery-item-btn{
    height: 84.38px;
    border-radius: 5.63px;
  }
  .btn-img-pc{
    display: none;
  }
  .btn-img-h5{
    display: block;
  }
  .lottery-item .lottery-item-bottom{
    height: 5.62px;
  }
  .lottery-item-inactive .lottery-item-header-mask{
    height: 84.38px;
    border-radius: 5.63px;
  }
  .lottery-item-inactive .lottery-item-mask{
    height: 5.62px;
    border-radius: 5.63px;
  }
  .winning-body{
    height: 468px;
  }
  .winning-body .winning-body-header{
    padding: 15px 0;
  }
  .winning-body-header-title{
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 5px;
  }
  .winning-body-header-time{
    font-size: 12px;
    line-height: 18px;
  }
  .winning-body .winning-body-content{
    width: 335px;
    height: 370px;
  }
  .winning-form{
    width: 287px;
    height: 328px;
    margin-top: 15px;
  }
  .winning-form .form-item label, .winning-form .checkbox-row label{
    margin-bottom: 10px;
  }
  .winning-form .form-item input, .winning-form .checkbox-row textarea{
    margin-bottom: 15px;
  }
  .hideTextarea{
    display: none;
  }
  .messgae-dialog .el-dialog{
    margin: 0 20px;
    width: calc(100% - 40px) !important;
  }
  .message-footer{
    display: flex;
    justify-content: space-between;
  }
  .message-cancel-btn, .message-submit-btn{
    width: 48%;
  }
  .success-dialog{
    z-index: 9999 !important;
  }
  .success-dialog .el-dialog{
    z-index: 9999 !important;
    background: none !important;
  }
  .success-body{
    height: 272px;
  }
  .success-body-content{
    width: 335px;
    height: 194px;
  }
  .success-btn{
    width: 287px;
  }
}
.form-notice{
  height: 32px;
  width: 100%;
  border-radius: 16px;
  background: #F7F9FA;
  color: #2A2B2E;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.form-notice img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.preview-dialog {
  z-index: 9999 !important;
}
.preview-dialog .el-dialog{
  height: 100% !important;
  background: none !important;
  z-index: 10000 !important;
}
::v-deep .el-dialog__header{
  padding: 0;
}
::v-deep .el-dialog__body{
  width: 100%;
  height: 100%;
}
.dialog-container{
  width: 100%;
  height: 100%;
}
.lottery-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.lottery-header-img{
  position: absolute;
}
.lottery-img-close{
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: -120.5px;
  cursor: pointer;
}
.lottery-body{
  border-radius: 20px;
  background: #fff;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(to right, #FDF6D9, #F7D473), /* 从左到右的渐变 */
    linear-gradient(to bottom, #FDF6D9, #FFD075); /* 从上到下的渐变 */
  background-blend-mode: multiply; /* 可选：混合模式，用于将两个渐变混合在一起 */
  box-shadow: 0px 2px 4px 0px #FFFFFF80 inset;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lottery-body .lottery-body-header{
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  color: #BD3D00;
}
.lottery-body .lottery-body-content{
  background: #F6994E;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 2px 4px 10px 0px rgba(224, 43, 0, 1) inset;
}
.lottery-body-header-title span{
  font-weight: 700;
  color: #E60039;
}
.lottery-body-content .lottery-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.lottery-wrapper .lottery-item{
  overflow: hidden;
  position: relative;
}

.lottery-item .lottery-item-header{
  width: 100%;
  background: #fff;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lottery-item .lottery-item-header .lottery-item-header-title-img{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.lottery-item .lottery-item-header .lottery-item-header-title{
  color: #9A641B;
  padding: 0 5px;
  width: 100%;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.lottery-item .lottery-item-btn{
  width: 100%;
  background: linear-gradient(131.79deg, #F3B64C -2.06%, #EE902E 99.53%);
  box-shadow: 3px 4px 5px 0px #FFE9B2 inset;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none; /* 标准语法 */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}
.lottery-item .lottery-item-bottom{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #ED9E84 0%, #ED896B 100%);
}
.lottery-wrapper .lottery-item-btn .lottery-item-header-mask, 
.lottery-wrapper .lottery-item-btn .lottery-item-mask{
  display: none;
}
.lottery-wrapper .lottery-item-btn .lottery-item-bottom{
  background: linear-gradient(90deg, #D15F13 0%, #CE520D 100%);
}
.lottery-item-active .lottery-item-header-mask, 
.lottery-item-active .lottery-item-mask{
  display: none;
}
.lottery-item-inactive{
  position: relative;
  box-shadow: 2px 6px 10px 0px rgba(178, 34, 0, 0.5) !important;
}
.lottery-item-inactive .lottery-item-header-mask{
  width: 100%;
  background: rgba(255, 255, 255, 0.75);
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
}
.lottery-item-inactive .lottery-item-mask{
  width: 100%;
  height: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 1;
}
.messgae-dialog {
  z-index: 10010 !important;
}
.messgae-dialog .el-dialog{
  z-index: 10011 !important;
}
.winning-body .winning-body-header{
  font-weight: 400;
  text-align: center;
  color: #BD3D00;
}
.winning-body-header-title{
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  color: #BD3D00;
}
.winning-body-header-title span{
  font-weight: 700;
  color: #E60039;
}
.winning-body-header-time{
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  color: #BD3D00;
}
.winning-body-header-time span{
  font-weight: 700;
  color: #E60039;
}
.winning-body .winning-body-content{
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.winning-form .form-item{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.winning-form .form-item label, .winning-form .checkbox-row label{
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #2A2B2E;
}
.winning-form .form-item label span, .winning-form .checkbox-row label span{
  font-weight: 400;
  font-size: 16px;
  line-height: 21.79px;
  color: #E60039;
}
.checkbox-row{
  position: relative;
}
.hideTextarea{
  position: absolute;
  visibility: hidden;
}
.winning-form .form-item input{
  width: 100%;
  height: 46px;
  line-height: 24px;
  border-radius: 4px;
  border: 1px solid #D5D5D5;
  padding: 0 15px;
}
.winning-form .checkbox-row textarea{
  width: 100%;
  min-height: 46px;
  line-height: 24px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #D5D5D5;
  padding: 10px 15px;
  resize: none;
}
.winning-form .form-item input::placeholder, .winning-form .checkbox-row textarea::placeholder{
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #C1C6CF;
  
}
.winning-form .checkbox-row{
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.winning-btn{
  width: 100%;
  height: 46px;
  border-radius: 4px;
  background: #E60039;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.messgae-dialog .el-dialog{
  border-radius: 8px;
}
.messgae-dialog .el-dialog__header{
  padding: 0;
}
.messgae-dialog .message-content{
  display: flex;
  align-items: center;

}
.message-content img{
  width: 48px;
  height: 48px;
  margin-right: 10px;
}
.message-content-info{
  display: flex;
  flex-direction: column;
}
.message-title{
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 18px;
  line-height: 23.76px;
  color: #2a2b2e;
  margin-bottom: 10px;
}
.message-info{
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  line-height: 21.12px;
  color: #6a6b6d;
}
.message-cancel-btn{
  height: 46px;
  font-size: 16px;
  color: #2A2B2E;
  border: 1px solid #D5D5D5;
}
.message-cancel-btn:hover, .message-cancel-btn:active{
  background: #fff;
  color: #2A2B2E;
  border: 1px solid #D5D5D5;
}
.message-submit-btn{
  height: 46px;
  font-size: 16px;
  background: #E60039;
  border: 1px solid #E60039;
  color: #fff;
}
.message-submit-btn:hover, .message-submit-btn:active{
  background: #E60039;
  border: 1px solid #E60039;
}
.success-dialog .el-dialog{
  box-shadow: none;
}
.success-dialog .el-dialog__header, .success-dialog .el-dialog__body{
  padding: 0;
}
.success-body-content{
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 0;
}
.success-title{
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #BD3D00;
  margin-bottom: 15px;
}
.success-title span{
  font-weight: 700;
  color: #E60039;
}
.success-info {
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color:#6A6B6D;
  margin-bottom: 8px;
}
.success-info img{
  width: 16px;
  height: 16px;
  margin-left: 15px;
}
.success-btn{
  margin: 0 auto;
  margin-top: 9px;
  height: 46px;
  border-radius: 4px;
  background: #E60039;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  cursor: pointer;
}
.tips-submit-btn{
  background: #E60039;
  border: 1px solid #E60039;
}
.tips-submit-btn:hover, .tips-submit-btn:active {
  background: #E60039;
  border: 1px solid #E60039;
}
.dialog-info a{
  color: #1890ff;
}