@charset "UTF-8";
@keyframes width {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.index_header .container {
  /*padding-top: 3rem;*/
}
.index_header .container .tit {
  font-family: "Enter Sansman Bold";
  color: #ff3939;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.index_footer .container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background: #fff;
}
.index_footer .container::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #d8d8d8;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.index_footer .container .gnb .gnb_list {
  grid-template-columns: repeat(4, 1fr);
  padding: 1.5rem 0;
}
.index_footer .container .gnb .gnb_list a .img_box {
  width: 3.8rem;
  height: 3.8rem;
}
.index_footer .container .gnb .gnb_list a .img_box span {
  font-size: 3.1rem;
  color: #5c5c5c;
}
.index_footer .container .gnb .gnb_list a .tit {
  color: #5c5c5c;
  font-size: 1.3rem;
  font-weight: 400;
}
.index_footer .container .gnb .gnb_list a.active .img_box span {
  color: #6285ff;
}
.index_footer .container .gnb .gnb_list a.active .tit {
  color: #6285ff;
  font-weight: 500;
}

@media screen and (min-width: 1024px) {
  .index_header .container {
    margin-top: 3rem;
  }
  .index_header .container .tit {
    font-size: 4rem;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 65%;
  }
}
@media screen and (max-width: 375px) {
  html {
    font-size: 61.5%;
  }
}
@media screen and (max-width: 365px) {
  html {
    font-size: 59%;
  }
}
@media screen and (max-width: 350px) {
  html {
    font-size: 57%;
  }
}
@media screen and (max-width: 340px) {
  html {
    font-size: 55%;
  }
  body {
    min-width: 310px;
  }
}




main {
	max-width:1100px;
	margin:0 auto;
}
main>.container {
	padding: 2rem;
	margin-bottom: 80px;
}
.fixed {
	display:flex;
	flex-wrap:wrap;
}
.fixed.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
	z-index: 1000;
	width:100%;
	padding:2rem;
	background:#fff;
}
#closeBtn {
	color:#5C5C5C;
	margin-left:auto;
	margin-right:0;
	display:block;
	font-weight:500;
}
.status {
	width:100%;
	margin-top:1rem;
	background:#DDDCDC;
	border-radius:10px;
	height:10px;
}
.status .line {
	position:relative;
	height:100%;
	width:20%;
	background:#7B97FF;
	border-radius:10px;
	transition:.3s;
}
.status span {
	position:absolute;
	top:50%;
	left:calc(100% + 5px);
	transform:translateY(-50%);
	font-size:13px;
	color:#7B97FF;
}

form {
	margin-top:65px;
}
.bot {
	background:#E6F0FF;
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	padding:12px;
	color: #494848;
	position:relative;
	border-radius:10px;
	margin-bottom:30px;
}
.bot::before {
	position:absolute;
	content:'';
	top:-7px;
	left:0;
	z-index:1;
	width:69px;
	height:22px;
	background-image:url(../../../img/bot.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.user {
	margin-bottom:30px;
}
.user button {
	color:#fff;
	font-size:16px;
	font-weight:500;
	background:#84B9FF;
	padding:12px 0;
	width:80px;
	border-radius:10px;
}

#search .bot {
	width:50%;
	text-align:right;
}
#search .user {
	display:flex;
	justify-content:flex-end;
}
#search .select_box {
	position:relative;
	margin-right:7px;
}
#search .select_box::after {
	position:absolute;
	content:'';
	top:50%;
	transform:translateY(-50%);
	right:10px;
	z-index:1;
	width:16px;
	height:14px;
	background-image:url(../../../img/arrow_bottom.svg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
#search select {
	height:100%;
	color:#494848;
	font-size:16px;
	font-weight:500;
	padding:12px 30px 12px 10px;
	appearance:none;
	border-radius:10px;
	background:#BFDBFF;
	border:none;
	min-width:130px;
}
#search .user.other {
	width:90%;
	flex-wrap:wrap;
	margin-left:auto;
}
#search .user.other .filter {
	width:100%;
	background:#BFDBFF;
	border-radius:10px;
	padding:25px 30px 30px;
	margin-bottom:7px;
}

.filter_box:not(:last-child) {
	margin-bottom:3rem;
}
.filter_box .tit {
	color: #5c5c5c;
	font-size: 1.7rem;
	font-weight: 400;
	margin-left:-1rem;
	margin-bottom: 5.5rem;
}
.filter_box .range.ui-widget-content {
    border: none;
    background: #efefef;
    height: 0.4rem;
}
.filter_box .range.ui-widget-content .ui-slider-range {
    top: 50%;
    transform: translateY(-50%);
    background: #a6baff;
    height: 0.7rem;
}
.filter_box .range.ui-widget-content .ui-state-default {
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 100%;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.filter_box .range.ui-widget-content .ui-state-default .txt {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 5.3rem;
    line-height: 2.6rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 0.6px solid #cdcdcd;
    background: #fff;
    color: #848484;
    font-size: 1.2rem;
    font-weight: 400;
}
.filter_box .hidden {
    display: none;
}

#loading {
	display:none;
}
#loading .bot {
	text-align:center;
	padding:20px;
}
#loading > div {
	text-align:center;
	position:relative;
}
#loading .flag {
	width:143px;
	margin-right:65px;
	margin-bottom:140px;
}
#loading #rocketAnim {
	width:200px;
	position:absolute;
	top:40px;
	left:calc(50% - 70px);
}
#loading p {
	color:#2B68F9;
	font-size:18px;
	text-align:center;
}

#result {
	display:none;
}
#result .bot {
	text-align:center;
	padding:20px;
}
#result .flag_box {
	display:flex;
	align-items:center;
	border-radius:10px;
	border:1px solid #000;
	padding:10px 24px;
}
#result .flag_box p,
#result .flag_box div {
	width:50%;
}
#result .flag_box p span {
	position:relative;
	display:inline-block;
	font-size:16px;
	font-weight;:600;
	color:#5C5C5C;
}
#result .flag_box p span::after {
	position:absolute;
	content:'';
	width:100%;
	height:1px;
	background:#737373;
	left:0;
	bottom:-2px;
}
#result .flag_box div {
	border-left:1px solid #737373;
}
#result .flag_box img {
	max-width:85px;
	margin:0 auto;
	display:block;
}
#filter {
	border: 1px solid #ddd;
	border-radius: 5px;
	color: #626262;
	font-size: 1.2rem;
	font-weight: 300;
	margin:10px 0 10px auto;
	display:block;
}
#carList a {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;	
	padding:15px 19px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
	border-radius: 9px;
	margin-bottom:20px;
	
}
#carList .name {
	font-size:16px;
	color:#5C5C5C;
	width:100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom:7px;
}
#carList .type {
	font-size:12px;
	font-weight:600;
	color:#D10505;
}
#carList .price {
	font-size:15px;
	font-weight:700;
	color:#6285FF;
}
.maximun {
	text-align:center;
	color:#8F8D8D;
	font-size:20px;
	position:relative;
	z-index:1;
	margin:10px 0 40px;
}
.maximun::before {
	position:absolute;
	z-index:-1;
	content:'';
	bottom:2px;
	left:50%;
	transform:translateX(-50%);
	width:80%;
	border-radius:9px;
	background:#DDDCDC;
	height:4px;
	max-width:232px;
}
#result .user {
	display:flex;
	justify-content:space-between;
}
#result .user input {
	height:100%;
	color: #494848;
	font-size: 16px;
	font-weight: 500;
	padding: 12px 10px;
	border-radius: 10px;
	background: #BFDBFF;
	border: none;
	width:calc(100% - 80px - 10px);
	text-align:center;
}
#result .user input:placeholder {
	color:#A8A8A8;
}