투 컬럼 섹션 구조(섹션 4)

이 섹션은 텍스트 중심 영역과 시각적 이미지 영역을 좌우로 분리한 투 컬럼 구조로 구성되어, 정보 전달과 브랜드 이미지를 동시에 강화하는 레이아웃입니다. 좌측에는 핵심 메시지와 보조 설명, 포인트 요소가 위계적으로 배치되어 사용자가 자연스럽게 내용을 읽어 내려가도록 유도하며, 우측에는 곡선 처리된 이미지 영역을 배치해 시각적 긴장감과 신뢰감을 제공합니다. 여백을 충분히 활용해 전체 화면에 안정감을 주고, 텍스트와 이미지 간 대비를 통해 집중도를 높인 구조로, 기업 소개·서비스 설명·비전 제시 섹션에 적합한 형태입니다. 반응형 환경에서도 재배치가 용이한 것이 특징입니다.

   <style>
        .intro-section-v4 {
            padding: 100px 0;
            background: #fff;
        }

        .intro-v4-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            gap: 60px;
            align-items: center;
            padding: 0 20px;
        }

        .intro-v4-image {
            flex: 1;
            background: #e2e8f0;
            height: 350px;
            border-radius: 60px 20px 20px 20px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
        }

        .intro-v4-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .intro-v4-text {
            flex: 1.2;
        }

        .intro-v4-text h2 {
            font-size: 40px;
            color: #003366;
            margin-bottom: 25px;
            font-weight: 600;
            line-height: 1.3;
        }

        .intro-v4-text p {
            font-size: 18px;
            color: #555;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .intro-v4-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .v4-feature-box {
            border-left: 4px solid #003366;
            padding-left: 20px;
        }

        .v4-feature-box h4 {
            font-size: 18px;
            color: #003366;
            margin: 0px;
            line-height: 1.3;
            font-weight:600;
        }

        .v4-feature-box p {
            font-size: 14px;
            margin-bottom: 0;
            margin-top: 5px;
            line-height: 1.3
        }

        @media (max-width: 900px) {
            .intro-v4-container {
                flex-direction: column;
            }

            .intro-v4-text h2 {
                font-size: 32px;
            }

            .v4-feature-box {
                text-align: left;
            }
        }
    </style>

    <section class="intro-section-v4">
        <div class="intro-v4-container">
            <div class="intro-v4-text">
                <h2>비즈니스의 본질을 꿰뚫는<br>디지털 솔루션 파트너</h2>
                <p>우리는 단순한 웹사이트 구축을 넘어, 기업의 디지털 트랜스포메이션을 위한 전략적 설계를 지원합니다. 검증된 프로세스로 비즈니스의 격을 높여드립니다.</p>
                <div class="intro-v4-features">
                    <div class="v4-feature-box">
                        <h4>전략적 UX 설계</h4>
                        <p>사용자 데이터 분석 기반의 구조 설계</p>
                    </div>
                    <div class="v4-feature-box">
                        <h4>보안 및 안정성</h4>
                        <p>기업용 고성능 보안 솔루션 적용</p>
                    </div>
                </div>
            </div>
            <div class="intro-v4-image">
                <img src="https://doorweb.net/wp-content/uploads/2026/01/office-business-company-office-office-office-office-office-2360063.jpg"
                    alt="Company Office Image">
            </div>
        </div>
    </section>