/*案例展示*/

/*$$

{"color":[{"val":"#1c1c1c","title":"标题文字颜色+查看更多"},

{"val":"#ffffff","title":"列表字颜色"},

{"val":"#b38d54","title":"点击查看选中"}],

"background":[{"val":"#f5f5f5","title":"整体底色"},

{"val":"#1c1c1c","title":"默认点击查看边框"},

{"val":"#b38d54","title":"鼠标滑过点击查看边框"},

{"val":"#000000","title":"标题横线颜色"}],"border":[{"val":"#1c1c1c","title":"查看更多横线颜色"}]}

$$*/



#case_149 {

	width: 100%;

	padding: 60px 0;

	background: #f5f5f5;

}



#case_149 .caseBody {

	width: 1200px;

	margin: 0 auto;

}



#case_149 .indexTitle {

	width: 50%;

	float: left;

}



#case_149 .indexEN {

	text-transform: uppercase;

	font-family: arial;

	font-weight: bold;

	font-size: 48px;

	line-height: 50px;

	color: #1c1c1c;

}



#case_149 .indexCH {

	font-size: 24px;

	line-height: 60px;

	color: #1c1c1c;

}



#case_149 .indexLine {

	width: 10%;

	display: flex;

	justify-content: space-between;

	align-items: center;

}



#case_149 .indexLine span {

	width: 40%;

	height: 1px;

	background: #000000;

}



#case_149 .indexLine p {

	width: 6px;

	height: 6px;

	border-radius: 50%;

	background: #000000;

}



#case_149 .caseMore {

	width: 200px;

	float: right;

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

	padding-right: 5%;

	margin-top: 60px;

	position: relative;

}

#case_149 .caseMore::before{

	position: absolute;

	bottom: 0;

	left: 0;

	width: 140px;

	content: '';

	height: 2px;

	background: #1c1c1c;

}

#case_149 .caseMore::after{

	position: absolute;

	bottom: 0;

	left: 0;

	width: 0;

	content: '';

	height: 2px;

	background: #b38d54;

	transition: width .3s ease;

}

#case_149 .caseMore:hover::after{

	width: 140px;

}

#case_149 .caseMore a{

	display: block;

	width: 100%;

	font-size: 14px;

	line-height: 60px;

	color: #1c1c1c;

	cursor: pointer;

	font-weight: 600;

}

#case_149 .caseMore:hover a{

	color: #b38d54;

}

#case_149 .caseList {

	margin-top: 50px;

	width: 100%;

}



#case_149 .caseList ul {

	width: 100%;

	overflow: hidden;

}



#case_149 .caseList ul li {

	width: 30.8%;

	float: left;

	border-radius: 5px;

	margin-right: 40px;

	margin-bottom: 45px;

	position: relative;

	cursor: pointer;

	overflow: hidden;

}



#case_149 .caseList ul li:nth-child(3n) {

	margin-right: 0;

}

#case_149 .caseList ul li img {

	width: 100%;

	position: relative;

	z-index: 6;

	transition:transform .3s ease;

}

#case_149 .caseList ul li:hover img{

	transform: scale(1.1);

}

#case_149 .caseList .caseListBody {

	width: 100%;

	height: 100%;

	border-radius: 5px;

	position: absolute;

	top: 0;

	left: 0;

	z-index: 8;

	/* background: rgba(0, 0, 0, 0.58); */

}



#case_149 .caseList p {

	position: absolute;

	z-index: 9;

	bottom: 15px;

	left: 20px;

	width:calc(100% - 40px);

	font-size: 16px;

	line-height: 40px;

	color: #ffffff;

	overflow: hidden;

	text-overflow:ellipsis;

	white-space: nowrap;

	height: 40px;

}



#case_149 .caseList ul li:hover .caseListBody,

.caseList ul li:hover p {

	display: none;

}

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

	#case_149{

		padding: 30px 0;

	}

	#case_149 .caseBody{

		width: 90%;

	}

	#case_149 .caseMore{

		background-size: 30%;

	}

	#case_149 .caseList{

		margin-top: 30px;

	}

	#case_149 .caseList ul li{

		margin-right: 25px;

	}

}

/* ipad */

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

	#case_149{

		padding: 20px 0;

	}

	#case_149 .caseBody{

		width: 90%;

	}

	#case_149 .caseMore{

		background-size: 30%;

	}

	#case_149 .caseList{

		margin-top: 30px;

	}

	#case_149 .caseList ul li{

		margin-right: 25px;

	}

	#case_149 .indexTitle{

		width: 70%;

	}

}

/* 手机 */

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

	#case_149{

		padding:20px 0 10px 0;

	}

	#case_149 .caseBody{

		width: 96%;

	}

	#case_149 .caseTitle{

		position: relative;

	}

	#case_149 .caseMore{

		width: 100px;

		position: absolute;

		bottom: 5px;

		right: 5px;

		background-size: 20%;

	}

	#case_149 .caseMore::before{

		width: 70px;

	}

	#case_149 .caseMore a{

		line-height: 30px;

	}

	#case_149 .indexEN{

		font-size: 28px;

		line-height:35px;

	}

	#case_149 .indexCH{

		font-size: 20px;

		line-height: 30px;

	}

	#case_149 .indexLine{

		width: 30%;

	}

	#case_149 .indexTitle{

		width: 100%;

	}

	#case_149 .caseList{

		margin-top: 20px;

	}

	#case_149 .caseList ul li{

		width: calc(50% - 10px);

		margin: 10px 5px;

	}

	#case_149 .caseList ul li:nth-child(3n){

		margin: 10px 5px;

	}

	#case_149 .caseList p{

		width: calc(100% - 20px);

		left: 10px;

		line-height: 40px;

		bottom: 0;

		height: 40px;

		font-size: 14px;

	}

}