@charset "utf-8";

.s-heading {margin-bottom:var(--space-60);}

.s-label {font-size:var(--font-size-16); font-weight:500; color:var(--color-secondary); line-height:1.5em; margin-bottom:var(--space-10);}

.s-tit {font-size:var(--font-size-32); font-weight:700; line-height:1.25em;}

.doc-bar {height:1px; background:#ddd; margin:0 auto; max-width:1400px;}

.service {display:flex; align-items:center; gap:var(--space-100);}
.service .image {width:41.43%}
.service .content {flex:1;}
.service .content h3 {font-size:var(--font-size-28); font-weight:600; line-height:1.4em; margin-bottom:var(--space-20);}
.service .content h3 span {color:var(--color-primary); font-weight:700;}
.service .content .sub {font-family:var(--font-urban); font-size:var(--font-size-16); color:#868686; line-height:1.em5em; letter-spacing:-.01em; margin-bottom:var(--space-55);}
.service .content .sub strong {color:#686868;}
.service .content .sub sup {font-size:0.5em;}
.service .content .txt {font-size:var(--font-size-16); color:#454545; line-height:1.8em7em; letter-spacing:-.01em;}

.about-intro {border-radius:clamp(24px, calc(48 / var(--inner) * 100vw), 48px); padding-bottom:var(--space-100); background:url("/images/sub/about-intro.jpg") center/cover no-repeat; color:#fff; overflow:hidden;}
.about-intro .contain {display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end;  height:clamp(370px, calc(950 / var(--inner) * 100vw), 950px);}
.about-intro p {font-size:var(--font-size-32); line-height:1.375em;}

.about-story {padding:var(--space-100) 0;}
.about-story .text {font-size:var(--font-size-16); color:#454545; line-height:1.8em; letter-spacing:-.01em;}
.about-story .text strong {display:block; font-size:var(--font-size-20); line-height:1.3em; font-family:var(--font-urban); color:#242424; margin-top:var(--space-30);}

.about-brand {padding-top:var(--space-100);}
.about-brand h3 {display:flex; align-items:center; gap:var(--space-10); font-size:var(--font-size-24); line-height:1.33em; margin-bottom:var(--space-40);}
.about-brand h3::before {content:''; width:16px; height:16px; background:url("/images/sub/about-check.png") no-repeat center/contain;}
.about-brand .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.about-brand .item .image {margin-bottom:var(--space-40);}
.about-brand .item .num {font-size:var(--font-size-28); font-weight:700; color:var(--color-secondary); line-height:1.29em; margin-bottom:var(--space-8);}
.about-brand .item h4 {font-size:var(--font-size-20); font-weight:600; line-height:1.4em; margin-bottom:var(--space-5);}
.about-brand .item .txt {font-size:var(--font-size-16); font-weight:700; color:#ddd; line-height:1.5em;}
.about-brand .item .desc {font-size:var(--font-size-16); color:#686868; line-height:1.75em; letter-spacing:-.01em; margin-top:var(--space-30);}

.insight-hero {border-radius:clamp(24px, calc(48 / var(--inner) * 100vw), 48px); overflow:hidden; background:url("/images/sub/insight-hero.jpg") center/cover no-repeat;}
.insight-hero .contain {display:flex; align-items:center; height:clamp(370px, calc(600 / var(--inner) * 100vw), 600px);}
.insight-hero .title {width:51%; font-size:var(--font-size-32); font-weight:700; color:#fff; line-height:1.375em; letter-spacing:-.03em;}
.insight-hero .text {display:flex; flex-direction:column; gap:var(--space-20);}
.insight-hero .txt {font-size:var(--font-size-18); font-weight:500; color:#fff; line-height:1.67em; letter-spacing:-.01em;}
.insight-hero .en {font-size:var(--font-size-16); color:rgba(255,255,255,0.6); line-height:1.875em; letter-spacing:-.01em;}

.insight-story {padding:var(--space-100) 0;}

.history {padding:var(--space-100) 0; background:url("/images/sub/history-bg.jpg") center/cover no-repeat;}
.history .s-heading {margin-bottom:var(--space-80);}
.history .s-tit {color:#fff;}
.history .items {position:relative;}
.history .items:before {content:''; position:absolute; left:clamp(130px, calc(260 / var(--inner) * 100vw), 260px); width:1px; top:.5em; bottom:3em; border:1px dashed rgba(255, 255, 255, 0.40);}
.history .item {margin-bottom:var(--space-100); display:flex; align-items:flex-start;}
.history .item:last-child {margin-bottom:0;}
.history .item h4 {display:flex; align-items:center; justify-content:space-between; width:clamp(130px, calc(260 / var(--inner) * 100vw), 260px);  font-family:var(--font-urban); font-size:var(--font-size-36); font-weight:600; color:#fff; line-height:1em;}
.history .item h4:after {z-index:10; margin-right:-15px; content:''; width:29px; height:29px; background:url("/images/sub/history-dot.png") no-repeat center/contain;}
.history .item .desc {padding-top:var(--space-5); padding-left:clamp(85px, calc(170 / var(--inner) * 100vw), 170px); flex:1;}
.history .item .desc ul {display:flex; flex-direction:column; gap:var(--space-10);}
.history .item .desc ul li {padding-left:var(--space-15); position:relative; font-size:var(--font-size-16); color:#fff; line-height:1.875em; letter-spacing:-.01em;}
.history .item .desc ul li:before {content:''; position:absolute; left:0; top:.8em; width:3px; height:3px; background:#fff; border-radius:100%;}

.our-value {padding-top:var(--space-100);}
.our-value .quote {margin-bottom:var(--space-80); text-align:center;}
.our-value .quote .icon svg {width:clamp(24px, calc(40 / var(--inner) * 100vw), 40px); height:clamp(24px, calc(40 / var(--inner) * 100vw), 40px);}
.our-value .quote p {margin:var(--space-18) 0 var(--space-25); font-size:var(--font-size-24); line-height:1.33em; letter-spacing:-.03em;}
.our-value .quote p strong {color:var(--color-primary); font-weight:600;}
.our-value .items {display:flex; justify-content:center;}
.our-value .item {display:flex; flex-direction:column; align-items:center; justify-content:center; width:clamp(200px, calc(300 / var(--inner) * 100vw), 300px); height:clamp(200px, calc(300 / var(--inner) * 100vw), 300px); border-radius:150px; flex-shrink:0; margin-right:calc(var(--space-30) * -1); padding:var(--space-30); text-align:center;}
.our-value .item:nth-child(1) {background:#74b570; z-index:1;}
.our-value .item:nth-child(2) {background:#52915a; z-index:2;}
.our-value .item:nth-child(3) {background:#2e6a41; z-index:3;}
.our-value .item:nth-child(4) {background:var(--color-primary); z-index:4; margin-right:0;}
.our-value .item .icon img {width:clamp(36px, calc(72 / var(--inner) * 100vw), 72px); height:clamp(36px, calc(72 / var(--inner) * 100vw), 72px); object-fit:contain;}
.our-value .item .tit {margin:var(--space-20) 0 var(--space-10); font-family:var(--font-urban); font-size:var(--font-size-22); font-weight:700; color:#fff; line-height:1.36em; letter-spacing:-.03em;}
.our-value .item .txt {font-size:var(--font-size-16); color:#fff; line-height:1.5em; letter-spacing:-.01em;}

.research-intro {border-radius:clamp(24px, calc(48 / var(--inner) * 100vw), 48px); overflow:hidden; position:relative; background:url("/images/sub/research-intro.png") center/cover no-repeat;}
.research-intro::before {content:''; position:absolute; inset:0; background:rgba(0,0,0,0.6);}
.research-intro .contain {position:relative; display:flex; align-items:center; justify-content:center; height:clamp(280px, calc(600 / var(--inner) * 100vw), 600px);}
.research-intro p {font-size:var(--font-size-32); font-weight:700; color:#fff; line-height:1.375em; letter-spacing:-.03em; text-align:center;}

/* 기술/연구 상단 배너: 사진 유지, 높이 축소 */
.research-intro.slim .contain { height: auto; padding: 100px 0; }
@media (max-width: 768px) {
	.research-intro.slim .contain { padding: 60px 0; }
}
.technology {padding:var(--space-100) 0;}
.technology .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.technology .item {border:1px solid #ddd; border-radius:24px; overflow:hidden;}
.technology .item .image {position:relative; height:clamp(150px, calc(300 / var(--inner) * 100vw), 300px);}
.technology .item .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.technology .item .image .text {position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px;}
.technology .item .image .num {font-size:var(--font-size-28); font-weight:700; color:var(--color-secondary); line-height:1.29em;}
.technology .item .image h4 {margin:var(--space-30) 0 var(--space-10); font-size:var(--font-size-20); font-weight:700; color:#fff; line-height:1.5em; letter-spacing:-.03em;}
.technology .item .image .en {font-size:var(--font-size-16); color:rgba(255,255,255,0.4); line-height:1.5em; letter-spacing:-.01em;}
.technology .item .desc {padding:var(--space-30); text-align:center;}
.technology .item .desc p {font-size:var(--font-size-16); color:#454545; line-height:1.75em; letter-spacing:-.01em;}

.rnd {background:#f8f8f8; padding:var(--space-100) 0;}
.rnd .items {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40);}
.rnd .item {background-color:#fff; background-position:right var(--space-40) top var(--space-40); background-repeat:no-repeat; border-radius:24px; padding:var(--space-40); background-size:clamp(30px, calc(72 / var(--inner) * 100vw), 72px) auto;}
.rnd .item1 {background-image:url("/images/sub/rnd-bg.png");}
.rnd .item2 {background-image:url("/images/sub/rnd-bg2.png");}
.rnd .item .tit {font-size:var(--font-size-20); font-weight:600; color:#242424; line-height:1.4em; margin-bottom:var(--space-5);}
.rnd .item .sub {font-size:var(--font-size-16); font-weight:700; color:#ddd; line-height:1.5em; margin-bottom:var(--space-30);}
.rnd .item .tags {display:flex; flex-wrap:wrap; gap:var(--space-20) var(--space-10);}
.rnd .item .tags span {padding:var(--space-10) var(--space-20); border-radius:50px; font-size:var(--font-size-16); font-weight:500; color:#fff; line-height:1.5em; white-space:nowrap;}
.rnd .item1 .tags span {background:#74b570;}
.rnd .item2 .tags span {background:var(--color-primary);}

.patents {padding:var(--space-100) 0;}
.patents .items {text-align:center; display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-40);}
.patents .item {min-width:0;}
.patents .item .img {margin-bottom:var(--space-25);}
.patents .item .txt {text-align:center;}
.patents .item .txt strong {margin-bottom:var(--space-5); font-size:var(--font-size-16); font-weight:600; color:#454545; line-height:1.5em; letter-spacing:-.03em;}
.patents .item .txt p {font-size:var(--font-size-14); font-weight:500; color:#686868; line-height:1.57em; letter-spacing:-.03em;}

/* 자료실 (pds 게시판 글을 분류별 문서 목록으로 표시) */
.pds-docs { max-width: 1000px; }
.pds-intro { margin-bottom: 40px; font-size: 17px; line-height: 1.6; color: #5a6560; }
.pds-group + .pds-group { margin-top: 56px; }
.pds-group { scroll-margin-top: 140px; }
.pds-docs-head { margin-bottom: 16px; }
.pds-docs-head h3 { font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: #0A2823; }
.pds-docs-head h3 span { margin-left: 6px; font-size: 16px; font-weight: 600; color: #1E8A5B; }
.pds-docs-head p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: #5a6560; }
.pds-docs-list { display: flex; flex-direction: column; gap: 12px; }
.pds-docs .doc { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid #E6E0D2; border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.pds-docs .doc:hover { border-color: #1E8A5B; box-shadow: 0 8px 20px rgba(10,40,35,.08); }
.pds-docs .doc-icon { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; width: 42px; height: 52px; padding-bottom: 8px; border-radius: 5px 14px 5px 5px; background: #E3F5EC; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #1E8A5B; }
.pds-docs .doc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pds-docs .doc-title { font-size: 18px; font-weight: 700; line-height: 1.4; color: #0A2823; }
.pds-docs .doc-meta { margin-top: 4px; font-size: 13px; color: #8a938f; }
.pds-docs .doc-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 42px; background: #1E8A5B; font-size: 14px; font-weight: 700; color: #fff; transition: background .2s; }
.pds-docs .doc:hover .doc-btn { background: #0A2823; }
.pds-empty { padding: 60px 0; text-align: center; font-size: 16px; color: #8a938f; }
@media (max-width: 768px) {
	.pds-intro { margin-bottom: 28px; font-size: 15px; }
	.pds-group + .pds-group { margin-top: 40px; }
	.pds-docs-head h3 { font-size: 20px; }
	.pds-docs-head h3 span { display: block; margin: 2px 0 0; font-size: 14px; }
	.pds-docs-head p { font-size: 14px; }
	.pds-docs .doc { gap: 14px; padding: 16px; }
	.pds-docs .doc-icon { width: 36px; height: 44px; padding-bottom: 6px; font-size: 10px; }
	.pds-docs .doc-title { font-size: 15px; }
	.pds-docs .doc-meta { font-size: 12px; }
	.pds-docs .doc-btn { width: 42px; padding: 0; justify-content: center; font-size: 0; }
	.pds-docs .doc-btn svg { width: 18px; height: 18px; }
}

.root_daum_roughmap_landing {width:100% !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc(500 / var(--inner) * 100vw), 500px) !important;}
.root_daum_roughmap .cont {display:none;}
.root_daum_roughmap .border1,
.root_daum_roughmap_landing .border3, 
.root_daum_roughmap_landing .border4 {display:none;}
.root_daum_roughmap .wrap_controllers {border:none !important;}

.directions .addr {text-align:center; margin-bottom:var(--space-40);}
.directions .addr .ico {margin-bottom:var(--space-20);}
.directions .addr .ico img {width:32px; height:32px; object-fit:contain;}
.directions .addr p {font-size:var(--font-size-20); font-weight:700; color:#242424; line-height:1.33em; letter-spacing:-.03em;}
.directions .map-area {margin-bottom:var(--space-40); border-radius:24px; overflow:hidden;}
.directions .map-area {height:clamp(250px, calc(500 / var(--inner) * 100vw), 500px);}
.directions .map-area iframe {width:100%; height:100%;}
.directions .world-map-wrap + .map-area {margin-top:var(--space-40);}
.directions .info-area {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40); margin-top:var(--space-40);}
.directions .info-area .item {display:flex; align-items:center; justify-content:center; gap:var(--space-10); border:1px solid #ddd; border-radius:24px; padding:var(--space-40);}
.directions .info-area .item .tit {display:flex; align-items:center; gap:var(--space-10); font-size:var(--font-size-16); font-weight:500; color:var(--color-primary); line-height:1.5em;}
.directions .info-area .item .tit img {width:24px; height:24px; object-fit:contain;}
.directions .info-area .item .tit::after {content:''; display:block; width:1px; height:10px; background:#ddd;}
.directions .info-area .item .txt {font-size:var(--font-size-16); color:#454545; line-height:1.5em; letter-spacing:-.02em;}

.partner-wrap { padding: 80px 0; }
.partner-list { display: flex; gap: 30px; margin-top: 40px; }
.partner-item { flex: 1; padding: 40px 30px; border: 1px solid #ddd; border-radius: 12px; }
.partner-item .p-country { font-size: 14px; color: #888; letter-spacing: 1px; }
.partner-item h4 { margin-top: 6px; font-size: 26px; font-weight: 700; }
.partner-item .p-desc { margin-top: 20px; line-height: 1.7; color: #555; }
@media (max-width: 768px) {
	.partner-wrap { padding: 50px 0; }
	.partner-list { flex-direction: column; }
}
.partner-lead { padding: 40px 0 20px; }
.partner-lead p {
	display: block;
	padding: 28px 40px;
	border-radius: 12px;
	background: #1f5a3a;
	color: #fff;
	font-size: 22px;
	line-height: 1.6;
}
@media (max-width: 768px) {
	.partner-lead p { font-size: 17px; padding: 20px 24px; }
}

/* 세계 거점 지도 */
/* 세계 거점 지도 (밝은 톤) */
.world-map-wrap { margin: 40px 0; border-radius: 28px; overflow: hidden; border: 1px solid #E3EEE7; background: linear-gradient(180deg, #F7FBFF 0%, #EEF6F8 100%); }
.wm-stage { position: relative; }
.wm-stage svg { display: block; width: 100%; height: auto; }
.wm-land path { fill: #DCEFE4; stroke: #fff; stroke-width: .8; stroke-linejoin: round; }
.wm-land path.is-base { fill: #9FDCBC; }
.wm-land path.is-hq { fill: #FFB896; }
.wm-arc { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .1 6; animation: wmFlow 1.8s linear infinite; transition: opacity .25s, stroke-width .25s; }
.wm-arc.on { stroke-width: 3; }
.wm-trav { fill: #FF6B35; transition: opacity .25s; }
.wm-pt { cursor: pointer; transition: opacity .25s; }
.wm-core { fill: #27A06C; stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.wm-core.hq { fill: #FF6B35; }
.wm-pt.on .wm-core { transform: scale(1.4); }
.wm-pulse { fill: rgba(39, 160, 108, .12); stroke: #27A06C; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: wmPulse 2.4s ease-out infinite; }
.wm-hit { fill: transparent; }
.wm-lab rect { fill: #fff; stroke: #DDF4E8; stroke-width: 1; filter: drop-shadow(0 3px 6px rgba(18, 51, 43, .12)); transition: fill .2s, stroke .2s; }
.wm-lab text { fill: #12332B; font-size: 13px; font-weight: 700; }
.wm-pt.on .wm-lab rect { fill: #27A06C; stroke: #27A06C; }
.wm-pt.on .wm-lab text { fill: #fff; }
.wm-pt.is-hq .wm-lab rect { fill: #FF6B35; stroke: #FF6B35; }
.wm-pt.is-hq .wm-lab text { fill: #fff; }
.wm-pt.is-hq .wm-pulse { fill: rgba(255, 107, 53, .14); stroke: #FF6B35; }
.has-active .wm-arc:not(.on) { opacity: .15; }
.has-active .wm-trav:not(.on) { opacity: 0; }
.has-active .wm-pt:not(.on) { opacity: .4; }
.wm-tip { position: absolute; z-index: 5; min-width: 150px; padding: 12px 16px; border-radius: 14px; background: #fff; color: #12332B; box-shadow: 0 10px 28px rgba(18, 51, 43, .16); pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 20px)); transition: opacity .2s; }
.wm-tip.below { transform: translate(-50%, 24px); }
.wm-tip.show { opacity: 1; }
.wm-tip .t { font-size: 11px; font-weight: 800; letter-spacing: .8px; color: #FF6B35; }
.wm-tip .n { margin-top: 4px; font-size: 16px; font-weight: 800; }
.wm-tip .s { margin-top: 2px; font-size: 13px; color: #5B6B65; }
@keyframes wmFlow { to { stroke-dashoffset: -6.1; } }
@keyframes wmPulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@media (max-width: 768px) { .wm-lab { display: none; } .wm-tip { min-width: 120px; padding: 10px 12px; } .world-map-wrap { border-radius: 18px; } .wm-core { transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .wm-arc, .wm-pulse { animation: none; } .wm-trav { display: none; } }

/* 카드 연동 효과 */
.loc-item[data-key] { cursor: pointer; transition: box-shadow .2s, transform .2s, border-color .2s; }
.loc-item[data-key]:hover, .loc-item.is-on { border-color: #27A06C; box-shadow: 0 10px 24px rgba(39, 160, 108, .14); transform: translateY(-2px); }
.loc-tag { cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.loc-tag:hover, .loc-tag.is-on { color: #1E8A5B; border-bottom-color: #C9F36A; }
/* 사업장 주소 카드 */
.loc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.loc-item { padding: 26px 30px; border: 1px solid #E3E8E3; border-radius: 20px; background: #fff; text-align: left; }
.loc-item.main { grid-column: 1 / -1; border: 0; background: linear-gradient(160deg, #3DB884 0%, #27A06C 100%); }
.loc-label { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #FF6B35; }
.loc-name { margin-top: 8px; font-size: 22px; font-weight: 800; line-height: 1.4; color: #12332B; }
/* 해외 법인 카드 (국가 코드 + 국가명 + 도시) */
.loc-item.ent { padding: 24px 26px; }
.ent-top { display: flex; align-items: center; gap: 10px; }
.ent-code { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #DDF4E8; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #1E8A5B; }
.loc-item.ent .loc-label { letter-spacing: .04em; }
.loc-item.ent .loc-name { margin-top: 16px; font-size: 24px; }
.loc-item.ent .loc-sub { margin-top: 2px; font-size: 15px; }
.loc-item.ent.is-on .ent-code, .loc-item.ent:hover .ent-code { background: #27A06C; color: #fff; }
.loc-sub { margin-top: 6px; font-size: 16px; line-height: 1.6; color: #5B6B65; }
.loc-item.main .loc-label { color: #E9FFC2; }
.loc-item.main .loc-name { color: #fff; }
.loc-item.main .loc-sub { color: rgba(255,255,255,.9); }
@media (max-width: 768px) {
	.loc-list { grid-template-columns: 1fr; margin-top: 24px; }
	.loc-name { font-size: 19px; }
}


/* 메인 최근실적: 카드 6개를 감싸는 초록 박스 */
#container .main-record .content { background: none; }
#container .main-record .content .contain {
	background: var(--color-primary);
	border-radius: 40px;
	padding: 60px 40px;
}
@media (max-width: 768px) {
	#container .main-record .content .contain { border-radius: 24px; padding: 30px 16px; }
}

/* 회사소개 상단 사진: 높이 약 1/3 축소 (PC에서만) */
@media (min-width: 769px) {
	.about-intro.slim .contain { height: clamp(247px, calc(633 / var(--inner) * 100vw), 633px); }
}


/* 브랜드 스토리 요약형 */
.about-story .story-lead { margin-bottom: var(--space-60); font-size: var(--font-size-32); font-weight: 700; line-height: 1.45em; letter-spacing: -.03em; color: #242424; }
.about-story .story-lead strong { color: var(--color-primary); }
.about-story .story-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40); margin-bottom: var(--space-60); }
.about-story .point { padding-top: var(--space-30); border-top: 2px solid var(--color-primary); }
.about-story .point h4 { margin-bottom: var(--space-15); font-size: var(--font-size-20); font-weight: 700; line-height: 1.4em; color: #242424; }
.about-story .point p { font-size: var(--font-size-16); line-height: 1.75em; letter-spacing: -.01em; color: #555; }
@media (max-width: 768px) {
	.about-story .story-points { grid-template-columns: 1fr; gap: var(--space-30); }
}

/* 인사이트 상단: 영어 문장 가독성 */
.insight-hero .en { color: rgba(255, 255, 255, 0.95); font-weight: 500; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.insight-hero .txt { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.insight-hero { position: relative; }
.insight-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.insight-hero .contain { position: relative; }

/* 인사이트 연혁: 배경 사진에 어두운 막 */
.history {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("/images/sub/history-bg.jpg");
}

/* 기술/연구 핵심기술 카드 */
.technology .item { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transition: transform .25s, box-shadow .1s; }
.technology .item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .16); }

/* 사진 위 어두운 막 */
.technology .item .image::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .1)); }

/* 숫자: 초록 원 배지 */
.technology .item .image .num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-secondary); color: #0b3d27; font-size: 22px; }

/* 제목, 영어 문장 */
.technology .item .image h4 { font-size: 22px; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.technology .item .image .en { color: rgba(255, 255, 255, .92); font-weight: 500; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

/* 아래 본문 */
.technology .item .desc p { color: #2b2b2b; font-size: 17px; line-height: 1.8em; }

@media (max-width: 768px) {
	.technology .item .image h4 { font-size: 18px; }
	.technology .item .image .num { width: 42px; height: 42px; font-size: 18px; }
	.technology .item .desc p { font-size: 15px; }
}

/* B2G 페이지 */
.service.b2g .content .sub { font-size: 17px; line-height: 1.7em; color: #5f6b66; }
.service.b2g .content .sub strong { color: var(--color-primary); }
.service.b2g .content .txt { margin-bottom: 28px; font-size: 18px; line-height: 1.8em; color: #2b2b2b; }
.svc-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; list-style: none; padding: 0; }
.svc-points li { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px solid #e3e8e5; border-radius: 14px; background: #fff; font-size: 16px; font-weight: 600; line-height: 1.5em; color: #242424; }
.svc-points .n { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); font-size: 14px; font-weight: 700; color: #fff; }
.svc-note { margin-bottom: 28px; font-size: 16px; line-height: 1.7em; color: #555; }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; border-radius: 16px; background: var(--color-primary); }
.svc-cta p { font-size: 18px; font-weight: 600; line-height: 1.5em; color: #fff; }
.svc-btn { flex-shrink: 0; padding: 14px 26px; border-radius: 50px; background: #fff; font-size: 16px; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
@media (max-width: 768px) {
	.service.b2g .content .txt { font-size: 16px; }
	.svc-points { grid-template-columns: 1fr; }
	.svc-cta { flex-direction: column; align-items: flex-start; }
}

/* 메인 개편 1단계: 핵심 수치 + TFNF 강점 */
.main-numbers { padding: 56px 0; background: var(--color-primary); }
.main-numbers .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.main-numbers .item { padding: 8px 12px; border-left: 1px solid rgba(255, 255, 255, .18); }
.main-numbers .item:first-child { border-left: 0; }
.main-numbers .num { font-size: 48px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.main-numbers .num small { margin-left: 4px; font-size: 22px; font-weight: 700; color: var(--color-secondary); }
.main-numbers .lbl { margin-top: 10px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .82); }

/* WHY 섹션 여백 줄이기 */
.main-strength { padding: 50px 0 40px; }
.main-strength .m-heading { padding: 0; }
.main-strength .items { margin-top: 36px; }
.main-strength .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.main-strength .item { padding: 36px 32px; border: 1px solid #e3e8e5; border-top: 4px solid var(--color-primary); border-radius: 16px; background: #fff; transition: transform .25s, box-shadow .25s; }
.main-strength .item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .1); }
.main-strength .n { font-size: 18px; font-weight: 800; color: var(--color-secondary); }
.main-strength h3 { margin: 12px 0 14px; font-size: 24px; font-weight: 700; line-height: 1.35; color: #222; }
.main-strength .item p:not(.n) { font-size: 17px; line-height: 1.75; color: #555; }
.main-strength .more { margin-top: 36px; text-align: right; }
.main-strength .more a { font-size: 16px; font-weight: 700; color: var(--color-primary); }

@media (max-width: 768px) {
	.main-numbers { padding: 36px 0; }
	.main-numbers .items { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
	.main-numbers .item { border-left: 0; }
	.main-numbers .num { font-size: 32px; }
	.main-numbers .num small { font-size: 16px; }
	.main-numbers .lbl { font-size: 14px; }
	.main-strength { padding: 60px 0; }
	.main-strength .items { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
	.main-strength h3 { font-size: 20px; }
	.main-strength .item p:not(.n) { font-size: 15px; }
}

/* 메인 히어로 개편 */
.main-visual .item.image::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .38) 48%, rgba(0, 0, 0, .12) 100%); }

.main-visual .caption .btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; transition: 1.2s; transform: translate(50px, 0); opacity: 0; }
.main-visual .active .caption .btns { opacity: 1; transform: translate(0, 0); transition-delay: .8s; }
.hero-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; height: 56px; padding: 0 30px; border: 2px solid #fff; border-radius: 50px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #fff; transition: background .2s, color .2s, border-color .2s; }
.hero-btn.primary { background: var(--color-secondary); border-color: var(--color-secondary); color: #0b3d27; }
.hero-btn:hover { background: #fff; border-color: #fff; color: var(--color-primary); }

.main-visual .slick-dots { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 20; display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.main-visual .slick-dots li { margin: 0; padding: 0; }
.main-visual .slick-dots li button { display: block; width: 44px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .35); font-size: 0; line-height: 0; cursor: pointer; transition: background .2s; }
.main-visual .slick-dots li.slick-active button { background: #fff; }

/* 메인 히어로: PC에서 높이 축소 */
@media (min-width: 769px) {
	.main-visual,
	.main-visual .item { height: clamp(520px, 70vh, 760px); }
}

/* ===== 제품 페이지 (시안 적용) ===== */
/* 배경: 크림색 (상단은 다른 페이지와 같은 밝은 테마) */
body:has(.product-list, .product-summary),
body:has(.product-list, .product-summary) #wrapper { background: #f5f5e7; }


/* 목록: 4열 카드 */
#container .product-list ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
#container .product-list li { float: none; width: auto; margin: 0; padding: 0; }
#container .product-list li.none { grid-column: 1 / -1; padding: 80px 0; text-align: center; color: #888; }
#container .product-list li a { display: block; height: 100%; overflow: hidden; border: 1px solid #E6E0D2; border-radius: 24px; background: #fff; transition: transform .25s, box-shadow .25s; }
#container .product-list li a:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10, 40, 35, .12); }
#container .product-list .thumb { position: relative !important; aspect-ratio: 1 / 1 !important; height: auto !important; padding: 0 !important; overflow: hidden !important; background: #CDEFE0 !important; }
#container .product-list .thumb img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; transform: none !important; object-fit: cover !important; mix-blend-mode: normal !important; transition: transform .35s; }
#container .product-list li a:hover .thumb img { transform: scale(1.05) !important; }
#container .product-list .tit { padding: 20px 22px 6px; font-size: 19px; font-weight: 800; line-height: 1.4; text-align: left; color: #0A2823; }
#container .product-list .more { display: block; padding: 0 22px 22px; font-size: 14px; font-weight: 700; text-align: left; color: #0A2823; }

/* 상세: 큰 카드 */
#container .product-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 40px; border: 1px solid #E6E0D2; border-radius: 32px; background: #fff; }
#container .product-summary .product-image,
#container .product-summary .product-info { float: none; width: auto; margin: 0; }
#container .product-image .img { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, #E3F5EC, #A9DEC4); }
#container .product-image .img img { position: absolute; top: 0; left: 0; display: block; width: 100% !important; height: 100% !important; max-width: none; max-height: none; transform: none; object-fit: cover; }
#container .product-info { display: flex; flex-direction: column; justify-content: flex-start; }
#container .product-info .tit { margin: 0 0 14px; font-size: 38px; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; color: #0A2823; }
#container .product-info .txt { margin-bottom: 24px; font-size: 17px; line-height: 1.8; color: #5a6560; }
#container .product-info .desc ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #E6E0D2; }
#container .product-info .desc li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0 !important; background: none !important; border-bottom: 1px solid #E6E0D2; font-size: 16px; line-height: 1.6; }
#container .product-info .desc li::before,
#container .product-info .desc li::after { display: none !important; content: none !important; }
#container .product-info .desc li .k { flex-shrink: 0; color: #777; }
#container .product-info .desc li .v { text-align: right; font-weight: 700; color: #0A2823; }
#container .product-info .pd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 32px; }

/* 버튼: 주황(기본) + 윤곽선 */
.pd-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 54px; padding: 0 30px; border: 2px solid #0A2823; border-radius: 50px; background: transparent; font-size: 16px; font-weight: 700; color: #0A2823; transition: background .2s, color .2s; }
.pd-btn:hover { background: #0A2823; color: #fff; }
.pd-btn.primary { background: #FF6B35; border-color: #FF6B35; color: #fff; }
.pd-btn.primary:hover { background: #E85A25; border-color: #E85A25; color: #fff; }
.pd-bottom { margin-top: 56px; text-align: center; }

/* 상세 내용 블록 */
#container .product-detail { margin-top: 32px; padding: 36px 40px; border: 1px solid #E6E0D2; border-radius: 24px; background: #fff; overflow-x: auto; }
#container .product-detail .tit { margin: 0 0 20px; padding-left: 14px; border-left: 5px solid #1E8A5B; font-size: 24px; font-weight: 800; line-height: 1.3; color: #0A2823; }
#container .product-detail table { width: 100% !important; max-width: 100%; }
#container .product-detail img { max-width: 100%; height: auto; }

@media (max-width: 1100px) {
	#container .product-list ul { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	#container .product-list ul { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	#container .product-summary { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
	#container .product-info .tit { font-size: 28px; }
	#container .product-info .desc li { flex-direction: column; gap: 4px; }
	#container .product-info .desc li .v { text-align: left; }
	#container .product-detail { padding: 24px 20px; }
}
@media (max-width: 560px) {
	#container .product-list ul { grid-template-columns: 1fr; }
}

/* 제품 목록: 칩, 검색, 분류 글씨 */
.pd-filter { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.pd-filter .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-filter .chip { height: 42px; padding: 0 20px; border: 1px solid #E6E0D2; border-radius: 50px; background: #fff; font-size: 15px; font-weight: 700; color: #0A2823; cursor: pointer; transition: background .2s, color .2s; }
.pd-filter .chip:hover { border-color: #0A2823; }
.pd-filter .chip.on { background: #0A2823; border-color: #0A2823; color: #fff; }
.pd-search { width: 260px; max-width: 100%; height: 44px; padding: 0 18px; border: 1px solid #E6E0D2; border-radius: 14px; background: #fff; font-size: 15px; }
.pd-search:focus { outline: 0; border-color: #1E8A5B; }
#container .product-list .kind { padding: 18px 22px 0; font-size: 13px; font-weight: 700; text-align: left; color: #FF6B35; }
#container .product-list .kind + .tit { padding-top: 4px; }
@media (max-width: 560px) { .pd-search { width: 100%; } }

/* 제품 상세: 비어 있는 칸 숨기기 */
#container .product-info .txt:empty { display: none; }
#container .product-info .desc:not(:has(li)) { display: none; }
#container .product-info .pd-actions { margin-top: 28px; padding-top: 0; }
#container .product-info:has(.desc li) .pd-actions { margin-top: auto; padding-top: 32px; }
/* 제품 상세 본문(제품개요 등): 가운데 정렬 */
#container .product-detail > *:not(.tit) { text-align: center; }
#container .product-detail p,
#container .product-detail div { text-align: center; }
#container .product-detail img { display: block; margin-left: auto !important; margin-right: auto !important; max-width: 100%; height: auto; float: none !important; }
#container .product-detail table { margin-left: auto; margin-right: auto; }
#container .product-detail ul,
#container .product-detail ol { display: inline-block; text-align: left; }

/* 메인 모바일 전용: 첫 화면 하단 에어 파우치 사용설명서 카드 (PC에서는 숨김) */
.qr-guide { display: none; }
@media (max-width: 768px) {
	/* 관리자 팝업: 모바일 화면에서는 숨김 (팝업 설정의 PC/모바일 구분과 별개로 화면 폭 기준) */
	.admin-popup { display: none !important; }

	/* 카드 자리를 비우도록 문구를 위쪽으로 */
	.main-visual .caption { top: 150px; transform: none; }
	.main-visual .caption .txt-1 { margin-bottom: 14px; }
	.main-visual .caption .btns { margin-top: 24px; }

	/* 오른쪽 아래 '샘플 신청' 버튼과 겹치지 않게 위로 띄움 */
	.qr-guide { display: block; position: absolute; left: 16px; right: 16px; bottom: 84px; z-index: 30; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); color: #0A2823; }
	.qr-guide .qg-tit { font-size: 17px; font-weight: 800; line-height: 1.3; }
	.qr-guide .qg-sub { margin-top: 2px; font-size: 13px; line-height: 1.4; color: #5a6560; }
	.qr-guide .qg-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
	.qr-guide .qg-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1.5px solid #E6E0D2; border-radius: 14px; background: #fff; }
	.qr-guide .qg-item:active { border-color: #1E8A5B; background: #F1F8F4; }
	.qr-guide .qg-item img { position: static !important; flex-shrink: 0; width: 52px !important; height: 52px !important; min-height: 0 !important; transform: none !important; border-radius: 10px; object-fit: cover; }
	.qr-guide .qg-txt { display: flex; flex-direction: column; min-width: 0; }
	.qr-guide .qg-name { font-size: 15px; font-weight: 800; line-height: 1.3; }
	.qr-guide .qg-go { margin-top: 2px; font-size: 12px; font-weight: 700; color: #FF6B35; }
	.qr-guide .qg-all { display: block; margin-top: 10px; padding: 6px 0 2px; text-align: center; font-size: 13px; font-weight: 700; color: #1E8A5B; }

	/* 한국어 메인 카드: 한/영 전환 */
	.qr-guide[data-lang="ko"] .qg-en,
	.qr-guide[data-lang="en"] .qg-ko { display: none; }
	.qr-guide .qg-lang { position: absolute; top: 14px; right: 14px; height: 30px; padding: 0 12px; border: 1.5px solid #0A2823; border-radius: 30px; background: #fff; font-size: 12px; font-weight: 700; color: #0A2823; cursor: pointer; }
	.qr-guide .qg-lang:active { background: #0A2823; color: #fff; }
}

/* 상세페이지 긴 이미지(여러 장으로 나눈 것): 이음새 없이 이어 붙이기 */
#container .product-detail .detail-img { max-width: 1000px; margin: 0 auto; }
#container .product-detail .detail-img img { width: 100%; margin: 0 auto !important; }

/* 제품 이미지 없을 때 */
#container .product-list .thumb .noimg,
#container .product-image .img .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #1E8A5B; }
#container .product-image .img { position: relative; }

/* ===== 파우치 사용법 (QR 안내 페이지) ===== */
.guide { max-width: 860px; margin: 0 auto; padding-top: 70px; }
/* 가이드 상세: 아래 guide-head 제목과 겹치는 페이지 제목은 숨김 */
#contArea:has(.guide) .sub-title { display: none; }
.guide-head { margin-bottom: 28px; text-align: center; }
.guide-head .kind { margin-bottom: 8px; font-size: 15px; font-weight: 700; color: #FF6B35; }
.guide-head h3 { font-size: 34px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; color: #0A2823; }
.guide-head .txt { margin-top: 12px; font-size: 17px; line-height: 1.7; color: #5a6560; }
/* 사용방법 안내 그림: 가이드 상단 메인 이미지, 누르면 크게 보기 */
.guide-sheet { position: relative; display: block; overflow: hidden; border: 1px solid #E6E0D2; border-radius: 24px; background: #fff; }
.guide-sheet img { display: block; width: 100%; height: auto; }
.guide-sheet .zoom { display: block; padding: 10px 12px; border-top: 1px solid #E6E0D2; background: #F1F8F4; font-size: 13px; font-weight: 700; text-align: center; color: #1E8A5B; }
.guide-sheet .zoom::before { content: '⤢ '; }
.guide-sheet + .guide-media { margin-top: 24px; }
.guide-media { position: relative; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, #E3F5EC, #A9DEC4); }
.guide-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; }
.guide-media .placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; font-size: 16px; font-weight: 700; color: #1E8A5B; }
#container .guide-box { margin-top: 24px; padding: 32px 36px; border: 1px solid #E6E0D2; border-radius: 24px; background: #fff; }
#container .guide-box .tit { margin: 0 0 18px; padding-left: 14px; border-left: 5px solid #1E8A5B; font-size: 22px; font-weight: 800; line-height: 1.3; color: #0A2823; }
#container .guide-steps,
#container .guide-notes { margin: 0; padding: 0; list-style: none; }
#container .guide-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid #E6E0D2; }
#container .guide-steps li:last-child { border-bottom: 0; }
#container .guide-steps .n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #1E8A5B; font-size: 15px; font-weight: 800; color: #fff; }
#container .guide-steps p { padding-top: 4px; font-size: 17px; line-height: 1.6; color: #0A2823; }
#container .guide-notes li { position: relative; padding: 6px 0 6px 16px; font-size: 16px; line-height: 1.6; color: #5a6560; }
#container .guide-notes li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: #FF6B35; }
.guide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.guide-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.guide-list .item { display: block; overflow: hidden; border: 1px solid #E6E0D2; border-radius: 24px; background: #fff; transition: transform .2s, box-shadow .2s; }
.guide-list .item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(10,40,35,.12); }
.guide-list .img { aspect-ratio: 4 / 3; background: #E3F5EC; }
.guide-list .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-list .txt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 26px; }
.guide-list .tit { font-size: 20px; font-weight: 800; color: #0A2823; }
.guide-list .more { flex-shrink: 0; font-size: 15px; font-weight: 700; color: #FF6B35; }
@media (max-width: 768px) {
	.guide-list { grid-template-columns: 1fr; gap: 16px; }
	.guide-list .item { border-radius: 16px; }
	.guide-list .txt { padding: 18px 20px; }
	.guide-list .tit { font-size: 18px; }
	/* 모바일 가이드: 그림이 첫 화면 가운데에 오도록 위쪽 제목을 줄임 */
	.guide { padding-top: 28px; }
	.guide-head { margin-bottom: 16px; }
	.guide-head .kind { margin-bottom: 4px; font-size: 13px; }
	.guide-head h3 { font-size: 21px; }
	.guide-head .txt { display: none; }
	.guide-sheet { border-radius: 16px; }
	.guide-media { border-radius: 16px; }
	#container .guide-box { padding: 22px 20px; border-radius: 16px; }
	#container .guide-box .tit { font-size: 19px; }
	#container .guide-steps p { font-size: 15px; }
	.guide-actions { flex-direction: column; }
	.guide-actions .pd-btn { width: 100%; }
}

/* 문의 구분(카테고리) 선택 버튼 */
.cate-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cate-chip { position: relative; display: block; margin: 0; cursor: pointer; }
.cate-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cate-chip span { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 12px; border: 1.5px solid #DDE7E1; border-radius: 14px; background: #fff; font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; color: #2B3A34; transition: border-color .15s, background .15s, color .15s; }
.cate-chip:hover span { border-color: #1E8A5B; }
.cate-chip input:checked + span { border-color: #1E8A5B; background: #EAF7F0; color: #0F5A3C; box-shadow: inset 0 0 0 1px #1E8A5B; }
.cate-chip input:checked + span::before { content: '✓'; margin-right: 6px; font-weight: 800; color: #1E8A5B; }
.cate-chip input:focus-visible + span { outline: 3px solid #C2F05A; outline-offset: 2px; }
@media (max-width: 768px) {
	.cate-chips { grid-template-columns: 1fr 1fr; gap: 8px; }
	.cate-chip span { min-height: 46px; font-size: 14px; }
}

/* 제품 상세: 다른 제품으로 바로 이동 (위쪽 제품 탭, 아래쪽 다른 제품 카드) */
.pd-others { margin-top: 80px; }
.pd-others .tit { margin-bottom: 20px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: #0A2823; }
#container .pd-others ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pd-others li a { display: block; overflow: hidden; border: 1px solid #E3E8E3; border-radius: 22px; background: #fff; transition: transform .2s, box-shadow .2s; }
.pd-others li a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(18,51,43,.1); }
.pd-others .thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #CDEFE0; }
.pd-others .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-others .thumb .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #1E8A5B; }
.pd-others .kind { margin: 18px 22px 0; font-size: 13px; font-weight: 700; color: #1E8A5B; }
.pd-others .name { margin: 4px 22px 0; font-size: 19px; font-weight: 800; color: #0A2823; }
.pd-others .more { display: block; margin: 10px 22px 20px; font-size: 14px; font-weight: 700; color: #FF6B35; }
@media (max-width: 768px) {
	.pd-others { margin-top: 50px; }
	.pd-others .tit { font-size: 21px; }
	#container .pd-others ul { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
	.pd-others li { flex: 0 0 62%; scroll-snap-align: start; }
	.pd-others .name { font-size: 16px; }
}
/* 가이드 상세: 제품 상세와 같은 이동 탭·카드 */
.guide .guide-others { margin-top: 70px; }
@media (max-width: 768px) {
	.guide .guide-others { margin-top: 50px; }
}
#contArea:has(.pd-switch) .sub-title { display: none; }

/* 메뉴 안 페이지 이동 탭 (서비스·회사정보·고객지원): 번호 + 이름 + 한 줄 설명 카드. 예전 경로 막대 대신 */
.sec-tabs { position: relative; z-index: 5; width: calc(100% - 60px); max-width: 1400px; margin: -44px auto 0; }
.sec-tabs-in { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.sec-tabs-in a { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 22px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(18,51,43,.08); transition: transform .2s, box-shadow .2s; }
.sec-tabs-in a:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18,51,43,.12); }
.sec-tabs-in .n { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #FF6B35; }
.sec-tabs-in b { font-size: 18px; font-weight: 800; color: #0A2823; white-space: nowrap; }
.sec-tabs-in small { overflow: hidden; font-size: 13px; color: #6b7873; white-space: nowrap; text-overflow: ellipsis; }
.sec-tabs-in a.on { background: #1E8A5B; }
.sec-tabs-in a.on .n { color: #C9F36A; }
.sec-tabs-in a.on b { color: #fff; }
.sec-tabs-in a.on small { color: rgba(255,255,255,.78); }
@media (max-width: 768px) {
	.sec-tabs { width: auto; margin: -26px 0 0; }
	.sec-tabs-in { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
	.sec-tabs-in::-webkit-scrollbar { display: none; }
	.sec-tabs-in a { flex: 0 0 auto; min-width: 128px; gap: 3px; padding: 12px 16px; border-radius: 14px; scroll-snap-align: start; }
	.sec-tabs-in .n { font-size: 10px; }
	.sec-tabs-in b { font-size: 15px; }
	.sec-tabs-in small { font-size: 12px; }
}
/* 사업장 모바일: 해외 법인은 2칸 작은 카드(국가 코드 + 이름 + 도시), 여백 줄임 */
@media (max-width: 768px) {
	.loc-list { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
	.loc-item.main { padding: 20px 22px; border-radius: 18px; }
	.loc-item.main .loc-name { margin-top: 6px; font-size: 19px; }
	.loc-item.main .loc-sub { font-size: 14px; }
	.loc-item.ent { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; align-content: center; padding: 14px 12px; border-radius: 16px; }
	.loc-item.ent .ent-top { grid-row: 1 / 3; }
	.loc-item.ent .ent-top .loc-label { display: none; }
	.loc-item.ent .ent-code { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
	.loc-item.ent .loc-name { margin-top: 0; font-size: 16px; line-height: 1.3; }
	.loc-item.ent .loc-sub { margin-top: 2px; font-size: 12px; line-height: 1.4; word-break: keep-all; }
	.loc-item[data-key]:hover, .loc-item.is-on { transform: none; }
	.world-map-wrap { margin: 20px 0; }
	#container .directions .world-map-wrap + .map-area { margin-top: 20px; }
	#container .directions .map-area { height: 240px; margin-bottom: 0; border-radius: 18px; }
	#container .directions .info-area { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
	#container .directions .info-area .item { flex-direction: column; gap: 4px; padding: 16px 10px; border-color: #E3E8E3; border-radius: 16px; }
	#container .directions .info-area .item .tit::after { display: none; }
	#container .directions .info-area .item .txt { font-size: 14px; }
}

/* 제품·가이드 상세 이동 탭: 사진 + 종류 + 이름 카드, 배너 아래쪽에 걸침 (서비스·회사정보 탭과 같은 모양) */
.pd-switch { position: relative; z-index: 5; display: flex; gap: 10px; margin: -44px 0 40px; }
.pd-switch .pd-sw-all { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 26px; border-radius: 18px; background: #0A2823; box-shadow: 0 10px 30px rgba(18,51,43,.12); font-size: 22px; font-weight: 800; color: #C9F36A; }
.pd-switch .pd-sw-all span { font-size: 14px; font-weight: 700; color: #fff; }
.pd-switch .pd-sw-list { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; min-width: 0; }
.pd-switch .pd-sw { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px 12px 12px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(18,51,43,.08); transition: transform .2s, box-shadow .2s; }
.pd-switch .pd-sw:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18,51,43,.12); }
.pd-switch .pd-sw img { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.pd-switch .pd-sw .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-switch .pd-sw small { font-size: 12px; font-weight: 700; color: #FF6B35; }
.pd-switch .pd-sw b { overflow: hidden; font-size: 16px; font-weight: 800; color: #0A2823; white-space: nowrap; text-overflow: ellipsis; }
.pd-switch .pd-sw.on { background: #1E8A5B; }
.pd-switch .pd-sw.on small { color: #C9F36A; }
.pd-switch .pd-sw.on b { color: #fff; }
/* 가이드는 본문 폭(860px)보다 넓게 배너 폭에 맞춤 */
.guide:has(.guide-switch) { padding-top: 0; }
.guide .guide-switch { width: calc(100vw - 60px); max-width: 1400px; margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 768px) {
	.pd-switch { gap: 8px; margin: -26px -16px 24px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
	.pd-switch::-webkit-scrollbar { display: none; }
	.pd-switch .pd-sw-all { padding: 0 16px; border-radius: 14px; font-size: 18px; }
	.pd-switch .pd-sw-all span { display: none; }
	.pd-switch .pd-sw-list { display: flex; gap: 8px; overflow: visible; }
	.pd-switch .pd-sw { flex: 0 0 auto; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; }
	.pd-switch .pd-sw img { width: 40px; height: 40px; border-radius: 10px; }
	.pd-switch .pd-sw small { font-size: 11px; }
	.pd-switch .pd-sw b { font-size: 14px; }
	.guide .guide-switch { width: auto; margin-left: -16px; transform: none; }
}
/* 사용 설명서 상세는 사진 카드 탭이 있으므로 고객지원 탭은 숨김 */
body:has(.pd-switch) .sec-tabs { display: none; }
.partner-item .p-link { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 700; color: #1E8A5B; }
.partner-item .p-link:hover { text-decoration: underline; }
/* 글로벌 네트워크 지도 모바일: 작게 줄이지 않고 크게 보여주며 옆으로 밀어서 봄, 나라 이름 표시 */
.wm-hint { display: none; }
@media (max-width: 768px) {
	.world-map-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.world-map-wrap::-webkit-scrollbar { display: none; }
	.wm-stage { width: 860px; }
	.wm-lab { display: inline; }
	.wm-lab text { font-size: 15px; }
	.wm-core { transform: none; }
	.wm-hint { display: block; margin-top: -10px; margin-bottom: 10px; font-size: 13px; font-weight: 600; text-align: center; color: #7a8a84; }
}
/* 인사이트 핵심 가치: 작은 영문 라벨 + 한국어 제목 */
.our-value .item .lbl { margin-top: var(--space-20); font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #FF6B35; }
.our-value .item .lbl + .tit { margin-top: 6px; }
.our-value .item:nth-child(4) .lbl { color: #C9F36A; }
.insight-hero .text .lead { margin: 0; font-size: var(--font-size-18); font-weight: 700; line-height: 1.6; color: #1E8A5B; }
#patents { scroll-margin-top: 110px; }
/* 회사소개 브랜드 가치 모바일: 왼쪽 작은 사진 + 오른쪽 글 (메인과 같은 모양) */
@media (max-width: 768px) {
	.about-brand { padding-top: 44px; }
	.about-brand h3 { margin-bottom: 16px; font-size: 20px; }
	#container .about-brand .items { gap: 10px; }
	#container .about-brand .item { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; padding: 12px; border: 1px solid #E3E8E3; border-radius: 16px; background: #fff; }
	#container .about-brand .item .image { grid-row: 1 / 3; margin: 0; overflow: hidden; border-radius: 12px; }
	#container .about-brand .item .image img { display: block; width: 100%; height: 100%; min-height: 110px; object-fit: cover; }
	#container .about-brand .item .num { margin-bottom: 2px; font-size: 14px; }
	#container .about-brand .item h4 { margin-bottom: 0; font-size: 16px; line-height: 1.35; }
	#container .about-brand .item .txt { font-size: 11.5px; color: #9AA8A2; }
	#container .about-brand .item .desc { margin-top: 6px; font-size: 13px; line-height: 1.55; }
	#container .about-brand .item .desc br { display: none; }
}

/* 모바일 페이지 길이 줄이기: 인사이트·기술/연구 (2026-10-20) */
@media (max-width: 768px) {
	#container .insight-story, #container .history, #container .technology, #container .rnd, #container .patents { padding: 44px 0 !important; }
	#container .our-value { padding-top: 44px; padding-bottom: 44px; }
	#container .s-heading { margin-bottom: 18px !important; }

	/* 인사이트: 브랜드 스토리 카드 - 아이콘 왼쪽 + 글 오른쪽 */
	#container .story-cards { gap: 8px !important; }
	#container .story-cards .sc { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; padding: 16px 16px 18px; border-radius: 16px; }
	#container .story-cards .ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; }
	#container .story-cards .ic svg { width: 22px; height: 22px; }
	#container .story-cards h4 { margin-top: 2px; font-size: 17px; }
	#container .story-cards p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; }

	/* 인사이트: 연혁 촘촘하게 */
	#container .history .item { margin-bottom: 14px; }
	#container .history .item h4 { font-size: 20px; }
	#container .history .item .desc ul { padding: 12px 16px; border-radius: 14px; }
	#container .history .item .desc ul li { font-size: 13.5px; line-height: 1.6; }

	/* 기술/연구: 핵심기술 카드 사진 낮게 */
	#container .technology .items { gap: 10px !important; }
	#container .technology .item { border-radius: 16px; }
	#container .technology .item .image img { height: 110px !important; }
	#container .technology .item .image .text { padding: 14px 16px 0; }
	#container .technology .item .image .num { width: 32px; height: 32px; font-size: 14px; }
	#container .technology .item .image h4 { margin: 10px 0 2px; font-size: 16px; }
	#container .technology .item .image .en { font-size: 12.5px; }
	#container .technology .item .desc { padding: 8px 16px 16px; }
	#container .technology .item .desc p { font-size: 13.5px; line-height: 1.65; }

	/* 기술/연구: R&D 카드 */
	#container .rnd .items { gap: 10px; }
	#container .rnd .item { padding: 20px; border-radius: 16px; }
	#container .rnd .item .tags { gap: 6px; }
	#container .rnd .item .tags span { padding: 6px 12px; font-size: 13px; }

	/* 기술/연구: 특허 카드 사진 윗부분만 낮게 (누르면 전체 보기) */
	#container .patents .item .img { padding: 12px 12px 0; }
	#container .patents .item .img img { height: 150px; object-fit: cover; object-position: top; }
	#container .patents .item .txt { padding: 10px 12px 14px; }
}

/* 모바일 제품 목록·자료실 촘촘하게 */
@media (max-width: 768px) {
	#container .product-list ul { grid-template-columns: 1fr 1fr; gap: 10px; }
	#container .product-list li a { border-radius: 16px; }
	#container .product-list .kind { padding: 12px 12px 0; font-size: 11px; }
	#container .product-list .tit { padding: 4px 12px 4px; font-size: 14.5px; line-height: 1.35; }
	#container .product-list .more { padding: 0 12px 12px; font-size: 12px; }
	.pd-filter { gap: 10px; margin-bottom: 16px; }
	.pd-filter .chips { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.pd-filter .chips::-webkit-scrollbar { display: none; }
	.pd-filter .chip { flex-shrink: 0; height: 36px; padding: 0 14px; font-size: 13px; }
	.pd-filter .pd-search { height: 40px; }
}
/* 모바일 사용 설명서 목록 2칸 */
@media (max-width: 768px) {
	#container .guide-list { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
	#container .guide-list .item { border-radius: 16px; }
	#container .guide-list .item .img { aspect-ratio: 1 / 1; }
	#container .guide-list .item .txt { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px 12px; }
	#container .guide-list .item .tit { font-size: 14px; }
	#container .guide-list .item .more { font-size: 12px; }
	#container .guide-head { margin-bottom: 16px; }
	#container .guide-head h3 { font-size: 20px; }
}
/* 서비스 페이지 사진: PC에서만 보이고 모바일에서는 숨김 */
@media (max-width: 768px) { #container .service .image { display: none; } }