html{
	width:100%;
	height: 100%;
	text-size-adjust:none;/*细节*/
}

body{
	margin:0;
	padding: 0;
	background: #47c9af;
	color: #74777b;
	font-weight: 300;
	font-size: 1.5em;
	font-family: "Raleway","Arail";
}
ul{
	list-style:none;
	padding: 0;
	margin: 0;
}
a:link,a:visited,a:focus{
	text-decoration: none;
	outline: none;
}

*,*:after,*:before{
	box-sizing:border-box;/*细节*/
}
*:after,*:before{
	display: block;
	content:"";
}
*:after{clear:both;}
.nav{
	width:800px;
	height: 300px;
	margin:200px auto;
}

.nav li{
	display:inline-block;
	margin:0 1em;
}
.tooltip{
	display: inline-block;
	font-weight: 700;
	color: rgba(0,0,0,0.3);
	padding:0.15em 0.25em 0; 
	position: relative;
	z-index: 999;
	transition:color 0.3s;
}
i{
	color: #47c9af;
}

.tooltip-content{
	position: absolute;
	z-index: 9999;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #fff;
	left:50%;
	margin-left:-40px;
	bottom:100%;
	margin-bottom: 20px;
	text-align: center;
	padding-top: 25px;
	opacity: 0;
	transition:all 0.3s;
}
i{
	opacity: 0;
	transition:all 0.3s;
}
.tooltip:hover{color:rgba(255,255,255,1);}

/*细节*/.tooltip-content::after{
	display: block;
	content: "";
	width: 30px;
	height: 20px;
	background:url(../img/tooltip1.svg) no-repeat center center;
	position: absolute;
	top: 100%;
	left: 50%;
	margin:-7px 0 0 -15px; 
}

.tooltip-effect-1 .tooltip-content{
	transform:translate3d(0,10px,0) rotate3d(1,0.5,0.7,45deg);
	transform-origin:50% 100%;/*细节*/
}
.tooltip-effect-1 .tooltip-content i{
	transform:scale3d(0,0,1);
}

.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i{
	opacity: 1;
	transform:translate3d(0,0,0) rotate3d(1,1,1,0) scale3d(1,1,1);
}


.tooltip-effect-2 .tooltip-content{
	transform:translate3d(0,10px,0);
	
}
.tooltip-effect-2 .tooltip-content i{
	transform:scale3d(0,0,1);
}
.tooltip-effect-3 .tooltip-content{
	transform:rotate3d(0,1,0,180deg);
	
}
.tooltip-effect-3 .tooltip-content i{
	transform:scale3d(0,0,1);
}
.tooltip-effect-4 .tooltip-content{
	transform:translate3d(0,-10px,0);
	
}
.tooltip-effect-4 .tooltip-content i{
	transform:scale3d(0,0,1);
}
.tooltip-effect-5 .tooltip-content{
	transform:scale3d(0,0,0);
	
}
.tooltip-effect-5 .tooltip-content i{
	transform:scale3d(0,0,1);
}