/**
* CSS
* author Kiken Corporation
*/

@font-face {
    font-family: 'euro_demi';
    src: url('../fonts/euro_demi.otf');
    src: url('../fonts/euro_demi.otf') format('opentype')
    font-weight: normal;
    font-style: normal;

}
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 10px;
	font-family: Arial,Helvetica,sans-serif;
	line-height: 9pt;
	background: #000;
}

a:link { text-decoration: none; font-weight:bold; color: #00FFCC;}
a:active { text-decoration: none; }
a:visited { text-decoration: line-through; color: #444; }
a:hover { text-decoration: underline; color: #AAA; }
a img { border: none; }

h1 {
	font-family: 'euro_demi';
	font-size: 40px;
	line-height: 39px;
	text-transform: uppercase;
	color: #ffffff
}

h2 {
	font-size: 9px;
	font-family: Arial,Helvetica,sans-serif;
	line-height: 9px;
}

#mainContainer{
	position:absolute;
	width: 990px;
	height: 960px;
	left: 50%;
	text-align: center;
	margin-left: -495px;
	background-color: #101010;
	align: center;
}

#bannerContainer{
	position: relative;
	width: 990px;
	height: 356px;
	top: 0px;
	margin-left: -495px;
	left: 50%;
	text-align: center;
	align: center;
}

#boxWhat {
	position: absolute;
	width: 300px;
	height: 200px;
	left: 5px;
	top: 361px;
	text-align: left;
	padding: 10px;
	color:#999999;
	font-size: 12px;
	line-height:12px;
	background-color: #222222;
}

#boxWhy {
	position: absolute;
	width: 300px;
	height: 200px;
	left: 335px;
	top: 361px;
	text-align: left;
	padding: 10px;
	color:#999999;
	font-size: 12px;
	line-height:12px;
	background-color: #222222;
}

#boxDownload {
	position: absolute;
	width: 300px;
	height: 200px;
	left: 665px;
	top: 361px;
	text-align: left;
	padding: 10px;
	color:#ffffff;
	font-size: 12px;
	line-height:12px;
	background-color: #ff3300;
}

#boxDesc {
	position: absolute;
	width: 651px;
	height: 366px;
	left: 5px;
	top:590px;
	text-align: left;
	font-size: 12px;
	line-height:12px;
}

#boxSupport {
	position: absolute;
	width: 300px;
	height: 250px;
	left: 665px;
	top: 590px;
	text-align: left;
	padding: 10px;
	color:#ffffff;
	font-size: 12px;
	line-height:12px;
	background-color: #007766;
}
#boxSupport img {
	padding: 0px 5px 0px 0px;
}

#footer {
	position:absolute;
	width: 990px;
	height: 30px;
	left: 50%;
	top: 965px;
	bottom:0px;
	margin-left: -495px;
	background-color: #101010;
	align: center;
	text-align: right;
	color: #555555;
}
#footer img {
	padding:0px 20px 0px 20px;
}


@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}


/* for phone  */

@media screen and (max-width: 675px) {
.navigation { display: none; }
h1 {font-size: 24px; line-height: 23px; }
#mainContainer{ width: 320px; height: 1175px; left: 50%; margin-left: -160px; }
#bannerContainer{ position: relative; width: 320px; height: 136px; top: 0px; margin-left: -160px; left: 50%; }
#bannerContainer img { width: 320px; height: auto; }
#boxWhat { position: absolute; width: 300px; height: 210px; left: 5px; top: 121px; padding: 5px; }
#boxDesc { width: 320px; height: 366px; left: 5px; top: 347px; text-align: left; font-size: 12px; line-height:12px; }
#boxDesc iframe { width: 310px; height: auto; }
#boxWhy { position: absolute; width: 300px; height: 210px; left: 5px; top: 503px; padding: 5px; }
#boxDownload { position: absolute; width: 300px; height: 190px; left: 5px; top: 730px; padding: 5px; }
#boxSupport { position: absolute; width: 300px; height: 175px; left: 5px; top: 937px; padding: 5px; }
#boxSupport img { padding: 0px 5px 0px 0px; }
#footer { position:absolute; width: 310px; height: 45px; text-align: center; margin-left:0px; left: 5px; top: 1128px; }
#footer img { padding:0px 20px 0px 20px; }

}

/* for tablet  */

@media only screen and (min-width: 676px) and (max-width: 1010px) {
.navigation { display: none; }
#mainContainer{ width: 661px; height: 1400px; left: 50%; margin-left: -330px; }
#bannerContainer{ position: relative; width: 651px; height: 276px; top: 0px; margin-left: 0px; left: 0px; }
#bannerContainer img { width: 651px; height: auto; }
#boxWhat { position: absolute; width: 630px; height: 150px; left: 5px; top: 241px; padding: 10px; }
#boxWhy { position: absolute; width: 630px; height: 150px; left: 5px; top: 418px; padding: 10px; }
#boxDesc { width: 651px; height: 366px; left: 5px; top:595px; text-align: left; font-size: 12px; line-height:12px; }
#boxDesc iframe { width: 650px; height: 366px; }
#boxDownload { position: absolute; width: 630px; height: 170px; left: 5px; top: 968px; padding: 10px; }
#boxSupport { position: absolute; width: 630px; height: 150px; left: 5px; top: 1165px; padding: 10px; }
#boxSupport img { padding: 0px 5px 0px 0px; }
#footer { position:absolute; width: 631px; height: 30px; text-align: right; margin-left:0px; left: 5px; top: 1343px; }
#footer img { padding:0px 20px 0px 20px; }

}