@charset "utf-8";
/* CSS Document */

.list-body { position: relative; z-index: 10; margin: -451px auto 0; width: 1200px; min-height: 471px; }
.list-left { padding-top: 461px; width: 210px; float: left; }
.list-right { width: 980px; float: right; }
.pro-store-msg { border: 1px solid #dfdfdf; margin-bottom: 12px; }
.pro-store-msg h3 { color: #666; font-family: "宋体"; font-size: 14px; font-weight: bold; background: #F6F6F6; height: 38px; line-height: 38px; padding: 0 16px; border-bottom: 1px solid #DFDFDF; background-color: #F5F5F5; }
.pro-tit { padding: 10px 0 10px 5px; height: 33px; font-size: 13px; color: #333; font-family: simsun; }
.pro-tit li { float: left; height: 33px; line-height: 33px; padding-left: 10px; position: relative; }
.pro-tit li a { color: #333; }
.pro-tit li a:hover, .pro-tit li b { color: #cb0636; }
.pro-tit .crumbAttr { border: 1px solid #c40000; border-right: none; }
.pro-tit .crumbAttr a { color: #c40000; }
.pro-tit .crumbDelete { background: url(../images/crumbDelete.png) no-repeat; }
.pro-tit .crumbDelete { background-position: 0 0; display: inline-block; height: 22px; overflow: hidden; position: relative; top: -1px; vertical-align: middle; width: 21px; }
.pro-tit .crumbGray { border: 1px solid #e3e3e3; background-color: #f2f2f2; padding-right: 10px; }
.pro-tit .crumbAttr, .pro-tit .crumbGray { height: 22px; line-height: 21px; margin-top: 6px; margin-left: 10px; }
.pro-nav { padding: 0 20px; }
.pro-nav.item1 { height: 230px; overflow: hidden; }
.pro-nav.item2 { height: 153px; overflow: hidden; }
.pro-nav .attr { border-bottom: 1px dotted #eee; }
.pro-nav .attr, .attr ul { *zoom:1
}
.pro-nav .attr:after, .pro-nav .attr ul:after { display: block; clear: both; height: 0; content: ''; }
.pro-nav .attr:last-child { border-bottom: none; }
.pro-nav .btn { border-bottom: none; }
.pro-nav .pro-nav-bd { padding: 19px 0 11px; }
.pro-nav .attrKey { width: 10%; font-size: 14px; color: #333; font-weight: bold; float: left; display: block; height: 16px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-nav .attrValues { float: left; overflow: hidden; position: relative; width: 90%; }
.pro-nav .attrValues ul { margin-left: 25px; }
.pro-nav .attrValues ul li { float: left; height: 16px; line-height: 16px; overflow: hidden; display: block; margin: 0 10px 0px 0; padding-bottom: 7px; vertical-align: top; }
.pro-nav .attrValues ul li a { font-size: 13px; color: #666; }
.pro-nav .attrValues ul li a:hover, .pro-nav .attrValues ul li a.cur { color: #cb0636; text-decoration: none; }
/*综合排序*/
.filter { margin-bottom: 10px; position: relative; -position: static; z-index: 10; background: #fafafa; color: #806f66; height: 35px; line-height: 35px; border: 1px solid #dfdfdf; }
.filter a { font-size: 14px; color: #666; float: left; display: block; position: relative; }
.filter a:hover { text-decoration: none; }
.filter i { position: absolute; display: inline-block; overflow: hidden; }
.filter .fSort { width: 100px; height: 35px; display: block; text-align: center; color: #fff; background-color: #ff530d; }
.filter .fSale, .filter .fPrice { padding: 0 30px 0 20px; }
.filter .fSale { border-right: 1px solid #ddd; }
.filter .fSale i, .filter .fPrice i { height: 11px; line-height: 11px; right: 18px; top: 13px; width: 9px; }
.filter .f-ico-arrow-d, .filter .f-ico-arrow-u { background: url(../images/bg.png) no-repeat; }
.filter .f-ico-arrow-d { background-position: -40px 0; }
.filter .f-ico-arrow-u { background-position: -51px 0; }
.filter .fPrice-box { margin-top: 6px; height: 24px; }
.filter .fPb-item { display: block; float: left; position: relative; }
.filter .fPb-item i { height: 22px; left: 4px; line-height: 22px; /*top: 2px;*/ width: 12px; }
.filter .ui-price-plain { color: #757575; font-size: 12px; font-weight: normal; }
.filter .fPInput, .filter .fPBtn { width: 45px; display: block; }
.filter .fPInput { border: 1px solid #ccc; cursor: text; height: 22px; line-height: 22px; float: left; padding-left: 12px; background-color: #fff; }
.filter .fPb-split { background-position: -78px -106px; display: block; float: left; height: 24px; line-height: 24px; position: static; width: 8px; text-align: center; }
.filter .fPBtn { height: 24px; -line-height: 20px; *line-height:20px;
margin-left: 10px; text-align: center; color: #333; font-size: 13px; border: 1px solid #e3e3e3; background-color: #ececec; }
/*产品列表*/
.g-list-box { padding-top: 30px; margin-bottom: 20px; }
.g-list-tit { text-align: center; padding-top: 40px; margin-bottom: 30px; }
.g-list-tit h2 { font-size: 24px; font-weight: bold; line-height: 40px; }
.g-list-tit h2.hot { color: #d7421e; }
.g-list-tit p { color: #999; font-size: 14px; font-weight: bold; line-height: 28px; }
.g-list-tit p.en { font-family: Arial; font-size: 20px; }
.g-list-tit .line { width: 50px; margin: 0 auto; margin-top: 10px; *margin-top:0;
border-bottom: 2px solid #D7421E; }
.g-list { width: 1220px; margin-bottom: -20px; text-align: center; }
.g-list li { float: left; width: 185px; height: 240px; padding: 30px 50px; margin-right: 20px; margin-bottom: 20px; background-color: #FFF; position: relative; transition: all .1s; }
.g-list li:hover { box-shadow: 5px 5px 5px #EEE; }
.g-list li .g-pic a { width: 185px; height: 185px; line-height: 180px; display: block; font-size: 0; overflow: hidden; text-align: center; text-decoration: none; position: relative; }
.g-list li .g-pic a img { width: 100%; height: 100%; vertical-align: middle; }
.g-list li .g-pic a .sales { display: block; color: #FFF; font-size: 12px; text-align: left; text-indent: 1em; width: 100%; height: 30px; line-height: 30px; background: url(../images/grad01.png) repeat-x; position: absolute; left: 0; bottom: 0; z-index: 1; }
.g-list li .g-txt { margin: 10px 0; }
.g-list li .g-txt .hot-sale { background: url(../images/crumbDelete.png) no-repeat 0 -25px; width: 37px; height: 37px; display: block; position: absolute; top: 15px; right: 15px; }
.g-list-big { width: 1220px; margin-top: 20px; margin-bottom: -20px; text-align: center; }
.g-list-big li { float: left; width: 530px; height: 240px; padding: 30px; margin-right: 20px; margin-bottom: 20px; background-color: #FFF; position: relative; }
.g-list-big li:hover { box-shadow: 5px 5px 5px #EEE; }
.g-list-big li .g-pic a { width: 240px; height: 240px; line-height: 240px; display: block; font-size: 0; overflow: hidden; text-align: center; position: relative; }
.g-list-big li .g-pic a img { max-width: 240px; vertical-align: middle; }
.g-list-big li .g-pic a .sales { display: block; color: #FFF; font-size: 12px; text-align: left; text-indent: 1em; width: 100%; height: 30px; line-height: 30px; background: url(../images/grad01.png) repeat-x; position: absolute; left: 0; bottom: 0; z-index: 1; }
.g-list-big li .g-txt { color: #808080; width: 280px; padding-top: 40px; }
.g-list-big li .g-txt h3 { font-size: 16px; font-weight: bold; margin-bottom: 30px; }
.g-list-big li .g-txt .g-txt-detail { margin-bottom: 20px; }
.g-list-big li .g-txt .price { font-size: 12px; font-weight: bold; text-align: center; height: 30px; line-height: 30px; margin-bottom: 6px; }
.g-list-big li .g-txt .price em { color: #ff531a; font-size: 20px; }
.g-list-big li .g-txt .buy-now { color: #D7421E; font-size: 14px; font-weight: bold; border-radius: 3px; border: 1px solid #FF541A; background-color: #FFF; width: 110px; height: 36px; line-height: 36px; display: inline-block; }
.g-list-big li .g-txt .buy-now:hover { color: #FFF; text-decoration: none; background-color: #FF541A; }
.g-list p { font-size: 14px; max-height: 38px; overflow: hidden; text-align: left; }
.g-list p a { color: #666; }
.g-list p.pro-red { font-size: 12px; color: #D7421E; font-weight: bold; padding-left: 12px; height: 30px; line-height: 30px; margin-bottom: 6px; border: 1px solid #D7421E; border-radius: 3px; position: relative; }
.g-list p.pro-red .price { font-size: 18px; }
.g-list p.pro-red .buy { color: #D7421E; height: 30px; line-height: 30px; padding: 0 10px; margin: -1px; border: 1px solid #e6063c; border-radius: 3px; position: absolute; top: 0; right: 0; z-index: 1; }
.g-list p.pro-red .buy:hover { color: #FFF; text-decoration: none; background-color: #FF541A; }
.g-list p a strong { color: #e6063c; font-weight: normal; }

/*三级页面*/
.list-top-banner{ height: 80px; overflow: hidden; margin-bottom: 20px; position: relative;}
.list-top-banner a{ display: block; height: 100%;}
.list-top-banner img{ width: 100%; height: 100%; object-fit: contain; background-color: #ccc;}
.l_prd_main { min-height: calc(100vh - 292px); margin-top: 10px; }
.l_prd_inline { display: inline-block; *display:inline;*zoom:1;vertical-align: middle; position: relative; }
.l_prd_inline:first-child{ color: #333; font-weight: bold;}
.l_prd_attr_filt { color: #666; font-size: 14px; margin-top: 4px; margin-bottom: 10px; }
.l_prd_attr_filt h2 { font-size: 18px; font-weight: bold; }
.l_prd_attr_filt .l_prd_filt_sel { color: #333; line-height: 22px; border: 1px solid #FFF; border-radius: 5px 5px 0 0; padding: 2px 10px; margin-right: 6px; z-index: 2; }
.l_prd_attr_filt .l_prd_filt_sel:hover { color: #FF5949; border-color: #FF5949; }
.l_prd_attr_filt .l_prd_filt_sel:after { content: ''; width: 100%; height: 8px; background-color: #F9F9F9; position: absolute; left: 0; bottom: -4px; z-index: 101; }
.l_prd_attr_filt:nth-child(2) .l_prd_filt_sel { border: 1px solid #e26b04; border-radius: 0; z-index: 1; }
.l_prd_attr_filt:nth-child(2) .l_prd_filt_sel:after { display: none; }
.l_prd_attr_filt .l_prd_filt_tit, .l_prd_attr_filt .l_prd_filt_arw { color: #FF5949; }
.l_prd_attr_filt .l_prd_filt_del { font-family: sans-serif; margin-left: 4px; cursor: pointer; }
.l_prd_attr_filt .l_prd_filt_arw { cursor: pointer; }
.l_prd_attr_filt .l_prd_filt_clr { cursor: pointer; }
.l_prd_attr_filt .l_prd_filt_clr:hover { color: #1A6EEA; }
.l_prd_filt_layer { display: none; font-size: 13px; white-space: nowrap; min-width: 100%; padding: 10px 30px 10px 10px; border: 1px solid #FF5949; border-radius: 0 0 3px 3px; background-color: #F9F9F9; position: absolute; left: -1px; top: 23px; z-index: 100; }
.l_prd_filt_layer .f-red { color: #FF5949; }
.l_prd_attr_filt .l_prd_filt_sel:hover .l_prd_filt_layer { display: block; }
.l_prd_filt_layer ul { display: inline-block; *display:inline;
*zoom:1;
vertical-align: top; margin: 0 10px; }
.l_prd_filt_layer ul li { height: 30px; line-height: 30px; }
.l_prd_filt_layer ul li a { color: #7B8093; height: 30px; line-height: 30px; transition: background 0.3s; }
.l_prd_filt_layer ul li a:hover { color: #FF5949; text-decoration: none; }
.l_prd_lst_tit { color: #666; height: 36px; line-height: 36px; }
.l_prd_lst_tit .l_prd_lst_filt { color: #666; font-family: "宋体"; font-size: 14px; font-weight: bold; margin-right: 20px; }
.l_prd_lst_tit .l_prd_lst_cat02 { color: #FF0000; margin-right: 10px; }
.l_prd_attr { margin-bottom: 22px;}
.l_prd_attr_box { line-height: 40px; padding-left: 100px; margin-bottom: -1px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background-color: #fff; position: relative; }
.l_prd_attr_box .more{ display: none; color: #FF0000; font-size: 12px; position: absolute; right: 10px; top: 12px; z-index: 2;}
.l_prd_attr_tit { color: #333; font-size: 14px; font-weight: bold; width: 80px; padding: 0 10px 0 14px; margin-right: 20px; background-color: #F7F8FC; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; }
.l_prd_attr_con{ /*height: 40px; overflow: hidden;*/ padding-right: 80px;}
.l_prd_attr_con li { float: left; margin-right: 10px; }
.l_prd_attr_con li a { display: inline-block; color: #333; font-size: 13px; text-align: center; text-decoration: none; white-space: nowrap; height: 26px; line-height: 26px; padding: 0 10px; position: relative; }
.l_prd_attr_con li a:hover { color: #FF0000; text-decoration: none; }
.l_prd_attr_con li.on a { color: #FF0000; padding: 0 10px; }


.l_prd_tab { display: none; height: 50px; margin: 6px 0 40px 0; box-sizing: border-box; }
.l_prd_tab.fixed { width: 1198px; position: fixed; top: 0; z-index: 101; }
.l_prd_tab .l_prd_filt_item { float: left; height: 48px; }
.l_prd_tab .l_prd_filt_item li { float: left; font-size: 24px; text-align: center; width: 288px; height:48px; line-height: 48px; background-color: #fff; position: relative;}
.l_prd_tab .l_prd_filt_item li:first-child{ border-radius: 5px 0 0 5px;}
.l_prd_tab .l_prd_filt_item li:last-child{ border-radius: 0 5px 5px 0;}
.l_prd_tab .l_prd_filt_item li.on { color: #FFF; background-color: #e61226; }
.l_prd_tab .l_prd_filt_item li.on a,.l_prd_tab .l_prd_filt_item li.on a:hover{ color: #FFF;}
.l_prd_tab .l_prd_filt_item li:hover a { color: #C90B08; }
.l_prd_tab .l_prd_filt_item li a{ display: block; color: #202020;}
.l_prd_tab .l_prd_filt_search{ float:right;  padding:9px 40px 0 0;}
.l_prd_tab .l_prd_filt_search .search-text{ border:1px solid #e5e5e5; width:200px; height:28px; margin-right:13px;}
.l_prd_tab .l_prd_filt_search .search-btn{ border-radius: 3px; width:50px; height:30px; background-color: #65adf5; color:#fff;}

.l_prd_filt { height: 34px; line-height: 34px; margin-bottom: 14px; border: 1px solid #E0E0E0; border-left: none; border-bottom: 1px solid #FF0000; background-color: #FFF; }
.l_prd_filt.fixed { width: 1198px; position: fixed; top: 0; z-index: 101; }
.l_prd_filt .l_prd_filt_tit { float: left; color: #FFF; font-size: 14px; text-align: center; width: 100px; height: 35px; line-height: 35px; margin-top: -1px; background-color: #FF0000; }
.l_prd_filt .l_prd_filt_item { float: left; height: 34px; padding: 0 22px; }
.l_prd_filt .l_prd_filt_item a { display: block; color: #666; font-size: 14px; text-align: center; height: 34px; padding-right: 14px; position: relative; }
.l_prd_filt .l_prd_filt_item a:hover { color: #004c84; text-decoration: none; }
.l_prd_filt .l_prd_filt_item a i { display: block; width: 9px; height: 11px; line-height: 11px; background: url(../images/bg.png) -40px 0 no-repeat; position: absolute; right: 0; top: 12px; z-index: 1; }
.l_prd_filt .l_prd_filt_item a.on { color: #FF0000; }
.l_prd_filt .l_prd_filt_item a.on i { background-position: -50px 0; }
.l_prd_filt .l_prd_filt_page { float: right; color: #888; font-family: Arial; font-size: 14px; margin-right: 44px; }
.l_prd_filt .l_prd_filt_page .total { margin-right: 50px; }
.l_prd_filt .l_prd_filt_page .page-link { color: #D3D3D3; font-family: serif; padding: 2px; margin-left: 6px; border: 1px solid #D3D3D3; border-radius: 2px; background-color: #FFF; }
.l_prd_filt .l_prd_filt_page .page-link:hover { color:#FFF; text-decoration: none; border-color: #1c9eff; background-color: #1c9eff; }
.l_prd_filt .l_prd_filt_page .page-link.off, .l_prd_filt .l_prd_filt_page .page-link.off:hover { border-color: #D3D3D3; background-color: #E6E6E6; cursor: default; }
 .l_prd_filt .l_prd_filt_tool{ float: right; margin-right: 10px;}
 .l_prd_filt .l_prd_filt_tool .tool_item{ display: inline-block; margin: 0 10px;}
 .l_prd_filt .l_prd_filt_tool .tool_btn{ color: #fff; padding: 3px 8px; border-radius: 20px; background-color: #2261d3;}
 .l_prd_filt .l_prd_filt_tool .tool_btn:hover{ color: #fff; padding: 3px 8px; border-radius: 20px; background-color: #1E57BD;}

.l_prd_lst { margin-top: 30px; }
.l_prd_lst .list-title { display: flex; margin-bottom: 20px; position: relative;}
.l_prd_lst .list-title .cat-name{ font-size: 24px; margin-right: 30px;} 
.l_prd_lst .list-title .cat-item{ display: inline-block; vertical-align: middle; color: #465167; height: 30px; line-height: 30px; padding: 0 15px; background: #F4F4F4; border-radius: 18px; margin-right: 10px; cursor: pointer;}
.l_prd_lst .list-title .cat-item.cur{ color: #fff; background-color: #FF0000; cursor: default;}
.l_prd_lst .list-title .cat-more{ color: #999; position: absolute; right: 0; bottom: 0; z-index: 100;}
.l_prd_lst .list-title .cat-more a{ color: #999;}
.l_prd_lst ul { margin-right: -22px; margin-bottom: -22px; }
.l_prd_lst li { float: left; width: 186px; height: 268px; margin-right: 16px; margin-bottom: 16px; border-radius: 10px; background-color: #F7F8FC; position: relative; }
.l_prd_lst li:hover { z-index: 100; }
.l_prd_lst li .l_prd_pic, .l_prd_lst .l_prd_pic_img { height: 186px; overflow: hidden; position: relative; }
.l_prd_lst li .l_prd_pic img { width: 100%; height: 100%; }
.l_prd_lst li .l_prd_diy { width: 49px; height: 38px; background: url(../images/list-diy.png) no-repeat; position: absolute; right: 0; top: 0; z-index: 1; transition: all 0.2s; }
.l_prd_lst li .l_prd_model {width: 49px;height: 38px; background: url(../images/list-model.png) no-repeat; position: absolute; right: 0; top: 0; z-index: 1; transition: all 0.2s;}
.l_prd_lst li .l_prd_design { width: 49px; height: 38px; background: url(../images/list-design.png) no-repeat; position: absolute; right: 0; top: 0; z-index: 1; transition: all 0.2s;}
.l_prd_lst .l_prd_tit { padding: 10px;  position: relative; }
.l_prd_lst .l_prd_tit .l_prd_size {color:#999999; font-size: 13px;}
.l_prd_lst .l_prd_tit h3 { color: #333333; width: 100%; height: 40px; line-height: 20px; overflow: hidden; margin-bottom: 10px; }
.l_prd_lst .l_prd_tit h3 a:hover { color: #FF0000; }
.l_prd_lst .l_prd_tit .l_prd_price { font-size: 14px; height:28px; line-height: 28px;}
.l_prd_lst .l_prd_tit .l_prd_price .price { font-size: 16px;}
.l_prd_lst .l_prd_tit .l_prd_price .cost-price { color: #767676; font-size: 14px;}
.l_prd_lst .l_prd_company { display: block; padding: 10px 0; margin-top: 8px; border-top: 1px solid #ebebeb;}
.l_prd_lst .l_prd_company .company{ max-height: 38px; overflow: hidden; padding-left: 0px; position: relative;}
.l_prd_lst .l_prd_company .company .icon{ width: 16px; height: 16px; margin-top: -8px; margin-right: 5px; background-position: -250px -50px; position: absolute; left: 0; top: 50%; z-index: 1;}
.l_prd_lst .l_prd_company .area { color: #999; font-size: 12px; padding-left: 0px; margin-top: 5px;}
.l_prd_lst .l_prd_company .area .tag{ color: #fff; font-size: 12px; line-height: 14px; padding: 0 5px; margin-right: 10px; border-radius: 3px; background-color: #FF0000;}
.l_prd_lst .l-prd-btn-wrap { display: none; right:20px; bottom:10px;}
.l_prd_lst li:hover .l-prd-btn-wrap { display: block; }
.l_prd_lst .l_prd_btn { display: inline-block; color: #65adf5;border:1px solid #65adf5; height: 26px; line-height: 26px; padding: 0 12px; border-radius: 3px; background-color: #fff; }
.l_prd_lst .l_prd_btn:hover { text-decoration: none; background-color: #65adf5; color:#fff; }
.l_prd_lst .l_prd_btn.now_go {  color:#ff603b; border-color: #ff603b; }
.l_prd_lst .l_prd_btn.now_go:hover {  color:#fff; background-color: #ff603b; }
.l_prd_lst .l-prd-btn-fav { display: inline-block; color: #000; height: 26px; line-height: 26px; padding: 0 12px; border: 1px solid #E5E5E5; border-radius: 20px; }
.l_prd_lst .l-prd-btn-fav:hover { color: #FF5949; text-decoration: none; }
.l_prd_lst .l-prd-layer { width: 266px; height: 258px; padding: 10px; border-radius: 10px; background-color: #FFF; box-shadow: 0 0 15px #999; position: absolute; left: -10px; top: 0; z-index: -1; transition: all .3s; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); }
.l_prd_lst li:hover .l-prd-layer { top: -10px; opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }
.l_prd_lst .l-prd-small-pic-lst { text-align: right; width: 84px; position: absolute; right: 10px; top: 10px; z-index: 1; }
.l_prd_lst .l-prd-small-pic { height: 74px; margin-bottom: 17px; position: relative; }
.l_prd_lst .l-prd-small-pic img { width: 70px; height: 70px; border: 1px solid #CECECE; }
.l_prd_lst .l-prd-small-pic:hover img, .l_prd_lst .l-prd-small-pic.on img { border: 2px solid #FF5949; }
.l_prd_lst .l-prd-small-pic:hover:after { content: ''; margin-top: -4px; border-top: 4px dashed transparent; border-bottom: 4px dashed transparent; border-right: 5px solid #FF5949; position: absolute; right: 74px; top: 50%; z-index: 1; }
.l_prd_lst .c-ylo { color: #FF9C00; }
.l_prd_lst .c-org { color: #FF5157; }
.l_prd_lst .ico-cart { display: inline-block; *display:inline;
*zoom:1;
vertical-align: middle; width: 15px; height: 14px; margin-right: 4px; background: url(../images/bg.png) -52px -528px no-repeat; }
.l_prd_lst .ico-fav { display: inline-block; vertical-align: middle; width: 14px; height: 13px; margin: 0 6px 0 0; background: url(../images/details-bg.png) no-repeat; background-position: -18px -32px; }
.l_prd_lst .l-prd-btn-fav.on { cursor: default; }
.l_prd_lst .l-prd-btn-fav.on .ico-fav { background-position: -18px -17px; }
.l_prd_lst .l-prd-btn-fav.off { color: #FFF; background-color: #B3B3B3; }
.l_prd_lst .l-prd-btn-fav.off .ico-fav { background-position: -18px -47px; }
/*三级页面202011*/
.l-prd-main { min-height: calc(100vh - 385px); margin-top: 10px; }
.l-prd-inline { display: inline-block; *display:inline;*zoom:1;vertical-align: middle; position: relative; }
.l-prd-inline:first-child{ color: #333; font-weight: bold;}
.l-prd-attr-filt { color: #666; font-size: 14px; margin-top: 4px; margin-bottom: 10px; }
.l-prd-attr-filt h2 { font-size: 18px; font-weight: bold; }
.l-prd-attr-filt .l-prd-filt-sel { color: #333; line-height: 22px; border: 1px solid #FFF; border-radius: 5px 5px 0 0; padding: 2px 10px; margin-right: 6px; z-index: 2; }
.l-prd-attr-filt .l-prd-filt-sel:hover { color: #FF5949; border-color: #FF5949; }
.l-prd-attr-filt .l-prd-filt-sel:after { content: ''; width: 100%; height: 8px; background-color: #F9F9F9; position: absolute; left: 0; bottom: -4px; z-index: 101; }
.l-prd-attr-filt:nth-child(2) .l-prd-filt-sel { border: 1px solid #e26b04; border-radius: 0; z-index: 1; }
.l-prd-attr-filt:nth-child(2) .l-prd-filt-sel:after { display: none; }
.l-prd-attr-filt .l-prd-filt-tit, .l-prd-attr-filt .l-prd-filt-arw { color: #FF5949; }
.l-prd-attr-filt .l-prd-filt-del { font-family: sans-serif; margin-left: 4px; cursor: pointer; }
.l-prd-attr-filt .l-prd-filt-arw { cursor: pointer; }
.l-prd-attr-filt .l-prd-filt-clr { cursor: pointer; }
.l-prd-attr-filt .l-prd-filt-clr:hover { color: #1A6EEA; }
.l-prd-filt-layer { display: none; font-size: 13px; white-space: nowrap; min-width: 100%; padding: 10px 30px 10px 10px; border: 1px solid #FF5949; border-radius: 0 0 3px 3px; background-color: #F9F9F9; position: absolute; left: -1px; top: 23px; z-index: 100; }
.l-prd-filt-layer .f-red { color: #FF5949; }
.l-prd-attr-filt .l-prd-filt-sel:hover .l-prd-filt-layer { display: block; }
.l-prd-filt-layer ul { display: inline-block; *display:inline;
*zoom:1;
vertical-align: top; margin: 0 10px; }
.l-prd-filt-layer ul li { height: 30px; line-height: 30px; }
.l-prd-filt-layer ul li a { color: #7B8093; height: 30px; line-height: 30px; transition: background 0.3s; }
.l-prd-filt-layer ul li a:hover { color: #FF5949; text-decoration: none; }
.l-prd-lst-tit { color: #666; height: 36px; line-height: 36px; }
.l-prd-lst-tit .l-prd-lst-filt { color: #666; font-family: "宋体"; font-size: 14px; font-weight: bold; margin-right: 20px; }
.l-prd-lst-tit .l-prd-lst-cat02 { color: #2261d3; margin-right: 10px; }
.l-prd-attr { margin-bottom: 22px;}
.l-prd-attr-selected{ color: #999; margin-bottom: 20px;}
.l-prd-attr-selected .item{ display: inline-block; vertical-align: middle; color: #999; height: 28px; line-height: 28px; padding: 0 10px; border: 1px solid #999;}
.l-prd-attr-selected .item .icon{ width: 10px; height: 12px; margin-left: 10px; background-position: -20px -190px; cursor: pointer;}
.l-prd-attr-box { line-height: 40px; padding-left: 100px; margin-bottom: 5px; background-color: #fff; position: relative; }
.l-prd-attr-tit { color: #333; font-size: 14px; font-weight: bold; text-align: center; width: 80px; padding: 0 10px; margin-right: 10px; background-color: #ccc; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; }
.l-prd-attr-con{ margin-left: 10px; margin-bottom: -10px;}
.l-prd-attr-con li { float: left; text-align: center; min-width: 95px; margin-right: 10px; margin-bottom: 10px; background-color: #F6F6F6; position: relative;}
.l-prd-attr-con li a { display: inline-block; color: #333; font-size: 13px; text-align: center; text-decoration: none; white-space: nowrap; height: 26px; line-height: 26px; padding: 0 10px; position: relative; }
.l-prd-attr-con li a:hover { color: #FF0000; text-decoration: none; }
.l-prd-attr-con li.on a { color: #FF0000;}
.l-prd-attr-con li.more a{ padding-right: 20px; position: relative;}
.l-prd-attr-con li.more a::after{ content: ''; margin-top: -3px; border-left: 6px dashed transparent; border-right: 6px dashed transparent; border-top: 6px solid #333; position: absolute; right: 0; top: 50%; z-index: 1;}


.l-prd-tab { display: none; height: 50px; margin: 6px 0 40px 0; box-sizing: border-box; }
.l-prd-tab.fixed { width: 1198px; position: fixed; top: 0; z-index: 101; }
.l-prd-tab .l-prd-filt-item { float: left; height: 48px; }
.l-prd-tab .l-prd-filt-item li { float: left; font-size: 24px; text-align: center; width: 288px; height:48px; line-height: 48px; background-color: #fff; position: relative;}
.l-prd-tab .l-prd-filt-item li:first-child{ border-radius: 5px 0 0 5px;}
.l-prd-tab .l-prd-filt-item li:last-child{ border-radius: 0 5px 5px 0;}
.l-prd-tab .l-prd-filt-item li.on { color: #FFF; background-color: #e61226; }
.l-prd-tab .l-prd-filt-item li.on a,.l-prd-tab .l-prd-filt-item li.on a:hover{ color: #FFF;}
.l-prd-tab .l-prd-filt-item li:hover a { color: #C90B08; }
.l-prd-tab .l-prd-filt-item li a{ display: block; color: #202020;}
.l-prd-tab .l-prd-filt-search{ float:right;  padding:9px 40px 0 0;}
.l-prd-tab .l-prd-filt-search .search-text{ border:1px solid #e5e5e5; width:200px; height:28px; margin-right:13px;}
.l-prd-tab .l-prd-filt-search .search-btn{ border-radius: 3px; width:50px; height:30px; background-color: #65adf5; color:#fff;}

.l-prd-filt { height: 34px; line-height: 34px; margin-bottom: 14px; border: 1px solid #E0E0E0; border-left: none; border-bottom: 1px solid #FF0000; background-color: #FFF; }
.l-prd-filt.fixed { width: 1198px; position: fixed; top: 0; z-index: 101; }
.l-prd-filt .l-prd-filt-tit { float: left; color: #FFF; font-size: 14px; text-align: center; width: 100px; height: 35px; line-height: 35px; margin-top: -1px; background-color: #FF0000; }
.l-prd-filt .l-prd-filt-item { float: left; height: 34px; padding: 0 22px; }
.l-prd-filt .l-prd-filt-item a { display: block; color: #666; font-size: 14px; text-align: center; height: 34px; padding-right: 14px; position: relative; }
.l-prd-filt .l-prd-filt-item a:hover { color: #004c84; text-decoration: none; }
.l-prd-filt .l-prd-filt-item a i { display: block; width: 9px; height: 11px; line-height: 11px; background: url(../images/bg.png) -40px 0 no-repeat; position: absolute; right: 0; top: 12px; z-index: 1; }
.l-prd-filt .l-prd-filt-item a.on { color: #FF0000; }
.l-prd-filt .l-prd-filt-item a.on i { background-position: -50px 0; }
.l-prd-filt .l-prd-filt-page { float: right; color: #888; font-family: Arial; font-size: 14px; margin-right: 44px; }
.l-prd-filt .l-prd-filt-page .total { margin-right: 50px; }
.l-prd-filt .l-prd-filt-page .page-link { color: #D3D3D3; font-family: serif; padding: 2px; margin-left: 6px; border: 1px solid #D3D3D3; border-radius: 2px; background-color: #FFF; }
.l-prd-filt .l-prd-filt-page .page-link:hover { color:#FFF; text-decoration: none; border-color: #1c9eff; background-color: #1c9eff; }
.l-prd-filt .l-prd-filt-page .page-link.off, .l-prd-filt .l-prd-filt-page .page-link.off:hover { border-color: #D3D3D3; background-color: #E6E6E6; cursor: default; }
 .l-prd-filt .l-prd-filt-tool{ float: right; margin-right: 10px;}
 .l-prd-filt .l-prd-filt-tool .tool-item{ display: inline-block; margin: 0 10px;}
 .l-prd-filt .l-prd-filt-tool .tool-btn{ color: #fff; padding: 3px 8px; border-radius: 20px; background-color: #2261d3;}
 .l-prd-filt .l-prd-filt-tool .tool-btn:hover{ color: #fff; padding: 3px 8px; border-radius: 20px; background-color: #1E57BD;}

.l-prd-lst { margin-top: 30px; }
.l-prd-lst ul { margin-right: -10px; margin-bottom: -10px; }
.l-prd-lst li { float: left; width: 232px; height: 416px; margin-right: 10px; margin-bottom: 10px; border:1px solid #ebebeb; background-color: #FFF; position: relative; box-sizing: border-box;}
.l-prd-lst li:nth-of-type(5n) { margin-right: 0;}
.l-prd-lst li:hover { z-index: 100; }
.l-prd-lst li .l-prd-pic, .l-prd-lst .l-prd-pic-img { height: 232px; overflow: hidden; position: relative; }
.l-prd-lst li .l-prd-pic img { width: 100%; height: 100%; }
.l-prd-lst li .l-prd-diy { width: 49px; height: 38px; background: url(../images/list-diy.png) no-repeat; position: absolute; right: 0; top: 0; z-index: 1; transition: all 0.2s; }
.l-prd-lst li .l-prd-model {width: 49px;height: 38px; background: url(../images/list-model.png) no-repeat; position: absolute; right: 0; top: 0; z-index: 1; transition: all 0.2s;}
.l-prd-lst li .l-prd-design { width: 49px; height: 38px; background: url(../images/list-design.png) no-repeat; position: absolute; right: 0; top: 0; z-index: 1; transition: all 0.2s;}
.l-prd-lst .l-prd-tit { padding: 10px;  position: relative; }
.l-prd-lst .l-prd-tit .l-prd-size {color:#999999; font-size: 13px;}
.l-prd-lst .l-prd-tit h3 { color: #333333; width: 100%; height: 40px; line-height: 20px; overflow: hidden; margin-bottom: 10px; }
.l-prd-lst .l-prd-tit h3 a:hover { color: #FF0000; }
.l-prd-lst .l-prd-tit .l-prd-price { font-size: 14px; height:28px; line-height: 28px;}
.l-prd-lst .l-prd-tit .l-prd-price .price { font-size: 16px;}
.l-prd-lst .l-prd-tit .l-prd-price .cost-price { color: #767676; font-size: 14px;}
.l-prd-lst .l-prd-company { padding: 10px 0; margin-top: 8px; border-top: 1px solid #ebebeb;}
.l-prd-lst .l-prd-company .company{ max-height: 38px; overflow: hidden; padding-left: 20px; position: relative;}
.l-prd-lst .l-prd-company .company .icon{ width: 16px; height: 16px; margin-top: -8px; margin-right: 5px; background-position: -250px -50px; position: absolute; left: 0; top: 50%; z-index: 1;}
.l-prd-lst .l-prd-company .area { color: #999; font-size: 12px; padding-left: 20px; margin-top: 5px;}
.l-prd-lst .l-prd-company .area .tag{ color: #fff; font-size: 12px; line-height: 14px; padding: 0 5px; margin-right: 10px; border-radius: 3px; background-color: #FF0000;}
.l-prd-lst .l-prd-btn-wrap { display: none; right:20px; bottom:10px;}
.l-prd-lst li:hover .l-prd-btn-wrap { display: block; }
.l-prd-lst .l-prd-btn { display: inline-block; color: #65adf5;border:1px solid #65adf5; height: 26px; line-height: 26px; padding: 0 12px; border-radius: 3px; background-color: #fff; }
.l-prd-lst .l-prd-btn:hover { text-decoration: none; background-color: #65adf5; color:#fff; }
.l-prd-lst .l-prd-btn.now-go {  color:#ff603b; border-color: #ff603b; }
.l-prd-lst .l-prd-btn.now-go:hover {  color:#fff; background-color: #ff603b; }
.l-prd-lst .l-prd-btn-fav { display: inline-block; color: #000; height: 26px; line-height: 26px; padding: 0 12px; border: 1px solid #E5E5E5; border-radius: 20px; }
.l-prd-lst .l-prd-btn-fav:hover { color: #FF5949; text-decoration: none; }
.l-prd-lst .l-prd-layer { width: 305px; height: 324px; padding: 10px; background-color: #FFF; box-shadow: 0 0 15px #999; position: absolute; left: -10px; top: 0; z-index: -1; transition: all .3s; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); }
.l-prd-lst li:hover .l-prd-layer { top: -10px; opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); }
.l-prd-lst .l-prd-small-pic-lst { text-align: right; width: 84px; position: absolute; right: 10px; top: 10px; z-index: 1; }
.l-prd-lst .l-prd-small-pic { height: 74px; margin-bottom: 17px; position: relative; }
.l-prd-lst .l-prd-small-pic img { width: 70px; height: 70px; border: 1px solid #CECECE; }
.l-prd-lst .l-prd-small-pic:hover img, .l-prd-lst .l-prd-small-pic.on img { border: 2px solid #FF5949; }
.l-prd-lst .l-prd-small-pic:hover:after { content: ''; margin-top: -4px; border-top: 4px dashed transparent; border-bottom: 4px dashed transparent; border-right: 5px solid #FF5949; position: absolute; right: 74px; top: 50%; z-index: 1; }
.l-prd-lst .c-ylo { color: #FF9C00; }
.l-prd-lst .c-org { color: #FF5157; }
.l-prd-lst .ico-cart { display: inline-block; *display:inline;
*zoom:1;
vertical-align: middle; width: 15px; height: 14px; margin-right: 4px; background: url(../images/bg.png) -52px -528px no-repeat; }
.l-prd-lst .ico-fav { display: inline-block; vertical-align: middle; width: 14px; height: 13px; margin: 0 6px 0 0; background: url(../images/details-bg.png) no-repeat; background-position: -18px -32px; }
.l-prd-lst .l-prd-btn-fav.on { cursor: default; }
.l-prd-lst .l-prd-btn-fav.on .ico-fav { background-position: -18px -17px; }
.l-prd-lst .l-prd-btn-fav.off { color: #FFF; background-color: #B3B3B3; }
.l-prd-lst .l-prd-btn-fav.off .ico-fav { background-position: -18px -47px; }

/*模板列表*/
.list-template { margin-top: 30px; }
.list-template ul { margin-right: -10px; margin-bottom: -10px; }
.list-template li { float: left; width: 285px; height: 385px; margin-right: 20px; margin-bottom: 20px; border:1px solid #ebebeb; background-color: #FFF; position: relative; box-sizing: border-box;}
.list-template li:nth-of-type(4n) { margin-right: 0;}
.list-template li:hover { z-index: 100; }
.list-template li .top-photo{ height: 285px; overflow: hidden; position: relative; }
.list-template li .top-photo img { width: 100%; height: 100%; background-color: #f6f6f6; object-fit: contain;}
.list-template .info { padding: 10px;  position: relative; }
.list-template .info h3 { font-size: 16px; height: 40px; line-height: 20px; overflow: hidden; margin-bottom: 10px; }
.list-template .info h3 a:hover { color: #FF0000; }
.list-template .info .desp { color: #666; margin-bottom: 10px;}
.list-template .info .bottom { font-size: 14px; height:28px; line-height: 28px;}
.list-template .info .bottom .icon-download { width: 24px; height: 24px; background-image: url(../images/template/icon-down.png);}