/*
Theme Name: GTHEME
Author: Geeat
Description: Great-Theme
Version: 1.0
*/

/* Noto Sans KR 폰트를 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

/* 본문과 제목에 Noto Sans KR 폰트 적용하기 */
body,
h1, h2, h3, h4, h5, h6, p, a, dd, dt {
    font-family: 'SUIT', 'Noto Sans KR', sans-serif;
}

/* 기본 폰트 크기 (PC & 태블릿) */
h1 {
    font-size: 36px;   /* 메인 제목 */
    font-weight: bold;
    line-height: 1.4;
}

h2 {
    font-size: 30px;   /* 섹션 제목 */
    font-weight: bold;
    line-height: 1.4;
}

h3 {
    font-size: 24px;   /* 하위 섹션 제목 */
    font-weight: bold;
    line-height: 1.4;
}

/* 모바일 최적화 (768px 이하) */
@media screen and (max-width: 768px) {
    h1 {
        font-size: 28px; /* 모바일에서는 조금 축소 */
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }
}

/* Reset */
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote {
    margin: 0;
    padding: 0;
}

/* Body & Wrapper */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* 헤더 */
header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 10px 0;
    z-index: 10;
    border-bottom: 0.5px solid #BDBDBD;
}

/* 로고 및 제목 */
header h2 {
    font-size: 20px;
    min-width: 150px;
}

header h2 a {
    color: #333;
    text-decoration: none;
}

/* 내비게이션 스타일 */
nav ul {
    list-style: none;
    display: inline-flex;
    justify-content: center;
}

nav li {
    padding: 5px 15px;
}

nav a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 14px;
}

nav a:hover {
    color: #8C8C8C;
}

/* 모바일 하단 버튼 컨테이너 */
.m-button1, .m-button2 {
    position: fixed;
    bottom: 0;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1);
}

/* 왼쪽 버튼 */
.m-button1 {
    left: 0;
}

/* 오른쪽 버튼 */
.m-button2 {
    right: 0;
}

/* 버튼 내부 링크 스타일 */
.mobile-button1, .mobile-button2 {
    flex: 1;
    color: #333;
    padding: 12px 0;
    transition: background-color 0.3s;
    display: flex;
    flex-direction: column;  /* 아이콘 위, 텍스트 아래 */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* 아이콘 스타일 */
.mobile-button1 i, .mobile-button2 i {
    font-size: 22px;
    margin-bottom: 6px; /* 아이콘과 텍스트 간격 */
}

/* 호버 또는 터치 시 효과 */
.mobile-button1:active, .mobile-button2:active {
    background-color: #f5f5f5;
}



/* 모바일 버튼 태블릿 해상도 이상에서 숨기는 미디어쿼리 */
@media (min-width: 768px) {
    .m-button1 {
        display: none;
    }

	.m-button2 {
		display: none;
    }
	
#pc-nav ul li {
    display: inline-block;
    position: relative;
    text-align: center;   /* 글자 중앙 정렬 */
    vertical-align: middle;
    white-space: nowrap;  /* 글자 줄바꿈 방지 → 글자 길이에 맞춰 폭 자동 조정 */
}

#pc-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#pc-nav ul li {
    display: inline-block;
    position: relative; /* 드롭다운 위치를 잡기 위해 필요 */
}
#pc-nav ul li a {
    display: block;
    padding: 10px 0px;
    text-decoration: none;
    color: #333;
}

/* 2단(하위) 메뉴 기본 숨김 */
#pc-nav ul li ul {
    display: none;
    position: absolute;
    top: 100%; /* 부모 li 바로 아래 */
    left: 0;
    background: #fff;
    min-width: 180px;
    border: 1px solid #ddd;
    z-index: 99;
}

/* 하위 메뉴 항목 */
#pc-nav ul li ul li {
    display: block;
}
#pc-nav ul li ul li a {
    padding: 10px 15px;
    color: #333;
    white-space: nowrap;
}

/* 마우스 올리면 펼쳐짐 */
#pc-nav ul li:hover > ul {
    display: block;
}

/* 호버 시 색상 효과 */
#pc-nav ul li a:hover {
    background: #f2f2f2;
    color: #000;
}

}

@media (max-width: 1024px) {
	#pc-nav {
	display: none;
	}
}

.mobile-button.phone-button {
    background-color: #253041;  /* 전화걸기 버튼 배경색 설정 */
}


.title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 가운데 정렬에서 왼쪽과 오른쪽 정렬로 변경 */
	padding-left: 10px;
	padding-right: 10px;
}

/* 기본값: 100% (1024px 이하에서 적용) */
.title-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

/* 1024px 이상에서 60%로 조정 */
@media (min-width: 1345px) {
    .title-wrapper {
        max-width: 70%;
        margin: 0 auto;
    }
}


h2 {
    margin-left: 10px; /* 제목을 왼쪽 정렬로 이동 */
}

.call {
    margin-right: 10px; /* 추가 텍스트를 오른쪽 정렬로 이동 */
    display: inline-block;
    padding: 5px 10px;
    color: white; /* 글자색을 흰색으로 변경 */
    text-decoration: none;
    background-color: #000847; /* 배경색 변경 */
    border: 1px solid #000847; /* 테두리도 배경색과 동일하게 설정 */
    border-radius: 20px;
    min-width: 100px;
    text-align: center;
}

.call a {
    text-decoration: none; /* 하이퍼링크의 밑줄 제거 */
    color: white; /* 링크 글자색도 흰색으로 변경 */
}

.call-icon {
    color: white; /* 아이콘 색상도 흰색으로 변경 */
}


@media (max-width: 1024px) {
    .title-wrapper {
      display: none;
    }
}

@media screen and (min-width: 1025px) {
    #site-navigation {
        display: none;
    }
}


/* ===== 기본 메뉴 스타일 ===== */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.call-text {
    position: absolute;
    top: 11.5px;
    right: 20px;
    width: 38px;
    height: 38px;
    border: 2px solid #d0d0d0;   /* 회색 테두리 */
    border-radius: 50%;          /* 완전 둥근 원형 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;   /* 연한 회색 배경 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 자연스러운 그림자 */
    cursor: pointer;
    transition: all 0.3s ease;
}

.call-text:hover {
    background-color: #eaeaea;  /* 호버 시 약간 진해지는 효과 */
    transform: scale(1.05);     /* 살짝 확대 */
}

.call-text a {
    text-decoration: none;
    color: #555;                /* 아이콘 기본 색 */
    font-size: 22px;           /* 아이콘 크기 */
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 1025px) {
    .call-text {
        display: none;
    }
}


.m-menu {
	padding: 10px;
	text-align: left;
}

@media screen and (min-width: 1025px) {
    .m-menu {
        display: none;
    }
}

.logo {
	width: 160px;
	height: auto;
}

@media screen and (max-width: 768px) {
    .logo {
        width: 160px;
		height: auto;
    }
}

/* 푸터 */
.footer {
    background-color: #222;
    color: #fff;
    padding: 40px 20px;
}

.footer-widget-title {
    padding-bottom: 10px;
}


.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-left,
.footer-right {
    width: 48%;
	font-size: 14px;
}

/* 태블릿 이하 (최대 768px) */
@media screen and (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }

    .footer-left,
    .footer-right {
        width: 100%;
    }

    /* 모바일 화면에서 오른쪽 푸터 아래 여백 추가 */
    .footer-right {
        margin-bottom: 30px;
    }
}

/* 모바일 메뉴 */

/* ===== 기본 메뉴 스타일 ===== */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
	font-size: 18px;
    display: block;
    padding: 0px 15px;
    text-decoration: none;
    color: #fff;
}

/* ===== 데스크탑 (1025px 이상) ===== */
@media screen and (min-width: 1025px) {
    .menu-toggle {
        display: none; /* 데스크탑에서는 햄버거 버튼 숨김 */
    }
    .main-navigation ul {
        display: flex;
        gap: 20px;
    }
    .main-navigation ul ul {
        display: none; /* 서브메뉴 기본 숨김 */
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .main-navigation li:hover > ul {
        display: block;
    }

    .mobile-menu-title {
        display: none; /* 1025px 이상에서 숨김 */
    }
}

/* ===== 모바일 전용 (1025px 이하) ===== */
@media screen and (max-width: 1025px) {
    .main-navigation ul {
        display: none;
        background-color: #000000;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-top: 15px;
        text-align: center;
        flex-direction: column;
    }

    /* 햄버거 버튼 */
    .menu-toggle {
        display: block;
        cursor: pointer;
        background: none;
        border: none;
        padding: 10px;
        position: absolute;
        top: 22px;
        right: 20px;
    }

    .menu-toggle .hamburger-icon {
        width: 30px;
        height: 3px;
        background-color: #333;
        display: block;
        position: relative;
    }

    .menu-toggle .hamburger-icon:before,
    .menu-toggle .hamburger-icon:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #333;
        left: 0;
        transition: transform 0.3s ease;
    }

    .menu-toggle .hamburger-icon:before {
        top: -10px;
    }

    .menu-toggle .hamburger-icon:after {
        top: 10px;
    }

    /* 햄버거 → X 아이콘 전환 */
    .menu-open .hamburger-icon:before {
        transform: rotate(45deg);
        top: 0;
    }

    .menu-open .hamburger-icon:after {
        transform: rotate(-45deg);
        top: 0;
    }

    /* 메뉴 보이기 */
    .menu-open .main-navigation ul {
        display: flex;
    }

    /* ===== 서브메뉴 ===== */
    .main-navigation ul ul {
        display: none !important;
        background-color: #f9f9f9;
        margin: 5px 0 10px;
        padding: 10px 0;
        border-radius: 5px;
        flex-direction: column;
    }

    .main-navigation li.menu-open > ul {
        display: block !important;
    }

    .main-navigation ul ul li a {
        font-size: 14px;
        padding: 8px 15px;
        color: #555;
    }

    .main-navigation ul ul li a:hover {
        background-color: #eee;
        color: #000;
    }

    /* 부모 메뉴 화살표 표시 */
    .main-navigation li.menu-item-has-children > a:after {
        content: "▼";
        font-size: 12px;
        margin-left: 5px;
        display: inline-block;
    }

    .main-navigation li.menu-open > a:after {
        content: "▲";
    }
}

/* 모바일 메뉴 제목 */
.mobile-menu-title {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}

.mobile-menu-title a {
    text-decoration: none;
    color: #000000;
}