/* start reset */
* {
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none;
}

ul,
li {
	list-style: none;
}
/* end reset */


/* start common */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.container {
	width: 100%;
	height: auto;
}
/* end common */


/* start header */
.container
.menu_wrap {
	margin-bottom: 40px;
	width: 100%;
	height: auto;
	background-color: #3da9f4;
}

.container
.menu_wrap
.menu {
	margin: auto;
	width: 960px;
	height: auto;
	background: linear-gradient(#41aff8, #3aa1ec);
}

.container
.menu_wrap
.menu
li {
	width: 25%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	border-left: solid 1px #fff;
	box-sizing: border-box;
	float: left;
}

.container
.menu_wrap
.menu
li:last-child {
	border-right: solid 1px #fff;
}

.container
.menu_wrap
.menu
li
a {
	width: 100%;
	height: 100%;
	color: #fff;
	display: block;
	transition: opacity 0.3s ease-in-out;
}

.container
.menu_wrap
.menu
li
a:hover {
	opacity: 0.5;
}
/* end header */


/* start main */
main {
	margin: 0px auto 80px auto;
	width: 960px;
}

main
section {
	width: 100%;
	height: 500px;
	line-height: 500px;
	text-align: center;
	color: #fff;
}

main
section:not(:last-child) {
	margin-bottom: 40px;
}

main 
#section_01 {
	background-color: #dd0000;
}

main 
#section_02 {
	background-color: #ffaa00;
}

main 
#section_03 {
	background-color: #55dd55;
}

main 
#section_04 {
	background-color: #5555ff;
}
/* end main */


/* start footer */
footer {
	width: 100%;
	height: 40px;
	background-color: #3da9f4;
}

footer
.copyright {
	line-height: 40px;
	text-align: center;
	color: #fff;
}
/* end footer */