.header-left {
	width:100%;
	min-height:100%;
	overflow:hidden}
.header-left.open {
	left:0}
#logowrap {
	width:100%}
#mobilewrap {}

@media all and (max-width:800px) {
	.header-left {}
	.header-left #mobilewrap {
		position:absolute;
		z-index:1000;
		left:-320px;
		width:320px;
		min-height:calc(100% - 245px);
		background:#ebebeb;
		-webkit-transition:left .45s ease-in-out;
		-moz-transition:left .45s ease-in-out;
		transition:left .45s ease-in-out}
	.header-left.open #mobilewrap {
		left:0;
		height:calc(100% - 245px)}
}

@media all and (min-width:800px) {
	.header-left {
		position:absolute;
		width:320px}
	#mobilewrap {
		min-height:calc(100% - 300px);
		background:#ebebeb;
		color:white}
	.header-left ~ #contents {
		width:calc(100% - 320px);
	 display:inline-block;
		margin-left:320px}
}
@media all and (min-width:1300px) {
	.header-left {
		position:absolute;
		width:420px}
	#mobilewrap {
		min-height:calc(100% - 300px);
		background:#ebebeb;
		color:white}
	.header-left ~ #contents {
		width:calc(100% - 420px);
	 display:inline-block;
		margin-left:420px}
}