/* ==================================================
   FLUENT FORM
================================================== */

.fluentformheader {
    display: flex;
    column-gap: 5px;
}

select#ff-form-filter,
select#ff-status-filter {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

button#export-csv {
    background: #0066CC;
    border: 1px solid #0066CC;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
}

button#export-csv:hover {
    background: #000000;
    border-color: #000000;
}


/* ==================================================
   MARQUEE
================================================== */

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    padding: 10px 0;
    position: relative;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: marquee var(--marquee-speed, 25s) linear infinite;
}

.marquee-link {
    display: inline-block;
    margin-right: 40px;
    text-decoration: none !important;
    color: #ffffff;
    font-weight: 500;
    font-size: 18px;
}

.marquee-link:hover {
    text-decoration: underline !important;
    color: #E6E6E6;
}


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

.header-grid {
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr) !important;
}


/* ==================================================
   DESKTOP
================================================== */

@media (min-width: 1025px) {

    /* ==================================================
       HEADER
       XD 기준 1920 × 90
    ================================================== */

    .header-grid {
        width: 100% !important;

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

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        padding-left: 50px !important;
        padding-right: 50px !important;

        box-sizing: border-box !important;

        align-items: center !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr) !important;

        overflow: visible !important;
    }


    /* ==================================================
       메가메뉴 닫힌 상태
    ================================================== */

    .header-grid
    .wpr-nav-menu
    > li.wpr-mega-menu-true
    > .wpr-sub-mega-menu {

        display: block !important;

        visibility: hidden;
        opacity: 0;
        pointer-events: none;

        background: #ffffff !important;

        border: 0 !important;
        outline: 0 !important;

        min-height: 170px !important;

        overflow: visible !important;

        top: 100% !important;

        margin-top: 0 !important;

        transform: translateY(0) !important;

        box-shadow:
            0 0 0 100vmax #ffffff !important;

        clip-path:
            inset(0 -100vmax 100% -100vmax);

        transition:
            clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.2s ease,
            visibility 0s linear 0.4s;

        will-change:
            clip-path,
            opacity;

        z-index: 999999 !important;
    }


    /* ==================================================
       메가메뉴 OPEN
    ================================================== */

    .header-grid
    .wpr-nav-menu
    > li.wpr-mega-menu-true:hover
    > .wpr-sub-mega-menu,

    .header-grid
    .wpr-nav-menu
    > li.wpr-mega-menu-true:focus-within
    > .wpr-sub-mega-menu {

        visibility: visible;

        opacity: 1;

        pointer-events: auto;

        top: 100% !important;

        margin-top: 0 !important;

        transform: translateY(0) !important;

        clip-path:
            inset(0 -100vmax 0 -100vmax);

        transition-delay: 0s;
    }


    /* ==================================================
       상단 메뉴 이동 가능 영역
    ================================================== */

    .header-grid .header-menu {
        width: 960px !important;
        max-width: 960px !important;

        justify-self: center !important;
        align-self: center !important;

        overflow: visible !important;
    }


    /* ==================================================
       Royal Addons 메뉴 내부 래퍼
    ================================================== */

    .header-grid
    .header-menu
    .wpr-nav-menu-horizontal {

        width: 100% !important;

        overflow: visible !important;
    }


    /* ==================================================
       상단 메뉴
    ================================================== */

    .header-grid
    .header-menu
    .wpr-nav-menu {

        width: 720px !important;

        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        display: flex !important;

        overflow: visible !important;

        transition:
            width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }


    /* ==================================================
       메뉴 hover 시 확장
    ================================================== */

    .header-grid
    .header-menu:hover
    .wpr-nav-menu,

    .header-grid
    .header-menu:focus-within
    .wpr-nav-menu {

        width: 820px !important;

        transform:
            translateX(-40px);
    }


    /* ==================================================
       상단 메뉴 4등분
    ================================================== */

    .header-grid
    .header-menu
    .wpr-nav-menu
    > li {

        flex: 0 0 25% !important;

        width: 25% !important;

        min-width: 0 !important;

        height: 90px !important;

        text-align: center !important;

        overflow: visible !important;
    }


    /* ==================================================
       상단 메뉴 링크
    ================================================== */

    .header-grid
    .header-menu
    .wpr-nav-menu
    > li
    > a {

        width: 100% !important;

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

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        display: flex !important;

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

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* ==================================================
       Royal Addons 기본 underline 제거
    ================================================== */

    .header-grid
    .header-menu
    .wpr-nav-menu
    > li
    > a::before,

    .header-grid
    .header-menu
    .wpr-nav-menu
    > li
    > a::after {

        display: none !important;
    }


    /* ==================================================
       상단 메뉴 파란선
       XD 기준 180 × 2
    ================================================== */

    .header-grid
    .header-menu
    .wpr-nav-menu
    > li
    > a {

        background-image:
            linear-gradient(
                #5b5cff,
                #5b5cff
            ) !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center bottom !important;

        background-size:
            0 2px !important;

        transition:
            background-size 0.25s ease,
            color 0.25s ease !important;
    }


    .header-grid
    .header-menu
    .wpr-nav-menu
    > li:hover
    > a,

    .header-grid
    .header-menu
    .wpr-nav-menu
    > li:focus-within
    > a {

        background-size:
            180px 2px !important;
    }


    .header-grid
    .header-menu
    .wpr-nav-menu
    > li.current-menu-item
    > a,

    .header-grid
    .header-menu
    .wpr-nav-menu
    > li.current-menu-ancestor
    > a {

        background-size:
            180px 2px !important;
    }


    /* ==================================================
       하위메뉴 전체 내용 위치
    ================================================== */

    .mega-columns {

        position: relative !important;

        left: -12px !important;

        width: auto !important;

        max-width: none !important;

        overflow: visible !important;
    }


    /* ==================================================
       하위메뉴 HOVER 파란 밑줄
    ================================================== */

    .mega-columns a {

        text-decoration: none !important;

        text-underline-offset: 5px;

        text-decoration-thickness: 1px;

        transition:
            color 0.2s ease,
            text-decoration-color 0.2s ease;
    }


    .mega-columns a:hover,
    .mega-columns a:focus {

        color: #5b5cff !important;

        text-decoration-line:
            underline !important;

        text-decoration-color:
            #5b5cff !important;

        text-decoration-thickness:
            1px !important;

        text-underline-offset:
            5px !important;
    }


    /* ==================================================
       HERO 문구
       데스크톱에서는 무조건 한 줄 유지
    ================================================== */

    .scroll-panel-1 .hero-title-en,
    .scroll-panel-1 .hero-title-ko {

        width: max-content !important;

        min-width: max-content !important;

        max-width: none !important;

        white-space: nowrap !important;

        word-break: keep-all !important;

        overflow-wrap: normal !important;
    }


    .scroll-panel-1
    .hero-title-en
    .elementor-heading-title,

    .scroll-panel-1
    .hero-title-ko
    .elementor-heading-title {

        white-space: nowrap !important;

        word-break: keep-all !important;

        overflow-wrap: normal !important;
    }
}


/* ==================================================
   HEADER Z-INDEX
================================================== */

.elementor-location-header {

    position: relative !important;

    z-index: 99999 !important;

    overflow: visible !important;
}


.header-grid,
.header-grid .header-menu,
.header-grid .wpr-nav-menu-horizontal,
.header-grid .wpr-nav-menu {

    overflow: visible !important;
}


.header-grid
.wpr-nav-menu
> li.wpr-mega-menu-true
> .wpr-sub-mega-menu {

    z-index: 999999 !important;
}


/* ==================================================
   MAIN HERO
   XD 원본 비율 1920 × 1080 유지
================================================== */

.scroll-panel-1 {
    position: relative !important;

    width: 100% !important;

    /* 핵심 */
    aspect-ratio: 1920 / 1080 !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    z-index: 1;
}


/* ==================================================
   HERO POSITION BASE
   XD 원본: 1920 × 1080
================================================== */

.scroll-panel-1 {
    position: relative !important;
}


/* ==================================================
   HERO ENGLISH TITLE
   XD 기준
   X = 200
   Y = 775
   W = 629
   H = 69
================================================== */

.scroll-panel-1 .hero-title-en {
    position: absolute !important;

    /* X = 200 / 1920 */
    left: 10.416667% !important;

    /* 이미지 시작 Y=90
       775 - 90 = 685
       685 / 1080 */
    top: 63.425926% !important;

    /* W = 629 / 1920 */
    width: 32.760417% !important;

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

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

    z-index: 10 !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
}

.scroll-panel-1
.hero-title-en
.elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

    font-family:
        "Paperlogy 3",
        "Paperlogy",
        sans-serif !important;

    /* 1920 화면일 때 52px */
    font-size: min(2.708333vw, 52px) !important;

    font-weight: 300 !important;

    /* 1920 화면일 때 69px */
    line-height: min(3.59375vw, 69px) !important;

    color: #00ff33 !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
}


/* ==================================================
   HERO KOREAN TITLE
   XD 기준
   X = 200
   Y = 844
   W = 758
   H = 75
================================================== */

.scroll-panel-1 .hero-title-ko {
    position: absolute !important;

    /* X = 200 / 1920 */
    left: 10.416667% !important;

    /* 이미지 시작 Y=90
       844 - 90 = 754
       754 / 1080 */
    top: 69.814815% !important;

    /* W = 758 / 1920 */
    width: 39.479167% !important;

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

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

    z-index: 10 !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
}

.scroll-panel-1
.hero-title-ko
.elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;

    font-family:
        "Paperlogy 5",
        "Paperlogy",
        sans-serif !important;

    /* 1920 화면일 때 56px */
    font-size: min(2.916667vw, 56px) !important;

    font-weight: 500 !important;

    /* 1920 화면일 때 74px */
    line-height: min(3.854167vw, 74px) !important;

    color: #ffffff !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
}
/* ==================================================
   HERO NEWS BAR
   XD X = 960
================================================== */

.hero-news {

    position: absolute !important;

    right: 0 !important;

    bottom: 0 !important;

    left: auto !important;

    width: 50% !important;

    min-height: 92px !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    padding: 0 !important;

    margin: 0 !important;

    background:
        rgba(0, 0, 0, 0.65);

    color:
        #ffffff;

    z-index: 20 !important;

    box-sizing: border-box !important;
}


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

.hero-news .news-title {

    flex:
        0 0 122px !important;

    width:
        122px !important;

    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

    font-family:
        "Paperlogy 7",
        "Paperlogy",
        sans-serif !important;

    font-size:
        20px !important;

    font-weight:
        700 !important;

    line-height:
        27px !important;

    box-sizing:
        border-box !important;
}


/* ==================================================
   NEWS ITEMS
================================================== */

.hero-news .news-item {

    flex:
        1 1 0 !important;

    min-width:
        0 !important;

    padding:
        0 14px !important;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.28);

    box-sizing:
        border-box !important;
}


/* ==================================================
   NEWS ITEM TITLE
================================================== */

.hero-news .news-item-title {

    margin:
        0 !important;

    color:
        #ffffff !important;

    font-family:
        "Paperlogy 3",
        "Paperlogy",
        sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        300 !important;

    line-height:
        21px !important;
}


/* ==================================================
   NEWS DATE
================================================== */

.hero-news .news-date {

    margin:
        10px 0 0 0 !important;

    color:
        #ffffff !important;

    font-family:
        "Paperlogy 3",
        "Paperlogy",
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        300 !important;

    line-height:
        20px !important;
}


/* ==================================================
   VIEW ALL
================================================== */

.hero-news .news-more {

    flex:
        0 0 55px !important;

    width:
        55px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.28);

    color:
        #ffffff !important;

    writing-mode:
        vertical-rl;

    text-orientation:
        mixed;

    font-size:
        9px !important;

    box-sizing:
        border-box !important;
}


.scroll-panel-2 {

    position: relative !important;

    z-index: 2;

    opacity: 1 !important;

    clip-path: none !important;

    transform: none !important;

    transform-origin: center center;

    visibility: visible !important;
}

/* ==================================================
   SECOND IMAGE
   첫 번째 HERO처럼 화면 좌우 끝까지
================================================== */

.scroll-panel-2 {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    overflow: hidden !important;
}


/* 이미지 위젯 자체 */
.scroll-panel-2 .elementor-widget-image,
.scroll-panel-2 .elementor-widget-image .elementor-widget-container {
    width: 100% !important;
    max-width: none !important;

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


/* 실제 이미지 */
.scroll-panel-2 .elementor-widget-image img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;

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


/* 두 번째 이미지 위 제목 */
.scroll-panel-2 {
    position: relative !important;
}

.scroll-panel-2 .section2-title {
    position: absolute !important;

    left: 50% !important;
    top: 18% !important;

    transform: translateX(-50%) !important;

    width: auto !important;

    margin: 0 !important;

    z-index: 10 !important;

    text-align: center !important;
}


/* ==================================================
   SECTION 2
   XD 1920 기준 제목 / 설명 위치
================================================== */

.scroll-panel-2 {
    position: relative !important;
}


/* ==================================================
   모빌리티 안전
   XD: X759 / Y1403 / W402 / H86
   SECTION2 내부 Y = 1403 - 1170 = 233
================================================== */

.scroll-panel-2 .section2-title {
    position: absolute !important;

    /* 화면 정중앙 */
    left: 50% !important;

    /* 233 / 1920 */
    top: min(12.135417vw, 233px) !important;

    /* 402 / 1920 */
    width: min(20.9375vw, 402px) !important;
    max-width: none !important;

    transform: translateX(-50%) !important;

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

    text-align: center !important;

    z-index: 20 !important;
}


.scroll-panel-2
.section2-title
.elementor-heading-title {

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

    font-family:
        "Paperlogy 8",
        "Paperlogy",
        sans-serif !important;

    /* XD 64px */
    font-size:
        min(3.333333vw, 64px) !important;

    font-weight: 800 !important;

    /* XD 85px */
    line-height:
        min(4.427083vw, 85px) !important;

    text-align: center !important;

    white-space: nowrap !important;

    color: #000000 !important;
}


/* 제목 안의 파란색 '안전' */
.scroll-panel-2
.section2-title
.section2-blue {

    color: #0057b8 !important;
}


/* ==================================================
   설명문
   XD: X547 / Y1497 / W826 / H57
   SECTION2 내부 Y = 1497 - 1170 = 327
================================================== */

.scroll-panel-2 .section2-desc {
    position: absolute !important;

    left: 50% !important;

    /* 327 / 1920 */
    top: min(17.03125vw, 327px) !important;

    /* 826 / 1920 */
    width: min(43.020833vw, 826px) !important;
    max-width: none !important;

    transform: translateX(-50%) !important;

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

    text-align: center !important;

    z-index: 20 !important;
}


.scroll-panel-2
.section2-desc
.elementor-heading-title {

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

    font-family:
        "Paperlogy 6",
        "Paperlogy",
        sans-serif !important;

    /* XD 24px */
    font-size:
        min(1.25vw, 24px) !important;

    font-weight: 600 !important;

    /* XD 25px */
    line-height:
        min(1.302083vw, 25px) !important;

    color: #000000 !important;

    text-align: center !important;

    white-space: normal !important;
    word-break: keep-all !important;
}

/* ==================================================
   MOBILITY CARD AREA
   XD 기준 1920 × 550

   CARD 1 : X330  / Y2100 / W400 / H550
   CARD 2 : X760  / Y2100 / W400 / H550
   CARD 3 : X1190 / Y2100 / W416 / H550

   SECTION 2 시작 Y = 1170
   카드 내부 Y = 2100 - 1170 = 930
================================================== */

.scroll-panel-2 {
    position: relative !important;
    overflow: hidden !important;
}


/* ==================================================
   카드 3개 전체 기준 영역

   중요:
   Elementor 내부 컨테이너 폭이 아니라
   실제 화면 폭을 기준으로 좌표 계산
================================================== */

.scroll-panel-2 .mobility-cards {
    position: absolute !important;

    top: 48.4375vw !important;

    left: 50% !important;

    width: 100vw !important;
    max-width: 1920px !important;

    height: min(28.645833vw, 550px) !important;

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

    display: block !important;

    transform: translateX(-50%) !important;

    overflow: visible !important;

    z-index: 30 !important;
}


/* Elementor 내부 wrapper 무력화 */

.scroll-panel-2
.mobility-cards
> .e-con-inner {

    position: static !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

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

    display: block !important;
}


/* ==================================================
   CARD 공통
================================================== */

.scroll-panel-2 .mobility-card {
    position: absolute !important;

    top: 0 !important;

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

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

    min-height: 0 !important;

    flex: none !important;

    background: #ffffff !important;

    border-radius: min(0.520833vw, 10px) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    transform: none !important;

    z-index: 1 !important;
}


/* ==================================================
   CARD 위치
================================================== */


/* CARD 1
   X330 / W400
*/

.scroll-panel-2 .mobility-card-1 {
    left: 17.1875% !important;

    width: 20.833333% !important;

    aspect-ratio: 400 / 550 !important;

    height: auto !important;
}


/* CARD 2
   X760 / W400
*/

.scroll-panel-2 .mobility-card-2 {
    left: 39.583333% !important;

    width: 20.833333% !important;

    aspect-ratio: 400 / 550 !important;

    height: auto !important;
}


/* CARD 3
   X1190 / W416
*/

.scroll-panel-2 .mobility-card-3 {
    left: 61.979167% !important;

    width: 21.666667% !important;

    aspect-ratio: 416 / 550 !important;

    height: auto !important;
}


/* ==================================================
   카드 자체 Elementor wrapper

   모든 내부 요소가 카드의 왼쪽 위를
   좌표 기준으로 사용하도록 설정
================================================== */

.scroll-panel-2
.mobility-card
> .e-con-inner {

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

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

    display: block !important;
}


/* Elementor 기본 margin 제거 */

.scroll-panel-2
.mobility-card
.elementor-widget {

    margin: 0 !important;
}


/* ==================================================
   CARD IMAGE

   XD
   X30
   Y30
   W340
   H230
================================================== */

.scroll-panel-2
.mobility-card
.card-image {

    position: absolute !important;

    left: min(1.5625vw, 30px) !important;
    top: min(1.5625vw, 30px) !important;

    width: min(17.708333vw, 340px) !important;
    height: min(11.979167vw, 230px) !important;

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

    overflow: hidden !important;

    border-radius: min(0.416667vw, 8px) !important;
}


.scroll-panel-2
.mobility-card
.card-image
.elementor-widget-container {

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

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


.scroll-panel-2
.mobility-card
.card-image img {

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 100% !important;

    object-fit: cover !important;

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

    border-radius: inherit !important;
}


/* ==================================================
   PRODUCT NAME

   Dr.S@fe
   SafeView360+
   SafeView+

   XD X30 / Y277

   Paperlogy 8
   30px
   ExtraBold
================================================== */

.scroll-panel-2
.mobility-card
.card-product-name {

    position: absolute !important;

    left: min(1.5625vw, 30px) !important;
    top: min(14.427083vw, 277px) !important;

    width: min(17.708333vw, 340px) !important;
    max-width: none !important;

    height: min(2.083333vw, 40px) !important;

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


.scroll-panel-2
.mobility-card
.card-product-name
.elementor-heading-title,

.scroll-panel-2
.mobility-card
.card-product-name
.elementor-widget-container,

.scroll-panel-2
.mobility-card
.card-product-name p {

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

    font-family:
        "Paperlogy 8",
        "Paperlogy",
        sans-serif !important;

    font-size: min(1.5625vw, 30px) !important;

    font-weight: 800 !important;

    line-height: min(2.083333vw, 40px) !important;

    color: #111111 !important;

    white-space: nowrap !important;
}


/* ==================================================
   DIVIDER
   XD X30 / Y328 / W340 / H1

   별도 Divider 위젯 없어도 생성
================================================== */

.scroll-panel-2
.mobility-card
.card-product-name::after {

    content: "";

    position: absolute !important;

    left: 0 !important;

    top: min(2.65625vw, 51px) !important;

    width: min(17.708333vw, 340px) !important;

    height: 1px !important;

    background: #dddddd !important;

    z-index: 2 !important;
}


/* 혹시 Divider 위젯이 이미 들어있으면 숨김 */

.scroll-panel-2
.mobility-card
.card-divider {

    display: none !important;
}


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

   페달 오조작 방지 장치
   상용차 출발 방지 시스템
   특수차 안전 운전 플랫폼

   XD X30 / Y339 / W340 / H37

   Paperlogy 5
   28px
   Medium
================================================== */

.scroll-panel-2
.mobility-card
.card-title {

    position: absolute !important;

    left: min(1.5625vw, 30px) !important;
    top: min(17.65625vw, 339px) !important;

    width: min(17.708333vw, 340px) !important;

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

    min-height: min(1.927083vw, 37px) !important;

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

    overflow: visible !important;
}


.scroll-panel-2
.mobility-card
.card-title
.elementor-heading-title,

.scroll-panel-2
.mobility-card
.card-title
.elementor-widget-container,

.scroll-panel-2
.mobility-card
.card-title p {

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

    font-family:
        "Paperlogy 5",
        "Paperlogy",
        sans-serif !important;

    font-size: min(1.458333vw, 28px) !important;

    font-weight: 500 !important;

    line-height: min(1.927083vw, 37px) !important;

    color: #111111 !important;

    word-break: keep-all !important;
    overflow-wrap: normal !important;
}


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

   XD X30 / Y389 / W340

   Paperlogy 4
   16px
   Regular
================================================== */

.scroll-panel-2
.mobility-card
.card-desc {

    position: absolute !important;

    left: min(1.5625vw, 30px) !important;
    top: min(20.260417vw, 389px) !important;

    width: min(17.708333vw, 340px) !important;

    min-height: min(2.395833vw, 46px) !important;

    height: auto !important;

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

    overflow: visible !important;
}


.scroll-panel-2
.mobility-card
.card-desc
.elementor-heading-title,

.scroll-panel-2
.mobility-card
.card-desc
.elementor-widget-container,

.scroll-panel-2
.mobility-card
.card-desc p {

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

    font-family:
        "Paperlogy 4",
        "Paperlogy",
        sans-serif !important;

    font-size: min(0.833333vw, 16px) !important;

    font-weight: 400 !important;

    line-height: min(1.302083vw, 25px) !important;

    color: #111111 !important;

    word-break: keep-all !important;
    overflow-wrap: normal !important;
}


/* ==================================================
   TAG COMMON

   XD Y480 / H40
================================================== */

.scroll-panel-2
.mobility-card
.card-tag {

    position: absolute !important;

    top: min(25vw, 480px) !important;

    height: min(2.083333vw, 40px) !important;

    display: flex !important;

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

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

    background: #f3f3f3 !important;

    border-radius: 100px !important;

    box-sizing: border-box !important;

    /*
     * 중요
     * 긴 태그 글자가 잘리지 않도록 hidden 제거
     */
    overflow: visible !important;

    white-space: nowrap !important;
}


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

.scroll-panel-2
.mobility-card
.card-tag
.elementor-heading-title,

.scroll-panel-2
.mobility-card
.card-tag
.elementor-widget-container,

.scroll-panel-2
.mobility-card
.card-tag p {

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

    font-family:
        "Paperlogy 5",
        "Paperlogy",
        sans-serif !important;

    font-size: min(0.833333vw, 16px) !important;

    font-weight: 500 !important;

    line-height: 1 !important;

    color: #999999 !important;

    white-space: nowrap !important;

    text-align: center !important;
}


/* ==================================================
   CARD 1 TAG

   X30 / X130 / X230
================================================== */

.scroll-panel-2
.mobility-card-1
.tag-1 {

    left: min(1.5625vw, 30px) !important;

    width: min(4.6875vw, 90px) !important;
}


.scroll-panel-2
.mobility-card-1
.tag-2 {

    left: min(6.770833vw, 130px) !important;

    width: min(4.6875vw, 90px) !important;
}


.scroll-panel-2
.mobility-card-1
.tag-3 {

    left: min(11.979167vw, 230px) !important;

    width: min(4.6875vw, 90px) !important;
}


/* ==================================================
   CARD 2 TAG

   X30  W90
   X130 W130
   X265 W90
================================================== */

.scroll-panel-2
.mobility-card-2
.tag-1 {

    left: min(1.5625vw, 30px) !important;

    width: min(4.6875vw, 90px) !important;
}


.scroll-panel-2
.mobility-card-2
.tag-2 {

    left: min(6.770833vw, 130px) !important;

    width: min(6.770833vw, 130px) !important;
}


.scroll-panel-2
.mobility-card-2
.tag-3 {

    left: min(13.802083vw, 265px) !important;

    width: min(4.6875vw, 90px) !important;
}


/* ==================================================
   CARD 3 TAG

   X30 / X130
================================================== */

.scroll-panel-2
.mobility-card-3
.tag-1 {

    left: min(1.5625vw, 30px) !important;

    width: min(4.6875vw, 90px) !important;
}


.scroll-panel-2
.mobility-card-3
.tag-2 {

    left: min(6.770833vw, 130px) !important;

    width: min(4.6875vw, 90px) !important;
}


/* ==================================================
   ELEMENTOR EDITOR

   편집 화면에서도 카드가 정상적으로 보이도록
================================================== */

.elementor-editor-active
.scroll-panel-2
.mobility-cards {
    opacity: 1 !important;
    visibility: visible !important;
}


.elementor-editor-active
.scroll-panel-2
.mobility-card {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ==================================================
   ELEMENTOR EDITOR
================================================== */

.elementor-editor-active .scroll-panel-1 {

    opacity: 1 !important;

    transform: none !important;

    filter: none !important;
}


.elementor-editor-active .scroll-panel-2 {

    opacity: 1 !important;

    transform: none !important;

    clip-path:
        inset(0 0 0 0) !important;
}


/* ==================================================
   MARQUEE ANIMATION
================================================== */

@keyframes marquee {

    0% {
        transform:
            translateX(100%);
    }

    100% {
        transform:
            translateX(-100%);
    }
}


.marquee-container:hover
.marquee-content {

    animation-play-state:
        paused;
}


/* ==================================================
   MOTION ACCESSIBILITY
================================================== */

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

    .scroll-panel-1,
    .scroll-panel-2 {

        opacity: 1 !important;

        transform: none !important;

        filter: none !important;

        clip-path:
            inset(0 0 0 0) !important;
    }
}


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

@media (max-width: 1024px) {

    .scroll-panel-1 .hero-title-en,
    .scroll-panel-1 .hero-title-ko {

        position: absolute !important;

        left: 7% !important;

        width: 86% !important;

        min-width: 0 !important;

        max-width: 86% !important;

        white-space: normal !important;

        word-break: keep-all !important;
    }


    .scroll-panel-1 .hero-title-en {

        top: 62% !important;
    }


    .scroll-panel-1
    .hero-title-en
    .elementor-heading-title {

        font-size:
            clamp(28px, 4vw, 52px) !important;

        line-height:
            1.25 !important;

        white-space:
            normal !important;
    }


    .scroll-panel-1 .hero-title-ko {

        top: 70% !important;
    }


    .scroll-panel-1
    .hero-title-ko
    .elementor-heading-title {

        font-size:
            clamp(30px, 4.3vw, 56px) !important;

        line-height:
            1.3 !important;

        white-space:
            normal !important;
    }
}


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

@media (max-width: 767px) {

    .hero-news {

        position:
            relative !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            100% !important;

        min-height:
            0 !important;

        flex-direction:
            column !important;
    }


    .hero-news .news-title,
    .hero-news .news-more {

        flex:
            none !important;

        width:
            100% !important;

        writing-mode:
            horizontal-tb;

        padding:
            12px 16px !important;
    }


    .hero-news .news-item {

        border-left:
            0 !important;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.2);

        padding:
            12px 16px !important;
    }
}


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

@media (max-width: 600px) {

    .marquee-link {

        font-size:
            16px;
    }
}


/* ==================================================
   가로 스크롤 방지
================================================== */

html,
body {

    overflow-x:
        clip;
}

/* ==================================================
   SCROLL PANEL 2
   스크롤 시 이미지 좌우로 펼쳐짐
================================================== */

.scroll-panel-2 {
    --panel2-progress: 0;
    --panel2-inset: 40%;
    --panel2-title-y: 70px;
    --panel2-desc-y: 90px;

    position: relative !important;
}


/* ==================================================
   두 번째 메인 이미지
   실제 이미지 크기는 항상 100%
   좌우를 15%씩 가렸다가 0%까지 펼침
================================================== */

.scroll-panel-2 .panel2-expand-image {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

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

    clip-path:
        inset(
            0
            var(--panel2-inset)
            0
            var(--panel2-inset)
        ) !important;

    overflow: hidden !important;

    will-change: clip-path;
}


.scroll-panel-2
.panel2-expand-image
.elementor-widget-container {
    width: 100% !important;
    max-width: none !important;

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


.scroll-panel-2
.panel2-expand-image img {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;

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

    object-fit: cover !important;
}


/* ==================================================
   모빌리티 안전 제목
================================================== */

.scroll-panel-2 .section2-title {
    opacity: var(--panel2-progress) !important;

    transform:
        translateX(-50%)
        translateY(var(--panel2-title-y)) !important;

    will-change:
        transform,
        opacity;

    z-index: 20 !important;
}


/* ==================================================
   설명
================================================== */

.scroll-panel-2 .section2-desc {
    opacity: var(--panel2-progress) !important;

    transform:
        translateX(-50%)
        translateY(var(--panel2-desc-y)) !important;

    will-change:
        transform,
        opacity;

    z-index: 20 !important;
}

/* ==================================================
   MOBILITY CARD SCROLL ANIMATION
   카드 1 → 카드 2 → 카드 3
   아래에서 위로 순차 등장
================================================== */


/*
 * JS가 실행된 경우에만 초기 상태 적용
 * → Elementor 편집화면에서 카드가 사라지는 문제 방지
 */
.scroll-panel-2
.mobility-cards.cards-animation-enabled
.mobility-card {

    opacity: 0 !important;

    transform:
        translateY(80px) !important;

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change:
        opacity,
        transform;
}


/* ==================================================
   등장 상태
================================================== */

.scroll-panel-2
.mobility-cards.cards-animation-enabled.cards-visible
.mobility-card {

    opacity: 1 !important;

    transform:
        translateY(0) !important;
}


/* ==================================================
   CARD 1
   제일 먼저
================================================== */

.scroll-panel-2
.mobility-cards.cards-animation-enabled
.mobility-card-1 {

    transition-delay:
        0s !important;
}


/* ==================================================
   CARD 2
   두 번째
================================================== */

.scroll-panel-2
.mobility-cards.cards-animation-enabled
.mobility-card-2 {

    transition-delay:
        0.25s !important;
}


/* ==================================================
   CARD 3
   마지막
================================================== */

.scroll-panel-2
.mobility-cards.cards-animation-enabled
.mobility-card-3 {

    transition-delay:
        0.50s !important;
}


/* ==================================================
   Elementor 편집 화면에서는 항상 표시
================================================== */

.elementor-editor-active
.scroll-panel-2
.mobility-cards
.mobility-card {

    opacity: 1 !important;

    transform:
        none !important;

    transition:
        none !important;
}


/* ==================================================
   움직임 최소화 설정 사용자
================================================== */

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

    .scroll-panel-2
    .mobility-cards
    .mobility-card {

        opacity: 1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }
}

/* ==================================================
   SECTION 2 TITLE SCROLL ANIMATION

   모빌리티 안전
   설명
   아래 → 위 순차 등장
================================================== */


/* 초기 상태 */
.scroll-panel-2 .section2-title,
.scroll-panel-2 .section2-desc {

    opacity: 0 !important;

    transform:
        translateX(-50%)
        translateY(70px) !important;

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;

    will-change:
        opacity,
        transform;
}


/* 제목 먼저 */
.scroll-panel-2 .section2-title {

    transition-delay:
        0s !important;
}


/* 설명은 조금 뒤에 */
.scroll-panel-2 .section2-desc {

    transition-delay:
        0.3s !important;
}


/* 화면에 들어왔을 때 */
.scroll-panel-2.section2-text-visible .section2-title,
.scroll-panel-2.section2-text-visible .section2-desc {

    opacity: 1 !important;

    transform:
        translateX(-50%)
        translateY(0) !important;
}


/* Elementor 편집 화면에서는 항상 표시 */
.elementor-editor-active
.scroll-panel-2
.section2-title,

.elementor-editor-active
.scroll-panel-2
.section2-desc {

    opacity: 1 !important;

    transform:
        translateX(-50%)
        translateY(0) !important;

    transition:
        none !important;
}

































/* ==================================================
   THIRD IMAGE SECTION
   자율 플랫폼

   XD 1920 기준
================================================== */

.scroll-panel-3 {
    position: relative !important;

    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    /*
     * XD에서 흰색 영역을 확보한 뒤
     * 그 아래부터 이미지 시작
     *
     * 1920 기준 약 400px
     */
    padding-top: 20.833333vw !important;

    margin-top: 0 !important;

    background: #ffffff !important;

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

    transform: none !important;
    clip-path: none !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* ==================================================
   자율 플랫폼 메인 제목

   XD 기준:
   가운데 정렬
   섹션 상단에서 약 210px
================================================== */

.scroll-panel-3 .platform-title {
    position: absolute !important;

    left: 50% !important;
    top: 10.9375vw !important;

    transform: translateX(-50%) !important;

    width: 17.604167vw !important;
    max-width: 338px !important;

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

    text-align: center !important;

    z-index: 10 !important;
}


.scroll-panel-3
.platform-title
.elementor-widget-container {

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


.scroll-panel-3
.platform-title
.elementor-heading-title {

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

    font-family:
        "Paperlogy 8",
        "Paperlogy",
        sans-serif !important;

    font-size: 64px !important;
    font-weight: 800 !important;
    line-height: 85px !important;

    letter-spacing: 0 !important;

    color: #000000 !important;

    text-align: center !important;

    white-space: nowrap !important;
}


/* 자율 = 파란색 */
.scroll-panel-3
.platform-title
.elementor-heading-title
.platform-blue {

    color: #014099 !important;
}


/* ==================================================
   자율 플랫폼 설명

   제목 바로 아래
================================================== */

.scroll-panel-3 .platform-desc {
    position: absolute !important;

    left: 50% !important;
    top: 15.520833vw !important;

    transform: translateX(-50%) !important;

    width: 43.020833vw !important;
    max-width: 826px !important;

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

    text-align: center !important;

    z-index: 10 !important;
}


.scroll-panel-3
.platform-desc
.elementor-widget-container {

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

.scroll-panel-3
.platform-desc
.elementor-heading-title,
.scroll-panel-3
.platform-desc
.elementor-widget-container,
.scroll-panel-3
.platform-desc p {

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

    font-family:
        "Paperlogy 6",
        "Paperlogy",
        sans-serif !important;

    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 25px !important;

    letter-spacing: 0 !important;

    color: #000000 !important;

    text-align: center !important;

    word-break: keep-all !important;
}


/* ==================================================
   자율 플랫폼 배경 이미지

   XD:
   흰색 제목 영역 아래에서 시작
================================================== */

.scroll-panel-3 .platform-main-image {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

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

    z-index: 1 !important;
}


.scroll-panel-3
.platform-main-image
.elementor-widget-container {

    width: 100% !important;
    max-width: none !important;

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


.scroll-panel-3
.platform-main-image img {

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;

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