@charset "UTF-8";

/**
 * @package ZMLDown\Assets\Css
 *
 * 前端显示样式
 *
 * @since 1.0.0
 */

.zml-down-panel {
	width: 100% !important;
	height: 150px !important;
	margin: 20px auto !important;
	background-color: #fff !important;
	border: 1px solid #dedede !important;
	overflow: hidden !important;
	position: relative !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

.zml-down-panel .info-base {
	width: 100% !important;
	height: 100% !important;
	padding: 20px 10px 10px 160px !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	z-index: 1 !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}

.zml-down-panel .info-base span {
	color: #333 !important;
	width: 100% !important;
	margin: 20px 0 0 0 !important;
	padding: 0 !important;
	font-size: 26px !important;
	font-weight: bold !important;
	line-height: 30px !important;
	text-align: center !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	display: inline-block !important;
}

.zml-down-panel .info-base p {
	color: #333 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	line-height: 30px !important;
	text-align: center !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.zml-down-panel .info-more {
	position: absolute !important;
	width: 150px !important;
	height: 100% !important;
	background: #f8f8f8 !important;
	transition: width 0.4s !important;
	overflow: hidden !important;
	z-index: 2 !important;
}

.zml-down-panel:hover .info-more {
	width: 100% !important;
	border-radius: 0 !important;
}

.zml-down-panel .info-more .info-icon {
	width: 150px !important;
	height: 100% !important;
	padding: 10px !important;
	position: relative !important;
	float: left !important;
}

.zml-down-panel:hover .info-more .info-icon::after {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	height: 100% !important;
}

.zml-down-panel .info-more .info-icon img {
	width: 130px !important;
	height: 130px !important;
}

.zml-down-panel .info-more .info-link {
	width: 100% !important;
	height: 100% !important;
	line-height: 130px !important;
	text-align: center !important;
	vertical-align: middle !important;
	padding: 10px 10px 10px 10px !important;
}

.zml-down-panel .info-more .info-link a {
	color: #333 !important;
	text-decoration: none !important;
}

.zml-down-button {
	width: 100% !important;
	margin: 20px auto !important;
}

.zml-down-button a {
	color: #fff !important;
	background-color: #2271b1 !important;
	text-align: center !important;
	line-height: 1 !important;
	padding: 12px 20px !important;
	border: none !important;
	border-radius: 5px !important;
	cursor: pointer !important;
	outline: none !important;
	display: inline-block !important;
}

.zml-down-button a:hover {
	color: #fff !important;
	background-color: #c14036 !important;
}

.zml-down-link {
	width: 100% !important;
	margin: 20px auto !important;
}

.zml-down-link a {
	text-decoration: none !important;
}