body {
    font: 12px/1.5 arial,SimSun,helvetica,sans-serif;
    color: #666;}
 .jdjs_app .qwss{
        height: 31px;
        font-size: 12px;
        min-width: 190px;
        max-width: 600px;
        width: 60%;        
        outline: none;
        padding-left: 10px;
        border-radius: 4px;
        border: 1px solid #e4e7ed;}
    .jdjs_app .tj{
        padding-left: 6px;
        letter-spacing: 5px;
        color: white;
        min-width: 53px;
        max-width: 150px;
        height: 32px;
        border: 0;
        border-radius: 4px;
        background-color: #1890FF;
        position: relative;
        top: 1px;
        width: 20%;}
/* 添加过渡动画 */
.list-left-three {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;}
 .active1>a {

     background-color: #e9ecef !important;
    color: #007bff !important;
    font-weight: bold !important;}
.list-left-three[style*="display: block"] {
    max-height: 1000px;
    opacity: 1;}

/* 悬停效果 */
.list-left-nav .nav-a:hover {
    background-color: #f5f5f5;}

.list-left-nav .nav-a:hover::after {
    border-left-color: #333;}

/* 活动状态样式 */
.list-left-nav .left-li.active > .nav-a {
    background-color: #e9ecef;
    color: #007bff;
    font-weight: bold;}

.list-left-nav .left-li.active > .nav-a::after {
    border-left-color: #007bff;}
/* 为有子菜单的项添加箭头图标 */
.list-left-nav .nav-a {
    position: relative;
    padding-right: 30px;}

/* 添加箭头图标 */
.list-left-nav .nav-a::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #666;
    transition: all 0.3s ease;}

/* 展开状态的箭头 */
.list-left-nav .active > .nav-a::after {
    transform: translateY(-50%) rotate(90deg);}

/* 为有子菜单的链接添加手型光标 */
.list-left-nav .nav-a {
    cursor: pointer;}

/* 普通链接保持默认光标 */
.list-left-nav a:not(.nav-a) {
    cursor: default;}
     .gallery {
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 40px;}
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            -webkit-transition: -webkit-transform 0.3s ease, box-shadow 0.3s ease;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: calc(33.333% - 14px);}
        
        @media (max-width: 768px) {
            .gallery-item {
                width: calc(50% - 10px);}
        }
        
        @media (max-width: 480px) {
            .gallery-item {
                width: 100%;}
        }
        
        /* 移除 aspect-ratio，改用 padding 技巧确保比例 */
        .gallery-item::before {
            content: "";
            display: block;
            padding-top: 75%;}
        
        .gallery-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            -webkit-transition: -webkit-transform 0.5s ease;
            transition: transform 0.5s ease;}
        
        .gallery-item:hover {
            -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);}
        
        .gallery-item:hover .gallery-img {
            -webkit-transform: scale(1.05);
            transform: scale(1.05);}
        
        .image-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.7)));
            background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
            padding: 20px 15px 10px;
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            -webkit-transition: -webkit-transform 0.3s ease;
            transition: transform 0.3s ease;}
        
        .gallery-item:hover .image-caption {
            -webkit-transform: translateY(0);
            transform: translateY(0);}
        
        /* 模态框样式 - 修复Safari的滚动和定位问题 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            opacity: 0;
            -webkit-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
            overflow: hidden;
            -webkit-overflow-scrolling: touch;}
        
        .modal.active {
            opacity: 1;}
        
        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%) scale(0.7);
            transform: translate(-50%, -50%) scale(0.7);
            max-width: 90%;
            max-height: 90%;
            -webkit-transition: -webkit-transform 0.4s ease;
            transition: transform 0.4s ease;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;}
        
        .modal.active .modal-content {
            -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);}
        
        .modal-img {
            display: block;
            max-width: 100%;
            max-height: 80vh;
            margin: 0 auto;
            border-radius: 4px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
            -webkit-touch-callout: default;}
        
        .modal-caption {
            color: white;
            text-align: center;
            padding: 15px;
            font-size: 1.2rem;}
        
        .close-btn {
            position: absolute;
            top: 20px;
            right: 30px;
            color: white;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            -webkit-transition: color 0.3s ease;
            transition: color 0.3s ease;
            z-index: 1001;
            -webkit-tap-highlight-color: transparent;
            padding: 10px;}
        
        .close-btn:hover, .close-btn:active {
            color: #e74c3c;}
        
        .nav-btn {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            font-size: 30px;
            padding: 15px;
            cursor: pointer;
            -webkit-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;}
        
        .nav-btn:hover, .nav-btn:active {
            background-color: rgba(255, 255, 255, 0.4);}
        
        .prev-btn {
            left: 30px;}
        
        .next-btn {
            right: 30px;}
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .gallery-item {
                width: calc(50% - 10px);}
            
            h1 {
                font-size: 2rem;}
            
            .nav-btn {
                width: 50px;
                height: 50px;
                font-size: 24px;
                padding: 10px;}
            
            .prev-btn {
                left: 10px;}
            
            .next-btn {
                right: 10px;}
            
            .close-btn {
                top: 10px;
                right: 15px;
                font-size: 30px;}
            
            /* iOS Safari 特定修复 */
            @supports (-webkit-touch-callout: none) {
                .modal {
                    position: -webkit-sticky;}
                
                .modal-content {
                    -webkit-transform: translate(-50%, -50%) scale(0.7) translateZ(0);
                    transform: translate(-50%, -50%) scale(0.7) translateZ(0);}
                
                .modal.active .modal-content {
                    -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0);
                    transform: translate(-50%, -50%) scale(1) translateZ(0);}
            }
        }
        
        /* 防止iOS上的双击缩放 */
        .gallery-item, .nav-btn, .close-btn {
            touch-action: manipulation;}
        
        .instructions {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-style: italic;}
        
        /* 加载动画 */
        .loading {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #fff;
            -webkit-animation: spin 1s ease-in-out infinite;
            animation: spin 1s ease-in-out infinite;
            z-index: 1002;}
        
        @-webkit-keyframes spin {
            to { -webkit-transform: translate(-50%, -50%) rotate(360deg);}
        }
        
        @keyframes spin {
            to { transform: translate(-50%, -50%) rotate(360deg);}
        }
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/
/*css*/