@charset "utf-8";

/* ==========================================================
   Sub page — 공통 레이아웃
   수치는 mexus.kr 원본(layout.css / doc.css / responsive.css) 기준
   ========================================================== */
.sub{background:#fff;}  /* body 와 동일 — 섹션 경계 명시용 */

/* #contArea */
.sub__content{max-width:1460px;margin:0 auto;padding:0 var(--contain-x);}
.sub__content--wide{max-width:100%;padding:0;}

/* .real-cont */
.sub__body{padding:120px 0 clamp(100px, calc(180 / var(--inner) * 100vw), 180px);}
.sub__body--flush{padding-bottom:0;}

.u-only-desktop{display:block;}
.u-only-mobile{display:none;}

/* 원본 .doc-cnt100 / 150 / 200 */
.u-mb100{margin-bottom:var(--sp-100);}
.u-mb200{margin-bottom:var(--sp-200);}

/* ==========================================================
   Sub visual
   ========================================================== */
.sub-visual{
  position:relative;overflow:hidden;
  height:clamp(240px, calc(587 / var(--inner) * 100vw), 587px);
  background:#242424;color:#fff;font-family:var(--font-display);
}
.sub-visual__bg{
  position:absolute;inset:0;
  background-repeat:no-repeat;background-position:50% 50%;background-size:cover;
  animation:sub-visual-in 2s ease both;
}
.sub-visual--company .sub-visual__bg{background-image:url("https://mexus.kr/images/common/sv1.jpg");}
.sub-visual--product .sub-visual__bg{background-image:url("https://mexus.kr/images/common/sv2.jpg");}
.sub-visual--business .sub-visual__bg{background-image:url("https://mexus.kr/images/common/sv3.jpg");}
.sub-visual--support .sub-visual__bg{background-image:url("https://mexus.kr/images/common/sv4.jpg");}
.sub-visual--hr .sub-visual__bg{background-image:url("https://mexus.kr/images/common/sv6.jpg");}
@keyframes sub-visual-in{
  from{opacity:0;transform:scale(1.05);}
  to{opacity:1;transform:scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .sub-visual__bg{animation:none;}
}
.sub-visual__inner{
  position:absolute;top:50%;left:0;width:100%;
  transform:translateY(-50%);margin-top:50px;
}
.sub-visual__title{font-size:var(--fs-64);font-weight:700;line-height:1em;}

/* ==========================================================
   LNB + Breadcrumb (.lnb-wrap / .page-path)
   ========================================================== */
.lnb{border-bottom:1px solid #ddd;overflow:hidden;font-family:var(--font-display);font-weight:600;}
.lnb__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.lnb__list{display:flex;gap:var(--sp-50);overflow-x:auto;scrollbar-width:none;}
.lnb__list::-webkit-scrollbar{display:none;}
.lnb__item{position:relative;width:auto;flex:none;}
.lnb__link{
  display:flex;align-items:center;justify-content:center;
  height:clamp(50px, calc(100 / var(--inner) * 100vw), 100px);
  color:#505050;font-size:var(--fs-16);white-space:nowrap;
  line-height:1.3em;letter-spacing:-.03em;
}
.lnb__item:hover .lnb__link,
.lnb__item--active .lnb__link{color:var(--color-primary);}
.lnb__item--active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background-color:var(--color-primary);
}

.breadcrumb{display:flex;align-items:center;gap:12px;flex:none;color:#878787;font-size:var(--fs-16);}
.breadcrumb__home{
  width:16px;height:16px;
  background:url("https://mexus.kr/images/common/home.png") 50% 50% / contain no-repeat;
}
.breadcrumb__arrow{
  width:5px;height:10px;
  background:url("https://mexus.kr/images/common/path-arrow.png") 50% 50% / contain no-repeat;
}
.breadcrumb__item--current{color:var(--color-primary);}

/* ==========================================================
   Doc title (.doc-tit / .cont-tit)
   ========================================================== */
.doc-tit{margin-bottom:var(--sp-60);}
.doc-tit--center{text-align:center;}
.doc-tit__title{
  font-family:var(--font-display);
  font-size:var(--fs-48);font-weight:700;line-height:1.2;color:var(--color-black);
}
.doc-tit__desc{margin-top:var(--sp-25);font-size:var(--fs-20);line-height:1.6;letter-spacing:-.03em;}

/* .doc-tit.ty2 */
.doc-tit--sm{margin-bottom:var(--sp-35);}
.doc-tit--sm .doc-tit__title{font-size:var(--fs-32);}

/* .doc-tit.ty3 */
.doc-tit--md{margin-bottom:var(--sp-40);}
.doc-tit--md .doc-tit__title{font-size:var(--fs-40);}
.doc-tit__desc--sm{font-size:var(--fs-18);}

/* .doc-tit 안쪽 라벨 (.doc-tit .cont-tit) */
.doc-tit .cont-tit{margin-bottom:7px;font-size:var(--fs-16);}

/* .cont-tit */
.cont-tit{
  margin-bottom:var(--sp-35);
  color:var(--color-primary);font-size:var(--fs-24);font-weight:700;letter-spacing:-.03em;
}
.cont-tit--lg{font-size:var(--fs-30);}

/* 기술 특허 / 디자인 특허 / 상표 등록 소제목 */
.doc-label{
  margin:var(--sp-50) 0 var(--sp-25);
  font-size:var(--fs-24);font-weight:700;color:var(--color-black);
}
.cont-tit + .doc-label{margin-top:0;}

/* .tit-area — 아이콘 붙은 섹션 제목 */
.tit-area{margin-bottom:var(--sp-35);}
.tit-area__title{
  position:relative;padding-left:45px;
  font-family:var(--font-display);
  font-size:var(--fs-32);font-weight:700;color:var(--color-black);line-height:1.3;
}
.tit-area__title::before{
  content:"";position:absolute;left:0;top:4px;width:28px;height:28px;
  background:url("https://mexus.kr/images/sub/titico.png") 50% 50% / contain no-repeat;
}

/* 안내 문구 */
.hint{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-10);}
.hint--right{justify-content:flex-end;}
.hint__ico{flex-shrink:0;width:24px;height:24px;margin:0;}
.hint__ico img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;}
.hint__txt{font-size:var(--fs-18);line-height:28px;color:#505050;letter-spacing:-.03em;}

/* 서브 탭 (.subtab) */
.subtab{display:flex;gap:10px;margin-bottom:var(--sp-80);font-family:var(--font-display);}
.subtab__item{flex:1;}
.subtab__link{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:56px;
  border:1px solid #ddd;border-radius:8px;
  font-family:inherit;font-size:var(--fs-16);font-weight:600;cursor:pointer;
}
.subtab__link:hover{color:var(--color-primary);}
.subtab__item--active .subtab__link{border-color:var(--color-primary);color:var(--color-primary);}

.sub-figure{text-align:center;}
.sub-figure img{margin:0 auto;}

/* ==========================================================
   인사말 (.greetings)
   ========================================================== */
.greetings__bg{
  margin-bottom:var(--sp-80);
  height:clamp(300px, calc(600 / var(--inner) * 100vw), 600px);
  border-radius:24px;overflow:hidden;
  background:url("https://mexus.kr/images/sub/greetings-bg.jpg") 50% 50% / cover no-repeat;
  display:flex;align-items:flex-end;
  padding:var(--sp-60) var(--sp-100);
  color:#fff;
}
.greetings__inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--sp-40);}
.greetings__title{flex:1;font-size:var(--fs-48);font-weight:700;line-height:1.3;}
.greetings__lead{line-height:1.66em;}
.greetings__lead strong{font-weight:700;}

.greetings__text{display:grid;gap:var(--sp-30);font-size:var(--fs-18);line-height:1.66em;}
.greetings__text strong{color:var(--color-black);}

.greetings__sign{
  margin-top:var(--sp-30);
  display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-20);
  font-size:var(--fs-20);font-weight:600;text-align:right;color:var(--color-black);
}
.greetings__sign img{height:clamp(24px, calc(38 / var(--inner) * 100vw), 38px);}

/* ==========================================================
   회사 연혁 (.history)
   ========================================================== */
.history-wrap{display:grid;gap:var(--sp-150);}
.history-content__bg{
  height:400px;border-radius:24px;
  background-repeat:no-repeat;background-size:cover;background-position:50% 50%;
}
.history-content__bg--1{background-image:url("https://mexus.kr/images/sub/history-bg1.jpg");}
.history-content__bg--2{background-image:url("https://mexus.kr/images/sub/history-bg2.jpg");}

.history{
  position:relative;margin-top:-100px;
  display:flex;align-items:flex-start;gap:var(--sp-120);
  padding:0 var(--sp-40);
}
.history-content:nth-child(even) .history__intro{order:2;}

.history__intro{
  width:420px;flex:none;
  padding:var(--sp-50);border-radius:24px;
  background-color:var(--color-primary);color:#fff;
}
.history__period{
  padding-bottom:var(--sp-25);margin-bottom:var(--sp-25);
  border-bottom:1px solid rgba(255,255,255,.5);
  font-family:var(--font-display);
  font-size:var(--fs-40);font-weight:700;line-height:1.3;color:#fff;
}
.history__lead{font-size:var(--fs-20);color:#fff;line-height:1.6;}

.history__timeline{flex:1;min-width:0;padding-top:160px;display:grid;gap:var(--sp-80);}
.history__year{display:flex;gap:var(--sp-60);}
.history__year-num{
  font-family:var(--font-display);
  font-size:var(--fs-32);font-weight:700;color:var(--color-black);line-height:1.3;
}
.history__list{display:grid;gap:var(--sp-20);}
.history__item{display:flex;gap:var(--sp-20);font-size:var(--fs-18);line-height:1.8;}
.history__month{min-width:60px;font-weight:600;color:var(--color-black);}
.history__txt{flex:1;}

/* ==========================================================
   인증 및 기술현황 (.certificate)
   ========================================================== */
.certificate__list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-40);}
.certificate__item{
  height:100%;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 8px rgba(0,0,0,.08);background:#fff;
}
.certificate__logo{height:150px;display:flex;align-items:center;justify-content:center;}
.certificate__body{flex:1;padding:var(--sp-35) var(--sp-30);background-color:#f4f4f4;}
.certificate__name{
  margin-bottom:var(--sp-25);
  font-size:var(--fs-18);font-weight:700;color:var(--color-black);line-height:1.3;
}
.certificate__desc{line-height:1.6em;min-height:3.2em;}

/* ==========================================================
   CI 소개 (.ci-intro / .color-system / .color-variation)
   ========================================================== */
/* 원본은 z-index:-1 의사요소로 회색 밴드를 깔지만, 이 템플릿은 .sub 에
   흰 배경이 있어 음수 z-index가 가려진다. 동일한 결과를 그라디언트로 처리. */
.ci-intro{
  position:relative;padding-bottom:var(--sp-100);text-align:center;
  background:linear-gradient(to bottom,
    transparent 0, transparent var(--sp-160),
    #f4f4f4 var(--sp-160), #f4f4f4 100%);
}
.ci-intro__text{padding:var(--sp-50) 0;}
.ci-intro__txt{
  margin-bottom:var(--sp-15);
  color:var(--color-black);font-size:var(--fs-24);font-weight:700;
  line-height:1.2em;letter-spacing:-.03em;
}
.ci-intro__desc{color:#878787;font-size:var(--fs-18);line-height:1.66em;letter-spacing:-.03em;}
.ci-intro__download{
  width:220px;height:70px;margin:0 auto;border-radius:8px;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-20);
  background:var(--color-black);color:#fff;
  font-family:var(--font-display);
  font-size:var(--fs-18);font-weight:600;line-height:1.3;letter-spacing:-.03em;
}
.ci-intro__download:hover{opacity:.8;}

.color-system{padding:var(--sp-120) 0;}
.color-system__list{
  display:flex;justify-content:center;gap:var(--sp-40);
  padding:var(--sp-80) var(--sp-15);
  border:1px solid #ddd;border-radius:24px;
}
.color-system__item{width:100%;max-width:300px;}
.color-system__box{
  width:100%;height:clamp(50px, calc(80 / var(--inner) * 100vw), 80px);
  border-radius:8px;margin-bottom:var(--sp-30);
}
.color-system__name{
  margin-bottom:var(--sp-10);
  font-size:var(--fs-18);font-weight:700;color:var(--color-black);line-height:1.3;
}
.color-system__code{color:#878787;line-height:1.6em;}

.color-variation{padding:var(--sp-120) 0 var(--sp-180);background-color:#f4f4f4;}
.color-variation__list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-30);}
.color-variation__box{
  width:100%;height:clamp(100px, calc(250 / var(--inner) * 100vw), 250px);
  border-radius:16px;padding:var(--sp-40);
  display:flex;align-items:center;justify-content:center;
}
.color-variation__logo{width:100%;max-width:clamp(120px, calc(200 / var(--inner) * 100vw), 200px);}
.color-variation__logo img{width:100%;object-fit:contain;}

/* ==========================================================
   Partners
   ========================================================== */
.partners__list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-30);}
.partners__item{display:flex;align-items:center;justify-content:center;}

/* ==========================================================
   Responsive — 원본 responsive.css 브레이크포인트(1024 / 640)
   ========================================================== */
@media (max-width:1024px){
  .lnb__link{height:50px;}
  .greetings__text br{display:none;}
  .history__intro{width:320px;}
  .certificate__list{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  .u-only-desktop{display:none;}
  .u-only-mobile{display:block;}

  .sub__body{padding:60px 0 clamp(100px, calc(180 / var(--inner) * 100vw), 180px);}

  .lnb__list{gap:10px;}
  .lnb__inner{display:block;}
  .lnb__link{white-space:nowrap;font-size:12px;}
  .lnb__item--active::after{height:2px;}
  .breadcrumb{display:none;}

  .doc-tit__title{line-height:1.3;}

  .greetings__bg{padding:20px;height:250px;}
  .greetings__inner{display:block;}
  .greetings__inner br{display:none;}
  .greetings__title{margin-bottom:15px;}

  .history{display:block;margin-top:-60px;}
  .history-content__bg{height:200px;}
  .history__intro{width:auto;}
  .history__timeline{padding-top:30px;}
  .history__year{display:block;}
  .history__month{min-width:32px;}
  .history__txt{line-height:1.5;}

  .certificate__list{grid-template-columns:repeat(1,1fr);}
  .certificate__desc{min-height:auto;}

  .ci-intro__download{width:160px;height:50px;}

  .color-system__list{display:block;padding:30px;}
  .color-system__item{margin-bottom:20px;max-width:100%;}
  .color-system__item:last-child{margin-bottom:0;}

  .color-variation__list{grid-template-columns:repeat(2,1fr);}

  .subtab__link{height:44px;font-size:13px;}

  .tit-area__title{padding-left:27px;}
  .tit-area__title::before{width:18px;height:18px;top:2px;}

  .partners__list{grid-template-columns:repeat(2,1fr);}
}