.h1 {
	text-align: center;
	color: red;
}

.voice-box {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	margin: 50px auto;
	/* 	padding: 50px;
	width: 60%; */
	/* border: 1px solid gray; */
	border-radius: 3px;
}

.voice-box input {
	box-sizing: border-box;
	padding: 10px;
	width: 70%;
	height: 50px;
	font-size: 18px;
	color: #187cff;
	/* border       : 1px solid #187cff; */
	border-radius: 3px 0px 0px 3px;
}

.voice-box button {
	width: 40%;
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	color: white;
	background: #187cff;
	border: none;
	border-radius: 0px 3px 3px 0px;
	cursor: pointer;
}

.voice-box button::before {
	content: "";
	display: inline-block;
	width: 23px;
	height: 26px;
	vertical-align: middle;
	background: url(../img/voice.png) no-repeat;
	background-size: contain;

}

.fixed-box {
	box-sizing: border-box;
	display: none;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	border: .04rem solid #e0e7ff;
	background: rgba(16, 22, 62, .2);
}

.fixed-box1 {
	box-sizing: border-box;
	position: fixed;
	/* right: 0px; */
	bottom: 10px;
	/* left: 40%; */
}

.fixed-bottom {
	width: 100vw;
	text-align: center;
}

.fixed-close {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 24px;
	width: 20px;
	height: 20px;
	border: none;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABeklEQVRIibXWsWoVQRQA0LObgGCTFFr6env9h/yETSz0tclrBEUJWhjzAqkV/A9/QrC2CtgIYqk2DwvdMExm991ZJrdaZoY53Bnm3u0Wy80BPuI21jjRPjqc4il+4FG3WG4ucS9ZtMaqMfoej5OxLz3uZAuPcXaDKNzt/TuCPFrgYyi87fEK543xKfQFLvoEaYVvQ19DnwxO4euWaA5P4UcBPIzCbmHRcYLleDqfox9wGEG5nnGKRzOvRilnnOIDluPD/BT6HG/GNp+CI/j+HDQCR/BqlPE7LuGlO5+F1sARPIzWwh32Jub3K/YKw1PFYYgV3rWEI2iKh2r7NnhbGZzdWKaeU03tzZ/W8ARH/2TGMq5BZ7XUElzVZebiOTzU3ho0RUqts4in8Kwuk8Uqig/wti4TQSP41XgfQMNlMIBf9fPd/x8t0RTn+h/LEX52i+XmN241RtM4K+Dfe3y7QZTysV/u7D18+RkP8AfPxPpubXzCL9zHVzz5C8ecbD1n3xuUAAAAAElFTkSuQmCC) no-repeat center center;
	background-size: 20px;
	transition: all .5s;
	cursor: pointer;
	outline: none;
}

.fixed-close:hover {
	transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
}


.fixed-main {
	box-sizing: border-box;
	position: absolute;
	left: 20%;
	bottom: 0px;
	padding: 30px;
	width: 60%;
	height: 240px;
	font-size: 18px;
	background: white;
	border: 2px solid #e0e7ff;
	border-radius: 5px 5px 0px 0px;
	overflow-y: auto;
}

.fixed-icon {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
	width: 100px;
	height: 100px;
	background: linear-gradient(115deg, #56d8e4 5%, #9f01ea 95%);
	border: 1px solid #e0e7ff;
	border-radius: 50%;
}

.fixed-icon::before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 1px solid #9f01ea;
	box-shadow: 0px 0px 6px 0px #9f01ea;
	border-radius: 50%;
	animation: move 1.5s infinite;
}

.fixed-icon::after {
	content: "";
	position: absolute;
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 1px solid #56d8e4;
	box-shadow: 0px 0px 6px 0px #56d8e4;
	border-radius: 50%;
	animation: move 1.5s .5s infinite;

}

.fixed-icon img {
	width: 30px;
	height: 50px;
}

@keyframes move {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(2);
	}
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #f9f9f9;
}

::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background-color: #187cff;
}