@charset "utf-8";
*{padding:0;margin:0;list-style:none;-webkit-box-sizing: border-box;box-sizing: border-box;font-family: "Arial", "SimHei", "STHeiti", Helvetica, STHeiTi, sans-serif; image-rendering: -webkit-optimize-contrast;}
body{font-family: "Arial", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;color:#fff;line-height:100%;-webkit-text-size-adjust:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);font-size: .24rem;}
em,address,i{font-style:normal}
a{color:#fff;text-decoration:none;cursor: pointer;}
a img{border:none;}
img{vertical-align:middle;max-width: 100%;}
img {
image-rendering:-moz-crisp-edges;
image-rendering:-o-crisp-edges;
image-rendering:-webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
input, button, select, textarea {
outline: none;
-webkit-appearance: none;border-radius: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none;
}
input[type="number"] {
 -moz-appearance: textfield;
}
table{ width: 100%; border-collapse:collapse; table-layout: fixed;}

::-webkit-scrollbar {
/*滚动条整体样式*/
width: .06rem; /*高宽分别对应横竖滚动条的尺寸*/
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
background: rgba(54, 57, 94, .3);
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
/* border-radius: .1rem; */
background: transparent;
}

html{font-size: 5.2083333334vw;}
@media screen and (min-width: 1920px) {
    html{
        font-size: 100px;
    }
}

.container{position: relative; z-index: 1; max-width: 19.2rem; height: 51.5rem; padding: 10.04rem 0 0; overflow: hidden; margin: 0 auto; color: #36395e; background: url(../images/bg.webp) top no-repeat #cfe9e9; background-size: 19.2rem auto;}
.main{ width: 14rem; margin: 0 auto; overflow: visible;}

.login-content{ position: relative; margin: .06rem 0 0; height: 1.05rem;}
.login-before{ position: absolute; left: 0; right: 0; width: 7.91rem; height: 1.85rem; margin: -.5rem auto 0; padding: .6rem .8rem .66rem .56rem; display: flex; justify-content: center; align-items: center; font-size: .3rem; text-transform: uppercase; font-weight: bold; color: #111c34; letter-spacing: .01rem; background: url(../images/login-before.png) no-repeat; background-size: contain;}
.login-before a{ margin: 0 0 0 .1rem; color: #164dc4;}
.login-after{ width: 8.72rem; height: 1.05rem; margin: 0 auto; padding: .12rem .65rem .18rem; display: none; justify-content: space-between; align-items: center; background: url(../images/login-after.png) no-repeat; background-size: contain;}
.login-after .current{ flex: 1; display: flex; align-items: center; font-size: .18rem; color: #111c34; line-height: 1.2;}
.login-after .current .label{ flex-shrink: 0; text-transform: uppercase;}
.login-after .current .character{ flex: 1; max-height: 2.4em; overflow: hidden; margin: 0 0 0 .06rem;}
.btn-switchAccount,
.btn-switchCharacter{ flex-shrink: 0; width: 1.74rem; height: .4rem; display: flex; justify-content: center; align-items: center; margin: 0 0 0 .3rem; color: #434343; font-size: .18rem; border: solid 1px #484848; border-radius: .1rem;}
.afterLogin .login-before{ display: none;}
.afterLogin .login-after{ display: flex;}

.maintitle{ width: 10.85rem; margin: .4rem auto;}

.packs{ padding: .04rem 0 0;}
.packs .maintitle{ width: 12.05rem;}
.packs-list{ position: relative; padding: .08rem 0 0 1.8rem; min-height: 6.7rem; display: flex; justify-content: center; flex-wrap: wrap;}
.packs-list::before{ content: ""; position: absolute; top: -.34rem; left: -1.24rem; width: 4.78rem; height: 7.75rem; background: url(../images/packs-people.png) no-repeat; background-size: contain; pointer-events: none;}
.packs-list .item{ position: relative; width: 5.41rem; height: 6.4rem; margin: 0 -.06rem;}
.packs-list .stock{ position: absolute; bottom: .44rem; right: .26rem; z-index: 2; display: flex; justify-content: center; align-items: center; width: 1.7rem; height: .26rem; font-size: .24rem; font-weight: bold; color: #fff; pointer-events: none;}
.packs-list .stock span{ margin: 0 .02rem;}
.packs-list .btn-buy{ position: absolute; bottom: .3rem; left: .26rem; right: .26rem; height: .8rem;}

.voucher-list{ position: relative; padding: .16rem 1.46rem 0 0; min-height: 7rem; display: flex; justify-content: center; flex-wrap: wrap;}
.voucher-list::before{ content: ""; position: absolute; top: -2.24rem; right: -2.62rem; width: 9.42rem; height: 10.67rem; background: url(../images/voucher-people.png) no-repeat; background-size: contain; pointer-events: none;}
.voucher-list .item{ position: relative; width: 5.41rem; height: 6.4rem; margin: 0;}
.voucher-list .btn-buy{ position: absolute; bottom: .3rem; left: .26rem; right: .26rem; height: 1.12rem;}

.diamond-text{ width: 9.58rem; margin: 0 auto; padding: .02rem 0 0;}
.diamond-list{ position: relative; padding: .26rem 0 0 0; min-height: 7rem; display: flex; justify-content: center; flex-wrap: wrap;}
.diamond-list .item{ position: relative; width: 3.38rem; height: 4.79rem; margin: 0 -.1rem .06rem;}
.diamond-list .btn-buy{ position: absolute; bottom: .3rem; left: .26rem; right: .26rem; height: .6rem;}

.token{ padding: .04rem 0 0;}
.token-list{ position: relative; padding: .08rem 0 0 0; min-height: 7rem; display: flex; justify-content: center; flex-wrap: wrap;}
.token-list .item{ position: relative; width: 3.38rem; height: 4.79rem; margin: 0 -.1rem .06rem;}
.token-list .btn-buy{ position: absolute; bottom: .3rem; left: .26rem; right: .26rem; height: .6rem;}

/* 弹窗 */
.pop{display: none; position: absolute; top:50%; left: 50%;  width: 7.02rem !important; height: 4.94rem !important; padding: .3rem; color: #324667; text-align: center;font-size: .24rem; line-height: 1.2; background: url(../images/pop.png) no-repeat; background-size: contain;}
.pop .b-close{position: absolute; top: -.02rem; right: -.02rem; z-index:100; width: .54rem; height: .53rem;cursor:pointer; background: url(../images/pop-close.png) no-repeat;background-size: contain;}

.pop2{ width: 4.76rem !important; height: 3.12rem !important; background-image: url(../images/pop2.png);}

.pop-m{ height: 100%; display: flex; flex-direction: column;}

.login-title{ flex-shrink: 0; height: 1rem; padding: .06rem 0 0; display: flex; justify-content: center; align-items: center; font-size: .3rem; color: #fff;}
.login-main{ flex: 1; display: flex; padding: .2rem .76rem 0;}
.login-left{ flex-shrink: 0; width: 1.6rem; margin: 0 .2rem 0 0;}
.logo2{ width: 1.58rem;}
.third-sign{ display: flex; justify-content: center; align-items: center; margin: .4rem 0 0;}
.btn-facebook{ display: inline-block; vertical-align: middle; width: .43rem; margin: 0 .14rem;}
.btn-google{ display: inline-block; vertical-align: middle; width: .43rem; height: .42rem; margin: 0 .14rem; background: url(../images/btn-google.png) no-repeat; background-size: 100% 100%; overflow: hidden;}
.btn-google > div{ width: 100%; height: 90%; display: flex; justify-content: center; align-items: center; opacity: 0.00000001;}
.btn-google > div > div{ transform: scale(2);}
.login-from{ flex: 1; display: flex; flex-direction: column; align-items: center;}
.login-from .tit2{ margin: 0 0 .06rem; font-size: .18rem; font-weight: normal; color: #fff;}
.f-item{ position: relative; width: 3.11rem; height: .76rem; padding: .2rem .28rem; margin: -.04rem auto; background: url(../images/itxt.png) no-repeat; background-size: contain;}
.itxt{ width: 100%; height: 100%; font-size: .18rem; color: #fff; border: none; background-color: transparent;}
.itxt::placeholder{ color: #fff;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* -webkit-transition-delay: 99999s; */
  -webkit-text-fill-color: #ffffff;
  transition: background-color 999999s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0px 1000px #452f48 inset;
}
#loginPsw:-webkit-autofill,
#loginPsw:-webkit-autofill:hover,
#loginPsw:-webkit-autofill:focus,
#loginPsw:-webkit-autofill:active {
  /* -webkit-transition-delay: 99999s; */
  -webkit-text-fill-color: #ffffff;
  transition: background-color 999999s ease-in-out 0s;
  -webkit-box-shadow: 0 0 0px 1000px #4b3e4d inset;
}
.login-from .checkbox{ display: flex; align-items: flex-start; margin: .08rem .06rem .08rem .2rem; font-size: .16rem; color: #324667; line-height: 1.5; text-align: left; cursor: pointer;}
.login-from .radio{ position: relative; flex-shrink: 0; width: .15rem; height: .15rem; margin: .04rem .08rem 0 0; background: #48384b; border-radius: .04rem;}
.checked .radio::before{ content: ""; position: absolute; top: 50%; left: 50%; width: .12rem; height: .09rem; transform: translate(-50%, -50%); background: url(../images/radio.png) no-repeat; background-size: contain;}
.btn-submit{ width: 2.22rem; height: .63rem; background: url(../images/btn-submit.png) no-repeat; background-size: contain; border: none; font-size: .24rem; color: #fff; font-weight: bold; text-transform: uppercase; cursor: pointer;}
.pop-selRole .login-from{ justify-content: space-between; padding: .26rem 0 .14rem;}
.pop-selRole .select{ position: absolute;top: 0;left: 0;z-index: 1; width: 100%;height: 100%;opacity: 0;cursor: pointer;text-align: center;}
.pop-selRole .select option{height: .4rem;}

.prompt-cont{ display: flex; justify-content: center; align-items: center; height: 100%; padding-top: .2rem; padding-bottom: .4rem;}

.pop-buy{ width: 70% !important; max-width: 1920px; min-width: 750px; height: 100% !important; background: #fff;}
.pop-buy .b-close{ top: .1rem; right: .1rem; display: flex; justify-content: center; align-items: center; width: .5rem; height: .5rem; background: #4f2d55; border: solid .022rem #4f2d55; border-radius: 50%; font-size: .3rem; color: #fff;}
.pop-buy iframe{width: 100%;height: 100%;}