*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

body{
	font-family: Roboto,Arial,sans-serif;
	font-size: 16px;
	-webkit-font-smoothing:antialiased;
	background: #f1f1f1;
}

.clearfix{
	clear:both;
}

.head-main{
	padding: 20px;
	color:white;
	display: table;
	position: relative;
	width: 100%;
	height: 64px;
	background: linear-gradient(154deg,rgb(31,51,97),rgb(14,125,68) 100%);
	font-size: 1.2rem;
}

.head-title{
	float:left;
}

.head-right{
	float:right;
	font-size: 1rem;
}

.hover-account {
	cursor: pointer;
}

.dropdown-content {
	width: 100px;
	display: none;
	position: absolute;
	top: 38px;
	right: 20px;
	background: white;
	color:black;
}

.dropdown-content ul > li {
	list-style: none;
	padding: 10px 10px;
	text-align: center;
}

.dropdown-content ul > li:hover {
	background: lightgray;
}

.hover-account:hover .dropdown-content {
	display: block;
}

div.hero-wrapper {
	flex-shrink: 0;
	height: 200px;
	background: #404040;
	transition: all 0.4s ease;
}

.hero-content{
	width: 916px;
	margin:0 auto;
	height: 200px;
}



.hero-title{
	color: white;
	height: 40px;
	padding: 10px 25px;
	width: 95%;
	float:left;
}



.hero-right-control{
	height: 50px;
	width: 5%;
	float:left;
	padding: 20px 5px 15px 10px;
	color: #808080;
}

.hero-link {
	cursor: pointer;
}

.hero-link:hover{
	color:white;
}

.hero-list-container {
	height: 100px;
	width: 100%;
	color:white;
}

.hd-box {
	width: 100px;
	margin: 0 auto;
}

.hd-box i {
	font-size: 2rem;
	padding: 30px;
}

.hd-white{
	background: #505050;
}

.hero-nav{
	height: 100px;
}

.hero-list li{
	width: 16.16%;
	height: 100%;
	float:left;
	list-style: none;
	text-align: center;
	padding:10px 0;
	color:gray;
	cursor: pointer;
	transition: all 0.5s;
}

.hero-list li:hover {
	color:white;
}

.hero-list li > p {
	padding: 5px;
}

.left-floater{
	width: 200px;
	height: 300px;
	position: fixed;
	left: 30px;
	top:100px;
	background: #fff;
	transition: margin 0.5s;
	margin-left: -2000px;
	box-shadow: 0.3px 0.3px 0.3px 0.4px #BFBFBF;
	padding: 20px;
}

.left-floater select {
	padding: 5px 10px;
	width: 100%;
}

.floater-title{
	font-size: 0.9rem;
	padding: 10px 0;
}

.main-container{
	width: 1050px;
	height: 600px;
	margin-left:250px;
	margin-top: 135px;
}

.main-content{
	height: 400px;
	display: none;
}

.phinma {
	width: 100%;
	height:100%;
	text-align:center;
	margin: 0 auto;
}

.canvas-holder{
	width:345px;
	margin-right: 5px;
	height: 400px;
	float:left;
	background: #fff;
	box-shadow: 0.3px 0.3px 0.3px 0.4px #BFBFBF;	
}