*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
body{background:#f7f8fa;min-height:100vh;display:flex;flex-direction:column;}
img{
    width: 100%;          /* 宽度占满父容器 */
    height: auto;        /* 高度自动等比例 */
    max-width: 100%;     /* 永远不会超出容器 */
    display: block;      /* 去掉图片默认留白 */
    object-fit: contain; /* 等比例，不变形 */
}
.mask{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.top{
    width: 100vw;
    height: 10vh;
}
.head{
    width: 95vw;
    height: 8vh;
    border-bottom:1px solid #ccc;
    background: #f5f5f5;
    margin:0px auto;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: end;
    gap: 1%;
    margin-bottom: 2vh;
}
.head span{
    padding:1% 1%;
    border-radius: 10%;
}
.head-span-tt{
    color: #19ef2d;
    font-size: large;
    background: #0786e7;
}

.banner{
    width: 100vw;
    height: 10vh;
}
.content{
    width: 95vw;
    height: 80vh;
    display: flex;
    flex-direction: row;
    /*justify-content: space-around;*/
    flex-wrap: wrap;
    margin: 0px auto;
    gap: 2%;                /* 卡片之间固定间距（关键）*/
    overflow-y: auto; /* 垂直方向超出自动显示滚动条 */
    align-content: flex-start; /* 让卡片顶部对齐，避免间距异常 */
}

.content-item{
    width: 18%;
    height:20vh;
    border:1px solid #ccc;
    margin-top: 1vh;
    border-radius: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;;
    padding-left: 1%;
    padding-left: 1%;
    box-sizing: border-box; /* 防止边框撑大盒子 */
    border: 1px solid red;
}
.content-item {
    /*background: linear-gradient(135deg, #fef9f0, #f0f4ff);*/
    background: linear-gradient(135deg, #f6ecd8, #cbd5ef);
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.item-top{
    width: 90%;
}
/* 父容器：控制宽度 */
.item-top-left {
    width: 50%;
    display: block; /* 让 span 正常支持宽高 */
}

/* 图片：等比例缩放 + 不超出容器 + 正常显示 */
.item-img {
    width: 50%;          /* 宽度占满父容器 */
    height: auto;        /* 高度自动等比例 */
    max-width: 100%;     /* 永远不会超出容器 */
    display: block;      /* 去掉图片默认留白 */
    object-fit: contain; /* 等比例，不变形 */
}

.item-bottom{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}
.item-bottom a {
    width: 40%;
}

.bottom{
    width: 100vw;
    height: 8vh;
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgb(29 41 57 );
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.bottom span{
    width: 100vw;
    text-align: center;
}
.bottom a {
    color: #fff;        /* 你想要的文字颜色 */
    text-decoration: none; /* 去掉下划线 */
}

.tell-me{
    position: absolute;
    right: 2vw;
    bottom: 15vh;
    border: 5px solid #ef9898;
    background: #f50824;
    padding: 1vw;
    border-radius: 10%;
    color: #fff;

    cursor: pointer;
    z-index: 99;
}


#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 98;
    pointer-events: none;
}

.qrcode-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.qrcode-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    animation: popShow 0.4s ease;
}

@keyframes popShow {
    0%{transform: scale(0.5); opacity: 0;}
    100%{transform: scale(1); opacity: 1;}
}

.close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}
.close-btn:hover {
    color: #f50824;
}

.qrcode-img {
    width: 200px;
    height: 200px;
    margin-top: 10px;
}


/* 人格测试二维码弹窗样式 */
.test-qrcode-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.test-qrcode-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.test-qrcode-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.test-qrcode-close:hover {
    color: #000;
}

.test-qrcode-box p {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #333;
}

.test-qrcode-img {
    width: 200px;
    height: 200px;
    display: block;
}

/* 按钮鼠标样式 */
.show-qrcode-btn {
    cursor: pointer;
}







.game{
    /*display: none;*/
}
.tool{
    display: none;
}
.soft{
    display: none;
}
.other{
    display: none;
}