/* 页面基础样式 */
body {
    margin: 0;
    padding: 0;
    background-color:#e3e3e3; /* 白色背景 */
    overflow: hidden; /* 禁用滚动 */
    height: 100vh; /* 高度等于视口高度 */
    width: 100vw; /* 宽度等于视口宽度 */
    
} 
  .image-container {
    width: 20%;
    height: 100%;
    background: #efcdcd;
    padding: 30px; /* 增加内边距，避免缩放后图片边缘被截断 */ 
} 
.chuanganqi .cjiamzjo{
    margin-left:50px;
}

.scaled-image {
    /* 等比例缩小到原来的90% */
    transform: scale(0.9);
    /* 保持图片居中显示 */
    display: block;
    margin: 0 auto;
    /* 防止缩放后图片占据的空间变化 */
    transform-origin: center;
}
.juzhong{
    display: flex;
     justify-content: center; 
     align-items: center;
}
.beijinxiaocheng{
  
    background-image: url('./img/背景加栏车杆/背景1.png');
        background-repeat: no-repeat; /* 防止图片重复平铺 */
    background-position: center; /* 可选：让背景图片居中显示 */
    /* 如果需要让背景充满容器，可能还需要设置元素自身的尺寸 */
    width: 100%; /* 元素宽度占父容器100% */
    height: 100vh; /* 元素高度为视口高度的100%，可根据需要调整 */
}
.beijinshangmian{
    
    background-image: url('./img/背景加栏车杆/背景2.png');
    background-repeat: no-repeat; /* 防止图片重复平铺 */
    background-position: center; /* 可选：让背景图片居中显示 */
    /* 如果需要让背景充满容器，可能还需要设置元素自身的尺寸 */
    width: 100%; /* 元素宽度占父容器100% */
    height: 100vh; /* 元素高度为视口高度的100%，可根据需要调整 */

}
 #dengguangjianzhu { /* 针对id为dengguangjianzhu的元素设置样式 */
            transition: all 0.5s ease; /* 所有属性变化时，使用0.5秒的过渡动画，速度曲线为ease */
        }
  /* 呼吸灯效果类 */
        .breathing { /* 呼吸灯效果的样式类 */
            background-color: #4CAF50; /* 背景色为绿色 */
            animation: breathing 2s infinite ease-in-out; /* 应用名为breathing的动画，持续2秒，无限循环，速度曲线为ease-in-out */
        }
        
        /* 长亮效果类 */
        .steady { /* 长亮效果的样式类 */
            background-color: #2196F3; /* 背景色为蓝色 */
            box-shadow: 0 0 20px 10px rgba(33, 150, 243, 0.8); /* 元素外发光效果，水平偏移0，垂直偏移0，模糊20px，扩散10px，颜色为半透明蓝色 */
        }
        
        /* 熄灭效果类 */
        .off { /* 熄灭效果的样式类 */
            background-color: #7f8c8d; /* 背景色为灰色 */
            box-shadow: none; /* 取消阴影效果 */
        }
        
        /* 呼吸动画关键帧 */
        @keyframes breathing { /* 定义名为breathing的动画关键帧 */
            0% { /* 动画开始时（0%进度）的状态 */
                opacity: 0.6; /* 透明度为0.6（半透明） */
                box-shadow: 0 0 10px 5px rgba(76, 175, 80, 0.5); /* 较小的绿色阴影 */
            }
            50% { /* 动画中间（50%进度）的状态 */
                opacity: 1; /* 完全不透明 */
                box-shadow: 0 0 20px 15px rgba(76, 175, 80, 0.8); /* 较大的绿色阴影 */
            }
            100% { /* 动画结束（100%进度）的状态，与开始状态一致以实现循环 */
                opacity: 0.6; /* 透明度为0.6 */
                box-shadow: 0 0 10px 5px rgba(76, 175, 80, 0.5); /* 回到较小的绿色阴影 */
            }
        }