@charset "utf-8";






#searchs{margin: 0 auto; padding: 50px 0 140px 0;}
#searchs .title{text-align: left;}
#searchs .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#searchs .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#searchs .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#searchs .record{text-align: left; font-size: 1.8rem; color: #676767;}
#searchs .record b{display: inline-block; color: #002fa7;}
#searchs .record span{display: inline-block;padding: 0 5px;}
#searchs .lists{margin: 0 auto; padding:25px 0 50px 0;}
#searchs .lists>ul{margin:  0 auto;}
#searchs .lists-product>ul>li{display:inline-block; float: left; width: 32%; margin-right: 2%; margin-bottom: 2%; }
#searchs .lists-product>ul>li:nth-child(3n){margin-right: 0;}
#searchs .lists-product>ul>li>a{ position: relative; display: block;overflow: hidden;}
#searchs .lists-product>ul>li>a: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;}
#searchs .lists-product>ul>li>a>.img{overflow: hidden; transition: all .35s;}
#searchs .lists-product>ul>li>a>.img>.pic{background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all .8s;}
#searchs .lists-product>ul>li>a>.img img{ max-width: 100%; max-height: 100%; width: 100%;height: auto;}
#searchs .lists-product>ul>li>a>.box{ position: absolute; z-index: 60; left: 50%; top: 50%; transform: translate(-50%,-30%); width: 80%; opacity: 0; text-align: center; transition: all .35s;}
#searchs .lists-product>ul>li>a>.box>.title{ margin:0 auto; padding: 5px 0; text-align: center; font-size: 2.2rem; color: #fff; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#searchs .lists-product>ul>li>a>.box>.text{ margin: 0 auto; font-size: 1.6rem; color: #fff; line-height: 2.4rem;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;transition: all .35s;}
#searchs .lists-product>ul>li>a:hover:before{ opacity: 1;}
#searchs .lists-product>ul>li>a:hover .img>.pic{transform: scale(1.03);}
#searchs .lists-product>ul>li>a:hover .box{transform: translate(-50%,-50%);opacity: 1;}

#searchs .lists-news>ul>li{display:inline-block; float: left; width: 32%; margin-right: 2%; margin-bottom: 5%; }
#searchs .lists-news>ul>li:nth-child(3n){margin-right: 0;}
#searchs .lists-news>ul>li>a{ position: relative; display: block;overflow: hidden;}
#searchs .lists-news>ul>li>a>.img{overflow: hidden; transition: all .35s;}
#searchs .lists-news>ul>li>a>.img>.pic{background-position: center center; background-repeat: no-repeat; background-size: cover; transition: all .8s;}
#searchs .lists-news>ul>li>a>.img img{ max-width: 100%; max-height: 100%; width: 100%;height: auto;}
#searchs .lists-news>ul>li>a>.box{ position: relative; text-align: left;padding: 10px 0; border-bottom: 2px solid #ebeced;}
#searchs .lists-news>ul>li>a>.box:after{position: absolute;z-index: 23; left: 0; bottom: -2px; width: 0;height: 2px;background: #002fa7; content: '';transition: all .35s;}
#searchs .lists-news>ul>li>a>.box:before{position: absolute;z-index: 10; right: -20px;bottom: 10px; width: 16px; height: 16px; opacity: 0; background: url("../img/ico_plus.png") no-repeat; content: '';transition: all .35s;}
#searchs .lists-news>ul>li>a>.box>.date{ padding: 10px 0; font-size: 1.4rem; color: #888;transition: all .35s;}
#searchs .lists-news>ul>li>a>.box>.title{ margin: 10px 0; text-align: left; font-size: 1.7rem; color: #000; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#searchs .lists-news>ul>li>a>.box>.text{ margin: 10px auto 30px auto; font-size: 1.4rem; color: #888; line-height: 2.4rem;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;transition: all .35s;}
#searchs .lists-news>ul>li>a>.box>.more{display: block;  text-align: left;}
#searchs .lists-news>ul>li>a>.box>.more>span{display: inline-block;font-size: 1.4rem; color: #888; transition: all .35s;}
#searchs .lists-news>ul>li>a:hover .box:after{ width: 100%; }
#searchs .lists-news>ul>li>a:hover .box:before{ right: 0; opacity: 1;}
#searchs .lists-news>ul>li>a:hover .img>.pic{transform: scale(1.08);}
#searchs .lists-news>ul>li>a:hover .box>.date{color: #002fa7;}
#searchs .lists-news>ul>li>a:hover .box>.title{color: #002fa7;}
#searchs .lists-news>ul>li>a:hover .box>.text{color: #002fa7;}
#searchs .lists-news>ul>li>a:hover .box>.view>span{color: #002fa7;}


#searchs .lists-announcement>ul>li{ position: relative; display: block; border-bottom: 1px solid #d8d8d8;}
#searchs .lists-announcement>ul>li:after{position: absolute;z-index: 1; left: 0;bottom: -1px; width: 0;height: 1px; background: #002fa7;opacity: 0; content: '';transition: all .35s;}
#searchs .lists-announcement>ul>li>a{display: flex;padding: 30px 6px; justify-content: space-between;align-items: center;}
#searchs .lists-announcement>ul>li>a>.title{ display: inline-block; width: 76%; font-size: 1.6rem; color: #676767; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#searchs .lists-announcement>ul>li>a>.more{display: inline-block; width: 26px; height: 26px; line-height: 24px; text-align: center; border: 1px solid #868686; border-radius: 100%; color: #868686; transition: all .35s; }
#searchs .lists-announcement>ul>li:hover:after{width: 100%;opacity: 1;}
#searchs .lists-announcement>ul>li:hover>a .title{color: #002fa7;}
#searchs .lists-announcement>ul>li:hover>a .more{ transform: translateX(5px); background: #002fa7; color: #fff; border-color: #002fa7;}






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

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

    #searchs .lists-product>ul>li>a:before{opacity: 1;}
    #searchs .lists-product>ul>li>a>.box>.title{font-size: 2rem; }
    #searchs .lists-product>ul>li>a>.box>.text{ font-size: 1.5rem; line-height: 2.4rem;}





}

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

    #searchs .lists-news>ul>li:nth-child(1) .img{ height: auto;}

}


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


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


    #searchs .lists-news>ul>li{ float: left; width: 49%; margin-right: 0;}
    #searchs .lists-news>ul>li:nth-child(2n){ float: right; }



}


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

    #searchs{padding: 80px 0;}

    #searchs .lists-product>ul>li{display:block; float: none; width: 100%; margin-bottom: 20px;}
    #searchs .lists-product>ul>li:nth-child(even){float: none;}
    #searchs .lists-product>ul>li>a>.box{ opacity: 1; }
    #searchs .lists-product>ul>li>a>.box>.title{ font-size: 1.8rem; }


    #searchs .lists-news>ul>li{display:block; float: none; width: 100%;}
    #searchs .lists-news>ul>li:nth-child(1){ width: 100%;}
    #searchs .lists-news>ul>li:nth-child(2n){ float: none;}
    #searchs .lists-news>ul>li>a>.box:before{right: 0;opacity: 1;}
    #searchs .lists-news>ul>li>a>.box>.more>span{ color: #002fa7;}



}


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

    #banner>.inner{height: 360px;}
    #banner>.inner>.bg{height: 100%;}
    #banner>.inner>.bg img{ display: none;}

}




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


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

    #searchs .record{ font-size: 1.5rem;}


    #searchs .lists-product>ul>li>a>.box>.title{ font-size: 1.8rem; }
    #searchs .lists-product>ul>li>a>.box>.text{ font-size: 1.3rem; }

    #searchs .lists-news>ul>li{margin-bottom: 50px;}
    #searchs .lists-news>ul>li:nth-child(1) .box>.text {margin: 10px auto 20px auto;}

    #searchs .lists-announcement>ul>li>a{padding:20px 6px;}
    #searchs .lists-announcement>ul>li>a>.title{  font-size: 1.4rem;}
    #searchs .lists-announcement>ul>li>a>.more{width: 20px; height: 20px; line-height: 20px; }
    #searchs .lists-announcement>ul>li>a>.more>i{font-size: 1.4rem;}
    
    
    
}




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

    #searchs {padding: 50px 0;}


}