/* ==================================================
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 {
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 {
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: 0 !important;

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;

/* ★ 추가: 두 번째 섹션을 첫 번째 이미지 위로 122px 올림 */
margin-top: clamp(-122px, -6.354167vw, 0px) !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(18.489583vw, 355px) !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(23.385417vw, 449px) !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: min(49.479167vw, 950px) !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
.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;

}

/* ==================================================
SECTION 2 - LARGE SCREEN SCALE FIX
1920px보다 큰 화면에서도
1920 디자인 비율 그대로 확대
================================================== */

@media (min-width: 1921px) {

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

   ★ max-width:1920 제거
   큰 화면에서도 화면 전체 폭 기준
================================================== */

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

    /*
     * 현재 작은 화면에서 맞춘 카드 위치
     * 950 / 1920
     */
    top: 49.479167vw !important;

    height: 28.645833vw !important;
}


/* ==================================================
   카드 공통
================================================== */

.scroll-panel-2 .mobility-card {
    border-radius: 0.520833vw !important;
}


/* CARD 1 */
.scroll-panel-2 .mobility-card-1 {
    left: 17.1875% !important;
    width: 20.833333% !important;

    aspect-ratio: 400 / 550 !important;
    height: auto !important;
}


/* CARD 2 */
.scroll-panel-2 .mobility-card-2 {
    left: 39.583333% !important;
    width: 20.833333% !important;

    aspect-ratio: 400 / 550 !important;
    height: auto !important;
}


/* CARD 3 */
.scroll-panel-2 .mobility-card-3 {
    left: 61.979167% !important;
    width: 21.666667% !important;

    aspect-ratio: 416 / 550 !important;
    height: auto !important;
}


/* ==================================================
   카드 내부 이미지
   30 / 30 / 340 / 230
================================================== */

.scroll-panel-2
.mobility-card
.card-image {
    left: 1.5625vw !important;
    top: 1.5625vw !important;

    width: 17.708333vw !important;
    height: 11.979167vw !important;

    border-radius: 0.416667vw !important;
}


/* ==================================================
   제품명
================================================== */

.scroll-panel-2
.mobility-card
.card-product-name {
    left: 1.5625vw !important;
    top: 14.427083vw !important;

    width: 17.708333vw !important;
    height: 2.083333vw !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 {
    font-size: 1.5625vw !important;
    line-height: 2.083333vw !important;
}


/* ==================================================
   구분선
================================================== */

.scroll-panel-2
.mobility-card
.card-product-name::after {
    top: 2.65625vw !important;
    width: 17.708333vw !important;
}


/* ==================================================
   카드 제목
================================================== */

.scroll-panel-2
.mobility-card
.card-title {
    left: 1.5625vw !important;
    top: 17.65625vw !important;

    width: 17.708333vw !important;

    min-height: 1.927083vw !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 {
    font-size: 1.458333vw !important;
    line-height: 1.927083vw !important;
}


/* ==================================================
   카드 설명
================================================== */

.scroll-panel-2
.mobility-card
.card-desc {
    left: 1.5625vw !important;
    top: 20.260417vw !important;

    width: 17.708333vw !important;

    min-height: 2.395833vw !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 {
    font-size: 0.833333vw !important;
    line-height: 1.302083vw !important;
}


/* ==================================================
   태그
================================================== */

.scroll-panel-2
.mobility-card
.card-tag {
    top: 25vw !important;
    height: 2.083333vw !important;
}


.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 {
    font-size: 0.833333vw !important;
}


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

.scroll-panel-2
.mobility-card-1
.tag-1 {
    left: 1.5625vw !important;
    width: 4.6875vw !important;
}

.scroll-panel-2
.mobility-card-1
.tag-2 {
    left: 6.770833vw !important;
    width: 4.6875vw !important;
}

.scroll-panel-2
.mobility-card-1
.tag-3 {
    left: 11.979167vw !important;
    width: 4.6875vw !important;
}


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

.scroll-panel-2
.mobility-card-2
.tag-1 {
    left: 1.5625vw !important;
    width: 4.6875vw !important;
}

.scroll-panel-2
.mobility-card-2
.tag-2 {
    left: 6.770833vw !important;
    width: 6.770833vw !important;
}

.scroll-panel-2
.mobility-card-2
.tag-3 {
    left: 13.802083vw !important;
    width: 4.6875vw !important;
}


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

.scroll-panel-2
.mobility-card-3
.tag-1 {
    left: 1.5625vw !important;
    width: 4.6875vw !important;
}

.scroll-panel-2
.mobility-card-3
.tag-2 {
    left: 6.770833vw !important;
    width: 4.6875vw !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: 2.75vw !important;

margin-top: 0px !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: calc(var(--p3-image-start, 0px) + 247px) !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: calc(15.520833vw + 57px) !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;

}

/* ==================================================
AUTONOMOUS PLATFORM CARDS
XD 1920 기준

CARD 1
X330 / Y3400 / W615 / H550

CARD 2
X985 / Y3400 / W615 / H550

SECTION 3 시작 Y = 2800
카드 내부 Y = 3400 - 2800 = 600
================================================== */

/* ==================================================

PLATFORM CARD AREA
XD 1920 기준

CARD 1 : X330 / Y3400 / W615 / H550
CARD 2 : X985 / Y3400 / W615 / H550
GAP    : 40

SECTION 3 시작 Y = 2800
CARD Y = 3400 - 2800 = 600
================================================== */

.scroll-panel-3 .platform-cards {

position: absolute !important;

/*
 * ★ 카드 그룹 세로 위치
 * XD : section 내부 600px
 */
top: auto !important;

bottom: 152px !important;

/*
 * ★ CARD 1 시작 X = 330
 * 330 / 1920
 */
left: 17.1875vw !important;

/*
 * 615 + 40 + 615 = 1270
 */
width: 66.145833vw !important;
max-width: none !important;

/*
 * XD 카드 높이 = 550
 */
height: 28.645833vw !important;

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

display: flex !important;
flex-direction: row !important;

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

/*
 * XD 카드 사이 간격 = 40px
 */
gap: 2.083333vw !important;

transform: none !important;

overflow: visible !important;

z-index: 30 !important;

box-sizing: border-box !important;

}

/* ==================================================
Elementor platform-cards 내부 wrapper
================================================== */

.scroll-panel-3
.platform-cards

.e-con-inner {

position: relative !important;

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

height: 100% !important;

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

display: flex !important;
flex-direction: row !important;

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

gap: 2.083333vw !important;

box-sizing: border-box !important;

}

/* ==================================================
2. 카드 공통
XD W615 / H550
================================================== */

.scroll-panel-3 .platform-card {

/*
 * ★ 여기서는 absolute 사용하지 않음
 * 부모 flex가 두 카드를 나란히 배치
 */
position: relative !important;

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

/*
 * XD W615
 */
flex: 0 0 32.03125vw !important;

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

/*
 * XD H550
 */
height: 28.645833vw !important;
min-height: 0 !important;

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

background: #ffffff !important;

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

overflow: hidden !important;

box-sizing: border-box !important;

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

transform: none !important;

z-index: 1 !important;

}

/* CARD 1 */
.scroll-panel-3 .platform-card-1 {

position: relative !important;

left: auto !important;
top: auto !important;

margin: 0 !important;

}

/* CARD 2 */
.scroll-panel-3 .platform-card-2 {

position: relative !important;

left: auto !important;
top: auto !important;

margin: 0 !important;

}

/* ==================================================
3. 카드 내부 Elementor wrapper
================================================== */

.scroll-panel-3
.platform-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 기본 간격 제거 */
.scroll-panel-3
.platform-card
.elementor-widget {

margin: 0 !important;

}

/* ==================================================
4. 이미지

XD
X30 / Y30
W555 / H230
================================================== */

.scroll-panel-3 .platform-card-image {

position: absolute !important;

left: 4.878049% !important;
top: 5.454545% !important;

width: 90.243902% !important;
height: 41.818182% !important;

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

overflow: hidden !important;

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

}

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

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

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

}

.scroll-panel-3
.platform-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;

}

/* ==================================================
5. 제품명

거점 기반 Lv.4+
FODRo

XD X30 / Y277
================================================== */

.scroll-panel-3 .platform-product-name {

position: absolute !important;

left: 4.878049% !important;
top: 50.363636% !important;

width: 90.243902% !important;
height: 7.272727% !important;

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

}

.scroll-panel-3
.platform-product-name
.elementor-heading-title,
.scroll-panel-3
.platform-product-name
.elementor-widget-container,
.scroll-panel-3
.platform-product-name 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: #222222 !important;

white-space: nowrap !important;

}

/* ==================================================
6. 구분선

XD X30 / Y328 / W555 / H1
================================================== */

.scroll-panel-3 .platform-divider {

position: absolute !important;

left: 4.878049% !important;
top: 59.636364% !important;

width: 90.243902% !important;

height: 1px !important;

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

}

.scroll-panel-3
.platform-divider
.elementor-divider {

padding: 0 !important;

}

.scroll-panel-3
.platform-divider
.elementor-divider-separator {

display: block !important;

width: 100% !important;

border-top:
    1px solid #dddddd !important;

}

/* ==================================================
7. 한글 카드 제목

XD X30 / Y339
================================================== */

.scroll-panel-3 .platform-card-title {

position: absolute !important;

left: 4.878049% !important;
top: 61.636364% !important;

width: 90.243902% !important;

min-height: 6.727273% !important;

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

overflow: visible !important;

}

.scroll-panel-3
.platform-card-title
.elementor-heading-title,
.scroll-panel-3
.platform-card-title
.elementor-widget-container,
.scroll-panel-3
.platform-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: #222222 !important;

word-break: keep-all !important;

}

/* ==================================================
8. 설명

XD X30 / Y389
================================================== */

.scroll-panel-3 .platform-card-desc {

position: absolute !important;

left: 4.878049% !important;
top: 70.727273% !important;

width: 90.243902% !important;

height: auto !important;

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

overflow: visible !important;

}

.scroll-panel-3
.platform-card-desc
.elementor-heading-title,
.scroll-panel-3
.platform-card-desc
.elementor-widget-container,
.scroll-panel-3
.platform-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: #222222 !important;

word-break: keep-all !important;

}

/* ==================================================
9. 태그 공통

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

.scroll-panel-3 .platform-tag {

position: absolute !important;

top: 87.272727% !important;

height: 7.272727% !important;

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

overflow: visible !important;

white-space: nowrap !important;

}

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

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

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

display: flex !important;

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

background: #f3f3f3 !important;

border-radius: 100px !important;

box-sizing: border-box !important;

}

.scroll-panel-3
.platform-tag
.elementor-widget-container,
.scroll-panel-3
.platform-tag p {

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

font-size: min(0.729167vw, 14px) !important;

font-weight: 400 !important;

line-height: 1 !important;

color: #aaaaaa !important;

white-space: nowrap !important;

}

.scroll-panel-3
.platform-tag p {

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

}

/* ==================================================
10. CARD 1 태그

자율주행 / AI 비전 / 운행허가취득
================================================== */

.scroll-panel-3
.platform-card-1
.platform-tag-1 {

left: 4.878049% !important;
width: 14.634146% !important;

}

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

left: 21.138211% !important;
width: 14.634146% !important;

}

.scroll-panel-3
.platform-card-1
.platform-tag-3 {

left: 37.398374% !important;
width: 21.138211% !important;

}

/* ==================================================
11. CARD 2 태그

자율주행 / FOD 처리 / AI 비전
================================================== */

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

left: 4.878049% !important;
width: 14.634146% !important;

}

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

left: 21.138211% !important;
width: 14.634146% !important;

}

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

left: 37.398374% !important;
width: 14.634146% !important;

}

/* ==================================================
SECTION 3 - LARGE SCREEN SCALE FIX
1920px보다 큰 화면에서도
1920 디자인 비율 그대로 확대
================================================== */

@media (min-width: 1921px) {

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

.scroll-panel-3 .platform-title {
    width: 17.604167vw !important;
    max-width: none !important;
}

.scroll-panel-3
.platform-title
.elementor-heading-title {
    font-size: 3.333333vw !important;
    line-height: 4.427083vw !important;
}


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

.scroll-panel-3 .platform-desc {
    width: 43.020833vw !important;
    max-width: none !important;
}

.scroll-panel-3
.platform-desc
.elementor-heading-title,

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

.scroll-panel-3
.platform-desc p {
    font-size: 1.25vw !important;
    line-height: 1.302083vw !important;
}


/* ==================================================
   플랫폼 카드
   카드 크기 자체는 현재 vw라 그대로 사용
================================================== */

.scroll-panel-3 .platform-card {
    border-radius: 0.520833vw !important;
}


/* ==================================================
   카드 이미지 모서리
================================================== */

.scroll-panel-3 .platform-card-image {
    border-radius: 0.416667vw !important;
}


/* ==================================================
   제품명
   28px / 37px
================================================== */

.scroll-panel-3
.platform-product-name
.elementor-heading-title,

.scroll-panel-3
.platform-product-name
.elementor-widget-container,

.scroll-panel-3
.platform-product-name p {
    font-size: 1.458333vw !important;
    line-height: 1.927083vw !important;
}


/* ==================================================
   카드 한글 제목
   28px / 37px
================================================== */

.scroll-panel-3
.platform-card-title
.elementor-heading-title,

.scroll-panel-3
.platform-card-title
.elementor-widget-container,

.scroll-panel-3
.platform-card-title p {
    font-size: 1.458333vw !important;
    line-height: 1.927083vw !important;
}


/* ==================================================
   카드 설명
   16px / 25px
================================================== */

.scroll-panel-3
.platform-card-desc
.elementor-heading-title,

.scroll-panel-3
.platform-card-desc
.elementor-widget-container,

.scroll-panel-3
.platform-card-desc p {
    font-size: 0.833333vw !important;
    line-height: 1.302083vw !important;
}


/* ==================================================
   카드 태그
   14px
================================================== */

.scroll-panel-3
.platform-tag
.elementor-widget-container,

.scroll-panel-3
.platform-tag p {
    font-size: 0.729167vw !important;
}

}

/* ==================================================
SECTION 2 FIXED COPY + SECTION 3 COVER
================================================== */

/* 실제 두 번째 섹션 */
.scroll-panel-2 {
position: relative !important;
z-index: 0 !important;
}

/* 세 번째 섹션은 항상 두 번째보다 앞 */
.scroll-panel-3 {
position: relative !important;
z-index: 5 !important;
}

/*

JS가 만드는 두 번째 섹션의 고정 복제본

스크롤 중 실제 panel2 대신 화면에 정지해 있음
*/
.scroll-panel-2.panel2-frozen-copy {
position: fixed !important;

margin: 0 !important;

z-index: 1 !important;

transform: none !important;

pointer-events: none !important;

visibility: visible !important;
}

/* 복제본 안의 스크롤 애니메이션은 정지 */
.panel2-frozen-copy .mobility-card,
.panel2-frozen-copy .section2-title,
.panel2-frozen-copy .section2-desc {
transition: none !important;
}





/* ==================================================
SECTION 3 효과 완전 제거
================================================== */

.scroll-panel-3 .platform-title {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
transition: none !important;
}

.scroll-panel-3 .platform-desc {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
transition: none !important;
}

.scroll-panel-3 .platform-cards {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}

/* ==================================================
SECTION 4
네 번째 이미지 전체 너비
================================================== */

.scroll-panel-4 {

position: relative !important;

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

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

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

padding: 0 !important;

overflow: hidden !important;

}

/* Elementor 내부 폭 제한 제거 */
.scroll-panel-4 > .e-con-inner {

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

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

}

/* 이미지 위젯 */
.scroll-panel-4 .panel4-main-image,
.scroll-panel-4 .panel4-main-image .elementor-widget-container {

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

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

}

/* 실제 이미지 */
.scroll-panel-4 .panel4-main-image img {

display: block !important;

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

height: auto !important;

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

}

/* ==================================================
SECTION 3 → SECTION 4 GAP REMOVE
================================================== */

.scroll-panel-3 {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}

.scroll-panel-4 {
margin-top: 0 !important;
padding-top: 0 !important;
}

/* Elementor 내부 컨테이너 여백 제거 */
.scroll-panel-3 > .e-con-inner,
.scroll-panel-4 > .e-con-inner {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
gap: 0 !important;
}

/* 3번째 마지막 이미지 / 4번째 첫 이미지 */
.scroll-panel-3 .platform-main-image,
.scroll-panel-4 .panel4-main-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

.scroll-panel-3 .platform-main-image img,
.scroll-panel-4 .panel4-main-image img {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}

/* ==================================================
SECTION 3 → SECTION 4 흰 간격 제거
================================================== */

.scroll-panel-4 {
margin-top: -16px !important;
padding-top: 0 !important;
}

/* 4번째 이미지를 실제 화면상 위로 붙임 */
.scroll-panel-4 {
position: relative !important;
top: -16px !important;
z-index: 6 !important;
}

/* ==================================================
SECTION 3 FIXED COPY
SECTION 4가 SECTION 3를 덮기 위한 복제본
================================================== */

.scroll-panel-3.panel3-frozen-copy {
position: fixed !important;

margin: 0 !important;

z-index: 5 !important;

transform: none !important;

pointer-events: none !important;

visibility: visible !important;

}

/* 복제된 SECTION 3 내부 애니메이션 정지 */
.panel3-frozen-copy .platform-title,
.panel3-frozen-copy .platform-desc,
.panel3-frozen-copy .platform-cards {
transition: none !important;
}

/* ==================================================
SECTION 3 하단 간격 고정
================================================== */

/* 카드 → SECTION4 실제 간격 약 120px */
.scroll-panel-3 .platform-cards {
top: auto !important;
bottom: 152px !important;
}

/* 설명 끝 → 카드 시작 정확히 240px */
.scroll-panel-3 .platform-desc {
top: auto !important;

bottom:
    calc(
        152px
        + 28.645833vw
        + 240px
    ) !important;

}

















/* ==================================================
SECTION 3 TITLE / DESCRIPTION SCROLL REVEAL
================================================== */

/* 제목 */
.scroll-panel-3.panel3-text-reveal-enabled .platform-title {

opacity:
    var(--p3-title-opacity, 0) !important;

transform:
    translateX(-50%)
    translateY(
        var(--p3-title-y, -120px)
    ) !important;

transition:
    none !important;

will-change:
    transform,
    opacity;

}

/* 설명 */
.scroll-panel-3.panel3-text-reveal-enabled .platform-desc {

opacity:
    var(--p3-desc-opacity, 0) !important;

transform:
    translateX(-50%)
    translateY(
        var(--p3-desc-y, -150px)
    ) !important;

transition:
    none !important;

will-change:
    transform,
    opacity;

}

/* ==================================================
고정 복제된 SECTION 3은 항상 완전히 표시
================================================== */

.scroll-panel-3.panel3-frozen-copy .platform-title {

opacity: 1 !important;

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

}

.scroll-panel-3.panel3-frozen-copy .platform-desc {

opacity: 1 !important;

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

}

/* Elementor 편집 화면 */
.elementor-editor-active
.scroll-panel-3 .platform-title {

opacity: 1 !important;

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

}

.elementor-editor-active
.scroll-panel-3 .platform-desc {

opacity: 1 !important;

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

}
/* ==================================================
SECTION 3 CARD
위 → 아래로 점점 보여지는 효과
================================================== */

.scroll-panel-3.panel3-text-reveal-enabled .platform-cards {

opacity:
    var(--p3-cards-opacity, 0) !important;

/* 카드 위치는 움직이지 않음 */
transform:
    none !important;

/* 아래쪽을 100% 가렸다가 0%까지 열기 */
clip-path:
    inset(
        0
        0
        var(--p3-cards-clip, 100%)
        0
    ) !important;

transition:
    none !important;

will-change:
    clip-path,
    opacity;

}

/* 3 → 4 덮기용 복제본에서는 완전히 표시 */
.scroll-panel-3.panel3-frozen-copy .platform-cards {

opacity:
    1 !important;

transform:
    none !important;

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

}

/* Elementor 편집 화면 */
.elementor-editor-active
.scroll-panel-3 .platform-cards {

opacity:
    1 !important;

transform:
    none !important;

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

}

/* 복제된 SECTION 3에서는 카드 항상 표시 */
.scroll-panel-3.panel3-frozen-copy .platform-cards {

opacity: 1 !important;

transform:
    translateY(0) !important;

}

/* Elementor 편집 화면 */
.elementor-editor-active
.scroll-panel-3 .platform-cards {

opacity: 1 !important;

transform:
    translateY(0) !important;

}

/* ==================================================
SECTION 3
제목 하단 → 내용 상단 14px 고정
================================================== */

.scroll-panel-3 .platform-desc {
top: var(--p3-desc-top, 0px) !important;
bottom: auto !important;
}

/* ==================================================
SECTION 3 최종 세로 위치 연결
================================================== */

/* 이미지 시작 → 제목 상단 247px */
.scroll-panel-3 .platform-title {
top: calc(
var(--p3-image-start, 0px)
+ 247px
) !important;
}

/* 제목 하단 → 내용 상단 14px */
.scroll-panel-3 .platform-desc {
top: var(--p3-desc-top, 0px) !important;
bottom: auto !important;
}

/* 내용 하단 → 카드 상단 240px */
.scroll-panel-3 .platform-cards {
top: var(--p3-cards-top, 0px) !important;
bottom: auto !important;
}