* { margin:0; padding:0; box-sizing:border-box; }
html {scroll-behavior: smooth;}
body { font-family: "Noto Sans KR", sans-serif; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

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

/*main_top_header*/
.top-bar {
    position: sticky; /* 스크롤 되어도 뷰포트 기준으로 고정 유지 */
    top: 0;           /* 뷰포트의 최상단에 붙음 */
    height: 30px;
    background: #ffc107;
    z-index: 10;
}
header {
    /* top-bar가 뷰포트 밖으로 완전히 밀려나야 top: 0에 붙음 */
    position: sticky; 
    top: 0; 
    height: 60px;
    background: #fff;
    z-index: 9;
}


/* Header */
header { opacity: 0.8; position: fixed; left:0; width:100%; background:#111; color:#fff; display:flex; justify-content:space-between; align-items:center; padding:15px 5%; z-index:1000; }
.logo { font-size:22px; font-weight:bold; }
nav ul { display:flex; gap:25px; }
nav li { font-size:16px; color:white;}
.hamburger { display:none; cursor:pointer; flex-direction:column; gap:5px; }
.hamburger span { width:25px; height:3px; background:#fff; transition:0.3s; ;}
.mobile-menu { color:white; opacity: 0.8; position:fixed; top:0; right:-100%; width:70%; height:100vh; background:#111; padding:5px 20px; transition:0.4s; z-index:999; }
.mobile-menu ul li { padding:15px 0; border-bottom:1px solid #333; }
.mobile-menu.active { right:0; }

/* Hero Slider */
.slider { position:relative; width:100%; height:100vh; overflow:hidden; }
.slides { display:flex; transition:0.8s ease-in-out; height:100%; }
.slide { min-width:100%; height:100%; background-size:cover; background-position:center; position:relative; }
.slide img { width:100%; height:100%; object-fit:cover; display:block; }
.slider-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); color:#fff; border:none; font-size:24px; padding:12px; cursor:pointer; border-radius:0%; z-index:10; }
.slider-btn.prev { left:20px; }
.slider-btn.next { right:20px; }
.slider-indicators { margin-bottom:20px; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; }
.slider-indicators span { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:0.3s; }
.slider-indicators .active { background:#fff; }

/* 햄버거버튼관련 */
/* ========================================= */
/* 🍔 버튼이 'active'일 때 (X자 모양 변환) */
/* ========================================= */

        #ham.active span:nth-child(1) {
            /* ✅ 불필요한 position, left, width 속성 제거 */
            /* 1번 줄: 아래로 이동 (중앙으로 모음) 후 45도 회전 */
            transform: translateY(11px) rotate(45deg); 
        }

        #ham.active span:nth-child(2) {
            /* 2번 줄: 투명하게 만들고 크기를 0으로 줄여 숨김 */
            opacity: 0;
            transform: scale(0); 
        }

        #ham.active span:nth-child(3) {
            /* ✅ 불필요한 position, left, width 속성 제거 */
            /* 3번 줄: 위로 이동 (중앙으로 모음) 후 -45도 회전 */
            transform: translateY(-5px) rotate(-45deg); 
        }


/*태블릿 가로 : 769px-1023px*/
@media all and (min-width:768px) and (max-width:1023px){
	
}

/*모바일 가로 & 태블릿 세로 : 480px-767px*/
@media all and (min-width:480px) and (max-width:767px){
	
}

/*모바일 : -479px*/
@media all and (max-width:479px){
	
    .slider {
        border:0px solid red;
        height:100vh !important;
    }

}


/* Section */
section { width:100%; padding:5px 5%; text-align:center; min-height:30vh; display:flex; flex-direction:column; justify-content:center; align-items:center; }
section h2 { font-size:36px; margin-bottom:40px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; width:100%; max-width:1200px; }
.box { background:#f7f7f7; padding:5px; border-radius:10px; font-size:18px; min-height:250px; display:flex; justify-content:center; align-items:center; text-align:center; }
.content-block { display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; width:100%; max-width:1200px; margin-bottom:80px; }
.content-item { flex:1 1 30%; background:#eee; border-radius:10px; min-height:300px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; transition:0.3s; }
.content-item:hover { transform: translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,0.1); }
.content-item img { max-width:100%; border-radius:8px; margin-bottom:20px; }
.content-item h3 { font-size:22px; margin-bottom:10px; }
.content-item p { font-size:16px; color:#555; }

/*service*/


/* hc_line */
.hc_line {margin-bottom: 20px;}
.line_top {margin-top: 70px;}

/* section img */


/*모바일 좌우 여백안생기게*/

/* 최상위 요소에 적용하여 가로 스크롤을 방지합니다. */
body, html {
    /* 뷰포트 너비를 정확히 100%로 설정 */
    width: 100%; 
    /* 넘치는 모든 컨텐츠(가로 스크롤바)를 숨김 */
    overflow-x: hidden; 
}

/* 이미지 요소 자체에 적용 */
img {
    /* 이미지가 부모 컨테이너를 절대 넘지 않도록 설정 */
    max-width: 100%; 
    /* 높이는 비율에 맞게 자동으로 조정 */
    height: auto; 
    /* 불필요한 인라인 공백 방지 */
    display: block;
}

/*map*/

/* footer 추가 */
footer {
    background-color:black;
    text-align:center;
    color:white;
    padding: 20px;
}

/* Right fixed bar */
.quick { position:fixed; right:10px; bottom:100px; display:flex; flex-direction:column; gap:10px; z-index:9999;}
.quick a { padding:12px 16px; background:#111; color:#fff; border-radius:6px; font-size:14px; }
.top-btn { position:fixed; right:10px; bottom:30px; padding:12px 16px; background:#111; color:#fff; border-radius:6px; font-size:14px; cursor:pointer; }

@media(max-width:900px){ nav ul { display:none; } .hamburger { display:flex; } .features { grid-template-columns:1fr; } .slider { height:60vh; } .content-item { flex:1 1 100%; } }