* {
	list-style: none; margin: 0px; padding: 0px; position: relative; box-sizing: border-box; -moz-box-sizing: border-box;
}
html {
	height: 100%; font-family: "Microsoft YaHei";
}
body {
	height: 100%; font-family: "Microsoft YaHei";
}
body {
	color: rgb(255, 255, 255);
}
.component {
	height: 15em; font-family: "Microsoft YaHei"; margin-bottom: 3em; position: relative;
}
.component > h2 {
	width: 100%; text-align: center; text-transform: uppercase; overflow: hidden; font-size: 12em; font-style: italic; font-weight: 300; white-space: nowrap; position: absolute; cursor: default; opacity: 0.1;
}
.cn-button {
	background: url(four-1.png); border-radius: 50%; border: currentColor; border-image: none; left: 50%; top: 100%; width: 158px; height: 158px; text-align: center; color: rgb(82, 190, 127); text-transform: uppercase; padding-top: 0em; font-size: 1.5em; position: absolute; z-index: 11; cursor: pointer; transform: translate3d(-50%, -50%, 0px); -webkit-backface-visibility: hidden;
}
.cn-button span {
	left: 50%; top: 100%; width: 158px; color: rgb(97, 2, 2); font-size: 18px; margin-top: 20px; position: absolute; transform: translate3d(-50%, 0px, 0px);
}
.csstransforms .cn-wrapper {
	background: none; border-radius: 50%; transition:0.3s 0.3s; left: 50%; top: 100%; width: 27em; height: 27em; overflow: hidden; margin-top: -13em; margin-left: -13.5em; position: absolute; z-index: 10; opacity: 0; pointer-events: none; transform: scale(0.1); -webkit-transition: all .3s ease 0.3s; -moz-transition: all .3s ease 0.3s; -webkit-transform: scale(0.1); -moz-transform: scale(0.1);
}
.csstransforms .cn-wrapper::after {
	border-radius: 50%; left: 50%; top: 50%; width: 6.2em; height: 6.2em; color: transparent; font-size: 2em; margin-top: -3.1em; margin-left: -3.1em; display: block; position: absolute; z-index: 10; content: ".";
}
.csstransforms .opened-nav {
	border-radius: 50%; transition:0.3s; opacity: 1; pointer-events: auto; transform: scale(1); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transform: scale(1); -moz-transform: scale(1);
}
.csstransforms .cn-wrapper li {
	transform-origin: 100% 100%; transition:0.3s; left: 50%; top: 50%; width: 10em; height: 10em; overflow: hidden; font-size: 1.5em; margin-top: -1.3em; margin-left: -10em; position: absolute; pointer-events: none; transform: rotate(76deg) skew(60deg); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transform: rotate(76deg) skew(60deg); -moz-transform: rotate(76deg) skew(60deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%;
}
.csstransforms .cn-wrapper li a {
	background: radial-gradient(transparent 35%, rgba(255, 0, 0, 0.8) 35%, rgba(255, 0, 0, 0.8) 44%, rgba(249, 174, 28, 0.8) 69.5%); border-radius: 50%; width: 14.5em; height: 14.5em; text-align: center; right: -7.25em; bottom: -7.25em; color: rgb(97, 2, 2); line-height: 2; font-size: 1.2em; text-decoration: none; display: block; position: absolute; pointer-events: auto; transform: skew(-60deg) rotate(-75deg) scale(1); backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transform: skew(-60deg) rotate(-75deg) scale(1); -moz-transform: skew(-60deg) rotate(-75deg) scale(1);
}
.csstransforms .cn-wrapper li a:hover {
	background: radial-gradient(transparent 35%, rgba(255, 0, 0, 0.4) 35%, rgba(255, 0, 0, 0.4) 44%, rgba(249, 174, 28, 0.4) 69.5%, rgb(255, 255, 255) 69.5%); color: rgb(255, 255, 255);
}
.csstransforms .cn-wrapper li a:visited {
	background: radial-gradient(transparent 35%, rgba(255, 0, 0, 0.8) 35%, rgba(255, 0, 0, 0.8) 44%, rgba(249, 174, 28, 0.8) 69.5%); color: rgb(97, 2, 2);
}
.csstransforms .cn-wrapper li a[href='#']:hover {
	background: radial-gradient(transparent 35%, rgba(255, 0, 0, 0.8) 35%, rgba(255, 0, 0, 0.8) 44%, rgba(249, 174, 28, 0.8) 69.5%); color: rgb(97, 2, 2);
}
.csstransforms .cn-wrapper li a[href='#']:active {
	background: radial-gradient(transparent 35%, rgba(255, 0, 0, 0.8) 35%, rgba(255, 0, 0, 0.8) 44%, rgba(249, 174, 28, 0.8) 69.5%); color: rgb(97, 2, 2);
}
.csstransforms .cn-wrapper li a[href='#']:focus {
	background: radial-gradient(transparent 35%, rgba(255, 0, 0, 0.8) 35%, rgba(255, 0, 0, 0.8) 44%, rgba(249, 174, 28, 0.8) 69.5%); color: rgb(97, 2, 2);
}
.csstransforms .opened-nav li {
	transition:0.3s 0.3s; -webkit-transition: all .3s ease .3s; -moz-transition: all .3s ease .3s;
}
.csstransforms .opened-nav li:first-child {
	transform: rotate(-20deg) skew(60deg); -webkit-transform: rotate(-20deg) skew(60deg); -moz-transform: rotate(-20deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(2) {
	transform: rotate(12deg) skew(60deg); -webkit-transform: rotate(12deg) skew(60deg); -moz-transform: rotate(12deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(3) {
	transform: rotate(44deg) skew(60deg); -webkit-transform: rotate(44deg) skew(60deg); -moz-transform: rotate(44deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(4) {
	transform: rotate(76deg) skew(60deg); -webkit-transform: rotate(76deg) skew(60deg); -moz-transform: rotate(76deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(5) {
	transform: rotate(108deg) skew(60deg); -webkit-transform: rotate(108deg) skew(60deg); -moz-transform: rotate(108deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(6) {
	transform: rotate(140deg) skew(60deg); -webkit-transform: rotate(140deg) skew(60deg); -moz-transform: rotate(140deg) skew(60deg);
}
.csstransforms .opened-nav li:nth-child(7) {
	transform: rotate(172deg) skew(60deg); -webkit-transform: rotate(172deg) skew(60deg); -moz-transform: rotate(172deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-6 li {
	transition:0.3s 0.3s; -webkit-transition: all .3s ease .3s; -moz-transition: all .3s ease .3s;
}
.csstransforms .opened-nav .itemNum-6 li:first-child {
	transform: rotate(-5deg) skew(60deg); -webkit-transform: rotate(-5deg) skew(60deg); -moz-transform: rotate(-5deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-6 li:nth-child(2) {
	transform: rotate(27deg) skew(60deg); -webkit-transform: rotate(27deg) skew(60deg); -moz-transform: rotate(27deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-6 li:nth-child(3) {
	transform: rotate(59deg) skew(60deg); -webkit-transform: rotate(59deg) skew(60deg); -moz-transform: rotate(59deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-6 li:nth-child(4) {
	transform: rotate(91deg) skew(60deg); -webkit-transform: rotate(91deg) skew(60deg); -moz-transform: rotate(91deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-6 li:nth-child(5) {
	transform: rotate(123deg) skew(60deg); -webkit-transform: rotate(123deg) skew(60deg); -moz-transform: rotate(123deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-6 li:nth-child(6) {
	transform: rotate(155deg) skew(60deg); -webkit-transform: rotate(155deg) skew(60deg); -moz-transform: rotate(155deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-4 li {
	transition:0.3s 0.3s; -webkit-transition: all .3s ease .3s; -moz-transition: all .3s ease .3s;
}
.csstransforms .opened-nav .itemNum-4 li:nth-child(1) {
	transform: rotate(27deg) skew(60deg); -webkit-transform: rotate(27deg) skew(60deg); -moz-transform: rotate(27deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-4 li:nth-child(2) {
	transform: rotate(59deg) skew(60deg); -webkit-transform: rotate(59deg) skew(60deg); -moz-transform: rotate(59deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-4 li:nth-child(3) {
	transform: rotate(91deg) skew(60deg); -webkit-transform: rotate(91deg) skew(60deg); -moz-transform: rotate(91deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-4 li:nth-child(4) {
	transform: rotate(123deg) skew(60deg); -webkit-transform: rotate(123deg) skew(60deg); -moz-transform: rotate(123deg) skew(60deg);
}
.csstransforms .opened-nav li {
	transition:0.3s 0.3s; -webkit-transition: all .3s ease .3s; -moz-transition: all .3s ease .3s;
}
.csstransforms .opened-nav .itemNum-5 li:nth-child(1) {
	transform: rotate(12deg) skew(60deg); -webkit-transform: rotate(12deg) skew(60deg); -moz-transform: rotate(12deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-5 li:nth-child(2) {
	transform: rotate(44deg) skew(60deg); -webkit-transform: rotate(44deg) skew(60deg); -moz-transform: rotate(44deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-5 li:nth-child(3) {
	transform: rotate(76deg) skew(60deg); -webkit-transform: rotate(76deg) skew(60deg); -moz-transform: rotate(76deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-5 li:nth-child(4) {
	transform: rotate(108deg) skew(60deg); -webkit-transform: rotate(108deg) skew(60deg); -moz-transform: rotate(108deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-5 li:nth-child(5) {
	transform: rotate(140deg) skew(60deg); -webkit-transform: rotate(140deg) skew(60deg); -moz-transform: rotate(140deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-8 li {
	transition:0.3s 0.3s; -webkit-transition: all .3s ease .3s; -moz-transition: all .3s ease .3s;
}
.csstransforms .opened-nav .itemNum-8 li:nth-child(1) {
	transform: rotate(-37deg) skew(60deg); -webkit-transform: rotate(-37deg) skew(60deg); -moz-transform: rotate(-37deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-8 li:nth-child(2) {
	transform: rotate(-5deg) skew(60deg); -webkit-transform: rotate(-5deg) skew(60deg); -moz-transform: rotate(-5deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-8 li:nth-child(3) {
	transform: rotate(27deg) skew(60deg); -webkit-transform: rotate(27deg) skew(60deg); -moz-transform: rotate(27deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-8 li:nth-child(4) {
	transform: rotate(59deg) skew(60deg); -webkit-transform: rotate(59deg) skew(60deg); -moz-transform: rotate(59deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-8 li:nth-child(5) {
	transform: rotate(91deg) skew(60deg); -webkit-transform: rotate(91deg) skew(60deg); -moz-transform: rotate(91deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-8 li:nth-child(6) {
	transform: rotate(123deg) skew(60deg); -webkit-transform: rotate(123deg) skew(60deg); -moz-transform: rotate(123deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-8 li:nth-child(7) {
	transform: rotate(155deg) skew(60deg); -webkit-transform: rotate(155deg) skew(60deg); -moz-transform: rotate(155deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-8 li:nth-child(8) {
	transform: rotate(187deg) skew(60deg); -webkit-transform: rotate(187deg) skew(60deg); -moz-transform: rotate(187deg) skew(60deg);
}
.csstransforms .opened-nav li {
	transition:0.3s 0.3s; -webkit-transition: all .3s ease .3s; -moz-transition: all .3s ease .3s;
}
.csstransforms .opened-nav .itemNum-3 li:nth-child(1) {
	transform: rotate(44deg) skew(60deg); -webkit-transform: rotate(44deg) skew(60deg); -moz-transform: rotate(44deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-3 li:nth-child(2) {
	transform: rotate(76deg) skew(60deg); -webkit-transform: rotate(76deg) skew(60deg); -moz-transform: rotate(76deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-3 li:nth-child(3) {
	transform: rotate(108deg) skew(60deg); -webkit-transform: rotate(108deg) skew(60deg); -moz-transform: rotate(108deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-2 li {
	transition:0.3s 0.3s; -webkit-transition: all .3s ease .3s; -moz-transition: all .3s ease .3s;
}
.csstransforms .opened-nav .itemNum-2 li:nth-child(1) {
	transform: rotate(59deg) skew(60deg); -webkit-transform: rotate(59deg) skew(60deg); -moz-transform: rotate(59deg) skew(60deg);
}
.csstransforms .opened-nav .itemNum-2 li:nth-child(2) {
	transform: rotate(91deg) skew(60deg); -webkit-transform: rotate(91deg) skew(60deg); -moz-transform: rotate(91deg) skew(60deg);
}
.no-csstransforms .cn-wrapper {
	margin: 10em auto; padding: 0.5em; text-align: center; overflow: hidden;
}
.no-csstransforms .cn-wrapper ul {
	display: inline-block;
}
.no-csstransforms .cn-wrapper li {
	width: 5em; height: 5em; text-align: center; line-height: 5em; font-size: 1em; float: left; background-color: rgb(255, 255, 255);
}
.no-csstransforms .cn-wrapper li a {
	width: 100%; height: 100%; color: inherit; text-decoration: none; display: block;
}
.no-csstransforms .cn-wrapper li a:hover {
	background-color: rgb(248, 248, 248);
}
.no-csstransforms .cn-wrapper li a:active {
	background-color: rgb(248, 248, 248);
}
.no-csstransforms .cn-wrapper li a:focus {
	background-color: rgb(248, 248, 248);
}
.no-csstransforms .cn-wrapper li.active a {
	color: rgb(255, 255, 255); background-color: rgb(111, 50, 92);
}
.no-csstransforms .cn-button {
	display: none;
}
@media only screen and (max-width:620px)
{
.no-csstransforms li {
	width: 4em; height: 4em; line-height: 4em;
}
}
@media only screen and (max-width:500px)
{
.no-ccstransforms .cn-wrapper {
	padding: 0.5em;
}
.no-csstransforms .cn-wrapper li {
	width: 4em; height: 4em; line-height: 4em; font-size: 0.9em;
}
}
@media only screen and (max-width:480px)
{
.csstransforms .cn-wrapper {
	font-size: 0.68em;
}
.cn-button {
	font-size: 1em;
}
}
@media only screen and (max-width:420px)
{
.no-csstransforms .cn-wrapper li {
	width: 100%; height: 3em; line-height: 3em;
}
}