css/portfollo.css

.portfolio-hardware-top{
    background: #fff;
    padding-top: 101px !important;
}
.portfolio-hardware-wrap li{
    color:rgba(6,14,19,.8);
    font-size: 20px;
    cursor: pointer;
}
.portfolio-hardware-wrap li:nth-of-type(1){
    padding-top: 60px;
    background: url("../images/portfolio-hardware-wrap-1.png") no-repeat center 0;
}
.portfolio-hardware-wrap li:nth-of-type(2){
    padding-top: 60px;
    background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0;
}
.portfolio-hardware-wrap li:nth-of-type(3){
    padding-top: 60px;
    background: url("../images/portfolio-hardware-wrap-3.png") no-repeat center 0;
}
.portfolio-hardware-wrap li:nth-of-type(4){
    padding-top: 60px;
    background: url("../images/portfolio-hardware-wrap-4.png") no-repeat center 0;
}
.portfolio-hardware-wrap li:nth-of-type(1).active{
    color: #3F9FFE;
    padding-bottom: 10px;
    border-bottom: 3px solid rgba(63,159,254,1);
    background: url("../images/portfolio-hardware-wrap-1-active.png") no-repeat center 0;
}
.portfolio-hardware-wrap li:nth-of-type(2).active{
    color: #3F9FFE;
    padding-bottom: 10px;
    border-bottom: 3px solid rgba(63,159,254,1);
    background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0;
    /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/
}
.portfolio-hardware-wrap li:nth-of-type(3).active{
    color: #3F9FFE;
    padding-bottom: 10px;
    border-bottom: 3px solid rgba(63,159,254,1);
    background: url("../images/portfolio-hardware-wrap-3-active.png") no-repeat center 0;
}
.portfolio-hardware-wrap li:nth-of-type(4).active{
    color: #3F9FFE;
    padding-bottom: 10px;
    border-bottom: 3px solid rgba(63,159,254,1);
    background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0;
}
.portfolio-section-wrap{
    height: 596px;
    overflow: hidden;
}
.portfolio-section-wrap>li{
    height: 596px;
}
.portfolio-section-wrap>li li{
    height: 596px;
}
.displaynone{
    display: none;
}
.ortfolio-hardware-bottom-title {
    font-size: 30px;
    font-weight: bold;
    color: rgba(0,0,0,.8);
    margin: 0px 0 27px;
    text-align: left;
}
.ortfolio-hardware-bottom-1>li:nth-of-type(1){
    width: 460px;
    height: 200px;
    margin: 227px 100px 0 50px;
}
.ortfolio-hardware-bottom-1 li:nth-of-type(2){
    /*padding-left: 100px;*/
    background: url("../images/produect_dev1.png") no-repeat;
    width: 578px;
    height: 522px;
    margin-top: 40px;
}
.ortfolio-hardware-bottom-2 li:nth-of-type(1){
    margin-top: 227px;
}
.ortfolio-hardware-bottom-2 li:nth-of-type(2){
    background: url("../images/produect_dev4.png") no-repeat;
    width: 383px;
    height: 480px;
    margin-top: 70px;
    margin-left: 147px;
}
.ortfolio-hardware-bottom-3 li:nth-of-type(1){
    margin-top: 227px;
    /*padding-left: 50px;*/
    width: 460px;
}
.ortfolio-hardware-bottom-3 li:nth-of-type(2){
    background: url("../images/produect_dev3.png") no-repeat;
    width: 630px;
    height: 250px;
    margin-top: 197px;
}
.ortfolio-hardware-bottom-4 li:nth-of-type(1){
    margin-top: 185px;
    width: 500px;
    margin-left: 50px;
}
.ortfolio-hardware-bottom-4 li:nth-of-type(2){
    background: url("../images/produect_dev2.png") no-repeat;
    width: 297px;
    height: 369px;
    margin-top: 138px;
    margin-left: 180px;
}
.ortfolio-hardware-bottom-title{
    font-size:30px;
    font-weight:bold;
    color:rgba(0,0,0,.8);
    /*margin: 239px 0 27px;*/
    text-align: left;
}
.ortfolio-hardware-bottom-des{
    font-size: 16px;
    text-align: left;
    color:rgba(0,0,0,.6);
    padding-left: 20px;
    position: relative;
}
.ortfolio-hardware-bottom-des:before{
    position: absolute;
    content: '';
    left: 0;
    top:10px;
    margin-top: -3px;
    width:6px;
    height:6px;
    background:rgba(66,160,251,1);
    border-radius:50%;
}