/* sk custom */
:root {
  --safe-w: 18rem;
  --gap: .15rem;
  --theme: #fde07e;
}

::-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;
}

html, body {
  height: 100%;
  box-sizing: border-box;
}

html {
  font-size: calc(100vw / 28) !important;
}


body {
  background: #1b1e24;
  overflow-x: hidden;
  color: #ffe889;
  font-family: "Helvetica Neue",Helvetica,STHeiTi,Roboto,Arial,"MSゴシック",sans-serif;
  font-size: .27rem;
}

.container {
  padding-top: .9rem;
  background: #1b1e24;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.nav__wrap {
  box-shadow: none;
  background: #191819;
  height: .9rem;
  padding-right: .3rem;
}

.logo__wrap .game__name {
  font-size: 1em;
  color: #fde07e;
}
.nav__wrap .nav__wrap-wrap,
.logo__wrap .icon {
  height: 100%;
}
.logo__wrap .icon {
  margin-inline-end: .15rem;
}
.control__wrap .lang__wrap .lang-list {
  background: rgba(11, 22, 37, 80%);
  padding-top: 0;
  top: 100%;
  max-height: 50vh;
  overflow-y: auto;
}
.control__wrap .lang__wrap .lang-list .lang-item {
  position: relative;
  background: none;
  line-height: 1.2;
  white-space: nowrap;
}
.control__wrap .lang__wrap .lang-list .lang-item::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--lang-select-item-line,linear-gradient(90deg,rgba(255,255,255,0%),rgba(255,255,255,30%) 20%,rgba(255,255,255,30%) 80%,rgba(255,255,255,0%) 100%));
}
.control__wrap .lang__wrap .lang-list .lang-item:first-of-type:before {
  display: none;
}
.control__wrap .lang__wrap .lang-list .lang-item:hover {
  background-color: #07536c;
}
.main .step-three .game__banner {
  max-width: 100%;
}
.main {
  width: 100%;
  flex: auto;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  background: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/bg.jpg) no-repeat center 2rem / 28rem auto;
}
.page__footer,
.step-one,
.step-two,
.step-three .content__box,
.nav__wrap .nav__wrap-wrap {
  max-width: var(--safe-w, 18rem);
  margin: 0 auto;
  width: 100%;
}
.main .step__content {
  min-height: calc(100vh - 3.5rem);
}
.stage[data-stage="login"] {
  min-height: 100%;
}
.main .step-one {
  display: flex;
  flex-direction: column;
  height: calc(100% - 1rem);
  min-height: unset;
  margin: .5rem auto
}
.step-one .step__conten-wrap {
  flex: 1;
}
footer .email__link {
  text-decoration: none;
  color: #b0b0b0;
  font-size: 0.85em;
}
.page__footer #igg-footer {
  padding: 0;
}
.page__footer #igg-footer .igg_logo {
  padding: 0;
  margin-bottom: .15rem;
}
.page__footer #igg-footer .igg_logo img {
  height: .75rem;
}
.page__footer #igg-footer .copyright p {
  color: #6a6a6a;
}

#igg-footer .copyright a, #igg-footer .copyright p {
  font-size: 0.85em !important;
}

#bannerPicture img {
  /* content: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/banner.jpg); */
  width: 100%;
  height: 100%;
  object-fit: cover;
  height: 1.92rem;
}
.main .step-three .game__banner + .content__box {
  position: relative;
  margin-top: 0;
  padding: .15rem .2rem;
  color: #e8d499;
  display: flex;
  align-items: center;
  z-index: 1;
}
.game__banner + .content__box::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  left: 50%; top: 0; bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  background: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/userinfo-bg.png) no-repeat center / 100% 100%;
}
.main .game__banner + .content__box .common__tit {
  color:  inherit;
  margin-bottom: 0;
}

.user__infos {
  display: flex;
  align-items: center;
}

.main .game__banner + .content__box .user__infos-item {
  flex-direction: column;
  line-height: 1.5;
  text-align: center;
  color: #e8d599;
}
.main .step-three .content__box .user__infos-item .infos-item-txt {
  font-size: .22rem;
  line-height: 1.2;
}
.main .game__banner + .content__box .user__infos-item .infos-item-name {
  color: #fff;
}


.main .step-three .content__box {
  background: none;
  box-shadow: none;
  padding: 0 .2rem;
}

.main .step-three .content__box .common__tit2 {
  color: #fde07e;
  left: 0;
  margin: .3rem 0;
  font-size: 1em;
  padding-left: .45rem;
  padding-right: .45rem;
}
.main .step-three .content__box .common__tit2::before {
  background-color: #915f25;
  left: .2rem;
}
.main .step-three .content__box .method__box {
  /* --gap: .05rem; */
}
/* .main .step-three .content__box .product__box, 
.main .step-three .content__box .method__box {
  margin-left: calc(var(--gap) * -1);
  margin-right: calc(var(--gap) * -1);
} */

.main .step-three .content__box .method__items {
  background: #f3f3f3;
  margin-left: var(--gap);
  margin-right: var(--gap);
  width: calc((100% / 6) - (var(--gap) * 2));
  box-sizing: border-box;
  max-width: unset;
  margin-bottom: .2rem;
  border-color: #2a3142;
  /* box-shadow: 0 0 0 0.04rem #2a3042; */
  box-shadow: none;
  transition: color .25s;
  padding: .06rem;
  /* border-width: 0.04rem; */
}
.main .step-three .content__box .method__items.is-active,
.main .step-three .content__box .method__items:hover {
  border-color: #dfbb60;
  box-shadow: 0 0 0 0.04rem #dfba60;
  /* box-shadow: none; */
}

.main .step-three .content__box .product__items:nth-of-type(4n),
.main .step-three .content__box .method__items:nth-of-type(4n) {
  margin-right: var(--gap);
}

.main .step-three .content__box .product__items {
  width: calc((100% / 5) - (var(--gap) * 2));
  margin-left: var(--gap);
  margin-right: var(--gap);
  max-width: unset;
  box-sizing: border-box;
  background: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/item-bg.jpg) no-repeat center / 100% 100%;
  border: .02rem solid #efc65a;
  transition: background-size .5s ease-in-out, box-shadow .25s;
}


.main .step-three .content__box .product__items:hover .product-txt,
.main .steps__wrap .step__item.is-active::after,
.main .step-three .content__box .product__status .status__item .checkbox.checked,
.main .step-three .content__box .user__infos-item .change-user,
.main .step-three .content__box .product__items .product-txt,
.main .steps__wrap .step__item.is-active .step__item-num {
  /* background: #9a6b3e; */
  background: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/bottom-bg.jpg) no-repeat center / 100% 100%;
}
.main .steps__wrap ,
.main .step__conten-wrap {
  background-color: rgba(0, 0, 0, .35);
}
.main .steps__wrap {
  padding-top: 1.5rem;
  overflow: visible;
}
.main .step-one .game__about .game__name,
.main .steps__wrap .step__item .step__item-txt {
  color: #6a6a6a;
}
.main .steps__wrap .step__item .step__item-txt {
  font-size: inherit;
  line-height: 1.2;
}
.main .step-one .game__about .game__name {
  margin-top: .1rem;
}
.main .steps__wrap .step__item .step__item-num {
  color: #221a0b;
  font-weight: 700;
  text-shadow: 0 .02rem 0 rgba(255, 255, 255, .5);
  font-size: inherit;
}
.main .steps__wrap .step__item.is-active .step__item-num {
  border-color: #deba5f;
}
.main .steps__wrap .step__item.is-active .step__item-txt {
  color: #fde17d;
}

.main .step-three .content__box .method__items .radio__box {
  border: none;
  background: #333847;
  width: .22rem;
  height: .22rem;
  position: relative;
}
.main .step-three .content__box .method__items.is-active .radio__box i {
  background: #deba5f;
  width: .14rem;
  height: .14rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main .step-three .content__box .method__items .method-img {
  height: auto;
}
.main .step-three .content__box .method__items .method-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 261 / 67;
  -o-object-fit: contain;
  object-fit: contain;
}
.main .step-three .content__box .product__items .product-img {
  padding: 0;
  min-height: unset;
}
.main .step-three .content__box .product__items .product-img img {
  max-width: 80%;
  max-height: 2.03rem;
  object-fit: contain;
}
.main .step-three .content__box .product__items .product-txt {
  font-size: 1.25em;
  color: #22190b;
  font-weight: 700;
  text-shadow: 0 .02rem 0 rgba(255, 255, 255, .5);
  min-height: .86rem;
  line-height: 1;
}
.main .step-three .content__box .product__items .product-img .product-name,
.product-amount {
  font-size: 1em;
}

.main .step-three .content__box .product__items:hover {
  border-color: #efc65a;
  box-shadow: 0 0 .1rem #efc65a;
  background-size: 105% 105%;
}

.product-amount .old {
  color: #302209;
  opacity: 1;
  line-height: 1;
}
.product-amount .amount {
  display: block;
}
.product-amount .new {
  color: #fff;
}

.product-tag {
  background: #f85016;
  font-size: .24rem;
  padding-top: 1rem;
  color: #fff6c5;
  text-shadow: 0 .02rem 0 rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  left: auto;
  right: 0;
  transform: translate(50%, -50%) rotate(45deg);
}
.product-tag::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/money.png) no-repeat center / contain;
}
.control__wrap {
  font-size: inherit;
}
.control__wrap .out {
  background-image: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/out.png);
}
.control__wrap .lang__wrap .lang-icon {
  background-image: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/lang.png);
}

.control__wrap .login {
  color: #e8d499;
}

.control__wrap .lang__wrap {
  width: auto;
  height: auto;
}
.control__wrap .out,
.control__wrap .lang__wrap .lang-icon {
  width: .7rem;
  height: .9rem;
  margin: 0;
}
.control__wrap .lang__wrap .lang-icon,
.control__wrap .out {
  background-size: .4rem auto;
}
.proup-mask .proup__inner{
  /* min-height: 2.5rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  padding-bottom: .5rem;
  background: none;
  border: none;
  color: #b1b8c0;
  transform: translateX(-50%) translateY(-50%) translateZ(1px); */
  max-width: 9rem;
  background-color: #915e23;
}
/* .proup-mask .proup__inner::before {
  position: absolute;
  z-index: -1;
  content: "";
  transform: translateZ(0px);
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-style: solid;
  border-width: 0.01rem 0.9rem 0.9rem;
  border-image: url(//statics-global.igg.com/assets/nc/sk/events/2024/pre-register/default/prod/assets/dialog-bg.png) 1 90 90 fill / 1 / 0 stretch;
  filter: brightness(1.2);
} */
.proup-mask .proup__inner .proup__bd .info-items .info-items-txt,
.proup-mask .proup__inner .proup__hd,
.proup-mask .proup__inner .proup__bd {
  color: #fff;
}

.proup-mask .proup__inner .proup__hd {
  font-size: 1.15em;
}
.proup-mask .proup__inner .proup__bd .info-items .info-items-txt,
.proup-mask .proup__inner .proup__bd .info-items,
.proup-mask .proup__inner .proup__bd {
  font-size: 1em;
}

.proup-mask .proup__inner .proup__bd .info-items .pay-num b {
  color: #e8d499 !important;
}

.proup-mask .proup__inner .proup__bd .info-items .info-items-tit {
  color: var(--theme);
}

.proup-mask .proup__inner .proup__bd .proup__btns {
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}

.proup-mask .proup__inner .proup__bd .btns-item {
  background: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/bottom-bg.jpg) no-repeat center / 100% 100%;
  min-width: 3rem;
  max-width: 80%;
  color: #22190b;
  font-weight: 700;
  font-size: 1.15em;
  display: flex;
  width: fit-content;
  text-shadow: 0 .02rem 0 rgba(255, 255, 255, .5);
  min-height: .72rem;
  transition: background .25s;
}

.proup-mask .proup__inner .proup__bd .btns-item:hover {
  background: url(//statics-global.igg.com/assets/nc/sk/payment/custom/img/bottom-bg.jpg) no-repeat center / 110% 110%;
}
.proup-mask .proup__inner .proup__bd .btns-item:first-child:last-child {
  margin: 0 auto;
  min-width: 4rem;
}

.proup-mask .proup__inner .proup__bd .btns-item.btn-cancel {
  color: #fde07e;
  border-color: #fde07e;
  text-shadow: none;
}
.proup-mask .proup__inner .proup__bd .btns-item.btn-cancel:hover {
  background-color: rgba(0, 0, 0, .1);
  background-image: none;;
}

.proup-mask .proup__inner .proup__close {
  width: .3rem;
  height: .3rem;
  filter: brightness(2);
}

.main .step-two .main__info .info__details-item {
  border-color: #333;
}

.main .step-two .main__info .info__details-item .item-sel-wrap .default-val {
  color: #000;
}


.main .step-three .content__box .product__status .status__item .checkbox,
.main .step-three .content__box .product__status .status__item .checkbox {
  margin-inline-end: .1rem;
}
.arb .main .step-three .content__box .product__items:nth-of-type(4n), 
.ara .main .step-three .content__box .product__items:nth-of-type(4n),
.arb .main .step-three .content__box .product__items, 
.ara .main .step-three .content__box .product__items {
  margin-right: var(--gap);
  margin-left: var(--gap);
}
.arb .main .step-three .content__box .common__tit2, .ara .main .step-three .content__box .common__tit2 {
  right: 0;
}
.arb .nav__wrap, .ara .nav__wrap {
  padding-left: .2rem;
  padding-right: .2rem;
}
.arb .proup-mask .proup__inner .proup__bd .info-items .pay-num ,
.ara .proup-mask .proup__inner .proup__bd .info-items .pay-num {
  text-align: left;
}
.arb .proup-mask .proup__inner .proup__close ,
.ara .proup-mask .proup__inner .proup__close {
  right: auto;
  left: .1rem;
}

.main .step-one .step-tips {
  font-size: 1em;
}


@media (max-width: 1440px) {
  html {
    font-size: calc(100vw / 19.2) !important;
  }
}
@media screen and (max-width: 960px) {
  html {
    font-size: calc(100vw / 10.8) !important;
  }

  body {
    font-size: .32rem;
  }
  .main .step-three .content__box .product__box, .main .step-three .content__box .method__box {
    justify-content: flex-start;
  }
  .main .steps__wrap {
    margin-bottom: 0;
  }

  .main .steps__wrap .step__item .step__item-num {
    width: .6rem;
    height: .6rem;
  }
  .main .steps__wrap .step__item {
    margin-left: 1.2rem;
    margin-right: 1.2rem;
  }
  .main .steps__wrap .step__item::after {
    width: 2.7rem;
  }
  .main .step-one .game__about .game__icon {
    width: 3rem;
    height: 3rem;
  }
  .main .step-one .game__about .game__name {
    font-size: 1.35em;
  }
  .main .login__btn {
    height: 1rem;
    font-size: 1.15em;
    width: fit-content;
    min-width: 3.5rem;
  }
  .main .step__content {
    min-height: unset;
  }
  .main .step-one {
    margin: .5rem 0;
  }
}
@media (orientation: portrait) and (max-width: 767px) {
  /* html {
    font-size: calc(100vw / 10.8) !important;
  }

  body {
    font-size: .32rem;
  } */

  .main .step-three .content__box .product__items:nth-of-type(2n) {
    margin-right: var(--gap);
  }
  .main .step-three .content__box .product__items,
  .main .step-three .content__box .method__items {
    width: calc((100% / 3) - (var(--gap) * 2));
  }

  .proup-mask .proup__inner {
    max-width: 100%;
  }
  .bannerPicture img {
    height: 1.5rem;
  }
  .main .step-three .game__banner + .content__box,
  .arb .nav__wrap, .ara .nav__wrap,
  .main .step-three .content__box {
    padding-left: .3rem;
    padding-right: .3rem;
  }
  .user__infos {
    flex: 1;
  }
  .control__wrap .lang__wrap .lang-list .lang-item {
    font-size: .32rem;
    min-height: .88rem;
    min-width: 2.5rem;
  }
}