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


header{}
header div.head{ position: relative; display: flex; justify-content: space-between; align-items: center; height: 100px; padding: 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{ background: #b70f28;}
header nav ul{ display: flex;}
header nav ul li{ flex: 1;}
header nav ul li a{ display: block; width: 100%; padding: 15px 0; font-weight: bold; font-size: 14px; color: #fff; text-align: center;}

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.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%;}
section.car_list div.car_wrap ul li div.img_wrap a img{ display: block; width: 100%;}
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: 14px; color: #737373;}
section.car_list div.car_wrap ul li div.txt_wrap div.opt span.car_pri{ font-weight: 900; font-size: 17px; 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 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;}

@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 비율 박스 커스텀 끝 */