*, *:after, *:before {
	box-sizing: border-box;
}

body {
	background: #bbf3cf;font-family: 'LiSong Pro Light','STXihei','Microsoft YaHei Light';
}

.iphone {
	top: -60px;
	box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.7);
	border: 5px solid #d9dbdc;
	background: #f8f8f8;
	padding: 15px;
	border-radius: 50px;
	height: 812px;
	width: 423px;
	position: relative;
	margin: 0 auto;
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}

.iphone-top {
	padding: 5px 136px 30px;
	position: relative;
}

.iphone-top .speaker {
	display: block;
	width: 70px;
	height: 7px;
	margin: 0 auto;
	border-radius: 6px;
	background: #292728;
}

.iphone-top .camera {
	display: block;
	margin: 0 auto;
	height: 14px;
	width: 14px;
	border-radius: 50%;
	margin-bottom: 17px;
	background: #333;
}

.iphone-top .sensor {
	display: block;
	width: 10px;
	height: 10px;
	float: left;
	background: #333;
	margin-top: -2px;
	border-radius: 50%;
}

.top-bar, .bottom-bar {
	display: block;
	width: 423px;
	height: 15px;
	border-left: 5px solid #BBB;
	border-right: 5px solid #BBB;
	position: absolute;
	left: -5px;
}

.top-bar {
	top: 65px;
}

.bottom-bar {
	bottom: 65px;
}

.iphone-screen {
	background: #000;
	border: 1px solid #fff;
	height: 627px;
	width: 375px;
	margin: 0 auto;
	border: 2px solid rgba(0, 0, 0, 0.9);
	border-radius: 3px;
	overflow: hidden;
}


.buttons .on-off, .buttons .up, .buttons .down, .buttons .sleep {
	display: block;
	background: #CCC;
	position: absolute;
	border-radius: 2px 0px 0px 2px;
}

.buttons .on-off {
	height: 40px;
	width: 3px;
	top: 100px;
	left: -8px;
}

.buttons .up, .buttons .down {
	height: 30px;
	width: 5px;
	left: -10px;
}

.buttons .up {
	top: 186px;
}

.buttons .down {
	top: 250px;
}

.buttons .sleep {
	left: auto;
	right: 54px;
	top: -10px;
	border-radius: 0px 2px 2px 0px;
	height: 5px;
	width: 59px;
}

.iphone-bottom {
	padding: 9px 0 0;
}

.iphone-bottom span {
	display: block;
	margin: 0 auto;
	width: 68px;
	height: 68px;
	background: #ccc;
	border-radius: 50%;
	background: -webkit-linear-gradient(315deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
	background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
	position: relative;
}

.iphone-bottom span:after {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	left: 4px;
	top: 4px;
}

.iphone-screen div.screen1 {
	padding: 30px;
}

.iphone-screen div.screen2 {
	background: #ffffff;
	padding: 30px;
	text-align: center;
}

.iphone-screen div.screen3 {
	padding: 19px;
	font-size: 20px;
	background: #f5f5f5;
	text-align: center;
}

.iphone-screen div.screen4 {
	padding: 6px 13px;
	text-align: center;
	color: #999;
	background: #fff;
	height: 145px;
}

.working,.notworking {
	transform: scale(0);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transition: .3s transform;
	height: 627px;
	background: #fff;
}

.scale1 {
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
}

font.name {
	font-size: 27px;
	border-bottom: 2px #000 solid;
}

.qqnumber {
	font-size: 20px;
	margin: 5px 0 0 0;
}

font.email {
	color: #888;
	font-size: 18px;
}

i.ok {
	display: inline-block;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABjElEQVRIS72WTU7DMBCFZ4JAQgISTkA5AUFq93ATuAHdFTZkRcIKuEG5ATdo2JJK9Ag5QiKQYFH8kB0c8lOauETN0vL488wbzwvTGj5exLh6H7gA2aZ8ZkpvdqJZNa4EuUz7FwS+JmbHFJDvBxLB5N3a0YNeyyEKQNbdyofXAsXQt6f3cjmHjJJBwszGJfrzUkDiO9F+DlEafPFrd1lkJ/EGjqVGKpPRW/+EhTVZGQI8E3GPmA6KZ8ASp8HuNOwAgkffjs48uM5nuhUy05EGdQTJAPrQDLQZa207gJQBEqS0ndNEP4EWEDEktmIIjOtd1wyQ0KUQMM6DvWisbyfmFP6C2gGWQgCKA+flsNglsgwZiJ6KGiwqUevuKmaig0Yfbi/YnsVVeFGD6hNo1GQRyATQqEne5wVtTAGtIWpjBVRt02VTorFcJQF/QCYAo0zy0gFyBrkmXlPKZC1TWE3ijv0EQBo4kXLY9TqjJEoLBtj7j0PKDJjhaestZVIbI4Dxz4TFnDT+razsjA2B3wY1NylNbOH4AAAAAElFTkSuQmCC);width: 25px;
	height: 25px;
	text-align: center;
}

i.wrong {
	display: inline-block;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAABHUlEQVRIS+WW323CMBDGv8NPhUiYDSgsQCeAERihTJB0kiYT0BEYgU4ACySwAa4E4Sm5ylJM2xCh4qQGqXk7JXc/3798Jjh4yAEDPyDHvuxnLfggjKzhjLXIET1s1dbEOEEKwIoI0hpQODJDiRxPBnSC7AcyJIJfF2D8mRF5iQq0/QUZyiUB48YgwLsXq8k/g7Qz9A4CUwLm5VIyMOtkWKQCu4p3vy8XMV7aiQr3Q/n8HaQBXqze0oEMmPBaC6KdTUADKttVw8I2jTeB9T7p+S9nVjsTE6CV4VEDNCgX2Fwa9/vM5M974mS6nOyJ7b/MqvHXwm4IcaEnhTKuidC9tjRn2874EDlGZ8qoPyxAQQMaH1ZqfN3TX/J3ciX6BE376xqiM44vAAAAAElFTkSuQmCC);width: 25px;
	height: 25px;
	text-align: center;
}

.screen3 p {
	margin: 11px 0 19px 0;
}

.iphone-screen .working {
	display: none;
}

.iphone-screen .notworking {
	display: none;
}

.iphone-screen .notworking div.screen1 {
	background: #ffb0b0;
}

.working div.screen1 {
	background: #6ec3ff;
}

.newtime {
	color: #666;
}
i.avatar{width: 100px; height: 100px; border-radius: 50%; text-align: center; margin: 0 auto; display: block;
background:url(data:image/jpeg;base64,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);}

.notworking i {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	opacity: .8;
}

/*星号loading*/
.loadEffect {
	width: 100px;
	height: 100px;
	position: relative;
	margin: 0 auto;
	margin-top: 240px;
}

.loadEffect span {
	display: inline-block;
	width: 30px;
	height: 10px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	background: white;
	position: absolute;
	-webkit-animation: load 1.04s ease infinite;
	animation: load 1.04s ease infinite;
}

@-webkit-keyframes load {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.2;
	}
}

@keyframes load {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.2;
	}
}

.loadEffect span:nth-child(1) {
	left: 0;
	top: 50%;
	margin-top: -5px;
	-webkit-animation-delay: 0.13s;
	animation-delay: 0.13s;
}

.loadEffect span:nth-child(2) {
	left: 10px;
	top: 20px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation-delay: 0.26s;
	animation-delay: 0.26s;
}

.loadEffect span:nth-child(3) {
	left: 50%;
	top: 10px;
	margin-left: -15px;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-animation-delay: 0.39s;
	animation-delay: 0.39s;
}

.loadEffect span:nth-child(4) {
	top: 20px;
	right: 10px;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-animation-delay: 0.52s;
	animation-delay: 0.52s;
}

.loadEffect span:nth-child(5) {
	right: 0;
	top: 50%;
	margin-top: -5px;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-animation-delay: 0.65s;
	animation-delay: 0.65s;
}

.loadEffect span:nth-child(6) {
	right: 10px;
	bottom: 20px;
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
	-webkit-animation-delay: 0.78s;
	animation-delay: 0.78s;
}

.loadEffect span:nth-child(7) {
	bottom: 10px;
	left: 50%;
	margin-left: -15px;
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	-webkit-animation-delay: 0.91s;
	animation-delay: 0.91s;
}

.loadEffect span:nth-child(8) {
	bottom: 20px;
	left: 10px;
	-webkit-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	transform: rotate(315deg);
	-webkit-animation-delay: 1.04s;
	animation-delay: 1.04s;
}

.iphone-screen.connecting {
	background: #000;
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
}

.mail1,.mail2,.mail3 {
	display: none;
}

.mail3 {
	padding-top: 20px;
	color: red
}

.screen1,.screen2,.screen3,.screen4 {
	display: none;
}
.working .screen4 p { margin: 5px; }