.hero {width: 100%; height: clamp(300px, calc( 500 / 1600 * 100vw ), 500px); padding-top: var(--header-height); display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; z-index: 2; /* 물결 배경 침범 방지 */ overflow: hidden; text-align: center;}
.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;
}

:is(.about, .history, .certifications) .hero-bg {background-image: url('../img/common/bg-about.jpg');}
:is(.mission, .philosophy, .esg) .hero-bg {background-image: url('../img/common/bg-about.jpg');}
:is(.logistics, .global) .hero-bg {background-image: url('../img/common/bg-business.jpg');}
.contact .hero-bg {background-image: url('../img/common/bg-contact.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.53); z-index: 2;}

.hero-sub {color: var(--green400); font-size: 1.25rem; font-weight: 780; line-height: 130%; letter-spacing: var(--ls);}
.hero-sub + .hero-title {margin-top: 5px;}
.hero-title {position: relative; z-index: 2; color: var(--white);}

.hero-desc {color: var(--white); margin-top: 1.4em; position: relative; z-index: 2;}


/* 영문 */
html:lang(en) .hero-sub {display: none;}
/* //영문 */