/* 门容器样式 */
        .yxjmen-doorWrap {
            width: 180px;           /* 容器宽度 */
            height: 180px;          /* 容器高度 */
            border: 2px solid #444; /* 容器边框 */
            border-radius: 4px;     /* 边框圆角 */
            perspective: 450px;     /* 3D透视效果值 */
            position: fixed;        /* 固定定位 */
            right: 6%;            /* 距离右侧30px */
            bottom: 20px;           /* 距离底部30px */
            display: flex;          /* 弹性布局 */
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4); /* 容器阴影 */
            z-index: 100;           /* 层级高度 */
        }

        /* 左门和右门的共有样式 */
        .yxjmen-leftDoor,
        .yxjmen-rightDoor {
            width: 50.5%;             /* 宽度为父容器的一半 */
            height: 101%;           /* 高度与父容器相同 */
            background: linear-gradient(to bottom, #8b0000, #6a0000); /* 深红色渐变背景 */
            transition: transform 1s ease-in-out; /* 平滑的旋转过渡效果 */
            z-index: 2;             /* 确保门在内容区域之上 */
            display: flex;          /* 弹性布局 */
            justify-content: center; /* 水平居中 */
            align-items: center;    /* 垂直居中 */
            border: 1px solid #400; /* 边框样式 */
            color: rgba(255, 255, 255, 0.6); /* 文字颜色，稍微透明 */
            font-size: 30px;        /* 字体大小 */
            font-weight: bold;      /* 字体粗细 */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* 文字阴影 */
            cursor: pointer;        /* 鼠标指针样式 */
        }

        /* 门上的文字样式（文字旋转180°） */
        .yxjmen-door-text {
            transform: rotate(180deg); /* 文字旋转180度 */
            display: block;
        }

        /* 设置左门旋转基点 */
        .yxjmen-leftDoor {
            transform-origin: left; /* 以左侧为旋转基点 */
            left: -1px;             /* 向左微调确保完全覆盖 */
        }

        /* 设置右门旋转基点 */
        .yxjmen-rightDoor {
            transform-origin: right; /* 以右侧为旋转基点 */
            right: -1px;            /* 向右微调确保完全覆盖 */
        }

        /* 鼠标悬停时左门旋转效果 */
        .yxjmen-doorWrap:hover .yxjmen-leftDoor {
            transform: rotateY(-120deg); /* 向左旋转120度 */
        }

        /* 鼠标悬停时右门旋转效果 */
        .yxjmen-doorWrap:hover .yxjmen-rightDoor {
            transform: rotateY(120deg); /* 向右旋转120度 */
        }

        /* 内容区域样式 */
        .yxjmen-content {
            position: absolute;     /* 绝对定位 */
            z-index: 1;             /* 层级低于门 */
            width: 100%;            /* 宽度与父容器相同 */
            height: 100%;           /* 高度与父容器相同 */
            background: linear-gradient(45deg, #2980b9, #2c3e50); /* 蓝色到深蓝色的渐变背景 */
            display: flex;          /* 弹性布局 */
            flex-direction: column; /* 垂直方向排列 */
            justify-content: center; /* 垂直居中 */
            align-items: center;    /* 水平居中 */
            color: white;           /* 文字颜色 */
            text-align: center;     /* 文字居中 */
            padding: 12px;          /* 内边距 */
            box-sizing: border-box; /* 盒模型计算方式 */
        }

        /* 内容区域图片样式 */
        .yxjmen-content img {
            max-width: 80%;         /* 图片最大宽度为容器宽度的70% */
            border-radius: 8px;     /* 图片圆角 */
            margin-bottom: 4px;    /* 底部外边距 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 图片阴影 */
        }

        /* 内容区域标题样式 */
        .yxjmen-title {
            font-size: 14px;        /* 字体大小 */
            font-weight: bold;      /* 字体粗细 */
            margin-bottom: -6px;     /* 底部外边距 */
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 文字阴影 */
        }

        /* 内容区域描述文本样式 */
        .yxjmen-description {
            font-size: 10px;        /* 字体大小 */
            max-width: 90%;         /* 最大宽度 */
            line-height: 1.2;       /* 行高 */
        }

        /* 移动端样式 - 屏幕宽度小于768px时隐藏门容器 */
        @media (max-width: 768px) {
            .yxjmen-doorWrap {
                display: none; /* 隐藏门容器 */
            }
        }