@charset "utf-8";
/* ============================================================
   우석장학문화재단 - sub.css  (서브페이지 공통 골격)
   ------------------------------------------------------------
   서브 시안이 확정되기 전 단계의 뼈대입니다.
   메인의 디자인 토큰(색·타이포·라운드)을 그대로 사용하므로
   시안이 나오면 이 파일의 수치만 조정하시면 됩니다.
   ============================================================ */

/* ------------------------------------------------------------
   1. 서브 비주얼 (페이지명 + 경로)
   ------------------------------------------------------------ */
/* PSD: 1920×380; photo 2000×1220 at (0,-511), black overlay 89/255. */
.sub-visual{position:relative;overflow:hidden;height:380px;padding:0;color:#fff;background:#2b3a4a}
.sub-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,#5b91c5,#4da7b6,#66b79a)}
.sub-visual .wrap{position:relative;height:100%}
.sub-visual__en{position:absolute;top:164px;left:0;font-size:18.666667px;font-weight:700;line-height:32px;letter-spacing:-.025em;color:#fff}
.sub-visual__tit{position:absolute;top:195px;left:0;margin:0;font-size:64px;font-weight:700;line-height:76.8px;letter-spacing:-.025em;color:#fff}
.breadcrumb{position:absolute;top:302px;left:0;right:0;display:flex;align-items:center;flex-wrap:wrap;row-gap:8px;margin:0;font-size:16px;font-weight:500;line-height:32px;color:#fff}
.breadcrumb > *{letter-spacing:-.01em}
.breadcrumb a{color:#fff}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:4px}
.breadcrumb__home{display:flex;align-items:center;width:16px;height:32px;flex-shrink:0}
.breadcrumb__home img{width:16px;height:16px}
.breadcrumb > * + *{position:relative;margin-left:33px}
.breadcrumb > * + *::before{content:"";position:absolute;left:-19px;top:50%;width:7px;height:11px;transform:translateY(-50%);background:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/common/breadcrumb-arrow.png') center/7px 11px no-repeat}
.breadcrumb span:last-child{color:#fff;font-weight:500}
.sub-visual--whatwedo{background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/whatwedo/hero.jpg');background-repeat:no-repeat;background-size:max(2000px,104.166667vw) auto;background-position:calc(50% + max(40px,2.083333vw)) min(-511px,-26.614583vw)}
.sub-visual--whatwedo::before{background:rgba(0,0,0,.349019608)}

/* ------------------------------------------------------------
   2. LNB (2depth 탭 / 3depth)
   ------------------------------------------------------------ */
.lnb{margin-top:60px}
.lnb__depth2{
  display:flex;flex-wrap:wrap;
  border-bottom:1px solid #e5e5e5;
}
.lnb__depth2 > li{margin-bottom:-1px}
.lnb__depth2 > li > a{
  display:block;padding:0 30px 18px;
  font-size:20px;font-weight:600;color:#8a8a8a;
  border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.lnb__depth2 > li > a:hover{color:#111}
.lnb__depth2 > li.on > a{color:var(--c-blue);border-bottom-color:var(--c-blue)}

.lnb__depth3{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.lnb__depth3 > li > a{
  display:block;padding:9px 22px;border-radius:999px;
  font-size:16px;font-weight:600;color:#6f6f6f;background:#f3f3f3;
  transition:.2s ease;
}
.lnb__depth3 > li > a:hover{background:#e8e8e8;color:#222}
.lnb__depth3 > li.on > a{background:var(--c-blue);color:#fff}

/* ------------------------------------------------------------
   3. 본문 영역
   ------------------------------------------------------------ */
.sub-body{padding:70px 0 160px;min-height:320px}
.sub-body .page-tit{
  font-size:36px;font-weight:700;line-height:1.35;color:#111;
}
.sub-body .page-txt{
  margin-top:20px;font-size:17px;font-weight:500;line-height:30px;color:var(--c-body);
}
/* 콘텐츠 준비중 안내 (시안 확정 전 임시) */
.sub-body .ready{
  margin-top:48px;padding:90px 20px;text-align:center;
  border:1px dashed #d8d8d8;border-radius:var(--radius-card);
  background:#fafafa;color:#9a9a9a;
  font-size:16px;font-weight:500;line-height:26px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1279px){
  
  
  
  
  .lnb{margin-top:44px}
  .lnb__depth2 > li > a{padding:0 22px 15px;font-size:18px}
  .sub-body{padding:54px 0 110px}
  .sub-body .page-tit{font-size:28px}
  .sub-body .page-txt{font-size:16px;line-height:28px}
}
@media (max-width:1023px){
  
  
  .lnb__depth2{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .lnb__depth2 > li > a{white-space:nowrap;padding:0 18px 14px;font-size:17px}
}
@media (max-width:767px){
  
  
  
  
  
  
  .lnb{margin-top:32px}
  .lnb__depth2 > li > a{padding:0 14px 12px;font-size:15px}
  .lnb__depth3{gap:8px;margin-top:18px}
  .lnb__depth3 > li > a{padding:8px 16px;font-size:14px}
  .sub-body{padding:40px 0 80px}
  .sub-body .page-tit{font-size:22px}
  .sub-body .page-txt{margin-top:14px;font-size:14.5px;line-height:25px}
  .sub-body .ready{margin-top:32px;padding:60px 16px;font-size:14px}
}

/* Same typography and breadcrumb assets across all four categories. */
@media(max-width:1279px){
 .sub-visual{height:360px}
 .sub-visual__en{top:142px}
 .sub-visual__tit{top:173px}
 .breadcrumb{top:282px}
}
@media(max-width:767px){
 .sub-visual{height:340px}
 .sub-visual__en{top:122px}
 .sub-visual__tit{top:158px;font-size:clamp(40px,8.333333vw,64px);line-height:1.2}
 .breadcrumb{top:266px;font-size:16px}
 .breadcrumb > * + *{margin-left:26px}
 .breadcrumb > * + *::before{left:-16px}
}

/* Additional category photos: measured from the supplied PSD layer bounds. */
.sub-visual--about{background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/about/hero.jpg');background-repeat:no-repeat;background-size:max(2000px,104.166666667vw) auto;background-position:calc(50% - max(40px,2.083333333vw)) min(-422px,-21.979166667vw)}
.sub-visual--about::before{background:transparent}
.sub-visual--projects{background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/projects/hero.jpg');background-repeat:no-repeat;background-size:max(2500px,130.208333333vw) auto;background-position:calc(50% + max(45px,2.343750000vw)) min(-331px,-17.239583333vw)}
.sub-visual--projects::before{background:transparent}
.sub-visual--news{background-image:url('/api/modules/assets/hwashin-site/dist/sites/HSwooseok/images/sub/news/hero.jpg');background-repeat:no-repeat;background-size:max(2000px,104.166666667vw) auto;background-position:calc(50% + max(40px,2.083333333vw)) min(-394px,-20.520833333vw)}
.sub-visual--news::before{background:rgba(0,0,0,0.349019608)}