#banner {
	width: 100%;
	max-height: calc(100vh - 140px);
}

#banner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#banner .swiper-slide-active img {
	animation: breath 6s linear;
}

#banner .banner-text {
	color: #fff;
	position: absolute;
	left: 5%;
	top: 10%;
	width: 50%;
}

#banner .banner-text .banner-longtitle {
	padding: clamp(20px, 1vw, 3vw) 0;
	display: inline-block;
	line-height: 25px;
	font-size: clamp(16px, 0.9vw, 6vw);
}

#banner .banner-text h2 {
	font-size: clamp(25px, 4vw, 6vw) !important;
	margin: 15px 0;
}

#banner .banner-text h3 {
	font-size: clamp(25px, 3vw, 6vw) !important;
	margin: 15px 0;
}

#banner .banner-text h4 {
	margin: 0;
}

@keyframes breath {
	0% {
		transform: scale(1.03);
	}

	100% {
		transform: scale(1);
	}
}

.banner .bannerBox .swiper-pagination .swiper-pagination-bullet {
	border-radius: 0;
	width: 10px;
	height: 10px;
	margin-left: 10px;
	background: #FFFFFF;
	transition: all ease 0.5s;
}

.banner .bannerBox .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	width: 30px;
	background: #1296db;
}

.dian {
	height: 0;
	display: flex;
	align-items: center;
	padding: 0 14px;
	width: fit-content;
}

.dian .dianItem {
	width: 9px;
	height: 9px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.35);
	margin: 0 15px;
	cursor: pointer;
	position: relative;
}

.dian .dianItem svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
}

.dian .dianItem svg .jdt2 {
	transform: rotate(-90deg);
	transform-origin: 13px;
}

.dian .dianItem.on {
	background: #ff0000;
}

.dian .dianItem.on svg {
	opacity: 1;
	transition: ease all 0.75s;
}

.dian .dianItem.on svg .jdt2 {
	animation: jtd2 infinite 6s linear;
}

@keyframes jtd2 {
	0% {
		stroke-dasharray: 0 190;
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dasharray: 190 0;
		stroke-dashoffset: 0;
	}
}

.bannerBot {
	height: 0px;
	display: flex;
	align-items: center;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 72px;
	z-index: 9;
	width: 100%;
}

.bannerBot .bannerLine {
	height: 1px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.15);
}

.bannerBot .bannerLine.line1 {
	width: 8%;
}

.bannerBot .bannerLine.line2 {
	width: 100%;
	flex-shrink: 1;
}

.bannerBot .bannerDown {
	width: 125px;
	flex-shrink: 0;
	text-align: center;
	height: 52px;
	background: url(../images/i2.png) no-repeat 50%;
	overflow: hidden;
	cursor: pointer;
}

.bannerBot .bannerDown img {
	animation: arrow infinite 2s linear;
}

@keyframes arrow {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(200%);
	}
}

.w83 {
	width: 84%;
	margin: 0 auto;
	max-width: 1600px;
}

.bannerBot .bannerNav {
	display: flex;
	align-items: center;
	padding: 0 17px;
	justify-content: center;
}

.bannerBot .bannerNav .bannerNum {
	white-space: pre;
	margin: 0 22px;
	font-size: 17px;
	color: #FFFFFF;
	position: relative;
}

.bannerBot .bannerNav img {
	opacity: 0.35;
	transition: all ease 0.5s;
	cursor: pointer;
}

.bannerBot .bannerNav img:hover {
	opacity: 1;
}

.bannerBot .bannerNav img:focus {
	outline: none;
}

.bannerBot .bannerNav .bannerNum span:before {
	content: '0';
}

.swiper-pagination-fraction {
	bottom: 0 !important;
}

@media screen and (max-width: 768px) {
	#banner .banner-text {
		display: none;
	}

	.bannerBot {
		bottom: 30px !important;
	}
}