@charset "utf-8";

#product{overflow:hidden;z-index: 3;position: relative;background: #fff;border-bottom: 1px solid #e6e6e6;}

#product .catalog{float:left; width:20%; float:left; height:100%; border-right:1px solid #e6e6e6; box-sizing:border-box; margin-bottom:-10000px; padding-bottom:10000px; position:relative;}
#product.fixed .catalog{position:fixed; top:0; z-index:2;}

#product .catalog>ul{border-bottom:1px solid #e6e6e6;}
#product .catalog ul>li{position:relative; margin-top:-1px;}
#product .catalog ul>li>.plus{position:absolute; width:24px; height:24px; right:20px; top:0; margin-top:17px; cursor:pointer;}
#product .catalog ul>li ul>li .plus{position:absolute; width:24px; height:24px; right:20px; top:0; margin-top:10px; cursor:pointer;}
#product .catalog ul>li .plus:before{width:14px; height:2px; background:#cdcdcd; content:''; display:block; position:absolute; left:50%; top:50%; margin:-1px auto auto -7px;}
#product .catalog ul>li .plus:after{width:2px; height:14px; background:#cdcdcd; content:''; display:block; position:absolute; left:50%; top:50%; margin:-7px auto auto -1px;}
#product .catalog ul>li>.less{position:absolute; width:24px; height:24px; right:20px; top:0; margin-top:17px; cursor:pointer;}
#product .catalog ul>li ul>li .less{position:absolute; width:24px; height:24px; right:20px; top:0; margin-top:10px; cursor:pointer;}
#product .catalog ul>li .less:before{width:14px; height:2px; background:#cdcdcd; content:''; display:block; position:absolute; left:50%; top:50%; margin:-1px auto auto -7px;}

#product .catalog>ul>li>a{display:block; height:60px; line-height:60px; padding:0 8%; font-size:1.7rem; color:#464646; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;}
#product .catalog>ul>li:first-child>a{border-top:0 none;}

#product .catalog>ul>li ul{padding:16px 0; background:#fff; padding-left:14%;}
#product .catalog>ul>li ul>li{padding:8px 7% 8px 0;}
#product .catalog>ul>li ul>li>a{display:block; font-size:1.6rem; color:#464646; line-height:26px; line-height:26px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

#product .catalog>ul>li ul ul{padding:10px 0;}
#product .catalog>ul>li ul ul>li{padding:8px 7%;}
#product .catalog>ul>li ul>li ul>li>a{font-size:1.5rem;}

#product .catalog>ul>li.active>a{color:#fff; background:#1885f5;}
#product .catalog>ul>li.active>.less:before{background:#fff;}
#product .catalog>ul>li.active>.plus:before{background:#fff;}
#product .catalog>ul>li.active>.plus:after{background:#fff;}

#product .catalog li>a:hover{color:#1885f5;}
#product .catalog li.active>a{color:#1885f5; font-weight:bold;}

#product.fixed .list{margin-left:20%;}
#product .list{padding:30px; width:100%; float:left; box-sizing:border-box;}
#product .list .location{font-size:1.5rem;}
#product .list .location>i{display:inline-block; font-size:2rem; vertical-align:top; margin-right:.6rem; color:#999;}
#product .list .location>a{display:inline-block; color:#999; border-bottom:1px solid transparent;}
#product .list .location>a:hover{border-bottom:1px solid #666; color:#666;}
#product .list .location>a:last-child{color:#1885f5; font-weight:bold;}
#product .list .location>a:hover:last-child{border-bottom:1px solid #1885f5;}

#product .list .wrap{margin:30px 0 0; width:100%;}
#product .list .wrap .item{width:23%; float:left; margin:1%; position:relative;}
#product .list .wrap .item:nth-child(4n+1){clear:both;}
#product .list .wrap .item a{display:block; background:#fff; transition:all .3s; position:relative;}
#product .list .wrap .item a:hover{box-shadow:5px 5px 35px rgba(0,0,0,.08);}
#product .list .wrap .item a .img{position:relative; width:100%; padding:71.5% 0 0 0; overflow:hidden;}
#product .list .wrap .item a .img>img{position:absolute; left:0; top:0; right:0; bottom:0; max-width:90%; max-height:90%; margin:auto; transition:all .25s;}
#product .list .wrap .item:hover a .img>img{transform:scale(1.12);}
#product .list .wrap .item a .tit{padding:0 15px 5px 15px; font-size:1.5rem; color:#464646; text-align:center; position:relative; transition:all .2s; height:90px; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;}
#product .list .wrap .item a .tit>span{height:40px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; -webkit-box-pack:center; -webkit-box-align:center; text-overflow:ellipsis;}
#product .list .wrap .item:hover a .tit{color:#000;}
#product .list .wrap .item a .tit:after{content:''; display:block; height:2px; width:25px; background:#3e4095; position:absolute; left:0; right:0; top:0; margin:auto; transition:all .25s;}
#product .list .wrap .item:hover a .tit:after{width:20%;}

#product .list .wrap .item .threeD{width:32px; height:32px; text-align:center; line-height:32px; position:absolute; z-index:1; right:12px; top:12px; box-shadow:none !important; background:none !important;}
#product .list .wrap .item .threeD i{font-size:2.4rem; color:#d8ae5d;}
#product .list .wrap .item .threeD:hover i{color:#464646;}


@media (max-width:1366px){
  #product .catalog>ul>li ul>li>a{font-size:1.5rem;}
  #product .list .wrap .item a .tit{font-size:1.4rem;}
}

@media (max-width:1280px){
  #product .catalog>ul>li ul>li>a{font-size:1.4rem;}
}

@media (max-width:1080px){
  #product .catalog{float:none; width:100%; float:none; height:auto; border-right:0px none; margin-bottom:0; padding-bottom:0; position:relative; left:0; top:0; background:#fff; z-index:9;}

  #product .catalog>ul>li ul>li>a{font-size:1.6rem;}
  #product .list .wrap .item a .tit{font-size:1.5rem;}

  #product .list{padding:30px 20px 30px 20px; width:100%; float:none; box-sizing:border-box;}
  #product .list .wrap .item{width:48%;}
  #product .list .wrap .item:nth-child(2n+1){clear:both;}
  #product .list .wrap .item:nth-child(4n+1){clear:none;}
  #product .list .wrap .item a .tit{padding:0 15px 0 15px; font-size:1.3rem; height:72px;}
  #product .list .wrap .item a .tit>span{height:40px;}

  #product .list .wrap .item.show{opacity:1; transform:translate3d(0,0,0);}

}