.banner {
	position: relative;
	background-color: RGBA(246, 246, 246, 1);
}

.banner .swiper-slide {
	position: relative;
	padding: 260px 0 92px;
}

.banner .swiper-slide .slide-box {
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
}

.banner .swiper-slide .slide-box-l {
	position: relative;
	width: 51.07%;
	z-index: 4;
}

.banner .swiper-slide .slide-box-l .title {
	color: #333333;
	line-height: 1.33;
	/* text-transform: uppercase; */
}

.banner .swiper-slide .slide-box-l .des {
	font-size: 18px;
	color: #333333;
	line-height: 1.66;
	margin-top: 2em;
}

.banner .swiper-slide .slide-box-r {
	position: relative;
	width: 47%;
	z-index: 3;
}

.banner .swiper-slide .slide-box-r img {
	/* width: 100%; */
	width: 147.11%;
	transform: translateX(-12.555%);
}

.banner .swiper-pagination {
	bottom: 40px;
}

.banner .swiper-pagination-bullet {
	position: relative;
	width: 36px;
	height: 6px;
	background: #DEDEDE;
	border-radius: 3px;
	opacity: 1;
}

.banner .swiper-pagination-bullet::before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 0;
	height: 100%;
	background-color: rgba(111, 203, 46, 1);
	border-radius: 3px;
}

.banner .swiper-pagination-bullet-active::before {
	width: 100%;
	transition: all 6s;
}

.banner .btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: rgba(204, 204, 204, 1);
	transition: all .6s;
	z-index: 3;
	cursor: pointer;
}

.banner .btn.btn-prev {
	left: 4.32%;
}

.banner .btn.btn-next {
	right: 4.32%;
}

.banner .btn:hover {
	background: #FFFFFF;
	box-shadow: 5px 9px 30px 0px rgba(111, 203, 46, 0.3);
	color: #71D30B;
}

.box1 {
	position: relative;
	padding: 160px 0 220px;
}

.box1 .box-c {
	display: flex;
	justify-content: space-between;
}

.box1 .box-c .l {
	width: 50.71%;
}

.box1 .box-c .l .title {
	line-height: 1.33;
}

.box1 .box-c .l .des {
	font-family: Gotham;
	font-weight: normal;
	font-size: 18px;
	color: #333333;
	line-height: 1.66;
	margin-top: 2em;
}

.banner .commonMore,
.box3 .commonMore,
.box1 .commonMore {
	margin-top: 2.77em;
}

.box1 .r {
	position: absolute;
	right: 0;
	top: 0;
	width: 45.2%;
}

.box1 .r .img1 {
	display: block;
	width: 100%;
}

.box1 .r .player {
	position: absolute;
	left: 37.64%;
	bottom: 45.18%;
	width: 15%;
	cursor: pointer;
}

.box1 .r .player img {
	display: block;
	width: 100%;
	animation: rotate 30s linear infinite;
}

.box1 .r .player:hover img {
	animation-play-state: paused;
}

.box1 .r .player .icon {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	transition: all .6s;
}

.box1 .r .player:hover .icon {
	color: #fff;
}

.box1 .r .player .icon .iconfont {
	font-size: 24px;
}

.box2 .box-c {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	font-family: Gotham;
}

.box2 .box-c .list {
	display: grid;
	gap: 10px;
}

.box2 .box-c .l {
	grid-column: 1/4;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 10px;
}

.box2 .box-c .l .list {
	grid-template-columns: repeat(3, 1fr);
}

.box2 .box-c .r {
	grid-column: 4/7;
}

.box2 .box-c .list li {
	position: relative;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 10px;
}

.box2 .box-c .list li .hoverLi {
	transition: all .6s;
}

.box2 .box-c .list li .hoverLi:hover {
	transform: scale(.95)
}

.box2 .box-c .list li.item a {
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.box2 .box-c .list li.item a.more {
	background: rgba(255, 255, 255, .2);
	border-radius: 10px;
	padding-top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: rgba(51, 51, 51, 1);
	transition: all .6s;
}

.box2 .box-c .list li.item a.more:hover {
	color: #71D30B;
}

.box2 .box-c .list li.item1 {
	grid-column: 1/3;
}

.box2 .box-c .list li a {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
}

.box2 .box-c .list li .img {
	position: absolute;
	left: 0;
	top: 9.25%;
	padding-top: 65.55%;
	width: 100%;
}

.box2 .box-c .list li .img.img1 {
	/* padding-top: 100%; */
	height: 100%;
	top: 0;
}

.box2 .box-c .list li .img .pic {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
}

.box2 .box-c .list li .img.img1 .pic {
	padding: 0;
}

.box2 .box-c .list li .img .pic img {
	max-width: 90%;
	max-height: 90%;
	width: auto;
}

.box2 .box-c .list li .img .pic img:last-child {
	display: none;
}

.box2 .box-c .list li .hoverLi:hover .img .pic img:first-child {
	display: none;
}

.box2 .box-c .list li .hoverLi:hover .img .pic img:last-child {
	display: block;
}

.box2 .box-c .list li .img.img1 img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
}

.box2 .box-c .list li .text {
	position: absolute;
	padding: 0 20px;
	left: 0;
	bottom: 9.25%;
	z-index: 2;
	text-align: center;
	font-family: Gotham;
	font-size: 18px;
	color: #333333;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	transition: all .6s;
}

.box2 .box-c .list li.item1 .text {
	bottom: 6.49%;
}

.box2 .box-c .list li a:hover .text {
	color: #71D30B;
}

.box2 .box-c .r .list {
	grid-template-columns: repeat(2, 1fr);
}

.box3 {
	margin-top: 130px;
	text-align: center;
}

.box3 .title {
	color: rgba(0, 0, 0, 1);
}

.box3 .des {
	color: #71D30B;
	margin-top: 32px;
}

.box3 .text-box {
	font-family: Gotham;
	font-size: 16px;
	color: #333;
	line-height: 1.66;
	margin-top: 14px;
}

.box4 {
	padding: 130px 0 140px;
	text-align: center;
}

.box5 .title,
.box4 .title {
	color: #000;
}

.box5 .des,
.box4 .des {
	margin-top: 20px;
	color: #333;
}

.box4 .box-c {
	margin-top: 30px;
}

.box4 .box-c .list {
	display: flex;
}

.box4 .box-c .list li {
	position: relative;
	width: 19.42%;
	overflow: hidden;
	transition: all .6s;
	border-radius: 20px;
}

.box4 .box-c .list li .text-box {
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translateY(70px);
	padding: 0 20px 30px;
	text-align: left;
	width: 100%;
	transition: all .6s;
}

.box4 .box-c .list li .text-box .text-title {
	color: #FFFFFF;
	line-height: 1.25;
	text-transform: uppercase;
}

.box4 .box-c .list li .pic img {
	display: block;
	height: 554px;
}

.box4 .box-c .list li.active {
	width: 39.57%;
}

.box4 .box-c .list li:not(:last-child) {
	margin-right: .72%;
}

.box4 .box-c .list li .commonMore {
	line-height: 40px;
	font-size: 16px;
	min-width: 100px;
	color: #fff;
	margin-top: 30px;
}

.box4 .box-c .list li.active .text-box {
	transform: translateY(0);
}

.box5 {
	text-align: center;
}

.box5 .des {
	line-height: 30px;
	margin-top: 15px;
}

.box5 .box-c {
	margin-top: 42px;
}

.box5 .box-c .list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 25px;
}

.box5 .box-c .list li .img {
	position: relative;
	padding-top: 56.44%;
}

.box5 .box-c .list li .pic {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
}

.box5 .box-c .list li .text-title {
	font-family: GothamBook;
	font-weight: 400;
	font-size: 16px;
	color: #333;
	line-height: 30px;
	text-align: left;
	margin-top: 35px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all .6s;
}

.box5 .box-c .list li:hover .text-title {
	color: #71D30B;
}

.box6 {
	margin-top: 132px;
}

.box6 .box-c {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.box6 .box-c .l {
	width: 47.5%;
}

.box6 .box-c .l .text-box {
	font-family: GothamBook;
	font-weight: 400;
	font-size: 16px;
	color: #333;
	line-height: 30px;
	margin: 41px 0 68px;
}

.box6 .box-c .r {
	width: 50%;
}

.box6 .box-c .r .pic {
	border-radius: 10px;
}

.box7 {
	padding: 160px 0;
}

.box7 .box-c .pic img {
	display: block;
	margin: 0 auto;
	width: 100%;
	border-radius: 10px;
}
.box7 .box-c .pic img:not(:last-child){
    margin-bottom: 30px;
}
@media (max-width:1700px) {
	.banner .btn.btn-prev {
		left: 2%;
	}

	.banner .btn.btn-next {
		right: 2%;
	}
}

@media (max-width:1600px) {
	.banner .swiper-slide .slide-box {
		padding: 0 70px;
	}

	.box1 {
		padding: 140px 0 180px;
	}
}

@media (max-width:1440px) {
	.banner .swiper-slide {
		padding-top: 230px;
	}

	.banner .swiper-slide .slide-box-l .des {
		margin-top: 1.5em;
	}

	.banner .commonMore,
	.box3 .commonMore,
	.box1 .commonMore {
		margin-top: 2em;
	}

	.box1 {
		padding: 110px 0 150px;
	}

	.box4 .box-c .list li .pic img {
		height: 533px;
	}

	.box4 .box-c .list li .text-box .text-title {
		font-size: 22px;
	}
}

@media (max-width:1280px) {
	.box4 .box-c .list li .pic img {
		height: 474px;
	}

	.box4 .box-c .list li .text-box .text-title {
		font-size: 20px;
	}

	.banner .swiper-slide {
		padding-top: 180px;
	}

	.box1 .box-c .l {
		width: 54%;
	}

	.box1 {
		padding: 90px 0 110px;
	}
}

@media (max-width: 1199px) {

	.box4,
	.box1 {
		padding: 70px 0;
	}

	.box3 {
		margin-top: 70px;
	}

	.box4 .box-c .list li .pic img {
		height: 444px;
	}

	.banner .swiper-slide {
		padding-top: 130px;
	}

	.banner .btn {
		width: 40px;
		height: 40px;
	}

	.banner .swiper-slide .slide-box-l .des {
		margin-top: 1em;
	}

	.banner .commonMore {
		margin-top: 1.5em;
	}

	.banner .swiper-slide .slide-box {
		padding: 0 60px;
	}

	.box1 .box-c .l .des {
		font-size: 16px;
		margin-top: 1em;
	}

	.box1 .commonMore {
		margin-top: 1.5em;
	}

	.box6 {
		margin-top: 70px;
	}

	.box7 {
		padding: 70px 0;
	}
}

@media (max-width: 1024px) {
	.box6 {
		margin-top: 60px;
	}

	.box7 {
		padding: 60px 0;
	}

	.box5 .box-c {
		margin-top: 40px;
	}

	.box4 .box-c .list li .text-box .text-title {
		font-size: 18px;
	}

	.box4 .box-c .list li .text-box {
		transform: translateY(0);
	}

	.box4 .box-c .list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.box4 .box-c .list li,
	.box4 .box-c .list li.active {
		width: 100%;
	}

	.box4 .box-c .list li .pic img {
		height: auto;
		width: 100%;
	}

	.box1 .box-c .l .title {
		font-size: 24px;
	}

	.box1 .box-c .l .des {
		font-size: 14px;
	}

	.box4,
	.box1 {
		padding: 60px 0;
	}

	.box3 {
		margin-top: 60px;
	}

	.banner .swiper-slide .slide-box-l .des {
		font-size: 14px;
	}

	.banner .swiper-pagination {
		bottom: 20px;
	}

	.banner .btn.btn-prev {
		left: 1%;
	}

	.banner .btn.btn-next {
		right: 1%;
	}

	.banner .swiper-pagination-bullet {
		height: 3px;
	}

	.box2 .box-c .list li .text {
		font-size: 16px;
	}

	.box3 .des {
		font-size: 22px;
		margin-top: 25px;
	}
	.box5 .box-c .list li .text-title{
		margin-top: 20px;
	}
	.box6 .box-c .l .text-box{
		margin: 15px 0 25px;
	}
}

@media (max-width: 768px) {
    .box2 .box-c .list li:first-child{
        grid-column: 1/3;
    }
	.box6 .box-c .l{
		width: 100%;
	}
	.box6 .box-c .r{
		width: 100%;
	}
	.box6 .box-c .r{
		margin-top: 30px;
	}
	.box6 .box-c{
		flex-direction: column;
	}
	.box5 .box-c .list li .text-title{
		margin-top: 10px;
	}
	.box6 {
		margin-top: 50px;
	}
	
	.box7 {
		padding: 50px 0;
	}
	
	.box5 .box-c {
		margin-top: 30px;
	}
	.box4 .box-c .list {
		gap: 10px;
	}

	.box4 .box-c .list li .text-box {
		padding: 20px;
	}

	.box4 .box-c .list li .text-box .text-title {
		font-size: 16px;
	}

	.box4 .box-c .list li .commonMore {
		margin-top: 15px;
	}

	.box3 .commonMore {
		margin-top: 1.5em;
	}

	.box3 .des {
		font-size: 20px;
		margin-top: 15px;
	}

	.box2 .box-c {
		grid-template-columns: repeat(1, 1fr);
	}

	.box2 .box-c .l {
		grid-column: 1/1;
	}

	.box2 .box-c .r {
		grid-column: 1/1;
	}

	.box2 .box-c .l .list {
		grid-template-columns: repeat(2, 1fr);
	}

	.box2 .box-c .l .list1 li:last-child {
		grid-column: 1/3;
		grid-template-columns: repeat(2, 1fr);
	}

	.box1 {
		padding-top: 0 !important;
	}

	.box1 .box-c .r,
	.box1 .box-c .l {
		width: 100%;
	}

	.box1 .box-c .r {
		width: 100vw;
		transform: translateX(3%);
	}

	.box1 .box-c {
		flex-direction: column-reverse;
	}

	.box1 .r {
		position: relative;
	}

	.box4,
	.box1 {
		padding: 50px 0;
	}

	.box3 {
		margin-top: 50px;
	}

	.banner .swiper-slide .slide-box {
		flex-direction: column;
	}

	.banner .swiper-slide .slide-box-l {
		width: 100%;
		text-align: center;
	}

	.banner .swiper-slide .slide-box-r {
		width: 100%;
		margin-top: 30px;
	}

	.banner .swiper-slide .slide-box-r img {
		max-width: 100%;
		width: auto;
		transform: translateX(0);
		margin: 0 auto;
	}

	.box1 .box-c .l .title {
		font-size: 22px;
	}
	.box5 .box-c .list{
		grid-template-columns: repeat(2,1fr);
	}
}

@media (max-width:500px) {
	.box6 .box-c .l .text-box{
		line-height: 24px;
	}
	.box6 .box-c .r{
		margin-top: 25px;
	}
	.box5 .box-c .list li .text-title{
		line-height: 24px;
	}
	.box5 .box-c .list{
		grid-template-columns: repeat(1,1fr);
	}
	.box6 {
		margin-top: 40px;
	}
	
	.box7 {
		padding: 40px 0;
	}
	
	.box5 .box-c {
		margin-top: 25px;
	}
	.box5 .des {
		margin-top: 10px;
		line-height: 24px;
	}

	.box4 .des {
		margin-top: 15px;
	}

	.box4 .box-c {
		margin-top: 25px;
	}

	.box4 .box-c .list li .text-box {
		padding: 15px;
	}

	.box4 .box-c .list li .text-box .text-title {
		font-size: 14px;
	}

	.box3 .des {
		font-size: 18px;
	}

	.box3 .text-box {
		font-size: 14px;
	}

	.box1 .box-c .l .title {
		font-size: 20px;
	}

	.box4,
	.box1 {
		padding: 40px 0;
	}

	.box3 {
		margin-top: 40px;
	}

	.banner .btn {
		width: 30px;
		height: 30px;
	}

	.banner .swiper-slide .slide-box {
		padding: 0 40px;
	}
}