/*~~~~~~~technicalsupport.html~~~~~~~~*/

/* 공통 여백 */
.section-padding { padding: 120px 0; background-color:rgba(255, 255, 255, 1); }
.purple-text { color: #6C3BFF; }
.section-title { text-align: center; font-size: 36px; font-weight: 800; margin-bottom: 20px; }

/* 1. 히어로 */
.techsup-hero {  position: relative; width: 100%; height: 550px; overflow: hidden; }
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; }



.inner {
    width: 100%;
    max-width: 1400px; /* 시안의 콘텐츠 가로폭 기준 */
    margin: 0 auto;    /* 중앙 정렬 */
    padding: 0 160px;   /* 좌우 패딩: 화면이 작아질 때 여백 확보 */
    box-sizing: border-box;
}

/* 텍스트와 이미지 배치 */
.intro-wrap {
    display: flex;
    gap: 40px;         /* 텍스트와 이미지 사이의 간격 */
    align-items: center;
    
}
/* Service Overview 스타일 */
.service-overview h2{
	color:rgba(0, 0, 0, 1);
	font-family: Pretendard;
font-weight: 700;
font-style: Bold;
font-size: 30px;

letter-spacing: 0%;
text-align: center;
	
}
.overview-intro { text-align: center; margin-bottom: 60px; color: #666; font-size: 18px; }
.overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 2px solid #333; padding-top: 40px; }
.overview-column strong { display: block; font-size: 20px; margin-bottom: 25px; color: #000; }
.overview-column ul { list-style: none; padding: 0; }
.overview-column li { margin-bottom: 15px; color: #555; line-height: 1.6; position: relative; padding-left: 15px; }
.overview-column li::before { content: "•"; position: absolute; left: 0; color: #6C3BFF; }

/* 제목 스타일 수정: 시안처럼 폰트 두께와 간격 미세 조정 */
.service-overview h2 {
    color: #000;
    font-weight: 700;
    font-size: 32px; /* 30px에서 시안 느낌으로 소폭 조정 */
    margin-bottom: 24px;
}

.overview-intro {
    font-size: 16px; /* 18px보다 시안처럼 조금 더 작게 */
    line-height: 1.6;
    margin-bottom: 80px;
}

/* 그리드 상단 선 수정 */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1.5fr; /* 시안처럼 '주요내용' 컬럼을 넓게 배분 */
    gap: 60px; /* 열 사이 간격 확대 */
    border-top: none; /* 전체 상단 선 제거 */
    padding-top: 0;
}

/* 각 열의 제목(Strong) 스타일 및 하단 선 추가 */
.overview-column strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 2px solid #000; /* 시안처럼 각 열 제목 아래에만 선 추가 */
    color: #000;
}

/* 리스트 스타일: 블릿 제거 및 행 높이 일치 */
.overview-column ul {
    list-style: none;
    padding: 0;
}

.overview-column li {
    font-size: 15px;
    color: #333;
    line-height: 1.2; /* 시안처럼 한 줄씩 깔끔하게 정렬 */
    margin-bottom: 35px; /* 행 사이 간격을 넓혀서 옆 열과 라인 맞춤 */
    height: 18px; /* 텍스트 시작 높이를 강제로 맞춰 수평 라인 유지 */
    display: flex;
    align-items: center;
}

/* 블릿 기호 제거 */
.overview-column li::before {
    display: none; /*  제거 */
}



/* 서비스 프로세스 스타일 */
.bg-light { background-color: #fff; }
.sub-title { font-size: 28px; font-weight: 700; margin-bottom: 50px; color:rgba(0, 0, 0, 1); }
.process-container { position: relative; padding-left: 50px; }

/* 세로 라인 */
.process-line { 
    position: absolute; left: 68px; top: 0; bottom: 0; 
    width: 2px; background: #e0e0e0; z-index: 1;
}

.process-list { display: flex; flex-direction: column; gap: 50px; position: relative; z-index: 2; }

.process-item { display: flex; align-items: flex-start; gap: 40px; position: relative; /* 이거 추가 */ }

/* 단계 원형 아이콘 */
.process-item .step { 
    width: 36px; height: 36px; background: #6C3BFF; color: #fff; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; flex-shrink: 0;
}

.process-item .content h4 { font-size: 20px; margin-bottom: 10px; color: #333; }
.process-item .content p { color: #777; line-height: 1.5; }


/* 섹션 공통 */
.sub-title { 
    font-size: 24px; 
    font-weight: 700; 
    margin-bottom: 60px; 
    border-bottom: 1px solid #000; /* 시안 상단 라인 */
    padding-bottom: 20px;
}

.process-container { position: relative; padding-top: 40px; }

/* 세로 라인 위치 조정 */
.process-line { 
    position: absolute; left: 228px; top: 0; bottom: 0; 
    width: 1px; background: #D6C7FF; z-index: 1;
}

.process-list { display: flex; flex-direction: column; gap: 80px; }

.process-item { 
    display: flex; 
    align-items: flex-start; 
    position: relative; 
    z-index: 2; 
}

/* STEP 번호와 점(Node) */
.step-node { 
    display: flex; 
    align-items: center; 
    width: 280px; /* 라인 위치까지의 거리 */
    flex-shrink: 0;
}

.step-node .dot { 
    width: 10px; height: 10px; background: #6C3BFF; 
    border-radius: 50%; margin-right: 40px; 
    margin-left: 223px; /* 라인과 일치하도록 조정 */
}

.step-num { font-size: 22px; font-weight: 800; color: #6C3BFF; width: 40px; }

/* 제목 영역 */
.step-title { 
    font-size: 18px; 
    font-weight: 600; 
    color: #333; 
    width: 200px; 
    flex-shrink: 0; 
    padding-top: 2px;
}

/* 상세 설명 영역 */
.step-desc { flex-grow: 1; }
.step-desc ul { list-style: none; padding: 0; margin: 0; }
.step-desc li { 
    font-size: 16px; 
    color: #555; 
    margin-bottom: 8px; 
    position: relative; 
    padding-left: 15px; 
}
.step-desc li::before { content: "•"; position: absolute; left: 0; }

/* 하이라이트(화살표) 스타일 */
.step-desc li.highlight { 
    color: #333; 
    font-weight: 500; 
    padding-left: 0; 
    margin-top: 10px; 
}
.step-desc li.highlight::before { display: none; }


/* 세로 라인 기준 위치 */
.process-line { 

    
 

position: absolute;
    left: 200px;
    top: 0;
    bottom: 0;
    width: 2px;

    background: linear-gradient(
        to bottom,
        rgba(193, 169, 239, 0.3) 0%,
        #5D13EA 40%,
        #5D13EA 60%,
        rgba(193, 169, 239, 0.3) 100%
    );    
    
}

/* 점과 숫자를 묶은 그룹 */
.node-group {
    position: absolute;
    /* 라인 위치(200px)와 동일하게 설정 */
    left: 200px; 
    display: flex;
    align-items: center;
    /* 점의 너비 절반(5px)만큼 왼쪽으로 이동시켜 선 정중앙에 배치 */
     transform: translateX(-72.5%);
    gap: 25px; 
    z-index: 3;
}

.step-dot {
    width: 10px;
    height: 10px;
    background-color: #6C3BFF;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-num {
    font-size: 22px;
    font-weight: 800;
    color: rgba(93, 19, 234, 1);
    line-height: 1;
}

/* 텍스트 내용 전체 영역 (숫자 이후부터 시작) */
.step-content {
    display: flex;
    margin-left: 280px; /* 점으로부터 텍스트가 시작될 충분한 여백 */
    width: 100%;
}

.step-title {
    width: 220px; /* 제목 너비 고정 */
    font-size: 18px;
    font-weight: 700;
    color: #000;
    flex-shrink: 0;
}

.step-desc {
    flex: 1;
}




.location-section {
	background-color:#fff;
}

/* 지도 */
.map-wrap {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.map-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.9);
}

/* 살짝 흐린 오버레이 */
.map-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.6);
}

/* 마커 */
.map-marker {
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -100%);
}

.map-marker::before {
    content: "";
    width: 14px;
    height: 14px;
    background: #6C3BFF;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}

.map-marker span {
    display: block;
    margin-top: 6px;
    font-weight: 700;
    color: #000;
}

/* 하단 정보 */
.location-info {
	

	
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    align-items: flex-start;
}

.company h3 {
    font-size: 24px;
    font-weight: 800;
    color:rgba(0, 0, 0, 1);
    font-family: Pretendard;
font-weight: 700;
font-style: Bold;


letter-spacing: 0%;
    
}

.info-list {
    width: 400px;
}

.info-row {
    display: flex;
    margin-bottom: 12px;
}

.label {
    width: 80px;
    font-weight: 700;
    color: #000;
}

.value {
    color: #555;
}



/*연락처 부분*/

.contact-section {
    background: #fff;
}
.contact-section .sub-title {
    border-bottom: none;
    padding-bottom: 0;
}
/* 테이블 래퍼 */
.contact-table-wrap {
    margin-top: 40px;
    border-top: 2px solid #000; /* 상단 굵은 라인 */
}

/* 테이블 기본 */
.contact-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 헤더 */
.contact-table thead th {
    background: #f3f3f3;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    padding: 18px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(136, 136, 136, 1);
    border-right: 1px solid rgba(136, 136, 136, 1);
}

/* 바디 */
.contact-table tbody td {
    padding: 18px 10px;
    font-size: 14px;
    color: #555;
    text-align: center;
    border-bottom: 1px solid rgba(136, 136, 136, 1);
    border-right: 1px solid rgba(136, 136, 136, 1);
}

/* 좌측 정렬 (부서명 & 담당) */
.contact-table tbody td:first-child,
.contact-table tbody td:last-child {
    text-align: center;
    padding-left: 20px;
      
}
.contact-table tbody td:last-child {
	border-right:none;
}
/* 컬럼 비율 (시안 맞춤) */
.contact-table colgroup col:nth-child(1) { width: 20%; }
.contact-table colgroup col:nth-child(2) { width: 20%; }
.contact-table colgroup col:nth-child(3) { width: 20%; }
.contact-table colgroup col:nth-child(4) { width: 40%; }

/* 호버 효과 */
.contact-table tbody tr:hover {
    background: #fafafa;
}
.pc-only {
    display: table-cell;
}

.mobile-only {
    display: none;
}

/*mobile*/

@media (max-width: 768px) {

    .inner {
        padding: 0 20px;
    }

    .section-padding {
        padding: 60px 0;
    }
       .overview-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .overview-column strong {
        font-size: 16px;
    }

    .overview-column li {
        font-size: 14px;
        height: auto; /*  강제 높이 제거 */
        margin-bottom: 12px;
    }

    .overview-intro {
        font-size: 14px;
    }
        .process-container {
        padding-left: 0;
    }

      .process-container {
        position: relative;
        padding-left: 40px;
    }

    .process-line {
        display: block; /* 🔥 다시 살림 */
        position: absolute;
        left: 16px;
        top: 0;
        bottom: 0;
        width: 2px;

        background: linear-gradient(
            to bottom,
            rgba(193, 169, 239, 0.3) 0%,
            #5D13EA 40%,
            #5D13EA 60%,
            rgba(193, 169, 239, 0.3) 100%
        );
    }
    
      .process-item {
        position: relative;
        padding-left: 30px;
        margin-bottom: 50px;
    }
      .node-group {
        position: absolute;
        left: 0;
        top: 0;

        transform: translateX(-50%); /* 라인 중앙에 맞춤 */
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .step-dot {
        width: 10px;
        height: 10px;
        background: #5D13EA;
        border-radius: 50%;
    }

    .step-num {
        font-size: 16px;
        font-weight: 700;
        color: #5D13EA;
    }
    
    
       .step-content {
        margin-left: 0;
        flex-direction: column;
        gap: 8px;
    }

    .step-title {
        font-size: 16px;
        font-weight: 700;
    }

    .step-desc li {
        font-size: 14px;
        line-height: 1.6;
    }
    
     .map-wrap {
        height: 250px;
    }

    .location-info {
        flex-direction: column;
        gap: 20px;
    }

    .info-list {
        width: 100%;
    }

    .company h3 {
        font-size: 18px;
    }

    .info-row {
        font-size: 14px;
    }
	
    /* 🔥 테이블 해체 */
    .contact-table thead {
        display: none;
    }

    .contact-table,
    .contact-table tbody {
        display: block;
        width: 100%;
    }

    /* 🔥 row → 카드 */
    .contact-table tr {
        display: flex;
        flex-direction: column;

        padding: 20px 0;
        border-bottom: 1px solid #ddd;
        gap: 6px;
    }

    /* 🔥 td 초기화 */
    .contact-table td {
        display: block;
        width: 100%;
        border: none !important;
        padding: 0;
    }

    /* =========================================
       1️⃣ 부서명
    ========================================= */
    .contact-table td:first-child {
        order: 1;

        font-size: 18px;
        font-weight: 700;
        color: #111;
    }

    /* =========================================
       2️⃣ 담당
    ========================================= */
    .contact-table td:last-child {
        order: 2;

        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
    }

    /* =========================================
       3️⃣ PC TEL/FAX 숨김
    ========================================= */
    .pc-only {
      display: none !important; 
    }

    /* =========================================
       4️⃣ 모바일 TEL/FAX 표시
    ========================================= */
    .mobile-only {
        display: block;
        order: 3;
        margin-top: 10px;
    }

    /* =========================================
       5️⃣ TEL / FAX 2열 구조
    ========================================= */
    .tel-fax {
        display: flex;
        gap: 12px;
    }

    .tel-fax .tel,
    .tel-fax .fax {
        width: 50%;
        display: flex;
        flex-direction: column;
    }

    /* 라벨 */
    .tel-fax .label {
        font-size: 12px;
        color: #999;
        margin-bottom: 4px;
    }

    /* 값 */
    .tel-fax .value {
        font-size: 14px;
        color: #333;
    }

    /* =========================================
       정렬 깨짐 방지
    ========================================= */
    .contact-table,
    .contact-table td {
        text-align: left !important;
        margin-left:0px;
    }
   /* 🔥 td 초기화 */
    .contact-table td {
        display: block;
        width: 100%;
        border: none !important;
        /* 기존 padding: 0; 에서 좌우 여백을 확실히 없애기 위해 !important를 추가합니다 */
        padding: 0 !important; 
    }

    /* =========================================
       1️⃣ 부서명
    ========================================= */
    .contact-table td:first-child {
        order: 1;

        font-size: 18px;
        font-weight: 700;
        color: #111;
        
        /* 혹시 모를 내부 마진이나 브라우저 기본 패딩 확실히 리셋 */
        margin-left: 0;
        padding-left: 0;
    }

    /* =========================================
       2️⃣ 담당
    ========================================= */
    .contact-table td:last-child {
        order: 2;

        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
        
        /* 부서명과 동일하게 왼쪽 시작점 일치 */
        margin-left: 0;
        padding-left: 0;
    } 
	
}