@charset "utf-8";

#head{background:#fff;}
#head .logo a>img.white{opacity:0;}
#head .logo a>img.blue{opacity:1;}
#head .logo a>span{color:#666;}
#head #menu>li>a{color:#464646;}
#head #search{color:#999;}

html,body{background:#f4f5f6;}
#contact{border-top:1px solid #e6e6e6; margin-top:-1px;}

#banner{width:100%; height:300px; background:url('../images/pronavbg.jpg') center/cover no-repeat; position:relative;}
#banner .wrap{padding:90px 150px 0 150px;}
#banner .l{width:50%; float:left; margin-top:80px; max-width:400px; position:relative;}
#banner .l input{background:#fff; width:100%; height:46px; line-height:46px; font-size:1.5rem; border-radius:5px; padding:0 1.2rem; box-sizing:border-box;}
#banner .l input::placeholder{color:#464646;}
#banner .l .iconfont{font-size:2rem; position:absolute; right:1rem; top:1rem; display:inline-block; color:#464646;}
#banner .r{width:50%; float:right; margin-top:60px; max-width:400px; color:#fff; text-align:right;}
#banner .r .tit{font-size:2.6rem;}
#banner .r .stock{color:#fff; font-size:1.4rem; margin-top:1.2rem;}
#banner .r .stock a{color:#fff; display:inline-block; border:1px solid #fff; border-radius:5px; padding:7px 15px 7px 11px; transition:all .2s;}
#banner .r .stock a .iconfont{display:inline-block; margin-right:.5rem;}
#banner .r .stock a:hover{background:#1885f5; color:#fff; border:1px solid #1885f5;}

#product{overflow:hidden;}

#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;}

#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:#3e4095;}
#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:#3e4095;}
#product .catalog li.active>a{color:#3e4095; font-weight:bold;}


#product .list{padding:30px 30px 30px 40px; width:80%; 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;}
#product .list .wrap .item{width:100%; margin-bottom:30px; display:table; background:#fff; transition:all .3s; table-layout:fixed;}
#product .list .wrap .item:hover{box-shadow:5px 5px 35px rgba(0,0,0,.08);}
#product .list .wrap .item .img{display:table-cell; width:400px; height:286px; overflow:hidden; text-align:center; vertical-align:middle; border-right:1px solid #eee;}
#product .list .wrap .item .img img{max-width:88%; max-height:88%; transition:all .25s;}
#product .list .wrap .item:hover .img img{transform:scale(1.1);}
#product .list .wrap .item .box{display:table-cell; padding:25px 30px; width:100%; position:relative;}
#product .list .wrap .item .box .tit{display:block; color:#464646; font-size:2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#product .list .wrap .item .box .tit:hover{color:#3e4095;}
#product .list .wrap .item .threeD{color:#fff; position:absolute; right:30px; top:22px; font-size:1.3rem; background:#3e4095; height:32px; line-height:30px; display:inline-block; padding:0 5px; border-radius:4px; transition:all .2s;}
#product .list .wrap .item .threeD i{display:inline-block; font-size:2.2rem; vertical-align:middle; margin-right:.3rem;}
#product .list .wrap .item .threeD:hover{background:#1885f5;}
#product .list .wrap .item .box .son{margin-top:20px; border-top:1px solid #eee; padding-top:18px; padding-left:20px;}
#product .list .wrap .item .box .desc{margin-top:20px; padding-top:18px; padding-left:20px;font-size:1.6rem;}
#product .list .wrap .item .box .son li{font-size:2rem; padding:6px 0; position:relative;}
#product .list .wrap .item .box .son li>a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#product .list .wrap .item .box .son li:after{content:''; display:block; width:6px; height:6px; background:#666; border-radius:100%; position:absolute; left:-18px; top:14px;}
#product .list .wrap .item .box .son li>a>span{position:relative;}
#product .list .wrap .item .box .son li>a>span:after{content:''; display:none; width:100%; height:1px; position:absolute; left:0; bottom:0; background:#333;}
#product .list .wrap .item .box .son li>a:hover>span{color:#333;}
#product .list .wrap .item .box .son li>a:hover>span:after{display:block;}


@media (max-width:1440px){
  #banner .wrap{padding:90px 120px 0 120px;}
}

@media (max-width:1366px){
  #banner .wrap{padding:90px 100px 0 100px;}

  #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){
  #banner .wrap{padding:90px 80px 0 80px;}

  #product .catalog>ul>li ul>li>a{font-size:1.4rem;}
}

@media (max-width:1080px){
  #banner{height:auto;}
  #banner .wrap{padding:90px 20px 50px 20px;}
  #banner .l{width:100%; float:none; margin-top:20px; max-width:none;}
  #banner .r{width:100%; float:none; margin-top:20px; max-width:none; text-align:left;}
  #banner .r .tit{font-size:2.4rem;}

  #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{display:block;}
  #product .list .wrap .item .img{display:block; width:100%; height:auto; padding:20px 0; border-right:0px none; border-bottom:1px solid #eee;}
  #product .list .wrap .item .img img{
      /*height:120px;*/
  }

  #product .list .wrap .item .box{display:block; padding:20px; box-sizing:border-box;}
  #product .list .wrap .item .box .tit{font-size:1.7rem;}
  #product .list .wrap .item .threeD{right:20px;}
  #product .list .wrap .item .box .son{margin-top:5px; border-top:0 none; padding-top:10px;}
  #product .list .wrap .item .box .son li{font-size:1.4rem;}

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

}