.hero {width: 100%;   height:clamp(300px, calc( 500 / 1600 * 100vw ), 500px); display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
.hero-bg {
    width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; overflow: hidden;
    background: url('../img/common/sub-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;
    animation: banner 3s both ease-in; transform: scale(1.2); opacity: 0.8;
}
.sub-10 .hero-bg {background-image: url('../img/common/sub-10-bg.png');}
.sub-20 .hero-bg {background-image: url('../img/common/sub-20-bg.png');}
.sub-30 .hero-bg {background-image: url('../img/common/sub-30-bg.png');}
.sub-40 .hero-bg {background-image: url('../img/common/sub-40-bg.png');}
.sub-50 .hero-bg {background-image: url('../img/common/sub-bg-50.jpg');}
@keyframes banner {
	0% {transform: scale(1.2); opacity: 0.8;}
	100% {transform: scale(1); opacity: 1;}
}
.hero::before {content: ''; width: 100%; height: 100%; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 2;}
.hero-title {position: relative; z-index: 2; text-align: center; color: var(--white);}