
		/* 本例子css */
		.slideBox{ width:100%;margin: 0 auto; overflow:hidden; position:relative;  }

		.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }

		.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }

		.slideBox .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }

		.slideBox .hd ul li.on{ background:#f00; color:#fff; }
		.slideBox .bd{ position:relative; height:100%;width: 100%; z-index:0;   }
		.slideBox .bd li{ zoom:1; vertical-align:middle; }
		.slideBox .bd img{ width:100%;  display:block;  }

		/* 下面是前/后按钮代码，如果不需要删除即可 */
		.slideBox .prev,
		.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; 

	background:url(../img/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }

.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
		.slideBox .prev:hover,
		.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
		.slideBox .prevStop{ display:none;  }
		.slideBox .nextStop{ display:none;  }













		/* 本例子css */
		.slideGroup{ width:1200px;  text-align:left;  }
		.slideGroup .parHd{width:1200px; height:217px; overflow: hidden;  position:relative;  }
		.slideGroup .parHd ul{ float:left; position:absolute; left:0px; top:0px; width:1200px; height:217px;}
		.slideGroup .parHd ul li{ width: 282px;height: 165px;margin-right: 18px; float:left;  cursor:pointer; border:2px solid #d7d7d7; background-color: #f6f6f6; }
		.slideGroup .parHd ul li:last-child{margin-right: 0px;}
		.slideGroup .parHd ul li .div_a{
			width: 200px;
			overflow: hidden;
			float: left;
		}
		.slideGroup .parHd ul li .div_a .p_a{
			font-size: 20px;
			overflow: hidden;
			color: #110e0e;
			font-weight: bold;
          	padding-bottom: 4px;
			margin-left: 21px;
			margin-top: 40px;
		}
		.slideGroup .parHd ul li .div_a .p_b{
			color: #110e0e;
			margin-left: 21px;
			margin-top: 5px;
			overflow: hidden;
		}
		.slideGroup .parHd ul li .div_a .p_c{
			width: 92px;
			overflow: hidden;
			background-color: #fea600;
			border-radius: 3px;
			text-align: center;
			line-height: 27px;
			color: #fff;
			margin-left: 21px;
			margin-top: 15px;
		}
		.slideGroup .parHd ul li .div_b{
			width: 82px;
			height: 60px;
			overflow: hidden;
			float: left;
			margin-top: 50px;
			background: url(../img/ys1.png) 0px  0px no-repeat;
		}
		.slideGroup .parHd ul li .div_c{
			background: url(../img/ys2.png) 0px  0px no-repeat;
		}
		.slideGroup .parHd ul li .div_d{
			background: url(../img/ys3.png) 0px  0px no-repeat;
		}
		.slideGroup .parHd ul li .div_e{
			background: url(../img/ys4.png) 0px  0px no-repeat;
		}
		.slideGroup .parHd ul li.on{ 
			background-color: #fea600;
			border:2px solid #fea600; 
		}
		.slideGroup .parHd ul li.on .div_a .p_a{
			color: #fff;
		}
		.slideGroup .parHd ul li.on .div_a .p_b{
			color: #fff;
		}
		.slideGroup .parHd ul li.on .div_a .p_c{
			background-color: #fff;
			color: #fea600;
		}
		.slideGroup .parHd ul li.on .div_b{
			background: url(../img/ys11.png) 0px  0px no-repeat;
		}
		.slideGroup .parHd ul li.on .div_c{
			background: url(../img/ys21.png) 0px  0px no-repeat;
		}
		.slideGroup .parHd ul li.on .div_d{
			background: url(../img/ys31.png) 0px  0px no-repeat;
		}
		.slideGroup .parHd ul li.on .div_e{
			background: url(../img/ys41.png) 0px  0px no-repeat;
		}










		.picMarquee-left{ width:1300px;  overflow:hidden; position:relative;  }
		.picMarquee-left .hd{width:1300px; overflow:hidden;  height:121px; position: absolute;}
		.picMarquee-left .hd .prev,.picMarquee-left .hd .next{ display:block;  width:27px; height:37px; float:right; margin-right:5px; margin-top:55px;  overflow:hidden;
			 cursor:pointer; background:url("../img/right.png") no-repeat; z-index: 9;}
		.picMarquee-left .hd .next{ background-position:0 -50px; background:url("../img/left.png") no-repeat;float: left; }
		.picMarquee-left .hd .prevStop{ background-position:-60px 0; }
		.picMarquee-left .hd .nextStop{ background-position:-60px -50px; }
		.picMarquee-left .bd{ margin:0px 40px;   }
		.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }
		.picMarquee-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
		.picMarquee-left .bd ul li .pic{ width: 286px; height: 121px; border: 1px solid #c9c9c9; text-align:center; }
		.picMarquee-left .bd ul li .pic img{ width: 286px; height: 121px; display:block;}
		.picMarquee-left .bd ul li .pic a:hover img{  }




		.picMarquee-top{  width:259px; overflow:hidden;  }
		
		.picMarquee-top .bd{ padding:0px;   }
		.picMarquee-top .bd ul{ overflow:hidden; }
		.picMarquee-top .bd ul li{ width: 259px; text-align:center; overflow: hidden;}
		.picMarquee-top .bd ul li .pic{width:259px; text-align:center;  overflow: hidden; margin-bottom: 10px;}
		.picMarquee-top .bd ul li .pic img{ width:259px; height:203.5px; display:block; }
		.picMarquee-top .bd ul li .pic a:hover img{ border-color:#999;  }
		.picMarquee-top .bd ul li .title{ line-height:24px;   }










		.multipleLine{ overflow:hidden; position:relative; width:1300px;  }
		.multipleLine .hd{width:1300px; overflow:hidden;  height:278px; position: absolute;}
		.multipleLine .hd .prev,.multipleLine .hd .next{ display:block;  width:27px; height:37px; float:left; margin-right:5px; margin-top:120px;  overflow:hidden;
			 cursor:pointer; background:url("../img/left.png") no-repeat; z-index: 9;}
		.multipleLine .hd .next{ background-position:0 -50px; background:url("../img/right.png") no-repeat;float: right; }
		.multipleLine .bd{ margin:0px 40px; }
		.multipleLine .bd ul{ overflow:hidden; zoom:1;   }
		.multipleLine .bd ul li{ margin:8px 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
		.multipleLine .bd ul li .pic{ width: 286px; height: 121px; border: 1px solid #c9c9c9; text-align:center; }
		.multipleLine .bd ul li .pic img{ width: 286px; height: 121px; display:block; }
		.multipleLine .bd ul li .pic a:hover img{ border-color:#999;  }
		.multipleLine .bd ul li .title{ line-height:24px;   }












		.grid {
	position: relative;
	clear: both;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;

}

.grid figure figcaption {

	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
	width: 297px;
	height: 239px;

	padding: none;
}

figure.effect-apollo img {
	width:100%;
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.02,1.02,1);
	transform: scale3d(1.02,1.02,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(254,166,000,0.3);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 3em;
	padding: 0 1em;
	max-width: 150px;
	border-right: 4px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-apollo h2 {
	text-align: left;
}

figure.effect-apollo:hover img {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}



/*julia*/
figure.effect-julia {
	background-color:#302f2f;
	border-bottom:5px solid #ea0d27;
	margin-left:7px;
	margin-right:8px;
}

figure.effect-julia img {
	width:437px;
	max-width: none;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia figcaption {
	text-align: left;
}

figure.effect-julia h2 {
	position: relative;
	padding: 0.5em 0;
}

figure.effect-julia p {
	display: inline-block;
	margin: 0 0 0.25em;
	padding: 0.4em 1em;
	color: #c0c1c3;
	text-transform: none;
	font-weight: 500;
	font-size: 75%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	
	
}
figure.effect-julia .p_a{
	width:437px;
	text-align:center;
	padding-top:87px;
	padding-bottom:20px;
}
figure.effect-julia .p_b{
	width:437px;
	text-align:center;
	padding-bottom:20px;
}
figure.effect-julia .p_c{
	width:83px;
	line-height:26px;
	text-align:center;
	border-bottom:1px solid #aeafb1;
	border-top:1px solid #aeafb1;
	font-size:16px;
	margin-left:178px;
}
	

figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/*---------------*/
/***** Jazz *****/
/*---------------*/

figure.effect-jazz {
	background: -webkit-linear-gradient(-45deg, #ff7318 0%,#fff 100%);
	background: linear-gradient(-45deg, #ff7318 0%,#fff 100%);
	width: 281px;
}

figure.effect-jazz img {
	opacity: 1;
}

figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-jazz figcaption::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-jazz h2,
figure.effect-jazz p {
	opacity: 1;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
}

figure.effect-jazz h2 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-jazz p {
	padding: 0.5em 2em;
	text-transform: none;
	font-size: 0.85em;
	opacity: 0;
}

figure.effect-jazz:hover img {
	opacity: 0.9;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-jazz:hover figcaption::after {
	opacity: 1;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

figure.effect-jazz:hover h2,
figure.effect-jazz:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}









/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo1 {
	width: 259px;
	padding: none;
}

figure.effect-apollo1 img {
	width:100%;
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo1 figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(254,166,000,0.3);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo1 p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 3em;
	padding: 0 1em;
	max-width: 150px;
	border-right: 4px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-apollo1 h2 {
	text-align: left;
}

figure.effect-apollo1:hover img {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-apollo1:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo1:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}