/* 清除所有元素的边距和内边距 */

* {

    margin: 0;

    padding: 0;

}



/* 清除所有元素的默认样式 */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

}



/* 清除链接默认样式 */

a {

    text-decoration: none;

    color: inherit;

}



/* 清除列表默认样式 */

ul,
ol {

    list-style: none;

}



/* 清除图片默认边框 */

img {

    border: none;

}



/* 清除表格默认边框 */

table {

    border-collapse: collapse;

    border-spacing: 0;

}

html {
    background: #131311;
}

ul,
li {
    list-style: none;
}


.list {
    display: flex;
    width: 9.5278rem;
    margin: auto;
    margin-top: .75rem;
    font-family: HarmonyOS Sans;
    font-weight: 500;
    color: #F9FCFC;
    flex-wrap: wrap;
}

.item-content {
    width: 2.75rem;
    border-radius: .1389rem;
    box-sizing: border-box;
    margin-right: .6389rem;
    margin-bottom: .6389rem;
    background: #343041;
}

.item-count {
    padding-top: 0.375rem;
    /* padding-bottom: 0.389rem; */
    background: #292929;
    box-sizing: border-box;
    margin: .0556rem;
    padding-bottom: 0.3472rem;
}

.active {

    padding: 1px;
    background: linear-gradient(270deg, #F482FD, #57B6FA);


}

.item-content:nth-child(3n) {
    margin-right: 0px;
}

.item-select:nth-child(3n) {
    margin-right: 0px;
}

.item-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

}

.item-img {
    width: .5rem;
    height: .5rem;
    display: flex;

}

.item-img img {
    width: .5rem;
    height: .5rem;
}

.count {
    font-size: .3889rem;
    margin-left: .125rem;
}

.give-count {
    font-size: .3056rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #F9FCFC;
    display: flex;
    justify-content: center;
}

.price {
    font-size: .5rem;
    font-family: HarmonyOS Sans;
    font-weight: 500;
    color: #F9FCFC;
    padding: .1389rem 0px;
    border-radius: .1389rem;
    text-align: center;
}



.phone {
    display: flex;
    justify-content: center;
}

input {
    width: 9.5278rem;
    height: 1.5rem;
    background: #292929;
    border: 2px solid #515252;
    border-radius: 10px;
    text-align: center;
    margin: auto;
}

::-webkit-input-placeholder {
    font-size: 0.5rem;
    font-family: HarmonyOS Sans SC;
    font-weight: 400;
    color: #F9FCFC;

}

.recharge-btn {

    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: .5556rem;
    position: relative;
}

.recharge-btn-text {
    width: 7.6111rem;
    height: 1.3333rem;
    background: linear-gradient(270deg, #F15FFC, #3DAAF9);
    border: .0278rem solid #BFF8FD;
    border-radius: 0.6528rem;
    font-size: 0.5rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #F9FCFC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-square1 {
    width: .0972rem;
    height: .0972rem;
    background: #E089FD;
    position: absolute;
    top: .4722rem;
    left: .8333rem;
}

.btn-square2 {
    width: .2778rem;
    height: .0972rem;
    background: #110C18;
    position: absolute;
    top: .3056rem;
    left: 1.3889rem;
    z-index: 2;
}

.btn-square3 {
    width: .4167rem;
    height: .0972rem;
    background: #F9FCFC;
    position: absolute;
    bottom: .3056rem;
    left: 1rem;
    z-index: 2;
}

.btn-square4 {
    width: .2778rem;
    height: .0972rem;
    background: #110C18;
    position: absolute;
    right: 1.1944rem;
    z-index: 2;
    top: .3611rem;
}

.btn-square5 {
    width: .2778rem;
    height: .0972rem;
    background: #6BAFFA;
    right: .6667rem;
    top: .7778rem;
    position: absolute;
}

.btn-square6 {
    width: .0972rem;
    height: .0972rem;
    background: #E089FD;
    position: absolute;
    right: .75rem;
    top: .4722rem;

}

.state {
    margin: auto;
    width: 9.3056rem;
    display: flex;
    font-size: .3056rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #D3D6D6;
    margin-top: .75rem;
}
.item{
    position: absolute;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #110C18;
    z-index: 30;
}


.la-ball-spin-clockwise-fade.la-2x>div  {
    color: #C372FB;
}

input {
    font-size: 0.5rem;
    color: #F9FCFC;
}
.item-list{
    background: #292929;
    padding: 0.5rem 0px;
    border-radius: .1389rem;
    border-bottom-left-radius:0px ;
    border-bottom-right-radius:0px ;
}

.show-out{
    max-width: 100%;
    height: auto;
}
.weixin-tip{
    display: none;
    position: fixed;
    left:0;
    top:0;
    bottom:0;
    background: rgba(0,0,0,0.8);
    filter:alpha(opacity=80);
    height: 100%;
    width: 100%;
    z-index: 100;
}
.weixin-tip p{
    text-align: center;
    margin-top: 10%;
    padding:0 5%;
}