/*css变量集合*/     
        html,body{
             font-size: 1.4rem;
              color: #fff;
          /* background-image: linear-gradient(160.79deg, rgba(207, 254, 228, 1),rgba(219, 248, 232, 1) 100%);*/
           background-image: url(/app/image/bg/main.webp);
               background-color: #fff;
            background-size: 100% 100%;
        }
        :root{
         --staTop:0rem;
         --itemWidth3:calc(33vw - 2rem);
         --itemWidth4:calc(25vw - 1rem);
         --main-width:calc(100vw - 3.2rem);
         --main-color:#cee7e4;
         --color1: rgb(246, 201, 72);
         --color2:#ff3434;
         --color3:#78FBB9;
         --color4:#23998D;
         --color5:#231F62;/*底部按钮背景色*/
         --color6:#383838;/*按钮文字颜色*/
         --color7:#05a785;
         --bg-card: linear-gradient(180.00deg, rgb(22 219 187 / 48%) 0.049%, rgb(60 221 200) 100%);
         --bg-button1:linear-gradient(180.00deg, rgb(22 219 187 / 48%) 0.049%, rgb(60 221 200) 100%);
         --bg-card1:linear-gradient(180.00deg, rgba(120, 251, 238, 1),rgba(61, 247, 229, 1) 46%,rgba(31, 179, 164, 1) 100%);
        }

.bg-color-child{
      background: #cee7e4;
}
.bg-img-main{
    /*用于主页面*/
  /*background: linear-gradient(160.79deg, rgba(207, 254, 228, 1),rgba(219, 248, 232, 1) 100%);*/
  background: url(/app/image/bg/main.webp);
  background-size: 100% 100%;
}

.bg-color-main{
    /*蓝紫色的背景 用于三级页面 半截的页面*/
  /*background-color:#160E69;*/
  background: linear-gradient(180.00deg, rgba(120, 251, 238, 1),rgba(61, 247, 229, 1) 46%,rgba(31, 179, 164, 1) 100%);
}
.bg-color-card{
   border-radius: 1rem;
box-shadow: inset 0px -13px 10px 0px rgba(255, 255, 255, 0.3),inset 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
background: rgba(13, 103, 94, 0.3);
}
.color-c{
    /*强调色 用于刷新按钮等一些地方*/
box-shadow: inset 0px 4px 4px 0px rgba(58, 54, 54, 0.88),0px 4px 4px 0px rgba(135, 135, 135, 0.83);
background: linear-gradient(180.00deg, rgba(28, 53, 50, 0.77),rgba(5, 25, 22, 1) 92%),radial-gradient(50.00% 50.00% at 50% 50%,rgba(35, 34, 34, 0.2) 3%,rgba(68, 66, 66, 0) 100%);
color: #fff !important;
}



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

.color4{
    /*品牌色 紫色*/
  color: #05a785;
  
}
.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;
box-shadow: inset 0px -13px 10px 0px rgba(255, 255, 255, 0.3),inset 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
background-color: rgba(13, 103, 94, 0.5);
background-image: url(/app/image/bg/card-bg.png);
background-repeat: repeat;
padding: 1px;
}

.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:6rem;
            height:2.2rem; 
            line-height: 2.2rem;
            text-align: center;
            background-color: #000;
            border-radius: 1rem;
            font-size: 1.2rem;
            color: #fff;
       }
 
.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;
             color:#070707;
             font-weight: bold;
            
        }
        .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:var(--bg-card1);
    color:#111 !important;
}


/*加载中样式*/
.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;
  /* backdrop-filter: blur(1rem);
 /*   background: linear-gradient(180.00deg, rgba(31, 179, 164, 1),rgba(61, 247, 229, 0.87) 54%,rgba(120, 251, 238, 0.2) 100%);*/
 background: #f9f9f9;
      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;
     color: #3d3d3d;
 }   
  .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, rgb(0 0 0 / 70%) 0.049%, rgb(0 13 5) 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(78,205,166,0.8); /* 发光效果 */
}


/*刷新按钮*/

.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 #000;
             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: var(--bg-card);
            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(--color3);
            background:rgba(0,0,0,0.8)
          }
          
          
          
          
          
  /*列表组件css*/
  .box *{
      box-sizing: border-box;
  }

  .box-w3{
      /*列表子项目 一行三个的*/
      width: var(--itemWidth3);
      height: auto;
      border: 2px solid #000;
      background-color: #fff;
  }
  .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: auto;
      left:2rem;
      right: 2rem;
      bottom: 0;
      height: 2rem;
      line-height:2rem;
      border-radius: 2rem;
      text-align: center;
      background:rgba(10,10,10,0.8);
      
      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: #3d3d3d;
  }
  .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:2rem;
    border-radius: 1rem;
   background-color: #f9f9f9;
     box-sizing: border-box;
     border: 2px solid #000;
}
.main-list-top{
    position: absolute;
    top:-1.2rem;
    left: 50%;
    margin-left: -2.5rem;
    width: 5rem;
    height: 1.2rem;
}

.main-list-topz{
    position: absolute;
    top:0;
    left:0;
    width: 3rem;
    height:3rem;
    line-height: 2rem;
    text-indent:.5rem;
    color:#FFC05B;
    font-weight: bold;
    background: url(/app/image/box/bg-cash-topz.png);
    background-size: 100% 100%;
    border-top-left-radius:0.8rem;
}
.main-list-end{
    position: absolute;
    top:3rem;
    left: 3rem;
    width: 4rem;
    height: 4rem;
}
.main-list-img{
    width:100%;
     height: calc(33vw - 2rem);
    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{
  margin-top:-1rem;
          width:100%;
          height: 3.5rem;
          line-height: 3.5rem;
          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;
    background-image: url(/app/image/box/bg-cash-dibu.png);
    background-size: 100% 100%;
}
.main-list-title-b-a:before {
        content: "￥";
    }
.main-list-title-b{
          width:100%;
    text-align: center;
font-family: Inter;
font-size: 1.4rem;
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: #ccc;
text-decoration-line: line-through;
font-size: 1rem;
}

.main-list-title-c{
          width:100%;
   color: #6c7b8b;
 height: 2rem;
 line-height:2rem;
 text-align: center;
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: 80%;
            height: 5rem;
            line-height: 3rem;
            display: flex;
            align-items: center;
           background:url(/app/image/box/bg-cash-level-line.png);
           
           background-size: 100% 100%;
            border-radius: .5rem;
        }
        
        
                .prize-level-line > span{
            width:auto;
           color:#3d3d3d;
            margin-left: 1rem;
            font-size: 1.2rem;
            
        }
          .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;
             overflow-y:auto;
                display: -webkit-flex;
            display: flex;
             align-content:center;
             display: none;
 background-color:rgba(0, 0,0, 0.7);
 -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: auto;
        display:flex;
          display: -webkit-flex;
                  -webkit-justify-content: space-around;
            justify-content: space-around;
             align-items: center;
         
     }
     .prize-chouzhong-button >img{
         width: auto;
         height: 4rem;
     }
 
 

         .prize-chouzhong-box{
              width:calc(100% - 3.2rem);
              margin-left: 1.6rem;
              min-height: 10rem;
            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;
         }
      
            
         .prize-chouzhong-box-imgA{
             width: 16rem;
             height:16rem;
-webkit-animation:bounce 2s .2s ease both;
         }
         
@-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:-7rem;
             left: -13rem;
             height: 32rem;
             width: 42rem;
         }
          .prize-chouzhong-box-B{
              position: relative;
              width: 25vw;
              height:25vw;
               margin-bottom: .5rem;
            border-radius: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            
          }
            .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;
            
          }
          
          .prize-chouzhong-box-B>div{
           bottom: 2rem;
           left: 1rem;
           width: 8rem;
           font-size: 1.2rem;
           color:#f9f9f9;
          }
           .prize-chouzhong-box-A>div{
                bottom: 0px;
                 left: 0px;
           }
        

/**/

        #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:#3d3d3d;
      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;
}



    
  .prize-chouzhong-box-A{
      width: 16rem;
      height: 16rem;
      position: relative;
  }
   /*.prize-chouzhong-box-A::before {
              content: "";
              position: absolute;
              top: -2rem;
              left: -2rem;
              right: -2rem;
              bottom: -2rem;
                 background-image: url(/app/image/box/prize-out.png);
                 background-size: 100% 100%;
                 background-repeat: no-repeat;
              z-index: 2;
            }*/
          .prize-chouzhong-box-B{
              position: relative;
              width: 25vw;
              height: 25vw;
               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;
  width:100%;
  height: auto;
background:rgba(255,255,255,0.5);
}
.cash-out-top{
    width: 100%;
    height: 5rem;
    position: relative;
    margin-top:3rem;
}
.cash-title{
    width:100%;
    height:5rem;
}

 
        
        
        
        .box-detail-footer{
    position: fixed;
    left: 0;
    bottom: 0rem;
    width:100vw;
    height: 7rem;
    line-height: 7rem;
    z-index: 20;
     align-items: center;
     
}


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




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




  .prize-chouzhong-box-B>div{
           bottom: 0;
           left:0;
           width:100%;
          
           font-size: 1.2rem;
           color:#f9f9f9;
          }
           .prize-chouzhong-box-A>div{
                bottom: 0px;
                 left: 0px;
                
           }
     .prize-chouzhong-box-B{
              position: relative;
               margin-bottom: 2rem;
            border-radius: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            
          }     

.cash-out-bg{
    position: absolute;
    bottom: -5rem;
    width: 100%;
    height: 10rem;
}

.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;
    background-color:rgba(0, 0, 0, 0.9);
    box-sizing: border-box;
    font-size: 1.2rem;
}

.box-pic-tips{
  width: 100%;
  height: 4rem;
       display:flex;
    display: -webkit-flex;
    justify-content:space-around;
  -webkit-justify-content:space-around;
      align-items: center;
      margin-top:2rem;
      margin-bottom: 1rem;
}
.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;
    padding:0 1rem 0 1rem;
    border-top-right-radius: 1rem;
}



.box-pic{
    position: relative;
     width:calc(100vw - 3.2rem);
       height:35rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
   box-sizing: border-box;
      background-size: 100% 100%;
      border-radius: 1rem;
      margin-top:1rem;
      background-color: #fff;
      border-radius: 4rem;
      padding: .5rem;
}
.box-pic-img{
    width: 100%;
    height:28rem;
       display:flex;
    display: -webkit-flex;
    align-items: center;
    justify-content:center;
  -webkit-justify-content:center; 
  border-radius: 4rem;
  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;
       
}
.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:45%;
    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: #000;
    line-height:1.5rem;
    text-align: right;
    padding-left: 3px;
}


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




.prize-miner img{
    width: 2rem;
    height: 2rem;
}
.prize-miner{
    color: var(--color6);
    font-size: 1.2rem;
    align-items: center;
    padding: .5rem 0 .5rem 0;
}

.prize-miner >div{
    width: auto;
   display: flex;           /* 启用 Flexbox 布局 */
    flex-direction: column;  /* 设置主轴方向为垂直 */
    justify-content: center; /* 主轴上居中对齐（垂直居中） */
    align-items: center;     /* 交叉轴上居中对齐（水平居中） */
}


.box-detail-isbuy{
            position: absolute;
            top:0;
            right:1rem;
            width:auto;
            height:3rem; 
}






     
     
              
         .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;
         border: 1px solid #000;
         background: var(--bg-card1);
         color: #3d3d3d;
      }
   .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 #000;
    
}
.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: 4rem;
    line-height:4rem;
    text-align: center;
    color:var(--color6);
   /* background-image: url(/app/image/public/bg-line.png);*/
    background: linear-gradient(270.00deg, rgb(255 255 255 / 0%), rgb(229 255 219) 49%, rgb(255 255 255 / 17%) 100%);
    background-size: 100% 100%;
     margin-bottom: 2rem;
}
  
  
  
  
  /*页面菜单栏*/
  
  .hot-menu{
        position: sticky;
  top: 0;
  -webkit-overflow-scrolling: touch; /* 解决iOS滑动卡顿问题 */
  transform: translateZ(0); /* 解决iOS滑动卡顿问题 */
        height: 6rem;
        line-height: 3rem;
        width: 100vw;
        margin-bottom: 1rem;
        box-sizing:border-box;
        padding:2rem 1rem 1rem 1rem;
        z-index: 1000;
        overflow: hidden;
          background: linear-gradient(90.00deg, rgba(248, 212, 125, 1),rgba(183, 245, 120, 1) 23%,rgba(120, 251, 213, 1) 57%,rgba(120, 251, 243, 1) 100%);
           overflow-x: auto;
        overflow-y: hidden;
        white-space:nowrap;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
}



   .hot-menu-item{
       position: relative;
       display: inline-block;
       font-size: 1.4rem;
        color:var(--color6);
        width:8rem !important;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        box-sizing: border-box;
        margin-right: 1rem;
border: 1px solid rgba(56, 56, 56, 1);
border-radius: 2.5rem;
   }
   
   .hot-menu-active::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: -4rem;
  right: -4rem;
  bottom: -4rem;
  background: url(/app/image/public/bg-menu.png);
  background-size: 100% 100%;
  background-repeat:no-repeat;
  z-index: -1; /* 放在内容后面 */
  border: 4px solid transparent;
}

.hot-menu-active::after {
 content: '';
  position: absolute;
  bottom: -10px;        /* 从 div 底部往下偏移 */
  left: 50%;            /* 水平居中 */
  transform: translateX(-50%); /* 精确居中 */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgb(56,56,56);   /* 倒三角颜色，与边框一致 */
  z-index: 2; /* 放在最前面 */
}
   
  .hot-menu-active{
background: linear-gradient(180.00deg, rgba(231, 229, 67, 1),rgba(250, 228, 108, 1) 100%);
  }     


/*一排2个列表*/
/*TYPE*/

.box-list  {
    position: relative;
  width: calc(100vw - 2.8rem);
    margin-left: 1.4rem;
    height: auto;
    display: -webkit-flex;
    display: flex;
        -webkit-justify-content: space-between;
    justify-content: space-between;
     align-items: center;
        flex-wrap:wrap;
        margin-bottom: 2rem;
     padding-top:3rem;
}

.box-list-item{
    position: relative;
       width: calc(50vw - 2.2rem);
    height:auto;
    margin-bottom: 3rem;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background: rgb(255,255,255);
    border-radius:1rem;
}
.box-list-item-text{
    width: 100%;
    height: 6rem;
     background-size: 100% 100%;
}

.box-list-img{
    width:calc(50vw - 2.2rem);
    height: calc(50vw - 3rem);
    overflow: hidden;
    margin: 0;
    display: flex;
    justify-content: center;
}



.box-list-img-a{
     width:calc(50vw - 3rem);
    height: calc(50vw - 3rem);
        border-bottom-left-radius:.5rem;
    border-bottom-right-radius: .5rem;
}

.box-list-img-a{
     z-index: 1; /* 确保背景图在底层 */
}
.box-list-img-b{
     z-index: 2; /**/
}



.box-list-item-text > div{
    margin-top:1rem;
    width:90%;
    height: 2rem;
font-family: Inter;
text-overflow: ellipsis;
    overflow: hidden;
white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
 
}

.box-list-item-text-a{
    height: 2rem;
    line-height: 2rem;
 text-indent: 1rem;
font-size: 1.4rem;
font-weight: 400;
overflow: hidden;
 color:#232323;

}
.box-list-item-text-b:before {
        content: "￥";
    }
.box-list-item-text-b{
font-size: 1.6rem;
font-weight: 500;
text-align: right;
line-height: 2rem;
     margin-bottom: 1rem;
      color:#3d3d3d;
}



.box-list-tips{
            width:6rem;
            height:3rem; 
            line-height: 3rem;
            text-align: center;
            font-size: 1.2rem;
}




      
 .box-list-item-top{
    position: absolute;
    top:-1.5rem;
    left: -.5rem;
    right: -.5rem;
    width: auto;
    height: 3rem;
    background: url(/app/image/public/bg-box.png);
    background-size: 100% 100%;
    z-index: 99;
}