video{max-width:100%;width:100%;}
/* ============================================================ joillsys_sub.css — 서브페이지 공통 ============================================================ */
.tb_list01{display:flex;flex-direction:row;margin-bottom:30px;}
.tb_list01 li:nth-child(1){margin-left:0;}
.tb_list01 li.active{border:1px solid var(--blue-dk);z-index:2;background:#f6f9ff;box-shadow:3px 3px 6px #1a2e6b33;color:var(--blue-dk);font-weight:500;}
.tb_list01 li{width:150px;height:50px;text-align:center;border:1px solid #ddd;margin-left:-1px;transition:all 0.3s ease;}
.tb_list01 li:hover{background:#f6f9ff;border:1px solid var(--blue-dk);z-index:1;transition:all 0.3s ease;}
.tb_list01 a{display:flex;width:100%;height:100%;align-items:center;justify-content:center;}
@media (max-width:400px){
	.tb_list01 a{font-size:13px;}
	.tb_list01 li{height:45px;}
}
/* ── 서브 히어로 ── */
.sub-hero{position:relative;display:flex;align-items:center;overflow:hidden;height:80vh;justify-content:center;}
.sub-hero .sh-bg{position:absolute;inset:0;background:var(--blue-dk) center 80%/cover no-repeat;z-index:0;background-position:top;}
@keyframes heroBgZoom{
	0%{transform:scale(1);}
	100%{transform:scale(1.08);}
}
.sub-hero::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom, rgba(8, 14, 40, 0) 0%, rgb(0 3 14 / 57%) 100%);}
.sub-hero .sh-inner{position:relative;z-index:2;width:100%;max-width:var(--inner);margin:0 auto;padding:0 0 52px;text-align:center;}
.sub-hero .sh-cat{display:inline-flex;align-items:center;font-size:18px;font-weight:400;letter-spacing:0.18em;color:rgb(255 255 255 / 85%);text-transform:uppercase;margin-bottom:14px;}
.sub-hero h1{font-size:clamp(32px, 4.5vw, 56px);font-weight:700;color:#fff;letter-spacing:-0.04em;line-height:1.15;}
.sub-hero h1 .ch{display:inline-block;will-change:transform, opacity;}
/* ── 브레드크럼 ── */
.sub-breadcrumb{background:#fff;border-bottom:1px solid #e8e8e8;position:relative;z-index:600;}
.sub-breadcrumb .inner{display:flex;align-items:stretch;height:52px;}
.sub-breadcrumb .bc-item{display:flex;align-items:stretch;position:relative;}
.sub-breadcrumb .bc-home{background:var(--blue);flex-shrink:0;}
.sub-breadcrumb .bc-home a{display:flex;align-items:center;justify-content:center;width:52px;height:100%;transition:background 0.2s;}
.sub-breadcrumb .bc-home a:hover{background:var(--red);}
.sub-breadcrumb .bc-home svg{width:17px;height:17px;stroke:#fff;fill:none;}
.sub-breadcrumb .bc-drop{position:relative;}
.sub-breadcrumb .bc-drop-btn{display:flex;align-items:center;gap:8px;padding:0 20px;height:100%;font-size:16px;color:#444;cursor:pointer; /* background:#f4f4f4; */border:none;border-left:1px solid #e0e0e0;font-family:inherit;transition:background 0.2s, color 0.2s;white-space:nowrap;min-width:230px;justify-content:space-between;}
.sub-breadcrumb .bc-drop-btn:hover, .sub-breadcrumb .bc-drop-btn.open{ /* background:#eaecf0; */color:var(--blue);}
.sub-breadcrumb .bc-drop-btn svg{width:13px;height:13px;stroke:currentColor;flex-shrink:0;transition:transform 0.22s;}
.sub-breadcrumb .bc-drop-btn.open svg{transform:rotate(180deg);}
.sub-breadcrumb .bc-current{display:flex;align-items:center;gap:10px;height:100%;font-size:16px;font-weight:600;color:var(--blue);background:#fff;border-right:1px solid #e0e0e0;white-space:nowrap;min-width:130px;cursor:default;}
.sub-breadcrumb .bc-current svg{flex-shrink:0;opacity:0.35;}
.sub-breadcrumb .bc-drop-list{position:absolute;top:calc(100% + 1px);left:0;min-width:100%;background:#fff;border:1px solid #e0e0e0;border-top:2px solid var(--red);box-shadow:0 8px 24px rgba(0, 0, 0, 0.1);padding:4px 0;z-index:700;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity 0.18s, transform 0.18s;}
.sub-breadcrumb .bc-drop-list.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.sub-breadcrumb .bc-drop-list a{display:block;padding:11px 20px;font-size:16px;color:#444;transition:color 0.15s, background 0.15s, padding-left 0.15s;white-space:nowrap;font-weight:400;}
.sub-breadcrumb .bc-drop-list a:hover{color:var(--blue);background:#f5f7fa;padding-left:26px;}
.sub-breadcrumb .bc-drop-list a.active{color:var(--red);font-weight:500;}
/* ── 서브 레이아웃 ── */
.sub-wrap{display:flex;align-items:flex-start;gap:56px;padding:64px 0 0px;}
.sub-nav{width:210px;flex-shrink:0;position:sticky;top:calc(var(--hh) + 20px);}
.sub-nav .sn-title{font-size:16px;font-weight:800;color:var(--blue);letter-spacing:-0.02em;padding-bottom:14px;border-bottom:2px solid var(--blue);margin-bottom:0;}
.sub-nav ul{border-bottom:1px solid #ddd;}
.sub-nav ul li a{display:flex;align-items:center;justify-content:space-between;padding:13px 0;font-size:16px;color:var(--gt);border-bottom:1px solid #eee;transition:color 0.2s, padding-left 0.2s;}
.sub-nav ul li a:hover{color:var(--blue);padding-left:6px;}
.sub-nav ul li a.active{color:var(--red);font-weight:700;}
.sub-nav ul li a svg{width:13px;height:13px;stroke:currentColor;opacity:0.4;}
.sub-nav ul li a.active svg{opacity:1;stroke:var(--red);}
.sub-content{flex:1;min-width:0;width:100%;padding-bottom:100px;overflow:hidden;}
/* ── 콘텐츠 ── */
.sub-section{margin-bottom:100px;}
.sub-section:last-child{margin-bottom:0;}
.sub-lead em{font-style:normal;color:var(--red);}
.sub-title{font-size:clamp(18px, 2vw, 24px);font-weight:700;color:#111;letter-spacing:-0.03em;}
.sub-body{font-size:18px;color:#444;line-height:1.9;margin-bottom:14px;}
.sub-body:last-child{margin-bottom:0;}
.sub-sign{margin-top:36px;font-size:15px;color:#555;}
.sub-sign strong{font-size:17px;color:#111;font-weight:700;}
.anim-delay-1, .anim-delay-2, .anim-delay-3, .anim-delay-4{}
/* ── 공용: 섹션 레이블 ── */
.section-label{font-size:14px;color:var(--red);text-transform:uppercase;margin-bottom:32px;display:flex;align-items:center;gap:12px;font-weight:600;}
.section-label::after{content:'';display:block;flex:1;max-width:32px;height:1px;background:var(--red);}
/* ── 공용: KV 수치 그리드 ── */
.kv-grid{display:grid;gap:1px;background:#e8e8e8;border:1px solid #e8e8e8;}
.kv-grid.col-3{grid-template-columns:repeat(3, 1fr);}
.kv-grid.col-4{grid-template-columns:repeat(4, 1fr);}
.kv-item{background:#fff;padding:24px 20px;text-align:center;}
.kv-num{font-size:clamp(28px, 4vw, 48px);font-weight:800;color:#0a0f1e;letter-spacing:-0.05em;line-height:1;margin-bottom:6px;}
.kv-num sup{font-size:0.42em;font-weight:500;color:var(--red);vertical-align:top;margin-top:6px;display:inline-block;margin-left:5px;}
.kv-label{font-size:11px;font-weight:600;color:#aaa;letter-spacing:0.1em;text-transform:uppercase;}
/* ── 공용: 심플 테이블 ── */
.simple-table{width:100%;border-collapse:collapse;}
.simple-table thead tr{border-bottom:2px solid #0a0f1e;}
.simple-table th{font-size:16px;font-weight:600;letter-spacing:0.08em;color:#888;text-transform:uppercase;padding:10px 14px;text-align:left;}
.simple-table tbody tr{border-bottom:1px solid #f0f0f0;transition:background 0.15s;}
.simple-table tbody tr:hover{background:#fafafa;}
.simple-table td{padding:14px;font-size:16px;color:#333;}
.simple-table td.one{font-weight:normal !important;}
.simple-table td:nth-of-type(1){font-weight:600;color:#0a0f1e;}
.simple-table td:last-child{font-weight:700;color:#0a0f1e;}
.simple-table .total-row{border-top:2px solid #0a0f1e;border-bottom:none;}
.simple-table .total-row td{padding-top:18px;font-weight:700;color:#0a0f1e;}
.simple-table .total-row td:last-child{font-size:18px;letter-spacing:-0.03em;}
/* ══════════════════════════════════════ 반응형 ══════════════════════════════════════ */
@media (max-width:1200px){
	.sub-wrap{}
}
@media (max-width:960px){
	.sub-breadcrumb .bc-drop-list a{font-size:14px;padding:10px 10px;}
	.sub-breadcrumb .bc-drop{flex:1;}
	.sub-hero{}
	.sub-wrap{}
	.sub-nav{width:180px;}
	.kv-grid.col-4{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:768px){
	/* 히어로: 가운데 정렬, 크기 */
	.sub-hero{align-items:center;}
	.sub-hero .sh-inner{padding:0 20px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;}
	.sub-hero h1{font-size:28px;letter-spacing:-0.03em;}
	.sub-hero .sh-cat{font-size:10px;margin-bottom:10px;}
	/* 브레드크럼 */
	.sub-breadcrumb{ /* overflow:visible; */}
	.sub-breadcrumb .inner{padding:0;height:48px;}
	.sub-breadcrumb .bc-home a{width:48px;}
	.sub-breadcrumb .bc-home svg{width:15px;height:15px;}
	.sub-breadcrumb .bc-drop-btn{font-size:13px;min-width:0;flex:1;padding:0 12px;}
	.sub-breadcrumb .bc-current{font-size:13px;min-width:0;flex:1;padding:0 12px;gap:8px;}
	.sub-breadcrumb .bc-drop-list{min-width:auto;width:100%;}
	/* 레이아웃 */
	.sub-wrap{}
	.sub-nav{display:none;}
	.sub-content{width:100%;}
	/* 텍스트 크기 - 모바일에서 넉넉하게 */
	.sub-lead{font-size:24px;}
	.sub-title{font-size:19px;}
	.sub-body{font-size:15px;}
	.sub-section{margin-bottom:40px;}
	.section-label{margin-bottom:20px;}
	/* 그리드 */
	.kv-grid.col-3{ /* grid-template-columns:1fr 1fr; */}
	.kv-grid.col-4{grid-template-columns:1fr 1fr;}
	/* 테이블 가로 스크롤 */
	.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.simple-table{ /* min-width:480px; */}
	.simple-table th, .simple-table td{padding:10px 10px;font-size:13px;}
}
@media (max-width:480px){
	.inner{}
	.sub-hero{}
	.sub-hero h1{font-size:24px;}
	.sub-section{margin-bottom:28px;}
	.kv-grid.col-3, .kv-grid.col-2{display:flex;flex-direction:column;}
	.kv-item{padding:18px 12px;}
	.kv-num{font-size:28px;}
}
/* ========================================================= 반응형 보정 - sub visual / breadcrumb / sub layout ========================================================= */
@media (max-width:1600px){
	.sub-hero .sh-inner{}
	.sub-wrap{}
}
@media (max-width:1400px){
	.sub-hero{}
	.sub-hero .sh-inner{}
	.sub-wrap{}
	.sub-nav{width:190px;}
	.sub-section{margin-bottom:82px;}
}
@media (max-width:1024px){
	.sub-hero{margin-top:0;}
	.sub-hero .sh-inner{}
	.sub-hero h1{font-size:38px;}
	.sub-breadcrumb .inner{ /* padding:0; *//* overflow-x:auto; *//* overflow-y:visible; */-webkit-overflow-scrolling:touch;}
	.sub-breadcrumb .bc-drop-btn{min-width:190px;font-size:14px;padding:0 14px;}
	.sub-breadcrumb .bc-current{min-width:150px;font-size:14px;padding:0 14px;}
	.sub-wrap{}
	.sub-nav{display:none;}
	.sub-content{overflow:visible;}
	.sub-section{margin-bottom:68px;}
	.sub-lead{font-size:34px;line-height:1.32;}
	.sub-body{font-size:16px;line-height:1.85;}
	.section-label{margin-bottom:24px;}
	.simple-table{}
	.simple-table thead, .simple-table tbody, .simple-table tr{ /* min-width:640px; */}
}
@media (max-width:767px){
	.sub-hero{height:50vh;}
	.sub-hero .sh-bg{background-position:center top;}
	.sub-hero .sh-inner{}
	.sub-hero .sh-cat{font-size:11px;margin-bottom:8px;letter-spacing:.14em;}
	.sub-hero h1{font-size:30px;line-height:1.18;}
	.sub-breadcrumb{ /* display:block; */}
	.sub-breadcrumb .inner{ /* height:48px; *//* display:flex; *//* overflow-x:auto; */}
	.sub-breadcrumb .bc-home a{width:48px;}
	.sub-breadcrumb .bc-drop-btn{height:48px;font-size:13px;padding:0 12px;min-width:auto;}
	.sub-breadcrumb .bc-current{min-width:130px;height:48px;font-size:13px;padding:0;}
	.sub-wrap{}
	.sub-content{}
	.sub-section{margin-bottom:46px;}
	.sub-lead{font-size:26px;line-height:1.36;margin-bottom:16px;}
	.sub-title{font-size:20px;}
	.sub-body{font-size:15px;line-height:1.78;}
	.section-label{font-size:12px;margin-bottom:18px;}
	.simple-table{font-size:13px;}
	.simple-table th, .simple-table td{padding:11px 5px;font-size:13px;}
}
video{max-width:100%;width:100%;}
/* ============================================================ joillsys_sub.css — 서브페이지 공통 ============================================================ */
.tb_list01{display:flex;flex-direction:row;margin-bottom:30px;}
.tb_list01 li:nth-child(1){margin-left:0;}
.tb_list01 li.active{border:1px solid var(--blue-dk);z-index:2;background:#f6f9ff;box-shadow:3px 3px 6px #1a2e6b33;color:var(--blue-dk);font-weight:500;}
.tb_list01 li{width:150px;height:50px;text-align:center;border:1px solid #ddd;margin-left:-1px;transition:all 0.3s ease;}
.tb_list01 li:hover{background:#f6f9ff;border:1px solid var(--blue-dk);z-index:1;transition:all 0.3s ease;}
.tb_list01 a{display:flex;width:100%;height:100%;align-items:center;justify-content:center;}
@media (max-width:400px){
	.tb_list01 a{font-size:13px;}
	.tb_list01 li{height:45px;}
}
/* ── 서브 히어로 ── */
.sub-hero{position:relative;display:flex;align-items:center;overflow:hidden;height:60vh;justify-content:center;}
.sub-hero .sh-bg{position:absolute;inset:0;background:var(--blue-dk) center 80%/cover no-repeat;z-index:0;background-position:top;}
@keyframes heroBgZoom{
	0%{transform:scale(1);}
	100%{transform:scale(1.08);}
}
.sub-hero::before{content:'';position:absolute;inset:0;z-index:2;background:#0000002b;}
.sub-hero .sh-inner{position:relative;z-index:2;width:100%;max-width:var(--inner);margin:0 auto;padding:0 0 52px;text-align:center;}
.sub-hero .sh-cat{display:inline-flex;align-items:center;font-size:18px;font-weight:400;letter-spacing:0.18em;color:rgb(255 255 255 / 85%);text-transform:uppercase;margin-bottom:14px;}
.sub-hero h1{font-size:clamp(32px, 4.5vw, 56px);font-weight:700;color:#fff;letter-spacing:-0.04em;line-height:1.15;}
.sub-hero h1 .ch{display:inline-block;will-change:transform, opacity;}
/* ── 브레드크럼 ── */
.sub-breadcrumb{background:#fff;border-bottom:1px solid #e8e8e8;position:relative;z-index:600;}
.sub-breadcrumb .inner{display:flex;align-items:stretch;height:52px;}
.sub-breadcrumb .bc-item{display:flex;align-items:stretch;position:relative;}
.sub-breadcrumb .bc-home{background:var(--blue);flex-shrink:0;}
.sub-breadcrumb .bc-home a{display:flex;align-items:center;justify-content:center;width:52px;height:100%;transition:background 0.2s;}
.sub-breadcrumb .bc-home a:hover{background:var(--red);}
.sub-breadcrumb .bc-home svg{width:17px;height:17px;stroke:#fff;fill:none;}
.sub-breadcrumb .bc-drop{position:relative;}
.sub-breadcrumb .bc-drop-btn{display:flex;align-items:center;gap:8px;padding:0 20px;height:100%;font-size:16px;color:#444;cursor:pointer; /* background:#f4f4f4; */border:none;border-left:1px solid #e0e0e0;font-family:inherit;transition:background 0.2s, color 0.2s;white-space:nowrap;min-width:230px;justify-content:space-between;}
.sub-breadcrumb .bc-drop-btn:hover, .sub-breadcrumb .bc-drop-btn.open{ /* background:#eaecf0; */color:var(--blue);}
.sub-breadcrumb .bc-drop-btn svg{width:13px;height:13px;stroke:currentColor;flex-shrink:0;transition:transform 0.22s;}
.sub-breadcrumb .bc-drop-btn.open svg{transform:rotate(180deg);}
.sub-breadcrumb .bc-current{display:flex;align-items:center;gap:10px;height:100%;font-size:16px;font-weight:600;color:var(--blue);background:#fff;border-right:1px solid #e0e0e0;white-space:nowrap;min-width:130px;cursor:default;}
.sub-breadcrumb .bc-current svg{flex-shrink:0;opacity:0.35;}
.sub-breadcrumb .bc-drop-list{position:absolute;top:calc(100% + 1px);left:0;min-width:100%;background:#fff;border:1px solid #e0e0e0;border-top:2px solid var(--red);box-shadow:0 8px 24px rgba(0, 0, 0, 0.1);padding:4px 0;z-index:700;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity 0.18s, transform 0.18s;}
.sub-breadcrumb .bc-drop-list.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.sub-breadcrumb .bc-drop-list a{display:block;padding:11px 20px;font-size:16px;color:#444;transition:color 0.15s, background 0.15s, padding-left 0.15s;white-space:nowrap;font-weight:400;}
.sub-breadcrumb .bc-drop-list a:hover{color:var(--blue);background:#f5f7fa;padding-left:26px;}
.sub-breadcrumb .bc-drop-list a.active{color:var(--red);font-weight:500;}
/* ── 서브 레이아웃 ── */
.sub-wrap{display:flex;align-items:flex-start;gap:56px;padding:64px 0 0px;}
.sub-nav{width:210px;flex-shrink:0;position:sticky;top:calc(var(--hh) + 20px);}
.sub-nav .sn-title{font-size:16px;font-weight:800;color:var(--blue);letter-spacing:-0.02em;padding-bottom:14px;border-bottom:2px solid var(--blue);margin-bottom:0;}
.sub-nav ul{border-bottom:1px solid #ddd;}
.sub-nav ul li a{display:flex;align-items:center;justify-content:space-between;padding:13px 0;font-size:16px;color:var(--gt);border-bottom:1px solid #eee;transition:color 0.2s, padding-left 0.2s;}
.sub-nav ul li a:hover{color:var(--blue);padding-left:6px;}
.sub-nav ul li a.active{color:var(--red);font-weight:700;}
.sub-nav ul li a svg{width:13px;height:13px;stroke:currentColor;opacity:0.4;}
.sub-nav ul li a.active svg{opacity:1;stroke:var(--red);}
.sub-content{flex:1;min-width:0;width:100%;padding-bottom:100px;overflow:hidden;}
/* ── 콘텐츠 ── */
.sub-section{margin-bottom:100px;}
.sub-section:last-child{margin-bottom:0;}
.sub-lead{font-size:clamp(26px, 3vw, 52px);font-weight:700;color:#111;line-height:1.35;letter-spacing:-0.04em;margin-bottom:40px;}
.sub-lead em{font-style:normal;color:var(--red);}
.sub-title{font-size:clamp(18px, 2vw, 24px);font-weight:700;color:#111;letter-spacing:-0.03em;}
.sub-body{font-size:18px;color:#444;line-height:1.9;margin-bottom:14px;}
.sub-body:last-child{margin-bottom:0;}
.sub-sign{margin-top:36px;font-size:15px;color:#555;}
.sub-sign strong{font-size:17px;color:#111;font-weight:700;}
.anim-delay-1, .anim-delay-2, .anim-delay-3, .anim-delay-4{}
/* ── 공용: 섹션 레이블 ── */
.section-label{font-size:14px;color:var(--red);text-transform:uppercase;margin-bottom:32px;display:flex;align-items:center;gap:12px;font-weight:600;}
.section-label::after{content:'';display:block;flex:1;max-width:32px;height:1px;background:var(--red);}
/* ── 공용: KV 수치 그리드 ── */
.kv-grid{display:grid;gap:1px;background:#e8e8e8;border:1px solid #e8e8e8;}
.kv-grid.col-3{grid-template-columns:repeat(3, 1fr);}
.kv-grid.col-4{grid-template-columns:repeat(4, 1fr);}
.kv-item{background:#fff;padding:24px 20px;text-align:center;}
.kv-num{font-size:clamp(28px, 4vw, 48px);font-weight:800;color:#0a0f1e;letter-spacing:-0.05em;line-height:1;margin-bottom:6px;}
.kv-num sup{font-size:0.42em;font-weight:500;color:var(--red);vertical-align:top;margin-top:6px;display:inline-block;margin-left:5px;}
.kv-label{font-size:11px;font-weight:600;color:#aaa;letter-spacing:0.1em;text-transform:uppercase;}
/* ── 공용: 심플 테이블 ── */
.simple-table{width:100%;border-collapse:collapse;}
.simple-table thead tr{border-bottom:2px solid #0a0f1e;}
.simple-table th{font-size:16px;font-weight:600;letter-spacing:0.08em;color:#888;text-transform:uppercase;padding:10px 14px;text-align:left;}
.simple-table tbody tr{border-bottom:1px solid #f0f0f0;transition:background 0.15s;}
.simple-table tbody tr:hover{background:#fafafa;}
.simple-table td{padding:14px;font-size:16px;color:#333;}
.simple-table td.one{font-weight:normal !important;}
.simple-table td:nth-of-type(1){font-weight:600;color:#0a0f1e;}
.simple-table td:last-child{font-weight:700;color:#0a0f1e;}
.simple-table .total-row{border-top:2px solid #0a0f1e;border-bottom:none;}
.simple-table .total-row td{padding-top:18px;font-weight:700;color:#0a0f1e;}
.simple-table .total-row td:last-child{font-size:18px;letter-spacing:-0.03em;}
/* ══════════════════════════════════════ 반응형 ══════════════════════════════════════ */
@media (max-width:1200px){
	.sub-wrap{}
}
@media (max-width:960px){
	.sub-breadcrumb .bc-drop-list a{font-size:14px;padding:10px 10px;}
	.sub-breadcrumb .bc-drop{flex:1;}
	.sub-hero{}
	.sub-wrap{}
	.sub-nav{width:180px;}
	.kv-grid.col-4{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:768px){
	/* 히어로: 가운데 정렬, 크기 */
	.sub-hero{align-items:center;}
	.sub-hero .sh-inner{padding:0 20px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;}
	.sub-hero h1{font-size:28px;letter-spacing:-0.03em;}
	.sub-hero .sh-cat{font-size:10px;margin-bottom:10px;}
	/* 브레드크럼 */
	.sub-breadcrumb{ /* overflow:visible; */}
	.sub-breadcrumb .inner{padding:0;height:48px;}
	.sub-breadcrumb .bc-home a{width:48px;}
	.sub-breadcrumb .bc-home svg{width:15px;height:15px;}
	.sub-breadcrumb .bc-drop-btn{font-size:13px;min-width:0;flex:1;padding:0 12px;}
	.sub-breadcrumb .bc-current{font-size:13px;min-width:0;flex:1;padding:0 12px;gap:8px;}
	.sub-breadcrumb .bc-drop-list{min-width:auto;width:100%;}
	/* 레이아웃 */
	.sub-wrap{}
	.sub-nav{display:none;}
	.sub-content{width:100%;}
	/* 텍스트 크기 - 모바일에서 넉넉하게 */
	.sub-lead{font-size:24px;}
	.sub-title{font-size:19px;}
	.sub-body{font-size:15px;}
	.sub-section{margin-bottom:40px;}
	.section-label{margin-bottom:20px;}
	/* 그리드 */
	.kv-grid.col-3{ /* grid-template-columns:1fr 1fr; */}
	.kv-grid.col-4{grid-template-columns:1fr 1fr;}
	/* 테이블 가로 스크롤 */
	.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.simple-table{ /* min-width:480px; */}
	.simple-table th, .simple-table td{padding:10px 10px;font-size:13px;}
}
@media (max-width:480px){
	.inner{}
	.sub-hero{}
	.sub-hero h1{font-size:24px;}
	.sub-section{margin-bottom:28px;}
	.kv-grid.col-3, .kv-grid.col-2{display:flex;flex-direction:column;}
	.kv-item{padding:18px 12px;}
	.kv-num{font-size:28px;}
}
/* ========================================================= 반응형 보정 - sub visual / breadcrumb / sub layout ========================================================= */
@media (max-width:1600px){
	.sub-hero .sh-inner{}
	.sub-wrap{}
}
@media (max-width:1400px){
	.sub-hero{}
	.sub-hero .sh-inner{}
	.sub-wrap{}
	.sub-nav{width:190px;}
	.sub-section{margin-bottom:82px;}
}
@media (max-width:1024px){
	.sub-hero{margin-top:0;}
	.sub-hero .sh-inner{}
	.sub-hero h1{font-size:38px;}
	.sub-breadcrumb .inner{ /* padding:0; *//* overflow-x:auto; *//* overflow-y:visible; */-webkit-overflow-scrolling:touch;}
	.sub-breadcrumb .bc-drop-btn{min-width:190px;font-size:14px;padding:0 14px;}
	.sub-breadcrumb .bc-current{min-width:150px;font-size:14px;padding:0 14px;}
	.sub-wrap{}
	.sub-nav{display:none;}
	.sub-content{overflow:visible;}
	.sub-section{margin-bottom:68px;}
	.sub-lead{font-size:34px;line-height:1.32;}
	.sub-body{font-size:16px;line-height:1.85;}
	.section-label{margin-bottom:24px;}
	.simple-table{}
	.simple-table thead, .simple-table tbody, .simple-table tr{ /* min-width:640px; */}
}
@media (max-width:767px){
	.sub-hero{height:50vh;}
	.sub-hero .sh-bg{background-position:center top;}
	.sub-hero .sh-inner{}
	.sub-hero .sh-cat{font-size:11px;margin-bottom:8px;letter-spacing:.14em;}
	.sub-hero h1{font-size:30px;line-height:1.18;}
	.sub-breadcrumb{ /* display:block; */}
	.sub-breadcrumb .inner{ /* height:48px; *//* display:flex; *//* overflow-x:auto; */}
	.sub-breadcrumb .bc-home a{width:48px;}
	.sub-breadcrumb .bc-drop-btn{height:48px;font-size:13px;padding:0 12px;min-width:auto;}
	.sub-breadcrumb .bc-current{min-width:130px;height:48px;font-size:13px;padding:0;}
	.sub-wrap{}
	.sub-content{}
	.sub-section{margin-bottom:46px;}
	.sub-lead{font-size:26px;line-height:1.36;margin-bottom:16px;}
	.sub-title{font-size:20px;}
	.sub-body{font-size:15px;line-height:1.78;}
	.section-label{font-size:12px;margin-bottom:18px;}
	.simple-table{font-size:13px;}
	.simple-table th, .simple-table td{padding:11px 5px;font-size:13px;}
}
/* ========================================================= LX완성창협력사 ========================================================= */
.lx-page{}
.lx-section{margin:100px 0 0;overflow:visible;}
.lx-top{display:grid;grid-template-columns:220px 1fr 300px;gap:40px;align-items:end;padding-top:70px;}
.lx-top .eyebrow{font-size:22px;font-weight:800;letter-spacing:-.02em;}
.lx-top h2{text-align:center;font-size:54px;font-weight:900;line-height:1.15;letter-spacing:-.06em;}
.lx-top p{font-size:15px;line-height:1.65;color:#555;letter-spacing:-.025em;text-align:right;}
.lx-visual-wrap{width:100%;overflow:visible;}
.lx-visual{width:100%;max-width:100%;margin:0 auto 0;overflow:hidden;border-radius:0;will-change:max-width, height, border-radius;}
.lx-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.lx-overview{display:grid;grid-template-columns:1fr 520px;gap:90px;align-items:center;padding-top:40px;}
.lx-num{display:block;margin-bottom:22px;font-size:14px;font-weight:700;color:#111;}
.lx-title{font-size:clamp(21px, 4vw, 42px);font-weight:700;line-height:1.25;letter-spacing:-.055em;margin-bottom:20px;}
.lx-title em{font-style:normal;color:#e60012;}
.lx-text{margin-top:26px;font-size:21px;line-height:1.5;color:#444;letter-spacing:-.03em;margin-bottom:40px;}
.lx-strategy{}
.lx-strategy-head{gap:40px;margin-top:80px;margin-bottom:100px;display:flex;flex-direction:column;font-size:clamp(16px, 1.5vw, 21px);}
.lx-strategy-head .left{ /* width: 60%; */}
.lx-strategy-head .lx-text{margin-top:0;}
.lx-hover{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;height:430px;overflow:hidden;border-radius:8px;background:#0c4f9f;}
.lx-hover-bg{position:relative;background:center/cover no-repeat;transition:.45s ease;}
.lx-hover-bg:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(0, 63, 140, .68), rgba(0, 63, 140, .28));}
.lx-hover-bg .txt{position:absolute;left:34px;bottom:34px;z-index:2;color:#fff;}
.lx-hover-bg .txt span{display:block;margin-bottom:12px;font-size:13px;font-weight:700;opacity:.9;}
.lx-hover-bg .txt h3{font-size:25px;font-weight:800;line-height:1.35;letter-spacing:-.04em;}
.lx-hover-bg .txt p{margin-top:14px;font-size:15px;line-height:1.65;color:rgba(255, 255, 255, .82);}
.lx-hover-item{position:relative;padding:28px 24px;background:#0b5db9;color:#fff;border-left:1px solid rgba(255, 255, 255, .16);cursor:pointer;transition:.35s;}
.lx-hover-item:nth-child(3){background:#0750a3;}
.lx-hover-item:nth-child(4){background:#003b7c;}
.lx-hover-item.active{background:#002b5e;}
.lx-hover-item span{display:block;font-size:13px;font-weight:700;opacity:.75;}
.lx-hover-item h3{position:absolute;left:24px;bottom:34px;font-size:21px;font-weight:800;line-height:1.35;letter-spacing:-.04em;}
.lx-manage, .lx-process{display:grid;grid-template-columns:510px 1fr;gap:80px;align-items:start;overflow:visible;margin-top:100px;}
.lx-manage{margin-bottom:100px;}
.lx-process-left{ /* position:sticky; *//* top:90px; *//* align-self:start; */}
.lx-process-left .lx-text{}
.lx-process-list{}
.lx-process-row.is-show{opacity:1;transform:translateY(0);}
.lx-process-row strong{font-size:15px;font-weight:800;}
.lx-process-row ul{margin:0;padding:0;list-style:none;}
.lx-process-row li{position:relative;padding-left:12px;margin:6px 0;font-size:15px;line-height:1.55;color:#555;}
.lx-process-row li:before{content:'';position:absolute;left:0;top:10px;width:4px;height:4px;border-radius:50%;background:#777;}
.lx-video{margin:130px auto 80px;font-size:clamp(16px, 1.5vw, 21px);}
.lx-video-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px;}
.lx-video-head .lx-text{max-width:540px;margin-top:0;}
.lx-video-box{position:relative;overflow:hidden;aspect-ratio:1920 / 1080;margin-top:40px;}
.lx-video-box video{width:100%;height:100%;object-fit:cover;display:block;}
.lx-video-box:after{content:'';position:absolute;background:linear-gradient(0deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));height:30%;width:100%;bottom:0;left:0;}
.lx-video-caption{position:absolute;left:40px;bottom:36px;z-index:2;color:#fff;}
.lx-video-caption span{display:block;font-size:13px;font-weight:800;color:#e60012;letter-spacing:.14em;}
.lx-video-caption h3{font-size:34px;font-weight:600;letter-spacing:-.05em;}
.lx-video-label{margin-top:14px;font-size:18px;font-weight:800;color:#111;letter-spacing:-.04em;}
.lx-info-box{margin:70px 0 0; /* padding:39px; *//* background:linear-gradient(135deg, #f8f9fb 0%, #fff 100%); *//* border:1px solid #eee; */}
.lx-info-head{}
.lx-info-badge{display:inline-block;margin-bottom:10px;padding:7px 12px;border-radius:999px;background:#111;color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;}
.lx-info-title{font-size:clamp(26px, 3vw, 52px);font-weight:700;line-height:1.35;letter-spacing:-.055em;color:#111;}
.lx-info-title em{font-style:normal;color:#e60012;}
.lx-info-desc{margin-top:0;font-size:clamp(16px, 1.5vw, 21px);line-height:1.75;color:#333;letter-spacing:-.035em;}
.lx-compare-table{margin-top:38px;border-radius:0;overflow:hidden;background:#fff;border:1px solid #e8e8e8;}
.lx-compare-row{display:grid;grid-template-columns:1fr 150px 1fr;align-items:stretch;border-bottom:1px solid #ececec;}
.lx-compare-row:last-child{border-bottom:0;}
.lx-compare-head{background:#111;color:#fff;border-bottom:0;}
.lx-compare-th{padding:22px 24px;font-size:23px;font-weight:700;text-align:center;letter-spacing:-.04em;}
.lx-compare-th.lx-complete{background:#e60012;}
.lx-compare-mid{display:flex;align-items:center;justify-content:center;padding:18px 16px;background:#f4f5f7;color:#111;font-size:17px;letter-spacing:-.035em;text-align:center;border-left:1px solid #ececec;border-right:1px solid #ececec;}
.lx-compare-head .lx-compare-mid{background:#272727;color:#fff;border-color:rgba(255, 255, 255, .12);}
.lx-compare-td{position:relative;display:flex;align-items:center;padding:20px;text-align:center;min-height:78px;font-size:19px;line-height:1.5;color:#333;letter-spacing:-.035em;background:#fff;justify-content:center;}
.lx-compare-td.lx-good{font-weight:600;}
.lx-manage-list{}
.lx-process-row, .lx-manage-row{display:flex;gap:50px;padding:20px 10px;border-bottom:1px solid #ddd;align-items:center;}
.lx-process-row:nth-child(1), .lx-manage-row:nth-child(1){border-top:1px solid #222;}
.lx-manage-row strong{font-size:18px;font-weight:700;}
.lx-process-row h4, .lx-manage-row h4{font-size:27px;font-weight:700;letter-spacing:-.035em;}
.lx-manage-row p{font-size:15px;line-height:1.7;color:#555;}
.lx-bottom-banner{position:relative;margin:40px 0 0;height:360px;background:url('<?php echo G5_THEME_URL; ?>/image/joillsys_sub/lx_factory.png') center/cover no-repeat;}
.lx-bottom-banner h3{font-size:42px;font-weight:900;line-height:1.25;letter-spacing:-.055em;}
.lx-bottom-banner p{margin-top:20px;font-size:17px;line-height:1.75;color:rgba(255, 255, 255, .78);}
.lx-compare-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#f4f4f6;text-align:center;padding:20px;}
.lx-compare-mid strong{font-size:18px;font-weight:700;color:#111;line-height:1.3;}
.lx-compare-mid span{font-size:13px;color:#777;line-height:1.5;}
.not_txt{margin-top:25px;font-size:20px;line-height:1.8;color:#222;display:flex;align-items:center;justify-content:center;gap:14px;text-align:left;}
.not_btm{text-align:center; /* text-decoration: underline; */font-size:1.2em;color:#666;}
.not_txt strong{display:flex;font-size:14px;font-weight:800;letter-spacing:.08em;background:var(--red);border-radius:999px;color:#fff;padding:4px 12px;align-items:center;min-width:90px;justify-content:center;flex-shrink:0;}
.not_txt strong em{color:#fff;background:#ffffff52;display:flex;width:16px;height:16px;border-radius:999px;align-items:center;justify-content:center;margin-right:7px;line-height:1;font-weight:600;font-style:normal;}
.not_txt em{font-style:normal;font-weight:800;color:#e60012;}
@media (max-width:767px){
	.not_txt{align-items:flex-start;justify-content:flex-start;gap:10px;font-size:14px;line-height:1.6;}
	.not_txt strong{min-width:76px;font-size:12px;padding:3px 10px;}
}
@media (max-width:767px){
	.lx-compare-mid{}
	.lx-compare-mid strong{font-size:14px;}
	.lx-compare-mid span{font-size:11px;line-height:1.4;word-break:keep-all;}
	.not_txt{font-size:16px;line-height:1.7;display:flex;flex-direction:column;align-items:flex-start;}
	.not_btm{text-align:left;font-size:14px;}
}
@media (max-width:1600px){
	.lx-section{max-width:1280px;}
	.lx-top h2{font-size:50px;}
	.lx-title{font-size:38px;}
}
@media (max-width:1400px){
	.lx-section{padding:100px 30px;}
	.lx-overview{gap:60px;}
	.lx-process, .lx-manage{gap:80px;}
	.lx-process{min-height:760px;}
}
@media (max-width:1024px){
	.lx-section{padding:80px 24px;}
	.lx-top{grid-template-columns:1fr;gap:18px;text-align:left;}
	.lx-top h2{text-align:left;font-size:42px;}
	.lx-top p{text-align:left;}
	.lx-visual-wrap{}
	.lx-visual{height:360px;}
	.lx-overview{grid-template-columns:1fr;gap:36px;}
	.lx-strategy-head{grid-template-columns:1fr;gap:28px;margin-bottom:0;}
	.lx-hover{grid-template-columns:1fr 1fr;height:auto;}
	.lx-hover-bg{grid-column:1/3;height:360px;}
	.lx-hover-item{height:220px;}
	.lx-process, .lx-manage{grid-template-columns:1fr;gap:0px;min-height:auto;margin-top:60px;}
	.lx-process-left{position:relative;top:auto;}
	.lx-video-head{display:block;}
	.lx-video-head .lx-text{margin-top:20px;max-width:none;}
	.lx-video-box{}
	.lx-info-box{}
	.lx-compare-row{grid-template-columns: 1fr 60px 1fr;}
	.lx-compare-th, .lx-compare-head .lx-compare-mid{padding:17px 10px;line-height:1;}
	.lx-compare-th{font-size:18px;}
	.lx-compare-mid, .lx-compare-td{font-size:15px;padding:20px 10px;}
	.lx-compare-td:before{left:22px;}
	.lx-compare-mid{}
}
@media (max-width:767px){
	.lx-section{padding:60px 18px;}
	.lx-top{padding-top:30px;}
	.lx-top .eyebrow{font-size:18px;}
	.lx-top h2{font-size:34px;}
	.lx-top p{font-size:14px;}
	.lx-visual-wrap{margin-bottom:40px;}
	.lx-visual{height:250px;}
	.lx-num{font-size:13px;margin-bottom:16px;}
	.lx-title{font-size:29px;}
	.lx-text{font-size:16px;line-height:1.4;}
	.lx-overview-img{height:220px;}
	.lx-hover{grid-template-columns:1fr;}
	.lx-hover-bg{grid-column:auto;height:300px;}
	.lx-hover-bg .txt{left:22px;bottom:24px;}
	.lx-hover-bg .txt h3{font-size:22px;}
	.lx-hover-item{height:140px;padding:22px;}
	.lx-hover-item h3{left:22px;bottom:22px;font-size:19px;}
	.lx-process-row ul{grid-column:2/3;}
	.lx-process-row h4{font-size:18px;}
	.lx-process-row li{font-size:14px;}
	.lx-video-box{}
	.lx-video-caption{left:10px;bottom:10px;}
	.lx-video-caption h3{font-size:18px;}
	.lx-video-caption span{font-size:10px;margin-bottom:0}
	.lx-video-label{font-size:15px;}
	.lx-info-box{}
	.lx-video{margin:80px auto;}
	.lx-info-head{}
	.lx-info-badge{font-size:10px;}
	.lx-info-title{font-size:25px;}
	.lx-info-desc{line-height:1.55;}
	.lx-compare-table{}
	.lx-compare-row{}
	.lx-compare-head .lx-compare-mid{}
	.lx-compare-head .lx-compare-th:last-child{}
	.lx-compare-mid{}
	.lx-compare-td{min-height:auto;font-size:14px;}
	.lx-compare-td:before{left:18px;}
	.lx-process-row, .lx-manage-row{grid-template-columns:42px 1fr;gap:26px;padding:20px 0;}
	.lx-manage-row p{grid-column:2/3;font-size:14px;}
	.lx-manage-row h4{font-size:18px;}
	.lx-bottom-banner{height:300px;}
	.lx-bottom-banner h3{font-size:28px;}
	.lx-bottom-banner p{font-size:15px;}
}
/* LX 협력사 운영 / 제조 시스템 카드형 보강 */
.lx-feature-wrap{ /* margin-top:110px; *//* background:#f7f8fa; *//* position:relative; *//* overflow:hidden; */}
.lx-feature-head{position:relative;z-index:1;max-width:760px;margin-bottom:42px;}
.lx-feature-badge{display:inline-flex;align-items:center;margin-bottom:18px;padding:8px 14px;border-radius:999px;background:#111;color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em;}
.lx-feature-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5, 1fr);gap:18px;}
.lx-feature-card{position:relative;padding:20px 24px;background:#fff;border:1px solid #e9e9e9;transition:.3s ease;}
.lx-feature-card:hover{transform:translateY(-8px);box-shadow:0 22px 45px rgba(0, 0, 0, .08);border-color:rgba(230, 0, 18, .28);}
.lx-feature-card strong{display:block;margin:22px 0 12px;color:#e60012;font-size:14px;font-weight:900;letter-spacing:.08em;}
.lx-feature-card h4{font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-.045em;color:#111;}
.lx-feature-card p{margin-top:10px;font-size:16px;line-height:1.65;color:#555;letter-spacing:-.035em;}
.lx-feature-icon{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:18px;background:#fff5f5;border:1px solid rgba(230, 0, 18, .14);}
.lx-feature-icon svg{width:30px;height:30px;fill:none;stroke:#e60012;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.lx-system-visual-txt{position:absolute;left:34px;right:34px;bottom:34px;z-index:2;color:#fff;}
.lx-system-visual-txt span{display:block;margin-bottom:10px;color:#e60012;font-size:12px;font-weight:900;letter-spacing:.14em;}
.lx-system-visual-txt strong{display:block;font-size:30px;font-weight:800;letter-spacing:-.05em;}
.lx-system-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;align-items:start;margin:100px 0;}
.lx-system-content{position:relative;display:block;overflow:visible;}
.lx-system-list{position:relative;z-index:5;width:100%;display:grid;grid-template-columns:1fr;gap:12px;}
.lx-system-item{position:relative;z-index:6;display:grid;grid-template-columns:64px 1fr;align-items:center;gap:18px;padding:22px 0;background:rgba(255, 255, 255, .94);border-bottom:1px solid #e8e8e8;cursor:pointer;transition:padding .28s ease, border-color .28s ease, color .28s ease;}
.lx-system-item span{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;font-size:19px;font-weight:700;color:#222;transition:.28s ease;}
.lx-system-item h4{margin:0;font-size:23px;font-weight:600;letter-spacing:-.04em;color:#111;transition:.28s ease;}
.lx-system-item:hover, .lx-system-item.active{padding-left:18px;border-color:#e60012;background:#fff;}
.lx-system-item:hover span, .lx-system-item:hover h4, .lx-system-item.active span, .lx-system-item.active h4{color:#e60012;}
.lx-system-preview{position:absolute;right:20px;aspect-ratio:2 / 1.4;top:50%;z-index:10;height:270px;overflow:hidden;opacity:1;visibility:visible;pointer-events:none;transform:translate3d(0, -50%, 0) scale(.98);transition:transform .35s cubic-bezier(.22, .61, .36, 1), opacity .25s ease;overflow:hidden;}
.lx-system-preview img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;visibility:visible;transform:scale(1.03);transition:opacity .18s ease, transform .6s ease;}
.lx-system-preview.is-changing img{opacity:.25;transform:scale(1.08);}
.lx-system-head{margin-bottom:34px;}
.lx-manage-info{display:flex;align-items:center;gap:18px;}
.lx-manage-icon{height:52px;border-radius:50%; /* background: #fff5f5; */display:flex;align-items:center;justify-content:center;color:#e60012;flex-shrink:0;}
.lx-manage-icon svg{width:24px;height:24px;stroke-width:1.8;stroke:currentColor;}
@media (max-width:1600px){
	.lx-feature-grid{grid-template-columns:repeat(3, 1fr);}
	.lx-feature-card{min-height:240px;}
}
@media (max-width:1400px){
	.lx-feature-wrap{}
	.lx-system-wrap{gap:50px;}
}
@media (max-width:1024px){
	.lx-feature-wrap{margin-top:70px;}
	.lx-feature-grid{grid-template-columns:repeat(2, 1fr);}
	.lx-system-wrap{grid-template-columns:1fr;gap:34px;margin:70px 0;}
}
@media (max-width:767px){
	.lx-feature-wrap{margin-top:0;}
	.lx-feature-head{margin-bottom:28px;}
	.lx-feature-badge{font-size:10px;padding:7px 11px;}
	.lx-feature-grid{grid-template-columns:1fr;gap:12px;}
	.lx-feature-card{min-height:auto;padding:24px 20px;}
	.lx-feature-card h4{font-size:19px;}
	.lx-feature-card p{font-size:14px;margin-top:10px;}
	.lx-feature-icon{width:50px;height:50px;border-radius:15px;}
	.lx-feature-icon svg{width:26px;height:26px;}
	.lx-system-visual-txt{left:22px;right:22px;bottom:22px;}
	.lx-system-visual-txt strong{font-size:22px;}
}
/* ========================================================= LX 제조 시스템 hover 이미지 - 반응형 정리 ========================================================= */
@media (max-width:1400px){
	.lx-system-wrap{gap:50px;}
	.lx-system-preview{}
	.lx-system-list{}
}
@media (max-width:1024px){
	.lx-system-wrap{grid-template-columns:1fr;gap:34px;margin:70px 0;}
	.lx-system-content{display:flex;flex-direction:column;}
	.lx-system-list{width:100%;order:2;}
	.lx-system-preview{}
}
@media (max-width:767px){
	.lx-system-wrap{margin:50px 0;}
	.lx-system-preview{}
	.lx-system-item{grid-template-columns:48px 1fr;padding:18px 16px;gap:12px;}
	.lx-system-item:hover, .lx-system-item.active{padding-left:16px;}
	.lx-system-item span{width:38px;height:38px;font-size:12px;}
	.lx-system-item h4{font-size:18px;}
}