/*css变量集合*/     
        html,body{
             font-size: 1.4rem;
              color: #fff;
              background-color:#14092C;
        }
        :root{
         --staTop:0rem;
         --itemWidth3:calc(33vw - 2rem);
         --itemWidth4:calc(25vw - 1rem);
         --main-width:calc(100vw - 3.2rem);
         --main-color:rgba(40, 34, 81,1);
         --color1: rgb(246, 201, 72);
         --color2:#ff3434;
         --color3:#AB86EB;
         --color4:#7638FF;
         --color5: #2f1f62;/*底部按钮背景色*/
         --bg-card: linear-gradient(180.00deg, rgba(40, 34, 81, 0.08) 0.049%,rgb(65, 33, 111) 100%);
         --bg-button1:linear-gradient(-45.00deg, rgb(181, 147, 255),rgb(118, 56, 255) 98.11%);
         --bg-button2:linear-gradient(217.84deg, rgb(2, 195, 165) 0.984%,rgb(46, 234, 201) 92.565%);
        }

.bg-mengceng{
    /*背景模糊*/
     width: 100%;
    height: 100%;
         backdrop-filter: blur(5px);
    background-color: rgba(255,255,255,0.02);
}
.bg-img-main{
    /*用于主页面*/
    background-image: url(/app/image/public/docbg.jpg);
    background-size: cover; 
}

.bg-color-main{
    /*蓝紫色的背景 用于三级页面 半截的页面*/
  /*background-color:#160E69;*/
        backdrop-filter: blur(1rem);
    background: linear-gradient(180.00deg, rgb(65, 33, 111) 0.049%, rgba(40, 34, 81, 1) 100%);
}
.bg-color-card{
    backdrop-filter: blur(19.03px);
background: linear-gradient(180.00deg, rgba(54, 34, 81, 0.08) 0.049%,rgb(57, 33, 111) 100%);
}
.color-c{
    /*强调色 用于刷新按钮等一些地方*/
    /*box-shadow: inset -4px -6px 14px 0px rgba(255, 255, 255, 0.83),inset 0px -2px 12px 0px rgba(255, 255, 255, 0.5);*/
   /*backdrop-filter: blur(19.03px);*/
/* 路径 个样式-填充 */
/*background: linear-gradient(217.84deg, rgb(2, 195, 165) 0.984%,rgb(46, 234, 201) 92.565%);*/
background:linear-gradient(-45.00deg, rgb(181, 147, 255),rgb(118, 56, 255) 98.11%);
}

.color-c1{
    /*品牌色 紫色*/
    background-color: #7638FF;
  
}
.color1{ 
    /*强调文字颜色 黄色的*/
    color:rgb(246, 201, 72);
    
}
.color2{
    /*用于价格或者其他地方的额标题*/
    color: #ff3434;
}
.color3{
    /*大标题文字颜色*/
    color: #73ab83;
    
}

.color4{
    /*品牌色 紫色*/
  color: #7638FF;
  
}
.font-a{
    color: #fff;
    font-size:1.6rem;
}
.font-b{
    color: #b9b9b9;
    font-size: 1.2rem;
}

.bg2{
    /*品牌色渐变*/
    background-image: linear-gradient(-45.00deg, rgb(181, 147, 255),rgb(118, 56, 255) 98.11%);
}


.card-main{
    /*div卡片组件*/
    position: relative;
    width:100%;
    height: auto;
    margin-top: 1rem;
    box-sizing: border-box;
border-radius: 1rem;
  backdrop-filter: blur(19.03px);
background: linear-gradient(180.00deg, rgba(54, 34, 81, 0.08) 0.049%,rgb(57, 33, 111) 100%);
border: 1px solid rgba(205, 198, 247, 0.3);
padding: .5px;
}

.bottom-zhanwei{
    height: 5rem;
}



   .button-a{
           /*两端半圆角的按钮*/
           width: auto;
           min-width: 10rem;
           height: 3rem;
           line-height: 3rem;
           padding: 0 2rem 0 2rem;
           text-align: center;
           border-radius: 3rem;
       } 
       
       .menu-a{
            width:6.6rem;
            height:2.2rem; 
            line-height: 2.2rem;
            text-align: center;
            background-image: url(/app/image/public/box-tips1.png);
            background-size: 100% 100%;
            font-size: 1.2rem;
       }
 
.closepage{
    position: absolute;
    top:1rem;
    right: 0;
    width: 3rem;
    height: auto;
}
      .page-out{
            width: calc(100% - 3.2rem);
            height: 100vh;
            margin: 0rem 1.6rem 0rem  1.6rem;
             -webkit-overflow-scrolling:touch;
           overflow-y: auto;
        }
        .page-top{
            position: relative;
            width: 100%;
            height: 4rem;
            line-height: 4rem;
            text-align: center;
            font-size: 1.6rem;
            
        }
        .page-top>div{
            line-height: 4rem;
        }

        .page-top>img{
            position: absolute;
            top:1rem;
            left: 1rem;
            width: 3rem;
            height: 3rem;
        }
        
         .page-top-back-text{
            position: absolute;
            left: 1rem;
            width: 4rem;
            height: 3rem;
            text-align: center;
            font-size: 1.4rem;
        }

        
        
                .page-line{
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    font-size: 2rem;
    font-family: Inter;
    font-weight: 700;
    margin-top:1rem;
}



      .adv-1{
            margin-top:1rem;
            width: 100%;
            height: auto;
            overflow: hidden;
            background-color:#ADED5C;
            display:flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            overflow: hidden;
           border-radius: 1rem;
        }
        .adv-1>img{
            width: 100%;
            height: auto;
        }
        
        
          .adv-vip{
            margin-top:1rem;
            width: 100%;
            height: 10vw;
            overflow: hidden;
            display:flex;
            display: -webkit-flex;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            overflow: hidden;
           border-radius: 1rem;
        }
        .adv-vip >div{
            font-size: 3rem;
            line-height: 10vw;
            text-align: center;
        }
        .adv-vip>img{
            width: 100%;
            height: auto;
        }
        
        
    
        
        .iframeNew{
            position: fixed;
            top:0;
            left: 0;
            width: 100%;
            height:100%;
            padding-top:var(--staTop);
            border: 0 none;
            -webkit-animation:fadeInLeft .2s .1s ease both;
             -moz-animation:fadeInLeft .2s .1s ease both;
             z-index: 100;
        }
        
                
        .iframeChild{
            position:fixed;
            top: 0;
            left: 0;
            width: 100%;
            height:100%;
            border: 0 none;
            opacity: 1;
            -webkit-animation:fadeInTop .4s .1s ease both;
             -moz-animation:fadeInTop .4s .1s ease both;
        box-sizing:border-box;
        overflow-x:hidden;
        z-index: 1000;
        }
        
    .nodata{
    position: absolute;
    top:50%;
    left: 50%;
    height: 15rem;
    line-height: 15rem;
    text-align: center;
    width: 22.5rem;
    margin-top:-7.5rem;
    margin-left: -11.2rem;
    font-size: 1.8rem;
   color: #888;
    /*background-image: url(/app/image/public/nodata.png);*/
    background-size: cover;
}    



 .nodataA{
    position: absolute;
    top:50%;
    left: 50%;
    height: 15rem;
    line-height: 15rem;
    text-align: center;
    width: 22.5rem;
    margin-top:-7.5rem;
    margin-left: -11.2rem;
    font-size: 1.8rem;
   color: #888;
    background-size: cover;
}    
        



/*自定义提示框样式*/
    .g-alert{
    position: fixed;
    top:50%;
    width: 80%;
    left: 10%;
    min-height:30px;
    height: auto;
    z-index: 99999999999;
    display: block;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 1.4rem;
    background-color:rgba(0,0,0,0.9);
    color:#fff;
}


/*加载中样式*/
.allScreen{
    position: fixed;
    height:100vh;
    width:100vw;
    z-index: 10000;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content:center;
    align-items: center;
    background-color:rgba(0,0,0,0.3);
    
}

.allScreen>.loader{
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
    background-image: url();
    opacity: 0.8;
    background-size:cover;
}



@-webkit-keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translateX(-1000px)
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity:0;
-moz-transform:translateX(-1000px)
}
100% {
opacity:1;
-moz-transform:translateX(0)
}
}

@-webkit-keyframes fadeInTop {
0% {
opacity:0;
-webkit-transform:translateY(500px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity:0;
-moz-transform:translateY(-200px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}


select {
outline: none;    
width:6rem;
height: 3rem;
font-family: Arial, sans-serif;
padding: 1px;
margin: 1rem;
background-color:var(--color1);
border-radius: 5px;
color: #fff;
box-sizing: border-box;
    background: var(--bg-button1)
    
}

select:hover {
color: #fff;
background-color:#9b32e9;
}
option{
    color: #fff;
}





/* 应用动画效果 */
[data-click]:hover {
  animation-name: click-button-animation; /* 指定动画名称 */
  animation-duration: 1s; /* 动画持续时间 */
  animation-iteration-count:1; /* 动画重复次数（这里设置为无限循环）*/
  animation-timing-function: ease-in-out; /* 动画缓动函数 */
}
  
  
  
 .imgwwww:active {
     /*废弃*/
-webkit-filter: brightness(0.8); /* 降低图片亮度 */
filter: brightness(0.8);
-webkit-transition: -webkit-filter 0.2s linear; /* 添加过渡效果 */
transition: filter 0.2s linear;
}






.text-jianbian{
    background-image: linear-gradient(to bottom,#13FAED,#f831a9);
    background-clip: text;
        /* 上面那句话其实在浏览器中不起作用，但删了它下一句话属性值在vscode就会变黄 */
    -webkit-background-clip: text;
    color: transparent;
}





/*弹窗或者子页面的样式 子iframe 20250506背景透明的那种*/    
.child-page{
    position: relative;
    width: 100vw;
    overflow:hidden;
    margin-top:30vh;
    height: 70vh;
    background-color: var(--main-color);
      border-top-left-radius: 5rem;
    border-top-right-radius: 5rem;
    border-top:2px solid #b9b9b9;
    box-sizing: border-box;
    
}
.child-page-top{
    width: 100%;
    position: relative;
}
 .child-page-top > .child-page-top-title{
     height: 3rem;
     line-height: 3rem;
     text-align: center;
 }   
  .child-page-top > .child-page-top-close{
      position: absolute;
      top:1rem;
      right: 5rem;
      width: auto;
      height:2rem;
  }
  
  .child-page-top-menu{
    width:80%;
    margin-left: 10%;
    height: auto;
    margin-top:1rem;
    display: flex;
    justify-content: center;
    align-items: center;
background: linear-gradient(180.00deg, rgba(40, 34, 81, 0.08) 0.049%,rgb(65, 33, 111) 100%);
       border-radius: 2rem;
    
}
.child-page-top-menu>div{
    height: 6rem;
    width:6rem;
    margin-left: 1rem;
    background-size: 100% 100%;
}
.child-page-top-menu-active{
    width: 6rem;
    height: 6rem;
    border-radius: 4rem;
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 0 10px 5px rgba(183, 78, 205, 0.8); /* 发光效果 */
}


/*刷新按钮*/
.youceanniu{
     position: fixed;
    right: .5rem; 
     bottom:20rem;
}
.page-refresh{
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    border-radius: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.page-refresh img{
   width: 3rem;
   height:3rem;
}
.page-refresh-b{
        bottom:23rem;
    display: none;
}



  .page-refresh:hover{
             transition:all 1s;   
        transform-origin:50 100;   
        transform:rotate(360deg);   
        border-radius:50%;   
        }


/*列表里是一个正方形item的样式*/

          .box{  
               width:100%;
               margin-bottom: 1rem;
               overflow-y:scroll;
                flex-wrap:wrap;
                padding-top:1rem;
                display: flex;
        justify-content:space-evenly;
         -webkit-justify-content:space-evenly;
          align-content: flex-start; /* 让所有行靠上对齐 */
         
          }
           .box-item{
                position: relative;
                margin-top:1rem;
             width: var(--itemWidth3);
             height: var(--itemWidth3);
            box-sizing: border-box;
             border: 1px  solid #b9b9b9;
             border-radius: 1rem;
             overflow: hidden;
         }
          .box-item-img{
             width: 100%;
             height:100%;
         }
         
                    .box-item-bottom{
               position: absolute;
               width: 100%;
               height: 2rem;
               line-height: 2rem;
               text-align: center;
               bottom: 0px;
               left:0px;
            background: linear-gradient(180.00deg, rgba(40, 34, 81, 0.4) 0.049%,rgb(65, 33, 111) 100%);
            font-size: 1.2rem;
           }

            .box-item-top{
            position: absolute;
            top: 0;
            left: 0;
            width:auto;
            height:2rem;
            line-height:2rem;
            width: 5rem;
            border-bottom-right-radius: 1rem;
            text-align:center;
            color: var(--color1);
            background: linear-gradient(180.00deg, rgba(40, 34, 81, 0.08) 0.049%,rgb(65, 33, 111) 100%);
          }
          
          
          
          
          
  /*列表组件css*/
  .box *{
      box-sizing: border-box;
  }

  .box-w3{
      /*列表子项目 一行三个的*/
      width: var(--itemWidth3);
      height: auto;
  }
  .box-w3-fm{
      /*展示图片的容器*/
      position: relative;
      width: 100%;
      height: var(--itemWidth3);
      border-radius: 1rem;
      overflow: hidden;
  }
  .box-w3-img{
      /*展示图片的尺寸*/
      width:100%;
      height:100%;
  }
  .box-w3-fm-bottom-text{
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 2rem;
      line-height:2rem;
      text-align: center;
      background:linear-gradient(180.00deg, rgba(118, 57, 121, 0.08),rgb(74, 42, 77) 100%);
      font-size: 1.2rem;
  }
  .box-w3-text{
      /*展示图片下面的一行一行文字*/
      height:2rem;
      line-height:2rem;
      width:94%;
      margin-left:3%;
      overflow: hidden;
      margin-top:.5rem;
  }
  
  
  .font14{
      font-size: 1.4rem;
      color: var(--color4);
  }
  
  .font12{
      font-size: 1.2rem;
      color: #b9b9b9;
  }
  .cash-level{
      height: 2.5rem;
      width: auto;
  } 

.fire{     
background: radial-gradient(circle, #ff9966, #ff5e62, #ff2a68);
  animation: fire 2s infinite;}
@keyframes fire {
  0% {
    box-shadow: 0 0 20px 0 #ff9966, 0 0 40px 0 #ff5e62, 0 0 60px 0 #ff2a68;
  }
  50% {
    box-shadow: 0 0 20px 10px #ff9966, 0 0 40px 20px #ff5e62, 0 0 60px 30px #ff2a68;
  }
  100% {
    box-shadow: 0 0 20px 0 #ff9966, 0 0 40px 0 #ff5e62, 0 0 60px 0 #ff2a68;
  }
}
/*动画css*/
    
@keyframes moveRightToLeft {
    /*定义子页面关闭效果*/
  0% {
    transform: translateX(100%); /* 初始位置在容器的右边 */
     -webkit-transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%); /* 结束位置在容器的左边 */
     -webkit-transform: translateX(-100%);
  }
}

/* 定义动画关键帧 */
@keyframes click-button-animation {
  0% { opacity: 0.3; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes Glow {

    from {

        text-shadow: 0 0 10px #fff,

                     0 0 20px #fff,

                     0 0 30px #fff,

                     0 0 40px #fff,

                     0 0 70px #fff,

                     0 0 80px #fff,

                     0 0 100px #37efff,

                     0 0 150px #37efff,

    }

    to {

        text-shadow: 0 0 5px #fff,

                     0 0 10px #fff,

                     0 0 15px #fff,

                     0 0 20px #fff,

                     0 0 35px #fff,

                     0 0 40px #fff,

                     0 0 50px #fff,

                     0 0 75px #37efff;

    }
}
@-webkit-keyframes Glow {

    from {

        text-shadow: 0 0 10px #fff,

                     0 0 20px #fff,

                     0 0 30px #fff,

                     0 0 40px #fff,

                     0 0 70px #fff,

                     0 0 80px #fff,

                     0 0 100px #fff,

                     0 0 150px #37efff;

    }

    to {

        text-shadow: 0 0 5px #fff,

                     0 0 10px #fff,

                     0 0 15px #fff,

                     0 0 20px #fff,

                     0 0 35px #fff,

                     0 0 40px #fff,

                     0 0 50px #fff,

                     0 0 75px #fff;

    }

}


    
    





@-webkit-keyframes fadeInUpBig {
0% {
opacity:0;
-webkit-transform:translateY(500px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-moz-keyframes fadeInUpBig {
0% {
opacity:0;
-moz-transform:translateY(500px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
} 




.blackbox-animation{
-webkit-animation:flip 1.5s .2s ease both;
}
@-webkit-keyframes flip {
0% {
-webkit-transform:perspective(800px) rotateY(0);
-webkit-animation-timing-function:ease-out
}
40% {
-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function:ease-out
}
50% {
-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function:ease-in
}
80% {
-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);
-webkit-animation-timing-function:ease-in
}
100% {
-webkit-transform:perspective(400px) scale(1);
-webkit-animation-timing-function:ease-in
}
}
.sendbabyboxAA {
    /*发数宝箱开箱效果*/
-webkit-animation:wobble 1s .2s ease both;
-moz-animation:wobble 1s .2s ease both;
}
@-webkit-keyframes wobble {
0% {
-webkit-transform:translateX(0%)
}
15% {
-webkit-transform:translateX(-25%) rotate(-5deg)
}
30% {
-webkit-transform:translateX(20%) rotate(3deg)
}
45% {
-webkit-transform:translateX(-15%) rotate(-3deg)
}
60% {
-webkit-transform:translateX(10%) rotate(2deg)
}
75% {
-webkit-transform:translateX(-5%) rotate(-1deg)
}
100% {
-webkit-transform:translateX(0%)
}
}
@-moz-keyframes wobble {
0% {
-moz-transform:translateX(0%)
}
15% {
-moz-transform:translateX(-25%) rotate(-5deg)
}
30% {
-moz-transform:translateX(20%) rotate(3deg)
}
45% {
-moz-transform:translateX(-15%) rotate(-3deg)
}
60% {
-moz-transform:translateX(10%) rotate(2deg)
}
75% {
-moz-transform:translateX(-5%) rotate(-1deg)
}
100% {
-moz-transform:translateX(0%)
}
}



/*盲盒页面用的*/
.main-list  {
  width:100%;
    height: auto;
    display: -webkit-flex;
    display: flex;
        -webkit-justify-content: space-around;
    justify-content: space-around;
     align-items: center;
        flex-wrap:wrap;
        margin-bottom: 1rem;

}
.zw-item{
   width: calc(33vw - 2rem);
   height: 4rem;
}
.main-list-item{
    position: relative;
       width: calc(33vw - 2rem);
    height:auto;
    margin-top:1rem;
    border-radius: 1rem;
     overflow: hidden;
     box-sizing: border-box;
     background: url(/app/image/bg/prize-list-bg.png);
     background-size: 100% 100%;
     padding:.5rem;
}

.main-list-end{
    position: absolute;
    top:3rem;
    left: 3rem;
    width: 4rem;
    height: 4rem;
}
.main-list-img{
    width:100%;
     height: calc(33vw - 3rem);
    border-radius: 1rem;
    overflow: hidden;
    display:flex;
    display: -webkit-flex;
    align-items: center;
    justify-content:center;
  -webkit-justify-content:center;
  margin-bottom: 0.5rem;
  
}




.main-list-img>img{
    width: 100%;
    height: 100%;
}

.main-list-title-a{
          width:100%;
          height: 2rem;
          line-height: 2rem;
          text-indent: .5rem;
        color:#fff;
     font-family: Inter;
font-size: 1.2rem;
font-weight: 400;
overflow: hidden;
    text-overflow: ellipsis;
white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.main-list-title-b-a:before {
        content: "￥";
    }
.main-list-title-b{
          width:100%;
    text-indent: .5rem;
font-family: Inter;
font-size: 1.2rem;
overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
     color: rgb(255, 52, 52);
            font-weight: bold;
}
.main-list-title-b-b{
color: #fff;
text-decoration-line: line-through;
font-size: 1rem;
}

.main-list-title-c{
          width:90%;
   color: #999;
    text-indent: .5rem;
font-family: Inter;
font-size: 1rem;
overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}



             

    .main-list-title-d{
    position: absolute;
    bottom:.5rem;
    right: .5rem;
    font-size: 1.2rem;
              color: #6c7b8b;
    font-family: Inter;
    font-weight: 400;
}


    

     
        
        .prize-level-line{
            width: 100%;
            height: 3.5rem;
            line-height: 3.5rem;
            display: flex;
            align-items: center;
           background:url(/app/image/public/line-title.png);
           background-size: 100% 100%;
            border-radius: .5rem;
            overflow: hidden;
        }
        
        
                .prize-level-line > span{
            width:auto;
            color: #E3C8FF;
            margin-left: 1rem;
            font-size: 1.3rem;
            
        }
          .prize-level-line >img{
             margin-left: 2rem;
             width:auto;
            height: 2.5rem;
        }
                

        

        
         .prize-tips{
            position: relative;
            width: 100%;
            box-sizing:border-box;
            height: 6rem;
               display:flex;
          display: -webkit-flex;
    justify-content:space-around;
  -webkit-justify-content:space-around;
      align-items: center;
      padding-bottom: .5rem;
      margin-bottom: 1rem;
        }
       
        
         .prize-tips >div{
             width: 6rem;
             height: 6rem;
         }
        
        .prize-tips >div:last-child{
               line-height: 6rem;
             text-align: center;
        }
         .steam{
             width: 6rem;
             height: 2.5rem;
             line-height: 2.5rem;
             text-align: center;
             font-size: 1.3rem;
               border-radius: 2rem;
         border: 1px solid #34d0fb;
     box-shadow: 0 0  3px  #34d0fb; /*也可以自定义颜色*/
         }
         
         
          .prize-tips >div>div{
             width: 6rem;
             text-align: center;
         }
         
          .prize-tips >div>div:first-child{
              height: 3rem;
              line-height: 3rem;
              margin-top:.5rem;
              font-weight: bold;
             
         }

   .prize-chouzhong{
             touch-action: none;
             position: fixed;
             top:0px;
             left:0px;
             width:100vw;
             height:100vh;
             z-index: 21;
                display: -webkit-flex;
            display: flex;
             align-content:center;
             display: none;
     backdrop-filter: blur(5px);
    background-color: rgba(30,52,111,0.2);
 -webkit-animation:fadeInUpBig 1s .1s ease both;
-moz-animation:fadeInUpBig 1s .1s ease both;
         }
         .prize-chouzhong-button{
         position: fixed;
         bottom: 3rem;
         left: 10vw;
         width: 80vw;
         height: 4rem;
        display:flex;
          display: -webkit-flex;
                  -webkit-justify-content: space-around;
            justify-content: space-around;
             align-items: center;
             z-index: 9999;
         
     }
     .prize-chouzhong-button >img{
         width: auto;
         height: 4rem;
     }
 
 

         .prize-chouzhong-box{
              width:calc(100% - 3.2rem);
              margin-left: 1.6rem;
              min-height: 1rem;
            height: auto;
            display: -webkit-flex;
            display: flex;
                -webkit-justify-content: space-evenly;
            justify-content: space-evenly;
             align-items: center;
             align-content:center;
                flex-wrap:wrap;
                margin-top:5rem;
                position: relative;
         }
      
            
         .prize-chouzhong-box-imgA{
             width: 38vw;
             height:38vw;
-webkit-animation:bounce 2s .2s ease both;
border-radius: 1rem;
         }
         
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform:translateY(0)
}
40% {
-webkit-transform:translateY(-50px)
}
60% {
-webkit-transform:translateY(-15px)
}
}
         
         .prize-chouzhong-box-imgAT{
             position: absolute;
             top:-50%;
             left:-50%;
             height: 200%;
             width: 200%;
              z-index: 999;
         }
          .prize-chouzhong-box-B{
              position: relative;
              width: 10rem;
              height: 10rem;
               margin-bottom: .5rem;
               background-color:rgba(35, 31, 98, 0.7);
            border-radius: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            padding: .2rem;
            
          }
            .prize-chouzhong-box-imgB{
              box-sizing: border-box;
             border-radius: 1rem;
            width: 50%; /* 初始大小 */
            height:50%;
           animation: scaleUp 2s ease-in-out forwards; /* 应用动画，forwards保持结束状态 */
         }
         
          .prize-chouzhong-box-A>div,.prize-chouzhong-box-B>div{
            position: absolute;
            width: 100%;
            height:2rem;
            line-height:2rem;
            text-align: center;
            text-overflow: ellipsis;
            display: -webkit-box;
            overflow: hidden;
            white-space: nowrap;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            
                bottom: .2rem;
                 left: .2rem;
                 width: auto;
                 right: .2rem;
              background: linear-gradient(217.84deg, rgba(2, 195, 165,0.9) -7.014%,rgba(46, 234, 201,0.9) 93.788%);
              border-bottom-left-radius: 1rem;
               border-bottom-right-radius: 1rem;
                   font-size: 1.2rem;
           color:#f9f9f9;
          }
          
        
          
          

        #payFrame{
       z-index: 200000;
     }
     
      #isBuyFrame{
          z-index:5;
     }
     
    .propsMark{
        width: 4rem;
        height: 4rem;
        position: absolute;
        top:0;
        left: 0;
    }
   



.prize-level{
    width: 100%;
    height: auto;
         display:flex;
        display: -webkit-flex;
        justify-content: center;
       align-items: center;
    overflow-x: auto;
    padding:.5rem;
    padding-bottom: .5rem;;
    margin-bottom: 1rem;
    box-sizing: border-box;
    border-radius: 1rem;
   color: #fff;

}
.prize-level >div{
    width: 8rem;
    
}
 .prize-level-gailv{
     font-size: 1.2rem;
     color:#b9b9b9;
      height: 2rem;
    line-height: 2rem;
    text-align: center;
 }   
.prize-level-text{
    width: 100%;
    color:#fff;
    font-weight: bold;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}



    
  .prize-chouzhong-box-A{
      width: 38vw;
      height: 38vw;
      position: relative;
      border-radius: 1rem;
      overflow: hidden;
        margin-bottom: 3rem;
    padding:.2rem;
  }

          .prize-chouzhong-box-B{
              position: relative;
              width: 10rem;
              height: 10rem;
               margin-bottom: .5rem;
          }
            .prize-chouzhong-box-imgB{
             width: 100%;
             height: 100%;
              box-sizing: border-box;
             border-radius: 1rem;
            }

    /* 定义动画 */
    @keyframes scaleUp {
      0% {
        transform: scale(0.5); /* 从小开始 */
      }
      100% {
        transform: scale(1); /* 变大到 1.5 倍 */
      }
    }
        
        

        
        .box-double{
    display:  flex;
    justify-content: space-around;
    align-items: center;
    height: 3rem;
    line-height: 3rem;
    margin-bottom:.5rem;
    
}




.cash-out{
    position: relative;
    margin-top:1rem;
  width:100%;
  height: auto;
  border-radius: 1rem;
  padding-top:1rem;
  border-radius: 2rem;
backdrop-filter: blur(84.27px);
background-color:rgba(35, 31, 98, 0.09);

}

 .cash-title{
     width:100%;
     height: auto;
     margin-bottom: 1rem;
 }
        
        .cash-title-img{
            width: 15rem;
            height: auto;
        }
        
        
        .box-detail-footer{
    position: fixed;
    left: 0;
    bottom: 0rem;
    width:100vw;
    height: 5rem;
    line-height: 5rem;
    z-index: 20;
     align-items: center;
     
}


.box-detail-footer >img{
    width:auto;
    height:4rem;
}




.box-detail-jinggang{
        margin-top:1rem;
}
.box-detail-jinggang > img{
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
}
.box-detail-tishi{
    font-size: 1.2rem;
    line-height: 4rem;
    height: 4rem;
    height: auto;
    text-align: center;
}





     .prize-chouzhong-box-B{
              position: relative;
              width: 10rem;
              height: 10rem;
               margin-bottom: 2rem;
               background-color:rgba(35, 31, 98, 0.7);
            border-radius: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            
          }     

.cash-out-bg{
    position: absolute;
    bottom: -5rem;
    width: 100%;
    height: 10rem;
filter: blur(125.04px);
background: rgb(59, 15, 140);
opacity: 0.96;
}

.box-pic-fujia{
    position: absolute;
    left: 0;
    top:0;
    padding: .5rem;
    width: 4rem;
}
.box-pic-fujia >img{
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.icon-zuotuyouzi{
    min-width: 5rem;
    width: auto;
    padding-right: .3rem;
    border-radius: .5rem;
    height: 2rem;
    line-height: 2rem;
    text-align:center;
    text-indent: 2.2rem;
    border-top: 1px solid rgba(176, 148, 235, 0.69); /* 上边框 */
    border-right: 1px solid rgba(190, 255, 190, 0.84); /* 右边框 */
    border-bottom: 1px solid rgb(176, 148, 235); /* 下边框 */
    border-left: 1px solid rgba(190, 255, 190, 0.84); /* 左边框 */
    background-size: 2rem 2rem;
    background-repeat: no-repeat;
    box-sizing: border-box;
    font-size: 1.2rem;
    backdrop-filter: blur(51.65px);
    background-color: rgba(150, 150, 150, 0.3);
}

.box-pic-tips{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 4rem;
 background-color: rgba(22, 14, 105,0.3);
       display:flex;
    display: -webkit-flex;
    justify-content:space-around;
  -webkit-justify-content:space-around;
      align-items: center;
      display: mainOpenPrize;
}
.box-pic-tips > div{
    display:none;
}
.box-pic-price{
    position: absolute;
    top:0;
    right:0;
    font-weight: bold;
     color:#fff;
    width: auto;
    height: 3rem;
    line-height:3rem;
    text-align: center;
    background-image: url(/app/image/box/price-bg.png);
    background-size:  100% 100%;
    padding: 0 1rem .5rem 2rem;
}



.box-pic{
    position: relative;
     width:100%;
       height:50vw;
    overflow: hidden;
    margin-bottom: 0.5rem;
   box-sizing: border-box;
      background-size: 100% 100%;
      border-radius: 1rem;
      border: 1px solid  rgba(176, 148, 235, 0.69);
      margin-top:1rem;
}
.box-pic-img{
    width: 100%;
    height: 100%;
       display:flex;
    display: -webkit-flex;
    align-items: center;
    justify-content:center;
  -webkit-justify-content:center; 
  border-radius: 1rem;
  overflow: hidden;
}
.box-pic-img>img{
    width:100%;
    height:auto;
}


#fashu-baoheA{
        padding:1.5rem 2rem 1rem 2rem;
        box-sizing: border-box;
        margin-bottom: 1rem;
        display: none;
}
.fashu-baohe-a{
    width: 100%;
    height: 1.5rem;
    display: flex;
    justify-content: space-around;
    margin-bottom: 3px;
}
.fashu-baohe{
    margin-top:1rem;
        width: 100%;
    height:4rem;
    overflow-y:hidden;
        overflow-x: auto;
    border-radius: 1rem;
    
   white-space: nowrap;
}
.fashu-baohe>div{
    position: relative;
    width: 3rem;
    height:auto;
    margin-right:1rem;
    text-align: center;
       display: inline-block;

}
.fashu-baohe>span{
    width: 3rem;
    height:1.5rem;
       display: inline-block;
}
.fashu-baohe>div>img{
    width:3rem;
    height:2rem;
border-radius: .5rem;
}

.fashu-baohe-jindu{
    width:50%;
    left: 2rem;
    height:1.5rem;
    line-height:1.5rem;
    border-radius: 1rem;
    overflow: hidden;
    font-size:1rem;
    background-color: #fff;
}
.fashu-baohe-jindu >span{
    height:1.5rem;
    background-color: #7638FF;
    line-height:1.5rem;
    text-align: right;
    padding-left: 3px;
}


.fashu-baohe-time{
    width:48%;
    right:2rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border-radius: 1rem;
    overflow: hidden;
    font-size:1rem;
    padding: 0 .5rem 0 .5rem;
    background-color: #7638FF;
      text-align: center;
}




.prize-miner img{
    width: 2rem;
    height: 2rem;
}
.prize-miner{
    color: #b9b9b9;
    font-size: 1.2rem;
    align-items: center;
    padding: 1rem 0 .5rem 0;
}

.prize-miner > div{
    width: auto;
    text-align: center;
}


.box-detail-isbuy{
            position: absolute;
            top:1.5rem;
            right:1rem;
            width:6.6rem;
            height:2.2rem; 
            line-height: 2.2rem;
            text-align: center;
            background-image: url(/app/image/public/box-tips1.png);
            background-size: 100% 100%;
            font-size: 1.2rem;
}






     
     
              
         .select-box{
             position: fixed;
             top:0px;
             left:0px;
             width:100vw;
             height:100vh;
             z-index: 10000;
             background-color:rgba(0,0,0,0.7) !important;
             display: none;
         }
         
         
         .select-box-index{
              width:calc(100% - 3.2rem);
              margin-left: 1.6rem;
              overflow-x:scroll;
              margin-top:10rem;
              padding: .5rem;
            height: auto;
         }
         
         .select-box-index >span{
             margin-left: 1rem;
         }
    
         .menu-a-active{
            box-shadow: inset 0px -2px 10px rgb(255 223 0 / 91%), 0 0 20px #f8ce31;
         }
         

          .select-box-child{  
               width:calc(100% - 3.2rem);
               margin-left: 1.6rem;
              height: 60vh;
               margin-bottom: 1rem;
               overflow-y:auto;
                flex-wrap:wrap;
                padding-top:1rem;
                display: flex;
        justify-content:space-evenly;
         -webkit-justify-content:space-evenly;
                align-items: center;
          }
           .select-box-child-item{
                position: relative;
                margin-top:1rem;
             width: var(--itemWidth3);
             height: var(--itemWidth3);
            box-sizing: border-box;
             border: 1px  solid #b9b9b9;
             border-radius: 1rem;
             overflow: hidden;
         }
          .select-box-child-img{
             width: 100%;
             height:100%;
         }
    
         
          .select-box-child-item>.recommend-item-mark{
            position: absolute;
            top: 0px;
            left: 0px;
            width:auto;
            height:2rem;
            line-height:2rem;
            width: 5rem;
            text-align: left;
            background: linear-gradient(180.00deg, rgba(40, 34, 81, 0.08) 0.049%,rgb(65, 33, 111) 100%);
          }
 
     
           .select-box-child-item>.select-box-child-yu{
               position: absolute;
               width: 100%;
               height: 2rem;
               line-height: 2rem;
               text-align: center;
               bottom: 0px;
               left:0px;
            background: linear-gradient(180.00deg, rgba(40, 34, 81, 0.4) 0.049%,rgb(65, 33, 111) 100%);
            font-size: 1.2rem;
           }

     .select-box-child-end{
         position: absolute;
         top:3rem;
         left: 3rem;
         width: 4rem;
         height: 4rem;
     }
     
      .recommend-item-mark{
            position: absolute;
            top:.5rem;
            right:.5rem;
            width: auto;
            height:2.5rem;
            border-top-right-radius: 1rem;
             border-bottom-right-radius: 1rem;
            
        }
       
   
    

        
     .box-notice{
    width: 90%;
    height: 3rem;
    margin-top:.5rem;
    line-height: 3rem;
    text-align:left;
    text-indent: 4.5rem;
    background-repeat: no-repeat;
background-image: url(/app/image/box/box-notice.png);
background-size: auto 2rem;
background-position: 2rem center;
display: none;

}



/*四个按钮彩色的*/
 .button-bg{
     width: 8rem;
     height: 3.4rem;
     line-height: 3.4rem;
     margin-left: 1rem;
      background-size:100% 100%;
      color: #fff;
     text-align: center;
    }
  
  .button-bg1{
      background-image: url(/app/image/button/bg1.png);
  }
   .button-bg2{
    background-image: url(/app/image/button/bg2.png);
  }
   .button-bg3{
      background-image: url(/app/image/button/bg3.png);
  }
   .button-bg4{
      background-image:url(/app/image/button/bg4.png);
  }
  
  
  .button1{
      width: auto;
      height: 3rem;
      line-height:3rem;
      text-align: center;
      padding: 0 1rem 0 1rem;
      min-width: 2rem;
      border-radius: 3rem;
  }
  
  
  .price:before{
      content:"¥";
      font-size: 1.6rem;
  }
  .price{
      color: var(--color2);
  }
  
 .box-w1{
     /*单行占据全屏 三个元素排列的 左中右 左图中间文字 右边其他标签*/
     width: 100%;
     height: auto;
           display: flex;
      align-items:center;
      padding: .5rem;
 }
 
 .box-w1-l{
     /*左边的图 容器*/
     width:8rem;
     height:8.5rem;
     border-radius: 1rem;
     margin-right: 1rem;
     overflow: hidden;
     background-color: var(--color4);
 }
  
  .box-w1-l-img{
      /*左边的图*/
      width: 100%;
      height:8rem;
      border-radius: 1rem;
  }
  
  .box-w1-c{
      width:calc(100vw - 18rem);
      height: 100%;
  }
  
  .box-w1-text{
      width:100%;
      overflow: hidden;
      height: 2.5rem;
      line-height: 2.5rem;
  }
  
  .box-w1-r{
      width: 8rem;
      height: 100%;
    
  }
  
  
  
  
  
  
  /*规则弹窗*/
   .win-rule{
          position: fixed;
          top:calc(50vh - 15rem) ;
         width:calc(100% - 4rem);
         margin-left: 1.9rem;
         padding: 5px;
         margin-right: 30px;
         border-radius: 15px;
         margin-bottom:1rem;
         margin-top:1rem;
         border-radius: 15px;
         color: white;
         text-align: center;
         z-index: 100000;
         display: none;
         box-sizing: border-box;
         backdrop-filter: blur(1rem);
    background: linear-gradient(180.00deg, rgb(65, 33, 111) 0.049%, rgba(40, 34, 81, 1) 100%);
         border: 1px solid #b9b9b9;
      }
   .win-rule .font12{
      width: 90%;
      margin-left:5%;
   }    
				  .win-rule-close{
    width: 90%;
    margin-left: 5%;
    text-align: center;
    padding: 1rem 0 1rem 0;
    border-top:1px solid #b9b9b9;
    
}
.win-rule-close >span{
    width: 10rem;
    height: 3rem;
    line-height:3rem;
    text-align: center;
    border-radius: 2rem;
    
}		  
			  


.button-hxd{
    /*动态呼吸灯效果的按钮*/
      width: 6rem;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      border-radius: 1rem;
     padding: 2px;
border: 1px ridge var(--color3);
background-color:rgba(40, 34, 81,0.8);
color: rgb(246, 201, 72);
  font-size: 1.2rem;
  color: #ddd;
  -webkit-transition: all 3s ease;
  transition: all 3s ease;
   -webkit-animation: Glow 3s ease infinite alternate;
animation: Glow 3s ease infinite alternate;

}



.line-title{
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    color:#fff;
    text-align: center;
    margin-top:2rem;
      background:url(/app/image/public/line-title.png);
      background-size: 100% 100%;
      overflow: hidden;
    
}
  
  .liuguang::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
 /*background:linear-gradient(to right, #fffcfe 0%, #7638ff 30%, #ea0909 75%);*/
 background: linear-gradient(90deg, #7638ff 25%, rgba(0, 255, 255, 0.8), #7638ff 75%);
  animation: rotateGlow 3s linear 2s infinite;
  pointer-events: none;
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}