.button{ display:inline-block; border:1px solid gray; border-radius:1px; cursor:pointer; padding:4px 8px; margin:4px 0; user-select:none; -moz-user-select:none; }
        #demo1 {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3; /* Set a higher z-index to ensure it appears above the first div */
        }
        
        .selected {
            background-image: url('skin/sel.png') !important;
            background-size: cover;
            width: 146px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
			padding: 10px;
        }
    
        .unselected {
            background-image: url('skin/unsel.png') !important;
            background-size: cover;
            width: 146px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
			padding: 10px;
        }

        h5 {
            font-weight: bold;
            line-height: 1.5;
            font-family: "Microsoft YaHei";
            text-align:center
        }
        div {
            margin-bottom: -10px; /* Add bottom margin to create space between div elements */
        }
        .image-with-margin {
            margin-top: 10px; /* Add 10 pixels of margin above the image */
            margin-bottom: 10px; /* Add 10 pixels of margin below the image */
            margin-left: 2px;
            margin-right: 2px;
        }
        .logo-overlay {
			position: absolute;
			top: 10px; /* Set the distance from the top of the screen */
			left: 10px; /* Set the distance from the left of the screen */
			z-index: 1; /* Ensure the logo appears on top of the background image */
			width:230px;
		}

        @media only screen and (max-width: 600px) {
            .logo-overlay {
                position: absolute;
                top: 10px; /* Set the distance from the top of the screen */
                left: 10px; /* Set the distance from the left of the screen */
                z-index: 1; /* Ensure the logo appears on top of the background image */
                width:180px;
            }
        }
        .cn-overlay {
			position: absolute;
			top: 10px; /* Set the distance from the top of the screen */
			right: 10px; /* Set the distance from the left of the screen */
			z-index: 1; /* Ensure the logo appears on top of the background image */
			width:60px;
		}
        .ipkt-overlay {
            position: absolute;
            top: 70%; /* Set the distance from the top of the screen */
            left: 50%; /* Move the image to the center horizontally */
            transform: translateX(-50%); /* Adjust the position to center horizontally */
            z-index: 1; /* Ensure the logo appears on top of the background image */
            width: 300px;
        }
        
        @media only screen and (max-width: 600px) {
            .ipkt-overlay {
                top: 70%; /* Adjust the top position for smaller screens */
                width: 150px; /* Adjust the width for smaller screens */
            }
        }
        
        .image-grid {
            position: absolute;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Two columns */
            grid-gap: 30px 150px; /* Gap between grid items */
            z-index: 1; /* Ensure the grid of images appears on top of the background image */
        }
    
        @media only screen and (max-width: 600px) {
            .image-grid {
                top: 25%; /* Adjust the top position for smaller screens */
                left: 5%; /* Adjust the left position for smaller screens */
                width: 90%; /* Adjust the width for smaller screens */
                height: 40%; /* Adjust the height for smaller screens */
                grid-template-columns: repeat(2, 1fr); /* Two columns for smaller screens */
                grid-gap: 10px; /* Adjust the gap between grid items for smaller screens */
            }
    
            .img_louceng {
                position: relative;
                height: auto;
            }
    
            .image-grid img {
                width: 100%; /* Set image width to 100% of parent container */
                height: auto; /* Maintain aspect ratio */
                max-width: 100%; /* Ensure image does not exceed container width */
            }
        }
    
        @media only screen and (min-width: 601px) {
            .image-grid img {
                width: 100%; /* Adjust image width for larger screens */
                height: auto;
            }
        }
    
        .img_louceng {
            position: relative;
            height: auto;
        }
    
        .hover-image {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; /* Make the hover image width the same as the original image */
            height: 100%; /* Make the hover image height the same as the original image */
            object-fit: cover; /* Maintain the aspect ratio of the hover image and fill the entire container */
        }
    
        .img_louceng:hover .hover-image {
            display: block;
        }


        .box {
            width: 146px;
            height: 100%;
            background-color: lightblue;
            transition: transform 0.3s ease; /* 添加过渡效果 */
        }
        .hidden {
            transform: translateX(-100%); /* 将div推到屏幕外 */
        }
    
        .button-container {
            position: fixed;
            bottom: 50px;
            left: 20%;
            transform: translateX(-20%);
            z-index: 2;
        }

        .button-container img {
            width: 50px; /* 设置图片按钮的宽度 */
            height: 50px; /* 设置图片按钮的高度 */
            margin: 0 10px; /* 设置图片按钮之间的间距 */
            cursor: pointer; /* 将鼠标样式设置为手型 */
        }
        @media only screen and (max-width: 600px) {
            .button-container {
                position: fixed;
                bottom: 50px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 2;
            }
            .button-container img {
                width: 30px; /* 在屏幕宽度小于600px时，调整图片按钮的大小 */
                height: 30px;
            }
        }

        .scrollable {
            overflow: hidden; /* 隐藏滚动条 */
            height: 200px; /* 设置所需高度 */
            width: 300px; /* 设置所需宽度 */
        }