/*
	Techno Alliance Style Sheet

	Author : Dalian Spacekey Information Technology Ltd.
	Version : 1.0 (2013-10-24)
*/

/*
	mobile phone(under 480px)
*/
	html, body {
		height: 100%;
		font-family: Armata, Meiryo, "微软雅黑", sans-serif;
		font-size: 10pt;
		line-height: 180%;
	}

	header {
		width: 100%;
		display: block;
		top: 0;
		background-color: #FFFFFF;
	}

	#inner-header {
		width: 100%;
		margin: 0 auto;
	}

	#headerbar {
		margin: 0 auto;
		height: 10px;
	}

	#headerbar div {
		margin: 0 auto;
		float: left;
	}

	#headerbarleft {
		width: 50%;
		height: 10px;
		background-image: url("../image/barleft.png");
	}

	#headerbarcenter {
		width: 0.5%;
		height: 10px;
	}

	#headerbarright {
		width: 49.5%;
		height: 10px;
		background-image: url("../image/barright.png");
	}

	#logo {
		margin-top: 5px;
		margin-left: 5px;
		display: block;
		float: left;
	}

	#menu {
		display: none;
		list-style: none;
		padding-left: 1em;
		clear: both;
	}

	#container {
		width: 98%;
		display: block;
		margin: 0 auto;
	}

	#topimage {
	}

	#topimage img {
		width: 100%;
	}

	#companycopy {
		padding: 10px;
		font-size: 10pt;
		text-align: left;
	}

	#contents {

	}

	.article {
		padding-top: 10px;
		padding-bottom: 10px;
		clear: both;
	}

	.article h2 {
		text-align: left;
		font-size: 12pt;
		font-weight: normal;
		border-bottom: 2px solid #000000;
		padding: 2px;
	}

	.article h3 {
		text-align: left;
		font-size: 10pt;
		font-weight: normal;
		border-bottom: 1px solid #000000;
		padding: 2px;
	}

	#informationcontainer {

	}

	.informationrow {
		clear: left;
	}

	.informationcolumn {
		width: 95%;
		padding: 8px;
	}

	.informationdata {
		font-size: 8pt;
		text-align: right;
	}

	#solutioncontainer {

	}

	.solutionrow {
		clear: left;
	}

	.solutioncolumn {
		width: 95%;
		padding: 8px;
	}

	#introductioncontainer {

	}

	.introductionrow {
		clear: left;
	}

	.introductioncolumn {
		max-width: 280px;
		width: 80%;
		padding: 1px;
		background-color: #C0C0C0;
		margin: 8px;
	}

	.introductioncolumn img {
		max-width: 280px;
		width: 100%;
	}

	.demomoviesrow {
		clear: left;
	}

	.demomoviesleftcolumn {

	}

	.demomoviesrightcolumn {

	}

	.aboutrow {
		clear: left;
	}

	.aboutrow p img {
		width: 60%;
	}

	.logo {
		text-align: left;
	}

	.aboutcolumn {
		float: none;
		border-bottom: 1px solid #C0C0C0;
		width: 95%;
	}

	.column1 {
		width: 100%;
	}

	.column2 {
		width: 100%;
	}

	.column3 {
		width: 100%;
	}

	.column4 {
		width: 100%;
	}

	.map {
		display: none;
		clear: both;
		margin-top: 30px;
	}

	#contactform {
		width: 95%;
	}

	#form div {
		width: 95%;
		margin: 0 auto;
	}

	#form div input {
		width: 95%;
	}

	#form div textarea {
		width: 95%;
	}

	.submitbuttonarea {
		width: 95%;
		padding: 0;
		margin-top: 10px;
		text-align: left;
	}

	.submitbutton {
		border:solid 1px #ccc;
		padding:15px 30px;
		font-family:Arial, sans-serif;
		font-size:1.2em;
		text-transform:uppercase;
		font-weight:bold;
		color:#333;
		cursor:pointer;
	}

	footer {
		clear: both;
		width: 100%;
		height: 30px;
	}

	footer .copy {
		width: 95%;
		margin: 0 auto;
		font-size: 7pt;
		text-align: right;
	}

/*
	smartphone or tablet (480px - 980px)
*/

@media all and (min-width: 480px) {
	html, body {
		height: 100%;
		font-family: Armata, Meiryo, "微软雅黑", sans-serif;
		font-size: 10pt;
		line-height: 180%;
	}

	header {
		position: fixed;
		width: 100%;
		height: 100px;
		z-index: 100;
		display: block;
		top: 0;
		background-color: #FFFFFF;
	}

	#inner-header {
		width: 100%;
		margin: 0 auto;
	}

	#headerbar {
		margin: 0 auto;
		height: 10px;
	}

	#headerbar div {
		margin: 0 auto;
		float: left;
	}

	#headerbarleft {
		width: 50%;
		height: 10px;
		background-image: url("../image/barleft.png");
	}

	#headerbarcenter {
		width: 0.5%;
		height: 10px;
	}

	#headerbarright {
		width: 49.5%;
		height: 10px;
		background-image: url("../image/barright.png");
	}

	#logo {
		margin-top: 10px;
		margin-left: 10px;
		display: block;
		float: left;
	}

	#menu {
		display: block;
		list-style: none;
		padding-left: 1em;
		clear: both;
	}

	#menu li {
		float: left;
		padding-right: 1em;
	}

	#menu a {
		text-decoration: none;
		font-size: 9pt;
	}

	#container {
		width: 95%;
		display: block;
		margin: 0 auto;
	}

	#topimage {
		padding-top: 100px;
	}

	#topimage img {
		width: 100%;
	}

	#companycopy {
		padding: 10px;
		font-size: 14pt;
		text-align: center;
		line-height: 160%;
	}

	#contents {

	}

	.article {
		padding-top: 40px;
		padding-bottom: 160px;
		clear: both;
	}

	.article h2 {
		text-align: center;
		font-size: 13pt;
		font-weight: normal;
		letter-spacing: 8px;
		border-bottom: 2px solid #000000;
		padding: 16px;
		margin-top: 50px;
	}

	.article h3 {
		text-align: center;
		font-size: 10pt;
		font-weight: normal;
		border-top: 1px solid #000000;
		border-bottom: 1px solid #000000;
		padding: 8px;
	}

	#informationcontainer {

	}

	.informationrow {
		clear: left;
	}

	.informationcolumn {
		float: left;
		width: 30%;
		padding: 8px;
	}

	.informationdata {
		font-size: 8pt;
		text-align: right;
	}

	#solutioncontainer {

	}

	.solutionrow {
		clear: left;
	}

	.solutioncolumn {
		float: left;
		width: 30%;
		padding: 8px;
	}

	#introductioncontainer {

	}

	.introductionrow {
		clear: left;
	}

	.introductioncolumn {
		float: left;
		width: 30%;
		padding: 1px;
		background-color: #C0C0C0;
		margin: 1%;
	}

	.introductioncolumn img {
		width: 100%;
	}

	.demomoviesrow {
		clear: left;
	}

	.demomoviesleftcolumn {

	}

	.demomoviesrightcolumn {

	}

	.aboutrow {
		clear: left;
	}

	.aboutrow p img {
		width: auto;
	}

	.logo {
		text-align: center;
	}

	.aboutcolumn {
		border-bottom: none;
		float: left;
	}

	.column1 {
		width: 100%;
	}

	.column2 {
		width: 45%;
	}

	.column3 {
		width: 33%;
	}

	.column4 {
		width: 25%;
	}

	.map {
		display: block;
		clear: both;
		margin-top: 30px;
	}

	#contactform {
		width: 95%;
	}

	#form div {
		width: 60%;
		margin: 0 auto;
		padding: 10px 0 10px 0;
	}

	.submitbuttonarea {
		width: 60%;
		padding: 0;
		margin-top: 10px;
		text-align: left;
	}

	.submitbutton {
		border:solid 1px #ccc;
		padding:15px 30px;
		font-family:Arial, sans-serif;
		font-size:1.2em;
		text-transform:uppercase;
		font-weight:bold;
		color:#333;
		cursor:pointer;
	}

	footer {
		clear: both;
		width: 100%;
		height: 30px;
	}

	footer .copy {
		width: 95%;
		margin: 0 auto;
		font-size: 9pt;
		text-align: right;
	}
}

/*
	pc (over 980px)
*/

@media all and (min-width: 980px) {

	html, body {
		height: 100%;
		font-family: Armata, Meiryo, "微软雅黑", sans-serif;
		font-size: 12pt;
		line-height: 180%;
	}

	header {
		position: fixed;
		width: 100%;
		height: 80px;
		z-index: 100;
		display: block;
		top: 0;
		background-color: #FFFFFF;
	}

	#inner-header {
		width: 980px;
		margin: 0 auto;
	}

	#headerbar {
		margin: 0 auto;
		height: 10px;
	}

	#headerbar div {
		margin: 0 auto;
		float: left;
	}

	#headerbarleft {
		width: 488px;
		height: 10px;
		background-image: url("../image/barleft.png");
	}

	#headerbarcenter {
		width: 4px;
		height: 10px;
	}

	#headerbarright {
		width: 488px;
		height: 10px;
		background-image: url("../image/barright.png");
	}

	#logo {
		margin-top: 20px;
		margin-left: 40px;
		display: block;
		float: left;
	}

	#menu {
		list-style: none;
		padding-left: 1em;
		clear: none;
		float: right;
		margin-right: 30px;
		padding-top: 1%;
	}

	#menu li {
		float: left;
		padding-right: 1em;
	}

	#menu a {
		text-decoration: none;
		font-size: 9pt;
	}

	#container {
		width: 900px;
		display: block;
		margin: 0 auto;
	}

	#topimage {
		padding-top: 80px;
	}

	#companycopy {
		padding: 10px;
		font-size: 16pt;
		text-align: center;
		line-height: 160%;
	}

	#contents {
		padding-top: 120px;
	}

	.article {
		padding-top: 80px;
		padding-bottom: 160px;
		clear: both;
	}

	.article h2 {
		text-align: center;
		font-size: 15pt;
		font-weight: normal;
		letter-spacing: 8px;
		border-bottom: 2px solid #000000;
		padding: 16px;
		margin-top: 50px;
	}

	.article h3 {
		text-align: center;
		font-size: 12pt;
		font-weight: normal;
		border-top: 1px solid #000000;
		border-bottom: 1px solid #000000;
		padding: 8px;
	}

	#informationcontainer {

	}

	.informationrow {
		clear: left;
	}

	.margintop{
		margin-top: 25px;
	}

	.informationcolumn {
		float: left;
		width: 280px;
		padding: 10px;
	}

	.informationdata {
		font-size: 8pt;
		text-align: right;
	}

	#solutioncontainer {

	}

	.solutionrow {
		clear: left;
	}

	.solutioncolumn {
		float: left;
		width: 280px;
		padding: 10px;
	}

	#introductioncontainer {

	}

	.introductionrow {
		clear: left;
	}

	.introductioncolumn {
		float: left;
		width: 280px;
		height: 140px;
		padding: 1px;
		background-color: #C0C0C0;
		margin: 8px;
	}

	.demomoviesrow {
		clear: left;
	}

	.demomoviesleftcolumn {
		float: left;
		margin: 8px;
	}

	.demomoviesrightcolumn {
		margin: 8px;
	}

	.aboutrow {
		clear: left;
	}

	.aboutrow p img {
		width: auto;
	}

	.logo {
		text-align: center;
	}

	.aboutcolumn {
		border-bottom: none;
		float: left;
	}

	.column1 {
		width: 100%;
	}

	.column2 {
		width: 50%;
	}

	.column3 {
		width: 33%;
	}

	.column4 {
		width: 25%;
	}

	.businessaccount {
		font-size:1.2em;
	}

	.map {
		display: block;
		clear: none;
		margin-top: 30px;
	}

	#contactform {
		width: 900px;
	}

	#form div {
		width: 620px;
		margin: 0 auto;
		padding: 10px 0 10px 0;
	}

	.submitbuttonarea {
		width: 620px;
		padding: 0;
		margin-top: 10px;
		text-align: left;
	}

	.submitbutton {
		border:solid 1px #ccc;
		padding:15px 30px;
		font-family:Arial, sans-serif;
		font-size:1.2em;
		text-transform:uppercase;
		font-weight:bold;
		color:#333;
		cursor:pointer;
	}

	footer {
		clear: both;
		width: 100%;
		height: 30px;
	}

	footer .copy {
		width: 900px;
		margin: 0 auto;
		font-size: 9pt;
		text-align: right;
	}
}