.key-metrics-frame{
position:absolute;
border: 1px solid black;
border-radius:5px;
background-color:white;
overflow:hidden;
/*
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
*/
display:grid;
place-items:center;
}

.key-metrics-frame-left{
position:absolute;
border: 1px solid black;
border-radius:5px;
background-color:white;
overflow:hidden;


}

.triangle-frame{
display: flex;
justify-content: space-between;
margin-top: -10px;
margin-bottom: 5px;
padding-bottom:5px;

}

.triangle-left {

	padding-top: 5px;
	margin-left:10px;
}

.triangle-right {
	padding-top: 5px;
	margin-right:10px;
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #00ff00;
  float:left;
  margin-top: 8px;
}



.triangle-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ff0000;
  float:left;
  margin-top: 5px;
}


.triangle-number-info{
color:#000000;
float:left;
font-size:1.7vh; //clamp(7px, 1.7vh, 12px);
}

.triangle-number-up{
color:#ff0000;
float:left;
font-size:1.7vh; //clamp(7px, 1.7vh, 12px);
}

.triangle-number-down{
color:#00ff00;
--text-align: center;
--display: inline-block;
font-size:1.7vh; //clamp(7px, 1.7vh, 12px);
float:left;
}



.key-metrics-remark{
text-align: center;  /*水平居中*/
font-size:2.0vh;//clamp(10px, 2.0vh, 20px);
margin-top:10px;

}

.key-metrics-remark-left{
font-size:2.0vh;
margin-left: 1vh;
text-align: left;
}

.key-metrics-value {
color:#000000;		
margin-left: 10px;	
margin-right: 10px;
margin-bottom:5px;
font-size:3.5vh; //clamp(14px, 3.5vh, 25px);
text-align: center;
--border:1px solid black;

}

.key-metrics-value-left {
color:#000000;		
font-size:3.5vh;
margin-left: 1vh;
text-align: left;
--border:1px solid black;
}