@font-face {
	font-family: 'icomoon';
	src:;
	src: format('embedded-opentype'),
		 format('woff'),
		 format('truetype'),
		 format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* better font rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* clearfix hack by nicolas gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #fff;
	color: #d5d6e2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "microsoft yahei","segoe ui", "lucida grande", helvetica, arial,sans-serif;
}
a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.htmleaf-container{
	margin: 0 auto;
	    display: flex;
    text-align: center;
}

.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }/*light grey*/
.bgcolor-4 { background: #2f3238; color: #fff; }/*dark grey*/
.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
.bgcolor-7 { background: #d0d6d6; }/*white tea*/
.bgcolor-8 { background: #3d4444; color: #fff; }/*dark grey2*/
.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
.bgcolor-10{ background: #64448f; color: #fff;}/*violet*/
.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
.bgcolor-12{ background: #3498db; color: #fff;}/*light blue*/
.bgcolor-20{ background: #fff;color: #d5d6e2;}
/* header */
.htmleaf-header{
	padding: 1em 190px 1em;
	letter-spacing: -1px;
	text-align: center;
	background: #66677c;
}
.htmleaf-header h1 {
	color: #d5d6e2;
	font-weight: 600;
	font-size: 2em;
	line-height: 1;
	margin-bottom: 0;
}
.htmleaf-header h1 span {
	display: block;
	font-size: 60%;
	font-weight: 400;
	padding: 0.8em 0 0.5em 0;
	color: #c3c8cd;
}
/*nav*/
.htmleaf-demo a{color: #fff;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
/* top navigation style */
.htmleaf-links {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 1.5em;
	text-align: center;
}

.htmleaf-links::after {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	background: #dbdbdb;
	content: '';
	-webkit-transform: rotate3d(0,0,1,22.5deg);
	transform: rotate3d(0,0,1,22.5deg);
}

.htmleaf-icon {
	display: inline-block;
	margin: 0.5em;
	padding: 0em 0;
	width: 1.5em;
	text-decoration: none;
}

.htmleaf-icon span {
	display: none;
}

.htmleaf-icon:before {
	margin: 0 5px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}
/* footer */
.htmleaf-footer{width: 100%;padding-top: 10px;}
.htmleaf-small{font-size: 0.8em;}
.center{text-align: center;}
/****/
.related {
	float: left;
	width: 100%;
	color: #fff;
	background: #fff;
	text-align: center;
	font-size: 1.25em;
	padding: 0.5em 0;
	overflow: hidden;
}

.related > a {
	vertical-align: top;
	width: calc(100% - 20px);
	max-width: 340px;
	display: inline-block;
	text-align: center;
	margin: 20px 10px;
	padding: 25px;
	font-family: "microsoft yahei","宋体","segoe ui", "lucida grande", helvetica, arial,sans-serif, freesans, arimo;
}
.related a {
	display: inline-block;
	text-align: left;
	margin: 20px auto;
	padding: 10px 20px;
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}

.related a:hover,
.related a:active {
	opacity: 1;
}

.related a img {
	max-width: 100%;
	opacity: 0.8;
	border-radius: 4px;
}
.related a:hover img,
.related a:active img {
	opacity: 1;
}
.related h3{font-family: "microsoft yahei", sans-serif;font-size: 1.2em}
.related a h3 {
	font-size: 0.85em;
	font-weight: 300;
	margin-top: 0.15em;
	color: #fff;
}
/* icomoon */
.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% 2em;
	}
	.htmleaf-header h1 {
        font-size:1.4em;
    }
    .htmleaf-links{font-size: 1.4em}
}

@media screen and (max-width: 960px) {
	.htmleaf-header {
		padding: 2em 10% 2em;
	}
	.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% 2em;
	}
	.htmleaf-header h1 {
        font-size:1em;
    }
    .htmleaf-links{font-size: 1em}
    .related h3{font-size: 0.8em;}
	.related a h3 {
		font-size: 0.6em;
	}
}
h1.title{
  color:white;
  margin:30px auto;
  width:40vw;
  padding:20px;
  text-transform:uppercase;
  font-size:50px;
  letter-spacing:5px;
  border-top:1px solid;
  border-bottom:1px solid;
}

.buttonbox{
  position:relative;
  float:left;
  flex: 1;
}


.activelist{
	width: 100%;
  height:80px;
  position:relative;
  display: block; 
  text-transform:uppercase;
  color:#2e3b0d;
  letter-spacing:1px;
  border:none;
  font-size:18px;
  outline:none;
  font-family: "lucida sans unicode", "lucida grande", sans-serif;
}
.activelist>img{
	width: 30px;
}
.activelist1{
	background:  #2e3b0d;

}
.activelist1>a{
		color: #fff !important;
}
/* first button */

.border{
    position:absolute;
    background:none;
    transition:all .5s ease-in-out;
}
/* fourth button */

.fourth>.border:nth-of-type(1){
  top:0;
  left:0;
  width:0;
  height:0;
  border-top:3px solid #fffeb4;
}

.fourth>.border:nth-of-type(2){
  top:0;
  right:0;
  width:10px;
  height:0;
  border-right:3px solid #fffeb4;
}

.fourth>.border:nth-of-type(3){
  bottom:0;
  right:0;
  width:0;
  height:0;
  border-bottom:3px solid #fffeb4;
}

.fourth>.border:nth-of-type(4){
  bottom:0;
  left:0;
  width:0;
  height:0;
  border-left:3px solid #fffeb4;
}
/*hover线的长度*/
.fourth:hover .border:nth-of-type(1){
  width:100%;
}

.fourth:hover .border:nth-of-type(2){
  height:80px;
}

.fourth:hover .border:nth-of-type(3){
  width:100%;
}

.fourth:hover .border:nth-of-type(4){
  height:80px;
}


/* fifth button */

#fifth{
  overflow:hidden;
}

#fifth:before{
  content:" ";
  display:block;
  width:200px;
  height:80px;
  background:rgba(255, 255, 255, .1);
  position:absolute;
  top:-10px;
  left:-200px;
  transform:rotate(-45deg);
  transition:all .15s ease-in-out;  
}

#fifth:hover:before{
  margin-left:400px;
}


/* sixth button */

#sixth{
  overflow:hidden;
}

#sixth>button{
  z-index:1;
  transition:color .5s ease;
}

#sixth .border{
  z-index:0;
  background:white;
  width:30px;
  height:30px;
  transform:rotate(45deg);
}

#sixth>.border:nth-of-type(1){
  top:-65px;
  left:-60px; 
}

#sixth>.border:nth-of-type(2){
  top:-65px;
  right:-60px;
}

#sixth>.border:nth-of-type(3){
  bottom:-65px;
  left:-60px;
}

#sixth>.border:nth-of-type(4){
  bottom:-65px;
  right:-60px;
}

#sixth:hover .border{
  width:160px;
  height:160px;
}

#sixth:hover.activelist{
  color:#ff9292;
  transition:color 2s ease;
}


/* seventh button */

#seventh>button{
  border:1px solid rgba(255, 255, 255, 0);
  transition:all .5s ease-in-out;
}

#seventh:hover.activelist{
  border:1px solid white;
  font-size:20px;
}


/* eighth button */

#eighth>button{
  transition:all .5s ease-in-out;
}

#eighth:hover.activelist{
  text-shadow:
    0 0 10px rgba(255,255,255, 1),
    0 0 50px rgba(255, 255, 255, .8),
    0 0 75px rgba(255, 255, 255, .6),
    0 0 76px rgba(255, 255, 255, .4),
    0 0 77px rgba(255, 255, 255, .5),
    0 0 78px rgba(255, 255, 255, .4),
    0 0 79px rgba(255, 255, 255, .3),
    0 0 80px rgba(255, 255, 255, .2),
    0 0 85px rgba(255, 255, 255, .1);
}


/* ninth hover */

#ninth>button{
  transition:all .5s ease-in-out;
}

#ninth:hover.activelist{
  background:white;
  color:#ff9292;
}


/* tenth button */

#tenth>button{
  letter-spacing:0;
}

#tenth span{
  letter-spacing:0;
  display:inline-block;
  position:relative;
  width:8px;
  transition:all .5s ease-in-out;
}

#tenth span:nth-of-type(4){
  width:5px;
}

#tenth span:nth-of-type(6){
  width:1px;
}

#tenth span:nth-of-type(8){
  width:4px;
}

#tenth:hover span:nth-of-type(1){
  animation:h .5s;
}

#tenth:hover span:nth-of-type(2){
  animation:o .5s;
}

#tenth:hover span:nth-of-type(3){
  animation:v .5s;
}

#tenth:hover span:nth-of-type(4){
  animation:e .5s;
}

#tenth:hover span:nth-of-type(5){
  animation:r .5s;
}

#tenth:hover span:nth-of-type(7){
  animation:t .5s;
}

#tenth:hover span:nth-of-type(8){
  animation:e .5s;
}

#tenth:hover span:nth-of-type(9){
  animation:n .5s;
}

@keyframes h{
  0%{transform:translate(0, 0);}
  50%{transform:translate(50px, 5px);}
  75%{transform:translate(5px, 5px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes o{
  0%{transform:translate(0, 0);}
  25%{transform:translate(-4px, 0);}
  50%{transform:translate(3px, 4px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes v{
  0%{transform:translate(0, 0);}
  20%{transform:rotate(360deg);}
  50%{transform:scale(2);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes e{
  0%{transform:translate(0, 0);}
  20%{transform:translate(-10px, -2px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes r{
  0%{transform:translate(0, 0);}
  20%{transform:translate(0, 10px);}
  80%{transform:translate(0, 32px);}
  100%{transform:translate(0, 0);}
}

@keyframes t{
  0%{transform:translate(0, 0);}
  20%{transform:translate(0, -10px);}
  40%{transform:translate(0, 0);}
  60%{transform:translate(0, -10px);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}

@keyframes n{
  0%{transform:translate(0, 0);}
  50%{transform:skewy(50deg);}
  80%{transform:translate(0, 0);}
  100%{transform:translate(0, 0);}
}