.ht-about-hero {
    --ht-red: #8C1D2C;
    --ht-gold: #B08D57;
    --ht-text: #262422;
    --ht-body: #6F6A64;

    position: relative;
    width: 100%;
    min-height: 430px;

    display: flex;
    align-items: center;

    font-family: "Open Sans", Arial, sans-serif;

    background:
        linear-gradient(
            90deg,
            rgba(25,22,20,.84),
            rgba(25,22,20,.50),
            rgba(25,22,20,.12)
        ),
        url("YOUR-ABOUT-HERO-IMAGE.jpg")
        center center / cover no-repeat;

    color: #fff;
}

.ht-about-hero *,
.ht-about-hero *::before,
.ht-about-hero *::after {
    box-sizing: border-box;
}

.ht-about-hero-inner {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;
    padding: 75px 5%;
}

.ht-about-hero-content {
    max-width: 680px;
}

.ht-about-hero-eyebrow {
    margin-bottom: 18px;

    font-size: 11px;
    line-height: 1;
    letter-spacing: 4px;

    color: rgba(255,255,255,.72);
}

.ht-about-hero h1 {
    margin: 0;

    font-size: 52px;
    line-height: 1.2;
    font-weight: 400;

    letter-spacing: 3px;
}

.ht-about-hero-text {
    max-width: 610px;

    margin: 24px 0 0;

    font-size: 15px;
    line-height: 1.9;

    color: rgba(255,255,255,.84);
}

@media (max-width: 600px) {

    .ht-about-hero {
        min-height: 310px;
    }

    .ht-about-hero-inner {
        padding: 55px 25px;
    }

    .ht-about-hero h1 {
        font-size: 34px;
    }

    .ht-about-hero-text {
        font-size: 13px;
    }
}

/*
=====
轮播图CSS
=====*/
.ht-about-hero {
	position: relative;
	overflow: hidden;
}

/*轮播图*/
.ht-about-hero-slider {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	z-index: 0;
	pointer-events: none;
}

.ht-about-hero-slide {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	opacity: 0;

	transition: opacity 1.2s ease;
}

.ht-about-hero-slide.active {
	opacity: 1;
}

/* 背景图片 */
.ht-about-hero-slide img {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	transform: scale(1.04);

	transition:
		transform 6s ease;
}

.ht-about-hero-slide.active img {
	transform: scale(1);
}

/* 黑夜模式overlay */
.ht-about-hero-overlay {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(25, 23, 22, 0.72) 0%,
			rgba(25, 23, 22, 0.48) 42%,
			rgba(25, 23, 22, 0.18) 100%
		);
}

/* 内容层 */
.ht-about-hero-inner {
	position: relative;

	z-index: 3;
}