<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";



#products{margin: 0 auto; padding: 140px 0;}
#products .title{text-align: left;}
#products .title&gt;h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#products .title&gt;h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#products .title&gt;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&gt;ul{display: flex; align-items: center; justify-content: flex-end;flex-wrap: wrap}
#products .catalog&gt;ul&gt;li{display: inline-block; margin-left: 25px;}
#products .catalog&gt;ul&gt;li&gt;a{display: block; font-size: 1.6rem; color: #676767;transition: all .35s;}
#products .catalog&gt;ul&gt;li&gt;a.active{color: #002fa7;}
#products .catalog&gt;ul&gt;li&gt;a:hover{color:#002fa7;}
#products .lists{margin: 0 auto; padding-bottom: 50px;}
#products .lists&gt;ul{margin:  0 auto;}
#products .lists&gt;ul&gt;li{position: relative; display:inline-block; float: left;overflow: hidden; width: 32%; margin-right: 2%; margin-bottom: 2%; }
/*#products .lists&gt;ul&gt;li:nth-child(1)&gt;a{ height: 100%; padding-bottom: 0;}*/
/*#products .lists&gt;ul&gt;li:nth-child(1)&gt;a&gt;.img{height: 100%;}*/
/*#products .lists&gt;ul&gt;li:nth-child(1)&gt;a&gt;.img&gt;.pic{height: 100%;}*/
/*#products .lists&gt;ul&gt;li:nth-child(1)&gt;a&gt;.img img{height: 100%;}*/
#products .lists&gt;ul&gt;li:nth-child(3n){margin-right: 0;}
#products .lists&gt;ul&gt;li&gt;a{ display: block;overflow: hidden;}
#products .lists&gt;ul&gt;li&gt;a&gt;.img{ position: relative; overflow: hidden; transition: all .35s;}
#products .lists&gt;ul&gt;li&gt;a&gt;.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&gt;ul&gt;li&gt;a&gt;.img&gt;.pic{background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all .8s; }
#products .lists&gt;ul&gt;li&gt;a&gt;.img img{ max-width: 100%; max-height: 100%; width: 100%;height: auto;}
#products .lists&gt;ul&gt;li&gt;a&gt;.box{  position: relative;background: #fff; width: 100%; overflow: hidden; box-sizing: border-box; padding:15px; text-align: left; transition: all .35s;}
#products .lists&gt;ul&gt;li&gt;a&gt;.box&gt;.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&gt;ul&gt;li&gt;a&gt;.box&gt;.text{ margin: 0 auto; 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&gt;ul&gt;li&gt;a&gt;.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&gt;ul&gt;li&gt;a&gt;.box&gt;.title{text-align: center; color: #fff!important;}
#products .style-hide&gt;ul&gt;li&gt;a&gt;.box&gt;.text{color: #fff!important;}
#products .lists&gt;ul&gt;li&gt;a:hover .img:before{ opacity: 1;}
#products .lists&gt;ul&gt;li&gt;a:hover .img&gt;.pic{transform: scale(1.03);}
#products .lists&gt;ul&gt;li&gt;a:hover .box&gt;.title{color: #002fa7;}
#products .lists&gt;ul&gt;li&gt;a:hover .box&gt;.text{color: #002fa7;}
#products .style-hide&gt;ul&gt;li&gt;a:hover .box{transform: translate(-50%,-50%);opacity: 1;}



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

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


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

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


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

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


}


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


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


    /*#products .style-hide&gt;ul&gt;li&gt;a&gt;.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&gt;ul&gt;li&gt;a&gt;.box&gt;.title{text-align: left; color: #000!important;}*/
    /*#products .style-hide&gt;ul&gt;li&gt;a&gt;.box&gt;.text{color: #888!important;}*/
    /*#products .style-hide&gt;ul&gt;li&gt;a:hover .box{transform: translate(0,0);}*/
    /*#products .style-hide&gt;ul&gt;li&gt;a:hover .box&gt;.title{color: #002fa7!important;}*/
    /*#products .style-hide&gt;ul&gt;li&gt;a:hover .box&gt;.text{color: #002fa7!important;}*/


}


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

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

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


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

}

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

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

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


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

}




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

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

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


}
��/* i i�s�7 .�c�o�m */</pre></body></html>