@charset "utf-8";


@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);




body{width:100%; height:auto; word-break:keep-all;  	
font-family: 'Jeju Gothic', serif;}
a{display: block; color:#090909;}
figure, figcaption{margin: 0; padding: 0;}


#header{width:100%; height:50px;}
#header .nav_wrap{width:70%; height:100%;margin:0 auto;}
#header .nav_wrap h1{float:left; margin-top:5px; margin-right:50px;}
#mnav ul{overflow:hidden;float:left;}
#mnav ul li{float:left;}
#mnav ul li a{ margin-left:30px; margin-top:20px;}
#header .nav_wrap .login a{float:right; background:#363636; padding:5px 20px; font-size:12px; border-radius:20px; margin-top:15px; color:#fff;}


#toggle{display:none;}





#history{width:100%; height:1600px; background:#090909; padding:100px 0;}

#history h2{color:#fff; font-size:30px; text-align:center; margin-bottom:100px;}

#history .history_bg{ width:800px; height:1270px; margin:0 auto; background:url(../imgs/history_bg.png) no-repeat center 0; position:relative;}
#history .history_bg ul li h3{color:#fff; font-size:30px; text-align:center;}
#history .history_bg ul li p{color:#fff; font-size:18px;text-align:center;}

#history .history_bg ul li{position:absolute;}

#history .history_bg .hy01{ top:50px; left:50px;}
#history .history_bg .hy02{ top:50px; left:320px;}
#history .history_bg .hy03{ top:100px; right:50px;}
#history .history_bg .hy04{ top:250px; right:50px;}
#history .history_bg .hy05{ top:600px; left:50px;}
#history .history_bg .hy06{ top:940px; right:50px;}
#history .history_bg .hy07{ top:1300px; left:70px;}
#history .history_bg .hy07 h3{color:#f88a53;}
#history .history_bg .hy07 p{color:#f88a53; font-size:25px;}

#history .history_bg .hy2015{width:250px; height:160px; background:url(../imgs/2015.png) no-repeat center center; top:430px; left:230px;}
#history .history_bg .hy2016{width:250px; height:160px;background:url(../imgs/2016.png) no-repeat center center; top:830px; left:310px;}
#history .history_bg .hy2017{width:250px; height:160px;background:url(../imgs/2017.png) no-repeat center center; top:1220px; right:-20px;}



#vision{width:100%; height:500px; border-bottom:1px solid #ededed; padding:100px 0;}
#vision h2{font-size:30px; text-align:center; margin-bottom:50px;}

#vision ul{width:800px; margin:0 auto; }
#vision ul li{font-size:20px;width:100%; height:80px; padding-left:80px; box-sizing:border-box; margin-bottom:20px; }

#vision ul li:nth-child(1){background:url(../imgs/vision01.png) no-repeat 15px center; background-size:50px; padding-top:30px;}
#vision ul li:nth-child(2){background:url(../imgs/vision03.png) no-repeat 10px center;background-size:60px;padding-top:30px;}
#vision ul li:nth-child(3){background:url(../imgs/vision02.png) no-repeat 10px center;background-size:60px;padding-top:30px;}
#vision ul li:nth-child(4){background:url(../imgs/vision04.png) no-repeat 10px center;background-size:60px; padding-top: 15px;}


#footer{width:100%; height:200px; }
#footer .f_wrap{width:60%; height:50px;margin:0 auto;line-height:50px;}

#fnav{float:left;}
#fnav ul li{float:left;}
#fnav ul li a{font-size:12px; color:#363636; margin-right:20px;}

#footer .f_wrap .sns{float:right; margin-top:10px;}
#footer .f_wrap .sns ul li{float:left;margin-left:15px; }
#footer .f_wrap .sns ul li a{text-indent:-9999px; }
#footer .f_wrap .sns ul li:nth-child(1) a{background:url(../imgs/blog.png) no-repeat center center ; background-size:18px; width:18px; height:25px;}
#footer .f_wrap .sns ul li:nth-child(2) a{background:url(../imgs/facebook.png) no-repeat center center; background-size:14px; width:14px;height:25px;}
#footer .f_wrap .sns ul li:nth-child(3) a{background:url(../imgs/insta.png) no-repeat center center; width:25px;height:25px; }
#footer .f_wrap .sns ul li:nth-child(4) a{background:url(../imgs/kakao.png) no-repeat center center; background-size:28px; width:28px;height:25px;}


#footer h2{font-size:18px; text-align:center;  margin-top:30px; margin-bottom:10px; color:#828282;}
#footer p{text-align:center; font-size:14px; line-height:1.4em; color:#828282;}







/*알림창*/


/*1680*/
@media screen and (max-width:1680px) {
	
}



/*1440*/
@media screen and (max-width:1440px) {
	#header .nav_wrap{width:80%; }
	
	#footer .f_wrap{width:70%; }
	
	
	
}


/*1360*/
@media screen and (max-width:1360px) {
	#slides .slides_contents {width:90%;}

	
}


/*1280*/
@media screen and (max-width:1280px) {
	
}


/*1024*/
@media screen and (max-width:1024px) {
	#header .nav_wrap{width:90%; }
	#header .nav_wrap h1{float:left; margin-top:5px; margin-right:10px;}
	#mnav ul li a{ margin-left:20px; font-size:14px;}
	
	#history{height:1200px;}
	#history .history_bg{ width:600px; height:1000px; margin:0 auto; background-size:600px; }
	#history .history_bg ul li h3{font-size:22px;}
	#history .history_bg ul li p{font-size:18px;}
	
	#history .history_bg .hy01{ top:30px; left:20px;}
	#history .history_bg .hy02{ top:30px; left:230px;}
	#history .history_bg .hy03{ top:60px; right:40px;}
	#history .history_bg .hy04{ top:200px; right:50px;}
	#history .history_bg .hy05{ top:450px; left:30px;}
	#history .history_bg .hy06{ top:700px; right:30px;}
	#history .history_bg .hy07{ top:960px; left:40px;}
	#history .history_bg .hy07 p{ font-size:20px;}

	
	#history .history_bg .hy2015{width:200px; height:150px;  background-size:180px;top:320px; left:170px;}
	#history .history_bg .hy2016{width:200px; height:150px; top:620px; left:230px; background-size:180px;}
	#history .history_bg .hy2017{width:200px; height:150px;top:910px; right:-20px; background-size:200px;}
	
	#vision ul{width:600px;}
	#vision ul li:nth-child(2){padding-top:15px;}
	#vision ul li:nth-child(3){padding-top:15px;}
		

	
	#footer h2{font-size:16px;}
	#footer p{font-size:12px;}
	
	
}


/*768*/
@media screen and (max-width:768px) {
	#header{position:fixed; top:0; right:-200px; width:200px; height:100%; background:rgba(255,255,255,0.9); z-index:1000; transition:0.5s;}
	#header .nav_wrap h1{border-bottom:1px solid #ededed; float:none; margin:10px 0; text-align:center;}
	#header .nav_wrap h1 a{display:inline-block; padding:10px 0; }
	#mnav ul{float:none; margin-bottom:50px;}
	#mnav ul li{float:none; height:50px; line-height:50px;}
	#mnav ul li a{margin:0; display:inline; padding-left:20px;}
	#header .nav_wrap .login a{float:none; display:inline; margin-left:50px;}
	
	#toggle{display:block; position:fixed; top:30px; right:30px; width:30px; height:30px; transition:0.5s;}
	#toggle a img{position:absolute; top:0; left:0; width:100%; z-index:1000;}
	
	#toggle .close{display:none;}
	
	
	#footer .f_wrap{width:90%;}
	
	
	
	
	
	
	
}


/*500*/
@media screen and (max-width:500px) {
	
	#history{height:700px;}
	#history h2{font-size:20px; margin-bottom:50px;}
	#history .history_bg{width:360px; height:600px; background-size:360px;}
	#history .history_bg ul li h3{font-size:16px;}
	#history .history_bg ul li p{font-size:10px;}
	
	#history .history_bg .hy01{ top:20px; left:10px;}
	#history .history_bg .hy02{ top:20px; left:130px;}
	#history .history_bg .hy03{ top:50px; right:20px;}
	#history .history_bg .hy04{ top:100px; right:20px;}
	#history .history_bg .hy05{ top:260px; left:20px;}
	#history .history_bg .hy06{ top:420px; right:20px;}
	#history .history_bg .hy07{ top:580px; left:20px;}
	#history .history_bg .hy07 p{font-size:14px;}
		
	
	#history .history_bg .hy2015{width:130px; height:90px; top:190px; left:100px; background-size:110px;}
	#history .history_bg .hy2016{width:130px; height:90px; top:370px; left:130px; background-size:110px;}
	#history .history_bg .hy2017{width:130px; height:90px; top:550px; right:0px; background-size:130px;}
	
	#vision{ height:450px;}
	#vision h2{font-size:20px;}
	#vision ul{width:320px;}
	#vision ul li{font-size:14px; padding-left:60px;}
	#vision ul li:nth-child(1){background-size:40px; background-position:10px center;}
	#vision ul li:nth-child(2){background-size:45px; background-position:7px center; padding-top:25px;}
	#vision ul li:nth-child(3){background-size:45px; background-position:7px center; padding-top:25px;}
	#vision ul li:nth-child(4){background-size:45px; background-position:7px center; padding-top:20px;}
	
	
	#footer{height:300px;}
	#fnav{width:100%; overflow:hidden;}
	#footer .f_wrap .sns{width:100%; margin-top:0; overflow:hidden; margin-bottom:50px;}
	#footer .f_wrap .sns ul li{margin:0; margin-right:15px;}
	
	#footer h2{font-size:16px;}
	#footer p{font-size:12px;}
	
	
	

	
	
	
	
}


/*320*/
@media screen and (max-width:320px) {
	#history{height:600px; padding:60px 0;}
	#history .history_bg{width:300px; height:500px;background-size:300px;}
	#history .history_bg ul li h3{font-size:14px;}
	#history .history_bg ul li p{font-size:8px;}
	#history .history_bg .hy01{ top:15px; left:5px;}
	#history .history_bg .hy02{ top:15px; left:110px;}
	#history .history_bg .hy03{ top:45px; right:15px;}
	#history .history_bg .hy04{ top:100px; right:25px;}
	#history .history_bg .hy05{ top:220px; left:15px;}
	#history .history_bg .hy06{ top:350px; right:15px;}
	#history .history_bg .hy07{ top:480px; left:10px;}
	#history .history_bg .hy07 p{font-size:12px;}
	
	#history .history_bg .hy2015{width:100px; height:85px; top:150px; left:90px; background-size:90px;}
	#history .history_bg .hy2016{width:100px; height:85px; top:300px; left:110px; background-size:90px;}
	#history .history_bg .hy2017{width:100px; height:85px; top:450px; right:0px; background-size:100px;}
	
	
	#vision{ height:400px; padding:50px 0;}
	#vision h2{margin-bottom:50px;}
	#vision ul{width:300px;}
	#vision ul li{font-size:12px; height:60px;}
	#vision ul li:nth-child(1){background-size:35px; background-position:12px center; padding-top:23px;}
	#vision ul li:nth-child(2){background-size:40px; background-position:10px center; padding-top:15px;}
	#vision ul li:nth-child(3){background-size:40px; background-position:10px center; padding-top:15px;}
	#vision ul li:nth-child(4){background-size:40px; background-position:10px center; padding-top:10px;}
	
	
	
	
	
	#footer{height:250px;}
	#footer h2{font-size:14px;}
	#footer p{font-size:10px;}
	#fnav ul li a{margin-right:10px;}
	
	
	
}