/* ==========================================================================
   첫화면 HERO ("회사소개서 2024년.pptx" 2페이지 문구/구성 참고 + 기존 어두운 바다 배경(masthead) 유지)
   배경은 header.masthead(styles.css)의 어두운 바다 이미지 + 네이비 오버레이를 그대로 사용하고,
   그 위에 올라가는 텍스트/슬라이더만 이 파일에서 스타일링한다.
   ========================================================================== */
.dk-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 65%;
    margin: 0 auto;
}

.dk-hero-text {
    position: relative;
    width: 42%;
    font-family: 'Arial', sans-serif;
}

/* "디케이" 뒤에 배치되는 옅은 점 격자 장식 (원본 슬라이드의 도트 패턴 참고).
   z-index는 이미 텍스트(1)보다 낮게(0) 설정되어 있어 DOM/레이어 순서상으로는 텍스트 뒤에 있지만,
   "디케이" 글자 자체가 반투명(opacity 0.35)이다 보니 점 무늬의 불투명도(기존 0.45)가 더 높아서
   실제로는 점이 글자보다 더 진하게 보여 "점이 앞에 있는 것처럼" 보이는 문제가 있었다.
   점 무늬 불투명도를 글자보다 확실히 옅게 낮춰서 실제로도 뒤에 있는 것처럼 보이도록 수정. */
.dk-hero-dots {
    position: absolute;
    left: -6px;
    top: -34px;
    width: 92px;
    height: 68px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2.6px, transparent 2.8px);
    background-size: 18px 18px;
    z-index: 0;
}

.dk-hero-brand {
    position: relative;
    z-index: 1;
    margin: 0 0 14px 0;
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.35);
}

.dk-hero-desc {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #f1f5f9;
}

.dk-hero-desc strong {
    color: #8fd0c8;
}

.dk-hero-tagline {
    position: relative;
    z-index: 1;
    max-width: 65%;
    margin: 40px auto 0 auto;
    padding: 14px 20px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    text-align: right;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.dk-hero-tagline strong {
    margin-left: 6px;
    color: #fff;
    font-weight: 800;
}

@media (max-width: 900px) {
    .dk-hero-inner {
        flex-direction: column;
        max-width: 92%;
    }

    .dk-hero-text {
        width: 100%;
        text-align: center;
    }

    .dk-hero-dots {
        left: 50%;
        transform: translateX(-58px);
    }

    .dk-hero-tagline {
        max-width: 92%;
        text-align: center;
    }
}

/* 전체 컨테이너 */
.contain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    max-width: 65%;
    margin: 0 auto;
}

/* 텍스트 섹션 */
.text-section {
    width: 40%;
    font-family: 'Arial', sans-serif;
}

.text-section h2 {
    font-size: 24px;
    color: #333;
    line-height: 1.5;
}

/* 슬라이더 섹션 */
.slider-section {
    width: 55%;
    position: relative;
}

.slider {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
}

.slides {
    display: flex;
    width: 100%;
    height: 300px;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.slide img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
    /* 이미지를 슬라이드에 맞추되 잘리지 않도록 설정 */
    border-radius: 10px;
    /* 이미지 모서리를 둥글게 처리 */
}

/* 인증서 소개 영역 (텍스트 + 아이콘) */
.cert-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px;
}

.cert-icon-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.cert-icon-item {
    width: 140px;
}

.cert-icon-item img {
    width: 100%;
    height: auto;
}

/* 반응형: 히어로 배너와 인증서 영역을 세로로 쌓기 */
@media (max-width: 900px) {
    .contain {
        flex-direction: column;
        max-width: 92%;
        padding: 20px 0;
    }

    .text-section,
    .slider-section {
        width: 100%;
    }

    .text-section h1 {
        font-size: 1.5rem;
        text-align: center;
    }

    .slides {
        height: 220px;
    }

    .cert-section {
        flex-direction: column;
    }

    .cert-icon-item {
        width: 110px;
    }
}

/* 양옆의 버튼 */
/* button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
}

button.prev {
    left: 10px;
}

button.next {
    right: 10px;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
} */