@charset "utf-8";



/*--------------------------------------------------------*/
/*		titleBar & toggle & navPanel
/*--------------------------------------------------------*/

html, body {overflow-x: hidden; min-width: 320px; background:#fff;}
#header #nav{display:none;}

#slideNav-toggle {
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition: -moz-transform 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s ease;
	-ms-transition: -ms-transform 0.3s ease;
	transition: transform 0.3s ease;
	display: block;
	position:fixed;
	top: 8px;
	z-index: 99;
	color:rgba(0,0,0,0.85);
	width: 48px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	z-index: 106;
	background:rgba(255,255,255,0.5);
	border-radius: 8px;
	transition: all .3s ease;
	}
#slideNav-toggle .toggle{display:block;width:inherit;height:inherit;line-height:inherit;color:inherit;}
#slideNav-toggle .toggle:before{content:'\e002';font-family:'intaeFont';font-size: 22px;font-weight:normal;display:inline-block;margin-top:-3px;}
#slideNav-toggle:hover{background:rgba(255,255,255,0.9);}

#slideNav-toggle.slideNav-left{left:8px;}
#slideNav-toggle.slideNav-right{right:8px;}


/*--------------------------------------------------------*/
/*		Slide transition
/*--------------------------------------------------------*/
#navPanel {
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition: -moz-transform 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s ease;
	-ms-transition: -ms-transform 0.3s ease;
	transition: transform 0.3s ease;
	display: block;
	height: 100%;
	overflow-y: auto;
	position: fixed;
	top: 0;
	width: 280px;
	padding-bottom:50px;
	z-index: 999;
	}
#page-wrapper {
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition: -moz-transform 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s ease;
	-ms-transition: -ms-transform 0.3s ease;
	transition: transform 0.3s ease;
	position:relative;
	}

#navPanel.slideNav-left{left:0;-moz-transform: translateX(-280px); -webkit-transform: translateX(-280px); -ms-transform: translateX(-280px); transform: translateX(-280px);}
body.navPanel-visible #page-wrapper.slideNav-left{-moz-transform: translateX(280px);-webkit-transform: translateX(280px);-ms-transform: translateX(280px);transform: translateX(280px);}
body.navPanel-visible #page-wrapper.slideNav-left:after{content:''; width:100%; height:100%; display:block; position:absolute; top:0; left:0; background:rgba(0,0,0,0.4); z-index:80;}
body.navPanel-visible #slideNav-toggle.slideNav-left{-moz-transform: translateX(280px);-webkit-transform: translateX(280px);-ms-transform: translateX(280px);transform: translateX(280px);}
body.navPanel-visible #navPanel{-moz-transform: translateX(0);-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}


#navPanel.slideNav-right{right:0;-moz-transform: translateX(280px); -webkit-transform: translateX(280px); -ms-transform: translateX(280px); transform: translateX(280px);}
body.navPanel-visible #page-wrapper.slideNav-right{-moz-transform: translateX(-280px);-webkit-transform: translateX(-280px);-ms-transform: translateX(-280px);transform: translateX(-280px);}
body.navPanel-visible #page-wrapper.slideNav-right:after{content:''; width:100%; height:100%; display:block; position:absolute; top:0; right:0; background:rgba(0,0,0,0.4); z-index:80;}
body.navPanel-visible #slideNav-toggle.slideNav-right{-moz-transform: translateX(-280px);-webkit-transform: translateX(-280px);-ms-transform: translateX(-280px);transform: translateX(-280px);}