/* start vip_bonus  */
@media (max-width: 768px) {
      .view-mobile-body.itinerary-mobile .vip.main {
            margin: 50px auto 0 auto;
      }
}

.vip.main {
      color: #e9eef7;
      margin: 135px auto 0 auto;
}

.vip.main .vip-cont {
      margin: 0 auto;
      padding: 16px 12px;
      box-sizing: border-box;
}

.vip.main .vip-rade {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 16px;
      background: var(--content-light-2);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
}

.vip.main .vip-rade .tit_vip-rade {
      font-style: normal;
      color: var(--text-primary);
      text-align: center;
      text-transform: uppercase;
      font-size: 26px;
}

.vip.main .vip-rade h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      text-align: center;
      color: #fff;
}

.vip.main .vip-rade progress {
      width: 100%;
      height: 5px;
      appearance: none;
      background: transparent;
      border: 0;
      border-radius: 999px;
      overflow: hidden;
}

.vip.main .vip-rade progress::-webkit-progress-bar {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 999px;
}

.vip.main .vip-rade progress::-webkit-progress-value {
      background: linear-gradient(90deg, #24d3ee, #24f0b1);
      border-radius: 999px;
}

.vip.main .vip-rade progress::-moz-progress-bar {
      background: linear-gradient(90deg, #24d3ee, #24f0b1);
      border-radius: 999px;
}

.vip.main .mission.items {
      position: relative;
      margin: 0 !important;
}

.vip.main .mission.items .slick-list {
      overflow: hidden;
      border-radius: 12px;
      margin: auto;
}

.vip.main .mission.items .slick-track {
      display: flex;
      gap: 12px;
}

.vip.main .mission.items li {
      list-style: none;
}

.vip.main .mission.items li a {
      display: block;
      background: var(--content-light);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      padding: 14px;
      text-decoration: none;
      color: inherit;
      transition: transform 120ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.vip.main .mission.items li a:hover {
      box-shadow: 0 10px 24px var(--shadow-main-hover);
      border-color: var(--primary);
}

.vip.main .mission.items .mission-cont {
      display: flex;
      gap: 1rem;
      padding: 1rem;
}

.vip.main .mission.items .mission-cont h5 {
      margin: 8px 0 0;
      font-size: 16px;
      font-weight: 700;
}

.vip.main .mission.items .mission-cont h5 span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      color: var;
}

.vip.main .mission.items .mission-info {
      margin-top: 8px;
      font-size: 13px;
      color: var(--primary);
}

.vip.main .mission.items .ico-fluent-coin {
      display: inline-block;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-size: contain !important;
      background-repeat: no-repeat !important;
}

.vip.main .mission.items .lv1 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip1.png);
}

.vip.main .mission.items .lv2 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip2.png);
}

.vip.main .mission.items .lv3 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip3.png);
}

.vip.main .mission.items .lv4 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip4.png);
}

.vip.main .mission.items .lv5 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip5.png);
}

.vip.main .mission.items .lv6 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip6.png);
}

.vip.main .mission.items .lv7 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip7.png);
}

.vip.main .mission.items .lv8 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip8.png);
}

.vip.main .mission.items .lv9 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip9.png);
}

.vip.main .mission.items .lv10 .ico-fluent-coin {
      background: url(../images/vip/rank_icon/vip10.png);
}

.vip.main .slick-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      color: #fff;
      width: 38px;
      height: 38px;
      background: var(--content-light-2);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 10px;
      cursor: pointer;
}

.vip.main .slick-prev {
      left: -6px;
}

.vip.main .slick-next {
      right: -6px;
}

.vip.main .slick-arrow:hover {
      background: rgba(36, 211, 238, 0.15);
      border-color: rgba(36, 211, 238, 0.4);
}

.vip.main .vip-upgrade {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 16px;
}

.vip.main .vip-card {
      border: 1px solid var(--primary);
}

.vip.main .vip-buy {
      background: var(--content-light-2);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 10px 12px;
}

.vip.main .vip-buy li {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      color: #cdd6e6;
}

.vip.main .vip-buy li span {
      white-space: nowrap;
      color: var;
}

.vip.main .vip-buy li u {
      text-decoration: none;
      flex: 1 1 auto;
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
}

.vip.main .vip-buy li b {
      color: var(--primary);
}

.vip.main .vip-list {
      margin-top: 18px;
}

.vip.main .vip-list h4 {
      margin: 0 0 10px;
      font-size: 18px;
      font-weight: 800;
}

.vip.main .vip-list .table {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      background: var(--secondary);
}

.vip.main table.vip_na {
      width: 100%;
      min-width: 980px;
      border-collapse: separate;
      border-spacing: 0;
}

.vip.main .vip_na thead {
      position: sticky;
      top: 0;
      z-index: 3;
}

.vip.main .vip_na thead tr {
      background: linear-gradient(180deg, var(--content-light-2), var(--content-light));
}

.vip.main .vip_na thead th,
.vip.main .vip_na thead td {
      /* position: sticky; */
      top: 0;
      z-index: 3;
      color: #e9eef7;
      font-weight: 700;
      text-align: left;
      padding: 12px 14px;
      font-size: 13px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      white-space: nowrap;
}

.vip.main .vip_na tbody th,
.vip.main .vip_na tbody td {
      padding: 12px 14px;
      font-size: 13px;
      color: #cdd6e6;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background: linear-gradient(180deg, var(--content-light-2), var(--content-light));
}

.vip.main .vip_na tbody th {
      /* position: sticky; */
      left: 0;
      z-index: 2;
      background: var(--content-light-2);
      color: #fff;
      font-weight: 700;
      white-space: nowrap;
}

.vip.main .vip_na thead th:first-child,
.vip.main .vip_na thead td:first-child {
      /* position: sticky; */
      left: 0;
      z-index: 4;
      background: var(--content-light-2);
}

.vip.main .vip_na thead td,
.vip.main .vip_na tbody td {
      min-width: 96px;
      text-align: center;
}

.vip.main .vip_na thead td span {
      display: inline-block;
}

.vip.main .vip_na tbody tr:nth-child(odd) td:not(:first-child) {
      background: var(--header-bg);
}

.vip.main .vip_na tbody tr:hover td,
.vip.main .vip_na tbody tr:hover th {
      background: var(--content-light-2);
}

.vip.main .vip-list .table::before,
.vip.main .vip-list .table::after {
      content: "";
      /* position: sticky; */
      top: 0;
      bottom: 0;
      width: 16px;
      pointer-events: none;
      z-index: 5;
}

.vip.main .vip-list .table::before {
      left: 0;
      background: linear-gradient(90deg, #0f1627, rgba(15, 22, 39, 0));
}

.vip.main.vip-list .table::after {
      right: 0;
      margin-left: auto;
      background: linear-gradient(270deg, #0f1627, rgba(15, 22, 39, 0));
}

.vip.main .toggle-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 14px;
      padding: 12px 14px;
      background: var(--content-light-2);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      cursor: pointer;
}

.vip.main .toggle-header .t_f {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
}

.vip.main .toggle-content {
      margin-top: 8px;
      padding: 12px 14px;
      background: var(--content-light-2);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      color: var(--text-primary);
}

@media (max-width: 960px) {
      .vip.main .vip-rade {
            padding: 14px;
      }

      .vip.main .mission.items .slick-arrow {
            display: none !important;
      }

      .vip.main .vip_na thead td,
      .vip.main .vip_na tbody td {
            min-width: 88px;
      }
}

.vip.main .ico-alone-bottom::before {
      content: "";
      display: inline-block !important;
      width: 12px !important;
      height: 12px !important;
      background: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>\<path d='M8 11L3 6h10L8 11z'/>\</svg>") no-repeat center / contain;
      position: relative;
}

@media (max-width: 768px) {
      .vip.main .mission.items li {
            width: auto !important;
      }

      .vip.main .vip-cont {
            padding: 12px 10px;
      }

      .vip.main .vip-rade h3 {
            font-size: 16px;
      }

      .vip.main .vip-buy li {
            flex-wrap: wrap;
      }

      .vip.main .vip_na thead th,
      .vip.main .vip_na thead td,
      .vip.main .vip_na tbody th,
      .vip.main .vip_na tbody td {
            padding: 10px 12px;
            font-size: 12px;
      }

      .vip.main .vip_na thead td,
      .vip.main .vip_na tbody td {
            min-width: 80px;
      }

      .vip.main .mission.items {
            overflow: hidden;
      }

      .vip.main {
            margin: 100px auto 0 auto;
      }
}

/* end vip_bonus  */