@charset "UTF-8";
/*关于西环 */

 
            /* Banner样式（左对齐文字+图片背景） */
            .about-hero {
                background: url('../images/about_banner.jpg') no-repeat center center;
                background-size: cover;
                color: #fff;
                padding: 8rem 0;
                position: relative;
				margin-top: 80px;
            }
            
            .about-hero::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 33, 99, 0.6);
                z-index: 1;
            }
            
            .hero-content {
                position: relative;
                z-index: 2;
                max-width: 1200px;
                text-align: left; /* 文字左对齐 */
            }
            
            .about-hero h1 {
                font-size: 3.5rem;
                margin-bottom: 1.5rem;
                font-weight: 700;
                text-shadow: 0 2px 8px rgba(0,0,0,0.3);
            }
            
            .about-hero p {
                font-size: 1.6rem;
                line-height: 1.8;
                opacity: 0.95;
                max-width: 800px;
                text-shadow: 0 1px 4px rgba(0,0,0,0.3);
            }
        
            /* 通用区块标题 */
            .section {
                padding: 4rem 0;
            }
        
            .section-title {
                font-size: 2rem;
                text-align: center;
                margin-bottom: 2rem;
                position: relative;
                display: inline-block;
                left: 50%;
                transform: translateX(-50%);
                color: #003399;
                font-weight: 600;
            }
        
            .section-title::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: -0.8rem;
                width: 3rem;
                height: 0.3rem;
                background-color: #009944;
                transform: translateX(-50%);
            }
        
            .section-subtitle {
                font-size: 1rem;
                color: #666;
                text-align: center;
                margin-bottom: 3rem;
                line-height: 1.8;
            }
        
            /* 项目概况 */
            .project-overview {
                background: #fff;
            }
        
            .overview-content {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 3rem;
                align-items: center;
            }
        
            .overview-text {
                font-size: 1rem;
                line-height: 2;
                color: #333;
                text-align: justify;
            }
        
            .overview-stats {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
        
            .stat-item {
                background-color: #e6f2ff;
                padding: 1.5rem;
                border-radius: 0.5rem;
                text-align: center;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            }
        
            .stat-value {
                font-size: 2rem;
                font-weight: bold;
                color: #0066cc;
                margin-bottom: 0.5rem;
                transition: all 0.5s ease;
            }
        
            .stat-label {
                font-size: 0.9rem;
                color: #666;
            }
        
            @media (max-width: 992px) {
                .overview-content {
                    grid-template-columns: 1fr;
                    gap: 2rem;
                }
            }
        
            /* 视觉体验（视频嵌入） */
            .visual-experience {
                background: #f9fafc;
            }
        
            .video-container {
                position: relative;
                width: 100%;
                margin: 0 auto;
                border-radius: 0.2rem;
                overflow: hidden;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            }
			
			
			
    /* 视频模块整体容器 */
    .video-section {
        width: 100%;
        padding: 2rem 0;
        text-align: center; /* 视频居中显示 */
    }

    /* 视频容器核心响应式控制 */
    .video-container {
        width: 100%;
        max-width: 1200px; /* 限制PC端最大宽度 */
        margin: 0 auto; /* 水平居中 */
    }

    /* 视频样式（PC端75%，移动端100%） */
    .xihuan-video {
        width: 100%; /* PC端默认宽度75% */
        height: auto; /* 保持视频比例 */
        border-radius: 0.2rem; /* 圆角优化，与页面风格统一 */
        box-shadow: 0 4px 12px rgba(0, 33, 99, 0.1); /* 轻微阴影提升质感 */
    }

    /* 移动端适配（768px以下屏幕） */
    @media (max-width: 768px) {
        .xihuan-video {
            width: 100% !important; /* 移动端宽度100% */
            padding: 0 1rem; /* 移动端左右留1rem边距，避免贴边 */
            box-sizing: border-box; /* 边距计入宽度 */
        }
    }

    /* 小屏移动端（576px以下）额外优化 */
    @media (max-width: 576px) {
        .xihuan-video {
            border-radius: 0.2rem; /* 小屏圆角减小，更适配 */
        }
    }
        
            /* 核心特色 */
            .core-features {
                background: #fff;
            }
        
            .features-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 2rem;
            }
        
            .feature-card {
                background: #fff;
                padding: 2rem;
                border-radius: 0.8rem;
                box-shadow: 0 4px 12px rgba(0,0,0,0.08);
                transition: transform 0.3s ease;
            }
        
            .feature-card:hover {
                transform: translateY(-5px);
            }
        
            .feature-icon {
                width: 3rem;
                height: 3rem;
                background-color: #e6f2ff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1.5rem;
                color: #0066cc;
                font-size: 1.2rem;
            }
        
            .feature-title {
                font-size: 1.2rem;
                margin-bottom: 1rem;
                color: #333;
                font-weight: 600;
            }
        
            .feature-desc {
                font-size: 0.9rem;
                color: #666;
                line-height: 1.8;
            }
        
            @media (max-width: 992px) {
                .features-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        
            @media (max-width: 576px) {
                .features-grid {
                   
                }
            }
        
            /* 项目参数 */
            .project-params {
                background: #f9fafc;
            }
        
            .params-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1.5rem;
            }
        
            .param-item {
                background-color: #e6f2ff;
                padding: 1.5rem;
                border-radius: 0.5rem;
                text-align: center;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            }
        
            @media (max-width: 992px) {
                .params-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        
            @media (max-width: 576px) {
                .params-grid {
              
                }
            }
        
            /* 建筑实景 - 核心修改部分 */
            .building-scenes {
                background: #fff;
                position: relative;
            }
        
            /* 滑动容器 */
            .scenes-slider {
                position: relative;
                width: 100%;
                overflow: hidden;
                padding: 0 2rem;
            }
        
            /* 滑动内容 */
            .scenes-grid {
                display: flex;
                gap: 0.6rem;
                transition: transform 0.5s ease;
                padding: 1rem 0;
            }
        
            /* 竖版图片样式 - 每页显示4张 */
            .scene-item {
                flex: 0 0 calc(25% - 1.125rem); /* 4列布局，扣除间距 */
                border-radius: 0.2rem;
                overflow: hidden;
                box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            }
        
            .scene-item img {
                width: 100%;
                height: 400px; /* 竖版尺寸，宽高比约3:4 */
                object-fit: cover;
                transition: transform 0.3s ease;
            }
        
            .scene-item:hover img {
                transform: scale(1.05);
            }
        
            /* 滑动按钮 */
            .slider-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 3rem;
                height: 3rem;
                background-color: rgba(255,255,255,0.9);
                border: none;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
                color: #003399;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                z-index: 10;
                transition: all 0.3s ease;
            }
        
            .slider-btn:hover {
                background-color: #003399;
                color: #fff;
            }
        
            .prev-btn {
                left: 0;
            }
        
            .next-btn {
                right: 0;
            }
        
            /* 移动端适配 */
            @media (max-width: 1200px) {
                .scene-item {
                    flex: 0 0 calc(33.33% - 1rem); /* 平板显示3张 */
                }
                .scene-item img {
                    height: 350px;
                }
            }
        
            @media (max-width: 768px) {
                .scene-item {
                    flex: 0 0 calc(50% - 0.75rem); /* 手机显示2张 */
                }
                .scene-item img {
                    height: 300px;
                }
            }
        
            @media (max-width: 576px) {
                .scene-item {
                    flex: 0 0 calc(100% - 0.5rem); /* 小屏手机显示1张 */
                }
                .scene-item img {
                    height: 250px;
                }
            }
        
            /* 网络设施（新增第四项） */
            .network-facilities {
                background-color: #003399;
                color: #fff;
                padding: 4rem 0;
            }
        
            .network-facilities .section-title {
                color: #fff;
            }
        
            .network-facilities .section-title::after {
                background-color: #009944;
            }
        
            .network-facilities .section-subtitle {
                color: rgba(255,255,255,0.8);
            }
        
            .network-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr); /* 改为4列 */
                gap: 2rem;
            }
        
            .network-card {
                background-color: rgba(255,255,255,0.1);
                padding: 2rem;
                border-radius: 0.8rem;
                transition: transform 0.3s ease;
            }
        
            .network-card:hover {
                transform: translateY(-5px);
            }
        
            .network-card .feature-title {
                color: #fff;
            }
        
            .network-card .feature-desc {
                color: rgba(255,255,255,0.9);
            }
        
            @media (max-width: 1200px) {
                .network-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        
            @media (max-width: 576px) {
                .network-grid {
               
                }
            }
        
            /* 入驻企业（一行4个） */
            .enterprises {
                background: #fff;
            }
        
            .enterprises-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 2rem;
            }
        
            .enterprise-card {
                padding: 2rem;
                border-radius: 0.8rem;
                box-shadow: 0 4px 12px rgba(0,0,0,0.08);
                text-align: center;
                transition: transform 0.3s ease;
            }
        
            .enterprise-card:hover {
                transform: translateY(-5px);
            }
        
            .enterprise-logo {
                width: 3rem;
                height: 3rem;
                background-color: #0066cc;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 1.5rem;
                color: #fff;
                font-size: 1.5rem;
            }
        
            .enterprise-name {
                font-size: 1rem;
                margin-bottom: 0.8rem;
                font-weight: 600;
            }
        
            .enterprise-desc {
                font-size: 0.85rem;
                color: #666;
                line-height: 1.6;
            }
        
            @media (max-width: 1200px) {
                .enterprises-grid {
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            @media (max-width: 992px) {
                .enterprises-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            @media (max-width: 576px) {
                .enterprises-grid {

                }
            }