.gro1 {
  border-radius: 10px;
  height: 49px;
  width: 22%;
  transition: height 0.125s;
  text-align: center;
  overflow: hidden;
}
.gro1:hover {
  height: 145px;
}
.gro2 {
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  height: 49px;
  max-width: 200px;
  transition: max-width 0.125s;
  overflow: hidden;
  white-space: nowrap;
}
.gro2:hover {
  max-width: 100%;
}

.cnt {
	height: 48px;
	width: 80%;
	background: pink;
}

body{
	font-family: sans-serif;
}
.lb{
	height: 100%;
	color: cyan;
	float: left;
	cursor: pointer;
/*	background-color: #C3C4CB;*/
	background-color: #F1F1F1;
	border: none;
	display: flex;
	text-align: left;
	word-break: keep-all;
	overflow: visible;
/*	flex: 1;*/
	margin: 0;
	flex-direction: column;
}

.in {
	max-width: 32px;
	float: right;
	background: red;
	padding: 8px;
	white-space: nowrap;
	border-radius: 24px;
	transition: max-width 0.5s;
	overflow: hidden;
	z-index: 10;
}

.ins {
	display: inline-block;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
}

.in:hover {
	max-width: 100%;
}

.ins > * {
	padding: 4px;
}

.inm {
	vertical-align: top;
	font-size: 24px;
}

.zi {
	z-index: -1;
}

.pm {
	cursor: pointer;
	border: 2px solid;
	background: white;
	border-radius: 24px;
}