.com .container, .pd .container, .notice .container,
.fac .container {
  max-width: 150rem;
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .container {
    padding: 0 1rem;
  }
}

.com section {
  margin: 4rem auto 0;
}
.pd section {
  margin: 4rem auto 8rem;
}
.fac section {
  margin: 4rem auto 8rem;
}
.notice section {
  margin: 4rem auto 8rem;
}
section:last-of-type {
  padding-bottom: 12rem;
}

.combg {
  background-image: url(../../img/combg.jpg);
}
.pdbg {
  background-image: url(../../img/pdbg.jpg);
}
.csbg {
  background-image: url(../../img/csbg.jpg);
}
.qlbg {
  background-image: url(../../img/qlbg.jpg);
}
.facbg {
  background-image: url(../../img/facbg.jpg);
}

.sublayout {
  width: 100%;
  height: 62rem;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.subbg_text {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff;
    width: 80%;
    z-index: 1; /* 중요: 텍스트가 배경 위에 보이도록 */
}
.subbg_text h2{
    font-size: 4rem;
    line-height: 3;
    font-weight: 700;
}
.subbg_text p{
    font-size: 2rem;
    font-weight: 500;
}

.sub_tab {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:20px;
  position: relative;
}
.sub_tab:after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #ddd;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.sub_tab a{
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--font_color);
  padding: 30px;
  position: relative;
}
.sub_tab a.on{
  color: var(--hover_color);
  border-bottom: 1px solid var(--hover_color);
}
.sub_tab a.on:after{
  content: '';
  width: 100%;
  height: 2px;
  background-color: var(--hover_color);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}


section h2.page_title {
  margin: 0 4rem 4rem; 
  position: relative;
  font-size: 3.2rem;
  font-weight: 700;
  color: #777;
  letter-spacing: -0.3px; 
  text-align: center;
}
section p.page_sub_title {
  font-size: 5.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 6.4rem;
}
section p.page_sub_title span{
  color: var(--primary-700);
}
h3.com_title {
  color: var(--font_color);
}
.gray_text {
  color: #999;
}

.cer_img {
  display: flex;
  justify-content: center;
}
.cer_img img {
  width: 80%;
}

@media (max-width: 1200px) {
  section h2.page_title {
    margin: 0 4rem 4rem; 
    position: relative;
    font-size: 3rem;
    font-weight: 700;
    color: var(--font_color);
    letter-spacing: -0.3px; 
    text-align: center;
  }
  section p.page_sub_title {
    font-size: 5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 6.4rem;
  }
}
@media (max-width: 780px) {
  section h2.page_title {
    font-size: 2.6rem;
  }
  section p.page_sub_title {
    font-size: 4rem;
    margin-bottom: 4rem;
  }
  .sub_tab {
    display: none;
  }
}
@media (max-width: 500px) {
  section h2.page_title {
    font-size: 2.2rem;
  }
  section p.page_sub_title {
    font-size: 3.2rem;
    margin-bottom: 4rem;
  }
}


/* -------- com01 --------*/
.com_title {
  font-size: 3.6rem;
  font-weight: 600;
  color: var(--primary-500);
  text-align: center;
  margin-bottom: 4rem;
}
.content_wrap {
  max-width: 130rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 3.2rem;
}
.content_wrap img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto 4rem;
}
.content_wrap span{
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.5;
}
.content_wrap p{
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.5;
}
.sign_wrap {
  display: flex;
  justify-content: flex-end;
  gap: 3.2rem;
  margin-top: 4rem;
  margin-right: 2rem;
  align-items: center;
}
.sign_wrap .sign_name img {
  width: 100%;
  margin: 0;
}

@media (max-width: 860px) {
  .content_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .main .company_wrap .comapany_article_wrap {
    width: 100%;
  }
  .main .company_wrap .comapany_location_img {
    display: none;
  }
  .content_wrap span{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .content_wrap p{
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.5;
  }
}
@media (max-width: 500px) {
  .content_wrap span{
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .content_wrap p{
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
  }
}

/* -------- com03 연혁 --------*/
.timeline {
  width: 100%;
  max-width: 160rem;
  margin: 0 auto;
  padding: 8rem 2rem;
  box-sizing: border-box;
}

.timeline_title_wrap {
  text-align: center;
  margin-bottom: 8rem;
}

.timeline_subtitle {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1rem;
}

.timeline_desc {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 3rem;
}

.timeline_since {
  font-size: 6rem;
  font-weight: 700;
  color: #ccc;
}

/* --- ROW --- */
.timeline_row {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

/* LEFT */
.timeline_left {
  width: 47.5%;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.timeline_year_range {
  font-size: 4.4rem;
  font-weight: 700;
  margin-bottom: 4rem;
}
.timeline_cert {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.timeline_cert img {
  width: 22rem;
  height: auto;
}

/* CENTER LINE */
.timeline_center_line {
  width: 0.2rem;
  height: 105rem;
  background: #ddd;
  position: relative;
}

.timeline_center_line::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background: #0c4da2;
  border-radius: 50%;
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

/* RIGHT */
.timeline_right {
  width: 47.5%;
}

.timeline_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline_list li {
  margin-bottom: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tl_year {
  font-size: 3.8rem;
  font-weight: 600;
  color: #333;
  display: inline-block;
}
.tl_line {
  width: 100%;
  height: 0.2rem;
  background-color: #d9d9d9;
}

.tl_item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  font-size: 2.2rem;
  color: #333;
}
.timeline_left .tl_item {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2rem;
  font-size: 2.2rem;
  color: #333;
}


.tl_month {
  font-weight: 600;
  color: #333;
}

/* 반응형 - 회사연혁 (768px 이하) */
@media (max-width: 768px) {
    
  /* 1. 컨테이너 및 행 기본 설정 */
  .timeline { padding: 4rem 2rem; }
  
  .timeline_row {
      display: flex;
      flex-direction: column; /* 세로로 쌓기 */
      gap: 0;
      margin-bottom: 6rem;
      border-bottom: 1px solid #eee;
      padding-bottom: 4rem;
  }
  .timeline_row:last-child {
      border-bottom: none;
      margin-bottom: 0;
  }

  /* 2. 불필요한 요소 숨김 */
  .timeline_center_line { display: none; }


  /* =========================================
     [핵심] 순서 강제 조정 (Order 속성 사용)
     목표: 무조건 타이틀/이미지가 위(1번), 리스트가 아래(2번)
     ========================================= */

  /* Case A: 타이틀이 왼쪽에 있는 경우 (1988년, 2018년)
     HTML 구조: [Left:타이틀] -> [Right:리스트]
     div 순서상 1988은 2번째, 2018은 4번째 자식임 (맨 위 제목 div 때문)
  */
  .timeline > div:nth-child(2) .timeline_left,
  .timeline > div:nth-child(4) .timeline_left {
      order: 1; /* 타이틀 위로 */
      width: 100%; text-align: left;
  }
  .timeline > div:nth-child(2) .timeline_right,
  .timeline > div:nth-child(4) .timeline_right {
      order: 2; /* 리스트 아래로 */
      width: 100%; text-align: left;
  }
/* 1. 2014년도 행만 콕 집어서 타겟팅 (.timeline_left 안에 있는 리스트) */
.timeline_left .tl_item {
  /* [순서] 텍스트+월 -> 월+텍스트로 뒤집기 */
  flex-direction: row-reverse !important;

  /* [정렬] 뒤집힌 상태에서 시각적으로 '왼쪽'에 붙이려면 flex-end를 써야 함 */
  justify-content: flex-end !important;
  
  /* [텍스트] PC용 오른쪽 정렬 무시하고 왼쪽 정렬 강제 */
  text-align: left !important;

  /* [크기] 다른 연도와 똑같이 폰트 사이즈 축소 (이게 없어서 크게 보였던 것) */
  font-size: 1.8rem !important; 
  
  /* [너비] 글자가 길어지면 줄바꿈 되도록 */
  width: 100%;
}
.timeline_left {
  width: auto;
}

/* 2. 월(01, 03) 숫자 스타일 수정 */
.timeline_left .tl_item .tl_month {
  /* 기존 PC용 왼쪽 여백 제거 */
  margin-left: 0 !important;
  
  /* 숫자와 텍스트 사이 간격(오른쪽) 추가 */
  margin-right: 1.5rem !important;
  

  
  /* 색상 및 폰트 유지 */
  color: var(--primary-500) !important;
  font-weight: 600 !important;
}



  /* 4. 디자인 다듬기 (폰트, 정렬 등) */
  .timeline_year_range {
      font-size: 3.2rem;
      margin-bottom: 2rem;
      color: var(--primary-700);
      border-left: 5px solid var(--primary-700);
      padding-left: 1.5rem;
      line-height: 1.3;
      text-align: left;
  }
  .timeline_year_range br { display: none; }

  .timeline_cert { margin-bottom: 3rem; text-align: left; }
  .timeline_cert img { width: 15rem; }

  /* 리스트 스타일 */
  .timeline_list li { margin-bottom: 3rem; gap: 1rem; }
  .timeline_left .tl_item, .timeline_right .tl_item {
      justify-content: flex-start;
      text-align: left;
  }
  
  .tl_year { font-size: 2.8rem; min-width: 9rem; }
  .timeline_left {text-align: left;}
  .tl_line { width: 3rem; flex-shrink: 0; }
  .tl_item { font-size: 1.8rem; flex-wrap: nowrap; }
  .tl_month { color: var(--primary-500); margin-right: 0.5rem; }
  
  /* ----------------------------------------------------
       [2014년도(3번째 div) 전용 스타일 수정] 
       목표: "텍스트 + 월" 순서를 "월 + 텍스트"로 시각적 반전
       ---------------------------------------------------- */
    
/* 1. Flex 방향을 반대로 뒤집어서 '월'이 앞으로 오게 함 */
    /* div 대신 .timeline_row 클래스를 콕 집어서 지정 */
    .timeline_row:nth-child(3) .timeline_left .tl_item {
      flex-direction: row-reverse; /* 순서 반전 */
      justify-content: flex-end;   /* row-reverse 상태에서 왼쪽 정렬을 하려면 flex-end 써야 함 */
      text-align: left;            /* 텍스트 자체 왼쪽 정렬 */
  }

  /* 2. 월(Month) 숫자와 텍스트 사이 간격 조정 */
  .timeline_row:nth-child(3) .timeline_left .tl_item .tl_month {
      margin-left: 0;       /* 기존 왼쪽 여백 제거 */
      margin-right: 1.5rem; /* 오른쪽에 여백 추가 */
  }
}




/* ----- com04 ---------*/
.com04 p.location{
  margin-top: 2rem;
  font-size: 2rem;
  text-align: center;
}
.map_wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 비율 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  margin: 4rem auto 0;
}

.map_wrap iframe {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  border: 0;
}
.map_content {
  display: flex;
  margin-top: 2rem;
}
.map_content_left, .map_content_right {
  width: 50%;
}
.com04 p{
  font-size: 2rem;
}
.com04 p.num{
  font-size: 3.2rem;
}
.com04 p.location {
  font-size: 3.2rem;
  margin-top: 2rem;
}

@media (max-width:800px) {
  .map_wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* -------- com06 조직도 */
.or_img_wrap {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.or_img {
  width: 70%;
}
/* -------- com07 사업장소개 */
.location_title {
  margin-top: 12rem;
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
}
.lo {
  margin-top: 4rem;
  font-size: 4rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 2rem;
}
.lo_map {
  margin-top: 2rem;
}
.lo_top {
  display: flex;
  gap: 2%;
}
.lo_bot {
  margin-top: 4rem;
  display: flex;
  gap: 30%;
}
.lo_bot_text span {
  font-size: 3.2rem;
  font-weight: 500;
  color: var(--primary-300);
}
.lo_bot_text p {
  font-size: 4.8rem;
  font-weight: 600;
}


  
  /* =========================================
     2. 노트북 및 태블릿 가로 (1200px 이하)
     * PC와 모바일의 중간 다리 역할 *
     ========================================= */
  @media (max-width: 1200px) {
    .location_title {
      margin-top: 9rem; /* 12rem -> 9rem */
      font-size: 3.2rem; /* 4rem -> 3.2rem */
    }
  
    .lo {
      margin-top: 3rem;
      font-size: 3rem; /* 4rem -> 3rem */
    }
    .lo_top {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
    .lo_bot {
      gap: 10%; /* 30%는 너무 넓으니 10%로 축소 */
    }
  
    .lo_bot_text span {
      font-size: 2.4rem; /* 3.2rem -> 2.4rem */
    }
  
    .lo_bot_text p {
      font-size: 3.6rem; /* 4.8rem -> 3.6rem */
    }
  }
  
  
  /* =========================================
     3. 모바일 및 태블릿 세로 (768px 이하)
     * 구조가 세로로 바뀌는 구간 *
     ========================================= */
  @media (max-width: 768px) {
    .location_title {
      margin-top: 6rem;
      font-size: 2.4rem;
    }
  
    .lo {
      margin-top: 2rem;
      font-size: 2rem;
    }
  
    .lo_bot {
      flex-direction: column; /* 세로 배치 */
      gap: 3rem;
      margin-top: 3rem;
    }
  
    .lo_bot_text {
      text-align: center; /* 텍스트 중앙 정렬 */
    }
    
    .lo_bot_text span {
      font-size: 1.6rem;
    }
  
    .lo_bot_text p {
      font-size: 2.8rem;
      word-break: keep-all;
    }
  }


/* ----------- pd 제품소개 */
/* -------- pd01 반도체, display 장비 부품 사업부 */
/* [상단 탭 영역: pd_tab] */
.pd_tab {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 6rem;
  flex-wrap: wrap;
}

.pd_tab button {
  padding: 1rem 3rem;
  border-radius: 5rem;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  /* 기본 상태 (비활성 상태 스타일) */
  background-color: #fff;
  color: var(--primary-500);
  border: 0.1rem solid #334BC6;
}

/* 활성화된 탭 스타일 (.active 클래스가 붙으면 적용) */
.pd_tab button.active {
  background-color: var(--primary-500);
  color: #fff;
  border: 0.1rem solid var(--primary-500);
}

.pd_tab button:hover { opacity: 0.8; }

/* [하단 제품 영역: pd_wrap] */
.pd_wrap {
  margin: 0 auto;
}

/* 탭 컨텐츠 제어용 CSS */
.tab_content {
  display: none; /* 기본적으로 모두 숨김 */
  animation: fadeIn 0.5s; /* 부드럽게 나타나는 효과 */
}

.tab_content.active {
  display: block; /* active 클래스가 있으면 보임 */
}

/* 페이드인 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* (기존 디자인 유지) */
.category_title { font-size: 2.8rem; font-weight: 700; margin-bottom: 2rem; color: #222; }
.product_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 6rem;}
.product_item { display: flex; flex-direction: column; background: #fff; border: 0.1rem solid #ddd;}
.img_box { width: 100%; height: 32rem; background-color: #efefef; display: flex; align-items: center; justify-content: center; overflow: hidden;
transition: 0.3s;}
.img_box:hover {
  background-color: #d3d3d3; 
}
.img_box img { width: 100%; height: 100%; object-fit: cover; }
.txt_box { padding: 2rem 1rem; text-align: center; }
.txt_box strong { display: block; font-size: 1.5rem; color: #222; margin-bottom: 0.8rem; line-height: 1.4; }
.txt_box span { display: block; font-size: 1.3rem; color: #888; }

/* 모달창 배경 (검은색 반투명) */
/* 1. 모달 전체 배경 (어두운 뒷배경) */
.modal {
  display: none; /* 평소엔 숨김 */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 뒤 배경 투명도 60% */
  
  /* 중앙 정렬용 Flex 설정 */
  display: none; /* JS에서 flex로 바꿈 */
  justify-content: center;
  align-items: center;
}

/* 2. 중앙 회색 박스 디자인 */
.modal_box {
  position: relative; /* X버튼 위치 기준점 */
  background-color: #E6E6E6; 
  padding: 8rem; 
  width: 80rem;   /* 박스 너비를 800px로 고정 (원하는 크기로 숫자 조절) */
  max-width: 90%; /* 화면이 좁을 땐 화면의 90%만 차지 */
  max-height: 90%;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.5); /* 그림자 효과 */
  border-radius: 0.5rem; /* 살짝 둥근 모서리 */
  
  /* 박스 안에서 이미지 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. 이미지 스타일 */
.modal_box img {
  max-width: 80rem; /* 이미지 최대 너비 제한 (필요시 조절) */
  max-height: 70vh; /* 높이는 화면의 70%까지만 */
  object-fit: contain; /* 비율 깨지지 않게 */
  display: block;
}

/* 4. 닫기 버튼 (X) 스타일 */
.close {
  position: absolute;
  top: 1rem;   /* 위에서 10px */
  right: 1.5rem; /* 오른쪽에서 15px */
  color: #888; /* 회색 X */
  font-size: 3.5rem; /* 크기 35px */
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  transition: color 0.3s;
}

.close:hover {
  color: #000; /* 마우스 올리면 검은색으로 */
}

/* 모달이 켜질 때(.active) 적용될 스타일 */
.modal.show {
  display: flex !important; /* flex로 켜져야 중앙 정렬됨 */
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


@media (max-width: 1024px) { .product_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .pd_tab { flex-direction: column; } .product_grid { grid-template-columns: 1fr; } }


/* PD02 전용: 2단 그리드 레이아웃 */
.product_grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 핵심: 2개씩 나열 */
  gap: 2rem;
  margin-bottom: 6rem;
}
.product_grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 핵심: 2개씩 나열 */
  gap: 2rem;
  margin-bottom: 6rem;
}

/* (선택 사항) 박스가 넓어졌으니 이미지 높이를 좀 더 시원하게 키우고 싶다면? */
/* HTML 클래스 수정 없이, 부모(.product_grid2)를 통해 자식(.img_box)을 제어합니다. */
.product_grid2 .img_box {
  height: 44rem;
}
.product_grid3 .img_box {
  height: 40rem;
}
.product_grid2 .img_box img { width: 100%; height: 100%; object-fit: cover; }

.modal_box2 {
  position: relative; /* X버튼 위치 기준점 */
  background-color: #E6E6E6; 
  padding: 8rem; 
  width: 120rem;   /* 박스 너비를 800px로 고정 (원하는 크기로 숫자 조절) */
  max-width: 90%; /* 화면이 좁을 땐 화면의 90%만 차지 */
  max-height: 90%;
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.5); /* 그림자 효과 */
  border-radius: 0.5rem; /* 살짝 둥근 모서리 */
  
  /* 박스 안에서 이미지 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. 이미지 스타일 */
.modal_box2 img {
  max-width: 120rem; /* 이미지 최대 너비 제한 (필요시 조절) */
  max-height: 70vh; /* 높이는 화면의 70%까지만 */
  object-fit: contain; /* 비율 깨지지 않게 */
  display: block;
}

/* 모바일 반응형: 화면이 좁아지면 1개씩 보이게 */
@media (max-width: 768px) {
  .product_grid2 {
      grid-template-columns: 1fr;
  }
  .product_grid3 {
      grid-template-columns: 1fr;
  }
  .modal_box {
    padding: 0;
    max-width: 98%;
    max-height: 100%;
  }
  .modal_box2 {
    padding: 1rem;
    max-width: 98%;
    max-height: 100%;
  }
  .product_grid2 .img_box {
    height: 32rem;
  }
  .product_grid3 .img_box {
    height: 30rem;
  }
}
/* ----------------fac 주요설비 */
/* --------fac01 가공설비 */
.fac_wrap {
  display: flex;
  flex-direction: column;
  gap: 5rem
}
.fac_img_wrap {
  display: flex;
  gap: 5rem;
}
/* 10px = 1rem 기준 적용 */
.fac_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.8rem; /* 14px */
  color: #333;
}

.fac_table th, 
.fac_table td {
  border: 0.1rem solid #e0e0e0; /* 1px solid gray */
  padding: 0.8rem 1rem; /* 상하 8px, 좌우 10px */
  vertical-align: middle;
}

/* 헤더 스타일 */
.fac_table th {
  background-color: #002060; /* 이미지의 짙은 네이비색 */
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  font-size: 2.4rem;
}

/* 1열 설비명 배경색 및 스타일 */
.fac_table .bg-gray {
  background-color: #f2f2f2; /* 연한 회색 배경 */
  text-align: center;
}

.fac_table .bold {
  font-weight: 700;
}

/* 텍스트 정렬 */
.fac_table td {
  text-align: center; /* 기본 가운데 정렬 */
}

.fac_table td.align-left {
  text-align: center;
}

.fac_table td.align-center {
  text-align: center;
}

/* 규격 내 강조 숫자 */
.fac_table strong {
  font-weight: 800;
  color: #000;
}
/* 1. 스크롤을 담당할 부모 박스 */
.table_wrap {
  width: 100%;
  overflow-x: auto; /* 가로 스크롤 자동 생성 */
  -webkit-overflow-scrolling: touch; /* 모바일 터치 스크롤 부드럽게 */
  margin-top: 5rem;
}

/* 2. 테이블 스타일 수정 */
.fac_table {
  /* ... 기존 스타일 유지 ... */
  
  /* 화면이 줄어들어도 이 너비 이하로는 안 줄어들고 스크롤이 생김 */
  min-width: 70rem; /* 700px (내용이 안 깨질 정도의 너비 설정) */
}

/* 3. 셀 내용 줄바꿈 방지 (선택 사항) */
/* 텍스트가 좁아져서 두 줄로 되는게 싫다면 추가하세요 */
.fac_table th, 
.fac_table td {
  white-space: nowrap; 
}

/* 전체 레이아웃: PC 가로 배치 / 모바일 세로 배치 */
.equipment-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5rem;
  width: 100%;
  margin: 5rem auto 0;
}

/* 스크롤용 껍데기: 화면이 작아지면 여기서 가로 스크롤 발생 */
.table-scroll-wrap {
  flex: 1;           /* 공간 균등 분할 */
  width: 100%;       /* 부모 너비 안에서 꽉 차게 */
  overflow-x: auto;  /* 내용 넘치면 가로 스크롤 */
}

/* .fac_table 스타일은 기존 CSS에 있을 것이므로 여기서는 
스크롤 강제를 위한 최소 너비만 추가하면 됩니다.
*/
.fac_table {
  width: 100%;
  /* 화면이 줄어도 테이블이 찌그러지지 않고 
    500px을 유지하여 스크롤바가 생기게 함 
  */
  min-width: 500px; 
}

/* 반응형 (768px 이하) */
@media (max-width: 768px) {
  .fac_wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem
  }
  .fac_img_wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .equipment-layout {
      flex-direction: column; /* 세로로 쌓기 */
      gap: 3rem;
  }
  
  .table-scroll-wrap {
      width: 100%; 
  }
}



/* ----------------qualtiy 품질관리 */
/* --------qualtiy01 품질관리시스템 */


.process_flow_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding: 0 4rem;
  position: relative;
  gap: 3rem;
}

/* --- 개별 단계 (Step) --- */
.process_step {
  flex: 1;
  position: relative;
  z-index: 2; /* 화살표보다 위에 위치 */
}
.ql_arrow {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* --- 카드 디자인 (반투명, 그림자) --- */
.process_card {
  background: rgba(255, 255, 255, 0.5); /* 반투명 흰색 */
  backdrop-filter: blur(1rem); /* 뒤쪽 흐림 효과 */
  border: 0.1rem solid rgba(255, 255, 255, 0.5);
  border-radius: 1.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
  box-shadow: 0 1rem 2.5rem rgba(0, 50, 100, 0.08); /* 부드러운 그림자 */
  transition: transform 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.process_card:hover {
  transform: translateY(-1rem);
  box-shadow: 0 1.5rem 3rem rgba(0, 50, 100, 0.12);
}

/* --- 아이콘 원 (Gradient CSS) --- */
.icon_circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  color: #fff;
  font-size: 1.4rem; /* 아이콘 텍스트 크기 */
  font-weight: bold;
  /* 내부 그림자 + 외부 그림자로 입체감 표현 */
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15), inset 0 0 1rem rgba(255,255,255,0.3);
}
.icon_circle img {
  max-width: 6rem;
  width: 100%;
  max-height: 6rem;
  height: 100%;
}

/* 색상별 그라데이션 */
.circle_blue {
  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
  box-shadow: 0 0.8rem 2rem rgba(78, 67, 118, 0.3);
}
.circle_cyan {
  background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
  box-shadow: 0 0.8rem 2rem rgba(0, 131, 176, 0.3);
}
.circle_navy {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  box-shadow: 0 0.8rem 2rem rgba(30, 60, 114, 0.3);
}
.circle_gold {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  box-shadow: 0 0.8rem 2rem rgba(255, 210, 0, 0.3);
}
/* Step 01: 설계 - 네이비에서 시작해 부드러운 연보라(Lavender)로 끝남 */
.circle_proc_01 {
  /* Deep Navy (#1A2980) -> Soft Lavender (#9F8CDF) */
  background: linear-gradient(135deg, #1A2980 0%, #9F8CDF 100%);
  box-shadow: 0 0.8rem 2rem rgba(159, 140, 223, 0.4);
}

/* Step 02: 가공 - (수정됨) 배경 화살표와 어우러지는 연한 바이올렛-블루 */
.circle_proc_02 {
  background: linear-gradient(135deg, #7F7FD5 0%, #77e9e1 100%);
  box-shadow: 0 0.8rem 2rem rgba(123, 123, 226, 0.3);
}

/* Step 03: 조립 - 세련된 다크 바이올렛 (Dark Violet) */
.circle_proc_03 {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  box-shadow: 0 0.8rem 2rem rgba(24, 40, 72, 0.4);
}

/* Step 04: 납품 (골드는 품질과 공통으로 써도 무방하지만, 혹시 몰라 분리해둠) */
.circle_proc_04 {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  box-shadow: 0 0.8rem 2rem rgba(255, 210, 0, 0.3);
}

.ql_next {
  position: relative;
  z-index: 2;
  max-width: 4.2rem;
  width: 100%;
  max-height: 8rem;
  height: 100%;
}

/* --- 텍스트 스타일 --- */
.text_box h3 {
  font-size: 2.4rem;
  color: var(--primary-800);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.eng_txt {
  font-size: 1.6rem;
  color: var(--primary-700);
  font-weight: 500;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.05rem;
}

.kor_txt {
  font-size: 1.6rem;
  color: #333;
  line-height: 1.4;
  word-break: keep-all;
}

/* --- 화살표 (CSS Border 활용) --- */
.step_arrow {
  width: 2rem;
  height: 2rem;
  border-top: 0.3rem solid #ddd;
  border-right: 0.3rem solid #ddd;
  transform: rotate(45deg); /* 회전시켜서 화살표 모양 만들기 */
  margin: 0 1rem;
}



/* --- 마지막 결과 카드 (강조) --- */
.final_step {
  flex: 1.1; /* 조금 더 넓게 */
  margin-left: 2rem;
}

.final_card {
  border: 0.1rem solid rgba(255, 215, 0, 0.3); /* 골드 테두리 */
  background: linear-gradient(to bottom, #fff 0%, #fffae0 100%);
  position: relative;
  overflow: hidden;
}

.system_name {
  font-size: 2.4rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 2rem;
}

.final_card h3 {
  color: #f5c528; /* 골드 텍스트 */
}

/* 받침대 효과 */
.platform_base {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2rem;
  background: rgba(212, 175, 55, 0.15);
  border-radius: 50%;
  filter: blur(0.5rem);
  z-index: 0;
}

/* --- 하단 방침 그리드 (옵션) --- */
.policy_grid_wrap {
  display: flex;
  gap: 2rem;
  margin-top: 4rem;
}

.policy_box {
  flex: 1;
  border: 0.1rem solid #e0e0e0;
  border-radius: 1rem;
  padding: 4rem;
  background: #fff;
}
.policy_box .policy_top {
  display: flex;
  align-items: center;
}

.policy_num {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary-700);
  margin-right: 1.5rem;
  line-height: 1;
}

.policy_box h4 {
  font-size: 2.4rem;
  color: #333;
  line-height: 1.4;
  margin: 0;
}
.policy_content {
  font-size: 2rem;
  color: #333;
  line-height: 1.4;
  margin-top: 2rem;
}

/* --- 반응형 (모바일) --- */
@media (max-width: 768px) {
  .process_flow_wrap {
      flex-direction: column;
      gap: 2rem;
  }

  .process_step, .step_arrow {
      width: 100%;
      margin: 0;
  }
  .ql_arrow {
    display: none;
  }

  /* 화살표 방향 아래로 변경 */
  .ql_next {
      transform: rotate(90deg); /* 아래쪽 화살표 */
      margin: 1rem 0;
      align-self: center; /* 가운데 정렬 */
  }
  
  .policy_grid_wrap {
      flex-direction: column;
  }
}

/* --------qualtiy03 인증현황 */

/* 인증현황 전체 컨테이너 */
.cer_section {
  width: 100%;
  max-width: 1400px; /* 전체 너비 제한 (필요시 조정) */
  margin: 50px auto;
  padding: 0 20px;
  text-align: center;
}


/* 리스트 그리드 레이아웃 */
.cer_list {
  display: flex;
  justify-content: center; /* 중앙 정렬 */
  flex-wrap: wrap; /* 화면 좁으면 줄바꿈 */
  gap: 20px; /* 아이템 사이 간격 */
}

/* 개별 아이템 카드 */
.cer_item {
  width: 18%; /* 5개 배열을 위해 20%보다 약간 작게 설정 */
  min-width: 200px; /* 너무 작아지지 않도록 최소 너비 설정 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 이미지 박스 */
.cer_img_box {
  width: 100%;
  border: 1px solid #ddd; /* 이미지 테두리 (선택사항) */
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  background-color: #fff;
  cursor: pointer;
}

/* 이미지 호버 효과 */
.cer_img_box:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-color: #bbb;
}

.cer_img_box img {
  width: 100%;
  height: auto;
  display: block;
}

/* 텍스트 박스 */
.cer_txt_box {
  margin-top: 15px;
  text-align: center;
}

.cer_txt_box p {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
  word-break: keep-all; /* 단어 단위 줄바꿈 */
  line-height: 1.4;
}

.cer_modal {
  display: none; /* 평소엔 숨김 */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 뒤 배경 투명도 60% */
  
  /* 중앙 정렬용 Flex 설정 */
  display: none; /* JS에서 flex로 바꿈 */
  justify-content: center;
  align-items: center;
}

.cer_modal_box {
  background-color: white;
  position: relative; /* X버튼 위치 기준점 */
  padding: 4rem; 
  width: 80rem; 
  max-width: 90%; /* 화면이 좁을 땐 화면의 90%만 차지 */
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.5); /* 그림자 효과 */
  border-radius: 0.5rem; /* 살짝 둥근 모서리 */
  
  /* 박스 안에서 이미지 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. 이미지 스타일 */
.cer_modal_box img {
  width: 80%;
  display: block;
  border: 1px solid #999;
}


/* 반응형: 모바일에서는 2개씩 보이기 */
@media (max-width: 768px) {
  .cer_item {
      width: 45%; /* 모바일에서 2열 */
  }
}


/* 홍보센터 */
/* 모달 전체: 정중앙 정렬 + 배경 클릭 가능 */
.video_modal[hidden] { display: none; }
.video_modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);   /* 바깥 영역 클릭 닫기용 영역 */
}

/* 콘텐츠 박스: 화면의 70% */
/* === YouTube modal 강제 사이즈 & 중앙 정렬 === */
.video_modal[hidden]{display:none;}
.video_modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
}

/* 화면의 70% 박스, 16:9 비율, 중앙 */
.video_modal[hidden]{display:none;}
.video_modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
}

/* 핵심: 한 쪽만 계산하고, 나머지는 aspect-ratio로 맞춤 */
/* 오버레이 + 중앙 정렬 */
.modal2 { 
  position: fixed; inset: 0; z-index: 9999;
  display: none;                      /* 기본 숨김 */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
}
.modal2.is_open { display: flex; }

/* 콘텐츠 박스: 항상 16:9, 화면의 최대 70% */
.modal_content{
  width: min(70vw, calc(70vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background:#000; 
  border-radius:12px; 
  overflow:hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 0;                         /* 내부 여백 제거 */
}

/* iframe을 박스 꽉 채우기 (전역 규칙 덮어쓰기) */
.modal_content iframe{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  display:block !important;
  border:0 !important;
}

/* 닫기 버튼 */
.close_btn{
  position:absolute; right:10px; top:8px;
  font-size:28px; line-height:1;
  background:none; border:0; color:#fff; cursor:pointer;
}

/* 모바일 보정 */
@media (max-width:640px){
  .modal_content{ width: min(92vw, calc(60vh * 16 / 9)); }
}



/* 폴백 링크 */
.yt_fallback { margin-top: 10px; font-size: 14px; color: #00A0A7; text-decoration: underline; }

.gallery_wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4등분 */
  gap: 4rem; /* 이미지 간격 */
  padding: 4rem 0;
}

.gallery_wrap img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ddd;
  border-radius: 4px;
  object-fit: cover;
}
.gallery_text {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  font-size: 1.6rem;
  font-weight: 500;
}
.gallery_title {
  max-width: 25rem;
  width: 100%;
  white-space: nowrap;        /* 줄바꿈 없이 한 줄 표시 */
  overflow: hidden;           /* 넘치는 부분 숨김 */
  text-overflow: ellipsis;    /* 말줄임표(...) 적용 */
}
.gallery_date {
  max-width: 8rem;
  width: 100%;
}
@media (max-width: 1024px) {
  .cer_wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery_wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .cer_wrap {
    grid-template-columns: 1fr;
  }
  .gallery_wrap {
    grid-template-columns: 1fr;
  }
}

/* ------- CS 고객센터 -------*/

section.section_inquiry {
  margin-top: 0 !important;
}

.notice_wrap h2 {
  font-size: 5.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}
.notice_wrap {
  width: 100%;
  margin: 4rem auto 0;
  background-color: white;
  padding: 0;
}

.notice_table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 16px;
  margin-top: 2rem;
}

.notice_table thead th {
  font-weight: 700;
  padding: 14px 10px;
  border-bottom: 2px solid #222;
}

.notice_table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid #ccc;
}

.notice_table tbody tr:hover {
  background-color: #f9f9f9;
  transition: background-color 0.2s;
}
.notice_table .t1 {
  width: 10%;
}
.notice_table .t2 {
  width: 50%;
}
.notice_table .t3,
.notice_table .t4 {
  width: 20%;
}
/* 페이지네이션 전체 컨테이너 */
.pagination {
  display: flex;
  justify-content: center; /* 화면 중앙 정렬 */
  align-items: center;
  margin-top: 40px; /* 위쪽 테이블과의 간격 */
  gap: 5px; /* 버튼 사이의 간격 */
}

/* 모든 버튼 공통 스타일 (화살표, 숫자 포함) */
.pagination a {
  text-decoration: none;
  color: #666; /* 기본 글자색 (연한 회색) */
  font-size: 15px;
  padding: 8px 13px; /* 버튼 크기 조절 (상하, 좌우) */
  border: 1px solid #ddd;
  transition: all 0.3s; /* 부드러운 효과 */
  border-radius: 4px; /* 모서리 살짝 둥글게 */
}

/* 마우스 올렸을 때 효과 */
.pagination a:hover {
  color: #333; /* 글자색 진하게 */
  background-color: #f9f9f9; /* 배경 살짝 회색 */
}

/* 현재 페이지 (활성화된 1번) 스타일 */
.pagination a.active {
  color: #fff; /* 글자색 흰색 */
  background-color: #333; /* 배경색 진한 회색/검정 (로고 색에 맞춤) */
  border-color: #333;
  font-weight: bold;
}

/* 화살표(<, >) 전용 스타일 */
.pagination .page_btn {
  font-weight: bold;
  color: #999;
}

.not_con .container {
  margin: 0 auto 60px;
}
.not_con section.seciton_notice {
  margin-top: 2rem;
}
.inq_content {
  margin-top: 4rem;
}

.notice_view {
  font-size: 16px;
  line-height: 1.6;
}

.notice_header {
  background-color: #ddd;
  font-weight: bold;
  padding: 15px;
  border-bottom: 2px solid #555;
}

.notice_file {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.notice_body {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.notice_footer {
  text-align: center;
  padding: 20px;
}

.notice_footer button {
  padding: 8px 20px;
  border: 1px solid #555;
  background: white;
  cursor: pointer;
}
.notice_view .notice_file a.n_down { 
  background-color: #dedede; 
  border: 1px solid #666; 
  padding: 0.2rem 1rem;
  margin-left: 1rem;
}


@media (max-width:640px) {
  .notice_table {
    font-size: 14px;
  }
  .notice_table thead th {
    padding: 14px 4px;
  }
}

/* --------cs03 홍보센터*/
/* --- 홍보센터 갤러리 스타일 --- */
.pr_gallery_wrap {
  display: grid;
  /* PC 기준: 한 줄에 4개 (1fr씩 4등분) */
  grid-template-columns: repeat(4, 1fr); 
  gap: 2rem; /* 카드 사이 간격 */
  margin-bottom: 4rem;
}

/* 개별 카드 공통 스타일 */
.pr_item {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.3s ease;
}

/* 영상 타입 스타일 */
.pr_item.video_type {
  border: 1px solid #ddd;
}
.pr_item.video_type:hover {
  transform: translateY(-5px); /* 마우스 올리면 살짝 뜸 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.video_frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 비율 유지 */
  background: #000;
}
.video_frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 썸네일 이미지 영역 스타일 */
.pr_thumb {
  position: relative;
  width: 100%;
  /* 16:9 비율 유지 (최신 브라우저 지원) */
  aspect-ratio: 16 / 9; 
  overflow: hidden; /* 이미지 확대 시 삐져나옴 방지 */
  background-color: #000;
}

/* 만약 aspect-ratio가 안 먹는 구형 브라우저(IE 등)를 고려해야 한다면 
   위의 aspect-ratio를 지우고 아래 주석을 해제하세요. */
/* .pr_thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
  overflow: hidden;
}
.pr_thumb a {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}
*/

.pr_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 찌그러지지 않고 영역을 꽉 채움 */
  transition: transform 0.3s ease; /* 부드러운 확대 효과 */
}

/* 마우스 올렸을 때 이미지 확대 효과 */
.pr_item.video_type:hover .pr_thumb img {
  transform: scale(1.05);
}

.pr_text {
  padding: 1.5rem;
}
.pr_date {
  font-size: 1.4rem;
  color: #888;
  margin-bottom: 0.5rem;
}
.pr_title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

/* 빈 게시물(준비중) 스타일 - 약한 회색 */
.pr_item.empty {
  background-color: #f0f0f0; /* 옅은 회색 배경 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px; /* 최소 높이 확보 */
  border: 1px dashed #ccc; /* 점선 테두리로 '비어있음' 강조 (선택사항) */
}

.empty_text {
  font-size: 1.6rem;
  color: #aaa;
  font-weight: 500;
}

/* --- 반응형 (모바일/태블릿) --- */
@media (max-width: 1024px) {
  .pr_gallery_wrap {
    grid-template-columns: repeat(2, 1fr); /* 태블릿: 한 줄에 2개 */
  }
}

@media (max-width: 768px) {
  .pr_gallery_wrap {
    grid-template-columns: repeat(1, 1fr); /* 모바일: 한 줄에 1개 */
  }
}

/* 상세페이지 영상 반응형 */
.view_video_wrap {
  width: 100%;
  max-width: 100%;
  margin: 2rem auto;
  overflow: hidden;
}

.view_video_wrap video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}