/* ============================================
1. 기본 스타일 (모든 .title_txt 공통)
============================================ */
    .title_txt {
        font-family: 'Playfair Display', Georgia, Cambria, serif;
        font-size: 25px;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: 100%;
        transform: scaleY(0.85);
        transform-origin: center bottom;
        display: inline-block;
        /* scaleY가 정확히 적용되도록 */
    }


/* ============================================
2. 애니메이션 옵션 (원하는 곳에만 추가)
사용법: <div class="title_txt --reveal-up">...</div>
============================================ */


    /* 공통: 애니메이션 변형 초기 상태 */
    .title_txt[class*="--reveal"] {
        opacity: 0;
        transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .title_img[class*="--reveal"] {
        opacity: 0;
        transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .title_txt.--reveal-line::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 0;
        background: currentColor;
        transition: width 1s ease 0.4s;
    }

    .title_txt.--reveal-line.--in {
        opacity: 1;
        transform: translateY(0) scaleY(0.85);
    }

    .title_txt.--reveal-line.--in::after {
        width: 100%;
    }
/* ============ 공통 ============ */
    .detail-inner01 {
        max-width: 870px;
        margin: 140px auto;
    }

    .detail-inner03 {
        max-width: 985px;
        margin: 0 auto;
        padding: 110px 0 0;
    }

    .title_txt.--reveal-rotate {
        transform: rotate(-3deg) scaleY(0.85);
    }

    .title_txt.--reveal-rotate.--in {
        opacity: 1;
        transform: rotate(0) scaleY(0.85);
    }





    /* CSS만 추가 */
    .title_txt.--reveal-rotate {
        transform: rotate(-3deg) scaleY(0.85);
    }

    .title_txt.--reveal-rotate.--in {
        opacity: 1;
        transform: rotate(0) scaleY(0.85);
    }




    .detail-wrap {
        max-width: 100%;
        margin: 0 auto;
        font-size: 0;
        line-height: 0;
    }

    .detail-wrap img,
    .detail-wrap video {

        width: 100%;
        height: auto;
        vertical-align: top;
    }

    .txt {
        font-size: 18px;
        line-height: 170%;
    }

    .txt02 {
        font-size: 14px;
        color: #33312F;
        line-height: 170%;
    }

    .title02 {
        padding: 0px 0 26px;
    }





    /* ============ 단일 row (세로 배치) ============ */
    .dt-row {
        width: 100%;
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .dt-row.--in {
        opacity: 1;
        transform: translateY(0);
    }


    /* ============ 가로 그룹 ============ */
    .dt-grid {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        align-items: flex-start;
    }

    .dt-grid>.dt-cell {
        min-width: 0;
        flex: 1;
    }


    /* ============ 09 호버 효과 ============ */
    .dt-hover {
        position: relative;
        overflow: hidden;
    }

    .dt-hover img {
        transition: opacity 0.4s ease;
    }

    .dt-hover img.dt-hover-img {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .dt-hover:hover img.dt-hover-img.--h1 {
        opacity: 1;
    }

    .dt-hover.--show-h2 img.dt-hover-img.--h1 {
        opacity: 0;
    }

    .dt-hover.--show-h2 img.dt-hover-img.--h2 {
        opacity: 1;
    }

    .dt-hover.--show-h3 img.dt-hover-img.--h1,
    .dt-hover.--show-h3 img.dt-hover-img.--h2 {
        opacity: 0;
    }

    .dt-hover.--show-h3 img.dt-hover-img.--h3 {
        opacity: 1;
    }

    .pc {
        display: block;
    }

    .mo {
        display: none;
    }




    /* ============ 모바일 ============ */
    @media (max-width: 768px) {

        .dt-row,
        .dt-grid,
        .dt-grid>.dt-cell,
        .dt-18-sub>div {
            transform: translateY(0px);
            transition-duration: 0.6s;
        }

        .pc {
            display: none;
        }

        .mo {
            display: block;
        }

        .detail-inner01 {
            margin: 60px 7%;
        }

        .detail-inner01 .title02 {
            padding: 0px 0 26px;
        }

        .title_txt {
            font-size: 20px;
            padding: 0px 0 26px;
        }

        .txt {
            font-size: 13px;
        }

        .detail-inner03 {
            padding: 20px 7%;
        }

        .detail-inner03 .dt-grid {
            display: block;
        }

        .detail-inner03 .txt02 {
            width: 100%;
        }

    }

    /* ============================================================
   DRIVERA Brand Detail Page
   ============================================================ */


    /* ============ 기본 body 설정 ============ */
    body {
        font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
        color: #33312F;
    }


    /* ============================================================
   1. TITLE 애니메이션 시스템
   ============================================================ */


    /* 1-1. 기본 title_txt 스타일 */
    .title_txt {
        font-family: "Inter", sans-serif;
        font-size: 22px;
        font-weight: 500;
        line-height: 100%;
        transform-origin: center bottom;
        display: inline-block;
    }


    /* 1-2. 애니메이션 초기 상태 */
    .title_txt[class*="--reveal"] {
        opacity: 0;
        transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .title_img[class*="--reveal"] {
        opacity: 0;
        transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }


    /* 1-3. 옵션 A. 아래에서 위로 등장 */
    .title_txt.--reveal-up {
        transform: translateY(30px) scaleY(0.85);
    }

    .title_txt.--reveal-up.--in {
        opacity: 1;
        transform: translateY(0) scaleY(0.85);
    }


    /* 1-4. 옵션 B. 왼쪽에서 슬라이드 */
    .title_txt.--reveal-left {
        transform: translateX(-40px) scaleY(0.85);
    }

    .title_txt.--reveal-left.--in {
        opacity: 1;
        transform: translateX(0) scaleY(1);
    }

    .title_img.--reveal-left {
        transform: translateX(-40px) scaleY(1);
    }

    .title_img.--reveal-left.--in {
        opacity: 1;
        transform: translateX(0) scaleY(1);
    }


    /* 1-5. 옵션 C. 눌렸다 펼쳐짐 */
    .title_txt.--reveal-stretch {
        transform: scaleY(0.1);
        transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .title_txt.--reveal-stretch.--in {
        opacity: 1;
        transform: scaleY(1);
    }


    /* 1-6. 옵션 D. 페이드인만 */
    .title_txt.--reveal-fade.--in {
        opacity: 1;
    }


    /* 1-7. 옵션 E. 밑줄 등장 */
    .title_txt.--reveal-line {
        position: relative;
        padding-bottom: 12px;
        transform: translateY(20px) scaleY(0.85);
    }

    .title_txt.--reveal-line::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 0;
        background: currentColor;
        transition: width 1s ease 0.4s;
    }

    .title_txt.--reveal-line.--in {
        opacity: 1;
        transform: translateY(0) scaleY(0.85);
    }

    .title_txt.--reveal-line.--in::after {
        width: 100%;
    }


    /* 1-8. 옵션 F. 회전 등장 */
    .title_txt.--reveal-rotate {
        transform: rotate(-3deg) scaleY(0.85);
    }

    .title_txt.--reveal-rotate.--in {
        opacity: 1;
        transform: rotate(0) scaleY(0.85);
    }


    /* ============================================================
   2. 공통 레이아웃
   ============================================================ */
    .detail-wrap {
        max-width: 100%;
        margin: 0 auto;
        font-size: 0;
        line-height: 0;
    }

    .detail-wrap img,
    .detail-wrap video {
        width: 100%;
        height: auto;
        vertical-align: top;
    }


    .txt {
        font-size: 18px;
        line-height: 170%;
    }

    .txt02 {
        font-size: 14px;
        color: #33312F;
        line-height: 170%;
    }

    .pc {
        display: block;
    }

    .mo {
        display: none;
    }

    .detail-inner27 {
        padding: 104px 0;
    }


    @media (max-width: 768px) {


        .dt-row,
        .dt-grid,
        .dt-grid>.dt-cell,
        .dt-18-sub>div {
            transform: translateY(20px);
            /* 모바일에서도 살짝 위로 올라오기 */
            transition-duration: 0.8s;
        }

        .pc {
            display: none;
        }

        .mo {
            display: block;
        }


        .title_txt {
            font-size: 18px;
            padding: 0px 0 26px;
        }

        .txt {
            font-size: 13px;
        }



        .block {
            display: block;
            font-size: 0;
            line-height: 0;
        }

        .pd10 {
            padding: 10px 0
        }

        .detail-inner27 {
            padding: 0 0 80px;
            text-align: center;
            display: block;
        }

        .detail-inner27 .img27-1 {
            max-width: 100%
        }

        .detail-inner27 .img27-1 strong {
            font-weight: 600;
        }
    }



    .detail-inner05 {
            width: 100%;
            margin: 0 auto;
        }

        .detail-inner05.bg {
            position: relative;
        }

        .detail-inner05 .txt_cont {
            position: absolute;
            top: 8%;
            left: 10%;
            width: 26%;
            display: flex;
            flex-wrap: wrap;
            height: 85%;
        }

        .detail-inner05 .txt {
            margin-bottom: 0%;
        }

        /*.detail-inner05 .txt img {width: auto; /* 2. 화면이 이미지보다 작아지면 화면 너비에 맞춰 반응형으로 축소 
        max-width: calc(100% / 3);
        height: auto;
        zoom:0.5;
        max-width: 200%;
        height: auto;
        }

        */

        /* 1. 전체 이미지를 감싸는 큰 틀 (반응형 정렬) */
        .detail-inner05 .image-gallery {
            display: grid;
            /* 화면 크기에 맞춰 자동으로 열 개수 조절 (최소 250px 크기 유지) */
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            /* 이미지 사이의 간격 */
            width: 30%;
            max-width: 1200px;
            /* 전체 갤러리 최대 너비 제한 (선택 사항) */
            margin: 0 auto;
        }


        /* 2. 개별 이미지 부모 박스 (여기가 피그마 1x 원본 크기 역할을 대신합니다) */
        .detail-inner05 .image-gallery .img-box {
            width: 100%;
            overflow: hidden;
        }


        /* 3. 실제 3배 추출된 이미지 처리 */
        .detail-inner05 .image-gallery .img-box img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        @media (max-width: 768px) {
            .detail-inner05 .txt {
                margin-bottom:
            }
            .detail-inner05 .image-gallery .img-box img {
                height: auto;
            }

        }


         .detail-inner06 {
            width: 100%;
            margin: 0 auto;
        }

        .detail-inner06.bg {
            position: relative;
        }

        .detail-inner06 .img-box {
            position: absolute;
            width: 15%;
        }

        .detail-inner06 .img-box01 {
            top: 25%;
            right: 4%;
        }

        .detail-inner06 .img-box02 {
            top: 34%;
            left: 4%;
        }

        .detail-inner06 .img-box03 {
            top: 64%;
            right: 4%;
        }

        .detail-inner06 .img-box04 {
            top: 63%;
            left: 4%;
            width: 12%;
        }

        .detail-inner06 .img-box05 {
            top: 77%;
            left: 4%;
        }

        .detail-inner07 {
            background: #FEF0EB;
            width: 100%;
            margin: 0 auto;
            padding: 5% 5% 5% 5%;
            display: flex;
        }

        /* 공통 애니메이션 설정 */
        .slide-image {
            margin-left: -80px;
            width: calc(33% + 80px);
            opacity: 0;
            transform: translateX(-50px);
        }


        /* 화면에 들어왔을 때 적용할 애니메이션 */
        .slide-image.active {
            animation: slideInLeft 1s ease-out forwards;
        }


        .img-1.active {
            animation-delay: 0s;
        }


        .img-2.active {
            animation-delay: 0.5s;
        }


        .img-3.active {
            animation-delay: 1s;
        }


        @keyframes slideInLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .slide-image:first-child {
            margin-left: 0;
        }
         .detail-inner14 {
            position: relative;
            background-color: #EDEBF2;
        }

        .detail-inner14 .bg {
            position: absolute;
            top: 50%;
            right: 0;
            z-index: 999;
        }

        .detail-inner14 .detail-inner14-1 {
            /*position:absolute;top:0;*/
            display: flex;
            gap: 130px;
            padding: 10% 10% 8%;
        }

        .detail-inner14 .detail-inner14-1 .in {
            position: relative;
        }

        .detail-inner14 .detail-inner14-1-3 {
            position: absolute;
            top: 0;
            right: -360px;
            top: 77%;
            width: auto;
        }




        .detail-inner14 .detail-inner14-2 {
            display: flex;
            justify-content: space-between;
            padding: 0% 3%;
        }

        .detail-inner14 .detail-inner14-2 .detail-inner14-2-1 {
            width: 35%;
        }

        .detail-inner14 .detail-inner14-2 .detail-inner14-2-2 {
            width: 32%;
            padding-top: 250px;
            z-index: 2;
        }

        .detail-inner14 .detail-inner14-2 .detail-inner14-2-1-3 {
            width: 90px;
            margin-left: -10%;
        }

        .detail-inner14 .detail-inner14-2 .detail-inner14-2-1 .detail-inner14-2-1-2 {
            width: 50%;
            margin: 27px 0 0 400px;
        }

        .detail-inner14 .detail-inner14-2 .detail-inner14-2-2 .detail-inner14-2-2-2 {
            width: 89%;
            margin: -27px 0 0 -100px;
            z-index: 1;
        }

        .detail-inner14 .detail-inner14-2-3 {
            width: 43%;
            padding: 0 3% 188px;
        }

        @media (max-width: 768px) {
            .detail-inner14 .detail-inner14-1 {
                gap: 4%;
                padding: 15% 10% 8%;
            }

            .detail-inner14 .detail-inner14-1-2 .title_txt {
                font-size: 9px;
                font-weight: 600;
            }

            .detail-inner14 .detail-inner14-1-2 .txt {
                font-size: 8px;
            }

            .detail-inner14 .detail-inner14-1 .img14_1 {
                width: 80%;
            }

            .detail-inner14 .detail-inner14-1-3 {
                right: -33%;
                top: 73%;
                width: auto;
                width: 50%;
            }

            .detail-inner14 .detail-inner14-2 .detail-inner14-2-2 {
                padding-top: 50px;
            }

            .detail-inner14 .detail-inner14-2 .detail-inner14-2-2 .detail-inner14-2-2-2 {
                margin: -7px 0 0 -20px;
                z-index: 1;
            }

            .detail-inner14 .bg {
                top: 10%;
                width: 10%;
            }

            .detail-inner14 .detail-inner14-2 .detail-inner14-2-1 .detail-inner14-2-1-2 {
                margin: 10px 0 0 65%;
            }

            .detail-inner14 .detail-inner14-2 .detail-inner14-2-1-3 {
                width: 20%;
            }

            .detail-inner14 .detail-inner14-2-3 {
                padding: 0 3% 58px;
            }
        }

        .detail-inner17 {
            position: relative;
        }

        .detail-inner17 .inner {
            width: 100%;
            position: absolute;
            right: 0;
            top: 0px;
            display: flex;
            padding: 313px 0;
            gap: 13%;
            box-sizing: border-box;
            justify-content: center;
        }

        .detail-inner17 .inner .inner-left {
            width: 45%;
        }

        .detail-inner17 .inner .inner-right {
            width: 14%;
        }

        .detail-inner17 .inner .inner-right div {
            padding: 147px 0;
        }


        @media (max-width: 768px) {
            .detail-inner17 .inner {
                padding: 80px 0;
            }

            .detail-inner17 .inner .inner-right div {
                padding: 40px 0;
            }
        }
        .detail-inner19 {
            position: relative;
            background-color: #EDEBF2;
        }

        .detail-inner19 .detail-inner19-inner {
            position: absolute;
            top: 0;
            padding: 13% 8% 8%;
        }

        .detail-inner19 .detail-inner19-inner .detail-inner19-1 {
            display: flex;
            justify-content: space-between;
        }

        .detail-inner19 .detail-inner19-1>div {
            width: 50%;
        }

        .detail-inner19 .detail-inner19-1 .img19-1 {
            width: 90%;
        }

        .detail-inner19 .detail-inner19-1 .img19-2 {
            width: 50%;
            margin-left: 15%;
        }

        .detail-inner19 .detail-inner19-1 .img19-3 {
            width: 50%;
            margin-top: 100px;
        }

        .detail-inner19 .detail-inner19-1 .img19-4 {
            width: 50%;
            margin: -60px 0 0 45%;
        }

        .detail-inner19 .detail-inner19-inner .detail-inner19-2 {
            display: flex;
            justify-content: space-between;
        }

        .detail-inner19 .detail-inner19-2>div {
            width: 50%;
        }

        .detail-inner19 .detail-inner19-2 .img19-5 {
            width: 50%;
            margin: -17% 0 0 35%;
        }

        .detail-inner19 .detail-inner19-2 .img19-6 {
            width: 50%;
            margin-left: 15%;
            margin-top: 3%;
        }

        .detail-inner19 .detail-inner19-2 .img19-7 {
            width: 40%;
            margin-top: 80px;
            margin-left: auto;
            margin-right: 0;
        }

        .detail-inner19 .detail-inner19-2 .img19-8 {
            width: 40%;
            margin: -200px 0 0 15%;
        }

        .detail-inner19 .detail-inner19-2 .img19-9 {
            width: 40%;
            margin: -70px 0 0 57%;
        }


        @media (max-width: 768px) {
            .detail-inner19 .detail-inner19-1 .img19-2 {
                width: 45%;
                margin: 70px 0 0 18%;
            }

            .detail-inner19 .detail-inner19-1 .img19-3 {
                width: 45%;
                margin-top: 40px;
            }

            .detail-inner19 .detail-inner19-1 .img19-4 {
                width: 45%;
                margin: -15px 0 0 52%;
            }

            .detail-inner19 .detail-inner19-2 .img19-5 {
                width: 45%;
                margin: -40% 0 0 35%;
            }

            .detail-inner19 .detail-inner19-2 .img19-9 {
                width: 35%;
                margin: -20px 0 0 57%
            }

            .detail-inner19 .detail-inner19-2 .img19-7 {
                width: 35%;
                margin-top: 10px;
            }

            .detail-inner19 .detail-inner19-2 .img19-8 {
                width: 35%;
                margin: -30px 0 0 27%;
            }
        }