
:root {
            --primary-dark: #1a365d;
            --primary-light: #2c5282;
            --accent: #dd6b20;
            --accent-light: #ed8936;
            --gray-light: #f7fafc;
            --gray-medium: #e2e8f0;
            --white: #ffffff;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--gray-light);
            color: var(--primary-dark);
            margin: 0;
            padding: 0;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            flex: 1;
        }

        header {
            background-color: var(--primary-dark);
            color: var(--white);
            padding: 1px 0;
            text-align: center;
            box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 1px;
            order: 2;
        }

        h1 {
            font-size: 1rem;
            margin: 0;
            font-weight: 600;
            letter-spacing: 0.1px;
        }

        .subtitle {
            font-size: 0.5rem;
            opacity: 0.9;
            margin-top: 3px;
        }

        .map-container {
            position: relative;
            width: 100%;
            height: auto;
            background-color: var(--white);
            border-radius: 8px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            overflow: auto;
            margin-bottom: 30px;
        }

        .map-image {
            width: 100%;
            height: auto;
            object-fit: contain;
            display: block;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: high-quality;
        }

        .marker {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: transparent;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        /* 新增样式，将 eo-tank 标记改为方形并增大尺寸 */
        .marker-eo-tank {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将 carbonate-tank 标记改为方形并增大尺寸 */
        .marker-carbonate-tank {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将东科特蜡车间二标记改为方形并增大尺寸 */
        .marker-dongke-workshop {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将东科特化车间标记改为方形并增大尺寸 */
        .marker-dongke-pi-workshop {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将石蜡特材罐区标记改为方形并增大尺寸 */
        .marker-pw-tank {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将天然气减压撬标记改为方形并增大尺寸 */
        .marker-cng-pry {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将半露天堆场标记改为方形并增大尺寸 */
        .marker-dongke-cy {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将库房一标记改为方形并增大尺寸 */
        .marker-whse-one {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 半露天堆场和库房一标记悬停效果 */
        .marker-dongke-cy:hover,
        .marker-whse-one:hover {
            transform: scale(1.2);
            background-color: var(--accent-light);
        }

        /* 新增样式，将 c5-tank 标记改为方形并增大尺寸 */
        .marker-c5-tank {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将三氟化硼库房标记改为方形并增大尺寸 */
        .marker-storage-room {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将原料罐区标记改为方形并增大尺寸 */
        .marker-matl-tank {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将UV装置标记改为方形并增大尺寸 */
        .marker-new-tank {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将原料罐组标记改为方形并增大尺寸 */
        .marker-uv-tank {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将甲类库房标记改为方形并增大尺寸 */
        .marker-class-a {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将乙类库房标记改为方形并增大尺寸 */
        .marker-class-b {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }
        /* 新增样式，将生产车间标记改为方形并增大尺寸 */
        .marker-workshop-car {
            width: 50px;
            height: 50px;
            border-radius: 0;
        }

        .marker:hover {
            transform: scale(1.2);
            background-color: transparent;
        }

        .info-window {
            position: absolute;
            width: 350px;
            background-color: var(--white);
            border-radius: 8px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            padding: 20px;
            z-index: 100;
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
		
        /* 新增样式，用于放大东科特蜡车间二信息窗口 *//* 修改后的样式，用于调整东科特蜡车间二信息窗口大小 */
        .info-window.dongke-workshop-expanded {
            width: 80%;  /* 增大宽度 */
            height: 70%;  /* 增大高度 */
            top: 15% !important;  /* 调整位置 */
            left: 10% !important;  /* 调整位置 */
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .info-window.dongke-workshop-expanded .info-content {
            max-height: none;
            overflow: hidden;
        }

        .info-window.dongke-workshop-expanded .info-content img {
            width: 60% !important;/* 可根据需求调整宽度 */
            height: auto !important;
            max-width: 100%;
            max-height: 100%;
        }

		/* 调整东科特蜡车间二信息窗口图片大小 */
        #dongke-workshop .info-content {
            display: flex;
            flex-direction: row;
            gap: 20px;
            height: 90%;  /* 增加高度 */
            overflow: auto;  /* 允许滚动 */
        }

        #dongke-workshop .info-content .text-content {
            width:45%;
            order:1;
            overflow-y: auto;  /* 允许文字内容滚动 */
            max-height: 100%;  /* 最大高度 */
        }

        #dongke-workshop .info-content .image-slider {
            width:55%;
            order:2;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;  /* 高度100% */
        }

        #dongke-workshop .info-content img {
            width: 100% !important;
            height: auto !important;
            max-height: 80%;  /* 限制图片最大高度 */
            object-fit: contain;  /* 保持图片比例 */
        }

        .info-window.active {
            opacity: 1;
            pointer-events: auto;
        }

        .info-title {
            font-size: 1.5rem;
            color: var(--primary-dark);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--accent);
        }

        .info-content {
            max-height: 600px;
            overflow-y: auto;
            padding-right: 15px;
        }

        .info-content p {
            margin-bottom: 10px;
        }

        .info-content strong {
            color: var(--primary-dark);
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 1.2rem;
            color: var(--primary-dark);
            cursor: pointer;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: var(--accent);
            border-radius: 50%;
            opacity: 0.7;
            z-index: 5;
        }

        footer {
            text-align: center;
            padding: 20px 0;
            color: var(--primary-dark);
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .map-container {
                height: 400px;
            }

            .info-window {
                width: 280px;
            }
        }

        /* 企业目录样式 */
        .enterprise-list {
            display: block;
            background-color: var(--white);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            max-height: 50vh; /* 新增：设置最大高度为视口的70% */
            overflow-y: auto; /* 新增：添加垂直滚动条 */
        }

        .enterprise-item {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .enterprise-item:hover {
            background-color: var(--gray-light);
        }

        .enterprise-item h2 {
            margin-top: 0;
            color: var(--primary-dark);
            font-size: 1.5rem;
        }

        .enterprise-item button {
            background-color: var(--accent);
            color: var(--white);
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 1rem;
            font-weight: 500;
        }

        .enterprise-item button:hover {
            background-color: var(--accent-light);
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* 厂区内容默认隐藏 */
        .factory-content {
            display: none;
        }

        /* 返回按钮样式 */
        .back-button {
            margin-bottom: 20px;
            display: inline-flex;
            align-items: center;
            background-color: var(--primary-light);
            color: var(--white);
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 1rem;
            font-weight: 500;
        }

        .back-button:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .back-button i {
            margin-right: 8px;
        }

        /* 调整联系我们部分样式 */
        #contact {
            padding-top: 10px; /* 减小上方空隙 */
        }

        /* 关于我们部分样式调整 */
        #contact .grid-cols-2 div:nth-child(2) p {
            margin-bottom: 10px; /* 增加段落间距 */
        }

        /* 新增样式，使联系方式左对齐 */
        .contact-info {
            text-align: left;
        }

        /* 新增样式，使关于我们左对齐 */
        .about-us {
            text-align: left;
        }

        .slider-image {
            display: none;
        }

        .slider-image.active {
            display: block;
        }

        .slider-controls {
            margin-top: 10px;
            text-align: center;
        }

        .slider-controls button {
            margin: 0 5px;
            padding: 5px 10px;
            cursor: pointer;
        }

/* 竖屏样式 */
@media (orientation: portrait) {
    /* 东科石蜡车间标记 - 竖屏 */
    .marker-dongke-workshop {
        width: 170px;
        height: 50px;
    }

    /* 东科特化车间标记 - 竖屏 */
    .marker-dongke-pi-workshop {
        width: 70px;
        height: 30px;
    }
 
    /* 石蜡原料罐区标记 - 竖屏 */
    .marker-pw-tank {
        width: 30px;
        height: 40px;
    }

    /* 环氧乙烷罐区标记 - 竖屏 */
    .marker-eo-tank {
        width: 70px;
        height: 40px;
    }
    
    /* 碳酸酯罐区标记 - 竖屏 */
    .marker-carbonate-tank {
        width: 40px;
        height: 70px;
    }

    /* 天然气减压撬标记 - 竖屏 */
    .marker-cng-pry {
        width: 40px;
        height: 70px;
    }
    /* 半露天堆场标记 - 竖屏 */
    .marker-dongke-cy {
        width: 40px;
        height: 70px;
    }

    /* C5罐区标记 - 竖屏 */
    .marker-c5-tank {
        width: 20px;
        height: 13px;
    }
    /* 三氟化硼库房标记 - 竖屏 */
    .marker-storage-room {
        width: 50px;
        height: 36px;
    }
    /* 原料罐区标记 - 竖屏 */
    .marker-matl-tank {
        width: 50px;
        height: 36px;
    }
    /* UV装置标记 - 竖屏 */
    .marker-new-tank {
        width: 100px;
        height: 70px;
    }
    /* 原料罐组标记 - 竖屏 */
    .marker-uv-tank {
        width: 40px;
        height: 85px;
    }
    /* 甲类库房标记 - 竖屏 */
    .marker-class-a {
        width: 50px;
        height: 63px;
    }
    /* 乙类库房标记 - 竖屏 */
    .marker-class-b {
        width: 130px;
        height: 60px;
    }
    /* 生产车间标记 - 竖屏 */
    .marker-workshop-car {
        width: 110px;
        height: 98px;
    }
    
    /* tank-info-button 竖屏样式 */
    #tank-info-button {
        width: 60px;
        height: 60px;
        top: 55%;
        left: 75%;
    }
    /* 库房一标记 - 竖屏 */
    .marker-whse-one {
        width: 150px;
        height: 70px;
    }
}

/* 横屏样式 */
@media (orientation: landscape) {
    /* 东科石蜡车间标记 - 横屏 */
    .marker-dongke-workshop {
        width: 150px;
        height: 50px;
    }
    
    /* 东科特化车间标记 - 横屏 */
     .marker-dongke-pi-workshop {
        width: 150px;
        height: 50px;
    }
    
    /* 石蜡原料罐区标记 - 横屏 */
    .marker-pw-tank {
        width: 38px;
        height: 50px;
    }

    /* 环氧乙烷罐区标记 - 横屏 */
    .marker-eo-tank {
        width: 90px;
        height: 50px;
    }
    
    /* 碳酸酯罐区标记 - 横屏 */
    .marker-carbonate-tank {
        width: 90px;
        height: 150px;
    }

    /* 天然气减压撬标记 - 横屏 */
    .marker-cng-pry {
        width: 40px;
        height: 70px;
    }
    /* 半露天堆场标记 - 横屏 */
    .marker-dongke-cy {
        width: 40px;
        height: 70px;
    }
    /* 库房一标记 - 横屏 */
    .marker-whse-one {
        width: 40px;
        height: 70px;
    }
    /* C5罐区标记 - 横屏 */
    .marker-c5-tank {
        width: 50px;
        height: 36px;
    }
    /* 三氟化硼库房标记 - 横屏 */
    .marker-storage-room {
        width: 50px;
        height: 36px;
    }
    /* 原料罐区标记 - 横屏 */
    .marker-matl-tank {
        width: 55px;
        height: 80px;
    }
    /* UV装置标记 - 横屏 */
    .marker-new-tank {
        width: 115px;
        height: 240px;
    }
    /* 原料罐组标记 - 横屏 */
    .marker-uv-tank {
        width: 90px;
        height: 150px;
    }
    /* 甲类库房标记 - 横屏 */
    .marker-class-a {
        width: 85px;
        height: 30px;
    }
    /* 乙类库房标记 - 横屏 */
    .marker-class-b {
        width: 100px;
        height: 55px;
    }
    /* 生产车间标记 - 横屏 */
    .marker-workshop-car {
        width: 100px;
        height: 195px;
    }
    
    /* tank-info-button 横屏样式 */
    #tank-info-button {
        width: 80px;
        height: 80px;
        top: 55%;
        left: 77%;
    }
}


/* 新增透明标记类，确保所有标记都透明 */
.transparent-marker {
    opacity: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 原料罐组标记动画效果 */
.marker-uv-tank {
    animation: pulse 4s infinite;
    transform-origin: center;
}

/* 甲类库房标记动画效果 */
.marker-class-a {
    animation: pulse 4s infinite;
    transform-origin: center;
}

/* UV装置标记动画效果 */
.marker-new-tank {
    animation: pulse 4s infinite;
    transform-origin: center;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
/* 生产车间标记动画效果 */
.marker-workshop-car {
    animation: pulse 4s infinite;
    transform-origin: center;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
/* 乙类库房标记动画效果 */
.marker-class-b {
    animation: pulse 4s infinite;
    transform-origin: center;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* 修改UV装置信息窗口样式，移除滚动 */
#new-tank .info-content {
    max-height: none;
    overflow: hidden;
    padding-right: 0;
}
