@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'TtangsBudaeJjigae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeL.woff2') format('woff2');
    font-weight: 300;
    font-display: block;
}

@font-face {
    font-family: 'TtangsBudaeJjigae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeM.woff2') format('woff2');
    font-weight: 500;
    font-display: block;
}

@font-face {
    font-family: 'TtangsBudaeJjigae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/TTTtangsbudaejjigaeB.woff2') format('woff2');
    font-weight: 700;
    font-display: block;
}
@font-face {
    font-family: 'YeogiOttaeJalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: block;
}
@font-face {
    font-family: 'JalnanGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;   
	 font-display: block;

}
@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-display: block;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: block;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: block;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: block;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: block;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: block;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: block;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: block;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: block;
}
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: block;
}
body{font-family: 'Paperozi', sans-serif;}
.tfont{font-family: 'TtangsBudaeJjigae', sans-serif;}
.pfont{font-family: 'YeogiOttaeJalnan', sans-serif;}
/* 퀵 메뉴 */
#go_top{padding: 0;}
#quick_menu { width: 100px; position: fixed; right: 0; bottom: 2rem; margin-right: 2rem; display: flex; flex-wrap:wrap; justify-content: center; align-items: center; z-index: 5; }
#quick_menu a { display: flex; position: relative; align-items: center; justify-content: space-around; width: 100px; height: 100px; border-radius: 500px; box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1); cursor: pointer; margin-bottom: 1rem; transition: all ease 250ms; font-size: 1em; color:var(--white); background-color:var(--db_gray);  }
#quick_menu a:hover{ animation-name: btn_bounce; animation-duration: 750ms; animation-iteration-count:infinite;}
	#quick_menu a:last-child {width: 50px; height: 50px; margin-bottom: 0;}
#quick_menu a .txtwrap { text-align: center; width: 100%; }
#quick_menu a .txtwrap i { display: inline-block; font-size: 1.4em; margin-bottom: 0.4rem; }
#quick_menu a .txtwrap p { font-size: 0.85em; }
#quick_menu a.top { background-color:var(--white); }
#quick_menu a.top i { color: #888; }
/* 버튼 효과 */
@keyframes btn_bounce {
0%   { transform: scale(1,1)    translateY(0); }
10%  { transform: scale(1.1,.9) translateY(0); }
30%  { transform: scale(.9,1.1) translateY(-10px); }
50%  { transform: scale(1,1)    translateY(0); }
57%  { transform: scale(1,1)    translateY(-2px); }
64%  { transform: scale(1,1)    translateY(0); }
}
/* 헤더 */
header { background-color: #1c194840; border-bottom: solid 1px rgba(0,0,0,0.06); position: fixed; width: 100%; top: 0; left: 0; z-index: 555; }
#top_num { display: inline-block; padding: 0.5rem; width: 100%; font-size: 1.3em; font-weight: normal;color: var(--light_gray);  }
header .logo_03 a { color: var(--white); }
header .logo_03 a img{ filter:brightness(1.5)/* invert(1);*/}
.navbar-toggle { display: none; }

/* 헤더 네비 */
#header_nav { position: relative; }
#header_nav .overlay .overlay-menu li { margin-right: 3rem; }
	#header_nav .overlay .overlay-menu li:last-of-type { margin-right: 0rem; }
#header_nav .overlay .overlay-menu li a { display: block; height: 90px; line-height: 90px; color: var(--white); font-size: 1.05em; font-weight: normal; }
	#header_nav .overlay .overlay-menu li a:hover { color: var(--deep_blue); border-bottom: solid 5px var(--deep_blue); }
	#header_nav .overlay .overlay-menu li a.active { color: var(--point)!important; border-bottom: solid 5px var(--point); }

/* 헤더 스크롤 내렸을때 background-color:var(--white);*/
header.active { background-color: rgba(255,255, 255, 1);  box-shadow: 0px 2px 12px 0px rgb(0 13 57 / 25%); position: fixed; width: 100%; top: 0; left: 0; z-index: 555; border:none;}
header.active .logo_03 a { color: var(--gray_3); }
header.active .logo_03 a img{ filter: none;}
header.active #top_num { display: none; }
header.active #header_nav .overlay .overlay-menu li a { height: 80px; line-height: 80px; color: var(--gray_3);}
/* header.active .logo_03 a { color: #333; } */
header.active #header_nav .overlay .overlay-menu li a:hover{ color: var(--point)!important; border-bottom: solid 5px var(--point); }

@media only screen and (min-width: 300px) and (max-width: 850px) {
	
	body { font-size: 14px; }
	
	/* 퀵 메뉴 */
	#quick_menu { margin-right: 0; bottom: 1rem; width:100%; right:0; }
	#quick_menu a { display: inline-block; width: 40px; height: 40px; margin: 0 2%!important; }
		#quick_menu a:last-child { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; line-height: 40px; text-align: center; }
	#quick_menu a .txtwrap p { display: none; }
	#quick_menu a .txtwrap i { margin-bottom: 0!important; font-size: 1.2em; }
	
	/* 헤더 */
	header { position: fixed; width: 100%; z-index: 44; top: 0; }
	#top_num { font-size: 1em; padding: 0.5rem 1rem; }
	#top_num .wrap { padding: 0; }
	header > .wrap { height: 60px; }
	header .logo_03 a { font-size: 1.35em; font-weight: 500; }
	
	/* 헤더 네비 */
	.button_container { position: relative; height: 27px; width: 33px; cursor: pointer; z-index: 300; transition: opacity .25s ease; transform: scale(-0.8); }
		.button_container:hover { opacity: .7; }
	.button_container.active .top { -webkit-transform: translateY(11px) translateX(0) rotate(45deg); transform: translateY(11px) translateX(0) rotate(45deg); background:var(--white); }
	.button_container.active .middle { opacity: 0; background:var(--white); }
	.button_container.active .bottom { -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg); transform: translateY(-11px) translateX(0) rotate(-45deg); background:var(--white); }
	.button_container span { background:var(--white); border: none; height: 4px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; }
		.button_container span:nth-of-type(2) { top: 11px; }
		.button_container span:nth-of-type(3) { top: 22px; }
	.overlay { position: fixed; background: rgba(0,0,0,0.85); top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; z-index: 66 }
	.overlay.open { opacity: .9; visibility: visible; height: 100%; overflow: hidden; }
	.overlay.open li { display: flex; align-items: center; -webkit-animation: fadeInRight .5s ease forwards; animation: fadeInRight .5s ease forwards; -webkit-animation-delay: .35s; animation-delay: .35s; margin-right: 0!important; }
		.overlay.open li:nth-of-type(1) { -webkit-animation-delay: .35s; animation-delay: .35s; }
		.overlay.open li:nth-of-type(2) { -webkit-animation-delay: .39s; animation-delay: .39s; }
		.overlay.open li:nth-of-type(3) { -webkit-animation-delay: .43s; animation-delay: .43s; }
		.overlay.open li:nth-of-type(4) { -webkit-animation-delay: .46s; animation-delay: .46s; }	
		.overlay.open li:nth-of-type(5) { -webkit-animation-delay: .50s; animation-delay: .50s; }	
		.overlay.open li:nth-of-type(6) { -webkit-animation-delay: .53s; animation-delay: .53s; }	
		.overlay.open li:nth-of-type(7) { -webkit-animation-delay: .57s; animation-delay: .57s; }	
		.overlay.open li:nth-of-type(8) { -webkit-animation-delay: .60s; animation-delay: .60s; }	
		.overlay.open li:nth-of-type(9) { -webkit-animation-delay: .62s; animation-delay: .62s; }
	.overlay nav { position: relative; height: 70%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.3em; text-align: center;
	}
	.overlay ul { list-style: none; padding: 0; margin: 0 auto; position: relative; height: 100%; display: block; width: 100%!important; }
	.overlay ul li { display: block; /*height: 14.2%;*/ height: calc(100% / 10); min-height: 40px; position: relative; opacity: 0; }
	.overlay ul li a { display: block; position: relative; width: 100%!important; color:var(--white)!important; text-decoration: none; overflow: hidden; height: auto!important; text-align: center; }
	.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after { width: 100%; }
	.overlay ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 3px; background:var(--white); transition: .35s; }
	@-webkit-keyframes fadeInRight {
	  0% { opacity: 0; left: 20%; }
	  100% { opacity: 1; left: 0; }
	}
	.overlay ul li a.active { border: none!important; }
	
	@keyframes fadeInRight {
	  0% { opacity: 0; left: 20%; }
	  100% { opacity: 1; left: 0; }
	}
	#header_nav .overlay .overlay-menu li a:hover { border-bottom: none!important; }
	.navbar-toggle { display: inline-block; } 
	
	/* 헤더 스크롤 내렸을때 */
	header.active .button_container span { background: #333; }
	
	
	
}

/* ==============================================================
   🌟 모바일 환경: 햄버거 메뉴 및 오버레이 (max-width: 991px 기준)
============================================================== */
@media (max-width: 991px) { /* 태블릿, 모바일 사이즈에서 적용 */

/* 1. PC용 가로 네비게이션 메뉴 숨기기 & 오버레이 전체 화면 덮기 */
    header {
        background-color: rgba(181, 235, 245, 0.98) !important;
        border-bottom: none !important;
    }
    #top_num {
        color: rgba(181, 235, 245, 0.98) !important;
    }
    #header_nav .overlay {
        position: fixed !important;
        background: rgba(255, 255, 255, 0.98) !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        
        /* 🌟 핵심 해결책: 100%를 100vh(화면 전체 높이)로 변경! */
        height: 100vh !important; 
        
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s, visibility .35s !important;
        
        /* 🌟 화면이 아주 작은 폰을 위해 상하 스크롤 허용 */
        overflow-y: auto !important; 
        overflow-x: hidden !important;
        z-index: 999 !important;
    }
    
    /* 2. 햄버거 버튼 클릭 시 오버레이 메뉴 나타나기 */
    #header_nav .overlay.open {
        opacity: 1 !important;
        visibility: visible !important;
        
        /* 🌟 열렸을 때도 무조건 화면 전체 높이 유지 */
        height: 100vh !important; 
    }

    #header_nav .overlay .overlay-menu {
        position: static !important;
        transform: none !important;         /* 엉뚱한 곳으로 밀려나는 현상 초기화 */
        width: 100%;
    }
    
    #header_nav .overlay .overlay-menu ul {
        display: flex !important;
        flex-direction: column !important;  /* 무조건 위에서 아래로 세로 배치 */
        align-items: center !important;     /* 리스트들을 가운데 정렬 */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #header_nav .overlay .overlay-menu li {
        margin: 0 0 15px 0 !important;      /* PC 우측 여백 다 날리고, 아래쪽 간격만 15px 확보 */
        text-align: center !important;
    }

    /* 🌟 가장 중요한 글씨 설정 (흰색 배경이니까 진한 색으로 강제!) */
    #header_nav .overlay .overlay-menu li a {
        color: #222 !important;             /* 🌟 무조건 진한 검은회색!! (var(--white) 무력화) */
        font-size: 20px !important;         /* 모바일에서 누르기 좋게 큼직하게 */
        font-weight: 600 !important;        
        display: block !important;
        padding: 10px 20px !important;
        height: auto !important;
        line-height: normal !important;
    }

    #header_nav .overlay .overlay-menu li a:hover,
    #header_nav .overlay .overlay-menu li a.active {
        border-bottom: none !important;     /* 모바일에서는 밑줄 지우기 */
        color: #0066ff !important;          /* 활성화 시 파란색 등 포인트 컬러 적용 */
    }

    /* 4. 햄버거 버튼 디자인 (보이게 처리) */
    #header_nav .button_container {
        display: block; /* 모바일에서 버튼 보이기 */
        position: absolute; /* header 안에서 우측 정렬 */
        top: 50%;
        right: 15px; /* 우측 여백 */
        transform: translateY(-50%);
        width: 30px;
        height: 22px;
        cursor: pointer;
        z-index: 1000; /* 오버레이보다 위에 있어야 메뉴를 닫을 수 있음 */
    }

    .navbar-toggle {
        background: transparent;
        border: none;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .navbar-toggle span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: var(--white); /* 스크롤 전 버튼 색상 */
        border-radius: 3px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }
    
    /* 스크롤 내려서 header.active 상태일 때 햄버거 버튼 색상 변경 */
    header.active .navbar-toggle span {
        background: var(--gray_3); 
    }
    
    /* 오버레이 열렸을 때 버튼 색상 고정 (흰 배경 기준) */
    #header_nav .button_container.active .navbar-toggle span {
         background: var(--gray_3);
    }

    .navbar-toggle .top { top: 0px; }
    .navbar-toggle .middle { top: 9px; }
    .navbar-toggle .bottom { top: 18px; }

    /* 5. 햄버거 버튼 클릭 애니메이션 (X 모양으로 변형) */
    #header_nav .button_container.active .navbar-toggle .top {
        top: 9px;
        transform: rotate(135deg);
    }
    #header_nav .button_container.active .navbar-toggle .middle {
        opacity: 0;
        left: -60px;
    }
    #header_nav .button_container.active .navbar-toggle .bottom {
        top: 9px;
        transform: rotate(-135deg);
    }
}

/* ==============================================================
   🌟 PC 환경: 햄버거 버튼 숨기기 (min-width: 992px 기준)
============================================================== */
@media (min-width: 992px) {
    #header_nav .button_container {
        display: none; /* PC 화면에서는 햄버거 버튼 완전히 숨김 */
    }
}