.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.2rem;}section p.page_sub_title {  font-size: 4rem;  margin-bottom: 4rem;}.sub_tab {  display: none;} .sublayout{height: 32rem;}}
@media (max-width: 500px) {section h2.page_title {  font-size: 2.2rem;}section p.page_sub_title {  font-size: 2.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;}
.timeline_right{width: 100%;}
.timeline_left{align-items: start;}
/* 2. 불필요한 요소 숨김 */.timeline_center_line { display: none; }
.timeline_since{font-family: 4rem;}

/* =========================================   [핵심] 순서 강제 조정 (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: 2.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; flex-direction: row;}.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;}