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

* {
	font-family: 'Noto Sans KR', sans-serif;}

::selection {
	color:transparent;
	text-shadow:0 0 3px #000;}

::-webkit-selection {
	color:transparent;
	text-shadow:0 0 3px #000;}

::-webkit-scrollbar {
	width:3px;
	height:3px;
	background:#d7d5b8;}

::-webkit-scrollbar-thumb {
	background:#000;}

a {
	color:#000;
	text-decoration:none;}

input, textarea {
	outline:none;
	-moz-user-select:auto !important;
	-webkit-user-select:auto !important;
	-ms-user-select:auto !important;
	user-select:auto !important;}

body {
	margin:0;
	padding:0;}

body:after {
	content:'';
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:-2;
	background:url(https://i.imgur.com/P7u13Md.jpg) no-repeat;
	background-size:cover;
	background-position:center top;
	display:block;}

@keyframes cosmo {
	0% {opacity:0;}
	100% {opacity:1;}
}

#cosmo {
	width:800px;
	margin:0 auto;
	animation:cosmo 1s ease forwards;}

header {
	text-align:center;}

header .logo {
	padding:200px 0 120px;}

header .logo img {
	width:150px;}

nav.menu {
	width:100%;
	text-align:center;}

nav.menu ul {
	list-style:none;
	margin:0;
	padding:0;
	display:inline-block;
	text-align:center;}

nav.menu li {
	width:160px;
	height:40px;
	float:left;
	margin:0 10px 20px;
	border:solid #000 1px;
	border-radius:100px;
	background-size:cover !important;
	background-position:center !important;
	overflow:hidden;
	box-sizing:border-box;
	position:relative;}

nav.menu li:nth-child(4) {
	clear:both;
	margin-left:70px;}

nav.menu li:last-child {
	max-width:40px;}

nav.menu li a {
	width:100%;
	height:40px;
	display:block;}

nav.menu li img {
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);}

nav.menu li:hover img {
	opacity:0.3;
	transition:all 0.5s ease;}

#content {
	margin:80px 0;
	clear:both;}

footer {
	text-align:center;
	margin-bottom:100px;}

footer a {
	display:inline-block;
	border-radius:100px;
	border:solid #000 1px;
	padding:6px 50px 8px;
	font-size:11px;
	font-weight:700;
	box-sizing:border-box;}

@media screen and (max-width:860px){
#cosmo {
	width:90%;}
}

@media screen and (max-width:600px){
nav.menu li {
	width:120px;
	height:32px;
	margin:0 5px 10px;}

nav.menu li:nth-child(4) {
	clear:both;
	margin-left:49px;}

nav.menu li:last-child {
	max-width:32px;}

nav.menu li a {
	height:32px;}
}

@media screen and (max-width:450px){
header .logo img {
	width:120px;}

nav.menu li {
	width:100px;
	height:30px;
	margin:0 5px 10px;}

nav.menu li:nth-child(4) {
	margin-left:40px;}

nav.menu li:last-child {
	max-width:30px;}

nav.menu li a {
	height:30px;}

footer {
	margin-bottom:70px;}
}

@media screen and (max-width:390px){
header .logo img {
	width:100px;}

nav.menu li {
	width:80px;
	height:26px;
	margin:0 5px 10px;}

nav.menu li:nth-child(4) {
	margin-left:33px;}

nav.menu li:last-child {
	max-width:26px;}

nav.menu li a {
	height:26px;}

footer {
	margin-bottom:50px;}
}