/* =========================================
   SECTION INTRO 01 (연혁/수상내역 타임라인)
========================================= */

/* 1. 기본 섹션 설정 및 중앙 세로줄 생성 */
section.intro_01 {
    position: relative;
    clear: both; 
    overflow: hidden; 
    width: 100%; 
    padding: 50px 0 80px 0; 
}

/* 중앙 세로선 서브픽셀 정밀 정렬 */
section.intro_01::before {
    content: '';
    position: absolute;
    top: 50px; 
    bottom: 80px; 
    left: 50%;
    width: 2px; 
    background-color: #ddd; 
    transform: translateX(-50%); 
    z-index: 1;
}

/* 2. 개별 항목(.pro) 영역 설정 */
section.intro_01 div.pro {
    position: relative;
    z-index: 2; 
    width: 1100px; 
    margin: 0 auto; 
    clear: both;
}

section.intro_01 div.proR {
    padding: 50px 0; 
    overflow: hidden;
}

/* 3. 좌우 레이아웃 (중앙 여백 10% 확보를 위해 45%로 설정) */
section.intro_01 div.pro_img { float: left; width: 45%; }
section.intro_01 div.pro_txt { float: right; width: 45%; }

section.intro_01 div.proR div.pro_img { float: right; width: 45%; }
section.intro_01 div.proR div.pro_txt { float: left; width: 45%; text-align: right;}

/* 4. 데스크탑 이미지 비율 유지 및 크기 고정 */
section.intro_01 div.pro_img img {
    width: 100%;
    height: 373px; 
    object-fit: contain; 
}

/* 5. 텍스트 및 버튼 스타일 */
section.intro_01 div.pro_txt h2 {
    position: relative; 
    margin: 0; /* 브라우저 기본 마진 제거 */
    font-size: 26px; 
    padding: 20px 0;
}
section.intro_01 div.pro_txt p {
    font-size: 15px; 
    line-height: 30px; 
    padding-bottom: 20px;
}
section.intro_01 div.btn { padding-top: 20px; }
section.intro_01 a { 
    border: 1px solid #ccc;  
    padding: 10px 16px 12px 16px; 
    font-size: 17px;  
    margin-top: 20px;  
    border-radius: 6px;
    display: inline-block;
}
section.intro_01 a:hover { 
    color: #333;  
    background-color: #f0f0f0; 
}

/* 6. 타임라인 노드(점) 위치 및 디자인 (Transform 중앙 정렬) */
section.intro_01 div.pro div.pro_txt h2::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -55px; /* 텍스트 컨테이너(45%)와 중앙선(50%)의 정확한 거리 */
    width: 14px;
    height: 14px;
    background-color: #333;
    border: 3px solid #fff;
    border-radius: 50%;
    /* margin 대신 transform을 사용하여 요소 크기에 상관없이 정중앙에 배치 */
    transform: translate(-50%, -50%); 
    z-index: 3;
}

section.intro_01 div.pro.proR div.pro_txt h2::after {
    left: auto; 
    right: -55px; 
    transform: translate(50%, -50%); 
}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
    section.intro_01 { 
        text-align: center;  
        padding: 35px 15px 60px 15px;  
    }
    
    /* 모바일에서는 중앙선과 점을 숨김 처리 */
    section.intro_01::before,
    section.intro_01 div.pro div.pro_txt h2::after {
        display: none; 
    }

    section.intro_01 div.pro { width: 100%; margin: 0 auto; }
    
    /* 플로팅 해제 및 1열 배치 */
    section.intro_01 div.pro_img,
    section.intro_01 div.proR div.pro_img,
    section.intro_01 div.pro_txt,
    section.intro_01 div.proR div.pro_txt { 
        float: none; 
        width: 100%; 
        clear: both; 
        text-align: center;
    }
    
    /* 모바일 이미지 반응형 처리 */
    section.intro_01 div.pro_img img {
        width: 100%;
        height: auto; 
        max-height: 373px; 
    }
    
    section.intro_01 div.pro_txt h2 { font-size: 25px; padding: 20px 0; }
    section.intro_01 div.pro_txt p { font-size: 15px; line-height: 30px; padding-bottom: 42px; }
    section.intro_01 div.btn { padding-top: 0px; margin-bottom: 50px; }
}

@media (max-width: 768px) {}
@media (max-width: 640px) {}
@media (max-width: 480px) {}
@media (max-width: 320px) {}