.main{padding-top:80px;padding-bottom:60px;}

.main-right{margin-left:340px;}

.main-left{float:left;width:260px;}
.main-left h3 {
    font-size: 18px;
    height: 50px;
    line-height: 49px;
    padding: 0 0 0 7px;
    font-weight: bold;
    border-bottom: 1px solid #e2e2e2;
    color: #212121;
    position: relative;
    font-family: "Jost, sans-serif";
} 

.sidemenu{margin:0 0 20px;}
.sidemenu > ul{}
.sidemenu > ul > li{border-bottom:1px solid #e2e2e2;}
.sidemenu > ul > li h5{line-height:22px;display:block;padding:12px 0 12px 13px;font-size:15px;color:#212121;cursor:pointer;position:relative;}
.sidemenu > ul > li h5 a{display:block;margin-right:40px;box-sizing:border-box;}
.sidemenu > ul > li h5 a:hover{color: #bfa17c;text-decoration:underline;}
.sidemenu > ul > li h5 span{position:absolute;right:0;top:0;background:url("../images/i4.png") no-repeat center;width:40px;height:45px;display:block;}

.sidemenu > ul > li ul{display:none;}
.sidemenu > ul > li ul li{line-height:18px;border-bottom:1px dashed #DCDCDC;background:#fff;padding:8px 13px;}
.sidemenu > ul > li ul li:last-child{border-bottom:none;}
.sidemenu > ul > li ul li a{padding-left:15px;font-size:13px;color:#484848;display:block;}
.sidemenu > ul > li ul li.active a,.sidemenu > ul > li ul li a:hover{color:#bfa17c;background:url("../images/dot3.png") no-repeat left 9px;}

.sidemenu > ul > li.active h5{color:#bfa17c;border-bottom:1px solid #e2e2e2;}
.sidemenu > ul > li.active span{background:url("../images/i4-1.png") no-repeat center;}

.prolist{}
.prolist .tit{border-bottom:1px solid #e2e2e2;}
.prolist .tit h1{line-height:22px;display:block;padding:12px 0 12px 13px;font-size:22px;color:#212121;cursor:pointer;font-family: Jost, sans-serif;position:relative;}

.prolist ul{margin:0 0 0 -3%;display:flex;flex-wrap: wrap;}
.prolist ul li{width:30.3333333%;margin:25px 0 0 3%;text-align:center;position:relative;box-sizing:border-box;}
.prolist ul li .pic{display:block;width:100%;position:relative;box-shadow:7px 7px 27px 0 rgba(233,232,242,0.75);}
.prolist ul li .pic img{width:100%;display:block;    aspect-ratio: 1;}
.prolist ul li .pic::before{content:'';position:absolute;z-index:20;left:13px;top:13px;right:13px;bottom:13px;border:2px solid #F1F7F5;opacity:0;-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;transition:opacity 0.2s, transform 0.35s;-webkit-transform:scale(0);transform:scale(0);}
.prolist ul li .pic::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5) url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/961/upload/ad/6eb79b9ceaaf7796ce39bf31806d3d4b267168a0a5bdd41f4dc48104e27ac284.png");background-repeat:no-repeat;background-position:center;display:block;opacity:0;-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;transition:opacity 0.2s, transform 0.35s;-webkit-transform:scale(0);transform:scale(0);}
.prolist ul li h6{height:60px;text-transform:capitalize;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
.prolist ul li h6 a{font-size:17px;color:#212121;display:block;line-height:20px;height:40px;overflow:hidden;font-family:Jost, sans-serif;}
.prolist ul li h6 a:hover{color:#bfa17c;}
.prolist ul li h6 a:active{color:#bfa17c;}

.prolist ul li:hover .pic::before{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.prolist ul li:hover .pic::after{opacity:1;-webkit-transform:scale(1);transform:scale(1);}


@media screen and (max-width:768px){
  .main{padding-top:25px;padding-bottom:30px;}

  .main-right{margin-left:0;}

  .main-left{float:none;width:100%;}
  .main-left h3{display:block;}

  .sidemenu > ul{display:none;}

  .prolist .tit{display:none;}
  .prolist .tit h1{line-height:22px;display:block;padding:12px 0;font-size:15px;color:#212121;cursor:pointer;position:relative;}
  .prolist ul{margin:0 0 0 -2%;}
  .prolist ul li{width:48%;margin:0 0 20px 2%;}
  .prolist ul li .pic::after,.prolist ul li .pic::before{display:none;}
  .prolist ul li h6{height:50px;}
}