.image-card {
            position: relative; 
        }

        .card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5); 
            color: #fff; 
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0; 
            transition: opacity 0.3s ease;
        }

        .image-card:hover .card-overlay {
            opacity: 1; 
        }
        .image-size{
            max-width: 412px;
            height: auto;
        }
        .card-size {
            width: 100%; 
            height: auto; 
            max-width: 300px; 
            max-height: 200px; 
            object-fit: cover; 
        }
        .link-size{
            font-size: 20px;
        }
        .bg-gradient {
            background: linear-gradient(to right, #ffffff, #fef7ff);
            border-color: #ffffff;
            color: #000;
        }

        .avatar-img {
            width: 150px; 
            height: 150px; 
            border-radius: 50%;
            overflow: hidden; 
            object-fit:cover;

        }
        .down{
            padding-bottom:40px;
        }
        
        .up-u{
             padding-top: 15px;
        }

        .up{
            padding-top: 120px;
        }

         .month {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        
        .status {
            font-weight: bold;
        }

        .red-line {
            height: 3px; 
            width: 100%;
            background-color: red;
            display: block;
        }
        .green-line {
            height: 3px; 
            width: 100%;
            background-color: green;
            display: block;
        }
        .silver-line {
            height: 3px; 
            width: 100%; 
            background-color: silver;
            display: block;
        }

        .red-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: red;
            margin-right: 4px;
            vertical-align: middle; 
        }
        .green-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: green;
            margin-right: 4px; 
            vertical-align: middle; 
        }
        .silver-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: silver;
            margin-right: 4px; 
            vertical-align: middle; 
        }

        /*.carousel-img {
            width: 500px; 
            height: 600px; 
            object-fit: cover;
        }

        .carousel-inner {
            height: 50vh; 
            max-width: 100%; 
            max-height: 100%; 
            overflow: hidden; 
        }*/

        a{
            color:black;
            text-decoration: none;
        }


       .shell {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            user-select: none;
        }

        .shell .item {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 400px;
            overflow: hidden;
            transition: all .3s ease-in-out;
            z-index: -1;
            opacity: 0;
            background-color: #fff;
        }

        .item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .item.active {
            opacity: 1;
            z-index: 99;
            transform: translate(-50%, -50%) scale(1.2);
        }

        .item.prev {
            z-index: 2;
            opacity: 0.25;
            transform: translate(-125%, -50%);
        }

        .item.next {
            z-index: 2;
            opacity: 0.25;
            transform: translate(25%, -50%);
        }

        .shell .button-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            z-index: 100;
        }
		
		.button-container .button:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -45%);
            width: 40px;
            height: 40px;
            background-color: rgba(5, 5, 5, 0.521);
            border-radius: 50%;
            z-index: -99;
        }


        .button-container .button {
            color: #fff;
            font-size: 32px;
            cursor: pointer;
            position: relative;
            transition: all 300ms ease-in-out;
        }

        .button-container .button:nth-child(1) {
            float: left;
        }

        .button-container .button:nth-child(2) {
            float: right;
        }

        .ko{
            width: 500px; 
            height:500px; 
        }

        .centers-content {
        display: flex;
        justify-content: center; 
        align-items: center; 
        }
		
		.img-link {
		position: relative;
		display: inline-block;
		}

		.img-responsive {
		width: 50px;
		height: 50px;
		transition: all 0.3s ease;
		}

		.img-link:hover .img-responsive {
		transform: scale(1.1);
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		
		.progress-bar{
            transition: transform 0.3s ease; 
        }

        .progress-bar:hover {
            transform: scale(1.1);
        }
		
		.w{
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 4px;
            vertical-align: middle; 
        }
		
		#backToTop {
            position: fixed; 
            bottom: 20px; 
            right: 30px; 
            z-index: 9999; 
            transition: opacity 0.3s ease-in-out;
        }   

        #backToTop.show {
            display: inline-block; 
        }   
    
        #backToTop:hover {
            opacity: 0.7;
        }

		.hand{
			width: 300px;
            height: 300px;
			transition: all 0.3s ease;
			border-radius:10px;
		}

		.img-link:hover .hand{
			transform: scale(1.1);
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		.image-container {
            position: relative;
            width: 100%; /* 可以根据需要设置一个固定值或者百分比 */
            height: auto; /* 保持图片的纵横比 */
        }

        .image-container img {
            width: 100%; /* 让图片的宽度适应容器的宽度 */
            height: auto; /* 高度自动，保持图片的纵横比 */
        }

        .scalable-button {
            position: absolute;
            background-size: contain; /* 背景图等比缩放 */
            background-repeat: no-repeat; /* 不重复背景图 */
            background-color: transparent;
            border: none; /* 移除边框 */
            outline: none; /* 移除轮廓 */
            padding: 0; /* 移除内边距 */
            cursor: pointer; /* 更改鼠标指针样式，表明这是一个可点击的按钮 */
            background-image: url('/staticfiles/p/b.png'); /* 设置按钮的背景图 */
            transform: translate(-50%, -50%); /* 这是关键，使得按钮随着图片大小变化而等比缩放 */
            }
        #button1 {
            top: 27%; /* 根据图片内的位置调整 */
            left: 72%; /* 根据图片内的位置调整 */
        }

        #button2 {
            top: 61.5%; /* 根据图片内的位置调整 */
            left: 72%; /* 根据图片内的位置调整 */
        }

        #button3 {
            top: 95%; /* 根据图片内的位置调整 */
            left: 72%; /* 根据图片内的位置调整 */
        }

        .modal-page {
            display: none;
        }

        .modal-page.active {
            display: block;
        }
        
        .no-border{
            border: none;
            box-shadow: none;
        }