* { margin:0; padding:0; font-size:14px; font-family:"microsoft yahei"; } ul { list-style:none; } a { text-decoration:none; } .container { background:#f7f8fa; height:auto; overflow:hidden; padding-top:60px; padding-bottom:80px; } .price { width:1200px; margin:0 auto; } .price h2 { font-size:24px; color:#333; line-height:1; font-weight:400; padding-bottom:10px; padding-left:10px; } .price .category { width:1180px; overflow:hidden; position:relative; overflow:hidden; margin-bottom:20px; margin-left:10px; } .price .category:after { content:""; position:absolute; width:100%; left:0; top:0; height:1px; background-color:#EDEDED; z-index:2; } .price .category:before { content:""; position:absolute; width:100%; left:0; bottom:0; height:1px; background-color:#EDEDED; z-index:2; } .price .category a:after { content:""; display:inline-block; width:0; height:100%; vertical-align:middle; } .price .category .prev { display:none; position:absolute; top:0; width:59px; height:100%; box-shadow:0 0 3px #c6c6c7; background:#fff; text-align:center; font-size:0; left:0; border-right:1px solid #e1e3e6; } .price .category .prev span { display:inline-block; vertical-align:middle; width:9px; height:14px; background-repeat:no-repeat; background-image:url(../images/arrow.svg); background-position:96.77% 25%; background-size:initial; } .price .category .next span { display:inline-block; vertical-align:middle; width:9px; height:14px; background-repeat:no-repeat; background-image:url(../images/arrow.svg); background-position:61.29% 25%; background-size:initial; } .price .category .next { position:absolute; top:0; width:59px; height:100%; box-shadow:0 0 3px #c6c6c7; background:#fff; text-align:center; font-size:0; right:0; border-left:1px solid #e1e3e6; } .price .category ul li { display:table-cell; white-space:nowrap; font-size:14px; text-align:center; border-bottom:3px solid transparent; cursor:pointer; position:relative; padding:18px 25px; } .price .category ul li.active { border-bottom-color:#00a4ff; color:#00a4ff; } .price .cont { display:none; } .price .cont.active { display:block; } .price .cont ul li { width:280px; float:left; margin:0 10px; box-sizing:border-box; } .price .cont ul li:nth-child(4n) { margin-right:0px!important; } .price .cont ul li a { display:block; border:1px solid #E5E5E5; background-color:#fff; margin-top:20px; padding:13px 20px 15px; } .price .cont ul li a:hover { box-shadow:0 3px 7px 0 rgba(0,0,0,.1); border-color:rgba(229,229,229,.73); } .price .cont ul li a:hover .cont_main h3.title { color:#00a4ff; } .price .cont ul li a .cont_main { display:table-cell; vertical-align:top; } .price .cont ul li a .cont_main h3.title { font-size:18px; font-weight:400; color:#333; line-height:32px; white-space:nowrap; overflow:hidden; display:block; text-overflow:ellipsis; } .price .cont ul li a .cont_main p.desc { font-size:14px; line-height:1.5; color:#666; height:42px; margin-top:-2px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }