﻿.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: #ce1120;
	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: #ce1120;
}

.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(../images/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(../images/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(../images/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(../images/prev.png) center no-repeat;
	right: 106px;
}

.banners .flex-direction-nav li a.flex-next {
	background: url(../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: #ce1120;
}

.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(../images/icon-stop.png) no-repeat center;
	transition: .3s;
}

.index-banner .stop-loading .s {
	background-image: url(../images/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: #ce1120;
}

.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(../images/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(../images/icon-time.png) no-repeat 0 -23px;
	transition: .3s;
}

#index .news .title {
	color: #333333;
	padding: 20px 0 30px 0;
	line-height: 28px;
}

#index .news .cont {
	line-height: 24px;
	font-size: 14px;
	color: #7b7b7b;
}

#index .news li a:hover .time {
	background-position: 0 3px;
	color: #ce1120;
}

#index .news li a:hover .title {
	color: #ce1120;
}

#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: #ce1120;
}

#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(../images/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(../images/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: #ce1120;
}

#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: 48px;
}

#index .row3 .l .cont {
	width: 292px;
	position: absolute;
	left: 170px;
	top: 84px;
	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: #ce1120;
	color: #fff;
	border-color: #ce1120;
}

#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(../images/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(../images/index-r3-title-bg.png);
}

#index .row3 .r .top .cur:after {
	width: 100%;
	left: 0;
}

#index .row3 .r .top .li1 a {
	background: url(../images/index-r3-title1.png) no-repeat center;
}

#index .row3 .r .top .li2 a {
	background: url(../images/index-r3-title2.png) no-repeat center;
}

#index .row3 .r .top .li3 a {
	background: url(../images/index-r3-title3.png) no-repeat center;
}

#index .row3 .r .top .li4 a {
	background: url(../images/index-r3-title4.png) no-repeat center;
}

#index .row3 .r .m {
	max-height: 690px;
	position: relative;
	background: url(../images/index-about-bg.jpg) repeat;
}

#index .row3 .r .btn {
	width: 40px;
	height: 62px;
	background: #fff url(../images/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: #2e2e2e;
	color: #fff;
	float: right;
}

#index .row4 .t {
	font-size: 18px;
	line-height: 55px;
	height: 55px;
	border-top: 2px solid #999999;
}

#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 #919191;
	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(../images/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(../images/repeat-bg.jpg) repeat;
		color: #fff;
	}
	#index .row5 .first,
	#index .row5 .last {
		background: url(../images/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: #ce1120;
	}
	.index-banner .text .p5 a {
		color: #ce1120;
	}
	.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 #ce1120;
		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;
	}
}