.container {max-width:1200px}
.top {background: #f5f5f5;border-bottom:solid 1px #ddd;font-size:12px;color:#555;padding:5px 0}
.nav-btn{display:none}
.container{max-width: 1200px}
.header{padding-top:20px;padding-bottom:20px;justify-content: space-between}
.header .logo {font-size:26px;font-weight: 600}
.header .logo img{width:100%}
.header .tel {padding-left:46px;position:relative}
.header .tel:before{content:'\e633';font-family: iconfont;position:absolute;top:0;left:0;color:#cc0001;font-size:2.5rem;line-height:1.2}
.header .tel span{display:block;color:#888;font-size:12px}
.header .tel strong{font-size:1.2rem}
.nav{height: 50px;background:#FEA500;;position: relative;  z-index: 3}
.nav ul{height:100%}
.nav li{flex:0 0 150px;border-right: 1px solid #dc8f00;display: flex;align-items: center;justify-content: center;position:relative}
.nav li a{color:#fff;font-size:16px}
.nav li.active{background: #E49303}
.nav li:hover{background: #E49303;transition: .2s}
.nav li.extend dl{display:none;border-top: 1px solid #dc8f00;position:absolute;top:100%;right:0;width:100%;background:#E49303}
.nav li.extend:hover dl{display:block}
.nav li.extend dd{text-align: center;padding:7px 0;border-bottom:solid 1px #dc8f00}
.nav li.extend dd:hover{background: #dc8f00}
.nav li.extend dd a{font-size:14px}
.home-banner {margin:5px auto}
.home-banner img{width:100%}
.title-1 {border-bottom:solid 1px #ddd;padding-bottom:6px;margin:12px 0}
.title-1 strong{color:#E49303;font-size:20px}
.title-1 small{color:#777;display:inline-block;margin-left:9px}
.title-1 a {float:right;color:#777;font-size:12px;margin-top:9px}
.title-2 {margin:20px 0 12px;font-size:18px;border-bottom:solid 1px #ddd;padding-bottom:6px}
.main{min-height:600px}
.goods-list {display:flex;flex-wrap: wrap;justify-content: space-between}
.goods-list li{flex: 0 0 24%;margin-bottom:20px;border:solid 1px #ddd;position:relative}
.goods-list li.last{margin:0;padding:0;border:0}
.goods-list li figure{display:flex;justify-content: center;height:250px;border-bottom:solid 1px #ddd;padding:2px;overflow: hidden;position:relative}
.goods-list li figure > a{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}
.goods-list li figure img{max-width:100%;max-height:100%;flex-shrink: 0;align-self:center;transition:.2s}
.goods-list li figure:hover img{transform: scale(1.05)}
.goods-list li .fee{position:relative;margin:5px}
.goods-list li .fee:after{content:'\e600';font-family: iconfont;position:absolute;top:4px;right:4px;color:#666}
.goods-list li .fee span{color: #d50000;font-size:18px}
.goods-list li .fee small{font-size: 14px;color: #999;margin-left: 5px}
.goods-list li .name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:5px}
.goods-list li .name a{color:#555}
.footer {text-align: center;margin-top:20px;padding:20px 0;font-size:12px;border-top:solid 1px #ddd;background: #333;color:#eee}
.footer a{color:#eee}
.fixed-service{position:fixed;right:20px;bottom:200px;z-index:100}
.fixed-service .item{position:relative;width:50px;height:50px;border-radius:100%;background: #fff;border:solid 1px #eee;margin-bottom:5px;text-align: center}
.fixed-service .item:before{font-family: iconfont;line-height:48px;color:#999;font-size:1.4rem}
.fixed-service .tel:before{content:'\e632'}
.fixed-service .tel > a{position:absolute;top:0;right:0;bottom:0;left:0}
.fixed-service .wechat:before{content:'\e623'}
.fixed-service .top:before{content:'\e816'}
.fixed-service .tel .number {position:absolute;top:0;right:0;line-height:48px;height:48px;width:100%;overflow:hidden;z-index:-1;background: #cc0001;color:#fff;border-radius:50px;text-align: left;padding-left:12px;font-size:1.2rem;transition: .4s}
.fixed-service .tel:hover .number{width:400%}
.wechat-popup {position:fixed;z-index:-1;opacity: 0;text-align: center;padding:30px;width:260px;margin-left:-130px;left:50%;top:30%;background: #fff}
.wechat-popup.visible{z-index:930;opacity: 1}
.wechat-popup .close{position:absolute;top:10px;right:10px;cursor: pointer}
.wechat-popup .close:before{content:'\e61e';font-family: iconfont;font-size:1.2rem}
.wechat-popup img{max-width:90%}
.wechat-popup p{margin:5px 0}
.wechat-popup button{background: #bf0001;color:#fff;border-radius:3px;padding:3px 9px}
.wechat-popup label{opacity: 0;position:absolute;top:0}
.sorts{background: #fafafa;border:solid 1px #eee;padding:9px 5px 0;margin:12px 0}
.sorts span{color:#777}
.sorts a{display:inline-block;margin:0 5px 9px}
.sorts a.active,
.sorts a:hover{color:#E49303}
.goods-info {}
.goods-info figure {flex:0 0 400px}
.goods-info figure img{width:100%}
.goods-info article {margin-left:30px}
.goods-info article h1 {font-size:20px;font-weight: 600;margin-bottom:20px}
.goods-info article p{margin-bottom:5px}
.goods-info article p{}
.goods-info article p small{color: #aaa;font-size:12px}
.goods-info article p span{font-size: 22px;color: #C00}
.goods-detail {}
.goods-detail p{line-height:1.8;margin-bottom:12px}
.goods-detail img{max-width:100%}
.article-detail {}
.article-detail h1 {text-align: center;}
.article-detail .attr{font-size:12px;margin:12px 0;padding:9px;border-top:solid 1px #eee;border-bottom:solid 1px #eee;text-align: right;background: #fcfcfc}
.article-detail .article{}
.article-detail .article p{line-height:1.8;margin-bottom:12px}
.article-detail .article img{max-width:100%}
.page-contact {justify-content: space-between;margin:50px auto}
.page-contact .item{font-size:16px}
.page-contact .item:before{content:'';font-family: iconfont;color:#666;margin-right:12px;font-size:20px;display:inline-block;width:40px;line-height:38px;background: #f9f9f9;text-align: center;border-radius:100%}
.page-contact .item.address:before{content:'\e636'}
.page-contact .item.tel:before{content:'\e633'}
.page-contact .item.email:before{content:'\e620'}
.article-list {margin:20px auto}
.article-list li{display:flex;justify-content: space-between;margin-bottom:30px;padding-bottom:30px;border-bottom:solid 1px #ddd}
.article-list dl{background: #f2f2f2;flex:0 0 120px;width:120px;height:90px;padding-top:18px;text-align: center}
.article-list dt{font-size:25px;line-height:1.2}
.article-list dd{font-size:14px}
.article-list article {flex-grow: 2;margin-left:20px}
.article-list article a {font-size:17px}
.article-list article a:hover {color: #0093d6}
.article-list article p{color:#999;margin-top:9px;line-height:1.7}
@media (max-width:1200px){
  .goods-list li figure{height:20vw}
}
@media (max-width:1024px){
  .nav{height: 50px}
  .nav li{flex:0 0 105px}
  .nav li a{font-size:14px}
  .page-contact {margin:30px auto}
  .page-contact .item{font-size:14px}
  .page-contact .item:before{font-size:16px;width:30px;line-height:30px}
}
@media (max-width:768px){
  body:before{content:'';height:70px;display:block}
  .top{display:none}
  .header{height:70px;padding-top:20px;position:fixed;top:0;right:0;z-index:922;background: #fff;box-shadow:0 0 5px 5px rgba(0,0,0,.1)}
  .header .logo{max-width:50%;font-size:20px}
  .header .tel{display:none}
  .nav-btn{display:block;padding-top:1px}
  .nav-btn:before{content:'\e63e';font-family:iconfont;font-size:2rem;line-height:1;color:#333}
  .nav-btn.open:before{content:'\e61e'}
  .nav{padding:82px 12px 12px;position:fixed;top:0;left:100%;z-index:911;width:100%;height:100vh;background:#fff;transition-duration:.2s}
  .nav.open{left:0;transition-duration:.3s;box-shadow:3px 0 10px 3px rgba(0,0,0,.1)}
  .nav ul{display:block}
  .nav li{border-right:0;display: block;text-align: center;width:60%;margin:0 auto;padding:13px 0;border-bottom:solid 1px #eee}
  .nav li a{color:#333;font-size:16px}
  .nav li.active,
  .nav li:hover{background: #fff}
  .nav li.active a{color:#cc0001}
  .nav li.extend dl{display:block;border-top:none;position:static;top:auto;right:auto;width:100%;background:#fbfbfb;margin-top:12px;}
  .nav li.extend dd{border-bottom:solid 1px #eee}
  .nav li.extend dd:hover{background:transparent}
  .nav li.extend dd a{color:#555}

  .fixed-service{position:fixed;right:20px;bottom:20px}
  .fixed-service .item{width:40px;height:40px}
  .fixed-service .item:before{font-family: iconfont;line-height:38px;font-size:1.4rem}
  .fixed-service .tel .number {display:none}
  .title-1 strong{font-size:18px}
  .title-2 {font-size:18px}
  .goods-info figure {flex:0 0 50%}
  .page-contact .item{flex:0 0 100%;margin-bottom:15px}
  .goods-list li{flex: 0 0 49%}
  .goods-list li figure{height:40vw}
}
@media (max-width:512px){
  body:before{height:56px}
  .header{height:56px;padding-top:15px}
  .header .logo{font-size:16px;margin-top:2px}
  .nav-btn{padding-top:0}
  .nav-btn:before{font-size:1.7rem}
  .title-1 strong,
  .title-2 {font-size:16px}
  .goods-info figure {flex:0 0 100%}
  .goods-info article {flex:0 0 100%;margin-left:0;background: #fafafa;padding:9px}
  .goods-info article h1 {font-size:16px}
  .goods-info article p{font-size:12px}
  .article-list dl{flex:0 0 70px;width:70px;height:100%;padding:12px 0}
  .article-list dt{font-size:20px}
  .article-list dd{font-size:12px}
  .article-list article a {font-size:15px}
  .article-list article p{font-size:12px}
  .goods-list li .name a{font-size:12px}

}