body {
	font-family: PingFangSC-regular, sans-serif;
	background-color: #F5F6F8;
}

header {
	height: 120px;
	width: 100%;
	background-color: #222222;
}

.main {
	width: 1160px;
	margin: auto;
}

.main_bg {
	background-color: #FFFFFF;
	height: 984px;
}

.nav_Title {
	font-size: 48px;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 53px;
}

.designer_img {
	width: 327px;
	height: 100px;
	padding-top: 20px;
	position: relative;
	float: right;
}

.slogan {
	font-size: 20px;
	color: #222222;
	padding-top: 8px;
}

.project {
	width: 668px;
	margin-top: 92px;
}

.project_bg {
	border-radius: 26px;
	margin-bottom: 24px;
	background-color: #F5F6F8;
}

.project_snailProgress {
	height: 258px;
}

.project_eggCalculator {
	height: 180px;
}

.project_cow {
	height: 180px;
}

.project_logo {
	width: 120px;
	height: 120px;
	padding: 20px;
	float: left;
}

.project_name {
	font-size: 24px;
	font-weight: bold;
	color: #222222;
	float: left;
	position: relative;
	padding-top: 17px;
}

.project_resume {
	font-size: 16px;
	color: #666666;
	float: left;
	width: 488px;
	padding-top: 6px;
	line-height: 26px;
}

.iPhone {
	width: 432px;
	height: 864px;
	position: relative;
	float: right;
	right: 0;
	top: -758px;
	margin-bottom: -758px;
}

footer {
	height: 64px;
	width: 100%;
	background-color: #F5F6F8;
}

.footer_text {
	font-size: 14px;
	color: #666;
	padding-top: 22px;
	float: left;
	display: inline-block;
	text-decoration: none;
	height: 20px;
	line-height: 20px;
}

.footer_img {
	width: 20px;
	height: 20px;
	float: left;
	padding-top: 22px;
	padding-left: 16px;
}


/*
关于Float的显示逻辑：
有Float，那个普通模式的内容为Float让路
多个内容可以都设置成Float来排版
如果放得下，Float的内容会从左到右排列
放不下时，Float的内容会换行

margin可以控制元素的占位，比如iPhone图片比较高，超出了footer位置，此时设置margin-bottom: -758px，和以和top: -758px吻合，以避免footer下面多出一块

链接写成<a href="sp">即可，不用加上index.html，如<a href="sp/index.html">
*/