/*=模糊UI背景=*/
.bg-tm {
  border: none;
  outline-style: none;
  padding: 0 18px;
  background:hsla(0,0%,100%,.2);
  backdrop-filter: blur(5px);
  color: #FFFFFF;
}


/*=按钮=*/
.button-black
{
	color:#ffffff;	
border:1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;
background: -webkit-linear-gradient(top,#656565,#4c4c4c);
background: -moz-linear-gradient(top,#656565,#4a4a4a);
background: linear-gradient(top,#656565,#4a4a4a);
backdrop-filter: blur(5px);
}
.button-black:hover
{
	color:#fcffa2;	
border:1px solid #333;
box-shadow: 1 2px 2px #8b8b8b inset,-1 -2px 0 #3d3d3d inset,0 -3px 2px #8b8b8b inset;
background: -webkit-linear-gradient(top,#757575,#4c4c4c);
background: -moz-linear-gradient(top,#757575,#4a4a4a);
background: linear-gradient(top,#757575,#4a4a4a);
}
.button-black:active
{
	color:#fcffa2;	
border:1px solid #333;
box-shadow: 1 2px 2px #8b8b8b inset,-1 -2px 0 #3d3d3d inset,0 -3px 2px #8b8b8b inset;
background: -webkit-linear-gradient(top,#4a4a4a,#666666);
background: -moz-linear-gradient(top,#4a4a4a,#666666);
background: linear-gradient(top,#4a4a4a,#666666);
}

.btn-geren
{
	border:0px solid #333;
	background:url("image/新个人按钮.png");
	font-family: 'OPPOSans', sans-serif; 
	letter-spacing: 0.2em; 
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat; 
	color:#fff;	
}
.btn-geren:hover
{
	border:0px solid #333;
	background:url("image/新个人按钮2.png");
	font-family: 'OPPOSans', sans-serif; 
	letter-spacing: 0.2em; 
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat; 
	color:#bdf2ff;	
}
.btn-geren:active
{
	border:0px solid #333;
	background:url("image/新个人按钮3.png");
	font-family: 'OPPOSans', sans-serif; 
	letter-spacing: 0.2em; 
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat; 
	color:#c7ecf5;	
}


/*=输入框=*/

.input-yuan {
  border: none;
  outline-style: none;
  font-size: 18px;
  color: #333333;
  padding: 0 18px;
  border-radius: 28px;/* 圆角 */
  background: #f5f5f5;
  box-shadow: 2px 2px 6px #b8b8b8, -2px -2px 6px #ffffff, inset 0 0 0 #b8b8b8, inset 0 0 0 #ffffff; /* 右下和左上的发光。 */
  transition: all .24s ease-in-out;
}
.input-fang {
  border: none;
  outline-style: none;
  font-size: 18px;
  color: #333333;
  padding: 0 18px;
  background: #f5f5f5;
  box-shadow: 2px 2px 15px #b8b8b8, -2px -2px 15px #ffffff, inset 0 0 0 #b8b8b8, inset 0 0 0 #ffffff;
}
.input-tmfang {
  border: none;
  outline-style: none;
  font-size: 18px;
  padding: 0 18px;
  box-shadow: 1px 1px 10px #b8b8b8, -1px -1px 10px #ffffff, inset 0 0 0 #b8b8b8, inset 0 0 0 #ffffff;
  background:hsla(0,0%,100%,.2);
  backdrop-filter: blur(5px);
  color: #FFFFFF;
}

/*滑动条*/
.input[type="range"] {
  width: 100%;
  margin: 10px 0;
  -webkit-appearance: none; /* 覆盖默认外观 */
  background: #ddd; /* 轨道颜色 */
  height: 10px;
  border-radius: 5px;
}
 
.input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* 覆盖默认外观 */
  height: 23px; /* 设置滑块高度 */
  width: 23px; /* 设置滑块宽度 */
  background: #333; /* 滑块颜色 */
  border-radius: 50%; /* 滑块设为圆形 */
  cursor: pointer; /* 将鼠标指针变为指针样式 */
  margin-top: 0px; /* 使滑块垂直居中 */
}
 
.input[type="range"]:focus {
  outline: none; /* 去除焦点时的轮廓线 */
}