.container_rt{
	margin:40px auto 10px;
	width:90%;background:#fff;border-radius:8px;padding:18px
}
        /* --- 顶部导航文字 --- */
        .top-nav {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 20px;
        }

        .nav-item {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            cursor: pointer;
            padding: 5px 10px;
        }
        
        .nav-item:hover {
            color: #000;
        }

        /* --- 筛选栏 --- */
        .filter-bar {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            padding-left: 10px;
        }

        .filter-icon {
            font-size: 16px;
           
            margin-right: 20px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .filter-tags {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .filter-tag {
            padding: 6px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            color: #000;
            font-weight: 500;
        }
		.filter-tag.active {
            color: #fff;
         
        }

        .filter-tag.all.active {            
           
            background: #7BC2F2;           
        }

        /* 颜色定义 */
        .bg-red.active { background-color: #ff8778; }
        .bg-orange.active { background-color: #f09135; }
        .bg-yellow.active { background-color: #efe800;  }
        .bg-blue.active { background-color: #7fd5f7; }
        .bg-purple.active { background-color: #ba79ef; }
        .bg-green.active { background-color: #80c098; }

        /* --- 网格布局 --- */
        .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4列 */
            gap: 20px;
        }

        /* --- 卡片样式 --- */
        .card {
            background: #fff;
            border: 1px solid #eee;
            transition: all 0.3s;
            position: relative;
        }

        .card:hover {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .card-preview {
            width: 100%;
            height: 380px; /* 模拟A4比例高度 */
            background-color: #f9f9f9;
            overflow: hidden;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-start;
           
        }

        /* 模拟简历内容的图片 */
        .resume-img {
            width: 90%;
            height: 95%;
            background: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            object-fit: cover;
            object-position: top;
        }

        /* --- 底部颜色条 --- */
        .card-footer {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            color: white;
            font-size: 13px;
        }
        
        /* 针对黄色条文字特殊处理 */
        .card-footer.bg-yellow { color: #555; }

        .footer-title {
            font-weight: bold;
			color:#fff
        }
		.card{border-radius:0px}
.card.hb .card-footer{    color: #ff8778;}
        .footer-badge {
            background: rgba(255,255,255,0.3);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
		.card.hb .card-footer{    background-color: #ff8778;}
		.card-footer:last-child{border-radius:0px}
        .bg-yellow .footer-badge { background: rgba(0,0,0,0.1); }
		
		.card .footer-badge{    background-color: #fff;}
		
		
		
		.card.jj .footer-badge{    color: #f09135;}
		.card.jj .card-footer{    background-color: #f09135;}
		
		
		.card.jy .footer-badge{    color: #efe800;}
		.card.jy .card-footer{    background-color: #efe800;}
		
		
		.card.qt .footer-badge{    color: #7fd5f7;}
		.card.qt .card-footer{    background-color: #7fd5f7;}
		
		
		.card.wy .footer-badge{    color: #ba79ef;}
		.card.wy .card-footer{    background-color: #ba79ef;}
		
		
		.card.wz .footer-badge{    color: #80c098;}
		.card.wz .card-footer{    background-color: #80c098;}
		
		.card-preview img{width:100%;height:100%;transition: transform 0.3s ease; }
		
		
		
		
	.card:hover .card-preview img {
      transform: scale(1.05); /* 略微放大1.05倍 */
    }
	
	    .card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3); /* 浅浅的半透明遮罩 */
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    } 
	.card:hover .card-overlay {
      opacity: 1; /* 显示遮罩 */
    }
	.card-overlay  img{
		width:50px;height:50px;cursor:pointer
	}
        /* --- 悬停遮罩效果 (复刻图片中倒数第二个的效果) --- */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%; /* 覆盖整个卡片包含底部 */
            background: #ccc;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 10;
        }

        .card:hover .overlay {
            opacity: 1;
        }

   /*      .action-btn {
            background: none;
           
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            transition: background 0.2s;
        } */

        /* .action-btn:hover {
            background: rgba(255,255,255,0.2);
        } */

        /* 为了演示，给特定的元素加上图片中的“模拟简历样式” */
        .mock-resume-body {
            width: 100%; height: 100%;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .mock-header { height: 40px; background: #eee; width: 100%; display: flex; align-items: center; gap: 10px; }
        .mock-avatar { width: 30px; height: 30px; background: #ddd; border-radius: 50%; margin-left: 10px;}
        .mock-line { height: 6px; background: #eee; width: 100%; margin-bottom: 5px; }
        .mock-line.short { width: 60%; }
        
        /* 强制覆盖图片中那个被hover的状态 */
        .hover-demo .overlay {
            opacity: 1 !important; /* 强制显示以匹配原图 */
            background: rgba(0, 0, 0, 0.3);
        }
		.jquery-watermark{display:none}
		
		/* 图片查看器模态框 */
.container_rt{
	margin:40px auto 10px;
	width:90%;background:#fff;border-radius:8px;padding:18px
}
/* 省略原有未修改样式... */

/* 图片查看器模态框 - 核心修改 */
.viewer-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    overflow: auto;
}

/* ########### 1. 修改.viewer-content为A4比例 ########### */
.viewer-content {
    position: relative;
    margin: auto;
    top: 5px;
    transform: translateY(5px);
    /* 限制最大宽度，适配屏幕 */
    max-width: 90vw;
    max-height: 98vh;
    /* A4标准比例：210/297 ≈ 0.707 */
    aspect-ratio: 210/297;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.viewer-close {
    position: fixed;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.viewer-close:hover {
    color: #ccc;
}

/* ########### 2. 修改.viewer-image-container - 无留白+A4比例 ########### */
.viewer-image-container {
    width: 100%;
    height: 100%; /* 填满父容器（.viewer-content） */
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 移除padding（留白的核心原因） */
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    /* 继承A4比例（也可直接写 aspect-ratio: 210/297;） */
}

/* ########### 3. 修改图片样式 - 无留白填满容器 ########### */
#viewerImage {
    width: 100%;
    height: 100%;
    /* 关键：cover 让图片填满容器，裁剪多余部分，无留白 */
   /*  object-fit: cover; */
    transition: transform 0.2s ease;
    transform: scale(1);
}

.viewer-controls {
    margin-top: 6px;
    display: flex;
    gap: 15px;
    align-items: center;
    background: #585858;
    padding: 6px 20px;
    border-radius: 40px;
    /* 避免控件超出屏幕 */
    max-width: 100%;
}
.viewer-controls button{text-align:center}

#zoomLevel {
    color: white;
    font-size: 16px;
    min-width: 30px;
    text-align: center;
}
/* 图片查看器拖拽样式 */
#viewerImage.draggable {
    cursor: grab;
    cursor: -webkit-grab;
    user-select: none;
    -webkit-user-select: none;
}
#viewerImage.dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}
.viewer-controls img{width:20px;height:20px;cursor:pointer}