body { font-family: 'NanumSquareNeo', sans-serif; padding: 15px; background: linear-gradient(180deg, #778CFB 0%, #778CFB 100%); position: relative; overflow: hidden; }
body::before { content: ""; position: absolute; top: -250px; right: -250px; display: block; width: 500px; height: 500px; border-radius: 500px; background: linear-gradient(180deg, #8ab5ea 0%, #a8b0f8 100%); opacity: 0.6; }
body::after { content: ""; position: absolute; bottom: -250px; left: -250px; display: block; width: 500px; height: 500px; border-radius: 500px; background: linear-gradient(180deg, #8ab5ea 0%, #a8b0f8 100%); opacity: 0.6; }
body .popup-wrap { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
body .popup-wrap .tit { font-size: 4rem; font-weight: 800; color: #fff; padding-bottom: 25px; }
body .popup-wrap .tit .point { color: #fff668; }
body .popup-wrap .label-text { display: inline-block; background: #2958C4; border-radius: 100px; padding: 11px 36px; color: #fff; font-size: 2.1rem; }
body .popup-wrap .sub-txt { font-size: 2.1rem; line-height: 1.6; color: #fff; font-weight: 500; padding-top: 20px; }
body .popup-wrap .sub-txt .bold { font-weight: 800; }
body .popup-wrap .sub-txt .bold.yellow { color: #fff668; }
body .popup-wrap .sub-txt .bold.green { color: #7EEFC6; }
body .popup-wrap .img-area { padding-top: 20px; width: 300px; margin: 0 auto; }
body .popup-wrap .img-area img { width: 100%; height: auto; }

/* ---------------- media 1200px ---------------- */
@media (max-width: 1200px) {
  body { padding: 30px; }
  body::before { top: -150px; right: -150px; width: 350px; height: 350px; border-radius: 350px; }
  body::after { bottom: -150px; left: -150px; width: 350px; height: 350px; border-radius: 350px; }
  body .popup-wrap .tit { font-size: 3rem; }
  body .popup-wrap .label-text { font-size: 1.7rem; }
  body .popup-wrap .sub-txt { font-size: 1.8rem; }
  body .popup-wrap .img-area { width: 250px; }
}

/* ---------------- media 660px ---------------- */
@media (max-width: 660px) {
  body::before { width: 300px; height: 300px; border-radius: 300px; }
  body::after { width: 300px; height: 300px; border-radius: 300px; }
  body .popup-wrap .tit { font-size: 2.6rem; padding-bottom: 20px; }
  body .popup-wrap .label-text { font-size: 1.6rem; padding: 10px 30px; }
  body .popup-wrap .sub-txt { font-size: 1.7rem; padding-top: 20px; }
  body .popup-wrap .img-area { width: 220px; }
}

/* ---------------- media 500px ---------------- */
@media (max-width: 500px) {
  body .popup-wrap .tit { font-size: 2.2rem; padding-bottom: 15px; }
  body .popup-wrap .label-text { font-size: 1.5rem; padding: 8px 24px; }
  body .popup-wrap .sub-txt { font-size: 1.6rem; padding-top: 15px; }
  body .popup-wrap .img-area { width: 200px; padding-top: 15px; }
}