.eventWrap {
  max-width: 1920px;
  margin: 0 auto;
}
.eventWrap .innerSection {
  max-width: 1000px;
  width: calc(100% - 20px);
  margin: 0 auto;
  padding: 0;
}
.eventWrap * {
  font-family: "GmarketSans", "Noto Sans KR" !important;
  font-weight: 500;
  line-height: 1.3;
}
.eventWrap .gBold {
  font-weight: 700;
}

.eventWrap .eventMain {
  position: relative;
  background-image: url("https://www.jobaba.net/resource/images/eventImg/eventInfo126/main-pc-bg.png");
  background-repeat: no-repeat;
  background-position: center bottom -25px, top center;
  /* background-position-x: calc(50% - 40px), center; */
}
.eventWrap .eventMain .innerSection {
  padding-top: 50px;
}
.eventWrap .eventMain .mainVisual {
  margin-bottom: 30px;
  text-align: center;
}
.eventWrap .eventMain h2 {
  display: inline-block;
}
.eventWrap .eventMain h2 img {
  width: 100%;
}

.event-pattern {
  background-image: url(/resource/images/eventImg/eventInfo126/main1_bottom_pattern.png);
  background-repeat: repeat-x;
  height: 40px;
}

.eventWrap .event01 {
  background: url(/resource/images/eventImg/eventInfo126/0611_pattern.png);
}
.eventWrap .event01 .innerSection {
  padding-top: 50px;
}
.eventWrap .event01 .infoBox {
  padding: 0px 60px 40px;   /* 높이 수정됨 */
  position: relative;
}

.eventWrap .event01 .infoBox .titWrap {
  width: 100%;
  /* position: absolute; */
  top: -45px;
  left: 50%;
  /* transform: translateX(-50%); */
  text-align: center;
  margin-bottom: 40px;
}
.eventWrap .event01 .infoBox.list01,
.eventWrap .event01 .infoBox.list02 {
  margin: 70px 0 0 0;
}

.eventWrap .event01 .infoBox.list03 {
  padding: 0px 0x 50px 0px;
  text-align: center;
}

.eventWrap .event01 .infoBox.list03 .card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0;
  list-style: none;
  margin: 40px auto;
  max-width: 1000px;
}

.eventWrap .event01 .infoBox.list03 .card-grid li {
  width: calc(33.333% - 13.33px); /* 3열 기준 간격 보정 */
  box-sizing: border-box;
}

.eventWrap .event01 .infoBox.list03 .card-grid li img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* 반응형 대응 */
@media (max-width: 768px) {
  /* 2열 */
  /* .eventWrap .event01 .infoBox.list03 .card-grid li {
    width: calc(50% - 10px); 
  } */
  .eventWrap .event01 .infoBox.list03 .card-grid li {
    width: 75%; /* 1열 */
  }
}

/* ========================= */

.eventWrap .event02 {
  background: url(/resource/images/eventImg/eventInfo126/section3_bg.png) top center #6c1e5a no-repeat;
}
.eventWrap .event02 .innerSection {
  padding: 80px 0 50px;
}

.evTicket .image-container {
  position: relative;
  width: 100%;
  max-width: 400px; /* 원하는 최대 사이즈 */
  display: inline-block;
}
.evTicket .image-container img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 25px;
}
.evTicket .overlay-text {
  position: absolute;
  top: 15%;
  right: 22%;
  /* font-size: clamp(24px, 3vw, 28px); */
  /* font-size: clamp(24px, calc(1rem + 1vw), 28px); */
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem);
  font-weight: bold;
  color: #FFDA00;
  line-height: 1;
  pointer-events: none;
  letter-spacing: -3px;
}

/* 룰렛 */
.eventWrap #gameContainer {
  width: 821px;
  height: 821px;
  text-align: center;
  margin: auto;
  position: relative;
  margin-top: 120px;
  zoom: 1;
}
.eventWrap #gameContainer .gameShadow::before {
  content: "";
  width: 804px;
  height: 384px;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: url(/resource/images/eventImg/eventInfo126/roulette02.png) bottom center no-repeat;
  z-index: 1;
}
.eventWrap #gameContainer .cursor {
  width: 77px;
  height: 114px;
  position: absolute;
  top: -30px;
  left: 50%;
  background: url(/resource/images/eventImg/eventInfo126/ev_obj.png) no-repeat;
  transform: translateX(-50%);
  z-index: 999;
}
.eventWrap #gameContainer .board_on {
  width: 821px;
  height: 821px;
  position: relative;
  background: url(/resource/images/eventImg/eventInfo126/roulette.png) no-repeat center;
  z-index: 2;
  background-size: contain;
}
.eventWrap #gameContainer .board_start {
  width: 235px;
  height: 235px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 55;
  transform: translate(-50%, -50%);
}
.eventWrap #gameContainer .board_on img {
  position: absolute;
}

.eventWrap #gameContainer .board_on img:nth-child(1) {
  /*꽝꽝*/
  left: 200px;
  top: 172px;
  transform: rotate(-45deg);
}

.eventWrap #gameContainer .board_on img:nth-child(2) {
  left: 138px;
  top: 325px;
  transform: rotate(-90deg);
}

.eventWrap #gameContainer .board_on img:nth-child(3) {
  /* 메로나 */
  left: 180px;
  bottom: 185px;
  transform: rotate(-135deg);
}
.eventWrap #gameContainer .board_on img:nth-child(4) {
  /*상품권 */
  left: 342px;
  bottom: 100px;
  transform: rotate(180deg);
}
.eventWrap #gameContainer .board_on img:nth-child(5) {
  /* 초콜릿 */
  right: 170px;
  bottom: 170px;
  transform: rotate(135deg);
}
.eventWrap #gameContainer .board_on img:nth-child(6) {
  right: 118px;
  top: 323px;
  transform: rotate(90deg);
}
.eventWrap #gameContainer .board_on img:nth-child(7) {
  right: 185px;
  top: 155px;
  transform: rotate(45deg);
}
.eventWrap #gameContainer .board_on img:nth-child(8) {
  left: 338px;
  top: 100px;
}

.eventWrap .evTicket {
  text-align: center;
}
.eventWrap .evTicket p {
  color: #000000;
  font-size: 28px;
}
.eventWrap .evTicket p span {
  color: #ff5a00;
}

.eventWrap .giftInfo {
  width: 330px;
  position: relative;
  margin: 80px auto 0 auto;
  text-align: center;
  box-sizing: border-box;
}

.eventWrap .giftInfo table,
.eventWrap .giftInfo td,
.eventWrap .giftInfo th {
  border: none;
}

.eventWrap .giftInfo table {
  min-width: 250px;
  margin-bottom: 30px;
  border: none;
  border-spacing: 0;
}

#page-content
  > div
  > article.event02
  > div
  > div.cont02
  > div.giftInfo
  > div.titWrap {
  margin: 30px 0 0 0;
}

.eventWrap .giftInfo table th {
  padding: 16px 0;
  color: #000;
  font-size: 18px;
  background-color: #fbcbfd;
}

.eventWrap .giftInfo table td {
  padding: 16px 0;
  color: #ffffff;
  font-size: 18px;
  border-bottom: 1px solid #ffffff;
  text-align: center;
}

/* 페이지네이션 디자인 */
.eventWrap ul.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 10px 0 10px 20px;
  list-style: none;
  margin: 0;
  margin-bottom: 20px;
}

.eventWrap ul.pagination li {
  display: inline-block;
}

.eventWrap ul.pagination li a {
  display: block;
  padding: 4px 6px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  /* transition: all 0.2s ease; */
}

.eventWrap ul.pagination li a:hover {
  color: #ffd51e;
}

.eventWrap ul.pagination li.active a {
  color: #ffd51e;
  font-weight: bold;
}

.eventWrap ul.pagination li.disabled a {
  pointer-events: none;
  color: #fff;
}

/* <<, <, >, >> 버튼 공통 스타일 */
ul.pagination li.btn_first a,
ul.pagination li.btn_prev a,
ul.pagination li.btn_next a,
ul.pagination li.btn_end a {
  font-weight: bold;
}

/* 당첨 내역 타이틀  */
#page-content
  > div
  > article.event02
  > div
  > div.cont02
  > div.giftInfo
  > div.titWrap
  > h2 {
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 20px 0;
  max-width: 70%;
  font-size: 20px;
}

/* update0616
 2025.06.16 추가 - 대략 365 행 정도에 새로 삽입
*/
#page-content > div > article.event02 > div > div.cont02 > div:nth-child(2) {
  margin: 50px 0;
  text-align: center;
}

.eventWrap .event03 {
  background: url(/resource/images/eventImg/eventInfo126/0611_pattern_grd.png) top center rgb(233, 177, 221);
  background-size: cover;
}
.eventWrap .event03 .innerSection {
  padding: 120px 0 100px;
}

.eventWrap .event03 .itemBox {
  padding: 50px 50px 50px 42px;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  margin-bottom: 40px;
  position: relative;
  background-size: auto;
}

.eventWrap .event03 .itemBox.box01 {
  background: #fff url(/resource/images/eventImg/eventInfo126/box1_bg_deco.png) no-repeat left bottom;
}

.eventWrap .event03 .itemBox.box02 {
  background: #fff url(/resource/images/eventImg/eventInfo126/box2_bg_deco.png) no-repeat left bottom;
}

.eventWrap .event03 .itemBox.box03 {
  background: #fff url(/resource/images/eventImg/eventInfo126/box3_bg_deco.png) no-repeat left bottom;
}

.eventWrap .event03 .itemBox .titWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.eventWrap .event03 .itemBox .titWrap {
  padding: 10px 0 0 10px;
}

.eventWrap .event03 .itemBox .titWrap p {
  margin: 0;
}

.eventWrap .event03 .itemBox .titWrap p:nth-child(1),
.eventWrap .event03 .itemBox .titWrap p:nth-child(2) {
  display: inline-block;
}

.eventWrap .event03 .itemBox .titWrap p:nth-child(2) {
  padding-left: 20px;
}

.eventWrap .event03 .itemBox .titWrap p:nth-child(3) {
  flex-basis: 100%;
  padding: 10px 0 20px 180px;
  font-size: 24px;
  font-weight: bold;
}

#movoTo > div > div > div.itemBox.box02 > div.event-pc > div.titWrap > p.txt,
#movoTo > div > div > div.itemBox.box03 > div.titWrap > p.txt {
  font-size: 24px;
  font-weight: bold;
  flex-basis: 100%;
  padding: 10px 0 20px 180px; /* 두 번째 이미지와의 간격 조정 */
  text-align: center;
}

/* ===================== */
.eventWrap .eventInfo {
  background: url(/resource/images/eventImg/eventInfo126/0611_pattern.png);
  padding: 90px 0px;
  text-align: center;
  position: relative;
}

/* ===================== */
.eventWrap .evFooter {
  background: #572233;
}
.eventWrap .evFooter .innerSection {
  padding: 70px 0;
}
.eventWrap .evFooter h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 24px;
  font-family: "Noto Sans KR" !important;
  font-weight: 900;
}
.eventWrap .evFooter li::before {
  content: "\00B7";
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
}
.eventWrap .evFooter li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 6px;
  color: #fff;
  font-size: 16px;
  word-break: keep-all;
  font-family: "Noto Sans KR" !important;
  font-weight: 300;
}

/* @media all and (max-width: 1100px){
 .eventWrap .eventMain .evInfo::before,
 .eventWrap .eventMain .evInfo::after { content: none; }
 } */

/* @media all and (max-width: 1024px){
 .eventWrap .event01 .infoBox { padding: 90px 10px 40px; }
 } */

/* 기본값: PC 기준 */

.eventInfo .event-mo {
  display: none;
}

article.event01 > div > div > div.infoBox.list01 > div.event-mo {
  display: none;
}

article.event01 > div > div > div.infoBox.list02 > div.event-mo {
  display: none;
}

p.title_mo {
  display: none;
}

#movoTo > div > div > div.itemBox.box02 > div.event-mo {
  display: none;
}

/* caption */
#page-content
  > div
  > article.event02
  > div
  > div.cont02
  > div.giftInfo
  > div.titWrap
  > h2 {
  text-align: center;
  margin: 0 auto;
  padding: 0 0 0 10px;
  min-width: 330px;
}

#page-content
  > div
  > article.event01
  > div
  > div
  > div.infoBox.list03.aos-init.aos-animate {
  margin-top: 30px;
}

#page-content
  > div
  > article.event02
  > div
  > div.cont02
  > div.giftInfo
  > table {
  margin: 0 auto;
}

/* update ver2 새로 추가  */
.mainVisual-mo {
  display: none;
}

@media all and (max-width: 768px) {
	
	/* 새로 추가 */
  .mainVisual {
    display: none;
  }
  .mainVisual-mo {
    display: block;
    width: 100%;
    background: url("/resource/images/eventImg/eventInfo126/main1_768.png") no-repeat center center;
    background-size: cover;
    padding-top: 50px;
    padding-bottom: 50px;
    max-height: 200px;
    /* margin-top: 50px; */
  }
	
  .eventInfo .event-pc {
    display: none;
  }

  article.event01 > div > div > div.infoBox.list01 > div.event-pc {
    display: none;
  }

  article.event01 > div > div > div.infoBox.list02 > div.event-pc {
    display: none;
  }

  #movoTo > div > div > div.itemBox.box03 > div.titWrap > p.title_pc {
    display: none;
  }

  .eventInfo .event-mo {
    display: block;
  }

  p.title_mo {
    display: block;
  }

  #movoTo > div > div > div.itemBox.box02 > div.event-pc {
    display: none;
  }

  #movoTo > div > div > div.itemBox.box02 > div.event-mo {
    display: block;
  }

  article.event01 > div > div > div.infoBox.list01 > div.event-mo {
    display: block;
  }

  #page-content
    > div
    > article.event02
    > div
    > div.cont02
    > div.giftInfo
    > div.titWrap
    > h2 {
    padding: 10px o;
  }
  #page-content
    > div
    > article.event01
    > div
    > div
    > div.infoBox.list01.aos-init.aos-animate {
    margin-top: 30px;
  }

  #page-content
    > div
    > article.event01
    > div
    > div
    > div.infoBox.list02.aos-init.aos-animate {
    margin-top: 30px;
    text-align: center;
  }

  #page-content
    > div
    > article.event02
    > div
    > div.cont02
    > div.giftInfo
    > div.titWrap
    > h2 {
    text-align: center;
    margin: 0 auto;
    padding: 0 0 0 10px;
  }

  #page-content
    > div
    > article.event01
    > div
    > div
    > div.infoBox.list03.aos-init.aos-animate {
    margin-top: 30px;
  }

  article.event01 > div > div > div.infoBox.list02 > div.event-mo {
    display: block;
  }

  .event-pattern {
    background-image: url(/resource/images/eventImg/eventInfo126/main1_bottom_pattern.png);
    background-repeat: repeat-x;
    height: 25px;
    background-size: contain;
  }

  .eventWrap .eventMain::after {
    bottom: -22px;
    background-size: 100% 50px;
  }
  .eventWrap .eventMain h2 img {
    max-width: 500px;
  }

  .eventWrap .event01 .innerSection {
    padding: 10px;
  }
  .eventWrap .event01 .infoBox {
    padding: 10px 0 20px 0;
  }

  .eventWrap .event02 {
    background-position: top -60px center;
  }

  /* 수정됨 */
  .eventWrap #gameContainer {
    margin-top: 100px;
    zoom: 0.95;
    /* zoom: 0.7; */ /* before */
  }

  .eventWrap .event03 .itemBox .titWrap {
    flex-direction: column;
    padding: 10px;
  }

  .eventWrap .event03 .itemBox .titWrap p:nth-child(1),
  .eventWrap .event03 .itemBox .titWrap p:nth-child(2),
  .eventWrap .event03 .itemBox .titWrap p:nth-child(3) {
    display: block;
    padding-left: 0;
    flex-basis: auto;
    text-align: center;
  }

  .eventWrap .event03 .itemBox .titWrap p:nth-child(3) {
    padding: 10px 0;
    font-size: 20px;
  }

  .eventWrap .event03 .itemBox a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }

  #movoTo > div > div > div.itemBox.box03 > div.titWrap > p.txt {
    display: block;
    text-align: center;
    padding: 0;
  }
}

@media all and (max-width: 640px) {
	
	/* 새로 추가 */
  .mainVisual {
    display: none;
  }
  .mainVisual-mo {
    display: block;
    width: 100%;
    /* background: url("/resource/images/eventImg/eventInfo126/main1_s_640.png")
      no-repeat center center; */
    background-size: contain;
    padding-top: 50px;
    padding-bottom: 50px;
    max-height: 200px;
  }
	
  .event-pattern {
    background-image: url(/resource/images/eventImg/eventInfo126/main1_bottom_pattern.png);
    background-repeat: repeat-x;
    height: 15px;
    background-size: contain;
  }

  .eventWrap .eventMain .innerSection {
    padding-top: 0px;
  }

  .eventWrap .eventMain::after {
    bottom: -32px;
    background-size: 100% 30px;
  }
  .eventWrap .eventMain h2 img {
    max-width: 250px;
  }

  /* .eventWrap .paging {
    display: none;
  } */

  .eventWrap .event01 .innerSection {
    padding: 60px 0 30px;
  }

  .eventWrap .event02 .innerSection {
    padding: 30px 0 30px;
  }
  .eventWrap .evTicket p {
    font-size: 20px;
  }
  /* 수정됨 */
  .eventWrap #gameContainer {
    margin-top: 60px;
    zoom: 0.55; /* 회전판 */
  }
  .eventWrap .giftInfo .titWrap {
    height: 40px;
  }
  .eventWrap .giftInfo .titWrap p {
    padding-top: 0;
    font-size: 16px;
  }
  .eventWrap .giftInfo {
    margin: 60px auto 0;
  }
  .eventWrap .giftInfo table th {
    padding: 10px 0;
    font-size: 14px;
  }
  .eventWrap .giftInfo table td {
    padding: 10px 0;
    font-size: 14px;
  }
}

@media all and (max-width: 450px) {
	
	/* 새로 추가 */
  .mainVisual {
    display: none;
  }
  .mainVisual-mo {
    /* update*/
    display: block;
    width: 100%;
    /* background: url("/resource/images/eventImg/eventInfo126/main1_s_450.png")
      no-repeat center center; */
    background-size: contain;
    padding-top: 50px;
    padding-bottom: 50px;
    max-height: 200px;
  }
	
  /* 수정됨 */
  .eventWrap #gameContainer {
    /* update ver2 */
    margin-top: 50px;
    /* margin-left: -2%; */
    zoom: 0.43; /* 회전판 */
    /* zoom: 0.3; */ /*Before*/
  }
}
/* ================================== */

/* 애니메이션 1 */
.heart {
  width: 30px;
  margin: 0 10px;
}

@keyframes floatUp {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

.floating-up {
  animation: floatUp 0.7s ease-in-out infinite;
}

.floating-down {
  animation: floatDown 0.7s ease-in-out infinite;
}

/* 애니메이션 2 */
.board_start {
  position: relative;
  width: 259px;
  height: 259px;
  border-radius: 50%;
  overflow: hidden;
}

.board_start a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.btn-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.btn-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  border-radius: 50%;
  transition: opacity 0.5s ease-in-out;
}

.bg1 {
  animation: fadeOut 1.2s ease-in-out infinite;
  z-index: 1;
}

.bg2 {
  animation: fadeIn 1.2s ease-in-out infinite;
  z-index: 2;
}

/* fadeIn / fadeOut */
@keyframes fadeOut {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}

/* shine 효과 영역 (중앙만 마스킹) */
.shine-area {
  position: absolute;
  width: 170px;
  height: 170px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  pointer-events: none;
  clip-path: circle(50% at 50% 50%);
  z-index: 3;
}

/* shine span */
.shine {
  position: absolute;
  top: 0;
  left: -150px;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shineEffect 1.5s linear infinite;
  opacity: 0.7; /* 전체 광택의 투명도 */
}

.shine.delay {
  animation-delay: 0.75s;
}

@keyframes shineEffect {
  0% {
    left: -150px;
  }
  100% {
    left: 100%;
  }
}
/* ================================== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* 어두운 반투명 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup {
  background: white;
  padding: 30px;
  border-radius: 10px;
  max-width: 436px;
  /* width: 90%; */
  width: 70%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  border: 5px solid #FF3978;
  text-align: center;
}

.popup h2 {
  color: #ff3978;
}

.popup p {
  margin-bottom: 20px;
}

.popup button {
  padding: 5px 22px;
  border-radius: 0px;
  background-color: #999;
  color: white;
  font-size: 15px;
}

/* 숨김 클래스 */
.hidden {
  display: none;
}