@charset "utf-8";

* {
    box-sizing: border-box;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.hero {
    position: relative;
    min-height: 100svh;
    padding-top: 96px;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: #111013;
}

.hero__bg::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(60% 55% at 22% 20%, rgba(226, 105, 47, .55), transparent 60%),
        radial-gradient(55% 60% at 82% 78%, rgba(29, 107, 164, .50), transparent 62%),
        radial-gradient(90% 90% at 50% 50%, transparent 45%, rgba(0, 0, 0, .6) 100%);
    filter: saturate(1.05);
}

.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .09;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: .62;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 9, 11, .55), transparent 30% 62%, rgba(10, 9, 11, .7));
}

.brand-logo {
    display: inline-flex;
    align-items: center;
}

.brand-logo__svg {
    height: 34px;
    width: auto;
    display: block;
}

.utils {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.utils .login {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(6px);
    transition: color .3s ease, border-color .3s ease;
}

.utils .login::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #fff;
    z-index: -1;
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.utils .login:hover {
    color: #111013;
    border-color: #fff;
}

.utils .login:hover::before {
    width: 100%;
}

.utils .shop {
    height: 46px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    position: relative;
}

.utils .shop::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 11px;
    height: 1.5px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.utils .shop:hover::after {
    transform: scaleX(1);
}

.utils .icon-btn {
    position: relative;
    z-index: 0;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    transition: border-color .3s ease;
}

.utils .icon-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    z-index: -1;
    transform: scale(0);
    transform-origin: center;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.utils .icon-btn:hover {
    border-color: #fff;
}

.utils .icon-btn:hover::before {
    transform: scale(1);
}

.utils .icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.7;
    transition: stroke .3s ease;
}

.utils .icon-btn:hover svg {
    stroke: #111013;
}

.utils .icon-btn .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1d6ba4;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.utils .mypage {
    overflow: visible;
}

.utils .mypage .mypage-tip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 6px 13px;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(17, 16, 19, .92);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.utils .mypage:hover .mypage-tip,
.utils .mypage:focus-visible .mypage-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hero__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 clamp(20px, 4vw, 56px) clamp(90px, 12vh, 140px);
    position: relative;
    z-index: 10;
    transform: translateY(clamp(48px, 13vh, 130px));
}

.eyebrow {
    display: inline-flex;
    align-items: flex-start;
    gap: 11px;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .22em;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 22px;
}

.eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2692f;
    margin-top: 2px;
    flex: none;
}

.eyebrow b {
    color: #fff;
    font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    letter-spacing: 0;
    font-weight: 700;
}

.hero-title {
    font-family: "Anybody", "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 900;
    font-stretch: 125%;
    font-size: clamp(2rem, min(9.2vw, 14.5vh), 100px);
    line-height: .88;
    letter-spacing: -.015em;
    text-transform: uppercase;
}

.hero-title .line {
    display: block;
}

.hero-title .outline {
    color: transparent;
    -webkit-text-stroke: clamp(1.5px, .22vw, 3px) #fff;
}

.hero-title .accent {
    color: #e2692f;
    -webkit-text-stroke: 0;
}

.hero-sub {
    margin-top: clamp(26px, 4vh, 40px);
    max-width: min(640px, 90%);
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
}

.hero-sub .kicker {
    display: block;
    color: rgba(255, 255, 255, .62);
    font-size: .86em;
    margin-top: 8px;
    letter-spacing: .02em;
}

.scroll-hint {
    position: fixed;
    right: clamp(20px, 4vw, 56px);
    top: 0;
    bottom: auto;
    z-index: 40;
    width: 46px;
    height: 170px;
    overflow: hidden;
    border-radius: 999px;
    background: #f4f4f5;
    color: #111013;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .2em;
    font-size: 13px;
    transition: width .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1), transform .25s ease, box-shadow .25s ease;
}

.scroll-hint:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.scroll-hint>span {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0;
    transition: opacity .3s ease;
}

.scroll-hint .sh-top {
    justify-content: center;
    gap: 4px;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.scroll-hint.to-top {
    width: 56px;
    height: 56px;
}

.scroll-hint.to-top .sh-down {
    opacity: 0;
}

.scroll-hint.to-top .sh-top {
    opacity: 1;
}

@media (max-width:640px) {
    .scroll-hint {
        display: none;
    }
}

.scroll-hint .label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    line-height: 1;
}

.scroll-hint .arrow {
    flex: none;
    width: 20px;
    height: 20px;
    stroke: #111013;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: scrollBob 1.6s ease-in-out infinite;
}

.scroll-hint .sh-top svg {
    width: 20px;
    height: 20px;
    stroke: #111013;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: topBob 1.6s ease-in-out infinite;
}

.scroll-hint .sh-top__t {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

@keyframes scrollBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

@keyframes topBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.marquee {
    margin-bottom: 10px;
    position: relative;
    z-index: 12;
    background: linear-gradient(90deg, #0c0b0d, #0d0c0e 55%, #0e1219 72%, #0e1720);
    padding: 18px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: scroll 26s linear infinite;
}

.marquee__track span {
    display: inline-flex;
    align-items: center;
}

.marquee__item {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    padding: 0 6px;
}

.marquee__sep {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e2692f;
    margin: 0 26px;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

@keyframes scroll {
    to {
        transform: translateX(-50%);
    }
}

.partners {
    position: relative;
    z-index: 12;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 32px);
    padding: 16px clamp(20px, 4vw, 56px);
    background: transparent;
}

.partners__label {
    flex: none;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.3;
    padding-right: clamp(14px, 2.4vw, 32px);
    position: relative;
}

.partners__label::after {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 0;
    width: 1px;
    background: rgba(255, 255, 255, .16);
}

.partners__label .en {
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .2em;
    font-size: 11px;
    text-transform: uppercase;
    color: #e2692f;
}

.partners__label .ko {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, .62);
    margin-top: 3px;
    white-space: nowrap;
}

.partners__viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.partners__track {
    display: flex;
    width: max-content;
    animation: partners-scroll 48s linear infinite;
}

.partners:hover .partners__track {
    animation-play-state: paused;
}

.partners__set {
    display: flex;
    align-items: center;
    gap: clamp(30px, 3.4vw, 56px);
    padding-right: clamp(30px, 3.4vw, 56px);
    flex: none;
}

.partners__logo {
    flex: none;
    width: 165px;
    height: 50px;
    color: #fff;
    opacity: .5;
    filter: grayscale(1);
    transition: opacity .25s ease, filter .25s ease;
}

.partners__logo:hover {
    opacity: 1;
    filter: grayscale(0);
}

.partners__logo .plogo {
    display: block;
    width: 165px;
    height: 50px;
}

.partners__logo img {
    width: 165px;
    height: 50px;
    object-fit: contain;
    display: block;
}

@keyframes partners-scroll {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion:reduce) {
    .partners__track {
        animation: none;
    }
}

.nav-grid {
    display: grid;
    gap: clamp(30px, 4vw, 60px) clamp(30px, 4vw, 56px);
    grid-template-columns: repeat(3, 1fr);
    max-width: 1180px;
    width: 100%;
    margin: auto;
    text-align: left;
}

.nav-col {
    opacity: 0;
    transform: translateY(18px);
}

.nav-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.nav-head .num {
    font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #e2692f;
    letter-spacing: .05em;
}

.nav-head a,
.nav-head .txt {
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1;
    letter-spacing: -.01em;
    color: #fff;
}

.nav-head .ko {
    display: block;
    font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .62);
    margin-top: 8px;
    text-transform: none;
}

.nav-head.solo a:hover {
    color: #e2692f;
}

.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 9px 6px;
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    transition: color .2s;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: 5px;
    width: 0;
    height: 1.5px;
    background: #e2692f;
    transition: width .25s ease;
}

.nav-links a:hover {
    color: #fff;
}

.nav-links a:hover::after {
    width: calc(100% - 12px);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.chips a {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    transition: .2s;
}

.chips a:hover {
    border-color: #e2692f;
    background: #e2692f;
    color: #fff;
}

@media (max-width:1024px) {
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:768px) {

    .utils {
        display: none;
    }

    .brand-logo__svg {
        height: 26px;
    }

    .hero__body {
        padding-bottom: 120px;
    }

    .nav-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .foot-utils {
        display: flex !important;
    }

    .partners {
        padding: 12px clamp(20px, 4vw, 56px);
        gap: 14px;
    }

    .partners__label .ko {
        display: none;
    }

    .partners__logo {
        width: 140px;
        height: 44px;
    }

    .partners__logo .plogo,
    .partners__logo img {
        width: 140px;
        height: 44px;
    }
}

.foot-utils {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
}

.foot-utils a {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}

.foot-utils a:hover {
    border-color: #e2692f;
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .nav-col {
        opacity: 1;
        transform: none;
    }
}

@media (max-height:880px) {
    .hero__body {
        padding-bottom: clamp(52px, 8vh, 92px);
        transform: translateY(clamp(28px, 7vh, 72px));
    }

    .eyebrow {
        margin-bottom: 8px;
    }

    .hero-sub {
        margin-top: clamp(14px, 2.2vh, 24px);
    }

    .marquee {
        padding: 12px 0;
    }
}

.pr {
    position: relative;
    isolation: isolate;
    padding: clamp(64px, 8vh, 108px) clamp(20px, 4vw, 56px) clamp(64px, 10vh, 128px);
    background: #f1f3f5;
}

.pr__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #f1f3f5;
}

.pr__bg::before {
    content: "";
    position: absolute;
    inset: -10%;
}

.theme-dark .pr__bg::before {
    background: radial-gradient(50% 45% at 85% 8%, rgba(226, 105, 47, .28), transparent 60%),
        radial-gradient(55% 55% at 6% 96%, rgba(29, 107, 164, .24), transparent 62%);
}

.theme-light .pr__bg::before {
    background: radial-gradient(46% 42% at 84% 6%, rgba(226, 105, 47, .20), transparent 60%),
        radial-gradient(52% 52% at 8% 96%, rgba(29, 107, 164, .18), transparent 62%),
        radial-gradient(40% 40% at 60% 50%, rgba(29, 107, 164, .08), transparent 60%);
}

.pr__wrap {
    max-width: 1280px;
    margin: 0 auto;
}

.pr__layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: stretch;
}

.pr-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pr__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: clamp(28px, 3.4vh, 44px);
}

.pr__eyebrow {
    display: block;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 13px;
    color: #e2692f;
    text-transform: uppercase;
}

.pr__title {
    margin-top: 12px;
    font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    
    color: #17171a;
    line-height: 1.15;
}

.pr__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #17171a;
    white-space: nowrap;
    transition: gap .2s, color .2s;
}

.pr__more:hover {
    gap: 12px;
    color: #1d6ba4;
}

.pr__more svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pr-col__head {
    margin-bottom: clamp(14px, 1.8vh, 20px);
    padding-bottom: clamp(10px, 1.2vh, 14px);
    border-bottom: 2px solid #17171a;
}

.pr-col__eyebrow {
    display: none;
}

.pr-col__title {
    font-weight: 800;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    letter-spacing: -.01em;
    color: #17171a;
    line-height: 1.2;
}

.noti-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.noti-list li {
    flex: 1;
    display: flex;
    min-height: 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.noti-list li:last-child {
    border-bottom: none;
}

.noti-list a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(12px, 1.4vh, 16px) 2px;
    transition: padding-left .2s;
}

.noti-list a:hover {
    padding-left: 8px;
}

.noti-list__new {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e2692f;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: newBlink 1.1s ease-in-out infinite;
}

.noti-list__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0,0,0,.08);
    margin: 0 6.5px;
}

.noti-list__title {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    color: #17171a;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.noti-list a:hover .noti-list__title {
    color: #1d6ba4;
}

.noti-list__date {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    color: #63666e;
    font-variant-numeric: tabular-nums;
}

@keyframes newBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .25;
    }
}

@media (prefers-reduced-motion:reduce) {
    .noti-list__new {
        animation: none;
    }
}

.pr-gallery {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.4vw, 20px);
    align-content: start;
    min-height: 0;
}

.pr-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pr-card__lab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pr-card__cat {
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #e2692f;
}

.pr-card__idx {
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #63666e;
}

.pr-card__im {
    aspect-ratio: 16/10;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #0c2033;
    box-shadow: var(--sec-shadow);
}

.pr-card__im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.pr-card:hover .pr-card__im img {
    transform: scale(1.05);
}

.pr-card__title {
    margin-top: 12px;
    font-size: 17px;
    font-weight: 800;
    color: #17171a;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.pr-card:hover .pr-card__title {
    color: #1d6ba4;
}

.pr-card__date {
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #63666e;
    font-variant-numeric: tabular-nums;
}

@media (max-width:960px) {
    .pr__layout {
        grid-template-columns: 1fr;
        gap: clamp(28px, 5vw, 40px);
    }

    .noti-list li {
        flex: none;
    }

    .noti-list a {
        flex: none;
        padding: 16px 2px;
    }
}

@media (max-width:480px) {
    .noti-list__title {
        font-size: 15px;
    }

    .pr-gallery {
        gap: 12px;
    }

    .pr-card__cat {
        font-size: 10px;
    }
}

.emblem {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -.16em;
    flex: none;
}

.sec-round {
    position: relative;
}

.sec-curve {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: calc(100px * 2);
    transform: translateY(-30%);
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

.sec-curve .c-top {
    fill: var(--prev-bg);
}

.sec-curve .c-bot {
    fill: #f1f3f5;
}

.pr .sec-curve .c-top {
    fill: url(#heroGrad);
}

.sec-curve {
    display: none !important;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

.svc {
    position: relative;
    height: 360svh;
    background: #f1f3f5;
}

.svc__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(96px + clamp(16px, 3.4vh, 40px));
    background: radial-gradient(50% 45% at 82% 10%, rgba(226, 105, 47, .07), transparent 60%),
        radial-gradient(55% 55% at 8% 92%, rgba(29, 107, 164, .07), transparent 62%),
        #ffffff;
}

.svc__bg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 900;
    font-size: 19vw;
    line-height: 1;
    
    color: rgba(20, 32, 54, .05);
}

.svc__bg span {
    display: inline-block;
    padding-right: .35em;
    animation: svcflow 48s linear infinite;
}

@keyframes svcflow {
    to {
        transform: translateX(-50%);
    }
}

.svc__head {
    position: relative;
    z-index: 3;
    width: min(1280px, 100%);
    margin: 0 auto;
    padding: 0 max(clamp(20px, 4vw, 56px), calc((100vw - 1280px)/2));
}

.svc__eyebrow {
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 13px;
    color: #e2692f;
    text-transform: uppercase;
}

.svc__title {
    margin-top: 12px;
    font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    
    color: #17171a;
    line-height: 1.15;
}

.svc__stage {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    width: 100%;
    perspective: 2200px;
}

.svc-card2 {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: clamp(300px, 32vw, 460px);
    height: min(600px, 64svh);
    border-radius: 18px;
    overflow: hidden;
    background: #0c2033;
    transform-style: preserve-3d;
    will-change: transform;
    cursor: pointer;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.svc-card2__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.svc-card2:hover .svc-card2__img {
    transform: scale(1.06);
}

.svc-card2__grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 12, 20, .38), transparent 30%, transparent 55%, rgba(6, 12, 20, .55));
}

.svc-card2__dim {
    position: absolute;
    inset: 0;
    background: #08080a;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

.svc-card2__num {
    position: absolute;
    top: clamp(20px, 2vw, 30px);
    left: clamp(22px, 2.2vw, 34px);
    z-index: 3;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .16em;
    color: #fff;
}

.svc-card2__tt {
    position: absolute;
    bottom: clamp(22px, 2.4vw, 32px);
    left: clamp(22px, 2.2vw, 34px);
    right: clamp(84px, 9vw, 96px);
    z-index: 3;
}

.svc-card2__ko {
    font-weight: 800;
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    line-height: 1.12;
    
    color: #fff;
}

.svc-card2__en {
    margin-top: 10px;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 1vw, 15px);
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .82);
    text-transform: uppercase;
}

.svc-card2__go {
    position: absolute;
    right: clamp(18px, 1.8vw, 28px);
    bottom: clamp(18px, 1.8vw, 28px);
    z-index: 3;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .25s, color .25s, transform .25s;
}

.svc-card2:hover .svc-card2__go {
    background: #fff;
    color: #17171a;
    transform: translateX(3px);
}

.svc-card2__go svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width:768px) {
    .svc {
        height: auto;
    }

    .svc__pin {
        position: static;
        height: auto;
        overflow: visible;
        padding: calc(96px + 28px) 0 clamp(40px, 7vw, 60px);
    }

    .svc__bg {
        display: none;
    }

    .svc__head {
        margin-bottom: 22px;
    }

    .svc__stage {
        flex: none;
        height: auto;
        perspective: none;
        display: flex;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px max(clamp(20px, 4vw, 56px), 18px) 8px;
    }

    .svc__stage::-webkit-scrollbar {
        display: none;
    }

    .svc-card2 {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        flex: 0 0 82vw;
        width: 82vw;
        height: auto;
        aspect-ratio: 3/4;
        transform: none !important;
        opacity: 1 !important;
        z-index: 1 !important;
        scroll-snap-align: center;
        transform-style: flat;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    }

    .svc-card2__dim {
        display: none;
    }

    .svc-card2__ko {
        font-size: 1.6rem;
    }

    .svc-card2__tt {
        right: 78px;
    }
}

@media (max-width:420px) {
    .svc-card2 {
        flex-basis: 86vw;
        width: 86vw;
    }
}

@media (prefers-reduced-motion:reduce) {
    .svc__bg span {
        animation: none;
    }
}

.about {
    position: relative;
    background: #f1f3f5;
}

.about__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: repeating-linear-gradient(to right, rgba(20, 32, 54, .05) 0 1px, transparent 1px 12.5%);
}

.about__floats {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.about-float {
    position: absolute;
    border-radius: 18px;
    overflow: hidden;
    background: #eceef1;
    box-shadow: 0 22px 54px rgba(20, 32, 54, .1);
    opacity: 0;
    transform: translateY(74px) scale(.96);
    transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
}

.about-float.up {
    opacity: 1;
    transform: none;
}

.about-float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about__inner {
    position: relative;
    z-index: 3;
    max-width: min(900px, 54vw);
    padding: 0 clamp(20px, 4vw, 56px);
}

.about__eyebrow {
    display: inline-block;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 13px;
    color: #e2692f;
    text-transform: uppercase;
}

.about__title {
    margin-top: 16px;
    font-weight: 800;
    font-size: clamp(2.4rem, 6.4vw, 5.2rem);
    letter-spacing: -.03em;
    color: #17171a;
    line-height: 1.06;
}

.about__sub {
    margin-top: 22px;
    font-size: clamp(15px, 1.6vw, 20px);
    color: #63666e;
    font-weight: 500;
}

.about__btn {
    margin-top: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    border-radius: 999px;
    border: 1.5px solid #e2692f;
    color: #e2692f;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .01em;
    opacity: 0;
    transform: translateY(-16px);
    transition: background .25s ease, color .25s ease, opacity .34s ease, transform .34s ease;
}

.about__btn.on {
    opacity: 1;
    transform: none;
}

.about__btn:hover {
    background: #e2692f;
    color: #fff;
}

.about .rv {
    display: inline-block;
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .32s ease, transform .32s ease;
}

.about .rv.on {
    opacity: 1;
    transform: none;
}

@media (max-width:1024px) {
    .about {
        height: auto !important;
    }

    .about__pin {
        position: static;
        height: auto;
        min-height: 100vh;
        padding: clamp(90px, 14vh, 140px) clamp(20px, 4vw, 56px);
    }

    .about__floats {
        display: none;
    }

    .about__grid {
        opacity: .6;
    }

    .about .rv,
    .about__btn {
        opacity: 1;
        transform: none;
    }
}

.esg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #f1f3f5;
    padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px) clamp(80px, 12vh, 140px);
}

.esg__wrap {
    max-width: 1280px;
    margin: 0 auto;
}

.esg__eyebrow {
    display: inline-block;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 13px;
    color: #e2692f;
    text-transform: uppercase;
}

.esg__title {
    margin-top: 12px;
    font-weight: 800;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    
    color: #17171a;
    line-height: 1.15;
}

.esg__title .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2692f;
    margin-bottom: 8px;
}

.esg__sub {
    margin-top: 16px;
    color: #63666e;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.7;
}

.esg__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.esg__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .18);
    color: #17171a;
    font-weight: 700;
    font-size: 15px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.esg__more:hover {
    background: #17171a;
    border-color: #17171a;
    color: #fff;
}

.esg__more svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    transition: transform .25s ease;
}

.esg__more:hover svg {
    transform: translateX(3px);
}

.evt-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.6vw, 24px);
    margin-top: clamp(34px, 5vh, 54px);
}

.evt {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 32, 54, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}

.evt:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(20, 32, 54, .14);
}

.evt__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #0c2033;
}

.evt__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.evt:hover .evt__thumb img {
    transform: scale(1.06);
}

.evt__chip {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #e2692f;
    padding: 5px 12px;
    border-radius: 999px;
}

.evt__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 1.3vw, 22px);
}

.evt__name {
    font-size: clamp(1.05rem, 1.2vw, 1.3rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: #17171a;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evt__meta {
    margin-top: auto;
    padding-top: clamp(14px, 1.4vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.evt__meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #63666e;
    min-width: 0;
}

.evt__meta svg {
    width: 15px;
    height: 15px;
    stroke: #e2692f;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.evt__meta .evt__date {
    color: #17171a;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width:1024px) {
    .evt-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:560px) {
    .evt-list {
        grid-template-columns: 1fr;
    }
}

.ig {
    position: relative;
    background: #ffffff;
    color: #17171a;
    overflow-x: clip;
    padding: clamp(70px, 10vh, 120px) 0 clamp(96px, 13vh, 150px);
}

.ig__head {
    position: relative;
    text-align: center;
    padding: 0 clamp(20px, 4vw, 56px);
    margin-bottom: clamp(40px, 6vh, 72px);
}

.ig__eyebrow {
    display: block;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 13px;
    color: #e2692f;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ig__handle {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    font-size: clamp(36px, 6.4vw, 88px);
    line-height: 1;
    letter-spacing: -.01em;
    color: #17171a;
    display: inline-block;
}

.ig__handle:hover {
    color: #e2692f;
}

.ig__dot {
    position: absolute;
    left: clamp(20px, 6vw, 130px);
    top: 46px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #e2692f;
}

.ig__rows {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.6vw, 22px);
}

.ig__row {
    overflow: hidden;
}

.ig__track {
    display: flex;
    gap: 20px;
    width: max-content;
    will-change: transform;
}

.ig__row--left .ig__track {
    animation: igleft 60s linear infinite;
}

.ig__row--right .ig__track {
    animation: igright 60s linear infinite;
}

.ig__row:hover .ig__track {
    animation-play-state: paused;
}

@keyframes igleft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes igright {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.ig__cell {
    flex: none;
    width: calc((min(1280px, 100vw) - 60px) / 4);
    aspect-ratio: 4/5;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: transform .4s ease;
    position: relative;
}

.ig__cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .03);
}

.ig__cell:hover {
    transform: scale(.97);
}

.ig__cell:nth-child(8n+1) {
    background: radial-gradient(90% 80% at 30% 20%, rgba(226, 105, 47, .16), transparent 60%), #f1eff0 !important;
}

.ig__cell:nth-child(8n+2) {
    background: radial-gradient(90% 80% at 70% 30%, rgba(29, 107, 164, .15), transparent 60%), #edf1f4 !important;
}

.ig__cell:nth-child(8n+3) {
    background: radial-gradient(85% 90% at 50% 75%, rgba(226, 105, 47, .14), transparent 60%), #f2f0ef !important;
}

.ig__cell:nth-child(8n+4) {
    background: radial-gradient(85% 80% at 40% 40%, rgba(29, 107, 164, .15), transparent 62%), #edeff3 !important;
}

.ig__cell:nth-child(8n+5) {
    background: linear-gradient(135deg, rgba(226, 105, 47, .13), rgba(29, 107, 164, .13)), #f0f0f2 !important;
}

.ig__cell:nth-child(8n+6) {
    background: radial-gradient(90% 90% at 60% 55%, rgba(226, 105, 47, .16), transparent 58%), #f3eeed !important;
}

.ig__cell:nth-child(8n+7) {
    background: radial-gradient(85% 85% at 35% 60%, rgba(29, 107, 164, .14), transparent 60%), #edf1f4 !important;
}

.ig__cell:nth-child(8n+8) {
    background: linear-gradient(160deg, rgba(29, 107, 164, .13), rgba(226, 105, 47, .13)), #f0eff2 !important;
}

.ig__top {
    position: absolute;
    right: clamp(20px, 4vw, 60px);
    bottom: clamp(28px, 5vh, 56px);
    z-index: 5;
    width: clamp(96px, 9vw, 130px);
    height: clamp(96px, 9vw, 130px);
    border-radius: 50%;
    background: #17171a;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-weight: 500;
    font-size: clamp(19px, 1.8vw, 26px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}

.ig__top:hover {
    transform: translateY(-3px);
}

@media (max-width:768px) {
    .ig__cell {
        width: calc((100vw - 40px) / 2.3);
    }

    .ig__top {
        width: 84px;
        height: 84px;
        font-size: 18px;
    }

    .ig__dot {
        display: none;
    }
}

@media (prefers-reduced-motion:reduce) {

    .ig__row--left .ig__track,
    .ig__row--right .ig__track {
        animation: none;
    }
}

.greet2 {
    padding: 80px 20px;
    background: #fff;
}

.greet2__wrap {
    max-width: 1120px;
    margin: 0 auto;
}

.greet2__lead {
    max-width: 900px;
    font-size: 30px;
    font-weight: 800;
    
    line-height: 1.4;
    color: #17171a;
}

.greet2__lead span {
    color: #e2692f;
}

.greet2__desc {
    margin-top: clamp(16px, 2vh, 22px);
    font-size: 17px;
    color: #63666e;
    line-height: 1.8;
    font-weight: 500;
}

.greet2__body {
    margin-top: clamp(20px, 2.6vh, 30px);
}

.greet2__body p {
    font-size: 17px;
    color: #3d4048;
    line-height: 1.8;
}

.greet2__body p+p {
    margin-top: 15px;
}

.greet2__body strong {
    color: #17171a;
    font-weight: 700;
}

.qset {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(22px, 3.4vw, 50px);
    align-items: center;
    margin: clamp(30px, 5vh, 60px) 0;
}

.qset.qset--text {
    align-items: center;
}

.qset__after {
    margin-top: clamp(16px, 2vh, 22px);
    font-size: 17px;
    color: #3d4048;
    line-height: 1.6;
}

.qset__after+.qset__after {
    margin-top: 14px;
}

.qset__after strong {
    color: #17171a;
    font-weight: 700;
}

.qset.rev {
    grid-template-columns: 1fr 1.15fr;
}

.qset.rev .qset__pic {
    order: 2;
}

.qset__pic {
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16/10;
    box-shadow: 0 16px 40px rgba(20, 32, 54, .12);
}

.qset__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.qset:hover .qset__pic img {
    transform: scale(1.04);
}

.qset__label {
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #e2692f;
    text-transform: uppercase;
}

.qset__quote {
    margin-top: 14px;
    font-size: 30px;
    font-weight: 800;
    
    line-height: 1.4;
    color: #17171a;
}

.qset__quote b {
    color: #e2692f;
}

.greet2__acts {
    max-width: none;
    margin-top: clamp(24px, 3vh, 34px);
}

.greet2__acts-lead {
    font-size: 17px;
    font-weight: 700;
    color: #17171a;
    margin-bottom: 14px;
}

.greet2__acts h3 {
    font-size: 15px;
    font-weight: 800;
    color: #17171a;
    margin-bottom: 14px;
}

.greet2__acts-foot {
    margin-top: 16px;
    font-size: 17px;
    color: #3d4048;
    line-height: 1.6;
}

.greet2__divider {
    border: 0;
    height: 1px;
    background: rgba(0,0,0,.08);
    margin: clamp(30px, 5vh, 56px) 0;
}

.greet2__chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.greet2__chips .chip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f1f3f5;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #17171a;
    line-height: 1.5;
    min-width: 0;
}

.greet2__chips .chip i {
    font-style: normal;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2692f;
    flex: none;
    margin-top: 5px;
}

@media (max-width:820px) {
    .greet2__chips {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:520px) {
    .greet2__chips {
        grid-template-columns: 1fr;
    }
}

.greet2__sign {
    max-width: 820px;
    margin-top: clamp(30px, 4vh, 44px);
    padding-top: clamp(18px, 2.4vh, 24px);
    border-top: 1px solid rgba(0,0,0,.08);
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.greet2__role {
    font-size: 15px;
    font-weight: 600;
    color: #63666e;
}

.greet2__name {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #17171a;
}

@media (max-width:820px) {

    .qset,
    .qset.rev {
        grid-template-columns: 1fr;
    }

    .qset.rev .qset__pic {
        order: 0;
    }
}

.hist {
    padding: 80px 20px;
    background: #fff;
}

.hist__wrap {
    max-width: 1080px;
    margin: 0 auto;
}

.hist__yblock {
    position: relative;
    padding: clamp(26px, 3.4vw, 46px) 0;
    border-top: 2px solid #17171a;
    overflow: hidden;
}

.hist__yblock:last-child {
    border-bottom: 2px solid #17171a;
}

.hist__wm {
    position: absolute;
    right: -4px;
    top: -14px;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 900;
    font-size: clamp(5.5rem, 15vw, 12rem);
    line-height: 1;
    color: rgba(29, 107, 164, .06);
    pointer-events: none;
    z-index: 0;
    
    font-variant-numeric: tabular-nums;
}

.hist__yhead {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: clamp(16px, 2vh, 24px);
}

.hist__yr {
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    color: #17171a;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.hist__cnt {
    font-size: 13px;
    font-weight: 700;
    color: #e2692f;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hist__list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.4vw, 14px) clamp(24px, 3vw, 44px);
}

.hist__list li {
    display: flex;
    gap: 11px;
    font-size: 17px;
    color: #3d4048;
    line-height: 1.7;
}

.hist__list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e2692f;
    margin-top: 10px;
    flex: none;
}

.hist__list li b {
    color: #17171a;
    font-weight: 700;
}

@media (max-width:760px) {
    .hist__list {
        grid-template-columns: 1fr;
    }
}

.org {
    padding: 80px 20px;
    background: #fff;
}

.org__wrap {
    max-width: 980px;
    margin: 0 auto;
}

.org__g3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(16px, 2.4vw, 36px);
}

.org__col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.org__col--empty {
    visibility: hidden;
}

.org__dept {
    width: 100%;
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 22px rgba(20, 32, 54, .14);
}

.org__dept b {
    display: block;
    font-size: clamp(15px, 1.3vw, 18px);
    font-weight: 800;
    letter-spacing: -.01em;
}

.org__dept span {
    display: block;
    margin-top: 4px;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    opacity: .88;
}

.org__dept.is-brand {
    background: linear-gradient(150deg, #e2692f, #c4551f);
}

.org__dept.is-sub {
    background: linear-gradient(150deg, #1d6ba4, #134b76);
}

.org__dept.is-dark {
    background: linear-gradient(150deg, #3a3d44, #26282d);
}

.org__task {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 13px 10px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #17171a;
    box-shadow: 0 3px 10px rgba(20, 32, 54, .05);
}

.org__vl {
    width: 0;
    height: 22px;
    border-left: 2px dotted #b3b6bc;
    margin: 13px auto;
}

.org__top {
    position: relative;
}

.org__top::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 16.667%;
    right: 16.667%;
    border-top: 2px dotted #b3b6bc;
    z-index: 0;
}

.org__top .org__col {
    position: relative;
    z-index: 1;
}

.org__branch {
    position: relative;
    height: 104px;
}

.org__branch .vtop {
    position: absolute;
    left: 50%;
    top: 0;
    height: 44px;
    border-left: 2px dotted #b3b6bc;
}

.org__branch .dot {
    position: absolute;
    left: 50%;
    top: 40px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #17171a;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.org__branch .hbar {
    position: absolute;
    left: 16.667%;
    right: 16.667%;
    top: 40px;
    border-top: 2px dotted #b3b6bc;
}

.org__branch .vll {
    position: absolute;
    left: 16.667%;
    top: 40px;
    height: 64px;
    border-left: 2px dotted #b3b6bc;
}

.org__branch .vlr {
    position: absolute;
    left: 83.333%;
    top: 40px;
    height: 64px;
    border-left: 2px dotted #b3b6bc;
}

@media (max-width:760px) {
    .org__g3 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .org__top::before {
        display: none;
    }

    .org__col--empty {
        display: none;
    }

    .org__col {
        margin-bottom: 28px;
    }

    .org__branch {
        height: 40px;
    }

    .org__branch .hbar,
    .org__branch .vll,
    .org__branch .vlr {
        display: none;
    }

    .org__branch .vtop {
        left: 50%;
        height: 40px;
    }

    .org__branch .dot {
        display: none;
    }
}

.hb {
    background: #fff;
}

.hb.py{
    padding: 80px 0;
}

.hb__full {
    width: 100%;
    padding: 0;
}

.hb__pad {
    padding-left: 0;
    padding-right: 0;
}

.hb .eyebrow {
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 13px;
    text-transform: uppercase;
    color: #e2692f;
}

.hb__intro {
    padding: 80px 0 0;
}

.hb__intro h1 {
    font-weight: 800;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    
    margin-top: 8px;
    color: #17171a;
}

.hb__p {
    font-size: 17px;
    color: #3d4048;
    line-height: 1.8;
}

.hb .hot {
    color: #e2453a;
    font-weight: 700;
}

.hb__stitle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
    
    margin-bottom: clamp(18px, 2.4vw, 26px);
    color: #17171a;
}

.hb__stitle i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 17px;
    color: #fff;
    background: #e2692f;
    flex: none;
}

.hb__stitle i.b {
    background: #1d6ba4;
}

.hb__sec {
    padding: 60px 0 0;
}

.hb__sec.last{
    padding: 60px 0 80px;
}

.ct__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.8vw, 22px);
}

.ct__step {
    background: #f1f3f5;
    border-radius: 18px;
    padding: clamp(24px, 2.8vw, 36px) clamp(16px, 2vw, 22px);
    text-align: center;
}

.ct__step .ic {
    width: 60px;
    height: 60px;
    margin: 0 auto clamp(14px, 2vh, 20px);
    border-radius: 16px;
    background: #fff;
    color: #1d6ba4;
    display: grid;
    place-items: center;
    font-size: 23px;
    box-shadow: 0 6px 16px rgba(20, 32, 54, .08);
}

.ct__step h4 {
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    font-weight: 800;
    color: #17171a;
    letter-spacing: -.01em;
}

.ct__step p {
    margin-top: 8px;
    font-size: 15px;
    color: #63666e;
}

@media (max-width:760px) {
    .ct__steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:420px) {
    .ct__steps {
        grid-template-columns: 1fr;
    }
}

.hb__summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
}

.hb__scard {
    border-radius: 18px;
    padding: clamp(24px, 3vw, 40px);
    color: #fff;
}

.hb__scard i {
    font-size: 28px;
}

.hb__scard b {
    display: block;
    margin-top: 16px;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 800;
}

.hb__scard span {
    display: block;
    margin-top: 7px;
    font-size: 14px;
    opacity: .88;
    line-height: 1.6;
}

.hb__scard.a {
    background: linear-gradient(150deg, #e2692f, #c4551f);
}

.hb__scard.b {
    background: linear-gradient(150deg, #1d6ba4, #134b76);
}

.hb__scard.c {
    background: linear-gradient(150deg, #3a3d44, #26282d);
}

.hb__flowbox {
    background: #f1f3f5;
    border-radius: 18px;
    padding: clamp(26px, 3.4vw, 44px);
}

.hb__flow {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}

.hb__st {
    flex: 1;
    min-width: 150px;
    text-align: center;
    padding: 0 8px;
    position: relative;
}

.hb__st .ic {
    width: 66px;
    height: 66px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 25px;
    color: #fff;
    background: linear-gradient(150deg, #1d6ba4, #134b76);
    box-shadow: 0 8px 20px rgba(29, 107, 164, .25);
}

.hb__st h4 {
    margin-top: 14px;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 800;
}

.hb__st p {
    margin-top: 6px;
    font-size: 13px;
    color: #63666e;
    line-height: 1.6;
}

.hb__ar {
    align-self: center;
    color: #e2692f;
    font-size: 18px;
    padding-top: 16px;
    width: 34px;
    text-align: center;
}

.hb__gal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 1.4vw, 18px);
}

.hb__gal .g {
    aspect-ratio: 1/1;
    border-radius: 14px;
    overflow: hidden;
    background: #0c2033;
}

.hb__gal .g img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.hb__gal .g:hover img {
    transform: scale(1.05);
}

.hb__notebox {
    background: #f1f3f5;
    border-radius: 16px;
    padding: clamp(22px, 2.8vw, 34px);
    margin-bottom: clamp(18px, 2.4vw, 28px);
}

.hb__li {
    display: flex;
    gap: 10px;
    font-size: 17px;
    line-height: 1.65;
}

.hb__li i {
    margin-top: 5px;
    color: #63666e;
}

.hb__li+.hb__li {
    margin-top: 8px;
}

.hb__frauds {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 1.4vw, 18px);
}

.hb__fraud {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 20px 16px;
    text-align: center;
}

.hb__fraud .ic {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: rgba(226, 105, 47, .1);
    color: #e2692f;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.hb__fraud p {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.hb__wide {
    width: 100%;
}

.hb__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width:860px) {

    .hb__summary,
    .hb__frauds {
        grid-template-columns: 1fr 1fr;
    }

    .hb__gal {
        grid-template-columns: 1fr 1fr;
    }

    .hb__flow{
        gap: 1rem;
    }
    .hb__st {
        min-width: calc(50% - 16px);
    }

    .hb__ar {
        display: none;
    }
}

@media (max-width:520px) {

    .hb__summary,
    .hb__frauds,
    .hb__gal {
        grid-template-columns: 1fr;
    }

    .hb__st {
        min-width: 100%;
    }
}

.hb__infobox {
    background: #f1f3f5;
    border-radius: 16px;
    padding: clamp(20px, 2.6vw, 32px);
    font-size: 17px;
    color: #3d4048;
    line-height: 1.8;
}

.hb__infobox strong {
    color: #17171a;
    font-weight: 700;
}

.hb__intro--img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.4vw, 54px);
    align-items: center;
    background: #ffffff;
    border-radius: 22px;
    padding: clamp(24px, 3vw, 44px);
}

.hb__intro--img .pic {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #0c2033;
}

.hb__intro--img .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hb__intro--img h1 {
    font-weight: 800;
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    
    line-height: 1.35;
    color: #17171a;
}

.hb__regions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.8vw, 22px);
}

.hb__region {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #ffffff;
    border-radius: 16px;
    padding: clamp(22px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
    text-align: left;
    transition: transform .25s ease, box-shadow .25s ease;
    border: 1px solid transparent;
}

.hb__region:hover {
    box-shadow: 0 14px 32px rgba(20, 32, 54, .12);
    border-color: rgba(0,0,0,.08);
}

.hb__region .cap {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .62);
}

.hb__region .name {
    margin-top: 4px;
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1.1;
}

.hb__region .arw {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2692f;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    flex: none;
    transition: transform .25s ease;
}

.hb__region:hover .arw {
    transform: translateX(4px);
}

@media (max-width:860px) {
    .hb__intro--img {
        grid-template-columns: 1fr;
    }

    .hb__regions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:520px) {
    .hb__regions {
        grid-template-columns: 1fr;
    }
}

.ct__lead {
    margin-bottom: clamp(22px, 3vw, 34px);
}

.ct__lead h1 {
    margin-top: 8px;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    
    line-height: 1.35;
    color: #17171a;
}

.ct__photo {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 21/9;
    background: #0c2033;
    margin-bottom: clamp(22px, 3vw, 32px);
}

.ct__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width:760px) {
    .ct__photo {
        aspect-ratio: 16/10;
    }
}

.sub-main {
    --sec-bg: #ffffff;
    --sec-fg: #17171a;
    --sec-muted: #63666e;
    --sec-divider: rgba(0, 0, 0, .08);
}

.pt {
    padding: calc(96px + clamp(34px, 5vh, 64px)) clamp(20px, 4vw, 56px) clamp(22px, 3vh, 34px);
    text-align: center;
    background: linear-gradient(180deg, #f1f3f5, #ffffff);
}

.pt__crumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    color: #63666e;
}

.pt__crumb b {
    color: #e2692f;
    font-weight: 700;
}

.pt__title {
    margin-top: 10px;
    font-weight: 800;
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    
    line-height: 1.15;
    color: #17171a;
}

.greet {
    padding: clamp(36px, 5.2vh, 64px) clamp(20px, 4vw, 56px) clamp(64px, 9vh, 110px);
    background: #fff;
}

.greet__wrap {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.greet__photo {
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    aspect-ratio: 3/4;
    box-shadow: 0 12px 34px rgba(20, 32, 54, .1);
}

.greet__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.greet__lead {
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    font-weight: 800;
    
    line-height: 1.4;
    color: #17171a;
}

.greet__lead span {
    color: #e2692f;
}

.greet__body {
    margin-top: clamp(18px, 2.4vh, 26px);
}

.greet__body p {
    font-size: 17px;
    color: #3d4048;
    line-height: 1.85;
}

.greet__body p+p {
    margin-top: 16px;
}

.greet__body strong {
    color: #17171a;
    font-weight: 700;
}

.greet__sign {
    margin-top: clamp(26px, 3.4vh, 38px);
    padding-top: clamp(18px, 2.4vh, 24px);
    border-top: 1px solid rgba(0,0,0,.08);
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.greet__role {
    font-size: 15px;
    font-weight: 600;
    color: #63666e;
}

.greet__name {
    font-size: clamp(1.2rem, 1.6vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: #17171a;
}

.greet__links {
    max-width: 1120px;
    margin: clamp(34px, 5vh, 56px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
}

.greet__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #f1f3f5;
    border-radius: 14px;
    padding: clamp(18px, 2vw, 26px);
    transition: transform .25s ease, background .25s ease;
}

.greet__link:hover {
    transform: translateY(-3px);
    background: #e9edf1;
}

.greet__link b {
    font-size: 17px;
    font-weight: 800;
    color: #17171a;
}

.greet__link span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #63666e;
}

.greet__link svg {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: #e2692f;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width:900px) {
    .greet__wrap {
        grid-template-columns: 1fr;
    }

    .greet__photo {
        max-width: 320px;
    }

    .greet__links {
        grid-template-columns: 1fr;
    }
}

.af {
    max-width: 1120px;
    margin: 0 auto;
    padding: 80px 20px;
}

.af__intro {
    background: #f1f3f5;
    border-radius: 20px;
    padding: clamp(28px, 3.6vw, 48px);
    margin-bottom: clamp(30px, 4vw, 50px);
}

.af__intro h2 {
    text-align: center;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    
    line-height: 1.3;
    color: #17171a;
}

.af__leads {
    margin-top: clamp(22px, 3vw, 32px);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.af__intro .lead {
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    color: #2b2d33;
    line-height: 1.6;
}

.af__intro .lead+.lead {
    margin-top: 6px;
}

.af__intro .lead strong {
    color: #17171a;
    font-weight: 800;
}

.af__grid {
    margin-top: clamp(24px, 3.2vw, 36px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 18px);
}

.af__g {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    padding: clamp(22px, 2.6vw, 30px) clamp(16px, 1.8vw, 20px);
    text-align: center;
}

.af__g .ic {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: rgba(29, 107, 164, .1);
    color: #1d6ba4;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.af__g .gt {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    font-weight: 800;
    color: #17171a;
}

.af__g p {
    margin-top: 4px;
    font-size: 15px;
    color: #63666e;
    line-height: 1.4;
}

.af__intro .note {
    margin-top: clamp(24px, 3.2vw, 36px);
    text-align: center;
    color: #17171a;
    font-weight: 800;
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.7;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}

@media(max-width:640px) {
    .af__grid {
        grid-template-columns: 1fr;
    }
}

.af__q {
    margin-bottom: clamp(26px, 3.2vw, 38px);
}

.af__q .qh {
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    font-weight: 800;
    color: #17171a;
    letter-spacing: -.01em;
}

.af__q .qh .req {
    color: #e2453a;
    margin-left: 3px;
}

.af__q .qd {
    margin-top: 10px;
    font-size: 15px;
    color: #63666e;
    line-height: 1.6;
}

.af__q .qd.mut {
    color: rgba(255, 255, 255, .62);
}

.af__field {
    margin-top: 20px;
}

.af__field input[type=text],
.af__field input[type=tel],
.af__field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 17px;
    color: #17171a;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color .2s, box-shadow .2s;
}

.af__field input::placeholder,
.af__field textarea::placeholder {
    color: #a9adb4;
}

.af__field input:focus,
.af__field textarea:focus {
    outline: none;
    border-color: #e2692f;
    box-shadow: 0 0 0 3px rgba(226, 105, 47, .14);
}

.af__field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.7;
}

.af__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 20px;
}

.af__opt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 17px;
    color: #17171a;
    line-height: 1.6;
}

.af__opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.af__opt .mk {
    width: 20px;
    height: 20px;
    border: 2px solid #c4c8ce;
    background: #fff;
    display: grid;
    place-items: center;
    flex: none;
    transition: .15s;
}

.af__opt.rad .mk {
    border-radius: 50%;
}

.af__opt.chk .mk {
    border-radius: 6px;
}

.af__opt .mk i {
    font-size: 11px;
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: .15s;
}

.af__opt input:checked+.mk {
    background: #e2692f;
    border-color: #e2692f;
}

.af__opt input:checked+.mk i {
    opacity: 1;
    transform: scale(1);
}

.af__opt input:focus-visible+.mk {
    box-shadow: 0 0 0 3px rgba(226, 105, 47, .25);
}

.af__regions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

.af__rg {
    cursor: pointer;
}

.af__rg input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.af__rg .box {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 16px 18px;
    transition: .18s;
    background: #fff;
}

.af__rg .box .pin {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    flex: none;
    background: #e2692f;
}

.af__rg .box .nm {
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    color: #17171a;
    white-space: nowrap;
}

.af__rg .box .chk {
    margin-left: auto;
    color: #e2692f;
    font-size: 18px;
    opacity: 0;
    transition: .15s;
}

.af__rg.cl1 .box .chk{
    color: #1d6ba4;
}
.af__rg.cl2 .box .chk{
    color: #7a5cc4;
}
.af__rg.cl3 .box .chk{
    color: #2f8fd0;
}
.af__rg.cl4 .box .chk{
    color: #1f9e7a;
}
.af__rg.cl5 .box .chk{
    color: #e2a02f;
}
.af__rg.cl6 .box .chk{
    color: #e2692f;
}

.af__rg:hover .box {
    border-color: color-mix(in srgb, #e2692f 45%, rgba(0,0,0,.08));
}

.af__rg input:checked+.box {
    border-color: #e2692f;
    background: color-mix(in srgb, #e2692f 7%, #fff);
}

.af__rg.cl1 input:checked+.box {
    border-color: #1d6ba4;
    background: color-mix(in srgb, #1d6ba4 7%, #fff);
}
.af__rg.cl2 input:checked+.box {
    border-color: #7a5cc4;
    background: color-mix(in srgb, #7a5cc4 7%, #fff);
}
.af__rg.cl3 input:checked+.box {
    border-color: #2f8fd0;
    background: color-mix(in srgb, #2f8fd0 7%, #fff);
}
.af__rg.cl4 input:checked+.box {
    border-color: #1f9e7a;
    background: color-mix(in srgb, #1f9e7a 7%, #fff);
}
.af__rg.cl5 input:checked+.box {
    border-color: #e2a02f;
    background: color-mix(in srgb, #e2a02f 7%, #fff);
}
.af__rg.cl6 input:checked+.box {
    border-color: #e2692f;
    background: color-mix(in srgb, #e2692f 7%, #fff);
}

.af__rg input:checked+.box .chk {
    opacity: 1;
}

.af__rg input:focus-visible+.box {
    box-shadow: 0 0 0 3px rgba(226, 105, 47, .22);
}

.af__rg.cl1:hover .box {
    border-color: color-mix(in srgb, #1d6ba4 45%, rgba(0,0,0,.08));
}

.af__rg.cl1 .box .pin{
    background: #1d6ba4;
}

.af__rg.cl2:hover .box {
    border-color: color-mix(in srgb, #7a5cc4 45%, rgba(0,0,0,.08));
}

.af__rg.cl2 .box .pin{
    background: #7a5cc4;
}

.af__rg.cl3:hover .box {
    border-color: color-mix(in srgb, #2f8fd0 45%, rgba(0,0,0,.08));
}

.af__rg.cl3 .box .pin{
    background: #2f8fd0;
}

.af__rg.cl4:hover .box {
    border-color: color-mix(in srgb, #1f9e7a 45%, rgba(0,0,0,.08));
}

.af__rg.cl4 .box .pin{
    background: #1f9e7a;
}

.af__rg.cl5:hover .box {
    border-color: color-mix(in srgb, #e2a02f 45%, rgba(0,0,0,.08));
}

.af__rg.cl5 .box .pin{
    background: #e2a02f;
}

.af__rg.cl6:hover .box {
    border-color: color-mix(in srgb, #e2692f 45%, rgba(0,0,0,.08));
}

.af__rg.cl6 .box .pin{
    background: #e2692f;
}

.af__agree {
    background: #f1f3f5;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: clamp(18px, 2.2vw, 26px);
}

.af__agree .ah {
    font-weight: 800;
    color: #17171a;
    margin-bottom: 12px;
    font-size: 16px;
}

.af__agree .ah .req {
    color: #e2453a;
}

.af__agree ul {
    list-style: none;
    font-size: 15px;
    color: #3d4048;
    line-height: 1.8;
}

.af__agree ul li {
    padding-left: 14px;
    position: relative;
}

.af__agree ul li::before {
    content: "·";
    position: absolute;
    left: 2px;
    color: #63666e;
}

.af__agreechk {
    margin-top: 16px;
}

.af__submit {
    margin-top: clamp(30px, 4vw, 44px);
    text-align: center;
}

.af__submit button {
    font-family: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    background: #e2692f;
    border: 0;
    border-radius: 999px;
    padding: 16px 48px;
    cursor: pointer;
    transition: .2s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.af__submit button:hover {
    background: #c4551f;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(226, 105, 47, .3);
}

.af__submit .hint {
    margin-top: 12px;
    font-size: 15px;
    color: rgba(255, 255, 255, .62);
}

.af__modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.af__modal.is-open {
    display: flex;
}

.af__modal-dim {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 22, .55);
    backdrop-filter: blur(2px);
    animation: afmDim .25s ease;
}

.af__modal-box {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: clamp(30px, 4vw, 44px) clamp(26px, 3.4vw, 40px);
    max-width: 400px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(10, 14, 22, .35);
    animation: afmPop .3s cubic-bezier(.2, .9, .3, 1.2);
}

.af__modal-ic {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(31, 158, 122, .12);
    color: #1f9e7a;
    display: grid;
    place-items: center;
    font-size: 32px;
}

.af__modal-box h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -.01em;
    color: #17171a;
}

.af__modal-box p {
    margin-top: 10px;
    font-size: 17px;
    color: #3d4048;
    line-height: 1.7;
}

.af__modal-btn {
    margin-top: 24px;
    font-family: inherit;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    background: #e2692f;
    border: 0;
    border-radius: 999px;
    padding: 14px 40px;
    cursor: pointer;
    transition: .2s;
}

.af__modal-btn:hover {
    background: #c4551f;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(226, 105, 47, .3);
}

@keyframes afmDim {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes afmPop {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width:820px) {
    .af__regions {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:480px) {
    .af__regions {
        grid-template-columns: 1fr;
    }
}

.af__field select {
    width: 100%;
    font-family: inherit;
    font-size: 17px;
    color: #17171a;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 14px 44px 14px 16px;
    appearance: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}

.af__field select:focus {
    outline: none;
    border-color: #e2692f;
    box-shadow: 0 0 0 3px rgba(226, 105, 47, .14);
}

.af__selwrap {
    position: relative;
}

.af__selwrap i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .62);
    pointer-events: none;
    font-size: 13px;
}

.cs {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 20px;
    padding: clamp(34px, 4.4vw, 56px);
    margin-bottom: clamp(30px, 4vw, 50px);
    text-align: center;
    box-shadow: 0 12px 34px rgba(20, 32, 54, .06);
}

.cs__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(29, 107, 164, .1);
    color: #1d6ba4;
    font-weight: 800;
    font-size: clamp(13px, 1.1vw, 15px);
    padding: 9px 20px;
    border-radius: 999px;
}

.cs__tel {
    margin-top: 18px;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 900;
    color: #17171a;
    letter-spacing: -.01em;
    line-height: 1;
}

.cs__hrs {
    margin-top: 12px;
    color: #63666e;
    font-size: clamp(14px, 1.2vw, 16px);
}

.cs__kbtn {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: clamp(22px, 2.8vw, 30px) auto 0;
    max-width: 520px;
    background: #fee500;
    color: #3a1d1d;
    border-radius: 14px;
    padding: 16px 20px;
    font-weight: 800;
    transition: .2s;
}

.cs__kbtn:hover {
    filter: brightness(.97);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(254, 229, 0, .4);
}

.cs__kbtn .talk {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #3a1d1d;
    color: #fee500;
    display: grid;
    place-items: center;
    flex: none;
}

.cs__kbtn .talk .tk {
    font-size: 10px;
    font-weight: 900;
}

.cs__kbtn-t {
    font-size: clamp(14px, 1.2vw, 16px);
    text-align: left;
}

.cs__kbtn-go {
    margin-left: auto;
    font-size: 13px;
    color: #3a1d1d;
}

@media(max-width:520px) {
    .cs__kbtn {
        flex-direction: column;
        text-align: center;
    }

    .cs__kbtn-t {
        text-align: center;
    }

    .cs__kbtn-go {
        margin-left: 0;
    }
}

.af__terms {
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-right: 1px solid rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 15px;
    color: #3d4048;
    line-height: 1.65;
    margin-bottom: 4px;
}

.hb__stitle .sub {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: #63666e;
}

.hb__applybox {
    background: #f6f7f9;
    border-radius: 20px;
    padding: clamp(24px, 3.2vw, 44px);
}

.hb__rgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 18px);
}

.hb__rg {
    background: #fff;
    border-radius: 16px;
    padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.4vw, 28px);
    box-shadow: 0 2px 10px rgba(20, 32, 54, .06);
    transition: transform .24s ease, box-shadow .24s ease;
}

.hb__rg:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20, 32, 54, .12);
}

.hb__rg .cap {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #9a9da5;
    text-transform: uppercase;
}

.hb__rg .name {
    margin-top: 8px;
    font-size: clamp(1.3rem, 2vw, 1.66rem);
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.hb__rg.cl1 .name{
    color: #1d6ba4;
}
.hb__rg.cl2 .name{
    color: #7a5cc4;
}
.hb__rg.cl3 .name{
    color: #2f8fd0;
}
.hb__rg.cl4 .name{
    color: #1f9e7a;
}
.hb__rg.cl5 .name{
    color: #e2a02f;
}
.hb__rg.cl6 .name{
    color: #e2692f;
}

.hb__applyfoot {
    margin-top: clamp(28px, 3.6vw, 42px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(16px, 2vw, 22px);
}

.hb__applyfoot .p {
    font-size: 15px;
    line-height: 1.75;
    color: #63666e;
}

.hb__applybtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 19px 38px;
    border-radius: 999px;
    background: #e2692f;
    color: #fff;
    font-weight: 800;
    font-size: 16.5px;
    letter-spacing: -.01em;
    box-shadow: 0 10px 24px rgba(226, 105, 47, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}

.hb__applybtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(226, 105, 47, .36);
}

.hb__applybtn i {
    font-size: 13px;
}

@media (max-width:860px) {
    .hb__intro--img {
        grid-template-columns: 1fr
    }

    .hb__rgs {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:520px) {
    .hb__rgs {
        grid-template-columns: 1fr
    }

    .hb__applybtn {
        width: 100%
    }
}

/* media-query */

@media(min-width:1200px) {
    .d-lg-block {
        display: block;
    }

    .d-lg-none {
        display: none;
    }

    .ani.up.delay {
        transition: 1s opacity 0.2s, 1s transform 0.2s;
    }

    .ani.up.delay2 {
        transition: 1s opacity 0.5s, 1s transform 0.5s;
    }

    .ani.up.delay3 {
        transition: 1s opacity 0.8s, 1s transform 0.8s;
    }

    .ani.up.delay4 {
        transition: 1s opacity 1.1s, 1s transform 1.1s;
    }
}

@media(max-width:1024px) {
    .d-block {
        display: block;
    }

    .d-none {
        display: none;
    }

    .greet2{
        padding: 60px 20px;
    }
    .hist{
        padding: 60px 20px;
    }
    .org{
        padding: 60px 20px;
    }
    .greet2__lead{
        font-size: 26px;
    }
    .greet2__desc, .greet2__body p{
        font-size: 16px;
        line-height: 1.6;
    }
    .qset__quote{
        font-size: 26px;
    }
    .qset__after{
        font-size: 16px;
        line-height: 1.5;
    }
    .greet2__acts-lead{
        font-size: 16px;
    }
    .greet2__acts-foot{
        font-size: 16px;
        line-height: 1.5;
    }
    .greet2__chips{
        grid-template-columns: repeat(2, 1fr);
    }

    .hist__list li{
        font-size: 16px;
    }

    .hb__intro{
        padding: 60px 0 0;
    }
    .hb__sec{
        padding: 40px 0 0;
    }

    .hb__p{
        font-size: 16px;
        line-height: 1.6;
    }
    .hb__li{
        font-size: 16px;
        line-height: 1.6;
    }
    .hb__infobox{
        font-size: 16px;
        line-height: 1.6;
    }

    .af{
        padding: 60px 0;
    }
}

@media(max-width:700px) {
    .hist__list li{
        font-size: 15px;
    }
    .hist__list{
        gap: 8px;
    }
    .hist__list li::before{
        margin-top: 9px;
    }

    .af__opt{
        gap: 7px;
        font-size: 15px;
    }
    .af__opt .mk{
        width: 15px;
        height: 15px;
    }
    .af__terms{
        font-size: 14px;
    }
    .af__q .qh{
        line-height: 1.4;
    }
    .af__q .qd{
        font-size: 14px;
        margin-top: 5px;
    }
    .af__field{
        margin-top: 10px;
    }
    .af__field input[type=text], .af__field input[type=tel], .af__field textarea{
        font-size: 16px;
    }
}

@media(max-width:587px) {
    .greet2__lead{
        font-size: 24px;
    }
    .greet2__desc, .greet2__body p{
        font-size: 15px;
    }
    .qset__quote{
        font-size: 24px;
    }
    .qset__after{
        font-size: 14px;
    }
    .greet2__chips{
        gap: 10px;
        grid-template-columns: 1fr;
    }
    .greet2__acts-lead{
        font-size: 15px;
    }
    .greet2__acts-foot{
        font-size: 14px;
    }
    .greet2__name{
        font-size: 22px;
    }

    .hist__list li{
        font-size: 14px;
        gap: 8px;
    }
    .hist__list li::before{
        width: 4px;
        height: 4px;
        margin-top: 9px;
    }
    .hist__list{
        gap: 6px;
    }
    .hb__li{
        font-size: 14px;
    }
    .hb__infobox{
        font-size: 15px;
    }

    .cs {
        padding: 30px 20px;
    }

    .af__field input[type=text], .af__field input[type=tel], .af__field textarea{
        font-size: 15px;
    }

    .af__agree ul li{
        font-size: 14px;
    }
}

/* animation */

.ani.up {
    transform: translateY(100px);
    opacity: 0;
    transition: 1s;
}

.ani.up.act {
    transform: translateY(0);
    opacity: 1;
}


/* ================================================================
   취미찾기사업 페이지 (page_activities01) — hbf
   2026-08 리뉴얼 : 가로 사진 캐러셀 + 오버랩 정보카드
================================================================ */
.hbf {
    background: #fff;
    --hbf-o: #e2692f;
    --hbf-o-d: #c4551f;
    --hbf-o-l: #fdf1ea;
    --hbf-b: #1d6ba4;
    --hbf-b-d: #134b76;
    --hbf-ink: #17171a;
    --hbf-ink2: #3d4048;
    --hbf-gray: #63666e;
    --hbf-bg: #f1f3f5;
    --hbf-line: rgba(0, 0, 0, .09);
    --hbf-r: #c0392b;
    --hbf-r-l: #fdeeec;
}

.hbf__in {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.hbf__eyebrow {
    display: block;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .16em;
    font-size: 12px;
    text-transform: uppercase;
    color: #e2692f;
}

/* ---------- 히어로 ---------- */
.hbf__hero {
    padding: clamp(56px, 6vw, 80px) 0 0;
}

.hbf__title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.28;
    color: var(--hbf-ink);
    margin: 13px 0 20px;
    word-break: keep-all;
}

.hbf__lead {
    font-size: clamp(15px, 1.3vw, 16.5px);
    color: var(--hbf-ink2);
    line-height: 1.9;
    max-width: 780px;
    word-break: keep-all;
}

.hbf__lead strong {
    color: #e2692f;
    font-weight: 800;
}

/* ---------- 캐러셀 ---------- */
.hbf__slider {
    position: relative;
    margin-top: clamp(28px, 3.6vw, 44px);
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 21/7;
    background: var(--hbf-bg);
}

.hbf__track {
    display: flex;
    height: 100%;
    transition: transform .7s cubic-bezier(.65, .05, .36, 1);
}

.hbf__slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}

.hbf__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hbf__slide:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .34));
}

.hbf__cap {
    position: absolute;
    z-index: 2;
    left: 34px;
    bottom: 96px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(8px);
    transition: .5s .15s;
}

.hbf__slide.is-on .hbf__cap {
    opacity: 1;
    transform: none;
}

.hbf__ctrl {
    position: absolute;
    z-index: 3;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, .34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    padding: 6px 8px;
}

.hbf__btn {
    width: 32px;
    height: 32px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    transition: .18s;
}

.hbf__btn:hover {
    background: rgba(255, 255, 255, .22);
}

.hbf__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.hbf__dots {
    display: flex;
    gap: 6px;
    padding: 0 6px;
}

.hbf__dot {
    width: 7px;
    height: 7px;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(255, 255, 255, .42);
    transition: .25s;
}

.hbf__dot.is-on {
    background: #fff;
    width: 20px;
    border-radius: 999px;
}

.hbf__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---------- 정보카드 (가로 1열 · 오버랩) ---------- */
.hbf__keys {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 34px rgba(20, 32, 54, .12);
    overflow: hidden;
    margin: -64px auto 0;
    width: calc(100% - 64px);
}

.hbf__key {
    padding: clamp(26px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(28px, 3.2vw, 36px);
}

.hbf__key+.hbf__key {
    box-shadow: inset 1px 0 0 var(--hbf-line);
}

.hbf__key .ic {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--hbf-o-l);
    color: #e2692f;
    display: grid;
    place-items: center;
    font-size: 18px;
    margin-bottom: 16px;
}

.hbf__key b {
    display: block;
    font-size: clamp(17px, 1.6vw, 19px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--hbf-ink);
}

.hbf__key p {
    margin-top: 9px;
    font-size: 14px;
    color: var(--hbf-gray);
    line-height: 1.75;
    word-break: keep-all;
}

/* ---------- 섹션 공통 ---------- */
.hbf__sec {
    padding: clamp(48px, 5.6vw, 66px) 0;
}

.hbf__sec.is-tight {
    padding-top: 0;
}

.hbf__sec.is-last {
    padding-bottom: clamp(56px, 6vw, 80px);
}

.hbf__stitle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: clamp(1.25rem, 2vw, 1.56rem);
    letter-spacing: -.03em;
    color: var(--hbf-ink);
    margin-bottom: clamp(18px, 2.4vw, 24px);
}

.hbf__stitle i.ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #fff;
    background: #e2692f;
    flex: none;
}

.hbf__stitle i.ic.is-blue {
    background: var(--hbf-b);
}

.hbf__stitle i.ic.is-red {
    background: var(--hbf-r);
}

/* ---------- 신청방법 ---------- */
.hbf__flow {
    background: var(--hbf-bg);
    border-radius: 20px;
    padding: clamp(28px, 3.4vw, 38px) clamp(16px, 2vw, 24px);
    display: flex;
    align-items: flex-start;
}

.hbf__step {
    flex: 1;
    text-align: center;
    padding: 0 6px;
}

.hbf__step .ic {
    width: 62px;
    height: 62px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 23px;
    color: #fff;
    background: linear-gradient(150deg, var(--hbf-b), var(--hbf-b-d));
    box-shadow: 0 8px 18px rgba(29, 107, 164, .24);
}

.hbf__step h4 {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hbf-ink);
}

.hbf__step p {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--hbf-gray);
    line-height: 1.55;
}

.hbf__ar {
    align-self: center;
    flex: none;
    width: 28px;
    text-align: center;
    padding-top: 20px;
    color: #e2692f;
    font-size: 16px;
}

/* ---------- 유의사항 ---------- */
.hbf__notice {
    background: var(--hbf-bg);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 32px);
}

.hbf__notice-top {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 18px);
    background: #fff;
    border-radius: 16px;
    padding: clamp(20px, 2.4vw, 25px) clamp(20px, 2.6vw, 28px);
}

.hbf__notice-top .ic {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--hbf-r);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 19px;
    box-shadow: 0 8px 18px rgba(192, 57, 43, .22);
}

.hbf__notice-top p {
    font-size: clamp(14.5px, 1.2vw, 15.5px);
    color: var(--hbf-ink2);
    line-height: 1.8;
    letter-spacing: -.02em;
    word-break: keep-all;
}

.hbf__notice-top strong {
    color: var(--hbf-r);
    font-weight: 800;
}

.hbf__notice-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: clamp(20px, 2.4vw, 26px) 0 12px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hbf-gray);
}

.hbf__notice-label i {
    font-size: 11px;
    color: var(--hbf-r);
}

.hbf__notice-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.2vw, 14px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hbf__notice-list li {
    background: #fff;
    border-radius: 14px;
    padding: clamp(18px, 2.2vw, 22px) clamp(16px, 2vw, 20px);
}

.hbf__notice-list .no {
    display: inline-block;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--hbf-r);
    background: var(--hbf-r-l);
    border-radius: 8px;
    padding: 5px 10px;
    line-height: 1;
}

.hbf__notice-list p {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--hbf-ink2);
    line-height: 1.6;
    word-break: keep-all;
}

.hbf__notice-foot {
    margin-top: clamp(16px, 2vw, 20px);
    font-size: 13.5px;
    color: var(--hbf-gray);
    line-height: 1.7;
    word-break: keep-all;
}

/* ---------- 활동 모습 ---------- */
.hbf__gal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.3vw, 14px);
}

.hbf__gal figure {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--hbf-bg);
}

.hbf__gal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.hbf__gal figure:hover img {
    transform: scale(1.05);
}

/* ---------- 하단 배너 ---------- */
.hbf__bn {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 210px;
    display: flex;
    align-items: center;
    background: #17171a;
}

.hbf__bn>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 글자 가독성용 스크림 (좌측만 어둡게 · 색상 없음) */
.hbf__bn:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 42%, rgba(0, 0, 0, .12) 78%, rgba(0, 0, 0, 0) 100%);
}

.hbf__bn-in {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(28px, 3.4vw, 38px) clamp(26px, 3.8vw, 44px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.hbf__bn h3 {
    color: #fff;
    font-size: clamp(20px, 2.3vw, 26px);
    font-weight: 800;
    letter-spacing: -.035em;
}

.hbf__bn p {
    color: rgba(255, 255, 255, .78);
    font-size: 14.5px;
    margin-top: 8px;
    word-break: keep-all;
}

.hbf__bn a {
    flex: none;
    background: #e2692f;
    color: #fff;
    font-weight: 800;
    font-size: 15.5px;
    padding: 16px 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: .2s;
    text-decoration: none;
}

.hbf__bn a:hover {
    background: #c4551f;
    transform: translateX(3px);
    color: #fff;
}

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
    .hbf__slider {
        aspect-ratio: 16/10;
        border-radius: 18px;
    }

    .hbf__cap {
        left: 22px;
        bottom: 20px;
        font-size: 13.5px;
    }

    .hbf__keys {
        grid-template-columns: 1fr;
        width: 100%;
        margin-top: 18px;
        border-radius: 18px;
    }

    .hbf__key+.hbf__key {
        box-shadow: inset 0 1px 0 var(--hbf-line);
    }

    .hbf__flow {
        flex-wrap: wrap;
        gap: 20px;
    }

    .hbf__step {
        flex: 0 0 calc(50% - 10px);
    }

    .hbf__ar {
        display: none;
    }

    .hbf__notice-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .hbf__gal {
        grid-template-columns: repeat(2, 1fr);
    }

    .hbf__bn:after {
        background: linear-gradient(180deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, .3) 100%);
    }

    .hbf__bn-in {
        flex-direction: column;
        align-items: flex-start;
    }

    .hbf__bn a {
        margin-top: 18px;
    }
}

@media (max-width: 520px) {
    .hbf__step {
        flex: 0 0 100%;
    }

    .hbf__ctrl {
        top: 12px;
        right: 12px;
    }

    .hbf__notice {
        padding: 22px 18px;
    }

    .hbf__notice-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 18px;
    }

    .hbf__notice-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hbf__track,
    .hbf__cap,
    .hbf__gal img,
    .hbf__bn a {
        transition: none;
    }
}


/* ================================================================
   서포터즈활동 페이지 (page_activities04) — sp
   2026-08 리뉴얼 : 활동의 의미 3열 아이콘 카드 추가
================================================================ */
.sp {
    background: #fff;
    --sp-o: #e2692f;
    --sp-o-d: #c4551f;
    --sp-o-l: #fdf1ea;
    --sp-b: #1d6ba4;
    --sp-b-d: #134b76;
    --sp-ink: #17171a;
    --sp-ink2: #3d4048;
    --sp-gray: #63666e;
    --sp-bg: #f1f3f5;
    --sp-line: rgba(0, 0, 0, .09);
}

.sp__in {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.sp__eyebrow {
    display: block;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .16em;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--sp-o);
}

/* ---------- 히어로 ---------- */
.sp__hero {
    padding: clamp(56px, 6vw, 76px) 0 0;
}

.sp__title {
    font-size: clamp(1.45rem, 2.7vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.33;
    color: var(--sp-ink);
    margin: 13px 0 20px;
    word-break: keep-all;
}

.sp__lead {
    font-size: 15px;
    color: var(--sp-ink2);
    line-height: 1.9;
    max-width: none;
    letter-spacing: -.015em;
    word-break: keep-all;
}

.sp__lead strong {
    color: var(--sp-o);
    font-weight: 800;
}

/* ---------- 섹션 공통 ---------- */
.sp__sec {
    padding: clamp(46px, 5.4vw, 64px) 0;
}

.sp__sec.is-tight {
    padding-top: 0;
}

.sp__sec.is-last {
    padding-bottom: clamp(56px, 6vw, 80px);
}

.sp__stitle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    letter-spacing: -.03em;
    color: var(--sp-ink);
    margin-bottom: clamp(18px, 2.4vw, 24px);
}

.sp__stitle i.ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #fff;
    background: var(--sp-o);
    flex: none;
}

.sp__stitle i.ic.is-blue {
    background: var(--sp-b);
}

.sp__stitle.is-sm {
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.sp__stitle.is-sm i.ic {
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 9px;
}

/* ---------- 활동의 의미 (3열 아이콘 카드) ---------- */
.sp__values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 16px);
}

.sp__value {
    background: var(--sp-bg);
    border-radius: 20px;
    padding: clamp(26px, 3vw, 32px) clamp(22px, 2.6vw, 28px);
}

.sp__value .ic {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    background: #fff;
    color: var(--sp-o);
    display: grid;
    place-items: center;
    font-size: 21px;
    margin-bottom: 18px;
}

.sp__value b {
    display: block;
    font-size: clamp(17px, 1.6vw, 19px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--sp-o);
}

.sp__value p {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--sp-gray);
    line-height: 1.75;
    word-break: keep-all;
}

/* ---------- 활동 모습 ---------- */
.sp__gal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.3vw, 14px);
}

.sp__gal figure {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--sp-bg);
}

.sp__gal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.sp__gal figure:hover img {
    transform: scale(1.05);
}

/* ---------- 프로그램 내용 · 대상 ---------- */
.sp__duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.5vw, 16px);
}

.sp__box {
    background: var(--sp-bg);
    border-radius: 18px;
    padding: clamp(24px, 2.8vw, 28px) clamp(24px, 3vw, 30px);
}

.sp__box p {
    font-size: 14.5px;
    color: var(--sp-gray);
    line-height: 1.75;
    word-break: keep-all;
}

/* ---------- 신청방법 ---------- */
.sp__flow {
    background: var(--sp-bg);
    border-radius: 20px;
    padding: clamp(28px, 3.4vw, 38px) clamp(16px, 2vw, 24px);
    display: flex;
    align-items: flex-start;
}

.sp__step {
    flex: 1;
    text-align: center;
    padding: 0 6px;
}

.sp__step .ic {
    width: 62px;
    height: 62px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 23px;
    color: #fff;
    background: linear-gradient(150deg, var(--sp-b), var(--sp-b-d));
    box-shadow: 0 8px 18px rgba(29, 107, 164, .24);
}

.sp__step h4 {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--sp-ink);
}

.sp__step p {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--sp-gray);
    line-height: 1.55;
}

.sp__ar {
    align-self: center;
    flex: none;
    width: 30px;
    text-align: center;
    padding-top: 20px;
    color: var(--sp-o);
    font-size: 16px;
}

/* ---------- 반응형 ---------- */
/* 1180px 이하에서는 본문이 한 줄에 들어가지 않으므로 자연 줄바꿈 */
@media (max-width: 1180px) {
    .sp__lead {
        font-size: 15.5px;
        letter-spacing: -.01em;
        max-width: 840px;
    }
}

@media (max-width: 900px) {
    .sp__values {
        grid-template-columns: 1fr;
    }

    .sp__gal {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp__duo {
        grid-template-columns: 1fr;
    }

    .sp__flow {
        flex-wrap: wrap;
        gap: 20px;
    }

    .sp__step {
        flex: 0 0 calc(50% - 10px);
    }

    .sp__ar {
        display: none;
    }
}

@media (max-width: 520px) {
    .sp__step {
        flex: 0 0 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp__gal img {
        transition: none;
    }
}


/* ================================================================
   협약센터등록 페이지 (page_partner) — 운영 지역 안내
   2026-08 추가 : 확대 예정 강조형
================================================================ */
.hb__areanote {
    margin-top: clamp(16px, 2vw, 20px);
    background: linear-gradient(120deg, #fdf1ea, #f6f7f9);
    border-radius: 20px;
    padding: clamp(26px, 3vw, 34px);
}

.hb__areanote-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.hb__areanote-head .ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e2692f;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
}

.hb__areanote-head b {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #17171a;
}

.hb__areapins {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.hb__areapins span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #3d4048;
    background: #fff;
    padding: 8px 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(20, 32, 54, .06);
}

.hb__areapins span i {
    color: #e2692f;
    font-size: 11px;
}

.hb__areapins span.is-soon {
    color: #9a9da5;
    background: rgba(255, 255, 255, .55);
    box-shadow: none;
}

.hb__areapins span.is-soon i {
    color: #c6c9ce;
}

.hb__areanote p {
    font-size: 15px;
    color: #3d4048;
    line-height: 1.85;
    word-break: keep-all;
}

.hb__areanote p+p {
    margin-top: 8px;
    color: #7c8089;
}

.hb__areanote b.hl {
    color: #e2692f;
    font-weight: 800;
}

@media (max-width: 700px) {
    .hb__areanote {
        padding: 24px 22px;
    }

    .hb__areapins span {
        font-size: 13px;
        padding: 7px 13px;
    }
}


/* ================================================================
   공익성 크루 활동 페이지 (page_crew) — cw
   2026-08 : 사진 상단 + 흰 카드
================================================================ */
.cw {
    background: #fff;
    padding: clamp(56px, 6vw, 78px) 0 clamp(64px, 7vw, 90px);
    --cw-o: #e2692f;
    --cw-o-d: #c4551f;
    --cw-b: #1d6ba4;
    --cw-b-d: #134b76;
    --cw-d: #3a3d44;
    --cw-d-d: #26282d;
    --cw-ink: #17171a;
    --cw-gray: #63666e;
    --cw-bg: #f1f3f5;
}

.cw__in {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- 섹션 헤드 ---------- */
.cw__head {
    text-align: center;
    margin-bottom: clamp(30px, 3.8vw, 46px);
}

.cw__eyebrow {
    display: block;
    font-family: "Archivo Expanded", "Archivo", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
    font-weight: 800;
    letter-spacing: .16em;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--cw-o);
}

.cw__head h2 {
    margin-top: 11px;
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--cw-ink);
    word-break: keep-all;
}

.cw__head p {
    margin-top: 11px;
    font-size: 15.5px;
    color: var(--cw-gray);
    line-height: 1.75;
    word-break: keep-all;
}

/* ---------- 카드 ---------- */
.cw__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(18px, 2.2vw, 26px);
}

.cw__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(20, 32, 54, .10);
    transition: transform .25s ease, box-shadow .25s ease;
}

.cw__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(20, 32, 54, .15);
}

.cw__pic {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cw-bg);
}

.cw__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.cw__card:hover .cw__pic img {
    transform: scale(1.04);
}

.cw__pic .no-img {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 40px;
    color: #c6c9ce;
}

.cw__tx {
    flex: 1;
    padding: clamp(24px, 2.8vw, 32px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cw__card h3 {
    font-size: clamp(1.12rem, 1.7vw, 1.25rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--cw-ink);
    word-break: keep-all;
}

.cw__card p {
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--cw-gray);
    line-height: 1.75;
    word-break: keep-all;
}

/* ---------- 버튼 ---------- */
.cw__btn {
    margin-top: clamp(16px, 2.2vw, 20px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--cw-o);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.01em;
    transition: background .2s ease, transform .2s ease;
}

.cw__btn:hover {
    background: var(--cw-o-d);
    color: #fff;
    transform: translateY(-2px);
}

.cw__card.is-blue .cw__btn {
    background: var(--cw-b);
}

.cw__card.is-blue .cw__btn:hover {
    background: var(--cw-b-d);
}

.cw__card.is-dark .cw__btn {
    background: var(--cw-d);
}

.cw__card.is-dark .cw__btn:hover {
    background: var(--cw-d-d);
}

.cw__btn i {
    font-size: 12.5px;
}

/* ---------- 반응형 ---------- */
@media (max-width: 700px) {
    .cw__cards {
        grid-template-columns: 1fr;
    }

    .cw__tx {
        padding: 24px 22px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cw__card,
    .cw__pic img,
    .cw__btn {
        transition: none;
    }

    .cw__card:hover {
        transform: none;
    }

    .cw__card:hover .cw__pic img {
        transform: none;
    }
}