/* by Adon , CSS Document */

body{background:#fff}
.products { float:left; position:relative;width:100%; height:800px; color:#fff;}
.products .container{ position:relative; height:100%}
.products .item{ position:absolute; left:15px; top:50%;margin:-110px auto;}
.products .item .p1{ font-size:38px; line-height:45px;}
.products .item .p2{ font-size:15px; max-width:600px; margin-top:3%;}
.products-list{ float:left; width:100%; margin-top:5%;}
.products-list .list{ width:65%;}
.products-list .list li{ float:left; width:47.5%; margin-left:2.5%; margin-bottom:2.5%;border:solid 1px #efefef; text-align:center; padding-bottom:5%;}
.products-list .list li span{ display:block; font-size:18px; padding:0 25%; height:50px;}
.products-list .list li img{ max-height:350px; margin:15% 0;}
.filters-menu { width:30%;}
.filters-menu .filters-click{float:left;font-size:23px;width:100%;line-height:70px;border-bottom:solid 1px #e3e3e3;}
.filters-menu .filters-click span.click{ cursor:pointer;background:url(../img/jia.jpg) no-repeat 100% 25px;display:block;}
.filters-menu .filters-click span.on{background:url(../img/jian.jpg) no-repeat 100% 25px;}
.filters-menu .filters-click ul.down{ display:none;}
.filters-menu .filters-click ul li{ position:relative;display:block; font-size:18px;border-top:solid 1px #f2f2f2;text-indent:15px;}
.filters-menu .filters-click ul li b{ font-weight:bold;}
.filters-menu .filters-click ul li.on a{color:#b50000;}
.products-view { float:left; position:relative;width:100%; margin-top:5%;}
.products-view .products-thumb{ width:50%; text-align:center; overflow:hidden; position:relative}
.products-view .products-thumb img.pics{ max-height:689px; margin:0 auto; width:auto}
.products-view .products-item{ width:45%;}
.products-view .products-item .p1{ font-size:35px; margin-bottom:10%;}
.products-view .products-item .p2{ font-size:20px; text-transform:uppercase; margin-bottom:5%; font-weight:bold}
.products-view .products-item .p3{ font-size:15px; border-bottom:solid 1px #efefef; padding-bottom:5%; margin-bottom:5%}
.products-view .products-item ul li{ float:left; margin-right:25px; display:none}
.products-view .products-item ul{ border-bottom:solid 1px #efefef; padding-bottom:5%; margin-bottom:5%; overflow:hidden;}
.technology{ background:#fffbf2; float:left; width:100%; margin-top:10%; padding:5% 0;}
.technology .box{ max-width:920px; margin:0 auto; width:100%;}
.technology .items{ max-width:555px; margin-top:50px;}
.technology .items .p1{ font-size:28px; margin-bottom:20px;}
.technology .items .p2{ font-size:15px;}
.products-pic li{ overflow:hidden;}
.tables{ float:left; width:100%; margin:5% 0;}
.tables nav { text-align:center; margin-bottom:5%;}
.tables nav a{border:solid 2px #efefef;display:inline-block;line-height:40px; padding:0 50px;text-align:center; font-size:16px; margin:2px;}
.tables nav a:hover,.tables nav a.on{ background:#b50000; color:#fff;}
.tables table{ width:100%;text-align:center;border:solid 2px #efefef;border-right:none;border-top:none;line-height:80px;}
.tables table tr td{ border-right:solid 2px #efefef !important;border-top:solid 2px #efefef !important;}
.tables ul li{ display:none;font-size:18px;}

@media (max-width:1100px) and (min-width:769px){
.products-view .products-thumb img.pics{ width:80%;}	
}
@media (max-width:1024px){
.products-list .list li span{ height:75px;}
}
@media (max-width:768px){
.products {height: auto !important;padding:10% 0;}
.products .item{ position:static; margin:0;}
.products .item .p1{ font-size:34px;}	
.products-list .list{ width:102.5%;}
.filters-menu{ width:100%; margin-bottom:5%;}
.products-view .products-thumb{ width:100%;}
.products-view .products-item{ width:100%; margin-top:5%;}
.products-view .products-thumb img.pics{ max-height:inherit;}
.products-view .products-item .p1{ margin-top:10%;}
.technology{ padding:10% 0;}
.technology .items{ width:100%; margin-bottom:5%;margin-top:0;}
.technology .thumb{ margin:0 auto; text-align:center; display:block;float:none;}
.tables{ margin:10% 0;}
.tables nav{ margin-bottom:10%;}
.tables ul li{ font-size:16px;}
}
@media (max-width:480px){
.products {padding:15% 0;}
.products .item .p1{ font-size:26px; line-height:30px;}	
.products .item .p2{ font-size:14px; margin-top:5%}	
.products-list .list li img{ max-height:200px;}
.products-list .list li span{ font-size:14px; padding:0 10%;}
.filters-menu .filters-click{ font-size:16px;}
.filters-menu .filters-click ul li{ font-size:14px;}
.filters-menu .filters-click span{background-size:15px !important;}
.products-view .products-thumb img.pics{width:60%;}
.products-view .products-item .p1{ font-size:26px;}
.products-view .products-item ul li{ margin-right:15px;}
.products-view .products-item ul li img{ height:50px;}
.products-view .products-item .p2{ font-size:16px;}
.products-view .products-item .p3{ font-size:13px;}
.technology .items .p1{ font-size:24px;}
.technology .items .p2{ font-size:14px;}
.products-pic li img{ width:130%; max-width:130%; margin-left:-15%;}
.tables nav a{ padding:0 20px; font-size:13px;}
.tables ul li{ font-size:12px;}
.tables table{ line-height:50px;}
.products-list .list li span{ height:60px;}
}
@media (max-width:320px){
.products .item .p1{ font-size:22px; line-height:26px;}	
.products .item .p2{ font-size:13px;}	
.products-list .list{ width:100%;}
.products-list .list li img{ max-height: inherit;}
.products-list .list li{ width:100%; margin-left:0 !important; padding-bottom:10%;}
.filters-menu .filters-click{ font-size:15px; line-height:60px;}
.filters-menu .filters-click ul li{ font-size:13px;}
.products-view .products-item .p1{ font-size:22px;}
.products-view .products-item ul li{ margin-right:10px;}
.products-view .products-item ul li img{ height:45px;}
.products-view .products-item .p2{ font-size:15px;}
.products-view .products-item .p3{ font-size:12px;}
.technology .items .p1{ font-size:22px;}
.technology .items .p2{ font-size:13px;}
}