@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@100..900&family=Stylish&display=swap');

*{margin:0;padding:0;box-sizing:border-box;font-family:'Noto Sans KR',sans-serif; }

html{
    scroll-behavior: smooth; 
}
body{overflow-x:hidden;   font-family: "Noto Sans KR", sans-serif;}

header{
    position:fixed;
    top:0;left:0;width:100%;
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 40px;
    z-index:1000;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(3px);
    color:#fff;
}

header .logo{
    font-size:24px;
    font-weight:700;
}

header nav ul{
    display:flex;
    list-style:none;
    gap:40px;
}
header nav ul li a{
    color:#fff;
    text-decoration:none;
    font-size:15px;
}

.header-icons{
    display:flex;
    align-items:center;
    gap:20px;
}

.header-icons a {
    font-size:18px;
}

.title_fontfmaily { font-family: "Noto Sans KR", sans-serif;}

/* 햄버거 */
.hamburger{
    width:28px;
    cursor:pointer;
    display:none;
    flex-direction:column;
    gap:6px;
}
.hamburger span{
    display:block;
    width:28px;
    height:3px;
    background:#fff;
    border-radius:3px;
    transition:0.4s;
}
/* .hamburger.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
    opacity:0;
}
.hamburger.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
} */

/* 모바일 메뉴 */
.mobile-menu{
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.92);
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:999;
}
.mobile-menu a{
    color:#fff;
    font-size:26px;
    margin:15px 0;
    text-decoration:none;
}

/* 메인 슬라이더 */
.main-visual{
    width:100%;
    height:100vh;
}
.swiper-slide{
    width:100%;
    height:100vh;
    background-size:cover;
    background-position:center;
    position:relative;
}
.slide-overlay{
    position:absolute;
    left:0;top:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.4);
}
.slide-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    text-align:center;
}
.slide-text h1{
    font-size:60px;
    font-weight:700;
    line-height:1.2;
}
.slide-text p{
    font-size:18px;
    margin-top:20px;
    line-height:1.6;
}

/* 페이징 스타일 */
.swiper-pagination-bullet{
    width:30px;
    height:4px;
    border-radius:0;
    background:#ccc;
    opacity:0.9;
}
.swiper-pagination-bullet-active{
    background:#fff;
}

/* 우측 상담 버튼 */
.quick-box{
    position:fixed;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:15px;
}
.quick-box .btn{
    
    border:0px solid gray;
    width:45px;
    height:110px;
    background:#ff6666;
    border-radius:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;/* 
    writing-mode:vertical-rl; */
    text-orientation:mixed;
    font-size:12px;
    cursor:pointer;
}

/* 반응형 */
@media(max-width:900px){
    header nav{display:none;}
    .hamburger{display:flex;}

    .slide-text h1{font-size:40px;}
    .slide-text p{font-size:16px;}

    .quick-box{right:10px;}
}

/* 회사소개 컨텐츠 영역 css */
/* 커스텀 스타일: 회사소개 섹션의 소프트 그라데이션 배경 (이미지 반영) */
.about-us-bg {
    background-color: #fcfcfc; /* 이미지의 밝은 베이지/화이트 톤 */
    position: relative;
    overflow: hidden;
    z-index: 1; /* Ensure content is above the pseudo-gradient */
    background:url('https://cdn.pixabay.com/photo/2016/11/23/17/16/automobile-1853893_1280.jpg');
    /* background-size:cover; */
    
        
}
/* 하단 소프트 그라데이션을 위해 가상 요소를 사용 */
.about-us-bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 350px; /* 그라데이션 높이 */
    /* 핑크/퍼플/블루 톤의 부드러운 하단 그라데이션 */
    background: linear-gradient(to top, 
        rgba(255, 230, 255, 0.5), /* Pale Pink */
        rgba(240, 255, 255, 0.4), /* Pale Blue */
        rgba(240, 255, 240, 0) 80% /* Transparent */
    );
    z-index: 0;
    pointer-events: none;
}


/* 포트폴리오 컨텐츠 영역 css*/
.portfolio-section{
    width:100%;
    padding:4px;
    background:black;
    color:white;
}

.pf-title{
    text-align:center;
    font-size:36px;
    font-weight:700;
    margin-bottom:20px;
    margin-top: 20px;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    /* grid-gap:4px; */
}

.pf-item{
    position:relative;
    width:100%;
    padding-bottom:65%; /* 이미지 비율 */
    background-size:cover;
    background-position:center;
    /* border-radius:6px; */
    overflow:hidden;
    cursor:pointer;
    transition:transform .3s;
}
.pf-item:hover{
    transform:scale(1.08);
    position: relative;
    z-index: 999;
    overflow:hidden;
    border-radius:7px;
    border:1px solid gray;
    
}

.pf-overlay{
    position:absolute;
    left:0;top:0;
    width:100%;height:100%;
    background:rgba(0,0,0,0.45);
    opacity:0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
    transition:0.35s;
}
.pf-item:hover .pf-overlay{
    opacity:1;
}

.pf-overlay h3{
    color:#fff;
    font-size:20px;
    font-weight:600;
    line-height:1.4;
}

/*업무분야 css*/
#business-area {background:url('https://cdn.pixabay.com/photo/2020/07/24/17/24/industry-5434589_1280.jpg') no-repeat; background-size:cover;}
.business-area-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark, semi-transparent overlay */
    background: rgba(0, 0, 0, 0.8); 
    z-index: 1;
}

/* 모바일 */
@media(max-width:1200px){
    .portfolio-grid{
        grid-template-columns:repeat(3,1fr);
    }
    
}
@media(max-width:800px){
    .portfolio-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .pf-title{
        font-size:28px;
    }
    
    .about-us-m {
        width:200px;
        border:0px solid red;
    }
}

/*온라인 문의하기 폼*/
/* 섹션 전체 */
.request-section {
    position: relative;
    width: 100%;
    padding: 160px 0;
    overflow: hidden;
    color: #fff;
}

/* 배경 이미지 */
.request-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: url('https://cdn.pixabay.com/photo/2022/01/25/12/16/mug-6966047_1280.jpg') center/cover no-repeat;
    filter: brightness(0.45);
    z-index: 1;
}

/* 컨텐츠 영역 */
.request-inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 제목 스타일 */
.request-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
}
.request-title span {
    color: #b6e55f; /* 형광 연두 느낌 (위 이미지 동일톤) */
}

/* 설명 텍스트 */
.request-sub {
    margin-bottom: 40px;
    opacity: 0.9;
}

/* 입력 폼 레이아웃 */
.request-form {
    width: 100%;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
}

.input-box {
    flex: 1;
    padding: 14px 18px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.9);
    font-size: 16px;
    color: #333;
}
.input-box-text {
    height:200px;
    flex: 1;
    padding: 14px 18px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.9);
    font-size: 16px;
    color: #333;
}

.input-box:focus {
    outline: 2px solid #9dd450;
}

/* 방문상담 체크 */
.visit-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 15px;
}

/* 안내문 */
.request-notice {
    margin-top: -54px;
    font-size: 14px;
    opacity: 0.85;
}

/* 반응형 */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
    .request-title {
        font-size: 30px;
    }
    .input-box-text{
        height:200px;
    }
}

/* textarea 스타일 */
.input-box-text {
    width: 100%;
    min-height: 160px;
    padding: 14px 18px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.9);
    font-size: 16px;
    color: #333;
    resize: vertical; /* 세로만 조절 가능 */
}

.input-box-text:focus {
    outline: 2px solid #9dd450;
}

/* 버튼 행 (오른쪽 정렬) */
.form-btn-row {
    display: flex;
    justify-content: flex-end;  /* 오른쪽 정렬 */
    margin-top: 10px;
}

/* 버튼 스타일 */
.submit-btn {
    background: #9dd450;
    color: #fff;
    font-size: 17px;
    padding: 12px 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

.submit-btn:hover {
    background: #88c13f;
}

/* 단순 문의하기 섹션 css */
/* 문의하기 단순 정보 섹션 */
.contact-info-section {    
    width: 100%;
    background: #f3f4f6;
    padding: 90px 20px;
    background:url('https://cdn.pixabay.com/photo/2017/05/12/08/29/coffee-2306471_1280.jpg') no-repeat;
    background-size:cover;
}

.contact-info-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.contact-info-title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 10px;
    color:white;

    text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;


}

.contact-info-desc {
    margin-bottom: 50px;
    color: rgb(9, 9, 9);
    font-size: 17px;
    /* text-decoration: underline;
    text-decoration-color:rgb(83, 83, 83); */
    text-underline-offset: 6px; /* 밑줄과 글자 사이 간격 */

}

/* 카드 3개 박스 */
.contact-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    
}

/* 각 카드 */
.contact-card {
    background: #fff;
    width: 300px;
    border-radius: 18px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    border-top:3px solid rgb(0, 0, 0);
    opacity: 0.8;
}

.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.30);
}

.contact-card .icon {
    font-size: 42px;
    margin-bottom: 15px;
}

.contact-card h3 {
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: 600;
}

.contact-card p {
    font-size: 17px;
    color: #333;
}

.contact-card a {
    color: #333;
    text-decoration: none;
}

.contact-card a:hover {
    text-decoration: underline;
}

/* 모바일 */
@media (max-width: 768px) {
    .contact-cards {
        flex-direction: column;
        align-items: center;
    }

    .contact-card {
        width: 100%;
        max-width: 380px;
    }
}

/* SNS 링크(플로팅)*/
.sns-links-container {
    display: flex;
    flex-direction: column; /* 세로로 아이콘 배치 */
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    
    /* 토글 애니메이션을 위한 초기 설정 */
    max-height: 0; /* 숨김 */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease;
    opacity: 0;
}

/* 토글 시 활성화되는 상태 */
.sns-links-container.active {
    max-height: 300px; /* 아이콘 수에 따라 적절히 설정 (보여질 높이) */
    opacity: 1;
}

/* 개별 SNS 아이콘 스타일 */
.sns-item {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.sns-item:hover {
    transform: scale(1.1);
}

/* 아이콘별 색상 */
.sns-item.facebook { background-color: #3b5998; }
.sns-item.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sns-item.twitter { background-color: #1da1f2; }
.sns-item.youtube { background-color: #ff0000; }

/* 찾아오시는길 css */
/* 기본 스타일 */
.contact-page-wrapper {
    max-width: 1000px;
    margin: 0px auto;
    padding: 20px;
    font-family: 'Malgun Gothic', 'Arial', sans-serif;
    color: #333;
}

/* 헤더 섹션 */
.header-section {
    margin-bottom: 30px;
}

.contact-label {
    color: #c0392b; /* CONTACT 텍스트 색상 */
    font-size: 0.9em;
    font-weight: bold;
    margin: 0;
}

.header-section h1 {
    font-size: 2em;
    font-weight: 600;
    margin: 5px 0 0 0;
}

/* 지점 토글 버튼 */
.branch-toggle-buttons {
    margin-bottom: 20px;
}

.branch-btn {
    padding: 8px 20px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    color: #666;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.2s;
}

.branch-btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-right: -1px; /* 버튼 경계선 합치기 */
}

.branch-btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.branch-btn.active {
    background-color: #c0392b; /* 활성화된 버튼 색상 */
    color: #fff;
    border-color: #c0392b;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 지도 컨테이너 */
.map-container {
    width: 100%;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 빠른 연락처 정보 (지도 아래) */
.quick-contact-info {
    padding: 15px 0;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee; /* 구분선 */
}

.quick-contact-info .info-line {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

.quick-contact-info .address {
    flex-grow: 1;
}

.quick-contact-info .phone-email {
    gap: 15px;
}

.quick-contact-info .info-line i {
    color: #666;
    margin-right: 5px;
}

.quick-contact-info .map-links a {
    color: #555;
    text-decoration: none;
    margin-left: 15px;
    font-size: 0.9em;
}

.quick-contact-info .map-links a:hover {
    text-decoration: underline;
}

.quick-contact-info .hidden {
    display: none;
}

/* 상세 정보 테이블 (두 번째 이미지 스타일) */
.company-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.company-info-table th,
.company-info-table td {
    padding: 12px 15px;
    text-align: left;
    font-size: 1em;
    line-height: 1.5;
}

.company-info-table tr {
    border-bottom: 1px solid #eee;
}

.company-info-table tr:last-child {
    border-bottom: none;
}

.company-info-table th {
    background-color: #f7f7f7; /* 라벨 배경색 */
    color: #666;
    font-weight: 500;
    width: 15%; /* 라벨 너비 */
    min-width: 80px;
}

.company-info-table td {
    color: #333;
    font-weight: 400;
}

/* footer css*/
/* 지점 토글 버튼 (Hover 애니메이션 추가) */
.branch-toggle-buttons {
    margin-bottom: 20px;
    display: flex;
}

.branch-btn {
    padding: 8px 20px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    color: #666;
    cursor: pointer;
    font-size: 0.95em;
    transition: all 0.3s ease-in-out; /* 애니메이션 속성 */
    position: relative;
    overflow: hidden; /* 호버 배경이 튀어나오지 않도록 */
}

/* 호버 애니메이션: 색상 변경 및 약간의 튀어나옴 효과 */
.branch-btn:hover {
    color: #fff;
    border-color: #c0392b;
    background-color: #d84535; 
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px); /* 약간 위로 이동 */
}

/* 활성화된 버튼 */
.branch-btn.active {
    background-color: #c0392b; 
    color: #fff;
    border-color: #c0392b;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: none; /* 활성화된 상태에서는 애니메이션 효과 없음 */
}

/* 버튼 경계 처리 */
.branch-btn:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-right: -1px;
}
.branch-btn:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#branchMap {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s; /* 이미지 전환 시 페이드 효과 */
}

/* 지도 아래 빠른 연락처 정보 */
.quick-contact-info {
    padding: 15px 0;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.quick-contact-info .info-line {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    flex-wrap: wrap; /* 모바일 대응 */
}

.quick-contact-info .info-line i {
    color: #666;
    margin-right: 5px;
}
.quick-contact-info .phone-email span, .quick-contact-info .fax span {
    margin-right: 15px;
}
.quick-contact-info .hidden { display: none; }
.quick-contact-info .map-links a { text-decoration: none; margin-left: 15px; color: #555; }

/* 상세 정보 테이블 */
.company-info-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 50px;
}
.company-info-table th { background-color: #f7f7f7; color: #666; font-weight: 500; width: 15%; padding: 12px 15px; text-align: left; }
.company-info-table td { color: #333; font-weight: 400; padding: 12px 15px; border-bottom: 1px solid #eee; }
.company-info-table tr:last-child td { border-bottom: none; }


/* ========================================================== */
/* 2. 푸터 섹션 스타일 (어두운 배경) */
/* ========================================================== */
.main-footer {
    background-color: #000000ff; /* 어두운 남색 계열 */
    color: #ccc;
    padding: 30px 0;
    font-size: 0.9em;
    border-top: 4px solid #353643ff; /* 상단 구분선 */
    position: relative;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 모바일 대응 */
}

.footer-info {
    width: 50%;
    min-width: 300px;
    padding-right: 30px;
}

.footer-info p {
    margin: 3px 0;
    line-height: 1.6;
}

.footer-info strong {
    font-weight: normal;
    color: #ddd;
}

.footer-info a {
    color: #ccc;
    text-decoration: none;
}

.footer-info .copyright {
    color: #aaa;
    margin-top: 15px;
}

/* 오른쪽 메뉴 그리드 */
.footer-menu-grid {
    font-size:14px;
    width: 45%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.menu-item {
    background-color: #29292f; /* 버튼 배경색 */
    color: #ddd;
    text-decoration: none;
    text-align: center;
    border: 1px solid #5a5e7d;
    transition: background-color 0.3s, transform 0.3s;
    font-weight: 500;
    line-height:700%;
    border-radius:20px;
}

/* 메뉴 호버 애니메이션 */
.menu-item:hover {
    background-color: #5a5e7d;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.privacy-link {
    max-width: 1000px;
    margin: 15px auto 0;
    text-align: right;
    padding: 0 20px;
}

.privacy-link a {
    color: #999;
    text-decoration: none;
    font-size: 0.85em;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 30px;
    }
    .footer-info, .footer-menu-grid {
        width: 100%;
        min-width: auto;
    }
    .footer-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .quick-contact-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}