@charset "utf-8";

/*样式重置*/
html,body { user-select: none; -moz-user-select: none; -webkit-user-select: none; }
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,input,select,textarea,form{ margin: 0; padding: 0; }
ul,ol{ list-style: none; }
img{ border: none; display: block; }
input,select,textarea,button{ outline: none; border:none; background-color: transparent; }
textarea{ resize: none; }
a{ text-decoration: none; }
h1,h2,h3,h4,h5,h6{ font-size: 1em; }
em{ font-style: normal; }

/*浮动*/
.fl{ float: left; }
.fr{ float: right; }
.clearfix:after,
.clearfix:before{ content: "";display: table; }
.clearfix:after{ clear: both; }
.clearfix{ *zoom:1; }


html {
	height: 100%;
	overflow: hidden;
}

body {
	height: 100%;
	overflow: hidden;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	font-family: '微软雅黑';
	background-color: #131313;
}

li {
	list-style: none;
}

.middle {
	width: 1000px;
	height: 620px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -500px;
	margin-top: -310px;
}

.scene {
	width: 400px;
	height: 400px;
	margin: 0 auto;
	perspective: 900px;
	-webkit-perspective: 900px;
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	color: #16E5FF;
}

.box {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	perspective-origin: center 250px;
}

.ring {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	position: absolute;
}

.ring li {
	line-height: 30px;
	text-align: center;
	font-size: 16px;
	position: absolute;
	margin-top: -25px;
	margin-left: -15px;
	transition: all .6s;
}

li.all {
	transition: all .6s cubic-bezier(.75,.25,1,1);
}

li.one {
	transition: transform .6s cubic-bezier(0,0,.25,.75);
}

.text {
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -329px;
	padding: 15px 18px;
	width: 602px;
	height: 318px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	box-shadow: 0 5px 5px #d4dbe1;
	background-color: #fff;
	transform: scale(.5);
	opacity: 0;
	transition: opacity .3s cubic-bezier(.15,.84,.35,1), transform .3s cubic-bezier(.15,.84,.35,1);
	display: none;
}

.text p {
	margin-bottom: 12px;
	font-size: 12px;
}

.text textarea {
	resize: none;
	width: 580px;
	height: 220px;
	padding: 10px;
	border: 1px solid #cacaca;
	border-radius: 8px;
	background-color: #f3f7fa;
	margin-bottom: 15px;
	color: #00a0e9;
}

.text a {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 19px;
	height: 19px;
	background: url("images/icons/close.png") no-repeat center;
}

.btn {
	margin: 0 auto;
	width: 260px;
	overflow: hidden;
}

.btn button {
	width: 120px;
	height: 30px;
	border: 1px solid #cacaca;
	border-radius: 15px;
	float: left;
}

.btn button:nth-of-type(1) {
	margin-right: 18px;
}

.table {
	width: 400px;
	margin: 20px auto 10px;
	overflow: hidden;
}

.table a {
	float: left;
	width: 100px;
	height: 12px;
	padding-top: 94px;
	font-size: 12px;
	line-height: 12px;
	text-align: center;
	color: #889199;
}

.table a:nth-of-type(1) {
	background: url("images/icons/circle.png") no-repeat center 2px;
}

.table a:nth-of-type(2) {
	background: url("images/icons/Cone.png") no-repeat center top;
}

.table a:nth-of-type(3) {
	background: url("images/icons/Column.png") no-repeat center top;
}

.table a:nth-of-type(4) {
	background: url("images/icons/Column2.png") no-repeat center top;
}

.table a:nth-of-type(1):hover {
	background: url("images/icons/circle-hover.png") no-repeat center 2px;
}

.table a:nth-of-type(2):hover {
	background: url("images/icons/Cone-hover.png") no-repeat center top;
}

.table a:nth-of-type(3):hover {
	background: url("images/icons/Column-hover.png") no-repeat center top;
}

.table a:nth-of-type(4):hover {
	background: url("images/icons/Column2-hover.png") no-repeat center top;
}

.table a:nth-of-type(1).active {
	background: url("images/icons/circle-active.png") no-repeat center 2px;
}

.table a:nth-of-type(2).active {
	background: url("images/icons/Cone-active.png") no-repeat center top;
}

.table a:nth-of-type(3).active {
	background: url("images/icons/Column-active.png") no-repeat center top;
}

.table a:nth-of-type(4).active {
	background: url("images/icons/Column2-active.png") no-repeat center top;
}

.line {
	width: 734px;
	height: 1px;
	margin: 0 auto 14px;
	background: -webkit-linear-gradient(left,#7ecef4,#94cc8e,#fff45c);
}

.btn2 {
	width: 204px;
	margin: 0 auto;
	overflow: hidden;
}

.btn2 button {
	width: 100px;
	height: 30px;
	border: 1px solid #cacaca;
	float: left;
}

.btn2 button:nth-of-type(1) {
	border-radius: 15px 0 0 15px;
}

.btn2 button:nth-of-type(2) {
	margin-left: -1px;
	border-radius: 0 15px 15px 0;
}

button {
	background: linear-gradient(#fff,#e3ecf3);
	color: #889199;
}

button:hover {
	background: linear-gradient(#fff,#bef5ff 10%,#6cb7df);
	border-color: #bef5ff;
	color: #00a0e9;
}

button:active {
	background: linear-gradient(#fff,#6cb7df 10%,#bef5ff);
}

button.active {
	background: linear-gradient(#fff,#6cb7df 10%,#bef5ff);
}

.item {
	width: 400px;
	padding: 30px;
	top: 100px;
	margin: -30px;
	position: fixed;
	transform: scale(2);
	-webkit-transform: scale(2);
	opacity: 0;
	display: none;
	transform-origin: center center 200px;
	-webkit-transform-origin: center center 200px;
	opacity: 0;
	transition: all .5s ease;
}

.item a {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 19px;
	height: 19px;
	background: url("images/icons/close.png") no-repeat center;
}

.item p {
	font-size: 14px;
	line-height: 24px;
	word-break: break-all;
}