@charset "utf-8";

/* 2025-07-17 수정 시작 */
body,
html {
  -webkit-text-size-adjust: none;
}

body {
  font-family: "Pretendard Variable", "Malgun Gothic", "맑은 고딕", sans-serif;
}

/* quickBn */
/* .quickBn {}
.quickBn__item {} */
.quickBn__item--top {
  margin-top: 2px;
}

/* 이벤트 종료 */
.pageDone {
  position: absolute;
  right: 0;
  top: 142px;
  z-index: 10;
  pointer-events: none;
}

/* joinEvent_2508 */
.joinEvent_2508 {
  overflow: hidden;
  position: relative;
  min-width: 1200px;
  text-align: center;
}
.joinEvent_2508 .inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 157px 0 55px;
}
.joinEvent_2508 .quickBn {
  display: block;
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 100;
  margin: -12px 26px 0 0;
  animation: up02 0.4s 1.3s both;
}
.joinEvent_2508 .quickBn a {
  display: block;
}

/* Media Query */
@media screen and (max-device-width: 1600px) {
  .joinEvent_2508 .quickBn {
    display: none;
  }
}

/* area_evt_intro */
.topBg {
  position: relative;
  background-color: #0069ec;
}
.topBg::before {
  position: absolute;
  top: 146px;
  left: 0;
  right: 0;
  z-index: 10;
  height: 339px;
  background-image: url(https://next.megastudy.net/design_guide/unistudy/250801/welcome_32427/pc/images/intro/img_cloud.png);
  background-position: 50% 0;
  background-repeat: no-repeat;
  -webkit-transform: translateX(-56px);
  -ms-transform: translateX(-56px);
  -moz-transform: translateX(-56px);
  -o-transform: translateX(-56px);
  transform: translateX(-56px);
  pointer-events: none;
  content: "";
}
.topBg .unknown_ocean {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: 2560px;
  height: 575px;
  margin-left: -1280px;
  background-color: #3cd4ff;
  pointer-events: none;
}
.topBg .inner {
  position: relative;
}
.topBg .img_curtain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0 auto;
  pointer-events: none;
}
.topBg .img_ocean_wave_1 {
  position: absolute;
  top: 567px;
  left: 50%;
  z-index: 1;
  margin-left: -1280px;
  pointer-events: none;
}
.topBg .img_ocean_wave_2 {
  position: absolute;
  top: 1363px;
  left: 50%;
  z-index: 1;
  margin-left: -1280px;
  pointer-events: none;
}
.topBg .hgroup_comm {
  position: relative;
  z-index: 1;
}
.topBg .hgroup_comm [class*="tit_comm"] {
  display: block;
  margin: 5px auto 0;
}
.topBg .hgroup_comm [class*="tit_comm"]:first-child {
  margin-top: 0;
}
.topBg .hgroup_comm .txt_comm_1 {
  margin-top: 31px;
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -1.25px;
}
.topBg .group_prize {
  position: relative;
  z-index: 1;
  width: 1283px;
  margin: 16px 0 0 -43px;
}
.topBg .group_prize .inner_prize {
  overflow: hidden;
  animation-play-state: paused;
}

/* box_flamingo */
.topBg .box_flamingo {
  position: absolute;
  top: 435px;
  left: -216px;
  z-index: 1;
}
.topBg .box_flamingo .img_flamingo {
  animation-play-state: paused;
}
.topBg .box_flamingo .img_unknown {
  position: absolute;
  top: 30px;
  left: -48px;
  z-index: 1;
  animation-play-state: paused;
}

/* box_cola_man */
.topBg .box_cola_man {
  position: absolute;
  top: 232px;
  right: -223px;
  z-index: 1;
}
.topBg .box_cola_man .img_cola_man {
  animation-play-state: paused;
}
.topBg .box_cola_man .img_unknown {
  position: absolute;
  top: 44px;
  right: -44px;
  z-index: 1;
  animation-play-state: paused;
}

/* box_bingsu */
.topBg .box_bingsu {
  position: absolute;
  bottom: 195px;
  left: -31px;
  z-index: 1;
}
.topBg .box_bingsu .img_bingsu {
  transform-origin: 50% 50%;
  animation-play-state: paused;
}

/* img_flower */
.topBg .img_flower {
  position: absolute;
  top: -146px;
  left: -83px;
  z-index: 1;
}

/* watermelon */
.topBg .box_watermelon {
  position: absolute;
  top: -173px;
  right: -87px;
  z-index: 1;
}
.topBg .box_watermelon .img_watermelon_1 {
  animation-play-state: paused;
}

/* img_egg */
.topBg .img_egg {
  position: absolute;
  top: -144px;
  left: 116px;
  z-index: 1;

  animation-play-state: paused;
}

/* group_gravity */
.topBg .group_gravity {
  position: relative;
  left: -45px;
  z-index: 1;
  width: 1283px;
  margin: -197px auto 0;
}
.topBg .topBg__join {
  display: inline-block;
  margin-top: 74px;
  vertical-align: top;
}

/* cont1Bg */
.cont1Bg {
  position: relative;
  background-color: #5adeff;
  background-image: url(https://next.megastudy.net/design_guide/unistudy/250801/welcome_32427/pc/images/evt_1/img_seashore.png);
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
.cont1Bg .img_decoration_1 {
  position: absolute;
  top: 337px;
  left: 50%;
  z-index: 1;
  margin-left: -896px;
  pointer-events: none;
}
.cont1Bg .img_decoration_2 {
  position: absolute;
  bottom: 128px;
  left: 50%;
  z-index: 1;
  margin-left: -824px;
  pointer-events: none;
}
.cont1Bg .inner {
  position: relative;
  /* z-index: 1; */
  padding: 67px 0 130px;
}
.cont1Bg .group_capsule_machine {
  position: relative;
  width: 677px;
  margin: 0 auto;
}
.cont1Bg .group_capsule_machine [class*="img_capsule"] {
  position: absolute;
  z-index: 1;
}
.cont1Bg .group_capsule_machine .img_capsule_1 {
  top: 255px;
  left: 56px;
}
.cont1Bg .group_capsule_machine .img_capsule_2 {
  top: 263px;
  left: 254px;
}
.cont1Bg .group_capsule_machine .img_capsule_3 {
  top: 269px;
  left: 434px;
}
.cont1Bg .group_capsule_machine .img_capsule_4 {
  top: 330px;
  left: 532px;
}
.cont1Bg .group_capsule_machine .img_capsule_5 {
  top: 385px;
  left: 22px;
}
.cont1Bg .group_capsule_machine .img_capsule_6 {
  top: 362px;
  left: 152px;
}
.cont1Bg .group_capsule_machine .img_capsule_7 {
  top: 420px;
  left: 224px;
}
.cont1Bg .group_capsule_machine .img_capsule_8 {
  top: 356px;
  left: 360px;
}
.cont1Bg .group_capsule_machine .img_boundary {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin: 0 auto;
  max-width: 100%;
}
.cont1Bg .img_particle {
  position: absolute;
  top: 389px;
  left: 30px;
  z-index: 1;
  pointer-events: none;
}
.cont1Bg .randomBox {
  display: inline-block;
  margin-top: 44px;
  vertical-align: top;
}
.cont1Bg .randomBox__btnArea {
  display: inline-block;
  margin-top: 52px;
  vertical-align: top;
}
.cont1Bg .randomBox__btnArea .randomBox__click {
  display: block;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
}
.cont1Bg .randomBox__btnArea .randomBox__click ~ .randomBox__click {
  margin-top: 23px;
}
.cont1Bg .randomBox__click--done {
  cursor: default;
}
.cont1Bg .randomBox__click + .randomBox__history {
  margin-top: 33px;
}
.cont1Bg .randomBox__history {
  display: inline-block;
  vertical-align: top;
}
/* .cont1Bg .randomBox__img {}
.cont1Bg .randomBox__img.active {} */
.cont1Bg .footNote {
  margin-top: 59px;
  font-weight: 500;
  font-size: 20px;
  color: #3c434b;
  letter-spacing: -1.25px;
}

/* cont2Bg */
.cont2Bg {
  background-color: #ffec50;
}
.cont2Bg .inner {
  padding: 157px 0 127px;
}
.cont2Bg .group_prize {
  position: relative;
  left: 18px;
  z-index: 1;
  margin-top: 40px;
}
.cont2Bg .box_caution {
  margin-top: 54px;
}
.cont2Bg .inputArea__click {
  display: inline-block;
  margin-top: 59px;
  vertical-align: top;
}
.cont2Bg .inputArea__click--done {
  cursor: default;
}

/* area_evt */
.cont3Bg {
  background-color: #0a7ef0;
}
.cont3Bg .inner {
  padding-bottom: 136px;
}
.cont3Bg .img_prize {
  margin-top: 28px;
}
.cont3Bg__btnArea {
  margin-top: -27px;
}

/* noticeWrap */
.noticeWrap {
  margin: 90px 0 0;
  padding: 0 48px;
  border: 1px solid #b6d9fb;
  border-radius: 8px;
}
.noticeWrap__title {
  position: relative;
  margin-bottom: 0 !important;
  font-weight: 600;
  font-size: 22px;
  line-height: 57px;
  color: #fff;
  letter-spacing: -1.05px;
  text-align: center;
  cursor: pointer;
}
.noticeWrap__title--sub {
  font-size: 20px;
  line-height: 1.4;
  text-align: left;
}
.noticeWrap__arrow {
  display: inline-block;
  position: absolute;
  top: 11px;
  right: 371px;
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease;
}
.noticeWrap__arrow:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 10px;
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.noticeWrap__title--trigger.active .noticeWrap__arrow {
  top: 7px;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.noticeWrap__inner {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
  opacity: 0;
  text-align: left;
}
.noticeWrap__inner.active {
  max-height: fit-content;
  opacity: 1;
  padding: 45px 20px 86px;
  border-top: 1px solid #b6d9fb;
}
.noticeWrap__inner .notice-item {
  margin-top: 32px;
}
.noticeWrap__inner .notice-item:first-child {
  margin-top: 0;
}
.noticeWrap__list {
  margin-top: 3px;
}
.noticeWrap__item {
  position: relative;
  margin-top: 5px;
  padding: 0 0 0 30px;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: #bedfff;
  letter-spacing: -0.7px;
  text-align: left;
}
.noticeWrap__item:before {
  content: "-";
  position: absolute;
  left: 16px;
}
.noticeWrap__item:first-child {
  margin-top: 0;
}
.noticeWrap__item--impact {
  font-weight: 700;
  color: #fff !important;
}
.noticeWrap__link {
  display: inline-block;
  margin: 0 0 0 10px;
  padding: 1px 5px;
  border: 1px solid #fff;
  border-radius: 2px;
  font-weight: 400;
  font-size: 13px;
  color: #fff !important;
  vertical-align: middle;
}

/* winner-popup-overlay */
.winner-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  visibility: hidden; /* Hidden at first */
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s ease-out;
}

.winner-popup-overlay .winner-popup-content {
  padding: 167px 0 0;
  text-align: center;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  transition: transform 0.3s ease-out;
  background: url(https://next.megastudy.net/design_guide/unistudy/250801/welcome_32427/pc/images/common/bg_layer.png) -127px
  0 no-repeat;
  width: 850px;
  height: 661px;
}
.winner-popup-overlay .winner-popup-content strong {
  display: block;
}
.winner-popup-overlay .winner-popup-content #winningItem {
  margin-top: 62px;
}
.winner-popup-overlay .winner-popup-content h2 {
  margin-bottom: 72px;
}
.winner-popup-overlay .winner-popup-content .winning-prize h3 {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}
.winner-popup-overlay .winner-popup-content .item-img {
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}
.winner-popup-overlay .winner-popup-content .close-popup-button {
  padding: 0;
  position: absolute;
  right: 18px;
  top: 128px;
  cursor: pointer;
}

/* active */
.winner-popup-overlay.active {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s ease-out;
}
.winner-popup-overlay.active .winner-popup-content {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
/* // 2025-07-17 수정 끝 */

/* 2025-07-17 추가 시작 */
.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}
.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0px;
  line-height: 0;
  text-indent: -9999px;
}

/* bottom-up 이펙트 */
[class*="area_evt"] .effect_ {
  -webkit-transform: translate(0, 80px);
  -ms-transform: translate(0, 80px);
  -moz-transform: translate(0, 80px);
  -o-transform: translate(0, 80px);
  transform: translate(0, 80px);
  opacity: 0;
}
[class*="area_evt"] .effect_.active {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}

/* topBg
---------- ---------- ---------- ---------- ---------- */
.topBg .hgroup_comm .tit_comm_1.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  -moz-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  -o-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.topBg .hgroup_comm .tit_comm_2.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  -moz-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  -o-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.topBg .hgroup_comm .txt_comm_1.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -moz-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -o-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

/* 사은품 영역 */
.topBg .group_prize.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  -moz-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  -o-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}

/* 기간, 대상 */
.topBg .group_gravity .box_period.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -moz-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -o-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

/* 둥둥 수박 */
/* .topBg .group_gravity .box_watermelon.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  -moz-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  -o-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
} */

/* 선물뽑기 버튼 */
.topBg .topBg__join.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  -moz-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  -o-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}

/* 달걀 */
.topBg .group_prize.effect_.active .img_egg {
  animation: egg 2s linear infinite alternate forwards;
  animation-play-state: running;
}
@-webkit-keyframes egg {
  0% {
    -webkit-transform: translateY(8px);
    /* -ms-transform: translateY(8px); IE Don't use */
    -moz-transform: translateY(8px);
    -o-transform: translateY(8px);
    transform: translateY(8px);
  }
  100% {
    -webkit-transform: translateY(0px);
    /* -ms-transform: translateY(0px); IE Don't use */
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-moz-keyframes egg {
  0% {
    -webkit-transform: translateY(8px);
    /* -ms-transform: translateY(8px); IE Don't use */
    -moz-transform: translateY(8px);
    -o-transform: translateY(8px);
    transform: translateY(8px);
  }
  100% {
    -webkit-transform: translateY(0px);
    /* -ms-transform: translateY(0px); IE Don't use */
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes egg {
  0% {
    -webkit-transform: translateY(8px);
    /* -ms-transform: translateY(8px); IE Don't use */
    -moz-transform: translateY(8px);
    -o-transform: translateY(8px);
    transform: translateY(8px);
  }
  100% {
    -webkit-transform: translateY(0px);
    /* -ms-transform: translateY(0px); IE Don't use */
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}

/* 수박 영역 */
.topBg .group_prize.effect_.active .inner_prize {
  -webkit-transition: transform 0.8s;
  -moz-transition: transform 0.8s;
  -o-transition: transform 0.8s;
  transition: transform 0.8s;
  animation: prize 4s linear infinite alternate forwards;
  animation-play-state: running;
}
@-webkit-keyframes prize {
  0% {
    -webkit-transform: translateY(0deg);
    /* -ms-transform: translateY(0deg); IE Don't use */
    -moz-transform: translateY(0deg);
    -o-transform: translateY(0deg);
    transform: translateY(0deg);
  }
  100% {
    -webkit-transform: rotate(2deg);
    /* -ms-transform: rotate(2deg); IE Don't use */
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
@-moz-keyframes prize {
  0% {
    -webkit-transform: translateY(0deg);
    /* -ms-transform: translateY(0deg); IE Don't use */
    -moz-transform: translateY(0deg);
    -o-transform: translateY(0deg);
    transform: translateY(0deg);
  }
  100% {
    -webkit-transform: rotate(2deg);
    /* -ms-transform: rotate(2deg); IE Don't use */
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}
@keyframes prize {
  0% {
    -webkit-transform: translateY(0deg);
    /* -ms-transform: translateY(0deg); IE Don't use */
    -moz-transform: translateY(0deg);
    -o-transform: translateY(0deg);
    transform: translateY(0deg);
  }
  100% {
    -webkit-transform: rotate(2deg);
    /* -ms-transform: rotate(2deg); IE Don't use */
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}

/* 수박 이미지 */
.topBg .group_prize .inner_prize .img_prize {
  -webkit-transform: translateY(956px);
  -ms-transform: translateY(956px);
  -moz-transform: translateY(956px);
  -o-transform: translateY(956px);
  transform: translateY(956px);
}
.topBg .group_prize.effect_.active .inner_prize .img_prize {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);

  -webkit-transition: trantransform 0.8s;
  -moz-transition: trantransform 0.8s;
  -o-transition: trantransform 0.8s;
  transition: transform 0.8s;
}

/* 왼쪽 사람 */
.topBg .group_prize.effect_.active .box_flamingo .img_flamingo {
  animation: flamingo 2s linear infinite alternate forwards;
  animation-play-state: running;
}
@-webkit-keyframes flamingo {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@-moz-keyframes flamingo {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@keyframes flamingo {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
.topBg .group_prize.effect_.active .box_flamingo .img_unknown {
  animation: flamingo_unknown 4s linear infinite forwards;
  animation-play-state: running;
}
@-webkit-keyframes flamingo_unknown {
  0% {
    -webkit-transform: translateX(0);
    /* -ms-transform: translateX(0); IE Don't use */
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-8px);
    /* -ms-transform: translateX(-8px); IE Don't use */
    -moz-transform: translateX(-8px);
    -o-transform: translateX(-8px);
    transform: translateX(-8px);
    opacity: 0;
  }
}
@-moz-keyframes flamingo_unknown {
  0% {
    -webkit-transform: translateX(0);
    /* -ms-transform: translateX(0); IE Don't use */
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-8px);
    /* -ms-transform: translateX(-8px); IE Don't use */
    -moz-transform: translateX(-8px);
    -o-transform: translateX(-8px);
    transform: translateX(-8px);
    opacity: 0;
  }
}
@keyframes flamingo_unknown {
  0% {
    -webkit-transform: translateX(0);
    /* -ms-transform: translateX(0); IE Don't use */
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-8px);
    /* -ms-transform: translateX(-8px); IE Don't use */
    -moz-transform: translateX(-8px);
    -o-transform: translateX(-8px);
    transform: translateX(-8px);
    opacity: 0;
  }
}

/* 오른쪽 사람 */
.topBg .group_prize.effect_.active .box_cola_man .img_cola_man {
  animation: cola_man 2s linear infinite alternate forwards;
  animation-play-state: running;
}
@-webkit-keyframes cola_man {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@-moz-keyframes cola_man {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@keyframes cola_man {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
.topBg .group_prize.effect_.active .box_cola_man .img_unknown {
  animation: cola_man_unknown 4s linear infinite forwards;
  animation-play-state: running;
}
@-webkit-keyframes cola_man_unknown {
  0% {
    -webkit-transform: translateX(0);
    /* -ms-transform: translateX(0); IE Don't use */
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(8px);
    /* -ms-transform: translateX(8px); IE Don't use */
    -moz-transform: translateX(8px);
    -o-transform: translateX(8px);
    transform: translateX(8px);
    opacity: 0;
  }
}
@-moz-keyframes cola_man_unknown {
  0% {
    -webkit-transform: translateX(0);
    /* -ms-transform: translateX(0); IE Don't use */
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(8px);
    /* -ms-transform: translateX(8px); IE Don't use */
    -moz-transform: translateX(8px);
    -o-transform: translateX(8px);
    transform: translateX(8px);
    opacity: 0;
  }
}
@keyframes cola_man_unknown {
  0% {
    -webkit-transform: translateX(0);
    /* -ms-transform: translateX(0); IE Don't use */
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(8px);
    /* -ms-transform: translateX(8px); IE Don't use */
    -moz-transform: translateX(8px);
    -o-transform: translateX(8px);
    transform: translateX(8px);
    opacity: 0;
  }
}

/* 빙수 */
.topBg .group_prize.effect_.active .box_bingsu .img_bingsu {
  animation: bingsu 4s linear infinite alternate forwards;
  animation-play-state: running;
}
@-webkit-keyframes bingsu {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@-moz-keyframes bingsu {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@keyframes bingsu {
  0% {
    -webkit-transform: rotate(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}

/* 잘린 수박 */
.topBg .box_watermelon.effect_.active .img_watermelon_1 {
  transform-origin: 50% 50%;
  animation: watermelon_1 2s linear infinite alternate forwards;
  animation-play-state: running;
}
@-webkit-keyframes watermelon_1 {
  0% {
    -webkit-transform: te(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: te(0deg);
    -o-transform: te(0deg);
    transform: te(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@-moz-keyframes watermelon_1 {
  0% {
    -webkit-transform: te(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: te(0deg);
    -o-transform: te(0deg);
    transform: te(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@keyframes watermelon_1 {
  0% {
    -webkit-transform: te(0deg);
    /* -ms-transform: rotate(0deg); IE Don't use */
    -moz-transform: te(0deg);
    -o-transform: te(0deg);
    transform: te(0deg);
  }
  100% {
    -webkit-transform: rotate(8deg);
    /* -ms-transform: rotate(8deg); IE Don't use */
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}

/* cont1Bg
---------- ---------- ---------- ---------- ---------- */
.cont1Bg .tit_comm_1.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  -moz-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  -o-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* 빤짝이 */
.cont1Bg .img_particle.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.6s;
  -moz-transition: opacity 0.4s ease 0.6s;
  -o-transition: opacity 0.4s ease 0.6s;
  transition: opacity 0.4s ease 0.6s;
}

/* 뽑기 기계 영역 */
.cont1Bg .group_capsule_machine.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.4s;
  -moz-transition: opacity 0.4s ease 0.4s;
  -o-transition: opacity 0.4s ease 0.4s;
  transition: opacity 0.4s ease 0.4s;
}

/* 선물받기 버튼 */
.cont1Bg .randomBox__btnArea .randomBox__click.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  -moz-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  -o-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.cont1Bg .randomBox__btnArea .randomBox__history.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -moz-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -o-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}
.cont1Bg .footNote.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.4s;
  -moz-transition: opacity 0.4s ease 0.4s;
  -o-transition: opacity 0.4s ease 0.4s;
  transition: opacity 0.4s ease 0.4s;
}

/* cont2Bg
---------- ---------- ---------- ---------- ---------- */
.cont2Bg .hgroup_comm .tit_comm_1.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  -moz-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  -o-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* 카카오톡 선물하기 */
.cont2Bg .group_prize.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  -moz-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  -o-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

/* 방법, 발표 */
.cont2Bg .box_caution.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -moz-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -o-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

/* 선물받기 버튼 */
.cont2Bg .inputArea__click.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  -moz-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  -o-transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
}

/* cont3Bg
---------- ---------- ---------- ---------- ---------- */
.cont3Bg .tit_comm_1.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  -moz-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  -o-transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* 사은품 */
.cont3Bg .img_prize.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  -moz-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  -o-transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

/* 선물받기 버튼 */
.cont3Bg .inputArea__click.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -moz-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  -o-transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

/* 유의사항 */
.cont3Bg .noticeWrap.effect_.active {
  -webkit-transition: opacity 0.4s ease 0.6s;
  -moz-transition: opacity 0.4s ease 0.6s;
  -o-transition: opacity 0.4s ease 0.6s;
  transition: opacity 0.4s ease 0.6s;
}
/* // 2025-07-17 추가 끝 */