master/css/portfollo.css

/*breadcrumb*/
.breadcrumb{
    width: 100%;
    height: 540px;
    background:url('../images/breadcrumb-bg.jpg');
    background-size:100% 100%;
    background-repeat:no-repeat;
}
.breadcrumb-text{
    max-width: 832px;
    padding: 0 20px;
    margin: 200px auto;
    text-align: center;
    color: #fff;
    font-size: 44px;
    background-color: #3F9FFE;
}
#portfolio-soft-top{
    padding-bottom: 0;
    background: #fff;
}
/*软件sta-----*/
.portfolio-soft-wrap li{
    color:rgba(6,14,19,.8);
    font-size: 20px;
    cursor: pointer;
    position: relative;
}
.portfolio-soft-wrap li:nth-of-type(1){
    padding-top: 60px;
    background: url("../images/portfolio-soft-wrap-1.png") no-repeat center 0;
}
.portfolio-soft-wrap li:nth-of-type(2){
    padding-top: 60px;
    background: url("../images/portfolio-soft-wrap-2.png") no-repeat center 0;
}
.portfolio-soft-wrap li:nth-of-type(3){
    padding-top: 60px;
    background: url("../images/portfolio-soft-wrap-3.png") no-repeat center 0;
}
.portfolio-soft-wrap li:nth-of-type(4){
    padding-top: 60px;
    background: url("../images/portfolio-soft-wrap-4.png") no-repeat center 0;
}
.portfolio-soft-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-soft-wrap-1-active.png") no-repeat center 0;
}
.portfolio-soft-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-soft-wrap-2-active.png") no-repeat center 0;
}
.portfolio-soft-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-soft-wrap-3-active.png") no-repeat center 0;
}
.portfolio-soft-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-soft-wrap-4-active.png") no-repeat center 0;
}
.portfolio-section-wrap{
    min-height: 596px;
}
.portfolio-section-wrap>li{
}
.portfolio-section-wrap>li li{
    height: 500px;
}
.ortfolio-soft-bottom-1>li:nth-of-type(1){
    padding-left: 100px;
}
.ortfolio-soft-bottom-2>li:nth-of-type(1){
    padding-left: 100px;
}
.ortfolio-soft-bottom-3>li:nth-of-type(1){
    padding-left: 100px;
}
.ortfolio-soft-bottom-1>li:nth-of-type(1) .swiper-slide{
    height: 500px;
}
.portfolio-rnt-wrap{
    height: 500px;
    float: left;
    background: url("../images/portfolio-rnt.png") no-repeat -35px 0;
    overflow: hidden;
}
.portfolio-pc-wrap{
    height: 500px;
    float: left;
    background: url("../images/portfolio-pc.png") no-repeat center center;
    background-size: 100% 70%;
    overflow: hidden;
}
 .portfolio-analysis-wrap{
     height: 500px;
     float: left;
     background: url("../images/portfolio-pc.png") no-repeat center center;
     background-size: 100% 70%;
     overflow: hidden;
 }
.portfolio-Patrol-wrap{
    height: 500px;
    float: left;
    background: url("../images/portfolio-rnt.png") no-repeat -35px 0;
    overflow: hidden;
}
#portfolio-rnt,#portfolio-Patrol{
    width: 300px;
    height: 500px;
    margin-left: 200px;
    margin-top: 23px;
}
#portfolio-pc{
    width: 473px;
    height: 300px;
    margin-left: 48px;
    margin-top: 93px;
}
#portfolio-analysis{
    width: 473px;
    height: 300px;
    margin-left: 49px;
    margin-top: 93px;
}
#portfolio-rnt .portfolio-rnt1{
    width:100%;
    height: 500px;
    background: url("../images/portfolio-rnt1.png") no-repeat ;
}
#portfolio-rnt .portfolio-rnt2{
    width:100%;
    height: 500px;
    background: url("../images/portfolio-rnt2.png") no-repeat ;
}
#portfolio-rnt .portfolio-rnt3{
    width:100%;
    height: 500px;
    background: url("../images/portfolio-rnt3.png") no-repeat ;
}
#portfolio-rnt .portfolio-rnt4{
    width:100%;
    height: 500px;
    background: url("../images/portfolio-rnt4.png") no-repeat ;
}
#portfolio-pc .portfolio-pc1{
    width:100%;
    height: 300px;
    background: url("../images/portfolio-pc1.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-pc .portfolio-pc2{
    width:100%;
    height: 300px;
    background: url("../images/portfolio-pc2.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-pc .portfolio-pc3{
    width:100%;
    height: 300px;
    background: url("../images/portfolio-pc3.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-pc .portfolio-pc4{
    width:100%;
    height: 300px;
    background: url("../images/portfolio-pc4.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-analysis .portfolio-analysis1{
    width:100%;
    height: 300px;
    background: url("../images/portfolio-analysis1.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-analysis .portfolio-analysis2{
    width:100%;
    height: 300px;
    background: url("../images/portfolio-analysis2.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-analysis .portfolio-analysis3{
    width:100%;
    height: 300px;
    background: url("../images/portfolio-analysis3.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-analysis .portfolio-analysis4{
    width:100%;
    height: 300px;
    background: url("../images/portfolio-analysis4.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-Patrol .portfolio-analysis1{
    width:100%;
    height: 500px;
    background: url("../images/portfolio-Patrol-1.png") no-repeat ;
    background-size: 100% 100%;
}
#portfolio-Patrol .portfolio-analysis2{
    width:100%;
    height: 500px;
    background: url("../images/portfolio-Patrol-2.png") no-repeat ;
    background-size: 100% 100%;
}
.ortfolio-soft-bottom-1 li:nth-of-type(2){
    padding-left: 100px;
}
/*.ortfolio-soft-bottom-2 li:nth-of-type(1){*/
    /*background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center;*/
    /*background-size: 100% 80%;*/
/*}*/
.ortfolio-soft-bottom-2 li:nth-of-type(2){
    padding-left:100px;
}
/*.ortfolio-soft-bottom-3 li:nth-of-type(1){*/
    /*background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center;*/
    /*background-size: 100% 80%;*/
/*}*/
.ortfolio-soft-bottom-3 li:nth-of-type(2){
    padding-left:100px;
}
.ortfolio-soft-bottom-title{
    font-size:26px;
    font-weight:bold;
    color:#333;
    margin: 155px 0 27px;
    text-align: left;
}
.ortfolio-soft-bottom-des{
    margin: 10px 0 20px;
    font-size: 18px;
    color: #666;
    position: relative;
    text-align: left;
}
.ortfolio-soft-bottom-des span{
    width:6px;
    height:6px;
    margin-right: 10px;
    display: inline-block;
    position: relative;
}
.ortfolio-soft-bottom-des span:before{
    position: absolute;
    content: '';
    top: 50%;
    margin-top: -8px;
    width: 10px;
    height: 10px;
    background: rgba(66,160,251,1);
    border-radius: 50%;
}
.padding20-0-70{
    padding: 70px 0 70px;
}
/*硬件sta-----*/
.portfolio-hardware-top{
    background: #fff;
    padding-top: 36px !important;
    padding-bottom: 0;
}
.portfolio-hardware-wrap li{
    color:rgba(6,14,19,.8);
    font-size: 20px;
    cursor: pointer;
    position: relative;
    width: 200px;
    float: left;
}
.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-active.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(5){
    padding-top: 60px;
    background: url("../images/portfolio-hardware-wrap-5.png") no-repeat center 0;
}.portfolio-hardware-wrap li:nth-of-type(6){
    padding-top: 60px;
    background: url("../images/portfolio-hardware-wrap-6.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-hardware-wrap li:nth-of-type(5).active{
    color: #3F9FFE;
    padding-bottom: 10px;
    /*border-bottom: 3px solid rgba(63,159,254,1);*/
    background: url("../images/portfolio-hardware-wrap-5-active.png") no-repeat center 0;
}.portfolio-hardware-wrap li:nth-of-type(6).active{
    color: #3F9FFE;
    padding-bottom: 10px;
    /*border-bottom: 3px solid rgba(63,159,254,1);*/
    background: url("../images/portfolio-hardware-wrap-6-active.png") no-repeat center 0;
}
.portfolio-section-wrap{
}
.portfolio-section-wrap>li{
}
.portfolio-section-wrap>li li{
}
.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: 90px auto 0 ;
    padding-right: 100px;
}
.ortfolio-hardware-bottom-1 li:nth-of-type(2){
    /*padding-left: 100px;*/
    background: url("../images/produect_dev1.jpg") no-repeat center 0;
    height: 375px;
    background-size: 658px 375px;
    /*background-size: 578px 500px;*/
}
.ortfolio-hardware-bottom-2 li:nth-of-type(1){
    margin-top: 190px;
    height: 200px;
}
.ortfolio-hardware-bottom-2 li:nth-of-type(2){
    background: url("../images/produect_dev4new.png") no-repeat center 0;
    /*width: 383px;*/
    height: 500px;
}
.ortfolio-hardware-bottom-3 li:nth-of-type(1){
    margin-top: 130px;
    height: 200px;
    /*padding-left: 50px;*/
    /*width: 460px;*/
    /*margin-left: 100px;*/
}
.ortfolio-hardware-bottom-3 li:nth-of-type(2){
    background: url("../images/produect_dev3new.png") no-repeat center center;
    /*width: 298px;*/
    height: 500px;
    /*margin-left: 108px;*/
}
.ortfolio-hardware-bottom-4 li:nth-of-type(1){
    margin-top: 110px;
    height: 200px;
}
.ortfolio-hardware-bottom-4 li:nth-of-type(2){
    background: url("../images/produect_dev2new.png") no-repeat center center;
    /*width: 297px;*/
    height: 500px;
    /*margin-left: 180px;*/
}
.ortfolio-hardware-bottom-5 li:nth-of-type(1){
    margin-top: 187px;
    height: 200px;
}
.ortfolio-hardware-bottom-5 li:nth-of-type(2){
    background: url("../images/produect_dev5.jpg") no-repeat center center;
    /*width: 297px;*/
    height: 500px;
    /*margin-left: 180px;*/
}
.ortfolio-hardware-bottom-6 li:nth-of-type(1){
    margin-top: 187px;
    height: 200px;
}
.ortfolio-hardware-bottom-6 li:nth-of-type(2){
    background: url("../images/produect_dev6.png") no-repeat center center;
    /*width: 297px;*/
    height: 337px;
    margin-top: 120px;
    /*margin-left: 180px;*/
}
.ortfolio-hardware-bottom-1{
}
.ortfolio-hardware-bottom-title{
    font-size:26px;
    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%;
}