<style>
        /* 1. 기본 스타일 설정 */
        body { font-family: 'Pretendard', 'Malgun Gothic', sans-serif; margin: 0; line-height: 1.8; color: #333; scroll-behavior: smooth; }
        
        /* 2. 상단 메뉴바 */
        header { background: #ffffff; border-bottom: 1px solid #e0e0e0; padding: 0 10%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; height: 80px; }
        
        .logo-container { height: 100%; display: flex; align-items: center; }
        .logo-container a { display: flex; align-items: center; text-decoration: none; cursor: pointer; }
        .logo-img { height: 50px; width: auto; }
        
        /* 햄버거 버튼 (데스크탑에서는 숨김) */
        .menu-toggle { display: none; font-size: 28px; cursor: pointer; background: none; border: none; color: #222; padding: 10px; }

        /* 3. 메인 메뉴 및 드롭다운 (데스크탑 기준) */
        nav { display: flex; height: 100%; }
        .menu-item { position: relative; height: 100%; display: flex; align-items: center; margin-left: 40px; }
        
        .menu-btn { text-decoration: none; color: #222; font-weight: 600; font-size: 17px; padding: 10px 0; cursor: pointer; transition: color 0.2s; display: flex; align-items: center; height: 100%; }
        .menu-btn:hover { color: #0056b3; }

        .submenu { display: none; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); background: #ffffff; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden; min-width: 220px; text-align: left; border: 1px solid #eee; z-index: 200; }
        .submenu a { display: block; padding: 12px 20px; color: #555; text-decoration: none; font-size: 14px; border-bottom: 1px solid #f8f9fa; white-space: nowrap; transition: background 0.2s; text-align: center; }
        .submenu a:last-child { border-bottom: none; }
        .submenu a:hover { background: #f0f7ff; color: #0056b3; font-weight: bold; }
        
        /* CSS Hover 방식으로 서브메뉴 열기 (데스크탑) */
        @media (min-width: 851px) {
            .menu-item:hover .submenu { display: block; animation: fadeInDownMenu 0.2s ease-out forwards; }
        }
        @keyframes fadeInDownMenu { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
		
		/* 5. 콘텐츠 영역 공통 설정 */
        section.content-section { padding: 80px 10%; display: none; }
        section.content-section.active { display: block; animation: fadeIn 0.6s ease-out forwards; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
		
        .section-title { text-align: center; font-size: 32px; color: #ffffff; margin-bottom: 50px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
        .section-title::after { content: ''; display: block; width: 50px; height: 3px; background: #ffffff; margin: 15px auto 0; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
        
        .section-title.dark-title { color: #222; text-shadow: none; }
        .section-title.dark-title::after { background: #0056b3; box-shadow: none; }

        .iot-cta-area { text-align: center; padding: 40px; background: #002060; border-radius: 15px; color: white; margin-top: 50px; }
        .iot-cta-area h3 { font-size: 24px; margin-top: 0; margin-bottom: 10px; }
        .iot-cta-area p { font-size: 16px; opacity: 0.9; margin-bottom: 30px; }
		.cta-btn-group { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
        .cta-btn { padding: 15px 35px; border-radius: 30px; font-size: 16px; font-weight: bold; text-decoration: none; transition: all 0.3s; }
        .cta-btn.primary { background: #0056b3; color: white; border: 2px solid #0056b3; cursor: pointer; }
        .cta-btn.primary:hover { background: #004494; border-color: #004494; transform: translateY(-2px); }
        .cta-btn.secondary { background: transparent; color: white; border: 2px solid white; cursor: pointer; }
        .cta-btn.secondary:hover { background: white; color: #002060; transform: translateY(-2px); }

        .inquiry-form-wrap { display: none; background: #ffffff; border-radius: 15px; padding: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-top: 40px; text-align: left; animation: fadeIn 0.5s; border: 1px solid #eee; }
        .inquiry-form-wrap h3 { font-size: 24px; color: #0056b3; border-bottom: 2px solid #0056b3; padding-bottom: 10px; margin-top: 0; margin-bottom: 20px; }
        .inquiry-section-title { font-size: 18px; color: #333; font-weight: bold; margin-bottom: 15px; margin-top: 30px; }
        .inquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .inquiry-group { display: flex; flex-direction: column; gap: 8px; }
        .inquiry-group.full-width { grid-column: 1 / -1; } 
        .inquiry-group label { font-size: 14px; font-weight: 600; color: #555; }
        .inquiry-group input, .inquiry-group textarea { padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 14px; transition: border-color 0.2s; }
        .inquiry-group input:focus, .inquiry-group textarea:focus { border-color: #0056b3; outline: none; }
        .inquiry-group textarea { resize: vertical; min-height: 120px; }
        .inquiry-helper-text { font-size: 12px; color: #888; margin-top: 5px; }
        .inquiry-submit-btn { background: #0056b3; color: white; border: none; padding: 15px 50px; border-radius: 30px; font-size: 16px; font-weight: bold; cursor: pointer; display: block; margin: 30px auto 10px; transition: background 0.3s, transform 0.2s; }
        .inquiry-submit-btn:hover { background: #004494; transform: translateY(-2px); }
        .inquiry-consent { font-size: 11px; color: #999; text-align: center; }

        @media (max-width: 600px) { .inquiry-grid { grid-template-columns: 1fr; } }

		/* 하단 정보 (Footer) */
        footer { background: #1a1a1a; color: #999; padding: 10px 5%; font-size: 12px; text-align: center; }
        .footer-links { margin-bottom: 15px; }
        .footer-links a { color: #cccccc; text-decoration: none; margin: 0 12px; }
        .footer-info p { margin: 2px 0; } 
        .footer-info strong { color: #ffffff; font-size: 16px; display: inline-block; margin-bottom: 5px; }
		@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200px); }
		}
        /* =========================================
           💡 반응형 웹 (태블릿 및 모바일) 스타일 
           ========================================= */
			@media (max-width: 850px) {
            /* 헤더 여백 줄임 */
            header { padding: 0 5%; }
            .logo-img { height: 40px; }
            
            /* 햄버거 버튼 활성화 */
            .menu-toggle { display: block; }
            
            /* 네비게이션 레이어 수정 (flex 대신 block을 사용하여 세로 늘어남 방지) */
            nav { display: none; position: absolute; top: 80px; left: 0; width: 100%; background: #ffffff; height: calc(100vh - 80px); overflow-y: auto; box-shadow: 0 10px 15px rgba(0,0,0,0.05); }
            nav.active { display: block; } 
            
            /* 모바일 메뉴 아이템 레이아웃 수정 */
            .menu-item { display: block; width: 100%; height: auto; margin-left: 0; border-bottom: 1px solid #f0f0f0; box-sizing: border-box; }
            .menu-btn { display: flex; width: 100%; height: auto; padding: 18px 5%; justify-content: space-between; align-items: center; box-sizing: border-box; }
            .menu-btn::after { content: '▼'; font-size: 12px; color: #999; transition: transform 0.3s; }
            
            /* 서브메뉴 아코디언 스타일 최적화 */
            .submenu { position: static; transform: none; width: 100%; box-shadow: none; border: none; border-radius: 0; background: #f9fbff; padding: 0; display: none; }
            .submenu a { display: block; text-align: left; padding: 15px 10%; border-bottom: 1px solid #eee; box-sizing: border-box; }
            
            /* 모바일 메뉴 열림 상태 */
            .menu-item.active .submenu { display: block; }
            .menu-item.active .menu-btn { color: #0056b3; }
            .menu-item.active .menu-btn::after { transform: rotate(180deg); color: #0056b3; }

            /* 모바일 배너 텍스트 사이즈 조절 */
            .hero h1 { font-size: 32px; margin-bottom: 10px; }
            .hero p { font-size: 16px; }
            
            /* 푸터 최적화 */
            footer { padding: 30px 20px; line-height: 1.6; }
        }

        @media (max-width: 480px) {
            .hero h1 { font-size: 26px; }
            .hero p { font-size: 14px; }
            .footer-info p { font-size: 12px; }
        }
</style>