/* common reset */

::-webkit-scrollbar {
  width: .1rem;
  height: .1rem;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .25);
  border: 1px solid transparent;
  border-radius: 3em;
}

.nav__wrap-wrap,
.logo__wrap {
  height: 100%;
}

.product-amount .new {
  color: var(--amount-new, inherit);
  font-weight: bold;
}

.proup-mask .proup__inner .proup__bd .proup__btns {
  justify-content: center;
}

.proup-mask .proup__inner .proup__close {
  background: var(--close-color);
  mask: url(https://statics.igg.com/assets/igg/2022/third-party-payment/img/close.png) no-repeat center / .25rem .25rem;
  width: .5rem;
  height: .5rem;
  top: 0; right: 0;
}
.proup-mask .proup__inner .proup__close:hover {
  filter: brightness(.8);
}
.info__details-item .item-sel-wrap  .sel-val ,
.info__details-item .item-sel-wrap .default-val {
  color: #000;
}

.main .step-three .content__box .product__items,
.main .step-three .content__box .product__items:nth-of-type(4n),
.main .step-three .content__box .method__items,
.main .step-three .content__box .method__items:nth-of-type(4n) {
  margin-right: var(--item-gap);
  margin-left: var(--item-gap);
}
.main .step-three .content__box .product__box,
.main .step-three .content__box .method__box {
  margin-left: calc(var(--item-gap) * -1);
  margin-right: calc(var(--item-gap) * -1);
}
.main .step-three .content__box .product__items,
.main .step-three .content__box .method__items {
  width: calc(var(--item-w) - var(--item-gap) * 2 - var(--item-bd-w, 0.02rem) * 2);
}

/* dh custom */
:root {
  --safe-w: 18rem;
  --gap: .15rem;
  --theme-color: #395fa3;
  --theme-dark-color: #2e4578;
  --body-bg: #121627;
  --step-active-bg: var(--theme-color);
  --item-gap: .18rem;
  --item-w: 25%;
  --item-active-bd: var(--theme-color);
  --item-active-radio: #2d3653;
  --close-color: #999999;
  --nav-bg: #464649;
  --nav-h: .85rem;
  --box-gap: .2rem;
  --sitename-color: #f0d6a8;
  --amount-new: #df7b06;
}
body {
  background: var(--body-bg);
}

.nav__wrap {
  padding-bottom: .28rem;
  box-sizing: border-box;
  background: var(--nav-bg) url(https://statics-global.igg.com/assets/nc/dh/payment/custom/img/hd-bg.png) no-repeat center bottom / 100% auto;
  box-shadow: none;
}

.logo__wrap .game__name {
  color: var(--sitename-color);
}

.container {
  background: var(--body-bg) url(https://statics-global.igg.com/assets/nc/dh/payment/custom/img/bg.jpg) no-repeat center bottom / 100% auto;
  box-shadow: none;
  padding-top: calc(var(--nav-h) + var(--box-gap));
}
.main .step-three .content__box {
  margin-top: var(--box-gap);
}
.proup-mask .proup__inner .proup__bd .btns-item,
.main .step-three .content__box .product__items:hover .product-txt,
.main .step-three .content__box .product__items .product-txt,
.main .step-three .content__box .product__status .status__item .checkbox.checked,
.main .steps__wrap .step__item.is-active::after,
.main .steps__wrap .step__item.is-active .step__item-num {
  background: var(--theme-color);
}

.main .step-three .game__banner + .content__box {
  background: url(https://statics-global.igg.com/assets/nc/dh/payment/custom/img/userinfo-bg.jpg) no-repeat center / 100% 100%;
}
.main .step-three .content__box .user__infos-item .infos-item-name,
.main .step-three .game__banner + .content__box .common__tit {
  color: #fff;
}
.main .step-three .game__banner + .content__box .infos-item-txt {
  color: #f0d6a8;
}
.main .step-three .content__box .user__infos-item .change-user {
  color: #df7b06;
}


.main .step-three .content__box .product__items:hover,
.main .step-three .content__box .method__items:hover,
.main .step-three .content__box .method__items.is-active {
  border-color: var(--item-active-bd);
  box-shadow: 0 0 0 .04rem var(--item-active-bd);
}
.main .step-three .content__box .method__items.is-active .radio__box i {
  background: var(--item-active-radio);
}

.proup-mask .proup__inner {
  border: none;
  border-radius: 0;
}
.proup-mask .proup__inner .proup__bd .info-items .pay-num b,
.proup-mask .proup__inner .proup__bd .info-items .info-items-tit {
  color: var(--theme-color) !important;
}

.proup-mask .proup__inner .proup__bd .btns-item {
  min-height: .48rem;
  border-radius: 3em;
  padding-top: .12rem;
  padding-bottom: .12rem;
  width: fit-content;
  min-width: 2.5rem;
}

.proup-mask .proup__inner .proup__bd .btns-item:first-child:last-child {
  min-width: 3.5rem;
}

.proup-mask .proup__inner .proup__bd .btns-item:hover {
  background: var(--theme-dark-color);
}

.proup-mask .proup__inner .proup__bd .btns-item.btn-cancel {
  color: var(--theme-color);
  border-color: currentColor;
  background: none;
}
.proup-mask .proup__inner .proup__bd .btns-item.btn-cancel:hover {
  background: transparent;
  filter: brightness(1.2);
}

@media screen and (max-width: 960px) {
  :root {
    --box-gap: .12rem;
    --item-w: 50%;
  }
  .main .step-three .content__box .product__items:nth-of-type(2n),
  .main .step-three .content__box .method__items:nth-of-type(2n) {
    margin-right: var(--item-gap);
  }

  /* custom */
  .nav__wrap {
    background: var(--nav-bg);
    padding-bottom: 0;
  }
  .container {
    padding-top: var(--nav-h);
  }
  .control__wrap {
    font-size: inherit;
  }
  .logo__wrap .game__name {
    font-size: 1.3em;
  }
  .main .step-one .game__about .game__name {
    color: inherit;
  }
  .main .steps__wrap {
    margin-bottom: var(--box-gap);
    background: none;
    border-bottom: var(--box-gap) solid #15192b;
  }
  .main .steps__wrap .step__item .step__item-txt {
    color: #fff;
  }
  .main .steps__wrap .step__item .step__item-num {
    color: var(--theme-color);
    border-color: var(--theme-color);
    border-width: .05rem;
    box-shadow: 0 0 .05rem rgba(0, 0, 0, .25);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: var(--theme-color);
  }
  .main .steps__wrap .step__item.is-active .step__item-num {
    color: var(--theme-color);
    font-weight: bold;
    background: #fff;
  }
  .main .steps__wrap .step__item::after {
    background: var(--theme-color);
  }
  .main .steps__wrap .step__item.is-active::after {
    background: #d9dede;
  }
  .main .step__conten-wrap {
    background: none;
  }
  .main .step-two,
  .main .step-one {
    background: radial-gradient(at center, #344370, #1a1e35);
    color: #fff;
  }
  
  .main .step-one .step-tips i {
    background-color: #fff;
    color: #15192c;
  }
  .main .step-one .step-tips {
    color: #fff;
  }
}
@media (orientation: portrait) and (max-width: 767px) {
  :root {
    --item-w: 50%;
  }
  .proup-mask .proup__inner {
    padding-left: .25rem;
    width: 90%;
  }
  .proup-mask .proup__inner .proup__bd .btns-item {
    font-size: .2rem;
    min-width: unset;
    flex: 1;
  }
}