@charset "utf-8";
#fanCont {
	position: absolute;
	width: 368px;
	top: 65px;
	right: 0px;
	z-index:9999;
}
#fanCont .menu-trigger {
	background-image: url(../images/btn.png);
	display: block;
	height: 120px;
	margin-left: 0px;
	position: relative;
	background-position: left top;
	transition:all 0.3s ease;
	z-index:4000;
	cursor:default;
}
#fanCont .menu-trigger:hover,
#fanCont #fanFrame.active + .menu-trigger{
	margin-left:0px;
}
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger span {
	position: absolute;
	right: 8px;
	width: 14px;
	height: 2px;
	background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
	top: 55px;
	transform-origin:right bottom;
}
.menu-trigger span:nth-of-type(2) {
	top: 60px;
	transform-origin:center center;
}
.menu-trigger span:nth-of-type(3) {
	top: 65px;
	transform-origin:right bottom;
}
.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translate(-8px,10px) rotate(135deg);
	transform: translateX(-8px,10px) rotate(135deg);
	width:7px;
}
.menu-trigger.active span:nth-of-type(2) {
	-webkit-transform:rotate(-90deg);
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translate(-8px,1px) rotate(45deg);
	transform: translateX(-8px,1px) rotate(45deg);
	width:7px;
}
#fanFrame {
	position: absolute;
	width: 218px;
	top:102px;
	right: 0px;
	height: 0px;
	transition: all 0.3s ease;
	overflow: hidden;
}
#fanFrame.active {
	height:500px;
}