@charset "utf-8";
/* ==========================================================================
   HWASHIN GROUP — sub.css
   회사소개 CEO 인사말 / 카테고리 빈 콘텐츠
   기준 아트보드 1920 × 2560 · 콘텐츠 1440
   ========================================================================== */

/* ============================================================
   CEO INTRO — PSD y 560~1303
   ============================================================ */
.ceo-page{background:#fff;}
.ceo-intro{height:743px;background:#fff;}
.ceo-intro__inner{position:relative;height:100%;}
.ceo-kicker{
  position:absolute;top:155px;left:var(--pad);z-index:4;
  margin:0;
  font-family:'Poppins',sans-serif;
  font-size:21.333px;font-weight:700;line-height:1.1;
  color:var(--blue);
}
.ceo-headline{
  position:absolute;top:216px;left:var(--pad);z-index:4;
  margin:0;
  font-size:53.333px;font-weight:700;line-height:1.18;
  letter-spacing:-.045em;
}
.ceo-headline em{font-style:normal;color:var(--cyan);}
.ceo-visual{position:absolute;inset:0;z-index:1;pointer-events:none;}
.ceo-watermark{
  position:absolute;left:400px;top:280px;
  width:966px;height:372px;
}
.ceo-portrait{
  position:absolute;left:844px;top:168px;z-index:2;
  width:451px;height:484px;
}
.ceo-name{
  position:absolute;left:589px;top:454px;z-index:3;
  color:#111;
}
.ceo-name span{
  display:block;font-size:21.333px;font-weight:400;line-height:1.5;
}
.ceo-name strong{
  display:block;margin-top:14px;
  font-size:40px;font-weight:700;line-height:1;
  letter-spacing:-.035em;
}
@media (min-width:1520px){
  .ceo-kicker,.ceo-headline{left:0;}
}

/* ============================================================
   CEO MESSAGE — PSD y 1303~2024
   ============================================================ */
.ceo-message{min-height:721px;background:#fff;}
.ceo-message__inner{
  display:grid;
  grid-template-columns:382px 1fr;
  column-gap:108px;
  align-items:start;
  padding-bottom:148px;
}
.ceo-message h3{
  margin:0;
  font-size:37.333px;font-weight:700;line-height:1.36;
  letter-spacing:-.045em;
}
.ceo-copy{
  width:874px;max-width:100%;
  font-size:18.667px;font-weight:400;line-height:2;
  letter-spacing:-.027em;
  color:#555;
  word-break:keep-all;
}
.ceo-copy p{margin:0 0 31px;}
.ceo-copy .ceo-signature{
  margin:37px 0 0;
  color:#111;font-size:21.333px;font-weight:700;
}

/* ============================================================
   CATEGORY PLACEHOLDER — 공통 상·하단 사이 흰 콘텐츠
   ============================================================ */
.category-empty{
  min-height:760px;
  background:#fff;
}

/* ============================================================
   FLUID DESKTOP / TABLET
   ============================================================ */
@media (max-width:1519px){
  .ceo-watermark{left:30%;width:67.1%;height:auto;}
  .ceo-portrait{left:auto;right:6%;width:31.32%;height:auto;}
  .ceo-name{left:45%;top:454px;}
}

@media (max-width:1280px){
  .ceo-headline{max-width:58%;font-size:42px;}
  .ceo-watermark{left:28%;top:300px;width:72%;}
  .ceo-portrait{right:2%;top:210px;width:36%;}
  .ceo-name{left:44%;top:490px;}

  .ceo-message__inner{grid-template-columns:31% 1fr;column-gap:7.5%;}
  .ceo-message h3{font-size:28px;}
  .ceo-copy{font-size:15px;}
  .ceo-copy br{display:none;}
}

@media (max-width:1024px){
  .ceo-intro{height:720px;}
  .ceo-kicker{top:100px;}
  .ceo-headline{top:148px;max-width:64%;font-size:38px;}
  .ceo-watermark{left:20%;top:310px;width:82%;}
  .ceo-portrait{right:0;top:230px;width:42%;}
  .ceo-name{left:40%;top:500px;}

  .ceo-message{min-height:0;}
  .ceo-message__inner{grid-template-columns:1fr;row-gap:50px;padding-bottom:100px;}
  .ceo-message h3{font-size:30px;}
  .ceo-copy{width:100%;font-size:16px;line-height:1.9;}
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:768px){
  .ceo-intro{height:auto;padding:72px 0 0;}
  .ceo-intro__inner{height:auto;}
  .ceo-kicker,.ceo-headline{position:static;}
  .ceo-kicker{font-size:14px;}
  .ceo-headline{
    max-width:none;margin-top:22px;
    font-size:32px;line-height:1.3;
  }
  .ceo-headline br{display:none;}
  .ceo-visual{
    position:relative;inset:auto;
    height:440px;margin-top:34px;
    overflow:hidden;
  }
  .ceo-watermark{
    left:50%;top:clamp(148px,32vw,158px);
    width:100%;height:auto;
    max-width:none;
    object-fit:contain;
    transform:translateX(-50%);
  }
  .ceo-portrait{
    left:auto;right:-5%;top:auto;bottom:0;
    width:87%;max-width:360px;height:auto;
  }
  /* 인물의 왼쪽 투명 여백 안에 명패를 배치해 사진과 겹치지 않게 유지 */
  .ceo-name{
    left:0;
    top:clamp(112px,32vw,132px);
    bottom:auto;
    max-width:118px;
  }
  .ceo-name span{font-size:13px;}
  .ceo-name strong{margin-top:10px;font-size:25px;}

  .ceo-message__inner{row-gap:40px;padding-top:72px;padding-bottom:84px;}
  .ceo-message h3{font-size:27px;line-height:1.42;}
  .ceo-copy{font-size:15px;line-height:1.9;word-break:normal;}
  .ceo-copy p{margin-bottom:27px;}
  .ceo-copy .ceo-signature{margin-top:32px;}

  .category-empty{min-height:620px;}
}

@media (max-width:420px){
  .ceo-headline{font-size:29px;}
  .ceo-visual{height:410px;}
  .ceo-portrait{right:-9%;width:92%;}
  .ceo-message h3{font-size:24px;}
}