.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){ /*background: #f0f;*/ } .ortfolio-hardware-bottom-3 li:nth-of-type(2){ } .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%; }