@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

body{ overflow-x: hidden;}

/*menu*/
header{ width: 100%; height:100px;  background:#fff; position: fixed; z-index: 150; box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.03);}
header .header-in{ width:100%; height:100%; display: flex; justify-content: space-between;}
header .header-in .nav{ height:100px; float: left; margin: 0 auto;}
header .header-in .nav ul{ width: 100%; display:flex; justify-content:space-between; }
header .header-in .nav ul li{font-family: 'Roboto', sans-serif; font-size:14px; font-weight: 400; margin:40px 22px; text-align:center; position: relative;}
header .header-in .nav ul li.on{font-family: 'Roboto', sans-serif; font-size:14px; font-weight: 500; margin:40px 22px; border-bottom: 1px solid #000; padding-bottom:10px; }
header .header-in .nav ul li a{width:100%; height:100%; display:inline-block; font-size: 14px;}
.header-in .nav ul li .depth2{  display:none; position: absolute; width: 180px; top: 50px; left: 50%; transform: translateX(-50%);  justify-content: center; align-items: center; background: #000; box-shadow: 0 0 20px rgba(0, 0, 0, 0.07); color:#fff;}
.header-in .nav ul li .depth2 > li{ font-family: 'Noto Sans KR', sans-serif; font-weight: 400; color:#fff; margin: 20px;  }
.header-in .nav ul li .depth2 > li a{font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size:13px; font-weight:400; color:#fff; display: block; line-height: 18px;}
.header-in .nav ul li .depth2 li:hover a{ font-family: 'Noto Sans KR', sans-serif; font-weight: 400;  font-weight:500; color:#fff; display: block;}

/*logo*/
header .header-in .logo{ width: 120px; margin-left: 40px; margin-top: 30px; float: left;}
header .header-in .logo h1{width: 100%; height: 100%; background: url(../img/logo.png) no-repeat; background-size: 100%;}

/*ham-btn*/
#m-menu{ display:none; }
header .header-in .res-btn{ width: 30px; margin-right: 40px; height: 100px; cursor: pointer;  margin-top: 30px;z-index: 100;}

#footer{ width:100%; height: 330px; border-top: 1px solid #505050; margin-top: 120px;}
#footer .footer-in{ margin:64px auto; display:flex; justify-content:space-around; }
#footer .footer-in .left{ margin-top:40px; display: none;}
#footer .footer-in .right{ margin-top:40px; display: none;}
#footer .footer-in .left p{ margin-bottom: 50px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 12px; text-align: center;}
#footer .footer-in .center a{ display: block; margin: 10px auto; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 16px; text-align: center; color: #909090;text-align: center;}
#footer .footer-in .center p{ margin: 20px auto; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 12px; text-align: center; color: #909090;text-align: center;line-height: 24px;}
#footer .footer-in .center p span a{ margin: 20px auto; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 12px; text-align: center; color: #909090;text-align: center; display: inline; transition: 0.3s;}
#footer .footer-in .center .copy:hover{color: #ff5a53;}

#footer .footer-in .right p{ margin-bottom: 50px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 12px; text-align: center;}
#footer .footer-in .center .foot-logo{ width:110px; height: 50px; margin: 0 auto;}
#footer .footer-in .center .foot-logo .logo-img{ width:100%; height: 100%; background: url(../img/logo.png) no-repeat; background-size: 100%;}

/*****************************************************반응형************************************************************/
@media screen and (max-width: 780px){
	#m-menu a #logo{ position:absolute; top:30px; left:20px; }
	#m-menu a #logo .logo-img{ width:110px; height:50px; background:url(../img/logo.png) no-repeat; background-size:100%; }
	#m-menu .res-btn{ width:30px; position:absolute; top:35px; right:80px;  }
/*	header .header-in .res-btn{ width: 30px; margin-right: 40px; height: 100px; cursor: pointer;  margin-top: 30px;z-index: 200;}*/

	#nav{ display:none; }
	header .right{ width:100%; transition: .3s; }
	#m-menu{ position:fixed; top:0; z-index:180; width:100%; height:100px; background: #fff; display: block;}
	#m-menu .m-menu-in{ display:none; }
	#m-menu.on{ top: -100px; }
	#m-menu .m-menu-in{ position:fixed; top:78px; z-index:999; width:100%; background:#545354; }
	#m-menu .m-menu-in ul, #m-menu .m-menu-in li{ margin: 0; padding: 0; font-size:14px; font-weight:400; }
	#m-menu .m-menu-in a{ color:#fff; }
	#m-menu .m-menu-in{ margin:0 auto; width:100%; height:0px; overflow:hidden; transition-timing-function:ease-in-out; transition:.4s; }
	#m-menu .m-menu-in.on{ height:auto; display:block; }
	#m-menu .m-menu-in ul{ font-weight:500; background:#000; }
	#m-menu .m-menu-in ul li a{ padding-left:7%; }
	#m-menu .m-menu-in > ul{ padding:20px 0px; }
	#m-menu .m-menu-in > ul > li{ position:relative; line-height:36px; cursor:pointer; }
	#m-menu .m-menu-in > ul > li > img{ position:absolute; top:15px; right:7%; }
	#m-menu.on .m-menu-in > ul > li > img{ top:-80px; }
	#m-menu .m-menu-in > ul > li > ul > li > a{ padding-left:8%; font-size:12px; font-weight:300; display: block; width: 100%; }
	#m-menu .m-menu-in ul li .depth2{ overflow:hidden; transition:none; display:none; background:#666; }
    #m-menu .m-menu-in ul li .depth2 li{border-bottom: 1px solid rgba(255,255,255,.05); }
    #m-menu .m-menu-in ul li .depth2 li:last-child{border: none; }
	input[id="hamburger"]{ display:none; }
	input[id="hamburger"] + label{
		display: block;
		width: 28px;
		height: 21px;
		position: absolute;
		right: 20px;
		top:40px;
		cursor: pointer;
	}
	input[id="hamburger"] + label span{
		display: block;
		position: absolute;
		width: 28px;
		height: 2px;
		border-radius: 10px;
		transition: all 0.35s;
		background: #545354;
	}
	input[id="hamburger"] + label span:nth-child(1) {top:2px;}
	input[id="hamburger"] + label span:nth-child(2) {top:46%;}
	input[id="hamburger"] + label span:nth-child(3) {bottom:1px;}
	input[id="hamburger"]:checked + label{ z-index:100; }
	input[id="hamburger"]:checked + label span:nth-child(1){top: 50%;}
	input[id="hamburger"]:checked + label span:nth-child(3){bottom: 50%;}
	.hamburger_toggle1{ top:50%; transform:translateY(-50%) rotate(45deg); }
	.hamburger_toggle2{ opacity:0;}
	.hamburger_toggle3{ bottom:50%; transform:translateY(50%) rotate(-45deg); }

	#footer .footer-in .left{ display:none; }
	#footer .footer-in .right{ display:none; }
	#footer .footer-in .center p{ margin: 20px auto; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 10px; text-align: center; color: #909090;text-align: center;line-height: 24px;}
	#footer .footer-in .center p span a{ margin: 20px auto; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size: 10px; text-align: center; color: #909090;text-align: center; display: inline;}
}