.text-center{text-align:center;}
.text-left{text-align:left;}
.text-white{color:white;}
.text-dark{color:#333;}
.text-black{color:black;}
.font-bold{font-weight:bold;}
.font-normal{font-weight:normal;}
.d-flex{display:flex;}
.d-block{display:block;}
.d-inline-block{display:inline-block;}
.position-absolute{position:absolute;}
.pc-mode{display:block;}
.mobile-mode{display:none;}
.wrap-position01{
    position: absolute;
    top: 194px;
    left: 128px;
    width: 900px;
}
@media (max-width:750px){.pc-mode{display:none;}
.mobile-mode{display:block;}
    .wrap-position01{
        left: 40px;
        width: 310px;
        top: 99px;
    }
}
input,button{background:transparent;border:none;padding:0;margin:0;outline:none;}
img{max-width:100%;-webkit-user-drag:none;}
.img-wrapper{position:relative;}
.img-button{padding:0;margin:0;background-color:transparent;transition:all 300ms;}
.img-button:hover{transform:scale(1.12);}
.main-container{background-color:var(--color-primary);background-position:left top;background-repeat:no-repeat;background-size:100% 100%;padding-bottom:1rem;min-width:var(--container-width);}
@media (max-width:750px){.main-container{width:100vw; padding-bottom: .6rem;}
}
.row{display:block;position:relative;width:var(--container-width);margin:var(--row-space) auto 0;}
.row > .wrap{max-width:var(--container-width);margin:0 auto;position:relative;}
.row-banner{min-width:var(--container-width);margin:0 auto;}
.row-banner{min-width:var(--container-width);margin:0 auto;position:relative;}
.row-banner .rules-img {
  position: absolute;
  right: 0;
  top: 1rem;
  cursor: pointer;
}
@media (max-width:750px){.main-container{width:100vw;margin-top: -1px;}
}
/* ==================== 活动信息面板 ==================== */
/* 信息面板行：与Banner轻微重叠，形成视觉连贯 */
.row.row-info {
    margin-top: -20px;
}

/* 信息面板切图容器 */
.info-panel-wrapper {
    position: relative;
}

/* 当前福利 */
.checkin-current-wrap {
  position: absolute;
  top: 19%;
  left: 13%;
  width: max-content;
}

.checkin-current-wrap div {
  width: 2.86rem;
  height: 2.46rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Microsoft YaHei;
  font-weight: bold;
  font-size: 0.62rem;
  color: #FD4B19;
  margin-top: -0.4rem;
}

/* ==================== 打卡进度状态图标 ==================== */
/* 绝对定位在信息面板的"我的进度"区域上方 */
.checkin-status-wrap {
    position: absolute;
    /* PC端：位于1-bg.png中进度格子区域 */
    top: 44%;
    right: 0%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
}

.checkin-status-wrap .status-icon-box {
  padding: 0.26rem 0.4rem 0.34rem;
  background: #FFF3AE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.4rem;
}

.checkin-status-wrap .status-icon-box .status-text {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 0.4rem;
  color: #672903;
}

/* 单个状态图标大小 */
.checkin-status-wrap .status-icon {
  width:95%;
  height: auto;
}


/* ==================== 打卡按钮区域 ==================== */
.row.row-btn {
    margin-top: -10px;
}

/* 按钮容器：水平居中 */
.btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* "我要打卡"按钮样式 */
.checkin-btn {
    cursor: pointer;
    display: block;
     margin-top: 0.8rem;
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 750px) {
  /* 信息面板与Banner重叠量 */
  .row.row-info {
      margin-top: -5%;
  }

  .row-banner .rules-img {
    position: absolute;
    right: 0;
    top: 3rem;
    width: 0.4rem;
    cursor: pointer;
  }

    /* 当前福利 */
  .checkin-current-wrap {
    position: absolute;
    top: 29%;
    left: 14%;
    width: 100%;
    width: max-content;
  }

  .checkin-current-wrap div {
    width: 1.43rem;
    height: 1.23rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 0.31rem;
    color: #FD4B19;
    margin-top: -0.4rem;
  }

  .checkin-status-wrap {
    position: absolute;
    /* PC端：位于1-bg.png中进度格子区域 */
    top: 48%;
    right: 0%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.2rem;
    padding: 0 0.5rem;
  }

  .checkin-status-wrap .status-icon-box {
    background: #FFF3AE;
    width: 1.44rem;
    height: 1.66rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.4rem;
    padding: 0;
  }

  .checkin-status-wrap .status-icon-box .status-text {
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    font-size: 0.2rem;
    color: #672903;
    margin-bottom: 0.1rem;
  }

  /* 单个状态图标大小 */
  .checkin-status-wrap .status-icon {
    width: 60%;
    height: auto;
  }

  /* 按钮间距 */
  .row.row-btn {
    margin-top: -0.05rem;
  }

  /* 按钮容器：水平居中 */
  .btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* "我要打卡"按钮样式 */
  .checkin-btn {
    cursor: pointer;
    display: block;
    width: 4rem;
    margin-top: 0.5rem;
  }
}