@charset "utf-8";

#production{margin: 0 auto;}
#production .title{text-align: center; margin: 100px auto;}
#production .title>h3{font-size: 5rem; color: #333;}
#production .title>h4{font-size: 2rem; font-weight: normal; color: #999; text-transform: uppercase;}

#production>.display {padding: 50px 0;margin: 0 auto;}
#production>.display .list{margin: 0 auto;}
#production>.display .list>ul{margin: 0 auto;}
#production>.display .list>ul>li{display: block; position: relative; float: left;width: 22.75%; margin-right: 3%; zoom: 1;box-sizing: border-box;background: #fff; border: 1px solid #ddd; margin-bottom: 3%; transition: all .35s;}
#production>.display .list>ul>li:nth-child(4n){margin-right: 0;}
#production>.display .list>ul>li .img{ position: relative; overflow: hidden;}
#production>.display .list>ul>li .img:after{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;}
#production>.display .list>ul>li .img:before{position: absolute;z-index: 50;left: 50%;top: 0;opacity: 0; width: 60px;height: 60px; line-height: 60px; background: #04b8ef url("../img/ico_search.png") no-repeat; background-position: 50% 50%; background-size: 30px auto; border-radius: 50px; text-align: center; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: 1.2rem; content: '';transform:translate(-50%,-50%); transition: all .5s;}
#production>.display .list>ul>li .img img{width: 100%;height: auto;}
#production>.display .list>ul>li .tit{ position: absolute;z-index: 10; left: 0;bottom: 0;background: rgba(0,0,0,.4); width: 100%; text-align: center;font-size: 1.6rem; padding: 15px; color: #fff; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;transition: all .35s}
#production>.display .list>ul>li:hover .img:after{opacity: 1;}
#production>.display .list>ul>li:hover .img:before{top: 50%;opacity: 1;}


@media (max-width:1460px){


}


@media (max-width:1280px){


    #production .title>h3{font-size: 3.6rem;}

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




}

@media (max-width:1200px){


}


@media (max-width:1080px){

    #production>.display .list>ul>li .tit{font-size: 1.8rem;}




}


@media (max-width:860px){

    #production>.display .list>ul>li{width: 48.5%; margin-right: 0;}
    #production>.display .list>ul>li:nth-child(4n){margin-right: 0;}
    #production>.display .list>ul>li:nth-child(3n){margin-right: 0;}
    #production>.display .list>ul>li:nth-child(even){float: right;}

    #production>.display .list>ul>li .tit{font-size: 1.6rem;}

}




@media (max-width:640px){

    #production .title>h3{font-size: 2.8rem;}
    #production .title>h4{font-size: 1.6rem;}


    #production>.display .list>ul>li{width: 100%;float: none;}
    #production>.display .list>ul>li:nth-child(even){float: none;}
    #production>.display .list>ul>li .tit{font-size: 1.4rem;}


}