a{ color: #333; transition: all 0.3s;}
a:hover{ color: #37f; }
body{  color: #666; }
.i{ display: block; background: url(icon.png) no-repeat; }
#top{ position: relative; z-index: 1;}
	#top .top{ position: absolute; left: 0; top: 0; width: 100%; padding: 10px; z-index: 2;}
		#top .top .fr a{ display: block; color: #d00f16; font-size: 24px; font-weight: bold; }
		#top .top .fr a:hover{ text-decoration: none; }
	#top #search{ position: absolute; width: 100%; left: 0; bottom: 30px; z-index: 2; }
	#top #search .search{ background: rgba(255,255,255,.5); padding: 10px; border-radius: 6px; }
nav{ background:#d00f16;}
	nav .fr{ float: none; }
	nav li>a{ padding:0 20px; height: 58px; line-height: 58px; color: #fff; font-weight: bold;}
	nav li:hover>a{ background-color: #111; color: #fff; text-decoration: none;}
	nav li>div{ padding-top: 0;  }
	nav li>div>div{ background-color: #d00f16;}
	nav li div a{ display: block; padding: 10px 20px; color: #fff; font-size: 14px;}
	nav li div a:hover{background: #111; color: #fff; text-decoration: none; }
.bpart{ padding: 60px 0; }
.title{ text-align: center; color: #333; }
	.title h2{ font-size: 48px; }
	.title div{ margin: 1em 0; }
#pro .cate{ text-align: center; margin-bottom: 2em; }
	#pro .cate a{display: inline-block; background: #111; color: #fc0; padding: 6px 10px; border-radius: 6px; margin: 0 2px 2px 0; transition: all 0.5s;}
	#pro .cate a:hover{ background: #fc0; color: #111; text-decoration: none;}
#pro li{ width: calc((100% - 30px) / 4); float: left; margin: 0 10px 10px 0; }
	#pro li:nth-child(4n){ margin-right: 0; }
	#pro li h3 a{ font-weight: normal; padding: 1em 0; font-size: 16px; }
	#pro li img{ transition: all 0.5s; }
	#pro li:hover img{ transform: scale(1.05); }
#about,#why,#process{ background: #111; color: #ccc;}
	#about .fr{ width:400px; }
	#about .fl{ width:calc(100% - 460px); padding-top: 50px; }
	#about h2{ font-size: 100px; }
	#about h2 span{color: #fc0; }
	#about .fr p{ background: #fc0; color: #111; text-align: center; font-size: 24px; margin-top: 0; padding: 10px 0; }
	#about .fl ul{ margin-top: 1em; }
	#about .fl li{ display: inline-block; width:45%; height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; font-size: 12px; color: #999; list-style-position: inside; list-style-type: circle;}
#intro .wrap>div{ width: 80%; margin:30px auto; text-align: center; }
#intro ul{}
	#intro li{ width:50%; float: left; padding: 10px 20px; list-style-position: inside; text-align:right;}
	#intro li:nth-child(2n){ text-align: left; }
	#intro li strong{ font-size: 20px;}
	#intro li p{ margin-top: 0.5em; text-indent: 0; }
#why h2,#process h2{ color: #fc0; }
#why .title div,#process .title div{ color: #ccc; margin-bottom: 2em; }
	#why .part{ width:calc((100% - 60px) / 4); float: left; margin: 0 20px 0 0; transition: all 0.5s;}
	#why .part:nth-child(4n){ margin-right: 0; }
	#why .part img{ border-radius: 12px; opacity: 0.7; transition: all 0.5s; }
	#why .part:hover img{ opacity: 1; }
	#why .part h5{ font-size: 18px; margin-top: 1em; }
	#why .part p{ color: #999; text-indent: 0; -webkit-line-clamp:4; }
	#why .part:hover{ color: #fff; }
#case li{ float: left; width: calc((100% - 40px) / 3); margin: 0 20px 20px 0; }
	#case li:nth-child(3n){ margin-right: 0; }
	#case li .pic{ background: #000; }
	#case li h3 a{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; font-size: 16px; padding: 10px; }
	#case li div{ padding: 0 10px 10px; font-size: 12px; }
	#case li .pic img{ transition: all 0.5s; }
	#case li:hover .pic img{ opacity: 0.7; }
#process{ text-align: center; margin-bottom: 0;}
	#process .i{ width: 88px; height: 80px; margin-bottom: 10px; transition: all 0.5s;}
	#process .a{ background-position: -134px -291px; }
	#process .b{ background-position: -267px -291px; }
	#process .c{ background-position: 0 -291px; }
	#process .d{ background-position: 0 -118px; }
	#process .e{ background-position: -134px -118px; }
	#process .f{ background-position: -267px -118px; }
	#process .g{ background-position: -401px -118px; }
	#process .h{ background-position: -401px -291px; }
	#process li{ display: inline-block; margin: 0 10px 10px; list-style-type: none; }
	#process li:hover{ color: #fc0; }
	#process .a:hover{ background-position: -134px -372px; }
	#process .b:hover{ background-position: -267px -372px; }
	#process .c:hover{ background-position: 0 -372px; }
	#process .d:hover{ background-position: 0 -199px; }
	#process .e:hover{ background-position: -134px -199px; }
	#process .f:hover{ background-position: -267px -199px; }
	#process .g:hover{ background-position: -401px -199px; }
	#process .h:hover{ background-position: -401px -372px; }
#arts li{ width:calc(50% - 15px); float: left; margin: 0 30px 30px 0; list-style-type: none;}
	#arts li:nth-child(2n){ margin-right: 0; }
	#arts li .fl{ width:30%; }
	#arts li .fr{ width:calc(70% - 10px); }
	#arts li img{ opacity: 0.7; border-radius: 6px; transition: all 0.5s;}
	#arts li h3 a{ font-weight: normal; color: #111; font-size: 16px; transition: all 0.5s;}
	#arts li p{ text-indent: 0; font-size: 14px;}
	#arts li time{ color: #999; font-size: 12px; }
	#arts li:hover img{ opacity: 1; }
	#arts li:hover h3 a{ color: #37f; }
	#arts li:hover p{ color: #111; }
	#arts li h3 a:hover{ text-decoration: underline; }
#btm{ background: #111; text-align: center; color: #ccc; padding: 10px 0; font-size: 12px;}
	#btm a{ color: #999; }
@media screen and (max-width: 1000px){
	#btm,#top .fr{ display: none; }
}
@media screen and (max-width: 800px){
	#top .top img{ height: 40px; }
	#top #search{ position: static; }
	#top #search .search div{ display: none; }
	#banner .swiper-pagination-bullets .swiper-pagination-bullet,.swiper-button-next, .swiper-button-prev{ display: none; }
	.bpart{ padding: 30px 0; }
	.title h2{ font-size: 36px; }
	#pro li{ width: calc(50% - 6px); margin: 0 12px 12px 0; }
	#pro li:nth-child(2n){ margin-right: 0; }
	#arts li,#case li,#why .part,#intro li,#about .fl li,#about .fr,#about .fl{ width: 100%; float: none; }
	#about h2{ font-size: 36px; text-align: center; margin-bottom: 10px; }
	#about .fl{ margin-top: 1em; padding-top: 0; }
	#about .fl li{ list-style-type: disc; list-style-position: inside; display: list-item;  }
	#intro li{ text-align: left; }
	#arts li h3 a{ white-space: normal; overflow: visible; }
	#arts li p{ display: none; }
}