body{background:#778899;color:#333}
.container{max-width:1024px}
.home-box{padding:60px 0}
.article-detail{}
.article-detail h1{margin:30px 0 22px;text-align: center}
.article-detail .meta{font-size:12px;text-align: right;padding:5px;background: #fbfbfb;margin:22px 0;color:#777}
.article-detail .detail{}
.article-detail .detail p{line-height:1.8;margin-bottom:12px}
.article-detail .detail img{max-width:100%}
.article-detail .neighbor{margin:50px 0;border-top:solid 1px #ddd;padding-top:12px;justify-content: space-between}
.article-detail .neighbor div{color:#777}
.article-detail .neighbor a:hover{text-decoration: underline}
.content-map{max-width:1200px;height:500px;border:#ccc solid 1px}
.fixed-r{position:fixed;right:20px;bottom:200px}
.fixed-r li{width:56px;height:56px;line-height:56px;text-align:center;background:#e2672b;margin-bottom:2px;color:#fff;position:relative;cursor: pointer}
.fixed-r li:hover{background:#bf0001;color:#fff;position:relative}
.fixed-r li:before{font-size:2rem;font-family:iconfont}
.fixed-r li.tel:before{content:'\e633'}
.fixed-r li.qq:before{content:'\e624'}
.fixed-r li.wechat:before{content:'\e623'}
.fixed-r li.top:before{content:'\e816'}
.fixed-r li a{display:block;width:100%;height:100%;left:0;top:0;position:absolute;z-index:2}
.fixed-r li.tel{overflow: hidden}
.fixed-r li.tel .extend{color:#e2672b;font-size:20px;position:absolute;top:0;bottom:0;right:100%;z-index:-1;padding:0 12px;background: #f5f5f5;line-height:1;display:flex;align-items: center;opacity:0;transition:1s}
.fixed-r li.tel:hover{overflow: visible}
.fixed-r li.tel:hover .extend{right:100%;opacity: 1}
.wechat-popup{position:fixed;z-index:-1;opacity:0;text-align:center;padding:30px;width:260px;border-radius:6px;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:92%}
.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}
.header-wrapper{background: #fff;box-shadow:0 4px 5px 0 rgba(0,0,0,.06), 0 1px 10px 0 rgba(0,0,0,.04), 0 0 4px -1px rgba(0,0,0,.08)}
.header{padding-top:25px;margin-top:20px;width:100%;background: url("../images/nav.gif") 0 bottom repeat-x}
.header{justify-content:space-between}
.header .logo img{max-height:100px}
.nav{display:flex;justify-content:space-between;margin:50px 0 4px}
.nav li{padding-bottom:24px;border-bottom: 4px solid transparent;font-size:13px;position:relative}
.nav li > a{color:#333;display:block;padding:12px 20px;background: url("../images/nav.gif") left repeat-y}
.nav li > a:hover{color:#269bc6}
.nav li.active,
.nav li:hover{border-bottom: 4px solid #269bc6}
.nav li .extend{position:absolute;z-index:2;top:calc(100% + 4px);left:0;padding-top:6px;width:200%;opacity: 0;visibility: hidden;margin-top:20px;transition:0.2s}
.nav li .extend:after{content:'';position:absolute;top:0;right:0;width:100%;height:100%;z-index:1;background:#fff;opacity: .9}
.nav li:hover .extend{opacity:1;visibility:visible;margin-top:0}
.nav li .extend dd{padding:8px 12px;position:relative;z-index:2;border-left:solid 4px transparent}
.nav li .extend dd:hover{background:#f9f9f9;border-left:solid 4px #269bc6}
.nav li .extend dd:hover a{color:#269bc6}
.nav-btn{display:none}
.home-banner{padding:15px;background: #fff}
.home-banner .swiper-pagination{}
.home-banner .swiper-pagination-bullet-active{/*高亮颜色*/}
.home-banner .swiper-slide{height:300px;background-repeat:no-repeat;background-position:center 0;background-size:auto 100%}
.page-banner{height:300px;background-repeat:no-repeat;background-position:center 0;background-size:auto 100%}
.home-goods{background: #fff;padding-bottom:25px}
.home-goods ul{padding-top:15px;background: url("../images/nav.gif") repeat-x 0 0;justify-content: space-between}
.home-goods li{flex:0 0 24%;padding:8px 0}
.home-goods li strong{font-weight: 500;font-size:18px}
.home-goods li p{color:#888;padding:6px 0 25px;border-top:dashed 1px #eee;margin-top:12px}
.home-goods li img{height:156px;width:100%;border:solid 1px #ddd;padding:1px}
.line{background: url("../images/nav.gif") repeat-x 0 0;height:5px}
.footer{background: #fff}
.footer .contact{padding:15px 5px;background: url(../images/footer-contact.png) bottom repeat-x;color: #818181;justify-content: space-between}
.footer .contact p{font-size:22px;color:#999}
.footer .contact .button{padding:9px 30px;background-image: linear-gradient(#279bc5, #1b84aa, #147394);outline:solid 1px #136d8e;border:solid 1px #79b9d1; color:#fff}
.footer .contact .button:hover{background-image: linear-gradient(#2cb0e0, #229cc8, #1889b2)}
.footer .bottom{margin-top:1px;background: url("../images/nav.gif") repeat-x 0 0;padding:15px 0;font-size:12px;justify-content: space-between}
.footer .copyright{color:#777;display:flex;align-items: center}
.footer .link{display:flex}
.footer .link a{color:#777;padding:12px;background: url("../images/nav.gif") left repeat-y}
.footer .link a:hover{color:#269bc6}
.main{background: #fff}
.main-name{padding:20px 0;background: url(../images/footer-contact.png) bottom repeat-x;justify-content: space-between}
.main-name strong{font-size:25px;font-weight: 500}
.search{padding-top:10px}
.search form{display:flex}
.search input[type=text]{border:solid 1px #ddd;padding:3px 5px}
.search input[type=submit]{}
.page-text{padding:12px 0}
.page-text p{margin-bottom:12px;line-height:1.8;font-size:13px}
.page-text img{max-width:100%}
.page-main{justify-content: space-between;padding:9px 0}
.page-main .side{flex:0 0 240px;padding-left:15px;background: url("../images/nav.gif") left repeat-y}
.page-main .content{flex:0 0 calc(100% - 260px)}
.page-main .sort{}
.page-main .sort dt,
.page-main .sort dd{background: url(../images/nav.gif) bottom repeat-x}
.page-main .sort dt{font-size:19px;color:#777;padding-bottom:9px}
.page-main .sort dd{padding:9px 0 15px;font-size:12px}
.page-main .sort dd a{color:#777}
.page-main .sort dd a:hover{color:#269bc6}
.page-main .description{font-size:13px;line-height:1.8}
.product-list{justify-content: space-between;margin:20px auto 5px}
.product-list li{flex:0 0 24%;margin-bottom:20px}
.product-list li.last{margin-bottom:0;padding:0;background: transparent}
.product-list figure{overflow: hidden}
.product-list figure img{height:140px;width:100%;transition:.4s}
.product-list li:hover figure img{transform: scale(1.1, 1.1)}
.product-list article{padding-top:9px;font-size:13px}
.product-list article a{color: #269bc6}
.product-list article a:hover{color: #555}
@media (max-width:1024px){
  .article-detail h1{margin-top:20px;font-size:17px}
  .article-detail .neighbor div{flex:0 0 100%;margin-bottom:9px}
  .fixed-r{right:12px;bottom:12px}
  .fixed-r li{width:36px;height:36px;line-height:34px}
  .fixed-r li:before{font-size:18px}
  .home-banner{padding:10px 0}
  .home-banner .swiper-slide{height:40vw}
  .page-banner{height:30vw}
  body:before{content: '';display:block;height:70px}
  .header{padding:10px 12px;position:fixed;top:0;right:0;z-index:922;background:#fff;margin-top:0}
  .header:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;z-index:-1;box-shadow:0 0 5px 5px rgba(0,0,0,.1)}
  .header .logo img{max-height:50px}
  .nav-btn{display:block;padding-top:12px}
  .nav-btn:before{content:'\e63e';font-family:iconfont;font-size:1.8rem;line-height:1;color:#333}
  .nav-btn.open:before{content:'\e61e'}
  .nav{margin:0;display:block;overflow:auto;padding:82px 12px 12px;position:fixed;top:0;left:100%;z-index:-2;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:80%;margin:0 auto;padding:13px 0;border-bottom:solid 1px #eee}
  .nav li > a{padding:0;background:none;font-size:15px}
  .nav li .extend{position:relative;top:auto;left:auto;width:100%;padding:6px 0 0;box-shadow:0 0 0 rgba(0,0,0,0);opacity: 1;visibility:visible;margin-top:12px;border-top:dashed 1px #eee}
  .nav li .extend dd a{font-size:12px}
  .home-goods li{flex:0 0 49%}
  .home-goods li img{height:35vw}
  .footer .copyright,
  .footer .link{flex:0 0 100%;text-align: center;justify-content:center}
  .footer .link a{padding:2px 5px}
  .footer .link a:first-child{background: none}
}
@media (max-width:768px){
  .footer .contact p{font-size:16px;display:flex;align-items: center}
  .footer .contact .button{padding:5px 20px}
  .main-name{padding:10px 0}
  .page-main .side,
  .page-main .content{flex:0 0 100%}
  .page-main .side{;padding-left:0;background:none;margin-top:12px}
  .product-list li{margin-bottom:20px}
  .product-list li figure img{height:16vw}
  .product-list li article{font-size:12px}
}
@media (max-width:512px){
  .home-goods ul{padding-top:10px}
  .home-goods li strong{font-size:15px}
  .home-goods li p{font-size:12px;padding:6px 0 15px}
  .footer .link{display:none}
  .footer .contact p{font-size:14px;flex:0 0 100%;justify-content: center;padding-bottom:12px}
  .footer .contact .button{flex:0 0 100%;text-align: center}
  .main-name strong{font-size:16px}
  .search{padding-top:5px}
  .product-list li{flex:0 0 49%;margin-bottom:15px}
  .product-list li figure img{height:33vw}
}

@media (max-width:414px){
  .search{display:none}
}