/* =========================================================
   HCHOME PREMIUM CTA BAND
========================================================= */

#hchome-cta-band,
#hchome-cta-band * {
    box-sizing:border-box;
}


#hchome-cta-band {

    margin-top:100px;
    --cta-blue:#071b38;
    --cta-blue-deep:#031126;
    --cta-blue-light:#163b6d;

    position:relative;

    width:100%;

    min-height:
        clamp(560px, 48vw, 720px);

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            135deg,
            var(--cta-blue-deep),
            var(--cta-blue)
        );

    color:#fff;

    font-family:
        Pretendard,
        "Noto Sans KR",
        Arial,
        sans-serif;

}


/* =========================================================
   BACKGROUND
========================================================= */

.hchome-cta-bg {

    position:absolute;

    inset:0;

    z-index:-4;

}

.hchome-cta-bg img {

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.24;

    filter:
        grayscale(.8)
        contrast(1.1)
        brightness(.65);

    transform:
        scale(1.04);

}


/* =========================================================
   OVERLAY
========================================================= */

.hchome-cta-overlay {

    position:absolute;

    inset:0;

    z-index:-3;

    background:

        linear-gradient(
            90deg,
            rgba(2,12,29,.98) 0%,
            rgba(4,20,43,.92) 40%,
            rgba(5,26,55,.80) 100%
        );

}


/* =========================================================
   GRID
========================================================= */

.hchome-cta-grid {

    position:absolute;

    inset:0;

    z-index:-2;

    opacity:.18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 80%
        );

}


/* =========================================================
   GLOW
========================================================= */

.hchome-cta-glow {

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    pointer-events:none;

    z-index:-1;

}

.hchome-cta-glow-1 {

    width:420px;

    height:420px;

    right:15%;

    top:-180px;

    background:
        rgba(28,92,170,.26);

}

.hchome-cta-glow-2 {

    width:320px;

    height:320px;

    left:-130px;

    bottom:-180px;

    background:
        rgba(25,76,140,.25);

}


/* =========================================================
   INNER
========================================================= */

.hchome-cta-inner {

    position:relative;

    width:100%;

    max-width:1480px;

    min-height:
        clamp(500px, 43vw, 650px);

    margin:0 auto;

    padding:
        clamp(80px, 8vw, 130px)
        5vw;

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, .7fr);

    gap:
        clamp(50px, 8vw, 150px);

    align-items:center;

}


/* =========================================================
   LABEL
========================================================= */

.hchome-cta-label {

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:34px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.2em;

    color:
        rgba(255,255,255,.65);

}

.hchome-cta-label-line {

    width:45px;

    height:1px;

    background:
        rgba(255,255,255,.6);

}


/* =========================================================
   TITLE
========================================================= */

.hchome-cta-title {

    margin:0;

    font-size:
        clamp(42px, 5vw, 76px);

    line-height:1.16;

    letter-spacing:-.065em;

    font-weight:300;

}

.hchome-cta-title strong {

    display:block;

    font-weight:800;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hchome-cta-desc {

    margin:
        32px
        0
        0;

    color:
        rgba(255,255,255,.67);

    font-size:
        clamp(16px, 1.15vw, 19px);

    line-height:1.85;

    letter-spacing:-.025em;

}


/* =========================================================
   SUB
========================================================= */

.hchome-cta-sub {

    margin-top:42px;

}

.hchome-cta-sub span {

    display:inline-block;

    padding:
        9px
        14px;

    border:
        1px solid
        rgba(255,255,255,.15);

    background:
        rgba(255,255,255,.035);

    color:
        rgba(255,255,255,.48);

    font-size:10px;

    font-weight:700;

    letter-spacing:.15em;

}


/* =========================================================
   ACTION AREA
========================================================= */

.hchome-cta-actions {

    width:100%;

    display:flex;

    flex-direction:column;

    gap:12px;

}


/* =========================================================
   ACTION
========================================================= */

.hchome-cta-action {

    position:relative;

    width:100%;

    min-height:108px;

    display:flex;

    align-items:center;

    gap:20px;

    padding:
        22px
        24px;

    border:
        1px solid
        rgba(255,255,255,.13);

    background:
        rgba(255,255,255,.055);

    color:#fff;

    text-decoration:none;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


/* HOVER */

.hchome-cta-action:hover {

    transform:
        translateX(-8px);

    background:
        rgba(255,255,255,.11);

    border-color:
        rgba(255,255,255,.32);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.2);

}


/* =========================================================
   ACTION ICON
========================================================= */

.hchome-cta-action-icon {

    flex:
        0 0 54px;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.06);

}

.hchome-cta-action-icon svg {

    width:23px;

    height:23px;

    fill:none;

    stroke:#fff;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* =========================================================
   KAKAO SYMBOL
========================================================= */

.hchome-kakao-symbol {

    width:28px;

    height:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f8df00;

    color:#111;

    font-size:13px;

    font-weight:900;

}


/* =========================================================
   TEXT
========================================================= */

.hchome-cta-action-text {

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.hchome-cta-action-text small {

    margin-bottom:5px;

    color:
        rgba(255,255,255,.43);

    font-size:9px;

    font-weight:700;

    letter-spacing:.15em;

}

.hchome-cta-action-text strong {

    color:#fff;

    font-size:
        clamp(18px, 1.4vw, 22px);

    line-height:1.35;

    font-weight:700;

    letter-spacing:-.035em;

}

.hchome-cta-action-text em {

    margin-top:3px;

    color:
        rgba(255,255,255,.45);

    font-size:11px;

    font-style:normal;

    line-height:1.5;

}


/* =========================================================
   ARROW
========================================================= */

.hchome-cta-action-arrow {

    margin-left:auto;

    flex:0 0 auto;

    font-size:23px;

    color:
        rgba(255,255,255,.55);

    transition:
        transform .3s ease,
        color .3s ease;

}

.hchome-cta-action:hover
.hchome-cta-action-arrow {

    color:#fff;

    transform:
        translate(4px,-4px);

}


/* =========================================================
   KAKAO HOVER
========================================================= */

.hchome-cta-kakao:hover {

    border-color:
        rgba(248,223,0,.35);

}


/* =========================================================
   QUOTE HOVER
========================================================= */

.hchome-cta-quote:hover {

    border-color:
        rgba(110,165,255,.4);

}


/* =========================================================
   BOTTOM
========================================================= */

.hchome-cta-bottom {

    position:absolute;

    left:5vw;

    right:5vw;

    bottom:28px;

    max-width:1380px;

    margin:0 auto;

}

.hchome-cta-bottom-line {

    width:100%;

    height:1px;

    margin-bottom:18px;

    background:
        rgba(255,255,255,.12);

}

.hchome-cta-bottom-left,
.hchome-cta-bottom-right {

    display:flex;

    align-items:center;

    gap:18px;

    color:
        rgba(255,255,255,.3);

    font-size:9px;

    font-weight:700;

    letter-spacing:.15em;

}

.hchome-cta-bottom {

    display:block;

}

.hchome-cta-bottom-left {

    float:left;

}

.hchome-cta-bottom-right {

    float:right;

}

.hchome-cta-bottom-right i {

    width:4px;

    height:4px;

    border-radius:50%;

    background:
        rgba(255,255,255,.35);

}

/* height 사이즈 줄이기 */
/* =========================================================
   CTA BAND HEIGHT - COMPACT VERSION
========================================================= */

#hchome-cta-band {

    min-height:360px;

}


/* 내부 영역도 함께 축소 */

.hchome-cta-inner {

    min-height:360px;

    padding:
        75px 5vw;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, .65fr);

    gap:
        clamp(40px, 6vw, 100px);

}


/* 제목 크기 조금 축소 */

.hchome-cta-title {

    font-size:
        clamp(34px, 4vw, 56px);

}


/* 설명 */

.hchome-cta-desc {

    margin-top:22px;

    font-size:
        clamp(14px, 1vw, 17px);

}


/* 아래 부가 문구 간격 축소 */

.hchome-cta-sub {

    margin-top:25px;

}


/* 오른쪽 버튼 높이 축소 */

.hchome-cta-action {

    min-height:78px;

    padding:
        15px 20px;

}


/* 아이콘 축소 */

.hchome-cta-action-icon {

    flex-basis:45px;

    width:45px;

    height:45px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

    #hchome-cta-band {

        min-height:auto;

    }

    .hchome-cta-inner {

        min-height:auto;

        padding:
            55px 5vw 70px;

        grid-template-columns:1fr;

        gap:35px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:600px) {

    #hchome-cta-band {

        min-height:auto;

    }

    .hchome-cta-inner {

        min-height:auto;

        padding:
            55px 20px 80px;

        gap:32px;

    }

    .hchome-cta-title {

        font-size:
            clamp(30px, 8vw, 40px);

    }

    .hchome-cta-desc {

        font-size:14px;

        line-height:1.7;

    }

    .hchome-cta-action {

        min-height:74px;

        padding:
            14px 16px;

    }

    .hchome-cta-action-icon {

        width:42px;

        height:42px;

        flex-basis:42px;

    }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

    .hchome-cta-inner {

        grid-template-columns:
            1fr;

        gap:55px;

        padding-bottom:120px;

    }

    .hchome-cta-content {

        max-width:750px;

    }

    .hchome-cta-actions {

        max-width:700px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:600px) {

    #hchome-cta-band {

        min-height:auto;

    }


    .hchome-cta-inner {

        min-height:auto;

        padding:
            75px
            20px
            105px;

        gap:45px;

    }


    .hchome-cta-bg img {

        opacity:.18;

    }


    .hchome-cta-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(2,12,29,.97),
                rgba(4,20,43,.94)
            );

    }


    .hchome-cta-grid {

        background-size:
            50px 50px;

        opacity:.1;

    }


    .hchome-cta-label {

        margin-bottom:25px;

        font-size:10px;

    }


    .hchome-cta-title {

        font-size:
            clamp(35px, 10vw, 48px);

        line-height:1.25;

    }


    .hchome-cta-desc {

        margin-top:25px;

        font-size:15px;

        line-height:1.8;

    }


    .hchome-cta-sub {

        margin-top:28px;

    }


    .hchome-cta-action {

        min-height:90px;

        padding:
            17px;

        gap:14px;

    }


    .hchome-cta-action-icon {

        flex-basis:45px;

        width:45px;

        height:45px;

    }


    .hchome-cta-action-text strong {

        font-size:17px;

    }


    .hchome-cta-action-text em {

        font-size:10px;

    }


    .hchome-cta-action-arrow {

        font-size:19px;

    }


    .hchome-cta-action:hover {

        transform:none;

    }


    .hchome-cta-bottom {

        left:20px;

        right:20px;

        bottom:20px;

    }


    .hchome-cta-bottom-left,
    .hchome-cta-bottom-right {

        font-size:8px;

        gap:10px;

    }


    .hchome-cta-bottom-left span:nth-child(2) {

        display:none;

    }


    .hchome-cta-bottom-right span:first-child {

        display:none;

    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .hchome-cta-action,
    .hchome-cta-action-arrow {

        transition:none;

    }

}