.main{padding-top:50px;padding-bottom:60px;}
.main-left{float:left;width:300px;}
.main-right{margin-left:340px;}
/*----------------------------------------*/

.main-left h3{height:50px;line-height:50px;padding:0 0 0 20px;background:var(--btn-bg);font-size:20px;color:#fff;font-weight:600;text-transform:uppercase;}
.main-left h3::after{display:none;font-family:"qico";content: "\e727";float:right;font-size:20px;font-weight:normal;margin-top:0px;margin-right:15px;-webkit-transition: -webkit-transform .3s ease;transition: -webkit-transform .3s ease;transition: transform .3s ease;transition: transform .3s ease, -webkit-transform .3s ease;}
.main-left h3.active::after{-webkit-transform: rotate(45deg) scale(1.08);-ms-transform: rotate(45deg) scale(1.08);transform: rotate(45deg) scale(1.08);}

.sidemenu {
    margin: 0 0 15px
  }
  .sidemenu ul {
    border: 1px solid #ededed;
    border-top: none
  }
  .sidemenu ul li {
    margin: 3px 0 0;
    border-bottom: 1px solid #ededed
  }
  .sidemenu ul li h5 {
    line-height: 24px;
    display: block;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    position: relative
  }
  .sidemenu ul li h5 a {
    color: #333;
    display: block;
    padding: 10px 50px 10px 20px;
    text-transform: capitalize
  }
  .sidemenu ul li h5 a:hover {
    color: var(--active-color);
    text-decoration: underline
  }
  .sidemenu ul li h5 span {
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/i4.png) no-repeat center;
    width: 40px;
    height: 45px;
    display: block
  }
  .sidemenu dl {
    display: none
  }
  .sidemenu dl dd {
    line-height: 40px;
    border-bottom: 1px dashed #dcdcdc;
    background: #fff;
    padding: 0 20px
  }
  .sidemenu dl dd:last-child {
    border-bottom: none
  }
  .sidemenu dl dd a {
    font-size: 15px;
    display: block;
    color: #666;
    padding-left: 15px;
    text-transform: capitalize;
    background: url(../images/i10-1.png) no-repeat left center
  }
  .sidemenu dl dd.active a,.sidemenu dl dd a:hover {
    color: var(--active-color);
    background: url(../images/i10.png) no-repeat left center
  }
  .sidemenu ul li.active h5 {
    border-bottom: 1px solid #ededed
  }
  .sidemenu ul li.active h5 a {
    color: var(--active-color)
  }
  .sidemenu ul li.active span {
    background: url(../images/i4-1.png) no-repeat center
  }
  

  .prolist ul {
    margin: 0 0 0 -2%;
  }
  .prolist ul li {
    width: 31.333333333%;
    float: left;
    text-align: center;
    background: #fff;
    margin: 0 0 20px 2%;
    cursor: pointer;
    box-sizing: border-box
  }
  .prolist ul li .pic {
    display: block;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #c9c9c9;
    padding: 5px;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center
  }
  .prolist ul li .pic img {
    max-width: 90%;
    max-height: 90%;
    display: block;
    transition: all .3s ease 0s;
    -webkit-transition: all .3s ease 0s
  }
  .prolist ul li .t {
    background: #455164;
    text-align: center;
    padding: 20px 10px
  }
  .prolist ul li .t h6 {
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    height: 60px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center
  }
  .prolist ul li:hover .pic {
    border: 1px solid #dedede;
    box-shadow: 5px 5px 40px rgba(0,0,0,.2)
  }
  .prolist ul li:hover .pic img {
    transform: scale(1.06);
    -webkit-transform: scale(1.06);
  }
  .prolist ul li:hover .t {
    background: var(--bg-color);
  }
  .prolist li a:hover {
    color: white;
  }

@media screen and (max-width:768px) {
.main{padding-top:25px;padding-bottom:30px;}
.main-left{float:none;width:100%;}
.main-right{margin-left:0;}

.main-left h3{font-size:18px;padding:0 0 0 15px;}
.main-left h3::after{display:block;}

.sidemenu > ul{display:none;}
.sidemenu > ul > li h5{padding:8px 0 8px 15px;font-size:16px;}
.sidemenu > ul > li h5 span{top:calc(50% - 18px);width:36px;height:36px;}

.prolist{margin-top:20px;}
.prolist ul{margin:0 -10px;}
.prolist ul li{width:50%;padding:10px;margin:0;}
.prolist ul li h6 a{font-size:18px;line-height:22px;overflow:hidden;}
}

@media screen and (max-width:576px) {
    .prolist ul li h6 a{font-size:16px;}
    .prolist ul li{width:100%;margin:0;}
.prolist ul li h6 a{overflow:hidden;}
}