main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
}

main > section {
  position: relative;
}

main a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

main img {
  display: block;
  width: 100%;
  height: auto;
}

.ds-only {
  display: none;
}

.holder {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(10px);
  z-index: 999;
  transform: translateY(-100%);
}

header.visible {
  transform: translateY(0);
  transition: transform 0.4s ease;
}

header .logo {
  width: auto;
  height: 32px;
}

.hero {
  padding-top: 64px;
}

.hero .holder {
  gap: 24px;
}

.hero .bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1280px;
  z-index: -1;
}

.hero .section-title-container > div {
  text-align: center;
}

.hero .section-title-container > div .logo {
  padding-bottom: 8px;
  margin: 0 auto;
  width: auto;
  height: 48px;
}

.hero .section-title-container > div .sub-title {
  position: relative;
  display: inline-block;
  padding-top: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.36px;
}

.hero .section-title-container > div .sub-title:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.50);
  content: '';
}

.hero .section-title-container .title {
  background: linear-gradient(90deg, #8F6A31 0%, #BC9656 22.04%, #FFE196 55.1%, #BC9656 88.16%, #8F6A31 110.2%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 40px;
  font-weight: 900;
  line-height: 40px;
  letter-spacing: 2.4px;
}

.hero .affiliate-badge {
  display: flex;
  align-items: center;
  align-self: center;
}

.hero .affiliate-badge .badge {
  position: relative;
  width: 62px;
  z-index: 1;
}

.hero .affiliate-badge .badge p {
  position: absolute;
  top: 29px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  font-family: var(--font-roboto-condensed), sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 8px;
  letter-spacing: -0.08px;
  text-align: center;
  background: linear-gradient(180deg, #E0C397 0%, #8F7958 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .affiliate-badge .tail {
  position: relative;
  min-width: 100px;
  height: 44px;
  padding: 3px 0;
  margin-left: -20px;
  --tail-gradient: linear-gradient(90deg, #B08E65 0%, #FEE1AC 20%, #FFFFC7 30%, #7D684F 50%, rgba(48, 39, 32, 0.60) 80%, rgba(0, 0, 0, 0.00) 100%);
}

.hero .affiliate-badge .tail:before,
.hero .affiliate-badge .tail:after,
.hero .affiliate-badge .tail > div:before,
.hero .affiliate-badge .tail > div:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-image: linear-gradient(90deg, #B08E65 0%, #FEE1AC 20%, #FFFFC7 30%, #7D684F 50%, rgba(48, 39, 32, 0.60) 80%, rgba(0, 0, 0, 0.00) 100%);
  content: '';
}

.hero .affiliate-badge .tail:after,
.hero .affiliate-badge .tail > div:after {
  top: auto;
  bottom: 0;
}

.hero .affiliate-badge .tail > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 0 30px;
}

.hero .affiliate-badge .tail > div:before,
.hero .affiliate-badge .tail > div:after {
  height: 1px;
}

.hero .affiliate-badge .tail > div .userName {
  color: #D4D4D4;
  font-size: 8px;
  line-height: 10px;
  letter-spacing: 0.24px;
}

.hero .affiliate-badge .tail > div .userName:only-child {
  color: #FFF;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.3px;
}

.hero .affiliate-badge .tail > div .bonusCode {
  color: #FEE78A;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.42px;
}

.hero .embla {
  width: 100%;
  max-width: 760px;
  margin: 44px auto 0;
}

.hero .affiliate-badge + .embla {
  margin-top: auto;
}

.hero .embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
}

.hero .embla__slide {
  transform: translate3d(0, 0, 0);
  flex: 0 0 190px;
}

.hero .embla__slide .wrap {
  transition: .4s transform;
  transform-origin: center bottom;
}

.hero .embla__viewport {
  height: 100%;
}

.hero .embla__slide.is-prev2 .wrap {
  transform: rotate(-11.5deg) scale(.9);
}

.hero .embla__slide.is-prev .wrap {
  transform: rotate(-7.641deg) scale(.9);
}

.hero .embla__slide.is-next .wrap {
  transform: rotate(7.641deg) scale(.9);
}

.hero .embla__slide.is-next2 .wrap {
  transform: rotate(11.5deg) scale(.9);
}

.hero .embla__dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.hero .embla__dots .embla__dot {
  width: 6px;
  height: 6px;
  background: rgba(217, 217, 217, 0.30);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: .3s;
}

.hero .embla__dots .embla__dot.embla__dot--selected {
  width: 24px;
  background: #D9D9D9;
  border-radius: 999px;
}

.hero .card {
  position: relative;
  transition: .4s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border-radius: 16px;
  user-select: none;
}

.hero .card img {
  display: block;
}

.hero .card .front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2px;
  /* translateZ 로 .back 보다 앞에 두어 동일 평면(z=0) 정렬 실패를 방지한다 */
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  background: linear-gradient(138deg, #f6d8a3, #3b2712 17%, #a88965 80%, #59482b);
  overflow: hidden;
}

.hero .card .front .image-holder {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.hero .card .front .image-holder .suit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.hero .card .front .text-holder {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 12px 4px;
}

.hero .card .front .text-holder .title {
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0.48px;
}

.hero .card .front .text-holder .title span {
  display: block;
}

.hero .card .front .text-holder .divider {
  width: 155px;
}

.hero .card .front .text-holder .divider + div {
  width: 100%;
}

.hero .card .front .text-holder .reward {
  display: inline-block;
  width: 100%;
  font-family: var(--font-roboto-condensed) sans-serif;
  font-size: 40px;
  font-weight: 900;
  line-height: 48px;
  background: linear-gradient(90deg, #BC9656 22.04%, #FFE196 55.1%, #BC9656 88.16%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero .card .front .text-holder .reward.lg,
.hero .card .front .text-holder .reward .lg {
  font-size: 42px;
  font-style: normal;
  font-weight: 900;
  line-height: 36px;
  letter-spacing: 1.26px;
}

.hero .card .front .text-holder .reward.sm,
.hero .card .front .text-holder .reward .sm {
  font-size: 30px;
  font-style: normal;
  font-weight: 900;
  line-height: 36px;
  letter-spacing: 0.9px;
}

.hero .card .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hero .card .back .image-holder {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.hero .card .back .image-holder:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #F00;
  border-radius: 16px;
  content: '';
}

.hero .card .back .promotion {
  position: absolute;
  top: 0;
  left: 0;
}

.hero .card .back .text-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 56px 20px 56px;
}

.hero .card .back .text-holder .title {
  color: #000;
  font-size: 22px;
  font-weight: 900;
  line-height: 28px;
  letter-spacing: 0.48px;
}

.hero .card .back .text-holder .title .sub {
  color: #676767;
}

.hero .card .back .text-holder .title span {
  display: inline-block;
  word-break: break-word;
}

.hero .card .back .text-holder ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  list-style: none;
}

.hero .card .back .text-holder ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-size: 14px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 0.28px;
}

.hero .card .back .text-holder ul li img {
  width: 20px;
}

.hero .card .back .emoji {
  position: absolute;
}

.hero .card .back .emoji.single {
  bottom: -28px;
  right: 0;
  width: 99px;
}

.hero .card .back .emoji.multi {
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
}

.hero .card.honeymoon .back .title span {
  font-size: 22px;
}

.hero .card.honeymoon .back .title span:first-child {
  position: relative;
}

.hero .card.honeymoon .back .title span:first-child:after {
  position: absolute;
  top: -10px;
  left: 90%;
  width: 36px;
  height: 32px;
  background: url('../images/promo-001/icon_heart.svg') no-repeat center;
  content: '';
}

.hero .card.honeymoon .back .title + span {
  display: block;
}

.hero .card.honeymoon .emoji {
  bottom: -25%;
}

.hero .card.deposit-bonus .emoji {
  width: 151px !important;
}

.hero .card.monthly-giveaway .emoji {
  bottom: -10%;
}

.hero .embla__slide.flip {
  z-index: 1;
}

.hero .embla__slide.flip .card {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  box-shadow: 0 0 40px 5px rgba(255, 0, 0, 0.75);
  transition: transform .3s, box-shadow .3s;
}

.hero .control-message {
  color: #D4D4D4;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.42px;
  margin-top: 4px;
}

.community {
  z-index: 1;
}

.community .bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 846px;
  z-index: -1;
}

.community .bg:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(0deg, #000 35.97%, rgba(0, 0, 0, 0.00) 91.67%);
  content: '';
}

.community .image-container {
  position: relative;
  width: 100%;
  height: 300px;
}

.community .ambassadors {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 558px;
  height: 100%;
}

.community .ambassadors > div {
  position: absolute;
  background-image: linear-gradient(180deg, rgba(31, 49, 63, 0.20) 0%, rgba(255, 196, 114, 0.20) 100%);
  backdrop-filter: blur(6px);
  border-radius: 30px / 40px;
  overflow: hidden;
}

.community .ambassadors > div:first-child {
  top: 32.21%;
  width: 8.96%;
  left: 90%;
}

.community .ambassadors > div:nth-child(2) {
  top: 8.6%;
  width: 7.17%;
  left: 87%;
}

.community .ambassadors > div:nth-child(3) {
  top: 23.15%;
  width: 10.22%;
  left: 75.7%;
}

.community .ambassadors > div:nth-child(4) {
  top: 45.5%;
  width: 15.41%;
  left: 67.71%;
}

.community .ambassadors > div:nth-child(5) {
  top: 8.56%;
  width: 17.20%;
  left: 53.7%;
}

.community .ambassadors > div:nth-child(6) {
  top: 51.22%;
  width: 24.01%;
  left: 41.14%;
}

.community .ambassadors > div:nth-child(7) {
  top: 13.4%;
  width: 14.34%;
  left: 33.4%;
}

.community .ambassadors > div:nth-child(8) {
  top: 42.9%;
  width: 20.25%;
  left: 18.5%;
}

.community .ambassadors > div:nth-child(9) {
  top: 22.28%;
  width: 6.09%;
  left: 23.7%;
}

.community .ambassadors > div:nth-child(10) {
  top: 7.32%;
  width: 47px;
  left: 15.25%;
}

.community .ambassadors > div:nth-child(11) {
  top: 36.24%;
  width: 10.22%;
  left: 6.9%;
}

.community .ambassadors > div:nth-child(12) {
  top: 62.5%;
  width: 7.89%;
  left: 0;
}

.community .features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  padding: 0 24px;
  margin: 0 auto;
}

.community .features > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-image: linear-gradient(0deg, rgba(38, 15, 15, 0.5) -4.4%, rgba(101, 17, 17, 0.5) 100%);
  backdrop-filter: blur(7.5px);
  border-radius: 8px;
  padding: 16px;
}

.community .features > li:after {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: linear-gradient(180deg, #D02525, #3C0E0E 35%) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  content: '';
  pointer-events: none;
}

/* Firefox */
@-moz-document url-prefix() {
  .community .features > li {
    border: 2px solid #7d1d1d;
  }
  .community .features > li:after {
    display: none;
  }
}

.community .features .title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #F02A2A;
  font-family: var(--font-roboto-condensed), sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.54px;
}

.community .features .title .icon {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(217, 79, 79, 0.25);
}

.community .features .title .icon img {
  width: 24px;
}

.community .features .description {
  position: relative;
  list-style: unset;
  padding-left: 24px;
  color: #D4D4D4;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.42px;
}

.community .features .prize-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
}

.community .features .prize-container:before,
.community .features .prize-container:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, rgba(143, 106, 49, 0), rgba(135, 104, 50, 0.5), rgba(142, 119, 60, 1), rgba(135, 104, 50, 0.5), rgba(143, 106, 49, 0));
  content: '';
}

.community .features .prize-container:after {
  top: auto;
  bottom: 0;
}

.community .features .prize-container .prize {
  display: flex;
  gap: 10px;
}

.community .features .prize-container .prize .icon {
  width: 24px;
  height: 24px;
}

.community .features .prize-container .prize span {
  font-family: var(--font-roboto-condensed), sans-serif;
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #BC9656 22.04%, #FFE196 55.1%, #BC9656 88.16%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.community .features .prize-container p {
  color: #D4D4D4;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.42px;
}

.wsop {
  padding-top: 24px;
}

.wsop .holder {
  position: relative;
  gap: 0;
  max-width: 768px;
  margin: 0 auto;
}

.wsop .btn-cta {
  position: relative;
  margin-top: 24px;
  z-index: 1;
}

.wsop .image-container {
  position: relative;
  height: 321px;
}

.wsop .image-container .bracelet {
  position: absolute;
  top: -114px;
  left: 50%;
  width: 1026px;
  transform: translateX(-50%);
}

.wsop .image-container .winner {
  position: absolute;
  top: -37px;
  left: 50%;
  transform: translateX(-67%);
  width: 600px;
}

.wsop .winner-info {
  position: absolute;
  bottom: 116px;
  right: 0;
  width: 373px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 12px 24px;
  text-align: right;
  background: linear-gradient(90deg, rgba(6, 6, 6, 0.00) 0.39%, rgba(0, 0, 0, 0.60) 50.05%);
}

.wsop .winner-info > * {
  width: 195px;
}

.wsop .winner-info .title {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.36px;
  background: linear-gradient(91deg, #AD9657 0%, #8F6431 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wsop .winner-info .name {
  color: #D4D4D4;
  font-size: 16px;
  font-style: italic;
  line-height: 20px;
  letter-spacing: 0.48px;
}

.rewards .section-title-container {
  max-width: 432px;
  margin: 0 auto;
}

.rewards .image-container {
  position: relative;
  height: 334px;
}

.rewards .image-container .image-holder {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 100%;
}

.rewards .gradient {
  position: absolute;
}

.rewards .gradient:nth-child(1) {
  left: 40%;
  width: 348px;
  height: 288px;
  background: radial-gradient(50% 50% at 50% 50%, #300 0%, rgba(0, 0, 0, 0.00) 100%);
}

.rewards .gradient:nth-child(2) {
  top: 4.5%;
  left: 28%;
  width: 281px;
  height: 253px;
  background: radial-gradient(50% 50% at 50% 50%, #945026 0%, rgba(0, 0, 0, 0.00) 100%);
}

.rewards .gradient:nth-child(3) {
  top: 0;
  left: 27%;
  width: 278px;
  height: 235px;
  background: radial-gradient(37.93% 34.45% at 39.43% 52.47%, #720000 0%, rgba(153, 0, 0, 0.00) 100%);
}

.rewards .pc {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  width: 300px;
}

.rewards .icon-aof {
  position: absolute;
  top: 3%;
  left: 30%;
  transform: rotate(15deg);
  width: 186px;
}

.rewards .icon-flip-go {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 40px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
  filter: blur(1.5px);
}

.rewards .icon-battle-royale {
  position: absolute;
  width: 100px;
  top: 44%;
  left: 26%;
}

.rewards .icon-rush-cash {
  position: absolute;
  top: 48%;
  left: 64%;
  width: 70px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
  filter: blur(1px);
}

.rewards .icon-spin-gold {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 130px;
}

.rewards .mobile {
  position: absolute;
  top: 10%;
  left: 54%;
  width: 120px;
}

.rewards .tablet {
  position: absolute;
  top: 50%;
  left: 26%;
  width: 140px;
}

@media only screen and (min-width: 768px) {
  main {
    gap: 56px;
  }

  main:not(.ggpnl) .ambassadors > div:nth-child(10) {
    top: 36%;
    width: 10.22%;
    left: 6%;
  }

  .hero .section-title-container > div {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
  }

  .hero .section-title-container > div .logo {
    padding-bottom: 0;
    margin: 0;
  }

  .hero .section-title-container > div .sub-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.48px;
    padding: 0 16px;
  }

  .hero .section-title-container > div .sub-title:after {
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
  }

  .hero .section-title-container .title {
    font-size: 50px;
    font-weight: 900;
    line-height: 40px;
    letter-spacing: 1.5px;
  }

  .community .bg {
    top: 110px;
    width: 1031px;
  }

  .community .holder {
    gap: 24px;
  }

  .community .image-container {
    height: 360px;
  }

  .community .ambassadors {
    width: 678px;
  }

  .community .section-title-container {
    order: -1;
  }

  .community .features {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: none;
    padding: 0 24px;
  }

  .community .features > li {
    flex: 1 0 354px;
    max-width: 490px;
  }

  .rewards .section-title-container {
    max-width: 928px;
  }

  .rewards .image-container {
    height: 321px;
  }

  .rewards .image-container .image-holder {
    width: 768px;
  }

  .rewards .gradient:nth-child(1) {
    top: -19%;
    left: 52%;
    width: 315px;
    height: 290px;
  }

  .rewards .gradient:nth-child(2) {
    top: 17.5%;
    left: 15%;
    width: 213px;
    height: 204px;
  }

  .rewards .gradient:nth-child(3) {
    top: -9%;
    left: 4%;
    width: 553px;
    height: 335px;
  }

  .rewards .pc {
    bottom: 0;
    transform: translateX(-50%);
    width: 56%;
  }

  .rewards .icon-aof {
    top: 7%;
    left: 0.6%;
    transform: none;
    width: 31.25%;
  }

  .rewards .icon-flip-go {
    top: -8%;
    left: 19.5%;
    width: 7.81%;
  }

  .rewards .icon-battle-royale {
    top: 60%;
    left: 1%;
    width: 18.23%;
  }

  .rewards .icon-rush-cash {
    top: 71%;
    left: 80%;
    width: 14.32%;
  }

  .rewards .icon-spin-gold {
    top: 33%;
    left: 73%;
    width: 28.65%;
  }

  .rewards .mobile {
    top: 6.5%;
    left: 67%;
    width: 24.01%;
  }

  .rewards .tablet {
    top: 9%;
    left: 4%;
    width: 29.95%;
  }
}

@media only screen and (min-width: 1024px) {
  .m-only {
    display: none;
  }

  .ds-only {
    display: block;
  }

  .hero {
    min-height: 724px;
  }

  .hero .affiliate-badge {
    position: absolute;
    top: 260px;
    left: 44px;
  }

  .hero .affiliate-badge .badge {
    width: 62px;
  }

  .hero .affiliate-badge + .embla,
  .hero .embla {
    max-width: none;
    margin-top: 24px;
  }

  .hero .embla__container {
    align-items: flex-start;
    justify-content: center;
    height: 100%;
  }

  .hero .embla__slide .wrap {
    transition: .4s transform;
    transform-origin: center bottom;
  }

  .hero .embla__slide:nth-child(1) .wrap {
    transform: rotate(-11.45deg) scale(.9);
    margin-top: 52px;
  }

  .hero .embla__slide:nth-child(2) .wrap {
    transform: rotate(-7.641deg) scale(.9);
    margin-top: 32px;
  }

  .hero .embla__slide:nth-child(3) .wrap {
    transform: scale(.9);
  }

  .hero .embla__slide:nth-child(4) .wrap {
    transform: rotate(7.641deg) scale(.9);
    margin-top: 32px;
  }

  .hero .embla__slide:nth-child(5) .wrap {
    transform: rotate(11.45deg) scale(.9);
    margin-top: 52px;
  }

  .hero .embla__slide:nth-child(1).flip .wrap {
    transform: rotate(-11.45deg) scale(1);
  }

  .hero .embla__slide:nth-child(2).flip .wrap {
    transform: rotate(-7.641deg) scale(1);
  }

  .hero .embla__slide:nth-child(3).flip .wrap {
    transform: scale(1);
  }

  .hero .embla__slide:nth-child(4).flip .wrap {
    transform: rotate(7.641deg) scale(1);
  }

  .hero .embla__slide:nth-child(5).flip .wrap {
    transform: rotate(11.45deg) scale(1);
  }

  .hero .embla__dots {
    display: none;
  }

  .hero .control-message {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
  }

  .community {
    margin-top: -56px;
  }

  .wsop {
    padding-top: 40px;
  }

  .wsop .holder {
    max-width: 1200px;
  }

  .wsop div:has(>.btn-cta) {
    margin-top: -40px;
    z-index: 1;
  }

  .wsop .image-container {
    height: 492px;
  }

  .wsop .image-container .bracelet {
    top: 50%;
    transform: translate(-46%, -50%);
    width: 1900px;
  }

  .wsop .image-container .winner {
    top: 50%;
    transform: translate(-71%, -50%);
    width: 943px;
  }

  .wsop .section-title-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 540px;
    text-align: left;
    gap: 24px;
  }

  .wsop .winner-info {
    position: absolute;
    top: 0;
    left: 40px;
    bottom: auto;
    align-items: flex-start;
    gap: 0;
    width: 280px;
    text-align: left;
    background: none;
  }

  .wsop .winner-info > * {
    width: 100%;
  }

  .wsop .winner-info .title {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.42px;
  }

  .wsop .winner-info .name {
    font-size: 20px;
    line-height: 42px;
    letter-spacing: 0.6px;
  }

  .ggpnl .wsop .section-title-container {
    left: 0;
    right: auto;
  }

  .ggpnl .wsop .image-container {
    height: 400px;
  }

  .ggpnl .wsop .image-container .bracelet {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }
}

@media only screen and (min-width: 1280px) {
  main {
    gap: 80px;
  }

  .hero {
    padding-top: 126px;
  }

  .hero .holder {
    position: relative;
    gap: 40px;
  }

  .hero .bg {
    width: 2560px;
  }

  .hero .section-title-container {
    gap: 16px;
  }

  .hero .section-title-container > div {
    gap: 12px;
  }

  .hero .section-title-container > div .logo {
    height: 62px;
  }

  .hero .section-title-container > div .sub-title {
    font-size: 36px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.72px;
    padding: 0 12px;
  }

  .hero .section-title-container > div .sub-title:after {
    height: 22px;
  }

  .hero .section-title-container .title {
    font-size: 78px;
    font-weight: 900;
    line-height: 78px;
    letter-spacing: 2.34px;
  }

  .hero .affiliate-badge {
    top: 240px;
    left: 0;
  }

  .hero .affiliate-badge .badge {
    width: 116px;
  }

  .hero .affiliate-badge .badge p {
    top: 52px;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: -0.16px;
  }

  .hero .affiliate-badge .tail {
    height: 68px;
    padding: 5px 0;
    margin-left: -32px;
  }

  .hero .affiliate-badge .tail:before,
  .hero .affiliate-badge .tail:after,
  .hero .affiliate-badge .tail > div:before,
  .hero .affiliate-badge .tail > div:after {
    height: 4px;
  }

  .hero .affiliate-badge .tail > div {
    padding: 0 40px;
  }

  .hero .affiliate-badge .tail > div:before,
  .hero .affiliate-badge .tail > div:after {
    height: 1px;
  }

  .hero .affiliate-badge .tail > div .userName {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.36px;
  }

  .hero .affiliate-badge .tail > div .userName:only-child {
    color: #FFF;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.48px;
  }

  .hero .affiliate-badge .tail > div .bonusCode {
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0.54px;
  }

  .hero .embla {
    height: 420px;
    margin-top: 0;
  }

  .hero .embla__slide {
    flex: 0 0 220px;
  }

  .hero .control-message {
    bottom: 30px;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.6px;
  }

  /*padding: 56px 32px 24px;*/
  .hero .card .back .text-holder {
    padding: 56px 24px 24px;
  }

  .hero .card .back .text-holder .title {
    font-size: 24px;
    font-weight: 900;
    line-height: 28px;
    letter-spacing: 0.48px;
  }

  .hero .card .back .text-holder ul li {
    font-size: 16px;
    font-weight: 900;
    line-height: 22px;
  }

  .hero .card .back .text-holder ul li {
    letter-spacing: 0.32px;
  }

  .community {
    margin-top: -24px;
  }

  .community .holder {
    gap: 0;
  }

  .community .bg {
    top: 138px;
    width: 1270px;
  }

  .community .btn-cta {
    margin-top: 24px;
  }

  .community .image-container {
    height: 475px;
  }

  .community .ambassadors {
    width: 902px;
  }

  .community .features {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 24px;
    padding: 0;
  }

  .community .features > li {
    flex: 1;
    max-width: none;
    padding: 24px;
    border-radius: 16px;
  }

  .community .features > li:after {
    border-radius: 16px;
  }

  .community .features > li:nth-child(1):after {
    background-image: linear-gradient(246deg, #D02525, #3C0E0E 35%);
  }

  .community .features > li:nth-child(2) {
    margin-top: 70px;
  }

  .community .features > li:nth-child(3):after {
    background-image: linear-gradient(125deg, #D02525, #3C0E0E 35%);
  }

  .wsop .section-title-container {
    width: 640px;
  }

  .rewards .section-title-container {
    max-width: 100%;
  }

  .rewards .image-container {
    height: 512px;
    margin-top: 24px;
  }

  .rewards .image-container .image-holder {
    width: 1200px;
  }
}

/*
    style.animations
*/
.ani-cover:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  opacity: 1;
  background-color: rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px);
  pointer-events: none;
  transition: opacity 1.25s ease-in-out;
}

.ani-cover.active:before {
  opacity: 0;
}

.hero .bg img {
  transform: translateY(-12px);
  transition: transform .65s ease-in-out;
}

.hero .btn-cta {
  opacity: 0;
  transition: opacity .65s 1.45s ease-in-out;
}

.hero .affiliate-badge {
  opacity: 0;
  transition: opacity .65s 1.7s ease-in-out;
}

.hero .embla__dots {
  opacity: 0;
  transition: opacity .65s 2s ease-in-out;
}

.hero .control-message {
  opacity: 0;
  transition: opacity .65s 2s ease-in-out;
}

.hero .bg.active img {
  transform: translateY(0);
}

.hero .active + .holder .btn-cta {
  opacity: 1;
}

.hero .active + .holder .affiliate-badge {
  opacity: 1;
}

.hero .active + .holder .embla__dots {
  opacity: 1;
}

.hero .active + .holder .control-message {
  opacity: 1;
}

.rewards .ani-cover:before {
  top: -40px;
  left: -40px;
  right: -40px;
}

@media only screen and (min-width: 768px) {
  .hero .holder {
    transition-duration: 1.6s;
  }
}

@media only screen and (min-width: 1280px) {
  .hero {
    min-height: 1025px;
    margin-bottom: -219px;
  }
}