@charset "utf-8";
body,div,ul,li,p,span,a,img{ margin:0; padding:0;}
a:hover{ text-decoration:none;}
li{ list-style:none;}
body{
	margin:15% 8%;
	font-size:15px;
	color:#fff;
	font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
	background:url(../images/bg2.jpg) no-repeat 50% 0;
	background-size:cover;
	background-attachment:fixed;
	-webkit-background-attachment:fixed;
	box-sizing:border-box;
	}
h1{
	padding-top:32px;
	border-bottom:2px solid #fff;
	}
img{
	border:none;
	}
/*.myphotos{
	margin-bottom:32px;
	width:96px;
	height:96px;
	border-radius:96px;
	font-size:0;
	background:rgba(255,255,255,0.2);
	overflow:hidden;
	}*/
.myphotos img{
	display:block;
	margin:0 auto;
	padding:0;
	width:88px;
	height:88px;
	border-radius:88px;
	background:rgba(255,255,255,0.2);
	}


/*.myself p{
	text-indent:2em;
	margin-bottom:24px;
	
	}*/
.myphotos p{
	margin-top:16px;}
.myself ul{
	padding:12px 0;
	}
.myself a{
	display:block;
	margin:32px auto;
	width:100%;
	height:48px;
	line-height:45px;
	color:#c5d9ec;
	font-size:16px;
	font-weight:600;
	text-align:center;
	letter-spacing:4px;
	border:1px solid rgba(255,255,255,.2);
	border-radius:6px;
	background:rgba(12,104,195,.5);
	box-shadow:0px 0px 5px rgba(12,104,195,.8);
	}
.myself a:hover{
	background:rgba(24,209,89,.5);
	box-shadow:0px 0px 5px rgba(24,209,89,.8);
	}
.photos{
	margin:0 auto;
	position:relative;
	width:720px;
	height:300px;
	}
.photos img{
	width:300px;
	height:auto;
	padding:10px;
	background:#fff;
	border:1px solid #ddd;
	position:absolute;
	transition:1.2s;
	-webkit-transition:1.2s;
	-moz-transition:1.2s;
	z-index:1;
	
	}
.photos img:hover{
	transform:rotate(0deg) scale(1);
	-webkit-transform:rotate(0deg) scale(1);
	-moz-transform:rotate(0deg) scale(1);
	z-index:2;
	}
.location1{
	top:0;
	left:100px;
	transform:rotate(-10deg) scale(0.7);
	-webkit-transform:rotate(-10deg) scale(0.7);
	-moz-transform:rotate(-10deg) scale(0.7);
	}
.location2{
	top:80px;
	left:250px;
	transform:rotate(10deg) scale(0.7);
	-webkit-transform:rotate(10deg) scale(0.7);
	-moz-transform:rotate(10deg) scale(0.7);
	}
.location3{
	top:-20px;
	left:380px;
	transform:rotate(25deg) scale(0.7);
	-webkit-transform:rotate(25deg) scale(0.7);
	-moz-transform:rotate(25deg) scale(0.7);
	}
.location4{
	top:-52px;
	left:0px;
	transform:rotate(-10deg) scale(0.7);
	-webkit-transform:rotate(-10deg) scale(0.7);
	-moz-transform:rotate(-10deg) scale(0.7);
	}
.start{
	width:114px;
	height:55px;
	background: url(../images/start.png) no-repeat 0 0;
	position:absolute;
	z-index:-1;
	}
.start1{
	top:50%;
	-webkit-animation:fadeout1 1.2s infinite ease-in;
	animation:fadeout1 1.2s infinite ease-in;
	}
.start2{
	top:60%;
	-webkit-animation:fadeout2 1.4s infinite ease-in-out;
	animation:fadeout2 1.4s infinite ease-in-out;
	}
.start3{
	top:80%;
	-webkit-animation:fadeout3 1.3s infinite ease-in;
	animation:fadeout3 1.3s infinite ease-in;
	}
@keyframes fadeout1{
	0%{transform:scale(0); opacity:0;top:10%; right:10%;}
	50%{transform:scale(1); opacity:1;}
	100%{transform:scale(0); opacity:0;right:80%;}
	}
@keyframes fadeout2{
	0%{transform:scale(0); opacity:0;top:30%; right:20%;}
	50%{transform:scale(1); opacity:1;}
	100%{transform:scale(0); opacity:0;right:80%;}
	}
@keyframes fadeout3{
	0%{transform:scale(0); opacity:0;top:20%; right:30%;}
	50%{transform:scale(1); opacity:1;}
	100%{transform:scale(0); opacity:0;right:80%;}
	}

@media screen and (min-width:769px) {
	body{
		margin:8% 20%;
		font-size:18px;
		line-height:36px;
		}
	h1{
	font-size:68px;
	padding-bottom:50px;
	}
	/*.myphotos{
	width:128px;
	height:128px;
	border-radius:128px;
	}*/
	.h4{
		font-size:24px;
		}
	.myself ul{
		padding-bottom:24px;
		}
	.myself a{
		display:block;
		width:20%;
		font-size:18px;
		border:1px solid rgba(255,255,255,.2);
		background:rgba(12,104,195,.5);
		}
	}
@media screen and (max-width:767px){
	/*body{
		background:url(../images/bg2.jpg) repeat-x 50% 0;
		}*/
	/*.myphotos{ margin:0 auto 24px auto;
	}*/
	h1{
		font-size:32px;
		padding-bottom:18px;
		}
	.myself ul{
		margin-bottom:12px;
		border-radius:4px;
		padding:12px 16px;
		background:rgba(255,255,255,.2);
		}
	.photos{
		margin:30% auto 0 auto;
		position:relative;
		width:230px;
		height:470px;
		}
	.photos img{
		width:200px;
		padding:5px;
		}
    .photos img:hover{
		transform:rotate(0deg) scale(0.8);
		-webkit-transform:rotate(0deg) scale(0.8);
		-moz-transform:rotate(0deg) scale(0.8);
		}
	.location1{
		top:-50px;
		left:10px;
		transform:rotate(-10deg) scale(0.5);
		-webkit-transform:rotate(-10deg) scale(0.5);
		-moz-transform:rotate(-10deg) scale(0.5);
		}
	.location2{
		top:-30px;
		left:50px;
		transform:rotate(10deg) scale(0.5);
		-webkit-transform:rotate(10deg) scale(0.5);
		-moz-transform:rotate(10deg) scale(0.5);
		}
	.location3{
		top:-30px;
		left:40px;
		transform:rotate(25deg) scale(0.5);
		-webkit-transform:rotate(25deg) scale(0.5);
		-moz-transform:rotate(25deg) scale(0.5);
		}
	.location4{
		top:-60px;
		left:-10px;
		transform:rotate(-10deg) scale(0.5);
		-webkit-transform:rotate(-10deg) scale(0.5);
		-moz-transform:rotate(-10deg) scale(0.5);
		}
		.myphotos img{
		width:56px;
		height:56px;
		border-radius:56px;
		}

	}