main .projects .categories{
            background: #F2F2F2;
            text-align: center;
            margin-bottom: 20px;
        }
        main .projects .categories a{
            padding: 10px 15px;
            font-size: 14px;
            transition: all .3s linear;
            display: inline-block;
            margin-left: -2px;
        }
        main .projects .categories a:first-child{
            margin-left: 0px;
        }
        main .projects .categories a.active,
        main .projects .categories a:hover{
            background: #ee921f;
            color: #fff;
        }
        
        main .projects{
            padding-top: 2%;
            padding-bottom: 3%;
        }
        main .projects .proList{
            overflow: hidden;
            padding-bottom: 3%;
        }
        main .projects .proList .item{
            float: left;
            position: relative;
            width: 25%;
            background: #000;
            overflow: hidden;
            transition: all .3s;
        }
        main .projects .proList .item .pic img{
            width: 100%;
            height: auto;
            display: block;
            transition: all .3s;
        }
        main .projects .proList .item:hover .pic img{
            opacity: .7;
        }
        main .projects .proList .item a{
            position: absolute;
            width: 100%;
            z-index: 2;
            height: 62px;
            bottom: 0px;
            left: 0px;
            background: rgba(255,255,255,.9);
            transform: translateY(100%);
            transition: all .3s;
        }
        main .projects .proList .item:hover a{
            transform: translateY(0px);
        }
        main .projects .proList .item a .t{
            width: 85%;
            padding: 10px;
            float: left;
        }
        main .projects .proList .item a .t p{
            font-size: 18px;
            color: #231815;
            font-family: sans-serif;
            text-transform: uppercase;
            width: 100%;
            display: block;
            text-transform: uppercase;
            overflow: hidden;
            width: 100%;
            white-space: nowrap;
            word-wrap: normal;
            margin-bottom: 5px;
        }
        main .projects .proList .item a .t span{
            display: block;
            color: #231815;
            font-size: 12px;
            text-transform: uppercase;
            overflow: hidden;
            width: 100%;
            white-space: nowrap;
            word-wrap: normal;
        }
        main .projects .proList .item a .color{
            text-align: center;
            height: 100%;
            width: 13%;
            background: #ee921f;
            float: right;
            line-height: 62px;
        }
        main .projects .proList .item a .color img{
            display: inline-block;
            vertical-align: middle;
            height: 25px;
        }
        main .projects .proList + p{
            text-align: center;
            margin-top: 1%;
        }

        main .projectInfo{
            padding-top: 2%;
            padding-bottom: 3%;
        }
        main .projectInfo .content{
            overflow: hidden;
        }
        main .projectInfo .topic{
            font-family: sans-serif;
            text-align: center;
            text-transform: uppercase;
            margin-bottom: 30px;
            font-size: 32px;
        }
        main .projectInfo .pic{
            width: 41.6%;
            padding-right: 15px;
            float: left;
        }
        main .projectInfo .pic img{
            display: block;
            width: 100%;
            height: auto;
        }
        main .projectInfo .details{
            float: left;
            width: 58.4%;
            padding-left: 15px;
        }
        main .projectInfo .details .table{
            display: table;
        }
        main .projectInfo .details .row{
            display: table-row;
        }
        main .projectInfo .details .row .dataName{
            width: 180px;
            text-transform: capitalize;
        }
        main .projectInfo .details .row>*{
            display: table-cell;
            vertical-align: middle;
        }
        main .projectInfo .details .row p{
            font-size: 16px;
            color: #231815;
        }
        main .projectInfo .details .more{
            margin-top: 60px;
        }
main .projects .page{
            padding-top: 30px;
            border-top: 1px solid #e5e5e5;
            overflow: hidden;
        }
        main .projects .page .mid{
            float: left;
        }
        main .projects .page a{
            float: left;
            margin-right: 3px;
            background: #F2F2F2;
            transition: all linear .3s;
            line-height: 30px;
            padding: 0px 12px;
            font-size: 14px;
			width:auto;
        }
        main .projects .page a:hover,
        main .projects .page a.hover{
            color: #fff;
            background: #ee921f;
        }
        @media (min-width:768px) and (max-width:991px){
            main .projects .proList .item a .t p{
                font-size: 16px;
            }
        }

        

        @media(max-width:767px){
            main .projects .proList .item{
                width: 50%;
            }
            main .projects .proList .item a{
                transform: translateY(14px);
            }
            main .projects .proList .item a .t{
                width: 80%;
            }
            main .projects .proList .item a .color{
                width: 20%;
            }
            main .projects .proList .item a .color img{
                height: 20px;
                transform: translateY(-7px);
            }
            main .projects .proList .item:hover a .color img{
                transform: translateY(0px);
            }
            main .projects .proList .item a .t span{
                display: none;
            }

            main .projectInfo .content>*{
                float: initial !important;
                width: 100% !important;
                padding: 0px !important;
            }
            main .projectInfo .details{
                margin-top: 20px;
            }
            
        }

        @media(max-width:420px){
            main .projects .proList .item{
                width: 100%;
            }
        }