/* Basic */
/**/
html {
    background-color: #fff;
    background-attachment: fixed,						fixed;
    background-image: url("images/overlay1.png"), url("images/zphbg1.png");
    background-position: top left,					center center;
    background-repeat: repeat,						none;
}
	body, input, select, textarea {
		color: white;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 15pt;
		font-weight: 300 !important;
		letter-spacing: -0.025em;
		line-height: 1.75em;
	}

	body {
		background: white;
		overflow: hidden;
	}

		body.loading * {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}

	a {
		-moz-transition: border-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out;
		-o-transition: border-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: inherit;
		outline: 0;
		text-decoration: none;
	}

		a:hover {
			border-color: transparent;
		}

/* Wrapper */
	@-moz-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-webkit-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-o-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-ms-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
	@keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }

	#wrapper {
		-moz-animation: wrapper 2s forwards;
		-webkit-animation: wrapper 2s forwards;
		-o-animation: wrapper 2s forwards;
		-ms-animation: wrapper 2s forwards;
		animation: wrapper 1s forwards;
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		width: 100%;
	}

/* Main */

	#main {
		height: 100%;
		left: 0;
		position: fixed;
		text-align: center;
		top: 0;
		width: 100%;
	}

		#main:before {
			content: '';
			display: inline-block;
			height: 100%;
			margin-right: 0;
			vertical-align: middle;
			width: 1px;
		}

/* Header */
	@-moz-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-webkit-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-o-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-ms-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-moz-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-webkit-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-o-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-ms-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }

	#header {
		-moz-animation: header 0.5s 1.25s forwards;
		-webkit-animation: header 0.5s 1.25s forwards;
		-o-animation: header 0.5s 1.25s forwards;
		-ms-animation: header 0.5s 1.25s forwards;
		animation: header 0.5s 1.25s forwards;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		cursor: default;
		display: inline-block;
		opacity: 0;
		position: relative;
		text-align: center;
		top: -1em;
		vertical-align: middle;
		width: 90%;
	}

		#header h1 {
			font-size: 4.35em;
			font-weight: 900;
			letter-spacing: -0.035em;
			line-height: 1em;
		}

		#header p {
			font-size: 1.25em;
			margin: 0.75em 0 0.25em 0;
			opacity: 0.75;
		}

		#header nav {
			margin: 1.5em 0 0 0;
		}

			#header nav li {
				-moz-animation: nav-icons 0.5s ease-in-out forwards;
				-webkit-animation: nav-icons 0.5s ease-in-out forwards;
				-o-animation: nav-icons 0.5s ease-in-out forwards;
				-ms-animation: nav-icons 0.5s ease-in-out forwards;
				animation: nav-icons 0.5s ease-in-out forwards;
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-o-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-o-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
				display: inline-block;
				height: 8em;
				line-height: 8.5em;
				opacity: 0;
				position: relative;
				top: 0;
				width: 135px;
			}

				#header nav li:nth-child(1) {
					-moz-animation-delay: 1.5s;
					-webkit-animation-delay: 1.5s;
					-o-animation-delay: 1.5s;
					-ms-animation-delay: 1.5s;
					animation-delay: 1.5s;
				}

				#header nav li:nth-child(2) {
					-moz-animation-delay: 1.75s;
					-webkit-animation-delay: 1.75s;
					-o-animation-delay: 1.75s;
					-ms-animation-delay: 1.75s;
					animation-delay: 1.75s;
				}

				#header nav li:nth-child(3) {
					-moz-animation-delay: 2s;
					-webkit-animation-delay: 2s;
					-o-animation-delay: 2s;
					-ms-animation-delay: 2s;
					animation-delay: 2s;
				}

				#header nav li:nth-child(4) {
					-moz-animation-delay: 2.25s;
					-webkit-animation-delay: 2.25s;
					-o-animation-delay: 2.25s;
					-ms-animation-delay: 2.25s;
					animation-delay: 2.25s;
				}

				#header nav li:nth-child(5) {
					-moz-animation-delay: 2.5s;
					-webkit-animation-delay: 2.5s;
					-o-animation-delay: 2.5s;
					-ms-animation-delay: 2.5s;
					animation-delay: 2.5s;
				}

				#header nav li:nth-child(6) {
					-moz-animation-delay: 2.75s;
					-webkit-animation-delay: 2.75s;
					-o-animation-delay: 2.75s;
					-ms-animation-delay: 2.75s;
					animation-delay: 2.75s;
				}

				#header nav li:nth-child(7) {
					-moz-animation-delay: 3s;
					-webkit-animation-delay: 3s;
					-o-animation-delay: 3s;
					-ms-animation-delay: 3s;
					animation-delay: 3s;
				}

				#header nav li:last-child:before{
					content: '';
					width: 1px;
					height: 58px;
					background: rgba(255, 255, 255, 0.5);
					position: absolute;
					left: 0;
					top: 15px;
				}

			#header nav a {
				-webkit-tap-highlight-color: transparent;
				-webkit-touch-callout: none;
				border: 0;
				display: inline-block;
            }

#logo {
    height: 260px;
    width: 260px;
    margin-bottom: 1.5em;
}

.icon-text {
    margin-top: -8em;
    font-size: 0.8em;
}

.link-icon {
    display: block;
    width: 4em;
    height: 4em;
    margin-bottom: 0.2em;
}

.download-icon {
    background: url(images/ic_download.png);
    background-size: 100% auto;
}

.download-icon:hover {
    background: url(images/ic_download_hovered.png);
    background-size: 100% auto;
}

.wx-icon {
    background: url(images/ic_wechat.png);
    background-size: 100% auto;
}

.wx-icon:hover {
    background: url(images/ic_wechat_hovered.png);
    background-size: 100% auto;
}

.youku-icon {
    background: url(images/ic_youku.png);
    background-size: 100% auto;
}

.youku-icon:hover {
    background: url(images/ic_youku_hovered.png);
    background-size: 100% auto;
}

.tudou-icon {
    background: url(images/ic_tudou.png);
    background-size: 100% auto;
}

.tudou-icon:hover {
    background: url(images/ic_tudou_hovered.png);
    background-size: 100% auto;
}

.tencent-icon {
    background: url(images/ic_tencent.png);
    background-size: 100% auto;
}

.tencent-icon:hover {
    background: url(images/ic_tencent_hovered.png);
    background-size: 100% auto;
}

.weibo-icon {
    background: url(images/ic_weibo.png);
    background-size: 100% auto;
}

.weibo-icon:hover {
    background: url(images/ic_weibo_hovered.png);
    background-size: 100% auto;
}

.contact-icon {
    background: url(images/ic_contact.png);
    background-size: 100% auto;
}

.contact-icon:hover {
    background: url(images/ic_contact_hovered.png);
    background-size: 100% auto;
}

#lean_overlay {
    position: fixed;
    z-index: 10000;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#wechat-modal,#download-modal {
    width: 16em;
    height: 16em;
    padding: 0.5em;
    display: none;

    background: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0px 4px rgba(0, 0, 0, 0.7);
}

#wechat-modal img,#download-modal img {
    width: 15em;
    height: 15em;
}

#contact-modal{
	display: none;
	text-align: center;
	line-height: 1;
	position: relative;
}

#contact-modal h2{
	font-size: 28px;
	margin-top: 88px;
	margin-bottom: 60px;
}

#contact-modal ul{
	font-size: 16px;
}

#contact-modal li {
	display: inline;
	margin:0 50px;
}

#contact-modal img{
	width: 200px;
	height: 200px;
}

.modal-close{
	background: url(images/close.png);
	width: 36px;
	height: 37px;
	position: absolute;
	bottom:-90px;
	left: 50%;
	transform: translate(-50%, 0);
	border-bottom: none;
}