/*案例展示*/





/*$$

{"color":[{"val":"#e8e8e8","title":"大S字体颜色"},

{"val":"#202020","title":"标题中文字体颜色"},

{"val":"#999999","title":"标题英文字体颜色 +列表字体颜色+查看更多"},

{"val":"#54800e","title":"列表选中字体颜色"}],

"background":[{"val":"#162123","title":"标题横线颜色"},

{"val":"#ffffff","title":"轮播颜色"},

{"val":"#909090","title":"前进后退颜色"},

{"val":"#54800e","title":"前进后退选中颜色"}],

"border":[{"val":"#c9c9c9","title":"列表边框颜色"},

{"val":"#54800e","title":"列表选中边框颜色"},

{"val":"#999999","title":"查看更多边框颜色"}]}

$$*/



#case_157 {

	width: 1200px;

	margin: 0 auto;

	padding:70px 0;

}



#case_157 .indexTitle {

	width: 100%;

}



#case_157 .titleBig {

	font-size: 130px;

	text-align: center;

	line-height: 130px;

	color: #e8e8e8;

	position: relative;

	z-index: 2;

}



#case_157 .titleCH {

	font-size: 24px;

	line-height: 30px;

	text-align: center;

	color: #202020;

	margin-top: -65px;

	position: relative;

	z-index: 3;

}



#case_157 .titleLine {

	width: 14px;

	height: 1px;

	background: #162123;

	margin: 0 auto;

	margin-top: 15px;

	position: relative;

	z-index: 3;

}



#case_157 .titleEN {

	font-family: arial;

	font-size: 12px;

	line-height: 20px;

	color: #999999;

	text-align: center;

	margin-top: 15px;

}



#case_157 .caseTop {

	width: 80%;

	margin: 0 auto;

	margin-top: 60px;

	min-height: 50px;

	height: auto;

	overflow-y: auto;

	zoom: 1;

}



#case_157 .caseTop ul {

	width: 100%;

	/*display: flex;

	justify-content: space-between;

	align-items: center;*/

	overflow: hidden;

	padding: 10px 0;

	text-align: center;

}



#case_157 .caseTop ul li {

	width: auto;

	padding: 0 25px;

	display: inline-block;

	margin-right: 100px;

	border: #c9c9c9 solid 1px;

	border-radius: 10px;

	font-size: 14px;

	line-height: 30px;

	text-align: center;

	position: relative;

	margin: 10px 50px;

}

#case_157 .caseTop ul li:hover,#case_157 .caseTop ul li.active{

	border: #54800e solid 1px;

	box-shadow:0 0 10px 3px rgba(0,0,0,.1);

}



#case_157 .caseTop ul li a{

	color: #999999;

	display: block;

	width: 100%;

}

#case_157 .caseTop ul li:hover a,#case_157 .caseTop ul li.active a{

	color: #202020;

}

#case_157 .caseTop ul li:after{

	content: "|";

	font-size: 14px;

	line-height: 30px;

	color: #999999;

	position: absolute;

	top: 50%;

	margin-top: -15px;

	right: -50px;

}



#case_157 .caseTop ul li:last-child:after {

	display: none;

}



#case_157 .caseBot{

	width: 100%;

	overflow: hidden;

	margin-top: 80px;

	position: relative;

}



#case_157 .caseBot a,

#case_157 .caseBot img{

	display:block;

	width: 100%;

	height: 100%;

	object-fit: cover;

}

#case_157 .caseBot .poster-list{

	width: 1000px;

	height: 500px;

}

#case_157 .caseBot .poster-list .poster-item{ 

	width: 200px;

	height: 500px;

	position:absolute;

	left:0;

	top:0;

}

#case_157 .caseBot .poster-btn{ 

	position:absolute;

	top:0;

	z-index:10; 

	cursor:pointer;  

	width: 160px!important;

}

#case_157 .caseBot .poster-prev-btn{

	left:0; 

	background: url(/static/images/CP00008_04.png) no-repeat center center;

}

#case_157 .caseBot .poster-next-btn{

	right:0; 

	background: url(/static/images/CP00008_05.png) no-repeat center center;

}



#case_157 .caseMore {

	width: 195px;

	margin: 0 auto;

	margin-top: 90px;

	font-size: 14px;

	text-align: center;

	position: relative;

	cursor: pointer;

}



#case_157 .caseMore a {

	line-height: 30px;

	height: 30px;

	display: block;

	width: 100%;

	padding-right: 50px;

	border: #999999 solid 1px;

	background: url(/static/images/NP00007_01.png) no-repeat 90% center;

	color: #999999;

}

#case_157 .caseMore:hover a{

	color: #202020;

}

#case_157 .caseMore.btnAnimat .inner{

	position:absolute;

	top:0;

	left:0;

	width:100%;

	height:100%;

}

#case_157 .caseMore.btnAnimat:before,

#case_157 .caseMore.btnAnimat:after,

#case_157 .caseMore.btnAnimat .inner:before,

#case_157 .caseMore.btnAnimat .inner:after{

	background-color:#759f30;

}

#case_157 .caseMore.btnAnimat:before,

#case_157 .caseMore.btnAnimat:after,

#case_157 .caseMore.btnAnimat .inner:before,

#case_157 .caseMore.btnAnimat .inner:after{

	position:absolute;

	content:"";

	display:block;

	-webkit-transition:-webkit-transform 0.3s;

	transition:-webkit-transform 0.3s;

	transition:transform 0.3s;

	transition:transform 0.3s,-webkit-transform 0.3s;

}

#case_157 .caseMore.btnAnimat:before,

#case_157 .caseMore.btnAnimat:after{

	left:0;

	width:100%;

	height:1px;

	-webkit-transform:scaleX(0);

	transform:scaleX(0);

}

#case_157 .caseMore.btnAnimat .inner:before,

#case_157 .caseMore.btnAnimat .inner:after{

	top:0;

	width:1px;

	height:100%;

	-webkit-transform:scaleY(0);

	transform:scaleY(0);

}



#case_157 .caseMore.btnAnimat .inner:before{

	left:0;

}

#case_157 .caseMore.btnAnimat .inner:after{

	right:0;

}

#case_157 .caseMore.btnAnimat .inner:hover:before,

#case_157 .caseMore.btnAnimat .inner:hover:after{

	-webkit-transform:scaleY(1);transform:scaleY(1);

}



#case_157 .caseMore.btnAnimat:before{

	top:0;

}

#case_157 .caseMore.btnAnimat:after{

	bottom:0;

}

#case_157 .caseMore.btnAnimat:hover:before,

#case_157 .caseMore.btnAnimat:hover:after{

	-webkit-transform:scaleX(1);transform:scaleX(1);

}

#case_157 .caseMore.btnAnimat:hover .inner:before,

#case_157 .caseMore.btnAnimat:hover .inner:after{

	-webkit-transform:scaleY(1);transform:scaleY(1);

}

#case_157 .caseMore.btnAnimat.clockwise .inner:before{

	-webkit-transform-origin:top center;

	transform-origin:top center;

}

#case_157 .caseMore.btnAnimat.clockwise .inner:after{

	-webkit-transform-origin:bottom center;

	transform-origin:bottom center;

}

#case_157 .caseMore.btnAnimat.clockwise:before{

	-webkit-transform-origin:right center;

	transform-origin:right center;

}

#case_157 .caseMore.btnAnimat.clockwise:after{

	-webkit-transform-origin:left center;

	transform-origin:left center;

}

#case_157 .caseMore.btnAnimat.clockwise:hover .inner:before{

	-webkit-transform-origin:bottom center;

	transform-origin:bottom center;

}

#case_157 .caseMore.btnAnimat.clockwise:hover .inner:after{

	-webkit-transform-origin:top center;

	transform-origin:top center;

}

#case_157 .caseMore.btnAnimat.clockwise:hover:before{

	-webkit-transform-origin:left center;

	transform-origin:left center;

}

#case_157 .caseMore.btnAnimat.clockwise:hover:after{

	-webkit-transform-origin:right center;

	transform-origin:right center;

}



@media screen and (max-width:1200px) {

	#case_157 {

		width: 96%;

		padding: 50px 0;

	}

	#case_157 .caseTop ul li{

		padding: 0 20px;

		margin: 10px 30px;

	}

	#case_157 .caseTop ul li:after{

		right: -30px;

	}

}





/* ipad */



@media screen and (max-width:992px) {

	#case_157 {

		width: 96%;

		padding: 50px 0;

	}

	#case_157 .caseTop ul li{

		margin-right: 50px;

		width: 24%;

	}

	#case_157 .caseMore{

		width: 30%;

	}

	#case_157 .caseTop ul li:after{

		right: -25px;

	}

}





/* 手机 */



@media screen and (max-width: 767px) {

	#case_157 {

		width: 100%;

		padding:0 0 20px;

	}

	#case_157 .caseTop {

		width: 100%;

		padding: 0 20px;

	}

	#case_157 .caseBot {

		width: 100%!important;

		margin: 0 auto;

		overflow: unset;

	}

	#case_157 .caseBot .poster-list .poster-item{
		width: 100%!important;
	}

	#case_157 .caseMore{

		width: 40%;

	}

	#case_157 .caseTop ul li{

		width: auto;

		margin: 4px 8px;

		line-height: 24px;

		padding: 0 10px;

	}

	#case_157 .caseTop ul li:after{

		right: -14px;

	}

	#case_157 .caseTop{

		margin: 10px 0;

	}

	#case_157 .titleBig{

		font-size: 110px;

		line-height: 125px;

		margin-top: 0;

	}

	#case_157 .swiper-slide{

		height: 200px;

		width:100%!important;

	}

	#case_157 .caseMore{

		margin-top: 20px;

	}

	

	#case_157 .caseBot-prev,#case_157 .caseBot-next{

		width: 26px;

		height: 26px;

		line-height: 24px;

		margin-top: -26px;

		font-size: 22px;

		-webkit-tap-highlight-color:rgba(0,0,0,0); 

		user-select: none;

	   -webkit-user-select: none;

	   -webkit-tap-highlight-color: transparent; /* 防止ios 出现点击div 出现选中效果*/

	}

	#case_157 .swiper-container{

		width: 80%;

	}

	#case_157 .caseBot .poster-next-btn,

	#case_157 .caseBot .poster-prev-btn{

		background-size: 40px 40px;

		width: 60px!important;

	}

	

}