/* 여기에 작업 또는 수정할 당신의 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: 190px;}
header div.head div.logo_wrap img{ display: block; width: 100%;}
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: #b70f28;}

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 #b70f28; 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 #b70f28; 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 #b70f28; 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 #b70f28; 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: #b70f28;}



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

    /* [반응형 핵심] 영상 감싸는 박스 */
    .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: #b70f28;}
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: #b70f28;}
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: #b70f28;}

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: #b70f28}
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: #b70f28;}
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: #b70f28;}
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: #b70f28}
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 #b70f28;
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 #b70f28; 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: #b70f28; 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;
}