a{ color: #111;}
a:hover{ color: #096de1; }
body{ background: #f1f1f1; }
#top{ padding: 10px; height: 60px; line-height: 40px; background:#fff; border-bottom: 1px solid #ddd; overflow: hidden;}
#top img{ max-height: 40px; }
#top .fr{ padding-left: 40px; background: url(tel.jpg) left center no-repeat; font-size: 20px; }
nav li{ float: left; list-style-type: none; position: relative; z-index: 9999; }
nav li>a{ display: block; height: 50px; line-height: 50px; padding:0 10px; color: #111;  font-size: 16px;transition: all 0.3s; text-align: center;}
nav li>a:hover{background-image: linear-gradient( #469bfb, #096de1); color: #fff; text-decoration: none; }
nav li>div{ position: absolute; background: #fff; width: 100%; min-width:120px; padding: 12px;display: none;}
nav li:hover div{ display: block; }
nav li div a{ color: #111; transition: all 0.3s;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 0;}
nav li div a:hover{ color: #096de1;}
.swiper-button-next, .swiper-button-prev{ }
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{ width: 60px; height: 4px; border-radius: 0; background-color: rgba(255,255,255,1); }
#search{ background: #fff; border-bottom: 1px solid #ddd; }
.bpart{ margin: 60px 0; position: relative;}
.bpart .title{ text-align: center; }
.bpart .title span{ color: #076ce0; text-transform: uppercase; font-size: 20px; font-weight: bold; }
.bpart .title h2{ margin-bottom: 10px; font-size: 18px; font-weight: normal; padding: 10px 0; margin-bottom: 20px; background: url(titleBg.png) center no-repeat;}
.bpart p.desc{ margin-top: 0; color: #666; text-indent: 0;}

#pro li{ width: calc((100% - 60px) / 4); float: left; margin: 0 20px 20px 0; }
#pro li:nth-child(4n){ margin-right: 0; }
#pro li img{ display: block; }
#pro li h3 a{ display: block; overflow: hidden;text-overflow: ellipsis; white-space: nowrap; font-weight: normal; padding:15px 10px; }
#pro li:hover h3{ background: #333; }
#pro li:hover h3 a{ color: #fff; }
#pro .cate{ text-align: center; }
#pro .cate a{ display: inline-block; margin: 4px; background: #096de1; color: #fff; padding: 6px 10px; border-radius:2px; transition: all 0.5s;}
#pro .cate a:hover{ background: #111; text-decoration: none; }
#about,#news{ background-color: #fff; padding: 60px 0; }
#about .fl{ width: 450px; }
#about .fr{ width: calc(100% - 500px); }
#about h3{ font-size: 36px; font-weight: normal; color: #333; margin: 20px 0;}
#about .fr div{ color: #333; font-style: italic; line-height: 1.5em;overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 5; margin-bottom: 20px;}
#about .fr span{ display: inline-block; width: 90px; height: 90px; border-radius:50%; margin-right: 30px; padding-top: 50px; text-align: center; font-style: normal;  color: #fff; background: url(icon_01.png) center 10px no-repeat #4a90e2; font-size: 14px;}
#about span.b{ background-image: url(icon_02.png); }
#about span.c{ background-image: url(icon_03.png); }
#about span.d{ background-image: url(icon_04.png); }
#about .fr span:hover{ background-color: #f5a623; }
#case li{ width: calc((100% - 60px) / 4); float: left; margin: 0 20px 20px 0; }
#case li:nth-child(4n){ margin-right: 0; }
#news div.fl{ width: 480px; background: #f1f1f1; }
#news ul.fr{ width: calc(100% - 500px); }
#news div.fl .pic{ height: 360px; overflow: hidden; background: #111; }
#news div.fl .info{ padding: 20px; }
#news div.fl .info h3{ color: #111; font-weight: normal; }
#news div.fl .info p{overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; font-size: 14px; color: #666;}
#news div.fl a:hover{ text-decoration: none; }
#news div.fl a:hover .info{ background-color: #333;}
#news div.fl a:hover *{ color: #fff;}
#news li{ padding: 20px; background: #f1f1f1; border-bottom: 1px solid #ddd; }
#news li:hover{ background:#fff; }
#news li h3{ float: left; font-weight: normal;}
#news li time{ float: right; color: #999; font-size: 14px; }
#news li p{ font-size: 14px; color: #999; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2;margin-bottom: 0; transition: all 0.5s;}
#news li:hover p{ color: #666; }
#case a{ display: block; position: relative; overflow: hidden;}
#case img{ display: block; }
#case a>div{ position: absolute; left: 0; top: 100%; width: 100%; height: 100%; overflow: hidden; padding: 20px; background: rgba(0,0,0,.8); color: #fff; transition: all 0.5s;}
#case a:hover>div{ top: 0; }
#case a h3{ font-size: 16px; }
#case a time{ display: block; color: #ccc; padding: 10px 0; font-size: 12px; }
#case a span{ display: block; text-align: right; color: #357bd8; }
#btm{ background: #333; color: #fff; padding-top: 10px; text-align: center; font-size: 14px;}
#btm a{ color: #ccc; }
#link{ padding: 10px; background: #111; margin-top: 20px; }
#link a{ color: #999; display: inline-block; padding: 4px; margin: 2px;}
#link a:hover{ color: #ccc; }
.real{ position: relative; }
.uploads{ position: absolute; left: 20px; bottom: 20px; background: #c00; color: #fff; border:0; color: #fff; font-size: 16px; padding: 10px; }
@media screen and (max-width: 1000px){
	#top .fr{ display: none; }
	#about .fr span{ margin-right: 2px; }
}
@media screen and (max-width: 800px){
	#case li,#pro li{ width: calc(50% - 5px); margin: 0 10px 10px 0; }
	#case li:nth-child(2n),#pro li:nth-child(2n){ margin-right: 0; }
	#news div.fl,#news ul.fr,#about .fl,#about .fr{ width: 100%; float: none; }
}