@charset "utf-8";

#banner{width: 100%; margin-top: 88px; background: #1c1c1c url('../img/b_product.jpg') no-repeat center top/cover; padding: 80px 50px; box-sizing: border-box;}
#banner .catalog{text-align: center;}
#banner .catalog a{display: inline-block; padding: 13px 20px 14px 20px; background: #fff; margin: 0 6px 10px 0; font-size: 1.6rem; color: #2b2b2b; font-weight: 300; transition: all .3s;}
#banner .catalog a:hover, #banner .catalog a.active{background: #ec0000; color: #fff;}

@media (max-width:1279px){
  #banner{margin-top: 60px; padding: 30px 20px 20px 20px; background: #2b2b2b;}
  #banner .catalog{text-align: left;}
  #banner .catalog a{padding: 3px 0; background: none; margin: 0 8px 12px 0; font-size: 1.5rem; color: #fff;}
  #banner .catalog a:hover, #banner .catalog a.active{background: none; color: #ec0000; border-bottom: 1px solid #ec0000;}
}


#product{margin-top: 50px; border-bottom: 1px solid #e6e6e6; padding-bottom: 70px;}
#product .path{max-width: 1200px; margin: auto; color: #aaa; font-size: 1.5rem;}
#product .path a{color: #aaa;}
#product .path a:first-child::before{content: '\e621'; font-family: iconfont; font-size: 1.8rem; vertical-align: middle; position: relative; top: -1px; margin-right: 3px;}
#product .path a:hover{color: #ec0000;}
#product .path a:last-child{color: #ec0000; border-bottom: 1px solid #ec0000;}

#product .list{max-width: 1200px; margin: auto; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;}
#product .list::after{width: 30%;}
#product .list a{display: block; width: 30%; margin-bottom: 5%;}
#product .list a .img{width: 100%; height: 0; padding-bottom: 66.6667%; overflow: hidden; position: relative;}
#product .list a .img>div{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #eee no-repeat center/cover; transition: all .4s;}
#product .list a:hover .img>div{transform: scale(1.1);}
#product .list a .img::after{content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: all .3s; z-index: 1;}
#product .list a .img>span{position: absolute; z-index: 2; left: 0; top: 35px; right: 0; bottom: 0; color: #fff; display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: 1.3; font-size: 1.6rem; opacity: 0; transition: all .35s;}
#product .list a:hover .img>span{top: 0; opacity: 1;}
#product .list a:hover .img::after{background: rgba(230,0,0,.7);}
#product .list a .box{border: 1px solid #e6e6e6; border-top: 0px none; padding: 20px;}
#product .list a .box .tit{font-size: 1.6rem; color: #2b2b2b; transition: all .25s;}
#product .list a:hover .box .tit{color: #ec0000;}
#product .list a .box .cls{font-size: 1.4rem; font-weight: 300; border-top: 1px solid #eee; margin-top: 20px; padding-top: 15px; position: relative; padding-right: 30px;}
#product .list a .box .cls::after{content: '\e7c3'; font-family: iconfont; font-size: 2rem; position: absolute; right: 0; top: 13px; color: #ccc;}

@media (max-width:1279px){
  #product{margin-top: 25px; padding-bottom: 50px;}
  #product .path{font-size: 1.2rem; padding: 0 18px;}
  #product .path a:first-child::before{font-size: 1.5rem;}
  #product .list{padding: 0 20px; margin-top: 30px;}
  #product .list a{display: block; width: 100%; margin-bottom: 5%;}
}


#product .view{max-width: 1200px; margin: 40px auto;}
#product .view h1{font-size: 3.6rem; color: #2b2b2b; font-weight: normal; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 25px; line-height: 1.3;}
#product .view .desc{text-align: center; color: #bbb; font-size: 1.4rem; margin-top: 20px;}
#product .view .desc dl{display: inline-block;}
#product .view .desc dl:first-child{margin-right: 30px;}
#product .view .desc dl dt, #product .view .desc dl dd{display: inline-block;}
#product .view .desc a{color: #bbb;}
#product .view .desc a:hover{color: #ec0000;}
#product .view .desc a .icon-weixin{color: #4cbf00; font-size: 2rem; vertical-align: middle;}

@media (max-width:1279px){
  #product .view h1{font-size: 3.2rem; padding-left: 20px; padding-right: 20px; line-height: 1.3;}
}


#pro-move{margin:50px auto; min-height:360px; position:relative; z-index:1; text-align:center;}
#pro-move .bx-wrapper img{display:block; margin:auto; height:auto; max-height:600px;}
#pro-move .bx-wrapper{box-shadow:none; margin:0 0 20px 0;}
#pro-move .bx-wrapper .bx-viewport{border:0px none; box-shadow:none; left:0;}
#pro-move .bx-pager{font-size:0; text-align:center; padding:0 50px; text-align:center;}
#pro-move .bx-pager a{display:inline-block; width:64px; height:64px; vertical-align:middle; margin-right:6px; margin-bottom:6px; background:#fff; box-sizing:border-box; text-align:center; transition:all .2s; border:1px solid #ddd; box-sizing:border-box; line-height:61px; cursor:pointer;}
#pro-move .bx-pager a>img{max-width:60px; max-height:60px; vertical-align:middle;}
#pro-move .bx-pager a:after{content:''; display:inline-block; height:100%; vertical-align:middle; width:0; font-size:0;}
#pro-move .bx-pager a.active{box-shadow:0 0 0 0; background:#fff; position:relative; border-bottom:3px solid #ff0000;}
#pro-move .bx-pager a.active>img{-webkit-filter:brightness(116%); filter:brightness(116%);}
#pro-move .bx-prev{display:none;}
#pro-move .bx-next{display:none;}
#pro-move .bx-wrapper .bx-controls-direction a{opacity:0;}


#product .view .detail{margin-top: 50px;}
#product .view .detail dl{margin-top: 50px;}
#product .view .detail dl dt{font-size: 3.6rem; color: #ec0000; font-weight: 300; border-bottom: 1px solid #e6e6e6; padding-bottom: 15px; margin-bottom: 10px;}
#product .view .detail dl dd{font-size: 1.5rem; line-height: 1.8; letter-spacing: .05rem;}
#product .view .detail dl dd p, #product .view .detail dl dd div{font-size: 1.5rem; line-height: 1.8; margin-top: 20px;}

@media (max-width:1279px){
  #product .view .detail{padding-left: 20px; padding-right: 20px;}
  #product .view .detail dl dt{font-size: 3rem;}
}


#product .prev-next{margin-top: 70px; border-top: 1px solid #eee; display: flex; justify-content: space-between;}
#product .prev-next::after{display: none;}
#product .prev-next>div{display: block; margin-top: 20px;}
#product .prev-next>div a{font-size: 1.5rem;}
#product .prev-next>div a:hover{color: red;}
#product .prev-next .prev a::before{content: '\e613'; font-family: iconfont; font-size: 1.87rem; margin-right: 8px;}
#product .prev-next .next{text-align: right;}
#product .prev-next .next a::after{content: '\e613'; font-family: iconfont; font-size: 1.87rem; transform: scaleX(-1); margin-left: 8px; display: inline-block;}

@media (max-width:1279px){
  #product .prev-next{margin-top: 50px; flex-wrap: wrap; padding-top: 10px;}
  #product .prev-next>div{width: 100%; padding: 0 20px; margin-top: 15px;}
  #product .prev-next .next{text-align: left;}
  #product .prev-next .next a::before{content: '\e613'; font-family: iconfont; font-size: 1.87rem; transform: scaleX(-1); margin-right: 8px; display: inline-block;}
  #product .prev-next .next a::after{display: none;}
}