.hll-promotion-content {
  position: absolute;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .hll-promotion-content--block .group {
    margin-top: var(--pc-margin-top);
    margin-left: var(--pc-margin-left);
    margin-bottom: var(--pc-margin-bottom);
    margin-right: var(--pc-margin-right);
  }
}
@media (max-width: 991px) {
  .hll-promotion-content--block .group {
    margin-top: var(--m-margin-top);
    margin-left: var(--m-margin-left);
    margin-bottom: var(--m-margin-bottom);
    margin-right: var(--m-margin-right);
  }
}

   

/* ========================================
 * 一、自由定位
 * 以容器左上角为参照
 * X = 容器宽度百分比
 * Y = 容器高度百分比
 * ======================================== */

.hll-promotion-content[data-position_mode="not_anchor"] {
  left: var(--offset-x);
  top: var(--offset-y);
  transform: none;
}

/* ========================================
 * 二、锚点定位
 * 九宫格锚点同时约束容器和内容自身
 * ======================================== */

/* 上左 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="top-left"] {
  left: calc(0% + var(--offset-x));
  top: calc(0% + var(--offset-y));
  transform: translate(0, 0);
}

/* 上中 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="top-center"] {
  left: calc(50% + var(--offset-x));
  top: calc(0% + var(--offset-y));
  transform: translate(-50%, 0);
}

/* 上右 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="top-right"] {
  left: calc(100% + var(--offset-x));
  top: calc(0% + var(--offset-y));
  transform: translate(-100%, 0);
}

/* 中左 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="center-left"] {
  left: calc(0% + var(--offset-x));
  top: calc(50% + var(--offset-y));
  transform: translate(0, -50%);
}

/* 正中 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="center"] {
  left: calc(50% + var(--offset-x));
  top: calc(50% + var(--offset-y));
  transform: translate(-50%, -50%);
}

/* 中右 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="center-right"] {
  left: calc(100% + var(--offset-x));
  top: calc(50% + var(--offset-y));
  transform: translate(-100%, -50%);
}

/* 下左 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="bottom-left"] {
  left: calc(0% + var(--offset-x));
  top: calc(100% + var(--offset-y));
  transform: translate(0, -100%);
}

/* 下中 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="bottom-center"] {
  left: calc(50% + var(--offset-x));
  top: calc(100% + var(--offset-y));
  transform: translate(-50%, -100%);
}

/* 下右 */
.hll-promotion-content[data-position_mode="anchor"][data-anchor_type="bottom-right"] {
  left: calc(100% + var(--offset-x));
  top: calc(100% + var(--offset-y));
  transform: translate(-100%, -100%);
}