body, html {
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 允许滚动 */
}


table.blue-table {
width: auto; /* 表格宽度根据内容自动调整 */
border-collapse: collapse; /* 合并边框 */
}

table.blue-table th,
table.blue-table td {
word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
max-width: 200px; /* 设置最大宽度以防止过宽 */
white-space: normal; /* 允许文本换行 */
padding: 5px; /* 给单元格内文字一些空间 */
}

h2 {
    text-align: center;
  }

  
.blue-table {
	width: auto; /* 表格宽度自动调整 */
	border-collapse: collapse;
	margin-bottom: 20px; /* 在表格之间添加一些间距 */
	margin-left: auto;
	margin-right: auto; /* 让表格在容器内居中 */
}
	
.scene {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 600px;
}

.image-container {
    position: absolute;
    top: 10%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease-out;
	
}

.image-container img {
    max-width: 50%; /* 确保图片不会超出其容器 */
    height: auto; /* 维持图片的原始比例 */

}


.image-front {
    transform: translateZ(50px);
}

.image-back {
    transform: rotateY(180deg) translateZ(50px);
    backface-visibility: hidden;
}

.blue-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    color: #333;
}

.blue-table th, .blue-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.blue-table th {
    background-color: #2786fe;
}


.business-card {
    width: 90%; /* 使用百分比使卡片宽度相对于父容器 */
    max-width: 1000px; /* 设置最大宽度为1000px，防止过大 */
    height: auto; /* 保持原始比例 */
    margin: 20px auto; /* 居中显示 */
    display: block;
}

.blue-table {
    position: relative; /* 确保伪元素相对于表格定位 */
	opacity: 0.7; /* 表格和其内容都会变成半透明 */
}

.blue-table:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/水印.png');
    background-repeat: repeat; /* 让水印图案重复铺满整个区域 */
    background-position: center;
    background-size: auto; /* 根据需要调整，auto表示使用图片原始尺寸 */
    opacity: 0.05; /* 设置水印透明度 */
    z-index: -1; /* 确保水印位于所有内容之后 */
}


/* 添加媒体查询以适应小屏幕 */
@media (max-width: 600px) {
    .business-card {
        width: 100%; /* 在小屏幕上让卡片占据全部宽度 */
        margin: 10px auto; /* 减少外边距以适应更小的空间 */
    }
}