:root {
	--fm-theme-color:#09d074;
    --fm-theme-color-hover:#01383d;
	--fm-theme-content-color:#fff;
	--fm-font-size:18px;
	--fm-margin-li:10px;
	--fm-border-radius:50%;
	--fm-width-height:60px;
	--fm-margin-screen-x:30px;
	--fm-margin-screen-y:30px;
	--fm-z-index:996;
	--fm-destination-nth-1-x:30px;
	--fm-destination-nth-1-y:-70px;
	--fm-destination-nth-2-x:30px;
	--fm-destination-nth-2-y:-140px;
	--fm-destination-nth-3-x:30px;
	--fm-destination-nth-3-y:-210px;
	--fm-destination-nth-4-x:30px;
	--fm-destination-nth-4-y:-280px
}
ul.fm-ul {
	z-index:var(--fm-z-index);
	opacity:0;
	position:fixed;
	padding:var(--fm-margin-li);
	margin:0;
	transition:opacity 1s
}
ul.fm-ul li div.fm-li-content {
	position:relative;
	width:var(--fm-width-height);
	height:var(--fm-width-height);
	background-color:rgba(9, 208, 116, 0.6);
	border-radius:var(--fm-border-radius);
	box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)
}
ul.fm-ul li div.fm-li-content:hover {
	transition:all .3s;
	background-color:#09d074;
}
ul.fm-ul li.fm-li-main {
	z-index:calc(var(--fm-z-index) - 1);
	list-style:none;
	position:relative;
	width:var(--fm-width-height);
	height:var(--fm-width-height);
	cursor:pointer;
	margin:0
}
ul.fm-ul ul.fm-ul-component li.fm-li {
	z-index:calc(var(--fm-z-index) - 2);
	position:fixed;
	width:var(--fm-width-height);
	height:var(--fm-width-height);
	padding:var(--fm-margin-li);
	list-style:none;
	cursor:pointer;
	-webkit-transform:scale(0);
	transform:scale(0);
	transition:all .5s
}
ul.fm-ul.fm-fan-in ul.fm-ul-component li.fm-li {
	opacity:0;
	-webkit-transform:scale(1);
	transform:scale(1)
}
ul.fm-ul.fm-fan-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li,ul.fm-ul.fm-fan-in[data-fm-state=open] ul.fm-ul-component li.fm-li {
	opacity:1
}
ul.fm-ul.fm-fan-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(1),ul.fm-ul.fm-fan-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(1) {
	transform:translateY(var(--fm-destination-nth-1-y)) translateX(var(--fm-destination-nth-1-x));
	-webkit-transform:translateY(var(--fm-destination-nth-1-y)) translateX(var(--fm-destination-nth-1-x))
}
ul.fm-ul.fm-fan-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(2),ul.fm-ul.fm-fan-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(2) {
	transform:translateY(var(--fm-destination-nth-2-y)) translateX(var(--fm-destination-nth-2-x));
	-webkit-transform:translateY(var(--fm-destination-nth-2-y)) translateX(var(--fm-destination-nth-2-x))
}
ul.fm-ul.fm-fan-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(3),ul.fm-ul.fm-fan-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(3) {
	transform:translateY(var(--fm-destination-nth-3-y)) translateX(var(--fm-destination-nth-3-x));
	-webkit-transform:translateY(var(--fm-destination-nth-3-y)) translateX(var(--fm-destination-nth-3-x))
}
ul.fm-ul.fm-fan-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(4),ul.fm-ul.fm-fan-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(4) {
	transform:translateY(var(--fm-destination-nth-4-y)) translateX(var(--fm-destination-nth-4-x));
	-webkit-transform:translateY(var(--fm-destination-nth-4-y)) translateX(var(--fm-destination-nth-4-x))
}
ul.fm-ul.fm-spring-in ul.fm-ul-component li.fm-li {
	opacity:0;
	-webkit-transform:scale(1);
	transform:scale(1);
	transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)
}
ul.fm-ul.fm-spring-in ul.fm-ul-component li.fm-li:nth-child(1) {
	transition-delay:0s
}
ul.fm-ul.fm-spring-in ul.fm-ul-component li.fm-li:nth-child(2) {
	transition-delay:50ms
}
ul.fm-ul.fm-spring-in ul.fm-ul-component li.fm-li:nth-child(3) {
	transition-delay:.1s
}
ul.fm-ul.fm-spring-in ul.fm-ul-component li.fm-li:nth-child(4) {
	transition-delay:.15s
}
ul.fm-ul.fm-spring-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li,ul.fm-ul.fm-spring-in[data-fm-state=open] ul.fm-ul-component li.fm-li {
	opacity:1
}
ul.fm-ul.fm-spring-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(1),ul.fm-ul.fm-spring-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(1) {
	transition-delay:50ms;
	transform:translateY(var(--fm-destination-nth-1-y));
	-webkit-transform:translateY(var(--fm-destination-nth-1-y))
}
ul.fm-ul.fm-spring-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(2),ul.fm-ul.fm-spring-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(2) {
	transition-delay:.1s;
	transform:translateY(var(--fm-destination-nth-2-y));
	-webkit-transform:translateY(var(--fm-destination-nth-2-y))
}
ul.fm-ul.fm-spring-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(3),ul.fm-ul.fm-spring-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(3) {
	transition-delay:.15s;
	transform:translateY(var(--fm-destination-nth-3-y));
	-webkit-transform:translateY(var(--fm-destination-nth-3-y))
}
ul.fm-ul.fm-spring-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(4),ul.fm-ul.fm-spring-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(4) {
	transition-delay:.2s;
	transform:translateY(var(--fm-destination-nth-4-y));
	-webkit-transform:translateY(var(--fm-destination-nth-4-y))
}
ul.fm-ul.fm-zoom-in ul.fm-ul-component li.fm-li:nth-child(1) {
	transition-delay:0s
}
ul.fm-ul.fm-zoom-in ul.fm-ul-component li.fm-li:nth-child(2) {
	transition-delay:50ms
}
ul.fm-ul.fm-zoom-in ul.fm-ul-component li.fm-li:nth-child(3) {
	transition-delay:.1s
}
ul.fm-ul.fm-zoom-in ul.fm-ul-component li.fm-li:nth-child(4) {
	transition-delay:.15s
}
ul.fm-ul.fm-zoom-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li,ul.fm-ul.fm-zoom-in[data-fm-state=open] ul.fm-ul-component li.fm-li {
	-webkit-transform:scale(1);
	transform:scale(1)
}
ul.fm-ul.fm-slide-in ul.fm-ul-component li.fm-li {
	opacity:0;
	-webkit-transform:scale(1);
	transform:scale(1)
}
ul.fm-ul.fm-slide-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li,ul.fm-ul.fm-slide-in[data-fm-state=open] ul.fm-ul-component li.fm-li {
	opacity:1
}
ul.fm-ul.fm-slide-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(1),ul.fm-ul.fm-slide-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(1) {
	transform:translateY(var(--fm-destination-nth-1-y));
	-webkit-transform:translateY(var(--fm-destination-nth-1-y))
}
ul.fm-ul.fm-slide-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(2),ul.fm-ul.fm-slide-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(2) {
	transform:translateY(var(--fm-destination-nth-2-y));
	-webkit-transform:translateY(var(--fm-destination-nth-2-y))
}
ul.fm-ul.fm-slide-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(3),ul.fm-ul.fm-slide-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(3) {
	transform:translateY(var(--fm-destination-nth-3-y));
	-webkit-transform:translateY(var(--fm-destination-nth-3-y))
}
ul.fm-ul.fm-slide-in li.fm-li-main:hover+ul.fm-ul-component li.fm-li:nth-child(4),ul.fm-ul.fm-slide-in[data-fm-state=open] ul.fm-ul-component li.fm-li:nth-child(4) {
	transform:translateY(var(--fm-destination-nth-4-y));
	-webkit-transform:translateY(var(--fm-destination-nth-4-y))
}
ul.fm-ul li div.fm-content {
	display:flex;
	width:var(--fm-width-height);
	height:var(--fm-width-height);
	justify-content:center;
	align-items:center;
	color:var(--fm-theme-content-color);
	font-size:var(--fm-font-size)
}
ul.fm-ul li div.fm-li-content div.fm-li-title {
	position:absolute;
	width:max-content;
	display:inline-flex;
	align-items:center;
	visibility:hidden;
	opacity:0;
	height:var(--fm-width-height);
	transition:opacity .5s
}
ul.fm-ul li div.fm-li-content div.fm-li-title span.fm-li-title-text {
	border:1px solid #bdbdbd;
	border-radius:3px;
	padding:3px calc(var(--fm-margin-li)/ 2);
	background-color:#5d5d5d;
	color:var(--fm-theme-content-color);
	font-size:15px;
	color:#fff;
	position:relative
}
ul.fm-ul ul.fm-ul-component div.fm-li-title.fm-title-right span.fm-li-title-text:after {
	position:absolute;
	content:'';
	right:-27px;
	bottom:-1px;
	border:14px solid transparent;
	border-left-color:#5d5d5d;
	border-radius:5px
}
ul.fm-ul ul.fm-ul-component div.fm-li-title.fm-title-left span.fm-li-title-text:before {
	position:absolute;
	content:'';
	left:-27px;
	bottom:-1px;
	border:14px solid transparent;
	border-right-color:#5d5d5d;
	border-radius:5px
}
ul.fm-ul-component li.fm-li div.fm-li-content:hover div.fm-li-title {
	visibility:visible;
	opacity:.85
}
