/* styles.css */
:root {  
  font-size: 48px; /* 默认设置，确保在大屏幕上1rem=10px */  
}  
@media (max-width: 480px) {  
  :root {  
    font-size: calc(100%  * 48px / 480px);  
  }  
}
@font-face {  
  font-family: 'font1';  
  src: url('../new1101/ttf/qmbu8-pqihf.woff2') format('woff2'),  
        url('../ttf/zaozigongfangzhehei.woff') format('woff');  
  font-weight: normal;  
  font-style: normal;  
}  
@font-face {  
  font-family: 'font2';  
  src: url('../ttf/xbold.woff') format('woff'),
      url('../ttf/ZY-Euphoria-2.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}  

.body { 
  font-family: sans-serif;  
}

*{
  margin:0;
  padding:0;
  border:0;
  -moz-box-sizing: border-box; /*Firefox3.5+*/
  -webkit-box-sizing: border-box; /*Safari3.2+*/
  -o-box-sizing: border-box; /*Opera9.6*/
  -ms-box-sizing: border-box; /*IE8*/
  box-sizing: border-box; 
}
html,body{width:100%;height:100%;}
body{
  max-width:480px;
  background: #000;
  margin: 0 auto;
  font-family: 'Microsoft JhengHei';
}

*:focus{outline: none;}
a{text-decoration:none }
.pb10{padding-bottom:10px;}
.cfix:after,.cfix:before {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.fx{display:flex;}
.fx-jc{justify-content: center;}
.f1{flex:1;}.f2{flex:2;}.f3{flex:3;}.f4{flex:4;}.f5{flex:5;}.f6{flex:6;}.f7{flex:7;}.f8{flex:8;}.f9{flex:9;}.f10{flex:10;}.f11{flex:11;}
.ys{color:red !important;}
.sc{color:#fff;background: red !important;}
.xg{color:#fff;background: #00c708 !important;}
.zp{color:#fff;background: #03a9f4 !important;}
.bz{color:#fff;background: #d6c000 !important;}
.mcone{width: 60px;}
.img{
  width: 100%;
  height: 100%;
}
.textc{
  position: relative;
  color: #000;
  font-size: 0.36rem;
  z-index: 10;
}
.textcimg{
  max-width: 480px;
  position: fixed;
  top: 0rem;
  right: 0;
  height: auto;
}
.rq1{
  width: 10rem;
  height: 20rem;
  background: url("../img/1.png") no-repeat bottom ;
  background-size: 100% ;
}
.rq7a {  
    position: relative;  
    width: 12rem;  
    height: 7rem;  
    animation: moveUpDown 2s infinite ease-in-out; /* 添加上下运动动画 */  
}  
.breathing-light {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    width: 8rem;  
    height: 6rem;  
    background: radial-gradient(circle,  rgb(255, 255, 0),  rgba(255 255 255 / 0%));
    /* background-color: yellow;   */
    border-radius: 50%;  
    transform: translate(-50%, -50%);  
    opacity: 0.1;  
    animation: breathe 2s infinite ease-in-out; /* 添加呼吸动画 */  
}  
    
@keyframes moveUpDown {  
    0%, 100% {  
        top: 1rem;  
    }  
    50% {  
        top: 0rem;  
    }  
}
.rq2{
  position: absolute;
  top: 5.25rem;
  width: 10rem;
  text-align: center;
}
.rq2-2{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.4rem;
  font-size: 0.6rem;
  font-family: 'font2', sans-serif;
}
.rq2-2 div{
  width: 1.3rem;
  margin: 0 0.2rem;
  background: #f7f7f7;
  border-radius: 5px;
  height: auto;
  padding: 0.2rem;
  line-height: 1;
  font-size: 0.8rem;
}
.rq2-3{
  margin-top: 0.9rem;
  font-size: 0.42rem;
  font-weight: bold;
}
.rq2-4{
  margin-top: 0.12rem;
  font-size: 0.32rem;
 /* font-weight: bold;*/
  color: #878787;
  font-family:'SimHei', 'Source Han Sans CN','sans-serif';
}
.rq2-5{
  position: relative;
  margin-top: 0.36rem;
}
.square {  
  display: grid;  
  grid-template-columns: repeat(8, 0.27rem); /* 16 dots + 1 space for border */  
  grid-template-rows: repeat(8, 0.27rem);  
  gap: 1px; /* Space between dots */  
  width: calc(0.65rem * 8 + 0.65rem); /* 16 dots * size + (16-1) * gap */  
  height: calc(0.65rem * 8 + 0.65rem);  
  margin: 0 auto;
  justify-content: space-around;
  align-content: space-around;
}  
.dot {  
    width: 0.27rem;  
    height: 0.27rem;  
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Optional: for a bit of depth */  
}  
.gray {  
  background-color: #5e5e5e;   
}  
.yellow {  
    background-color: #f9d964;  
}  
.rq2-5-1{
  position: absolute;
  top: 0.95rem;
  left: 3.025rem;
  width: 3.95rem;
  height: 3.95rem;
}
.rq2-5-1 img{
  width: 100%;
  height: 100%;
}
.rq2-5-1 canvas{
        width: 3.95rem;
  height: 3.95rem;
}
.rq2-6{
  margin-top: 0.28rem;
  font-size: 0.3rem;
  color: #9E9E9E;
}
#rq_msg{width:100%; height:100%;left:0;top:0; position:fixed;background:rgba(0,0,0,0.3);display:none;z-index: 999999;}
.rq_point{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);z-index: 999999;}
#rq_poptext{background: #ffffff;padding: 15px 25px;border-radius: 3px;}