@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@900&family=Montserrat:wght@800&display=swap');

@font-face {
  font-family: 'Garet';
  font-weight: 900;
  font-style: normal;
  src: url('/fonts/Garet-Heavy.woff2') format('woff2');
}

/*
 * 메인 페이지 CSS 스타일
 * 이 파일은 '메인.jpg' 이미지를 기반으로 한 가상의 HTML 구조에 맞춰 작성되었습니다.
 * 실제 사용 시 HTML의 클래스/ID 이름과 이미지 경로를 수정해야 합니다.
 * 롤링 이미지(캐러셀) 및 메뉴 오버레이 기능이 추가되었습니다.
 * GNB(Global Navigation Bar) 전체가 캐러셀 위에 오버레이되도록 수정되었습니다.
 */

/* 폰트 임포트 (예시: Google Fonts - Noto Sans KR) */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap'); */

/* 기본 스타일 및 리셋 */
body {
    font-family: 'SUIT';
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 패딩, 보더가 너비/높이에 포함되도록 */
    color: #333; /* 기본 텍스트 색상 */
    line-height: 1.6;
}

/* 모든 요소에 box-sizing 적용 */
*, *::before, *::after {
    box-sizing: inherit;
}

/* 링크 기본 스타일 제거 */
a {
    text-decoration: none;
    color: inherit;
	font-family: 'SUIT';
}

/* 리스트 기본 스타일 제거 */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 섹션 공통 패딩 */
/* 모든 섹션은 기본적으로 100% 너비를 사용하며, 내부 콘텐츠는 max-width: 1400px로 중앙 정렬됩니다. */
section {
    padding: 80px 4%; /* 상하 80px, 좌우 5% 패딩 */
    margin: 0 auto; /* 중앙 정렬 */
}

/* 버튼 기본 스타일 */
.btn-primary {
    display: inline-block;
    padding: 12px 20px;
    background-color: #e53935; /* 이미지의 빨간색 계열 */
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #c62828;
}

.btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #555;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #f0f0f0;
    color: #333;
}

.btn-pill {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
}


/* ============================= */
/* 서브페이지 전용 스타일 */
/* ============================= */
body.subpage .main-header {
    background-color: #fff; /* 흰색 배경 */
    border-bottom: 1px solid #ddd;
}


body.subpage .main-header .main-nav li a {
    color: #000; /* 검정색 메뉴 텍스트 */
    text-shadow: none;
}

body.subpage .sub-visual {
    width: 100%;
    height: 400px; /* 서브 비주얼 높이 */
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column; /* Add this to stack items vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
}

/* Style for p with center horizontal alignment */
body.subpage .sub-visual p {
    font-size: 14px;
    opacity: 0.9;
    font-weight: 100;
    font-family: 'Montserrat', sans-serif;
    border: 0px solid red;
    margin: 70px 0 10px 0; /* Bottom margin to separate p from h1 */
    text-align: center; /* Center text horizontally */
	letter-spacing : 0.2em;
	color: #e3e3e3;
}

/* Style for h1 with center horizontal alignment */
body.subpage .sub-visual h1 {
    color: #fff;
    font-size: 46px;
    font-weight: 700;
 
    margin: 0; /* Remove default margins */
    text-align: center; /* Center text horizontally */
}

/* 1. 상단 헤더 (Top Header) - GNB (Global Navigation Bar) 영역 */
/* GNB 전체가 캐러셀 위에 오버레이되도록 배경을 투명하게 설정 */
.main-header {
    background-color: transparent; /* 캐러셀 위에 투명하게 */
    position: fixed; /* 스크롤 시 고정 */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* 다른 요소 위로 */
    /* box-shadow는 투명 헤더에서는 제거하거나 미묘하게 조정 */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
}

.main-header.scrolled {
    background-color: rgba(0, 0, 0, 0.85); /* 어두운 불투명 배경 */
    transition: background-color 0.3s ease; /* 부드러운 전환 */
}

.header-top {
    display: flex;
    justify-content: space-between; /* 로고, 메뉴, 유틸리티 메뉴를 양 끝과 중앙에 배치 */
    align-items: center;
    padding: 25px 12%; /* 상하 패딩 늘려서 높이 확보 */
    /* 투명 헤더이므로 하단 구분선 제거 */
    /* border-bottom: 1px solid #eee; */
    max-width: 1845px; /* 헤더 내부 콘텐츠 최대 너비 */
    margin: 0 auto;
	border:0px solid yellow;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 1px;
}

.logo img {
    height: 45px; /* 로고 이미지 높이 */
}




.logo span {
    color: #fff; /* 로고 텍스트 색상 (캐러셀 배경에 맞춰 흰색으로) */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 가독성을 위한 그림자 */
}

.utility-nav ul {
	margin-top:10px;
    display: flex;
    gap: 0px; /* 아이템 간 간격 */
	border:0px solid yellow;
	margin-right:-10px;
}

.utility-nav li a {
    font-size: 0.5em;
    color: #fff; /* 흰색 텍스트 (캐러셀 배경에 맞춰) */
    transition: color 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 가독성을 위한 그림자 */
}

.utility-nav li a:hover {
    color: #6999AF; /* 호버 시 빨간색 */
}




.utility-nav li:last-child {padding-left:40px;}

.utility-nav li img {width:100%; margin-top:3px;}

/* 언어 버튼 및 사이트맵 버튼에 대한 추가 스타일 */
.utility-nav .lang-btn {
     padding: 4px 15px 4px 15px;
    border: 1px solid rgba(255, 255, 255, 0.5); /* 투명 헤더에 맞춰 보더 색상 조정 */
    border-radius: 0px;
    font-weight: bold;
    color: #fff; /* 흰색 텍스트 */
    text-shadow: none; /* 버튼 내 텍스트는 그림자 제거 */
	font-family: 'SUIT';
	text-align: center;
}

.utility-nav .lang-btn.active {
    background-color: #fff;
    color: #6999AF;
}

.utility-nav .lang-btn:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1); /* 호버 시 반투명 배경 */
    color: #e53935; /* 호버 시 빨간색 */
	
}

/* ============================= */
/* 서브페이지 전용 스타일 */
/* ============================= */
body.subpage .utility-nav .lang-btn {
    border: 1px solid rgba(0, 0, 0, 0.5); /* 검정색 라인 */
    color: #000; /* 검정 텍스트 */
}

body.subpage .utility-nav .lang-btn.active {
    background-color: #000; /* 활성 상태일 때 배경 검정 */
    color: #fff; /* 글자는 흰색 */
}

body.subpage .utility-nav .lang-btn:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.05); /* 호버 시 연한 검정 배경 */
    color: #e53935; /* 호버 시 빨간색 */
}

/* 메인 내비게이션 - header-top 내부에 배치되도록 수정 */
.main-nav {
    flex-grow: 1; /* 로고와 유틸리티 메뉴 사이의 공간을 차지하도록 */
    text-align: center; /* 메뉴 항목들을 중앙 정렬 */
}

.main-nav ul {
    display: flex;
    justify-content: center; /* 메뉴 항목 중앙 정렬 */
	border:0px solid yellow;
	margin-left:40px;


}

.main-nav li {
  position: relative;
}

.main-nav li a {
    display: block;

    font-size: 17px;
    font-weight: 400; /* 중간 두께 */
    color: #fff; /* 흰색 텍스트 (캐러셀 배경에 맞춰) */
    transition: background-color 0.3s ease, color 0.3s ease;
	font-family: 'SUIT';
}


 .main-nav li:nth-child(1) a{
    padding: 0 70px 0px 0px;
	border:0px solid yellow;
 }

  .main-nav li:nth-child(2) a{
    padding: 0 60px 0px 0px;
	border:0px solid yellow;
 }

  .main-nav li:nth-child(3) a{
    padding: 0 60px 0px 0px;
	border:0px solid yellow;
 }

  .main-nav li:nth-child(4) a{
    padding: 0 60px 0px 0px;
	border:0px solid yellow;
 }

  .main-nav li:nth-child(5) a{
    padding: 0 60px 0px 0px;
	border:0px solid yellow;
 }

  .main-nav li:nth-child(6) a{
    padding: 0 70px 0px 0px;
	border:0px solid yellow;
 }


.main-nav li a:hover,
.main-nav li.active a { /* 현재 페이지 활성화 상태 */
    
    color: #CC0000; /* 호버 시 빨간색 */
}

/* 기존 submenu 스타일 유지 */
.main-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: -33px;

  width: 100%;                        /* 부모 li의 너비와 일치 */
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px 0;
  z-index: 999;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* 이 부분이 중요! 가로 정렬로 변경 */
.main-nav .submenu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0px;
  padding: 0;
  margin: 0;

  
}
/* 각 메뉴 항목들 */
.main-nav .submenu li {
  list-style: none;
  border:0px solid yellow;
  width:100%;
	
}

.main-nav .submenu li a {
    display: flex;                     /* ⭐ 핵심: flex로 변경 */
    justify-content: center;           /* 가로 중앙정렬 */
    align-items: center;               /* 세로 중앙정렬 */
    width: 100%;                       /* 박스 꽉 채우기 */
    height: 40px;                      /* 높이는 원하는대로 */
    color: #000;
    font-size: 13px;
    font-weight: 400;
    transition: color 0.2s ease;
    white-space: nowrap;
    border: 0px solid yellow;          /* (테스트용. 제거 가능) */
	padding:10px;
}

body.subpage .main-nav .submenu li a {
    color: #000; /* Enforce white text color on subpages */
}


body.subpage .main-nav li a:hover,
.main-nav li.active a { /* 현재 페이지 활성화 상태 */
    
    color: #CC0000; /* 호버 시 빨간색 */
}


.main-nav .submenu li:hover {
  background-color: #4B6FAC;
}

.main-nav .submenu li a:hover {
  color: #fff;
}



body.subpage .main-nav li.active a { /* 현재 페이지 활성화 상태 */
    
    color: #CC0000; /* 호버 시 빨간색 */
}

body.subpage .main-nav .submenu li a:hover {
  color: #fff;
}


.main-nav li:hover > .submenu {
  display: block;
}

/* 2. 히어로 섹션 (Hero Section) - 롤링 이미지 캐러셀 스타일 */
/* 캐러셀 컨테이너는 100% 너비를 사용합니다. */
.hero-section.carousel-container {
    position: relative;
    width: 100%;
    height: 800px; /* 캐러셀 높이 */
    overflow: hidden; /* 슬라이드 숨기기 */
    padding: 0; /* 섹션 공통 패딩 오버라이드 */
    margin-top: 0; /* GNB가 fixed로 오버레이되므로 마진 제거 */
}

.carousel-slides {
    display: flex;
    width: 100%; /* 3개 슬라이드 (100% * 슬라이드 수) */
    height: 100%;
    transition: transform 0.5s ease-in-out; /* 슬라이드 전환 애니메이션 */
}

.carousel-slide {
    flex: 0 0 100%; /* 각 슬라이드가 100% 너비 고정 */
	width: 100%; /* 각 슬라이드는 carousel-slides의 1/N */
    height: 100%;
    flex-shrink: 0; /* 슬라이드가 줄어들지 않도록 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    position: relative; /* 오버레이를 위해 */
}


/* 캐러셀 내부 콘텐츠는 max-width: 1400px로 중앙 정렬됩니다. */
.carousel-slide .hero-content {
    position: relative; /* 오버레이 위로 */
    z-index: 1;
    max-width: 1400px; /* 모든 내부 콘텐츠와 동일하게 1400px로 설정 */

    width: 100%; /* 부모의 100%를 차지하여 max-width가 적용되도록 */
	border:0px solid yellow;
}

.carousel-slide .hero-content h1 {
    font-size: 55px;
    margin-bottom: 20px;
    font-weight: 700;
	font-family: 'SUIT';
	letter-spacing: -0.5px;
	margin-top:-20px;
}

.carousel-slide .hero-content p {
    font-size: 24px;
    opacity: 0.9;
    font-weight: bold;
	font-family: 'SUIT';
	border:0px solid red;
	margin-top:0px;

}
.carousel-slide .hero-content img {
    margin:20px auto;
}

.carousel-slide .view-more-btn {
    /* ----- 레이아웃 & 디자인 ----- */
    display: inline-flex; /* 내부 요소를 가로로 배치하고 수직 정렬을 위함 */
    align-items: center; /* 수직 중앙 정렬 */
    background-color: rgba(255, 255, 255, 0.25); /* 반투명 흰색 배경 */
    border-radius: 50px; /* 아주 둥글게 만들어 캡슐 모양으로 */
    padding: 8px 10px 8px 24px; /* 안쪽 여백 (상, 우, 하, 좌) */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 은은한 테두리 (선택 사항) */
    
    /* (선택) 배경을 흐리게 하는 유리 효과(Glassmorphism) */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    /* ----- 폰트 & 기타 ----- */
    font-family: 'Montserrat', sans-serif; /* 예시 폰트, 원하시는 폰트로 변경하세요 */
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1px; /* 자간 */
    cursor: pointer;
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
	margin-top:20px;
	 font-size: 14px;
}

/* 마우스를 올렸을 때(hover) 효과 */
.carousel-slide .view-more-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

/* 'VIEW MORE' 텍스트 */
.carousel-slide .view-more-btn .btn-text {
    margin-right: 16px; /* 텍스트와 아이콘 사이의 간격 */
}

/* '+' 아이콘을 감싸는 원 */
.carousel-slide .view-more-btn .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background-color: #e53935; /* 빨간색 배경 */
    border-radius: 50%; /* 완벽한 원 모양 */
    color: #fff; /* '+' 기호 색상 */
    font-size: 20px;
    font-weight: normal; /* 아이콘 폰트는 보통 normal로 설정 */
    transition: transform 0.3s ease;
}

/* 마우스를 올리면 아이콘이 90도 회전하는 효과 */
.carousel-slide .view-more-btn:hover .btn-icon {
    transform: rotate(90deg);
}



/* 캐러셀 컨트롤 (화살표) */
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.8);
    border: none;
    cursor: pointer;
    font-size: 4em;
    z-index: 10;
	background-color: rgba(0, 0, 0, 0);
	font-weight:thin;
}

.carousel-control:hover {
    color: rgba(255,255,255,1);
}

.carousel-control.prev {
    left: 20px;
}

.carousel-control.next {
    right: 20px;
}

/* 캐러셀 내비게이션 점 */
.carousel-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.carousel-dot.active {
    background-color: #ffffff; /* 활성화된 점은 빨간색 */
}


/* 3. 메인 콘텐츠 섹션 1 ("Build A Space") */
.section-build-space {
    background-color: #f7f7f7; /* 연한 회색 배경 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0px 60px 0; /* 상하 패딩 더 넓게 */
	background: url("img/bg03.png");
}

.section-build-space .content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    width: 100%;
    gap: 80px; /* 텍스트와 그래픽 사이 간격 */
    flex-wrap: wrap; /* 작은 화면에서 줄바꿈 */
}

.section-build-space .text-content {
    flex: 1;
    min-width: 200px; /* 최소 너비 */
    text-align: left; /* 텍스트 좌측 정렬 */
	border:0px solid yellow;
}

.section-build-space .text-content h2 {
	
    line-height: 1.1;


font-family: 'Garet', sans-serif;
    font-weight: 900;     /* ExtraBold */
    color: #333333;       /* 거의 검정색 */
    font-size: 65px;
	letter-spacing : -0.03em;
}

.section-build-space .text-content h2 b {
font-family: 'Garet', sans-serif;
    font-weight: 900;     /* Black */
    color: #CC0000;       /* 강렬한 빨강 */
    font-size: 65px;
	letter-spacing : -0.03em;
}

.section-build-space .text-content p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 50px;
    color: #555;
	margin-top:-40px;

	
}



.section-build-space .graphic-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 700px; /* 적절한 크기 */
    height: 492px;
    background-color: #eee; /* 임시 배경색 */
    overflow: hidden; /* Y자 그래픽이 원형 안에 있도록 */
    /* 실제 Y자 그래픽은 background-image 또는 <img> 태그 사용 */
    background: url('img/img2.png') no-repeat center center/contain;
}

/* 4. 메인 콘텐츠 섹션 2 ("사업분야") */
.section-business-area-1 {
    display: flex;
    min-height: 800px; /* 적절한 높이 */
    padding: 0; /* 섹션 공통 패딩 오버라이드 */
	text-align: right;
}

.section-business-area-1 .image-half {
    flex: 1.2; /* 이미지가 텍스트보다 넓게 */
    background: url('img/bg01.png') no-repeat center center/cover;
    min-width: 100%; /* 작은 화면에서 이미지 최소 너비 */
}

.section-business-area-1 .content-half {
    flex: 1;
    background-color: rgba(0,0,0,0.8);
    padding: 90px 90px 133px;
    display: flex;
	position: absolute;
	right:0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 좌측 정렬 */
    min-width: 50%; /* 작은 화면에서 콘텐츠 최소 너비 */
}

.section-business-area-1 .content-half .title {width:650px; text-align: right;}

.section-business-area-1 .content-half p {
	font-size: 14px;
    color: #e53935; /* 빨간색 제목 */
    font-weight: 700;
	text-align: right;
	
}

.section-business-area-1 .content-half h2 {
    font-size: 60px;
    margin-bottom: 30px;
	margin-top: 0px;
    color: #ffffff; /* 빨간색 제목 */
    font-weight: bold;
	text-align: right;
}

.business-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 2fr)); /* 반응형 2열 또는 1열 */
    gap: 1px; /* 카드 간 간격 */
    width: 100%;
	max-width:550px;
	margin-left:100px;
}

.business-cards .card {
    background-color: #5B6167; /* 카드 배경 */
    padding: 0px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
    min-height: 200px; /* 카드 최소 높이 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #999999;
    cursor: pointer;
	font-family: 'SUIT';

}

.business-cards .card span{
  font-size: 18px;
}

.business-cards .card:hover {
    background: linear-gradient(135deg, #ba2427 0%,#7d191b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
	transform: translateY(-1px);
}

.business-cards .card img {padding-bottom:20px;}

.business-cards .card:hover::before {
    color: #fff; /* 호버 시 아이콘 색상 변경 */
}

.business-cards .card .card-icon {
    transition: filter 0.3s ease;
}

/* 5. 메인 콘텐츠 섹션 3 ("Business Area" / 품질, 기술, 인증, 수상) */
.section-business-area-2 {
    text-align: center;
    background-color: #fff;
    padding: 20px 5% 60px; /* 상하 패딩 더 넓게 */
	background: url('img/bg02.png') no-repeat center center/cover;
}

.section-business-area-2 h2 {
	letter-spacing:-0.03em;
    font-size: 54px;
    margin-bottom: 20px;
    color: #333333;
    font-weight: 800;
	font-family: 'Garet', sans-serif;
}

.section-business-area-2 p {
 font-size: 18px;
 font-weight: 500;
	margin-bottom: 60px;
	
	
}
  
.info-cards {
    display: flex;
    justify-content: center;
    gap: 20px; /* 카드 간 간격 */
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap; /* 반응형을 위해 줄바꿈 */
}

.info-card {
    flex: 1; /* 동일 너비 */
    min-width: 280px; /* 최소 너비 */
	height: 340px;
    padding: 20px 40px;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}


.info-card h3 {
 font-family: 'SUIT', sans-serif;
 font-weight: 900;
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #333;

}

.info-card p {
    font-size: 0.95em;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.info-card .btn-secondary {
    font-size: 12px;
    padding: 8px 20px;
	background-color:#f8f8f8;
	color:#999999;
	border-radius: 30px;
	
}

.info-card img {right:20px; bottom:20px; position: absolute;}

.info-card:hover {
	background:linear-gradient(135deg, #ba2427 0%,#7d191b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */;
    transform: translateY(-15px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	color:#ffffff;
	border: 0px;
}

.info-card:hover h3,
.info-card:hover p {
    color: #ffffff;
}

.info-card:hover .btn-secondary {
    background-color:#ffffff;
	 color: #ba2427;
	 font-weight:500;
}


/* 6. 뉴스 섹션 (News Section) */
.section-news {
    text-align: left; /* 제목은 좌측 정렬 */
    padding: 40px 14% 20px;
}

.section-news .section_title {
display: flex;                 /* Flexbox 레이아웃 적용 */
    justify-content: space-between; /* 자식 요소들을 양쪽 끝으로 정렬 */
    align-items: baseline;         /* 텍스트 베이스라인(baseline)을 기준으로 수직 정렬 */
    margin-bottom: 0px;           /* 제목 아래 전체 여백 */
    /* width: 1500px; */           /* 고정 너비가 필요하다면 유지 */
}

.section-news h2 {
    font-size: 2.5em;
    color: #222;
     font-weight: 800;
	font-family: 'Montserrat', sans-serif;
	margin: 0;
}

.section-news h2 b {font-size:0.4em; color:#e53935; padding-left:10px;}


.section-news .btn-more {
	width:100px;
    color: #e53935;
    font-size: 14px;
	float:right;
	margin-right:-30px;
}

/* 뉴스 리스트 전체 그리드 설정 (기존 코드와 유사) */
.news-list {
    display: grid;
    /* 한 줄에 2~4개의 카드가 보이도록 반응형으로 설정 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px; /* 카드 사이의 간격 */
    list-style: none; /* li의 기본 점 제거 */
    padding: 0;
}

/* li 기본 설정 */
.news-list li {
    background-color: #fff;
    /* 그림자 효과를 li에 주어 카드 전체가 떠 있는 느낌을 줌 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* 카드를 부드럽게 */
}

/* li에 마우스를 올리면 살짝 위로 올라가는 효과 */
.news-list li:hover {
}

/* a 태그를 카드 전체로 확장하고, 내부 요소를 Flex로 정렬 */
.news-list li a {
    display: flex;
    justify-content: space-between; /* 텍스트와 화살표를 양쪽 끝으로 */
    align-items: center; /* 수직 중앙 정렬 */
    padding: 0px;
    text-decoration: none;
    height: 100%; /* li 높이를 꽉 채움 */
    box-sizing: border-box; /* 패딩을 높이에 포함 */
}

/* 날짜, 제목, 요약을 감싸는 텍스트 영역 */
.news-text-content {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 텍스트 요소들 사이의 간격 */
}

/* 날짜 스타일 */
.news-list .date {
    font-size: 0.9em;
    color: #888;
}

/* 제목 스타일 */
.news-list .title {
    font-size: 18px;
    font-weight: 500; /* 좀 더 굵게 */
    color: #222;
    line-height: 1.4;
    margin: 10px 0 ;
    transition: color 0.3s ease;
}

/* 요약글 스타일 */
.news-list .summary {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* 화살표를 감싸는 원 스타일 */
.arrow-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: right;
    flex-shrink: 0; /* 카드가 줄어들어도 찌그러지지 않게 */
    width: 40px;
    height: 40px;
    border-radius: 50%; /* 원 모양 */
    background-color: #f0f0f0; /* 기본 배경색 */
    margin-left: 30px;
    transition: background-color 0.3s ease;
	margin-top:100px;
}

/* 화살표 아이콘(텍스트) 스타일 */
.arrow-wrapper span {
    font-size: 1em;
    color: #aaa;
    transition: color 0.3s ease;
}

/* --- Hover 효과 --- */

/* 카드에 마우스를 올렸을 때 제목 색상 변경 */
/*.news-list li a:hover .title {
    color: #e53935; 
}*/

/* 카드에 마우스를 올렸을 때 화살표 원 배경색 변경 */
.news-list li a:hover .arrow-wrapper {
    background-color: #e53935; /* 포인트 컬러 */
}

/* 카드에 마우스를 올렸을 때 화살표 색상 변경 */
.news-list li a:hover .arrow-wrapper span {
    color: #fff;
}

/* 7. 채용 정보 섹션 (Recruitment Section) */
.section-recruitment {
    text-align: center;
    padding: 50px 14% 90px 14%;
}
.section-recruitment img {width:100%;}

.section-recruitment h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #222;
    font-weight: 700;
}

.section-recruitment p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #666;
}

/* 8. 푸터 (Footer) */
/* 1. 푸터 전체 배경을 위한 래퍼 */
.footer-wrapper {
    background-color: #222; /* 배경색을 이곳에 적용 */
    width: 100%;
    padding: 50px 0; /* 상하 패딩 */
	clear: both; /* float 클리어 강화 */
	
}

/* 2. 푸터 내부 콘텐츠를 중앙 정렬하기 위한 컨테이너 */
.footer-container {
    max-width: 1400px; /* 콘텐츠의 최대 너비, 원하시는 크기로 조절하세요 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 0 0px; /* 좌우 여백 (화면이 작아질 때 대비) */
    display: flex;
    justify-content: space-between; /* 로고와 오른쪽 콘텐츠를 양 끝으로 */
    align-items: flex-start; /* 상단 기준 정렬 */
	border:0px solid yellow;
}

/* 3. 푸터 로고 */
.footer-logo {
    flex-shrink: 0; /* 로고가 찌그러지지 않도록 설정 */
}
.footer-logo img {
    height: 50px; /* 로고 이미지 크기 조절 */
}


/* 4. 메뉴와 정보 텍스트를 감싸는 오른쪽 영역 */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: right; /* 내부 아이템들을 왼쪽 정렬 */
    gap: 20px; /* 메뉴와 주소 정보 사이의 간격 */
	text-align: right;
}

/* 5. 푸터 메뉴 (ul) */
.footer-nav ul {
    display: flex;
    flex-wrap: wrap; /* 화면이 좁아지면 줄바꿈 */
    list-style: none;
	margin-left:220px;
    padding: 0;
    gap: 25px; /* 메뉴 아이템 사이의 간격 */
}


.footer-nav li {
border:0px solid yellow;
    position: relative;
    padding-right: 16px; /* 선과 텍스트 간 간격 확보 */
}

.footer-nav li:last-child{padding-right: 0px;}

.footer-nav li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 1px;
    background-color: #aaa; /* 선 색상 */
    opacity: 0.6; /* 약간 투명하게 */
}

.footer-nav a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
	font-family: 'SUIT';
}

.footer-nav a:hover {
    color: #ccc;
}

/* 6. 주소 및 저작권 정보 */
.footer-info {
	margin-top:10px;
    font-size: 0.9em;
    color: #fff;
    line-height: 1.8;
	font-weight: bold;
}

.footer-info p {
    margin: 0;
}

/* 저작권 텍스트는 조금 더 연하게 */
.footer-info .copyright {
    color: #777;
    margin-top: 0px;
	  font-size: 13px;
	font-weight: 300;
	margin-top:10px;
}

/*
 * 반응형 디자인을 위한 미디어 쿼리 (예시)
 * 작은 화면에서 레이아웃 조정
 */
@media (max-width: 1024px) {
    .section-build-space .content-wrapper,
    .section-business-area-1,
    .info-cards,
    .main-footer {
        flex-direction: column; /* 세로로 쌓이도록 변경 */
        align-items: center;
        text-align: center; /* 텍스트 중앙 정렬 */
    }

    .section-business-area-1 .image-half,
    .section-business-area-1 .content-half {
        width: 100%; /* 너비 100% */
        min-width: unset;
    }

    .section-business-area-1 .content-half {
        padding: 40px 20px;
        align-items: center; /* 콘텐츠 중앙 정렬 */
    }

    .section-build-space .text-content {
        text-align: center; /* 텍스트 중앙 정렬 */
    }

    .hero-content h1 {
        font-size: 2.5em;
    }

    .hero-content p {
        font-size: 1em;
    }

    /* 메인 내비게이션 반응형 */
    .main-nav {
        /* position: relative; */ /* 모바일에서는 고정 해제 (필요 시) */
        /* top: auto; */
        /* transform: none; */
        background-color: rgba(0, 0, 0, 0.7); /* 배경색 조정 */
        padding: 0;
    }

    .main-nav ul {
        flex-wrap: wrap; /* 메뉴 항목 줄바꿈 */
        justify-content: center;
    }

    .main-nav li a {
        padding: 10px 15px;
        font-size: 1em;
    }

    .section-business-area-2 h2,
    .section-news h2,
    .section-recruitment h2 {
        font-size: 2em;
    }

    .business-cards {
        grid-template-columns: 1fr; /* 한 열로 변경 */
    }

    .info-card {
        min-width: 80%; /* 작은 화면에서 카드 너비 조정 */
    }

    /* 캐러셀 컨트롤 모바일 조정 */
    .carousel-control {
        padding: 10px 5px;
        font-size: 1.2em;
    }
    .carousel-control.prev { left: 10px; }
    .carousel-control.next { right: 10px; }
    .carousel-dots { bottom: 10px; }
}

@media (max-width: 768px) {
    .hero-section.carousel-container {
        height: 400px; /* 모바일에서 히어로 높이 줄이기 */
    }

    .hero-content h1 {
        font-size: 2em;
    }

    .section-build-space .graphic-content {
        width: 300px;
        height: 300px;
    }

    .header-top {
        flex-direction: column; /* 헤더 상단 세로로 쌓기 */
        padding-bottom: 5px;
    }

    .utility-nav {
        margin-top: 10px;
    }

    /* .main-header {
        position: relative;
        box-shadow: none;
    } */ /* 헤더 고정 유지 */

    /* body { margin-top: 0; } */
}

@media (max-width: 480px) {
    section {
        padding: 40px 5%; /* 모바일에서 패딩 줄이기 */
    }

    .hero-content h1 {
        font-size: 1.8em;
    }

    .section-build-space .text-content h2 {
        font-size: 2em;
    }

    .section-business-area-1 .content-half h2 {
        font-size: 1.8em;
    }

    .section-business-area-2 h2,
    .section-news h2,
    .section-recruitment h2 {
        font-size: 1.8em;
    }
}


   .main_bt{
  background:#14253a;
}
.main_bt__inner{
  max-width:1000px;                /* 컨테이너 너비 */
  height:80px;                     /* 스크린샷 높이 */
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* 메인공지 */
.main_bt__notice{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}
.main_bt__notice img{
  height:64px; object-fit:contain;
}
.main_bt__notice p{
  margin:0;
  font-size:18px;                  /* 필요시 16~20px 조절 */
  font-weight:600;
  letter-spacing:-0.2px;
}
.hl-red{ color:#ff4d4d; }

/* 우측 버튼 (300x45, pill) */
.info_button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:300px;
  height:45px;
  padding:0 16px;
  background:#fff;
  color:#0b1c2c;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-radius:9999px;
  box-shadow:0 0 0 1px rgba(20,37,58,.25) inset; /* 얇은 테두리 느낌 */
  position:relative;
  transition:background-color .2s ease, transform .06s ease;
}
.info_button::after{
  content:"›";
  font-size:18px;
  margin-left:10px;
  line-height:1;
}
.info_button:hover{ background:#f3f5f8; }
.info_button:active{ transform:translateY(1px); }

/* 반응형: 모바일에서 세로 정렬 및 버튼 풀폭 */
@media (max-width: 768px){
  .main_bt__inner{
    height:auto;
    padding:14px 16px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .main_bt__notice{
    justify-content:center;
    text-align:center;
  }
  .info_button{
    width:100%;
  }
}
/* 메인공지 */

/* TECcenter 및 관련 스타일 수정 */
.TECcenter {
    width: 100%;
    min-height: auto; /* 콘텐츠 높이에 따라 자동 조정 */
    margin: 0;
    padding: 0;
}

.TECcontainer {
    width: 997px;
    margin: 0 auto;
    padding: 0;

    border: 0px solid yellow;
}

.TECcontainer .TECleft {
    float: left;
    width: 222px;
    margin: 0 65px 0 0;
    z-index: 10;
}

.TECcontainer .TECcontant {
    float: left;
    width: 695px;
    overflow: hidden; /* 내용이 영역 밖으로 벗어나지 않도록 hidden으로 변경 */
    display: flex; /* 내부 요소를 flex로 배치하여 안정화 */
    flex-wrap: wrap; /* 내용이 넘치면 줄바꿈 */

}

.TECcontainer .TECcontant_center {
    width: 100%;
    overflow: hidden; /* 내용이 영역 밖으로 벗어나지 않도록 hidden으로 변경 */
	text-align:center;
	border:0px solid yellow;
}


/* LEFE */

/* LNB */

.LNBBgTop{width:100%px; padding-bottom:50px; position:relative;}
.LNBBgBottom{width:100%; padding-top:68px; padding-left:7px;}
.LNBTitle{ position:relative; margin:-70px 0 0 0;overflow: hidden;}
.LNBMenu{width:100%; margin-top:15px;margin-bottom:100px;}
.LNBMenu li{height:36px; background:0 bottom no-repeat url(/images/LNBLine.png);padding-top:10px;}
.LNBMenu a{display:block; height:36x; background:13px 9px no-repeat url(/images/LNBIcon.png);  text-align:left; color:#363636; font-size:12px;  padding:5px 0 5px 29px;pointer-events: auto;}
.LNBMenu a:hover{color:#fff; height:40x;background:0 0 no-repeat url(/images/BtnLeft_over.jpg) #fff; text-decoration:none; font-weight:bold; padding:6px 0 5px 29px;}

.LNBMenu2 a{display:block; height:24px; background:13px 9px no-repeat url(/eng/images/LNBIcon.png);  text-align:left; color:#363636; font-size:12px;  padding:0px 0 5px 29px;}
.LNBMenu2 a:hover{color:#fff; height:100px;background:0 0 no-repeat url(/eng/images/BtnLeft_over.jpg) #fff; text-decoration:none; font-weight:bold; padding:0px 0 5px 29px;}


.subTdeth{height:93px !important; }
.sub3deth{background-color:#f3f3f3;width:120px !important; height:52px; padding:1px 2px 3px 9px; margin-left:25px; margin-top:2px;}
.sub3deth a{background:none !important;width:100px; font-size:11px;height:15px !important; display:block; border-bottom:1px dotted #fff;padding:6px 2px 6px 4px !important;color:#666;}
.sub3deth a:hover{color:#666; font-weight:boldl}

.ceo_photo {float:left; width:292px; height:380px;}
.ceo_greeting {float:left; width:690px; height:auto; padding-bottom:20px; line-height:20px; margin-top:20px; font-size:14px; text-align:justify;margin-bottom:120px;}
.ceo_greeting p {float:left;width:100%;}
.ceo_greeting p.bottom{float:left; padding-top:20px;}
.ceo_greeting p.right{text-align:right;border:0px solid yellow;}

.mb100{margin-bottom:100px}


/*** 페이징 ***/
#paging_box { clear:both; left:0; width:100%; height:40px ; bottom:-15px; line-height:20px; margin-top:20px;text-align:center; position:absolute;}
#paging_box div { margin:0 auto; width:95px;}
#paging_box span{ float:left; }
#paging_box2 { clear:both; position:absolute; left:0; bottom:0px; line-height:44px; border-top:1px solid #d9d9d9; }

.paging { text-align: center; }
.paging span { padding:0 5px;font-size: 12px; border:0px solid yellow;}
.paging span img{vertical-align:middle;}
.paging span a { padding:0 5px; font-weight: bold; color:#545765; font-family: sans-serif; }
.paging span a:hover { color: #a81c38; }
.paging .sel { color: #a81c38; }

/* 수상실적 */
.comBg{float:left;background:0 0 no-repeat url(/images/cpmpanyBG.png); width:690px; height:616px; padding:44px 72px 38px 27px;margin-bottom:100px;}
.comBg .comTa{background:0 0 no-repeat url(/images/cpmpanyTableT.jpg); width:589px; border:1px solid #e1e1e1; position:relative;}
.comBg .comTa table thead{height:47px;}
.comBg .comTa table thead td{ text-indent:-5000px;}
.comBg .comTa table tbody tr td{border-bottom:1px solid #e1e1e1;height:50px;}
.comBg .comTa table tbody tr.Tbg{ background-color:#ebebeb; background:0 0 repeat url(/images/cpmTableTdBg.png);}
.comBg .comTa table tbody tr td.fir{background:6px 10px no-repeat url(/images/cpmTableTBullet.png); padding-left:27px; font-size:14px;}
.comBg .comTa table tbody tr td.src{ text-align:center !important;}

/* 비즈니스 */
.BUSING{ float:left;display:block; }
.BUSING .BUSINGTab{margin-top:-10px;border-bottom:5px solid #fe5f09;width:690px;}
.BUSING .BUSINGTab a{float:left; display:block; height:22px;}
.BUSING .BUSINGTab a.Tab01{background:0 0 no-repeat url(/images/business/BtnTab.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab02{background:-46px 0 no-repeat url(/images/business/BtnTab.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab03{background:-92px 0 no-repeat url(/images/business/BtnTab.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab04{background:-138px 0 no-repeat url(/images/business/BtnTab.png);width:78px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab05{background:-218px 0 no-repeat url(/images/business/BtnTab.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab06{background:-264px 0 no-repeat url(/images/business/BtnTab.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab01:hover{background:0 0 no-repeat url(/images/business/BtnTab_on.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab02:hover{background:-46px 0 no-repeat url(/images/business/BtnTab_on.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab03:hover{background:-92px 0 no-repeat url(/images/business/BtnTab_on.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab04:hover{background:-138px 0 no-repeat url(/images/business/BtnTab_on.png);width:78px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab05:hover{background:-218px 0 no-repeat url(/images/business/BtnTab_on.png);width:44px;text-indent:-5000px;}
.BUSING .BUSINGTab a.Tab06:hover{background:-264px 0 no-repeat url(/images/business/BtnTab_on.png);width:44px;text-indent:-5000px;}



.BUSING .BUSINGTab4{margin-top:-10px;border-bottom:5px solid #fe5f09;width:690px;}
.BUSING .BUSINGTab4 a{float:left; display:block; height:22px;}
.BUSING .BUSINGTab4 a.Tab01{background:0 0 no-repeat url(/images/business/BtnTab4.png);width:141px;text-indent:-5000px;}
.BUSING .BUSINGTab4 a.Tab02{background:-143px 0 no-repeat url(/images/business/BtnTab4.png);width:141px;text-indent:-5000px;}
.BUSING .BUSINGTab4 a.Tab01:hover{background:0 0 no-repeat url(/images/business/BtnTab4_on.png);width:141px;text-indent:-5000px;}
.BUSING .BUSINGTab4 a.Tab02:hover{background:-143px 0 no-repeat url(/images/business/BtnTab4_on.png);width:141px;text-indent:-5000px;}

.BUSINGMenu{ position:relative;width:690px;margin-top:20px;margin-bottom:120px;}
.BUSINGMenu .BUSINGMenuM{background:0 0 repeat-y url(/images/business/BGTrane.png); width:152px;height:450px; position:absolute; top:0px; right:0;}
.BUSINGMenu .BUSINGMenuM a{display:block; padding:4px 3px 4px 5px; color:#fff; font-size:11px;}
.BUSINGMenu .BUSINGMenuM a:hover{color:#FF0;padding:3px 2px 4px 7px; background:0 8px no-repeat url(/images/business/businBullet.jpg) #000; text-decoration:none;}
.BUSINGMenu .BUSINGMenuM .Selected {background: url("/images/business/businBullet.jpg") no-repeat scroll 0 8px #000000;color: #FFFF00;padding: 3px 2px 4px 7px;text-decoration: none;}

.BUSINGImg .BUSINGBimg{width:690px;height:430px; background-color:#000;}
.BUSINGImg .BUSINGImgTitle{width:690px;height:25px; background-color:#000; color:#fff; font-size:14px; padding:6px 2px 3px 4px;}
.BUSINGImg .BUSINGImgTitle .TCOL1{width:80%;}
.BUSINGImg .BUSINGImgTitle .TCOL2{width:20%; text-align:center; background-color:#000;}
.BUSINGImg .BUSINGImgTitle .TCOL2 a{width:20%; text-align:center; background-color:#000; color:#fff;}
.BUSINGImg .BUSINGImgSimg{width:690px;padding:3px 5px 3px 5px; background-color:#363636; overflow:hidden;}
.BUSINGImg .BUSINGImgSimg a{ display:block; float:left; margin-right:8px; width:50px; height:32px;}


.skillCofir{ float:left;background:0 0 no-repeat url(/images/fr_bg.png); width:690px; position:relative; padding-top:55px;margin-bottom:100px;}
.skillCofirTabl{ background:0 bottom no-repeat url(/images/fr_bg01.png);padding:34px 73px 34px 28px;}
.skillCofirTabl table tr th{border-bottom:3px solid #fe5f09; text-align:center; height:50px; font-size:14px; padding:3px 0 3px 0;}
.skillCofirTabl table tr td{border-bottom:1px solid #e1e1e1; padding:8px 0 8px 0;}
.skillCofirTabl table tr td.fir{text-align:center;}
.skillCofirTabl table tr td.sec{padding:8px 4px 8px 6px; vertical-align:top;}
.skillCofirTabl table tr td.sec p.spTitle{margin-bottom:7px;}


/* 뉴스_게시판 */
.marginTop10{margin-top:10px;}

.MBoard{float:left;width:687px;margin-bottom:100px}
.MBoard table{width:100%;}
.MBoard table thead{background:0 0 no-repeat url(/images/noticeImg01.png);}
.MBoard table thead th{height:36px; text-align:center; color:#808080; font-size:11px; background:right 13px no-repeat url(/images/noticeImg02.gif); padding:0px 3px 4px 3px;}
.MBoard table tr td{height:25px; border-bottom:1px solid #cdcdcd; text-align:center;padding:4px 4px 3px 5px;font-size:12px;}
.MBoard table tr.fir td{ background-color:#f5f5f5;}
td.sec{ text-align:left !important; color:#000; padding-left:7px !important;}


.TnoticRead {
float:left;
    width: 687px;
    /* 필요시 clear 처리 (float가 남아있을 때 안전장치) */
    overflow: visible;
}
.TnoticRead table {
    float: none !important;     /* 기존 float 제거 */
    margin: 0 auto;             /* 좌우 자동 마진으로 중앙 정렬 */
    width: 687px;               /* 기존 고정 너비 유지(필요에 따라 조정) */
    display: table;             /* 안전하게 테이블로 보이도록 */
}

.TnoticRead table tr th{border-bottom:1px solid #abacac;padding:6px 3px 6px 3px;background:right 13px no-repeat url(/images/noticeImg02.gif);}
.TnoticRead table tr.fir th, .TnoticRead table tr.fir td{border-top:1px solid #620505; color:#000; font-weight:bold; background-color:#f5f5f5;font-size:14px;}
.TnoticRead table tr td{height:20px; text-align:left; color:#808080; font-size:14px;border-bottom:1px solid #cdcdcd; padding:6px 4px 6px 9px;}
.TnoticRead table tr td.last{padding:10px; line-height:20px;border-bottom:1px solid #620505;}
.TnoticRead table tr td.last img {
    max-width: 100%; /* 셀 너비를 넘지 않음 */
    height: auto;    /* 비율 유지 */
    display: block;  /* 줄바꿈 처리 */
}

/* --- 목록 버튼을 테이블 바로 아래 중앙에 배치 --- */
.TbtnArea {
    width: 100%;                /* 부모 컨테이너 기준 전체 너비 사용 */
    margin: 50px 0 50px 0;         /* 위쪽 간격(필요시 조절) */
    display: flex;
    justify-content: center;    /* 가로 중앙 정렬 */
    align-items: center;        /* 세로 중앙 정렬 */
    border: none;               /* 디버그용 테두리 제거 */
    height: auto;
}
.TbtnArea p {
    margin: 0;
    padding: 0;
    text-align: center;
    position: static;           /* 절대위치 제거 */
}
.TbtnArea p a {
    float: none;
    display: inline-block;
    margin: 0 6px;
}

a.mBtn2{width:40px; height:18px; background:0 0 no-repeat url(/images/btnGroup.gif); color:#FFF; text-align:center; display:block;font-size:11px;}
a.mBtn2Desble{width:40px; height:18px; background:0 -21px no-repeat url(/images/btnGroup.gif); color:#FFF; text-align:center; display:block;}
a.mBtn2:hover{background:0 -21px no-repeat url(/images/btnGroup.gif); text-decoration:none}
a.mBtn4{width:56px; height:18px; background:0 -44px no-repeat url(/images/btnGroup.gif); color:#FFF; text-align:center; display:block;}
a.mBtn4Desble{width:40px; height:18px; background:0 -66px no-repeat url(/images/btnGroup.gif); color:#FFF; text-align:center; display:block;}

a.mBtnTa2{width:49px; height:16px; background:0 -109px no-repeat url(/images/btnGroup.gif); color:#FFF; font-size:11px; text-align:center; display:block;}
a.mBtnTa2:hover{background:0 -127px no-repeat url(/images/btnGroup.gif); text-decoration:none}


.positionRela {
    width: 100%;
    max-width: 800px;          /* 폼 컨텐츠에 맞는 적당한 크기 */
    margin: 0 auto;            /* 가운데 정렬 */
    position: relative;
}
/* 고객센터 */
.recTap{ border-bottom:1px solid #cc0000; width:100%; margin-bottom:10px;}
.recTap a{ display:block; height:30px; float:left; margin-bottom:-2px;}
.FaQSearch{width:208px; height:43px; background:0 0 no-repeat url(/images/faqImg01.jpg); margin-top:-70px; position:relative; margin-bottom:30px;}
.FaQSearch p{ position:absolute; width:1800px; height:25px; top:20px; left:5px;}
.FaQSearch a{width:40px; height:22px; text-indent:-5000px; display:block;float:left;}
.FaQSearch input{width:130px; height:20px; border:0; float:left; margin-right:23px}
.faqTop{float:left; width:690px; padding-top:21px; position:relative;margin-bottom:100px}
.faq{margin:1em 0;background:0 bottom no-repeat url(/images/JobBgImgBot.png); width:690px; padding:0 90px 0 30px;}
.faq .faqHeader{position:absolute; top:3px; right:10px;width:35px; height:25px;}
.faq .faqHeader .showAll{position:absolute;bottom:15px;right:2px;border:0;padding:0;overflow:visible;background:none;cursor:pointer;  width:35px; height:25px; text-indent:-5000px}
.faq .faqBody{margin:0;width:623px; padding:0 0 40px 0;}
.faq .faqBody .article{list-style:none}
.faq .q{margin:0;border-top:1px solid #ddd}
.faq .q a{display:block;padding:0.5em 1em;text-align:left;font-weight:bold;background:#fafafa;color:#000;text-decoration:none !important; font-size:14px;}
.faq .q a:hover, .faq .q a:active, .faq .q a:focus{background:#f8f8f8;}
.faq .a{margin:0;padding:1em;line-height:1.5; color:#666;font-size:14px;}

.onlan01{width:625px; height:257px; background:0 0 no-repeat url(/images/onlane01.jpg); position:relative;}
.onlan01 p{width:200px; height:257px; position:absolute; top:68px; right:90px;}
.onlan01 p span{ display:block; height:20px; width:200px; margin-bottom:20px;}

.onlan02{width:624px; height:276px; background:0 0 no-repeat url(/images/onlane02.jpg); position:relative;}
.onlan02 p{width:200px; height:257px; position:absolute; top:78px; right:90px;}
.onlan02 p span{ display:block; height:20px; width:200px; margin-bottom:20px;}

.asInput{position:absolute; top:465px; right:178px; z-index:10;border:0px solid yellow;}
.asInput span{display:block; }
.asInput span input{border:0px; height:22px;}
.asInput span input:focus {outline:none;}

.CusImg04Wrapper {
    position: relative;
    display: inline-block; /* 이미지 크기에 맞춤 */
}


.QnaIn{position:absolute;width:454px; height:333px; top:175px; right:65px;border:0px solid yellow;float:left;}
.QnaIn span{display:block; margin-bottom:15px;}
.QnaIn span input, textarea{border:1px;}
.QnaIn span input:focus {outline:none;}
.QnaIn span textarea:focus {outline:none;}
.TbtnArea01{position:absolute;width:206px; height:46px; bottom:65px; right:48px;z-index:11;}
.TbtnArea01 .mBtn5{width:116px; height:38px; display:block; float:left; margin-right:5px; text-indent:-5000px;z-index:12;}
.TbtnArea01 .mBtn3Desble{width:80px; height:38px; display:block; float:left;text-indent:-5000px;z-index:12;}

.HopeHp span{float:left; display:block;}


.QnaIn1{position:absolute;width:454px; height:333px; top:367px; right:55px;border:0px solid yellow;float:left;}
.QnaIn1 span{display:block; margin-bottom:15px;}
.QnaIn1 span input, textarea{border:1px;}
.QnaIn1 span input:focus {outline:none;}
.QnaIn1 span textarea:focus {outline:none;}

.QnaIn2{position:absolute;width:465px; height:333px; top:90px; right:45px;border:0px solid yellow;float:left;}
.QnaIn2 span{display:block; margin-bottom:15px;}
.QnaIn2 span input, textarea{border:1px;}
.QnaIn2 span input:focus {outline:none;}
.QnaIn2 span textarea:focus {outline:none;}

.QnaIn3{position:absolute;width:454px; height:333px; top:90px; right:65px;border:0px solid yellow;float:left;}
.QnaIn3 span{display:block; margin-bottom:15px;}
.QnaIn3 span input, textarea{border:1px;}
.QnaIn3 span input:focus {outline:none;}
.QnaIn3 span textarea:focus {outline:none;}


.QnaIn4{position:absolute;width:465px; height:90px; top:90px; right:45px;border:0px solid yellow;float:left;}
.QnaIn4 span{display:block; margin-bottom:15px;}
.QnaIn4 span input, textarea{border:1px;}
.QnaIn4 span input:focus {outline:none;}
.QnaIn4 span textarea:focus {outline:none;}


.QnaIn5{position:absolute;width:465px; height:303px; top:52px; right:40px;border:0px solid yellow;float:left;}
.QnaIn5 span{display:block; margin-bottom:15px;}
.QnaIn5 span input, textarea{border:1px;}
.QnaIn5 span input:focus {outline:none;}
.QnaIn5 span textarea:focus {outline:none;}


.family-site {
    margin-top: 15px; /* 로고와 간격 */
    text-align: center; /* 가운데 정렬 (필요시 left/right 변경) */
}

.family-site select {
    padding: 6px 12px;
    border: 1px solid #ccc;
    font-size: 14px;
    border-radius: 4px;
}