img.banner_thumbnail {
  width: 100%;
  object-fit: cover;
  height: 100vh;
  margin-bottom: -5px;
}

img.banner_border {
  width: 100%;
  height: 100%;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.gap {
  height: 30px;
  width: 10%;
}

.border {
  width: 100%;
  z-index: -10;
  background-color: var(--dynamic-color);
  border-bottom-left-radius: calc(100vw / 4);
  border-bottom-right-radius: calc(100vw / 4);
  position: relative;
}

.border_purple {
  --dynamic-color: var(--bg_purple);
  box-shadow: 5px 10px 7px rgba(0, 0, 0, 0.1);
}

.border_yellow {
  --dynamic-color: var(--bg_yellow);
}

.border_blue {
  --dynamic-color: var(--bg_blue);
}

.border_white {
  --dynamic-color: var(--bg_white);
}

.border_text {
  font-size: 3.2vw;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  font-family: "Freeman";
}

.border_text_4_steps {
  font-size: 4vw;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  font-family: "Freeman";
}

.title {
  font-size: 1.6vw;
  margin-top: 10px;
  /* margin-bottom: 20px; */
  height: 50px;
  font-family: "Freeman";
}

.description {
  font-size: 1.2vw;
  font-family: "Helvetica";
}

.register_proses {
  background-color: #aac4e8;
  margin-top: -35px;
  height: 100%;
}

.thumbnail_list {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  margin: 2em 0;
}

.commission,
.register,
.register_step,
.share,
.withdraw {
  width: 25%;
  padding: 25px;
  text-align: center;
}

.register_step {
  margin-top: 5vh;
}

.icon {
  position: relative;
}

.icon img {
  width: 320px;
  height: 320px;
  object-fit: contain;
  border-radius: 23px;
}

.small_icon {
  width: 85px !important;
  height: 85px !important;
  left: calc(50% + 90px);
  top: 30px;
}

.commission .icon img {
  animation: mover 4s ease-in-out infinite 1s;
}

.register .icon img {
  animation: mover 4s ease-in-out infinite 1.3s;
}

.share .icon img {
  animation: mover 4s ease-in-out infinite 0.8s;
}

.withdraw .icon img {
  animation: mover 4s ease-in-out infinite 1.7s;
}

@keyframes mover {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes icon_mover {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

.step_text {
  position: relative;
  z-index: 2;
  margin-top: 10vh;
}

.step_text .title {
  margin-top: 40px;
}

.step_text .description {
  margin-top: 40px;
  padding: 0 10px;
}

img.banner_border_section2 {
  width: 100%;
  height: 100%;
  margin-bottom: -5px;
}

img.affiliate_image {
  width: 73%;
  height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 15px;
}

.tnc {
  font-size: 4vw;
  margin-top: 30px;
  text-align: center;
  font-family: "Freeman";
}

.button {
  font-size: 1.6vw;
  text-align: center;
  height: 50px;
  border-radius: 50px;
  background-color: var(--bg_button);
  color: black;
  text-align: center;
  margin: 15px auto;
  display: block;
  font-weight: 900;
  border: 1px solid black;
}

.button_yellow {
  --bg_button: var(--bg_yellow);
}
.button_blue {
  --bg_button: var(--bg_blue);
}
.button_purple {
  --bg_button: var(--bg_purple);
}

/* Term And Condition */
img.banner_thumbnail_tnc {
  width: 100%;
  object-fit: cover;
  height: 100vh;
}

.tnc_description {
  font-size: 1.1vw;
  margin: 40px 0;
  font-family: "Helvetica";
  text-align: justify;
}

.tnc_list_title {
  font-size: 1.2vw;
  font-weight: 300;
  font-family: "Freeman";
}

.tnc_list {
  font-size: 1.1vw;
  text-align: justify;
}

.tnc_list ol {
  padding-left: 15px;
}

.tnc_list li {
  margin-bottom: 15px;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.row > a > button {
  width: 20vw;
}

.row a {
  padding: 0px 20px;
}

.drop_shadow {
  filter: drop-shadow(5px 10px 4px rgba(0, 0, 0, 0.1));
}

.small_icon.type1 {
  animation: icon_mover 3s ease-in-out infinite 1s;
}

.small_icon.type2 {
  animation: icon_mover 3s ease-in-out infinite 1.5s;
}

.small_icon.type3 {
  animation: icon_mover 3s ease-in-out infinite 0.3s;
}

.small_icon.type4 {
  animation: icon_mover 3s ease-in-out infinite 1.5s;
}

/* //! INI MIN TABLET  */
@media only screen and (max-width: 1300px) {
  img.banner_thumbnail {
    height: 40%;
  }

  .border {
    width: 100%;
    z-index: -10;
    background-color: var(--dynamic-color);
    border-bottom-left-radius: calc(100vw / 8);
    border-bottom-right-radius: calc(100vw / 8);
    position: relative;
  }

  .border_text {
    font-size: 4vw;
    font-family: "Freeman";
  }

  .border_text_4_steps {
    font-size: 5vw;
    font-family: "Freeman";
  }

  .commission,
  .register,
  .register_step,
  .share,
  .withdraw {
    width: 50%;
  }

  .icon img {
    width: 40vw;
    height: 40vw;
  }

  .step_text {
    margin-top: 2vh;
  }

  .title {
    font-size: 2.5vw;
    /* margin-bottom: 20px; */
  }

  .description {
    font-size: 1.8vw;
  }

  .step_text .title {
    font-size: 2.7vw;
    margin-top: 6vw;
    /* margin-bottom: 4.5vw; */
    line-height: 1.1;
  }

  .step_text .description {
    font-size: 1.8vw;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  img.affiliate_image {
    display: none;
  }

  .tnc {
    font-size: 4.2vw;
    margin-top: 30px;
    text-align: center;
  }

  .tnc_description {
    font-size: 2.3vw;
    margin: 40px 0;
    font-family: "Helvetica";
    text-align: justify;
    line-height: 1.7;
  }

  .tnc_list_title {
    font-size: 2.3vw;
    font-family: "Freeman";
  }

  .tnc_list {
    font-size: 1.2rem;
    text-align: justify;
  }

  .row > a > button {
    width: 25vw;
    font-size: 1.8vw;
  }

  .row a {
    padding: 0 10px;
  }

  .small_icon {
    height: 8vw !important;
    width: 8vw !important;
    left: calc(50% + 10vw);
    top: 20px;
  }

  .button {
    height: 40px;
  }
}

/* //!INI HP */
@media only screen and (max-width: 650px) {
  .gap {
    height: 30px;
    width: 10%;
  }

  .border_text {
    font-size: 6.2vw;
  }

  img.banner_border_section2 {
    width: 100%;
    height: 100%;
    margin-bottom: -5px;
  }

  img.banner_thumbnail {
    height: 30%;
  }

  .title {
    font-size: 4vw;
    line-height: 1.2;
  }

  .description {
    font-size: 2.8vw;
  }

  .commission,
  .register,
  .register_step,
  .share,
  .withdraw {
    width: 50%;
  }

  .register_step {
    padding: 10px;
  }

  .icon img {
    width: 40vw;
    height: 40vw;
    margin-left: -10px;
  }

  .register_step {
    margin-top: 20px;
  }

  .step_text .title {
    font-size: 4.3vw;
    font-family: "Freeman";
    line-height: 1.1;
  }

  .step_text .description {
    font-size: 3.2vw;
    width: 100%;
    margin-top: 0px;
  }

  .tnc {
    font-size: 6vw;
  }

  .button {
    width: 50vw;
    font-size: 3.5vw;
    padding: 10px 0;
  }

  .tnc_description {
    font-size: 3.6vw;
    margin: 40px 0;
    font-family: "Helvetica";
    text-align: justify;
    line-height: 1.7;
  }

  .tnc_list_title {
    font-size: 3.3vw;
    font-family: "Freeman";
  }

  .tnc_list {
    font-size: 1rem;
    text-align: justify;
  }

  .border_text_4_steps {
    font-size: 5.6vw;
    margin-top: -20px;
    font-family: "Freeman";
  }

  .small_icon {
    height: 10vw !important;
    width: 10vw !important;
    left: calc(50% + 13vw);
    top: 15px;
  }

  .small_icon.type1 {
    animation: icon_mover 3s ease-in-out infinite 1s;
  }

  .small_icon.type2 {
    animation: icon_mover 3s ease-in-out infinite 1.5s;
  }

  .small_icon.type3 {
    animation: icon_mover 3s ease-in-out infinite 0.3s;
  }

  .small_icon.type4 {
    animation: icon_mover 3s ease-in-out infinite 1.7s;
  }

  .order_number {
    position: relative;
    left: 0;
    top: 5px;
    z-index: 5;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    background-color: var(--bg_purple);
  }

  .step_number {
    font-size: 2vw;
    font-family: "Freeman";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: #e5e654;
  }

  .button {
    height: 35px;
    padding: 0;
    margin: 10px auto;
  }
}