.index-banner {

	width: 100%;

	height: 959px;

	overflow: hidden;

	position: relative;

}



.index-banner .imgs {}



.index-banner .imgs .img {

	width: 100%;

	height: 100%;

	position: absolute;

	left: 0;

	top: 0;

	background-position: center;

}



.index-banner .text {

	width: 600px;

	position: absolute;

	left: 140px;

	top: 190px;

	font-family: '宋体';

	color: #4a4a4a;

}



.index-banner .text p {

	position: relative;

	top: 50px;

	line-height: 1;

	opacity: 0;

	filter: alpha(opacity=0);

}



.index-banner .text .p1 span {

	width: 150px;

	height: 42px;

	line-height: 42px;

	text-align: center;

	background: #b69265;

	border-radius: 15px;

	font-size: 30px;

	color: #fee5c5;

	display: inline-block;

}



.index-banner .text .p2 {

	font-size: 60px;

	color: #06478b;

	padding: 10px 0 30px 0;

	font-family: '微软雅黑';

}



.index-banner .text .p3 {

	font-size: 22px;

	color: #4a4a4a;

	font-weight: bold;

}



.index-banner .text .p4 {

	padding: 5px 0 70px 0;

	color: #4a4a4a;

	line-height: 18px;

}



.index-banner .text .p5 a {

	color: #fff;

	font-size: 14px;

	font-family: '微软雅黑';

	transition: .3s;

}



.index-banner .text .p5 a:after {

	content: '>';

	font-weight: bold;

	font-family: '宋体';

}



.index-banner .text .p5 a:hover {

	color: #06478b;

}



.index-banner .scroll-tip {

	width: 60px;

	height: 50px;

	text-align: center;

	font-size: 14px;

	color: #48480f;

	font-weight: bold;

	position: absolute;

	left: 50%;

	bottom: 20px;

	margin: 0 0 0 -30px;

	background: url(../image/icon-ar.png) no-repeat center bottom;

	animation: tip 1.4s linear infinite;

}



@keyframes tip {

	0% {

		background-position-y: bottom;

	}

	15% {

		background-position-y: 30px;

	}

	30% {

		background-position-y: bottom;

	}

	100% {

		background-position-y: bottom;

	}

}



@-webkit-keyframes tip {

	0% {

		background-position-y: bottom;

	}

	15% {

		background-position-y: 30px;

	}

	30% {

		background-position-y: bottom;

	}

	100% {

		background-position-y: bottom;

	}

}



.banners {

	position: relative;

	overflow: hidden;

}



.banners .bannerbox li {

	height: 100%;

	line-height: 0;

	opacity: 0;

	transition: opacity 1000ms linear;

	-webkit-transition: opacity 1000ms linear;

	float: left;

}



.banners .bannerbox li .bimg {

	line-height: 0;

	width: 100%;

	position: relative;

	transition: transform 5s ease;

	-webkit-transition: transform 5s ease;

	transform: scale(1);

	-webkit-transform: scale(1);

	-moz-transform: scale(1);

}



.banners .bannerbox li.imgIn {

	opacity: 1;

	z-index: 10;

	display: block;

}



.banners .bannerbox li.imgIn .bimg {

	transform: matrix(1.1, 0, 0, 1.1, 0, 0);

	-webkit-transform: matrix(1.1, 0, 0, 1.1, 0, 0);

}



.btext {

	position: absolute;

	left: 13.125%;

	top: 28.3%;

}



.btext img {

	-webkit-transform: perspective(400px) rotateX(90deg);

	transform: perspective(400px) rotateX(90deg);

	opacity: 0;

}



.banners .bannerbox li.imgIn .btext img {

	-webkit-animation: flipInX .8s .2s ease-in-out both;

	-moz-animation: flipInX .8s .2s ease-in-out both;

	-ms-animation: flipInX .8s .2s ease-in-out both;

	animation: flipInX .8s .2s ease-in-out both;

}



.banners .bannerbox li.imgIn .text p {

	top: 0;

	opacity: 1;

	filter: alpha(opacity=100);

	transition: .7s .2s;

}



.banners .bannerbox li.imgIn .text .p2 {

	transition: .7s .3s;

}



.banners .bannerbox li.imgIn .text .p3 {

	transition: .7s .4s;

}



.banners .bannerbox li.imgIn .text .p4 {

	transition: .7s .5s;

}



.banners .bannerbox li.imgIn .text .p5 {

	transition: .7s .6s;

}



.banners .bannerbox li.white .text .p2,

.banners .bannerbox li.white .text .p3 {

	color: #fff;

}



.num {

	position: absolute;

}



.num .cur {

	margin-right: 16px;

}



.muble {

	position: absolute;

	left: 140px;

	bottom: 55px;

	z-index: 20;

}



.muble b,

.muble i {

	display: inline-block;

	float: left;

	font-size: 14px;

	color: #fff;

	font-family: "Arial";

}



.muble i {

	margin: 0 4px;

}



.no-canvas {

	float: left;

	display: none;

}



.loading canvas {

	width: 50px !important;

	height: 50px !important;

}



.numbles {

	position: relative;

	float: left;

	cursor: pointer;

}



.flex-pause {

	display: block;

	z-index: 40;

	width: 16px;

	height: 12px;

	background: url(../image/icon-stop.png) no-repeat center;

	position: absolute;

	left: 156px;

	bottom: 72px;

	text-indent: 888px;

	overflow: hidden;

}



.flex-play {

	display: block;

	z-index: 40;

	width: 16px;

	height: 12px;

	position: absolute;

	left: 156px;

	bottom: 74px;

	text-indent: 888px;

	overflow: hidden;

	background: url(../image/icon-play.png) center no-repeat;

}



.banners .flex-direction-nav li a {

	display: block;

	width: 7px;

	height: 13px;

	text-indent: 999px;

	overflow: hidden;

	position: absolute;

	bottom: 69px;

	z-index: 40;

}



.banners .flex-direction-nav li a.flex-prev {

	background: url(https://www.hnder.cn/static/home/images/prev.png) center no-repeat;

	right: 106px;

}



.banners .flex-direction-nav li a.flex-next {

	background: url(https://www.hnder.cn/static/home/images/next.png) center no-repeat;

	right: 71px;

}



@-webkit-keyframes flipInX {

	0% {

		-webkit-transform: perspective(400px) rotateX(90deg);

		transform: perspective(400px) rotateX(90deg);

		opacity: 0;

	}

	40% {

		-webkit-transform: perspective(400px) rotateX(-10deg);

		transform: perspective(400px) rotateX(-10deg);

	}

	70% {

		-webkit-transform: perspective(400px) rotateX(10deg);

		transform: perspective(400px) rotateX(10deg);

	}

	100% {

		-webkit-transform: perspective(400px) rotateX(0deg);

		transform: perspective(400px) rotateX(0deg);

		opacity: 1;

	}

}



.banners .flex-control-nav {

	width: 100%;

	text-align: center;

	position: absolute;

	left: 0;

	bottom: 20px;

	z-index: 40;

}



.banners .flex-control-nav li {

	display: inline-block;

}



.banners .flex-control-nav li a span {

	width: 10px;

	height: 10px;

	background: #fff;

	border-radius: 50%;

	display: inline-block;

	margin: 0 6px;

	cursor: pointer;

	transition: .3s;

	text-indent: 9999px;

	overflow: hidden;

}



.banners .flex-control-nav li a.flex-active span {

	background: #06478b;

}



.index-banner .loading {

	width: 50px;

	height: 50px;

	position: absolute;

	left: 140px;

	bottom: 55px;

	z-index: 5;

}



.index-banner .loading .num {

	width: 100%;

	text-align: center;

	position: absolute;

	left: 0;

	top: 50%;

	margin: -4px 0 0 0;

	font-size: 14px;

	color: #646464;

	line-height: 12px;

}



.index-banner .loading .s {

	width: 16px;

	height: 12px;

	display: inline-block;

	background: url(../image/icon-stop.png) no-repeat center;

	transition: .3s;

}



.index-banner .stop-loading .s {

	background-image: url(../image/icon-play.png);

}



.index-banner .btns {

	width: 100%;

	text-align: center;

	position: absolute;

	left: 0;

	bottom: 20px;

}



.index-banner .btns span {

	width: 10px;

	height: 10px;

	background: #fff;

	border-radius: 50%;

	display: inline-block;

	margin: 0 6px;

	cursor: pointer;

	transition: .3s;

}



.index-banner .btns .cur {

	background: #06478b;

}



.no-canvas {

	display: none;

}



#index {

	width: 1600px;

	overflow: hidden;

	margin: 80px auto;

}



#index .row1 {

	overflow: hidden;

	margin: 25px 0 0 0;

}



#index .news {

	width: 60%;

	height: 406px;

	float: left;

	background: #fff;

}



#index .news dl {

	margin: 40px 35px 0 35px;

}



#index .news dt {

	height: 50px;

	line-height: 50px;

	margin: 0 0 25px 0;

	font-size: 18px;

	color: #666666;

	border-top: 2px solid #999999;

}



#index .news dt .more {

	width: 90px;

	height: 100%;

	background: url(../image/more.png) no-repeat center;

	float: right;

}



#index .news dd {

	height: 200px;

	position: relative;

	overflow: hidden;

}



#index .news ul {

	width: 9999px;

	position: absolute;

	left: 0;

	top: 0;

}



#index .news li {

	width: 890px;

	font-size: 18px;

	float: left;

}



#index .news li a {

	display: block;

}



#index .news .text {

	margin: 0 40px 0 358px;

	height: 100%;

	overflow: hidden;

}



#index .news .img {

	width: 323px;

	height: 196px;

	float: left;

	overflow: hidden;

}



#index .news .img img {

	width: 100%;

	height: 100%;

	transition: .8s;

}



#index .news .time {

	margin: 5px 0 0 0;

	padding: 0 0 0 22px;

	color: #7b7b7b;

	background: url(../image/icon-time.png) no-repeat 0 -23px;

	transition: .3s;

}



#index .news .title {

	color: #333333;

	margin: 20px 0 30px 0;

	line-height: 28px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

}



#index .news .cont {

	line-height: 24px;

	font-size: 14px;

	color: #7b7b7b;

}



#index .news li a:hover .time {

	background-position: 0 3px;

	color: #06478b;

}



#index .news li a:hover .title {

	color: #06478b;

}



#index .news li a:hover .img img {

	transform: scale(1.1);

	-webkit-transform: scale(1.1);

}



#index .news .btns {

	margin: 45px 0 0 35px;

}



#index .news .btns span {

	width: 12px;

	height: 12px;

	display: inline-block;

	background: #d2d2d2;

	border-radius: 50%;

	float: left;

	margin: 0 10px 0 0;

	cursor: pointer;

}



#index .news .btns .cur {

	background: #06478b;

}



#index .video {

	width: 38%;

	float: right;

	height: 406px;

	position: relative;

}



#index .video .img {

	width: 100%;

	height: 100%;

	background-position: center;

	background-size: cover;

}



#index .video .play {

	position: absolute;

	left: 50%;

	top: 50%;

	margin: -32px 0 0 -32px;

}



#index .row2 {

	padding: 70px 0 60px 0;

	line-height: 26px;

	text-align: center;

	font-size: 14px;

	color: #fff;

	margin: 25px 0;

	overflow: hidden;

	background: url(../image/index-about-bg.jpg) repeat;

}



#index .row2 .text {

	padding: 40px 0 50px 0;

}



#index .row2 .more {

	width: 200px;

	height: 52px;

	line-height: 52px;

	text-align: center;

	font-size: 14px;

	color: #fff;

	display: inline-block;

	text-transform: uppercase;

	border-radius: 50px;

	border: 2px solid #f3d3d5;

	transition: .4s;

}



#index .row2 .more:hover {

	background: #fff;

	color: #bd111c;

	border-color: #bd111c;

}



#index .row3 {

	overflow: hidden;

	margin: 25px 0 0 0;

	background: #fff url(../image/index-r3-bg.jpg) no-repeat left bottom;

}



#index .row3 .l {

	width: 50%;

	float: left;

}



#index .row3 .r {

	width: 50%;

	float: left;

}



#index .row3 .l .top {

	height: 200px;

	background: #2159a4;

}



#index .row3 .l .top img {

	margin: 35px 0 0 45px;

}



#index .row3 .l .m {

	max-height: 690px;

	position: relative;

}



#index .row3 .l .m .text {

	width: 505px;

	height: 280px;

	background: #fff;

	position: absolute;

	right: 0px;

	top: 158px;

	z-index: 1;

	display: none;

	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 27px;

}



#index .row3 .l .brand-title {

	position: absolute;

	left: 65px;

	top: 30px;

}



#index .row3 .l .cont {

	width: 292px;

	position: absolute;

	left: 170px;

	top: 45px;

	font-size: 14px;

	line-height: 26px;

	color: #666666;

}



#index .row3 .l .more {

	width: 122px;

	height: 30px;

	line-height: 30px;

	margin: 20px 0 0 0;

	text-align: center;

	color: #666666;

	border: 2px solid #c1c1c1;

	display: inline-block;

	border-radius: 25px;

	transition: .3s;

}



#index .row3 .l .more:hover {

	background: #06478b;

	color: #fff;

	border-color: #06478b;

}



#index .row3 .r .top {

	height: 200px;

	background: #333333;

}



#index .row3 .r .top ul {

	height: 100%;

}



#index .row3 .r .top li {

	width: 21%;

	padding: 0 2%;

	height: 100%;

	float: left;

	position: relative;

	background: url(../image/index-r3-title-bg2.png) no-repeat center 54px;

	transition: .5s;

}



#index .row3 .r .top li:after {

	content: '';

	width: 0;

	height: 5px;

	overflow: hidden;

	background: #bd7c30;

	position: absolute;

	left: 50%;

	bottom: 0;

	transition: .5s;

}



#index .row3 .r .top a {

	width: 100%;

	height: 100%;

	display: inline-block;

}



#index .row3 .r .top .cur,

#index .row3 .r .top li:hover {

	background-image: url(../image/index-r3-title-bg.png);

}



#index .row3 .r .top .cur:after {

	width: 100%;

	left: 0;

}



#index .row3 .r .top .li1 a {

	background: url(../image/index-r3-title1.png) no-repeat center;

}



#index .row3 .r .top .li2 a {

	background: url(../image/index-r3-title2.png) no-repeat center;

}



#index .row3 .r .top .li3 a {

	background: url(../image/index-r3-title3.png) no-repeat center;

}



#index .row3 .r .top .li4 a {

	background: url(../image/index-r3-title4.png) no-repeat center;

}



#index .row3 .r .m {

	max-height: 690px;

	position: relative;

	background: url(../image/index-about-bg.jpg) repeat;

}



#index .row3 .r .btn {

	width: 40px;

	height: 62px;

	background: #fff url(../image/icon-ar2.jpg) no-repeat 10px center;

	position: absolute;

	right: -10px;

	top: 50%;

	margin: -31px 0 0 0;

	transition: .4s;

}



#index .row3 .r .btn:hover {

	right: 0;

}



#index .row3 .r .imgs {

	/*width:9999px;

	height:100%;

	position:absolute;

	left:0;

	top:0;*/

}



#index .row3 .r .img {

	display: none;

	width: 800px;

	height: 100%;

	position: absolute;

	left: 0;

	top: 0;

	background-position: center;

	background-size: cover;

}



#index .row4 {

	overflow: hidden;

	height: 480px;

}



#index .row4 .l {

	width: 60%;

	height: 100%;

	float: left;

	background-position: center;

	background-size: cover;

}



#index .row4 .r {

	width: 38%;

	height: 100%;

	background: #2159a4;

	color: #fff;

	float: right;

}



#index .row4 .t {

	font-size: 18px;

	line-height: 55px;

	height: 55px;

	border-top: 2px solid #ffffff;

}



#index .row4 .r-box {

	margin: 55px 45px 0 45px;

}



#index .row4 .cont {

	padding: 30px 0 0 0;

	font-size: 14px;

	line-height: 30px;

}



#index .row4 .cont .p1 {

	font-size: 24px;

	margin: 0 0 20px 0;

}



#index .row4 .more {

	width: 200px;

	height: 50px;

	line-height: 50px;

	margin: 50px 0 0 0;

	text-align: center;

	font-size: 16px;

	text-transform: uppercase;

	display: inline-block;

	border-radius: 25px;

	color: #fff;

	border: 2px solid #ffffff;

	transition: .3s;

}



#index .row4 .more:hover {

	background: #fff;

	color: #919191;

	border-color: #fff;

}



#index .row5 {

	overflow: hidden;

	margin: 25px 0 0 0;

}



#index .row5 ul {

	width: 103%;

}



#index .row5 li {

	width: 31%;

	float: left;

	overflow: hidden;

	background: #000;

	margin: 0 2% 0 0;

	position: relative;

	text-align: center;

	font-size: 24px;

	text-transform: uppercase;

}



#index .row5 li a {

	color: #fff;

}



#index .row5 li img {

	width: 100%;

	display: block;

	transition: .7s;

}



#index .row5 .title {

	width: 100%;

	position: absolute;

	left: 0;

	top: 0;

}



#index .row5 .p1 {

	font-size: 18px;

	padding: 30px 0 5px 0;

}



#index .row5 .hide {

	display: none;

}



#index .row5 .last a {

	color: #fff;

}



#index .row5 a:hover img {

	transform: scale(1.1);

	-webkit-transform: scale(1.1);

}



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

	#index {

		width: auto;

		margin: 80px 20px;

	}

}



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

	.index-banner .text {

		left: 80px;

	}

	.index-banner .loading {

		left: 80px;

	}

	.flex-pause,

	.flex-play {

		left: 96px;

	}

	.index-banner .text .p1 span {

		width: 120px;

		height: 34px;

		line-height: 34px;

		font-size: 24px;

	}

	.index-banner .text .p2 {

		font-size: 50px;

		padding: 10px 0 20px 0;

	}

	.index-banner .text .p3 {

		font-size: 20px;

	}

	.index-banner .text .p4 {

		padding: 5px 0 40px 0;

	}

	#index .row4 {

		height: auto;

	}

	#index .row4 .l {

		width: 100%;

		height: 360px;

	}

	#index .row4 .r {

		width: 100%;

		margin: 25px 0 0 0;

		padding: 0 0 40px 0;

		height: auto;

		float: left;

	}

}



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

	#index {

		margin: 20px 20px 10px 20px;

	}

	#index .news {

		width: 100%;

	}

	#index .news {

		height: 360px;

	}

	#index .news .btns {

		display: none;

	}

	#index .video {

		width: 100%;

		margin: 20px 0 0 0;

		float: left;

	}

	#index .row3 .l .top {

		display: none;

	}

	#index .row3 .l .m {

		display: none;

	}

	#index .row3 .r .m {

		display: none;

	}

	#index .row3 .r {

		width: 100%;

	}

	#index .row3 .r .top .cur,

	#index .row3 .r .top li:hover {

		background: url(../image/index-r3-title-bg2.png) no-repeat center 54px;

	}

	#index .row3 .r .top .cur:after {

		display: none;

	}

	#index .row5 li {

		width: 48%;

		height: 120px;

		padding: 20px 0 0 0;

		margin-bottom: 2%;

		background: url(../image/repeat-bg.jpg) repeat;

		color: #fff;

	}

	#index .row5 .first,

	#index .row5 .last {

		background: url(../image/index-about-bg.jpg) repeat;

	}

	#index .row5 .p1 {

		font-size: 14px;

	}

	#index .row5 .last a {

		color: #fff;

	}

	#index .row5 li img {

		display: none;

	}

	#index .row5 .hide {

		display: block;

	}

	#index .row5 .title {

		position: static;

	}

	.banners,

	.banners .bannerbox li,

	.bannerbox {

		height: auto !important;

	}

	.banners .bannerbox li {

		overflow: hidden;

	}

	.banners .bannerbox li .bimg {

		width: 100% !important;

		position: static !important;

		height: auto !important;

	}

	.index-banner .text {

		width: 100%;

		position: relative;

		left: 0;

		padding: 0 5%;

		box-sizing: border-box;

		top: 0;

	}

	.index-banner .text p {

		display: none;

	}

	.index-banner .text .p2 {

		display: block;

		opacity: 1;

		top: 0;

		padding: 20px 0 14px;

		text-align: center;

		font-size: 32px;

	}

	.banners .bannerbox li.imgIn .bimg {

		transform: matrix(1, 0, 0, 1, 0, 0);

		-webkit-transform: matrix(1, 0, 0, 1, 0, 0);

	}

	.index-banner .text .p5 {

		display: block;

		text-align: center;

		opacity: 1;

		top: 0;

		color: #06478b;

	}

	.index-banner .text .p5 a {

		color: #06478b;

	}

	.banner .flex-control-nav {

		bottom: 0;

	}

	.index-banner .loading {

		left: 5%;

		bottom: 20px;

	}

	.flex-pauseplay {

		position: absolute;

		left: 5%;

		width: 50px;

		bottom: 36px;

	}

	.flex-pause,

	.flex-play {

		bottom: 0;

		left: 18px;

	}

}



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

	.index-banner .imgs .img {

		background-position: 30% center;

	}

	.index-banner .loading {

		left: 20px;

	}

	.index-banner .text .p2 {

		font-size: 26px;

	}

	.index-banner .text .p3 {

		font-size: 20px;

	}

	.index-banner .text .p4 {

		padding: 5px 0 40px 0;

	}

	#index {

		margin: 0;

	}

	#index .news {

		height: auto;

	}

	#index .news dl {

		margin: 30px 20px 30px 20px;

	}

	#index .news dt {

		margin: 0;

	}

	#index .news dt .more {

		display: none;

	}

	#index .news dd {

		height: auto;

	}

	#index .news ul {

		width: 100%;

		position: static;

	}

	#index .news li {

		display: none;

		font-size: 14px;

	}

	#index .news li:first-of-type {

		display: block;

	}

	#index .news .img {

		width: 100%;

		margin: 0 0 10px 0;

	}

	#index .news .text {

		width: 100%;

		height: auto;

		margin: 0;

	}

	#index .news .cont {

		display: none;

	}

	#index .news .title {

		padding: 10px 0 0 0;

		line-height: 24px;

	}

	#index .video {

		margin: 0;

		height: 180px;

	}

	#index .row2 {

		margin: 0;

		padding: 40px 0 30px 0;

	}

	#index .row2 .text {

		display: none;

	}

	#index .row2 img {

		width: 200px;

	}

	#index .row2 .more {

		width: 160px;

		height: 40px;

		line-height: 40px;

		margin: 40px 0 0 0;

	}

	#index .row3 {

		margin: 0;

		position: relative;

	}

	#index .row3:after {

		content: '';

		width: 0;

		height: 0;

		border-left: 10px solid transparent;

		border-right: 10px solid transparent;

		border-top: 10px solid #06478b;

		position: absolute;

		left: 50%;

		top: 0;

		margin: 0 0 0 -10px;

	}

	#index .row5 {

		margin: 6px 6px 0 6px;

	}

	.flex-pauseplay {

		left: 19px;

	}

	.banners .flex-control-nav {

		bottom: 10px;

	}

}



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

	#index .row3 .r .top {

		height: auto;

		padding: 40px 0 50px 0;

	}

	#index .row3 .r .top ul {

		margin: 0 10%;

		height: auto;

		overflow: hidden;

	}

	#index .row3 .r .top li {

		width: 50%;

		height: 120px;

		padding: 0;

		background-position: center 24px !important;

		background-size: auto 70% !important;

	}

	#index .row3 .r .top li a {

		background-size: auto 60% !important;

	}

	#index-loading,

	.flex-pauseplay {

		display: none;

	}

}