@charset "utf-8";

/* ======================== 공통 ======================== */

/* 헤더
   시안 : HEADER 1:1132 (투명 · 흰 글자) / HEADER_fix 1:1271 (스크롤 후 흰 배경) / 01~04_menu (2depth 판)
   높이 90 · 좌우 여백 150 · 아래 1px 선. 항상 화면 위에 떠 있고 배경만 상태에 따라 바뀝니다.
     기본           투명 + 흰 글자 + rgba(255,255,255,.3) 선
     .fix / .on     흰 배경 + #231815 글자 + #e0e0e0 선   (.fix 스크롤, .on GNB 호버)
     body.menuOpen  모바일 메뉴가 열려 있을 때. 위와 같은 흰 상태 */
#header {z-index: 90; transition: background 0.25s, border-color 0.25s;}
#header .inner {height: 9rem; padding: 0 15rem; border-bottom: 1px solid rgba(255,255,255,0.3); transition: border-color 0.25s;}
#header.fix,
#header.on,
body.menuOpen #header {background: #fff;}
#header.fix .inner,
#header.on .inner,
body.menuOpen #header .inner {border-color: #e0e0e0;}

/* 흰 배경이면 컬러(.c) 로고·아이콘, 아니면 흰(.w) 것만 보입니다 */
#header .c {display: none;}
#header.fix .c, #header.on .c, body.menuOpen #header .c {display: block;}
#header.fix .w, #header.on .w, body.menuOpen #header .w {display: none;}

#header .logo {width: 18.6rem; height: 6.2rem; flex-shrink: 0;}
#header .logo a {display: block; width: 100%; height: 100%;}
#header .logo img {width: 100%; height: 100%; object-fit: contain;}

/* GNB — 항목 하나가 147 (글자 73 + 좌우 37). 글자는 위에서 33 내려오고 3px 밑줄은 바닥에 붙습니다 */
#header .gnb li a {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    height: 9rem; padding: 3.3rem 3.7rem 0; color: #fff; line-height: 2.9rem; white-space: nowrap;
    transition: color 0.2s;
}
#header .gnb li a::after {content: ''; display: block; width: 100%; height: 0.3rem; background: var(--fcp); opacity: 0; transition: opacity 0.2s;}
#header.fix .gnb li a, #header.on .gnb li a {color: var(--fct);}
#header .gnb li.on a,
#header .gnb li a:hover {font-weight: 700; color: var(--fcp);}
#header .gnb li.on a::after,
#header .gnb li a:hover::after {opacity: 1;}

/* 오른쪽 : 언어선택 + 메뉴 아이콘 (사이 25) */
#header .util {gap: 2.5rem;}
#header .lang {}
#header .langBtn {gap: 0.5rem; color: #fff; transition: color 0.2s;}
#header.fix .langBtn, #header.on .langBtn, body.menuOpen #header .langBtn {color: var(--fct);}
#header .langBtn .ico {width: 2.2rem; height: 2.2rem;}
#header .langBtn .ico img {width: 100%; height: 100%;}
#header .langBtn .lb {line-height: 1.9rem; white-space: nowrap;}
#header .langBtn .arr {width: 2rem; height: 2rem; transition: transform 0.2s;}
#header .langBtn .arr img {width: 100%; height: 100%;}
/* 열리면 화살표가 위를 봅니다 */
#header .lang.on .langBtn .arr {transform: scaleY(-1);}

/* 언어 드롭박스 — 버튼 아래 헤더 선에 맞춰 뜹니다 (시안 96 × 30 두 줄) */
#header .langBox {
    position: absolute; left: 0; top: calc(100% + 3rem); z-index: 5;
    width: 9.6rem; padding: 0.8rem 0; background: #fff; border-radius: 0.3rem;
    box-shadow: 0 0.4rem 0.5rem rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; transform: translateY(-0.5rem);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
#header .lang.on .langBox {opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s, visibility 0s 0s;}
#header .langBox li a {display: flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1.2rem; white-space: nowrap;}
#header .langBox li a:hover {background: #f4f4f4;}

/* PC 는 사이트맵 링크, 모바일은 메뉴 버튼. 아이콘 30 */
#header .allBtn,
#header .menuBtn {width: 3rem; height: 3rem; flex-shrink: 0;}
#header .allBtn img,
#header .menuBtn img {width: 100%; height: 100%;}
#header .menuBtn .x {display: none;}

/* 2depth 판 — 헤더 바로 아래, 화면 폭 전체. 위 50 / 아래 70 여백, 왼쪽 제목 칸 273, 오른쪽 3열 (430 × 65, 사이 28.5 / 줄 21) */
#header .subMenu {
    position: absolute; left: 0; top: 100%; width: 100%; z-index: 4;
    background: #fff; box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.1);
    display: none;
}
#header .subMenu.on {display: block;}
#header .subMenu .inner {height: auto; padding: 5rem 15rem 7rem; border: 0; align-items: flex-start;}
#header .subMenu .tit {width: 27.3rem; flex-shrink: 0; margin-top: 0.9rem; line-height: 3.6rem;}
#header .subMenu .list {flex: 1; gap: 2.1rem 2.85rem;}
#header .subMenu .list li {width: calc((100% - 5.7rem) / 3);}
#header .subMenu .list li a {
    display: flex; align-items: center; height: 6.5rem; padding: 0 3rem;
    background: #f4f4f4; border-radius: 0.5rem; color: var(--fct); overflow: hidden;
    transition: background 0.2s, color 0.2s;
}
/* 호버 : 그린 배경 + 흰 굵은 글자 + 오른쪽 끝에 심볼 워터마크 (img/ic_head_depth.svg 61 × 65, 상자 오른쪽에 붙임) */
#header .subMenu .list li a::after {
    content: ''; position: absolute; right: 0; top: 0; width: 6.1rem; height: 6.5rem;
    background: url('../img/ic_head_depth.svg') no-repeat center / contain;
    opacity: 0; transition: opacity 0.2s;
}
#header .subMenu .list li a:hover {background: var(--fcp); color: #fff; font-weight: 700;}
#header .subMenu .list li a:hover::after {opacity: 1;}

/* 모바일 메뉴 (PC 에선 통째로 숨김) */
.mMenu {display: none;}

@media all and (max-width: 880px){
    /* 시안 750 기준 ÷2 : 높이 120 → 6rem, 좌우 30 → 1.5rem, 로고 225 × 75 */
    #header .inner {height: 6rem; padding: 0 1.5rem;}
    #header .logo {width: 11.25rem; height: 3.75rem;}
    #header .gnb {display: none;}

    #header .util {gap: 1.6rem;}
    #header .langBtn {gap: 0.25rem;}
    #header .langBtn .ico {width: 1.4rem; height: 1.4rem; line-height: 1;}
    #header .langBtn .lb {font-size: 1.2rem; line-height: 1.5rem;}
    #header .langBtn .arr {width: 1.6rem; height: 1.6rem;}
    #header .langBox {top: calc(100% + 1.4rem); width: 8rem; padding: 0.6rem 0;}
    #header .langBox li a {height: 2.6rem; font-size: 1.2rem;}

    #header .allBtn {display: none;}
    #header .menuBtn {display: block; width: 2rem; height: 2rem;}
    /* 열리면 햄버거 대신 X */
    body.menuOpen #header .menuBtn .w,
    body.menuOpen #header .menuBtn .c {display: none;}
    body.menuOpen #header .menuBtn .x {display: block;}

    #header .subMenu {display: none !important;}

    /* 메뉴 판 : 헤더(90) 아래, 화면 전체. 닫혀 있을 땐 visibility 로 완전히 빼둡니다 */
    .mMenu {
        display: flex; flex-direction: column; z-index: 88;
        position: fixed; left: 0; top: 0; width: 100%; height: 100%;
        padding-top: 6rem; background: #fff;
        opacity: 0; visibility: hidden;
        transition: opacity 0.25s ease, visibility 0s 0.25s;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    body.menuOpen .mMenu {opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s 0s;}
    body.menuOpen {overflow: hidden;}

    /* 본문 : 왼쪽 1depth 250 / 오른쪽 2depth 나머지. 시안 높이 960 → 48rem 이 최소이고 남으면 늘어납니다 */
    .mMenu .mBody {flex: 1; min-height: 48rem;}
    .mMenu .depth1 {width: 12.5rem; flex-shrink: 0; background: #f4f4f4; border-right: 1px solid #e0e0e0;}
    .mMenu .depth1 li button, .mMenu .depth1 li > a {
        display: flex; align-items: center; justify-content: center;
        width: 100%; height: 6rem; padding: 0 0.5rem; color: var(--fct); font-family: inherit; white-space: nowrap;
    }
    .mMenu .depth1 li.on button {
        font-weight: 700; color: #fff;
        background: linear-gradient(90deg, var(--fcp) 0%, var(--fcs) 100%);
    }

    .mMenu .depth2 {flex: 1; min-width: 0;}
    .mMenu .depth2 > ul {display: none;}
    .mMenu .depth2 > ul.on {display: block;}
    .mMenu .depth2 li a {display: block; padding: 1.5rem 1.75rem; border-bottom: 1px solid #e0e0e0; line-height: 1.7rem;}
    .mMenu .depth2 li a:active {color: var(--fcp);}

    /* 복제된 푸터. 원본 .footer 규칙이 그대로 먹습니다 */
    .mMenu .mFoot {flex-shrink: 0;}
}


/* 푸터
   시안 : FOOTER 1:1395 (PC 142 높이) / FOOTER(MO) 1:6735 (750 × 420)
   왼쪽 로고 + 주소·전화 두 줄, 오른쪽 관련 사이트 버튼. 버튼을 누르면 위로 목록이 뜹니다. */
.footer {background: #232323;}
.footer .inner {padding: 4rem 15rem;}

.footer .info {gap: 7rem;}
.footer .logo {width: 18.6rem; height: 6.2rem; flex-shrink: 0;}
.footer .logo img {width: 100%; height: 100%; object-fit: contain;}

.footer .txt {opacity: 0.9;}
.footer .txt .row {gap: 1.5rem; line-height: 1.5;}
.footer .txt .row li {display: flex; align-items: center; gap: 0.6rem; white-space: nowrap;}
/* 항목 사이 세로 선 (1 × 13, 흰색 50%) */
.footer .txt .row li + li::before {content: ''; display: block; width: 1px; height: 1.3rem; margin-right: 0.9rem; background: rgba(255,255,255,0.5);}
.footer .txt .copy {margin-top: 0.8rem; line-height: 1.5; white-space: nowrap;}
/* 사용자 요청: Copyright 아래 관리자 진입 링크. 모바일 메뉴 복제 푸터에도 적용. */
.footer .txt .admin {display: inline-block; margin-top: 0.8rem; line-height: 1.5; color: #fff; transition: color 0.2s;}
.footer .txt .admin:hover, .footer .txt .admin:focus-visible {color: var(--fcp); text-decoration: underline; text-underline-offset: 0.3rem;}

.footer .family {flex-shrink: 0;}
.footer .familyBtn {
    gap: 2rem; padding: 1.2rem 2.2rem 1.2rem 2.6rem;
    background: #333; border-radius: 0.3rem; font-family: inherit; line-height: 1.5; white-space: nowrap;
}
.footer .familyBtn img {width: 1.8rem; height: 1.8rem; transition: transform 0.2s;}
.footer .family.on .familyBtn img {transform: scaleY(-1);}

/* 관련 사이트 목록 : PC·모바일 모두 버튼 너비에 맞춰 바로 위에 정렬합니다. */
.footer .familyList {
    position: absolute; left: 0; bottom: 100%; z-index: 5;
    width: 100%; padding: 0.8rem 0; background: #fff; border-radius: 0.3rem;
    box-shadow: 0 0.4rem 0.5rem rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; transform: translateY(0.5rem);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
.footer .family.on .familyList {opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s, visibility 0s 0s;}
.footer .familyList li a {display: flex; align-items: center; height: 3.5rem; padding: 0 1.2rem; white-space: nowrap;}
.footer .familyList li a:hover {background: #f4f4f4;}

@media all and (max-width: 880px){
    /* 세로로 쌓고 전부 가운데. 위아래 50 / 좌우 30, 로고 231 × 77, 글자 26 → 1.3rem */
    .footer .inner {flex-direction: column; gap: 1.5rem; padding: 2.5rem 1.5rem;}

    .footer .info {flex-direction: column; gap: 1rem;}
    .footer .logo {width: 11.55rem; height: 3.85rem;}

    .footer .txt {text-align: center;}
    .footer .txt .row {flex-wrap: wrap; justify-content: center; gap: 0.8rem 1.5rem; font-size: 1.3rem;}
    /* 주소는 한 줄을 다 쓰고, TEL · FAX 가 그 아래 한 줄에 놓입니다 */
    .footer .txt .row .addr {width: 100%; justify-content: center;}
    .footer .txt .row .addr + li::before {display: none;}
    .footer .txt .row li + li::before {height: 1.3rem; margin-right: 0.9rem;}
    .footer .txt .copy {margin-top: 0.8rem; font-size: 1.1rem;}
    .footer .txt .admin {font-size: 1.1rem;}

    .footer .familyBtn {gap: 5rem; padding: 0.75rem 1.1rem 0.75rem 1.3rem; font-size: 1.2rem;}
    .footer .familyBtn img {width: 1.1rem; height: 1.1rem;}


    .footer .familyList li a {height: 2.5rem; font-size: 1.1rem;}
}


/* ======================== 메인 ======================== */

/* 메인 비주얼 (#mainV)
   시안 : MAIN-1 1:1446 · MAIN-2 1:1472 / MOB 1:3567 · 1:3750
   높이 917. 사진은 Swiper(fade) 로 돌고, 글·퀵메뉴(.con)는 그 위에 고정입니다.
   사진은 어두운 오버레이와 이미지 투명도 없이 원본 밝기로 표시합니다. */
#mainV {height: 91.7rem; background: #000; overflow: hidden;}
#mainV .vSwiper {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#mainV .vSwiper .swiper-slide {overflow: hidden;}
#mainV .vSwiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}

/* 글 + 퀵메뉴 : 위 292 / 아래 80 / 좌우 150. 아래에 붙여 정렬합니다 */
/* Swiper 가 z-index 1 을 갖고 있어 글 묶음을 그 위(2)로 올립니다 */
#mainV .con {z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 29.2rem 15rem 8rem;}
#mainV .txtArea .tit {line-height: 1.5;}
#mainV .txtArea .subt {margin-top: 4rem; color: rgba(255,255,255,0.8); line-height: 1.7;}

/* 퀵메뉴 : 카드 6개(186.33 × 168) + 가스기술정보(430), 사이 12. 반투명 검정 + 블러 */
#mainV .quick {margin-top: 13.5rem; gap: 1.2rem;}
#mainV .quick li {flex: 1; min-width: 0;}
#mainV .quick li.tec {flex: none; width: 43rem;}
#mainV .quick li a {
    height: 16.8rem; padding: 3rem 1rem; gap: 1.4rem;
    background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 1rem; isolation: isolate; transition: box-shadow 0.2s;
}
#mainV .quick li a .ico {width: 4.8rem; height: 4.8rem;}
#mainV .quick li a .ico img {width: 100%; height: 100%;}
#mainV .quick li a .lb {line-height: 1.7; white-space: nowrap;}
#mainV .quick li a .lb .mo {display: none;}

/* 가스기술정보 카드 : 오른쪽 위 화살표, 아래 제목·설명. 여백 25 25 30 30 */
#mainV .quick li.tec a {padding: 2.5rem 2.5rem 3rem 3rem; gap: 0;}
#mainV .quick li.tec a .arr {display: flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem;}
#mainV .quick li.tec a .arr img {width: 1.9rem; height: 1.9rem;}
#mainV .quick li.tec a .txt strong {line-height: 1.5;}
#mainV .quick li.tec a .txt span {margin-top: 0.6rem; color: rgba(255,255,255,0.9); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* 호버 : 그라데이션은 background 직접 전환이 안 되므로 별도 레이어의 투명도로 0.2초 전환합니다.
   내용은 배경 위에 유지하며, 진입·이탈 모두 같은 속도로 동작합니다. */
#mainV .quick li a::before {content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(132deg, var(--fcp) 15%, var(--fcs) 100%); opacity: 0; transition: opacity 0.2s; pointer-events: none;}
#mainV .quick li.tec a::before {background: linear-gradient(154deg, var(--fcp) 15%, var(--fcs) 100%);}
#mainV .quick li a:hover::before,
#mainV .quick li a:focus-visible::before {opacity: 1;}
#mainV .quick li a:hover,
#mainV .quick li a:focus-visible {box-shadow: 0.4rem 0.4rem 0.2rem rgba(0,0,0,0.35);}

@media all and (max-width: 880px){
    /* 시안 750 ÷ 2 : 위 230 / 아래 100 / 좌우 50, 글은 가운데. 높이는 내용을 따라가되 시안(1391)만큼은 확보합니다 */
    #mainV {height: auto; min-height: 69.55rem;}

    #mainV .con {justify-content: center; min-height: 69.55rem; padding: 11.5rem 2.5rem 5rem; text-align: center;}
    #mainV .txtArea .tit {font-size: 2.5rem;}
    #mainV .txtArea .subt {margin-top: 1rem; font-size: 1.4rem;}

    /* 3열 × 2줄 + 가스기술정보 한 줄. 카드 208 → 10.4rem, 사이 12 → 0.6rem */
    #mainV .quick {flex-wrap: wrap; margin-top: 4rem; gap: 0.6rem;}
    #mainV .quick li {flex: none; width: calc((100% - 1.2rem) / 3);}
    #mainV .quick li.tec {width: 100%;}
    #mainV .quick li a {height: 10.4rem; padding: 1.5rem 0.5rem; gap: 0.5rem;}
    #mainV .quick li a .ico {width: 2.5rem; height: 2.5rem;}
    #mainV .quick li a .lb {font-size: 1.2rem;}
    /* 3번 카드 문구가 모바일 시안에서 "액체 헬륨 수입" 으로 다릅니다 */
    #mainV .quick li a .lb .pc {display: none;}
    #mainV .quick li a .lb .mo {display: inline;}

    #mainV .quick li.tec a {height: 10rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem; text-align: left;}
    #mainV .quick li.tec a .arr {width: 1.6rem; height: 1.6rem;}
    #mainV .quick li.tec a .arr img {width: 1.6rem; height: 1.6rem;}
    #mainV .quick li.tec a .txt strong {font-size: 1.2rem;}
    #mainV .quick li.tec a .txt span {margin-top: 0.3rem; font-size: 1rem;}
}


/* 관련 기관 로고 띠 (#relLogo)
   회색 띠 80 높이, 4칸 균등. 로고 원본 비율을 유지하며 표시 크기와 칸 여백을 조정합니다. */
#relLogo {background: #f4f4f4;}
#relLogo .inner {height: 8rem; padding: 1.2rem 12rem; gap: 3rem;}
#relLogo li {flex: 1; min-width: 0; height: 100%;}
#relLogo li a {display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 1rem;}
#relLogo li a img {max-width: 100%; max-height: 5.4rem; width: auto; height: auto; object-fit: contain;}

@media all and (max-width: 880px){
    #relLogo .inner {height: 5.5rem; padding: 0.9rem 1rem; gap: 0.6rem;}
    #relLogo li a {padding: 0;}
    #relLogo li a img {max-height: 2.7rem;}
}

/* 회사소개 서브 공통 — PC 1216:11269 / MOB 1216:13480
   PC 비주얼 480, 탭 64. 배경은 사용자가 딤까지 포함해 추출했으므로 추가 오버레이 없음. */
#subV {height: 48rem; background: url('../img/company_sub_visual_1.jpg') no-repeat center / cover;}
#subV .titArea {padding-top: 21.9rem;}
#subV .tit {line-height: 1.35;}
#subV .subt {margin-top: 1.8rem; line-height: 1.35; color: rgba(255,255,255,0.8);}
#subV .sub_tab {position: absolute; bottom: 0; left: 15rem; right: 15rem; background: rgba(255,255,255,0.9); border-radius: 1rem 1rem 0 0; overflow: hidden;}
#subV .sub_tab li {flex: 1; min-width: 0;}
#subV .sub_tab a {display: flex; align-items: center; justify-content: center; height: 6.4rem; padding: 0 1rem; color: #333; white-space: nowrap;}
/* 시안 1350:6374 : 호버는 흰색 90% 배경·진한 그린·SemiBold, 현재 메뉴만 그라데이션. */
#subV .sub_tab a:not(.on):hover,
#subV .sub_tab a:not(.on):focus-visible {background: rgba(255,255,255,0.9); color: var(--fcs); font-weight: 600;}
#subV .sub_tab a.on {background: linear-gradient(90deg,var(--fcp),var(--fcs)); color: rgba(255,255,255,0.9);}
@media all and (max-width: 880px){
    #subV {height: 22.5rem; background-image: url('../img/company_sub_visual_1_mo.jpg');}
    #subV .titArea {padding-top: 9.415rem;}
    #subV .tit {font-size: 2.1rem;}
    #subV .subt {margin-top: 0.75rem; font-size: 1.3rem; line-height: 1.5;}
    #subMenu {z-index: 20;}
    #subMenu .subBtn {height: 4rem; padding: 0 1.5rem; font-size: 1.3rem; background: linear-gradient(90deg,var(--fcp),var(--fcs));}
    #subMenu .subBtn img {width: 1.6rem; height: 1.6rem; transition: transform 0.2s;}
    #subMenu .subBtn[aria-expanded="true"] img {transform: rotate(180deg);}
    #subMenu ul {position: absolute; top: 100%; left: 0; width: 100%; background: #fff; box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.12);}
    #subMenu li a {display: block; padding: 1.2rem 1.5rem; font-size: 1.3rem; color: var(--fct);}
    #subMenu li a.on {color: var(--fcs); background: #f4f4f4;}
}

/* 대표인사말 — PC 1216:11269 / MOB 1216:13480
   PC 좌우 150, 사진 683×460, 사이 82. 회색 배경은 사진 상단보다 151 아래에서 시작.
   모바일은 750 시안을 절반 환산. 사진 너비 683은 시안대로 유지하되 좁은 폭에서는 축소. */
.greeting #s1 {padding: 11rem 0 12rem;}
.greeting #s1::before {content: ''; position: absolute; left: 0; right: 0; top: 43.7rem; bottom: 0; background: #f4f4f4;}
.greeting #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.greeting #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.greeting #s1 .inner {margin-top: 10rem; padding: 0 15rem; gap: 8.2rem;}
.greeting #s1 .img {width: 68.3rem; flex-shrink: 0;}
.greeting #s1 .img img {height: auto; border-radius: 1rem;}
.greeting #s1 .txt {flex: 1; min-width: 0; padding-top: 2rem;}
.greeting #s1 .txt .tit {line-height: 1.5; letter-spacing: -0.068rem;}
.greeting #s1 .txt .tit span {margin-top: 0.3rem; background: linear-gradient(90deg,var(--fcp),var(--fcs)); background-clip: text; -webkit-background-clip: text; color: transparent;}
.greeting #s1 .desc {margin-top: 5rem; line-height: 1.6; letter-spacing: -0.036rem; word-break: keep-all; overflow-wrap: break-word;}
.greeting #s1 .desc p + p {margin-top: 2.88rem;}
.greeting #s1 .ceo {margin-top: 5rem; gap: 1rem; line-height: 1.7;}
@media all and (max-width: 880px){
    .greeting #s1 {padding: 5rem 0 7.5rem;}
    .greeting #s1::before {top: 23.1rem;}
    .greeting #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .greeting #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .greeting #s1 .inner {flex-direction: column; margin-top: 4rem; padding: 0 1.5rem; gap: 2rem;}
    .greeting #s1 .img {width: 34.15rem; max-width: 100%;}
    .greeting #s1 .img img {border-radius: 0.5rem;}
    .greeting #s1 .txt {width: 100%; padding-top: 0;}
    .greeting #s1 .txt .tit {font-size: 1.7rem; letter-spacing: -0.034rem;}
    .greeting #s1 .txt .tit span {margin-top: 0.15rem;}
    .greeting #s1 .desc {margin-top: 1rem; font-size: 1.3rem; letter-spacing: -0.026rem; word-break: normal;}
    .greeting #s1 .desc p + p {margin-top: 2.08rem;}
    .greeting #s1 .ceo {margin-top: 2.5rem; gap: 0.5rem;}
    .greeting #s1 .ceo span, .greeting #s1 .ceo strong {font-size: 1.2rem;}
}

/* 맨 위로 — PC 1216:10790 / MOB 1330:11680. 화살표 원본 사용, 박스는 CSS로 구성. */
#scrollTop {position: fixed; right: 0; top: 36rem; z-index: 40; width: 5.3rem; height: 20rem; background: var(--fcs); clip-path: polygon(0 8%,100% 0,100% 100%,0 92%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;}
/* 호버 시안 1216:10797 : 글자·화살표는 그대로 두고 세로 그라데이션만 부드럽게 표시합니다. */
#scrollTop::before {content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--fcs), var(--fcp)); opacity: 0; transition: opacity 0.2s; pointer-events: none;}
#scrollTop:hover::before,
#scrollTop:focus-visible::before {opacity: 1;}
#scrollTop span {writing-mode: vertical-rl; font-size: 1.6rem; line-height: 1;}
#scrollTop img {width: 2rem; height: 2rem; object-fit: contain;}
@media all and (max-width: 880px){
    #scrollTop {top: 31.9rem; width: 3.25rem; height: 12.3rem; gap: 0.5rem;}
    #scrollTop span {font-size: 1.1rem;}
    #scrollTop img {width: 1.5rem; height: 1.5rem;}
}

/* 경영이념 — PC 1216:11702 / MOB 1216:13501
   중앙 연결도는 사용자 제공 PNG(PC 445×293 / MO 230×270)를 사용합니다.
   PC 제목·심볼·하단 카드는 50% 중심축을 공유합니다. 좌우 카드는 중심에서 19.45rem 떨어진 선 끝에 맞춥니다. 모바일은 세로 목록으로 전환합니다. */
.philosophy #s1 {padding: 11rem 0 15rem;}
.philosophy #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.philosophy #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.philosophy #s1 .inner {margin: 13rem auto 0; width: 162rem; max-width: calc(100% - 6rem);}
.philosophy #s1 .subt p {color: var(--fcs); line-height: 1.5;}
.philosophy #s1 .subt h3 {margin-top: 0.8rem; line-height: 1.35;}
.philosophy #s1 .con {width: 146.4rem; max-width: 100%; height: 44.715rem; margin: 10rem auto 7rem;}
.philosophy #s1 .symbol {display: block; position: absolute; width: 44.5rem; left: 50%; top: 1.927rem; transform: translateX(-50%);}
.philosophy #s1 .symbol img {display: block; width: 100%; height: auto;}
.philosophy #s1 .list li {position: absolute; top: 0; left: 0; padding: 3rem 4.2rem; gap: 1.5rem; border: 0.1rem solid #e0e0e0; border-radius: 1rem; background: #f3f5ef;}
.philosophy #s1 .list li:first-child {left: auto; right: calc(50% + 19.45rem);}
.philosophy #s1 .list li:nth-child(2) {left: calc(50% + 19.45rem);}
.philosophy #s1 .list li:nth-child(3) {top: 31.215rem; left: 50%; transform: translateX(-50%);}
.philosophy #s1 .ico {width: 7.5rem; height: 7.5rem; flex-shrink: 0; object-fit: contain;}
.philosophy #s1 .txt {white-space: nowrap; line-height: 1.35;}
.philosophy #s1 .txt h4 {font-weight: 400;}
.philosophy #s1 .txt p {margin-top: 0.7rem;}
.philosophy #s1 .txt em {font-style: normal; color: var(--fcs);}
@media all and (max-width: 880px){
    .philosophy #s1 {padding: 5rem 1.5rem 7.5rem;}
    .philosophy #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .philosophy #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .philosophy #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .philosophy #s1 .subt p {font-size: 1.2rem;}
    .philosophy #s1 .subt h3 {margin-top: 0.4rem; font-size: 1.7rem;}
    .philosophy #s1 .con {width: 100%; height: auto; margin: 2.5rem 0 0;}
    .philosophy #s1 .symbol {position: relative; top: auto; left: auto; width: 11.5rem; margin: 0 auto; transform: none;}
    .philosophy #s1 .list li {position: relative; top: auto; left: auto; flex-direction: column; padding: 1.25rem 1.25rem 2rem; gap: 0.5rem; border-radius: 0.5rem;}
    .philosophy #s1 .list li:first-child, .philosophy #s1 .list li:nth-child(2), .philosophy #s1 .list li:nth-child(3) {top: auto; left: auto; right: auto; transform: none;}
    .philosophy #s1 .list li + li {margin-top: 0.5rem;}
    .philosophy #s1 .ico {width: 3.75rem; height: 3.75rem;}
    .philosophy #s1 .txt {white-space: normal; text-align: center; word-break: keep-all;}
    .philosophy #s1 .txt h4 {font-size: 1.2rem;}
    .philosophy #s1 .txt p {margin-top: 0.35rem; font-size: 1.3rem;}
}

/* 회사연혁 — PC 1216:11761 / MOB 1216:13555
   PC 사진 683×400, 좌우 간격 113, 연혁 카드 751. 세로선은 시대 사이에도 이어집니다.
   모바일에서는 사진 다음에 연혁을 배치하며 각 시대의 첫 점부터 마지막 점까지만 연결합니다. */
.history #s1 {padding: 11rem 0 15rem;}
.history #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.history #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.history #s1 .inner {margin: 13rem auto 0; width: 162rem; max-width: calc(100% - 6rem);}
.history #s1 .con {gap: 11.3rem; align-items: stretch; color: #333;}
.history #s1 .con + .con {margin-top: 15rem;}
.history #s1 .intro {width: 68.3rem; flex-shrink: 0;}
.history #s1 .logo {display: block; width: 22.36rem; height: 6.5rem;}
.history #s1 .subt p {margin-top: 1.5rem; line-height: 1.35;}
.history #s1 .tab {gap: 1rem; margin: 4rem 0;}
.history #s1 .tab a {padding: calc(1rem - 0.1rem) calc(2.2rem - 0.1rem); border: 0.1rem solid #e0e0e0; border-radius: 5rem; line-height: 1.5; color: #555; white-space: nowrap; transition: background 0.2s, color 0.2s;}
.history #s1 .tab a.on, .history #s1 .tab a:hover, .history #s1 .tab a:focus-visible {background: var(--fcs); border-color: var(--fcs); color: #fff;}
.history #s1 .img + .img {margin-top: 2rem;}
.history #s1 .img > img {display: block; width: 100%; height: auto; aspect-ratio: 683 / 400; object-fit: cover; border-radius: 1rem;}
.history #s1 .img figcaption {position: absolute; top: 1.5rem; left: 1.5rem; padding: 0.7rem 1.4rem; border-radius: 0.5rem; background: rgba(0,0,0,0.6); line-height: 1.35;}
.history #s1 .list {flex: 1; min-width: 0;}
.history #s1 .list::before {content: ''; position: absolute; top: 6.5rem; bottom: -21.5rem; left: 0.5rem; width: 0.1rem; background: #e0e0e0;}
.history #s1 .con:last-child .list::before {bottom: 6.5rem;}
.history #s1 .list li {padding-left: 7.3rem;}
.history #s1 .list li + li {margin-top: 3.4rem;}
.history #s1 .list li::before {content: ''; position: absolute; left: 0; top: calc(50% - 0.5rem); width: 1rem; height: 1rem; background: #e0e0e0; border-radius: 50%;}
.history #s1 .txt {border: 0.1rem solid #e0e0e0; border-radius: 1rem; padding: calc(3rem - 0.1rem); background: #fff; line-height: 1.5;}
/* 연혁 호버 1216:11783 : 1.5px 포인트 테두리와 아래 그림자. 가상 요소로 크기·본문 위치를 유지합니다. */
.history #s1 .list .txt::after {content: ''; position: absolute; inset: -0.1rem; border: 0.15rem solid var(--fcp); border-radius: inherit; box-shadow: 0 0.4rem 0.5rem rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.2s; pointer-events: none;}
.history #s1 .list li:hover .txt::after {opacity: 1;}
.history #s1 .desc {margin-top: 1.3rem;}
.history #s1 .desc p + p {margin-top: 0.7rem;}
.history #s1 .desc .point {color: var(--fcs);}
.history #s1 .desc sub {font-size: 65%;}
@media all and (max-width: 880px){
    .history #s1 {padding: 5rem 1.5rem 7.5rem;}
    .history #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .history #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .history #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .history #s1 .con {flex-direction: column; gap: 2.5rem;}
    .history #s1 .con + .con {margin-top: 7.5rem;}
    .history #s1 .intro {width: 100%;}
    .history #s1 .logo {width: 11.18rem; height: 3.25rem;}
    .history #s1 .subt p {margin-top: 0.75rem; font-size: 1.3rem; line-height: 1.5;}
    .history #s1 .tab {gap: 0.4rem; margin: 1.5rem 0;}
    .history #s1 .tab a {display: flex; align-items: center; justify-content: center; flex: 1; padding: 0.5rem 0; height: 3.25rem; font-size: 1.2rem; border-radius: 2.5rem;}
    .history #s1 .imgs {width: 34.15rem; max-width: 100%;}
    .history #s1 .img + .img {margin-top: 1rem;}
    .history #s1 .img > img {border-radius: 0.5rem;}
    .history #s1 .img figcaption {top: 0.75rem; left: 0.75rem; padding: 0.35rem 0.7rem; border-radius: 0.25rem; font-size: 1.3rem;}
    .history #s1 .list::before, .history #s1 .con:last-child .list::before {top: 3.3rem; bottom: 3.3rem; left: 0.25rem;}
    .history #s1 .list li {padding-left: 2rem;}
    .history #s1 .list li + li {margin-top: 1rem;}
    .history #s1 .list li::before {width: 0.5rem; height: 0.5rem; top: calc(50% - 0.25rem);}
    .history #s1 .txt {padding: calc(1.25rem - 0.1rem) calc(1.5rem - 0.1rem); border-radius: 0.5rem;}
    .history #s1 .txt h3 {font-size: 1.4rem;}
    .history #s1 .desc {margin-top: 0.65rem; font-size: 1.3rem; overflow-wrap: break-word;}
    .history #s1 .desc p + p {margin-top: 0.35rem;}
}

/* 조직도 — PC 1216:11862 / MOB 1216:13858
   배경과 조직명이 포함된 사용자 원본 사용. PC 795×732 두 장, 간격 30.
   모바일 원본은 시안 690폭의 1.5배 추출본이며 표시 폭은 34.5rem 기준으로 축소합니다. */
.organization #s1 {padding: 11rem 0 15rem;}
.organization #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.organization #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.organization #s1 .inner {margin: 13rem auto 0; width: 162rem; max-width: calc(100% - 6rem); gap: 3rem; align-items: flex-start;}
.organization #s1 .img {display: block; flex: 1; min-width: 0;}
.organization #s1 .img img {display: block; width: 100%; height: auto;}
@media all and (max-width: 880px){
    .organization #s1 {padding: 5rem 1.5rem 7.5rem;}
    .organization #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .organization #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .organization #s1 .inner {width: 100%; max-width: none; margin-top: 4rem; flex-direction: column; gap: 1.5rem;}
    .organization #s1 .img {width: 100%; flex: auto;}
}

/* 공장 현황 — PC 1216:11953 / MOB 1216:13947
   inner 1620, 카드 520, 간격 30. 테두리를 패딩 안에 포함해 시안 이미지 폭 480 유지.
   제공 사진은 모바일 시안 650×290의 1.5배 추출본. 모바일은 750 시안을 절반 환산. */
.factories #s1 {padding: 11rem 0 15rem;}
.factories #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.factories #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.factories #s1 .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0; gap: 3rem;}
.factories #s1 .inner li {flex: 1; min-width: 0; border: 0.1rem solid #ccc; border-radius: 1.2rem; padding: 1.9rem 1.9rem 2.9rem;}
/* 카드 호버 1216:12236 : 1.5px 포인트 테두리·아래 그림자. 카드와 이미지 크기는 유지. */
.factories #s1 .inner li::after {content: ''; position: absolute; inset: -0.1rem; border: 0.15rem solid var(--fcp); border-radius: inherit; box-shadow: 0 0.4rem 0.5rem rgba(0,0,0,0.1); opacity: 0; transition: opacity 0.2s; pointer-events: none;}
.factories #s1 .inner li:hover::after {opacity: 1;}
.factories #s1 .img {display: block; width: 100%; height: 23rem; object-fit: cover; border-radius: 1rem;}
.factories #s1 figcaption {margin-top: 2.5rem; line-height: 1.35; color: var(--fct);}
@media all and (max-width: 880px){
    .factories #s1 {padding: 5rem 1.5rem 7.5rem;}
    .factories #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .factories #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .factories #s1 .inner {width: 100%; max-width: none; margin-top: 4rem; flex-direction: column; gap: 1.5rem;}
    .factories #s1 .inner li {padding: 0.9rem 0.9rem 1.4rem; border-radius: 0.6rem;}
    .factories #s1 .img {height: 14.5rem; border-radius: 0.5rem;}
    .factories #s1 figcaption {margin-top: 1.25rem; font-size: 1.3rem;}
}

/* 인증 및 특허 — PC 1216:11966 / MOB 1216:13964
   inner 1620, PC 5열(300)·가로30/세로70, 모바일 2열·가로15/세로25.
   기획의 원본 비율 유지에 따라 인증서는 contain. 클릭·확대 없이 호버 1216:12258만 반영. */
.certifications #s1 {padding: 11rem 0 15rem;}
.certifications #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.certifications #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.certifications #s1 .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.certifications #s1 .list {display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7rem 3rem;}
.certifications #s1 .list li {min-width: 0; cursor: default;}
.certifications #s1 .img {display: flex; align-items: center; justify-content: center; height: 42rem; border: 0.1rem solid #e0e0e0; border-radius: 0.5rem; background: #fff;}
.certifications #s1 .img img {width: 100%; height: 100%; object-fit: contain; border-radius: inherit;}
.certifications #s1 .img::after {content: ''; position: absolute; inset: -0.1rem; border: 0.15rem solid var(--fcp); border-radius: inherit; opacity: 0; transition: opacity 0.2s; pointer-events: none;}
.certifications #s1 figcaption {margin-top: 2.5rem; line-height: 1.35; color: var(--fct); overflow-wrap: anywhere; }
.certifications #s1 .list li:hover .img::after {opacity: 1;}
.certifications #s1 .list li:hover figcaption {color: var(--fcp); font-weight: 600;}
.certifications #s1 .empty {padding: 10rem 0; color: #555;}
.certifications #s1 .category {gap: 1rem; flex-wrap: wrap; margin-bottom: 4rem;}
.certifications #s1 .category a {padding: 1rem 2rem; border: 0.1rem solid #e0e0e0; border-radius: 3rem;}
.certifications #s1 .category a.on, .certifications #s1 .category a:hover {background: var(--fcs); color: #fff;}
.certifications #s1 .paging {justify-content: center; gap: 1rem; margin-top: 10rem; font-size: 1.8rem;}
.certifications #s1 .paging a, .certifications #s1 .paging span {display: flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; border-radius: 0.5rem; color: #333;}
.certifications #s1 .paging .on {background: var(--fcs); color: #fff;}
.certifications #s1 .paging a:hover {color: var(--fcs); background: #f4f4f4;}
.certifications #s1 .paging .prev, .certifications #s1 .paging .next {gap: 0.5rem; padding: 0 0.8rem; color: #555;}
.certifications #s1 .paging .prev::before, .certifications #s1 .paging .next::after {content: ''; width: 2rem; height: 2rem; background: url('../img/ic_lang_arr_c.svg') center / contain no-repeat; transform: rotate(-90deg);}
.certifications #s1 .paging .prev::before {transform: rotate(90deg);}
@media all and (max-width: 880px){
    .certifications #s1 {padding: 5rem 1.5rem 7.5rem;}
    .certifications #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .certifications #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .certifications #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .certifications #s1 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem 1.5rem;}
    .certifications #s1 .img {height: 21rem; border-radius: 0.25rem;}
    .certifications #s1 figcaption {margin-top: 1.25rem; font-size: 1.3rem;}
    .certifications #s1 .category {margin-bottom: 2rem; gap: 0.5rem;}
    .certifications #s1 .category a {font-size: 1.3rem; padding: 0.5rem 1rem;}
    .certifications #s1 .empty {padding: 5rem 0; font-size: 1.3rem;}
    .certifications #s1 .paging {gap: 0.5rem; margin-top: 4rem; font-size: 1.2rem;}
    .certifications #s1 .paging a, .certifications #s1 .paging span {min-width: 2.75rem; height: 2.75rem; border-radius: 0.25rem;}
    .certifications #s1 .paging .prev, .certifications #s1 .paging .next {padding: 0 0.4rem; gap: 0.25rem;}
}

/* CI — PC 1216:11994 / MOB 1216:14025
   inner1620, 섹션 간격100. 로고타입은 배경 포함 원본으로 PC520×240 / 모바일345×120.
   시안에 다운로드·카드 호버 없음. 컬러값은 공통 색 변수와 연결합니다. */
.ci #s1 {padding: 11rem 0 15rem;}
.ci #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.ci #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.ci #s1 .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.ci #s1 .visual {height: 25.3rem; justify-content: center; background: #f4f4f4; border-radius: 1rem;}
.ci #s1 .visual img {width: 34.52rem; height: 7.331rem; object-fit: contain;}
.ci #s1 .con {margin-top: 10rem;}
.ci #s1 .subt {display: flex; align-items: center; gap: 1rem; line-height: 1.35; margin-bottom: 3rem;}
.ci #s1 .subt::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.207rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(-45deg); flex-shrink: 0;}
.ci #s1 .logos {gap: 3rem;}
.ci #s1 .logos li {flex: 1; min-width: 0;}
.ci #s1 .logos picture, .ci #s1 .logos img {display: block; width: 100%; height: auto;}
.ci #s1 figcaption {margin-top: 1.8rem; line-height: 1.35;}
.ci #s1 .colors {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; line-height: 1.35;}
.ci #s1 .colors li {display: flex; flex-direction: column; justify-content: space-between; min-width: 0; height: 23rem; padding: 3.2rem 3rem 3.2rem 3.2rem; border-radius: 1rem;}
.ci #s1 .deep {background: var(--fcs);}
.ci #s1 .yellow {background: var(--fcp);}
.ci #s1 .brown {background: var(--fct);}
.ci #s1 .info {opacity: 0.9;}
.ci #s1 .info div {gap: 2rem;}
.ci #s1 .info div + div {margin-top: 0.2rem;}
.ci #s1 .info dt {width: 4.2rem; flex-shrink: 0;}
.ci #s1 .colors .gradation {grid-column: 1 / -1; height: auto; flex-direction: row; align-items: center; padding-top: 2.2rem; padding-bottom: 2.2rem; background: linear-gradient(90deg,var(--fcp),var(--fcs));}
.ci #s1 .gradation .info div {gap: 1.4rem;}
.ci #s1 .gradation .info dt {width: auto;}
@media all and (max-width: 880px){
    .ci #s1 {padding: 5rem 1.5rem 7.5rem;}
    .ci #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .ci #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .ci #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .ci #s1 .visual {height: 12.65rem; border-radius: 0.5rem;}
    .ci #s1 .visual img {width: 20.0125rem; max-width: 90%; height: 4.25rem;}
    .ci #s1 .con {margin-top: 5rem;}
    .ci #s1 .subt {font-size: 1.7rem; gap: 0.5rem; margin-bottom: 1.5rem;}
    .ci #s1 .subt::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1035rem; border-radius: 0.05rem;}
    .ci #s1 .logos {flex-direction: column; gap: 1.5rem;}
    .ci #s1 figcaption {margin-top: 0.9rem; font-size: 1.4rem;}
    .ci #s1 .colors {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.5rem;}
    .ci #s1 .colors li, .ci #s1 .colors .gradation {grid-column: auto; height: 11.5rem; padding: 1.5rem; border-radius: 0.5rem; flex-direction: column; align-items: flex-start;}
    .ci #s1 .colors h4 {font-size: 1.4rem;}
    .ci #s1 .info {font-size: 1.1rem;}
    .ci #s1 .info div, .ci #s1 .gradation .info div {gap: 1rem;}
    .ci #s1 .info div + div {margin-top: 0.1rem;}
    .ci #s1 .info dt {width: 2.6rem;}
    .ci #s1 .gradation .info {font-size: 1rem; white-space: nowrap;}
}


/* 주요 고객사: PC 1216:12142 / MOB 1216:14172. 호버 1216:12272, 목록 전용. */
.clients #s1 {padding: 11rem 0 15rem;}
.clients #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.clients #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.clients #s1 .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.clients #s1 .list {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3rem;}
.clients #s1 .list li {position: relative; min-width: 0; padding: 1.9rem 1.9rem 2.9rem; border: 0.1rem solid #e0e0e0; border-radius: 1.2rem; background: #fff; cursor: default; transition: box-shadow 0.2s;}
.clients #s1 .img {display: flex; align-items: center; justify-content: center; height: 9.47rem;}
.clients #s1 .img img {width: 100%; height: 100%; object-fit: contain; border-radius: inherit;}
.clients #s1 .list li::after {content: ''; position: absolute; inset: -0.1rem; border: 0.15rem solid var(--fcp); border-radius: inherit; opacity: 0; transition: opacity 0.2s; pointer-events: none;}
.clients #s1 figcaption {margin-top: 1.5rem; line-height: 1.35; color: var(--fct); overflow-wrap: anywhere; transition: color 0.2s;}
.clients #s1 .list li:hover::after {opacity: 1;}
.clients #s1 .list li:hover {box-shadow: 0 0.4rem 0.5rem rgba(0,0,0,0.1);}
.clients #s1 .empty {padding: 10rem 0; color: #555;}
.clients #s1 .category {gap: 1rem; flex-wrap: wrap; margin-bottom: 4rem;}
.clients #s1 .category a {padding: 1rem 2rem; border: 0.1rem solid #e0e0e0; border-radius: 3rem;}
.clients #s1 .category a.on, .clients #s1 .category a:hover {background: var(--fcs); color: #fff;}
.clients #s1 .paging {justify-content: center; gap: 1rem; margin-top: 10rem; font-size: 1.8rem;}
.clients #s1 .paging a, .clients #s1 .paging span {display: flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; border-radius: 0.5rem; color: #333;}
.clients #s1 .paging .on {background: var(--fcs); color: #fff;}
.clients #s1 .paging a:hover {color: var(--fcs); background: #f4f4f4;}
.clients #s1 .paging .prev, .clients #s1 .paging .next {gap: 0.5rem; padding: 0 0.8rem; color: #555;}
.clients #s1 .paging .prev::before, .clients #s1 .paging .next::after {content: ''; width: 2rem; height: 2rem; background: url('../img/ic_lang_arr_c.svg') center / contain no-repeat; transform: rotate(-90deg);}
.clients #s1 .paging .prev::before {transform: rotate(90deg);}
@media all and (max-width: 880px){
    .clients #s1 {padding: 5rem 1.5rem 7.5rem;}
    .clients #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .clients #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .clients #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .clients #s1 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem;}
    .clients #s1 .list li {padding: 0.95rem 0.95rem 1.45rem; border-width: 0.05rem; border-radius: 0.6rem;}
    .clients #s1 .img {height: 4.75rem;}
    .clients #s1 figcaption {margin-top: 0.75rem; font-size: 1.3rem;}
    .clients #s1 .category {margin-bottom: 2rem; gap: 0.5rem;}
    .clients #s1 .category a {font-size: 1.3rem; padding: 0.5rem 1rem;}
    .clients #s1 .empty {padding: 5rem 0; font-size: 1.3rem;}
    .clients #s1 .paging {gap: 0.5rem; margin-top: 4rem; font-size: 1.2rem;}
    .clients #s1 .paging a, .clients #s1 .paging span {min-width: 2.75rem; height: 2.75rem; border-radius: 0.25rem;}
    .clients #s1 .paging .prev, .clients #s1 .paging .next {padding: 0 0.4rem; gap: 0.25rem;}
}

/* 찾아오시는 길: PC 1216:12164 / MOB 1216:14215. 지도 이미지는 각각 원본 비율로 표시. */
.location #s1 {padding: 11rem 0 15rem;}
.location #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.location #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.location #s1 .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.location #s1 .map {display: block; border-radius: 1rem; overflow: hidden;}
.location #s1 .map picture, .location #s1 .map img {display: block; width: 100%;}
.location #s1 .map img {height: 50rem; object-fit: cover;}
.location #s1 .info {gap: 6rem; margin-top: 2rem; padding: 4.5rem; border-radius: 1rem; overflow: hidden; background: linear-gradient(90deg,var(--fcs),var(--fcp) 216.14%); line-height: 1.35;}
/* 제공된 장식 이미지는 시안의 우측 잘린 영역. 비율을 유지하며 정보 박스 높이에 맞춥니다. */
.location #s1 .info::before {content: ''; position: absolute; right: 0; bottom: 0; width: 10.25rem; height: 12.2rem; background: url('../img/company_location_bg.png') right bottom / contain no-repeat; pointer-events: none;}
.location #s1 .addr {gap: 1.2rem; flex-shrink: 0;}
.location #s1 .ico {width: 3.2rem; height: 3.2rem; flex-shrink: 0;}
.location #s1 .list {gap: 3rem; flex-wrap: wrap;}
.location #s1 .list > div {gap: 1rem;}
.location #s1 .list dt {flex-shrink: 0;}
.location #s1 .list dd {overflow-wrap: anywhere;}
.location #s1 a:focus-visible {outline: 0.2rem solid var(--fcp); outline-offset: 0.3rem;}
@media all and (max-width: 880px){
    .location #s1 {padding: 5rem 1.5rem 7.5rem;}
    .location #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .location #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .location #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .location #s1 .map {border-radius: 0.5rem;}
    .location #s1 .map img {height: 25rem;}
    .location #s1 .info {flex-direction: column; align-items: flex-start; gap: 2rem; margin-top: 1rem; padding: 2.25rem; border-radius: 0.5rem;}
    .location #s1 .info::before {width: 12.9rem; height: 15.35rem;}
    .location #s1 .addr {gap: 0.6rem; font-size: 1.6rem;}
    .location #s1 .ico {width: 1.6rem; height: 1.6rem;}
    .location #s1 .list {flex-direction: column; gap: 0.75rem; font-size: 1.3rem;}
    .location #s1 .list > div {gap: 1.5rem;}
    .location #s1 .list dt {width: 4.75rem;}
}

/* 사업분야 공통 비주얼: PC 579:3809 / MOB 1216:14400. 제공 이미지의 딤 유지. */
#subV.business {background-image: url('../img/sub_visual_2.jpg');}
/* 산업용 가스 PC 1216:12363. 취급제품 주석에 따라 아래첨자와 공백 보존. */
.industrial > .titArea {padding-top: 11rem;}
.industrial > .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.industrial > .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.industrial > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 13rem auto 0; padding-bottom: 15rem;}
.industrial section + section {margin-top: 10rem;}
.industrial section > .tit {display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; line-height: 1.35;}
.industrial section > .tit::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(45deg); flex-shrink: 0;}
.industrial .list {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem;}
.industrial .box {min-width: 0; padding: 3rem 3.5rem; border: 0.1rem solid #ccc; border-radius: 1rem;}
.industrial .txt {min-width: 0;}
.industrial > .inner .subt {display: flex; align-items: baseline; gap: 0.8rem; line-height: 1.35;}
.industrial > .inner .subt::before {content: ''; flex-shrink: 0; width: 0.4rem; height: 1.7rem; border-radius: 0.1rem; background: var(--fcs);}
.industrial .visual {display: block; width: 100%; height: 65rem; object-fit: cover; border-radius: 1rem;}
.industrial sub {font-size: 64.5%; line-height: 0; vertical-align: sub;}
.industrial #s1 .box {gap: 4rem;}
.industrial #s1 .ico {width: 20rem; height: 20rem; flex-shrink: 0; justify-content: center; gap: 2rem; background: #f3f5ef; border-radius: 1rem;}
.industrial #s1 .ico img {width: 7rem; height: 7rem; object-fit: contain;}
.industrial #s1 .txt {flex: 1; line-height: 1.5;}
.industrial #s1 .row + .row {margin-top: 1.8rem;}
.industrial #s1 .row:not(:last-child) {padding-bottom: 1.5rem; border-bottom: 0.1rem dashed #ccc;}
.industrial #s1 .formula {white-space: pre-wrap;}
.industrial #s1 .detail {gap: 2.7rem; margin-top: 1rem; color: #555; letter-spacing: -0.02em;}
.industrial #s1 .detail > span {white-space: nowrap;}
.industrial #s2 .list {grid-template-columns: repeat(4,minmax(0,1fr));}
.industrial #s2 .list li {overflow: hidden; border: 0.1rem solid #e0e0e0; border-radius: 1.2rem; background: #454545;}
.industrial #s2 .list img {display: block; width: 100%; height: 22rem; object-fit: cover;}
.industrial #s2 figcaption {padding: 1.3rem 0; line-height: 1.35;}
.industrial #s2 .con {gap: 4rem; margin-top: 3rem; padding: 3rem 3.5rem; border-radius: 1rem; background: #f4f4f4;}
.industrial #s2 .con .img {width: 30rem; height: 22rem; border-radius: 1.2rem; object-fit: cover; flex-shrink: 0;}
.industrial #s2 .desc {margin-top: 2rem; line-height: 2; padding-left: 2.7rem;}
.industrial #s3 .box {margin-top: 3rem; line-height: 1.35;}
.industrial #s3 .list {margin-top: 2rem;}
.industrial #s3 .list > div {gap: 2rem; padding: 3rem 4rem; background: #f4f4f4; border-radius: 1rem;}
.industrial #s3 dt {flex-shrink: 0;}
.industrial #s3 dd {line-height: 1.5;}
.industrial #s4 .list {grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center;}
.industrial #s4 .box {padding: 4rem 2rem; text-align: center;}
.industrial #s4 .ico {width: 6rem; height: 6rem; object-fit: contain; margin-bottom: 2rem;}
.industrial #s4 .txt {line-height: 1.5;}
.industrial #s4 .txt p {margin-top: 0.7rem;}
.industrial #s5 .subt {display: block; padding-left: 1.2rem; margin: 3rem 0 2rem;}
.industrial #s5 .subt::before {position: absolute; left: 0; top: 0.6rem;}
.industrial #s5 .subt span {color: var(--fcs);}
.industrial #s5 .box {justify-content: space-between; gap: 3rem; line-height: 1.5;}
.industrial #s5 .txt p {margin-top: 1rem;}
.industrial #s5 .ico {width: 4.5rem; height: 4.5rem; object-fit: contain; flex-shrink: 0;}
/* MOB 1216:14400: 750px 시안의 절반. 취급제품은 세로 배치, 공급 사진만 2열. */
@media all and (max-width: 880px){
    #subV.business {background-image: url('../img/sub_visual_2_mo.jpg');}
    .industrial > .titArea {padding-top: 5rem;}
    .industrial > .titArea .line {width: 1.25rem; height: 0.15rem;}
    .industrial > .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .industrial > .inner {width: auto; max-width: none; margin: 4rem 1.5rem 0; padding-bottom: 7.5rem;}
    .industrial section + section {margin-top: 5rem;}
    .industrial section > .tit {font-size: 1.7rem; gap: 0.5rem; margin-bottom: 1.5rem;}
    .industrial section > .tit::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .industrial .list {grid-template-columns: 1fr; gap: 1rem;}
    .industrial .box {padding: 1.5rem 1.75rem; border-width: 0.05rem; border-radius: 0.5rem;}
    .industrial .fs16 {font-size: 1.2rem;}
    .industrial .fs18, .industrial .fs20 {font-size: 1.3rem;}
    .industrial > .inner .subt {gap: 0.4rem; font-size: 1.4rem;}
    .industrial > .inner .subt::before {width: 0.25rem; height: 1rem; border-radius: 0.05rem;}
    .industrial .visual {height: 13.85rem; border-radius: 0.5rem;}
    .industrial #s1 .box {flex-direction: column; gap: 2rem;}
    .industrial #s1 .ico {width: 100%; height: 10rem; gap: 1rem; border-radius: 0.5rem;}
    .industrial #s1 .ico img {width: 3.5rem; height: 3.5rem;}
    .industrial #s1 .txt {width: 100%; font-size: 1.3rem;}
    .industrial #s1 .row + .row {margin-top: 0.9rem;}
    .industrial #s1 .row:not(:last-child) {padding-bottom: 0.75rem; border-width: 0.05rem;}
    .industrial #s1 .detail {gap: 1.35rem; margin-top: 0.5rem; font-size: 1.1rem; flex-wrap: wrap;}
    .industrial #s2 .list {grid-template-columns: repeat(2,minmax(0,1fr));}
    .industrial #s2 .list li {border-width: 0.05rem; border-radius: 0.6rem;}
    .industrial #s2 .list img {height: 11rem;}
    .industrial #s2 figcaption {padding: 0.65rem 0; font-size: 1.2rem; font-weight: 400;}
    .industrial #s2 .con {flex-direction: column; align-items: flex-start; gap: 2rem; margin-top: 1.5rem; padding: 1.5rem 1.75rem; border-radius: 0.5rem;}
    .industrial #s2 .con .img {width: 15rem; height: 11rem; border-radius: 0.6rem;}
    .industrial #s2 .desc {margin-top: 1rem; font-size: 1.2rem; line-height: 1.8; padding-left: 1.5rem;}
    .industrial #s3 .box {margin-top: 1.5rem;}
    .industrial #s3 .list {margin-top: 1rem;}
    .industrial #s3 .list > div {gap: 1rem; padding: 1.5rem 2rem; border-radius: 0.5rem;}
    .industrial #s3 dt {font-size: 1.2rem;}
    .industrial #s4 .list {grid-template-columns: 1fr;}
    .industrial #s4 .box {display: flex; align-items: center; gap: 1.5rem; padding: 2rem; text-align: left;}
    .industrial #s4 .ico {width: 4rem; height: 4rem; margin: 0; flex-shrink: 0;}
    .industrial #s4 .txt p {margin-top: 0.35rem;}
    .industrial #s5 .subt {margin: 1.5rem 0 1rem; padding-left: 0.65rem; line-height: 1.5;}
    .industrial #s5 .subt::before {top: 0.5rem;}
    .industrial #s5 .subt span {display: block;}
    .industrial #s5 .box {gap: 2rem; padding: 1.5rem 2rem;}
    .industrial #s5 .txt p {margin-top: 0.5rem;}
    .industrial #s5 .ico {width: 3.25rem; height: 3.25rem;}
}

/* 탄화수소계 가스 PC 1216:12533 / MOB 1216:14575. 정적 정보 카드, 공통 메뉴 호버 재사용. */
.hydrocarbon > .titArea {padding-top: 11rem;}
.hydrocarbon > .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.hydrocarbon > .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.hydrocarbon > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 13rem auto 0; padding-bottom: 15rem;}
.hydrocarbon section + section {margin-top: 10rem;}
.hydrocarbon section > .tit {display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; line-height: 1.35;}
.hydrocarbon section > .tit::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(45deg); flex-shrink: 0;}
.hydrocarbon .box {min-width: 0; padding: 3rem 3.5rem; border: 0.1rem solid #ccc; border-radius: 1rem;}
.hydrocarbon .list {display: grid; gap: 2rem;}
.hydrocarbon sub {font-size: 64.5%; line-height: 0; vertical-align: sub;}
.hydrocarbon #s1 .txt {line-height: 1.5;}
.hydrocarbon #s1 .txt span {color: var(--fcs);}
.hydrocarbon #s1 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 3rem;}
.hydrocarbon #s1 .list li {padding: 2rem 3rem; border-radius: 1rem; background: #f4f4f4; line-height: 1.5;}
.hydrocarbon #s2 .list {grid-template-columns: repeat(3,minmax(0,1fr));}
.hydrocarbon #s2 .ico {padding: 3rem 0; border-radius: 1rem; background: #f3f5ef; line-height: 1.5;}
.hydrocarbon #s2 .ico img {width: 5rem; height: 5rem; object-fit: contain;}
.hydrocarbon #s2 .ico h4 {margin-top: 1rem;}
.hydrocarbon #s2 .txt {display: grid; grid-template-columns: 1fr; gap: 1.8rem 2rem; margin-top: 3rem; line-height: 1.5;}
.hydrocarbon #s2 .txt li {padding-bottom: 1.5rem; border-bottom: 0.1rem dashed #ccc; white-space: nowrap;}
.hydrocarbon #s2 .txt li:last-child {border: 0;}
.hydrocarbon #s2 .low {grid-template-columns: repeat(2,minmax(0,1fr));}
.hydrocarbon #s2 .low li:nth-last-child(2) {border: 0;}
.hydrocarbon #s3 .list {grid-template-columns: repeat(5,minmax(0,1fr));}
.hydrocarbon #s3 .list li {overflow: hidden; border: 0.1rem solid #e0e0e0; border-radius: 1.2rem; background: #454545;}
.hydrocarbon #s3 img {display: block; width: 100%; height: 20rem; object-fit: cover;}
.hydrocarbon #s3 figcaption {padding: 1.3rem 0; line-height: 1.35;}
.hydrocarbon #s4 .photos {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem;}
.hydrocarbon #s4 .photos img {width: 100%; height: 50rem; border-radius: 1rem; object-fit: cover;}
.hydrocarbon #s4 .con {margin-top: 3rem;}
.hydrocarbon #s4 .con + .con {margin-top: 5rem;}
.hydrocarbon #s4 .subt {display: flex; align-items: center; gap: 0.8rem; margin-bottom: 2rem; line-height: 1.35;}
.hydrocarbon #s4 .subt::before {content: ''; flex-shrink: 0; width: 0.4rem; height: 1.7rem; border-radius: 0.1rem; background: var(--fcs);}
.hydrocarbon #s4 .desc {padding-left: 2.55rem; line-height: 2;}
.hydrocarbon #s4 .list {grid-template-columns: repeat(3,minmax(0,1fr));}
.hydrocarbon #s4 .item {display: flex; flex-direction: column;}
/* 분석표 녹색은 시안 지정색으로 공통 진한 녹색과 구분합니다. */
.hydrocarbon #s4 .lb {padding: 0.7rem 1.5rem; border-radius: 1rem 1rem 0 0; background: #159e67; line-height: 2;}
.hydrocarbon #s4 .item .desc {flex: 1; margin: 0; padding: 2rem 3rem 2rem 5.55rem; border: 0.1rem solid #ccc; border-top: 0; border-radius: 0 0 1rem 1rem;}
.hydrocarbon #s4 .note {margin-top: 2rem; line-height: 1.5;}
@media all and (max-width: 880px){
    .hydrocarbon > .titArea {padding-top: 5rem;}
    .hydrocarbon > .titArea .line {width: 1.25rem; height: 0.15rem;}
    .hydrocarbon > .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .hydrocarbon > .inner {width: auto; max-width: none; margin: 4rem 1.5rem 0; padding-bottom: 7.5rem;}
    .hydrocarbon section + section {margin-top: 5rem;}
    .hydrocarbon section > .tit {font-size: 1.7rem; gap: 0.5rem; margin-bottom: 1.5rem;}
    .hydrocarbon section > .tit::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .hydrocarbon .box {padding: 1.5rem 1.75rem; border-width: 0.05rem; border-radius: 0.5rem;}
    .hydrocarbon .list {gap: 1rem;}
    .hydrocarbon .fs16, .hydrocarbon .fs17, .hydrocarbon .fs18 {font-size: 1.3rem;}
    .hydrocarbon #s1 .list {grid-template-columns: 1fr; gap: 0.5rem; margin-top: 1.5rem;}
    .hydrocarbon #s1 .list li {padding: 1rem 1.5rem; border-radius: 0.5rem;}
    .hydrocarbon #s2 .list {grid-template-columns: 1fr;}
    .hydrocarbon #s2 .ico {padding: 1.5rem 0; border-radius: 0.5rem;}
    .hydrocarbon #s2 .ico img {width: 2.5rem; height: 2.5rem;}
    .hydrocarbon #s2 .ico h4 {margin-top: 0.5rem;}
    .hydrocarbon #s2 .txt {margin-top: 1.5rem; gap: 0.9rem;}
    .hydrocarbon #s2 .txt li {padding-bottom: 0.75rem; border-width: 0.05rem;}
    .hydrocarbon #s2 .low {grid-template-columns: 1fr; gap: 1rem;}
    .hydrocarbon #s2 .low li:nth-last-child(2) {border-bottom: 0.05rem dashed #ccc;}
    .hydrocarbon #s3 .list {grid-template-columns: repeat(2,minmax(0,1fr));}
    .hydrocarbon #s3 .list li {border-width: 0.05rem; border-radius: 0.6rem;}
    .hydrocarbon #s3 img {height: 11rem;}
    .hydrocarbon #s3 figcaption {padding: 0.65rem 0; font-size: 1.2rem; font-weight: 400;}
    .hydrocarbon #s4 .photos {gap: 1rem;}
    .hydrocarbon #s4 .photos img {height: 12rem; border-radius: 0.5rem;}
    .hydrocarbon #s4 .con {margin-top: 1.5rem;}
    .hydrocarbon #s4 .con + .con {margin-top: 2.5rem;}
    .hydrocarbon #s4 .subt {font-size: 1.4rem; gap: 0.4rem; margin-bottom: 1rem;}
    .hydrocarbon #s4 .subt::before {width: 0.25rem; height: 1rem; border-radius: 0.05rem;}
    .hydrocarbon #s4 .desc {padding-left: 1.95rem; line-height: 1.8;}
    .hydrocarbon #s4 .list {grid-template-columns: 1fr;}
    .hydrocarbon #s4 .lb {padding: 0.35rem 0.75rem; border-radius: 0.5rem 0.5rem 0 0;}
    .hydrocarbon #s4 .item .desc {padding: 1rem 1.5rem 1rem 3.45rem; border-width: 0.05rem; border-radius: 0 0 0.5rem 0.5rem;}
    .hydrocarbon #s4 .note {margin-top: 1rem; font-size: 1.2rem;}
}

/* 액체 헬륨 사업 PC 1216:12666 / MOB 1216:14715. 사용자 제공 연결도 이미지 사용. */
.helium > .titArea {padding-top: 11rem;}
.helium > .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.helium > .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.helium > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 13rem auto 0; padding-bottom: 15rem;}
.helium section + section {margin-top: 10rem;}
.helium section > .tit {display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; line-height: 1.35;}
.helium section > .tit::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(45deg); flex-shrink: 0;}
.helium #s1 .list {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7.4rem;}
.helium #s1 .list li {min-width: 0; padding-bottom: 3rem; border: 0.1rem solid #ccc; border-radius: 1.2rem;}
.helium #s1 .list li:not(:last-child)::after {content: ''; position: absolute; top: 50%; right: -6.5rem; width: 5.4rem; height: 5.4rem; transform: translateY(-50%); background: url('../img/business_helium_arr.svg') center / contain no-repeat;}
.helium #s1 .img {display: block; width: 100%; height: 24rem; object-fit: cover; border-radius: 1rem 1rem 0 0;}
/* 단계 번호는 사진 경계에 겹치며 흰색 외곽선을 둡니다. 시안 녹색 #159e67 유지. */
.helium #s1 .num {width: 4rem; height: 4rem; margin: -1.5rem auto 0; justify-content: center; border-radius: 50%; background: #159e67; box-shadow: 0 0 0 0.7rem #fff; line-height: 1.35;}
.helium #s1 .txt {margin-top: 1.5rem; line-height: 1.35;}
.helium #s2 .list {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem;}
.helium #s2 .list li {overflow: hidden; border: 0.1rem solid #e0e0e0; border-radius: 1.2rem; background: #454545;}
.helium #s2 img {display: block; width: 100%; height: 22rem; object-fit: cover; background: #fff;}
.helium #s2 figcaption {padding: 1.3rem 0; line-height: 1.35;}
.helium #s3 .con {padding: 9rem 0; border-radius: 1rem; background: #f4f4f4;}
.helium #s3 .diagram {width: 125rem; max-width: calc(100% - 6rem); margin: 0 auto;}
.helium #s3 .center {position: absolute; width: 46.9rem; height: 29rem; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.helium #s3 .center img {display: block; width: 100%; height: 100%; object-fit: contain;}
.helium #s3 .list {display: grid; grid-template-columns: repeat(2,39rem); justify-content: space-between; row-gap: 2.82rem;}
.helium #s3 .list li {padding: 2rem 2rem 2.5rem; border: 0.1rem solid #ccc; border-radius: 1rem; background: #fff;}
.helium #s3 .list img {display: block; width: 100%; height: 17rem; object-fit: cover; border-radius: 1rem;}
.helium #s3 figcaption {margin-top: 2rem; color: var(--fcs); line-height: 1.5;}
@media all and (max-width: 880px){
    .helium > .titArea {padding-top: 5rem;}
    .helium > .titArea .line {width: 1.25rem; height: 0.15rem;}
    .helium > .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .helium > .inner {width: auto; max-width: none; margin: 4rem 1.5rem 0; padding-bottom: 7.5rem;}
    .helium section + section {margin-top: 5rem;}
    .helium section > .tit {font-size: 1.7rem; gap: 0.5rem; margin-bottom: 1.5rem;}
    .helium section > .tit::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .helium #s1 .list {grid-template-columns: 1fr; gap: 3.7rem;}
    .helium #s1 .list li {padding-bottom: 2.5rem; border-width: 0.05rem; border-radius: 0.6rem;}
    .helium #s1 .list li:not(:last-child)::after {top: auto; bottom: -3.2rem; right: auto; left: 50%; width: 2.7rem; height: 2.7rem; transform: translateX(-50%) rotate(90deg);}
    .helium #s1 .img {height: 13.5rem; border-radius: 0.5rem 0.5rem 0 0;}
    .helium #s1 .num {width: 3rem; height: 3rem; margin-top: -1.4rem; box-shadow: 0 0 0 0.35rem #fff; font-size: 1.2rem;}
    .helium #s1 .txt {margin-top: 1.1rem; font-size: 1.3rem;}
    .helium #s2 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem;}
    .helium #s2 .list li {border-width: 0.05rem; border-radius: 0.6rem;}
    .helium #s2 img {height: 11rem;}
    .helium #s2 figcaption {padding: 0.65rem 0; font-size: 1.2rem; font-weight: 400;}
    .helium #s3 .con {padding: 4.5rem 1.5rem; border-radius: 0.5rem;}
    .helium #s3 .diagram {width: 100%; max-width: none;}
    .helium #s3 .center {display: block; position: relative; left: auto; top: auto; transform: none; width: 16.05rem; height: 23rem; margin: 0 auto;}
    .helium #s3 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; align-items: start;}
    .helium #s3 .list li {padding: 1rem 1rem 1.25rem; border-width: 0.05rem; border-radius: 0.5rem;}
    .helium #s3 .list img {height: 8.5rem; border-radius: 0.5rem;}
    .helium #s3 figcaption {margin-top: 1rem; font-size: 1.3rem;}
}
/* 질소응용 PC 1216:12749·12864·12940·13006 / MOB 1216:14799·14929·15011·15080. */
:is(.nitrogen, .loading) > .titArea {padding-top: 11rem;}
:is(.nitrogen, .loading) > .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
:is(.nitrogen, .loading) > .titArea .tit {margin-top: 3rem; line-height: 1.35;}
:is(.nitrogen, .loading) .menu {justify-content: center; gap: 0.7rem; margin-top: 5rem;}
:is(.nitrogen, .loading) .menu a, .nitrogen #s2 .tab a {display: flex; align-items: center; justify-content: center; padding: 1.4rem 3rem; border: 0.1rem solid #e0e0e0; border-radius: 0.5rem; background: #fff; color: #555; line-height: 1.35; text-align: center; transition: color 0.3s ease-out, border-color 0.3s ease-out, background-color 0.3s ease-out;}
/* 원본 square 탭 1216:12213: 호버 시 흰 배경·녹색 테두리/글자, 클릭 시 녹색 배경. */
:is(.nitrogen, .loading) .menu a:hover, .nitrogen #s2 .tab a:hover, :is(.nitrogen, .loading) .menu a:focus-visible, .nitrogen #s2 .tab a:focus-visible {border-color: var(--fcs); color: var(--fcs); font-weight: 600;}
:is(.nitrogen, .loading) .menu a.on, .nitrogen #s2 .tab a.on {border-color: var(--fcs); background: var(--fcs); color: #fff; font-weight: 600;}
:is(.nitrogen, .loading) > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 13rem auto 0; padding-bottom: 15rem;}
.nitrogen section + section {margin-top: 15rem;}
:is(.nitrogen, .loading) section > .tit {display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; line-height: 1.35;}
:is(.nitrogen, .loading) section > .tit::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(45deg); flex-shrink: 0;}
.nitrogen #s1 .con {padding: 3rem 3.5rem; background: #f4f4f4; border-radius: 1rem;}
.nitrogen #s1 .group + .group {margin-top: 3rem; padding-top: 3rem; border-top: 0.1rem dashed #ccc;}
.nitrogen #s1 h4 {margin-bottom: 2rem; line-height: 1.35;}
.nitrogen #s1 .list {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem;}
.nitrogen #s1 .item {padding: 2rem 2rem 4rem; border: 0.1rem solid #ccc; border-radius: 1.5rem; background: #fff;}
.nitrogen #s1 .group + .group .item:first-child {padding-bottom: 3rem;}
.nitrogen #s1 .lb {padding: 1.1rem 0; border-radius: 5rem; background: #6fa105; line-height: 1.35;}
.nitrogen #s1 .group + .group .lb {background: #159e67;}
.nitrogen #s1 .desc {margin-top: 2rem; padding-left: 2.4rem; line-height: 1.9;}
.nitrogen #s2 .tab {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0.7rem; margin-bottom: 2rem;}
.nitrogen #s2 .tab a {min-height: 6rem;}
.nitrogen #s2 .panel {padding: 4rem; border-radius: 1rem; background: #f4f4f4;}
.nitrogen #s2 .panel[hidden] {display: none;}
.nitrogen #s2 .part + .part {margin-top: 8rem;}
.nitrogen #s2 .subt {margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 0.1rem solid #ccc; color: var(--fcs); line-height: 1.35;}
.nitrogen #s2 .intro {display: flex; align-items: center; gap: 2rem;}
.nitrogen #s2 .ico {width: 13rem; height: 13rem; flex-shrink: 0;}
.nitrogen #s2 .desc {padding-left: 2.55rem; line-height: 1.8;}
.nitrogen #s2 .intro .desc {min-width: 0; line-height: 1.5;}
.nitrogen #s2 .intro .desc li + li {margin-top: 1.6rem;}
.nitrogen #s2 .methods > .subt {margin-bottom: 4rem;}
.nitrogen #s2 .method + .method {margin-top: 7rem;}
.nitrogen #s2 .bar {display: flex; align-items: center; gap: 0.8rem; line-height: 1.35;}
.nitrogen #s2 .bar::before {content: ''; width: 0.4rem; height: 1.7rem; border-radius: 0.1rem; background: var(--fcs); flex-shrink: 0;}
.nitrogen #s2 .txt {line-height: 1.65;}
.nitrogen #s2 .bar + .txt {margin-top: 1rem;}
.nitrogen #s2 .method:first-of-type .bar + .txt {margin-top: 1.2rem;}
.nitrogen #s2 .txt + .desc, .nitrogen #s2 .bar + .desc {margin-top: 2rem;}
.nitrogen #s2 .images {display: flex; gap: 2rem; margin-top: 2rem;}
.nitrogen #s2 .images picture {display: block; flex: 1; min-width: 0;}
.nitrogen #s2 .images img {display: block; width: 100%; height: 28rem; border-radius: 1rem; object-fit: contain; background: #fff;}
.nitrogen #s2 .diagram {display: block; width: 100%; height: auto; margin-top: 2rem; border-radius: 1rem; overflow: hidden;}
.nitrogen #s2 .diagram img {display: block; width: 100%; height: auto;}
@media all and (max-width: 880px){
    :is(.nitrogen, .loading) > .titArea {padding-top: 5rem;}
    :is(.nitrogen, .loading) > .titArea .line {width: 1.25rem; height: 0.15rem;}
    :is(.nitrogen, .loading) > .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    :is(.nitrogen, .loading) .menu {gap: 0.35rem; margin-top: 2.5rem;}
    :is(.nitrogen, .loading) .menu a, .nitrogen #s2 .tab a {padding: 0.7rem 1.5rem; border-width: 0.05rem; border-radius: 0.25rem; font-size: 1.3rem;}
    :is(.nitrogen, .loading) > .inner {width: auto; max-width: none; margin: 4rem 1.5rem 0; padding-bottom: 7.5rem;}
    .nitrogen section + section {margin-top: 5rem;}
    :is(.nitrogen, .loading) section > .tit {font-size: 1.7rem; gap: 0.5rem; margin-bottom: 1.5rem;}
    :is(.nitrogen, .loading) section > .tit::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .nitrogen #s1 .con {padding: 1.5rem 1.75rem; border-radius: 0.5rem;}
    .nitrogen #s1 .group + .group {margin-top: 1.5rem; padding-top: 1.5rem; border-width: 0.05rem;}
    .nitrogen #s1 h4 {margin-bottom: 1rem; font-size: 1.4rem;}
    .nitrogen #s1 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.75rem;}
    .nitrogen #s1 .item {padding: 1rem 1rem 2rem; border-width: 0.05rem; border-radius: 0.75rem;}
    .nitrogen #s1 .group + .group .item:first-child {padding-bottom: 1.5rem;}
    .nitrogen #s1 .lb {padding: 0.55rem 0; font-size: 1.2rem;}
    .nitrogen #s1 .desc {margin-top: 1rem; padding-left: 1.8rem; font-size: 1.2rem; line-height: 1.7;}
    .nitrogen #s2 .tab {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.35rem; margin-bottom: 1rem;}
    /* 시안의 두 줄 탭: 긴 라벨도 375px에서 한 줄로 들어가도록 좌우 여백만 축소. */
    .nitrogen #s2 .tab a {min-height: 3.5rem; padding: 0.7rem 0.2rem; white-space: nowrap;}
    .nitrogen #s2 .panel {padding: 1.75rem; border-radius: 0.5rem;}
    .nitrogen #s2 .part + .part {margin-top: 4rem;}
    .nitrogen #s2 .subt {margin-bottom: 1rem; padding-bottom: 0.75rem; border-width: 0.05rem; font-size: 1.5rem;}
    .nitrogen #s2 .intro {align-items: flex-start; gap: 1rem;}
    .nitrogen #s2 .ico {width: 6.5rem; height: 6.5rem;}
    .nitrogen #s2 .desc {padding-left: 1.95rem; font-size: 1.3rem;}
    .nitrogen #s2 .intro .desc li + li {margin-top: 0.8rem;}
    .nitrogen #s2 .methods > .subt {margin-bottom: 2rem;}
    .nitrogen #s2 .method + .method {margin-top: 3.5rem;}
    .nitrogen #s2 .bar {gap: 0.4rem; font-size: 1.4rem;}
    .nitrogen #s2 .bar::before {width: 0.25rem; height: 1rem; border-radius: 0.05rem;}
    .nitrogen #s2 .txt {font-size: 1.3rem;}
    .nitrogen #s2 .txt br {display: none;}
    .nitrogen #s2 .bar + .txt {margin-top: 0.5rem;}
    .nitrogen #s2 .method:first-of-type .bar + .txt {margin-top: 0.6rem;}
    .nitrogen #s2 .txt + .desc, .nitrogen #s2 .bar + .desc {margin-top: 1rem;}
    .nitrogen #s2 .method .desc {padding-left: 1.8rem; font-size: 1.2rem;}
    .nitrogen #s2 .images {flex-direction: column; gap: 1rem; margin-top: 1rem;}
    .nitrogen #s2 .images img {height: 14rem; border-radius: 0.5rem;}
    .nitrogen #s2 .diagram {margin-top: 1rem; border-radius: 0.5rem;}
}
/* 사업분야 본문 글머리표: 작은 원을 첫 줄 높이(1lh)의 중앙에 정렬합니다.
   목록의 기존 들여쓰기는 유지하며 카드 목록과 번호 목록에는 점을 추가하지 않습니다. */
.industrial .desc > li,
.hydrocarbon .desc > li,
.helium .desc > li,
.equipment .desc > li,
.bunkering .desc > li,
.nitrogen .desc > li {position: relative; list-style: none;}
.industrial .desc > li::before,
.hydrocarbon .desc > li::before,
.helium .desc > li::before,
.equipment .desc > li::before,
.bunkering .desc > li::before,
.nitrogen .desc > li::before {content: ''; position: absolute; left: -1.2rem; top: 0.5lh; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; transform: translateY(-50%);}
@media all and (max-width: 880px){
    .industrial .desc > li::before,
    .hydrocarbon .desc > li::before,
    .helium .desc > li::before,
    .equipment .desc > li::before,
.bunkering .desc > li::before,
.nitrogen .desc > li::before {left: -0.9rem; width: 0.25rem; height: 0.25rem;}
}

/* Loading사업 PC 1216:13072 / MOB 1216:15149. 제목·메뉴·inner는 질소응용과 공통.
   본문은 정적 프레임이며 탭 호버는 기존 square 컴포넌트 1216:12213을 재사용합니다. */
.loading #s1 .visual {display: block;}
.loading #s1 .visual img {display: block; width: 100%; height: 64rem; object-fit: cover; border-radius: 1rem;}
.loading #s1 .list {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; margin-top: 2rem;}
.loading #s1 .item {display: flex; align-items: stretch; gap: 4rem; padding: 3rem 3.5rem; border: 0.1rem solid #ccc; border-radius: 1rem;}
.loading #s1 .ico {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; width: 20rem; flex-shrink: 0; border-radius: 1rem; background: #f3f5ef;}
.loading #s1 .icon {display: flex; align-items: center; justify-content: center; width: 7rem; height: 7rem;}
.loading #s1 .icon img {display: block; width: 100%; height: 100%; object-fit: contain;}
.loading #s1 .ico h4 {line-height: 1.5;}
.loading #s1 .txt {flex: 1; min-width: 0; align-self: center; line-height: 1.5;}
.loading #s1 .txt li + li {margin-top: 1.8rem;}
.loading #s1 .txt li:not(:last-child) {padding-bottom: 1.5rem; border-bottom: 0.1rem dashed #ccc;}
.loading #s1 .role {gap: 1rem; color: var(--fcs);}
.loading #s1 .lb {padding: 0.4rem 1.5rem; border-radius: 5rem; background: var(--fcs);}
@media all and (max-width: 880px){
    .loading .menu a {min-height: 3.5rem;}
    .loading #s1 .visual img {height: 19.4rem; border-radius: 0.5rem;}
    .loading #s1 .list {grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem;}
    .loading #s1 .item {flex-direction: column; gap: 2rem; padding: 1.5rem 1.75rem; border-width: 0.05rem; border-radius: 0.5rem;}
    .loading #s1 .ico {width: 100%; height: 10rem; gap: 1rem; border-radius: 0.5rem;}
    .loading #s1 .icon {width: 3.5rem; height: 3.5rem;}
    .loading #s1 .ico h4, .loading #s1 .txt {font-size: 1.3rem;}
    .loading #s1 .txt {width: 100%;}
    .loading #s1 .txt li + li {margin-top: 0.9rem;}
    .loading #s1 .txt li:not(:last-child) {padding-bottom: 0.75rem; border-width: 0.05rem;}
    .loading #s1 .role {gap: 0.5rem;}
    .loading #s1 .role span {font-size: 1.2rem;}
    .loading #s1 .lb {padding: 0.2rem 1rem;}
}

/* 벙커링 사업 PC 1216:13125 / MOB 1216:15202. PC 내부 너비 162rem, 제공 이미지 그대로 사용. */
.bunkering > .titArea {padding-top: 11rem;}
.bunkering > .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.bunkering > .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.bunkering > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 13rem auto 0; padding-bottom: 15rem;}
.bunkering section + section {margin-top: 10rem;}
.bunkering section > .tit {display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; line-height: 1.35;}
.bunkering section > .tit::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(45deg); flex-shrink: 0;}
.bunkering .visual {margin-bottom: 3rem;}
.bunkering .visual img {display: block; width: 100%; height: 55rem; object-fit: cover; border-radius: 1rem;}
.bunkering .visual figcaption {position: absolute; right: 2rem; bottom: 1.3rem; opacity: 0.9; line-height: 2; letter-spacing: 0.02rem;}
.bunkering .con + .con {margin-top: 5rem;}
.bunkering .con .subt {display: flex; align-items: center; gap: 0.8rem; margin-bottom: 2rem; line-height: 1.35;}
.bunkering .con .subt::before {content: ''; width: 0.4rem; height: 1.7rem; border-radius: 0.1rem; background: var(--fcs); flex-shrink: 0;}
.bunkering .box {padding: 3rem 3.5rem; border: 0.1rem solid #ccc; border-radius: 1rem;}
.bunkering .desc {padding-left: 2.55rem; line-height: 2;}
.bunkering .note {margin-top: 2rem; line-height: 1.5;}
.bunkering .row {display: flex; align-items: flex-start; gap: 2rem;}
.bunkering .row + .row {margin-top: 1.5rem;}
.bunkering .lb {min-width: 8.8rem; padding: 0.4rem 1.5rem; border-radius: 5rem; background: var(--fcs); line-height: 1.5; text-align: center; flex-shrink: 0;}
.bunkering dd {line-height: 1.8;}
@media all and (max-width: 880px){
    .bunkering > .titArea {padding-top: 5rem;}
    .bunkering > .titArea .line {width: 1.25rem; height: 0.15rem;}
    .bunkering > .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .bunkering > .inner {width: auto; max-width: none; margin: 4rem 1.5rem 0; padding-bottom: 7.5rem;}
    .bunkering section + section {margin-top: 5rem;}
    .bunkering section > .tit {gap: 0.5rem; margin-bottom: 1.5rem; font-size: 1.7rem;}
    .bunkering section > .tit::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .bunkering .visual {margin-bottom: 1.5rem;}
    .bunkering .visual img {height: 20rem; border-radius: 0.5rem;}
    .bunkering .visual figcaption {right: 1rem; bottom: 0.65rem; font-size: 1rem; letter-spacing: 0.01rem;}
    .bunkering .con + .con {margin-top: 2.5rem;}
    .bunkering .con .subt {gap: 0.4rem; margin-bottom: 1rem; font-size: 1.4rem;}
    .bunkering .con .subt::before {width: 0.25rem; height: 1rem; border-radius: 0.05rem;}
    .bunkering .box {padding: 1.5rem 1.75rem; border-width: 0.05rem; border-radius: 0.5rem;}
    .bunkering .desc {padding-left: 1.95rem; font-size: 1.3rem; line-height: 1.8;}
    .bunkering .note {margin-top: 1rem; font-size: 1.2rem;}
    .bunkering .row {flex-direction: column; gap: 0.5rem;}
    .bunkering .row + .row {margin-top: 0.75rem;}
    .bunkering .lb {min-width: 0; padding: 0.3rem 1rem; font-size: 1.3rem;}
    .bunkering dd {font-size: 1.3rem;}
}

/* 기자재 사업 PC 1216:13187 / MOB 1216:15282. 이미지에 포함된 배경·대리점 문구는 중복 작성하지 않습니다. */
.equipment > .titArea {padding-top: 11rem;}
.equipment > .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.equipment > .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.equipment > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 13rem auto 0; padding-bottom: 15rem;}
.equipment section + section {margin-top: 10rem;}
.equipment section > .tit {display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; line-height: 1.35;}
.equipment section > .tit::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(45deg); flex-shrink: 0;}
.equipment .con {display: flex; align-items: stretch; gap: 3rem;}
.equipment .img {display: block; width: 40rem; flex-shrink: 0; align-self: flex-start;}
.equipment .img img {display: block; width: 100%; height: auto; border-radius: 1rem;}
.equipment .box {min-width: 0; flex: 1; padding: 3rem 3.5rem; border: 0.1rem solid #ccc; border-radius: 1rem;}
.equipment .names {display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; color: var(--fcs); line-height: 1.35;}
.equipment .names li {padding: 1.2rem 1.9rem; border-radius: 1rem; background: #f3f5ef;}
.equipment .desc {padding-left: 2.55rem; line-height: 2;}
.equipment #s2 .list {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; margin-bottom: 2rem;}
.equipment #s2 .item {padding: 2rem 2.5rem; border-radius: 1rem; background: #f3f5ef;}
.equipment #s2 .item h4 {margin-bottom: 1.5rem; padding-bottom: 1.2rem; border-bottom: 0.1rem solid #ccc; color: var(--fcs); line-height: 1.35;}
.equipment #s2 .item .desc {padding-left: 2.4rem;}
.equipment #s3 .subt {display: flex; align-items: center; gap: 0.8rem; margin-bottom: 2rem; line-height: 1.35;}
.equipment #s3 .subt::before {content: ''; width: 0.4rem; height: 1.7rem; border-radius: 0.1rem; background: var(--fcs); flex-shrink: 0;}
@media all and (max-width: 880px){
    .equipment > .titArea {padding-top: 5rem;}
    .equipment > .titArea .line {width: 1.25rem; height: 0.15rem;}
    .equipment > .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .equipment > .inner {width: auto; max-width: none; margin: 4rem 1.5rem 0; padding-bottom: 7.5rem;}
    .equipment section + section {margin-top: 5rem;}
    .equipment section > .tit {gap: 0.5rem; margin-bottom: 1.5rem; font-size: 1.7rem;}
    .equipment section > .tit::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .equipment .con {flex-direction: column; gap: 1.5rem;}
    .equipment .img {width: 100%;}
    .equipment .img img {border-radius: 0.5rem;}
    .equipment .box {padding: 1.5rem 1.75rem; border-width: 0.05rem; border-radius: 0.5rem;}
    .equipment .names {gap: 0.5rem; margin-bottom: 1rem; font-size: 1.3rem;}
    .equipment #s1 .names {flex-direction: column; align-items: flex-start;}
    .equipment .names li {padding: 0.6rem 0.95rem; border-radius: 0.5rem;}
    .equipment .desc {padding-left: 1.95rem; font-size: 1.3rem; line-height: 1.8;}
    .equipment #s2 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem;}
    .equipment #s2 .item {padding: 1rem 1.25rem; border-radius: 0.5rem;}
    .equipment #s2 .item h4 {margin-bottom: 0.75rem; padding-bottom: 0.6rem; border-width: 0.05rem; font-size: 1.3rem;}
    .equipment #s2 .item .desc {padding-left: 1.8rem; font-size: 1.2rem;}
    .equipment #s3 .subt {gap: 0.4rem; margin-bottom: 1rem; font-size: 1.4rem;}
    .equipment #s3 .subt::before {width: 0.25rem; height: 1rem; border-radius: 0.05rem;}
}

/* 기술·설비 공통 / 생산설비 PC 1216:11290, MOB 1216:14329. 제공 배경의 딤 유지. */
#subV.technology {background-image: url('../img/sub_visual_3.jpg');}
.production > .titArea {padding-top: 11rem;}
.production > .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.production > .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.production > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0; padding-bottom: 15rem;}
.production > .inner > section {display: grid; grid-template-columns: 48rem minmax(0,1fr); gap: 12.5rem;}
.production > .inner > section:not(:last-child) {padding-bottom: 8rem; border-bottom: 0.1rem solid #ccc;}
.production > .inner > section + section {margin-top: 8rem;}
.production .txt .tit {display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; line-height: 1.35;}
.production .txt .tit::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(45deg); flex-shrink: 0;}
.production .txt p {line-height: 1.5;}
.production .group + .group {margin-top: 5rem;}
.production .lb {display: inline-block; margin-bottom: 1.5rem; padding: 0.8rem 2rem; border: 0.1rem solid var(--fcs); border-radius: 0.5rem; background: #f4f4f4; color: var(--fcs); line-height: 1.35;}
.production .images {display: flex; gap: 2rem;}
.production .images picture {display: block; flex: 1; min-width: 0;}
.production .images img {display: block; width: 100%; height: 25rem; border-radius: 0.5rem; object-fit: cover;}
.production #s1 .images img {height: 28.5rem;}
@media all and (max-width: 880px){
    #subV.technology {background-image: url('../img/sub_visual_3_mo.jpg');}
    .production > .titArea {padding-top: 5rem;}
    .production > .titArea .line {width: 1.25rem; height: 0.15rem;}
    .production > .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .production > .inner {width: auto; max-width: none; margin: 5rem 1.5rem 0; padding-bottom: 7.5rem;}
    .production > .inner > section {grid-template-columns: minmax(0,1fr); gap: 2.5rem;}
    /* 모바일 시안은 사진 아래에 구분선이 붙으므로 PC 하단 여백 제거. */
    .production > .inner > section:not(:last-child) {padding-bottom: 0; border-width: 0.05rem;}
    .production > .inner > section + section {margin-top: 5rem;}
    .production .txt .tit {gap: 0.5rem; margin-bottom: 0.75rem; font-size: 1.7rem;}
    .production .txt .tit::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .production .txt p {font-size: 1.3rem;}
    .production .group + .group {margin-top: 1.5rem;}
    .production .lb {margin-bottom: 0.75rem; padding: 0.4rem 1rem; border-width: 0.05rem; border-radius: 0.25rem; font-size: 1.3rem;}
    .production .images {gap: 0.5rem;}
    .production .images img {height: 9rem; border-radius: 0.25rem;}
    .production #s1 .images {display: grid; grid-template-columns: repeat(2,minmax(0,1fr));}
    .production #s1 .images img {height: 17rem;}
    .production .storage .images img {height: 10.5rem;}
}


/* 분석장비 — PC 1216:11674 / MOB 1216:16103. inner1620, PC4열·모바일2열.
   게시글 클릭·확대 없음. 업로드 이미지 비율 보존을 위해 contain 적용. */
.analyzers #s1 {padding: 11rem 0 15rem;}
.analyzers #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.analyzers #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.analyzers #s1 .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.analyzers #s1 .list {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7rem 2rem;}
.analyzers #s1 .list li {min-width: 0; cursor: default;}
.analyzers #s1 .img {position: relative; display: flex; align-items: center; justify-content: center; height: 25rem; border: 0.1rem solid #e0e0e0; border-radius: 0.5rem; background: #fff;}
.analyzers #s1 .img::after {content: ''; position: absolute; inset: -0.1rem; border: 0.15rem solid var(--fcp); border-radius: inherit; opacity: 0; transition: opacity 0.2s; pointer-events: none;}
/* 카드 호버 1216:12265 — 연두색 1.5px 테두리·장비명 SemiBold. 클릭·확대 없음. */
.analyzers #s1 .list li:hover .img::after {opacity: 1;}
.analyzers #s1 .list li:hover figcaption {color: var(--fcp); font-weight: 600;}
.analyzers #s1 .img img {width: 100%; height: 100%; object-fit: contain; border-radius: inherit;}
.analyzers #s1 figcaption {margin-top: 2rem; line-height: 1.35; color: var(--fct); overflow-wrap: anywhere;}
.analyzers #s1 .empty {padding: 10rem 0; color: #555;}
.analyzers #s1 .paging {justify-content: center; gap: 1rem; margin-top: 10rem; font-size: 1.8rem;}
.analyzers #s1 .paging a, .analyzers #s1 .paging span {display: flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; border-radius: 0.5rem; color: #333;}
.analyzers #s1 .paging .on {background: var(--fcs); color: #fff;}
.analyzers #s1 .paging a:hover {color: var(--fcs); background: #f4f4f4;}
.analyzers #s1 .paging .prev, .analyzers #s1 .paging .next {gap: 0.5rem; padding: 0 0.8rem; color: #555;}
.analyzers #s1 .paging .prev::before, .analyzers #s1 .paging .next::after {content: ''; width: 2rem; height: 2rem; background: url('../img/ic_lang_arr_c.svg') center / contain no-repeat; transform: rotate(-90deg);}
.analyzers #s1 .paging .prev::before {transform: rotate(90deg);}
@media all and (max-width: 880px){
    .analyzers #s1 {padding: 5rem 1.5rem 7.5rem;}
    .analyzers #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .analyzers #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .analyzers #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .analyzers #s1 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem 1rem;}
    .analyzers #s1 .img {height: 12.5rem; border-radius: 0.25rem;}
    .analyzers #s1 figcaption {margin-top: 1rem; font-size: 1.3rem;}
    .analyzers #s1 .empty {padding: 5rem 0; font-size: 1.3rem;}
    .analyzers #s1 .paging {gap: 0.5rem; margin-top: 5rem; font-size: 1.2rem;}
    .analyzers #s1 .paging a, .analyzers #s1 .paging span {min-width: 2.75rem; height: 2.75rem; border-radius: 0.25rem;}
    .analyzers #s1 .paging .prev, .analyzers #s1 .paging .next {padding: 0 0.4rem; gap: 0.25rem;}
    .analyzers #s1 .paging .prev::before, .analyzers #s1 .paging .next::after {width: 1.25rem; height: 1.25rem;}
}

/* 설비현황 PC1216:11612·11643 / MOB1216:16166. 탭과 목록 간격10rem. 카드 호버는 분석장비와 동일. */
.facilities #s1 {padding: 11rem 0 15rem;}
.facilities #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.facilities #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.facilities #s1 .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.facilities #s1 .list {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7rem 2rem;}
.facilities #s1 .list li {min-width: 0; cursor: default;}
.facilities #s1 .img {position: relative; display: flex; align-items: center; justify-content: center; height: 25rem; border: 0.1rem solid #e0e0e0; border-radius: 0.5rem; background: #fff;}
.facilities #s1 .img::after {content: ''; position: absolute; inset: -0.1rem; border: 0.2rem solid var(--fcp); border-radius: inherit; opacity: 0; transition: opacity 0.2s; pointer-events: none;}
/* 카드 호버 1216:12265 — 연두색 1.5px 테두리·장비명 SemiBold. 클릭·확대 없음. */
.facilities #s1 .list li:hover .img::after {opacity: 1;}
.facilities #s1 .list li:hover figcaption {color: var(--fcp); font-weight: 600;}
.facilities #s1 .img img {width: 100%; height: 100%; object-fit: cover; border-radius: inherit;}
.facilities #s1 figcaption {margin-top: 2rem; line-height: 1.35; color: var(--fct); overflow-wrap: anywhere;}
.facilities #s1 .empty {padding: 10rem 0; color: #555;}
.facilities #s1 .paging {justify-content: center; gap: 1rem; margin-top: 10rem; font-size: 1.8rem;}
.facilities #s1 .paging a, .facilities #s1 .paging span {display: flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; border-radius: 0.5rem; color: #333;}
.facilities #s1 .paging .on {background: var(--fcs); color: #fff;}
.facilities #s1 .paging a:hover {color: var(--fcs); background: #f4f4f4;}
.facilities #s1 .paging .prev, .facilities #s1 .paging .next {gap: 0.5rem; padding: 0 0.8rem; color: #555;}
.facilities #s1 .paging .prev::before, .facilities #s1 .paging .next::after {content: ''; width: 2rem; height: 2rem; background: url('../img/ic_lang_arr_c.svg') center / contain no-repeat; transform: rotate(-90deg);}
.facilities #s1 .paging .prev::before {transform: rotate(90deg);}
@media all and (max-width: 880px){
    .facilities #s1 {padding: 5rem 1.5rem 7.5rem;}
    .facilities #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .facilities #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .facilities #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .facilities #s1 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem 1rem;}
    .facilities #s1 .img {height: 12.5rem; border-radius: 0.25rem;}
    .facilities #s1 figcaption {margin-top: 1rem; font-size: 1.3rem;}
    .facilities #s1 .empty {padding: 5rem 0; font-size: 1.3rem;}
    .facilities #s1 .paging {gap: 0.5rem; margin-top: 5rem; font-size: 1.2rem;}
    .facilities #s1 .paging a, .facilities #s1 .paging span {min-width: 2.75rem; height: 2.75rem; border-radius: 0.25rem;}
    .facilities #s1 .paging .prev, .facilities #s1 .paging .next {padding: 0 0.4rem; gap: 0.25rem;}
    .facilities #s1 .paging .prev::before, .facilities #s1 .paging .next::after {width: 1.25rem; height: 1.25rem;}
}

.facilities #s1 .menu {justify-content: center; flex-wrap: wrap; gap: 0.7rem; margin-top: 5rem;}
.facilities #s1 .menu a {padding: 1.4rem 3rem; border: 0.1rem solid #e0e0e0; border-radius: 0.5rem; color: #555; line-height: 1.35; transition: color 0.2s, border-color 0.2s, background-color 0.2s;}
.facilities #s1 .menu a:hover, .facilities #s1 .menu a:focus-visible {border-color: var(--fcs); color: var(--fcs); font-weight: 600;}
.facilities #s1 .menu a.on {background: var(--fcs); border-color: var(--fcs); color: #fff; font-weight: 600;}
@media all and (max-width: 880px) {
    .facilities #s1 .menu {gap: 0.35rem; margin-top: 2.5rem;}
    .facilities #s1 .menu a {display: flex; align-items: center; min-height: 3.5rem; padding: 0.7rem 1.5rem; border-width: 0.05rem; border-radius: 0.25rem; font-size: 1.3rem;}
}

/* 고객센터 목록 PC1216:11359·11454 / MOB1216:15356·15639.
   공지 포함15개. 행 호버1216:12291은 배경만 #f4f4f4로 변경합니다. */
#subV.support {background-image: url('../img/sub_visual_4.jpg');}
.board #s1 {padding: 11rem 0 15rem;}
.board #s1 .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp);}
.board #s1 .titArea .tit {margin-top: 3rem; line-height: 1.35;}
.board #s1 .inner, .boardView > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.board #s1 .tools {padding: 2rem 3rem; border-radius: 0.5rem; background: #f4f4f4; margin-bottom: 3rem;}
.board #s1 .search {width: 37rem; height: 5rem; padding: 0 2rem; border: 0.1rem solid #e0e0e0; border-radius: 0.4rem; background: #fff;}
.board #s1 .search input {width: 100%; min-width: 0; border: 0; background: transparent; font-family: inherit; outline-offset: 0.3rem;}
.board #s1 .search button {flex-shrink: 0; padding: 0.5rem; font-family: inherit; border: 0; background: none; cursor: pointer;}
.board #s1 .search img {width: 1.8rem; height: 1.8rem;}
.board #s1 .table {border-top: 0.13rem solid #1f2937;}
.board #s1 .head, .board #s1 .row {display: grid; grid-template-columns: 8rem minmax(0,1fr) repeat(4,14rem); align-items: center; text-align: center; line-height: 1.5;}
.board #s1 .head {min-height: 6.55rem; border-bottom: 0.1rem solid #d1d5db;}
.board #s1 .row {min-height: 6.6rem; border-bottom: 0.1rem solid #e0e0e0; color: #333; transition: background-color 0.2s;}
.board #s1 .row:hover, .board #s1 .row:focus-visible {background: #f4f4f4;}
.board #s1 .row .subject {padding: 0 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;}
.board #s1 .row img {width: 2.5rem; height: 2.5rem; vertical-align: middle;}
.board #s1 .notice {color: var(--fcp);}
.board #s1 .empty {padding: 8rem 0;}
.board #s1 .category {gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; font-size: 1.8rem;}
.board #s1 .category a {padding: 1rem 2rem; border: 0.1rem solid #e0e0e0; border-radius: 0.5rem;}
.board #s1 .category a.on {background: var(--fcs); color: #fff;}
.board #s1 .paging {justify-content: center; gap: 1rem; margin-top: 10rem; font-size: 1.8rem;}
.board #s1 .paging a, .board #s1 .paging span {display: flex; align-items: center; justify-content: center; min-width: 4rem; height: 4rem; border-radius: 0.5rem; color: #333;}
.board #s1 .paging .on {background: var(--fcs); color: #fff;}
.board #s1 .paging a:hover {color: var(--fcs); background: #f4f4f4;}
.board #s1 .paging .prev, .board #s1 .paging .next {gap: 0.5rem; padding: 0 0.8rem; color: #555;}
.board #s1 .paging .prev::before, .board #s1 .paging .next::after {content: ''; width: 2rem; height: 2rem; background: url('../img/ic_lang_arr_c.svg') center / contain no-repeat; transform: rotate(-90deg);}
.board #s1 .paging .prev::before {transform: rotate(90deg);}
/* 공통 상세 PC1216:11410 / MOB1216:16060. 목록 버튼 호버1216:12311. */
.boardView > .inner {margin-top: 0; padding: 11rem 0 15rem;}
.boardView #s1 .title {padding-bottom: 7rem; border-bottom: 0.1rem solid #e0e0e0;}
.boardView #s1 .label {color: var(--fcs); line-height: 1.35;}
.boardView #s1 h2 {margin-top: 1.2rem; line-height: 1.35; overflow-wrap: anywhere;}
.boardView #s1 .info {justify-content: center; gap: 1rem; margin-top: 3.5rem; color: #555; line-height: 1.35;}
.boardView #s1 .info time {display: flex; align-items: center; gap: 1rem;}
.boardView #s1 .info time::before {content: ''; width: 0.1rem; height: 1.5rem; background: #aaa;}
.boardView #s1 .content {padding: 3rem 0 10rem; color: #212121; line-height: 1.8; overflow-wrap: anywhere;}
.boardView #s1 .content p {margin: 0; min-height: 1.8em; white-space: pre-wrap;}
.boardView #s1 .content em, .boardView #s1 .content i {font-style: italic; color: inherit;}
.boardView #s1 .content img {max-width: 100%; height: auto; vertical-align: middle;}
.boardView #s1 .content a {text-decoration: underline; color: var(--fcs);}
.boardView #s1 .content h2, .boardView #s1 .content h3 {margin: 2rem 0 1rem; font-weight: 700;}
.boardView #s1 .content h2 {font-size: 2.6rem;}
.boardView #s1 .content h3 {font-size: 2.2rem;}
.boardView #s1 .content ul, .boardView #s1 .content ol {padding-left: 2rem; margin: 1rem 0;}
.boardView #s1 .content ol {list-style: decimal;}
.boardView #s1 .content ul > li {position: relative; list-style: none;}
.boardView #s1 .content ul > li::before {content: ''; position: absolute; left: -1.2rem; top: 0.5lh; transform: translateY(-50%); width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor;}
.boardView #s1 .content blockquote {border-left: 0.3rem solid #ddd; padding-left: 2rem; margin: 2rem 0;}
.boardView #s1 .content .ql-align-center {text-align: center;}
.boardView #s1 .content .ql-align-right {text-align: right;}
.boardView #s1 .content .ql-align-justify {text-align: justify;}
.boardView #s1 .files {display: flex; gap: 3rem; padding: 1.8rem 2rem; margin-top: 3rem; border: 0.1rem solid #cacaca; border-radius: 0.5rem; color: #333; line-height: 1.5;}
.boardView #s1 .files .lb {gap: 0.6rem; flex-shrink: 0;}
.boardView #s1 .files img {width: 2.5rem; height: 2.5rem;}
.boardView #s1 .names {min-width: 0; overflow-wrap: anywhere;}
.boardView #s1 .names a {display: block;}
.boardView #s1 .names a:hover {text-decoration: underline;}
.boardView #s1 .adjacent {margin-top: 3rem; border-top: 0.1rem solid #cacaca; border-bottom: 0.1rem solid #cacaca; color: #333;}
.boardView #s1 .adjacent .row {height: 7rem;}
.boardView #s1 .adjacent .row + .row {border-top: 0.1rem solid #e0e0e0;}
.boardView #s1 .adjacent .lb {display: flex; align-items: center; justify-content: center; width: 14rem; height: 100%; background: #f9f9f9; flex-shrink: 0;}
.boardView #s1 .adjacent a {min-width: 0; flex: 1; height: 100%; padding: 0 2.5rem; gap: 2rem;}
.boardView #s1 .adjacent .subject {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.boardView #s1 .adjacent time {color: #555; flex-shrink: 0;}
.boardView #s1 .none {padding: 0 2.5rem;}
.boardView #s1 .back {display: flex; align-items: center; justify-content: center; width: 14rem; height: 6rem; margin: 7rem auto 0; border: 0.1rem solid var(--fcs); border-radius: 0.5rem; background: var(--fcs); color: #fff; transition: color 0.2s, background-color 0.2s;}
.boardView #s1 .back:hover, .boardView #s1 .back:focus-visible {background: #fff; color: var(--fcs);}
@media all and (max-width: 880px) {
    #subV.support {background-image: url('../img/sub_visual_4_mo.jpg');}
    .board #s1 {padding: 5rem 1.5rem 7.5rem;}
    .board #s1 .titArea .line {width: 1.25rem; height: 0.15rem;}
    .board #s1 .titArea .tit {margin-top: 1.5rem; font-size: 1.8rem;}
    .board #s1 .inner {width: 100%; max-width: none; margin-top: 4rem;}
    .board #s1 .tools {flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; border-radius: 0.25rem;}
    .board #s1 .tools p {font-size: 1.2rem;}
    .board #s1 .search {width: 100%; height: 3.5rem; padding: 0 1rem;}
    .board #s1 .search input {font-size: 1.1rem;}
    .board #s1 .search img {width: 1.4rem; height: 1.4rem;}
    .board #s1 .head, .board #s1 .row {grid-template-columns: 3.5rem minmax(0,1fr) repeat(4,4.5rem); font-size: 1.2rem;}
    .board #s1 .head {min-height: 5.6rem;}
    .board #s1 .row {min-height: 4rem;}
    .board #s1 .row .subject {padding: 0 0.5rem;}
    .board #s1 .row img {width: 1.25rem; height: 1.25rem;}
    .board #s1 .row time {padding: 0 0.2rem;}
    .board #s1 .category {font-size: 1.3rem; gap: 0.5rem;}
    .board #s1 .category a {padding: 0.5rem 1rem;}
    .board #s1 .paging {gap: 0.5rem; margin-top: 5rem; font-size: 1.2rem;}
    .board #s1 .paging a, .board #s1 .paging span {min-width: 2.75rem; height: 2.75rem; border-radius: 0.25rem;}
    .board #s1 .paging .prev, .board #s1 .paging .next {padding: 0 0.4rem; gap: 0.25rem;}
    .board #s1 .paging .prev::before, .board #s1 .paging .next::after {width: 1.25rem; height: 1.25rem;}
    .boardView > .inner {width: auto; max-width: none; margin: 0 1.5rem; padding: 5rem 0 7.5rem;}
    .boardView #s1 .title {padding-bottom: 3.5rem;}
    .boardView #s1 .label, .boardView #s1 .info {font-size: 1.2rem;}
    .boardView #s1 h2 {font-size: 1.7rem; margin-top: 0.6rem;}
    .boardView #s1 .info {margin-top: 1.75rem; gap: 0.5rem;}
    .boardView #s1 .info time {gap: 0.5rem;}
    .boardView #s1 .info time::before {height: 0.75rem;}
    .boardView #s1 .content {padding: 1.5rem 0 5rem; font-size: 1.3rem;}
    .boardView #s1 .content h2 {font-size: 1.7rem;}
    .boardView #s1 .content h3 {font-size: 1.5rem;}
    .boardView #s1 .content ul > li::before {left: -0.9rem; width: 0.25rem; height: 0.25rem;}
    .boardView #s1 .files {margin-top: 1.5rem; padding: 0.9rem 1rem; gap: 1.5rem; font-size: 1.2rem; border-radius: 0.25rem;}
    .boardView #s1 .files .lb {gap: 0.3rem;}
    .boardView #s1 .files img {width: 1.25rem; height: 1.25rem;}
    .boardView #s1 .adjacent {margin-top: 1.5rem; font-size: 1.2rem;}
    .boardView #s1 .adjacent .row {height: 3.5rem;}
    .boardView #s1 .adjacent .lb {width: 7rem;}
    .boardView #s1 .adjacent a {padding: 0 1.25rem; gap: 1rem;}
    .boardView #s1 .adjacent time {font-size: 1.1rem;}
    .boardView #s1 .none {padding: 0 1.25rem;}
    .boardView #s1 .back {width: 8rem; height: 3.5rem; margin-top: 3.5rem; border-radius: 0.25rem; font-size: 1.2rem;}
}

/* 문의하기 PC 1216:11505 / MOB 1216:15922. 개인정보 팝업은 사이트 색상으로 별도 구성.
   예외: 첨부파일 아래 허용 형식·용량 안내를 추가해 접수 오류를 줄입니다. */
.contact #s1 {padding: 11rem 0 15rem;}
.contact #s1 > .titArea .tit {line-height: 1.35;}
.contact #s1 > .titArea .line {width: 2.5rem; height: 0.3rem; background: var(--fcp); margin-bottom: 3rem;}
.contact #s1 > .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.contact #s1 .intro {padding: 3.5rem 3rem; border-radius: 1rem; background: #f3f5ef; line-height: 1.6;}
.contact #s1 .intro strong {color: var(--fcs);}
.contact #s1 form {margin-top: 7rem;}
.contact #s1 fieldset {min-width: 0; border: 0; padding: 0; margin: 0;}
.contact #s1 legend {visibility: visible; height: auto; box-sizing: border-box; display: flex; align-items: center; gap: 1rem; width: 100%; padding: 2rem 0; border-bottom: 0.1rem solid #aaa; line-height: 1.35;}
.contact #s1 legend::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; background: var(--fcp); border-radius: 0.1rem; transform: rotate(45deg);}
.contact #s1 .fields {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem 5rem; margin-top: 3rem;}
.contact #s1 .field {min-width: 0;}
.contact #s1 .field > label {display: block; margin-bottom: 1rem; line-height: 1.35;}
.contact #s1 .required {color: #d33;}
.contact #s1 input:not([type=hidden]):not([type=checkbox]):not([type=file]), .contact #s1 textarea, .contact #s1 .fileName {display: block; box-sizing: border-box; width: 100%; height: 5.5rem; padding: 1.6rem 1.4rem; background: #f9f9f9; border: 0.1rem solid #e0e0e0; border-radius: 0.5rem; font: inherit; font-size: 1.6rem; color: var(--fct); box-shadow: none; text-indent: 0;}
.contact #s1 input::placeholder, .contact #s1 textarea::placeholder {color: #797979; opacity: 1;}
/* 입력 활성화: 시안처럼 외곽 이중선 없이 연두색 테두리·흰 배경, 안내문은 숨김. */
.contact #s1 input:not([type=hidden]):not([type=checkbox]):not([type=file]):focus-visible, .contact #s1 textarea:focus-visible {outline: none; border-color: var(--fcp); background: #fff;}
.contact #s1 input:focus-visible::placeholder, .contact #s1 textarea:focus-visible::placeholder {opacity: 0;}
.contact #s1 [aria-invalid=true] {border-color: #b42318 !important;}
.contact #s1 .file {grid-column: 1 / -1;}
.contact #s1 .fileRow {gap: 1rem;}
.contact #s1 .fileName {min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #797979;}
.contact #s1 .fileBtn {position: relative; display: flex; align-items: center; justify-content: center; width: 11rem; flex-shrink: 0; border: 0.1rem solid #aaa; border-radius: 0.5rem; font-size: 1.6rem; transition: border-color 0.2s,color 0.2s;}
.contact #s1 .fileBtn:hover {border-color: var(--fcs); color: var(--fcs);}
.contact #s1 .fileBtn:focus-within {outline: 0.2rem solid var(--fcs); outline-offset: 0.2rem;}
.contact #s1 input[type=file] {position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.contact #s1 .help {font-size: 1.3rem; color: #797979; margin-top: 0.8rem; line-height: 1.5;}
.contact #s1 .message {margin-top: 7rem;}
.contact #s1 .message .fields {display: grid; grid-template-columns: 1fr; gap: 1rem;}
.contact #s1 .message textarea {height: 22rem; resize: vertical; line-height: 1.6;}
.contact #s1 .srOnly {position: absolute; width: 0.1rem; height: 0.1rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.contact #s1 .agree {display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 3rem; color: #555; line-height: 1.5;}
.contact #s1 .agree .error:not(:empty) {flex-basis: 100%;}
.contact #s1 .agree label {display: inline-flex; align-items: center; gap: 1rem;}
.contact #s1 .agree input {width: 2.2rem; height: 2.2rem; margin: 0; accent-color: var(--fcs);}
.contact button {font-family: inherit; cursor: pointer;}
.contact button:focus-visible {outline: 0.2rem solid var(--fcp); outline-offset: 0.3rem;}
.contact #s1 .privacyOpen {background: none; border: 0; color: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 0.3rem; padding: 0;}
.contact #s1 .privacyOpen:hover {color: var(--fcs);}
.contact #s1 .submit, .contact #privacyDialog .confirm {width: 14rem; height: 6rem; margin-top: 7rem; border: 0.1rem solid var(--fcs); border-radius: 0.5rem; background: var(--fcs); color: #fff; font-size: 1.7rem; transition: color 0.2s,background 0.2s;}
.contact #s1 .submit:hover, .contact #privacyDialog .confirm:hover {background: #fff; color: var(--fcs);}
.contact #s1 .submit:disabled {opacity: 0.6; cursor: wait;}
.contact #s1 .error {color: #b42318; font-size: 1.4rem; line-height: 1.5;}
.contact #s1 .error:not(:empty) {margin-top: 0.6rem;}
.contact #s1 .result:not(:empty) {margin-top: 2rem; line-height: 1.6;}
.contact #privacyDialog {position: fixed; inset: 0; box-sizing: border-box; width: 80rem; max-width: calc(100% - 4rem); max-height: 85vh; padding: 0; border: 0; border-radius: 1rem; color: var(--fct); background: #fff; margin: auto; overflow: hidden;}
.contact #privacyDialog[open] {display: flex; flex-direction: column;}
.contact #privacyDialog::backdrop {background: rgba(0,0,0,0.55);}
.contact #privacyDialog .dialogHead {padding: 2.4rem 3rem; border-bottom: 0.2rem solid var(--fcs); flex-shrink: 0;}
.contact #privacyDialog .dialogHead button {font-size: 3.2rem; width: 4rem; height: 4rem; border: 0; background: none; color: var(--fcs);}
.contact #privacyDialog .policy {min-height: 0; overflow-y: auto; padding: 3rem; line-height: 1.8; overscroll-behavior: contain; overflow-wrap: anywhere;}
.contact #privacyDialog .policy h3 {font-size: 1.8rem; font-weight: 700; color: var(--fcs); margin: 2.5rem 0 1rem;}
.contact #privacyDialog .policy p + p {margin-top: 1.5rem;}
.contact #privacyDialog .dialogFoot {padding: 1.5rem 3rem 2rem; text-align: center; border-top: 0.1rem solid #e0e0e0; flex-shrink: 0;}
.contact #privacyDialog .confirm {margin: 0; height: 4.5rem; width: 11rem;}
@media all and (max-width: 880px) {
    .contact #s1 {padding: 5rem 0 7.5rem;}
    .contact #s1 > .titArea .line {width: 1.25rem; height: 0.15rem; margin-bottom: 1.5rem;}
    .contact #s1 > .titArea .tit {font-size: 1.8rem;}
    .contact #s1 > .inner {width: auto; max-width: none; margin: 4rem 1.5rem 0;}
    .contact #s1 .intro {padding: 1.75rem 2rem; border-radius: 0.5rem; font-size: 1.3rem;}
    .contact #s1 form {margin-top: 3.5rem;}
    .contact #s1 legend {font-size: 1.5rem; gap: 0.5rem; padding: 1rem 0;}
    .contact #s1 legend::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .contact #s1 .fields {grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.5rem;}
    .contact #s1 .field > label {font-size: 1.3rem; margin-bottom: 0.5rem;}
    .contact #s1 input:not([type=hidden]):not([type=checkbox]):not([type=file]), .contact #s1 textarea, .contact #s1 .fileName {height: 3.5rem; padding: 0.8rem 0.7rem; border-radius: 0.25rem; font-size: 1.1rem;}
    .contact #s1 .fileRow {gap: 0.5rem;}
    .contact #s1 .fileBtn {width: 6.5rem; font-size: 1.2rem; border-radius: 0.25rem;}
    .contact #s1 .help {font-size: 1rem; margin-top: 0.4rem;}
    .contact #s1 .message {margin-top: 3.5rem;}
    .contact #s1 .message .fields {gap: 0.5rem;}
    .contact #s1 .message textarea {height: 11rem;}
    .contact #s1 .agree {font-size: 1.1rem; margin-top: 1.5rem;}
    .contact #s1 .agree label {gap: 0.5rem;}
    .contact #s1 .agree input {width: 1.1rem; height: 1.1rem;}
    .contact #s1 .submit {width: 8rem; height: 3.5rem; margin-top: 3.5rem; font-size: 1.2rem; border-radius: 0.25rem;}
    .contact #s1 .error, .contact #s1 .result {font-size: 1.1rem;}
    .contact #privacyDialog {max-width: calc(100% - 3rem); border-radius: 0.5rem;}
    .contact #privacyDialog .dialogHead {padding: 1.2rem 1.5rem; gap: 1rem;}
    .contact #privacyDialog .dialogHead h2 {font-size: 1.6rem;}
    .contact #privacyDialog .dialogHead button {font-size: 2.5rem; width: 3rem; height: 3rem;}
    .contact #privacyDialog .policy {padding: 1.5rem; font-size: 1.2rem;}
    .contact #privacyDialog .policy h3 {font-size: 1.3rem; margin: 1.8rem 0 0.7rem;}
    .contact #privacyDialog .dialogFoot {padding: 1rem 1.5rem;}
    .contact #privacyDialog .confirm {width: 8rem; height: 3.5rem; font-size: 1.2rem;}
}

/* 사이트맵 PC 1216:11568 / MOB 1216:15988, 버튼 기본·호버 1216:12325.
   PC inner 1620 / 카드 390×60, 모바일은 2열. 회사소개만 모바일 행 간격 15px(시안 기준). */
.sitemap #s1 {padding: 19rem 0 15rem;}
.sitemap #s1 .titArea .line {width: 2.5rem; height: 0.3rem; margin-bottom: 3rem; background: var(--fcp);}
.sitemap #s1 .titArea .tit {line-height: 1.35;}
.sitemap #s1 .inner {width: 162rem; max-width: calc(100% - 6rem); margin: 10rem auto 0;}
.sitemap #s1 .group + .group {margin-top: 9rem;}
.sitemap #s1 .subt {gap: 1rem; line-height: 1.35; margin-bottom: 2rem;}
.sitemap #s1 .subt::before {content: ''; width: 1rem; height: 1rem; margin: 0 0.2rem; border-radius: 0.1rem; background: var(--fcp); transform: rotate(45deg); flex-shrink: 0;}
.sitemap #s1 .list {display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem;}
.sitemap #s1 .list a {box-sizing: border-box; height: 6rem; padding: 0 2.5rem; background: #f4f4f4; border: 0.1rem solid transparent; border-radius: 0.5rem; color: #333; line-height: 1; transition: background 0.2s,border-color 0.2s,color 0.2s;}
.sitemap #s1 .list a:hover, .sitemap #s1 .list a:focus-visible {background: #fff; border-color: var(--fcp); color: var(--fcp); font-weight: 600;}
@media all and (max-width: 880px) {
    .sitemap #s1 {padding: 11rem 0 7.5rem;}
    .sitemap #s1 .titArea .line {width: 1.25rem; height: 0.15rem; margin-bottom: 1.5rem;}
    .sitemap #s1 .titArea .tit {font-size: 1.8rem;}
    .sitemap #s1 .inner {width: auto; max-width: none; margin: 5rem 1.5rem 0;}
    .sitemap #s1 .group + .group {margin-top: 4.5rem;}
    .sitemap #s1 .subt {font-size: 1.7rem; gap: 0.5rem; margin-bottom: 1rem;}
    .sitemap #s1 .subt::before {width: 0.5rem; height: 0.5rem; margin: 0 0.1rem; border-radius: 0.05rem;}
    .sitemap #s1 .list {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.5rem;}
    .sitemap #s1 .group:first-child .list {row-gap: 0.75rem;}
    .sitemap #s1 .list a {height: 4rem; padding: 0 1.25rem; border-radius: 0.25rem; font-size: 1.3rem;}
    .mMenu .depth1 li > a:hover, .mMenu .depth1 li > a:focus-visible {color: var(--fcs); font-weight: 700;}
}

/* CMS 메인 이미지 팝업: 이미지 원본 비율 유지, 하단 제어부만 HTML */
#mainPopup{position:fixed;inset:0;margin:auto;width:48rem;max-width:calc(100% - 3rem);max-height:calc(100dvh - 3rem);padding:0;border:0;border-radius:1rem;background:#fff;color:var(--fct);box-shadow:0 2rem 8rem #0003;overflow:hidden}
#mainPopup::backdrop{background:rgba(0,0,0,.42)}
#mainPopup .slide[hidden]{display:none}
/* 화면 위아래 여백 3rem과 하단 버튼 7rem을 제외한 높이에 이미지를 빈틈없이 채움 */
#mainPopup .slide>a{display:block}
#mainPopup .visual{display:block;width:100%;height:auto;max-height:calc(100dvh - 10rem);object-fit:cover}
#mainPopup .foot{height:7rem;box-sizing:border-box;padding:1.6rem 2.4rem;background:#fff}
#mainPopup label{gap:.7rem;cursor:pointer}
#mainPopup input{width:1.5rem;height:1.5rem;accent-color:var(--fcs)}
#mainPopup button{font-family:inherit;background:none;border:0;cursor:pointer;color:var(--fct);padding:.4rem}
#mainPopup .close span{font-size:2rem;margin-left:.7rem;vertical-align:middle}
#mainPopup .close:hover{color:var(--fcs)}
@media all and (max-width:880px){
    #mainPopup .visual{max-height:calc(100dvh - 9rem)}
    #mainPopup .foot{height:6rem;padding:1.2rem 1.6rem}
}

/* 자동 번역 영문: 긴 문구 줄바꿈 및 번역 안내 */
html[lang=en] .tit,html[lang=en] .subt,html[lang=en] .txt{overflow-wrap:break-word;word-break:normal}
html[lang=en] #header .depth1>li>a{font-size:1.6rem}
html[lang=en] #subV .sub_tab a{white-space:normal;line-height:1.4;text-align:center}
html[lang=en] #mainV .quick .lb{padding:0 .8rem;text-align:center;line-height:1.4}
html[lang=en] #mainV .quick li.tec a .txt{min-width:0;width:100%}
html[lang=en] #mainV .quick li.tec a .txt span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.translation-note{padding:1.2rem 2rem;background:#f5f5f5;color:#666;font-size:1.2rem;text-align:center;line-height:1.6}
@media all and (max-width:880px){
    html[lang=en] .titArea .tit{line-height:1.4}
}

/* 영문 검수 보정: 한국어 시안은 유지하고 긴 영문만 박스 안에서 줄바꿈 */
html[lang=en] .philosophy #s1 .txt{min-width:0;white-space:normal;word-break:normal;overflow-wrap:anywhere;line-height:1.6}
html[lang=en] .history #s1 .tab{flex-wrap:wrap}
html[lang=en] .industrial #s4 .list{align-items:stretch;grid-auto-rows:1fr}
html[lang=en] .footer .familyList li a{height:auto;min-height:3.5rem;padding:.7rem 1.2rem;white-space:normal;word-break:normal;overflow-wrap:anywhere;line-height:1.5}
@media all and (min-width:881px){
    html[lang=en] .philosophy #s1 .list li{width:calc(50% - 19.45rem);box-sizing:border-box;padding:2.4rem;min-height:15rem}
    html[lang=en] .philosophy #s1 .list li:nth-child(3){width:58rem;max-width:100%}
    html[lang=en] .philosophy #s1 .ico{width:6rem;height:6rem}
}
@media all and (max-width:880px){
    html[lang=en] #mainV .quick li{min-width:0}
    html[lang=en] .industrial #s4 .list{grid-template-rows:auto auto auto;grid-auto-rows:auto}
    html[lang=en] #mainV .quick li a .lb{width:100%;box-sizing:border-box;white-space:normal;word-break:normal;overflow-wrap:anywhere;padding:0 .3rem;line-height:1.35}
    html[lang=en] .footer .info,html[lang=en] .footer .txt{width:100%;min-width:0}
    html[lang=en] .footer .txt .row .addr{display:block;white-space:normal;text-align:center;line-height:1.6}
    html[lang=en] .footer .txt .row .addr .lb{margin-right:.4rem}
    html[lang=en] .footer .txt .row .addr span:last-child{overflow-wrap:anywhere}
    html[lang=en] .footer .txt .copy{white-space:normal}
    html[lang=en] .history #s1 .tab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
    html[lang=en] .history #s1 .tab a{height:auto;min-height:3.6rem;padding:.6rem 1rem;white-space:normal;text-align:center;box-sizing:border-box}
    html[lang=en] .mMenu .depth1 li button,html[lang=en] .mMenu .depth1 li>a{white-space:normal;word-break:normal;overflow-wrap:anywhere;line-height:1.4;padding:1rem .8rem;height:auto;min-height:6rem;box-sizing:border-box;text-align:center}
    html[lang=en] .mMenu .depth2 li a{white-space:normal;word-break:normal;overflow-wrap:anywhere;line-height:1.5}
    html[lang=en] .nitrogen #s2 .tab a{min-width:0;min-height:5rem;padding:.8rem;white-space:normal;word-break:normal;overflow-wrap:anywhere;box-sizing:border-box;line-height:1.4}
}