.company-hero {
    min-height: 100vh; /* 필요에 따라 조절 */
    position: relative; /* 오버레이를 추가하기 위한 상대적 위치 지정 */
    background: url('/img/cnjg/035244_881cbe4617f449cab844cb6a48b5fbeb~mv2_d_2475_2475_s_4_2.avif') center 16% no-repeat;
    background-size: cover; /* 화면을 꽉 채우도록 */
    filter: brightness(0.9); /* 이미지 명도 조절 */
}

h1 {
    color: #333; /* 텍스트 색상 */
    text-align: left;
}

h2 {
    color: #333; /* 텍스트 색상 */
    text-align: left;
    margin-top: 100px;
}
.separator {
    height: 80px;
}

h3 {
    color: #fff; /* 텍스트 색상 */
    background-color: rgb(105, 128, 140); /* 텍스트 색상 */
    text-align: left;
    display: inline;
}

.front {
    position: absolute;
    right: 0;
    width: 55%;
    background: rgba(255, 255, 255, 0.9); /* 반투명 흰색 배경 */
    padding: 2rem;
    border-radius: 10px;
    height: 100vh;
    text-align: left;
}

p {
    color: #333; /* 텍스트 색상 */
    width: 300px; /* front의 20% 폭을 차지 */
    word-wrap: break-word; /* 줄바꿈 적용 */
    padding: 10px 0px;
    text-align: left;
}

span {
    color: #333; /* 텍스트 색상 */
    font-size: 1.5rem;
}

span {
    padding-left: 20%; /* 원하는 만큼 오른쪽으로 밀기 */
}

.front img {
    margin-left: 0;
}

.front * {
    margin-left: 30px;
}

@media (max-width: 768px) {
    .front {
        position: absolute;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.9); /* 반투명 흰색 배경 */
        padding: 0;
        border-radius: 0;
        height: 100vh;
        text-align: left;
    }   
}