body {
	margin: 0;
	background: top left repeat-x url(images/bg.jpg);
	font-size: small;
}
a { color: #999; text-decoration: none; }
a:hover { color: #ff6600; }
img { border: 0; vertical-align: top; }

.detail { line-height: 20px; }


.style2 {
	font-family: "MS Sans Serif";
	font-size: small;
}
.style6 {color: #FF6600;}
.style8 {font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.style9 {	color: #666666 }
.style10 {font-family: Tahoma}
.style13 {font-weight: bold; color: #FF6600;}


/*------------------------------ home ------------------------------*/

.head {
	width: 100%;
	max-width: 1004px;
	margin: 0 auto;
	position: relative;
}
.head a { position: absolute; }
.head a:hover {
	border: solid 1px #000;
	background: #fff;
	-moz-opacity: 0.5; opacity:.50; filter: alpha(opacity=50);
}
.head .logo {
	z-index: 1;
	position: absolute;
	left: 30px;
	top: 0px;
}

.box1 { 
	display: inline-block;
	text-align: center;
	vertical-align: top;
	background: right center no-repeat url(images/1_02_03.jpg);
	padding-right: 5px;
	margin-bottom: 20px;
	font-size: small;
	1border: solid 1px red;
	1min-height: 170px;
}
h4 {
	font-family: 'Mitr', sans-serif;
	font-size: x-large;
	font-weight: normal;
	margin: 0;
	text-align: left;
}
h4 span { color: orange; }
.w1 { width: 25%; padding: 0 22px 0 0; text-align: left; }
.w2 { width: 35%; padding-right: 10px; line-height: 170px; }
.w3 { width: 25%; background: none; padding: 0; }
.w2 h4, .w3 h4 { padding-left: 20px; }

.w2 img {
	max-width: 90%; 
	border: solid 1px #999;
	vertical-align: middle;
	-webkit-box-shadow: 1px 1px 5px 1px #999;
	-moz-box-shadow: 1px 1px 5px 1px #999;
	box-shadow: 1px 1px 5px 1px #999;
}
.w3 img { max-width: 100%; }
.content {
	margin: 0 auto;
	max-width: 1004px;
	text-align: center;
}

@media screen and (max-width: 770px) {
	body { background: none; }
	.content { padding-top: 50px; }
	.w1 { width: 30%; padding: 0 22px 0 0; text-align: left; }
	.w2 { width: 30%; padding-right: 10px; }
	.w3 { width: 30%; background: none; padding: 0; }
}
@media screen and (max-width: 600px) {
	.box1 { display: block; margin-bottom: 20px; }
	.w1, .w2, .w3 { width: auto; background: none; }
	.w1 { padding: 5px 20px; }
	.w2 { padding-right: 0; }
}

.footer {
	font-size: small;
	color: #999;
	border-top: solid 1px #ccc;
	margin: 5px 20px 0;
	padding: 10px 0 20px 0;
	max-width: 904px;
}
/*-------------------------- end home ---------------------------*/


/*------------------------------ Main ------------------------------*/
.main {
	width: 100%;
	max-width: 965px;
	margin: 0px auto;
	overflow: auto;
}
.main .left{
	width: 190px;
	float: left;
	1display: inline-block;
	margin-right: -215px;
	text-align: center;
	1border: solid 1px red;
	padding: 20px 10px;
}

.main .right{
	float: right;
	min-width: 74%;
	margin-left: 210px;
	margin-bottom: 50px;
	1line-height: 20px;
	1border: solid 1px red;
	padding: 20px;
}
.main img { max-width: 100%; }
.main h1 { margin: 20px 0 30px 0; }
.1main .frame1 { margin: 0 auto; max-width: 268px; }

.left h3 {
	font-family: 'Mitr', sans-serif;
	font-size: x-large;
	font-weight: normal;
	text-align: left;
	padding: 0px;
	1border: solid 1px #999;
	margin: 0;
}
@media screen and (max-width: 900px) {
	.main .right { min-width: auto; width: 70%; }
}
@media screen and (max-width: 770px) {
	.main { padding-top: 70px; }
	.main .right { width: auto; margin: 0; float: none; }
	.main .left { width: auto; margin: 0; float: none; padding: 0 20px; }
	.main img { max-width: 100%; }
	.left h3 { margin: 0 0 5px; }
}

.title { 
	1border: solid 1px red;
	border-bottom: solid 5px #999;
	padding-bottom: 5px;
	margin-bottom: 20px;
}
.title h2 {
	border-left: solid 7px orange;
	padding-left: 6px;
	margin: 0px 0 2px;

	font-family: 'Mitr', sans-serif;
	font-size: 22px;
	font-weight: normal;
}
.pagenav { 
	display: block; 
	text-align: right; 
	font-size: x-small;
	1border: solid 1px red;
	padding: 10px 20px;
}

@media screen and (max-width: 600px) {
	.videoWrapper { width: 100%; height: 300px; }
	.title h2 { font-size: 20px; }
}
@media screen and (max-width: 400px) {
	.videoWrapper { height: 200px; }
}


/*------------------------------ Contact  ------------------------------*/
.contact { overflow: auto; position: relative; }
.contact .left1 {
	width: 260px;
	display: inline-block;
	margin-right: -270px;
	text-align: center;
	vertical-align: top;
}
.contact .right1 {
	display: inline-block;
	margin-left: 265px;
	vertical-align: top;
	1margin-bottom: 50px;
	padding: 0 20px;
	line-height: 20px;
}

@media screen and (max-width: 600px) {
	.contact .right1 { width: auto; margin: 0; padding: 0; display: block; }
	.contact .left1 { width: auto; margin: 0; display: block; }
}

.form1 tr td:nth-child(1) { 
	font-weight: bold;
	color: #ff6600;
}
.form1 input[type="text"], .form1 textarea { 
	border: solid 1px grey; 
	width: 100%;
	max-width: 320px;
}
.form1 input[type="submit"] { padding: 5px 20px; }
.form1 b { display: inline-block; min-width: 150px; vertical-align: top; }

@media screen and (max-width: 600px) {
	.form1 b { min-width: 85px; }
}



/*------------------------------ Product  ------------------------------*/
.frame1 {
	display: block;
	margin: 5px auto;
	padding: 9px;
	position: relative;
	vertical-align: top;
	font: normal 13px/20px tahoma;

	-webkit-box-shadow: 0px 0px 5px 0px #bbb;
	-moz-box-shadow: 0px 0px 5px 0px #bbb;
	box-shadow: 0px 0px 5px 0px #bbb;
}
.frame1 img { max-width: 100%; }
.frame1 > div {
	border: solid 8px #F2E7E1;
}
.frame1 > div > div {
	border: solid 1px #E2DBC8;
	padding: 12px 15px;
	overflow-x: auto;
}
.frame1 > i {
	width: 32px; height: 32px; position: absolute;
	left: 0; top: 0;
	background: left top no-repeat url(images/corner_top.png);
}
.frame1 > u {
	width: 32px; height: 32px; position: absolute;
	right: 0; bottom: 0;
	background: left top no-repeat url(images/corner_bottom.png);
}
.frame1 h2 {
	font-family: 'Mitr', sans-serif;
	font-size: large;
	line-height: 20px;
}
.frame1 h3 {
	font-family: 'Mitr', sans-serif;
	font-size: large;
	font-weight: normal;
	margin: 0 0 10px 0;
	text-align: left;
	color: #000;
}
.frame1 h3 b {
	display: inline-block;
	width: 25px; height: 25px; line-height: 25px; text-align: center;
	margin: 0 8px 0 0;
	padding: 0;
	color: #fff;
	background: #DA7700;
	border-radius: 20px;
}
.frame1 a { color: #00137f; }
.frame1 a:hover { color: #ff6600; }

a:hover.frame1 {
	-webkit-box-shadow: 0px 0px 5px 0px #000;
	-moz-box-shadow: 0px 0px 5px 0px #000;
	box-shadow: 0px 0px 5px 0px #000;
}
a:hover.frame1 h3 { color: #ff6600; }

.product_pic { 
	width: 38%; 
	padding: 8px 0;
	float: left; 
	margin: 0 22px 0 0; 
	text-align: center;
1border: solid 1px red;
}
.product_pic img { 
	max-width: 100%; 

	-webkit-box-shadow: 0px 0px 5px 0px #000;
	-moz-box-shadow: 0px 0px 5px 0px #000;
	box-shadow: 3px 3px 10px 1px #999;
}

.size1 { width: 250px;  margin: 10px; display: inline-block; }	/* product cat */
.size2 { width: 55%; display: inline-block; }			/* product view */

.list1 { text-align: center; }		/* product list */
.list1 a {
	display: inline-block;
	width: 170px;
	text-align: center;
	margin: 20px 5px 5px 5px;
	vertical-align: top;

	1font-family: 'Mitr', sans-serif;
	font-size: 14px;
	color: #000;
	border: solid 1px #bbb;
	padding: 5px;
}
.list1 a:hover {
	border: solid 1px #ff6600;
	-webkit-box-shadow: 0px 0px 5px 0px #ff6600;
	-moz-box-shadow: 0px 0px 5px 0px #ff6600);
	box-shadow: 0px 0px 5px 0px #ff6600;
}
.list1 i {
	display: inline-block;
	width: 170px;
	height: 170px;
	overflow: hidden;
	line-height: 170px;
}
.list1 a img { 
	width: 100%; max-width: 250px; margin-bottom: 20px; 
	vertical-align: middle;
}

@media screen and (max-width: 820px) {
	.product_pic { width: 37%; }
}
.block { display: block; width: auto; float: none; } /* ต้องอยู่หลัง product_pic */

@media screen and (max-width: 770px) {
	.mobile-hide { display: none; }
}
@media screen and (max-width: 600px) {
	.frame1 { display: block; margin: 20px auto; }
	.frame1 ul { padding-left: 12px; }
	.frame1 > div > div { padding: 0 10px 10px; }
	.frame1 h3 { margin: 10px 0; }

	.list1 a { width: 90%; }
	.product_pic { width: auto; max-width: 100%; float: none; text-align: center; margin: auto; }
	.size2 { width: auto; display: block; }
}

.tags {
	padding: 0;
	text-align: left;
}
.tags a {
	font: normal 14px tahoma;
	margin: 7px 0;
	padding: 10px 10px;
	display: block;
	text-decoration: none;
	border: solid 1px #ccc;
	color: #333;
}
.tags a:hover ,
.tags a.active {
	background-color: #e96b56;
	border-color: #e96b56;
	color: #fff;
}
.framepic {
	-webkit-box-shadow: 0px 0px 5px 0px #000;
	-moz-box-shadow: 0px 0px 5px 0px #000;
	box-shadow: 3px 3px 10px 1px #999;
}