/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */


header{}
header div.head{ position: relative; display: flex; justify-content: space-between; align-items: center; height: 100px; padding: 0 10px;}
header div.head div.logo_wrap{ width: 250px; margin: 0 auto;}
header div.head div.logo_wrap img{ display: block; width: 100%;}
header div.head div.search_wrap{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
header div.head div.search_wrap a{ font-size: 32px;}
header nav{ padding: 0 10px 10px;}
header nav ul{ display: flex; flex-wrap: wrap; gap: 5px;}
header nav ul li{ width: calc((100% - 10px) / 3);}
header nav ul li a{ display: block; width: 100%; padding: 10px 0; font-weight: bold; font-size: 14px; color: #fff; text-align: center; border-radius: 5px; background: #d50527;}

section.visual img{ display: block; width: 100%;}

section.counsel_box{ padding: 40px 10px 0;}
section.counsel_box h2{ margin-bottom: 5px; font-size: 22px; text-align: center;}
section.counsel_box p.desc{ margin-bottom: 12px; text-align: center;}
section.counsel_box div.info_wrap{ padding: 15px 50px; border: 2px solid #d50527; border-radius: 15px;}
section.counsel_box div.info_wrap div.inp_wrap input{ display: block; width: 100%; height: 43px; padding: 0 8px; margin-bottom: 5px; border: 1px solid #d50527; border-radius: 5px;}
section.counsel_box div.info_wrap div.tel_wrap{ display: flex; gap: 5px; margin-bottom: 5px;}
section.counsel_box div.info_wrap div.tel_wrap select{ width: calc((100% - 10px) / 3); height: 43px; padding: 0 8px; border: 1px solid #d50527; border-radius: 5px;}
section.counsel_box div.info_wrap div.tel_wrap input{ width: calc((100% - 10px) / 3); height: 43px; padding: 0 8px; border: 1px solid #d50527; border-radius: 5px;}
section.counsel_box div.info_wrap div.send input{ display: block; width: 100%; height: 49px; font-weight: bold; font-size: 20px; color: #fff; border-radius: 5px; background: #d50527;}



section.youtube{ padding: 40px 10px 0;}
section.youtube h2{ margin-bottom: 20px; font-size: 22px; text-align: center;}
section.youtube h2 span{ color: #d50527;}

    /* [반응형 핵심] 영상 감싸는 박스 */
    .video_container {
        position: relative;
        width: 100%;              /* 가로 꽉 차게 */
        max-width: 1000px;        /* PC에서 너무 커지지 않게 최대폭 제한 (원하는대로 조절 가능) */
        margin: 0 auto;           /* 가운데 정렬 */
        padding-bottom: 56.25%;   /* 16:9 비율 유지 (높이 자동 조절) */
        height: 0;
        overflow: hidden;
        border-radius: 10px;      /* 모서리 둥글게 */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        background: #000;
    }

    /* 실제 아이프레임 */
    .video_container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* [중요] 모바일 반응형 강제 적용 (미디어 쿼리) */
    /* 화면이 1024px보다 작아지면 inner_wrap의 고정폭을 무시하고 100%로 변경 */
    @media (max-width: 1024px) {
        section.youtube .inner_wrap {
            width: 100% !important;  /* 기존 고정 너비 강제 해제 */
            padding: 0 15px !important; /* 양옆 여백 확보 */
            box-sizing: border-box;
        }
    }

section.review{ padding: 40px 10px 0;}
section.review h2{ margin-bottom: 20px; font-size: 22px; text-align: center;}
section.review h2 span{ color: #d50527;}
section.review div.info_wrap ul{ display: flex; flex-wrap: wrap; gap: 10px;}
section.review div.info_wrap ul li{ width: calc((100% - 10px) / 2);}
section.review div.info_wrap ul li div.img_wrap{ overflow: hidden; border-radius: 10px;}
section.review div.info_wrap ul li div.img_wrap img{ display: block; width: 100%;}
section.review div.info_wrap ul li p{ text-align: center;}

section.hot{ padding: 40px 10px 0;}
section.hot h2{ margin-bottom: 20px; font-size: 22px; text-align: center;}
section.hot h2 span{ color: #d50527;}
section.hot div.info_wrap ul{}
section.hot div.info_wrap ul li{ border: 2px solid #000; border-radius: 999px;}
section.hot div.info_wrap ul li + li{ margin-top: 10px;}
section.hot div.info_wrap ul li a{ display: block; width: 100%; padding: 18px 15px; font-weight: bold;}
section.hot div.info_wrap ul li:first-child a{ color: #d50527;}

section.car_list{ padding: 40px 10px 0;}
section.car_list.tru_car{ padding-bottom: 40px;}
section.car_list h2{ margin-bottom: 20px; font-size: 22px; text-align: center;}
section.car_list h2 span{ color: #d50527}
section.car_list div.car_wrap{ margin-bottom: 30px;}
section.car_list div.car_wrap ul{ display: flex; flex-wrap: wrap; gap: 5px;}
section.car_list div.car_wrap ul li{ overflow: hidden; position: relative; width: calc((100% - 5px) / 2); border: 1px solid #c1c1c1; border-radius: 20px;}
section.car_list div.car_wrap ul li div.img_wrap a{ display: block; width: 100%;aspect-ratio: 4 / 3;}
section.car_list div.car_wrap ul li div.img_wrap a img{ display: block; width: 100%;height:100%;object-fit: cover;}
section.car_list div.car_wrap ul li div.txt_wrap{ padding: 10px;}
section.car_list div.car_wrap ul li div.txt_wrap p.tit{ margin-bottom: 5px; font-size: 17px; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;
-webkit-box-orient: vertical;}
section.car_list div.car_wrap ul li div.txt_wrap p.tit span{ font-weight: 500;}
section.car_list div.car_wrap ul li div.txt_wrap div.opt{ display: flex; align-items: center; justify-content: space-between; padding: 2px 0;}
section.car_list div.car_wrap ul li div.txt_wrap div.opt span{ font-size: 12px; color: #737373;}
section.car_list div.car_wrap ul li div.txt_wrap div.opt span.car_pri{ font-weight: 900; font-size: 14px; color: #d50527;}
section.car_list a.more{ display: block; width: 225px; padding: 16px 39px 15px 39px; margin: 0 auto; font-weight: 500; font-size: 18px; color: #fff; border-radius: 10px; text-align: center;
background: #d50527;}
section.car_list ul li div.label{ position: absolute; left: 10px; top: 0; width: 70px; padding: 0;}
section.car_list ul li div.label img{ display: block; width: 100%;}

div.main_ban{ padding: 40px 10px 0;}
div.main_ban img{ display: block; width: 100%; border-radius: 15px;}

div.main_process{ padding: 40px 10px 0;}
div.main_process img{ display: block; width: 100%; border-radius: 15px;}

section.partner{ padding: 40px 10px 0;}
section.partner h2{ margin-bottom: 20px; font-size: 22px; text-align: center;}
section.partner h2 span{ color: #d50527}
section.partner div.img_wrap img{ display: block; width: 100%;}

div.main_tel{ padding: 40px 10px 0;}
div.main_tel a{ position: relative; display: block; width: 100%; height: 100%;}
div.main_tel img{ display: block; width: 100%; border-radius: 5px;}
div.main_tel a p{ position: absolute; left: 13%; top: 45%; font-weight: bold; font-size: 24px; color: #fff;} 

div.bottom_counsel{ z-index: 100; position: fixed; left: 50%; bottom: 25px; transform: translateX(-50%); width: 90%; max-width: 960px; padding: 10px; border: 2px solid #d50527;
border-radius: 15px; background: #fff;}
div.bottom_counsel div.inner_wrap{ display: flex; gap: 20px;}
div.bottom_counsel div.inner_wrap div.ico_wrap{ width: 13%; max-width: 110px;}
div.bottom_counsel div.inner_wrap div.ico_wrap img{ display: block; width: 100%;}
div.bottom_counsel div.inner_wrap ul{ display: flex; align-items: center; gap: 10px; width: calc(87% - 10px);}
div.bottom_counsel div.inner_wrap ul li{ overflow: hidden; flex: 1; border: 1px solid #d50527; border-radius: 999px;}
div.bottom_counsel div.inner_wrap ul li.kakao{ display: none; color: #3b1c1c; background: #fce300;}
div.bottom_counsel div.inner_wrap ul li.kakao a{ color: #3b1c1c;}
div.bottom_counsel div.inner_wrap ul li a{ display: block; width: 100%; padding: 1.9vw 0; font-weight: bold; font-size: 18px; color: #d50527; text-align: center;}
div.bottom_counsel div.inner_wrap ul li.tel{ animation: btn_bg 1s alternate infinite;}
div.bottom_counsel div.inner_wrap ul li.tel a{ color: #fff;}
div.bottom_counsel.kakao div.ico_wrap{ display: none;}
div.bottom_counsel.kakao div.inner_wrap ul{ width: 100%;} 
div.bottom_counsel.kakao div.inner_wrap ul li.kakao{ display: block;}

@keyframes btn_bg{
	0%{ background-color: #05e048; border: solid 2px #05e048;}
	100%{ background-color: #de5132; border: solid 2px #de5132;}
}

@media(max-width: 359px){
	header nav ul li a{ font-size: 3.2vw;}
}


/* 4-3 비율 박스 커스텀 시작 */
.ratio-4-3 {
  width: 100%;
  position: relative;
  padding-bottom: 75%; /* 3 / 4 = 0.75 */
  background: #ddd;
}
.ratio-4-3 > .content-box {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.ratio-4-3 > .content-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 4-3 비율 박스 커스텀 끝 */


/* 16-9 비율 박스 커스텀 시작 */
.ratio-16-9 {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 9 / 16 = 0.5625 */
  background: #ddd;
}
.ratio-16-9 > .content-box {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.ratio-16-9 > .content-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 16-9 비율 박스 커스텀 끝 */

/* 1-1 비율 박스 커스텀 시작 */
.ratio-1-1 {
  width: 100%;
  position: relative;
  padding-bottom: 100%; /* 1 / 1 = 1 */
  background: #ddd;
}
.ratio-1-1 > .content-box {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.ratio-1-1 > .content-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 1-1 비율 박스 커스텀 끝 */ 

/* 모바일 스크롤 올라가는 거 위치 변경 */
@media (max-width: 991px) {
    .eb-backtotop {
        bottom: 105px;
    }
}


/* 헤더 */
/* 네비게이션 */
.ik-nav {
    border-top: 1px solid #eee;
}

/* 메뉴 리스트 */
.ik-nav ul {
    display: flex;
    flex-wrap: wrap;        /* ⭐ 2줄 핵심 */
}

/* 메뉴 아이템 */
.ik-nav ul li {
    width: 33%;        /* 3개씩 → 2줄 */
    box-sizing: border-box;
	flex-basis: 33%;
	margin:0.1%
}

/* 오른쪽 선 제거 */
.ik-nav ul li:nth-child(3n) {

}

/* 메뉴 링크 */
.ik-nav ul li a {
}

/* hover */
.ik-nav ul li a:hover {
   color: #dfdfdf;
}


/* [추가된 코드: 로딩 스피너 CSS] */
#page_loading_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	z-index: 99999;
	display: flex;
    flex-direction: column; /* [중요] 세로 정렬 (차 위, 글자 아래) */
	justify-content: center;
	align-items: center;
	transition: opacity 0.5s ease;
    overflow: hidden;
}

/* --- 1. 로딩 문구 스타일 (새로 추가됨) --- */
.loading_text {
    margin-top: 30px;      /* 자동차와 간격 */
    font-size: 16px;       /* 글자 크기 */
    font-weight: bold;     /* 굵게 */
    color: #555;           /* 글자 색상 */
    letter-spacing: 1px;   /* 자간 넓힘 */
    animation: textBlink 1.5s infinite ease-in-out; /* 깜빡이는 효과 */
}

/* 문구 깜빡임 애니메이션 */
@keyframes textBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- 2. 자동차 본체 --- */
.loading_spinner {
	position: relative;
	width: 60px;
	height: 22px;
	background: #d50527;
    border: none;
	border-radius: 4px 10px 4px 4px;
	animation: driveAcross 1.2s linear infinite;
    z-index: 2; /* 연기보다 앞에 */
}

/* 자동차 지붕 */
.loading_spinner::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 10px;
	width: 32px;
	height: 10px;
	background: #d50527;
	border-radius: 10px 10px 0 0;
}

/* 자동차 바퀴 */
.loading_spinner::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 8px;
	width: 10px;
	height: 10px;
	background: #333;
	border-radius: 50%;
	box-shadow: 32px 0 0 #333;
}

/* --- 3. 배기 가스(연기) 효과 --- */
.exhaust {
	position: absolute;
	top: 12px;
	left: 2px;
	z-index: -1; /* 차 뒤로 숨김 */
}

/* 연기 구름 3개 생성 */
.exhaust, .exhaust::before, .exhaust::after {
	content: '';
	position: absolute;
	background-color: #ddd; /* 연한 회색 연기 */
	width: 6px;
	height: 6px;
	border-radius: 50%;
	opacity: 0;
}

.exhaust { animation: smokeOut 1s ease-out infinite; }
.exhaust::before { top: -2px; left: -5px; width: 8px; height: 8px; animation: smokeOut 1s ease-out infinite 0.2s; }
.exhaust::after { top: 2px; left: -10px; width: 7px; height: 7px; animation: smokeOut 1s ease-out infinite 0.4s; }

/* --- 애니메이션 정의 --- */

/* 자동차 이동 (좌 -> 우) */
@keyframes driveAcross {
    0% { transform: translateX(-60px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(60px); opacity: 0; }
}

/* 연기 퍼짐 */
@keyframes smokeOut {
	0% { transform: translateX(0) scale(0.5); opacity: 0.8; }
	100% { transform: translateX(-20px) scale(2.0); opacity: 0; }
}
/* [끝] */