@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap");

@font-face {
  font-family: 'DB Heavent Bold Condensed';
  src: url('../fonts/DB Heavent Bd Cond It v3.2.2.woff2') format('woff2'),
        url('../fonts/DB Heavent Bd Cond It v3.2.2.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Articles */
@font-face {
  font-family: 'DB Heavent Condensed';
  src: url('../fonts/DB Heavent Cond It v3.2.2.woff2') format('woff2'),
        url('../fonts/DB Heavent Cond It v3.2.2.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.color-ci {
  color: #194F90
}

.color-ci-2 {
  color: #C2A472
}

.color-ci-3 {
  color: #00d1ff
}

html,
body {
  width: 100%;
  padding: 0;
  -webkit-font-smoothing: antialiased
}

a,
a:hover,
a:active,
a:focus {
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: inherit
}

a {
  text-decoration: none !important;
  outline: none;
  transition: all 0.3s
}

p {
  margin: 0 0 15px
}

ul {
  list-style: none;
  padding: 0
}

body {
  font-family: "Prompt", sans-serif, sans-serif;
  font-size: 26px;
  line-height: 1.4;
  overflow-x: hidden;
  color: #fff;
  height: 100%;
  font-weight: normal;
  font-weight: 300;
  background: #194F90
}

button {
  background: none;
  border: 0
}

button:focus,
button:active,
input:focus,
input:active,
textarea:focus,
textarea:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important
}

textarea {
  resize: none;
  padding-top: 15px !important
}

select option {
  font-size: 13px
}

.relative {
  position: relative
}

.pad-100 {
  padding: 100px 0
}

@media (max-width: 991.98px) {
  .pad-100 {
    padding: 50px 0
  }
}

.pad-70 {
  padding: 70px 0
}

@media (max-width: 767.98px) {
  .pad-70 {
    padding: 50px 0
  }
}

.pad-70.bg-gray {
  background: #f3f2f2
}

.pad-70.bg-blue {
  background: #005eb8
}

.pad-30 {
  padding: 30px 0
}

.container-fluid {
  max-width: 1920px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto
}

.container.container-1000 {
  width: 100%;
  max-width: 1020px
}

.custom-control-input:checked~.custom-control-label::before {
  background: #194F90;
  border-color: #194F90
}

.text-center>img {
  display: inline-block
}

@media (min-width: 1320px) {
  .container {
    max-width: 1300px
  }
}

.container.container-1400 {
  width: 100%;
  max-width: 1520px;
  padding-left: 20px;
  padding-right: 20px
}

@media (max-width: 1600px) {
  .container.container-1600 {
    max-width: 1420px
  }
}

.hover-img {
  overflow: hidden;
  transition: all .6s ease;
  display: block
}

.hover-img img {
  transition: all .6s ease
}

.hover-img:hover img {
  transform: scale(1.1)
}

@media (max-width: 1199.98px) {
  .max-100 {
    max-width: 100%
  }
}

.img-affect {
  position: relative;
  overflow: hidden
}

.img-affect::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  height: 100%;
  background: #ffffff;
  transition: width 1s;
  transition: all 1000ms cubic-bezier(0.16, 0.01, 0.77, 1)
}

.img-affect.aos-animate::before {
  width: 0px
}

.wrapper-main {
  overflow-x: hidden
}

.cut-text-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.cut-text-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.cut-text-1 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 99
}

#preloader #status {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -125px;
  margin-top: -129.9px;
  width: 250px;
  height: 259.8px;
  background-image: url(../images/logo.svg);
  background-repeat: no-repeat;
  background-position: center
}

.container.container-1600 {
  width: 100%;
  max-width: 1550px;
  padding-left: 20px;
  padding-right: 20px
}

@media (max-width: 1599.98px) {
  .container.container-1600 {
    max-width: 1440px
  }
}

p {
  margin-bottom: 25px
}

.first-welcome {
  background-color: #194F90;
  left: 0;
  top: 0;
  width: 100%;
  position: relative
}

.first-welcome #stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0
}

.first-welcome .star {
  position: absolute;
  width: 15px;
  height: 15px;
  background: white;
  border-radius: 50%;
  filter: blur(0.3px);
  will-change: opacity, filter
}

.first-welcome .header {
  background: #154E91;
  background: linear-gradient(to bottom, #2bd2d6 0%, #1fa1d4 10%, #1b75bc 30%, #195ab0 60%, #154E91 100%)
}

.first-welcome .header .heading-wrap {
  position: relative;
  overflow: hidden;
  text-align: center
}

@media (max-width: 1600px) {
  .first-welcome .header .heading-wrap .logo {
    width: 80%
  }
}

@media (max-width: 1199.98px) {
  .first-welcome .header .heading-wrap .logo {
    width: 50%
  }
}

.first-welcome .header .container {
  display: flex;
  justify-content: center;
  height: 320px;
  padding-top: 50px
}

@media (max-width: 1600px) {
  .first-welcome .header .container {
    height: 280px
  }
}

@media (max-width: 1199.98px) {
  .first-welcome .header .container {
    height: 180px
  }
}

.first-welcome .container {
  position: relative;
  z-index: 1
}

.first-welcome .diq {
  margin-bottom: 50px
}

@media (max-width: 1320px) {
  .first-welcome .diq {
    width: 100%;
    max-width: 500px
  }
}

.instant {
  opacity: 0;
  transform: translateY(110px) scale(0.8);
  filter: blur(3px);
  will-change: transform, opacity, filter
}

.join-us {
  padding-top: 160px;
  position: relative;
  overflow: hidden
}

.join-us:after {
  content: "";
  width: 100vw;
  height: 160px;
  background: url(../images/radius-loyalty.png) no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}

.join-us::before {
  content: "";
  width: 100%;
  height: calc(100% - 160px);
  bottom: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, #addbff 0%, #bae4ff 25%, #c8eaff 50%, #dbf1ff 75%, #eef8ff 100%)
}

.join-us .join-inner {
  margin-top: -150px;
  position: relative;
  z-index: 5;
  background: url(../images/bg-loyalty-back.png) no-repeat center top 20%
}

.join-us .loyalty {
  margin-left: auto;
  margin-right: auto;
  max-width: 1197px;
  width: 100%;
  height: 897px;
  position: relative;
  background: url(../images/bg-loyalty.png) no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 50px
}

.join-us .loyalty.loyalty-th .light-loyalty {
  margin-top: -27%
}

@media (max-width: 1600px) {
  .join-us .loyalty {
    max-width: 1000px;
    height: 749px
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty {
    max-width: 800px;
    height: 600px
  }
}

.join-us .loyalty .star-js {
  position: absolute;
  z-index: 3;
  opacity: 0;
  transform: scale(0.7) translateY(20px);
  filter: blur(3px);
  will-change: transform, opacity, filter
}

@media (max-width: 1600px) {
  .join-us .loyalty .star-js img {
    width: 80%
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .star-js img {
    width: 50%
  }
}

@media (max-width: 767.98px) {
  .join-us .loyalty .star-js img {
    width: 32%
  }
}

.join-us .loyalty .star-js.star-top {
  left: 8%;
  top: 15%
}

.join-us .loyalty .star-js.star-middle {
  left: 27%;
  top: 28%
}

@media (max-width: 1600px) {
  .join-us .loyalty .star-js.star-middle {
    left: 22%
  }
}

.join-us .loyalty .star-js.star-bottom {
  left: 0;
  top: 76%
}

@media (max-width: 1600px) {
  .join-us .loyalty .star-js.star-bottom {
    top: 90%;
    left: -5%
  }
}

@media (max-width: 575.98px) {
  .join-us .loyalty .star-js.star-bottom {
    left: 3%
  }
}

.join-us .loyalty .light-loyalty {
  position: relative;
  margin-top: -20%
}

@media (max-width: 1600px) {
  .join-us .loyalty .light-loyalty {
    width: 600px
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .light-loyalty {
    width: 380px;
    margin-top: -23%
  }
}

@media (max-width: 767.98px) {
  .join-us .loyalty .light-loyalty {
    position: absolute;
    top: 42px
  }
}

.join-us .loyalty .dino {
  position: absolute;
  left: 100px;
  bottom: 144px
}

@media (max-width: 1600px) {
  .join-us .loyalty .dino {
    left: 50px;
    bottom: 75px
  }
}

@media (max-width: 767.98px) {
  .join-us .loyalty .dino {
    left: 10px
  }
}

.join-us .loyalty .dino .wrap-dino {
  position: relative
}

.join-us .loyalty .dino .wrap-dino .img-dino {
  position: relative;
  z-index: 1;
  will-change: transform
}

@media (max-width: 1600px) {
  .join-us .loyalty .dino .wrap-dino .img-dino {
    width: 75%
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .dino .wrap-dino .img-dino {
    width: 60%
  }
}

@media (max-width: 991.98px) {
  .join-us .loyalty .dino .wrap-dino .img-dino {
    width: 50%
  }
}

@media (max-width: 767.98px) {
  .join-us .loyalty .dino .wrap-dino .img-dino {
    width: 40%
  }
}

@media (max-width: 575.98px) {
  .join-us .loyalty .dino .wrap-dino .img-dino {
    width: 30%
  }
}

.join-us .loyalty .dino .wrap-dino .img-shadow {
  position: absolute;
  left: -120px;
  bottom: -47px;
  z-index: 0;
  will-change: transform
}

@media (max-width: 1600px) {
  .join-us .loyalty .dino .wrap-dino .img-shadow {
    width: 80%;
    left: -8px
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .dino .wrap-dino .img-shadow {
    width: 50%;
    bottom: -30px
  }
}

@media (max-width: 991.98px) {
  .join-us .loyalty .dino .wrap-dino .img-shadow {
    width: 50%;
    bottom: -20px
  }
}

@media (max-width: 767.98px) {
  .join-us .loyalty .dino .wrap-dino .img-shadow {
    width: 30%
  }
}

.join-us .loyalty .parallax-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2
}

.join-us .loyalty .parallax-box .box {
  position: absolute;
  width: auto;
  height: auto;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity, filter
}

.join-us .loyalty .parallax-box .box img {
  width: 100%;
  height: auto;
  display: block
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .parallax-box .box img {
    width: 80%
  }
}

@media (max-width: 991.98px) {
  .join-us .loyalty .parallax-box .box img {
    width: 70%
  }
}

@media (max-width: 575.98px) {
  .join-us .loyalty .parallax-box .box img {
    width: 55%
  }
}

.join-us .loyalty .parallax-box .box.box-left.box-1 {
  top: 23%;
  left: 2%
}

.join-us .loyalty .parallax-box .box.box-left.box-2 {
  top: 32%;
  left: 18%
}

.join-us .loyalty .parallax-box .box.box-left.box-3 {
  bottom: 20%;
  left: -5%
}

@media (max-width: 767.98px) {
  .join-us .loyalty .parallax-box .box.box-left.box-3 {
    left: 10%
  }
}

.join-us .loyalty .parallax-box .box.box-left.box-4 {
  top: 74%;
  left: 3%
}

@media (max-width: 1600px) {
  .join-us .loyalty .parallax-box .box.box-left.box-4 {
    left: 2%
  }
}

.join-us .loyalty .parallax-box .box.box-right.box-5 {
  top: 20%;
  right: 17%
}

.join-us .loyalty .parallax-box .box.box-right.box-6 {
  top: 50%;
  right: 10%
}

.join-us .loyalty .parallax-box .box.box-right.box-7 {
  top: 55%;
  right: -5%
}

@media (max-width: 767.98px) {
  .join-us .loyalty .parallax-box .box.box-right.box-7 {
    right: 0
  }
}

.join-us .loyalty .parallax-box .box.box-right.box-8 {
  bottom: 30%;
  right: 5%
}

.join-us .loyalty .gift-box {
  position: absolute;
  right: 0;
  bottom: 12%
}

.join-us .loyalty .gift-box .wrap-gift-box {
  position: relative
}

.join-us .loyalty .gift-box .wrap-gift-box .item-gift-box {
  position: absolute
}

.join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 {
  bottom: 0;
  right: 80px;
  z-index: 2
}

@media (max-width: 1600px) {
  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 {
    right: 75px
  }

  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 img {
    width: 235px
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 {
    right: 54px
  }

  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 img {
    width: 155px
  }
}

@media (max-width: 991.98px) {
  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 {
    right: 70px;
    bottom: -50px
  }

  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 img {
    width: 110px
  }
}

@media (max-width: 767.98px) {
  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 {
    bottom: -130px
  }

  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-01 img {
    width: 80px
  }
}

.join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-02 {
  bottom: -12px;
  right: -55px;
  z-index: 3
}

@media (max-width: 1600px) {
  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-02 {
    right: -25px
  }

  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-02 img {
    width: 100px
  }
}

@media (max-width: 991.98px) {
  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-02 {
    right: 10px;
    bottom: -60px
  }

  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-02 img {
    width: 80px
  }
}

@media (max-width: 767.98px) {
  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-02 {
    bottom: -140px
  }

  .join-us .loyalty .gift-box .wrap-gift-box .item-gift-box.gift-box-02 img {
    width: 70px
  }
}

.join-us .loyalty .gift-box .wrap-gift-box .img-shadow {
  position: absolute;
  right: -120px;
  bottom: -37px
}

.join-us .loyalty .loyalty-img {
  margin-bottom: 30px;
  text-align: center
}

@media (max-width: 1600px) {
  .join-us .loyalty .loyalty-img img {
    width: 80%
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .loyalty-img {
    position: relative;
    z-index: 5
  }

  .join-us .loyalty .loyalty-img img {
    width: 65%
  }
}

.join-us .loyalty .loyalty-text {
  font-weight: 400;
  font-size: 40px;
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 5
}

@media (max-width: 1600px) {
  .join-us .loyalty .loyalty-text {
    font-size: 35px
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .loyalty-text {
    font-size: 28px
  }
}

.join-us .loyalty .loyalty-btn {
  width: 410px;
  height: 120px;
  border-radius: 50px;
  background: #194F90;
  font-size: 55px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0 20px;
  position: relative;
  z-index: 5
}

@media (max-width: 1600px) {
  .join-us .loyalty .loyalty-btn {
    width: 320px;
    height: 85px;
    font-size: 45px;
    border-radius: 30px
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .loyalty-btn {
    font-size: 25px;
    height: 60px;
    width: 280px;
    margin-top: 25px
  }
}

@media (max-width: 575.98px) {
  .join-us .loyalty .loyalty-btn {
    width: 220px
  }
}

.join-us .loyalty .or-join {
  font-size: 28px;
  text-align: center;
  font-weight: 400;
  margin-top: 30px
}

@media (max-width: 1600px) {
  .join-us .loyalty .or-join {
    font-size: 22px
  }
}

@media (max-width: 1199.98px) {
  .join-us .loyalty .or-join {
    font-size: 18px;
    margin-top: 20px
  }
}

.join-us .get-start {
  padding: 70px 0 100px
}

@media (max-width: 1600px) {
  .join-us .get-start {
    padding-left: 20px;
    padding-right: 20px
  }
}

@media (max-width: 575.98px) {
  .join-us .get-start {
    padding-left: 0;
    padding-right: 0
  }
}

.join-us .get-start h2 {
  text-align: center;
  color: #194F90;
  font-weight: 500;
  font-size: 50px
}

@media (max-width: 1600px) {
  .join-us .get-start h2 {
    font-size: 40px
  }
}

@media (max-width: 1600px) {
  .join-us .get-start h2 {
    font-size: 30px
  }

  .join-us .get-start h2 br {
    display: none
  }
}

@media (max-width: 767.98px) {
  .join-us .get-start h2 {
    font-size: 28px
  }
}

.light-pre {
  opacity: 0;
  transform: scale(0.8);
  filter: blur(4px);
  will-change: transform, opacity, filter;
  pointer-events: none
}

.section-gradien {
  padding: 80px 0;
  background: linear-gradient(45deg, #28194a, #261991, #a52da8, #47196b, #621939);
  background-size: 500% 500%;
  animation: gradient 15s ease infinite
}

ol {
  list-style: decimal !important;
  padding-left: 15px
}

@media (max-width: 991.98px) {
  .flex-mobile-center {
    display: flex;
    justify-content: center
  }
}

.flex-center {
  display: flex;
  justify-content: center
}

.btn-detail {
  width: 200px;
  height: 55px;
  background: #98016a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  border-radius: 7px
}

.btn-detail i {
  margin-right: 10px
}

.line-width {
  transform-origin: left center;
  transform: scaleX(0)
}

.wrap-row-start {
  position: relative
}

.wrap-row-start .line-row-star {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 6px;
  background: #fff;
  top: 35%;
  content: "";
  left: 0
}

@media (max-width: 991.98px) {
  .wrap-row-start .line-row-star {
    display: none
  }
}

.wrap-row-start .row-start {
  display: flex;
  justify-content: space-between;
  margin: 100px -50px 0;
  position: relative;
  z-index: 2;
  flex-wrap: wrap
}

@media (max-width: 1320px) {
  .wrap-row-start .row-start {
    margin-left: -20px;
    margin-right: -20px
  }
}

@media (max-width: 1199.98px) {
  .wrap-row-start .row-start {
    margin-left: -10px;
    margin-right: -10px
  }
}

.wrap-row-start .row-start li {
  flex-grow: 1;
  width: 33.3333333%;
  padding: 0 50px;
  position: relative;
  z-index: 2
}

@media (max-width: 1320px) {
  .wrap-row-start .row-start li {
    padding: 0 20px
  }
}

@media (max-width: 1199.98px) {
  .wrap-row-start .row-start li {
    padding: 0 10px
  }
}

@media (max-width: 1050px) {
  .wrap-row-start .row-start li:first-child {
    width: 100%;
    margin-bottom: 120px
  }
}

@media (max-width: 767.98px) {
  .wrap-row-start .row-start li {
    width: 100%;
    margin-bottom: 120px
  }

  .wrap-row-start .row-start li:last-child {
    margin-bottom: 0
  }
}

.wrap-row-start .row-start .box-start {
  border-radius: 50px;
  background: #fff;
  color: #194F90;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  height: 100%;
  z-index: 2;
  padding: 0 15px
}

@media (max-width: 1600px) {
  .wrap-row-start .row-start .box-start {
    font-size: 16px
  }
}

.wrap-row-start .row-start .box-start .img-start.img-start-01 {
  margin: -70px 0 10px 55px
}

.wrap-row-start .row-start .box-start .img-start.img-start-02 {
  margin: -70px 0 10px 55px
}

.wrap-row-start .row-start .box-start .img-start.img-start-03 {
  margin: -60px 0 0px 65px
}

@media (max-width: 1600px) {
  .wrap-row-start .row-start .box-start .img-start img {
    width: 80%
  }
}

@media (max-width: 991.98px) {
  .wrap-row-start .row-start .box-start .img-start img {
    width: 70%
  }
}

.wrap-row-start .row-start .box-start .number {
  position: absolute;
  left: 30px;
  top: -30px
}

@media (max-width: 1600px) {
  .wrap-row-start .row-start .box-start .number img {
    width: 80%
  }
}

.wrap-row-start .row-start .box-start h2 {
  font-size: 22px;
  color: #194F90;
  font-weight: 600;
  margin-bottom: 15px
}

@media (max-width: 1199.98px) {
  .wrap-row-start .row-start .box-start h2 br {
    display: none
  }
}

.wrap-row-start .row-start .shadow-start {
  position: absolute;
  z-index: 1;
  bottom: -40px;
  left: -2%
}

@media (max-width: 1600px) {
  .wrap-row-start .row-start .shadow-start {
    width: 80%
  }
}

@media (max-width: 575.98px) {
  .wrap-row-start .row-start .shadow-start {
    bottom: -20px
  }
}

.benefit {
  background-color: #194F90;
  overflow: hidden
}

.benefit .container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1360px;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 20px;
  padding-right: 20px
}

.benefit .wrap-benefit {
  display: flex;
  align-items: center;
  position: relative
}

@media (max-width: 1050px) {
  .benefit .wrap-benefit {
    display: block
  }
}

.benefit .wrap-benefit .line-benefit {
  position: absolute;
  left: 30%;
  top: 0;
  z-index: 0
}

@media (max-width: 1320px) {
  .benefit .wrap-benefit .line-benefit {
    left: 15%
  }
}

@media (max-width: 1050px) {
  .benefit .wrap-benefit .line-benefit {
    display: none
  }
}

@media (max-width: 1050px) {
  .benefit .wrap-benefit .wrap-button-benefit {
    display: flex;
    justify-content: center;
    margin-bottom: 50px
  }
}

.benefit .wrap-benefit .button-benefit {
  position: relative;
  padding-left: 170px
}

@media (max-width: 1320px) {
  .benefit .wrap-benefit .button-benefit {
    padding-left: 90px
  }
}

@media (max-width: 575.98px) {
  .benefit .wrap-benefit .button-benefit {
    padding-left: 50px
  }
}

.benefit .wrap-benefit .button-benefit .light-benefit {
  position: absolute;
  top: -167px;
  z-index: 1;
  will-change: transform
}

.benefit .wrap-benefit .button-benefit .light-radius-benefit {
  position: absolute;
  top: -205px;
  right: -45%;
  mix-blend-mode: color-dodge;
  opacity: 0.9;
  z-index: 10
}

.benefit .wrap-benefit .button-benefit .button-benefit-back {
  width: 460px;
  height: 175px;
  border-radius: 90px;
  position: absolute;
  left: 170px;
  background: #35D6FC;
  background: linear-gradient(90deg, #35d6fc 0%, #159dff 100%)
}

@media (max-width: 1320px) {
  .benefit .wrap-benefit .button-benefit .button-benefit-back {
    left: 90px
  }
}

@media (max-width: 575.98px) {
  .benefit .wrap-benefit .button-benefit .button-benefit-back {
    left: 50px
  }
}

.benefit .wrap-benefit .button-benefit .button-benefit-front {
  width: 460px;
  height: 175px;
  border-radius: 90px;
  background: #fff;
  color: #194F90;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 11
}

.benefit .wrap-benefit .button-benefit .button-benefit-front .f1 {
  font-weight: 600;
  font-size: 55px;
  line-height: 1
}

@media (max-width: 1050px) {
  .benefit .wrap-benefit .button-benefit .button-benefit-front .f1 {
    font-size: 45px
  }
}

@media (max-width: 575.98px) {
  .benefit .wrap-benefit .button-benefit .button-benefit-front .f1 {
    font-size: 40px
  }
}

.benefit .wrap-benefit .button-benefit .button-benefit-front .f2 {
  font-weight: 500;
  font-size: 23px
}

@media (max-width: 1050px) {
  .benefit .wrap-benefit .button-benefit .button-benefit-front .f2 {
    font-size: 18px
  }
}

@media (max-width: 1320px) {

  .benefit .wrap-benefit .button-benefit .button-benefit-back,
  .benefit .wrap-benefit .button-benefit .button-benefit-front {
    width: 350px;
    height: 133px
  }
}

@media (max-width: 1050px) {

  .benefit .wrap-benefit .button-benefit .button-benefit-back,
  .benefit .wrap-benefit .button-benefit .button-benefit-front {
    height: 100px
  }
}

.benefit .wrap-benefit .content-benefit {
  margin-left: 95px;
  position: relative;
  z-index: 2
}

@media (max-width: 1199.98px) {
  .benefit .wrap-benefit .content-benefit {
    margin-left: 50px
  }
}

@media (max-width: 1050px) {
  .benefit .wrap-benefit .content-benefit {
    margin-left: 0
  }
}

.benefit .wrap-benefit .content-benefit li {
  display: flex;
  align-items: center;
  margin-bottom: 30px
}

.benefit .wrap-benefit .content-benefit li:nth-child(2) {
  margin-left: 80px
}

@media (max-width: 1050px) {
  .benefit .wrap-benefit .content-benefit li:nth-child(2) {
    margin-left: 0
  }
}

.benefit .wrap-benefit .content-benefit li:last-child {
  margin-bottom: 0
}

.benefit .wrap-benefit .content-benefit li figure {
  margin-right: 35px
}

@media (max-width: 575.98px) {
  .benefit .wrap-benefit .content-benefit li figure img {
    width: 130px;
    height: auto
  }
}

.benefit .wrap-benefit .content-benefit li .content-inner {
  font-weight: 500
}

.benefit .wrap-benefit .content-benefit li .content-inner h2 {
  font-size: 30px
}

@media (max-width: 1600px) {
  .benefit .wrap-benefit .content-benefit li .content-inner h2 {
    font-size: 28px
  }
}

@media (max-width: 991.98px) {
  .benefit .wrap-benefit .content-benefit li .content-inner h2 {
    font-size: 22px
  }
}

.benefit .wrap-benefit .content-benefit li .content-inner p {
  font-size: 22px
}

@media (max-width: 1600px) {
  .benefit .wrap-benefit .content-benefit li .content-inner p {
    font-size: 18px
  }
}

@media (max-width: 991.98px) {
  .benefit .wrap-benefit .content-benefit li .content-inner p {
    font-size: 16px
  }
}

.join-now {
  padding: 100px 0 50px;
  background: linear-gradient(0deg, #fff 16%, #a9d9ff 100%);
  overflow: hidden
}

.join-now .wrap-join-now {
  width: 100%;
  max-width: 950px;
  margin: 0 auto
}

.join-now .row-join-now {
  display: flex;
  align-items: center
}

@media (max-width: 767.98px) {
  .join-now .row-join-now {
    display: block
  }
}

.join-now .row-join-now .join-now-left {
  flex: 1;
  padding-top: 50px
}

.join-now .row-join-now .join-now-left .box-join-now {
  width: 100%;
  height: 330px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 30px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  position: relative
}

@media (max-width: 767.98px) {
  .join-now .row-join-now .join-now-left .box-join-now {
    border-radius: 40px
  }
}

.join-now .row-join-now .join-now-left .box-join-now h2 {
  font-size: 55px;
  color: #57BBFF;
  font-weight: 500;
  border-bottom: 1px solid #57BBFF
}

@media (max-width: 991.98px) {
  .join-now .row-join-now .join-now-left .box-join-now h2 {
    font-size: 45px
  }
}

.join-now .row-join-now .join-now-left .box-join-now p {
  font-size: 40px;
  color: #194F90;
  font-weight: 600;
  text-align: center;
  line-height: 1.2
}

@media (max-width: 991.98px) {
  .join-now .row-join-now .join-now-left .box-join-now p {
    font-size: 30px
  }
}

.join-now .row-join-now .join-now-left .box-join-now .star-join {
  position: absolute;
  will-change: transform, filter
}

.join-now .row-join-now .join-now-left .box-join-now .star-join.star-join-now-01 {
  top: -30%;
  left: 48%
}

@media (max-width: 767.98px) {
  .join-now .row-join-now .join-now-left .box-join-now .star-join.star-join-now-01 {
    top: -20%
  }
}

.join-now .row-join-now .join-now-left .box-join-now .star-join.star-join-now-02 {
  top: -18%;
  left: 27%
}

@media (max-width: 767.98px) {
  .join-now .row-join-now .join-now-left .box-join-now .star-join.star-join-now-02 {
    top: -8%
  }
}

.join-now .row-join-now .join-now-left .box-join-now .star-join.star-join-now-03 {
  top: 5%;
  left: 45%;
  width: 80px
}

@media (max-width: 767.98px) {
  .join-now .row-join-now .join-now-left .box-join-now .star-join.star-join-now-03 {
    width: 60px;
    top: 15%
  }
}

.join-now .row-join-now .join-now-left .join-now-text {
  text-align: center;
  color: #051E38;
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  line-height: 1.2
}

@media (max-width: 991.98px) {
  .join-now .row-join-now .join-now-left .join-now-text {
    font-size: 25px
  }
}

.join-now .row-join-now .join-now-right {
  position: relative;
  padding-right: 140px
}

@media (max-width: 991.98px) {
  .join-now .row-join-now .join-now-right {
    padding-right: 80px
  }
}

@media (max-width: 767.98px) {
  .join-now .row-join-now .join-now-right {
    display: flex;
    justify-content: center
  }

  .join-now .row-join-now .join-now-right .mobile-join-now {
    width: 220px
  }
}

.join-now .row-join-now .join-now-right .dino-join-now {
  position: absolute;
  bottom: -22px;
  right: -60px;
  transform-origin: center bottom;
  will-change: transform;
  transition: filter 0.3s ease
}

@media (max-width: 991.98px) {
  .join-now .row-join-now .join-now-right .dino-join-now {
    right: -100px
  }
}

@media (max-width: 767.98px) {
  .join-now .row-join-now .join-now-right .dino-join-now {
    right: -150px
  }
}

.join-now .row-join-now .join-now-right .dino-join-now img {
  display: block;
  max-width: 100%;
  filter: blur(0.2px)
}

@media (max-width: 991.98px) {
  .join-now .row-join-now .join-now-right .dino-join-now img {
    width: 70%
  }
}

.join-now .view-faq {
  text-align: center;
  font-size: 25px;
  color: #051E38;
  margin: 25px 0
}

.join-now .line-join-now {
  height: 7px;
  width: 85%;
  margin: 15px auto 0;
  border-radius: 3px;
  background: #38D6FD;
  background: linear-gradient(90deg, #38d6fd 0%, #099eff 100%)
}

.list-join-now {
  display: flex;
  justify-content: space-between;
  margin: 100px -40px 0;
  position: relative;
  z-index: 2;
  flex-wrap: wrap
}

@media (max-width: 1320px) {
  .list-join-now {
    margin-left: -20px;
    margin-right: -20px
  }
}

@media (max-width: 1199.98px) {
  .list-join-now {
    margin-left: -10px;
    margin-right: -10px
  }
}

.list-join-now li {
  flex-grow: 1;
  width: 33.3333333%;
  padding: 0 40px;
  position: relative;
  z-index: 2;
  text-align: center
}

@media (max-width: 1320px) {
  .list-join-now li {
    padding: 0 20px
  }
}

@media (max-width: 1199.98px) {
  .list-join-now li {
    padding: 0 10px
  }
}

@media (max-width: 1050px) {
  .list-join-now li:first-child {
    width: 100%;
    margin-bottom: 120px
  }
}

@media (max-width: 767.98px) {
  .list-join-now li {
    width: 100%;
    margin-bottom: 50px
  }

  .list-join-now li:first-child {
    margin-bottom: 50px
  }

  .list-join-now li:last-child {
    margin-bottom: 0
  }
}

.list-join-now figure {
  margin-bottom: 30px
}

.list-join-now h2 {
  color: #194F90;
  font-size: 33px;
  font-weight: 500
}

@media (max-width: 991.98px) {
  .list-join-now h2 {
    font-size: 25px
  }
}

.list-join-now p {
  font-size: 20px;
  font-weight: 500;
  color: #051E38
}

@media (max-width: 991.98px) {
  .list-join-now p {
    font-size: 16px
  }
}

.terms-of-use {
  background: #fff;
  position: relative;
  padding-bottom: 160px
}

.terms-of-use .wrap-terms-of-use {
  background: #154E91;
  background: linear-gradient(to bottom, #2bd2d6 0%, #1fa1d4 10%, #1b75bc 30%, #195ab0 60%, #154E91 100%)
}

@media (max-width: 991.98px) {
  .terms-of-use .wrap-terms-of-use {
    position: relative;
    z-index: 2;
    padding-top: 30px
  }
}

.terms-of-use .container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 350px
}

@media (max-width: 991.98px) {
  .terms-of-use .container {
    min-height: 300px
  }
}

.terms-of-use .container .content-terms-of-use {
  text-align: center
}

.terms-of-use .container .content-terms-of-use p {
  font-size: 35px;
  font-weight: 400
}

@media (max-width: 991.98px) {
  .terms-of-use .container .content-terms-of-use p {
    font-size: 30px
  }
}

@media (max-width: 767.98px) {
  .terms-of-use .container .content-terms-of-use p {
    font-size: 28px
  }
}

.terms-of-use .container .content-terms-of-use .btn-tfu {
  font-size: 40px;
  font-weight: 500;
  width: 380px;
  height: 82px;
  background: #2898CA;
  background: linear-gradient(225deg, #2898ca 0%, #34d4fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 20px
}

@media (max-width: 991.98px) {
  .terms-of-use .container .content-terms-of-use .btn-tfu {
    font-size: 30px;
    height: 60px;
    width: 300px
  }
}

@media (max-width: 767.98px) {
  .terms-of-use .container .content-terms-of-use .btn-tfu {
    font-size: 25px
  }
}

@media (max-width: 991.98px) {
  .terms-of-use {
    padding-bottom: 100px
  }
}

.terms-of-use:after {
  content: "";
  width: 100vw;
  height: 160px;
  background: url(../images/bg-teams-of-use.png) no-repeat center center;
  background-size: auto;
  background-size: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1
}

.a-flex-center {
  display: flex;
  justify-content: center
}

.party-end {
  background: linear-gradient(180deg, #fff 16%, #a9d9ff 100%);
  padding: 100px 0 80px;
  overflow: hidden
}

.party-end .container {
  display: flex;
  justify-content: center
}

.party-end .wrap-party {
  position: relative;
  text-align: center
}

.party-end .wrap-party .img-party-paper-01 {
  position: absolute;
  right: 15%;
  top: 8%
}

@media (max-width: 1199.98px) {
  .party-end .wrap-party .img-party-paper-01 {
    right: 22%;
    top: 8%;
    width: 120px
  }
}

@media (max-width: 991.98px) {
  .party-end .wrap-party .img-party-paper-01 {
    display: none
  }
}

.party-end .wrap-party .img-party {
  position: relative;
  z-index: 4
}

@media (max-width: 1199.98px) {
  .party-end .wrap-party .img-party {
    width: 80%
  }
}

.party-end .wrap-party .img-human-jump {
  position: absolute;
  width: 19%;
  aspect-ratio: 182 / 455;
  left: 50%;
  bottom: 5%;
  z-index: 2;
  transform: translateX(-50%)
}

@media (max-width: 991.98px) {
  .party-end .wrap-party .img-human-jump {
    bottom: 2%;
    width: 18%
  }
}

.party-end .wrap-party .img-drop-human-jump {
  position: absolute;
  left: 45%;
  bottom: 3%;
  z-index: 1
}

.quiz__confetti {
  display: none;
  visability: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3
}

.dot {
  width: 14px;
  height: 20px;
  position: absolute;
  background-color: #00FF00;
  z-index: 2
}

@media (max-width: 991.98px) {
  .dot {
    width: 10px;
    height: 16px
  }
}

@media (max-width: 767.98px) {
  .dot {
    width: 8px;
    height: 14px
  }
}

body.modal-open {
  overflow: hidden !important;
  height: 100%
}

.modal-content {
  background: #fff;
  padding: 50px;
  border-radius: 20px;
  font-size: 22px;
  position: relative
}

@media (max-width: 991.98px) {
  .modal-content {
    font-size: 20px;
    padding: 25px
  }
}

@media (max-width: 575.98px) {
  .modal-content {
    font-size: 18px;
    padding: 20px
  }
}

.modal-content h2 {
  color: #194F90;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  width: 100%
}

.modal-content .wrap-btn-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DDDDDD;
  border-radius: 100%
}

.modal-content .wrap-btn-close .btn-close {
  color: #606060
}

.modal.show .modal-dialog {
  max-width: 1100px
}

.faq-list li {
  margin-bottom: 30px
}

.faq-list li:last-child {
  margin-bottom: 0
}

.faq-list li .title-faq {
  color: #000;
  margin-bottom: 15px
}

.faq-list li p {
  color: #194F90
}

.faq-list li ul {
  color: #194F90;
  list-style: disc;
  padding-left: 20px
}

/*# sourceMappingURL=style.css.map */