@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean');

body {position:relative;font-size:16px;min-height:100vh;line-height:1.6;}
body {font-family:'Noto Sans KR',sans-serif;font-weight:400;}
h1,h2,h3,h4,h5,h6,strong,b,th,dt {font-weight:700;}

a {text-decoration:underline;text-underline-offset:5px;text-decoration-style:dotted;text-decoration-thickness:.5px;}
a:focus,
a:visited,
a:hover {text-decoration-style:solid;}
button {cursor:pointer;}

.page-container {position:relative;}

header {position:fixed;left:0;top:0;width:100%;height:48px;z-index:11;transition:background .5s ease-in;}
header h1 a {font-size:0;}
header h1 img {height:48px;padding:5px;}
header .page-container::before {content:'';position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.7);visibility:hidden;opacity:0;backdrop-filter:blur(5px);transition:all .2s ease-in;}
header .nav-toggle {position:absolute;right:0;top:0;z-index:2;}
header .nav-toggle button {position:relative;background:transparent;border:0;width:48px;height:48px;}
header .nav-toggle button i,
header .nav-toggle button::before,
header .nav-toggle button::after {display:block;position:absolute;left:20%;width:60%;height:0;border-top:solid 1px #fff;border-bottom:solid 1px #fff;top:50%;transition:all .2s ease-in .2s;}
header .nav-toggle button::before,
header .nav-toggle button::after {content:'';transform:translateY(-10px);z-index:2;}
header .nav-toggle button::after {transform:translateY(10px);}

body.scrolled header {background:rgba(80,80,80,.9);}

@media screen and (max-width:1023.8px) {
	header nav {position:fixed;top:0;left:100vw;transform:none;width:80%;max-width:420px;background:#a4a09f;padding:50px 60px 20px 16px;height:100%;visibility:hidden;opacity:0;transition:all .2s ease-in;overflow:auto;}
	header nav a {color:#fff;display:block;text-decoration:none;}
	header nav > ul {position:relative;z-index:2;}
	header nav > ul > li > a {font-size:2em;}
	header nav > ul ul {border-top:solid 1px rgba(0,0,0,.2);padding:.5em 0;line-height:2;transition:none;}

	body.nav-on header nav {transform:translateX(-100%);visibility:visible;opacity:1;}
	body.nav-on header .page-container::before {visibility:visible;opacity:1;}
	body.nav-on header .nav-toggle button i,
	body.nav-on header .nav-toggle button::before,
	body.nav-on header .nav-toggle button::after {border-color:#fff;}
	body.nav-on header .nav-toggle button i {left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);border-color:transparent;}
	body.nav-on header .nav-toggle button::before {transform:rotateZ(-135deg);}
	body.nav-on header .nav-toggle button::after {transform:rotateZ(135deg);}
}

footer {background:#00a864;color:#fff;padding:50px 1rem;position:relative;}
footer .page-container {z-index:2;}
footer .bg {position:absolute;left:0;top:0;width:100%;height:100%;position:absolute;background:url(/assets/image/bottom-bg.png) no-repeat 50% 100%;background-size:contain;}
footer a {color:#fff;text-decoration:none;}
footer ul {line-height:2;}
footer .go-sns {margin-top:2em;text-align:center;font-size:1.6em;}
footer .go-sns a {margin:0 5px;}

@media screen and (min-width:768px) {
	.page-container {max-width:768px;margin-left:auto;margin-right:auto;}

	header {height:80px;}
	header .page-container {max-width:100%;}
	header h1 img {height:60px;margin-top:5px;}
	header .nav-toggle button {height:80px;width:80px;}
	header .nav-toggle button::before {transform:translateY(-14px);}
	header .nav-toggle button::after {transform:translateY(14px);}

	header nav {padding:80px 60px;}

	footer {padding:10px 20px 30px;}
	footer .bg {background-size:contain;}
	footer .go-sns {position:absolute;right:0;top:0;margin:0;}
	footer .go-sns a {margin:0;}
	footer .go-sns a + a {margin-left:5px;}
}

@media screen and (min-width:1024px) {
	.page-container,
	header .page-container {max-width:960px;}

	header .nav-toggle {display:none;}
	header nav {transition:none;padding:0;position:absolute;top:0;left:40%;width:60%;}
	header nav a {display:block;text-align:center;text-decoration:none;}
	header nav > ul {display:flex;}
	header nav > ul > li {flex:1 1 1%;position:relative;}
	header nav > ul > li > a {display:flex;align-items:center;justify-content:center;height:80px;color:#fff;font-weight:700;font-size:1.1em;white-space:nowrap;}
	header nav > ul ul {display:block;position:absolute;min-width:100%;visibility:hidden;background:transparent;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.3));opacity:0;transform:translateY(-20px);transition:all .3s ease-in;}
	header nav > ul > li:hover ul,
	header nav > ul > li:focus-within ul {visibility:visible;opacity:1;transform:none;}
	header nav > ul > li:hover > a,
	header nav > ul > li:focus-within > a {color:#ffeb3b;}
	header nav > ul ul a {padding:8px 0;background:#fff;position:relative;z-index:2;color:#000;text-decoration:none;font-size:0.9em;}
	header nav > ul ul li:first-child a {border-top-left-radius:5px;border-top-right-radius:5px;}
	header nav > ul ul li:last-child a {border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
	header nav > ul ul li + li {margin-top:1px;}
	header nav > ul ul li:first-child a::before {content:'';display:block;position:absolute;left:calc(50% - 6px);top:-6px;width:12px;height:12px;background:#fff;transform:rotateZ(45deg);}
	header nav > ul ul a:focus,
	header nav > ul ul a:focus::before,
	header nav > ul ul a:hover,
	header nav > ul ul a:hover::before {background:rgb(167, 236, 161) !important;}
}

@media screen and (min-width:1280px) {
	.page-container,
	header .page-container {max-width:1200px;}
}