/* include 공통 CSS */

/************************* 공통 시작*************************/
.inner {width: 100%; max-width:1560px; margin: 0 auto;}
.inner-1244 {width:100%; max-width:1244px; margin:0 auto;}
.inner-1200 {width:100%; max-width:1200px; margin:0 auto;}
.inner-1440 {width:100%; max-width:1440px; margin:0 auto;}
.inner--fill {max-width:none; padding-right: calc((100% - 1560px) / 2); padding-left: calc((100% - 1560px) / 2);}
.inner--fill-head {max-width:none; padding-right: calc((100% - 1696px) / 2); padding-left: calc((100% - 1754px) / 2);}
.inner--fill-left {max-width:none; padding-left: calc((100% - 1560px) / 2); padding-right: 0;}
@media(max-width:1600px){.inner {padding: 0 4%;} .inner--fill-left {padding-left: 4%;}}
@media(max-width:1480px){.inner-1440 {padding:0 4%;}}
@media(max-width:1284px){.inner-1244 {padding:0 4%;}}
@media(max-width:1240px){.inner-1200 {padding:0 4%;}}

.sub-container {min-height:5rem;}
/************************* 공통 끝 *************************/

/************************* header_inc 시작*************************/
.header__fix {position: fixed; left:0; top:0; z-index: 100; width:100%; height: 6em; font-size: var(--fz); background-color: transparent; --menu-height : 0; transition: 0.15s ease-in-out all;}
.header__fix:after {position: absolute; content:''; top: 100%; left: 0; z-index: -1; width: 100%; height: var(--menu-height); background-color: #fff; transition: 0.15s ease-in-out all;}
.header__inner {display: flex; justify-content: space-between; align-items: center; height: inherit;}
.header__ctrl {display: flex; align-items: center; gap: 2.5em; height: inherit;}

.header-home__logo {width: 10em; transition: 0.15s ease-in-out all;}
.header-home__logo--light {display: block;}
.header-home__logo--dark {display: none;}

.header-navi {position: relative; height: inherit; transition: .15s ease-in-out all;}
.header-navi__m-list {display: flex; height: inherit;}
.header-navi__m-item {height: inherit; padding-right: 8em;}
.header-navi__m-item:last-child {padding-right: 0;}
.header-navi__m-btn {display: flex; align-items: center; height: inherit; white-space: nowrap;}
.header-navi__m-btn,
.header-navi__m-btn:link,
.header-navi__m-btn:visited {color: #fff;}
.header-navi__m-item {position: relative;}
.header-navi__s-wrap {position: absolute; top: 100%; left: 50%; min-width: 100%; transform:translateX(-50%);}
.header-navi__s-list {transition: .15s ease-in-out all;}
.header-navi__s-btn {display: block;}
@media(max-width:1320px){
	.header-navi__m-item {padding-right: 5.5em;}
}
@media(max-width:1080px){
	.header-navi {display: none;}
}

.header-lang {display: flex; align-items: center; gap: 1em; height: inherit; transition: .15s ease-in-out all;}
.header-lang__link {display: inline-block; font-size: 1.125em; font-weight: 500; transition: 0.15s ease-in-out all;}
.header-lang__link,
.header-lang__link:link,
.header-lang__link:visited {color: rgba(255,255,255,0.6);}
.header-lang__link--crt {position: relative;}
.header-lang__link--crt,
.header-lang__link--crt:link,
.header-lang__link--crt:visited {color: #fff;}
.header-lang__link--crt::after {content:''; display: block; width:100%; height:1px; background: #fff; position: absolute; left:0; bottom:-0.3334em;}
@media(hover:hover){
	.header-lang__link:hover {color: #fff;}
}

.header-login {margin-left: 1.5em;}
.header-login--hidden {display: none;}
.header-login__list {display: flex; align-items: center;}
.header-login__item {margin-right: 1em;}
.header-login__item:last-child {margin-right: 0;}
.header-login__link {display: block; transition:.15s ease-in-out all;}
.header-login__link,
.header-login__link:visited,
.header-login__link:link {color: #fff;}
@media(hover:hover){
	.header-login__link:hover {color: var(--main-color);}
}
@media(max-width:1080px){
	.header-login{display: none;}
}

.header-drawer {display: block; position: relative;}
.header-drawer__btn {position: relative; width: 1.625em; height: 1.1875em; z-index: 0; transition:.15s ease-in-out all;}
.header-drawer__line {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; transition:.15s ease-in-out all;}
.header-drawer__line--top {top: 0; width:50%;}
.header-drawer__line--middle {top: 50%; transform:translateY(-50%)}
.header-drawer__line--bottom {bottom: 0; width:50%; left:auto; right:0;}
@media(hover:hover){
	.header-drawer__btn:hover .header-drawer__line--top{width:100%;}
	.header-drawer__btn:hover .header-drawer__line--middle{}
	.header-drawer__btn:hover .header-drawer__line--bottom{width:100%;}
}


.header__fix.enter {background-color: var(--navy); box-shadow: 0 1px 4px rgba(0,0,0,0.08);}
.header__fix.enter .header-home__logo--light {display: block;}
.header__fix.enter .header-home__logo--dark {display: none;}
.header__fix.enter .header-navi__m-btn,
.header__fix.enter .header-navi__m-btn:link,
.header__fix.enter .header-navi__m-btn:visited {color: #fff;}
.header__fix.enter .header-navi__m-btn--crt {color: #fff;}
/* .header__fix.enter .header-navi__s-list {background-color: var(--navy);} */
.header__fix.enter .header-navi__s-btn {color: var(--gray02);;}
.header__fix.enter .header-navi__s-btn--crt {color: var(--navy);}
.header__fix.enter .header-navi__c-btn {color: var(--gray02);}
.header__fix.enter .header-navi__c-btn--crt {color: var(--navy);}
.header__fix.enter .header-lang__link,
.header__fix.enter .header-lang__link:link,
.header__fix.enter .header-lang__link:visited {color: rgba(255,255,255,0.6);}
.header__fix.enter .header-lang__link--crt,
.header__fix.enter .header-lang__link--crt:link,
.header__fix.enter .header-lang__link--crt:visited {color: #fff; border-color: #fff;}
.header__fix.enter .header-lang__divider {color: rgba(255,255,255,0.4);}
.header__fix.enter .header-login__link {color: #fff;}
.header__fix.enter .header-drawer__line {background-color: #fff;}
@media(hover:hover){
	.header__fix.enter .header-lang__link:hover {color: #fff;}
}

/* 서브페이지 기본 상태 (스크롤 0, 호버 X) — 어두운 텍스트 + 어두운 로고 */
body.is-sub .header__fix:not(.enter) .header-navi__m-btn,
body.is-sub .header__fix:not(.enter) .header-navi__m-btn:link,
body.is-sub .header__fix:not(.enter) .header-navi__m-btn:visited {color: var(--main-black);}
body.is-sub .header__fix:not(.enter) .header-navi__m-btn--crt {color: var(--main-color);}
body.is-sub .header__fix:not(.enter) .header-lang__link,
body.is-sub .header__fix:not(.enter) .header-lang__link:link,
body.is-sub .header__fix:not(.enter) .header-lang__link:visited {color: var(--gray02);}
body.is-sub .header__fix:not(.enter) .header-lang__link--crt,
body.is-sub .header__fix:not(.enter) .header-lang__link--crt:link,
body.is-sub .header__fix:not(.enter) .header-lang__link--crt:visited {color: var(--main-black); border-color: var(--main-black);}
body.is-sub .header__fix:not(.enter) .header-lang__divider {color: var(--gray03);}
body.is-sub .header__fix:not(.enter) .header-login__link {color: var(--main-black);}
body.is-sub .header__fix:not(.enter) .header-drawer__line {background-color: var(--main-black);}
body.is-sub .header__fix:not(.enter) .header-home__logo--light {display: none;}
body.is-sub .header__fix:not(.enter) .header-home__logo--dark {display: block;}
@media(hover:hover){
	body.is-sub .header__fix:not(.enter) .header-lang__link:hover {color: var(--main-black);}
}

/************************* header_inc 끝*************************/

/************************* sub-dropdown 시작 *************************/
.drop-menu {border-bottom:1px solid var(--main-gray);}
.drop-menu__inner {display: flex; border-right:1px solid var(--main-gray); border-left:1px solid var(--main-gray);}
.drop-menu__home {display: inline-flex; min-width: 3em; min-height: 3em; height: inherit; justify-content: center; align-items: center;}
.drop-menu__icon {width: 1.75em;}
.drop-menu__wrap {position: relative; z-index: 0; border-left:1px solid var(--main-gray);}
.drop-menu__wrap:last-child {border-right:1px solid var(--main-gray); }
.drop-menu__btn {display: flex; justify-content: space-between; align-items: center; min-width:15em; height: 100%; padding:0 0.15rem; font-weight: 500; transition:.15s ease-in-out all;}
.drop-menu__tit {display: block; font-size: 1.125em;}
.drop-menu__arr {margin-left: 1.5em; width: 0.75em; transition:.15s ease-in-out all;}
.drop-menu__navi {position: absolute; top: 100%; left: -1px; z-index: 10; width:calc(100% + 2px);  height: 0; overflow: hidden;}
.drop-menu__list {background-color: #fff; border:1px solid var(--main-gray);}
.drop-menu__link {display: block; padding:0.5em 0.15rem; transition:.15s ease-in-out all;}
@media(hover:hover){
	.drop-menu__link:hover {background-color: var(--main-color); color: #fff;}
}

.drop-menu__btn.on {background-color: var(--main-color); color: #fff;}
.drop-menu__btn.on .drop-menu__arr {filter:brightness(0) invert(1); transform:rotate(180deg);}

/************************* dropdown 끝 *************************/
/************************* tabmenu 시작 *************************/
.tab-menu {border-bottom:1px solid var(--main-gray)}
.tab-menu__list {display: flex;}
.tab-menu__item {flex:1;}
.tab-menu__btn {padding:1.5em 0.75em; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; transition: .15s ease-in-out all;}
.tab-menu__btn--crt {background-color: var(--main-color);}
.tab-menu__btn--crt,
.tab-menu__btn--crt:link,
.tab-menu__btn--crt:visited {color: #fff;}
@media(hover:hover){
	.tab-menu__btn:hover {background-color: var(--main-color); color: #fff;}
}
/************************* sub-tabmenu 끝 *************************/

/************************* depth3 시작 *************************/
/* Figma 1273:3278 — content_tab.php fmenu 출력(핵심기술 31_1~31_4 4탭). wrapper bottom border 없음, 텍스트만 + 활성 navy + 활성 underline 1px. 17px Pretendard 600, gap 52px(3.25em), 탭 padding-bottom 20px(1.25em). 활성=`__btn--crt`(navy #002F7B≈--main-color #00377b), 비활성=#A3A3A3≈--gray05. 출력 페이지: 31_1~31_4 only (그외 페이지 fmenu sub 미등록=출력 0) */
.depth3 {width:100%;}
.depth3__list {display:flex; flex-flow:row wrap; gap:3.25em; align-items:flex-start;}
.depth3__item {flex:0 0 auto;}
.depth3__btn, .depth3__btn:link, .depth3__btn:visited {display:inline-block; padding:0 0 0.8764em; font-size:1.0625em; font-weight:600; line-height:1.4; color:var(--gray05); border-bottom:5px solid transparent; transition:.15s ease all; white-space:nowrap;}
.depth3__btn--crt, .depth3__btn--crt:link, .depth3__btn--crt:visited {color:var(--main-color); border-bottom-color:var(--main-color);}
@media(hover:hover){
	.depth3__btn:hover {color:var(--main-color);}
}
/************************* depth3 끝 *************************/


/************************* footer_inc 시작 *************************/
.footer {padding: 3.9375em 0 0; font-size: var(--fz); background-color: var(--main-black); color: #fff;}
.footer__top {padding-bottom: 4.875em; border-bottom:1px solid rgba(255,255,255,0.12)}
.footer__top-wrap {display: flex;}
.footer-home {display: inline-block; flex-shrink: 0;}
.footer-home__logo {width: 10.0625em;}
.footer-addr {padding-left:9.6875em; padding-right: 5.3125em;}
.footer-addr__title {font-size: 1em; font-weight: 600; line-height: 1.4; margin-bottom: 1.2125em; color: #fff;}
.footer-addr__list {display: flex; flex-direction: column; gap: 0.5em;}
.footer-addr__item {display: flex; gap: 1em; font-size: 1em; line-height: 1.4;}
.footer-addr__label {flex-shrink: 0; min-width: 5em; color: #fff; font-weight: 600; opacity: 0.8;}
.footer-addr__text {color: #fff; font-weight: 400; opacity: 0.6;}
.footer-contact {flex-shrink: 0;}
.footer-contact__group {margin-bottom: 1.875em;}
.footer-contact__group:last-child {margin-bottom: 0;}
.footer-contact__title {font-size: 1em; font-weight: 600; line-height: 1.4; margin-bottom: 0.9375em; color: #fff;}
.footer-contact__text {display: inline-block; font-size: 1em; font-weight: 400; line-height: 1.4; opacity: 0.6;}
.footer-contact__text,
.footer-contact__text:link,
.footer-contact__text:visited {color: #fff;}
@media(hover:hover){
	.footer-contact__text:hover {opacity: 1;}
}
.footer__line {margin: 3.125em 0 0; border: 0; border-top: 1px solid rgba(255,255,255,0.15);}
.footer__bottom {padding: 2.375em 0 3.125em;}
.footer__bottom-wrap {display: flex; justify-content: space-between; align-items: center;}
.footer-copy {font-size: 1em; font-weight: 500; line-height: 1.4; color: var(--gray04); opacity: 0.6;}
.footer-bottom-right {display: flex; align-items: center; gap: 5.125em;}
.footer-navi {display: flex; gap: 2.125em;}
.footer-navi__link {font-size: 1em; font-weight: 400; line-height: 1.4; transition:.15s ease all;}
.footer-navi__link,
.footer-navi__link:visited,
.footer-navi__link:link {color: #fff;}
@media(hover:hover){
	.footer-navi__link:hover {opacity: 0.7;}
}
.footer-sns {display: flex; align-items: center; gap: 0.9375em;}
.footer-sns__link {display: inline-flex; justify-content: center; align-items: center; transition:.15s ease all;}
.footer-sns__icon {height: 1.125em; width: auto; display: block;}
@media(hover:hover){
	.footer-sns__link:hover {opacity: 0.7;}
}
/* footer 반응형 (재작성 — 1280/1080/768 표준) */
@media(max-width:1280px){
	.footer {padding: 3em 0 0;}
	.footer__top {padding-bottom: 3.5em;}
	.footer-home__logo {width: 8.5em;}
	.footer-addr {padding-left: 5em; padding-right: 3em;}
	.footer-bottom-right {gap: 3em;}
	.footer-navi {gap: 1.5em;}
	.footer__bottom {padding: 2em 0 2.5em;}
}
@media(max-width:1080px){
	.footer {padding: 2.5em 0 0;}
	.footer__top {padding-bottom: 2.5em;}
	.footer__top-wrap {flex-direction: column; gap: 2em;}
	.footer-home__logo {width: 7.5em;}
	.footer-addr {padding-left: 0; padding-right: 0;}
	.footer-addr__list {gap: 0.625em;}
	.footer-contact {display: flex; gap: 2.5em;}
	.footer-contact__group {margin-bottom: 0;}
	.footer__bottom {padding: 1.75em 0 2.25em;}
	.footer__bottom-wrap {flex-direction: column; align-items: flex-start; gap: 1em;}
	.footer-bottom-right {gap: 2em; flex-wrap: wrap;}
}
@media(max-width:768px){
	.footer {padding: 2em 0 0; font-size: 0.875em;}
	.footer__top {padding-bottom: 2em;}
	.footer__top-wrap {gap: 1.5em;}
	.footer-home__logo {width: 7em;}
	.footer-addr__title {margin-bottom: 0.875em;}
	.footer-addr__list {gap: 0.5em;}
	.footer-addr__item {flex-direction: column; gap: 0.125em;}
	.footer-addr__label {min-width: auto;}
	.footer-contact {flex-direction: column; gap: 1.25em;}
	.footer-contact__title {margin-bottom: 0.5em;}
	.footer__bottom {padding: 1.5em 0 2em;}
	.footer__bottom-wrap {gap: 0.875em;}
	.footer-bottom-right {gap: 1.25em;}
	.footer-navi {gap: 1em;}
	.footer-sns {gap: 0.75em;}
	.footer-sns__icon {height: 1em;}
}
/************************* footer_inc 끝 *************************/


/************************* split-text *************************/
.split-text__word {font-size: inherit;}
.split-text__letter {display: inline-block; font-size: inherit;}
.split-text--no-delay .split-text__letter {transition-delay:0s !important; animation-delay:0s !important;}

/************************* 서브페이지 공통 시작 *************************/
.sp-navi {position:relative; width:100%; height:25em; padding-top:6em; padding-bottom:3.75em; font-size:var(--fz); display:flex; align-items:flex-end;}
.sp-navi__breadcrumb {display:flex; align-items:center; gap:0.75em; margin-bottom:1.3em;}
.sp-navi__breadcrumb-home {width:1.25em; height:1.25em;}
.sp-navi__breadcrumb-dot {width:0.25em; height:0.25em;}
.sp-navi__breadcrumb-text {font-size:1em; font-weight:600; color:var(--gray06);}
.sp-navi__title {font-size:2.5em; font-weight:600; color:var(--main-black);}

.sp-hero {position:relative; width:100%; height:37.5em; overflow:hidden; font-size:var(--fz);}
.sp-hero__bg {width:100%; height:100%; object-fit:cover;}
.sp-hero__content {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.sp-hero__sub {font-size:1.125em; font-weight:500; color:#fff; margin-bottom:1.5em; text-transform:lowercase;}
.sp-hero__title {font-size:4em; font-weight:600; color:#fff; text-align:center; line-height:1.4;}

@media (max-width:768px){
	.sp-hero {height:30em;}
	.sp-hero__title {font-size: 2.5em;}
}

/************************* 서브페이지 공통 끝 *************************/


/* ============================================
   공통 컴포넌트 (페이지 간 재사용)
   ============================================ */

/* --- catalog-banner — 카탈로그 배너 2-카드 (20, 21, 22, 23, 24 사용) --- */
/* Figma 1273:3187 / 1273:4429 / 1273:4670 / 1273:4908 / 1273:5183 — 문의하기 + 제품 카탈로그 2카드, 770×240, aspect 1/0.3117, 네이비 오버레이 배경 이미지. 섹션 padding은 페이지별 상이하여 각 페이지 <style>에서 로컬 오버라이드 */
.catalog-banner {background:#fff; padding:6.25em 0;}
.catalog-banner__layout {display:flex; gap:1.25em;}
.catalog-banner__item {flex:1; min-width:0; aspect-ratio:1 / 0.3117; border-radius:1.25em; overflow:hidden; position:relative; display:block; text-decoration:none;}
.catalog-banner__bg {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block;}
.catalog-banner__body {position:relative; padding:3.625em; display:flex; flex-direction:column; gap:0.75em; height:100%; box-sizing:border-box;}
.catalog-banner__title {font-size:2.25em; font-weight:600; color:#fff; line-height:1.4; margin:0;}
.catalog-banner__desc {font-size:1.125em; font-weight:500; color:#fff; line-height:1.7; margin:0;}
/* catalog-banner 반응형 (재작성 4/4 — 1280/1080/768 표준) */
@media(max-width:1280px){
	.catalog-banner {padding:5em 0;}
	.catalog-banner__body {padding:2.5em;}
}
@media(max-width:1080px){
	.catalog-banner {padding:4em 0;}
	.catalog-banner__layout {flex-direction:column;}
	.catalog-banner__body {padding:2em;}
}
@media(max-width:768px){
	.catalog-banner {padding:3em 0;}
	.catalog-banner__body {padding:1.5em;}
}

/* --- pdet-hero — 제품 개요 섹션 (21, 22, 23, 24 사용) --- */
/* 좌 visual(메인 swiper 770×600 aspect 1/0.7792 + 썸네일 swiper 178×178 × N) + 우 body(badge/title/ol/아이콘 4개 row). 21/24는 title line-height:1.6; margin-top:0.625em (2줄), 22/23은 line-height:1.4; margin-top:0.4em (1줄) — 기본은 1.4로 두고 2줄 페이지만 로컬 오버라이드 */
.pdet-hero {padding:0 0 6.25em; background:#fff;}
.pdet-hero__layout {display:flex; gap:4.125em; align-items:flex-start;}
.pdet-hero__visual {flex-shrink:0; width:49.359%; display:flex; flex-direction:column; gap:1.25em;}
.pdet-hero__slider-main {width:100%; aspect-ratio:1 / 0.7792; border-radius:1.25em; overflow:hidden; background:var(--bg02);}
.pdet-hero__slider-main .swiper-slide {display:flex; align-items:center; justify-content:center; background:var(--bg02);}
.pdet-hero__slider-main .swiper-slide img {width:100%; height:100%; object-fit:contain; display:block;}
.pdet-hero__slider-thumbs {width:100%;}
.pdet-hero__slider-thumbs .swiper-slide {width:11.125em; height:11.125em; border-radius:1em; overflow:hidden; background:var(--bg02); display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid transparent; transition:border-color 0.2s ease; box-sizing:border-box;}
.pdet-hero__slider-thumbs .swiper-slide img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;}
.pdet-hero__slider-thumbs .swiper-slide-thumb-active {border-color:var(--navy);}
@media(hover:hover){.pdet-hero__slider-thumbs .swiper-slide:hover {border-color:var(--navy);}}
.pdet-hero__body {flex:1; min-width:0; display:flex; flex-direction:column;}
.pdet-hero__badge {align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; padding:0.25em 0.625em; background:var(--navy); color:#fff; font-size:1em; font-weight:600; line-height:1.4; border-radius:3.75em; white-space:nowrap;}
.pdet-hero__title {font-size:2.5em; font-weight:600; color:var(--main-black); line-height:1.6; margin:0.425em 0 0;}
.pdet-hero__desc {list-style:decimal; padding-left:1.275em; margin:6.5em 0 0; color:var(--gray07); font-size:1.25em; font-weight:500; line-height:1.7;}
.pdet-hero__desc li {margin:0; list-style: block;}
.pdet-hero__icons {display:flex; justify-content:center; align-items:flex-start; gap:1.25em; margin-top:2.5em; width:100%;}
.pdet-hero__icon-item {flex:1; display:flex; flex-direction:column; align-items:center; gap:1em; text-align:center;}
.pdet-hero__icon-img {width:4.625em; height:4.625em; display:flex; align-items:center; justify-content:center;}
.pdet-hero__icon-img img {max-width:100%; max-height:100%; width:auto; height:auto; display:block;}
.pdet-hero__icon-text {font-size:1em; font-weight:500; color:var(--gray07); line-height:1.4; margin:0; white-space:nowrap;}
.pdet-hero__icon-sep {flex-shrink:0; width:1px; height:6.25em; background:var(--gray08); align-self:center;}

/* --- pdet-feature — 주요 특징 좌우 레이아웃 (21, 22, 23, 24 사용) --- */
/* Figma: 상단 2px line (inner 1560폭) + 좌측 head(474px, "주요 특징") + 우측 grid(1086px, 531×280 카드). 21/22/23은 2x2(4개), 24는 1행 2열(2개). 이미지는 순수 사진(사용자 수동 업로드), caption은 HTML <p>로 카드 하단 중앙 오버레이(Figma 24px #fff Medium, bottom~40px). CSS overlay는 추가 금지(이중 오버레이 방지) — 필요 시 이미지 쪽에서 포함 */
.pdet-feature {padding:5em 0 6.25em; background:#fff;}
.pdet-feature__layout {display:flex; align-items:flex-start; padding-top:2.5em; border-top:2px solid var(--main-black);}
.pdet-feature__head {flex-shrink:0; width:29.625em;}
.pdet-feature__title {font-size:2em; font-weight:600; color:var(--main-black); line-height:1.4; margin:0;}
.pdet-feature__grid {flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:1.25em 1.5em; margin-top:2.8125em;}
.pdet-feature__card {position:relative; aspect-ratio:1 / 0.5273; border-radius:1.25em; overflow:hidden;}
.pdet-feature__card img {width:100%; height:100%; object-fit:cover; display:block;}
.pdet-feature__card-caption {position:absolute; left:50%; bottom:2em; transform:translateX(-50%); width:90%; margin:0; color:#fff; font-size:1.5em; font-weight:500; line-height:1.7; text-align:center; pointer-events:none;}

/* --- pdet-spec — 제품 사양 좌우 레이아웃 (21, 22, 23, 24 사용) --- */
/* Figma: 상단 2px line (inner 1560폭) + 좌측 head(474px, "제품 사양") + 우측 content(1086px, 테이블). 3열 테이블(No/Items/Spec) 기본은 21/22/23, 24는 6열 구조 로컬. header bg navy + gray06, rows white */
.pdet-spec {padding:0 0 6.25em; background:#fff;}
.pdet-spec__layout {display:flex; align-items:flex-start; padding-top:2.5em; border-top:2px solid var(--main-black);}
.pdet-spec__head {flex-shrink:0; width:29.625em;}
.pdet-spec__title {font-size:2em; font-weight:600; color:var(--main-black); line-height:1.4; margin:0;}
.pdet-spec__content {flex:1; min-width:0; margin-top:2.8125em;}
.pdet-spec__table-wrap {display:block;}
.pdet-spec__table-wrap + .pdet-spec__table-wrap {margin-top:2.5em;}
.pdet-spec__table {width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;}
.pdet-spec__table col.pdet-spec__col-no {width:3.125em;}
.pdet-spec__table col.pdet-spec__col-item {width:20em;}
.pdet-spec__table th {padding:0.525em; background:var(--navy); color:#fff; font-size:1.25em; font-weight:600; line-height:1.4; text-align:center;}
.pdet-spec__table th.pdet-spec__th--spec {background:var(--gray06);}
.pdet-spec__table th.pdet-spec__th--items {border-right:1px solid #fff;}
.pdet-spec__table tbody td {padding:0.425em 0.625em; background:#fff; color:var(--gray07); font-size:1.125em; font-weight:500; line-height:1.7; text-align:center; border-bottom:1px solid var(--gray06);}
.pdet-spec__table tbody td.pdet-spec__td--item {border-left:1px solid var(--gray-mid); border-right:1px solid var(--gray-mid);}
.pdet-spec__table tbody td.pdet-spec__td--new {border-left:1px solid var(--gray-mid);}
.pdet-spec__table tbody tr:last-child td {border-bottom:1px solid var(--gray06);}

/* pdet-spec__table--grouped — 1톤 화물차 전용 복합 rowspan/colspan 테이블 (22, 23 공통, Figma 22:1273:4746 / 23:1273:5013) */
/* 3열 구조: group 200px(12.5em) + sub 372px(23.25em) + val 516px(32.25em) = 1086. 상단 Items(colspan=2 navy) + 용량(kWh)(gray06). 행 그룹: Output 5행(group bg --gray08 근사 Figma #e5e5e5) / Off-Grid 3행(group bg #fff) / Input 2행(group bg --gray08) / 단일 colspan=2 4행(item 셀 zebra #fff/--gray08 교차). sub/val zebra alt = --bg02 #fafafa 수동 is-alt 클래스 */
.pdet-spec__table--grouped col.pdet-spec__col-group {width:12.5em;}
.pdet-spec__table--grouped col.pdet-spec__col-sub {width:23.25em;}
.pdet-spec__table--grouped col.pdet-spec__col-val {width:32.25em;}
.pdet-spec__table--grouped th.pdet-spec__th--capacity {background:var(--gray06);}
.pdet-spec__table--grouped tbody td {border-bottom:1px solid var(--gray-mid);}
.pdet-spec__table--grouped tbody tr:last-child td {border-bottom:1px solid var(--gray06);}
.pdet-spec__table--grouped tbody td.pdet-spec__td--group {background:var(--gray09); border-right:1px solid var(--gray-mid);}
.pdet-spec__table--grouped tbody td.pdet-spec__td--group.is-white {background:#fff;}
.pdet-spec__table--grouped tbody td.pdet-spec__td--sub {background:#fff; border-right:1px solid var(--gray-mid);}
.pdet-spec__table--grouped tbody td.pdet-spec__td--sub.is-alt {background:var(--bg02);}
.pdet-spec__table--grouped tbody td.pdet-spec__td--val {background:#fff;}
.pdet-spec__table--grouped tbody td.pdet-spec__td--val.is-alt {background:var(--bg02);}
.pdet-spec__table--grouped tbody td.pdet-spec__td--bg {background:var(--bg02);}
.pdet-spec__table--grouped tbody td.pdet-spec__td--bg.is-alt {background:var(--gray09);}
.pdet-spec__table--grouped tbody td.pdet-spec__td--item-full {background:#fff; border-right:1px solid var(--gray-mid);}
.pdet-spec__table--grouped tbody td.pdet-spec__td--item-full.is-alt {background:var(--gray09);}
.pdet-spec__subtitle {font-size:2em; font-weight:600; color:var(--main-black); line-height:1.4; margin:3.125em 0 0.9em;}

/* --- pdet-applications — 활용 분야 좌우 레이아웃 공통 wrapper (21, 22, 23, 24 사용) --- */
/* Figma: 상단 2px line (inner 1560폭) + 좌측 head(474px, "활용 분야") + 우측 content(1086px, 페이지별 상이한 콘텐츠). 내부 구조(desc+grid / 탭+panes / 단일 이미지+라벨)는 페이지 로컬 유지 */
.pdet-applications {padding:0 0 6.25em; background:#fff;}
.pdet-applications__layout {display:flex; align-items:flex-start; padding-top:2.5em; border-top:2px solid var(--main-black);}
.pdet-applications__head {flex-shrink:0; width:29.625em;}
.pdet-applications__title {font-size:2em; font-weight:600; color:var(--main-black); line-height:1.4; margin:0;}
.pdet-applications__content {flex:1; min-width:0;}

/* --- pdet-faq — 아코디언 4개 (21, 22, 23, 24 사용) --- */
/* bg #fafafa / 헤더(FAQ 라벨 navy + "자주 묻는 질문") / 아코디언 리스트 + CSS +/- 토글 + JS max-height. Figma 스펙: 질문 32px SemiBold ls-0.015625em LH1.4, 답변 20px Medium ls-0.025em LH1.7 black, 질문행 padding 1.5em, border --gray08 #d4d4d4, 답변 bg --bg02 padding 1.5em 2.5em, A 배지 2.75em(44px) navy 원 + 배지/본문 gap 1.25em */
.pdet-faq {padding:7.5em 0; background:var(--bg02);}
.pdet-faq__head {display:flex; flex-direction:column; gap:0.75em; margin-bottom:2.5em;}
.pdet-faq__label {font-size:1.5em; font-weight:600; color:var(--navy); line-height:1.4; margin:0;}
.pdet-faq__title {font-size:3.5em; font-weight:600; color:var(--main-black); line-height:1.4; margin:0;}
.pdet-faq__list {display:flex; flex-direction:column; list-style:none; padding:0; margin:0;}
.pdet-faq__btn {display:flex; align-items:center; justify-content:space-between; width:100%; padding:1.5em; background:none; border:0; text-align:left; cursor:pointer; border-bottom:1px solid var(--gray08);}
.pdet-faq__q {flex:1; font-size:2em; font-weight:600; color:var(--main-black); line-height:1.4; margin:0;}
.pdet-faq__toggle {flex-shrink:0; width:2.75em; height:2.75em; margin-left:1.25em; background:url('img/ico_pdet_faq_toggle.svg') center/contain no-repeat; transform:rotate(45deg); filter:opacity(0.348); transition:transform 0.25s ease, filter 0.25s ease;}
.pdet-faq__item.is-open .pdet-faq__toggle {transform:rotate(0); filter:none;}
.pdet-faq__answer {max-height:0; overflow:hidden; transition:max-height 0.3s ease; background:var(--bg02);}
.pdet-faq__answer-row {display:flex; align-items:center; gap:1.25em; padding:2.5em 1.5em;}
.pdet-faq__answer-badge {flex-shrink:0; width:2.2em; height:2.2em; border-radius:50%; background:var(--navy); color:#fff; font-size:1.25em; font-weight:500; line-height:2.2em; text-align:center;}
.pdet-faq__answer-inner {flex:1; min-width:0; margin:0; font-size:1.25em; font-weight:500; color:var(--main-black); line-height:1.7;}
.pdet-faq__answer-inner p {margin:0;}

/* --- pdet-* 반응형 (21, 22, 23, 24 공통) — 2026-04-29 전역 반응형 재작업 2/4 --- */
@media(max-width:1280px){
	.pdet-hero {padding:5em 0;}
	.pdet-hero__layout {gap:2.5em;}
	.pdet-hero__desc {margin:5em 0 0;}
	.pdet-hero__icons {flex-wrap:wrap; gap:1.25em 0.5em; margin-top:2em;}
	.pdet-hero__icon-sep {display:none;}
	.pdet-hero__slider-thumbs .swiper-slide {width:9em; height:9em;}
	.pdet-feature {padding:4em 0 5em;}
	.pdet-feature__head {width:25%;}
	.pdet-feature__grid {gap:1em 1.25em; margin-top:2.5em;}
	.pdet-feature__card-caption {bottom:2em;}
	.pdet-spec {padding:0 0 5em;}
	.pdet-spec__head {width:25%;}
	.pdet-spec__content {margin-top:2.5em;}
	.pdet-spec__subtitle {margin:2.5em 0 0.75em;}
	.pdet-spec__table-wrap {overflow-x:auto;}
	.pdet-spec__table--grouped {min-width:42em;}
	.pdet-spec__table--grouped col.pdet-spec__col-group {width:8em;}
	.pdet-spec__table--grouped col.pdet-spec__col-sub {width:14em;}
	.pdet-spec__table--grouped col.pdet-spec__col-val {width:20em;}
	.pdet-applications {padding:0 0 4em;}
	.pdet-applications__head {width:25%;}
	.pdet-faq {padding:6em 0;}
}
@media(max-width:1080px){
	.pdet-hero {padding:4em 0;}
	.pdet-hero__layout {flex-direction:column; gap:2em;}
	.pdet-hero__visual {width:100%;}
	.pdet-hero__desc {margin:1.5em 0 0;}
	.pdet-hero__icons {margin-top:1.5em;}
	.pdet-hero__slider-thumbs .swiper-slide {width:8em; height:8em;}
	.pdet-feature {padding:3em 0 4em;}
	.pdet-feature__layout {flex-direction:column; gap:1.5em; padding-top:2em;}
	.pdet-feature__head {width:100%;}
	.pdet-feature__grid {width:100%; grid-template-columns:1fr; gap:1em; margin-top:0;}
	.pdet-feature__card-caption {bottom:1.5em;}
	.pdet-spec {padding:0 0 4em;}
	.pdet-spec__layout {flex-direction:column; gap:1em; padding-top:2em;}
	.pdet-spec__head {width:100%;}
	.pdet-spec__content {width:100%; margin-top:1em;}
	.pdet-spec__subtitle {margin:1.5em 0 0.75em;}
	.pdet-applications {padding:0 0 4em;}
	.pdet-applications__layout {flex-direction:column; gap:1em; padding-top:2em;}
	.pdet-applications__head {width:100%;}
	.pdet-applications__content {width:100%; margin-top:1em;}
	.pdet-faq {padding:4em 0;}
	.pdet-faq__btn {padding:1.25em;}
	.pdet-faq__answer-row {padding:1.25em 1.5em;}
}
@media(max-width:768px){
	.pdet-hero {padding:3em 0;}
	.pdet-hero__title {font-size: 2em;}
	.pdet-hero__icons {gap:1.25em;}
	.pdet-hero__icon-text {white-space:normal;}
	.pdet-hero__slider-thumbs .swiper-slide {width:5.5em; height:5.5em;}
	.pdet-feature {padding:3em 0;}
	.pdet-feature__card-caption {bottom:1.25em;}
	.pdet-spec {padding:0 0 3em;}
	.pdet-spec__table th, .pdet-spec__table tbody td { padding:0.5em;}
	.pdet-applications {padding:0 0 3em;}
	.pdet-faq {padding:3em 0;}
	.pdet-faq__title {font-size: 2.5em;}
	.pdet-faq__q {font-size: 1.5em;}
	.pdet-faq__btn {padding:1em 1.25em;}
	.pdet-faq__toggle {width:2em; height:2em;}
	.pdet-faq__answer-row {padding:1em 1.25em; gap:0.875em;}
}

/* tech-navi / tech-tab CSS는 sh.php(.sp-navi) + content_tab.php(.depth3) partial이 출력하는 마크업과 별도라 제거됨 (2026-04-27 dedup). .sp-navi/.depth3은 line 174~184 + 236~241 참조. .depth3은 Figma 1273:3278 매칭 재작성 완료(2026-04-27) */

/* --- tech-banner — 1920×600 hero 배너 (이미지 bg + 흰 텍스트 위 정렬) (31_1, 31_2, 31_3, 31_4 사용) --- */
/* Figma 1273:3288 / 3811 / 4160 / 4296 — width 100%, height 600 (37.5em), bg image cover, 텍스트 center 정렬, title 64px Pretendard 600 ls -0.0078em(-0.5/64), subtitle 18px 600 ls -0.0278em(-0.5/18). 텍스트는 항상 HTML, 오버레이는 Figma 이미지에 포함됨(rules_assets.md 정적 이미지 케이스) — CSS overlay 추가 금지 */
.tech-banner {position:relative; width:100%; height:37.5em; overflow:hidden; font-size:var(--fz); background:var(--main-black);}
.tech-banner__bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.tech-banner__inner {position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1875em; text-align:center; padding:0 4%;}
.tech-banner__title {font-size:4em; font-weight:600; color:#fff; line-height:1.4; margin:0;}
.tech-banner__sub {font-size:1.125em; font-weight:600; color:#fff; line-height:1.4; margin:0;}


/* --- tech-2depth — 인페이지 sticky nav (메뉴 5~6개 + 페이지명 + 문의하기) (31, 32, 33, 34 사용) --- */
/* Figma 1273:3386 / 3909 / 4256 / 4319 — width 100%, height 100, bg #f9f9f9 (--bg02 #fafafa로 근사 대체, Δ1/255), sticky top:0. 좌측 페이지명 24px 700, 가운데 메뉴 17px 600 gap 52 (활성=#000, 비활성=#aaa=--gray05), 우측 문의하기 17px 600 + arrow svg 24px. 흡착 시 .header__fix 위로 사라지게 함 — body.is-tech-stuck 토글 */
.tech-2depth {position:sticky; top:0; left:0; z-index:90; width:100%; height:6.25em; background:var(--bg02); font-size:var(--fz);}
.tech-2depth__inner {display:flex; align-items:center; height:100%;}
.tech-2depth__name {flex-shrink:0; font-size:1.5em; font-weight:700; color:var(--main-black); line-height:1.4; margin:0;}
.tech-2depth__menu {flex:1; display:flex; justify-content:center; align-items:center; gap:3.25em; list-style:none; padding:0; margin:0;}
.tech-2depth__menu-link {font-size:1.0625em; font-weight:600; color:var(--gray05); line-height:1.4; transition:color 0.2s ease;}
.tech-2depth__menu-link, .tech-2depth__menu-link:link, .tech-2depth__menu-link:visited {color:var(--gray05);}
.tech-2depth__menu-link.is-active {color:var(--main-black);}
@media(hover:hover){.tech-2depth__menu-link:hover {color:var(--main-black);}}
.tech-2depth__inquiry {flex-shrink:0; display:inline-flex; align-items:center; gap:0.75em; font-size:1.0625em; font-weight:600; color:var(--main-black); line-height:1.4;}
.tech-2depth__inquiry, .tech-2depth__inquiry:link, .tech-2depth__inquiry:visited {color:var(--main-black);}
.tech-2depth__inquiry-arrow {width:1.5em; height:1.5em; display:inline-block;}
.tech-2depth__inquiry-arrow img {width:100%; height:100%; display:block;}
@media(hover:hover){.tech-2depth__inquiry:hover {opacity:0.7;}}
/* sticky 흡착 시 header 슬라이드 업 */
body.is-tech-stuck .header__fix {top:-6em;}

/* --- tech-hero — 페이지 타이틀(64px navy) + 이미지 + 키워드 pill 가로 나열 (31, 32, 33, 34 사용) --- */
/* Figma 1273:3342 / 3859 / 4196 / 4301 — height 799 (~50em), section-1 안에 navy 64px 타이틀 (가운데), 그 아래 이미지(가운데), 그 아래 pill 키워드 가로 정렬 (gap 37px=2.3125em), 마지막 줄에 1560px 가로 line. 페이지마다 이미지/키워드 다름. divider는 .tech-hero__body(.inner 안 wrapper)의 border-bottom으로 처리 — .inner 자체에 border 적용 시 1600↓ 반응형 padding:0 4% 영역까지 line 그어져 의도와 다름 (rules_css_inner.md 7항) */
.tech-hero {position:relative; padding:6.25em 0 0; background:#fff;}
.tech-hero__inner {position:relative;}
.tech-hero__body {display:flex; flex-direction:column; align-items:center; width:100%; padding-bottom:6.25em; border-bottom:1px solid var(--main-black);}
.tech-hero__title {font-size:4em; font-weight:600; color:var(--navy); line-height:1.4; margin:0; text-align:center;}
.tech-hero__visual {display:flex; align-items:center; justify-content:center; height:28.25em;}
.tech-hero__visual img {max-width:100%; height:auto; display:block;}
.tech-hero__keywords {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2.3125em;}
.tech-hero__keyword {display:inline-flex; align-items:center; justify-content:center; padding:0.3333em 2em; background:var(--bg03); color:var(--gray06); font-size:1.5em; font-weight:700; line-height:1.7; border-radius:2.5em; white-space:nowrap;}

/* --- tech-section — 좌헤드(180,)+우 content(496,) 좌우 wrapper (31, 32, 33, 34 다용도 사용, .pdet-* 와 동일 패턴 — 정의 별도 reuse) --- */
/* Figma section-2 1273:3355 (Text 180,22148 102x39 + Text 496,22148 ...) 동일 좌우 패턴이 모든 섹션에서 반복. 좌측 head는 width 19.75em(316px from 496-180), 우측 content는 flex:1. head 타이틀 28px 700 navy. 단, 일부 섹션은 padding-top 후 라인 없음, 일부는 라인 있음 */
.tech-section {padding:6.25em 0; background:#fff;}
.tech-section--bg2 {background:var(--bg02);}
.tech-section__inner {display:flex; align-items:flex-start;}
.tech-section__head {flex-shrink:0; width:19.75em;}
.tech-section__title {font-size:1.75em; font-weight:700; color:var(--navy); line-height:1.4; margin:0;}
.tech-section__content {width:100%; min-width:0;}
.tech-section__desc {font-size:1.5em; font-weight:600; color:var(--gray06); line-height:1.7; margin:0;}
.tech-section__desc--m500 {font-weight:500;}
.tech-section__desc span {color:var(--main-color); font-weight: 700;}
.tech-section__list {padding-left: 1.875em;}
.tech-section__item {font-size:1.5em; font-weight:500; color:var(--gray06); line-height:1.7; margin:0; white-space:pre-line; position: relative;}
.tech-section__item::before {content:''; display: block; width:0.2084em; aspect-ratio:1; position: absolute; left:-0.8334em; top:0.6667em; background: var(--gray06); position: absolute; border-radius:50%;}
.tech-section__sub {display:flex; align-items:center; gap:1em; margin:2.5em 0 1em;}
.tech-section__sub-line {display:inline-block; width:3px; height:1.5em; background:var(--main-color);}
.tech-section__sub-text {font-size:1.25em; font-weight:700; color:var(--gray06); line-height:1.4; margin:0;}
.tech-section__media {margin-top:2em;}
.tech-section__media--large {margin-top:4.75em;}
.tech-section__media img {width:100%; height:auto; display:block; border-radius:1.25em;}

/* --- tech-overview — 다크 navy 카드 4~5컬럼 (호버 시 배경 이미지 전환) (31_1, 31_3, 31_4 사용) --- */
/* Figma 1273:3358 / 4271 / 4393 — INSTANCE 1244x372. 호버 시 컨테이너 bg가 해당 컬럼 이미지로 전환, mouseleave 시 첫 컬럼 이미지(default)로 복귀. 이미지에 0.2 검정 오버레이가 구워진 상태(rules_assets.md 호버 fade 시나리오 — 컬럼 이미지 자체가 dim 상태로 export됨) */
.tech-overview {position:relative; background:var(--navy) center/cover no-repeat; border-radius:0.75em; padding:1.875em; display:flex; align-items:stretch; gap:1.375em; transition:background-image 0.3s ease;}
.s31_1 .tech-overview {background-image:url('img/p31_overview01.jpg');}
.s31_3 .tech-overview {background-image:url('img/p33_overview01.jpg');}
.s31_4 .tech-overview {background-image:url('img/p34_overview01.jpg');}
.tech-overview__col {flex:1; display:flex; align-items:center; justify-content:center; min-height:16.6667em; padding:0.625em 0; color:#fff; font-size:1.125em; font-weight:700; line-height:1.7; text-align:center; cursor:pointer; transition:color 0.25s ease, opacity 0.25s ease;}
.tech-overview__col--dim {opacity:0.6;}
.tech-overview__col:hover {color:#fff; opacity:1;}
.tech-overview:hover .tech-overview__col {opacity:0.6;}
.tech-overview:hover .tech-overview__col:hover {opacity:1;}
.tech-overview__sep {flex-shrink:0; width:1px; align-self:stretch; background:rgba(255,255,255,1);}

/* --- tech-overview--swap — 텍스트 스왑 인터랙션 (31_3, 31_4 사용. Figma 284:999 / 1071:3976 default + 컴포넌트 variant). 컨테이너 호버 시 default 4컬럼 그리드(__default) fade-out, 호버된 detail(__detail.is-active) fade-in. 호버 안된 컨테이너 = default 표시, detail 0 --- */
.tech-overview--swap {display:block; padding:0; min-height:23.25em;}
.tech-overview__default {position:absolute; inset:0; display:flex; align-items:stretch; gap:1.375em; padding:1.875em 2.25em; opacity:1; transition:opacity 0.25s ease; pointer-events:none;}
.tech-overview__default-col {flex:1; display:flex; align-items:center; justify-content:center; min-height:18.75em; padding:0.625em 0; color:#fff; font-size:1.125em; font-weight:700; line-height:1.7; text-align:center;}
.tech-overview__details {position:absolute; inset:0; display:flex; align-items:stretch; gap:0; padding:0;}
.tech-overview__detail {flex:1; position:static; cursor:pointer;}
.tech-overview__detail-box {position:absolute; color:#fff; margin:0; opacity:0; transition:opacity 0.25s ease; pointer-events:none; bottom:5em; left:5em;}
.tech-overview__detail-title {font-size:1.5em; font-weight:700; line-height:1.7; padding-bottom: 0.4167em;}
.tech-overview__detail-desc {font-size:1.125em; font-weight:500; line-height:1.7;}
.tech-overview--swap:hover .tech-overview__default {opacity:0;}
.tech-overview--swap:hover .tech-overview__detail:hover .tech-overview__detail-box{opacity:1;}

/* --- tech-safety — 안전/신뢰성 설계 navy bg + 좌헤드 + 우 아이콘+텍스트 다중 row+세로구분선 (31, 32, 33, 34 사용) --- */
/* Figma 1273:3293 / 3816 / 4165 / 4193 — section-5 navy bg, padding 6.25em 0, 좌측 head "안전/신뢰성 설계" 28px 700 #fff, 우 grid: 페이지마다 9개(31)/8개(32)/5개(33: -안전/신뢰성 설계 5개 단순 row)/8개. 각 column 120x144(아이콘 90x90 + 라벨 20px Medium #fff lh34, gap 20px), 사이 세로 line rgba(255,255,255,0.4). 31/32는 2행(5+4=9 / 4+4=8), 33은 1행 5개. 33의 텍스트는 multi-line이라 column height 다름 */
.tech-safety {background:var(--navy); padding:6.25em 0;}
.tech-safety__inner {display:flex; align-items:flex-start;}
.tech-safety__head {flex-shrink:0; width:19.75em;}
.tech-safety__title {font-size:1.75em; font-weight:700; color:#fff; line-height:1.4; margin:0;}
.tech-safety__content {width:100%; min-width:0; display:flex; flex-direction:column; gap:2.5em;}
.tech-safety__row {display:flex; align-items:flex-start; gap:3.75em; position: relative;}
.tech-safety__item {display:flex; flex-direction:column; align-items:center; width:7.5em; gap:1.25em; min-width:7.5em;}
.tech-safety__icon {width:5.625em; height:5.625em; display:flex; align-items:center; justify-content:center;}
.tech-safety__icon img {max-width:100%; max-height:100%; width:auto; height:auto; display:block;}
.tech-safety__label {font-size:1.25em; font-weight:500; color:#fff; line-height:1.7; text-align:center; margin:0; white-space:nowrap;}
.tech-safety__label--wrap {white-space:normal;}
.tech-safety__sep {flex-shrink:0; width:1px; height:8.375em; background:rgba(255,255,255,01); margin:auto 0;}

/* --- tech-* 반응형 (31, 32, 33, 34 공통) — 2026-04-29 전역 재작업 3/4 + 2026-04-29 5차 정비 (사용자 "엉망" 호소 — swiper/safety/overview 자연화) --- */
@media(max-width:1280px){
	.tech-2depth {height:5em;}
	.tech-2depth__menu {gap:1.5em;}
	.tech-hero {padding:5em 0 0;}
	.tech-hero__body {padding-bottom:5em;}
	.tech-hero__visual {height:24em;}
	.tech-hero__keywords {gap:1.5em;}
	.tech-hero__keyword {padding:0.4em 1.5em;}
	.tech-section {padding:5em 0;}
	.tech-section__inner {gap:1.5em;}
	.tech-section__head {width:25%;}
	.tech-section__title {padding-bottom: 1em;}
	.tech-section__sub {margin:2em 0 0.875em;}
	.tech-overview {padding:1.5em; gap:1em;}
	.tech-overview__col {min-height:14em;}
	.tech-overview--swap {min-height:20em;}
	.tech-overview--swap .tech-overview__default {padding:1.5em 1.75em; gap:1em;}
	.tech-overview--swap .tech-overview__default-col {min-height:16em;}
	.tech-safety {padding:5em 0;}
	.tech-safety__head {width:25%;}
	.tech-safety__content {gap:2em;}
	.tech-safety__row {gap:2em 1.5em; flex-wrap:wrap;}
	.tech-safety__item {gap:0.875em;}
	.tech-safety__icon {width:4.5em; height:4.5em;}
	.tech-safety__sep {display:none;}
	body.is-tech-stuck .header__fix {top:-6em;}
}
@media(max-width:1080px){
	.tech-2depth {height:auto; padding:1em 0;}
	.tech-2depth__menu {flex-wrap:wrap; gap:0.75em 1.25em;}
	.tech-2depth__inner {flex-wrap:wrap; gap:0.75em 1em;}
	.tech-hero {padding:4em 0 0;}
	.tech-hero__body {padding-bottom:4em; gap:2em;}
	.tech-hero__visual {height:auto; padding:1em 0;}
	.tech-hero__keywords {gap:0.75em;}
	.tech-section {padding:4em 0;}
	.tech-section__inner {flex-direction:column; gap:1.5em;}
	.tech-section__head {width:100%;}
	.tech-section__media--large {margin-top:2em;}
	.tech-overview {flex-wrap:wrap; gap:0.75em; padding:1.25em;}
	.tech-overview__col {flex:1 1 calc(50% - 0.5em); min-height:8em; padding:1em;}
	.tech-overview__sep {display:none;}
	.tech-overview--swap {display:block; min-height:auto; position:relative; padding:0;}
	.tech-overview--swap .tech-overview__default {position:relative; flex-wrap:wrap; gap:0.75em; padding:1.25em;}
	.tech-overview--swap .tech-overview__default-col {flex:1 1 calc(50% - 0.5em); min-height:8em; padding:1em;}
	.tech-safety {padding:4em 0;}
	.tech-safety__inner {flex-direction:column; gap:1.5em;}
	.tech-safety__head {width:100%;}
	.tech-safety__content {gap:1.5em;}
	.tech-safety__row {flex-wrap:wrap; gap:1.5em 1em; justify-content:flex-start;}
	.tech-safety__item { gap:0.625em; width:6em; min-width:6em}
	.tech-safety__icon {width:4em; height:4em;}
}
@media(max-width:768px){
	.tech-banner {height:30em;}
	.tech-banner__title {font-size: 2.5em;}
	.tech-hero__keyword {padding:0.35em 1.25em;}
	.tech-section {padding:3em 0;}
	.tech-section__inner {gap:1.25em;}
	.tech-overview {flex-direction:column; flex-wrap:nowrap; padding:1em; gap:0.625em;}
	.tech-overview__col {flex:0 0 auto; flex-basis:auto; width:100%; min-height:9em; padding:1.25em; opacity:1; background-image:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), var(--col-bg, none); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:0.5em;}
	.tech-overview:hover .tech-overview__col {opacity:1;}
	.tech-overview--swap .tech-overview__default {flex-direction:column; flex-wrap:nowrap; padding:1em; gap:0.625em;}
	.tech-overview--swap .tech-overview__default-col {flex:0 0 auto; flex-basis:auto; width:100%; min-height:9em; padding:1.25em; background-image:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), var(--col-bg, none); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:0.5em;}
	.tech-overview--swap .tech-overview__details {display:none;}
	.tech-overview--swap:hover .tech-overview__default {opacity:1;}
	.tech-overview__detail-box {bottom:3.5em; left:3.5em;}
	.tech-safety {padding:3em 0;}
	.tech-safety__row {gap:1.25em 0.75em;}
	.tech-safety__item {gap:0.5em;}
	.tech-safety__icon {width:3.5em; height:3.5em;}
	.tech-safety__label {white-space:normal; font-size: 1em;}
}
@media (max-width:500px){
	.tech-2depth {display: none;}
	body.is-tech-stuck .header__fix {top:0;}
	.tech-overview__col {flex-basis:100%;}
	.tech-overview--swap .tech-overview__default-col {flex-basis:100%;}
	.tech-overview__detail-box {bottom:2em; left:2em;}
}


/* ============================================
   카탈로그 다운로드 모달 (Figma 1273:6209)
   사용 페이지: 20, 21, 22, 23, 24 — `.catalog-banner__item[href="#"]`(제품 카탈로그) 클릭 트리거
   마크업 위치: footer_inc.php (5페이지 공통)
   ============================================ */
.catalog-modal {position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:1.25em; font-size: var(--fz);}
.catalog-modal.is-open {display:flex;}
.catalog-modal__overlay {position:absolute; inset:0; background:rgba(0,0,0,0.5); cursor:pointer;}
.catalog-modal__dialog {position:relative; width:1560px; max-width:calc(100vw - 2.5em); max-height:calc(100vh - 2.5em); background:#fff; border-radius:1.25em; box-shadow:0 0 2.125em rgba(0,0,0,0.25); padding:2.5em 5em; box-sizing:border-box; overflow-y:auto; display:flex; flex-direction:column; align-items:flex-end;}
.catalog-modal__close {width:2.5em; height:2.5em; background:url('img/ico_catalog_modal_close.svg') no-repeat center / contain; border:0; cursor:pointer; padding:0;}
.catalog-modal__form {width:100%; display:flex; flex-direction:column; gap:2.5em; border-top:1px solid var(--gray08); padding-top:0;}
.catalog-modal__fields {display:flex; flex-direction:column;}
.catalog-modal__row {display:flex; flex-direction:row; gap:0; width:100%; border-bottom:1px solid var(--gray08);}
.catalog-modal__field {display:flex; align-items:center; height:5em; box-sizing:border-box; flex:1;}
.catalog-modal__field--half {flex:0 0 50%;}
.catalog-modal__field--full {flex:0 0 100%;}
.catalog-modal__label {flex-shrink:0; width:11.25em; height:100%; padding:1.25em 1.5em; display:flex; align-items:center; box-sizing:border-box; font-size:1em; font-weight:600; color:var(--main-black); line-height:1.4; background: var(--bg02);}
.catalog-modal__control {flex:1; min-width:0; display:flex; align-items:center; gap:0.875em; padding:0 0 0 1.25em; box-sizing:border-box;}
.catalog-modal__control--email {gap:0.875em;}
.catalog-modal__control--name {padding:0 1.25em;}
.catalog-modal__input {flex:1; min-width:0; height:2.625em; padding:0.625em; border:1px solid var(--gray08); border-radius:0.5em; background:#fff; outline:none; font-family:inherit; font-size:1em; font-weight:300; color:var(--main-black); line-height:1.4; box-sizing:border-box;}
.catalog-modal__input::placeholder {color:var(--gray05); font-weight:300;}
.catalog-modal__email-at {flex-shrink:0; font-size:1em; font-weight:600; color:var(--main-black); line-height:1.4;}
.catalog-modal__select {position:relative; flex:1; min-width:0; display:flex; align-items:center;}
.catalog-modal__select select {flex:1; min-width:0; height:2.625em; padding:0.625em 2em 0.625em 0.625em; border:1px solid var(--gray08); border-radius:0.5em; background:#fff; outline:none; appearance:none; -webkit-appearance:none; font-family:inherit; font-size:1em; font-weight:300; color:var(--gray05); line-height:1.4; box-sizing:border-box; cursor:pointer;}
/* .catalog-modal__select select:valid {color:var(--main-black);} */
.catalog-modal__select-arrow {position:absolute; top:50%; right:0.625em; width:1em; height:1em; pointer-events:none; transform:translateY(-50%); background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 6 L8 10 L12 6' stroke='%23525252' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;}
.catalog-modal__privacy {display:flex; flex-direction:column; gap:0.75em;}
.catalog-modal__privacy-title {font-size:1em; font-weight:600; color:var(--main-black); line-height:1.4; margin:0;}
.catalog-modal__privacy-box {border:1px solid var(--gray08); border-radius:0.5em; padding:2.8572em; max-height:15.3572em; overflow-y:auto; font-size:0.875em; font-weight:600; color:var(--gray05); line-height:1.4; box-sizing:border-box;}
.catalog-modal__agree {display:flex; align-items:center; gap:0.75em;}
.catalog-modal__agree-input {appearance:none; -webkit-appearance:none; width:1.25em; height:1.25em; border:1px solid var(--gray08); background:#fff no-repeat center / 0.875em 0.875em; cursor:pointer; flex:0 0 1.25em; margin:0;}
.catalog-modal__agree-input:checked {background-image:url('img/ico_chk_navy.svg');}
.catalog-modal__agree-label {font-size:0.875em; font-weight:600; color:var(--gray07); line-height:1.4; cursor:pointer; user-select:none;}
.catalog-modal__submit {align-self:center; padding:0.625em 2.5em; border:1px solid var(--navy); border-radius:0.5em; background:#fff; color:var(--navy); font-family:inherit; font-size:1em; font-weight:600; line-height:1.4; cursor:pointer; transition:background 0.2s ease, color 0.2s ease;}
.catalog-modal__submit:hover {background:var(--navy); color:#fff;}
body.is-modal-open {overflow:hidden;}
/* catalog-modal 반응형 (재작성 4/4 — 1280/1080/768 표준) */
@media(max-width:1280px){
	.catalog-modal__dialog {width:90vw; padding:2.5em 2.5em 3em;}
	.catalog-modal__label {width:9em; padding:1em 1.25em;}
	.catalog-modal__control {padding:0 1em;}
	.catalog-modal__privacy-box {padding:2em;}
}
@media(max-width:1080px){
	.catalog-modal__dialog {padding:2em;}
	.catalog-modal__close {top:1.5em; right:1.5em;}
	.catalog-modal__row {flex-direction:column;}
	.catalog-modal__field {height:auto; flex-direction:column; align-items:stretch; gap:0.5em; padding:0.75em 0; border-bottom:1px solid var(--gray08);}
	.catalog-modal__field--half {flex-basis:auto;}
	.catalog-modal__form {gap:1.75em;}
	.catalog-modal__label {width:100%; height:auto; padding:0; background:transparent;}
	.catalog-modal__control {padding:0;}
	.catalog-modal__privacy-box {padding:1.5em; max-height:14em;}
}
@media(max-width:768px){
	.catalog-modal {padding:1em;}
	.catalog-modal__dialog {width:100%; max-width:none; padding:1.5em 1.25em 2em;}
	.catalog-modal__field {gap:0.375em; padding:0.625em 0;}
	.catalog-modal__control--email {flex-wrap:wrap;}
	.catalog-modal__privacy-box {max-height:11em; padding:1.25em;}
}