/* 1. SUIT 폰트 설정 */
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2407@1.0/SUIT.woff2'); 
/* Poppins 폰트 로드 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/* 2. Electric Safety 폰트 설정 */
@font-face {
    font-family: 'ElectricSafety'; /* 원하는 폰트 이름 지정 */
    src: url('/fonts/Electrical Safety Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ElectricSafetyBold'; /* 원하는 폰트 이름 지정 */
    src: url('/fonts/Electrical Safety Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* 기본 레이아웃 설정 */
html, body {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
	 font-family: 'SUIT', sans-serif;
}

.main-container {
    width: 1920px;
    height: 269px;
    position: relative;
}

/* 상단 유틸리티 바 (방문자 수) */
.top-bar {
    width: 1920px;
    height: 36px;
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    background: #f8f8f8;
}

.visitor-info {
    display: flex;
    position: absolute;
    right:320px;
    top: 11px;
    align-items: center; /* 세로 중앙 정렬 */
}

.visitor-item {
    display: flex;
    align-items: center;
    gap: 4px; /* 아이콘과 글자 사이의 간격 */
}

.visitor-item p {
	font-family: 'ElectricSafety';
    margin: 0;
    font-size: 14px;
    color: #374760;
    line-height: 1; /* 줄높이 초기화로 정렬 도움 */
	margin-top:2px;
}

.divider {
    width: 1px;
    height: 15px;
    background: #DDDDDD;
    margin: 0 15px; /* 구분선 좌우 간격 */
}

/* SVG 아이콘이 너무 위로 치우쳐 보일 경우 미세 조정 */
.visitor-item svg {
    display: block;
}

/* 로고 및 연락처 영역 */
.header-top {
    position: relative;
    padding-left: 320px;
    padding-top: 64px;
}



.logo-text {
	font-family: 'ElectricSafetyBold';
    font-size: 44px;

    text-align: left;
    margin-top: -5px;
}

.logo-highlight { color: #13c2dd; }
.logo-sub { color: #232f3f; font-weight: 400; }

.contact-info {
    display: flex;
    gap: 20px; /* 각 항목 사이의 간격 */
    margin-top: 0px;
    align-items: center;
}

.contact-item {
font-family: 'ElectricSafety';
    display: flex;
    align-items: center;
    gap: 8px; /* 아이콘과 텍스트 사이의 간격 */
    color: #374760;
    font-size: 14px;
}

/* 텍스트 앞의 하늘색 수직 바 */
.blue-bar {
    width: 3px;
    height: 14px;
    background: #13c2dd;
    margin-right: 2px;
}

.contact-item svg {
    flex-shrink: 0; /* 아이콘이 찌그러지지 않게 방지 */
}

/* 네비게이션 메뉴 영역 */
.nav-section {
    width: 100%;
    /* 높이를 고정하지 않거나, 두 줄 메뉴 높이에 맞게 조절합니다 (42px * 2 = 84px) */
    height: auto; 
    position: absolute;
    top: 185.5px;
    background: #374760;
    border-top: 1px solid #4d5c74;
    border-bottom: 1px solid #4d5c74;
    display: flex; /* 추가 */
    align-items: center; /* 추가 */
}

.nav-container {
    display: flex;
    flex-direction: row;    /* 아이콘, 메뉴, 검색창을 가로로 나열 */
    align-items: stretch;   /* 아이콘 박스 높이를 메뉴 전체 높이에 맞춤 */
    margin-left: 320px;
    width: 100%;            /* 전체 너비 활용 */
}


.menu-icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    border-left: 1px solid #4d5c74;
    /* 메뉴 테두리와 겹치지 않게 조정 */
    border-right: 1px solid #4d5c74;
    flex-shrink: 0;
}

.menu-content {
    display: flex;
    flex-direction: column; /* 메뉴 자체는 두 줄이므로 세로 정렬 */
    flex-shrink: 0;         /* 메뉴 너비가 줄어들지 않게 고정 */
}

.menu-wrapper {
    display: flex; /* grid 대신 flex가 정렬에 더 유리할 수 있습니다 */
}

.menu-item {
    width: 130px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #4d5c74;
    border-bottom: 1px solid #4d5c74;
    color: white;
	position: relative; /* 서브메뉴 배치를 위해 필요 */
    box-sizing: border-box; /* 테두리가 너비에 포함되도록 설정 */

}

.menu-item.active {
    background: #13c2dd;
    font-weight: 700;
}

.menu-item:hover{
 background: #13c2dd;
    font-weight: 700;
}


/* 서브메뉴 컨테이너 */
.sub_menu_container {
  display: none; /* 기본적으로 숨김 */
  position: absolute;
  top: 35px; /* 메뉴 바로 아래 */
  left: 50%;
  transform: translateX(-50%); /* 중앙 정렬 */
  width: 130px;
  z-index: 100;
  padding-top: 0px; /* 화살표 공간 */
  border:0px solid yellow;
}

/* 마우스 오버 시 표시 */
.menu-item:hover .sub_menu_container {
  display: block;

}

/* 상단 삼각형 화살표 */
.sub_menu_arrow {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 6px;
  padding-top:5px;
  margin-bottom: -1px; /* 리스트 박스와 미세하게 겹쳐서 빈틈 제거 */
}
/* 서브메뉴 리스트 */
.sub_menu_list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 0; /* 필요 시 하단만 둥글게 조절 */
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 서브메뉴 개별 항목 */


.sub_menu_item {
    display: flex;             /* 텍스트와 아이콘을 가로로 배치 */
    align-items: center;       /* 세로 가운데 정렬 */
    justify-content: space-between; /* 텍스트는 왼쪽, 아이콘은 오른쪽 끝 */
    white-space: nowrap;       /* [핵심] 텍스트가 길어도 줄바꿈 방지 */
    padding: 10px 15px;        /* 적절한 여백 */
    min-width: 150px;          /* 최소 너비를 지정하여 너무 좁아지지 않게 설정 */
	background: #0f889b;
	 border-bottom: 1px solid #0fa2b9;
}


.sub_menu_item:last-child {
  border-bottom: none;
}

/* 활성화 상태 또는 마우스 오버 시 */
.sub_menu_item.active, 
.sub_menu_item:hover {
  background: #0fa2b9;
}

/* 서브메뉴 텍스트 */
.sub_menu_item a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: block;
    flex: 1;                   /* 텍스트 영역이 가능한 넓게 차지하도록 함 */
    text-decoration: none;
    overflow: hidden;          /* 혹시 너무 길어질 경우를 대비 */
}

.sub_menu_item.active a {
  font-weight: 700;
}

/* 서브메뉴 화살표 아이콘 */
.sub_menu_icon {
  width: 7px;
  height: 11px;
}

.sub_menu_icon.opacity {
  opacity: 0.5;
}
.sub_menu_list {
    width: max-content;        /* 내부 내용 중 가장 긴 것에 맞춰 너비 확장 */
    min-width: 100%;           /* 부모 메뉴 아이템보다는 작지 않게 설정 */
}

/* ================================================================= */
/* 사이드 메뉴 */
/* ================================================================= */
/* 오버레이 배경 */
.side_menu_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 검은색 반투명 */
    z-index: 9998;
    display: none; /* 기본 숨김 */
}

/* 사이드바 본체 */
.side_menu_wrapper {
    position: fixed;
    top: 0;
    left: -300px; /* 왼쪽 밖으로 숨김 */
    width: 300px;
    height: 100%;
    background: #fff;
    box-shadow: 6px 0 20px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: left 0.3s ease; /* 슬라이드 애니메이션 */
    overflow-y: auto;
}

/* 사이드바 활성화 상태 */
.side_menu_wrapper.active {
    left: 0;
}

/* 닫기 버튼 */
.side_menu_close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

.side_menu_content {
    margin-top: 60px;
}

/* 메인 메뉴 아이템 디자인 */
.side_item_main {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    font-size: 16px;
    color: #000;
}

.border_b { border-bottom: 1px solid #EEEEEE; }

/* 활성화된 파란색 메뉴 (골프장) */
.side_item_active {
    height: 48px;
    background: #13C2DD;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    color: #fff;
    font-weight: 700;
}

/* 서브 메뉴 디자인 (진민트색 배경) */
.side_sub_group {
    background: #0f889b;
}

.side_sub_item {
    height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px 0 30px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #0fa2b9;
}


/* 서브메뉴 리스트 기본 상태: 숨김 */
.side_sub_list {
    background: #0f889b;
    max-height: 0; /* 높이를 0으로 설정 */
    overflow: hidden; /* 넘치는 내용 숨김 */
    transition: max-height 0.3s ease-out; /* 부드러운 펼침 효과 */
}

/* 활성화되었을 때 (클래스 부여 시) */
.side_item_group.active .side_sub_list {
   max-height: 2000px; /* 넉넉하게 2000px 정도로 설정 */
}

/* 활성화 시 메인 메뉴 배경색 변경 (디자인 반영) */
.side_item_group.active .side_item_main {
    background: #13C2DD;
    color: #fff;
}

.side_item_group.active .side_item_main span {
    font-weight: 700;
}

/* 화살표 회전 애니메이션 */
.arrow_icon {
    transition: transform 0.3s ease;
}

.side_item_group.active .arrow_icon {
    transform: rotate(180deg); /* 180도 회전하여 위를 향하게 함 */
}

.side_item_group.active .arrow_icon path {
    fill: #fff; /* 활성화 시 화살표 색상 흰색으로 */
}


/* ================================================================= */
/* 헤드 검색창 */
/* ================================================================= */
.search-container {
  width: 195px;
  height: 57px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 아래쪽으로 정렬 */
  gap: 4px;
  margin-top:14px;
  margin-left:10px;
}

/* 상단 라벨 텍스트 */
.search-label {
  font-size: 13px;
  font-weight: 700;
  color: #8cf0ff; /* 요청하신 하늘색 */
  margin: 0;
  text-align: left;
}

/* 입력 필드와 버튼을 감싸는 박스 */
.search-input-box {
  width: 190px;
  height: 36px;
  display: flex;
  background: #fff;
  align-items: center;
  position: relative;
}

/* 검색어 입력창 */
.search-input {
  width: calc(100% - 36px); /* 버튼 제외한 나머지 너비 */
  height: 100%;
  border: none;
  padding-left: 11px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  outline: none;
}

/* 플레이스홀더 색상 설정 */
.search-input::placeholder {
  color: #bbb;
}

/* 우측 검색 버튼 */
.search-button {
  width: 36px;
  height: 36px;
  background: #13c2dd; /* 요청하신 버튼 배경색 */
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.search-button svg {
  width: 18px;
  height: 18px;
}

.search-button:hover {
  background: #0eb0c9; /* 마우스 오버 시 약간 어둡게 */
}

/* 광고 배너 */
.banner-1 { width: 251px; height: 80px; position: absolute; left: 1137px; top: 70px; }
.banner-2 { width: 191px; height: 80px; position: absolute; left: 1408px; top: 70px; object-fit: cover; }


/* 본문 컨테이너 스타일 */
.main-content {
    width: 100%;
    /* 네비게이션 위치(185.5px) + 네비게이션 높이(약 85px)를 고려한 여백 */
    margin-top: 130px; 
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
}

.content-inner {
    width: 1280px;          /* 요청하신 너비 */
    min-height: 500px;      /* 최소 높이 (테스트용) */
    background: #ffffff;    /* 배경색 */
    padding: 20px;          /* 내부 여백 */
    box-sizing: border-box;
    /* 중앙 정렬 확인을 위해 임시 테두리 추가 */
     border: 0px solid red; 
}

/* 본문 레이아웃 1280px 중앙 정렬 */
.article-container {
    display: flex;
    justify-content: space-between; /* 950px | 40px여백 | 290px */
    width: 1280px;
    margin: 0 auto;
    position: relative;
    padding: 0px;
}

/* --- 왼쪽 영역 (950px) --- */
.left-content {
    width: 950px;
    position: relative; /* 내부 absolute 요소들의 기준 */

}

.article-item {
    position: absolute;
    width: 100%;
}

.article-thumb {
    width: 300px;
    height: 190px;
    border-radius: 10px;
    object-fit: cover;
}

.article-text {
    position: absolute;
    left: 320px;
    top: 0;
}

.cat-label {
    color: #13c2dd;
    font-size: 13px;
    font-weight: 600;
}

.article-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-top: 10px;
}

.article-desc {
    font-size: 14px;
    color: #999;
    margin-top: 15px;
}

/* 메인 배너 스타일 */
.main-banner {
    grid-column: 1 / -1; /* 3개의 열을 모두 차지 (전체 너비) */
    width: 950px;
    height: 115px;
    margin: 20px 0; /* 배너 위아래 점선과의 간격 조절 */
    position: relative;
    z-index: 5;
}

.main-banner img {
    width: 100%;
    height: 100%;
    border-radius: 10px; /* body.html의 배너광고 라운드값(10px) 적용 */
    object-fit: cover;   /* 이미지 비율 유지 */
    display: block;
}


/* --- 오른쪽 영역 (290px) --- */
.right-sidebar {
    width: 290px;
    position: relative;
}

.sidebar-widget {
    position: absolute;
    width: 100%;
}

.widget-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.widget-box {
    background: #f8f8f8;
    border: 1px solid #e2e2e2;
    padding: 20px;
    min-height: 380px;
}

/* 공통 컬러 클래스 */
.blue { color: #13c2dd; }
.gray { color: #999; }

/* 좌표 클래스 (body.html의 좌표를 여기에 정리) */
.pos-t0 { top: 0; }
.pos-t447 { top: 447px; }
.pos-t737 { top: 737px; }
.pos-t1737 { top: 1737px; }


/* 상단 3개 카드 행 컨테이너 */
.top-article-row {
    display: flex;
    justify-content: space-between;
    width: 950px;
    
    /* 하단 구분선 추가 */
    border-bottom: 1px solid #eeeeee;
    
    /* 카드와 선 사이의 간격 */
    padding-bottom: 20px; 
    
    /* 선과 그 아래 다음 콘텐츠 사이의 간격 */
    margin-bottom: 30px; 
    
    background: #fff;
	margin-top:8px;
}

/* 개별 카드 스타일 (300px * 357px) */
.article-card {
    width: 300px;
    height: 357px;
    position: relative; /* 내부 요소 absolute 배치의 기준 */
    background: #fff;
}

/* 이미지 영역 */
.thumb-wrapper {
    width: 300px;
    height: 190px;
    overflow: hidden;
    border-radius: 0px; /* 이미지 모서리 둥글게 */
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 텍스트 영역 */
.card-content {
    position: relative;
    height: calc(357px - 190px); /* 전체 높이에서 이미지 높이 제외 */
}

.card-category {
    position: absolute;
    left: 0;
    top: 17px; /* 이미지 하단으로부터의 위치 (209px - 190px) */
    font-size: 12px;
    font-weight: 600;
    color: #13c2dd;
    margin: 0;
}

.card-title {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%; /* 너비를 확보해야 말줄임이 정확히 작동합니다 */
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    margin: 0;

    /* --- 말줄임표 처리 속성 추가 --- */
    display: -webkit-box;
    -webkit-line-clamp: 2;    /* 노출할 줄 수 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* ---------------------------- */
    
    /* 높이 제한 (선택사항) */
    /* line-height(1.3) * font-size(20px) * 2줄 = 52px */
    max-height: 52px; 
}

.card-desc {
    position: absolute;
    left: 0;
    top: 104px; /* (294px - 190px) */
    font-size: 13px;
    color: #999;
    line-height: 1.5;
    margin: 0;
}

/* 하단 점(Dot) 아이콘 위치 */
.card-dots {
    position: absolute;
	top: 350px;
    left: 0;
    bottom: 0; /* 카드 높이 357px 맨 하단 */
    height: 7px;
}

.card-viewport {
  width: 100%;
  overflow: hidden;
}

.card-track {
 display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* 부모 너비를 기준으로 함 */
}

.rolling-unit { cursor: pointer;
  min-width: 100%; /* [중요] 이 부분이 있어야 한 화면에 하나씩 보임 */
    flex-shrink: 0;   /* 너비가 줄어들지 않도록 고정 */
    box-sizing: border-box;
}
/* 뷰포트 설정 */
.card-viewport {
    width: 100%;
    overflow: hidden; /* 영역 밖으로 나가는 유닛 숨김 */
}
/* 도트 스타일 */

.dot { cursor: pointer; transition: fill 0.3s; }

/*메인유트브*/
.title-container {
    display: flex;
    justify-content: space-between; /* 양 끝 정렬 */
    align-items: center;            /* 세로 중앙 정렬 핵심 */
    width: 950px;
    margin-bottom: 0px;
    /* 브라우저마다 다른 기본 여백 제거 */
    padding: 0; 
}

/* 기존 제목 스타일에서 마진 제거 (컨테이너가 마진 담당) */
.section-main-title {
    font-size: 20px;
    font-weight: 900;
    color: #333;
    margin: 0;         /* 기본 마진 제거 */
    padding: 0;        /* 기본 패딩 제거 */
    line-height: 1;    /* 줄 높이를 1로 설정하여 텍스트 자체 높이만 계산 */
    display: flex;     /* 텍스트 내부 정렬 보정 */
    align-items: center;
}

/* 화살표 컨테이너 보정 */
.more-arrow {
    display: flex;
    align-items: center; /* 화살표 내부 정렬 */
    height: 100%;        /* 부모 높이 활용 */
}

.more-arrow svg {
    display: block;      /* 하단 공백 방지 */
    /* 만약 시각적으로 화살표가 아주 미세하게 위/아래로 보인다면 아래 속성 사용 */
     margin-top: -30px;
}

/* 유튜브 섹션 전체 컨테이너 */
.youtube-article-row {
    width: 950px;
	  /* 하단 구분선 추가 */
    border-bottom: 1px solid #eeeeee;
    
    /* 카드와 선 사이의 간격 */
    padding-bottom: 0px;     
    /* 선과 그 아래 다음 콘텐츠 사이의 간격 */
    margin-bottom: 30px; 
}

/* "골프장·골프·파크골프 YouTube" 제목 */
.section-main-title {
    font-size: 20px;
    font-weight: 900; /* 매우 두꺼운 글씨 */
    color: #333;
    margin-bottom: 25px;
    text-align: left;
}

/* 카드 가로 정렬 컨테이너 */
/* 카드 가로 정렬 컨테이너 수정 */
.youtube-card-container {
    display: flex;
    justify-content: flex-start; /* 왼쪽부터 차례대로 정렬 */
    gap: 25px; /* 카드 사이의 고정 간격 (950px 너비에 맞게 조정) */
}

/* 개별 유튜브 카드 */
.youtube-card {
    width: 300px; /* (300px * 3개) + (25px * 2개) = 총 950px */
    position: relative;
}

/* 이미지 아래 텍스트 (658px 위치 보정) */
.youtube-title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-top: 11px; /* 이미지(190px)와 텍스트 사이 간격 */
    margin-bottom: 15px;
    line-height: 1.4;
    height: 40px; /* 제목 줄바꿈 시 레이아웃 유지 */
}


/* 공통: 썸네일 이미지 스타일 유지 */
.youtube-card .thumb-wrapper {
    width: 300px;
    height: 190px;
    border-radius: 0px;
    overflow: hidden;
}

.youtube-card .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 전체 섹션 컨테이너 */
.news-grid-section {
    width: 950px;
    position: relative;
    display: flex;
    flex-direction: column;
	top:10px;
	border:0px solid yellow;
	margin-bottom:30px;
}

/* 중앙 수직선 */
.vertical-divider {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #EEEEEE;
    transform: translateX(-50%);
}

/* 각 행 (상단/하단) */
.news-row {
    display: flex;
    justify-content: space-between;
    padding: 0px 0;
}

.news-row.border-top {
    border-top: 0px solid #EEEEEE;
}

/* 개별 뉴스 블록 (455px 너비) */
.news-block {
    width: 455px;
    display: flex;
    flex-direction: column;
}

.block-title {
    font-size: 17px;
    margin-bottom: 10px;
 font-weight: 500;
}

.block-title span.cyan { color: #13c2dd; font-weight: 700; }
.block-title span.navy { color: #374760; font-weight: 700; }

/* 뉴스 아이템 (이미지 + 텍스트) */
.news-item {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
}

.news-thumb {
    width: 160px;
    height: 94px;
    border-radius: 0px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 추가: 부모 요소가 flex인 경우 자식의 말줄임 작동을 위해 필요 */
    flex: 1; 
    min-width: 0; 
    overflow: hidden;
}

/* 제목: 한 줄 처리 */
.news-subject {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.3;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* 가끔 flex 아이템일 때 안 먹히면 block 강제 */
    width: 100%;    /* 너비 제한 */
}

/* 내용: 두 줄 처리 */
.news-excerpt {
    font-size: 13px;
    color: #999;
    margin: 0;
    line-height: 1.4;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* 높이를 고정하면 텍스트가 짧아도 영역을 유지해 레이아웃이 깔끔합니다 */
    height: 2.8em; 
}

/* 블록 내부 수평선 */
.horizontal-divider {
    width: 100%;
    height: 1px;
    background-color: #EEEEEE;
    margin-bottom: 10px;
}


.news-triple-grid {
    width: 950px;
    position: relative;
    margin-top: 30px;
}

/* 수직선 설정 */
.news-triple-grid .v-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #EEEEEE;
}
.news-triple-grid .line-1 { left: 310px; } /* 첫번째 열 이후 */
.news-triple-grid .line-2 { left: 640px; } /* 두번째 열 이후 */

.triple-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.small-news-block {
    width: 290px;
}

.small-block-title {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 0px;
}

.small-block-title span.cyan { color: #13c2dd; font-weight: 700; }

.header-line {
    width: 100%;
    height: 1px;
    background-color: #333333; /* 제목 밑 강조선 */
    margin: 10px 0 0 0;
}

.small-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 15px 0;
    min-height: 60px;
	
}

small-item:first-of-type {
    padding: 0px 0 15px 0;
}

.small-subject {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    margin-right: 10px;
    flex: 1;
}

.mini-thumb {
    width: 100px;
    height: 59px;
    object-fit: cover;
    border-radius: 2px;
}

.small-divider {
    width: 100%;
    height: 1px;
    background-color: #EEEEEE;
}



.tech-info-container {
  width: 950px;

  position: relative;
 
  background-color: #fff;
  overflow: hidden;
  margin-bottom:50px;
}

/* 배경 점선 가이드 (SVG 대체) */
.grid-guide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 가로 점선: 177px 간격 (155.5 + 여백 고려) */
  background-image: 
    linear-gradient(to right, #ccc 1px, transparent 1px);
  background-size: 320px 177px; /* 3열 너비와 행 높이 */
  background-position: -10px 155.5px;
  background-repeat: repeat;
  border-left: none;
  z-index: 1;
}

/* 점선 스타일을 위한 추가 처리 (Dash array 효과) */
.grid-guide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, white 2px, transparent 2px),
    linear-gradient(to bottom, white 2px, transparent 2px);
  background-size: 4px 4px; /* 점선 간격 조절 */
  z-index: 2;
}

/* 카드 배치 (Grid 사용) */
.card-wrapper {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 289px);
  column-gap: 40px; /* 310.5-289 근사치 */
  row-gap: 20px;
  padding-top: 10px;
}

.info-card {
  width: 289px;
  height: 150px;
  position: relative;
  border-bottom: 1px dashed #DDDDDD;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.card-header .title {
  font-size: 16px;
  font-weight: 600;
  color: #374760;
  margin: 0;
}

.card-header .highlight {
  color: #13c2dd;
}

.arrow-icon {
  width: 16px;
  height: 16px;
  background: #13c2dd;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-body {
  display: flex;
  gap: 16px;
  align-items: center;
}

.thumb {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
}

.main-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.2;
  margin: 0;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;

}

.bullet {
  width: 4px;
  height: 4px;
  background: #D9D9D9;
  border-radius: 50%;
  flex-shrink: 0;
}

.sub-text {
  font-size: 14px;
  color: #333;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* 전체 컨테이너 */
.six_column_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 배치 */
  width: 950px;
  margin: 0 auto;
  position: relative;
}

/* 3개의 그리드 섹션을 나누는 세로선 설정 */
.six_column_section {
  display: flex;
  flex-direction: column;
  padding: 0 30px; /* 열 사이의 간격을 위한 패딩 */
  box-sizing: border-box;
  position: relative;
}

/* 첫 번째 섹션의 왼쪽 패딩 제거 */
.six_column_section:first-child {
  padding-left: 0;
}

/* 마지막 섹션의 오른쪽 패딩 제거 */
.six_column_section:last-child {
  padding-right: 0;
}

/* [중요] 세로 구분선: 1번과 2번 섹션 오른쪽에만 세로 실선을 추가 */
.six_column_section:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%; /* 섹션 전체 높이만큼 */
  background-color: #EEEEEE; /* 구분선 색상 */
}

.six_column_item {
height:230px;
}
/* 섹션 타이틀 (상단 실선 포함) */
.six_column_title {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    font-size: 18px;     /* 제목 크기 (필요시 조정) */
    font-weight: 700;
	padding:10px 0;
	border-bottom:1px solid #000;
}

.six_title_link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 2px; /* 글자와 화살표 사이 간격 */
}

/* SVG 화살표 스타일 */
.six_arrow_svg {
    width: 26px;  /* 화살표 크기를 키우고 싶을 때 이 값을 조절하세요 */
    height: 26px;
    flex-shrink: 0;
    margin-top: 1px; /* 텍스트와의 미세한 높이 조정 */
}

/* 호버 효과 (마우스 올리면 컬러 변경) */
.six_title_link:hover .six_arrow_svg path {
    stroke: #13c2dd; /* 화살표 선 색상 변경 */
    transition: stroke 0.2s ease;
}

.six_title_link:hover {
    color: #13c2dd; /* 텍스트 색상도 같이 변경하고 싶을 때 */
}

.six_highlight {
  color: #13c2dd;
  margin-right: 2px;
}

.six_arrow {
  margin-left:10px;
  font-weight: 100;
  color: #333;
}

/* 개별 뉴스 리스트 아이템 */
.six_news_item, .six_news_item_last {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 87px;
  gap: 15px; /* 이미지와 텍스트 사이의 간격을 일정하게 유지 */
}

.six_news_item {
  border-bottom: 1px dashed #DDDDDD;
}

.six_news_item_last {
  border-bottom: 1px solid #EEEEEE;
}

/* 뉴스 텍스트 */
.six_news_text {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin: 0;
  /* padding-left 대신 오른쪽 이미지와의 간격을 위해 gap이나 padding-right 사용 */
  padding-right: 5px; 
  word-break: keep-all;
  
  /* 두 줄 제한 및 말줄임표 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  flex: 1; /* 남은 공간을 모두 차지하여 이미지를 오른쪽 끝으로 밀어냄 */
}

/* 뉴스 이미지 썸네일 */
.six_news_thumb {
  width: 100px;
  height: 59px;
  border-radius: 0px; /* 살짝 둥글게 하면 더 깔끔합니다 */
  object-fit: cover;
  flex-shrink: 0; /* 이미지가 찌그러지지 않게 고정 */
}

/* 메인 배너 (섹션 사이에 삽입할 경우) */
.six_main_banner {
  grid-column: 1 / -1; /* 3열 전체 차지 */
  width: 950px;
  height: 115px;
  margin: 20px 0;
}

.six_main_banner img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}


/* 한 줄 전체 컨테이너 */
.seven_grid_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 950px;
  margin: 0 auto;
  border-top: 1px solid #EEEEEE;    /* 기본 상단 라인 */
  border-bottom: 1px solid #EEEEEE; /* 기본 하단 라인 (중간 줄들) */
  background-color: #ffffff;
}

/* 여러 개 반복될 때 선이 겹치지 않도록 처리 */
.seven_grid_container + .seven_grid_container {
  border-top: none;
}

/* [요청사항] 가장 마지막에 위치한 컨테이너만 바닥 선을 검정색으로 설정 */
.seven_grid_container.seven_last_row {
  border-bottom: 1px solid #000000 !important;
}

/* 각 열(세로 칸) */
.seven_column {
  padding: 10px 25px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* [요청사항] 첫 번째 열의 왼쪽 패딩 0 */
.seven_column:first-child {
  padding-left: 0;
}

/* 마지막 열의 오른쪽 패딩 0 (전체 너비 균형용) */
.seven_column:last-child {
  padding-right: 0;
}

/* 칸 사이 세로 구분선 */
.seven_column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 15px;
  bottom: 15px;
  width: 1px;
  background-color: #EEEEEE;
}

/* 타이틀 영역 */
.seven_title {
  font-size: 16px;
  font-weight: 600;
  color: #374760;
  margin: 0 0 10px 0; /* 아래 컨텐츠와의 간격 확보 */
  display: flex;
  align-items: center;
  cursor: pointer; /* 클릭 가능한 느낌 부여 */
}

.seven_highlight {
  color: #13c2dd;
  margin-right: 4px;
}

/* 새로 추가된 SVG 스타일 */
.seven_arrow_svg {
  margin-left: 6px; /* 텍스트와의 간격 */
  display: inline-block;
  vertical-align: middle;
}

/* 호버 효과 (선택 사항) */
.seven_title:hover .seven_arrow_svg path {
  stroke: #13c2dd; /* 마우스 올렸을 때 화살표 색상 변경 */
}

/* [중요] 리스트와 이미지를 감싸는 컨텐츠 영역 */
.seven_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;      /* 전체 너비 고정 */
  overflow: hidden; /* 컨텐츠가 섹션을 나가는 것 방지 */
}

/* 리스트 스타일 */
.seven_list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 48px; /* li 한 줄 높이가 24px일 때 2개분 높이 (조절 필요) */
    margin-bottom: 10px;
    padding: 0;
    list-style: none;
}

.seven_list li {
	 width:190px;
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 6px;
  padding-left: 10px;
  position: relative;
  height: 20px; /* 항목 하나당 높이를 고정 */
  line-height: 20px;

  /* --- 영역 이탈 방지 핵심 설정 --- */
  display: block;           /* 또는 flex */
  white-space: nowrap;      /* 줄바꿈 방지 */
  overflow: hidden;         /* 영역 벗어나는 텍스트 숨김 */
  text-overflow: ellipsis;  /* 벗어나는 부분은 '...'으로 표시 */
  max-width: 100%;          /* 부모 요소(seven_list) 너비를 넘지 않음 */
}

.seven_list li:last-child {
  margin-bottom: 0;
}

/* 리스트 앞 점(Bullet) */
.seven_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 2px;
  height: 2px;
  background-color: #333333;
  border-radius: 50%;
}

/* 썸네일 이미지 */
.seven_thumb {
  width: 70px;
  height: 70px;
  border-radius: 26px; /* 원본의 둥근 모서리 반영 */
  object-fit: cover;
  margin-left: 15px;
  border: 1px solid #EEEEEE;
  flex-shrink: 0; /* 이미지 크기 고정 */
}

/* 전체 컨테이너 */
.main_list_container {
  display: flex;
  width: 950px;

  margin: 30px auto;
  position: relative;
  background-color: #ffffff;
  overflow: hidden; /* 영역 밖으로 나가는 요소 원천 차단 */
}

/* 각 열(Column) 설정 */
.main_list_column {
  flex: 1; /* 1:1 비율로 정확히 반씩 나눠 가짐 */
  width: 50%; /* flex와 병행하여 너비 고정 */
  padding: 0 30px; /* 좌우 충분한 여백으로 중앙선 침범 방지 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 첫 번째 열 왼쪽 여백 제거 */
.main_list_column:first-child {
  padding-left: 0;
}

/* 마지막 열 오른쪽 여백 제거 */
.main_list_column:last-child {
  padding-right: 0;
}

/* [중앙 세로 구분선] */
.main_list_column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 50%; /* 컨테이너 중앙 위치 */
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #EEEEEE;
}

/* 리스트 스타일 */
.main_list_wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%; /* 부모 너비를 넘지 않음 */
}

.main_list_wrapper li {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  line-height: 36px;
  
  /* [중요] 영역 이탈 방지 속성 */
  display: block;
  width: 100%;
  white-space: nowrap;      /* 줄바꿈 금지 */
  overflow: hidden;         /* 넘치는 부분 숨김 */
  text-overflow: ellipsis;  /* 넘치면 ... 표시 */
  word-break: break-all;    /* 단어 단위로도 잘리도록 설정 */
}

/* 호버 효과 */
.main_list_wrapper li:hover {
  text-decoration: underline;
}



/* 배너 그리드 컨테이너 */
.main_5_banner_container {
  display: grid;
  /* 5열 고정: 각 182px */
  grid-template-columns: repeat(5, 182px);
  
  /* [수정] space-between 대신 정확한 gap 계산 사용 */
  /* (950px - (182px * 5)) / 4 = 10px */
  column-gap: 10px; 
  row-gap: 10px;
  
  width: 950px;
  margin: 20px auto;
  padding: 0; /* 컨테이너 자체 패딩 0 확인 */
  box-sizing: border-box;
  
  /* 인라인 공백 제거를 위한 설정 */
  font-size: 0;
  line-height: 0;
}

/* 개별 배너 이미지 스타일 */
.main_5_banner_container img {
  width: 182px;
  height: 50px;
  border-radius: 4px;
  box-sizing: border-box;
  display: block; /* 이미지를 블록화하여 인라인 여백 원천 차단 */
  margin: 0;      /* 개별 이미지 마진 0 */
}

/* 첫 번째 이미지(1, 6, 11...) 왼쪽 여백 강제 제거 */
.main_5_banner_container img:nth-child(5n+1) {
  margin-left: 0;
}

/* 마지막 이미지(5, 10, 15...) 오른쪽 여백 강제 제거 */
.main_5_banner_container img:nth-child(5n) {
  margin-right: 0;
}

/* 이미지 처리 방식 (기존 유지) */
.main_5_banner_container img:nth-child(even) {
  object-fit: cover;
}
.main_5_banner_container img:nth-child(odd) {
  object-fit: none;
}


/**************************  메인 레프트 ***************************/
/* 전체 컨테이너 (너비 290px) */
.main_left_new_container {
  width: 290px;
  position: relative;
  font-family: 'Pretendard', sans-serif; /* 폰트 설정 */
}

/* 헤더: 최신 기사 + 플러스 아이콘 */
.main_left_new_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.main_left_new_title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.main_left_new_cyan {
  color: #13c2dd;
}

.main_left_new_more {
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* 배경 박스 영역 */
.main_left_new_box {
  width: 290px;
  height: 1100px;
  background: #f8f8f8;
  border: 1px solid #e2e2e2;
  border-top: 1px solid #333; /* 상단 포인트 라인 */
  box-sizing: border-box;
  padding: 15px 10px;
}

/* 리스트 스타일 */
.main_left_new_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main_left_new_item {
  display: flex;
  align-items: center;
  height: 36px; /* 행 간격 조절 */
}

/* 순위 숫자 스타일 */
.main_left_new_rank {
  width: 25px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #333;
  margin-right: 10px;
  flex-shrink: 0;
}

/* 1~3위 강조 컬러 */
.main_left_new_item.active .main_left_new_rank  {
  color: #13c2dd;
  font-weight: 600;
}

/* 기사 제목 텍스트 */
.main_left_new_text {
  font-size: 15px;
  
  color: #333;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 영역 넘어가면 ... 처리 */
  cursor: pointer;
}


/* 1~3위 강조 컬러 */
.main_left_new_item.active .main_left_new_text  {
  font-weight: 600;
}

.main_left_new_text:hover {
  text-decoration: underline;
}



/* 전체 컨테이너 (너비 290px) */
.main_left_recruit_container {
  width: 290px;
  position: relative;
  margin-top: 20px; /* 위 섹션(최신 기사)과의 간격 */
}

/* 헤더 영역 */
.main_left_recruit_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.main_left_recruit_title {
  font-size: 20px;
  font-weight: 700;
  color: #13c2dd; /* 구인구직 타이틀 컬러 */
  margin: 0;
}

.main_left_recruit_more {
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* 리스트 박스 배경 */
.main_left_recruit_box {
  width: 290px;
  height: 750px;
  background: #f8f8f8;
  border: 1px solid #e2e2e2;
  border-top: 1px solid #333; /* 상단 강조 라인 */
  box-sizing: border-box;
  padding: 15px 14px; /* 내부 여백 */
}

/* 리스트 스타일 */
.main_left_recruit_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main_left_recruit_item {
  display: flex;
  align-items: center;
  height: 36px; /* 행 높이 유지 */
  position: relative;
  padding-left: 12px; /* 불렛 점이 들어갈 공간 */
}

/* 불렛 점 (SVG 대신 CSS 가상요소로 구현) */
.main_left_recruit_item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 2px;
  background-color: #333;
  border-radius: 50%;
}

/* 리스트 텍스트 스타일 */
.main_left_recruit_text {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 영역 초과 시 ... 처리 */
  cursor: pointer;
}

.main_left_recruit_text:hover {
  text-decoration: underline;
}

/* 첫 번째 항목 폰트 굵기 강조 (원본 스타일 반영) */
.main_left_recruit_item:first-child .main_left_recruit_text {
  font-weight: 600;
}


/* 배너들을 감싸는 전체 컨테이너 */
.main_left_banner_container {
margin-top:20px;
  width: 290px;
  display: flex;
  flex-direction: column; /* 배너를 세로로 쌓음 */
  gap: 20px;             /* 배너 사이의 간격 (필요에 따라 조절) */
  
  position: relative;
}

/* 상단 타이틀 이미지 스타일 (원본의 56px 높이 반영) */
.main_left_banner_title_img {
  width: 290px;

  object-fit: none;      /* 원본 설정 유지 */
  display: block;
}

/* 아래로 무한히 추가될 개별 배너 이미지 스타일 */
.main_left_banner_item {
  width: 290px;
  /* 고정 높이가 필요하면 height를 지정하고, 
     이미지 원본 비율을 유지하려면 아래처럼 auto로 설정하세요. */
  height: auto; 
  object-fit: cover;     /* 영역에 꽉 차게 표시 */
  display: block;
  cursor: pointer;
  transition: filter 0.2s ease;
}

/* 호버 시 시각 효과 */
.main_left_banner_item:hover {
  filter: brightness(0.95);
}



/**************************  메인 레프트 ***************************/


/**************************  푸터 ***************************/
/* 전체 푸터 컨테이너 */
.footer_container {
  width: 100%;
  min-width: 1920px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding-bottom: 0px;
  margin-top:80px;
}

/* 상단 포인트 라인 */
.footer_top_line {
  width: 1280px;
  height: 1px;
  background-color: #333333;
}

/* 상단 슬로건 */
.footer_slogan {
	font-family: 'ElectricSafetyBold';
  font-size: 28px;

  color: #333;
  margin: 20px 0;
  text-align: center;
}

/* 회색 배경 영역 */
.footer_content_wrapper {
  width: 100%;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

/* 기본 정보 텍스트 */
.footer_info_row {
  font-size: 15px;
  line-height: 1.8;
  color: #666;
  text-align: center;
  margin-bottom: 30px;
}

.footer_info_row span {
  color: #ccc;
  font-weight: 100;
  margin: 0 5px;
}

/* 열린보도원칙 박스 */
.footer_notice_box {
  background: #eeeeee;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: 500;
  color: #af2d4b;
  text-align: center;
  margin-bottom: 30px;
}

/* 저작권 안내 */
.footer_copyright_row {
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 30px;
}

.footer_copy_text {
  color: #999;
}

/* 중간 구분선 */
.footer_menu_line {
  width: 1280px;
  height: 1px;
  background-color: #DDDDDD;
  margin-bottom: 20px;
}

/* 푸터 하단 링크 메뉴 */
.footer_menu_links {
  font-size: 14px;
  color: #333;
  text-align: center;
}

.footer_menu_links span {
  color: #ccc;
  margin: 0 10px;
}

.footer_menu_links strong {
  font-weight: 700;
}

/* TOP 버튼 */
.footer_top_btn {
  position: absolute;
  right: 135px; /* 1920px 기준 우측 여백 */
  top: 60px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.2s;
}

.footer_top_btn:hover {
  background-color: #f0f0f0;
}
/**************************  푸터 ***************************/

/* onclick 속성이 포함된 모든 요소에 포인터 커서 적용 */
[onclick] {
    cursor: pointer;
}