/* =========================================================
   ELEXA HERO - FIGMA RESPONSIVE
   기준
   - PC hero-area padding-top: 24vh (사용자 확정값)
   - PC: 설명 38 / 모델명 72 Bold / spec 168x139
   - Mobile: 중앙정렬 / 설명 14 / 모델명 38 Bold / spec 3열 compact
========================================================= */


/* =========================================================
   PC / TABLET LANDSCAPE
========================================================= */
@media (min-width: 1025px) {

    /* ---------------------------------------------------------
       HERO CONTENT POSITION
    --------------------------------------------------------- */
    #mainWrap .section01 .hero-list .hero-area {
        justify-content: flex-start !important;
        padding-top: 24vh !important;
        padding-bottom: 8vh !important;
    }

    /* 좌측 Hero */
    #mainWrap .section01 .hero-list.left .hero-area {
        align-items: flex-start !important;
        padding-left: 15.625vw !important;
        padding-right: 36vw !important;
    }

    /* 우측 Hero */
    #mainWrap .section01 .hero-list.right .hero-area {
        align-items: flex-end !important;
        padding-left: 36vw !important;
        padding-right: 15.625vw !important;
    }

    /* 중앙 Hero */
    #mainWrap .section01 .hero-list:not(.left):not(.right) .hero-area {
        align-items: center !important;
        padding-left: 15.625vw !important;
        padding-right: 15.625vw !important;
    }


    /* ---------------------------------------------------------
       TITLE ALIGN
    --------------------------------------------------------- */
    #mainWrap .section01 .hero-list.left .title-box {
        align-items: flex-start !important;
        text-align: left !important;
    }

    #mainWrap .section01 .hero-list.right .title-box {
        align-items: flex-end !important;
        text-align: right !important;
    }

    #mainWrap .section01 .hero-list:not(.left):not(.right) .title-box {
        align-items: center !important;
        text-align: center !important;
    }


    /* ---------------------------------------------------------
       FIGMA TYPOGRAPHY

       new-product-desc 구조 예:
       <p class="new-product-desc">
           <span>달리면서 충전되는 LG쿠루 BSS 모델!</span>
           <span>OK1 KS</span>
       </p>
    --------------------------------------------------------- */

    #mainWrap .section01 .hero-list .title-box .new-product-desc {
        display: flex !important;
        flex-direction: column !important;

        gap: 8px !important;

        margin: 0 !important;

        font-family:
            "Pretendard Variable",
            "Pretendard",
            -apple-system,
            BlinkMacSystemFont,
            sans-serif !important;

        color: #fff !important;

        line-height: 1 !important;

        word-break: keep-all !important;
    }

    /* 설명 */
    #mainWrap .section01 .hero-list .title-box
    .new-product-desc > span:first-child {
        font-size: clamp(30px, 1.98vw, 38px) !important;
        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;

        line-height: 1.25 !important;
        letter-spacing: -0.03em !important;
    }

    /* 모델명 - OK1 KS */
    #mainWrap .section01 .hero-list .title-box
    .new-product-desc > span:nth-child(2) {
        display: block !important;

        font-size: clamp(56px, 3.75vw, 72px) !important;

        font-weight: 900 !important;
        font-variation-settings: "wght" 900 !important;
        font-synthesis: weight !important;

        line-height: 1 !important;
        letter-spacing: -0.045em !important;

        color: #fff !important;

        /* 실제 서버 폰트 weight가 약하게 보일 때 보강 */
        -webkit-text-stroke: 0.55px currentColor;
    }

    /* bn_title을 사용하는 Hero 모델명 */
    #mainWrap .section01 .hero-list .title-box > strong.title,
    #mainWrap .section01 .hero-list .title-box .title {
        display: block !important;

        margin: 0 !important;

        font-family:
            "Pretendard Variable",
            "Pretendard",
            -apple-system,
            BlinkMacSystemFont,
            sans-serif !important;

        font-size: clamp(56px, 3.75vw, 72px) !important;

        font-weight: 900 !important;
        font-variation-settings: "wght" 900 !important;
        font-synthesis: weight !important;

        line-height: 1 !important;
        letter-spacing: -0.045em !important;

        color: #fff !important;

        -webkit-text-stroke: 0.55px currentColor;
    }

    /* 다른 Hero 보조 텍스트는 기존 스타일을 최대한 유지하되
       Pretendard로만 통일 */
    #mainWrap .section01 .hero-list .title-box .sub-desc,
    #mainWrap .section01 .hero-list .title-box .sub-desc2 {
        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;
    }


    /* ---------------------------------------------------------
       SPEC CARDS
       PC Figma: 168 x 139 / gap 10
    --------------------------------------------------------- */

    #mainWrap .section01 .hero-list .info-box {
        width: auto !important;

        /* 디자인처럼 모델명 아래 여백 확보 */
        margin-top: 40px !important;
    }

    #mainWrap .section01 .hero-list .info-box ul {
        display: flex !important;

        width: auto !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 10px !important;
    }

    #mainWrap .section01 .hero-list .info-box ul > li {
        box-sizing: border-box !important;

        flex: 0 0 168px !important;

        width: 168px !important;
        height: 139px !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        padding: 20px 18px 16px !important;

        background: rgba(255, 255, 255, 0.10) !important;

        border: 1px solid rgba(255, 255, 255, 0.38) !important;
        border-radius: 8px !important;

        -webkit-backdrop-filter: blur(3px) !important;
        backdrop-filter: blur(3px) !important;

        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10) !important;
    }

    #mainWrap .section01 .hero-list .info-box ul > li > .font14 {
        font-family:
            "Pretendard Variable",
            Pretendard,
            sans-serif !important;

        font-size: 14px !important;
        font-weight: 500 !important;

        line-height: 21px !important;
        letter-spacing: -0.025em !important;
    }

    #mainWrap .section01 .hero-list .info-box ul > li > p {
        margin: 1px 0 0 !important;

        font-family:
            "Pretendard Variable",
            Pretendard,
            sans-serif !important;

        font-size: 30px !important;
        font-weight: 700 !important;

        line-height: 36px !important;
        letter-spacing: -0.025em !important;
    }

    #mainWrap .section01 .hero-list .info-box ul > li > .font12 {
        margin-top: 1px !important;

        font-family:
            "Pretendard Variable",
            Pretendard,
            sans-serif !important;

        font-size: 12px !important;
        font-weight: 400 !important;

        line-height: 14px !important;
    }


    /* ---------------------------------------------------------
       QUICK ACTIONS
    --------------------------------------------------------- */

    #mainWrap .section01 .elexa-hero-actions {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        display: flex !important;

        width: 286px !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 10px !important;

        margin-top: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;
    }

    #mainWrap .section01 .elexa-hero-action {
        flex: 0 0 64px !important;

        width: 64px !important;
        height: 64px !important;
    }


    /* ---------------------------------------------------------
       HERO COUNTER
    --------------------------------------------------------- */

    #mainWrap .section01 .elexa-hero-counter {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        z-index: 45;

        display: block !important;

        width: 286px !important;
        height: 32px;

        margin-top: 48px !important;

        visibility: visible !important;
        opacity: 1 !important;

        color: #fff;

        pointer-events: auto;
    }

    #mainWrap .section01 .elexa-hero-counter__inner {
        display: grid;

        grid-template-columns: 33px 30px 33px;

        align-items: center;

        width: 96px;
        height: 32px;
    }

    #mainWrap .section01 .elexa-hero-counter__text {
        display: flex;

        width: 30px;
        height: 32px;

        align-items: center;
        justify-content: center;

        color: #fff;

        font-family:
            "Pretendard Variable",
            Pretendard,
            sans-serif;

        font-size: 16px;
        font-weight: 500;

        line-height: 19px;
        letter-spacing: -0.02em;

        white-space: nowrap;
    }

    #mainWrap .section01 .elexa-hero-counter__btn {
        position: relative;

        display: block;

        width: 33px;
        height: 32px;

        margin: 0;
        padding: 0;

        border: 0;

        background: transparent;

        cursor: pointer;
    }

    #mainWrap .section01 .elexa-hero-counter__btn::before {
        content: "";

        position: absolute;

        top: 50%;
        left: 50%;

        width: 21px;
        height: 21px;

        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
    }

    #mainWrap .section01 .elexa-hero-counter__prev::before {
        transform:
            translate(-35%, -50%)
            rotate(-45deg);
    }

    #mainWrap .section01 .elexa-hero-counter__next::before {
        transform:
            translate(-65%, -50%)
            rotate(135deg);
    }

    #mainWrap .section01 .elexa-hero-counter__btn:hover {
        opacity: 0.72;
    }

    /* Hero 방향별 counter 정렬 */
    #mainWrap .section01 .hero-list.left
    .elexa-hero-counter__inner {
        margin-left: 0;
        margin-right: auto;
    }

    #mainWrap .section01 .hero-list.right
    .elexa-hero-counter__inner {
        margin-left: auto;
        margin-right: 0;
    }

    #mainWrap .section01
    .hero-list:not(.left):not(.right)
    .elexa-hero-counter__inner {
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   MOBILE
   디자인 캡처 기준:
   - 콘텐츠 중앙정렬
   - 설명 작게
   - 모델명 Bold 크게
   - spec 3개 한 줄
========================================================= */

@media (max-width: 768px) {

    /* ---------------------------------------------------------
       CONTENT POSITION
       Hero 시작점 기준 약 45~55px 아래
    --------------------------------------------------------- */

    #mainWrap .section01 .hero-list .hero-area,
    #mainWrap .section01 .hero-list.left .hero-area,
    #mainWrap .section01 .hero-list.right .hero-area {
        box-sizing: border-box !important;

        width: 100% !important;

        align-items: center !important;
        justify-content: flex-start !important;

        padding:
            clamp(44px, 7vh, 58px)
            20px
            0 !important;
    }


    /* ---------------------------------------------------------
       TITLE
    --------------------------------------------------------- */

    #mainWrap .section01 .hero-list .title-box,
    #mainWrap .section01 .hero-list.left .title-box,
    #mainWrap .section01 .hero-list.right .title-box {
        width: 100% !important;

        align-items: center !important;

        text-align: center !important;
    }

    #mainWrap .section01 .hero-list .title-box
    .new-product-desc {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        gap: 5px !important;

        width: 100% !important;

        margin: 0 !important;

        color: #fff !important;

        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;

        text-align: center !important;

        word-break: keep-all !important;
    }

    /* 모바일 설명 */
    #mainWrap .section01 .hero-list .title-box
    .new-product-desc > span:first-child {
        font-size: clamp(13px, 3.8vw, 15px) !important;

        font-weight: 500 !important;
        font-variation-settings: "wght" 500 !important;

        line-height: 1.3 !important;
        letter-spacing: -0.035em !important;

        text-align: center !important;

        white-space: nowrap;
    }

    /* 모바일 모델명 */
    #mainWrap .section01 .hero-list .title-box
    .new-product-desc > span:nth-child(2) {
        display: block !important;

        font-size: clamp(34px, 10.8vw, 40px) !important;

        font-weight: 900 !important;
        font-variation-settings: "wght" 900 !important;
        font-synthesis: weight !important;

        line-height: 1 !important;
        letter-spacing: -0.05em !important;

        color: #fff !important;

        -webkit-text-stroke: 0.35px currentColor;
    }

    /* bn_title 방식 모델명 */
    #mainWrap .section01 .hero-list .title-box > strong.title,
    #mainWrap .section01 .hero-list .title-box .title {
        margin: 0 !important;

        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;

        font-size: clamp(34px, 10.8vw, 40px) !important;

        font-weight: 900 !important;
        font-variation-settings: "wght" 900 !important;

        line-height: 1 !important;
        letter-spacing: -0.05em !important;

        color: #fff !important;

        text-align: center !important;

        -webkit-text-stroke: 0.35px currentColor;
    }


    /* ---------------------------------------------------------
       MOBILE SPEC CARDS
    --------------------------------------------------------- */

    #mainWrap .section01 .hero-list .info-box {
        width: 100% !important;

        margin-top: 20px !important;
    }

    #mainWrap .section01 .hero-list .info-box ul {
        display: flex !important;

        width: 100% !important;

        align-items: stretch !important;
        justify-content: center !important;

        gap: 6px !important;
    }

    #mainWrap .section01 .hero-list .info-box ul > li {
        box-sizing: border-box !important;

        flex: 1 1 0 !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 64px !important;
        min-height: 64px !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        padding: 9px 10px 7px !important;

        background: rgba(255, 255, 255, 0.10) !important;

        border: 1px solid rgba(255, 255, 255, 0.36) !important;
        border-radius: 6px !important;

        -webkit-backdrop-filter: blur(2.5px) !important;
        backdrop-filter: blur(2.5px) !important;

        box-shadow: none !important;
    }

    #mainWrap .section01 .hero-list .info-box
    ul > li > .font14 {
        font-size: clamp(8px, 2.6vw, 10px) !important;

        font-weight: 500 !important;

        line-height: 1.15 !important;

        white-space: nowrap;
    }

    #mainWrap .section01 .hero-list .info-box
    ul > li > p {
        margin-top: 3px !important;

        font-size: clamp(17px, 5.5vw, 20px) !important;

        font-weight: 700 !important;

        line-height: 1 !important;

        white-space: nowrap;
    }

    #mainWrap .section01 .hero-list .info-box
    ul > li > .font12 {
        margin-top: 3px !important;

        font-size: clamp(7px, 2vw, 8px) !important;

        font-weight: 400 !important;

        line-height: 1.1 !important;
    }


    /* PC용 < 1 / N > 은 모바일 디자인에서는 숨김 */
    #mainWrap .section01 .elexa-hero-counter {
        display: none !important;
    }
}


/* 769~1024px: 기존 tablet Hero 유지, PC counter만 숨김 */
@media (min-width: 769px) and (max-width: 1024px) {
    #mainWrap .section01 .elexa-hero-counter {
        display: none !important;
    }
}


/* =========================================================
   FIRST HERO (visual2) EXCEPTION
   - 첫 Hero 문구는 Bold 사용하지 않음
   - 모바일에서는 헤더에 너무 붙지 않도록 아래로 이동
========================================================= */

/* PC: 첫 Hero 메인 문구는 Regular */
@media (min-width: 1025px) {
    #mainWrap .section01 .hero-list.visual2 .title-box .title,
    #mainWrap .section01 .hero-list.visual2 .title-box .new-product-desc > span {
        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;
        font-synthesis: none !important;
        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }
}


/* MOBILE: 첫 Hero만 조금 아래로 + Regular */
@media (max-width: 768px) {

    #mainWrap .section01 .hero-list.visual2 .hero-area {
        /*
         * 헤더 바로 밑에 붙어 보이던 문제 보정.
         * 너무 과하게 내리지 않고 약 25~35px 정도 추가 여유.
         */
        padding-top: clamp(86px, 11vh, 104px) !important;
    }

    #mainWrap .section01 .hero-list.visual2 .title-box .title,
    #mainWrap .section01 .hero-list.visual2 .title-box .new-product-desc > span {
        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;
        font-synthesis: none !important;

        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }

    /*
     * 첫 Hero는 모델명 강조형이 아니라 카피 중심 Hero라
     * 일반 카피 크기로 유지
     */
    #mainWrap .section01 .hero-list.visual2 .title-box .title,
    #mainWrap .section01 .hero-list.visual2 .title-box .new-product-desc {
        font-size: clamp(27px, 8.4vw, 32px) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.035em !important;
    }
}


/* =========================================================
   MOBILE FINAL FIX
   visual2 = 첫 번째 Hero
   visual3 / visual4 = 모델 Hero
   기존 모바일 규칙보다 우선하도록 파일 맨 마지막에서 덮어씀
========================================================= */
@media (max-width: 768px) {

    /* ---------------------------------------------------------
       공통: title 영역이 헤더 뒤/위로 밀리지 않도록 초기화
    --------------------------------------------------------- */
    body #mainWrap .section01 .hero-list .hero-area,
    body #mainWrap .section01 .hero-list.left .hero-area,
    body #mainWrap .section01 .hero-list.right .hero-area {
        position: relative !important;

        box-sizing: border-box !important;

        width: 100% !important;
        height: 100% !important;

        align-items: center !important;
        justify-content: flex-start !important;

        overflow: visible !important;
    }

    body #mainWrap .section01 .hero-list .title-box,
    body #mainWrap .section01 .hero-list.left .title-box,
    body #mainWrap .section01 .hero-list.right .title-box {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        align-items: center !important;
        text-align: center !important;

        overflow: visible !important;
    }


    /* =========================================================
       1번 Hero - visual2
       카피형 Hero이므로 전부 Regular
    ========================================================= */

    body #mainWrap .section01 .hero-list.visual2 .hero-area {
        /*
         * 헤더 아래에서 자연스럽게 시작.
         * 기존 86~104px 예외값은 너무 많은 공간을 차지하므로 축소.
         */
        padding:
           clamp(24px, 20vh, 110px)
            20px
            0 !important
    }

    /* 위 작은 문구: 무소음, 무배출, 무공해 */
    body #mainWrap .section01 .hero-list.visual2
    .title-box .sub-desc,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .sub-desc2 {
        margin: 0 0 6px !important;

        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;

        font-size: clamp(12px, 3.4vw, 14px) !important;

        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;

        line-height: 1.25 !important;
        letter-spacing: -0.03em !important;

        text-align: center !important;

        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }

    /* 메인 카피: 당신의 라이딩에 품격을 더하다! */
    body #mainWrap .section01 .hero-list.visual2
    .title-box > strong.title,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .title {
        display: block !important;

        margin: 0 !important;

        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;

        font-size: clamp(26px, 7.7vw, 30px) !important;

        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;
        font-synthesis: none !important;

        line-height: 1.12 !important;
        letter-spacing: -0.045em !important;

        text-align: center !important;

        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }

    /* visual2가 new-product-desc 2줄을 사용하는 경우에도 같은 디자인 */
    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc {
        gap: 6px !important;
    }

    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc > span:first-child {
        font-size: clamp(12px, 3.4vw, 14px) !important;

        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;

        line-height: 1.25 !important;

        -webkit-text-stroke: 0 !important;
    }

    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc > span:nth-child(2) {
        font-size: clamp(26px, 7.7vw, 30px) !important;

        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;
        font-synthesis: none !important;

        line-height: 1.12 !important;
        letter-spacing: -0.045em !important;

        -webkit-text-stroke: 0 !important;
    }

    body #mainWrap .section01 .hero-list.visual2 .info-box {
        margin-top: 18px !important;
    }


    /* =========================================================
       2 / 3번 Hero - visual3 / visual4
       설명 + 모델명 둘 다 화면 안에 확실히 노출
    ========================================================= */

    body #mainWrap .section01 .hero-list.visual3 .hero-area,
    body #mainWrap .section01 .hero-list.visual4 .hero-area,
    body #mainWrap .section01 .hero-list.visual6 .hero-area {
        /*
         * 기존 visual3/4의 위쪽 텍스트가 헤더 뒤로 들어가던 현상 방지.
         * 디자인 기준으로 Hero 시작 후 약 45~55px 지점.
         */
        padding:
            clamp(110px, 6.5vh, 60px)
            20px
            0 !important;
    }

    body #mainWrap .section01 .hero-list.visual3 .title-box,
    body #mainWrap .section01 .hero-list.visual4 .title-box,
    body #mainWrap .section01 .hero-list.visual6 .title-box {
        min-height: 0 !important;

        overflow: visible !important;
    }

    /* 설명: 달리면서 충전되는 LG쿠루 BSS 모델! 등 */
    body #mainWrap .section01 .hero-list.visual3
    .title-box .sub-desc,
    body #mainWrap .section01 .hero-list.visual3
    .title-box .sub-desc2,
    body #mainWrap .section01 .hero-list.visual4
    .title-box .sub-desc,
    body #mainWrap .section01 .hero-list.visual4
    .title-box .sub-desc2,
    body #mainWrap .section01 .hero-list.visual6
    .title-box .sub-desc,
    body #mainWrap .section01 .hero-list.visual6
    .title-box .sub-desc2 {
        display: block !important;

        margin: 0 0 5px !important;

        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;

        font-size: clamp(12px, 3.6vw, 14px) !important;

        font-weight: 500 !important;
        font-variation-settings: "wght" 500 !important;

        line-height: 1.3 !important;
        letter-spacing: -0.035em !important;

        text-align: center !important;

        white-space: normal !important;

        -webkit-text-stroke: 0 !important;
    }

    /* new-product-desc 기반 설명 + 모델명 */
    body #mainWrap .section01 .hero-list.visual3
    .title-box .new-product-desc,
    body #mainWrap .section01 .hero-list.visual4
    .title-box .new-product-desc,
    body #mainWrap .section01 .hero-list.visual6
    .title-box .new-product-desc {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        gap: 5px !important;

        width: 100% !important;

        margin: 0 !important;

        overflow: visible !important;
    }

    body #mainWrap .section01 .hero-list.visual3
    .title-box .new-product-desc > span:first-child,
    body #mainWrap .section01 .hero-list.visual4
    .title-box .new-product-desc > span:first-child,
    body #mainWrap .section01 .hero-list.visual6
    .title-box .new-product-desc > span:first-child {
        display: block !important;

        font-size: clamp(12px, 3.6vw, 14px) !important;

        font-weight: 500 !important;
        font-variation-settings: "wght" 500 !important;

        line-height: 1.3 !important;
        letter-spacing: -0.035em !important;

        text-align: center !important;

        white-space: normal !important;

        -webkit-text-stroke: 0 !important;
    }

    body #mainWrap .section01 .hero-list.visual3
    .title-box .new-product-desc > span:nth-child(2),
    body #mainWrap .section01 .hero-list.visual4
    .title-box .new-product-desc > span:nth-child(2),
    body #mainWrap .section01 .hero-list.visual6
    .title-box .new-product-desc > span:nth-child(2),
    body #mainWrap .section01 .hero-list.visual3
    .title-box > strong.title,
    body #mainWrap .section01 .hero-list.visual4
    .title-box > strong.title,
    body #mainWrap .section01 .hero-list.visual6
    .title-box > strong.title {
        display: block !important;

        margin: 0 !important;

        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;

        font-size: clamp(34px, 10vw, 38px) !important;

        font-weight: 900 !important;
        font-variation-settings: "wght" 900 !important;
        font-synthesis: weight !important;

        line-height: 1 !important;
        letter-spacing: -0.05em !important;

        text-align: center !important;

        -webkit-text-stroke: 0.35px currentColor;
    }

    body #mainWrap .section01 .hero-list.visual3 .info-box,
    body #mainWrap .section01 .hero-list.visual4 .info-box,
    body #mainWrap .section01 .hero-list.visual6 .info-box {
        margin-top: 18px !important;
    }
}


/* =========================================================
   HERO 1 (visual2) FINAL TYPOGRAPHY
   위/아래 문구 동일 크기 + Regular
========================================================= */

/* PC */
@media (min-width: 1025px) {

    body #mainWrap .section01 .hero-list.visual2
    .title-box .sub-desc,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .sub-desc2,
    body #mainWrap .section01 .hero-list.visual2
    .title-box > strong.title,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .title,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc > span:first-child,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc > span:nth-child(2) {

        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;

        font-size: clamp(30px, 1.98vw, 38px) !important;

        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;
        font-synthesis: none !important;

        line-height: 1.2 !important;
        letter-spacing: -0.03em !important;

        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }

    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc {
        gap: 2px !important;
    }
}


/* MOBILE */
@media (max-width: 768px) {

    body #mainWrap .section01 .hero-list.visual2
    .title-box .sub-desc,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .sub-desc2,
    body #mainWrap .section01 .hero-list.visual2
    .title-box > strong.title,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .title,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc > span:first-child,
    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc > span:nth-child(2) {

        font-family:
            "Pretendard Variable",
            "Pretendard",
            sans-serif !important;

        font-size: clamp(22px, 6.6vw, 26px) !important;

        font-weight: 400 !important;
        font-variation-settings: "wght" 400 !important;
        font-synthesis: none !important;

        line-height: 1.15 !important;
        letter-spacing: -0.04em !important;

        text-align: center !important;

        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }

    body #mainWrap .section01 .hero-list.visual2
    .title-box .new-product-desc {
        gap: 2px !important;
    }
}


/* =========================================================
   MOBILE HERO 1 (visual2) - QUICK ACTION POSITION
   1번 Hero 아이콘 4개만 살짝 아래로 이동
========================================================= */
@media (max-width: 768px) {

    body #mainWrap .section01
    .hero-list.visual2
    .elexa-hero-actions {
        /*
         * 기존 가운데 정렬 translateX(-50%)는 유지하면서
         * 세로로만 8px 내려줌.
         */
        transform: translate(-50%, 130px) !important;
    }
}