@charset "UTF-8";

@font-face {
    font-family: 'WebFont';
    src: url('font-webfont.eot');
    src: url('font-webfont.eot?#iefix') format('embedded-opentype'),
         url('font-webfont.woff2') format('woff2'),
         url('font-webfont.woff') format('woff'),
         url('font-webfont.ttf') format('truetype'),
         url('font.otf') format('opentype'),
         url('font-webfont.svg#neristhin') format('svg');
}

a {
	outline:none !important;
	text-decoration:none;
	color:#666;
}

body {
	background:#fff;
	font-family: WebFont, Geneva, Verdana,Arial, Helvetica, sans-serif;
	color:#666;
	-webkit-text-size-adjust:none;
	line-height:150%;
}

.clear {
	clear:both;
}

div#container {
	overflow:hidden;
}

.contents {
	margin:0 auto;
}

li {
	list-style-type:none;
}

li img {
	vertical-align:top;
}

img {
	width:100%;
}

.left {
	float:left;
	height:100%;
}

.right {
	float:right;
	height:100%;
}

dl, dt, dd, li {
	margin:0;
	padding:0;
}

/* ========================= HEADER ========================= */ 

div#navi_btn {
	display:none;
}

div#header {
	height:80px;
	position:relative;
}

div#header a#logo {
	display:block;
	position:absolute;
	top:20px;
	left:0px;
	width:92px;
}

div#header ul#navi {
	position:absolute;
	top:25px;
	right:80px;
	height:60px;
	list-style:none;
	margin:0;
	display:block;
	padding-left:100px;
	padding:0\9;
}

div#header ul#navi li {
	margin:0 10px 0 15px;
	float:left;
	background:#fff;
	white-space:nowrap;
	width:auto;
}

div#header ul#navi li a {
	display:inline-block;
	width:25%;
	padding:0 0 0 20px;
	color:#666;
	text-shadow: 0 0 1px #666; 
}

div#header ul#navi li.current a {
	color:#000;
	text-shadow: 0 0 1px #000; 
}

div#header ul#navi li a:hover {
	color:#000;
}

ul {
	margin:0px;
	padding:0px;
}

img#XX {
	width:80px;
	height:auto;
	float:right;
	margin-top:20px;
	display:block;
}

/*
ul#lang {
	width:98%;
	margin:0 auto;
	padding:20% 10px;
	background:#fff;
}

ul#lang li {
	text-align:center;
	margin:5%;
}

ul#lang li img {
	width:50%;
}
*/

/* ========================= HEADER END ========================= */ 





/* ========================= MAIN ========================= */ 
.contents {
	width:80%;
	max-width:985px;
}

#h_img {
	background:#f4f4f4;
	text-align:center;
	margin:0 auto;
}

#h_img img {
	width:100%;
	margin:0 auto;
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:11;
}

#h_img img:first-child {
	z-index:12;
}

p.top_text {
	padding-top:10px;
	font-size:180%;;
	line-height:140%;
}

#main {
	margin:0;
	padding-top:10px;
}

#video,#h_img {
	position:relative;
	width:120%;
	height:0;
	margin:0 0 0 -10%;
	z-index:0;
}

#video {
	padding-bottom:67.5%;
}

#video iframe {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:0;
}

h1 {
	margin:30px 0;
}


#top h1 {
	margin-top:50px;
	font-size:420%;
	line-height:100%;
}

h2 {
	margin:20px 0;
	width:100%;
	line-height:100%;
}

h3, h4 {
	line-height:100%;
	margin-bottom:10px;
}

#lineup {
	padding-top:20px;
	clear:both;
}

#lineup ul {
	width:100%;
	margin:10px 0;
	padding:0px;
	margin-left:-2%;
}

#lineup ul li img {
	border:2px solid #ddd;
}

#lineup ul li img.logo {
	border:none;
	width:130px;
	height:auto;
	float:left;
	margin:5px 20px 10px 0;
}

#lineup ul li {
	float:left;
	width:30%;
	padding:0;
	margin-bottom:30px;
	margin-left:3%;
	line-height:150%;
}

#lineup ul li a:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
}

#lineup ul li.current img {
	opacity:0.6;
	filter:alpha(opacity=60);
}

#lineup span.p_name {
	display:inline-block;
	margin-top:10px;
	font-size:170%;
	color:#000;
}

#lineup span.p_code {
	display:inline-block;
	margin-top:5px;
	font-size:130%;
}

div.info_block {
	clear:both;
}

.img_box img {
	width:auto!important;
}

div.info_block h2 {
	font-size:250%;
	font-weight:normal;
}

div.info_block h3 {
	font-size:200%;
}

div.info_block h2, h3, h4 {
	font-weight:normal;
}

div.features {
	margin-top:30px;
	margin-bottom:0;
	position:relative;
	min-height:700px;
}
div.features .text ul.ft {
	margin-top:30px;
}
div.features .text ul.ft li {
	margin-bottom:20px;
	padding-left:20px;
	background:url(../img/feature/dot.gif) no-repeat 0 50%;
	line-height:130%;
}

.pager p {
	margin-bottom:0!important;
	font-weight:bold;
	clear:both;
}

div.features ul.color {
	clear:both;
	height:80px;
	overflow:hidden;
}

div.features ul.color li {
	width:60px;
	height:60px;
	float:left;
	margin-right:20px;
}

div.features ul.color li img {
	height:auto;
}

div.features > div.images {
	width:60%;
	float:left;
	max-width:560px;
	position:absolute;
	left:-20px;
	bottom:0;
	z-index:10;
}

.clear {
	clear:both;
}

.bx-pager {
	margin-left:-5px;
	margin-bottom:20px;
}
.pager {
	min-height:250px;
}

.bx-pager a {
	display:block;
	float:left;
	width:60px;
	height:60px;
	border:1px solid #ccc;
	margin-left:5px;
	margin-bottom:5px;
	text-align:center;
	/*background:#efefef;*/
	background:#fff;
}

.bx-pager a.active {
	/*background:#fff;*/
	border:1px solid #6748b4;
}

.bx-pager a:hover {
	background:#fff;
}

.bx-pager a img {
	width:40px;
	height:40px;
	padding:5px;
	margin-top:5px;
	/*background:#d8d8e3;*/
}

div.features > div.text {
	width:45%;
	float:right;
	max-width:400px;
	position:relative;
	z-index:200;
}

div.text p {
	margin:10px 0;
}

div.features2, div.spec {
	margin-top:0;
	padding:30px 0;
	background:#f5f5f6;
}

div.features2 > div.images {
	float:right;
	/*margin-right:5%;*/
	padding-top:20px;
	width:45%;
	text-align:right;
	max-width:310px;
}

div.features2 > div.images img {
	width:100%;
	height:auto;
}

div.features2 > div.text {
	width:53%;
	max-width:650px;
	float:left;
}

div.features3 img {
	width:auto!important;
	border:1px solid #ccc;
}

div.f_box, div.f_box2 {
	width:47%;
	padding-top:20px;
}
div.f_box {
	float:left;
	margin-right:1%;
}
div.f_box2 {
	float:right;
	margin-left:1%;
}
div.f_box img {
	float:left;
	margin-right:10px;
}
div.f_box2 img {
	float:right;
	margin-left:10px;
}

div.spec {
	margin-top:50px;
	padding-top:30px;
}

/*
div.spec h3, div.spec p, div.spec ul,
div.spec table, div.spec p {
	margin-left:5%;
	width:95%;
}
*/

div.spec li {
	margin-left:1%;
	line-height:110%;	
}

div.spec h3 {
	font-size:150%;
}

div.spec table {
	border:none;
	margin-bottom:5%;
}

div.spec th, div.spec td {
	text-align:left;
	padding:1% 1% 1% 0;
	vertical-align:top;
	margin:0;
}

div.spec th {
	width:15%;
}

div.spec td {
	width:15%;
}

.note {
	font-size:70%;
}

p.note {
	text-indent:-1em;
	padding-left:1em;
	line-height:110%;
}

ul.note li {
	list-style-type:disc;
	width:90%;
}

div.info_block p, .top_text {
	text-align:left;
}

#sw span {
	display:block;
	font-size:200%;
	color:#eee;
	text-shadow: 1px 1px 3px #000;
	cursor:pointer;
	min-height:50px;
	min-width:50px;
	z-index:20;
	position:absolute;
}

.pagetop {
	text-align:right;
	clear:both;
}

/* ========================= MAIN END ========================= */ 





/* ========================= FOOTER ========================= */ 

div#footer {
	margin:30px 0;
	padding-top:10px;
	clear:both;
}

#top div#footer {
	border-top:2px solid #eee;
}

div#footer p {
	margin-top:10px;
	text-align:center;
	color:#999;
}
div#footer p img {
	width:25%;
}

/* ========================= FOOTER END ========================= */ 



/* ========================= Media queries ========================= */ 
@media only screen and (max-width: 1024px){
	div#header {
		width:95%;
	}
	
	img.logo {
		margin-bottom:0!important;
	}

}

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

body {
	-webkit-text-size-adjust: 100%;
	font-size:14px!important;
	line-height:130%;
}

.container {
	min-width:320px;
}

div.info_block div, div.info_block p, div.info_block ul {
	width:100%!important;
	clear:both!important;
	float:none!important;
	max-width:100%!important;
}

div.info_block p {
	text-align:left;
}
div.contents {
	position:relative;
	z-index:10;
}

#video {
	margin-left:0;
	padding-bottom:56.5%;
}


	div#header, .contents, #footer p {
		width:95%;
		max-width:95%;
		min-width:95%;
		padding:0;
	}

	div#header {
		height:60px;
		z-index:3000;
	}
	
	div#header a#logo {
		width:70px;
		top:15px;
		left:5px;
	}
	div#header ul#navi {
	top:50px;
	right:40px;
	margin:0;
	z-index:3050;
	display:none;
	padding:0;
	height:auto;
	}

	div#header ul#navi li {
		margin:0;
		float:none;
		clear:both;
	}
	
	div#header ul#navi li a {
		display:block;
		min-width:200px;
		width:200px;
		height:60px;
		line-height:60px;
		border-bottom:1px solid #aaa;
		text-align:center;
		background:#fff;
		padding:0;
	}

	div#header ul#navi li.current {
		border-bottom:3px solid #000;
	}
	
	div#navi_btn {
		display:block;
		position:absolute;
		top:12px;
		right:60px;
		height:50px;
		width:50px;
		font-size:70px !important;
		font-weight:bold;
		line-height:20% !important;
		cursor:pointer;
		z-index:3021;
		line-height:10%!important;
	}
	img#XX {
		width:60px;
		margin-top:15px;
	}
	
	#main {
		width:100%;
		padding:0;
	}

	p.top_text {
		clear:both;
		width:100%;
	}
	
	div.info_block p.top_text {
		width:95%!important;
	}
	
	#h_img, #video {
		margin:0px;
		width:100%;
	}
	
	#video iframe {
		width:100%;
		height:100%;
		top:0;
		left:0px;
		position:aboslute;
	}

	#video, #video video, #video embed, #video object, #video iframe {
		z-index:10;
	}
	#lineup {
		min-width:320px;	
	}
	#lineup ul li, #lineup ul {
		width:100%;
		float:none;
		clear:both;
	}
	#lineup ul li span.p_name, span.p_code {
		width:60%;
	}
	#lineup li img {
		width:30%;
		float:left;
		margin:0 10px 10px 0; 
	}
	#lineup ul li img.logo {
		width:100px;
		height:auto;
		float:none!important;
		clear:both!important;
		vertical-align:top;
	}
	#lineup li span.p_name {
		margin-top:7%;
	}

	div.features {
		min-height:auto;
	}
	
	div.features div.images {
		position:static;
		margin-top:20px;
	}
	
	div.images, div.text {
		margin:0;
		padding:0;
	}
	
	div.features2 div.text, div.features2 div.images,
	div.spec table, div.spec > * {
		width:95%!important;
		margin-left:5%;
	} 

	div.features2 > div.images {
		float:left;
		max-width:310px!important;
		width:90%!important;
	}
	
	div.info_block.spec p {
		width:90%!important;
	}
	#sw span {
		font-size:200%;
	}
	
	div.f_box, div.f_box2 {
		margin-right:0;
		margin-left:0;
	}


}