/* 서브페이지 상단바는 배경만 흰색(common.css 기본값), 로고·아이콘·텍스트는 header_on 상태와 동일한 톤 사용 */
.topNav {background-color: #fff}
.topNav .topNav__logo {background-image: url(/images/common/logo_on.png)}
.topNav .topNav__burgerIcon div {background-color: #121212}
.topNav .topNav__lang {border-color: #eee; color: #000}
.topNav .topNav__lang.openLang .currentLang {color: #036eb8}
.topNav .topNav__lang.openLang .topNav__langItem:first-child::after {content: ""; background-color: #eee}
.topNav .topNav__langToggle {color: #000}
.topNav .topNav__langToggle::before {/*background: url(/images/common/lang_on.png) no-repeat center/cover*/}
.topNav .topNav__searchBtn {color: #111}
.topNav .topNav__searchBtn::before {background: url(/images/common/searchIcon_on.png) no-repeat center/cover}
.topNav .topNav__list > li > a {color: #1c1c1c}
.sub_center {width: 95%; max-width: 140rem; margin-inline: auto}
.subVisual {position: relative; overflow: hidden; height: 30rem; background-color: #fff }
.subVisual__center {position: relative; height: 100%}
.subVisual__text {position: absolute; z-index: 1; color: #fff}
.subVisual__nav {display: flex; align-items: center; flex-wrap: wrap; font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 500; row-gap: 1rem}
.subVisual__nav span.home {display: block; width: 1.5rem; height: 1.5rem; background: url(/images/sub/home_on.png) no-repeat left center/1.5rem; box-sizing: content-box; transition: all .5s}
.subVisual__nav span:not(:last-child) {padding-right: 1.5rem; margin-right: 1rem; position: relative }
.subVisual__nav span:not(:last-child)::after {content: ""; display: block; width: .7rem; height: 1.1rem; background: url(/images/sub/navArr_on.png) no-repeat center/cover; position: absolute; top: 50%; transform: translateY(-50%); right: 0; transition: all .5s }
.subVisual__nav.navOff span.home {background: url(/images/sub/home.png) no-repeat left center/1.5rem; }
.subVisual__nav.navOff span:not(:last-child)::after {background: url(/images/sub/navArr.png) no-repeat center/cover}
.subVisual__title {font-size: var(--fs-80); font-weight: 700; line-height: 1; margin-top: var(--gap-150); margin-bottom:var(--gap-15); }
.subVisual__bgWrap {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; height: 100%; z-index: 0; overflow: hidden}
.subVisual__bg {position: relative;	top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 100%}
.subVisual__bg.background_0 {background: url(/images/sub/subtopimg_0.jpg) no-repeat center/cover}
.subVisual__bg.background1_11 {background: url(/images/sub/subtopimg1_11.jpg) no-repeat center/cover}
.subVisual__bg.background1_12 {background: url(/images/sub/subtopimg1_12.jpg) no-repeat center/cover}
.subVisual__bg.background1_13 {background: url(/images/sub/subtopimg1_13.jpg) no-repeat center/cover}
.subVisual__bg.background1_14 {background: url(/images/sub/subtopimg1_14.jpg) no-repeat center/cover}
.subVisual__bg.background1_15 {background: url(/images/sub/subtopimg1_15.jpg) no-repeat center/cover}
.subVisual__bg.background1_20 {background: url(/images/sub/subtopimg1_20.jpg) no-repeat center/cover}
.subVisual__bg.background1_30 {background: url(/images/sub/subtopimg1_30.jpg) no-repeat center/cover}
.subVisual__bg.background1_40 {background: url(/images/sub/subtopimg1_40.jpg) no-repeat center/cover}
.subVisual__bg.background1_50 {background: url(/images/sub/subtopimg1_50.jpg) no-repeat center/cover}
.subVisual__bg.background2_11 {background: url(/images/sub/subtopimg2_11.jpg) no-repeat center/cover}
.subVisual__bg.background2_12 {background: url(/images/sub/subtopimg2_12.jpg) no-repeat center/cover}
.subVisual__bg.background2_13 {background: url(/images/sub/subtopimg2_13.jpg) no-repeat center/cover}
.subVisual__bg.background2_14 {background: url(/images/sub/subtopimg2_14.jpg) no-repeat center/cover}
.subVisual__bg.background2_21 {background: url(/images/sub/subtopimg2_21.jpg) no-repeat center/cover}
.subVisual__bg.background2_22 {background: url(/images/sub/subtopimg2_22.jpg) no-repeat center/cover}
.subVisual__bg.background2_23 {background: url(/images/sub/subtopimg2_23.jpg) no-repeat center/cover}
.subVisual__bg.background3_11 {background: url(/images/sub/subtopimg3_11.jpg) no-repeat center/cover}
.subVisual__bg.background3_12 {background: url(/images/sub/subtopimg3_12.jpg) no-repeat center/cover}
.subVisual__bg.background3_13 {background: url(/images/sub/subtopimg3_13.jpg) no-repeat center/cover}
.subVisual__bg.background3_21 {background: url(/images/sub/subtopimg3_21.jpg) no-repeat center/cover}
.subVisual__bg.background3_22 {background: url(/images/sub/subtopimg3_22.jpg) no-repeat center/cover}
.subVisual__bg.background4_11 {background: url(/images/sub/subtopimg4_12.jpg) no-repeat center/cover}
.subVisual__bg.background4_12 {background: url(/images/sub/subtopimg4_12.jpg) no-repeat center/cover}
.subVisual__bg.background4_13 {background: url(/images/sub/subtopimg4_12.jpg) no-repeat center/cover}
.subVisual__bg.background4_21 {background: url(/images/sub/subtopimg4_21.jpg) no-repeat center/cover}
.subVisual__bg.background4_22 {background: url(/images/sub/subtopimg4_21.jpg) no-repeat center/cover}
.subVisual__bg.background4_31 {background: url(/images/sub/subtopimg4_32.jpg) no-repeat center/cover}
.subVisual__bg.background4_32 {background: url(/images/sub/subtopimg4_32.jpg) no-repeat center/cover}
.subVisual__bg.background5_10 {background: url(/images/sub/subtopimg5_10.jpg) no-repeat center/cover}
.subVisual__bg.background5_20 {background: url(/images/sub/subtopimg5_20.jpg) no-repeat center/cover}
.subVisual__bg.background5_30 {background: url(/images/sub/subtopimg5_30.jpg) no-repeat center/cover}
@media screen and (max-width: 960px) {
	.subVisual {height: 30rem; margin-top: var(--headerHeight)}
	.subVisual__text {bottom: var(--gap-50)}
	.subVisual__bgWrap {width: 100vw}
    .subVisual__title {font-size: var(--fs-70); font-weight: 700; margin-top: var(--gap-200); margin-bottom:var(--gap-10); }
	.subVisual.subVisual--product {height: 26rem}
}
@media screen and (min-width: 960px) {
	.subVisual {margin-top: var(--headerHeight); height: 46rem }
	.subVisual__text {top: 55%; transform: translateY(-50%)	}
	.subVisual.subVisual--product {height: 38rem}
}
.about {display: flex; flex-direction: column; row-gap: var(--gap-70)}
.about__cell {display: flex; flex-direction: column; row-gap: var(--gap-40)}
.move__image {opacity: 0}
.move__image.clipOn {animation-name: clipPath; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease-in-out; opacity: 0}
.move__image img {-o-object-fit: cover; object-fit: cover; border-radius: var(--gap-20)}
@media screen and (min-width: 960px) {
	.about__cell {flex-direction: row; justify-content: space-between; align-items: center 	}
	.about__cell:nth-child(even) {flex-direction: row-reverse}
	.move__image {width: 55%; max-width: 78.5rem}
	.about__text {width: 42%; max-width: 53rem}
}

/* Company > About us (Who we are) 이미지+텍스트 교차 배치 : .about 계열 클래스명을 재명명해서 별도 정의 */
.aboutWho {display: flex; flex-direction: column; row-gap: var(--gap-70)}
.aboutWho__cell {display: flex; flex-direction: column; row-gap: var(--gap-40)}
@media screen and (min-width: 960px) {
	.aboutWho__cell {flex-direction: row; justify-content: space-between; align-items: center}
	.aboutWho__cell:nth-child(even) {flex-direction: row-reverse}
	.aboutWho__text {width: 42%; max-width: 53rem}
}

/* Company > Green Management (management.php) : 이미지 2컷 + 타이틀 + 설명 반복 섹션 */
.greenManage {display: flex; flex-direction: column; row-gap: var(--gap-90)}
.greenManage__section {display: flex; flex-direction: column; row-gap: var(--gap-30)}
.greenManage__photos {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-20)}
.greenManage__photos img {display: block; width: 100%; height: clamp(12rem, 24vw, 29rem); -o-object-fit: cover; object-fit: cover; border-radius: var(--gap-20)}
.greenManage__desc + .greenManage__desc {margin-top: 1em}
.greenManage__policy {display: flex; flex-direction: column; row-gap: .8rem; margin-top: var(--gap-10)}
.greenManage__policyList {display: flex; flex-direction: column; row-gap: .5rem}
/* 항목 텍스트 안에 "· "가 직접 포함되어 있어(li::before 아님), 2줄 이상 줄바꿈 시에도
   줄맞춤이 유지되도록 hanging indent 처리 (첫줄은 원위치, 둘째 줄부터는 "·" 다음 텍스트 시작점에 맞춰짐) */
.greenManage__policyList li {padding-left: 1.1em; text-indent: -1.2em}
@media screen and (max-width: 640px) {
	.greenManage__photos {gap: var(--gap-10)}
}
.clear {clear: both;}
.bg_add { overflow:hidden; height: auto; gap: 1rem; background:url("/images/sub/about/bg_map.gif") no-repeat top left #231f20; background-size: contain; border-radius: var(--gap-20); padding:1.5% 2% 4% 2%;}
.bg_add_tit {background:#595a59; color:#fffffe; display: inline-block; padding: var(--gap-10); margin: var(--gap-30) 3.5%;}
.bg_add_line {border:0px;  border-top: 0.2rem solid #fffffe;}
.bg_add_box {  margin:var(--gap-50) 4% ;}
@media screen and (min-width: 960px) {
	.bg_add_box {float: left; width: 42%}
}

@keyframes clipPath {
	0% {opacity: 0; clip-path: inset(50%)}
	100% {opacity: 1; clip-path: inset(0%)}
}
.text-line {
	position: relative;
	font-size: clamp(1.2rem, 3vw, 2.8rem);
	color: #e1e1e1;
	font-weight: 600;
	line-height: 1.2em;
	background-image: linear-gradient(90deg, #1A1A1A 0%, #1A1A1A 0%, transparent 0.1%);
	background-repeat: no-repeat;
	-webkit-text-fill-color: rgba(26, 26, 26, .1);
	-webkit-background-clip: text;
	background-clip: text
}
@media screen and (min-width: 768px) {
	.text-line {font-size: clamp(2rem, 2.8vw, 2.8rem)	}
}
.outline {display: flex; flex-direction: column; row-gap: var(--gap-40) }
.outline__cell {display: flex; gap: var(--gap-70); border-bottom: .1rem solid #ddd; padding-bottom: var(--gap-30)}
.outline__number {width: 2rem}
.outline__listWrap {display: flex; flex-direction: column; row-gap: 1.2rem }

.outline__list {display: flex; gap: 1.2rem }
.outline__list.rightList {justify-content: flex-end}
.outline__box {width: 25%; border-radius: var(--gap-30); border: .1rem solid #feeed1; position: relative; box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, .07) }
.outline__box::after {content: ""; display: block; padding-bottom: 100% }
.outline__boxWrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90% }
.outline__icon {height: 3rem}
.outline__icon img {height: 100%}
@media screen and (max-width: 768px) {
	.outline__cell:not(:last-child) { margin-bottom: var(--gap-30)	}
}
@media screen and (min-width: 768px) {
	.outline__company {display: flex; flex-wrap: wrap; justify-content: space-between}
	.outline__cell {width: 49%}
	.outline__cell:nth-child(1), .outline__cell:nth-child(2), .outline__cell:nth-child(3), .outline__cell:nth-child(4) {margin-bottom: var(--gap-30)}
	.outline__icon {height: 9rem; display: flex; align-items: center; justify-content: center}
	.outline__icon img {height: auto}
}
@media screen and (min-width: 960px) {
	.outline {flex-direction: row; gap: var(--gap-85)	}
	.outline__title {flex-shrink: 0; width: 25rem }
	.outline__listWrap {flex-direction: row; gap: 1.2rem	}
	.outline__box {width: 16.8rem}
}
.history {display: flex; flex-direction: column; row-gap: var(--gap-90)}
.history__tab {display: flex; justify-content: space-between}
.history__cell {width: 24%; height: 4.5rem; border-radius: 50vmax; font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 700; background-color: #e8e8e8 }
.history__cell a {height: 100%; display: flex; align-items: center; justify-content: center }
.history__cell.on {color: #fff; background-color: var(--mainColor)}
.history__about {display: none}
.history__about.show {display: block}
.history__wrap {display: flex; align-items: flex-start; gap: var(--gap-50)}
.history__year {font-size: clamp(2.2rem, 3.5vw, 3rem); font-weight: 700; color: #000}
.history__works {font-size: var(--fs-20); font-weight: 500; display: flex; flex-direction: column; row-gap: 1rem}
.history__inner {flex-direction: column; row-gap: 5rem; display: none }
.history__inner.show {display: flex}
@media screen and (min-width: 960px) {
	.history {flex-direction: row; justify-content: space-between; align-items: flex-start }
	.history__left {width: 48.5%; max-width: 67rem; position: sticky; left: 0; top: var(--headerHeight)	}
	.history__right {width: 45%; max-width: 61rem}
}

/* Company > Company History (history.php) : Since 1991/1999/2015 탭 + 연혁 타임라인 */
.historyTab {display: flex; flex-direction: column; row-gap: var(--gap-70)}
.historyTab__nav {display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem}
.historyTab__navItem {border: solid 1px #dddddd; border-radius: 50vmax; padding: 1.2rem 2.8rem; font-size: var(--fs-28); font-weight: 200; background-color: #f0f0f0; color: #333; cursor: pointer; transition: background-color .3s, color .3s}
.historyTab__navItem.on {background-color: #000; color: #fff}

.historyTab__groups {display: flex; flex-direction: column; row-gap: var(--gap-100)}
.historyTab__group {display: flex; flex-direction: column; row-gap: var(--gap-40)}

.historyTab__left {display: flex; flex-direction: column; row-gap: var(--gap-20)}
.historyTab__img {width: 100%; aspect-ratio: 3 / 1.83; border-radius: var(--gap-10); overflow: hidden}
.historyTab__img img {display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover}
.historyTab__title {font-size: var(--fs-32); font-weight: 700; color: #000}
.historyTab__subtitle {font-size: var(--fs-20); font-weight: 700; color: #000;}
.historyTab__desc {font-size: var(--fs-16); font-weight: 400; color: #777; line-height: 1.7}

.historyTab__timeline {display: flex; flex-direction: column}
.historyTab__year {display: flex; align-items: flex-start; column-gap: var(--gap-20); padding-block: var(--gap-25)}
.historyTab__year:first-child {padding-top: 0}
.historyTab__year + .historyTab__year {border-top: .1rem solid #e5e5e5}
.historyTab__yearNum {flex-shrink: 0; width: 8rem; font-size: var(--fs-30); font-weight: 700; color: #000}
.historyTab__events {flex: 1 1 auto; display: flex; flex-direction: column; row-gap: 1rem}
.historyTab__events li {display: flex; column-gap: var(--gap-20)}
.historyTab__events li em {flex-shrink: 0; width: 2.6rem; font-style: normal; font-size: var(--fs-20); color: #999}
.historyTab__events li p {flex: 1 1 auto; font-size: var(--fs-20); color: #555; line-height: 1.6}

@media screen and (min-width: 960px) {
	.historyTab__group {flex-direction: row; column-gap: var(--gap-140); align-items: flex-start}
	.historyTab__left {width: 56rem; max-width: 42%; flex-shrink: 0; position: sticky; top: var(--headerHeight)}
	.historyTab__right {flex: 1 1 auto; min-width: 0}
}
@media screen and (max-width: 640px) {
	.historyTab__navItem {padding: 1rem 1.8rem; font-size: var(--fs-15)}
	.historyTab__yearNum {width: 6rem; font-size: var(--fs-24)}
}

/* Company > CEO (ceo.php) : 인사말 타이틀 */
.ceoGreet__title {text-align: center; font-size: var(--fs-36); font-weight: 700; color: #000; margin-bottom: var(--gap-40)}

/* 인용구 박스 + 대표사진 : 모바일에서도 항상 가로 1줄 배치 */
.ceoHero {display: flex; flex-direction: row; align-items: stretch; gap: clamp(1rem, 3vw, 2rem); margin-bottom: var(--gap-60)}
.ceoHero__quote {flex: 1 1 auto; min-width: 0; background-color: #edf0f5; border-radius: var(--gap-20); padding: clamp(1.5rem, 4vw, 5rem) clamp(1.2rem, 3vw, 4rem); display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: clamp(1rem, 2.5vw, 2.5rem); text-align: center}
.ceoHero__quoteText {font-size: clamp(1.6rem, 2.6vw, 4.8rem); font-weight: 200; color: #222; line-height: 1.5}
.ceoHero__sign {height: clamp(1.8rem, 4vw, 3.6rem); width: auto}
.ceoHero__photo {flex: 0 0 clamp(8rem, 22vw, 25.5rem); width: clamp(8rem, 22vw, 25.5rem); aspect-ratio: 256 / 388; border-radius: var(--gap-20); overflow: hidden}
.ceoHero__photo img {display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover}

/* 인사말 본문 */
.ceoGreet {display: flex; flex-direction: column; row-gap: 2.2rem; margin-bottom: var(--gap-90)}
.ceoGreet__lead {font-size: var(--fs-26); font-weight: 400; color: #111; line-height: 1.4}
.ceoGreet__text {font-size: var(--fs-20); font-weight: 300; color: #666; line-height: 1.8}

/* CEO Profile 표 (좌: Education / 우: Outside activities, 행 수가 달라 2컬럼 리스트로 구성) */
.ceoProfile {display: flex; flex-direction: column; row-gap: 2.5rem}
.ceoProfile__title {text-align: center; font-size: var(--fs-26); font-weight: 700; color: #000}
.ceoProfile__table {border-top: .2rem solid #000}
.ceoProfile__head {display: grid; grid-template-columns: 1fr 1fr; background-color: #f8f8f8; border-bottom: .1rem solid #000}
.ceoProfile__head span {padding-block: 1.5rem; text-align: center; font-size: var(--fs-18); font-weight: 600; color: #333}
.ceoProfile__head span:first-child {border-right: .1rem solid #ddd}
.ceoProfile__body {display: grid; grid-template-columns: 1fr 1fr; border-bottom: .1rem solid #000}
.ceoProfile__col {display: flex; flex-direction: column}
.ceoProfile__col:first-child {border-right: .1rem solid #ddd}
.ceoProfile__item {display: flex; flex-direction: column; row-gap: .3rem; padding: 1.4rem 1.6rem}
.ceoProfile__date {flex-shrink: 0; font-size: var(--fs-15); color: #999}
.ceoProfile__desc {font-size: var(--fs-16); color: #333; line-height: 1.5}
@media screen and (min-width: 768px) {
	.ceoProfile__item {flex-direction: row; column-gap: 1.5rem; align-items: baseline}
	.ceoProfile__date {width: 15rem}
	.ceoProfile__desc {flex: 1 1 auto}
}

.support {display: flex; flex-direction: column; row-gap: 3rem; border-bottom: .1rem solid #ddd}
.support__form .must:after {content: " ＊"; color: var(--mainColor)}
.support__input {width: 100%; height: 6rem; border-radius: 1rem; border: .1rem solid #ddd; padding-inline: var(--gap-20); font-size: var(--fs-18)}
.support__textarea {width: 100%; height: 23rem; border-radius: 1rem; border: .1rem solid #ddd; padding: var(--gap-20); font-size: var(--fs-18); resize: none }
.support__agrees {display: flex; align-items: center; justify-content: space-between; row-gap: 1rem}
.support__check {position: relative}
.support__check input[type=checkbox] {position: absolute; right: 0; width: 1px; height: 1px; padding: 0; border: 0 none; margin: 0; top: 0; overflow: hidden; clip: rect(0 0 0 0)}
.support__check label {background: url(/images/sub/uncheck.png) no-repeat center left/3.3rem; padding: 1rem 0 1rem 4.5rem; font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 600; color: #5f5f5f; display: block; text-align: left}
.support__check input[type=checkbox]:checked + label {background: url(/images/sub/checked.png) no-repeat center left/3.3rem}
.support__viewLink {display: flex; align-items: center; justify-content: center; width: 30%; max-width: 12rem; height: 3.5rem; color: #fff; border-radius: 1rem; font-size: clamp(1.2rem, 1.5vw, 1.5rem); font-weight: 600; background-color: #333; text-align: center; flex-shrink: 0}
.support__submit {width: 100%; height: 7rem; border-radius: 1rem; background-color: #333; color: #fff; font-size: var(--fs-26); font-weight: 600; gap: 1.2rem; display: flex; align-items: center; justify-content: center}
.support__submit:after {content: ""; display: block; width: 1.8rem; height: 1.8rem; background: url(/images/sub/about/submit.png) no-repeat center/cover }
@media screen and (min-width: 960px) {
	.support {flex-direction: row; 	align-items: flex-start; justify-content: space-between; gap: 4rem }
	.support__form {width: 50%}
}
.viewPop {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; opacity: 0; visibility: hidden; transition: all .5s }
.viewPop.showView {opacity: 1; visibility: visible}
.viewPop__box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: var(--gap-40); width: 95%; max-width: 74.5rem; padding: var(--gap-40); z-index: 1; font-size: var(--fs-18)}
.viewPop__close {display: block; background-color: #333; color: #fff; font-size: var(--fs-40); font-weight: 900; border-radius: 1.3rem; width: 80%; max-width: 31rem; height: var(--gap-70)}
.viewPop__texts {font-size: 1.7rem; height: 30dvh; overflow-y: scroll; word-break: keep-all; white-space: pre-line; padding-right: 2rem }
.viewPop__texts::-webkit-scrollbar {width: .7rem}
.viewPop__texts::-webkit-scrollbar-track {background-color: #ddd; border-radius: 50vmax}
.viewPop__texts::-webkit-scrollbar-thumb {background-color: #000; border-radius: 50vmax}
.viewPop__texts::-webkit-scrollbar-button {display: none}
.viewPop__bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .6; z-index: 0}
@media screen and (min-width: 768px) {
	.viewPop__box {font-size: var(--fs-25)}
	.viewPop__texts {height: 50dvh}
}
.locate__head {display: flex; flex-direction: column; row-gap: 3rem }
.locate__wrap {display: flex; flex-direction: column; row-gap: 1rem}
.locate__address {display: flex; align-items: center; gap: 1rem}
.locate__address::before {content: ""; display: block; width: 2rem; height: 2.2rem; background: url(/images/sub/about/adress.png) no-repeat center/cover}
.locate__tel {display: flex; align-items: center; gap: 1rem }
.locate__tel::before {content: ""; display: block; width: 2rem; height: 2rem; background: url(/images/sub/about/tel.png) no-repeat center/cover}
.locate__fax {display: flex; align-items: center; gap: 1rem }
.locate__fax::before {content: ""; display: block; width: 2.4rem; height: 2.3rem; background: url(/images/sub/about/fax.png) no-repeat center/cover}
.locate__map {width: 100% !important; z-index: 0}
.locate__map .wrap_map {height: 32rem !important}
.locate__map .cont {display: none}
@media screen and (min-width: 768px) {
	.locate__wrap {	flex-direction: row; gap: 3rem}
}
@media screen and (min-width: 960px) {
	.locate__head {flex-direction: row; justify-content: space-between }
	.locate__map .wrap_map {height: 65rem !important}
}
.listArea__cell {display: flex; flex-direction: column; row-gap: 3rem; padding-bottom: var(--gap-90); border-bottom: .1rem dashed #ddd}
.listArea__cell:not(:last-child) {margin-bottom: var(--gap-90) }
.listArea__image {border-radius: 1rem; overflow: hidden; border: .3rem solid #eee; box-sizing: content-box }
.listArea__image img {width: 100%}
.listArea__detail {padding-top: var(--gap-30); margin-top: var(--gap-30); border-top: .1rem solid #ddd}
@media screen and (min-width: 960px) {
	.listArea__cell {flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: var(--gap-70)	}
	.listArea__image {width: 35%; max-width: 46.5rem}
	.listArea__texts {width: 60%; max-width: 86.5rem}
}
.pageDl {color: #000; line-height: 1.2 }
.pageDl dt {font-size: var(--fs-40); font-weight: 700; margin-bottom: var(--gap-15) }
.pageDl dd {font-size: var(--fs-23); font-weight: 500 }

/* 본문 안에서 <div class="mb-XX"><img></div>처럼 이미지 하나만 감싼 div는 자동 중앙정렬 */
.sub_center div > img:only-child {display: block; margin-inline: auto; max-width: 100%; height: auto}
.decDl {display: flex; flex-direction: column; row-gap: 1rem}
.decDl__dt {font-size: var(--fs-22); font-weight: 700; color: var(--mainColor)}
.decDl__dt.small {font-size: var(--fs-18)}
.decDl__dd {font-size: var(--fs-18); font-weight: 500; color: #555}
.lw60p {width:100%;}
.crimg { position:absolute; opacity:1; max-width: 35%; height: auto; right:0; margin-right: 10px;  bottom:0;}
.bgdiv_crimg {position: relative; overflow: visible; padding:25px 30px; width: 100%; height: 100%; bottom: 0; left: 0; z-index: 0; background: #faa819; border-radius: var(--gap-18);}
@media screen and (min-width: 960px) {
	.decDl {flex-direction: row; justify-content: space-between}
	.decDl__dt {width: 36.3333%; max-width: 50rem}
	.decDl__dt.haveImage {width: 40%; max-width: 52.7rem}
	.decDl__dd {width: 60%; max-width: 81rem}
	.lw60p {width:65%;}
	.crimg { display:block; position:absolute; opacity:1; right:0; margin-right: 10px;  bottom:0;}
}
@media screen and (max-width: 768px) {
	.crimg {opacity:0.2; max-width: 200px; height: auto;}
}

.fifa4 {display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: clamp(0.5rem, 1vw, 1.5rem); column-gap: clamp(0.5rem, 1vw, 1.5rem); row-gap: var(--gap-20) }
.fifa4__thum {overflow: hidden; position: relative; border-radius: var(--gap-20); margin-bottom: var(--gap-35)}
.fifa4__thum::after {content: ""; display: block; padding-bottom: 70.5381165919%}
.fifa4__thum img {position: absolute; top: 0; left: 0; width: 100%}
.fifa4__name {font-size: var(--fs-20); font-weight: 600; color: #000; line-height: 1.2; position: relative; display: inline-block; padding-top: 12px; }
.fifa4__name::before { content: ""; position: absolute; top: 0; left:0; width:120px; border-top: 6px solid #ff9933; border-radius: 3px;}
.fifa4__dec {font-size: var(--fs-18); font-weight: 300; color: #000; margin-bottom: var(--gap-10);}
.link_btnWrap {display: flex; padding: 0 15%; flex-direction: column; gap: 3.2rem }
.link_btn {border-radius: 50vmax; height: 5rem; width: 100%; background-color: #000}
.link_btn a {display: flex; align-items: center; justify-content: center; gap: 1rem; height: 100%; color: #fff}
.link_btn a:after {content: ""; display: block; width: 1.5rem; height: 1.4rem; background: url(/images/sub/snp/linkArr.png) no-repeat center/cover}
.link_btn1Wrap {display: flex; padding: 0 15%; flex-direction: column; gap: 3.2rem }
.link_btn2Wrap {display: flex; padding: 0 10%; flex-direction: column; gap: 3.2rem }
.link_btn1 {border-radius: 50vmax; height: 5rem; width: 100%; background-color: #000}
.link_btn1 a {display: flex; align-items: center; justify-content: center; gap: 1rem; height: 100%; color: #fff}
.link_btn1 a:after {content: ""; display: block; width: 1.5rem; height: 1.4rem; background: url(/images/sub/snp/linkArr.png) no-repeat center/cover}
.fifa_logo {width:130px; height: auto}

.fifahed .fifaDl:not(:last-child) {padding-bottom: var(--gap-20); margin-bottom: var(--gap-20);}
.fifaDl {display: flex; flex-direction: column; row-gap: 1rem}
.fifaDl__dt {font-size: var(--fs-22); font-weight: 700; color: var(--mainColor)}
.fifaDl__dt.small {font-size: var(--fs-18)}
.fdtimg {width: 442px; height: auto}
.fifaDl__dd {font-size: var(--fs-18); font-weight: 500; color: #555; display: flex; align-items: center;}

.linkdb__but {display:flex;flex-direction:column;gap:1.2rem}
.dbhed .dbDl {padding-bottom: var(--gap-20); margin-bottom: var(--gap-20);}
.dbDl {display: flex; flex-direction: column; row-gap: 1rem}
.dbDl__dt {font-size: var(--fs-22); font-weight: 700; color: var(--mainColor); align-items: center;width: 100%;}
.dbDl__dd {font-size: var(--fs-18); font-weight: 500; color: #555; display: flex; align-items:baseline;}

@media screen and (min-width: 960px) {
	.fifa_logo {width: auto; height: auto}
	.fifa4 {grid-template-columns: repeat(4, 1fr)}
	.fifa4__thum {transition: box-shadow .5s}
	.fifa4__thum img {transition: transform .5s}
	.fifa4__cell:hover .fifa4__thum {box-shadow: 6px 6px 9px 2px rgba(0, 0, 0, .28)}
	.fifa4__cell:hover .fifa4__thum img {transform: scale(1.1)}
	.link_btnWrap {flex-direction: row;  padding: 0 14%;}
	.link_btn:hover {background-color: var(--mainColor)	}
	.link_btn1Wrap {flex-direction: row;  padding: 0 30%;}
	.link_btn2Wrap {flex-direction: row;  padding: 0 26%;}
	.link_btn1:hover {background-color: var(--mainColor)	}
	.fifaDl {flex-direction: row; justify-content: space-between}
	.fifaDl__dt {width: 33.3333%; max-width: 46rem}
	.fdtimg {width: 442px; height: auto}
	.fifaDl__dt.haveImage {width: 40%; max-width: 52.7rem}
	.fifaDl__dd {width: 62%; max-width: 81rem}
	.fifahed .fifaDl:not(:last-child) {padding-bottom: var(--gap-10); margin-bottom: var(--gap-10);}
	.dbDl {flex-direction: row; justify-content: space-between}
	.dbDl__dt {width: 15%; max-width: 22rem; min-width:20rem}
	.dbDl__dd {width: 83%; max-width: 130rem}
	.dbhed .dbDl {padding-bottom: var(--gap-10); margin-bottom: var(--gap-10);}
}
@media screen and (max-width: 568px) {
	.fifa4 {grid-template-columns: repeat(1, 1fr)}
	.link_btnWrap {flex-direction: column;  padding: 0 0;}
	.link_btn1Wrap {flex-direction: column;  padding: 0 0;}
	.link_btn2Wrap {flex-direction: column;  padding: 0 0;}
	.fdtimg {width: 331px; height: auto}
}
.dashed .decDl:not(:last-child) {padding-bottom: var(--gap-60); margin-bottom: var(--gap-60); border-bottom: .1rem dashed #ddd}
.halfBox {display: flex; flex-direction: column; row-gap: 2rem}
@media screen and (min-width: 960px) {
	.halfBox {flex-direction: row; justify-content: space-between}
	.halfBox p {width: 47%}
}
.alignArea {display: flex; flex-direction: column; row-gap: 3rem }
@media screen and (min-width: 960px) {
	.alignArea {flex-direction: row; align-items: center; justify-content: space-between }
	.alignArea.starAlign {align-items: flex-start}
	.alignArea__image {max-width: 78.5rem; width: 60%}
	.alignArea__text {width: 37%}
}
.greyBox {background-color: #fafafa; border-radius: var(--gap-20); border: .1rem solid #ddd; padding: clamp(1rem, 4vw, 4rem) clamp(1.3rem, 4.5vw, 5rem) }
.defalutTable {width: 100%; border-top: .3rem solid #000}
.defalutTable th, .defalutTable td {padding: var(--gap-30) 1.5rem; text-align: center; border-bottom: .1rem solid #ddd }
.defalutTable th:not(:last-child), .defalutTable td:not(:last-child) {border-right: .1rem solid #ddd}
.defalutTable thead th {background-color: #f8f8f8; font-size: var(--fs-22); font-weight: 600; color: #000 }
.defalutTable tbody th {font-size: var(--fs-22); font-weight: 600; color: #000}
.defalutTable tbody td {font-size: var(--fs-18); color: #555}
.defalutTable tbody .colorBg {color: #fff; background-color: var(--mainColor)}

.simTable{width:100%;border-top:.2rem solid #000}
.simTable th,.simTable td{padding:var(--gap-8) 1.5rem;text-align:center;border-bottom:0rem solid #ddd}
.simTable th:not(:last-child),.simTable td:not(:last-child){border-right:.1rem solid #000}
.simTable thead th{padding:var(--gap-10) 1.5rem;text-align: left; background-color:#fff;font-size:var(--fs-22);font-weight:600;color:#000;border-bottom:.1rem solid #000}
.simTable tbody th{padding-left:var(--gap-15); font-size:var(--fs-20);font-weight:500;color:#000; text-align: left}


.simTable tbody td{padding-left:var(--gap-15); font-size:var(--fs-18);color:#555;text-align: left}
.simTable tbody .colorBg{color:#fff;background-color:var(--mainColor)}
.simTable tbody {border-bottom:.1rem solid #000}
.simTable tbody tr:first-child th {padding-top:2rem;}
.simTable tbody tr:last-child th {padding-bottom:2rem;}
.simTable tbody tr:first-child td {padding-top:2rem;}
.simTable tbody tr:last-child td {padding-bottom:2rem;}

.pcTable {display:block}
.moTable {display:none}

@media screen and (max-width: 568px) {
	.pcTable {display:none}
	.moTable {display:block}
}
.tableWrap {display: flex; flex-direction: column; row-gap: 3rem }
@media screen and (min-width: 960px) {
	.tableWrap {flex-direction: row; justify-content: space-between	}
	.tableWrap > div {width: 48.5%}
}
.browser {display: flex; flex-direction: column; row-gap: 2.5rem}
.browser__box {padding: var(--gap-35) 0; display: flex; flex-direction: column; row-gap: 1rem; border-block: .1rem solid #ddd}
.browser__down {display: flex; align-items: center; justify-content: center; width: 13.8rem; height: 5.8rem; border-radius: 50vmax; border: .1rem solid #333; font-size: 1.6rem; font-weight: 500}
@media screen and (min-width: 960px) {
	.browser {flex-direction: row; align-items: center; justify-content: space-between }
	.browser__box {width: 60%; padding-inline: var(--gap-45); flex-direction: row; align-items: center; justify-content: space-between }
	.browser__down:hover {background-color: #333; color: #fff}
}
.gridSection img {width: 100%}
.gridSection__align {display: flex; flex-direction: column; gap: var(--gap-20)}
.gridSection__texts {background-color: var(--mainColor); border-radius: var(--gap-20)}
.gridSection__inner {padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 2.8vw, 3rem) }
.gridSection__list {display: flex; flex-direction: column; row-gap: .5rem}
.gridSection__cell {gap: .5rem; position: relative; padding-left: 1rem}
.gridSection__cell::before {content: ""; display: block; width: .4rem; height: .4rem; left: 0; top: clamp(.5em, 1vw, .7em); background-color: #fff; border-radius: 100%; position: absolute}
@media screen and (min-width: 960px) {
	.gridSection__align.align1 {flex-direction: row}
}
@media screen and (min-width: 1400px) {
	.gridSection__align.align2 {flex-direction: row}
	.gridSection__texts {position: relative; max-width: 52rem; width: 40%}
	.gridSection__inner {position: absolute; top: 50%; transform: translateY(-50%); width: 100%	}
}
.decAlign__cell {display: flex; flex-direction: column; row-gap: 3rem}
.decAlign__cell:not(:last-child) {padding-bottom: var(--gap-60); margin-bottom: var(--gap-60); border-bottom: .1rem dashed #ddd }
.decAlign__dt {font-size: var(--fs-26); font-weight: 700; margin-bottom: 1rem; color: var(--mainColor)}
.decAlign__dd {font-size: var(--fs-22); color: #121212}
@media screen and (min-width: 960px) {
	.decAlign__cell {display: flex; flex-direction: row; justify-content: space-between; -moz-column-gap: 3rem; column-gap: 3rem}
	.decAlign__dl {width: 42.5rem}
	.decAlign__text {max-width: 81rem; width: 60%}
}
.linkArea {display: flex; flex-direction: column; row-gap: 3rem; color: #111}
.linkArea__buttonsWrap {display: flex; flex-direction: column; gap: 1.2rem }
.linkArea__button {border-radius: 50vmax; height: 5rem; width: 100%; background-color: #000}
.linkArea__button a {display: flex; align-items: center; justify-content: center; gap: 1rem; height: 100%; color: #fff}
.linkArea__button a:after {content: ""; display: block; width: 1.5rem; height: 1.4rem; background: url(/images/sub/snp/linkArr.png) no-repeat center/cover}

.link_but_1Wrap{display:flex;flex-direction:column;gap:1.2rem}
.link_but_1 {border-radius: 50vmax; height: 5.8rem; width: 100%;background-color: #000}
.link_but_1 a {display: flex; align-items: center; justify-content: center; gap: 1rem; height: 100%;font-size: var(--fs-38); font-weight: 800;  color: #faa819}
.link_but_1 a:hover {color: #fff}
.link_oo:hover {color: #faa819}

.linkArea__aboutsWrap{display:flex;flex-direction:column;gap:1.2rem}
.linkArea__about {border-radius:50vmax;height:5rem;width:100%;background-color:#000}
.linkArea__about a{display:flex;align-items:center;justify-content:center;gap:1rem;height:100%;color:#fff}
.linkArea__about a:after{content:"";display:block;width:1.5rem;height:1.4rem;background:url(/images/sub/snp/linkArr.png) no-repeat center/cover}

.linkAw {display:flex;flex-direction:column;row-gap:3rem;color:#111}
.linkAw__buttonsWrap{display:flex;flex-direction:column;gap:1.2rem}
.linkAw__button{border-radius:50vmax;height:5rem;width:100%;background-color:#000}
.linkAw__button a{display:flex;align-items:center;justify-content:center;gap:1rem;height:100%;color:#fff}
.linkAw__button a:after{content:"";display:block;width:1.5rem;height:1.4rem;background:url(/images/sub/snp/linkArr.png) no-repeat center/cover}
@media screen and (min-width: 960px) {
	.linkArea {	flex-direction: row; align-items: center}
	.linkArea__wrap {padding-left: var(--gap-60); margin-left: var(--gap-60); border-left: .1rem solid #ddd }
	.linkArea__buttonsWrap {flex-direction: row	}
	.linkArea__button:hover {background-color: var(--mainColor)	}
	.link_but_1:hover {background-color: var(--mainColor);}
	
	.linkAw {flex-direction:row;align-items:center}
	.linkAw__wrap{padding-left:var(--gap-70);margin-left:var(--gap-70);border-left:.1rem solid #ddd}
	.linkAw__buttonsWrap{flex-direction:row}
	.linkAw__button{width:30%}
	.linkAw__button:hover{background-color:var(--mainColor)}
	
	.linkArea__aboutWrap{flex-direction:row}
	.linkArea__about {width:30%}
	.linkArea__about:hover{background-color:var(--mainColor)}
}
.dotext {display: flex; align-items: flex-start; gap: .5rem }
.dotext::before {content: "·" }
.vodWrap {position: relative}
.vodWrap.onVod .vodWrap__image {display: none}
.vodWrap.onVod .vodWrap__iframe {opacity: 1}
.vodWrap #player {width: 100%; height: 100%; position: absolute; top: 0; left: 0}
.vodWrap__image {position: absolute; top: 0; left: 0; width: 100%; z-index: 1 }
.vodWrap:after {content: ""; display: block; padding-bottom: 56.2857142857% }
.vodWrap__iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
@media screen and (min-width: 960px) {
	.vodWrap__image {cursor: pointer}
}
.products {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem }
.products__cell {text-align: center; border: .1rem solid #ddd; border-radius: var(--gap-35); overflow: hidden; position: relative}
.products__cell:after {content: ""; display: block; padding-bottom: 100% }
.products__cell a {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0}
.products__thum {position: relative; width: 73.4649122807%; max-width: 33.5rem; margin-inline: auto }
.products__thum::after {content: ""; display: block; padding-bottom: 100%}
.products__thum img { position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%)}
.products__name {font-size: clamp(1.2rem, 2vw, 2.3rem); font-weight: 600; color: #111; text-align: center; margin: var(--gap-15) auto 0 auto; width: 73.4649122807%; max-width: 33.5rem; word-break: break-all}
@media screen and (min-width: 960px) {
	.products {	grid-template-columns: repeat(3, 1fr) }
	.products__cell:hover {	border-color: var(--mainColor)	}
	.products__cell:hover a:after {	display: block	}
	.products__cell a:after {content: ""; position: absolute; width: 6rem; height: 6rem; right: var(--gap-20); bottom: var(--gap-20); background: url(/images/sub/snp/hoverIcon.png) no-repeat center/cover; display: none}
}
.productNav {display: flex; align-items: center; font-size: clamp(1rem, 2.5vw, 1.8rem); font-weight: 500 }
.productNav span.home {display: block; width: 1.5rem; height: 1.5rem; background: url(/images/sub/home.png) no-repeat left center/1.5rem; box-sizing: content-box; transition: all .5s}
.productNav span:not(:last-child) {padding-right: 1.5rem; margin-right: 1rem; position: relative }
.productNav span:not(:last-child)::after {content: ""; display: block; width: .7rem; height: 1.1rem; background: url(/images/sub/navArr.png) no-repeat center/cover; position: absolute; top: 50%; transform: translateY(-50%); right: 0; transition: all .5s }
.product {display: flex; flex-direction: column; row-gap: 5rem}
.product__cell, .product__thumCell {position: relative}
.product__cell::after, .product__thumCell::after {content: ""; display: block; padding-bottom: 100%; border: .1rem solid #ddd; position: relative; z-index: 1; box-sizing: border-box}
.product__cell img, .product__thumCell img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.product__thums {padding-inline: var(--gap-70); margin-top: var(--gap-30)}
.product__thums .slick-slide {margin-inline: clamp(.2rem, 1.5vw, 1rem)}
.product__thums .slick-current .product__thumCell::after {border-color: var(--mainColor)}
.product__thums .slick-prev, .product__thums .slick-next {width: 2.4rem; height: 3.9rem; top: 50%; transform: translateY(-50%)}
.product__thums .slick-prev {left: 0; background: url(/images/sub/snp/thumLeft.png) no-repeat center/cover}
.product__thums .slick-next {right: 0; background: url(/images/sub/snp/thumRight.png) no-repeat center/cover}
.product__name {color: #111; font-size: clamp(2.7rem, 3.3vw, 3.7rem)}
.product__marks {display: flex; align-items: center; flex-wrap: wrap; gap: 1rem }
.product__tab {display: flex; gap: var(--gap-55); border-bottom: .1rem solid #ddd; margin-bottom: var(--gap-30)}
.product__tabButton {font-size: var(--fs-17); font-weight: 700; color: #777; position: relative; padding-bottom: 1.5rem; margin-bottom: var(--gap-25)}
.product__tabButton.on {color: var(--mainColor)}
.product__tabButton.on::after {content: ""; display: block; width: 100%; height: .3rem; background-color: var(--mainColor); bottom: 0; left: 0; position: absolute }
.product__dots {display: flex; flex-direction: column; row-gap: 1rem; font-size: var(--fs-16); color: #555 }
.product__dots li {position: relative; display: flex; align-items: flex-start; gap: clamp(.5rem, 1vw, 1rem) }
.product__dots li::before { content: ""; display: block; width: .5rem; height: .5rem; background-color: var(--mainColor); border-radius: 100%; flex-shrink: 0; margin-top: .5em}
.product__tableLike {display: flex; flex-direction: column; row-gap: 1.3rem; max-height: 30.6rem; overflow: hidden; transition: max-height .5s}
.product__tableLike.opnedTable {max-height: 100dvh}
.product__dl {display: flex; flex-direction: column; row-gap: .5rem; font-size: var(--fs-16)}
.product__dl dt {font-weight: 600}
.product__dl dd {color: #555}
.product .hidden {display: none}
.product .hidden.show {display: block}
.product .readmore { font-size: var(--fs-16); font-weight: 700; color: var(--mainColor); margin-top: var(--gap-40); display: flex; align-items: center; gap: .7rem; background: none }
.product .readmore::after { content: ""; display: block; width: .9rem; height: .5rem; background: url(/images/sub/snp/morArr.png) no-repeat center/cover }
.product .readmore.closeMore::after {transform: rotate(180deg)}
@media screen and (min-width: 960px) {
	.product {flex-direction: row; justify-content: space-between }
	.product__images {width: 40%; max-width: 53rem }
	.product__dl {flex-direction: row; gap: var(--gap-40)}
	.product__dl dt {width: 19.5rem}
	.product__info {width: 50%}
}
.pageTab {margin-bottom: var(--gap-50); display: flex; gap: -0.1rem; border-bottom: .1rem solid #000 }
.pageTab__cell {width: 33.3333%; max-width: 22.5rem; height: 5.8rem; text-align: center; font-size: var(--fs-18); font-weight: 600; color: #777; border: .1rem solid #ddd; border-bottom: none; position: relative}
.pageTab__cell:not(:last-child) {border-right: none}
.pageTab__cell a {display: flex; align-items: center; justify-content: center; height: 100% }
.pageTab__cell.on {border: .1rem solid #000; border-bottom-color: #fff; color: #000}
.pageTab__cell.on::after {content: ""; display: block; position: absolute; width: 100%; height: .1rem; background-color: #fff; left: 0; bottom: -0.2rem}
.aboutTab{margin-bottom:var(--gap-50);display:flex;gap:-0.1rem;}
.aboutTab__cell{height:5.8rem;text-align:left;font-size:var(--fs-18);font-weight:500;color:#999;border:.1rem solid #ddd;border-bottom:.1rem solid #000;position:relative;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding:1.6rem 1rem 0px; text-align: center; flex: 0 1 33.3%;}
.aboutTab__cell:not(:Second-child){border-right:none}
.aboutTab__cell a{align-items:center;height:100%}
.aboutTab__cell.on{border:.1rem solid #000;border-bottom-color:#fff;color:#000}
.aboutTab__cell.on::after{content:"";display:block;position:absolute;width:100%;height:.1rem;background-color:#fff;left:0;bottom:-0.2rem}
.abouttab__none {border: none; border-bottom: solid 1px #000;height:5.8rem; color:#fff;position:relative;padding:1.6rem 1rem 0px; flex: 0 1 43%;}
.cu_po {cursor:pointer;}
@media screen and (max-width: 768px){
	.aboutTab__cell{flex: 0 1 49%; }
	.abouttab__none {flex: 0 1 2%;}
}
.innerWrap {position: relative}
.infoWrap {position: absolute; width: 100%; top: 0; left: 0; opacity: 0; visibility: hidden}
.infoWrap.show {position: static; opacity: 1; visibility: visible}
.resources {border: .1rem solid #ddd}
.resources__head {display: flex; align-items: center; justify-content: space-between}
.resources__headIcon {width: 2.7rem; height: 2.7rem; background: url(/images/sub/snp/openIcon.png) no-repeat center/cover}
.resources__wrap {padding: clamp(2rem, 3.5vw, 2.5rem) clamp(1.2rem, 3.5vw, 5rem)}
.resources__wrap:not(:last-child) {border-bottom: .1rem solid #ddd}
.resources__wrap.opend .resources__headIcon {background: url(/images/sub/snp/closeIcon.png) no-repeat center/cover}
.resources__wrap.opend .resources__body {margin-top: var(--gap-30)}
.resources__body {height: 0; overflow: hidden; transition: all .5s}
.resources__table {width: 100%; text-align: left; font-size: var(--fs-17) }
.resources__table thead {font-weight: 600; color: #111}
.resources__table thead th {padding-bottom: var(--gap-20)}
.resources__table tbody td {border-block: .1rem solid #ddd; padding-block: var(--gap-20)}
.resources__table tbody td .downIcon {width: 2.2rem}
@media screen and (max-width: 768px) {
	.resources__table {	display: block	}
	.resources__table colgroup {display: none}
	.resources__table thead {display: block; border-bottom: .1rem solid #ddd}
	.resources__table thead tr {display: flex; align-items: center; justify-content: space-between}
	.resources__table thead th:nth-child(2), .resources__table thead th:nth-child(3), .resources__table thead td:nth-child(2), .resources__table thead td:nth-child(3) {display: none}
	.resources__table tbody {display: block}
	.resources__table tbody tr {position: relative; display: flex; flex-wrap: wrap; row-gap: .5rem; width: 100%; border-bottom: .1rem solid #ddd; padding-block: var(--gap-20)}
	.resources__table tbody tr td {border: none; padding: 0}
	.resources__table tbody tr td:first-child {width: calc(100% - 7rem)	}
	.resources__table tbody tr td:nth-child(2), .resources__table tbody tr td:nth-child(3) {width: calc(50% - 3.5rem); text-align: left	}
	.resources__table tbody tr td:last-child {position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 7rem }
}
@media screen and (min-width: 1400px) {
	.resources__head {cursor: pointer}
}
.ohterProjects__list {padding-inline: 4rem}
.ohterProjects__list .slick-slide {margin-inline: clamp(.5rem, 2vw, 1.5rem)}
.ohterProjects__list .slick-prev, .ohterProjects__list .slick-next {display: block; width: 3.5rem; height: 3.5rem; border: .1rem solid #ddd; border-radius: 100%; z-index: 1; top: 35%}
.ohterProjects__list .slick-prev::before, .ohterProjects__list .slick-next::before {content: ""; display: block; width: 1.8rem; height: 1.8rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.ohterProjects__list .slick-prev {left: 0}
.ohterProjects__list .slick-prev::before {background: url(/images/sub/project/prevArr.png) no-repeat center/cover}
.ohterProjects__list .slick-next {right: 0}
.ohterProjects__list .slick-next::before {background: url(/images/sub/project/nextArr.png) no-repeat center/cover}
.ohterProjects__cell {width: 44.6rem; color: #000; flex-shrink: 0}
.ohterProjects__thum {position: relative; margin-bottom: 3rem; border-radius: var(--gap-20); overflow: hidden}
.ohterProjects__thum::after {content: ""; display: block; padding-bottom: 60.5381165919%}
.ohterProjects__thum img {position: absolute; top: 0; left: 0; width: 100%}
.ohterProjects__text1 {font-size: 2.7rem; margin-bottom: 1.5rem; line-height: 1}
.ohterProjects__text2 {font-size: 1.9rem}
@media screen and (min-width: 960px) {
	.ohterProjects__list {	padding-inline: 0}
	.ohterProjects__list .slick-prev, .ohterProjects__list .slick-next {width: 5.7rem; height: 5.7rem}
	.ohterProjects__list .slick-prev:hover, .ohterProjects__list .slick-next:hover {background-color: var(--mainColor)}
	.ohterProjects__list .slick-prev {left: -6.5rem}
	.ohterProjects__list .slick-prev:hover::before {background: url(/images/sub/project/prevArr_on.png) no-repeat center/cover}
	.ohterProjects__list .slick-next {right: -6.5rem}
	.ohterProjects__list .slick-next:hover::before {background: url(/images/sub/project/nextArr_on.png) no-repeat center/cover}
	.ohterProjects__cell:hover .ohterProjects__thum {box-shadow: 9px 9px 17px 3px rgba(0, 0, 0, .31)}
}
.projectTab {display: flex; -moz-column-gap: .4rem; column-gap: .4rem; row-gap: 1rem; flex-wrap: wrap }
.projectTab__cell {width: 48.5%; color: #111; border-radius: 50vmax; border: .1rem solid #ddd; font-size: var(--fs-18); height: 5.3rem;}
.projectTab__cell a {height: 100%; display: flex; align-items: center; justify-content: center}
.projectTab__cell.on {background-color: var(--mainColor); color: #fff}
@media screen and (min-width: 768px) {
	.projectTab__cell {width: 32.8% }
}
@media screen and (min-width: 1400px) {
	.projectTab {flex-wrap: nowrap}
	.projectTab__cell {width: 14.2857142857%; max-width: 19.6rem}
}
.projects {display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: clamp(1rem, 2.8vw, 3rem); column-gap: clamp(1rem, 2.8vw, 3rem); row-gap: var(--gap-70) }
.projects__thum {overflow: hidden; position: relative; border-radius: var(--gap-20); margin-bottom: var(--gap-35)}
.projects__thum::after {content: ""; display: block; padding-bottom: 60.5381165919%}
.projects__thum img {position: absolute; top: 0; left: 0; width: 100%}
.projects__name {font-size: var(--fs-23); color: #000; margin-bottom: var(--gap-20); line-height: 1.2}
.projects__dec {font-size: var(--fs-18); font-weight: 300; color: #000}
@media screen and (min-width: 960px) {
	.projects {grid-template-columns: repeat(3, 1fr)}
	.projects__thum {transition: box-shadow .5s}
	.projects__thum img {transition: transform .5s}
	.projects__cell:hover .projects__thum {box-shadow: 9px 9px 14px 2px rgba(0, 0, 0, .29)}
	.projects__cell:hover .projects__thum img {transform: scale(1.1)}
}
.inoutline {height: 50rem; display: flex; align-items: center; justify-content: center; color: #111}
.inoutline__box {width: 100%; max-width: 69.5rem; background-color: hsla(0, 0%, 100%, .5); -webkit-backdrop-filter: blur(1.3rem); backdrop-filter: blur(1.3rem); border-radius: var(--gap-30); padding: var(--gap-75) clamp(0.5rem, 3.2vw, 4rem)}
.inoutline__underline {border-bottom: .1rem solid #111}
.inoutline__list {display: flex; flex-direction: column; row-gap: 0rem}
@media screen and (min-width: 768px) {
	.inoutline__list {row-gap: 1.5rem}
	.inoutline__dl {display: flex; flex-direction: flex-start; gap: 2rem}
	.inoutline__dl dt {width: 11rem}
	.inoutline__dl dd {width: 48rem}
}
@media screen and (min-width: 960px) {
	.inoutline {height: 88rem}
}
.projectImages {display: flex; flex-direction: column; gap: 1rem}
.projectImages__box {overflow: hidden; border-radius: var(--gap-20); position: relative }
.projectImages__box::after {content: ""; display: block; padding-bottom: 60.4316546763%}
.projectImages__box img {position: absolute; top: 0; left: 0; width: 100%}
.aboutImages{display:flex;flex-direction:column;gap:1rem}
.aboutImages__box{overflow:hidden;border-radius:var(--gap-20);position:relative}
.aboutImages__box::after{content:"";display:block;padding-bottom:64.4316546763%}
.aboutImages__box img{position:absolute;top:0;left:0;width:100%}
.aboutImages2{display:flex;flex-direction:column;gap:1rem; margin-top:1rem; }
.aboutImages2__box{overflow:hidden;border-radius:var(--gap-0);position:relative}
.aboutImages2__box::after{content:"";display:block;padding-bottom:56.3316546763%}
.aboutImages2__box img{position:absolute;top:0;left:0;width:100%}
.aboutImages2g{display:flex;flex-direction:column;gap:0rem; margin-top:0rem; }
.aboutImages2g__box{overflow:hidden;border-radius:var(--gap-0);position:relative}
.aboutImages2g__box::after{content:"";display:block;padding-bottom:56.3316546763%}
.aboutImages2g__box img{position:absolute;top:0;left:0;width:100%}
.abcImages{display:flex;flex-direction:column;gap:1rem}
.abcImages__box{overflow:hidden;border-radius:var(--gap-20);position:relative;border:.1rem solid #ddd;}
.abcImages__box::after{content:"";display:block;padding-bottom:140%}
.abcImages__box img{position:absolute;top:0;left:0;width:100%}
@media screen and (min-width: 960px) {
	.projectImages {flex-direction: row; justify-content: space-between}
	.projectImages__box {width: 49.7%}
	.aboutImages{flex-direction:row;justify-content:space-between}
	.aboutImages__box{width:49.7%}
	.aboutImages2{flex-direction:row;justify-content:space-between}
	.aboutImages2__box{width:49.7%}
	.aboutImages2g{flex-direction:row;justify-content:space-between}
	.aboutImages2g__box{width:50%}
	.abcImages{flex-direction:row;justify-content:space-between}
	.abcImages__box{width:49.7%}
}
.Img_rd {overflow:hidden;border-radius:var(--gap-20);position:relative}
.bigImage {overflow: hidden; border-radius: var(--gap-20); position: relative}
.bigImage::after {content: ""; display: block; padding-bottom: 52%}
.bigImage img {position: absolute; top: 0; left: 0; width: 100% }
	
.abigImage{overflow:hidden;border-radius:var(--gap-20);position:relative}
.abigImage::after{content:"";display:block;padding-bottom:56%}
.abigImage .imgt{position:absolute;top:0;left:0;width:100%}
.abigImage .imgt2{position:absolute;top:-10rem;left:0;width:100%}
.abigImage .imgb{position:absolute;bottom:-8rem;left:0;width:100%}
	
.oherProducts {position: relative; padding-bottom: var(--gap-100)}
.oherProducts::after {content: ""; display: block; width: 100vw; height: 29.5rem; background-color: #f5f5f5; position: absolute; left: 50%; transform: translateX(-50%); z-index: 0; bottom: 0}
.oherProducts__list {display: flex; flex-wrap: wrap; -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 4rem; position: relative; z-index: 1 }
.oherProducts__cell {width: calc(50% - .5rem) }
.oherProducts__thum {width: 100%; position: relative; border-radius: var(--gap-20); overflow: hidden; background-color: #fff; margin-bottom: clamp(.5rem, 2.5vw, 3rem); border: .1rem solid #ddd; box-sizing: content-box }
.oherProducts__thum::after {content: ""; display: block; padding-bottom: 100%}
.oherProducts__thum img {position: absolute; top: 0; left: 0; width: 100%}
.oherProducts__name {font-size: var(--fs-20); font-weight: 600; color: #111}
@media screen and (min-width: 768px) {
	.oherProducts__cell {width: calc(33.33333333% - .7rem)}
}
@media screen and (min-width: 960px) {
	.oherProducts__cell {width: calc(20% - .8rem)}
	.oherProducts__cell:hover .oherProducts__thum {border-color: var(--mainColor); 	box-shadow: 9px 9px 17px 3px rgba(0, 0, 0, .31)	}
}
.related__slide {padding-inline: 4rem}
.related__slide .slick-slide {margin-inline: clamp(.5rem, 2vw, 1.5rem)}
.related__slide .slick-prev, .related__slide .slick-next {display: block; width: 3.5rem; height: 3.5rem; border: .1rem solid #ddd; border-radius: 100%; z-index: 1; top: 35% }
.related__slide .slick-prev::before, .related__slide .slick-next::before {content: ""; display: block; width: 1.8rem; height: 1.8rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.related__slide .slick-prev {left: 0}
.related__slide .slick-prev::before {background: url(/images/sub/project/prevArr.png) no-repeat center/cover}
.related__slide .slick-next {right: 0}
.related__slide .slick-next::before {background: url(/images/sub/project/nextArr.png) no-repeat center/cover}
.related__thum {position: relative; margin-bottom: var(--gap-30); border-radius: var(--gap-20); overflow: hidden }
.related__thum::after {content: ""; display: block; padding-bottom: 60.5381165919%}
.related__thum img {position: absolute; top: 0; left: 0; width: 100%}
.related__text1 {font-size: var(--fs-27); margin-bottom: 1.5rem; line-height: 1 }
.related__text2 {font-size: var(--fs-18)}
@media screen and (min-width: 960px) {
	.related__slide {padding-inline: 0	}
	.related__slide .slick-prev, .related__slide .slick-next {width: 5.7rem; height: 5.7rem }
	.related__slide .slick-prev:hover, .related__slide .slick-next:hover {background-color: var(--mainColor)}
	.related__slide .slick-prev {left: -6.5rem}
	.related__slide .slick-prev:hover::before {background: url(/images/sub/project/prevArr_on.png) no-repeat center/cover	}
	.related__slide .slick-next {right: -6.5rem	}
	.related__slide .slick-next:hover::before {background: url(/images/sub/project/nextArr_on.png) no-repeat center/cover	}
	.related__cell:hover .related__thum {box-shadow: 9px 9px 17px 3px rgba(0, 0, 0, .31)}
}
.downloadButton {display: flex; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; max-width: 32rem; height: 5rem; background-color: #000; border-radius: 50vmax; color: #fff; font-weight: 600; font-size: var(--fs-20) }
.downloadButton::after {content: ""; display: block; width: 2.4rem; height: 2rem; background: url(/images/sub/project/download.png) no-repeat center/cover}
.prav__text { white-space: pre-line; font-size: var(--fs-18)}
/* ========================================================================
   기술 탭 (techTab) - Technical Field / Award / New Product History
   ======================================================================== */
.techTab {display: flex; flex-wrap: nowrap; gap: .6rem}
.techTab__item {flex: 1; min-width: 0; border: .1rem solid #ddd; border-radius: 1rem; overflow: hidden; transition: all .3s}
.techTab__item a {display: block; height: 6.5rem; line-height: 6.5rem; padding-inline: 1.0rem; font-size: var(--fs-18); font-weight: 700; color: #333; text-align: center; transition: color .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.techTab__item.active {background-color: var(--mainColor); border-color: var(--mainColor)}
.techTab__item.active a {color: #fff}
.techTab__item:not(.active):hover {background-color: #5ea5db; border-color: #5ea5db}
.techTab__item:not(.active):hover a {color: #fff}

/* ========================================================================
   수상 연혁 리스트 (awardList)
   ======================================================================== */
.awardList__row {display: flex; flex-direction: column; row-gap: 1rem; padding-block: var(--gap-30); border-bottom: .1rem solid #eee}
.awardList__year {font-size: var(--fs-32); font-weight: 800; color: #111}
.awardList__items {display: flex; flex-direction: column; row-gap: 1rem}
.awardList__item {display: flex; align-items: flex-start; column-gap: 1.5rem}
.awardList__month {flex-shrink: 0; width: 3rem; font-weight: 500; font-size: var(--fs-18); color: #666}
.awardList__desc {font-size: var(--fs-18);font-weight: 400; color: #333; line-height: 1.5}

@media screen and (min-width: 768px) {
	.awardList__row {flex-direction: row; align-items: flex-start; column-gap: var(--gap-80)}
	.awardList__year {flex-shrink: 0; width: 16rem}
}

/* ========================================================================
   기술/제품 마일스톤 (milestone) - 세로 지그재그 타임라인, 세대(2G~5G)별 구간
   ======================================================================== */
.milestone__list {position: relative; width: 95%; max-width: 140rem; margin-inline: auto; padding-block: var(--gap-60); background-color: #f7f9fc}
.milestone__list::before {content: ""; position: absolute; left: 2rem; top: 0; bottom: 0; width: .2rem; background-image: repeating-linear-gradient(to bottom, var(--mainColor) 0, var(--mainColor) .8rem, transparent .8rem, transparent 1.6rem)}

.milestone__group {position: relative; padding-block: 2.5rem; padding-left: 5rem}
.milestone__group span {display: inline-block; padding: .8rem 2.5rem; border-radius: 50vmax; background-color: var(--mainColor); color: #fff; font-size: clamp(1.8rem, 2.5vw, 2.6rem); font-weight: 800}

.milestone__row {position: relative; padding-left: 5rem; padding-block: 1.6rem}
.milestone__dot {position: absolute; left: 2rem; top: 2.2rem; transform: translateX(-50%); width: 1.4rem; height: 1.4rem; border-radius: 50%; background-color: var(--mainColor); border: .3rem solid #f7f9fc; box-shadow: 0 0 0 .2rem var(--mainColor); z-index: 1}
.milestone__year {font-size: var(--fs-20); font-weight: 800; color: #111; margin-bottom: .8rem}
.milestone__card {display: flex; align-items: center; gap: 1.5rem; background-color: #fff; border-radius: 1.2rem; padding: 1.5rem 2rem; box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.07)}
.milestone__thumb {flex-shrink: 0; width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; background-color: #f2f4f8; border-radius: .8rem; overflow: hidden}
.milestone__thumb img {max-width: 80%; max-height: 80%; -o-object-fit: contain; object-fit: contain}
.milestone__name {font-size: var(--fs-17); font-weight: 700; color: #111; line-height: 1.35}

@media screen and (min-width: 768px) {
	.milestone__list::before {left: 50%; transform: translateX(-50%)}
	.milestone__group {text-align: center; padding-left: 0}
	.milestone__row {display: flex; padding-left: 0; padding-block: 2.4rem; align-items: center}
	.milestone__dot {left: 50%; top: 50%; transform: translate(-50%, -50%)}
	.milestone__year {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -1.5rem); margin-bottom: 0; white-space: nowrap}
	.milestone__card {width: calc(50% - 4rem)}
	.milestone__row--left .milestone__card {margin-right: auto; flex-direction: row-reverse; text-align: right}
	.milestone__row--right .milestone__card {margin-left: auto}
}

/* ========================================================================
   제품 히스토리 이미지 (pro_history) - 1400px 기준, 그 이하는 비율 유지 축소
   ======================================================================== */
.pro_history {padding-block: var(--gap-60)}
.pro_history__list {width: 95%; max-width: 140rem; margin-inline: auto}
.pro_history__list img {display: block; width: 100%; height: auto}

/* 제품 히스토리 PC/모바일 이미지 교체
   (.pro_history__list img가 전역 display:block이라 우선순위 때문에
    pcOnly/mobileOnly 토글이 안 먹어서, 여기서 우선순위를 한 단계 더 줌) */
.pro_history__list .coreValues__img.pcOnly {display: block}
.pro_history__list .coreValues__img.mobileOnly {display: none}

@media screen and (max-width: 768px) {
    .pro_history__list .coreValues__img.pcOnly {display: none}
    .pro_history__list .coreValues__img.mobileOnly {display: block}
}

/* ========================================================================
   Technical Field - 카드 4개(전체가 이미지), 호버 시 아이콘 슬라이드업
   (irpr_over와 별개로 독립 관리 - 위치/아이콘 자유롭게 수정 가능)
   ========================================================== */
.techField_over {position: relative; overflow: hidden}
.techField_over::after {content: ""; display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; background: url(/images/sub/botplus.png) no-repeat center/cover; position: absolute; right: 5%; bottom: 6%; transform: translateY(10rem); transition: transform .5s}
.techField_over:hover::after {transform: translateY(0)}

.techField__list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem}
.techField__box {display: block}
.techField__thumb {aspect-ratio: 338 / 475; border-radius: 0rem; overflow: hidden}
.techField__thumb img {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block}
.techField__caption {margin-top: 1.5rem; text-align: center; font-size: var(--fs-18); color: #333}

@media screen and (min-width: 960px) {
	.techField__list {grid-template-columns: repeat(4, 1fr)}
}

/* ========================================================================
   제품 리스트 (prodList) - 썸네일 + 이름 + 특징 불릿, 3열/2열
   ======================================================================== */
.prodList__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem}
.prodList__cell {border: .1rem solid #c5c5c5; border-radius: 1.2rem; padding: 2.5rem; transition: all .3s}
.prodList__cell:hover {border-color: var(--mainColor); box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.08)}
.prodList__cell a {display: block}
.prodList__thumb {display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 2rem}
.prodList__thumb img {max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain}
.prodList__name {font-size: var(--fs-20); font-weight: 700; color: #111; text-align: center; margin-bottom: 1.5rem; line-height: 1.4; min-height: 2.8em; display: flex; align-items: center; justify-content: center}
.prodList__cell + .prodList__features {margin-top: 1.5rem}
.prodList__features {display: flex; flex-direction: column; row-gap: .8rem}
.prodList__features li {position: relative; padding-left: 1.2rem; font-size: var(--fs-15); color: #666; line-height: 1.5}
.prodList__features li::before {content: ""; position: absolute; left: 0; top: .7rem; width: .5rem; height: .5rem; border-radius: 50%; background-color: #ccc}
.prodField_over {position: relative; overflow: hidden}
.prodField_over::after {content: ""; display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; background: url(/images/sub/botplus.png) no-repeat center/cover; position: absolute; right: 1%; top: 1%; transform: translateY(-6rem); transition: transform .5s}
.prodField_over:hover::after {transform: translateY(0)}

@media screen and (max-width: 768px) {
    .prodList__cell {padding: 1rem;}
}
@media screen and (min-width: 960px) {
	.prodList__grid {grid-template-columns: repeat(3, 1fr); gap: 2.5rem}
}

/* ========================================================================
   페이지네이션 (pager) - 둥근 버튼, 첫/이전/숫자/다음/끝
   ======================================================================== */
.pager {display: flex; align-items: center; justify-content: center; column-gap: 0.4rem; margin-top: var(--gap-60); margin-bottom:  var(--gap-20);}
.pager__item a {display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; border: solid 0px #ddd; font-size: var(--fs-17); font-weight: 700; color: #555; transition: all .3s}
.pager__item--current a {background-color:  var(--mainColor); color: #fff}
.pager__item--first a, .pager__item--prev a, .pager__item--next a, .pager__item--last a {text-indent: -99999rem; overflow: hidden}
.pager__item--first a {background-image: url(/images/sub/imo/first02.png); background-repeat: no-repeat; background-position: center; background-size: 1.5rem;  border: solid 1px #e9e9e9; background-color: #f7f7f7}
.pager__item--prev a {background-image: url(/images/sub/imo/prev02.png); background-repeat: no-repeat; background-position: center; background-size: 1.5rem;  border: solid 1px #e9e9e9; background-color: #f7f7f7}
.pager__item--next a {background-image: url(/images/sub/imo/next02.png); background-repeat: no-repeat; background-position: center; background-size: 1.5rem;  border: solid 1px #e9e9e9; background-color: #f7f7f7}
.pager__item--last a {background-image: url(/images/sub/imo/last02.png); background-repeat: no-repeat; background-position: center; background-size: 1.5rem;  border: solid 1px #e9e9e9; background-color: #f7f7f7}

@media screen and (max-width: 768px) {
	.pager {column-gap: .6rem}
	.pager__item a {font-size: var(--fs-15); width: 3rem; height: 3rem}
    .pager__item--first a {background-size: 1rem;}
    .pager__item--prev a {background-size: 1rem;}
    .pager__item--next a {background-size: 1rem;}
    .pager__item--last a {background-size: 1rem;}
}
@media screen and (max-width: 480px) {
	.pager {column-gap: .6rem}
	.pager__item a {font-size: var(--fs-14); width: 2rem; height: 2rem}
    .pager__item--first a {background-size: 0.8rem;}
    .pager__item--prev a {background-size: 0.8rem;}
    .pager__item--next a {background-size: 0.8rem;}
    .pager__item--last a {background-size: 0.8rem;}
}
/* ========================================================================
   게시판형 탭 (techTab--board) - 같은 페이지 내 콘텐츠 전환용, techTab 확장
   [정리 후보] 게시판형 탭이 전부 "페이지 이동형(.techTab)"으로 최종 확정되면서
   실제로 이 modifier 클래스(.techTab--board)를 쓰는 마크업이 없음(전수 검색 결과 0건).
   disclosure.php/ir_press.php의 .boardTabPanel 래퍼도 마찬가지로 대응 CSS가 없는 상태.
   당장 화면에 영향은 없으나(죽은 CSS), 최종 정리 시 삭제 검토 권장.
   ======================================================================== */
.techTab--board {flex-wrap: wrap}
.techTab--board .techTab__item {flex: none; min-width: 15rem}
.techTab--board .techTab__item a {padding-inline: 2.5rem}

@media screen and (max-width: 768px) {
	.techTab--board .techTab__item {flex: 1 1 auto; min-width: calc(50% - .6rem)}
}

/* ========================================================================
   게시판 리스트 테이블 (boardList) - NO / TITLE / HIT / DATE
   ======================================================================== */
.boardList {width: 100%; border-collapse: collapse; table-layout: fixed; border-top: .2rem solid #222}
.boardList thead th {padding-block: 1.8rem; border-bottom: .1rem solid #ddd; font-size: var(--fs-18); font-weight: 700; color: #222; text-align: center; background-color: #f7f9fc}
.boardList tbody td {padding-block: 1.8rem; padding-inline: 1rem; border-bottom: .1rem solid #eee; font-size: var(--fs-18); color: #444; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.boardList tbody tr {transition: background-color .3s; background-color: #fff}
.boardList tbody tr:nth-child(even) {background-color: ;}
.boardList tbody tr:hover {background-color: #f7f7f7}
.boardList tbody td.boardList__title {text-align: left}
.boardList__title a {display: inline-flex; align-items: center; column-gap: .8rem; color: #333; transition: color .3s}
.boardList tbody tr:hover .boardList__title a {color: var(--mainColor)}
.boardList__file {flex-shrink: 0; display: inline-block; width: 1.4rem; height: 1.6rem; background: url(/images/sub/imo/imo_data28.png) no-repeat center/contain; text-indent: -99999rem; overflow: hidden}
.boardList__no,
.boardList__hit,
.boardList__date {color: #888}
/*다트 API 게시판----*/
.boardList__submission {color: #888}

@media screen and (max-width: 768px) {
	.boardList colgroup {display: none}
	.boardList thead {display: none}
	.boardList tbody tr {display: flex; flex-wrap: wrap; padding-block: 1.6rem; border-bottom: .1rem solid #eee}
	.boardList tbody td {display: block; padding: 0; border-bottom: 0; text-align: left; white-space: normal}
	.boardList tbody td.boardList__title {text-align: left}
	.boardList__no {order: 1; width: 100%; font-size: var(--fs-14); color: #aaa; margin-bottom: .6rem}
	.boardList__title {order: 2; width: 100%; font-size: var(--fs-15); font-weight: 600; margin-bottom: .8rem}
	.boardList__hit {order: 3; font-size: var(--fs-14)}
	.boardList__hit::before {content: "Hit "; color: #aaa}
	.boardList__date {order: 4; margin-left: auto; font-size: var(--fs-14)}
    /*다트 API 게시판----*/
	.boardList__submission {order: 3; font-size: var(--fs-14)}
	.boardList__submission::before {content: "Submission "; color: #aaa}
}
/* ========================================================================
   게시판 상세보기 (boardView) - 제목/날짜/첨부파일/본문/이전다음글/목록버튼
   ======================================================================== */
.boardView__title {font-size: var(--fs-32); font-weight: 700; color: #222; padding-bottom: 2rem; border-bottom: .2rem solid #222}
.boardView__meta {display: flex; align-items: center; column-gap: 1.5rem; padding-block: 1.6rem; border-bottom: .1rem solid #eee; font-size: var(--fs-18)}
.boardView__metaLabel {color: #888}
.boardView__metaValue {color: #444}

.boardView__files {padding-block: .5rem; border-bottom: .1rem solid #eee}
.boardView__file {padding-block: 0.2rem}
.boardView__file a {display: inline-flex; align-items: center; column-gap: 1rem; font-size: var(--fs-18); color: #666; transition: color .3s}
.boardView__file a::before {content: ""; flex-shrink: 0; display: inline-block; width: 3rem; height: 2.2em; background: url(/images/sub/imo/imo_folder.png) no-repeat center/contain}
.boardView__file a:hover {color: var(--mainColor)}

.boardView__content {padding-block: var(--gap-50); font-size: var(--fs-18); color: #333; line-height: 1.8}

/* PR NEWS 갤러리게시판 대응 */
.boardView__content p + p {margin-top: 1.6rem}
.boardView__thumb {margin-bottom: var(--gap-40); overflow: hidden; text-align: left}
.boardView__thumb > img {display: inline-block !important; width: auto; max-width: 100%; height: auto; margin-inline: 0}
.boardView__downloadBtn {display: inline-flex; align-items: center; margin-top: var(--gap-80); padding: 0.3rem 3rem; border-radius: 10vmax; background: linear-gradient(90deg, var(--mainColor), #427fe5); font-size: var(--fs-12); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: #fff; transition: opacity .3s}
.boardView__downloadBtn:hover {opacity: .85}
.boardView__downloadLink {display: block; margin-top: 1.2rem; font-size: var(--fs-16); color: #333; text-decoration: underline; text-underline-offset: .3rem; word-break: break-all}
.boardView__downloadLink:hover {color: var(--mainColor)}
/* //PR NEWS 갤러리게시판 대응 */

.boardView__nav {border-top: .1rem solid #eee}
.boardView__navItem {display: flex; align-items: center; column-gap: 1.5rem; padding-block: 1.6rem; border-bottom: .1rem solid #eee; transition: color .3s}
.boardView__navLabel {flex-shrink: 0; width: 7rem; display: flex; align-items: center; column-gap: 1rem; font-size: var(--fs-18); font-weight: 300; color: #525252}
.boardView__navLabel {flex-shrink: 0; width: 7rem; display: flex; align-items: center; column-gap: 1rem; font-size: var(--fs-18); font-weight: 300; color: #525252}
.boardView__navLabel::before {content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; background-repeat: no-repeat; background-position: center; background-size: contain}
.boardView__navItem--prev .boardView__navLabel::before {background-image: url(/images/sub/imo/board_prev.png)}
.boardView__navItem--next .boardView__navLabel::before {background-image: url(/images/sub/imo/board_next.png)}
.boardView__navTitle {font-size: var(--fs-18); font-weight: 600; color: #333}
.boardView__navItem:hover .boardView__navTitle {color: var(--mainColor)}

.boardView__listBtnWrap {display: flex; justify-content: center; margin-top: var(--gap-50)}
.boardView__listBtn {display: inline-flex; align-items: center; justify-content: center; min-width: 18rem; height: 5.5rem; border-radius: 50vmax; background-color: #444; color: #fff; font-size: var(--fs-18); font-weight: 700; letter-spacing: .05em; transition: background-color .3s}
.boardView__listBtn:hover {background-color: var(--mainColor)}

@media screen and (max-width: 768px) {
	.boardView__title {font-size: var(--fs-24)}
    .boardView__file a::before {width: 1.8rem; height: 1.6rem;}
	.boardView__navItem {flex-wrap: wrap; row-gap: .6rem}
	.boardView__navTitle {width: 100%; padding-left: 0}
}
/* ========================================================================
   재무제표 테이블 (finTable) - 재무상태표(rowspan 그룹) / 손익계산서
   ======================================================================== */
.finTable__head {display: flex; align-items: flex-end; justify-content: space-between; column-gap: 1.5rem; flex-wrap: wrap; row-gap: .8rem; margin-bottom: 2rem}
.finTable__title {font-size: var(--fs-24); font-weight: 700; color: #222}
.finTable__unit {font-size: var(--fs-16); color: #888}

.finTable__wrap {overflow-x: auto}
.finTable {width: 100%; min-width: 60rem; border-collapse: collapse; border-top: .2rem solid #222}
.finTable th,
.finTable td {padding-block: 1.6rem; padding-inline: 1.5rem; border-bottom: .1rem solid #e6e6e6; border-left: .1rem solid #e6e6e6; font-size: var(--fs-18)}
.finTable thead th:first-child {border-left: 0}
.finTable thead th {background-color: #f7f9fc; font-weight: 700; color: #222; text-align: center}
.finTable tbody th {font-weight: 400; color: #444; text-align: left}
.finTable tbody th[scope="rowgroup"] {border-left: 0; font-weight: 700; color: #222; text-align: center; vertical-align: middle; background-color: #fff}
.finTable--simple tbody th {border-left: 0}
.finTable__num {text-align: right; color: #555; font-variant-numeric: tabular-nums}
.finTable__strong th,
.finTable__strong td {font-weight: 700; color: #222}

.finTable--simple thead th:first-child {background-color: #f7f9fc}

@media screen and (max-width: 768px) {
	.finTable__title {font-size: var(--fs-20)}
	.finTable th,
	.finTable td {padding-block: 1.2rem; padding-inline: 1rem; font-size: var(--fs-14)}
}
/* ========================================================================
   이미지형 게시판 리스트 (prNewsList) - 썸네일 + 제목(2줄) + 날짜, 3열 그리드
   ======================================================================== */
.prNewsList {display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem 2.4rem}
.prNewsList__link {display: block}
.prNewsList__thumb {position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: .8rem; background-color: #f2f3f5}
.prNewsList__thumb img {width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; display: block; transition: transform .4s}
.prNewsList__link:hover .prNewsList__thumb img {transform: scale(1.05)}
.prNewsList__thumb--empty {display: flex; align-items: center; justify-content: center; background: url(/images/sub/relations/kmw_bg.png) no-repeat center/cover #e7e7e7;background-size: 80% auto; }
.prNewsList__title {margin-top: 1.6rem; font-size: var(--fs-18); font-weight: 600; color: #464646; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .3s}
.prNewsList__link:hover .prNewsList__title {color: #000}
.prNewsList__date {display: block; margin-top: .8rem; font-size: var(--fs-15); color: #999}

@media screen and (max-width: 960px) {
	.prNewsList {grid-template-columns: repeat(2, 1fr); gap: 3rem 1.6rem}
}
@media screen and (max-width: 480px) {
	.prNewsList {grid-template-columns: 1fr; gap: 2.4rem}
}

/* 동영상 썸네일 - 플랫폼 구분 없이 통일된 재생 아이콘 오버레이 */
.prNewsList__thumb--video::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5.6rem; height: 5.6rem; background: url(/images/sub/imo/icon_play.png) no-repeat center/contain; pointer-events: none}

@media screen and (max-width: 768px) {
	.prNewsList__thumb--video::after {width: 4rem; height: 4rem}
}
/* ========================================================================
   동영상 상세보기 (videoView) - iframe 바로 출력
   ======================================================================== */
.videoView__player {position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: #000}
.videoView__player iframe {width: 100%; height: 100%; display: block; border: 0}

.videoView__title {margin-top: var(--gap-40); font-size: var(--fs-28); font-weight: 700; color: #222}
.videoView__desc {margin-top: 1.2rem; font-size: var(--fs-18); color: #666; line-height: 1.7}

@media screen and (max-width: 768px) {
	.videoView__title {font-size: var(--fs-22)}
}
/* ========================================================================
   FAQ 아코디언 (faqList)
   ======================================================================== */
.faqList {border-top: .2rem solid #222}
.faqList__item {border-bottom: .1rem solid #d7d7d7}

.faqList__question {display: flex; align-items: center; width: 100%; column-gap: 1.4rem; padding-block: 2.4rem; background: none; border: 0; text-align: left; cursor: pointer}
.faqList__q {flex-shrink: 0; font-size: var(--fs-24); font-weight: 700; color: var(--mainColor)}
.faqList__qText {flex: 1 1 auto; font-size: var(--fs-20); color: #333; font-weight: 300;}

.faqList__toggle {flex-shrink: 0; width: 5rem; height: 5rem; border: .1rem solid #ddd; border-radius: 50%; position: relative}
.faqList__toggle::before {content: ""; position: absolute; top: 50%; left: 50%; width: .8rem; height: .8rem; border-right: .2rem solid #999; border-bottom: .2rem solid #999; transform: translate(-65%, -50%) rotate(-45deg); transition: transform .3s}
.faqList__item.active .faqList__toggle::before {transform: translate(-50%, -65%) rotate(45deg)}

.faqList__answer {overflow: hidden; max-height: 0; background-color: #fafafa; transition: max-height .35s ease;}
.faqList__item.active .faqList__answer {grid-template-rows: 1fr; border-top: .1rem solid #d7d7d7}
.faqList__answerInner {display: flex; column-gap: 1.4rem; padding: 2rem 2.4rem}
.faqList__a {flex-shrink: 0; font-size: var(--fs-24); font-weight: 700; color: #bbb; padding: 1.4rem 0rem}
.faqList__aText {flex: 1 1 auto; font-size: var(--fs-20); color: #555; line-height: 1.8; font-weight: 300; padding: 1.4rem 0rem}

@media screen and (max-width: 768px) {
	.faqList__question {column-gap: 1rem; padding-block: 1.8rem}
	.faqList__qText {font-size: var(--fs-15)}
	.faqList__toggle {width: 2.6rem; height: 2.6rem}
	.faqList__answerInner {padding: 1.6rem}
	.faqList__aText {font-size: var(--fs-14)}
}
/* ========================================================================
   About us 4개 탭 (techTab--quad) - 페이지 이동형, 모바일 2줄 wrap
   ======================================================================== */
.techTab--quad {flex-wrap: wrap}

@media screen and (max-width: 768px) {
	.techTab--quad .techTab__item {flex: 1 1 auto; min-width: calc(50% - .3rem)}
}

/* ========================================================================
   4열 시작 갤러리 (prNewsList--quad) - 기존 3열 prNewsList와 별개, 최소 2열 유지
   ======================================================================== */
.prNewsList--quad {grid-template-columns: repeat(4, 1fr)}

@media screen and (max-width: 768px) {
	.prNewsList--quad {grid-template-columns: repeat(2, 1fr)}
}
@media screen and (max-width: 480px) {
	.prNewsList--quad {grid-template-columns: repeat(2, 1fr); gap: 2rem 1.2rem}
}
/* ========================================================================
   제품 상세페이지 전용 비주얼 (productVisual)
   .subVisual과 완전히 분리된 독립 컴포넌트 - 높이/여백 자유롭게 조절 가능
   ======================================================================== */
.productVisual {background-color: #fff; padding-block: 2.4rem 1.6rem}
.productVisual__center {width: 95%; max-width: 140rem; margin-inline: auto}
.productVisual__text {color: #000}

@media screen and (min-width: 960px) {
	.productVisual {margin-top: var(--headerHeight); padding-block: 3.2rem 2rem}
}
/* ========================================================================
   제품 상세 상단 (productView) - 이미지 + 정보
   ======================================================================== */
.productView__top {display: grid; grid-template-columns: 53.2rem 1fr; column-gap: 14rem}
.productView__thumb {display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: .1rem solid #d4d4d4; padding: 0rem; box-sizing: border-box}
.productView__thumb img {max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain}

.productView__category {font-size: var(--fs-20); color: #999}
.productView__title {margin-top: .6rem; font-size: var(--fs-32); font-weight: 700; color: #222}

.productView__featuresTitle {margin-top: var(--gap-40); font-size: var(--fs-20); font-weight: 700; color: #222}
.productView__freq {margin-top: 1rem; font-size: var(--fs-18); color: #000; font-weight: 300;}

.productView__featureList {margin-top: 1.6rem}
.productView__featureList li {position: relative; padding-left: 1.4rem; font-weight: 400; font-size: var(--fs-18); color: #444; line-height: 1.7}
.productView__featureList li + li {margin-top: .4rem}
.productView__featureList li::before {content: ""; position: absolute; top: 1rem; left: 0; width: .5rem; height: .5rem; border-radius: 50%; background-color: #999}

.productView__downloadBtn {display: inline-flex; align-items: center; column-gap: 1rem; margin-top: var(--gap-40); padding: 1.4rem 4.5rem; border-radius: 50vmax; background-color: #333; color: #fff; font-size: var(--fs-18); font-weight: 700; transition: background-color .3s}
.productView__downloadBtn:hover {background-color: var(--mainColor)}
.productView__downloadBadge {display: inline-flex; align-items: center; justify-content: center; padding: .3rem .8rem; border-radius: .3rem; background-color: #fff; color: #555; font-size: var(--fs-12); font-weight: 700; letter-spacing: .03em}

@media screen and (max-width: 960px) {
	.productView__top {grid-template-columns: 1fr; row-gap: 3rem}
	.productView__thumb {max-width: 53.2rem; margin-inline: auto}
}

/* ========================================================================
   제품 스펙 테이블 (specTable) - 파란색 라벨 셀, rowspan/colspan 구조
   ======================================================================== */
.specTable__title {font-size: var(--fs-24); font-weight: 700; color: #222; margin-bottom: 2rem}
.specTable__wrap {overflow-x: auto}
.specTable {width: 100%; min-width: 70rem; border-collapse: collapse}
.specTable th,
.specTable td {padding: 1.4rem 1.8rem; border: .1rem solid #cfe0ee; font-size: var(--fs-18); text-align: center}
.specTable th {background-color: var(--mainColor); color: #fff; font-weight: 400}
.specTable td {background-color: #fff; color: #333}
.specTable__multiline {text-align: left; line-height: 1.8}

@media screen and (max-width: 768px) {
	.specTable th,
	.specTable td {padding: 1rem 1.2rem; font-size: var(--fs-15)}
}
/* ========================================================================
   윤리경영 (ethic.php)
   ======================================================================== */
.ethicSection {display: flex; flex-direction: column; row-gap: var(--gap-70)}

/* 핵심가치 이미지 (coreValues) - PC/모바일 이미지 반응형 교체, pcOnly/mobileOnly는 foundation.css 유틸리티 사용 */
.coreValues__img {width: 100%}

/* 윤리강령 다운로드 버튼 (pdfDownloadBtn) */
.pdfDownloadWrap {display: flex; justify-content: center}
.pdfDownloadBtn {display: inline-flex; align-items: center; column-gap: 1.2rem; padding: 1.4rem 2.8rem; border-radius: 50vmax; background-color: #222; color: #fff; font-size: var(--fs-16); font-weight: 600; transition: background-color .3s}
.pdfDownloadBtn:hover {background-color: var(--mainColor)}
.pdfDownloadBtn__badge {display: inline-flex; align-items: center; justify-content: center; padding: .3rem .9rem; border-radius: .4rem; background-color: #fff; color: #333; font-size: var(--fs-14); font-weight: 700}

/* 사회책임경영 카드 그리드 (respGrid) */
.respSection__tit {font-size: var(--fs-32); font-weight: 200; color: #141414; margin-bottom: var(--gap-80)}
.respSection__title {font-size: var(--fs-28); font-weight: 700; color: #141414; margin-bottom: var(--gap-30)}
.respSection__title_2 {font-size: var(--fs-28); font-weight: 700; color: #141414; margin-bottom: 0.5rem}
.respSection__title_3 {font-size: var(--fs-20); font-weight: 400; color: #888888; margin-bottom: var(--gap-30)}
.respGrid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem}
.respGrid__card {display: flex; flex-direction: column; justify-content: space-between; border: .1rem solid #e3e3e3; border-radius: var(--gap-20); padding: clamp(2rem, 3vw, 3rem) clamp(1.8rem, 2.6vw, 2.6rem); background-color: #fff}
.respGrid__title {font-size: var(--fs-22); font-weight: 700; color: #141414; margin-bottom: 1.4rem}
.respGrid__list {display: flex; flex-direction: column; row-gap: .6rem}
.respGrid__list li {font-size: var(--fs-18); font-weight: 300; color: #777; line-height: 1.4}
.respGrid__moreBtn {margin-top: var(--gap-30); width: 100%; padding: 1.2rem; border: 0; border-radius: .6rem; background-color: #eaf2fb; color: #1c4a7a; font-size: var(--fs-18); font-weight: 700; cursor: pointer; transition: background-color .3s}
.respGrid__moreBtn:hover {background-color: #d9e9f9}

@media screen and (max-width: 960px) {
	.respGrid {grid-template-columns: repeat(2, 1fr)}
}
@media screen and (max-width: 480px) {
	.respGrid {grid-template-columns: 1fr}
}

/* 신고하기 카드 (reportLinks) - 카드 전체가 클릭 영역, li > a 구조 */
.reportLinks {display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem}
.reportLinks__card {display: flex; align-items: center; justify-content: space-between; column-gap: 2rem; padding: clamp(2rem, 3.5vw, 3.5rem); border-radius: var(--gap-20); background-color: #f2f4f7; transition: background-color .3s}
.reportLinks__card:hover, .reportLinks__card:focus-visible {background-color: #e4e8ee}
.reportLinks__title {font-size: var(--fs-22); font-weight: 700; color: #141414; margin-bottom: 1.2rem}
.reportLinks__list li {font-size: var(--fs-18); font-weight: 300; color: #777; line-height: 1.7}
.reportLinks__arrow {flex-shrink: 0; display: block; width: 4.6rem; height: 4.6rem; border-radius: .8rem; background: #fff url(/images/sub/imo/imo_arr.png) no-repeat center/1.6rem; box-shadow: 0 .2rem .6rem rgba(0,0,0,.06)}

@media screen and (max-width: 768px) {
	.reportLinks {grid-template-columns: 1fr}
	.reportLinks__card {padding: var(--gap-25)}
	.reportLinks__list li {font-size: var(--fs-16); line-height: 1.6}
	.reportLinks__arrow {width: 3.8rem; height: 3.8rem}
}

/* 레이어 팝업 - 윤리경영 전용 독립 컴포넌트 (기존 .viewPop과 별개, 서로 영향 없음) */
.ethicPop {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 6; opacity: 0; visibility: hidden; transition: all .5s}
.ethicPop.showView {opacity: 1; visibility: visible}
.ethicPop__bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--mainColor); z-index: 0}
.ethicPop__box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: var(--gap-40); width: 95%; max-width: 94.5rem; padding: var(--gap-40); z-index: 1}

.ethicPop__title {font-size: var(--fs-28); font-weight: 800; color: #141414; text-align: center; margin-bottom: var(--gap-25)}
.ethicPop__intro {font-size: var(--fs-18); font-weight: 300; color: #444; line-height: 1.7; padding-bottom: var(--gap-20); border-bottom: .1rem solid #e3e3e3; margin-bottom: var(--gap-25)}

.ethicPop__close {display: block; margin-inline: auto; padding: 1.2rem 3.6rem; border-radius: 50vmax; background-color: #333; color: #fff; font-size: var(--fs-16); font-weight: 700; transition: background-color .3s}
.ethicPop__close:hover {background-color: var(--mainColor)}

/* 협력사 행동규범 리스트 (partnerCodeList) */
.partnerCodeList {display: flex; flex-direction: column; row-gap: var(--gap-25); padding-bottom: var(--gap-25); border-bottom: .1rem solid #e3e3e3; margin-bottom: var(--gap-30); max-height: 55dvh; overflow-y: auto}
.partnerCodeList__row {display: flex; column-gap: var(--gap-40)}
.partnerCodeList__label {flex-shrink: 0; width: 18rem; font-size: var(--fs-22); font-weight: 700; color: #141414}
.partnerCodeList__body {flex: 1 1 auto}
.partnerCodeList__desc {font-size: var(--fs-18); font-weight: 400; color: #333; line-height: 1.6}
.partnerCodeList__sub {margin-top: .4rem; font-size: var(--fs-16); font-weight: 300; color: #777; line-height: 1.6}

@media screen and (max-width: 768px) {
	.ethicPop__box {padding: var(--gap-25)}
	.ethicPop__title {font-size: var(--fs-20)}
	.partnerCodeList__row {flex-direction: column; row-gap: .6rem}
	.partnerCodeList__label {width: auto; font-size: var(--fs-20);}
}

/* 와이드 팝업 (폼메일 신고 팝업 전용) - 필드가 많아 기본 74.5rem보다 넓게, 세로도 스크롤 */
.ethicPop__box--wide {max-width: 104rem; max-height: 90dvh; overflow-y: auto; border-top-right-radius: 0; border-bottom-right-radius: 0}

@media screen and (max-width: 768px) {
	.ethicPop__box--wide {max-width: 95%}
}

/* ========================================================================
   신고 폼 (reportForm) - 부정비리 신고 / 성희롱 피해신고 팝업 공용
   ======================================================================== */
.reportForm {display: flex; flex-direction: column; row-gap: var(--gap-30)}
.reportForm__intro {font-size: var(--fs-18); font-weight: 300; color: #444; line-height: 1.7}

.reportForm__noticeBox {border: .1rem solid #ddd; border-radius: 1rem; padding: var(--gap-25); font-size: var(--fs-16); color: #555; line-height: 1.9}
.reportForm__noticeBox p {margin: 0}

.reportForm__agree {display: flex; flex-direction: column; row-gap: .8rem; font-size: var(--fs-18); color: #333}
.reportForm__agreeRadio {display: flex; align-items: center; column-gap: 1.4rem; flex-wrap: wrap; font-size: var(--fs-18); color: #333}
.reportForm__radioLabel {display: inline-flex; align-items: center; column-gap: .5rem; cursor: pointer; font-size: var(--fs-18); color: #333}
.reportForm__radioLabel input[type=radio] {width: 1.8rem; height: 1.8rem; accent-color: var(--mainColor)}

.reportForm__section {display: flex; flex-direction: column}
.reportForm__sectionTitle {font-size: var(--fs-20); font-weight: 700; color: #141414; padding-bottom: 1.2rem; border-bottom: .2rem solid #222}

.reportForm__row {display: flex; flex-direction: column; row-gap: 1rem; padding-block: 1.8rem; border-bottom: .1rem solid #eee}
.reportForm__row--top {align-items: flex-start}
.reportForm__label {flex-shrink: 0; font-size: var(--fs-18); font-weight: 700; color: #222}
.reportForm__must {margin-left: .3rem; color: var(--mainColor)}
.reportForm__field {display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.2rem; row-gap: 1rem; width: 100%}

.reportForm__input {height: 5rem; padding-inline: 1.6rem; border: .1rem solid #ddd; border-radius: .6rem; font-size: var(--fs-18); flex: 1 1 20rem}
.reportForm__input--sm {flex: 0 1 24rem}
.reportForm__input--num {flex: 1 1 10rem}
.reportForm__select {height: 5rem; padding-inline: 1.2rem; border: .1rem solid #ddd; border-radius: .6rem; font-size: var(--fs-18); flex: 0 0 9rem; background-color: #fff}
.reportForm__textarea {width: 100%; min-height: 16rem; padding: 1.6rem; border: .1rem solid #ddd; border-radius: .6rem; font-size: var(--fs-18); line-height: 1.7; resize: vertical}
.reportForm__note {flex-basis: 100%; font-size: var(--fs-16); color: #888}
.reportForm__addrBtn {flex-shrink: 0; height: 5rem; padding-inline: 1.8rem; border-radius: .6rem; background-color: #999; color: #fff; font-weight: 600; font-size: var(--fs-18)}
.reportForm__emailAt {flex-shrink: 0; color: #888}

.reportForm__buttons {display: flex; justify-content: center; column-gap: 1.5rem; padding-top: 1rem}
.reportForm__cancel {padding: 1.4rem 4.5rem; border-radius: 50vmax; background-color: #bbb; color: #fff; font-weight: 700; font-size: var(--fs-18); transition: background-color .3s}
.reportForm__cancel:hover {background-color: #999}
.reportForm__submit {padding: 1.4rem 4.5rem; border-radius: 50vmax; background-color: var(--mainColor); color: #fff; font-weight: 700; font-size: var(--fs-18); transition: background-color .3s}
.reportForm__submit:hover {background-color: #045191}

@media screen and (min-width: 768px) {
	.reportForm__row {flex-direction: row; align-items: center; column-gap: var(--gap-40)}
	.reportForm__row--top {align-items: flex-start}
	.reportForm__label {width: 12rem}
	.reportForm__field {flex: 1 1 auto}
}
/* ========================================================================
   검색 (productSearch.php)
   ======================================================================== */
.searchTop {background-color: #f7f7f7; border-radius: var(--gap-10); padding: clamp(2rem, 3vw, 3rem)}
.searchTop__form {display: flex; column-gap: 1.2rem}
.searchTop__select {flex: 0 0 16rem; height: 5.4rem; border: .1rem solid #ddd; padding-inline: 1.4rem; font-size: var(--fs-16); background-color: #fff}
.searchTop__input {flex: 1 1 auto; height: 5.4rem; border: .1rem solid #ddd; padding-inline: 1.6rem; font-size: var(--fs-16); background-color: #fff}
.searchTop__submit {flex: 0 0 auto; height: 5.4rem; padding-inline: 3rem; border: 0; background-color: #333; color: #fff; font-weight: 700; letter-spacing: .05em; font-size: var(--fs-16); transition: background-color .3s}
.searchTop__submit:hover {background-color: var(--mainColor)}

.searchResult__count {font-size: var(--fs-16); color: #666}
.searchResult__count strong {color: var(--mainColor); font-weight: 700}
.searchResult__empty {padding: var(--gap-100) 0; text-align: center; color: #888; font-size: var(--fs-16)}

@media screen and (max-width: 768px) {
	.searchTop__form {flex-direction: column; row-gap: 1rem}
	.searchTop__select,
	.searchTop__input,
	.searchTop__submit {flex: 1 1 auto; width: 100%}
}
/* ========================================================================
   CUSTOMER 연락처 페이지 (business.php / recruit.php / ir.php 공용)
   ======================================================================== */
 
/* 서브 탭 (contactTab) - 알약형, 가변폭, 페이지 이동형. techTab과 디자인이 달라 독립 컴포넌트로 분리 */
.contactTab {display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1rem; row-gap: 1rem}
.contactTab__item a {display: inline-flex; align-items: center; justify-content: center; height: 5.4rem; padding-inline: 3rem; border: .1rem solid #ddd; border-radius: 50vmax; font-size: var(--fs-17); font-weight: 700; color: #333; white-space: nowrap; transition: all .3s}
.contactTab__item.active a {background-color: #141414; border-color: #141414; color: #fff}
.contactTab__item:not(.active) a:hover {border-color: #141414; color: #141414}
 
/* 연락처 카드 (contactBox) */
.contactBox {background-color: #c7c7c7; border-radius: var(--gap-40); padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem) clamp(6rem, 7vw, 8rem) }
.contactBox__title {font-size: var(--fs-50); font-weight: 800; color: #fff; text-align: center; margin-bottom: 1.6rem}
.contactBox__desc {font-size: var(--fs-22); font-weight: 300; color: #f2f2f2; text-align: center; line-height: 1.7; margin-bottom: var(--gap-40)}
 
/* 연락처 리스트 (contactList) */
.contactList {display: flex; flex-direction: column; row-gap: 1.6rem}
.contactList__row {display: flex; align-items: center; justify-content: center; column-gap: 2rem; background-color: #fff; border-radius: 1.2rem; padding: 2rem 3rem; transition: background-color .3s; }
.contactList__row:hover {background-color: #f5f5f5}
 
/* 전화 링크는 모바일에서만 동작 (데스크톱에서는 클릭 비활성화) */
@media screen and (min-width: 769px) {
	.contactList__row[href^="tel:"] {pointer-events: none; cursor: default}
}
.contactList__icon {flex-shrink: 0; width: 8.8rem; height: 8.8rem; display: flex; align-items: center; justify-content: center}
.contactList__icon img {max-width: 100%; max-height: 100%}
.contactList__value {font-size: var(--fs-40); font-weight: 800; color: #141414}
 
@media screen and (max-width: 768px) {
	.contactTab__item a {height: 4.6rem; padding-inline: 2rem; font-size: var(--fs-15)}
	.contactBox {padding: var(--gap-30) var(--gap-20)}
	.contactBox__title {font-size: var(--fs-24)}
	.contactBox__desc {font-size: var(--fs-15)}
	.contactList__row {column-gap: 1.4rem; padding: 1.6rem 2rem}
	.contactList__icon {width: 4.4rem; height: 4.4rem}
	.contactList__value {font-size: var(--fs-18)}
}
/* ========================================================================
   인사철학 (hrPhil) - careers/hr_philosophy.php 전용
   번호(01~03) + 타이틀 / 소개문구 / 강조타이틀(A+B) / 불릿 박스 / 다이어그램 이미지
   다이어그램(원형 아이콘 구성)은 hr_img01~03.gif 이미지로 대체 (별도 좌표 코딩 없음)
   ======================================================================== */
.hrPhil {display: flex; flex-direction: column}
.hrPhil__section {display: flex; flex-direction: column; row-gap: 2.4rem; padding-block: var(--gap-60)}
.hrPhil__section:first-child {padding-top: 0}
.hrPhil__section:last-child {padding-bottom: 0}
.hrPhil__section + .hrPhil__section {border-top: .1rem solid #e5e5e5}

/* hrPhil__row: 라벨 + 본문(설명/박스) 2단 구성. 다이어그램은 이 row 밖(hrPhil__section 직속)에 두어
   라벨 컬럼 폭에 상관없이 섹션 전체 폭(최대 140rem)을 그대로 채우도록 함 */
.hrPhil__row {display: flex; flex-direction: column; row-gap: 2.4rem}

/* 제목이 길어서 줄바뀜될 때 "02." 밑으로 안 들어가고 타이틀 시작 위치에 맞춰 정렬되도록 flex 행잉 인덴트 구조 */
.hrPhil__num {display: flex; align-items: flex-start; column-gap: .6rem; font-size: var(--fs-28); font-weight: 700}
.hrPhil__numPrefix {flex-shrink: 0; color: #bbb}
.hrPhil__numTitle {color: #111}

.hrPhil__body {display: flex; flex-direction: column}
.hrPhil__desc {font-size: var(--fs-18); color: #666; line-height: 1.6; margin-bottom: 2rem; margin-top: 1rem;}

.hrPhil__highlight {display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.2rem; font-size: var(--fs-24); font-weight: 700; color: var(--mainColor); margin-bottom: 1.2rem}
.hrPhil__plus {color: #999; font-weight: 400}

.hrPhil__box {background-color: #f7f8fa; border-radius: 1.2rem; padding: 2.4rem 2.8rem}
.hrPhil__box ul {display: flex; flex-direction: column; row-gap: .6rem}
.hrPhil__box li {position: relative; padding-left: 1.4rem; font-size: var(--fs-18); color: #555; line-height: 1.6}
.hrPhil__box li::before {content: "·"; position: absolute; left: 0}

/* 다이어그램: 이미지는 원본 크기(96rem = 960px) 그대로 유지하고, hrPhil__section 전체 폭(라벨 폭 포함) 안에서
   오른쪽으로 붙여 배치 (이미지 자체를 늘려서 키우지 않음). 뷰포트가 960px보다 좁아지면 반응형으로 축소.
   주의: 기존 ".sub_center div > img:only-child { max-width:100%; margin-inline:auto }" 규칙이 특이도가 더 높아서
   (1) max-width를 100%로 덮어쓰고 (2) margin-right까지 auto로 만들어 가운데 정렬돼버림.
   그래서 width는 max-width 대신 고정값으로, 정렬은 특이도를 맞춘 선택자로 margin-right:0을 강제 지정해서 우회함 */
.hrPhil__diagram {width: 100%}
.hrPhil__diagram img {display: block; margin-left: auto; width: 100%; height: auto}
.hrPhil__section div.hrPhil__diagram img {margin-right: 0}

@media screen and (min-width: 960px) {
	.hrPhil__row {flex-direction: row; column-gap: var(--gap-60)}
	/* body가 이제 고정폭(96rem)+오른쪽 정렬이라 라벨 폭에 더 이상 맞출 필요가 없어짐 —
	   라벨은 줄바뀜 없이 내용만큼만 폭을 차지하도록 (예: "Organizational Culture"가 더 이상 두 줄로 안 깨짐) */
	.hrPhil__label {flex-shrink: 0; white-space: nowrap}
	/* body(설명/박스)는 "되도록 96rem(다이어그램과 동일폭) + 오른쪽 정렬"이 목표지만, 라벨(가변폭) 때문에
	   960px~1400px 구간처럼 공간이 빠듯할 땐 flex-shrink로 줄어들게 해서 화면 밖으로 삐져나가지 않도록 함
	   (고정폭이면 라벨+간격+960px가 컨테이너보다 넓어질 때 넘쳐서 잘려 보이는 문제가 있었음) */
	.hrPhil__body {flex: 0 1 96rem; margin-left: auto; min-width: 0}
	/* 다이어그램 이미지도 마찬가지로 min()으로 "96rem 또는 컨테이너 100% 중 작은 값"을 사용해서 좁을 때 자동으로 줄어들게 함 */
	.hrPhil__diagram img {width: min(96rem, 100%)}
}
@media screen and (max-width: 768px) {
	.hrPhil__box {padding: 2rem 2.2rem}
}

/* sub.css 맨 끝에 추가할 블록입니다. (careers/hr_benefits.php 작업 - 2026-08-17)
   원본 sub.css 전체를 이 파일이 대체하는 게 아니라, 기존 sub.css 끝에 이 내용만 이어붙이면 됩니다. */

/* ========================================================================
   복리후생 (hrBenefit) - careers/hr_benefits.php 전용
   좌측 카테고리 타이틀 + 우측 불릿 리스트 박스 구조 (Accommodation / Self-development /
   Lifestyle support / Vacation / Employee compensation 5개 섹션 반복)
   ======================================================================== */
.hrBenefit {display: flex; flex-direction: column; row-gap: var(--gap-60)}
.hrBenefit__section {display: flex; flex-direction: column; row-gap: 1.6rem}

.hrBenefit__title {font-size: var(--fs-28); font-weight: 700; color: #161616}

.hrBenefit__box {background-color: #f7f8fa; border: .1rem solid #ededed; border-radius: 1.6rem; padding: 3rem 3.4rem}
.hrBenefit__box ul {display: flex; flex-direction: column; row-gap: 1rem}
.hrBenefit__box li {position: relative; padding-left: 1.4rem; font-size: var(--fs-18); color: #555; line-height: 1.4}
.hrBenefit__box li::before {content: "·"; position: absolute; left: 0}

@media screen and (min-width: 960px) {
	.hrBenefit__section {flex-direction: row; align-items: flex-start; column-gap: var(--gap-60)}
	/* hr_philosophy.php와 좌우 비중을 맞춤: 라벨은 줄바뀜 없이 내용만큼만, 박스는 고정폭(96rem) + 오른쪽 정렬 */
	.hrBenefit__label {flex-shrink: 0; white-space: nowrap; padding-top: .6rem}
	/* 960px~1400px처럼 공간이 빠듯할 땐 flex-shrink로 줄어들게 해서 화면 밖으로 삐져나가지 않도록 함 */
	.hrBenefit__box {flex: 0 1 96rem; margin-left: auto; min-width: 0}
}
@media screen and (max-width: 768px) {
	.hrBenefit__box {padding: 2.4rem 2.4rem}
    .hrBenefit__box li {font-size: var(--fs-16); line-height: 1.2}
}

/* sub.css 맨 끝에 추가할 블록입니다. (careers/recruit.php 작업 - 2026-08-17)
   원본 sub.css 전체를 이 파일이 대체하는 게 아니라, 기존 sub.css 끝에 이 내용만 이어붙이면 됩니다. */

/* ========================================================================
   채용절차 (recruitProcess) - careers/recruit.php 전용
   연한 회색 행 안에 아이콘 + 흰색 박스(타이틀/설명) 구성, 5단계 반복
   ======================================================================== */
.recruitProcess {display: flex; flex-direction: column; row-gap: 2rem}
.recruitProcess__item {display: flex; align-items: center; column-gap: 2.4rem; background-color: #f5f5f5; border: solid 1px #d8d8d8; border-radius: 1.6rem; padding: 2rem 2rem 2rem 7rem}

.recruitProcess__icon {flex-shrink: 0; width: 10rem; }
.recruitProcess__icon img {display: block; width: 100%; height: auto}

.recruitProcess__box {flex: 1; background-color: #fff; border-radius: 1.2rem; padding: 2.4rem 3.2rem; margin-left: 4rem;}
.recruitProcess__title {font-size: var(--fs-32); font-weight: 600; color: #161616; margin-bottom: .6rem}
.recruitProcess__desc {font-size: var(--fs-22); color: #888; line-height: 1.3}

@media screen and (max-width: 640px) {
	.recruitProcess__item {column-gap: 1.4rem; padding: 1.4rem}
	.recruitProcess__icon {width: 5.6rem}
	.recruitProcess__box {padding: 1.6rem 1.8rem;margin-left: 0rem;}
}

/* ========================================================================
   채용 안내 (recruitInfo) - careers/recruit.php 전용
   좌측 라벨 + 우측 텍스트/박스 구성 (모집시기 / 지원자격 / 채용문의 / 제출서류)
   ======================================================================== */
.recruitInfo {display: flex; flex-direction: column; row-gap: var(--gap-60)}
.recruitInfo__section {display: flex; flex-direction: column; row-gap: 1.2rem}

.recruitInfo__title {font-size: var(--fs-28); font-weight: 700; color: #161616}

.recruitInfo__text {font-size: var(--fs-22); color: #555; line-height: 1.8; margin-top: 0.7rem;}

.recruitInfo__subLabel {font-size: var(--fs-22); color: #333; margin-bottom: 1.2rem}

.recruitInfo__box {background-color: #f7f8fa; border: .1rem solid #ededed; border-radius: 1.6rem; padding: 2.8rem 3.2rem}
.recruitInfo__box ul {display: flex; flex-direction: column; row-gap: 1rem}
.recruitInfo__box li {position: relative; padding-left: 1.4rem; font-size: var(--fs-18); color: #555; line-height: 1.6}
.recruitInfo__box li::before {content: "·"; position: absolute; left: 0}
.recruitInfo__box li.noBullet::before {content: none}

.recruitDownload {display: inline-flex; align-items: center; column-gap: 1.2rem; background-color: #222; border-radius: 1rem; padding: 1.2rem 1.6rem; transition: background-color .3s; margin-right: 0.5rem;}
.recruitDownload:hover {background-color: var(--mainColor)}
.recruitDownload__icon {display: block; width: 3.4rem; height: 3.4rem}
.recruitDownload__badge {display: inline-flex; align-items: center; justify-content: center; padding: .3rem .9rem; border-radius: .4rem; background-color: #fff; color: #222; font-size: var(--fs-18); font-weight: 700}

@media screen and (min-width: 960px) {
	.recruitInfo__section {flex-direction: row; align-items: flex-start; column-gap: var(--gap-60)}
	/* hr_philosophy.php / hr_benefits.php와 좌우 비중을 맞춤: 라벨은 줄바뀜 없이 내용만큼만,
	   콘텐츠는 고정폭(96rem) + 오른쪽 정렬 */
	.recruitInfo__label {flex-shrink: 0; white-space: nowrap; padding-top: .6rem}
	/* 960px~1400px처럼 공간이 빠듯할 땐 flex-shrink로 줄어들게 해서 화면 밖으로 삐져나가지 않도록 함 */
	.recruitInfo__content {flex: 0 1 96rem; margin-left: auto; min-width: 0}
}
@media screen and (max-width: 768px) {
	.recruitInfo__box {padding: 2.2rem 2.2rem}
    .recruitDownload__icon {width: 1.7rem; height: 1.7rem}
    .recruitDownload__badge {padding: .1rem .5rem; font-size: var(--fs-14); font-weight: 700}
}

/* sub.css 맨 끝에 추가할 블록입니다. (careers/position.php 작업 - 2026-08-17)
   원본 sub.css 전체를 이 파일이 대체하는 게 아니라, 기존 sub.css 끝에 이 내용만 이어붙이면 됩니다. */

/* 앵커(#) 이동 시 상단 고정 헤더에 콘텐츠가 가리지 않도록 부드러운 스크롤 적용 */
html {scroll-behavior: smooth}

/* ========================================================================
   직무소개 (position) - careers/position.php 전용
   Business Division / Common / Production 3개 섹션이 세로로 나열되고,
   각 섹션 위에 동일한 밑줄형 탭(positionTab)이 반복되어 다른 섹션으로 앵커 이동함
   ======================================================================== */
.position {display: flex; flex-direction: column; row-gap: var(--gap-100)}

/* 앵커 이동 탭 (밑줄형) - techTab(버튼형)과는 별도의 컴포넌트 */
.positionTab {display: flex; flex-wrap: wrap; column-gap: 4rem; border-bottom: .1rem solid #e5e5e5; margin-bottom: var(--gap-40)}
.positionTab__item a {display: inline-block; position: relative; padding-block: 1.6rem; font-size: var(--fs-18); font-weight: 600; color: #888; transition: color .3s}
.positionTab__item a:hover {color: var(--mainColor)}
.positionTab__item.active a {color: var(--mainColor)}
.positionTab__item.active a::after {content: ""; position: absolute; left: 0; right: 0; bottom: -.1rem; height: .2rem; background-color: var(--mainColor)}

/* 앵커 이동 시 상단 고정 헤더(--headerHeight)에 콘텐츠가 가리지 않도록 여유 확보 */
.positionSection {scroll-margin-top: calc(var(--headerHeight) + 2rem)}

.positionBanner {margin-bottom: var(--gap-50)}
.positionBanner img {display: block; width: 100%; height: auto; border-radius: 1.2rem}

.positionInfo {display: flex; flex-direction: column; row-gap: 2rem}
.positionInfo__title {font-size: var(--fs-28); font-weight: 700; color: #161616}

.positionInfo__highlight {font-size: var(--fs-24); color: var(--mainColor); margin-bottom: .8rem; margin-top: 0.7rem;}
.positionInfo__desc {font-size: var(--fs-18); color: #666; margin-bottom: 2.4rem}

/* 카테고리별 2단 그리드 박스
   (positionGroups__col을 positionGroups의 직계 자식으로 두고, 항목 단위(nth-child)로 여백·구분선을 계산.
    행(row) 래퍼로 감싸지 않으므로 모바일에서 1단으로 쌓일 때도 항목마다 여백/구분선이 동일하게 적용됨) */
.positionGroups {background-color: #f7f8fa; border: .1rem solid #ededed; border-radius: 1.6rem; padding: 3.2rem 3.6rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem}
.positionGroups__col {padding-block: 2.4rem; border-top: .1rem solid #e2e2e2}
.positionGroups__col:nth-child(-n+2) {padding-top: 0; border-top: none}
.positionGroups__col:last-child {padding-bottom: 0}

.positionGroups__colTitle {font-size: var(--fs-20); font-weight: 700; color: #161616; margin-bottom: 1.2rem}
.positionGroups__col ul {display: flex; flex-direction: column; row-gap: .5rem}
.positionGroups__col li {position: relative; padding-left: 1.2rem; font-size: var(--fs-18); font-weight: 300; color: #666; line-height: 1.4}
.positionGroups__col li::before {content: "·"; position: absolute; left: 0}

@media screen and (min-width: 960px) {
	.positionInfo {flex-direction: row; align-items: flex-start; column-gap: var(--gap-60)}
	/* hr_philosophy.php / hr_benefits.php / recruit.php와 좌우 비중을 맞춤: 라벨은 줄바뀜 없이 내용만큼만,
	   콘텐츠는 고정폭(96rem) + 오른쪽 정렬, 공간이 빠듯하면 flex-shrink로 줄어들어 화면 밖으로 넘치지 않도록 함 */
	.positionInfo__label {flex-shrink: 0; white-space: nowrap; padding-top: .6rem}
	.positionInfo__content {flex: 0 1 96rem; margin-left: auto; min-width: 0}
}
@media screen and (max-width: 768px) {
	.positionGroups {padding: 2.4rem 2.4rem; grid-template-columns: 1fr}
	/* 1단으로 쌓이면 모든 항목이 각자 "한 행"이 되므로, 데스크탑에서 여백/구분선이 없던 2번째 항목도 다시 살리고
	   맨 첫 항목만 여백/구분선 없이 시작하도록 재조정 */
	.positionGroups__col:nth-child(-n+2) {padding-top: 2.4rem; border-top: .1rem solid #e2e2e2}
	.positionGroups__col:first-child {padding-top: 0; border-top: none}
}
/* sub.css 맨 끝에 추가할 블록입니다. (careers/oppor.php 작업 - 2026-08-18)
   원본 sub.css 전체를 이 파일이 대체하는 게 아니라, 기존 sub.css 끝에 이 내용만 이어붙이면 됩니다. */

/* ========================================================================
   채용공고 안내 (oppor) - careers/oppor.php 전용
   Position(구분+상세 2단) / Eligibility / Department 4단 데이터 테이블.
   rowspan으로 R&D 하위 세부직무, 자격요건, 근무지 그룹을 병합.
   좁은 화면에서는 표를 줄이는 대신 가로 스크롤로 대응 (rowspan 구조상 세로 재배치가 어려움)
   ======================================================================== */
.oppor {display: flex; flex-direction: column; row-gap: var(--gap-30)}

.oppor__head {display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.6rem; row-gap: .8rem; /*margin-bottom: var(--gap-10)*/}
.oppor__title {font-size: var(--fs-32); font-weight: 700; color: #161616}
.oppor__note {font-size: var(--fs-15); color: #888}

/* relations/financial.php의 .finTable과 동일한 톤(상단 굵은 라인 + 가로/세로 헤어라인 + 옅은 헤더 배경)으로 통일 */
.oppor__tableWrap {overflow-x: auto}
.oppor__table {width: 100%; min-width: 80rem; border-collapse: collapse; border-top: .2rem solid #222; table-layout: fixed}

.oppor__table th,
.oppor__table td {padding-block: 1.6rem; padding-inline: 1.5rem; border-bottom: .1rem solid #e6e6e6; border-left: .1rem solid #e6e6e6; font-size: var(--fs-18); font-weight: 300; color: #555; text-align: center; vertical-align: middle; line-height: 1.5}

.oppor__table thead th:first-child {border-left: 0}
.oppor__table thead th {background-color: #f7f9fc; color: #222; font-weight: 700; font-size: var(--fs-16)}

/* 왼쪽 구분(R&D/Technology 등) 칸은 rowspan 유무와 상관없이 항상 행의 첫 번째 셀이라 border-left:0으로 고정 가능 */
.oppor__table tbody th {border-left: 0; font-weight: 700; color: #222; background-color: #fff}
/* 기본 word-break:keep-all 상속 때문에 "Purchase/procurement"처럼 슬래시(/)로만 구분된 긴 라벨이
   줄바꿈 없이 셀 밖으로 넘쳐 보이는 문제가 있어, 카테고리 라벨 칸만 필요 시 단어 중간에서도 줄바꿈되게 함 */
.oppor__table tbody th {word-break: break-word; overflow-wrap: break-word}
/* rowspan 때문에 행마다 실제 자식 td 순번이 달라져서 nth-child로는 위치를 특정할 수 없어, 전용 클래스로 지정 */
.oppor__pos {text-align: left}

.oppor__contact {margin-top: var(--gap-10); font-weight: 300; /*padding-top: var(--gap-30);*/ border-top: .0rem solid #e5e5e5; text-align: center; font-size: var(--fs-18); color: #666}
.oppor__contact a {color: var(--mainColor)}

/* 지원서 다운로드 버튼(kor/careers/oppor.php 전용)이 있는 경우: 문의문구 + 다운로드 버튼들을 한 줄에 양끝 정렬.
   버튼이 없는 페이지(예: 영문 careers/oppor.php)는 .oppor__contact 혼자 들어있어도 기존처럼 그대로 보임 */
.oppor__bottom {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 2rem; row-gap: 1.6rem}
.oppor__bottom .oppor__contact {margin-top: 0}
.oppor__downloads {display: flex; flex-wrap: wrap; gap: 1.2rem}

@media screen and (min-width: 960px) {
	/* PC에서는 타이틀은 왼쪽, 안내문구는 오른쪽으로 양끝 정렬 */
	.oppor__head {justify-content: space-between}
}
@media screen and (max-width: 768px) {
	.oppor__title {font-size: var(--fs-24)}
	.oppor__table th,
	.oppor__table td {padding-block: 1.2rem; padding-inline: 1rem; font-size: var(--fs-14)}
	.oppor__bottom {justify-content: center; text-align: center}
}

/* ==========================================================
   irprIntro - IR/PR 인트로 배경 섹션 (relations/irpr.php)
   메인페이지 .company 소개 섹션과 동일한 패턴의 전체화면 인트로
   (모바일 63rem 고정 높이 → 960px 이상 뷰포트 전체 높이)
   ========================================================== */
/* subVisual/productVisual과 동일하게, 상단 고정 헤더(--headerHeight, 서브페이지는 항상 불투명)에
   콘텐츠 윗부분이 가려지지 않도록 margin-top 확보 */
.irprIntro {min-height: 63rem; margin-top: var(--headerHeight); background: url(/images/sub/relations/irpr_submain.jpg) no-repeat center/cover; display: flex; align-items: center; justify-content: center; padding-block: var(--gap-70)}
.irprIntro__center {width: 95%}
.irprIntro__title {font-size: clamp(3rem, 6.5vw, 7rem); line-height: clamp(3.5rem, 6vw, 7rem)}
.irprIntro__desc {font-size: clamp(1.8rem, 3.5vw, 2.5rem)}
/* 버튼 2개(IR materials / PR Center)가 한 줄에 나란히, 줄바꿈 없이 배치되도록.
   버튼에 붙어있는 .ma(margin-inline:auto)가 flex 안에서 남는 공간을 각자 끌어가
   버튼 사이가 벌어지므로, 이 컨테이너 안에서는 margin을 0으로 무효화하고
   .irprIntro__ctas의 gap 값으로만 버튼 간격을 조절함 (간격 조절은 이 gap 값을 수정) */
.irprIntro__ctas {display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2rem}
.irprIntro__ctas .blurButton {width: auto; flex: 0 1 18rem; min-width: 0; max-width: 45%; margin-inline: 0}
.irprIntro .indelay12 {transition-delay: .2s !important}
.irprIntro .indelay14 {transition-delay: .4s !important}
.irprIntro .indelay16 {transition-delay: .6s !important}
.irprIntro .indelay18 {transition-delay: .8s !important}
.irprIntro .indelay20 {transition-delay: 1s !important}

/* 하단 카드 3개(NEWS / IR materials / PR Video) - 아이콘 + 라벨, 다크네이비 배경 */
.irprCards {display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-top: var(--gap-70)}
.irprCards__cell {width: clamp(9rem, 28vw, 30rem);}
.irprCards__cell a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; height: clamp(9rem, 20vw, 20.5rem); border-radius: var(--gap-20); background-color: #0f1e4275; transition: background-color .5s; transition: all .5s; -webkit-backdrop-filter: blur(1.3rem); backdrop-filter: blur(2.0rem)}
.irprCards__icon {display: flex; align-items: center; justify-content: center; width: clamp(3rem, 8vw, 8.4rem); height: clamp(3rem, 8vw, 8.4rem)}
.irprCards__icon img {width: 100%; height: 100%; object-fit: contain}
.irprCards__name {font-size: clamp(1.3rem, 2.2vw, 2.8rem); font-weight: 200; color: #fff}

@media screen and (min-width: 960px) {
	.irprIntro {min-height: 100dvh}
	.irprIntro .indelay12 {transition-delay: .7s !important}
	.irprIntro .indelay14 {transition-delay: .9s !important}
	.irprIntro .indelay16 {transition-delay: 1.1s !important}
	.irprIntro .indelay18 {transition-delay: 1.3s !important}
	.irprIntro .indelay20 {transition-delay: 1.5s !important}
	.irprCards__cell a:hover {background-color: #0f1d4c}
}

/* ==========================================================
   careerIntro - CAREER 인트로 배경 섹션 (careers/hr.php)
   irprIntro와 동일 패턴, 클래스명만 careers 전용으로 재명명
   (모바일 63rem 고정 높이 → 960px 이상 뷰포트 전체 높이)
   ========================================================== */
/* subVisual/productVisual과 동일하게, 상단 고정 헤더(--headerHeight, 서브페이지는 항상 불투명)에
   콘텐츠 윗부분(타이틀 등)이 가려지지 않도록 margin-top 확보 */
.careerIntro {min-height: 63rem; margin-top: var(--headerHeight); background: url(/images/sub/careers/career_submain.jpg) no-repeat center/cover; display: flex; align-items: center; justify-content: center; padding-block: var(--gap-70)}
.careerIntro__center {width: 95%}
.careerIntro__title {font-size: clamp(3rem, 6.5vw, 7rem); line-height: clamp(3.5rem, 6vw, 7rem)}
.careerIntro__desc {font-size: clamp(1.8rem, 3.5vw, 2.5rem)}
/* 버튼 3개(HR System / Recruiting Process / Job Opportunities) - relations/ir_press.php의 .techTab처럼
   각 버튼을 flex:1 + min-width:0으로 균등 분할해서 모바일에서도 항상 한 줄로 배치.
   문구 길이가 달라 줄 수가 다를 수 있어 align-items: stretch로 버튼 높이를 서로 맞춤.
   960px 이상(PC)은 기존 모습 그대로 유지 */
.careerIntro__ctas {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: .8rem}
.careerIntro__ctas .blurButton {width: auto; flex: 1; min-width: 0; max-width: none; margin-inline: 0; height: auto; min-height: 5.5rem; padding: .8rem .4rem; font-size: clamp(1.1rem, 3.2vw, 1.6rem); line-height: 1.3; white-space: normal}
.careerIntro .indelay12 {transition-delay: .2s !important}
.careerIntro .indelay14 {transition-delay: .4s !important}
.careerIntro .indelay16 {transition-delay: .6s !important}
.careerIntro .indelay18 {transition-delay: .8s !important}
.careerIntro .indelay20 {transition-delay: 1s !important}

/* 카드 3개(Creativity / Challenge / Achievement) - 아이콘+라벨 박스 아래에 설명 텍스트.
   설명 텍스트가 길어 irprCards보다 셀 너비를 넉넉히 잡아야 해서, 버튼과 같은 이유로
   960px 미만에서는 세로 1열로 쌓고(2+1로 어중간하게 줄바꿈되는 것 방지), 960px 이상에서만 가로 한 줄로 배치.
   박스(a)와 설명(p)은 분리해서 박스 높이가 텍스트 길이에 밀려 깨지지 않도록 함 */
.careerCards {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; margin-top: var(--gap-70)}
.careerCards__cell {width: 100%; max-width: 34rem; display: flex; flex-direction: column; align-items: center}
.careerCards__cell a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: clamp(9rem, 20vw, 20.5rem); border-radius: var(--gap-20); background-color: #0f1e4275; transition: background-color .5s; -webkit-backdrop-filter: blur(1.3rem); backdrop-filter: blur(2.0rem)}
.careerCards__icon {display: flex; align-items: center; justify-content: center; width: clamp(3rem, 8vw, 8.4rem); height: clamp(3rem, 8vw, 8.4rem)}
.careerCards__icon img {width: 100%; height: 100%; object-fit: contain}
.careerCards__name {font-size: clamp(1.4rem, 2.2vw, 2.8rem); font-weight: 200; color: #fff}
.careerCards__desc {margin-top: 1.2rem; font-size: clamp(1.3rem, 1.6vw, 2rem); line-height: 1.8; color: hsla(0, 0%, 100%, .85); text-align: left; font-weight: 200;}
@media screen and (max-width: 768px) {
    .careerCards__desc {margin-top: 0.5rem; font-size: clamp(1.2rem, 1.4vw, 1.4rem); line-height: 1.4;}
    .careerCards__cell a {gap: 1rem; height: clamp(7rem, 15vw, 15rem);}
}
@media screen and (min-width: 960px) {
	.careerIntro {min-height: 100dvh}
	.careerIntro__ctas {flex-wrap: nowrap}
	.careerIntro__ctas .blurButton {width: auto; max-width: 45%; flex: 0 1 22rem; height: 6.5rem; min-height: 0; padding: 0; font-size: 1.6rem; white-space: nowrap}
	.careerCards {flex-direction: row; flex-wrap: nowrap; align-items: stretch}
	.careerCards__cell {width: clamp(20rem, 30vw, 34rem); max-width: none}
	/* 카드 3개 중 설명글 길이가 가장 긴 카드(Challenge) 기준으로 높이를 맞춰서,
	   가로 배치일 때 카드 3개의 아래쪽 끝이 나란히 정렬되도록 함 */
	.careerCards__desc {min-height: 9em}
	.careerIntro .indelay12 {transition-delay: .7s !important}
	.careerIntro .indelay14 {transition-delay: .9s !important}
	.careerIntro .indelay16 {transition-delay: 1.1s !important}
	.careerIntro .indelay18 {transition-delay: 1.3s !important}
	.careerIntro .indelay20 {transition-delay: 1.5s !important}
	.careerCards__cell a:hover {background-color: #0f1d4c}
}
/* ==========================================================
   공용 버튼 - system__more(irpr/커리어 단독서브페이지 위에 얹히는 반투명 배경),
   blurButton(블러 배경 CTA, 여러 섹션에서 재사용)
   ========================================================== */
.system__more {background-color: hsla(0, 0%, 100%, .8)}

.blurButton {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 28rem; height: 6.5rem; font-size: 1.6rem; font-weight: 600; color: #000; padding: 0; margin: 0; border-radius: 0.5vmax; border: solid 1px hsla(0, 0%, 0%, .1); gap: var(--gap-20); transition: all .5s; -webkit-backdrop-filter: blur(1.3rem); backdrop-filter: blur(2.0rem)}
.blurButton:after {content: ""; position: absolute; /*display: block; width: 0rem; height: 1.2rem;*/}
@media screen and (min-width: 960px) {
	.blurButton:hover {-webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); background-color: #000; color: #fff	}
	/*.blurButton:hover:after {background: }*/
}

/* ==========================================================
   Company > CI (ci.php)
   ========================================================== */

/* 상단 타이틀 + 서브카피 */
.ciIntro {text-align: center; margin-bottom: var(--gap-90)}
.ciIntro__title {font-size: var(--fs-40); font-weight: 600; color: #000; margin-bottom: 2rem}
.ciIntro__desc {font-size: var(--fs-32); font-weight: 200; color: #333; line-height: 1.6}
.ciIntro__desc strong {font-weight: 500}

/* Symbol / Color / User Guidelines 공통 섹션 타이틀 */
.ciSection {margin-bottom: var(--gap-90)}
.ciSection__title {font-size: var(--fs-28); font-weight: 700; color: #000; margin-bottom: 1.6rem}
.ciSection__desc {font-size: var(--fs-17); font-weight: 400; color: #555; line-height: 1.8; margin-bottom: var(--gap-40)}

/* Symbol : 큰 로고 2컷(컬러/블랙) - 이미지 원본 비율 그대로 박스폭에 꽉 차게 표시 */
.ciLogo {display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: var(--gap-40)}
.ciLogo__box {display: flex; align-items: center; justify-content: center; border: .1rem solid #eee; border-radius: .8rem; padding: clamp(1.5rem, 4vw, 4rem) clamp(2rem, 5vw, 6rem)}
.ciLogo__box img {display: block; width: 100%; height: auto}

/* Symbol : JPG/AI 다운로드 버튼 (careers/recruit.php의 recruitDownload를 CI 전용으로 재명명) */
.ciDownloadWrap {display: flex; align-items: center; justify-content: center; gap: 1rem}
.ciDownload {display: inline-flex; align-items: center; column-gap: 1rem; background-color: #222; border-radius:var(--gap-10); padding: 1.1rem 1.8rem 1.1rem 1.1rem; transition: background-color .3s}
.ciDownload:hover {background-color: var(--mainColor)}
.ciDownload__icon {display: block; width: 3.4rem; height: 3.4rem}
.ciDownload__badge {display: inline-flex; align-items: center; justify-content: center; min-width: 4.4rem; padding: .4rem .6rem; border-radius: .4rem; background-color: #fff; color: #222; font-size: var(--fs-18); font-weight: 700}

/* Color : 4색상 스와치 + Pantone/Web/CMYK/RGB 정보 */
.ciColor {display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 2rem}
.ciColor__item {display: flex; align-items: flex-start; column-gap: 1.4rem}
.ciColor__chip {flex-shrink: 0; width: 9.5rem; height: 6.6rem; border-radius: .4rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-15); font-weight: 700; letter-spacing: .02em}
.ciColor__info {font-size: var(--fs-13); font-weight: 400; color: #555; line-height: 1.7}

/* User Guidelines : Type1/Type2 라벨 + 로고 박스 2단 (사이즈 기준 / 배경 사용 기준) */
.ciGuide__row {margin-bottom: var(--gap-40)}
.ciGuide__labels {display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem}
.ciGuide__labels span {font-size: var(--fs-17); font-weight: 400; color: #333}
.ciGuide__labels strong {font-weight: 700}
.ciGuide__boxes {display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem}
.ciGuide__box {display: flex; align-items: center; justify-content: center; height: 12rem; border: .1rem solid #eee; border-radius: .8rem}
/* width를 %로 고정해 박스 크기 변화(모바일↔데스크탑)에 로고도 비례해서 함께 줄어들도록 함
   (기존 max-width 방식은 이미지 원본 크기가 작아서 모바일에서 박스만 줄고 로고는 그대로라 상대적으로 커보였음) */
.ciGuide__box img {display: block; height: auto}
.ciGuide__box--blue {border: 0; background-color: #1c65ac}
.ciGuide__box--black {border: 0; background-color: #272526}

@media screen and (max-width: 768px) {.ciGuide__box img {width: 50%;}}
@media screen and (min-width: 960px) {
	.ciLogo {gap: 2.1rem}
	.ciColor {grid-template-columns: repeat(4, 1fr)}
	.ciGuide__box {height: 18rem}
}

/* ==========================================================
   Company > Global Organization (global.php)
   ========================================================== */

/* 상단 타이틀 "Global Organization" - 그라데이션 텍스트로 가독성/포인트를 줌 */
.globalIntro {text-align: center; margin-bottom: var(--gap-40)}
.globalIntro__title {display: inline-block; font-size: 2rem; font-weight: 700;}

/* 6G / GLOBAL KMW 히어로 배너 - global_bg01.jpg는 "6G" 그래픽까지만 포함되어 있어서
   "GLOBAL KMW" 타이틀과 서브카피는 이미지 위에 실제 텍스트로 얹음 */
.globalHero {position: relative; width: 100%; aspect-ratio: 1400 / 394; border-radius: 1rem; overflow: hidden; margin-bottom: var(--gap-10)}
.globalHero__bg {display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover}
.globalHero__text {position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%); width: 100%; text-align: center; color: #fff; padding-inline: 2rem}
/* 폰트 크기를 vw 위주로(최소치를 낮게) 잡아서, 배경 이미지 안의 "6G" 그래픽과 같은 비율로
   모바일에서도 함께 작아지도록 함 (min 값을 크게 두면 좁은 화면에서 6G와 겹쳐 보임) */
.globalHero__title {font-size: clamp(1.3rem, 4.1vw, 5.4rem); font-weight: 800; letter-spacing: .01em; margin-top:9rem; margin-bottom: .6em;  text-shadow: 0 0 5px #001e60,  /* 안쪽 좁고 진한 번짐 */ 0 0 15px #001e60, /* 중간 번짐 */ 0 0 30px #001e60; /* 바깥쪽 넓은 번짐 */}
.globalHero__desc {font-size: clamp(.7rem, 1.5vw, 1.9rem); font-weight: 300; letter-spacing: .03em; line-height: 1.5;  text-shadow: 0 0 5px #001e60,  /* 안쪽 좁고 진한 번짐 */ 0 0 15px #001e60, /* 중간 번짐 */ 0 0 30px #001e60; /* 바깥쪽 넓은 번짐 */}
@media screen and (max-width: 768px) {
    .globalHero__title {margin-top:3rem; margin-bottom: .2em;}
}

/* 아시아 지도(global_bg02.gif) 위에 지사 위치 dot(dot_any.gif) 표시
   - 마우스 오버 시 지사명 툴팁, 클릭 시 하단 해당 지사 블록으로 스크롤 이동 */
.globalMap {position: relative; width: 100%; aspect-ratio: 1400 / 532; border-radius: 1rem; overflow: hidden; background-color: #eef0f4; margin-bottom: var(--gap-90)}
.globalMap__bg {display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover}
.globalMap__dot {position: absolute; width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translate(-50%, -50%)}
.globalMap__dot img {display: block; width: 100%; height: 100%}
.globalMap__tooltip {position: absolute; left: 50%; bottom: calc(100% + .6rem); transform: translate(-50%, .4rem); min-width: 15rem; padding: 1.5rem 2.2rem; background-color: #fff; border-radius: .8rem; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.15); font-size: var(--fs-20); font-weight: 300; color: #222; line-height: 1.4; text-align: left; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility .2s}
.globalMap__dot:hover .globalMap__tooltip, .globalMap__dot:focus-visible .globalMap__tooltip {opacity: 1; visibility: visible; transform: translate(-50%, 0)}

/* 지사 목록 (Head Office / Japan / Xi'an / Vietnam / Anseong) - 전부 세로 스택, 지도 dot 클릭 시 해당 블록으로 스크롤 */
.globalOffice {margin-bottom: var(--gap-90); scroll-margin-top: calc(var(--headerHeight) + 2rem)}
.globalOffice:last-child {margin-bottom: 0}
.globalOffice__eyebrow {font-size: var(--fs-17); font-weight: 600; color: #666; margin-bottom: .4rem}
.globalOffice__title {font-size: var(--fs-24); font-weight: 700; color: #161616}
.globalOffice__map {position: relative; width: 100%; aspect-ratio: 1400 / 560; border-radius: .8rem; overflow: hidden; margin: 1.6rem 0; border: .1rem solid #eee; background-color: #f5f5f5}
.globalOffice__map iframe {display: block; width: 100%; height: 100%; border: 0}
.globalOffice__info p {font-size: var(--fs-16); font-weight: 400; color: #555; line-height: 1.8}

@media screen and (min-width: 960px) {
	.globalIntro {margin-bottom: var(--gap-60)}
	.globalIntro__title {font-size: 2.4rem}
	.globalMap__dot {width: 1.6rem; height: 1.6rem}
	.globalOffice__title {font-size: var(--fs-28)}
}

/* ==========================================================
   Company > Major Customers (customer.php)
   ========================================================== */

/* 필터 탭 : All(기본 활성, 파란색) / Korea / U.S.A & Europe / ASIA
   - 4등분 동일 너비, 클릭 시 .on 클래스가 이동하며 하단 그리드가 필터링됨 */
.customerFilter__tabs {display: flex; gap: 0.6rem; margin-bottom: var(--gap-40)}
.customerFilter__tab {flex: 1 1 0; min-width: 0; height: 6.4rem; border: .1rem solid #ddd; border-radius: .8rem; background-color: #fff; font-size: var(--fs-17); font-weight: 700; color: #222; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s}
.customerFilter__tab.on {background-color: var(--mainColor); border-color: var(--mainColor); color: #fff}
.customerFilter__tab:not(.on):hover {background-color: #f2f5f9}

/* 협력사 로고 배너 그리드 - 4열, 로고 이미지는 박스 가로값 100%로 크게 노출 */
.customerFilter__grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 2rem}
.customerFilter__item {display: flex; align-items: center; justify-content: center; aspect-ratio: 400 / 142; border: .1rem solid #eee; border-radius: .8rem; overflow: hidden}
.customerFilter__item img {display: block; width: auto; height: 100%}

@media screen and (max-width: 768px) {
	.customerFilter__tabs {flex-wrap: wrap; gap: 1rem}
	.customerFilter__tab {flex: 1 1 calc(50% - .5rem); min-width: calc(50% - .5rem); height: 5.2rem; font-size: var(--fs-15)}
	.customerFilter__grid {grid-template-columns: repeat(2, 1fr); gap: 1.2rem}
}