﻿@charset "gb2312";
<style>/*????????*/.Themebg,.Themebghover:hover,.friendLink,.ThemeBbg,.menu .navbar-nav > li > a:hover,.menu .nav > li ul li a:hover,.product .pro_list li a:hover,.title_x,.p_pro_d .title_d,#ProClass li.ac .Classtriangle,.pro_class_x .product-class li a:hover, .pro_class_x .product-class li a.Themebg,.p_info_d .title_d {
	background-color: #e31917 !important
}

.Themefont,.Themetxthover:hover {
	color: #e31917 !important
}

.ThemeFborder,.Themebdhover:hover,.form .header {
	border-color: #e31917 !important
}

.NavBoxPublic .TriangleBtn:before {
	border-color: #e31917 !important
}

.ThemeFbg {
	background-color: #153F8F !important
}/*????*/.in-more .morep2, .product-con ul li:hover .font_box, .product-con .texticon:before,.article .article-list ul li:hover .article-t p,.information-b-list ul li:hover .font-con:before,.information-b-list ul li:hover .font-con:after {
	background-color: #e31917 !important
}

.in-title-icon i,.information-b-list ul li:hover .font-con-title,.aboutrbg i,.aboutrbg2 i {
	color: #e31917 !important
}

.in-more .morep2,.contact .contact-tel,.information-b-list ul li:hover .font-con {
	border-color: #e31917 !important
}

.in-more a:hover .morep2,.product-nav a:hover, .product-con .font_box, .product-con ul li:hover .texticon:before,.article .article-t p,.tpl_eight,.contact .contact-tel span,.tpl_footers,.friendLink {
	background-color: #153F8F !important
}

.in-title-icon,.in-more .morep1,.in-more a:hover .morep2 {
	border-color: #153F8F !important
}

.topwaveline {
	position: absolute;
	top: -3px;
	width: 100%;
	height: 8px;
	transform-origin: center left;
	transform: rotate(0);
	background: radial-gradient(circle, #153F8F 4px, #153F8F, transparent 4px, transparent 4px, transparent 4px, transparent);
	background-size: 12px 8px
}

.product-con ul li:hover .topwaveline {
	position: absolute;
	top: -3px;
	width: 100%;
	height: 8px;
	transform-origin: center left;
	transform: rotate(0);
	background: radial-gradient(circle, #e31917 4px, #e31917, transparent 4px, transparent 4px, transparent 4px, transparent);
	background-size: 12px 8px
}

.contact .contact-title:after {
	border-top: 40px solid #e31917 !important
}

.information-b .hongtriangle {
	border-bottom: 358px solid #e31917 !important
}

@media screen and (max-width:768px) {
	.information-b .hongtriangle {
		border-bottom: 190px solid #e31917 !important
	}
}

.contact-box .contact-tel {
	border-color: #e31917 !important
}/*????????*/.tpl_six {
	background-image: url(img/256-02.jpg);
	background-repeat: @Pagebg_repeat;
	background-size: cover;
	background-position: center;
	background-color: #153F8F;
	position: relative
}/*????????*/.tpl_four {
	background-image: url(img/256-01.jpg);
	background-repeat: @Pagebg_repeat;
	background-size: cover;
	background-position: center;
	background-color: #153F8F
}

.tpl_six:before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-bottom: 358px solid #e31917;
	border-left: 180px solid transparent
}/*????*/@font-face {
	font-family: 'iconfont';/* project id 1098353 */    src: url('img/font_1098353_iz0l56ozjc.eot');src: url('img/font_1098353_iz0l56ozjc.eot?#iefix') format('embedded-opentype'),    url('img/font_1098353_iz0l56ozjc.woff2') format('woff2'),    url('img/font_1098353_iz0l56ozjc.woff') format('woff'),    url('img/font_1098353_iz0l56ozjc.ttf') format('truetype'),    url('//at.alicdn.com/t/font_1098353_iz0l56ozjc.svg#iconfont') format('svg')
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.icon-star:before {
	content: "\e61b"
}

.icon-59:before {
	content: "\e63a"
}

.icon-dianhua:before {
	content: "\e6a3"
}

.icon-gengduo:before {
	content: "\e648"
}

.icon-jiantou3:before {
	content: "\e659"
}

.icon-icon:before {
	content: "\e652"
}

.icon-arrow-left-copy:before {
	content: "\e614"
}

.icon-zhuanjifenxinzhuce:before {
	content: "\e690"
}

.icon-ai206:before {
	content: "\e6c2"
}

.icon-unie61d-copy:before {
	content: "\e605"
}

.icon-dizhi1:before {
	content: "\e61a"
}

.icon-shijian:before {
	content: "\e607"
}

.icon-liebiao:before {
	content: "\e623"
}

.icon-ziyuan:before {
	content: "\e63b"
}

.icon-xiaoxi:before {
	content: "\e63e"
}

.icon-ren:before {
	content: "\e68d"
}

.icon-dkw_youxiang:before {
	content: "\e60f"
}

.icon-tel1:before {
	content: "\e670"
}

.icon-rou:before {
	content: "\e725"
}

.icon-zhuye:before {
	content: "\e615"
}

.icon-jia:before {
	content: "\e79c"
}

.icon-weixin:before {
	content: "\e600"
}

.icon-jiantou1:before {
	content: "\e61f"
}

.icon-gongsijianjie:before {
	content: "\e61d"
}

.icon-youjian:before {
	content: "\e75d"
}

.icon-yu:before {
	content: "\e61e"
}

.icon-jian:before {
	content: "\e6f6"
}

.icon-shucai:before {
	content: "\e608"
}

.icon-shuiguo:before {
	content: "\e609"
}

.icon-yuandian:before {
	content: "\e7c2"
}

.icon-page-jtright:before {
	content: "\e658"
}

.icon-jiantou:before {
	content: "\e601"
}

.icon-youxiang:before {
	content: "\e603"
}

.icon-gouwuche1:before {
	content: "\e604"
}

.icon-yanjing:before {
	content: "\e68c"
}

.icon-jiang:before {
	content: "\e637"
}

.icon-liebiao1:before {
	content: "\e739"
}

.icon-gengduo1:before {
	content: "\e7a5"
}

.icon-QQ:before {
	content: "\e606"
}

.icon-dizhi:before {
	content: "\e666"
}

.icon-jiantouzuox:before {
	content: "\e602"
}

.icon-hongse:before {
	content: "\e6a0"
}

.icon-hongse1:before {
	content: "\e6a1"
}

.icon-hongse2:before {
	content: "\e6a2"
}/*????*/.list_j4 {
	margin-left: -2%
}

.list_j4 li {
	float: left;
	overflow: hidden;
	position: relative;
	background-color: #fff;
	width: 23%;
	margin: 15px 0 15px 2%;
	transition: all 0.5s
}

.list_j4 li img {
	width: 100%;
	transition: all 0.5s
}

@media screen and (max-width:768px) {
	.list_j4 li {
		width: 31.3%;
		margin: 10px 0 10px 2%
	}

	.tpl_six:before {
		display: none
	}
}

@media screen and (max-width: 414px) {
	.list_j4 li {
		width: 48%;
		margin: 5px 0 5px 2%
	}
}

a:hover {
	color: #e31917
}

.tc {
	text-align: center
}

.tl {
	text-align: left
}

.tr {
	text-align: right
}

.fl {
	float: left !important
}

.fr {
	float: right
}

.clear {
	clear: both
}

.clear_overflow {
	clear: both;
	overflow: hidden
}

.fb {
	font-weight: bold
}

.hidden {
	display: none
}

.w1220 {
	width: 1220px;
	margin: 0 auto;
	font-size: 14px
}

.min1220 {
	min-width: 1220px;
	font-size: 14px
}

.w1440 {
	width: 1440px;
	margin: 0 auto;
	font-size: 14px
}

.min1440 {
	min-width: 1440px;
	font-size: 14px
}

.w100 {
	width: 100%;
	margin: 0 auto !important
}

.w95 {
	width: 95%;
	margin: 0 auto !important
}

.position_r {
	position: relative
}

.mt10 {
	margin-top: 10px
}

.mt20 {
	margin-top: 20px
}

.mt30 {
	margin-top: 30px
}

.mt40 {
	margin-top: 40px
}

.mt50 {
	margin-top: 50px
}

.mt60 {
	margin-top: 60px
}

.mb10 {
	margin-bottom: 10px
}

.mb20 {
	margin-bottom: 20px
}

.mb30 {
	margin-bottom: 30px
}

.mb40 {
	margin-bottom: 40px
}

.mb50 {
	margin-bottom: 50px
}

.mb60 {
	margin-bottom: 60px
}

.ml10 {
	margin-left: 10px
}

.ml20 {
	margin-left: 20px
}

.mr10 {
	margin-right: 10px
}

.mr20 {
	margin-right: 20px
}

.pt10 {
	padding-top: 10px
}

.pt20 {
	padding-top: 20px
}

.pt30 {
	padding-top: 30px
}

.pt40 {
	padding-top: 40px
}

.pt50 {
	padding-top: 50px
}

.pt60 {
	padding-top: 60px
}

.pb10 {
	padding-bottom: 10px
}

.pb20 {
	padding-bottom: 20px
}

.pb30 {
	padding-bottom: 30px
}

.pb40 {
	padding-bottom: 40px
}

.pb50 {
	padding-bottom: 50px
}

.pb60 {
	padding-bottom: 60px
}

.pl10 {
	padding-left: 10px
}

.pl20 {
	padding-left: 20px
}

.pr10 {
	padding-right: 10px
}

.pr20 {
	padding-right: 20px
}

.text1 {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.text2 {
	line-height: 20px;
	max-height: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2
}

.text3 {
	line-height: 20px;
	max-height: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3
}

.text4 {
	line-height: 20px;
	max-height: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4
}

@media screen and (max-width: 1220px) {
	.w100 {
		width: 95%;
		margin: 0 auto !important
	}
}/*????*/.animated {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}/*????????????????????*/@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		-moz-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		transform: none
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		-moz-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-ms-animation-name: fadeInDown;
	animation-name: fadeInDown
}/*????????????????????*/@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		-ms-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none??
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-ms-animation-name: fadeInUp;
	animation-name: fadeInUp
}/*????????????*/@-webkit-keyframes flipInY {
	0% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
	}

	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px)
	}
}

@keyframes flipInY {
	0% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		-ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		-ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		-ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		-ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
	}

	100% {
		-webkit-transform: perspective(400px);
		-ms-transform: perspective(400px);
		transform: perspective(400px)
	}
}

.flipInY {
	-webkit-backface-visibility: visible!important;
	-ms-backface-visibility: visible!important;
	backface-visibility: visible!important;
	-webkit-animation-name: flipInY;
	animation-name: flipInY
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft
}/*????*/@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
	}

	100% {
		-webkit-transform: perspective(400px);
		transform: perspective(400px)
	}
}

@keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0
	}

	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in
	}

	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		-ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1
	}

	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		-ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
	}

	100% {
		-webkit-transform: perspective(400px);
		-ms-transform: perspective(400px);
		transform: perspective(400px)
	}
}

.flipInX {
	-webkit-backface-visibility: visible!important;
	-ms-backface-visibility: visible!important;
	backface-visibility: visible!important;
	-webkit-animation-name: flipInX;
	animation-name: flipInX
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(100%,0,0);
		-ms-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0)
	}

	100% {
		opacity: 1;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight
}

.body-left.ClassLeftBox .product-class li a:hover {
	color: #e31917 !important
}

#ProClassLeft li.ac .Themebg, #md_detailProductClass li.ac .Themebg {
	color: #e31917 !important;
	background: none !important
}</style> 