a {
	text-decoration: none
}

a:focus,a:hover {
	text-decoration: none
}

a:focus {
	outline: 0
}

p {
	margin: 0
}


.section {
	overflow: hidden;
	height: 100%;
	text-align: center
}

.mainbox3 {
	background: url() center top no-repeat;
	background-size: cover
}


.mbox3Bg {
	background: url(../image/box3bg.jpg) center center no-repeat;
	background-size: cover
}

.mbox3 {
	margin: 0 auto;
	padding: 40px 0 0;
	max-width: 1270px
}

.mbox3Lef {
	float: left;
	width: 45%;
	text-align: left
}

.mbox3Tit {
	margin-bottom: 20px;
	margin-left: 10px;
	max-width: 350px;
	color: #FFF
}

.mbox3Tit .mbox2TitCn,.mbox3Tit .mbox2TitEn {
	color: #FFF;
	line-height: 100%
}

.mbox3Brief {
	overflow: hidden;
	margin: 5px 0 0;
	height: 34px;
	font-size: 12px;
	line-height: 22px;
	opacity: 0;
	transition: all .8s ease 0s;
	transform: translateX(-50px)
}

.active .mbox3Brief {
	opacity: 1;
	transition-delay: .7s;
	transform: translateX(0)
}

.mbox3LefCon {
	position: relative
}

.mbox3LefItem li {
	position: relative;
	padding-bottom: 22px;
	opacity: 0;
	transition: all .8s ease 0s;
	transform: translateY(20px)
}

.mbox3LefItem li:after {
	position: absolute;
	bottom: 0;
	left: 19px;
	display: block;
	width: 1px;
	height: 32px;
	background: rgba(255,255,255,.2);
	content: ""
}

.mbox3LefItem li:last-child:after {
	display: none
}

.mbox3LefItem li a {
	display: block;
	padding: 7px 0;
	height: 100%
}

.mbox3Ico,.mbox3Line,.mbox3Name {
	display: inline-block;
	color: #fefefe;
	vertical-align: top;
	font-size: 12px;
	font-family: Arial;
	line-height: 20px;
	transition: all .6s ease 0s
}

.mbox3Line {
	margin: 6px 20px 0;
	width: 40px;
	height: 1px;
	background: rgba(255,255,255,.2);
	font-size: 0
}

.mbox3H3 {
	margin-bottom: 2px;
	font-size: 16px
}

.mbox3LefItem li.active a .mbox3Line {
	width: 86px
}

.mbox3LefItem li a:hover .mbox3Name,.mbox3LefItem li.active a .mbox3Name {
	color: #ff3431
}

.mbox3Rig {
	position: relative;
	float: right;
	width: 55%;
	min-height: 211px;
	transition: all .6s ease 0s;
	transform: translateX(50%)
}

.box3RigImg img {
	float: right;
	max-width: 70%
}

.box3RigImgItem {
	display: none
}

.box3RigImgItem.active {
	display: block
}

.box3RigText {
	position: absolute;
	right: 60px;
	bottom: 80px;
	padding: 35px 60px;
	width: 100%;
	background: #FFF
}

.box3RigText .swiper-slide {
	text-align: left
}

.mbox3H4 a{
	color: #333;
	font-size: 24px;
	line-height: 120%
}

.mbox3H4 a:hover{
	color: #333;

}

.mbox3Con {
	overflow: hidden;
	margin: 15px 0;
	height: 48px;
	color: #777;
	font-size: 14px;
	line-height: 24px
}
.mbox3Con a{

	color: #777;

}
.mbox3Btn {
	color: #da0502;
	vertical-align: top;
	text-align: left;
	font-size: 24px
}

.mbox3Btn span {
	padding: 0 10px;
	cursor: pointer
}

.mbox3Pause img {
	margin-top: -4px
}

.active .mbox3LefItem li {
	opacity: 1;
	transform: translateY(0)
}

.active .mbox3Rig {
	transition: all .8s ease .3s;
	transform: translateX(0)
}



@media (max-width:1600px) {
	
	.mbox3 {
		margin: 0 auto;
		max-width: 1000px
	}

	.mbox3Tit {
		margin-bottom: 20px;
		margin-left: 0
	}

	.mbox3LefItem li {
		padding-bottom: 20px
	}

	.mbox3LefItem li:after {
		left: 14px;
		height: 20px
	}

	.mbox3LefItem li a {
		padding: 3px 0
	}

	.mbox3Ico {
		width: 30px
	}

	.mbox3H3 {
		margin: 0;
		font-size: 16px
	}

	.mbox3Line {
		margin: 6px 10px 0
	}

	.mbox3LefItem li.active a .mbox3Line {
		width: 65px
	}

	.mbox3Rig {
		min-height: 190px
	}

	.box3RigText {
		right: 40px;
		bottom: 40px;
		padding: 25px 40px
	}

	
@media (max-width:1400px) {

	.mbox3 {
		max-width: 900px
	}

	.mbox3Tit {
		margin-left: 0px
	}

	.mbox3H4 {
		font-size: 20px;
		line-height: 110%
	}

	.box3RigImg img {
		max-width: 65%
	}

	.box3RigText {
		padding: 25px
	}

	.mbox4List {
		padding: 50px 25px 25px
	}

	.mbox4List .swiper-slide {
		padding: 5px
	}


}


@media (max-width:992px) {

	.mbox3 {
		padding: 0 15px;
		width: 100%;
		max-width: 100%
	}

	.mbox3Lef {
		float: none;
		padding-bottom: 30px;
		width: 100%
	}

	.mbox3LefCon {
		padding-left: 40px
	}

	.mbox3Rig {
		float: none;
		overflow: hidden;
		width: 100%
	}

	.mbox3Tit .mbox2TitEn {
		font-size: 24px
	}

	.mbox3Tit .mbox2TitCn {
		font-size: 18px
	}

	.mbox3H4 img {
		display: inline!important;
		max-width: 25px
	}

	.box3RigText {
		position: relative;
		right: auto;
		bottom: auto;
		background: rgba(255,255,255,.9)
	}

	.box3RigImg {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		transform: translateY(-50%)
	}

	.box3RigImg img {
		float: none;
		width: 100%;
		max-width: 100%
	}


}


	

@media (max-width:640px) {


	.mbox3Lef {
		padding: 0
	}

	.mbox3Tit {
		margin-left: 0
	}

	.mbox3LefCon {
		display: none
	}

	.box3RigText {
		padding: 15px
	}

	.mbox3Con {
		margin: 10px 0;
		height: auto
	}

	
}

@media (max-width:460px) {
	
	.mbox3Tit .mbox2TitEn {
		font-size: 18px
	}

	.mbox3Tit .mbox2TitCn {
		font-size: 16px
	}

	.mbox3H4 {
		font-size: 18px
	}

	
}

@media (max-height:414px) {
	
	.mbox3LefCon {
		display: block;
		padding: 0
	}

	.mbox3LefItem li {
		display: inline-block;
		padding: 0;
		width: 48%
	}

	.mbox3LefItem li:after {
		display: none
	}

	.mbox3Ico,.mbox3Line {
		display: none
	}

	.mbox3Rig {
		display: none
	}
}

@media (max-height:240px) {
	

	.mbox3LefCon {
		display: block
	}
}


}