@charset "UTF-8";
@import url("loader.css");

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	width: 100%; 
	
	/* font-family: 'Zilla Slab', serif; */
	font-family: 'Lato', sans-serif;
	font-size: 0.95em;
	text-rendering: optimizeLegibility;
	font-weight: 400;
/*
	-webkit-font-smoothing: antialiased !important;
	font-smoothing: antialiased !important;
	-ms-interpolation-mode: bicubic;
*/
	color: #555;

	margin: 0;
	padding: 0;
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	-khtml-user-select: none; /* Konqueror */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
img {
	border: none;
}
a {
	text-decoration: none;
	color: #666;
	letter-spacing: 0.05em;
}
a:hover {
	text-decoration: none;
	color: #db0000;
}


#overlay .overlay_img {
}


#header {
	width: 100%;
	text-align: center;
}
#header #menu_top a {
	font-size: 0.8em;
	letter-spacing: 0.025em;
}
#header #logo_div {	
	/** logo size adj */
	height: 10vw;
	min-height: 160px;
	
	padding: 12vw 0 0 0;
	/**padding: 60px 0 30px 0; layout for when main nav is added */
	
	position: relative;
	text-align: center;
}
#header #logo_div div {
	position: absolute;
	left: 50%;
}
#header #logo_div div img {
	/** logo size adj */
	height: 10vw;
	min-height: 160px;
	
	position: relative;
	left: -50%;
	/** transation is enabled through javascript in script.js */
	transition: opacity 0.5s ease-in;
}
#header #logo_en {
	margin-top: 1vw;
}
#header #logo_cn img {
	opacity: 0;
}
#header #logo_en img{
	opacity: 1;
}
#header #slogan #name {
	margin-top: 1em;
	font-size: 0.9em;
}
#header #slogan {
	color: #999;
	letter-spacing: 0.2em;
	word-spacing: 0.1em;
	font-size: 0.8em;
	margin: 7vw 0 6vw 0;

	
	/*
	color: #666;
	letter-spacing: 0.3em;
	font-size: 0.9em;
	margin: 0 0 0 0.3em;
	*/
	/** margin: 50px 0 10px 0; layout for when main nav is added */
}
#header #slogan_location {
	color: #999;
	letter-spacing: 0.2em;
	font-size: 0.8em;
	margin: 0 0 0.6em 0;
	/** margin: 50px 0 10px 0; layout for when main nav is added */
}
#header #nav {
	letter-spacing: 0.05em;
	font-size: 0.9em;
}
#header #sub_nav {
	font-size: 0.9em;
	margin: 0px 0 5.5vw 0;
	/** margin: 0 0 50px 0; layout for when main nav is added */
	letter-spacing: 0.05em;
}


#container_main {
	width: 100%;
	height: auto;
}


#contact, #share, #awards {
	color: #FFF;
	padding: 0;
	margin: 0;
	pointer-events: none;
	visibility: hidden;
	font-weight: 300;
}
#awards .award_item {
	margin-bottom: 1em;
	font-size: 0.9em;
}
#awards .title {
	margin-bottom: 0.7em;
}
#awards .title, #awards .contents {
	font-size: 3.5em;
	text-align: center;
}
#awards .contents {
	font-size: 0.8em;
	letter-spacing: 0.1em;
	color: #DDD;
	text-rendering: optimizeLegibility;
}
#awards .award_title {
	color: #FFF;
	margin-bottom: 0.6em;
	font-size: 1em;
	font-weight: 500;
}
#contact .hello, #share .hello  {
	font-size: 3.5em;
	text-align: center;
}
#contact .line-1, #contact .line-2, #share .line-1, #share .line-2 {
	font-size: 1em;
	text-align: center;
	letter-spacing: 0.15em;
}
#contact .line-1, #share .line-1 {
	margin: 10px 0 0 0;
}
#contact .line-2, #share .line-2 {
	margin: 0 0 20px 0;
}
#contact .socialIconDiv, #share .socialIconDiv  {
	text-align: center;
	align-content: center;
	pointer-events: all;
}
/*
#contact img {
	margin: 0 8px 0 8px;
	
	-ms-transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-o-transform: scale(0.9);
	-moz-transform: scale(0.9);
	transform: scale(0.9);
}
*/
#contact img:hover {
	filter: brightness(1.1);
}
#about {
	color: #FFF;
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
}
#about .contentDiv {
	text-align: center;
	align-content: center;
	margin: auto;
	width: 90vw;
	height: 100vh;
	background: url(../img/about.png) no-repeat 50% 50%;
	background-size: 60% auto;
	
	-webkit-filter: opacity(0%);
	-webkit-animation: fadeIn 1s; /* Chrome */
	-webkit-animation-fill-mode: forwards;
	
	filter: opacity(0%);
 	animation: fadeIn 1s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn {
	0% {
		-webkit-filter: opacity(0%);
	 	filter: opacity(0%);
	}
	100% {
		-webkit-filter: opacity(100%);
	 	filter: opacity(100%);
	}
}


#template, #socialShareImagesDiv{
	position: absolute;
	left: -100000px;
	top: -100000px;
	width: 0;
	height: 0;
}
#seo_keywords {
	position: absolute;
	left: -100000px;
	top: -100000px;
}
.template_row img {
	display: block;
	float: left;
    position: relative;
	height: auto;
}
.clear_both {
	clear: both;
}


#container_main img {
	transition: opacity 1s ease;
}
#container_main img:hover {
	cursor: pointer;
	
	/*
	filter: brightness(1.15);
	-webkit-filter: brightness(1.15);
	-moz-filter: brightness(1.15);
	-o-filter: brightness(1.15);
	-ms-filter: brightness(1.15);
	*/
	
	-webkit-animation: imgHover 0.5s; /* Chrome */
	-webkit-animation-fill-mode: forwards;
	
	animation: imgHover 0.5s;
	animation-fill-mode: forwards;
}
@-webkit-keyframes imgHover {
	0% {
	 	-webkit-filter: opacity(100%);
	}
	50% {
	 	-webkit-filter: opacity(80%);
	}
	100% {
	 	-webkit-filter: opacity(100%);
	}
}
@keyframes imgHover {
	0% {
	 	-webkit-filter: opacity(100%);
	 	filter: opacity(100%);
	}
	50% {
	 	-webkit-filter: opacity(80%);
	 	filter: opacity(80%);
	}
	100% {
	 	-webkit-filter: opacity(100%);
	 	filter: opacity(100%);
	}
}





.ssk.ying-icon-hack {
	transition: all 1s ease;
}
.responsive_linebreak {
	display: inline;
}
@media only screen and (min-width: 1601px)  {
	body {
		font-size: 1vw;
	}
	#about .contentDiv {
		background-size: 80% auto;
	}
}
@media only screen and (max-width: 1600px)  {
	#about .contentDiv {
		background-size: 80% auto;
	}
}
@media only screen and (max-width: 850px)  {
	#about .contentDiv {
		background: url(../img/about-s.png) no-repeat 50% 40%;
		background-size: 94% auto;
		width: 100vw;
	}
}
@media only screen and (max-device-width: 850px)  {
	#about .contentDiv {
		background: url(../img/about-s.png) no-repeat 50% 40%;
		background-size: 94% auto;
		width: 100vw;
	}
	.ssk.ying-icon-hack {
		padding: 50px;
		margin: 2px;
	}
	.ying-icon-hack>.ssk, .ssk.ying-icon-hack:before {
		font-size: 42px;
	}
	/**
	.responsive_linebreak {
		display: block;
		height: 0.5em;
	}
	*/
	#share a, #contact a {
		margin-left: 30px;
	}
	#overlay .overlay_img {
	}
	#awards .award_title {
		font-size: 1.15em;
	}
	
	#header #logo_div div img {
		/** logo size adj */
		width: auto;
		height: 15vh;
		min-height: 250px;
	}
	#header #logo_div {
		/** logo size adj */
		height: 15vh;
		min-height: 250px;
	}
	

}
@media only screen and (max-width: 800px)  {
}