@charset "utf-8";


#catalog{margin: 0 auto; padding: 100px 0;}
#catalog>.display{margin: 0 auto;}
#catalog>.display .list{margin: 0 auto;}
#catalog>.display .list>ul{margin: 0 auto;}
#catalog>.display .list>ul>li{display: block;float: left;width: 31.33%;margin-right: 3%; margin-bottom: 3%;background: #fff;border-radius: 5px; overflow: hidden; transition: all .35s;}
#catalog>.display .list>ul>li:nth-child(3n){margin-right: 0;}
#catalog>.display .list>ul>li>a{ position: relative; display: block;}
#catalog>.display .list>ul>li>a:after{position: absolute;z-index: 10; left: 0;top: 0;width: 100%;height: 65%; opacity: 1; background: linear-gradient(to bottom, rgba(21,74,154,0),rgba(21,74,154,0)) ;content: ''; transition: all .35s;}
#catalog>.display .list>ul>li>a .img{ position: relative;z-index: 20; text-align: center;padding: 30px;overflow: hidden;}
#catalog>.display .list>ul>li>a .img>img{width: 100%;height: auto; transition: all .8s;}
#catalog>.display .list>ul>li>a .box{ position: relative;z-index: 40; text-align: center;padding-bottom: 50px;}
#catalog>.display .list>ul>li>a .box>.tit{font-size: 3rem;transition: all .35s;}
#catalog>.display .list>ul>li>a .box>.view{ padding-top: 12px; text-align: center;transition: all .35s;}
#catalog>.display .list>ul>li>a .box>.view>span{ display: inline-block; border: 1px solid #154a9a; color: #154a9a; padding: 4px 20px;border-radius: 50px; font-size: 1.4rem; transition: all .35s;}
#catalog>.display .list>ul>li>a .box>.view>span>em{font-style: normal;vertical-align: middle;}
#catalog>.display .list>ul>li>a .box>.view>span>i{ vertical-align: middle; color: #00a687;font-size: 2rem;}
#catalog>.display .list>ul>li:hover{box-shadow: 0 3px 16px rgba(0,0,0,.1);}
#catalog>.display .list>ul>li>a:hover:hover:after{opacity: 0;}
#catalog>.display .list>ul>li>a:hover .img>img{transform: scale(1.1);}
#catalog>.display .list>ul>li>a:hover .box>.tit{transform: translateY(-40px); color: #154a9a;}
#catalog>.display .list>ul>li>a:hover .box>.view{opacity: 1;transform: translateY(-20px);}
#catalog>.display .list>ul>li>a:hover .box>.view>span{background: rgba(21,74,154,1); background: linear-gradient(to right bottom, rgba(0,165,135,1), rgba(21,74,154,1)); color: #fff; border-color: #fff;}
#catalog>.display .list>ul>li>a:hover .box>.view>span>i{color: #fff;}


#products{margin: 0 auto; padding: 100px 0;}
#products>.display .categories{ position: relative;z-index: 90; text-align: left;border-bottom: 2px solid #ddd; padding-bottom: 30px;margin: 0 auto;}
#products>.display .categories>ul>li{display: inline-block;vertical-align: middle;}
#products>.display .categories>ul>li>a{display: inline-block; margin: 0 20px 20px 0;  font-size: 1.8rem; border-radius: 30px; border: 1px solid #ddd;padding: 10px 40px; transition: all .35s;}
#products>.display .categories>ul>li>a:hover{border-color: rgba(21,74,154,1);}
#products>.display .categories>ul>li>a.active{background: rgba(21,74,154,1); background: linear-gradient(to right bottom, rgba(0,165,135,1), rgba(21,74,154,1)); color: #fff; border-color: #fff;}
#products>.display .categories>ul>li>div{display: none;}
#products>.display .son{background: #154a9a; padding: 30px 30px 10px 30px; text-align: left;}
#products>.display .son>ul{display: block;}
#products>.display .son>ul>li{display: inline-block; border: 1px solid rgba(255,255,255,.2); margin-right: 20px; margin-bottom: 20px; transition: all .35s;}
#products>.display .son>ul>li>a{ display: block; font-size: 1.4rem; color: #fff; padding: 10px 30px; transition: all .35s;}
#products>.display .son>ul>li:hover{border-color: rgba(255,255,255,.6);}
#products>.display .son>ul>li.active{background: #00a687; border-color: rgba(255,255,255,.2)}
#products>.display .list-cls{ display: block; padding: 50px 0;}
#products>.display .list-cls>ul{margin: 0 auto;}
#products>.display .list-cls>ul>li{display: block;float: left;width: 22.75%;margin-right: 3%; margin-bottom: 3%;background: #fff; border-radius: 5px; overflow:hidden;transition: all .35s;}
#products>.display .list-cls>ul>li:nth-child(4n){margin-right: 0;}
#products>.display .list-cls>ul>li>a{ position: relative; display: block;}
#products>.display .list-cls>ul>li>a:after{position: absolute;z-index: 10; right: -30px;bottom: -30px;opacity: 0; width:0; height:0; line-height: 15px; font-size: 2.8rem; color: #fff; border-width:25px; border-style:solid; border-color:transparent #00a687 #00a687 transparent;content: '+';transition: all .35s;}
#products>.display .list-cls>ul>li>a .img{text-align: center;padding: 30px;overflow: hidden;}
#products>.display .list-cls>ul>li>a .img>img{width: 100%;height: auto; transition: all .8s;}
#products>.display .list-cls>ul>li>a .box{text-align: center;padding-bottom: 50px;}
#products>.display .list-cls>ul>li>a .box>.tit{font-size: 2rem; padding:  0 20px; overflow: hidden;text-overflow:ellipsis; white-space: nowrap;transition: all .35s;}
#products>.display .list-cls>ul>li:hover{box-shadow: 0 3px 16px rgba(0,0,0,.1);}
#products>.display .list-cls>ul>li>a:hover .img>img{transform: scale(1.1);}
#products>.display .list-cls>ul>li>a:hover .box>.tit{color: #154a9a;}
#products>.display .list-cls>ul>li>a:hover:after{opacity: 1; bottom: 0;right: 0;}
#products>.display .list-pro{ display: block; padding: 50px 0;}
#products>.display .list-pro>ul{margin: 0 auto;}
#products>.display .list-pro>ul>li{ position: relative; display: block;float: left;width: 48%; margin-bottom: 3%; box-sizing: border-box;padding: 30px; background: #fff;overflow: hidden; transition: all .35s;}
#products>.display .list-pro>ul>li:after{position: absolute;z-index: 2; left: 0;top: 0; width: 5px;height: 100%; content: ''; background: #154a9a; transition: all .035s;}
#products>.display .list-pro>ul>li:before{position: absolute;z-index: 6; left: 0;bottom: 0; width: 5px;height: 0; content: ''; background: rgba(0,165,135,1);opacity: 0; transition: all .35s;}
#products>.display .list-pro>ul>li:nth-child(even){float: right;}
#products>.display .list-pro>ul>li .img{ float: left; width: 40%;text-align:left;overflow: hidden;}
#products>.display .list-pro>ul>li .img>img{transition: all 1s;}
#products>.display .list-pro>ul>li .box{ float: right; width: 60%; box-sizing:border-box; padding: 20px 0 20px 50px; text-align:left;overflow: hidden;}
#products>.display .list-pro>ul>li .box>.tit{font-size: 3rem; font-weight: bold; color: #333;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;transition: all .35s;}
#products>.display .list-pro>ul>li .box>.sub{font-size: 1.8rem; color: #666;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;transition: all .35s;}
#products>.display .list-pro>ul>li .box>.txt{ margin: 20px 0; height: 50px; font-size: 1.5rem;color: #999; line-height: 2.4rem; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
#products>.display .list-pro>ul>li .box>.view{padding-top: 20px;}
#products>.display .list-pro>ul>li .box>.view>span{display: inline-block;border: 1px solid rgba(21,74,154,1);padding: 8px 30px;font-size: 1.4rem; color: rgba(21,74,154,1); transition: all .35s;}
#products>.display .list-pro>ul>li .box>.view>span:hover{background: rgba(0,165,135,1); color: #fff; border-color: rgba(0,165,135,1);}
#products>.display .list-pro>ul>li:hover:before{height: 100%; width: 5px; opacity: 1;}
#products>.display .list-pro>ul>li:hover .img>img{transform: scale(1.1);}
#products>.display .list-pro>ul>li:hover .box>.tit{color: rgba(21,74,154,1);}
#products>.display .list-pro>ul>li:hover .box>.sub{color: rgba(21,74,154,1);}


#products>.search .keyword{text-align: center;font-size: 1.8rem; color: #888;}
#products>.search .keyword span{color: #00a687;font-weight: bold; text-decoration: underline;}
#products>.search>.list{ display: block; padding: 50px 0;}
#products>.search>.list>ul{margin: 0 auto;}
#products>.search>.list>ul>li{ position: relative; display: block;float: left;width: 22.75%; margin-right: 3%; margin-bottom: 3%; box-sizing: border-box;padding: 30px; background: #fff; transition: all .35s;}
#products>.search>.list>ul>li:nth-child(4n){margin-right: 0;}
#products>.search>.list>ul>li .img{ width: 100%;text-align:center;overflow: hidden;}
#products>.search>.list>ul>li .img>img{transition: all 1s;}
#products>.search>.list>ul>li .box{ width: 100%; box-sizing:border-box; padding: 20px; text-align:center;overflow: hidden;}
#products>.search>.list>ul>li .box>.tit{font-size: 2.8rem; font-weight: bold; color: #333;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;transition: all .35s;}
#products>.search>.list>ul>li .box>.sub{font-size: 1.6rem; color: #666;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;transition: all .35s;}
#products>.search>.list>ul>li:hover .img>img{transform: scale(1.1);}
#products>.search>.list>ul>li:hover .box>.tit{color: rgba(21,74,154,1);}
#products>.search>.list>ul>li:hover .box>.sub{color: rgba(21,74,154,1);}
#products>.search .searHeight{font-style: normal; color: #00a687;}

#products>.view{ position: relative;  margin: 0 auto; box-sizing: border-box; }
#products>.view .title{display: none;}
#products>.view .details{display: block;margin: 0 auto; padding: 50px 0;}
#products>.view .details .focus{width:36%; box-sizing: border-box;}
#products>.view .details .focus .focus-show{ position:relative; display: block; margin:0 auto;}
#products>.view .details .focus .focus-show .swiper-container{ width:100%; height:100%; margin: 0 auto;overflow: hidden;border: 8px solid #154a9a;}
#products>.view .details .focus .focus-show .swiper-slide{ position: relative; text-align: center; margin: 0 auto;}
#products>.view .details .focus .focus-show .swiper-slide>a{ position: relative;z-index: 100; display: block;}
#products>.view .details .focus .focus-show .swiper-slide>a:after{position: absolute;z-index: 90; top: 0;left: 0; width: 100%;height: 100%; background: url("../img/mask.png") no-repeat; background-position: 50% 50%; content: '';}
#products>.view .details .focus .focus-show .swiper-slide img{width:100%; max-height:100%; margin: 0 auto;  vertical-align: center;}
#products>.view .details .focus .focus-show .swiper-pagination{ display:none; text-align:center; position:relative; bottom:0;}
#products>.view .details .focus .focus-show .swiper-pagination .swiper-pagination-bullet {width: 10px;height: 10px;margin:0 3px;}
#products>.view .details .focus .focus-show .swiper-pagination .swiper-pagination-bullet-active{background:#154a9a;}
#products>.view .details .focus .focus-show .arrow-prev, #products>.view .details .focus .focus-show .arrow-next{ position:absolute; z-index:99; left:-60px; top:50%; margin-top:-20px; width:40px; height:40px; line-height: 40px; cursor: pointer; text-align: center; border-radius: 100%; background: rgba(0,0,0,.1); transition: all .35s; }
#products>.view .details .focus .focus-show .arrow-next{ left: auto; right: -60px; }
#products>.view .details .focus .focus-show .arrow-prev i, #products>.view .details .focus .focus-show .arrow-next i{ font-size: 2.4rem; color: #fff; transition: all .35s;}
#products>.view .details .focus .focus-show .arrow-prev:hover, #products>.view .details .focus .focus-show .arrow-next:hover{ background: #00a687; }
#products>.view .details .focus .focus-thumbs{width:100%; margin:30px auto;}
#products>.view .details .focus .focus-thumbs>.swiper-container{width:322px; height:80px;overflow: hidden; margin:auto; text-align:center;}
#products>.view .details .focus .focus-thumbs>.swiper-container .swiper-slide-thumb-active{border:1px solid #154a9a!important;}
#products>.view .details .focus .focus-thumbs>.swiper-container .swiper-slide{width:71px; height:71px; box-sizing: border-box; border: 1px solid #ddd;}
#products>.view .details .focus .focus-thumbs>.swiper-container img{padding:1px; width:100%; height:100%; display:block; border:1px solid transparent; cursor:pointer; box-sizing:border-box;}
#products>.view .details .box{width: 50%; text-align: left; box-sizing: border-box; padding: 50px 0;}
#products>.view .details .box>.title{ display: block; text-align: left;}
#products>.view .details .box>.title>h3{font-size: 4rem; color: #333;}
#products>.view .details .box>.title>span{display: block; font-size: 2.5rem; color: #666;padding: 10px 0;}
#products>.view .details .box>.intro{text-align: left; padding: 20px 0;}
#products>.view .details .box>.intro>.tit{text-align: left;}
#products>.view .details .box>.intro>.tit>h3{display: inline-block;background: #00a687; padding:5px 15px; color: #fff;}
#products>.view .details .box>.intro>.txt{padding-top: 10px; font-size: 1.8rem ; color: #999; line-height: 3rem;}
#products>.view .details .box>.url{text-align: left; padding: 50px 0;}
#products>.view .details .box>.url>a{ position: relative; display: inline-block;margin-right: 15px; border: 1px solid #ddd;padding: 10px 30px; font-size: 1.6rem; border-radius: 3px; color: #333;transition: all .35s;}
#products>.view .details .box>.url>a.consultation{background: #154a9a; color: #fff!important;border-color: #154a9a;font-weight: bold;}
#products>.view .details .box>.url>a.consultation>i{ float: left; font-size: 2.6rem; font-weight: normal; margin-right: 10px;}
#products>.view .details .box>.url>a:hover{color: #154a9a;border-color: #154a9a;}
#products>.view .details .box>.url>a.consultation:hover{background: #333; border-color: #333;}

#products>.view .tags{  box-sizing: border-box; margin: 0 auto; padding-top: 50px;}
#products>.view .tags .tab-nav{text-align: left; border-bottom: 1px solid #ddd; padding: 0 30px;}
#products>.view .tags .tab-nav>ul{ width: 86%; max-width: 1360px; margin: 0 auto;}
#products>.view .tags .tab-nav>ul>li{ position: relative; display: inline-block;vertical-align: top; padding: 20px 40px; transition: all .35s;}
#products>.view .tags .tab-nav>ul>li>a{ font-size: 1.8rem; font-weight: bold; color: #333; transition: all .35s;}
#products>.view .tags .tab-nav>ul>li.active:after{width: 100%;}
#products>.view .tags .tab-nav>ul>li.active:before{opacity: 1;}
#products>.view .tags .tab-nav>ul>li.active{background: #154a9a;}
#products>.view .tags .tab-nav>ul>li.active a{color: rgba(255,255,255,1);}
#products>.view .tags .tab-box{ width: 86%;max-width: 1280px; margin: 0 auto; padding: 50px 0;}
#products>.view .tags .tab-box>.tab-item{ display:none; text-align: left;}
#products>.view .tags .tab-box>.current{display: block;}
#products>.view .tags .tab-box>.tab-item>.tit{display: none;}
#products>.view .tags .tab-box>.tab-item>.con{ padding: 20px 0; font-size: 1.6rem; line-height: 2.8rem; color: #666;}
#products>.view .tags .tab-box>.tab-item>.con>p{margin-bottom: 15px;}
#products>.view .tags .tab-box>.tab-item>.con .table-container{position: relative;}
#products>.view .tags .tab-box>.tab-item>.con .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#products>.view .tags .tab-box>.tab-item>.con .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#products>.view .tags .tab-box>.tab-item>.con table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#products>.view .tags .tab-box>.tab-item>.con table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.6rem;padding:5px;}
#products>.view .tags .tab-box>.tab-item>.con img{max-width: 100%;height: auto;}

#products>.view .pageurl{ text-align: center;padding: 50px; background: #eee;}
#products>.view .pageurl .url{width: 100%;text-align: left;}
#products>.view .pageurl .url>.prev{display: block;padding: 5px 0;}
#products>.view .pageurl .url>.next{display: block;padding: 5px 0;}
#products>.view .pageurl .url a{display: block;}
#products>.view .pageurl .url a>strong{ position: relative; display: inline-block;vertical-align: center; font-size: 1.8rem; color: #231815; padding-right: 10px; margin-right: 10px;}
#products>.view .pageurl .url a>strong:after{position: absolute;z-index: 3; right: 0;top: 0;content: ':';}
#products>.view .pageurl .url a>span{display: inline-block; font-size: 1.6rem; color: #666; transition: all .35s;}
#products>.view .pageurl .url a.gray>span{color: #999!important; text-decoration: none!important;}
#products>.view .pageurl .url a:hover span{text-decoration: underline; color: #154a9a;}





@media only screen and (max-width: 1460px){

    #catalog>.display .list>ul>li>a .box>.tit{font-size:2.8rem;}
    #catalog>.display .list>ul>li>a .box>.view>span{ font-size: 1.3rem;}




    #products>.display .list-pro>ul>li .box>.tit{font-size: 2.4rem;}
    #products>.display .list-pro>ul>li .box>.sub{font-size: 1.6rem;}
    #products>.display .list-pro>ul>li .box>.txt{ height: 40px; font-size: 1.4rem;line-height: 2rem; }


    #products>.search>.list>ul>li .box>.tit{font-size: 2.4rem; }
    #products>.search>.list>ul>li .box>.sub{font-size: 1.4rem;}





    #products>.view .details .focus .focus-show .arrow-prev, #products>.view .details .focus .focus-show .arrow-next{ left:-50px; }
    #products>.view .details .focus .focus-show .arrow-next{ left: auto; right: -50px; }
    #products>.view .tags .tab-nav>ul{ width: 86%; max-width: 1360px; margin: 0 auto;}
    #products>.view .tags .tab-nav>ul>li{ padding: 20px 30px;}







}


@media only screen and (max-width: 1280px){

    #catalog>.display .list>ul>li>a .box>.tit{font-size:2.4rem;}
    #catalog>.display .list>ul>li>a .box>.view>span{ font-size: 1.2rem;}

    #products>.display .list-cls>ul>li{width: 31.33%;}
    #products>.display .list-cls>ul>li:nth-child(4n){margin-right: 3%;}
    #products>.display .list-cls>ul>li:nth-child(3n){margin-right: 0;}

    #products>.display .list-pro>ul>li{ padding: 20px; }
    #products>.display .list-pro>ul>li .box>.view{padding-top: 10px;}
    #products>.display .list-pro>ul>li .box>.view>span{padding: 8px 25px;font-size: 1.2rem;}




    #products>.search>.list>ul>li{width: 31.33%;}
    #products>.search>.list>ul>li:nth-child(4n){margin-right: 3%;}
    #products>.search>.list>ul>li:nth-child(3n){margin-right: 0;}


    #products>.view .details .focus{width:42%;}
    #products>.view .details .box{width: 46%; padding: 30px 0;}

    #products>.view .tags{ padding-top:30px;}
    #products>.view .tags .tab-nav>ul>li{ padding: 16px 20px;}
    #products>.view .tags .tab-nav>ul>li>a{ font-size: 1.6rem; }
    #products>.view .tags .tab-box>.tab-item>.con{ font-size: 1.4rem; line-height: 2.4rem;}





}

@media only screen and (max-width: 1200px) {

    #products>.display .categories>ul>li>a{ padding: 6px 25px; font-size: 1.6rem; margin: 0 15px 15px 0;}

    #products>.display .son{display: none;}



    #products>.display .list>ul>li .box>.tit{font-size: 2.2rem;}
    #products>.display .list>ul>li .box>.sub{font-size: 1.4rem;}
    #products>.display .list>ul>li .box>.txt{font-size: 1.2rem;line-height: 1.8rem; }


}




@media only screen and (max-width: 1080px) {



    #products>.display .list-cls>ul>li>a .box>.tit{font-size:1.8rem;}

    #products>.display .list-pro>ul>li:after{top: 0; width: 100%;height: 5px;}
    #products>.display .list-pro>ul>li:before{top: 0;bottom: auto; width: 0;height: 5px;}
    #products>.display .list-pro>ul>li .img{ float: none; width: 100%;text-align:center;}
    #products>.display .list-pro>ul>li .box{ float: none; width: 100%;  padding: 20px;text-align: center;}
    #products>.display .list-pro>ul>li:hover:before{height: 5px; width: 100%;}

    #products>.search .keyword{font-size: 1.6rem;}
    #products>.search>.list>ul>li{width: 48.5%; margin-right: 0;}
    #products>.search>.list>ul>li:nth-child(4n){margin-right: 0;}
    #products>.search>.list>ul>li:nth-child(even){float: right;}



}



@media only screen and (max-width: 980px) {

    #catalog>.display .list>ul>li{width: 48.5%;margin-right: 0;}
    #catalog>.display .list>ul>li:nth-child(even){float: right;}
    #catalog>.display .list>ul>li>a .box>.tit{font-size:2.8rem;}
    #catalog>.display .list>ul>li>a .box>.view>span{ font-size: 1.3rem;}



    #products>.view .title{ display: block; font-size: 3.4rem; color: #333; text-align: center;}
    #products>.view .title>span{display: block; font-size: 2.6rem;}
    #products>.view .details .focus{width: 76%; float: none; text-align: center; margin: 0 auto;}
    #products>.view .details .box{ width: 100%; float: none;padding: 20px 30px;}
    #products>.view .details .box>.title{display: none;}
    #products>.view .details .box>.intro{padding: 20px 0;}
    #products>.view .details .box>.intro>.txt{font-size: 1.6rem ; line-height: 2.4rem;}

    #products>.view .tags{padding: 0;}
    #products>.view .tags .tab-nav{display: none;}
    #products>.view .tags .tab-box{ width: 100%;max-width: inherit;}
    #products>.view .tags .tab-box>.tab-item{ display:block;}
    #products>.view .tags .tab-box>.tab-item>.tit{ position: relative; display: block; box-sizing: border-box; border-bottom: 1px solid #eee; cursor: pointer; font-size: 1.6rem; padding: 20px 0 20px 80px;}
    #products>.view .tags .tab-box>.tab-item>.tit:after{position: absolute;z-index: 1; left: 60px; top: 50%; margin-top: -8px; width: 3px;height: 16px; background: #154a9a;content: '';}
    #products>.view .tags .tab-box>.tab-item:first-child>.tit{border-top: 1px solid #eee;}
    #products>.view .tags .tab-box>.tab-item>.tit>i{ position: absolute;z-index: 10; right: 80px; top: 50%; margin-top: -10px; width: 20px;height: 20px; line-height: 20px; font-size: 1.8rem; color: #ccc; margin-right: 10px; transition: all .35s;}
    #products>.view .tags .tab-box>.tab-item>.tit.active{background: #e9f2ff; color: #154a9a;}
    #products>.view .tags .tab-box>.tab-item>.tit.active>i{ transform: rotate(180deg);}
    #products>.view .tags .tab-box>.tab-item>.con{display: none; padding: 50px 80px;}
    #products>.view .tags .tab-box>.tab-item>.con table td{font-size: 1.4rem;}
    #products>.view .back{display: block;}

}

@media only screen and (max-width: 860px) {

    #catalog>.display .list>ul>li>a .box>.tit{font-size:2.4rem;}
    #catalog>.display .list>ul>li>a .box>.view>span{ font-size: 1.2rem;}

    #products>.display .categories>ul>li>a{ padding: 6px 20px; font-size: 1.4rem; margin: 0 10px 10px 0;}

    #products>.display .list-cls>ul>li{width: 48.5%;margin-right: 0;}
    #products>.display .list-cls>ul>li:nth-child(4n){margin-right: 0;}
    #products>.display .list-cls>ul>li:nth-child(even){float: right;}
    #products>.display .list-cls>ul>li>a .box>.tit{font-size:1.6rem;}


}






@media only screen and (max-width: 780px) {


    #catalog>.display .list>ul>li>a .box>.tit{font-size:2.2rem;}
    #catalog>.display .list>ul>li>a .box>.view>span { padding: 4px 15px;}

    #products>.display .list-pro>ul>li .box>.view>span{padding: 5px 20px;font-size: 1.2rem;}





}

@media only screen and (max-width: 640px) {


    #catalog { padding: 50px 0;}
    #catalog>.display .list>ul>li{float:none;width: 100%; margin-bottom: 30px;}
    #catalog>.display .list>ul>li:nth-child(even){float: none;}
    #products { padding: 50px 0;}


    #products>.display .list-cls>ul>li>a .box {padding-bottom: 30px; }
    #products>.display .list-cls>ul>li>a .box>.tit{font-size:1.4rem;}



    #products>.view .tags .tab-box>.tab-item>.tit{ padding: 20px 0 20px 60px;}
    #products>.view .tags .tab-box>.tab-item>.tit:after{left: 45px;}
    #products>.view .tags .tab-box>.tab-item>.tit>i{right: 60px;}
    #products>.view .tags .tab-box>.tab-item>.con{display: none; padding: 50px 60px;}
    #products>.view .tags .tab-box>.tab-item>.con{ font-size: 1.4rem; line-height: 2.4rem;}
    #products>.view .tags .tab-box>.tab-item>.con table td{font-size: 1.2rem;}


    #products>.search>.list>ul>li .box{padding: 10px;}
    #products>.search>.list>ul>li .box>.tit {  font-size: 2rem;}
    #products>.search>.list>ul>li .box>.sub {  font-size: 1.2rem; }


    #products>.view .title { font-size: 2.8rem; }
    #products>.view .title>span{font-size: 1.6rem;}

    #products>.view .details {padding-bottom: 0;}
    #products>.view .details .focus { width: 86%;}
    #products>.view .details .box>.url{padding: 10px 0;}
    #products>.view .details .box>.url>a {display: block; margin-bottom: 10px; text-align: center; }
    #products>.view .details .box>.url>a.consultation>i{ display: block;margin: 0 auto 6px auto; float: none; }


    #products>.view .pageurl .url>.prev{display: block; padding: 5px 20px; background: #fff; border-radius: 5px; border: 1px solid #ddd; margin-bottom: 5px;}
    #products>.view .pageurl .url>.next{display: block;padding: 5px 20px; background: #fff; border-radius: 5px; border: 1px solid #ddd;}
    #products>.view .pageurl .url a{display: block;width: 100%; text-align: center;}
    #products>.view .pageurl .url a>strong{ font-size: 1.4rem;  padding-right: 0; margin-right: 0;}
    #products>.view .pageurl .url a>strong:after{display: none;}
    #products>.view .pageurl .url a>span{display: none;}


}

@media only screen and (max-width: 520px) {

    #products>.display .categories>ul>li>a{ padding: 6px 10px; font-size: 1.2rem;}



    #products>.display .list-pro>ul>li{ float: none;width: 100%;}
    #products>.display .list-pro>ul>li:nth-child(even){float: none;}


    #products>.view .tags .tab-box>.tab-item>.tit{ padding: 20px 0 20px 40px; font-size: 1.4rem;}
    #products>.view .tags .tab-box>.tab-item>.tit:after{left: 30px;}
    #products>.view .tags .tab-box>.tab-item>.tit>i{right: 20px; font-size: 1.4rem;}
    #products>.view .tags .tab-box>.tab-item>.con{display: none; padding: 30px;}


}