@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&display=swap');
 header {width:100%; min-width: 1160px;  border-bottom: 1px solid #fff; height: 80px; position: sticky;  top: 0;  left: 0; z-index: 999;}
 header.fixedHead{background-color: #000; transition: background-color 0.5s;}
 .header-inner {height:80px;width:1160px;background-color:transparent; margin: 0 auto;}
 
 /* logo */
 header h1 {height:100%;width:200px;text-align: center;vertical-align: middle;display: inline-block;}
 header h1 img {width: 150px; padding-top:20px;}
 
 header ul.header-menu {float: right;width: 850px;}
 header ul.header-menu > li {display: inline-block;height:80px;line-height: 80px;margin-right:-5px;position: relative; border-bottom:1px solid transparent;}
 header ul.header-menu > li > a {display: inline-block; padding: 0px 45px 0 18px; height:100%; font-size: 15px;background-repeat:no-repeat; background-position:87% 53%; background-image:url(../images/arrow_down.png);background-size: 10px;transition:0.2s; }
 header ul.header-menu > li:last-child > a img {width:22px; vertical-align: sub;}
 header ul.header-menu > li:hover > ul {display: block;}
 header ul.header-menu > li > ul {display: none; width: max-content; position: absolute;  top:79px; left:0; background-color:rgba(0, 0, 0, 0.8);     border-top: 1px solid #ed6d2b;}
 header ul.header-menu > li > ul > li > a{display: block; padding:0 18px; line-height: 45px; font-size: 15px;}
 header ul.header-menu > li > ul > li:hover a {color:#ed6d2b;}
 
input[id="m-menu"] {display: none;}


@media screen and (max-width: 700px) {
	header{min-width: 100%;}
	
	/* 펼치기 버튼  */
	label[for="m-menu"] {float:right; width:80px; height:80px; background: url(../images/m-menu.png) no-repeat center center / 25px 25px; cursor:pointer;}
	input[id="m-menu"]:checked ~ label {top:23px; background-image:url(../images/delete-cross.png);}
	
	/* 모바일 메뉴 */
	header { border-bottom:none;}
	header h1{height: 80px;}
	.header-inner {width:100%; background-color: #000;}
	header ul.header-menu {display: none;}
	
	input[id="m-menu"]:checked ~ .header-menu {display: block; float: left; height: calc(100vh - 80px); width:100%; overflow:auto; background-color: #000;}
	input[id="m-menu"]:checked ~ .header-menu li { display: block; height: auto; width:100%; line-height: 50px; border-top: 1px solid #333;}
	input[id="m-menu"]:checked ~ .header-menu > li > a { background-image: none; color:#ed6d2b; font-weight: bold;}
	input[id="m-menu"]:checked ~ .header-menu > li > ul { width: 100%; display: block;position: unset; background: none; border: none;}
	header ul.header-menu > li > ul > li:hover a{color: #fff;}
}