@charset "utf-8";


/*head.sub.php로 셋팅하는 값 = full-h, full-w*/
:root {
    --primary: #3829cc;
    --seconday: #666;
    --ca-color: #333;
    --full-h: calc(var(--vh, 1vh) * 100);
    --full-w: calc(var(--vw, 1vw) * 100);
    --header-h: 80px;
    --lnb-h: 48px;
    /* section */
    --pad-section: clamp(5rem, 0.924rem + 7.56vw, 10rem); /* 42 → 160 */
    --pad-section-sm: clamp(4rem, 3.192rem + 3.59vw, 7.5rem); /* 64 → 120 */
    --pad-section-xs: clamp(3rem, 2.538rem + 2.05vw, 5rem); /* 48 → 80 */
    /* space */
    --space-1: clamp(0.0625rem, 0.04rem + 0.1vw, 0.125rem); /* 1 → 2 */
    --space-2: clamp(0.125rem, 0.08rem + 0.2vw, 0.25rem); /* 2 → 4 */
    --space-3: clamp(0.1875rem, 0.119rem + 0.3vw, 0.375rem); /* 3 → 6 */
    --space-4: clamp(0.25rem, 0.159rem + 0.4vw, 0.5rem); /* 4 → 8 */
    --space-5: clamp(0.3125rem, 0.199rem + 0.5vw, 0.625rem); /* 5 → 10 */
    --space-6: clamp(0.375rem, 0.239rem + 0.6vw, 0.75rem); /* 6 → 12 */
    --space-7: clamp(0.4375rem, 0.278rem + 0.71vw, 0.875rem); /* 7 → 14 */
    --space-8: clamp(0.5rem, 0.318rem + 0.81vw, 1rem); /* 8 → 16 */
    --space-9: clamp(0.5625rem, 0.358rem + 0.91vw, 1.125rem); /* 9 → 18 */
    --space-10: clamp(0.4375rem, 0.383rem + 0.24vw, 0.625rem); /* 7 → 10 */
    --space-12: clamp(0.5rem, 0.409rem + 0.4vw, 0.75rem); /* 8 → 12 */
    --space-14: clamp(0.5625rem, 0.449rem + 0.51vw, 0.875rem); /* 9 → 14 */
    --space-16: clamp(0.75rem, 0.568rem + 0.81vw, 1rem); /* 12 → 16 */
    --space-18: clamp(0.875rem, 0.693rem + 0.81vw, 1.125rem); /* 14 → 18 */
    --space-20: clamp(1rem, 0.818rem + 0.81vw, 1.25rem); /* 16 → 20 */
    --space-24: clamp(1.25rem, 1.068rem + 0.81vw, 1.5rem); /* 20 → 24 */
    --space-28: clamp(1.125rem, 0.67rem + 2.03vw, 1.75rem); /* 18 → 28 */
    --space-32: clamp(1.25rem, 0.705rem + 2.42vw, 2rem); /* 20 → 32 */
    --space-36: clamp(1.5rem, 0.955rem + 2.42vw, 2.25rem); /* 24 → 36 */
    --space-40: clamp(1.625rem, 0.897rem + 3.24vw, 2.5rem); /* 26 → 40 */
    --space-48: clamp(2rem, 1.273rem + 3.24vw, 3rem); /* 32 → 48 */
    --space-56: clamp(2.25rem, 1.341rem + 4.05vw, 3.5rem); /* 36 → 56 */
    --space-64: clamp(2.5rem, 1.409rem + 4.86vw, 4rem); /* 40 → 64 */
}

.en {
    font-family: "Montserrat", sans-serif;
}

.inter{
   font-family: "Inter", sans-serif;
}

/* container 커스텀 */
.container {
    max-width: 100% !important;
     margin: 0 auto;
    padding: 0 max(2.9167vw, 3.2rem) ;
}
.px-container{
 padding: 0 max(2.9167vw, 3.2rem) ;
}
@media screen and (max-width: 767px) {
    .container {
        padding: 0 min(5.1282vw, 3.6rem);
    }
    .px-container{
        padding: 0 min(5.1282vw, 3.6rem);
    }
}

/* ════════ 헤더 topbar (그라데이션 + 마스크 페이드) ════════ */
#header {
    --hdr-tint-1: rgba(255, 252, 248, 0.92);
    --hdr-tint-2: rgba(255, 252, 248, 0.7);
    --hdr-tint-0: rgba(255, 252, 248, 0);
    background: linear-gradient(
        to bottom,
        var(--hdr-tint-1) 0%,
        var(--hdr-tint-2) 55%,
        var(--hdr-tint-0) 100%
    );
}

#header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    pointer-events: none;
}
#header #logo {
  background-image: url(../img/logo1_black.png);
  aspect-ratio: 3424/622;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  transition: filter 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#header.is-sub {
  transition: background 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#header.is-sub::before {
  transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#header .toggle span {
  transition:
    transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1024px) {
  #header #logo {
    background-position: center;
  }
}

/* 서브페이지 + 스크롤 최상단: 다크 배너 위 화이트 헤더 */
#header.is-sub.is-top {
    background: transparent;
}

#header.is-sub.is-top::before {
    opacity: 0;
}

#header.is-sub.is-top #logo {
    filter: brightness(0) invert(1);
}

#header.is-sub.is-top .lang #langLabelKo,
#header.is-sub.is-top .lang #langLabelEn {
    color: rgba(255, 255, 255, 0.45);
}

#header.is-sub.is-top .lang #langLabelKo.text-dark,
#header.is-sub.is-top .lang #langLabelEn.text-dark {
    color: #fff;
}

#header.is-sub.is-top .lang #langToggle {
    background-color: rgba(255, 255, 255, 0.35);
}

/* 메뉴가 열린 동안에는 X 아이콘이 밝은 드로어 위에 오므로 검정 유지 */
body:not(.menu-open) #header.is-sub.is-top .toggle span {
    background-color: #fff;
}

/*
 * body.menu-open
 * - 오프캔버스(nav-menu) > 스크림 > 기본 헤더 콘텐츠
 * - 토글만 최상단 (닫기 X). 로고/언어는 숨겨 오프캔버스 위에 겹치지 않게 함
 */
body.menu-open #header {
    z-index: 90;
    background: transparent;
    pointer-events: none;
}

body.menu-open #header::before {
    display: none;
}

body.menu-open #header h1,
body.menu-open #header .lang {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.menu-open #header .toggle {
    pointer-events: auto;
    z-index: 91;
}

body.menu-open .toggle span:nth-child(1) {
    transform: translateY(3.75px) rotate(45deg);
}

body.menu-open .toggle span:nth-child(2) {
    transform: translateY(-3.75px) rotate(-45deg);
}

body.menu-open .scrim {
    z-index: 70;
    opacity: 1;
    visibility: visible;
}

body.menu-open .nav-menu {
    z-index: 80;
    transform: translateX(0);
}

/* Google Translate 잔여 UI 숨김 */
.goog-te-banner-frame,
body > .skiptranslate,
.goog-te-gadget {
    display: none !important;
}

html.translated-ltr body {
    top: 0 !important;
}

/* ════════ 메인 공통 애니메이션션 ════════ */
@keyframes visual-reveal-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes visual-img-scale {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* ════════ 메인 visual hero ════════ */
#main {
    --CW: 719;
    --H: 320;
    --scale: 1;
    --k: calc(min(100vw / 1920, (100svh - var(--header-h) - 48px) / var(--H)) * var(--scale));
}


.visual .slogan .char {
    display: inline-block;
    opacity: 0;
    filter: blur(min(12px, 0.625vw));
    transition:
        opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
        filter 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.visual .slogan .char.revealed {
    opacity: 1;
    filter: blur(0);
}

/* 서브페이지 히어로: 메인 슬로건과 동일한 글자별 blur 등장 */
#sub-hero .char {
    display: inline-block;
    opacity: 0;
    filter: blur(min(12px, 0.625vw));
    transition:
        opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
        filter 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#sub-hero .char.revealed {
    opacity: 1;
    filter: blur(0);
}

/* 진입 시 배경 이미지가 1.2 → 1로 축소되며 나타남 */
#sub-hero-bg {
    animation: visual-img-scale 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    #sub-hero .char {
        opacity: 1;
        filter: none;
        transition: none;
    }

    #sub-hero-bg {
        opacity: 1;
        animation: none;
    }
}



.visual .visual_img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background: #fff;
    transform: translateY(0);
    pointer-events: none;
}

.visual .visual_img img {
    opacity: 0;
}

.visual .visual_list.start .visual_img::before {
    opacity: 1;
    animation: visual-reveal-up 1.2s ease forwards;
}

.visual .visual_list.start .visual_img img {
    opacity: 1;
    animation: visual-img-scale 1s ease forwards;
}

.visual .visual_list.start .visual_img:nth-child(2)::before,
.visual .visual_list.start .visual_img:nth-child(2) img {
    animation-delay: 0.2s;
}

.visual .visual_list.start .visual_img:nth-child(3)::before {
    animation: visual-reveal-up 1.55s ease forwards;
    animation-delay: 0.2s;
}

.visual .visual_list.start .visual_img:nth-child(3) img {
    animation-delay: 0.2s;
}

.visual .visual_list.start .visual_img:nth-child(4)::before,
.visual .visual_list.start .visual_img:nth-child(4) img {
    animation-delay: 0.4s;
}

.visual .visual_list.start .visual_img:nth-child(5)::before,
.visual .visual_list.start .visual_img:nth-child(5) img {
    animation-delay: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
    .visual .slogan .char {
        opacity: 1;
        filter: none;
        transition: none;
    }

    .visual .visual_img::before {
        display: none;
    }

    .visual .visual_img img {
        opacity: 1;
    }

    .visual .visual_list.start .visual_img::before,
    .visual .visual_list.start .visual_img img {
        animation: none;
    }
}


/* ════════ Strength thumbs ════════ */
.strength .strength-thumb {
    opacity: 0.45;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.strength .strength-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.strength .strength-thumb.is-active {
    opacity: 1;
}

.strength .strength-thumb.is-active::after {
    border-color: #111;
}

/* ════════ Quality expand cards ════════
 * flex 단축속성 transition은 보간이 끊겨 뚜둑거림 → flex-grow만 전환 */
.quality .quality-card {
    flex: 1 1 auto;
    min-width: 0;
}

.quality .quality-card__active {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out;
    transition-delay: 0s;
}

.quality .quality-card.is-active .quality-card__active {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.quality .quality-card__cta {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.quality .quality-card.is-active .quality-card__cta {
    border-color: transparent;
    background-color: #fff;
    color: #232323;
}

@media (min-width: 1024px) {
    .quality .quality-card {
        flex: 1 1 0;
        transition: flex-grow 0.55s ease;
    }

    .quality .quality-card.is-active {
        flex-grow: 2.2;
    }
}

/* ════════ Pain points stack ════════ */
.pain-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.pain-card {
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    padding: var(--space-32);
    opacity: 0.35;
    transform: translateY(12px);
    transition: opacity 0.55s cubic-bezier(0.17, 0.84, 0.44, 1), transform 0.55s cubic-bezier(0.17, 0.84, 0.44, 1), background 0.35s ease, border-color 0.35s ease;
}

.pain-card.is-active {
    opacity: 1;
    transform: none;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

/* ════════ Process steps ════════ */
.process .process-step {
    opacity: 0.35;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.process .process-step.is-on {
    opacity: 1;
    transform: none;
}

.process .process-step.is-on .process-step__num {
    border-color: #111;
    background: #111;
    color: #fff;
}

.process .process-step__fill {
    transition: width 0.55s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.process .process-step.is-on .process-step__fill {
    width: 100%;
}


/* ════════ CTA cards ════════ */
.cta-card.is-active {
    border-color: #131313;
    background: #131313;
}

.cta-card.is-active h3,
.cta-card.is-active > span {
    color: #fff;
}

.cta-card.is-active p {
    color: rgba(255, 255, 255, 0.7);
}

.cta-card.is-active .en {
    color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .pain-card,
    .process-step,
    .marquee__track {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
        clip-path: none;
    }

    .process-step__fill {
        width: 100%;
    }
}


/* ════════ 사업영역(business) ════════ */

/* 스크롤에 따라 단어가 한 단어씩 진해지는 문장 */
.text-scrub .hl-word {
    display: inline-block;
    opacity: 0.18;
}

.text-scrub.no-anim .hl-word {
    opacity: 1;
}

/* 좌측 사업영역 네비 */
.biz-nav__item {
    opacity: 0.4;
    transition: opacity 0.45s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.biz-nav__item:hover,
.biz-nav__item.is-active {
    opacity: 1;
}

.biz-nav__item .bar {
    width: 0;
    height: 1px;
    flex-shrink: 0;
    background: #232323;
    transition: width 0.45s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.biz-nav__item.is-active .bar {
    width: 1.75rem;
}

/* 사업영역 블록 */
.biz-block .biz-block__no {
    transition: color 0.5s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.biz-block.is-on .biz-block__no {
    color: #232323;
}

@media (min-width: 1024px) {
    .biz-block {
        opacity: 0.35;
        transition: opacity 0.6s cubic-bezier(0.17, 0.84, 0.44, 1);
    }

    .biz-block.is-on {
        opacity: 1;
    }
}

/* 공급망 플로우 */
.flow-progress {
    transform: scaleX(0);
    transform-origin: left center;
}

.flow-step {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    transition:
        opacity 0.6s cubic-bezier(0.17, 0.84, 0.44, 1),
        transform 0.6s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.flow-step.is-on {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.flow-step__icon {
    transition:
        background-color 0.5s cubic-bezier(0.17, 0.84, 0.44, 1),
        color 0.5s cubic-bezier(0.17, 0.84, 0.44, 1),
        border-color 0.5s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.flow-step.is-on .flow-step__icon {
    border-color: transparent;
    background-color: #232323;
    color: #fff;
}

/* 강점 카드 (데스크톱 가로 스크롤) */
.strength-track {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .text-scrub .hl-word,
    .biz-block,
    .flow-step {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .flow-progress {
        transform: scaleX(1);
    }
}


/* ════════ ESG 경영(esg) ════════ */

/* 좌측 대문자 E · S · G 교체 */
.esg-letter {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.55s cubic-bezier(0.17, 0.84, 0.44, 1),
        transform 0.55s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.esg-letter.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* 윤리경영 아코디언 */
.esg-acc__body {
    height: 0;
    overflow: hidden;
}

.esg-acc__item.is-open > .esg-acc__body {
    height: auto;
}

.esg-acc__icon {
    transition: transform 0.45s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.esg-acc__item.is-open .esg-acc__icon {
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .esg-letter {
        transition: none;
    }

    .esg-acc__icon {
        transition: none;
    }
}


/* ════════ 오시는 길(contact) ════════ */
.contact-card {
    transition:
        border-color 0.45s cubic-bezier(0.17, 0.84, 0.44, 1),
        transform 0.45s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.contact-card:hover {
    border-color: rgba(35, 35, 35, 0.45);
    transform: translateY(-4px);
}

.contact-card__icon {
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.contact-card:hover .contact-card__icon {
    transform: translateY(-3px) scale(1.06);
}

/* 복사 버튼 상태 */
.copy-btn__done {
    display: none;
}

.copy-btn.is-copied {
    color: #232323;
}

.copy-btn.is-copied .copy-btn__label {
    display: none;
}

.copy-btn.is-copied .copy-btn__done {
    display: inline;
}

/* 복사 폴백용 임시 입력 요소 */
.copy-proxy {
    position: fixed;
    top: -9999px;
    left: -9999px;
    opacity: 0;
}

/* 문의 전 체크리스트 */
.contact-check__item i {
    transition:
        color 0.4s cubic-bezier(0.17, 0.84, 0.44, 1),
        transform 0.4s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.contact-check__item:hover i {
    color: #232323;
    transform: translate(3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
    .contact-card,
    .contact-card__icon,
    .contact-check__item i {
        transition: none;
        transform: none;
    }
}


/* ════════ 게시판 목록(board) ════════ */
.board-row {
    transition: background-color 0.4s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.board-row:hover {
    background-color: #f4f2ef;
}

.board-row.is-notice {
    background-color: rgba(35, 35, 35, 0.03);
}

.board-row__title {
    transition: transform 0.4s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.board-row:hover .board-row__title {
    transform: translateX(4px);
}

.board-row__arrow {
    transition:
        color 0.4s cubic-bezier(0.17, 0.84, 0.44, 1),
        transform 0.4s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.board-row:hover .board-row__arrow {
    color: #232323;
    transform: translateX(4px);
}

/* 게시판 목록 페이지에서는 목록 상단 관리자 버튼만 사용 */
.board #bo_btn_top {
    float: none;
    margin: 0;
}

.board .btn_bo_user {
    float: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.board .btn_bo_user > li {
    float: none;
    width: auto;
    margin: 0;
    background: transparent;
}

/* 카테고리 탭 */
.board #bo_cate a {
    border-color: rgba(35, 35, 35, 0.2);
    color: #232323;
    opacity: 1;
    font-size: 0.875rem;
    line-height: 1.2;
    padding: 0.625rem 1.125rem;
    transition:
        background-color 0.35s cubic-bezier(0.17, 0.84, 0.44, 1),
        color 0.35s cubic-bezier(0.17, 0.84, 0.44, 1),
        border-color 0.35s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.board #bo_cate a:focus,
.board #bo_cate a:hover,
.board #bo_cate a:active,
.board #bo_cate #bo_cate_on {
    background: #232323;
    border-color: #232323;
    color: #fff;
    box-shadow: none;
}

/* 페이지네이션 */
.board .board-paging .pg_wrap {
    padding: 0;
}

.board .board-paging .pg_page,
.board .board-paging .pg_current {
    min-width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 0 0.15rem;
    border-radius: 9999px;
    border: 1px solid rgba(35, 35, 35, 0.15);
    background: transparent;
    color: #666;
    font-family: "Montserrat", sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    transition:
        background-color 0.35s cubic-bezier(0.17, 0.84, 0.44, 1),
        color 0.35s cubic-bezier(0.17, 0.84, 0.44, 1),
        border-color 0.35s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.board .board-paging .pg_page:hover {
    border-color: #232323;
    background: transparent;
    color: #232323;
}

.board .board-paging .pg_current {
    border-color: #232323;
    background: #232323;
    color: #fff;
}

.board .board-paging .pg_start,
.board .board-paging .pg_prev,
.board .board-paging .pg_next,
.board .board-paging .pg_end {
    text-indent: 0;
    overflow: visible;
    background-image: none !important;
    font-size: 0;
}

.board .board-paging .pg_start::before { content: "«"; font-size: 0.875rem; }
.board .board-paging .pg_prev::before { content: "‹"; font-size: 0.875rem; }
.board .board-paging .pg_next::before { content: "›"; font-size: 0.875rem; }
.board .board-paging .pg_end::before { content: "»"; font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
    .board-row,
    .board-row__title,
    .board-row__arrow {
        transition: none;
        transform: none;
    }
}