/*index.css*/
#page-wrap {
	position: relative;
	width: 100%;
	margin: auto;
}
#page-wrap *{
  box-sizing: border-box;
}
#page-wrap > article,
#page-wrap > section{
	min-width: 1440px;
}
#page-wrap > article .inner,
#page-wrap > section .inner{
  width: 1120px;
  margin: 0 auto;
  position: relative;
}
body {
	padding-top: 0;
}

#header {
	display: none;
}

.footer-wrap {
	border-top: 0;
}

.scrollOff {
	position: fixed;
	overflow: hidden;
	width: 100%;
}

/* 연휴 팝업 */
/* 가격인상 모달로 수정 */
.modal-bg{
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:rgba(0, 0, 0, 0.5);
	z-index: 51;
}
.index-noti{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	z-index: 52;
}
.index-noti img{
	width:100%;
}
.noti-close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 32px;
	height: 32px;
}

.noti-close img {
	width: 100%;
}

.pop-close {
	position: relative;
	box-sizing: border-box;
	padding: 14px 25px;
	width: 100%;
	min-height: 46px;
	background-color: #101820;
}

.pop-close input[type="checkbox"] {
	display: none;
}

.pop-close input[type="checkbox"]+label {
	float: left;
	width: 20px;
	height: 20px;
	background-image: url("/CARVAZO_IMG/web_main/checkbox_off.svg");
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	cursor: pointer;
}

.pop-close input[type="checkbox"]:checked+label {
	width: 20px;
	height: 20px;
	background-image: url("/CARVAZO_IMG/web_main/checkbox_on.svg");
}

.pop-close input[type="checkbox"]+label span {
	position: absolute;
	top: 12px;
	left: 50px;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
	letter-spacing: -1px;
	color: rgba(255, 255, 255, 0.8);
}

.pop-close button {
	float: right;
	font-size: 14px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.8);
	line-height: 20px;
}
/* .today-close2 img {
	display: inline-block;
	vertical-align: middle;
	width: 16px;
}

.today-close2 p {
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	opacity: 0.9;
	letter-spacing: -1px;
	line-height: 23px;
} */
/* !연휴 팝업 */


/* popup */
.popup-layer-wrap{
	overflow: hidden;
}
.popup-layer-wrap .slick-track{
	height:64px;
}
.popup-layer-wrap .slick-arrow{
	display: none !important;
}
.popup-layer{
	box-sizing: border-box;
	width: 100%;
	min-width: 1440px;
	height: 64px;
	font-size: 0;
	overflow: hidden;
}
.popup-layer.case{
	background:linear-gradient(to right, #00cc83 60%, #101820 40%);
	border-bottom: 2px solid #00cc83;
}
.popup-layer .inner{
	height:64px;
}
.today-close button {
	display: block;
}

.today-close img {
	width: 16px;
}

/* 띠배너 기본값 */
.popup-layer.default{
	height:64px;
}
.popup-layer.default *{
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.popup-layer.default .inner{
	width:100%;
	max-width: 1000px;
	margin:0 auto;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.popup-layer.default .popup-text{
	width:auto;
	display: flex;
	align-items: center;
  height: 100%;
}
.popup-layer.default .popup-text img{
	display: inline-block;
	vertical-align: bottom;
}
.popup-layer.default .popup-text p{
	margin-top:0;
	margin-left: 20px;
	line-height: 66px;
}
.popup-layer.default .popup-btn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-layer.default .popup-btn a{
	display: inline-block;
}
.popup-layer.default .popup-btn img{
	width:100%;
}
/* !띠배너 기본값 */

/* 컴플레인 안내 배너 */
.popup-layer.after-service{
	background-color: #ECEFF2;
}
.popup-layer.after-service .inner{
	justify-content: center;
	gap:40px;
}
.popup-layer.after-service .popup-text img{
	width:65px;
	vertical-align: middle;
}
.popup-layer.after-service .popup-text p {
	color: #444e5a;
	font-weight: 600;
	font-family: 'Pretendard';
}
.popup-layer.after-service .popup-text b{
	font-weight: 700;
	font-size: 20px;
	padding-left: 12px;
}
.popup-layer.after-service .popup-btn a{
	width: 166px;
	height: 36px;
}
/* !컴플레인 안내 배너 */
/* !popup */



/* main-header */
#main-header{
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
	width: 100%;
	height: 72px;
	background-color: transparent;
  z-index: 10;
}

#main-header .gnb-menu .gnb-text {
  color: #fff;
}


.event{
	position: relative;
}

.mypage > a:hover + .mypage-box{
  display: block;
}
#main-header .mypage .my-menu{
  border: none;
  background-color: transparent;
  color: #fff;
}
/* !header */


#page-wrap > section, 
#page-wrap > article{
  padding: 100px 0;
  overflow: hidden;
}
section > .inner{
  width: 1120px;
  margin: 0 auto;
  position: relative;
}
section .title-wrap{

}
section .title-wrap .title{
  color: var(--Color-Text-black, #11151C);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
section .title-wrap .desc{
  color: var(--Color-Text-black, #11151C);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%;
  padding-top: 24px;
}

section .text-wrap h3{
  font-size: 36px;
  font-weight: 700;
  line-height: 150%; /* 54px */
  text-align: left;
  padding-bottom: 24px;
}
section .text-wrap h5{
  font-size: 20px;
  font-weight: 400;
  line-height: 170%; /* 34px */
  text-align: left;
}
.floating-wrap{
  width: 600px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  padding: 24px;
  border-radius: 12px;
  background: rgba(17, 21, 28, 0.80);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
  bottom: -100%;
  transition: 0.3s;
}
.floating-wrap.on{
  bottom: 24px;
}
.floating-wrap .floating-text{
  flex: 1;
}
.floating-wrap .floating-text h5{
  color: #00E599;
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 24px */
  padding-bottom: 2px;
}
.floating-wrap .floating-text p{
  color: var(--Color-Text-white, #FFF);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  text-align: left;
}
.floating-wrap button{
  flex: 1;
  cursor: pointer;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: var(--Radius-8, 8px);
  background: var(--Color-Background-Button-Primary, #0C8);
  color: var(--Semantic-Color-Text-white, #FFF);
  font-size: var(--size-font-title-title-1, 18px);
  font-style: normal;
  font-weight: 700;
}
/* 스크롤바 */
.slider-wrapper{
  width: 100%;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: auto;
  overflow-y: clip;
  position: relative;
}
.slider-wrapper:hover{
  scrollbar-width: block;
  -ms-overflow-style: block;
}
.scroll-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* 스크롤바 완전히 숨기기 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-wrapper::-webkit-scrollbar {
  display: none;
}
.slide-wrapper:hover .scroll-wrap::-webkit-scrollbar-thumb{
  border-radius: 4px;
  background-color: #C1C9D6;
}
.scroll-wrap{
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  /* 스크롤바 숨기기 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-wrap::-webkit-scrollbar {
  display: none;
}
.scroll-wrap.active {
  cursor: grabbing;
}
.scroll-wrap::-webkit-scrollbar{
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  background: transparent; 
  -webkit-appearance: block;
}
/* !스크롤바 */

/* 슬라이드 공통 */
#page-wrap .slick-dots{
  position: absolute;
  bottom: 40px;
  width: fit-content;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#page-wrap .slick-dots li{
  margin: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  overflow: hidden;
}
#page-wrap .slick-dots li.slick-active{
  width: 40px;
  border-radius: 8px;
}
#page-wrap .slick-dots li button{
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 0;
}
#page-wrap .slick-dots li.slick-active button{
  background-color: #414B58;
}
#page-wrap .slick-dots li button:before{
  display: none;
}
/* 슬라이드 공통 */

/* hero-wrap */
#page-wrap section.hero-wrap{
  background: url("https://images.carvazo.com/carvazo/main/pc/home_test/260706/hero_bg.webp") center center / cover no-repeat;
  padding: 161.25px 0;
  text-align: center;
}
.hero-wrap .hero-text{
  padding-bottom: 24px;
}
.hero-wrap .hero-text, 
.hero-wrap .hero-text b{
  color: #F0F0F0;
  text-align: center;
  text-shadow: 4px 4px 88px #091625, 4px 4px 88px #091625, 4px 4px 88px #091625, 4px 4px 88px #091625;
  font-family: Pretendard;
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 73.6px */
}
.hero-wrap .hero-text b{
  display: block;
  color: var(--color-green-500, #0C8);
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}
.hero-wrap > .inner{
  width: 1120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 140px;
}
.hero-wrap .left-section{
  width: 560px;
  flex: 0 0 560px;
  position: relative;
}
.hero-wrap .right-section{
  flex: 0 0 360px;
  width: 360px;
}
.hero-wrap .hero-review-list{
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  width: 100%;
  height: 151px;
  background: linear-gradient(291deg, rgba(63, 80, 99, 0.36) 38.02%, rgba(52, 114, 120, 0.36) 96.71%);
  backdrop-filter: blur(21px);
}
.hero-wrap .hero-review-list li{
  width: 100%;
  height: 151px;
  padding: 28px 30px;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 12px;
}

.hero-wrap .hero-review-list li::before,
.hero-wrap .hero-review-list li::after{
  content: '';
  position: absolute;
  top: 32px;
  width: 20px;
  height: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-wrap .hero-review-list li .review-text{
  color: var(--color-neutral-300, #C1C9D6);
  text-align: center;
  font-size: var(--font-size-lg, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.hero-wrap .hero-review-list li .review-text b{
  display: block;
  text-align: center;
  color: var(--color-neutral-300, #C1C9D6);
  text-align: center;
  font-size: var(--font-size-lg, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.hero-wrap .hero-review-list li .reviewer{
  margin: 0;
  /* padding-top: 12px; */
  color: var(--color-neutral-600, #717D8E);
  text-align: center;
  font-size: var(--font-size-xs, 13px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
}

.mechanic-search-filter{
  width: 100%;
  background-color: #fff;
  padding: 24px;
  border-radius: 24px;
  box-shadow: 2px 2px 56px 0 rgba(0, 0, 0, 0.35);
}
.mechanic-search-filter *{
	box-sizing: border-box;
}
.mechanic-search-filter .title{
	color: var(--Color-Text-black, #11151C);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  padding-bottom: 24px;
}
.mechanic-search-filter form{
  width: 100%;
}
.mechanic-search-filter .filter-contents-wrap{
	width: 100%;
}

.mechanic-search-filter .calendar-container .calendar{
	padding: 0;
}
.mechanic-search-filter .search-filter-wrap{
  padding-top: 0;
	min-width: auto;
  display: block;
}
.mechanic-search-filter .search-filter-wrap h4{
	color: var(--color-static-black, #11151C);
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%;
	position: relative;
	padding-left: 28px;
  text-align: left;
}
.mechanic-search-filter .search-filter-wrap h4::before{
	content:'';
	width: 20px;
	height: 20px;
	position: absolute;
	top: 2px;
	left: 0px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto;
}
.mechanic-search-filter .search-filter-wrap h4+p{
  color: var(--color-neutral-600, #717D8E);
  font-size: var(--font-size-xs, 15px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 22.5px */ 
  padding-top: 8px;
  text-align: left;
}
.mechanic-search-filter .brand-name-wrap h4::before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.6064 3.22363C16.5879 3.22371 17.47 3.82368 17.8311 4.73633L19.5439 9.06543H20.1348C20.9274 9.06567 21.5693 9.70833 21.5693 10.501V13.2568L21.5703 13.2676V19.9658C21.5703 20.7585 20.9274 21.4011 20.1348 21.4014H18.2207C17.4279 21.4014 16.7852 20.7586 16.7852 19.9658V18.6191H7.21484V19.9658C7.21484 20.7586 6.57209 21.4014 5.7793 21.4014H3.86523C3.07264 21.4011 2.42969 20.7585 2.42969 19.9658V10.501C2.42969 9.70832 3.07263 9.06565 3.86523 9.06543H4.45703L6.16992 4.73633C6.53105 3.82362 7.41298 3.22364 8.39453 3.22363H15.6064ZM7.14844 12.5264C6.42183 12.5264 5.83315 13.1152 5.83301 13.8418C5.83301 14.5685 6.42174 15.1582 7.14844 15.1582C7.87516 15.1582 8.46387 14.5685 8.46387 13.8418C8.46373 13.1152 7.87508 12.5264 7.14844 12.5264ZM16.8516 12.5264C16.125 12.5265 15.5363 13.1153 15.5361 13.8418C15.5361 14.5685 16.1249 15.1581 16.8516 15.1582C17.5783 15.1582 18.168 14.5685 18.168 13.8418C18.1678 13.1152 17.5782 12.5264 16.8516 12.5264ZM8.39453 5.1377C8.19823 5.1377 8.02144 5.25789 7.94922 5.44043L6.51563 9.06543H17.4854L16.0508 5.44043C15.9785 5.25805 15.8026 5.13778 15.6064 5.1377H8.39453Z' fill='%2311151C'/%3E%3C/svg%3E");
}
.mechanic-search-filter .place-wrap h4::before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2.5C16.4182 2.50001 19.9999 6.08179 20 10.5C20 14.1308 14.5976 19.8984 12.6719 21.8389C12.2976 22.2158 11.7024 22.2158 11.3281 21.8389C9.40236 19.8984 4 14.1308 4 10.5C4.00007 6.08179 7.58177 2.5 12 2.5ZM12 7.41113C10.5949 7.41113 9.45534 8.55005 9.45508 9.95508C9.45508 11.3603 10.5948 12.5 12 12.5C13.4052 12.4999 14.5439 11.3603 14.5439 9.95508C14.5437 8.5501 13.405 7.41122 12 7.41113Z' fill='%2311151C'/%3E%3C/svg%3E");
}
.mechanic-search-filter .date-wrap h4::before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.4129 9.31722C12.7013 9.02017 13.1761 9.01273 13.4733 9.30094C13.7706 9.58936 13.778 10.0648 13.4896 10.3621L9.93166 14.0291C9.64705 14.3225 9.17968 14.3342 8.88104 14.0552L6.89455 12.1973C6.59211 11.9144 6.57603 11.4402 6.85874 11.1377C7.14165 10.8351 7.61658 10.819 7.91913 11.1019L9.3677 12.4561L12.4129 9.31722Z' fill='%2311151C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.88381 1.32812C6.34395 1.32824 6.71714 1.70129 6.71714 2.16146V3.0306H13.2829V2.16146C13.2829 1.70131 13.6561 1.32828 14.1162 1.32812H14.6387C15.0989 1.32821 15.472 1.70128 15.472 2.16146V3.0306H16.3957C17.0844 3.0307 17.6424 3.59031 17.6424 4.2806V16.25C17.6424 17.4006 16.7097 18.3333 15.5591 18.3333H4.44094C3.29035 18.3333 2.35761 17.4006 2.3576 16.25V4.2806C2.3576 3.59031 2.91569 3.0307 3.60435 3.0306H4.52801V2.16146C4.52801 1.7013 4.90122 1.32825 5.36135 1.32812H5.88381ZM4.02427 16.25C4.02428 16.4801 4.21082 16.6667 4.44094 16.6667H15.5591C15.7892 16.6667 15.9758 16.4801 15.9758 16.25V7.61393H4.02427V16.25Z' fill='%2311151C'/%3E%3C/svg%3E");
}
.mechanic-search-filter .brand-name-wrap{
  margin-bottom: 16px;
}
.mechanic-search-filter .date-wrap{
  padding-top: 24px;
}
.mechanic-search-filter .input-wrap{
	border-radius: 8px;
	border: 1px solid var(--color-neutral-200, #D9E1EE);
	width: 100%;
	height: 56px;
	/* padding: 0 32px 0 0; */
	position: relative;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: right 16px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4873 5.24513C14.2361 4.97597 13.8142 4.96142 13.5451 5.21264L7.99996 10.3881L2.45484 5.21264C2.18568 4.96142 1.76382 4.97597 1.5126 5.24513C1.26137 5.5143 1.27592 5.93616 1.54509 6.18738L7.54508 11.7874C7.80122 12.0264 8.1987 12.0264 8.45484 11.7874L14.4548 6.18738C14.724 5.93616 14.7385 5.5143 14.4873 5.24513Z' fill='%23A9B4C4'/%3E%3C/svg%3E");
}

.mechanic-search-filter .input-wrap::after{
	content:'';
	width: 16px;
	height: 16px;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4873 5.24513C14.2361 4.97597 13.8142 4.96142 13.5451 5.21264L7.99996 10.3881L2.45484 5.21264C2.18568 4.96142 1.76382 4.97597 1.5126 5.24513C1.26137 5.5143 1.27592 5.93616 1.54509 6.18738L7.54508 11.7874C7.80122 12.0264 8.1987 12.0264 8.45484 11.7874L14.4548 6.18738C14.724 5.93616 14.7385 5.5143 14.4873 5.24513Z' fill='%23A9B4C4'/%3E%3C/svg%3E");
  display: none;
}
.mechanic-search-filter .input-wrap::before{
  content:'';
	width: 20px;
	height: 20px;
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}
.mechanic-search-filter .brand-name-wrap .input-wrap::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.0054 2.7697C13.8232 2.76977 14.5583 3.26974 14.8592 4.03028L16.2866 7.63786H16.779C17.4394 7.63806 17.9744 8.17361 17.9744 8.83415V11.1307L17.9752 11.1397V16.7215C17.9752 17.3821 17.4395 17.9176 16.779 17.9178H15.1839C14.5232 17.9178 13.9876 17.3822 13.9876 16.7215V15.5993H6.01235V16.7215C6.01235 17.3822 5.47672 17.9178 4.81606 17.9178H3.22101C2.56051 17.9176 2.02472 17.3821 2.02472 16.7215V8.83415C2.02472 8.17361 2.56051 7.63805 3.22101 7.63786H3.71417L5.14158 4.03028C5.44252 3.26969 6.17746 2.7697 6.99542 2.7697H13.0054ZM5.95701 10.522C5.35151 10.522 4.86094 11.0127 4.86082 11.6182C4.86082 12.2238 5.35143 12.7151 5.95701 12.7152C6.56261 12.7152 7.0532 12.2238 7.0532 11.6182C7.05309 11.0127 6.56254 10.522 5.95701 10.522ZM14.0429 10.522C13.4375 10.5221 12.9469 11.0127 12.9468 11.6182C12.9468 12.2237 13.4374 12.7151 14.0429 12.7152C14.6486 12.7152 15.14 12.2238 15.14 11.6182C15.1398 11.0127 14.6485 10.522 14.0429 10.522ZM6.99542 4.36475C6.83183 4.36475 6.68452 4.46491 6.62433 4.61703L5.42967 7.63786H14.5711L13.3756 4.61703C13.3154 4.46505 13.1688 4.36482 13.0054 4.36475H6.99542Z' fill='%2311151C'/%3E%3C/svg%3E");
}
.mechanic-search-filter .place-wrap .input-wrap::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.99998 1.66667C13.6818 1.66668 16.6666 4.6515 16.6666 8.33334C16.6666 11.359 12.1647 16.1654 10.5599 17.7824C10.248 18.0965 9.752 18.0965 9.44008 17.7824C7.83528 16.1654 3.33331 11.359 3.33331 8.33334C3.33337 4.65149 6.31812 1.66667 9.99998 1.66667ZM9.99998 5.75928C8.82907 5.75928 7.87943 6.70838 7.87921 7.87924C7.87921 9.05028 8.82894 10 9.99998 10C11.171 9.99993 12.1199 9.05023 12.1199 7.87924C12.1197 6.70842 11.1708 5.75935 9.99998 5.75928Z' fill='%2311151C'/%3E%3C/svg%3E");
}

.mechanic-search-filter .search-filter-wrap > .input-wrap > input{
	width: 100%;
	height: 100%;
	line-height: 56px;
	text-indent: 16px;
	overflow: hidden;
	color: var(--color-static-black, #11151C);
	text-overflow: ellipsis;
  white-space: nowrap;
	font-size: var(--font-size-md, 16px);
	font-style: normal;
	font-weight: 500;
	border : none;
	margin: 0;
	float: none;
	border-radius: 0;
	padding: 0;
  text-indent: 44px;
  padding-right: 42px;
  cursor: pointer;
}
.mechanic-search-filter .input-wrap input.active{
	font-weight: 500;
	border: none;
	background-color: transparent;
	color: #11151c;
}
.mechanic-search-filter .input-wrap input::-webkit-input-placeholder {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	color: var(--color-static-black, #11151C);
	font-weight: 500;
}

.mechanic-search-filter .input-wrap input::-moz-input-placeholder {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	color: var(--color-static-black, #11151C);
	font-weight: 500;
}

.mechanic-search-filter .input-wrap input:-ms-input-placeholder {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	color: var(--color-static-black, #11151C);
	font-weight: 500;
}
.calendar .calendar-notice{
	display: none;
}
.mechanic-search-filter .date-wrap h4 p{
	padding-top: 8px;
	color: var(--color-neutral-600, #717D8E);
	font-size: var(--font-size-sm, 14px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 21px */
	text-indent: -32px;
}
.mechanic-search-filter .calendar-container{
  padding: 16px 0 24px;
}
.mechanic-search-filter .search-mechanic-btn{
	width: 100%;
	height: 56px;
	line-height: 56px;
	text-align: center;
	border-radius: var(--Radius-8, 8px);
	background: var(--color-green-500, #0C8);
	color: var(--color-static-white, #FFF);
	font-size: var(--font-size-md, 16px);
	font-style: normal;
	font-weight: 700;
}
.mechanic-search-filter .search-mechanic-btn:disabled{
	background-color: #C1C9D6;
}
.index-form {
	padding-top: 35px;
}
/* !hero-wrap */

/* main-wrap */
.main-wrap {
	position: relative;
	width: 100%;
  background: #F5F8FC;
}
.main-wrap .method-banner-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.main-wrap .banner-wrap{
  position: relative;
  width: 552px;
  flex: 0 0 552px;
}
.main-wrap .banner-wrap .banner-page-wrap{
  position: absolute;
  right: 36px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 10px;
}
.main-wrap .banner-wrap .banner-page-wrap button{
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-wrap .banner-wrap .banner-page-wrap span{
  color: rgba(255, 255, 255, 0.70);
  font-size: var(--font-size-2xs, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.main-wrap .banner-wrap .banner-page-wrap span.current{
  color: var(--color-static-white, #FFF);
  font-size: var(--font-size-2xs, 14px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.main-wrap .banner-wrap .divi{
  color: var(--color-static-white, #FFF);
  font-size: var(--font-size-2xs, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.main-wrap .banner-list{
  width: 100%;
  margin-bottom: 0;
  border-radius: 12px;
  overflow: hidden;
}
/* 배너 공통 */
.main-wrap .banner-item{
  width: 100%;
  height: 219px;
}
.main-wrap .banner-item a{
  width: 100%;
  height: 100%;
  padding: 24px 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.main-wrap .banner-item .banner-title{
  color: var(--color-static-black, #11151C);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.main-wrap .banner-item .banner-text{
  color: var(--color-static-black, #11151C);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  padding-top: 8px;
  margin: 0;
}
.main-wrap .banner-item .banner-button{
  margin-top: 24px;
  display: block;
  text-decoration: underline;
  color: var(--color-neutral-900, #2B323B);
  font-size: var(--font-size-2xs, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.main-wrap .banner-item .banner-img-wrap{
  flex: 0 0 120px;
  width: 100%;
}
.main-wrap .banner-item .banner-img-wrap img{
  width: 100%;
}
/* !배너 공통 */
/* 배너 개별 */
.main-wrap .banner-item.discount-banner{
  background: linear-gradient(80deg, #F6FFDD 19.81%, #B5EB2A 86.28%);
}
.main-wrap .banner-item.equipment-banner{
  background: linear-gradient(80deg, #FFF2DE 19.81%, #FFE299 86.28%);
}
.main-wrap .banner-item.care-banner{
  background: linear-gradient(80deg, #E4FFDB 19.81%, #10A100 86.28%);
}
.main-wrap .banner-item.naverpay-banner{
  background: linear-gradient(80deg, #D5EAFF 19.81%, #0242CB 86.28%);
}
/* !배너 개별 */

.method-filter-wrap{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.method-filter-wrap a{
  flex: 1;
  border-radius: 12px;
  background: var(--color-neutral-50, #fff);
  padding: 32px 20px;
  display: block;
  background-position: right 20px bottom 20px;
  background-repeat: no-repeat;
  position: relative;
}
.method-filter-wrap .method-visit{
  background-image: url("https://images.carvazo.com/carvazo/main/pc/home_test/251203/main_visit_img.webp");
  background-size: 80px auto;
}
.method-filter-wrap .method-center{
  background-image: url("https://images.carvazo.com/carvazo/main/pc/home_test/251203/main_center_img.webp");
  background-size: 80px auto;
}
.method-filter-wrap .method-badge{
  display: flex;
  padding: 4px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 25px;
  color: var(--color-static-white, #FFF);
  font-size: var(--font-size-2xs, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  position: absolute;
  left: 19px;
  top: -15px;
  width: fit-content;
}
.method-filter-wrap .method-badge.visit{
  background: #0c8;
}
.method-filter-wrap .method-badge.center{
  background: #313A5A;
}
.method-filter-wrap .method-desc{
  margin: 0;
  color: var(--color-green-700, #00B277);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 27px */
  text-align: left;
}
.method-filter-wrap .method-title{
  text-align: left;
  padding-top: 2px;
  color: var(--color-static-black, #11151C);
  font-size: var(--font-size-lg, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
}
.method-filter-wrap .method-text{
  padding-top: 24px;
  text-align: left;
  color: var(--color-neutral-600, #717D8E);
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}
.area-filter-wrap{
  padding-top: 48px;
}
.area-filter-wrap h4{
  padding-bottom: 16px;
  color: var(--color-static-black, #11151C);
  font-size: var(--font-size-lg, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.area-filter-wrap ul{
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  flex-wrap: wrap;
}
.area-filter-wrap ul li{
  flex: 0 0 calc((100% - 48px) / 4);
  width: calc((100% - 48px) / 4);
}
.area-filter-wrap ul li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border-radius: 8px;
  background: var(--color-static-white, #FFF);
  box-shadow: 0 0 12px 0 rgba(46, 86, 136, 0.04);
  color: var(--color-static-black, #11151C);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
/* !main-wrap */

/* intro-wrap */
#page-wrap section.intro-wrap{
  background-image: url('https://images.carvazo.com/carvazo/main/pc/home_test/250925/intro_bg.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.intro-wrap .title-wrap .title{
  color: #fff;
}
.intro-wrap .title-wrap .title b{
  background: var(--2, linear-gradient(90deg, #CEFF48 14.21%, #00FF26 57.65%, #00BD74 98.09%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.intro-wrap .title-wrap .desc{
  color: #fff;
}
.intro-wrap .intro-list{
  margin: 48px 0;
  padding: 12px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro-wrap .intro-list .intro-item{
  flex: 1;
  text-align: center;
  position: relative;
  border-right: 1px solid #414B58;
}
.intro-wrap .intro-list .intro-item:last-of-type{
  border-right: none;
}
.intro-wrap .intro-list .intro-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-neutral-500, #8D97A5);
  text-align: center;
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  padding-bottom: 8px;
}
.intro-wrap .intro-list .intro-text{
  margin: 0;
  color: var(--color-static-white, #FFF);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 54px */
}
.intro-wrap .special-box{
  padding: 40px;
  border-radius: 16px;
  background: #FFF;
  overflow: hidden;
}
.intro-wrap .special-box .special-title{
  margin: 0;
  padding-bottom: 32px;
  color: var(--Color-Text-black, #11151C);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 36px */
}
.intro-wrap .special-list{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.intro-wrap .special-list .special-item{
  flex: 1;
  padding: 40px;
  border-radius: 16px;
  background: var(--color-neutral-50, #F5F8FC);
  overflow: hidden;
  text-align: left;
}
.intro-wrap .special-item .img-wrap{
  width: 84px;
}
.intro-wrap .special-item .img-wrap img{
  width: 100%;
}
.intro-wrap .special-item .text-wrap{
  padding-top: 16px;
}
.intro-wrap .special-item .text-wrap h6{
  margin: 0;
  color: #FF7240;
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 27px */
}
.intro-wrap .special-item:nth-of-type(2) .text-wrap h6{
  color: #2C6EF5;
}
.intro-wrap .special-item:nth-of-type(3) .text-wrap h6{
  color: #00B6B4;
}
.intro-wrap .special-item .text-wrap h5{
  color: var(--color-static-black, #11151C);
  font-size: var(--font-size-lg, 20px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  padding: 12px 0;
}
.intro-wrap .special-item .text-wrap p{
  color: var(--color-neutral-600, #717D8E);
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  text-align: left;
}
/* !intro-wrap */

/* info-wrap */
.info-wrap .tab-wrap{
  margin-top: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 128px;
}
.info-wrap .tab-wrap .tab-menu-list{
  width: 157px;
  flex: 0 0 157px;
  position: relative;
}
.info-wrap .tab-wrap .tab-menu-list::before{
  content: '';
  width: 4px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: #E4ECF7;
}
.info-wrap .tab-wrap .tab-menu-list::after{
  content: '';
  width: 4px;
  height: 140px;
  left: 0;
  top: var(--active-top, 0px);
  position: absolute;
  border-radius: 4px;
  background: var(--color-green-500, #0C8);
  transition: top 0.3s ease-in-out;
}
.info-wrap .tab-wrap .tab-menu-list .tab-menu-item{
  padding-left: 21px;
  position: relative;
  height: 140px;
  align-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.info-wrap .tab-wrap .tab-menu-list .tab-menu-item:hover .item-num,
.info-wrap .tab-wrap .tab-menu-list .tab-menu-item:hover .tab-item-title {
  color: #0C8;
}

.info-wrap .tab-wrap .tab-menu-list .tab-menu-item .item-num{
  color: var(--color-neutral-300, #C1C9D6);
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  padding-bottom: 5px;
  text-align: left;
}
.info-wrap .tab-wrap .tab-menu-list .tab-menu-item.active .item-num{
  color: #0C8;
}
.info-wrap .tab-wrap .tab-menu-list .tab-menu-item .tab-item-title{
  color: var(--color-neutral-300, #C1C9D6);
  font-size: var(--font-size-lg, 20px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}
.info-wrap .tab-wrap .tab-menu-list .tab-menu-item.active .tab-item-title{
  color: #11151C;
  font-weight: 700;
}
.info-wrap .tab-wrap .tab-content-box{
  flex: 0 0 calc(100% - 285px);
  width: calc(100% - 285px);
  position: relative;
  overflow: hidden;
  height: 420px;
  position: relative;
}
.slide-shadow{
  width: 160px;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 15%, rgba(255, 255, 255, 0.77) 67.84%, var(--color-static-white, #FFF) 96.22%);
  z-index: 2;
}
.info-wrap .tab-wrap .tab-content-list{
  transition: 0.3s;
}
.info-wrap .tab-wrap .tab-content-item{
  height: 420px;
}
.video-wrap .video-list{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  overflow-x: auto;
}
.video-wrap .video-list li{
  flex: 0 0 320px;
  width: 320px;
  box-sizing: border-box;
  position: relative;
  transition: 0.5s;
}
.video-wrap .video-list li::before{
  content:'';
  color: #FFF;
  font-size: var(--font-size-md, 16px);
  font-weight: 500;
  line-height: 150%; /* 24px */
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--color-basic-black-70, rgba(17, 21, 28, 0.70));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* For Safari */
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
}
.video-list li.slick-active{
  opacity: 1;
}

.video-list li:nth-of-type(1)::before{
  content: '엔진룸';
}
.video-list li:nth-of-type(2)::before{
  content: '외부 상태';
}
.video-list li:nth-of-type(3)::before{
  content: '프레임';
}
.video-list li:nth-of-type(4)::before{
  content: '내부 기능';
}
.video-list li:nth-of-type(5)::before{
  content: '휠 / 타이어';
}
.video-list li:nth-of-type(6)::before{
  content: '하부';
}
.video-list li:nth-of-type(7)::before{
  content: '소모품';
}
.video-list .video-box{
  width: 100%;
  height: 380px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #dee1e4;
  position: relative;
}
.video-list .video-box::after{
  content: "";
	position: absolute;
	display: block;
	top: 0;
	width: 50px;
	height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  animation: shine 2s infinite;
}

@keyframes shine {
	from {
		left: 0;
	}
	to {
		left: 90%;
	}
}
.video-list video{
  height: 100%;
  position: relative;
  z-index: 1;
  object-fit: cover
}
.video-list video[poster]{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-list .video-title{
  padding-top: 16px;
  color: var(--Color-Text-gray-01, #717D8E);
  text-align: center;
  font-size: var(--font-size-sm, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
}
.info-wrap .equip-slider{
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: auto;
  overflow: hidden;
}
.info-wrap .equip-list{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: row;
  gap: 16px;
}
.info-wrap .equip-slider:nth-of-type(1) .equip-list{
  width: calc(335px * 5); 
  animation: slide1 20s linear infinite;
}
.info-wrap .equip-slider:nth-of-type(2) .equip-list{
  width: calc(335px * 7); 
  animation: slide2 40s linear infinite;
  margin: 20px 0;
}
.info-wrap .equip-slider:nth-of-type(3) .equip-list{
  width: calc(335px * 6); 
  animation: slide3 30s linear infinite;
}
@keyframes slide1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-351px *  5));
  }
}
@keyframes slide2{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-351px *  7));
  }
}
@keyframes slide3{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-351px *  6));
  }
}
.equip-list li{
  flex: 0 0 335px;
  width: 335px;
  height: 126.6667px;
  padding: 16px 16px 16px 12px;
  border-radius: 12px;
  background-color: #F5F8FC;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.equip-list li .img-wrap{
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
}
.equip-list li .img-wrap img{
  width: 100%;
}
.equip-list dt{
  color: var(--Color-Text-black, #11151C);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  color: var(--Color-Text-black, #11151C);
  padding-bottom: 4px;
}
.equip-list dd{
  color: var(--Color-Text-gray-01, #717D8E);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 19.5px */
}
.info-wrap .report-list{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.info-wrap .report-list li{
  width: 320px;
  flex: 0 0 320px;
}
.info-wrap .report-list li .img-wrap{
  width: 100%;
  user-drag: none;
  -webkit-user-drag: none; /* Safari에서 필요 */
}
.info-wrap .report-list li .img-wrap img{
  width: 100%;
  user-drag: none;
  -webkit-user-drag: none; /* Safari에서 필요 */
}
.info-wrap .report-list li .text-wrap{
  padding-top: 12px;
  color: var(--Color-Text-gray-01, #717D8E);
  text-align: center;
  font-size: var(--font-size-sm, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
}
/* !info-wrap */

/* mechanic-wrap */
section.mechanic-wrap{
  background-color: #EDF4FC;
}
.mechanic-card-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 64px;
}

.mechanic-card-wrap .reserv-mechanic-card{
  border-radius: 12px;
  background: var(--color-static-white, #FFF);
  padding: 24px;
  width: 240px;
  height: 360px;
  flex: 0 0 240px;
}
.mechanic-card-wrap .reserv-mechanic-card h6{
  margin: 0;
  color: var(--color-neutral-600, #717D8E);
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  padding-bottom: 12px;
}
.mechanic-card-wrap .reserv-mechanic-card h4{
  color: var(--Color-Text-black, #11151C);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  padding-bottom: 150px;
}
.mechanic-card-wrap .reserv-mechanic-card button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #0c8;
  color: var(--color-static-white, #FFF);
  text-align: center;
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 600;
  border-radius: 8px;
}
.mechanic-wrap .mechanic-list-wrap{
  width: calc(100% - 252px);
  flex: 0 0 calc(100% - 252px);
}
.mechanic-wrap .mechanic-list{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.mechanic-wrap .mechanic-item{
  flex: 0 0 440px;
  width: 440px;
  height: 360px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mechanic-wrap .mechanic-item .img-wrap{
  width: 240px;
  height: 100%;
  position: relative;
  user-drag: none;
  -webkit-user-drag: none; /* Safari에서 필요 */
}
.mechanic-wrap .mechanic-item .img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-drag: none;
  -webkit-user-drag: none; /* Safari에서 필요 */
}

.mechanic-wrap .mechanic-item .img-wrap .img-text{
  position: absolute;
  left: 16px;
  bottom: 24px;
  color: var(--color-grey-grey-10, #EDF4FC);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 27px */
}
.mechanic-wrap .mechanic-item .text-wrap{
  background: #fff;
  width: 200px;
  height: 100%;
  padding: 16px;
  position: relative;
}
.mechanic-wrap .mechanic-item .text-wrap .mec-title{
  color: var(--Color-Text-black, #11151C);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  text-align: left;
}
.mechanic-wrap .mechanic-item .text-wrap .mec-name{
  color: var(--color-neutral-600, #717D8E);
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  text-align: left;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.mechanic-wrap .mechanic-item .text-wrap .mec-profile-img{
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  right: 16px;
  bottom: 16px;
}
.mechanic-wrap .mechanic-item .text-wrap .mec-profile-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* !mechanic-wrap */

/* review-wrap */
.review-wrap .review-box{
  margin-top: 64px;
  border-radius: 16px;
  background: var(--color-neutral-900, #2B323B);
  padding: 56px 0 56px 56px;
}
.review-category-list{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 32px;
}
.review-category-item{
  border-radius: 100px;
  background: #A9B4C4;
  color: var(--color-static-black, #11151C);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  white-space: nowrap;
  flex: 0 0 auto;
  width: fit-content;
  min-width: fit-content;
  max-width: none;
  box-sizing: border-box;
  cursor: pointer;
}
.review-category-item.active{
  background: #fff;
  font-weight: 700;
}
.review-tab-content .review-tabcon{
  display: none;
}
.review-tab-content .review-tabcon.active{
  display: block;
}
.review-list{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding-right: 56px;
}
.review-list .review-item{
  flex: 0 0 480px;
  width: 480px;
  height: 498px;
  padding: 40px;
  border-radius: 16px;
  background: var(--color-static-white, #FFF);
  box-shadow: 0 0 12px 0 rgba(46, 86, 136, 0.04);
  text-align: left;
}
.review-item .user-name{
  color: var(--color-green-700, #00B277);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  padding-bottom: 12px;
}
.review-item .review-title{
  color: var(--color-static-black, #11151C);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  padding-bottom: 12px;
}
.review-item .review-text{
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  color: var(--color-neutral-600, #717D8E);
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  word-break: break-word;
}
.review-car-info{
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--Color-Background-Common-Surface, #FFF);
  box-shadow: 4px 4px 12px 0 rgba(0, 39, 86, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-car-info .badge-wrap{
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.review-car-info .badge-wrap .badge{
  width: fit-content;
  height: 21px;
  line-height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  color: var(--color-static-white, #FFF);
  background: #FF5E60;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
}
.review-car-info .badge-wrap .badge.grade-badge.a{
  background: #2DA2FF;
}
.review-car-info .badge-wrap .badge.grade-badge.b{
  background: #02C258;
}
.review-car-info .badge-wrap .badge.grade-badge.c{
  background: #FFBA17;
}
.review-car-info .badge-wrap .badge.grade-badge.d{
  background: #FF5E60;
}
.review-car-info .badge-wrap .badge.advice-badge.a{
  background: #E7F4FF;
  color: #2DA2FF;
}
.review-car-info .badge-wrap .badge.advice-badge.b{
  background: #DBFFE3;
  color: #02C258;
}
.review-car-info .badge-wrap .badge.advice-badge.c{
  background: #FFF8CA;
  color: #FFBA17;
}
.review-car-info .badge-wrap .badge.advice-badge.d{
  background: #FFECF1;
  color: #FF5E60;
}
.review-car-info .review-car-name{
  color: var(--color-static-black, #11151C);
  font-size: var(--font-size-sm, 16px);
  font-weight: 600;
  line-height: 150%; /* 24px */
}
.review-car-info .flaw-count{
  color: var(--color-neutral-600, #717D8E);
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}
.review-car-info .review-img{
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
}
.review-car-info .review-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* !review-wrap */

/* step-wrap */
.step-wrap .step-list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 40px; */
  padding: 64px 0;
}
.step-wrap .step-list .step-item{
  flex: 1;
  position: relative;
}
.step-wrap .step-list .step-item::after{
  content: '';
  width: 34px;
  height: 6px;
  position: absolute;
  top: 49.5px;
  right: -17px;
  background: url('https://images.carvazo.com/carvazo/main/pc/home_test/250925/icon_dots.svg') center center / cover no-repeat;
}
.step-wrap .step-list .step-item:last-of-type::after{
  display: none;
}
.step-wrap .step-list .step-img{
  width: 124px;
  height: 124px;
  margin: 0 auto;
}
.step-wrap .step-list .step-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.step-wrap .step-list .step-title{
  padding-bottom: 12px;
  color: var(--Color-Text-black, #11151C);
  text-align: center;
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 27px */
}
.step-wrap .step-list .step-text{
  color: var(--color-neutral-600, #717D8E);
  text-align: center;
  font-size: var(--font-size-sm, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}
.step-wrap .step-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  width: 335px;
  height: 56px;
  line-height: 56px;
  border-radius: var(--Radius-8, 8px);
  border: 1px solid var(--color-neutral-200, #D9E1EE);
  background: var(--color-static-white, #FFF);
  color: var(--color-static-black, #11151C);
  text-align: center;
  font-size: var(--font-size-md, 18px);
  font-style: normal;
  font-weight: 600;
}
/* !step-wrap */

/* 장비 모달 */
.equipment-list-modal{
  position: fixed;
  z-index: 999;
  display: none;
}
.equipment-list-modal.on{
  display: block;
}
.equipment-list-modal .modal-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: var(--color-basic-black-70, rgba(17, 21, 28, 0.70));
  z-index: 10;
}

.equipment-list-modal .modal-box{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #fff;
  width: 420px;
  height: 80%;
  z-index: 999;
  border-radius: 8px;
  transition: 0.5s;
}
.equipment-list-modal .modal-header{
  width: 100%;
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.equipment-list-modal .modal-header .modal-close{
  width: 64px;
  height: 64px;
  cursor: pointer;
}
.equipment-list-modal .modal-header .modal-close svg{
  width: 24px;
  height: 24px;
}
.equipment-list-modal .modal-title-wrap{
  padding: 0 20px 16px;
}
.equipment-list-modal h4{
  color: var(--Color-Text-black, #17191C);
  font-size: var(--Size-Font-Heading-H2, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.equipment-list-modal h4 em{
  color: var(--Color-Text-green, #00B277);
  font-size: var(--Size-Font-Heading-H2, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 30px */
}
.equipment-list-modal h6{
  margin: 0;
  color: var(--Color-Text-gray-01, #717D8E);
  font-size: var(--size-font-body-body-1, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
  padding-top: 16px;
}

.equipment-list-modal .modal-contents{
  height: calc(100% - 177px);
  overflow: auto;
  padding: 0 20px 20px;
  box-sizing: border-box;
}

.equipment-list-modal .modal-contents li{
  padding: 16px 16px 16px 12px;
  margin-top: 8px;
  border-radius: 12px;
  background-color: #F5F8FC;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.equipment-list-modal .modal-contents li:last-of-type{
  margin-bottom: 20px;
}
.equipment-list-modal .modal-contents li .img-wrap{
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
}
.equipment-list-modal .modal-contents li .img-wrap img{
  width: 100%;
}
.equipment-list-modal .modal-contents dt{
  color: var(--Color-Text-black, #11151C);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  color: var(--Color-Text-black, #11151C);
  padding-bottom: 4px;
}
.equipment-list-modal .modal-contents dd{
  color: var(--Color-Text-gray-01, #717D8E);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 19.5px */
}
/* !장비 모달 */
/* !video-wrap */



/* outro-wrap */
#page-wrap > section.outro-wrap{
  text-align: center;
  display: block;
  background:url('https://images.carvazo.com/carvazo/main/pc/home_test/250602/outro_bg.webp') right bottom / cover no-repeat;
}
#page-wrap > section.outro-wrap .inner{
  padding: 91px 0;
}
#page-wrap .outro-wrap .text-wrap{
  width: 100% !important;
  margin: 0;
  text-align: center;
}
.outro-wrap .title-wrap h6{
  margin: 0;
  padding-bottom: 16px;
  color: var(--color-green-500, #0C8);
  text-align: center;
  font-size: var(--font-size-xl, 26px);
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.outro-wrap .title-wrap h3{
  color: var(--color-static-white, #FFF);
  text-align: center;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 54px */
  padding-bottom: 24px;
}
.outro-wrap .title-wrap h5{
  color: var(--color-neutral-400, #A9B4C4);
  text-align: center;
  font-size: var(--font-size-lg, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 30px */
}
/* !outro-wrap */

/* 프로모션 모달 */
.discount-modal.layer-modal-wrap .layer-modal{
  width: 420px;
}
.discount-modal .img-wrap{
  position: relative;
}
.item-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  gap: 8px;
  width: 248px;
}
.time-card {
  flex: 1;
  width: 25%;
  height: 72px;
  border-radius: 8px;
  background: #192438;
  text-align: center;
  color: #BDF03B;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.time-card canvas{
  top: 8px;
  position: relative;
}
.time-word {
  text-align: center;
  color: #C1C9D6;
  font-size: var(--font-size-2xs, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 18px */
}
/* !프로모션 모달 */