@import url('../fontface/fontface.css');
@import url('hover.css');
@import url('../font-awesome/css/font-awesome.min.css');

/*Reset*/
h1,h2,h3,h4,h5,h6,p,ul,ol,li { margin:0; padding:0; font-weight:normal; }
/*{ margin:0; padding:0; font-weight:normal; list-style:none; }*/

body { margin:0; padding:0; font-family:Arial, Tahoma; font-size:12px; color:#fff; font-size-adjust:none;
background: #d7d7d7; /* Old browsers */
background: -moz-linear-gradient(left,  #d7d7d7 0%, #eeeeee 50%, #d7d7d7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #d7d7d7 0%,#eeeeee 50%,#d7d7d7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #d7d7d7 0%,#eeeeee 50%,#d7d7d7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#d7d7d7',GradientType=1 ); /* IE6-9 */
}

div { margin:0; padding:0; }

a { color:#000; text-decoration:none; outline:none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

.clear { clear:both; }

#wrapper { margin:0; padding:0; background:#f5f5f5 !important;
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
 }
#header { margin:0; padding:0; }
.header-bar { padding:18px 0; background:#000000;  }
.header { width:960px; margin:0 auto; padding:30px 0; }
.headerL { float:left; }
.headerR { float:right; color:#aaa; }
.headerR a { color:#aaa; }
.headerR a:hover { color:#fff; }

.mn { margin:0; padding:4px 0 0 0; }
.mn ul { margin:0 0 0 -25px; padding:0; }
.mn ul li { float:left; margin:0 0 0 25px; padding:0; list-style:none; font-size:16px; }
.mn ul li a { display:block; color:#aaa; text-transform:uppercase; }
.mn ul li a:hover, .mn ul li a.default { color:#fff; }

.logo { float:left; margin:0; padding:0; }
.txtheadtop { float:right; font-size:60px; letter-spacing:1px; color:#000; text-transform:uppercase; padding-top:10px; }

.content { width:960px; margin:0 auto; padding:0 0 60px 0; }

.banner { height:440px; margin-bottom:30px; background:url(../images/bg/bg-banner.jpg) no-repeat top center; border-radius:8px; }
.banner ul { margin:0; padding:0; }
.banner ul li { margin:0; padding:0; list-style:none; }

.txthead { margin:0 0 30px 0; padding:0 0 0 30px; border-bottom:2px solid #000000; }
.txthead h1 { display:table; background:#000000; font-size:24px; color:#fff; text-transform:uppercase; padding:12px 18px 10px 18px; border-radius:8px 8px 0 0; letter-spacing:1px; }
.txthead h1 span { color:#aaaaaa; }
.txthead h1 i { margin:0; padding:0 10px 0 5px; }

.thumbpro { margin:0; padding:0; }
.thumbpro ul { margin:-20px 0 0 -20px; padding:0; }
.thumbpro ul li { float:left; width:225px; margin:20px 0 0 20px; padding:0; list-style:none; }
.thumbpro ul li:nth-child(4n+1) { clear:left; }

.thumbpro ul li a { display:block; color:#000; }
.thumbpro ul li a:hover .thumbpro-hover { opacity:1; color:#fff; }
.thumbpro-hover { opacity:0; position:absolute; top:0; left:0; z-index:8888px; width:100%; height:100%; background:rgba(0,0,0,0.5); text-align:center; border-radius:8px; -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }
.thumbpro-hover i { padding:65px 0 0 0; }
.thumbpro-img { width:225px; min-height:127px; margin:0; padding:0; position:relative; border-radius:8px; overflow:hidden; background:#222; }
.thumbpro-img img { width:100%; height:auto; display:block; }
.thumbpro h1 { font-size:14px; font-weight:bold; padding:15px 0 5px 0; text-transform:uppercase; }

/*Product*/
.catpro { margin:0; padding:0; }
.catpro ul { margin:-20px 0 0 -20px; padding:0; }
.catpro ul li { float:left; width:470px; height:278px; margin:20px 0 0 20px; padding:0; list-style:none; overflow:hidden; border-radius:8px; }
.catpro ul li a { display:block; width:100%; height:278px; background:#222; border-radius:8px; position:relative; overflow:hidden; }
.catpro-hover { opacity:0; position:absolute; top:0; left:0; z-index:8888; width:100%; height:100%; background:rgba(0,0,0,0.75); text-align:center; text-transform:uppercase; color:#fff; font-size:30px; letter-spacing:1px; -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; -ms-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; border-radius:8px; }
.catpro-hover p { padding-top:120px; letter-spacing:1px; }
.catpro ul li a:hover { cursor:pointer; }
.catpro ul li a:hover .catpro-hover { opacity:1; }

.pro { margin:0; padding:0; }
.proL { float:left; width:470px; }
.proL-img { margin:0; padding:0; border-radius:8px; overflow:hidden; position:relative; }
.proL-img img { width:100%; height:auto; display:block; }
.proL-img:hover .thumbpro-hover { opacity:1; color:#fff; }
.proL-img .thumbpro-hover i { padding:140px 0 0 0; }
.proR { float:right; width:470px; color:#222; font-size:14px; }
.proR h1 { font-size:25px; font-weight:bold; text-transform:uppercase; color:#000; padding-bottom:0; }
.proR h2 { font-size:16px; padding-bottom:10px; }
.proR h3 { margin:0; padding:0; font-weight:bold; color:#000; text-decoration:underline; }
.proR h4 { margin:0; padding:0 0 10px 0; font-size:20px; }
.proR ul { margin:-5px 0 0 0; padding:10px 0 10px 20px; }
.proR ul li { margin:0; padding:5px 0 0 0; }

.back { width:100%; margin:30px 0 0 0; padding:10px 0 0 0; border-top:2px solid #000; text-transform:uppercase; }
.back a { display:table; color:#222; }

/*Contact*/
.contact { margin:0; padding:0; background:#222; border-radius:8px; overflow:hidden; }
.contact a { color:#fff; }
.conL { float:left; width:400px; margin:0; padding:40px; color:#aaa; font-size:14px; }
.conL h1 { font-size:26px; margin:0; padding:0; text-transform:uppercase; color:#fff; }
.conR { float:right; width:480px; height:414px; margin:0; padding:0; text-align:right; background:#fff; }

.btn-map { margin:0; padding:18px 0 0 0; }
.btn-map ul { margin:0 0 0 -20px; padding:0; }
.btn-map ul li { float:left; width:190px; margin:0 0 0 20px; padding:0; list-style:none; border-radius:8px; overflow:hidden; }
.btn-map ul li a { display:block; width:100%; margin:0; padding:15px 0; text-align:center; text-transform:uppercase; font-size:18px; background:#aaa; color:#222; }
.btn-map ul li a i { padding-bottom:18px; }
.btn-map ul li a:hover { background:#fff; }

.btn-contact { margin:0; padding:15px 0 0 0; }
.btn-contact a { display:block; width:100%; text-align:center; margin:0; padding:10px 0; color:#222; background:#aaa; font-size:18px; text-transform:uppercase; border-radius:8px; overflow:hidden; }
.btn-contact a i { padding:0 5px 0 0; }
.btn-contact a:hover { background:#fff; }

/*Footer*/
#footer { margin:0; padding:0; position:relative; }
.sitemap-bg { width:100%; margin:0; padding:40px 0;
background: #d8d8d8; /* Old browsers */
background: -moz-linear-gradient(top,  #d8d8d8 0%, #eeeeee 50%, #d8d8d8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d8d8d8 0%,#eeeeee 50%,#d8d8d8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d8d8d8 0%,#eeeeee 50%,#d8d8d8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-9 */
}
.sitemap { width:960px; margin:0 auto; padding:0; } 
.sitemap a { color:#666666; }
.sitemap a:hover, .sitemap a.default { color:#000; }
.sitemap-box { float:left; width:240px; }
.sitemap-box p { font-size:16px; font-weight:bold; padding-bottom:7px; text-transform:uppercase; }
.sitemap ul { margin:-2px 0 0 0; padding:0; }
.sitemap ul li { margin:2px 0 0 0; padding:0; list-style:none; }

.footer-bg { background:#000; padding:20px 0; }
.footer { width:960px; margin:0 auto; padding:0; text-align:center; color:#aaa; text-transform:uppercase; font-size:10px; }
.footer span { color:#fff; }

.btn-ontop { position:absolute; top:-50px; right:10px; z-index:8888; }
.btn-ontop a { display:block; width:40px; height:40px; border-radius:8px; background:#d8d8d8; color:#000; text-align:center; }
.btn-ontop a:hover { background:#000; color:#fff; }
.btn-ontop i { padding:5px 0 3px 0; }