@charset "utf-8";

/* --- 애니메이션 --- */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    text-align: center;
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 공통 설정 --- */
.inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
}

.center {
    text-align: center;
}

.text-blue {
    /* color: #00A7F8; */
    color:blue;
    font-weight: bold;
    font-size: 22px;
}

/* 1. 히어로 섹션 */
.a_sec1_hero {
    position: relative;
    width: 100%;
    height: 700px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
}

.hero_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
}

.a_sec1_hero h1 {
    position: relative;
    z-index: 2;
    font-size: 80px;
    color: #fff;
    letter-spacing: 5px;
}

/* 2. 기업 소개 섹션 (White 배경 단독 영역) */
.a_sec2_intro {
    padding: 100px 0;
    background: #fff;
}

.intro_header h2 {
    font-size: 60px;
    color: #111;
    margin-bottom: 20px;
}

.intro_header .sub_title_ko {
    font-size: 24px;
    color: #333;
    margin-bottom: 40px;
}

.intro_header .desc_ko {
    font-size: 19px;
    color: #666;
    line-height: 1.8;
    word-break: keep-all;
}

/* 🎯 2-2. VISION & MISSION 섹션 (bg-vision.jpg 배경 적용 영역) */
.a_sec2_vision {
    padding: 150px 0;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
}

/* 배경 이미지 위 반투명 블랙 오버레이 가림막 */
.a_sec2_vision::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.a_sec2_vision>.inner {
    position: relative;
    z-index: 2;
}

/* VISION / MISSION 타이틀 양식 */
.section_subtitle {
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.section_title {
    font-size: 60px;
    margin-bottom: 0;
    font-weight: 300;
    line-height: 1.3;
}

/* Mission 감싸는 영역 */
.mission_wrap {
    margin-top: 100px;
    margin-bottom: 60px;
}

/* 원형 가치 정렬 그룹 */
.core_circles {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 0;
}

/* 원형 아이템 (반투명 서클 디자인) */
.circle_item {
    width: 220px;
    height: 220px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.circle_item p {
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    padding: 0 20px;
}

/* 3. 연혁 (HISTORY) */
.a_sec3_history {
    padding: 50px 0;
    background: #fff;
}

.a_sec3_history h2 {
    font-size: 50px;
    color: #111;
    margin-bottom: 100px;
}

.timeline_wrap {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
}

.timeline_line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #ddd;
    transform: translateX(-50%);
}

.t_row {
    display: flex;
    width: 100%;
    margin-bottom: 80px;
    align-items: flex-start;
}

/* 연혁 좌우 정렬 설정 */
.t_half {
    flex: 1;
    padding: 0 20px 0 60px;
    text-align: left;
}

.t_center {
    width: 40px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.t_dot {
    width: 16px;
    height: 16px;
    background: #fff;
    border: 3px solid #00A7F8;
    border-radius: 50%;
    margin-top: 15px;
}

.t_row h3 {
    font-size: 48px;
    color: #111;
    margin-bottom: 25px;
}

/* 연혁 리스트 디자인 (Flexbox 기반 정렬) */
.t_row ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 기본 설정 (오른쪽 컨텐츠): [월] [텍스트] 순서로 자연스럽게 정렬 */
.t_row ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 18px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 10px;
    word-break: keep-all;
}

.t_row ul li strong {
    flex-shrink: 0;
}

/* 왼쪽 내용 영역 정렬 처리 */
.text-right {
    text-align: right;
}

/* 💡 [수정] 순서는 무조건 [월][내용]으로 두되, 정렬만 타임라인(오른쪽) 쪽으로 붙도록 변경 */
.t_half.text-right ul li {
    justify-content: flex-end;
}


/* 4. 오시는 길 (LOCATION) */
.a_sec4_location {
    padding: 50px 0 100px 0;
    background-color: #f8f9fa;
}

.a_sec4_location h2 {
    font-size: 50px;
    color: #111;
    margin-bottom: 80px;
}

.map_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.map_card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.iframe_wrap {
    width: 100%;
    height: 400px;
    background: #eee;
}

.map_txt {
    padding: 10px;
    text-align: left;
}

.map_tit {
    font-size: 26px;
    color: #111;
    margin-bottom: 25px;
}

.info_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info_list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 17px;
    color: #666;
    line-height: 1.6;
}

.info_list .label {
    font-weight: 600;
    font-size: 16px;
    color: #333;
    width: 85px;
    flex-shrink: 0;
}

.info_list .value {
    flex: 1;
    word-break: keep-all;
}

.info_list .label_fax {
    width: auto;
    margin-left: 25px;
    margin-right: 15px;
}

/* 모바일 화면(태블릿 이하) 대응 */
@media all and (max-width: 1024px) {
    .a_sec1_hero h1 {
        font-size: 60px;
    }

    .a_sec1_hero {
        height: 250px;
    }

    .a_sec2_vision {
        padding: 100px 0;
    }

    .section_title {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .mission_wrap {
        margin-top: 70px;
        margin-bottom: 40px;
    }

    .core_circles {
        flex-wrap: wrap;
        gap: 30px;
    }

    .circle_item {
        width: 180px;
        height: 180px;
    }

    .circle_item p {
        font-size: 16px;
    }

    .timeline_line {
        left: 30px;
        transform: none;
    }

    .t_row {
        flex-direction: column;
    }

    /* 모바일 화면에서는 연혁 내용 싹 다 왼쪽 정렬로 초기화 */
    .t_half,
    .t_half.text-right {
        padding: 0 0 0 70px !important;
        width: 100%;
        text-align: left !important;
    }

    /* 💡 [수정] 모바일에서는 오른쪽으로 밀었던 설정을 다시 왼쪽(flex-start)으로 리셋 */
    .t_half.text-right ul li {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .t_center {
        position: absolute;
        left: 22px;
        top: 0;
    }

    .t_left.empty {
        display: none;
    }

    .map_grid {
        grid-template-columns: 1fr;
    }
}

/* 모바일 화면(휴대폰 기준) 대응 */
@media all and (max-width: 768px) {
    .info_list li {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .info_list .label {
        flex: 0 0 45px !important;
        width: 45px !important;
    }

    .info_list .label_fax {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }

    .info_list .value {
        flex: 0 0 calc(100% - 45px) !important;
        width: calc(100% - 45px) !important;
        min-width: 0 !important;
    }
}