.leftPart {
    flex: 0 0 17%
}

.leftPart .leftTitle {
    line-height: 70px;
    background: var(--main-color);
    text-align: center;
    color: #fff;
    font-size: 28px
}

.leftPart .menuList {
    background: #f2f2f2;
    border: 1px solid #eeeded
}

.leftPart .menuList li {
    width: 100%;
    height: 45px;
    text-align: center;
    line-height: 45px
}

.leftPart .menuList li a {
    font-size: 16px;
    color: #333;
    width: 100%;
    display: inline-block
}

.leftPart .menuList li .menuline {
    clear: both;
    width: 0;
    height: 45px;
    margin: -45px auto 0;
    background: rgba(101,40,41,.3);
    transition: width 1s
}

.leftPart .menuList li:hover a,.leftPart .menuList li.cur a {
    color: var(--main-color-hover);
    font-weight: 700
}

.leftPart .menuList li:hover .menuline,.leftPart .menuList li.cur .menuline {
    width: 100%
}

.leftPart .contactus {
    margin-top: 20px;
    background: #fff
}

.leftPart .contactus .contactCon {
    background: #fff;
    padding: 15px;
    line-height: 2em;
    font-size: 14px;
    color: #494949
}

.leftPart .contactus .contactCon i {
    font-size: 25px;
    color: #0a1734
}



.banner{background-image:url('/images/product-bg.jpg');}
.prolist{
	background: #fff;overflow: hidden;clear: both;
  .prolist1{
    height: auto;
    border: 1px solid #f2f2f2;
    padding-bottom: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    .pic{
      width: 100%;
      .el-image{
		  height:285px;width: 100%;overflow: hidden;
		  img{
			width: 100%;height:280px !important;   transition: all .8s;
		  }
	  }
      
    }
    p{
      text-align: center;
      line-height: 35px;
      display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        position: relative;
        z-index: 3;
    }
    a p{
      color: #333;
      font-size: 16px;
    }
    &:hover{
      background: var(--main-color);
      border: 1px solid var(--main-color-hover);
      a p{
        color: #fff;
      }
      img{
        transform: scale(1.1);
      }
    }
  }
}



.probg{background: #fff;}

.productList{
    margin: 30px auto 40px auto;
    .rightPart{
      flex:0 0 78%;
    }
    .proPart{
      width: 100%;margin-top: 120px;
    }
    .newsPart{
      width: 100%;float: left;
    }
    .proview{
      background: #fff;
      width: calc(100% - 80px);
      overflow: hidden;
      clear: both;
    }
  }


.prolist-pic{
    margin:0 30px 30px 5px; width:500px;height:325px; float: left;
    img{width: 500px;}
}
.proItem{
	width: calc(100% - 500px);
	.protitle{
        font-size: 28px;
        color: #0a1734;
        margin: 30px auto 20px auto;
    }
}



.banner{background:url('/images/product-bg.jpg')}

.productList{
  margin: 30px auto 40px auto;
}
.pro-list{flex: 0 0 31%;margin-left:2%;cursor: pointer;margin-bottom: 20px;}
.pro-list1{
  width:100%;height:200px;border:1px solid #8b8b8b;transition: all 1s;
}
.pro-list2{width:100%;height:80px;background-color: #eaeaea;transition: all 1s;padding:15px;
    position: relative;}

.pro-list:hover .pro-list1{border: 3px solid var(--main-color);}
.pro-list:hover .pro-list2{background-color:var(--main-color) ;}
.pro-list:hover .pro-list2 p{color: #fff;}
.pro-list:hover .pro-list2:before{background-color: #fff;}
.pro-list2 p{font-size:16px;transition: all 1s;}

.pro-list2::before{content: "";transition: all 1s;position: absolute;width: 100px;height:3px;background-color:#999999;bottom: 20px;}


.pagination-block{margin:40px auto;}

footer{justify-content: center;}
.router-link-active {
  text-decoration: none;
  color: #fff;
}
.pro-list:hover a {
  color:#fff;
}

.el-aside .el-image{
  padding:10px;height: 300px;
}

.el-main .title{
  width: 100%;height:80px;
  p{
    font-size: 20px;
  }
}

.detail{margin-top:30px;}

.description{width: 500px;}