header {position:absolute; top:0; left:0; width:100%; z-index:1000;}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, a strong, .bold, .connected-icons li a h5{font-family: 'Poppins';}	  
.doz_sys h2{font-family: 'NanumSquareNeo';}
p{font-family: 'NanumSquareNeo'; font-size:16px !important;}
.ion-arrow-right-c:before{font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
    content: "\f061" !important;}  
.btn-appear:hover i{margin-top:-5px}  
.footer-sec p{font-family: 'NanumSquareNeo'; font-size:15px !important;}
h1, .h1, h2, .h2, h3, .h3{margin-top:0; margin-bottom:0}

/* 네비게이션 컨테이너 (로고와 메뉴를 양쪽으로 정렬) */
.nav-container {
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 정렬 */
    align-items: center;
    height: 80px; /* 헤더 높이 */
    max-width: 1200px; /* 최대 너비 */
    margin: 0 auto; /* 중앙 정렬 */
}

/* 로고 스타일 */
.logo a {
    font-size: 24px;
    font-weight: bold;
}
/* .logo img { max-height: 40px; } /* 이미지 로고를 사용할 경우 */

/* 메인 메뉴 전체 (ul) */
.main-menu {
    display: flex;
}

/* 메인 메뉴 항목 (li) */
.main-menu > li {
    position: relative; /* 서브 메뉴의 기준점 */
    padding: 0 20px;
}

/* 메인 메뉴 링크 (a) */
.main-menu > li > a {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 80px; /* 헤더 높이와 동일하게 하여 수직 중앙 정렬 */
    color: #ffffff;
}

/* 서브 메뉴 (ul) - 평소에는 숨김 */
.sub-menu {
    position: absolute;
    top: 100%; /* 메인 메뉴 바로 아래에 위치 */
    left: 0;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    min-width: 180px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 메인 메뉴에 마우스를 올렸을 때 서브 메뉴 표시 */
.main-menu > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}

/* 서브 메뉴 링크 (a) */
.sub-menu a {
    display: block;
    padding: 12px 20px;
    font-size: 14px;
    color: #555;
}

.sub-menu a:hover {
    background-color: #f5f5f5;
}
    
.background-image {
    background-size: cover !important;
    background-position: center !important;
    width: 100% !important;
    opacity: 20 !important;
    top: 0 !important;
}
.background-image1 {
    background-image: url('https://topco.co.kr/assets/co/img/backgrounds/bg-1.jpg') !important;
}
.background-image2 {
    background-image: url('https://topco.co.kr/assets/co/img/backgrounds/bg-2.jpg') !important;
    top: -30vh !important;
}
.background-image3 {
    background-image: url('https://topco.co.kr/assets/co/img/backgrounds/bg-3.jpg') !important;
}
.background-image5 {
    background-image: url('https://topco.co.kr/assets/co/img/backgrounds/bg-5.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    width: 100% !important;
    opacity: 20 !important;
}
.background-image6 {
    background-image: url('https://topco.co.kr/assets/co/img/backgrounds/bg-6.jpg') !important;
}
    
/* hero */
.hero-sec{font-family: 'NanumSquareNeo'}
.hero-sec .container h1{font-family: 'NanumSquareNeoLight'}
.hero-sec .container h1 > strong{font-family: 'NanumSquareNeoExtraBold'}    

/* about */
.about-sec{font-family: 'NanumSquareNeo'}
.about-sec .container h4{font-family: 'NanumSquareNeo'}
.about-sec .container h4 > strong{font-family: 'NanumSquareNeoExtraBold'}  

/* 주요 연혁 */
    .history-sec{background-color:#f7f7f7; font-family: 'NanumSquareNeo'}
    .history-timeline{width:100%;max-width:1200px;margin:0 auto 60px;padding:0 20px; display:flex;}
    .timeline-container{position:relative;display:flex;flex-direction:column;gap:1%; align-items:center; width:100%;}
    .timeline-container::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom, #fdd000, #00a7ea, #7d2fbf);transform:translateX(-50%);}
    .timeline-item{position:relative;display:flex;align-items:center;width:100%;}
    .timeline-item.top{justify-content:center;padding-right:40%;}
    .timeline-item.bottom{justify-content:center;padding-left:40%;}
    .timeline-content{width:40%;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);position:relative;z-index:2;}
    .timeline-item.top .timeline-content{margin-right:0;}
    .timeline-item.bottom .timeline-content{margin-left:0;}
    .timeline-year{font-size:20px; color:#000;margin-bottom:0; font-family: 'NanumSquareNeoHeavy';}
    .timeline-event{font-size:16px;color:#333;line-height:1.5;}
    .timeline-dot{position:absolute;left:50%;width:20px;height:20px;background:#3b82f6;border:4px solid #fff;border-radius:50%;transform:translateX(-50%);z-index:3;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
    .timeline-item.top .timeline-content::after{content:'';position:absolute;right:-10px;top:50%;width:0;height:0;border-left:10px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;transform:translateY(-50%);}
    .timeline-item.bottom .timeline-content::after{content:'';position:absolute;left:-10px;top:50%;width:0;height:0;border-right:10px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;transform:translateY(-50%);}
    @media (max-width: 768px) {
    .history-timeline{padding:30px 20px;}
    .timeline-container{gap:10px;}
    .timeline-container::before{left:20px;}
    .timeline-content{width:30%; padding:12px; width:calc(100% - 50px); margin-left:50px !important;margin-right:0 !important;}
    .timeline-year{font-size:15px;}
    .timeline-event{font-size:13px;}
    .timeline-dot{width:14px;height:14px;border:3px solid #fff; left:13px;transform:none;}
    .timeline-item{justify-content:flex-start !important;padding-left:0 !important;padding-right:0 !important;}
    .timeline-item.top .timeline-content::after{display:none;}
    .timeline-item.bottom .timeline-content::after{display:none;}
    } 
    /*서비스 수 카운터*/
    .progress-bar{background-color:#3b82f6}
    .progress-bars.thin h5, .progress-bars.standard h5{font-family: 'NanumSquareNeo'}

    /* 주요 서비스 컨텐츠 */
    .vossen-portfolio-filters li{font-family: 'NanumSquareNeoBold' !important; font-size:13px !important;}
    
    /* 전세계 가입자 수 */
    .fun-facts-sec h1{font-family: 'NanumSquareNeoExtraBold'; padding-bottom:10px;}
    .fun-facts-sec h5{font-family: 'NanumSquareNeoBold'; font-size:20px; line-height:1;}
    
    .member-sec h2{font-family: 'NanumSquareNeoBold';}
    .member-sec h2 > span{font-size:60px; font-family: 'NanumSquareNeoExtraBold';}
    .member-sec .btn-view{background-color:#2d4965; font-family: 'NanumSquareNeoBold'; font-size:20px}

    /*언론기사*/
    .pressnews-sec h5{font-family: 'NanumSquareNeoBold';}
    .pressnews-sec h5 strong{font-family: 'NanumSquareNeoExtraBold'; font-size:21px;}
    
    /*탑툰 채용 사이트*/
    .recruitment-sec .btn-view{background-color:#2d4965; font-family: 'NanumSquareNeoBold'; font-size:20px}


    /*서브 상단::공통*/
    .top-image{padding: 130px 0;}