/* 테스트 */
/* 가격범위 */
.cur_cost { padding-top:10px; color:gainsboro; font-weight:bold; }
/*
.cur_cost { padding-top:10px; color:var(--logocolor); font-weight:100; }
.min_cost, .max_cost { color:var(--usercolor); font-weight:bold; }
*/
.amount_range {	padding: 0 4px; }
/* 평균좌표 */
.ave_location_div .ave_left { top:20px; }
.ave_cost { transform: translateX(-50%); color: #F6EFC8; font-size: 13px; font-weight:bold; }
.ave_cost_div .ave_left { top:10px; }
.ave_location_div .ave_left { top:25px; }
.ave_location { font-size: 38px; color: #DD9866; transform: translateX(-50%); }

/* 최대값 좌표 */
.cur_location { transform:translateX(50%); }
.cur_cost_div .cur_cost { transform:translateX(50%); }
.cur_location_div .cur_location i { font-size:38px; }
.cur_location_div .cur_right { top:25px; }
.cur_cost_div .cur_right { top:-10px; width:100px; }


/* 슬라이더 */

.cost_slider {
	margin: 0;
	padding: 0;
  max-width:640px;
	width:100%;
	margin-top:-20px;
	/*margin-top:10%;*/
	/*
	display: flex;
	justify-content: center;
	align-items: center;
	*/
}

.middle {
	position: relative;
	width: 80%;
	max-width: 640px;
}

.slider {
	position: relative;
	z-index: 1;
	height: 10px;
	margin: 0 10px;
}
.slider > .track {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	border-radius: 5px;
	background-color: #bae0ff;
}
.slider > .range {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	border-radius: 5px;
	background-color: #0c62a7 ;/*#0175ff*/
}
.slider > .thumb {
	position: absolute;
	z-index: 3;
	width: 20px;
	height: 20px;
	background-color: #0c62a7;/*#0175ff*/
	border-radius: 50%;

	box-shadow: 0 0 0 0 rgba(1,117,255,.1);
	transition: box-shadow .3s ease-in-out;
}
.slider > .thumb.left {
	transform: translate(-10px, -5px);
}
.slider > .thumb.right {
	transform: translate(10px, -5px);
}
.slider > .thumb.hover {
	cursor: pointer;
	box-shadow: 0 0 0 20px rgba(1,117,255,.1);
}
.slider > .thumb.active {
	box-shadow: 0 0 0 40px rgba(1,117,255,.1);
}
.slide_cost_div { width:100%; display:flex; flex-direction: row; justify-content: center; top:5%; font-size: var(--f-large);}
.out-hipen { padding: 0 2%; }
#input-right:hover, #input-left:hover {
	cursor: pointer;
}
.cost_range_info { font-family:'Nanum Gothic'; font-size: var(--f-large); width:100%; padding:5%; margin-top:70px; color:#ff0052; }
.cost_average { font-weight: bold;}
.slide_cost_div_rela {width:100%; position:relative;}
.slide_cost_div_absol { position:absolute; /*top:70px;*/ left:0; z-index:1; width:100%; font-weight: bold;}
.middel_div { width:100%; margin-top:80px; display:flex; justify-content: center; }
.slide_cost_div_flex { width:100%; display:flex; justify-content: center;}

input[type=range] {
	position: absolute;
	pointer-events: none;
	-webkit-appearance: none;
	z-index: 2;
	height: 10px;
	width: 100%;
	opacity: 0;
}
input[type=range]::-webkit-slider-thumb {
	pointer-events: all;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 0 none;
	background-color: red;
	-webkit-appearance: none;
}

/*눈금자*/
.ruler_ul li { list-style: none; }
.ruler_ul {
	display:flex;
	font-size:10px;
	justify-content: space-between;
  padding:0;
}
.ruler_ul span {
	/*color:white;*/
	color:var(--bgcolor);
}
/*
.ruler_ul li{
	width:10%;
	text-align: center;
}
*/
.ruler_div { 
	width:100%;
	display:flex;
	justify-content: center;
	/*margin-top:10px;*/
}
.ruler_rela { width:80%; position: relative;}
.ruler_absol { width:100%; position: absolute; color:#929292; }
/* 단위 */
.unit_div { display:flex; width:100%; margin-top:25px; justify-content: center;}
.unit { width:80%; text-align: end; font-size: 10px; z-index:1; color:#929292;}