#page{}
#page .greeting_box{}
#page .greeting_box .pic{width:220px;display:inline-block;float:left;}
#page .greeting_box .pic img{width:100%;}
#page .greeting_box .text_box{margin:0 0 0 250px;}
#page .greeting_box .text_box .name{font-size:22px;white-space:nowrap;margin:0 0 25px;color:#484848;}
#page .greeting_box:after{content:"";clear:both;}

#page .greeting_box.no_pic .text_box{margin:0;}

#content .content_box{margin:50px 0 0 0 !important;}
/* =========================================
   공통: 섹션 타이틀 영역 (.section-header)
========================================= */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-header h3 {
    font-size: 32px;
    font-weight: 800;
    color: #111;
    margin-bottom: 15px;
    margin-top: 0;
}
.section-header p {
    font-size: 18px;
    color: #888; /* 시안에 맞춰 연한 회색 톤으로 적용 */
    font-weight: 400; /* 시안에 맞춰 굵기 조절 */
    line-height: 1.6;
    word-break: keep-all;
    margin: 0;
}

/* =========================================
   모바일 반응형 (768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    .section-header {
        margin-bottom: 40px;
    }
    .section-header h3 {
        font-size: 26px;
        margin-bottom: 15px;
    }
    .section-header p {
        font-size: 15px;
    }
}


/* =========================================
   소개페이지: 메인 타이틀
========================================= */
.intro-main-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: #111;
    line-height: 1.5;
    margin-bottom: 80px;
    margin-top:60px;
}

/* =========================================
   소개페이지: 미션/비전 블록
========================================= */
.mv-block {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto 100px;
}
.mv-block:last-child {
    margin-bottom: 0;
}
/* PC에서 두 번째 블록(비전) 좌우 반전 */
.mv-block.reverse {
    flex-direction: row-reverse;
}

/* 좌/우측 너비 동일하게 분할 */
.mv-img {
    flex: 1;
    width: 100%;
}
.mv-img img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    /* 시안처럼 약간의 깊이감을 주고 싶다면 아래 주석 해제 */
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.05); */
}

.mv-text {
    flex: 1;
    width: 100%;
}
.mv-text .mv-label {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #4da95c; /* 포인트 녹색 */
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.mv-text h3 {
    font-size: 30px;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
    margin-bottom: 30px;
    margin-top: 0;
    word-break: keep-all;
}
.mv-text p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
    margin: 0;
}
.mv-text .kr-desc {
    margin-bottom: 15px;
}
.mv-text .en-desc {
    color: #888;
    font-size: 15px;
}

/* =========================================
   모바일 반응형 (768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    .intro-main-title {
        font-size: 24px;
        margin-bottom: 50px;
    }
    
    /* 모바일에서는 무조건 이미지가 위로 가도록 컬럼 배치 */
    .mv-block, 
    .mv-block.reverse {
        flex-direction: column !important; 
        gap: 30px;
        margin-bottom: 70px;        padding: 0 15px;
    }
    
    /* 모바일 시안 반영: 텍스트 중앙 정렬 */
    .mv-text {
        text-align: center;
    }
    .mv-text .mv-label {
        margin-bottom: 15px;
    }
    .mv-text h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .mv-text p {
        font-size: 15px;
    }
}


/* =========================================
   [섹션 2] 인사말 영역
========================================= */
.greeting-area {
    background-color: #f7f7f7; /* 시안의 연한 회색 배경 */
    padding: 100px 20px;
    margin:80px 0 0 0;
}
.greeting-inner {
    display: flex;
    align-items: center;
    gap: 70px;
    max-width: 1100px;
    margin: 0 auto;
}
.greeting-img {
    flex: 1;
    max-width: 420px;
}
.greeting-img img {
    width: 100%;
    display: block;
    /* 필요시 은은한 그림자 추가 */
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.05); */
}
.greeting-text {
    flex: 1.5;
}
.greeting-text h3 {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    line-height: 1.45;
    margin-bottom: 35px;
    margin-top: 0;
    word-break: keep-all;
}
.greeting-text p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 25px;
    word-break: keep-all;
}
.greeting-text p:last-child {
    margin-bottom: 0;
}
.greeting-text .signature {
    font-weight: 700;
    color: #333;
    margin-top: 40px;
}

/* =========================================
   [섹션 2] 로고 의미 영역
========================================= */
.logo-meaning-area {
    padding: 100px 20px;
    background-color: #fff;
    max-width: 1100px;
    margin: 0 auto;
}
.logo-meaning-area .section-header p {
    color: #999;
}
.logo-img-box {
    text-align: center;
    margin-bottom: 60px;
}
.logo-img-box img {
    max-width: 250px !important;
    width: 100%;
}

/* 박스 카드 그리드 (PC - 가로 3개 균등 배치) */
.logo-cards-wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.logo-card {
    flex: 1;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: box-shadow 0.3s;
}
.logo-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}
.logo-card h4 {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin-top: 0;
    margin-bottom: 15px;
}
.logo-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

/* =========================================
   모바일 반응형 (768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    
    /* 인사말 영역 모바일 */
    .greeting-area {
        padding: 60px 20px;
    }
    .greeting-inner {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    .greeting-img {
        max-width: 70%;
    }
    .greeting-text h3 {
        font-size: 24px;
        margin-bottom: 25px;
    }
    .greeting-text p {
        text-align: center; /* 시안처럼 중앙 정렬 */
    }
    .greeting-text .signature {
        margin-top: 35px;
    }

    /* 로고 의미 영역 모바일 */
    .logo-meaning-area {
        padding: 60px 0; /* 스와이프 여백을 위해 좌우 패딩 제거 */
    }
    .logo-meaning-area .section-header,
    .logo-img-box {
        padding: 0 20px; /* 안쪽 요소들에 다시 패딩 부여 */
    }
    
    .logo-img-box{    width: 35%;   margin: 0 auto 60px;}
    
    .logo-img-box img {
        max-width: 200px;
    }

    /* ★ 로고 카드 가로 스크롤 구현 (모바일) */
    .logo-cards-wrap {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 20px 20px 20px; /* 좌측 시작점 맞춤 및 하단 그림자 여유분 */
        gap: 15px;
        /* 스와이프 시 뚝뚝 끊기며 안착하도록 스냅 기능 추가 */
        scroll-snap-type: x mandatory; 
        -ms-overflow-style: none; /* IE 스크롤바 숨김 */
        scrollbar-width: none; /* Firefox 스크롤바 숨김 */
                margin: 0 0 0 15px;
    }
    .logo-cards-wrap::-webkit-scrollbar {
        display: none; /* Chrome 스크롤바 숨김 */
    }
    .logo-card {
        flex: 0 0 260px; /* 모바일에서 박스 가로폭 고정 (화면보다 살짝 작게) */
        scroll-snap-align: start; /* 안착 지점 */
            padding: 25px 10px;
    }
}


/* =========================================
   [섹션 2] 3. 핵심 가치 (Core Values) 영역
========================================= */
.core-values-area {
    background-color: #f7f7f7;
    padding: 100px 20px;
}
.core-values-area .section-header {
    margin-bottom: 50px;
}
.cv-logo {
    text-align: center;
    margin-bottom: 60px;
}
.cv-logo img {
    max-width: 300px !important;
    width: 100%;
}
.cv-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* 상하좌우 간격 */
    max-width: 900px;
    margin: 0 auto;
}
.cv-item {
    width: 260px; /* PC에서 자연스럽게 위 3개, 아래 2개로 떨어지는 너비 */
    text-align: center;
    padding-top: 25px;
    border-top: 2px solid;
}
.cv-item h4 {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin: 0 0 12px 0;
}
.cv-item p {
    font-size: 14px;
    color: #666;
    margin: 0;
    word-break: keep-all;
}

/* 각 항목별 색상 포인트 */
.color-i { border-top-color: #d93b48; }
.color-i h4 span { color: #d93b48; }

.color-f { border-top-color: #eb5b5b; }
.color-f h4 span { color: #eb5b5b; }

.color-h { border-top-color: #45b08c; }
.color-h h4 span { color: #45b08c; }

.color-m { border-top-color: #e87d3e; }
.color-m h4 span { color: #e87d3e; }

.color-e { border-top-color: #e68c24; }
.color-e h4 span { color: #e68c24; }


/* =========================================
   [섹션 2] 4. 주요 목표 (Main Goal) 영역
========================================= */
.main-goal-area {
    background-color: #fff;
    padding: 100px 20px;
}
.goal-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
/* 중앙 세로선 */
.goal-timeline::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background-color: #4da95c; /* 녹색 선 */
    transform: translateX(-50%);
    z-index: 1;
}

.goal-item {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}
.goal-item:last-child {
    margin-bottom: 0;
}

/* 영어 텍스트 (좌측) */
.goal-en {
    text-align: right;
    font-size: 20px;
    color: #111;
    font-weight: 500;
    line-height: 1.4;
}
.goal-en span {
    font-weight: 800;
    color: #4da95c;
}

/* 녹색 원형 노드 (중앙) */
.goal-node {
    width: 56px; 
    height: 56px;
    background-color: #4da95c;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 800;
    margin: 0 auto;
}

/* 한글 텍스트 (우측) */
.goal-kr {
    text-align: left;
    font-size: 16px;
    color: #666;
    word-break: keep-all;
}
.goal-kr strong {
    color: #111;
    font-weight: 800;
}


#section3,#section4{padding:100px 0;}

/* =========================================
   모바일 반응형 (768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    #content .content_box{margin:20px 0 0 0 !important;}
    /* 핵심 가치 영역 */
    .core-values-area { padding: 60px 20px; }
    .cv-logo img { max-width: 160px !important; }
    .cv-grid {
        flex-direction: column;
        align-items: center;
        gap: 35px;
    }
    .cv-item { width: 100%; max-width: 300px; }

    /* 주요 목표 타임라인 영역 */
    .main-goal-area { padding: 60px 20px; }
    
    .goal-timeline::before {
        /* 모바일에서는 세로선이 좌측 원형 노드 중앙으로 이동 */
        left: 28px; /* 56px(원)의 절반 */
    }
    .goal-item {
        grid-template-columns: 56px 1fr; /* 좌측 아이콘, 우측 텍스트 */
        gap: 20px;
        margin-bottom: 45px;
        align-items: start;
    }
    .goal-en {
        text-align: left;
        grid-column: 2;
        grid-row: 1;
        font-size: 18px;
        margin-bottom: 8px;
        padding-top: 2px;
    }
    .goal-node {
        grid-column: 1;
        grid-row: 1 / span 2; /* 원이 영어/한글 텍스트 두 줄을 모두 감싸도록 설정 */
    }
    .goal-kr {
        text-align: left;
        grid-column: 2;
        grid-row: 2;
        font-size: 15px;
    }
}


/* =========================================
   [섹션 3] 연혁 영역 (History)
========================================= */
.history-area {
    max-width: 800px; /* 시안처럼 좁고 집중도 있게 넓이 제한 */
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. 연도 탭 버튼 (캡슐 형태) */
.history-tabs {
    display: flex;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* 은은한 그림자 */
    margin: 0 auto 50px;
    max-width: 700px;
    overflow: hidden; /* 버튼이 캡슐 밖으로 튀어나가지 않게 */
}
.hist-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 700;
    color: #ccc; /* 비활성화 글씨색 */
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s;
    font-family: inherit;
}
.hist-tab-btn.active {
    background: #4da95c; /* 활성화 녹색 배경 */
    color: #fff;
}

/* 2. 슬라이드 영역 (좌우 쓱쓱 넘어가는 효과) */
.history-slider-wrap {
    overflow: hidden; 
    width: 100%;
    /* 높이가 변할 때 부드럽게 움직이도록 애니메이션 추가 */
    transition: height 0.4s ease-in-out; 
}
.history-slider-track {
    display: flex;
    /* 슬라이드들이 가장 긴 것에 맞춰 늘어나지 않고 각자의 높이를 유지하도록 설정 */
    align-items: flex-start; 
    transition: transform 0.4s ease-in-out; 
    width: 100%;
}
.history-slide {
    flex: 0 0 100%; 
    width: 100%;
    padding: 5px; 
    box-sizing: border-box;
}

/* 슬라이드 내 서브 타이틀 */
.history-subtitle {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 30px;
    color: #111;
}

/* 3. 연혁 카드 디자인 */
.history-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 50px;
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}
.hist-year {
    font-size: 24px;
    font-weight: 900;
    color: #111;
    flex: 0 0 100px; /* 좌측 연도 영역 고정폭 */
}
.hist-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px; /* 각 월별 항목 사이 간격 */
}
.event-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.event-item .month {
    font-size: 15px;
    font-weight: 800;
    color: #111;
}
.event-item .desc {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}
.event-item .desc span {
    color: #999;
    font-size: 14px;
}

/* =========================================
   모바일 반응형 (768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    .history-tabs {
        margin-bottom: 40px;
        border-radius: 16px; /* 캡슐 대신 둥근 사각형으로 변경 */
        flex-wrap: wrap;     /* 가로 스크롤 대신 두 줄로 바꿈 */
        justify-content: center;
    }
    
    .hist-tab-btn {
        flex: 1 1 30%;       /* 한 줄에 3개, 다음 줄에 2개가 꽉 차게 배치 */
        font-size: 14px;
        padding: 12px 10px;
    }
    .history-subtitle {
        font-size: 18px;
        margin-bottom: 25px;
    }
    .history-card {
        flex-direction: column; /* 모바일: 상하 배치 */
        gap: 25px;
        padding: 35px 20px;
        text-align: center; /* 모바일 시안: 모든 텍스트 중앙 정렬 */
    }
    .hist-year {
        flex: auto;
        font-size: 22px;
    }
    .hist-events {
        gap: 25px;
    }
    .event-item {
        align-items: center; /* 내부 아이템도 중앙 정렬 */
    }
    .event-item .desc {
        word-break: keep-all;
    }
}


/* =========================================
   [섹션 4] 오시는 길 영역
========================================= */
.location-area {
    width: 100%;
    background-color: #f7f7f7; /* 시안의 옅은 회색 배경 */
}

.location-inner {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    align-items: stretch; /* 지도와 정보 영역의 높이를 동일하게 맞춤 */
}

/* 좌측 지도 영역 */
.map-box {
    flex: 1;
    min-height: 450px; /* PC 지도 최소 높이 */
    background-color: #e5e3df; /* 지도 로딩 전 임시 배경색 */
}
.map-box iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* 우측 정보 텍스트 영역 */
.info-box {
    flex: 1;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px; /* 각 정보 항목 간의 간격 */
}

.info-item h4 {
    font-size: 20px;
    font-weight: 800;
    color: #111;
    margin-top: 0;
    margin-bottom: 12px;
}
.info-item p {
    font-size: 16px;
    color: #666;
    margin: 0;
    line-height: 1.5;
    word-break: keep-all;
}

/* =========================================
   모바일 반응형 (768px 이하)
========================================= */
@media screen and (max-width: 768px) {
    .location-inner {
        flex-direction: column; /* 모바일에서는 위아래 배치 */
    }
    
    .map-box {
        min-height: 300px; /* 모바일 지도 높이 */
    }
    
    .info-box {
        padding: 50px 20px; /* 모바일 좌우 여백 축소 */
        gap: 35px;
    }
    
    .info-item h4 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .info-item p {
        font-size: 15px;
    }
}