@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'SEBANG_Gothic_Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SEBANG_Gothic_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TwaySky';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_tway@1.0/twaysky.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PyeongtaekAnbo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408@1.0/PTAnboR.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
body{font-family: 'SEBANG_Gothic_Regular', sans-serif;}
.pfont{font-family: 'PyeongtaekAnbo', sans-serif;}
.tfont{font-family: 'TwaySky', sans-serif;}
/* 퀵 메뉴 */
#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: #434656; }
#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: rgba(255,255,255,0.4); 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; background-color: rgba(255, 255, 255, 1); color: #888; }
header .logo a { color: #333; }
header .logo p { font-size: 1.1rem; margin-left: 1rem; }
.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: #333; font-size: 1.05em; font-weight: normal; }
	#header_nav .overlay .overlay-menu li a:hover, #header_nav .overlay .overlay-menu li a.active { color: var(--point); border-bottom: solid 5px var(--point); }

/* 헤더 스크롤 내렸을때 background-color:var(--white);*/
header.active { background-color: rgba(255,255,255,0.7);  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 #top_num { display: none; }
header.active #header_nav .overlay .overlay-menu li a { height: 80px; line-height: 80px; }
header.active .logo a { color: #333; }

@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 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: #434656; 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; }
	
	
	
}