@font-face {
	font-family: icomoon;
	src: url(../fonts/icomoon.eot?#iefixrretjt) format("embedded-opentype"), url(../fonts/icomoon.woff?rretjt) format("woff"), url(../fonts/icomoon.ttf?rretjt) format("truetype"), url(../fonts/icomoon.svg?rretjt#icomoon) format("svg");
	font-weight: 400;
	font-style: normal;
}
[class^=icon-] {
	text-transform: none; line-height: 1; font-family: icomoon; font-style: normal; font-variant: normal; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none;
}
[class*=' icon-'] {
	text-transform: none; line-height: 1; font-family: icomoon; font-style: normal; font-variant: normal; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none;
}
body {
	margin: 0px; padding: 0px; font-size: 100%;
}
html {
	margin: 0px; padding: 0px; font-size: 100%;
}
* {
	box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
*::after {
	box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
*::before {
	box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
}
.clearfix::before {
	display: table; content: " ";
}
.clearfix::after {
	display: table; content: " ";
}
.clearfix::after {
	clear: both;
}
body {
	background: rgb(73, 74, 95); color: rgb(213, 214, 226); font-family: microsoft yahei,segoe ui,lucida grande,Helvetica,Arial,sans-serif; font-size: 1.05em; font-weight: 500;
}
a {
	transition:0.2s; color: rgba(255, 255, 255, 0.6); text-decoration: none; -webkit-transition: .2s;
}
a:hover {
	color: rgb(116, 119, 123); text-decoration: none;
}
a:focus {
	color: rgb(116, 119, 123); text-decoration: none;
}
.htmleaf-container {
	margin: 0px auto;
}
.bgcolor-1 {
	background: rgb(240, 239, 238);
}
.bgcolor-2 {
	background: rgb(249, 249, 249);
}
.bgcolor-3 {
	background: rgb(232, 232, 232);
}
.bgcolor-4 {
	background: rgb(47, 50, 56); color: rgb(255, 255, 255);
}
.bgcolor-5 {
	background: rgb(223, 102, 89); color: rgb(82, 30, 24);
}
.bgcolor-6 {
	background: rgb(47, 168, 236);
}
.bgcolor-7 {
	background: rgb(208, 214, 214);
}
.bgcolor-8 {
	background: rgb(61, 68, 68); color: rgb(255, 255, 255);
}
.bgcolor-9 {
	background: rgb(239, 63, 82); color: rgb(255, 255, 255);
}
.bgcolor-10 {
	background: rgb(100, 68, 143); color: rgb(255, 255, 255);
}
.bgcolor-11 {
	background: rgb(55, 85, 173); color: rgb(255, 255, 255);
}
.bgcolor-12 {
	background: rgb(52, 152, 219); color: rgb(255, 255, 255);
}
.bgcolor-20 {
	background: rgb(73, 74, 95); color: rgb(213, 214, 226);
}
.htmleaf-header {
	background: rgb(102, 103, 124); padding: 1em 190px; text-align: center; letter-spacing: -1px;
}
.no-color {
	background: 0px 0px;
}
.htmleaf-header h1 {
	color: rgb(213, 214, 226); line-height: 1; font-size: 2em; font-weight: 600; margin-bottom: 0px;
}
.htmleaf-header h1 span {
	padding: 0.8em 0px 0.5em; color: rgb(195, 200, 205); font-size: 60%; font-weight: 400; display: block;
}
.htmleaf-demo a {
	color: rgb(255, 255, 255); text-decoration: none;
}
.htmleaf-demo {
	width: 100%; padding-bottom: 1.2em;
}
.htmleaf-demo a {
	margin: 0.5em; padding: 0.6em 1em; border: 3px solid rgb(255, 255, 255); border-image: none; font-weight: 700; display: inline-block;
}
.htmleaf-demo a:hover {
	opacity: 0.6;
}
.htmleaf-demo a.current {
	background: rgb(29, 125, 177); color: rgb(255, 255, 255);
}
.htmleaf-links {
	text-align: center; font-size: 1.5em; display: inline-block; white-space: nowrap; position: relative;
}
.htmleaf-links::after {
	background: rgb(219, 219, 219); left: 50%; top: 0px; width: 2px; height: 100%; margin-left: -1px; position: absolute; content: ""; transform: rotate3d(0, 0, 1, 22.5deg); -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
}
.htmleaf-icon {
	margin: 0.5em; padding: 0px; width: 1.5em; text-decoration: none; display: inline-block;
}
.htmleaf-icon span {
	display: none;
}
.htmleaf-icon::before {
	margin: 0px 5px; text-transform: none; line-height: 1; font-family: icomoon; font-style: normal; font-variant: normal; font-weight: 400; -webkit-font-smoothing: antialiased; speak: none;
}
.htmleaf-footer {
	width: 100%; padding-top: 10px;
}
.htmleaf-small {
	font-size: 0.8em;
}
.center {
	text-align: center;
}
.related {
	background: rgb(73, 74, 95); padding: 0.5em 0px; text-align: center; color: rgb(255, 255, 255); overflow: hidden; font-size: 1.25em;
}
.related > a {
	margin: 20px 10px; padding: 25px; width: calc(100% - 20px); text-align: center; font-family: microsoft yahei,ËÎÌå,segoe ui,lucida grande,Helvetica,Arial,sans-serif,FreeSans,Arimo; vertical-align: top; display: inline-block; max-width: 340px;
}
.related a {
	margin: 20px auto; padding: 10px 20px; transition:opacity 0.3s; text-align: left; display: inline-block; opacity: 0.8; -webkit-transition: opacity .3s; -webkit-backface-visibility: hidden;
}
.related a:hover {
	opacity: 1;
}
.related a:active {
	opacity: 1;
}
.related a img {
	border-radius: 4px; max-width: 100%; opacity: 0.8;
}
.related a:hover img {
	opacity: 1;
}
.related a:active img {
	opacity: 1;
}
.related h3 {
	font-family: microsoft yahei,sans-serif; font-size: 1.2em;
}
.related a h3 {
	color: rgb(255, 255, 255); font-size: 0.85em; font-weight: 300; margin-top: 0.15em;
}
.icon-htmleaf-home-outline::before {
	content: "\e5000";
}
.icon-htmleaf-arrow-forward-outline::before {
	content: "\e5001";
}
@media screen and (max-width:1024px)
{
.htmleaf-header {
	padding: 2em 10%;
}
.htmleaf-header h1 {
	font-size: 1.4em;
}
.htmleaf-links {
	font-size: 1.4em;
}
}
@media screen and (max-width:960px)
{
.htmleaf-header {
	padding: 2em 10%;
}
.htmleaf-header h1 {
	font-size: 1.2em;
}
.htmleaf-links {
	font-size: 1.2em;
}
.related h3 {
	font-size: 1em;
}
.related a h3 {
	font-size: 0.8em;
}
}
@media screen and (max-width:766px)
{
.htmleaf-header h1 {
	font-size: 1.3em;
}
.htmleaf-links {
	font-size: 1.3em;
}
}
@media screen and (max-width:640px)
{
.htmleaf-header {
	padding: 2em 10%;
}
.htmleaf-header h1 {
	font-size: 1em;
}
.htmleaf-links {
	font-size: 1em;
}
.related h3 {
	font-size: 0.8em;
}
.related a h3 {
	font-size: 0.6em;
}
}