* {
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  font-family: Arial, sans-serif, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑';
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.hide {
  display: none !important;
}

.nouse {
  cursor: not-allowed !important;
}

input {
  width: 100%;
  height: 100%;
  border-radius: 0.08rem;
  color: #fff;
  font-size: 0.16rem;
  background-color: rgba(26, 34, 51, 0.7);
  outline: 0;
  border: 0.01rem solid rgba(26, 34, 51, 0.7);
  padding: 0 0.27rem;
  box-sizing: border-box;
}

#app {
  min-width: 12rem;
  width: 100%;
  max-width: 19.2rem;
  margin: 0 auto;
  /* height: 100%; */
  background-color: #1d2129;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

#app #login-area {
  min-width: 12rem;
  width: 100%;
  max-width: 19.2rem;
  height: 10.8rem;
  background: url(../img/login-bg.jpg?v=1) no-repeat;
  position: relative;
}

#app #ddt-pay {
  min-width: 12rem;
  width: 100%;
  max-width: 19.2rem;
  height: auto;
  font-size: 0.16rem;
  background-color: #202530;
  position: relative;
}

.app-nav {
  width: 19.2rem;
  height: 0.66rem;
  background-color: #1d2129;
  padding-left: 114px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 500;
}

.app-nav .app-logo {
  width: 1.6rem;
  height: 0.44rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -1.58rem -0.1rem;
  margin-right: 0.1rem;
}

.app-nav .app-logo2 {
  width: 1.28rem;
  height: 0.59rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -0.1rem -0.1rem;
}

.app-nav .nav-area {
  width: 8.73rem;
  height: 100%;
  position: relative;
  top: 0;
  left: 0.94rem;
  font-size: 0.16rem;
  color: #fff;
  user-select: none;
}

.app-nav .nav-area .steps-area {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.6rem;
  box-sizing: border-box;
}

.app-nav .nav-area .steps-area .steps-desc {
  color: #b3ceff;
  margin-right: 0.05rem;
}

.app-nav .nav-area .steps-area .steps-box {
  width: calc(100% - 2.4rem);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.app-nav .nav-area .steps-area .step-ico-area {
  height: 100%;
  width: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-nav .nav-area .steps-area .step-ico-area .step-ico {
  display: inline-block;
  width: 0.18rem;
  height: 0.12rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -2.73rem -2.96rem;
}

.app-nav .nav-area .steps-area .step-ico-area .step-ico.active {
  transform: rotate(180deg);
}

.app-nav .nav-area .steps-area .loginout {
  min-width: 0.8rem;
  width: auto;
  height: 0.34rem;
  line-height: 0.34rem;
  padding: 0 0.1rem;
  box-sizing: border-box;
  border: 0.01rem solid #3290f0;
  border-radius: 0.04rem;
  color: #fff;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.app-nav .nav-area .steps-ul {
  position: absolute;
  top: 0.66rem;
  width: 6.4rem;
  height: 2.1rem;
  background-color: #1d2129;
  z-index: 500;
  border-radius: 0.08rem;
}

.app-nav .nav-area .steps-ul li {
  width: 100%;
  height: 0.66rem;
  line-height: 0.66rem;
  border-bottom: 0.01rem solid #292e37;
  padding-left: 0.6rem;
  box-sizing: border-box;
  border-radius: 0.08rem;
  cursor: pointer;
}

.app-nav .nav-area .steps-ul li:last-child {
  border-bottom: none;
}

.app-nav .nav-area .steps-ul li.active {
  background-color: #3290f0;
}

.app-nav .nav-area .steps-ul li.nouse {
  cursor: not-allowed;
}

.login-area-desc {
  width: 5.1rem;
  height: 7.3rem;
  background-color: rgba(43, 53, 73, 0.7);
  border-radius: 0.2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.login-area-desc input {
  font-size: 0.16rem;
}

.login-area-desc input:focus {
  border: 0.01rem solid #3d5685;
}

.login-area-desc .login-box {
  width: 100%;
  height: 100%;
  padding-top: 0.44rem;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
}

.login-area-desc .login-title {
  width: 100%;
  height: auto;
  font-size: 0.18rem;
  color: #b4cfff;
  font-weight: 550;
  padding-left: 0.28rem;
  margin-bottom: 0.27rem;
}

.login-area-desc .login-input,
.login-area-desc .btn-login {
  width: 4.45rem;
  height: 0.64rem;
  border-radius: 0.08rem;
  font-size: 0.16rem;
}

.login-area-desc .account-box {
  margin-bottom: 0.12rem;
}

.login-area-desc .password-box {
  margin-bottom: 0.24rem;
  position: relative;
}

.login-area-desc .password-box input {
  font-size: 0.16rem;
  padding-right: 0.54rem;
  display: inline-block;
}

.login-area-desc .password-box .look-pwd {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 0.48rem;
  height: 100%;
  cursor: pointer;
}

.login-area-desc .password-box .look-pwd .look-area {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-area-desc .password-box .look-pwd .look-area .ico-look {
  display: inline-block;
  margin: 0 auto;
  width: 0.48rem;
  height: 0.32rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -0.69rem -2.96rem;
  transform: scale(0.5);
}

.login-area-desc .btn-login {
  line-height: 0.64rem;
  text-align: center;
  color: #fff;
  font-size: 0.16rem;
  background-color: #5484db;
  margin-bottom: 0.46rem;
  cursor: pointer;
  user-select: none;
}

.login-area-desc .login-line {
  width: 4.61rem;
  height: 0.02rem;
  background-color: #3d5685;
  margin-bottom: 0.42rem;
}

.login-area-desc .fb-google {
  width: 4.45rem;
  /* height: 1.58rem; */
  margin-bottom: 0.2rem;
}

.login-area-desc .fb-google .fb-login,
.login-area-desc .fb-google .google-login,
.login-area-desc .fb-google .apple-login {
  width: 100%;
  height: 0.7rem;
  font-size: 0.18rem;
  font-weight: 550;
  color: #fff;
  padding-left: 0.24rem;
  box-sizing: border-box;
  border-radius: 0.08rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;
}

.login-area-desc .fb-google .fb-login i,
.login-area-desc .fb-google .google-login i,
.login-area-desc .fb-google .apple-login i {
  display: inline-block;
}

.login-area-desc .fb-google .fb-login {
  margin-bottom: 0.12rem;
  background-color: #1a73e8;
}

.login-area-desc .fb-google .google-login {
  margin-bottom: 0.12rem;
  background-color: #942e15;
}

.login-area-desc .fb-google .apple-login {
  background-color: #000;
}

.login-area-desc .fb-google .fb-ico {
  width: 0.4rem;
  height: 0.4rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -3.38rem -2.1rem;
  margin-right: 0.64rem;
}

.login-area-desc .fb-google .google-ico {
  width: 0.39rem;
  height: 0.4rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -0.1rem -2.96rem;
  margin-right: 0.64rem;
}

.login-area-desc .fb-google .apple-ico {
  width: 0.4rem;
  height: 0.4rem;
  background: url(../img/apple.png) no-repeat;
  background-size: 100%;
  margin-right: 0.64rem;
}

.login-area-desc .login-others {
  width: 100%;
  height: auto;
  text-align: right;
  padding-right: 0.3rem;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.16rem;
}

.login-area-desc .login-others .others-tips {
  cursor: pointer;
  user-select: none;
}

.pop-login-others {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.pop-login-others .pop-others-tip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop-login-others .pop-tip-box {
  width: 5.58rem;
  height: 2.33rem;
  background: url(../img/pop-tip-bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding-top: 0.55rem;
  box-sizing: border-box;
}

.pop-login-others .pop-tip-box .login-close {
  width: 0.2rem;
  height: 0.2rem;
  position: absolute;
  top: 0.14rem;
  right: 0.2rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -2.97rem -2.28rem;
  cursor: pointer;
}

.pop-login-others .pop-tip-box p {
  width: 100%;
  height: auto;
  color: #b4cfff;
  font-size: 0.18rem;
  text-align: center;
  margin-bottom: 0.1rem;
}

.pop-login-others .pop-tip-box p span {
  color: #fff;
}

.pay-top {
  width: 19.2rem;
  height: 6.07rem;
  background: url(../img/ddtpay-bg.jpg?v=1) no-repeat;
  background-size: 100% 100%;
  background-position: top center;
}

.pay-page {
  min-width: 12rem;
  width: 100%;
  max-width: 19.2rem;
  height: auto;
  margin-top: -1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
}

.pay-page .pay-box {
  width: 11rem;
  margin-bottom: 0.4rem;
  background-color: #283145;
  border-radius: 0.1rem;
  box-shadow: 0.02rem 0.06rem 0.1rem 0 #1e212d;
}

.pay-box-desc {
  width: 100%;
  height: 100%;
  padding-top: 0.4rem;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  position: relative;
}

.pay-page .user-info {
  /* height: 2.8rem; */
  font-size: 0.16rem;
}

.pay-page .user-info .user-titlt {
  width: 100%;
  padding-left: 1.04rem;
  color: #fff;
  margin-bottom: 0.42rem;
}

.pay-page .user-info .user-titlt span {
  color: #b3ceff;
}

.pay-page .user-info .info-box {
  width: 4.1rem;
  height: 1.88rem;
}

.pay-page .user-info .info-box .info-input-area {
  width: 100%;
  height: 0.34rem;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.pay-page .user-info .info-box .info-input-area .info-name {
  width: calc(100% - 2.98rem);
  height: 100%;
  line-height: 0.34rem;
  color: #fff;
}

.pay-page .user-info .info-box .info-input-area .info-input {
  width: 2.98rem;
  height: 0.32rem;
  line-height: 0.32rem;
  padding-left: 0.18rem;
  box-sizing: border-box;
  color: #b8b8b8;
  border-radius: 0.04rem;
  border: 0.01rem solid #a1bae6;
  position: relative;
  user-select: none;
}

.pay-page .user-info .info-box .info-input-area .info-input .server-box {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.pay-page .user-info .info-box .info-input-area .info-input .server-box span {
  display: inline-block;
}

.pay-page .user-info .info-box .info-input-area .info-input .server-box .choose-ico {
  position: absolute;
  top: 50%;
  right: 0.12rem;
  transform: translateY(-50%) rotate(180deg);
  width: 0.1rem;
  height: 0.08rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -3.11rem -2.96rem;
}

.pay-page .user-info .info-box .info-input-area .info-input .server-box .choose-ico.active {
  transform: translateY(-50%) rotate(0deg);
}

.pay-page .user-info .info-box .info-input-area .pay-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-page .user-info .info-box .info-input-area .server-ul {
  position: absolute;
  top: 0.44rem;
  right: 0%;
  width: 2.98rem;
  height: 1.8rem;
  background-color: #283145;
  border: 0.01rem solid #a1bae6;
  border-radius: 0.04rem;
  z-index: 10;
  font-size: 0.16rem;
  overflow: auto;
  color: #b8b8b8;
}
.server-ul p{
  font-size: 0.19rem;
  color: #b4cfff;
  padding-left: 0.16rem;
  margin-top: 0.1rem;
}

.server-ul::-webkit-scrollbar {
  width: 10px;
}
.server-ul::-webkit-scrollbar-thumb {
  width: 10px;
  background: #5484db;
  border-radius: 4px;
}
.server-ul::-webkit-scrollbar-button:start{
  background: url(../img/ico_sprites.png);
  background-position: -341px -291px;
}
.server-ul::-webkit-scrollbar-button:end{
  background: url(../img/ico_sprites.png);
  background-position: -373px -293px;
}
.pay-page .user-info .info-box .info-input-area .server-ul li {
  width: 100%;
  height: 0.26rem;
  line-height: 0.26rem;
  padding-left: 0.16rem;
  box-sizing: border-box;
  cursor: pointer;
}

.pay-page .user-info .info-box .info-input-area .server-ul li.active {
  color: #b4cfff;
}

.pay-page .user-info .info-box .info-input-area .server-ul li:hover {
  background-color: #374462;
}

.pay-page .user-info .info-box .info-input-area:nth-child(2) {
  margin-bottom: 0.7rem;
}

.pay-page .user-info .info-box .btn-reset {
  width: 1.3rem;
  height: 0.36rem;
  line-height: 0.36rem;
  margin: 0 auto;
  background-color: #3290f0;
  border-radius: 0.18rem;
  color: #fff;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.pay-page .shop-choose {
  /* height: 6.1rem; */
  font-size: 0.16rem;
  padding-bottom: 0.5rem;
  position: relative;
}

.choose-titlt {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  padding-left: 1.04rem;
  box-sizing: border-box;
  color: #fff;
  margin-bottom: 0.24rem;
  font-size: 0.16rem;
}
.mycard-list .choose-titlt{
  margin-top: 0.3rem;
}

.choose-titlt span {
  color: #b3ceff;
}

.shop-list, .mycard-list{
  width: 9rem;
  overflow: hidden;
  margin: 0 auto;
}

.shop-list li, .mycard-list li {
  min-height: 1.2rem;
  height: auto;
  margin-bottom: 0.2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  float: left;
  margin-right: 0.1rem;
}
.shop-list li.active .price-shop, .mycard-list li.active .price-shop{
  background: url(../img/shop-bg-choose.png) no-repeat;
  background-size: 100% 100%;
}

.shop-list li .price-shop, .mycard-list li .price-shop {
  width: 2.15rem;
  min-height: 1.42rem;
  height: auto;
  background: url(../img/shop-bg.png?v=1) no-repeat;
  background-size: 100% 100%;
  position: relative;
  cursor: pointer;
}

.shop-list li .price-shop .shop-tip, .mycard-list li .price-shop .shop-tip {
  width: 1.24rem;
  height: 0.21rem;
  font-size: 0.14rem;
  line-height: 0.21rem;
  text-align: center;
  background: url(../img/shop-first.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  position: absolute;
  top: 0%;
  left: 0%;
}

.shop-list li .price-shop .shop-price, .mycard-list li .price-shop .shop-price {
  width: 1rem;
  height: auto;
  position: absolute;
  top: 0.55rem;
  left: 0rem;
  font-size: 0.16rem;
  color: #fff;
  text-align: center;
}

.shop-list li .price-shop .shop-price div, .mycard-list li .price-shop .shop-price div {
  width: 100%;
  /* text-align: center; */
}

.shop-list li .chicken-coins-num, .mycard-list li .chicken-coins-num {
  height: 0.3rem;
  line-height: 0.3rem;
  font-weight: 550;
  font-size: 0.3rem;
  position: relative;
  text-align: center;
}

.shop-list li .chicken-coins-num .look-chicken, .mycard-list li .chicken-coins-num .look-chicken {
  display: inline-block;
  font-size: 0.3rem;
  letter-spacing: -1px;
}
.shop-list li .chicken-coins-num .look-chicken span, .mycard-list li .chicken-coins-num .look-chicken span{
  color: #ffe169;
}

.shop-list li .chicken-coins-kinds, .mycard-list li .chicken-coins-kinds {
  width: auto;
  height: 0.14rem;
  line-height: 0.18rem;
  font-weight: 550;
  margin-top: 0.02rem;
  margin-bottom: 0.1rem;
  user-select: none;
  white-space: nowrap;
  font-size: 0.16rem;
}

.shop-list li .gift-others, .mycard-list li .gift-others {
  height: 0.16rem;
  line-height: 0.16rem;
  text-align: center;
  font-size: 0.12rem;
  font-weight: 550;
  line-height: 0.1rem;
  color: #6ffdcb;
}

.shop-list li .price-shop .shop-img, .mycard-list li .price-shop .shop-img {
  min-width: 0.9rem;
  width: auto;
  height: auto;
  position: absolute;
  top: 0.36rem;
  right: 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  flex-direction: column;
}

.shop-img .chicken-coins {
  width: 1rem;
  height: 0.83rem;
  background: url(../img/icon1.png) no-repeat;
  background-size: 100% 100%;
  margin: 0.1rem auto 0;
}
.shop-img .chicken-coins.coins1{
  background: url(../img/icon1.png) no-repeat;
  background-size: 100% 100%;
}
.shop-img .chicken-coins.coins2{
  background: url(../img/icon2.png) no-repeat;
  background-size: 100% 100%;
}
.shop-img .chicken-coins.coins3{
  background: url(../img/icon3.png) no-repeat;
  background-size: 100% 100%;
}
.shop-img .chicken-coins.coins4{
  background: url(../img/icon4.png) no-repeat;
  background-size: 100% 100%;
}
.shop-img .chicken-coins.coins5{
  background: url(../img/icon5.png) no-repeat;
  background-size: 100% 100%;
}
.shop-img .chicken-coins.coins6{
  background: url(../img/icon6.png) no-repeat;
  background-size: 100% 100%;
}
.shop-img .chicken-coins.coins7{
  background: url(../img/icon7.png) no-repeat;
  background-size: 100% 100%;
}
.shop-img .chicken-coins.coins8{
  background: url(../img/icon8.png) no-repeat;
  background-size: 100% 100%;
}


.shop-img .chicken-price {
  width: 1rem;
  height: auto;
  text-align: center;
  background-color: rgba(82, 155, 245, 0.5);
  font-size: 0.14rem;
  font-weight: 550;
  white-space: wrap;
  color: #fff;
  padding: 0.04rem 0;
  box-sizing: border-box;
  border-top-left-radius: 0.05rem;
  border-bottom-left-radius: 0.05rem;
  font-size: 0.14rem;
}

.pay-page .shop-choose .shop-list li .price-shop .shop-img .chicken-discount {
  color: #d3d3d3;
  font-size: 0.12rem;
}

.pay-page .shop-choose .shop-list li .price-shop .shop-img2, .mycard-list li .price-shop .shop-img2 {
  top: 0.05rem;
}

.pay-page .shop-choose .shop-list li .price-shop.active {
  background: url(../img/shop-bg-choose.png?v=2) no-repeat;
  background-size: 100% 100%;
}
.pay-page .shop-choose .shop-list li .price-shop.active .chicken-price{
  background-color: rgb(179, 206, 255, 0.5);;
}

.pay-page .shop-choose .shop-list li:last-child {
  margin-bottom: 0;
}

.pay-page .shop-choose .list-mask {
  width: 5.4rem;
  height: 8.3rem;
  background-color: rgba(40, 49, 69, 0.7);
  position: absolute;
  top: 0.84rem;
  z-index: 100;
}

.pay-page .shop-choose .list-mask li {
  width: 100%;
  height: 1.2rem;
  margin-bottom: 0.2rem;
  position: relative;
}

.pay-page .shop-choose .list-mask li .preview {
  position: absolute;
  top: 1.28rem;
  width: 100%;
  height: auto;
  background-color: #283145;
  border-radius: 0.1rem;
  border: 0.02rem solid #5484db;
  z-index: 100;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc {
  width: 100%;
  height: auto;
  border-radius: 0.1rem;
  padding: 0.12rem 0.38rem 0.22rem 0.22rem;
  box-sizing: border-box;
  color: #b6b9be;
  font-size: 0.16rem;
  position: relative;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-tip {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.1rem solid transparent;
  border-right: 0.1rem solid transparent;
  border-bottom: 0.1rem solid #5484db;
  top: -0.1rem;
  left: 0.8rem;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-tip::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.18rem solid transparent;
  border-right: 0.18rem solid transparent;
  border-bottom: 0.19rem solid #283145;
  position: absolute;
  left: -0.18rem;
  top: 0.03rem;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-tip2 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.1rem solid transparent;
  border-right: 0.1rem solid transparent;
  border-bottom: 0.1rem solid #5484db;
  top: -0.1rem;
  right: 1.6rem;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-tip2::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.18rem solid transparent;
  border-right: 0.18rem solid transparent;
  border-bottom: 0.19rem solid #283145;
  position: absolute;
  left: -0.18rem;
  top: 0.03rem;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-close {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  width: 0.16rem;
  height: 0.16rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -3rem -1.61rem;
  /* background: url(../img/preview-close.png) no-repeat;
                            background-size: 100% 100%; */
  cursor: pointer;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-title {
  margin-bottom: 0.09rem;
  font-weight: 550;
  font-size: 0.18rem;
  color: #fff;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-get {
  margin-bottom: 0.09rem;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-get .preview-get2 {
  color: #6ffdcb;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-others {
  margin-bottom: 0.2rem;
  line-height: 0.24rem;
}

.pay-page .shop-choose .list-mask li .preview .preview-desc .preview-buy {
  width: 100%;
  height: 0.4rem;
  border-radius: 0.08rem;
  line-height: 0.4rem;
  text-align: center;
  background-color: #3290f0;
  cursor: pointer;
  color: #fff;
}

.pay-page .pay-way {
  min-height: 8.14rem;
  height: auto;
  font-size: 0.16rem;
}

.pay-page .pay-way .pay-way-titlt {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  padding-left: 1.04rem;
  box-sizing: border-box;
  color: #fff;
  margin-bottom: 0.24rem;
}

.pay-page .pay-way .pay-way-titlt span {
  color: #b3ceff;
}

.pay-page .pay-way .pay-node {
  width: 7.13rem;
  height: auto;
  margin-bottom: 0.18rem;
}

.pay-page .pay-way .pay-node .pay-way2 {
  width: 100%;
  margin: 0 auto;
  height: auto;
}

.pay-way2-desc, .mycard-payway-desc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.payway-box {
  width: auto;
  height: auto;
  margin-top: 0.1rem;
  margin-left: 0.26rem;
  cursor: pointer;
  font-size: 0.14rem;
  position: relative;
  color: #fff;
}

.payway-box .payway-desc {
  width: 2.07rem;
  height: 0.96rem;
  background: url(../img/sure-order.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 11;
}

.payway-box .payway-desc.active {
  background: url(../img/sure-order2.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-acttip {
  width: 2.04rem;
  height: 0.38rem;
  position: relative;
  margin-top: -0.1rem;
  z-index: 9;
  line-height: 0.48rem;
  border: 0.01rem solid #353f55;
  text-align: center;
  color: #f79f1a;
}

.payway-box .payway-ico-area {
  width: auto;
  height: auto;
  position: absolute;
  top: 0.18rem;
  left: 0.25rem;
}

.payway-box .payway-ico-area .payway-ico {
  width: 0.77rem;
  height: 0.49rem;
  background-color: #fff;
  border-radius: 0.08rem;
}

.payway-box .payway-ico-area .payway-ico.pix {
  background: url(../img/pix.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.picpay {
  background: url(../img/picPay.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.pec {
  background: url(../img/pec.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.cash {
  background: url(../img/cash3.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.boletoflash {
  background: url(../img/bole_flash.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.banktransfer {
  background: url(../img/bank_transfer.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.boleto {
  background: url(../img/Boleto.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.bradesco {
  background: url(../img/bradesco2.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.itau {
  background: url(../img/Itau.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.santander {
  background: url(../img/santander.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.bancodobrasil {
  background: url(../img/bancodobrasil.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.caixa {
  background: url(../img/caixa2.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.oxxo {
  background: url(../img/oxxo.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.banorte {
  background: url(../img/banorte.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.bbva {
  background: url(../img/bbva.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.spei {
  background: url(../img/spei.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.servipag {
  background: url(../img/servipag.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.pagofacil {
  background: url(../img/pagofacil.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.rapipago {
  background: url(../img/rapipago.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.depBan {
  background: url(../img/depBan.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.codi {
  background: url(../img/code.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.pecCash {
  background: url(../img/pecCash.png) no-repeat;
  background-size: 100% 100%;
}

.payway-box .payway-ico-area .payway-ico.mercado {
  background: url(../img/mercado.png) #fff no-repeat;
  background-size: 100%;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.paypal-icon {
  background: url(../img/Wallet-Paypal.png) #fff no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.xsolla-icon {
  background: url(../img/Xsollalogo.png) #fff no-repeat;
  background-size: auto 100%;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.payermax {
  background: url(../img/payermax.png) #fff no-repeat;
  background-size: auto 100%;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.MercadoPago {
  background: url(../img/1_Mercado_Pago.png) #fff no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.PicPay {
  background: url(../img/2_PicPay.png) #fff no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.Klarna {
  background: url(../img/3_Klarna.png) #fff no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.Boletofast {
  background: url(../img/4_Boleto_fast.png) #fff no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.Papara {
  background: url(../img/5_Papara.png) #fff no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.Ininal {
  background: url(../img/6_Ininal.png) #fff no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.GPayEPin {
  background: url(../img/7_GPay_EPin.png) #fff no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.payway-box .payway-ico-area .payway-ico.onerWay {
  background: url(../img/Onerway.png) #fff no-repeat;
  background-size: auto 100%;
  background-position: center;
}

.payway-box .payway-ico-area .payway-name {
  margin-top: 0.04rem;
  width: 101%;
  text-align: center;
}

.payway-box .payway-price {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0%;
  min-width: 0.77rem;
  width: auto;
  height: auto;
  padding: 0.04rem 0;
  padding-left: 0.04rem;
  white-space: pre-wrap;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.3);
  font-weight: 550;
}

.pay-page .pay-way .pay-way-box {
  width: 7.13rem;
  min-height: 6.22rem;
  height: auto;
}

.pay-ways {
  width: 7.13rem;
  height: 1.65rem;
  background: url(../img/payway-bg2.png) no-repeat;
  background-size: 100% 100%;
  font-size: 0.18rem;
  cursor: pointer;
  margin-bottom: 0.1rem;
}

.pay-ways .pay-boxs {
  width: 100%;
  height: 1.09rem;
  padding-left: 0.38rem;
  padding-right: 0.4rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.13rem;
  position: relative;
}

.pay-ways .channel-act {
  position: absolute;
  top: 0%;
  right: 0%;
  min-width: 2.14rem;
  width: auto;
  height: 0.32rem;
  line-height: 0.32rem;
  font-size: 0.16rem;
  text-align: center;
  color: #f2e6b4;
  padding-left: 0.22rem;
  padding-right: 0.12rem;
  box-sizing: border-box;
  background: url(../img/act-bg.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .channel-act b {
  color: #fff;
  font-size: 0.18rem;
}

.pay-ways .pay-logos {
  width: 100%;
  height: 0.56rem;
  border-radius: 0.13rem;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  align-items: center;
}

.pay-ways .pay-logos i {
  display: inline-block;
  margin-left: 0.08rem;
}

.pay-ways .pay-logos i.pix-logo {
  width: 0.52rem;
  height: 0.19rem;
  background: url(../img/pix-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.picpay-logo {
  width: 0.64rem;
  height: 0.22rem;
  background: url(../img/picpay-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.pec-logo {
  width: 0.45rem;
  height: 0.25rem;
  background: url(../img/pec-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.cash-logo {
  width: 0.21rem;
  height: 0.2rem;
  background: url(../img/cash-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.boletoflash-logo {
  width: 0.56rem;
  height: 0.25rem;
  background: url(../img/boletoflash-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.banktransfer-logo {
  width: 0.19rem;
  height: 0.19rem;
  background: url(../img/banktransfer-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.boleto-logo {
  width: 0.44rem;
  height: 0.2rem;
  background: url(../img/boleto-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.bradesco-logo {
  width: 0.62rem;
  height: 0.13rem;
  background: url(../img/bradesco-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.itau-logo {
  width: 0.19rem;
  height: 0.19rem;
  background: url(../img/itau-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.santander-logo {
  width: 0.79rem;
  height: 0.14rem;
  background: url(../img/santander-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.bancodobrasil-logo {
  width: 0.22rem;
  height: 0.15rem;
  background: url(../img/bancodobrasil-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.caixa-logo {
  width: 0.45rem;
  height: 0.15rem;
  background: url(../img/caixa-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.oxxo-logo {
  width: 0.35rem;
  height: 0.15rem;
  background: url(../img/oxxo-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.banorte-logo {
  width: 0.22rem;
  height: 0.13rem;
  background: url(../img/banorte-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.bbva-logo {
  width: 0.4rem;
  height: 0.12rem;
  background: url(../img/bbva-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.spei-logo {
  width: 0.42rem;
  height: 0.26rem;
  background: url(../img/spei-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.servipag-logo {
  width: 0.55rem;
  height: 0.2rem;
  background: url(../img/servipag-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.pagofacil-logo {
  width: 0.68rem;
  height: 0.14rem;
  background: url(../img/pagofacil-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.rapipago-logo {
  width: 0.62rem;
  height: 0.14rem;
  background: url(../img/rapipago-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.depBan-logo {
  width: 0.74rem;
  height: 0.16rem;
  background: url(../img/depBan-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.codi-logo {
  width: 0.4rem;
  height: 0.24rem;
  background: url(../img/codi-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.pecCash-logo {
  width: 0.33rem;
  height: 0.33rem;
  background: url(../img/pecCash-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.mercado-logo {
  width: 2.49rem;
  height: 0.33rem;
  background: url(../img/mercado.png) no-repeat;
  background-size: 100%;
}

.pay-ways .pay-logos i.v5pay-logo {
  width: 0.76rem;
  height: 0.25rem;
  background: url(../img/v5pay-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.pingpong-logo {
  width: 0.99rem;
  height: 0.25rem;
  background: url(../img/pingpong-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.dukpay-logo {
  width: 0.43rem;
  height: 0.25rem;
  background: url(../img/dukpay-logo.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .pay-logos i.pagsmile-logo {
  width: 0.49rem;
  height: 0.25rem;
  background: url(../img/pagsmile-logo.png) no-repeat;
  background-size: 100% 100%;
}
.pay-ways .pay-logos i.paypal-icon-logo{
  width: 0.49rem;
  height: 0.25rem;
  background: url(../img/Wallet-Paypal.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.xsolla-icon-logo{
  width: 0.35rem;
  height: 0.3rem;
  background: url(../img/Xsollalogo.png) no-repeat;
  background-size:auto 100% ;
  background-position: center;
}
.pay-ways .pay-logos i.MercadoPago-logo{
  width: 0.7rem;
  height: 0.3rem;
  background: url(../img/1_Mercado_Pago.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.PicPay-logo{
  width: 0.7rem;
  height: 0.3rem;
  background: url(../img/2_PicPay.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.Klarna-logo{
  width: 0.7rem;
  height: 0.3rem;
  background: url(../img/3_Klarna.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.Boletofast-logo{
  width: 0.7rem;
  height: 0.3rem;
  background: url(../img/4_Boleto_fast.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.Papara-logo{
  width: 0.7rem;
  height: 0.3rem;
  background: url(../img/5_Papara.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.Ininal-logo{
  width: 0.7rem;
  height: 0.3rem;
  background: url(../img/6_Ininal.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.GPayEPin-logo{
  width: 0.7rem;
  height: 0.3rem;
  background: url(../img/7_GPay_EPin.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.onerWay-logo{
  width: 0.35rem;
  height: 0.35rem;
  background: url(../img/Onerway.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.pay-ways .pay-logos i.payermax-logo{
  width: 0.35rem;
  height: 0.35rem;
  background: url(../img/payermax.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.pay-ways .payway-ioc-area {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.pay-ways .payway-ioc-area .payway-ioc {
  width: 1.08rem;
  height: 0.53rem;
  border-radius: 0.08rem;
  margin-right: 0.12rem;
}

.pay-ways .payway-ioc-area .payway-ioc.v5pay {
  background: url(../img/V5pay.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .payway-ioc-area .payway-ioc.pingpong {
  background: url(../img/pingpong.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .payway-ioc-area .payway-ioc.dukpay {
  background: url(../img/dukpay2.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways .payway-ioc-area .payway-ioc.pagsmile {
  background: url(../img/PagSmile.png) no-repeat;
  background-size: 100% 100%;
}
.pay-ways .payway-ioc-area .payway-ioc.paypal-icon{
  background: url(../img/Wallet-Paypal.png) #fff no-repeat;
  background-position: center;
  background-size: 100% auto;
}
.pay-ways .payway-ioc-area .payway-ioc.xsolla-icon{
  background: url(../img/Xsollalogo.png) no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.pay-ways .payway-ioc-area .payway-ioc.payermax{
  background: url(../img/payermax.png) no-repeat;
  background-position: center;
  background-size: auto 100%;
}
.pay-ways .payway-ioc-area .payway-ioc.onerWay{
  background: url(../img/Onerway.png) no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.pay-ways .payway-ioc-area .payway-name {
  font-weight: 550;
}

.pay-ways .pay-ways-left {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-between;
}

.pay-ways .payway-price {
  color: #fff;
  font-weight: 550;
}

.pay-ways .payway-up {
  width: 0.18rem;
  height: 0.12rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -2.73rem -2.96rem;
  vertical-align: middle;
  margin-left: 0.1rem;
}

.pay-ways .payway-up.active {
  transform: rotate(180deg);
}

.pay-ways.active {
  background: url(../img/payway-bg2-choose2.png) no-repeat;
  background-size: 100% 100%;
}

.pay-ways.active2 {
  background: url(../img/payway-bg2-choose.png) no-repeat;
  background-size: 100% 100%;
}

.pay-page .sure-order {
  min-height: 7.3rem;
  height: auto;
  font-size: 0.16rem;
}

.sure-order-titlt {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  padding-left: 1.04rem;
  box-sizing: border-box;
  color: #fff;
  margin-bottom: 0.24rem;
}

.sure-order-titlt span {
  color: #b3ceff;
}

.sure-order-box {
  width: 6.56rem;
  height: auto;
  margin-bottom: 0.16rem;
}

.sure-order-box .order-info {
  width: 100%;
  height: 3.2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.sure-order-box .order-info .order-info-left {
  width: 2.84rem;
}

.sure-order-box .order-info .order-info-left .order-shop {
  width: 2.59rem;
  height: 1.41rem;
  background: url(../img/shop-bg.png?v=1) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 0.2rem;
  position: relative;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-tip {
  width: 1.24rem;
  height: 0.21rem;
  line-height: 0.21rem;
  font-size: 0.12rem;
  text-align: center;
  background: url(../img/shop-first.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-weight: 550;
  position: absolute;
  top: 0%;
  left: 0%;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-price {
  width: 1.3rem;
  height: auto;
  position: absolute;
  top: 0.6rem;
  left: 0.2rem;
  font-size: 0.16rem;
  color: #fff;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-price div {
  width: 100%;
  text-align: center;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-price .chicken-coins-num {
  height: 0.3rem;
  line-height: 0.3rem;
  font-weight: 550;
  font-size: 0.3rem;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-price .chicken-coins-kinds {
  width: auto;
  height: 0.14rem;
  line-height: 0.14rem;
  font-size: 0.14rem;
  font-weight: 550;
  margin-top: 0.02rem;
  margin-bottom: 0.1rem;
  user-select: none;
  position: relative;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-price .chicken-coins-kinds span {
  display: inline-block;
  white-space: nowrap;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-price .gift-others {
  height: 0.16rem;
  line-height: 0.16rem;
  text-align: center;
  font-size: 0.12rem;
  font-weight: 550;
  line-height: 0.1rem;
  white-space: nowrap;
  color: #6ffdcb;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img {
  min-width: 0.9rem;
  width: auto;
  height: auto;
  position: absolute;
  top: 0.1rem;
  right: 0%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  flex-direction: column;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins1 {
  width: 1rem;
  height: 0.7rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -3.2rem -1.3rem;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins2 {
  width: 0.76rem;
  height: 0.7rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -2.01rem -1.4rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins3 {
  width: 0.76rem;
  height: 0.7rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -2.04rem -1.4rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins4 {
  width: 0.88rem;
  height: 0.7rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -2.12rem -0.7rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins5 {
  width: 0.76rem;
  height: 0.7rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -0.1rem -2.15rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins6 {
  width: 0.86rem;
  height: 0.7rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -0.1rem -0.8rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins7 {
  width: 0.59rem;
  height: 0.5rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -3.38rem -0.77rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins8 {
  width: 0.74rem;
  height: 0.46rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -1.1rem -1.61rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins9 {
  width: 0.76rem;
  height: 0.51rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -1.16rem -0.89rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins10 {
  width: 0.8rem;
  height: 0.47rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -0.1rem -1.61rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins11 {
  width: 0.66rem;
  height: 0.47rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -3.38rem -0.1rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-coins12 {
  width: 0.75rem;
  height: 0.41rem;
  background: url(../img/ico_sprites.png) no-repeat;
  background-size: 4.14rem 3.81rem;
  background-position: -1.06rem -2.28rem;
  margin: 0 auto;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-price {
  width: 100%;
  height: auto;
  text-align: center;
  background-color: rgba(82, 155, 245, 0.5);
  font-size: 0.12rem;
  font-weight: 550;
  color: #fff;
  padding: 0.04rem 0;
  white-space: wrap;
  box-sizing: border-box;
  border-top-left-radius: 0.05rem;
  border-bottom-left-radius: 0.05rem;
  font-size: 0.14rem;
}

.sure-order-box .order-info .order-info-left .order-shop .shop-img .chicken-discount {
  color: #d3d3d3;
  font-size: 0.12rem;
}

.sure-order-box .order-info .order-info-left .order-info-box {
  width: 2.59rem;
  height: auto;
  color: #fff;
  font-size: 0.16rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.16rem;
}

.sure-order-box .order-info .order-info-left .order-info-box .order-accout-tip,
.sure-order-box .order-info .order-info-left .order-info-box .order-server-tip,
.sure-order-box .order-info .order-info-left .order-info-box .order-role-tip,
.sure-order-box .order-info .order-info-left .order-info-box .order-channel-tip {
  font-size: 0.14rem;
  width: 62%;
  display: inline-block;
  white-space: nowrap;
}

.sure-order-box .order-info .order-info-left .order-info-box .order-color {
  display: inline-block;
  width: 38%;
  color: #b4cfff;
  white-space: nowrap;
  /*  overflow: hidden;
                            text-overflow: ellipsis; */
  font-size: 0.12rem;
}

.sure-order-box .order-info .order-info-right {
  width: 3.74rem;
  height: auto;
  border: 0.02rem solid #5484db;
  border-radius: 0.1rem;
  position: relative;
}

.sure-order-box .order-info .order-info-right .introduce {
  width: 100%;
  height: 100%;
  padding: 0.12rem;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.14rem;
  color: #b6b9be;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.sure-order-box .order-info .order-info-right .introduce .introduce-title {
  font-size: 0.16rem;
  font-weight: 550;
  color: #fff;
  margin-bottom: 0.1rem;
}

.sure-order-box .order-info .order-info-right .introduce .introduce-get {
  margin-bottom: 0.06rem;
}

.sure-order-box .order-info .order-info-right .introduce .introduce-get2 {
  margin-left: 0.04rem;
  color: #6ffdcb;
}

.sure-order-box .order-info .order-info-right .introduce .introduce-tip {
  line-height: 0.2rem;
}

.sure-order-box .order-info .order-info-right .introduce::-webkit-scrollbar {
  display: none;
}

.sure-order-box .order-info .order-info-right .triangle-top {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0.09rem solid transparent;
  border-bottom: 0.09rem solid transparent;
  border-right: 0.1rem solid #5484db;
  top: 0.5rem;
  left: -0.1rem;
}

.sure-order-box .order-info .order-info-right .triangle-top::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.09rem solid transparent;
  border-bottom: 0.09rem solid transparent;
  border-right: 0.1rem solid #283145;
  position: absolute;
  left: 0.03rem;
  top: -0.09rem;
}

.sure-order-box .order-ammount-box {
  width: 100%;
  height: auto;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.sure-order-box .order-ammount-box .order-ammount-tip {
  width: 25%;
  font-size: 0.16rem;
}

.sure-order-box .order-ammount-box .order-ammount {
  width: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.14rem;
  color: #b4cfff;
}

.ask-email {
  width: 6.56rem;
  height: auto;
  margin-bottom: 0.26rem;
}

.ask-email .email-area {
  width: 4.22rem;
  height: 0.34rem;
  border: 0.01rem solid #89a3d7;
  background-color: #111622;
  padding-left: 0.08rem;
  box-sizing: border-box;
  border-radius: 0.03rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 0.1rem;
}

.ask-email .email-area .email-ico {
  display: inline-block;
  width: 0.23rem;
  height: 0.18rem;
  background: url(../img/email.png) no-repeat;
  background-size: 100% 100%;
  margin-right: 0.1rem;
}

.ask-email .email-area .email {
  width: calc(100% - 0.33rem);
  height: 0.34rem;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  padding-left: 0;
  padding-right: 0.1rem;
  box-sizing: border-box;
  font-size: 0.14rem;
}

.ask-email .email-area.active {
  border: 0.01rem solid red;
}

.ask-email .email-area.active::after {
  position: absolute;
  right: -0.37rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  content: '';
  width: 0.22rem;
  height: 0.22rem;
  background: url(../img/err-tip2.png) no-repeat;
  background-size: 100% 100%;
}

.ask-email .email-area.active2 {
  border: 0.01rem solid #89a3d7;
}

.ask-email .email-area.active2::after {
  position: absolute;
  right: -0.37rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  content: '';
  width: 0.22rem;
  height: 0.22rem;
  background: url(../img/err-tip.png) no-repeat;
  background-size: 100% 100%;
}

.ask-email .email-tip {
  width: auto;
  height: auto;
  color: #fff;
  font-size: 0.15rem;
}

.sure-order-notice {
  width: 7.56rem;
  height: auto;
  color: #2f78c5;
  font-size: 0.16rem;
  margin-bottom: 0.42rem;
}

.sure-order-notice p {
  margin-bottom: 0.16rem;
  line-height: 0.23rem;
}

.sure-order-notice p:last-child {
  margin-bottom: 0;
}

.order-buy {
  width: 4.44rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  border-radius: 0.08rem;
  color: #fff;
  background-color: #3290f0;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  margin-bottom: 0.34rem;
}

.pay-foot {
  width: 6.56rem;
  height: auto;
  margin: 0 auto;
  margin-bottom: 1.14rem;
  color: #9398a2;
  font-size: 0.16rem;
}

.pay-foot p {
  line-height: 0.2rem;
}

.pay-foot .foot-tip1,
.pay-foot span {
  color: #fff;
  font-weight: 550;
}

.pay-foot .foot-tip1,
.pay-foot .foot-tip2,
.pay-foot .foot-tip3,
.pay-foot .foot-tip4,
.pay-foot .foot-tip5 {
  margin-bottom: 0.15rem;
}

.pop-pay {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}

.pop-loginErr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.pop-loginErr .err-node {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pop-loginErr .err-node p {
  padding: 0.08rem 0.15rem;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  font-size: 0.16rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.04rem;
  user-select: none;
}

.langs{
  width: 100px;
  height: 22px;
  border: 1px solid #a9c3f1;
  border-radius: 4px;
  position: relative;
  color: #acacac;
  font-size: 14px;
  line-height: 22px;
  background: #283145;
  text-indent: 5px;
  cursor: pointer;
  margin: 0 10px;
}
.langs::after {
  position: absolute;
  content: '';
  border-top: 8px solid #acacac;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  right: 7px;
  top: 7px;
}
.lang-list{
  position: absolute;
  width: 100%;
  left: 0;
  top: 21px;
  display: none;
}
.langs:hover .lang-list{
  display: block;
}
.langs p {
  background: #374462;
  color: #a9c3f1;
}
.langs p:hover {
  background: #374462;
  color: #acacac;
}
.extra{
  position: absolute;
  left: 0.05rem;
  top: 0.03rem;
  padding: 0.03rem 0.15rem 0.03rem 0.1rem;
  background: #3785ee;
  font-size: 0.16rem;
  line-height: 0.2rem;
  font-weight: bold;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-top-left-radius: 0.15rem;
  border-bottom-right-radius: 0.3rem;
  color: #fff;
}
.extra span{
  color: #ffe534;
  margin-left: 0.05rem;
  margin-right: 0.05rem;
}
.extra1{
  width: 80%;
  position: absolute;
  left: 10%;
  top: 0.03rem;
  padding: 0.03rem 0;
  background: #3785ee;
  font-size: 0.16rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  color: #fff;
}
.extra1 span{
  color: #ffe169;
  margin: 0 0.05rem;
}
.pay-page .user-info .info-box .info-input-area .server-ul li{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plat-footer{
  padding: 60px 0;
  background-color: #2d3e5c;
  font-size: 14px;
  color: #cdd0e0;
}
.p-link{
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-link a{
  color: #cdd0e0;
  margin: 0 10px;
}
.plat-footer p{
  text-align: center;
  margin-top: 20px;
}
.contactus {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}
.contactus-wrap {
  position: absolute;
  width: 600px;
  height: 400px;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -200px;
  background: url(https://static-bm.wan.com/static/7/wartunelite/website/pc/images/contact.jpg) no-repeat;
}
.contact-close {
  width: 26px;
  height: 26px;
  position: absolute;
  right: 13px;
  top: 13px;
  cursor: pointer;
}
.contactus-mail {
  display: block;
  width: 158px;
  height: 18px;
  margin-left: 246px;
  margin-top: 260px;
}
.contact-link {
  width: 396px;
  height: 26px;
  margin: 44px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-link a {
  width: 50%;
  height: 100%;
}
.mycardbtn{
  width: 2rem;
  height: 0.7rem;
  position: absolute;
  right: 1rem;
  top: 0.1rem;
  cursor: pointer;
  background: url(../img/mycard.png) no-repeat;
  background-size: 100% auto;
  font-size: 0.16rem;
  color: #fff;
  z-index: 5;
  display: none;
}
.pop, .pop-tip{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}
.pop-tip{
  z-index: 99999;
}
.pop-cont{
  width: 11rem;
  height: 100%;
  background: #283145;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -5.5rem;
  border-radius: 0.3rem;
  overflow: hidden;
}
.pop-content{
  height: 94%;
  margin: 3% auto;
  overflow: auto;
}
.pop-content::-webkit-scrollbar {
  display: none;
}
.pop-close{
  width: 1rem;
  height: 1rem;
  font-size: 0.5rem;
  color: #fff;
  text-align: center;
  line-height: 1rem;
  position: absolute;
  left: 50%;
  margin-left: 4.5rem;
  top: 0;
  z-index: 10;
  cursor: pointer;
}
.mycard-paybox{
  min-height: 7rem;
}
.mycard-payway{
  width: 7.13rem;
  margin: 0 auto  ;
}
.mycard-order .sure-order-box,
.mycard-order .ask-email,
.mycard-order .sure-order-notice,
.mycard-order .order-buy
{
  margin: 0.2rem auto;
}
.mycard-order .order-buy{
  font-size: 0.2rem;
}
.mycard-order .sure-order-notice p{
  margin-bottom: 0;
}
.payway-ioc.mycard, .payway-ico.mycard {
  background: url(../img/mycard_icon.png) #fff no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.mycard-logo{
  width: 0.7rem;
  height: 0.3rem;
  background: url(../img/mycard_logo.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.descbtn{
  width: 2rem;
  position: fixed;
  left: 50%;
  margin-left: 5.5rem;
  top: 4.1rem;
  cursor: pointer;
  z-index: 99990;
}
.pop-tip-cont{
  width: 6rem;
  height: 3rem;
  background: #0d2749;
  border: 0.02rem solid #14487e;
  border-radius: 0.3rem;
  position: absolute;
  left: 50%;
  margin-left: -3rem;
  top: 50%;
  margin-top: -1.5rem;
  font-size: 0.2rem;
  color: #fff;
  text-align: center;
  line-height: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pop-tip-close{
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  left: 50%;
  margin-left: 2.5rem;
  top: 50%;
  margin-top: -1.5rem;
  cursor: pointer;
  font-size: 0.4rem;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
  z-index: 5;
}
.tip1{
  width: 4.5rem;
  border-bottom: 0.01rem solid #ccc;
  margin-bottom: 0.2rem;
  padding-bottom: 0.2rem;
}
.tip2{
  width: 4.5rem;
}