/* 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('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("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;}