@charset "utf-8";
/* CSS Document */

/* Banner外层全屏容器 */

body {
	background: #000000;;
	color: #ffffff;
	font-family: 'MiSans';
}
.banner-wrap {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	/*margin-top:-21px;*/
}
/* 轮播图片容器 */
.banner-list {
	width: 100%;
	height: 100%;
	display: flex;
	transition: transform 0.8s ease-in-out;
}
.banner-item {
	flex-shrink: 0;
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* 新增：让内部文字水平垂直居中 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
}


/* 文字内容容器 从下渐显动画 */
.banner-text-box {
	text-align: center;
	color: #fff;
	z-index: 2;
	/* 无需额外定位，父级flex已实现居中 */
}
/* 切换时重新触发动画类 */
.text-animate {
	animation: textFadeUp 1.2s ease-out forwards;
	transform: translateY(150px);
	opacity: 0;
}
@keyframes textFadeUp {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
/* 主标题 */
.banner-main-title {
	font-family: 'MiSansLight'; 
	font-size: clamp(32px, 8vw, 72px);
	font-weight: 300;
	letter-spacing: 10px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-shadow: 0 0 6px #ffffff;
}
.title-divider {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	opacity: 0.8;
	margin-right: 10px;
}
/* 资质小字 */
.banner-tag-line {
	font-size: clamp(12px, 1.4vw, 15px);
	opacity: 0.65;
	letter-spacing: 5px;
	margin-bottom: 14px;
	white-space: nowrap;
}
/* 副标题 slogan */
.banner-sub-slogan {
	font-size: clamp(14px, 2.8vw, 24px);
	letter-spacing: 8px;
	margin-bottom: 24px;
}
.text-red {
	color: #d81828;
}
/* 业界首创 边框标签 */
.banner-origin-tag {
	display: inline-block;
	padding: 8px 32px;
	border: 1px solid #d81828;
	font-size: clamp(12px, 2vw, 18px);
	letter-spacing: 5px;
}

/* 底部总容器，整组居中 */
.banner-indicator-box {
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 区域3：全屏渐变红线，与指示器底部无缝贴合，屏幕等宽居中 */
.gradient-line {
	width: 100vw;
	height: 1px;
	background: linear-gradient(90deg, #000 0%, #ff2222 50%, #000 100%);
	z-index: 1;
}

/* 区域1：指示器竖条组，紧贴红线，下方预留20px距离给下滚按钮 */
.indicator-group {
	display: flex;
	gap: 10px;
	position: relative;
	z-index: 2;
	padding-bottom: 0;
}

/* 点击热区外层：宽度30px，扩大点击范围，不改变内部线条粗细 */
.indicator-wrap {
	width: 30px;
	display: flex;
	justify-content: center;
	cursor: pointer;
}

/* 核心竖线：强制固定宽度2px，任何状态都不会变粗 */
.indicator-dot {
	width: 2px !important;
	height: 20px;
	background: #ffffff;
	opacity: 0.9;
	transition: all 0.3s ease;
	align-self: flex-end; /* 底部锚定贴合红线 */
}

/* hover状态：仅拉高到44px，线条依旧2px，不变色 */
.indicator-wrap:hover .indicator-dot {
	height: 44px;
	width: 2px !important;
}

/* active选中状态：仅变色+拉高，宽度强制保持2px */
.indicator-wrap.active .indicator-dot {
	height: 44px;
	width: 2.4px !important;
	background: #ff2222;
	opacity: 1;
}

/* 区域2：向下箭头按钮，在指示器下方20px */
.scroll-down-btn {
	width: 30px;
	height: 30px;
	cursor: pointer;
	transition: transform 0.3s ease;
	margin-top: 20px;
}
.scroll-down-btn:hover {
	transform: translateY(6px);
}
.scroll-down-btn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ========== 向下箭头上下跳动动画 ========== */
.scroll-down-btn {
    animation: bounceUpDown 1.8s ease-in-out infinite;
}

@keyframes bounceUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(16px);
    }
    100% {
        transform: translateY(0);
    }
}

/* 鼠标悬停时暂停跳动，保持交互友好 */
.scroll-down-btn:hover {
    animation-play-state: paused;
}
@media screen and (max-width: 768px) {
	/* 轮播内边距加宽，防止文字贴边 */
	.banner-item {
		padding: 0 18px;
	}

	/* 文字容器整体改为左右分区结构 */
	.banner-text-box {
		max-width: 480px;
		width: 100%;
	}

	/* 主标题区域：左右两栏排布 */
	.banner-main-title {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 26px;
		margin-bottom: 18px;
		letter-spacing: 2px;
	}

	/* 左右标题块 */
	.title-left,
	.title-right {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.title-left {
		text-align: left;
	}

	.title-right {
		text-align: right;
	}

	/* 主标题文字大小 */
	.banner-main-title span {
		font-size: clamp(36px, 9vw, 56px);
		font-weight: 300;
		white-space: nowrap;
	}

	/* 中间菱形分隔符 */
	.title-divider {
		width: 30px;
		height: 30px;
		font-size: 16px;
		display: grid;
		place-items: center;
		opacity: 0.8;
	}

	/* 资质小字：单行或多行居中展开 */
	.banner-tag-line {
		font-size: clamp(12px, 1.5vw, 14px);
		line-height: 1.8;
		margin-bottom: 12px;
		text-align: center;
		white-space: normal;
	}

	/* 副标题 */
	.banner-sub-slogan {
		font-size: clamp(16px, 2.5vw, 22px);
		letter-spacing: 1px;
		margin-bottom: 20px;
		text-align: center;
	}

	/* 底部标签 */
	.banner-origin-tag {
		padding: 7px 24px;
		font-size: clamp(14px, 2vw, 16px);
		letter-spacing: 2px;
	}

	/* 底部指示器整体上移 */
	.banner-indicator-box {
		bottom: 18px;
	}

	/* 指示器间距缩小 */
	.indicator-group {
		gap: 6px;
	}

	.indicator-wrap {
		width: 24px;
	}

	.indicator-dot {
		height: 14px;
	}

	.indicator-wrap:hover .indicator-dot,
	.indicator-wrap.active .indicator-dot {
		height: 32px;
	}

	/* 下滑箭头缩小 */
	.scroll-down-btn {
		width: 24px;
		height: 24px;
		margin-top: 12px;
	}
}

@media screen and (max-width: 480px) {
	.banner-main-title span {
		font-size: clamp(30px, 10vw, 48px);
	}

	.title-divider {
		width: 24px;
		height: 24px;
		font-size: 14px;
	}

	.banner-tag-line {
		font-size: 11px;
	}

	.banner-origin-tag {
		padding: 6px 20px;
		font-size: 13px;
	}
}