@charset "utf-8";
/* Reset ================================================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, hr {margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after{content:''; content: none;}
:focus {outline: 0;}
fieldset{border: 0; margin: 0; padding: 0;}
ins{text-decoration: none;}
del{text-decoration: line-through;}
table{border-collapse: collapse; border-spacing: 0;}
a {color:#2292d0; text-decoration: none;}
a:hover{color:#2292d0;}
img{ border:0;}
body{margin:0; padding: 0; font-family: 'Roboto Condensed',"Helvetica Neue", Helvetica, sans-serif; font-weight: 400; font-size: 15px; color: #444;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.wrapper{position: relative; width:1024px; margin: 0 auto;}
.wrapperin{position: relative; float: left; width: 100%; background: #f0f0f0;}
.header{position: relative; float: left; width:100%; height: 210px; background: url(../images/header.jpg) no-repeat;}
.logo{position: absolute; width:410px; height: 105px; left: 40px; top: 54px; background:url(../images/logo.png) no-repeat;}
.menu{position: relative; float: left; width: 100%; height: 60px; background: #212121;}
.search{ position: relative; float: right; margin: 18px 24px 0 0;}
.search input.text{ display: inline-block; width: 170px; height: 24px; line-height: 24px; background: #FFF; border: 0; font-size: 14px; color: #6e6e6e; font-style: italic; padding-left: 8px; vertical-align: middle;}
.btn-s{display: inline-block; width: 30px; height: 26px; background: url(../images/btn-s.png) no-repeat; margin-left: 5px; vertical-align: middle;}
.slider{ position: relative; float: left; width: 100%;}
.main{position: relative; float: left; width: 100%; margin: 50px 0 0 0;}
.about-img{ position: relative; float: left; width: 310px; height: 280px; padding: 12px; background: #FFF;box-shadow: 0px 0px 8px rgba(0,0,0,0.14); margin-left: 40px;}
.about-img img{ max-width: 100%;}
.about-desc{ position: relative; float: right; width: 575px; height: 304px; background: #FFF;box-shadow: 0px 0px 8px rgba(0,0,0,0.14); margin-right: 40px;}
.about-desc .about-title{ width: 100%; height: 40px; background: #212121; color: #FFF; line-height: 38px; text-indent: 10px; font-size: 18px; font-weight: 400;}
.about-desc p{ padding: 20px 20px 0 20px; color: #444; line-height: 20px;}
.about-desc p .more{color: #ed2c33; text-decoration: underline;}
.poweredby{ position: relative; float: left; width: 100%; margin: 50px 0 0 0;}
.poweredby .title{ display: block; padding: 0 40px; color: #777; text-transform: uppercase; font-weight: 400; font-size: 14px;}
.poweredby .partner{ display: block; margin: 5px 40px;background: #FFF; border: 1px #e9e9e9 solid; padding: 20px 20px; text-align: center;}
.poweredby .partner img{ display: inline-block; vertical-align: middle; padding: 20px 30px;}
.footer{position: relative; float: left; width: 100%; background: #e0e0e0; border-top: 3px #bdbdbd solid; padding: 30px 0; text-align: center; margin: 50px 0 0 0; font-size: 12px;}
.footer ul{ width: 100%; padding-bottom: 30px;}
.footer ul li{ display: inline-block; margin: 0px 10px;}
.footer ul li a{color: #242424; text-decoration: underline; text-transform: uppercase;}
.footer ul li a:hover{text-decoration: none; color: #000;}
.footer p{padding-bottom: 8px;}
.footer p a{ color: #242424; text-decoration: underline;}
/*------company-news-contact-------*/
.breadcrumb, .company-main, .news-main, .contact-main, .products-main{ position: relative; float: left; width: 100%; margin: 30px 0 0 0;}
.breadcrumb ul{display: block; padding: 0px 40px;}
.breadcrumb li{display: inline-block; padding-right: 5px; font-size: 14px; text-transform: uppercase;}
.breadcrumb li a{ color: #444;}
.breadcrumb li a.active{ color: #ed1c24;}
.breadcrumb li a:hover{text-decoration: underline;}
.company-main h1{ font-size: 24px; color: #444; text-transform: uppercase; font-weight: 400; margin: 0 40px; border-bottom: 1px #DDD solid; padding-bottom: 10px;}
.company-main .content{ display: block; padding:35px 40px 40px 40px; color: #4e4e4e; line-height: 18px;}
.company-main .content p{padding-top: 14px;}
.company-main .content img{ float: left; padding:14px 40px 30px 0;}
.news-main .list-news{ display: block; margin: 0 40px; background: #FFF; padding-bottom: 30px;box-shadow: 0px 0px 8px rgba(0,0,0,0.14);box-sizing: border-box;}
.news-main .list-news ul li{ display: inline-block; width: 49%; margin: 35px 0 20px 0; color: #4e4e4e; line-height: 18px;}
.news-main .list-news ul li .thumb{ float: left; width: 170px; max-width: 170px; padding: 0 20px;}
.news-main .list-news ul li .desc{ float: left; width: 50%; max-width: 50%;}
.news-main .list-news ul li .desc h4{ font-size: 14px; font-weight: 400; padding-bottom: 14px;}
.news-main .list-news ul li .desc h4 a{ color: #0082be; text-decoration: none;font-size: 16px;}
.news-main .list-news ul li .desc h4 a:hover{text-decoration: underline;}
.news-main .news-details{ display: block; margin: 0 40px; background: #FFF; padding: 30px;box-shadow: 0px 0px 8px rgba(0,0,0,0.14);box-sizing: border-box;}
.news-main .news-details h1{ font-size: 24px; padding: 10px 30px 10px 0; font-weight: 400; color: #4e4e4e;}
.news-main .news-details .date{ font-size: 14px; color: #777;}
.news-main .news-details img{max-width: 100%;}
.news-main .news-details p{ padding-top: 18px; line-height: 18px;}
.news-main .news-details p.center{text-align: center;}


.panaging{ position:relative; float: left; width: 100%; padding:25px 0; text-align: center;}
.panaging li{ display: inline-block; margin: 0 3px;}
.panaging li a{ padding:4px 10px; border:1px #DDD solid; border-radius: 3px; background: #FFF; color: #4e4e4e;}
.panaging li a.active, .panaging li:hover a{ background: #212121; color: #FFF; border-color:#212121;}
.contact-main .map{ display: block; padding:0 40px 40px 40px;}
.contact-main .map img{max-width: 100%;}
.contact-main .form-contact{ display: block; padding:40px;}
.contact-main .form-contact-left{ float: left; width: 50%; padding-top: 80px; color: #444; line-height: 24px;}
.contact-main .form-contact-left h4{ font-size: 16px; font-weight: 400; padding-bottom: 18px;}
.contact-main .form-contact-left a{color: #444; text-decoration: underline;}
.contact-main .form-contact-right{ float: right; width: 300px;}
.contact-main .form-contact-right ul li{ float: left; width: 100%; margin: 15px 0 0 0;}
.contact-main .form-contact-right ul li input.text{ box-sizing:border-box; width: 100%; background: #FFF; border:1px #d3d3d3 solid; height: 35px; line-height: 35px; text-indent: 10px; font-size: 14px; color: #a1a1a1;}
.contact-main .form-contact-right ul li textarea{ box-sizing:border-box; background: #FFF; border:1px #d3d3d3 solid; padding: 10px; font-size: 14px; color: #a1a1a1; width: 100%;}
.btn-send{display: inline-block; color: #FFF; background: #212121; padding: 10px 30px; border-radius: 3px; text-transform: uppercase; border: 0; cursor: pointer;}
.btn-send:hover{background: #000; color: #FFF;}
.contact-main .form-contact-right ul li input.error, .contact-main .form-contact-right ul li textarea.error{border-color: #ed1c24;}
.contact-main .form-contact-right ul li .message-error, .contact-main .form-contact-right ul li .message-success{ color: #ed1c24; font-size: 12px; padding-top: 5px;}
.contact-main .form-contact-right ul li .message-success{ color: #48ab00;}
.products-main .details{ display: block; padding:0 40px 40px 40px;}
.image-featrue{ position: relative; float: left; width: 100%; background: url(../images/shadow.png) no-repeat bottom center; padding-bottom: 14px;}
.image-featrue img{max-width: 100%;}
.product-info{ position: relative; float: left; width: 100%; margin: 40px 0 0 0;}
.product-info-header{ position: relative; float: left; width: 100%;}
.product-info-header .prd-image{ position: relative; float: left; width: 300px; padding: 12px; background: #FFF;box-shadow: 0px 0px 8px rgba(0,0,0,0.14); margin-right: 30px;}
.product-info-header .prd-image img {display: block; max-width: 100%; margin: 0 auto;}
.product-info-header .prd-desc{ position: relative; float: left; max-width: 65%;}
.product-info-header .prd-desc h2{ font-size: 20px; font-weight: 400; text-transform: uppercase; color: #4e4e4e; padding: 14px 0;}
.product-info-header .prd-desc p{ padding-top: 14px; line-height: 20px;}
.product-info .content{ float: left; width: 100%; margin-top: 30px;}
.all-model{ position: relative; float: left; width: 100%; margin: 30px 0 0 0;}
.all-model h2{font-size: 18px; font-weight: 400; color: #ed1c24; padding-bottom: 30px;}
.all-model li{ float: left; width: 33%; margin-bottom: 18px;}
.all-model li a{ color: #0077b4; text-decoration: none; background: url(../images/icon-pdf.png) no-repeat left center; padding-left: 20px;}
.all-model li a:hover{ color: #00547f;}
.searchlist > li {padding: 10px 0;}
.searchlist > li > p {padding-top: 0;}

/*------Responsive-----*/
@media screen and (min-width: 768px) and (max-width: 960px){
.wrapper{ width: 96%; margin: 0 2%;}
.logo{ background-size: 50%; top: 40%; left: 20px;}
.main, .poweredby{ margin-top: 30px;}
.header{ height: 180px;}
.footer ul li{ font-size: 10px;}
.about-img, .about-desc{ width: 96%; height: auto; box-sizing: border-box; margin-left: 5px;}
.about-img{ padding: 4%;}
.about-desc{ float: left; margin-left: 5px; padding-bottom: 15px;}
.about-desc p{ font-size: 13px; line-height: 18px;}
.poweredby .title{padding: 0 5px;}
.poweredby .partner{ margin: 5px; box-sizing: border-box; width: 96%;}
.poweredby .partner img{padding: 20px 0; max-width: 200px;}
.footer{ font-size: 11px;}
.search{ display: none;}
.company-main h1, .news-main .list-news, .news-main .news-details{ margin:0 10px; padding-top: 30px;}
.breadcrumb ul{ padding: 0 10px;}
.company-main .content{padding: 35px 10px 40px 10px;}
.company-main .content img{padding: 14px 0px 30px 0; margin: 0 auto;}
.news-main .list-news ul li{ width: 100%; max-width: 100%; margin-bottom: 15px; margin-top: 0;}
.news-main .list-news ul li .desc{ width: 90%; max-width: 90%; margin: 10px 5%;}
.contact-main .map, .contact-main .form-contact, .products-main .details{ padding: 0 10px 20px 10px;}
.contact-main .form-contact-left{ width: 100%; padding-top: 30px;}
.contact-main .form-contact-right{ width: 100%; float: left;}
.product-info-header .prd-image{ margin: 0;}
.product-info-header .prd-desc{ max-width: 100%;}
.all-model li{ width: 100%;}
}
@media screen and (min-width: 600px) and (max-width: 768px){
.wrapper{ width: 96%; margin: 0 2%;}
.logo{ background-size: 50%; top: 40%; left: 20px;}
.main, .poweredby{ margin-top: 30px;}
.header{ height: 180px;}
.footer ul li{ font-size: 10px;}
.about-img, .about-desc{ width: 96%; height: auto; box-sizing: border-box; margin-left: 5px;}
.about-img{ padding: 4%;}
.about-desc{ float: left; margin-left: 5px; padding-bottom: 15px;}
.about-desc p{ font-size: 13px; line-height: 18px;}
.poweredby .title{padding: 0 5px;}
.poweredby .partner{ margin: 5px; box-sizing: border-box; width: 96%;}
.poweredby .partner img{padding: 20px 0; max-width: 200px;}
.footer{ font-size: 11px;}
.search{ display: none;}
.company-main h1, .news-main .list-news, .news-main .news-details{ margin:0 10px; padding-top: 30px;}
.breadcrumb ul{ padding: 0 10px;}
.company-main .content{padding: 35px 10px 40px 10px;}
.company-main .content img{padding: 14px 0px 30px 0; margin: 0 auto;}
.news-main .list-news ul li{ width: 100%; max-width: 100%; margin-bottom: 15px; margin-top: 0;}
.news-main .list-news ul li .desc{ width: 90%; max-width: 90%; margin: 10px 5%;}
.contact-main .map, .contact-main .form-contact, .products-main .details{ padding: 0 10px 20px 10px;}
.contact-main .form-contact-left{ width: 100%; padding-top: 30px;}
.contact-main .form-contact-right{ width: 100%; float: left;}
.product-info-header .prd-image{ margin: 0;}
.product-info-header .prd-desc{ max-width: 100%;}
.all-model li{ width: 100%;}
}
@media screen and (min-width: 480px) and (max-width: 600px){
.wrapper{ width: 96%; margin: 0 2%;}
.logo{ background-size: 50%; top: 40%; left: 20px;}
.main, .poweredby{ margin-top: 30px;}
.header{ height: 180px;}
.footer ul li{ font-size: 10px;}
.about-img, .about-desc{ width: 96%; height: auto; box-sizing: border-box; margin-left: 5px;}
.about-img{ padding: 4%;}
.about-desc{ float: left; margin-left: 5px; padding-bottom: 15px;}
.about-desc p{ font-size: 13px; line-height: 18px;}
.poweredby .title{padding: 0 5px;}
.poweredby .partner{ margin: 5px; box-sizing: border-box; width: 96%;}
.poweredby .partner img{padding: 20px 0; max-width: 200px;}
.footer{ font-size: 11px;}
.search{ display: none;}
.company-main h1, .news-main .list-news, .news-main .news-details{ margin:0 10px; padding-top: 30px;}
.breadcrumb ul{ padding: 0 10px;}
.company-main .content{padding: 35px 10px 40px 10px;}
.company-main .content img{padding: 14px 0px 30px 0; margin: 0 auto;}
.news-main .list-news ul li{ width: 100%; max-width: 100%; margin-bottom: 15px; margin-top: 0;}
.news-main .list-news ul li .desc{ width: 90%; max-width: 90%; margin: 10px 5%;}
.contact-main .map, .contact-main .form-contact, .products-main .details{ padding: 0 10px 20px 10px;}
.contact-main .form-contact-left{ width: 100%; padding-top: 30px;}
.contact-main .form-contact-right{ width: 100%; float: left;}
.product-info-header .prd-image{ margin: 0;}
.product-info-header .prd-desc{ max-width: 100%;}
.all-model li{ width: 100%;}
}
@media screen and (min-width: 320px) and (max-width: 480px){
.wrapper{ width: 96%; margin: 0 2%;}
.logo{ background-size: 50%; top: 40%; left: 20px;}
.main, .poweredby{ margin-top: 30px;}
.header{ height: 180px;}
.footer ul li{ font-size: 10px;}
.about-img, .about-desc{ width: 96%; height: auto; box-sizing: border-box; margin-left: 5px;}
.about-img{ padding: 4%;}
.about-desc{ float: left; margin-left: 5px; padding-bottom: 15px;}
.about-desc p{ font-size: 13px; line-height: 18px;}
.poweredby .title{padding: 0 5px;}
.poweredby .partner{ margin: 5px; box-sizing: border-box; width: 96%;}
.poweredby .partner img{padding: 20px 0; max-width: 200px;}
.footer{ font-size: 11px;}
.search{ display: none;}
.company-main h1, .news-main .list-news, .news-main .news-details{ margin:0 10px; padding-top: 30px;}
.breadcrumb ul{ padding: 0 10px;}
.company-main .content{padding: 35px 10px 40px 10px;}
.company-main .content img{padding: 14px 0px 30px 0; margin: 0 auto;}
.news-main .list-news ul li{ width: 100%; max-width: 100%; margin-bottom: 15px; margin-top: 0;}
.news-main .list-news ul li .desc{ width: 90%; max-width: 90%; margin: 10px 5%;}
.contact-main .map, .contact-main .form-contact, .products-main .details{ padding: 0 10px 20px 10px;}
.contact-main .form-contact-left{ width: 100%; padding-top: 30px;}
.contact-main .form-contact-right{ width: 100%; float: left;}
.product-info-header .prd-image{ margin: 0;}
.product-info-header .prd-desc{ max-width: 100%;}
.all-model li{ width: 100%;}
}
@media screen and (max-width: 320px){
.wrapper{ width: 96%; margin: 0 2%;}
.logo{ background-size: 50%; top: 40%; left: 20px;}
.main, .poweredby{ margin-top: 30px;}
.header{ height: 180px;}
.footer ul li{ font-size: 10px;}
.about-img, .about-desc{ width: 96%; height: auto; box-sizing: border-box; margin-left: 5px;}
.about-img{ padding: 4%;}
.about-desc{ float: left; margin-left: 5px; padding-bottom: 15px;}
.about-desc p{ font-size: 13px; line-height: 18px;}
.poweredby .title{padding: 0 5px;}
.poweredby .partner{ margin: 5px; box-sizing: border-box; width: 96%;}
.poweredby .partner img{padding: 20px 0; max-width: 200px;}
.footer{ font-size: 11px;}
.search{ display: none;}
.company-main h1, .news-main .list-news, .news-main .news-details{ margin:0 10px; padding-top: 30px;}
.breadcrumb ul{ padding: 0 10px;}
.company-main .content{padding: 35px 10px 40px 10px;}
.company-main .content img{padding: 14px 0px 30px 0; margin: 0 auto;}
.news-main .list-news ul li{ width: 100%; max-width: 100%; margin-bottom: 15px; margin-top: 0;}
.news-main .list-news ul li .desc{ width: 90%; max-width: 90%; margin: 10px 5%;}
.contact-main .map, .contact-main .form-contact, .products-main .details{ padding: 0 10px 20px 10px;}
.contact-main .form-contact-left{ width: 100%; padding-top: 30px;}
.contact-main .form-contact-right{ width: 100%; float: left;}
.product-info-header .prd-image{ margin: 0;}
.product-info-header .prd-desc{ max-width: 100%;}
.all-model li{ width: 100%;}
}