@import url("normalize.css");

@font-face {
	font-family: 'DINCond-Medium';
	src: url('../font/DINCond-Medium.otf') format('opentype');
}

@font-face {
	font-family: 'DINCond-Regular';
	src: url('../font/DINCond-Regular.otf') format('opentype');
}

@font-face {
	font-family: 'UnitSlabOT-Light';
	src: url('../font/UnitSlabOT-Light.otf') format('opentype');
}

html, body {
	position: relative;
	width: 100%;
	padding: 0px;
	margin: 0px;
}

#app {
	position: relative;
	width: 100%;
}

#head {
	position: relative;
	width: 100%;
	height: 40px;
	margin: 40px 0px 0px 0px;
}

#head .title {
	margin-left: 40px;
	height: 30px;
	color: #ffffff;
	margin-right: 40px;
	text-transform: uppercase;
	border-bottom: solid 1px rgba(0,0,0,0.2);
}

#head .icon {
	margin-left: 40px;
	font-size: 100%;
	color: #fff;
}

#foot #title {
	margin-left: 40px;
	cursor: pointer;
}

#foot #title img {
	height: 20px;
	margin-top: 20px;
}

#navigation.toolbar {
	position: absolute;
	right: 40px;
	display: inline-block;
}

#navigation.toolbar ul {
	color: #ffffff;
	padding-left: 0;
	height: 40px;
	line-height: 40px;
}

#navigation.toolbar ul li {
	cursor: pointer;
	float: left;
	margin-left: 20px;
	list-style-type: none;
	text-transform: uppercase;
}

#navigation.toolbar ul li a {
	color: inherit;
}

#backgroud {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -100;
	background-color: #000000;
}

#backgroud .backgroud-image {
	background-size: cover;
	width: 100%;
	height: 100%;
}

#backgroud .backgroud-video {
	/*width: 100%;*/
	/*height: 100%;*/
}

#background-mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -99;
	background: url("../media/pattern.png");
}


@media (max-width: 480px) {
	html, body, #wall {
		text-shadow: none;
		background: #000000;
		color: #000000;
	}
	#head {
		display: none;
	}
	#foot {
		display: none;
	}
	header {
	        position: fixed;
                left:0;
                right:0;
                top:0;
                height:60px;
		z-index: 1003;
                padding-left:20px;
                background-color:#000000;
	}
	header #title img {
		height: 16px;
		margin-top: 22px;
	}
	.navigation-actions {
		position: fixed;
		right: 0;
		z-index: 1003;
	}
	.navigation-actions .navigation-trigger {
		display: inline-block;
		color: #fff;
		text-transform: uppercase;
		font-weight: 500;
		letter-spacing:.16em; 
		padding: 10px 25px;
		color:rgba(0,0,0,.65);
		cursor:pointer;
		-webkit-transition-property:color;
		-webkit-transition-duration:.1s;
		-webkit-transition-timing-function:ease-out;
		-moz-transition-property:color;
		-moz-transition-duration:.1s;
		-moz-transition-timing-function:ease-out;
		-ms-transition-property:color;
		-ms-transition-duration:.1s;
		-ms-transition-timing-function:ease-out;
		-o-transition-property:color;
		-o-transition-duration:.1s;
		-o-transition-timing-function:ease-out;
		transition-property:color;
		transition-duration:.1s;
		transition-timing-function:ease-out;
		font-size:10px;
	}
	.navigation-actions .navigation-trigger .svg-icon-menu {
		width: 25px;
		height: 25px;
		overflow: hidden;
		display: inline-block;
		position: relative;
		top: 8px;
	}
	.navigation-actions.navigation-actions--light .navigation-trigger .svg-icon-menu svg {
		fill: #fff;
	}
	.navigation--main {
		visibility: visible;
		position: fixed;
		top: 0;
		right: -220px;
		width: 220px;
		height: 100%;
		min-height: 100%;
		background-color: #000000;
		padding: 0;
		opacity: 1;
		-webkit-transition-property: opacity;
		-webkit-transition-duration: 0s;
		-webkit-transition-timing-function: none;
		-moz-transition-property: opacity;
		-moz-transition-duration: 0s;
		-moz-transition-timing-function: none;
		-ms-transition-property: opacity;
		-ms-transition-duration: 0s;
		-ms-transition-timing-function: none;
		-o-transition-property: opacity;
		-o-transition-duration: 0s;
		-o-transition-timing-function: none;
		transition-property: opacity;
		transition-duration: 0s;
		transition-timing-function: none;
		-webkit-transition-delay: 1s;
		-moz-transition-delay: 1s;
		-ms-transition-delay: 1s;
		-o-transition-delay: 1s;
		transition-delay: 1s;
		overflow: hidden;
		-moz-user-select: -moz-none;
		-webkit-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		-webkit-overflow-scrolling: touch !important;
		z-index: 1002;
	}
	.navigation--main ul {
		margin: 80px 0 0 10px;
		list-style-type: none;
	}
	.navigation--main ul li {
		line-height: 60px;
	}
	.navigation--main ul li a {
		font-weight: bold;
		font-size: 16px;
		color: #fff;
	}
	.navigation--main ul li a  .nav-item-line {
		position: relative;
		top: -6px;
		display: inline-block;
		border-top: 1px solid #fff;
		margin: 0 30px 0 3px;
		width: 15px;
	}
	#app {
		/*
		transition-property: left;
		transition-duration: .5s;
		transition-timing-function: linear;

		-webkit-transition-property: left;
		-webkit-transition-duration: .5s;
		-webkit-transition-timing-function: linear;
		*/
	}
	#wall .section-content {
		border-top: 1px solid #000000;
	}
	#wall {
		background: #FAD700;
		color: #000000;
	}
	#wall .group-even {
		background: #000000;
		color: #fff;
	}
	#wall .group-even .section-content {
		border-top: 1px solid #fff;
	}
	#wall .group .title {
		display: inline-table;
		position: static;
		padding-top: 200px;
		margin: 0px 20px 0px 25px;
		border-bottom: 10px solid #000000;
		line-height: 60px;
		font-size: 200%;
	}
	#wall .group.group-even .title {
		border-bottom: 10px solid #fff;
	}
	#wall .section-container .content {
		margin: 0 20px 0 25px;
	}
	#background-mask {
		display: none;
	}
}

@media (min-width: 481px) {
	header, .navigation, .navigation-actions {
		display: none;
	}
	#wall {
		position: relative;
		overflow: hidden;
		width: 100%;
		/*height: ?px;*/
	}

	#wall #wall-container {
		position: relative;
		/*width: ?px;*/
		height: 100%;
	}

	#wall .group {
		position: relative;
		float: left;
		height: 100%;
	}

	#wall .group .title {
		position: absolute;
		margin: 0px 0px 0px 40px;
		font-size: 200%;
	}

	#wall .group .group-container {
		position: absolute;
		top: 50%;
	}

	#wall .section {
		position: relative;
		float: left;
		/*width: 530px;*/
		height: 100%;
	}
	#wall .section .section-container {
		position: absolute;
	}

	#wall .section-container .content {
		/*width: 450px;*/
		/*height: 640px;*/
		margin: 0px 40px 0px 40px;
	}

	#wall .section-container .bottom {
		margin-top: -85px;
	}

	#foot {
		position: relative;
		width: 100%;
		height: 40px;
		margin: 40px 0px 40px 0px;
	}
	#foot #navigation {
		display: inline-block;
	}

	#backgroud {
		position: fixed;
	}
}

html, body {
	font-family: "DINCond-Medium", DINCond-Regular, DIN, sans-serif, SimHei;
	color: #FFFFFF;
	font-size:11pt;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

h1 {
	font-size: 150%;
}

h2 {
	font-size: 200%;
}

h3 {
	font-size: 130%;
}

a:link, a:active, a:hover, a:visited {
	text-decoration: none;
}

.section-subtitle {
	height: 40px;
	margin-bottom: 15px;
}

.section-subtitle h3 {
	text-transform: uppercase;
	line-height: 40px;
	height: 40px;
}

.section-content {
	padding-top: 20px;
	padding-left: 0;
	border-top: 1px solid #FFFFFF;
	font-family: UnitSlabOT-Light;
	line-height: 25px;
}

ul.section-content li {
	list-style-type: none; /* removes default bullet */
	position: relative; /* positioning context for bullet */
}

ul.section-content li:before {
	content: "-"; /* escaped unicode character */
	line-height: 0; /* kills huge line height on resized bullet */
	position: absolute; /* position bullet relative to list item */
	top: 0.85em; /* vertical align bullet position relative to list item */
	left: -1em; /* position the bullet L- R relative to list item */
}

#logo {
	width: 320px;
	height: 36px;
	padding: 0;
	margin: 0;
}

.hide {
	display: none;
}

.inline {
	display: inline-block;
}
.chinese {
	font-size:85%;
}