@charset "utf-8";

#catalog{border-bottom: 1px solid #dcdcdc;}
#catalog .wrap{display: flex; justify-content: center; align-items: center;}
#catalog .wrap a{display: block; color: #4c4948; font-size: 1.4rem; padding: 30px 10px; margin: 0 20px; transition: all .25s; position: relative;}
#catalog .wrap a:hover, #catalog .wrap a.active{color: #009693;}
#catalog .wrap a.active:after{content: ''; display: block; width: 100%; height: 2px; background: #009693; left: 0; bottom: 0; position: absolute;}
#catalog .wrap i{display: block; width: 7px; height: 7px; background: #e5e5e5;}
#catalog .wrap i:last-child{display: none;}


#product .wrap{margin-top: 100px;}
#product .list{display: flex; flex-wrap: wrap; justify-content: space-between;}
#product .list:after{width: 30%;}
#product .list a{display: block; width: 30%; border: 1px solid #9fa0a0; margin-bottom: 5%; transition: all .2s; position: relative; top: 0;}
#product .list a:hover{border-color: #009693; top: -20px; background: #009693;}
#product .list a .img{height: 0; padding-bottom: 100%;}
#product .list a .con{border-top: 1px solid #9fa0a0; margin: 0 10px;}
#product .list a:hover .con{border-top: 1px solid rgba(255,255,255, .3);}
#product .list a .con .series{font-size: 2rem; color: #009693; padding-top: 15px; transition: all .2s;}
#product .list a .con .tit{color: #000; font-size: 1.6rem; padding-bottom: 30px; margin-top: 7px;}
#product .list a:hover .series{color: #fff;}
#product .list a:hover .tit{color: #fff;}
#product .list a .con .more{color: #303030; font-size: 1.4rem; margin-bottom: 20px; text-align: right;}
#product .list a .con .more i{display: inline-flex; width: 22px; height: 22px; background: #009693; color: #fff; border-radius: 50%; vertical-align: middle; margin-right: 6px; justify-content: center; align-items: center; transition: all .2s;}
#product .list a .con .more i>span{display: block; width: 3px; height: 3px; background: #fff; border-radius: 50%; margin: 0 3px; transition: all .2s;}
#product .list a .con .more i:before, #product .list a .con .more i:after{content: ''; display: block; width: 3px; height: 3px; background: #fff; border-radius: 50%; transition: all .2s;}
#product .list a:hover .more i{background: #fff;}
#product .list a:hover .more i>span{background: #009693;}
#product .list a:hover .con .more i:before, #product .list a:hover .con .more i:after{background: #009693;}
#product .list a:hover .con .more{color: #fff;}

@media (max-width:1199px){
  #catalog .wrap{display: block; padding: 0;}
  #catalog .wrap:after{display: none;}
  #catalog .wrap a{display: block; padding: 20px 0; margin: 0; text-align: center; border-bottom: 1px solid #eee;}
  #catalog .wrap i{display: none;}

  #product .wrap{margin-top: 50px;}
  #product .list:after{width: 0;}
  #product .list a{width: 100%;}
  #product .list a:hover{top: 0;}
}


/* 产品详情 */
#product-view .outline{margin-top: 70px; display: flex; justify-content: space-between;}
#product-view .outline:after{display: none;}
#product-view .outline .l{width: 600px; margin-top: 50px;}
#product-view .outline .l .title{font-size: 6.5rem; color: #595757; padding-bottom: 20px;}
#product-view .outline .l .title-sub{font-size: 3.2rem; margin-top: 20px;}
#product-view .outline .l .title-sub>span{color: #009693;}
#product-view .outline .l .con{color: #595757; line-height: 2; font-size: 1.6rem; margin-top: 60px;}
#product-view .outline .l .con p, .product-view .outline .l .con div{color: #595757; line-height: 2; margin-top: 0;}
#product-view .outline .r{width: 500px; height: 500px;}

#product-view .swiper-container{padding-bottom: 20px;}
#product-view .swiper-pagination{bottom: 0; display: none;}
#product-view .swiper-pagination-bullet{width: 9px; height: 9px; margin:0 6px; opacity:1; background:#ccc; transition:all .25s;}
#product-view .swiper-pagination-bullet-active{opacity:1; background:#0076ce;}

#product-view .tags .item{margin-bottom: 50px;}
#product-view .tags .item .tit{color: #3e3a39; font-size: 2.6rem;}
#product-view .tags .item .con{margin-top: 20px;}

@media (max-width:1199px){
  #product-view .outline{margin-top: 0px; padding-top: 0px; display: block;}
  #product-view .outline .l{width: 100%;}
  #product-view .outline .l .title{font-size: 2.6rem; padding-bottom: 0;}
  #product-view .outline .l .title-sub{font-size: 2rem; margin-top: 10px;}
  #product-view .outline .l .con{margin-top: 20px;}
  #product-view .outline .r{width: 100%; height: auto; margin-top: 50px;}
}

.product-view-tags .item{margin-top: 65px;}
.product-view-tags .item .tit{font-size: 2.4rem; color: #323232;}
.product-view-tags .item .con{margin-top: 32px; line-height: 2;}

@media (max-width:1199px){
  .product-view-tags .item .tit{font-size: 2rem;}
}

#product-view .download .tit{background: #009693; height: 120px; line-height: 120px; text-align: center; font-size: 3rem; color: #fff;}
#product-view .download .con{margin-top: 40px;}
#product-view .download .con li{margin: 20px 0;}
#product-view .download .con a{display: block; font-size: 1.8rem;}
#product-view .download .con a i{margin-right: 20px;}

@media (max-width:1199px){
  #product-view .download .tit{height: 60px; line-height: 60px; font-size: 2.2rem;}
  #product-view .download .con{margin-top: 20px;}
  #product-view .download .con a{display: block; font-size: 1.5rem;}
  #product-view .download .con a i{margin-right: 15px;}
}