@charset "utf-8";



#products{margin: 0 auto; padding: 140px 0;}
#products .title{text-align: left;}
#products .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#products .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#products .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#products .catalog{ padding: 25px 0; margin: 0 auto; text-align: right;}
#products .catalog>ul{display: flex; align-items: center; justify-content: flex-end;flex-wrap: wrap}
#products .catalog>ul>li{display: inline-block; margin-left: 25px;}
#products .catalog>ul>li>a{display: block; font-size: 1.6rem; color: #676767;transition: all .35s;}
#products .catalog>ul>li>a.active{color: #002fa7;}
#products .catalog>ul>li>a:hover{color:#002fa7;}
#products .lists{margin: 0 auto; padding-bottom: 50px;}
#products .lists>ul{margin:  0 auto;}
#products .lists>ul>li{position: relative; display:inline-block; float: left;overflow: hidden; width: 32%; margin-right: 2%; margin-bottom: 2%; }
/*#products .lists>ul>li:nth-child(1)>a{ height: 100%; padding-bottom: 0;}*/
/*#products .lists>ul>li:nth-child(1)>a>.img{height: 100%;}*/
/*#products .lists>ul>li:nth-child(1)>a>.img>.pic{height: 100%;}*/
/*#products .lists>ul>li:nth-child(1)>a>.img img{height: 100%;}*/
#products .lists>ul>li:nth-child(3n){margin-right: 0;}
#products .lists>ul>li>a{ display: block;overflow: hidden;}
#products .lists>ul>li>a>.img{ position: relative; overflow: hidden; transition: all .35s;}
#products .lists>ul>li>a>.img:before{position: absolute;z-index: 10; left:0;top: 0; width: 100%; height: 100%; opacity: 0; background: rgba(0,0,0,.3); content: '';transition: all .35s;}
#products .lists>ul>li>a>.img>.pic{background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all .8s; }
#products .lists>ul>li>a>.img img{ max-width: 100%; max-height: 100%; width: 100%;height: auto;}
#products .lists>ul>li>a>.box{  position: relative;background: #fff; width: 100%; overflow: hidden; box-sizing: border-box; padding:15px; text-align: left; transition: all .35s;}
#products .lists>ul>li>a>.box>.title{ margin:0 auto; padding: 5px 0; text-align: left; font-size: 2.2rem; color: #000; text-transform: uppercase; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#products .lists>ul>li>a>.box>.text{ margin: 0 auto; height:40px; font-size: 1.4rem; color: #888; line-height: 2rem;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;transition: all .35s;}
#products .style-hide>ul>li>a>.box{ position: absolute;z-index: 20; left: 50%; top: 50%; bottom: auto; transform: translate(-50%,-30%); width: 80%; text-align: center;opacity: 0; background: none;}
#products .style-hide>ul>li>a>.box>.title{text-align: center; color: #fff!important;}
#products .style-hide>ul>li>a>.box>.text{color: #fff!important;}
#products .lists>ul>li>a:hover .img:before{ opacity: 1;}
#products .lists>ul>li>a:hover .img>.pic{transform: scale(1.03);}
#products .lists>ul>li>a:hover .box>.title{color: #002fa7;}
#products .lists>ul>li>a:hover .box>.text{color: #002fa7;}
#products .style-hide>ul>li>a:hover .box{transform: translate(-50%,-50%);opacity: 1;}



#products .view{margin:  0 auto;}
#products .view>.title{font-size: 3.2rem; font-weight: 700; text-transform: uppercase; text-align: center; color: #000; padding: 30px 0; transition: all .35s;}
#products .view>.focus .swiper-pagination{ position: relative;padding-top: 20px; bottom: 0;}
#products .view>.focus .swiper-pagination-bullet{ background: #002fa7!important; transition: all .35s;}
#products .view>.focus .swiper-pagination-bullet-active{width: 30px; border-radius: 10px; }
#products .view>.content{padding: 30px 0; text-align: left; line-height: 3rem; font-size: 1.6rem; color: #676767;}
#products .view>.content>p{margin-bottom: 50px;}
#products .view>.content img{max-width: 100%; height: auto;}
#products .view>.content .table-container{position: relative;}
#products .view>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#products .view>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#products .view>.content table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#products .view>.content table td{padding: 10px; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
#products .view>.close{text-align: center;padding-top: 20px; margin: 0 auto;}
#products .view>.close>a{display: inline-block; transition: all .5s;}
#products .view>.close>a>span{display: block; width: 41px;height: 41px; background: url("../img/ico_close.png") no-repeat; background-position: 0 0;}
#products .view>.close>a:hover{ transform: rotate(180deg);}
#products .view>.close>a:hover span{background-position: 0 -41px;}

#products .view>.back{ display: none; text-align: center;padding-top: 20px; margin: 0 auto;}
#products .view>.back>a{display: inline-block; transition: all .5s;}
#products .view>.back>a>span{display: block; width: 41px;height: 41px; background: url("../img/ico_close.png") no-repeat; background-position: 0 0;}
#products .view>.back>a:hover{ transform: rotate(180deg);}
#products .view>.back>a:hover span{background-position: 0 -41px;}


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

    #products .title>h3{ font-size: 2.8rem;}
    #products .title>p{ font-size: 1.6rem;}


    #products .lists>ul>li>a>.box>.title{ font-size: 2rem;}
    #products .lists>ul>li>a>.box>.text{ font-size: 1.3rem;}

    #products .view>.content{line-height: 2.8rem; font-size: 1.5rem;}


}


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


    #products .lists>ul>li{float: left; width: 49%; margin-right: 0;}
    #products .lists>ul>li:nth-child(even){float: right;}


    /*#products .style-hide>ul>li>a>.box{ position: relative;left: 0; top: auto; bottom: 0;  transform: translate(0,0); width: 100%; text-align: left;opacity:1; background: #fff;}*/
    /*#products .style-hide>ul>li>a>.box>.title{text-align: left; color: #000!important;}*/
    /*#products .style-hide>ul>li>a>.box>.text{color: #888!important;}*/
    /*#products .style-hide>ul>li>a:hover .box{transform: translate(0,0);}*/
    /*#products .style-hide>ul>li>a:hover .box>.title{color: #002fa7!important;}*/
    /*#products .style-hide>ul>li>a:hover .box>.text{color: #002fa7!important;}*/


}


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

    #products{padding: 80px 0;}
    #products .catalog>ul{ justify-content: flex-start;}
    #products .catalog>ul>li{margin-left: 0;margin-right: 25px;}
    #products .lists>ul>li{display:block; float: none; width: 100%; margin-bottom: 20px;}
    #products .lists>ul>li:nth-child(even){float: none;}
    #products .lists>ul>li>a>.box{ opacity: 1; }
    #products .lists>ul>li>a>.box>.title{ font-size: 1.8rem; }

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


    #products .view>.close{display: none;}
    #products .view>.back{display:block;}

}

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

    #products .title>h3{ font-size: 2rem; padding-bottom: 10px;}
    #products .title>p{ font-size: 1.4rem; padding-top: 5px;}

    #products .catalog>ul>li {margin-right: 15px; margin-bottom: 10px; }
    #products .lists>ul>li>a>.box{padding: 15px 5px;}
    #products .lists>ul>li>a>.box>.title{ font-size: 1.8rem; }
    #products .lists>ul>li>a>.box>.text{ font-size: 1.2rem; }


    #products .view>.title{font-size: 2.4rem; padding: 0 0 10px 0;}
    #products .view>.content{line-height: 2.4rem; font-size: 1.4rem;}

}




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

    #products {padding: 50px 0 40px 0;}

    #products .view>.title{ font-size: 2rem;}


}