/* Font Type */
@font-face {
    font-family: 'robotothin';
    src: url('font/thin/Roboto-Thin-webfont.eot');
    src: url('font/thin/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/thin/Roboto-Thin-webfont.woff') format('woff'),
         url('font/thin/Roboto-Thin-webfont.ttf') format('truetype'),
         url('font/thin/Roboto-Thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotobold';
    src: url('font/bold/Roboto-Bold-webfont.eot');
    src: url('font/bold/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/bold/Roboto-Bold-webfont.woff') format('woff'),
         url('font/bold/Roboto-Bold-webfont.ttf') format('truetype'),
         url('font/bold/Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoregular';
    src: url('font/regular/Roboto-Regular-webfont.eot');
    src: url('font/regular/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/regular/Roboto-Regular-webfont.woff') format('woff'),
         url('font/regular/Roboto-Regular-webfont.ttf') format('truetype'),
         url('font/regular/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* /Font Type */

/* Style Reset */
html{color:#000000; background:#FFFFFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0; padding:0; 
font-family:'robotothin', Arial, Helvetica, sans-serif}
body{ direction:ltr; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0; font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000000;}
input,button,textarea,select,optgroup,option{font-family:'robotothin', Arial, Helvetica, sans-serif; font-size:inherit; font-style:inherit; 
font-weight:inherit;}
input,button,textarea,select{font-size:100%;} 
a, a:link, a:hover{ color:#676e6f; text-decoration:none}
/* /Style Reset */

.pg_sticky{ margin-top:80px;}
.container{ max-width:inherit; width:100%; margin:0 auto; padding:0; clear:both; overflow:hidden;}
.grntxt{ color:#812820}

/* header style */
.header_wrap{ width:100%; padding:0; margin:0 auto; clear:both;}
.header_wrap .header_top{ max-width:1500px; width:100%; clear:both; margin:0 auto; padding:0; min-height:80px;}
.header_wrap .header_top .logo{ display:inline-block; float:left; clear:none; padding:10px 10px 8px; margin:0 5% 0 0; width:100%; max-width:200px}

.header_wrap .header_top .menu{ padding:10px 0; margin:0; width:100%; max-width:100%;}
/*.header_wrap .header_top .menu ul{ list-style:none; padding:0; margin:0; clear:both}*/
.header_wrap .header_top .menu ul li{ font:normal 1em Verdana, Geneva, sans-serif}
.header_wrap .header_top .menu ul li:last-child{ margin-right:0}
.header_wrap .header_top .menu .arw{ display:inline-block; padding:0; margin:0; font-size:14px;}
.header_wrap .header_top .menu .arw:before{ content:'˅'; font-style:normal; vertical-align:middle}

.header_wrap .header_top .menulist ul ul > li a .arw{ position:relative; right:0; float:right; display:inline-block; font-size:16px; line-height:100%;}
.header_wrap .header_top .menulist ul ul > li a:hover .arw{ color:#59b947}
.header_wrap .header_top .menulist ul ul > li a .arw:before{ content:'›'; font-style:normal; vertical-align:middle}

.header_wrap .header_grd{background-color:#000000; width:100%}
.header_wrap .header_img{ margin:0 auto; position:relative; color:#fcfcfc; width:100%; max-width:1500px; height:100%; min-height:562px /*135px*/; 
background-image:url(grd_header.jpg);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
.header_wrap .header_img .slogn{ position:absolute; max-width:50%; text-align:center; left:5%; top:25%;}
.header_wrap .header_img h1{ font:normal 4em 'robotothin', Arial, Helvetica, sans-serif; text-shadow: 2px 2px 5px #2e0f26;}
.header_wrap .header_img p{font:normal 1.5em 'robotothin', Arial, Helvetica, sans-serif; text-shadow: 2px 2px 5px #2e0f26;}

.header_wrap .header_top.sticky{z-index:15; position:fixed; max-width:100%; width:100%; height:60px; right:0; left:0; top:0px; margin:0 auto; background:#ffffff; 
-moz-box-shadow: 1px 1px 2px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px 2px #ccc;
box-shadow: 1px 1px 2px 2px #ccc;}
.header_wrap .header_top.sticky .hdr_dtail{max-width:1500px; width:100%; clear:both; margin:0 auto;}
/* /header style */

/* content style */
.content_wrap{ width:100%; padding:0; margin:0 auto; clear:both;}
.content_wrap .btn{ display:inline-block; font-size:1.25em; padding:12px 30px; background:#812820; color:#fcfcfc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.content_wrap .btn:hover{ background:#665344;}
.content_wrap .dtail_wrap{ clear:both; margin:0 auto; padding:5% 1%; overflow:hidden; width:100%; max-width:1500px;}


.content_wrap .pg_list{ clear:both; margin:0; padding:0; overflow:hidden}
.content_wrap .pg_list ul{ list-style:none; padding:0; margin:0; clear:both; overflow:hidden}
.content_wrap .pg_list ul li{padding:0; margin:0;}

.content_wrap .wht_grd{ background-color:#ffffff; color:#676e6f}
.content_wrap .wht_grd .dtail .srvimg{ background-color:#f1eff0}
.content_wrap .gry_grd{ background-color:#f3f3f3; color:#676e6f}
.content_wrap .gry_grd .dtail .srvimg{ background-color:#ffffff}

.content_wrap .pg_list .dtail{ clear:both; margin:0 auto; padding:5% 2%; overflow:hidden; width:100%; max-width:1500px;}
.content_wrap .pg_list .dtail .srvimg{ text-align:center; float:left; clear:none; display:inline-block; padding:0; margin:0 auto; max-width:100%; width:350px;
 max-height:100%; height:350px;}

.content_wrap .pg_list .dtail .img{ display:inline-block; padding:0; margin:0 auto; max-width:100%; background:url(img01.png) center 0 no-repeat}
.content_wrap .pg_list .dtail .srv01{ margin-top:35px; width:233px; height:289px; background-position:center 0}
.content_wrap .pg_list .dtail .srv02{ margin-top:55px; width:304px; height:240px; background-position:center -320px}
.content_wrap .pg_list .dtail .srv03{ margin-top:30px; width:282px; height:301px; background-position:center -580px}
.content_wrap .pg_list .dtail .srv04{ margin-top:60px; width:304px; height:236px; background-position:center -930px}
.content_wrap .pg_list .dtail .srv05{ margin-top:55px; width:292px; height:238px; background-position:center -1200px}
.content_wrap .pg_list .dtail .srv06{ margin-top:20px; width:301px; height:316px; background-position:center -1483px}
.content_wrap .pg_list .dtail .srv07{ margin-top:20px; width:307px; height:288px; background-position:center -1824px}
.content_wrap .pg_list .dtail .srv08{ margin-top:20px; width:282px; height:297px; background-position:center -2153px}


.content_wrap .pg_list .dtail .srvtxt{ float:left; clear:none; display:inline-block; padding:0; margin:0 0 0 1.5%; width:60%;}
.content_wrap .pg_list .dtail .srvtxt h2{ font:normal 3.25em 'robotoregular', Arial, Helvetica, sans-serif; color:#000000}
.content_wrap .pg_list .dtail .srvtxt p{ line-height:150%; margin-bottom:20px;}
.content_wrap .pg_list .dtail .srvtxt p strong:first-child:before{ content:'→ '; font-size:1.2em}
.content_wrap .pg_list .dtail .srvtxt ul li{ padding:0; margin:0 0 10px;}
.content_wrap .pg_list .dtail .srvtxt ul li strong:first-child:before{ content:'→ '; font-size:1.2em}


.content_wrap .intro .introimg{ text-align:center; float:left; clear:none; display:inline-block; padding:0; margin:0 auto; max-width:100%; width:614px; 
max-height:100%; height:585px;}

.content_wrap .intro .img{ display:inline-block; padding:0; margin:0 auto; max-width:100%;
background-image:url(img02.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center 0;}
.content_wrap .intro .intro01{ margin-top:35px; width:614px; max-height:585px; height:100%; background-position:center 0}

.content_wrap .intro .introtxt{ float:left; clear:none; display:inline-block; padding:0; margin:0 0 0 1.5%; width:50%;}
.content_wrap .intro .introtxt h2, .content_wrap .intro .introtxt h3{ font:normal 3.25em 'robotoregular', Arial, Helvetica, sans-serif; color:#000000}
.content_wrap .intro .introtxt h3{ font-size:1.6em; margin-bottom:25px;}
.content_wrap .intro .introtxt p{ line-height:150%; margin-bottom:20px;}


.content_wrap .whatdo{ text-align:center; margin:0 auto; color:#000000}
.content_wrap .whatdo h2{font:normal 3.25em 'robotoregular', Arial, Helvetica, sans-serif;}
.content_wrap .whatdo p{ font-size:1.6em; margin-bottom:15px;}

.content_wrap .whatdo .pg_list h3{font-size:1.6em;}
.content_wrap .whatdo .pg_list ul li{ margin-top:30px; float:left; clear:none; max-width:100%; max-height:100%; width:330px; border-right:1px solid #999999;}
.content_wrap .whatdo .pg_list .item{ min-height:215px; text-align:center; clear:both; overflow:hidden; padding:35px 20px 10px; margin:0 15px -15px; 
border-bottom:1px solid #999999;}
.content_wrap .whatdo .pg_list .item a{ color:#000000;}
.content_wrap .whatdo .pg_list li:nth-child(4n){ border-right:0}
.content_wrap .whatdo .pg_list li:nth-child(n+5) .item{ border-bottom:0}

.content_wrap .whatdo .pg_list .item .img{ display:inline-block; padding:0; margin:0 auto; max-width:100%; background:url(img03.png) center 0 no-repeat}
.content_wrap .whatdo .pg_list .item .srv01{ width:92px; height:139px; background-position:center 0}
.content_wrap .whatdo .pg_list .item .srv02{ width:182px; height:139px; background-position:center -147px}
.content_wrap .whatdo .pg_list .item .srv03{ width:113px; height:139px; background-position:center -309px}
.content_wrap .whatdo .pg_list .item .srv04{ width:172px; height:139px; background-position:center -470px}

.content_wrap .whatdo .pg_list .item .srv05{ width:153px; height:139px; background-position:center -628px}
.content_wrap .whatdo .pg_list .item .srv06{ width:113px; height:139px; background-position:center -777px}
.content_wrap .whatdo .pg_list .item .srv07{ width:124px; height:139px; background-position:center -934px}
.content_wrap .whatdo .pg_list .item .srv08{ width:130px; height:139px; background-position:center -1091px}


.content_wrap .prdc{ text-align:center; margin:0 auto; color:#000000}
.content_wrap .prdc h2{font:normal 3.25em 'robotoregular', Arial, Helvetica, sans-serif; margin-bottom:15px;}
.content_wrap .prdc p{ font-size:1.6em; margin-bottom:15px; max-width:90%;}
.content_wrap .prdc .btn{ font-size:0.8em; line-height:normal}

.content_wrap .prdc .dtail{ text-align:left;}
.content_wrap .prdc .dtail .prdcimg{ text-align:center; float:left; clear:none; display:inline-block; padding:1px; margin:0 auto; max-width:100%; width:220px;
 max-height:100%; height:220px; background:#ffffff; border:3px solid #e6e6e6;
 -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

.content_wrap .prdc .dtail .img{ display:inline-block; padding:0; margin:0 auto; max-width:100%; background:url(img04.jpg) center 0 no-repeat}
.content_wrap .prdc .dtail .prdc01{ width:220px; height:220px; background-position:center 0}

.content_wrap .prdc .dtail .prdctxt{ float:left; clear:none; display:inline-block; padding:0; margin:0 0 0 1.5%; width:78%;}
.content_wrap .prdc .dtail .prdctxt h2, .content_wrap .dtail .prdctxt h3{ font:normal 3.25em 'robotoregular', Arial, Helvetica, sans-serif; color:#000000}
.content_wrap .prdc .dtail .prdctxt h3{ font-size:1.6em; margin-bottom:15px;}
.content_wrap .prdc .dtail .prdctxt p{ line-height:150%; margin-bottom:20px;}


.content_wrap .cntact{ text-align:center; margin:0 auto; padding:5% 0 0; color:#000000}
.content_wrap .cntact h2{font:normal 3.25em 'robotoregular', Arial, Helvetica, sans-serif; margin-bottom:15px;}
.content_wrap .cntact p{ font-size:1.6em; margin-bottom:15px; max-width:90%;}


.content_wrap .fter{ padding:0; margin-top:-5px;}
.content_wrap .fter ul li{ float:left; clear:none; padding:2% 0; max-width:100%; width:450px; border-top:12px solid #494b5d}
.content_wrap .fter ul li:first-child{ border-top:12px solid #50b948}
.content_wrap .fter ul li:last-child{ width:449px; border-top:12px solid #fed100}


.content_wrap .fter .dtail{ max-width:312px; width:100%; overflow:hidden; clear:both; margin:0 auto}
.content_wrap .fter .fterimg{float:left; clear:none; display:inline-block; padding:0; margin:0 auto; max-width:100%; width:60px;
 max-height:100%; height:52px;}
.content_wrap .fter .img{ display:inline-block; padding:0; margin:0 auto; max-width:100%; background:url(img06.png) center 0 no-repeat}
.content_wrap .fter .fter01{ width:60px; height:52px; background-position:center 0}
.content_wrap .fter .fter02{ width:60px; height:52px; background-position:center -70px}
.content_wrap .fter .fter03{ width:60px; height:52px; background-position:center -130px}
.content_wrap .fter p{ clear:none; float:left; padding:0; margin:0}
.content_wrap .fter li:last-child p{ padding-left:15px}
/* /content style */

/* Responsive menu */
.menu-link { display: none;}
.menulist { 
  float: left; width: 100%; max-width: 78%;
  -webkit-transition: all 0.3s ease;  
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease; 
}
.menulist ul { 
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: table;
  max-width: 100%; width: 100%;
}
.menulist > li > ul.sub-menu {
	min-width: 10em;
	padding: 4px 0;
	background-color: #f2f4f5;
	border:none;
}
.menulist ul li { padding: 0px; }
.menulist > ul > li { display: inline-block; margin-right:12%}
.menulist ul li a { display: block; text-decoration: none; color:#812820; font-size: 0.9em; }
.menulist ul li a:hover, .menulist ul li a.selected{ color:#676e6f}

.menulist ul li > a { height:32px; padding: 19px 12px;}
.menulist ul ul { 
  display: none; 
  position: absolute; 
  top:100%;
  min-width: 160px; width:inherit;
  background-color: #f2f4f5;
  border:none;
  
  -moz-box-shadow: 0 3px 1px #ccc;
  -webkit-box-shadow: 0 3px 1px #ccc;
  box-shadow:0 3px 1px #ccc;
}
.menulist ul li:hover > ul { display: block; padding:5px 0 }
.menulist ul ul > li { position: relative; }
.menulist ul ul > li a { margin:0 5px; padding:10px; height: auto;/* background-color: #f2f4f5;*/ color:#676e6f; border-bottom:1px solid #d2d2d2 }
.menulist ul ul > li:last-child a{ border-bottom:none;}
.menulist ul ul > li a:hover, .menulist ul ul > li a.selected {/* background-color:#d2d2d2;*/ color: #59b947; }
.menulist ul ul ul { position: absolute; left: 100%; top:0; width:100%;}
/* /Responsive menu */



/* #Media Queries
================================================== */
/* Responsive menu - screen smaller than 1024 */
@media all and (max-width: 1024px) {
  .header_wrap .header_top.sticky{ position:absolute}
  .example-header .container { width: 100%; }
  
  a.menu-link { display: block; color: #fff; background-color: #333; float: right; text-decoration: none; padding: 19px 10px; margin:0 5px}
  .menulist { clear: both; min-width: inherit; float: none; max-width:100% }
  .menulist, .menulist > ul ul { overflow: hidden; max-height: 0; background-color: #f4f4f4; }
  .menulist > li > ul.sub-menu { padding: 0px; border: none; }
  .menulist.active, .menulist > ul ul.active { max-height: 55em; }
  .menulist ul { display: inline; }
  .menulist > ul { border-top: 1px solid #d2d2d2; }
  .menulist li, .menulist > ul > li { display: block; margin-right:0 }
  .menulist ul li:hover > ul{ padding:0}
  .menulist li a { color: #000; display: block; padding: 0.8em; border-bottom: 1px solid #d2d2d2; position: relative; }
  .menulist li.has-submenu > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 1.5em;
    padding: 0.55em 0.5em;
  }
  .menulist li.has-submenu > a.active:after {
    content: "-";
  }
  .menulist ul ul{-moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}
  .menulist ul li > a{ height:20px;}
  .menulist ul ul > li a { background-color: #e4e4e4; height:20px; padding: 19px 18px 19px 30px; margin:0; }
  .menulist ul ul, .menulist ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
  
  .header_wrap .header_top .menu .arw:before,
  .header_wrap .header_top .menulist ul ul > li a .arw:before{ content:''}
}
/* /Responsive menu - screen smaller than 1024 */


/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	.content_wrap .dtail_wrap{ padding:2% 1%}
	.content_wrap .whatdo .pg_list h3{font-size:1.2em}
	.content_wrap .dtail_wrap{width: 98%;}
	.content_wrap .fter .dtail{font-size:0.77em}
	
	.content_wrap .whatdo .pg_list li:nth-child(2n){ border-right:0}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	.content_wrap .intro .introtxt{ width:95%}
	.content_wrap .intro .introimg{ display:none}
	.content_wrap .whatdo .pg_list li:nth-child(n+5) .item{  border-bottom: 1px solid #999999;}
	.content_wrap .pg_list .dtail .srvtxt{ width:95%;}
	.content_wrap .pg_list .dtail .srvimg{display:none}
	
	.content_wrap .prdc .dtail{ text-align:center}
	.content_wrap .prdc .dtail .prdcimg, .content_wrap .prdc .dtail .prdctxt{ float:none; clear:both}
	.content_wrap .fter ul li{ float:none; clear:both}
	.content_wrap .fter ul li, .content_wrap .fter ul li:last-child{ width:100%;}
	
	
	.header_wrap .header_img h1{ font-size:1.5em}
	.header_wrap .header_img p{ font-size:1em}
	.header_wrap .header_img{ min-height:142px}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.content_wrap .whatdo .pg_list ul li{ max-width:48%}
	.content_wrap .whatdo .pg_list .item{ padding:35px 0 10px}
	.content_wrap .whatdo .pg_list li:nth-child(2n){ border-right:0}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	.header_wrap .header_img .slogn{ top:0}
}

/* Screen size between 768 to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1050px){
	.content_wrap .intro .introimg { height: 440px; width: auto; max-height: 45%; max-width: 45%; }
	.content_wrap .intro .intro01 { max-height: 440px; max-width: 50%; height: 50%; width: 614px; }
	
	.content_wrap .pg_list .dtail .srvimg{ max-width:50%; width: 295px;}
	.content_wrap .pg_list .dtail .srvtxt{width: 58%;}
	
	.content_wrap .prdc .dtail .prdctxt{width: 68%;}
	.content_wrap .fter ul li, .content_wrap .fter ul li:last-child{ width:33.3%}
	.header_wrap .header_img{min-height: 330px;}
	.header_wrap .header_img .slogn{ top:15%}
	
	.content_wrap .whatdo .pg_list li:nth-child(n+5) .item{  border-bottom: 1px solid #999999;}
}

/* Screen size between 768 to standard 960 (devices and browsers) */
@media only screen and (min-width: 1020px) and (max-width: 1050px){
	.content_wrap .whatdo .pg_list ul li{ width:24.8%}
	.content_wrap .whatdo .pg_list h3{font-size: 1.2em;}
	
	.menulist{max-width: 73%;}
	.menulist > ul > li{margin-right: 8%;}
}