a{ color: #333; transition: all 0.3s;}
a:hover{ color: #ff7800; }
body{  color: #333; }

nav{ padding: 20px 0;}
nav img.fl{ max-width: 200px; max-height: 40px; }
nav .fr{ width: calc(100% - 220px); }
nav li>a{ padding-right: 20px; height: 40px; line-height: 40px; font-size: 14px; font-weight: bold;}
nav li:hover>a{ text-decoration: none; }
nav li>a:after{ content: ""; display: inline-block; height: 14px; width: 1px; background-color: #ddd; margin-left: 20px; }
nav ul{ float: right; }
nav #search,nav #tel{ position: relative; float: right; width: 40px; height: 40px; z-index: 2;}
nav #search span,nav #tel span{ display: block; width: 40px; height: 40px; }
nav #search span{ background: url(search.png); }
	nav #search>div,nav #tel>div{ position: absolute; padding-top: 20px;right: 0; display: none;}
	nav #search .search,nav #tel>div>div{ background-color: #ff7800; width: 400px; padding: 10px;}
nav #tel{ margin-left: 20px; }
nav #tel span{ background:url(tel.png); }
nav #tel>div>div{ font-size: 14px; color: #333; padding: 20px; width: 240px; }
nav #tel>div b{ font-size: 24px; color: #e00; display: block; }
nav #search:hover>div,nav #tel:hover>div{ display: block; }
nav li>div{ padding-top: 20px; left: -20px;  }
nav li>div>div{ background-color: #ff7800; padding-bottom: 20px;}
nav li div a{ display: block; padding: 16px 20px 0; color: #333; font-size: 14px;}
nav li div a:hover{ font-weight: bold; color: #111; text-decoration: none; }
nav.fixed{ position: fixed; width: 100%; background-color: rgba(255,255,255,.85); left: 0; top: 0; z-index: 9; box-shadow: 0 0 10px rgba(0,0,0,.3);}
.swiper-button-next, .swiper-button-prev{ display: none; }
#banner .swiper-pagination-bullets .swiper-pagination-bullet{ width: 60px; height: 4px; border-radius: 0; background-color: rgba(255,255,255,1); }
.bpart{ padding: 60px 0;}
.bpart .title{ text-align: center;  margin-bottom: 30px;}
.bpart .title h2{font-size: 24px; margin-top: 10px;  padding-bottom: }
.bpart .title h2:before{ content: ""; display: block; width: 60px; height: 5px; margin:10px auto; background: #ff7800; }
.bpart .title span{ font-weight: bold; color: #ccc; text-transform: uppercase; font-size: 36px;}
#yous li{ float: left; width: 25%; padding: 30px; text-align: center; }
#yous li span{ display: inline-block; width: 150px; height: 150px; background-color: #fff; border-radius:50%; box-shadow: 0 0 10px rgba(255,160,0,.2); background-position: center; background-repeat: no-repeat; transition: all 0.5s; }
#yous li .a{ background-image: url(i1.png); }
#yous li .b{ background-image: url(i2.png); }
#yous li .c{ background-image: url(i3.png); }
#yous li .d{ background-image: url(i4.png); }
#yous li h5{ font-size: 18px; margin: 30px 0 10px;}
#yous li:hover span{ box-shadow: 0 0 30px rgba(255,160,0,.5); }
#pro{ background-color: #eee; }
#pro .cate{ text-align: center; padding-bottom: 30px; }
#pro .cate a{ display: inline-block; font-size: 18px; margin: 12px;}
#case li,#pro li{ width: calc((100% - 40px) / 3); float: left;  margin: 0 20px 20px 0; overflow: hidden; transition: all 0.5s; position: relative; padding-bottom: 60px; border-radius:12px;}
#case li:nth-child(3n),#pro li:nth-child(3n){ margin-right: 0; }
#case li>div,#pro li>div{ background-color: #fff; position: absolute; width: 100%; height: 60px;  bottom: 0; transition: all 0.5s;}
#case li h3,#pro li h3{ padding:0 20px; height: 60px; line-height: 60px; font-size: 14px; text-align: center;}
#case li p,#pro li p{ margin-top: 0; text-indent: 0; font-size: 12px; color: #666; padding: 0 20px; -webkit-line-clamp:3; }
#case li:hover>div,#pro li:hover>div{ height: 140px; }
#about .bg{ background-size: cover; background-attachment: fixed; height: 300px; }
	#about .bg div.edit,#about .bg h5{ width: 40%; text-align:right; margin-left: 60%; }
	#about .bg div.edit{ padding-top: 50px; font-size: 30px; font-weight: bold; color: rgba(255,255,255,.5); text-transform: uppercase;}
	#about .bg h5{ color: #fff; font-size: 36px; padding-top: 10px; }
#about .bg2{ background: url(bg2.jpeg) center top no-repeat; background-size: cover; padding: 40px 0 60px; }
#about .fl{ width: 60%; padding-right: 80px; }
	#about .fl img{ box-shadow: 30px 30px 0 rgba(0,0,0,.2); }
#about .fr{ width: 40%; }
#about .title span{ color: rgba(255,255,255,.5); }
#about .title h2{ color: #fff; }
#about .title h2:before{ background-color: #fff; }
#about .bg2 .lines{ color: #111; -webkit-line-clamp:6; line-height: 1.6em; }
#news div.fl{ width: 480px; background: #ff7800; transition: all 0.5s; }
#news ul.fr{ width: calc(100% - 500px); }
#news div.fl .pic{ height: 360px; overflow: hidden;}
#news div.fl img{ transition: all 0.5s; }
#news div.fl .info{ padding: 20px; }
#news div.fl time{ color: #fff; text-align: center; font-size: 12px;}
#news div.fl time b{ display: block; font-size: 24px; }
#news div.fl .info .fr{ width: calc(100% - 60px); }
#news div.fl .info h3{ color: #fff; font-weight: normal; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.5); margin-bottom: 10px; }
#news div.fl .info p{ text-indent: 0; font-size: 14px; color: #fff;}
#news div.fl a:hover{ text-decoration: none; }
#news div.fl:hover{ background-color: #333;}
#news div.fl:hover img{ transform: scale(1.1); }
#news li{ padding: 20px; border-bottom: 1px solid #ddd; transition: all 0.5s;}
#news li:hover{ background:#eee; }
#news li img{ width: 160px; }
#news li .fr{ width: calc(100% - 180px); }
#news li h3{ font-weight: normal;}
#news li time{  color: #999; font-size: 12px; }
#news li p{ font-size: 14px; color: #999; margin: 6px 0; transition: all 0.5s;}
#news li:hover p{ color: #333; }
#btm{ background-color: #ff7800; color: #fff; padding-top:20px; font-size: 14px; text-align: center;}
#btm a{ padding: 2px 4px; color: #fff; }
#btm a:hover{ color: #111; }
#btm #link{ text-align: center; background-color: #111; padding: 10px; margin-top: 10px; }
#btm #link a{ color: #ccc; }
@media screen and (max-width: 1000px){
	nav li>a:after{ display: none; }
	nav li > div{ padding: 0; }
	nav li div a{ padding-left: 0; }
	nav #tel{ display: none; }
	nav #search{ position: static; width: 0; height: 0; }
	nav #search span{ display: none; }
	nav #search>div{ display: block; width: calc(66% - 20px); background-color: #ff7800; right: 0; bottom: 20px;}
	#about .bg div.edit, #about .bg h5{ margin-left: 50%; width: 50%; }
	#btm{ display: none; }
}
@media screen and (max-width: 800px){
	.bpart .title span{ font-size: 30px; }
	#yous li{ width: 50%; }
	#case li, #pro li{ width: calc(50% - 5px); margin: 0 10px 10px 0; }
	#case li:nth-child(3n), #pro li:nth-child(3n){ margin-right: 10px; }
	#case li:nth-child(2n), #pro li:nth-child(2n){ margin-right: 0; }
	#case li h3, #pro li h3,#case li p, #pro li p{ padding: 0 10px; }
	#about .bg{ height: 200px; }
	#about .bg div.edit, #about .bg h5{ width: 100%; margin-left: 0; font-size: 20px; }
	#about .bg2{ padding-top: 4px; }
	#news div.fl,#news ul.fr,#about .fl,#about .fr{ float: none; width: 100%; padding: 0; }
	#about .fl img{ box-shadow: none; margin-bottom: 20px; }
	#about{ padding: 0; }
	#news div.fl .pic{ height: auto; }
	#news li{ padding: 10px 0; }
	#news li img{ width: 100px; }
	#news li .fr{ width: calc(100% - 110px); }
	nav #search .search form div,#news li p{ display: none; }
	nav #search>div{ width: 100%; bottom: 60px; padding-top: 0; }
}