/* 容器样式，使侧边栏靠边中间显示 */
.container1 {
    display: flex;
    align-items: center;
    /*height: 100vh;*/
}

/*!* 侧边栏样式 *!*/
/*.sidebar-wrapper {*/
/*    border: 1px solid #ccc; !* 为侧边栏添加边框 *!*/
/*    width: 120px; !* 侧边栏的宽度 *!*/
/*    background-color: white; !* 侧边栏的背景颜色 *!*/
/*    color: white; !* 侧边栏文字颜色 *!*/
/*    padding: 20px;*/
/*}*/


/*.sidebar1 ul li:first-child > a {*/
/*    position: relative; !* 设置相对定位，以便定位伪元素 *!*/
/*}*/

/*.sidebar1 ul li:first-child > a::before {*/
/*    content: "产品列表"; !* 设置伪元素的内容 *!*/
/*    display: block; !* 确保伪元素以块级元素显示 *!*/
/*    font-size: 20px; !* 设置字体大小 *!*/
/*    color: #fff; !* 设置文字颜色 *!*/
/*    position: absolute; !* 设置绝对定位，相对于父元素定位 *!*/
/*    top: -65px; !* 调整伪元素位置，控制与文字的垂直距离 *!*/
/*    left: 0; !* 调整伪元素位置，控制与文字的水平位置 *!*/
/*}*/

.sidebar ul li.special > a {
    position: relative; /* 设置相对定位，以便定位伪元素 */
}

.sidebar ul li.special > a::before {
    content: "产品列表"; /* 设置伪元素的内容 */
    display: block; /* 确保伪元素以块级元素显示 */
    font-size: 20px; /* 设置字体大小 */
    color: #fff; /* 设置文字颜色 */

    /*border-bottom: 1px solid #333; !* 添加分隔线效果 *!*/
    position: absolute; /* 设置绝对定位，相对于父元素定位 */
    top: -65px; /* 调整伪元素位置，控制与文字的垂直距离 */
    left: 0; /* 调整伪元素位置，控制与文字的水平位置 */
}

/*添加下划线*/
.sidebar ul li.special > a::after {
    content: ""; /* 空内容，用于创建下划线 */
    display: block; /* 确保伪元素以块级元素显示 */
    width: 100%; /* 下划线宽度与父元素相同 */
    height: 1px; /* 下划线高度 */
    background-color: #f61212; /* 下划线颜色 */
    position: absolute; /* 绝对定位 */
    bottom: 40px; /* 调整下划线位置，使其位于文字下方 */
    left: 0; /* 下划线左侧与父元素左侧对齐 */
}


/* 侧边栏样式 */
.sidebar {
    border: 1px solid #ccc; /* 为侧边栏添加边框 */
    width: 160px; /* 侧边栏的宽度 */
    height: 245px;
    min-width: 160px; /* 限制最小宽度为120px */
    max-width: 160px; /* 限制最大宽度为120px */
    background-color: #1d94cb; /* 侧边栏的背景颜色 */
    color: black; /* 侧边栏文字颜色 */
    padding: 20px;
    position: fixed; /* 添加固定定位 */
    top: 0; /* 侧边栏距离顶部的距离，可以根据需要调整 */
    bottom: 0; /* 侧边栏距离底部的距离，可以根据需要调整 */
    left: 0; /* 将侧边栏固定在屏幕左边 */
    z-index: 10000; /* 设置侧边栏的层级，可以根据需要调整 */
    margin-top: 10%;
}


.sidebar ul {
    list-style-type: none; /* 去除列表样式 */
    padding: 0;
}

.sidebar li {
    padding: 10px;
    position: relative; /* 相对定位 */
    border-bottom: 1px solid #333; /* 添加分隔线效果 */
    margin-right: auto; /* 将菜单项靠左对齐 */
    /*margin-top: 10%;*/
}

.sidebar li:first-child {
    /*padding: 10px;*/
    /*position: relative; !* 相对定位 *!*/
    /*border-bottom: 1px solid #333; !* 添加分隔线效果 *!*/
    /*margin-right: auto; !* 将菜单项靠左对齐 *!*/
    margin-top: 30%;
}

.sidebar li:last-child {
    border-bottom: none; /* 移除最后一个元素的分隔线 */
}

.sidebar li.special1 {
    border-bottom: none; /* 移除最后一个元素的分隔线 */
}


/* 链接样式 */
.sidebar a {
    text-decoration: none;
    color: #fcfafa; /* 链接文字颜色 */
    display: block; /* 设置链接为块级元素，使其占据整个侧边栏宽度 */
}

/* 鼠标悬停链接样式 */
.sidebar a:hover {
    background-color: #333; /* 鼠标悬停时的背景颜色 */
}

/* 二级菜单样式 */
.submenu {
    border: 1px solid #ccc; /* 为侧边栏添加边框 */
    display: none; /* 默认隐藏二级菜单 */
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 100%; /* 二级菜单相对于一级菜单向右偏移 */
    /*background-color: white; !* 二级菜单的背景颜色，改为黑色 *!*/
    padding: 10px;
    white-space: nowrap; /* 防止文本换行 */
    background-color: #1d94cb; /* 侧边栏的背景颜色 */
}

/* 鼠标悬停一级菜单时显示二级菜单 */
.sidebar li:hover .submenu {
    display: block;
}

/* 鼠标悬停一级菜单时显示二级菜单 */
.sidebar1 li:hover .submenu {
    display: block;
}

.image-container {
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 设置一个较大的 z-index 值确保图片容器在最上层 */
    /*background-color: rgba(0, 0, 0, 0.8); !* 添加半透明黑色背景，以便更好地显示图片 *!*/
    display: none; /* 初始状态下隐藏图片容器 */
    align-items: center;
    justify-content: center;
    margin-top: 6%;
}

/*.image-container {*/
/*  position: relative; !* 设置图片容器为相对定位 *!*/
/*  max-width: 400px; !* 设置图片容器的最大宽度 *!*/
/*}*/

#close-button {
    position: absolute; /* 设置关闭按钮为绝对定位 */
    top: 0; /* 距离屏幕顶部的距离为0 */
    right: 0; /* 距离屏幕右边的距离为0 */
    z-index: 1; /* 设置按钮在图片之上 */
    color: black; /* 设置按钮文字颜色为黑色 */
}

/* 上一个按钮的样式 */
#prev-button {
    position: absolute;
    bottom: 120px; /* 负值使按钮在图片下方 */
    left: 400px; /* 居中显示 */
    transform: translateX(-50%); /* 水平居中 */
    background-color: #fff;
    color: black;
    border: none;
    cursor: pointer;
}

/* 下一个按钮的样式 */
#next-button {
    position: absolute;
    bottom: 120px; /* 负值使按钮在图片下方 */
    right: 400px; /* 居中显示 */
    transform: translateX(50%); /* 水平居中 */
    background-color: #fff;
    color: black;
    border: none;
    cursor: pointer;
}


.image-container img {
    /*max-width: 80%;*/
    /*max-height: 80%;*/
    width: 300px;
    height: 300px;
    object-fit: contain;
    position: absolute;
    top: 100px;
    left: 300px;
}

/* 遮罩层样式 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* 白色遮罩层，设置透明度以便显示下方图片 */
    z-index: 9998; /* 设置一个较大的 z-index 值确保遮罩层在其他内容之上，但比图片容器小 */
    display: none;
    align-items: center;
    justify-content: center;
}

.small-container {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 100px;
    left: 600px;
    /* 这里可以设置小容器的样式，比如背景颜色、边框等 */
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    padding: 10px;
    /* 其他样式... */
}


/* 底部中间按钮样式 */
.bottom-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #000; /* 将按钮文字颜色设置为黑色 */
}

/* 图片文本容器样式 */
.image-text-container {
    width: 600px;
    height: 600px;
    border: 1px solid #ccc; /* 为侧边栏添加边框 */
    position: absolute;
    top: 20px; /* 距离图片底部的距离 */
    left: 1000px; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中 */
    background-color: white; /* 背景颜色为白色 */
    padding: 10px; /* 添加一定的内边距 */

    display: flex;
    justify-content: flex-start; /* 将内容左对齐显示 */
    align-items: center; /* 垂直居中显示 */
    flex-direction: column; /* 设置内容垂直排列 */

}

/* 设置标题样式 */
#title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}


/* 设置详情样式 */
#details p {
    font-size: 14px; /* 设置合适的字体大小，可以根据需要调整 */
    margin: 5px 0;
}

/* 设置详细内容样式 */
#description p {
    text-indent: 2em; /* 开头缩进两个字符 */
    justify-content: flex-start; /* 将内容左对齐显示 */
    margin-bottom: 10px;
    color: black; /* 字体颜色为黑色 */
    text-align: left; /* 文本左对齐 */
}

/* 设置详细内容样式 */
#image-text {
    color: black; /* 字体颜色为黑色 */
/ / text-align: center; /* 文本居中显示 */
    margin: 0; /* 去除默认的外边距 */
    text-indent: 2em; /* 开头缩进两个字符 */
    text-align: left; /* 文本左对齐 */
}



.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.7); !* 半透明黑色背景 *!*/
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay img {
    max-width: 80%; /* 设置最大宽度 */
    max-height: 80%; /* 设置最大高度 */
}


.submenu-container {
      display: none;
      position: absolute;
      margin-top: 10px;
    }

    /* Style for the images within the submenu */
    .submenu-container img {
      width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    /* Style for the text within the submenu */
    .submenu-container p {
      margin-bottom: 10px;
    }


    .popup-container {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: white;
      border: 1px solid #ccc;
      z-index: 1;
        max-height: 80%; /* Set a maximum height for the container */
      overflow-y: auto; /* Enable vertical scrollbar */
        width: 1000px;
    }

    /* Style for the images within the popup */
    .popup-container img {
      width: 100%;
      /*height: 150%;*/
      margin-bottom: 10px;
    }

    /* Style for the text within the popup */
    .popup-container p {
      margin-bottom: 10px;
    }
    .close-button {
      cursor: pointer;
      color: #555;
      font-size: 40px;
      float: right;
    }