html {
	height: 100%;
	}

body {
	min-height: 100%;
	min-width: 768px;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	background: #F8F9F9;
}

.header {
	background: #F8F9F9;
	width: 100%;
	border-left: 1px solid #C6CDD0;
	border-right: 1px solid #C6CDD0;
}

.header img {
	width: 100%; 
}

.main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	border-left: 1px solid #C6CDD0;
	border-right: 1px solid #C6CDD0;
}


.contentsWrapper {
	background-color: #F8F9F9;
	flex: 1 0 25%;
}

.contents {
	width: calc(100% / 3 * 2);
	margin: 60px 0 0 calc(100% / 6 * 1);
	padding-right: calc(100% / 6 * 1 - 1px);
	padding-top: 20px;
	padding-bottom: 20px;
	border-right: 1px solid #C6CDD0;
	box-sizing: content-box;
}

.navWrapper {
	background: #F8F9F9;
	width: 100%;
	height: 60px;
}

.nav {}

.activityWrapper {
	background-color: #F8F9F9;
	flex: 3 0 75%;
}

.activity {
	width: 100%;
	height: calc(100% - 60px);
}