/* v124 · 첫 화면 서비스 4칸: 굵고 큰 회색 글자 → 가늘고 여백 많은 에디토리얼 톤 */
.hf-v93 .whf-en{font:500 13px/1 var(--en) !important;letter-spacing:.22em !important;text-transform:uppercase;color:rgba(255,255,255,.55) !important}
.hsx{gap:0 clamp(24px,3vw,56px)}
.hsx-item{border-left:0 !important;padding:22px 0 4px !important;gap:12px !important}
.hsx-track{height:1px;background:rgba(255,255,255,.12) !important}
.hsx-track i{background:linear-gradient(90deg,rgba(253,69,51,.15),#fd4533) !important}
/* a soft light rides the tip of each line while it fills */
.hsx-track::after{content:'';position:absolute;top:-2px;left:calc(var(--p,0) * 100%);width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(253,69,51,.55);opacity:calc(var(--p,0) * (1 - var(--p,0)) * 4);transition:opacity .3s}
.hsx-top{gap:14px !important;align-items:center !important}
.hsx-no{font:500 11px/1 var(--en) !important;letter-spacing:.18em !important;color:rgba(255,255,255,.32) !important}
.hsx-name{font:500 clamp(15px,1.15vw,18px)/1 var(--en) !important;letter-spacing:.14em !important;text-transform:uppercase;color:rgba(255,255,255,.38) !important;transition:color .7s ease,letter-spacing .7s ease !important}
.hsx-item.is-set .hsx-no{color:#fd4533 !important}
.hsx-item.is-set .hsx-name{color:#fff !important}
.hsx-item.is-one .hsx-name{letter-spacing:.14em}
.hsx-item.is-one.is-set .hsx-name{color:#fff !important}
.hsx-item.is-one .hsx-top::after{content:'ALL-IN-ONE';font:600 9px/1 var(--en);letter-spacing:.2em;color:#fd4533;opacity:.4;transition:opacity .6s}
.hsx-item.is-one.is-set .hsx-top::after{opacity:1}
.hsx-go{font-size:12px !important;opacity:0;transform:translate(-4px,4px);transition:opacity .35s,transform .35s,color .35s !important}
.hsx-role,.hsx-q{font-size:13px !important;letter-spacing:-.01em}
.hsx-role{color:rgba(255,255,255,.45) !important}
.hsx-item:hover .hsx-name,.hsx-item:focus-visible .hsx-name{color:#fff !important;letter-spacing:.18em}
.hsx-item:hover .hsx-go,.hsx-item:focus-visible .hsx-go{opacity:1;transform:none;color:#fd4533 !important}
/* fine underline that draws under the name on hover */
.hsx-name{position:relative}
.hsx-name::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#fd4533;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hsx-item:hover .hsx-name::after,.hsx-item:focus-visible .hsx-name::after{transform:scaleX(1)}
@media (max-width:820px){.hsx-name{font-size:13px !important;letter-spacing:.1em !important}.hsx-item.is-one .hsx-top::after{display:none}}