@font-face{
    font-family: title;
    src: url('../fonts/title.eot');
    src: url('../fonts/title.woff') format('woff'),url('../fonts/title.ttf') format('truetype');
}
@keyframes banner{
    0% { left: 0}
    50% {left:calc(100% - 2258px)}
    100% {left: 0}
}

* {box-sizing:border-box;}
.wrap{ width: 81.25%; min-width: 300px; margin: auto; }
.clr:after{ content: ""; display: block; clear: both; overflow: hidden; height: 0; }
.fl{ float: left; }
.fr{ float: right; }
.ico{ display: inline-block; background: url(../img/ico.png) left top no-repeat; }
body{ font-family: "Microsoft YaHei"; }
body,ul,ol,dl,dt,dd{ margin: 0; padding: 0;}
img{ display: block; max-width: 100%; border: 0;}
h1{ font-size: 60px; font-weight: normal; letter-spacing: -4px; }
h2{ font-size: 48px; font-weight: normal; letter-spacing: -4px; }
h3{ font-size: 18px; font-weight: normal; }
h1,h2{ font-family: "title","微软雅黑"; }
li{ list-style-type: none; }
header{ background: #ef1a2c; color: #fff; padding: 20px 0; }
header .logo{text-decoration: none; position: relative;}
header .logo strong{ position: absolute; right: 0; top: 5px; color: #fff; font-weight: 100; font-size: 12px; }
header .logo img{ float: left; }
nav{ padding-top: 10px; }
nav li{ display: block; float: left;position: relative; z-index: 999;}
nav li:hover{ z-index: 1000; }
nav li>a{ display: block; padding: 10px 20px; color: #fff; text-decoration: none; transition: all 0.5s; }
nav li.on>a{ background: #ef1a2c; color: #111; transition: background 0.25s; }
nav li>div{ position: absolute; display: none; width: 100%; min-width: 300px; left: 0; background: #fff; box-shadow: 0 5px 5px rgba(0,0,0,.3); padding: 10px;}
nav li:hover>div{ display: block; }
nav li>div>a{ display: inline-block; padding: 5px 10px; color: #111; text-decoration: none;}
nav li>div>a:hover{ text-decoration: underline; color: #ef1a2c; }
footer{ background: #111; color: #999; text-align: center; padding: 20px 0; }
footer a{ color: #ccc; text-decoration: none;}
footer a:hover{ text-decoration: underline; }
#loc{ padding: 10px; border-bottom:1px dashed #ddd; color: #999;}
#loc a{ color: #f22645; text-decoration: none; }
#loc a:hover{ text-decoration: underline; }
#kf{ position: fixed; width: 140px; background: #fff; right: 0; top: 50%; z-index: 9999; padding: 4px; box-shadow: 0 0 10px rgba(0,0,0,.5); text-align: center; font-size: 12px; color: #666;}
#kf>a{ display: block; white-space: nowrap; font-size: 16px;}
#kf .tel{ color: #ef1a2c; text-decoration: none; font-weight: bold; padding: 10px 0; }
#kf .totop{ font-size: 14px; padding-bottom: 10px; color: #333; text-decoration: none; }
#kf a:hover{ text-decoration: underline; }
#contact{ position: fixed; z-index: 99999; width: 100%; height: 100%;left: 0; top: 0; background: rgba(255,255,255,.95); display: none;}
#contact>div{ width: 100%; height: 100%; position: relative; }
#contact .close{ position: absolute; right: 0; top: 0; width: 60px; height: 60px; font-weight: 100; font-size: 60px; text-decoration: none; color: #c00;}
#contact .close:hover{ color:#111;  }
#contact .box{ width: 600px; height: 400px; position: absolute; left: 50%; top:50%; margin:-200px 0 0 -300px; }
#contact figure{ width: 180px; margin: 0 10px; float: left; text-align: center; }
#contact li{ padding: 5px 10px; border-bottom: 1px dashed #ddd; }
.tit{ text-align: center; padding: 30px 0; border-bottom: 1px dashed #999; margin-bottom: 30px;}
.tit h2{ margin-bottom: 0; }
.tit>div{ font-size: 36px; font-weight: 100; }
.tit>div>h2{ display: inline-block; padding-right: 10px; margin-right: 10px; }
.tit p{ margin-bottom: 0; }
.bg{ background: rgba(0,0,0,.1); margin: 30px 0; }
.in_links{ display: inline-block; text-indent: 0; position: relative; color: #ef1a2c; cursor: default; background: transparent;}
.in_links:hover span{ display: block; }
.in_links span{ display: none; text-indent: 0; position: absolute; left: -50px; bottom: 1.6em; width: 200px; border:1px solid #ddd; background: #fff; padding: 8px;}
.in_links span a{ display: block; overflow: hidden;text-overflow: ellipsis; padding: 2px 0; white-space: nowrap; font-size: 12px; color: #ef1a2c; text-decoration: none; }
.in_links span a:hover{ text-decoration: underline; }
.search li h3 a{ display: block; height: 48px; overflow: hidden; }
.search li p{ font-size: 14px; line-height: 20px; height: 80px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 4;  }
.search .txt{ padding: 10px; border:1px solid #ddd; outline: 0; }
.search .btn{ background: #ef1a2c; color: #fff; border:0; height: 37px; padding: 0 10px;}
.links a{ display: inline-block; font-size: 12px; color: #666; }
.links a:hover{ color: #ccc; }
/*首页*/
.banner{ width: 100%; height: 430px;overflow: hidden; position: relative;}
	.banner>img{ position: absolute; left: 0; top: 0; width: auto; max-width: none; animation: banner 50s linear infinite; -webkit-animation:banner 50s linear infinite; -o-animation:banner 50s linear infinite; -ms-animation:banner 50s linear infinite; z-index: 1;}
	.banner>.swiper{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; }
	.banner .swiper-slide>div{ width: 100%; height: 100%; background: rgba(0,0,0,.8); text-align: center;}
	.banner strong{ display: block;font-family: "title","微软雅黑"; font-weight: 100; margin: auto; padding-top: 60px; font-size: 96px;color: rgba(255,255,255,.8);}
	.banner p{ margin: auto; color: #f2b01b; font-size: 24px; font-weight: 100; margin-top: 20px;}
#about .tit div{ font-family: "微软雅黑"; font-size: 48px; font-weight: 100;}
	#about h1{ display: inline-block; margin:0 0 0 10px; border-left: 1px solid #ccc; padding-left: 10px;}
	#about .fr{ width: 540px; overflow: hidden; border:1px solid #ddd; padding-bottom: 10px;}
	#about .fl{ width: calc(100% - 570px); line-height: 1.8em;}
	#about .fl p{ text-indent: 2em; }
#character .wrap{ overflow: hidden; }
#character .part{ display: block; float: left; width: calc((100% - 70px) / 8); margin: 0 10px 10px 0; text-decoration: none;}
	#character .part:nth-child(8n){ margin-right: 0; }
	#character .part div{ border-radius: 12px; overflow: hidden; background: #000;}
	#character .part img{ opacity: 1; transition: opacity 1s; }
	#character .h img{opacity:0.5;}
	#character .part h3{ text-align: center; color: #111; transition: color 0.5s;}
	#character .part:hover h4,#character .part:hover h3{ color: #ef1a2c; }
	#product .wrap{ overflow: hidden; }
	#product .pics h4{ color: #111; font-weight: normal; height: 48px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
	#product .swiper-pagination{ position: static; padding-bottom: 30px; }
	#product .swiper-pagination-bullet{ display: inline-block; opacity: 1; border-radius: 0; margin: 0 1px; width: 40px; background: #111; }
	#product .swiper-pagination-bullet-active{ background: #ef1a2c;}
#solution{ overflow: hidden; }
#solution .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
#solution .swiper-slide>div{ position: relative; background: #111; width: 100%; height: 100%; overflow: hidden; }
#solution .swiper-slide>div img{ transition: all 0.5s; width: 100%; }
#solution .swiper-slide>div h3{ transition: all 0.5s; position: absolute; width: calc(100% - 40px); margin: 0; left: 20px; top: -60px; }
#solution .swiper-slide>div h3 a{ display: block; color: #fff; font-size: 20px; text-decoration: none; padding-right: 10px; display: block; border-bottom: 1px dashed rgba(255,255,255,.9); padding-bottom: 10px;}
#solution .swiper-slide>div h3 a:hover{ color: #ef1a2c; border-color: #ef1a2c; }
#solution .swiper-slide>div p{ transition: all 0.5s; position: absolute; margin: 0; width: calc(100% - 40px); font-size: 14px; line-height: 20px; height: 100px; color: #eee; left: 20px; bottom: -100%; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 5;}
#solution .swiper-slide>div:hover img{ opacity:0.1; }
#solution .swiper-slide>div:hover h3{ top: 20px; }
#solution .swiper-slide>div:hover p{ bottom: 20px;}
#gongy .part{ background: #000; float: left; width: calc((100% - 40px) / 3); margin: 0 20px 20px 0; position: relative; border-radius: 12px; overflow: hidden;}
	#gongy .part:nth-child(3n){ margin-right: 0; }
	#gongy .part img{ transition: all 0.25s; display: block; width: 100%; }
	#gongy .part:hover img{ opacity:0.3; }
	#gongy .part>div{ position: absolute; width: 90%; left: 5%; bottom: 5%; background: rgba(255,255,255,.95); padding: 10px; border-radius: 12px;}
	#gongy .part h4,#gongy .part p{ margin: 0; }
	#gongy .part h4{ font-family: "title","微软雅黑"; font-size: 24px; letter-spacing: -4px; font-weight: 100; padding-bottom: 6px;}
	#gongy .part p{ color: #666; font-size: 14px; line-height: 20px; height: 80px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; }
	#gongy .art{ background: #ccc; padding: 20px; }
	#gongy .art a{ display: block; padding: 5px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #111; text-decoration: none; }
	#gongy .art a:hover{ text-decoration: underline; color: #ef1a2c; text-decoration: underline; }
.plist li{ float: left; width: calc((100% - 30px) / 4); margin: 0 10px 10px 0; }
	.plist li:nth-child(4n){ margin-right: 0; }
	#pall li a,#abtPic li a,.plist li a{ display: block; color: #111; text-decoration: none; transition:color 0.5s;}
	#pall li div,#abtPic li div,.plist li div{ overflow: hidden; }
	#pall li a img,#abtPic li a img,.plist li a img{ transition:all 3s; }
	#pall li a:hover img,#abtPic li a:hover img,.plist li a:hover img{ transform: scale(1.2); }
	#pall li a:hover,#abtPic li a:hover,.plist li a:hover{ color: #00923b; text-decoration: underline; }
	.plist li h3{ letter-spacing: 0; }
#process{ padding-bottom: 60px; }
#process li{ float: left; width: calc(100% / 7); padding: 10px;  }
	#process li span{ display: block; width: 60px; height: 60px; margin: 0 auto 12px; background: url(../img/ico.png) no-repeat; opacity:0.6; transition: all 0.25s;}
	#process li .b{ background-position: -62px 0; }
	#process li .c{ background-position: -123px 0; }
	#process li .d{ background-position: -185px 0; }
	#process li .e{ background-position: -247px 0; }
	#process li .f{ background-position: -308px 0; }
	#process li .g{ background-position: -370px 0; }
	#process li b{ display: block; text-align: center; font-size: 24px; font-weight: 100; padding-bottom: 6px; }
	#process li i{ display: block; text-align: center; font-style: normal; white-space: nowrap; font-size: 14px; color: #666; margin-bottom: 60px;}
	#process li:hover span{ opacity:1; }
	#process li:hover b{ color: #ef1a2c; }
	#process li:hover i{ color: #111; }
	#process .btm{ text-align: center; }
#article{ margin-bottom: 0; }
#article .fr{ width: 360px; }
	#article .faq{ height: 400px; overflow: hidden; }
	#article .faq dt a{ color: #ef1a2c; text-decoration: none; font-size: 18px; }
	#article .faq dd{  margin:6px 0; padding: 0; font-size: 14px; line-height: 20px;text-indent: 2em; overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;display: -webkit-box; -webkit-line-clamp: 3;}
	#article .faq dd p{ line-height: 20px; height: 60px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;}
#article .fl{ width: calc(100% - 400px); }
	#article h2{ font-size: 30px; font-weight: normal; }
	#article .fst img{ float:left; width: 38%; }
	#article .fst div{ margin-left: calc(38% + 20px); }
	#article .fst h4 a{ color: #ef1a2c; font-size: 18px; text-decoration: none; }
	#article .fst p{ font-size: 14px; line-height: 1.6em; text-indent: 2em; color: #666; }
	#article .fst time{ font-size: 14px; color: #333; }
	#article .fl li{ float: left; width: 50%;  padding: 0 5px;}
	#article .fl li a{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; text-decoration: none; height: 40px; line-height: 40px; border-bottom: 1px dashed #ccc; }
	#article .fl li a:before{ content: ">"; display: inline-block; font-family: "宋体"; padding-right: 10px; font-weight: bold; color: #999; }
	#article .fl li a:hover{ color: #ef1a2c; }
	#article .fl li a:hover:before{ color: #ef1a2c; }
#yous{ padding-bottom: 30px; }
	#yous li{  }
	#yous li img{ float: left; width: 37%; border-radius: 12px; }
	#yous li div{ margin-left: 40%;}
	#yous li h4{ font-size: 36px; font-weight: 100; color: #ef1a2c; }
	#yous li p{ line-height: 1.6em; }
	#yous li:nth-child(2n) img{ float: right; }
	#yous li:nth-child(2n) div{ margin-left: 0; margin-right: 40%; }
/*类目*/
#intro{ margin: 60px auto; }
#intro .fr{ width: calc(100% - 430px); }
#intro h1{ margin-top: 0; }
#intro p{ margin: 1em 0; line-height: 1.6em; }
#intro p>strong{ display: block; color: #ef1a2c; margin-bottom: 10px;}
#intro p a{ color: #ef1a2c; }
#intro p a:hover{ text-decoration: none; }
#intro article{ padding: 20px 0; display: none; }
#intro p .tel{ display: inline-block;background: #111; color: #f2b01b; text-decoration: none; padding: 4px 8px; border-radius: 4px; transition:all 0.5s;}
#intro p .tel:hover{  background: #ef1a2c; color: #fff; }
#pages{ text-align: center; padding-bottom: 30px; }
	#pages a{ display: inline-block; padding: 4px 8px; background: #ccc; text-decoration: none; color: #111; margin: 0 2px; border-radius: 3px; }
	#pages a:hover{ color: #ef1a2c; }
	#pages a.on{ background: #ef1a2c; color: #fff; }
#tags{ padding: 10px; font-size: 14px; color: #999; }
	#tags dt,#tags dd{ display: inline-block;}
	#tags a{ display: block; padding:4px 6px; margin: 0 1px 1px 0; border-radius: 2px; color: #111; text-decoration: none; border:1px solid #ddd;}
	#tags a:hover{ color: #ef1a2c; border-color: #ef1a2c;}
	#tags a.on{ background: #ef1a2c; color: #fff; border-color: #ef1a2c;}
#pall{ padding: 10px; }
#pall h1{ margin: 20px 0; }
#pall li{ width: calc((100% - 50px) / 6); float: left; margin: 0 10px 10px 0; }
/*详情*/
p.desc{ max-width: 700px; line-height: 2em !important; margin: auto;}
#main>.fr{ width:30%; padding-left: 20px; }
#main>.fl{ width: 70%; padding-right: 30px; }
article img{ margin:1em auto; padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,.3); }
article p{ margin: 1em 0; text-indent: 2em; line-height: 1.6em; }
#pn{ color: #999; }
#pn a{ color: #ef1a2c; text-decoration: none;}
#pn a:hover{ text-decoration: underline; }
header span.fr{ display: none; cursor: pointer; margin-top: 20px;}
	header span.fr span{ display: block; height: 4px; background: #fff; width: 30px; margin: 2px 0;}
	header span.fr span:nth-child(2n){ width: 20px; margin: 5px 0;}
	header span.fr span:last-child{ width: 26px; }
#btm{ height: 50px; position: fixed; left: 0; width: 100%; bottom: 0; z-index: 9; background: #111; display: none;}
#btm a{ display: block; width: 30%; text-align: center; float: left; height: 50px; line-height: 50px; color:#ccc; text-decoration: none;}
#btm .tel{ width: 70%; background: #ef1a2c;}
@media screen and (max-width: 1600px){
	.wrap{ width:98%; }
}
@media screen and (max-width: 800px){
	#intro .fl{ width:40%; }
	#intro .fr{ width:60%; padding-left: 10px; }
	header .logo div strong{ font-size: 24px; }
	header .logo div{ font-size: 12px; margin-left: 6px; padding-left: 10px; }
	#contact .box{ width:100%; left: 0; margin-left: 0; }
	#kf{ display: none; }
	.banner strong{ font-size: 48px; }
	header span.fr{ display: block; }
	nav{ position: fixed; width: 100%; height: 100%; z-index: 9999; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,.95); display: none; }
	nav li{ display: block; position: static; float: none; }
	nav li>div{ position: static; display: block; background: rgba(255,255,255,.7); }
	#main>.fl,#about .fl,#about .fr{ width: 100%; float: none; padding: 0;}
	#about video{ max-width: 100%; }
	#character .part{ width: calc((100% - 15px) / 4); margin-right: 5px; }
	#character .part:nth-child(4n){ margin-right: 0; }
	#character .part h3{ margin: 5px 0; white-space: nowrap; overflow: hidden; }
	#gongy .part{ width: calc((100% - 10px) / 2);margin-right: 10px; }
	#gongy .part:nth-child(3n){ margin-right: 10px; }
	#gongy .part:nth-child(2n){ margin-right: 0; }
	.plist li p,#gongy .part p{ display: none; }
	#process li{ width: calc(100% / 3); overflow: hidden; }
	#process li i{white-space: normal;}
	.links{ display: none; }
	body{ padding-bottom: 50px; }
	#btm{ display: block; }
}
@media screen and (max-width: 640px){
	#yous li h4{ font-size: 30px; }
	.bpart .part{ width:calc((100% - 10px) / 2); }
	.bpart .part:nth-child(2n){ margin-right: 0; }
	#intro .fl{ display: none; }
	#intro .fr{ width:100%; padding: 0; }
	#kf{ top: auto; bottom: 0; }
	header .logo img,header .logo div{ float: none; }
	header .logo div{ margin-left: 0; padding-left: 0; border:0;}
	.tit>div>h2,#about h1{ margin: 0; padding: 0; border:0; display: block; }
	#article .fst img,#solution .swiper-slide>div p{ display: none; }
	#article .fst div{ margin-left: 0; }
	#solution .swiper-slide>div h3{top:0;}
	#solution .swiper-slide>div h3 a{ border:0;}
	#article .fr,#article .fl,#yous li img{ float:none; width: 100%; }
	#yous li div:nth-child(2n),#yous li div{ margin: 0; }
	footer{ display: none; }
	#article .fl{ padding-top: 10px; }
	.search li h3{ margin: 5px 0; }
	.search li h3 a{ font-size: 12px; }
}
@media screen and (max-width: 480px){
	#article .fl li{ width: 100%; }
}