.fixed-section p {
  margin: 0;
}

.top-section {
  margin-bottom: 30px !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: -0.02em;
}

.top-section .title {
  font-weight: 700;
  font-size: 28px;
  line-height: 160%;
  letter-spacing: -0.02em;
  color: rgb(38, 25, 25);
  margin-bottom: 30px;
}

.top-section .center-btn-wrap {
  display: flex;
  gap: 18px;
  border-radius: 10px;
}

.top-section .center-btn-wrap .benefit-btn {
  width: calc(50% - 9px);
  text-align: center;
}

.top-section .center-btn-wrap .benefit-btn .active a {
  pointer-events: none;
}

.top-section .center-btn-wrap .benefit-btn .tab {
  list-style: none;
  cursor: pointer;
}

.top-section a {
  background: rgb(246, 247, 248);
  border-radius: 10px;
  color: rgb(102, 102, 102);
  display: block;
  height: 56px;
  padding: 15px 0px;
}

.top-section .active a {
  color: rgb(255, 255, 255);
  border-radius: 10px;
  background: rgb(124, 90, 255);
}

.membership_rank_card {
  height: 180px;
}

.membership_rank_card_1 .membership_rank_container {
  height: 120px;
}

.membership_rank_card_2 .membership_rank_container {
  height: 135px;
}

.membership_rank_card_3 .membership_rank_container {
  height: 150px;
}

.membership_rank_card_4 .membership_rank_container {
  height: 165px;
}

.membership_rank_container {
  position: relative;
}

.membership_rank_container:before {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: #9b9b9b;
  border-radius: 50%;
  content: "";
}

.membership_rank_card:first-child .membership_rank_container:before {
  display: none;
}

.membership_rank_container:after {
  position: absolute;
  top: 50%;
  left: -5px;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-color: #fff;
  border-style: solid;
  border-width: 1px 0 0 1px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  vertical-align: top;
  content: "";
}

.membership_rank_card:first-child .membership_rank_container:after {
  display: none;
}

.mileage-list h3 {
  font-size: 33px !important;
  font-weight: 500 !important;
  word-break: keep-all;
}

.user-info-box {
  margin-bottom: 30px;
}

.user-info-box p {
  margin: 0;
}

.user-info-box .user-name-box {
  display: flex;
  align-items: center;
}

.user-info-box .user-name-box .user-name {
  font-size: 20px;
  font-weight: 600;
}

.user-info-box .user-membership-text {
  margin-top: 15px;
}

.user-info-box .user-membership-text .membership {
  font-size: 16px;
  font-weight: 600;
}

.user-info-box .user-membership-text .GREEN {
  color: #008000;
}

.user-info-box .user-membership-text .ORANGE {
  color: #ffa500;
}

.user-info-box .user-membership-text .RED {
  color: #ff0000;
}

.user-info-box .user-membership-text .VIP {
  color: #ffd700;
}


@media (max-width: 770px) {
  .top-section {
    font-size: 12px;
    margin-bottom: 20px !important;
  }

  .top-section .title {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .top-section .center-btn-wrap {
    gap: 10px;
    border-radius: 6px;
  }

  .top-section .center-btn-wrap .benefit-btn {
    width: calc(50% - 5px);
    text-align: center;
  }

  .top-section a {
    padding: 12px 0px;
    height: 42px;
  }

  .membership_rank_container > p:last-child {
    display: none;
  }

  .membership_rank_card {
    height: 120px;
  }

  .membership_rank_container {
    padding-top: 15px !important;
  }

  .membership_rank_container > p:first-child {
    font-size: 12px !important;
  }

  .membership_rank_card_1 .membership_rank_container {
    height: 60px;
  }

  .membership_rank_card_2 .membership_rank_container {
    height: 75px;
  }

  .membership_rank_card_3 .membership_rank_container {
    height: 90px;
  }

  .membership_rank_card_4 .membership_rank_container {
    height: 105px;
  }

  .membership_rank_container:before {
    display: none;
  }

  .membership_rank_container:after {
    display: none;
  }

  .benefit-list {
    margin-top: 40px !important;
  }

  .benefit-list > div {
    gap: unset;
    border-top: 4px solid #000;
  }

  .benefit-list > div > div:first-child {
    flex-basis: 45% !important;
    border: unset !important;
  }

  .benefit-list > div > div:last-child {
    border: unset !important;
  }

  .benefit-list > div > div:last-child p {
    font-weight: 700;
  }

  .benefit-description {
    margin-top: 40px !important;
    padding: 0 20px !important;
  }
  .benefit-description > div {
    flex-direction: column;
    gap: 10px;
  }

  .benefit-description > div > p:first-child {
    flex-basis: unset;
  }

  .mileage-list > div {
    gap: 20px;
  }

  .mileage-list > div > div:first-child {
    flex-basis: 35% !important;
  }

  .mileage-list h3 {
    font-size: 22px !important;
  }
}