@charset "utf-8";
	html,body,div,section,header,footer,button,input,textarea,p,ul,li {
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:Microsoft Yahei,"微软雅黑","Helvetica Neue",Helvetica,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;
}
img {
	outline:none;
}
html,body {
	width:100%;
	height:100%;
	overflow-x:hidden;
}
/* 搜索框 */
#search {
	position:relative;
	height:40%;
	min-height:314px;
	max-height:510px;
	margin:0 auto;
	text-align:center;
}
#search-form {
	position:absolute;
	width:100%;
	bottom:0;
}
.search-form-group {
	position:relative;
	max-width:655px;
	margin:0 auto;
}
.search-form-input {
	position:absolute;
	left:0;
	right:108px;
	vertical-align:top;
	overflow:hidden;
}
.search-form-input input {
	width:100%;
	height:44px;
	padding:12px 16px;
	font-size:16px;
	outline:0;
	box-shadow:none;
	border-radius:10px 0 0 10px;
	border:2px solid #c4c7ce;
	border-right:none;
	background:#fff;
	color:#222;
}
.search-form-group input:hover {
	border-color:#9195a3;
}
.search-form-group input:focus {
	border-color:#4e6ef2;
}
.search-form-group button {
	cursor:pointer;
	width:108px;
	height:44px;
	line-height:45px;
	padding:0;
	background:#4e6ef2;
	border-radius:0 10px 10px 0;
	font-size:17px;
	color:#fff;
	box-shadow:none;
	font-weight:400;
	border:none;
	outline:0;
	float:right;
	z-index:1;
}
.search-form-group button:active {
	background-color:#4662d9;
}
.search-form-group button:hover {
	background-color:#4662d9;
}
.search-header {
	position:absolute;
	bottom:60px;
	width:100%;
}
.search-header h2 {
	font-size:24px;
	font-weight:900;
}
.search-header img {
	display:inline-block;
	width:270px;
	margin:0 -12px -16px;
}
/* 功能区 */
#function {
	position:absolute;
	width:100%;
	min-height:220px;
	text-align:center;
	margin-top:80px;
}
#tips {
	color:#9195a3;
	font-size:16px;
}
#stop {
	display:none;
	border:none;
	padding:8px 15px;
	border-radius:100px;
	color:#bababa;
	background:#f1f1f1;
	outline:none;
	cursor:pointer;
	margin-top:50px;
}
#output {
	display:none;
	width:100%;
	max-width:400px;
	margin:20px auto;
}
#output textarea {
	width:100%;
	padding:5px 8px;
	border-radius:3px;
	border:1px solid #c8c8c8;
	outline:none;
	word-break:break-all;
}
#output textarea:focus {
	border-color:#4285f4;
	box-shadow:0 0 2px #4285f4;
}
#output .tool-btns {
	text-align:right;
	margin-top:8px;
}
#output button {
	outline:none;
	cursor:pointer;
	color:#fff;
	background:#3f89ec;
	border:none;
	margin-left:8px;
	padding:6px 14px;
	border-radius:3px;
}
#output button:hover {
	background:#4490f7;
}
#output button:focus {
	background:#3a84e8;
}
/* 页脚 */
#footer {
	width:100%;
	position:fixed;
	z-index:100;
	bottom:0;
	left:0;
	/*height:40px;
	line-height:40px;*/
	font-size:12px;
	overflow:hidden;
	/*background-color:#fafafa;*/
	padding:0 20px;
	text-align: center;
	width: 100%;
}
#footer li {
	list-style:none;
	display:inline-block;
	float:left;
	padding:0 10px;
}
.footer-left,.footer-left a {
	color:#9195a3;
	text-decoration:none;
}
.footer-right {
	float:right;
}
.footer-right,.footer-right a {
	color:#bbb;
}
/* 鼠标指示箭头 */
#arrow {
	display:none;
	position:absolute;
	left:0;
	top:0;
	width:50px;
	height:50px;
	z-index:999;
	background:url(../img/arrow.png) no-repeat;
}
#arrow::after {
	content:'';
	position:absolute;
	top:-13px;
	left:-15px;
	z-index:-1;
	border-radius:9em;
	box-shadow:0 0 0 7px rgba(0,0,0,.4);
	width:30px;
	height:30px;
	opacity:0;
}
#arrow.active::after {
	-webkit-animation:bubble-scale 1s ease;
	animation:bubble-scale 1s ease;
}
@-webkit-keyframes bubble-scale {
	from {
	transform:scale(0);
	opacity:1
}
to {
	transform:scale(2);
	opacity:0
}
}@keyframes bubble-scale {
	from {
	transform:scale(0);
	opacity:1
}
to {
	transform:scale(2);
	opacity:0
}
}/* 响应式优化 */
@media screen and (max-width:650px) {
	#search {
	margin:0 10px;
	height:auto;
	min-height:200px;
}
.search-header img {
	width:180px;
	margin:0 -16px -12px;
}
#search-form {
	bottom:10px;
	border:1px solid #363636;
}
.search-form-input {
	right:81px;
}
.search-form-input input {
	border:none;
	border-radius:0;
	padding:12px;
}
.search-form-group button {
	width:81px;
	height:44px;
	padding:0 10px;
	border:none;
	border-left:1px solid #e8e8e8;
	border-radius:0;
	font-size:16px;
	font-weight:700;
	line-height:46px;
	white-space:nowrap;
	letter-spacing:-1px;
	color:#38f;
	background:#fff;
}
.search-form-group button:active {
	background-color:#fdfafa;
}
.search-form-group button:hover {
	background-color:#fdfafa;
}
#function {
	position:relative;
	top:0;
	margin-top:50px;
	padding:0 10px;
}
#stop {
	margin-top:30px;
}
#footer {
	padding:0;
}
#arrow {
	background:url(../img/hand.png) no-repeat;
}
}