/* ========== */
/* = ABOUT = */
/* ========== */
body {background: #e6e6e6; }
.number-animate{ line-height:50px; height:50px; font-weight: normal; overflow: hidden; display: inline-block; vertical-align: top; position: relative; }
.number-animate .number-animate-dot{ width:26px; float: left; text-align: center;}
.number-animate .number-animate-dom{ width:26px; text-align: center; float: left; position: relative; top: 0;}
.number-animate .number-animate-dom span,.number-animate .number-animate-dot span{float: left;width: 100%; height: 50px;}
.counter.move{margin-right:0;
	-webkit-transition:all 0.4s  1.5s ease-out;
	-o-transition:all 0.4s 1.5s ease-out;
	transition:all 0.4s 1.5s ease-out;}
.counter.move:after{
	opacity:1;
	-webkit-transition:all 0.4s  1.5s ease-out;
	-o-transition:all 0.4s 1.5s ease-out;
	transition:all 0.4s 1.5s ease-out;
}
.about-tit{ padding-bottom: 20px; letter-spacing: 1px; position: relative; color: #333333; font-size: 24px;}
.about-tit span{ color: #666666;}
.about-tit:after{ content: ""; position: absolute; bottom:0; left:0; width: 32px; height: 2px; background: #000000;} 
.about-more{ display: inline-block; line-height: 50px; background: #288fd4; padding: 0 32px; text-align: center; color: #FFFFFF;}
.about-more i{ display: inline-block; margin-right: 14px; vertical-align: middle; width: 22px; height: 22px; background: url(../images/ico_about_more.png);}
.about-more span{ display: inline-block; vertical-align: middle; font-size: 16px; color: #FFFFFF;}
.about-more:hover{ background: #0079ca;}
.about-more:hover i{ transform: translateX(7px); -webkit-transform: translateX(7px); }
.about-box{ margin: 40px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.about-box .img{ width: 45%; max-width: 620px;}
.about-box .right{ width: 55%; padding:  20px 5%;}
.about-box .tip{ margin-top: 15px; color:#333333; font-size: 16px;}
.about-box .des{  margin-top: 10px; line-height: 30px; color: #999999;}
.about-box .text{ margin-top: 30px; text-align: center;}
.about-box .text .item{ float: left; width:25%; text-align: center;}
.about-box .text .item span{ display: inline-block; position: relative; font-weight:lighter; font-size: 50px; line-height:50px; letter-spacing: -1px;}
.about-box .text .item b{ display:inline-block;  font-weight: lighter;color:#666;font-family:fantasy;font-weight: 100 !important;}
.about-box .text .item span i{ position: absolute; top:-12px; right:-15px; font-style: normal; font-size: 22px;}
.about-box .text .item:nth-child(1) span i{ font-size: 14px;}
.about-box .text .item p{ margin-top: 5px; font-size: 16px; color:#999}
img {
    display: block;
    max-width: 100%;
    border: 0;
    margin: 0 auto;
}
.about-brand{ margin: 40px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.about-brand ul{ width: 70%; padding: 0 5%;    box-sizing: border-box; }
.about-brand ul li{ padding:25px 5px; float: left; width: 33.33333%; text-align: center;    box-sizing: border-box; }
.about-brand ul li p{ margin: 15px auto 0; max-width: 190px; font-size: 16px; line-height: 24px;}
.about-brand .box{ width: 30%;     box-sizing: border-box; padding: 87px 5% 100px; background-image: url(../images/about_img2.jpg); color: #FFFFFF;}
.about-brand .box .about-tit{ color:#FFFFFF;}
.about-brand .box .about-tit:after{ background: #bfc4c9;} 
.about-brand .box .tip{ font-size: 16px; margin-top: 15px;}
.about-brand .box .about-more{ margin-top: 85px;    padding: 0 25px;}
.about-honor{ margin: 40px 0; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.about-honor .img{ width: 64%;}
.about-honor .text{ width: 36%; padding: 20px 6%;}
.about-honor .text .tip{ margin-top: 20px; font-size: 16px; color: #333333;}
.about-honor .text .des{ margin-top: 15px; line-height: 30px; color: #999999;}
.about-customer{ margin: 20px 0 80px; display: flex; flex-flow: wrap; align-items: center; justify-content: space-between; background: #FFFFFF;}
.about-customer .box{ padding: 65px 2% 65px 5%; width: 30%; background: #f6f6f6;}
.about-customer .box .tip{ margin-top: 20px; font-size: 16px;}
.about-customer .box .des div{ margin-top: 50px; margin-right: 45px; float: left; }
.about-customer .box .des div:last-child{ margin-right: 0;}
.about-customer .box .des div p{ font-size: 16px; margin-bottom: 15px;}
.about-customer .box .about-more{ margin-top: 50px;}
.about-customer ul{ width: 70%; padding: 0 2%;}
.about-customer ul li{ float: left; width: 20%; }
.about-customer ul li a{ display: block; position: relative; padding-bottom: 50%; }
.about-customer ul li a img{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-height: 80%; max-width: 80%; }
@media (max-width:1480px) {
	.about-tit{ font-size: 22px;}
	
	.about-box .right{ padding: 20px 4%;}
	.about-box .text .item p{ font-size: 14px;}
	.about-brand ul{ width: 65%;}
	.about-brand .box{ width: 35%;}
	.about-brand .about-more{ padding: 0 25px;}
	
	.about-customer .box{ padding-left:40px;}
}
@media (max-width:1280px) {
	.about-box .des{ font-size: 13px; line-height: 24px;}	
	.about-honor .text .des{ font-size: 13px; line-height: 24px;}
	.about-customer .box .des div{ margin-right: 20px;}
}
@media screen and (min-width:300px) and (max-width: 799px){ 
	.about-brand ul li{padding:15px 5px}
	.about-brand ul li p{font-size:12px;}
	.about-tit{ font-size: 18px;}
	.about-box,.about-honor,.about-brand{margin: 15px 0 !important;}
	.about-brand ul{padding:0 2% !important;}
	.about-box .img,.about-honor .img{width:100% !important;height:auto;padding:2%;}
	.about-box .right,.about-brand ul,.about-brand .box,.about-honor .text{width:100% !important;height:auto;}
	.about-box .text .item b{font-size:40px}
	.about-box .text .item p{padding:0px 10px; font-size:11px;}
}