@charset "utf-8";
/* ================================================================
 * 회사소개 - 위캔글로벌 (/company) 서브페이지 스타일
 * Figma node 6549:1175 기준. 폰트 : Pretendard / SBAggro.
 * 기존 레이아웃(#container 930px 고정 등)을 이 페이지에서만 해제한다.
 * ================================================================ */

/* --- 레거시 고정폭 레이아웃 해제 (이 페이지 한정) --- */
body:has(.wg-company) #wrapper,
body:has(.wg-company) #ft{min-width:0}
body:has(.wg-company) #container_wr{width:auto;max-width:none;padding:0}
body:has(.wg-company) #container{float:none;width:auto;margin:0;min-height:0;padding:0}
body:has(.wg-company) #container_title{display:none}
body:has(.wg-company) #aside{display:none}
body:has(.wg-company) hr{display:none}

.wg-company{font-family:'Pretendard',sans-serif;color:#111;line-height:1.5;-webkit-font-smoothing:antialiased}
.wg-company *{box-sizing:border-box}
.wg-company img{max-width:100%}

/* --- 서브페이지 배너 (full-bleed) --- */
.cmp-banner{position:relative;width:100%;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.cmp-banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.cmp-banner::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:1}
/* 상단 여백 : 고정 헤더(80px)와 겹치지 않도록 넉넉히 (내용이 아래로 내려감) */
.cmp-banner__head{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:130px 20px 40px}
.cmp-banner__crumb{margin:0;font-size:16px;font-weight:400;letter-spacing:-.64px;color:#c9c9c9}
.cmp-banner__crumb .cmp-banner__sep{opacity:.7;margin:0 2px}
.cmp-banner__crumb em{font-style:normal;color:#f42500}
.cmp-banner__title{margin:0;font-size:42px;font-weight:600;letter-spacing:-1.68px;color:#fff;text-align:center;line-height:1.4}

/* 하위메뉴 탭 */
.cmp-tabs{position:relative;z-index:2;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cmp-tabs::-webkit-scrollbar{display:none}
/* inline-flex + min-width:100% : 탭이 화면에 들어오면 가운데 정렬, 넘치면 가로 스크롤(양끝 잘림 없음) */
.cmp-tabs__inner{display:inline-flex;min-width:100%;justify-content:center;align-items:center}
.cmp-tab{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:10px 45px;font-size:18px;font-weight:400;letter-spacing:-.36px;color:#fff;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.cmp-tab:hover{border-bottom-color:rgba(255,255,255,.5)}
.cmp-tab.is-active{border-bottom-color:#f42500}

/* --- 본문 컨테이너 --- */
/* 배너 ~ 첫 콘텐츠 사이 상단 여백 : 시안 기준 185px (전체 서브페이지 공통) */
.cmp-inner{max-width:1600px;margin:0 auto;padding:185px 40px 120px}
.history-inner.cmp-inner{padding:185px 40px 0px}
/* 섹션 A : 인트로 슬로건 박스 */
.cmp-intro{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:100px 20px;border-radius:15px;overflow:hidden;text-align:center;background-color:#111;background-repeat:no-repeat;background-position:center bottom;background-size:cover}
.cmp-intro::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:1}
.cmp-intro__box{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px}
.cmp-intro__eyebrow{margin:0;font-size:20px;font-weight:500;letter-spacing:-.2px;color:#fff}
.cmp-intro__title{margin:0;font-size:42px;font-weight:700;letter-spacing:-.84px;line-height:1.3;color:#fff}

/* 섹션 B : Mission / Vision */
.cmp-mv{display:flex;margin-top:80px;border-top:1px solid #ccc;border-bottom:1px solid #ccc}
.cmp-mv__card{flex:1 0 0;min-width:0;display:flex;align-items:flex-start;gap:26px;padding:40px 50px 50px}
.cmp-mv__card + .cmp-mv__card{border-left:1px solid #ccc}
.cmp-mv__text{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.cmp-mv__no{font-family:'SBAggro',sans-serif;font-weight:300;font-size:20px;letter-spacing:-.2px;color:#8b8b8b;text-transform:uppercase}
.cmp-mv__tit{margin:0;font-size:30px;font-weight:600;line-height:1.3;color:#111}
.cmp-mv__lead{margin:0;font-size:20px;font-weight:500;line-height:1.5;color:#111}
.cmp-mv__desc{margin:0;font-size:18px;font-weight:400;line-height:1.5;color:#222}
.cmp-mv__icon{flex-shrink:0;display:flex;align-items:center;height:95px}
.cmp-mv__icon img{height:95px;width:auto;object-fit:contain}

/* 섹션 C : Core values */
.cmp-values{margin-top:180px}
.cmp-values__head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
.cmp-values__label{margin:0;font-family:'SBAggro',sans-serif;font-weight:300;font-size:16px;letter-spacing:-.16px;color:#f42500;text-transform:uppercase}
.cmp-values__heading{margin:0;font-size:42px;font-weight:600;letter-spacing:-.84px;line-height:1.3;color:#111}
.cmp-values__row{display:flex;align-items:center;gap:50px;padding:40px 0;border-top:1px solid #ccc}
.cmp-values__row:last-child {padding:40px 0px 180px}
/*.cmp-values__row:last-child{border-bottom:1px solid #ccc}*/
.cmp-values__text{flex:1 0 0;min-width:0;display:flex;align-items:flex-start;gap:40px}
.cmp-values__no{font-family:'SBAggro',sans-serif;font-weight:300;font-size:28px;letter-spacing:-.28px;color:#f42500}
.cmp-values__body{display:flex;flex-direction:column;gap:26px}
.cmp-values__tit{margin:0;font-size:34px;font-weight:600;line-height:1.3;color:#111}
.cmp-values__desc{margin:0;font-size:18px;font-weight:400;line-height:1.5;color:#222}
.cmp-values__img{flex-shrink:0;width:512px;max-width:42%}
.cmp-values__img img{display:block;width:100%;height:260px;object-fit:cover;border-radius:10px}

/* --- 스크롤 등장 모션 --- */
.wg-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.wg-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .wg-reveal{opacity:1;transform:none;transition:none} }

@media (max-width:1620px){
.cmp-intro__bg {object-fit:cover;}
}
/* ================= 반응형 ================= */
@media (max-width:1280px){
    .cmp-mv__desc br,.cmp-values__desc br{display:none}
    .cmp-mv__text,.cmp-values__body{gap:18px}
}
@media (max-width:1024px){
    .cmp-banner__title{font-size:36px}
    .cmp-intro__title{font-size:34px}
    .cmp-values__heading{font-size:34px}
    .cmp-values__tit{font-size:28px}
    .cmp-mv__tit{font-size:26px}
    .cmp-tab{padding:10px 25px;font-size:17px}
    .cmp-inner{padding:130px 30px 96px}
    .history-inner.cmp-inner{padding:130px 30px 0}
}
@media (max-width:768px){
    .cmp-banner{min-height:290px}
    .cmp-banner__head{padding:100px 20px 30px}
    .cmp-banner__title{font-size:28px;letter-spacing:-1px}
    /* 탭 : 한 줄에 3개씩 보이고 초과 시 가로 스크롤 (탭 3개 이하는 화면 폭 균등 분할) */
    .cmp-tabs{overflow-x:auto}
    .cmp-tabs__inner{display:flex;justify-content:flex-start;width:calc(var(--cmp-cols) / min(var(--cmp-cols), 3) * 100%);min-width:100%}
    .cmp-tab{flex:0 0 calc(100% / var(--cmp-cols));padding:9px 8px;font-size:15px;white-space:nowrap;text-align:center}
    .cmp-inner{padding:90px 20px 70px}
    .history-inner.cmp-inner{padding:90px 20px 0}
    .cmp-intro{padding:56px 20px;gap:14px}
    .cmp-intro__eyebrow{font-size:15px}
    .cmp-intro__title{font-size:24px}
    /* Mission/Vision 세로 적층 */
    .cmp-mv{flex-direction:column;margin-top:56px}
    .cmp-mv__card{padding:32px 4px}
    .cmp-mv__card + .cmp-mv__card{border-left:0;border-top:1px solid #ccc}
    .cmp-mv__tit{font-size:22px}
    .cmp-mv__lead{font-size:17px}
    .cmp-mv__desc{font-size:15px}
    .cmp-mv__icon{height:64px}
    .cmp-mv__icon img{height:64px}
    /* Core values 세로 적층 (텍스트 → 이미지) */
    .cmp-values{margin-top:72px}
    .cmp-values__heading{font-size:26px}
    .cmp-values__row{flex-direction:column;align-items:stretch;gap:24px;padding:32px 0}
    .cmp-values__text{gap:20px}
    .cmp-values__no{font-size:24px}
    .cmp-values__tit{font-size:22px}
    .cmp-values__desc{font-size:15px}
    .cmp-values__img{width:100%;max-width:none}
    .cmp-values__img img{height:200px}
    .cmp-values__row:last-child {padding:40px 0px 100px}
}
@media (max-width:420px){
    .cmp-values__text{flex-direction:column;gap:10px}
    .cmp-values__row:last-child {padding:40px 0px 50px}
}

/* ================= 인사말 (greeting) ================= */
.cmp-greet{display:flex;gap:60px;align-items:stretch}
.cmp-greet__img{flex:0 0 42%;min-width:0}
.cmp-greet__img img{display:block;width:100%;height:100%;min-height:420px;max-height:600px;object-fit:cover;border-radius:15px}
.cmp-greet__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:36px;align-items:flex-start}
.cmp-greet__head{display:flex;flex-direction:column;gap:10px}
.cmp-greet__h{margin:0;font-size:30px;font-weight:700;line-height:1.3;letter-spacing:-.6px;color:#111}
.cmp-greet__sub{margin:0;font-size:26px;font-weight:600;line-height:1.4;letter-spacing:-.52px;color:#111}
.cmp-greet__text{font-size:18px;font-weight:400;line-height:1.5;letter-spacing:-.36px;color:#111}
.cmp-greet__sign{width:420px;max-width:60%;height:auto;opacity:.15;margin-top:8px}

/* ================= 오시는 길 (location) ================= */
.cmp-loc__head{display:flex;flex-direction:column;gap:20px}
.cmp-loc__title{margin:0;font-size:38px;font-weight:600;line-height:1.3;letter-spacing:-.76px;color:#111}
.cmp-loc__desc{margin:0;font-size:18px;font-weight:400;line-height:1.5;letter-spacing:-.36px;color:#555}
.cmp-loc__list{margin-top:40px}
.cmp-loc__row{display:flex;gap:69px;align-items:center;padding:40px 0;border-top:1px solid #ddd}
.cmp-loc__map{flex:0 0 52%;min-width:0}
.cmp-loc__map img,.cmp-loc__map iframe{display:block;width:100%;height:340px;border:0;border-radius:15px;object-fit:cover;background:#d9d9d9}
.cmp-loc__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px}
.cmp-loc__name{margin:0;font-size:25px;font-weight:600;line-height:1.3;letter-spacing:-.5px;color:#111}
.cmp-loc__name em{font-style:normal;color:#f42500}
.cmp-loc__item{display:flex;align-items:center;gap:8px;margin:0;font-size:20px;font-weight:500;line-height:1.5;letter-spacing:-.4px;color:#333}
.cmp-loc__item i{flex-shrink:0;width:26px;text-align:center;color:#f42500;font-size:22px}

@media (max-width:1024px){
    .cmp-greet{gap:40px}
    .cmp-greet__h{font-size:26px}
    .cmp-greet__sub{font-size:22px}
    .cmp-loc__title{font-size:30px}
    .cmp-loc__row{gap:40px}
    .cmp-loc__name{font-size:22px}
    .cmp-loc__item{font-size:17px}
}
@media (max-width:768px){
    /* 인사말 : 이미지 위, 본문 아래 */
    .cmp-greet{flex-direction:column;gap:28px}
    .cmp-greet__img{flex:none;width:100%}
    .cmp-greet__img img{min-height:260px;max-height:360px}
    .cmp-greet__body{gap:24px}
    .cmp-greet__h{font-size:22px}
    .cmp-greet__sub{font-size:19px}
    .cmp-greet__text{font-size:15px}
    .cmp-greet__sign{max-width:70%}
    /* 오시는 길 : 지도 위, 정보 아래 */
    .cmp-loc__title{font-size:26px}
    .cmp-loc__desc{font-size:15px}
    .cmp-loc__list{margin-top:24px}
    .cmp-loc__row{flex-direction:column;align-items:stretch;gap:24px;padding:28px 0}
    .cmp-loc__map{flex:none;width:100%}
    .cmp-loc__map img,.cmp-loc__map iframe{height:240px}
    .cmp-loc__name{font-size:20px}
    .cmp-loc__item{font-size:15px}
    .cmp-loc__item i{font-size:18px}
}

/* ================= 연혁 (history) ================= */
.cmp-hist__head{display:flex;flex-direction:column;gap:14px}
.cmp-hist__heading{margin:0;font-size:38px;font-weight:600;line-height:1.3;letter-spacing:-.76px;color:#111}
.cmp-hist__sub{margin:0;font-size:18px;font-weight:400;line-height:1.5;letter-spacing:-.36px;color:#555}
.cmp-hist-list{margin-top:8px}
.cmp-hist{padding:60px 0px 100px}
.cmp-hist.hist_sub{padding:100px 0}
.cmp-hist--dark{background:#111}
/* align-items:stretch 로 aside 가 우측 타임라인 높이만큼 늘어나야 sticky 이미지가 스크롤 구간 내내 고정(걸림)된다 */
.cmp-hist__inner{display:flex;gap:90px;align-items:stretch;max-width:1600px;margin:0 auto;padding:0 40px}
.cmp-hist__aside{flex:0 0 42%;max-width:570px;min-width:0}
.cmp-hist__card{position:-webkit-sticky;position:sticky;top:100px;border-radius:10px;overflow:hidden}
.cmp-hist__photo{display:block;width:100%;height:320px;object-fit:cover}
/* .cmp-hist__card::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(0,0,0,.4))} */
.cmp-hist__label{position:absolute;left:24px;bottom:20px;z-index:1;font-size:30px;font-weight:700;line-height:1.4;letter-spacing:-.6px;color:#fff}
.cmp-hist__label em{font-style:normal;color:#ce0000}

.cmp-hist__timeline{flex:1;min-width:0;position:relative;padding-left:0}
/* 세로선 길이는 JS(company.js)가 첫 점~마지막 점 중심에 맞춰 --hist-line-top/-h 로 지정 (없으면 기존값 폴백) */
.cmp-hist__timeline::before{content:"";position:absolute;left:7px;top:var(--hist-line-top,12px);height:var(--hist-line-h,calc(100% - 39px));width:2px;background:#e5e5e5}
/* 연도 행 : dot 을 flex 아이템으로 두어 연도 텍스트와 항상 수직 중앙 정렬(패딩 비대칭 영향 X). gap 44 + dot 16 = 텍스트 시작 60px (이벤트와 동일) */
.cmp-hist__year{position:relative;display:flex;align-items:center;gap:44px;padding:26px 0 8px 0}
.cmp-hist__year:first-child{padding-top:4px}
.cmp-hist__year b{font-size:22px;font-weight:800;color:#ce0000;letter-spacing:-.44px}
/* 연도 dot : 빨간 링 + 흰 간격 + 가운데 빨간 점 (시안) */
.cmp-hist__ydot{flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:#ce0000;border:3px solid #fff;box-shadow:0 0 0 2px #ce0000;box-sizing:border-box}
.cmp-hist__event{position:relative;display:flex;align-items:baseline;column-gap:60px;padding:16px 0 16px 60px}
.cmp-hist__edot{position:absolute;left:4px;top:26px;width:8px;height:8px;border-radius:50%;background:#c4c4c4}
/* 각 연도의 마지막 월(다음에 연도가 오는 이벤트) + 전체 마지막 월 : 아래 여백 2배 */
.cmp-hist__event:has(+ .cmp-hist__year),
.cmp-hist__timeline > .cmp-hist__event:last-child{padding-bottom:50px}
.cmp-hist__mon{flex:0 0 auto;min-width:44px;font-size:18px;font-weight:600;color:#111}
.cmp-hist__desc{font-size:18px;font-weight:400;line-height:1.6;color:#111}
/* 어두운 그룹 */
.cmp-hist--dark .cmp-hist__timeline::before{background:#3a3a3a}
.cmp-hist--dark .cmp-hist__edot{background:#666}
.cmp-hist--dark .cmp-hist__mon,.cmp-hist--dark .cmp-hist__desc{color:#eee}
.cmp-hist--dark .cmp-hist__year b{color:#ff4d4d}
.cmp-hist--dark .cmp-hist__ydot{background:#ff4d4d;border-color:#111;box-shadow:0 0 0 2px #ff4d4d}

@media (max-width:1024px){
    .cmp-hist__heading{font-size:30px}
    .cmp-hist__inner{gap:48px}
    .cmp-hist__label{font-size:24px}
    .cmp-hist__year b{font-size:20px}
    .cmp-hist__mon,.cmp-hist__desc{font-size:16px}
}
@media (max-width:768px){
    .cmp-hist__heading{font-size:24px}
    .cmp-hist{padding:36px 0}
    .cmp-hist__inner{flex-direction:column;gap:28px;padding:0 16px}
    .cmp-hist__aside{flex:none;width:100%;max-width:none}
    .cmp-hist__card{position:relative;top:auto}
    .cmp-hist__photo{height:200px}
    .cmp-hist__label{font-size:20px;left:16px;top:160px;bottom:auto}
    .cmp-hist__event{column-gap:24px;padding-left:30px}
    .cmp-hist__year{gap:14px;padding-left:0}
    .cmp-hist__mon,.cmp-hist__desc{font-size:15px}

    .cmp-tabs {    left: 50%;  transform: translateX(-50%);}

    .cmp-intro__bg {    object-fit: none;}
}

/* ================= 게시판 공통 페이지네이션 (전 게시판 동일) ================= */
.wg-paging{width:100%;margin-top:60px;text-align:center;font-family:'Pretendard',sans-serif}
.wg-paging .pg_wrap{display:inline-block;float:none;clear:none}
.wg-paging .pg{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
/* 숫자 / 현재 페이지 */
.wg-paging .pg_page,.wg-paging .pg_current{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #ccc;border-radius:2px;font-size:15px;font-weight:400;color:#555;text-decoration:none;background:#fff;box-sizing:border-box}
.wg-paging .pg_current{background:#7d7d7d;border-color:#7d7d7d;color:#fff}
.wg-paging a.pg_page:hover{border-color:#f42500;color:#f42500}
/* 화살표(처음/이전/다음/끝) : 박스 제거 + 시안 글리프 치환 */
.wg-paging a.pg_start,.wg-paging a.pg_prev,.wg-paging a.pg_next,.wg-paging a.pg_end{border:0;background:transparent;width:30px;height:30px;color:#555;font-size:0;text-indent:0;overflow:visible}
/* 삼각형 글리프(◂▸)가 Pretendard 엔 빈 글자라 안 보임 → 해당 글리프가 있는 폰트로 강제 */
.wg-paging a.pg_start::before,.wg-paging a.pg_prev::before,.wg-paging a.pg_next::before,.wg-paging a.pg_end::before{font-family:'Arial','Malgun Gothic',sans-serif;font-size:14px;line-height:30px;letter-spacing:-2px}
.wg-paging a.pg_start::before{content:"\25C2\25C2"}   /* ◂◂ 처음 */
.wg-paging a.pg_prev::before{content:"\25C2"}          /* ◂ 이전 */
.wg-paging a.pg_next::before{content:"\25B8"}          /* ▸ 다음 */
.wg-paging a.pg_end::before{content:"\25B8\25B8"}      /* ▸▸ 끝 */
.wg-paging a.pg_start:hover::before,.wg-paging a.pg_prev:hover::before,.wg-paging a.pg_next:hover::before,.wg-paging a.pg_end:hover::before{color:#f42500}