@charset "utf-8";

/*-----------------------------------------------
 content
-----------------------------------------------*/

/* graphic */

div#content{
	min-height: 1000px;
	background-color: transparent;
}

div#content{
	background-image: url(../img/graphic/bg.jpg);
	background-color: #fff;
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

h1{
	position: absolute;
	top: 32px;
	left: 109px;
	z-index: 10;
}

ul.graphic-list{
	width: 820px;
	margin: 0 auto;
	padding-top: 124px;
}

ul.graphic-list li{
	position: relative;
	float: left;
	width: 192px;
	height: 115px;
	margin: 0 11px 22px 0;
	line-height: 0;
}

ul.graphic-list li img{
	width: 192px;
	height: 115px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;-webkit-backface-visibility: hidden;
}

ul.graphic-list li a:hover img{
	border: 8px solid #fc2258;
	animation: tmbover 1s;
	-webkit-animation: tmbover 1s;
	-moz-animation: tmbover 1s;
	-ms-animation: tmbover 1s;
}

@keyframes tmbover {
	0% {
		background-color: rgba(255,255,255,0);
	}
	10% {
		background-color: rgba(255,255,255,0.4);
	}
	100% {
		background-color: rgba(255,255,255,0);
	}
}

@-webkit-keyframes tmbover {
	0% {
		background-color: rgba(255,255,255,0);
	}
	10% {
		background-color: rgba(255,255,255,0.4);
	}
	100% {
		background-color: rgba(255,255,255,0);
	}
}
@-moz-keyframes tmbover {
	0% {
		background-color: rgba(255,255,255,0);
	}
	10% {
		background-color: rgba(255,255,255,0.4);
	}
	100% {
		background-color: rgba(255,255,255,0);
	}
}
@-ms-keyframes tmbover {
	0% {
		background-color: rgba(255,255,255,0);
	}
	10% {
		background-color: rgba(255,255,255,0.4);
	}
	100% {
		background-color: rgba(255,255,255,0);
	}
}

ul.graphic-list li.image1{background-image: url(../img/graphic/tmb1.jpg);}
ul.graphic-list li.image2{background-image: url(../img/graphic/tmb2.jpg);}
ul.graphic-list li.image3{background-image: url(../img/graphic/tmb3.jpg);}
ul.graphic-list li.image4{background-image: url(../img/graphic/tmb4.jpg);}
ul.graphic-list li.image5{background-image: url(../img/graphic/tmb5.jpg);}
ul.graphic-list li.image6{background-image: url(../img/graphic/tmb6.jpg);}
ul.graphic-list li.image7{background-image: url(../img/graphic/tmb7.jpg);}
ul.graphic-list li.image8{background-image: url(../img/graphic/tmb8.jpg);}
ul.graphic-list li.image9{background-image: url(../img/graphic/tmb9.jpg);}
ul.graphic-list li.image10{background-image: url(../img/graphic/tmb10.jpg);}
ul.graphic-list li.image11{background-image: url(../img/graphic/tmb11.jpg);}
ul.graphic-list li.image12{background-image: url(../img/graphic/tmb12.jpg);}
ul.graphic-list li.image13{background-image: url(../img/graphic/tmb13.jpg);}
ul.graphic-list li.image14{background-image: url(../img/graphic/tmb14.jpg);}
ul.graphic-list li.image15{background-image: url(../img/graphic/tmb15.jpg);}
ul.graphic-list li.image16{background-image: url(../img/graphic/tmb16.jpg);}
ul.graphic-list li.image17{background-image: url(../img/graphic/tmb17.jpg);}
ul.graphic-list li.image18{background-image: url(../img/graphic/tmb18.jpg);}
ul.graphic-list li.image19{background-image: url(../img/graphic/tmb19.jpg);}
ul.graphic-list li.image20{background-image: url(../img/graphic/tmb20.jpg);}
ul.graphic-list li.image21{background-image: url(../img/graphic/tmb21.jpg);}
ul.graphic-list li.image22{background-image: url(../img/graphic/tmb22.jpg);}
ul.graphic-list li.image23{background-image: url(../img/graphic/tmb23.jpg);}
ul.graphic-list li.image24{background-image: url(../img/graphic/tmb24.jpg);}
ul.graphic-list li.image25{background-image: url(../img/graphic/tmb25.jpg);}
ul.graphic-list li.image26{background-image: url(../img/graphic/tmb26.jpg);}
ul.graphic-list li.image27{background-image: url(../img/graphic/tmb27.jpg);}
ul.graphic-list li.image28{background-image: url(../img/graphic/tmb28.jpg);}
ul.graphic-list li.image29{background-image: url(../img/graphic/tmb29.jpg);}
ul.graphic-list li.image30{background-image: url(../img/graphic/tmb30.jpg);}
ul.graphic-list li.image31{background-image: url(../img/graphic/tmb31.jpg);}
ul.graphic-list li.image32{background-image: url(../img/graphic/tmb32.jpg);}
ul.graphic-list li.image33{background-image: url(../img/graphic/tmb33.jpg);}
ul.graphic-list li.image34{background-image: url(../img/graphic/tmb34.jpg);}
ul.graphic-list li.image35{background-image: url(../img/graphic/tmb35.jpg);}
ul.graphic-list li.image36{background-image: url(../img/graphic/tmb36.jpg);}
ul.graphic-list li.image37{background-image: url(../img/graphic/tmb37.jpg);}
ul.graphic-list li.image38{background-image: url(../img/graphic/tmb38.jpg);}
ul.graphic-list li.image39{background-image: url(../img/graphic/tmb39.jpg);}
ul.graphic-list li.image40{background-image: url(../img/graphic/tmb40.jpg);}