/* 1. 기본 초기화 및 공통 레이아웃 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Malgun Gothic', sans-serif; color: #333; line-height: 1.6; background: #fff; font-size: 13px; } /* 13px 기반으로 수정 */

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

.container { width: 1100px; margin: 0 auto; }

.logo a img { display: block; height: 80px; /* 헤더 높이에 맞춰서 적당히 조절해줘 */ width: auto;  /* 가로 세로 비율 유지 */ margin: 0; transition: transform 0.3s;}

/* 로고 위치 미세 조정이 필요할 때 */

.logo { display: flex; align-items: center; height: 100%;}

/* 마우스를 올렸을 때 살짝 커지는 효과 (선택사항) */

.logo a:hover img {transform: scale(1.05);}



/* 브레드크럼(경로) 우측 정렬 및 간격 조정 */

.breadcrumb { text-align: right; /* 우측으로 보내기 */ font-size: 11.5px; color: #999; margin-top: 10px; margin-bottom: 20px; /* 제목과의 간격 */}



/* 2. 헤더 및 네비게이션 */

header { background: #fff; border-bottom: 1px solid #eee; padding: 15px 0; position: relative; z-index: 1000; }

.header-wrap { display: flex; justify-content: space-between; align-items: flex-end; width: 1100px; margin: 0 auto; }

.logo { font-size: 24px; font-weight: bold; color: #0055a5; } /* 로고 폰트 비례 수정 */

.right-side { display: flex; flex-direction: column; align-items: flex-end; }



.util-menu { display: flex; margin-bottom: 15px; }

.util-menu li { margin-left: 15px; position: relative; }

.util-menu li:not(:first-child)::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #000; }

.util-menu li a { color: #000; font-size: 10.5px; font-family: 'Times New Roman', serif; }



.nav-menu { display: flex; }

.nav-menu > li { position: relative; margin-left: 30px; }

.nav-menu > li > a { display: block; padding-bottom: 10px; font-size: 14.5px; font-weight: 600; } /* 메인메뉴 14.5px */



.submenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); 

  min-width: 160px; background: #fff; border: 1px solid #ddd; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 10px 0;}

.submenu li a { display: block; padding: 8px 13px; font-size: 12.5px; color: #555; text-align: center; white-space: nowrap; }



/* 3. 메인 슬라이더 영역  */

.main-slider { width: 100%; height: 500px; /* 높이! */ overflow: hidden; position: relative; }

.swiper { width: 100%; height: 100%; }

/* 슬라이드 공통 설정 */

.swiper-slide { display: flex !important; flex-direction: column; align-items: center; justify-content: flex-end; /* 글자를 아래쪽으로 밀어냄 */ color: #fff; 

  text-align: center; background-size: cover; background-position: center; background-repeat: no-repeat; /* ★ 하단 여백을 60px 정도로 줄여서 더 아래로 배치 */ padding-bottom: 50px; }

/* 배경 이미지 원래 색상으로 연결 */

.slide1 { background-image: url('../img/Main_img1_Color.jpg'); }

.slide2 { background-image: url('../img/main_img2_Color.jpg'); }

/* 텍스트 노출 및 겹침 방지 */

.slide-text { width: 100%; /* 배경이 밝을 때 글자가 묻히지 않도록 그림자 농도 유지 */}

/* 배경이 밝아져도 글자가 잘 보이도록 설정 */

.slide-text h2 { font-size: 22px; font-weight: bold; margin-bottom: 12px; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8); /* 그림자 조금 더 진하게 */}

.slide-text p { font-size: 13px; margin-bottom: 25px; text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);}

.slide-btn { padding: 10px 25px; font-size: 13px; background: rgba(0, 86, 145, 0.8); /* 버튼은 우리 회사 포인트 컬러로! */ color: #fff; text-decoration: none; border-radius: 4px;

  transition: 0.3s;}

.slide-btn:hover { background: #fff; color: #003366; }

/* 하단 3단 섹션 정리 */

.main-bottom { padding: 60px 0; border-top: 1px solid #eee; background: #fff; }

.bottom-flex { display: flex; justify-content: space-between; gap: 30px; }

.bottom-box { width: 32%; }

.box-header {     display: flex;     justify-content: space-between;     align-items: flex-end;     border-bottom: 2px solid #333;     padding-bottom: 8px;     margin-bottom: 15px; }



/* 4. 서브 페이지 공통 (사이드바) */

/* 공통 배너 스타일 */

.sub-visual { width: 100%; height: 200px; background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; flex-direction: column; /* 글자를 위아래로 배치 (세로 정렬) */

  align-items: center;    /* 가로 중앙 정렬 */ justify-content: center; /* 세로 중앙 정렬 */ color: #fff;}

/* "회사소개" 큰 글자 */

.sub-visual h2 { font-size: 30px; font-weight: bold; color: #ffffff; margin: 0 0 10px 0; /* 아래쪽 간격만 10px 줌 */text-shadow: 1px 1px 4px rgba(0,0,0,0.3); }

/* "지경을 넘어선..." 작은 글자 */

.sub-visual p { font-size: 16px; color: #ffffff; margin: 0; /* 기본 여백 제거 */ text-shadow: 1px 1px 3px rgba(0,0,0,0.3);}

/* 페이지별 배경 이미지 설정 */

.bg-catalog { background-image: url('../img/Sub_img1.jpg'); } /* 회사소개 */

.bg-company { background-image: url('../img/Sub_img2.jpg'); } /* 제품소개 */

.bg-contact { background-image: url('../img/Sub_img3.jpg'); } /* 채용정보 */

.bg-equip { background-image: url('../img/Sub_img4.jpg'); } /* 회사소개 */

.bg-notice { background-image: url('../img/Sub_img5.jpg'); } /* 제품소개 */

.bg-products { background-image: url('../img/Sub_img6.jpg'); } /* 채용정보 */

.bg-recruit { background-image: url('../img/Sub_img7.jpg'); } /* 회사소개 */

.bg-sitemap { background-image: url('../img/Sub_img8.jpg'); } /* 제품소개 */

.bg-supply { background-image: url('../img/Sub_img9.jpg'); } /* 채용정보 */



.sub-page-container { display: flex; justify-content: space-between; /* 양 끝으로 밀기 */ gap: 50px; /* [핵심] 사이드바와 본문 사이의 거리를 50px만큼 확보 */ padding: 50px 0 100px 0;}

.side-menu { width: 200px; flex-shrink: 0; }

.side-menu h2 { background: #0055a5; color: #fff; padding: 25px 20px; text-align: center; font-size: 15px; }

.side-menu ul { border: 1px solid #ddd; border-top: none; }

.side-menu ul li a { display: block; padding: 15px 20px; border-top: 1px solid #eee; color: #666; background: #fff; font-size: 13px; }

.side-menu ul li.active a { background: #f4f7fb; color: #0055a5; font-weight: bold; padding-left: 30px; }

.content-area { flex: 1; /* 남은 공간을 유연하게 채움 */ min-width: 0; /* 플렉스 박스 안에서 본문이 튀어나가는 것 방지 */}

/* 기본적으로 서브메뉴는 숨김 */

.side-menu .sub-menu { display: none;}

/* active 클래스가 있을 때만 보임 */

.side-menu li.active .sub-menu { display: block !important;}



/* 5. 페이지별 특화 (인사말, 조직도, 연혁) */

.ceo-title-wrap h3 { font-size: 19px !important; /* 폰트를 시원하게 키움 */ color: #333; font-weight: bold; letter-spacing: 0px; /* 글자 간격을 좁혀서 더 세련되게 */ margin: 0; padding-bottom: 15px;}

/* 인사말 레이아웃 보정 */

.ceo-flex-layout { display: flex; gap: 40px; /* 사진과 본문 텍스트 사이 간격 */ margin-top: 20px;}

.ceo-photo-area { width: 250px; flex-shrink: 0;}

.ceo-photo-area img { width: 100%; border-radius: 5px; border: 1px solid #eee; box-shadow: 10px 10px 20px rgba(0,0,0,0.05);}

.ceo-text-area { flex: 1; }

/* 기본사상 이미지 중앙 정렬 */

.ceo-philosophy-image { width: 100%; text-align: center; /* 가로 중앙 정렬 */ margin-top: 50px;   /* 인사말 텍스트와 이미지 사이 간격 */ padding: 20px 0;}

.ceo-philosophy-image img { max-width: 100%;    /* 화면보다 커지지 않게 조절 */ height: auto; border-radius: 8px; /* 테두리를 살짝 둥글게 (선택사항) */}



/* 강조 문구 스타일 */

.greeting-header { font-size: 20px; color: #0055a5; font-weight: bold; line-height: 1.4; margin-bottom: 30px; border-left: 5px solid #0055a5; padding-left: 20px;} /* 18->20 상향 */

.ceo-text-area p { font-size: 13px; color: #555; line-height: 1.9; margin-bottom: 20px; text-align: justify; /* 양쪽 정렬로 깔끔하게 */} /* 12->13 상향 */

.ceo-signature { margin-top: 50px; text-align: right; font-size: 15px; color: #333;} /* 14->15 상향 */

.ceo-signature strong { font-size: 20px; color: #000; margin-left: 10px;} /* 18->20 상향 */

.info-table { width: 100%; border-top: 2px solid #333; border-collapse: collapse; }

.info-table td, .info-table th { padding: 12px 20px; border-bottom: 1px solid #eee; font-size: 13px; } /* 12->13 상향 */



/* 조직도 컨테이너 및 텍스트 정렬 복구 */

.org-container { padding: 40px 0; overflow-x: hidden; /* 가로 스크롤 강제 차단 */ text-align: center; width: 100%;}

.org-chart-wrap { display: inline-block; width: 100%; max-width: 820px; /* 본문 영역 안에서만 움직이게 고정 */}

/* 부서 7개가 한 줄에 쏙 들어오도록 Flex 설정 */

.dept-container { display: flex !important; justify-content: space-between; /* 부서 사이 간격을 균등하게 배분 */ padding: 0; margin: 0; list-style: none;}

.dept-item { position: relative; padding: 30px 2px 0 2px; /* 좌우 여백을 최소화해서 공간 확보 */ flex: 1; /* 부서 박스들이 너비를 똑같이 나눠 가짐 */}

.org-box { display: block; margin: 0 auto; padding: 10px 0; color: #fff; font-weight: bold; border-radius: 4px; font-size: 11.5px; /* 박스 안 글자 겹침 방지를 위해 11.5px로 최적화 */

    width: 96%; /* 박스 너비를 유연하게 */ min-width: 80px; /* 글자 가독성을 위한 최소 너비 */ text-align: center;}

/* 상단 이사회/사장 박스 스타일 */

.org-box.blue { background: #0070c0; width: 140px; }

.org-box.green { background: #7db300; width: 140px; }

.org-box.orange { background: #f79646; }

/* 연결 선 스타일 유지 */

.line-v { width: 1px; height: 30px; background-color: #ccc; margin: 0 auto; }

.dept-item::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 30px; background-color: #ccc; }

.dept-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #ccc; }

.dept-item.first::after { width: 50%; left: 50%; }

.dept-item.last::after { width: 50%; left: 0; }



/* 사이드바 아코디언 메뉴 스타일 */

.side-menu ul li.has-sub ul.sub-menu { display: none; /* 평소엔 숨김 */ background: #f9f9f9; padding: 5px 0; border-top: 1px solid #eee;}

.side-menu ul li.has-sub.active ul.sub-menu { display: block; /* active 클래스가 붙으면 보임 */}

.side-menu ul li.has-sub ul.sub-menu li a { padding: 10px 20px 10px 35px; /* 안으로 살짝 들여쓰기 */ font-size: 12px; color: #777; border: none;} /* 11.5->12 상향 */

.side-menu ul li.has-sub ul.sub-menu li a:hover { color: #0055a5; background: #f0f4f9;}

/* 기본방침 하위 메뉴 중 'on' 클래스가 붙은 것 강조 */

.side-menu .sub-menu li.on a { color: #0070c0 !important; /* 파란색! */ font-weight: bold !important;}



/* 화살표 회전 효과 */

.side-menu .arrow { float: right; transition: transform 0.3s;}

.side-menu li.has-sub.active .arrow { transform: rotate(180deg);}



/* 연혁 페이지 전용 레이아웃 보정 */

.history-container-wrap { padding-left: 50px; /* 사이드바와의 간격을 지혜롭게 확보 */}



/* 타임라인 스타일 



[Image of a corporate timeline chart]

 */

.history-content { position: relative; padding-left: 50px; border-left: 2px solid #0055a5; margin-left: 10px;}

.history-year-group { margin-bottom: 60px; position: relative; }

.year-label { font-size: 20px; font-weight: bold; color: #0055a5; margin-bottom: 25px; position: relative;} /* 18->20 상향 */



/* 타임라인 위 포인트 점 */

.year-label::before { content: ""; position: absolute; left: -57px; top: 8px; width: 12px; height: 12px; background: #fff; border: 3px solid #0055a5; border-radius: 50%;}

.history-list { list-style: none; padding: 0; }

.history-list li { font-size: 13px; color: #444; margin-bottom: 12px; display: flex;} /* 12->13 상향 */

.history-list li span { font-weight: bold; color: #333; min-width: 100px; display: inline-block; font-size: 13px;}



/* 수상내역 그리드 */

.awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 30px; }

.award-item { padding: 15px; background: #fff; border: 1px solid #ddd; display: flex; align-items: center; border-radius: 4px; }

.award-icon { font-size: 22px; margin-right: 12px; } /* 20->22 상향 */

.award-title { font-size: 13px; font-weight: bold; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 12->13 상향 */

.award-date { font-size: 11.5px; color: #0055a5; display: block; }

.award-desc { font-size: 11.5px; color: #888; margin: 0; } /* 11->11.5 상향 */



/* SHINKO Way 스타일 정의  */

.shinko-way-container { padding: 20px; line-height: 1.8; color: #444; }

.sub-title-blue { color: #0070c0; border-left: 5px solid #0070c0; padding-left: 10px; margin-bottom: 20px; font-size: 13px; }

.section-title { font-size: 16px; color: #0055a5; margin-top: 40px; border-bottom: 1px solid #ddd; padding-bottom: 5px; } /* 14->16 상향 */

/* 체계도 디자인 */

.structure-chart { border: 2px dashed #333; margin: 20px 0; background: #fff; }

.chart-header { text-align: center; font-size: 20px; font-weight: bold; padding: 10px; letter-spacing: 5px; } /* 18->20 상향 */

.chart-row { display: flex; border-top: 1px solid #ddd; }

.row-label { width: 30%; padding: 15px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 13px; }

.row-desc { width: 70%; padding: 15px; background: #f9f9f9; font-size: 13px; border-left: 1px solid #ddd; } /* 12->13 상향 */

/* 색상 정의 */

.row-label.blue { background: #d9eaf7; }

.row-label.light-blue { background: #ebf1de; }

.row-label.gray { background: #e5e5e5; }

.row-label.dark-gray { background: #d0d0d0; }

.chart-footer { background: #fbcad7; text-align: center; padding: 10px; font-weight: bold; font-size: 18px; } /* 16->18 상향 */

/* 태그 버튼 스타일 */

.tag-group { margin: 15px 0; display: flex; align-items: center; }

.tag-title { width: 100px; font-weight: bold; color: #0070c0; font-size: 13px; }

.tags span { background: #888; color: #fff; padding: 3px 12px; margin-right: 5px; border-radius: 3px; font-size: 12px; } /* 11->12 상향 */

/* 리스트 스타일 */

.list-detail h4 { color: #0070c0; margin-top: 20px; font-size: 14px; }

.list-detail ul { list-style: none; padding-left: 15px; }

.list-detail li { font-size: 13px; }



/* 기업이념 스타일 */

.philosophy-container { padding: 40px 20px; max-width: 1000px; margin: 0 auto; line-height: 1.8; }

.main-quote { font-size: 22px; color: #333; text-align: center; margin-bottom: 50px; } /* 20->22 상향 */

.main-quote span { color: #0070c0; font-weight: bold; }

.section-title-blue { color: #0070c0; font-size: 18px; border-bottom: 2px solid #0070c0;  padding-bottom: 10px; margin: 40px 0 20px; } /* 16->18 상향 */

/* 기업이념 항목 스타일 */

.concept-list dt { font-weight: bold; color: #0055a5; font-size: 14px; margin-top: 20px; } /* 13->14 상향 */

.concept-list dt::before { content: "▶ "; font-size: 13px; }

.concept-list dd { margin-left: 20px; color: #555; margin-bottom: 10px; font-size: 13px; }

/* 창업자 정신 항목 스타일 */

.spirit-item h4 { font-size: 16px; color: #333; margin: 30px 0 10px; padding-left: 10px; border-left: 4px solid #8bc34a; } /* 14->16 상향 */

.ceo-quote { background: #f9f9f9; padding: 15px; border-radius: 5px; font-style: italic; color: #777; margin: 10px 0; font-size: 13px; }



/* 이미지 박스 */

.philosophy-image-box { text-align: center; margin: 30px 0; }

.philosophy-image-box img { max-width: 100%; height: auto; border: 1px solid #ddd; }

.image-caption { font-size: 11.5px; color: #888; margin-top: 10px; } /* 13->11.5 상향 */



/* 기업지침 박스 */

.policy-container { padding: 40px 20px; max-width: 1000px; margin: 0 auto; line-height: 1.8; color: #444; }

.main-quote { font-size: 20px; color: #333; text-align: center; margin-bottom: 60px; word-break: keep-all; } /* 18->20 상향 */

.main-quote span { color: #0070c0; font-weight: bold; }

.section-title-blue {  color: #0070c0; font-size: 20px; border-bottom: 2px solid #0070c0;  padding-bottom: 15px; margin: 50px 0 30px; } /* 18->20 상향 */



/* 개별 지침 항목 스타일 */

.policy-item { margin-bottom: 40px; }

.policy-item h4 {  font-size: 15px; color: #0055a5; margin-bottom: 15px; display: flex; align-items: center; } /* 14->15 상향 */

.policy-item h4::before { content: ">"; margin-right: 10px; font-weight: bold; }

.policy-item p { margin-bottom: 12px; font-size: 13px; text-align: justify; } /* 12->13 상향 */



/* 리스트 스타일 */

.policy-item ul { list-style: none; padding-left: 20px; margin: 15px 0; }

.policy-item li { position: relative; padding-left: 15px; margin-bottom: 8px; font-size: 12.5px; color: #666; } /* 11.5->12.5 상향 */

.policy-item li::before { content: "-"; position: absolute; left: 0; color: #0070c0; font-weight: bold; }



/* 행동지침 */

.action-container { padding: 40px 20px; max-width: 1000px; margin: 0 auto; line-height: 1.8; color: #444; }

.action-top .main-quote { font-size: 20px; color: #333; text-align: center; margin-bottom: 60px; word-break: keep-all; } /* 18->20 상향 */

.action-top .main-quote span { color: #0070c0; font-weight: bold; }

.section-title-blue { color: #0070c0; font-size: 20px; border-bottom: 2px solid #0070c0; padding-bottom: 15px; margin: 50px 0 30px; } /* 18->20 상향 */



/* 행동지침 개별 항목 */

.action-item { margin-bottom: 45px; }

.action-item h4 { font-size: 15px; color: #0055a5; margin-bottom: 15px; display: flex; align-items: flex-start; font-weight: bold;} /* 14->15 상향 */

.action-item h4::before { content: ">"; margin-right: 10px; color: #0055a5; }

.action-item p { margin-bottom: 15px; font-size: 13px; text-align: justify; color: #555; } /* 12->13 상향 */

/* 특정 단어 강조 (이미지 참고) */

.action-item p strong { color: #333; font-weight: bold; }



/* 품질방침 컨테이너 */

.policy-container { padding: 50px 30px; max-width: 900px; margin: 0 auto; text-align: center; /* 이미지처럼 중앙 정렬 */ line-height: 1.8;}

/* Global No.1 타이틀 */

.global-title { font-size: 26px; color: #00a0e9; /* 이미지의 밝은 파란색 */ font-weight: bold; margin-bottom: 40px; font-family: 'Arial', sans-serif;} /* 24->26 상향 */

/* 메인 메시지 박스 */

.main-message { font-size: 15px; color: #333; margin-bottom: 60px; word-break: keep-all;} /* 14->15 상향 */

.sub-message { margin-top: 25px; font-weight: 500;}

/* 행동 지침 영역 */

.action-title { font-size: 20px; color: #000; margin-bottom: 30px; font-weight: bold;} /* 18->20 상향 */

.action-list { list-style: none; padding: 50px;  /* 목록을 중앙으로 모으기 위함 */ text-align: left; /* 숫자는 왼쪽 정렬 */}

.action-list li { font-size: 15px; color: #333; margin-bottom: 15px; font-weight: 500;} /* 14->15 상향 */

/* 하단 추가 설명 문구 */

.policy-footer { margin-top: 50px; padding-top: 30px; border-top: 1px dotted #ccc; /* 구분선 살짝 추가 */ font-size: 13px; color: #444; word-break: keep-all;} /* 12->13 상향 */



/* 마우스를 올릴 셀의 기준점 설정 */

.hover-cell { position: relative; /* 자식인 이미지 박스의 기준이 됨 */ }

/* 처음에 이미지는 숨겨둠 */

.hover-image-box { display: none; position: absolute; top: -150px; /* 마우스 올렸을 때 사진이 나타날 위쪽 위치 (조절 가능) */ left: 100px; /* 텍스트 옆으로 나타날 위치 (조절 가능) */

    z-index: 100; width: 300px; /* 사진 박스 크기 */  border: 3px solid #000; box-shadow: 5px 5px 15px rgba(0,0,0,0.3); background: #fff;}

.hover-image-box img { width: 100%; display: block;}

/* 마우스를 올렸을 때 이미지 박스 노출 */

.hover-cell:hover .hover-image-box { display: block;}



/* 자재조달 메뉴 만들기 */

.procurement-tabs { display: flex; justify-content: center; gap: 10px; margin: 30px 0;}

.tab-btn { flex: 1; padding: 15px; background: #999; /* 기본 회색 */ color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: bold; border-radius: 5px; position: relative;} /* 13->14 상향 */

/* 2. 자재조달 컨테이너 안의 p 태그만 골라서 조절 (추천!) */

.procurement-container p { font-size: 12.5px !important; /* 11.5->12.5 상향 */ margin-bottom: 15px;          /* 문단 사이 간격 */ word-break: keep-all;         /* 한글 단어가 잘리지 않게 설정 */}

/* 추가: 주석(※)이나 세부 설명 텍스트는 더 작게 설정 */

.procurement-container .note, .procurement-container .guide-desc { font-size: 11px !important; color: #666 !important;} /* 10.5->11 상향 */

/* 활성화된 버튼 (이미지 속 파란색 효과) */

.tab-btn.active { background: #0070c0; /* 이미지의 파란색 */}

/* 활성화된 버튼 하단 화살표 */

.tab-btn.active::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent;

    border-top: 10px solid #0070c0;}

.tab-btn span { font-size: 11.5px; font-weight: normal; } /* 11->11.5 상향 */

.tab-content { display: none; padding: 20px; border: 1px solid #ddd; margin-top: 20px; }

.content-title { color: #0070c0; margin-bottom: 20px; font-size: 15px; } /* 14->15 상향 */

.policy-item h4 { color: #0055a5; margin: 20px 0 5px; font-size: 14px; } /* 13->14 상향 */

.guide-list { list-style: none; padding: 0; }

.guide-list li { margin-bottom: 15px; font-size: 13px; } /* 12->13 상향 */

.guide-list span { display: block; padding-left: 15px; color: #666; font-size: 12.5px; } /* 11.5->12.5 상향 */



/* RBA 다운로드 링크 */

.rba-links-area { margin-top: 40px; padding-top: 20px; border-top: 1px dashed #ccc; text-align: left;}

/* 텍스트 링크 스타일 */

.rba-text-links { list-style: none; padding: 0; margin-bottom: 20px;}

.rba-text-links li { margin-bottom: 10px;}

.rba-text-links a { color: #0055a5; text-decoration: none; font-size: 13px; display: flex; align-items: center; gap: 5px;} /* 12->13 상향 */

.rba-text-links a:hover { text-decoration: underline;}

/* RBA 교육결과 보고서 파란색 버튼 */

.rba-result-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 25px; background: linear-gradient(to bottom, #1e73be 0%, #0055a5 100%); /* 파란색 그라데이션 */

    color: #fff !important; text-decoration: none; font-weight: bold; border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,0.3); border: 1px solid #004488; font-size: 13px;} /* 12->13 상향 */

.rba-result-btn:hover { background: #004488;}

.inline-icon { width: 18px; height: auto; vertical-align: middle;}



/* 찾아오는 길 */

.map-container { position: relative; width: 100%; max-width: 800px; margin: 0 auto; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; }

.map-controls { position: absolute; top: 15px; right: 15px; z-index: 10; display: flex; gap: 5px; }

.btn-zoom-in { background: #337ab7; color: #fff; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: bold; } /* 11->12 상향 */

.btn-zoom-out { background: #8bc34a; color: #fff; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: bold; } /* 11->12 상향 */

.zoom-steps { display: flex; gap: 5px; margin-left: 10px; }

.step { width: 25px; height: 25px; background: #eee; text-align: center; line-height: 25px; border-radius: 3px; font-size: 12px; color: #999; } /* 11->12 상향 */

.step.active { background: #ff8a00; color: #fff; font-weight: bold; }

.map-image-wrap img { width: 100%; height: auto; display: block; }

.location-info-container { margin-top: 40px; border-top: 1px solid #eee; }

.info-row { display: flex; padding: 25px 0; border-bottom: 1px solid #f2f2f2; align-items: flex-start;}

.info-icon { width: 80px; flex-shrink: 0; text-align: center; }

.info-icon img { width: 60px; height: auto; }

.info-content { flex-grow: 1; padding-left: 20px; }

.info-content h3 { font-size: 16px; color: #0055a5; margin-bottom: 10px; font-weight: bold; } /* 14->16 상향 */

.info-content p { font-size: 13px; line-height: 1.6; color: #666; margin-bottom: 5px; } /* 12->13 상향 */

.info-content .sub-text { padding-left: 10px; font-size: 12px; color: #888; } /* 11->12 상향 */



/* 사이트맵 컨테이너 */

.sitemap-container { padding: 60px 0; max-width: 1200px; margin: 0 auto; }

.sitemap-title-wrap { text-align: center; margin-bottom: 50px; }

.sitemap-title-wrap h2 { font-size: 22px; color: #333; margin-bottom: 10px; } /* 20->22 상향 */

.sitemap-title-wrap p { color: #666; font-size: 13px; } /* 12->13 상향 */

/* 공통 아이템 스타일 */

.sitemap-item h3 { font-size: 14px; color: #0070c0; border-bottom: 2px solid #0070c0; padding-bottom: 12px; margin-bottom: 20px; font-weight: bold;} /* 13->14 상향 */

.sitemap-item h3 a { color: #0070c0; text-decoration: none; }

.sitemap-sub { list-style: none; padding: 0; }

.sitemap-sub li { margin-bottom: 12px; }

.sitemap-sub li a { color: #666; text-decoration: none; font-size: 13px; transition: 0.2s; display: block; white-space: nowrap; } /* 11.5->13 상향 */

.sitemap-sub li a:hover { color: #0070c0; text-decoration: underline; }

/* [상단 섹션] 3열 배치 */

.sitemap-upper-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; margin-bottom: 60px;}

/* [하단 섹션] 2열 배치 */

.sitemap-lower-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; padding-top: 40px; border-top: 1px solid #eee; }



/* 공지사항 컨테이너 */

.notice-container { padding: 40px 0; max-width: 1000px; margin: 0 auto; font-family: 'Malgun Gothic', sans-serif; }

.notice-header { margin-bottom: 40px; }

.notice-header h3 { font-size: 22px; color: #333; font-weight: bold; margin-bottom: 10px; text-align: left; } /* 20->22 상향 */

.notice-header p { font-size: 13px; color: #666; text-align: left; } /* 11.5->13 상향 */



/* 아코디언 박스 */

.notice-accordion { border-top: 2px solid #0070c0; border-bottom: 1px solid #ddd; }

.accordion-item { border-top: 1px solid #eee; }

.accordion-item:first-child { border-top: none; }

.accordion-header { display: flex; padding: 15px 15px; cursor: pointer; align-items: center; background: #fff;}

.accordion-header:hover { background: #fcfcfc; }

.accordion-header .date { width: 120px; color: #999; font-size: 12px; } /* 11->12 상향 */

.accordion-header .subject { flex: 1; font-size: 14px; color: #333; font-weight: normal; } /* 13->14 상향 */

.accordion-header .arrow { color: #0070c0; font-size: 12px; transition: 0.3s; }

.accordion-content { display: none; overflow: hidden; background: #fff;}

.inner-text { padding: 25px 30px 40px 60px; line-height: 1.7; color: #444; font-size: 13px; text-align: left; word-break: keep-all; } /* 12->13 상향 */

.accordion-item.active .accordion-content { display: block; }

.accordion-item.active .arrow { transform: rotate(180deg); }



/* 제품 상세 페이지 (Glass-to-Metal Seal) */

.product-detail-wrap { padding: 20px 0; }

.p-title { font-size: 22px; color: #005691; border-bottom: 2px solid #005691; padding-bottom: 10px; margin-bottom: 30px; } /* 20->22 상향 */

.p-section { margin-bottom: 40px; }

.p-section h3 { font-size: 15px; color: #005691; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #005691; } /* 14->15 상향 */

.p-section h4 { font-size: 13px; color: #333; margin-bottom: 10px; } /* 12->13 상향 */

.p-list { list-style: none; padding-left: 5px; }

.p-list > li { position: relative; padding-left: 15px; margin-bottom: 8px; line-height: 1.6; color: #555; font-size: 13px; } /* 12->13 상향 */

.p-list > li::before { content: '·'; position: absolute; left: 0; font-weight: bold; }

.sub-list { list-style: none; padding-left: 10px; margin-top: 5px; }

.sub-list li { color: #666; font-size: 12px; margin-bottom: 3px; } /* 11->12 상향 */



/* 구조 섹션 이미지 & 표 배치 */

.spec-item { margin-bottom: 30px; border-bottom: 1px dashed #ccc; padding-bottom: 20px; }

.spec-item:last-child { border-bottom: none; }

.spec-flex { display: flex; align-items: flex-start; gap: 20px; margin-top: 15px; }

.spec-flex.reverse { flex-direction: row-reverse; } /* 이미지와 표 위치 반전 */

.spec-img { flex: 0 0 40%; border: 1px solid #ddd; padding: 10px; background: #f9f9f9; text-align: center; }

.spec-img img { max-width: 100%; height: auto; }

.spec-table { flex: 1; border-collapse: collapse; width: 100%; }

.spec-table th, .spec-table td { border: 1px solid #bbb; padding: 10px; text-align: center; font-size: 12.5px; } /* 11.5->12.5 상향 */

.spec-table th { background: #f4f4f4; color: #005691; }

.table-note { font-size: 12px; color: #777; margin-top: 10px; } /* 11->12 상향 */



/* 제품 상단 3열 레이아웃 스타일 */

.product-top-layout { display: flex; justify-content: space-between; align-items: stretch; /* 높이를 동일하게 맞춤 */ gap: 10px; margin-bottom: 40px;}

.top-visual-item { flex: 1; text-align: center;}

.top-visual-item .visual-box { border: 1px solid #ccc; border-radius: 5px; overflow: hidden; background: #fff; margin-bottom: 8px;}

.top-visual-item .visual-box img { width: 100%; display: block;}

/* 중앙 Application 박스 스타일 */

.top-application-item { flex: 1.2; /* 설명을 조금 더 넓게 */ background: #f8fafd; /* 연한 푸른빛 배경 */  border: 1px solid #e1e8f2;  padding: 20px;  display: flex;

      flex-direction: column; justify-content: center;}

.top-application-item h3 { font-size: 15px; color: #005691;margin-bottom: 15px;  font-weight: bold;} /* 14->15 상향 */



/* 크게보기 버튼 스타일 */

.btn-zoom-view { display: inline-block; padding: 3px 12px; font-size: 12px; color: #fff; background: #4a86ad; border: none; border-radius: 2px; cursor: pointer;} /* 11->12 상향 */





/* --- 제품 상세 페이지 전용 (중복 방지용 네이밍) --- */

.prod-page-container { padding: 10px 0; }

.prod-main-title { font-size: 22px; color: #005691; border-bottom: 2px solid #005691; padding-bottom: 10px; margin-bottom: 30px; } /* 20->22 상향 */

/* --- 제품 상세 상단 레이아웃 (이격 제로 & 폰트 최적화) --- */

.prod-top-flex { display: flex; justify-content: space-between; align-items: stretch; /* 자식 요소 높이 강제 일치 */ gap: 15px; /* 박스 사이 간격 */ margin-bottom: 40px; }

/* 이미지 컬럼 */

.prod-visual-column { flex: 1; display: flex; flex-direction: column; }

.prod-img-frame { flex: 1; border: 1px solid #ddd; background: #fff; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; 

    padding: 0; /* 내부 이격 제거 */ overflow: hidden;}

.prod-img-frame img { width: 100%; /* 프레임에 꽉 차게 */ height: auto;  display: block; }

/* 중앙 Application 컬럼 (폰트 및 간격 수정) */

.prod-info-column { flex: 1.2; display: flex; flex-direction: column; }

.prod-app-box { flex: 1; background: #f8fafd; border: 1px solid #e1e8f2; padding: 10px 15px; /* 박스 내부 여백 축소 */ display: flex; flex-direction: column; 

    justify-content: center; }

.prod-app-box h3 { font-size: 15px; /* 14px -> 15px 상향 */ color: #005691;  margin-bottom: 10px; font-weight: bold;  border-bottom: 1px solid #dce4ef;

    padding-bottom: 5px;}

.prod-desc-list li { position: relative; padding-left: 12px; margin-bottom: 5px; font-size: 12.5px; /* 11.5px -> 12.5px 상향 */ color: #666; line-height: 1.5; }

.prod-desc-list li::before { content: '·'; position: absolute; left: 0; font-weight: bold; }



/* 표 스타일 */

.prod-spec-section { margin-bottom: 40px; }

.prod-spec-section h3 { font-size: 16px; color: #333; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #005691; } /* 15->16 상향 */

.prod-unit-label { text-align: right; font-size: 12px; color: #666; margin-bottom: 5px; } /* 11->12 상향 */

.prod-data-table { width: 100%; border-collapse: collapse; }

.prod-data-table.mb-space { margin-bottom: 25px; }

.prod-data-table th, .prod-data-table td { border: 1px solid #bbb; padding: 10px; text-align: center; font-size: 12.5px; } /* 11.5->12.5 상향 */

.prod-data-table th { background: #f4f7f9; color: #333; }

/* 도면 영역 */

.prod-drawing-box { border: 1px solid #eee; padding: 30px; text-align: center; background: #fff; }

.prod-drawing-footer { margin-top: 15px; display: flex; justify-content: center; align-items: center; gap: 10px; }

/* 크게보기 버튼 */

.prod-zoom-btn { background: #4a86ad; color: #fff; border: none; padding: 5px 15px; cursor: pointer; border-radius: 2px; font-size: 12px; align-self: center;} /* 11->12 상향 */

.prod-zoom-btn.btn-sm { padding: 2px 8px; font-size: 12px; }



/* 슬라이더 필수 레이아웃 */

.slider-container { position: relative; overflow: hidden; width: 100%; }

.slider-wrapper { display: flex; transition: transform 0.5s ease-in-out; width: 100%; }

.slide-item { min-width: 100%; box-sizing: border-box; }

.slide-item img { width: 100%; display: block; }

/* Core Technology 페이드 슬라이더 스타일 */

.tech-slider-section { width: 100%; position: relative; height: 600px; /* 은지가 사용하는 이미지 높이에 맞게 조절 */ background: #fff;}

.fade-wrapper { position: relative; width: 100%; min-height: 500px; /* 이미지가 안 보인다면 이 높이를 더 키워봐! */}

.fade-item { position: absolute; top: 0; left: 0;  width: 100%;  opacity: 0; /* 평소엔 숨김 */  transition: opacity 1.0s ease-in-out; /* 페이드 인/아웃 효과 */}

.fade-item.active { opacity: 1; /* 이것만 보임 */ z-index: 5;}

.fade-item img { width: 100%; height: 100%; object-fit: cover; /* 이미지가 찌그러지지 않게 꽉 채움 */}



/* 사이드 배너 공통 */

.side-banner-wrap { margin-top: 30px; padding: 0 0px; }

.side-banner { position: relative; width: 100%; border: 1px solid #ddd; margin-bottom: 20px; background-size: cover; background-position: center;

    padding: 15px; box-sizing: border-box;}

/* Core Technology 배너 배경*/

/*.side-banner.tech { background-image: url('../img/side_banner_tech.jpg'); min-height: 120px; }*/

.side-banner.tech h4 { color: #00aeef; font-size: 15px; margin-bottom: 5px; font-weight: bold; } /* 14->15 상향 */

.side-banner.tech p { font-size: 11.5px; color: #666; line-height: 1.4; } /* 10.5->11.5 상향 */

.side-banner.tech ul { list-style: none; padding: 0; }

.side-banner.tech ul li { font-size: 11.5px; color: #333; line-height: 1.3; font-weight: bold; }

/* e-Catalogue 배너 배경 */

/*.side-banner.catelog { background-image: url('../img/side_banner_catelog.jpg'); min-height: 120px; background-color: #fff; }*/

.side-banner.catelog h4 { color: #00aeef; font-size: 15px; margin-bottom: 5px; font-weight: bold; } /* 14->15 상향 */

.side-banner.catelog p { font-size: 11.5px; color: #666; line-height: 1.4; }

/* 버튼 스타일 (이미지 35bba7 기준) */

.btn-detail, .btn-catalog { display: inline-block; position: absolute; bottom: 10px; right: 10px; padding: 3px 10px; font-size: 11.5px; color: #fff; text-decoration: none;

    border-radius: 2px;}

.btn-detail { background: #4a86ad; } /* 자세히보기 버튼 색 */

.btn-catalog { background: #5a87b5; } /* 카탈로그보기 버튼 색 */

.btn-detail:hover, .btn-catalog:hover { opacity: 0.9; }



/* 기본 사상 카드 스타일-----영문 */

.philosophy-card-container { padding: 60px 20px; background-color: #ffffff; /* 아주 연한 푸른빛 배경 */ display: flex; justify-content: center;}

.philosophy-card { background: #ffffff; width: 100%; max-width: 850px; padding: 80px 40px;  border-radius: 20px; box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08); /* 부드럽고 깊은 그림자 */

    text-align: center;}

.inner-blue-box { border: 2px solid #005691; padding: 50px 30px; position: relative; transition: all 0.3s ease;}

.inner-blue-box h4 { color: #005691; font-size: 28px; font-weight: 800; margin-bottom: 30px; letter-spacing: 0.5px;}

.inner-blue-box p { font-size: 18px; line-height: 1.9; color: #444; font-weight: 500; word-break: keep-all;}



/* 모바일 대응 */

@media (max-width: 1024px) {.sitemap-grid { grid-template-columns: repeat(3, 1fr); }}

@media (max-width: 768px) {.sitemap-grid { grid-template-columns: repeat(1, 1fr); }}





/* 6. 푸터 */

.footer-eng { border-top: 1px solid #ddd; padding: 30px 0; font-family: 'Arial', sans-serif; color: #666; background: #fff; font-size: 12px; } /* 11->12 상향 */

.footer-top { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto 20px; padding: 0 20px;}

.footer-menu a { color: #333; text-decoration: none; font-size: 14px; font-weight: bold;} /* 12.5->14 상향 */

.footer-menu .bar { margin: 0 10px; color: #ccc;}

.family-site select { padding: 5px 10px; border: 1px solid #333; font-size: 12px; width: 200px;} /* 11.5->12 상향 */

.footer-bottom { max-width: 1200px; margin: 0 auto; padding: 0 20px; font-size: 12px; line-height: 1.8;} /* 11->12 상향 */

.footer-bottom address { font-style: normal;}

.footer-bottom .copyright { margin-top: 5px; color: #333; font-weight: bold;}