@charset "utf-8";

@font-face {
	font-family: 'NanumSquareRoundR';
	src: url(../font/NanumSquareRoundR.ttf) format('truetype');
}
@font-face {
	font-family: 'NanumSquareRoundL';
	src: url(../font/NanumSquareRoundL.ttf) format('truetype');
}
@font-face {
	font-family: 'NanumSquareRoundB';
	src: url(../font/NanumSquareRoundB.ttf) format('truetype');
}

@font-face {
	font-family: 'NanumSquareRoundEB';
	src: url(../font/NanumSquareRoundEB.ttf) format('truetype');
}

@font-face {
	font-family: 'NotoSansKR-Bold';
	src: url(../font/NotoSansKR-Bold.ttf) format('truetype');
}

@font-face {
	font-family: 'NotoSansKR-Medium';
	src: url(../font/NotoSansKR-Medium.ttf) format('truetype');
}

@font-face {
	font-family: 'NotoSansKR-Regular';
	src: url(../font/NotoSansKR-Regular.ttf) format('truetype');
}

*{padding:0; margin:0; color:#333; font-family: "NanumSquareRoundR", "NanumSquareRound";}
body,header,footer{padding:0; margin:0;}

header, section, footer, div, p, ul, ol, li, #wrap{display:block;}
img {border:none; vertical-align:top;}

li{list-style-type:none;}
a:link,a:visited {text-decoration:none; color:#333;}
a:hover,a:focus {/*outline:none;*/}

h2{position:absolute; left:-9999px; top:0; font-size:1px; line-height:0; overflow:hidden; width:1px; height:1px; opacity:0;}
#wrap{width:100%; margin:0 auto; background-color:#fff; overflow:hidden;}
.e_font{font-family: 'Roboto Condensed', sans-serif;}
.bold{font-weight:900;}
.color{color:#d8b15b;}
input[type="button"], input[type="submit"]{cursor:pointer;}

input {
	-webkit-appearance: none;
	-moz-appearance: none;
		appearance: none;

}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }
select::-ms-expand { display:none; }
select {
	-webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    background: url(../img/arrow2.png) no-repeat 95% 50%;
	    background-size: 14px;
			padding: 0 7%;
}
input[type="radio"] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
		appearance: radio !important;
}
input[type="checkbox"] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
		appearance: checkbox !important;
}
#header{position:absolute; top:0; left:0; width:100%;}
	.header_back{position:absolute; left:330px; top:0;}
	#head{width:100%; position:absolute;}
	#head h1{margin:100px auto; text-align:center;}

	#nav_left{position:fixed; left:0; top:50%; margin-top:-370px; z-index:10; width:200px;}
		#nav_left li{position:relative; margin:20% 0;}
		#nav_left li span{display:block; transform:translate(-50px,0px);}
			#nav_left li span img{width:100%;}
		#nav_left li div{position:absolute; z-index:1; top:50%; margin-top:-45px; left:50px;}
			#nav_left li div a.click{font-size:25px; font-weight:bold; margin-bottom:30px; display:block;}
			#nav_left li div p a{font-size:20px; display:block; line-height:30px;}
	#nav_right{position:fixed; right:0; top:50%; margin-top:-500px; z-index:10;}
		#nav_right li{position:relative; margin:10% 0; width:200px;}
		#nav_right li span{display:block; transform:translate(80px,0px);}

			#nav_right li:nth-child(1) span{transform:translate(100px,0px);}
			#nav_right li:nth-child(2) span{transform:translate(120px,0px);}
			#nav_right li:nth-child(2) span img{width:70%; padding:10% 0 0;}
			#nav_right li:nth-child(3) span img{width:170%; margin-top:-15%;}
			#nav_right li:nth-child(4) span img{width:100%;}

		#nav_right li div{position:absolute; z-index:1; top:50%; margin-top:-45px; right:50px;}
			#nav_right li div a.click{font-size:25px; font-weight:bold; font-weight:bold; margin-bottom:30px; display:block; text-align:right;}
			#nav_right li div p a{font-size:20px; display:block; line-height:30px; text-align:right;}

	.nav li a{display:block; opacity:0; padding-top:10px; transition:all .5s;}
	.nav li:hover a{opacity:1; padding-top:0; transform:translate(0,0);}
	#nav_left li:hover span{display:block; transform:translate(-30px,0px); transition:all .5s;}
	#nav_right li:hover span{display:block; transform:translate(30px,0px); transition:all .5s;}

	#m_nav{display:none;}

	#nav_right li span img.navIMG{width:80%;}





	@media screen and (min-width:0px) and (max-width:1200px){
		#head{display:none;}
		#m_head{display:block;}

		#m_head{position:relative; width:90%; margin:0 auto; padding:10px 0; z-index:10;}
		.menu{display:block; width:30px; position:absolute; top:20px; right:0; cursor:pointer;}
			.menu span{display:block; background-color:#999; width:30px; height:3px; margin:4px 0;}

		#m_head h1{width:100%; float:none;}
			#m_head h1{width:40%; float:left; height:50px;}
			#m_head h1 img.s1_logo{width:50px; margin-left:30px;}
			#m_head h1 img.s2_logo{width:130px; margin-left:-10px; margin-top:-10px;}
			#m_head h1 img.s3_logo{width:130px; margin-left:0px; margin-top:0px;}
			#m_head h1 img.sign_logo{width:130px; margin-left:0px; margin-top:-10px;}
			#m_head h1 img.logo{width:145px; position:absolute; top:20px; left:0;}
		#m_nav{width:100%; overflow:hidden; float:none; padding-top:0; display:none;}
		#m_nav li{width:100%; float:left; text-align:right; line-height:2em;}
			#m_nav li a.click{font-size:12px;}
			#m_nav li p{display:none;}
			#m_nav li p a{line-height:40px; display:block; font-size:12px;}

			#m_nav li a:hover{color:#d56a55;}
	.header_back{
display: none;
	}
	.s1_logo , .s2_logo , .s3_logo{
		display: none;
	}
	.activeMenu{
		background-color:#fff;
		z-index: 999;
	}
	.hide{
		display: none;
	}

	.hide li{text-align: center; font-size: 18px; font-weight: 100; line-height: 30px;}

	.m_nav_menu_ul{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.m_nav_menu{text-align: center; font-size: 30px; font-weight: bold; line-height: 50px;}

	}