/* 고객지원 서비스 카드. 공통 히어로와 내비게이션은 변경하지 않는다. */
.s4-site--sub[data-section="support"] .support-services {
  padding-block:88px 96px;
}
.support-services-head {
  display:grid;
  grid-template-columns:1fr minmax(320px, .68fr);
  align-items:end;
  gap:clamp(40px, 7vw, 120px);
  margin-bottom:48px;
}
.support-services-kicker {
  margin:0 0 13px;
  color:#0867b2;
  font-size:12px;
  font-weight:600;
  letter-spacing:.15em;
}
.s4-site--sub[data-section="support"] .support-services-head h2 {
  margin:0;
  font-size:clamp(36px, 3.25vw, 52px);
  font-weight:500;
  letter-spacing:-.05em;
  line-height:1.2;
}
.support-services-head>p {
  margin:0;
  color:#52636e;
  font-size:17px;
  line-height:1.8;
}
.support-card-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.s4-site--sub[data-section="support"] .support-card {
  --card-ink:#182a35;
  position:relative;
  display:flex;
  min-width:0;
  min-height:430px;
  padding:28px 27px 25px;
  flex-direction:column;
  color:var(--card-ink);
  background:#f5f7f8;
  border:1px solid #dce3e7;
  overflow:hidden;
  transition:transform .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.support-card::before {
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:#0867b2;
  content:"";
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.support-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.support-card-top>span {
  color:#7b8a93;
  font:500 12px/1.2 "Albert Sans", sans-serif;
  letter-spacing:.12em;
}
.support-card-top svg {
  width:48px;
  height:48px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:#2d4554;
}
.support-card-copy {
  margin-top:auto;
  padding-top:72px;
}
.support-card-copy small {
  display:block;
  margin-bottom:15px;
  color:#0867b2;
  font:600 11px/1.4 "Albert Sans", sans-serif;
  letter-spacing:.1em;
}
.s4-site--sub[data-section="support"] .support-card-copy h3 {
  margin:0;
  font-size:clamp(22px, 1.8vw, 28px)!important;
  font-weight:500!important;
  letter-spacing:-.04em!important;
  line-height:1.35!important;
}
.support-card-copy p {
  margin:17px 0 0;
  color:#596a74;
  font-size:15px;
  line-height:1.75;
}
.support-card-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:45px;
  margin-top:27px;
  padding-top:15px;
  border-top:1px solid #cad4d9;
  font-size:14px;
  font-weight:500;
}
.support-card-action i {
  font-style:normal;
  font-size:17px;
  transition:transform .3s ease;
}
.s4-site--sub[data-section="support"] .support-card:hover,
.s4-site--sub[data-section="support"] .support-card:focus-visible {
  color:#fff;
  background:#0b3153;
  border-color:#0b3153;
  box-shadow:0 22px 45px rgba(11,49,83,.18);
  transform:translateY(-8px);
}
.support-card:hover::before,
.support-card:focus-visible::before {
  transform:scaleX(1);
}
.support-card:hover .support-card-top>span,
.support-card:focus-visible .support-card-top>span,
.support-card:hover .support-card-copy small,
.support-card:focus-visible .support-card-copy small {
  color:#7ec8ff;
}
.support-card:hover .support-card-copy p,
.support-card:focus-visible .support-card-copy p {
  color:#d6e2e9;
}
.s4-site--sub[data-section="support"] .support-card:hover .support-card-copy h3,
.s4-site--sub[data-section="support"] .support-card:focus-visible .support-card-copy h3,
.s4-site--sub[data-section="support"] .support-card:hover .support-card-action,
.s4-site--sub[data-section="support"] .support-card:focus-visible .support-card-action {
  color:#fff;
}
.support-card:hover .support-card-top svg,
.support-card:focus-visible .support-card-top svg {
  color:#7ec8ff;
}
.support-card:hover .support-card-action,
.support-card:focus-visible .support-card-action {
  border-color:rgba(255,255,255,.3);
}
.support-card:hover .support-card-action i,
.support-card:focus-visible .support-card-action i {
  transform:translate(3px,-3px);
}
.support-card:focus-visible {
  outline:3px solid #54b6ff;
  outline-offset:3px;
}
@media(max-width:1100px) {
  .support-card-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .s4-site--sub[data-section="support"] .support-card { min-height:375px; }
  .support-card-copy { padding-top:50px; }
}
@media(max-width:767px) {
  .s4-site--sub[data-section="support"] .support-services { padding-block:54px 60px!important; }
  .support-services-head { grid-template-columns:1fr; gap:22px; margin-bottom:30px; }
  .support-services-head>p { font-size:16px; }
  .support-card-grid { grid-template-columns:1fr; gap:12px; }
  .s4-site--sub[data-section="support"] .support-card { min-height:310px; padding:24px 22px 20px; }
  .support-card-copy { padding-top:38px; }
  .support-card-copy p { margin-top:12px; font-size:15px; }
  .support-card-action { margin-top:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .support-card,.support-card::before,.support-card-action i { transition:none; }
  .support-card:hover,.support-card:focus-visible { transform:none; }
}