@charset "utf-8";
/* CSS Document */

        * { box-sizing: border-box; }
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'Microsoft YaHei';
            background-color: #ffffff;
        }

        /* 顶部 Banner 样式 */
        .solutions-banner {
            width: 100%;
            height: 320px;
            background-image: url('../images/banner-plan.png');
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            align-items: center;
        }
        .solutions-banner::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to right, rgba(14, 27, 43, 0.9) 0%, rgba(14, 27, 43, 0.3) 100%);
        }
        .banner-container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 4%;
			margin-top: 50px;
            position: relative;
            z-index: 1;
            color: #fff;
        }
        .banner-container h1 { font-size: 3.2rem; font-weight: bold; margin: 0 0 10px 0; }
        .banner-container h2 { font-size: 2.4rem; color: #4CAF50; margin: 0 0 20px 0; font-weight: 600; }
        .banner-container p { max-width: 600px; font-size: 1.1rem; line-height: 1.6; color: #eee; }

        /* 列表区域 */
        .solutions-list-area { width: 100%; display: flex; flex-direction: column; }
        .solution-card {
            display: flex;
            width: 100%;
            background: #ffffff;
            position: relative;
			margin-top: 50px;
			margin-bottom: 50px;
            transition: background-color 0.3s ease;
        }
        .solution-card:hover { background-color: #f4f7fa; }
        .solution-card:hover .sc-image img { transform: scale(1.03); }
        .solution-card:hover .sc-btn { color: #1b5e20; }
        .solution-card:hover .sc-btn svg { transform: translateX(5px); }

        /* 偶数行反向排版，形成棋盘交错效果并微调背景色 */
        .solution-card:nth-child(even) {
            flex-direction: row-reverse;
            background: #fafbfc;
        }

        .sc-image { width: 50%; position: relative; overflow: hidden; }
        .sc-image img {
            width: 100%; height: 100%;
            object-fit: cover; display: block;
            min-height: 450px; position: absolute; top: 0; left: 0;
            transition: transform 0.6s ease;
        }

        .sc-content {
            width: 50%; padding: 8% 6%;
            display: flex; flex-direction: column; justify-content: center;
        }

        .sc-header { display: flex; align-items: center; margin-bottom: 25px; }
        .title-icon { width: 50px; height: 50px; margin-right: 20px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }
        .sc-header h3 { font-size: 2.2rem; color: #111; margin: 0; line-height: 1.2; }

        .sc-desc { font-size: 1.1rem; color: #555; line-height: 1.7; margin-bottom: 40px; }

        .sc-features { display: flex; flex-wrap: wrap; gap: 20px 15px; margin-bottom: 40px; }
        .feature-item { width: calc(50% - 15px); display: flex; align-items: center; }
        .f-icon { margin-right: 12px; font-size: 1.5rem; display: flex; }
        .f-text { font-size: 0.95rem; color: #333; line-height: 1.4; font-weight: 500; }

        .sc-btn {
            display: inline-flex; align-items: center;
            color: #2e7d32; font-weight: bold; text-decoration: none;
            font-size: 1.1rem; transition: all 0.3s ease; width: fit-content;
            position: static;
        }
        .sc-btn svg { margin-left: 8px; transition: transform 0.3s; }
        .sc-btn::after {
            content: "";
            position: absolute; top: 0; right: 0; bottom: 0; left: 0;
            z-index: 10; cursor: pointer;
        }

        /* 移动端响应式 */
        @media (max-width: 992px) {
            .solution-card, .solution-card:nth-child(even) { flex-direction: column; border-bottom: 1px solid #eaeaea; }
            .sc-image { width: 100%; padding-top: 55%; }
            .sc-content { width: 100%; padding: 50px 30px; }
            .banner-container h1 { font-size: 2.4rem; }
            .banner-container h2 { font-size: 1.8rem; }
        }
        @media (max-width: 576px) {
            .feature-item { width: 100%; }
            .sc-content { padding: 40px 20px; }
            .sc-header h3 { font-size: 1.6rem; }
            .sc-desc { font-size: 1rem; }
        }