/*
* 唱吧首页样式
*/
*{
	user-select: none;
}
body{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
ul,li{
	list-style: none;
}
img{
	border: none;
}
body{
	background-color: rgb(240,240,240);
	font-family: "microsoft yahei", 黑体, Helvetica, Arial, 宋体, sans-serif;
}
.sing-box{
	width: 100%;
	background-color: #ff5046;
	overflow: hidden;
}
.sing-header{
	width: 960px;
	height: 80px;
	margin: 0 auto;
	color: #fff;
	line-height: 80px;
}
.sing-header-logo{
	vertical-align: middle;
	cursor: pointer;
}
.sing-right{
	float: right;
}
.sing-nav-link{
	padding: 0 7px;
	font-size: 16px;
	color: #fff;
	vertical-align: top;
	display: inline-block;
	margin-left: 25px;
}
.sing-nav-link.checked{
	border-top: 3px solid #fff;
}
.sing-nav-link:hover{
	opacity: .7;
}
.sing-container{
	width: 960px;
	margin: 0 auto;
	height: 166px;
}
.sing-container-img{
	display: block;
	margin: 19px auto;
	width: 339px;
}
.sing-download{
	width: 103px;
	display: block;
	height: 48px;
	background: url(../images/download.png)left top no-repeat;
	line-height: 48px;
	padding-left: 60px;
	margin: 0 auto;
	color: #fff;
}
.sing-download:hover{
	background: url(../images/download_hover.png)top left no-repeat;
}
.sing-wrap{
	width: 960px;
	height: 417px;
	margin: 0 auto;
	transform-style: preserve-3d;
	-webkit-perspective: 1600;
	perspective-origin:50% 50%;
	position: relative;
}
.sing-wrap-img{
	position: absolute;
}
.sing-wrap-img:first-child{
	width: 275px;
	height: 328px;
	animation: img1 .7s ease-out .5s backwards;
	left: -15px;
	bottom: 0;
}
.sing-wrap-img:nth-child(2){
	width: 291px;
	height: 312px;
	animation: img1 .7s ease-out .2s backwards;
	left: 155px;
	bottom: 44px;
}
.sing-wrap-img:nth-child(3){
	width: 354px;
	height: 371px;
	animation: img2 .8s linear backwards;
	left: 308px;
	top: -15px;
}
.sing-wrap-img:nth-child(4){
	width: 303px;
	height: 263px;
	animation: img3 .7s ease-out .2s backwards;
	left: 508px;
	top: 4px;
}
.sing-wrap-img:last-child{
	width: 306px;
	height: 226px;
	animation: img3 .7s ease-out .5s backwards;
	left: 653px;
	top: -19px;
}
.sing-public-area{
	width: 960px;
	margin: 0 auto;
	padding: 58px 0;
}
.sing-public-area-li{
	width: 232px;
	height: 450px;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	font-size: 17px;
	color: #444;
	text-align: center;
}
.sing-public-area-img{
	cursor: pointer;
}
.sing-public-area-info{
	margin-top: 15px;
	line-height: 17px;
}
.sing-public-area-img:hover{
	opacity: .7;
}
.sing-public-container{
	width: 960px;
	margin: 0 auto;
	text-align: justify;
}
.sing-public-container-link{
	vertical-align: top;
	display: inline-block;
}
.sing-public-container-home-icon{
	width: 184px;
	height: 184px;
	padding-top:36px;
	background: url(../images/home_icons.png)no-repeat center center;
	vertical-align: top;
	text-align: center;
	color: #fff;
	line-height: 184px;
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.sing-public-container-inline-block{
	width: 100%;
	display: inline-block;
	height: 60px;
}
.sing-public-container-home-icon:hover{
	transform:scale(1.05);
}
.sing-public-container-link.iphone .sing-public-container-home-icon{
	background-position: 0 0;
}
.sing-public-container-link.android .sing-public-container-home-icon {
	background-position: -185px 0;
}
.sing-public-container-link.ipad .sing-public-container-home-icon{
	background-position: -370px 0;
}
.sing-public-container-link.win-phone .sing-public-container-home-icon{
	background-position: -555px 0;
}
.sing-public-container-link.home-icon {
	background-position: -740px 0;
}
.sing-public-footer{
	padding: 29px 0 24px;
	text-align: center;
	color: #b2b2b2;
	font-size: 14px;
	line-height: 18px;
	background-color: #f0f0f0;
}
.sing-public-footer-link {
	color: #8b8a8a;
}
.sing-public-footer-ghs-img {
	vertical-align: top;
}
.sing-public-footer-sf-img {
	vertical-align: top;
	height: 18px;
}
@keyframes img1{
	0%{
		transform:translate3d(-2000px,0,0);
	}
	100%{
		transform:translate3d(0,0,0);
	}
}
@keyframes img2{
	0%{
		opacity: 0;
		transform:scale(0);
	}
	30%{
		opacity: 1;
		transform:scale(1.2);
	}
	40%{
		opacity: 1;
		transform:scale(0.85);
	}
	50%{
		opacity: 1;
		transform:scale(1.15);
	}
	60%{
		opacity: 1;
		transform:scale(0.9);
	}
	70%{
		opacity: 1;
		transform:scale(1.1);
	}
	80%{
		opacity: 1;
		transform:scale(0.95);
	}
	90%{
		opacity: 1;
		transform:scale(1.05);
	}
	100%{
		opacity: 1;
		transform:scale(1);
	}
}
@keyframes img3{
	0%{
		transform:translate3d(2000px,0,0);
	}
	100%{
		transform:translate3d(0,0,0);
	}
}