/* CSS Document */
html, body, div, span, h1, h2, h3, h4, h5 strong, ol, ul, li { margin: 0; border: 0; padding: 0; outline: 0; vertical-align: baseline }
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }
ol, ol li ol { padding: 0px; margin: 0; line-height: 24px; margin-left:5px; }
ol li { list-style-position: inside; text-indent: -1.5em; margin-left: 15px }
ul, ul li ul { padding: 5px 0; line-height: 18px;  margin-left:0px;  list-style-position: inside; }
ul li ul { list-style-position: inside; margin-left: 15px  }
.clear { clear: both }
img { border: none; overflow: hidden; max-width: 100% }
a { text-decoration: none; color: #0068ff ; outline:none; }
a:hover { text-decoration: underline; color: #000; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
p { margin: 0 0 10px; line-height: 20px }
input, textarea  {font-size: 13px;  font-family:Arial, Helvetica, sans-serif; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

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

}

@font-face {
    font-family: 'robotomedium';src: url('../fonts/roboto-medium-webfont.eot');src: url('../fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/roboto-medium-webfont.woff2') format('woff2'),url('../fonts/roboto-medium-webfont.woff') format('woff'),url('roboto-medium-webfont.ttf') format('truetype'),url('../fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
    font-weight: normal; font-style: normal;

}

body{background: #f6f6f6; font-family:Arial, sans-serif ; font-size: 14px; color: #5c5c5c; text-align:left;}
.container { width:1170px; margin:0 auto; padding: 0; position: relative; z-index:9999;}

/* homepage */
.homepage { clear:both; padding:0; display:block;  margin: 0; width: 100%; background: #f6f6f6;}
.homepage h1 { color:#0b4e9d; font-size:24px; font-weight:normal; text-transform:uppercase; text-align: center; font-family:Helvetica, Arial, sans-serif; }

/* subpage */
.subpage { clear:both; padding: 20px 0; display:block;  margin: 0; width: 100%; background: #f6f6f6;}
.subpage h1, .subpage h1 a { color:#0b4e9d; font-size:24px; font-weight:normal; text-transform:uppercase; text-align: left; font-family: Arial, Helvetica, sans-serif; }
.subpage .address{margin:0px 0px 20px 0px; float:left; width: 40%;}
.subpage .address span{font-weight:bold;}
.subpage .address p{margin: 0; line-height: 20px;}

/* ===== HEADER =====  */
header { clear:both; width:100%; margin:0 auto; position: relative; z-index:99999; background: #fff;}
header .top-header { clear:both; width:100%; display:block; background: url(../images/bg-top.jpg) repeat-x; min-height: 100px;}

header .logo { width: 137px; height: 90px; position: absolute; z-index: 9999; margin-left: -68px; left: 50%; margin-top: 10px;}
header .logo a { display:inline-block}
header .logo img {display: block;}

header  .menu{ position: absolute; left: 0; top: 20px;}
header  .menu ul{margin: 0; padding: 0; list-style: none;}
header .menu ul li{display: inline-block; color: #5c5c5c; font-size: 12px; margin-right: 30px; }
header .menu ul li a{color: #5c5c5c; text-decoration: none;}
header .menu ul li a:hover{color: #0b4e9d;}
header .hotline{position: absolute; top: 20px; right: 0; text-transform: uppercase; color: #0b4e9d; font-family:  Arial, Helvetica, sans-serif; font-weight: bold; font-size: 16px; }
/*
header .search { float:right;  width:220px; margin:0 auto; margin-top:2px; margin-bottom:2px; height:28px;  border-radius: 20px;-moz-border-radius: 20px; -webkit-border-radius: 20px; border:solid 1px rgba(255,255,255,0.3);   }
header .search input[type="search"] { width:75% ; height:28px; float:left; border:0; padding:0 5px; background:none; color:#fff; }
header .search input[type="submit"] { width:25px; height:28px; float:left; background: url(../images/sprite.png) -4px -173px ; margin-left:5px; opacity:0.6  }
*/

/* ===== NAV =====  */
.wr-nav { width:auto; min-height:50px;  position: relative; z-index: 999999;}
nav { margin: 0px 0px 0px 0px; position: relative; z-index: 1000; min-height:50px; width:100%; margin:0 auto;}
.nav-list { text-align: left; list-style: none; padding: 0; margin: 0; float:left; display:inline-block; min-height:50px; width:100%; text-align: center; }

.nav-item {position: relative; display: inline-block;}
.nav-item a { display: block; color: #0b4e9d; font-family: Arial, Helvetica, sans-serif; font-size: 17px; min-height:45px; line-height:45px; padding:0px 25px 0 25px;  text-align: center; -moz-transition:none;  -webkit-transition: none; -o-transition:  none; transition: none; font-weight: normal; text-transform: uppercase; font-weight: bold;}
.nav-item a.last {padding:0px 15px ;}
.nav-item > a:hover, .nav-item a.active, .nav-item:hover a{ color: #333; text-decoration: none; background: url(../images/arrow-mn.png) no-repeat  bottom center  ; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}
.nav-item:hover .nav-submenu { display: block; }
/* Navigation submenu */
.nav-submenu { display: none; position: absolute; z-index:9999; left: 30px; width: 249px; list-style: none; padding: 0; margin: 0 }
.nav-submenu-item { position: relative }
.nav-submenu-item a {min-height:40px; line-height:40px; font-size:14px; background: rgba(26,61,113,0.9)!important; border:none!important; border-bottom: 1px solid #3c649f!important; border-left:none!important; display: block; padding: 0px 10px; text-align: left; text-transform: none; color:#fff !important ;  -moz-transition:all 0.3s ease-in-out 0s;  -webkit-transition: all 0.3s ease-in-out 0s; -o-transition:  all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.nav-submenu-item a:hover { background: rgba(67,115,185,0.9)!important; text-decoration: none; color: #fff !important; padding-left:15px;  }
.nav-submenu2 { display: none; position: absolute; z-index:9999; left: 100%; top: 0; width: 100%; list-style: none; padding: 0; margin: 0 }
.nav-submenu-item:hover .nav-submenu2 { display: block }
.nav-submenu-item2 a { background: rgba(51,105,184,0.9)!important; border:none;  border-bottom: 1px solid #987bd6; border-left:none!important; display: block; padding: 0px 10px; text-align: left ; color:#fff !important}
.nav-submenu-item2 a:hover {background: rgba(67,115,185,0.9)!important; text-decoration: none; color: #fff !important ; }

.banner { margin: 0 auto; display: block; z-index: 100; }

/*===========HOME PRO =========*/
.home-product{width: 98%; margin: 0 auto;  padding: 20px 0; }
.home-product ul{margin: 0 auto; width: 100%; list-style: none;}
.home-product ul li{background: #fff; width: 28.3%; margin: 0 1%; float: left; margin-bottom: 20px; padding: 1.5%; position: relative;}
.home-product ul li .left-ct{width: 60%; float: left;}
.home-product ul li .left-ct h4{font-family:  Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; margin: 0; padding: 0 0 10px 0; color: #0b4e9d; line-height: 24px;}
.home-product ul li .left-ct p{font-size: 13px; padding-bottom: 10px;}
.home-product ul li .pic{width: 35%; float: right;}
.home-product ul li .pic img:hover{opacity: 0.7;}
.home-product ul li a.link{border: 1px solid #e5e5e5; text-align: center; padding: 5px 15px;  color: #5c5c5c; text-transform: uppercase; font-size: 13px; border-radius: 3px;}
.home-product ul li a.link:hover{background: #0b4e9d; color: #fff; text-decoration: none;}

/*===========  Project =========*/
.project{width: 100%; margin: 0; padding: 0;}
.project ul { list-style:none; width:100%; position:relative; margin:0px; padding:0;}
.project li { float:left; width:20.5%; margin:20px 2% 20px 0px; text-align: left; color:#5c5c5c; font-size:13px; background: #fff; padding: 1.5%;}
.project li:nth-child(4n){ margin-right:0px}
.project li p { text-transform:none; font-weight:normal; font-size:14px; text-transform:  normal;   margin: 0 auto 15px;}
.project li a.more {  display: block; margin: 0 auto; padding: 10px 0; background: #00b9f9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; color: #fff; text-transform: uppercase; text-align: center;}
.project li a.more:hover {background: #0b4e9d; display: block; margin: 0 auto; text-decoration: none;}
.project li .image img { width:100%; -moz-transition: all 0.3s ease 0s;  -webkit-transition:  all 0.3s ease 0s; -o-transition:  all 0.3s ease 0s; }
.project li .image:hover { opacity: 0.7; }
.project li h4{font-family:  Arial, Helvetica, sans-serif; font-size: 15px; font-weight: normal; margin: 0; padding: 15px 0 0 0; color: #0b4e9d; line-height: 24px; font-weight: bold; }


/*===========  introduction =========*/
.introduction-wr{width: 100%; background: url(../images/bg-about.jpg) no-repeat top center; padding: 100px 0; text-align: center;} 
.introduction-wr h1{font-size: 72px; color: #fff; font-weight: normal; text-transform: none; font-family: 'robotolight', Arial, Helvetica, sans-serif;}
.introduction-wr p{width: 70%; color: #fff; margin: 0 auto;}
.introduction-wr a.more {width: 120px;  display: block; margin: 20px auto; padding: 10px 0; background: #00b9f9; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; color: #fff; text-transform: uppercase; text-align: center;}
.introduction-wr a.more:hover {background: #0b4e9d; display: block; margin: 20px auto; text-decoration: none;}


/*===========  Product detail =========*/
.subpage .col-left{width: 49%; float: left; margin: 20px  0;}
.subpage .col-left .pro-detail{width: 100%; margin: 0 0 20px 0; padding: 0;}
.subpage .col-left .pro-detail .gallery{width:98%; background: #fff;  float: left;  padding: 1%;}
.subpage .col-right{width: 49%; float: right; margin: 20px  0;}

/*===========  bottom =========*/
.bottom{width: 100%; margin: 0; padding: 30px 0; background: #fff;}
.bottom .box{ width: 23.5%; float : left;  margin: 0 2% 0 0;}
.bottom .box h4{font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; margin: 0 0 10px 0; padding: 0; text-transform: uppercase;}
.bottom .box ul{margin: 0; padding: 0; list-style: none;}
.bottom .box ul li{display: block; font-size: 12px; margin: 0 0 5px 0;}
.bottom .box ul li a{color: #5c5c5c; }
.bottom .box ul li a:hover{color: #0b4e9d; text-decoration: none;  font-weight: bold; }
.bottom .box:nth-child(4n){ margin-right:0px}
.bottom .contact-info{border-top: 1px solid #cdcdcd; padding: 10px 0; margin: 20px 0 0 0;}
.bottom .contact-info .items{ width: 23.5%; float : left;  margin: 0 2% 0 0;}
.bottom .contact-info .items .icon{float: left; width: 39px; height: 39px; float: left; margin: 0 10px 0 0;}
.bottom .contact-info .items .info{float: left; margin: 7px 0 0 0;}
.bottom .contact-info .items .info span{font-size: 20px; font-weight: bold;}
.bottom .contact-info .items-add{width: 23.5%; float: right;}
.bottom .contact-info .items-add .icon{float: left; width: 39px; height: 39px; float: left; margin: 0 10px 0 0;}
.bottom .contact-info .items-add .info{float: left; margin: 0;}

/*=========== Footer =========*/
footer{width: 100%; margin: 0; padding: 10px 0;}
footer .copyright{ text-align:left; width: 50%; font-size: 12px; margin-top: 10px; line-height: 18px; float: left;}
footer .copyright p { margin-bottom:0px; color:#fff;}
footer .copyright p span.claw { width:16px; height:18px; background: url(../images/sprite.png) -5px -49px ; display:inline-block; } 
footer .copyright a{color: #5c5c5c; text-decoration: none; }
footer .copyright a:hover{color:#004db5; text-decoration: none;}
footer .social{width: 23.5%; float: right;}
footer .social ul{margin: 0; padding: 0; list-style: none;}
footer .social ul li{display: inline-block;}
footer .social ul li img{ -moz-transition: all 0.3s ease 0s;  -webkit-transition:  all 0.3s ease 0s; -o-transition:  all 0.3s ease 0s;}
footer .social ul li img:hover{opacity: 0.5;}


.bottom .box ul.contact-home{list-style: none; margin: 0; padding: 0;}
.bottom .box ul.contact-home li{margin-bottom:10px; list-style:none; text-align:left; position:relative;}

.bottom .box ul.contact-home .input{width: 70%; border-radius: 4px; background:rgba(255,255,255,0.5); color: #fff; border: none; padding: 0 0 0 5px; }
.bottom .box ul.contact-home .textarea {  width: 70%;  background:rgba(255,255,255,0.5);  height:48px; padding: 5px 0 0  5px; border: none; color: #fff;}
.bottom .box ul.contact-home .button{background: #4168aa; border-radius: 4px; color: #fff; text-transform: uppercase; font-family: 'EMprintW04Semibold', Helvetica, Arial, sans-serif; }
.bottom .box ul.contact-home .button:hover{background: #000;}

/* ====== BACK TO TOP ===== */
.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; line-height:22px; bottom: 50px; right: 20px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); overflow: hidden;  white-space: nowrap; background: rgba(214, 214, 214, 1) url(../images/sprite.png) 4px -132px  ;  visibility: hidden;  opacity: 0;  -webkit-transition: opacity .3s 0s, visibility 0s .3s;  -moz-transition: opacity .3s 0s, visibility 0s .3s;  transition: opacity .3s 0s, visibility 0s .3s;  cursor:pointer;  z-index:9999;  color:#000;  text-align:center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.cd-top a { text-decoration:none;}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible; opacity: 0.6; }
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .7; }
.no-touch, .cd-top:hover {   opacity: 1;}


.paging{width: auto; margin: 0 auto 10px auto;}
.paging ul{margin: 0; padding: 0; list-style: none;  float: right;}
.paging ul li{
    display: block;
    float: left;
    margin-left: 5px;
    }
.paging ul li a{background: url(../images/icon_paging.png) no-repeat; width: 26px; height: 22px; text-align: center; color: #aaaaaa; display: block; padding-top: 2px;}
.paging ul li a:hover, .paging ul li a.current{background: url(../images/icon_paging_hover.png) no-repeat; width: 26px; height: 24px; text-align: center; color: #000;}


.contact_form{ display:block; width: 90%; margin:  0 auto;}
.contact_form ul{padding:  0; margin: 0; list-style: none}
.contact_form li{margin-bottom:5px; list-style:none;}
.contact_form label{float:left; width: 120px; }
.contact_form .inputText{width: 70%; border:1px #8e8e8e solid; background:white;height:24px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
.contact_form .textarea{width: 70%; resize: none;overflow-y: auto; border:1px #8e8e8e solid; background:white;  font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
.contact_form .button{margin-left: 120px !important; }
.contact_form .note{color:#ff0000; margin-left:}
.contact_form .submit,.contact_form .cancel{background: #ff0000; width:80px; height:35px; text-align:center;color:#fff; border:none;line-height:22px; cursor:pointer; text-transform:uppercase; margin-right:10px;}
.contact_form .submit:hover,.contact_form .cancel:hover{background: #a6cd55;}
.contact_address {
    margin: 20px 0;
    clear: both;
    display: block;
}
.container img {
  max-width: 100% !important;
  height:auto !important;
}