@charset "utf-8";



.wiss-cate {
  background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  padding: 70px 0;
  background-image: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/1713/upload/ad/839a3004d5ef0b57230c41370afce99c2815152c61c588489730fba62bd4550a.png');
}

.wiss-cate .tit {
  text-align: center;
}

.wiss-cate .tit h6 {
  font-size: 18px;
  font-weight: 600;
  color: #FF5E0F;
}

.wiss-cate .tit h3 {
  font-size: 40px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  margin: 15px 0 0;
}

.wiss-cate .tab {
  margin: 40px 0 0;
}


.wiss-cate .tab ul {display:flex;justify-content:space-between;align-items:center;}
.wiss-cate .tab ul li {display: inline-block;cursor:pointer;display:flex;align-items:center;}
.wiss-cate .tab ul li .img {overflow: hidden;width:80px;height:65px;background-position:0 0;background-repeat:no-repeat;transition:all 0.35s;background-size:80px;filter: grayscale(100%) brightness(2550%);}
.wiss-cate .tab ul li .txt {flex:1;margin-left:5px;}
.wiss-cate .tab ul li .txt h3{font-weight:400; font-size: 20px;color:#fff;}
.wiss-cate .tab ul li.active .img{background-position: 0 -65px;filter:none;}
.wiss-cate .tab ul li.active .txt h3 {color:#1D88C2}



.wiss-cate .tab-content {
  margin: 50px 0 0;
}

.wiss-cate .tab-content .item {
  display: none;
}

.wiss-cate .tab-content .item.active {
  display: block;
}

.wiss-cate .list {
  position: relative;
}
.wiss-cate .list .swiper {
    padding-bottom: 0px;
}
.wiss-cate .swiper-slide {
  cursor: pointer;
  background: #F6F6F6;
  padding: 20px;
  display: flex;
}

.wiss-cate .swiper-slide .pic {
  width: 45%;
}

.wiss-cate .swiper-slide .pic img {
  width: 100%;
}

.wiss-cate .swiper-slide .txt {
  flex: 1;
  padding: 20px 80px 0;
}

.wiss-cate .swiper-slide .txt h5 {
  font-size: 34px;
  color: #111;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.wiss-cate .swiper-slide .txt h5 a {
  font-size: 34px;
  color: #111;
  font-weight: 600;
}

.wiss-cate .swiper-slide .txt h5 a:hover {
  color: #FF5E0E;
}

.wiss-cate .swiper-slide .txt p {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 30px;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.wiss-cate .swiper-pagination {
  width: auto;
  left: calc(45% + 80px);
  font-size: 0;
  bottom: 48px;
}

.wiss-cate .swiper-pagination-bullet {
  width: 36px;
  height: 7px;
  margin: 0 3px;
  background: #C5C5C5;
  border-radius: 0;
  opacity: 1;
  transition: all 0.3s ease 0s;
}

.wiss-cate .swiper-pagination-bullet-active {
  background: #FF5E0E;
  width: 85px;
}

.wiss-cate .item ul {
  display: flex;
  flex-wrap: wrap;
  margin: 21px -9px 0;
}

.wiss-cate .item ul li {
  width: 25%;
  padding: 9px;
}

.wiss-cate .item ul li:hover h6 {
  background: #FF5E0E;
}

.wiss-cate .item ul li .pic {
  display: block;
  position: relative;
  overflow: hidden;
}

.wiss-cate .item ul li .pic>img {
  width: 75%;
  display: block;
  -webkit-transition: transform .5s;
  margin: 0 auto;
}

.wiss-cate .item ul li h6 {
  font-size: 17px;
  height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 10px;
  color: #fff;
  background: #8C8C8C;
}

.wiss-cate .item ul li h6 a {
  display: block;
  line-height: 24px;
  max-height: 66px;
  overflow: hidden;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.wiss-cate .item ul li h6 a:hover h6 {}

@media screen and (max-width:1100px){
  .wiss-cate .tab ul{
        flex-wrap: nowrap;
            overflow-x: auto;
  }
  .wiss-cate .tab ul li{
    width: 50%;
    flex-shrink: 0;
  }
}

@media screen and (max-width:992px){
  .wiss-cate .swiper-slide .txt{
    padding: 20px !important;
  }
}

@media screen and (max-width:768px){
  .wiss-cate .swiper-slide{
    flex-direction: column;
  }
  .wiss-cate .swiper-slide .pic{
    width:100% !important;
  }
  .wiss-cate .swiper-slide .txt h5{
    font-size: 24px;
  }
  .wiss-cate{
    padding: 30px 0 !important;
  }
  .wiss-cate .tit h3{
    font-size: 24px !important;
    margin-bottom: 10px !important;
  }
  .wiss-cate .tab ul li .txt h3{
    font-size: 14px !important;
  }
  .wiss-cate .swiper-slide .txt h5 a{
    font-size: 24px !important;
  }
  .wiss-cate .swiper-slide .txt p{
    font-size: 14px !important;
    margin: 0 !important;
  }
}