main .container {
  width: 1200px;
}

.button {
  height: 52px;
  line-height: 52px;
  width: fit-content;
  margin: 0 auto;
  width: 218px;
  font-size: 17px;
  text-align: center;
}

#hero {
  background-image: url('../../images/benefits/back.png');
  background-image: image-set(url('../../images/benefits/back.png') 1x,
  url('../../images/benefits/back@2x.png') 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  margin-top: 15px;
}

#hero .container {
  padding-right: 100px;
  padding-left: 100px;
}

#hero .inner {
  width: fit-content;
}

#hero .decor {
  background-image: url('../../images/benefits/hero-decor.png');
  background-image: image-set(url('../../images/benefits/hero-decor.png') 1x,
  url('../../images/benefits/hero-decor@2x.png') 2x);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 219px;
  height: 124px;
  position: absolute;
  top: -85px;
  left: -90px;
  padding: 0 0 24px 40px;
  line-height: 1em;
}

#hero .decor p {
  transform: rotate(-6.7deg);
}

#hero .decor sup {
  font-size: 62%;
}

#hero .decor sub {
  bottom: 0;
  left: -3px;
}

#hero .decor .top {
  font-size: 14px;
  line-height: 19px;
}

#hero .decor .bottom {
  font-size: 39px;
  line-height: 1em;
}

#hero .title {
  font-size: 65px;
}

#hero .button {
  margin: 19px auto 15px auto;
}

@keyframes confetti-slow {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}
@keyframes confetti-medium {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}
@keyframes confetti-fast {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}

.confetti-container {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:1;
  pointer-events:none;
}

.confetti {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}
.confetti--animation-slow {
  animation: confetti-slow 5.25s linear 1 forwards;
}
.confetti--animation-medium {
  animation: confetti-medium 4.75s linear 1 forwards;
}
.confetti--animation-fast {
  animation: confetti-fast 4.25s linear 1 forwards;
}

#benefits {
  padding-top: 39px;
}

@media screen and (min-width: 769px) {
  #benefits .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    gap: 40px;
  }

  #benefits .item {
    width: calc((100% / 3) - 27px);
  }
}

#benefits .container {
  width: 1200px;
  z-index: 2;
}

#benefits.relative .title {
  font-size: 55px;
}

#benefits .title em {
  font-size: 60px;
}

#benefits .image {
  flex-basis: 59%;
  padding-top: 21px;
}

#benefits .item {
  height: 215px;
  background-image: url('../../images/benefits/card-back.png');
  background-image: image-set(url('../../images/benefits/card-back.png') 1x,
  url('../../images/benefits/card-back@2x.png') 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#benefits .item p {
   color: #222222 !important;
   font-size: 21px;
}

#benefits .item ul li {
  width: fit-content;
  margin: 0 auto;
  font-size: 14px;
}

#benefits .item ul li:first-child {
  margin-top: 5px;
}

#benefits .item p {
  font-size: 21px;
  line-height: 24px;
  margin-bottom: 20px;
  color: #000 !important;
}

#benefits .swiper-button-next,
#benefits .swiper-button-prev {
  display: none;
}

#benefits .swiper-button-next,
#benefits .swiper-button-prev {
  /* background-image: url("https://www.gomajik.com/themes/majik/css/redesign/../../images/swiper-arrow.png");
  background-size: 7px 11px;
  background-position: center;
  background-repeat: no-repeat; */
  width: 37.5px;
  height: 37.5px;
  border-radius: 50%;
  border: 1px solid var(--gray);
  top: calc(50% + 5px);
  background-color: #fff;
}

#benefits .swiper-button-next {
  transform: scale(-1);
}

#benefits .swiper-button-prev::after,
#benefits .swiper-button-next::after {
  display: none;
}

#benefits .front {
  inset: 0;
}

#benefits .back,
#benefits .front {
  transition: 0.6s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

#benefits .back {
  inset: 0;
  transform: rotateY(-180deg);
  padding: 20px 15px;
}

#benefits .back {
  padding: 20px 10px;
}

#benefits .item:hover .back,
#benefits .item:active .back,
#benefits .item.hover .back {
  transform: rotateY(0deg);
}

#benefits .item:hover .front,
#benefits .item:active .front,
#benefits .item.hover .front {
  transform: rotateY(180deg);
}

#benefits .back p {
  font-size: 14px;
  line-height: 18px;
}

#benefits .back p {
  margin-bottom: 0;
}

#benefits .back .title {
  font-size: 21px;
  line-height: 24px;
}

#benefits .back .title {
  margin-bottom: 0;
  padding-bottom: 0;
}

#download .container {
  background-color: #f5f5f5;
  gap: 52px;
}

#download .title {
  font-size: 29px;
  line-height: 40px;
}

#download .button {
  margin: 0;
}

#banner-vip .container {
  background-image: url('../../images/benefits/vip-back.png');
  background-image: image-set(url('../../images/benefits/vip-back.png') 1x,
  url('../../images/benefits/vip-back@2x.png') 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#banner-vip .container > * {
  position: relative;
  z-index: 2;
}

#banner-vip .container img {
  position: absolute;
  bottom: -4px;
  right: 43px;
  z-index: 1;
}

#banner-vip p {
  font-size: 22px;
  line-height: 30px;
  color: #fff;
}

#banner-vip .title {
  font-size: 45px;
  line-height: 1em;
}

#banner-vip .title span {
  font-size: 55px;
}

#banner-vip .note {
  font-size: 15px;
}

#banner-vip .button {
  margin-top: 6px;
}

#note p {
  font-size: 8px;
  line-height: 12px;
}

#popups.sent .jp-inner {
  display:none;
}

@media screen and (max-width: 991px ) {
  .bread {
    padding: 0;
  }

  #download .container {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px ) {
  .bread,
  .bread a {
    font-size: 13px;
  }

  #hero .container {
    padding: 33px 20px 18px 20px;
  }

  #hero .title {
    font-size: 38px;
    line-height: 45px;
    max-width: 335px;
  }

  #hero .decor {
    width: 165px;
    height: 93px;
    top: -82px;
    left: -19px;
  }

  #hero .decor .top {
    font-size: 11px;
  }

  #hero .decor .bottom {
    font-size: 29px;
  }

  #benefits {
    padding-top: 4px;
  }

  #benefits.relative .title {
    margin: 40px auto 31px auto;
  }

  #benefits.relative .title,
  #benefits.relative .title em {
    font-size: 31px;
    line-height: 38px;
  }

  #benefits.relative .title em {
    display: block;
  }

  #benefits .item {
    height: 255px;
  }

  #benefits .image {
    flex-basis: 88px;
    padding-top: 0;
  }

  #benefits .swiper {
    width: calc(100% + 30px);
    margin-left: -15px;
    position: relative;
  }

  #benefits.relative .swiper .title {
    font-size: 21px;
    margin: 0;
    line-height: 1.3;
  }

  #benefits .swiper-button-next, #benefits .swiper-button-prev {
    display: block;
    background-color: #f1f1f1;
  }

  #benefits .swiper-button-next, #benefits .swiper-button-prev {
    transform: none;
    top: 51%;
  }

  #download {
    margin: 20px 0;
    padding: 0;
  }
  
  #download .container {
    gap: 0;
    padding: 30px 15px;
  }

  #download .title {
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 14px;
  }

  #download .button {
    width: 188px;
  }

  #banner-vip .container img {
    display: none;
  }

  #banner-vip .title {
    font-size: 35px;
    line-height: 39px;
  }

  #banner-vip p {
    font-size: 15px;
    line-height: 25px;
  }

  #banner-vip .note {
    font-size: 12px;
  }

  #note {
    margin: 16px 0;
  }

  #note p {
    font-size: 9px;
    line-height: 14px;
    margin: 0;
  }
}