/* common */
#wrap{position:relative; min-width:320px; height:100%; min-height:500px;}

/* navigation */
#navigation{z-index:999; position:absolute; top:0; left:0; width:117px; height:100%; padding:94px 0 44px 0; min-height:500px; background:#1d273b; box-shadow:2px 2px 3px rgba(3,4,3,0.63); -webkit-box-shadow:2px 2px 3px rgba(3,4,3,0.63); -moz-box-shadow:2px 2px 3px rgba(3,4,3,0.63); box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box;}
#navigation h1{position:absolute; top:0; left:0; display:block; width:117px; height:93px; border-bottom:1px solid #313a4d;}
#navigation h1 img{width:100%; height:100%;}
#navigation .draggable-container{z-index:1; position:relative; width:117px; height:100%; overflow:hidden; user-select:none; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none;}
/*#navigation ul{width:117px; height:9999999px; white-space:nowrap; font-size:0;}*/
#navigation ul {width: 101%;height: 100%;white-space: nowrap;font-size: 0;overflow-y: scroll;padding-right: 17px;}
#navigation ul li{display:block; width:117px; height:43px; line-height:43px; font-size:15px; border-bottom:1px solid #313a4d;}
#navigation ul li a{display:block; height:100%; padding-left:17px;color: #fff;font-weight: inherit;}
#navigation ul li.light a{color:#ff7364;}
#navigation ul li img{width:23px; height:23px; margin-right:10px;}
#navigation .setting{z-index:100; position:absolute; bottom:0; left:0; width:100%; padding-top:1px; background:#273246 /*url(../images/main_line.png) repeat-x*/; background-size:1px 1px;}
#navigation .setting a{display:block; height:100%; height:43px; line-height:39px; text-align:center; font-size:15px;color: #fff;font-weight: inherit;}
#navigation .setting a img{width:23px; height:23px; margin-right:6px;}

/* main */
#main{z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; padding-left:117px; overflow:hidden; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box;}
#main .main-img{position:relative; width:100%; height:100%;background: transparent url('/image/main_pic.png') no-repeat 35% 50%; background-size:cover;}


/* 테블릿  */
@media screen and (min-width:768px) {
	#navigation ul li img{width:27px; height:27px;}
	#navigation{width:220px; padding:170px 0 44px 0;}
	#navigation h1{width:220px;height: 170px;}
	#navigation ul{width:220px;     position: absolute !important;}
	#navigation ul li{width:220px; height: 53px;line-height: 53px; font-size:20px;}
	#navigation .draggable-container{width:220px;}
	#navigation ul li a {padding-left:58px;}

	#navigation .setting a img {margin-top: -5px;}
	#navigation .setting a {   font-size: 21px;}

	/*#navigation{width:150px;}
	#navigation h1{width:150px;}
	#navigation ul{width:150px;}
	#navigation ul li{width:150px;}
	#navigation .draggable-container{width:150px;}
	#navigation ul li a {padding-left:33px;}*/
}
@media screen and (min-width:1024px) {
	#navigation ul li img{width:27px; height:27px;}
	#navigation{width:220px; padding:170px 0 44px 0;}
	#navigation h1{width:220px;height: 170px;}
	#navigation ul{width:220px; }
	#navigation ul li{width:220px; height: 53px;line-height: 53px; font-size:20px;}
	#navigation .draggable-container{width:220px;height: 100%;}
	#navigation ul li a {padding-left:58px;}
	#main { padding-left:220px;}
}