html,body{margin:0px;padding:0px;}
body{background: url('images/a1.jpg')  repeat center fixed;
	 -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
	 margin: 0 auto;
	 font: 76% arial,sans-serif;
	 
}

p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-image: url('images/hd_ok.png'); background-size: 1020px 350px;}
div#header h1{height:350px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background: url('images/ri.png') repeat-x;/*background:#CCC8B3;*/}
div#footer{height:45px; background:#00BB00; border:2px; color:#000000; border-radius:10px 10px 0px 0px;}																					
div#footer p{margin:0;padding:5px 10px;}
div#container{background-color:#FFF;width:1020px;margin:0 auto}
div#content_home{float:right;width:640px;height:1300px;}
div#content_head{float:right;width:630px;height:1050px;}
div#content_sft{float:right;width:630px;height:1200px;}
div#content_product{float:right;width:630px;height:1280px;}
div#content_hand{float:right;width:630px;height:1250px;}
div#content_abouts{float:right;width:700px;height:700px;}
div#content{float:right;width:700px;height:2700px;}
div#navigation{float:left;width:200px}
div#extra{clear:both;width:100%}

#nav {background-color: #00BB00;
	width: 980px;
	height: 45px;
	border-bottom:2px solid #ff0080;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:0px 0px 10px 10px;
	line: 1px;
	margin-top: 0px;
	list-style: none;
	float: left;
	z-index: 20;
	}

#nav li {
	float: left;
	}
	
#nav a:link, #nav a:visited {
	float: left;
	line-height: 50px;
	height: 45px;
	display: block;
	padding: 0 22px 0 22px;
	color: #FFF;
	text-decoration: none;
	}

#nav a:hover, #nav a:active {
	color: #FFFF00;
	background-color: #006600;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:0px 0px 10px 10px;
	}

#banner {
position: absolute;
z-index: 10;
}

#img {
position: absolute;
z-index: 1;
}

#sidecontainer_bn {
margin:0; padding:0; float:right; width:18%;
}

#sidecontainer {
margin:0; padding:0; float:left; width:18%; text-align:left;
}

#sidecontainer h2 {
display:block; 
width: 178px;
height: 22px; 
margin:0; padding:0.2em; color:#ffff80; font-weight:normal;
 font-family:"trebuchet ms", "lucida sans", arial, sans-serif; font-size:120%;
 -webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px 10px 0px 0px;
}

.nav {
margin:0 0 1.5em 0; padding:0; list-style-type:none; background-color:#00BB00;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:0px 0px 10px 10px;
}

.nav li {
margin:0; padding:0; display:block; border-bottom:1px solid #294D69;
}

.nav a:link, .nav a:visited {
display:block; margin:0; text-decoration:none; color:#fff; margin:0; padding:0.5em;}

.nav a:hover {
display:block; margin:0; text-decoration:none; color:#FFFF00; margin:0; padding:0.5em; background-color:#006600;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px 0px 10px 10px;}

.nav a:active {
display:block; margin:0; text-decoration:none; color:#006600; margin:0; padding:0.5em;}


#featured { 
	width: 100px;
	height: 100px;
	overflow: hidden; 
	line-height:1.4;
	}
#featured>img,  
#featured>div,
#featured>a { display: none; }

div.orbit-wrapper {
    width: 1px;
    height: 1px;
    position: relative; }

div.orbit {
    width: 1px;
    height: 1px;
    position: relative;
    overflow: hidden }

div.orbit>img {
    position: absolute;
    top: 0;
    left: 0;
    display: none; }

div.orbit>a {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 0; 
    display: none; }

.orbit>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    height: 10%; }

/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */


/* TIMER
   ================================================== */

div.timer {
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: .6;
    cursor: pointer;
    z-index: 1001; }

span.rotator {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: -20px;
    background: url(orbit/rotator-black.png) no-repeat;
    z-index: 3; }

span.mask {
    display: block;
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    overflow: hidden; }

span.rotator.move {
    left: 0 }

span.mask.move {
    width: 40px;
    left: 0;
    background: url(orbit/timer-black.png) repeat 0 0; }

span.pause {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(orbit/pause-black.png) no-repeat;
    z-index: 4;
    opacity: 0; }

span.pause.active {
    background: url(orbit/pause-black.png) no-repeat 0 -40px }

div.timer:hover span.pause,
span.pause.active {
    opacity: 1 }


/* CAPTIONS
   ================================================== */

.orbit-caption {
    display: none;
    font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }

.orbit-wrapper .orbit-caption {
    background: #000;
    background: rgba(0,0,0,.6);
    z-index: 1000;
    color: #fff;
	text-align: center;
	padding: 7px 0;
    font-size: 13px;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%; }


/* DIRECTIONAL NAV
   ================================================== */

div.slider-nav {
    display: block }

div.slider-nav span {
    width: 78px;
    height: 100px;
    text-indent: -9999px;
    position: absolute;
    z-index: 1000;
    top: 50%;
    margin-top: -50px;
    cursor: pointer; }

div.slider-nav span.right {
    background: url(orbit/right-arrow.png);
    right: 0; }

div.slider-nav span.left {
    background: url(orbit/left-arrow.png);
    left: 0; }

/* BULLET NAV
   ================================================== */

.orbit-bullets {
    position: absolute;
    z-index: 1000;
    list-style: none;
    bottom: -40px;
    left: 50%;
	margin-left: -50px;
    padding: 0; }

.orbit-bullets li {
    float: left;
    margin-left: 5px;
    cursor: pointer;
    color: #999;
    text-indent: -9999px;
    background: url(orbit/bullets.jpg) no-repeat 4px 0;
    width: 13px;
    height: 12px;
    overflow: hidden; }

.orbit-bullets li.active {
    color: #222;
    background-position: -8px 0; }
    
.orbit-bullets li.has-thumb {
    background: none;
    width: 100px;
    height: 75px; }

.orbit-bullets li.active.has-thumb {
    background-position: 0 0;
    border-top: 2px solid #000; }

.zzz img
{
position:absolute;
z-index:2;
}

.iTable{  
    display:table; /* กำหนดให้แสดงเหมือนแท็ก table */  
    width:620px;  
    border:1px solid #ff0080; 
	float:left;
    border-collapse:collapse;	
}  
.iCaption{  
    display:table-caption; /* กำหนดให้แสดงเหมือนแท็ก caption */  
    caption-side:top;  
    text-align:center;  
}  
.iRow{  
    display:table-row; /* กำหนดให้แสดงเหมือนแท็ก tr */  
}  
.iTd{  
    display:table-cell; /* กำหนดให้แสดงเหมือนแท็ก td หรือ th */  
    height: 150px;
	width:200px;
	border:1px solid #ff0080;  
    text-align:center;  
}
.iTable_r{  
    display:table; /* กำหนดให้แสดงเหมือนแท็ก table */  
    width:75px;  
    margin:auto;  
	float:right;
}  
.iTd_r{  
    /*display:table-cell;*//* กำหนดให้แสดงเหมือนแท็ก td หรือ th */
	display: block;	
    text-align:center;  
}



img{border:none;}
	pre{
		display:block;
		font:12px "Courier New", Courier, monospace;
		padding:10px;
		border:1px solid #bae2f0;
		background:#e3f4f9;	
		margin:.5em 0;
		width:674px;
		}	
			
    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
			
	#container_p{	
		margin:0 auto;
		position:relative;
		text-align:left;
		width:630px;		
		background:#fff;		
		margin-bottom:none;
		}	
	#header_p{
		height:80px;
		line-height:80px;
		background:#5DC9E1;
		color:#fff;
		}				
	#content_p{
		position:relative;
		}			

#content_p{
		position:relative;
		}
/* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:630px;
		height:180px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:15px;
		height:30px;
		position:absolute;
		left:0px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:615px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:15px;
		height:30px;
		background:url(images/prv.png) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(images/next.png) no-repeat 0 0;	
		}	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */