.nav-btn,.menu,.br{display:none}
.container{max-width: 1200px}
.header{padding-top:30px;padding-bottom:30px;justify-content: space-between}
.header .logo img{width:100%}
.header .tel{flex-grow:2;margin-left:40px;position:relative;padding-left:40px}
.header .tel:before{content:'\e635';color:#cc0001;font-family:'iconfont';font-size:2.3rem;position:absolute;top:0;left:0;font-weight:600}
.header .tel span{display: block;padding-left:3px}
.header .tel strong{font-size: 25px;line-height:1.1}
.header .search{flex:0 0 302px;margin-top:9px}
.header .search input[type=text]{width:200px;height:40px;border:solid 1px #ddd;padding-left:12px}
.header .search input[type=submit]{width:100px;height:40px;background: #cc0001;color:#fff}
.nav{height: 60px;background: #333;  position: relative;  z-index: 3}
.nav ul{height:100%}
.nav li{flex:0 0 170px;border-right: 1px solid #444;display: flex;align-items: center;justify-content: center}
.nav li a{color:#fff;font-size:16px}
.nav li.active{background: #cc0001}
.nav li:hover{background: #cc0001;transition: .2s}
.home-banner{}
.home-banner img{width:100%}
.home-banner .swiper-pagination{}
.home-banner .swiper-pagination-bullet-active{background: #cc0001}
.home-title{text-align: center;position:relative;font-size:38px;font-weight: bold;margin:40px 0 50px}
.home-title:before{content:'';width:120px;height:1px;background: #ddd;position:absolute;top:25px;left:50%;margin-left:-230px}
.home-title:after{content:'';width:120px;height:1px;background: #ddd;position:absolute;top:25px;right:50%;margin-right:-230px}
.home-product{padding:30px 0}
.home-product .type{justify-content: space-between;max-width:780px;margin:0 auto}
.home-product .type a{width:23%;line-height:45px;border:solid 1px #ddd;border-radius:4px;text-align: center}
.home-product .type a:hover{background:#cc0001;color:#fff;border-color: #cc0001;transition:.3s}
.home-product .list{justify-content: space-between;margin-top:40px}
.home-product .big{width:49%;height:420px}
.home-product .big figure,
.home-product .big img{width:100%;height:100%}
.home-product .small{width:49%;justify-content: space-between}
.home-product .small li{width:48%;height:200px;margin-bottom:20px;position:relative}
.home-product .small figure{width:100%;height:100%;overflow: hidden}
.home-product .small li img{width:100%;height:100%;transition:.3s}
.home-product .small li a{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3}
.home-product .small li:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background: #000;opacity:0}
.home-product .small li article{position:absolute;top:3%;right:3%;bottom:3%;left:3%;opacity:0;z-index:2;border:solid 2px #fff;text-align: center}
.home-product .small article strong{display:block;color:#fff;font-size:20px;font-weight:500;margin:22% 0 10px 0}
.home-product .small article span{display:inline-block;color:#fff;border:solid 1px #cc0001;border-radius:15px;padding:4px 25px}
.home-product .small li:hover img{transform: scale(1.1,1.1);transition:.3s}
.home-product .small li:hover:before{opacity:.5;transition:.3s}
.home-product .small li:hover article{opacity:1;transition:.3s}
.home-product .more{text-align: center;margin:30px auto}
.home-product .more a{display: inline-block;padding:12px 50px;border-radius:4px;color: #fff;background: #cc0001}
.home-product .more a:hover{background: #bf0001}
.home-process{height: 150px;background: url("../images/home-process.jpg")}
.home-process dl{flex:0 0 325px;margin-top:35px;margin-right:60px;color:#fff;border-right:solid 1px #cc0001;padding-right:50px}
.home-process dt{font-size:25px}
.home-process dt small{font-size:14px}
.home-process dd{font-size:30px;padding:6px 0 0 20px}
.home-process ul{flex: 0 1 calc(100% - 390px);display: flex;flex-wrap: wrap;justify-content: space-between;margin-top:28px}
.home-process li{flex:0 0 10%;text-align: center}
.home-process li img{width:82%;;transition:.5s}
.home-process li:hover img{transform:rotate(360deg)}
.home-process li span{color:#fff;margin-top:9px;display:block;font-size:16px}
.home-about{padding:30px 0}
.home-about .container{justify-content: space-between}
.home-about figure{flex:0 0 45%}
.home-about figure img{width:100%}
.home-about article{flex:0 0 45%;border:solid 1px #ddd;position:relative}
.home-about .text{position:absolute;z-index:2;top:43px;right:50px;background: #fff;width:102%;padding:12px 0}
.home-about .text strong{font-size: 24px;padding: 10px 0}
.home-about .text p{color: #333;line-height:1.9;margin:15px 0 20px}
.home-about .text a{background: #bf0001;color:#fff;text-align: center;display:inline-block;padding:10px 40px;border-radius:4px}
.home-about .text a:hover{background: #b30000}
.home-news{background: #f9f9f9;padding:30px 0}
.home-news .container{justify-content: space-between}
.home-news .hot{flex: 0 0 36%}
.home-news .hot .image{display:flex}
.home-news .hot .date{flex: 0 0 45%;display:flex;align-items:center;justify-content:center;background:url("../images/date.jpg") no-repeat;background-size: 100% 100%;position:relative}
.home-news .hot .date img{max-width:80%}
.home-news .hot .date p{position:absolute;top:35px;right:0;width:100%;z-index:2;color:#fff;text-align: center;font-size:16px}
.home-news .hot .date strong{font-size: 60px;display:block;line-height:1.2}
.home-news .hot figure{flex: 0 0 60%}
.home-news .hot figure img{width:100%}
.home-news .hot article{margin-top:12px}
.home-news .hot article a.name{font-size: 20px}
.home-news .hot article a.name:hover{color:#bf0001}
.home-news .hot article p{color: #999;padding:9px 0 20px}
.home-news .hot article a.more{border-radius: 5px;text-align: center;display: inline-block;font-size: 14px;color: #cc0001;padding:10px 50px;border: 1px solid #cc0001}
.home-news .hot article a.more:hover{background: #bf0001;color:#fff}
.home-news ul{flex: 0 0 60%}
.home-news li{display:flex;justify-content:space-between;margin-bottom:24px;position:relative}
.home-news li > a{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}
.home-news li img{flex:0 0 20%;width:20%;height:100%}
.home-news li p{color: #999;flex:0 0 58%}
.home-news li p span{display:block;font-size:18px;color:#333;padding-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.home-news li dl{flex:0 0 15%;text-align: center;border-left: 1px solid #e9e9e9}
.home-news li dt{display: block;font-size: 48px;color: #999;line-height: 60px}
.home-news li dd{font-size: 14px}
.footer{background: #222;color:#fff;padding:50px 0}
.footer a{color:#fff}
.footer .container{justify-content: space-between}
.footer .f-nav{display:flex;flex: 0 0 45%;width:45%;justify-content: space-between}
.footer .f-nav dl{}
.footer .f-nav dt{font-size:16px;margin-bottom:12px}
.footer .f-nav dd{margin-top:5px}
.footer .f-nav dd a{color:#ddd}
.footer .qr{flex: 0 0 23%;width:23%;text-align: center;border-left:solid 1px #444}
.footer .qr img{width:50%}
.footer .qr span{display:block;margin-top:9px}
.copyright{background: #000;color:#ddd;font-size:12px;padding:12px 0;text-align: center}
.page-banner{}
.page-banner img{width:100%}
.page-title{margin:25px auto;padding-bottom:9px;border-bottom:solid 1px #eee;justify-content: space-between}
.page-title h3{padding:9px 0 0 12px;font-size:18px;position:relative}
.page-title h3:before{content:'';background: #bf0001;width:3px;height:18px;display:inline-block;position:absolute;top:10px;left:0}
.page-about p{line-height:1.8;margin-bottom:12px}
.recommend{background: #f9f9f9;padding:12px;margin:60px 0}
.recommend h4{font-size:16px;padding-bottom:12px}
.recommend ul{justify-content: space-between}
.recommend li{flex:0 0 24%;text-align: center}
.recommend li img{width:100%;height:200px}
.recommend li span{display:block;margin-top:12px}
.page-contact{}
.page-contact h2{margin-bottom:20px}
.page-contact p{margin-bottom:12px}
.page-map{margin:60px auto;height:min(500px,60vw);background-position: center center;background-size:cover}
.page-sort{margin-bottom:20px}
.page-sort a{display:inline-block;padding:6px 20px;margin-right:20px;border:solid 1px #ddd;border-radius:4px}
.page-sort a.active,
.page-sort a:hover{background: #bf0001;border:solid 1px #bf0001;color:#fff}
.page-product-list,
.page-news-list{margin-bottom:60px}
.page-product-list ul{justify-content: space-between}
.page-product-list li{flex:0 0 23%;border:solid 1px #ddd;margin-bottom:30px;  }
.page-product-list li.none{border:0;margin-bottom:0}
.page-product-list li img{width:100%;height:200px}
.page-product-list li p{padding:9px;text-align: center}
.page-news-list{}
.page-news-list li{display:flex;justify-content:space-between;padding-bottom:12px;margin-bottom:12px;border-bottom:dashed 1px #ddd}
.page-news-list .image{width:180px;height:150px;padding:2px;border:solid 1px #ddd}
.page-news-list .image img{width:100%;height:100%}
.page-news-list .desc{float:right;width:calc(100% - 210px)}
.page-news-list .desc a{font-size:18px}
.page-news-list .desc a:hover{color:#bf0001}
.page-news-list .desc p{line-height:1.8;padding:12px 0}
.page-news-list .desc span{font-size:12px}
.page-detail{margin-bottom:60px}
.page-detail h1{text-align: center;font-size:25px;margin:20px 0}
.page-detail .date{text-align: right;border-top:dashed 1px #ddd;border-bottom:dashed 1px #ddd;padding:9px 0;margin-bottom:30px;color:#666}
.page-detail article p{margin-bottom:12px;line-height:1.8}
.page-detail article img{max-width:100%}
.page-detail .next{margin-top:50px;justify-content: space-between;border-top:solid 1px #ddd;border-bottom:solid 1px #ddd;padding:9px 0}
.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;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}
@media (max-width:1200px){
  .home-product .big{width:49%;height:33vw}
}
@media (max-width:1024px){
  .header .search{display:none}
  .header .tel{flex-grow:0;margin-left:0;padding-left:40px}
  .nav{height: 50px}
  .nav li{flex:0 0 20%;border-right: 1px solid #444}
  .nav li a{font-size:14px}
  .home-title{font-size:32px;margin:30px 0 40px}
  .home-title:before{content:'';width:100px;top:20px;left:50%;margin-left:-200px}
  .home-title:after{content:'';width:100px;top:20px;right:50%;margin-right:-200px}
  .home-product .big{height:36vw}
  .home-product .small li{height:17vw;margin-bottom:20px}
  .home-process{height: 140px}
  .home-process dl{flex:0 0 30%;margin-right:6%;padding-right:0}
  .home-process dt{font-size:20px}
  .home-process dd{font-size:22px}
  .home-process ul{flex: 0 1 60%}
  .home-process li span{font-size:12px}
  .home-about figure{flex:0 0 40%}
  .home-about figure img{width:100%}
  .home-about article{flex:0 0 50%}
  .home-about .text{top:20px;right:40px}
  .home-about .text strong{font-size: 20px;padding:5px 0 0}
  .home-about .text p{margin:0 0 10px;font-size:12px}
  .home-about .text a{padding:5px 30px;border-radius:4px}
  .home-news .hot .date strong{font-size: 50px}
  .home-news .hot article a.name,
  .home-news li p span{font-size:17px}
  .home-news li dt{font-size: 40px;line-height: 60px}
}
@media (max-width:768px){

  body:before{content:'';display:block;height:70px}
  .header .tel,
  .home-product .big,
  .home-process,
  .home-news .hot,
  .home-news li dl,
  .page-news-list .image,
  .footer{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%}
  .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}
  .home-title{font-size:25px;margin:10px 0 30px}
  .home-title:before{content:'';width:60px;top:15px;left:50%;margin-left:-130px}
  .home-title:after{content:'';width:60px;top:15px;right:50%;margin-right:-130px}
  .home-product .type{padding:0 12px}
  .home-product .type a{line-height:35px}
  .home-product .list{margin-top:20px}
  .home-product .small{width:100%}
  .home-product .small li{height:38vw}
  .home-product .small figure{height:84%}
  .home-product .small li article{position: relative;top:0;right:0;bottom:0;left:0;opacity:1;z-index:2;border:0;text-align: center}
  .home-product .small article strong{display:block;color:#333;font-size:14px;margin:10px 0}
  .home-product .small article span{display:none}
  .home-product .small li:hover:before{opacity:0}
  .home-product .more{margin:20px auto}
  .home-product .more a{padding:7px 30px;font-size:12px}
  .home-about{border-top:solid 6px #f9f9f9}
  .home-about figure{flex:0 0 100%}
  .home-about article{flex:0 0 100%;border:0}
  .home-about .text{position:relative;z-index:2;top:0;right:0;width:100%}
  .home-about .text strong{font-size:18px;padding: 10px 0}
  .home-about .text p{margin:12px 0}
  .home-about .text a{padding:6px 30px;border-radius:4px}
  .home-news{background: #fff;padding:30px 0;border-top:solid 6px #f9f9f9}
  .home-news ul{flex: 0 0 100%}
  .home-news li{display:flex;justify-content:space-between;margin-bottom:24px;position:relative}
  .home-news li > a{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}
  .home-news li img{flex:0 0 30%;width:20%;height:100%}
  .home-news li p{color: #999;flex:0 0 67%;font-size:12px;line-height:1.8}
  .home-news li p span{font-size:16px;line-height:1}
  .br{display:block}
  .page-title{margin:15px auto}
  .page-title h3{font-size:16px}
  .page-title h3:before{width:3px;height:16px;top:12px}
  .recommend{margin:40px 0}
  .recommend li{flex:0 0 48%;margin-bottom:12px}
  .recommend li img{height:38vw}
  .page-contact h2{margin-bottom:20px}
  .page-contact p{margin-bottom:12px}
  .page-map{margin:60px auto}
  .page-sort{margin-bottom:20px;justify-content: space-between}
  .page-sort a{flex:0 0 19%;padding:6px 0;margin-right:0;text-align: center;font-size:12px}
  .page-product-list,
  .page-news-list,
  .page-detail{margin-bottom:40px}
  .page-product-list ul{justify-content: space-between}
  .page-product-list li{flex:0 0 48%}
  .page-product-list li img{height:40vw}
  .page-news-list li{display:flex;justify-content:space-between;padding-bottom:12px;margin-bottom:12px;border-bottom:dashed 1px #ddd}
  .page-news-list .desc{float:none;width:100%}
  .page-news-list .desc a{font-size:16px}
  .page-news-list .desc p{font-size:14px}
  .page-news-list .desc span{font-size:12px;color:#666}
  .page-detail h1{font-size:20px}
  .page-detail .date{font-size:12px}
  .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}
}
@media (max-width:414px){
  body:before{height:50px}
  .header{height:55px;padding-top:15px}
  .header .logo{max-width:50%}
  .nav-btn{padding-top:0}
  .nav-btn:before{font-size:1.5rem}
}