CSS File

1body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,input,button{margin:0;padding:0;border:0;}

2body{background:#f9f9f9;color:#333;font-size:12px; font-family:'agency',FZLTXIANH,Arial,sans-serif,MontblancType,STHeiti,SimHei;}

3

4ul,ol{list-style-type:none;}

5select,input,img,select{vertical-align:middle;}

6input,button,select,textarea{outline:none;}

7button{cursor:pointer}

8img{max-width:100%;}

9table,tr,th,td{border:none}

10

11a{text-decoration:none;transition:all 1s;

-moz-transition:all 1s;

-webkit-transition:all 1s;}

12a:link{color:#000;}

13a:visited{color:#555;}

14a:hover,a:active,a:focus{color:#555;}

15

16input::-webkit-input-placeholder{color:#ddd;font-style:italic}

17input:-moz-placeholder{color:#ddd;font-style:italic}

18input::-moz-placeholder{color:#ddd;font-style:italic}

19input:-ms-input-placeholder{color:#ddd;font-style:italic}

20/*重置css结束*/

21

22html{font-size:100%;line-height:1;

-ms-text-size-adjust:100%;

-webkit-text-size-adjust:100%;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;box-sizing:border-box}*,:before,:after{box-sizing:inherit}body,header,footer,main,section,div,h1,h2,h3,h4,h5,h6,p,span,a,blockquote,q,pre,code,ol,ul,li,form,label,input,textarea,button,table,tr,th,td,dl,dt,dd,hr{margin:0;padding:0;border:0;font:inherit;font-size:100%;line-height:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}ol,ul{list-style:none}hr{border-bottom:1px solid #000}img{max-width:100%;height:auto;vertical-align:middle;border-style:none}a,a:hover{color:#000;text-decoration:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}[type=color],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],textarea{display:block;width:100%;max-width:100%;border:1px solid #000;border-radius:0;

-webkit-appearance:none;

-moz-appearance:none}::-webkit-input-placeholder{color:#777}:-moz-placeholder{color:#777}::-moz-placeholder{color:#777;opacity:1}:-ms-input-placeholder{color:#777}[type=reset],[type=submit],[type=button],button{border:1px solid #000;border-radius:0;

-webkit-appearance:none;

-moz-appearance:none;cursor:pointer}:focus{outline:none}table{width:100%}table,tr,th,td{border-collapse:collapse;border-spacing:0}.row{margin:0 auto}.row:before,.row:after{content:'';display:table}.row:after{clear:both}.xs{max-width:32rem}.sm{max-width:48rem}.md{max-width:64rem}.lg{max-width:80rem}.xl{max-width:96rem}.col{float:left}.xs-0{display:none}.xs-1,.xs-2,.xs-3,.xs-4,.xs-5,.xs-6,.xs-7,.xs-8,.xs-9,.xs-10,.xs-11,.xs-12{display:inline-block}.xs-1{width:8.3333%}.xs-2{width:16.6667%}.xs-3{width:25%}.xs-4{width:33.3333%}.xs-5{width:41.6667%}.xs-6{width:50%}.xs-7{width:58.3333%}.xs-8{width:66.6667%}.xs-9{width:75%}.xs-10{width:83.3333%}.xs-11{width:91.6667%}.xs-12{width:100%}@media screen and (min-width:32em){.sm-0{display:none}.sm-1,.sm-2,.sm-3,.sm-4,.sm-5,.sm-6,.sm-7,.sm-8,.sm-9,.sm-10,.sm-11,.sm-12{display:inline-block}.sm-1{width:8.3333%}.sm-2{width:16.6667%}.sm-3{width:25%}.sm-4{width:33.3333%}.sm-5{width:41.6667%}.sm-6{width:50%}.sm-7{width:58.3333%}.sm-8{width:66.6667%}.sm-9{width:75%}.sm-10{width:83.3333%}.sm-11{width:91.6667%}.sm-12{width:100%}}@media screen and (min-width:48em){.md-0{display:none}.md-1,.md-2,.md-3,.md-4,.md-5,.md-6,.md-7,.md-8,.md-9,.md-10,.md-11,.md-12{display:inline-block}.md-1{width:8.3333%}.md-2{width:16.6667%}.md-3{width:25%}.md-4{width:33.3333%}.md-5{width:41.6667%}.md-6{width:50%}.md-7{width:58.3333%}.md-8{width:66.6667%}.md-9{width:75%}.md-10{width:83.3333%}.md-11{width:91.6667%}.md-12{width:100%}}@media screen and (min-width:64em){.lg-0{display:none}.lg-1,.lg-2,.lg-3,.lg-4,.lg-5,.lg-6,.lg-7,.lg-8,.lg-9,.lg-10,.lg-11,.lg-12{display:inline-block}.lg-1{width:8.3333%}.lg-2{width:16.6667%}.lg-3{width:25%}.lg-4{width:33.3333%}.lg-5{width:41.6667%}.lg-6{width:50%}.lg-7{width:58.3333%}.lg-8{width:66.6667%}.lg-9{width:75%}.lg-10{width:83.3333%}.lg-11{width:91.6667%}.lg-12{width:100%}}@media screen and (min-width:80em){.xl-0{display:none}.xl-1,.xl-2,.xl-3,.xl-4,.xl-5,.xl-6,.xl-7,.xl-8,.xl-9,.xl-10,.xl-11,.xl-12{display:inline-block}.xl-1{width:8.3333%}.xl-2{width:16.6667%}.xl-3{width:25%}.xl-4{width:33.3333%}.xl-5{width:41.6667%}.xl-6{width:50%}.xl-7{width:58.3333%}.xl-8{width:66.6667%}.xl-9{width:75%}.xl-10{width:83.3333%}.xl-11{width:91.6667%}.xl-12{width:100%}}

23@font-face {font-family: "iconfont"; src: url('../font/iconfont.eot?t=1507193813630'); /* IE9*/ src: url('../font/iconfont.eot?t=1507193813630#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;') format('woff'), url('../font/iconfont.ttf?t=1507193813630') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../font/iconfont.svg?t=1507193813630#iconfont') format('svg'); /* iOS 4.1- */}

24.iconfont {font-family:"iconfont" !important;font-size:100%;font-style:normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;}

25.spcigar-check:before { content: "\e60b"; }

26.spcigar-emoji:before { content: "\e616"; }

27.spcigar-favor:before { content: "\e627"; }

28.spcigar-file:before { content: "\e624"; }

29.spcigar-lock:before { content: "\e62d"; }

30.spcigar-refresh:before { content: "\e640"; }

31.spcigar-link:before { content: "\e6e0"; }

32.spcigar-qq:before { content: "\e698"; }

33.spcigar-fly:before { content: "\e6ae"; }

34.spcigar-hot:before { content: "\e619"; }

35.spcigar-menu:before { content: "\e62a"; }

36.spcigar-wechat:before { content: "\e63a"; }

37.spcigar-icongerenzhongxin-01:before { content: "\e607"; }

38.spcigar-iconhuidaoshouye:before { content: "\e608"; }

39.spcigar-kefu:before { content: "\e609"; }

40.spcigar-gouwuche-01:before { content: "\e60c"; }

41.spcigar-youjiantou-01:before { content: "\e60e"; }

42.spcigar-youhuiquan-01:before { content: "\e60f"; }

43.spcigar-daishouhuo-01:before { content: "\e610"; }

44.spcigar-quanbudingdan-01:before { content: "\e611"; }

45.spcigar-youhuiquan-geren-01:before { content: "\e612"; }

46.spcigar-shanchu-01:before { content: "\e613"; }

47.spcigar-fangdajing:before { content: "\e614"; }

48.spcigar-guanbi-01:before { content: "\e617"; }

49.spcigar-xuanzhong-01:before { content: "\e61a"; }

50.spcigar-weixuanzhong-01:before { content: "\e61b"; }

51.spcigar-zhifu-01:before { content: "\e61c"; }

52.spcigar-zuojiantou-01:before { content: "\e61d"; }

53.spcigar-gengduo-01:before { content: "\e61e"; }

54.spcigar-bianji-01:before { content: "\e61f"; }

55.spcigar-chenggong-01:before { content: "\e620"; }

56.spcigar-shibai-01:before { content: "\e621"; }

57.spcigar-jianshao-01:before { content: "\e622"; }

58.spcigar-zengjia-01:before { content: "\e623"; }

59.spcigar-wushangpin-01:before { content: "\e625"; }

60.spcigar-yemianbianji-:before { content: "\e626"; }

61.spcigar-kefu-zuizhong-:before { content: "\e628"; }

62.spcigar-Top:before { content: "\e63d"; }

63.spcigar-ask:before { content: "\e600"; }

64.spcigar-shuangjiantouxia:before { content: "\e601"; }

65

66@font-face{font-family: 'agency';src: url('../font/agency-webfont.eot');src: url('../font/agency-webfont.eot?#iefix') format('embedded-opentype'),url('../font/agency-webfont.woff') format('woff'),url('../font/agency-webfont.ttf') format('truetype'),url('../font/agency-webfont.svg#SingleMaltaRegular') format('svg'); font-weight: normal; font-style: normal;}

67

68a{color:#3F2208;}

69.agency{font-family:'agency',serif,fantasy;}

70

71.web{margin:0 3em;}

72.main{max-width:1360px;margin:0 auto}

73.block{margin-bottom:3em}

74.fl{float:left}

75.fr{float:right}

76.tl{text-align:left}

77.tr{text-align:right}

78.tc{text-align:center}

79.box{overflow:hidden;position: relative;height: auto;}

80.t1{font-size:2.8em}

81.t2{font-size:2em}

82.t3{font-size:1.6em}

83.t4{font-size:18px}

84.btn{cursor:pointer;}

85.banner{}

86.banner hgroup{padding:1.2em 0 .8em 0}

87.banner .tit1{font-style:italic;text-transform:Uppercase }

88.banner .smalltit{position: relative;overflow:hidden}

89.bbrown{background:url(../images/bacco.jpg) #380f00;}

90.banner.bbrown{color:#FCBD84;text-shadow: 0 -1px #000;}

91.banner.bbrown .smalltit:before,.banner.bbrown .smalltit:after{content: ' ';width:285px;height:25px;display: inline-block;vertical-align: middle;position: absolute;top: 1em;}

92.banner.bbrown .smalltit:before{background:url(../images/nav-wrapper-left.png) no-repeat;right: 50%;margin-right: 10em;}

93.banner.bbrown .smalltit:after{background:url(../images/nav-wrapper-right.png) no-repeat;left:50%;margin-left: 10em;}

94

95.grey{background:url(../images/grey.jpg) #d2d2d2}

96.banner.grey{color:#212121;}

97.banner.grey .smalltit{padding-top:.5em;color:#ddd;text-shadow: 0 -1px #484848;}

98.banner.grey .smalltit:before,.banner.grey .smalltit:after{content: ' ';width:285px;height:25px;display: inline-block;vertical-align: middle;position: absolute;top: 1em;}

99.banner.grey .smalltit:before{background:url(../images/white-nav-wrapper-left.png) no-repeat;right: 50%;margin-right: 3em;}

100.banner.grey .smalltit:after{background:url(../images/white-nav-wrapper-right.png) no-repeat;left:50%;margin-left: 3em;}

101

102header{background:url(../images/bg_header.png) #fff;}

103.logo{font-size:2em;line-height:3em;font-weight:bold;font-style:italic}

104.logo a{color:#865000;}

105.logo img{max-height:1em;padding-right:10px}

106h1.kw{display:inline-block}

107

108nav.menu{background:url(../images/nav-border-down.png) no-repeat bottom center;position: relative;z-index:998;height:3em;line-height:2em}

109nav.menu a{padding:0 1em}

110nav.menu a.on{color:#ab5100}

111nav.menu ul li{display:inline;position: relative;height:2em}

112nav.menu ul li.bag{position: absolute;right:1em;font-size:12px}

113nav.menu ul li.count{display:none}

114nav.menu ul li.menulist a{cursor:pointer;}

115nav.menu ul li.menulist .menuTitle:hover{color:#ab5100}

116nav.menu ul li.menulist .menu-show{display:block}

117nav.menu ul li.menulist .menu-hide{display:none}

118nav.menu ul li .menu-down{position:absolute;font-size:14px;left:0;top:2em;display:none;z-index:9;min-width:38em;text-align:left;padding:1.6em;background:#fff;box-shadow:-1px 11px 28px -7px rgba(0,0,0,0.61);border-radius: 10px;}

119nav.menu ul li .menu-down span{position:absolute;top:-5px;left:1em;height:5px;width:6em;background: url(../images/nav-banner-bullet.png) no-repeat 50% 100%;}

120nav.menu ul li .menu-down a{padding:0}

121nav.menu ul li .menu-down a:hover{text-decoration:underline}

122nav.menu ul li .menu-down dt{border-bottom:1px solid #eee;line-height:2em;margin-bottom:1em}

123nav.menu ul li .menu-down dd{line-height:2em}

124

125

126nav.menu ul li.menulist a,

127.subMenu dd a {

128 display: inline-block;

129 max-width: 90%; /* 或者设置具体宽度 */

130 white-space: nowrap; /* 不换行 */

131 overflow: hidden; /* 超出隐藏 */

132 text-overflow: ellipsis; /* 显示省略号 */

133}

134

135

136nav.menu ul li i{padding-right:.5em}

137

138

139.slider{position: relative;}

140.slider .prev,.slider .next{position:absolute;top:50%;margin-top:-1em;height:2em;width:2em;line-height:2em;border-radius:1em;text-align:center;background:rgba(255, 255, 255, 0.38);}

141.slider .prev i,.slider .next i{font-size:18px;color:rgba(6, 6, 6, 0.43)}

142.slider .prev{left:1em}

143.slider .next{right:1em}

144.fullSlide .hd{ width:100%; position:absolute; z-index:1; bottom:0; left:0; height:30px; line-height:30px; }

145.fullSlide .hd ul{ text-align:center; }

146.fullSlide .hd ul li{ cursor:pointer; display:inline-block;

*display:inline; zoom:1; width:6px; height:6px; margin:5px; border-radius:3px;overflow:hidden; background:rgba(255, 255, 255, 0.57); line-height:999px; }

147.fullSlide .hd ul .on{ background:rgba(210, 99, 0, 0.82) }

148

149.uhere{font-size:12px;color:#a05b44;line-height:28px;height:40px}

150.uhere a{color:#a05b44;text-shadow: 0 -1px #000000;padding-bottom:20px;}

151.uhere span{padding:0 .5em;}

152.uhere a.on,.uhere a:last-child{background: url(../images/nav-banner-bullet.png) no-repeat 50% 100%;}

153

154.tab{overflow:hidden}

155.tab .tabtit{text-align:right;margin-right:5px}

156.tab .tabtit ul li{cursor:pointer;display:inline;background:#fff;color:#b75802;padding:1em;line-height:3em;}

157.tab .tabtit ul li.on{background:#b75802;color:#fff;box-shadow:-1px 7px 8px 0px rgba(0, 0, 0, 0.13);}

158.index_nicetit li{display:inline-block;cursor:pointer;padding-bottom:1em;}

159.index_nicetit li.on{background: url(../images/nav-banner-bullet.png) no-repeat 50% 100%;}

160

161

162.proscroll .prev,.proscroll .next{position:absolute;top:50%;margin-top:-1em;height:2em;width:2em;border-radius:1em;line-height:2em;text-align:center;background:rgba(173, 173, 173, 0.21);z-index:99}

163.proscroll .prev i,.proscroll .next i{font-size:14px;color:#fff}

164.proscroll .prev{left:1em}

165.proscroll .next{right:1em}

166

167/*商品列表格子*/

168.progrid{overflow:hidden}

169.progrid li{position: relative;}

170.progrid .probox{position: relative;margin:5px;transition: all .2s linear 0s;background:#fff}

171.progrid .probox:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);transform: translate3d(0, -2px, 0);}

172.progrid .probox .good{position: absolute;color:#e04f00;right:0;top:0;font-size:3em}

173.progrid .probox .link{position:absolute;bottom:1.5em;left:0;text-align:center;width:100%;color:#888;font-size:14px;display:none}

174.progrid .probox .link a{background:rgba(255, 118, 0, 0.77);color:#fff;padding:.7em 1em;border-radius: .25em;}

175.progrid .probox .link a i{padding-right:.5em}

176.progrid .propic{position: relative;padding:2em}

177.progrid .propic a{display:block}

178.progrid .propic img{width:100%;height:266px;}

179.progrid .propic .outsale{position:absolute;

letf:0;bottom:0;border:1px solid #999;color:#999;padding:.4em .5em;}

180.progrid .propic .outsale i{padding-right:.2em}

181.progrid .proinfo{text-align:center;padding:1em 0 3em 0}

182.progrid .probox:hover .proinfo{background:#fff}

183.progrid hgroup{padding:1em 0}

184.progrid .pro-tit {

185 font-size: 14px;

186 line-height: 2em;

187 white-space: nowrap; /* 禁止换行 */

188 overflow: hidden; /* 超出部分隐藏 */

189 text-overflow: ellipsis; /* 超出部分显示省略号 */

190 width: 100%; /* 确保容器有宽度限制 */

191}

192.progrid .pro-tit a{color:#000}

193.progrid .pro-tit-2{white-space: nowrap;font-size:16px;color:#bbb}

194.progrid .pro-other{padding:1em 3em 0 3em;}

195.progrid .pro-other p{font-size:12px;}

196.progrid .pro-price{color:#ff5a00;font-size:1.2em;line-height:2em;}

197

198/*商品列表*/

199.list-right{padding-left:2em}

200

201/*商品详情*/

202.prod{background:#fff;padding:2em 0;color:#888}

203.prodpic{background:#fff;position: relative;padding:0 2em;margin:0 auto}

204.prodpic .thumb{margin-top:2em}

205.prodpic .thumb li{border:1px solid #f7f7f7;box-sizing:border-box;margin:0 20px 20px 0}

206.prodpic .thumb .on{border:1px solid #d6d6d6}

207.prodpic .thumb .thumbpic{cursor:pointer;}

208.prodpic .thumb .thumbpic img{width:100%}

209.prodpic .prev,.prodpic .next{position:absolute;top:50%;margin-top:-1em;height:2em;width:2em;line-height:2em;border-radius:1em;text-align:center;display:none}

210.prodpic .prev i,.prodpic .next i{font-size:2em;}

211.prodpic .prev{left:0}

212.prodpic .next{right:0}

213

214.prodinfo{padding:3em}

215.prodinfo h1{color:#000;padding-bottom:10px;}

216.prodinfo h2{}

217.prodinfo .prod-price{font-size:28px;padding:1em 0;color:#b35400}

218.prodinfo .prod-price span{font-size:14px;color:#666;font-family:-webkit-body;}

219.prodinfo .prod-price .market{text-decoration:line-through;color:#999;padding-left:1em}

220.prodinfo .price-vip{padding-bottom:1em;font-size:14px;border-bottom: 1px solid #f5f5f5;font-style:italic;}

221.prodinfo .prod-detail{text-align:left;margin:2em 0;line-height:1.6em;font-size:12px;color:#999}

222.prodinfo .prod-detail tr{}

223.prodinfo .prod-detail th{width:4em;}

224.prodinfo .title{padding:.6em 0;border-bottom:1px solid #eee;color:#000}

225.prodinfo .title i{padding-right:1em}

226.prodinfo .prod-desc{

227 font-size: 16px;

228 line-height: 1.7;

229 color: #444;

230 margin-bottom: 30px;

231

232 border: 1px solid #e0e0e0;

233 border-radius: 6px;

234 background-color: #fff;

235 font-family: 'Helvetica Neue', Arial, sans-serif;

236

237}

238.prodinfo .prod-desc p{padding-bottom:1em}

239.prodinfo .prod-desc .gobuy{font-size:1.2em;background:#f8f8f8;padding:1em;line-height:2em;}

240.prodinfo .prod-desc .gobuy:hover{background:#f1f1f1}

241.prodinfo .prod-desc .gobuy i{padding-right:.5em}

242/* 标题层级样式 */

243.prod-desc2 h2 {

244 font-size: 22px;

245 margin-top: 1.2em;

246 margin-bottom: 0.5em;

247 color: #222;

248 border-left: 4px solid #4CAF50;

249 padding-left: 10px;

250}

251

252.prod-desc2 h3 {

253 font-size: 18px;

254 margin-top: 1em;

255 margin-bottom: 0.5em;

256 color: #333;

257 border-left: 3px solid #2196F3;

258 padding-left: 8px;

259}

260

261.prod-desc2 h4 {

262 font-size: 16px;

263 margin-top: 0.8em;

264 margin-bottom: 0.4em;

265 color: #555;

266 padding-left: 6px;

267 border-left: 2px solid #9C27B0;

268}

269

270/* 列表样式 */

271.prod-desc2 ul,

272.prod-desc2 ol {

273 margin-left: 1.5em;

274 margin-bottom: 1em;

275}

276

277.prod-desc2 ul li,

278.prod-desc2 ol li {

279 margin-bottom: 0.5em;

280 padding-left: 5px;

281}

282

283/* 嵌套 ul li 样式（进一步缩进并使用不同的标记） */

284.prod-desc2 ul ul {

285 margin-left: 1em;

286}

287

288.prod-desc2 ul ul li {

289 list-style-type: circle;

290 color: #666;

291 font-size: 14px;

292}

293

294/* 嵌套 ol li 样式 */

295.prod-desc2 ol ol {

296 margin-left: 1em;

297}

298

299.prod-desc2 ol ol li {

300 list-style-type: lower-alpha;

301 font-size: 14px;

302}

303

304.prodinfo .code{height:10em}

305

306.detail{background:#1c1c1c;color: #c1c1c1;font-size:12px;line-height:2em;padding:3em 0}

307.detail .name{border-bottom:1px solid #3e3e3e;font-size:1.6em;margin:0 0 30px;font-weight:lighter;padding-bottom:10px;line-height:2em;color: #e6e6e6;}

308.detail i{padding-right:.5em}

309.detail dl{padding:0 3em 3em 3em;}

310.detail p{padding-bottom:1em}

311.price_info dd{display:flex;color:#999}

312.ndt{display: block;width:100px;margin:.4rem 0;border:1px solid #b9b7b7;}

313.nd1,.nd2,.nd3,.nd4,.nd5{display: block;height:.6rem;background:#b9b7b7}

314.nd1{width:20%}

315.nd2{width:40%}

316.nd3{width:60%}

317.nd4{width:80%}

318.nd5{width:100%}

319/*商品详情over*/

320

321

322/*商品图片灯箱*/

323#imagelightbox{cursor:pointer;position:fixed;z-index:10000;

-ms-touch-action:none;touch-action:none;}

324#imagelightbox-loading,#imagelightbox-loading div{

-webkit-border-radius:50%;

-moz-border-radius:50%;border-radius:50%}

325#imagelightbox-loading{width:2.5em;height:2.5em;background-color:#444;background-color:rgba(0,0,0,.5);position:fixed;z-index:10003;top:50%;left:50%;padding:.625em;margin:-1.25em 0 0 -1.25em;

-webkit-box-shadow:0 0 2.5em rgba(0,0,0,.75);

-moz-box-shadow:0 0 2.5em rgba(0,0,0,.75);box-shadow:0 0 2.5em rgba(0,0,0,.75)}

326#imagelightbox-loading div{width:1.25em;height:1.25em;background-color:#fff;

-webkit-animation:imagelightbox-loading .5s ease infinite;

-moz-animation:imagelightbox-loading .5s ease infinite;

-o-animation:imagelightbox-loading .5s ease infinite;animation:imagelightbox-loading .5s ease infinite}

327@-webkit-keyframes imagelightbox-loading{from{opacity:.5;-webkit-transform:scale(.75)}

32850%{opacity:1;-webkit-transform:scale(1)}

329to{opacity:.5;-webkit-transform:scale(.75)}

330}

331@-moz-keyframes imagelightbox-loading{from{opacity:.5;-moz-transform:scale(.75)}

33250%{opacity:1;-moz-transform:scale(1)}

333to{opacity:.5;-moz-transform:scale(.75)}

334}

335@-o-keyframes imagelightbox-loading{from{opacity:.5;-o-transform:scale(.75)}

33650%{opacity:1;-o-transform:scale(1)}

337to{opacity:.5;-o-transform:scale(.75)}

338}

339@keyframes imagelightbox-loading{from{opacity:.5;transform:scale(.75)}

34050%{opacity:1;transform:scale(1)}

341to{opacity:.5;transform:scale(.75)}

342}

343#imagelightbox-overlay{background:#fff;position:fixed;z-index:9998;top:0;right:0;bottom:0;left:0}

344#imagelightbox-close{width:2.5em;height:2.5em;border-radius:50%;text-align:left;text-indent:-9999px;background-color:#666;position:fixed;z-index:10002;top:2.5em;right:2.5em;

-webkit-transition:color .3s ease;

-moz-transition:color .3s ease;

-ms-transition:color .3s ease;

-o-transition:color .3s ease;transition:color .3s ease}

345#imagelightbox-close:hover{background-color:#111}

346#imagelightbox-close:after,#imagelightbox-close:before{width:2px;background-color:#fff;content:'';position:absolute;top:20%;bottom:20%;left:50%;margin-left:-1px}

347#imagelightbox-close:before{

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-ms-transform:rotate(45deg);

-o-transform:rotate(45deg);transform:rotate(45deg)}

348#imagelightbox-close:after{

-webkit-transform:rotate(-45deg);

-moz-transform:rotate(-45deg);

-ms-transform:rotate(-45deg);

-o-transform:rotate(-45deg);transform:rotate(-45deg)}

349#imagelightbox-caption{text-align:center;color:#fff;background-color:#666;position:fixed;z-index:10001;left:0;right:0;bottom:0;padding:.625em}

350#imagelightbox-nav{position:fixed;z-index:10001;left:50%;bottom:3.75em;padding:.313em;

-webkit-transform:translateX(-50%);

-moz-transform:translateX(-50%);

-ms-transform:translateX(-50%);

-o-transform:translateX(-50%);transform:translateX(-50%);

-webkit-border-radius:20px;

-moz-border-radius:20px;border-radius:20px}

351#imagelightbox-nav a{width:1em;background:rgba(226, 226, 226, 0.78);height:1em;display:inline-block;margin:0 .313em;

-webkit-border-radius:50%;

-moz-border-radius:50%;border-radius:50%}

352#imagelightbox-nav a.active{background:rgba(51, 51, 51, 0.72)}

353#imagelightbox-caption,#imagelightbox-close,#imagelightbox-loading,#imagelightbox-nav,#imagelightbox-overlay{

-webkit-animation:fade-in .25s linear;

-moz-animation:fade-in .25s linear;

-o-animation:fade-in .25s linear;animation:fade-in .25s linear}

354@-webkit-keyframes fade-in{from{opacity:0}

355to{opacity:1}

356}

357@-moz-keyframes fade-in{from{opacity:0}

358to{opacity:1}

359}

360@-o-keyframes fade-in{from{opacity:0}

361to{opacity:1}

362}

363@keyframes fade-in{from{opacity:0}

364to{opacity:1}

365}

366@media only screen and (max-width:41.250em){#container{width:100%}

367#imagelightbox-close{top:1.25em;right:1.25em}

368#imagelightbox-nav{bottom:1.25em}

369}

370/*商品图片灯箱over*/

371

372/*品牌列表*/

373.brandlist-box{position: relative;}

374.brandlist-box .prev,.brandlist-box .next{position:absolute;top:50%;margin-top:-1em;height:2em;width:2em;border-radius:1em;line-height:2em;text-align:center;background:rgba(173, 173, 173, 0.21);z-index:99}

375.brandlist-box .prev i,.brandlist-box .next i{font-size:14px;color:#fff}

376.brandlist-box .prev{left:1em}

377.brandlist-box .next{right:1em}

378.brandlist{padding:2em 0;background:#fff}

379.brandlist li{margin:1em 0;border:1px solid #999;}

380.brandlist img{width:200px;height:180px;}

381

382

383

384/*列表页品牌简介*/

385.brandtit{background:#fff;padding:1em;box-shadow:4px 2px 13px -7px rgba(0,0,0,0.61)}

386.brandbox{ overflow: hidden;border-top: 1px solid #f3f3f3;padding:1em;background:#fff;box-shadow:4px 2px 13px -7px rgba(0,0,0,0.61)}

387#brandinfo{display: none;}

388.brandbox .brandlogo{padding:0 2em 0 0; width:200px;height:100%;}

389.brandbox .brandlogo img{ width: 100%;

390 height: auto;

391 display: block;}

392.brandbox .branddesc{line-height: 1.6em;

393 color: #666;

394 font-size: 14px;

395 overflow: hidden; }

396

397/* 基础列表样式 */

398.branddesc ul {

399 margin: 1em 0;

400 padding-left: 1.8em;

401 list-style: none;

402 color: #444;

403}

404

405/* 列表项样式 */

406.branddesc li {

407 position: relative;

408 padding: 0.3em 0;

409 line-height: 1.5;

410 font-size: 0.95em;

411}

412

413/* 自定义项目符号（现代简约风格） */

414.branddesc li:before {

415 content: "•";

416 position: absolute;

417 left: -1.2em;

418 color: #4a6fa5; /* 品牌色调整 */

419 font-weight: bold;

420 font-size: 1.2em;

421}

422

423/* 技术规格列表特殊样式 */

424.branddesc h2 + ul li {

425 background: rgba(74, 111, 165, 0.05);

426 padding: 0.5em 0.8em;

427 margin: 0.3em 0;

428 border-left: 3px solid #4a6fa5;

429 border-radius: 0 3px 3px 0;

430}

431

432/* 成分列表特殊样式 */

433.branddesc h2 + p + ul li {

434 background: rgba(106, 130, 80, 0.05);

435 border-left: 3px solid #6a8250;

436}

437

438

439/*分类树*/

440.category{background:#fff;margin:0 1em 1em 0}

441.category dl{line-height:2em;}

442.category .tit{border-bottom:1px solid #f5f5f5;padding:1.2em;}

443.category dl a{color:#666}

444.category .categorybtn{padding:.5em 1em;}

445.category .categorybtn i{font-size:.8em}

446.category .categorylist{padding:0 1.2em;font-size:.8em;display:none}

447.category .categorylist dd{color:#666}

448.category .categorylist dd.active{color:#111}

449.category .categorylist dd i:before{content:"\e61b"}

450.category .categorylist dd.active i:before{content:"\e61a"}

451.category .categorylist i{padding-right:.6em}

452.category .tree{padding:1em;border-bottom:1px solid #f6f6f6}

453.category .search {padding:.5em 1em;overflow:hidden;}

454.category .search .filtr-search{background:#f8f8f8;border:none;padding:.5em}

455

456/*筛选*/

457.select{background:#fff;padding:1em;margin:1em 0;}

458.select dl{padding:.5em 0}

459.select dl dt{display:inline;padding-right:2em}

460.select dl dd{display:inline;padding:.5em;line-height:2em;color:#666}

461.select dl dd.on{background:#b75802;color:#fff}

462.select-item{padding:.5em;color:#666;border:1px solid #999;display:none}

463.filtr-item{overflow:hidden;display:block}

464

465/*分页*/

466

467.pagination{text-align:center;margin:2em 0;display:block;margin-right:4px}

468.pagination li{display:inline-block;background:#1b1b1b;line-height:37px;margin:0 .4rem;color:#fff}

469.pagination li.fl,.pagination li.fr{margin:0}

470.pagination li.totle{background:0 0;color:#888;display:none}

471.pagination li.totle a{color:#888}

472.pagination li.totle a:hover{color:#fff}

473.pagination li a{line-height:46px;width:46px;color:#fff;display:block}

474.pagination li a:hover,.pagination li.active{background:#565656}

475.pagination li.active a{color:#fff}

476.pagination .pageup{padding:0 13px;display:inline-block}

477.pagination .pageup a{border:0;padding:0;color:#333}

478.pagination .pagedown{border:1px solid #e4e4e4;padding:0 13px;display:inline-block}

479.pagination .pagedown a{border:0;padding:0;color:#333}

480.pagination .pagedown span,.pagination .pageup span{color:#999;font-family:SimSun;padding-right:5px}

481.pagination .pagedown span{padding-left:5px;padding-right:0}

482.pagination li:hover{color:#1b1b1b!important}

483.pagination li.pageCurrent{color:#565656!important;border:0}

484.pagination .dotStyle{color:#333;padding:0 8px}

485.pagination .a_jumpTo{background-color:#f04848;border:0;color:#fff;border-radius:2px}

486.pagination .a_jumpTo:hover{font-weight:400;color:#fff!important}

487

488footer{background:#111;}

489.foot{padding:3em 0}

490.foot .row{}

491.foot .row dl{margin-right:5em}

492.foot .row dl dt{color:#777;font-size: 1.2rem;padding-bottom:1em;margin-bottom:1em;border-bottom:2px solid #222;font-weight:800;}

493.foot .row dl dd{line-height:2em;}

494.foot .row dl dd a{color:#999}

495.foot .row .t4{color:#777}

496.foot .row .linklist{padding:1em 0;line-height:1.2em}

497.foot .row .linklist a{font-size:12px;color:#666;padding-right:2em}

498.footbar{background:#280000;padding:2em 0;font-size:12px}

499.footbar p,.footbar p a{color:#999}

500

501.online{position: fixed;right:1em;top:0;z-index:999;}

502.online .btn{background:rgb(183, 88, 2);border-radius:0 0 2em 2em;padding:1em 2em;color:#fff;box-shadow:-1px 11px 28px -7px rgba(0,0,0,0.61);}

503.online .btn i{padding-right:.5em}

504.online .btn:hover{background:rgb(214, 99, 0)}

505.online .service-box{position:fixed;top:5em;right:1em;display:none;background:#fff;max-width:220px;padding:2em;box-shadow:-1px 11px 28px -7px rgba(0,0,0,0.61);}

506.online .service-box .bt{padding-bottom:1em;font-weight:bold}

507.online .service-box p{padding-bottom:1em;color:#888}

508.online .service-box p img{width:100%}

509.online .service-box .qq{background:rgb(0, 160, 253);color:#fff;padding:.5em 1em;line-height:2em}

510.online .service-box .qq i{padding-right:.2em}

511.online .service-box .close{position:absolute;right:1em;top:1em;cursor:pointer;}

512

513.gotop{position: fixed;right:1em;bottom:1em}

514.gotop .btn{background:rgba(103, 103, 103, 0.14);border-radius:2em;padding:1em;color:#fff;}

515.gotop .btn:hover{background:rgba(103, 103, 103, 0.34)}

516

517/*用户中心*/

518

519.person_box{background:#fff;padding:1em;margin-top:1em;}

520.person_box i{padding-right:.5em}

521.input_textarea,.input_text {border:1px #e8e8e8 solid;border-top:1px #b4b4b4 solid;border-left:1px #b4b4b4 solid;padding-left:3px;}

522.input_text { height:22px;line-height:22px;width:200px;}

523.input_textarea { padding-top:5px;padding-bottom:5px;}

524.input_btn{padding:.5em 1em;border:none;background:#b75802;color:#fff;text-shadow:-1px -1px 0px #000}

525.person_box table{margin-top:1em}

526.person_box .tt{background:#f6f6f6;line-height:2em;padding:0 2em}

527.person_box .ts{background:#f6f6f6;font-size:12px;line-height:2em;padding:0 2em}

528.person_box .tp{background:#fff;height:4em;line-height:4em}

529.person_box .tb{background:#f6f6f6;line-height:3em;padding:0 2em}

530.person_box .ta{background:#fff;height:3em;line-height:2em;font-size:12px}

531.person_box .nums{width:2em;margin-left: 2em;display: block;}

532.person_box .u_btn1 i,.cart .u_btn2 i{padding-right:1em}

533.person_box .u_btn1{background:#9e0000;padding:0 1em}

534.person_box .u_btn1 a{color:#fff;}

535.person_box .u_btn2{background:#fff;padding:0 1em}

536.user_menu{margin-left:2em;background:#fff}

537.user_menu i{padding-right:1em}

538.user_menu dl{padding:1em;line-height:2em}

539.user_menu dl dt{line-height:2em;}

540.user_menu dl dd{padding-left:1em}

541.user_menu dl dd.on{background:#f6f6f6}

542.sub-order{background:#fff;display:block;padding:1em}

543.sub-order .input_text{border: 1px #e8e8e8 solid;border-top: 1px #b4b4b4 solid;border-left: 1px #b4b4b4 solid; padding-left: 3px;max-width: 12em;height: 1.6em;line-height: 1.6em;}

544.sub-order .input_textarea{border: 1px #e8e8e8 solid;border-top: 1px #b4b4b4 solid;border-left: 1px #b4b4b4 solid; padding-left: 3px;}

545.count{display:none}

546.content{padding:1em}

547.content p{padding-bottom:1em}

548.content h2{font-size: 1.4rem;font-weight: bold;line-height: 4rem;background: #f6f6f6;}

549.content h3{font-size: 1.2rem;font-weight: bold;line-height: 2.8rem;background: #f6f6f6;}

550

551.pay{position: fixed;right:1em;top:0;z-index:999;width:200px;height:300px;top:50%;right:50%;margin-right:-115px;margin-top:-165px;background:#fff;padding:15px;box-shadow:-1px 11px 28px -7px rgba(0,0,0,0.61);display:none}

552.pay .service-box .bt{padding-bottom:1em;font-weight:bold}

553.pay .service-box p{padding-bottom:1em;color:#888;font-size:12px}

554.pay .service-box p img{width:100%}

555.pay .service-box .close{position:absolute;right:1em;top:1em;cursor:pointer;}

556.map_one{line-height:3rem;font-weight:bold;}

557.article{padding: 2rem;background: #fff;}

558.article .info{padding: 1rem 0;color: #888;border-bottom: 1px solid #f1f1f1;}

559.article .content{color: #333;margin-top: 2rem;padding: 0;line-height: 2rem;}

560.item {margin-bottom: 2rem;padding: 2rem;overflow: hidden;}

561.item h2{font-size: 1.8rem;padding-bottom: 1rem;}

562.item .postimg{float: left;margin-right: 2rem;}

563.item .info{padding: 1rem 0;}

564.item .intro{color: #777;line-height: 1.2rem;}

565

566

567

568/* 产品描述列表容器 */

569.prod-desc {

570 max-width: 500px;

571 margin: 20px 0;

572 padding: 0;

573 font-family: Arial, sans-serif;

574}

575

576/* 列表样式 */

577.prod-desc ul {

578 list-style: none;

579 padding: 0;

580 margin: 0;

581 border: 1px solid #e0e0e0;

582 border-radius: 6px;

583 overflow: hidden;

584}

585

586/* 列表项样式 */

587.prod-desc li {

588 padding: 12px 15px;

589 font-size: 15px;

590 color: #333;

591 line-height: 1.5;

592 border-bottom: 1px solid #f0f0f0;

593 display: flex;

594}

595

596/* 奇数行样式（新增） */

597.prod-desc li:nth-child(odd) {

598 background-color: #fafafa; /* 浅灰色背景 */

599}

600

601/* 偶数行样式（新增） */

602.prod-desc li:nth-child(even) {

603 background-color: #ffffff; /* 白色背景 */

604}

605

606/* 列表项悬停效果 */

607.prod-desc li:hover {

608 background-color: #f9f9f9;

609}

610

611

612

613

614

615

616/* 文章列表容器 */

617.article-list {

618 list-style: none;

619 padding: 0;

620 margin: 0;

621}

622

623/* 每篇文章项 */

624.article-item {

625 display: flex;

626 margin-bottom: 20px;

627 padding: 15px;

628 background: #fff;

629 box-shadow: 0 2px 8px rgba(0,0,0,0.1);

630 border-radius: 4px;

631 transition: all 0.3s ease;

632}

633

634.article-item:hover {

635 box-shadow: 0 4px 12px rgba(0,0,0,0.15);

636 transform: translateY(-2px);

637}

638

639/* 图片区域 */

640.article-pic {

641 width: 120px;

642 height: 120px;

643 min-width: 120px;

644 overflow: hidden;

645 border-radius: 4px;

646 margin-right: 20px;

647}

648

649.article-pic img {

650 width: 100%;

651 height: 100%;

652 object-fit: cover;

653 transition: transform 0.5s ease;

654}

655

656.article-item:hover .article-pic img {

657 transform: scale(1.05);

658}

659

660/* 内容区域 */

661.article-content {

662 flex: 1;

663 display: flex;

664 flex-direction: column;

665 justify-content: space-between;

666}

667

668/* 文章标题 */

669.article-title {

670 margin: 0 0 10px 0;

671 font-size: 18px;

672 line-height: 1.4;

673}

674

675.article-title a {

676 color: #333;

677 text-decoration: none;

678 transition: color 0.3s ease;

679}

680

681.article-title a:hover {

682 color: #b75802;

683}

684

685/* 文章元信息区域 */

686.article-meta {

687 display: flex;

688 flex-direction: column; /* 改为垂直排列 */

689 font-size: 14px;

690 color: #777;

691 margin-top: auto;

692}

693

694/* 时间样式 */

695.article-date {

696 margin-bottom: 5px; /* 与分类保持间距 */

697 font-style: italic;

698 color: #999;

699}

700

701/* 分类样式 */

702.article-category {

703 font-weight: bold;

704 color: #b75802; /* 使用主题色突出分类 */

705}

706

707/* 响应式调整 */

708@media (max-width: 768px) {

709 .article-item {

710 flex-direction: column;

711 }

712

713 .article-pic {

714 width: 100%;

715 height: 180px;

716 margin-right: 0;

717 margin-bottom: 15px;

718 }

719 .article-meta {

720 margin-top: 10px;

721 }

722

723 .article-date {

724 text-align: left;

725 margin-top: 5px;

726 }

727}

728

729

730

731

732

733

734

735.pbdesc{

736 max-width:1360px;

737 margin: 0 auto;

738}

739

740/* 产品描述标题样式 - 更新颜色 */

741.prod-description {

742 font-size: 20px;

743 color: #407a74; /* 更新为指定绿色 */

744 margin: 25px 0 15px;

745 font-family: 'Helvetica Neue', Arial, sans-serif;

746 letter-spacing: 0.3px;

747 margin-top: 30px;

748}

749

750/* 产品描述内容容器 - 添加边框和间距 */

751.prod-desc2 {

752 font-size: 15px;

753 line-height: 1.7;

754 color: #444;

755 margin-bottom: 30px;

756 padding: 20px; /* 增加内边距 */

757 border: 1px solid #e0e0e0; /* 添加边框 */

758 border-radius: 6px; /* 圆角边框 */

759 background-color: #fff;

760 font-family: 'Helvetica Neue', Arial, sans-serif;

761}

762

763/* 内容区段落样式 - 调整间距 */

764.prod-desc2 p {

765 margin: 0 0 1.2em 0; /* 修正为0避免双重间距 */

766 text-align: justify;

767 hyphens: auto;

768 padding: 0 10px; /* 两侧增加间距 */

769}

770

771/* 首段特殊处理 */

772.prod-desc2 p:first-child {

773 margin-top: 0;

774}

775

776/* 无序列表样式 - 保持红色强调 */

777.prod-desc2 ul {

778 list-style: none;

779 padding-left: 30px; /* 增加缩进 */

780 margin: 1.2em 10px; /* 对齐段落间距 */

781}

782

783.prod-desc2 ul li {

784 position: relative;

785 padding: 4px 0;

786}

787

788.prod-desc2 ul li:before {

789 content: "•";

790 color: #c00;

791 position: absolute;

792 left: -15px;

793 font-weight: bold;

794 font-size: 18px;

795}

796

797/* 数据强调样式 */

798.prod-desc2 strong {

799 color: #c00;

800 font-weight: 600;

801}

802

803

804

805

806

807/* 文章容器样式 */

808.page-article-container {

809 max-width: 900px;

810 margin: 0 auto;

811 padding: 20px;

812 background-color:white;

813}

814

815/* 主文章样式 */

816.page-main-article {

817 margin-bottom: 50px;

818}

819

820.page-article-title {

821 font-size: 2.2em;

822 color: #333;

823 margin-bottom: 15px;

824 text-align: center;

825 font-family: 'agency', serif;

826}

827

828.page-article-meta {

829 color: #777;

830 text-align: center;

831 margin-bottom: 30px;

832 font-size: 14px;

833}

834

835.page-contentarticle {

836 line-height: 1.8;

837 color: #444;

838}

839

840.page-contentarticle p {

841 margin-bottom: 20px;

842}

843

844.page-contentarticle h2 {

845 font-size: 22px;

846 margin-top: 1.2em;

847 margin-bottom: 0.5em;

848 color: #222;

849 border-left: 4px solid #4CAF50;

850 padding-left: 10px;

851}

852

853

854

855/* 优化后的H3子标题 */

856/* 当 .page-content article 中有 h2 时，h3 才会有左侧缩进 */

857.page-contentarticle:has(h2) h3 {

858 margin: 0.6rem 0 0.3rem 2rem;

859}

860

861/* 默认样式（没有 h2 时的样式） */

862.page-contentarticle h3 {

863 font-size: 18px;

864 color: #127abf;

865 font-weight: 600;

866 margin: 0.6rem 0 0.3rem 0; /* 没有左侧缩进 */

867 padding: 5px 10px 5px 15px;

868 border-left: 3px solid #214d22;

869 background: linear-gradient(90deg, rgba(142,228,148,0.1) 0%, rgba(255,255,255,0) 30%);

870 text-indent: 0;

871 letter-spacing: 0.8px;

872 border-radius: 0 4px 4px 0;

873 transition: all 0.2s ease;

874}

875

876

877

878.page-contentarticle img {

879 display: block;

880 margin-left: auto;

881 margin-right: auto;

882 text-indent: 0rem;

883 max-width: 350px;

884 max-height: 400px;

885 width: 85%;

886}

887

888

889

890

891.page-contentarticle ul li {

892 position: relative;

893 padding: 4px 0;

894}

895.page-contentarticle ul li:before {

896 content: "•";

897 color: #c00;

898 position: absolute;

899 left: -15px;

900 font-weight: bold;

901 font-size: 18px;

902}

903

904/* 当 ul 包含 h3 时，取消 li 的前缀样式 */

905.page-contentarticle ul:has(h3) li:before {

906 content: none;

907}

908.page-contentarticle ol:has(h3) li:before {

909 content: none;

910}

911

912.page-contentarticle ol li {

913 position: relative;

914 padding: 4px 0;

915}

916.page-contentarticle ol li:before {

917 content: "•";

918 color: #c00;

919 position: absolute;

920 left: -15px;

921 font-weight: bold;

922 font-size: 18px;

923}

924

925.page-contentarticle ul li, .page-contentarticle ol li {

926 margin-bottom: 0.5em;

927 padding-left: 5px;

928}

929

930.page-contentarticle ul {

931 list-style: none;

932 padding-left: 30px;

933 margin: 1.2em 10px;

934}

935.page-contentarticle ol {

936 list-style: none;

937 padding-left: 30px;

938 margin: 1.2em 10px;

939}

940

941

942

943.page-contentarticle table {

944 width: 100%;

945 margin: 20px 0;

946 border-collapse: collapse;

947}

948

949.page-contentarticle th,

950.page-contentarticle td {

951 padding: 10px;

952 border: 1px solid #ddd;

953 text-align: left;

954}

955

956.page-contentarticle th {

957 background-color: #f5f5f5;

958 font-weight: bold;

959}

960

961/* 推荐文章样式 */

962.page-recommended-articles {

963 border-top: 2px solid #865000;

964 padding-top: 30px;

965 margin-top: 50px;

966}

967

968.page-recommended-title {

969 font-size: 1.8em;

970 margin-bottom: 25px;

971 color: #333;

972 text-align: center;

973 font-family: 'agency', serif;

974}

975

976.page-recommended-item {

977 display: flex;

978 margin-bottom: 25px;

979 padding-bottom: 25px;

980 border-bottom: 1px solid #eee;

981}

982

983.page-recommended-image {

984 flex: 0 0 120px;

985 margin-right: 20px;

986}

987

988.page-recommended-image img {

989 width: 120px;

990 height: 120px;

991 object-fit: cover;

992}

993

994.page-recommended-content {

995 flex: 1;

996}

997

998.page-recommended-article-title {

999 font-size: 1.2em;

1000 margin-bottom: 10px;

1001}

1002

1003.page-recommended-article-title a {

1004 color: #865000;

1005 text-decoration: none;

1006}

1007

1008.page-recommended-article-title a:hover {

1009 text-decoration: underline;

1010}

1011

1012.page-recommended-category {

1013 color: #777;

1014 font-size: 14px;

1015 font-style: italic;

1016}

1017

1018

1019

1020

1021

1022.brand-display {

1023 max-width: 900px;

1024 margin: 0 auto;

1025 padding: 20px;

1026 display: flex;

1027 flex-wrap: wrap;

1028 justify-content: center;

1029}

1030

1031.brand-item {

1032 width: 180px; /* 4个品牌刚好800px，加上间距不超过900px */

1033 margin: 10px;

1034 text-align: center;

1035 border: 1px solid #e0e0e0;

1036 border-radius: 5px;

1037 overflow: hidden;

1038 transition: all 0.3s ease;

1039 background: #fff;

1040 box-shadow: 0 2px 5px rgba(0,0,0,0.1);

1041}

1042

1043.brand-image {

1044 height: 150px;

1045 display: flex;

1046 align-items: center;

1047 justify-content: center;

1048 padding: 15px;

1049 background: #f9f9f9;

1050 transition: transform 0.3s ease;

1051}

1052

1053.brand-image img {

1054 max-width: 100%;

1055 max-height: 100%;

1056 object-fit: contain;

1057}

1058

1059.brand-name {

1060 padding: 15px;

1061 font-size: 16px;

1062 font-weight: bold;

1063 color: #333;

1064 background: #fff;

1065 border-top: 1px solid #eee;

1066}

1067

1068/* 鼠标悬停效果 */

1069.brand-item:hover {

1070 transform: translateY(-5px);

1071 box-shadow: 0 10px 20px rgba(0,0,0,0.1);

1072 border-color: #b75802;

1073}

1074

1075.brand-item:hover .brand-image {

1076 transform: scale(1.05);

1077}

1078

1079.brand-item:hover .brand-name {

1080 color: #b75802;

1081}

1082

1083

1084

1085

1086

1087

1088.pagination {

1089 text-align: center;

1090 margin: 20px 20px;

1091}

1092.pagination a, .pagination span.current {

1093 display: inline-block;

1094 padding: 5px 10px;

1095 margin: 0 3px;

1096 border: 1px solid #ccc;

1097 color: #333;

1098 text-decoration: none;

1099}

1100.pagination span.current {

1101 background: #007bff;

1102 color: white;

1103 border-color: #007bff;

1104}

1105

1106

1107

1108

1109

1110

1111

1112

1113

1114.prodinfo .prod-desc {

1115 font-size: 16px;

1116 line-height: 1.7;

1117 color: #444;

1118 margin-bottom: 30px;

1119 border: 1px solid #ccc;

1120 border-radius: 6px;

1121 background-color: #fff;

1122 font-family: 'Helvetica Neue', Arial, sans-serif;

1123 width: 100%;

1124 max-width: 500px;

1125 padding: 0;

1126}

1127

1128.prod-desc li {

1129 display: flex;

1130 padding: 12px 15px;

1131 font-size: 15px;

1132 color: #333;

1133 line-height: 1.5;

1134 border-bottom: 1px solid #e0e0e0;

1135}

1136

1137.prod-desc li:last-child {

1138 border-bottom: none;

1139}

1140

1141

1142.prod-desc .label {

1143 width: 50%;

1144 box-sizing: border-box;

1145}

1146.prod-desc .value {

1147 width: 50%;

1148 box-sizing: border-box;

1149}

1150

1151.prod-desc .label {

1152 font-weight: bold;

1153 border-right: 1px solid #e0e0e0;

1154 padding-right: 10px;

1155 color: #444;

1156}

1157

1158.prod-desc .value {

1159 padding-left: 10px;

1160 text-align: left;

1161}