body {background-color:#fafafa;}
.navbar ul .selected {margin-left:346px;}

/* 信息 S */
.container{border-radius: 10px;}
.information {
	padding-top:72px;
	width:100%;
	height:470px;
	min-width:1200px;
	max-width:1920px;
	margin:0 auto;
	background-image: url("../images/backdrop2.jpg");
	background-repeat:no-repeat;
	background-position: center;
}
.information ul {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-between;
	margin-top:70px;
	padding:0 70px;
   display: none;
}
.information ul li {
	display:inline-block;
	color:#fff;
	text-align:center;
}
.information ul li span {
	font-family:"impact";
	font-size:86px;
	font-weight:normal;
}
.information ul li p {font-size:16px;font-weight:bold;}
/* 信息 E */
/* 类别 S */
.content {
	position:relative;
	top:-37px;
}
.content ul.sort {
	position:relative;
	width:100%;height:240px;
	display:flex;
	display:-webkit-flex;
	flex-flow:row wrap;
	justify-content:space-around;
	padding-top:50px;
	background-color:#fff;
}
.content ul.sort .img {
	position:relative;
	width:294px;height:60px;
	text-align:center;
	cursor:pointer;
}
.content ul.sort .img::before {
	position:absolute;
	content:"";
	width:90px;height:90px;
	background:white;
	opacity:0;
	transition:.5s;
}
.content ul.sort .img:hover::before {opacity:.1;}
.content ul.sort .img:nth-child(1):hover {color:#a93efc;}
.content ul.sort .img:nth-child(2):hover {color:#f487f1;}
.content ul.sort .img:nth-child(3):hover {color:#ea9334;}
.content ul.sort .img:nth-child(4):hover {color:#66d054;}
.content ul.sort .img::after {
	position:absolute;
	content:"";
	width:90px;height:90px;
	border-radius:50%;
	top:0;left:50%;
	margin-left:-45px;
	opacity:0;
}
.content ul.sort .img:hover::after {opacity:.2;}
.content ul.sort .img:nth-child(1):hover::after {animation:ulsort_a 3s linear;}
.content ul.sort .img:nth-child(2):hover::after {animation:ulsort_b 3s linear;}
.content ul.sort .img:nth-child(3):hover::after {animation:ulsort_c 3s linear;}
.content ul.sort .img:nth-child(4):hover::after {animation:ulsort_d 3s linear;}
@keyframes ulsort_a {
	0% {box-shadow:0 0 0 0px rgba(255, 255, 255, 1), 0 0 0 0px rgba(169, 62, 252, 1);}
	30% {box-shadow:0 0 0 0px rgba(169, 62, 252, 1), 0 0 0 60px rgba(255, 255, 255, 0);}
}
@keyframes ulsort_b {
	0% {box-shadow:0 0 0 0px rgba(255, 255, 255, 1), 0 0 0 0px rgba(244, 135,241, 1);}
	30% {box-shadow:0 0 0 0px rgba(244,135, 241, 1), 0 0 0 60px rgba(255, 255, 255, 0);}
}
@keyframes ulsort_c {
	0% {box-shadow:0 0 0 0px rgba(255, 255, 255, 1), 0 0 0 0px rgba(234, 147, 52, 1);}
	30% {box-shadow:0 0 0 0px rgba(234, 147, 52, 1), 0 0 0 60px rgba(255, 255, 255, 0);}
}
@keyframes ulsort_d {
	0% {box-shadow:0 0 0 0px rgba(255, 255, 255, 1), 0 0 0 0px rgba(102, 162, 237, 1);}
	30% {box-shadow:0 0 0 0px rgba(102, 162,237, 1), 0 0 0 60px rgba(255, 255, 255, 0);}
}
@keyframes ulsort_e {
	0% {box-shadow:0 0 0 0px rgba(255, 255, 255, 1), 0 0 0 0px rgba(74, 221, 127, 1);}
	30% {box-shadow:0 0 0 0px rgba(74, 221, 127, 1), 0 0 0 60px rgba(255, 255, 255, 0);}
}
.content ul.sort li {
	position:relative;
	display:inline-block;
	text-align:center;
	width:294px;
	cursor:pointer;
	color:#555;
	transition:.5s;
}
.content ul.sort li a {color:#555;}
.content ul.sort li.active a {color:#272828;}
.content ul.sort p {
	width:150px;height:50px;
	margin:0 auto;
	margin-top:22px;
	font-size:16px;
	overflow:hidden;
	transition:.3s;
}
.content ul.sort li.active p {font-size:18px;}
.content ul.sort span {
	position:absolute;
	display:inline-block;
	width:1px;height:50px;
	background-color:#f3f3f3;
	top:20px;right:0;
}
.content ul.sort i {
	position:absolute;
	top:239px;left:0;
	width:100%;height:1px;
	background-color:#272828;
}
.content ul.sort img.selected {
	position:absolute;
	top:230px;left:0;
	width:11px;height:11px;
	transition:.5s;
}

.content ul.type {
	position:relative;
	top:-36px;left:20px;
	display:none;
}
.content ul.type li {
	display:inline-block;
	margin-right:70px;
	color:#555;
	transition:.3s;
	cursor:pointer;
}
.content ul.type li:hover, .content ul.type li.active {color:#f58530;}

.content ul.case {
	display:none;
	position:relative;
	top:-20px;
	flex-flow:row wrap;
	justify-content:flex-start;
	width:100%;
	padding-top:12px;
	padding-bottom:42px;
	text-align:center;
	background-color:#fff;
}
.content ul.case.active {display:flex;display:-webkit-flex;}
.content ul.case li {
	width:340px;height:332px;
	text-align:center;
	margin:0 30px 50px;
	box-shadow:0 8px 16px -2px rgba(0,0,0,.07);
	overflow:hidden;
	transition:.7s;
	cursor:pointer;
   border-radius: 16px;
}
.content ul.case li:hover {box-shadow:0 16px 32px -4px rgba(0,0,0,.15);}
.content ul.case li img {
	width:340px;height:268px;
	margin-bottom:16px;
	transition:.7s;
}
.content ul.case li:hover img {transform:scale(1.05);}
.content ul.case li p {font-size:16px;}
.content ul.case:last-child li {
	position:relative;
	width:260px;height:460px;
	overflow:hidden;
	box-shadow:0 8px 16px -2px rgba(0,0,0,.07);
}
.content ul.case:last-child li img {width:260px;height:563px;}
.content ul.case:last-child li div {
	position:absolute;
	top:0;left:0;
	width:260px;height:460px;
	background-color:rgba(0, 0, 0, 0);
	transition:.5s;
}
.content ul.case:last-child li:hover div {background-color:rgba(0, 0, 0, .3);}
.content ul.case:last-child li div img {
	display:inline-block;
	width:200px;height:200px;
	margin-top:700px;
	transition:.5s;
}
.content ul.case:last-child li:hover div img {margin-top:150px;}

.content ul.case .listpage {
	width:100%;
	margin-top:18px;
}
.content ul.case .listpage li {
	display:inline-block;
	width:60px;height:28px;
	text-align:center;
	line-height:29px;
	color:#999;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:3px;
	margin:0 8px;
	transition:.5s;
	box-shadow:none;
	cursor:pointer;
}
.content ul.case .listpage li:hover, .content ul.case .listpage li.active {
	color:#fff;
	background-color:#f58530;
	border:1px solid #f58530;
}
.content ul.case .listpage li a {
	display:inline-block;
	width:100%;height:100%;
	color:#999;
	transition:.5s;
}
.content ul.case .listpage li:hover a {color:#fff;}
.content ul.case li.thisclass {
	color:#fff;
	background-color:#f58530;
	border:1px solid #f58530;
}
.content ul.case li.thisclass a {color:#fff;}
/* 类别 E */
/* 推荐 S */
.recommend {margin-top:-240px;}
.recommend ul {
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  height:225px;
  margin-bottom:40px;
  overflow:hidden;
}
.recommend ul li {
  position:relative;
  flex-shrink:0;
  float:left;
  display:inline-block;
  left:0;
  list-style:none;
  width:300px;height:225px;
  overflow:hidden;
}
.recommend ul li img {width:300px;height:225px;transition:.5s;}
.recommend ul li p {
  position:absolute;
  bottom:-40px;
  color:#fff;
  width:100%;height:34px;
  text-align:center;
  line-height:34px;
  background-color:rgba(0, 0, 0, .5);
}
.recommend ul li:hover img {transform:scale(1.1);z-index:10;}
.recommend ul li:hover p {bottom:0;}

.recommend div.btn {
	position:absolute;
	top:50%;
	margin-top:-30px;
	color:#aaa;
	width:30px;height:60px;
	text-align:center;
	line-height:60px;
	font-family:"宋体";
	transition:.5s;
	opacity:0;
	cursor:pointer;
}
.recommend div.btn:hover {color:#272828;}
.recommend div.prev {
	left:0;
	background-image:url("../imgs/service_btn_left.png");
}
.recommend div.next {
	right:0;
	background-image:url("../imgs/service_btn_right.png");
}
/* 推荐 E */