/* 기본 스타일 초기화 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Noto Sans KR", system-ui, sans-serif; color: #333; background-color: #fff; line-height: 1.6; overflow-x: hidden;}
        a { text-decoration: none; color:#333;}
        ul { list-style: none; }

        /* 공통 레이아웃 */
        .container { max-width: 1600px; margin: 0 auto; padding: 0 20px; }
        .red-text { color: #1e3932; }
        .bg-dark { background-color: #1e3932; color: #fff; }
		.subTopBlank {margin-top: 70px; }


        /* 상단 헤더 */
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  z-index: 100;
  /* 동영상 위에서는 기본적으로 투명하게 처리 */
  background-color: transparent; 
}

.header-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center; /* 오타 수정: items-center -> align-items: center */
  height: 100%;
  color: #ffffff; /* 동영상 상단일 때 글자색 (흰색) */
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}


        .logo { font-size: 24px; font-weight: bold; color: #fff; display: flex; items-center; padding-top:5px;}
        .nav-menu { display: flex; gap: 30px; align-items: center; }
        .nav-menu a { font-weight: bold; font-size: 15px; }
        .nav-menu a:hover { color: #1e3932; }

        /* 메인 비주얼 배너 */
		.main-video-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; left: 50%; display: flex; right: 50%;  margin-left: -50vw; margin-right: -50vw; overflow: hidden;}
		.main-video-container video { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; object-fit: cover; transform: translate(-50%, -50%);  z-index: 1; }
		.video-overlay { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 2;color: #ffffff; text-align: center; font-family: "Manrope", sans-serif;}
		.video-overlay h2 { font-size: 80px; font-weight: 800;}
		.video-overlay p { font-size: 25px;}
		.video-overlay button { margin:30px 15px;}

		.hero-banner { background-color: #999; position: relative; height: 100vh; height: 100dvh;   align-items: center; color: #fff; }
        .subVisual { background-color: #333; position: relative; height: 400px; display: flex; align-items: center; color: #fff;}
        .subVisual img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; z-index: 1; }
        .hero-text { position: relative; z-index: 2; }
        .hero-text h1 { font-size: 30px; margin-bottom: 20px; line-height: 1.3; }
        .btn-group { display: flex; gap: 15px; }
        .btn { padding: 12px 30px; font-weight: bold; border: none; cursor: pointer; }
        .btn-point { background-color: #ea5506; color: #fff; }
		.btn-black { background-color: #000; color: #fff; }
        .btn-white { background-color: transparent; border: 2px solid #fff; color: #fff; }
		.btn-white2 { background-color: #fff; border: 2px solid #fff; color: #000; }

        /* 탭 네비게이션 */
        .sub-nav { background-color: #f4f4f4; border-bottom: 2px solid #e0e0e0; }
        .sub-nav .tab-menu { display: flex; gap: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch;}
        .sub-nav .tab-menu a { display: inline-block; padding: 20px 0; font-size: 18px; font-weight: bold; color: #666; }
        .sub-nav .tab-menu a.active { color: #1e3932; border-bottom: 3px solid #1e3932; }

        /* 콘텐츠 섹션 타이틀 */
        .section-title { margin: 60px 0 30px 0; }
        .section-title h2 { font-family: "Manrope", sans-serif;font-size: 28px; color: #333; margin-bottom: 10px; }
        .bar { width: 60px; height: 4px; background-color: #1e3932; }

		/* 메인 Business*/
        .Business-title { margin: 60px 0 30px 0; }
        .Business-title h2 { font-family: "Manrope", sans-serif; font-size: 28px; color: #333; margin-bottom: 10px; text-align: center;}
		.Business-title h3 { font-size: 14px; color: #ea5506; margin-bottom: 7px; text-align: center;}
		.Business-title h4 { font-size: 17px; color: #333; margin-top: 15px; text-align: center;}
        .Business-bar { width: 60px; height: 4px; background-color: #1e3932; margin: 0 auto; }

        ul.Business-Box {
		  display: flex;
		  flex-wrap: wrap; /* 줄바꿈 허용 */
		  width: 100%;
		  margin: 60px 0;
		  padding: 0;
		  list-style: none; /* 리스트 점 제거 */
		}

		ul.Business-Box li {
		  width: 25%;
		  text-align: center;
		  box-sizing: border-box; /* 패딩/보더 포함 계산 */
		  font-family: "Manrope", sans-serif;
		}

		ul.Business-Box li img {
		  width: 90%;
		  height: auto; /* 비율 유지 */
		  border-radius: 20px;
		}

		ul.Business-Box li p {
		  font-size: 16px;
		  color: #333;
		  margin-top: 15px;
		}

		ul.Business-Box li p span {
		  display: block; /* margin-top 적용을 위해 block 전환 */
		  font-size: 20px;
		  color: #000;
		  margin-bottom: 15px;
		  font-weight: 500;
		}


        /* 프로젝트 그리드 레이아웃 */
        .grid-layout { display: flex; flex-wrap: wrap; gap: 30px; margin-bottom: 80px; }
        .card { background-color: #fff; border: 1px solid #e0e0e0; border-top: 4px solid #333; width: calc(33.333% - 20px); min-width: 300px; display: flex; flex-direction: column; }
        .card:hover { border-top-color: #1e3932; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .card-img-box { position: relative; height: 200px; overflow: hidden; background-color: #eee; }
        .card-img-box img { width: 100%; height: 100%; object-fit: cover; }
        .badge { position: absolute; top: 15px; right: 15px; background-color: #1e3932; color: #fff; font-size: 11px; padding: 3px 8px; font-weight: bold; }
        
        .card-body { padding: 25px; flex-grow: 1; }
        .card-body h3 { font-size: 20px; margin-bottom: 15px; color: #222; }
        
        /* 스펙 표 스타일 */
        .spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
        .spec-table td { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
        .spec-table tr:last-child td { border-bottom: none; }
        .spec-label { color: #666; font-weight: bold; }
        .spec-value { text-align: right; color: #333; }

        /* 하단 안내 배너 (CTA) */
        .cta-section { padding: 60px 0; }
        .cta-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; }
        .cta-text h2 { font-size: 26px; margin-bottom: 10px; }
        .cta-text p { color: #bbb; }

        /* 푸터 */
        footer { background-color: #fff; border-top: 1px solid #e0e0e0; padding: 60px 0 30px 0; font-size: 14px; }
        .footer-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; margin-bottom: 40px; }
        .footer-info h3 { font-size: 22px; color: #1e3932; margin-bottom: 15px; }
        .footer-links h4 { font-size: 15px; color: #222; margin-bottom: 15px; text-transform: uppercase; }
        .footer-links li { margin-bottom: 8px; color: #666; }
        .footer-links a:hover { color: #1e3932; }
        
        .tag-group a { display: inline-block; background-color: #f4f4f4; padding: 5px 10px; margin: 0 4px 8px 0; font-size: 12px; }
        .tag-group a:hover { background-color: #e0e0e0; }

        .footer-bottom { border-top: 1px solid #e0e0e0; padding-top: 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; font-size: 12px; color: #888; }
        .policy-links a { margin-left: 20px; }
        .policy-links a:hover { color: #1e3932; }


		/* 태블릿 (1024px 이하): 2열 배치 */
		@media screen and (max-width: 1024px) {
		  ul.Business-Box li {
			width: 50%;
			margin-bottom: 40px; /* 줄간격 추가 */
		  }

		  .video-overlay h2 { font-size: 60px; font-weight: 800;}
		  .video-overlay p { font-size: 20px;}

		  .sub-nav {  border-bottom: none; }
          .sub-nav .tab-menu {  }
		  .sub-nav .tab-menu a { font-size: 16px; }

		  ul.Business-Box li p span {
			  margin-bottom: 7px;
		   }



		}

		/* 모바일 (600px 이하): 1열 배치 */
		@media screen and (max-width: 600px) {
		  ul.Business-Box li {
			width: 100%;
		  }
		  .video-overlay h2 { font-size: 40px; font-weight: 800;}
		  .video-overlay p { font-size: 16px;}

		}

		/* 상단 헤더/메뉴 레이어 기본 스타일 */



@media (max-width: 940px) {

        .hero-text h1 { font-size: 20px;}
        .btn-group { display: flex; gap: 5px; }
        .btn { padding: 12px 10px; }
		.video-overlay { top: 50%; }
		.video-overlay h2 { font-size: 40px;}
		.video-overlay p { font-size: 20px;}
		.video-overlay button { margin:20px 10px 0 10px;}


}