@charset "utf-8";
/* ============================================================================
   HWASHIN GROUP — sub-common.css
   서브페이지 공통 히어로 / 브레드크럼 / 2·3차 글래스 내비게이션
   CEO 인사말 PSD에서 확정한 수치를 전 카테고리에 동일 적용
   ========================================================================== */

.sub-hero{
  position:relative;
  height:clamp(440px,29.167vw,560px);
  overflow:hidden;
  background:#6f879b;
  color:#fff;
}
.sub-hero__picture{
  position:absolute;inset:0;
  display:block;
}
.sub-hero__building,
.sub-hero__dim{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
}
.sub-hero__dim{z-index:1;}
.sub-hero__inner{position:relative;z-index:2;height:100%;}
.sub-hero__heading{position:absolute;top:206px;left:var(--pad);}
@media (min-width:1520px){.sub-hero__heading{left:0;}}
.sub-hero__eyebrow{
  margin:0;
  font-family:'Poppins',sans-serif;
  font-size:21.333px;font-weight:700;line-height:1;
}
.sub-hero h1{
  margin:24px 0 0;
  font-size:80px;font-weight:500;line-height:1.18;
  letter-spacing:-.04em;
}
.breadcrumb{
  position:absolute;left:var(--pad);bottom:91px;
  display:flex;align-items:center;gap:13px;
  height:18px;
  font-size:14px;font-weight:500;line-height:1;
  color:rgba(255,255,255,.95);
}
@media (min-width:1520px){.breadcrumb{left:0;}}
.breadcrumb a,.breadcrumb strong{white-space:nowrap;}
.breadcrumb strong{font-weight:500;}
.breadcrumb a:first-child{width:16px;height:16px;display:block;}
.breadcrumb a:first-child img{width:16px;height:16px;display:block;}
.breadcrumb .breadcrumb__arrow{
  width:7px;height:11px;
  display:block;flex:0 0 auto;
}

.sub-hero__selects{
  position:absolute;right:var(--pad);bottom:67px;
  display:flex;gap:7px;
}
@media (min-width:1520px){.sub-hero__selects{right:0;}}
.sub-hero__selects button{
  position:relative;
  overflow:hidden;
  width:303px;height:63px;
  padding:0 36px;
  display:flex;align-items:center;justify-content:space-between;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.26);
  box-shadow:none;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:16px;font-weight:700;
  transition:background-color .2s ease;
}
.sub-hero__selects button:hover,
.sub-hero__selects button:focus-visible,
.sub-hero__selects button.is-open,
.sub-hero__selects button[aria-expanded="true"]{
  background:rgba(255,255,255,.29);
}
.sub-hero__selects button:focus-visible{
  outline:2px solid rgba(255,255,255,.92);
  outline-offset:3px;
}
.sub-hero__selects .subnav-control__caret{
  width:9px;height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transform-origin:center;
  transition:transform .25s ease;
}
.sub-hero__selects button.is-open .subnav-control__caret,
.sub-hero__selects button[aria-expanded="true"] .subnav-control__caret{
  transform:rotate(225deg) translate(-1px,-1px);
}

@media (max-width:1280px){
  .sub-hero__heading{top:176px;}
  .sub-hero h1{font-size:50px;}
  .sub-hero__selects button{width:260px;}
}

@media (max-width:1024px){
  .sub-hero{height:520px;}
  .sub-hero__heading{top:150px;}
  .sub-hero h1{font-size:46px;}
  .breadcrumb{bottom:122px;}
  .sub-hero__selects{
    left:var(--pad);right:var(--pad);bottom:38px;
  }
  .sub-hero__selects button{width:auto;flex:1;height:58px;}
}

@media (max-width:768px){
  .sub-hero{height:500px;}
  .sub-hero__building{object-position:56% top;}
  .sub-hero__heading{top:132px;left:var(--pad);}
  .sub-hero__eyebrow{font-size:13px;}
  .sub-hero h1{margin-top:16px;font-size:40px;}
  .breadcrumb{
    left:var(--pad);bottom:120px;
    max-width:calc(100% - 40px);
    gap:8px;font-size:12px;
  }
  .sub-hero__selects{
    left:var(--pad);right:var(--pad);bottom:30px;gap:8px;
  }
  .sub-hero__selects button{
    height:54px;padding:0 18px;
    font-size:13px;
  }
}

@media (max-width:420px){
  .sub-hero__selects button{padding:0 14px;font-size:12px;}
}