@charset "UTF-8";

/*S:FONT*/
/*2025*/
/*E:FONT*/

/* S:COMMON */
.pc-object {
  display: block !important;
}
.mo-object {
  display: none !important;
}
.rel {
  position: relative;
}
.img {
  width: 100%;
  display: block;
}

.event-2025 {
  position: relative;
  width: 100%;
}

.event-2025 .evt-01-top {
  height: 89.6rem;
  position: relative;
}

.event-2025 .evt-detail {
  height: 110rem;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.event-2025 .evt-detail .background-image {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

  /* To hide any part of the image that overflows */
  overflow: hidden;
  width: -webkit-fill-available;
}

  .top-tt-1 {
  	margin-top: 1rem;
  }

  .top-tt-2 {
  	margin-top: 1rem;
  }
  
   .top-tt-4 {
  	margin-top: 2rem;
  }
  

/* Hide duplicate logos in desktop mode - Global rule */
.evt-01-top .logo-item.duplicate {
  display: none !important;
}

/* Logo rotation animation for mobile */
@keyframes logo-rotate {
  0% { transform: rotate(-20deg); }
  50% { transform: rotate(20deg); }
  100% { transform: rotate(-20deg); }
}

/* Infinite scroll animation */
@keyframes infiniteScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.event-2025 .evt-detail .background-image img {
  width: 100%;
  height: 100%;
  max-height: 87.4rem;
  object-fit: cover;
}
.evt-wrap.pop {
  filter: blur(1rem);
  transition: filter 0.25s ease-in-out;
}
/* E:COMMON */
.evt-01-top {
  height: 89.6rem;
  /* background-color: #E9F4FF; */
}

.event-2025 .evt-top {
  padding-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.event-2025 .evt-top h2 {
  width: 12rem;
  height: 3rem;
}

.event-2025 .evt-top h1 {
  text-transform: uppercase;
  font-size: 7.2rem;
  color: #222;
  font-weight: 900;
  letter-spacing: 0.072rem;
  line-height: 110%;
  font-family: "Montserrat";
}

.event-2025 .evt-top h1.top-tt-4 {
  margin-bottom: 0;
}
.evt-01-top .evt-top .evt-symbol {
  margin: 4rem 0 0.4rem;
}
.evt-01-top .evt-top p.point-01 {
  color: #222;
  font-size: 2.6rem;
  line-height: 130%;
  font-weight: 600;
}

.evt-01-top .evt-top p.point-02 {
  color: #222;
  font-size: 2.8rem;
  line-height: 130%;
  font-weight: 700;
}
.evt-01-top .evt-top p.point-02 span {
  color: #fb2fff;
}

.evt-01-top .evt-top p.point-03 {
  color: #6c8298;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 130%;
  font-family: "Montserrat";
}
.event-2025 .evt-mid {
  width: 100%;
  height: 20rem;
  margin: 4rem auto 0;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 1;
  justify-content: center;
}








.event-2025 .evt-bottom {
  text-align: center;
  position: relative;
  z-index: 1;
  padding-top: 5rem;
}

.event-2025 .evt-bottom .bottom-text-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Mobile Animation Toggle Button */
.mobile-toggle-container {
  text-align: center;
  margin: 2rem 0;
}

.mobile-animation-btn {
  display: none; /* Hidden by default, shown via JavaScript on mobile */
  background: linear-gradient(90deg, #A20564 10.27%, #E84EA6 106.46%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0.4rem 0.8rem rgba(162, 5, 100, 0.3);
}

.mobile-animation-btn:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.6rem 1.2rem rgba(162, 5, 100, 0.4);
}

.mobile-animation-btn:active {
  transform: translateY(0);
  box-shadow: 0 0.2rem 0.4rem rgba(162, 5, 100, 0.2);
}

.event-2025 .evt-01-mid-top-text {
  text-align: center;
  margin: 0 auto;
  display: block;
  max-width: 25%;
  height: auto;
}

.event-2025 .evt-mid-left-1,
.event-2025 .evt-mid-right-1 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.event-2025 .evt-mid-left-1 {
  max-height: 174px;
}

.event-2025 .evt-mid-left-1 img {
  max-height: 174px;
  width: auto;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Ensure consistent sizing for all PC/mobile images in evt-mid-left-1 */
.event-2025 .evt-mid-left-1 .pc-object,
.event-2025 .evt-mid-left-1 .mo-object {
  max-height: 174px;
  width: auto;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/* Specific sizing for benefit_trans_text_left.svg - resize to 80% */
.event-2025 .evt-mid-left-1 img[src*="benefit_trans_text_left.svg"] {
  max-height: 174px;
  width: 80%;
  height: auto;
  display: block;
  max-width: 80%;
  object-fit: contain;
}

.event-2025 .evt-mid-right-1 {
  max-height: 260px;
}

.event-2025 .evt-mid-right-1 img {
  max-height: 260px;
  width: auto;
}

.event-2025 .evt-button-section {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin: 4rem auto;
  max-width: 80rem;
}

.event-2025 .evt-button-group {
  text-align: center;
  flex: 1;
}

.event-2025 .button-description {
  font-size: 1.8rem;
  color: #666;
  margin-bottom: 1.5rem;
  font-weight: 400;
  text-align: center;
  width: 100%;
  max-width: 35rem;
}

.event-2025 .evt-button {
  width: 100%;
  max-width: 35rem;
  height: 5.6rem;
  border: none;
  border-radius: 1.2rem;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.event-2025 .evt-button-blue {
  background: linear-gradient(90deg, #1d1b88 10.27%, #6161e8 106.46%);
}

.event-2025 .evt-button-purple {
  background: linear-gradient(90deg, #a20564 10.27%, #de449d 106.46%);
}

.event-2025 .evt-redeem-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 67.2rem;
}

.event-2025 .evt-redeem-section .redeem-background-image {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: -webkit-fill-available;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.event-2025 .evt-redeem-section .redeem-background-image img {
  width: 100%;
  height: 100%;
  object-position: center;
}

.event-2025 .evt-redeem-frame {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3rem;
  z-index: 1;
}

.event-2025 .redeem-title {
  box-sizing: border-box;
  position: relative;
  width: 40rem;
  height: 8.8rem;
  background-image: url('../images/event/2025-01/redeem_button.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(2.76293px 5.52586px 41.4439px rgba(0, 0, 0, 0.1));
  backdrop-filter: blur(48.3512px);
  flex: none;
  order: 0;
  flex-grow: 0;
  margin-bottom: 4rem;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Text styling */
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 4rem;
  line-height: 130%;
  text-align: center;
  text-transform: uppercase;
  color: #0b082b;
}

.event-2025 .redeem-counters {
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
}

.event-2025 .redeem-counter {
  position: relative;
  width: 19.359rem;
  height: 13.262rem;
  box-sizing: border-box;
  border-radius: 0;
}

/* Available ticket background with cut corner */
.event-2025 .redeem-counter.available {
  background: linear-gradient(135deg, #4667de 0%, #6b8cff 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);
}

/* Used ticket background */
.event-2025 .redeem-counter.used {
  background: linear-gradient(135deg, #5a6dce 0%, #7b8eee 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 85% 100%, 0% 100%);
}

/* Header section with gradient */
.event-2025 .redeem-counter::before {
  content: "";
  position: absolute;
  width: 19.359rem;
  height: 4.697rem;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, #2b35a0 0%, #4667de 100%);
  border-radius: 0;
}

/* Used ticket header */
.event-2025 .redeem-counter.used::before {
  background: linear-gradient(90deg, #3b45b0 0%, #5a6dce 100%);
}

/* Left perforation hole */
.event-2025 .redeem-counter::after {
  content: "";
  position: absolute;
  width: 1.708rem;
  height: 1.658rem;
  left: -0.854rem;
  top: 3.868rem;
  background: #efeffb;
  border-radius: 50%;
  z-index: 2;
}

/* Right perforation hole */
.event-2025 .redeem-counter {
  overflow: visible;
}

.event-2025 .redeem-counter .perforation-right {
  position: absolute;
  width: 1.708rem;
  height: 1.658rem;
  right: -0.854rem;
  top: 3.868rem;
  background: #efeffb;
  border-radius: 50%;
  z-index: 2;
}

/* Dashed line separator */
.event-2025 .redeem-counter .dash-line {
  position: absolute;
  width: 17.651rem;
  height: 0;
  left: 0.854rem;
  top: 4.696rem;
  opacity: 0.2;
  border-top: 0.138rem dashed #ffffff;
}

.event-2025 .counter-label {
  position: absolute;
  width: 9.892rem;
  height: 3.1rem;
  left: 4.658rem;
  top: 0.89rem;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 130%;
  text-align: center;
  color: #ffffff;
}

.event-2025 .counter-number {
  position: absolute;
  width: 2.164rem;
  height: 4.7rem;
  left: 8.644rem;
  top: 6.492rem;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 130%;
  text-align: center;
  color: #f1cd19;
}

.used_number {
  color: white !important;
}

/* Used ticket number - slightly more muted golden color */
.event-2025 .redeem-counter.used .counter-number {
  color: #e6b800;
}

.event-2025 .evt-bottom p {
  color: #6c8298;
  text-align: center;
}

.event-2025 .evt-bottom button {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  padding: 2rem 4rem;
  border-radius: 0.8rem;
  margin-bottom: 2.4rem;
}

.event-2025 .evt-count-ticket-wrap {
  display: flex;
  justify-content: center;
  gap: 2.4rem;
  margin-bottom: 2.4rem;
}

.event-2025 .evt-count-ticket {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.event-2025 .evt-count-ticket span {
  font-size: 1.6rem;
  color: #666;
  margin-bottom: 0.8rem;
}

.event-2025 .evt-count-ticket strong {
  font-size: 2.4rem;
  color: #222;
  font-weight: 700;
}

.evt-top-banner {
  width: 100vw;
  height: 83rem;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  text-indent: -9999rem;
}
.evt-con-detail {
  width: 102.4rem;
  margin: 0 auto;
  padding: 8rem 0;
}

.event-2025 .section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.evt-benefit .evt-top {
  position: relative;
  display: table;
  margin: 0 auto;
}
.evt-benefit .evt-top span {
  width: 28.6rem;
  height: 5.6rem;
  display: inline-flex;
  background: #282832;
  border-radius: 8rem;
  align-items: center;
  justify-content: left;
  padding-left: 3.2rem;
  color: var(--white);
  font-size: var(--fs-2-4);
  font-weight: 700;
  font-family: "Montserrat";
  z-index: 1;
  text-transform: uppercase;
}
.evt-benefit .evt-top::before {
  content: "";
  width: 2.8rem;
  height: 2.2rem;
  display: block;
  background: url(../images/event/2024-01/evt_06.svg?20240502) no-repeat 0 0;
  position: absolute;
  right: 32px;
  top: 47px;
}
.evt-benefit .evt-top em {
  width: 5.6rem;
  height: 5.6rem;
  background-color: #c63583;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--fs-2-4);
  font-weight: 700;
  font-family: "Montserrat";
  margin-left: -5.6rem;
  z-index: 10;
  position: relative;
}
.evt-benefit .evt-top strong {
  width: 35.9rem;
  height: 5.6rem;
  border-radius: 8rem;
  margin-left: -5.6rem;
  background: #ee3897;
  display: inline-flex;
  align-items: center;
  justify-content: right;
  padding-right: 3.2rem;
  color: var(--white);
  font-size: var(--fs-2-4);
  font-weight: 700;
  font-family: "Montserrat";
  z-index: 5;
  text-transform: uppercase;
}

.event-2025 .evt-mid-count {
  position: absolute;
  top: -2.4rem;
  left: -2.4rem;
  width: 4.8rem;
  height: 4.8rem;
  background: #0351ff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  font-weight: 700;
}

.event-2025 .evt-mid .left {
  width: 47.2rem;
  order: 2;
  grid-row: 2 / 2;
}
.event-2025 .evt-mid-top {
  font-size: 2.4rem;
  color: #222;
  line-height: 150%;
  margin-bottom: 2.4rem;
}

.event-2025 .evt-mid-top strong {
  font-weight: 700;
}

.event-2025 .evt-mid-top i {
  color: #0351ff;
  font-style: normal;
}

.event-2025 .evt-mid-top p {
  font-size: 1.6rem;
  color: #666;
  margin-top: 1.6rem;
}

.evt-benefit .evt-mid .left .evt-mid-top p {
  color: #333;
  font-size: var(--fs-1-8);
  margin: 1.6rem 0 0rem;
  line-height: var(--line-1-8);
  text-transform: none;
  font-weight: 400;
}

.evt-benefit.evt-02-benefit .evt-mid .left .evt-mid-top p {
  color: #666;
}
.evt-benefit.evt-02-benefit .evt-mid .left .evt-mid-top p + p {
  font-size: 1.4rem;
}
.event-2025 .evt-mid-bottom {
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
}

.event-2025 .evt-mid-bottom .evt-left,
.event-2025 .evt-mid-bottom .evt-right {
  flex: 1;
  text-align: center;
}

.event-2025 .evt-mid-bottom button {
  width: 100%;
  height: 5.6rem;
  border-radius: 1.2rem;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  background: #0351ff;
  margin-bottom: 0.8rem;
}

.event-2025 .evt-mid-bottom .evt-left button {
  background: #282832;
}

.event-2025 .evt-mid-bottom span {
  font-size: 1.4rem;
  color: #666;
}
.evt-benefit .evt-mid .evt-mid-bottom .evt-right span,
.evt-benefit .evt-mid .evt-mid-bottom .evt-left span {
  color: #666;
  margin-top: 0.2rem;
  display: inline-block;
}
.evt-benefit .evt-mid .evt-mid-bottom .evt-right button {
  width: 23rem;
  height: 5.6rem;
  border-radius: 1.2rem;
  background-color: #ef2e93;
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
}

.event-2025 .evt-ticket-01 {
  width: 40rem;
  height: 21.2rem;
  position: relative;
  background: url(../images/event/2025-01/ticket_bg.svg) no-repeat 0 0;
  background-size: contain;
}

.event-2025 .evt-ticket-01 h3.logo {
  width: 8rem;
  height: 2rem;
  position: absolute;
  left: 3rem;
  top: 3.5rem;
}

.event-2025 .evt-ticket-01 .mid {
  position: absolute;
  left: 3rem;
  top: 7.5rem;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.event-2025 .evt-ticket-01 .mid span {
  color: #222;
  font-size: 3rem;
  font-weight: 700;
  font-family: "Montserrat";
  text-transform: uppercase;
}

.event-2025 .evt-ticket-01 p.sub-txt {
  position: absolute;
  left: 3rem;
  bottom: 4rem;
  color: #222;
  font-size: 1.8rem;
}

.evt-benefit .evt-mid .right .mid {
  display: flex;
  justify-content: start;
  position: absolute;
  left: 3rem;
  top: 7.5rem;
  padding: 0;
}

.evt-benefit .evt-mid .right .mid span {
  display: inline-flex;
  align-self: flex-end;
  color: #222;
  font-size: 3rem;
  font-weight: 700;
  line-height: 2.3rem;
  font-family: "Montserrat";
  text-transform: uppercase;
  margin-left: 0.5rem;
}
.evt-benefit .evt-mid .right p.sub-txt {
  width: 40rem;
  display: flex;
  justify-content: start;
  position: absolute;
  left: 3rem;
  bottom: 4rem;
  color: #222;
  margin-top: 0;
  font-size: var(--fs-1-8);
}
.evt-02-benefit .evt-mid .right p.sub-txt {
  bottom: 2.8rem;
}

.evt-03-benefit .evt-mid .right p.sub-txt {
  bottom: 2.8rem;
  font-weight: 600;
}

.evt-02-benefit .evt-mid .evt-mid-bottom .evt-left {
  width: 100%;
}
.evt-02-benefit .evt-mid .evt-mid-bottom .evt-left button {
  width: 100% !important;
  background-color: #ef2e93 !important;
  color: var(--white);
}
.evt-benefit.evt-02-benefit .evt-mid {
  grid-template-columns: 47rem 40rem;
}

.evt-benefit.evt-02-benefit .evt-top strong {
  width: 24.9rem;
  background-color: #cc23b9;
}
.evt-benefit.evt-02-benefit .evt-top em {
  background-color: #ab249e;
}
.evt-benefit.evt-02-benefit .evt-mid .left {
  grid-row: 2/3;
  align-items: center;
}
.evt-benefit.evt-01-benefit .evt-mid .right::after {
  width: 34.9rem;
  height: 25.2rem;
  content: "";
  display: block;
  position: absolute;
  right: 0.974rem;
  top: -13.7rem;
  background: url(../images/event/2024-01/evt_37.svg?20240502) no-repeat 0 0;
}

.evt-benefit.evt-02-benefit .evt-mid .right .evt-ticket-01 {
  position: relative;
  background: url(../images/event/2024-01/evt_03.svg?202405021) no-repeat 0 0;
}
.evt-benefit.evt-02-benefit .evt-top::before {
  background: url(../images/event/2024-01/evt_08.svg?20240502) no-repeat 0 0;
  background-size: contain;
}

.evt-benefit.evt-02-benefit .evt-mid .evt-mid-bottom {
  display: none;
}
.evt-benefit.evt-03-benefit .evt-mid {
  grid-template-columns: 47.2rem 40rem;
}

.evt-benefit.evt-03-benefit .right .evt-ticket-01 {
  position: relative;
  background: url(../images/event/2024-01/evt_04.svg?202405021) no-repeat 0 0;
}
.evt-benefit.evt-03-benefit .evt-top strong {
  width: 19.6rem;
  background: #8f28f5;
  text-transform: uppercase;
}
.evt-benefit.evt-03-benefit .evt-top::before {
  background: url(../images/event/2024-01/evt_11.svg?20240502) no-repeat 0 0;
  background-size: contain;
}
.evt-benefit.evt-03-benefit .evt-top em {
  background-color: #7a28ce;
}

.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom {
  flex-direction: row;
  flex-wrap: wrap;
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code-wrap {
  width: 100%;
  display: block;
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code.none {
  display: none;
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code {
  width: 100%;
  height: 7.2rem;
  border-radius: 0.8rem;

  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code span {
  font-size: var(--fs-1-8);
  color: var(--black);
  margin-right: 1.6rem;
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code em {
  width: 11.2rem;
  height: 3.6rem;
  border-radius: 0.8rem;
  background-color: #f5f5f5;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  color: #0f1249;
  font-size: var(--fs-1-8);
  margin-right: 0.4rem;
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code button {
  width: 12.5rem;
  height: 3.6rem;
  border: 0;
  border-radius: 0.8rem;
  background: #0f1249;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-1-8);
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left {
  margin-top: 1.6rem;
}
.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left button {
  min-width: 47.2rem;
  height: 5.6rem;
  border-radius: 1.2rem;
  background: #3aaa35;
  border: 0;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left button::after {
  content: "";
  width: 3.2rem;
  height: 3.2rem;
  display: block;
  background: url(../images/event/2024-01/evt_13.svg?20240502) no-repeat 0 0;
  margin-left: 1.2rem;
}

.evt-benefit.evt-03-benefit .evt-mid .right {
  width: 40rem;
  height: 21.1rem;
  display: inline-flex;
}
.evt-benefit.evt-03-benefit .evt-sub-01 {
  width: 28.1rem;
  height: 24.4rem;
  background: url(../images/event/2024-01/evt_14.svg?20240502) no-repeat 0 0;
  position: absolute;
  right: -1rem;
  top: -11.3rem;
}
.evt-benefit.evt-03-benefit .evt-sub-01 span {
  color: var(--white);
  font-weight: 600;
  line-height: 130%;
  font-family: "Montserrat";
  position: absolute;
  left: 6.2rem;
  top: 4rem;
  padding-left: 1rem;
}
.evt-benefit.evt-03-benefit .evt-sub-02 {
  width: 16rem;
  height: 7.2rem;
  background: url(../images/event/2024-01/evt_15.svg?20240502) no-repeat 0 0;
  position: absolute;
  right: -2.3rem;
  bottom: -4.6rem;
}
.evt-benefit.evt-03-benefit .evt-sub-02 span {
  color: var(--white);
  font-weight: 600;
  line-height: 130%;
  font-family: "Montserrat";
  position: absolute;
  left: 1rem;
  top: 4rem;
  padding-left: 2rem;
}

.evt-01 .evt-btn-01 {
  text-align: center;
  margin: 4rem 0;
  position: relative;
  z-index: 20;
  margin-top: -15rem;
}
.evt-01 .evt-btn-01 button {
  width: 31.2rem;
  height: 5.6rem;
  line-height: 5.6rem;
  border-radius: 1.2rem;
	background: linear-gradient(90deg, #A20564 10.27%, #E84EA6 106.46%);
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
  margin-top: 5rem;
}
.evt-01-bottom .tit {
  width: 670px;
  height: 53px;
  left: 165px;
  top: 0px;

  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-size: 44px;
  line-height: 120%;
  /* identical to box height, or 53px */
  text-align: center;

  /* Event/Text */
  color: #0b082b;
}

/* Table container - clean and simple */
.event-2025 #div_evt_table.evt-table {
  width: 100%;
  max-width: 100rem;
  margin: 4rem auto 0;
  position: relative;
  overflow-x: auto;
}

/* Table background image styling */
.event-2025 .evt-table .table-background-image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 50rem;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}

.event-2025 .evt-table .table-background-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Clean table styling */
.event-2025 .evt-table table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  position: relative;
  z-index: 10;
  table-layout: fixed;
}

/* Colgroup support for equal column widths */
.event-2025 .evt-table col {
  width: 25%;
}

/* Table header */
.event-2025 .evt-table thead tr {
  background: url(../images/event/2025-01/table_header_bg.svg) no-repeat center center;
  background-size: cover;
  height: 4.8rem;
}

/* Table header cells */
.event-2025 .evt-table thead th {
  padding: 1rem 0.8rem;
  text-align: center;
  vertical-align: middle;
  font-family: 'Lato';
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 130%;
  color: #0B082B;
  border: none;
  width: 25%;
}

/* Table body rows */
.event-2025 .evt-table tbody tr {
  background: #FFFFFF;
  border-bottom: 1px solid #7868A5;
  height: 4.8rem;
  position: relative;
}


/* Table body cells */
.event-2025 .evt-table td {
  padding: 1rem 0.8rem;
  text-align: center;
  vertical-align: middle;
  font-family: 'Lato';
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 130%;
  color: #070707;
  border: none;
  width: 25%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  hyphens: auto;
  max-width: 0;
}

/* Stock logo styling */
.event-2025 .evt-table .stock-logo {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-block;
}

.evt-entry-tiket button {
  color: #ee3897;
  display: inline-flex;
  gap: 1rem;
  flex-direction: row;
  font-weight: 700;
}
.evt-entry-tiket button::after {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background: url(../images/event/2024-01/evt_17.svg?20240502) no-repeat 0 0;
}

/* Stock History Group - ensure it stays above footer */
.event-2025 .evt-stock-history-group {
  position: relative;
  z-index: 10;
  background: var(--white);
  margin-bottom: 0;
}

/* Table bottom image - using img element instead of background */
.event-2025 .table-bottom-image {
  display: block;
  width: 100%;
  max-width: 100rem;
  height: auto;
  margin-bottom: 10rem;
  margin-top: -50px;
}

/* Desktop image - show by default */
.event-2025 .table-bottom-image.desktop-only {
  display: block !important;
  width: 100vw;
  max-width: none;
  max-height: 374px;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Mobile image - hide by default */
.event-2025 .table-bottom-image.mobile-only {
  display: none;
}

/* Desktop action button group */
.event-2025 .evt-action-button-group {
  position: relative;
  z-index: 10;
  margin-top: -18rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
}

/* Mobile responsive - switch images */
@media (max-width: 1000px) {
  .event-2025 .table-bottom-image.desktop-only {
    display: none !important;
  }
  
  .event-2025 .table-bottom-image.mobile-only {
    display: block !important;
    height: 364px !important;
    margin-top: -3rem !important;
  }
  
  /* Mobile evt-bottom padding */
  .event-2025 .evt-bottom {
    padding-top: 10rem !important;
  }
  
  /* Position action button group over mobile table image */
  .event-2025 .evt-action-button-group {
    position: relative !important;
    z-index: 10 !important;
    margin-top: -18rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 0 !important;
  }
  
  /* Mobile button specific styling */
  .evt-01 .evt-btn-01 {
    margin-top: -15rem !important;
  }
}
.event-2025 .evt-01-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 2.4rem;
  width: 48rem;
  z-index: 1000;
  display: none;
}

.event-2025 .evt-pop-top {
  padding: 2.4rem;
  border-bottom: 0.1rem solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-2025 .evt-pop-top h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #222;
}

.event-2025 .evt-pop-top .close {
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icon/icon_close.svg) no-repeat center;
  font-size: 0;
}
.evt-01-pop .evt-pop-mid {
  min-height: 43.3rem;
  background: url(../images/event/2024-01/evt_51.png?20240502) no-repeat center
    top;
  background-size: 100%;
  padding-top: 4.8rem;
}
.evt-01-pop .evt-pop-mid .evt-resulte-01 {
  width: 40rem;
  height: 6rem;

  background-image: url(../images/event/2024-01/evt_18.svg?20240502);
  background-position: center center;
  display: grid;
  grid-template-columns: 26.7rem 1fr;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.evt-01-pop .evt-pop-mid .evt-resulte-01 span {
  font-size: 2rem;
  color: #081d58;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.evt-01-pop .evt-pop-mid .evt-resulte-01 em {
  color: #fb2fff;
  font-size: var(--fs-2-4);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.evt-01-pop .evt-pop-mid .evt-resulte-01 em i {
  font-style: normal;
  margin-right: 0.5rem;
}

.evt-01-pop .evt-pop-mid .evt-resulte-02 {
  height: 42.8rem;
  position: relative;
}
.evt-01-pop .evt-pop-mid .evt-resulte-02 .bg-0 {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 5.4rem;
  transform: translateX(-50%);
}

.evt-01-pop .evt-pop-mid .evt-resulte-02 .bg-1 {
  mix-blend-mode: screen;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 0.2rem;
  transform: translateX(-50%);
}
.evt-01-pop .evt-pop-mid .evt-resulte-02 .card {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 0.4rem;
  transform: translateX(-50%);
}
.evt-01-pop .evt-pop-mid .evt-resulte-02 .card img {
  width: 100%;
}

.evt-01-pop .evt-icon-mark {
  width: 15rem;
  height: 4.8rem;
  background: url(../images/event/2024-01/evt_31.svg?20240502) no-repeat 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 600;
  font-family: Montserrat;
  text-align: center;
  font-size: var(--fs-2-4);
  position: absolute;
  left: 50%;
  top: 33.4rem;
  transform: translateX(-50%);
}

.evt-01-pop .evt-icon-mark em {
  font-size: var(--fs-1-8);
  margin-left: 0.4rem;
}

.evt-01-pop .evt-btn-wrap {
  display: flex;
  padding: 0 0 4.1rem;
  gap: 1.6rem;
  justify-content: center;
}
.evt-01-pop .evt-btn-wrap button {
  text-align: center;
  position: relative;
}
.evt-01-pop .evt-btn-wrap button::after {
  content: "";
  width: 1.44rem;
  height: 1.44rem;
  background: url(../images/event/2024-01/evt_32.svg?20240502) no-repeat 0 0;
  display: block;
  position: absolute;
  right: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.evt-01-pop .evt-btn-wrap button:nth-child(1) {
  width: 29.6rem;
  height: 4.8rem;
  border-radius: 1.2rem;
  background: #313e75;

  color: var(--white);
  letter-spacing: normal;
}
.evt-01-pop .evt-btn-wrap button:nth-child(2) {
  width: 29.6rem;
  height: 4.8rem;
  border-radius: 1.2rem;
  background: #ef2e93;
  color: var(--white);
  letter-spacing: normal;
}

.evt-01-pop .evt-pop-top button {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  text-indent: -9999rem;
}
.evt-01-pop .evt-pop-top button::after {
  width: 0.1rem;
  height: 100%;
  background: var(--white);
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 0;
  display: block;
  transform: rotate(45deg);
}
.evt-01-pop .evt-pop-top button::before {
  width: 0.1rem;
  height: 100%;
  background: var(--white);
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 0;
  display: block;
  transform: rotate(320deg);
}

.notice-pop {
  display: none;
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--white);
  position: absolute;
  left: 50%;
  top: 20%;
}
.notice-pop .contents {
  width: auto;
  padding: 4rem 4rem 2.4rem;
  background: var(--white);
  text-align: center;
  font-size: var(--fs-2-4);
  line-height: var(--line-3-2);
  color: var(--gray-lev10);
}
.notice-pop .top {
  padding: 1.6rem 2.4rem;
  background: var(--gray-lev6);
  text-align: center;
  font-size: var(--fs-3-2);
  color: var(--blue);
  font-weight: 700;
}
.notice-pop .bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 0 0 5.6rem;
}

.text-box-01 {
  width: 80rem;
  padding: 2.4rem 4rem;
  background: var(--pink-light);
  border-radius: 10rem;
  font-size: var(--fs-3-8);
  font-weight: 700;
  color: var(--white);
  position: absolute;
  left: 50%;
  top: 7.5rem;
  transform: translateX(-50%);
}
.text-box-01::after {
  content: "";
  width: 2rem;
  height: 2rem;
  background: var(--pink-light);
  position: absolute;
  left: 50%;
  bottom: -1rem;
  margin-left: -1rem;
  transform: rotate(45deg);
}
.text-box-02 {
  color: var(--blue);
  position: absolute;
  left: 50%;
  bottom: 7rem;
  transform: translateX(-50%);
}
@keyframes rotate_image {
  100% {
    transform: rotate(360deg);
  }
}

/* MOBILE WIDTH 720PX FOR 360px */
@media screen and (max-width: 1000px) {
  .pc-object {
    display: none !important;
  }
  .mo-object {
    display: block !important;
  }
  
  .event-2025 .evt-stock-history-group {
  	margin-top: -12rem;
  }
  
  /* Make duplicate logos visible in mobile mode */
  .evt-01-top .logo-item.duplicate {
    display: flex !important;
  }
  .event-2025 .evt-detail {
    max-width: 100%;
    height: 70rem;
  }
  .top-tt-2 img {
    max-height: 18.4rem;
  }
  .top-tt-3 img,
  .top-tt-4 img {
    height: 2.1rem;
  }
  
  .event-2025 .evt-01-top {
    height: auto;
    margin-bottom: 0;
  }
  
  .event-2025 .evt-top h1 {
    width: 100%;
    font-size: 4.4rem;
    text-align: center;
    line-height: 110%;
    margin-top: 1.6rem;
  }
  
  .event-2025 .evt-top .top-tt-4 {
    width: 80%;
  }
  
  .evt-01-top .evt-top p.point-01 {
    font-size: var(--fs-1-6);
    margin-top: 0.4rem;
  }
  .evt-01-top .evt-top p.point-02 {
    font-size: var(--fs-1-6);
    margin-top: 0.4rem;
  }
  .evt-01-top .evt-top p.point-03 {
    font-size: var(--fs-1-6);
    margin-top: 2.4rem;
  }
  .evt-01-top .evt-top .evt-symbol {
    max-width: 68%;
  }
  .evt-01-top .evt-top .evt-symbol img {
    width: 100%;
  }
  /* Hide desktop stock grid on mobile */
  .evt-01-top .stock-grid {
    display: none !important;
  }

  /* Mobile stock logos animation - Infinite carousel */
  .evt-01-top .stock-logos-animation {
    display: flex;
    overflow-x: hidden; /* Change to hidden to prevent manual scrolling */
    width: 100%;
    padding: 0 1rem;
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    position: relative;
    gap: 2rem;
  }
  
  /* Show duplicate logos in mobile mode */
  .evt-01-top .logo-item.duplicate {
    display: flex !important;
  }
  
  /* Hide scrollbar for Chrome, Safari and Opera */
  .evt-01-top .stock-logos-animation::-webkit-scrollbar {
    display: none;
  }

  .evt-01-top .logo-item {
    width: 152px !important;
    height: 214px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .evt-01-top .logo-item img {
    width: 122px !important;
    height: 184px !important;
    object-fit: contain;
    animation: logo-rotate 3s ease-in-out infinite;
  }

  /* Mobile vertical positioning - ensure 3rem offset for logos 2 and 4 */
  .evt-01-top .logo-item:nth-child(even),
  .evt-01-top .logo-item.duplicate:nth-child(even) {
    transform: translateY(3rem) !important;
  }
  
  /* Create the infinity scroll effect - Use a wrapper for better control */
  .evt-01-top .stock-logos-animation {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-right: 0; /* Reset padding */
    box-sizing: border-box; /* Standard box sizing */
  }
  
  /* Use the JS-created wrapper for animation */
  .evt-01-top .logo-container {
    display: flex;
    gap: 2rem;
    animation: infiniteScroll 20s linear infinite;
    -webkit-animation: infiniteScroll 20s linear infinite;
    width: max-content; /* Allow container to be as wide as needed */
    height: 230px;
  }
  
  /* Responsive evt-01-mid-top-text images */
  .event-2025 .evt-01-mid-top-text {
    max-width: 90%;
    width: auto;
    height: auto;
    margin: 2rem auto;
  }

  /* Responsive evt-benefit-transaction images */
  .event-2025 .evt-benefit-transaction {
    max-width: 90%;
    width: auto;
    height: auto;
    margin: 2rem auto;
    margin-top: 10rem !important;
  }

  /* Responsive layout for evt-mid containers */
  .event-2025 .evt-mid {
    flex-direction: column;
    gap: 2rem;
  }

  .event-2025 .evt-mid-left-1,
  .event-2025 .evt-mid-right-1 {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    max-height: none;
  }

  .event-2025 .evt-mid-left-1 {
    margin-left: auto;
    margin-right: auto;
  }

  /* Remove left margin for evt-benefit-info-group evt-mid-left-1 on mobile */
  .event-2025 .evt-benefit-info-group .evt-mid-left-1 {
    padding-left: 0 !important;
  }

  .event-2025 .evt-mid-right-1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .event-2025 .evt-mid-left-1 img,
  .event-2025 .evt-mid-right-1 img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: none !important;
  }

  /* Ensure consistent responsive sizing for PC/mobile objects in evt-mid-left-1 */
  .event-2025 .evt-mid-left-1 .pc-object,
  .event-2025 .evt-mid-left-1 .mo-object {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 174px !important;
    object-fit: contain;
  }

  /* Specific responsive sizing for benefit_trans_text_left.svg - resize to 80% */
  .event-2025 .evt-mid-left-1 img[src*="benefit_trans_text_left.svg"] {
    max-width: 80% !important;
    width: 80% !important;
    height: auto;
    max-height: none !important;
    object-fit: contain;
  }

  .event-2025 .evt-mid-right-1 img {
    margin-right: 7rem;
  }

  /* Responsive button section - stack vertically and add padding on mobile */
  .event-2025 .evt-button-section {
    flex-direction: column;
    gap: 2rem;
    margin: 3rem auto;
  }

  .event-2025 .evt-button-group {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    max-width: none;
  }

  /* Make button elements full width on mobile */
  .event-2025 .button-description {
    max-width: none;
    width: 100%;
  }

  .event-2025 .evt-button {
    max-width: none;
    width: 100%;
  }

  /* Resize evt-redeem-frame to 60% (decrease by 40%) on mobile */
  .event-2025 .evt-redeem-frame {
    transform: scale(0.8) translateY(-7rem);
    transform-origin: center center;
  }

  /* Make redeem-title full width on mobile */
  .event-2025 .redeem-title {
    width: 100%;
  }

  /* Center section-title images horizontally on mobile */
  .event-2025 .section-title {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Clean mobile table styling - override all flexbox */
  .event-2025 #div_evt_table.evt-table {
    width: 100% !important;
    max-width: none !important;
    padding: 0 1rem !important;
    margin: 2rem auto 0 !important;
    overflow-x: auto !important;
    display: block !important;
    flex-direction: initial !important;
    align-items: initial !important;
  }

  .event-2025 .evt-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    display: table !important;
    table-layout: fixed !important;
  }

  /* Mobile column widths - match the colgroup specification */
  .event-2025 .evt-table col {
    width: 25% !important;
  }

  .event-2025 .evt-table thead tr {
    background: url(../images/event/2025-01/mobile/table_header_bg.svg) no-repeat center center !important;
    height: 4rem !important;
    background-size: cover !important;
    display: table-row !important;
    flex-direction: initial !important;
    align-items: initial !important;
  }

  .event-2025 .evt-table thead th {
    padding: 0.8rem 0.4rem !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: none !important;
    display: table-cell !important;
    flex-direction: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
    width: 25% !important;
  }

  .event-2025 .evt-table tbody {
    display: table-row-group !important;
    flex-direction: initial !important;
    align-items: initial !important;
  }

  .event-2025 .evt-table tbody tr {
    height: 4rem !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #7868A5 !important;
    display: table-row !important;
    flex-direction: initial !important;
    align-items: initial !important;
  }

  .event-2025 .evt-table td {
    padding: 0.8rem 0.4rem !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    border: none !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: auto !important;
    max-width: 0 !important;
    display: table-cell !important;
    flex-direction: initial !important;
    justify-content: initial !important;
    align-items: initial !important;
    width: 25% !important;
  }

  .event-2025 .evt-table .stock-logo {
    width: 2rem !important;
    height: 2rem !important;
    display: inline-block !important;
  }

  .event-2025 .evt-table .table-background-image {
    display: none !important;
  }

  .evt-01-top .evt-detail::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .evt-con-detail,
  .evt-benefit {
    width: 100%;
    padding: 4.5rem 0;
  }

  .evt-benefit .evt-top span {
    width: 15.2rem;
    height: 3.2rem;
    font-size: 1.3rem;
    padding-left: 1.6rem;
  }
  .evt-benefit .evt-top em {
    width: 3.2rem;
    height: 3.2rem;
    margin-left: -3.2rem;
    font-size: 1.3rem;
  }
  .evt-benefit .evt-top strong {
    width: 18.7rem;
    height: 3.2rem;
    font-size: 1.3rem;
    margin-left: -3.2rem;
    padding-right: 1.6rem;
  }
  .evt-benefit.evt-02-benefit .evt-top strong {
    width: 13rem;
    height: 3.2rem;
    font-size: 1.3rem;
    margin-left: -3.2rem;
    padding-right: 1.6rem;
  }
  .evt-benefit.evt-03-benefit .evt-top strong {
    width: 11.7rem;
    height: 3.2rem;
    font-size: 1.3rem;
    margin-left: -3.2rem;
    padding-right: 1.6rem;
  }
  .evt-benefit .evt-top::before {
    width: 1.4rem;
    height: 1.1rem;
    right: 1.5rem;
    top: 2.9rem;
    background-size: contain;
  }
  .evt-benefit .evt-mid {
    margin-top: 2.4rem;
    grid-template-columns: 1fr;
  }
  .evt-benefit .evt-mid .left {
    width: 100%;
    order: 1;
  }
  .evt-benefit .evt-mid .left .evt-mid-top {
    width: 74%;
    margin: 0 auto;
    font-size: 2.6rem;
    text-align: center;
  }
  .evt-benefit .evt-mid .left .evt-mid-top p {
    max-width: 80%;
    margin: 1.2rem auto 0;
    font-size: 1.3rem;
  }
  .evt-benefit .evt-mid .right {
    width: 26.4rem;
    height: 14rem;
    margin: 3.3rem auto 2.4rem;
    background-size: 100% 185px;
    order: 2;
    grid-row: inherit;
  }
  .evt-benefit.evt-02-benefit .evt-mid .right {
    margin: 14rem auto 2.4rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .right {
    width: 26.4rem;
    height: 14rem;
    margin: 8rem auto 5.5rem;
    background-size: 100% 185px;
    order: 2;
    grid-row: inherit;
  }

  .evt-benefit.evt-01-benefit .evt-mid .right {
    width: 26.4rem;
    height: 14rem;
    margin: 8.3rem auto 2.4rem;
  }
  .evt-benefit .evt-mid .right .evt-ticket-01 {
    max-width: 26.4rem;
    width: 100%;
    height: 14rem;
    background-size: 100% 100%;
    margin: 0 auto;
    position: relative;
  }
  .evt-benefit.evt-01-benefit .evt-mid .right::after {
    width: 17rem;
    height: 14rem;
    background-size: contain;
    right: -1rem;
    top: -6.3rem;
    transform: rotate(350deg);
  }
  .evt-benefit.evt-03-benefit .evt-mid .left .evt-mid-top strong::after {
    width: 4.8rem;
    height: 4.8rem;
    background-size: contain;
    right: -0.5rem;
    top: -6rem;
  }
  .evt-benefit.evt-02-benefit .evt-mid .right .evt-ticket-01 {
    background-size: 100% 100%;
  }
  .evt-benefit.evt-03-benefit .evt-mid .left .evt-mid-top p {
    max-width: 80%;
  }
  .evt-benefit.evt-02-benefit .evt-mid .right::after {
    height: 21.4rem;
    max-width: 100vw;
    background-size: contain;
    top: -13.5rem;
    right: -11rem;
  }

  .evt-benefit .evt-mid .evt-mid-bottom {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    order: 3;
    gap: 0.5rem;
    grid-row: auto;
    padding: 0 2.4rem;
  }
  .evt-benefit.evt-01-benefit .evt-mid .evt-mid-bottom .evt-right,
  .evt-benefit.evt-01-benefit .evt-mid .evt-mid-bottom .evt-left {
    width: 50%;
  }
  .evt-benefit.evt-02-benefit .evt-mid .evt-mid-bottom {
    display: block;
  }
  .evt-benefit.evt-02-benefit .evt-mid .evt-mid-bottom .evt-left {
    width: 100%;
  }
  .evt-benefit.evt-02-benefit .evt-mid .evt-mid-bottom .evt-left button {
    width: 100%;
    height: 4rem;
    border: 0;
    background: #0f1249;
    color: var(--white);
    font-size: 1.4rem;
  }
  .evt-benefit.evt-01-benefit .evt-mid .evt-mid-bottom .evt-right button,
  .evt-benefit.evt-01-benefit .evt-mid .evt-mid-bottom .evt-left button {
    width: 100%;
    height: 4rem;
    font-size: var(--fs-1-6);
    font-weight: 700;
  }
  .evt-benefit.evt-01-benefit .evt-mid .evt-mid-bottom .evt-right span,
  .evt-benefit.evt-01-benefit .evt-mid .evt-mid-bottom .evt-left span {
    font-size: 1.2rem;
  }
  .evt-benefit .evt-mid .right h3.logo {
    width: 6.4rem;
    height: 1.4rem;
    top: 2.2rem;
    left: 2rem;
  }
  .evt-benefit.evt-01-benefit .evt-mid .right .mid {
    left: 2rem;
    top: 5.5rem;
    padding: 0 0 0 0rem;
  }
  .evt-benefit .evt-mid .right .mid img {
    width: 10.5rem;
    height: 3.6rem;
  }

  .evt-benefit.evt-02-benefit .evt-mid .left {
    min-height: auto;
  }

  .evt-benefit.evt-02-benefit .evt-mid .right .mid img {
    width: 10.3rem;
    height: 3.8rem;
  }
  .evt-benefit .evt-mid .right .mid span {
    margin-left: 0;
  }
  .evt-benefit .evt-mid .right p.sub-txt {
    max-width: 26.4rem;
    left: 2rem;
    bottom: 1.6rem;
    font-size: 1.2rem;
    line-height: var(--line-1-4);
  }
  .evt-benefit.evt-02-benefit .evt-mid {
    grid-template-columns: 1fr;
  }
  .evt-benefit.evt-02-benefit .evt-mid .right .mid {
    left: 2rem;
    top: 5rem;
    padding: 0 0 0 0rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .right .mid {
    left: 2rem;
    top: 5rem;
    padding: 0 0 0 0rem;
  }
  .evt-benefit.evt-02-benefit .evt-mid .left .evt-mid-top p {
    max-width: 100%;
  }
  .evt-benefit.evt-02-benefit .evt-mid .left .evt-mid-top p + p {
    max-width: 76%;
  }
  .evt-benefit.evt-02-benefit .evt-mid .left .evt-mid-top strong::after {
    width: 4.8rem;
    height: 4.8rem;
    background-size: contain;
    top: -2rem;
    right: -1rem;
  }
  .evt-benefit.evt-03-benefit .evt-sub-01 {
    width: 16.8rem;
    height: 13.4rem;

    background-size: contain;
    top: -5.9rem;
  }
  .evt-benefit.evt-03-benefit .evt-sub-01 span {
    font-size: 1.2rem;
    left: 4.8rem;
    top: 2.5rem;
    padding-left: 0.4rem;
    font-weight: 600;
  }
  .evt-benefit.evt-03-benefit .evt-sub-02 {
    width: 12rem;
    height: 5.2rem;
    background: url(../images/event/2024-01/evt_40.svg?20240502) no-repeat 0 0;
    background-size: contain;
    bottom: -2.5rem;
  }
  .evt-benefit.evt-03-benefit .evt-sub-02 span {
    font-size: 1.2rem;
    left: 1.5rem;
    top: 2.6rem;
    padding-left: 0rem;
    font-weight: 400;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom {
    max-width: 31.2rem;
    padding: 0;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code span {
    font-size: 1.2rem;
    margin-right: 0.8rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code em {
    width: 8rem;
    height: 2.4rem;
    font-size: 1.2rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code button {
    width: 8rem;
    height: 2.4rem;
    font-size: 1.2rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-copy-code {
    height: 5.6rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left button {
    min-width: 31.2rem;
    width: 100%;
    height: 4rem;
    font-size: var(--fs-1-4);
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left button::after {
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 0.6rem;
    background-size: contain;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left button {
    width: 100%;
    height: 4rem;
    border: 0;
    background: #3aaa35;
    color: var(--white);
    font-size: 1.4rem;
    position: relative;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left button::after {
    content: "";
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    background: url(../images/event/2024-01/evt_13.svg?20240502) no-repeat 0 0;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left span {
    font-size: 1.2rem;
    color: #666;
    margin-top: 0.4rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-right {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-right span {
    font-size: 1.2rem;
    color: #666;
    margin-top: 0.4rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-right button {
    width: 100%;
    height: 4rem;
    border: 0;
    background: #ef2e93;
    color: var(--white);
    font-size: 1.4rem;
    position: relative;
  }
  .evt-benefit.evt-03-benefit
    .evt-mid
    .evt-mid-bottom
    .evt-right
    button::after {
    content: "";
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    background: url(../images/event/2024-01/evt_13.svg?20240502) no-repeat 0 0;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-right span {
    font-size: 1.2rem;
    color: #666;
    margin-top: 0.4rem;
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left button {
    min-width: 31.2rem;
    width: 100%;
    height: 4rem;
    font-size: var(--fs-1-4);
  }
  .evt-benefit.evt-03-benefit .evt-mid .evt-mid-bottom .evt-left button::after {
    width: 2.4rem;
    height: 2.4rem;
    margin-left: 0.6rem;
    background-size: contain;
  }
  .evt-benefit.evt-03-benefit .evt-mid {
    grid-template-columns: 1fr;
  }

  .evt-01-bottom .tit {
    font-size: 2.7rem;
    line-height: 120%;
    max-width: 63%;
    margin: 0 auto;
    font-weight: 700;
  }

  .evt-01 .evt-btn-01 button {
    width: 31.2rem;
    font-size: 2rem;
  }
  .evt-01-pop .evt-pop-mid {
    padding-top: 3.4rem;
  }

  .evt-01-pop .evt-pop-mid .evt-resulte-01 {
    width: 29.6rem;
    height: 4.2rem;
    grid-template-columns:   18rem 1fr;
    background-size: 100%;
  }
  .evt-01-pop .evt-pop-mid .evt-resulte-01 span {
    font-size: var(--fs-1-4);
    font-weight:   500;
  }
  .evt-01-pop .evt-pop-mid .evt-resulte-01 em {
    font-size: var(--fs-1-8);
  }

  .evt-01-pop .evt-pop-mid .evt-resulte-02 .bg-0 {
    height: 30rem;
    overflow: hidden;
    position: relative;
  }
  .evt-01-pop .evt-pop-mid .evt-resulte-02 .bg-0 img {
    width: 100%;
    height: 100%;
    transform: translateX(0%) scale(1.1);
  }
  .evt-01-pop .evt-pop-mid .evt-resulte-02 .bg-1 {
    width: 20rem;
    top: 9rem;
  }
  .evt-01-pop .evt-pop-mid .evt-resulte-02 .bg-1 img {
    width: 100%;
  }
  .evt-01-pop .evt-pop-mid .evt-resulte-02 .card {
    width: 20rem;
    top: 9rem;
  }

  .evt-01-002 .evt-tab-triger-list li a {
    flex-direction: column;
  }
  .evt-01-002 .evt-tab-triger-list {
    width: 95%;
    margin: 0 auto;
  }
  .evt-01-002 .tabTarget {
    border-radius: 0;
  }
  .evt-01-002 .evt-group-box-01 {
    width: 90% !important;
    margin: 4rem auto 0;
  }
  .evt-group-box-01 .top {
    width: 9.5rem;
    height: 4.7rem;
    line-height: 5.5rem;
    top: -4.7rem;
    margin: 0 0 0 -4.75rem;
  }
  .evt-01-pop .evt-icon-mark {
    width: 10rem;
    height: 3.2rem;
    top: 63%;
    background-size: cover;
    font-size: var(--fs-1-6);
    line-height: 3.2rem;
  }
  .evt-01-pop .evt-icon-mark em {
    font-size: 1.2rem;
  }
  .evt-01-pop .evt-btn-wrap {
    flex-direction: column;
    align-items: center;
    margin-top: -15rem;
  }

  .evt-01-pop .evt-pop-mid .evt-resulte-02 {
    top: -6rem;
  }

  .evt-01-002 .evt-group-box-01 .detail {
    width: 100%;
  }
  .evt-01-001::after,
  .evt-01-001::before {
    display: none;
  }
  .evt-01-002 .evt-tab-triger-list li {
    width: 50%;
    padding: 0.8rem 0;
  }
  .evt-01-002 .evt-tab-triger-list li a {
    text-align: center;
    font-size: var(--fs-1-6);
    gap: 0.25rem;
  }
  .evt-01-002 .evt-tab-triger-list li a::before {
    width: 2rem !important;
    height: 2rem !important;
    background-size: 2rem 2rem !important;
  }
  .evt-01-002 .evt-group-box-01 .detail {
    margin: 1.2rem 0 0;
  }
  .evt-01-002 .evt-group-box-01 .top-tit {
    height: auto;
    padding: 0.8rem 1.2rem;
  }
  .evt-01-002 .evt-group-box-01 .top-cont {
    width: 100%;
    flex-direction: column;
    gap: 2.4rem;
  }
  .evt-01-002 .evt-group-box-01 .top-cont.top-type-01 {
    margin-bottom: 21rem;
  }
  .evt-01-002 .evt-group-box-01 .top-cont.top-type-02 {
    margin-bottom: 15rem;
  }
  .evt-01-002 .evt-group-box-01 .top-cont .right {
    max-inline-size: 100%;
    text-align: center;
  }
  .evt-01-002 .evt-group-box-01 .top-cont .right::before {
    display: none;
  }
  .evt-01-002 .evt-group-box-01 {
    background-image: none;
    margin-bottom: 7rem;
  }
  .evt-01-002 .evt-group-box-01 .bottom-cont {
    flex-direction: column;
  }
  .evt-roulette {
    width: 100%;
    height: 100%;
    min-height: 54rem;
  }
  .evt-roulette img {
    width: 100%;
  }
  .btn.btn-green {
    width: 90%;
  }
  .notice-pop {
    width: 90%;
    left: 5% !important;
    margin-left: 0 !important;
  }
  .notice-pop .top {
    padding: 0.8rem 1.2rem;
    font-size: var(--fs-2-2);
  }
  .notice-pop .contents {
    padding: 2rem 2rem 1.2rem;
    font-size: var(--fs-1-6);
  }
  .notice-pop .bottom {
    padding: 0 0 2.8rem;
  }
  .event-2025 .evt-01-pop {
    width: 90%;
    max-width: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .event-2025 .evt-pop-top {
    padding: 1.6rem;
  }

  .event-2025 .evt-pop-top h2 {
    font-size: 1.8rem;
  }

  .event-2025 .evt-pop-mid {
    padding: 2.4rem;
  }
  .evt-01-pop .content-area .roulette .circle img {
    width: 100%;
  }
  .evt-01-pop .content-area .roulette {
    width: 90%;
    height: auto;
  }
  .evt-01-pop .content-area .roulette button {
    width: 5rem;
    height: 5rem;
    background-size: 5rem 5rem;
    margin: -3.5rem 0 0 -2.5rem;
    position: absolute;
    left: 50%;
    top: 50%;
  }
  .evt-01-001 .ticket-box.blue,
  .evt-01-pop .ticket-box,
  .evt-01-001 .ticket-box {
    width: 28rem;
    height: 4rem;
    background-size: 28rem 4rem;
    grid-template-columns: 18rem 1fr;
  }
  .evt-01-pop .ticket-box,
  .evt-01-001 .ticket-box span {
    font-size: var(--fs-1-4);
    line-height: var(--line-1-4);
  }
  .evt-01-pop .ticket-area {
    width: 28rem;
  }
  .evt-01-pop .ticket-box,
  .evt-01-001 .ticket-box strong {
    font-size: var(--fs-1-8);
    line-height: var(--line-1-8);
  }
  .evt-01-pop .top-area h3 {
    font-size: var(--fs-1-8);
  }
  .evt-01-pop .content-area .roulette::after {
    width: 3.55rem;
    height: 3.55rem;
    background-size: 3.55rem 3.55rem;
    margin-left: -1.775rem;
    top: 1.5rem;
  }
  .evt-01-pop .resulte-box .btn-area {
    flex-direction: column;
    gap: 1rem;
  }
  .evt-01-pop .resulte-box .won-image {
    display: none;
  }
  .evt-01-pop .resulte-box .btn-area button {
    font-size: var(--fs-1-6);
    line-height: var(--line-1-8);
  }
  .evt-01-002 .tabTarget.tab-detail-view {
    border-radius: 0;
  }
  .detail-tab {
    max-width: 90%;
    padding: 4rem 0;
  }
  .detail-tab .top {
    gap: 1rem;
    flex-direction: column;
  }
  .detail-tab h3 {
    font-size: var(--fs-2-4);
    margin: 2.4rem 0 1.2rem;
  }
  .evt-01-002 .tabTarget.tab-detail-view {
    margin-bottom: 0;
  }
  .text-box-01 {
    min-width: auto;
    max-width: 90%;
    left: 5%;
    top: 5rem;
    transform: translateX(0%);
    font-size: var(--fs-2-4);
    padding: 0.4rem 2rem;
    line-height: var(--line-3-2);
    text-align: center;
  }
  .text-box-02 {
    width: 100%;
    left: 0;
    transform: translateX(0%);
    text-align: center;
  }
  .event-2025 .evt-mid {
    margin: 0 auto 7rem;
    position: relative;
    display: flex;
    justify-content: center;
  }

  /* Remove conflicting mobile styles - use the main mobile styles above */

  /* .evt-01-top .evt-interation-wrap ul li:nth-child(1) {
        scale: 70%;
        left: 0; top: 0;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(2) {
        left: 10rem; top: .5rem;
        scale: 80%;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(3) {
        left: 20rem; top: 1.5rem;
        scale: 70%;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(4) {
        left: 30rem; top: 1rem;
        scale: 80%;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(5) {
        left: 40rem; top: 0rem;
        scale: 70%;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(6) {
        left: 50rem; top: 0;
        scale: 80%;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(7) {
        left: 60rem; top: 1rem;
        scale: 70%;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(8) {
        left: 70rem; top: -1rem;
        scale: 80%;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(9) {
        left: 80rem; top: -2rem;
        scale: 70%;
    }
    .evt-01-top .evt-interation-wrap ul li:nth-child(10) {
        left: 90rem; top: -1rem;
        scale: 80%;
    } */
}
/* Stock Logos Animation - Desktop and Mobile */
.evt-01-top .stock-logos-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
 }

.evt-01-top .logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  width: 192px;
  height: 254px;
}

.evt-01-top .logo-item img {
  width: 192px;
  height: 254px;
  object-fit: contain;
  animation: logo-rotate 3s ease-in-out infinite;
}

/* Different animation delays and vertical positioning for each logo */
.evt-01-top .logo-item:nth-child(1) img {
  animation-delay: 0s;
}

.evt-01-top .logo-item:nth-child(2) {
  transform: translateY(3rem);
}

.evt-01-top .logo-item:nth-child(2) img {
  animation-delay: 0.5s;
}

.evt-01-top .logo-item:nth-child(3) img {
  animation-delay: 1s;
}

.evt-01-top .logo-item:nth-child(4) {
  transform: translateY(3rem);
}

.evt-01-top .logo-item:nth-child(4) img {
  animation-delay: 1.5s;
}

/* Logo gentle rotation animation for desktop */
@keyframes logo-gentle-rotate {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* E:EVENT 01 */



.top-tt-1 img {
  max-height: 14.1rem;
}

.evt-benefit-transaction {
  margin-top: 10rem !important;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tablet/Medium screen styles (600px to 1000px) */
@media screen and (min-width: 600px) and (max-width: 1000px) {
  
  /* Responsive evt-01-mid-top-text images for tablet */
  .event-2025 .evt-01-mid-top-text {
    max-width: 80%;
    width: auto;
    height: auto;
    margin: 3rem auto;
  }

  /* Responsive evt-benefit-transaction images for tablet */
  .event-2025 .evt-benefit-transaction {
    max-width: 80%;
    width: auto;
    height: auto;
    margin: 3rem auto;
    margin-top: 10rem !important;
  }

  /* Responsive layout for evt-mid containers on tablet */
  .event-2025 .evt-mid {
    flex-direction: column;
    height: auto;
    gap: 1.5rem;
  }

  .event-2025 .evt-mid-left-1,
  .event-2025 .evt-mid-right-1 {
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
    max-height: none;
  }

  .event-2025 .evt-mid-left-1 {
    margin-left: auto;
    margin-right: auto;
  }

  .event-2025 .evt-mid-right-1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .event-2025 .evt-mid-left-1 img,
  .event-2025 .evt-mid-right-1 img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: none !important;
  }

  /* Ensure consistent responsive sizing for PC/mobile objects in evt-mid-left-1 */
  .event-2025 .evt-mid-left-1 .pc-object,
  .event-2025 .evt-mid-left-1 .mo-object {
    max-width: 60%;
    width: auto;
    height: auto;
    max-height: none !important;
    object-fit: contain;
  }

  /* Specific responsive sizing for benefit_trans_text_left.svg - resize to 80% on tablet */
  .event-2025 .evt-mid-left-1 img[src*="benefit_trans_text_left.svg"] {
    max-width: 60% !important;
    width: 80% !important;
    height: auto;
    max-height: none !important;
    object-fit: contain;
  }
}

/* Mobile screens below 500px - MUST be after larger media queries to override */
@media screen and (max-width: 500px) {
  
  .event-2025 .evt-mid-left-1 {
    margin-top: 15rem !important;
  }
}

  .evt-stock-history-group .section-title .mo-object {
    width: 70%;
  }	

.benefit-1-left-text {
	max-width: 80% !important;	
}

.event-2025 .benefit-1-left-text .mo-object {
	max-height: none !important;
}

/* Group Styling - Make evt-benefit-info-group and evt-benefit-transaction-group identical */
.event-2025 .evt-benefit-info-group,
.event-2025 .evt-benefit-transaction-group {
  margin-bottom: 3rem;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.event-2025 .evt-benefit-info-group .evt-01-mid-top-text,
.event-2025 .evt-benefit-transaction-group .evt-01-mid-top-text {
  margin-bottom: 2rem;
}

.event-2025 .evt-benefit-info-group .evt-mid,
.event-2025 .evt-benefit-transaction-group .evt-mid {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  margin-top: 8rem;
}

/* Responsive styling for groups */
@media screen and (max-width: 1000px) {
  .event-2025 .evt-benefit-info-group,
  .event-2025 .evt-benefit-transaction-group {
    margin-bottom: 2rem;
    padding: 1.5rem 0;
  }
  
  .event-2025 .evt-benefit-info-group .evt-01-mid-top-text,
  .event-2025 .evt-benefit-transaction-group .evt-01-mid-top-text {
    margin-bottom: 1.5rem;
  }
}

@media screen and (min-width: 600px) and (max-width: 1000px) {
  .event-2025 .evt-benefit-info-group,
  .event-2025 .evt-benefit-transaction-group {
    margin-bottom: 2.5rem;
    padding: 1.8rem 0;
  }
}

@media screen and (max-width: 500px) {

.event-2025 .evt-bottom {
	padding-top: 16rem !important;
}
  .event-2025 .evt-detail {
  
    height: 77rem;
    }
  
      .event-2025 .evt-mid-right-1 img {
	margin-right: 0;
    }
  
  .benefit-2 .evt-mid-left-1 {
    justify-content: center !important;
}

  .evt-mid {
  margin-top: 4rem !important;}

  .benefit-2 {
    margin-top: 19rem !important;
  }

  .evt-con-detail, .evt-benefit {
    padding: 6.5rem 0;
  }
}

/* Desktop styles - rotation animation only, no scroll */
@media screen and (min-width: 1001px) {
  .evt-01-top .stock-grid {
    display: none !important;
  }

  /* Desktop animated logos */
  .evt-01-top .stock-logos-animation {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
    margin: 4rem auto 0;
    max-width: 900px;
    animation: none; /* No animation on desktop */
    width: auto; /* Reset width on desktop */
    padding-right: 0; /* Reset padding on desktop */
  }
  
  /* Handle logo-container in desktop mode */
  .evt-01-top .logo-container {
    display: flex;
    justify-content: center;
    gap: 3rem;
    animation: none;
    width: auto;
  }

  /* Hide duplicate logos in desktop mode */
  .evt-01-top .logo-item.duplicate {
    display: none !important;
  }

  .evt-01-top .logo-item {
    width: 192px;
    height: 254px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .evt-01-top .logo-item img {
    width: 192px;
    height: 254px;
    object-fit: contain;
    animation: logo-rotate 3s ease-in-out infinite;
  }


}

/* Additional mobile infinite scroll styles */
@media screen and (max-width: 1000px) {
  /* Show duplicate logos only on mobile */
  .evt-01-top .logo-item.duplicate {
    display: flex;
  }
  
  /* Define keyframes for the infinite scroll animation 
     The animation is now based on the container width not hardcoded values */
  @-webkit-keyframes infiniteScroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }
  
  /* Ensure duplicated items maintain proper styling */
  .evt-01-top .logo-item:nth-child(even) {
    transform: translateY(3rem) !important;
  }
}


.notice-pop {
    display: none;
    border-radius: 1.6rem;
    overflow: hidden;
    background: var(--white);
    position: absolute;
    left: 50%; top: 20%;
}
.notice-pop .contents {
    width: auto;
    padding: 4rem 4rem 2.4rem;
    background: var(--white);
    text-align: center;
    font-size: var(--fs-2-4);
    line-height: var(--line-3-2);
    color: var(--gray-lev10);
}
.notice-pop .top {
    padding: 1.6rem 2.4rem;
    background: var(--gray-lev6);
    text-align: center;
    font-size: var(--fs-3-2);
    color: var(--blue);
    font-weight: 700;
}
.notice-pop .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:3rem;
    padding: 0 0 5.6rem;
}

/* Stock Popup Styling - Matching the Image Design */
.stock-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 400px;
  height: 500px;
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #C084FC 100%);
  border-radius: 16px;
  display: none;
  z-index: 99999;
  color: white;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.stock-popup.show {
  display: block !important;
}

.stock-popup .close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.stock-popup .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.stock-popup .popup-header {
  text-align: center;
  padding: 40px 20px 30px;
}

.stock-popup .popup-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.stock-popup .ticket-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 30px 40px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stock-popup .ticket-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.stock-popup .ticket-count {
  font-size: 13px;
  font-weight: 700;
  color: #FF6B9D;
}

.stock-popup .stock-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 50px 0;
}

.stock-popup .stock-cube {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.stock-popup .stock-cube::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 12px;
  z-index: -1;
}

.stock-popup .stock-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.stock-popup .stock-code {
  font-size: 16px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.stock-popup .shares-info {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stock-popup .action-button {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%);
  border: none;
  border-radius: 20px;
  padding: 14px 24px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.3);
}

.stock-popup .action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .stock-popup {
    width: 90%;
    max-width: 350px;
    height: 450px;
  }
  
  .stock-popup .popup-header {
    padding: 30px 20px 25px;
  }
  
  .stock-popup .popup-header h2 {
    font-size: 18px;
  }
  
  .stock-popup .stock-cube {
    width: 100px;
    height: 100px;
  }
  
  .stock-popup .stock-logo {
    width: 40px;
    height: 40px;
  }
}

.benefit-2 .evt-mid-left-1 {
	justify-content: left;
}

.benefit-2 {
	margin-top: 12rem;
}

/* Received Stock Popup Styles */
.received-stock-popup {
	max-width: 100rem;
	width: 100%;
	height: 723px;
	position: fixed;
	padding-left: 20px;
	padding-right: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 16px;
	background: none;
	box-sizing: border-box;
	display: none;
	flex-direction: column;
	z-index: 1000;
}

.received-stock-top {
	height: 96px;
	position: relative;
	display: flex;
	padding: 16px 40px;
	border-radius: 16px 16px 0px 0px;
	align-items: center;
	justify-content: center;
	background: linear-gradient(262.89deg, rgba(187, 203, 242, 0.05) -1.02%,
		rgba(25, 38, 69, 0.25) 34.37%, rgba(255, 255, 255, 0.1) 40.34%,
		rgba(25, 38, 69, 0.25) 46.31%), #0e0847;
	background-size: cover;
	background-position: center;
}

.received-stock-top h2 {
	font-size: 32px;
	font-weight: 700;
	color: white;
	text-align: center;
	margin: 0;
}

.received-stock-top .close-btn {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.received-stock-contents {
	flex: 1;
	height: auto;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 0px 0px 16px 16px;
	/* Background will be set dynamically via CSS custom property */
	background: var(--modal-body-bg) no-repeat;
	background-size: cover;
	background-position: center;
}

.ticket-info {
	/* Background will be set dynamically via CSS custom property */
	background: var(--modal-body-stock-info-bg) no-repeat;
	padding: 20px 27px 20px 65px;
	width: 400px;
	margin: 0 auto 40px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.available-ticket-label {
	font-size: 20px;
	color: white;
	text-align: left;
}

.ticket-count {
	font-size: 24px;
	font-weight: bold;
	color: #ff6b97;
}

.stock-details {
	position: relative;
	width: 80%;
	max-width: 600px;
	height: 350px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.stock-image-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.stock-image {
	position: absolute;
	overflow: hidden;
}

.stock-image.large-left {
	width: 150px;
	height: 225px;
	left: 0;
	bottom: 70px;
	z-index: 1;
}

.stock-image.large-center {
	width: 260px;
	height: 338px;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	z-index: 2;
}

.stock-image.large-right {
	width: 150px;
	height: 225px;
	right: 0;
	bottom: 70px;
	z-index: 1;
}

.stock-image.small-top {
	width: 150px;
	height: 48px;
	left: 50%;
	transform: translateX(-50%);
	top: 290px;
	z-index: 3;
}

.stock-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.stock-image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	color: white;
	text-align: center;
	z-index: 4;
}

.stock-name {
	font-size: 32px;
	font-weight: bold;
	color: white;
	display: block;
	margin-bottom: 5px;
}

.stock-amount {
	font-size: 24px;
	color: white;
	background: linear-gradient(90deg, #f5a7c8 0%, #ece2f1 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 5px 20px;
	border-radius: 30px;
	display: inline-block;
}

.stock-logo {
	display: none; /* Hiding the original logo since we're using images */
}

.stock-text {
	display: none; /* Hiding the original text since we'll use overlay */
}

.received-stock-bottom {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.use-ticket-btn {
	background: white;
	color: #6049b9;
	font-size: 20px;
	font-weight: bold;
	padding: 15px 50px;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.use-ticket-btn:hover {
	background: #f0f0f0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-apply-event {
	width: 31.2rem;
	height: 5.6rem;
	line-height: 5.6rem;
	border-radius: 1.2rem;
	background: linear-gradient(90deg, #a20564 10.27%, #e84ea6 106.46%);
	color: var(--white);
	font-size: 2rem;
	font-weight: 700;
	margin-top: 5rem;
}

.btn-apply-event span {
	margin-left: 30px;
}

@media screen and (max-width: 500px) {
	.received-stock-popup {
		padding-left: 10px;
		padding-right: 10px;
	}
	.received-stock-contents {
		/* Mobile background will be set dynamically via CSS custom property */
		background: var(--modal-body-bg-mobile) no-repeat;
		background-size: cover;
		background-position: center;
		padding: 0;
		padding-top: 35px;
		padding-bottom: 35px;
	}
	.ticket-info {
		background-size: contain;
		padding: 17px 25px 17px 60px;
		width: 90%;
	}
	.stock-image.large-left {
		width: 146px;
		height: 174px;
		left: -4.1rem;
	}
	.stock-image.large-right {
		width: 146px;
		height: 174px;
		right: -9.9rem;
	}
	.stock-image.large-left img {
		object-fit: inherit;
		width: 60%;
		height: 100%;
	}
	.stock-image.large-right img {
		object-fit: inherit;
		width: 60%;
		height: 100%;
	}
	.stock-image.large-center {
		width: 232px;
		height: 294px;
	}
	.small-top img {
		object-fit: contain;
	}
}