.main{padding-top:80px;padding-bottom:60px;display: flex;justify-content: space-between;}

.main-right{/* margin-left:340px; */width: 73%;}

.main-left{/* float:left; */width: 23%;}
.main-left h3{display:none;font-size:20px;color:#fff;height:50px;line-height:50px;padding:0 0 0 20px;background:var(--color-primary);position:relative;}
.main-left h3::after{display:block;font-family:"qico";content: "\e727";position:absolute;top:6px;right:6px;width:40px;height:40px;line-height:40px;text-align:center;font-size:20px;-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);}

.preview .swiper-wrapper .ddpic{
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 95%;
  position: relative;
  overflow: hidden;
}
 .preview .swiper-wrapper .ddpic img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  transition: all .3s ease 0s;
 }

.sidemenu{margin:0 0 20px;position: sticky;top: 0;}
.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;
    font-weight: bold;
    white-space: nowrap;}
.sidemenu > ul > li h5 a:hover{color:var(--color-primary);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{}
.active ul{ display:block !important;}
.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:var(--color-primary);
                                                        /*background:url("./pics/dot3.png") no-repeat left 9px;*/
  
}

.sidemenu > ul > li.active h5{color:var(--color-primary);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:30px;display:block;padding:12px 0 12px 0px;font-size:25px;color:#212121;cursor:pointer;position:relative;}

.prolist ul{margin:0 0 0 -3%;}
.prolist ul li{width:22%;margin:25px 0 0 3%;float:left;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 color-mix(in srgb, var(--color-second) 75%, transparent);}
.prolist ul li .pic img{width:100%;display:block;}
.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: color-mix(in srgb, var(--color-second) 50%, transparent) url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/1298/upload/sort/7a3b7c76664f46d9ebb01858e4c6d1fa18b69b1ece4f57f4a6ffde329d9a1e9f.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:14px;color:#212121;display:block;line-height:20px;height:40px;overflow:hidden;}
.prolist ul li h6 a:hover{color: #0c659f;}

.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;}
  
  .main-right{width: 100%;}
.main-left{ display:none;}
}