html,body{
	margin: 0;padding: 0;width: 100%;height: 100%;
	border: 1px solid #FFF;
}
*{box-sizing: border-box;font-size: 14px; color: #4d5158;}/* 边框算在尺寸里 */
ul{list-style: none;margin: 0;padding: 0;}
a{text-decoration:none;}
.cp{
	position: relative;
	overflow:hidden;
}
.cp .cp-logo{
	height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10%;
	background-color: #FFF;
}
.cp .cp-logo img{
	width: 300px;
	height: 80px;
}
.cp .cp-logo .seek{
	flex-shrink: 0;/* 不压缩空间 */
}
.cp .cp-logo .seek input{
	width: 245px;
	height: 40px;
	outline:none;/* 去掉默认点击效果 */
	border: 2px solid #50463A;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	padding-left: 30px;
}
.cp .cp-logo .seek button{
	height: 40px;
	width: 60px;
	float: right;
	font-family: Microsoft YaHei;
    background: #50463A;
    color: #ffffff;
	border: 2px solid #50463A;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}
.cp .cp-nav{
	height: 50px;
	/* background-color: #f6a724; */
	background-color: #50463A;
}
.cp .cp-nav .nav{
	margin: 0 20%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
.cp .cp-nav .nav li{
	padding: 0 20px;
	flex-shrink: 0;/* 不压缩空间 */
	position: relative;
}
.cp .cp-nav .nav li a{
	color: #ffffff;
    line-height: 50px;
    font-size: 16px;
}
.cp .cp-nav .nav .mark{
	background-color: #766D56;
}
.cp .cp-nav .nav li .lower{
	margin: 0 -40px;
	position: absolute;
	display: flex;
	flex-direction: column ;
	justify-content:center ;
	background-color: #50463A;
	display:none;
}
.cp .cp-nav .nav li .lower li{
	display:block;
	text-align:center;
}
.cp .cp-nav .nav li:hover .lower{
	display:block;
}
.cp .cp-banner{
	height: 70%;
	margin-bottom: 60px;
	background-color: antiquewhite;
}
.cp .cp-banner img{
	width: 100%;
	height: 100%;
}
.cp .footer{
	height: 154px;
	background-color: #f2f2f2;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
}
.cp .footer .nav{
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 60%;
	justify-content:space-around;
}
/* 首页中间位置 */
.cp .middle .content{
	margin: 0 10%;
	padding-top: 21px;
	height: 100px;
	border-bottom: 1px solid #e6e6e6;
	display: flex;
	flex-direction: column;
	align-items:center ;
}
.cp .middle .content .title{
	height: 90px;
	padding-top: 20px;
}
.cp .middle .content .title div{
	color: #666666;
	font-size: 36px;
}
.cp .middle .content .title-adorn{
	width: 100px;
	height: 10px;
}
.cp .middle .content .title-adorn div{
	height: 100%;
	border-bottom: 3px solid #50463A;
}
.cp .middle>li:nth-child(2),.cp .middle>li:nth-child(4){ 
	background-color: #f2f2f2;
}
.cp .middle .images{
	margin: 20px 10%;
	display: flex;
	justify-content:space-between;
}
.cp .middle .images li{
	width: 18.75%;
	border: 1px solid #d6d6d6; 
}
.cp .middle .images img{
	padding: 15% 0;
	width: 100%;
}
.cp .middle .images div{
	text-align:center;
	margin-bottom: 10px;
}
.cp .middle .images li:hover img{
	opacity:0.7;
}
.cp .middle .images li:hover div{
	color: #50463A;
}
.cp .middle .back .company{
	display: flex;
	justify-content: space-between;
	align-items:center;
	padding: 20px 10%;
}
.cp .middle .back .company .company-images{
	width: 48.833333333333336%;
}
.cp .middle .back .company .company-images img{
	width: 100%;
}
.cp .middle .back .company .company-intro{
	width: 47.25%;
}
.cp .middle .back .company .company-intro .company-content div{
	color: #666666;
	line-height: 30px;
	text-indent: 2em;
}
.cp .middle .back .company .company-intro .company-more{
	margin-top: 20px;
	width: 70px;
	height: 30px;
	background-color: #50463A;
	text-align: center;
	line-height: 30px;
}
.cp .middle .back .company .company-intro .company-more a{
	color: #FFFFFF;
}
.cp .middle .case{
	display: flex;
	justify-content:space-between;
	padding: 20px 10%;
}
.cp .middle .case li{
	width: 27.583333333333332%;
}
.cp .middle .case .case-img img{
	width: 100%;
}
.cp .middle .case .case-img p{
	text-align: center;
}
.cp .middle .case .case-intro{
	color: #999999;
	line-height: 25px;
	text-indent: 2em;
}
.cp .middle .case .case-more a{
	font-size: 12px;
    text-align: left;
}
.cp .middle .case .case-more a:hover{
	color: #e28c00;
}
.cp .middle .news{
	display: flex;
	justify-content:space-between;
	padding: 20px 10%;
}
.cp .middle .news .news-img{
	width: 24%;
}
.cp .middle .news .news-img img{
	width: 100%;
}
.cp .middle .news .news-content{
	width: 73%;
}
.cp .middle .news .news-content .news-intro{
	line-height: 25px;
	text-indent: 2em;
}
.cp .middle .news .news-content .news-more{
	margin-top: 10px;
	width: 70px;
	height: 30px;
	background: #50463A;
	text-align: center;
}
.cp .middle .news .news-content .news-more a{
	color: #FFFFFF;
	line-height: 30px;
}
.cp .middle .news .news-content ul{
	display: flex;
	justify-content: space-between;
}
.cp .middle .news .news-content ul li{
	width: 23.5%;
}
.cp .middle .news .news-content ul li img{
	width: 100%;
	transition: all .4s;
	cursor: pointer;
}
.cp .middle .news .news-content ul li img:hover{
	transform: scale(1.1);
}
.cp .middle .commitment{
	display: flex;
	justify-content:space-between;
	padding: 20px 15%;
}
.cp .middle .commitment li{
	width: 12%;
}
.cp .middle .commitment .commitment-img img{
	width: 100%;
}
.cp .middle .commitment .commitment-title{
	text-align: center;
	white-space:nowrap;
	overflow:hidden;
}
.cp .middle .commitment .commitment-intro{
	font-size: 0.5em;	
	text-align: center;
	white-space:nowrap;
	overflow:hidden;
}
/* 特效 */
/* 导航固定 */
.navFixation{
	position:fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}
.fade-in{
	opacity:0;
	animation:fadeto 2s 0.2s 1 forwards;
	animation-play-state:paused;
}
@keyframes fadeto{
from{ opacity:0;}
to{ opacity:1;}
}
/* 下降 */
.moveDecline{
	opacity:0; 
	animation:moveDeclineto 1s 0.2s 1 forwards;
	animation-play-state:paused;
}
@keyframes moveDeclineto{
	0%{
		opacity:0;
        transform:translateY(-200px);
	}
    100%{
		opacity:1;
        transform:translateY(0);
	}
}
/* 上升 */
.moveRise{
	opacity:0; 
	animation:moveRiseto 1s 0.4s 1 forwards;
	animation-play-state:paused;
}
@keyframes moveRiseto{
	0%{
		opacity:0;
        transform:translateY(200px);
        }
    100%{
		opacity:1;
        transform:translateY(0);
	}
}
/* 左边划入 */
.moveLeft{
	opacity:0; 
	animation:moveLeftto 1s 0.0s 1 forwards;
	animation-play-state:paused;
}
@keyframes moveLeftto{
	0%{
		opacity:0;
        transform:translateX(-200px);
        }
    100%{
		opacity:1;
        transform:translateX(0);
	}
}
/* 右边划入 */
.moveRight{
	opacity:0; 
	animation:moveRightto 1s 0.0s 1 forwards;
	animation-play-state:paused;
}

@keyframes moveRightto{
0%{
		opacity:0;
        transform:translateX(200px);
        }
    100%{
		opacity:1;
        transform:translateX(0);
	}
}
.effects{
	animation-play-state:running;
}


/*----------------------平板板式样式----------------------*/
@media screen and (min-width:641px) and (max-width:1200px) {
	.cp .cp-nav .nav{
		margin: 0 5%;
	}
	.cp .cp-nav .nav li{
		padding: 0 10px;
	}
	.cp .cp-banner{
		margin-bottom: 0px;
	}
	.cp .middle .content{
		margin: 0;
	}
	.cp .middle .images{
		margin: 10px 5%;
	}
	.cp .middle .back .company{
		padding: 10px 5%;
	}
	.cp .middle .back .company .company-intro .company-content div{
		font-size: 12px;
		line-height: 20px;
		text-indent: 1em;
	}
	.cp .middle .back .company .company-intro .company-more{
		margin-top: 5px;
		height: 20px;
		line-height: 20px;
	}
	.cp .middle .case{
		padding: 10px 5%;
	}
	.cp .middle .case .case-intro{
		font-size: 12px;
		line-height: 18px;
	}
	.cp .middle .news{
		padding: 10px 5%;
	}
	.cp .middle .commitment{
		padding: 10px 5%;
	}
	.cp .footer .nav{
		width: 95%;
	}
	.cp-common .cp-common-content .information li .information-content .information-content-c{
		font-size: 12px;
		min-height:45px;
	}
}
@media screen and (max-width:925px) {
	.cp-common .cp-common-content .information li .information-content-c{
		 display: none;
	}
}
/*----------------------手机板式样式----------------------*/
@media screen and (max-width:640px) {
	.cp .cp-logo{
	height: 110px;
	padding: 0 5%;
	flex-direction:column ;
	justify-content: flex-start;
	align-items: flex-start;
	}
	.cp .cp-logo img{
		width: 250px;
		height: 100%;
	}
	.cp .cp-logo .seek input{
		height: 30px;
	}
	.cp .cp-logo .seek button{
		height: 30px;
	}
	.cp .cp-nav{
		display: none;
	}
	.cp .cp-banner{
		margin-bottom: 0px;
	}
	.cp .middle .content{
		margin: 0;
	}
	.cp .middle .images{
		margin: 10px 1%;
	}
	.cp .middle .images div{
		font-size: 10px;
	}
	.cp .middle .back .company{
		padding: 10px 1%;
		flex-direction:column;
		justify-content: space-between;
		align-items:center;
	}
	.cp .middle .back .company .company-images{
		width: 99%;
	}
	.cp .middle .back .company .company-images img{
		width: 100%;
	}
	.cp .middle .back .company .company-intro{
		width: 99%;
	}
	.cp .middle .back .company .company-intro .company-content div{
		font-size: 12px;
		line-height: 20px;
		text-indent: 1em;
	}
	.cp .middle .back .company .company-intro .company-more{
		margin-top: 5px;
		height: 20px;
		line-height: 20px;
	}
	.cp .middle .case{
		padding: 10px 1%;
	}
	.cp .middle .case .case-intro{
		font-size: 10px;
		line-height: 15px;
	}
	.cp .middle .case .case-more a{
		font-size: 10px;
	}
	.cp .middle .news{
		padding: 10px 1%;
		 flex-direction: column;
		justify-content:space-between;
	}
	.cp .middle .news .news-img{
		width: 99%;
	}
	.cp .middle .news .news-img img{
		width: 99%;
		height: 200px;
	}
	.cp .middle .news .news-content{
		width: 99%;
	}
	.cp .middle .commitment{
		padding: 10px 1%;
	}
	.cp .footer .nav{
		width: 99%;
	}
}
/* -------------------------------- */
.cp .cp-banner-else{
	height: 40%;
	margin-bottom: 10px;
	background-color: antiquewhite;
}
.cp .cp-banner-else img{
	width: 100%;
	height: 100%;
}

/* 其他页面效果 */
.cp-common {
	padding: 10px 10%;
}
.cp-common .cp-common-title{
	border-bottom: 2px solid #cccccc;
	padding-left: 5%;
	padding-bottom: 1%;
	display: flex;
	align-items: flex-end ;
}
.cp-common .cp-common-title .title-Chinese{
    color: #333333;
    font-size: 24px;
}
.cp-common .cp-common-title .title-English{
	color: #999999;
    font-size: 12px;
}
.cp-common .cp-common-content{
	padding: 10px 5%;
}
.cp-common .cp-common-content p{
	box-sizing: border-box;
    font-size: 14px;
    font-family: Microsoft YaHei;
    color: #666666;
    text-indent: 2em;
    line-height: 30px;
	margin: 0;
}
.cp-common .cp-common-content .common-content-images{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.cp-common .cp-common-content .common-content-images li{
	width: 19.2%;
	min-width: 150px;
	margin: 1% 0;
}
.cp-common .cp-common-content .common-content-images li img{
	border: 1px solid #cccccc;
	padding: 20% 0;
	width: 100%;
}
.cp-common .cp-common-content .common-content-images li div{
	text-align: center;
	font: 12px;
}
.cp-common .cp-common-content .common-content-images li img{
	transition: all .4s;
	cursor: pointer;
}
.cp-common .cp-common-content .common-content-images li a:hover img{
	transform: scale(1.05);
    -ms-transform:scale(1.05);     /* IE 9 */
    -moz-transform:scale(1.05);     /* Firefox */
    -webkit-transform:scale(1.05); /* Safari 和 Chrome */
    -o-transform:scale(1.05);
}
.cp-common .cp-common-content .common-content-images li a:hover div{
	color: red;
}
/* 联系我们 */
.cp-common .cp-common-content .cp-common-contact{
	display: flex;
	justify-content:space-between;
}
.cp-common .cp-common-content .cp-common-contact .contact-map{
	width: 45%;
}
.cp-common .cp-common-content .cp-common-contact .contact-information{
	width: 45%;
	display: flex;
	flex-direction:column;
	justify-content:space-around;
	align-items: flex-start;
}
.cp-common .cp-common-content .cp-common-contact .contact-information p{
	font-size: 16px;
}
.cp-common .cp-common-content .cp-common-contact .contact-information p:first-child{
	font-size: 18px;
	color: #50463A;
}
/* 新闻列表页 */

.cp-common .cp-common-content .information li{
	border-bottom: 1px solid #eee;
	margin-bottom: 10px;
	display: flex;
	display: -webkit-flex;
	justify-content:space-between;
}
.cp-common .cp-common-content .information li div{
	color: #999999;
}
.cp-common .cp-common-content .information li div a{
	color: #999999;
}
.cp-common .cp-common-content .information li:first-child{
	display: flex;
	display: -webkit-flex;
	justify-content:flex-start;
	background-color: #f2f2f2;
}
.cp-common .cp-common-content .information li .information-img{
	width: 200px;
	flex-shrink: 0;
}
.cp-common .cp-common-content .information li .information-content{
	flex-grow: 1;
	margin: 15px 24px;
}
.cp-common .cp-common-content .information li .information-content div{
	margin-bottom: 10px;
}
.cp-common .cp-common-content .information li .information-content div:first-child{
	color: #e28c00;
}
.cp-common .cp-common-content .information li .information-content div:last-child{
	display: flex;
	display: -webkit-flex;
	justify-content:flex-end;
}
.cp-common .cp-common-content .information li .information-content div:last-child a{
	background-color: #e28c00;
	color: #FFFFFF;
	font-size: 12px;
    color: #fff;
	padding: 4px 10px;
}
.cp-common .cp-common-content .information li .information-img img{
	width: 100%;
}