.bannerArea img {
  width: 100%;
  display: block;
}

.mainArea {
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .mainArea {
    padding-top: 0;
  }
}

.contentBox {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 117px 40px 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.contentBox::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/creation-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.075;
  pointer-events: none;
  z-index: 0;
}
.contentBox > * {
  position: relative;
  z-index: 1;
}
.contentBox .leftBox {
  width: 60%;
}
.contentBox .leftBox .pageTitle {
  color: #192882;
  text-align: center;
  font-size: 2.8125rem;
  font-style: normal;
  font-weight: 900;
  line-height: 163%; /* 73.35px */
  margin-bottom: 32px;
}
.contentBox .rightBox {
  width: 40%;
}

.blessing_wall {
  --bw-scale: 1;
  position: relative;
  max-width: 700px;
  background-image: url(../images/c_bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: 80px;
  -webkit-transform: scale(var(--bw-scale));
          transform: scale(var(--bw-scale));
  -webkit-transform-origin: top center;
          transform-origin: top center;
  margin-bottom: calc(960px * (var(--bw-scale) - 1));
}
.blessing_wall .balloon {
  position: absolute;
  right: -38px;
  top: 69px;
  -webkit-animation: balloon-float 3s ease-in-out infinite;
          animation: balloon-float 3s ease-in-out infinite;
}
.blessing_wall .balloon img {
  display: block;
  width: 100%;
}
.blessing_wall .top {
  position: relative;
}
.blessing_wall .rebon {
  position: absolute;
  width: 670px;
  top: -119px;
}
.blessing_wall .rebon img {
  display: block;
  width: 100%;
}
.blessing_wall .people {
  display: none;
  width: 62px;
  height: 62px;
  position: absolute;
  right: 25%;
  top: -7%;
}
.blessing_wall .people img {
  width: 100%;
  display: block;
}
.blessing_wall .num {
  width: 400px;
  color: #192882;
  text-align: right;
  font-family: Inter, sans-serif;
  font-size: 110px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  -webkit-text-stroke: 11px #F9E063;
  paint-order: stroke fill;
  text-align: center;
  margin-left: 88px;
  position: relative;
  top: -34px;
  -webkit-transform: rotate(355deg);
          transform: rotate(355deg);
}
.blessing_wall .total_title {
  width: 447px;
  text-align: center;
  position: relative;
  top: -109px;
  margin-left: 100px;
}
.blessing_wall .total_title img {
  display: block;
  width: 100%;
}
.blessing_wall .itemBox {
  margin-top: -142px;
}
.blessing_wall .itemBox .item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20px;
}
.blessing_wall .itemBox .item .line {
  position: absolute;
  bottom: 22px;
  right: 86px;
}
.blessing_wall .itemBox .item .line img {
  width: 100%;
  display: block;
}
.blessing_wall .itemBox .item .pic {
  width: 118px;
}
.blessing_wall .itemBox .item .pic img {
  display: block;
  width: 100%;
}
.blessing_wall .itemBox .item .title {
  width: 240px;
  font-size: 38px;
  color: #fff;
  font-weight: 600;
  margin-left: 35px;
}
.blessing_wall .itemBox .item .p_num {
  width: 145px;
  color: #F9E063;
  text-align: right;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: 63.708px; /* 167.652% */
  margin-left: 120px;
  margin-left: 55px;
}
.blessing_wall .itemBox .item .p_num span {
  color: #FFF;
  text-align: right;
  font-family: "Noto Sans TC";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-left: 20px;
}
.blessing_wall .bless_btn {
  width: 313px;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}
.blessing_wall .bless_btn img {
  display: block;
  width: 100%;
}

@-webkit-keyframes balloon-float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes balloon-float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.photo_wall_controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 16px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.ctrl_btn {
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  background: #192882;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.ctrl_btn:hover {
  opacity: 0.8;
}
.ctrl_btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ctrl_btn--danger {
  background: #c0392b;
}

.pw_counter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}

.photo_wall {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.photo_wall canvas {
  max-width: 100%;
  height: auto;
}

.photo_wall_cta_mobile {
  display: none;
}

.photo_wall_hint {
  text-align: center;
  color: #192882;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 12px 0 8px;
}

.bless_btn--mobile {
  width: 200px;
  max-width: 60vw;
  display: block;
  margin: 0 auto;
}
.bless_btn--mobile img {
  display: block;
  width: 100%;
}

.pw_modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.pw_modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
.pw_modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.pw_modal.is-open .pw_modal__backdrop {
  opacity: 1;
}
.pw_modal__box {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 12px 12px 8px;
  border-radius: 6px;
  -webkit-box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
          box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
  max-width: 90vw;
  max-height: 90vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
  -webkit-transform: scale(0.88) translateY(20px);
          transform: scale(0.88) translateY(20px);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  transition: opacity 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.pw_modal.is-open .pw_modal__box {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
}
.pw_modal__box img {
  display: block;
  max-width: 80vw;
  max-height: 80vh;
  -o-object-fit: contain;
     object-fit: contain;
}
.pw_modal__loader {
  display: none;
  width: 36px;
  height: 36px;
  border: 3px solid #e5e5e5;
  border-top-color: var(--color-primary, #1A3A8C);
  border-radius: 50%;
  -webkit-animation: pw_modal_spin 0.9s linear infinite;
          animation: pw_modal_spin 0.9s linear infinite;
  margin: 30px 0 18px;
}
.pw_modal.is-loading .pw_modal__loader {
  display: block;
}
.pw_modal.is-loading .pw_modal__box img {
  display: none;
}
.pw_modal.is-loading .pw_modal__box {
  min-width: 240px;
  min-height: 220px;
}
.pw_modal__header {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pw_modal__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: color 0.15s, -webkit-transform 0.15s;
  transition: color 0.15s, -webkit-transform 0.15s;
  transition: color 0.15s, transform 0.15s;
  transition: color 0.15s, transform 0.15s, -webkit-transform 0.15s;
}
.pw_modal__close:hover {
  color: #111;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.pw_modal__title {
  margin: 0;
  font-family: var(--font-body-zh);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary, #1A3A8C);
}

@-webkit-keyframes pw_modal_spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes pw_modal_spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@media (max-width: 1600px) {
  .contentBox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 60px 20px 100px;
  }
  .contentBox .leftBox,
  .contentBox .rightBox {
    width: 100%;
  }
  .contentBox .leftBox .pageTitle {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    line-height: 1.3;
  }
  .contentBox .rightBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden;
  }
  .blessing_wall {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
@media (max-width: 700px) {
  .contentBox {
    padding-top: 40px;
  }
  .contentBox .rightBox {
    overflow: visible;
  }
  .photo_wall {
    margin-left: -20px;
    margin-right: -20px;
  }
  .photo_wall_cta_mobile {
    display: block;
    margin-top: 16px;
  }
  .blessing_wall {
    --bw-scale: 0.68;
    width: 700px;
    max-width: none;
  }
}
@media (max-width: 580px) {
  .blessing_wall {
    --bw-scale: 0.6;
  }
}
@media (max-width: 480px) {
  .blessing_wall {
    --bw-scale: 0.544;
  }
}
@media (max-width: 420px) {
  .blessing_wall {
    --bw-scale: 0.48;
  }
}
@media (max-width: 380px) {
  .blessing_wall {
    --bw-scale: 0.432;
  }
}


.bannerArea.ins img.pc {
  display: block;
}
@media (max-width: 768px) {
  .bannerArea.ins img.pc {
    display: none;
  }
}
.bannerArea.ins img.mobile {
  display: none;
}
@media (max-width: 768px) {
  .bannerArea.ins img.mobile {
    display: block;
  }
}