html, body {
    background: #242424 ;
    color: #999999;
    margin:0; padding:0;
    font-family: 'Kanit', Helvetica, Arial, sans-serif; font-size:15px; line-height: 180%; } 

@font-face {
    font-family: 'rsu';
    src: url('../fonts/rsu_regular-webfont.eot');
    src: url('../fonts/rsu_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rsu_regular-webfont.woff') format('woff'),
         url('../fonts/rsu_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; }

/*==========  LAY OUT ===========*/
#box-Full, #top-Full, #content-Full, #slideshow-Full, #slideshow, #contact-map, #footer-Full { width: 100%; margin: 0 auto; }
 /*
#box-Full  {background: url(../images/bg.jpg) center top repeat-x, url(../images/bg2.jpg) center top repeat-x ; }
#footer-Full  {background: url(../images/bg.jpg) center top repeat-x, url(../images/bg2.jpg) center top repeat-x ; }
*/ 

#box-All, #top, #slideshow, #footer { width: 80%; margin: 0 auto; }

#top-Full  { top:0;  z-index: 100; }

#mainnav-Full { background: rgba(98,209,229,0.8); width: 80%; padding: 0 10%;  }

#top-L { float: left; width: 60%;}
#top-R { float: right; width: 40% ; text-align: right; }
#top03 { float: right; width: 5% ; }

#content {   }
#content #col01, #content #col03 { float: left; width: 19% ;}
#content #col02 { float: left; width: 58% ; margin: 0 2%;  }

#block1, #block2, #block3 {}

#footer-Full { border-top:1px solid rgba(0,0,0,0.2); background: #ed1c24; color: #FFF;  padding: 5px 0; margin: 0; /* position: absolute; bottom: 0; */}
#footer-Full p {  padding: 0; margin: 0; }
#footer-L { float: left; width: 20% ;}
#footer-R { float: right; width: 75% ;}
 
#back { text-align: right; margin: 20px 0;} 
#breadcrumb { text-align: right; }

.h20 { height:20px}
.clr { clear:both; }
 
/*==========  JOOMLA  ==========*/
#content .blog img { max-width: 100%; }
#content .blog, .item-page { width: 100%; margin: 0 auto; padding: 0; overflow: hidden;  }
div[itemprop="articleBody"] { width: 80%; padding: 5% 10%; }
#about div[itemprop="articleBody"] { width: 100%; padding: 5% 0%;  } 
.page-header {  background: url(../images/bg-header.png) center center no-repeat; width:80%; padding: 1% 10%; font-size: 30px; border-bottom: 1px dotted #bbb; border-top: 1px dotted #bbb; color: #444; }


ul.pagenav { display: none; list-style: none; margin: 20px 0; padding: 0;  }
ul.pagenav li { background: #242424; border: 1px solid #6f6f6f; color: #676767;
  padding: 0 15px 0 15px;
  height: 33px; line-height: 33px; text-align: center; }
ul.pagenav li:hover {  border: 1px solid #FFF; }
ul.pagenav li.previous { float: left; }
ul.pagenav li.next { float: right; }
ul.pagenav li a { font-weight: 600; color: #666; }
ul.pagenav li a:hover { font-weight: 600; color: #FFF;  }



/*========== TEXT & TAG =======*/
h1, h2, h3 { font-family: 'rsu';}

h1 { font-size: 160%; font-weight: lighter; line-height: 120%;}
h2 { font-size: 140%; font-weight: lighter; line-height: 120%;}
h3 { font-size: 120%;}
h4, h5, h6 { font-size: 100%;}
hr  { height:1px; }
a, a:hover { text-decoration: none; color:#3a3a3a;}

ul { padding: 0; margin: 0; }
ul:after { clear: both; display: table; content: '';  }
ul li { padding: 0; margin: 0; }

/*==========  PHOTO =======*/
img { border: 0; }
#content img { max-width: 100%; }

img.col3 { width: 200px; padding: 5px; border: #3b2e2f 1px solid; -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  }


/*==========  COLUMN ===*/
dl.col2 { margin: 0 0 10px 0; padding: 0 20px 0 0; }
dl.col2 dt { float:left; width: 100px;font-weight: bold; margin-right:5px; padding:2px 0; }
dl.col2 dd  { margin: 0; padding:2px 0;}

/*========== TOP : LOGO & MAIN MENU ===============*/
#top-L img { max-width: 100%; }
#logo { padding: 10px 0; }
#logo img { height: 75px; 
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;  }		   
#logo:hover {  }
#logo:hover img { -webkit-filter: grayscale(100%);
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg); }
#logo h1 { display: inline; color: #39c5de; padding-left: 5px; font-size: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: -0.2px; }
#logo h1 span.txt { color: #c6c6c6; }


#tools { position: fixed; right: 0; bottom: 0;}
#tools img { display: table-row; }

#slideshow-bg { background: #000 !important; width:100%; z-index: 98; height: 80vh; z-index:1; overflow:hidden; }
#slideshow-bg:after { clear: both; display: table; content: ''; }

/*
#cp-bg-bar .button-justify .cp-slide-btn {
    display: inline-block;
    background-color: transparent!important;
    width: 50px!important;
    height: 80px!important;
    opacity: 1.0!important;
    filter: alpha(opacity=100)!important;
    position: absolute;
}
#cp-bg-bar .button-justify .cp-slide-btn:hover { opacity: 0.5!important; filter: alpha(opacity=50)!important; }
#cp-bg-bar .button-justify a#cp-back{ background-image: url("../images/icon-slide.png")!important; background-position: 0 0; }
#cp-bg-bar .button-justify a#cp-next{ background-image: url("../images/icon-slide.png")!important; background-position: -50px 0;}
*/
#cp-caption-inner{ top: 100px; position:relative!important; text-align:center;}
#cp-bg-slide .slideimg { background: #000; /* opacity: 1.0; */}
#cp-bg-slide #slideimg1 { opacity: 0.5;  }

#cp-caption, #cp-caption-inner { width: 100%!important; }
.cp-desc { background: none!important; padding:0; font-size:24px; text-align:center; }
.cp-desc h1.small { color: #ff7200; padding: 0; margin: 0; font-size: 46px; text-transform:uppercase; text-align:center;  	}
.cp-desc h2.big { padding: 0; margin: 0; font-size: 36px; font-weight: 600;	text-transform:uppercase;  }
.cp-desc h2.big span{ display:inline-block; line-height:90px; border-top:1px solid rgba(255,255,255,0.3); border-bottom:1px solid rgba(255,255,255,0.3);}
.cp-desc .des {	font-size:30px;	font-weight:400;}


 /*======= MAIN MENU =======*/
.mainnav ul.ide_menu { margin: 0; padding: 0; list-style: none; background: #39c5de; border: 1px solid #e7e7e7; border-bottom: none; }
.mainnav ul.ide_menu > li {  background:url("../images/bg-mainnav-lv1.png") repeat-y scroll right top transparent; list-style: none;
display:inline-block; padding: 14px 0; margin: 0; position:relative; text-align: left;  }
.mainnav ul.ide_menu > li > a { position:relative; 
	background:none; color:#fff; padding: 18px;
	font-family: 'rsu'; font-size:16px; font-weight: 300; text-transform: uppercase; 
	  }
.mainnav ul.ide_menu > li > a:hover, .mainnav ul.ide_menu > li > a:focus { text-decoration:none; }
.mainnav ul.ide_menu > li > a:hover, .mainnav ul.ide_menu > li.active > a, .mainnav ul.ide_menu > li:hover > a { color:#fff; background: #1d98ae; }
.mainnav ul.ide_menu > li:first-child { padding-left: 0; }
.mainnav ul.ide_menu > li:last-child { padding-right: 0; }
.mainnav ul.ide_menu > li.mega > a:after { font-family: "FontAwesome"; content:"\f0d7" /*f107 f078 */; padding-left:10px; }

.mainnav .ide_menu > li .dropdown { position: absolute; z-index: 999; left: 0; top:60px; min-width: 240px; padding: 10px 18px; 
  background: #fff; border: 1px solid #e4e4e4; border-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 
  list-style: outside none none; transition: all 0.2s ease 0s; opacity: 0; visibility: hidden; 
}
.mainnav .ide_menu > li .dropdown:before { position: absolute; top: -20px; left: 10%; border-color: transparent transparent #fff; content: ""; border-style: solid; border-width: 10px;  }
.mainnav .ide_menu > li:hover > .dropdown { opacity: 1; visibility: visible; }
.mainnav .ide_menu > li ul.dropdown li { line-height:24px; padding: 6px 0; }
.mainnav .ide_menu > li ul.dropdown li + li { border-top:1px solid #f2f2f2; }
.mainnav .ide_menu > li ul.dropdown li a { color:#828282; display:block; }
.mainnav .ide_menu > li ul.dropdown li a:before { font-family: "FontAwesome"; content:"\f0fe" /* f046 */; padding-right:10px; }
.mainnav .ide_menu > li ul.dropdown li > a:hover, .mainnav .ide_menu > li ul.dropdown li.active > a { color:#3b793a; }
/*========== MENU REPONSIVE ==========*/
.menu-wrap{ position:fixed; width:270px; height:100%; margin-right: -20px; padding:0; right:0; top:0;
	background: #3f3f3f; border:1px solid transparent; z-index:999999; overflow-y:scroll;
	transition:transform ease 1s;
	-o-transition:-o-transform ease 1s;
	-ms-transition:-ms-transform ease 1s;
	-moz-transition:-moz-transform ease 1s;
	-webkit-transition:-webkit-transform ease 1s;
	transform:translateX(270px);
	-o-transform:translateX(270px);
	-ms-transform:translateX(270px);
	-moz-transform:translateX(270px);
	-webkit-transform:translateX(270px);
	
}
.show-menu .menu-wrap {
	transition:all ease 0.6s;
	-o-transition:-o-transform ease 0.6s;
	-ms-transition:-ms-transform ease 0.6s;
	-moz-transition:-moz-transform ease 0.6s;
	-webkit-transition:-webkit-transform ease 0.6s;
	transform:translateX(0);
	-o-transform:translateX(0);
	-ms-transform:translateX(0);
	-moz-transform:translateX(0);
	-webkit-transform:translateX(0); }
.content-wrapper:before { position: absolute; width: 0; height: 0; right: 0; top: 0; content: ""; background:rgba(0, 0, 0, 0.5);
    opacity:0;
	transition: opacity 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s;
	-ms-transition: opacity 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s;
	-webkit-transition: opacity 0.5s ease 0s; }
.show-menu .content-wrapper:before { width: 100%; height: 100%;
	opacity:1;
	transition: opacity 0.5s ease 0s;
	-o-transition: opacity 0.5s ease 0s;
	-ms-transition: opacity 0.5s ease 0s;
	-moz-transition: opacity 0.5s ease 0s;
	-webkit-transition: opacity 0.5s ease 0s; }
div.title_resMenu { position:relative; }
div.title_resMenu h3{ color:#fff; margin:0; text-transform:uppercase; font-size:18px; padding: 15px; border-bottom:1px solid rgba(255,255,255,0.35); }
.menu-wrap li a{ color: #eee; display:block; }
#close-button{ position:absolute; right: 10px; top:11px; background:none; border:none; color:#fff; font-size:18px; }
#open-button{ position:absolute; right: 20px; top: 30px; height: 30px; width: 65px; background: #39c5de; color:#fff; border: none;
border-radius: 2px; display:none; text-transform: uppercase; font-family: 'rsu'; font-size:16px; font-weight: 400; line-height: 25px;  }
#open-button:after{ content:'\f107'; font-family: FontAwesome; font-size:18px; padding-left: 5px;  }

#top-Full #top { position:relative; }
.menu-wrap ul{ font-family: 'rsu'; padding:0; list-style:none; }
.menu-wrap ul.ide_menu > li > a{ font-size:14px; padding:11px 0; }
.menu-wrap ul.ide_menu > li{ padding-left:4px; }
.menu-wrap ul.ide_menu > li + li > a{ border-top:1px solid rgba(255,255,255,0.35); }
.menu-wrap ul.ide_menu li li > a{ padding:6px 0; }
.menu-wrap ul.ide_menu li li{ padding-left:18px; }
.menu-wrap ul.ide_menu li ul.dropdown{ border-top:1px solid rgba(255,255,255,0.35); }

/* ===============  FOOTER : HOME =============== */
#back2top { padding: 10px 0 10px 10%; background: #FFF; border-top: 1px dotted #bbb; color: #252525;   }
#back2top p { padding: 0; margin: 0; }
#back2top a { color: #FFF;}
#back2top .box1 { float: left; width: 75%; font-size: 80%; color: #666;    }
#back2top .box2 { float: right; width: 5%; text-align: center; font-size: 18px; 
    width: 40px;
    height: 40px;
    line-height: 40px;
    -webkit-border-radius: 3px;
    border-radius: 50%; border: 1px solid rgba(0,0,0,.5);
    /* background: rgba(0,0,0,.7); */
    color: #666;   }
#back2top .box2 a  { color: #666;}


/* ===============  PAGE : HOME =============== */
#home {}
#home #news { margin: 0 0 20px 0; padding: 20px; background: #f8f8f8;}
#home #events { margin: 0 0 20px 0; padding: 20px; background: #f1f1f1;}


/* ===============  PAGE : ABOUT =============== */
#about {}
#about-L { float: left; width: 40%; }
#about-R { float: right; width: 58%; padding: 0 0 0 2%; }

/* ===============  PAGE : PRODUCTS LIST =============== */
#product-list.col3 #list { float: left; width: 32%; height: 200px; margin: 1% 0; border: 1px solid #f3f3f3;  }
#product-list.col3 #list { display: block; position: relative; overflow: hidden; }
#product-list.col3 #list:nth-of-type(3n-1) { float: left; width: 32%; margin: 1%; }
#product-list:after, #product-list.col3 #list:after { clear: both; display: table; content: ''; }
#product-list.col3 #list img { width: 100%;}
#product-list.col3 .caption { position: absolute; background: black; background: rgba(0,0,0,0.75); color: white; width: 100%; height: 70%; opacity: 0; text-align: center; padding: 30% 0 0 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease; }
#product-list.col3 #list:hover .caption { opacity: 1; }
#product-list.col3 #list:hover .caption a { color: #FFF; }
#product-list.col3 #list:hover .caption .en { color: #1d98ae; font-size: 140%; }
#product-list.col3 #list:before { /*
  content: "?"; position: absolute; text-align: center;  width: 24px; height: 24px;   opacity: 0.75; 
  font-size: 14px; line-height: 24px; font-weight: 800; text-shadow: 0 0 5px white;
  background: rgba(255,255,255,0.75); color: black;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
  -moz-transition: all 0.6s ease; */
}
#product-list.col3 #list:hover:before { opacity: 0; }

.cap-left:before { bottom: 10px; left: 10px; }
.cap-left .caption { bottom: 0; left: -100%; }
.cap-left:hover .caption { left: 0; }

.cap-right:before { bottom: 10px; right: 10px; }
.cap-right .caption { bottom: 0; right: -30%; }
.cap-right:hover .caption { right: 0; }

.cap-top:before { top: 10px; left: 10px; }
.cap-top .caption { left: 0; top: -30%; }
.cap-top:hover .caption { top: 0; }

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot .caption { left: 0; bottom: -30%;}
.cap-bot:hover .caption { bottom: 0; }

/* ===============  PAGE : PRODUCT =============== */
img.product-cover { }
.detail ul { list-style: none; margin: 0 0 0 10px; padding: 0; }  
.detail ul:nth-of-type(2n+2) { background: rgba(0,0,0,0.05);  }  
.detail ul.topic li { color: rgba(0,0,0,0.75); font-weight: 600; }

.detail.col8 ul li { display: inline-block; margin: 0; padding: 0; width: 10%; vertical-align: text-top; rgba(0,0,0,0.5);   }
.detail.col8 ul li:nth-of-type(1) { width: 18%; padding-left: 10px; } 

.detail.col4 ul li { display: inline-block; margin: 0; padding: 0; width: 25%; vertical-align: text-top; rgba(0,0,0,0.5);   }
.detail.col4 ul li:nth-of-type(1) { width: 20%; padding-left: 10px; } 
.detail.col5 ul li { display: inline-block; margin: 0; padding: 0; width: 20%; vertical-align: text-top; rgba(0,0,0,0.5);   }
.detail.col5 ul li:nth-of-type(1) { width: 15%; padding-left: 10px; } 

ul.tags.inline:before { content: 'Tag :'; }
ul.tags.inline li { display: inline-block; margin: 0 5px; padding: 0; }
ul.tags.inline li:after { content: ','; }
ul.tags.inline li:last-child:after { content: ''; }


.col2 h3 { color: rgba(0,0,0,0.75);} 
.col2 div { float: left; width: 46%; padding: 2%; } 
/* ===============  PAGE : GALLERY =============== */
#gallery { margin: 40px 0 0 0;}
#gallery .photo { width: 20%; margin: 2%; border: 2px #e6edf2 solid; 	transition: all 200ms ease-in-out 0s;
	-moz-transition: all 200ms ease-in-out 0s;
	-webkit-transition: all 200ms ease-in-out 0s;
	-o-transition: all 200ms ease-in-out 0s; }
#gallery a:hover img.photo { border: 2px #3b2e2f solid; }

#gallery .jux-album-button-filter li { font-family: 'rsu'; font-size: 140%; } 
#gallery .view-eighth .mask { display: none;  background-color: rgba(255, 255, 255, 0.3);}
#gallery .view h2 {  background-color: rgba(59, 46, 47, 0.95); color: #FFF;}
#gallery .og-expander { background: #3b2e2f; }
#gallery .og-details h3, #gallery .og-details p { color: #f5f5f5; }
#gallery .og-line { border-left: 1px solid #FFF;   box-shadow: 1px 0 #222; }



/* ===============  PAGE : CONTACT =============== */
#contact {}
#contact-L { float: left; width: 50% ;}
#contact-R { float: left; width: 50% ; }

#contact dl.info { margin: 0 0 10px 0; padding: 0 20px 0 0; }
#contact dl.info dt { float:left; width: 100px; font-weight: bold; margin-right:5px; padding:2px 0; }
#contact dl.info dd  { margin: 0; padding:2px 0;}

#contact h3 { position: relative; padding: 0 0 11px 0; margin: 0 0 22px 0; font-size: 18px; text-transform: uppercase; }
#contact h3:before { width: 70px; position: absolute; left: 0; bottom: 0; border-bottom: 3px solid #6e6e6e; content: '';   }

#contact ul.info { padding: 0; margin: 0; font: 15px/1.6 rsu; }
#contact ul.info li {  list-style: none; padding: 0; margin: 0; }
#contact ul.info li i.fa { display: inline-table; padding: 0; margin: 0; background: #1d98ae; border-radius: 50%;  
  font: normal normal normal 20px/1 FontAwesome; width: 44px; height: 44px; line-height: 44px; text-align: center; color: #fff; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
#contact ul.info li p { display: inline-block; padding: 5px 0 0 15px; margin: 10px 0;  }

/* ===============  PAGE : REGISTER FORM =============== */
#contact .mod_btquickcontact_module { border: none;  }
#contact .mod_btquickcontact { border-radius: 0; padding: 0; margin: 0;  }
#contact .btqc-title, #contact .btqc-progressbar-container { display: none; }
#contact .btqc-field-container label  { display: none; color: #FFF;  }
#contact .btqc-field-container input[type=text], #contact .btqc-field-container textarea { 
  float: none; height: 34px; width: 96%; padding: 5px 2%; margin: 10px 0 0 0; 
  font-family: 'rsu'; font-size: 12px; font-weight: 500; letter-spacing: 1px; 
  border-radius: 5px; /* border: 1px solid #484848; */ border: none; box-shadow: none; 
  background: #f5f5f5; color: #444444; }
#contact .btqc-field-container:nth-child(1) input[type=text] { float: left; width: 45%; padding: 5px 2%; }
#contact .btqc-field-container:nth-child(2) input[type=text] { float: left; width: 45%; padding: 5px 2%;  margin-left: 2%; }
#contact .btqc-field-container:nth-child(3) { }

#contact .btqc-field-container input:hover { -webkit-box-shadow: 0 0 2px #aaa; 
     -moz-box-shadow: 0 0 2px #aaa; 
          box-shadow: 0 0 2px #aaa;  }
#contact .btqc-field-container textarea { height: 100px; }

#contact input.btqc_submit { width: 100%; margin: 0; padding: 0; height: 50px;
  text-transform: uppercase;  text-align: center; font-size: 140%; letter-spacing: 1px; line-height: 10px;  color: #FFF;
  background: #1d98ae; border: none; border-radius: 5px; }
#contact input.btqc_submit:before { content:'test' }
#contact #btqc_f_decide  { display: table-row; font-family: 'rsu'; font-size: 14px; letter-spacing: 0.5px; font-weight: 300; padding: 30px 0 0 0; }
#contact .checkbox-half { float: left; width: 45%; padding: 0; }

#contact .btqc-field-container .btqc-fc-wrapper { clear: both; float: none; }
#contact .mod_btquickcontact .step::after { clear: both; }

/* ===============  PAGE : ERROR 404 =============== */
#error404 { width: 1000px; margin: 100px auto; }

.btsc-iconbox {
padding: 5px; }