* { margin: 0; padding: 0; list-style: none; color: inherit; text-decoration: none; outline: none; font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; }

.menu { width: 100%; height: 100px; display: flex; justify-content: space-between; align-items: center; background-color: #fff; color: #666; padding: 0 50px; }
.menu h1 { width: 240px; height: 39px; background: url(logo.png) center no-repeat; background-size: cover; }
.menu ul { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
.menu ul li { font-size: 18px; height: 100%; line-height: 98px; font-weight: 600; position: relative; margin: 0 10px; }
.menu ul li a { width: 100%; height: 100%; display: block; position: relative; padding: 0 20px; }
.menu ul li a:after { content:''; width: 0; height: 5px; background-color: #112b50; position: absolute; left: 0; right: 0; margin: auto; bottom: 0; transition: 0.3s; }
.menu ul li:last-child { margin-right: 0; }
.menu ul li.active { color: #112b50; }
.menu ul li.active a:after { width: 100%; }
.menu ul li:hover { color: #112b50; }
.menu ul li:hover a:after { width: 100%; }

#pano { width: 100%; height: calc(100% - 0px); }



@media all and (max-width: 1024px){
	.menu { padding: 0 30px; }
	.menu h1 { width: 100px; height: 32px; }
	.menu ul li { font-size: 16px; margin: 0 5px; }
	.menu ul li a { padding: 0 15px; }
}

@media all and (max-width: 768px){
	.menu { height: 80px; padding: 0 25px; padding-right: 0; }
	.menu h1 { width: 80px; height: 26px; }
	.menu ul { width: 300px; flex-wrap: wrap; justify-content: center; padding: 5px 0; }
	.menu ul li { font-size: 13px; height: auto; margin: 0 0px; line-height: 100%; }
	.menu ul li a { padding: 10px; }
	.menu ul li a:after { height: 3px; }
	#pano { width: 100%; height: calc(100% - 80px); }
}