@charset "utf-8";

/* @group design */
article#design{
	height: 100px;
    text-align: center;
    padding-top: 15px;
	background: url(../images/design.jpg) no-repeat;
	background-size: contain;
	background-position: center top;
	background-attachment: fixed;
	}
article#design h1{
	margin: 0 auto;
	font-size: 3em;
	/*opacity: 0.8;*/
	color: #fff;
	}
article#design p{
	color: #fff;
	}
/* @end */

/* @group design-contents */
article#design-contents{
    padding: 1.5em 1.5em 0 1.5em ;
    margin-bottom: 2em;
	}
article#design-contents a{
    background: #fff;
    border: solid 1px #0058aa;
    padding: 0.5em 2em;
    text-decoration: none;
    margin: 2em auto 0;
    width: 8em;
    display: block;
    text-align: center;
	}
article#design-contents a:hover{
    background: #333;
    border: solid 1px #ccc;
    color: #fff;
	}
/* @end */

/* @group news-contents */
article#projects {
    padding: 1em;
	text-align: center;
}
article#projects ul li {
    display: inline-block;
    width: 30%;
	text-align: center;
    margin-bottom: 1.5em;
}
article#projects ul li img{
    width: 90%;
}
/* @end */

/*768px*/
@media screen and (min-width : 768px) {
/* @group news */
article#design{
	height: 100px;
    padding-top: 20px;
    margin: 64px auto 3em;
	background-size: cover;
	}
/* @end */

/* @group news-contents */
article#design-contents{
	max-width: 500px;
	margin: 0 auto 5em;
	}
/* @end */

/* @group projects */
article#projects ul li {
    width: 18%;
}
/* @end */

}

/*1024px*/
@media screen and (min-width : 1024px) {

/* @group news */
article#design{
	height: 125px;
    padding-top: 25px;
    margin: 74px auto 3em;
	}
/* @end */
/* @group news-contents */
article#design-contents{
	max-width: 600px;
	}
/* @end */

/* @group projects */
article#projects {
    max-width: 1200px;
	margin: 0 auto;
}
article#projects ul li {
    width: 13%;
    margin: 2em;
}
/* @end */

}
/* @end */