/* 서브페이지 상단바는 배경만 흰색(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); } .title__gr { text-shadow: 0 0 .3rem rgba(0, 0, 0, .10), /* 글자 바로 옆 - 진하고 좁게 */ 0 0 .8rem rgba(0, 0, 0, .08), 0 0 1.6rem rgba(0, 0, 0, .06), 0 0 2rem rgba(0, 0, 0, .04); /* 멀어질수록 - 흐리고 옅게 */ } .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_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} } .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)} /* Company > About us (Who we are) 이미지+텍스트 교차 배치 [정리 완료] 원래 있던 .about/.about__cell/.about__text는 실사용처가 없는 예전 클래스명이라 삭제하고, 실제로 쓰이는 .aboutWho 계열만 남겼습니다. (.move__image는 이 섹션에서 그대로 사용 중) */ .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} .move__image {width: 55%; max-width: 78.5rem} .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;} @keyframes clipPath { 0% {opacity: 0; clip-path: inset(50%)} 100% {opacity: 1; clip-path: inset(0%)} } .text-line { /* ※ 왼쪽→오른쪽으로 훑으며 드러나는 방식(background-clip:text + 그라데이션 스윕) 대신, 전체 글자가 한번에 서서히 제 색(#1A1A1A)으로 밝아지는 방식으로 변경했습니다. 실제 애니메이션은 js/sub.js 의 GSAP ScrollTrigger 에서 color 값을 트윈합니다. */ position: relative; font-size: clamp(1.2rem, 3vw, 2.8rem); font-weight: 600; line-height: 1.2em; color: rgba(26, 26, 26, .08) } @media screen and (min-width: 768px) { .text-line {font-size: clamp(2rem, 2.8vw, 2.8rem) } } /* 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 {display: inline-block; 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); scroll-margin-top: calc(var(--headerHeight) + 2rem)} .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} } /* [보류/사용처 미확인] .viewPop 계열 - 인수인계 메모에 "기존 컴포넌트, 손대지 말 것"으로 되어 있으나 이번 전수 검색에서도 실사용 마크업을 찾지 못했습니다. ethic.php 팝업은 별도로 .ethicPop을 새로 만들어 썼기 때문에(.viewPop을 건드리지 않으려고 일부러 분리) 그 뒤로도 계속 미사용 상태로 보입니다. 다른 페이지에서 쓸 계획이 없다면 삭제해도 되고, 확실치 않으면 이대로 두셔도 됩니다. */ .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__* - "오시는 길"(주소·전화·팩스+지도) 컴포넌트인데, 원래 대상 페이지였던 company/map.php가 삭제되어 현재는 실제로 쓰는 곳이 없습니다. 추후 오시는 길/연락처 페이지를 다시 만들 때 이 클래스를 그대로 쓰시면 됩니다 (아이콘 이미지는 이미 준비돼 있음). [수정] 아이콘 경로를 /images/sub/about/ → /images/sub/company/ 로 정정했습니다. (다른 세션에서 about 폴더를 company로 재구성하면서 경로가 끊겨 있었습니다.) */ .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/company/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/company/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/company/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__* / .pageDl - 이미지+상세글이 반복되는 리스트형 콘텐츠 페이지용으로 보이는데, 지금 마크업 어디에서도 쓰는 곳을 못 찾았습니다. 아직 착수 전인 페이지(예: CUSTOMER 하위 서브페이지, 나머지 제품 상세)에서 쓸 계획이면 남겨두고, 아니면 삭제 후보입니다. */ .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는 자동 중앙정렬 */ .sub_center div > img:only-child {display: block; margin-inline: auto; max-width: 100%; height: auto} /* [확인 완료/삭제하지 마세요] 아래 .product__thums(썸네일 슬라이더)/.readmore(더보기 토글)/ .innerWrap·.infoWrap(탭 전환)/.resources__*(자료 아코디언)는 지금 마크업(product_view.php 등) 어디에도 쓰이는 곳이 없지만, js/product.js가 이 클래스들을 그대로 초기화하는 살아있는 코드입니다 (해당 요소가 없으면 조용히 무시될 뿐 에러는 안 남). 나중에 제품 상세페이지에 썸네일/자료 아코디언 섹션을 추가하면 이 클래스를 그대로 쓰면 되므로 삭제하지 말아 주세요. 이미지 자산(snp/thumLeft.png 등 4개)만 아직 준비되어 있지 않습니다. */ .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__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__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 .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 } } .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} .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__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} @media screen and (min-width: 1400px) { .resources__head {cursor: pointer} } /* [보류/사용처 미확인] .ohterProjects__* - 지금 마크업(페이지) 쪽에서는 이 클래스를 쓰는 곳을 못 찾았지만, js/product.js에서 $('.ohterProjects__list').slick({...})로 이미 슬라이더를 초기화하도록 살아있는 코드가 있습니다. (셀렉터가 없으면 slick 호출은 그냥 조용히 무시되니 지금 에러는 안 남) "다른 프로젝트" 같은 목록 슬라이더를 넣을 페이지가 생기면 이 클래스 그대로 쓰면 되니 삭제하지 말아 주세요. 참고: 완전히 동일한 구조인데 JS 연결이 끊긴 .related__* 는 중복으로 보여 이번에 삭제했습니다. */ .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) } @media screen and (min-width: 960px) { .projects {grid-template-columns: repeat(3, 1fr)} } .aboutImages{display:flex;flex-direction:column;gap:1rem} @media screen and (min-width: 960px) { .aboutImages{flex-direction:row;justify-content:space-between} } .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)별 구간 [확인 필요] 현재 product/product_history.php, kor/product/product_history.php는 이 구조 대신 milestones.jpg / milestones_mo.jpg 이미지 1장으로 대체되어 있어 실사용처가 없습니다. 추후 이미지 대신 실제 타임라인 마크업으로 교체할 계획이면 이 클래스들을 그대로 쓰시면 되고, 계속 이미지로 유지할 거라면 삭제해도 됩니다. ======================================================================== */ .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)"으로 최종 확정되면서 이 modifier 클래스를 쓰는 마크업이 없었습니다(재확인 결과 0건). 참고: disclosure.php/ir_press.php의 .boardTabPanel 래퍼는 여전히 마크업에 남아있지만 대응 CSS가 원래 없던 단순 래퍼 div라 그대로 둡니다. */ /* ======================================================================== 게시판 리스트 테이블 (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} /* [정리] 값이 없는 빈 선언(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) 섹션을 삭제했습니다. relations/financial.php 전용으로 만들었던 컴포넌트인데 해당 페이지 자체가 삭제되어 더 이상 쓰는 곳이 없습니다. 나중에 재무제표 페이지를 다시 만들게 되면 아래 oppor__table처럼 같은 톤으로 새로 작성하시면 됩니다. */ /* ======================================================================== 이미지형 게시판 리스트 (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: 0.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__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: #fcfcfc; border-radius: var(--gap-20); border: solid 1px #c9c9c9; padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem) clamp(6rem, 7vw, 8rem) } .contactBox__title {font-size: var(--fs-50); font-weight: 800; color: #333; text-align: center; margin-bottom: 1.6rem} .contactBox__desc {font-size: var(--fs-22); font-weight: 300; color: #666; text-align: center; line-height: 1.7; margin-bottom: var(--gap-40)} /* 연락처 리스트 (contactList) */ .contactList {display: flex; flex-direction: column; row-gap: 1.6rem; border-radius: var(--gap-10); border: solid 1px #c9c9c9; box-shadow: 0 0 .3rem rgba(0, 0, 0, .06), /* 글자 바로 옆 - 진하고 좁게 */ 0 0 .8rem rgba(0, 0, 0, .04), 0 0 1.6rem rgba(0, 0, 0, .03), 0 0 2rem rgba(0, 0, 0, .02); /* 멀어질수록 - 흐리고 옅게 */} .box__gr { } .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} /* 재무제표 등 다른 표와 동일한 톤(상단 굵은 라인 + 가로/세로 헤어라인 + 옅은 헤더 배경)으로 통일 */ .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%, 1); text-align: left; font-weight: 400;} @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; background-color: #eef0f4; margin-bottom: var(--gap-90)} .globalMap__bg {display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 1rem} /* 지도 자체에서 둥근 모서리를 처리 (부모 overflow:hidden 제거로 왼쪽 툴팁 카드가 지도 영역 밖으로도 잘리지 않고 보이도록 함) */ .globalMap__dot {position: absolute; z-index: 2; 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% + 1.2rem); width: 26rem; padding: .6rem .6rem .2rem; background-color: #fff; border-radius: 1.2rem; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.15); font-size: var(--fs-18); font-weight: 400; color: #222; line-height: 1.4; text-align: center; white-space: normal; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, .4rem); transition: opacity .2s, transform .2s, visibility .2s} .globalMap__tooltipImg {display: block; width: 100%; aspect-ratio: 26 / 14; -o-object-fit: cover; object-fit: cover; border-radius: .8rem} .globalMap__tooltipName {display: block; padding: 1rem .4rem 1.2rem; font-size: var(--fs-18); font-weight: 500; color: #222} .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} } /* ===================================================================== 브레드크럼(subVisual__nav) 상위/하위 메뉴 드롭다운 (공용) - .subVisual__navItem : 브레드크럼 구간 중 클릭 가능한 구간을 감싸는 래퍼. 기존 span:not(:last-child) 구분 화살표와 동일한 스타일을 자체적으로 갖습니다. - .subVisual__navTrigger : 실제 클릭되는 버튼(텍스트만 노출, 별도 꺾쇠 아이콘 없음 - 기존 구분 화살표와 겹쳐 보이는 문제가 있어 제외했습니다). - .subVisual__navDropdownHost / .subVisual__navDropdown : 드롭다운 목록. subVisual 섹션(overflow:hidden, 높이 고정) 바깥에 위치해야 하며, 화면상 공간을 차지하지 않는 host(height:0) 안에서 JS가 트리거 버튼 좌표를 읽어 절대좌표로 위치를 맞춥니다. (js/breadcrumb-nav.js 참고, inc/footer.php에서 전역 로드) ===================================================================== */ .subVisual__navItem { position: relative; display: inline-flex; align-items: center; } /* ※ 구분용 ">" 화살표와 여백은 마지막 구간이 아닐 때만 붙입니다(기존 일반 span 브레드크럼과 동일한 규칙). 히스토리가 2개(예: Company > CEO)라서 이 트리거가 마지막 구간이 되는 경우, 뒤에 불필요한 ">" 가 남지 않도록 하기 위함입니다. */ .subVisual__navItem:not(:last-child) { padding-right: 1.5rem; margin-right: 1rem; } .subVisual__navItem: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%; right: 0; transform: translateY(-50%); transition: all .5s; } .subVisual__nav.navOff .subVisual__navItem:not(:last-child)::after { background: url(/images/sub/navArr.png) no-repeat center/cover; } .subVisual__navTrigger { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; } /* 포지셔닝 호스트: 화면상 실제 공간은 차지하지 않고(height:0), 자식 드롭다운의 절대좌표 기준점(position:relative) 역할만 합니다. */ .subVisual__navDropdownHost { position: relative; height: 0; } .subVisual__navDropdown { position: absolute; top: 0; left: 0; min-width: 21rem; background-color: #fff; border-radius: .8rem; box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .18); padding: 1rem 0; opacity: 0; visibility: hidden; transform: translateY(-.5rem); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; z-index: 50; } .subVisual__navDropdownHost.is-open .subVisual__navDropdown { opacity: 1; visibility: visible; transform: translateY(0); } .subVisual__navDropdown li { list-style: none; } .subVisual__navDropdown li a { display: block; padding: 1rem 2rem; font-size: 1.5rem; font-weight: 500; color: #333; white-space: nowrap; transition: background-color .2s, color .2s; } .subVisual__navDropdown li a:hover, .subVisual__navDropdown li a:focus-visible { background-color: #f2f6fb; color: var(--mainColor, #0066b3); } @media screen and (max-width: 767px) { .subVisual__navDropdown { min-width: 18rem; } .subVisual__navDropdown li a { font-size: 1.4rem; padding: .9rem 1.6rem; } }