/* 슬라이드가 보이는 영역 제한 */
.logo_slider_wrap {
    width: 100%;
    overflow: hidden; 
    padding: 20px 0;
}

/* 슬라이드 트랙 설정 */
.brand_logo_slide {
    display: flex;
    align-items: center;
    width: max-content; 
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 50px; 
    animation: scroll 30s linear infinite;
}

.brand_logo_slide li {
    flex-shrink: 0; 
}

/* 🟢 불투명도 50% 적용 부분 */
.brand_logo_slide img {
    height: 40px; 
    width: auto;
    object-fit: contain;
    opacity: 0.5; /* 기본 불투명도를 50%로 설정 */
    transition: opacity 0.3s ease; /* 투명도가 변할 때 부드럽게 전환되도록 애니메이션 추가 */
    cursor: pointer; /* 마우스 오버 시 클릭 가능한 요소처럼 보이게 포인터 변경 */
}

/* 🟢 마우스 오버 시 스톱 (핵심) */
/* wrap 영역에 마우스가 들어오면 슬라이드 애니메이션 일시 정지 */
/*.logo_slider_wrap:hover .brand_logo_slide {
    animation-play-state: paused; 
}*/

/* 🟢 (추천) 마우스를 올린 특정 로고만 선명하게 */
.brand_logo_slide img:hover {
    opacity: 1; /* 마우스를 직접 올린 이미지만 불투명도 100%로 복구 */
}

/* 무한 스크롤 애니메이션 Keyframes */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}



/* 부모 컨테이너: 전체 중앙 정렬 및 여백 */
.section1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 70px;
    padding: 0;
    background-color: #f7f9fc; /* 시안 특유의 밝은 회청색 배경 (필요 없으면 삭제 가능) */
}

/* 대제목 스타일 */
.section1_title {
    width: 100%;
    text-align: center;
    font-size: 64px;         /* 시안 비율에 맞춘 폰트 크기 */
    font-weight: 800;         /* 두껍게 무게감 부여 */
    color: #24243d;           /* 다크 차콜 메인 컬러 */
    line-height: 1.4;         /* 두 줄 간격 조정 */
    letter-spacing: -1px;     /* 글자 자간을 좁혀 완성도 업 */
    margin-bottom: 60px;      /* 소제목과의 간격 */
}

.section1_title span{
	font-size:70px;
	color:#1251ff;
}

/* 소제목 스타일 */
.section1_stitle {
    width: 100%;
    text-align: center;
    font-size: 24px;         /* 소제목에 적당한 크기 */
    font-weight: 500;         /* 중간 굵기 */
    color: #24243d;           
    letter-spacing: -0.5px;
}

/* 🔵 시안의 핵심: 파란색 포인트 컬러 정의 */
.blue_text {
    color: #1251ff !important; /* 시안의 선명한 선플라워 블루 색상 적용 */
    font-weight: 800;          /* 강조를 위해 조금 더 두껍게 설정 가능 */
}




/* 전체 섹션 배경 및 레이아웃 */
.section2 {
    width: 100%;
	margin-top:150px;
    display: flex;
    justify-content: center;
}

/* 카드들을 가로로 나열하는 컨테이너 */
.card_container {
    display: flex;
    gap: 30px; /* 카드 사이의 간격 */
    width: 100%;
    max-width: 1000px; /* 전체 최대 너비 제한 */
    padding: 0 20px;
    box-sizing: border-box;
}

/* 공통 카드 스타일 */
.card {
    flex: 1; /* 두 카드가 동일한 너비를 가짐 */
    position: relative; /* 아이콘 배치의 기준점 */
    padding: 60px 35px 35px 35px; /* 상단 패딩을 크게 주어 아이콘 공간 확보 */
    border-radius: 24px; /* 부드러운 라운드 표현 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04); /* 은은한 그림자 */
    box-sizing: border-box;
}

/* 둥근 아이콘 박스 공통 (핵심) */
.card_icon {
    position: absolute;
    top: -45px; /* 카드의 상단 테두리 위로 45px만큼 올림 */
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); /* 아이콘을 돋보이게 하는 그림자 */
}

.card_icon img {
    width: 100%; /* 아이콘 이미지 크기 */
    height: auto;
}

/* 타이틀 & 설명글 공통 */
.card_title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
    word-break: keep-all; /* 한글 단어가 깨지지 않게 줄바꿈 */
}

.card_desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 35px;
    letter-spacing: -0.3px;
    opacity: 0.9;
}

/* 하단 버튼 공통 */
.card_btn {
    width: 100%;
    display: flex;
    justify-content: space-between; /* 텍스트는 왼쪽, 화살표는 오른쪽에 배치 */
    align-items: center;
    padding: 18px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    margin-top: auto; /* 설명글 길이에 상관없이 버튼 위치가 하단에 고정됨 */
    transition: all 0.2s ease;
}

.card_btn .arrow {
    font-size: 18px;
    font-weight: 400;
}


/* -------------------------------------------
   🎨 각 카드별 개별 색상 및 디테일 정의
------------------------------------------- */

/* 1. 왼쪽 흰색 카드 */
.card_white {
    background-color: #ffffff;
}
.card_white .card_title {
    color: #0F45DC; /* 파란색 타이틀 */
}
.card_white .card_desc {
    color: #444444;
}
.card_white .card_btn {
    background-color: #0F45DC;
    color: #ffffff;
}
.card_white .card_btn:hover {
    background-color: #0044cc; /* 마우스 오버 시 약간 어둡게 */
}

/* 2. 오른쪽 파란색 카드 */
.card_blue {
    background-color: #0F45DC;
}
.card_blue .card_title {
    color: #ffffff;
}
.card_blue .card_desc {
    color: #ffffff;
}
.card_blue .card_btn {
    background-color: #ffffff;
    color: #0F45DC;
}
.card_blue .card_btn:hover {
    background-color: #f0f5ff; /* 마우스 오버 시 살짝 푸른빛이 도는 흰색 */
}



/* 전체 섹션 레이아웃 */
.section3 {
    width: 100%;
	margin:150px 0 200px;
    background-color: #f7f9fc; /* 이전 섹션들과 일치하는 배경색 */
    display: flex;
    justify-content: center;
}

/* 카드 3개를 묶는 가로 컨테이너 */
.feature_container {
    display: flex;
    gap: 25px;
    width: 100%;
    max-width: 1320px; /* 3개 카드가 여유롭게 들어가도록 1100px 설정 */
    padding: 0 20px;
    box-sizing: border-box;
}

/* 공통 특징 카드 스타일 */
.feature_card {
    flex: 1;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02); /* 시안의 은은한 그림자 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 카드 상단 헤더 (타이틀 & 아이콘 세로 정렬 맞춤) */
.card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.feature_title {
    font-size: 36px;
    font-weight: 800;
    color: #0055ff; /* 시안 고유의 메인 블루 컬러 */
    letter-spacing: -0.5px;
}

.header_icon {
    width: 50px; /* 시안 아이콘 비율에 맞춤 */
    height: auto;
}

/* 얇은 회색 구분선 */
.card_divider {
    border: none;
    border-top: 2px solid #e2e8f0;
    margin: 10px 0 0 0;
}

/* 카드 설명글 */
.feature_desc {
	margin-top:10px;
    font-size: 20px;
    font-weight: 500;
    color: #222222;
    line-height: 1.4;
    margin-bottom: 35px;
    word-break: keep-all;
}


/* -------------------------------------------
   📦 카드 1 전용: 배지(Badge) 스타일
------------------------------------------- */
.badge_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.badge_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f1f5f9; /* 연한 회색 배지 배경 */
    padding: 12px 16px;
    border-radius: 8px;
}

.badge_item .brand_name {
    font-size: 18px;
    color: #64748b; /* 중채도 회색 */
    font-weight: 600;
}

.badge_item .price_text {
    font-size: 22px;
    color: #0055ff;
    font-weight: 700;
}

.more_text {
    text-align: center;
    font-size: 18px;
    color: #94a3b8;
    margin-top: 20px;
    font-weight: 500;
}


/* -------------------------------------------
   🔹 카드 2, 3 공통: 리스트(List) 스타일
------------------------------------------- */
.feature_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px; /* 리스트 간격 */
}

.feature_list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 시안의 파란색 원형 불릿 직접 구현 */
.list_dot {
    width: 26px;
    height: 26px;
    background-color: #1251ff50; /* 밝은 블루 원형 */
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

/* 원형 내부의 미세한 체크/점 디테일 표현 (선택사항, 깔끔하게 중앙 공백 연출) */
.list_dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-color: #1251ff;
    border-radius: 50%;
}

.list_text {
    font-size: 22px;
    font-weight: 600;
    color: #333333;
}

/* 카드 3번의 흐린 괄호 설명문 */
.sub_gray {
    font-size: 18px;
    color: #94a3b8; /* 흐린 회색 처리 */
    font-weight: 400;
    margin-left: 4px;
}



/* 섹션 전체 레이아웃 */
.section4 {
    width: 100%;
    padding: 80px 0;
    background-color: #ffffff;
    text-align: center;
    overflow: hidden;
}

/* 상단 타이틀 배치 */
.sec4_header { margin-bottom: 50px; }
.sec4_title { font-size: 64px; font-weight: 800; color: #1251ff; margin-bottom: 20px; letter-spacing: -1px; }
.sec4_subtitle { font-size: 24px; font-weight: 500; color: #24243d; margin-bottom: 0px; }
.sec4_notice { font-size: 18px; color: #667788; }
.sec4_notice span{font-weight:600;}

/* ↔️ 가로 100% 슬라이더 영역 */
.car_slider_wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* 2. 슬라이더 트랙 초기화 및 중앙 정렬 */
.car_slider .slick-track { 
    display: flex !important; 
    align-items: center; 
    padding: 60px 0; /* 상하 여백 확보 */
}

/* 3. 각 슬라이드 아이템 (간격 조정) */
.car_item { 
    padding: 0 10px !important; /* 💡 차량 간의 공간을 좁게 설정 (좌우 10px) */
    outline: none; 
}

/* 4. 카드 디자인 (가로로 길고 납작하게) */
.car_card {
    width: 100%; 
    max-width: 482px; /* 💡 가로 크기 확장 */
    height: 180px;    /* 💡 높이를 낮춰 납작하게 */
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    overflow: hidden;
}

/* 5. 이미지 박스 (이미지를 가로로 크게) */
.img_box { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 10px; 
}

.img_box img { 
    max-width: 80% !important; /* 💡 이미지 가로폭 극대화 */
    height: auto; 
    object-fit: contain;
}

/* 6. 중앙 메인 카드 확대 효과 */
.car_slider .slick-slide.slick-center .car_card {
    height: 300px; /* 메인 카드 높이 */
    transform: scale(1.05); /* 약간 확대 */
    border-color: #cbd5e1;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* 7. 중앙 카드 정보창 (나타나기) */
.info_box {
    width: 100%; height: 0; opacity: 0; overflow: hidden;
    background: #f8fafc;
    transition: all 0.3s ease;
}
.car_slider .slick-slide.slick-center .info_box { height: 70px; opacity: 1; }

/* 8. 가짜 슬라이드(복제본) 강제 비활성화 */
.car_slider .slick-slide.slick-cloned .car_card {
    transform: scale(1);
}

/* 1. 기존 중앙 카드 이미지 transition에 transform 포함 확인
      (기존 코드에 이미 있으면 아래로 덮어씌워짐) */
.car_slider .slick-slide.slick-center:not(.slick-cloned) .img_box img {
    transform: scale(1.05);               /* 기본 활성 상태 크기 */
    transition: transform 0.28s ease-in-out; /* 부드러운 전환 */
}
 
/* 2. 가운데 카드(진짜)에 마우스 올렸을 때만 이미지 추가 확대 */
.car_slider .slick-slide.slick-center:not(.slick-cloned) .car_card:hover .img_box img {
    transform: scale(1.18);  /* 호버 시 확대 배율 — 원하는 값으로 조절 */
}

/* 슬라이더 내부 트랙 하드웨어 가속 */
.car_slider .slick-track {
    display: flex !important;
    align-items: center; 
    will-change: transform;
}

.car_item {
    padding: 40px 30px; 
    display: flex !important;
    justify-content: center;
    align-items: center;
    outline: none;
    box-sizing: border-box;
}

.car_item {
    padding: 40px 30px; 
    display: flex !important;
    justify-content: center;
    align-items: center;
    outline: none;
    box-sizing: border-box;
}

/* ⬜ 기본 카드 디자인 (중앙이 아닐 때) */
.car_card {
    width: 100%; 
    max-width: 482px; 
    height: 300px; 
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    
    /* 변화 타이밍을 일관되게 0.25초로 리셋하여 엇박자 방지 */
    transition: transform 0.25s ease-in-out, 
                height 0.25s ease-in-out, 
                box-shadow 0.25s ease-in-out,
                border-color 0.25s ease-in-out;
}

/* 🔘 [버그 해결 치트키] 가짜 복제본(.slick-cloned)이 중앙을 지날 때는 절대로 커지지 못하도록 완전 차단 */
.car_slider .slick-slide.slick-cloned.slick-center .car_card {
    height: 300px !important;
    box-shadow: none !important;
    border-color: #e2e8f0 !important;
    transform: scale(1) !important;
}
.car_slider .slick-slide.slick-cloned.slick-center .info_box {
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 🔘 오직 '진짜' 중앙 메인 카드일 때만 부드럽게 활성화 (:not 사용) */
.car_slider .slick-slide.slick-center:not(.slick-cloned) .car_card {
    height: 400px; 
    border-color: #cbd5e1;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.06);
    transform: scale(1.02);
}

/* 🖼️ 이미지 영역 크기 제어 */
.img_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.img_box img {
    max-width: 85%;
    height: auto;
    object-fit: contain;
    transition: transform 0.25s ease-in-out;
}

/* 진짜 중앙 카드의 이미지박스만 확대 */
.car_slider .slick-slide.slick-center:not(.slick-cloned) .img_box {
    height: 300px; 
}
.car_slider .slick-slide.slick-center:not(.slick-cloned) .img_box img {
    transform: scale(1.05); 
}

/* 🔘 하단 정보 박스 */
.info_box {
    width: 100%;
    height: 0;
    background-color: #eef1f6; 
    padding: 0 20px;
    gap: 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease-in-out;
}

/* 진짜 중앙 카드일 때만 아래 정보창 오픈 */
.car_slider .slick-slide.slick-center:not(.slick-cloned) .info_box {
    height: 100px;
    opacity: 1;
    visibility: visible;
    border-top: 1px solid #e2e8f0;
}

.info_left { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.car_name { font-size: 22px; font-weight: 500; color: #1e293b; white-space: nowrap; }
.car_km { font-size: 15px; color: #64748b; font-weight: 500; }
.info_right { font-size: 22px; font-weight: 800; color: #1251ff; white-space: nowrap; flex-shrink: 0; }

/* 작은 데스크톱(약 1025~1366px): 3장 노출이라 중앙 카드가 좁음 → 정보 글자 축소로 줄바꿈 방지 */
@media (min-width: 1025px) and (max-width: 1366px) {
    .car_name { font-size: 18px; }
    .car_km { font-size: 14px; }
    .info_right { font-size: 18px; }
}


/* -------------------------------------------
   🆕 섹션 4 하단 안내 및 버튼 스타일
------------------------------------------- */
.sec4_footer {
    width: 100%;
    text-align: center;
    margin-top: 100px; /* 슬라이더와의 간격 */
    padding: 0 20px;
    box-sizing: border-box;
}

.guide_text {
    font-size: 24px;
    color: #24243d; /* sec4_subtitle과 조화되는 색상 */
    margin-bottom: 80px;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.check_btn {
    display: inline-block;
	width:360px;
	height:72px;
    background-color: #0055ff; /* 메인 블루 컬러 */
    color: #ffffff;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 10px 20px rgba(0, 85, 255, 0.2);
}

.check_btn:hover {
    background-color: #0044cc; /* 호버 시 살짝 어둡게 */
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 12px 25px rgba(0, 85, 255, 0.3);
}

/* 모바일 환경 대응 (필요 시) */
@media (max-width: 768px) {
    .check_btn {
        width: 90%;
        padding: 16px 0;
    }
}




/* 프로세스 섹션 공통 */
.process_section { 
    padding: 100px 20px; 
    background-color: #f8f9fb; 
    width: 100%;
    box-sizing: border-box; /* width:100% + 좌우 padding 으로 인한 가로 넘침 방지 */
}
.process_header { text-align: center; margin-bottom: 60px; }
.process_title { font-size: 64px; font-weight: 800; color: #1251ff; margin-bottom: 12px; }
.process_subtitle { font-size: 24px; color: #24243d; }

/* 수정된 2x2 그리드 레이아웃 */
.step_container { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
    max-width: 1320px; 
    margin: 0 auto; /* 중앙 정렬 유지 */
    justify-items: start; /* 각 그리드 아이템을 좌측 정렬 */
    align-items: start;   /* 각 그리드 아이템을 상단 정렬 */
}

/* STEP 카드 스타일 */
.step_card {
	width:100%;
	max-width:568px;
	height:88px;
    background: #ffffff;
	margin-bottom:30px;
    padding: 16px 40px; /* STEP 라벨 공간을 위해 상단 패딩 증가 */
    border-radius: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border: 1px solid #f0f0f0;
    position: relative; /* STEP 라벨 배치를 위한 기준점 */
    transition: all 0.3s ease; /* 호버 효과 부드럽게 */
}

/* 마우스 오버 시 그림자 효과 */
.step_card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); /* 강한 그림자 */
    transform: translateY(-5px); /* 살짝 위로 떠오르는 효과 */
    border-color: transparent;
}

/* STEP 01 등 라벨 (좌측 상단 겹침 배치) */
.step_label {
    position: absolute;
    top: -12px;      /* 카드 상단 위로 살짝 올라감 */
    left: 20px;      /* 좌측에서 20px 위치 */
    background: #0055ff;
    color: #fff;
	width:100px;
	height:35px;
    display: flex;
    align-items: center;
	justify-content:center;
    border-radius: 20px;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 85, 255, 0.3); /* 라벨 자체 그림자 */
}

/* 텍스트 및 아이콘 정렬 유지 */
.step_content { flex-grow: 1; margin-top: 30px; }
.step_title { font-size: 28px; font-weight: 800; margin-bottom: 8px; color: #1e293b; }
.step_desc { font-size: 18px; color: #94a3b8; line-height: 1.4; }
.step_icon { margin-left: 20px; }




/* 1. 섹션 전체 컨테이너: 링이 움직일 영역을 제한하고 레이어 기준점 설정 */
.compete_section {
    position: relative;
    padding: 100px 0;
    overflow: hidden; /* 영역 밖으로 나가는 링 부분 숨김 */
    background: #ffffff;
}

/* 2. 회전하는 링: 절대 위치로 고정하고 z-index를 낮춰 배경으로 배치 */
.rotating_ring {
    position: absolute;
    top: 50px;       /* 우측 상단 위치 조정 */
    right: -100px;   /* 우측으로 살짝 튀어나오게 설정 */
    z-index: 1;      /* 콘텐츠 박스(z-index: 2)보다 아래로 배치 */
    pointer-events: none; /* 마우스 클릭이 박스로 전달되게 함 */
    transform-origin: center center;        /* 제자리에서 회전 */
    animation: rotate_infinite 20s linear infinite;
    will-change: transform;                 /* 회전 부드럽게 */
    opacity: 0.4;    /* 배경 느낌을 위해 투명도 설정 */
}

/* 3. 콘텐츠 랩: z-index를 높여 전면에 배치 */
.compete_wrap {
    position: relative;
    z-index: 2;      /* 링보다 앞쪽에 위치 */
    max-width: 1320px;
    margin: 0 auto;
}

/* 4. 회전 애니메이션 정의 */
@keyframes rotate_infinite {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 섹션 타이틀 영역 */
.compete_wrap .section_title {
    font-size: 64px;
    font-weight: 800;
    color: #1251ff;
    text-align: center;
    margin-bottom: 15px;
    line-height: 1.3;
}

.compete_wrap .section_desc {
    font-size: 24px;
    color: #24243d;
    text-align: center;
    margin-bottom: 50px; /* 아래 카드들과의 간격 */
    font-weight: 400;
}



/* 컨테이너 정렬 설정 */
.compete_container { 
    display: flex; 
    align-items: stretch; /* 이 속성이 중요합니다. 자식들의 높이를 동일하게 맞춥니다. */
    gap: 28px;            /* PROVEN EXPERIENCE 카드와 우측 박스 사이 여백 */
    margin-top: 50px; 
}

/* 좌측 큰 카드 설정 */
.large_card { 
    width: 350px; 
    background: #e2e8f0; 
    padding: 40px; 
    border-radius: 20px; 
    display: flex;
    flex-direction: column; 
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
    cursor: pointer;
}

/* 호버 시 짙은 회색으로 변경 */
.large_card:hover {
    background-color: #24243d;
}


.large_card .card_sub_title { font-size: 20px; color: #24243d; margin-bottom: 20px; }
.large_card .count_value { font-size: 40px; font-weight: 800; color: #0055ff; }



/* 호버 시 내부 텍스트 색상 반전 */
.large_card:hover h3, 
.large_card:hover h4, 
.large_card:hover p, 
.large_card:hover .count_label,
.large_card:hover .count_value{
    color: #ffffff !important;
}

/* 이미지와 유사한 보더 라인 추가 */
.large_card h3 {
    border-bottom: 1px solid #cbd5e1;
    padding-bottom: 20px;
    color: #24243d; /* 기본 짙은 회색 */
}

.large_card h4{
	font-size:24px;
	color:#24243d;
	font-weight:500;
	margin-top:20px;
}

.large_card .count_label{
	margin-top:120px;
	font-size:28px;
	color:#212121;
	font-weight:500;
}

.card_main_desc{
	font-size:20px;
	color:#808080;
	margin-top:10px;
}

/* 우측 그리드 높이 확보 */
.right_grid { 
    flex: 1; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
	background:#fff;
	z-index:2;
}

/* 수치 카드 호버 효과 */
.hover_card { 
    background: #fff; padding: 30px; border-radius: 20px; transition: 0.3s; cursor: pointer; border: 1px solid #eee;
}
.hover_card:hover { background: #24243d; }
.hover_card:hover .card_title, 
.hover_card:hover .card_value, 
.hover_card:hover .card_desc { color: #fff !important; }

/* 전문딜러 카드 */
.dealer_card { 
    grid-column: span 2; background: #5f6b7d; padding: 30px; border-radius: 20px; 
    display: flex; justify-content: space-between; align-items: center; color: #fff;
}
.card_value { font-size: 32px; font-weight: 700; margin: 10px 0; color: #0055ff; }

.dealer_card .card_value{color:#fff;}





.banner-section {
  width: 100%;
  height: 1080px;
  box-sizing: border-box;
  background: url('/images/footer_bg.png') no-repeat center center / cover;
  display: flex;
  justify-content: flex-start; /* 텍스트를 좌측 영역에 배치 */
  align-items: center;
  color: #ffffff;
  position: relative;
  text-align: center;
}

.content-wrapper {
  /* 좌측 패딩으로 위치 조정 → 화면 밖으로 넘치지 않음 (값 조절로 좌우 이동 가능) */
  margin-left: 0;
  padding-left: clamp(40px, 8%, 140px);
  max-width: none;
  text-align: left;          /* 시안처럼 왼쪽 정렬 */
  box-sizing: border-box;
}

.content-wrapper h1 { font-size: 64px; margin-bottom: 20px;font-weight:500; white-space: nowrap; }
.content-wrapper p { font-size: 24px; margin-bottom: 40px; white-space: nowrap; }

.button-group{
	margin-top:140px;
}


.btn {
  display: block;
  width: 360px;
  height:72px;
  margin: 0 0 15px 0;       /* 왼쪽 정렬(가운데 정렬 해제) */
  border-radius:5px;
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  font-size:24px;
}

.contact-info { margin-top: 20px; font-size: 18px; opacity: 0.8; }

.top-btn {
  position: absolute;
  right: 50px;
  bottom: 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  cursor: pointer;
  font-size: 24px;
  color: #000;
}













/* 전체 레이아웃 */
.inquiry_wrap { 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 0 20px; 
    min-height: 100vh; 
    padding-bottom: 100px;
}

.page_info { text-align: left; margin-bottom: 100px;min-height: 250px; /* 제목과 서브텍스트가 들어갈 만큼의 높이를 미리 지정 */ }
.breadcrumb { color: #666d72; margin-bottom: 140px; font-size: 18px; display: flex; align-items: center; }
.breadcrumb img { margin: 0 10px; }

.main_title { font-size: 64px; font-weight: 700; margin-bottom: 30px; text-align: center; color: #24243d; }
.sub_text { text-align: center; font-size: 24px; color: #555; }
.blue_text { color: #1251ff; }

/* 폼 박스 스타일 */
.form_box { background: #fff; padding: 40px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); margin-bottom: 80px; }
.form_box.form_box_end{margin-bottom:0;}
.box_title { font-size: 28px; font-weight: 700; margin-bottom: 20px; color: #24243d; }
.divider { border: 0; border-top: 1px solid #eee; margin-bottom: 30px; }

/* 입력 그룹 최적화 */
.input_group { margin-bottom: 25px; }
.input_group label { display: block; font-weight: 600; margin-bottom: 10px; font-size: 20px; color: #24243d; }
.input_group label.checkmark-container, .input_group label.radio_text{display:inline-block;font-weight:400;}
.required { color: #0055ff; }

/* 입력창 너비 고정 (calc 오류 수정 및 박스모델 최적화) */
.input_group input { 
    width: 100%; 
    height: 55px; 
    padding: 0 20px; 
    border: 1px solid #ddd; 
    border-radius: 10px; 
    background: #f9f9f9; 
    font-size: 18px; 
    color: #24243d;
    box-sizing: border-box; /* 중요: 패딩이 너비에 포함되도록 설정 */
}


.input_group select { 
    width: calc(100% - 2px); 
    height: 53px; 
    padding: 0 20px; 
    border: 1px solid #ddd; 
    border-radius: 10px; 
    background: #f9f9f9; 
    font-size: 18px; 
    color: #24243d;
    box-sizing: border-box; /* 중요: 패딩이 너비에 포함되도록 설정 */
}


.input_group textarea { 
    width: calc(100% - 2px); 
    height: 150px; 
    padding: 10px 20px; 
    border: 1px solid #ddd; 
    border-radius: 10px; 
    background: #f9f9f9; 
    font-size: 18px; 
    color: #24243d;
    box-sizing: border-box; /* 중요: 패딩이 너비에 포함되도록 설정 */
}

/* 오타 수정 (placehoder -> placeholder) */
.input_group input::placeholder, .input_group textarea::placeholder { color: #808080; }

.helper_text { font-size: 0.85rem; color: #888; margin-top: 8px; }

/* style.css 최상단에 추가 */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
}
[data-aos].aos-animate {
    opacity: 1;
}


/* 동의 박스 스타일 */
.agree_section { margin-top: 20px; }
.agree_box { background: #f8f9fa; padding: 0 30px; border-radius: 20px; }
.agree_content { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 20px; background: #fff; padding: 20px; border-radius: 10px; border: 1px solid #ddd; height: 100px; overflow-y: auto; }

.checkbox_group { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer;font-size:24px;font-weight:500; }

.btn_wrap { 
    display: flex; 
    gap: 15px; /* 버튼 사이의 간격 */
    margin-top: 80px; 
}

/* 취소 버튼 스타일 */
.cancel_btn { 
    flex: 1; /* 너비를 균등하게 분배 */
    height: 70px; 
    background: #e9ecef; /* 연한 회색 배경 */
    color: #495057; 
    border: none; 
    border-radius: 15px; 
    font-size: 20px; 
    font-weight: 700; 
    cursor: pointer;
    transition: background 0.3s;
}
.cancel_btn:hover { background: #dee2e6; }

/* 문의 접수 버튼 스타일 */
.submit_btn { 
    flex: 1; /* 취소 버튼보다 조금 더 길게 설정하고 싶을 경우 */
    height: 70px; 
    background: #1251ff; 
    color: #fff; 
    border: none; 
    border-radius: 15px; 
    font-size: 20px; 
    font-weight: 700; 
    cursor: pointer;
    transition: background 0.3s;
}
.submit_btn:hover { background: #0036cc; }

.customer_tel{
	margin-top:170px;
	text-align:center;
	font-size:18px;
	color:#808080;
}

/* =====================================================================
   📱 반응형(Responsive) 추가 스타일
   - 기존 데스크톱 디자인은 그대로 두고, 화면 폭에 따라 재배치/축소
   - 주요 분기점: 1280px(노트북) / 1024px(태블릿) / 768px(모바일) / 480px(소형)
===================================================================== */

/* 모든 미디어 영역이 가로 넘침 없이 부모 안에서 줄어들도록 보강 */
img { max-width: 100%; }

/* 페이지 전체의 의도치 않은 가로 스크롤 방지(안전장치) */
html, body { overflow-x: hidden; }

/* ---------------------------------------------------------------------
   💻 1280px 이하 : 배너의 좌측 강제 이동(margin-left:-900px) 해제
--------------------------------------------------------------------- */
@media (max-width: 1280px) {
    .content-wrapper { margin-left: 0; padding-left: 40px; }

    .section1_title { font-size: 52px; }
    .section1_title span { font-size: 58px; }

    .compete_wrap .section_title,
    .sec4_title,
    .process_title,
    .main_title { font-size: 52px; }
}

/* ---------------------------------------------------------------------
   📲 1024px 이하 : 태블릿 - 3단/2단 레이아웃을 세로로 정리
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* 섹션 간 큰 여백 축소 */
    .section2 { margin-top: 90px; }
    .section3 { margin: 90px 0 120px; }
    .compete_section { padding: 70px 20px; }
    .process_section { padding: 70px 20px; }

    /* 특징 카드 3개 → 세로 정렬 */
    .feature_container { flex-direction: column; gap: 20px; }
    .feature_title { font-size: 30px; }
    .feature_desc { font-size: 18px; }
    .list_text { font-size: 18px; }

    /* 타이틀 축소 */
    .section1_title { font-size: 44px; line-height: 1.3; }
    .section1_title span { font-size: 48px; }
    .section1_stitle { font-size: 20px; }
    .compete_wrap .section_title,
    .sec4_title,
    .process_title { font-size: 44px; }
    .compete_wrap .section_desc,
    .sec4_subtitle,
    .process_subtitle { font-size: 20px; }

    /* 경쟁력 섹션: 좌측 큰 카드 + 우측 그리드 → 세로 적층 */
    .compete_container { flex-direction: column; gap: 20px; margin-top: 30px; } /* 큰 카드 ↔ 그리드 간격을 카드 사이 간격과 통일 */
    .large_card { width: 100%; box-sizing: border-box; } /* padding 포함 폭 계산 → 흰색 카드와 동일 너비로 정렬 */
    .large_card .count_label { margin-top: 40px; }

    /* 신청 과정: 고정폭(568px) 카드 → 부모폭에 맞춤 */
    .step_card { width: 100%; height: auto; padding: 30px 28px 24px; }
    .step_content { margin-top: 0; } /* 데스크톱 라벨 회피용 여백 제거 → 모바일에서 세로 정렬·높이 정상화 */
    .step_title { font-size: 24px; }
}

/* ---------------------------------------------------------------------
   📱 768px 이하 : 모바일 - 모든 다단 구성을 1단으로
--------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* 로고 슬라이더 간격/크기 축소 */
    .brand_logo_slide { gap: 30px; }
    .brand_logo_slide img { height: 30px; }

    /* 히어로 */
    .section1 { margin-top: 40px; }
    .section1_title { font-size: 34px; margin-bottom: 40px; }
    .section1_title span { font-size: 38px; }
    .section1_stitle { font-size: 17px; padding: 0 16px; box-sizing: border-box; }

    /* 상단 안내 카드 2개 → 세로(아이콘이 위로 -45px 겹치므로 간격 넉넉히) */
    .section2 { margin-top: 70px; }
    .card_container { flex-direction: column; gap: 70px; }
    .card { padding: 55px 24px 28px; }
    .card_title { font-size: 21px; }

    /* 특징 카드 */
    .section3 { margin: 70px 0 90px; }

    /* 공통 섹션 타이틀 */
    .compete_wrap .section_title,
    .sec4_title,
    .process_title,
    .main_title { font-size: 34px; }
    .compete_wrap .section_desc,
    .sec4_subtitle,
    .process_subtitle,
    .sub_text { font-size: 17px; }
    .sec4_notice { font-size: 15px; }

    /* 차량 슬라이더: 옆 카드는 낮게, 중앙 카드는 높게 → 중앙 강조 */
    .car_card { height: 260px; }
    .car_slider .slick-slide.slick-center:not(.slick-cloned) .car_card { height: 320px; }
    .info_box { padding: 0 18px; }
    .car_name { font-size: 18px; white-space: nowrap; } /* 차량명 한 줄 고정(줄바꿈 방지) */
    .info_right { font-size: 20px; white-space: nowrap; }
    .car_km { font-size: 14px; }
    .sec4_footer { margin-top: 50px; } /* 슬라이더와 안내문 사이 과한 여백 축소 */
    .guide_text { font-size: 18px; margin-bottom: 40px; }
    .check_btn { width: 90%; max-width: 360px; height: 60px; font-size: 18px; line-height: 60px; }
    .check_btn img { vertical-align: middle; }

    /* 신청 과정: 2x2 그리드 → 1열 */
    .step_container { grid-template-columns: 1fr; gap: 16px; }
    .step_card { margin-bottom: 20px; padding: 28px 22px 22px; }
    .step_title { font-size: 22px; margin-bottom: 6px; }
    .step_desc { font-size: 14px; line-height: 1.4; margin: 0; word-break: keep-all; }
    .step_content { margin-right: 8px; }
    .step_icon { margin-left: 12px; flex-shrink: 0; }
    .step_icon img { width: 44px; height: auto; }

    /* 경쟁력 우측 그리드: 2열 → 1열, 딜러카드 span 해제 */
    .right_grid { grid-template-columns: 1fr; }
    .rotating_ring { display: none; } /* 회전 링은 모바일에서만 숨김(데스크톱·태블릿은 계속 회전 노출) */
    .dealer_card { grid-column: auto; flex-direction: column; text-align: center; gap: 16px; }
    .large_card { padding: 28px; }
    .large_card h4 { font-size: 20px; }
    .large_card .count_value { font-size: 32px; }
    .card_value { font-size: 26px; }

    /* 배너: 고정 높이(1080px) 해제 + 텍스트 중앙 정렬 */
    .banner-section { height: auto; min-height: 600px; padding: 80px 0; justify-content: center; }
    .content-wrapper { margin-left: 0; padding-left: 0; max-width: 100%; text-align: center; }
    .content-wrapper h1 { font-size: 34px; white-space: normal; }
    .content-wrapper p { font-size: 17px; white-space: normal; }
    .button-group { margin-top: 50px; }
    .btn { width: 90%; max-width: 360px; height: 60px; font-size: 18px; margin: 0 auto 15px; }
    .top-btn { right: 20px; bottom: 20px; }

    /* 문의접수 폼 */
    .page_info { margin-bottom: 50px; min-height: auto; }
    .breadcrumb { margin-bottom: 40px; font-size: 15px; }
    .form_box { padding: 26px 20px; margin-bottom: 40px; }
    .box_title { font-size: 22px; }
    .input_group label { font-size: 17px; }
    .input_group input,
    .input_group select,
    .input_group textarea { font-size: 16px; }
    .checkbox_group { font-size: 17px; }
    .btn_wrap { margin-top: 40px; }
    .cancel_btn, .submit_btn { height: 58px; font-size: 17px; }
    .customer_tel { margin-top: 60px; }
}

/* ---------------------------------------------------------------------
   📱 480px 이하 : 소형 모바일 - 폰트 추가 축소
--------------------------------------------------------------------- */
@media (max-width: 480px) {
    .section1_title { font-size: 28px; }
    .section1_title span { font-size: 31px; }

    .compete_wrap .section_title,
    .sec4_title,
    .process_title,
    .main_title { font-size: 28px; }

    .feature_title { font-size: 26px; }
    .car_name { font-size: 20px; }
    .info_right { font-size: 21px; }

    .content-wrapper h1 { font-size: 28px; }

    /* 라디오/체크 정렬 줄바꿈 여유 */
    .radio_text { display: inline-block; }
}


/* =====================================================================
   '간편한 신청 과정' 데스크톱/태블릿: 카드 폭 648px 2열 (중앙 정렬)
===================================================================== */
@media (min-width: 769px) {
    .process_title { font-size: 44px; margin-bottom: 10px; }
    .process_subtitle { font-size: 18px; }

    /* 2열 카드: 각 648px (= (1336 - 40) / 2), 가운데 정렬 */
    .step_container { max-width: 1336px; gap: 30px 40px; justify-items: stretch; }

    /* 카드 폭 648px */
    .step_card { width: 100%; max-width: 648px; height: auto; padding: 26px 36px; margin-bottom: 0; }

    /* STEP 라벨 */
    .step_label { width: 88px; height: 30px; font-size: 14px; top: -12px; left: 24px; border-radius: 15px; }

    /* 내용/아이콘 (박스 폭에 맞춰 적당히 채움) */
    .step_content { margin-top: 0; }
    .step_title { font-size: 26px; margin: 0 0 6px; }
    .step_desc { font-size: 16px; line-height: 1.4; margin: 0; }
    .step_icon { margin-left: 20px; }
    .step_icon img { width: 56px; height: auto; }
}