:root {
    --tech-blue: #00f3ff;
    --cyber-purple: #6c00ff;
}
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
    
}
body {
    background: linear-gradient(45deg, #ffffff, #ffffff);
    font-family: 'Roboto', sans-serif;
}
.compliance-page1{
    width: 100%;
    height: 80vh;
    background-size: cover;
    background-image: url(../../images/compliance/合规背景图.jpg);
}
.cyber-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
    overflow: hidden;
}

/* 科技感标题 */
.cyber-title {
    text-align: center;
    font-size: 2.8rem;
    background: linear-gradient(135deg, var(--tech-blue), var(--cyber-purple));
    -webkit-background-clip: text;
    color: transparent;
    position: relative;
    margin-bottom: 60px;
}

/* 动态网格背景 */
.grid-bg {
    position: absolute;
    width: 150%;
    height: 150%;
    /* background: 
        repeating-linear-gradient(
            45deg,
            rgba(108, 0, 255, 0.05) 0px 20px,
            transparent 20px 40px
        ); */
    animation: gridMove 20s linear infinite;
}

/* 功能卡片容器 */
.cyber-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
}

/* 科技感卡片 */
.cyber-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(171, 231, 231, 0.3);
    border-radius: 8px;
    padding: 30px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.cyber-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 243, 255, 0.1);
}

/* 卡片光效 */
.cyber-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* background: linear-gradient(
        45deg,
        transparent 48%,
        var(--tech-blue) 50%,
        transparent 52%
    ); */
    opacity: 0.3;
    animation: lightFlow 3s infinite;
}

/* 图标样式 */
.tech-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--tech-blue), var(--cyber-purple));
    -webkit-mask-size: contain;
    mask-size: contain;
    margin-bottom: 20px;
}

@keyframes lightFlow {
    0% { transform: translate(0,0) rotate(45deg); }
    100% { transform: translate(100px,100px) rotate(45deg); }
}

@keyframes gridMove {
    0% { transform: translate(-25%, -25%); }
    100% { transform: translate(0, 0); }
}
/* 手机端 */
@media (max-width: 576px) {
  .box { width: 100%; }
}

/* 平板 */
@media (min-width: 577px) and (max-width: 992px) {
  .box { width: 50%; }
}

/* 桌面端 */
@media (min-width: 993px) {
  .box { width: 25%; }
}