@charset "utf-8";
/* CSS Document */
/**************************banner**************************/
.babg{
	width:100%;
	background:url(../images/banner.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	}
.banner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	overflow:hidden;
	padding-top:40px;
	}
.banner .banl{
	width:58%;
	float:left;
	}
.banner .banl .batop{
	width: 74.714%;
    height: 0;
    padding-bottom: 30.317%;
	}
.banner .banl .batop img{
	width: 100%;
	}
.banner .banl .babottom{
	width:100%;
	margin-top:49px;
	}
.banner .banl .babottom img{
	width: 90%;
	}
.banner .banl .babottom .babl{
	width:50%;
	float:left;
	text-align:center;
	}
.banner .banl .babottom .babr{
	width:50%;
	float:right;
	text-align:center;
	}
.banner .banr{
	width:42%;
	float:right;
	margin-top:60px;
	text-align:center;
	}
.banner .banr img{
	width: 90%;
	}
@media (max-width:1200px) {
.banner .banl .batop{
	padding-left:2%;
	width:520px;
	height:211px;
	padding-bottom:0%;
	}
	}
@media (max-width:1000px) {
.banner .banl .babottom{
	margin-top:15px;
	}
	}
@media (max-width:950px) {
.banner .banl .batop{
	width: 98%;
    height: 0;
    padding-bottom: 39.8%;
	}
	}
@media (max-width:500px) {
.banner .banr{
	margin-top:30px;
	}
	}
.shake.shake-slow:hover {
    -webkit-animation-name: shake-slow;
    -ms-animation-name: shake-slow;
    animation-name: shake-slow;
    -webkit-animation-duration: 10s;
    -ms-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running
}
@keyframes shake-slow {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }
    2% {
        transform: translate(-6px, -8px) rotate(2.5deg)
    }
    4% {
        transform: translate(3px, -9px) rotate(-0.5deg)
    }
    6% {
        transform: translate(3px, -8px) rotate(2.5deg)
    }
    8% {
        transform: translate(0px, 5px) rotate(0.5deg)
    }
    10% {
        transform: translate(3px, 2px) rotate(0.5deg)
    }
    12% {
        transform: translate(8px, 0px) rotate(0.5deg)
    }
    14% {
        transform: translate(4px, 7px) rotate(-3.5deg)
    }
    16% {
        transform: translate(-4px, 0px) rotate(-0.5deg)
    }
    18% {
        transform: translate(1px, 3px) rotate(-1.5deg)
    }
    20% {
        transform: translate(-8px, -1px) rotate(-3.5deg)
    }
    22% {
        transform: translate(5px, 9px) rotate(2.5deg)
    }
    24% {
        transform: translate(-9px, -10px) rotate(-2.5deg)
    }
    26% {
        transform: translate(0px, 7px) rotate(-1.5deg)
    }
    28% {
        transform: translate(-10px, 7px) rotate(2.5deg)
    }
    30% {
        transform: translate(8px, -7px) rotate(-1.5deg)
    }
    32% {
        transform: translate(0px, -8px) rotate(-0.5deg)
    }
    34% {
        transform: translate(9px, 7px) rotate(-0.5deg)
    }
    36% {
        transform: translate(-7px, 6px) rotate(0.5deg)
    }
    38% {
        transform: translate(8px, -10px) rotate(-0.5deg)
    }
    40% {
        transform: translate(8px, 0px) rotate(0.5deg)
    }
    42% {
        transform: translate(0px, -2px) rotate(1.5deg)
    }
    44% {
        transform: translate(5px, -2px) rotate(-0.5deg)
    }
    46% {
        transform: translate(1px, -10px) rotate(-2.5deg)
    }
    48% {
        transform: translate(4px, -1px) rotate(2.5deg)
    }
    50% {
        transform: translate(-5px, -4px) rotate(2.5deg)
    }
    52% {
        transform: translate(3px, 2px) rotate(-3.5deg)
    }
    54% {
        transform: translate(1px, -6px) rotate(-0.5deg)
    }
    56% {
        transform: translate(-3px, -4px) rotate(-0.5deg)
    }
    58% {
        transform: translate(-10px, -10px) rotate(2.5deg)
    }
    60% {
        transform: translate(8px, 7px) rotate(-3.5deg)
    }
    62% {
        transform: translate(9px, -6px) rotate(-3.5deg)
    }
    64% {
        transform: translate(-5px, 8px) rotate(-0.5deg)
    }
    66% {
        transform: translate(1px, -3px) rotate(0.5deg)
    }
    68% {
        transform: translate(-6px, 9px) rotate(1.5deg)
    }
    70% {
        transform: translate(-5px, 8px) rotate(-1.5deg)
    }
    72% {
        transform: translate(-10px, -2px) rotate(2.5deg)
    }
    74% {
        transform: translate(0px, -4px) rotate(1.5deg)
    }
    76% {
        transform: translate(-2px, -5px) rotate(0.5deg)
    }
    78% {
        transform: translate(-2px, 9px) rotate(-3.5deg)
    }
    80% {
        transform: translate(7px, 4px) rotate(-3.5deg)
    }
    82% {
        transform: translate(-1px, -4px) rotate(-1.5deg)
    }
    84% {
        transform: translate(3px, -6px) rotate(0.5deg)
    }
    86% {
        transform: translate(7px, -8px) rotate(-1.5deg)
    }
    88% {
        transform: translate(4px, -9px) rotate(1.5deg)
    }
    90% {
        transform: translate(1px, -6px) rotate(2.5deg)
    }
    92% {
        transform: translate(-8px, -1px) rotate(-1.5deg)
    }
    94% {
        transform: translate(-4px, -1px) rotate(0.5deg)
    }
    96% {
        transform: translate(-6px, 9px) rotate(1.5deg)
    }
    98% {
        transform: translate(7px, 4px) rotate(-0.5deg)
    }
}
/**************************品牌**************************/
.brands{
	width:100%;
	overflow:hidden;
	margin:30px auto;
	}
.brands>div{
	width:32%;
	height:0px;
	padding-bottom: 32.5%;
	}
.brands>div .brandstp{
	width:100%;
	height:0px;
	padding-bottom: 101.565%;
	overflow:hidden;
	position: relative;
	}
.brands>div .brandstp img{
	width:100%;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
	z-index:1;
	transition-delay: 0s;
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease;
	}
.brands>div:hover .brandstp img{
	transform: scale(1.2, 1.2);
	}
.brands>div .brandswz{
	width:100%;
	height:100px;
	background:rgba(0,0,0,.5);
	position:relative;
	margin-top:-100px;
	text-align:center;
	z-index:9999;
	}
.brands>div .brandswz h4{
	font-family:"Reem Kufi Regular";
	font-size:24px;
	color:#fff;
	line-height:30px;
	padding-top: 20px;
	}
.brands>div .brandswz p{
	font-family:"Reem Kufi Regular";
	font-size:16px;
	color:#ccc;
	line-height:30px;
	margin-top:6px;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
	}
.brands .br{
	float:left;
	}
.brands .an{
	float:left;
	margin-left:2%;
	}
.brands .an .antwo{
	margin-top:4.8%;
	}
.brands .an>div .antp{
	width:100%;
	height:0px;
	padding-bottom: 48.44%;
	overflow:hidden;
	position: relative;
	}
.brands .an>div .antp img{
	width:100%;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
	z-index:1;
	transition-delay: 0s;
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease;
	}
.brands .an>div:hover .antp img{
	transform: scale(1.2, 1.2);
	}
.brands .an>div {}
.brands .ds{
	float:right;
	}
@media (max-width:1000px) {
.brands{
	width:96%;
	}
.brands>div{
	width: 100%;
    padding-bottom: 101.7%;
	margin-top:4.8%;
	}
.brands .an{
	margin-left:0%;
	}
.brands .an>div .antp{
	padding-bottom: 48.5%;
	}
	}
/**************************标题**************************/
.bt{
	overflow:hidden;
	display:table;
	margin:0 auto;
	margin-top:25px;
	border-bottom:1px solid #f2b502;
	}
.bt p{
	font-size:30px;
	color:#f2b502;
	font-family:Impact;
	border-bottom:1px solid #f2b502;
	display:inline-block;
	overflow:hidden;
	padding-bottom:8px;
	}
/**************************产品**************************/
.product{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	}
.product ul{
	overflow:hidden;
	}
.product ul li{
	width:23.334%;
	float:left;
	height:0;
	padding-bottom:23.334%;
	margin:1% 0.8%;
	}
.product ul li .prtp{
	width:100%;
	height:0;
	padding-bottom:100%;
	overflow:hidden;
	position: relative;
	}
.product ul li .prtp img{
	width:100%;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
	z-index:1;
	transition-delay: 0s;
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease;
	}
.product ul li:hover .prtp img{
	transform: scale(1.2, 1.2);
	}
.product ul li .prwz{
	width:100%;
	height:50px;
	background:rgba(120,190,58,.9);
	position:relative;
	margin-top:-50px;
	z-index:555;
	}
.product ul li .prwz{
	font-size:14px;
	color:#fff;
	font-weight:bold;
	line-height:50px;
	text-align:center;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
	}
.product ul li .prwz{
	color:#fff;
	}
@media (max-width:1000px) {
.product ul li{
	width:31.25%;
	float:left;
	height:0;
	padding-bottom:31.25%;
	margin:1%;
	}
	}
@media (max-width:760px) {
.product ul li{
	width:47.974%;
	float:left;
	height:0;
	padding-bottom:47.974%;
	margin:1%;
	}
	}
/**************************关于我们**************************/
.abbg{
	width:100%;
	padding:40px 0px;
	margin-top:30px;
	background:url(../images/500002558.jpg) center no-repeat;
	}
.about{
	width:96%;
	max-width:1200px;
	margin:0 auto;
	text-align:center;
	}
.about h2{
	font-size:24px;
    color: #f2b502;
	}
.about span{
	width:50px;
	display:block;
	height:3px;
	margin:0 auto;
    background: #f2b502;
	margin-top:15px;
	}
.about p{
	margin-top:30px;
	line-height:30px;
	font-size:14px;
	color:#666;
	}
.about a.more{
	display: inline-block;
	margin-top:50px;
    font-size: 14px;
    color: #f2b502;
    border: 1px solid #f2b502;
    padding: 13px 40px;
    transition: all 1s;
	}
.about a.more:hover {
    background: #f2b502;
    color: #fff;
}
/* marqueeleft376296 */
.marqueeleft{
	/*height:90px;*/
	width:1200px;
	overflow:hidden;
	margin:0px auto;
	margin-top:20px;
	}
.marqueeleft ul{
	float:left;
	}
.marqueeleft li{
	float:left;
	margin:0 12px;
	display:inline;
	width:362px;
	height:206px;
	overflow:hidden;
	}
.marqueeleft li .pic{
	display:block;
	border:rgba(0,0,0,0) 1px solid;
	width: 356px;
    height: 200px;
	overflow:hidden;
	padding:2px;
	}
.marqueeleft li .txt{
	text-align:center;
	height:23px;
	line-height:23px;
	}
@media (max-width:1000px) {
.about p{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
	}
	}
/**************************新闻**************************/
.new{
	width:100%;
	overflow:hidden;
	border-bottom:2px solid #fff;
	margin:0 auto;
	}
.new:hover{
	border-bottom:2px solid #f2b502;
	box-shadow: 0 0px 5px rgba(204,204,204,0.35);
	}
/*.new+ .new{
	margin-left:18px;
	}*/

.new .netp{
	width:89%;
	height:0px;
	padding-bottom:35.6%;
	margin:15px auto;
	border-radius:5px;
	position: relative;
	overflow: hidden;
	-webkit-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
	}
.new .netp:before {
	content: ' ';
	position: absolute;
	background: #fff;
	width: 25px;
	height: 100px;
	top: 0;
	left: -80px;
	opacity: 0.3;
	-webkit-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.new:hover .netp:before {
	width: 45px;
	left: 350px;
}
.new .netp img{
	width:100%;
	}
.new p.da{
	width:89%;
	font-size:14px;
	color:#333;
	font-weight:bold;
	margin:0 auto;
	margin-bottom:10px;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
	}
.new p.da a{
	color:#fff;
	}
.new p.da a:hover{
	color:#f2b502;
	}
.new p.te{
	width:89%;
	font-size:12px;
	color:#999;
	margin:0 auto;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
	line-height:22px;
	}
.new .damo{
	width:89%;
	margin:15px auto;
	overflow:hidden;
	}
.new .damo .date{
	float:left;
	width:50px;
	}
.new .damo .date p:nth-of-type(1){
	font-size:18px;
	color:#bbb;
	}
.new .damo .date p:nth-of-type(2){
	font-size:12px;
	color:#bbb;
	margin-top:3px;
	}
.new .damo .more{
	float:right;
	width:50px;
	height:20px;
	border-radius:10px;
	background:#ccc;
	margin-top:9px;
	}
.new .damo .more a{
	display:block;
	}
.new .damo .more img{
	padding-left: 15px;
    padding-top: 5px;
	}
.new .damo .more:hover{
	background:#f2b502;
	}