body
	{	margin:0; text-align:center}
#container
	{	margin:0 auto; text-align:left; width:1000px}
img
	{	border:0}
#main-container
	{	width:970px; float:left; background:#FFFFFF; font-family:"Microsoft JhengHei",Verdana}

#top
	{	height:77px}
#menu ul
	{	margin:0px 0 0 90px; padding:50px 0 0 0; list-style:none}
#menu ul li
	{	margin:0; padding:0 33px; font-size:14px; color:#525252; border-right:1px solid #c6c6c6; float:left}
#menu ul li a
	{	color:#525252; text-decoration:none}
#menu ul li a:hover
	{	color:#fe2b11; text-decoration:none}

#logo
	{	position:absolute; z-index:7; margin-left:407px}


/**/
div.topmenu01{ padding-left:861px;  position:absolute; z-index:7; top:-11px}
div.topmenu01 ul{ padding:0; margin:0; }
div.topmenu01 li{ float:left; padding:0 20px 0 0px; list-style:none;color:#666;}
div.topmenu01 li a{}
div.topmenu01 li a:hover{ text-decoration:none;}

div.topmenu01 li.line{background:url(../img/00_layout/headline.gif) right top no-repeat ; padding:20px 10px 0 20px;}
div.topmenu01 li.range{ padding:20px 0 0 0px;}
div.topmenu01 li.range ul{*position:relative!important; *width:80px!important; float:none;*left:0px; *top:0px;}
div.topmenu01 li.blue a{color:#666;}
div.topmenu01 li.blue a:hover{color:#0087EA;}


li.range:hover #language_item{display: block;}
#language_item {display: none;position: absolute;z-index: 7;padding-bottom: 17px; }
#language_item li{margin: 0px 0px 0px 0px;padding: 0px; list-style:none;display: block; border-bottom:1px solid #d41700 }
#language_item li a{font-size: 11px;letter-spacing: 0px;color:#fff;background-color: #fe1d01;text-align: center;display: block;height: 19px;width: 98px;padding: 5px 0 0px 0;filter:zoom:1;background-image: none; }
#language_item li a:hover{zoom:1;color:#fff;display: block;}

.langfont a{ color:#fff;}
.langfont a:hover{ color:#fff;}
.langfont{color:#fff;}

/**/

.index-hot
	{	margin-left:10px; background:url(images/hot-bg.jpg) no-repeat; width:280px; height:230px; font-size:12px; line-height:16px; color:#393939; float:left}
.index-hot b
	{	font-size:18px; font-weight:bold; color:#010101; display:block; padding-bottom:7px}
.index-hot-container
	{	margin:0 0 0 24px; width:235px; padding-top:139px}

.more
	{	padding:10px 0}

.index-choice
	{	margin-left:17px; background:url(images/choice-bg.jpg) no-repeat; width:355px; height:230px; font-size:12px; line-height:16px; color:#393939; float:left}
.index-choice-container
	{	margin:0 0 0 163px; width:170px; padding-top:109px}

.index-video
	{	margin-left:17px; background:url(images/video-bg.jpg) no-repeat; width:280px; height:230px; float:left}
.index-video-container
	{	margin:0 0 0 6px; padding-top:6px}



#footer
	{	clear:both; background:url(images/footer-bg.gif) no-repeat top; padding-top:32px; font-size:11px; color:#525252}
#footer a
	{	color:#525252; text-decoration:none}
#footer a:hover
	{	color:#fe2b11; text-decoration:none}
#copyright
	{	font:11px Arial, Helvetica, sans-serif; color:#fe2b11; line-height:16px; float:left; color:#626262; padding-left:10px}
#copyright a
	{	color:#626262; text-decoration:none}
#copyright a:hover
	{	color:#626262; text-decoration:underline}

.footer-menu
	{	float:right; padding-right:10px; clear: left;}

#banner-title, .banner-top
	{	position:absolute; z-index:101}

.footer_info{width: 45%; float: left;}
.qr{width: 10%; float: left;}

.qr img{}


#left
	{	float:left; width:214px}



#right
	{	float:left; width:756px}

#submenu ul
	{	margin:10px 0 0 27px; width:187px; padding:0; list-style:none}
#submenu ul li
	{	padding:9px 0; margin:0; font:13px Arial, Helvetica, sans-serif; color:#000000; border-bottom:1px dotted #e8e8e8}	
#submenu ul li a
	{	color:#000000; text-decoration:none; display:block; padding-left:16px;}
#submenu ul li a:hover, #submenu ul li a.now
	{	color:#fe2b01; text-decoration:none; background:url(images/submenu-icon.gif) no-repeat 0% 6px}


h1
	{	margin:36px 0 0 33px; padding:0; list-style:none; font-size:18px; color:#474747}
h2
	{	text-align:right; padding:5px 25px 0 0; font-size:12px; color:#525252; margin:0; font-weight:normal}
h2 a
	{	color:#525252; text-decoration:none}
h2 a:hover
	{	color:#000000; text-decoration:underline}

#main
	{	margin-left:40px; width:690px; padding-top:10px; font-size:13px; line-height:20px}

h4
	{	background:url(images/h4bg.gif) no-repeat bottom; width:662px; padding:0 0 8px 0; margin:10px 0 0 0; font-size:16px; color:#fe4901; font-weight:normal; clear:both}
.content01
	{	margin:13px 0 0 17px; width:625px}
ul.list01
	{	margin:0; padding:0; list-style:none}
ul.list01 li
	{	margin:0; background:url(images/list-icon.gif) no-repeat 0% 7px; padding:0 20px 12px 10px; float:left; color:#393939; font-size:13px}

ul.list02
	{	margin:0; padding:0; list-style:none}
ul.list02 li
	{	margin:0; background:url(images/list-icon.gif) no-repeat 0% 7px; padding:0 10px 12px 10px; float:left; color:#393939; font-size:13px; width:180px}
ul.list02-2
	{	margin:0; padding:0; list-style:none}
ul.list02-2 li
	{	margin:0; background:url(images/list-icon.gif) no-repeat 0% 7px; padding:0 10px 12px 10px; float:left; color:#393939; font-size:13px; width:180px; height:35px}

ul.list03
	{	margin:0; padding:0; list-style:none}
ul.list03 li
	{	margin:0; background:url(images/list-icon.gif) no-repeat 0% 7px; padding:0 10px 12px 10px; color:#393939; font-size:13px; }

ul.list04
	{	margin:0 0 0 20px; padding:0; list-style-image:url(images/li-img.gif)}
ul.list04 li
	{	margin:0; padding:3px 0; border-bottom:1px dotted #dfdfdf}


#product-table
	{	border:1px solid #e6e6e6; width:100%; margin:2px 0; background:#e6e6e6}
#product-table td
	{	background:url(images/data-bg.gif) no-repeat top left #f8f8f8; font:12px Verdana, Arial, Helvetica, sans-serif; color:#666666}
#product-table td.color01
	{	background-image:none; background-color:#FFFFFF}
#product-table td.color02
	{	background-image:none; background-color:#f4f7fb; color:#5b81c2}
#product-table td ul li
	{	border-bottom:0px dotted #dfdfdf}
.title01
	{	color:#555555; text-align:center; font-weight:bold; font-size:13px}	
	


.tdcolor-main04 {
	background-color: #f1f1f1;
	font-size: 9pt;
	font-family:"Arial";
	color: #8b8b8b;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #bfbfbf;
	border-bottom-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
.tdcolor-main05 {
	background-color: #FFFFFF;
	font-size: 9pt;
	font-family:"Arial";
	color: #767B76;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #bfbfbf;
	border-bottom-color: #e8e8e8;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.tdcolor-04 {
	font-size: 9pt;
	font-family:"Arial";
	background-color: #f1f1f1;
	color: #8b8b8b;
	border-bottom-color: #e8e8e8;
	border-bottom-style: solid;
	border-bottom-width: 1px;
} 
.tdcolor-05 {
	font-size: 9pt;
	font-family:sans-serif, Arial, Dotum, Helvetica, geneva,;
	background-color: #FFFFFF;
	color: #666666;
	border-bottom-color: #e8e8e8;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

/* ============================== */
img {
	max-width: 100%;
}
.left {
	float: left;
}
.right {
	float: right;
}
.banner {
	height: 374px;
	margin: auto;
	width: 970px;
}
#logo {
	margin: auto;
	position: static;
	width: 157px;
}
#menu ul {
	margin-left: 9%;
	margin-top: -3%;
	padding-top: 0px;
}
#menu li:nth-child(even) {
	border-width: 0px;
}
#menu li:nth-child(3) {
	padding-left: 34%;
}

@media screen and (max-width:1000px) {
	* {
		box-sizing: border-box;
	}
	#container {
		width: 100%;
	}
}

@media screen and (max-width:984px) {
	#main-container {
		float: none;
		width: 100%;
	}
	.line {
		display: none;
	}
}

@media screen and (max-width:960px) {
	.banner {
		height: auto;
		width: 100%;
	}
	div.topmenu01 {
		padding-left: 0px;
		right: 10px;
	}
	#language_item li a {
		padding-top: 0px;
	}
	#menu ul {
	  margin-left: 7%;
	}
}

@media screen and (max-width:800px) {
	#menu {
		box-sizing: border-box;
		display: none;
	}
	.index-video {
		margin-left: 10px;
		margin-top: 10px;
	}
	.topmenu01 {
		display: none;
	}
}
@media screen and (max-width:640px) {
	#menu {
		display: none;
	}
	.index-choice {
		margin-left: 10px;
		margin-top: 10px;
	}
	.index-hot, .index-choice, .index-video {
		float: none;
		margin: 5px auto;
	}
	.footer-menu {
		margin: 10px auto;
	}
}

@media screen and (max-width:375px) {
	.index-choice {
		background-position: 50% 50%;
		background-size: 100% auto;
		height: 20%;
		width: 92%;
	}
	.index-choice-container {
		margin: 0px 0 0 46%;
		padding-top: 32%;
		width: 50%;
	}
}


@media screen and (max-width:320px) {
	.index-choice {
		background-position: 50% 50%;
		background-size: 100% auto;
		height: 20%;
		width: 88%;
	}
	.index-choice-container {
		margin: 0px 0 0 38%;
		padding-top: 30%;
		width: 60%;
	}
}


/* =========== company =========== */
.main-pro {
	float: left;
	margin-right: 20px;
	width: 45%;
}
@media screen and (max-width: 960px) {
	#left {
		width: 24%;
	}
	#right {
		width: 76%;
	}
	#main {
		width: 90%;
	}
	h4 {
		width: 100%;
	}
}
@media screen and (max-width: 800px) {
	#left, .banner-top {
		display: none;
	}
	#banner-title {
		margin-left: -20%;
		margin-top: -2%;
		width: 100%;
	}
	#right {
		width: 100%;
	}
}

@media screen and (max-width: 756px) {
	#main {
		margin-left: 0px;
		padding: 20px;
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	/**, h2, h4 {
		font-size: 1rem;
		line-height:1.3rem;
	}*/
	h1{
		
		margin-left: 20px;
	}
	.main-pro {
		float: none;
		width: 100%;
	}
}
/* ============ product ================= */
.slideshow img {
	margin: 0px 5px;
}
.video {
	float: left;
	margin: 0px 20px 20px 0px;
	width: 320px;
}
.video iframe {
	height: 178px;
	width: 320px;
}

@media screen and (max-width: 960px) {
	.video {
		width: 280px;
	}
	.video iframe {
		height: 156px;
		width: 280px;
	}
}

@media screen and (max-width: 800px) {
	.video {
		width: 320px;
	}
	.video iframe {
		height: 178px;
		width: 320px;
	}
}

@media screen and (max-width: 640px) {
	.content01 {
		width: 100%;
	}
	.video {
		width: 280px;
	}
	.video iframe {
		height: 156px;
		width: 280px;
	}
}

@media screen and (max-width: 540px) {
	.video {
		float: none;
		margin: 0px auto 20px;
		width: 320px;
	}
	.video iframe {
		height: 178px;
		width: 320px;
	}
}

@media screen and (max-width: 320px) {
	.video {
		width: 100%;
	}
	.video iframe {
		height: auto;
		width: 100%;
	}
}


/* ============ content ================= */
@media screen and (max-width: 540px) {
	input, textarea {
		width: 98%;
	}
	.btn {
		width: 30%;
	}
}
@media screen and (max-width: 480px) {
	.code span {
		display: block;
		font-size: .8em;
	}
}
@media screen and (max-width: 375px) {
	.btn {
		width: 45%;
	}
}
/* =============== fooer ========== */
#footer {
	padding-bottom: 20px;
}
#copyright {
	float: none;
}
.add {
	padding-left: 10px;
}
@media screen and (max-width: 800px) {
	.footer-menu {
		display: none;
	}
}
@media screen and (max-width: 640px) {
	#footer span {
		display: block;
	}