/*css reset*/
*{padding: 0;margin: 0;box-sizing: border-box;}
a{text-decoration:none;color: #333;}

/*common css*/
.pill{
  background: #000;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  width: 140px;
  line-height: 20px;
  text-align: center;
  border-radius: 20px;
}

.layout{max-width: 1100px;margin:0 auto;}

.clearfix::after{content:'';display: block;clear:both;}

/*page css*/
body{font:16px/1.5 kaiti,"Microsoft YaHei",SimHei,Helvetica,Arial;color:#333;}

.wrapper{
	background-color: #ececec;
	margin-top: 30px;
	margin-bottom: 30px;
	padding-top: 40px;}

.aside{
	float: left;
	width: 280px;
}
.aside .user{
	text-align: center;
	padding: 30px 0 20px 0;
}
.aside .user h1{
	font-size: 40px;
}

.aside .user::after{
	content:'';
	display: block;
	width: 0;
	height: 0;
	margin-top: 20px;
	border-top: 20px solid #d6d6d6;
	border-bottom:20px solid transparent;
	border-right: 140px solid #d6d6d6;
	border-left: 140px solid transparent;
}	
.aside .user h1::after{
	content: '';
	display: block;
	width: 60px;
	border-top: 1px solid #d6d6d6;
  margin-left: 110px;
  margin-top: 16px;
}
.aside  .user p{
	margin-top: 20px;
}

.aside .contact{
	padding: 20px;
	margin-bottom: 20px;
}	
.aside .contact li{
  border-bottom: 1px solid #d6d6d6;
	/*line-height: 40px;*/
}

.aside .contact .iconfont{
	border-right: 1px solid #d6d6d6;
	padding-right: 10px;
	margin-right: 10px;
	padding-left: 10px;
	display: inline-block;
	font-size: 40px;
	color:#7bbaaa;
}


.aside .skills{
	background-color: #7bbaaa;
	padding: 20px;
	color:#fff;
}	

.aside .skills dt{
	color:#eee;
	margin-top: 14px;
} 

.aside .skills dd{
	height: 4px;
	background: #8bcebd;
	border-radius: 14px;
} 

.aside .skills .mastery{
	height: 4px;
	background-color: #fff;
	display: block;
	border-radius: 14px;
}

.aside .others h2{
  margin:26px 0 0 20px;
}

.main{
	margin-left: 280px;
	background: #fff;
	padding: 40px;
	margin-right: 20px;
}
ul,li{
	list-style: none;
}
.main >.introduction{
	overflow: auto;	
}
.main > .introduction > img{
  width: 100px;
  height: 100px;
  float: left;
}

.main > .introduction p{
   margin-left: 120px;
   padding-top: 4px;
}

.main .education h2{
	font-size: 30px;
	color: #d9d9d9;
	text-align: center;
	margin-top: 20px;
}

.section .pill {
  float: left;
  margin-top: 5px;
}

.section h2{
  font-size: 30px;
  color: #d9d9d9;
  text-align: center;
  margin-top: 30px;
}

.section .more {
  margin-left: 150px;
  border-left: 1px solid #eee;
}
.section h3 {
  color: #666;
  font-size: 20px;
  font-weight: normal;
}
.section h3 strong{
  color: #111;
  font-weight: bold;
}

.section h3::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  border: 2px solid #7bbaaa;
  margin-right: 20px;
  position: relative;
  left: -5px;
}

.section h4 {
  color: #111;
  margin-top: 20px;
  margin-left: 40px;
}

.section .more ul {
  margin-left: 50px;
  padding-bottom: 20px;
}
.section .more li {
  color: #666;
  font-size: 14px;
}

 .about p{
  text-align: center;
}

@media print {
  .aside {
    width: 200px;
  }
  .main {
    margin-left: 200px;
  }
  .aside .user::after {
  border-right-width: 100px;
  border-left-width: 100px;
}
  .pill {
    display: none;
  }

  .section .more {
    margin-left: 20px;
  }

  .wrapper {
    margin: 0;
  }
}