@charset "utf-8";
/* by Adon , CSS Document */

@font-face
{
font-family: Family;
src: url('../fonts/Lato-Regular.otf');
src: url('../fonts/Lato-Regular.ttf');
src: url('../fonts/Lato-Regular.woff');
} 

*{ margin:0; padding:0;}
body{ font-size:12px; font-family:Family, Tahoma, Geneva, sans-serif;color:#040000; max-width:640px; margin:0 auto;}
a{ text-decoration:none; color:#040000;}
ul,li{list-style:none}
img{ border:0; max-width:100%;}
h1,h2,h3{ font-size:12px;}
em{font-style:normal}
p{display:block;}
.left{ float:left;}
.right{ float:right;}
.clearfix{clear:both}
.container{ padding-left:5%; padding-right:5%;}
.header{ background:#fff;float:left; width:100%; border-bottom:solid 40px #ededed; position:relative; left:0; top:0; z-index:99;}
.header img{ height:68px; display:block;}
.header-fix{background:url(../img/bg.png) repeat; width:100%; position:fixed; top:0; left:0; height:100%; z-index:999; display:none;}
.header-fix .close{ position:absolute; right:55%; top:0;}
.header-fix .header-ul{ font-size:.3rem;text-transform:uppercase;position:fixed; top:0; right:0; background:#fff; height:100%; width:55%;overflow:hidden;}
.header-fix .header-ul ul{ position:relative;margin-top:68px; padding:10% 0 0 10%;overflow:hidden; border-top:solid 1px #dcdcdc;}
.header-fix .header-ul ul li { float:left; width:100%; padding-bottom:8%}
.header-fix .header-ul ul li a{ float:left; width:100%; height:100%;}
.header-fix .header-r{ position:absolute;text-align:center; right:5%; top:3%; z-index:99}
.header-fix .header-r span{ cursor:pointer;background:url(../img/click.png) no-repeat 95% center;display:block; width:80px;font-size:.26rem;}
.header-fix .header-r span.on{background:url(../img/clicks.png) no-repeat 95% center;}
.header-fix .header-r .down{ display:none;z-index:10;position:absolute; top:26px; width:100%; left:0; background:#222; color:#fff;}
.header-fix .header-r .down li{ display:block; padding:4px 0; line-height:20px;}
.header-fix .header-r .down li a{ color:#aaa;}
.slider{ text-align:center; position:relative; float:left; width:100%; overflow:hidden;}
.slider img{ display:block;}
.slider li{ width:100%; overflow:hidden;}
.index-lists { position:relative; float:left; width:100%; overflow:hidden;text-align:center;margin-top:15%;}
.index-lists .title{ text-transform:uppercase; font-size:.6rem;}
.index-lists .des{font-size:.28rem;text-transform:uppercase;margin:8% 0 10% 0;}
.index-lists .pd ul li img{ display:block}
.index-lists .pd ul li .item{ float:left; border:solid 10px #d9d9d9; padding:15% 10% 30% 10%;background:#fff;}
.index-lists .pd ul li span{ font-size:.4rem;display:block; text-transform:uppercase;}
.index-lists .pd ul li p{ display:block; font-size:14px; color:#7a7a7a; padding:15% 0; height:200px;overflow:hidden;line-height:22px;}
.index-lists .pd ul li em{ display:block; font-size:14px; border-bottom:solid 3px #eaeaea; width:140px; margin:0 auto; padding-bottom:12px;}
.index-lists .page{ position:absolute; width:135px;right:5%; bottom:5%; z-index:10}
.index-lists .page a{ margin:0 10%;}
.index-lists .page a img{ width:15px;}
.index-products { position:relative; float:left; width:100%; overflow:hidden; margin-bottom:15%;}
.index-products .title{ text-transform:uppercase; font-size:.45rem; text-align:center; margin:15% 0;}
.index-products ul li{ text-align:center;float:left; width:90%; margin:0 5%;overflow:hidden;font-size:14px; overflow:hidden;}
.index-products ul li span{ margin-top:10%;display:block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.index-products ul li p{ display:block; color:#909090; font-size:12px;margin-top:5px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.index-products .prev{ position:absolute; left:0; top:55%; z-index:9}
.index-products .prev img{ width:40px;}
.index-products .next{ position:absolute; right:0;top:55%; z-index:9}
.index-products .next img{ width:40px;}
.footer{text-align:center;float:left;width:100%;overflow:hidden; color:#909090; font-size:14px;}
.footer .footer-ad {background:#040000; padding:15% 0;}
.footer .footer-ad .p1{ color:#fff; background:#333333;border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; -o-border-radius:8px; -ms-border-radius:8px; width:100%; margin:0 auto 15% auto;max-width:215px; line-height:40px; text-align:center;}
.footer .footer-ad .p1 a{ color:#fff;}
.footer .footer-ad .p2{ font-size:.28rem;}
.footer .footer-ad .p3{ line-height:20px;}
.footer .footer-ad .p3 a{ color:#909090}
.footer .footer-ad .p3 font{ color:#fff;} 
.footer .footer-by{ background:#fff; padding:10% 0 15% 0;}
.footer .footer-by .p2{ line-height:20px; margin-top:40px;}
.footer .footer-by .p2 a{ color:#fff; text-decoration:underline}
.news{ overflow:hidden; float:left; width:100%; margin:10% 0 15% 0}
.news ul li{ display:block; margin:0 auto;width:90%;}
.news ul li .item{ margin:8% 8% 15% 8%;}
.news ul li span{ display:block; font-size:.26rem;overflow:hidden;}
.news ul li em{ display:block; font-size:12px; text-transform:uppercase}
.news ul li p{ display:block; font-size:12px; color:#7a7a7a; line-height:20px; margin:20px 0; height:60px; overflow:hidden;}
.news-view{ overflow:hidden; width:100%; float:left; padding:10% 0; margin:10% 0 15% 0;text-align:center;}
.news-view .news-title{ display:block; font-size:.4rem;}
.news-view .news-time{ display:block; font-size:12px; text-transform:uppercase; margin:10% 0 15% 0;}
.news-view .news-content{font-size:14px; color:#7a7a7a; line-height:21px;}
#box{ color:#fff; text-align:center;}
.about1{background:url(../img/about1.jpg) no-repeat center;background-size: cover;}
.about1 .p1{font-size:.7rem;letter-spacing:10px; text-transform:uppercase}
.about1 .p2{font-size:.28rem; margin-top:35px; text-transform:uppercase}
.about2{background:url(../img/about2.jpg) no-repeat center;background-size: cover;}
.about2 .p1{font-size:12px;margin:0 auto;padding-top:15%;line-height:19px;}
.about3{font-size:12px;background:url(../img/about3.jpg) no-repeat center;background-size: cover;}
.about3 .p1{margin:0 auto;line-height:19px;padding-top:15%;}
.about3 .p2{ border-bottom:solid 3px #fff; text-transform:uppercase; width:155px; margin:40px auto 0 auto; padding-bottom:10px;}
.about3 .p2 a{ color:#fff;}
.about4 { color:#040000;}
.about4 .p1{ font-size:35px;}
.about4 .p2{ font-size:16px; color:#7a7a7a; margin:55px 0 40px 0;}
.about4 .p3 a{ margin:0 15px;}
.products{ float:left; width:100%; margin:15% 0;}
.products .products-menu{ line-height:50px; float:left;font-size:.3rem;width:100%; margin:5% 0 8% 0; position:relative;}
.products .products-menu span{ color:#fff;display:block; padding-left:5%;background:url(../img/click.png) no-repeat 95% center;  border:solid 3px #cccccc;}
.products .products-menu ul{ background:#fff;display:none; position:absolute; top:56px; left:0; width:100%; right:0; margin:0 auto; z-index:10}
.products .products-menu ul li{padding:0 5%;border:solid 1px #eaeaea; display:block; text-transform:uppercase}
.products .products-menu ul li a{ color:#999999;}
.products .p1{ font-size:.6rem;}
.products .products-lists li{ float:left; width:49%; font-size:.26rem; margin-bottom:10%;position:relative;text-align:center;}
.products .products-lists li.l{ margin-right:1%}
.products .products-lists li.r{ margin-left:1%}
.products .products-lists li span{ display:block; margin:10% 0 5px 0;}
.products .products-lists li p{ color:#909090; text-transform:uppercase;}
.products .products-thumb { float:left; width:100%; margin:5% 0 15% 0;}
.products .products-thumb .products-a img{ width:121px;}
.products .products-thumb .products-a a{ float:left; width:25%; margin:2.5% 2.5% 0 0;}
.products .products-view{ overflow:hidden; margin-bottom:10%;}
.products .products-view .p2{ font-size:30px; text-transform:uppercase}
.products .products-view .p3{ font-size:20px; color:#7a7a7a;margin:30px 0;}
.products .products-view .p4{ font-size:15px; color:#7a7a7a; line-height:28px;}



@media (max-width:414px){
.slider img{ max-width:110%; width:110%; margin-left:-5%;}
}
@media (max-width:375px){
.header img{ height:60px;}	
.header-fix .close{ width:60px;}
.header-fix .header-ul ul{ margin-top:60px;}
}
@media (max-width:320px){
.header img{ height:50px;}	
.header-fix .close{ width:50px;}
.header-fix .header-ul ul{ margin-top:50px;}
.index-products ul li{ font-size:12px;}
.index-products .title{ font-size:.4rem}
.footer{ font-size:12px;}
.index-lists .pd ul li p{ font-size:12px; line-height:20px;}
}