/* Invitation */
.invitation .box {
  background-image: url('/newmoban/_external/demo.mobanwang.com/mb/lo202602/202602040/html/shop/assets/images/invitation/bg01.png'), url('/newmoban/_external/demo.mobanwang.com/mb/lo202602/202602040/html/shop/assets/images/invitation/bg02.png');
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left bottom;
  background-size: 100px, 100px;
  background-color: var(--white-color);
}
.invitation .box .content {
  position: relative;
  height: 100%;
}
.invitation .box .content .icon {
  width: 100px;
}
.invitation .box .content .qr {
  width: 50%;
}
.invitation .box .content::before, .invitation .box .content::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--primary-color-rgb), 0.55);
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  transition: all 0.3s;
  pointer-events: none;
}
.invitation .box .content::before {
  top: -1.25rem;
  left: -1.25rem;
}
.invitation .box .content::after {
  top: -0.75rem;
  left: -0.75rem;
}
.invitation .box .content:hover::before, .invitation .box .content:hover::after {
  top: -1rem;
  left: -1rem;
}
@media (min-width: 768px) {
  .invitation .box {
    background-size: 150px, 150px;
  }
}
@media (min-width: 992px) {
  .invitation .box {
    background-size: 180px, 180px;
  }
}
@media (min-width: 1200px) {
  .invitation .box {
    background-size: 200px, 200px;
  }
}
@media (min-width: 1400px) {
  .invitation .box {
    background-size: 250px, 250px;
  }
}
.invitation .box2 {
  background-image: url('/newmoban/_external/demo.mobanwang.com/mb/lo202602/202602040/html/shop/assets/images/invitation/bg03.png'), url('/newmoban/_external/demo.mobanwang.com/mb/lo202602/202602040/html/shop/assets/images/invitation/bg04.png');
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right bottom;
  background-size: 220px, 220px;
  background-color: #fff;
}
.invitation .box2 .content {
  position: relative;
  height: 100%;
}
.invitation .box2 .content .icon {
  width: 100px;
}
.invitation .box2 .content .qr {
  width: 50%;
}
.invitation .box2 .content::before, .invitation .box2 .content::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--primary-color-rgb), 0.55);
  width: calc(100% + 2rem);
  height: calc(100% + 2rem);
  transition: all 0.3s;
  pointer-events: none;
}
.invitation .box2 .content::before {
  top: -1.25rem;
  left: -1.25rem;
}
.invitation .box2 .content::after {
  top: -0.75rem;
  left: -0.75rem;
}
.invitation .box2 .content:hover::before, .invitation .box2 .content:hover::after {
  top: -1rem;
  left: -1rem;
}
@media (min-width: 768px) {
  .invitation .box2 {
    background-size: 240px, 240px;
  }
}
@media (min-width: 992px) {
  .invitation .box2 {
    background-size: 260px, 260px;
  }
}
@media (min-width: 1200px) {
  .invitation .box2 {
    background-size: 280px, 280px;
  }
}
@media (min-width: 1400px) {
  .invitation .box2 {
    background-size: 300px, 300px;
  }
}

.map-content {
  height: 70vh;
}/*# sourceMappingURL=invitation.css.map */