@charset "utf-8";
/* CSS Document */

body{ background:#fff;}
.left{ float:left;}
.right{ float:right;}
.wrap{ background:#fff; position:relative; overflow:hidden; margin:0 auto;}
.content{ overflow:hidden;}
.clear{ height:0; clear:both;}

/*顶部*/
.topper{ width:100%; background:#000; padding:12px 0; position:relative; z-index:99;}
.topper .tp{ width:1400px; overflow:hidden; position:relative; margin:0 auto; z-index:3;}
.topper p{ display:block; line-height:26px; color:#fff; font-size:14px; overflow:hidden;}
.topper p.left a{ margin:0 1em 0 0;}
.topper p.left a:hover{ text-decoration:underline;}
.topper p.right a{ display:block;}
.topper p.right a{ display:block; overflow:hidden; background:#7c7c7c; border-radius:4px; float:left; margin:0 0 0 12px; transition:all ease 0.4s;}
.topper p.right a img{ display:block; height:26px;}
.topper p.right a:hover{ background:#e60012;}

/*头部*/
.header{ width:100%; background:#fff; position:relative; z-index:99;}
.header .head{ width:1400px; position:relative; margin:0 auto; z-index:3;}
.header .head::after{ content:''; display:block; overflow:hidden; clear:both;}
.header h1.logo{ display:block; overflow:hidden; float:left;}
.header h1.logo a{ display:block;}
.header h1.logo a img{ display:block; height:96px;}
.header a.btn{ display:block; margin:26px 0; float:right; position:relative; margin-left:20px;}
.header a.btn em{ display:block; line-height:44px; color:#fff; font-size:14px; font-weight:bold; text-align:center; text-transform:capitalize; background:#333; padding:0 20px; position:relative; transition:all ease 0.4s;}
.header a.btn em::after{ content:''; display:inline-block; width:1em; height:44px; background:url(../images/common/arrow.png) center no-repeat; background-size:100% auto; vertical-align:top; margin:0 0 0 0.5em;}
.header a.btn em:hover{ background:#e60012;}

/*导航*/
ul.nav{ display:block; height:44px; font-size:16px; padding:26px 0; float:right;}
ul.nav li{ display:block; float:left; position:relative;}
ul.nav li > a{ display:block; line-height:44px; color:#333; text-align:center; padding:0 4px; overflow:hidden; white-space:nowrap; margin:0 18px; position:relative; transition:all ease 0.4s;}
ul.nav li > a::after{ content:''; display:block; width:100%; height:1px; background:#333; position:absolute; left:0; bottom:6px; transition:all ease 0.4s; transform:scale(0,1);}
ul.nav li.on > a,
ul.nav li.cur > a{ color:#333;}
ul.nav li.on > a::after,
ul.nav li.cur > a::after{ transform:scale(1,1);}
ul.nav li > a:hover{ color:#e60012;}
ul.nav li > a:hover::after{ background:#e60012;}

ul.nav li p.sub{ display:none; min-width:100%; background:#e60012; position:absolute; left:50%; top:100%; transform:translate(-50%); z-index:99; box-shadow:0 0 8px rgba(22,22,22,0.2);}
ul.nav li p.sub a{ width:auto; line-height:3.125; color:#fff; font-size:0.9375em; font-weight:normal; padding:0 0.5em; background:none; border-radius:0;}
ul.nav li p.sub a::after{ display:none;}
ul.nav li p.sub a:hover,
ul.nav li p.sub.on a{ color:#e60012; background:#fff;}

/*banner*/
.banner{ width:100vw; height:436px; background-size:cover !important; position:relative;}
.banner h2{ display:block; line-height:1; font-size:16px; text-align:center; position:absolute; left:50%; top:55.5%; transform:translate3d(-50%,-50%,0);}
.banner h2 em{ display:block; color:#e60012; font-size:3.75em;}
.banner h2 span{ display:block; color:#444; font-size:1.125em; font-weight:normal; padding:2em 0 0;}

/*底部*/
.footer{ background:#000; padding:40px 0 0; overflow:hidden; transform:none !important;}
.footer .foot{ display:flex; justify-content:space-between; width:1400px; margin:0 auto; overflow:hidden; position:relative;}
.footer dl{ display:block; min-width:24%; max-width:27%; font-size:16px; padding:0 0 24px;}
.footer dl dt{ display:block; line-height:3.25; color:#fff; font-weight:bold; text-transform:uppercase; padding:0 0 1em;}
.footer dl dt::after{ content:''; display:block; width:1.25em; height:4px; background:#e60012;}
.footer dl dt a{ display:inline-block; vertical-align:top;}
.footer dl dd{ display:block; color:#fff; font-size:0.875em; padding:0.625em 0;}
.footer dl dd > em{ display:block; line-height:1.75; float:left; margin-right:4px;}
.footer dl dd > p{ display:block; line-height:1.75; overflow:hidden;}
.footer dl dd > p a{ display:block; overflow:hidden; padding:3px; border-radius:4px; float:left; margin:0 12px 0 0; transition:all ease 0.4s;}
.footer dl dd > p a img{ display:block; height:26px;}
.footer dl dd > p a:hover{ background:#e60012;}
.footer dl dd > a{ display:block; line-height:1.75; text-transform:capitalize;}
.footer dl form{ display:block; width:340px;}
.footer dl form p{ display:block; background:#fff; overflow:hidden; margin:0 0 14px; border:1px solid #ddd; padding:0 10px;}
.footer dl form p label{ display:block; line-height:30px; color:#333; float:left; margin-right:10px;}
.footer dl form p label font{ color:#e60012; margin-left:4px;}
.footer dl form p em{ display:block; overflow:hidden;}
.footer dl form p input.txt{ display:block; width:100%; box-sizing:border-box; height:30px; line-height:2; color:#333; border:0;}
.footer dl form p textarea{ display:block; width:100%; box-sizing:border-box; height:80px; line-height:20px; color:#333; padding:5px 0; border:0; resize:none;}
.footer dl form input.btn{ display:block; width:40%; height:32px; color:#fff; font-size:16px; text-transform:uppercase; background:#e60012; border:0; cursor:pointer;}
.footer .copyright{ line-height:1.75; color:rgba(255,255,255,0.9); font-size:14px; text-align:center; overflow:hidden; padding:1.75em 0;}
.footer .copyright a:hover{ color:#fff; text-decoration:underline;}

/*返回顶部*/
.backToTop{ display:block; width:50px; height:50px; background:url(../images/common/top.png); position:fixed; right:20px; bottom:60px; cursor:pointer; text-indent:-9999px; opacity:0.7; z-index:99;}
.backToTop:hover{ opacity:0.9;}

/*主体样式*/
.main{ width:1400px; margin:0 auto; position:relative;}
.main::before,
.main::after{ content:''; display:block; overflow:hidden; clear:both;}

.main ul.menu{ display:block; width:254px; float:left; margin:20px 60px 80px 0;}
.main ul.menu li{ display:block; padding:30px 0 0;}
.main ul.menu li a{ display:flex; width:100%; height:6.5em; color:#444; font-size:14px; background:#f6f6f6; border-radius:3.25em; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all ease 0.4s;}
.main ul.menu li a img{ display:block; height:34px; margin:0 auto 6px; transition:all ease 0.4s;}
.main ul.menu li a span{ display:block; line-height:1.2; text-align:center; padding:0 2em;}
.main ul.menu li.cur a{ color:#fff; background:#e60012;}
.main ul.menu li.cur a img{ filter:brightness(0) invert(1);}

/*内容样式*/
.main .attr{ margin:0 auto; overflow:hidden; position:relative;}
.main .attr::before,
.main .attr::after{ content:''; display:block; overflow:hidden; clear:both;}
.main .attr h2.title{ display:block; font-size:40px; text-align:center; padding:1em 0 0.875em;}
.main .attr h2.title em{ display:block; line-height:1.25; color:#333; text-transform:uppercase; padding:0.625em 0;}
.main .attr h3.title{ display:block; line-height:2; color:#333; font-size:32px; font-weight:normal; text-align:center; padding:0.875em 0; margin:0.625em 0 0;}
.main .attr p.mark{ display:block; line-height:3.285; color:#999; font-size:14px; text-align:center; background:#f8f8f8; margin:0 0 2.785em;}
.main .attr p.mark font{ margin:0 0.5em;}
.main .article{ line-height:2.125; color:#333; font-size:16px; text-align:justify; overflow:hidden; padding:0 0 2.25em;}
.main .article *{ line-height:inherit; color:inherit; font-size:inherit;}
.main .article img{ max-width:100%; height:auto;}

/*文章切换*/
.main .change{ overflow:hidden; font-size:15px; padding:2.5em 0; border-top:1px solid #ddd; margin:0 0 1.5em;}
.main .change p{ display:block; line-height:2.75; color:#666; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.main .change p a{ color:inherit;}
.main .change p a:hover{ color:#e60012;}

/*页码样式*/
.pages{ text-align:center; font-size:16px; padding:0 0 80px;}
.pages li{ display:inline-block; vertical-align:top;}
.pages span,
.pages a{ display:inline-block; min-width:14px; color:#999; height:24px; line-height:24px; text-align:center; padding:9px 15px; border:1px solid #d2d2d2; margin:0 8px;}
.pages a:hover{ color:#fff; background:#e60012; border-color:#e60012;}
.pages span{ color:#fff; background:#e60012; border-color:#e60012;}

.main .intro{ line-height:2; color:#333; font-size:16px; text-align:center; margin:-1.5em 0 2.5em;}
.main form.search{ display:block; width:48%; overflow:hidden; padding:10px 0; margin:0 auto;}
.main form.search input.txt{ display:block; width:74%; box-sizing:border-box; line-height:38px; color:#333; font-size:16px; padding:0 14px; border:1px solid #e6e6e6; border-radius:5px; margin-right:1%; float:left;}
.main form.search input.txt::placeholder{ color:#999;}
.main form.search input.btn{ display:block; width:25%; height:38px; color:#fff; font-size:14px; text-transform:uppercase; background:#e60012; border:0; border-radius:5px; float:left;}

.main ul.proList{ display:block; font-size:16px; overflow:hidden; margin:0 -30px; padding:50px 0 50px;}
.main ul.proList li{ display:block; width:33.33%; float:left;}
.main ul.proList li .box{ overflow:hidden; padding:12px; border:1px solid #ededed; margin:0 30px 30px;}
.main ul.proList li a.pic{ display:block; overflow:hidden;}
.main ul.proList li a.pic img{ display:block; width:100%; height:216px; transition:all ease 0.4s;}
.main ul.proList li a.title{ display:block; height:3.5em; line-height:1.75; color:#333; text-align:center; margin:1.25em 0 0; transition:all ease 0.4s;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.main ul.proList li a.view{ display:block; width:8em; line-height:2; color:#fff; font-size:1.25em; text-align:center; text-transform:capitalize; background:#666; border-radius:1em; margin:0.8em auto; transition:all ease 0.4s;}
.main ul.proList li .box:hover a.pic img{ transform:scale(1.05);}
.main ul.proList li .box:hover a.title{ color:#e60012;}
.main ul.proList li .box:hover a.view{ color:#fff; background:#e60012;}

/*产品详情*/
.propics{ width:542px; float:left; margin:50px 5% 0 0; user-select:none;}
.propics ul.pic{ display:block; border:1px solid #eaeaea;}
.propics ul.pic li{ display:none;}
.propics ul.pic li:nth-child(1){ display:block;}
.propics ul.pic li a{ display:block;}
.propics ul.pic li a img{ display:block; width:100%; height:auto;}
.propics .swiper-container{ margin:24px 0 0;}
.propics .swiper-slide{ display:block; width:98px; overflow:hidden; position:relative;}
.propics .swiper-slide a{ display:block; overflow:hidden; border:1px solid #ddd; cursor:pointer; position:relative; transition:all ease 0.4s;}
.propics .swiper-slide a img{ display:block; width:100%; height/:96px;}
.propics .swiper-slide a::before{ content:''; display:block; box-sizing:border-box; width:100%; height:100%; background:rgba(230,0,18,0.0); border:0px solid #e60012; position:absolute; left:0; top:0; z-index:3; opacity:0; transition:all ease 0.4s;}
.propics .swiper-slide-active a{ border-color:#e60012;}
.propics .swiper-slide-active a::before{ opacity:1;}
.propics .swiper-button-prev,
.propics .swiper-button-next{ width:28px; height:100%; background-size/:100% auto !important; position:absolute; top:0; margin:0;}
.propics .swiper-button-prev{ background:rgba(0,0,0,0.6) url(../images/icons/zoom_prev_w.png) center no-repeat; left:0;}
.propics .swiper-button-next{ background:rgba(0,0,0,0.6) url(../images/icons/zoom_next_w.png) center no-repeat; right:0;}
.propics .swiper-button-next.swiper-button-disabled,
.propics .swiper-button-prev.swiper-button-disabled{ opacity:0;}

.main .prointro{ font-size:16px; overflow:hidden; padding:50px 0 60px;}
.main .prointro h4{ display:block; line-height:1.5; color:#333; font-size:1.875em; font-weight:bold; overflow:hidden; padding:0 0 0.5em;}
.main .prointro .para{ display:block; line-height:2.5; color:#333; overflow:hidden; padding:0 0 0.5em;}
.main .prointro .para b{ display:block; float:left; margin-right:0.25em;}
.main .prointro .para p{ display:block; overflow:hidden;}
.main .prointro a.btn{ display:block; margin:26px 0; float:left; position:relative; margin:3em 0 0;}
.main .prointro a.btn em{ display:block; line-height:3; color:#fff; font-weight:bold; text-align:center; text-transform:capitalize; background:#333; padding:0 1.5em; position:relative; transition:all ease 0.4s;}
.main .prointro a.btn em::after{ content:''; display:inline-block; width:1em; height:3em; background:url(../images/common/arrow.png) center no-repeat; background-size:100% auto; vertical-align:top; margin:0 0 0 0.5em;}
.main .prointro a.btn em:hover{ background:#e60012;}

.main .attr h3.sub{ display:block; line-height:2.75; color:#fff; font-size:18px; font-weight:normal; overflow:hidden; border-bottom:2px solid #eee; margin:3em 0 0;}
.main .attr h3.sub em{ display:block; padding:0 2.5em; background:#e60012; float:left;}
.main .attr h3.sub + .article{ background:#f5f5f5; padding:1.25em 1.25em 2em;}
.main .attr h3.sub + .article + .change{ border:0;}

.main .recomd{ position:relative; padding:20px 0 66px;}
.main .recomd::after{ content:''; width:100vw; height:100%; background:#f5f5f5; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:1;}
.main .recomd>*{ position:relative; z-index:3;}
.main .recomd h4{ display:block; line-height:3.5; color:#333; font-size:28px; text-transform:uppercase; position:relative;}
.main .recomd em.prev,
.main .recomd em.next{ display:block; width:1.5em; height:1.5em; border-radius:4px; position:absolute; right:0; top:50%; transform:translateY(-50%); cursor:pointer; transition:all ease 0.4s;}
.main .recomd em.prev{ background:#fff url(../images/icons/zoom_prev.png) center no-repeat; margin-right:2em;}
.main .recomd em.next{ background:#fff url(../images/icons/zoom_next.png) center no-repeat;}
.main .recomd em.prev:hover{ background-color:#e60012; background-image:url(../images/icons/zoom_prev_w.png);}
.main .recomd em.next:hover{ background-color:#e60012; background-image:url(../images/icons/zoom_next_w.png);}
.main .recomd .swiper-slide{ display:block; height:100%; font-size:16px; overflow:hidden; position:relative;}
.main .recomd .swiper-slide .box{ overflow:hidden; padding:12px; background:#fff; border:1px solid #ededed;}
.main .recomd .swiper-slide a.pic{ display:block; overflow:hidden;}
.main .recomd .swiper-slide a.pic img{ display:block; width:100%; height:216px; transition:all ease 0.4s;}
.main .recomd .swiper-slide a.title{ display:block; height:3.5em; line-height:1.75; color:#333; text-align:center; margin:1.25em 0 0; transition:all ease 0.4s;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.main .recomd .swiper-slide a.view{ display:block; width:8em; line-height:2; color:#fff; font-size:1.125em; text-align:center; text-transform:capitalize; background:#666; border-radius:1em; margin:0.8em auto; transition:all ease 0.4s;}
.main .recomd .swiper-slide .box:hover a.pic img{ transform:scale(1.05);}
.main .recomd .swiper-slide .box:hover a.title{ color:#e60012;}
.main .recomd .swiper-slide .box:hover a.view{ color:#fff; background:#e60012;}

/*新闻列表*/
.main ul.newsList{ display:block; font-size:16px; overflow:hidden; padding:0 0 68px; margin:-2.25em 0 0;}
.main ul.newsList li{ display:block; overflow:hidden;}
.main ul.newsList li .box{ overflow:hidden; padding:2.25em 0; border-bottom:1px solid #ddd; transition:all ease 0.5s;}
.main ul.newsList li a.pic{ display:block; overflow:hidden; float:left; margin-right:2.25em;}
.main ul.newsList li a.pic img{ display:block; width:290px; height:188px; transition:all ease 0.5s;}
.main ul.newsList li span{ display:block; line-height:188px; color:#e60012; font-size:26px; overflow:hidden; float:right; margin-left:2em;}
.main ul.newsList li a.title{ display:block; line-height:2.7; color:#333; font-size:1.25em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:all ease 0.5s; margin:0 0 0.8em;}
.main ul.newsList li .txt{ display:block; height:4.3em; line-height:2.15; color:#666; font-size:0.875em;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.main ul.newsList li a.more{ display:block; line-height:3.285; color:#e60012; font-size:0.875em; overflow:hidden; margin:0.75em 0 0; float:left;}
.main ul.newsList li:hover .box{ border-color:#e60012;}
.main ul.newsList li:hover a.pic img{ transform:scale(1.12);}
.main ul.newsList li:hover a.title{ color:#e60012; font-weight:bold;}
.main ul.newsList li:hover a.more{ color:#e60012;}

.contact{ display:flex; margin:0 0 80px;}
.contact .map{ max-width:50%; width:630px; overflow:hidden; flex-shrink:0;}
.contact .info{ overflow:hidden; flex:auto;}
.contact .info p{ display:block; line-height:3.125em; color:#333; font-size:16px; padding:1em 0; overflow:hidden;}
.contact .info p img.ico{ display:block; height:3.125em; float:left; margin:0 1.25em 0 0;}
.contact .info p img.code{ display:inline-block; vertical-align:top; height:7.25em; border-radius:0.25em; box-shadow:0 0 15px rgba(167,167,167,0.3); margin:0 0.5em;}


@media only screen and (max-width:1440px){
.topper .tp,
.header .head,
.footer .foot,
.main{ width:1200px;}

.main ul.menu{ margin:20px 30px 60px 0;}

.main .attr h2.title{ font-size:36px; padding:1em 0 0.75em;}

.pages{ font-size:14px;}
.pages span,
.pages a{ min-width:12px; padding:6px 13px;}

.main ul.proList{ margin:0 -15px;}
.main ul.proList li .box{ margin:0 15px 30px;}
.main ul.proList li a.view{ font-size:1.125em;}

.propics{ width:428px;}
.main .prointro a.btn{ margin:2em 0 0;}
}

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

.topper{ display:none;}

.header .head,
.footer .foot,
.main .attr{ width:calc(100% - 30px);}

.header{ position:relative;}
.header h1.logo a img{ height:60px; padding:2px 0; box-sizing:border-box;}
.header a.menu{ display:block; width:24px; height:60px; background:url(../images/common/head_menu.png) center no-repeat; background-size:90% auto; float:right;}
.header a.btn{ display:none;}

ul.nav{ width:36%; height:auto; padding:4px 0; margin:0; background:#f5f5f5; position:absolute; right:-15px; top:60px; transition:transform 0.4s ease !important; transform:translateX(110%) !important; z-index:99;}
ul.nav li{ width:auto; float:none; padding:0;}
ul.nav li a{ display:block; line-height:2.8; color:#333; font-size:15px; font-weight:normal; border-radius:0;}
ul.nav li p.sub{ display:none !important;}
ul.nav li a:hover,
ul.nav li.on a,
ul.nav li.cur a{ color:#e60012; font-weight:normal;}
ul.nav li > a::after{ background:#e60012;}
ul.nav li a:hover::after,
ul.nav li.on a::after{ transform:scale(0,1);}
ul.nav.show{ transform:translateX(0) !important;}

.banner{ height:35vw;}

.footer{ padding:10px 0 0;}
.footer .foot{ display:block;}
.footer dl{ display:block; max-width:none; min-width:0; padding:6px 10px 16px; border-bottom:1px solid rgba(255,255,255,0.4);}
.footer dl:nth-child(2){ display:none;}
.footer .copyright{ padding:1em 15px; font-size:13px;}
.backToTop{ display:none !important;}

.main{ width:auto;}
.main ul.menu{ width:auto; margin:0; flex-direction:row; flex-wrap:wrap; padding:0 15px 8px; float:none; display:flex; justify-content:space-between;}
.main ul.menu li{ width:49%; margin:0 0 2%; padding:0;}
.main ul.menu li a{ border-radius:4px; font-size:12px; height:3.75em;}
.main ul.menu li a img{ display:none;}
.main ul.menu li a span{ padding:0 0.5em;}


.main .attr h2.title{ font-size:22px;}
.main .attr h3.title{ line-height:1.75; font-size:22px; padding:1.25em 0; margin:0.25em 0 0;}
.main .attr p.mark{ font-size:13px; line-height:3;}
.main .attr p.mark font:first-child{ display:none;}
.main .article{ font-size:14px; padding-top:0;}
.main .change{ font-size:14px; padding:1.5em 0; margin:0 0 0.5em;}
.main .change p{ line-height:2.25;}
.main .change p span{ display:none;}

.pages{ font-size:12px; padding:0 0 44px;}
.pages span,
.pages a{ min-width:8px; padding:2px 11px; margin:0 4px;}

.main .intro{ margin:-1em 0 1.5em; font-size:14px;}
.main form.search{ width:auto; padding:0 0 30px;}
.main form.search input.txt{ width:72%; font-size:14px; margin-right:3%;}

.main ul.proList{ margin:0 -6px; font-size:14px; padding:0 0 30px;}
.main ul.proList li{ width:50%;}
.main ul.proList li .box{ margin:0 6px 12px; padding:8px;}
.main ul.proList li a.pic img{ height:auto;}
.main ul.proList li a.title{ line-height:1.5; height:3em; margin:8px 0 0;}
.main ul.proList li a.view{ font-size:13px;}

.propics{ width:auto; float:none; margin:15px 0 0;}
.propics .swiper-container{ margin:14px 0 0;}
.main .prointro{ font-size:14px; padding:30px 0 0;}
.main .prointro h4{ font-size:1.5em;}
.main .prointro .para{ line-height:2;}
.main .prointro a.btn{ margin:1em 0 0;}
.main .prointro a.btn em{ padding:0 2em;}

.main .attr h3.sub{ font-size:16px; margin:2.5em 0 0; line-height:2.5;}
.main .attr h3.sub em{ padding:0 1em;}
.main .attr h3.sub + .article{ padding:1em 1.25em 1.5em;}



.main .recomd{ display:none;}

.main ul.newsList{ padding-bottom:30px;}
.main ul.newsList li{ font-size:14px; margin-bottom:14px;}
.main ul.newsList li .box{ padding:0 4px;}
.main ul.newsList li a.pic{ float:none; margin:0 0 1em;}
.main ul.newsList li a.pic img{ width:100%; height:auto;}
.main ul.newsList li span{ line-height:2; float:none; margin:0; font-size:13px;}
.main ul.newsList li a.title{ line-height:2.5; margin-bottom:0.25em;}
.main ul.newsList li a.more{ line-height:2.75;}



}












/**/